/* Hero on deep navy: head, numbered facts, and one scene without drawing: a white tool panel, a phone with the hero reel above it,
   three viewer questions as chips, a blue glow behind. Two columns from 1024px and on landscape phones.
   The background has three gradient layers plus film grain (::before). Static state = final state, nothing starts hidden. */
.hero {
  --hh: var(--size-header-h);
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--size-header-h) + clamp(20px, 5vw, 40px));
  padding-bottom: clamp(40px, 8vw, 72px);
  overflow-x: clip;
}
@media (min-width: 768px) { .hero { --hh: var(--size-header-h-desktop); } }

/* Background: wins over the .sec seam and decor in layout.css (two classes); the three layers are sized to the section */
.hero.hero--dark {
  background-color: var(--color-navy);
  background-image:
    radial-gradient(ellipse 55% 65% at 80% 35%, color-mix(in srgb, var(--color-glow) 55%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 60% at 0% 100%, color-mix(in srgb, var(--color-navy-2) 90%, transparent), transparent 70%),
    linear-gradient(160deg, var(--color-navy-2) 0%, var(--color-navy) 45%, var(--color-navy-deep) 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%;
  background-position: 0 0, 0 0, 0 0;
  background-repeat: no-repeat;
  color: var(--color-on-dark);
}
/* Film grain: SVG noise, overlay blend, content above it */
.hero--dark::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.07;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.hero__head, .hero__more { min-width: 0; }

/* Head */
.hero__eyebrow { margin-bottom: 18px; font-size: 13px; font-weight: 600; line-height: 1.5; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-gold); }
.hero__title {
  font-size: var(--size-h1-hero);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.02;
  text-wrap: balance;
  overflow-wrap: break-word;
  color: var(--color-on-dark);
}
.hero--dark .hero__subtitle { margin-top: 22px; max-width: 30em; color: var(--color-on-dark-2); }

/* Visual: one scene, 560:620. Everything inside is sized by --u (one scene unit = 1/560 of its width). */
.hero__visual {
  --hs-w: min(100%, 560px);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 0;
  max-width: 460px;
  margin: 32px auto 0;
}
.hs { container-type: inline-size; width: var(--hs-w); aspect-ratio: 560 / 620; min-width: 0; }
.hs__stage {
  --u: calc(min(100vw - 2 * var(--size-gutter), 460px) / 560);
  --hs-lead: -4.7s;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
@supports (width: 1cqw) { .hs__stage { --u: calc(100cqw / 560); } }
.hs-layer { will-change: transform; }

/* Glow behind the phone, about 1.3x its size */
.hs__glow {
  position: absolute;
  left: calc(var(--u) * 262);
  top: calc(var(--u) * -59);
  width: calc(var(--u) * 325);
  height: calc(var(--u) * 673);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--color-glow) 60%, transparent), transparent);
}

/* Panel: the course tool window (real HTML) */
.hs__screen {
  position: absolute;
  left: 0; top: 16%; width: 58%;
  z-index: 1;
  padding: calc(var(--u) * 22);
  border-radius: calc(var(--u) * 18);
  background: var(--color-card);
  box-shadow: 0 40px 80px -30px color-mix(in srgb, var(--color-navy-deep) 80%, transparent);
  font-size: max(12px, calc(var(--u) * 20));
  line-height: 1.2;
  color: var(--color-ink);
}
.hs__tool { margin: 0 0 calc(var(--u) * 14); padding-bottom: calc(var(--u) * 12); border-bottom: 1px solid var(--color-line); font-weight: 700; font-size: 1.05em; }
.hs__steps { display: flex; flex-direction: column; gap: calc(var(--u) * 14); margin: 0; padding: 0; list-style: none; }
.hs__step { display: flex; align-items: center; gap: calc(var(--u) * 12); font-weight: 600; }
.hs__check { flex: none; width: 1.3em; height: 1.3em; }
.hs__check svg { display: block; width: 100%; height: 100%; }
.hs__check-ring { fill: var(--color-card); stroke: var(--color-line); stroke-width: 1.6; }
.hs__check-fill { fill: var(--color-sage); stroke: var(--color-ink); stroke-width: 1.2; }
.hs__tick { fill: none; stroke: var(--color-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hs__check-on { transform-box: fill-box; transform-origin: center; }
.hs__bar { height: calc(var(--u) * 8); margin-top: calc(var(--u) * 18); overflow: hidden; border-radius: 99px; background: var(--color-line); }
.hs__bar-fill { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--color-accent); transform-origin: left center; }

/* Phone: the hero reel, above the panel */
.hs__phone { position: absolute; right: 2%; top: 3%; z-index: 2; width: calc(var(--u) * 250); --phone-w: calc(var(--u) * 250); }
.hs__phone .phone { padding: calc(var(--u) * 10); border-radius: calc(var(--u) * 46); box-shadow: 0 50px 90px -30px var(--color-navy-deep); }
.hs__phone .phone__screen { border-radius: calc(var(--u) * 36); }
.hs__phone .phone__screen::after { top: calc(var(--u) * 9); height: calc(var(--u) * 9); }

/* Viewer questions: solid chips */
.hs__bubbles {
  position: absolute;
  left: 4%; bottom: 3%; width: 60%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 10);
  font-size: max(11px, calc(var(--u) * 17));
  line-height: 1.25;
}
.hs__bubble {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  align-self: flex-start;
  max-width: 100%;
  margin: 0;
  padding: calc(var(--u) * 9) calc(var(--u) * 16) calc(var(--u) * 9) calc(var(--u) * 9);
  border-radius: calc(var(--u) * 18) calc(var(--u) * 18) calc(var(--u) * 18) calc(var(--u) * 4);
  background: var(--color-card);
  box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--color-navy-deep) 60%, transparent);
  font-weight: 600;
  color: var(--color-ink);
  transform-origin: left bottom;
}
.hs__bubble--2 { align-self: flex-end; }
.hs__avatar { flex: none; width: 1.7em; height: 1.7em; border-radius: 50%; }
.hs__avatar--coral { background: var(--color-coral); }
.hs__avatar--teal { background: var(--color-teal); }
.hs__avatar--lilac { background: var(--color-lilac); }
@container (max-width: 319px) { .hs__bubble--3 { display: none; } }

/* 3D objects (3dicons): play over the panel's top-left corner, mic over the phone's lower right edge. The wrapper is the parallax layer
   (hero.js sets its transform), so the tilt and the float live on the image. Static state = fully visible. */
.hs__art { position: absolute; z-index: 4; }
.hs__art--1 { left: -9%; top: -7%; z-index: 0; width: calc(var(--u) * 240); }
.hs__art--2 { right: -13%; bottom: -3%; width: calc(var(--u) * 260); }
@media (max-width: 1023px) {
  .hs__art--1 { left: -3%; }
  .hs__art--2 { right: -4%; }
}
.hs__art-img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 calc(var(--u) * 18) calc(var(--u) * 22) color-mix(in srgb, var(--color-navy-deep) 60%, transparent));
}
.hs__art--1 .hs__art-img { --hs-rot: -8deg; transform: rotate(var(--hs-rot)); }

/* Facts: numbered rows, no icons */
.hero__facts { margin: 40px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--color-on-dark-line); }
.hero__fact { display: flex; align-items: baseline; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--color-on-dark-line); }
.hero__num { flex: none; min-width: 2.4em; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--color-gold); font-variant-numeric: tabular-nums; }
.hero__fact-text { font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--color-on-dark); }
/* Trust strip (off by default, see config trust_key) */
.hero__trust { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--color-on-dark-line); }
.hero__trust .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; max-width: 460px; }
.hero__trust .stats--big { padding-top: 0; border-top: 0; }
.hero__trust .stats__item { padding-inline: 16px; }
.hero__trust .stats__item:first-child { padding-left: 0; }
.hero__trust .stats__item + .stats__item { border-left: 1px solid var(--color-on-dark-line); }
.hero__trust .stats__value { color: var(--color-on-dark); }
.hero__trust .stats__label { color: var(--color-on-dark-2); }

/* Desktop and landscape phones: two columns, text block centered against the scene */
@media (min-width: 1024px), (max-width: 1023px) and (max-height: 520px) and (orientation: landscape) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: clamp(40px, 5vw, 80px);
  }
  .hero__head { grid-column: 1; grid-row: 2; align-self: end; }
  .hero__more { grid-column: 1; grid-row: 3; align-self: start; }
  .hero__visual { grid-column: 2; grid-row: 1 / 5; max-width: none; margin: 0; }
}
@media (min-width: 1024px) {
  .hero.hero--dark {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: min(100vh, calc(880px + var(--size-header-h)));
    min-height: min(100svh, calc(880px + var(--size-header-h)));
    padding-block: calc(var(--size-header-h) + clamp(32px, 3.5vw, 56px)) clamp(32px, 3.5vw, 56px);
  }
  .hero__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero__fact { display: block; padding: 18px 20px 0 0; border-bottom: 0; }
  .hero__fact + .hero__fact { padding-left: 20px; border-left: 1px solid var(--color-on-dark-line); }
  .hero__num { display: block; margin-bottom: 8px; }
  .hero__fact-text { display: block; font-size: 18px; }
}
@media (max-width: 1023px) and (max-height: 520px) and (orientation: landscape) {
  .hero { padding-block: calc(var(--size-header-h) + 16px) 16px; }
  .hero__title { font-size: clamp(28px, 4.2vw, 40px); }
  .hero__visual { align-self: start; --hs-w: min(100%, 560px, calc((100vh - var(--hh) - 32px) * 560 / 620)); }
}
@supports (height: 1svh) {
  @media (max-width: 1023px) and (max-height: 520px) and (orientation: landscape) {
    .hero__visual { --hs-w: min(100%, 560px, calc((100svh - var(--hh) - 32px) * 560 / 620)); }
  }
}

/* Entrance: CSS only, transform and opacity. It starts half visible, so if no frame ever runs the text still reads. The h1 is not animated. */
@keyframes hero-rise { from { opacity: 0.5; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }

.hero__eyebrow { animation: hero-rise 600ms var(--ease-out) 0ms both; }
.hero__subtitle { animation: hero-rise 600ms var(--ease-out) 100ms both; }
.hero__fact:nth-child(1) { animation: hero-rise 600ms var(--ease-out) 180ms both; }
.hero__fact:nth-child(2) { animation: hero-rise 600ms var(--ease-out) 240ms both; }
.hero__fact:nth-child(3) { animation: hero-rise 600ms var(--ease-out) 300ms both; }
.hero__trust { animation: hero-rise 600ms var(--ease-out) 360ms both; }

/* The 7 s loop. Static default = final state (all checks, full bar, all bubbles), so no-JS and reduced motion need nothing.
   Times: checks 0.6 / 1.4 / 2.2 s, bubbles 2.8 / 3.6 / 4.4 s, hold, fade at ~6.3 s. The negative delay (--hs-lead) starts
   the first run inside the hold, so the scene is complete from the first frame, then the loop plays from the start. */
@keyframes hs-check-1 { 0%, 8% { opacity: 0; transform: scale(0.4); } 11%, 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(1); } }
@keyframes hs-check-2 { 0%, 19% { opacity: 0; transform: scale(0.4); } 22%, 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(1); } }
@keyframes hs-check-3 { 0%, 31% { opacity: 0; transform: scale(0.4); } 34%, 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(1); } }
@keyframes hs-bar { 0%, 8% { transform: scaleX(0.04); } 12% { transform: scaleX(0.33); } 19% { transform: scaleX(0.33); } 23% { transform: scaleX(0.66); } 31% { transform: scaleX(0.66); } 35%, 90% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0.04); } }
@keyframes hs-bubble-1 { 0%, 38% { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.85); } 42%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes hs-bubble-2 { 0%, 49% { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.85); } 53%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes hs-bubble-3 { 0%, 61% { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.85); } 65%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes hs-float { 0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--hs-rot, 0deg)); } 50% { transform: translate3d(0, -6px, 0) rotate(var(--hs-rot, 0deg)); } }
@media (prefers-reduced-motion: no-preference) {
  .hs__step--1 .hs__check-on { animation: hs-check-1 7s var(--ease-out) var(--hs-lead) infinite; }
  .hs__step--2 .hs__check-on { animation: hs-check-2 7s var(--ease-out) var(--hs-lead) infinite; }
  .hs__step--3 .hs__check-on { animation: hs-check-3 7s var(--ease-out) var(--hs-lead) infinite; }
  .hs__bar-fill { animation: hs-bar 7s var(--ease-inout) var(--hs-lead) infinite; }
  .hs__bubble--1 { animation: hs-bubble-1 7s var(--ease-out) var(--hs-lead) infinite; }
  .hs__bubble--2 { animation: hs-bubble-2 7s var(--ease-out) var(--hs-lead) infinite; }
  .hs__bubble--3 { animation: hs-bubble-3 7s var(--ease-out) var(--hs-lead) infinite; }
  .hs__art--1 .hs__art-img { animation: hs-float 6s ease-in-out infinite; }
  .hs__art--2 .hs__art-img { animation: hs-float 7s ease-in-out -3s infinite; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow, .hero__subtitle, .hero__fact, .hero__trust { animation: none !important; }
}