/* =========================
   HEADER / NAV
========================= */
header.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:999;

  backdrop-filter:blur(12px);
  background:linear-gradient(to bottom,var(--navBg),rgba(11,15,20,.55));
  border-bottom:1px solid var(--navBorder);
}

.nav{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
  padding:14px 0;
}

img.logo{
  height:64px;
  width:auto;
  object-fit:contain;
  display:block;
}

nav.menu{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:18px;
}

nav.menu a{
  font-size:13px;
  padding:8px 10px;
  border-radius:10px;
}
nav.menu a:hover{background:rgba(255,255,255,.06);}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  font-size:13px;
  color:var(--navText);
  cursor:pointer;
  background:var(--navBtnBg);
  border:1px solid var(--navBtnBorder);
  transition:.12s ease;
  user-select:none;
}
.btn:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.26);}
.btn--solid{background:rgba(255,255,255,.12);}

.hamb{display:none;}

/* =========================
   RESPONSIVE (solo header)
========================= */
@media (max-width:880px){
  img.logo{height:48px;}
  .cta--desk{display:none;}

  .nav{grid-template-columns:1fr auto;}

  nav.menu{
    display:none;
    grid-column:1 / -1;
    justify-self:stretch;
    flex-direction:column;
    gap:8px;
    padding:12px 0 14px;
    margin-top:10px;
    border-top:1px solid rgba(255,255,255,.12);
  }
  nav.menu.open{display:flex;}

  nav.menu a{
    width:100%;
    padding:12px;
    border-radius:12px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.10);
  }
  nav.menu a:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);}

  .hamb{display:inline-flex;}
}