.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2rem;
  transition: background 0.4s, border-bottom 0.4s;
}
.nav.scrolled { background: rgba(3,3,3,0.9); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); }
.nav__logo {
  font-family: var(--f-display); font-size: 1.5rem; letter-spacing: 0.1em; color: var(--accent);
  position: relative;
}
.nav__logo::after {
  content: ''; position: absolute; bottom: -2px; left: 0; right: 0;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease);
}
.nav__logo:hover::after { transform: scaleX(1); }
.nav__links { display: flex; gap: 2rem; }
.nav__a {
  font-family: var(--f-mono); font-size: 0.68rem;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--dim);
  position: relative; transition: color 0.2s;
}
.nav__a::after {
  content: ''; position: absolute; bottom: -3px; left: 0;
  width: 0; height: 1px; background: var(--accent); transition: width 0.3s var(--ease);
}
.nav__a:hover { color: var(--accent); }
.nav__a:hover::after { width: 100%; }
.nav__burger { display: none; flex-direction: column; gap: 6px; padding: 6px; z-index: 1001; }
.nav__burger span { display: block; width: 22px; height: 1px; background: var(--text); transition: 0.3s var(--ease); }
.nav__panel {
  position: fixed; inset: 0; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem;
  transform: translateX(100%); transition: transform 0.5s var(--ease); z-index: 999;
}
.nav__panel.open { transform: translateX(0); }
.nav__panel-a {
  font-family: var(--f-display); font-size: clamp(3rem, 10vw, 6rem);
  letter-spacing: 0.04em; color: var(--dim); transition: color 0.2s;
}
.nav__panel-a:hover { color: var(--accent); }
.nav__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 768px) { .nav__links { display: none; } .nav__burger { display: flex; } }