/* Floating glass nav */
.nav {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 40px;
  height: 52px;
  padding: 0 6px 0 18px;
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--hairline);
}
.nav a { border-radius: 4px; }
.nav__mark { display: block; flex: none; }
.nav__mark img { display: block; width: auto; height: 38px; transition: filter var(--fade-tone) linear; }
.is-light .nav__mark img { filter: invert(1); }
.nav__links { display: flex; gap: 28px; font-size: 14px; }
.nav__links a {
  color: var(--text-secondary);
  transition: color var(--dur-micro) var(--ease-glide);
}
.nav__links a:hover { color: var(--text-primary); }
.nav .nav__cta {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-glide), border-color var(--dur-micro) var(--ease-glide);
}
.nav__cta:hover { background-color: var(--surface-3); border-color: var(--hairline-strong); }
.nav__cta:focus-visible { outline-offset: 3px; }