/* =========================================================
   DESIGN TOKENS
========================================================= */
:root{
  --bg:#dcebfff5;
  --panel:#ffffff;
  --ink:#0c0c0c;
  --muted:#1a3a64;
  --primary:#3b82f6;
  --primary-600:#2563eb;
  --accent:#ad93fc;
  --ring:rgba(59,130,246,.35);
  --shadow:0 10px 30px rgba(2,8,23,.06);
}

/* =========================================================
   BASE / TYPOGRAPHY
========================================================= */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  line-height:1.6; overflow-x:hidden;
}
p{font-size:1.125rem; line-height:1.7}
b{font-size:1.125rem; font-weight:700}
h1,h2{letter-spacing:.2px}
h2{font-size:clamp(1.8rem,2.8vw,2.4rem); margin:0 0 1rem}
p.lead{color:var(--muted)}
.container{width:min(1120px,92%); margin-inline:auto}
section{margin:3rem 0}
a{color:inherit; text-decoration:none}

/* Focus */
:where(a,button,[role="button"],summary,.card,.btn):focus-visible{
  outline:none; box-shadow:0 0 0 3px var(--ring); border-radius:10px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
}

/* =========================================================
   HEADER — desktop inline; mobile dropdown panel
   Requires in HTML:
   - .brand (logo)
   - .nav-links.nav-links--desktop  (desktop links)
   - #menuToggle (button with 3 spans)
   - #navDropdown  (mobile panel)
   - #navScrim     (page dimmer)
========================================================= */
header{
  position:relative; z-index:40;
  backdrop-filter:blur(10px);
  background:rgba(255,255,255,.7);
  border-bottom:1px solid rgba(2,8,23,.06);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:.9rem 0}
.brand img{width:160px; height:auto}

/* Desktop links inline */
.nav-links--desktop{display:flex; align-items:center; gap:1rem}
.nav-links--desktop a{
  padding:.45rem .75rem; border-radius:10px; color:var(--muted); font-weight:600
}
.nav-links--desktop a:hover{background:#e7eaff; color:#0f172a; box-shadow:var(--shadow)}

/* Toggle button (hamburger -> X) */
.menu-toggle{
  display:none; margin-left:auto;
  appearance:none; background:transparent; border:0; padding:.4rem; cursor:pointer;
  width:44px; height:44px; border-radius:10px; position:relative;
}
.menu-toggle:focus-visible{box-shadow:0 0 0 3px var(--ring)}
.menu-toggle span{
  position:absolute; left:10px; right:10px; height:3px; background:#0c0c0c; border-radius:3px;
  transform-origin:center; transition:transform .22s ease, opacity .22s ease, top .22s ease;
}
.menu-toggle span:nth-child(1){ top:14px }
.menu-toggle span:nth-child(2){ top:20px }
.menu-toggle span:nth-child(3){ top:26px }
.menu-toggle.is-open span:nth-child(1){ top:20px; transform:rotate(45deg) }
.menu-toggle.is-open span:nth-child(2){ opacity:0 }
.menu-toggle.is-open span:nth-child(3){ top:20px; transform:rotate(-45deg) }

/* Mobile dropdown panel */
.nav-dropdown{
  position:absolute; top:100%; right:0; margin-top:.5rem;
  width:min(92vw, 360px);
  background:#fff; border:1px solid rgba(2,8,23,.06); border-radius:14px;
  box-shadow:0 20px 40px rgba(2,8,23,.12);
  overflow:hidden;
  transform-origin:top right;
  transform:scale(.98); opacity:0; pointer-events:none;
  transition:transform .18s ease, opacity .18s ease;
}
.nav-dropdown.open{transform:scale(1); opacity:1; pointer-events:auto}
.nav-dropdown__content{display:flex; flex-direction:column; gap:.25rem; padding:1rem}
.nav-item{display:block; padding:.8rem 1rem; border-radius:10px; font-weight:700; color:#0f172a}
.nav-item:hover{background:#f5f7ff}
.nav-apply{margin-top:.4rem}

/* Scrim behind dropdown */
.nav-scrim{
  position:fixed; inset:0; background:rgba(2,8,23,.35); backdrop-filter:blur(2px);
  z-index:39;
}

/* Mobile switch */
@media (max-width:960px){
  .nav{flex-wrap:nowrap}
  .brand{flex:0 0 auto}
  .nav-links--desktop{display:none}
  .menu-toggle{display:block}
  
}

/* =========================================================
   BUTTONS / PILLS
========================================================= */
.btn{
  display:inline-flex; gap:.5rem; align-items:center; justify-content:center;
  padding:1rem 1.5rem;
  border-radius:9999px; font-weight:800; letter-spacing:.2px;
  font-size:clamp(1.1rem,1.6vw,1.25rem);
  line-height:1; box-shadow:var(--shadow);
  transition:transform .22s ease, filter .22s ease, box-shadow .22s ease;
}
.btn-primary{color:#fff; background:linear-gradient(135deg,var(--primary),var(--accent))}
.btn-primary:hover{transform:translateY(-2px) scale(1.035); filter:saturate(1.08)}
.btn-ghost{background:rgba(255,255,255,.7); border:1px solid rgba(2,8,23,.06); color:var(--primary-600); backdrop-filter:blur(8px)}
.pill{background:#fff; border:1px solid rgba(2,8,23,.06); border-radius:9999px; padding:.5rem .9rem; font-size:.95rem; color:var(--muted)}
.btn.disabled[aria-disabled="true"]{pointer-events:none; opacity:.6; filter:grayscale(20%)}

/* =========================================================
   HERO
========================================================= */
.hero{
  position:relative; color:#fff; overflow:hidden;
  display:grid; align-items:center; min-height:clamp(560px,88vh,900px);
  background:
    radial-gradient(120% 120% at 85% 20%, rgba(246,173,85,.28) 0%, transparent 40%),
    radial-gradient(120% 120% at 10% 10%, rgba(124,138,203,.35) 0%, transparent 45%),
    linear-gradient(180deg, rgba(15,31,58,.55) 0%, rgba(15,31,58,.40) 60%, rgba(15,31,58,.65) 100%);
}
.hero--video .hero__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:saturate(1.05) contrast(1.05); z-index:0;
}
.hero--video .hero__overlay{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(120% 120% at 85% 20%, rgba(246,173,85,.28) 0%, transparent 40%),
    radial-gradient(120% 120% at 10% 10%, rgba(124,138,203,.35) 0%, transparent 45%),
    linear-gradient(180deg, rgba(15,31,58,.55) 0%, rgba(15,31,58,.35) 60%, rgba(15,31,58,.55) 100%);
}

/* Inner grid */
.hero__grid{
  position:relative; z-index:2;
  width:min(1240px,100%); margin:0 auto; padding:clamp(16px,4vw,36px);
  display:grid; gap:clamp(28px,4vw,56px);
  grid-template-columns:1fr;
}
@media (min-width:960px){
  .hero__grid{
    grid-template-columns:minmax(420px,.95fr) minmax(420px,1.05fr);
    align-items:center;
  }
}

/* Static hero image */
.hero__mediaPic{position:relative; display:grid; place-items:center; justify-self:center}
.hero__mediaPic img.hero__img{
  width:clamp(220px, 44vw, 420px);
  aspect-ratio:1/1; object-fit:cover; display:block;
  border-radius:24px; border:1px solid rgba(255,255,255,.18);
  box-shadow:0 30px 80px rgba(2,8,23,.35);
}
@media (max-width:959px){
  .hero__mediaPic img.hero__img{width:min(68vw,480px)}
}

/* RIGHT: copy */
.hero__copy{max-width:56ch; justify-self:start}
.hero__eyebrow{display:flex; gap:.6rem; flex-wrap:wrap}
.hero__eyebrow .pill, .hero__trust .pill{background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); color:#fff}
.hero__title{
  text-wrap:balance;
  font-size:clamp(2.2rem,4.8vw,4.6rem); line-height:1.05;
  margin:5rem 0 1rem; color:#fff; max-width:18ch;
}
.hero__lead{font-size:clamp(1.06rem,1.6vw,1.25rem); color:#fff}
.hero__cta, .hero__trust{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.2rem}
@media (min-width:960px){ .hero__cta, .hero__trust{justify-content:flex-start} }
@media (max-width:959px){
  .hero__grid{text-align:center}
  .hero__mediaPic{order:-1}
  .hero__copy{justify-self:center}
  .hero__cta, .hero__trust{justify-content:center}

  /* tighten spacing for mobile */
  .hero__eyebrow {
    margin-bottom: .4rem;   /* less space under pills */
  }
  .hero__title {
    margin: 1.5rem 0 .75rem; /* much smaller top margin than 5rem */
  }
}

/* =========================================================
   CARDS / ICONS / GRIDS
========================================================= */
.card{background:var(--panel); border:1px solid rgba(2,8,23,.06); border-radius:20px; padding:1.2rem; box-shadow:var(--shadow)}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
@media (max-width:860px){ .grid-3{grid-template-columns:1fr} }
.icon{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-size:1.3rem;
  background:linear-gradient(135deg,#e0f2fe,#ede9fe); border:1px solid rgba(2,8,23,.06)
}

/* =========================================================
   WHY (chips)
========================================================= */
.strip{display:grid; grid-template-columns:repeat(5,1fr); gap:.8rem}
.chip{
  display:flex; align-items:center; gap:.5rem; justify-content:center;
  background:#fff; border:1px solid rgba(2,8,23,.06); border-radius:9999px; padding:.65rem .9rem;
  font-weight:700; color:#1e3a8a;
}
@media (max-width:960px){ .strip{grid-template-columns:1fr 1fr} }

/* =========================================================
   ESTIMATOR (0 → 20,000 views; no tiers)
========================================================= */
.estimator{
  margin-top:1rem; background:var(--panel); border:1px solid rgba(2,8,23,.06);
  border-radius:22px; padding:1.2rem; box-shadow:var(--shadow)
}
.estimator .row{display:flex; gap:1rem; align-items:center; flex-wrap:wrap}
.estimator input[type="range"]{accent-color:var(--primary); width:500px}
.estimator .cells{display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; margin-top:.8rem}
.estimator .cell{background:#f8fafc; border:1px solid rgba(2,8,23,.06); border-radius:14px; padding:.9rem; text-align:center}
@media (max-width:860px){ .estimator .cells{grid-template-columns:1fr} }

/* =========================================================
   ELIGIBILITY
========================================================= */
.eligibility{padding:1.2rem}
.eligibility .q{margin:.8rem 0}
.eligibility .options{display:flex; gap:1rem; margin-top:.4rem; flex-wrap:wrap}
.eligibility__actions{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-top:.6rem}
.badge{padding:.35rem .7rem; border-radius:999px; font-weight:700; font-size:.8rem; background:#eef2ff; color:#3730a3}
#eligibility .btn{font-size:clamp(1rem,1.2vw,1.125rem); padding:.7rem 1.1rem; border-radius:14px}
#eligibilityResult.warn{background:#ffe8e6; border:1px dashed #ef4444; color:#7f1d1d}
#eligibilityResult.info{background:#e0f2fe; border:1px solid #0284c7; color:#075985}
@keyframes pulseChip{0%{transform:scale(.98)}40%{transform:scale(1.03)}100%{transform:scale(1)}}
#eligibilityResult.ok{animation:pulseChip .35s ease}
@media (max-width:700px){
  .eligibility .q{grid-template-columns:40px 1fr}
  .eligibility .q::before{width:40px; height:40px; border-radius:10px}
}

/* =========================================================
   REVIEWS CAROUSEL
========================================================= */
.reviews{overflow:hidden; border-radius:20px; border:1px solid rgba(2,8,23,.06); background:var(--panel); box-shadow:var(--shadow)}
.reviews__track{display:flex; transition:transform .6s ease; will-change:transform}
.review.t-card{flex:0 0 100%; padding:1.2rem; display:grid; grid-template-columns:70px 1fr; gap:1rem; align-items:center}
.avatar{width:64px; height:64px; border-radius:999px; background:#e2e8f0; display:grid; place-items:center; font-weight:800; color:#334155}
.review__body .review__head{display:flex; align-items:center; gap:.6rem; margin-bottom:.2rem}
.stars{color:#f59e0b; font-size:.95rem; letter-spacing:.06rem}
.reviews__dots{display:flex; gap:.4rem; justify-content:center; margin-top:.6rem}
.reviews__dots button{width:8px; height:8px; border-radius:999px; background:#cbd5e1; border:none; cursor:pointer}
.reviews__dots button.active{background:var(--primary)}
.reviews__cta{display:flex; gap:.6rem; justify-content:center; margin-top:1rem; flex-wrap:wrap}
@media (max-width:860px){
  .review.t-card{grid-template-columns:56px 1fr}
  .avatar{width:56px; height:56px}
}

/* =========================================================
   STEPPER
========================================================= */
.how-steps{
  position:relative; display:grid; grid-template-columns:repeat(4,1fr);
  gap:1rem; margin-top:.8rem; list-style:none; padding-left:0; margin-left:0;
}
.how-steps::before{
  content:""; position:absolute; left:calc(12.5% - 1px); right:calc(12.5% - 1px);
  top:36px; height:2px; background:linear-gradient(90deg,#a5b4fc,#c7d2fe,#d8b4fe);
  opacity:.55; pointer-events:none;
}
.how-step{
  position:relative; background:var(--panel); border:1px solid rgba(2,8,23,.06);
  border-radius:18px; padding:1.1rem 1rem 1rem; box-shadow:var(--shadow);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  text-align:left;
}
.how-step:hover{transform:translateY(-3px); box-shadow:0 18px 46px rgba(2,8,23,.14); border-color:rgba(59,130,246,.18)}
.how-badge{
  width:44px; height:44px; border-radius:999px; display:grid; place-items:center;
  font-weight:800; color:#fff; background:linear-gradient(135deg,var(--primary),var(--accent));
  box-shadow:0 8px 18px rgba(59,130,246,.35); margin:0 auto .6rem; position:static;
}
.how-content h3{margin:.1rem 0 .25rem}
.how-content .lead{margin:0; color:var(--muted)}
.how-step.on{box-shadow:0 0 0 3px var(--ring), 0 18px 46px rgba(2,8,23,.14)}
.how-cta{display:flex; gap:.6rem; justify-content:center; margin-top:1rem; flex-wrap:wrap}
@media (max-width:960px){ .how-steps{grid-template-columns:1fr 1fr} .how-steps::before{display:none} }
@media (max-width:520px){ .how-steps{gap:.8rem} }

/* =========================================================
   FAQ / FOOTER
========================================================= */
details{background:#fff; border:1px solid rgba(2,8,23,.06); border-radius:14px; padding:.9rem 1rem; margin:.6rem 0}
footer{margin-top:3rem; background:linear-gradient(135deg,#e0f2fe,#f5f3ff); border-top:1px solid rgba(2,8,23,.06); padding:2rem 0; text-align:center}