:root{
  --bg:#0f172a; --card:#111827; --muted:#9ca3af; --accent:#22c55e; --danger:#ef4444; --text:#e5e7eb; --border:#1f2937;
  /* Navbar height incl. padding; used by pages to place fixed stacks under nav */
  --nav-offset: 88px;     /* default / larger screens */
  /* Height of fixed stack below nav (toolbar + category pills) for page padding */
  --stack-offset: 148px;  /* tune per page if design changes */
}
*{box-sizing:border-box}
html, body{
  margin:0;
  background:linear-gradient(180deg,#0b1220,#0f172a);
  background-color:#0b1220; /* fallback to avoid white gaps */
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif;
  color:var(--text)
}
.html, html{
  min-height:100vh;
  min-height:100dvh;
}
.nav{ position:sticky; top:0; z-index:50; padding:10px 10px; padding-top:calc(10px + env(safe-area-inset-top)) }
.nav .container{
  max-width:1100px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 14px;
  backdrop-filter:blur(10px);
  background:linear-gradient(180deg, rgba(24,18,12,.85), rgba(15,23,42,.80));
  border:1px solid rgba(255,255,255,.06);
  border-radius:22px;
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
}
.nav .group{ display:flex; align-items:center; gap:6px }
.nav .brand{ font-weight:900; font-size:18px; letter-spacing:.3px; }
.nav .brand a{ color:var(--text); text-decoration:none }
.logo{ font-weight:900; font-size:18px; letter-spacing:.3px; color:var(--text); text-align:center; margin: 8px 0 12px; }
.nav a{ display:inline-block; text-decoration:none; font-weight:700; padding:8px 12px; border-radius:999px; color:var(--text); border:1px solid transparent; transition:all .18s ease }
.nav a:not(.primary){ font-weight:800 }
.nav a:hover{ background:rgba(11,16,32,.85); border-color:#1f2937; transform:translateY(-1px) }
.nav a:active{ transform:translateY(0) }
.nav .cta{ background:linear-gradient(180deg,#fb923c,#f97316); color:#2b1004; border-color:#7c2d12; box-shadow:inset 0 -2px 0 rgba(0,0,0,.15) }
.nav .primary{ background:linear-gradient(180deg,#22c55e,#16a34a); color:#052e16; border-color:#14532d; box-shadow:inset 0 -2px 0 rgba(0,0,0,.15) }
.wrap{max-width:980px;margin:24px auto;padding:0 16px}
.card{background:rgba(17,24,39,.85);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:0 8px 30px rgba(0,0,0,.25)}

@media (max-width: 560px){
  .nav{ padding:8px 8px; padding-top:calc(8px + env(safe-area-inset-top)) }
  .nav .container{ padding:8px 10px; gap:8px; border-radius:16px }
  .nav .brand{ display:none }
  .nav .group{ gap:4px }
  .nav a{ padding:6px 10px; font-weight:600 }
  .nav a:not(.primary){ font-weight:700 }
  :root{ --nav-offset: 76px; --stack-offset: 140px; }
}