/* ═══════════════════════════════════════════════════════════════
   ZYCODA·ASTRA — landing page
   Direction: industrial control room / technical drawing.
   Ink + bone paper + hi-vis ember. Hairlines, registration marks,
   monospace instrumentation, oversized signage type.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Palette lifted from the app shell (frontend/app/globals.css, .dark scope):
     Obsidian Navy base + the astra neon accents. Keep these in sync with it. */
  --ink:        #080c14;   /* --shell-bg / --background */
  --ink-2:      #0d121f;   /* sunken wells */
  --ink-3:      #131b2e;   /* cards */
  --void:       #05070d;   /* deeper than the app, for the pipeline zone */
  --paper:      #eef1f8;   /* light shell-bg */
  --paper-2:    #e2e8f0;

  --accent:      #8b5cf6;  /* --astra-purple */
  --accent-deep: #6d28d9;  /* readable violet on the light zone */
  --cyan:        #00f0ff;  /* --astra-blue */
  --orange:      #f97316;  /* --astra-orange */
  --green:       #10b981;  /* --astra-green */
  --zblue:       #2B5EC0;  /* ZYCODA brand blue (sampled from logo-light.png) */

  --fg-ink:     #f8fafc;
  --fg-ink-dim: #94a3b8;
  --fg-paper:   #0f172a;
  --fg-paper-dim: #475569;

  --line-on-ink:   rgba(255, 255, 255, .08);   /* --glass-border */
  --line-on-paper: rgba(15, 23, 42, .12);

  --f-display: 'Archivo', 'Anuphan', system-ui, sans-serif;
  --f-body:    'Anuphan', 'Archivo', system-ui, sans-serif;
  --f-mono:    'Martian Mono', ui-monospace, 'SFMono-Regular', monospace;

  --pad: clamp(18px, 4.6vw, 88px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg-ink);
  font-family: var(--f-body);
  font-size: clamp(15px, .55vw + 13px, 17.5px);
  line-height: 1.62;
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--accent); color: #080c14; }

.skip {
  position: fixed; top: 10px; left: 10px; z-index: 10000;
  padding: .6em 1em; background: var(--accent); color: #080c14;
  font-family: var(--f-body); font-weight: 600;
  transform: translateY(-160%); transition: transform .25s var(--ease);
}
.skip:focus { transform: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── zones ───────────────────────────────────────────────────── */
.zone-ink   { background: var(--ink);  color: var(--fg-ink); }
.zone-void  { background: var(--void); color: var(--fg-ink); }
.zone-paper  { background: var(--paper); color: var(--fg-paper); }
.zone-accent { background: var(--accent); color: #080c14; }

/* ── atmosphere: grain + top progress hairline ───────────────── */
.grain {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 5s steps(6) infinite;
}
@keyframes grainShift {
  0%   { background-position: 0 0; }
  20%  { background-position: -30px 20px; }
  40%  { background-position: 20px -30px; }
  60%  { background-position: -20px -20px; }
  80%  { background-position: 30px 10px; }
  100% { background-position: 0 0; }
}

.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 9999; background: transparent;
}
.progress i {
  display: block; height: 100%; width: 0%;
  background: var(--accent); box-shadow: 0 0 14px rgba(139, 92, 246, .75);
}

/* ── shared type ─────────────────────────────────────────────── */
.label {
  font-family: var(--f-mono); font-size: .64rem; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--accent);
}
.zone-paper .label { color: var(--accent-deep); }

.display {
  font-family: var(--f-body); font-weight: 600;
  font-size: clamp(2.2rem, 5.4vw, 5.4rem);
  line-height: 1.08; letter-spacing: -.015em;
}
.display--sm { font-size: clamp(2rem, 4.3vw, 3.9rem); line-height: 1.12; }
.hl { color: var(--accent); }

.mono { font-family: var(--f-mono); }

/* ── buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .78em 1.45em; font-weight: 600; font-size: .95rem;
  border: 1px solid currentColor; position: relative; overflow: hidden;
  transition: color .35s var(--ease), background-color .35s var(--ease), transform .35s var(--ease);
  white-space: nowrap;
}
.btn::after {
  content: ''; position: absolute; inset: 0; background: var(--accent);
  transform: translateY(101%); transition: transform .4s var(--ease); z-index: -1;
}
.btn > * { position: relative; z-index: 1; }
.btn--solid { background: var(--accent); border-color: var(--accent); color: #080c14; }
.btn--solid:hover { transform: translateY(-2px); background: var(--fg-ink); border-color: var(--fg-ink); }
.btn--ghost { color: inherit; }
.btn--ghost:hover { background: var(--accent); border-color: var(--accent); color: #080c14; transform: translateY(-2px); }
.btn--sm { padding: .5em 1em; font-size: .82rem; }
.btn--lg { padding: 1em 1.9em; font-size: 1.05rem; }
.btn .arr { font-style: normal; transition: transform .35s var(--ease); }
.btn:hover .arr { transform: translate(2px, 2px); }

/* ── nav ─────────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 14px var(--pad);
  border-bottom: 1px solid transparent;
  transition: background-color .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease);
}
.nav.is-stuck {
  background: rgba(8, 12, 20, .9); border-bottom-color: var(--line-on-ink);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding-top: 10px; padding-bottom: 10px;
}
.nav__brand { display: flex; align-items: center; gap: 11px; }
.nav__word {
  font-family: var(--f-display); font-weight: 700; font-stretch: 116%;
  font-size: 1rem; letter-spacing: .2em; color: var(--fg-ink);
}
/* the ZYCODA logotype is thin and widely tracked — echo it, don't shout it */
.nav__by {
  display: flex; align-items: center;
  padding-left: 13px; border-left: 1px solid var(--line-on-ink);
}
/* Official ZYCODA lockup (mark + wordmark), light variant for dark backgrounds.
   Only ever scaled by height — the wordmark carries its own tracking. */
.zlogo { width: auto; opacity: .92; }
.zlogo--nav  { height: 15px; }
.zlogo--hero { height: clamp(24px, 3.2vw, 36px); opacity: 1; }
.zlogo--foot { height: 15px; }

/* ── brand marks ─────────────────────────────────────────────── */
/* Same triangle + tri-colour gradient the app shell spins on its sign-in card. */
.amark { transform-origin: center; animation: logo-spin 12s linear infinite;
  filter: drop-shadow(0 0 12px rgba(139, 92, 246, .4)); flex: none; }
@keyframes logo-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.amark--nav  { width: 26px; height: 26px; }
.amark--hero { width: clamp(54px, 7.5vw, 100px); height: auto; margin-left: auto; }

.hero__brand {
  display: flex; align-items: center; gap: 18px;
  margin-top: clamp(6px, 2vh, 20px);
}

.nav__links { display: flex; gap: clamp(14px, 2vw, 32px); }
.nav__links a {
  font-size: .88rem; color: var(--fg-ink-dim); position: relative; padding-bottom: 2px;
  transition: color .3s var(--ease);
}
.nav__links a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav__links a:hover { color: var(--fg-ink); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav .btn { color: var(--fg-ink); }

/* ── hero ────────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 100svh; padding: 78px var(--pad) 0;
  display: flex; flex-direction: column; justify-content: space-between; gap: clamp(14px, 2vh, 30px);
  overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(100% / 12 - 1px), rgba(148, 163, 184, .05) calc(100% / 12 - 1px) calc(100% / 12)),
    radial-gradient(70% 60% at 84% 4%, rgba(0, 240, 255, .14), transparent 62%),
    radial-gradient(80% 70% at 6% 98%, rgba(139, 92, 246, .20), transparent 64%),
    radial-gradient(50% 50% at 40% 60%, rgba(249, 115, 22, .07), transparent 70%);
}
.hero > * { position: relative; z-index: 2; }

.hero__crosshair { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .5s; }
.hero:hover .hero__crosshair { opacity: 1; }
.ch { position: absolute; background: rgba(139, 92, 246, .4); }
.ch--x { left: 0; right: 0; height: 1px; top: var(--my, 50%); }
.ch--y { top: 0; bottom: 0; width: 1px; left: var(--mx, 50%); }
.ch__read {
  position: absolute; top: calc(var(--my, 50%) + 10px); left: calc(var(--mx, 50%) + 10px);
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .1em; color: var(--accent);
}

.rule {
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(12px, 2.4vw, 34px);
  padding: 10px 0; border-top: 1px solid var(--line-on-ink); border-bottom: 1px solid var(--line-on-ink);
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--fg-ink-dim);
  animation: fadeIn .9s var(--ease) both;
}
.rule--top { animation-delay: .1s; }
.rule--bottom {
  border-bottom: 0; justify-content: space-between; margin-top: auto;
  animation-delay: 1.5s; font-size: .58rem;
}
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .25; transform: scale(.7); } }
.rule__scroll { animation: nudge 2.2s var(--ease) infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* nameplate — SVG text stretched edge to edge */
.nameplate { margin: clamp(4px, 1.2vh, 14px) 0 0; }
.np { width: 100%; height: auto; overflow: visible; }
.np text {
  font-family: var(--f-display); font-weight: 900; font-stretch: 125%;
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: npIn 1.1s var(--ease) both;
}
.np__b { font-size: 128px; fill: var(--fg-ink); animation-delay: .3s; }
@keyframes npIn {
  from { opacity: 0; transform: translateY(26%) scaleY(.86); }
  to   { opacity: 1; transform: none; }
}

.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: end; gap: clamp(20px, 4vw, 60px);
  border-top: 1px solid var(--line-on-ink); padding-top: clamp(16px, 2.4vh, 30px);
}
.hero__deck {
  max-width: 60ch; font-size: clamp(1rem, 1.15vw + .55rem, 1.34rem);
  color: rgba(248, 250, 252, .82); font-weight: 300;
  animation: fadeUp 1s var(--ease) .7s both;
}
.hero__deck em { font-style: normal; color: var(--fg-ink); font-weight: 600; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; animation: fadeUp 1s var(--ease) .85s both; }

/* console readout */
.console {
  border: 1px solid var(--line-on-ink); background: rgba(13, 18, 31, .78);
  animation: fadeUp 1s var(--ease) 1s both;
}
.console__bar {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  border-bottom: 1px solid var(--line-on-ink);
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fg-ink-dim);
}
.console__dot { width: 7px; height: 7px; background: var(--accent); border-radius: 50%; animation: pulse 1.6s infinite; }
.console__meta { margin-left: auto; opacity: .7; }
.console__body {
  margin: 0; padding: 14px clamp(12px, 2vw, 22px) 18px;
  font-family: var(--f-mono); font-size: clamp(.6rem, .42vw + .45rem, .78rem);
  line-height: 2.05; letter-spacing: .01em;
  min-height: 11.4em; white-space: pre-wrap; word-break: break-word;
  color: rgba(203, 213, 225, .88);
}
.console__body .k { color: var(--accent); }
.console__body .d { color: rgba(148, 163, 184, .65); }
.console__body .v { color: var(--fg-ink); }
.console__body .g { color: var(--green); }
.caret {
  display: inline-block; width: .55em; height: 1.05em; background: var(--accent);
  vertical-align: -.18em; animation: blink 1s steps(2) infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ── marquee band ────────────────────────────────────────────── */
.band {
  overflow: hidden; border-top: 1px solid var(--line-on-ink); border-bottom: 1px solid var(--line-on-ink);
  padding: clamp(10px, 1.6vw, 22px) 0;
}
.band__track { display: flex; width: max-content; will-change: transform; }
.band__track span {
  font-family: var(--f-display); font-weight: 900; font-stretch: 112%;
  font-size: clamp(2.6rem, 9.5vw, 9rem); line-height: .96; letter-spacing: -.01em;
  padding-right: .35em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(148, 163, 184, .45);
}
.band__track span i { font-style: normal; color: var(--accent); -webkit-text-stroke: 0; }

/* ── 001 thesis ──────────────────────────────────────────────── */
.thesis {
  padding: clamp(80px, 12vh, 170px) var(--pad);
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
  gap: clamp(28px, 5vw, 84px); align-items: start;
}
.thesis .label { grid-column: 1 / -1; margin-bottom: clamp(20px, 4vh, 44px); }
.thesis__head { display: grid; gap: clamp(16px, 2.4vh, 28px); align-content: start; }
.thesis__lead {
  font-size: clamp(1.02rem, 1.6vw, 1.42rem); line-height: 1.55;
  color: rgba(203, 213, 225, .92); max-width: 34ch;
}
.thesis__aside { padding-top: clamp(6px, 2vh, 24px); display: grid; gap: 1.4em; }
.thesis__aside p { color: rgba(203, 213, 225, .88); max-width: 46ch; }
.ticks { display: grid; gap: .55em; margin-top: .4em; }
.ticks li {
  position: relative; padding-left: 26px; font-family: var(--f-body);
  font-size: .95rem; color: var(--fg-ink);
  border-top: 1px solid var(--line-on-ink); padding-top: .7em; padding-bottom: .1em;
}
.ticks li::before {
  content: '→'; position: absolute; left: 0; top: .72em; color: var(--accent); font-size: .9em;
}

/* ── 002 pipeline ────────────────────────────────────────────── */
.pipe {
  padding: clamp(70px, 10vh, 140px) var(--pad) clamp(80px, 12vh, 170px);
  overflow-x: clip;
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 90px);
  border-top: 1px solid var(--line-on-ink);
}
.pipe__stick { position: sticky; top: 16vh; align-self: start; }
.pipe__stick .label { display: block; margin-bottom: 18px; }
.pipe__note { margin-top: 22px; max-width: 34ch; color: var(--fg-ink-dim); font-size: .96rem; }

.readout {
  margin-top: clamp(24px, 4vh, 44px); border: 1px solid var(--line-on-ink);
  padding: 12px 14px; display: grid; gap: 6px;
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
}
.readout__k { color: var(--fg-ink-dim); }
.readout__v { color: var(--accent); font-size: .78rem; }
.readout__bar { display: block; height: 2px; background: var(--line-on-ink); margin-top: 4px; }
.readout__bar i { display: block; height: 100%; width: 20%; background: var(--accent); transition: width .55s var(--ease); }

.pipe__steps { display: grid; gap: 0; }
.step {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(14px, 2.4vw, 34px); align-items: start;
  padding: clamp(26px, 4vh, 48px) 0 clamp(26px, 4vh, 48px) clamp(14px, 2vw, 26px);
  border-top: 1px solid var(--line-on-ink);
}
.step:last-child { border-bottom: 1px solid var(--line-on-ink); }
.step::before {
  content: ''; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px;
  background: var(--accent); transform: scaleY(0); transform-origin: top;
  transition: transform .6s var(--ease);
}
.step.is-active::before { transform: scaleY(1); }
.step__n {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em;
  color: var(--fg-ink-dim); padding-top: .55em; transition: color .4s var(--ease);
}
.step.is-active .step__n { color: var(--accent); }
.step h3 {
  font-family: var(--f-display); font-weight: 800; font-stretch: 118%;
  font-size: clamp(1.3rem, 2.4vw, 2.15rem); line-height: 1.1; letter-spacing: .01em;
  color: rgba(148, 163, 184, .75); transition: color .4s var(--ease);
}
.step.is-active h3 { color: var(--fg-ink); }
.step h3 em {
  display: block; font-family: var(--f-body); font-style: normal; font-weight: 500;
  font-size: .95rem; letter-spacing: 0; margin-top: .35em; color: var(--accent);
  opacity: .55; transition: opacity .4s var(--ease);
}
.step.is-active h3 em { opacity: 1; }
.step p { grid-column: 2; margin-top: .85em; color: var(--fg-ink-dim); max-width: 52ch; font-size: .97rem; }

/* ── 003 capabilities (bone) ─────────────────────────────────── */
.caps { padding: clamp(80px, 12vh, 170px) var(--pad); }
.caps__head { margin-bottom: clamp(24px, 4vh, 46px); }
.caps__head .label { display: block; margin-bottom: 16px; }
.caps__list { border-top: 1px solid var(--line-on-ink); }
.cap {
  display: grid; grid-template-columns: 3.4rem minmax(0, .78fr) minmax(0, 1.5fr);
  gap: clamp(10px, 1.6vw, 24px); align-items: baseline;
  padding: clamp(14px, 2vh, 22px) 0;
  border-bottom: 1px solid var(--line-on-ink);
  transition: padding-left .45s var(--ease), background-color .45s var(--ease);
}
/* half the default stagger: a nav jump lands here, so the rows must fill in fast.
   Needs .cap.reveal — plain .cap loses to .reveal, which is declared later. */
.cap.reveal { transition-delay: calc(var(--i, 0) * 42ms); }
.cap:nth-child(even) { padding-left: clamp(0px, 2.6vw, 40px); }
.cap:hover { padding-left: clamp(8px, 3.6vw, 56px); background: rgba(255, 255, 255, .035); }
.cap__n { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .14em; color: var(--accent); }
.cap__t {
  font-family: var(--f-display); font-weight: 800; font-stretch: 116%;
  font-size: clamp(1.15rem, 2vw, 1.85rem); line-height: 1.1; letter-spacing: .005em;
  color: var(--fg-ink);
}
.cap__d { color: var(--fg-ink-dim); font-size: .93rem; max-width: 62ch; }

/* ── 003.1 the agent library: hairline grid of composable agents ── */
.agents { margin-top: clamp(52px, 8vh, 104px); }
.agents__head { margin-bottom: clamp(22px, 3.6vh, 40px); }
.agents__head .label { display: block; margin-bottom: 14px; }
.agents__note { color: var(--fg-ink-dim); font-size: .97rem; max-width: 58ch; }
.agents__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--line-on-ink); border: 1px solid var(--line-on-ink);
}
.agent {
  background: var(--ink-2); padding: clamp(15px, 1.5vw, 21px);
  display: grid; gap: 7px; align-content: start;
  transition: background-color .45s var(--ease);
}
.agent:hover { background: var(--ink-3); }
.agent__ico { width: 25px; height: 25px; color: var(--accent); margin-bottom: 3px; }
.agent__n { font-family: var(--f-mono); font-size: .54rem; letter-spacing: .16em; color: var(--accent); }
.agent__t {
  font-family: var(--f-display); font-weight: 800; font-stretch: 112%;
  font-size: clamp(.86rem, .95vw, .98rem); line-height: 1.2;
  letter-spacing: .005em; color: var(--fg-ink);
}
.agent__t-suffix { color: var(--fg-ink-dim); font-weight: 600; }
.agent__d { color: var(--fg-ink-dim); font-size: .79rem; line-height: 1.5; }

/* ── 004 stats (ember) ───────────────────────────────────────── */
.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(8, 12, 20, .25);
}
.stat {
  padding: clamp(38px, 7vh, 88px) clamp(16px, 2.4vw, 40px);
  border-right: 1px solid rgba(8, 12, 20, .16);
  display: flex; flex-direction: column; gap: .35em;
}
.stat:last-child { border-right: 0; }
.stat__n {
  font-family: var(--f-display); font-weight: 900; font-stretch: 122%;
  font-size: clamp(3rem, 6.4vw, 5.6rem); line-height: .88; letter-spacing: -.02em;
  color: #080c14; font-variant-numeric: tabular-nums;
}
.stat__l {
  font-family: var(--f-body); font-weight: 500; font-size: .88rem; line-height: 1.45;
  color: rgba(8, 12, 20, .78); max-width: 22ch;
}

/* ── 005 user journey ───────────────────────────────────────── */
.jrn { padding: clamp(80px, 12vh, 170px) var(--pad); }
.jrn__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 70px); align-items: end; margin-bottom: clamp(30px, 5vh, 58px);
}
.jrn__head .label { grid-column: 1 / -1; }
.jrn__note { color: var(--fg-ink-dim); max-width: 52ch; font-size: .98rem; }

.jrn__start {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px); align-items: start;
  padding-bottom: clamp(30px, 5vh, 56px);
}
.goal { border-left: 2px solid var(--accent); padding-left: clamp(16px, 2vw, 26px); }
.goal figcaption {
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--accent);
}
.goal blockquote {
  margin: .7em 0 .5em; font-size: clamp(1.1rem, 1.9vw, 1.6rem);
  font-weight: 300; line-height: 1.4; color: var(--fg-ink);
}
.goal__by { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .14em; color: var(--fg-ink-dim); }

.actors { border-top: 1px solid var(--line-on-ink); }
.actors li {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--line-on-ink);
}
.actors b { font-weight: 600; font-size: .92rem; color: var(--fg-ink); }
.actors span { font-size: .86rem; color: var(--fg-ink-dim); }

.jrn__kicker {
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--fg-ink-dim);
  padding: clamp(22px, 4vh, 40px) 0 14px;
}

.flow, .support {
  display: grid; gap: 1px; background: var(--line-on-ink);
  border: 1px solid var(--line-on-ink);
}
.flow { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.support { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.flow > li, .support > li {
  background: var(--ink); padding: clamp(16px, 2vw, 24px);
  display: grid; gap: 9px; align-content: start; position: relative;
}
.fl__n {
  width: 26px; height: 26px; border: 1px solid var(--accent); border-radius: 50%;
  display: grid; place-items: center; font-family: var(--f-mono);
  font-size: .66rem; color: var(--accent);
}
.fl__n--alt { border-color: var(--cyan); color: var(--cyan); }
.flow h3, .support h3 {
  font-family: var(--f-display); font-weight: 700; font-stretch: 112%;
  font-size: clamp(.95rem, 1.2vw, 1.12rem); letter-spacing: .01em; color: var(--fg-ink);
}
.flow p, .support p { font-size: .85rem; color: var(--fg-ink-dim); }
/* the run reads left to right — mark each hand-off in the seam between cards */
.flow > li:not(:last-child)::after {
  content: '\2192'; position: absolute; top: clamp(18px, 2vw, 26px); right: -11px;
  width: 22px; height: 26px; line-height: 26px; text-align: center;
  font-family: var(--f-mono); font-size: .9rem;
  background: var(--ink); color: var(--accent); z-index: 2;
}
.fl--loop { background: rgba(139, 92, 246, .07); }
.fl__loop {
  margin-top: 4px; padding-top: 10px; border-top: 1px solid rgba(139, 92, 246, .35);
  font-size: .8rem; line-height: 1.5;
  color: var(--accent);
}

.why { margin-top: clamp(26px, 4vh, 46px); }
.why__k {
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}
.why ul { display: flex; flex-wrap: wrap; gap: 8px; }
.why li {
  border: 1px solid var(--line-on-ink); padding: .55em 1em;
  font-size: .84rem; color: rgba(203, 213, 225, .88);
  transition: border-color .35s var(--ease), color .35s var(--ease);
}
.why li:hover { border-color: var(--accent); color: var(--fg-ink); }

/* ── TH / EN switch in the nav ───────────────────────────────── */
.lang { display: flex; border: 1px solid var(--line-on-ink); margin-left: auto; }
.lang__b {
  font-family: var(--f-mono); font-size: .58rem; letter-spacing: .12em;
  background: none; border: 0; color: var(--fg-ink-dim);
  padding: .5em .78em; cursor: pointer; line-height: 1;
  transition: color .3s var(--ease), background-color .3s var(--ease);
}
.lang__b + .lang__b { border-left: 1px solid var(--line-on-ink); }
.lang__b:hover { color: var(--fg-ink); }
.lang__b.is-on { background: var(--accent); color: #080c14; }

/* ── 002 positioning: comparison table, our row highlighted ──── */
.pos { padding: clamp(80px, 12vh, 170px) var(--pad); }
.pos__head { margin-bottom: clamp(28px, 5vh, 56px); }
.pos__head .label { display: block; margin-bottom: 16px; }
.pos__note { color: var(--fg-paper-dim); margin-top: clamp(16px, 2.4vh, 26px); max-width: 62ch; }
.cmp__wrap { overflow-x: auto; }
.cmp { width: 100%; border-collapse: collapse; min-width: 720px; }
.cmp th, .cmp td { padding: clamp(11px, 1.5vh, 17px) 14px; text-align: left; vertical-align: middle; }
.cmp thead th {
  font-family: var(--f-mono); font-size: .56rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-deep); font-weight: 500; border-bottom: 1px solid var(--line-on-paper);
}
.cmp tbody tr { border-bottom: 1px solid var(--line-on-paper); }
.cmp__rowh { font-weight: 400; }
.cmp__rowh b { display: block; color: var(--fg-paper); font-weight: 600; font-size: .97rem; }
.cmp__rowh em { display: block; font-style: normal; color: var(--fg-paper-dim); font-size: .76rem; margin-top: 2px; }
.cmp td { color: var(--fg-paper-dim); font-size: .87rem; }
.cmp td::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 9px;
  border-radius: 50%; vertical-align: baseline; }
.cmp td.y::before { background: var(--accent-deep); }
.cmp td.p::before { background: var(--accent-deep); opacity: .38; }
.cmp td.n::before { background: transparent; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .28); }
.cmp__me { background: rgba(139, 92, 246, .07); }
.cmp__me td, .cmp__me .cmp__rowh b, .cmp__me .cmp__rowh em { color: var(--fg-paper); }
.cmp__me .cmp__rowh b { font-size: 1.06rem; letter-spacing: .02em; }
.pos__foot { margin-top: clamp(20px, 3vh, 32px); color: var(--fg-paper-dim); font-size: .89rem; max-width: 76ch; }

/* ── 009 impact: three ways the value shows up ───────────────── */
.imp { padding: clamp(80px, 12vh, 170px) var(--pad); }
.imp__head { margin-bottom: clamp(30px, 5vh, 60px); }
.imp__head .label { display: block; margin-bottom: 16px; }
.imp__note { color: var(--fg-ink-dim); margin-top: clamp(16px, 2.4vh, 26px); max-width: 62ch; }
.imps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--line-on-ink); border: 1px solid var(--line-on-ink); }
.imp__c { background: var(--ink-2); padding: clamp(20px, 2.2vw, 32px);
  display: grid; gap: 11px; align-content: start;
  transition: background-color .45s var(--ease); }
.imp__c:hover { background: var(--ink-3); }
.imp__n { font-family: var(--f-mono); font-size: .58rem; letter-spacing: .16em; color: var(--accent); }
.imp__t { font-family: var(--f-display); font-weight: 800; font-stretch: 114%;
  font-size: clamp(1.05rem, 1.5vw, 1.32rem); line-height: 1.18; color: var(--fg-ink); }
.imp__d { color: var(--fg-ink-dim); font-size: .88rem; line-height: 1.55; }
.imp__ex { display: grid; gap: 8px; margin-top: 6px; padding-top: 14px;
  border-top: 1px solid var(--line-on-ink); }
.imp__ex li { position: relative; padding-left: 16px; color: var(--fg-ink-dim);
  font-size: .82rem; line-height: 1.5; }
.imp__ex li::before { content: ""; position: absolute; left: 0; top: .6em;
  width: 6px; height: 1px; background: var(--accent); }

/* ── 006 human in the loop: flow strip + two channel panels ──── */
.hitl { padding: clamp(80px, 12vh, 170px) var(--pad); }
.hitl__head { margin-bottom: clamp(34px, 6vh, 66px); max-width: 62ch; }
.hitl__head .label { display: block; margin-bottom: 16px; }
.hitl__note { color: var(--fg-ink-dim); margin-top: clamp(16px, 2.4vh, 26px); max-width: 56ch; }
.hitl__note strong { color: var(--fg-ink); font-weight: 500; }

.hitl__flow {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--line-on-ink); border: 1px solid var(--line-on-ink);
  margin-bottom: clamp(28px, 4.5vh, 54px);
}
.hstep { background: var(--ink); padding: clamp(16px, 1.8vw, 24px); display: grid; gap: 7px; align-content: start; }
.hstep__n {
  font-family: var(--f-mono); font-size: .58rem; letter-spacing: .16em;
  color: var(--void); background: var(--accent); width: 1.7em; height: 1.7em;
  display: grid; place-items: center; border-radius: 50%;
}
.hstep__t {
  font-family: var(--f-display); font-weight: 800; font-stretch: 112%;
  font-size: clamp(.92rem, 1.05vw, 1.06rem); line-height: 1.2; color: var(--fg-ink);
}
.hstep__d { color: var(--fg-ink-dim); font-size: .82rem; line-height: 1.5; }

.chans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 34px); }
.chan {
  border: 1px solid var(--line-on-ink); background: var(--ink);
  padding: clamp(20px, 2.4vw, 34px); display: grid; gap: 18px; align-content: start;
  transition: border-color .45s var(--ease), background-color .45s var(--ease);
}
.chan:hover { border-color: rgba(139, 92, 246, .38); background: var(--ink-2); }
.chan__top { display: flex; align-items: center; gap: 14px; }
.chan__ico { width: 34px; height: 34px; color: var(--accent); flex: none; }
.chan__t {
  font-family: var(--f-display); font-weight: 800; font-stretch: 116%;
  font-size: clamp(1.02rem, 1.5vw, 1.3rem); line-height: 1.15; color: var(--fg-ink);
}
/* body font, not mono: this line carries Thai, which mono + uppercase mangles */
.chan__s { font-size: .82rem; color: var(--accent); margin-top: 4px; }
.chan__list { display: grid; gap: 11px; }
.chan__list li {
  position: relative; padding-left: 18px;
  color: var(--fg-ink-dim); font-size: .88rem; line-height: 1.55;
}
.chan__list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 1px; background: var(--accent);
}
.chan__list b { color: var(--fg-ink); font-weight: 500; }
.chan__list em { font-style: normal; font-family: var(--f-mono); font-size: .82em; color: var(--cyan); }
.hitl__foot {
  margin-top: clamp(24px, 4vh, 44px); padding-top: clamp(18px, 2.6vh, 26px);
  border-top: 1px solid var(--line-on-ink);
  color: var(--fg-ink-dim); font-size: .9rem; max-width: 74ch;
}

/* ── 006 implementation area (paper) ────────────────────────── */
.impl { padding: clamp(80px, 12vh, 170px) var(--pad); }
.impl__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 70px); align-items: end; margin-bottom: clamp(34px, 6vh, 64px);
}
.impl__head .label { grid-column: 1 / -1; }
.impl__note { color: var(--fg-paper-dim); max-width: 52ch; font-size: .98rem; }

.impl__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 60px);
}
.ic { display: grid; gap: 14px; align-content: start; }
.ic__top { display: flex; align-items: center; gap: 12px; min-height: 24px; }
.ic__n { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .12em; color: var(--accent-deep); }
/* stands in for the photo on the deck — drop an <img> in here when you have one */
.ic__disc {
  width: clamp(120px, 15vw, 176px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; color: var(--accent-deep);
  border: 1px solid var(--line-on-paper);
  background:
    radial-gradient(circle at 32% 26%, rgba(139, 92, 246, .16), transparent 58%),
    radial-gradient(circle at 76% 82%, rgba(43, 94, 192, .14), transparent 60%),
    var(--paper-2);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.ic:hover .ic__disc { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15, 23, 42, .12); }
.ic__disc svg { width: 46%; height: auto; }
.ic__t {
  font-family: var(--f-display); font-weight: 800; font-stretch: 112%;
  font-size: clamp(1.05rem, 1.5vw, 1.32rem); line-height: 1.2; color: var(--fg-paper);
}
.ic__s {
  font-family: var(--f-mono); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-deep); line-height: 1.7;
}
.ic__list { border-top: 1px solid var(--line-on-paper); }
.ic__list li {
  position: relative; padding: .7em 0 .7em 20px;
  border-bottom: 1px solid var(--line-on-paper);
  font-size: .9rem; color: var(--fg-paper-dim);
}
.ic__list li::before {
  content: '\25B8'; position: absolute; left: 0; top: .7em;
  color: var(--accent-deep); font-size: .8em;
}

/* ── 007 foundation pyramid (void) ──────────────────────────── */
.found { padding: clamp(80px, 12vh, 170px) var(--pad); }
.found__head { margin-bottom: clamp(30px, 5vh, 56px); }
.found__head .label { display: block; margin-bottom: 18px; }
.found__eq {
  font-family: var(--f-display); font-weight: 800; font-stretch: 108%;
  font-size: clamp(1.25rem, 3vw, 2.6rem); line-height: 1.25; letter-spacing: -.01em;
  color: var(--fg-ink);
}
.found__eq i { font-style: normal; color: var(--fg-ink-dim); font-weight: 400; }
.eq--llm     { color: var(--cyan); }
.eq--harness { color: var(--accent); }
.eq--data    { color: var(--orange); }
.found__note { margin-top: 20px; max-width: 60ch; color: var(--fg-ink-dim); font-size: .98rem; }
.found__note em { font-style: normal; color: var(--fg-ink); font-weight: 600; }

.found__canvas {
  border: 1px solid var(--line-on-ink);
  padding: clamp(14px, 2.4vw, 30px) clamp(8px, 1.6vw, 20px);
  background: radial-gradient(70% 90% at 44% 12%, rgba(139, 92, 246, .12), transparent 68%);
  overflow-x: auto;
}
.pyr { min-width: 820px; color: rgba(148, 163, 184, .45); }
.pyr__tier polygon { stroke-width: 1; }
/* the story is bottom-up: the foundation rises before the agent sits on it */
.pyr__tier {
  opacity: 0; transform: translateY(18px); transform-box: fill-box;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--i, 0) * 130ms);
}
.is-in .pyr__tier { opacity: 1; transform: none; }
.t-raw  polygon { fill: rgba(148, 163, 184, .07); stroke: rgba(148, 163, 184, .3); }
.t-pipe polygon { fill: rgba(0, 240, 255, .06);   stroke: rgba(0, 240, 255, .32); }
.t-know polygon { fill: rgba(249, 115, 22, .09);  stroke: rgba(249, 115, 22, .42); }
.t-int  polygon { fill: rgba(139, 92, 246, .11);  stroke: rgba(139, 92, 246, .5); }
.t-apex polygon { fill: url(#apexG); stroke: none; filter: drop-shadow(0 0 16px rgba(139, 92, 246, .5)); }
.pyr__leads path { fill: none; stroke: rgba(148, 163, 184, .28); stroke-width: 1; }
.pyr .pt {
  font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .1em; fill: var(--fg-ink);
}
.pyr .ps { font-family: var(--f-body); font-weight: 300; font-size: 10.5px; fill: var(--fg-ink-dim); }
.pyr__side rect { fill: rgba(255, 255, 255, .025); stroke: var(--line-on-ink); }
.pyr__side text {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .12em;
  fill: var(--fg-ink-dim); text-anchor: middle;
}
.pyr__side .lead { fill: none; stroke: rgba(0, 240, 255, .3); stroke-width: 1; stroke-dasharray: 3 3; }

/* ── 006 governance (bone) ───────────────────────────────────── */
.gov {
  padding: clamp(80px, 12vh, 170px) var(--pad);
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(30px, 5vw, 90px); align-items: start;
}
.gov__left .label { display: block; margin-bottom: 18px; }
.gov__note { margin-top: 24px; color: var(--fg-paper-dim); max-width: 34ch; font-size: .97rem; }
.gov__list { border-top: 1px solid var(--line-on-paper); }
.gov__list li {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: clamp(12px, 2vw, 28px);
  padding: clamp(18px, 2.6vh, 28px) 0; border-bottom: 1px solid var(--line-on-paper);
  transition: transform .45s var(--ease);
}
.gov__list li:hover { transform: translateX(8px); }
.gov__list span {
  font-family: var(--f-mono); font-size: .64rem; font-weight: 500;
  letter-spacing: .16em; color: var(--accent-deep); padding-top: .35em;
}
.gov__list p { color: var(--fg-paper-dim); font-size: .97rem; }

/* ── 007 cta ─────────────────────────────────────────────────── */
.cta {
  padding: clamp(90px, 15vh, 200px) var(--pad);
  text-align: center; position: relative; overflow: hidden;
  border-top: 1px solid var(--line-on-ink);
}
.cta::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(60% 90% at 50% 110%, rgba(139, 92, 246, .26), transparent 68%);
  pointer-events: none;
}
.cta > * { position: relative; }
.cta .label { display: block; margin-bottom: 22px; }
.cta__h {
  font-family: var(--f-body); font-weight: 600;
  font-size: clamp(2.1rem, 6vw, 5.4rem); line-height: 1.08; letter-spacing: -.015em;
}
.cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: clamp(28px, 5vh, 52px); }
/* ── footer: engineering title block ─────────────────────────── */
.foot {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--line-on-ink); border-top: 1px solid var(--line-on-ink);
}
.foot__block { background: var(--ink); padding: 20px clamp(14px, 2vw, 28px); display: grid; gap: 6px; align-content: start; }
.foot__block--end { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.foot__k {
  font-family: var(--f-mono); font-size: .58rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent);
}
.foot__v { font-size: .82rem; color: var(--fg-ink-dim); }
.foot__v a { border-bottom: 1px solid var(--line-on-ink); }
.foot__v a:hover { color: var(--accent); border-color: var(--accent); }

/* ── reveal choreography ─────────────────────────────────────── */
.reveal {
  opacity: 0; will-change: transform, opacity;
  transition:
    opacity .85s var(--ease),
    transform .95s var(--ease),
    clip-path .95s var(--ease);
  transition-delay: calc(var(--i, 0) * 85ms);
}
.reveal--up    { transform: translateY(34px); }
.reveal--left  { transform: translateX(-38px); }
.reveal--right { transform: translateX(44px); }
.reveal--scale { transform: scale(.97); }
.reveal--clip  { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); }
.is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ── responsive ──────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .flow, .support { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow > li::after { display: none; }
  .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__block--end { justify-content: flex-start; }
  .agents__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hitl__flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .imps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .nav__links { display: none; }
  .thesis, .pipe, .gov { grid-template-columns: minmax(0, 1fr); }
  .pipe__stick { position: static; }
  .jrn__head, .impl__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .jrn__start { grid-template-columns: minmax(0, 1fr); }
  .impl__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(34px, 6vh, 56px); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid rgba(8, 12, 20, .16); }
  .agents__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chans { grid-template-columns: minmax(0, 1fr); }
  .cap { grid-template-columns: 3rem minmax(0, 1fr); }
  .cap__d { grid-column: 2; }
  .cap:nth-child(even) { padding-left: 0; }
  .cap:hover { padding-left: 12px; }
  .gov__list li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 560px) {
  .hero { padding-top: 74px; }
  .console__body { line-height: 1.9; min-height: 9em; }
  .console__meta { display: none; }
  .rule { font-size: .55rem; letter-spacing: .14em; gap: 10px; }
  .step { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .step h3, .step p { grid-column: 1; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat { border-right: 0; border-bottom: 1px solid rgba(8, 12, 20, .16); }
  .flow, .support, .foot { grid-template-columns: minmax(0, 1fr); }
  .agents__grid { grid-template-columns: minmax(0, 1fr); }
  .hitl__flow { grid-template-columns: minmax(0, 1fr); }
  .actors li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ── reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; clip-path: none; }
  .grain { animation: none; }
}