:root{
  --bg: #0b0e17;
  --card:#121523;
  --text:#e6e8ee;
  --muted:#a7adba;
  --brand:#5E0BED;
  --link:#61dafb;
  --border:#1f2430;
  --primary:#1e3a8a;
  --secondary:#5E0BED;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1040px;margin:0 auto;padding:24px}
.nav{position:sticky;top:0;background:rgba(11,14,23,0.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);z-index:999}
.nav .container{display:flex;align-items:center;gap:16px}
.brand{font-weight:800;letter-spacing:.2px;color:#e6e8ee}
.navlinks{display:flex;flex-wrap:wrap;gap:12px;margin-left:auto}
.navlinks a{padding:8px 12px;border-radius:12px;border:1px solid transparent}
.navlinks a.active,.navlinks a:hover{border-color:var(--border);background:#0e1220}
.hero{display:grid;gap:14px;padding:56px 0}
.hero h1{font-size:40px;line-height:1.1;margin:0}
.hero p{color:var(--muted);max-width:70ch}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(94,11,237,.15);color:#5E0BED;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.btn{display:inline-block;padding:10px 14px;border-radius:12px;background:var(--brand);color:#fff;font-weight:700}
.grid{display:grid;gap:16px}
.cards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:#121523;border:1px solid var(--border);border-radius:16px;padding:16px}
.card h3{margin:6px 0 8px}
.section{margin:32px 0}
.section h2{margin:0 0 8px}
.muted{color:var(--muted)}
.footer{border-top:1px solid var(--border);padding:24px 0;margin-top:40px;color:var(--muted);font-size:14px}
figure{margin:0}
img.responsive{max-width:100%;height:auto;border-radius:12px;border:1px solid var(--border)}
.list{display:grid;gap:8px}
.kicker{font-size:12px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}
.post-meta{font-size:14px;color:var(--muted)}
blockquote{border-left:3px solid var(--brand);margin:8px 0;padding:8px 12px;color:var(--muted);background:#10141b;border-radius:8px}
input,textarea{width:100%;padding:10px;border-radius:10px;border:1px solid var(--border);background:#0d1016;color:var(--text)}
label{font-size:14px;color:var(--muted)}
form .row{display:grid;gap:12px;margin:12px 0}
hr.sep{border:0;border-top:1px solid var(--border);margin:12px 0}
@media (max-width:720px){.hero h1{font-size:32px}}
/* Apps page tweaks */
.app-thumb { aspect-ratio: 16 / 9; object-fit: cover; }