/* ===== Desktop / default ===== */
.pz-header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,15,23,.7); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06)
}
.pz-header .nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:.7rem 0
}
.brand{
  display:flex; align-items:center; gap:.6rem
}
.brand .logo{
  width:28px; height:28px; border-radius:8px;
  background:linear-gradient(180deg,var(--accent),var(--accent2))
}
.title{ letter-spacing:.5px }
.menu{ display:flex; gap:.8rem; align-items:center }
.menu a{ opacity:.88; padding:.4rem .5rem; border-radius:8px }
.menu a.active, .menu a:hover{ opacity:1; background:rgba(255,255,255,.06) }
.burger{
  display:none; background:transparent;
  border:1px solid rgba(255,255,255,.15);
  border-radius:10px; padding:.4rem .55rem
}

/* ===== Mobile only: center brand, keep burger right ===== */
@media (max-width:840px){
  /* turn the top bar into a 3-col grid (ghost | brand | right) */
  .pz-header .nav{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
    padding:.7rem 0;
  }
  /* left ghost to balance right side without extra markup */
  .pz-header .nav::before{
    content:"";
  }
  /* center brand perfectly on mobile */
  .brand{
    grid-column:2;
    justify-self:center;
    margin:0;
    width:max-content; /* prevent stretching */
  }
  /* right cluster (if present) */
  .right{
    grid-column:3;
    justify-self:end;
    display:flex; align-items:center; gap:.5rem;
  }
  /* show burger on mobile and keep it on the right even if .right is missing */
  .burger{
    grid-column:3;
    justify-self:end;
    display:inline-grid;
  }

  /* your existing mobile menu behavior */
  .menu{
    position:fixed; inset:56px 0 auto 0;
    background:#0b0f17;
    border-bottom:1px solid rgba(255,255,255,.06);
    padding:.8rem; display:none;
  }
  .menu.open{ display:grid }
}