* { box-sizing: border-box; }
:root { color-scheme: dark; }
body {
  margin: 0; min-height: 100vh;
  font-family: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color: #e5e7eb;
  background:
    radial-gradient(circle at 18% 15%, #17335c 0, transparent 33%),
    radial-gradient(circle at 82% 72%, #123c38 0, transparent 28%),
    #080d17;
}
a { color: inherit; text-decoration: none; }
.wrap { width: min(1120px, 92%); margin: 0 auto; }
header {
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(8,13,23,.72); backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 10;
}
.navbar { min-height: 68px; display:flex; align-items:center; justify-content:space-between; gap:22px; }
.brand { font-weight: 800; letter-spacing: -.03em; font-size: 20px; }
.brand span { color:#67e8f9; }
.nav { display:flex; flex-wrap:wrap; gap:16px; color:#94a3b8; font-size:14px; }
.nav a:hover { color:#e5e7eb; }
.hero { padding: 88px 0 52px; display:grid; grid-template-columns:1.2fr .8fr; gap:52px; align-items:center; }
.badge { display:inline-block; padding:7px 13px; margin-bottom:22px; color:#67e8f9;
  background:rgba(34,211,238,.08); border:1px solid rgba(103,232,249,.25); border-radius:999px;
  font-size:12px; letter-spacing:.09em; text-transform:uppercase; }
h1 { margin:0 0 22px; font-size:clamp(42px,6vw,72px); line-height:1.0; letter-spacing:-.045em; }
h1 span { color:#67e8f9; }
.lead { color:#9ca3af; font-size:19px; line-height:1.7; max-width:760px; }
.terminal { overflow:hidden; background:rgba(5,10,18,.92); border:1px solid rgba(255,255,255,.1);
  border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.35); }
.terminal-head { height:42px; padding:0 15px; display:flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.06); }
.dot { width:10px; height:10px; border-radius:50%; background:#374151; }
.terminal-body { padding:26px; min-height:240px; font:15px/1.9 Consolas,"Liberation Mono",monospace; }
.prompt { color:#67e8f9; }.ok { color:#34d399; }.muted { color:#6b7280; }
main section { padding:34px 0; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { padding:24px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.035);
  border-radius:14px; }
.card h2,.card h3 { margin-top:0; letter-spacing:-.02em; }
.card p, .content p, .content li { color:#aab3c2; line-height:1.75; }
.card:hover { border-color:rgba(103,232,249,.3); transform:translateY(-2px); transition:.18s ease; }
.content { max-width:860px; }
.content h2 { margin-top:42px; font-size:30px; letter-spacing:-.03em; }
.content h3 { margin-top:28px; }
.content code { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08);
  padding:2px 6px; border-radius:6px; color:#dffafe; }
.pills { display:flex; flex-wrap:wrap; gap:9px; margin-top:24px; }
.pill { padding:8px 12px; border-radius:8px; font-size:13px; color:#cbd5e1;
  border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); }
footer { margin-top:60px; border-top:1px solid rgba(255,255,255,.07); color:#64748b; font-size:13px; }
.footer { padding:28px 0 44px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
@media (max-width:850px) {
  .hero { grid-template-columns:1fr; padding-top:58px; }
  .terminal { display:none; }
  .grid { grid-template-columns:1fr; }
  .nav { display:none; }
}