/* nav.css */
.nav {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1rem, 2vw, 1.6rem) clamp(1.4rem, 4vw, 3.5rem);
  transition: background 0.4s, backdrop-filter 0.4s, transform 0.5s var(--ease-out-expo);
}
.nav.is-scrolled {
  background: linear-gradient(180deg, rgba(0, 3, 8, 0.7), transparent);
  backdrop-filter: blur(8px);
}
.nav.is-hidden { transform: translateY(-110%); }

.nav__brand-mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: 0.04em;
  background: linear-gradient(120deg, var(--white), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nav__links {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nav__links a {
  position: relative;
  color: rgba(255, 255, 255, 0.65);
  padding-bottom: 4px;
  transition: color 0.3s;
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  transition: width 0.35s var(--ease-out-expo);
}
.nav__links a:hover, .nav__links a.is-active { color: var(--white); }
.nav__links a:hover::after, .nav__links a.is-active::after { width: 100%; }

@media (max-width: 720px) {
  .nav__links { display: none; }
}