:root {
  --bg:#141517; --panel:#1B1D21; --panel-2:#22252A; --panel-3:#2B2F36;
  --border:#2F333A; --border-strong:#40454F;
  --text:#EAEAE7; --text-2:#C4C3BB; --muted:#989EA8;
  --accent:#a6d189; --accent-soft:#2a2e35; --on-accent:#0f1a09;
  --clk:#72F5DF; --bus:#B48CFF; --pink:#F4A698; --ok:#57C88A; --warn:#E6B14E; --hot:#F06B5B;
  --maxw:1180px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:'IBM Plex Sans', system-ui, sans-serif;
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
.mono { font-family:'JetBrains Mono', ui-monospace, monospace; }
a { color:inherit; text-decoration:none; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* ── nav ─────────────────────────────────────────────── */
header {
  position:sticky; top:0; z-index:50;
  background:rgba(20,21,23,.78); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.nav { display:flex; align-items:center; gap:28px; height:60px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:.2px; font-size:16px; }
.brand .mark { width:22px; height:22px; }
.nav .links { display:flex; gap:26px; margin-left:8px; }
.nav .links a { font-size:14px; color:var(--text-2); }
.nav .links a:hover { color:var(--text); }
.nav .sp { flex:1; }
.nav .ghost { font-size:13px; color:var(--text-2); }
.nav .ghost:hover { color:var(--text); }

.btn {
  display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 16px;
  border-radius:7px; border:1px solid var(--border-strong);
  font-size:13.5px; font-weight:500; color:var(--text); background:var(--panel);
  cursor:pointer; white-space:nowrap; transition:background .15s, border-color .15s;
}
.btn:hover { background:var(--panel-2); border-color:var(--border-strong); }
.btn.primary { background:var(--accent); color:var(--on-accent); border-color:transparent; font-weight:600; }
.btn.primary:hover { background:#b6dd9c; }
.btn.lg { height:40px; padding:0 18px; font-size:14px; }
.btn .kbd { font-family:'JetBrains Mono',monospace; font-size:11px; opacity:.7; }

/* ── hero (full-width shot variant) ──────────────────── */
.hero { position:relative; padding:58px 0 22px; overflow:hidden; }
.hero .wrap { position:relative; }
.hero-top { display:grid; grid-template-columns:1fr 380px; gap:64px; align-items:end; margin-bottom:52px; }
.hero .shot-zone { margin-top:0; }
.hero .shot-glow {
  position:absolute; left:50%; top:8%; transform:translateX(-50%);
  width:72%; height:60%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(166,209,137,.16), transparent);
  filter:blur(24px); pointer-events:none;
}
.hero .cta-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.hero h1 { max-width:18ch; font-size:54px; }
.hero .lede { max-width:60ch; }
.hero .cta-row .btn.lg { width:186px; min-width:0; padding:0; justify-content:center; }
.hero .fit { margin-top:0; }
.hero .wave-bg {
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 70%);
          mask-image:radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 70%);
}
.eyebrow {
  display:inline-flex; align-items:center; gap:9px; font-family:'JetBrains Mono',monospace;
  font-size:12px; letter-spacing:.5px; color:var(--accent);
  border:1px solid var(--border); background:var(--panel); border-radius:999px;
  padding:5px 13px; margin-bottom:26px;
}
.eyebrow .dot { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px rgba(166,209,137,.18); }
h1 {
  font-size:62px; line-height:1.04; letter-spacing:-1.4px; font-weight:600;
  margin:0 0 22px; max-width:14ch; text-wrap:balance;
}
h1 .em { color:var(--accent); }
.lede { font-size:19px; line-height:1.55; color:var(--text-2); max-width:54ch; margin:0 0 32px; }
.cta-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.cta-note { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--muted); }

/* ── window frame ────────────────────────────────────── */
.shot-zone { position:relative; margin-top:58px; }
.shot-glow {
  position:absolute; left:50%; top:8%; transform:translateX(-50%);
  width:72%; height:60%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(166,209,137,.16), transparent);
  filter:blur(20px); pointer-events:none;
}
.window {
  position:relative; border:1px solid var(--border-strong); border-radius:12px;
  background:var(--panel-2); overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.02) inset;
}
.win-bar {
  display:flex; align-items:center; gap:8px; height:34px; padding:0 14px;
  background:var(--panel-2); border-bottom:1px solid var(--border);
}
.win-bar .dots { display:flex; gap:7px; }
.win-bar .dots i { width:11px; height:11px; border-radius:50%; display:inline-block; }
.win-bar .dots .r { background:#E86A5A; } .win-bar .dots .y { background:#E6B14E; } .win-bar .dots .g { background:#57C88A; }
.win-bar .addr {
  margin:0 auto; font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--muted);
  background:var(--panel); border:1px solid var(--border); border-radius:6px; padding:3px 14px;
}
.window img { display:block; width:100%; height:auto; }
.window.plain { border-color:var(--border); box-shadow:0 24px 60px -34px rgba(0,0,0,.7); }

/* ── fit-your-flow block (in hero left column) ───────── */
.fit { margin-top:30px; max-width:none; }
.fit .fit-label { font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.5px; color:var(--accent); margin-bottom:14px; }
.fit .fit-row { display:flex; gap:12px; padding:9px 0; border-top:1px solid var(--border); font-size:13.5px; }
.fit .fit-row:last-child { border-bottom:1px solid var(--border); }
.fit .k { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--muted); width:104px; flex:none; padding-top:1px; }
.fit .vv { font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--text); }
.fit .vv.dim, .fit .vv .soon-grp { color:var(--border-strong); }
.ast { color:var(--warn); font-weight:700; }
.fit-key { margin-top:13px; font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--muted); }
.soon { display:inline-block; margin-left:4px; font-family:'JetBrains Mono',monospace; font-size:9.5px;
  letter-spacing:.5px; text-transform:uppercase; color:var(--warn);
  border:1px solid rgba(230,177,78,.4); border-radius:999px; padding:1px 6px; vertical-align:middle; }

/* ── mock panels (control / signals) ─────────────────── */
.mock { border:1px solid var(--border); border-radius:12px; background:var(--panel); overflow:hidden;
  box-shadow:0 24px 60px -34px rgba(0,0,0,.7); }
.mock .top { display:flex; align-items:center; gap:8px; height:34px; padding:0 14px; background:var(--panel-2);
  border-bottom:1px solid var(--border); font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--muted); }
.mock .top .dot { width:9px; height:9px; border-radius:50%; background:var(--accent); }
.mock .body { padding:12px; font-family:'JetBrains Mono',monospace; }

/* backend selector mock */
.bk-head { display:flex; align-items:center; justify-content:space-between; font-size:11px; letter-spacing:.4px;
  color:var(--muted); padding:4px 6px 12px; }
.bk-head .sel { display:inline-flex; gap:8px; align-items:center; background:var(--panel-2);
  border:1px solid var(--border-strong); border-radius:6px; padding:5px 11px; color:var(--text); font-size:12.5px; }
.bk-row { display:flex; align-items:center; gap:10px; height:32px; padding:0 8px; border-radius:6px;
  font-size:12.5px; color:var(--text-2); }
.bk-row.active { background:var(--accent-soft); color:var(--text); }
.bk-row .d { width:8px; height:8px; border-radius:50%; flex:none; }
.bk-row .sp { flex:1; }
.bk-tcl { margin-top:10px; padding:12px 8px 4px; border-top:1px solid var(--border);
  display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--text); }
.bk-tcl .p { color:var(--accent); font-weight:700; }
.bk-tcl .note { margin-left:auto; color:var(--muted); font-size:11px; }

/* signals / noise mock */
.sg-group { display:flex; align-items:center; gap:8px; height:30px; padding:0 8px; font-size:12.5px; color:var(--text-2); }
.sg-group .chev { color:var(--muted); width:10px; display:inline-flex; }
.sg-group .tag { margin-left:auto; font-size:9.5px; letter-spacing:.4px; text-transform:uppercase; color:var(--clk);
  border:1px solid rgba(114,245,223,.35); border-radius:999px; padding:1px 7px; }
.sg-row { display:flex; align-items:center; gap:9px; height:28px; padding:0 8px; font-size:12.5px; color:var(--text); border-radius:5px; }
.sg-row.coupled { box-shadow:inset 2px 0 0 var(--clk); }
.sg-row.dim { opacity:.4; }
.sg-row .pin { width:8px; height:8px; border-radius:50%; flex:none; }
.sg-row .v { margin-left:auto; color:var(--muted); font-size:11.5px; }
.sg-row .xz { color:var(--hot); border:1px solid #4A1E18; background:#2a1614; border-radius:4px; padding:0 5px; font-size:11px; margin-left:auto; }
.sg-indent { padding-left:24px; }

/* ── active-signal list (grouping mock) ──────────────── */
.copy p .ln { color:var(--accent); border-bottom:1px solid rgba(166,209,137,.45); }
.copy p .ln:hover { border-bottom-color:var(--accent); }
.aslist { font-family:'JetBrains Mono',monospace; }
.as-head { display:flex; align-items:center; height:28px; padding:0 12px; font-size:9.5px;
  letter-spacing:.5px; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--border); background:var(--panel); }
.as-head .vh { margin-left:auto; }
.as-grp { display:flex; align-items:center; gap:8px; height:30px; padding:0 12px; font-size:12px;
  color:var(--text-2); background:var(--panel-2); border-bottom:1px solid var(--border); }
.as-grp .chev { color:var(--muted); }
.as-grp .gtag { margin-left:auto; font-size:9px; letter-spacing:.4px; text-transform:uppercase; color:var(--clk);
  border:1px solid rgba(114,245,223,.35); border-radius:999px; padding:1px 8px; }
.as-row { display:flex; align-items:center; gap:9px; height:30px; padding:0 12px; font-size:12.5px;
  color:var(--text); border-bottom:1px solid var(--border); }
.as-row:last-child { border-bottom:none; }
.as-row.nested { padding-left:28px; background:color-mix(in srgb, var(--panel-2) 55%, transparent); box-shadow:inset 2px 0 0 var(--clk); }
.as-row .pin { width:9px; height:9px; border-radius:50%; flex:none; }
.as-row .ic { width:13px; display:inline-flex; align-items:center; justify-content:center; color:var(--text-2); flex:none; }
.as-row .nm { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.as-row .val { color:var(--muted); font-size:11.5px; }
.as-row .corr { font-size:9px; letter-spacing:.3px; text-transform:uppercase; color:#4FD2BD;
  border:1px solid rgba(79,210,189,.4); border-radius:999px; padding:1px 7px; margin-left:2px; }

/* ── features ────────────────────────────────────────── */
.section { padding:96px 0; }
.sec-head { max-width:42ch; margin-bottom:54px; }
.sec-kicker { font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.5px; color:var(--accent); margin-bottom:14px; }
.sec-head h2 { font-size:38px; line-height:1.1; letter-spacing:-.8px; font-weight:600; margin:0 0 16px; }
.sec-head p { font-size:17px; color:var(--text-2); margin:0; }

.feat-list.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:30px 36px; }
.feat-list.grid3 strong { font-size:16px; margin-bottom:5px; }
.feat-list.grid3 span { font-size:14.5px; line-height:1.6; }

/* ── signal list feature (split) ─────────────────────── */
.split { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.split .copy h2 { font-size:34px; line-height:1.12; letter-spacing:-.6px; font-weight:600; margin:0 0 18px; }
.split .copy p { font-size:16.5px; color:var(--text-2); margin:0 0 28px; }
.feat-list { display:flex; flex-direction:column; gap:18px; }
.feat-list li { display:flex; gap:14px; list-style:none; }
.feat-list .pin { width:9px; height:9px; border-radius:50%; margin-top:7px; flex:none; }
.feat-list strong { font-weight:600; display:block; margin-bottom:2px; font-size:15px; }
.feat-list span { font-size:14px; color:var(--muted); }
ul.feat-list { margin:0; padding:0; }

/* code card */
.codecard { border:1px solid var(--border); border-radius:12px; background:var(--panel); overflow:hidden; box-shadow:0 24px 60px -34px rgba(0,0,0,.7); }
.codecard .top { display:flex; align-items:center; gap:8px; height:34px; padding:0 14px; background:var(--panel-2); border-bottom:1px solid var(--border); font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--muted); }
.codecard .top .dot { width:9px;height:9px;border-radius:50%;background:var(--accent); }
.codecard pre { margin:0; padding:22px 20px; font-family:'JetBrains Mono',monospace; font-size:13px; line-height:1.85; overflow-x:auto; }
.codecard .c-com { color:var(--muted); }
.codecard .c-prompt { color:var(--accent); }
.codecard .c-cmd { color:var(--text); }
.codecard .c-key { color:var(--bus); }
.codecard .c-num { color:var(--pink); }
.codecard .c-ok { color:var(--ok); }
.codecard .c-clk { color:var(--clk); }

/* ── closing cta ─────────────────────────────────────── */
.closing { position:relative; text-align:center; padding:110px 0; border-top:1px solid var(--border); overflow:hidden; }
.closing .wave-bg { position:absolute; inset:0; opacity:.4; pointer-events:none;
  -webkit-mask-image:radial-gradient(100% 90% at 50% 50%, #000, transparent 72%); mask-image:radial-gradient(100% 90% at 50% 50%, #000, transparent 72%); }
.closing h2 { position:relative; font-size:46px; line-height:1.06; letter-spacing:-1px; font-weight:600; margin:0 auto 20px; max-width:16ch; }
.closing p { position:relative; font-size:18px; color:var(--text-2); margin:0 auto 34px; max-width:48ch; }
.closing .cta-row { position:relative; justify-content:center; }
.closing .cta-row .btn.lg { width:186px; padding:0; justify-content:center; }

/* ── footer ──────────────────────────────────────────── */
footer { border-top:1px solid var(--border); padding:38px 0; }
.foot { display:flex; align-items:center; gap:20px; }
.foot .sp { flex:1; }
.foot .brand { font-size:14px; }
.foot .meta { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--muted); }
.foot .links { display:flex; gap:22px; }
.foot .links a { font-size:13px; color:var(--text-2); }
.foot .links a:hover { color:var(--text); }

@media (max-width:880px) {
  h1 { font-size:42px; }
  .hero-top { grid-template-columns:1fr; gap:36px; }
  .feat-list.grid3 { grid-template-columns:1fr; }
  .split { grid-template-columns:1fr; gap:40px; }
  .nav .links { display:none; }
  .section { padding:64px 0; }
}