/* ============================================================
   SuperDevAI — landing page
   Dark first, with a light theme. No stored choice = dark; the
   visitor can pick Light, Dark or System (see index.html head).
   ============================================================ */

:root {
  color-scheme: dark;
  --bg: #07080c;
  --bg-2: #0b0d13;
  --surface: #0f1219;
  --surface-2: #151925;
  --surface-3: #1b2030;
  --border: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .15);
  --text: #eef1f8;
  --text-2: #c2c9d8;
  --muted: #8c96ab;
  --faint: #5f687c;
  --accent: #5b8cff;
  --accent-soft: rgba(91, 140, 255, .13);
  --accent-text: #9db9ff;
  --on-accent: #ffffff;
  --violet: #9a7bff;
  --good: #43d19a;
  --good-soft: rgba(67, 209, 154, .12);
  --warn: #f2c14e;
  --grad-text: linear-gradient(100deg, #8fb2ff 0%, #5fd6f7 45%, #b49bff 100%);
  --grad-line: linear-gradient(90deg, transparent, rgba(91, 140, 255, .8), rgba(63, 208, 245, .8), transparent);
  --aurora-1: rgba(70, 110, 255, .30);
  --aurora-2: rgba(63, 208, 245, .18);
  --aurora-3: rgba(154, 123, 255, .22);
  --grid-line: rgba(255, 255, 255, .045);
  --dots: rgba(255, 255, 255, .07);
  --stage: radial-gradient(120% 90% at 15% 0%, rgba(70, 110, 255, .45), transparent 55%),
           radial-gradient(90% 80% at 100% 100%, rgba(154, 123, 255, .35), transparent 60%),
           radial-gradient(70% 60% at 85% 10%, rgba(63, 208, 245, .22), transparent 60%),
           #0c0f18;
  --shadow-lg: 0 50px 100px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .07);
  --win-bg: #0d1018;
  --win-bar: #121622;
  --term-bg: #090b11;
  --term-text: #d4dbea;
  --code-add: rgba(67, 209, 154, .12);
  --code-add-text: #74e0b4;
  --focus: 0 0 0 3px rgba(91, 140, 255, .35);
  --radius: 14px;
  --radius-lg: 20px;
  --wrap: 1200px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* light theme: chosen, or "System" on a light OS (same values twice) */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f7fa; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #f3f5f9; --surface-3: #e9edf4;
  --border: #e1e5ed; --border-strong: #cbd2de; --text: #0c1324; --text-2: #2e3a51; --muted: #5a667c; --faint: #8a94a7;
  --accent: #2e6bff; --accent-soft: #e8efff; --accent-text: #1d4fd6; --violet: #7b46e0; --good: #0f9f6e; --good-soft: #e2f5ed; --warn: #b7791f;
  --grad-text: linear-gradient(100deg, #2e6bff 0%, #1aa3d4 50%, #7b46e0 100%);
  --aurora-1: rgba(46, 107, 255, .16); --aurora-2: rgba(14, 165, 208, .10); --aurora-3: rgba(123, 70, 224, .12);
  --grid-line: rgba(12, 19, 36, .05); --dots: rgba(12, 19, 36, .06);
  --stage: radial-gradient(120% 90% at 15% 0%, rgba(46, 107, 255, .30), transparent 55%),
           radial-gradient(90% 80% at 100% 100%, rgba(123, 70, 224, .22), transparent 60%),
           radial-gradient(70% 60% at 85% 10%, rgba(14, 165, 208, .18), transparent 60%), #e8ecf6;
  --shadow-lg: 0 40px 80px -36px rgba(12, 19, 36, .35), 0 0 0 1px rgba(12, 19, 36, .07);
  --win-bg: #ffffff; --win-bar: #f1f3f8; --term-bg: #0e1424;
  --code-add: #e4f6ec; --code-add-text: #146c43;
  --focus: 0 0 0 3px rgba(46, 107, 255, .25);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #f6f7fa; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #f3f5f9; --surface-3: #e9edf4;
    --border: #e1e5ed; --border-strong: #cbd2de; --text: #0c1324; --text-2: #2e3a51; --muted: #5a667c; --faint: #8a94a7;
    --accent: #2e6bff; --accent-soft: #e8efff; --accent-text: #1d4fd6; --violet: #7b46e0; --good: #0f9f6e; --good-soft: #e2f5ed; --warn: #b7791f;
    --grad-text: linear-gradient(100deg, #2e6bff 0%, #1aa3d4 50%, #7b46e0 100%);
    --aurora-1: rgba(46, 107, 255, .16); --aurora-2: rgba(14, 165, 208, .10); --aurora-3: rgba(123, 70, 224, .12);
    --grid-line: rgba(12, 19, 36, .05); --dots: rgba(12, 19, 36, .06);
    --stage: radial-gradient(120% 90% at 15% 0%, rgba(46, 107, 255, .30), transparent 55%),
             radial-gradient(90% 80% at 100% 100%, rgba(123, 70, 224, .22), transparent 60%),
             radial-gradient(70% 60% at 85% 10%, rgba(14, 165, 208, .18), transparent 60%), #e8ecf6;
    --shadow-lg: 0 40px 80px -36px rgba(12, 19, 36, .35), 0 0 0 1px rgba(12, 19, 36, .07);
    --win-bg: #ffffff; --win-bar: #f1f3f8; --term-bg: #0e1424;
    --code-add: #e4f6ec; --code-add-text: #146c43;
    --focus: 0 0 0 3px rgba(46, 107, 255, .25);
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -.025em; color: var(--text); }
p { margin: 0; }
code { font-family: var(--mono); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 8px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 8px 14px; background: var(--accent); color: var(--on-accent); border-radius: 8px; }
.skip-link:focus { left: 16px; }
.grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* bracket label: — [ 01 ] DESIGN */
.label { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.label b { color: var(--accent-text); font-weight: 600; }
.label::before { content: ""; width: 18px; height: 1px; background: var(--accent); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 10px; font: 600 14.5px/1 var(--font); cursor: pointer; white-space: nowrap; border: 1px solid transparent; transition: background .15s, border-color .15s, box-shadow .2s; }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--text); color: var(--bg); }
.btn-primary:hover { box-shadow: 0 0 0 4px var(--accent-soft), 0 10px 30px -10px var(--accent); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-ghost { color: var(--muted); }
.btn-ghost:hover { color: var(--text); }
.btn-lg { min-height: 48px; padding: 0 22px; font-size: 15.5px; border-radius: 12px; }

/* ---------- nav ---------- */
.topbar { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.topbar.scrolled { border-bottom-color: var(--border); }
.nav-inner { display: flex; align-items: center; gap: 24px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; letter-spacing: -.02em; }
.brand img { width: 28px; height: 28px; }
.nav-links { display: flex; gap: 2px; margin-left: 8px; }
.nav-links a { padding: 8px 12px; border-radius: 8px; color: var(--muted); font-size: 14px; font-weight: 500; white-space: nowrap; }
.nav-links a:hover { color: var(--text); }
.nav-links .mobile-only { display: none; }
.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav-toggle { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); cursor: pointer; }
.nav-toggle svg { width: 20px; height: 20px; }
.theme-switch { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.theme-switch button { width: 30px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--faint); cursor: pointer; }
.theme-switch button svg { width: 15px; height: 15px; }
.theme-switch button:hover { color: var(--text); }
.theme-switch button[aria-pressed="true"] { background: var(--surface-3); color: var(--text); }

/* ---------- AI backdrop: grid + aurora ---------- */
.backdrop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.backdrop .grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 55% at 50% 15%, #000 30%, transparent 75%);
  mask-image: radial-gradient(70% 55% at 50% 15%, #000 30%, transparent 75%);
}
.backdrop .orb { position: absolute; border-radius: 50%; filter: blur(80px); }
.backdrop .o1 { width: 620px; height: 420px; left: 50%; top: -160px; margin-left: -420px; background: var(--aurora-1); animation: drift 18s ease-in-out infinite alternate; }
.backdrop .o2 { width: 520px; height: 380px; left: 50%; top: -80px; margin-left: 60px; background: var(--aurora-3); animation: drift 22s ease-in-out infinite alternate-reverse; }
.backdrop .o3 { width: 420px; height: 300px; left: 50%; top: 200px; margin-left: -140px; background: var(--aurora-2); animation: drift 26s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate3d(-30px, 0, 0) scale(1); } to { transform: translate3d(40px, 30px, 0) scale(1.08); } }

/* ---------- hero ---------- */
.hero { position: relative; padding: 96px 0 40px; text-align: center; }
.hero > .wrap { position: relative; }
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; margin-bottom: 28px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--text-2); font-size: 13.5px; font-weight: 500; }
.pill b { padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font: 600 11.5px var(--mono); letter-spacing: .04em; }
.pill svg { width: 14px; height: 14px; color: var(--faint); }
.hero h1 { max-width: 980px; margin: 0 auto; font-size: clamp(40px, 6.6vw, 76px); font-weight: 700; letter-spacing: -.045em; line-height: 1.02; }
.hero-sub { max-width: 680px; margin: 24px auto 0; color: var(--muted); font-size: clamp(17px, 2vw, 19.5px); }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }

/* prompt bar: the agent being asked, by role */
.prompt { max-width: 760px; margin: 48px auto 0; text-align: left; }
.roles { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 12px; }
.roles button { padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--muted); font: 500 12.5px var(--mono); cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.roles button:hover { color: var(--text); border-color: var(--border-strong); }
.roles button[aria-pressed="true"] { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.prompt-box { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 16px 16px 20px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-lg); }
.prompt-box::before { content: ""; position: absolute; inset: -1px; border-radius: 17px; padding: 1px; background: linear-gradient(120deg, rgba(91, 140, 255, .85), rgba(63, 208, 245, .5), rgba(154, 123, 255, .85)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.prompt-box img { width: 22px; height: 22px; flex: none; }
.prompt-text { flex: 1; min-width: 0; min-height: 26px; color: var(--text); font-size: 15.5px; }
.caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -3px; background: var(--accent); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.prompt-send { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--text); color: var(--bg); }
.prompt-send svg { width: 16px; height: 16px; }
.prompt-trace { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; min-height: 22px; margin: 16px 4px 0; color: var(--faint); font: 12.5px var(--mono); }
.prompt-trace span { display: inline-flex; align-items: center; gap: 7px; opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s; }
.prompt-trace span.on { opacity: 1; transform: none; }
.prompt-trace span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--good); }
.prompt-trace span.think::before { background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }

/* ---------- stage: framed product visual on a gradient ---------- */
.stage-frame { position: relative; padding: 40px; border-radius: 24px; background: var(--stage); border: 1px solid var(--border); overflow: hidden; }
.stage-frame::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--dots) 1px, transparent 1px); background-size: 18px 18px; pointer-events: none; }
.stage-frame > * { position: relative; z-index: 1; }
.showcase { max-width: 1120px; margin: 72px auto 0; text-align: left; }
.surface-tabs { display: flex; gap: 4px; width: max-content; max-width: 100%; margin: 0 auto 20px; padding: 4px; border: 1px solid var(--border-strong); border-radius: 12px; background: color-mix(in srgb, var(--surface) 75%, transparent); backdrop-filter: blur(8px); }
.surface-tabs button { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: 600 13.5px/1 var(--font); cursor: pointer; }
.surface-tabs button svg { width: 15px; height: 15px; }
.surface-tabs button:hover { color: var(--text); }
.surface-tabs button[aria-selected="true"] { background: var(--text); color: var(--bg); }
.sync-note { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 18px 0 0; color: var(--text-2); font: 12.5px var(--mono); text-align: center; }
.sync-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px var(--good-soft); }

.window { overflow: hidden; border-radius: 14px; background: var(--win-bg); box-shadow: var(--shadow-lg); }
.win-bar { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--border); background: var(--win-bar); }
.win-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.win-title { margin-left: 8px; color: var(--muted); font: 12px var(--mono); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.win-body { display: grid; min-height: 430px; }
.panel[hidden] { display: none; }

/* conversation pieces */
.convo { display: flex; flex-direction: column; gap: 12px; padding: 20px; min-width: 0; font-size: 13.5px; }
.msg-user { align-self: flex-end; max-width: 88%; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: var(--surface-3); color: var(--text); }
.msg-ai { color: var(--text-2); }
.msg-ai .who { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--text); font: 700 13px var(--font); }
.msg-ai .who img { width: 16px; height: 16px; }
.msg-ai .who small { color: var(--faint); font: 500 11.5px var(--mono); }
.step { position: relative; padding: 5px 0 5px 22px; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.step svg { position: absolute; left: 0; top: 8px; width: 14px; height: 14px; color: var(--good); }
.step code, .msg-ai code { padding: 1px 6px; border-radius: 5px; background: var(--surface-2); color: var(--text); font-size: 12px; }
.diff { overflow: hidden; border: 1px solid var(--border); border-radius: 10px; font: 12px/1.75 var(--mono); }
.diff-head { display: flex; justify-content: space-between; gap: 10px; padding: 6px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); font-size: 12px; }
.diff-head .stat { color: var(--good); }
.diff div.l { padding: 0 12px; white-space: pre; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.diff .add { background: var(--code-add); color: var(--code-add-text); }
.approve { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn { display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: 8px; color: var(--text-2); font-size: 12.5px; font-weight: 600; }
.chip-btn.primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.result { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 10px; background: var(--good-soft); color: var(--good); font-size: 12.5px; font-weight: 600; }
.result svg { width: 15px; height: 15px; flex: none; }

/* desktop panel */
.desk { grid-template-columns: 50px minmax(0, 1fr) minmax(0, 1.1fr); }
.rail { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 0; border-right: 1px solid var(--border); background: var(--surface); }
.rail span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--faint); }
.rail span svg { width: 16px; height: 16px; }
.rail span.on { background: var(--accent-soft); color: var(--accent-text); }
.desk .convo { border-right: 1px solid var(--border); }
.preview { display: flex; flex-direction: column; min-width: 0; background: var(--surface); }
.preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); font: 12px var(--mono); color: var(--muted); }
.preview-bar b { color: var(--text); font: 600 12.5px var(--font); }
.live { display: inline-flex; align-items: center; gap: 6px; color: var(--good); }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.app-mock { flex: 1; margin: 14px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--win-bg); }
.app-mock h5 { margin: 0 0 12px; font-size: 14px; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.kpis div { padding: 10px; border: 1px solid var(--border); border-radius: 9px; }
.kpis small { display: block; color: var(--faint); font-size: 11px; }
.kpis b { font-size: 17px; }
.rows div { display: grid; grid-template-columns: 1.4fr .6fr .6fr; gap: 8px; padding: 8px 4px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-2); }
.rows div:first-child { border-top: 0; color: var(--faint); font: 600 10.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.rows .ok { color: var(--good); font-weight: 600; }

/* vs code panel */
.vsc { grid-template-columns: 190px minmax(0, 1.2fr) minmax(0, 1fr); }
.tree { padding: 12px 8px; border-right: 1px solid var(--border); background: var(--surface); font: 12px var(--mono); color: var(--text-2); }
.tree .th { padding: 0 8px 8px; color: var(--faint); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.tree div.f { padding: 4px 8px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree div.f.on { background: var(--accent-soft); color: var(--accent-text); }
.tree div.f.in { padding-left: 22px; }
.editor { padding: 14px 0; border-right: 1px solid var(--border); font: 12.5px/1.75 var(--mono); color: var(--text-2); overflow: hidden; }
.editor div { padding: 0 14px; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.editor .g { display: inline-block; width: 30px; color: var(--faint); }
.editor .k { color: var(--violet); }
.editor .add { background: var(--code-add); color: var(--code-add-text); }

/* terminal */
.term { display: block; padding: 20px 22px; background: var(--term-bg); color: var(--term-text); font: 13px/1.75 var(--mono); overflow-x: auto; }
.term div { white-space: pre; }
.term .p { color: #7aa2ff; } .term .d { color: #7f8aa3; } .term .ok { color: #57d39b; } .term .y { color: #f2c14e; } .term .a { color: #6fdcae; } .term .h { color: #fff; font-weight: 700; }

/* ---------- models strip ---------- */
.models { padding: 64px 0 8px; text-align: center; }
.models p { color: var(--faint); font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.model-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 44px; margin-top: 22px; }
.model-row span { color: var(--muted); font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.model-row span small { margin-left: 6px; color: var(--faint); font: 500 11px var(--mono); letter-spacing: 0; }

/* ---------- sections ---------- */
.section { position: relative; padding: 120px 0; }
.section-head { max-width: 760px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .label::after { content: ""; width: 18px; height: 1px; background: var(--accent); }
.section-head h2 { margin-top: 18px; font-size: clamp(32px, 4.4vw, 52px); font-weight: 700; letter-spacing: -.04em; }
.section-head p { margin-top: 18px; color: var(--muted); font-size: 18px; }
.rule { height: 1px; background: var(--grad-line); opacity: .45; }

/* ---------- lifecycle feature rows ---------- */
.feature { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; align-items: center; padding: 56px 0; }
.feature + .feature { border-top: 1px solid var(--border); }
.feature.flip .feature-copy { order: 2; }
.feature-copy h3 { margin-top: 18px; font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: -.03em; }
.feature-copy > p { margin-top: 14px; color: var(--muted); font-size: 16.5px; }
.for { display: block; margin-top: 18px; color: var(--faint); font: 500 12.5px var(--mono); }
.for b { color: var(--text-2); font-weight: 500; }
.ticks { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; color: var(--text-2); font-size: 15px; line-height: 1.45; }
.ticks li svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--accent-text); }
.feature .stage-frame { padding: 32px; }
.mini { overflow: hidden; border-radius: 12px; background: var(--win-bg); box-shadow: var(--shadow-lg); font-size: 13px; }
.mini .win-bar { height: 34px; }
.mini-body { padding: 18px; }

/* design doc visual */
.doc { display: grid; grid-template-columns: 150px minmax(0, 1fr); }
.doc-toc { padding: 14px 10px; border-right: 1px solid var(--border); font: 11.5px/2 var(--mono); color: var(--faint); }
.doc-toc div { padding: 0 8px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-toc div.on { background: var(--accent-soft); color: var(--accent-text); }
.doc-page { padding: 18px 20px; min-width: 0; }
.doc-page h6 { margin: 0; font-size: 16px; }
.doc-page .meta { margin-top: 4px; color: var(--faint); font: 11.5px var(--mono); }
.doc-page .line { height: 7px; margin-top: 10px; border-radius: 4px; background: var(--surface-3); }
.doc-page .w80 { width: 80%; } .doc-page .w60 { width: 60%; } .doc-page .w90 { width: 90%; }
.doc-page table { width: 100%; margin-top: 14px; border-collapse: collapse; font: 11.5px var(--mono); }
.doc-page td { padding: 6px 8px; border-top: 1px solid var(--border); color: var(--text-2); }
.doc-page td:first-child { color: var(--faint); }
.review { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); font-size: 12.5px; color: var(--text-2); }
.review i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--warn); }

/* build visual */
.build { display: grid; grid-template-columns: minmax(0, 1fr) 200px; }
.build-app { padding: 16px; border-right: 1px solid var(--border); min-width: 0; }
.build-app .bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.build-app .bar b { font-size: 13.5px; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 12px; }
.cal span { aspect-ratio: 1.3; border-radius: 5px; background: var(--surface-2); }
.cal span.a { background: rgba(91, 140, 255, .5); } .cal span.b { background: rgba(154, 123, 255, .5); } .cal span.c { background: rgba(67, 209, 154, .45); }
.legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; color: var(--muted); font-size: 11.5px; }
.legend i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 2px; }
.badge { padding: 2px 8px; border-radius: 999px; background: var(--good-soft); color: var(--good); font: 600 11px var(--mono); }
.build-steps { padding: 14px; font: 11.5px/1.5 var(--mono); color: var(--muted); }
.build-steps div { display: flex; gap: 8px; padding: 5px 0; }
.build-steps svg { width: 13px; height: 13px; flex: none; margin-top: 2px; color: var(--good); }

/* verify visual */
.checks { display: grid; gap: 8px; }
.check { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 13px; color: var(--text-2); }
.check svg { width: 16px; height: 16px; color: var(--good); }
.check code { display: block; color: var(--faint); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.check em { font: normal 600 11.5px var(--mono); color: var(--good); }

/* ship visual */
.gitg { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; font-size: 13px; color: var(--text-2); }
.gitg .dot { width: 12px; height: 12px; margin: 0 auto; border-radius: 50%; border: 2px solid var(--accent); background: var(--win-bg); }
.gitg .dot.br { border-color: var(--violet); }
.gitg .ln { width: 2px; height: 14px; margin: 0 auto; background: var(--border-strong); }
.gitg code { color: var(--faint); font-size: 11.5px; }
.gitg .tag { padding: 2px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-text); font: 600 11px var(--mono); }
.gitg .tag.v { background: rgba(154, 123, 255, .15); color: var(--violet); }
.ship-cmd { margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: var(--term-bg); color: var(--term-text); font: 12px/1.7 var(--mono); overflow-x: auto; }
.ship-cmd div { white-space: pre; }
.ship-cmd .d { color: #7f8aa3; } .ship-cmd .ok { color: #57d39b; }

/* ---------- surfaces ---------- */
.surfaces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--border); }
.surface-card { display: flex; flex-direction: column; padding: 32px; background: var(--bg-2); }
.surface-card .sc-ic { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); }
.surface-card .sc-ic svg { width: 20px; height: 20px; }
.surface-card h3 { margin-top: 22px; font-size: 21px; }
.surface-card .sc-for { display: block; margin-top: 6px; color: var(--faint); font: 500 12px var(--mono); }
.surface-card > p { margin-top: 14px; color: var(--muted); font-size: 15px; }
.surface-card ul { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.surface-card li { display: flex; gap: 10px; color: var(--text-2); font-size: 14.5px; line-height: 1.45; }
.surface-card li svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--accent-text); }
.surface-card .cmd { margin-top: auto; padding-top: 24px; }
.surface-card .cmd code { display: block; padding: 11px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--term-bg); color: var(--term-text); font-size: 12.5px; white-space: nowrap; overflow-x: auto; }

.sync-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; align-items: center; margin-top: 24px; }
.sync-band h3 { margin-top: 16px; font-size: 30px; letter-spacing: -.03em; }
.sync-band > div > p { margin-top: 14px; color: var(--muted); font-size: 16px; }
.sync-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sync-list li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--surface) 88%, transparent); }
.sync-list .si { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); }
.sync-list .si svg { width: 18px; height: 18px; }
.sync-list b { display: block; font-size: 15px; }
.sync-list span { color: var(--muted); font-size: 14px; }
.sync-list code { font-size: 12.5px; color: var(--text-2); }

/* ---------- how it works: agent loop ---------- */
.loop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.loop article { position: relative; padding: 30px 26px; background: var(--bg-2); }
.loop article + article { border-left: 1px solid var(--border); }
.loop .n { color: var(--accent-text); font: 600 12px var(--mono); letter-spacing: .1em; }
.loop h3 { margin-top: 16px; font-size: 19px; }
.loop p { margin-top: 10px; color: var(--muted); font-size: 14.5px; }
.loop .bar { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad-line); opacity: 0; transition: opacity .5s; }
.loop article.on .bar { opacity: 1; }

/* ---------- control ---------- */
.control { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ctl { padding: 26px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-2); transition: border-color .2s; }
.ctl:hover { border-color: var(--border-strong); }
.ctl .ci { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--border-strong); color: var(--accent-text); }
.ctl .ci svg { width: 18px; height: 18px; }
.ctl h4 { margin-top: 18px; font-size: 16.5px; }
.ctl p { margin-top: 8px; color: var(--muted); font-size: 14px; }

/* ---------- pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 900px; margin: 0 auto; }
.plan { padding: 32px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-2); }
.plan.featured { background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box, linear-gradient(130deg, rgba(91, 140, 255, .9), rgba(63, 208, 245, .5), rgba(154, 123, 255, .9)) border-box; border-color: transparent; }
.plan .pt { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plan h3 { font-size: 21px; }
.plan .tag { padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font: 600 11px var(--mono); letter-spacing: .04em; }
.plan > p { margin-top: 10px; color: var(--muted); font-size: 15px; }
.plan ul { margin: 22px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); list-style: none; display: grid; gap: 10px; }
.plan li { display: flex; gap: 10px; color: var(--text-2); font-size: 14.5px; }
.plan li svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--accent-text); }
.plans-note { margin-top: 20px; color: var(--faint); font: 12.5px var(--mono); text-align: center; }

/* ---------- about ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 56px; align-items: center; }
.about-grid h2 { margin-top: 18px; font-size: clamp(28px, 3.6vw, 40px); font-weight: 700; letter-spacing: -.035em; }
.about-grid p { margin-top: 16px; color: var(--muted); font-size: 16.5px; }
.about-grid p b { color: var(--text); font-weight: 600; }
.founder { padding: 30px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-2); }
.founder-top { display: flex; align-items: center; gap: 14px; }
.founder-av { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 13px; background: linear-gradient(135deg, #2e6bff, #38c6f2); color: #fff; font-weight: 800; }
.founder h4 { font-size: 16.5px; }
.founder .role { color: var(--faint); font: 12px var(--mono); }
.founder blockquote { margin: 20px 0 0; padding: 0; color: var(--text-2); font-size: 16px; line-height: 1.6; }

/* ---------- faq ---------- */
.faq-wrap { max-width: 840px; margin: 0 auto; border-top: 1px solid var(--border); }
.faq { border-bottom: 1px solid var(--border); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 4px; cursor: pointer; list-style: none; font-size: 17px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--faint); font: 400 22px var(--mono); transition: transform .2s; }
.faq[open] summary::after { transform: rotate(45deg); }
.faq .ans { padding: 0 4px 22px; color: var(--muted); font-size: 15.5px; }
.faq .ans code { font-size: 13px; color: var(--text-2); }

/* ---------- cta ---------- */
.cta { position: relative; overflow: hidden; padding: 88px 32px; border-radius: 28px; border: 1px solid var(--border); background: var(--stage); text-align: center; }
.cta::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--dots) 1px, transparent 1px); background-size: 18px 18px; pointer-events: none; }
.cta > * { position: relative; z-index: 1; }
.cta h2 { font-size: clamp(30px, 4.6vw, 52px); font-weight: 700; letter-spacing: -.04em; }
.cta p { max-width: 560px; margin: 16px auto 0; color: var(--text-2); font-size: 17.5px; }
.cta .hero-cta { margin-top: 30px; }
.cta small { display: block; margin-top: 18px; color: var(--muted); font: 12.5px var(--mono); }

/* ---------- footer ---------- */
.footer { padding: 72px 0 32px; border-top: 1px solid var(--border); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 32px; }
.footer-brand p { max-width: 320px; margin-top: 14px; color: var(--muted); font-size: 14.5px; }
.footer-col h5 { margin: 0 0 16px; color: var(--faint); font: 600 11.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.footer-col a, .footer-col p { display: block; margin-bottom: 10px; color: var(--text-2); font-size: 14.5px; }
.footer-col a:hover { color: var(--text); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--border); color: var(--faint); font: 12.5px var(--mono); }
.footer-bottom a:hover { color: var(--text); }

/* ---------- reveal ---------- */
.rise { animation: rise .8s cubic-bezier(.2,.7,.2,1) both; }
.rise.d1 { animation-delay: .06s; } .rise.d2 { animation-delay: .12s; } .rise.d3 { animation-delay: .18s; } .rise.d4 { animation-delay: .26s; } .rise.d5 { animation-delay: .34s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .rise, .backdrop .orb, .caret, .prompt-trace span.think::before { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; margin: 0; padding: 12px 16px 16px; border-bottom: 1px solid var(--border); background: var(--bg); }
  .nav-links.open { display: flex; }
  .nav-links .mobile-only { display: block; }
  .nav-toggle { display: inline-flex; }
  .vsc { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .vsc .tree { display: none; }
  .control { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature { gap: 40px; }
}
@media (max-width: 900px) {
  .feature, .sync-band, .about-grid, .plans { grid-template-columns: minmax(0, 1fr); }
  .feature.flip .feature-copy { order: 0; }
  .surfaces { grid-template-columns: minmax(0, 1fr); }
  .loop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loop article:nth-child(3) { border-left: 0; }
  .loop article:nth-child(n+3) { border-top: 1px solid var(--border); }
  .desk { grid-template-columns: minmax(0, 1fr); }
  .desk .rail, .desk .preview { display: none; }
  .desk .convo { border-right: 0; }
  .vsc { grid-template-columns: minmax(0, 1fr); }
  .vsc .editor { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .section { padding: 88px 0; }
  .stage-frame { padding: 24px; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .desktop-only { display: none; }
  .hero { padding: 64px 0 24px; }
  .stage-frame, .feature .stage-frame { padding: 14px; border-radius: 18px; }
  .loop, .control, .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .loop article + article { border-left: 0; border-top: 1px solid var(--border); }
  .doc { grid-template-columns: minmax(0, 1fr); }
  .doc-toc { display: none; }
  .build { grid-template-columns: minmax(0, 1fr); }
  .build-app { border-right: 0; border-bottom: 1px solid var(--border); }
  .surface-tabs button { padding: 0 10px; font-size: 13px; }
  .cta { padding: 56px 20px; }
  .win-body { min-height: 0; }
  .term { font-size: 11.5px; padding: 16px; }
  .theme-switch button { width: 28px; }
  .model-row { gap: 10px 24px; }
  .model-row span { font-size: 16px; }
}