@charset "utf-8";
/* =============================================================================
   NeuSence — Design System
   "From signal to sense."  ·  Neural Essence
   -----------------------------------------------------------------------------
   Single stylesheet, shared by the EN and TR sites.
   Motion rule: only transform / opacity / filter are animated. Nothing that
   triggers layout (width, height, padding, top/left/right) is ever transitioned.
   Contrast rule: every text token clears WCAG AA (4.5:1) on its own surface.
   ========================================================================== */

/* ---------------------------------------------------------------- 01 · FONTS */
/* Self-hosted. No third-party requests — the brand ships a KVKK/GDPR
   governance policy, so fonts must not phone home to a CDN.
   Declaration order matters: the Turkish micro-subset is declared LAST so it
   wins for its six glyphs, while latin-ext stays as a safety net that only
   downloads if a rarer extended glyph ever appears in content.            */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Turkish: Ğ ğ İ ı Ş ş — 6.5 KB instead of pulling the 133 KB latin-ext file. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-tr-subset.woff2") format("woff2");
  unicode-range: U+011E-011F, U+0130-0131, U+015E-015F;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/plexmono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/plexmono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/plexmono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/plexmono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Metric-matched fallback: holds the layout still while Inter loads, so the
   -0.07em display type does not reflow on swap. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22.4%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------- 02 · TOKENS */
:root {
  /* Brand core — the authoritative values from design-tokens.json.
     Do not introduce new hexes; derive from these.                         */
  --obsidian: #080a0d;
  --carbon: #121418;
  --graphite: #1b1e24;
  --paper: #f3f2ed;
  --red: #ff282b;

  /* Surfaces — one ladder, replacing the six ad-hoc hexes of the V9 build */
  --surface-0: #080a0d;
  --surface-1: #0b0d11;
  --surface-2: #101317;
  --surface-3: #161a20;
  --line: #23272e;
  --line-strong: #2f343c;

  /* Ink on dark — every step verified ≥ 4.5:1 against --surface-0 */
  --ink: #f3f2ed;      /* 18.6:1 */
  --ink-2: #b9bcc3;    /* 10.4:1 */
  --ink-3: #92969f;    /*  6.7:1 — the brand "muted" token */
  --ink-4: #7c818b;

  /* Micro-label sizes live behind tokens so the mobile floor is set in one
     place. On a desktop monitor 9.5px mono is a deliberate, legible detail;
     in a hand it is not, and raising each selector separately meant hunting
     them one at a time and missing some every round. */
  --micro-1: 9px;
  --micro-2: 9.5px;
  --micro-3: 10px;
  --micro-4: 10.5px;    /*  5.1:1 — floor for 9–12px mono micro-labels */

  /* Paper (inverted) sections */
  --paper-ink: #111318;
  --paper-ink-2: #4a4f57;
  --paper-line: #d7d5cd;
  --paper-surface: #e9e7e0;
  --paper-red: #c81a1c;   /* 5.2:1 on --paper; --red is display-size only there */

  /* Accent supports */
  --red-glow: 255 40 43;  /* rgb triplet for rgba() composition */
  --ok: #7fd18b;
  --warn: #ffb44d;

  /* Type */
  --display: "Inter", "Inter Fallback", Arial, sans-serif;
  --body: "Inter", "Inter Fallback", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "DejaVu Sans Mono", monospace;

  /* Layout */
  --shell: min(1320px, calc(100vw - 2 * var(--pad)));
  --pad: 32px;
  --nav-h: 84px;
  --radius-sm: 6px;
  --radius: 14px;
  --radius-lg: 22px;
  --pill: 999px;

  /* Motion — one easing vocabulary for the whole site */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* expo-out, the house curve */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-1: 0.18s;
  --dur-2: 0.32s;
  --dur-3: 0.6s;
  --dur-4: 0.9s;

  --shadow: 0 20px 60px rgb(0 0 0 / 0.28);
  --shadow-lift: 0 24px 70px rgb(0 0 0 / 0.42);
}

@media (max-width: 720px) {
  :root {
    --pad: 20px;
    --nav-h: 68px;
  }
}

/* ----------------------------------------------------------- 03 · RESET/BASE */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
  margin: 0;
  background: var(--surface-0);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img,
svg,
canvas { display: block; max-width: 100%; }

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection {
  background: var(--red);
  color: var(--paper);
}

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

.skip {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--paper);
  color: var(--obsidian);
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transform: translateY(-160%);
  transition: transform var(--dur-2) var(--ease-out);
}
.skip:focus-visible { transform: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------- 04 · TYPOGRAPHY */
/* The brand's signature move: display sizes take NEGATIVE tracking that tightens
   as they grow; micro-labels take POSITIVE tracking. Preserve that polarity. */

.display-1,
.display-2,
.display-3,
.section-title,
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 620;
  /* Inter's ink spans ~1.21em. At 0.95 the descenders of one line ran into the
     caps and Turkish accents of the next, which reads as a shaved g even where
     nothing is truly clipped. 1.04 keeps the tight display look and gives the
     tails somewhere to go. */
  line-height: 1.04;
  text-wrap: balance;
}

.display-1 {
  font-size: clamp(37px, 10.5vw, 136px);
  letter-spacing: -0.07em;
  font-variation-settings: "opsz" 32;
}
.display-2 {
  font-size: clamp(32px, 8vw, 96px);
  letter-spacing: -0.065em;
  font-variation-settings: "opsz" 32;
}
.display-3 {
  font-size: clamp(27px, 5.6vw, 64px);
  letter-spacing: -0.05em;
  font-variation-settings: "opsz" 28;
}

.section-title {
  font-size: clamp(30px, 7vw, 88px);
  letter-spacing: -0.06em;
  font-variation-settings: "opsz" 32;
  max-width: 11em;
}
.section-title .red { color: var(--red); }

/* Brand name set solid, the way it looks when you drag-select it. Horizontal
   padding only, and deliberately so: an inline box already paints to the font's
   content area (~1.21em), which is taller than this 1.04 line-height, so the
   block reaches into the line above on its own. Vertical padding would push it
   further and turn the heading into overlapping slabs. The negative margin
   cancels the left padding so the N stays on the same vertical as the lines
   above and below — without it the line looks indented by accident. */
/* A heading that carries a solid block needs the extra leading, and only that
   heading gets it. At the shared 1.04 the descenders of the line above came
   within half a pixel of the block's top edge — not sliced, but close enough
   to read as a collision, which is the same complaint by another name. */
.section-title.has-mark { line-height: 1.16; }

.mark {
  display: inline-block;
  /* The whole point of this number. Left inline, the block paints to the font's
     content area — 1.21em — while the heading runs at 1.04, so it reached up
     into the previous line and sliced the tail off the g in "olduğunu" and the
     p in "raporlar". Turkish surfaced it first because it has more descenders,
     but English had it too. An inline-block takes its height from this
     line-height instead, which pulls the top edge below the line above. No
     vertical margin compensates for it — that is what collapsed a heading the
     last time — so the line simply keeps its own height. */
  line-height: 0.84;
  background: var(--red);
  color: var(--paper);
  padding: 0.07em 0.11em 0.05em;
  margin-left: -0.11em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* Selecting inside the block would otherwise paint red on red. */
.mark::selection { background: var(--ink); color: var(--paper); }

.section-title em {
  font-style: italic;
  font-variation-settings: "opsz" 32;
}

.lead {
  font-size: clamp(17px, 1.55vw, 23px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 58ch;
  letter-spacing: -0.012em;
}

.kicker,
.mono {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-4);
  margin-bottom: clamp(20px, 2.4vw, 36px);
}
.kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--red);
  clip-path: polygon(0 0, 100% 22%, 100% 100%, 0 78%);
  flex: none;
}

.num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--red);
}

/* ------------------------------------------------------------- 05 · LAYOUT */
.shell {
  width: var(--shell);
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: clamp(96px, 12vh, 180px);
}

/* `content-visibility: auto` was here and has been removed after measurement.
   It defers layout and paint until a section nears the viewport — but that work
   then lands in a single frame *during the scroll*, and it was the sole cause of
   the page's scroll judder. Measured over one scroll-through, real wheel events:

       with    p99 33.4ms · worst 150ms · 8/234 frames dropped · 352ms lost
       without p99 16.9ms · worst  17ms · 0/237 frames dropped ·   3ms lost

   It was buying nothing worth that: first paint is already ~280ms and the whole
   document is under 40KB. The `.deferred` class is kept in the markup as an
   inert hook in case a much longer page ever needs it back. */
.section.deferred { /* intentionally empty — see above */ }

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

/* ------------------------------------------------------------- 06 · MOTION */
/* Reveal system. The `.js` class is set synchronously in <head> so no-JS users
   never see hidden content. Stagger is driven by an --i index set in JS. */

@media (prefers-reduced-motion: no-preference) {
  /* NO clip-path here, ever.
     The revealed state used to be `clip-path: inset(0 0 0 0)`, which clips an
     element to its border box exactly. Inter's ink spans ~1.21em while display
     type runs at line-height 1.04, so every descender — g, y, p, ş, ç — hangs
     below the box and was being sliced flat. It applied to all ~50 revealed
     elements, which is why it showed up on headings across the whole site
     while body copy at line-height 1.5 looked fine.
     A wipe is not worth a permanently mutilated typeface; the `clip` variant
     now rises further and settles instead. */
  .js [data-reveal] {
    --i: 0;
    opacity: 0;
    transition:
      opacity var(--dur-3) var(--ease-out),
      transform var(--dur-3) var(--ease-out);
    transition-delay: calc(var(--i) * 70ms);
    will-change: transform, opacity;
  }
  .js [data-reveal="up"]    { transform: translate3d(0, 28px, 0); }
  .js [data-reveal="left"]  { transform: translate3d(-26px, 0, 0); }
  .js [data-reveal="right"] { transform: translate3d(26px, 0, 0); }
  .js [data-reveal="scale"] { transform: scale(0.965); }
  .js [data-reveal="clip"]  { transform: translate3d(0, 44px, 0) scale(0.985); }
  .js [data-reveal].is-in {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
}

/* Headline word mask — each word rides up out of its own clipping box. */
/* No padding, no negative margins. An earlier version padded this box so the
   clip could not reach the descenders — but padding grows an inline-block's
   line box, and the compensating negative margin then collapsed the heading's
   own height, so the paragraph underneath rendered straight through it.
   The clip is only needed while the word is travelling; JS removes it the
   moment the reveal finishes (.is-clear), which solves the descenders without
   touching layout at all. */
/* This box no longer clips, and that is the point. It used to hide the word
   behind `overflow: hidden` while the word rode up from 105% below its own
   edge — but the clip line sits on the line box, and Inter's ink runs past it,
   so for the three quarters of a second the animation lasted every g, y and ş
   in the headline was sliced flat. That is the third separate report of cut
   letters on this site. A word that lifts a third of an em and fades in reads
   the same at a glance and cannot cut anything, at any moment, at any font
   size. `.is-clear` below is kept as a second line of defence. */
.word-mask {
  display: inline-block;
  vertical-align: bottom;
}
/* The clip box exists only so the word can start below its own edge. Once the
   word has arrived it serves no purpose, and any box that clips is a box that
   can shave a descender. JS adds this the moment the reveal finishes, so the
   resting state — which is what a visitor actually looks at — cannot clip at
   all, whatever the font metrics turn out to be. */
.word-mask.is-clear { overflow: visible; }
/* Timing is deliberately tight. At 1s per word with a 55ms stagger the hero's
   nine words did not finish arriving until 1.44s after the script ran, and for
   that whole time the clip box is slicing through half-risen letters — which
   reads as a headline loading slowly and coming in cut, not as an animation.
   0.55s with a 28ms stagger lands the last word in 0.77s and keeps the motion. */
.word-mask > span {
  display: inline-block;
  transform: translate3d(0, 0.34em, 0);
  opacity: 0;
  transition:
    transform 0.55s var(--ease-out),
    opacity 0.4s var(--ease-out);
  transition-delay: calc(var(--wi, 0) * 28ms);
}
.is-in .word-mask > span,
.word-mask.is-in > span { transform: none; opacity: 1; }

@keyframes ns-spin { to { transform: rotate(360deg); } }
@keyframes ns-marquee { to { transform: translate3d(-50%, 0, 0); } }
@keyframes ns-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.82); }
}
@keyframes ns-node-pulse {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(0, -8px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes ns-fade-up {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}

/* Ambient page texture: one fixed grain layer, GPU-composited, never repainted */
.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.035;
  /* No mix-blend-mode. A full-viewport blended layer sitting above a canvas
     that repaints every frame forces the compositor to re-blend the entire
     viewport on every one of those frames — one of the most expensive things
     you can do to a page. At 3.5% opacity plain alpha is indistinguishable. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Scroll progress — scaleX, never width. */
.progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 120;
  width: 100%;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* ---------------------------------------------------------------- 07 · NAV */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  /* height is NOT transitioned; the bar keeps a fixed box and the inner
     content scales, so the fixed element never forces a reflow. */
}
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(8 10 13 / 0.72);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid transparent;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}
.nav.is-scrolled::before {
  opacity: 1;
  border-bottom-color: var(--line);
}

.nav-inner {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  width: var(--shell);
  margin-inline: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  transform-origin: 0 50%;
  transition: transform var(--dur-2) var(--ease-out);
}
.nav.is-scrolled .brand { transform: scale(0.88); }
.brand svg { height: 30px; width: auto; }

.nav-links {
  display: flex;
  justify-content: center;
  gap: 34px;
}
.nav-links a {
  position: relative;
  font-size: 14px;
  color: var(--ink-3);
  letter-spacing: -0.01em;
  transition: color var(--dur-1) var(--ease);
  padding-block: 6px;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform var(--dur-2) var(--ease-out);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.lang {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: rgb(255 255 255 / 0.02);
}
.lang a {
  padding: 5px 12px;
  border-radius: var(--pill);
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.1em;
  color: var(--ink-4);
  transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.lang a:hover { color: var(--ink-2); }
.lang a.is-active {
  background: var(--paper);
  color: var(--obsidian);
}

.menu-btn {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.menu-btn i {
  position: relative;
  display: block;
  width: 17px;
  height: 1px;
  background: var(--ink);
  transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-1) linear;
}
.menu-btn i::before,
.menu-btn i::after {
  content: "";
  position: absolute;
  left: 0;
  width: 17px;
  height: 1px;
  background: var(--ink);
  transition: transform var(--dur-2) var(--ease-out);
}
.menu-btn i::before { top: -5px; }
.menu-btn i::after { top: 5px; }
.menu-btn[aria-expanded="true"] i { background: transparent; }
.menu-btn[aria-expanded="true"] i::before { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i::after { transform: translateY(-5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: var(--nav-h) 0 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 0 var(--pad) 12vh;
  background: var(--surface-0);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -12px, 0);
  transition:
    opacity var(--dur-2) var(--ease),
    transform var(--dur-3) var(--ease-out),
    visibility 0s linear var(--dur-2);
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.mobile-menu a {
  font-family: var(--display);
  font-size: clamp(26px, 8vw, 44px);
  font-weight: 620;
  letter-spacing: -0.05em;
  line-height: 1.25;
  opacity: 0;
  transform: translate3d(0, 16px, 0);
}
.mobile-menu.is-open a {
  animation: ns-fade-up 0.5s var(--ease-out) forwards;
  animation-delay: calc(60ms + var(--i, 0) * 55ms);
}
.mobile-menu .mm-cta {
  margin-top: 26px;
  color: var(--red);
}

/* ------------------------------------------------------------ 08 · BUTTONS */
.button {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 14.5px;
  font-weight: 520;
  letter-spacing: -0.015em;
  cursor: pointer;
  white-space: nowrap;
  isolation: isolate;
  transition:
    color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}
/* The hover wash is a pseudo-element scale, so nothing repaints the button box */
.button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--paper);
  transform: scale(0.4);
  opacity: 0;
  transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease);
}
.button:hover { border-color: var(--paper); color: var(--obsidian); }
.button:hover::before { transform: scale(1); opacity: 1; }

/* Drawn, not typed. This was the character U+2197, which Android and several
   other platforms render from their emoji font — a full-colour glyph with its
   own baseline and weight, sitting inside a brand button. A path inherits the
   button's colour and optical weight and looks identical everywhere. */
.arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 0.78em;
  height: 0.78em;
}
.arrow svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.button .arrow {
  transition: transform var(--dur-2) var(--ease-spring);
}
.button:hover .arrow { transform: translate3d(3px, -3px, 0); }
.button.is-down:hover .arrow { transform: translate3d(0, 3px, 0); }

.button.primary {
  --btn-bg: var(--red);
  --btn-fg: var(--paper);
  --btn-bd: var(--red);
  font-weight: 560;
}
.button.primary::before { background: var(--paper); }
.button.primary:hover { color: var(--obsidian); border-color: var(--paper); }
.button.primary:focus-visible { outline-color: var(--red); }

.button.ghost { --btn-bd: var(--line-strong); }

.button[disabled] {
  opacity: 0.55;
  pointer-events: none;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(32px, 4vw, 52px);
}

/* --------------------------------------------------------------- 09 · HERO */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--nav-h) + 36px) 92px;
  overflow: hidden;
}
.hero canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
/* Left-side scrim: keeps the headline legible over the wave. The wave engine
   reads this same breakpoint so it never draws pixels that land under it. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgb(8 10 13 / 0.97) 0%,
    rgb(8 10 13 / 0.94) 28%,
    rgb(8 10 13 / 0.62) 52%,
    rgb(8 10 13 / 0.12) 78%,
    rgb(8 10 13 / 0.4) 100%
  );
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 34vh;
  height: 34svh;
  z-index: 1;
  background: linear-gradient(to bottom, transparent, var(--surface-0));
  pointer-events: none;
}
.hero .shell {
  position: relative;
  z-index: 2;
}

.terminal {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.11em;
  color: var(--ink-4);
  margin-bottom: 30px;
}
.terminal .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  animation: ns-blink 2.4s var(--ease-in-out) infinite;
}

/* The headline owns the full measure and the telemetry card floats over the
   wave, bottom-right — the reference composition. Boxing the h1 into a 0.55fr
   column meant a 136px display face wrapping inside ~730px: one or two words
   per line, six lines deep. Measures are in `em` so they track the font size;
   `ch` is the width of a zero and is a poor proxy for display type. */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); }

.hero h1 { max-width: 9em; }

.hero-copy {
  margin-top: clamp(24px, 2.6vw, 38px);
  max-width: 44ch;
}

/* In flow and right-aligned rather than absolutely placed: it still reads as a
   card floating over the wave, but it can never collide with a long headline
   or a wrapped Turkish button label at an untested viewport. */
.telemetry {
  justify-self: end;
  margin-top: clamp(26px, 4vh, 52px);
  width: min(340px, 100%);
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* Opaque, not frosted. This card sits directly on top of the hero canvas, so
     a backdrop-filter would have to re-blur a surface that changes 60 times a
     second. The card reads the same and the hero stops paying for it. */
  background: #0d1014;
  box-shadow: var(--shadow);
}
.telemetry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: var(--micro-2);
  letter-spacing: 0.18em;
  color: var(--ink-4);
}
.live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-2);
}
.live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  animation: ns-blink 1.8s var(--ease-in-out) infinite;
}
.telemetry-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 7px 0;
  font-family: var(--mono);
  font-size: var(--micro-4);
  letter-spacing: 0.05em;
  color: var(--ink-4);
}
.telemetry-row b {
  font-weight: 400;
  color: var(--ink-2);
  letter-spacing: 0;
  font-family: var(--body);
  font-size: 12.5px;
}
.telemetry-row .state { letter-spacing: 0.14em; }
.telemetry-row .state.review { color: var(--red); }

.scroll-cue {
  position: absolute;
  left: calc(50% - var(--shell) / 2);
  bottom: 34px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: var(--micro-2);
  letter-spacing: 0.2em;
  color: var(--ink-4);
}
.scroll-cue i {
  display: block;
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, var(--red), transparent);
}

/* ------------------------------------------------------- 10 · SIGNAL RAIL */
.signal-rail {
  position: relative;
  border-block: 1px solid var(--line);
  background: var(--surface-1);
  overflow: hidden;
  padding-block: 15px;
}
.signal-rail::before,
.signal-rail::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14vw;
  z-index: 2;
  pointer-events: none;
}
.signal-rail::before { left: 0; background: linear-gradient(90deg, var(--surface-1), transparent); }
.signal-rail::after { right: 0; background: linear-gradient(270deg, var(--surface-1), transparent); }

.rail-track {
  display: flex;
  align-items: center;
  gap: 44px;
  width: max-content;
  animation: ns-marquee 38s linear infinite;
  font-family: var(--mono);
  font-size: var(--micro-4);
  letter-spacing: 0.17em;
  color: var(--ink-4);
  white-space: nowrap;
}
.signal-rail:hover .rail-track { animation-play-state: paused; }
.rail-track i {
  width: 5px;
  height: 5px;
  background: var(--red);
  opacity: 0.7;
  flex: none;
  clip-path: polygon(0 0, 100% 22%, 100% 100%, 0 78%);
}

/* --------------------------------------------------------- 11 · NARRATIVE */
.narrative {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  width: var(--shell);
  margin-inline: auto;
  padding-block: clamp(80px, 10vh, 140px);
}

.narrative-steps { display: flex; flex-direction: column; }
.narrative-step {
  min-height: 78vh;
  /* svh, not vh. On a phone the URL bar slides away as you scroll and `vh`
     follows it, so a height written in vh changes mid-gesture and the
     section grows under your thumb. `svh` is measured against the smallest
     viewport and never moves, so the scroll stays where the reader put it.
     The plain vh line above is the fallback for browsers without svh. */
  min-height: 78svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.28;
  transition: opacity var(--dur-3) var(--ease);
}
.narrative-step.is-active { opacity: 1; }
.narrative-step h2 {
  font-size: clamp(32px, 3.6vw, 58px);
  letter-spacing: -0.05em;
  margin-bottom: 20px;
  max-width: 16ch;
}
.narrative-step p {
  color: var(--ink-3);
  font-size: clamp(16px, 1.3vw, 19px);
  max-width: 44ch;
}

.sticky-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stage-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.05;
  max-height: 74vh;
  max-height: 74svh;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  overflow: hidden;
}
.stage-frame canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.stage-index {
  position: absolute;
  inset: auto auto 20px 20px;
  z-index: 2;
  display: flex;
  gap: 8px;
}
.stage-index span {
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  font-family: var(--mono);
  font-size: var(--micro-2);
  letter-spacing: 0.14em;
  color: var(--ink-4);
  background: rgb(8 10 13 / 0.55);
  transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.stage-index span.is-active {
  color: var(--paper);
  border-color: var(--red);
}
.stage-meta {
  position: absolute;
  inset: 20px 20px auto auto;
  z-index: 2;
  text-align: right;
  font-family: var(--mono);
  font-size: var(--micro-2);
  letter-spacing: 0.16em;
  color: var(--ink-4);
}
.stage-meta b {
  display: block;
  color: var(--paper);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.1em;
}

/* -------------------------------------------------- 12 · PAPER (INVERTED) */
.paper {
  background: var(--paper);
  color: var(--paper-ink);
}
.paper .kicker { color: var(--paper-ink-2); }
.paper .lead { color: var(--paper-ink-2); }
.paper .section-title .red { color: var(--red); }
.paper .rule { background: var(--paper-line); }
.paper .mono { color: var(--paper-ink-2); }
.paper .num { color: var(--paper-red); }
.paper .button {
  --btn-fg: var(--paper-ink);
  --btn-bd: rgb(17 19 24 / 0.24);
}
.paper .button::before { background: var(--paper-ink); }
.paper .button:hover { color: var(--paper); border-color: var(--paper-ink); }
.paper .button.primary {
  --btn-bg: var(--red);
  --btn-fg: var(--paper);
  --btn-bd: var(--red);
}
.paper .button.primary::before { background: var(--paper-ink); }

/* ------------------------------------------------------- 13 · SENSE GAP */
.gap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(48px, 6vw, 80px);
  background: var(--paper-line);
  border: 1px solid var(--paper-line);
}
.gap-card {
  padding: clamp(26px, 3vw, 42px);
  background: var(--paper);
  transition: background-color var(--dur-2) var(--ease);
}
.gap-card:hover { background: var(--paper-surface); }
.gap-card .num { display: block; margin-bottom: 26px; }
.gap-card h3 {
  font-size: clamp(21px, 1.9vw, 27px);
  letter-spacing: -0.035em;
  margin-bottom: 12px;
}
.gap-card p {
  color: var(--paper-ink-2);
  font-size: 15px;
  line-height: 1.55;
}

/* ---------------------------------------------------- 14 · ARCHITECTURE */
.arch-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
}

.arch-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: clamp(48px, 5vw, 72px);
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}
.arch-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  padding: 12px 20px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.arch-tab small {
  font-family: var(--mono);
  font-size: var(--micro-2);
  letter-spacing: 0.16em;
  color: var(--ink-4);
  transition: color var(--dur-2) var(--ease);
}
.arch-tab b {
  font-size: 17px;
  font-weight: 560;
  letter-spacing: -0.03em;
  color: var(--ink-3);
  transition: color var(--dur-2) var(--ease);
}
.arch-tab:hover b { color: var(--ink); }
.arch-tab[aria-selected="true"] {
  background: var(--surface-2);
  border-color: var(--line);
}
.arch-tab[aria-selected="true"] small { color: var(--red); }
.arch-tab[aria-selected="true"] b { color: var(--paper); }

.arch-panel { padding-top: clamp(40px, 4.5vw, 64px); }
.arch-panel-copy { max-width: 60ch; }
.arch-panel h3 {
  font-size: clamp(26px, 2.6vw, 40px);
  letter-spacing: -0.045em;
  margin-bottom: 14px;
}
.arch-panel p { color: var(--ink-3); font-size: 16.5px; }

/* Panel swap: content fades/slides out then in, driven by a class from JS */
.arch-panel-copy,
.pipeline {
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.arch-panel.is-swapping .arch-panel-copy,
.arch-panel.is-swapping .pipeline {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
}

.pipeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(40px, 4vw, 60px);
}
.pipe {
  position: relative;
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-1);
  overflow: hidden;
}
.pipe::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-3) var(--ease-out);
}
.pipe:hover::after { transform: scaleX(1); }
.pipe b {
  display: block;
  font-size: 17px;
  font-weight: 560;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}
.pipe span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-4);
  line-height: 1.7;
}
.pipe-arrow {
  position: absolute;
  right: -21px;
  top: 50%;
  z-index: 2;
  width: 28px;
  height: 1px;
  background: var(--line-strong);
}
.pipe-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -2px;
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--line-strong);
  border-right: 1px solid var(--line-strong);
  transform: rotate(45deg);
}

/* ------------------------------------------------------- 15 · SENSE CORE */
/* The orbital system. Structure is HTML (accessible, selectable); the orbit
   rings, connective beziers, travelling signal packets and core ignition are
   painted by one canvas layered beneath. See neusence.js → SenseCore.        */
.response-os {
  background: var(--surface-1);
  border-block: 1px solid var(--line);
  overflow: hidden;
}

.os-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(56px, 7vw, 96px);
}

.os-workbench {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(240px, 26vw, 340px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  min-height: 460px;
}
/* Two canvases in one coordinate space. The core plate is an HTML element
   between them, so satellites orbiting behind it are genuinely occluded and
   satellites in front are genuinely painted over it. That real occlusion is
   what sells the depth — no fake shadow can do it. */
/* The outermost orbit is 1.98x the core radius, which is taller than the
   workbench itself on desktop. The canvas is given vertical overhang so the
   rings have somewhere to be instead of being sliced at the box edge; the
   engine still scales them down if even this is not enough. */
.os-canvas {
  position: absolute;
  inset: -110px -40px;
  width: calc(100% + 80px);
  height: calc(100% + 220px);
  pointer-events: none;
}
/* Stacking order, back to front:
     0  back canvas      rails, far half of every orbit, core glow
     1  .os-core         the plate itself
     2  front canvas     near half of the orbits, travelling packets
     3  .os-col cards    source and output boxes
   A satellite on the near side therefore passes OVER the core plate — which is
   what sells the depth — but still slides UNDER the node cards, because those
   are interface, not scenery, and nothing should be drawn across them. */
.os-canvas[data-os-canvas="back"] { z-index: 0; }
.os-canvas[data-os-canvas="front"] { z-index: 2; }

.os-col {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.os-col-label {
  font-family: var(--mono);
  font-size: var(--micro-2);
  letter-spacing: 0.19em;
  color: var(--ink-4);
  margin-bottom: 8px;
}
.os-col.outputs { text-align: right; }
.os-col.outputs .os-col-label { text-align: right; }

.os-node {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* Opaque, deliberately. A backdrop-filter here would force the browser to
     re-sample a canvas that repaints every frame, on eight cards at once —
     measured in whole milliseconds per frame for no visual gain. */
  background: #101317;
  text-align: left;
  cursor: pointer;
  transition:
    transform var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease);
}
.os-node i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-4);
  transition: background-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.os-node span { display: block; min-width: 0; }
.os-node b {
  display: block;
  font-size: 15.5px;
  font-weight: 560;
  letter-spacing: -0.025em;
}
.os-node small {
  display: block;
  font-family: var(--mono);
  font-size: var(--micro-3);
  letter-spacing: 0.045em;
  color: var(--ink-4);
  margin-top: 3px;
}
.os-node:hover { border-color: var(--line-strong); transform: translate3d(6px, 0, 0); }
.os-node[aria-pressed="true"] {
  border-color: var(--red);
  background: rgb(22 18 20 / 0.92);
  transform: translate3d(9px, 0, 0);
}
.os-node[aria-pressed="true"] i {
  background: var(--red);
  box-shadow: 0 0 0 5px rgb(var(--red-glow) / 0.14);
}

.os-col.outputs .os-node {
  flex-direction: row-reverse;
  text-align: right;
}
.os-col.outputs .os-node:hover { transform: translate3d(-6px, 0, 0); }
.os-col.outputs .os-node.is-lit {
  border-color: var(--red);
  transform: translate3d(-9px, 0, 0);
}
.os-col.outputs .os-node.is-lit i {
  background: var(--red);
  box-shadow: 0 0 0 5px rgb(var(--red-glow) / 0.14);
}
/* Route IS the governed response, so it is the one red state. Execute, Record
   and Measure are its consequences — they acknowledge in off-white.
   That acknowledgement has to be plainly visible: a first version kept it so
   quiet (a #23272E to #2F343C border shift) that three of the four boxes
   looked like they were not working at all. An acknowledgement nobody can see
   is not an acknowledgement. They now move and brighten like the lit one, just
   without the red. */
.os-col.outputs .os-node.is-ticked {
  border-color: rgb(243 242 237 / 0.3);
  background: rgb(20 24 29 / 0.94);
  transform: translate3d(-6px, 0, 0);
}
.os-col.outputs .os-node.is-ticked i {
  background: var(--ink);
  box-shadow: 0 0 0 5px rgb(243 242 237 / 0.12);
}
.os-col.outputs .os-node.is-ticked b { color: var(--ink); }
.os-col.outputs .os-node.is-ticked small { color: var(--ink-3); }

/* The core plate. The rings around it are canvas-drawn; this element carries
   only the readable label and the surface. */
.os-core {
  position: relative;
  z-index: 1;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #191d23 0%, #0d1014 58%, #090b0f 100%);
  box-shadow:
    inset 0 0 90px rgb(255 255 255 / 0.028),
    0 0 90px rgb(0 0 0 / 0.5);
  transition: box-shadow var(--dur-3) var(--ease), border-color var(--dur-3) var(--ease);
}
.os-workbench.is-igniting .os-core {
  border-color: rgb(var(--red-glow) / 0.55);
  box-shadow:
    inset 0 0 90px rgb(var(--red-glow) / 0.06),
    0 0 120px rgb(var(--red-glow) / 0.12);
}
.core-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: var(--micro-1);
  letter-spacing: 0.2em;
  color: var(--ink-4);
}
.core-status i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red);
  animation: ns-blink 2s var(--ease-in-out) infinite;
}
.os-core strong {
  font-family: var(--display);
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 650;
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.os-core small {
  font-family: var(--mono);
  font-size: var(--micro-2);
  letter-spacing: 0.09em;
  color: var(--ink-4);
  max-width: 76%;
}

.os-console {
  position: relative;
  z-index: 3;
  margin-top: clamp(44px, 5vw, 68px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-0);
  overflow: hidden;
}
.os-console-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: var(--micro-2);
  letter-spacing: 0.18em;
  color: var(--ink-4);
}
.os-console-body {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 18px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--ink-4);
}
.os-console-body b {
  color: var(--paper);
  font-weight: 500;
}
.os-console-body em {
  font-style: normal;
  color: var(--ink-2);
}
/* Console text swap rides in from below rather than snapping */
.os-console-body > * {
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out);
}
.os-console.is-swapping .os-console-body > * {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
}

/* --------------------------------------------------- 16 · EDITORIAL BAND */
.editorial-band {
  padding-block: clamp(80px, 11vh, 150px);
  background: var(--paper);
  color: var(--paper-ink);
}
.editorial-band blockquote {
  font-family: var(--display);
  font-size: clamp(27px, 7vw, 92px);
  font-weight: 620;
  line-height: 1.02;
  letter-spacing: -0.06em;
  max-width: 20ch;
}
.editorial-band em {
  font-style: italic;
  color: var(--red);
}
.editorial-band .sub {
  margin-top: 26px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--paper-ink-2);
  text-transform: uppercase;
}

/* ---------------------------------------------------- 17 · CAPABILITIES */
.cap-list {
  margin-top: clamp(48px, 6vw, 76px);
  border-top: 1px solid var(--line);
}
.cap-item {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 0.9fr) minmax(0, 1.4fr) auto;
  gap: 28px;
  align-items: center;
  padding: clamp(24px, 2.6vw, 34px) 0;
  border-bottom: 1px solid var(--line);
  /* No overflow:hidden — the hover state translates children 14px right, and
     clipping here severed the trailing "EXPLORE ↗" label. The ::before wash is
     inset:0 with a scaleX transform, so it can never escape the box anyway. */
}
/* Hover wash + inner shift are both transforms — no padding animation. */
.cap-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--surface-2), transparent 72%);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-3) var(--ease-out);
  z-index: -1;
}
.cap-item > * {
  position: relative;
  transition: transform var(--dur-3) var(--ease-out), color var(--dur-2) var(--ease);
}
.cap-item:hover::before { transform: scaleX(1); }
.cap-item:hover > * { transform: translate3d(14px, 0, 0); }
.cap-item:hover .go { transform: translate3d(14px, 0, 0); color: var(--red); }

.cap-item .num { align-self: start; padding-top: 6px; }
.cap-item h3 {
  font-size: clamp(23px, 2.4vw, 36px);
  letter-spacing: -0.04em;
}
.cap-item p {
  color: var(--ink-3);
  font-size: 15.5px;
  line-height: 1.55;
  max-width: 52ch;
}
.cap-item .go {
  font-family: var(--mono);
  font-size: var(--micro-3);
  letter-spacing: 0.16em;
  color: var(--ink-4);
  white-space: nowrap;
}

/* ------------------------------------------------------- 18 · SIMULATOR */
.sim-scenarios {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: clamp(40px, 4.5vw, 60px);
}
.scenario {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
  padding: 18px 20px;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.scenario small {
  font-family: var(--mono);
  font-size: var(--micro-2);
  letter-spacing: 0.16em;
  color: var(--paper-ink-2);
}
.scenario b {
  font-size: 18px;
  font-weight: 560;
  letter-spacing: -0.03em;
}
.scenario span {
  font-family: var(--mono);
  font-size: var(--micro-4);
  color: var(--paper-ink-2);
}
.scenario:hover { border-color: rgb(17 19 24 / 0.4); }
.scenario[aria-pressed="true"] {
  background: var(--paper-ink);
  border-color: var(--paper-ink);
  color: var(--paper);
}
.scenario[aria-pressed="true"] small { color: var(--red); }
.scenario[aria-pressed="true"] span { color: rgb(243 242 237 / 0.62); }

.sim-stage {
  margin-top: 14px;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  overflow: hidden;
}
.sim-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--paper-line);
  font-family: var(--mono);
  font-size: var(--micro-2);
  letter-spacing: 0.17em;
  color: var(--paper-ink-2);
}
.sim-nodes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--paper-line);
}
.sim-node {
  position: relative;
  padding: 26px 20px 30px;
  background: var(--paper);
  transition: background-color var(--dur-2) var(--ease);
}
.sim-node small {
  display: block;
  font-family: var(--mono);
  font-size: var(--micro-2);
  letter-spacing: 0.15em;
  color: var(--paper-red);
  margin-bottom: 18px;
}
.sim-node b {
  display: block;
  font-size: 17px;
  font-weight: 560;
  letter-spacing: -0.03em;
  margin-bottom: 7px;
}
.sim-node p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--paper-ink-2);
}
.sim-node::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.42s var(--ease-out);
}
.sim-stage.is-running .sim-node {
  animation: ns-node-pulse 0.52s var(--ease-out) both;
}
.sim-stage.is-running .sim-node::after { transform: scaleX(1); }
.sim-stage.is-running .sim-node:nth-child(1) { animation-delay: 0s; }
.sim-stage.is-running .sim-node:nth-child(2) { animation-delay: 0.13s; }
.sim-stage.is-running .sim-node:nth-child(3) { animation-delay: 0.26s; }
.sim-stage.is-running .sim-node:nth-child(4) { animation-delay: 0.39s; }
.sim-stage.is-running .sim-node:nth-child(5) { animation-delay: 0.52s; }
.sim-stage.is-running .sim-node:nth-child(1)::after { transition-delay: 0s; }
.sim-stage.is-running .sim-node:nth-child(2)::after { transition-delay: 0.13s; }
.sim-stage.is-running .sim-node:nth-child(3)::after { transition-delay: 0.26s; }
.sim-stage.is-running .sim-node:nth-child(4)::after { transition-delay: 0.39s; }
.sim-stage.is-running .sim-node:nth-child(5)::after { transition-delay: 0.52s; }

.sim-out {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 24px 22px;
  border-top: 1px solid var(--paper-line);
  background: var(--paper-surface);
}
.sim-out small {
  display: block;
  font-family: var(--mono);
  font-size: var(--micro-2);
  letter-spacing: 0.17em;
  color: var(--paper-ink-2);
  margin-bottom: 8px;
}
.sim-out p {
  font-size: clamp(17px, 1.7vw, 23px);
  letter-spacing: -0.025em;
  line-height: 1.35;
}
.sim-note {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: var(--micro-4);
  line-height: 1.7;
  color: var(--paper-ink-2);
  max-width: 76ch;
}

/* ----------------------------------------------------- 19 · ENGAGEMENTS */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(48px, 6vw, 76px);
}
.offer {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 26px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-1);
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-3) var(--ease-out);
}
.offer::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.4s var(--ease-out);
}
.offer:hover {
  border-color: var(--line-strong);
  transform: translate3d(0, -5px, 0);
}
.offer:hover::after { transform: scaleX(1); }
.offer .step {
  font-family: var(--mono);
  font-size: var(--micro-2);
  letter-spacing: 0.16em;
  color: var(--red);
  margin-bottom: 26px;
}
.offer h3 {
  font-size: clamp(21px, 2vw, 28px);
  letter-spacing: -0.04em;
  margin-bottom: 12px;
}
.offer p {
  color: var(--ink-3);
  font-size: 14.5px;
  line-height: 1.55;
  flex: 1;
}
.offer .duration {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: var(--micro-3);
  letter-spacing: 0.16em;
  color: var(--ink-4);
}

/* ---------------------------------------------------- 20 · VALUE MODEL */
.value-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 56px);
  margin-top: clamp(48px, 6vw, 72px);
  align-items: start;
}
.value-controls {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.vm-field label {
  display: block;
  font-family: var(--mono);
  font-size: var(--micro-3);
  letter-spacing: 0.16em;
  color: var(--paper-ink-2);
  margin-bottom: 10px;
}
.vm-input {
  display: flex;
  gap: 10px;
}
.vm-field input[type="number"],
.vm-field select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--paper-ink);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.vm-field select { width: auto; flex: none; font-size: 14px; cursor: pointer; }
.vm-field input:focus-visible,
.vm-field select:focus-visible { border-color: var(--paper-ink); }
.vm-field .hint {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--paper-ink-2);
}
.vm-field input[type="range"] {
  width: 100%;
  accent-color: var(--red);
  cursor: pointer;
}
.vm-range-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.vm-range-head output {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--paper-red);
  font-variant-numeric: tabular-nums;
}

.value-output {
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  background: var(--paper-ink);
  color: var(--paper);
  overflow: hidden;
}
.value-output-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid rgb(243 242 237 / 0.12);
  font-family: var(--mono);
  font-size: var(--micro-2);
  letter-spacing: 0.17em;
  color: rgb(243 242 237 / 0.55);
}
.vm-rows { padding: 8px 22px 18px; }
.vm-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid rgb(243 242 237 / 0.09);
}
.vm-row:last-child { border-bottom: 0; }
.vm-row span {
  font-family: var(--mono);
  font-size: var(--micro-2);
  letter-spacing: 0.15em;
  color: rgb(243 242 237 / 0.6);
}
.vm-row b {
  font-family: var(--display);
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 620;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}
.vm-row.is-key b { color: var(--red); }
.vm-path {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px 22px;
  border-top: 1px solid rgb(243 242 237 / 0.12);
  font-family: var(--mono);
  font-size: var(--micro-2);
  letter-spacing: 0.15em;
  color: rgb(243 242 237 / 0.55);
}
.vm-path i {
  width: 14px;
  height: 1px;
  background: rgb(243 242 237 / 0.3);
}
.vm-cta { padding: 0 22px 22px; }
.value-output .button {
  --btn-fg: var(--paper);
  --btn-bd: rgb(243 242 237 / 0.28);
  width: 100%;
  justify-content: center;
}
.value-output .button::before { background: var(--paper); }
.value-output .button:hover { color: var(--paper-ink); border-color: var(--paper); }
.vm-disclaimer {
  margin-top: 26px;
  font-family: var(--mono);
  font-size: var(--micro-4);
  line-height: 1.75;
  color: var(--paper-ink-2);
  max-width: 84ch;
}

/* ---------------------------------------------------------- 21 · PROOF */
.proof-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 72px);
  margin-top: clamp(48px, 6vw, 72px);
  align-items: start;
}
.proof-list { border-top: 1px solid var(--line); }
.proof-item {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.proof-item b {
  display: block;
  font-size: 18px;
  font-weight: 560;
  letter-spacing: -0.03em;
  margin-bottom: 7px;
}
.proof-item p { color: var(--ink-3); font-size: 14.5px; line-height: 1.55; }

.case-frame {
  position: relative;
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.case-badge {
  display: inline-block;
  margin-bottom: 22px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--pill);
  font-family: var(--mono);
  font-size: var(--micro-1);
  letter-spacing: 0.17em;
  color: var(--ink-4);
}
.case-frame h3 {
  font-size: clamp(23px, 2.3vw, 33px);
  letter-spacing: -0.04em;
  margin-bottom: 28px;
}
.case-step {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 18px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.case-step small {
  font-family: var(--mono);
  font-size: var(--micro-2);
  letter-spacing: 0.15em;
  color: var(--ink-4);
  padding-top: 3px;
}
.case-step b {
  display: block;
  font-size: 16px;
  font-weight: 560;
  letter-spacing: -0.025em;
  margin-bottom: 4px;
}
.case-step p { color: var(--ink-3); font-size: 14px; }

/* --------------------------------------------------------- 22 · THESIS */
.thesis-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 36px);
  margin-top: clamp(48px, 6vw, 72px);
}
.thesis-grid article { border-top: 1px solid var(--line); padding-top: 24px; }
.thesis-grid .num { display: block; margin-bottom: 18px; }
.thesis-grid b {
  display: block;
  font-size: clamp(19px, 1.8vw, 25px);
  font-weight: 560;
  letter-spacing: -0.035em;
  margin-bottom: 10px;
}
.thesis-grid p { color: var(--ink-3); font-size: 14.5px; line-height: 1.6; }

/* ------------------------------------------------------- 23 · INSIGHTS */
.insight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(48px, 6vw, 72px);
}
.article {
  display: flex;
  flex-direction: column;
  padding: 28px 26px;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  background: var(--paper);
  transition: background-color var(--dur-2) var(--ease), transform var(--dur-3) var(--ease-out);
}
.article:hover { background: var(--paper-surface); transform: translate3d(0, -4px, 0); }
.article .tag {
  font-family: var(--mono);
  font-size: var(--micro-2);
  letter-spacing: 0.16em;
  color: var(--paper-red);
  margin-bottom: 24px;
}
.article h3 {
  font-size: clamp(19px, 1.8vw, 25px);
  letter-spacing: -0.035em;
  margin-bottom: 12px;
}
.article p {
  color: var(--paper-ink-2);
  font-size: 14.5px;
  line-height: 1.55;
  flex: 1;
}
.article .status {
  margin-top: 24px;
  font-family: var(--mono);
  font-size: var(--micro-2);
  letter-spacing: 0.16em;
  color: var(--paper-ink-2);
}

/* ------------------------------------------------------ 24 · MANIFESTO */
.final-manifesto {
  padding-block: clamp(96px, 14vh, 190px);
  text-align: center;
}
.final-manifesto .kicker { justify-content: center; }
.final-manifesto h2 {
  font-size: clamp(34px, 9.5vw, 130px);
  letter-spacing: -0.075em;
  margin-inline: auto;
  max-width: 8.5em;
}
.final-manifesto .lead { margin: 28px auto 0; text-align: center; }
.final-manifesto .button-row { justify-content: center; }

/* -------------------------------------------------------- 25 · CONTACT */
.contact { background: var(--surface-1); border-top: 1px solid var(--line); }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}
.contact-form {
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-family: var(--mono);
  font-size: var(--micro-3);
  letter-spacing: 0.16em;
  color: var(--ink-4);
  margin-bottom: 9px;
}
.field input,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-0);
  color: var(--ink);
  font-size: 15.5px;
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.55; }
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-4); }
.field input:focus-visible,
.field textarea:focus-visible {
  border-color: var(--ink-3);
  background: var(--surface-3);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--red); }

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 24px 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-3);
  cursor: pointer;
}
.consent input {
  margin-top: 3px;
  accent-color: var(--red);
  width: 16px;
  height: 16px;
  flex: none;
}
.consent a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }

.form-note {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--ink-4);
}
.form-note[data-state="error"] { color: #ff8a86; }
.form-note[data-state="success"] { color: var(--ok); }

.contact-aside { display: flex; flex-direction: column; gap: 26px; }
.contact-points { border-top: 1px solid var(--line); }
.contact-point {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.contact-point small {
  font-family: var(--mono);
  font-size: var(--micro-2);
  letter-spacing: 0.16em;
  color: var(--ink-4);
}
.contact-point a,
.contact-point span { font-size: 15.5px; color: var(--ink-2); }
.contact-point a {
  transition: color var(--dur-1) var(--ease);
  text-underline-offset: 4px;
}
.contact-point a:hover { color: var(--red); text-decoration: underline; }

/* --------------------------------------------------------- 26 · FOOTER */
.footer {
  padding-block: clamp(56px, 7vw, 88px) 32px;
  background: #06080b;
  border-top: 1px solid var(--line);
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 0.6fr));
  gap: clamp(28px, 4vw, 64px);
  padding-bottom: clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--line);
}
.footer-brand svg { height: 28px; width: auto; margin-bottom: 20px; }
.footer-brand p {
  color: var(--ink-3);
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 42ch;
}
.footer-col b {
  display: block;
  font-family: var(--mono);
  font-size: var(--micro-2);
  font-weight: 500;
  letter-spacing: 0.17em;
  color: var(--ink-4);
  margin-bottom: 18px;
}
.footer-col a {
  display: block;
  padding: 6px 0;
  font-size: 14.5px;
  color: var(--ink-3);
  transition: color var(--dur-1) var(--ease), transform var(--dur-2) var(--ease-out);
}
.footer-col a:hover { color: var(--ink); transform: translate3d(4px, 0, 0); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  justify-content: space-between;
  padding-top: 26px;
  font-family: var(--mono);
  font-size: var(--micro-2);
  letter-spacing: 0.15em;
  color: var(--ink-4);
}

/* --------------------------------------------------- 27 · SECTION INDEX */
.section-index {
  position: fixed;
  right: 22px;
  top: 50%;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translate3d(12px, -50%, 0);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-2);
}
.section-index.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, -50%, 0);
  transition-delay: 0s;
}
.section-index button {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 5px 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink-4);
  font-family: var(--mono);
  font-size: var(--micro-1);
  letter-spacing: 0.14em;
  transition: color var(--dur-2) var(--ease);
}
.section-index button span {
  opacity: 0;
  transform: translate3d(6px, 0, 0);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out);
  white-space: nowrap;
}
.section-index button::after {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  flex: none;
  transform-origin: 100% 50%;
  transition: transform var(--dur-2) var(--ease-out);
}
.section-index button:hover,
.section-index button.is-active { color: var(--paper); }
.section-index button:hover span { opacity: 1; transform: none; }
.section-index button.is-active { color: var(--red); }
.section-index button.is-active::after { transform: scaleX(1.7); }

/* Over the light sections the rail flips to the paper palette. Without this the
   marks sit at a dark-background grey and hovering one paints it --paper, which
   on paper means it disappears under the cursor. */
.section-index.on-paper button { color: var(--paper-ink-2); }
.section-index.on-paper button:hover { color: var(--paper-ink); }
.section-index.on-paper button.is-active { color: var(--paper-red); }

/* ----------------------------------------------------- 28 · RESPONSIVE */
@media (max-width: 1180px) {
  .os-workbench { grid-template-columns: minmax(0, 1fr) clamp(200px, 24vw, 260px) minmax(0, 1fr); }
  .cap-item { grid-template-columns: 56px minmax(0, 1fr); row-gap: 12px; }
  .cap-item p { grid-column: 2; }
  .cap-item .go { grid-column: 2; }
}

@media (max-width: 1040px) {
  .nav-links { display: none; }
  .menu-btn { display: inline-flex; }
  .telemetry { justify-self: start; }
  .narrative { grid-template-columns: 1fr; }
  .sticky-stage { position: relative; height: auto; order: -1; }
  .stage-frame { aspect-ratio: 16 / 11; max-height: none; }
  .narrative-step { min-height: auto; padding-block: 40px; opacity: 1; }
  .arch-head,
  .os-head,
  .proof-grid,
  .contact-grid,
  .value-grid { grid-template-columns: 1fr; }
  .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sim-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-index { display: none; }
}

@media (max-width: 720px) {
  /* The header carried the wordmark, a language pill, a full-width call to
     action and the menu button. In Turkish the button reads "Sense Review
     Başlat", and at 390px the row needed 405px: the menu button was pushed off
     the right edge and the wordmark off the left, so the header showed neither
     the brand nor a way into the menu. The action is not lost — it is the first
     item in the menu this button opens, and the hero repeats it. */
  .nav-cta { display: none; }
}

@media (max-width: 860px) {
  .gap-grid,
  .thesis-grid,
  .insight-grid { grid-template-columns: 1fr; }
  .pipeline { grid-template-columns: 1fr; }
  .pipe-arrow { display: none; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }

  /* Sense Core collapses to a vertical flow: sources → core → outputs.
     The canvas re-projects its connectors to match, rather than hiding. */
  .os-workbench {
    grid-template-columns: 1fr;
    /* The rails now travel vertically, so the gap IS the space the four curves
       have to fan through. 28px squashed them into an unreadable knot. */
    gap: 52px;
    min-height: 0;
  }
  .os-core {
    order: 2;
    width: min(52vw, 240px);
    margin-inline: auto;
  }
  .os-col.sources { order: 1; }
  .os-col.outputs { order: 3; text-align: left; }
  .os-col.outputs .os-col-label { text-align: left; }
  .os-col.outputs .os-node { flex-direction: row; text-align: left; }
  .os-col.outputs .os-node:hover,
  .os-col.outputs .os-node.is-lit { transform: translate3d(6px, 0, 0); }
  .os-col.outputs .os-node.is-ticked { transform: translate3d(4px, 0, 0); }
  /* Stacked layout is already very tall; the constraint here is width, so the
     vertical overhang comes back down. */
  .os-canvas { inset: -40px -20px; width: calc(100% + 40px); height: calc(100% + 80px); }
}

@media (max-width: 620px) {
  .offer-grid,
  .sim-nodes { grid-template-columns: 1fr; }
  .sim-out { grid-template-columns: 1fr; }
  .os-console-body { grid-template-columns: 1fr; gap: 8px; }
  .case-step,
  .proof-item,
  .contact-point { grid-template-columns: 1fr; gap: 6px; }
  .footer-top { grid-template-columns: 1fr; }
  .scroll-cue { display: none; }
  .button { width: 100%; justify-content: center; }
  .button-row { flex-direction: column; }
}

/* ------------------------------------------------------- 29 · SUB-PAGES */
/* capabilities / work / company / insights / privacy — same design system as
   the homepage. The V9 build shipped these on a separate stylesheet with
   different tokens and 18px rounded cards; they are one system now. */
.page-hero {
  position: relative;
  padding-block: calc(var(--nav-h) + clamp(72px, 11vh, 150px)) clamp(56px, 8vh, 104px);
  overflow: hidden;
}
.page-hero canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.55;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgb(8 10 13 / 0.97) 0%,
    rgb(8 10 13 / 0.9) 40%,
    rgb(8 10 13 / 0.55) 72%,
    rgb(8 10 13 / 0.75) 100%
  );
  pointer-events: none;
}
.page-hero .shell { position: relative; z-index: 2; }
.page-hero h1 { max-width: 17ch; }
.page-hero .lead { margin-top: clamp(20px, 2.4vw, 32px); }

.page-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.page-card {
  position: relative;
  padding: clamp(26px, 3vw, 42px);
  background: var(--surface-0);
  overflow: hidden;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.page-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--surface-1);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}
.page-card:hover::before { opacity: 1; }
.page-card > * { position: relative; }
.page-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-3) var(--ease-out);
}
.page-card:hover::after,
.page-card:target::after { transform: scaleX(1); }
.page-card .num { display: block; margin-bottom: 26px; }
.page-card h2 {
  font-size: clamp(21px, 2.1vw, 29px);
  letter-spacing: -0.04em;
  margin-bottom: 12px;
}
.page-card p { color: var(--ink-3); font-size: 15px; line-height: 1.6; }

.page-quote {
  padding-block: clamp(84px, 12vh, 160px);
  text-align: center;
}
.page-quote blockquote {
  font-family: var(--display);
  font-size: clamp(27px, 7vw, 88px);
  font-weight: 620;
  line-height: 1.02;
  letter-spacing: -0.065em;
  max-width: 20ch;
  margin-inline: auto;
}
.page-quote em { font-style: italic; color: var(--red); }

.page-cta {
  padding-block: clamp(56px, 7vw, 88px);
  border-top: 1px solid var(--line);
  text-align: center;
}
.page-cta .button-row { justify-content: center; margin-top: 28px; }

.notice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 32px;
  padding: 18px 22px;
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--red);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 78ch;
}
.notice b {
  font-family: var(--mono);
  font-size: var(--micro-3);
  letter-spacing: 0.16em;
  color: var(--red);
  flex: none;
  padding-top: 4px;
}

@media (max-width: 980px) { .page-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .page-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- 30 · TOUCH & MOBILE */

/* Notched phones in landscape put the viewport under the sensor housing. The
   shell is derived from --pad, so widening --pad is enough to clear it. */
@supports (padding: env(safe-area-inset-left)) {
  @media (max-width: 1040px) {
    :root {
      --pad: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
    }
  }
  .footer { padding-bottom: max(32px, env(safe-area-inset-bottom)); }
  .mobile-menu { padding-bottom: max(12svh, env(safe-area-inset-bottom)); }
}

/* Long unbroken Turkish compounds ("anlamlandırın", "orkestrasyonu") are the
   realistic overflow risk at 320px, not the layout. */
body { overflow-wrap: break-word; }
h1, h2, h3, .display-1, .display-2, .display-3, .section-title, blockquote {
  /* `hyphens: auto` used to be here and was actively harmful in Turkish. The
     browser's hyphenation dictionary chopped long agglutinated words across
     lines at points a Turkish reader would not choose, so the headings filled
     up with hyphens and spilled onto extra lines. Without it a word that is
     genuinely too wide still breaks — overflow-wrap catches that — but it
     breaks silently instead of inserting a hyphen in the wrong place. */
  overflow-wrap: break-word;
  hyphens: manual;
}

/* A phone turned sideways is 390px tall, and the hero was laying out at 680 —
   the reader saw a headline and had to scroll twice to reach the buttons. This
   is not a narrow screen, it is a SHORT one, so the width breakpoints never
   caught it. Type and rhythm compress until the hero fits in roughly one view. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero {
    min-height: 0;
    padding-block: calc(var(--nav-h) + 20px) 40px;
  }
  .hero .display-1 { font-size: clamp(22px, 3.6vw, 32px); line-height: 1.08; }
  .hero .lead { font-size: 14px; max-width: 56ch; margin-top: 14px; }
  .hero-eyebrow,
  .telemetry,
  .scroll-cue { display: none; }
  .hero .button-row { margin-top: 18px; }
  .hero::after { height: 18svh; }
  .narrative-step { min-height: 0; padding-block: 32px; }
  .section { padding-block: clamp(48px, 9vh, 88px); }
}

@media (pointer: coarse) {
  html { -webkit-tap-highlight-color: rgb(255 40 43 / 0.16); }

  /* 44px is the smallest target most people can hit reliably. Stated as a
     min-height rather than padding arithmetic: `padding: 11px` was meant to
     reach 44 and actually measured 33, because the mono label it wraps is only
     11px tall. A min-height cannot drift with the type. */
  .lang a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
  }
  .brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .menu-btn { min-width: 44px; min-height: 44px; }

  /* The micro-labels run at 9–10.5px, which is legible on a desktop monitor at
     arm's length and is not on a phone held in one hand. Raising the floor
     rather than restyling each one keeps the desktop composition untouched. */
  /* One floor, applied through the tokens above, instead of a list of
     selectors that had to be rediscovered every time a label was missed. */
  :root {
    --micro-1: 11.5px;
    --micro-2: 11.5px;
    --micro-3: 11.5px;
    --micro-4: 12px;
  }

  .footer-col a { padding: 11px 0; }
  .contact-point a { display: inline-block; padding: 6px 0; }
  .consent { padding: 4px 0; }
  .consent input { width: 20px; height: 20px; }
}

/* A tap leaves :hover stuck on the element until you tap elsewhere, so every
   hover transform would freeze mid-state. Neutralise them where there is no
   real pointer; the pressed/active states are separate classes and survive. */
@media (hover: none) {
  .button:hover { color: var(--btn-fg); border-color: var(--btn-bd); }
  .button:hover::before { transform: scale(0.4); opacity: 0; }
  .button:hover .arrow { transform: none; }
  .cap-item:hover::before { transform: scaleX(0); }
  .cap-item:hover > *,
  .cap-item:hover .go { transform: none; color: inherit; }
  .offer:hover { transform: none; border-color: var(--line); }
  .offer:hover::after { transform: scaleX(0); }
  .article:hover { transform: none; background: var(--paper); }
  .page-card:hover::before { opacity: 0; }
  .page-card:hover::after { transform: scaleX(0); }
  .pipe:hover::after { transform: scaleX(0); }
  .nav-links a:hover::after { transform: scaleX(0); }
  .footer-col a:hover { transform: none; }
  .gap-card:hover { background: var(--paper); }
  .os-node:hover { transform: none; border-color: var(--line); }
  .os-col.outputs .os-node:hover { transform: none; }
  .scenario:hover { border-color: var(--paper-line); }
  /* the marquee pauses on hover, which on touch means it stops for good */
  .signal-rail:hover .rail-track { animation-play-state: running; }
}

@media (max-width: 720px) {
  /* Two full-viewport backdrop blurs are the most expensive thing on the page
     for a mid-range phone GPU. Opaque fills read the same at this size. */
  .nav::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgb(8 10 13 / 0.95);
  }
  .telemetry {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgb(11 13 17 / 0.95);
  }

  .grain { opacity: 0.03; }
  .kicker { letter-spacing: 0.13em; }
  .terminal { font-size: var(--micro-3); letter-spacing: 0.06em; }
  .rail-track { gap: 28px; font-size: var(--micro-2); }

  /* Stat rows read better stacked than squeezed onto one line */
  .vm-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .vm-row b { font-size: clamp(24px, 8vw, 32px); }
  .value-output-head,
  .os-console-head,
  .sim-stage-head,
  .telemetry-head { font-size: var(--micro-1); letter-spacing: 0.12em; }

  .case-badge { white-space: normal; line-height: 1.6; }
  .arch-tabs { gap: 6px; padding-bottom: 12px; }
  .arch-tab { padding: 10px 14px; flex: 1 1 44%; }
}

/* Landscape phones have almost no vertical room; a 100svh hero would push
   everything else off the screen. */
@media (max-height: 540px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding-block: calc(var(--nav-h) + 24px) 52px;
  }
  .telemetry { display: none; }
  .scroll-cue { display: none; }
  .sticky-stage { position: relative; height: auto; }
  .mobile-menu { justify-content: flex-start; padding-top: 24px; overflow-y: auto; }
  .mobile-menu a { font-size: 26px; }
}

/* iOS zooms the whole page when a focused input is under 16px. */
@media (max-width: 1040px) {
  .field input,
  .field textarea,
  .vm-field input[type="number"],
  .vm-field select { font-size: 16px; }
}

/* ------------------------------------------------- 31 · REDUCED MOTION */
/* One block, not three. Canvases stay VISIBLE — the engines render a single
   composed still frame instead of being display:none'd into a black box. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  /* opacity too — the words now fade in, so without this a reduced-motion
     visitor would be left looking at an invisible headline. */
  .word-mask > span { transform: none !important; opacity: 1 !important; }
  .narrative-step { opacity: 1; }
  .rail-track { animation: none; transform: none; }
  .signal-rail { overflow-x: auto; }
}

/* -------------------------------------------------------- 30 · NO-SCRIPT */
html:not(.js) [data-reveal] { opacity: 1 !important; transform: none !important; }
html:not(.js) .narrative-step { opacity: 1; }
html:not(.js) .section-index,
html:not(.js) .progress { display: none; }