:root{
  --bg:#0f1216; --panel:#161b22; --fg:#e6edf3; --muted:#9aa7b4;
  --accent:#4f8cff; --line:#232a33; --radius:12px;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f6f8fa; --panel:#ffffff; --fg:#1b2027; --muted:#5b6672; --line:#e3e8ee; }
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--fg);
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.9em; }

.site{
  display:flex; align-items:center; justify-content:space-between;
  max-width:960px; margin:0 auto; padding:20px 24px;
}
.brand{ font-weight:700; color:var(--fg); display:flex; align-items:center; gap:10px; }
.logo{ width:20px; height:20px; border-radius:6px;
  background:linear-gradient(135deg,var(--accent),#7c5cff); display:inline-block; }
nav a{ color:var(--muted); margin-left:18px; font-size:.95rem; }
nav a:hover{ color:var(--fg); text-decoration:none; }

main{ max-width:960px; margin:0 auto; padding:24px; }
.eyebrow{ color:var(--accent); font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; font-size:.78rem; margin:24px 0 8px; }
.hero h1{ font-size:2.2rem; line-height:1.15; margin:.2em 0; letter-spacing:-.02em; }
.lead{ color:var(--muted); font-size:1.1rem; max-width:38ch; }
.cta{ margin:24px 0 8px; display:flex; gap:12px; flex-wrap:wrap; }
.btn{ display:inline-block; padding:10px 18px; border-radius:var(--radius);
  border:1px solid var(--line); color:var(--fg); background:var(--panel); font-weight:600; }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn:hover{ text-decoration:none; opacity:.92; }

.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px; margin:48px 0; }
.card{ background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px; }
.card h3{ margin:.1em 0 .4em; }
.card p{ color:var(--muted); margin:0; }

.prose{ max-width:70ch; }
.prose h1{ letter-spacing:-.02em; }
.prose h2{ margin-top:1.6em; }
.prose p{ color:var(--fg); }

footer{ max-width:960px; margin:40px auto 32px; padding:20px 24px;
  border-top:1px solid var(--line); color:var(--muted); font-size:.9rem; }
footer a{ color:var(--muted); }