/* Geist font family */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/geist-regular.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/geist-medium.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/geist-semibold.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url("/fonts/newsreader.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 300 500; font-display: swap;
  src: url("/fonts/newsreader.woff2") format("woff2"); }

/* =========================================================================
   Velho — marketing site
   Dark "blueprint instrument" identity. Reactive sensor-grid hero, hairline
   blueprint grid, film grain, cobalt accent, teal reserved for metrics,
   monospace instrumentation labels, one light "measured paper" section.
   Self-contained: system fonts + inlined display face, Canvas 2D, data-URIs.

   STRICT SPACING SYSTEM — everything uses these tokens, nothing ad-hoc:
   --s1..--s9 (4→96px scale) · --section (band padding) · --gap (grid gap)
   --lede-gap (lede→content) · --card-pad. Consistency lives here.
   ========================================================================= */

:root {
  /* palette — light theme for staging */
  --ground: #f1eee7;
  --panel: #fbfaf6;
  --deep: #0A1B34;
  --card: #ffffff;
  --ink: #141d2e;
  --ink-soft: #4e5961;
  --muted: #7a8178;
  --line: #d9d5ca;
  --line-soft: #e7e2d6;
  --accent: #0A1B34;
  --accent-soft: #3E5470;
  --on-accent: #fffaf1;
  --teal: #717b60;
  --grid-line: rgba(24, 36, 48, 0.06);

  /* spacing scale (8px base) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;

  /* structural rhythm — used consistently across every section */
  --section: clamp(72px, 9vw, 116px);   /* band top/bottom padding */
  --gap: clamp(20px, 3vw, 40px);        /* grid gap everywhere */
  --head-gap: var(--s6);                /* sec-head-row → heading */
  --lede-gap: clamp(32px, 5vw, 56px);   /* lede → content */
  --card-pad: clamp(22px, 2.4vw, 30px); /* inner padding of every card */
  --rule: 1px solid var(--line);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mono: "SFMono-Regular", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --display: "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 72px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background-color: var(--ground);
  background-image:
    linear-gradient(180deg, #f5f1e8 0%, #eceee8 55%, #f6f2ea 100%),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 100% 100%, 64px 64px, 64px 64px;
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; margin: 0; text-wrap: balance; }
p { text-wrap: pretty; }

/* ---------- fixed overlays ---------- */
.grain {
  position: fixed; inset: 0; z-index: 9990; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 9995;
  background: linear-gradient(90deg, var(--accent), var(--teal)); transform: scaleX(0); transform-origin: 0 50%;
}
/* (custom cursor removed) */

/* ---------- instrumentation eyebrow ---------- */
.kicker, .sec-num {
  font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em;
  font-weight: 500; color: var(--muted); margin: 0;
}
.kicker { color: var(--accent-soft); display: inline-flex; align-items: center; gap: var(--s3); }
.kicker::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.sec-num.light { color: var(--muted); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; text-decoration: none; font-family: var(--mono); font-weight: 500; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.06em; padding: 15px 28px; border: 1px solid transparent;
  cursor: pointer; transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .12s var(--ease);
  will-change: transform;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-soft); box-shadow: 0 0 40px -12px var(--accent); }
.btn-primary:active { transform: translateY(1px) scale(0.99); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink-soft); }
.btn-full { width: 100%; text-align: center; }

/* ---------- logo ---------- */
.logo-mark { width: 28px; height: 28px; flex: none; }
.logo-wordmark { height: 44px; width: auto; }
.brand-word { font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: 0.02em; }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9000; height: 66px;
  transition: transform .34s var(--ease), background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled { background: color-mix(in srgb, var(--ground) 82%, transparent); backdrop-filter: saturate(1.1) blur(10px); border-bottom-color: var(--line); }
.nav.hidden { transform: translateY(-100%); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: var(--s5); }
.brand { display: flex; align-items: center; gap: var(--s3); text-decoration: none; color: var(--ink); }
.nav-links { display: flex; align-items: center; gap: var(--s6); }
.nav-links a { position: relative; text-decoration: none; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); padding-bottom: 3px; }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.nav-cta { color: var(--accent-soft); }
.nav-toggle { display: none; background: none; border: var(--rule); width: 40px; height: 38px; color: var(--ink); cursor: pointer; flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
.nav-toggle span { width: 18px; height: 2px; background: currentColor; display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding-block: 120px 90px; }
.hero .field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 40%, var(--ground) 92%); }
.hero-inner { position: relative; z-index: 2; width: 100%; min-width: 0; }
.hero .kicker { margin-bottom: var(--s6); }
.hero h1 { font-size: clamp(38px, 7.6vw, 92px); font-weight: 800; letter-spacing: -0.028em; line-height: 1.0; margin: 0 0 var(--s6); }
.hero h1 em { font-style: normal; color: var(--accent); text-shadow: 0 0 44px rgba(59, 116, 255, 0.5); }
.lede { font-size: clamp(17px, 2vw, 21px); color: var(--ink-soft); max-width: 54ch; margin: 0 0 var(--s7); line-height: 1.5; }
.hero-cta { display: flex; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s6); }
.hero-note { font-family: var(--mono); font-size: 12.5px; color: var(--muted); margin: 0; display: inline-flex; align-items: center; gap: var(--s2); letter-spacing: .02em; }
.hero-note .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px var(--teal); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.fig-tag { position: absolute; right: var(--gutter); bottom: var(--s5); z-index: 2; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .hero-note .dot { animation: none; } }

/* ---------- ticker ---------- */
.ticker { overflow: hidden; border-block: var(--rule); background: var(--panel); }
.ticker-track { display: inline-flex; align-items: center; gap: var(--s5); white-space: nowrap; padding: 13px 0; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--muted); animation: ticker 44s linear infinite; }
.ticker-track span { display: inline-block; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ---------- stack strip (works with your tools) ---------- */
.stack { border-bottom: var(--rule); background: var(--ground); }
.stack-inner { display: flex; align-items: center; gap: var(--s7); padding-block: var(--s6); }
.stack-label { flex: none; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); max-width: 15ch; line-height: 1.4; }
.stack-mask { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.stack-track { display: inline-flex; align-items: center; gap: var(--s7); white-space: nowrap; animation: ticker 38s linear infinite; }
.stack-item { font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--ink-soft); letter-spacing: -0.01em; opacity: .8; }
@media (prefers-reduced-motion: reduce) { .stack-track { animation: none; } }

/* ---------- bands ---------- */
.band { position: relative; padding-block: var(--section); }
.band > .wrap { position: relative; z-index: 1; }
.band.alt { background: rgba(255, 255, 255, 0.015); }
.band.ink {
  background: var(--deep);
  color: var(--on-accent);
}
.band.ink h1, .band.ink h2, .band.ink h3, .band.ink h4 { color: var(--on-accent); }
.band.ink .kicker { color: rgba(255,250,241,0.5); }
.band.ink .kicker::before { background: rgba(255,250,241,0.4); }
.band.ink .sec-num { color: rgba(255,250,241,0.4); }
.band.ink .sec-desc { color: rgba(255,250,241,0.5); }
.band.ink .sec-lede { color: rgba(255,250,241,0.75); }
.band.ink .sec-head-row { border-bottom-color: rgba(255,250,241,0.15); }
.band.ink .card { background: rgba(255,255,255,0.06); border-color: rgba(255,250,241,0.1); }
.band.ink .feature .ic { background: rgba(255,255,255,0.05); border-color: rgba(255,250,241,0.15); color: var(--on-accent); }
.band.ink .btn-ghost { color: var(--on-accent); border-color: rgba(255,250,241,0.3); }
.band.ink .btn-ghost:hover { border-color: var(--on-accent); }
.band.ink .rung { border-top-color: #5b86c4; }
.band.ink .rung-i { color: rgba(255,250,241,0.5); }
.band.ink .rung h3 { color: var(--on-accent); }
.band.ink .rung p { color: rgba(255,250,241,0.7); }
.band.ink p { color: rgba(255,250,241,0.75); }

.band.paper {
  --ground: #eef1f4; --panel: #f6f8fa; --card: #ffffff; --ink: #0e141a; --ink-soft: #3a444c;
  --muted: #5c6772; --line: #d4dae0; --line-soft: #e3e7ec; --grid-line: rgba(20, 50, 90, 0.05);
  background: #eef1f4; color: var(--ink);
}

/* section header — consistent everywhere */
.sec-head-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); border-bottom: var(--rule); padding-bottom: var(--s4); margin-bottom: var(--head-gap); }
.sec-desc { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0; text-align: right; }
.sec-head { font-size: clamp(28px, 4.4vw, 48px); letter-spacing: -0.025em; margin: 0 0 var(--s4); max-width: 20ch; }
.sec-lede { font-size: clamp(17px, 1.8vw, 20px); color: var(--ink-soft); max-width: 60ch; margin: 0 0 var(--lede-gap); line-height: 1.5; }

/* grids — one gap value */
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.wide-gap { gap: clamp(40px, 6vw, 80px); }

/* feature (icon + heading + text) — shared by problem, delivery, offer, included */
.feature { display: block; }
.feature .ic {
  width: 42px; height: 42px; display: grid; place-items: center; border: var(--rule); border-radius: 3px;
  color: var(--accent-soft); margin-bottom: var(--s4); background: var(--card);
  transition: color .25s, border-color .25s, transform .25s var(--ease);
}
.feature:hover .ic { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.feature .ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.feat-tag { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--accent-soft); margin: 0 0 var(--s2); }
.feature h3 { font-size: 20px; margin: 0 0 var(--s2); }
.feature p { margin: 0; color: var(--ink-soft); font-size: 15.5px; }
.paths .feature { border-top: 2px solid var(--line); padding-top: var(--s5); }
.paths .feature:hover { border-top-color: var(--accent); }
.neutrality { margin: var(--s7) 0 0; font-size: 17px; color: var(--ink-soft); border-top: var(--rule); padding-top: var(--s5); max-width: 62ch; }
.neutrality strong { color: var(--ink); }

/* stats */
.statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.stat { border-top: 2px solid var(--accent); padding-top: var(--s4); }
.stat-fig { font-family: var(--display); font-weight: 800; font-size: clamp(38px, 5.2vw, 64px); letter-spacing: -0.03em; line-height: 0.95; color: var(--teal); font-variant-numeric: tabular-nums; }
.stat-fig .unit { font-size: 0.44em; margin-left: 3px; color: var(--ink-soft); font-weight: 700; letter-spacing: -0.02em; }
.stat-claim { margin: var(--s4) 0 var(--s3); font-size: 14px; color: var(--ink-soft); line-height: 1.45; }
.stat-src { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0; }

/* model steps */
.steps { display: flex; align-items: stretch; gap: var(--s2); flex-wrap: wrap; }
.step { flex: 1 1 200px; }
.step-mark { display: inline-block; font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; margin-bottom: var(--s3); padding-bottom: var(--s2); border-bottom: 2px solid var(--accent); }
.step p { margin: 0; color: var(--ink-soft); font-size: 15.5px; }
.step-sep { align-self: center; color: var(--muted); font-size: 20px; padding: 0 var(--s1); }

/* loop */
.loop-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.loop-list li { border-top: 2px solid var(--ink); padding-top: var(--s4); }
.loop-list .ln { font-family: var(--mono); font-size: 12px; color: var(--accent-soft); letter-spacing: .1em; }
.loop-list h3 { font-size: 19px; margin: var(--s2) 0; }
.loop-list p { margin: 0; color: var(--ink-soft); font-size: 15px; }

/* range ladder */
.ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.rung { border-top: 2px solid var(--accent); padding-top: var(--s4); }
.rung-i { font-family: var(--mono); color: var(--muted); font-size: 12px; letter-spacing: .1em; }
.rung h3 { font-size: 22px; margin: var(--s2) 0 var(--s3); }
.rung p { margin: 0; color: var(--ink-soft); font-size: 15.5px; }

/* cases */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.case { background: var(--card); border: var(--rule); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); padding: var(--card-pad); display: flex; flex-direction: column; transition: border-color .3s, transform .3s var(--ease); }
.case:hover { border-color: var(--accent); transform: translateY(-2px); }
.case-tag { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 var(--s4); }
.case h3 { font-size: 20px; margin: 0 0 var(--s3); }
.case > p { color: var(--ink-soft); font-size: 15px; margin: 0 0 var(--s5); }
.case-stat { margin: auto 0 0 !important; padding-top: var(--s4); border-top: var(--rule); font-family: var(--mono); font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }
.case-stat span { display: block; font-family: var(--display); font-size: 32px; font-weight: 800; letter-spacing: -0.02em; color: var(--teal); line-height: 1; margin-bottom: var(--s1); text-transform: none; font-variant-numeric: tabular-nums; }
.fine { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: var(--s5); letter-spacing: .02em; }

/* adoption */
.adopt { margin-bottom: var(--s7); }
.adopt.cols-2 { gap: var(--gap) clamp(34px, 6vw, 76px); }
.pull { font-family: var(--display); font-weight: 500; font-size: clamp(20px, 2.8vw, 28px); line-height: 1.28; margin: 0; padding: 0 0 0 var(--s5); border-left: 3px solid var(--accent); color: var(--ink); max-width: 44ch; letter-spacing: -0.015em; }

/* offer */
.offer-grid { margin-bottom: var(--s7); }
.offer-grid .feature { border-top: var(--rule); padding-top: var(--s4); }

/* included (paper) */
.incl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.incl .feature h3 { font-size: 18px; }
.compare { align-self: start; }
.compare-head { font-family: var(--display); font-size: 22px; margin: 0 0 var(--s5); font-weight: 700; }
.compare-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.compare ul { list-style: none; margin: 0; padding: 0; }
.compare li { font-size: 14px; padding: var(--s3) 0; border-top: var(--rule); line-height: 1.4; }
.col-label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 var(--s2); }
.col-bad, .col-bad .col-label { color: var(--muted); }
.col-good .col-label { color: var(--accent); }
.col-good li { color: var(--ink-soft); }

/* tiers */
.tiers .tier { border: var(--rule); background: var(--card); padding: var(--card-pad); display: flex; flex-direction: column; transition: border-color .3s, transform .3s var(--ease); }
.tiers .tier:hover { border-color: var(--accent); transform: translateY(-2px); }
.tier.featured { border-color: var(--accent); box-shadow: inset 0 2px 0 var(--accent); position: relative; }
.tier-flag { position: absolute; top: -1px; right: 0; background: var(--accent); color: var(--on-accent); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; padding: 4px 10px; margin: 0; }
.tier-name { font-family: var(--display); font-size: 25px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 var(--s2); }
.tier-cadence { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--accent-soft); margin: 0 0 var(--s4); }
.tier > p:not(.tier-name):not(.tier-cadence):not(.tier-flag) { color: var(--ink-soft); font-size: 15px; margin: 0 0 var(--s5); }
.tier-link { margin-top: auto; text-decoration: none; font-family: var(--mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); border-bottom: 1px solid var(--accent); padding-bottom: 3px; align-self: flex-start; transition: color .2s; }
.tier-link:hover { color: var(--accent-soft); }

/* FAQ */
.faq { max-width: 820px; }
.faq-item { border-top: var(--rule); }
.faq-item:last-child { border-bottom: var(--rule); }
.faq-q { display: flex; justify-content: space-between; align-items: center; gap: var(--s5); width: 100%; background: none; border: 0; cursor: pointer; text-align: left; color: var(--ink); font-family: var(--display); font-weight: 700; font-size: clamp(17px, 2.2vw, 21px); letter-spacing: -0.01em; padding: var(--s5) 0; }
.faq-q:hover { color: var(--accent-soft); }
.faq-ic { flex: none; width: 22px; height: 22px; position: relative; }
.faq-ic::before, .faq-ic::after { content: ""; position: absolute; background: var(--accent); transition: transform .3s var(--ease); }
.faq-ic::before { top: 10px; left: 2px; width: 18px; height: 2px; }
.faq-ic::after { top: 2px; left: 10px; width: 2px; height: 18px; }
.faq-item.open .faq-ic::after { transform: scaleY(0); }
.faq-a { overflow: hidden; height: 0; transition: height .32s var(--ease); }
.faq-a-inner { padding: 0 0 var(--s5); color: var(--ink-soft); font-size: 16px; max-width: 68ch; }

/* contact */
.cta-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 6vw, 80px); align-items: start; }
.cta-points { list-style: none; margin: var(--s6) 0 0; padding: 0; }
.cta-points li { padding: var(--s3) 0 var(--s3) var(--s5); position: relative; color: var(--ink); font-size: 15.5px; border-top: var(--rule); }
.cta-points li::before { content: "→"; position: absolute; left: 0; color: var(--accent-soft); }
.cta-form { background: var(--panel); border: var(--rule); padding: var(--s6); }
.cta-form label { display: block; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: var(--s4); }
.cta-form input, .cta-form textarea { width: 100%; margin-top: var(--s2); background: var(--deep); border: var(--rule); color: var(--ink); padding: 12px; font-family: var(--sans); font-size: 15px; resize: vertical; }
.cta-form input:focus, .cta-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.cta-form .btn { margin-top: var(--s2); }
.form-alt { font-family: var(--mono); font-size: 12px; color: var(--muted); text-align: center; margin: var(--s4) 0 0; }
.form-alt a { color: var(--ink-soft); }

/* CTA in dark sections */
.band.ink .cta-points li { color: var(--on-accent); border-top-color: rgba(255,250,241,0.15); }
.band.ink .cta-points li::before { color: #7aa3d6; }
.band.ink .cta-form { background: rgba(255,255,255,0.06); border-color: rgba(255,250,241,0.12); }
.band.ink .cta-form label { color: rgba(255,250,241,0.6); }
.band.ink .cta-form input, .band.ink .cta-form textarea { background: rgba(0,0,0,0.25); border-color: rgba(255,250,241,0.12); color: var(--on-accent); }
.band.ink .cta-form input::placeholder, .band.ink .cta-form textarea::placeholder { color: rgba(255,250,241,0.4); }
.band.ink .form-alt { color: rgba(255,250,241,0.5); }
.band.ink .form-alt a { color: rgba(255,250,241,0.7); }
.form-status { font-family: var(--mono); font-size: 12.5px; margin: var(--s3) 0 0; line-height: 1.45; }
.form-status.ok { color: var(--teal); }
.form-status.err { color: #ff7a7a; }

/* footer */
.footer { background: var(--deep); color: rgba(255,250,241,0.7); padding-block: var(--s8) var(--s6); border-top: none; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--gap); }
.footer-brand .brand { margin-bottom: var(--s4); }
.footer-brand .brand-word { color: var(--on-accent); }
.footer-brand p { margin: 0; font-size: 14px; color: rgba(255,250,241,0.6); max-width: 30ch; }
.footer-col h4 { font-family: var(--mono); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,250,241,0.45); margin: 0 0 var(--s4); }
.footer-col a { display: block; text-decoration: none; font-size: 14px; color: rgba(255,250,241,0.65); margin-bottom: var(--s3); }
.footer-col a:hover { color: var(--on-accent); }
.footer-legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid rgba(255,250,241,0.12); font-family: var(--mono); font-size: 11.5px; letter-spacing: .03em; color: rgba(255,250,241,0.5); }

/* reveal — section + staggered children */
/* sections stay put — only their content elements reveal, below */
.js [data-reveal] .stat,
.js [data-reveal] .feature,
.js [data-reveal] .case,
.js [data-reveal] .tier,
.js [data-reveal] .rung,
.js [data-reveal] .loop-list li { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.js [data-reveal].in .stat,
.js [data-reveal].in .feature,
.js [data-reveal].in .case,
.js [data-reveal].in .tier,
.js [data-reveal].in .rung,
.js [data-reveal].in .loop-list li { opacity: 1; transform: none; }
.js [data-reveal].in :is(.stat, .feature, .case, .tier, .rung, .loop-list li):nth-child(1) { transition-delay: .04s; }
.js [data-reveal].in :is(.stat, .feature, .case, .tier, .rung, .loop-list li):nth-child(2) { transition-delay: .12s; }
.js [data-reveal].in :is(.stat, .feature, .case, .tier, .rung, .loop-list li):nth-child(3) { transition-delay: .20s; }
.js [data-reveal].in :is(.stat, .feature, .case, .tier, .rung, .loop-list li):nth-child(4) { transition-delay: .28s; }
.js [data-reveal].in :is(.stat, .feature, .case, .tier, .rung, .loop-list li):nth-child(5) { transition-delay: .36s; }
.js [data-reveal].in :is(.stat, .feature, .case, .tier, .rung, .loop-list li):nth-child(6) { transition-delay: .44s; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal] :is(.stat, .feature, .case, .tier, .rung, .loop-list li) { opacity: 1; transform: none; transition: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 940px) {
  .statgrid { grid-template-columns: 1fr 1fr; }
  .cols-3, .cases, .ladder, .loop-list, .tiers.cols-3 { grid-template-columns: 1fr 1fr; }
  .cta-inner, .cols-2, .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .incl { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  :root { --section: clamp(52px, 13vw, 72px); }
  body { font-size: 16px; }
  .nav-links { position: fixed; inset: 66px 0 auto; flex-direction: column; align-items: stretch; gap: 0; background: var(--ground); border-bottom: var(--rule); padding: 4px var(--gutter) 18px; transform: translateY(-135%); transition: transform .3s var(--ease); }
  .nav-links.open { transform: none; }
  .nav-links a { padding: 14px 0; border-top: 1px solid var(--line-soft); }
  .nav-toggle { display: inline-flex; }
  .statgrid, .cols-3, .cases, .ladder, .loop-list, .tiers.cols-3, .compare-row, .offer-grid, .cta-inner, .cols-2, .footer-top { grid-template-columns: 1fr; }
  .steps { flex-direction: column; align-items: flex-start; }
  .step-sep { transform: rotate(90deg); }
  .sec-head-row { flex-direction: column; gap: var(--s1); }
  .sec-desc { text-align: left; }
  .fig-tag { display: none; }
  .stack-inner { flex-direction: column; align-items: flex-start; gap: var(--s4); }
  .hero { min-height: auto; padding-block: 96px var(--s8); }
  .hero h1 { font-size: clamp(30px, 8.6vw, 46px); letter-spacing: -0.02em; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { text-align: center; }
  .pull { font-size: clamp(19px, 5.4vw, 26px); }
  .footer-legal { flex-direction: column; }
  .gauge { display: none; }
}

/* =========================================================================
   FINESSE / REFINEMENTS
   ========================================================================= */

/* anchor offset so fixed nav never covers a section heading */
:where(section[id], .band[id], #main) { scroll-margin-top: 84px; }

/* brand-tuned selection + refined thin scrollbar */
::selection { background: rgba(59, 116, 255, 0.32); color: #fff; }
.band.paper ::selection { background: rgba(59, 116, 255, 0.20); color: var(--ink); }
* { scrollbar-width: thin; scrollbar-color: #263140 transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: #263140; border-radius: 10px; border: 3px solid var(--deep); }
::-webkit-scrollbar-thumb:hover { background: #34424f; }

/* skip link (a11y) */
.skip { position: fixed; top: -60px; left: 12px; z-index: 10000; background: var(--accent); color: #fff; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; padding: 10px 16px; text-decoration: none; transition: top .2s var(--ease); }
.skip:focus { top: 12px; }

/* refined typography */
body { font-feature-settings: "kern" 1, "liga" 1, "calt" 1; }
h1, h2, h3, h4, .stat-fig, .case-stat span, .tier-name, .step-mark { font-feature-settings: "kern" 1; }

/* refined link underline — wipes in from left, retracts to the right on leave */
.nav-links a:not(:hover):not(.active)::after { transform-origin: right; }
.nav-links a.active { color: var(--ink); }
.nav-links a.active::after { transform: scaleX(1); }

/* primary button hover: quiet — colour shift + soft glow only, no sweep/magnet */
.btn-primary:hover { box-shadow: 0 0 32px -16px var(--accent); }

/* section-header rule gets a short accent tick */
.sec-head-row { position: relative; }
.sec-head-row::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 42px; height: 2px; background: var(--accent); }

/* card hover — corner crosshair + soft lift; icon gains a glow */
.case, .tier { position: relative; }
.case::after, .tier::after { content: ""; position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; border-top: 1px solid var(--accent); border-right: 1px solid var(--accent); opacity: 0; transition: opacity .3s var(--ease); }
.case:hover, .tier:hover { box-shadow: 0 22px 50px -34px rgba(0,0,0,.9); }
.case:hover::after, .tier:hover::after { opacity: .75; }
.feature:hover .ic { box-shadow: 0 0 24px -10px var(--accent); }

/* pause the moving strips on hover */
.ticker:hover .ticker-track, .stack:hover .stack-track { animation-play-state: paused; }

/* section-counter gauge (instrument readout) */
.gauge { position: fixed; right: var(--gutter); bottom: 20px; z-index: 40; display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; color: var(--muted); background: color-mix(in srgb, #0b0f14 70%, transparent); backdrop-filter: blur(4px); border: 1px solid var(--line); padding: 5px 10px; opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .4s var(--ease); pointer-events: none; }
.gauge.show { opacity: 1; transform: none; }
.gauge #gauge-cur { color: var(--accent-soft); }
.gauge-sep { opacity: .5; }

/* hero staggered load-in */
.js .hero-inner > *, .js .fig-tag { opacity: 0; animation: heroIn .9s var(--ease) forwards; }
.js .hero .kicker { animation-delay: .05s; }
.js .hero h1 { animation-delay: .16s; }
.js .hero .lede { animation-delay: .30s; }
.js .hero-cta { animation-delay: .42s; }
.js .hero-note { animation-delay: .52s; }
.js .fig-tag { animation-delay: .80s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .hero-inner > *, .js .fig-tag { opacity: 1; animation: none; }
}

/* ---------- process: loop steps + animated diagram ---------- */
.process-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.loop-steps { list-style: none; margin: 0; padding: 0; }
.loop-steps li { display: grid; grid-template-columns: auto 1fr; gap: var(--s4); padding: var(--s5) 0; border-top: var(--rule); }
.loop-steps li:first-child { border-top: 0; }
.loop-steps .ln { font-family: var(--mono); font-size: 12px; color: var(--accent-soft); letter-spacing: .1em; padding-top: 5px; }
.loop-steps h3 { font-size: 19px; margin: 0 0 var(--s2); }
.loop-steps p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.loop-viz { display: flex; flex-direction: column; align-items: stretch; gap: var(--s5); }
.loop-viz .dial { width: min(320px, 84%); height: auto; align-self: center; }

/* deliverable board */
.board { border: var(--rule); background: var(--card); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); }
.board-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: var(--rule); }
.board-title { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--ink); }
.board-sub { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); white-space: nowrap; }
.board-list { list-style: none; margin: 0; padding: var(--s2) 0; position: relative; min-height: 222px; }
.board-item { display: flex; align-items: center; gap: var(--s3); padding: 10px var(--s5); font-size: 13.5px; will-change: transform; transition: opacity .5s cubic-bezier(.65,0,.35,1); }
.board-item.entering { opacity: 0; }
.board-item.leaving { opacity: 0; pointer-events: none; }
.bi-check { flex: none; width: 15px; height: 15px; border: 1.5px solid var(--muted); border-radius: 3px; position: relative; transition: border-color .45s cubic-bezier(.65,0,.35,1), background .45s cubic-bezier(.65,0,.35,1); }
.bi-check::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #06121a; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); opacity: 0; transition: opacity .38s ease, transform .45s cubic-bezier(.2, 1.5, .4, 1); }
.board-item[data-status="active"] .bi-check { border-color: var(--accent); }
.board-item[data-status="done"] .bi-check { border-color: var(--teal); background: var(--teal); }
.board-item[data-status="done"] .bi-check::after { opacity: 1; transform: rotate(45deg) scale(1); }
.bi-body { flex: 1; min-width: 0; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bi-team { color: var(--muted); }
.bi-sep { color: var(--muted); opacity: .55; }
.board-item[data-status="done"] .bi-body { color: var(--muted); }
.bi-tag { flex: none; font-family: var(--mono); font-size: 9.5px; letter-spacing: .05em; padding: 2px 7px; border-radius: 2px; color: var(--muted); border: 1px solid var(--line); white-space: nowrap; transition: opacity .2s ease, color .45s ease, background .45s ease, border-color .45s ease; }
.board-item[data-status="planned"] .bi-tag { color: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.board-item[data-status="active"] .bi-tag { color: var(--accent); border-color: var(--accent); }
.board-item[data-status="done"] .bi-tag { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 45%, transparent); }
.board-item[data-status="added"] .bi-tag { color: var(--teal); border-color: var(--teal); }
.board-item[data-status="priority"] .bi-tag { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.board-note { margin: 0; padding: var(--s3) var(--s5) var(--s4); border-top: var(--rule); font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; min-height: 3.6em; }
@media (max-width: 940px) { .loop-viz .dial { width: min(300px, 82%); } }
.loop-viz .ring { fill: none; stroke: var(--line); stroke-width: 1.5; }
.loop-viz .ring-dash { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 2 9; opacity: .32; }
.loop-viz .lnode { fill: var(--panel); stroke: var(--accent); stroke-width: 2; }
.loop-viz .lnum { font-family: var(--mono); font-size: 12px; fill: var(--ink); }
.loop-viz .llabel { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; fill: var(--ink-soft); }
.loop-viz .travel { fill: var(--teal); filter: drop-shadow(0 0 7px var(--teal)); }
.loop-travel { transform-box: view-box; transform-origin: 180px 180px; will-change: transform; }
.loop-viz .lcenter { font-family: var(--mono); font-size: 14px; letter-spacing: .16em; fill: var(--ink); }
.loop-viz .lcenter-sub { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; fill: var(--muted); }

/* reactive loop: nodes + steps + output */
.lnode-group .lnode { transition: fill .45s ease, stroke .45s ease; }
.lnode-group .lnum, .lnode-group .llabel { transition: fill .45s ease; }
.lnode-group.hot .lnode { fill: var(--teal); stroke: var(--teal); }
.lnode-group.hot .lnum { fill: #06121a; }
.lnode-group.hot .llabel { fill: var(--ink); }
.process-hint { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 var(--s5); }
.loop-steps li { cursor: default; padding-inline: var(--s4); border-radius: 2px; transition: background .4s cubic-bezier(.65,0,.35,1), color .4s cubic-bezier(.65,0,.35,1); }
.loop-steps li:first-child { border-top: 0; }
.loop-steps li.active { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.loop-steps li.active .ln { color: var(--teal); }
.loop-steps li.active h3 { color: var(--ink); }
.loop-steps li:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.loop-output { width: 100%; max-width: 340px; border: var(--rule); background: var(--card); padding: var(--s4) var(--s5); min-height: 108px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); }
.lo-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--accent-soft); margin: 0 0 var(--s3); }
.lo-text { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.5; }

/* ---------- first-month timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap); position: relative; }
.timeline::before { content: ""; position: absolute; top: 7px; left: 8px; right: 8px; height: 2px; background: linear-gradient(90deg, var(--accent), var(--teal)); opacity: .45; }
.tl-item { position: relative; }
.tl-marker { height: 16px; display: flex; align-items: center; margin-bottom: var(--s5); }
.tl-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--ground); border: 2px solid var(--accent); position: relative; z-index: 1; }
.tl-loop .tl-dot { border-color: var(--teal); box-shadow: 0 0 10px -1px var(--teal); }
.tl-when { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--accent-soft); margin: 0 0 var(--s3); }
.tl-item h3 { font-size: 18px; margin: 0 0 var(--s2); }
.tl-item > p:last-child { margin: 0; color: var(--ink-soft); font-size: 14.5px; }

@media (max-width: 940px) {
  .process-grid { grid-template-columns: 1fr; gap: var(--s7); }
  .timeline { grid-template-columns: 1fr; gap: 0; }
  .timeline::before { top: 8px; bottom: 8px; left: 7px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--accent), var(--teal)); }
  .tl-item { padding: 0 0 var(--s6) var(--s7); }
  .tl-item:last-child { padding-bottom: 0; }
  .tl-marker { position: absolute; left: 0; top: 2px; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .loop-travel, .loop-viz .ring-dash { animation: none; } }

/* ---------- subtle ambient movement & texture ---------- */
/* slow aurora behind the hero sensor field */
.hero::before { content: ""; position: absolute; inset: -12%; z-index: 0; pointer-events: none; filter: blur(24px);
  background: radial-gradient(38% 48% at 22% 32%, rgba(59,116,255,0.11), transparent 70%), radial-gradient(34% 44% at 82% 62%, rgba(33,201,201,0.07), transparent 70%);
  animation: auroraDrift 26s ease-in-out infinite alternate; }

/* faint aurora in the deep (ink) sections */
.band.ink { overflow: hidden; }
.band.ink::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; filter: blur(30px);
  background: radial-gradient(46% 60% at 84% 18%, rgba(59,116,255,0.08), transparent 68%), radial-gradient(40% 55% at 12% 86%, rgba(33,201,201,0.05), transparent 70%);
  animation: auroraDrift 34s ease-in-out infinite alternate; }
@keyframes auroraDrift { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.07); } }

/* timeline "compounds" node breathes */
.tl-loop .tl-dot { animation: dotPulse 2.6s ease-in-out infinite; }
@keyframes dotPulse { 0%, 100% { box-shadow: 0 0 8px -1px var(--teal); } 50% { box-shadow: 0 0 17px 1px var(--teal); } }

@media (prefers-reduced-motion: reduce) { .band::before, .hero::before, .band.ink::after, .tl-loop .tl-dot { animation: none; } }

/* ---------- partner vs one-off project ---------- */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-bottom: var(--s8); }
.vs-card { border: var(--rule); background: var(--card); padding: var(--s6); }
.vs-good { border-color: var(--accent); box-shadow: inset 0 2px 0 var(--accent); }
.vs-tag { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 var(--s5); }
.vs-bad .vs-tag { color: var(--muted); }
.vs-good .vs-tag { color: var(--accent); }
.vs-card ul { list-style: none; margin: 0; padding: 0; }
.vs-card li { position: relative; padding: var(--s3) 0 var(--s3) var(--s6); border-top: var(--rule); font-size: 15px; line-height: 1.45; }
.vs-card li:first-child { border-top: 0; }
.vs-bad li { color: var(--muted); }
.vs-bad li::before { content: "✕"; position: absolute; left: 0; top: var(--s3); color: var(--muted); font-size: 13px; }
.vs-good li { color: var(--ink-soft); }
.vs-good li::before { content: "✓"; position: absolute; left: 0; top: var(--s3); color: var(--accent); font-weight: 700; }
.incl-strip { border-top: var(--rule); padding-top: var(--s5); }
.incl-strip-label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 0 0 var(--s4); }
.incl-mini { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3) var(--gap); }
.incl-mini li { position: relative; padding-left: var(--s5); font-size: 15px; color: var(--ink-soft); }
.incl-mini li::before { content: "→"; position: absolute; left: 0; color: var(--accent); }
@media (max-width: 820px) { .vs { grid-template-columns: 1fr; } .incl-mini { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .incl-mini { grid-template-columns: 1fr; } }

/* ---------- depth: sticky-heading split sections + floating cards ---------- */
.band.split > .wrap { display: grid; grid-template-columns: minmax(0, 4.6fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 84px); align-items: start; }
.split-head { position: sticky; top: 108px; align-self: start; }
.split-head .sec-head { margin-bottom: var(--s5); max-width: 16ch; }
.split-head .sec-lede { margin-bottom: var(--s4); }
.split-head .fine { margin-top: var(--s5); }
.split-body { min-width: 0; }
.band.split .statgrid { grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 44px); }
.band.split .cases { grid-template-columns: 1fr; }
.band.split .faq { max-width: none; }
@media (max-width: 860px) {
  .band.split > .wrap { grid-template-columns: 1fr; gap: var(--s6); }
  .split-head { position: static; }
  .split-head .sec-head { max-width: 20ch; }
}
@media (max-width: 560px) { .band.split .statgrid { grid-template-columns: 1fr; } }

/* cards float above the blueprint canvas for z-depth */
.case, .tier, .vs-card, .board, .cta-form { box-shadow: 0 16px 40px -26px rgba(0, 0, 0, 0.92); }
.case:hover, .tier:hover { box-shadow: 0 26px 54px -30px rgba(0, 0, 0, 0.95); }

/* ---------------- Language switch ---------------- */
.lang-switch { display: inline-flex; align-items: center; gap: 6px; margin-left: 2px; font-family: var(--mono); }
.lang-btn { background: none; border: none; padding: 2px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); cursor: pointer; line-height: 1; transition: color .2s var(--ease); }
.lang-btn:hover { color: var(--ink); }
.lang-btn.active { color: var(--accent-soft); }
.lang-div { color: var(--line); font-size: 12px; user-select: none; }
@media (max-width: 620px) {
  .lang-switch { padding: 14px 0; border-top: 1px solid var(--line-soft); justify-content: flex-start; gap: 12px; }
  .lang-btn { font-size: 13px; padding: 4px 0; }
}

/* ---------------- Gantt / Year chart ---------------- */
.gantt-scroll { overflow-x: auto; }
.gantt { --label: 210px; min-width: 720px; }
.grow { display: grid; grid-template-columns: var(--label) 1fr; align-items: center; }
.glabel { font-size: 14px; color: rgba(255,250,241,.82); padding: 4px 16px 4px 0; }
.glabel--lane { font-style: italic; font-size: 15px; color: var(--teal); }
.gtrack { display: grid; grid-template-columns: repeat(12,1fr); position: relative; height: 32px;
  background-image: linear-gradient(90deg, rgba(255,250,241,.08) 0 1px, transparent 1px);
  background-size: calc(100%/12) 100%; border-right: 1px solid rgba(255,250,241,.08); }
.ghead { height: auto; background: none; border: none; margin-bottom: 6px; }
.ghead span { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: rgba(255,250,241,.5);
  padding-left: 6px; align-self: end; border-left: 1px solid rgba(255,250,241,.08); }
.gbar { align-self: center; height: 20px; border-radius: 3px; margin: 0 2px; }
.gbar--build { background: #5b86c4; }
.gbar--scale { background: transparent; border: 1.5px solid #6f9fd6; }
.gbar--source { background: #57636f; }
.gbar--adv { background: transparent; border: 1.5px dashed #6f9fd6; }
.gbar--lane { background: var(--teal); height: 16px; border-radius: 3px; }
.gantt__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 20px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: rgba(255,250,241,.6); }
.gantt__legend .sw { display: inline-flex; align-items: center; gap: 8px; }
.gantt__legend .sw i { width: 22px; height: 11px; border-radius: 2px; display: inline-block; }
.gantt__legend .note { margin-left: auto; color: rgba(255,250,241,.4); }
.gantt-section { padding: clamp(48px, 8vw, 80px) 0; }
.gantt-section .kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,250,241,.5); }
.gantt-section .kicker b { color: #7aa3d6; font-weight: 600; }
.gantt-section .sec-head { margin-top: 16px; max-width: 18ch; }
.gantt-section .sec-lede { margin-top: 18px; max-width: 64ch; color: rgba(255,250,241,.66); }