/* Starlight / VibeGuard — landing page styles (derived from design system) */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600;700&family=Space+Grotesk:wght@300;400;500;600;700&family=Instrument+Serif:ital@1&display=swap');

:root {
  --color-void:#05070a; --color-ink:#0b0f14; --color-ink-raised:#11161d;
  --color-ink-rim:#1a2029; --color-ink-mute:#262e38; --color-ink-soft:#3a4452;
  --color-paper:#fafaf7; --color-paper-2:#f2f1ec; --color-paper-3:#e7e6e0; --color-paper-rim:#cfcdc4;
  --color-fg:#0b0f14; --color-fg-2:#3a4452; --color-fg-3:#6b7482;
  --color-fg-inv:#e8eef7; --color-fg-inv-2:#a4adba;

  --ansi-cyan:#5ddfde; --ansi-cyan-strong:#2cc4c3; --ansi-cyan-soft:#a9ecec;
  --ansi-blue:#6ea8ff; --ansi-red:#ff5c5c; --ansi-green:#5ad27a;
  --ansi-yellow:#ffc857; --ansi-magenta:#c084fc;

  --bg:var(--color-paper); --bg-raised:#fff; --bg-sunk:var(--color-paper-2);
  --fg:var(--color-fg); --fg-muted:var(--color-fg-2); --fg-subtle:var(--color-fg-3);
  --border:var(--color-paper-3); --border-strong:var(--color-paper-rim);

  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --font-display:'Space Grotesk','Inter',system-ui,sans-serif;
  --font-serif:'Instrument Serif','Times New Roman',serif;

  --r-2:4px; --r-3:6px; --r-pill:999px;
  --shadow-glow:0 0 0 4px rgba(93,223,222,0.22);
  --ease-out:cubic-bezier(0.2,0.7,0.2,1);
}

* { box-sizing: border-box; }
html { font-family:var(--font-display); color:var(--fg); background:var(--bg); scroll-behavior:smooth; }
body { margin:0; font-size:15px; line-height:1.5; }
a { color:inherit; text-decoration:none; }
a:hover { text-decoration:underline; text-decoration-thickness:1px; }

/* ============ NAV ============ */
.nav { position:sticky; top:0; z-index:10; display:flex; justify-content:space-between; align-items:center;
  padding:14px 40px; background:rgba(5,7,10,0.6); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--color-ink-rim); color:var(--color-fg-inv);
  font-family:var(--font-mono); font-size:13px; }
.nav .brand { height:22px; color:var(--ansi-cyan); display:inline-flex; align-items:center; }
.nav .brand svg { height:22px; width:auto; }
.nav .links a { color:var(--color-fg-inv-2); margin-left:22px; transition:color 120ms var(--ease-out); }
.nav .links a:hover { color:var(--ansi-cyan); text-decoration:none; }

/* ============ HERO ============ */
.hero { position:relative; background:var(--color-ink);
  background-image:url('assets/bg-starfield.svg'); background-size:cover; background-position:center;
  color:var(--color-fg-inv); padding:120px 40px 140px; overflow:hidden; }
.hero::before { content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 20% 30%, rgba(93,223,222,0.10), transparent 50%),
             radial-gradient(circle at 80% 70%, rgba(192,132,252,0.06), transparent 55%); pointer-events:none; }
.hero-inner { max-width:1100px; margin:0 auto; position:relative; }
.eyebrow { font-family:var(--font-mono); font-size:12px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--ansi-cyan); margin-bottom:18px; }
.hero h1 { font-family:var(--font-display); font-size:clamp(64px,10vw,144px);
  line-height:0.92; letter-spacing:-0.05em; font-weight:400; margin:0 0 28px; max-width:14ch; }
.hero h1 .accent { font-family:var(--font-serif); font-style:italic; font-weight:400; color:var(--ansi-cyan); }
.hero .lede { font-size:19px; line-height:1.55; color:var(--color-fg-inv-2);
  max-width:58ch; margin:0 0 36px; }
.cta-row { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.cmd-block { display:inline-flex; align-items:center; gap:10px; padding:12px 14px;
  background:var(--color-ink-raised); border:1px solid var(--color-ink-rim); border-radius:var(--r-3);
  font-family:var(--font-mono); font-size:14px; color:var(--color-fg-inv); }
.cmd-block .prompt { color:var(--ansi-cyan); }
.btn { font-family:var(--font-mono); font-size:12px; font-weight:600; padding:6px 12px;
  background:var(--ansi-cyan); color:var(--color-ink); border:none; border-radius:var(--r-2);
  cursor:pointer; transition:background 120ms var(--ease-out); letter-spacing:0.02em; }
.btn:hover { background:var(--ansi-cyan-strong); }
.btn.ghost { background:transparent; color:var(--color-fg-inv); border:1px solid var(--color-ink-rim); padding:10px 16px; }
.btn.ghost:hover { background:rgba(93,223,222,0.08); border-color:var(--ansi-cyan); }

.stat-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  margin-top:72px; border-top:1px solid var(--color-ink-rim);
  border-bottom:1px solid var(--color-ink-rim); }
.stat { padding:22px 24px; border-right:1px solid var(--color-ink-rim); }
.stat:last-child { border-right:none; }
.stat .num { font-family:var(--font-display); font-size:44px; font-weight:500;
  letter-spacing:-0.03em; line-height:1; color:var(--color-fg-inv); }
.stat .num .ital { font-family:var(--font-serif); font-style:italic; color:var(--ansi-cyan); }
.stat .lbl { font-family:var(--font-mono); font-size:11px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--color-fg-inv-2); margin-top:8px; }

/* ============ SECTION BASE ============ */
section.band { padding:100px 40px; }
.inner { max-width:1100px; margin:0 auto; }
.section-eyebrow { font-family:var(--font-mono); font-size:12px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--ansi-cyan-strong); margin-bottom:14px; }
.section-h2 { font-family:var(--font-display); font-size:clamp(40px,6vw,80px);
  font-weight:500; line-height:1.02; letter-spacing:-0.035em; margin:0 0 44px; max-width:18ch; }
.section-h2 .accent { font-family:var(--font-serif); font-style:italic; font-weight:400; color:var(--ansi-cyan-strong); }
.sunk { background:var(--bg-sunk); }

/* ============ PITCH ============ */
.pitch-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.pitch-item h3 { font-family:var(--font-mono); font-size:18px; margin:0 0 10px; letter-spacing:-0.01em; }
.pitch-item p { margin:0; font-size:14px; line-height:1.65; color:var(--fg-muted); max-width:32ch; }
.pitch-item .sigil { width:32px; height:32px; color:var(--ansi-cyan-strong); margin-bottom:14px; display:block; }

/* ============ HOW-IT-WORKS TABLE ============ */
.layers { width:100%; border-collapse:collapse; font-size:14px; }
.layers th { text-align:left; padding:12px 14px; font-family:var(--font-mono); font-size:11px;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--fg-subtle);
  border-bottom:1px solid var(--border-strong); }
.layers td { padding:16px 14px; border-bottom:1px solid var(--border); color:var(--fg-muted); }
.layers td.key { font-family:var(--font-mono); font-weight:700; color:var(--fg); width:28%; }

/* ============ RULE LADDER ============ */
.rule-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.rule-card { border:1px solid var(--border); border-radius:var(--r-2);
  padding:16px 18px; transition:border-color 120ms var(--ease-out); background:var(--bg-raised); }
.rule-card:hover { border-color:var(--border-strong); }
.rule-card .id { font-family:var(--font-mono); font-size:11px; font-weight:700;
  color:var(--ansi-cyan-strong); letter-spacing:0.1em; }
.rule-card .title { font-family:var(--font-mono); font-size:13px; font-weight:600; margin-top:6px; }
.rule-card .desc { font-size:12px; line-height:1.5; color:var(--fg-subtle); margin-top:6px; }

/* ============ TERMINAL MOCK ============ */
.terminal-block { max-width:880px; margin:0 auto; background:var(--color-ink);
  border:1px solid var(--color-ink-rim); border-radius:var(--r-3);
  box-shadow:0 24px 60px rgba(11,15,20,0.25), 0 0 0 1px rgba(93,223,222,0.12); overflow:hidden; }
.terminal-chrome { display:flex; align-items:center; gap:10px; padding:12px 16px;
  background:var(--color-ink-raised); border-bottom:1px solid var(--color-ink-rim);
  font-family:var(--font-mono); font-size:11px; color:var(--color-fg-inv-2); letter-spacing:0.08em; }
.dot { width:10px; height:10px; border-radius:50%; background:var(--color-ink-soft); }
.dot.r { background:#ff5f57; } .dot.y { background:#febc2e; } .dot.g { background:#28c840; }
.terminal-body { font-family:var(--font-mono); font-size:13px; line-height:1.7;
  color:var(--color-fg-inv); padding:24px 24px 28px; white-space:pre; overflow-x:auto; }
.terminal-body .cy { color:var(--ansi-cyan); }
.terminal-body .bl { color:var(--ansi-blue); }
.terminal-body .rd { color:var(--ansi-red); }
.terminal-body .gn { color:var(--ansi-green); }
.terminal-body .yl { color:var(--ansi-yellow); }
.terminal-body .mu { color:var(--color-fg-inv-2); }
.caret { display:inline-block; width:8px; height:16px; background:var(--ansi-cyan);
  vertical-align:-2px; margin-left:4px; animation:blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }

/* ============ INSTALL BAND ============ */
.install { background:var(--color-ink); color:var(--color-fg-inv); padding:120px 40px; }
.install-inner { max-width:760px; margin:0 auto; text-align:center; }
.install h2 { font-family:var(--font-display); font-size:clamp(40px,5.5vw,72px);
  font-weight:500; letter-spacing:-0.035em; line-height:1.02; margin:0 0 32px; }
.install h2 .accent { font-family:var(--font-serif); font-style:italic; font-weight:400; color:var(--ansi-cyan); }
.install-pre { text-align:left; background:var(--color-ink-raised);
  border:1px solid var(--color-ink-rim); border-radius:var(--r-3); padding:20px 22px;
  font-family:var(--font-mono); font-size:13px; line-height:1.8; margin:0 0 20px;
  position:relative; white-space:pre-wrap; word-break:break-all; }
.install-pre .cy { color:var(--ansi-cyan); }
.install-pre .copy-btn { position:absolute; top:12px; right:12px; }
.install-foot { margin:0; color:var(--color-fg-inv-2); font-size:13px; font-family:var(--font-mono); }

/* ============ COMPARE ============ */
.compare { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.col { border:1px solid var(--border); border-radius:var(--r-3); padding:28px; background:var(--bg-raised); }
.col.before { opacity:0.92; }
.col.after { border-color:var(--ansi-cyan-strong); box-shadow:var(--shadow-glow); }
.col h4 { font-family:var(--font-mono); font-size:12px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--fg-subtle); margin:0 0 18px; }
.col.after h4 { color:var(--ansi-cyan-strong); }
.col ul { margin:0; padding-left:18px; }
.col li { font-size:14px; line-height:1.7; color:var(--fg-muted); margin-bottom:6px; }
.col li::marker { color:var(--fg-subtle); }

/* ============ FOOTER ============ */
.foot { padding:28px 40px; background:var(--color-ink);
  border-top:1px solid var(--color-ink-rim); color:var(--color-fg-inv-2);
  font-family:var(--font-mono); font-size:12px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }

/* ============ RESPONSIVE ============ */
@media (max-width:900px) {
  .nav { padding:12px 20px; }
  .hero { padding:80px 24px 100px; }
  section.band { padding:72px 24px; }
  .pitch-grid, .rule-grid, .compare { grid-template-columns:1fr; }
  .stat-strip { grid-template-columns:repeat(2,1fr); }
  .stat { border-right:none; border-bottom:1px solid var(--color-ink-rim); }
  .install { padding:80px 24px; }
}