:root{
  --bg: #0b1020;
  --panel: #0f1a2b;
  --ink: #e5e7eb;
  --muted: rgba(229,231,235,.72);
  --accent: #f59e0b;
}

body{background:radial-gradient(900px 520px at 80% 0%, rgba(245,158,11,.18), transparent 60%), var(--bg); color:var(--ink);}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

.top{position:sticky; top:0; z-index:20; background:rgba(15,26,43,.84); backdrop-filter: blur(10px); border-bottom:1px solid rgba(255,255,255,.08);}
.top__row{display:flex; gap:1rem; align-items:center; padding:1rem 0; flex-wrap: wrap;}
.spacer{flex:1;}
.tagline{color:var(--muted); font-size:.9rem; max-width: 52ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.logo__link{display:inline-flex; align-items:center; gap:.6rem; color:var(--ink); text-decoration:none; font-weight:900;}
.logo__img{height:30px; width:auto; display:block;}

.tabs a{color: var(--ink) !important;}
.tabs li.is-active a{border-bottom-color: var(--accent) !important; color: var(--accent) !important;}

.grid{display:grid; grid-template-columns: 320px minmax(0,1fr); gap:1rem; padding:1.25rem 0 2rem;}
.darkbox{background:rgba(15,26,43,.70); border:1px solid rgba(255,255,255,.10); color:var(--ink);}
.darkbox a{color:#93c5fd;}

@media (max-width: 980px){
  .grid{grid-template-columns: 1fr;}
  .tagline{display:none;}
}

#footer{background:rgba(15,26,43,.84); border-top:1px solid rgba(255,255,255,.08);}
#footer .container{max-width:1100px; margin:0 auto; padding:1.2rem;}