.nav{
  position: sticky;
  top: 0;
  z-index: 999;
  background: #1a2938;
  border-bottom: var(--border);
  box-shadow: var(--shadow-md);
  will-change: transform;
  transition: transform .28s ease;
}
.nav.nav--hidden{ transform: translateY(-110%); }

.nav-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color: #fff;
  font-weight: 900;
  letter-spacing:.2px;
  white-space:nowrap;
}
.brand-badge{
  width:36px;height:36px;border-radius:12px;
  background: #494949;
  display:grid;place-items:center;
  color: var(--color-white);
  font-weight: 950;
  font-size: 16px;
}

/* Theme toggle */
.theme-toggle{
  background: #1a2938;
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.theme-toggle:hover{ background: #494949; }
@media (max-width: 768px){
  .theme-toggle{ width: 40px; height: 40px; border-radius: 12px; }
}