/* ==========================================================
   Inner pages: shared banner + premium components
   ========================================================== */
:root {
  --brand-orange: #f87230;
  --brand-amber: #f99331;
  --brand-red: #f6492c;
  --brand-purple: #6c0dc5;
  --brand-indigo: #3a117c;
  --brand-lilac: #f5e9ff;
  --brand-pink: #bb2068;
  --ink: #17121f;
  --muted: #5d5768;
  --card-shadow: 0 20px 50px rgba(58, 17, 124, .10);
}

body.inner { background: #fff; color: var(--ink); }
.main-nav .nav-link.active { color: #f99331; }
.main-nav .nav-link::after { bottom: -8px !important; }
.main-nav .nav-link.active::after { transform: scaleX(1); }

.grad-text { background: linear-gradient(90deg, #f6492c, #d3229a 55%, #6c0dc5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section { padding: 110px 0; }
.section--tight { padding: 80px 0; }
.section--lilac { background: linear-gradient(180deg, #faf3ff, #f5e9ff); }
.head-center { max-width: 760px; margin: 0 auto 64px; text-align: center; }
.head-center .eyebrow { margin-bottom: 14px; }
.head-center h2 { font-size: 44px; line-height: 1.2; font-weight: 800; margin: 0 0 18px; color: var(--ink); }
.head-center p { font-family: 'Inter', sans-serif; font-size: 18px; line-height: 30px; color: var(--muted); margin: 0; }
.lead { font-family: 'Inter', sans-serif; font-size: 18px; line-height: 30px; color: var(--muted); }
.body-text { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 27px; color: var(--muted); }
.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 30px; font-size: 14px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--brand-purple); background: rgba(108, 13, 197, .08); border: 1px solid rgba(108, 13, 197, .15); margin-bottom: 18px;
}
.eyebrow-pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #f6492c, #6c0dc5); }
.ico { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Page banner (dark blurred rainbow, centred title) ---------- */
.page-banner { position: relative; overflow: hidden; text-align: center; color: #fff; height: 400px; padding: 0; display: flex; align-items: center; justify-content: center; background: #150d0d; }
.page-banner::before { content: ''; position: absolute; inset: -60px; z-index: 0; background: url('../assets/images/testimonials-bg.jpg') center / cover; filter: blur(26px) saturate(1.7) brightness(.95); }
.page-banner::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(rgba(20, 0, 8, .3), rgba(0, 0, 0, .5)); }
.page-banner .container { position: relative; z-index: 2; width: 100%; }
.page-banner h1 { font-size: 44px; line-height: 55px; font-weight: 700; margin: 0 0 16px; color: #fff; }
.crumbs { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 28px; border-radius: 30px; font-family: 'Mulish', sans-serif; font-size: 14px; background: #6c0dc5; transition: background .25s, transform .25s; }
.crumbs:hover { background: #7b1fd8; transform: translateY(-2px); }
.crumbs a, .crumbs b { color: #fff; text-decoration: none; font-weight: 400; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { opacity: .8; }
.banner-search { display: flex; align-items: center; gap: 12px; max-width: 620px; height: 64px; padding: 0 10px 0 24px; border-radius: 40px; background: #fff; border: 1px solid #efe6f8; box-shadow: 0 20px 40px rgba(58, 17, 124, .12); }
.banner-search input { flex: 1; min-width: 0; border: 0; outline: 0; font-family: 'Inter', sans-serif; font-size: 17px; color: var(--ink); background: transparent; }
.banner-search .ico { color: #999; }
.banner-search button { height: 46px; padding: 0 26px; border: 0; border-radius: 30px; background: var(--brand-purple); color: #fff; font-weight: 700; }
.legal-note { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--muted); padding: 14px 18px; border-radius: 14px; background: #faf3ff; margin-bottom: 34px; }
.article-title { font-size: 40px; line-height: 1.2; font-weight: 800; margin: 0 0 18px; }

/* ---------- Generic cards ---------- */
.card-premium { position: relative; height: 100%; padding: 36px 32px; border-radius: 24px; background: #fff; border: 1px solid #efe6f8; box-shadow: var(--card-shadow); overflow: hidden; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.card-premium::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #f6492c, #f99331, #6c0dc5); transform: scaleX(0); transform-origin: left; transition: transform .4s ease; }
.card-premium:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(58, 17, 124, .18); border-color: #e2cdf5; }
.card-premium:hover::before { transform: scaleX(1); }
.icon-badge { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 20px; color: #fff; margin-bottom: 24px; background: linear-gradient(135deg, #f6492c, #f99331); box-shadow: 0 12px 24px rgba(246, 73, 44, .3); transition: transform .35s ease; }
.icon-badge.purple { background: linear-gradient(135deg, #6c0dc5, #b04cf0); box-shadow: 0 12px 24px rgba(108, 13, 197, .3); }
.icon-badge.pink { background: linear-gradient(135deg, #d3229a, #ff88ff); box-shadow: 0 12px 24px rgba(211, 34, 154, .3); }
.icon-badge.green { background: linear-gradient(135deg, #2a9a8a, #3cb043); box-shadow: 0 12px 24px rgba(42, 154, 138, .3); }
.icon-badge .ico { width: 30px; height: 30px; }
.card-premium:hover .icon-badge { transform: rotate(-8deg) scale(1.08); }
.card-premium h3 { font-size: 22px; font-weight: 800; margin: 0 0 12px; color: var(--ink); }
.card-premium p { font-family: 'Inter', sans-serif; font-size: 15.5px; line-height: 26px; color: var(--muted); margin: 0; }

/* ---------- Buttons ---------- */
.btn-ghost { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 30px; border-radius: 40px; border: 2px solid rgba(255, 255, 255, .7); color: #fff; text-decoration: none; font-weight: 700; transition: background .25s, color .25s, transform .25s; }
.btn-ghost:hover { background: #fff; color: var(--brand-purple); transform: translateY(-3px); }
.btn-ghost.dark { border-color: var(--brand-purple); color: var(--brand-purple); }
.btn-ghost.dark:hover { background: var(--brand-purple); color: #fff; }
.btn-solid { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 32px; border-radius: 40px; border: 0; color: #fff; background: linear-gradient(90deg, #6c0dc5, #8b2be2); font-weight: 700; text-decoration: none; box-shadow: 0 12px 26px rgba(108, 13, 197, .35); transition: transform .25s, box-shadow .25s; }
.btn-solid:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 18px 34px rgba(108, 13, 197, .45); }
.btn-orange { background: linear-gradient(90deg, #f6492c, #f99331); box-shadow: 0 12px 26px rgba(246, 73, 44, .35); }
.btn-orange:hover { box-shadow: 0 18px 34px rgba(246, 73, 44, .45); }
.btn-solid .ico { width: 20px; height: 20px; }

/* ---------- Check list ---------- */
.check-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.check-list li { display: flex; align-items: flex-start; gap: 14px; font-family: 'Inter', sans-serif; font-size: 16px; line-height: 26px; color: var(--ink); }
.check-list .tick { flex: none; width: 26px; height: 26px; margin-top: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #3cb043, #2a9a8a); }
.check-list .tick .ico { width: 14px; height: 14px; stroke-width: 2.6; }

/* ---------- Stats band ---------- */
.stats-band { position: relative; overflow: hidden; padding: 90px 0; color: #fff; background: linear-gradient(120deg, #3a117c, #6c0dc5 60%, #9a2be0); }
.stats-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(40% 80% at 90% 0, rgba(249, 147, 49, .35), transparent 60%), radial-gradient(35% 70% at 0 100%, rgba(246, 73, 44, .3), transparent 60%); }
.stat { position: relative; text-align: center; padding: 10px 16px; }
.stat + .stat::before { content: ''; position: absolute; left: 0; top: 14%; height: 72%; width: 1px; background: rgba(255, 255, 255, .22); }
.stat b { display: block; font-size: 60px; line-height: 1; font-weight: 800; background: linear-gradient(90deg, #fff, #ffd9a8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { display: block; margin-top: 12px; font-family: 'Inter', sans-serif; font-size: 16px; color: rgba(255, 255, 255, .85); }

/* ---------- Split image ---------- */
.img-stack { position: relative; padding: 0 0 60px 0; }
.img-stack .main { display: block; width: 88%; height: 560px; object-fit: cover; border-radius: 28px; box-shadow: 0 30px 70px rgba(58, 17, 124, .25); }
.img-stack .float-img { position: absolute; right: 0; bottom: 0; width: 52%; height: 260px; object-fit: cover; border-radius: 22px; border: 8px solid #fff; box-shadow: 0 24px 50px rgba(0, 0, 0, .2); }
.glass-badge { position: absolute; left: -24px; top: 44px; display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-radius: 20px; background: rgba(255, 255, 255, .85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 20px 40px rgba(0, 0, 0, .15); animation: floaty 5s ease-in-out infinite; }
.glass-badge .icon-badge { width: 48px; height: 48px; margin: 0; border-radius: 14px; }
.glass-badge .icon-badge .ico { width: 24px; height: 24px; }
.glass-badge b { display: block; font-size: 20px; line-height: 1.1; }
.glass-badge small { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--muted); }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- Big CTA ---------- */
.cta-band { position: relative; overflow: hidden; border-radius: 32px; padding: 80px 60px; text-align: center; color: #fff; background: linear-gradient(120deg, #3a117c, #6c0dc5 55%, #b04cf0); box-shadow: 0 30px 70px rgba(58, 17, 124, .35); }
.cta-band::before, .cta-band::after { content: ''; position: absolute; border-radius: 50%; }
.cta-band::before { width: 420px; height: 420px; right: -120px; top: -160px; background: radial-gradient(circle, rgba(249, 147, 49, .55), transparent 65%); }
.cta-band::after { width: 380px; height: 380px; left: -120px; bottom: -180px; background: radial-gradient(circle, rgba(246, 73, 44, .45), transparent 65%); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { font-size: 44px; line-height: 1.2; font-weight: 800; margin: 0 0 16px; }
.cta-band p { font-family: 'Inter', sans-serif; font-size: 18px; line-height: 30px; max-width: 620px; margin: 0 auto 34px; color: rgba(255, 255, 255, .9); }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

/* ---------- Steps (How it works) ---------- */
.step-row { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; padding: 50px 0; }
.step-row:nth-child(even) .step-visual { order: -1; }
.step-num { font-size: 120px; line-height: .9; font-weight: 800; color: transparent; -webkit-text-stroke: 2px rgba(108, 13, 197, .25); margin-bottom: 6px; }
.step-copy h3 { font-size: 36px; line-height: 1.2; font-weight: 800; margin: 0 0 16px; }
.step-visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 420px; border-radius: 32px; background: linear-gradient(135deg, #faf3ff, #f0dcff); overflow: hidden; }
.step-visual::before { content: ''; position: absolute; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(249, 147, 49, .35), transparent 65%); right: -80px; top: -100px; }
.mock { position: relative; z-index: 1; width: min(340px, 86%); padding: 22px; border-radius: 24px; background: #fff; box-shadow: 0 30px 60px rgba(58, 17, 124, .2); font-family: 'Inter', sans-serif; }
.mock-head { display: flex; align-items: center; gap: 14px; }
.mock-head img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; }
.mock-head b { display: block; font-size: 17px; color: var(--ink); font-family: 'Mulish', sans-serif; }
.mock-head small { color: var(--muted); }
.progress { height: 8px; border-radius: 8px; background: #efe6f8; margin: 18px 0 8px; overflow: hidden; }
.progress i { display: block; height: 100%; width: 78%; border-radius: 8px; background: linear-gradient(90deg, #f6492c, #f99331); }
.mock small.cap { color: var(--muted); font-size: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip { padding: 7px 14px; border-radius: 20px; font-size: 13px; background: #f3e8ff; color: var(--brand-indigo); font-weight: 600; }
.chip.on { background: linear-gradient(90deg, #6c0dc5, #9a2be0); color: #fff; }
.mock-photo { position: relative; border-radius: 18px; overflow: hidden; }
.mock-photo img { display: block; width: 100%; height: 230px; object-fit: cover; }
.match-pill { position: absolute; left: 12px; top: 12px; padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(90deg, #f6492c, #d3229a); }
.mock-actions { display: flex; justify-content: center; gap: 16px; margin-top: 16px; }
.mock-actions span { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #f5f0fa; color: var(--brand-purple); }
.mock-actions span.love { color: #fff; background: linear-gradient(135deg, #f6492c, #d3229a); box-shadow: 0 10px 20px rgba(211, 34, 154, .4); }
.bubble { max-width: 82%; padding: 12px 16px; margin-top: 10px; border-radius: 18px 18px 18px 4px; background: #f3e8ff; color: var(--ink); font-size: 14px; line-height: 21px; }
.bubble.me { margin-left: auto; border-radius: 18px 18px 4px 18px; color: #fff; background: linear-gradient(90deg, #6c0dc5, #9a2be0); }
.float-chip { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 16px; background: #fff; box-shadow: 0 16px 34px rgba(0, 0, 0, .15); font-size: 13px; font-weight: 700; animation: floaty 5s ease-in-out infinite; }
.float-chip .ico { width: 20px; height: 20px; color: var(--brand-orange); }

/* ---------- Tabs / filters ---------- */
.pill-tabs { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 44px; }
.pill-tab { padding: 12px 26px; border-radius: 40px; border: 1px solid #e6d8f5; background: #fff; color: var(--ink); font-weight: 700; font-size: 15px; transition: all .25s ease; }
.pill-tab:hover { border-color: var(--brand-purple); color: var(--brand-purple); transform: translateY(-2px); }
.pill-tab.active { color: #fff; border-color: transparent; background: linear-gradient(90deg, #6c0dc5, #9a2be0); box-shadow: 0 10px 22px rgba(108, 13, 197, .32); }

/* ---------- FAQ page ---------- */
.faq-group { margin-bottom: 44px; }
.faq-group h3 { display: flex; align-items: center; gap: 14px; font-size: 26px; font-weight: 800; margin: 0 0 18px; }
.faq-group h3 .icon-badge { width: 46px; height: 46px; margin: 0; border-radius: 14px; }
.faq-group h3 .icon-badge .ico { width: 22px; height: 22px; }
.faq-page .accordion-item { margin-bottom: 14px; border: 1px solid #efe6f8; border-radius: 18px !important; overflow: hidden; background: #fff; box-shadow: 0 8px 22px rgba(58, 17, 124, .05); transition: box-shadow .3s, border-color .3s; }
.faq-page .accordion-item:hover { border-color: #d8b9f3; box-shadow: 0 14px 30px rgba(58, 17, 124, .12); }
.faq-page .accordion-button { padding: 22px 26px; font-family: 'Mulish', sans-serif; font-size: 18px; font-weight: 700; color: var(--ink); background: #fff; box-shadow: none; }
.faq-page .accordion-button:not(.collapsed) { color: var(--brand-purple); background: linear-gradient(90deg, #faf3ff, #fff); }
.faq-page .accordion-button::after { background-size: 18px; filter: hue-rotate(250deg); }
.faq-page .accordion-body { padding: 4px 26px 26px; font-family: 'Inter', sans-serif; font-size: 16px; line-height: 27px; color: var(--muted); }
.no-results { display: none; text-align: center; padding: 60px 20px; border-radius: 24px; background: #faf3ff; font-family: 'Inter', sans-serif; color: var(--muted); }
.no-results.show { display: block; }
.help-card { position: sticky; top: 30px; padding: 40px 32px; border-radius: 28px; color: #fff; text-align: center; background: linear-gradient(140deg, #3a117c, #6c0dc5 60%, #9a2be0); box-shadow: 0 30px 60px rgba(58, 17, 124, .3); overflow: hidden; }
.help-card::before { content: ''; position: absolute; width: 260px; height: 260px; border-radius: 50%; right: -90px; top: -90px; background: radial-gradient(circle, rgba(249, 147, 49, .6), transparent 65%); }
.help-card > * { position: relative; }
.help-card .icon-badge { margin: 0 auto 20px; }
.help-card h3 { font-size: 26px; font-weight: 800; margin: 0 0 12px; }
.help-card p { font-family: 'Inter', sans-serif; font-size: 15px; line-height: 25px; color: rgba(255, 255, 255, .85); margin: 0 0 26px; }

/* ---------- Blog ---------- */
.featured { display: grid; grid-template-columns: 1.15fr 1fr; border-radius: 32px; overflow: hidden; background: #fff; border: 1px solid #efe6f8; box-shadow: 0 30px 70px rgba(58, 17, 124, .14); }
.featured-img { position: relative; min-height: 460px; overflow: hidden; }
.featured-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.featured:hover .featured-img img { transform: scale(1.06); }
.featured-body { padding: 56px 52px; display: flex; flex-direction: column; justify-content: center; }
.featured-body h2 { font-size: 36px; line-height: 1.2; font-weight: 800; margin: 16px 0; }
.tag { display: inline-block; align-self: flex-start; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: linear-gradient(90deg, #f6492c, #f99331); }
.tag.purple { background: linear-gradient(90deg, #6c0dc5, #9a2be0); }
.tag.pink { background: linear-gradient(90deg, #d3229a, #ff62c0); }
.tag.green { background: linear-gradient(90deg, #2a9a8a, #3cb043); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-family: 'Inter', sans-serif; font-size: 14px; color: var(--muted); }
.meta span { display: inline-flex; align-items: center; gap: 6px; }
.meta .ico { width: 16px; height: 16px; }
.meta img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.post-card { height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; background: #fff; border: 1px solid #efe6f8; box-shadow: var(--card-shadow); transition: transform .35s ease, box-shadow .35s ease; }
.post-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(58, 17, 124, .18); }
.post-card .thumb { position: relative; height: 240px; overflow: hidden; }
.post-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.post-card:hover .thumb img { transform: scale(1.08); }
.post-card .thumb .tag { position: absolute; left: 18px; top: 18px; }
.post-card .body { display: flex; flex-direction: column; flex: 1; padding: 26px 26px 28px; }
.post-card h3 { font-size: 22px; line-height: 1.3; font-weight: 800; margin: 14px 0 10px; }
.post-card h3 a { color: var(--ink); text-decoration: none; transition: color .25s; }
.post-card h3 a:hover { color: var(--brand-purple); }
.post-card p { font-family: 'Inter', sans-serif; font-size: 15px; line-height: 25px; color: var(--muted); margin: 0 0 18px; }
.post-card .more { margin-top: auto; }
.read-more { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; color: var(--brand-pink); text-decoration: none; }
.read-more .ico { width: 18px; height: 18px; transition: transform .25s; }
.read-more:hover { color: var(--brand-purple); }
.read-more:hover .ico { transform: translateX(6px); }
.pagination-x { display: flex; justify-content: center; gap: 10px; margin-top: 56px; }
.pagination-x a { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid #e6d8f5; color: var(--ink); text-decoration: none; font-weight: 700; transition: all .25s; }
.pagination-x a:hover { border-color: var(--brand-purple); color: var(--brand-purple); transform: translateY(-3px); }
.pagination-x a.active { color: #fff; border-color: transparent; background: linear-gradient(135deg, #6c0dc5, #9a2be0); box-shadow: 0 10px 20px rgba(108, 13, 197, .35); }
.subscribe-box { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px; padding: 48px 56px; border-radius: 28px; background: linear-gradient(120deg, #fff4e9, #f5e9ff); border: 1px solid #f1dcf7; }
.subscribe-box h3 { font-size: 30px; font-weight: 800; margin: 0 0 8px; }
.subscribe-box p { margin: 0; font-family: 'Inter', sans-serif; color: var(--muted); }
.subscribe-form { display: flex; gap: 10px; padding: 6px; border-radius: 40px; background: #fff; box-shadow: 0 12px 28px rgba(58, 17, 124, .12); min-width: 420px; }
.subscribe-form input { flex: 1; min-width: 0; padding: 0 20px; border: 0; outline: 0; background: transparent; font-family: 'Inter', sans-serif; }
.subscribe-form button { height: 50px; padding: 0 28px; border: 0; border-radius: 30px; color: #fff; font-weight: 700; background: linear-gradient(90deg, #6c0dc5, #9a2be0); }

/* ---------- Article ---------- */
.article-hero { position: relative; padding-top: 80px; }
.article-hero img { display: block; width: 100%; height: 520px; object-fit: cover; border-radius: 32px; box-shadow: 0 40px 80px rgba(58, 17, 124, .3); }
.article h2 { font-size: 32px; line-height: 1.25; font-weight: 800; margin: 44px 0 16px; }
.article p { font-family: 'Inter', sans-serif; font-size: 17.5px; line-height: 31px; color: #3a3543; margin: 0 0 22px; }
.article ul { font-family: 'Inter', sans-serif; font-size: 17px; line-height: 30px; color: #3a3543; padding-left: 22px; margin-bottom: 22px; }
.article ul li::marker { color: var(--brand-orange); }
.article blockquote { position: relative; margin: 38px 0; padding: 32px 36px 32px 44px; border-radius: 22px; font-size: 22px; line-height: 34px; font-weight: 700; font-style: italic; color: var(--brand-indigo); background: linear-gradient(120deg, #fff4e9, #f5e9ff); border-left: 6px solid var(--brand-orange); }
.share { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 26px 0; margin-top: 30px; border-top: 1px solid #efe6f8; border-bottom: 1px solid #efe6f8; font-weight: 800; }
.share a { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: #f5eefb; color: var(--brand-purple); transition: all .25s; }
.share a:hover { background: linear-gradient(135deg, #f6492c, #f99331); color: #fff; transform: translateY(-3px); }
.author-box { display: flex; gap: 22px; align-items: center; margin-top: 40px; padding: 30px; border-radius: 24px; background: #faf3ff; }
.author-box img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; }
.author-box b { display: block; font-size: 20px; margin-bottom: 4px; }
.author-box p { margin: 0; font-size: 15px; line-height: 25px; }
.side-card { padding: 30px; margin-bottom: 28px; border-radius: 24px; background: #fff; border: 1px solid #efe6f8; box-shadow: var(--card-shadow); }
.side-card h4 { font-size: 20px; font-weight: 800; margin: 0 0 18px; }
.side-search { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; border-radius: 30px; background: #f5f0fa; }
.side-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-family: 'Inter', sans-serif; }
.cat-list { list-style: none; margin: 0; padding: 0; }
.cat-list li a { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px dashed #e6d8f5; color: var(--ink); text-decoration: none; font-family: 'Inter', sans-serif; transition: color .25s, padding .25s; }
.cat-list li:last-child a { border-bottom: 0; }
.cat-list li a:hover { color: var(--brand-purple); padding-left: 8px; }
.cat-list b { min-width: 30px; text-align: center; border-radius: 20px; font-size: 13px; color: var(--brand-purple); background: #f3e8ff; }
.recent { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; text-decoration: none; }
.recent img { width: 74px; height: 74px; border-radius: 16px; object-fit: cover; flex: none; }
.recent b { display: block; font-size: 15px; line-height: 21px; color: var(--ink); transition: color .25s; }
.recent:hover b { color: var(--brand-purple); }
.recent small { font-family: 'Inter', sans-serif; color: var(--muted); }
.side-cta { padding: 34px 28px; border-radius: 24px; text-align: center; color: #fff; background: linear-gradient(140deg, #f6492c, #f99331); box-shadow: 0 24px 50px rgba(246, 73, 44, .3); }
.side-cta h4 { font-size: 24px; font-weight: 800; margin-bottom: 10px; }
.side-cta p { font-family: 'Inter', sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 22px; color: rgba(255, 255, 255, .92); }
.sticky-side { position: sticky; top: 30px; }

/* ---------- Contact ---------- */
.contact-cards { padding-top: 80px; position: relative; }
.contact-form-card { padding: 50px; border-radius: 32px; background: #fff; border: 1px solid #efe6f8; box-shadow: 0 30px 70px rgba(58, 17, 124, .14); }
.contact-form-card h2 { font-size: 34px; font-weight: 800; margin: 0 0 8px; }
.field-x { position: relative; margin-bottom: 20px; }
.field-x label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 8px; color: var(--ink); }
.field-x input, .field-x select, .field-x textarea { width: 100%; padding: 15px 18px; border-radius: 14px; border: 1.5px solid #e9dff3; background: #fbf8fe; font-family: 'Inter', sans-serif; font-size: 15.5px; color: var(--ink); outline: 0; transition: border-color .25s, box-shadow .25s, background .25s; }
.field-x textarea { min-height: 150px; resize: vertical; }
.field-x input:focus, .field-x select:focus, .field-x textarea:focus { border-color: var(--brand-purple); background: #fff; box-shadow: 0 0 0 4px rgba(108, 13, 197, .12); }
.field-x .err { display: none; margin-top: 6px; font-family: 'Inter', sans-serif; font-size: 13px; color: #d3224b; }
.field-x.invalid input, .field-x.invalid select, .field-x.invalid textarea { border-color: #d3224b; }
.field-x.invalid .err { display: block; }
.contact-side { height: 100%; padding: 50px 44px; border-radius: 32px; color: #fff; background: linear-gradient(150deg, #3a117c, #6c0dc5 60%, #9a2be0); position: relative; overflow: hidden; box-shadow: 0 30px 70px rgba(58, 17, 124, .3); }
.contact-side::before { content: ''; position: absolute; width: 320px; height: 320px; border-radius: 50%; right: -100px; bottom: -110px; background: radial-gradient(circle, rgba(249, 147, 49, .6), transparent 65%); }
.contact-side > * { position: relative; }
.contact-side h3 { font-size: 28px; font-weight: 800; margin: 0 0 12px; }
.contact-side p { font-family: 'Inter', sans-serif; line-height: 26px; color: rgba(255, 255, 255, .85); }
.info-line { display: flex; align-items: center; gap: 16px; margin-top: 26px; }
.info-line .ico-wrap { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 16px; background: rgba(255, 255, 255, .16); flex: none; }
.info-line small { display: block; font-family: 'Inter', sans-serif; opacity: .75; }
.info-line b { font-size: 17px; }
.toast-x { position: fixed; left: 50%; bottom: 40px; z-index: 100; display: flex; align-items: center; gap: 12px; padding: 16px 26px; border-radius: 40px; color: #fff; font-weight: 700; background: #17121f; box-shadow: 0 20px 40px rgba(0, 0, 0, .3); transform: translate(-50%, 30px); opacity: 0; visibility: hidden; transition: all .4s ease; }
.toast-x.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.toast-x .ico { color: #3cb043; }

/* ---------- Legal ---------- */
.legal-toc { position: sticky; top: 30px; padding: 30px; border-radius: 24px; background: #faf3ff; }
.legal-toc h4 { font-size: 18px; font-weight: 800; margin: 0 0 14px; }
.legal-toc a { display: block; padding: 9px 14px; margin-bottom: 4px; border-radius: 12px; font-family: 'Inter', sans-serif; font-size: 15px; color: var(--muted); text-decoration: none; transition: all .25s; }
.legal-toc a:hover, .legal-toc a.active { color: var(--brand-purple); background: #fff; box-shadow: 0 6px 14px rgba(58, 17, 124, .1); }
.legal h2 { font-size: 28px; font-weight: 800; margin: 0 0 14px; scroll-margin-top: 30px; }
.legal section { padding-bottom: 34px; margin-bottom: 34px; border-bottom: 1px solid #efe6f8; }
.legal section:last-child { border-bottom: 0; }
.legal p, .legal li { font-family: 'Inter', sans-serif; font-size: 16.5px; line-height: 29px; color: #3a3543; }

/* ---------- Auth ---------- */
.auth { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; font-family: 'Mulish', sans-serif; }
.auth-visual { position: relative; overflow: hidden; color: #fff; padding: 46px 64px; display: flex; flex-direction: column; justify-content: space-between; background: #150d0d; }
.auth-visual > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% center; opacity: .9; }
.auth-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(246, 73, 44, .82), rgba(58, 17, 124, .82)); mix-blend-mode: multiply; }
.auth-visual > *:not(.bg) { position: relative; z-index: 2; }
.auth-visual h2 { font-size: 46px; line-height: 1.15; font-weight: 800; margin: 0 0 16px; }
.auth-visual p { font-family: 'Inter', sans-serif; font-size: 18px; line-height: 30px; max-width: 480px; color: rgba(255, 255, 255, .92); }
.auth-quote { padding: 26px 28px; border-radius: 22px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); max-width: 520px; }
.auth-quote p { font-size: 16px; line-height: 27px; font-style: italic; margin: 0 0 14px; }
.auth-quote .who { display: flex; align-items: center; gap: 12px; }
.auth-quote img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.auth-panel { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: #fff; }
.auth-box { width: 100%; max-width: 470px; }
.auth-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 34px; font-family: 'Inter', sans-serif; }
.auth-top a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.auth-top a:hover { color: var(--brand-purple); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; margin-bottom: 30px; border-radius: 40px; background: #f5f0fa; }
.auth-tab { height: 50px; border: 0; border-radius: 30px; background: transparent; font-weight: 800; color: var(--muted); transition: all .3s ease; }
.auth-tab.active { color: #fff; background: linear-gradient(90deg, #6c0dc5, #9a2be0); box-shadow: 0 10px 22px rgba(108, 13, 197, .35); }
.auth-box h1 { font-size: 34px; font-weight: 800; margin: 0 0 8px; }
.auth-sub { font-family: 'Inter', sans-serif; color: var(--muted); margin-bottom: 28px; }
.auth-form { display: none; }
.auth-form.active { display: block; animation: fadeUp .5s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.pw-wrap { position: relative; }
.pw-wrap button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); }
.pw-wrap button:hover { color: var(--brand-purple); background: #f3e8ff; }
.row-x { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 24px; font-family: 'Inter', sans-serif; font-size: 14.5px; }
.row-x label { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.row-x input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand-purple); }
.row-x a { color: var(--brand-purple); font-weight: 700; text-decoration: none; }
.auth-form .btn-solid { width: 100%; justify-content: center; }
.divider { display: flex; align-items: center; gap: 14px; margin: 26px 0; color: #aaa; font-family: 'Inter', sans-serif; font-size: 14px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: #eadff5; }
.social-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.social-btns button { height: 52px; border-radius: 30px; border: 1.5px solid #e9dff3; background: #fff; font-weight: 700; color: var(--ink); transition: all .25s; }
.social-btns button:hover { border-color: var(--brand-purple); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(58, 17, 124, .1); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
  .step-row { gap: 50px; }
}
@media (max-width: 991.98px) {
  .section { padding: 72px 0; }
  .page-banner { height: 300px; }
  .page-banner h1 { font-size: 34px; line-height: 44px; }
  .head-center h2, .cta-band h2 { font-size: 32px; }
  .step-row { grid-template-columns: 1fr; padding: 30px 0; }
  .step-row:nth-child(even) .step-visual { order: 0; }
  .step-num { font-size: 84px; }
  .featured { grid-template-columns: 1fr; }
  .featured-img { min-height: 280px; }
  .featured-body { padding: 34px 26px; }
  .subscribe-box { grid-template-columns: 1fr; padding: 34px 26px; }
  .subscribe-form { min-width: 0; }
  .stat + .stat::before { display: none; }
  .stat b { font-size: 44px; }
  .img-stack .main { height: 380px; }
  .glass-badge { left: 8px; }
  .contact-form-card, .contact-side { padding: 32px 24px; }
  .article-hero img { height: 300px; }
  .cta-band { padding: 56px 24px; }
  .auth { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
  .sticky-side, .help-card, .legal-toc { position: static; }
}
@media (max-width: 575.98px) {
  .two-col { grid-template-columns: 1fr; }
  .social-btns { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .glass-badge, .float-chip { animation: none; }
}

.row-x.invalid, .row-x.invalid label { color: #d3224b; }

.social a { color: #fff; }
.social .ico { width: 20px; height: 20px; stroke: #fff; }
.contact-side .social a { background: rgba(255,255,255,.18); }
.contact-side .social a:hover { background: #f87230; }