/* Light theme on the existing brand colors; text uses the darker *-ink
   variants because pure cyan fails contrast on white. */
:root {
  --bg: #FFFFFF;
  --bg-soft: #F4F6FA;
  --border: rgba(10, 11, 16, 0.08);
  --border-strong: rgba(10, 11, 16, 0.14);
  --text: #0A0B10;
  --text-muted: #4A5367;
  /* text-dim, cyan-ink, ok, warn-ink: darkest shades that still read the same,
     chosen for WCAG AA contrast (4.5:1) on white and the light panels. */
  --text-dim: #636C80;
  --cyan: #00D4FF;
  --cyan-ink: #00728F;
  --violet: #7C5CFF;
  --violet-ink: #5A3FE0;
  --ok: #15803D;
  --ok-soft: rgba(22, 163, 74, 0.12);
  --warn: #E08A00;
  --warn-ink: #8A5000;
  --warn-soft: rgba(245, 158, 11, 0.16);
  /* One family for everything on the page; labels are the same face in a
     smaller semibold cut, never a monospace. The mono stack is kept only for
     the labels of the old hero-scale.css (not part of the design). */
  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Arrows and small marks come from these masks: the webfont has no arrow
     glyphs, and a fallback font's arrow never matches the text. */
  --ic-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ic-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.5v11M3.5 9 8 13.5 12.5 9' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ic-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 13.5v-11M3.5 7 8 2.5 12.5 7' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ic-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ic-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 9.5c2.2-3.2 4.3-3.2 6.5 0s4.3 3.2 6.5 0' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --ic-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8 8 3l5.5 5M4 7v6.5h8V7' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ic-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ic-replay: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 8a5.5 5.5 0 1 1-1.6-3.9M13.5 2.5v3h-3' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --container: clamp(1360px, 90vw, 2300px);
  --nav-h: 72px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--nav-h);
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.nav__inner {
  max-width: var(--container); height: 100%; margin: 0 auto; padding: 0 48px;
  display: flex; align-items: center; gap: 32px;
}
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo__word { font-size: 21px; font-weight: 600; letter-spacing: -0.025em; }
.nav__links { display: flex; gap: 4px; margin: 0 auto; }
.nav__link { padding: 8px 12px; font-size: 14px; color: var(--text-muted); border-radius: 8px; }
.nav__link:hover { color: var(--text); background: var(--bg-soft); }
.nav__right { display: flex; align-items: center; gap: 16px; }
.nav__lang { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: var(--text-muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px;
  border-radius: 999px; font-size: 15px; font-weight: 500; white-space: nowrap;
  border: 1px solid transparent; transition: box-shadow .2s ease, background .15s ease;
}
.btn--sm { padding: 9px 16px; font-size: 14px; }
.btn--primary {
  color: #fff; font-weight: 600;
  background: linear-gradient(135deg, #8F74FF 0%, #7C5CFF 55%, #5A3FE0 100%);
  border-color: rgba(255, 255, 255, 0.14);
  /* Two soft halos instead of a hard edge: a close one for depth, a wide one so
     the button melts into the page like the thread's glow. */
  box-shadow: 0 2px 6px -1px rgba(90, 63, 224, 0.35), 0 14px 34px -8px rgba(124, 92, 255, 0.55);
  transition: box-shadow .25s ease, transform .25s ease, filter .2s ease;
}
.btn--primary:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 3px 8px -1px rgba(90, 63, 224, 0.4), 0 18px 40px -8px rgba(124, 92, 255, 0.65); }
.btn--ghost { background: #fff; color: var(--text); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--bg-soft); }
/* Inline marks: an element sized to the text, painted in currentColor. */
.ic {
  display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; flex: none;
  background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
}
.ic--right { --ic: var(--ic-right); }
.ic--down { --ic: var(--ic-down); }
.ic--up { --ic: var(--ic-up); }
.ic--chev { --ic: var(--ic-chev); width: .8em; height: .8em; }
.ic--wave { --ic: var(--ic-wave); }
.ic--home { --ic: var(--ic-home); }
.ic--check { --ic: var(--ic-check); }
.ic--replay { --ic: var(--ic-replay); }
.btn .ic { width: 15px; height: 15px; }
/* Legacy hook from the earlier mockups (a text arrow inside the button). */
.btn__arrow { display: inline-block; width: 15px; height: 15px; font-size: 0; background: currentColor; -webkit-mask: var(--ic-right) center / contain no-repeat; mask: var(--ic-right) center / contain no-repeat; }

/* ---------- Hero ---------- */
.hero {
  position: relative; height: 100vh; min-height: 700px;
  padding-top: var(--nav-h); overflow: hidden;
}
.stage {
  position: absolute; left: 0; right: 0; top: var(--nav-h); bottom: 0; z-index: 1;
  --fa: 45%; --fb: 62%; --fc: 90%; --fd: 100%;
}
/* Dissolve on both sides: white-to-transparent overlays instead of a mask,
   so the panorama can pan as a composited layer and no per-frame masking. */
.stage::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #fff var(--fa), transparent var(--fb), transparent var(--fc), #fff var(--fd));
}
.stage svg { display: block; position: relative; width: 100%; height: 100%; }
.stage__strokes { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#world { will-change: transform; }
/* Anything redrawn every frame (threads with the travelling wave, packets,
   pulses, bobbing ship, rotating parts) sits on its own compositor layer, so
   its updates repaint only itself and never the text and machines around it. */
.stage .cmp { will-change: transform; }
.stage__note {
  position: absolute; right: 56px; bottom: 18px; z-index: 1;
  font-size: 12.5px; font-style: italic; color: var(--text-dim);
}
.hero__grid {
  position: relative; z-index: 2; height: 100%;
  max-width: var(--container); margin: 0 auto; padding: 0 48px;
  display: grid; grid-template-columns: minmax(0, 4.6fr) minmax(0, 6.4fr); gap: 56px;
  align-items: center; pointer-events: none;
}
.copy { pointer-events: auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 8px; border-radius: 999px;
  background: var(--bg-soft); border: 1px solid var(--border);
  font-size: 13px; font-weight: 500; color: var(--text-muted);
}
.eyebrow svg { display: block; }
.step {
  margin-top: 26px; min-height: 18px;
  font-size: 14px; font-weight: 600; color: var(--violet-ink); font-variant-numeric: tabular-nums;
  transition: opacity .3s ease;
}
.step.is-fading { opacity: 0; }

/* Two stacked layers crossfade; both sit in one grid cell so the block
   keeps its height and the buttons below never jump. */
/* Height reserved for the longest copy (3-line title + 3-line sub) so the
   buttons below stay put while the text changes. */
.live {
  --ts: clamp(40px, 3.3vw, 68px); --ss: clamp(16px, 1.25vw, 22px);
  display: grid; align-content: start; margin-top: 12px;
  min-height: calc(4 * 1.08 * var(--ts) + 18px + 3 * 1.6 * var(--ss));
}
.live__layer {
  grid-area: 1 / 1; opacity: 0; transform: translateY(12px);
  transition: opacity .35s ease, transform .5s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.live__layer.is-on {
  opacity: 1; transform: none; pointer-events: auto;
  transition-delay: .15s; transition-duration: .55s, .7s;
}
.live__layer.is-off { opacity: 0; transform: translateY(-10px); }
/* Screenshot mode (?t=): no transitions, so frozen frames show final copy. */
.snap .live__layer, .snap .step, .snap .fo-reveal, .snap .cue, .snap .next__line * { transition: none !important; }
.live__title {
  margin: 0; font-size: var(--ts); line-height: 1.08; letter-spacing: -0.03em; font-weight: 500;
}
.accent {
  background: linear-gradient(90deg, #00A9D6 0%, #5A3FE0 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.live__sub {
  margin: 18px 0 0; max-width: 32em;
  font-size: var(--ss); line-height: 1.6; color: var(--text-muted);
}
.cta { margin-top: 26px; display: flex; gap: 12px; }

/* Chapter bar doubles as a table of contents for the story. */
.player { margin-top: 40px; display: flex; align-items: flex-start; gap: 16px; max-width: 520px; }
.player__btn {
  all: unset; cursor: pointer; flex: none; width: 30px; height: 30px; margin-top: -9px;
  border-radius: 50%; border: 1px solid var(--border-strong); background: #fff;
  display: grid; place-items: center; color: var(--text);
}
.player__btn:hover { background: var(--bg-soft); }
.player__btn svg { display: block; }
.player__btn.is-replay { width: auto; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500; gap: 6px; display: inline-flex; }
.chapters { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.chap { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 7px; }
.chap__bar { height: 3px; border-radius: 2px; background: var(--border-strong); overflow: hidden; }
.chap__bar i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; will-change: transform; background: linear-gradient(90deg, var(--cyan), var(--violet)); }
.chap__name { font-size: 12px; font-weight: 500; color: var(--text-dim); white-space: nowrap; }
.chap.is-current .chap__name { color: var(--text); }
.chap:hover .chap__name { color: var(--violet-ink); }

/* Scroll cue at the end of the descent line. */
.cue {
  position: absolute; z-index: 3; bottom: 26px; left: 0;
  transform: translate(-50%, 8px); opacity: 0; pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px; background: #fff;
  border: 1px solid var(--border-strong); box-shadow: 0 10px 30px -12px rgba(10,11,16,.3);
  font-size: 14px; font-weight: 500;
  transition: opacity .5s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
.cue.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.cue__arrow { color: var(--violet-ink); animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: none; } 50% { transform: translateY(3px); } }

/* ---------- Block 2 stub ---------- */
.next { position: relative; min-height: 70vh; background: var(--bg-soft); border-top: 1px solid var(--border); }
.next__line { position: absolute; left: 0; top: 0; width: 100%; height: 140px; overflow: visible; }
.next__line path {
  fill: none; stroke: var(--violet); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .9s cubic-bezier(.45,0,.2,1);
}
.next__line circle { fill: var(--violet); opacity: 0; transition: opacity .3s ease .8s; }
.next.is-linked .next__line path { stroke-dashoffset: 0; }
.next.is-linked .next__line circle { opacity: 1; }
.next__inner { max-width: var(--container); margin: 0 auto; padding: 150px 48px 80px; }
.next__eyebrow { font-size: 14px; font-weight: 600; color: var(--violet-ink); }
.next h2 { margin: 12px 0 0; font-size: 40px; font-weight: 500; letter-spacing: -0.03em; }
.next p { color: var(--text-muted); }

/* ---------- SVG drawing styles ---------- */
.thread { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ink { fill: none; stroke: #2B3242; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.ink-fill { fill: #fff; stroke: #2B3242; stroke-width: 1.5; stroke-linejoin: round; }
.ink-thin { fill: none; stroke: #8A93A6; stroke-width: 1; stroke-linecap: round; }
.ink-box { stroke: #2B3242; stroke-width: 1; }
.lbl { font-family: var(--font-sans); font-size: 11.5px; font-weight: 500; fill: #7B8497; }
.lbl-strong { font-family: var(--font-sans); font-size: 13px; font-weight: 500; fill: #0A0B10; }
/* Secondary line under a label (kept its old class name; no longer mono). */
.lbl-mono { font-family: var(--font-sans); font-size: 11.5px; fill: #6B7385; }
.lbl-violet { font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; fill: #5A3FE0; }

/* HTML inside foreignObject (sizes are SVG user units). */
.stage foreignObject { overflow: visible; }
.fo { font-family: var(--font-sans); color: var(--text); padding: 10px; }
.fo-card {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 10px 22px -14px rgba(10, 11, 16, .35); padding: 14px 16px 12px;
}
.fo-tag { font-size: 11.5px; font-weight: 600; color: var(--violet-ink); }
.fo-title { margin-top: 5px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.fo-row { display: flex; align-items: center; gap: 10px; margin-top: 9px; font-size: 13px; color: var(--text-muted); }
.fo-eng {
  display: flex; align-items: center; gap: 9px; margin-top: 11px; padding-top: 10px;
  border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-muted);
}
.fo-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--bg-soft); border: 1px solid var(--border-strong); display: grid; place-items: center; color: var(--violet-ink); }
.fo-check { margin-left: auto; color: var(--ok); font-weight: 700; font-size: 14px; }
.fo-ticket {
  background: #fff; border: 1px dashed rgba(90, 63, 224, .45); border-radius: 12px;
  padding: 9px 14px; box-shadow: 0 8px 16px -12px rgba(10, 11, 16, .35);
}
.fo-ticket .fo-t { font-size: 13.5px; font-weight: 600; margin-top: 2px; }
.fo-ticket .fo-s { font-size: 11.5px; color: var(--text-muted); }
.fo-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: nowrap; }
.fo-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  background: #fff; border: 1px solid var(--border-strong); font-size: 12px; font-weight: 500; white-space: nowrap;
}
.fo-chip .ic { color: var(--violet-ink); width: 13px; height: 13px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.badge--warn { background: var(--warn-soft); color: var(--warn-ink); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }
.fo-reveal { opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .5s cubic-bezier(.16,1,.3,1); }
.fo-reveal.is-on { opacity: 1; transform: none; }