:root { color-scheme: dark; --bg:#091219; --surface:#13242c; --text:#edf5f4; --muted:#a5b8bd; --accent:#59f2b8; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:17px/1.7 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:var(--accent); text-underline-offset:4px; }
a:hover { color:#fff; }
header,main,footer { width:min(1040px,calc(100% - 40px)); margin:auto; }
header { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 0; border-bottom:1px solid #294049; }
.brand { display:flex; align-items:center; gap:12px; color:var(--text); font-weight:750; text-decoration:none; }
.brand img { width:48px; height:48px; border-radius:12px; }
nav { display:flex; flex-wrap:wrap; gap:22px; font-size:15px; }
h1,h2,h3 { line-height:1.18; letter-spacing:-.025em; }
h1 { font-size:clamp(38px,6vw,68px); margin:0 0 24px; }
h2 { font-size:28px; margin-top:44px; }
p,li { max-width:75ch; }
.hero { display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:50px; padding:72px 0; }
.hero p { color:var(--muted); font-size:21px; }
.eyebrow { color:var(--accent)!important; font:600 13px/1.4 ui-monospace,monospace!important; letter-spacing:.12em; text-transform:uppercase; }
.hero img { display:block; width:100%; max-height:720px; object-fit:contain; }
.button { display:inline-block; border:1px solid var(--accent); padding:11px 20px; border-radius:10px; text-decoration:none; margin:10px 12px 10px 0; font-weight:650; }
.button.primary { color:var(--bg); background:var(--accent); }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:30px 0 60px; }
.card { padding:25px; background:var(--surface); border-radius:14px; }
.card h2 { margin:0 0 12px; font-size:23px; }
.card p { color:var(--muted); margin-bottom:0; }
article { max-width:780px; padding:56px 0 72px; }
article h1 { font-size:44px; }
.note { color:var(--muted); border-left:3px solid var(--accent); padding-left:18px; }
code { font: .9em ui-monospace,SFMono-Regular,monospace; overflow-wrap:anywhere; }
footer { padding:25px 0 35px; border-top:1px solid #294049; color:var(--muted); font-size:14px; }
footer a { margin-right:18px; }
@media(max-width:700px) { header { align-items:flex-start; flex-direction:column; } .hero { grid-template-columns:1fr; padding:42px 0; gap:25px; } .hero img { max-height:620px; } .grid { grid-template-columns:1fr; } article { padding-top:35px; } }