:root{--bg:#0d0d0f;--fg:#f5f5f7;--muted:#a8a8b3;--brand:#ffb400;--brand2:#ff6a00;}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--fg);line-height:1.6}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:24px}
.site-header{display:flex;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid #1e1e24;background:rgba(255,255,255,0.02);backdrop-filter:blur(6px);position:sticky;top:0;z-index:10}
.logo{display:flex;align-items:center;gap:12px}
.logo img{height:40px;width:auto;border-radius:8px}
.nav{margin-left:auto;display:flex;gap:14px;flex-wrap:wrap}
.nav a{padding:8px 12px;border-radius:10px;background:#14141a}
.nav a:hover{background:#1a1a22}
.hero{padding:56px 0}
.hero h1{font-size:40px;line-height:1.1;margin:0 0 10px}
.hero p{color:var(--muted);max-width:740px}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:#14141a;border:1px solid #22222a;border-radius:16px;padding:18px}
.card h3{margin:0 0 8px}
footer{border-top:1px solid #1e1e24;color:var(--muted);padding:24px;margin-top:48px}
form{display:grid;gap:12px}
input,textarea,select{background:#0f0f14;color:var(--fg);border:1px solid #2a2a33;border-radius:12px;padding:10px}
button{background:linear-gradient(90deg,var(--brand),var(--brand2));border:0;color:#1b1306;padding:10px 14px;border-radius:12px;font-weight:700;cursor:pointer}
small.muted{color:var(--muted)}
.breadcrumbs{color:var(--muted);font-size:14px;margin-bottom:10px}
pre.code{background:#0f0f14;padding:14px;border-radius:12px;overflow:auto;border:1px solid #22222a}