.hero{
  position:relative; overflow:hidden; color:#EAF1FA;
  display:flex; align-items:center;
  /* Short of the full viewport so the next section peeks in at the bottom
     on load, as a cue there's more below. */
  min-height:max(560px, calc(100vh - 72px));
  min-height:max(560px, calc(100dvh - 72px));
  background:
    radial-gradient(1200px 560px at 84% -14%, rgba(57,125,255,.4), transparent 62%),
    linear-gradient(165deg, var(--navy) 0%, var(--navy-2) 58%, var(--navy-3) 100%);
  padding:calc(var(--header-h) + clamp(52px,7vw,84px)) 0 0;
}
.hero-inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr; align-items:center; gap:clamp(28px,4vw,60px);
}
.hero-copy{ max-width:700px; }
.hero-visual{ display:none; align-items:center; justify-content:flex-end; }
.eyebrow{
  font-weight:500; font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--sky); margin:0 0 20px;
}
.hero-copy h1{
  font-weight:600; font-size:clamp(32px,5vw,52px); line-height:1.1; letter-spacing:-.02em;
  color:#fff; margin:0 0 22px; max-width:16ch;
}
.hero-copy h1 em{ font-style:normal; font-weight:600; color:var(--sky); }
.hero-copy .lede{
  font-size:clamp(15.5px,1.4vw,18px); line-height:1.68; color:#C6D6F2; font-weight:400;
  max-width:56ch; margin:0 0 14px;
}
.hero-copy .lede:last-of-type{ margin-bottom:36px; }
.hero-copy .btn-lg{ font-size:15.5px; padding:16px 28px; }
/* Scoped to .hero only — the site-wide .btn-primary barely separates from
   this dark background. */
.hero .btn-primary{
  color:#061B45;
  background:linear-gradient(180deg,#8FC0FF,#5CA0EE);
  box-shadow:0 14px 30px -12px rgba(92,160,238,.55);
}
.hero .btn-primary:hover{ filter:brightness(1.05); transform:translateY(-1px); box-shadow:0 18px 34px -12px rgba(92,160,238,.65); }
.hero .btn-primary:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

.hero-illustration{
  display:block;
  width:min(100%, 600px);
  aspect-ratio:1152 / 923;
  height:auto;
  max-height:72vh;
  object-fit:cover;
  /* Full-frame photo: soften all four edges so it melts into the navy hero. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
@media (min-width:1000px){
  .hero-visual{ display:flex; }
  .hero-inner{ grid-template-columns:1.1fr 1fr; }
}

@media (max-width:640px){
  .hero{ min-height:0; padding:calc(var(--header-h) + 44px) 0 64px; }
  .eyebrow{ font-size:11.5px; letter-spacing:.14em; margin-bottom:16px; }
}

/* Fades/rises each section into place the first time it scrolls into view
   (homeController.js toggles .is-visible via IntersectionObserver). */
.reveal-on-scroll{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal-on-scroll.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal-on-scroll{ opacity:1; transform:none; transition:none; }
}

/* "How it works": three text-only step cards (reuses .panel). */
.steps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.step-card{ display:flex; flex-direction:column; gap:12px; }
.step-label{
  align-self:flex-start; padding:5px 12px; border-radius:999px;
  background:rgba(9,82,223,.08); color:var(--blue);
  font-weight:600; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase;
}
.step-card h3{ font-size:19px; color:var(--ink); }
.step-card p{ font-size:14.5px; color:var(--ink-soft); line-height:1.65; margin:0; }
@media (max-width:900px){ .steps-grid{ grid-template-columns:1fr; } }
.steps-cta{ display:flex; justify-content:center; margin-top:32px; }
.steps-cta .btn{ font-size:15.5px; padding:16px 28px; }
@media (max-width:520px){ .steps-cta .btn{ width:100%; padding:16px 20px; } }

/* Keep the reviews card compact instead of spanning the full page width. */
#reviews .panel{ max-width:720px; }

/* Fixed-height, independently-scrollable list — never grows as more
   reviews load; "Load more" is the last item inside it. */
#reviewList{
  height:420px;
  overflow-y:auto;
  padding-right:8px;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
#reviewList::-webkit-scrollbar{ width:6px; }
#reviewList::-webkit-scrollbar-thumb{ background:var(--line); border-radius:999px; }
#reviewList::-webkit-scrollbar-track{ background:transparent; }