/* ===========================================================
   K-VRC · style.css
   Depth Tech · Dark-first · 3-beat Hero · 8 Bridge lines
   =========================================================== */

/* ──────────────────────────────────────────────────────────
   TOKENS
   ────────────────────────────────────────────────────────── */
:root {
  --bg:        #0B0D12;
  --surface:   #141821;
  --surface-2: #1C2130;
  --line:      rgba(255,255,255,0.06);
  --line-2:    rgba(255,255,255,0.12);

  --ink:       #F5F7FA;
  --ink-muted: #8A94A6;
  --ink-faint: rgba(245,247,250,0.45);

  --accent-cyan:  #6EE7FF;
  --accent-coral: #FF6B6B;
  --accent-amber: #FFD166;

  --o1-primary: #E64966;
  --o1-bone:    #F5EEE6;
  --o1-glow:    rgba(230,73,102,0.35);

  --o2-primary: #4ADEDE;
  --o2-steel:   #2B2D36;
  --o2-glow:    rgba(74,222,222,0.30);

  --o3-primary: #B16CEA;
  --o3-neon:    #FF5CAA;
  --o3-glow:    rgba(177,108,234,0.35);

  --warn: #FFB347;
  --ok:   #7BEF9C;

  --persona-reviewer: var(--accent-cyan);
  --persona-partner:  var(--accent-amber);
  --persona-press:    var(--accent-coral);
  --persona-talent:   var(--ok);

  --shadow-card: 0 24px 48px -24px rgba(0,0,0,0.55),
                 inset 0 1px 0 rgba(255,255,255,0.06);
  --shadow-nav:  0 10px 30px -10px rgba(0,0,0,0.6);

  --font-display: "Pretendard Variable", "Inter", ui-sans-serif, system-ui;
  --font-body:    "Pretendard Variable", "Inter", ui-sans-serif, system-ui;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  --ease-quint:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-cubic:   cubic-bezier(0.83, 0, 0.17, 1);
  --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-xs: 120ms;
  --dur-s:  220ms;
  --dur-m:  420ms;
  --dur-l:  720ms;
  --dur-xl: 1200ms;
}

[data-track="o1"] { --track-primary: var(--o1-primary); --track-glow: var(--o1-glow); }
[data-track="o2"] { --track-primary: var(--o2-primary); --track-glow: var(--o2-glow); }
[data-track="o3"] { --track-primary: var(--o3-primary); --track-glow: var(--o3-glow); }

[data-persona="reviewer"] { --persona: var(--persona-reviewer); }
[data-persona="partner"]  { --persona: var(--persona-partner); }
[data-persona="press"]    { --persona: var(--persona-press); }
[data-persona="talent"]   { --persona: var(--persona-talent); }

/* ──────────────────────────────────────────────────────────
   RESET · BASE
   ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: auto; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  word-break: keep-all;
  overflow-wrap: break-word;
  font-feature-settings: "ss01", "ss02";
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; margin: 0; }
em { font-style: normal; }

.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; }
.skip-link {
  position: absolute; top: 8px; left: 8px;
  background: var(--accent-cyan); color: var(--bg);
  padding: 8px 14px; border-radius: 8px; font-weight: 600;
  transform: translateY(-200%); transition: transform var(--dur-s) var(--ease-quint);
  z-index: 100;
}
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--ink); outline-offset: 2px; }

:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; border-radius: 4px; }

.container {
  max-width: 1280px; margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 768px) { .container { padding: 0 32px; } }
@media (min-width: 1280px){ .container { padding: 0 64px; } }

/* ──────────────────────────────────────────────────────────
   CANVAS / BG / GRAIN / CURSOR
   ────────────────────────────────────────────────────────── */
#bg {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
.grain {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
  mix-blend-mode: overlay; opacity: 0.035;
}
#cursor {
  position: fixed; top: 0; left: 0;
  width: 24px; height: 24px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.7);
  mix-blend-mode: difference; pointer-events: none;
  z-index: 60; transform: translate(-100px,-100px);
  transition: transform 0.08s linear, width 0.2s var(--ease-quint), height 0.2s var(--ease-quint), background 0.2s;
}
#cursor.is-hover { width: 48px; height: 48px; background: rgba(255,255,255,0.08); }

/* bg-fallback — WebGL off branch */
body.bg-fallback #bg { display: none; }
body.bg-fallback {
  background:
    radial-gradient(1200px 600px at 15% 10%, rgba(110,231,255,0.10), transparent 60%),
    radial-gradient(900px  500px at 85% 30%, rgba(255,107,107,0.08), transparent 65%),
    radial-gradient(800px  600px at 50% 90%, rgba(255,209,102,0.07), transparent 65%),
    var(--bg);
}
body.bg-fallback::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: conic-gradient(from var(--angle,0deg),
    rgba(110,231,255,0.08), rgba(255,107,107,0.08),
    rgba(255,209,102,0.08), rgba(110,231,255,0.08));
  filter: blur(80px);
  animation: bg-rotate 28s linear infinite;
}
@property --angle { syntax:'<angle>'; initial-value: 0deg; inherits: false; }
@keyframes bg-rotate { to { --angle: 360deg; } }

/* ──────────────────────────────────────────────────────────
   TYPOGRAPHY — 3-beat hero scale + section scale
   ────────────────────────────────────────────────────────── */
.t-kicker {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.5rem, 7vw, 6rem); line-height: 1; letter-spacing: -0.05em;
  margin: 16px 0 0; color: var(--ink);
}
.t-kicker .kicker-dot { color: var(--accent-cyan); }

.t-hero {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.25rem, 8vw, 6.5rem); line-height: 1.02; letter-spacing: -0.04em;
  margin: 18px 0 0;
  max-inline-size: 18ch;
}
.t-hero .line { display: block; overflow: hidden; }
.t-hero .line > span { display: inline-block; }

.t-hold {
  position: relative;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.5rem, 8.5vw, 7rem); line-height: 1.02; letter-spacing: -0.045em;
  margin: 14px 0 32px;
  max-inline-size: 18ch;
}
.t-hold .accent-cyan { color: var(--accent-cyan); }
.t-hold .underline {
  position: absolute; left: 0; bottom: -6px; height: 3px; width: 52%;
  background: linear-gradient(90deg, var(--accent-cyan), transparent);
  transform-origin: 0 50%;
}

.t-hook {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 5.5vw, 4rem); line-height: 1.08; letter-spacing: -0.03em;
  margin: 16px 0 24px;
  max-inline-size: 22ch;
}
.t-hook em.accent-cyan { color: var(--accent-cyan); }
.t-hook em.accent-coral { color: var(--accent-coral); }
.t-hook em.accent-amber { color: var(--accent-amber); }

.t-h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 3.5vw, 3rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 16px; }
.t-h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 2.5vw, 2.25rem); line-height: 1.2;  letter-spacing: -0.015em; }
.t-h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.3; }

.eyebrow {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-muted);
  margin: 0 0 18px;
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--accent-cyan);
  box-shadow: 0 0 14px var(--accent-cyan);
}

.lead { font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--ink); opacity: 0.92; max-inline-size: 56ch; margin: 0 0 20px; }
.body { font-size: 1rem; color: var(--ink); opacity: 0.82; max-inline-size: 56ch; margin: 0 0 24px; }
.t-body-s { font-size: 0.875rem; line-height: 1.55; color: var(--ink-muted); }
.t-caption { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); }
.mono-label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }

.micro-caption { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-muted); margin: 32px 0 0; letter-spacing: 0.02em; }

.pullquote {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.2; letter-spacing: -0.02em;
  max-inline-size: 22ch; border-left: 2px solid var(--accent-cyan);
  padding: 8px 0 8px 24px; margin: 48px 0;
  color: var(--ink);
}

.accent-cyan  { color: var(--accent-cyan); }
.accent-coral { color: var(--accent-coral); }
.accent-amber { color: var(--accent-amber); }

/* ──────────────────────────────────────────────────────────
   NAV · TOC
   ────────────────────────────────────────────────────────── */
#nav { transition: background var(--dur-s) var(--ease-quint), backdrop-filter var(--dur-s) var(--ease-quint); }
#nav.is-scrolled {
  background: rgba(11,13,18,0.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
.nav-inner { position: relative; }
.nav-link { position: relative; padding: 4px 2px; color: var(--ink-muted); transition: color var(--dur-s) var(--ease-quint); }
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0%;
  background: var(--accent-cyan); transition: width var(--dur-s) var(--ease-quint);
}
.nav-link:hover, .nav-link[aria-current="true"] { color: var(--ink); }
.nav-link:hover::after, .nav-link[aria-current="true"]::after { width: 100%; }

.toc {
  position: fixed; top: 50%; left: 24px; transform: translateY(-50%);
  z-index: 30; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--ink-muted);
}
.toc ol { display: flex; flex-direction: column; gap: 10px; }
.toc a { display: flex; align-items: center; gap: 10px; opacity: 0.7; transition: opacity var(--dur-s); }
.toc a:hover, .toc a[aria-current="true"] { opacity: 1; color: var(--ink); }
.toc .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 999px;
  background: rgba(255,255,255,0.2); transition: all var(--dur-s) var(--ease-quint);
}
.toc a[aria-current="true"] .dot { background: var(--accent-cyan); box-shadow: 0 0 12px var(--accent-cyan); transform: scale(1.25); }
.toc-toggle {
  margin-top: 16px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink-muted);
}
.toc-toggle[aria-pressed="true"] { color: var(--accent-cyan); border-color: var(--accent-cyan); }

/* ──────────────────────────────────────────────────────────
   BUTTONS · CHIPS
   ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px; border-radius: 999px;
  font-weight: 600; letter-spacing: -0.01em; font-size: 0.9375rem;
  transition: transform var(--dur-s) var(--ease-quint), box-shadow var(--dur-s) var(--ease-quint), border-color var(--dur-s);
  will-change: transform;
}
.btn--xl { padding: 18px 36px; font-size: 1.125rem; }
.btn-primary { background: var(--accent-cyan); color: var(--bg); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 34px -14px rgba(110,231,255,0.55); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.btn-ghost:hover { border-color: rgba(255,255,255,0.32); background: rgba(255,255,255,0.03); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 12px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-muted);
  font-size: 11.5px; font-family: var(--font-mono); letter-spacing: 0.06em;
  border: 1px solid var(--line);
}
.chip--o1 { color: var(--o1-bone); border-color: var(--o1-primary); background: rgba(230,73,102,0.12); }
.chip--o2 { color: var(--accent-cyan); border-color: var(--o2-primary); background: rgba(74,222,222,0.12); }
.chip--o3 { color: var(--o3-neon); border-color: var(--o3-primary); background: rgba(177,108,234,0.12); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

/* ──────────────────────────────────────────────────────────
   SECTIONS — shared
   ────────────────────────────────────────────────────────── */
.section {
  position: relative; z-index: 10;
  padding-block: clamp(72px, 12vw, 128px);
}
.section-hero { padding-top: clamp(120px, 18vw, 180px); padding-bottom: clamp(72px, 10vw, 96px); min-height: 100vh; }
@media (min-width: 1024px) {
  #main { padding-left: 96px; /* toc space */ }
}
@media (max-width: 1279px) {
  #main { padding-left: 0; }
}

[data-reveal] { will-change: opacity, transform; }

/* ──────────────────────────────────────────────────────────
   HERO
   ────────────────────────────────────────────────────────── */
.section-hero .container { position: relative; }
.hero-sub { margin: 8px 0 28px; max-inline-size: 48ch; font-size: 1.0625rem; color: var(--ink); opacity: 0.84; }
.hero-sub-en { color: var(--ink-muted); font-size: 0.95rem; }

.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 44px; }

.kpi-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 18px;
  margin: 24px 0 22px;
}
@media (max-width: 1024px) { .kpi-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .kpi-row { grid-template-columns: repeat(2, 1fr); } }
.num-badge {
  background: rgba(20,24,33,0.55);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.num-eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.num-value { margin: 6px 0 4px; font-family: var(--font-mono); font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.num-value .unit { font-size: 0.8em; color: var(--ink-muted); margin-left: 4px; }
.num-value.trl { display: flex; gap: 8px; align-items: center; }
.num-value.trl .arr { color: var(--accent-cyan); }
.num-meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--ink-faint); }

.kpi-micro {
  display: flex; flex-wrap: wrap; gap: 18px 28px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em;
  color: var(--ink-muted); margin: 8px 0 28px;
}
.kpi-micro li { display: flex; gap: 8px; }
.kpi-micro .num { color: var(--accent-cyan); font-weight: 700; }

.hero-meta { margin: 0 0 20px; }
.meta-chip.live {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(20,24,33,0.55);
  border: 1px solid var(--line-2);
  font-family: var(--font-mono); font-size: 12px; color: var(--ink);
}
.dot-pulse { width: 8px; height: 8px; border-radius: 999px; background: var(--accent-cyan); box-shadow: 0 0 0 0 rgba(110,231,255,0.55); animation: dot-pulse 1.8s var(--ease-cubic) infinite; }
@keyframes dot-pulse { 0%{ box-shadow: 0 0 0 0 rgba(110,231,255,0.55);} 100%{ box-shadow: 0 0 0 12px rgba(110,231,255,0);} }

.scroll-hint {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-muted);
  margin-top: 20px; opacity: 0.8;
}
.scroll-hint svg { animation: float 1.6s var(--ease-cubic) infinite; }
@keyframes float { 0%,100%{ transform: translateY(-2px); } 50%{ transform: translateY(4px); } }

/* ──────────────────────────────────────────────────────────
   BRIDGE
   ────────────────────────────────────────────────────────── */
.bridge {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  max-inline-size: 52ch; margin: 8vh auto; padding: 18px 24px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  z-index: 10;
}
.bridge .t-bridge {
  font-family: var(--font-display); font-size: clamp(1.0625rem, 1.8vw, 1.375rem); line-height: 1.5;
  letter-spacing: -0.01em; color: var(--ink); opacity: 0.85; margin: 0;
  max-inline-size: 46ch;
}
.bridge__dot {
  width: 8px; height: 8px; flex: 0 0 8px; border-radius: 999px;
  background: var(--accent-cyan); box-shadow: 0 0 20px var(--accent-cyan);
  animation: bridge-breathe 3.2s var(--ease-cubic) infinite;
}
@keyframes bridge-breathe {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50%      { opacity: 1.0; transform: scale(1.15); }
}
@media (max-width: 767px){ .bridge { max-inline-size: 40ch; margin: 6vh auto; } }

/* ──────────────────────────────────────────────────────────
   WHY NOW — horizontal timeline
   ────────────────────────────────────────────────────────── */
.timeline-pin { position: relative; height: 100vh; overflow: hidden; margin-top: 48px; }
.timeline-track { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 10vw; }
.timeline-rail {
  position: relative;
  display: flex; gap: min(6vw, 80px); align-items: center;
  padding: 40px 0;
}
.timeline-rail::before {
  content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28) 10%, rgba(255,255,255,0.28) 90%, transparent);
}
.ev {
  position: relative; flex: 0 0 min(320px, 70vw);
  padding: 24px; border: 1px solid var(--line); border-radius: 18px;
  background: rgba(20,24,33,0.55); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ev .year { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--accent-cyan); text-transform: uppercase; }
.ev .title { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin: 6px 0 6px; color: var(--ink); }
.ev .desc { color: var(--ink-muted); font-size: 0.9375rem; }
.ev .tag { margin-top: 14px; display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.ev--now  { border-color: var(--accent-cyan); box-shadow: 0 0 0 1px var(--accent-cyan) inset, 0 20px 60px -30px rgba(110,231,255,0.6); }
.ev--now::before { content: ''; position: absolute; top: -10px; bottom: -10px; left: -6px; width: 2px; background: var(--accent-coral); box-shadow: 0 0 18px var(--accent-coral); }
.ev--shock .title, .ev--future .desc { color: var(--accent-coral); }
.tag--now { color: var(--accent-cyan); border: 1px solid var(--accent-cyan); }
.tag--shock { color: var(--accent-coral); border: 1px solid var(--accent-coral); }
.tag--future { color: var(--warn); border: 1px solid var(--warn); }

.live-badge {
  position: fixed; right: 18px; bottom: 18px; z-index: 30;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 999px;
  background: rgba(20,24,33,0.78); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line-2);
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink);
  letter-spacing: 0.04em;
  opacity: 0; transform: translateY(20px);
  transition: opacity var(--dur-m) var(--ease-quint), transform var(--dur-m) var(--ease-quint);
}
.live-badge.is-visible { opacity: 1; transform: translateY(0); }
.live-badge strong { color: var(--accent-cyan); margin: 0 4px; }
.live-badge .sep { color: var(--ink-faint); }

/* ──────────────────────────────────────────────────────────
   GAP
   ────────────────────────────────────────────────────────── */
.gap-axes {
  display: grid; gap: 16px; grid-template-columns: repeat(3,1fr);
  margin: 36px 0 40px;
}
@media (max-width: 768px) { .gap-axes { grid-template-columns: 1fr; } }
.axis {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px;
}
.axis header { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-cyan); margin-bottom: 10px; }
.axis ul { display: flex; flex-direction: column; gap: 8px; color: var(--ink); font-size: 0.9375rem; }
.axis ul li::before { content: '— '; color: var(--ink-faint); }

.venn {
  display: flex; justify-content: center; margin: 24px 0 40px;
  filter: drop-shadow(0 30px 80px rgba(110,231,255,0.15));
}
.venn svg { width: clamp(280px, 50vw, 480px); height: auto; }
.venn__c { transform-origin: center; mix-blend-mode: screen; transition: transform var(--dur-xl) var(--ease-cubic); }

.gap-cells {
  display: grid; gap: 16px;
  grid-template-columns: repeat(6, 1fr);
  margin: 32px 0 40px;
}
.gap-cells .cell:nth-child(1), .gap-cells .cell:nth-child(2) { grid-column: span 3; }
.gap-cells .cell:nth-child(3), .gap-cells .cell:nth-child(4), .gap-cells .cell:nth-child(5) { grid-column: span 2; }
@media (max-width: 1024px) { .gap-cells { grid-template-columns: repeat(2,1fr); } .gap-cells .cell { grid-column: span 1 !important; } }
@media (max-width: 640px)  { .gap-cells { grid-template-columns: 1fr; } }

.cell {
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 22px;
  transition: border-color var(--dur-s), transform var(--dur-s);
}
.cell:hover { border-color: var(--line-2); transform: translateY(-2px); }
.cell__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.cell h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; margin: 6px 0 6px; }
.cell p { color: var(--ink-muted); font-size: 0.9375rem; margin: 0; }
.cell .stars { color: var(--accent-amber); letter-spacing: 0.04em; font-size: 13px; }

.priority-radar {
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 22px;
  display: grid; grid-template-columns: 240px 1fr; gap: 22px; align-items: center;
  margin: 24px 0 16px;
}
.priority-radar .radar { width: 100%; height: auto; }
.priority-radar .radar .b { transition: transform var(--dur-l) var(--ease-elastic); transform-origin: center; }
@media (max-width: 768px) { .priority-radar { grid-template-columns: 1fr; } }

.accordion {
  margin-top: 16px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: 14px; background: rgba(20,24,33,0.45);
}
.accordion summary { cursor: pointer; font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.accordion[open] summary { color: var(--accent-cyan); }
.accordion p { color: var(--ink-muted); margin: 10px 0 0; }

/* ──────────────────────────────────────────────────────────
   TRACKS — 3 panels + O4 band
   ────────────────────────────────────────────────────────── */
.section-tracks { padding-bottom: 0; }
.tracks-stack { position: relative; }
.track-panel {
  position: relative;
  padding-block: clamp(64px, 10vw, 120px);
  border-top: 1px solid var(--line);
  min-height: 90vh; display: flex; align-items: center;
  isolation: isolate;
}
.track-panel::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(900px 600px at 20% 0%, var(--track-glow, transparent), transparent 60%),
              radial-gradient(900px 600px at 100% 100%, var(--track-glow, transparent), transparent 60%);
  opacity: 0.7;
}
.track-panel .container { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 1024px) { .track-panel .container { grid-template-columns: 1fr; } }

.track-panel .eyebrow::before { background: var(--track-primary, var(--accent-cyan)); box-shadow: 0 0 12px var(--track-primary, var(--accent-cyan)); }
.track-panel h3 { color: var(--ink); }
.track-panel .lead { color: var(--ink); opacity: 0.85; }

.rq {
  font-family: var(--font-mono); font-size: 13px;
  background: rgba(11,13,18,0.6); border: 1px solid var(--line-2); border-radius: 12px;
  padding: 14px 16px; margin: 16px 0 20px; color: var(--ink);
  display: flex; gap: 10px; align-items: flex-start;
}
.rq .prompt { color: var(--track-primary, var(--accent-cyan)); flex: 0 0 auto; }
.rq .rq-text::after { content: '▎'; color: var(--track-primary, var(--accent-cyan)); animation: caret 1s infinite steps(2); }
@keyframes caret { 50% { opacity: 0; } }

.layer-stack { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 22px; }
.layer {
  position: relative;
  padding: 14px 18px; border-radius: 12px;
  background: rgba(20,24,33,0.55); border: 1px solid var(--line);
  font-size: 0.9375rem; color: var(--ink);
  display: flex; align-items: center; gap: 14px;
  transform: translateX(-12px); opacity: 0; transition: transform var(--dur-m) var(--ease-quint), opacity var(--dur-m);
}
.layer.is-visible { transform: translateX(0); opacity: 1; }
.layer span:first-child {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--track-primary, var(--accent-cyan)); flex: 0 0 28px;
}

.kpi-inline { display: flex; flex-wrap: wrap; gap: 10px; }
.kpi-inline li { display: flex; flex-direction: column; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; min-width: 120px; }
.kpi-inline b { font-family: var(--font-mono); color: var(--track-primary, var(--accent-cyan)); font-size: 0.95rem; font-weight: 700; }
.kpi-inline span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--ink-muted); text-transform: uppercase; margin-top: 4px; }

.metaphor {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  border: 1px dashed var(--line-2); border-radius: 24px; padding: 28px; background: rgba(11,13,18,0.4);
  color: var(--ink-muted); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-align: center;
}
.metaphor svg { width: clamp(120px, 18vw, 180px); height: auto; color: var(--track-primary); }

.o4-band {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(74,222,222,0.06), rgba(110,231,255,0.05) 50%, rgba(255,209,102,0.06));
  height: 72px; display: flex; align-items: center;
}
.o4-marquee {
  display: flex; gap: 56px; white-space: nowrap;
  animation: marquee 28s linear infinite;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; color: var(--ink);
}
.o4-marquee span { display: inline-flex; align-items: center; gap: 8px; }
.o4-marquee span::before { content: '▸'; color: var(--accent-cyan); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ──────────────────────────────────────────────────────────
   ROADMAP — Gantt + TRL
   ────────────────────────────────────────────────────────── */
.gantt {
  margin: 32px 0 40px;
  border: 1px solid var(--line); border-radius: 20px; background: var(--surface);
  padding: 20px;
  overflow-x: auto;
}
.gantt__head {
  display: grid; grid-template-columns: 160px 1fr 1fr 1fr;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ink-muted);
  text-transform: uppercase; margin-bottom: 6px;
}
.gantt__head .phase { text-align: center; }
.gantt__quarters {
  display: grid; grid-template-columns: 160px repeat(12, 1fr);
  gap: 2px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 8px;
}
.gantt__quarters span { text-align: center; }
.gantt__quarters span:first-child { display: none; }
.gantt__rows .row {
  display: grid; grid-template-columns: 160px repeat(12, 1fr);
  align-items: center; min-height: 46px; border-bottom: 1px solid var(--line);
  padding: 6px 0; position: relative;
}
.gantt__rows .row:last-child { border-bottom: 0; }
.gantt__rows .row .label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--ink); padding-left: 6px; }
.gantt__rows .bar {
  grid-column-start: calc(var(--start) + 1);
  grid-column-end:   calc(var(--end) + 1);
  height: 22px; border-radius: 999px;
  background: linear-gradient(90deg, var(--bar-start, var(--accent-cyan)), var(--bar-end, var(--accent-cyan)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
  position: relative; overflow: hidden;
  transform-origin: 0 50%; transform: scaleX(0);
  display: flex; align-items: center; padding: 0 10px;
}
.gantt__rows .bar.is-filled { transform: scaleX(1); transition: transform 0.8s var(--ease-quint); }
.gantt__rows .bar i {
  font-style: normal; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  color: rgba(11,13,18,0.9); font-weight: 700; text-transform: uppercase;
  opacity: 0; transition: opacity 0.4s var(--ease-quint) 0.5s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gantt__rows .bar.is-filled i { opacity: 1; }
.gantt__rows .row[data-track="o1"] .bar { --bar-start: var(--o1-primary); --bar-end: var(--o1-bone); }
.gantt__rows .row[data-track="o2"] .bar { --bar-start: var(--o2-primary); --bar-end: var(--accent-cyan); }
.gantt__rows .row[data-track="o3"] .bar { --bar-start: var(--o3-primary); --bar-end: var(--o3-neon); }
.gantt__rows .row[data-track="o4"] .bar { --bar-start: var(--accent-amber); --bar-end: var(--accent-cyan); height: 14px; }
.bar--under { opacity: 0.85; }

.roadmap-side {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: flex-start;
  margin-bottom: 16px;
}
@media (max-width: 900px) { .roadmap-side { grid-template-columns: 1fr; } }
.trl-steps h3 { font-family: var(--font-display); font-weight: 700; margin: 0 0 12px; }
.trl-steps svg { width: 100%; height: auto; }
#trlLine { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
#trlLine.is-drawn { transition: stroke-dashoffset 2.4s var(--ease-cubic); stroke-dashoffset: 0; }

.deps { font-family: var(--font-mono); font-size: 12px; color: var(--ink); display: flex; flex-direction: column; gap: 6px; }
.deps li {
  display: grid; grid-template-columns: 90px 1fr; gap: 10px;
  padding: 10px 14px; border: 1px dashed var(--line-2); border-radius: 10px;
  background: rgba(20,24,33,0.35);
}
.deps .q { color: var(--warn); font-weight: 700; letter-spacing: 0.08em; }

/* ──────────────────────────────────────────────────────────
   CONSORTIUM
   ────────────────────────────────────────────────────────── */
.filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 28px 0 18px; }
.filter {
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line-2); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.filter:hover { color: var(--ink); }
.filter.active { color: var(--bg); background: var(--accent-cyan); border-color: var(--accent-cyan); }

.network-wrap {
  display: grid; grid-template-columns: 1fr 320px; gap: 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  padding: 16px; min-height: 540px; position: relative;
}
@media (max-width: 900px) { .network-wrap { grid-template-columns: 1fr; } }
#network { width: 100%; height: 520px; background: rgba(11,13,18,0.35); border-radius: 14px; }
#network .link { stroke: rgba(255,255,255,0.12); stroke-width: 1; }
#network .node { cursor: grab; }
#network .node:active { cursor: grabbing; }
#network .node circle, #network .node rect, #network .node polygon, #network .node path { transition: opacity var(--dur-s), stroke-width var(--dur-s); }
#network .node text { font-family: var(--font-mono); font-size: 10px; fill: var(--ink); pointer-events: none; letter-spacing: 0.08em; }
#network .node.is-hub circle { stroke: var(--accent-cyan); stroke-width: 2; }
#network.is-filtered .node.dim { opacity: 0.2; }
#network.is-filtered .link.dim { opacity: 0.08; }

.node-panel {
  background: rgba(11,13,18,0.6); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px; color: var(--ink);
}
.node-panel h4 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; }
.node-panel .kv { display: grid; grid-template-columns: 70px 1fr; gap: 6px 10px; margin-top: 8px; font-size: 13px; }
.node-panel .kv dt { color: var(--ink-muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }

.rr-table {
  width: 100%; margin-top: 24px; border-collapse: collapse;
  font-size: 13px; color: var(--ink);
  display: none;
}
.rr-table th, .rr-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.rr-table th { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
@media (max-width: 768px) {
  .network-wrap { display: none; }
  .rr-table { display: table; }
}

.gov-pyramid { margin-top: 28px; }
.gov-pyramid .pyramid { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 14px 0; }
.gov-pyramid .tier { padding: 10px 18px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; }
.gov-pyramid .t1 { width: min(340px, 80%); color: var(--accent-cyan); border-color: rgba(110,231,255,0.4); }
.gov-pyramid .t2 { width: min(460px, 90%); }
.gov-pyramid .t3 { width: min(580px, 95%); color: var(--warn); border-color: rgba(255,179,71,0.3); }

/* ──────────────────────────────────────────────────────────
   KPI
   ────────────────────────────────────────────────────────── */
.kpi-dashboard { margin: 32px 0 40px; }
.kpi-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.kpi-tab {
  padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-2);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted);
}
.kpi-tab.active { background: var(--accent-cyan); color: var(--bg); border-color: var(--accent-cyan); }
@media (max-width: 768px){ .kpi-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; } .kpi-tab { flex: 0 0 auto; } }

.kpi-pane { display: none; grid-template-columns: repeat(3, 1fr) 2fr; gap: 18px; align-items: center; }
.kpi-pane.active { display: grid; }
@media (max-width: 900px) { .kpi-pane.active { grid-template-columns: repeat(3, 1fr); } .kpi-pane .kpi-note { grid-column: 1 / -1; } }
@media (max-width: 560px) { .kpi-pane.active { grid-template-columns: 1fr 1fr; } }

.gauge { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; text-align: center; }
.gauge svg { width: 100%; height: auto; max-width: 140px; margin: 0 auto 6px; display: block; }
.gauge__ring { stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset 1.4s var(--ease-cubic); }
.gauge.is-filled .gauge__ring { stroke-dashoffset: var(--target, 0); }
.gauge b { display: block; font-family: var(--font-mono); font-size: 1rem; color: var(--ink); margin-top: 6px; font-variant-numeric: tabular-nums; }
.gauge span { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--ink-muted); text-transform: uppercase; }
.kpi-note { color: var(--ink-muted); font-size: 0.95rem; }

.roi-chart { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 24px; margin: 20px 0 32px; }
.roi-chart h3 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.125rem, 2vw, 1.5rem); }
.roi-chart svg { width: 100%; height: auto; }
#roiLine { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
#roiArea { clip-path: inset(0 100% 0 0); }
.roi-chart.is-drawn #roiLine { transition: stroke-dashoffset 1.8s var(--ease-cubic); stroke-dashoffset: 0; }
.roi-chart.is-drawn #roiArea { transition: clip-path 1.8s var(--ease-cubic); clip-path: inset(0 0 0 0); }
.roi-points text { font-family: var(--font-mono); }

.impact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }
@media (max-width: 900px) { .impact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .impact-grid { grid-template-columns: 1fr; } }
.impact-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; transition: transform var(--dur-s); }
.impact-card:hover { transform: translateY(-2px); border-color: var(--line-2); }
.impact-card h4 { margin: 0 0 6px; font-size: 1rem; font-family: var(--font-display); font-weight: 700; color: var(--accent-cyan); }
.impact-card p { margin: 0; color: var(--ink-muted); font-size: 0.9375rem; }

/* ──────────────────────────────────────────────────────────
   TEAM
   ────────────────────────────────────────────────────────── */
.section-team { position: relative; }
.paper-drift {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
  perspective: 600px;
}
.paper-drift span {
  position: absolute; font-family: var(--font-mono); font-size: clamp(1.125rem, 2.2vw, 2rem);
  color: rgba(255,255,255,0.07); letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap; will-change: transform;
}
.team-grid {
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 16px;
  margin: 32px 0 40px; position: relative; z-index: 1;
}
.team-grid .card--pi { grid-column: span 1; grid-row: span 2; min-height: 100%; }
@media (max-width: 1024px) { .team-grid { grid-template-columns: repeat(2, 1fr); } .team-grid .card--pi { grid-column: span 2; grid-row: auto; } }
@media (max-width: 560px)  { .team-grid { grid-template-columns: 1fr; } .team-grid .card--pi { grid-column: span 1; } }

.card--team {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  padding: 22px; display: flex; flex-direction: column; gap: 8px;
  transition: transform var(--dur-s), border-color var(--dur-s);
}
.card--team:hover { border-color: var(--line-2); transform: translateY(-2px); }
.card--team .indicator { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent-cyan); border-radius: 20px 20px 0 0; }
.card--team[data-track-indicator="o1"]   .indicator { background: var(--o1-primary); }
.card--team[data-track-indicator="o2"]   .indicator { background: var(--o2-primary); }
.card--team[data-track-indicator="o3"]   .indicator { background: var(--o3-primary); }
.card--team[data-track-indicator="o1o2"] .indicator { background: linear-gradient(90deg, var(--o1-primary), var(--o2-primary)); }
.card--team[data-track-indicator="o1o3"] .indicator { background: linear-gradient(90deg, var(--o1-primary), var(--o3-primary)); }
.card--team .avatar {
  width: 56px; height: 56px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--accent-cyan);
  font-family: var(--font-display); font-weight: 900; font-size: 1.5rem;
  margin-top: 8px;
}
.card--pi .avatar { width: 72px; height: 72px; font-size: 2rem; }
.card--team h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.0625rem, 1.5vw, 1.375rem); margin: 0; font-variation-settings: "wght" 700; transition: font-variation-settings 240ms; }
.card--team:hover h3 { font-variation-settings: "wght" 820; }
.card--team .aff { color: var(--ink-muted); font-size: 0.875rem; margin: 0; font-family: var(--font-mono); letter-spacing: 0.04em; }
.card--team .role { color: var(--ink); opacity: 0.82; font-size: 0.9375rem; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); }
.achievements { display: flex; flex-direction: column; gap: 4px; font-size: 0.875rem; color: var(--ink-muted); }
.achievements li::before { content: '— '; color: var(--ink-faint); }

.genealogy { margin-top: 24px; }
.genealogy ol {
  display: flex; gap: 16px; overflow-x: auto; padding: 12px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.genealogy li { display: flex; flex-direction: column; gap: 4px; min-width: 160px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-muted); letter-spacing: 0.04em; }
.genealogy .y { color: var(--accent-cyan); font-weight: 700; letter-spacing: 0.1em; }
.genealogy .now .y { color: var(--accent-coral); }
.genealogy .now span:not(.y) { color: var(--ink); font-weight: 700; }

/* ──────────────────────────────────────────────────────────
   CTA
   ────────────────────────────────────────────────────────── */
.persona-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin: 32px 0 32px;
}
@media (max-width: 1024px){ .persona-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .persona-grid { grid-template-columns: 1fr; } }

.card--persona {
  position: relative;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  padding: 22px; display: flex; flex-direction: column; gap: 10px;
  transition: border-color var(--dur-s), transform var(--dur-s);
}
.card--persona:hover { border-color: var(--line-2); transform: translateY(-2px); }
.card--persona .indicator { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--persona); border-radius: 20px 20px 0 0; }
.card--persona .mono-label { color: var(--persona); }
.card--persona h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin: 0; }
.card--persona ul { display: flex; flex-direction: column; gap: 6px; color: var(--ink); font-size: 0.9375rem; }
.card--persona ul li::before { content: '— '; color: var(--ink-faint); }
.card--persona .btn { align-self: flex-start; margin-top: 6px; }

.cta-main { margin: 24px 0 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cta-main .btn--xl { position: relative; }

/* ──────────────────────────────────────────────────────────
   FOOTER
   ────────────────────────────────────────────────────────── */
.footer { position: relative; padding: 80px 0 32px; background: linear-gradient(180deg, transparent, rgba(11,13,18,0.9)); border-top: 1px solid var(--line); overflow: hidden; }
.footer-wordmark {
  position: absolute; left: 50%; bottom: -4vw; transform: translateX(-50%);
  font-family: var(--font-display); font-weight: 900; font-size: clamp(6rem, 20vw, 16rem);
  color: var(--ink); opacity: 0.06; letter-spacing: -0.04em; pointer-events: none; z-index: 0;
}
.footer-grid {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px;
  position: relative; z-index: 1;
}
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; } }
.fcol p { margin: 0 0 8px; color: var(--ink-muted); font-size: 0.9375rem; }
.fcol ul { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
.fcol ul a { color: var(--ink-muted); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; }
.fcol ul a:hover { color: var(--accent-cyan); }
.footer-logo-strip {
  display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center;
  margin: 40px 0 20px; padding: 0 20px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint);
  position: relative; z-index: 1;
}
.footer-logo-strip span { transition: color var(--dur-s); cursor: default; }
.footer-logo-strip span:hover { color: var(--ink); }
.footer-note { text-align: center; position: relative; z-index: 1; color: var(--ink-faint); }

/* ──────────────────────────────────────────────────────────
   REDUCED MOTION / MOBILE overrides
   ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
@media (max-width: 767px) {
  #cursor { display: none; }
  .timeline-pin { height: auto; overflow: visible; padding: 24px 0; }
  .timeline-track { position: static; padding: 0; }
  .timeline-rail { flex-direction: column; gap: 16px; align-items: stretch; }
  .timeline-rail::before { display: none; }
  .ev { flex: 1 1 auto; }
  .gantt__head, .gantt__quarters, .gantt__rows .row { grid-template-columns: 110px 1fr; grid-auto-flow: row; }
  .gantt__head .phase, .gantt__quarters span:not(:first-child) { display: none; }
  .gantt__rows .bar { grid-column: 2 / -1 !important; transform: scaleX(1); }
  .track-panel { min-height: auto; }
  .paper-drift { display: none; }
}