/* ---------- Top Navigation (sticky, glassy) ---------- */
:root{
  --nav-btn-width: 140px;
  --nav-btn-height: 40px;
}
.site-header{
  position:fixed; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.7rem 1rem;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.12);
  z-index:9000;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.brand{
  color:#fff; text-decoration:none; font-weight:700; letter-spacing:.2px;
}
.nav{ display:flex; align-items:center; gap:.5rem; }
.nav a{
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; text-decoration:none; font-weight:600;
  padding:0 .9rem;
  border-radius:9999px;
  background:rgba(255,255,255,.08);
  border:1.5px solid rgba(255,255,255,.12);
  transition:background .2s, border-color .2s, transform .2s;
  min-width:var(--nav-btn-width);
  height:var(--nav-btn-height);
}
.nav a:hover{
  background:#ff0066;
  border-color:#ff0066;
  transform:translateY(-1px);
}
.nav-toggle{
  display:none;
  align-items:center; justify-content:center;
  background:rgba(255,255,255,.1);
  border:2px solid #ff0066; color:#fff;
  border-radius:9999px; padding:.45rem .75rem; font-weight:700;
}

/* Body offset for pages without a .hero section */
.with-fixed-header{ padding-top:64px; }

/* Mobile Menu */
@media (max-width: 640px){
  .site-header{ padding:.6rem .8rem; }
  .nav-toggle{ display:inline-flex; }
  .nav{
    position:absolute; top:100%; left:0; right:0;
    display:none; flex-direction:column; gap:.5rem;
    padding:.6rem 1rem 1rem;
    background:rgba(0,0,0,.90);
    backdrop-filter:blur(6px);
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  .nav.open{ display:flex; }
  .nav a{
    min-width:0; width:100%;
    height:44px;
  }
}