/* ================================================================
   ArhamFinance Components v2 — NeoFinance
   ================================================================ */

/* ── Topbar ──────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 5000;
  backdrop-filter: blur(22px) saturate(1.8);
  -webkit-backdrop-filter: blur(22px) saturate(1.8);
  background: rgba(243, 246, 255, .82);
  border-bottom: 1px solid var(--border);
  transition: background .3s ease, border-color .3s ease;
}
html[data-theme="dark"] .topbar {
  background: rgba(3, 7, 18, .88);
  border-bottom-color: rgba(2, 142, 132, .22);
}
/* Glow line at bottom in dark mode */
.topbar::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary), var(--primary-2), transparent);
  opacity: 0;
  transition: opacity .4s ease;
}
html[data-theme="dark"] .topbar::after { opacity: .55; }

.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
}

/* ── Brand ───────────────────────────────────────────────────── */
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; text-decoration: none; }
.brand-logo-img {
  height: 38px;
  width: auto;
  display: block;
  flex-shrink: 0;
  transition: opacity .22s ease, filter .25s ease;
}
.brand-logo-img.sm {
  height: 32px;
}
.brand:hover .brand-logo-img { opacity: .88; }
/* White logo in dark mode */
html[data-theme="dark"] .brand-logo-img {
  filter: brightness(0) invert(1);
}

/* Shared framed-photo alignment */
:where(
  .partner-hero-img,
  .careers-hero-img,
  .cs-hero-img,
  .blog-hero-img,
  .bdet-hero-img,
  .contact-hero-img,
  .ld-ov-photo-img img
) {
  object-fit: cover;
  object-position: center center;
}

/* Legacy fallback (kept for non-logo pages) */
.brand-mark {
  width: 40px; height: 40px; border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
  color: white;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -.02em;
  box-shadow: 0 4px 18px rgba(2, 142, 132, .42), inset 0 1px 0 rgba(255,255,255,.22);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.brand-mark::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 55%;
  background: rgba(255,255,255,.18);
  border-radius: inherit;
}
.brand-mark.sm { width: 34px; height: 34px; border-radius: 12px; font-size: 12px; }
.brand-text { letter-spacing: -.025em; font-size: 16px; font-weight: 800; }

/* ── Nav ─────────────────────────────────────────────────────── */
.nav { display: flex; gap: 4px; }
.nav-link {
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
  padding: 9px 12px;
  border-radius: 12px;
  transition: all .18s ease;
}
.nav-link:hover { background: var(--surface-2); color: var(--text); }

.actions { display: flex; align-items: center; gap: 10px; }

/* ── Hamburger (mobile) ─────────────────────────────────────── */
.nav-burger {
  display: none;
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 12px;
  width: 42px; height: 42px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  transition: all .18s ease;
  flex-shrink: 0;
}
.nav-burger span {
  display: block;
  width: 18px; height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: all .26s ease;
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-burger:hover { border-color: var(--primary); background: rgba(2,142,132,.08); }
@media (max-width: 1024px) { .nav-burger { display: flex; } }
@media (max-width: 860px)  { .topbar-action:not(.theme-toggle) { display: none; } }

/* ── Mobile nav backdrop (hidden — drawer uses X button / Escape to close) ── */
.mob-nav__overlay { display: none !important; }

/* ── Mobile nav drawer (slides in from left) ─────────────────── */
.mob-nav {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: min(320px, 88vw);
  z-index: 4999;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  flex-direction: column;
  gap: 0;
  transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
  box-shadow: 6px 0 40px rgba(0, 0, 0, .3);
  display: flex;
}
html[data-theme="dark"] .mob-nav {
  background: rgba(5, 10, 24, .98);
  border-right-color: rgba(2, 142, 132, .18);
  backdrop-filter: blur(20px);
}
.mob-nav.is-open {
  transform: translateX(0);
}

/* ── Nav header (logo + close) ───────────────────────────────── */
.mob-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 2;
  flex-shrink: 0;
}
html[data-theme="dark"] .mob-nav__header { background: rgba(5, 10, 24, .98); }
.mob-nav__brand { display: flex; align-items: center; }
html[data-theme="dark"] .mob-nav__brand img { filter: brightness(0) invert(1); }
.mob-nav__close {
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--muted);
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.mob-nav__close:hover { background: var(--surface-3); color: var(--text); }

/* ── Nav body ────────────────────────────────────────────────── */
.mob-nav__body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px;
}

/* ── Accordion group ─────────────────────────────────────────── */
.mob-nav__group { margin-bottom: 2px; }

.mob-nav__label {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  padding: 11px 12px;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: background .15s, color .15s;
}
.mob-nav__label:hover { background: var(--surface-2); }
.mob-nav__group.is-open .mob-nav__label {
  background: rgba(2, 142, 132, .08);
  color: var(--primary);
}

.mob-nav__chev {
  flex-shrink: 0;
  color: var(--muted);
  transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.mob-nav__group.is-open .mob-nav__chev { transform: rotate(180deg); }

/* ── Sub-links (collapsed by default) ───────────────────────── */
.mob-nav__sub {
  overflow: hidden;
  max-height: 0;
  transition: max-height .3s cubic-bezier(.22,1,.36,1);
  padding-left: 8px;
}
.mob-nav__group.is-open .mob-nav__sub { max-height: 600px; }

.mob-nav__link {
  display: block;
  font-weight: 500;
  font-size: 13.5px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--muted);
  transition: background .12s, color .12s;
  line-height: 1.4;
}
.mob-nav__link:hover { background: var(--surface-2); color: var(--text); }

/* ── CTA footer ──────────────────────────────────────────────── */
.mob-nav__cta {
  display: grid; gap: 10px;
  padding: 16px 14px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
  position: sticky; bottom: 0;
}
html[data-theme="dark"] .mob-nav__cta { background: rgba(5, 10, 24, .98); }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, filter .16s ease, color .16s ease;
  letter-spacing: -.01em;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover {
  background: var(--surface-2);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
}
.btn:active { box-shadow: none; }

.btn-primary {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
  box-shadow: 0 4px 18px rgba(2, 142, 132, .38), 0 1px 4px rgba(2, 142, 132, .22);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
  filter: brightness(1.06);
  box-shadow: 0 8px 32px rgba(2, 142, 132, .52), 0 2px 8px rgba(2, 142, 132, .24);
}

.btn-ghost {
  background: transparent;
  border-color: var(--border);
}
.btn-ghost:hover {
  background: rgba(2, 142, 132, .07);
  border-color: var(--primary);
  color: var(--primary);
}

.btn-soft {
  background: var(--surface-2);
  border-color: var(--border);
}
.btn-soft:hover {
  background: var(--surface-3);
  border-color: var(--primary);
}

.btn-lg  { padding: 13px 22px; border-radius: var(--radius-sm); font-size: 15px; }
.w-full  { width: 100%; justify-content: center; }

/* ── Typography ──────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { color: var(--text); margin: 0; }
.h1 {
  font-size: clamp(38px, 5.5vw, 68px);
  line-height: 1.04;
  color: var(--text);
  margin: 16px 0 14px;
  letter-spacing: -.04em;
  font-weight: 900;
}
.h2 { font-size: clamp(24px, 2.8vw, 36px); margin: 0; letter-spacing: -.026em; font-weight: 800; color: var(--text); }
.h3 { font-size: 18px; margin: 10px 0 6px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.lead { font-size: 17px; line-height: 1.65; color: var(--muted); max-width: 54ch; }

/* Gradient text */
.grad {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline;
}

/* Animated status dot */
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(2,142,132,.18); }
  50%       { box-shadow: 0 0 0 7px rgba(2,142,132,.06); }
}

/* ── Hero ────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: 110px 0 76px;
  overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 32px; align-items: center; }
.hero-bg {
  position: absolute;
  inset: -80px -30px auto -30px;
  height: 520px;
  background:
    radial-gradient(600px 400px at 12% 38%, rgba(2, 142, 132, .22), transparent 70%),
    radial-gradient(700px 420px at 78% 22%, rgba(3, 196, 172, .16), transparent 70%);
  pointer-events: none;
}

/* ── Status pill ─────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(8px);
  font-size: 13px;
  font-weight: 700;
}
html[data-theme="dark"] .pill { background: rgba(7, 16, 42, .80); }
.pill .dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--success);
  box-shadow: 0 0 0 5px rgba(16, 185, 129, .18);
  animation: pulseDot 2.4s ease-in-out infinite;
}

.hero-cta  { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.trust-row { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.trust {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, .70);
  backdrop-filter: blur(8px);
  transition: border-color .18s ease, transform .18s ease;
}
html[data-theme="dark"] .trust { background: rgba(7, 16, 42, .65); }
.trust:hover { border-color: var(--primary); transform: translateY(-1px); }
.trust-kpi { font-weight: 900; letter-spacing: -.02em; }

.hero-card .card.chrome { border-radius: var(--radius); background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.48)); }
html[data-theme="dark"] .hero-card .card.chrome { background: linear-gradient(180deg, rgba(7,16,42,.90), rgba(12,24,58,.60)); }

/* ── Cards ───────────────────────────────────────────────────── */
.section { padding: 90px 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }

.card {
  background: rgba(255, 255, 255, .88);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 1px 3px rgba(2,142,132,.05), 0 20px 60px rgba(2,142,132,.10);
  backdrop-filter: blur(10px);
  transition: transform .20s ease, border-color .20s ease, box-shadow .20s ease;
}
html[data-theme="dark"] .card {
  background: rgba(7, 16, 42, .86);
  box-shadow: 0 1px 3px rgba(0,0,0,.20), 0 20px 60px rgba(0,0,0,.50);
}
.card.hover:hover {
  border-color: var(--border-glow);
  box-shadow: 0 4px 22px rgba(2,142,132,.16), 0 32px 80px rgba(2,142,132,.12);
}
html[data-theme="dark"] .card.hover:hover {
  box-shadow: 0 4px 22px rgba(2,142,132,.22), 0 32px 80px rgba(0,0,0,.60);
}

.card-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.card-title { font-weight: 900; letter-spacing: -.02em; }

/* ── Grids ───────────────────────────────────────────────────── */
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .grid4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .nav { display: none; }
  .grid3 { grid-template-columns: 1fr; }
  .grid2 { grid-template-columns: 1fr; }
  .grid4 { grid-template-columns: 1fr; }
}

/* ── Badges + chips ──────────────────────────────────────────── */
.badge {
  border: 1px solid var(--border);
  padding: 5px 11px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  background: var(--surface-2);
  letter-spacing: .02em;
}
.badge-good { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.26); color: #10b981; }
.badge-info { background: rgba(3,196,172,.12); border-color: rgba(3,196,172,.26); color: #03c4ac; }

.chip {
  display: inline-flex;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  border: 1px solid rgba(2,142,132,.22);
  background: rgba(2, 142, 132, .08);
  color: var(--primary);
  letter-spacing: -.01em;
  transition: all .16s ease;
}
.chip:hover { border-color: var(--primary); background: rgba(2,142,132,.15); }

/* ── Icons ───────────────────────────────────────────────────── */
.icon {
  width: 36px; height: 36px;
  border-radius: 14px;
  display: grid; place-items: center;
  font-weight: 900;
  color: white;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 4px 14px rgba(2, 142, 132, .38);
  flex-shrink: 0;
}

/* ── KPI / mini elements ─────────────────────────────────────── */
.kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; }
.kpi {
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: border-color .18s ease;
}
.kpi:hover { border-color: rgba(2,142,132,.32); }
.kpi-val { font-weight: 950; font-size: 20px; letter-spacing: -.03em; }

.mini { margin-top: 14px; }
.mini-row { display: flex; justify-content: space-between; gap: 10px; margin: 10px 0; align-items: center; }
.mini-strong { font-weight: 900; letter-spacing: -.02em; }
.progress {
  height: 8px;
  border-radius: 999px;
  background: rgba(2,142,132,.10);
  overflow: hidden;
  border: 1px solid var(--border);
}
.bar { height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-2)); border-radius: 999px; }

.mini-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
@media (max-width: 720px) { .mini-actions { grid-template-columns: 1fr; } }

/* ── Calculator ──────────────────────────────────────────────── */
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 720px) { .calc-grid { grid-template-columns: 1fr; } }

.label { display: block; font-weight: 800; margin-top: 8px; letter-spacing: -.01em; }
.field {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px; padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--ring);
}
.input {
  border: 0; outline: none; background: transparent; color: var(--text);
  width: 100%; font-weight: 800; font-size: 14px; font-family: inherit;
}

.row { display: flex; gap: 10px; flex-wrap: wrap; }
.calc-result {
  padding: 20px; border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.calc-big { font-size: 36px; font-weight: 980; margin: 10px 0 6px; letter-spacing: -.04em; }

/* ── Security ────────────────────────────────────────────────── */
.security { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; align-items: center; }
.security-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.mini-card {
  padding: 14px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-2);
  transition: border-color .18s ease, transform .18s ease;
}
.mini-card:hover { border-color: rgba(2,142,132,.30); transform: translateY(-1px); }
@media (max-width: 720px) { .security { grid-template-columns: 1fr; } }

/* ── Footer (theme-adaptive) ────────────────────────────────── */
.footer{background:var(--surface-2);padding:0;border-top:1px solid var(--border);margin-top:52px;position:relative;overflow:hidden}
.footer::before{display:none}
html[data-theme="dark"] .footer{background:#020d18;border-top:none}
.footer-inner{padding:60px 0 0}
.footer-grid{
  display:grid;grid-template-columns:300px 1fr 1fr 1fr;gap:0;
  border-bottom:1px solid var(--border);padding-bottom:48px;margin-bottom:0;
}
@media(max-width:1024px){.footer-grid{grid-template-columns:1fr 1fr;gap:40px;padding-bottom:40px}}
@media(max-width:580px){.footer-grid{grid-template-columns:1fr}}

/* Logo in footer — invert in dark mode only */
.footer-logo{transition:filter .2s}
html[data-theme="dark"] .footer-logo{filter:brightness(0) invert(1)}

/* Brand column */
.footer-brand-col{padding-right:44px;border-right:1px solid var(--border)}
@media(max-width:1024px){.footer-brand-col{border-right:none;padding-right:0}}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.footer-tagline{font-size:19px;font-weight:800;color:var(--text);margin:0 0 12px;line-height:1.3;font-family:var(--font-heading)}
.footer-tagline span{color:#028e84}
.footer-teal-line{width:36px;height:2px;background:#f59e0b;margin-bottom:16px}
.footer-desc{color:var(--muted);font-size:13.5px;line-height:1.65;margin-bottom:24px}
.footer-contact-head{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#028e84;margin-bottom:14px}
.footer-contact-item{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13.5px;padding:7px 0;text-decoration:none;transition:color .16s}
.footer-contact-item:hover{color:var(--text)}
.footer-contact-item svg{flex:0 0 auto;color:#028e84}
.footer-divider{border:none;border-top:1px solid var(--border);margin:18px 0}
.footer-security{display:flex;align-items:flex-start;gap:10px}
.footer-security svg{flex:0 0 auto;margin-top:1px}
.footer-security span{color:var(--muted);font-size:12px;line-height:1.6}

/* Content columns */
.footer-col{padding:0 36px;border-right:1px solid var(--border)}
.footer-col:last-child{border-right:none}
@media(max-width:1024px){.footer-col{padding:0;border-right:none}}
.footer-col-icon{width:46px;height:46px;border-radius:50%;border:1px solid rgba(2,142,132,.35);display:grid;place-items:center;margin-bottom:18px}
.footer-title{font-weight:900;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--text);margin-bottom:8px}
.footer-title-bar{width:28px;height:2px;background:#028e84;margin-bottom:20px}
.footer-link{display:flex;align-items:center;justify-content:space-between;color:var(--muted);padding:11px 0;font-weight:400;font-size:14.5px;border-bottom:1px solid var(--border);text-decoration:none;transition:color .16s}
.footer-link:hover{color:var(--primary)}
.footer-link svg{color:#028e84;flex:0 0 auto}

/* Bottom bar */
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:22px 0;border-top:1px solid var(--border);flex-wrap:wrap;
}
.footer-copyright{font-size:13px;color:var(--muted);line-height:1.5}
.footer-copyright a{color:#028e84;font-weight:600;text-decoration:none}
.footer-acl{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.footer-social{display:flex;gap:8px}
.footer-social-btn{width:36px;height:36px;border-radius:50%;background:var(--surface-3);border:1px solid var(--border);display:grid;place-items:center;color:var(--muted);text-decoration:none;font-size:13px;font-weight:800;transition:background .18s,border-color .18s,color .18s}
.footer-social-btn:hover{background:rgba(2,142,132,.15);border-color:rgba(2,142,132,.45);color:var(--primary)}
.footer-legal{display:flex;gap:0;flex-wrap:wrap}
.footer-legal a{font-size:13px;font-weight:400;color:var(--muted);padding:0 14px;border-right:1px solid var(--border);text-decoration:none;transition:color .16s}
.footer-legal a:last-child{border-right:none;padding-right:0}
.footer-legal a:hover{color:var(--primary)}

/* Form card extras */
.expert-v2__form-header{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.expert-v2__form-ico{width:40px;height:40px;border-radius:12px;background:#f0faf9;border:1px solid rgba(2,142,132,.15);display:grid;place-items:center;flex:0 0 auto}
.form-or-divider{display:flex;align-items:center;gap:12px;margin:14px 0;color:#9ca3af;font-size:11px;font-weight:700;letter-spacing:.1em}
.form-or-divider::before,.form-or-divider::after{content:'';flex:1;height:1px;background:rgba(0,0,0,.1)}
.form-response-note{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;background:#f8fafa;font-size:13px;color:#6b7280;line-height:1.5}
html[data-theme="dark"] .form-response-note{background:rgba(255,255,255,.05);color:var(--muted)}
html[data-theme="dark"] .form-or-divider::before,html[data-theme="dark"] .form-or-divider::after{background:rgba(255,255,255,.1)}
html[data-theme="dark"] .expert-v2__form-ico{background:rgba(2,142,132,.12);border-color:rgba(2,142,132,.25)}

/* ── Final CTA ───────────────────────────────────────────────── */
.final-cta {
  margin-top: 20px; padding: 22px 24px;
  border-radius: var(--radius);
  border: 1px solid rgba(2,142,132,.22);
  background: linear-gradient(135deg, rgba(2,142,132,.08), rgba(3,196,172,.06));
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  position: relative; overflow: hidden;
}
.final-cta::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(2,142,132,.04), rgba(3,196,172,.03));
  pointer-events: none;
}
.link { color: var(--primary); font-weight: 800; }

/* ── Range inputs ────────────────────────────────────────────── */
.range { width: 100%; accent-color: var(--primary); cursor: pointer; }
/* ── Expanding Topbar Actions ────────────────────────────────── */
.topbar-action {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  padding: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  flex-shrink: 0;
  text-decoration: none;
  gap: 0;
  white-space: nowrap;
  transition: width .26s ease, background .22s ease, border-color .22s ease, color .22s ease, transform .15s ease, box-shadow .22s ease;
  position: relative;
  overflow: hidden;
}
.topbar-action:hover,
.topbar-action:focus-visible {
  width: 164px;
  gap: 9px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-color: transparent;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(2,142,132,.28);
}
.topbar-action:active {
  transform: scale(0.94);
}
.topbar-action:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 12px;
}
.topbar-action svg {
  flex: 0 0 auto;
}
.topbar-action__label {
  display: block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -.01em;
  color: inherit;
  transition: max-width .24s ease, opacity .18s ease;
}
.topbar-action:hover .topbar-action__label,
.topbar-action:focus-visible .topbar-action__label {
  max-width: 108px;
  opacity: 1;
  color: #fff !important;
}
.topbar-action--credit:hover,
.topbar-action--credit:focus-visible {
  width: 190px;
}
.topbar-action--credit:hover .topbar-action__label,
.topbar-action--credit:focus-visible .topbar-action__label {
  max-width: 138px;
}
.topbar-action--vehicle:hover,
.topbar-action--vehicle:focus-visible {
  width: 158px;
}
.topbar-action--theme:hover,
.topbar-action--theme:focus-visible {
  width: 132px;
}
.topbar-action--theme:hover .topbar-action__label,
.topbar-action--theme:focus-visible .topbar-action__label {
  max-width: 82px;
}
.theme-icon {
  display: block;
  flex-shrink: 0;
  transition: opacity .2s, transform .25s;
}
/* Dark mode: show sun (click to go light) */
html[data-theme="dark"] .theme-icon--sun  { display: block; }
html[data-theme="dark"] .theme-icon--moon { display: none; }
/* Light mode: show moon (click to go dark) */
html[data-theme="light"] .theme-icon--sun  { display: none; }
html[data-theme="light"] .theme-icon--moon { display: block; }
html[data-theme="dark"] .topbar-action__label--light { display: none; }
html[data-theme="light"] .topbar-action__label--dark { display: none; }
/* Default (fallback dark) */
html:not([data-theme="light"]) .theme-icon--sun  { display: block; }
html:not([data-theme="light"]) .theme-icon--moon { display: none; }

.topbar .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.crumbnav{
  display:flex;
  align-items:center;
  gap:28px;
  position:relative;
}
/* Hide desktop nav and show hamburger on tablet/mobile — must come AFTER display:flex above */
@media (max-width: 1024px) { .crumbnav { display: none; } }

.crumb{
  position:relative;
}

.crumb-btn{
  background:none;
  border:0;
  font-weight:700;
  font-size:14px;
  color:var(--text);
  padding:10px 14px;
  border-radius:14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
  transition:all .18s ease;
}

.crumb-btn:hover{
  background:var(--surface-2);
}

.chev{
  font-size:11px;
  opacity:.7;
}

.crumb-menu{
  position:absolute;
  top:110%;
  left:0;
  min-width:280px;
  padding:22px;
  border-radius:22px;
  background:rgba(255,255,255,.85);
  backdrop-filter: blur(20px);
  border:1px solid var(--border);
  box-shadow:0 40px 80px rgba(0,0,0,.18);
  display:grid;
  gap:12px;
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:all .22s ease;
  z-index:200;
}

html[data-theme="dark"] .crumb-menu{
  background:rgba(15,20,35,.88);
  box-shadow:0 40px 80px rgba(0,0,0,.55);
}

.crumb:hover .crumb-menu{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.crumb-menu a{
  font-weight:600;
  font-size:14px;
  color:var(--text);
  padding:6px 0;
  transition:all .18s ease;
}

.crumb-menu a:hover{
  color:var(--primary);
}

.crumb{
  position: relative;
}

.crumb::after{
  content:"";
  position:absolute;
  left:-10px;
  right:-10px;
  top:100%;
  height:18px;
}

.crumb:focus-within .crumb-menu{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.crumb-menu{
  z-index: 9999;
}

.crumb:last-child .crumb-menu{
  left:auto;
  right:0;
}

/* Wide multi-column "More" dropdown */
.crumb--wide .crumb-menu--cols{
  width:max-content;
  display:grid;
  grid-template-columns:repeat(1,auto);
  align-items:start;
  gap:0 40px;
  padding:24px 26px;
}
.crumb-col{display:flex;flex-direction:column;gap:2px}
.crumb-col-head{
  font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--primary);
  margin-bottom:4px;padding-bottom:4px;
  border-bottom:1px solid var(--border);
}
.crumb-col a{font-size:13px;padding:3px 0}
.crumb-col sup{font-size:.6em;vertical-align:super}



/* ===========================
   Luxury editorial system
   (no-card, full-bleed flows)
   =========================== */

.kicker{
  display:inline-block;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12px;
  opacity:.78;
}

.lux-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}
.lux-head__actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
@media (max-width:900px){.lux-head{flex-direction:column;align-items:flex-start}.lux-head__actions{justify-content:flex-start}}

.lux-cut{height:44px; width:100%;}
.lux-cut--top{
  background: linear-gradient(135deg, rgba(2,142,132,.18), rgba(3,196,172,.10), transparent 70%);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
  opacity:.8;
}
.lux-cut--bottom{
  background: linear-gradient(315deg, rgba(2,142,132,.14), rgba(3,196,172,.10), transparent 70%);
  clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%);
  opacity:.7;
}

/* SERVICES (dark runway) */
.lux-services{
  position:relative;
  padding:68px 0;
  background:
    radial-gradient(900px 500px at 10% 10%, rgba(3,196,172,.16), transparent 60%),
    radial-gradient(900px 520px at 90% 35%, rgba(2,142,132,.26), transparent 60%),
    linear-gradient(180deg, rgba(3,7,18,.97), rgba(7,16,42,.99));
  color:#eef3ff;
  border-top:1px solid rgba(2,142,132,.18);
  border-bottom:1px solid rgba(2,142,132,.18);
}
/* dark mode keeps the deep navy runway look */
.lux-services .muted{color:rgba(238,243,255,.72)}
.lux-services .btn.btn-ghost{border-color:rgba(255,255,255,.18)}
/* light mode: swap to a clean indigo-tinted surface */
html[data-theme="light"] .lux-services{
  background:
    radial-gradient(900px 500px at 10% 10%, rgba(2,142,132,.08), transparent 60%),
    radial-gradient(900px 520px at 90% 35%, rgba(3,196,172,.06), transparent 60%),
    #f0faf9;
  color: var(--text);
  border-top-color: rgba(2,142,132,.16);
  border-bottom-color: rgba(2,142,132,.16);
}
html[data-theme="light"] .lux-services .muted{color:var(--muted)}
html[data-theme="light"] .lux-services .kicker{color:var(--primary)}
html[data-theme="light"] .lux-services .lux-service{
  background: rgba(255,255,255,.88);
  border-color: rgba(2,142,132,.14);
}
html[data-theme="light"] .lux-services .lux-service:hover{
  border-color: var(--primary);
  box-shadow: 0 8px 30px rgba(2,142,132,.12);
}
html[data-theme="light"] .lux-services .lux-service__meta span{
  border-color:rgba(2,142,132,.2);
  color:var(--muted);
}
html[data-theme="light"] .lux-services .lux-services__foot{border-top-color:rgba(2,142,132,.1)}
html[data-theme="light"] .lux-services .lux-marquee span{border-color:rgba(2,142,132,.2);color:var(--text)}
html[data-theme="light"] .lux-services .btn.btn-ghost{border-color:var(--border);color:var(--text)}
html[data-theme="light"] .lux-services .lux-service__halo{
  background:radial-gradient(closest-side at 30% 20%, rgba(2,142,132,.14), transparent 60%);
}
html[data-theme="light"] .lux-cut--top{
  background: linear-gradient(135deg, rgba(2,142,132,.09), rgba(3,196,172,.06), transparent 70%);
}
html[data-theme="light"] .lux-cut--bottom{
  background: linear-gradient(315deg, rgba(2,142,132,.08), rgba(3,196,172,.05), transparent 70%);
}
.lux-services__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:18px;
}
@media (max-width:900px){.lux-services__grid{grid-template-columns:1fr}}
.lux-service{
  position:relative;
  padding:22px 22px 18px;
  border-radius:22px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  transform:translateZ(0);
  transition:transform .18s ease, border-color .18s ease;
}
.lux-service:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.22)}
.lux-service__halo{
  position:absolute; inset:-40%;
  background: radial-gradient(closest-side at 30% 20%, rgba(255,255,255,.16), transparent 60%);
  opacity:.0; transition:opacity .22s ease;
  pointer-events:none;
}
.lux-service:hover .lux-service__halo{opacity:.9}
.lux-service__icon{font-size:22px; opacity:.9; margin-bottom:12px}
.lux-service__title{font-weight:950; font-size:18px; letter-spacing:-.02em; margin-bottom:6px}
.lux-service__text{opacity:.78; line-height:1.55; max-width:58ch}
.lux-service__meta{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; opacity:.86}
.lux-service__meta span{border:1px solid rgba(255,255,255,.14); padding:6px 10px; border-radius:999px; font-weight:900; font-size:12px}

.lux-services__foot{margin-top:18px; overflow:hidden; border-top:1px solid rgba(255,255,255,.10); padding-top:14px}
.lux-marquee{display:flex; gap:18px; white-space:nowrap; animation:luxMarquee 12s linear infinite; opacity:.82}
.lux-marquee span{border:1px solid rgba(255,255,255,.14); padding:8px 12px; border-radius:999px; font-weight:900; font-size:12px}
@keyframes luxMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* CALC APP */
.lux-calc .range{accent-color: var(--primary)}
.calc-app{
  border-radius:26px;
  overflow:hidden;
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.72));
  box-shadow: var(--shadow);
  display:grid;
  grid-template-columns: 1.05fr .95fr;
}
html[data-theme="dark"] .calc-app{
  background: linear-gradient(180deg, rgba(11,18,32,.88), rgba(15,26,47,.80));
}
@media (max-width:900px){.calc-app{grid-template-columns:1fr}}
.calc-app__left{padding:18px 18px 16px}
.calc-app__right{padding:18px; background: radial-gradient(900px 520px at 20% 10%, rgba(2,142,132,.14), transparent 60%)}
.calc-app__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}

.seg{display:inline-flex;gap:6px;padding:6px;border-radius:999px;border:1px solid var(--border);background: rgba(255,255,255,.55)}
html[data-theme="dark"] .seg{background: rgba(255,255,255,.06)}
.seg-btn{
  border:0;
  background:transparent;
  padding:8px 10px;
  border-radius:999px;
  font-weight:950;
  cursor:pointer;
  opacity:.75;
}
.seg-btn.is-active{background: var(--primary); color:#fff; opacity:1}
.calc-field{margin-top:12px}
.calc-field__label{font-weight:950;letter-spacing:-.01em;margin-bottom:8px}
.calc-input{
  display:flex;align-items:center;gap:10px;
  border-radius:16px;border:1px solid var(--border);
  background: rgba(255,255,255,.55);
  padding:10px 12px;
}
html[data-theme="dark"] .calc-input{background: rgba(255,255,255,.06)}
.calc-input .prefix{font-weight:950;opacity:.9}
.calc-field__mini{display:flex;justify-content:space-between;margin-top:6px;font-size:12px}
.calc-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

.calc-pay{margin-bottom:12px}
.calc-pay__big{font-size:36px;font-weight:980;letter-spacing:-.04em;margin-top:6px}
@media (max-width:900px){.calc-pay__big{font-size:32px}}
.calc-pay__note{line-height:1.55}

.calc-donut{display:grid;grid-template-columns: 160px 1fr; gap:14px; align-items:center; margin-top:12px}
@media (max-width:900px){.calc-donut{grid-template-columns:1fr}}
/* ── Donut 3D ──────────────────────────────────────────────── */
.donut{
  width:160px; height:160px; border-radius:50%;
  background: conic-gradient(
    var(--primary) calc(var(--i)*1%),
    rgba(2,142,132,.1) 0
  );
  display:grid; place-items:center;
  position:relative;
  transform: perspective(560px) rotateX(20deg) scale(1.02);
  box-shadow:
    0 22px 0 -10px rgba(2,142,132,.4),
    0 36px 54px rgba(2,142,132,.3),
    inset 0 3px 0 rgba(255,255,255,.28),
    inset 0 -3px 0 rgba(0,0,0,.14);
  transition: transform .55s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
}
.donut:hover{
  transform: perspective(560px) rotateX(6deg) scale(1.06);
  box-shadow:
    0 28px 0 -10px rgba(2,142,132,.5),
    0 44px 64px rgba(2,142,132,.38),
    inset 0 3px 0 rgba(255,255,255,.28),
    inset 0 -3px 0 rgba(0,0,0,.14);
}
/* Outer glow ring */
.donut::before{
  content:"";
  position:absolute; inset:-10px;
  border-radius:50%;
  background: conic-gradient(rgba(2,142,132,.24) calc(var(--i)*1%), transparent 0);
  filter: blur(12px);
  z-index:-1;
  pointer-events:none;
}
/* Top gloss shine */
.donut::after{
  content:"";
  position:absolute; inset:0;
  border-radius:50%;
  background: linear-gradient(168deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,.1) 40%, transparent 60%);
  pointer-events:none;
}
html[data-theme="dark"] .donut{
  background: conic-gradient(
    var(--primary) calc(var(--i)*1%),
    rgba(2,142,132,.14) 0
  );
  box-shadow:
    0 22px 0 -10px rgba(2,142,132,.5),
    0 36px 64px rgba(2,142,132,.36),
    inset 0 3px 0 rgba(255,255,255,.15),
    inset 0 -3px 0 rgba(0,0,0,.28);
}
.donut__inner{
  width:72%;height:72%;
  border-radius:50%;
  background: var(--surface);
  display:grid;place-items:center;
  text-align:center;
  padding:10px;
  border:1px solid var(--border);
}
.donut__value{font-weight:980;font-size:22px;letter-spacing:-.02em;margin-top:4px}
.donut-rows{display:grid;gap:10px}
.donut-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dot{width:10px;height:10px;border-radius:999px}
.dot--p{background: rgba(2,142,132,.25)}
.dot--i{background: rgba(2,142,132,.92)}
html[data-theme="dark"] .dot--p{background: rgba(255,255,255,.30)}
html[data-theme="dark"] .dot--i{background: rgba(2,142,132,.90)}

.calc-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
@media (max-width:900px){.calc-kpis{grid-template-columns:1fr}}
.calc-kpi{border:1px solid var(--border);border-radius:18px;padding:12px;background: rgba(255,255,255,.55);display:flex;justify-content:space-between;align-items:center}
html[data-theme="dark"] .calc-kpi{background: rgba(255,255,255,.06)}
.calc-kpi b{font-weight:980}
.calc-cta{display:grid;gap:10px;margin-top:14px}

/* ABOUT horizontal timeline (full width) */
.lux-about{padding:72px 0 22px}
.lux-about__head{padding-bottom:16px}
.lux-timeline{
  width:100%;
  overflow:hidden;
  padding: 10px 0 24px;
}
.lux-timeline__track{
  width:min(1120px, calc(100% - 40px));
  margin: 0 auto;
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  padding: 22px 10px 18px;
}
@media (max-width:900px){
  .lux-timeline__track{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.lux-timeline__bar{
  position:absolute;
  left:20px; right:20px;
  top: 44px;
  height: 2px;
  background: rgba(2,6,23,.10);
}
html[data-theme="dark"] .lux-timeline__bar{background: rgba(255,255,255,.14)}
.lux-timeline__fill{
  display:block;height:100%;width:0%;
  background: linear-gradient(90deg, var(--primary), rgba(6,182,212,.95));
  border-radius:999px;
  transition: width .65s cubic-bezier(.2,.8,.2,1);
}
.lux-tick{
  text-align:left;
  background:transparent;
  border:0;
  cursor:pointer;
  padding: 10px 10px 10px 4px;
}
.lux-tick__dot{
  width:12px;height:12px;border-radius:999px;
  background: rgba(2,6,23,.24);
  border:2px solid rgba(255,255,255,.9);
  display:inline-block;
  box-shadow: 0 12px 30px rgba(2,6,23,.12);
}
html[data-theme="dark"] .lux-tick__dot{background: rgba(255,255,255,.24); border-color: rgba(11,18,32,.95)}
.lux-tick__title{display:block;font-weight:980;letter-spacing:-.02em;margin-top:10px}
.lux-tick__text{display:block;margin-top:6px;line-height:1.5}
.lux-tick.is-active .lux-tick__dot{background: var(--primary); box-shadow:0 18px 44px rgba(37,99,235,.25)}
.lux-timeline.is-inview .lux-timeline__bar{opacity:1}

/* FAQ layout */
.lux-faq__grid{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap:22px;
  align-items:start;
}
@media (max-width:900px){.lux-faq__grid{grid-template-columns:1fr}}
.lux-faq__support{
  margin-top:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  border-radius:18px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.55);
}
html[data-theme="dark"] .lux-faq__support{background: rgba(255,255,255,.06)}
.lux-faq .faq-item{
  border-radius:18px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.55);
}
html[data-theme="dark"] .lux-faq .faq-item{background: rgba(255,255,255,.06)}
.lux-faq .faq-q{padding:14px 14px}
.lux-faq .chev{
  width:34px;height:34px;border-radius:12px;
  display:grid;place-items:center;
  border:1px solid var(--border);
  background: rgba(255,255,255,.50);
  font-weight:950;
}
html[data-theme="dark"] .lux-faq .chev{background: rgba(255,255,255,.06)}
.lux-faq .faq-item.is-open .faq-a{max-height:220px}
.lux-faq .faq-a{transition:max-height .28s ease}
.lux-faq .faq-a > div{padding: 0 14px 14px}

/* Expert band */
.lux-expert{
  padding: 54px 0 64px;
  margin-top: 18px;
  background:
    radial-gradient(1000px 520px at 20% 10%, rgba(2,142,132,.12), transparent 60%),
    radial-gradient(900px 520px at 80% 40%, rgba(3,196,172,.10), transparent 60%);
}
.lux-expert__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top: 14px;
}
@media (max-width:900px){.lux-expert__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.lux-expert__grid{grid-template-columns:1fr}}
.expert-tile{
  border:1px solid var(--border);
  background: rgba(255,255,255,.55);
  border-radius:18px;
  padding:14px;
}
html[data-theme="dark"] .expert-tile{background: rgba(255,255,255,.06)}
.expert-ico{
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;
  border:1px solid var(--border);
  background: rgba(255,255,255,.60);
  margin-bottom:10px;
}
html[data-theme="dark"] .expert-ico{background: rgba(255,255,255,.06)}
.expert-link{display:inline-block;margin-top:8px;font-weight:950;text-decoration:underline;text-underline-offset:3px}
.lux-expert__form{margin-top:14px}
.lux-contact-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:900px){.lux-contact-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.lux-contact-grid{grid-template-columns:1fr}}
.lux-contact-form{margin-top:18px}

/* INNER PAGES */
.lux-page-hero{
  padding: 92px 0 34px;
  position:relative;
  overflow:hidden;
}
.lux-page-hero:before{
  content:"";
  position:absolute; inset:-60px -40px auto -40px;
  height: 420px;
  background:
    radial-gradient(600px 360px at 12% 35%, rgba(2,142,132,.18), transparent 60%),
    radial-gradient(620px 360px at 88% 30%, rgba(3,196,172,.14), transparent 60%);
  pointer-events:none;
}
/* Top accent strip — colour varies per group */
.lux-page-hero::after{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--primary),var(--primary-2));
}
/* ── Home group (emerald green) ── */
[data-group="home"] .lux-page-hero::after{background:linear-gradient(90deg,#10b981,#03c4ac)}
[data-group="home"] .lux-page-hero:before{
  background:
    radial-gradient(600px 360px at 12% 35%,rgba(16,185,129,.16),transparent 60%),
    radial-gradient(620px 360px at 88% 30%,rgba(3,196,172,.12),transparent 60%);
}
[data-group="home"] .lux-art-blob{
  background:
    radial-gradient(700px 420px at 20% 20%,rgba(16,185,129,.14),transparent 60%),
    radial-gradient(700px 420px at 80% 30%,rgba(3,196,172,.10),transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.52));
}
html[data-theme="dark"] [data-group="home"] .lux-art-blob{
  background:
    radial-gradient(700px 420px at 20% 20%,rgba(16,185,129,.20),transparent 60%),
    radial-gradient(700px 420px at 80% 30%,rgba(3,196,172,.14),transparent 60%),
    linear-gradient(180deg,rgba(7,16,42,.72),rgba(12,24,58,.52));
}
[data-group="home"] .lux-art-dot{background:#10b981}
[data-group="home"] .dot{background:#10b981!important}
/* ── Business group (amber) ── */
[data-group="business"] .lux-page-hero::after{background:linear-gradient(90deg,#f59e0b,#fb923c)}
[data-group="business"] .lux-page-hero:before{
  background:
    radial-gradient(600px 360px at 12% 35%,rgba(245,158,11,.15),transparent 60%),
    radial-gradient(620px 360px at 88% 30%,rgba(251,191,36,.10),transparent 60%);
}
[data-group="business"] .lux-art-blob{
  background:
    radial-gradient(700px 420px at 20% 20%,rgba(245,158,11,.13),transparent 60%),
    radial-gradient(700px 420px at 80% 30%,rgba(251,191,36,.09),transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.52));
}
html[data-theme="dark"] [data-group="business"] .lux-art-blob{
  background:
    radial-gradient(700px 420px at 20% 20%,rgba(245,158,11,.20),transparent 60%),
    radial-gradient(700px 420px at 80% 30%,rgba(251,191,36,.14),transparent 60%),
    linear-gradient(180deg,rgba(7,16,42,.72),rgba(12,24,58,.52));
}
[data-group="business"] .lux-art-dot{background:#f59e0b}
[data-group="business"] .dot{background:#f59e0b!important}
/* ── Specialty group (cyan) ── */
[data-group="specialty"] .lux-page-hero::after{background:linear-gradient(90deg,#06b6d4,#028e84)}
[data-group="specialty"] .lux-page-hero:before{
  background:
    radial-gradient(600px 360px at 12% 35%,rgba(6,182,212,.18),transparent 60%),
    radial-gradient(620px 360px at 88% 30%,rgba(3,196,172,.14),transparent 60%);
}
[data-group="specialty"] .lux-art-blob{
  background:
    radial-gradient(700px 420px at 20% 20%,rgba(6,182,212,.14),transparent 60%),
    radial-gradient(700px 420px at 80% 30%,rgba(3,196,172,.10),transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.52));
}
html[data-theme="dark"] [data-group="specialty"] .lux-art-blob{
  background:
    radial-gradient(700px 420px at 20% 20%,rgba(6,182,212,.20),transparent 60%),
    radial-gradient(700px 420px at 80% 30%,rgba(3,196,172,.14),transparent 60%),
    linear-gradient(180deg,rgba(7,16,42,.72),rgba(12,24,58,.52));
}
[data-group="specialty"] .lux-art-dot{background:#06b6d4}
[data-group="specialty"] .dot{background:#06b6d4!important}
/* ── More / Vehicle group (rose-purple) ── */
[data-group="more"] .lux-page-hero::after{background:linear-gradient(90deg,#ec4899,#028e84)}
[data-group="more"] .lux-page-hero:before{
  background:
    radial-gradient(600px 360px at 12% 35%,rgba(236,72,153,.14),transparent 60%),
    radial-gradient(620px 360px at 88% 30%,rgba(2,142,132,.12),transparent 60%);
}
[data-group="more"] .lux-art-blob{
  background:
    radial-gradient(700px 420px at 20% 20%,rgba(236,72,153,.12),transparent 60%),
    radial-gradient(700px 420px at 80% 30%,rgba(2,142,132,.10),transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.52));
}
html[data-theme="dark"] [data-group="more"] .lux-art-blob{
  background:
    radial-gradient(700px 420px at 20% 20%,rgba(236,72,153,.18),transparent 60%),
    radial-gradient(700px 420px at 80% 30%,rgba(2,142,132,.14),transparent 60%),
    linear-gradient(180deg,rgba(7,16,42,.72),rgba(12,24,58,.52));
}
[data-group="more"] .lux-art-dot{background:#ec4899}
[data-group="more"] .dot{background:#ec4899!important}
/* Group watermark icon */
.lux-page-group-mark{
  position:absolute;right:-10px;bottom:-20px;
  font-size:180px;line-height:1;opacity:.07;pointer-events:none;user-select:none;
  filter:blur(1px);
}
[data-group="personal"] .lux-page-group-mark::before{content:"💳"}
[data-group="home"] .lux-page-group-mark::before{content:"🏠"}
[data-group="business"] .lux-page-group-mark::before{content:"💼"}
[data-group="specialty"] .lux-page-group-mark::before{content:"⭐"}
[data-group="more"] .lux-page-group-mark::before{content:"🚗"}
.lux-page-hero--simple{padding-bottom:14px}
.crumbs{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.crumbs .sep{opacity:.5}
.crumb-current{font-weight:950;color:var(--text)}
.lux-page-hero__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:18px;
  align-items:center;
}
@media (max-width:900px){.lux-page-hero__grid{grid-template-columns:1fr}}
.lux-title{letter-spacing:-.04em}
.pill--soft{background: rgba(255,255,255,.55); border:1px solid var(--border)}
html[data-theme="dark"] .pill--soft{background: rgba(255,255,255,.06)}
.lux-kpi-strip{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px}
.lux-kpi-strip > div{display:flex;gap:8px;align-items:baseline}
.lux-kpi-strip b{font-weight:980}

.lux-page-hero__art{position:relative;min-height:320px}
.lux-art-blob{
  position:absolute; inset: 10% 6% 10% 6%;
  border-radius:28px;
  background:
    radial-gradient(700px 420px at 20% 20%, rgba(2,142,132,.16), transparent 60%),
    radial-gradient(700px 420px at 80% 30%, rgba(3,196,172,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.52));
  border:1px solid var(--border);
}
html[data-theme="dark"] .lux-art-blob{
  background:
    radial-gradient(700px 420px at 20% 20%, rgba(2,142,132,.22), transparent 60%),
    radial-gradient(700px 420px at 80% 30%, rgba(3,196,172,.16), transparent 60%),
    linear-gradient(180deg, rgba(7,16,42,.72), rgba(12,24,58,.52));
}
.lux-art-ui{
  position:absolute; right: 8%; top: 18%;
  width:min(420px, 90%);
  border-radius:22px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow-sm);
  overflow:hidden;
}
html[data-theme="dark"] .lux-art-ui{background: rgba(11,18,32,.78)}
.lux-art-ui__top{display:flex;align-items:center;justify-content:space-between;padding:12px 12px;border-bottom:1px solid var(--border)}
.lux-art-pill{font-weight:950;font-size:12px;padding:7px 10px;border-radius:999px;border:1px solid var(--border);background: rgba(255,255,255,.55)}
html[data-theme="dark"] .lux-art-pill{background: rgba(255,255,255,.06)}
.lux-art-dot{width:10px;height:10px;border-radius:999px;background: var(--primary)}
.lux-art-ui__body{padding:12px}
.lux-art-ui__cta{display:grid;gap:8px;margin-top:12px}

.lux-check{margin:10px 0 0;padding-left:18px;display:grid;gap:8px}
.lux-check li{line-height:1.55}

.lux-steps{padding: 18px 0 36px}
.lux-steps__head{margin-bottom:12px}
.lux-steps__row{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  padding: 14px 0;
}
@media (max-width:900px){.lux-steps__row{grid-template-columns:1fr}}
.lux-step{
  display:flex;gap:12px;align-items:flex-start;
  padding: 14px 14px;
  border-radius:18px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.55);
}
html[data-theme="dark"] .lux-step{background: rgba(255,255,255,.06)}
.lux-step__num{
  width:36px;height:36px;border-radius:14px;
  display:grid;place-items:center;
  font-weight:980;
  background: rgba(2,142,132,.12);
  border:1px solid rgba(2,142,132,.24);
  color: var(--primary);
}
.lux-steps__bar{
  position:absolute; left:16px; right:16px; bottom:0;
  height:2px; background: rgba(2,6,23,.10);
}
html[data-theme="dark"] .lux-steps__bar{background: rgba(255,255,255,.14)}
.lux-steps__bar span{display:block;height:100%;width:100%;background: linear-gradient(90deg, var(--primary), rgba(6,182,212,.95)); border-radius:999px; opacity:.55}

.lux-flow__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:900px){.lux-flow__grid{grid-template-columns:1fr}}
.lux-flow__block{padding:0}
.lux-note{
  margin-top:18px;
  padding: 14px 14px;
  border-radius:18px;
  border:1px dashed var(--border);
  display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
}
.lux-related{margin-top:18px}
.lux-related__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.lux-chips{display:flex;gap:10px;flex-wrap:wrap}
.lux-center{text-align:center;display:flex;flex-direction:column;align-items:center}
.lux-center p,.lux-center .lead{max-width:56ch;text-align:center;margin-left:auto;margin-right:auto}

/* ===========================
   How It Works — Process Steps
   =========================== */
.how-process{padding:80px 0 72px}
.how-process__head{text-align:center;max-width:900px;margin:0 auto 52px}
.how-steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  position:relative;
}
.how-steps::before{
  content:"";position:absolute;top:52px;
  left:calc(12.5%);right:calc(12.5%);
  height:2px;
  background:linear-gradient(90deg,var(--primary),var(--primary-2));
  opacity:.18;z-index:0;
}
@media(max-width:900px){
  .how-steps{grid-template-columns:1fr 1fr;gap:24px 12px}
  .how-steps::before{display:none}
}
@media(max-width:540px){.how-steps{grid-template-columns:1fr;gap:16px}}
.how-step{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:0 18px 32px;position:relative;z-index:1;
}
.how-step__badge{
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff;
  letter-spacing:-.02em;margin-bottom:22px;flex-shrink:0;
  box-shadow:0 0 0 8px rgba(2,142,132,.10),0 12px 28px rgba(2,142,132,.30);
  position:relative;
}
.how-step__badge::after{
  content:"";position:absolute;inset:3px;border-radius:50%;
  background:linear-gradient(168deg,rgba(255,255,255,.30) 0%,transparent 60%);
  pointer-events:none;
}
.how-step__icon{font-size:28px;line-height:1;margin-bottom:14px;display:block}
.how-step__title{font-weight:800;letter-spacing:-.02em;font-size:1rem;margin-bottom:8px}
.how-step__text{font-size:.875rem;line-height:1.6;color:var(--muted)}

.how-trust-bar{
  display:flex;align-items:stretch;gap:0;
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);
  margin-top:52px;background:rgba(255,255,255,.55);backdrop-filter:blur(10px);
}
html[data-theme="dark"] .how-trust-bar{background:rgba(255,255,255,.04)}
.how-trust-stat{
  flex:1;padding:22px 20px;text-align:center;
  border-right:1px solid var(--border);
}
.how-trust-stat:last-child{border-right:0}
.how-trust-stat__val{
  font-size:1.75rem;font-weight:900;letter-spacing:-.03em;display:block;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.how-trust-stat__label{font-size:.8rem;color:var(--muted);margin-top:4px}

.how-features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px}
@media(max-width:760px){
  .how-features{grid-template-columns:1fr;gap:12px}
  .how-trust-bar{flex-direction:column}
  .how-trust-stat{border-right:0;border-bottom:1px solid var(--border)}
  .how-trust-stat:last-child{border-bottom:0}
}
.how-feat{
  padding:24px 22px;border-radius:var(--radius);border:1px solid var(--border);
  background:rgba(255,255,255,.55);backdrop-filter:blur(8px);
  transition:transform .22s ease,box-shadow .22s ease,border-color .18s ease;
}
html[data-theme="dark"] .how-feat{background:rgba(255,255,255,.04)}
.how-feat:hover{transform:translateY(-4px);border-color:var(--primary);box-shadow:var(--shadow-sm)}
.how-feat__icon{
  width:44px;height:44px;border-radius:14px;
  background:linear-gradient(135deg,rgba(2,142,132,.12),rgba(3,196,172,.09));
  border:1px solid rgba(2,142,132,.18);
  display:grid;place-items:center;font-size:20px;margin-bottom:14px;
}
.how-feat__title{font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.how-feat__text{font-size:.875rem;line-height:1.6;color:var(--muted)}

/* ===========================
   Service — Explore Link (replaces chips)
   =========================== */
.lux-service__explore{
  display:inline-flex;align-items:center;gap:6px;margin-top:16px;
  font-size:.84rem;font-weight:700;color:var(--primary);
  letter-spacing:-.01em;transition:gap .18s ease;
}
.lux-service:hover .lux-service__explore{gap:10px}

/* ===========================
   About Company v2
   =========================== */
/* ── About / Stats section ─────────────────────────────────── */
.af-company{
  padding:88px 0 72px;position:relative;overflow:hidden;
}
.af-company::before,.af-company::after{display:none}

.af-company__head{text-align:center;max-width:680px;margin:0 auto 52px}

/* Kicker with lines on both sides */
.kicker--lined{
  display:flex;align-items:center;justify-content:center;gap:14px;
  color:#028e84;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:16px;
}
.kicker--lined::before,.kicker--lined::after{
  content:'';height:1px;width:48px;
  background:linear-gradient(90deg,transparent,#028e84);
  opacity:.7;
}
.kicker--lined::after{background:linear-gradient(90deg,#028e84,transparent)}

/* "you" teal with underline */
.teal-word{
  color:#028e84;
  text-decoration:underline;text-decoration-color:rgba(2,142,132,.5);
  text-underline-offset:5px;text-decoration-thickness:2px;
  font-style:italic;
}

/* Stats wrapper */
.af-stats-wrap{
  margin-bottom:64px;position:relative;z-index:1;
  padding:12px 4px; /* room for hover lift */
}

.af-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;overflow:visible}
@media(max-width:860px){.af-stats{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.af-stats{grid-template-columns:1fr}}

.af-stat{
  padding:28px 20px;border-radius:var(--radius);
  border:1px solid rgba(2,142,132,.2);
  background:rgba(255,255,255,.04);
  text-align:center;position:relative;overflow:hidden;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.af-stat:hover{
  transform:translateY(-5px);
  border-color:rgba(2,142,132,.45);
  box-shadow:0 12px 36px rgba(2,142,132,.18);
}
.af-stat__ico{
  width:56px;height:56px;border-radius:50%;
  border:1px solid rgba(2,142,132,.4);
  display:grid;place-items:center;margin:0 auto 18px;
  background:rgba(2,142,132,.06);
}
.af-stat__num{
  font-size:2.2rem;font-weight:900;letter-spacing:-.04em;
  display:block;line-height:1.1;color:#028e84;margin-bottom:8px;
}
.af-stat__currency{font-size:.5em;font-weight:900;color:#028e84;vertical-align:super;margin-right:1px;font-style:normal}
.af-stat__count{display:inline}
.af-stat__label{font-size:.9rem;font-weight:700;color:var(--text);margin-bottom:0}
.af-stat__line{width:30px;height:2px;background:#028e84;margin:12px auto}
.af-stat__desc{font-size:.78rem;color:var(--muted);line-height:1.65}

.af-section-kicker{
  font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--primary);margin-bottom:10px;
}
.af-section-h{font-size:1.4rem;font-weight:800;letter-spacing:-.03em;margin:0 0 32px}

html[data-theme="light"] .af-stat{background:var(--surface);border-color:var(--border)}
html[data-theme="light"] .af-stat:hover{border-color:var(--primary)}

/* Alternating milestone timeline */
.af-milestones{position:relative;display:grid;gap:0;padding:0}
.af-milestones::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--primary),var(--primary-2));
  opacity:.20;transform:translateX(-50%);
}
@media(max-width:760px){.af-milestones::before{left:22px}}

.af-mile{
  display:grid;grid-template-columns:1fr 72px 1fr;
  gap:24px;align-items:center;padding:0 0 36px;position:relative;
}
@media(max-width:760px){
  .af-mile{grid-template-columns:56px 1fr;gap:0 16px}
  .af-mile .af-mile__card--phantom{display:none}
}
.af-mile__card{
  padding:22px 24px;border-radius:var(--radius);border:1px solid var(--border);
  background:rgba(255,255,255,.65);backdrop-filter:blur(12px);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
html[data-theme="dark"] .af-mile__card{background:rgba(255,255,255,.05)}
.af-mile__card:hover{transform:translateY(-3px);border-color:var(--primary);box-shadow:0 8px 32px rgba(2,142,132,.14)}
.af-mile__card--phantom{opacity:0;pointer-events:none}
.af-mile__year{
  font-size:.78rem;font-weight:700;color:var(--primary);
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;
}
.af-mile__title{font-size:1.02rem;font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.af-mile__text{font-size:.875rem;line-height:1.6;color:var(--muted)}
.af-mile__center{
  display:flex;flex-direction:column;align-items:center;gap:0;position:relative;
}
.af-mile__dot{
  width:48px;height:48px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  border:3px solid var(--surface);
  display:grid;place-items:center;font-size:18px;
  box-shadow:0 0 0 6px rgba(2,142,132,.12),0 8px 20px rgba(2,142,132,.28);
  z-index:1;flex-shrink:0;cursor:pointer;
  transition:transform .22s ease,box-shadow .22s ease;
}
.af-mile__dot.is-active{
  transform:scale(1.15);
  box-shadow:0 0 0 10px rgba(2,142,132,.20),0 12px 28px rgba(2,142,132,.40);
}
.af-mile__vline{
  width:2px;min-height:36px;
  background:linear-gradient(180deg,var(--primary),var(--primary-2));
  opacity:.20;flex:1;
}

/* Values grid */
.af-values{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:48px}
@media(max-width:860px){.af-values{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.af-values{grid-template-columns:1fr}}
.af-value{
  padding:24px 22px;border-radius:var(--radius);border:1px solid var(--border);
  background:rgba(255,255,255,.55);backdrop-filter:blur(10px);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
html[data-theme="dark"] .af-value{background:rgba(255,255,255,.04)}
.af-value:hover{transform:translateY(-4px);border-color:var(--primary);box-shadow:var(--shadow-sm)}
.af-value__icon{
  width:46px;height:46px;border-radius:14px;
  background:linear-gradient(135deg,rgba(2,142,132,.12),rgba(3,196,172,.09));
  border:1px solid rgba(2,142,132,.18);
  display:grid;place-items:center;font-size:22px;margin-bottom:14px;
}
.af-value__title{font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
.af-value__text{font-size:.875rem;line-height:1.6;color:var(--muted)}

/* ===========================
   FAQ v2 — Finance-themed
   =========================== */
.faq-v2{padding:80px 0 72px}
.faq-v2__layout{
  display:grid;grid-template-columns:300px 1fr;
  gap:32px;align-items:start;
}
@media(max-width:900px){.faq-v2__layout{grid-template-columns:1fr}}
.faq-v2__sidebar{position:sticky;top:100px}
.faq-v2__heading{margin-bottom:24px}
.faq-v2__search{position:relative;margin-bottom:16px}
.faq-v2__search-icon{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:14px;pointer-events:none;
}
.faq-v2__search input{
  width:100%;padding:12px 14px 12px 38px;
  border-radius:var(--radius-sm);border:1px solid var(--border);
  background:rgba(255,255,255,.65);backdrop-filter:blur(8px);
  color:var(--text);font-family:var(--font);font-size:.9rem;outline:none;
  transition:border-color .18s ease,box-shadow .18s ease;
}
html[data-theme="dark"] .faq-v2__search input{background:rgba(255,255,255,.06)}
.faq-v2__search input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(2,142,132,.16)}
.faq-v2__filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.faq-v2__pill{
  padding:7px 14px;border-radius:999px;border:1px solid var(--border);
  background:rgba(255,255,255,.55);font-size:.8rem;font-weight:600;
  cursor:pointer;transition:all .18s ease;color:var(--text);font-family:var(--font);
}
html[data-theme="dark"] .faq-v2__pill{background:rgba(255,255,255,.06)}
.faq-v2__pill[aria-selected="true"],.faq-v2__pill:hover{
  background:var(--primary);border-color:var(--primary);color:#fff;
}
.faq-v2__cta{
  padding:20px;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:linear-gradient(135deg,rgba(2,142,132,.08),rgba(3,196,172,.06));
}
html[data-theme="dark"] .faq-v2__cta{background:linear-gradient(135deg,rgba(2,142,132,.14),rgba(3,196,172,.10))}
.faq-v2__cta-title{font-weight:700;margin-bottom:4px;font-size:.95rem}
.faq-v2__cta-text{font-size:.84rem;color:var(--muted);margin-bottom:12px}
.faq-v2__items{display:grid;gap:10px}
.faq-v2 .faq-item{
  border-radius:var(--radius-sm);border:1px solid var(--border);
  background:rgba(255,255,255,.65);backdrop-filter:blur(8px);overflow:hidden;
  transition:border-color .18s ease,box-shadow .18s ease;
}
html[data-theme="dark"] .faq-v2 .faq-item{background:rgba(255,255,255,.05)}
.faq-v2 .faq-item:hover{border-color:rgba(2,142,132,.4)}
.faq-v2 .faq-item.is-open{border-color:var(--primary);box-shadow:0 4px 20px rgba(2,142,132,.10)}
.faq-v2 .faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 18px;background:transparent;border:0;cursor:pointer;
  text-align:left;font-family:var(--font);color:var(--text);font-size:.95rem;
}
.faq-v2 .faq-q strong{font-weight:700;letter-spacing:-.01em}
.faq-v2 .chev{
  width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(2,142,132,.10),rgba(3,196,172,.08));
  border:1px solid rgba(2,142,132,.18);font-weight:900;font-size:16px;
  flex-shrink:0;transition:transform .22s ease,background .18s ease;
  color:var(--primary);
}
.faq-v2 .faq-item.is-open .chev{background:var(--primary);color:#fff;transform:rotate(45deg)}
.faq-v2 .faq-a{max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(.22,1,.36,1)}
.faq-v2 .faq-item.is-open .faq-a{max-height:300px}
.faq-v2 .faq-a>div{
  padding:14px 18px 18px;font-size:.9rem;line-height:1.7;color:var(--muted);
  border-top:1px solid var(--border);
}
.faq-v2 .faq-empty{display:none;text-align:center;padding:36px;color:var(--muted);font-size:.9rem}
.faq-cat{
  font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--primary);margin-right:8px;padding:2px 8px;border-radius:6px;
  background:rgba(2,142,132,.10);display:inline-block;
}

/* ===========================
   Expert Advice v2
   =========================== */
.expert-v2{
  padding:80px 0 88px;position:relative;overflow:hidden;
  background:
    radial-gradient(1200px 600px at 5% 50%,rgba(2,142,132,.10),transparent 60%),
    radial-gradient(900px 600px at 95% 50%,rgba(3,196,172,.08),transparent 60%);
}
.expert-v2__top{
  display:grid;grid-template-columns:1fr 1fr;
  gap:48px;align-items:start;
}
@media(max-width:860px){.expert-v2__top{grid-template-columns:1fr;gap:28px}}
.expert-v2__heading{margin-bottom:28px}
.expert-v2__channels{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.expert-v2__channels{grid-template-columns:1fr}}
.expert-ch{
  padding:18px;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:rgba(255,255,255,.60);backdrop-filter:blur(12px);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
  position:relative;overflow:hidden;
}
html[data-theme="dark"] .expert-ch{background:rgba(255,255,255,.05)}
.expert-ch:hover{transform:translateY(-4px);border-color:var(--primary);box-shadow:0 8px 28px rgba(2,142,132,.14)}
.expert-ch::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--primary),var(--primary-2));
  opacity:0;transition:opacity .2s ease;
}
.expert-ch:hover::before{opacity:1}
.expert-ch__ico{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:#f1f5f4;border:none;margin-bottom:14px;flex:0 0 auto;
}
html[data-theme="dark"] .expert-ch__ico{background:rgba(2,142,132,.14)}
.expert-ch__title{font-weight:800;font-size:.95rem;margin-bottom:4px;letter-spacing:-.01em}
.expert-ch__sub{font-size:.8rem;color:var(--muted);margin-bottom:10px;line-height:1.5}
.expert-ch__link{
  font-size:.84rem;font-weight:700;color:var(--primary);
  display:inline-flex;align-items:center;gap:4px;text-decoration:none;
  transition:gap .18s ease;
}
.expert-ch__link:hover{gap:8px}
/* Trust note below channels */
.expert-trust{
  display:flex;align-items:flex-start;gap:12px;margin-top:16px;
  padding:14px 16px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:rgba(255,255,255,.65);
}
html[data-theme="dark"] .expert-trust{background:rgba(255,255,255,.04)}
.expert-trust svg{flex:0 0 auto;margin-top:1px}
.expert-trust span{font-size:12.5px;color:var(--muted);line-height:1.6}
/* Form card */
.expert-v2__form-card{
  padding:36px 32px;border-radius:var(--radius);
  border:1px solid rgba(0,0,0,.09);
  background:#fff;
  box-shadow:0 4px 32px rgba(0,0,0,.08);position:relative;overflow:visible;
}
html[data-theme="dark"] .expert-v2__form-card{background:rgba(255,255,255,.06);border-color:var(--border)}
.expert-v2__form-card::before{display:none}
.expert-v2__form-title{font-size:1.45rem;font-weight:800;letter-spacing:-.02em;margin:0 0 8px;font-family:var(--font-heading)}
.expert-v2__form-sub{font-size:.875rem;color:var(--muted);margin-bottom:22px;line-height:1.6}
/* Input with icon prefix — icon is flex item, not absolutely positioned */
.af-field--icon{position:relative}
.af-field__icon{flex:0 0 auto;pointer-events:none;color:#9ca3af}
.af-field--icon input{padding-left:0}
/* Privacy note below form */
.form-privacy{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px}
.form-privacy span{font-size:12.5px;color:var(--muted)}
/* CTA single column */
.advice-cta{display:grid;grid-template-columns:1fr;gap:10px;margin-top:16px}

/* ===========================
   Eligibility Modal
   =========================== */
.elig-overlay{
  position:fixed;
  inset:0;
  z-index:9100;
  background:rgba(2,6,23,.62);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease;
}
.elig-overlay.is-open{
  opacity:1;
  pointer-events:auto;
}
.elig-modal{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:28px;
  width:min(560px,100%);
  max-height:90vh;
  overflow-y:auto;
  box-shadow:0 50px 120px rgba(0,0,0,.50);
  transform:translateY(28px) scale(.96);
  opacity:0;
  transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .28s ease;
  position:relative;
  scrollbar-width:thin;
}
.elig-overlay.is-open .elig-modal{
  transform:translateY(0) scale(1);
  opacity:1;
}
.elig-modal__top{
  padding:20px 22px 16px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  position:sticky;
  top:0;
  background:var(--surface);
  border-radius:28px 28px 0 0;
  z-index:2;
}
.elig-modal__title{
  font-weight:950;
  letter-spacing:-.02em;
  font-size:17px;
}
.elig-close{
  width:34px;height:34px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface-2);
  display:grid;
  place-items:center;
  cursor:pointer;
  color:var(--muted);
  font-size:17px;
  line-height:1;
  transition:all .18s ease;
  flex-shrink:0;
}
.elig-close:hover{
  background:var(--border);
  color:var(--text);
}
/* Progress */
.elig-progress{
  padding:16px 22px 0;
  display:flex;
  align-items:center;
  gap:7px;
}
.elig-step-dot{
  flex:1;
  height:4px;
  border-radius:999px;
  background:var(--border);
  transition:background .3s ease;
}
.elig-step-dot.is-active{
  background:linear-gradient(90deg,var(--primary),var(--primary-2));
}
.elig-step-dot.is-done{
  background:var(--primary);
}
/* Body */
.elig-body{padding:22px 22px 20px}
/* Steps */
.elig-step{display:none}
.elig-step.is-active{
  display:block;
  animation:eligIn .28s ease both;
}
@keyframes eligIn{
  from{opacity:0;transform:translateX(16px)}
  to{opacity:1;transform:translateX(0)}
}
.elig-step.dir-back.is-active{
  animation:eligInBack .28s ease both;
}
@keyframes eligInBack{
  from{opacity:0;transform:translateX(-16px)}
  to{opacity:1;transform:translateX(0)}
}
.elig-step__label{
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--primary);
  margin-bottom:8px;
  display:block;
}
.elig-step__title{
  font-size:clamp(20px,3vw,24px);
  font-weight:950;
  letter-spacing:-.03em;
  margin:0 0 6px;
}
.elig-step__sub{
  color:var(--muted);
  margin:0 0 20px;
  line-height:1.55;
  font-size:14px;
}
/* Loan type tiles */
.elig-types{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
@media (max-width:480px){.elig-types{grid-template-columns:repeat(2,1fr)}}
.elig-type{
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px 12px;
  text-align:center;
  cursor:pointer;
  transition:all .18s ease;
  background:var(--surface-2);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.elig-type:hover{
  transform:translateY(-2px);
  border-color:var(--primary);
}
.elig-type.is-selected{
  border-color:var(--primary);
  background:rgba(37,99,235,.10);
  box-shadow:0 0 0 3px rgba(37,99,235,.18);
}
.elig-type__ico{font-size:22px}
.elig-type__label{font-weight:800;font-size:13px;letter-spacing:-.01em}
/* Fields */
.elig-field{margin-bottom:16px}
.elig-field label{
  display:block;
  font-weight:800;
  letter-spacing:-.01em;
  margin-bottom:8px;
  font-size:14px;
}
.elig-field .hint{
  font-weight:600;
  color:var(--muted);
  font-size:12px;
  margin-left:8px;
}
.elig-input{
  width:100%;
  border:1px solid var(--border);
  background:var(--surface-2);
  border-radius:16px;
  padding:12px 14px;
  font-size:14px;
  font-weight:700;
  color:var(--text);
  outline:none;
  transition:border-color .18s ease,box-shadow .18s ease;
  font-family:inherit;
  box-sizing:border-box;
}
.elig-input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px var(--ring);
}
.elig-input::placeholder{color:var(--muted);font-weight:600}
select.elig-input{
  appearance:none;
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b677a' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:40px;
}
/* Summary */
.elig-summary{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:20px;
  overflow:hidden;
  margin-bottom:18px;
}
.elig-summary-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
}
.elig-summary-row:last-child{border-bottom:0}
.elig-summary-row__label{color:var(--muted);font-weight:700;font-size:13px}
.elig-summary-row__val{font-weight:900;font-size:14px;text-align:right}
/* Nav */
.elig-nav{display:flex;gap:10px;margin-top:22px}
.elig-nav .btn{flex:1;justify-content:center}
/* Success */
.elig-success{
  display:none;
  text-align:center;
  padding:36px 22px 24px;
}
.elig-success.is-active{
  display:block;
  animation:eligIn .3s ease both;
}
.elig-success__ico{font-size:52px;margin-bottom:18px;display:block}
.elig-success__title{
  font-size:clamp(20px,3vw,26px);
  font-weight:980;
  letter-spacing:-.03em;
  margin:0 0 10px;
}
.elig-success__text{
  color:var(--muted);
  line-height:1.65;
  margin:0 0 26px;
}
/* Contact form alerts */
.form-alert{
  padding:12px 14px;
  border-radius:14px;
  font-weight:700;
  font-size:14px;
  margin-bottom:16px;
  display:none;
}
.form-alert.is-success{
  display:block;
  background:rgba(16,185,129,.12);
  border:1px solid rgba(16,185,129,.28);
}
.form-alert.is-error{
  display:block;
  background:rgba(239,68,68,.10);
  border:1px solid rgba(239,68,68,.28);
}
.advice-form input,
.advice-form select,
.advice-form textarea{
  width:100%;
  border:1px solid var(--border);
  background:var(--surface-2);
  border-radius:14px;
  padding:11px 14px;
  font-size:14px;
  font-weight:700;
  color:var(--text);
  outline:none;
  font-family:inherit;
  transition:border-color .18s ease,box-shadow .18s ease;
  box-sizing:border-box;
}
.advice-form input:focus,
.advice-form select:focus,
.advice-form textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px var(--ring);
}
.advice-form textarea{min-height:110px;resize:vertical}
.advice-form select{
  appearance:none;
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b677a' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:40px;
}
.af-split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.af-split{grid-template-columns:1fr}}
.af-row{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.af-row label{font-weight:800;font-size:14px;letter-spacing:-.01em}
/* af-field: styled form-field container (border + bg makes it look like an input) */
.af-field{
  position:relative;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--surface-2);
  padding:10px 14px;
  display:flex;align-items:center;gap:10px;
  transition:border-color .18s ease,box-shadow .18s ease;
}
html[data-theme="light"] .af-field{background:#fff;border-color:rgba(2,142,132,.18)}
.af-field:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px var(--ring)}
html[data-theme="light"] .af-field:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px rgba(2,142,132,.14)}
/* Inputs/textarea inside af-field: strip border & bg — container provides those */
.advice-form .af-field input,
.advice-form .af-field textarea,
.advice-form .af-field select{
  border:0;background:transparent;padding:0;border-radius:0;outline:0;box-shadow:none;
  font-family:inherit;font-weight:700;font-size:14px;color:var(--text);width:100%;flex:1;
}
.advice-form .af-field textarea{min-height:90px;resize:vertical;line-height:1.55}

/* ── Custom select dropdown (af-custom-sel) ── */
.af-custom-sel{position:relative;user-select:none;width:100%}
.af-custom-sel__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  border:0;background:transparent;color:inherit;font-weight:700;font-size:14px;
  cursor:pointer;padding:0;text-align:left;font-family:inherit;
}
.af-custom-sel__btn-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.55;transition:opacity .15s}
.af-custom-sel__btn-text.has-value{opacity:1}
.af-custom-sel__chevron{flex:0 0 18px;height:18px;display:inline-flex;align-items:center;justify-content:center;transition:transform .24s cubic-bezier(.22,1,.36,1);color:var(--primary)}
.af-custom-sel__chevron svg{display:block}
.af-custom-sel[aria-expanded="true"] .af-custom-sel__chevron{transform:rotate(180deg)}
/* Portal list — positioned via JS with position:fixed */
.af-custom-sel__list{
  position:fixed;z-index:99999;border-radius:16px;
  overflow-y:auto;overflow-x:hidden;
  box-shadow:0 8px 12px rgba(0,0,0,.12),0 24px 48px rgba(0,0,0,.22);
  opacity:0;pointer-events:none;
  transform:translateY(-6px) scale(.97);transform-origin:top center;
  transition:opacity .22s ease,transform .24s cubic-bezier(.22,1,.36,1);
  scrollbar-width:thin;scrollbar-color:rgba(2,142,132,.3) transparent;
  padding:6px;
}
html[data-theme="dark"] .af-custom-sel__list{background:#0e1530;border:1px solid rgba(2,142,132,.32);box-shadow:0 8px 12px rgba(0,0,0,.4),0 24px 56px rgba(0,0,0,.6),0 0 0 1px rgba(2,142,132,.18)}
html[data-theme="light"] .af-custom-sel__list{background:#fff;border:1px solid rgba(2,142,132,.18);box-shadow:0 6px 12px rgba(0,0,0,.06),0 20px 48px rgba(0,0,0,.1)}
.af-custom-sel__list.is-open{opacity:1;pointer-events:all;transform:translateY(0) scale(1)}
.af-custom-sel__opt{
  padding:10px 14px;font-size:13px;font-weight:700;cursor:pointer;border-radius:10px;
  transition:background .13s,color .13s;display:flex;align-items:center;gap:10px;
}
html[data-theme="dark"] .af-custom-sel__opt{color:rgba(255,255,255,.75)}
html[data-theme="light"] .af-custom-sel__opt{color:rgba(15,23,42,.75)}
.af-custom-sel__opt:hover,.af-custom-sel__opt:focus{background:rgba(2,142,132,.10);outline:none}
html[data-theme="dark"] .af-custom-sel__opt:hover{color:#fff}
html[data-theme="light"] .af-custom-sel__opt:hover{color:rgba(15,23,42,1)}
.af-custom-sel__opt.is-selected{background:rgba(2,142,132,.08)}
html[data-theme="dark"] .af-custom-sel__opt.is-selected{color:#fff}
html[data-theme="light"] .af-custom-sel__opt.is-selected{color:var(--primary)}
.af-custom-sel__opt-icon{font-size:16px;flex:0 0 22px;text-align:center;line-height:1}
.af-custom-sel__opt-label{flex:1}
.af-custom-sel__opt-tick{margin-left:auto;color:var(--primary);font-size:11px;font-weight:900;opacity:0;transition:opacity .15s}
.af-custom-sel__opt.is-selected .af-custom-sel__opt-tick{opacity:1}

.advice-cta{display:grid;gap:10px;margin-top:16px}
@media (max-width:560px){.advice-cta{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════════
   INNER PAGE HERO — 5 DISTINCT GROUP LAYOUTS
   ═══════════════════════════════════════════════════════════════════ */

/* ── A: Personal — Centered Spotlight ─────────────────────────── */
.lux-page-hero--centered{text-align:center;padding-bottom:52px}
.lph-center{
  max-width:660px;margin:0 auto 40px;
  display:flex;flex-direction:column;align-items:center;gap:0
}
.lph-center .pill{margin-bottom:14px}
.lph-center .lead{margin-bottom:24px}
.lph-feature-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:700px){.lph-feature-row{grid-template-columns:1fr}}
.lph-feature-card{
  border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);
  padding:20px 18px;display:flex;gap:14px;align-items:flex-start;text-align:left;
  box-shadow:var(--shadow-sm);transition:transform .22s ease,box-shadow .22s ease
}
.lph-feature-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
html[data-theme="dark"] .lph-feature-card{background:var(--surface-2)}
.lph-feature-num{
  width:34px;height:34px;flex:0 0 34px;border-radius:12px;
  display:grid;place-items:center;font-weight:900;font-size:14px;
  background:rgba(2,142,132,.12);border:1px solid rgba(2,142,132,.24);color:var(--primary)
}
.lph-feature-text{font-size:14px;font-weight:700;line-height:1.5;padding-top:5px}

/* ── B: Home — Wide Metrics ────────────────────────────────────── */
.lux-page-hero--wide{border-left:4px solid #10b981;padding-left:20px}
.lph-wide-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:52px;align-items:start}
@media(max-width:900px){.lph-wide-grid{grid-template-columns:1fr}}
.lph-wide-cards{display:flex;flex-direction:column;gap:11px;padding-top:8px}
.lph-wide-stat{
  display:flex;align-items:center;gap:14px;padding:13px 16px;
  border-radius:18px;border:1px solid var(--border);background:var(--surface);
  box-shadow:var(--shadow-sm);font-size:14px;font-weight:700;line-height:1.45;
  transition:transform .2s ease
}
.lph-wide-stat:hover{transform:translateX(4px)}
html[data-theme="dark"] .lph-wide-stat{background:var(--surface-2)}
.lph-wide-stat__icon{
  width:32px;height:32px;flex:0 0 32px;border-radius:10px;
  display:grid;place-items:center;font-size:15px;font-weight:900;
  background:rgba(16,185,129,.14);border:1px solid rgba(16,185,129,.28);color:#10b981
}

/* ── C: Business — Accent Sidebar ──────────────────────────────── */
.lux-page-hero--sidebar{
  display:flex;padding:0;overflow:visible;position:relative
}
.lux-page-hero--sidebar::before{left:56px}
.lph-sidebar-accent{
  width:56px;flex:0 0 56px;
  background:linear-gradient(180deg,#f59e0b 0%,#fb923c 100%);
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:1
}
.lph-sidebar-label{
  writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);
  font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.92)
}
.lph-sidebar-content{flex:1;padding:92px 0 34px;min-width:0}
.lph-sidebar-inner{
  width:min(1084px,calc(100% - 48px));margin:0 auto;
  display:grid;grid-template-columns:1fr 270px;gap:40px;align-items:start
}
@media(max-width:960px){
  .lph-sidebar-inner{grid-template-columns:1fr}
  .lph-sidebar-accent{width:36px;flex:0 0 36px}
  .lph-sidebar-content{padding:72px 0 28px}
}
.lph-sidebar-main{}
.lph-sidebar-metrics{display:flex;flex-direction:column;gap:10px;padding-top:8px}
.lph-metric-card{
  padding:13px 15px;border-radius:16px;border:1px solid var(--border);
  background:var(--surface);box-shadow:var(--shadow-sm);
  display:flex;gap:10px;align-items:center;font-size:13px;font-weight:700;line-height:1.45
}
html[data-theme="dark"] .lph-metric-card{background:var(--surface-2)}
.lph-metric-dot{
  width:10px;height:10px;flex:0 0 10px;border-radius:50%;
  background:linear-gradient(135deg,#f59e0b,#fb923c)
}
.lph-sidebar-kpi{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.lph-sidebar-kpi-cell{
  padding:10px;border-radius:14px;border:1px solid var(--border);
  background:var(--surface);text-align:center;font-size:13px;font-weight:700
}
html[data-theme="dark"] .lph-sidebar-kpi-cell{background:var(--surface-2)}
.lph-sidebar-kpi-cell b{display:block;font-size:17px;line-height:1.2}
.lph-sidebar-kpi-cell span{font-size:11px;color:var(--muted)}

/* ── D: Specialty — Glass Banner ────────────────────────────────── */
.lux-page-hero--banner{padding-bottom:44px}
.lux-page-hero--banner::before{
  inset:0;height:100%;
  background:
    linear-gradient(135deg,rgba(6,182,212,.14) 0%,rgba(2,142,132,.18) 100%),
    radial-gradient(600px 400px at 65% 45%,rgba(6,182,212,.11),transparent 60%)
}
html[data-theme="dark"] .lux-page-hero--banner::before{
  background:
    linear-gradient(135deg,rgba(6,182,212,.22) 0%,rgba(2,142,132,.26) 100%),
    radial-gradient(600px 400px at 65% 45%,rgba(6,182,212,.16),transparent 60%)
}
.lph-banner-inner{
  text-align:center;max-width:700px;margin:0 auto 36px;
  display:flex;flex-direction:column;align-items:center
}
.lph-banner-pill{margin-bottom:14px}
.lph-banner-h1{font-size:clamp(34px,4.5vw,64px)!important}
.lph-banner-lead{max-width:50ch;text-align:center;margin-bottom:26px}
.lph-banner-strip{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  border-top:1px solid var(--border);padding-top:22px
}
.lph-banner-feature{
  display:flex;align-items:center;gap:8px;padding:9px 18px;
  border-radius:999px;background:var(--surface);border:1px solid var(--border);
  font-size:13px;font-weight:700;box-shadow:var(--shadow-sm)
}
html[data-theme="dark"] .lph-banner-feature{background:var(--surface-2)}
.lph-banner-check{color:#06b6d4;font-weight:900;font-size:15px}

/* ── E: More/Vehicle — Benefit Icon Grid ────────────────────────── */
.lph-grid-layout{
  display:grid;grid-template-columns:1.1fr 1fr;gap:52px;align-items:center
}
@media(max-width:900px){.lph-grid-layout{grid-template-columns:1fr}}
.lph-grid-benefits{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lph-benefit-tile{
  border-radius:20px;border:1px solid var(--border);background:var(--surface);
  padding:20px 16px;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:10px;box-shadow:var(--shadow-sm);
  transition:transform .22s ease,box-shadow .22s ease;
  min-height:110px;justify-content:center
}
.lph-benefit-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
html[data-theme="dark"] .lph-benefit-tile{background:var(--surface-2)}
.lph-benefit-icon{
  width:40px;height:40px;border-radius:14px;
  display:grid;place-items:center;font-weight:900;font-size:16px;
  background:rgba(236,72,153,.12);border:1px solid rgba(236,72,153,.24);color:#ec4899
}
.lph-benefit-tile--cta .lph-benefit-icon{
  font-size:20px;background:rgba(2,142,132,.12);
  border-color:rgba(2,142,132,.24);color:var(--primary)
}
.lph-benefit-text{font-size:13px;font-weight:700;line-height:1.4}

/* ================================================================
   Scroll Animations — fade-in on scroll + parallax blobs
   ================================================================ */

/* ── Fade-in base state ─────────────────────────────────────── */
.will-animate {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity  0.65s cubic-bezier(.22, 1, .36, 1),
    transform 0.65s cubic-bezier(.22, 1, .36, 1);
}

.will-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Restore hover lifts for elements that animate on hover */
.card.will-animate.is-visible:hover        { transform: translateY(-4px); }
.mini-card.will-animate.is-visible:hover   { transform: translateY(-1px); }
.lph-benefit-tile.will-animate.is-visible:hover { transform: translateY(-3px); }

/* Direction variants (via data-animate="left" / "right") */
[data-animate="left"].will-animate  { transform: translateX(-28px); }
[data-animate="right"].will-animate { transform: translateX(28px);  }
[data-animate="left"].will-animate.is-visible,
[data-animate="right"].will-animate.is-visible { transform: translateX(0); }

/* ── Parallax blobs injected into .lux-page-hero ───────────── */
.lux-parallax-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.lux-parallax-blob--1 {
  width: 580px; height: 580px;
  top: -140px; right: -100px;
  background: radial-gradient(circle, rgba(2, 142, 132, .14) 0%, transparent 68%);
  filter: blur(60px);
}

.lux-parallax-blob--2 {
  width: 380px; height: 380px;
  bottom: -80px; left: -60px;
  background: radial-gradient(circle, rgba(3, 196, 172, .12) 0%, transparent 68%);
  filter: blur(50px);
}

html[data-theme="light"] .lux-parallax-blob--1 {
  background: radial-gradient(circle, rgba(2, 142, 132, .06) 0%, transparent 68%);
}
html[data-theme="light"] .lux-parallax-blob--2 {
  background: radial-gradient(circle, rgba(3, 196, 172, .05) 0%, transparent 68%);
}

/* ── Respect reduced-motion preference ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .will-animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ================================================================
   MONEY PAGE LOADER
   ================================================================ */
.af-loader {
  position: fixed; inset: 0; z-index: 99999;
  background: #030712;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  transition: opacity .55s cubic-bezier(.22,1,.36,1), visibility .55s;
}
/* Light theme loader */
html[data-theme="light"] .af-loader { background: #f2f8f7; }
html[data-theme="light"] .af-loader__brand { color: #06091c; }
html[data-theme="light"] .af-loader__tagline { color: rgba(2,142,132,.85); }
html[data-theme="light"] .af-loader__bar-wrap { background: rgba(0,0,0,.08); }
html[data-theme="light"] .af-loader__floaty { color: #028e84; opacity: .06; }
.af-loader--out { opacity: 0; visibility: hidden; pointer-events: none; }

.af-loader__scene {
  display: flex; flex-direction: column; align-items: center; gap: 0;
}

/* Coin */
.af-loader__coin-wrap {
  width: 88px; height: 88px; margin: 0 auto 28px;
  perspective: 600px;
}
.af-loader__coin {
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  animation: afCoinSpin 1.4s cubic-bezier(.4,0,.2,1) infinite;
  position: relative;
}
@keyframes afCoinSpin {
  0%   { transform: rotateY(0deg); }
  45%  { transform: rotateY(180deg); }
  55%  { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}
.af-loader__coin-face {
  position: absolute; inset: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; font-weight: 900; font-family: var(--font-heading);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 3px solid rgba(255,255,255,.18);
}
.af-loader__coin-front {
  background: radial-gradient(circle at 35% 35%, #03c4ac, #028e84);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(2,142,132,.18), 0 0 60px rgba(2,142,132,.55);
}
.af-loader__coin-back {
  background: radial-gradient(circle at 35% 35%, #fbbf24, #f59e0b);
  color: #fff;
  transform: rotateY(180deg);
  box-shadow: 0 0 0 6px rgba(245,158,11,.18), 0 0 60px rgba(245,158,11,.45);
}
.af-loader__coin-rim {
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.06);
  background: transparent;
}

/* Orbiting dot */
.af-loader__orbit {
  position: absolute; inset: -18px;
  border-radius: 50%;
  animation: afOrbit 1.8s linear infinite;
}
@keyframes afOrbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.af-loader__orbit-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #03c4ac;
  box-shadow: 0 0 14px rgba(3,196,172,.8);
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
}

/* Brand text */
.af-loader__brand {
  font-family: var(--font-heading);
  font-size: 22px; font-weight: 700; letter-spacing: .06em;
  color: #fff; text-align: center; margin-bottom: 6px;
  animation: afBrandIn .6s cubic-bezier(.22,1,.36,1) .2s both;
}
@keyframes afBrandIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.af-loader__tagline {
  font-size: 12px; font-weight: 600; letter-spacing: .12em;
  color: rgba(3,196,172,.8); text-transform: uppercase;
  text-align: center; margin-bottom: 32px;
  animation: afBrandIn .6s cubic-bezier(.22,1,.36,1) .35s both;
}

/* Progress bar */
.af-loader__bar-wrap {
  width: 180px; height: 3px;
  background: rgba(255,255,255,.08); border-radius: 99px; overflow: hidden;
  animation: afBrandIn .4s ease .4s both;
}
.af-loader__bar {
  height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, #028e84, #03c4ac, #f59e0b);
  background-size: 200% 100%;
  transition: width .9s cubic-bezier(.22,1,.36,1);
  animation: afBarShimmer 1.8s linear infinite;
}
@keyframes afBarShimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes afBarGrow {
  from { width: 0; }
  to   { width: 88%; }
}

/* Floating mini coins (decorative) */
.af-loader__coins-bg {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.af-loader__floaty {
  position: absolute;
  font-size: 18px; opacity: .12; user-select: none;
  animation: afFloat linear infinite;
}
@keyframes afFloat {
  from { transform: translateY(110vh) rotate(0deg); opacity: 0; }
  10%  { opacity: .12; }
  90%  { opacity: .12; }
  to   { transform: translateY(-10vh) rotate(720deg); opacity: 0; }
}

/* ================================================================
   VARIED SCROLL-REVEAL SYSTEM  (.rev + .is-revealed)
   ================================================================ */

/* Base hidden state */
.rev {
  opacity: 0;
  transition:
    opacity  .7s cubic-bezier(.22,1,.36,1),
    transform .7s cubic-bezier(.22,1,.36,1);
}
/* Visible state */
.rev.is-revealed { opacity: 1; transform: none !important; }

/* Direction variants */
.rev[data-anim="up"]    { transform: translateY(36px); }
.rev[data-anim="left"]  { transform: translateX(-44px); }
.rev[data-anim="right"] { transform: translateX(44px); }
.rev[data-anim="scale"] { transform: scale(.88); }
.rev[data-anim="flip"]  { transform: perspective(600px) rotateX(18deg) translateY(28px); }
.rev[data-anim="fade"]  { transform: none; }

/* Restore hover states after reveal */
.card.rev.is-revealed:hover,
.mini-card.rev.is-revealed:hover,
.loan-benefit-card.rev.is-revealed:hover { transform: translateY(-3px) !important; }
.lph-home-stat.rev.is-revealed:hover     { transform: translateX(5px) !important; }
.gs-step-card.rev.is-revealed:hover      { transform: translateY(-5px) !important; }

/* Hero video exit — smooth via JS transform, CSS handles transition */
.hero-v2__center {
  will-change: transform, opacity;
  transition: opacity .05s linear, transform .05s linear;
}
.hero-video-bg {
  will-change: transform;
  transition: transform .05s linear;
}

/* ── Respect reduced-motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rev, .af-loader__coin, .af-loader__orbit, .af-loader__floaty {
    animation: none !important;
    opacity: 1 !important; transform: none !important;
    transition: none !important;
  }
  .af-loader { display: none !important; }
  .hero-v2__center, .hero-video-bg { transition: none !important; }
}



/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME — Comprehensive surface + card overrides
   All dark-default cards become solid white with teal depth
═══════════════════════════════════════════════════════════════ */

/* Expert tiles */
html[data-theme="light"] .expert-tile{
  background:#fff;
  border-color:rgba(2,142,132,.12);
  box-shadow:0 2px 12px rgba(2,142,132,.07);
}
html[data-theme="light"] .expert-ico{
  background:rgba(2,142,132,.06);
  border-color:rgba(2,142,132,.14);
}

/* Calc app card */
html[data-theme="light"] .calc-app{
  background:#fff;
  border-color:rgba(2,142,132,.14);
  box-shadow:0 8px 32px rgba(2,142,132,.10);
}
html[data-theme="light"] .calc-input{
  background:#fff;
  border-color:rgba(2,142,132,.18);
}
html[data-theme="light"] .calc-kpi{
  background:#fff;
  border-color:rgba(2,142,132,.12);
}

/* FAQ (lux-faq variant) */
html[data-theme="light"] .lux-faq .faq-item{
  background:#fff;
  border-color:rgba(2,142,132,.12);
  box-shadow:0 2px 10px rgba(2,142,132,.05);
}
html[data-theme="light"] .lux-faq .faq-item:hover{
  border-color:rgba(2,142,132,.30);
  box-shadow:0 6px 22px rgba(2,142,132,.10);
}
html[data-theme="light"] .lux-faq .chev{
  background:rgba(2,142,132,.06);
  border-color:rgba(2,142,132,.14);
}
html[data-theme="light"] .lux-faq__support{
  background:#fff;
  border-color:rgba(2,142,132,.12);
  box-shadow:0 2px 8px rgba(2,142,132,.05);
}

/* Process steps */
html[data-theme="light"] .lux-step{
  background:#fff;
  border-color:rgba(2,142,132,.12);
  box-shadow:0 2px 10px rgba(2,142,132,.05);
}

/* Timeline */
html[data-theme="light"] .lux-tick__dot{
  background:rgba(2,142,132,.15);
  border-color:rgba(2,142,132,.3);
}

/* Pill soft */
html[data-theme="light"] .pill--soft{
  background:#fff;
  border-color:rgba(2,142,132,.14);
}

/* Seg (calculator toggle) */
html[data-theme="light"] .seg{
  background:#fff;
  border-color:rgba(2,142,132,.16);
}
html[data-theme="light"] .seg-btn{
  color:#06091c;
}

/* lux-service inside services section */
html[data-theme="light"] .lux-services .lux-service{
  background:#fff;
  border-color:rgba(2,142,132,.16);
  box-shadow:0 2px 14px rgba(2,142,132,.07);
}
html[data-theme="light"] .lux-services .lux-service:hover{
  border-color:rgba(2,142,132,.35);
  box-shadow:0 8px 30px rgba(2,142,132,.14);
}
html[data-theme="light"] .lux-services .lux-service__title,
html[data-theme="light"] .lux-services .lux-service__text{
  color:#06091c;
}

/* Nav dropdown solid white */
html[data-theme="light"] .crumb-menu{
  background:#fff;
  border-color:rgba(2,142,132,.16);
  box-shadow:0 20px 60px rgba(0,0,0,.10), 0 4px 16px rgba(2,142,132,.08);
}


/* kpi in light mode */
html[data-theme="light"] .kpi{
  background:#fff;
  box-shadow:0 2px 10px rgba(2,142,132,.06);
}

/* mini-card */
html[data-theme="light"] .mini-card{
  background:#fff;
  box-shadow:0 2px 8px rgba(2,142,132,.05);
}

/* trusted-stat */
html[data-theme="light"] .trusted-stat{
  background:#fff;
  border-color:rgba(2,142,132,.12);
  box-shadow:0 2px 8px rgba(2,142,132,.05);
}
html[data-theme="light"] .trusted-card{
  background:#fff;
  border-color:rgba(2,142,132,.12);
  box-shadow:0 2px 8px rgba(2,142,132,.05);
}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL RESPONSIVE — standardised breakpoints
   1200 · 960 · 768 · 480
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1400px: moderate desktop adjustment ──────────────────────── */
@media (max-width: 1400px) {
  .section       { padding: 80px 0; }
  .lux-services  { padding: 62px 0; }
  .expert-v2     { padding: 68px 0 76px; }
  .lux-services__grid { gap: 14px; }
  .lux-expert__grid   { gap: 10px; }
}

/* ── 1200px: large tablet / small desktop ─────────────────────── */
@media (max-width: 1200px) {
  .section        { padding: 72px 0; }
  .how-process    { padding: 64px 0 56px; }
  .lux-expert     { padding: 48px 0 56px; }
  .af-company     { padding: 72px 0 56px; }
  .faq-v2         { padding: 64px 0 56px; }
  .lux-services   { padding: 56px 0; }
  .expert-v2      { padding: 60px 0 68px; }
  .lux-about      { padding: 56px 0 18px; }
  .footer-inner   { padding: 52px 0 0; }
  /* Services: tighter card gap at 1200 */
  .lux-services__grid { gap: 12px; }
  /* Inner-page hero: slight padding reduction */
  .lux-page-hero  { padding: 78px 0 28px; }
  /* Expert channels */
  .expert-v2__channels { gap: 10px; }
  /* Calc donut smaller at 1200 */
  .calc-donut { grid-template-columns: 140px 1fr; }
  .donut { width: 140px; height: 140px; }
  /* Footer brand column narrower */
  .footer-grid { grid-template-columns: 240px 1fr 1fr 1fr; }
}

/* ── 960px: tablet ────────────────────────────────────────────── */
@media (max-width: 960px) {
  .section        { padding: 56px 0; }
  .how-process    { padding: 52px 0 48px; }
  .lux-expert     { padding: 40px 0 48px; }
  .af-company     { padding: 56px 0 44px; }
  .faq-v2         { padding: 52px 0 44px; }
  .lux-services   { padding: 48px 0; }
  .expert-v2      { padding: 48px 0 56px; }
  .lux-about      { padding: 44px 0 14px; }
  .lux-page-hero  { padding: 68px 0 24px; }
  .footer-inner   { padding: 44px 0 0; }
  .expert-v2__form-card { padding: 28px 24px; }
}

/* ── 768px: mobile ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .section        { padding: 44px 0; }
  .how-process    { padding: 44px 0 40px; }
  .how-process__head { margin-bottom: 32px; }
  .lux-expert     { padding: 32px 0 40px; }
  .af-company     { padding: 44px 0 32px; }
  .af-company__head { margin-bottom: 32px; }
  .faq-v2         { padding: 44px 0 32px; }
  .lux-services   { padding: 40px 0; }
  .expert-v2      { padding: 40px 0 48px; }
  .lux-about      { padding: 36px 0 10px; }
  .lux-page-hero  { padding: 56px 0 20px; }
  .lux-page-hero--simple { padding-bottom: 10px; }
  .footer-inner   { padding: 36px 0 0; }
  .footer-grid    { gap: 28px !important; }
  .footer-bottom  { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-brand-col { padding-right: 0; }
  .footer-col     { padding: 0; }
  .hero           { padding: 70px 0 50px; }
  .section-head   { flex-direction: column; align-items: flex-start; gap: 10px; }
  .expert-v2__form-card { padding: 22px 18px; }
  .how-trust-bar  { margin-top: 32px; }
  .how-trust-stat__val { font-size: 1.4rem; }
  .af-stat__num   { font-size: 1.85rem; }
  .af-stat        { padding: 20px 16px; }
  .final-cta      { flex-direction: column; }
  .lux-kpi-strip  { gap: 10px; }
  /* Compact nav topbar on mid-range mobile */
  .topbar .container { gap: 10px; }
}

/* ── 480px: small mobile ──────────────────────────────────────── */
@media (max-width: 480px) {
  .section        { padding: 32px 0; }
  .how-process    { padding: 32px 0 28px; }
  .how-process__head { margin-bottom: 24px; }
  .lux-expert     { padding: 24px 0 32px; }
  .af-company     { padding: 32px 0 24px; }
  .faq-v2         { padding: 32px 0 24px; }
  .lux-services   { padding: 28px 0; }
  .expert-v2      { padding: 28px 0 36px; }
  .lux-page-hero  { padding: 44px 0 16px; }
  .footer-inner   { padding: 28px 0 0; }
  .hero           { padding: 52px 0 36px; }
  .expert-v2__form-card { padding: 18px 14px; }
  .expert-v2__form-title { font-size: 1.2rem; }
  .how-trust-stat__val { font-size: 1.2rem; }
  .how-trust-stat { padding: 14px 10px; }
  .af-stat__num   { font-size: 1.6rem; }
  .af-stat        { padding: 16px 12px; }
  .card           { padding: 16px; }
  .hero-cta       { flex-direction: column; }
  .hero-cta .btn  { width: 100%; justify-content: center; text-align: center; }
  .trust-row      { gap: 8px; }
  .how-features   { margin-top: 28px; }
  .lux-service    { padding: 16px 14px 12px; }
  .faq-v2 .faq-q  { padding: 12px; }
  .faq-v2 .faq-a > div { padding: 8px 12px 12px; }
  .footer-bottom  { padding: 14px 0; }
  .footer-legal a { padding: 0 8px; font-size: 12px; }
  .footer-copyright { font-size: 12px; }
  .section-head   { gap: 8px; }
  .lux-head       { gap: 12px; }
  /* Nav */
  .topbar .container { gap: 8px; }
  .brand-logo-img { height: 30px; }
}

/* ── Typography responsive floor ─────────────────────────────── */
@media (max-width: 640px) {
  .h1  { font-size: clamp(30px, 7vw, 50px); }
  .h2  { font-size: clamp(20px, 5.5vw, 28px); }
  .h3  { font-size: 16px; }
  .lead { font-size: 15px; }
}

/* ── Utility: full-width button on small screens ──────────────── */
@media (max-width: 480px) {
  .btn-mobile-full { width: 100%; justify-content: center; text-align: center; }
}


/* ── Floating stats card (ihsf) responsive ────────────────────── */
@media (max-width: 640px) {
  .ihsf { padding: 0 12px; margin-top: -20px; }
  .ihsf__card { padding: 12px 8px; border-radius: 16px; }
  .ihsf__item { min-width: 80px; padding: 6px 8px; gap: 8px; }
  .ihsf__ico { width: 32px; height: 32px; }
  .ihsf__num { font-size: 16px; }
  .ihsf__lbl { font-size: 10px; }
}

/* ── ihsf card: always visible (bypass scroll-reveal) ───────────
   The card sits just below the 100vh hero so getBoundingClientRect
   threshold misses it on load. Force visible with !important so both
   the .sr-block opacity:0 default and .ihsf__card opacity:0 default
   are overridden regardless of JS state.                          */
.ihsf.sr-block,
.ihsf.sr-block.is-vis,
.ihsf.sr-block.is-out  { opacity: 1 !important; transform: none !important; }
.ihsf .ihsf__card      { opacity: 0.95 !important; transform: translateY(0) !important; }

/* ── lux-timeline responsive ─────────────────────────────────── */
@media (max-width: 480px) {
  .lux-timeline__track { grid-template-columns: 1fr; gap: 16px; }
}

/* ── expert-v2__top form card ─────────────────────────────────── */
@media (max-width: 480px) {
  .expert-v2__channels { grid-template-columns: 1fr; }
}

/* ── af-milestones on mobile (already at 760px; add 480px) ───── */
@media (max-width: 480px) {
  .af-mile { grid-template-columns: 44px 1fr; gap: 0 12px; }
  .af-mile__dot { width: 36px; height: 36px; font-size: 14px; }
}

@media (max-width: 480px) {
  .lux-art-blob, .lux-page-hero__art { display: none; }
}