/* Shared header for the public pages (homepage, terms, privacy).
   Each page defines --colbo-blue, --colbo-blue-2, --text, --muted, --fur-white and --shadow in :root. */
.header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(1.2) blur(10px);
  background:linear-gradient(180deg,rgba(9,12,22,.9),rgba(9,12,22,.6));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{
  max-width:1200px;margin:0 auto;
  padding:14px 20px;display:flex;align-items:center;gap:18px;justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.3px}
.brand img{width:36px;height:36px;border-radius:12px}
.links{display:flex;gap:28px;align-items:center}
.links a{color:var(--muted);font-weight:600}
.links a:hover{color:var(--fur-white)}
.cta{
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,var(--colbo-blue),var(--colbo-blue-2));
  padding:10px 18px;border-radius:12px;font-weight:700;box-shadow:var(--shadow);
  transition:transform .18s ease;
}
.links a.cta{color:var(--text)}   /* same white as the hero button, not the muted link colour */
.cta:hover{transform:translateY(-2px)}

@media (max-width:720px){
  .nav-features{display:none}
  .nav-support{display:none}   /* Support stays in the footer; the header keeps Dashboard and Add to Discord */
  .nav{gap:10px}
  .links{gap:16px}
  .cta{padding:9px 13px;white-space:nowrap}
  .links .cta i,.links .cta svg{display:none}   /* room for the brand name beside the header buttons */
}