:root{--bg1:#0a0f1a;--bg2:#0b1220;--fg:#e6edf3;--muted:#9aa4b2}
html,body{margin:0;padding:0;background:linear-gradient(180deg,var(--bg1),var(--bg2));color:var(--fg);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
.container{max-width:1080px;margin:0 auto;padding:24px}
nav{position:sticky;top:0;backdrop-filter:blur(8px);background:rgba(10,15,26,.7);border-bottom:1px solid #1f2937}
nav .inner{display:flex;align-items:center;justify-content:space-between;padding:12px 24px}
a{color:var(--fg);text-decoration:none}a:hover{text-decoration:underline}
.btn{display:inline-block;padding:10px 14px;border:1px solid #334155;border-radius:12px;background:rgba(255,255,255,.06)}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.card{border:1px solid #1f2937;border-radius:16px;background:rgba(12,18,32,.6);padding:16px}
.card h3{margin:8px 0}.hero{position:relative;padding:72px 0 48px;text-align:center;overflow:hidden}
.hero h1{font-size:56px;margin:0;letter-spacing:.04em}.hero p{color:var(--muted);max-width:680px;margin:12px auto 0;font-size:18px}
.hero::before{content:"";position:absolute;inset:-10%;background:radial-gradient(ellipse at 50% 10%,rgba(160,200,255,.20),rgba(0,0,0,.65) 55%),radial-gradient(circle at 50% 110%,rgba(180,210,255,.15),transparent 40%);mix-blend-mode:screen;pointer-events:none}
footer{border-top:1px solid #1f2937;color:var(--muted)}pre{white-space:pre-wrap}.badge{font-size:12px;color:#cbd5e1;border:1px solid #334155;padding:2px 8px;border-radius:999px}.small{color:var(--muted);font-size:14px}