/* ──────────────────────────────────────────────────────────────
   INDEXED — DESIGN TOKENS (v3, brand book v1.0 May 2026)
   Paper / Ink canvas · cobalt single accent · i-dot lockup
   Space Grotesk display · Inter body · DM Mono · Inter italic editorial
   Lenis smooth scroll + scroll-velocity parallax + mask reveals
   Archive teal kept as secondary identity token for client status pills
   ────────────────────────────────────────────────────────────── */
:root {
  /* ─── fromanother canvas + ink ─────────────────────────────── */
  --fa-dark-blue:    #051236;            /* primary dark canvas */
  --fa-yellow:       #fffde2;            /* cream-yellow ink */
  --fa-blue:         #1740a9;            /* cobalt accent — CTAs, hover, links */

  --fa-dark-alt-1:   #182e2f;            /* desaturated teal-black variant */
  --fa-dark-alt-2:   #1a1d2e;            /* indigo-tinted dark variant */
  --fa-cool-pale:    #d2e4f4;            /* skeleton / loader bar */

  /* Yellow alphas (the universal ink scale) */
  --fa-yellow-80:    rgba(255,253,226,0.80);
  --fa-yellow-60:    rgba(255,253,226,0.60);
  --fa-yellow-40:    rgba(255,253,226,0.40);
  --fa-yellow-30:    rgba(255,253,226,0.30);
  --fa-yellow-20:    rgba(255,253,226,0.20);
  --fa-yellow-10:    rgba(255,253,226,0.10);
  --fa-yellow-06:    rgba(255,253,226,0.06);

  /* Ink alphas (for use on light) */
  --fa-ink-80:       rgba(5,18,54,0.80);
  --fa-ink-60:       rgba(5,18,54,0.60);
  --fa-ink-30:       rgba(5,18,54,0.30);
  --fa-ink-15:       rgba(5,18,54,0.15);

  /* Cobalt alphas */
  --fa-blue-tint:    rgba(23,64,169,0.18);
  --fa-blue-line:    rgba(23,64,169,0.35);

  /* Rare accent — used only sparingly for focus/error */
  --fa-warm-tint:    rgba(255,107,76,0.30);

  /* ─── Indexed-specific tokens (kept) ───────────────────────── */
  --in-status-teal:  #0E5454;          /* archive teal — client "open today" pills only */
  --in-danger:       #B3261E;
  --in-live:         #4ADE80;          /* status only, never UI brand */

  /* ─── Type families ────────────────────────────────────────── */
  --fa-display:      'Space Grotesk', system-ui, -apple-system, sans-serif;
  --fa-body:         'Inter', system-ui, -apple-system, sans-serif;
  --fa-editorial:    'Inter', system-ui, -apple-system, sans-serif;
  --fa-mono:         'DM Mono', ui-monospace, Menlo, monospace;
  --fa-khmer:        'Hanuman', 'Noto Serif Khmer', serif;

  /* ─── Letter-spacing (always negative on display) ──────────── */
  --fa-track-xxs:    -0.012rem;
  --fa-track-xs:     -0.018rem;
  --fa-track-s:      -0.024rem;
  --fa-track-m:      -0.032rem;
  --fa-track-l:      -0.042rem;
  --fa-track-xl:     -0.054rem;
  --fa-track-xxl:    -0.072rem;
  --fa-track-xxxl:   -0.096rem;
  --fa-track-display: -0.12rem;

  /* ─── Display sizes (rem, 1rem = 10px via html font-size: 62.5%) ── */
  --fa-h-1:          clamp(4rem, 7vw, 8rem);
  --fa-h-2:          clamp(2.8rem, 3.5vw, 4rem);
  --fa-h-3:          clamp(2.4rem, 3vw, 3.6rem);
  --fa-lead:         clamp(1.8rem, 2vw, 2.4rem);
  --fa-numeral:      clamp(8rem, 18vw, 24rem);   /* giant 01–07 section indices */
  --fa-body-size:    1.6rem;
  --fa-body-line:    1.5;
  --fa-eyebrow:      1.2rem;

  /* ─── Layout ───────────────────────────────────────────────── */
  --fa-padding-x:    clamp(1.6rem, 4vw, 4.8rem);
  --fa-gap-x:        clamp(1.6rem, 2.5vw, 3.2rem);
  --fa-columns:      14;
  --fa-section-pad:  clamp(6.4rem, 12vw, 11.4rem);
  --fa-max-w:        144rem;

  /* ─── Motion ───────────────────────────────────────────────── */
  --fa-ease-out-quart:   cubic-bezier(0.165, 0.84, 0.44, 1);
  --fa-ease-inout-cubic: cubic-bezier(0.65, 0, 0.35, 1);
  --fa-ease-inout-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --fa-ease-bounce:      cubic-bezier(0.4, 2.08, 0.55, 0.44);

  --fa-dur-fast:     200ms;
  --fa-dur-base:     400ms;
  --fa-dur-med:      800ms;
  --fa-dur-slow:     1200ms;
  --fa-dur-xslow:    1400ms;

  /* ─── Radii — almost nothing is rounded ────────────────────── */
  --fa-radius-0:     0;
  --fa-radius-pill:  999px;

  /* ─── JS-driven scroll properties (defaults; Step 10e overrides) ── */
  --scroll-velocity: 0;
  --scroll-progress: 0;

  /* ─── INDEXED brand tokens (WHITE — modern AI agency) ────
     The active token system. --in-* drives every selector.
     Pure white canvas + near-black ink + cobalt single accent. ─── */

  /* Canvas — white + subtle off-white variants */
  --in-canvas:       #FFFFFF;
  --in-canvas-warm:  #F7F4EE;       /* warm cream-tint — for the "offline" alt sections */
  --in-canvas-cool:  #F0F2F6;       /* cool gray-blue tint */
  --in-paper:        #FFFFFF;

  /* Ink — near-black */
  --in-ink:          #0A0A0A;
  --in-ink-mid:      rgba(10,10,10,0.62);
  --in-ink-muted:    rgba(10,10,10,0.46);
  --in-ink-faint:    rgba(10,10,10,0.28);

  /* Hairlines */
  --in-rule:         rgba(10,10,10,0.12);
  --in-rule-soft:    rgba(10,10,10,0.06);

  /* Accent — Cobalt (kept) */
  --in-accent:       var(--fa-blue);
  --in-accent-deep:  #0F2F87;
  --in-accent-soft:  #2658D6;
  --in-accent-tint:  rgba(23,64,169,0.10);
  --in-accent-line:  rgba(23,64,169,0.32);
  --in-accent-glow:  rgba(23,64,169,0.16);
  --in-accent-ink:   #FFFFFF;

  /* Card tokens (now on white) */
  --in-card:              #F7F4EE;
  --in-card-text:         #0A0A0A;
  --in-card-muted:        rgba(10,10,10,0.62);
  --in-card-faint:        rgba(10,10,10,0.40);
  --in-card-border:       rgba(10,10,10,0.10);
  --in-card-border-hover: rgba(10,10,10,0.24);

  /* Type families — Space Grotesk display, Inter body, DM Mono, Inter italic editorial */
  --in-font-display: var(--fa-display);
  --in-font-body:    var(--fa-body);
  --in-font-mono:    var(--fa-mono);
  --in-font-khmer:   var(--fa-khmer);

  /* Type scale — bigger, brutalist editorial */
  --in-h-hero:       clamp(40px, 7vw, 100px);
  --in-h-section:    clamp(32px, 4.2vw, 64px);
  --in-h-card:       clamp(18px, 2vw, 24px);
  --in-body:         15px;
  --in-body-lg:      17px;
  --in-eyebrow:      11px;

  /* Tracking — always negative on display (fromanother rule) */
  --in-track-display: -0.04em;
  --in-track-section: -0.03em;
  --in-track-body:    0.005em;
  --in-track-mono:    0.14em;
  --in-track-eyebrow: 0.18em;

  /* Line heights — tighter */
  --in-line-display: 0.95;
  --in-line-section: 1.02;
  --in-line-body:    1.55;

  /* Radii — zero (fromanother orthodoxy) */
  --in-radius-0:     0;
  --in-radius-card:  0;
  --in-radius-sm:    0;
  --in-radius-pill:  999px;

  /* Layout */
  --in-max-w:        1280px;
  --in-pad-x:        clamp(20px, 4vw, 80px);
  --in-pad-y-section: clamp(40px, 6vw, 90px);

  /* Motion — fromanother easings */
  --in-ease:         cubic-bezier(0.165, 0.84, 0.44, 1);
  --in-ease-card:    cubic-bezier(0.165, 0.84, 0.44, 1);
  --in-t-fast:       200ms;
  --in-t-med:        400ms;
  --in-t-slow:       800ms;
}

/* ─── Persistent film grain overlay ──────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.03;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

@media (prefers-reduced-motion: reduce) {
  body::after { opacity: 0.015; }
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--in-font-body);
  background: var(--in-canvas);
  color: var(--in-ink);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

/* ── Layout ────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--in-max-w);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 3.5rem);
}

section {
  padding: clamp(2.5rem, 5.5vw, 5rem) 0;
}

.section-label {
  display: inline-block;
  font-family: var(--in-font-mono);
  font-size: var(--in-eyebrow);
  font-weight: 400;
  letter-spacing: var(--in-track-eyebrow);
  text-transform: uppercase;
  color: var(--in-ink);
  margin-bottom: 1.5rem;
  padding: 0;
  background: none;
  border: none;
}

.section-heading {
  font-family: var(--in-font-body);
  font-size: var(--in-h-section);
  font-weight: 800;
  line-height: var(--in-line-section);
  letter-spacing: var(--in-track-section);
  color: var(--in-ink);
  margin-bottom: 1rem;
  max-width: 22ch;
}

.section-subtext {
  font-size: var(--in-body-lg);
  color: var(--in-ink-mid);
  max-width: 58ch;
  line-height: var(--in-line-body);
}

/* Kenji proof-anchor stat lines — evidence that appears below section content.
   Dark-on-light by default. Modifier --light flips for cobalt/dark sections. */
.section-stat {
  font-family: var(--in-font-mono);
  font-size: clamp(0.72rem, 1.1vw, 0.82rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--in-ink-muted);
  line-height: 1.6;
  max-width: 64ch;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-left: 1em;
  border-left: 2px solid var(--in-accent);
  opacity: 0.72;
}
.section-stat--light {
  color: rgba(255, 253, 226, 0.65);
  border-left-color: rgba(255, 253, 226, 0.4);
}
.faq-stats {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.faq-stats .section-stat {
  margin-top: 0;
}

/* ── Nav (dark-aware, fromanother pattern) ─────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: none;
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--in-rule);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
}

/* Mobile hamburger — hidden on desktop, shown via the 680px breakpoint.
   2-bar burger; flips to an X when [aria-expanded="true"]. */
.nav-burger {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  color: inherit;
}
.nav-burger span {
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  background: #ffffff;
  transition: transform var(--in-t-fast) var(--in-ease),
              top var(--in-t-fast) var(--in-ease),
              opacity var(--in-t-fast) var(--in-ease),
              background var(--in-t-fast) var(--in-ease);
}
/* Flip to ink once the nav locks against a light background. */
.nav.is-scrolled .nav-burger span { background: var(--in-ink); }
.nav-burger span:nth-child(1) { top: 13px; }
.nav-burger span:nth-child(2) { top: 21px; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { top: 17px; transform: rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { top: 17px; transform: rotate(-45deg); }

/* Mobile menu panel — slides down beneath the nav bar.
   Cream surface, ink type, full-width on small screens. */
.nav-mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fffde2;
  color: var(--in-ink);
  padding: 1.25rem clamp(1.25rem, 5vw, 2rem) 1.5rem;
  border-top: 1px solid rgba(10,10,10,0.08);
  box-shadow: 0 18px 32px rgba(10,10,10,0.12);
  flex-direction: column;
  gap: 0.25rem;
  z-index: 90;
}
.nav-mobile-menu[hidden] { display: none !important; }
.nav.is-mobile-open .nav-mobile-menu { display: flex; }

.nav-mobile-link {
  display: block;
  padding: 0.95rem 0.25rem;
  font-family: var(--in-font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--in-ink);
  border-bottom: 1px solid rgba(10,10,10,0.08);
  letter-spacing: -0.005em;
}
.nav-mobile-link:last-of-type { border-bottom: 0; }
.nav-mobile-link:hover { color: var(--in-accent); }
.nav-mobile-cta {
  margin-top: 0.85rem;
  width: 100%;
  padding: 0.9rem 1.2rem;
  font-size: 0.95rem;
}

/* Wordmark — i-dot lockup (brand book v1.0)
   Asterisk fills with locked cobalt inside the SVG; text inherits currentColor
   so the nav flip (cream on hero → ink on scroll) still works. */
.nav-logo {
  display: inline-flex;
  align-items: center;
  color: #fffde2;                /* default: cream on dark hero */
  line-height: 1;
  transition: color var(--in-t-fast) var(--in-ease);
}
.nav.is-scrolled .nav-logo { color: var(--in-ink); }

.nav-logo-svg {
  display: block;
  height: 22px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-link {
  font-family: var(--in-font-mono);
  font-size: var(--in-eyebrow);
  letter-spacing: var(--in-track-eyebrow);
  text-transform: uppercase;
  color: #fffde2;                /* default: cream on dark hero */
  position: relative;
  padding-bottom: 4px;
  transition: color var(--in-t-fast) var(--in-ease),
              opacity var(--in-t-fast) var(--in-ease);
}
.nav.is-scrolled .nav-link { color: var(--in-ink); }
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--in-t-med) var(--in-ease);
}
.nav-link:hover::after { transform: scaleX(1); }
.nav-link:hover { opacity: 0.8; }

/* Nav primary CTA — overrides mix-blend so the cobalt fills correctly */
/* ── Language toggle (EN | ខ្មែរ) ───────────────────────────── */
/* Cream-yellow pill with two segments. The selected segment is a
   cobalt circle with white text; the other segment sits flat on cream. */
.lang-toggle {
  background: #fffde2;
  border: 1px solid #fffde2;
  color: #0A0A0A;
  font-family: var(--in-font-mono);
  font-size: 0.49rem;            /* was 0.7rem — reduced 30% */
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 4px 6px;
  margin: 0 0.5rem 0 0.25rem;
  cursor: pointer;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0;
  line-height: 1;
  transition: background var(--in-t-fast) var(--in-ease),
              border-color var(--in-t-fast) var(--in-ease);
}
.lang-toggle:hover { filter: brightness(0.97); }
.lang-toggle .lang-sep { display: none; }
.lang-toggle .lang-en,
.lang-toggle .lang-kh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: #0A0A0A;
  background: transparent;
  transition: background var(--in-t-fast) var(--in-ease),
              color var(--in-t-fast) var(--in-ease);
}
:root[data-lang="en"] .lang-toggle .lang-en,
:root[data-lang="kh"] .lang-toggle .lang-kh {
  background: var(--in-accent);
  color: #ffffff;
}
.lang-toggle .lang-kh {
  font-family: 'Hanuman', 'Noto Sans Khmer', sans-serif;
  font-size: 0.67rem;            /* was 0.95rem — reduced 30% */
  font-weight: 400;
  letter-spacing: 0;
}

/* When Khmer is active, body text family swaps for any element marked
   with data-en/data-kh. We swap via :root[data-lang] selector + ::before swap. */
:root[data-lang="kh"] [data-kh] { font-family: 'Hanuman', 'Noto Sans Khmer', var(--in-font-body); }
:root[data-lang="kh"] .fa-section-h1[data-h1-kh],
:root[data-lang="kh"] .cd-h1[data-h1-kh],
:root[data-lang="kh"] .cd-cta-h1[data-h1-kh] {
  font-family: 'Hanuman', 'Noto Sans Khmer', var(--in-font-display);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
}

.nav .btn-primary {
  mix-blend-mode: normal;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--in-radius-sm);
  font-family: var(--in-font-body);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background var(--in-t-fast) var(--in-ease),
              color var(--in-t-fast) var(--in-ease),
              border-color var(--in-t-fast) var(--in-ease);
  border: 1px solid transparent;
  white-space: nowrap;
}

.btn-primary {
  background: var(--in-accent);
  color: var(--in-accent-ink);
  border-color: var(--in-accent);
}
.btn-primary:hover {
  background: var(--in-accent-deep);
  border-color: var(--in-accent-deep);
}

.btn-ghost {
  background: transparent;
  color: var(--in-ink);
  border-color: var(--in-ink);
}
.btn-ghost:hover {
  background: var(--in-ink);
  color: var(--in-canvas);
}

/* Cream-on-cobalt secondary — pairs with .btn-primary on the nav.
   Same font + size as .btn-primary; inverted colour so the two read
   as a connected pair. */
.btn-cream {
  background: #fffde2;
  color: var(--in-accent);
  border-color: #fffde2;
}
.btn-cream:hover {
  background: #ffffff;
  border-color: #ffffff;
}
/* Tighten the spacing between the cream secondary and the cobalt primary
   so they read as one pinned button-pair on the nav, separate from the
   text links to their left. */
.nav-links .btn-cream + .btn-primary { margin-left: -1.5rem; }

.btn-lg {
  padding: 1rem 2.1rem;
  font-size: 0.95rem;
}

.btn-full { width: 100%; justify-content: center; }

/* Hero film: a frame-accurate scroll scrub over the founder-film stills. */
.hero-film {
  --film-progress: 0;
  height: 550svh;
  min-height: 3200px;
  padding: 0;
  position: relative;
  background: #02050d;
  color: #fffde2;
}
.hero-film-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  background: #02050d;
}
.hero-film-video,
.hero-film-canvas,
.hero-film-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.hero-film-video,
.hero-film-canvas { opacity: 0; transition: opacity 300ms ease; }
.hero-film.is-ready .hero-film-video,
.hero-film.is-ready .hero-film-canvas { opacity: 1; }
.hero-film.is-ready .hero-film-fallback { opacity: 0; }
.hero-film-fallback { transition: opacity 500ms ease; }
.hero-film-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 5, 13, 0.72) 0%, rgba(2, 5, 13, 0.18) 45%, rgba(2, 5, 13, 0.08) 72%, rgba(2, 5, 13, 0.28) 100%),
    linear-gradient(0deg, rgba(2, 5, 13, 0.74) 0%, transparent 42%, rgba(2, 5, 13, 0.30) 100%);
}
.hero-film-brand {
  position: absolute;
  z-index: 3;
  top: clamp(92px, 12vh, 124px);
  left: var(--in-pad-x);
  width: clamp(136px, 12vw, 188px);
  color: #fffde2;
  opacity: 0.96;
}
.hero-film-brand svg { width: 100%; height: auto; }
.hero-film-chapters { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hero-film-chapter {
  position: absolute;
  left: var(--in-pad-x);
  bottom: clamp(116px, 15vh, 168px);
  width: min(650px, calc(100vw - (2 * var(--in-pad-x))));
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 260ms linear, transform 520ms var(--in-ease);
  will-change: opacity, transform;
}
.hero-film-chapter.is-active { opacity: 1; transform: translate3d(0, 0, 0); }
.hero-film-chapter--center {
  left: 50%;
  bottom: clamp(104px, 14vh, 154px);
  text-align: center;
  transform: translate3d(-50%, 24px, 0);
}
.hero-film-chapter--center.is-active { transform: translate3d(-50%, 0, 0); }
.hero-film-chapter--right { left: auto; right: var(--in-pad-x); width: min(600px, calc(100vw - (2 * var(--in-pad-x)))); }
.hero-film-chapter--final { bottom: clamp(104px, 13vh, 144px); pointer-events: none; }
.hero-film-chapter--final.is-active { pointer-events: auto; }
.hero-film-chapter--conversion {
  left: 50%;
  top: 53%;
  bottom: auto;
  width: min(920px, calc(100vw - (2 * var(--in-pad-x))));
  text-align: center;
  transform: translate3d(-50%, calc(-50% + 24px), 0);
}
.hero-film-chapter--conversion.is-active { transform: translate3d(-50%, -50%, 0); }
.hero-film-chapter--conversion::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -18vh -10vw;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(2,5,13,0.76) 0%, rgba(2,5,13,0.42) 42%, transparent 72%);
}
.hero-film-chapter.hero-film-chapter--conversion h2 {
  max-width: 11ch;
  margin-inline: auto;
  font-size: clamp(58px, 7.8vw, 118px);
  line-height: 0.9;
}
.hero-film-chapter.hero-film-chapter--conversion > p {
  max-width: 38ch;
  margin: clamp(18px, 2.5vh, 26px) auto 0;
  font-size: clamp(16px, 1.3vw, 20px);
  color: rgba(255,253,226,0.82);
}
.hero-conversion-form {
  width: min(760px, 100%);
  margin: clamp(24px, 4vh, 38px) auto 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.hero-conversion-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 7px;
  border: 1px solid rgba(255,253,226,0.78);
  background: rgba(2,5,13,0.72);
  box-shadow: 0 22px 60px rgba(0,0,0,0.32);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.hero-conversion-control input {
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0 20px;
  background: transparent;
  font-family: var(--in-font-body);
  font-size: clamp(16px, 1.3vw, 20px);
  color: #fffde2;
}
.hero-conversion-control input::placeholder { color: rgba(255,253,226,0.5); }
.hero-conversion-control input:focus { box-shadow: inset 0 -1px 0 #fffde2; }
.hero-conversion-control .btn {
  min-height: 58px;
  padding-inline: clamp(24px, 3vw, 42px);
  font-size: clamp(14px, 1.1vw, 17px);
}
.hero-conversion-note {
  display: block;
  margin-top: 12px;
  font-family: var(--in-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,253,226,0.58);
}
.hero-film-kicker {
  display: block;
  margin-bottom: clamp(14px, 2vh, 22px);
  font-family: var(--in-font-mono);
  font-size: clamp(10px, 0.8vw, 12px);
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 253, 226, 0.65);
}
.hero-film-chapter h1,
.hero-film-chapter h2 {
  max-width: 12ch;
  margin: 0;
  font-family: var(--in-font-display);
  font-size: clamp(42px, 5.4vw, 86px);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.052em;
  text-wrap: balance;
  color: #fffde2;
}
.hero-film-chapter--center h2 { max-width: none; }
.hero-film-chapter--right h2 { max-width: 11ch; }
.hero-film-chapter > p {
  max-width: 43ch;
  margin: clamp(16px, 2.5vh, 24px) 0 0;
  font-family: var(--in-font-body);
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.55;
  letter-spacing: 0.005em;
  color: rgba(255, 253, 226, 0.72);
}
.hero-film-chapter--center > p { margin-left: auto; margin-right: auto; }
.hero-film-ellipsis {
  display: inline-block;
  width: 0.9em;
  overflow: hidden;
  vertical-align: bottom;
  animation: filmEllipsis 1.4s steps(4, end) infinite;
}
@keyframes filmEllipsis { from { width: 0; } to { width: 0.9em; } }
.hero-film-signals { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: clamp(20px, 3vh, 30px) 0 0; padding: 0; }
.hero-film-signals li {
  padding: 8px 11px;
  border: 1px solid rgba(255, 253, 226, 0.24);
  background: rgba(2, 5, 13, 0.20);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: var(--in-font-mono);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 253, 226, 0.82);
}
.hero-film-price { display: flex; align-items: baseline; gap: 12px; font-family: var(--in-font-display); line-height: 0.8; color: #fffde2; }
.hero-film-price span { font-size: clamp(88px, 13vw, 188px); font-weight: 500; letter-spacing: -0.075em; }
.hero-film-price small {
  font-family: var(--in-font-mono);
  font-size: clamp(12px, 1.2vw, 16px);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 253, 226, 0.72);
}
.hero-film-includes { font-family: var(--in-font-mono) !important; font-size: 11px !important; letter-spacing: 0.08em !important; text-transform: uppercase; }
.hero-film-includes i { padding: 0 7px; font-style: normal; color: #5f7fff; }
.hero-film-actions { display: flex; align-items: center; gap: 22px; margin-top: 26px; }
.hero-film-link {
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 253, 226, 0.4);
  font-family: var(--in-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fffde2;
}
.hero-film-link:hover { border-color: #fffde2; }
.hero-film-progress {
  position: absolute;
  z-index: 4;
  left: var(--in-pad-x);
  right: var(--in-pad-x);
  bottom: clamp(26px, 4vh, 44px);
  display: grid;
  grid-template-columns: auto minmax(80px, 240px) auto;
  align-items: center;
  gap: 14px;
  font-family: var(--in-font-mono);
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 253, 226, 0.58);
}
.hero-film-progress-track { display: block; height: 1px; overflow: hidden; background: rgba(255, 253, 226, 0.24); }
.hero-film-progress-track i { display: block; width: 100%; height: 100%; background: #fffde2; transform: scaleX(var(--film-progress)); transform-origin: left center; }
.hero-film-progress-count b { font-weight: 400; color: #fffde2; }

@media (max-width: 760px) {
  .hero-film { height: 500svh; min-height: 3000px; }
  .hero-film-sticky { min-height: 560px; }
  .hero-film-brand { top: 86px; width: 124px; }
  .hero-film-scrim { background: linear-gradient(0deg, rgba(2, 5, 13, 0.88) 0%, rgba(2, 5, 13, 0.24) 56%, rgba(2, 5, 13, 0.38) 100%); }
  .hero-film-chapter,
  .hero-film-chapter--center,
  .hero-film-chapter--right {
    left: var(--in-pad-x);
    right: auto;
    bottom: 104px;
    width: calc(100vw - (2 * var(--in-pad-x)));
    text-align: left;
    transform: translate3d(0, 20px, 0);
  }
  .hero-film-chapter.is-active,
  .hero-film-chapter--center.is-active { transform: translate3d(0, 0, 0); }
  .hero-film-chapter h1, .hero-film-chapter h2 { font-size: clamp(38px, 11vw, 58px); max-width: 12ch; }
  .hero-film-chapter--center > p { margin-left: 0; margin-right: 0; }
  .hero-film-chapter--final { bottom: 94px; }
  .hero-film-chapter--conversion,
  .hero-film-chapter--conversion.is-active {
    left: var(--in-pad-x);
    top: 52%;
    right: auto;
    bottom: auto;
    width: calc(100vw - (2 * var(--in-pad-x)));
    text-align: center;
    transform: translate3d(0, -50%, 0);
  }
  .hero-film-chapter.hero-film-chapter--conversion h2 { max-width: 10ch; margin-inline: auto; font-size: clamp(48px, 13vw, 72px); }
  .hero-film-chapter.hero-film-chapter--conversion > p { margin-inline: auto; font-size: 15px; }
  .hero-conversion-control { grid-template-columns: 1fr; gap: 7px; }
  .hero-conversion-control input { min-height: 54px; padding: 0 14px; text-align: center; }
  .hero-conversion-control .btn { width: 100%; }
  .hero-film-price { gap: 9px; }
  .hero-film-price span { font-size: clamp(82px, 25vw, 122px); }
  .hero-film-includes { max-width: 30ch !important; line-height: 1.7 !important; }
  .hero-film-includes i { padding: 0 3px; }
  .hero-film-actions { gap: 16px; margin-top: 20px; }
  .hero-film-actions .btn { padding: 0.8rem 1.2rem; }
  .hero-film-progress { grid-template-columns: minmax(80px, 1fr) auto; bottom: 24px; }
  .hero-film-progress-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-film-video,
  .hero-film-canvas,
  .hero-film-fallback,
  .hero-film-chapter { transition: none; }
  .hero-film-ellipsis { width: auto; animation: none; }
}

/* ── Hero (full-bleed video) ───────────────────────────────── */
.hero {
  min-height: 92vh;
  padding: clamp(10rem, 16vw, 16rem) 0 clamp(6rem, 10vw, 10rem);
  border-bottom: 1px solid var(--in-rule);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-video {
  min-height: 56vh;
  padding: 0;
  border-bottom: none;
}
.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  background: #0A0A0A;
}
.hero-video-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.25) 0%,
    rgba(10, 10, 10, 0.10) 35%,
    rgba(10, 10, 10, 0.45) 100%
  );
  z-index: 1;
  pointer-events: none;
}
.hero-video-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: 56vh;
  padding-bottom: clamp(2rem, 4vw, 4rem);
  color: #fffde2;
}
.hero-video .hero-tagline { color: #fffde2; }
.hero-video-eyebrow {
  font-family: var(--in-font-display);
  font-size: clamp(1.6rem, 3.4vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #fffde2;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  max-width: 22ch;
  text-shadow: 0 2px 24px rgba(10, 10, 10, 0.40);
}
.hero-video-sub {
  font-family: var(--in-font-sans);
  font-size: clamp(0.9rem, 1.6vw, 1.1rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.5;
  color: rgba(255, 253, 226, 0.82);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 36ch;
  text-shadow: 0 1px 12px rgba(10, 10, 10, 0.35);
}
.hero-video-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.hero-video-cta .btn-primary {
  font-size: 1rem;
  padding: 1rem 2.25rem;
}
.hero-video-cta .btn-ghost {
  font-size: 1rem;
  padding: 1rem 2.25rem;
  color: #fffde2;
  border-color: rgba(255, 253, 226, 0.55);
}
.hero-video-cta .btn-ghost:hover {
  background: rgba(255, 253, 226, 0.15);
  border-color: #fffde2;
}

/* When poster + video both fail, give the user something */
.hero-video::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0A0A0A 0%, #1740a9 100%);
  z-index: -1;
}

.hero-eyebrow {
  display: inline-block;
  font-family: var(--in-font-mono);
  font-size: var(--in-eyebrow);
  font-weight: 400;
  letter-spacing: var(--in-track-eyebrow);
  color: var(--in-ink-muted);
  text-transform: uppercase;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.hero-tagline {
  font-family: var(--in-font-display);
  font-size: clamp(3.2rem, 8vw, 9rem);
  font-weight: 500;
  font-style: normal;
  line-height: 0.95;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: var(--in-ink);
  margin-bottom: clamp(3rem, 6vw, 5rem);
  max-width: 18ch;
}

/* Hero wordmark — inline SVG i-dot lockup (brand book v1.0).
   Sized off the parent .hero-tagline font-size so it scales identically
   to the old text node; text fill inherits via currentColor.
   `text-transform: none` overrides the parent's uppercase rule — the
   brand-locked lockup is lowercase. */
.hero-tagline .hero-wordmark {
  display: block;
  width: clamp(24rem, 56vw, 64rem);
  height: auto;
  text-transform: none;
}
.hero-tagline .hero-wordmark text {
  text-transform: none;
}

.hero-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--in-rule);
}

.hero-meta {
  font-family: var(--in-font-mono);
  font-size: var(--in-eyebrow);
  letter-spacing: var(--in-track-eyebrow);
  text-transform: uppercase;
  color: var(--in-ink-muted);
}

.scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  width: 1px;
  height: clamp(28px, 4vw, 48px);
  background: linear-gradient(to bottom, transparent, var(--in-ink-faint));
}

/* ── Word-slot rotator (pure CSS, replaced by JS in Step 10e) ── */
.slot {
  display: inline-block;
  overflow: hidden;
  height: 1em;
  vertical-align: bottom;
  position: relative;
  color: var(--in-accent);
}
.slot .stack {
  display: flex;
  flex-direction: column;
  line-height: 1;
  animation: rotateWords 10s var(--fa-ease-inout-quart) infinite;
}
.slot .stack > span {
  display: block;
  height: 1em;
  white-space: nowrap;
}

@keyframes rotateWords {
  0%,   18%  { transform: translateY(0); }
  22%,  43%  { transform: translateY(-1em); }
  47%,  68%  { transform: translateY(-2em); }
  72%,  93%  { transform: translateY(-3em); }
  97%, 100%  { transform: translateY(-4em); }
}

@media (prefers-reduced-motion: reduce) {
  .slot .stack { animation: none; }
}

/* ── fromanother flow patterns ────────────────────────────────
   Shared scaffold for the 7 numbered sections (01–07) + footer (08)
   Section numerals (24rem) refined further in Step 10d.
   ────────────────────────────────────────────────────────────── */
.fa-section {
  position: relative;
  padding: var(--in-pad-y-section) 0;
  border-top: 1px solid var(--in-rule);
  transition: background var(--in-t-med) var(--in-ease);
}
.fa-section.bg-alt,
.fa-section.bg-alt-1 {
  background: var(--in-canvas-warm);   /* #F7F4EE — warm cream-tint */
}
.fa-section.bg-alt-2 {
  background: var(--in-canvas-cool);   /* #F0F2F6 — cool gray-blue */
}
.fa-section-inner {
  position: relative;
}

/* Asymmetric pattern: meta floats top-right, numeral huge top-left,
   h1 anchors below the numeral. Body content cascades below. */
.fa-section-meta {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  font-family: var(--in-font-mono);
  font-size: var(--in-eyebrow);
  font-weight: 400;
  letter-spacing: var(--in-track-eyebrow);
  text-transform: uppercase;
  color: var(--in-ink-muted);
}
.fa-section-meta span:first-child {
  color: var(--in-ink);
}

.fa-section-numeral {
  font-family: var(--in-font-display);
  font-size: var(--fa-numeral);              /* clamp(8rem, 18vw, 24rem) */
  font-weight: 400;
  letter-spacing: var(--fa-track-display);   /* -0.12rem */
  color: var(--in-ink);
  line-height: 0.85;
  margin: 0 0 clamp(2rem, 4vw, 4rem);
  user-select: none;
  opacity: 0.92;
}

.fa-section-h1 {
  font-family: var(--in-font-display);
  font-size: clamp(2.8rem, 5.5vw, 5.5rem);
  font-weight: 500;
  font-style: normal;
  text-transform: uppercase;
  line-height: 1.0;
  letter-spacing: -0.04em;
  color: var(--in-ink);
  margin: 0 0 clamp(3rem, 6vw, 5rem);
  max-width: 16ch;
}
.fa-section-h1 .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  margin-right: 0.18em;
}
.fa-section-h1 .word > span {
  display: inline-block;
  /* Step 10e turns these into mask-reveal-driven items via clip-path */
}

/* ── 01 About ───────────────────────────────────────────────── */
.fa-about-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.fa-about-copy p {
  font-family: var(--in-font-body);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--in-ink-mid);
  line-height: var(--in-line-body);
  margin-bottom: 1.25rem;
  max-width: 56ch;
}

.fa-about-editorial {
  font-family: var(--in-font-body);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.3;
  color: var(--in-ink);
  padding-left: clamp(1rem, 2vw, 1.5rem);
  border-left: 1px solid var(--in-rule);
  max-width: 38ch;
}

/* ── 02 What we do ──────────────────────────────────────────── */
.fa-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.fa-service-num {
  font-family: var(--in-font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--in-accent);
  margin-bottom: 1.25rem;
}

.fa-service h3 {
  font-family: var(--in-font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--in-ink);
  margin-bottom: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--in-rule);
}

.fa-service p {
  font-family: var(--in-font-body);
  font-size: 0.95rem;
  color: var(--in-ink-mid);
  line-height: var(--in-line-body);
  max-width: 36ch;
}

/* ── Custom Deployment subpage ─────────────────────────────── */
.nav--inner { background: var(--in-canvas); }
.nav-link--active { color: var(--in-accent) !important; }
.nav-link--quiet {
  /* Client-login link in nav — visible but doesn't compete with the
     primary "Get Indexed" CTA for first-time-visitor attention. */
  opacity: 0.7;
  font-family: var(--in-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.nav-link--quiet:hover { opacity: 1; }
@media (max-width: 720px) { .nav-link--quiet { display: none; } }
.fa-footer-bottom a { color: inherit; opacity: 0.7; transition: opacity .2s; }
.fa-footer-bottom a:hover { opacity: 1; }

.cd-header { padding-top: clamp(8rem, 14vw, 12rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.cd-h1 { margin-bottom: 1.5rem; }
.cd-lede {
  font-family: var(--in-font-body);
  font-size: var(--in-body-lg);
  color: var(--in-ink-mid);
  line-height: var(--in-line-body);
  max-width: 64ch;
  margin: 0;
}

.cd-case { padding: clamp(2rem, 4vw, 3rem) 0; }
.cd-case-grid {
  display: grid;
  grid-template-columns: 0.95fr 1fr;
  gap: clamp(3rem, 6vw, 5rem);
  align-items: start;
}
.cd-case-grid--reverse .cd-case-meta { order: 2; }
.cd-case-grid--reverse .cd-case-body { order: 1; }

.cd-numeral {
  font-size: clamp(5rem, 9vw, 9rem) !important;
  line-height: 0.85 !important;
  margin: 0.75rem 0 1rem !important;
}
.cd-case-h2 {
  font-family: var(--in-font-display);
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--in-ink);
  margin: 0;
  max-width: 22ch;
}

.cd-case-body p {
  font-family: var(--in-font-body);
  font-size: var(--in-body);
  color: var(--in-ink-mid);
  line-height: var(--in-line-body);
  margin: 0 0 1.25rem;
  max-width: 50ch;
}
.cd-case-tag {
  font-family: var(--in-font-mono) !important;
  font-size: var(--in-eyebrow) !important;
  letter-spacing: var(--in-track-eyebrow);
  text-transform: uppercase;
  color: var(--in-ink-muted) !important;
  margin-bottom: 1.25rem !important;
}
.cd-case-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  display: flex;
  flex-direction: column;
}
.cd-case-list li {
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--in-rule);
  font-family: var(--in-font-body);
  font-size: 0.95rem;
  color: var(--in-ink);
  line-height: 1.55;
}
.cd-case-list li:first-child { border-top: 1px solid var(--in-rule); }

.cd-case-link {
  font-family: var(--in-font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--in-accent);
  border-bottom: 1px solid var(--in-accent-line);
  padding-bottom: 3px;
  transition: color var(--in-t-fast) var(--in-ease),
              border-color var(--in-t-fast) var(--in-ease);
}
.cd-case-link:hover { color: var(--in-accent-deep); border-bottom-color: var(--in-accent); }

@media (max-width: 900px) {
  .cd-case-grid { grid-template-columns: 1fr; gap: 2rem; }
  .cd-case-grid--reverse .cd-case-meta { order: 0; }
  .cd-case-grid--reverse .cd-case-body { order: 0; }
}

.cd-cta { background: var(--in-canvas-warm); padding: clamp(2.5rem, 5vw, 4rem) 0; }
.cd-cta-h1 { margin-bottom: 1.5rem; }
.cd-cta-body {
  font-family: var(--in-font-body);
  font-size: var(--in-body-lg);
  color: var(--in-ink-mid);
  line-height: var(--in-line-body);
  max-width: 56ch;
  margin: 0 0 2rem;
}
.cd-cta-actions { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.cd-tg {
  font-family: var(--in-font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--in-accent);
  border-bottom: 1px solid var(--in-accent-line);
  padding-bottom: 3px;
}
.cd-tg:hover { color: var(--in-accent-deep); border-bottom-color: var(--in-accent); }

.cd-footer-italic {
  font-family: var(--in-font-italic);
  font-style: italic;
  font-weight: 600;
  color: var(--in-accent);
}

/* Han AI inline link — italic accent inside running body copy */
.cd-hanai-link {
  font-family: var(--in-font-body);
  font-style: italic;
  font-weight: 600;
  color: var(--in-accent);
  letter-spacing: -0.005em;
  border-bottom: 1px solid var(--in-accent-line);
  padding-bottom: 1px;
  transition: color var(--in-t-fast) var(--in-ease),
              border-color var(--in-t-fast) var(--in-ease);
}
.cd-hanai-link:hover {
  color: var(--in-accent-deep);
  border-bottom-color: var(--in-accent);
}

/* ── Interactive cobalt-blue texture (section 04) ──────────── */
/* Dreamy diffused background: 3 soft blobs (light, mid, deep cobalt)
   + film grain + corner light-leak. Scroll velocity drifts each blob;
   the existing rAF loop in script writes --scroll-velocity which
   decays naturally after scroll stops, giving the inertia feel. */
.has-blue-texture {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, #1f4ea3 0%, #1740a9 55%, #102f7b 100%);
}
.has-blue-texture > .container { position: relative; z-index: 3; }

.blue-texture {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.85;
  will-change: transform;
  /* JS writes --blob-x and --blob-y as px values directly. CSS just consumes. */
  transform: translate3d(var(--blob-x, 0px), var(--blob-y, 0px), 0);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.blob-1 {
  width: 60%;
  aspect-ratio: 1;
  top: -22%;
  left: -10%;
  background: radial-gradient(circle, #cfe0ff 0%, rgba(207, 224, 255, 0) 65%);
  --vx: -3;
  --vy: 1.5;
}

.blob-2 {
  width: 55%;
  aspect-ratio: 1;
  top: 18%;
  right: -18%;
  background: radial-gradient(circle, #5a8ddf 0%, rgba(90, 141, 223, 0) 70%);
  --vx: 2.2;
  --vy: -1.4;
}

.blob-3 {
  width: 70%;
  aspect-ratio: 1;
  bottom: -28%;
  left: 18%;
  background: radial-gradient(circle, #0d2e7a 0%, rgba(13, 46, 122, 0) 70%);
  --vx: -1.4;
  --vy: 1.8;
  opacity: 0.95;
}

/* Soft corner light-leak — pale blue catching the top-right */
.blue-leak {
  position: absolute;
  top: -20%;
  right: -20%;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(225, 238, 255, 0.55) 0%, rgba(225, 238, 255, 0) 60%);
  filter: blur(40px);
  mix-blend-mode: screen;
}

/* Film grain overlay — fractal noise tiled across the section */
.blue-grain {
  position: absolute;
  inset: -10%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  opacity: 0.45;
  mix-blend-mode: overlay;
  z-index: 2;
  pointer-events: none;
}

/* Text color overrides — white type on the blue background */
.has-blue-texture .fa-section-meta span,
.has-blue-texture .fa-section-meta span:first-child,
.has-blue-texture .fa-section-numeral,
.has-blue-texture .fa-section-h1 {
  color: #ffffff;
}
.has-blue-texture .fa-section-numeral { opacity: 0.94; }

/* Pricing card stays a calm island on the blue */
.has-blue-texture .pricing-card {
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 30px 60px -20px rgba(8, 24, 64, 0.45),
    0 6px 18px -6px rgba(8, 24, 64, 0.2);
}

@media (prefers-reduced-motion: reduce) {
  .blob { transition: none; transform: none; }
}

/* ── 02 Fan-scrubber (10 cards in a gentle full-width arc) ──── */
/* Cards span edge to edge across the section, fanning in a soft arc.
   As the user scrolls, one card becomes "active": scales up, brightens.
   The others recede so the overlaid headline stays legible. */
.has-fan { position: relative; overflow: hidden; isolation: isolate; }
.has-fan > .container { position: relative; z-index: 2; }
.fan-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
}
.fan-card {
  position: absolute;
  top: 50%;
  width: clamp(130px, 15vw, 200px);
  aspect-ratio: 2 / 3;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 18px 40px -16px rgba(10, 10, 10, 0.18),
    0 4px 10px -4px rgba(10, 10, 10, 0.08);
  background: var(--in-canvas-warm, #f6f1e8);
  /* JS sets inline transform + opacity + zIndex per scroll tick.
     Pre-JS fallback: spread across the section in a flat arc. */
  left: calc(5% + var(--i, 0) * 10%);
  transform: translate(-50%, -50%) rotate(0deg) scale(0.92);
  transform-origin: 50% 50%;
  opacity: 0.4;
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.fan-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .fan-card { transition: none; }
}
@media (max-width: 720px) {
  /* Narrower cards + tighter arc so the spread fits the viewport */
  .fan-card { width: clamp(80px, 18vw, 120px); }
  .fan-stage { opacity: 0.825; }   /* +50% from 0.55 */
}

/* ── 04 Where AI asks ───────────────────────────────────────── */
.has-matrix { position: relative; overflow: hidden; isolation: isolate; }
.has-matrix > .container { position: relative; z-index: 2; }
.matrix-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.22;
}
@media (prefers-reduced-motion: reduce) { .matrix-bg { display: none; } }

.fa-platforms-intro {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  max-width: 50ch;
}
.fa-platforms {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--in-rule);
  border-left: 1px solid var(--in-rule);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.fa-platform {
  font-family: var(--in-font-display);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--in-ink);
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.5rem);
  border-right: 1px solid var(--in-rule);
  border-bottom: 1px solid var(--in-rule);
  text-align: left;
  cursor: default;
  transition: background 350ms var(--in-ease),
              color 350ms var(--in-ease);
}

/* Spotlight cycle — JS adds .is-spotlight to one tile every 1.4s.
   When the platform grid is hovered, JS pauses the cycle and the
   :hover rule below pins whichever tile the cursor is over. */
.fa-platform.is-spotlight,
.fa-platforms:hover .fa-platform:hover {
  background: var(--in-accent);  /* brand cobalt */
  color: #ffffff;
}

/* While hovering the grid, drop the auto-spotlight so only the hovered
   tile is dark (no double-active state). */
.fa-platforms:hover .fa-platform.is-spotlight:not(:hover) {
  background: transparent;
  color: var(--in-ink);
}

@media (prefers-reduced-motion: reduce) {
  .fa-platform.is-spotlight { background: transparent; color: var(--in-ink); }
}

@media (max-width: 900px) {
  .fa-platforms { grid-template-columns: repeat(2, 1fr); }
}

/* ── Two-segment link underline (fromanother signature) ─────── */
.fa-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--in-font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--in-ink);
  padding-bottom: 4px;
}
.fa-link::before,
.fa-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 1px;
  background: var(--in-ink);
  transition: transform var(--in-t-med) var(--in-ease);
}
.fa-link::before { left: 0; right: 50%; transform-origin: right center; }
.fa-link::after  { left: 50%; right: 0; transform-origin: left center; }
.fa-link:hover::before { transform: scaleX(0.4); }
.fa-link:hover::after  { transform: scaleX(0.4); }

/* ── Lead H1 with rotator alignment ─────────────────────────── */
.fa-section-h1-lead {
  max-width: 28ch;
}

/* ── 07 Footer (DARK — fromanother contrast moment) ──────────── */
.fa-footer {
  background: #0A0A0A;
  color: #fffde2;
  border-top: 1px solid #0A0A0A;
  padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
  position: relative;
  overflow: hidden;
}
/* Soft cobalt glow blob — fromanother editorial decoration */
.fa-footer::before {
  content: '';
  position: absolute;
  bottom: -20%;
  left: 30%;
  width: 60%;
  height: 80%;
  background: radial-gradient(circle, rgba(23,64,169,0.28), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.fa-footer .fa-section-inner { position: relative; z-index: 1; }

.fa-footer .fa-section-meta,
.fa-footer .fa-section-meta span {
  color: rgba(255,253,226,0.50);
}
.fa-footer .fa-section-meta span:first-child {
  color: #fffde2;
}

.fa-footer .fa-section-numeral {
  color: #fffde2;
  opacity: 0.94;
}

.fa-footer-line {
  font-family: var(--in-font-display);
  font-size: clamp(3rem, 7vw, 6.4rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: #fffde2;
  margin-bottom: clamp(4rem, 8vw, 6rem);
  max-width: 14ch;
}

/* Italic rotator word */
.fa-footer-line .slot {
  font-family: var(--in-font-body);
  font-style: italic;
  font-weight: 500;
  color: #fffde2;
}
.fa-footer-line .slot .stack {
  color: #fffde2;
}

.fa-offices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.fa-office {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
}

.fa-office-lbl {
  font-family: var(--in-font-mono);
  font-size: var(--in-eyebrow);
  letter-spacing: var(--in-track-eyebrow);
  text-transform: uppercase;
  color: rgba(255,253,226,0.55);
  margin-bottom: 0.5rem;
}

.fa-office-city {
  font-family: var(--in-font-display);
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fffde2;
}

.fa-office-addr {
  font-family: var(--in-font-body);
  font-size: 0.9rem;
  color: rgba(255,253,226,0.62);
  line-height: 1.55;
  margin-top: 0.25rem;
}

.fa-office-phone {
  font-family: var(--in-font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: rgba(255,253,226,0.62);
  margin-top: 0.5rem;
}

/* fa-link override for dark footer */
.fa-footer .fa-link {
  color: #fffde2;
  margin-top: 0.6rem;
}
.fa-footer .fa-link::before,
.fa-footer .fa-link::after { background: #fffde2; }

/* Live analog clock — circular, cream-yellow stroke on dark */
.fa-clock {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(255,253,226,0.45);
  margin: 0.5rem 0 0.75rem;
}
.fa-clock-h,
.fa-clock-m {
  position: absolute;
  left: 50%;
  bottom: 50%;
  background: #fffde2;
  transform-origin: bottom center;
  border-radius: 1px;
}
.fa-clock-h {
  width: 2px;
  height: 14px;
  margin-left: -1px;
  transform: rotate(0deg);
}
.fa-clock-m {
  width: 1px;
  height: 22px;
  margin-left: -0.5px;
  transform: rotate(0deg);
}
.fa-clock-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--in-accent);
  transform: translate(-50%, -50%);
}

.fa-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid rgba(255,253,226,0.18);
  font-family: var(--in-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,253,226,0.50);
}

/* Social handles — Instagram / Facebook / TikTok, all @beindexed */
.fa-social {
  display: flex;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  flex-wrap: wrap;
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(255,253,226,0.10);
}
.fa-social-link {
  font-family: var(--in-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,253,226,0.70);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition: color var(--in-t-fast) var(--in-ease);
}
.fa-social-link:hover { color: #fffde2; }
.fa-social-handle {
  font-family: var(--in-font-display);
  font-size: 0.95rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--in-accent);
}

@media (max-width: 900px) {
  .fa-about-grid     { grid-template-columns: 1fr; }
  .fa-services       { grid-template-columns: 1fr; }
  .fa-offices        { grid-template-columns: 1fr; gap: 2rem; }
}

/* ── AI Ticker (marquee) ───────────────────────────────────── */
.ai-bar {
  background: var(--in-canvas-warm);
  border-top: 1px solid var(--in-rule);
  border-bottom: 1px solid var(--in-rule);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  position: relative;
}

.ai-bar-label-wrap {
  display: flex;
  align-items: center;
  padding: 0.9rem clamp(1rem, 3vw, 1.75rem);
  border-right: 1px solid var(--in-rule);
  background: var(--in-canvas);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.ai-bar-label {
  font-family: var(--in-font-mono);
  font-size: var(--in-eyebrow);
  font-weight: 400;
  letter-spacing: var(--in-track-eyebrow);
  text-transform: uppercase;
  color: var(--in-ink);
  white-space: nowrap;
}

.ai-bar-marquee {
  flex: 1 1 auto;
  overflow: hidden;
  display: flex;
  align-items: center;
  position: relative;
}

.ai-bar-marquee::before,
.ai-bar-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 64px;
  z-index: 1;
  pointer-events: none;
}
.ai-bar-marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--in-canvas-warm), rgba(246,241,235,0));
}
.ai-bar-marquee::after {
  right: 0;
  background: linear-gradient(270deg, var(--in-canvas-warm), rgba(246,241,235,0));
}

.ai-bar-track {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2rem);
  padding: 0.9rem 1.25rem;
  flex-shrink: 0;
  animation: marquee 64s linear infinite;
  will-change: transform;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .ai-bar-track { animation: none; }
}

.ai-bar-item {
  font-family: var(--in-font-body);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--in-ink-mid);
  white-space: nowrap;
}

.ai-bar-sep {
  color: var(--in-ink-faint);
  font-size: 0.9rem;
  user-select: none;
}

/* ── Showcase — CINEMATIC: cobalt fills the entire section, text overlays ──── */
.showcase {
  padding: 0;                          /* full-bleed — no section padding */
  overflow: hidden;
  position: relative;
  isolation: isolate;
  /* Cobalt + radial bloom + grain = the entire section background */
  background:
    radial-gradient(ellipse at 25% 45%, rgba(206, 224, 255, 0.22) 0%, transparent 55%),
    linear-gradient(135deg, #1f4ea3 0%, #1740a9 55%, #102f7b 100%);
}
/* Top-right light bloom for atmosphere */
.showcase::before {
  content: '';
  position: absolute;
  top: -15%;
  right: -10%;
  width: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(225, 238, 255, 0.30) 0%, transparent 65%);
  filter: blur(40px);
  mix-blend-mode: screen;
  z-index: 0;
  pointer-events: none;
}
/* Film grain across the section */
.showcase::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  opacity: 0.28;
  mix-blend-mode: overlay;
  z-index: 1;
  pointer-events: none;
}

.showcase-intro {
  margin-bottom: 0;
  max-width: 38ch;
  font-size: var(--in-body);
  color: rgba(255, 255, 255, 0.82);
}

/* Single stage — the iPhone IMAGE is the hero of this section. Section
   height auto-fits to the figure (16:9 of viewport width) so there are
   no cobalt bars above/below the image. Title block + picker float on
   top of the image. */
.showcase-cinematic {
  position: relative;
  z-index: 2;
}

/* Title block — overlays the cobalt directly, white type, anchored top-left.
   Phone screen starts at 38.6% from viewport left, so title max-width is
   tuned so that the rightmost word never crosses into the phone area
   (~33% max-width keeps a comfortable gap at the breakpoints we hit). */
.showcase-cinematic-title {
  position: absolute;
  top: clamp(2.5rem, 5vw, 4rem);
  left: max(clamp(1.25rem, 5vw, 3.5rem), calc((100vw - var(--in-max-w)) / 2 + clamp(1.25rem, 5vw, 3.5rem)));
  max-width: min(33%, 380px);
  z-index: 4;
  display: flex;
  flex-direction: column;
  color: #ffffff;
}
.showcase-cinematic-title .fa-section-meta {
  position: static;
  margin-bottom: 0.75rem;
}
.showcase-cinematic-title .fa-section-meta span,
.showcase-cinematic-title .fa-section-meta span:first-child {
  color: rgba(255, 255, 255, 0.7);
}
.showcase-cinematic-title .fa-section-meta span:first-child {
  color: #ffffff;
}
/* §03 numeral — ~half the global size so it doesn't overpower the phone */
.showcase-cinematic-title .fa-section-numeral {
  font-size: clamp(4rem, 9vw, 11rem);   /* was global clamp(8rem, 18vw, 24rem) */
  margin-bottom: 0.5rem;
  line-height: 0.88;
  color: #ffffff;
  opacity: 0.95;
}
/* §03 h1 — tighter than global so "SPECIFICALLY" doesn't overflow into phone */
.showcase-cinematic-title .fa-section-h1 {
  font-size: clamp(1.75rem, 3.2vw, 3.25rem);  /* was global clamp(2.8rem, 5.5vw, 5.5rem) */
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #ffffff;
}

/* Brand picker — floats next to the phone (NOT at the section edge).
   Phone right edge sits at ~61.4% from viewport left, so positioning the
   picker at right:clamp(11vw,15vw,18vw) keeps its left edge a tight
   3-5% gap off the phone's right bezel at typical desktop widths. */
.showcase-picker {
  position: absolute;
  top: clamp(2.5rem, 5vw, 4rem);   /* aligned vertically with title block */
  right: clamp(11vw, 15vw, 18vw);
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: min(230px, 28%);
}
.showcase-pill {
  appearance: none;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  font-family: var(--in-font-body);
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: #ffffff;
  transition:
    background 250ms var(--in-ease),
    border-color 250ms var(--in-ease),
    transform 250ms var(--in-ease);
}
.showcase-pill:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateX(-3px);
}
.showcase-pill.is-active {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--in-ink);
  box-shadow: 0 12px 32px -10px rgba(8, 24, 64, 0.6);
}
.showcase-pill-cat {
  font-family: var(--in-font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  transition: color 250ms var(--in-ease);
}
.showcase-pill.is-active .showcase-pill-cat { color: var(--in-ink-muted); }
.showcase-pill-name {
  font-family: var(--in-font-display);
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* Featured device — iPhone IMAGE is 16:9 landscape (2752×1536). The
   figure is the FLOW element that gives §03 its height — no min-height,
   no cobalt bars above/below. Figure width:100%, aspect-ratio 16/9, so
   section auto-sizes to figure height (image-driven). */
.device--featured {
  position: relative;            /* contributes to parent height */
  z-index: 3;
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.device-frame--featured {
  position: relative;
  width: 100%;
  height: 100%;
  filter:
    drop-shadow(0 60px 120px rgba(8, 24, 64, 0.45))
    drop-shadow(0 16px 32px rgba(8, 24, 64, 0.22));
  /* Screen aperture — MEASURED via flood-fill on the actual WebP pixels
     (scripts/check.js path, see commit notes). Phone screen visible
     pixels: left 1063→1689, top 169→1453 of a 2752×1536 image. The top
     starts BELOW the dynamic island so the island stays visible. */
  --screen-top: 11%;
  --screen-left: 38.6%;
  --screen-w: 22.75%;
  --screen-h: 83.6%;
  --screen-radius: 1.8%;
  /* At a 1500px section width: aperture is ~341px wide. iframe-scale
     0.88 → iframe internal CSS width ~388px (≈ iPhone 14 Pro at 393px),
     so embedded mobile media queries engage natively. */
  --iframe-scale: 0.88;
}
/* Bezel image fills the 16:9 figure exactly at its natural aspect ratio
   — no object-fit cropping, so the aperture %s map 1:1 to image pixels. */
.device--featured .device-img {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

/* Featured iframe — no border-radius needed. The bezel WebP has a
   transparent screen-shaped hole cut at the screen area (797k pixels
   set to alpha=0), so the iframe sits BEHIND the bezel and shows
   through the hole with pixel-perfect corner shape. No CSS clipping,
   no scroll-state jank, no compositor flicker. */
.device-iframe--featured {
  transition: opacity 340ms var(--in-ease);
}
.device-iframe--featured.is-swapping {
  opacity: 0;
}
.device-img.is-swapping {
  opacity: 0;
  transition: opacity 340ms var(--in-ease);
}
.device-img {
  transition: opacity 340ms var(--in-ease);
}

/* §03 scroll cue — frosted pill pinned to the lower screen aperture of the
   featured iPhone. The screen-aperture vars centre it horizontally and sit
   it just above the screen bottom, so it tracks the bezel on desktop AND
   the zoomed mobile layout. pointer-events:none so it never blocks scrolling
   into the screen; initDeviceScrollCue adds .is-dismissed on first inner
   scroll. */
.device-scroll-cue {
  position: absolute;
  z-index: 4;                 /* above bezel (z2) + iframe (z1) */
  left: calc(var(--screen-left, 38.6%) + var(--screen-w, 22.75%) / 2);
  top:  calc(var(--screen-top, 11%) + var(--screen-h, 83.6%) - 5%);
  transform: translate(-50%, -100%);
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.5em 0.9em;
  border-radius: 999px;
  font-family: var(--in-font-mono);
  font-size: clamp(0.6rem, 0.92vw, 0.78rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  background: rgba(8, 24, 64, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 8px 24px rgba(8, 24, 64, 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  pointer-events: none;
  opacity: 0;
  animation: deviceCueIn 520ms var(--in-ease) 500ms both,
             deviceCuePulse 2.4s ease-in-out 1100ms infinite;
  transition: opacity 380ms var(--in-ease);
}
.device-scroll-cue-arrow {
  display: inline-flex;
  animation: deviceCueArrow 1.5s ease-in-out infinite;
}
.device-scroll-cue.is-dismissed {
  opacity: 0;
  animation: none;
}

@keyframes deviceCueIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes deviceCuePulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(8, 24, 64, 0.35); }
  50%      { box-shadow: 0 10px 30px rgba(23, 64, 169, 0.55); }
}
@keyframes deviceCueArrow {
  0%, 100% { transform: translateY(-3px); opacity: 0.5; }
  50%      { transform: translateY(3px);  opacity: 1; }
}

.device {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.device-cat {
  font-family: var(--in-font-mono);
  font-size: var(--in-eyebrow);
  letter-spacing: var(--in-track-eyebrow);
  text-transform: uppercase;
  color: var(--in-ink-muted);
  margin-bottom: 1rem;
}

/* Frame wraps the PNG + iframe. Each device sets its own screen inset
   via CSS variables — tune --t/--l/--w/--h after dropping in real
   mockup PNGs so the iframe sits exactly inside the device screen.
   Mockups are 1856×2304 (4:5) — the iframe is positioned as % of that. */
.device-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1856 / 2304;
  filter:
    drop-shadow(0 28px 60px rgba(17,17,17,0.18))
    drop-shadow(0 4px 12px rgba(17,17,17,0.06));
  transition: transform var(--in-t-slow) var(--in-ease);
}
.device:hover .device-frame { transform: translateY(-4px); }

.device-img {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;            /* Bezel ON TOP of iframe — the 16:9 WebP has a
                            transparent screen-shaped hole cut at the
                            screen area, so the iframe (z-index 1) shows
                            through with the bezel's exact corner curve.
                            No CSS border-radius needed — corner shape is
                            defined by the image pixels, not the renderer.
                            Bulletproof against compositor scroll jank. */
  pointer-events: none;
  user-select: none;
}

.device-iframe {
  position: absolute;
  top: var(--screen-top, 8%);
  left: var(--screen-left, 12%);
  /* Render the iframe at LOGICAL iPhone CSS dimensions, then scale down
     to fit the bezel aperture. This makes the example sites use their
     proper mobile/responsive layout (big text, full-width photos) and
     look like real iPhone screenshots, not squashed desktop pages.

     Math: aperture-width / iframe-scale = iframe CSS width.
     At iframe-scale 0.6, an aperture that's 240px wide renders the
     iframe at 400px wide — proper iPhone viewport. */
  width: calc(var(--screen-w, 76%) / var(--iframe-scale, 1));
  height: calc(var(--screen-h, 84%) / var(--iframe-scale, 1));
  transform: scale(var(--iframe-scale, 1));
  transform-origin: top left;
  border: 0;
  background: var(--in-canvas);
  z-index: 1;            /* Behind the bezel — see .device-img note. The
                            bezel's transparent hole reveals the iframe
                            with pixel-perfect corner shape. */
  color-scheme: light;
  /* Fully interactive — scroll + click inside the device. Example pages use
     target="_blank" via <base> so clicks break out of the iframe cleanly. */
}
.device-iframe:focus { outline: none; }

/* Per-device screen aperture — % values on the 4:5 canvas of each mockup.
   These are best-guess defaults; tune per actual PNG bezel geometry. */
.device-frame--iphone {
  --screen-top: 9%;
  --screen-left: 27%;
  --screen-w: 46%;
  --screen-h: 82%;
  --screen-radius: 6%;
}
.device-frame--ipad {
  --screen-top: 7%;
  --screen-left: 14%;
  --screen-w: 72%;
  --screen-h: 86%;
  --screen-radius: 2.4%;
}
.device-frame--macbook {
  --screen-top: 13%;
  --screen-left: 14%;
  --screen-w: 72%;
  --screen-h: 50%;
  --screen-radius: 1%;
}

.device-cap {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}

.device-name {
  font-family: var(--in-font-display);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--in-ink);
}

.device-link {
  font-family: var(--in-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--in-accent);
  border-bottom: 1px solid var(--in-accent-line);
  padding-bottom: 2px;
  transition: color var(--in-t-fast) var(--in-ease),
              border-color var(--in-t-fast) var(--in-ease);
}
.device-link:hover {
  color: var(--in-accent-deep);
  border-bottom-color: var(--in-accent);
}

.showcase-foot {
  margin-top: clamp(3rem, 6vw, 5rem);
  font-family: var(--in-font-body);
  font-size: 0.875rem;
  color: var(--in-ink-muted);
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
  line-height: var(--in-line-body);
  padding-top: 2rem;
  border-top: 1px solid var(--in-rule);
}

@media (max-width: 900px) {
  /* Mobile: stack vertically. Title → 16:9 figure (zoomed beyond viewport
     so the phone reads bigger) → picker. Section bg cobalt fills the
     vertical extent. */
  .showcase-cinematic {
    min-height: auto;
    padding: 0 0 clamp(2rem, 6vw, 3rem);
  }
  .showcase-cinematic-title {
    position: relative;
    top: auto;
    left: auto;
    max-width: 90%;
    padding: clamp(2.5rem, 6vw, 3.5rem) clamp(1.25rem, 5vw, 2rem) 1.25rem;
    margin: 0 auto;
  }
  .device--featured {
    /* Zoom the 16:9 figure ~2× the viewport width so the phone reads
       at a usable size. Section overflow:hidden clips the cobalt
       margins on the sides. Screen center sits at ~50% of image width
       (38.6% + 22.75/2), so left:-50vw lands the phone at viewport
       horizontal centre. */
    position: relative;
    width: 200vw;
    aspect-ratio: 16 / 9;
    left: -50vw;
    top: auto;
    transform: none;
    margin: 0;
  }
  .device-frame--featured {
    /* Figure width doubled vs desktop → aperture-px doubled. iframe-scale
       0.5 keeps iframe internal width ~iPhone CSS (~365px) on a 400px
       viewport — mobile media queries inside the embedded site engage. */
    --iframe-scale: 0.5;
  }
  .showcase-picker {
    position: relative;
    bottom: auto;
    top: auto;
    right: auto;
    transform: none;
    margin: 1.5rem auto 0;
    width: min(90%, 360px);
    flex-direction: row;
    gap: 0.4rem;
  }
  .showcase-pill { flex: 1; padding: 0.6rem 0.5rem; text-align: center; }
  .showcase-pill-name { font-size: 0.85rem; }
  /* Phone is zoomed to 200vw on mobile — keep the cue legible inside it. */
  .device-scroll-cue { font-size: 0.72rem; padding: 0.55em 1em; gap: 0.5em; }
}
@media (max-width: 560px) {
  .showcase-pill-cat { font-size: 0.55rem; }
  .showcase-pill-name { font-size: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .device-frame, .device:hover .device-frame { transform: none; transition: none; }
  /* Keep the cue visible (static) — it's the whole point — just stop motion. */
  .device-scroll-cue { opacity: 1; animation: none; }
  .device-scroll-cue-arrow { animation: none; }
}

/* ── Pricing (flat cream card, hairline-bound) ──────────────── */
/* #pricing background lives on .has-blue-texture now (cobalt gradient) */
#pricing .section-heading { margin-left: auto; margin-right: auto; }
#pricing .section-label { margin-left: auto; margin-right: auto; }

.pricing-card {
  max-width: 560px;
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  background: var(--in-canvas-cool);
  border: 1px solid var(--in-rule);
  border-radius: var(--in-radius-sm);
  overflow: hidden;
  text-align: left;
}

/* Pricing — card LEFT, title RIGHT (no big numeral above card) */
.pricing-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.pricing-card-stack {
  margin: 0;
  max-width: none;
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.pricing-card-stack .pricing-name { margin-bottom: 0; }
.pricing-card-stack .pricing-prices { gap: 1rem; }
.pricing-card-stack .pricing-amount { font-size: clamp(2.25rem, 4vw, 2.75rem); }
.pricing-card-stack .pricing-list { margin: 0.25rem 0 0.5rem; }
.pricing-card-stack .pricing-list li { padding: 0.7rem 0; }
.pricing-card-stack .pricing-note { margin-top: 0.25rem; padding-top: 1rem; border-top: 1px solid var(--in-rule); }

.pricing-title { display: flex; flex-direction: column; }
.pricing-title .fa-section-meta { margin-bottom: 0.75rem; }
.pricing-title .fa-section-numeral {
  font-size: clamp(5rem, 9vw, 9rem);
  margin: 0 0 1rem;
  line-height: 0.85;
}
.pricing-title .fa-section-h1 { margin: 0; font-size: clamp(2.2rem, 4.5vw, 4rem); }

@media (max-width: 900px) {
  .pricing-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .pricing-title { order: -1; }
}

.pricing-header {
  padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.75rem, 4vw, 2.5rem) clamp(1.5rem, 3vw, 2rem);
  border-bottom: 1px solid var(--in-rule);
}

.pricing-name {
  font-family: var(--in-font-mono);
  font-size: var(--in-eyebrow);
  font-weight: 400;
  letter-spacing: var(--in-track-eyebrow);
  text-transform: uppercase;
  color: var(--in-ink-muted);
  margin-bottom: 1.25rem;
}

.pricing-prices {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.pricing-price-block { display: flex; align-items: baseline; gap: 0.35rem; }

.pricing-amount {
  font-family: var(--in-font-display);
  font-size: clamp(2.5rem, 5vw, 3.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--in-ink);
  line-height: 1;
  /* Reserve enough monospace-ish width that the ticker doesn't jiggle as
     it counts down from 4-digit to 3-digit values (1999 → 999 → 349). */
  font-variant-numeric: tabular-nums;
  display: inline-block;
  transform-origin: 50% 80%;
  transition: color 200ms var(--in-ease);
}
/* While ticking down — slight cobalt tint so the number reads as ACTIVE.
   Returns to ink on landing for the final value. */
.pricing-amount.is-dropping {
  color: var(--in-accent, #1740a9);
}
/* Land impact — quick scale-up + settle to draw the eye to the FINAL price */
.pricing-amount.is-landed {
  animation: price-land 540ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes price-land {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.085); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .pricing-amount.is-landed { animation: none; }
}

.pricing-period {
  font-family: var(--in-font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--in-ink-muted);
}

.pricing-plus {
  font-family: var(--in-font-display);
  font-size: 1.6rem;
  color: var(--in-ink-faint);
  align-self: center;
}

.pricing-body {
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1.75rem, 4vw, 2.5rem) clamp(1.75rem, 4vw, 2.5rem);
}

.pricing-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin-bottom: 1.75rem;
}

.pricing-list li {
  display: flex;
  align-items: baseline;
  gap: 0;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--in-rule);
  font-family: var(--in-font-body);
  font-size: 0.92rem;
  color: var(--in-ink);
  line-height: 1.55;
}
.pricing-list li:last-child { border-bottom: 0; }
.pricing-list li::before { content: none; }

.pricing-note {
  font-family: var(--in-font-body);
  font-size: 0.8rem;
  color: var(--in-ink-muted);
  line-height: 1.65;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--in-rule);
}

/* ── FAQ (hairline list, slow expand) ──────────────────────── */
#faq { background: var(--in-canvas); }

.faq-split {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 0.6fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

/* Q&A list lives on the LEFT, heading block on the RIGHT.
   Pre-existing HTML order is .faq-split-left = heading, .faq-split-right = list,
   so we reorder visually: list (.faq-split-right) → column 1, heading → column 2. */
.faq-split-right { order: 1; padding-top: clamp(7rem, 14vw, 12rem); }
.faq-split-left  { order: 2; position: sticky; top: 6rem; text-align: right; }
.faq-split-left .fa-section-meta { justify-content: flex-end; right: auto; left: auto; position: static; }
.faq-split-left .fa-section-numeral { margin-bottom: 0.5rem; text-align: right; }
.faq-split-left .fa-section-h1 { text-align: right; }

@media (max-width: 900px) {
  .faq-split { grid-template-columns: 1fr; gap: 2rem; }
  .faq-split-right { order: 2; padding-top: 0; }
  .faq-split-left  { order: 1; position: static; text-align: left; }
  .faq-split-left .fa-section-meta { justify-content: flex-start; }
  .faq-split-left .fa-section-numeral,
  .faq-split-left .fa-section-h1 { text-align: left; }
}

.faq-list {
  max-width: 720px;
  display: flex;
  flex-direction: column;
}

.faq-split .faq-list { margin-top: 0; }

.faq-item {
  border-bottom: 1px solid var(--in-rule);
  transition: border-bottom-color var(--in-t-med) var(--in-ease);
}
.faq-item:first-child { border-top: 1px solid var(--in-rule); }
.faq-item.open { border-bottom-color: var(--in-ink); }

.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--in-ink);
  padding: 1.35rem 0;
  font-family: var(--in-font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.35;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  transition: color var(--in-t-fast) var(--in-ease);
}

.faq-q:hover { color: var(--in-accent); }

.faq-q-arrow {
  flex-shrink: 0;
  color: var(--in-ink-muted);
  transition: transform var(--in-t-med) var(--in-ease),
              color var(--in-t-fast) var(--in-ease);
  font-family: var(--in-font-mono);
  font-size: 0.95rem;
  line-height: 1;
}

.faq-item.open .faq-q-arrow {
  transform: rotate(180deg);
  color: var(--in-accent);
}
.faq-item.open .faq-q { color: var(--in-accent); }

.faq-a {
  display: none;
  padding: 0 0 1.5rem;
  font-family: var(--in-font-body);
  font-size: 0.95rem;
  color: var(--in-ink-mid);
  line-height: var(--in-line-body);
  max-width: 64ch;
}

.faq-item.open .faq-a { display: block; }

/* ── Lead Form (cream inputs, hairline-bound) ──────────────── */
.lead { background: var(--in-canvas-warm); }

.lead-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.lead-left h2 {
  font-family: var(--in-font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--in-ink);
  margin-bottom: 1.25rem;
  max-width: 18ch;
}

.lead-left p {
  font-family: var(--in-font-body);
  font-size: var(--in-body-lg);
  color: var(--in-ink-mid);
  line-height: var(--in-line-body);
  margin-bottom: 1.75rem;
  max-width: 42ch;
}

.lead-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  font-family: var(--in-font-body);
  font-size: 0.9rem;
  color: var(--in-ink-mid);
}

.lead-bullets li {
  padding-left: 1.5rem;
  position: relative;
  line-height: 1.55;
}

.lead-bullets li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--in-accent);
  font-family: var(--in-font-mono);
}

/* Telegram AI agent fast-path CTA */
.lead-tg {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--in-rule);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.lead-tg-lbl {
  font-family: var(--in-font-mono);
  font-size: var(--in-eyebrow);
  letter-spacing: var(--in-track-eyebrow);
  text-transform: uppercase;
  color: var(--in-ink-muted);
}
.lead-tg-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--in-font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--in-accent);
  align-self: flex-start;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--in-accent-line);
  transition: color var(--in-t-fast) var(--in-ease),
              border-color var(--in-t-fast) var(--in-ease);
}
.lead-tg-cta:hover {
  color: var(--in-accent-deep);
  border-bottom-color: var(--in-accent);
}
.lead-tg-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  color: var(--in-accent);
}
.lead-tg-icon svg { width: 100%; height: 100%; }
.lead-tg-note {
  font-family: var(--in-font-body);
  font-size: 0.85rem;
  color: var(--in-ink-muted);
  line-height: 1.5;
}

#lead-form-el {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  position: relative;
}

.form-field label {
  font-family: var(--in-font-mono);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--in-ink-muted);
}

.form-field label .req { color: var(--in-accent); }

.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--in-font-body);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--in-rule);
  border-radius: 0;
  color: var(--in-ink);
  padding: 0.55rem 0;
  font-size: 0.95rem;
  outline: none;
  transition: border-color var(--in-t-fast) var(--in-ease);
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}

.form-field select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--in-ink-mid) 50%),
    linear-gradient(135deg, var(--in-ink-mid) 50%, transparent 50%);
  background-position:
    calc(100% - 8px) 60%,
    calc(100% - 2px) 60%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 1.5rem;
}

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
  border-color: var(--in-ink-mid);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--in-accent);
  box-shadow: none;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--in-ink-faint);
}

.form-field select option { background: var(--in-canvas); color: var(--in-ink); }

.form-field textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

.form-error {
  font-family: var(--in-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--in-danger);
  margin-top: 0.25rem;
}

#form-status {
  font-family: var(--in-font-body);
  font-size: 0.9rem;
  line-height: 1.55;
  padding: 0.95rem 1.15rem;
  border-radius: var(--in-radius-sm);
  display: none;
}

#form-status.success {
  display: block;
  background: rgba(74, 222, 128, 0.10);
  border: 1px solid rgba(74, 222, 128, 0.35);
  color: #1F6F3D;
}

#form-status.error {
  display: block;
  background: rgba(179, 38, 30, 0.06);
  border: 1px solid rgba(179, 38, 30, 0.25);
  color: var(--in-danger);
}

#form-status.unconfigured {
  display: block;
  background: var(--in-accent-tint);
  border: 1px solid var(--in-accent-line);
  color: var(--in-accent-deep);
}

.form-pay-note {
  margin-top: 0.85rem;
  font-family: var(--in-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--in-muted, #6c6c6c);
  text-transform: uppercase;
}

.form-pay-direct {
  margin-top: 1.1rem;
  text-align: center;
  font-family: var(--in-font-body);
  font-size: 0.88rem;
  line-height: 1.5;
}

.form-pay-direct a {
  color: var(--in-accent-deep, #1A4FB7);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.15s ease;
}

.form-pay-direct a:hover {
  color: var(--in-accent, #2F6BD1);
}

/* ── Final CTA (cream-warm panel, serif echo of hero) ──────── */
.final-cta {
  text-align: center;
  padding: clamp(5rem, 10vw, 8.5rem) 0;
  border-top: 1px solid var(--in-rule);
  background: var(--in-canvas);
}

.final-cta h2 {
  font-family: var(--in-font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 500;
  font-style: normal;
  letter-spacing: -0.018em;
  line-height: 1.08;
  color: var(--in-ink);
  margin-bottom: 1.25rem;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}

.final-cta h2 em {
  font-style: normal;
  color: var(--in-accent);
}

.final-cta p {
  font-family: var(--in-font-body);
  font-size: var(--in-body-lg);
  color: var(--in-ink-mid);
  margin-bottom: 2.25rem;
  max-width: 42ch;
  margin-left: auto;
  margin-right: auto;
  line-height: var(--in-line-body);
}

/* ── Footer ────────────────────────────────────────────────── */
footer {
  background: var(--in-canvas-warm);
  border-top: 1px solid var(--in-rule);
  padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.footer-brand {
  font-family: var(--in-font-body);
  font-size: 0.95rem;
  color: var(--in-ink);
  line-height: 1.6;
}

.footer-brand-mark {
  font-family: var(--in-font-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--in-ink);
  margin-bottom: 0.4rem;
  display: block;
}

.footer-brand-endorse {
  font-family: var(--in-font-mono);
  font-size: var(--in-eyebrow);
  font-weight: 400;
  letter-spacing: var(--in-track-eyebrow);
  text-transform: uppercase;
  color: var(--in-ink-muted);
  display: block;
}

.footer-brand-endorse a {
  color: var(--in-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--in-rule);
  transition: border-color var(--in-t-fast) var(--in-ease);
}
.footer-brand-endorse a:hover {
  border-bottom-color: var(--in-ink);
}

.footer-fine {
  font-family: var(--in-font-body);
  font-size: 0.8rem;
  color: var(--in-ink-muted);
  max-width: 52ch;
  line-height: 1.65;
  text-align: right;
  justify-self: end;
}

/* ── Motion infrastructure (fromanother — Lenis + IO driven) ─── */

/* Scroll-progress top bar — JS writes --scroll-progress 0..1 to :root */
.scroll-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--in-accent);
  transform-origin: left center;
  transform: scaleX(var(--scroll-progress, 0));
  z-index: 200;
  pointer-events: none;
}

/* ─── Reveal animations — PROGRESSIVE ENHANCEMENT ONLY ────────
   Content is visible by default. When IO fires data-in-view we replay
   a soft entry animation. If IO never fires (any reason), content
   stays visible. No state can leave the page blank. ────────────── */

.fa-section-h1 .word,
.hero-tagline .word {
  overflow: visible;
  display: inline-block;
}
.fa-section-h1 .word > span,
.hero-tagline .word > span {
  display: inline-block;
}

/* Animation plays only when data-in-view fires. */
.fa-section[data-in-view="true"] .fa-section-h1 .word > span,
.hero[data-in-view="true"] .hero-tagline .word > span,
.fa-footer[data-in-view="true"] .fa-section-h1 .word > span {
  animation: wordReveal 800ms var(--in-ease) both;
  animation-delay: calc(var(--word-i, 0) * 80ms);
}
@keyframes wordReveal {
  from { opacity: 0; transform: translateY(30%); }
  to   { opacity: 1; transform: translateY(0); }
}

.fa-section[data-in-view="true"] .fa-section-numeral,
.fa-footer[data-in-view="true"] .fa-section-numeral {
  animation: numeralReveal 1100ms var(--in-ease) both;
  animation-delay: 120ms;
}
@keyframes numeralReveal {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 0.92; transform: translateY(0); }
}

.fa-section[data-in-view="true"] .fa-section-meta,
.fa-footer[data-in-view="true"] .fa-section-meta {
  animation: metaReveal 700ms var(--in-ease) both;
  animation-delay: 200ms;
}
@keyframes metaReveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero[data-in-view="true"] .hero-eyebrow {
  animation: heroReveal 900ms var(--in-ease) both;
  animation-delay: 60ms;
}
.hero[data-in-view="true"] .hero-bottom {
  animation: heroReveal 900ms var(--in-ease) both;
  animation-delay: 480ms;
}
@keyframes heroReveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Live clock — JS writes --hour-deg and --min-deg per second */
.fa-clock-h {
  transform: rotate(var(--hour-deg, 0deg));
}
.fa-clock-m {
  transform: rotate(var(--min-deg, 0deg));
}

/* Subtle scroll-velocity parallax on hero — uses CSS-variable from rAF loop */
.hero-tagline {
  transform: translateY(calc(var(--scroll-velocity, 0) * 0.5px));
}

@media (prefers-reduced-motion: reduce) {
  .fa-section-h1 .word > span,
  .hero-tagline .word > span,
  .fa-section-numeral,
  .fa-section-meta,
  .fa-section > .container > *,
  .fa-footer > .container > *,
  .hero .hero-eyebrow,
  .hero .hero-bottom {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .scroll-bar { display: none; }
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .lead-inner    { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-inner  { grid-template-columns: 1fr; gap: 1.75rem; }
  .footer-fine   { text-align: left; justify-self: start; }
}

@media (max-width: 680px) {
  .form-row      { grid-template-columns: 1fr; }
  .nav-links .btn-ghost { display: none; }
  /* Mobile nav: everything folds into the burger except the language toggle.
     Logo on the left, lang-toggle + burger on the right. */
  .nav-links .nav-link,
  .nav-links .btn-cream,
  .nav-links .btn-primary { display: none; }
  .nav-links { gap: 0.4rem; }
  .nav-burger { display: inline-flex; }
  .nav-logo-svg { height: 18px; }
  .nav-inner { height: 72px; }
  .lang-toggle { margin: 0 0.4rem 0 0; padding: 3px 4px; }
  .lang-toggle .lang-en,
  .lang-toggle .lang-kh { width: 24px; height: 24px; }
}

@media (max-width: 400px) {
  .hero h1       { font-size: clamp(2rem, 9vw, 2.6rem); }
}

/* ─── Legal pages (terms / privacy / refunds / aup / dpa) ───────── */
.legal-page { background: var(--fa-dark-blue); color: var(--fa-yellow); }
.legal-page main { padding: 7rem 0 4rem; }
.legal-hero { padding-bottom: 1.5rem; border-bottom: 1px solid var(--fa-yellow-20); margin-bottom: 2.5rem; }
.legal-hero h1 { font-family: var(--fa-display); font-weight: 500; font-size: clamp(2rem, 4.5vw, 3rem); letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 0.75rem; color: var(--fa-yellow); }
.legal-hero .legal-meta { font-family: var(--fa-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fa-yellow-60); }
.legal-hero .legal-stamp { font-family: var(--fa-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--fa-yellow-60); margin-top: 0.5rem; }

.legal-prose { max-width: 760px; margin: 0 auto; font-family: var(--fa-body); font-size: 1rem; line-height: 1.75; color: var(--fa-yellow-80); }
.legal-prose h2 { font-family: var(--fa-display); font-weight: 500; font-size: 1.5rem; letter-spacing: -0.01em; color: var(--fa-yellow); margin: 3rem 0 1rem; padding-top: 1.5rem; border-top: 1px solid var(--fa-yellow-10); }
.legal-prose h2:first-of-type { padding-top: 0; border-top: 0; margin-top: 0; }
.legal-prose h3 { font-family: var(--fa-display); font-weight: 500; font-size: 1.1rem; color: var(--fa-yellow); margin: 2rem 0 0.6rem; }
.legal-prose p { margin: 0 0 1rem; }
.legal-prose strong { color: var(--fa-yellow); font-weight: 600; }
.legal-prose em { color: var(--fa-yellow-80); }
.legal-prose a { color: var(--fa-yellow); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--fa-yellow-40); transition: text-decoration-color .2s; }
.legal-prose a:hover { text-decoration-color: var(--fa-yellow); }
.legal-prose ul, .legal-prose ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.legal-prose li { margin: 0 0 0.4rem; }
.legal-prose blockquote { margin: 1.5rem 0 2rem; padding: 1rem 1.25rem; border-left: 2px solid var(--fa-blue); background: var(--fa-yellow-06); font-style: italic; color: var(--fa-yellow-80); font-size: 0.95rem; border-radius: 0 2px 2px 0; }
.legal-prose blockquote p { margin: 0; }
.legal-prose code { font-family: var(--fa-mono); font-size: 0.85em; background: var(--fa-yellow-10); padding: 1px 6px; border-radius: 3px; }
.legal-prose hr { border: 0; border-top: 1px solid var(--fa-yellow-10); margin: 2.5rem 0; }
.legal-prose table { width: 100%; border-collapse: collapse; margin: 1.25rem 0 1.5rem; font-size: 0.92rem; }
.legal-prose th, .legal-prose td { padding: 0.65rem 0.85rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--fa-yellow-10); }
.legal-prose th { color: var(--fa-yellow); font-weight: 600; font-family: var(--fa-display); border-bottom: 1px solid var(--fa-yellow-30); }
.legal-prose td { color: var(--fa-yellow-80); }

/* Footer legal link strip */
.fa-footer-legal { display: flex; flex-wrap: wrap; gap: 0 1rem; margin: 0.75rem 0 0; font-family: var(--fa-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fa-yellow-60); }
.fa-footer-legal a { color: inherit; opacity: 0.85; transition: opacity .2s; }
.fa-footer-legal a:hover { opacity: 1; color: var(--fa-yellow); }

/* Lead form consent checkbox */
.form-consent { display: flex; align-items: flex-start; gap: 0.6rem; margin: 1rem 0 0.5rem; font-size: 0.85rem; line-height: 1.5; color: var(--fa-yellow-80); }
.form-consent input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; accent-color: var(--fa-blue); cursor: pointer; }
.form-consent label { cursor: pointer; }
.form-consent a { color: var(--fa-yellow); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--fa-yellow-40); }
.form-consent a:hover { text-decoration-color: var(--fa-yellow); }

@media (max-width: 680px) {
  .legal-page main { padding: 5.5rem 0 3rem; }
  .legal-prose { font-size: 0.95rem; }
  .legal-prose table { font-size: 0.85rem; }
  .legal-prose th, .legal-prose td { padding: 0.5rem 0.55rem; }
}