/*
 * SPDX-FileCopyrightText: 2026 Stanislav Saveliev
 * SPDX-License-Identifier: MIT
 *
 * Colour values mirror spec/design-tokens.json (dark palette). That file is authoritative;
 * if these drift, the stylesheet is the bug. See docs/03-design-system.md.
 */

:root {
  color-scheme: dark;
  --canvas: #0a0d12;
  --canvas-raised: #10151d;
  --surface: #171d27;
  --surface-elevated: #202938;
  --border: #2e394a;
  --text: #f2f5f8;
  --muted: #9aa7b8;
  --accent: #70e1c8;
  --accent-strong: #38cbb0;
  --info: #7da6ff;
  --warning: #f5c56b;
  --danger: #ff6b7d;
  --success: #6ed59b;

  /* Channel triplets for rgba() tints. Keeping these separate from the hex tokens is what
     lets a future light block (CYB-009) reskin 74 call sites by changing three lines. */
  --ink-0: #dfe5ea;
  --ink-1: #cbd4dc;
  --ink-2: #9bacb9;
  --ink-3: #8996a4;
  --ink-4: #778695;
  --on-accent: #07110f;
  --accent-text: #70e1c8;   /* text-safe accent; light mode swaps in accentStrong */

  --bg-deep: #080b10;
  --bg-mid: #0a0e14;
  --card: #111720;
  --card-deep: #090d13;
  --dot: #516070;
  --node: #3b4959;
  --node-dot: #566574;

  --chrome-rgb: 13,17,24;
  --line-rgb: 157,179,194;

  --accent-rgb: 112,225,200;   /* --accent  #70e1c8 */
  --fg-rgb: 255,255,255;       /* light-on-dark veils */
  --shadow-rgb: 0,0,0;

  /* Resolved forms of the two tokens the blueprint and partner pages ask for by
     name. Both derive from the rgb tokens above, so a theme that redefines those
     redefines these with it. */
  --line: rgba(var(--line-rgb), .16);
  --accent-border: rgba(var(--accent-rgb), .32);

  --max: 1260px;
  --ease: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--canvas); }
main section[id] { scroll-margin-top:110px; }
.blueprint-page .bp-section[id] { scroll-margin-top:180px; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background: var(--canvas);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
svg { display: block; }
:where(a,button,input):focus-visible { outline:3px solid var(--accent); outline-offset:4px; border-radius:8px; }
::selection { background: rgba(var(--accent-rgb),.22); color: var(--text); }

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--accent);
  color:var(--on-accent);
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.page-atmosphere {
  position: absolute;
  inset: 0 0 auto;
  height: 1080px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 64% 30%, rgba(39,76,87,.24), transparent 28%),
    radial-gradient(circle at 18% 12%, rgba(48,53,84,.18), transparent 25%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-mid) 65%, var(--canvas) 100%);
}
.atmosphere-glow { position:absolute; border-radius:50%; filter: blur(80px); opacity:.45; }
.atmosphere-glow--one { width:620px; height:240px; background:rgba(63,187,166,.13); right:-80px; top:340px; transform:rotate(-13deg); }
.atmosphere-glow--two { width:440px; height:260px; background:rgba(97,116,213,.11); left:-110px; top:150px; }
.horizon-line { position:absolute; left:0; right:0; top:62%; height:1px; background:linear-gradient(90deg,transparent 4%,rgba(var(--accent-rgb),.16) 31%,rgba(239,252,249,.42) 58%,rgba(var(--accent-rgb),.10) 86%,transparent); box-shadow:0 0 38px rgba(var(--accent-rgb),.22); }
.grain { position:absolute; inset:0; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }

.site-header {
  position: fixed;
  z-index: 50;
  top: 16px;
  left: 50%;
  width: min(calc(100% - 32px), var(--max));
  height: 62px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 12px 0 18px;
  border: 1px solid rgba(var(--line-rgb),.13);
  border-radius: 18px;
  background: rgba(var(--chrome-rgb),.58);
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  box-shadow: 0 12px 50px rgba(var(--shadow-rgb),.2);
  transform: translateX(-50%);
  transition: background .25s ease, border-color .25s ease, top .25s ease;
}
.site-header.is-scrolled { top: 8px; background:rgba(var(--chrome-rgb),.86); border-color:rgba(var(--line-rgb),.2); }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:650; letter-spacing:-.02em; }
.brand img { filter: drop-shadow(0 0 12px rgba(var(--accent-rgb),.15)); }
.desktop-nav { display:flex; gap:32px; color:var(--ink-1); font-size:14px; }
.desktop-nav a, .header-cta { transition: color .2s ease, background .2s ease; }
.desktop-nav a:hover { color:var(--text); }
.header-cta { justify-self:end; padding:11px 16px; border:1px solid rgba(var(--accent-rgb),.22); border-radius:12px; color:var(--accent-text); font-size:13px; font-weight:600; background:rgba(var(--accent-rgb),.06); }
.header-cta:hover { background:rgba(var(--accent-rgb),.13); }
.menu-button { display:none; justify-self:end; width:42px; height:42px; border:0; border-radius:12px; background:rgba(var(--fg-rgb),.05); }
.menu-button span { display:block; width:18px; height:1px; margin:5px auto; background:var(--text); transition:transform .2s ease; }
.mobile-nav { display:none; }

main, footer { position:relative; z-index:1; }
.hero {
  width: min(calc(100% - 48px), var(--max));
  min-height: 800px;
  margin: 0 auto;
  padding: 120px 0 72px;
  display: grid;
  grid-template-columns: .88fr 1.25fr;
  align-items: center;
  gap: 72px;
}
.eyebrow, .section-kicker { color:var(--accent-text); text-transform:uppercase; letter-spacing:.16em; font-size:11px; font-weight:700; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; }
.eyebrow-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 16px rgba(var(--accent-rgb),.75); }
.hero h1 { margin:22px 0 22px; font-size:clamp(52px,5.2vw,82px); line-height:.91; letter-spacing:-.067em; font-weight:620; }
.hero h1 span { color:transparent; -webkit-text-stroke:1px rgba(var(--fg-rgb),.52); text-stroke:1px rgba(var(--fg-rgb),.52); }
.hero-lead { max-width:590px; margin:0; color:var(--ink-2); font-size:clamp(18px,1.55vw,22px); line-height:1.58; letter-spacing:-.02em; }
.hero-actions { display:flex; align-items:center; gap:12px; margin-top:38px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px; padding:0 20px; border-radius:13px; font-size:14px; font-weight:650; transition:transform .2s var(--ease), background .2s ease, border .2s ease; }
.button:hover { transform:translateY(-2px); }
.button--primary { color:var(--on-accent); background:linear-gradient(135deg,#8cead5,#58d7bc); box-shadow:0 16px 38px rgba(56,203,176,.18); }
.button--primary svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.button--ghost { color:var(--ink-0); border:1px solid rgba(var(--line-rgb),.16); background:rgba(var(--fg-rgb),.035); }
.button--ghost:hover { background:rgba(var(--fg-rgb),.07); border-color:rgba(var(--line-rgb),.25); }
.hero-notes { display:flex; flex-wrap:wrap; gap:16px 24px; margin-top:34px; color:var(--ink-4); font-size:12px; }
.hero-notes span { position:relative; padding-left:12px; }
.hero-notes span::before { content:""; position:absolute; left:0; top:50%; width:3px; height:3px; border-radius:50%; background:var(--dot); }

.evidence-links { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:28px; }
.evidence-links a { min-height:104px; padding:20px; border:1px solid rgba(var(--line-rgb),.16); border-radius:14px; background:rgba(var(--fg-rgb),.025); transition:transform .2s var(--ease),border-color .2s ease,background .2s ease; }
.evidence-links a:hover { transform:translateY(-2px); border-color:rgba(var(--accent-rgb),.35); background:rgba(var(--accent-rgb),.045); }
.evidence-links strong,.evidence-links span { display:block; }
.evidence-links strong { color:var(--ink-0); font-size:15px; }
.evidence-links span { margin-top:7px; color:var(--ink-3); font-size:13px; line-height:1.5; }

.hero-visual { position:relative; min-width:0; }
.desktop-stage {
  position:relative;
  aspect-ratio: 16 / 10;
  border:1px solid rgba(171,196,207,.18);
  border-radius:27px;
  overflow:hidden;
  background:#080c12;
  box-shadow:0 44px 120px rgba(var(--shadow-rgb),.54), 0 0 0 8px rgba(var(--fg-rgb),.015);
  transform:perspective(1400px) rotateY(-2deg) rotateX(1.2deg);
  transform-origin:center;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.desktop-stage:hover { transform:perspective(1400px) rotateY(0) rotateX(0) translateY(-4px); box-shadow:0 54px 135px rgba(var(--shadow-rgb),.6),0 0 0 8px rgba(var(--fg-rgb),.02); }
.concept-badge { position:absolute; z-index:8; right:18px; bottom:16px; padding:7px 10px; border:1px solid rgba(var(--accent-rgb),.2); border-radius:999px; color:var(--accent-text); background:rgba(7,12,18,.78); font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.desktop-wallpaper { position:absolute; inset:0; background:radial-gradient(circle at 68% 18%,rgba(47,92,113,.30),transparent 28%),linear-gradient(180deg,#090e16,#0b111a 58%,#081017); overflow:hidden; }
.desktop-wallpaper::before { content:""; position:absolute; width:82%; height:58%; left:10%; bottom:-29%; border:1px solid rgba(113,185,183,.09); border-radius:50%; transform:rotate(-3deg); box-shadow:0 0 80px rgba(var(--accent-rgb),.03) inset; }
.desktop-orbit { position:absolute; border:1px solid rgba(126,154,183,.09); border-radius:50%; }
.desktop-orbit--one { width:78%; height:56%; left:13%; bottom:-27%; transform:rotate(6deg); }
.desktop-orbit--two { width:102%; height:70%; left:-2%; bottom:-39%; transform:rotate(-5deg); }
.desktop-horizon { position:absolute; left:0; right:0; top:61%; height:1px; background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.22) 22%,rgba(239,255,251,.66) 56%,rgba(var(--accent-rgb),.16) 78%,transparent); box-shadow:0 0 25px rgba(var(--accent-rgb),.25); }
.glass { background:rgba(19,26,36,.72); backdrop-filter:blur(20px) saturate(125%); -webkit-backdrop-filter:blur(20px) saturate(125%); border:1px solid rgba(169,193,208,.14); box-shadow:0 13px 30px rgba(var(--shadow-rgb),.28); }
.desktop-panel { position:absolute; z-index:4; top:14px; left:14px; right:14px; height:43px; border-radius:14px; display:flex; align-items:center; justify-content:space-between; padding:0 11px; }
.desktop-panel__left,.desktop-panel__right { display:flex; align-items:center; gap:12px; }
.cybou-button { width:29px; height:29px; border:0; border-radius:9px; display:grid; place-items:center; background:rgba(var(--accent-rgb),.09); cursor:pointer; transition:background .2s,transform .2s; }
.cybou-button:hover,.cybou-button.active { background:rgba(var(--accent-rgb),.18); transform:scale(1.04); }
.workspace-dots { display:flex; align-items:center; gap:5px; }
.workspace-dots button.ws-dot { width:6px; height:6px; padding:0; border:0; border-radius:50%; background:#52606f; cursor:pointer; transition:all .2s ease; }
.workspace-dots button.ws-dot:hover { background:var(--ink-1); }
.workspace-dots button.ws-dot.active { width:13px; border-radius:3px; background:var(--accent); box-shadow:0 0 10px rgba(var(--accent-rgb),.5); }
.app-dock { display:flex; gap:5px; margin-left:4px; padding-left:12px; border-left:1px solid rgba(var(--fg-rgb),.09); }
.app-dock button { position:relative; width:29px; height:29px; display:grid; place-items:center; border:0; border-radius:8px; background:transparent; color:#cbd6df; }
.app-dock button:first-child::after { content:""; position:absolute; bottom:1px; width:11px; height:1.5px; border-radius:2px; background:var(--accent); }
.app-dock svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; }
.desktop-panel__right { gap:10px; color:#d3dce4; font-size:9px; }
.status-pill { display:inline-flex; align-items:center; gap:5px; padding:4px 7px; border-radius:999px; color:#9bacb9; background:rgba(var(--fg-rgb),.035); }
.status-pill > span:first-child { width:4px; height:4px; border-radius:50%; background:var(--success); box-shadow:0 0 7px rgba(110,213,155,.65); }
.status-icon { width:13px; height:13px; fill:none; stroke:#aab6c1; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; }
.desktop-panel time { font-variant-numeric:tabular-nums; }
.desktop-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; transform:translateY(18px); text-align:center; }
.desktop-center img { opacity:.92; filter:drop-shadow(0 0 24px rgba(var(--accent-rgb),.2)); }
.desktop-center p { margin:16px 0 5px; font-size:15px; font-weight:580; letter-spacing:-.02em; }
.desktop-center span { color:#768595; font-size:9px; }
.launcher { position:absolute; z-index:6; top:66px; left:14px; width:260px; padding:14px; border-radius:17px; opacity:0; transform:translateY(-8px) scale(.98); pointer-events:none; transition:opacity .2s ease,transform .25s var(--ease); }
.launcher.open { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.launcher-search { height:34px; border-radius:10px; display:flex; align-items:center; gap:9px; padding:0 10px; color:#7f8d9b; font-size:9px; background:rgba(var(--fg-rgb),.045); border:1px solid rgba(var(--fg-rgb),.045); }
.launcher-search svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
.launcher-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:14px; }
.launcher-grid button { border:0; background:transparent; color:#bfc9d1; font-size:8px; display:flex; flex-direction:column; align-items:center; gap:6px; padding:7px 3px; border-radius:9px; }
.launcher-grid button:hover { background:rgba(var(--fg-rgb),.05); }
.launcher-icon { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; }
.launcher-icon svg { width:17px; height:17px; fill:none; stroke:#f5f7f9; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.launcher-icon--files { background:linear-gradient(135deg,#52677f,#283746); }
.launcher-icon--web { background:linear-gradient(135deg,#6b8fe3,#354d88); }
.launcher-icon--code { background:linear-gradient(135deg,#58b6a8,#285d58); }
.launcher-icon--settings { background:linear-gradient(135deg,#707986,#3b424d); }
.desktop-card { position:absolute; z-index:4; display:flex; align-items:center; }
.desktop-card--generation { left:18px; bottom:18px; min-width:195px; padding:10px 12px; border-radius:14px; }
.card-icon { width:31px; height:31px; margin-right:10px; border-radius:9px; display:grid; place-items:center; background:rgba(var(--accent-rgb),.09); color:var(--accent-text); }
.card-icon svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.desktop-card strong { display:block; font-size:9px; font-weight:600; }
.desktop-card span { display:block; color:#798895; font-size:7.5px; margin-top:2px; }
.verified-dot { width:5px!important; height:5px; margin:0 0 0 auto!important; border-radius:50%; background:var(--success)!important; box-shadow:0 0 8px rgba(110,213,155,.7); }
.visual-caption { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:18px; color:var(--ink-4); font-size:11px; }
.visual-caption span { width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px rgba(var(--accent-rgb),.6); }

.statement { width:min(calc(100% - 48px),980px); margin:0 auto; padding:130px 0 100px; text-align:center; }
.statement h2,.foundation h2,.principles h2,.roadmap h2 { margin:18px 0 28px; font-size:clamp(46px,6vw,88px); line-height:.98; letter-spacing:-.055em; font-weight:560; }
.statement h2 em,.foundation h2 em,.principles h2 em,.roadmap h2 em { color:var(--accent); font-style:normal; }
.statement > p:last-child { max-width:750px; margin:0 auto; color:var(--ink-2); font-size:19px; line-height:1.65; }

.feature-grid { width:min(calc(100% - 48px),var(--max)); margin:0 auto 160px; display:grid; grid-template-columns:1.5fr .75fr .75fr; gap:16px; }
.feature-card { position:relative; min-height:410px; padding:30px; border:1px solid rgba(166,187,201,.12); border-radius:22px; background:linear-gradient(160deg,rgba(24,31,43,.78),rgba(13,18,26,.86)); overflow:hidden; }
.feature-card::before { content:""; position:absolute; inset:0; background:linear-gradient(115deg,rgba(var(--fg-rgb),.035),transparent 42%); pointer-events:none; }
.feature-card--wide { display:grid; grid-template-columns:.8fr 1.2fr; gap:20px; align-items:end; }
.feature-number { position:relative; z-index:2; display:inline-block; color:var(--accent-text); font-size:10px; letter-spacing:.12em; font-weight:700; }
.feature-card h3 { position:relative; z-index:2; margin:14px 0 12px; font-size:25px; letter-spacing:-.035em; }
.feature-card p { position:relative; z-index:2; margin:0; color:var(--ink-3); font-size:14px; line-height:1.65; }
.mini-desktop { position:relative; align-self:stretch; min-height:270px; margin:-2px -5px -5px 10px; border-radius:17px; border:1px solid rgba(var(--fg-rgb),.09); overflow:hidden; background:radial-gradient(circle at 65% 15%,rgba(58,99,114,.24),transparent 32%),linear-gradient(#080c13,#0b131d); box-shadow:0 26px 45px rgba(var(--shadow-rgb),.38); }
.mini-panel { position:absolute; z-index:3; top:11px; left:11px; right:11px; height:28px; border:1px solid rgba(var(--fg-rgb),.09); border-radius:10px; background:rgba(25,32,43,.8); display:flex; align-items:center; gap:6px; padding:0 8px; }
.mini-panel span { width:8px; height:8px; border-radius:3px; background:#607080; }
.mini-panel .mini-mark { background:var(--accent); }
.mini-panel i { flex:1; }
.mini-horizon { position:absolute; left:0; right:0; top:60%; height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:.35; }
.mini-window { position:absolute; border:1px solid rgba(var(--fg-rgb),.1); border-radius:11px; background:rgba(24,31,42,.76); box-shadow:0 20px 40px rgba(var(--shadow-rgb),.25); overflow:hidden; }
.mini-window b { display:inline-block; width:4px; height:4px; margin:8px 0 7px 5px; border-radius:50%; background:#63717e; }
.mini-window b:first-child { margin-left:9px; }
.mini-window div { margin:0 10px 10px; height:calc(100% - 25px); border-radius:6px; background:linear-gradient(125deg,rgba(var(--accent-rgb),.08),rgba(125,166,255,.06)); }
.mini-window--one { width:56%; height:49%; left:8%; top:29%; }
.mini-window--two { width:46%; height:54%; right:7%; bottom:7%; }
.icon-orbit { position:relative; width:126px; height:126px; margin:62px auto 45px; border:1px solid rgba(var(--accent-rgb),.20); border-radius:50%; }
.icon-orbit::before,.icon-orbit::after { content:""; position:absolute; inset:17px; border:1px solid rgba(125,166,255,.12); border-radius:50%; transform:rotate(35deg); }
.icon-orbit::after { inset:37px; background:radial-gradient(circle,var(--accent),rgba(var(--accent-rgb),.06) 23%,transparent 57%); box-shadow:0 0 36px rgba(var(--accent-rgb),.17); }
.icon-orbit span { position:absolute; top:11px; left:23px; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 15px rgba(var(--accent-rgb),.7); }
.icon-orbit i { position:absolute; right:8px; bottom:27px; width:5px; height:5px; border-radius:50%; background:var(--info); }
.palette-swatch { height:126px; margin:62px 0 45px; display:flex; align-items:flex-end; gap:5px; }
.palette-swatch span { flex:1; border-radius:10px; border:1px solid rgba(var(--fg-rgb),.08); }
.palette-swatch span:nth-child(1){height:48%;background:#0a0d12}.palette-swatch span:nth-child(2){height:72%;background:#171d27}.palette-swatch span:nth-child(3){height:100%;background:#f2f5f8}.palette-swatch span:nth-child(4){height:82%;background:#70e1c8}.palette-swatch span:nth-child(5){height:58%;background:#7da6ff}

.foundation { width:min(calc(100% - 48px),var(--max)); margin:0 auto; padding:150px 0; display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; }
.foundation-copy > p:not(.section-kicker) { max-width:580px; color:var(--ink-2); font-size:17px; line-height:1.7; }
.foundation-points { margin-top:45px; border-top:1px solid rgba(var(--fg-rgb),.1); }
.foundation-points > div { display:grid; grid-template-columns:42px 1fr; gap:14px; padding:18px 0; border-bottom:1px solid rgba(var(--fg-rgb),.08); }
.foundation-points span { color:var(--accent-text); font-size:10px; letter-spacing:.12em; }
.foundation-points p { margin:0; color:var(--ink-4); font-size:13px; line-height:1.55; }
.foundation-points strong { display:block; margin-bottom:3px; color:var(--ink-0); font-size:14px; }
.generation-console { border:1px solid rgba(166,187,201,.13); border-radius:22px; overflow:hidden; background:rgba(15,20,28,.78); box-shadow:0 40px 85px rgba(var(--shadow-rgb),.36); }
.console-top { height:51px; display:flex; align-items:center; gap:7px; padding:0 17px; border-bottom:1px solid rgba(var(--fg-rgb),.07); }
.console-top > span { width:7px; height:7px; border-radius:50%; background:#414d5a; }
.console-top p { margin:0 0 0 10px; color:#778594; font-size:11px; }
.generation { min-height:92px; padding:19px 20px; display:grid; grid-template-columns:22px 1fr auto; gap:14px; align-items:center; border-bottom:1px solid rgba(var(--fg-rgb),.065); }
.generation.active { background:linear-gradient(90deg,rgba(var(--accent-rgb),.075),transparent 62%); }
.generation-track { position:relative; align-self:stretch; display:flex; justify-content:center; }
.generation-track span { position:relative; z-index:2; width:8px; height:8px; margin-top:14px; border-radius:50%; border:2px solid #63717f; background:#141b25; }
.generation.active .generation-track span { border-color:var(--accent); background:var(--accent); box-shadow:0 0 13px rgba(var(--accent-rgb),.5); }
.generation-track i { position:absolute; top:25px; bottom:-35px; width:1px; background:#303b49; }
.generation strong { font-size:13px; font-weight:600; }
.generation p { margin:5px 0 0; color:#748292; font-size:10px; }
.generation > b { color:var(--accent); font-size:9px; padding:5px 8px; border:1px solid rgba(var(--accent-rgb),.18); border-radius:999px; background:rgba(var(--accent-rgb),.06); }
.generation > time { color:#7c8898; font-size:9px; }
.console-command { margin:18px; height:47px; display:flex; align-items:center; gap:9px; padding:0 14px; border-radius:11px; background:#090d13; border:1px solid rgba(var(--fg-rgb),.06); color:#91a0ae; font-size:10px; }
.console-command span { color:var(--accent); }
.console-command code { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.console-command i { width:6px; height:13px; background:var(--accent); opacity:.65; animation:blink 1.1s steps(2,end) infinite; }
@keyframes blink { 50%{opacity:0} }

.design { padding:150px 24px; background:linear-gradient(180deg,rgba(16,22,31,.42),rgba(9,13,19,.74)); border-top:1px solid rgba(var(--fg-rgb),.055); border-bottom:1px solid rgba(var(--fg-rgb),.055); }
.design-heading { width:min(100%,var(--max)); margin:0 auto 55px; display:grid; grid-template-columns:1fr auto; grid-template-areas:"k k" "h p"; align-items:end; gap:6px 40px; }
.design-heading .section-kicker { grid-area:k; }
.design-heading h2 { grid-area:h; margin:8px 0 0; font-size:clamp(54px,7vw,105px); line-height:.92; letter-spacing:-.065em; font-weight:570; }
.design-heading > p:last-child { grid-area:p; max-width:390px; margin:0 0 8px; color:var(--ink-3); line-height:1.65; }
.design-board { width:min(100%,var(--max)); margin:0 auto; display:grid; grid-template-columns:1.25fr .9fr .9fr; gap:1px; padding:1px; border-radius:24px; overflow:hidden; background:rgba(var(--fg-rgb),.08); }
.design-board > div { min-height:350px; padding:31px; background:var(--card); }
.design-board span { color:var(--ink-4); text-transform:uppercase; letter-spacing:.14em; font-size:9px; }
.design-board strong { display:block; margin:13px 0 8px; font-size:17px; }
.design-board p { margin:0; color:var(--ink-4); font-size:12px; line-height:1.6; }
.design-board__logo { display:grid; grid-template-columns:1fr 1.15fr; gap:25px; align-items:center; }
.large-mark { aspect-ratio:1; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle,rgba(var(--accent-rgb),.12),rgba(var(--accent-rgb),.03) 50%,transparent 68%); border:1px solid rgba(var(--accent-rgb),.12); }
.large-mark img { width:52%; filter:drop-shadow(0 0 28px rgba(var(--accent-rgb),.20)); }
.design-board__colors { display:flex; flex-direction:column; }
.color-row { display:flex; flex:1; align-items:flex-end; gap:6px; margin:28px 0 23px; }
.color-row i { display:block; flex:1; height:100%; max-height:178px; background:var(--swatch); border-radius:9px; border:1px solid rgba(var(--fg-rgb),.08); }
.color-row i:nth-child(2){height:84%}.color-row i:nth-child(3){height:68%}.color-row i:nth-child(4){height:91%}.color-row i:nth-child(5){height:76%}
.design-board__type b { display:block; margin:40px 0 30px; color:var(--ink-0); font-size:95px; line-height:.8; letter-spacing:-.09em; font-weight:600; }

.principles { width:min(calc(100% - 48px),var(--max)); margin:0 auto; padding:160px 0; }
.principles-intro { max-width:900px; }
.principle-list { margin-top:70px; border-top:1px solid rgba(var(--fg-rgb),.1); }
.principle-list article { display:grid; grid-template-columns:70px 1fr 1fr; align-items:center; gap:30px; min-height:116px; border-bottom:1px solid rgba(var(--fg-rgb),.08); }
.principle-list article > span { color:var(--accent-text); font-size:10px; letter-spacing:.13em; }
.principle-list h3 { margin:0; font-size:21px; letter-spacing:-.025em; }
.principle-list p { margin:0; color:var(--ink-3); font-size:14px; line-height:1.6; }

.roadmap { width:min(calc(100% - 48px),var(--max)); margin:0 auto; padding:120px 0 170px; }
.roadmap-heading { max-width:1000px; }
.roadmap-track { position:relative; margin-top:75px; display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.roadmap-track::before { content:""; position:absolute; left:0; right:0; top:10px; height:1px; background:linear-gradient(90deg,var(--accent),rgba(var(--accent-rgb),.18) 25%,rgba(124,145,164,.15) 75%,transparent); }
.roadmap-item { position:relative; padding-top:36px; }
.roadmap-node { position:absolute; z-index:2; top:3px; left:0; width:15px; height:15px; border-radius:50%; display:grid; place-items:center; background:var(--canvas); border:1px solid var(--node); }
.roadmap-node span { width:5px; height:5px; border-radius:50%; background:var(--node-dot); }
.roadmap-item.active .roadmap-node { border-color:var(--accent); box-shadow:0 0 19px rgba(var(--accent-rgb),.25); }
.roadmap-item.active .roadmap-node span { background:var(--accent); }
.roadmap-item > p { margin:0 0 14px; color:var(--accent-text); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.roadmap-item h3 { margin:0 0 10px; font-size:18px; }
.roadmap-item > span { color:var(--ink-4); font-size:12px; line-height:1.5; }

.blueprint { padding:24px; }
.blueprint-inner { position:relative; width:min(100%,var(--max)); margin:0 auto; padding:120px 30px; text-align:center; border:1px solid rgba(var(--accent-rgb),.15); border-radius:30px; overflow:hidden; background:radial-gradient(circle at 50% 10%,rgba(var(--accent-rgb),.12),transparent 37%),linear-gradient(160deg,var(--card),var(--card-deep)); }
.blueprint-inner::before,.blueprint-inner::after { content:""; position:absolute; border:1px solid rgba(var(--accent-rgb),.09); border-radius:50%; pointer-events:none; }
.blueprint-inner::before { width:780px; height:290px; left:50%; bottom:-210px; transform:translateX(-50%); }
.blueprint-inner::after { width:1040px; height:420px; left:50%; bottom:-335px; transform:translateX(-50%); }
.blueprint-mark { width:72px; height:72px; margin:0 auto 28px; border-radius:23px; display:grid; place-items:center; background:rgba(var(--accent-rgb),.08); border:1px solid rgba(var(--accent-rgb),.14); }
.blueprint-mark img { width:44px; }
.blueprint h2 { margin:18px auto 24px; max-width:880px; font-size:clamp(40px,5.7vw,76px); line-height:1.02; letter-spacing:-.055em; font-weight:570; }
.blueprint-inner > p:not(.section-kicker) { max-width:670px; margin:0 auto; color:var(--ink-3); font-size:16px; line-height:1.65; }
.blueprint-actions { display:flex; justify-content:center; gap:12px; margin-top:35px; }

footer { width:min(calc(100% - 48px),var(--max)); min-height:150px; margin:0 auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:30px; color:var(--ink-4); font-size:11px; }
footer > p:last-child { justify-self:end; }

.reveal { opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.visible { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay:.10s; }
.reveal-delay-2 { transition-delay:.18s; }

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

@media (max-width: 1050px) {
  .desktop-nav,.header-cta { display:none; }
  .site-header { grid-template-columns:auto 1fr auto; column-gap:10px; }
  .header-right-group { gap:8px; }
  .menu-button { display:block; }
  .mobile-nav { position:fixed; z-index:45; top:90px; left:16px; right:16px; padding:14px; border:1px solid rgba(var(--line-rgb),.15); border-radius:18px; background:rgba(var(--chrome-rgb),.94); backdrop-filter:blur(22px); transform:translateY(-10px); opacity:0; pointer-events:none; transition:.2s ease; }
  .mobile-nav.open { display:grid; opacity:1; transform:none; pointer-events:auto; }
  .mobile-nav a { padding:13px 12px; border-bottom:1px solid rgba(var(--fg-rgb),.055); color:var(--ink-1); }
  .mobile-nav a:last-child { border:0; color:var(--accent-text); }
  .hero { grid-template-columns:1fr; gap:70px; padding-top:150px; }
  .hero-copy { max-width:750px; }
  .hero-visual { width:90%; margin:0 auto; }
  .feature-grid { grid-template-columns:1fr 1fr; }
  .feature-card--wide { grid-column:1/-1; }
  .foundation { gap:55px; }
  .design-board { grid-template-columns:1fr 1fr; }
  .design-board__logo { grid-column:1/-1; }
}

@media (max-width: 760px) {
  .site-header { top:10px; width:calc(100% - 20px); height:56px; border-radius:16px; }
  .hero { width:calc(100% - 32px); min-height:auto; padding:108px 0 90px; gap:55px; }
  .hero h1 { font-size:clamp(44px,13vw,62px); }
  .hero-lead { font-size:17px; }
  .hero-actions { align-items:stretch; flex-direction:column; }
  .hero-actions .button { width:100%; }
  .hero-visual { width:100%; }
  .hero-notes { gap:12px 18px; color:var(--ink-3); font-size:13px; }
  .evidence-links { grid-template-columns:1fr; }
  .mobile-nav { top:76px; }
  .mobile-nav [data-lang-dropdown] { display:none; }
  .site-header .github-icon-link { display:none; }
  body.menu-open::after { content:""; position:fixed; z-index:40; inset:0; background:rgba(3,6,10,.62); }
  .desktop-stage { border-radius:19px; transform:none; }
  .desktop-panel { top:9px; left:9px; right:9px; height:35px; border-radius:11px; padding:0 8px; }
  .cybou-button { width:24px; height:24px; }
  .cybou-button img { width:16px; }
  .app-dock { display:none; }
  .status-pill { display:none; }
  .desktop-panel__right { gap:7px; }
  .launcher { top:51px; left:9px; width:235px; }
  .desktop-card--generation { left:10px; bottom:10px; min-width:165px; padding:8px; }
  .card-icon { width:26px; height:26px; }
  .visual-caption { justify-content:center; }
  .statement { width:calc(100% - 32px); padding:100px 0 75px; }
  .statement h2,.foundation h2,.principles h2,.roadmap h2 { font-size:clamp(42px,13vw,64px); }
  .statement > p:last-child { font-size:16px; }
  .feature-grid { width:calc(100% - 32px); grid-template-columns:1fr; margin-bottom:95px; }
  .feature-card { min-height:360px; }
  .feature-card--wide { grid-template-columns:1fr; }
  .feature-copy { align-self:start; }
  .mini-desktop { min-height:230px; margin:10px 0 0; }
  .foundation { width:calc(100% - 32px); grid-template-columns:1fr; padding:100px 0; }
  .design { padding:100px 16px; }
  .design-heading { grid-template-columns:1fr; grid-template-areas:"k" "h" "p"; }
  .design-heading h2 { font-size:clamp(52px,15vw,82px); }
  .design-board { grid-template-columns:1fr; }
  .design-board > div { min-height:310px; }
  .design-board__logo { grid-column:auto; grid-template-columns:1fr; }
  .large-mark { max-width:220px; }
  .principles { width:calc(100% - 32px); padding:100px 0; }
  .principle-list article { grid-template-columns:40px 1fr; padding:23px 0; }
  .principle-list p { grid-column:2; }
  .roadmap { width:calc(100% - 32px); padding:90px 0 110px; }
  .roadmap-track { grid-template-columns:1fr; gap:0; margin-left:7px; }
  .roadmap-track::before { left:6px; right:auto; top:0; bottom:0; width:1px; height:auto; background:linear-gradient(var(--accent),rgba(var(--accent-rgb),.12),transparent); }
  .roadmap-item { padding:0 0 44px 35px; }
  .roadmap-node { top:1px; }
  .blueprint { padding:12px; }
  .blueprint-inner { padding:90px 18px; border-radius:22px; }
  .blueprint-actions { flex-direction:column; }
  footer { width:calc(100% - 32px); grid-template-columns:1fr; padding:50px 0; gap:18px; }
  footer > p,footer > p:last-child { justify-self:start; margin:0; }
}

.bp-toc { position:sticky; z-index:20; top:84px; width:min(calc(100% - 48px),1080px); margin:-34px auto 70px; padding:10px; display:grid; grid-template-columns:repeat(6,1fr); gap:6px; border:1px solid rgba(var(--line-rgb),.14); border-radius:16px; background:rgba(var(--chrome-rgb),.88); backdrop-filter:blur(20px); }
.bp-toc a { padding:10px 12px; border-radius:10px; color:var(--accent-text); font-size:10px; letter-spacing:.08em; }
.bp-toc a:hover { background:rgba(var(--accent-rgb),.08); }
.bp-toc span { display:block; margin-top:3px; color:var(--ink-2); font-size:12px; letter-spacing:0; }

@media (max-width:760px) {
  .bp-toc { position:relative; top:auto; width:calc(100% - 32px); margin:-28px auto 48px; grid-template-columns:repeat(2,1fr); }
}

/* Light mode — CYB-009.
   The ink scale mirrors the dark one by measured contrast against its own canvas, so text keeps
   the same hierarchy in both themes. Values come from spec/design-tokens.json (light palette).
   The desktop mock keeps its dark literals on purpose: it is a picture of the product's default
   dark desktop, not page chrome. */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --canvas: #f2f5f6;
    --canvas-raised: #e9eef0;
    --surface: #ffffff;
    --surface-elevated: #e3e9ec;
    --border: #cdd7dc;
    --text: #182027;
    --muted: #64727d;
    --accent: #0c9581;
    --accent-strong: #08715f;
    --info: #315fb5;
    --warning: #9a6814;
    --danger: #be314b;
    --success: #287a4c;

    --ink-0: #182027;
    --ink-1: #232c34;
    --ink-2: #3b4a57;
    --ink-3: #485a6c;
    --ink-4: #54687c;
    --on-accent: #07110f;
    --accent-text: #08715f;

    --bg-deep: #e9eef0;
    --bg-mid: #eef2f4;
    --card: #ffffff;
    --card-deep: #f2f5f6;
    --dot: #9aa7b4;
    --node: #cdd7dc;
    --node-dot: #8a99a6;

    --accent-rgb: 12,149,129;
    --fg-rgb: 24,32,39;
    --shadow-rgb: 24,32,39;
    --chrome-rgb: 255,255,255;
    --line-rgb: 90,105,120;
  }
  /* The three product mock-ups stay dark in both themes: they depict the default Cybou
     desktop, not this page. Custom properties inherit, so re-pinning them on the container
     re-darkens every descendant at once. */
  .desktop-stage, .mini-desktop, .generation-console {
    --text: #f2f5f8;
    --canvas: #0a0d12;
    --surface: #171d27;
    --accent: #70e1c8;
    --accent-rgb: 112,225,200;
    --accent-text: #70e1c8;
    --fg-rgb: 255,255,255;
    --shadow-rgb: 0,0,0;
    --card: #111720;
    --card-deep: #090d13;
    color: #f2f5f8;
  }
  /* The console panel is 78% opaque; over a light page it would wash out and take its
     dark-tuned text with it. Pin it fully opaque. */
  .generation-console { background:#0f141c; }

  .page-atmosphere { opacity:.55; }
  .grain { opacity:.02; }
  .hero h1 span { -webkit-text-stroke-color: rgba(var(--fg-rgb),.42); }
}

/* Header Right Group & Custom Dropdown Language Switcher */
.header-right-group {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}
.github-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-2);
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.github-icon-link:hover {
  border-color: var(--accent-border);
  color: var(--ink-0);
  background: rgba(var(--fg-rgb), 0.08);
  transform: translateY(-1px);
}
.lang-dropdown {
  position: relative;
  display: inline-block;
}
.lang-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-1);
  font-size: 0.8rem;
  font-weight: 650;
  padding: 6px 12px;
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.lang-dropdown-trigger:hover, .lang-dropdown-trigger.open {
  border-color: var(--accent-border);
  color: var(--ink-0);
  background: rgba(var(--fg-rgb), 0.06);
}
.lang-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 140px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 16px 36px rgba(var(--shadow-rgb), 0.35);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s var(--ease);
  z-index: 100;
}
.lang-dropdown-menu.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.lang-dropdown-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-2);
  font-size: 0.825rem;
  font-weight: 550;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.lang-dropdown-menu button code {
  font-size: 0.7rem;
  font-weight: 700;
  opacity: 0.6;
  text-transform: uppercase;
}
.lang-dropdown-menu button:hover {
  background: rgba(var(--fg-rgb), 0.05);
  color: var(--ink-0);
}
.lang-dropdown-menu button.active {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent-text);
  font-weight: 700;
}

/* Implementation Progress Section */
.progress-section {
  padding: 80px 24px;
  max-width: 1160px;
  margin: 0 auto;
}
.progress-heading {
  margin-bottom: 40px;
}
.progress-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.progress-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.progress-card:hover {
  border-color: var(--accent-border);
  transform: translateY(-2px);
}
.card-metric {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-text);
  letter-spacing: -0.01em;
}
.card-label {
  font-size: 0.95rem;
  color: var(--ink-2);
  line-height: 1.5;
}
.status-indicator { display:flex; align-items:center; gap:9px; margin-top:auto; padding-top:8px; color:var(--ink-2); }
.status-indicator span { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px rgba(var(--accent-rgb),.55); }
.status-indicator b { font-size:12px; font-weight:650; letter-spacing:.02em; }

/* Interactive FAQ Section */
.faq-section {
  padding: 100px 24px;
  max-width: 960px;
  margin: 0 auto;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 40px;
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.25s ease;
}
.faq-item:hover, .faq-item.open {
  border-color: var(--accent-border);
}
.faq-question {
  width: 100%;
  padding: 22px 28px;
  background: transparent;
  border: 0;
  color: var(--ink-0);
  font-size: 1.1rem;
  font-weight: 650;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
}
.faq-question svg {
  width: 18px;
  height: 18px;
  stroke: var(--ink-3);
  transition: transform 0.25s ease, stroke 0.25s ease;
  flex-shrink: 0;
}
.faq-item.open .faq-question svg {
  transform: rotate(180deg);
  stroke: var(--accent);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 28px;
  color: var(--ink-2);
  font-size: 0.975rem;
  line-height: 1.65;
  transition: max-height 0.3s var(--ease), padding 0.3s ease;
}
.faq-item.open .faq-answer {
  max-height: 300px;
  padding: 0 28px 22px 28px;
}