:root{
  --brand: #3b82f6;
  --brand-600:#2563eb;
  --header-h: 64px;
}
html { scroll-padding-top: var(--header-h); }
* { box-sizing: border-box; }

.site-header{
  position: sticky; top: 0; z-index: 1000;
  background: var(--brand);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .06);
}
.container.nav-wrap{
  max-width: 1200px; margin: 0 auto; padding: 10px 16px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  min-height: var(--header-h);
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-logo{ width:28px; height:28px; object-fit:contain; }
.brand-name{ color:#fff; font-weight:700; letter-spacing:.4px; }

.main-nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:28px; justify-content:center; }
.main-nav a{
  color:#fff; text-decoration:none; font-weight:600;
  padding:10px 6px; border-radius:10px; transition: background .2s, color .2s;
}
.main-nav a:hover{ background: rgba(255,255,255,.18); color:#fff; }

.nav-toggle{ display:none; }
.hamburger{ display:none; width:40px; height:40px; border-radius:10px; cursor:pointer; align-items:center; justify-content:center; }
.hamburger span{ display:block; width:22px; height:2px; background:#fff; margin:4px 0; transition: transform .25s, opacity .25s; }

@media (max-width: 900px){
  .container.nav-wrap{ grid-template-columns: auto auto 40px; }
  .main-nav{
    position: absolute; left:0; right:0; top:100%;
    background: var(--brand);
    border-top: 1px solid rgba(255,255,255,.15);
    transform: translateY(-10px);
    opacity:0; visibility:hidden;
    transition: opacity .2s, transform .2s, visibility .2s;
  }
  .main-nav ul{ display:block; padding:12px 14px; }
  .main-nav li+li{ margin-top:6px; }
  .main-nav a{ display:block; padding:12px 10px; border-radius:8px; }
  .hamburger{ display:flex; }
  .nav-toggle:checked ~ .hamburger span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  .nav-toggle:checked ~ .hamburger span:nth-child(2){ opacity:0; }
  .nav-toggle:checked ~ .hamburger span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
  .nav-toggle:checked ~ .main-nav{ opacity:1; visibility:visible; transform: translateY(0); }
}
@media (min-width: 901px){
  .hamburger{ display:none; }
}