:root{
  --bg: #070a12;
  --panel: #0b1220;
  --ink: #e5e7eb;
  --muted: rgba(229,231,235,.70);
  --accent: #60a5fa;
}

body{background:radial-gradient(900px 450px at 10% 0%, rgba(96,165,250,.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{background:rgba(11,18,32,.86); border-bottom:1px solid rgba(255,255,255,.08); backdrop-filter: blur(10px);}
.top__row{display:flex; gap:1rem; align-items:center; padding:1rem 0;}
.spacer{flex:1;}
.tagline{color:var(--muted); font-size:.9rem; max-width: 56ch; 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;}

.panes{display:grid; grid-template-columns: minmax(0,1fr) 360px; gap:1rem; padding:1.25rem 0 2rem;}
.pane--main .ui.segment{background:rgba(11,18,32,.60) !important; border-color: rgba(255,255,255,.10) !important; color: var(--ink) !important;}
.pane--side .ui.segment{background:rgba(11,18,32,.55) !important; border-color: rgba(255,255,255,.10) !important; color: var(--ink) !important;}
.muted{color:var(--muted);}

.headroom--pinned{transform:translateY(0); transition:transform .18s ease;}
.headroom--unpinned{transform:translateY(-110%); transition:transform .18s ease;}

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

#footer{background:rgba(11,18,32,.86); border-top:1px solid rgba(255,255,255,.08);}
#footer .container{max-width:1100px; margin:0 auto; padding:1.2rem;}