/* =========================================================
   MUDRAHUB — v2 design tokens
   Modern fintech SaaS look: white canvas, indigo + teal,
   soft pastel icon badges, generous whitespace, rounded cards.
   ========================================================= */

/* Smooth cross-fade between pages in browsers that support the
   View Transitions API (progressive enhancement — no effect,
   no error, in browsers that don't). By default the browser
   scales/morphs the old and new page snapshots to match each
   other's size, which looks broken and misaligned when two pages
   have different heights (very common on this site) — so we
   override it to a plain, non-distorting fade instead. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
  height: auto;
}
::view-transition-old(root) { animation: mh-fade-out .18s ease both; }
::view-transition-new(root) { animation: mh-fade-in .18s ease both; }
@keyframes mh-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes mh-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

:root {
  --primary: #0B5897;
  --primary-dark: #073E68;
  --primary-light: #E7F1FA;
  --teal: #F58730;
  --teal-light: #FFF1E3;
  --accent-ink: #C2410C; /* WCAG-AA-safe darker orange, for text/icons on light backgrounds */
  --ink: #0F172A;
  --text: #1E293B;
  --text-soft: #64748B;
  --text-faint: #64748B;
  --bg: #FFFFFF;
  --bg-soft: #F8FAFC;
  --bg-mute: #F1F5F9;
  --surface: #FFFFFF;
  --surface-2: #FFFFFF;
  --border: #E7EBF3;
  --ok: #16A34A;
  --warn: #DC2626;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 12px 32px -12px rgba(15, 23, 42, 0.14);
  --shadow-lg: 0 24px 60px -18px rgba(11, 88, 151, 0.28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 84px; }
:focus-visible { outline: 2.5px solid var(--primary); outline-offset: 2px; }
body {
  margin: 0;
  font-family: "Plus Jakarta Sans", -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 0;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 {
  font-family: "Plus Jakarta Sans", sans-serif;
  margin: 0;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.mono { font-variant-numeric: tabular-nums; font-weight: 700; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; }
@media (max-width: 720px) { .section { padding: 56px 0; } }

/* ---------- shared ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--primary); background: var(--primary-light);
  padding: 7px 15px; border-radius: 999px;
}
.eyebrow svg { width: 14px; height: 14px; }

.sec-head { max-width: 620px; margin-bottom: 46px; }
.sec-head h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.14; margin: 16px 0 14px; }
.sec-head p { color: var(--text-soft); font-size: 17px; line-height: 1.6; margin: 0; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 28px; border-radius: 999px; font-weight: 700; font-size: 15px;
  border: 1.5px solid transparent; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 10px 24px -10px rgba(11,88,151,0.55); }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); }
.btn-outline { border-color: var(--border); color: var(--ink); background: var(--surface); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-white { background: #fff; color: var(--primary); }
.btn-white:hover { background: var(--primary-light); }
.btn-full { width: 100%; }
.btn-sm { padding: 10px 18px; font-size: 13.5px; }

/* ---------- scroll progress bar ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 90;
  background: linear-gradient(90deg, var(--primary), var(--teal));
  transition: width .12s linear; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .scroll-progress { display: none; } }

/* ---------- nav ---------- */
header.site-nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,0.85); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .2s ease, border-color .2s ease;
}
header.site-nav.scrolled { box-shadow: 0 4px 20px rgba(15,23,42,0.06); border-bottom-color: transparent; }
.nav-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; gap: 20px; transition: padding .25s ease; }
header.site-nav.scrolled .nav-row { padding: 11px 0; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 21px; color: var(--ink); }
.brand-logo { height: 34px; width: auto; display: block; transition: height .25s ease; }
header.site-nav.scrolled .brand-logo { height: 28px; }
.footer-brand .brand-logo-footer { height: 52px; margin-bottom: 4px; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links > a { font-size: 14.5px; font-weight: 600; color: var(--text); padding: 4px 0; margin-right: 0; position: relative; }
.nav-links > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--primary); transform: scaleX(0); transition: transform .15s ease; }
.nav-links > a:hover::after, .nav-links > a.active::after { transform: scaleX(1); }
.nav-links a:hover { color: var(--primary); }
.nav-links a.active { color: var(--primary); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-toggle { display: none; background: none; border: none; padding: 6px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.has-menu { position: relative; }
.has-menu > a { display: inline-flex; align-items: center; gap: 4px; }
.has-menu .chev { width: 14px; height: 14px; transition: transform .15s ease; }
.has-menu:hover .chev { transform: rotate(180deg); }
/* Invisible bridge over the gap between the nav link and the dropdown
   below it. Without this, moving the cursor down from the link to the
   menu crosses a dead zone that isn't part of .has-menu, so :hover is
   lost and the menu closes before you can click anything inside it.
   This doesn't change .has-menu's box model (unlike padding/margin
   tricks), so it can't disturb the nav row's layout or click targets. */
.has-menu::before {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px;
}
.mega {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: 10px; display: grid; grid-template-columns: 1fr 1fr;
  gap: 2px; width: 380px; opacity: 0; visibility: hidden; translate: 0 6px;
  transition: opacity .2s cubic-bezier(.16,1,.3,1), translate .2s cubic-bezier(.16,1,.3,1), visibility .2s;
}
.has-menu:hover .mega, .has-menu:focus-within .mega { opacity: 1; visibility: visible; translate: 0 0; }
.mega a { padding: 10px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.mega a:hover { background: var(--primary-light); color: var(--primary); }
@media (max-width: 940px) {
  .has-menu::before { display: none; }
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 86vw);
    background: var(--surface); z-index: 75; display: flex; flex-direction: column;
    align-items: stretch; padding: 92px 26px 26px; gap: 2px; overflow-y: auto;
    box-shadow: -24px 0 60px -18px rgba(15,23,42,0.35);
    transform: translateX(100%); transition: transform .32s cubic-bezier(.4,0,.2,1);
  }
  .nav-links.mobile-open { transform: translateX(0); }
  .nav-links > a { padding: 13px 2px; border-bottom: 1px solid var(--border); font-size: 15.5px; }
  .nav-links > a::after { display: none; }
  .has-menu { width: 100%; }
  .has-menu > a { justify-content: space-between; width: 100%; }
  /* links cascade in one after another instead of all appearing at once
     (nav-close is prepended by JS as the first child — excluded here
     since it's absolutely positioned and already handled by .nav-close) */
  .nav-links > *:not(.nav-close) { opacity: 0; translate: 18px 0; transition: opacity .3s ease, translate .3s ease; }
  .nav-links.mobile-open > *:not(.nav-close) { opacity: 1; translate: 0 0; }
  .nav-links.mobile-open > .has-menu:nth-child(2),
  .nav-links.mobile-open > a:nth-child(2) { transition-delay: .06s; }
  .nav-links.mobile-open > .has-menu:nth-child(3),
  .nav-links.mobile-open > a:nth-child(3) { transition-delay: .1s; }
  .nav-links.mobile-open > .has-menu:nth-child(4),
  .nav-links.mobile-open > a:nth-child(4) { transition-delay: .14s; }
  .nav-links.mobile-open > .has-menu:nth-child(5),
  .nav-links.mobile-open > a:nth-child(5) { transition-delay: .18s; }
  .nav-links.mobile-open > .has-menu:nth-child(6),
  .nav-links.mobile-open > a:nth-child(6) { transition-delay: .22s; }
  @media (prefers-reduced-motion: reduce) {
    .nav-links > *:not(.nav-close) { opacity: 1; translate: 0 0; transition: none; }
  }
}
@media (max-width: 940px) {
  .has-menu .mega {
    position: static; opacity: 1; visibility: visible; translate: 0 0;
    box-shadow: none; border: none; width: auto; grid-template-columns: 1fr;
    padding: 4px 0 4px 14px; display: none;
  }
  .has-menu.mobile-open .mega { display: flex; flex-direction: column; }
  .has-menu .mega a { padding: 9px 0; font-weight: 600; color: var(--text-soft); }
}

/* ---------- mobile nav scrim + close button ---------- */
.nav-scrim {
  position: fixed; inset: 0; background: rgba(8,12,20,0.5); backdrop-filter: blur(2px);
  z-index: 74; opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s ease;
}
.nav-scrim.show { opacity: 1; visibility: visible; }
.nav-close {
  display: none; position: absolute; top: 22px; right: 22px; width: 36px; height: 36px;
  border-radius: 50%; border: 1.5px solid var(--border); background: var(--bg-soft); color: var(--ink);
  align-items: center; justify-content: center;
}
.nav-close svg { width: 17px; height: 17px; }
@media (max-width: 940px) { .nav-close { display: flex; } body.nav-locked { overflow: hidden; } }
/* modal-open works at every viewport width, unlike .nav-locked which is mobile-nav-only */
body.modal-open { overflow: hidden; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: 68px 0 40px; background: var(--bg-soft); }
.hero::before {
  content: ""; position: absolute; top: -180px; right: -160px; width: 520px; height: 520px;
  border-radius: 50%; background: radial-gradient(circle, rgba(11,88,151,0.16), transparent 70%);
}
.hero::after {
  content: ""; position: absolute; bottom: -220px; left: -140px; width: 460px; height: 460px;
  border-radius: 50%; background: radial-gradient(circle, rgba(245,135,48,0.14), transparent 70%);
}
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 50px; align-items: center; }
.hero-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.hero-rating .stars { color: #F59E0B; font-size: 14px; letter-spacing: 1px; }
.hero-rating span { font-size: 13.5px; color: var(--text-soft); font-weight: 600; }
.hero h1 { font-size: clamp(36px, 4.4vw, 54px); line-height: 1.08; margin: 0 0 20px; }
.hero h1 span { color: var(--primary); }
.hero p.lead { color: var(--text-soft); font-size: 18px; line-height: 1.65; max-width: 480px; margin-bottom: 30px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 34px; }
.hero-trust { display: flex; gap: 26px; flex-wrap: wrap; margin-bottom: 28px; }
.hero-trust div strong { display: block; font-size: 22px; font-weight: 800; color: var(--ink); }
.hero-trust div span { font-size: 12.5px; color: var(--text-soft); }

.trust-badges { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.trust-badges span {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); padding: 8px 14px; border-radius: 999px; box-shadow: var(--shadow-sm);
}
.trust-badges svg { width: 15px; height: 15px; color: var(--accent-ink); flex-shrink: 0; }

.hero-visual { position: relative; height: 460px; }
.hv-card {
  position: absolute; background: var(--surface); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: 20px; border: 1px solid var(--border);
}
.hv-main {
  top: 30px; left: 30px; right: 30px; bottom: 30px;
  background: linear-gradient(160deg, var(--primary) 0%, #1479C9 100%);
  border-radius: var(--radius-lg); padding: 30px; color: #fff; display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: var(--shadow-lg);
}
.hv-main .hv-top { display: flex; justify-content: space-between; align-items: flex-start; }
.hv-main .hv-tag { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.75; font-weight: 700; }
.hv-main .hv-badge { background: rgba(255,255,255,0.18); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 700; }
.hv-main .hv-amt { font-size: 40px; font-weight: 800; }
.hv-main .hv-sub { font-size: 13.5px; opacity: 0.85; margin-top: 6px; }
.hv-main .hv-bottom-row { display: flex; justify-content: space-between; font-size: 12.5px; opacity: 0.9; border-top: 1px solid rgba(255,255,255,0.25); padding-top: 14px; }
.hv-float-1 { top: -14px; right: 6px; width: 200px; display: flex; gap: 10px; align-items: center; }
.hv-float-1 .fi { width: 34px; height: 34px; border-radius: 9px; background: var(--teal-light); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hv-float-1 .fi svg { width: 17px; height: 17px; }
.hv-float-1 strong { display: block; font-size: 13px; color: var(--ink); }
.hv-float-1 span { font-size: 11.5px; color: var(--text-soft); }
.hv-float-2 { bottom: 6px; left: -18px; width: 190px; display: flex; gap: 10px; align-items: center; }
.hv-float-2 .fi { width: 34px; height: 34px; border-radius: 9px; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hv-float-2 .fi svg { width: 17px; height: 17px; }
.hv-float-2 strong { display: block; font-size: 13px; color: var(--ink); }
.hv-float-2 span { font-size: 11.5px; color: var(--text-soft); }

@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { height: 340px; margin-top: 10px; }
  .hv-float-1, .hv-float-2 { display: none; }
}
@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (min-width: 941px) and (prefers-reduced-motion: no-preference) {
  .hv-float-1 { animation: float-y 4.5s ease-in-out infinite; }
  .hv-float-2 { animation: float-y 4.5s ease-in-out infinite; animation-delay: 1.2s; }
}

/* ---------- stats strip ---------- */
.stats-strip { background: var(--ink); padding: 34px 0; }
.stats-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.stats-row div { text-align: center; flex: 1; min-width: 140px; }
.stats-row strong { display: block; font-size: 26px; font-weight: 800; color: #fff; }
.stats-row > div > span { font-size: 12.5px; color: rgba(255,255,255,0.6); }

/* ---------- products ---------- */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.product-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 26px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
.product-card { position: relative; }
.pc-popular {
  position: absolute; top: -12px; right: 22px; background: var(--primary); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: 0.03em; padding: 5px 12px; border-radius: 999px;
  box-shadow: 0 6px 16px -6px rgba(11,88,151,0.6);
}
.pc-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.pc-icon svg { width: 26px; height: 26px; }
.tint-1 { background: #E7F1FA; color: #0B5897; }
.tint-2 { background: #FFF1E3; color: #F58730; }
.tint-3 { background: #FFF7ED; color: #EA580C; }
.tint-4 { background: #FDF2F8; color: #DB2777; }
.tint-5 { background: #F0F9FF; color: #0284C7; }
.tint-6 { background: #FEFCE8; color: #CA8A04; }
.product-card h3 { font-size: 19px; margin-bottom: 8px; }
.product-card p { color: var(--text-soft); font-size: 14px; line-height: 1.55; margin: 0 0 18px; min-height: 62px; }
.pc-meta { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.pc-meta span { font-size: 12px; font-weight: 700; background: var(--bg-mute); color: var(--text); padding: 5px 11px; border-radius: 999px; }
.pc-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--primary); }
.pc-link svg { width: 15px; height: 15px; transition: translate .15s ease; }
.product-card:hover .pc-link svg { translate: 3px 0; }
@media (max-width: 980px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .product-grid { grid-template-columns: 1fr; } }

/* ---------- how it works ---------- */
.how-section { background: var(--bg-soft); }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.how-card { background: var(--surface); border-radius: var(--radius-md); padding: 30px 26px; border: 1px solid var(--border); position: relative; }
.how-num { width: 38px; height: 38px; border-radius: 11px; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; margin-bottom: 18px; }
.how-card h4 { font-size: 18px; margin-bottom: 8px; }
.how-card p { color: var(--text-soft); font-size: 14.5px; line-height: 1.6; margin: 0; }
@media (max-width: 860px) { .how-grid { grid-template-columns: 1fr; } }

/* ---------- step track (5-step apply flow) ---------- */
.step-track { display: flex; gap: 0; align-items: flex-start; }
.step-item { flex: 1; position: relative; text-align: center; padding: 0 10px; }
.step-item::before {
  content: ""; position: absolute; top: 21px; left: calc(-50% + 21px); right: calc(50% + 21px);
  height: 2px; background: var(--border);
}
.step-item:first-child::before { display: none; }
.step-circle { width: 42px; height: 42px; border-radius: 50%; background: var(--surface); border: 2px solid var(--primary); color: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; margin: 0 auto 16px; position: relative; z-index: 1; }
.step-item h5 { font-size: 14.5px; margin: 0 0 6px; color: var(--ink); font-weight: 750; }
.step-item p { font-size: 12.8px; color: var(--text-soft); line-height: 1.5; margin: 0; }
@media (max-width: 860px) {
  .step-track { flex-direction: column; gap: 22px; }
  .step-item { text-align: left; display: flex; gap: 14px; padding: 0; }
  .step-item::before { display: none; }
  .step-circle { margin: 0; flex-shrink: 0; }
}

/* ---------- why / trust grid ---------- */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.why-card { padding: 26px; border-radius: var(--radius-md); background: var(--bg-soft); border: 1px solid var(--border); }
.why-card .wi { width: 42px; height: 42px; border-radius: 11px; background: var(--surface); color: var(--primary); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.why-card .wi svg { width: 21px; height: 21px; }
.why-card h4 { font-size: 16.5px; margin-bottom: 6px; }
.why-card p { color: var(--text-soft); font-size: 13.8px; line-height: 1.55; margin: 0; }
@media (max-width: 860px) { .why-grid { grid-template-columns: 1fr; } }

/* ---------- calculator ---------- */
.calc-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--border); }
.calc-controls { padding: 42px; }
.calc-field { margin-bottom: 26px; }
.calc-field .cf-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.calc-field label { font-size: 14px; font-weight: 700; color: var(--text); }
.calc-field .cf-val { font-weight: 800; color: var(--primary); font-size: 15px; }
input[type=range] { width: 100%; -webkit-appearance: none; height: 6px; border-radius: 4px; background: var(--bg-mute); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--primary); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(11,88,151,0.5); cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--primary); border: 3px solid #fff; cursor: pointer; }
.calc-select { width: 100%; padding: 13px 15px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); font-family: inherit; font-size: 14.5px; background: var(--surface); color: var(--text); font-weight: 600; }
.calc-result { background: linear-gradient(160deg, var(--primary), #1479C9); color: #fff; padding: 42px; display: flex; flex-direction: column; }
.calc-result .cr-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.75; margin-bottom: 8px; }
.calc-result .cr-emi { font-size: 42px; font-weight: 800; margin-bottom: 22px; }
.calc-result .cr-row { display: flex; justify-content: space-between; padding: 11px 0; border-top: 1px solid rgba(255,255,255,0.2); font-size: 14px; }
.calc-result .cr-row span:last-child { font-weight: 700; }
.calc-bar { height: 10px; border-radius: 6px; overflow: hidden; display: flex; margin: 18px 0 10px; background: rgba(255,255,255,0.2); }
.calc-bar .principal { background: var(--surface); }
.calc-bar .interest { background: rgba(255,255,255,0.4); }
.calc-legend { display: flex; gap: 18px; font-size: 12.5px; opacity: 0.85; }
.calc-legend span { display: flex; align-items: center; gap: 6px; }
.calc-legend .sw { width: 9px; height: 9px; border-radius: 50%; }
.sw-p { background: var(--surface); } .sw-i { background: rgba(255,255,255,0.5); }
@media (max-width: 860px) { .calc-panel { grid-template-columns: 1fr; } .calc-controls, .calc-result { padding: 30px 24px; } }

/* ---------- eligibility ---------- */
.elig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.elig-item { display: flex; gap: 16px; padding: 22px; border-radius: var(--radius-md); background: var(--bg-soft); border: 1px solid var(--border); }
.elig-item .ei-ico { width: 40px; height: 40px; border-radius: 11px; background: var(--surface); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--shadow-sm); }
.elig-item .ei-ico svg { width: 20px; height: 20px; }
.elig-item h5 { margin: 0 0 5px; font-size: 16px; font-weight: 750; color: var(--ink); }
.elig-item p { margin: 0; font-size: 13.8px; color: var(--text-soft); line-height: 1.55; }
@media (max-width: 860px) { .elig-grid { grid-template-columns: 1fr; } }

/* ---------- rate comparison table ---------- */
.rate-table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.rate-tabs { display: flex; gap: 6px; padding: 16px 20px 0; overflow-x: auto; }
.rate-tab { padding: 10px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--text-soft); background: var(--bg-soft); border: none; white-space: nowrap; }
.rate-tab.active { background: var(--primary); color: #fff; }
.rate-table { width: 100%; border-collapse: collapse; }
.rate-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-soft); font-weight: 700; padding: 18px 20px 12px; border-bottom: 1px solid var(--border); }
.rate-table td { padding: 16px 20px; font-size: 14.5px; border-bottom: 1px solid var(--border); }
.rate-table tr:last-child td { border-bottom: none; }
.rate-table tr:hover td { background: var(--bg-soft); }
.rate-table .bank-cell { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); }
.rate-table .bank-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }
.rate-table .rate-val { font-weight: 800; color: var(--accent-ink); }
.rate-table .best-tag { display: inline-block; margin-left: 8px; font-size: 10.5px; font-weight: 800; background: var(--teal-light); color: var(--accent-ink); padding: 3px 8px; border-radius: 999px; vertical-align: middle; }
.rate-table-scroll { overflow-x: auto; }
.rate-table-scroll table { min-width: 620px; }
.rate-note { padding: 16px 20px; font-size: 12.5px; color: var(--text-faint); border-top: 1px solid var(--border); }
.partners-section { background: var(--bg-soft); }
.marquee-wrap { overflow: hidden; position: relative; mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); }
.marquee-track { display: flex; gap: 14px; width: max-content; animation: scroll-left 32s linear infinite; }
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-size: 14px; font-weight: 700; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); padding: 12px 22px; border-radius: 999px; white-space: nowrap;
}
@keyframes scroll-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- testimonials ---------- */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.testi-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 26px; }
.testi-stars { color: #F59E0B; font-size: 13px; margin-bottom: 12px; letter-spacing: 1px; }
.testi-card p { font-size: 14.5px; line-height: 1.65; color: var(--text); margin: 0 0 18px; }
.testi-who { display: flex; align-items: center; gap: 10px; }
.testi-who .tw-av { width: 36px; height: 36px; border-radius: 50%; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; }
.testi-who strong { display: flex; align-items: center; gap: 5px; font-size: 13.5px; }
.testi-who strong svg { width: 13px; height: 13px; color: var(--accent-ink); }
.testi-who span { font-size: 12px; color: var(--text-soft); }
@media (max-width: 900px) { .testi-grid { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq-section { background: var(--bg-soft); }
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; background: none; border: none; text-align: left;
  font-size: 15.5px; font-weight: 700; color: var(--ink);
}
.faq-q .fq-icon { width: 26px; height: 26px; border-radius: 50%; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .2s ease, background .2s ease, color .2s ease; }
.faq-q .fq-icon svg { width: 14px; height: 14px; }
.faq-item.open .faq-q .fq-icon { background: var(--primary); color: #fff; transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.faq-a p { margin: 0; padding: 0 24px 20px; font-size: 14.5px; line-height: 1.6; color: var(--text-soft); }
.faq-item.open .faq-a { max-height: 240px; }
.faq-item:not(.js-ready) .faq-a { max-height: none; }
.faq-item:not(.js-ready) .faq-q .fq-icon { display: none; }

/* ---------- contact / apply ---------- */
.contact-section { background: var(--ink); position: relative; overflow: hidden; }
.contact-section::before { content: ""; position: absolute; top: -150px; right: -100px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(11,88,151,0.3), transparent 70%); }
.contact-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 50px; }
.contact-info h2 { color: #fff; font-size: clamp(28px, 3.2vw, 36px); }
.contact-info p { color: rgba(255,255,255,0.68); font-size: 16px; line-height: 1.6; margin: 16px 0 30px; max-width: 400px; }
.contact-detail { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.contact-detail .cd-ico { width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,0.1); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-detail .cd-ico svg { width: 18px; height: 18px; }
.contact-detail div span { display: block; font-size: 12px; color: rgba(255,255,255,0.5); }
.contact-detail div strong { font-size: 14.5px; color: #fff; font-weight: 700; }
.contact-detail div a { text-decoration: none; }
.contact-detail div a strong { transition: color .15s ease; }
.contact-detail div a:hover strong { color: var(--teal); text-decoration: underline; }

.apply-form { background: var(--surface); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-lg); }
.apply-form h3 { font-size: 20px; margin-bottom: 4px; }
.apply-form .af-sub { color: var(--text-soft); font-size: 14px; margin-bottom: 24px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { margin-bottom: 16px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--text); }
.form-field input, .form-field select { width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: 14.5px; background: var(--bg-soft); color: var(--text); }
.form-field input:focus, .form-field select:focus { outline: 2px solid var(--primary); border-color: var(--primary); }
.consent-row { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 20px; }
.consent-row input { margin-top: 3px; }
.consent-row label { font-size: 12.5px; color: var(--text-soft); line-height: 1.5; }
.form-success { display: none; text-align: center; padding: 34px 10px; }
.form-success .fs-ico { width: 60px; height: 60px; border-radius: 50%; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.form-success .fs-ico svg { width: 30px; height: 30px; }
.form-success h4 { font-size: 20px; margin-bottom: 8px; }
.form-success p { color: var(--text-soft); font-size: 14.5px; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
footer { background: var(--surface); border-top: 1px solid var(--border); padding: 56px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.footer-brand .brand { margin-bottom: 12px; }
.footer-brand p { font-size: 14px; line-height: 1.6; color: var(--text-soft); max-width: 280px; margin-bottom: 18px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 36px; height: 36px; border-radius: 10px; background: var(--bg-soft); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-soft); transition: background .15s ease, color .15s ease, border-color .15s ease; }
.footer-social a:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.footer-social svg { width: 16px; height: 16px; }
.footer-col h5 { color: var(--ink); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 16px; font-weight: 800; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; color: var(--text-soft); }
.footer-col a:hover { color: var(--primary); }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var(--text-faint); }
.footer-legal { margin-bottom: 22px; }
.footer-disclaimer { font-size: 13.5px; line-height: 1.7; color: #334155; max-width: 900px; margin: 0 0 12px; }
.footer-disclaimer a { color: inherit; text-decoration: underline; }
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 620px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- sticky mobile CTA ---------- */
.sticky-cta { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 70; background: var(--surface); border-top: 1px solid var(--border); padding: 12px 16px; box-shadow: 0 -8px 24px rgba(15,23,42,0.08); translate: 0 0; transition: translate .25s ease; }
.sticky-cta.is-hidden { translate: 0 100%; }
.sticky-cta .btn { width: 100%; }
@media (max-width: 720px) { .sticky-cta { display: block; } body { padding-bottom: 76px; } }

/* ---------- cookie consent banner ---------- */
.cookie-banner {
  position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 90;
  max-width: 640px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 18px 20px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  opacity: 0; translate: 0 16px; transition: opacity .3s ease, translate .3s ease;
}
.cookie-banner.show { opacity: 1; translate: 0 0; }
.cookie-banner p { margin: 0; font-size: 13.5px; color: var(--text-soft); line-height: 1.5; flex: 1 1 260px; }
.cookie-banner p a { color: var(--primary); font-weight: 700; text-decoration: none; }
.cookie-banner p a:hover { text-decoration: underline; }
.cookie-actions { display: flex; gap: 8px; flex-shrink: 0; }
.cookie-actions .btn { white-space: nowrap; }
@media (max-width: 720px) {
  .cookie-banner { left: 12px; right: 12px; bottom: 88px; padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { .cookie-banner { transition: none; } }

/* ---------- WhatsApp float ---------- */
.wa-float { position: fixed; bottom: 24px; right: 24px; z-index: 70; width: 56px; height: 56px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); }
.wa-float svg { width: 27px; height: 27px; fill: white; }
@media (max-width: 720px) { .wa-float { bottom: 90px; } }

/* ---------- reveal (progressive enhancement only) ---------- */
.reveal {
  opacity: 1; translate: 0 0; scale: 1;
  transition: opacity .7s cubic-bezier(.16,1,.3,1), translate .7s cubic-bezier(.16,1,.3,1), scale .7s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--stagger-i, 0) * 80ms);
  will-change: opacity, translate;
}
.js-reveal .reveal { opacity: 0; translate: 0 26px; scale: .97; }
.js-reveal .reveal.in { opacity: 1; translate: 0 0; scale: 1; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; translate: 0 0; scale: 1; transition: none; transition-delay: 0s; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   PHASE 5.5 ADDITIONS — subpages, form UX, tools
   ========================================================= */

/* ---------- form validation states ---------- */
.form-field input.invalid, .form-field select.invalid { border-color: var(--warn); background: #FEF2F2; }
.form-field input.valid { border-color: var(--ok); }
.field-error { display: none; font-size: 12px; color: var(--warn); font-weight: 600; margin-top: 5px; }
.field-error.show { display: block; }
.field-hint { font-size: 11.5px; color: var(--text-faint); margin-top: 4px; }
.form-field.saved-note { display: none; align-items: center; gap: 6px; font-size: 12px; color: var(--accent-ink); font-weight: 700; margin-bottom: 10px; }
.form-field.saved-note.show { display: flex; }
.draft-banner {
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--teal-light); color: var(--accent-ink); border: 1px solid rgba(245,135,48,0.35);
  padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; margin-bottom: 18px;
}
.draft-banner.show { display: flex; }
.draft-banner button { background: none; border: none; color: var(--accent-ink); font-weight: 800; text-decoration: underline; font-size: 12.5px; }
.wa-continue { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 700; font-size: 13.5px; color: #25D366; }
.wa-continue svg { width: 18px; height: 18px; fill: #25D366; }

/* ---------- EMI export ---------- */
.calc-export-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.3); color: #fff; padding: 11px 18px; border-radius: 999px;
  font-weight: 700; font-size: 13px; align-self: flex-start;
}
.calc-export-btn:hover { background: rgba(255,255,255,0.24); }
.calc-export-btn svg { width: 15px; height: 15px; }
@media print {
  body * { visibility: hidden; }
  #printArea, #printArea * { visibility: visible; }
  #printArea { position: absolute; top: 0; left: 0; width: 100%; padding: 40px; }
}

/* ---------- confetti ---------- */
.confetti-piece { position: fixed; top: -12px; z-index: 9999; pointer-events: none; border-radius: 2px; }

/* ---------- page hero (subpages) ---------- */
.page-hero { position: relative; overflow: hidden; padding: 56px 0 64px; background: var(--bg-soft); text-align: center; }
.page-hero::before { content: ""; position: absolute; top: -180px; right: -160px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(11,88,151,0.14), transparent 70%); }
.page-hero-inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; }
.page-hero .eyebrow { margin-bottom: 16px; }
.page-hero h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.12; margin: 0 0 14px; }
.page-hero h1 span { color: var(--primary); }
.page-hero p { color: var(--text-soft); font-size: 16.5px; line-height: 1.6; margin: 0; }
.breadcrumb { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--text-faint); margin-bottom: 18px; }
.breadcrumb a { color: var(--text-soft); font-weight: 600; }
.breadcrumb a:hover { color: var(--primary); }

/* ---------- generic tool section shells ---------- */
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { .tool-grid { grid-template-columns: 1fr; } }

/* ---------- Credit score checker ---------- */
.score-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--border); }
.score-form { padding: 42px; }
.score-form .form-field { margin-bottom: 18px; }
.score-result { background: linear-gradient(160deg, var(--primary), #1479C9); color: #fff; padding: 42px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.score-result.empty .sr-gauge, .score-result.empty .sr-detail { display: none; }
.score-result .sr-placeholder { opacity: 0.85; font-size: 14.5px; max-width: 260px; }
.score-result .sr-placeholder svg { width: 44px; height: 44px; margin-bottom: 14px; opacity: 0.7; }
.sr-gauge { position: relative; width: 168px; height: 168px; margin-bottom: 18px; }
.sr-gauge svg { transform: rotate(-90deg); }
.sr-gauge .sr-track { fill: none; stroke: rgba(255,255,255,0.2); stroke-width: 12; }
.sr-gauge .sr-bar { fill: none; stroke: #fff; stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset 1s ease; }
.sr-gauge .sr-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sr-gauge .sr-num strong { font-size: 34px; font-weight: 800; }
.sr-gauge .sr-num span { font-size: 11px; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.05em; }
.sr-band { display: inline-block; padding: 6px 16px; border-radius: 999px; background: rgba(255,255,255,0.18); font-weight: 800; font-size: 13px; margin-bottom: 14px; }
.sr-detail { font-size: 13.5px; opacity: 0.9; line-height: 1.6; max-width: 280px; }
.sr-next-tips { display: none; list-style: none; padding: 0; margin: 18px 0 0; max-width: 300px; width: 100%; text-align: left; }
.score-result:not(.empty) .sr-next-tips.show { display: block; }
.sr-next-tips li { display: flex; gap: 8px; font-size: 12.5px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,0.18); opacity: 0.95; }
.sr-next-tips li svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; opacity: 0.85; }
.sr-recheck { display: none; margin-top: 20px; color: #fff; border-color: rgba(255,255,255,0.4); }
.sr-recheck:hover { background: rgba(255,255,255,0.1); }
.score-result:not(.empty) .sr-recheck { display: inline-flex; }
@media (max-width: 900px) { .score-panel { grid-template-columns: 1fr; } .score-form, .score-result { padding: 30px 24px; } }
.score-tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 46px; }
.score-tip { padding: 24px; border-radius: var(--radius-md); background: var(--bg-soft); border: 1px solid var(--border); }
.score-tip .st-num { width: 34px; height: 34px; border-radius: 10px; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; margin-bottom: 14px; }
.score-tip h5 { margin: 0 0 6px; font-size: 15.5px; }
.score-tip p { margin: 0; font-size: 13.5px; color: var(--text-soft); line-height: 1.55; }
@media (max-width: 860px) { .score-tips { grid-template-columns: 1fr; } }
.score-disclaimer { max-width: 760px; margin: 30px auto 0; text-align: center; font-size: 12.5px; color: var(--text-faint); line-height: 1.6; }

/* ---------- loan comparison ---------- */
.lc-filters { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.lc-filter { padding: 10px 20px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--text-soft); background: var(--bg-soft); border: 1.5px solid var(--border); }
.lc-filter.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.lc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 30px; }
.lc-sort { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text-soft); }
.lc-sort select {
  padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface);
  color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.lc-sort select:focus { outline: 2px solid var(--primary); }
.lc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lc-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 26px; position: relative; transition: order .3s ease; }
.lc-card.lc-best { border-color: var(--primary); box-shadow: var(--shadow-md); }
.lc-best-tag { position: absolute; top: -12px; left: 24px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 800; padding: 5px 12px; border-radius: 999px; }
.lc-card h4 { font-size: 17px; margin: 4px 0 2px; }
.lc-card .lc-sub { font-size: 12.5px; color: var(--text-faint); margin-bottom: 18px; }
.lc-row { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.lc-row:first-of-type { border-top: none; }
.lc-row span:last-child { font-weight: 700; color: var(--ink); }
.lc-card .btn { width: 100%; margin-top: 18px; }
@media (max-width: 980px) { .lc-cards { grid-template-columns: 1fr; } }
.lc-table-note { text-align: center; color: var(--text-soft); font-size: 14px; margin-top: 34px; }

/* ---------- compare checkbox on each card ---------- */
.lc-compare-check {
  display: flex; align-items: center; gap: 7px; position: absolute; top: 20px; right: 20px;
  font-size: 11.5px; font-weight: 700; color: var(--text-faint); cursor: pointer; user-select: none;
}
.lc-compare-check input { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; }
.lc-card.lc-best .lc-compare-check { top: 20px; }

/* ---------- sticky compare tray ---------- */
.lc-compare-tray {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 72; background: var(--ink); color: #fff;
  translate: 0 100%; transition: translate .3s cubic-bezier(.4,0,.2,1); box-shadow: 0 -10px 30px rgba(0,0,0,0.2);
}
.lc-compare-tray.show { translate: 0 0; }
.lc-tray-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; flex-wrap: wrap; }
.lc-tray-items { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.lc-tray-items span { background: rgba(255,255,255,0.12); padding: 6px 12px; border-radius: 999px; font-weight: 700; }
.lc-tray-actions { display: flex; gap: 10px; flex-shrink: 0; }
.lc-tray-actions .btn-outline { color: #fff; border-color: rgba(255,255,255,0.35); }
.lc-tray-actions .btn-outline:hover { background: rgba(255,255,255,0.1); }

/* ---------- compare modal ---------- */
.lc-compare-modal { position: fixed; inset: 0; z-index: 96; display: none; align-items: center; justify-content: center; padding: 24px; }
.lc-compare-modal.show { display: flex; }
.lc-modal-scrim { position: absolute; inset: 0; background: rgba(8,12,20,0.6); backdrop-filter: blur(2px); }
.lc-modal-panel {
  position: relative; background: var(--surface); border-radius: var(--radius-lg); max-width: 900px; width: 100%;
  max-height: 84vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-lg);
}
.lc-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.lc-modal-head h3 { font-size: 17px; margin: 0; }
.lc-modal-close { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--bg-soft); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.lc-modal-close svg { width: 16px; height: 16px; }
.lc-modal-body { padding: 20px 24px 26px; overflow: auto; }
.lc-compare-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.lc-compare-table th, .lc-compare-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.lc-compare-table th:first-child, .lc-compare-table td:first-child { color: var(--text-soft); font-weight: 600; white-space: nowrap; }
.lc-compare-table th { font-weight: 800; color: var(--ink); }
.lc-compare-table td { font-weight: 700; color: var(--ink); }
@media (max-width: 640px) { .lc-compare-table { font-size: 12.5px; } .lc-compare-table th, .lc-compare-table td { padding: 10px 8px; } }

/* ---------- earnings calculator (for DSA partners) ---------- */
.earn-result .cr-emi { font-size: 36px; }
.earn-result .cr-row-highlight { border-top: 1.5px dashed rgba(255,255,255,0.35); }
.earn-result .cr-row-highlight span:last-child { font-size: 16px; }
.earn-rate-bar { margin-top: 18px; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.18); overflow: hidden; }
.earn-rate-fill { height: 100%; background: #fff; border-radius: 999px; width: 0%; transition: width .4s ease; }
.earn-rate-scale { display: flex; justify-content: space-between; font-size: 10.5px; opacity: 0.75; margin-top: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.earn-slab-note { margin-top: 18px; font-size: 12.5px; opacity: 0.85; line-height: 1.55; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 14px; }

/* ---------- blog ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; display: block; color: inherit; text-decoration: none; cursor: pointer; }
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.blog-thumb { height: 160px; display: flex; align-items: center; justify-content: center; color: #fff; }
.blog-thumb svg { width: 40px; height: 40px; opacity: 0.9; }
.blog-body { padding: 22px; }
.blog-tag { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--primary); }
.blog-card h4 { font-size: 16.5px; margin: 10px 0 8px; line-height: 1.35; }
.blog-card p { font-size: 13.5px; color: var(--text-soft); line-height: 1.55; margin: 0 0 14px; }
.blog-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-faint); border-top: 1px solid var(--border); padding-top: 14px; }
@media (max-width: 980px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }

/* ---------- about page ---------- */
.about-story { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.about-story .as-visual { background: linear-gradient(160deg, var(--primary), #1479C9); border-radius: var(--radius-lg); padding: 40px; color: #fff; box-shadow: var(--shadow-lg); }
.about-story .as-visual .as-stat { display: flex; justify-content: space-between; padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.2); }
.about-story .as-visual .as-stat:first-child { border-top: none; }
.about-story .as-visual .as-stat strong { font-size: 22px; font-weight: 800; }
.about-story .as-visual .as-stat > span { font-size: 12.5px; opacity: 0.8; }
@media (max-width: 900px) { .about-story { grid-template-columns: 1fr; } }
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.value-card { padding: 24px; border-radius: var(--radius-md); background: var(--bg-soft); border: 1px solid var(--border); text-align: center; }
.value-card .vc-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--surface); color: var(--primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; box-shadow: var(--shadow-sm); }
.value-card .vc-ico svg { width: 22px; height: 22px; }
.value-card h5 { font-size: 15px; margin-bottom: 6px; }
.value-card p { font-size: 13px; color: var(--text-soft); line-height: 1.5; margin: 0; }
@media (max-width: 980px) { .value-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .value-grid { grid-template-columns: 1fr; } }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.team-card { text-align: center; }
.team-avatar { width: 84px; height: 84px; border-radius: 50%; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 26px; margin: 0 auto 14px; }
.team-card h5 { font-size: 15px; margin-bottom: 3px; }
.team-card span { font-size: 12.5px; color: var(--text-soft); }
@media (max-width: 900px) { .team-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- partner / DSA page ---------- */
.partner-hero { background: var(--ink); position: relative; overflow: hidden; padding: 60px 0; }
.partner-hero::before { content: ""; position: absolute; top: -150px; right: -100px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(11,88,151,0.3), transparent 70%); }
.partner-hero-inner { position: relative; z-index: 1; text-align: center; max-width: 680px; margin: 0 auto; }
.partner-hero-inner .eyebrow { background: rgba(255,255,255,0.12); color: #fff; margin-bottom: 16px; }
.partner-hero-inner h1 { color: #fff; font-size: clamp(30px, 4vw, 42px); margin: 0 0 14px; }
.partner-hero-inner p { color: rgba(255,255,255,0.7); font-size: 16px; line-height: 1.6; }
.partner-benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.partner-benefit { padding: 26px; border-radius: var(--radius-md); background: var(--bg-soft); border: 1px solid var(--border); }
.partner-benefit .pb-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--surface); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.partner-benefit .pb-ico svg { width: 22px; height: 22px; }
.partner-benefit h5 { font-size: 16px; margin-bottom: 6px; }
.partner-benefit p { font-size: 13.5px; color: var(--text-soft); line-height: 1.55; margin: 0; }
@media (max-width: 900px) { .partner-benefit-grid { grid-template-columns: 1fr; } }
.partner-form-wrap { max-width: 720px; margin: 0 auto; background: var(--surface); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-md); border: 1px solid var(--border); }
.partner-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pt-card { padding: 28px 24px; border-radius: var(--radius-md); border: 1.5px solid var(--border); background: var(--surface); text-align: center; }
.pt-card.pt-mid { border-color: var(--primary); box-shadow: var(--shadow-md); position: relative; }
.pt-card .pt-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--primary); color: #fff; font-size: 11px; font-weight: 800; padding: 5px 14px; border-radius: 999px; white-space: nowrap; }
.pt-card h5 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-soft); margin-bottom: 10px; }
.pt-card .pt-rate { font-size: 30px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.pt-card .pt-rate span { font-size: 13px; font-weight: 600; color: var(--text-soft); }
.pt-card p { font-size: 13px; color: var(--text-soft); margin: 10px 0 0; line-height: 1.5; }
@media (max-width: 900px) { .partner-tiers { grid-template-columns: 1fr; } }

/* =========================================================
   PHASE 6 ADDITIONS — dark mode, progress bar, back-to-top,
   testimonial carousel, visual polish
   ========================================================= */

/* ---------- smooth theme transition ----------
   Note: .mega is intentionally excluded here — it has its own
   dedicated transition (opacity/translate/visibility) for the
   dropdown fade, and including it in this shared shorthand would
   silently overwrite that transition (shorthand `transition` isn't
   additive across rules), making the dropdown snap open/closed
   instead of fading. */
body, header.site-nav, .hv-card, .product-card, .how-card, .testi-card,
.faq-item, .apply-form, footer, .sticky-cta, .rate-table-wrap, .score-panel,
.lc-card, .blog-card, .partner-form-wrap, .pt-card, .calc-panel {
  transition: background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease;
}

/* ---------- dark theme tokens ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
}
html[data-theme="dark"] :root,
html[data-theme="dark"] {
  --primary: #4FA6EE;
  --primary-dark: #7FC0F5;
  --primary-light: rgba(79, 166, 238, 0.14);
  --teal: #FF9D52;
  --teal-light: rgba(255, 157, 82, 0.14);
  --accent-ink: #FF9D52;
  --ink: #F1F5F9;
  --text: #E2E8F0;
  --text-soft: #A7B4C7;
  --text-faint: #6B7A93;
  --bg: #0A1220;
  --bg-soft: #0F1929;
  --bg-mute: #131F33;
  --surface: #121D30;
  --surface-2: #16233A;
  --border: #22314B;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 60px -18px rgba(0, 0, 0, 0.6);
}
html[data-theme="dark"] .btn-outline { color: var(--ink); }
html[data-theme="dark"] .stats-strip { background: #050A14; }
html[data-theme="dark"] .partner-hero { background: #050A14; }
html[data-theme="dark"] .footer-disclaimer { color: #CBD5E1; }
html[data-theme="dark"] .form-field input, html[data-theme="dark"] .form-field select { background: var(--bg-mute); color: var(--text); }
html[data-theme="dark"] .form-field input.invalid, html[data-theme="dark"] .form-field select.invalid { background: rgba(220,38,38,0.1); }
html[data-theme="dark"] .lc-filter { background: var(--bg-mute); }
html[data-theme="dark"] ::selection { background: var(--primary); color: #061019; }
::selection { background: var(--primary-light); color: var(--primary-dark); }

/* ---------- theme toggle button ---------- */
.theme-toggle {
  position: relative; width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid var(--border); background: var(--surface); color: var(--ink);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: border-color .15s ease, background .2s ease, transform .15s ease;
}
.theme-toggle:hover { border-color: var(--primary); transform: translateY(-1px); }
.theme-toggle svg { width: 19px; height: 19px; }
@media (max-width: 480px) {
  .theme-toggle { width: 36px; height: 36px; }
  .theme-toggle svg { width: 16px; height: 16px; }
  .nav-cta .btn-sm { padding: 9px 14px; font-size: 12.5px; }
}
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* (scroll-progress bar styling lives at the top of this file, near
   the other global/base rules — kept here as a marker so it isn't
   re-added by mistake in a future edit) */

/* ---------- back to top ---------- */
.back-to-top {
  position: fixed; bottom: 24px; right: 94px; z-index: 65;
  width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md); border: none;
  opacity: 0; visibility: hidden; translate: 0 10px;
  transition: opacity .2s ease, translate .2s ease, background .2s ease, visibility .2s ease;
}
.back-to-top.show { opacity: 1; visibility: visible; translate: 0 0; }
.back-to-top:hover { background: var(--primary); }
.back-to-top svg { width: 19px; height: 19px; }
@media (max-width: 720px) { .back-to-top { bottom: 90px; right: 88px; width: 42px; height: 42px; } }
/* stack above WhatsApp float when both present */
.wa-float { z-index: 68; }

/* ---------- testimonial carousel dots (mobile-first swipeable) ---------- */
@media (max-width: 860px) {
  .testi-grid {
    display: flex; grid-template-columns: none; gap: 16px; overflow-x: auto;
    scroll-snap-type: x mandatory; padding-bottom: 6px; margin: 0 -24px; padding-left: 24px; padding-right: 24px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .testi-grid::-webkit-scrollbar { display: none; }
  .testi-grid .testi-card { min-width: 84%; scroll-snap-align: center; }
}
.testi-dots { display: none; justify-content: center; gap: 8px; margin-top: 22px; }
@media (max-width: 860px) { .testi-dots { display: flex; } }
.testi-dots button { width: 7px; height: 7px; border-radius: 50%; background: var(--border); border: none; padding: 0; transition: background .2s ease, width .2s ease; }
.testi-dots button.active { background: var(--primary); width: 20px; border-radius: 4px; }

/* ---------- product card polish: gradient border glow on hover ---------- */
.product-card { position: relative; isolation: isolate; }
.product-card::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius-md); padding: 1.5px;
  background: linear-gradient(135deg, var(--primary), var(--teal)); opacity: 0;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity .2s ease; pointer-events: none; z-index: -1;
}
.product-card:hover::before { opacity: 1; }

/* ---------- newsletter (footer) ---------- */
.footer-newsletter { margin-top: 18px; }
.footer-newsletter label { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.nl-row { display: flex; gap: 8px; max-width: 300px; }
.nl-row input {
  flex: 1; min-width: 0; padding: 10px 13px; border-radius: 999px; border: 1.5px solid var(--border);
  background: var(--bg-soft); color: var(--text); font-size: 13px; font-family: inherit;
}
.nl-row input:focus { outline: 2px solid var(--primary); border-color: var(--primary); }
.nl-row button {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--primary);
  color: #fff; display: flex; align-items: center; justify-content: center; transition: background .15s ease, transform .15s ease;
}
.nl-row button:hover { background: var(--primary-dark); transform: translateY(-1px); }
.nl-row button svg { width: 16px; height: 16px; }
.footer-newsletter .nl-note { font-size: 12.5px; line-height: 1.55; color: #475569; margin-top: 8px; }
.footer-newsletter .nl-note a { color: inherit; text-decoration: underline; }
html[data-theme="dark"] .footer-newsletter .nl-note { color: #CBD5E1; }
.footer-newsletter .nl-success { display: none; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--ok); margin-top: 10px; }
.footer-newsletter .nl-success.show { display: flex; }
.footer-newsletter .nl-success svg { width: 16px; height: 16px; }

/* ---------- skip link (a11y) ---------- */
.skip-link {
  position: fixed; top: -60px; left: 12px; z-index: 100; background: var(--ink); color: #fff;
  padding: 12px 20px; border-radius: var(--radius-sm); font-weight: 700; font-size: 13.5px;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

/* ---------- toast notifications ---------- */
.toast-stack {
  position: fixed; bottom: 24px; left: 24px; z-index: 95;
  display: flex; flex-direction: column-reverse; gap: 10px; pointer-events: none;
}
@media (max-width: 720px) { .toast-stack { left: 16px; right: 16px; bottom: 84px; } }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 10px;
  background: var(--ink); color: #fff; padding: 13px 18px; border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-md);
  opacity: 0; translate: 0 12px; transition: opacity .25s ease, translate .25s ease;
  max-width: 340px;
}
.toast.show { opacity: 1; translate: 0 0; }
.toast svg { width: 17px; height: 17px; flex-shrink: 0; }
.toast.toast-ok svg { color: #4ADE80; }
.toast.toast-warn svg { color: #FB923C; }

/* ---------- extra visual polish ---------- */
.hero h1 span {
  background: linear-gradient(100deg, var(--primary), var(--teal));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.btn-primary:active, .btn-outline:active { transform: translateY(0) scale(0.98); }
body { animation: page-fade-in .4s ease; }
@keyframes page-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body { animation: none; } }
html[data-theme="dark"] .hv-main, html[data-theme="dark"] .about-story .as-visual,
html[data-theme="dark"] .score-result, html[data-theme="dark"] .earn-result {
  background: linear-gradient(160deg, #12406B, #0B5897 100%);
}
html[data-theme="dark"] .stats-strip strong,
html[data-theme="dark"] .partner-hero-inner h1 { color: #fff; }

/* =========================================================
   POLISH PASS — richer motion + micro-interactions
   All additions are additive; respects prefers-reduced-motion.
   ========================================================= */

/* ---------- hero: living background + card motion ---------- */
.hero::before, .hero::after { animation: blob-breathe 9s ease-in-out infinite; }
.hero::after { animation-duration: 11s; animation-delay: -3s; }
@keyframes blob-breathe {
  0%, 100% { transform: scale(1) translate(0, 0); }
  50% { transform: scale(1.12) translate(-16px, 14px); }
}
.hero-rating .stars { display: inline-block; animation: star-twinkle 2.6s ease-in-out infinite; }
@keyframes star-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
.hv-main { transition: box-shadow .4s ease, transform .4s ease; }
.hero-visual { perspective: 1000px; }
.hero-visual:hover .hv-main { transform: translateY(-4px) rotateX(3deg) rotateY(-3deg); box-shadow: 0 30px 70px -20px rgba(11,88,151,0.4); }
@media (prefers-reduced-motion: reduce) { .hero-visual:hover .hv-main { transform: none; } }
.hv-card { transition: box-shadow .25s ease, transform .25s ease; }
.hv-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px) scale(1.02); }
@media (min-width: 941px) and (prefers-reduced-motion: no-preference) {
  @keyframes float-y { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-9px) rotate(-1.1deg); } }
  .hv-float-2 { animation-name: float-y-2; }
  @keyframes float-y-2 { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-9px) rotate(1.1deg); } }
}
.hero-actions .btn-primary svg, .hero-actions .btn-primary { transition: transform .18s ease, background .15s ease, box-shadow .15s ease; }

/* ---------- buttons: shine sweep + springier press ---------- */
.btn { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg); transition: left .55s ease; pointer-events: none;
}
.btn-primary:hover::after { left: 130%; }
.btn-primary:hover { box-shadow: 0 14px 30px -10px rgba(11,88,151,0.6); }
.btn-outline:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .btn-primary::after { display: none; } }

/* ---------- nav: subtle brand + link liveliness ---------- */
.brand-logo { transition: transform .2s ease; }
.brand:hover .brand-logo { transform: scale(1.05) rotate(-2deg); }
.has-menu .mega a { transition: background .15s ease, color .15s ease, translate .15s ease; }
.has-menu .mega a:hover { translate: 3px 0; }

/* ---------- product cards: icon comes alive on hover ---------- */
.pc-icon { transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .2s ease; }
.product-card:hover .pc-icon { transform: scale(1.1) rotate(-6deg); }
.product-card h3 { transition: color .2s ease; }
.product-card:hover h3 { color: var(--primary); }
.pc-popular { animation: badge-pulse 2.4s ease-in-out infinite; }
@keyframes badge-pulse { 0%, 100% { box-shadow: 0 6px 16px -6px rgba(11,88,151,0.6); } 50% { box-shadow: 0 6px 20px -4px rgba(11,88,151,0.85); } }

/* ---------- how it works / why-grid / eligibility: lift on hover ---------- */
.how-card, .why-card, .elig-item, .score-tip {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.how-card:hover, .why-card:hover, .elig-item:hover, .score-tip:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent;
}
.how-num, .why-card .wi, .elig-item .ei-ico, .score-tip .st-num {
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.how-card:hover .how-num, .why-card:hover .wi, .elig-item:hover .ei-ico, .score-tip:hover .st-num {
  transform: scale(1.12) rotate(-4deg);
}

/* ---------- step track: circles pulse + connecting line draws in ---------- */
.step-circle { transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, background .3s ease, color .3s ease; }
.step-item:hover .step-circle { transform: scale(1.12); background: var(--primary); color: #fff; box-shadow: 0 8px 20px -6px rgba(11,88,151,0.55); }
.js-reveal .step-item::before { transform-origin: left center; transform: scaleX(0); transition: transform .8s cubic-bezier(.16,1,.3,1); }
.js-reveal .step-item.in::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .js-reveal .step-item::before { transform: scaleX(1); transition: none; } }
@media (max-width: 860px) { .step-item::before { display: none; } }

/* ---------- testimonials ---------- */
.testi-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.testi-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
.testi-who .tw-av { transition: transform .25s ease; }
.testi-card:hover .tw-av { transform: scale(1.08); }

/* ---------- marquee: pills lift on hover ---------- */
.marquee-track span { transition: transform .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease; }
.marquee-track span:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); color: var(--primary); border-color: var(--primary-light); }

/* ---------- FAQ: smoother open/close + icon bounce ---------- */
.faq-item { transition: box-shadow .25s ease, border-color .25s ease; }
.faq-item.open { box-shadow: var(--shadow-sm); border-color: var(--primary-light); }
.faq-a { transition: max-height .38s cubic-bezier(.16,1,.3,1); }
.faq-q .fq-icon { transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .2s ease, color .2s ease; }
.faq-q:hover .fq-icon { background: var(--primary-light); color: var(--primary); }
.faq-item.open .faq-q:hover .fq-icon { background: var(--primary); color: #fff; }

/* ---------- rate table / loan comparison cards ---------- */
.lc-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.lc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.rate-table tr td { transition: background .15s ease; }

/* ---------- page hero (subpages): entrance on load ---------- */
@media (prefers-reduced-motion: no-preference) {
  .page-hero-inner > *, .partner-hero-inner > * { animation: hero-rise .7s cubic-bezier(.16,1,.3,1) both; }
  .page-hero-inner .breadcrumb { animation-delay: 0s; }
  .page-hero-inner .eyebrow, .partner-hero-inner .eyebrow { animation-delay: .05s; }
  .page-hero-inner h1, .partner-hero-inner h1 { animation-delay: .12s; }
  .page-hero-inner p, .partner-hero-inner p { animation-delay: .2s; }
  .partner-hero-inner > div { animation-delay: .28s; }
  @keyframes hero-rise { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
  .page-hero::before, .partner-hero::before { animation: blob-breathe 10s ease-in-out infinite; }
}
.partner-hero-inner .btn-white { transition: transform .18s ease, box-shadow .18s ease; }
.partner-hero-inner .btn-white:hover { transform: translateY(-2px) scale(1.02); }

/* ---------- footer: link nudge + social icon lift ---------- */
.footer-col a { transition: color .15s ease, translate .15s ease; display: inline-block; }
.footer-col a:hover { translate: 3px 0; }
.footer-social a { transition: transform .2s ease, background .2s ease, color .2s ease; }
.footer-social a:hover { transform: translateY(-3px); background: var(--primary); color: #fff; border-color: transparent; }

/* ---------- WhatsApp float: gentle breathing so it doesn't get missed ---------- */
@media (prefers-reduced-motion: no-preference) {
  .wa-float { animation: wa-breathe 2.8s ease-in-out infinite; }
  @keyframes wa-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
}

/* ---------- stats strip: gentle hover ---------- */
.stats-row > div { transition: transform .2s ease; }
.stats-row > div:hover { transform: translateY(-3px); }
.stats-row strong { transition: color .2s ease; }
.stats-row > div:hover strong { color: var(--teal); }

/* =========================================================
   POLISH PASS 2 — about / blog / partner / forms / filters
   ========================================================= */

/* ---------- about page: values, team, story stats ---------- */
.value-card, .team-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.value-card .vc-ico { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.value-card:hover .vc-ico { transform: scale(1.12) rotate(-4deg); }
.team-avatar { transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease; }
.team-card:hover .team-avatar { transform: scale(1.08) translateY(-2px); box-shadow: var(--shadow-md); }
.as-visual .as-stat { transition: padding-left .2s ease; }
.as-visual .as-stat:hover { padding-left: 6px; }

/* ---------- blog cards ---------- */
.blog-thumb svg { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.blog-card:hover .blog-thumb svg { transform: scale(1.15) rotate(-5deg); }
.blog-card h4 { transition: color .2s ease; }
.blog-card:hover h4 { color: var(--primary); }

/* ---------- partner / DSA page ---------- */
.partner-benefit { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.partner-benefit:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.partner-benefit .pb-ico { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.partner-benefit:hover .pb-ico { transform: scale(1.12) rotate(-4deg); }
.pt-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.pt-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.pt-card.pt-mid:hover { transform: translateY(-7px); }
.pt-card .pt-badge { animation: badge-pulse 2.4s ease-in-out infinite; }

/* ---------- filter / tab / pill buttons ---------- */
.lc-filter, .rate-tab, .faq-cat-btn { transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease; }
.lc-filter:hover, .rate-tab:hover, .faq-cat-btn:hover { border-color: var(--primary); color: var(--primary); }
.lc-filter.active:hover, .rate-tab.active:hover, .faq-cat-btn.active:hover { color: #fff; }
.lc-filter:active, .rate-tab:active, .faq-cat-btn:active { transform: scale(.96); }

/* ---------- form fields: livelier focus state ---------- */
.form-field input, .form-field select, .score-form input, .faq-search input {
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.form-field input:focus, .form-field select:focus {
  outline: none; box-shadow: 0 0 0 4px var(--primary-light);
}
.consent-row, .lc-compare-check { transition: opacity .15s ease; }
.btn-full:active { transform: scale(.985); }

/* ---------- EMI / calculator sliders ---------- */
input[type=range]::-webkit-slider-thumb { transition: transform .15s ease, box-shadow .15s ease; }
input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.15); }
input[type=range]::-moz-range-thumb { transition: transform .15s ease; }
input[type=range]:hover::-moz-range-thumb { transform: scale(1.15); }
.cf-val { transition: color .15s ease; }
.calc-bar .principal, .calc-bar .interest { transition: width .5s cubic-bezier(.16,1,.3,1); }

/* ---------- form-success / draft-banner / compare-modal: proper entrance ---------- */
@media (prefers-reduced-motion: no-preference) {
  .form-success { animation: pop-in .45s cubic-bezier(.34,1.56,.64,1) both; }
  .form-success .fs-ico { animation: check-pop .5s cubic-bezier(.34,1.56,.64,1) .15s both; }
  .draft-banner.show { animation: slide-down-fade .35s cubic-bezier(.16,1,.3,1) both; }
  .score-result:not(.empty) .sr-gauge { animation: pop-in .4s cubic-bezier(.34,1.56,.64,1) both; }
  @keyframes pop-in { from { opacity: 0; scale: .92; } to { opacity: 1; scale: 1; } }
  @keyframes check-pop { 0% { scale: 0; } 60% { scale: 1.15; } 100% { scale: 1; } }
  @keyframes slide-down-fade { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }
  .footer-newsletter .nl-success.show { animation: slide-down-fade .35s cubic-bezier(.16,1,.3,1) both; }
}
.lc-compare-modal.show .lc-modal-panel { animation: pop-in .3s cubic-bezier(.16,1,.3,1) both; }
.lc-compare-modal.show .lc-modal-scrim { animation: fade-in .25s ease both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.lc-modal-close { transition: transform .2s ease, background .2s ease; }
.lc-modal-close:hover { transform: rotate(90deg); background: var(--border); }
.draft-banner button, .nl-row button, .sr-recheck { transition: transform .15s ease; }
.draft-banner button:hover { text-decoration-thickness: 2px; }
.theme-toggle svg { transition: transform .3s ease; }
.theme-toggle:hover svg { transform: rotate(20deg); }
.contact-detail .cd-ico { transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .2s ease; }
.contact-detail:hover .cd-ico { transform: scale(1.1) rotate(-4deg); background: rgba(255,255,255,0.2); }
.sticky-cta .btn { transition: transform .18s ease, box-shadow .18s ease; }
.sticky-cta .btn:hover { transform: translateY(-2px); }

/* =========================================================
   POLISH PASS 3 — blog article pages + cookie banner
   ========================================================= */

/* ---------- article prose: scroll-reveal for headings/CTA ---------- */
.article-body h2.reveal,
.article-body .article-cta.reveal {
  transition-duration: .8s; /* slightly slower than card stagger — reads better in long-form prose */
}
.article-body h2 { position: relative; padding-left: 0; }
.article-body a:not(.btn) { color: var(--primary); font-weight: 700; text-decoration: none; background-image: linear-gradient(var(--primary), var(--primary)); background-size: 0% 1.5px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .25s ease; }
.article-body a:not(.btn):hover { background-size: 100% 1.5px; }
.article-body table tr { transition: background .15s ease; }
.article-body table tr:hover { background: var(--bg-soft); }

/* ---------- article CTA box: lift + button shine already inherited from .btn-primary ---------- */
.article-cta { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.article-cta:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--primary-light); }

/* ---------- back-to-blog: arrow nudges left on hover ---------- */
.back-to-blog { transition: color .15s ease, translate .15s ease; }
.back-to-blog:hover { translate: -3px 0; text-decoration: none; }

/* ---------- article meta tag pill ---------- */
.article-meta-row .tag { transition: color .15s ease; }

/* ---------- cookie banner: icon-style accept button pulse once on first show ---------- */
@media (prefers-reduced-motion: no-preference) {
  .cookie-banner #cookieAccept { animation: badge-pulse 2.6s ease-in-out .6s infinite; }
  .cookie-banner.show { animation: cookie-rise .35s cubic-bezier(.16,1,.3,1) both; }
  @keyframes cookie-rise { from { opacity: 0; translate: 0 20px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
}

/* =========================================================
   POLISH PASS 4 — legal pages + FAQ/calculator reveal
   Kept intentionally minimal: these are read-heavy pages,
   so a single gentle entrance beats per-paragraph motion.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .legal-container { animation: hero-rise .6s cubic-bezier(.16,1,.3,1) .1s both; }
}
.legal-contact-box { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.legal-contact-box:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--primary-light); }
.last-updated { transition: transform .2s ease; }
.last-updated:hover { transform: translateX(2px); }

/* ---------- FAQ toolbar + list items now use .reveal for scroll-in ---------- */
.faq-toolbar.reveal, .faq-item.reveal { transition-duration: .55s; }

/* ---------- earnings calculator: result panel glow-in on first paint ---------- */
@media (prefers-reduced-motion: no-preference) {
  .earn-result .cr-emi { animation: pop-in .4s cubic-bezier(.34,1.56,.64,1) both; }
}


/* ═══════════════════════════════════════════════════════════
   FOOTER IMPROVEMENTS — Paisabazaar parity (Phase 1)
   ═══════════════════════════════════════════════════════════ */

/* ── Contact box inside brand column ── */
.footer-contact-box { margin: 14px 0 16px; padding: 12px 14px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; }
.fcb-row { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; font-size: 13.5px; }
.fcb-row svg { flex-shrink: 0; color: var(--primary); }
.fcb-row a { color: var(--ink); font-weight: 600; }
.fcb-row a:hover { color: var(--primary); }
.fcb-hours { font-size: 12px; color: var(--text-faint); margin: 4px 0 0; }

/* ── DSA/LSP disclosure strip ── */
.footer-dsa-disclosure { display: flex; align-items: flex-start; gap: 8px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 10px 14px; margin-bottom: 20px; font-size: 12.5px; line-height: 1.6; color: #78350f; }
html[data-theme="dark"] .footer-dsa-disclosure { background: #1c1a0d; border-color: #5a4b00; color: #fcd34d; }
.footer-dsa-disclosure svg { flex-shrink: 0; margin-top: 2px; color: #d97706; }

/* ── Lender strip ── */
.footer-lender-strip { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 12px 0; margin-bottom: 36px; }
.footer-lender-label { font-size: 12.5px; font-weight: 700; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.05em; }
.footer-lender-more { font-size: 13px; color: var(--primary); font-weight: 600; }
.footer-lender-more:hover { text-decoration: underline; }

/* ── SEO Most-Searched Block ── */
.footer-seo-block { padding: 28px 0 20px; border-bottom: 1px solid var(--border); margin-bottom: 28px; }
.footer-seo-title { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: 12px; }
.footer-seo-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.fseo-tab { padding: 5px 12px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--border); border-radius: 20px; background: var(--bg-soft); color: var(--text-soft); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.fseo-tab.active, .fseo-tab:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.fseo-panel { display: none; flex-wrap: wrap; gap: 6px 14px; }
.fseo-panel.active { display: flex; }
.fseo-panel a { font-size: 13px; color: var(--text-soft); }
.fseo-panel a:hover { color: var(--primary); text-decoration: underline; }

/* ── Wider 6-col grid (brand col broader) ── */
.footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr; }

/* ── Footer bottom links ── */
.footer-bottom { flex-direction: row; }
.footer-bottom-links { display: flex; gap: 10px; align-items: center; font-size: 12.5px; }
.footer-bottom-links a { color: var(--text-faint); }
.footer-bottom-links a:hover { color: var(--primary); }
.footer-bottom-links span { color: var(--border); }

@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-bottom { flex-direction: column; gap: 10px; }
}
@media (max-width: 620px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-seo-tabs { gap: 5px; }
  .footer-bottom-links { flex-wrap: wrap; justify-content: center; }
}

/* =========================================================
   MOTION LAYER — text + page animations
   One signature moment (headline word-rise + hero sequence),
   calm heading wipes, staggered content blocks, page transitions.
   Everything is inside prefers-reduced-motion: no-preference.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* 1. Headline: words rise out of a mask. Highlighted span moves as one unit
        (keeps its gradient text intact). */
  .mh-split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em 0 .16em; margin: -.06em 0 -.16em; }
  .mh-split .wi { display: inline-block; transform: translateY(115%); animation: mh-word-up .8s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(.1s + var(--i, 0) * 60ms); }
  @keyframes mh-word-up { to { transform: translateY(0); } }
  .page-hero-inner > h1.mh-split, .partner-hero-inner > h1.mh-split { animation: none; }

  /* 2. Home hero sequence: everything after the headline arrives in order */
  .js-motion .hero .lead, .js-motion .hero .hero-actions, .js-motion .hero .hero-trust, .js-motion .hero .hero-rating {
    animation: mh-rise .8s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--mh-d, .5s);
  }
  .js-motion .hero .hero-rating { --mh-d: .05s; }
  .js-motion .hero .lead { --mh-d: .55s; }
  .js-motion .hero .hero-actions { --mh-d: .7s; }
  .js-motion .hero .hero-trust { --mh-d: .85s; }
  @keyframes mh-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

  /* 3. Section headings: clean upward wipe when they enter the viewport */
  .js-motion .mh-h { clip-path: inset(0 0 100% 0); transform: translateY(.35em); transition: clip-path .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
  .js-motion .mh-h.mh-in { clip-path: inset(-12% -3% -30% -3%); transform: none; }

  /* 4. Content blocks (cards, tables, FAQ, contact boxes) on pages without their own reveal */
  .js-motion .mh-b { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .7s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--mh-bi, 0) * 70ms); }
  .js-motion .mh-b.mh-in { opacity: 1; transform: none; }

  /* 5. Page transitions (cross-document where supported) */
  ::view-transition-old(root) { animation: mh-vt-out .2s cubic-bezier(.4,0,1,1) both; }
  ::view-transition-new(root) { animation: mh-vt-in .4s cubic-bezier(.16,1,.3,1) both; }
  @keyframes mh-vt-out { to { opacity: 0; transform: translateY(-6px); } }
  @keyframes mh-vt-in { from { opacity: 0; transform: translateY(12px); } }
  /* Fallback exit for browsers without cross-document view transitions */
  html.mh-leaving body { opacity: 0; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease; }
}

/* =========================================================
   MOTION LAYER v2 — odometer numbers, blur-rise text,
   word-split headings, scroll-scrubbed statement text
   ========================================================= */
.count-up, .od, .od-d { font-variant-numeric: tabular-nums lining-nums; }
.od { --od-h: 1.2em; display: inline-flex; align-items: flex-start; white-space: pre; line-height: 1.2; }
.od-d { display: inline-block; height: var(--od-h); overflow: hidden; vertical-align: top;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%); }
.od-c { display: flex; flex-direction: column; transform: translateY(0); will-change: transform;
  transition: transform var(--od-dur, 1.6s) cubic-bezier(.16,1,.3,1) var(--od-dl, 0s); }
/* height and line-height use the same em value so every digit row is exactly --od-h tall
   (the old 1.12lh made rows ~1.25x tall, so the roll drifted and digits stuck half-way) */
.od-c > span { display: block; height: var(--od-h); line-height: var(--od-h); }
.od-s { display: inline-block; height: var(--od-h); line-height: var(--od-h); }

@media (prefers-reduced-motion: no-preference) {
  /* Words: rise + un-blur + slight settle-rotation (replaces the plain rise) */
  .mh-split .wi { transform-origin: 0 100%; transform: translateY(118%) rotate(3deg); filter: blur(5px);
    animation-name: mh-word-up2; animation-duration: .95s; }
  @keyframes mh-word-up2 { 60% { filter: blur(0); } to { transform: translateY(0) rotate(0); filter: blur(0); } }

  /* Section headings: same word treatment, but wait until scrolled into view */
  .js-motion .mh-v .wi { animation-play-state: paused; animation-delay: calc(var(--i, 0) * 55ms); }
  .js-motion .mh-v.mh-in .wi { animation-play-state: running; }

  /* Sub-paragraph directly under a heading: soft focus-in after the heading lands */
  .js-motion h2.mh-v + p { opacity: 0; filter: blur(6px); transform: translateY(10px);
    transition: opacity .9s ease .35s, filter .9s ease .35s, transform .9s cubic-bezier(.16,1,.3,1) .35s; }
  .js-motion h2.mh-v.mh-in + p { opacity: 1; filter: blur(0); transform: none; }

  /* Scroll-scrubbed statement text: words light up as you read down the page */
  .mh-sw { opacity: .2; transition: opacity .3s ease; }
  .mh-sw.on { opacity: 1; }
}

/* =========================================================
   MOTION LAYER v3 — interaction polish
   header depth, nav underline, card tilt + spotlight, hero
   mouse-parallax, magnetic CTAs, button ripple, list stagger,
   smoother FAQ accordion
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* Header gains depth once the page scrolls */
  .site-nav { transition: box-shadow .3s ease, background-color .3s ease; }
  .site-nav.mh-scrolled { box-shadow: 0 10px 34px -16px rgba(11,88,151,.38); }

  /* Nav links: underline slides in from the left */
  .nav-links > a, .nav-links > .has-menu > a {
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
    transition: background-size .35s cubic-bezier(.16,1,.3,1), color .15s ease;
  }
  .nav-links > a:hover, .nav-links > .has-menu > a:hover, .nav-links a.active { background-size: 100% 2px; }

  /* Cards: tilt + cursor spotlight (classes added by JS on first hover) */
  .mh-tilt { transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease !important; transition-delay: 0s !important; will-change: transform; }
  .mh-glow { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s ease;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(11,88,151,.10), transparent 62%); }
  html[data-theme="dark"] .mh-glow { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.09), transparent 62%); }
  .mh-tilt:hover > .mh-glow { opacity: 1; }

  /* Hero: layered mouse parallax */
  .hero .hv-main { translate: calc(var(--px, 0) * -10px) calc(var(--py, 0) * -8px); transition: translate .5s cubic-bezier(.16,1,.3,1); }
  .hero .hv-float-1 { translate: calc(var(--px, 0) * 16px) calc(var(--py, 0) * 12px); transition: translate .6s cubic-bezier(.16,1,.3,1); }
  .hero .hv-float-2 { translate: calc(var(--px, 0) * -18px) calc(var(--py, 0) * 14px); transition: translate .6s cubic-bezier(.16,1,.3,1); }

  /* Magnetic CTA: JS sets --mx/--my offsets via the translate property */
  .btn.mh-mag { transition: translate .3s cubic-bezier(.16,1,.3,1), transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease; }

  /* Click ripple */
  .mh-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .28; transform: scale(0); animation: mh-ripple .65s cubic-bezier(.16,1,.3,1) forwards; }
  @keyframes mh-ripple { to { transform: scale(1); opacity: 0; } }

  /* Plain content lists: items step in one after another */
  .js-motion .mh-li { opacity: 0; transform: translateX(-10px); transition: opacity .5s ease, transform .6s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--mh-li, 0) * 60ms); }
  .js-motion .mh-lin .mh-li { opacity: 1; transform: none; }

  /* FAQ: room for long answers, easing that feels physical */
  .faq-a { transition: max-height .5s cubic-bezier(.16,1,.3,1); }
  .faq-item.open .faq-a { max-height: 900px; }
  .faq-item.open .faq-a p { animation: mh-rise .5s cubic-bezier(.16,1,.3,1) .05s both; }
}

/* =========================================================
   CONTENT LINKS + RELATED-LINK CHIPS
   Links inside page copy were inheriting the body colour with no
   underline, so nobody could tell they were clickable. Body links are
   now coloured + underlined; "Explore / Related" lists are chips.
   ========================================================= */
.legal-container p:not(.rel) a:not(.btn),
.legal-container li a:not(.btn),
.legal-container td a:not(.btn) {
  color: var(--primary); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--primary) 45%, transparent);
  transition: text-decoration-color .2s ease, color .2s ease;
}
.legal-container p:not(.rel) a:not(.btn):hover,
.legal-container li a:not(.btn):hover,
.legal-container td a:not(.btn):hover { color: var(--primary-dark); text-decoration-color: currentColor; }

/* Button + text-link row under the FAQs */
.legal-container .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 18px 0 8px; }

/* Related / Explore links as clickable chips */
.rel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 22px; }
.rel > strong { flex: 0 0 100%; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); margin-bottom: -2px; }
.legal-container .rel a {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 8px 14px; border: 1.5px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--primary);
  font-size: 13.5px; font-weight: 600; line-height: 1.35; text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.legal-container .rel a::after { content: "\2192"; font-weight: 700; transition: transform .2s ease; }
.legal-container .rel a:hover, .legal-container .rel a:focus-visible {
  background: var(--primary); border-color: var(--primary); color: #fff;
  transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(11,88,151,.6);
}
html[data-theme="dark"] .legal-container .rel a:hover,
html[data-theme="dark"] .legal-container .rel a:focus-visible { color: #0B1220; }
.legal-container .rel a:hover::after, .legal-container .rel a:focus-visible::after { transform: translateX(3px); }

/* Small print under each page (was inline style="font-size:13px") */
.legal-container p.page-note, .page-note { font-size: 13px; }