:root{
  --bg1:#0b1020; --bg2:#121829; --card:rgba(255,255,255,.07);
  --text:#e5e7eb; --muted:#94a3b8; --violet:#8b5cf6; --cyan:#22d3ee;
}
*{box-sizing:border-box}
body{margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--text);
  background:linear-gradient(180deg,var(--bg1),var(--bg2));}
.container{max-width:1120px;margin:auto;padding:24px}
.nav{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:12px 0}
.logo{font-weight:800;font-size:20px;letter-spacing:.3px}
.nav a{color:var(--muted);text-decoration:none;margin-left:18px}
.btn{background:linear-gradient(90deg,var(--violet),var(--cyan)); color:#0a0a0a;
  padding:12px 16px;border-radius:12px;font-weight:700;border:none;cursor:pointer}
.hero{padding:60px 0 30px; text-align:center}
.h1{font-size:42px; line-height:1.1; margin:0 0 12px}
.h2{color:var(--muted);max-width:760px;margin:0 auto 22px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--card); backdrop-filter: blur(14px); border:1px solid rgba(255,255,255,.08);
  border-radius:16px;padding:18px}
.section{margin:42px 0}
footer{color:var(--muted);font-size:14px;padding:40px 0;border-top:1px solid rgba(255,255,255,.08)}
.muted{color:var(--muted)}
.post{max-width:900px;margin:auto;padding:24px}
.post h1{margin-top:16px}
a{color:var(--cyan);}
small.badge{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);padding:2px 8px;border-radius:999px;color:#e5e7eb}