/* Novigens sitev2 · iteration-13 · reference-parity pass.
   Iter-12 landed the motion layer (gradient drift, rotator, staggered
   reveals, count-up, nav scroll-state, footer wordmark reveal). Ken
   caught three reference-site behaviors still missing and iter-13
   addresses each:
     (a) Step cards sticky-stack with cascading top offsets so they
         overlap each other as the user scrolls (deck-of-cards).
     (b) Product shots rotary · single-stage carousel replaces the
         static 3-up grid, with crossfade, dots, caption sync, auto-
         advance every 4.4s, pause on hover.
     (c) Cinematic giant footer wordmark is retired. "Novigens Inc."
         text is replaced with a small horizontal-white icon.
   iter-12 motion layer retained wholesale. */

:root {
  /* Neutrals */
  --bg: #ffffff;
  --ink: #0e0e10;
  --mute: #4e4e4e;
  --rule: #e6e6ea;
  --rule-warm: #d6d6de;

  /* Brand */
  --accent: #0a2540;          /* Novigens navy */
  --accent-deep: #0a1f3a;     /* deeper navy for full-bleed band */
  --accent-ink: #ffffff;

  /* Signature color-block tokens */
  --lavender: #BDBDFF;        /* step-card alt + CTA band */
  --lavender-hover: #A8A8F5;
  --onyx: #0e0e10;            /* step-card dark + footer band */

  /* Hero gradient stops */
  --hero-a: #0a1f3a;          /* navy upper-left */
  --hero-b: #1a1670;          /* indigo middle */
  --hero-c: #3c3aff;          /* vivid indigo */
  --hero-d: #BDBDFF;          /* lavender lower-right */

  --max: 1180px;
  --max-narrow: 1100px;
  --pad-x: clamp(20px, 4vw, 48px);
  --pad-y: clamp(80px, 10vw, 140px);

  /* Motion tokens · expressive cubic-bezier curves for view-transition-style motion.
     --ease-out: standard fast-out-slow-in for UI feedback (hover, click).
     --ease-decel: expressive decelerate used for reveals and rotator entry.
     --ease-swap: used for rotator crossfade and hero parallax drift. */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-decel: cubic-bezier(.83, 0, .17, 1);
  --ease-swap: cubic-bezier(.64, 0, .78, 0);

  --font-head: "Familjen Grotesk", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter Tight", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ----- Type tiers ----- */
h1, h2, h3 { margin: 0; font-family: var(--font-head); font-weight: 500; letter-spacing: -0.015em; }
h1 { font-size: clamp(44px, 7vw, 80px); line-height: 1.02; letter-spacing: -0.025em; font-weight: 500; }
h2 { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.08; font-weight: 500; }
h3 { font-size: 20px; line-height: 1.35; font-weight: 500; }

.overline {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
  margin: 0 0 28px 0;
}
.overline-light { color: rgba(255, 255, 255, 0.85); }

/* ----- Buttons · pill signature ----- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 220ms var(--ease-out), color 220ms var(--ease-out), transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
/* Dark pill (navy bg, white text) for light surfaces */
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover { background: #163557; text-decoration: none; transform: translateY(-1px); }

/* Light pill (white bg, dark text) for dark surfaces */
.btn-light {
  background: #ffffff;
  color: var(--onyx);
}
.btn-light:hover { background: var(--lavender); text-decoration: none; transform: translateY(-1px); }

/* Trailing arrow affordance · pill-button signature. Rendered as a small round chip.
   Iter-12: assertive hover · chip shifts 5px right, grows 4% and drops a soft
   shadow. The button itself lifts 2px on hover for subtle parallax. */
.btn::after {
  content: "›";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  background: rgba(255, 255, 255, 0.15);
  color: inherit;
  margin-left: 2px;
  transition: transform 260ms var(--ease-out), background 220ms var(--ease-out), box-shadow 260ms var(--ease-out);
}
.btn-primary::after { background: rgba(255, 255, 255, 0.15); color: #ffffff; }
.btn-light::after { background: var(--onyx); color: #ffffff; }
.btn:hover::after {
  transform: translateX(5px) scale(1.04);
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.45);
}
.btn-primary:hover::after { background: rgba(255, 255, 255, 0.22); }
.btn-light:hover::after   { background: #000000; }
.btn:active::after { transform: translateX(3px) scale(0.98); }

.btn-large { padding: 12px 14px 12px 32px; font-size: 16px; }
.btn-large::after { width: 34px; height: 34px; font-size: 20px; }

/* ----- Layout inner containers ----- */
.inner {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}
.inner-narrow {
  max-width: var(--max-narrow);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* ============================================================
   SECTION 0 · Nav
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--pad-x);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background 260ms var(--ease-out), border-color 260ms var(--ease-out), box-shadow 260ms var(--ease-out), padding 260ms var(--ease-out);
}
/* Scrolled state · stronger surface once the hero starts scrolling away.
   Toggled by the script via IntersectionObserver on a 1px sentinel at top. */
.nav.nav-scrolled {
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: var(--rule);
  box-shadow: 0 10px 30px -24px rgba(10, 37, 64, 0.25);
  padding-top: 12px;
  padding-bottom: 12px;
}
.wordmark { display: inline-flex; align-items: center; gap: 14px; line-height: 1; }
.wordmark:hover { text-decoration: none; }
.wordmark-logo { display: block; height: 48px; width: auto; transition: height 260ms var(--ease-out); }
.nav.nav-scrolled .wordmark-logo { height: 40px; }
.wordmark-tagline {
  display: inline-block;
  padding-left: 14px;
  border-left: 1px solid rgba(11, 37, 69, 0.18);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-muted, #475569);
  white-space: nowrap;
  transition: font-size 260ms var(--ease-out), color 260ms var(--ease-out);
}
.nav.nav-scrolled .wordmark-tagline { font-size: 12px; }
@media (max-width: 760px) { .wordmark-tagline { display: none; } }

/* ============================================================
   SECTION 1 · Hero · full-bleed gradient
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 86vh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--pad-y) * 0.8);
  padding-bottom: calc(var(--pad-y) * 0.8);
  color: #ffffff;
}
/* Hero backdrop image. <picture> element inside the hero, positioned
   absolutely behind the gradient + ribbon + content stack. object-fit
   cover handles reflow at any viewport; object-position tilted right so
   the machine subject sits behind the body copy rather than the H1. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  display: block;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
  display: block;
}

/* Gradient overlay · navy → indigo → lavender, diagonally weighted.
   Now semi-transparent (rgba with alpha steps) so the cleanroom image
   shows through. Over-sized and slow-drifted so the hero feels alive
   without distracting. 18s cycle, linear ease: imperceptible at any
   single moment, noticeable only if you stare. Left side holds denser
   alpha to keep the H1 legible; right side fades to let the image
   texture breathe behind the body copy and outcome chips. */
.hero::before {
  content: "";
  position: absolute;
  inset: -8% -8%;
  background:
    linear-gradient(120deg,
      rgba(10, 31, 58, 0.92) 0%,
      rgba(26, 22, 112, 0.82) 30%,
      rgba(60, 58, 255, 0.60) 60%,
      rgba(189, 189, 255, 0.30) 100%);
  background-size: 140% 140%;
  background-position: 0% 50%;
  z-index: -2;
  animation: hero-drift 18s ease-in-out infinite alternate;
  will-change: background-position;
}
/* Translucent ribbon curve · flowing-wave hero backdrop.
   Two stacked radial-ellipses offset to hint at a folded ribbon edge.
   Ellipses also breathe (opacity + translate) on a 9s cycle. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 85% 50%, rgba(255, 255, 255, 0.14), transparent 60%),
    radial-gradient(ellipse 60% 40% at 95% 80%, rgba(255, 255, 255, 0.10), transparent 55%),
    radial-gradient(ellipse 50% 40% at 60% 30%, rgba(10, 31, 58, 0.25), transparent 60%);
  z-index: -1;
  pointer-events: none;
  animation: hero-breathe 9s ease-in-out infinite alternate;
  will-change: opacity, transform;
}
@keyframes hero-drift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
@keyframes hero-breathe {
  0%   { opacity: 0.92; transform: translate3d(0, 0, 0); }
  100% { opacity: 1;    transform: translate3d(-1.5%, -0.8%, 0); }
}

.hero-inner {
  position: relative;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  z-index: 1;
}
.hero-eyebrow {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
  margin: 0 0 32px 0;
}
.hero-cols {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: start;
}
.hero-left h1 {
  margin: 0 0 40px 0;
  color: #ffffff;
}
.hero-right p {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 17px;
  line-height: 1.65;
  padding-top: 12px;
  max-width: 480px;
}
.hero-cta-row { margin-top: 8px; }

/* Rotator · iter-12 upgrade.
   Horizontal + vertical blended crossfade using the view-transition
   easing pair: .ease-decel for exit, .ease-out for entry. The word sits
   in an inline-block box so the sibling comma/period hug it cleanly.
   A translucent lavender underline pulses in sync for extra liveliness. */
.rotator {
  display: inline-block;
  position: relative;
  color: var(--lavender);
  vertical-align: baseline;
  min-width: 5ch;
  padding-bottom: 4px;
}
.rotator::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(189, 189, 255, 0.55);
  border-radius: 2px;
  transform-origin: left center;
  animation: rotator-underline 2.8s ease-in-out infinite;
}
.rotator .word {
  display: inline-block;
  transition: opacity 320ms var(--ease-decel), transform 320ms var(--ease-decel);
  will-change: transform, opacity;
}
.rotator .word.out        { opacity: 0; transform: translate3d(-12px, -8px, 0); }
.rotator .word.in-from-below { opacity: 0; transform: translate3d(14px, 10px, 0); transition: none; }
@keyframes rotator-underline {
  0%, 100% { transform: scaleX(1);   opacity: 0.55; }
  50%      { transform: scaleX(0.6); opacity: 0.25; }
}

/* ============================================================
   SECTION 2 · Problem · flat row, no card borders
   ============================================================ */
.problem { padding: var(--pad-y) 0; }
.problem .inner > .overline { margin-bottom: 48px; }
.flat-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}
.flat-card { padding: 0; }
.flat-card .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--accent);
  border-radius: 50%;
  margin-bottom: 20px;
}
.flat-card h3 { margin: 0 0 12px 0; font-size: 22px; }
.flat-card p { margin: 0; color: var(--mute); font-size: 16px; line-height: 1.6; }

/* ============================================================
   SECTION 3 · How It Works · 2-col split + tall alternating step-cards
   ============================================================ */
.how { padding: var(--pad-y) 0; background: #ffffff; }
.how-split {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 64px;
  align-items: start;
}
.how-left {
  position: sticky;
  top: 120px;
  align-self: start;
}
.how-left h2 { max-width: 420px; }
.how-right {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* Iter-13 · sticky-stack deck.
   Each step card pins at a slightly lower top than the previous, so as the
   user scrolls the cards cascade over one another: card 01 pins first,
   card 02 rides up and overlaps 01 (you see 01 peeking above 02), then
   03 rides up and overlaps 02 (you see 02 peeking above 03). The --i
   custom property is assigned per child by the stagger script. The 16px
   cascade produces a visible deck edge without pushing off the nav.
   Box-shadow fires only when the card is the active top-of-stack (visual
   separator against the card below). */
.step-card {
  position: sticky;
  top: calc(110px + var(--i, 0) * 16px);
  border-radius: 28px;
  padding: 36px 40px;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 360ms var(--ease-out), box-shadow 360ms var(--ease-out);
  box-shadow: 0 -12px 32px -20px rgba(10, 15, 25, 0.25);
}
.step-card:hover { box-shadow: 0 -12px 32px -20px rgba(10, 15, 25, 0.35), 0 20px 48px -28px rgba(10, 37, 64, 0.25); }
.step-dark { background: var(--onyx); color: #ffffff; }
.step-lavender { background: var(--lavender); color: var(--onyx); }
.step-big-num {
  font-family: var(--font-head);
  font-size: clamp(56px, 6.5vw, 84px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  opacity: 0.95;
}
.step-dark .step-big-num { color: #ffffff; }
.step-lavender .step-big-num { color: var(--onyx); }
.step-body h3 {
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 16px 0;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.step-body p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  max-width: 540px;
}
.step-dark .step-body p { color: rgba(255, 255, 255, 0.82); }
.step-lavender .step-body p { color: #333340; }

/* ============================================================
   SECTION 4 · Product shots
   ============================================================ */
/* Iter-13 · Rotary showcase. Single slot, 3 product shots auto-cycle every
   4.4s with crossfade + gentle scale-in. Dots below for manual jump.
   Caption updates to match the active shot. Accessible: arrows keybinding,
   pause on hover, ARIA live on the caption. */
.shots { padding: var(--pad-y) 0; }
.shots-stage {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--rule);
  border-radius: 20px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 30px 80px -40px rgba(10, 37, 64, 0.25);
}
.shots-stage figure {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity 720ms var(--ease-decel), transform 1200ms var(--ease-decel);
  will-change: opacity, transform;
}
.shots-stage figure.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}
.shots-stage .shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #ffffff;
}
.shots-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 980px;
  margin: 20px auto 0 auto;
  padding: 0 4px;
}
.shots-caption .label {
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  font-family: var(--font-head);
  letter-spacing: -0.005em;
  transition: opacity 280ms var(--ease-out);
}
.shots-dots {
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.shots-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--rule-warm);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 260ms var(--ease-out), width 260ms var(--ease-out);
}
.shots-dot:hover { background: var(--mute); }
.shots-dot.is-active {
  background: var(--accent);
  width: 24px;
}
.shots-note {
  max-width: 980px;
  margin: 10px auto 0 auto;
  color: var(--mute);
  font-size: 13px;
  text-align: center;
}

/* ============================================================
   SECTION 5 · Capabilities · full-bleed navy band
   ============================================================ */
.capabilities {
  background: var(--accent-deep);
  color: #ffffff;
  padding: var(--pad-y) 0;
}
.capabilities .overline { color: rgba(255, 255, 255, 0.85); }
.capabilities h2 { color: #ffffff; margin-bottom: 56px; max-width: 720px; }
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}
.cap-card h3 {
  font-size: 22px;
  color: #ffffff;
  margin: 0 0 14px 0;
  position: relative;
  padding-top: 18px;
}
.cap-card h3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 2px;
  background: var(--lavender);
}
.cap-card p { margin: 0; color: rgba(255, 255, 255, 0.78); font-size: 16px; line-height: 1.6; }

/* ============================================================
   SECTION 6 · Trust · flat row
   ============================================================ */
.trust { padding: var(--pad-y) 0; }
.trust h2 { margin-bottom: 56px; max-width: 640px; }
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}
.pillar {
  position: relative;
  padding-top: 20px;
}
.pillar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 2px;
  background: var(--accent);
}
.pillar h3 { margin: 0 0 12px 0; font-size: 22px; }
.pillar p { margin: 0; color: var(--mute); font-size: 16px; line-height: 1.6; }

/* ============================================================
   SECTION 7 · Sovereignty · flat row, shared pillar styling
   ============================================================ */
.sovereignty { padding: var(--pad-y) 0; background: #fafafb; }
.sovereignty h2 { margin-bottom: 56px; }

/* ============================================================
   SECTION 8 · Interstitial
   ============================================================ */
.interstitial {
  padding: calc(var(--pad-y) * 0.7) 0;
  text-align: center;
}
.interstitial p {
  font-size: 24px;
  line-height: 1.4;
  max-width: 720px;
  margin: 0 auto 32px auto;
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ============================================================
   SECTION 9 · Metrics · inline mega-sentence
   ============================================================ */
.metrics { padding: var(--pad-y) 0; text-align: center; }
.metrics .overline { text-align: center; margin-bottom: 40px; }
.metrics-sentence {
  font-family: var(--font-head);
  font-size: clamp(28px, 4.2vw, 52px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 1000px;
  margin: 0 auto;
}
.metrics-sentence .big {
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.03em;
  padding: 0 4px;
}

/* ============================================================
   SECTION 10 · Book a Demo · full-bleed lavender band
   ============================================================ */
.book-demo {
  background: var(--lavender);
  color: var(--onyx);
  padding: var(--pad-y) 0;
}
.book-demo-split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: start;
}
.book-demo h2 {
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  margin: 0;
  color: var(--onyx);
  max-width: 440px;
}
.book-demo .bd-right p {
  margin: 0 0 28px 0;
  color: var(--onyx);
  font-size: 17px;
  line-height: 1.6;
  max-width: 440px;
}
.book-demo .book-demo-hint {
  margin-top: 24px;
  font-size: 13px;
  color: rgba(14, 14, 16, 0.7);
  max-width: 440px;
}
.book-demo .book-demo-hint a { border-bottom: 1px solid rgba(14, 14, 16, 0.4); }
.book-demo .book-demo-hint a:hover { border-bottom-color: var(--onyx); text-decoration: none; }

/* ============================================================
   SECTION 11 · Footer · iter-13 compact.
   Iter-11/12 had a cinematic giant wordmark row that ate a screenful.
   Iter-13 drops it. The footer is now a single row: icon-sized wordmark,
   mail, legal links, copyright. Still on the onyx band.
   ============================================================ */
footer {
  background: var(--onyx);
  color: rgba(255, 255, 255, 0.65);
  padding: calc(var(--pad-y) * 0.55) 0 48px 0;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  align-items: center;
  font-size: 14px;
}
.footer-bottom p { margin: 0; }
.footer-bottom a { color: rgba(255, 255, 255, 0.75); border-bottom: 1px solid transparent; transition: border-color 180ms var(--ease-out); }
.footer-bottom a:hover { border-bottom-color: rgba(255, 255, 255, 0.75); text-decoration: none; }
.footer-bottom .legal { display: flex; gap: 24px; }
.footer-bottom .footer-addr { color: rgba(255, 255, 255, 0.55); font-size: 14px; }
.footer-bottom .copy { margin-left: auto; color: rgba(255, 255, 255, 0.5); }
.footer-icon {
  display: inline-block;
  height: 28px;
  width: auto;
  vertical-align: middle;
  opacity: 0.95;
}

/* ============================================================
   Scroll reveal + reduced-motion
   Iter-10: single section-level reveal.
   Iter-12: section reveal + child stagger.
      A section.reveal still fades+lifts in as a block.
      A section.reveal-stagger lifts its children individually with a
      per-child delay driven by the --i custom property. The script assigns
      --i to each direct child of a .reveal-stagger once the section enters
      the viewport. Empty delay (--i: 0) for first, ~80ms increments after.
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 560ms var(--ease-decel), transform 560ms var(--ease-decel);
  will-change: transform, opacity;
}
.reveal.revealed { opacity: 1; transform: none; }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease-decel), transform 620ms var(--ease-decel);
  transition-delay: calc(var(--i, 0) * 80ms);
  will-change: transform, opacity;
}
.reveal-stagger.revealed > * { opacity: 1; transform: none; }

/* Metrics count-up · the .big numerals start muted and scale-in when their
   section reveals. Paired with the count-up JS that mutates textContent. */
.metrics-sentence .big {
  display: inline-block;
  transform: translateY(6px) scale(0.96);
  opacity: 0.4;
  transition: opacity 520ms var(--ease-decel), transform 520ms var(--ease-decel);
}
.metrics.revealed .metrics-sentence .big {
  opacity: 1;
  transform: none;
}

/* ============================================================
   Hero outcome chips · three KPI promises under the hero body.
   Each chip appears in the rotary carousel's per-screen data-kpi
   line, so the hero promises and the carousel backs them up.
   ============================================================ */
.hero-outcomes {
  list-style: none;
  margin: 20px 0 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  max-width: 480px;
}
.hero-outcomes li {
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ============================================================
   Cap card · "not a ___" differentiation line (card 2 only).
   Small sub-line under the body, separated by a faint top rule.
   ============================================================ */
.cap-not {
  margin: 14px 0 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* ============================================================
   SECTION 9.5 · Pre-pilot · 7-day proof-of-value runway.
   Horizontal 5-step track: Day 0 → Day 3 → Day 5 → Day 7 → Pilot.
   Chevron connectors between steps via ::after. Pilot step takes
   accent color as the destination. Uses .reveal-stagger so each
   step fades in with the existing per-child --i delay.
   ============================================================ */
.prepilot { padding: var(--pad-y) 0; background: #fafafa; }
.prepilot h2 { margin-bottom: 12px; max-width: 720px; }
.prepilot-lede {
  margin: 0 0 48px 0;
  color: var(--mute);
  font-size: 17px;
  max-width: 640px;
}
.prepilot-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 16px;
  align-items: stretch;
  counter-reset: prepilot;
}
.prepilot-step {
  flex: 1 1 0;
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(10, 37, 64, 0.10);
  border-radius: 16px;
  padding: 24px 20px;
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
.prepilot-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -18px rgba(10, 15, 25, 0.22);
}
.prepilot-step:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -14px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-top: 2px solid rgba(10, 37, 64, 0.22);
  border-right: 2px solid rgba(10, 37, 64, 0.22);
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}
.prepilot-day {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(10, 37, 64, 0.06);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.prepilot-step p {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 500;
}
.prepilot-pilot {
  background: var(--accent);
  border-color: var(--accent);
}
.prepilot-pilot .prepilot-day {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}
.prepilot-pilot p { color: #ffffff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .reveal-stagger > * { opacity: 1; transform: none; transition-delay: 0ms; }
  .rotator .word.out,
  .rotator .word.in-from-below { opacity: 1; transform: none; }
  .rotator::after { animation: none; transform: none; opacity: 0.55; }
  .hero::before, .hero::after { animation: none; }
  .metrics-sentence .big { opacity: 1; transform: none; }
  .shots-stage figure { opacity: 0; transform: none; transition: none; }
  .shots-stage figure.is-active { opacity: 1; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .how-split { grid-template-columns: 1fr; gap: 40px; }
  .how-left { position: static; }
  /* Sticky-stack cards undo themselves when the grid collapses: a 1-col
     layout with three 440px sticky cards would pin each in turn and dwarf
     the rest of the page. Fall back to the iter-11 flex-column pattern. */
  .step-card { position: relative; top: auto; }
  .hero-cols { grid-template-columns: 1fr; gap: 32px; }
  .hero-right p { padding-top: 0; }
  .book-demo-split { grid-template-columns: 1fr; gap: 32px; }
  /* Pre-pilot: 5-step horizontal track gets crowded at tablet widths.
     Wrap to a 2-row layout (3 + 2) and re-point the chevrons. */
  .prepilot-track { flex-wrap: wrap; gap: 20px; }
  .prepilot-step { flex: 1 1 calc(33% - 14px); min-width: 180px; }
}
@media (max-width: 820px) {
  .flat-cards,
  .cap-grid,
  .pillars { grid-template-columns: 1fr; gap: 40px; }
  .step-card { min-height: 340px; padding: 28px 28px; }
  .shots-stage { aspect-ratio: 4 / 3; }
  .shots-caption { flex-wrap: wrap; justify-content: center; }
  .footer-bottom { gap: 18px 28px; }
  .footer-bottom .copy { margin-left: 0; width: 100%; }
  /* Pre-pilot: stack vertically on phone; rotate chevrons to point down. */
  .prepilot-track { flex-direction: column; gap: 18px; }
  .prepilot-step { flex: 1 1 auto; }
  .prepilot-step:not(:last-child)::after {
    right: auto;
    top: auto;
    left: 50%;
    bottom: -14px;
    transform: translateX(-50%) rotate(135deg);
  }
}
@media (max-width: 560px) {
  .wordmark-logo { height: 40px; }
  .hero { min-height: 72vh; }
  h1 { font-size: 44px; }
  .metrics-sentence { font-size: 28px; }
}

/* ============================================================
   Hero refresh · iter-14
   ----------------------------------------------------------------
   Replaces the original "Your machines, finally awaken" rotator H1
   + paragraph + outcome chips with:
     · A two-line headline ("Your machine already knows. Let it speak.")
       in Familjen Grotesk weight 400 — same family as the Book a Demo
       pill, lighter visual weight than the iter-12/13 H1.
     · A 3-frame rotary on the right (data path SVG → time SVG →
       walking-wounded HTML chart). White card on navy gradient.
       Auto-advance every 5.2s, dot-driven manual jump, pause on hover.
   The original .hero-eyebrow / .hero-right paragraph / .hero-outcomes
   classes still exist in styles.css below for backwards compatibility
   with privacy.html / terms.html if they reuse the hero shell.
   ============================================================ */

/* Reweight + retighten the headline so it visually pairs with the
   "Book a Demo" pill on the same column. iter-18: ceiling clamp lowered
   from 64 → 60 so the H1 keeps its 2-line shape at the now-narrower
   headline column. */
.hero-h1-light {
  font-family: var(--font-head);
  font-weight: 400;
  letter-spacing: -0.020em;
  line-height: 1.05;
  font-size: clamp(40px, 5.0vw, 60px);
  color: #ffffff;
  margin: 0 0 36px 0;
}

/* iter-18: widen the hero canvas further (1480 → 1600) so the rotary card
   can extend toward the center of the page rather than hugging only the
   right side of the previous column. */
.hero-inner {
  max-width: 1600px;
}

/* Headline column gets a smaller share, rotary gets the dominant one.
   iter-18: shifted from 1fr / 1.6fr to 1fr / 1.95fr and tightened the gap
   from 48 → 28 so the rotary reaches ~960px on a 1600-wide hero — closing
   the empty space between H1 and card. */
.hero-cols {
  grid-template-columns: 1fr 1.95fr;
  gap: 28px;
  align-items: center;
}

/* Rotary stage — square card sitting in the right column.
   iter-16: dropped the backdrop-filter blur (the frosted-glass effect read as
   muddy/ugly). Now a flat translucent white at 0.75 opacity — same look as
   the previous solid white card but with the hero gradient + cleanroom photo
   perceptibly bleeding through behind the visualization content. The SVG/iframe
   canvases are still transparent so what sits on top of this surface is just
   the plot artwork (lines, arrows, glyphs, labels). */
.hero-rotor {
  position: relative;
  width: 100%;
  /* iter-19: cap by both pixel width AND viewport height. On wide-but-short
     viewports (typical 1080p laptop), max-height clamps the square below the
     1000-px max so the whole plot stays in view without scrolling. ~300px
     buffer covers nav, hero padding-top/bottom, caption, and safe margin. */
  max-width: 1000px;
  max-height: calc(100vh - 300px);
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 48px -24px rgba(8, 14, 32, 0.40);
}

/* iter-19 to iter-20: the caption was lifted out of the page-level layout
   and embedded directly inside each SVG / chart-iframe, just below the
   eyebrow title. The .hero-rotor-caption rule was therefore retired. */
.hero-frame {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.012);
  transition: opacity 620ms var(--ease-decel), transform 980ms var(--ease-decel);
  will-change: opacity, transform;
  background: transparent;     /* let the translucent card behind us be the surface */
}
.hero-frame.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}
.hero-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;       /* preserve square plot proportions inside the card */
}
.hero-frame-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

/* Dots — pinned to the rotary card's bottom-left. Match the .shots-dot
   visual idiom (active dot grows to 24px wide). Stay above is-active
   frames so they remain clickable. */
.hero-rotor-dots {
  position: absolute;
  left: 18px;
  bottom: 16px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  z-index: 5;
}
.hero-rotor-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(10, 37, 64, 0.38);    /* iter-15: bumped from 0.22 — frosted card needs more contrast */
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 260ms var(--ease-out), width 260ms var(--ease-out);
}
.hero-rotor-dot:hover { background: rgba(10, 37, 64, 0.62); }
.hero-rotor-dot.is-active {
  background: var(--accent);
  width: 22px;
}

/* Mobile · stack the columns so the rotary lands below the headline. */
@media (max-width: 820px) {
  .hero-cols {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .hero-rotor {
    max-width: 480px;
    margin: 0 auto;
  }
  .hero-h1-light {
    font-size: clamp(36px, 8vw, 48px);
    margin-bottom: 28px;
  }
}