/* ===========================
   NAV — Glass, sticky, responsive, active highlight
   =========================== */

:root{
  --nav-h: 64px;
  --nav-bg: rgba(12,16,30,.42);
  --nav-border: rgba(255,255,255,.14);
  --nav-hover: rgba(255,255,255,.08);
  --nav-text: #eaf2ff;
  --nav-dim: #9fb1d6;
  --nav-accent: #44ccff;
  --nav-accent-2: #60ffa8;
}

/* Sticky bar */
.nav{
  position: sticky;
  top: 0;
  z-index: 1000; /* above WebGL canvases */
  height: var(--nav-h);
  display: grid;
  place-items: center;
  transition: transform .23s ease, background .25s ease, box-shadow .25s ease;
  background: linear-gradient(180deg, rgba(10,12,20,.55), rgba(10,12,20,.30));
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border-bottom: 1px solid var(--nav-border);
}

/* Hide on scroll down */
.nav.nav--hide{
  transform: translateY(calc(-1 * var(--nav-h)));
}

/* More solid once scrolling */
.nav.nav--scrolled{
  background: linear-gradient(180deg, rgba(10,12,20,.75), rgba(10,12,20,.40));
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Aurora line */
.nav::after{
  content:"";
  position: absolute; inset: 0 0 auto 0; height:1px;
  background: linear-gradient(90deg, transparent, var(--nav-accent), var(--nav-accent-2), transparent);
  opacity:.6; pointer-events:none;
}

.nav__inner{
  width: 100%;
  max-width: 1200px;
  padding: 0 clamp(16px, 4vw, 28px);
  display:flex; align-items:center; justify-content:space-between;
  gap: 14px;
}

.brand{
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--nav-text);
  text-decoration: none;
  font-size: 20px;
  padding: 8px 10px;
  border-radius: 10px;
}
.brand:hover{ background: var(--nav-hover); }

/* Links row */
.links{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap: 18px;
}

.links a{
  position: relative;
  display:inline-block;
  padding: 10px 12px;
  color: var(--nav-dim);
  text-decoration:none;
  font-weight: 600;
  letter-spacing: .2px;
  border-radius: 10px;
  transition: color .15s ease, background .2s ease;
}
.links a:hover{ background: var(--nav-hover); color: var(--nav-text); }

/* Active ink underline */
.links a.is-active{
  color: var(--nav-text);
}
.links a.is-active::after{
  content:"";
  position:absolute; left:12px; right:12px; bottom:6px; height:2px;
  border-radius:2px;
  background: linear-gradient(90deg, var(--nav-accent), var(--nav-accent-2));
}

/* CTA button */
.nav__btn .button{
  display:inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--nav-border);
  color: var(--nav-text);
  text-decoration: none;
  font-weight: 700;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}
.nav__btn .button:hover{
  box-shadow: 0 12px 32px rgba(68,204,255,.22);
  border-color: rgba(255,255,255,.24);
}

/* Burger */
.burger{
  display:none;
  background: transparent;
  border: 1px solid var(--nav-border);
  color: var(--nav-text);
  border-radius: 10px;
  padding: 8px 10px;
  line-height: 1;
}
.burger:focus-visible{ outline: 2px solid #7ee3ff; outline-offset: 2px; }

/* Mobile layout */
@media (max-width: 900px){
  .burger{ display:block; }
  .links{
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    display: grid;
    gap: 6px;
    background: var(--nav-bg);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    border-bottom: 1px solid var(--nav-border);
    padding: 12px;
    transform-origin: top center;
    transform: translateY(-8px) scaleY(.98);
    opacity: 0; pointer-events: none;
    transition: transform .18s ease, opacity .18s ease;
  }
  .nav.is-open .links{
    transform: translateY(0) scaleY(1);
    opacity: 1; pointer-events: auto;
  }

  .nav__btn{ order: 99; }
}

/* Scrim when menu open (JS injects .nav__scrim) */
.nav__scrim{
  position: fixed; inset: var(--nav-h) 0 0 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 999;
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
}
.nav.is-open + .nav__scrim{
  opacity: 1; pointer-events: auto;
}

/* Prevent body scroll when menu open */
.no-scroll { overflow: hidden; }