:root { color-scheme: dark; --bg:#07080a; --panel:#111317; --line:#26282e; --text:#f4f4f5; --muted:#a1a1aa; --accent:#fafafa; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; font-family:"Segoe UI",Tahoma,sans-serif; background:radial-gradient(900px 420px at 50% -10%, #1d2433, transparent 60%), var(--bg); color:var(--text); }
a { color:inherit; text-decoration:none; }
.nav, .wrap, footer { width:min(1120px, calc(100% - 40px)); margin-inline:auto; }
.nav { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:72px; }
.nav nav, .nav-end, .row { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.logo { font-weight:700; letter-spacing:-0.04em; }
.nav a, .muted { color:var(--muted); }
h1 { margin:0; font-size:clamp(40px, 7vw, 76px); line-height:0.98; letter-spacing:-0.055em; }
.hero { padding:54px 0 20px; text-align:center; }
.lead { max-width:680px; margin:18px auto 0; color:var(--muted); font-size:18px; line-height:1.7; }
.hero .row { justify-content:center; margin-top:26px; }
.btn, button { display:inline-flex; align-items:center; justify-content:center; background:var(--accent); color:#111; border:0; border-radius:999px; padding:10px 16px; font:inherit; cursor:pointer; }
.btn.ghost, button.ghost { background:transparent; color:var(--text); border:1px solid var(--line); }
.stage { margin:42px auto 0; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#0c0d10; text-align:start; }
.editor-mock { min-height:280px; display:grid; grid-template-columns:52px 1fr 240px; }
.mock-side, .mock-chat { background:#101114; }
.mock-code, .mock-chat { margin:0; padding:18px; font-family:Consolas,monospace; font-size:13px; white-space:pre-wrap; }
.mock-chat { border-inline-start:1px solid var(--line); color:var(--muted); }
.features, .grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; padding:28px 0 10px; }
.card, .panel, form.stack { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:22px; }
.card strong { display:block; margin-top:18px; font-size:32px; letter-spacing:-0.04em; }
.card .btn { margin-top:16px; }
form.stack { width:min(420px, 100%); margin:48px auto; display:flex; flex-direction:column; gap:12px; }
input, select, textarea { width:100%; background:#0c0d10; color:inherit; border:1px solid var(--line); border-radius:10px; padding:10px; font:inherit; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:right; padding:8px; border-bottom:1px solid var(--line); vertical-align:top; }
.banner { background:#3a2428; border-radius:12px; padding:10px 12px; }
.meter { margin:16px 0 8px; }
.meter-track { height:10px; background:#0c0d10; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.meter-fill { display:block; height:100%; background:#f4f4f5; }
.usage-split { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin:18px 0; }
.usage-split article { background:#0c0d10; border-radius:14px; padding:14px; }
.usage-split strong { display:block; margin:8px 0; font-size:28px; }
footer { color:var(--muted); padding:48px 0; }
@media (max-width: 800px) { .features, .grid, .editor-mock { grid-template-columns:1fr; } }