:root{
  --map-grid: rgba(255,255,255,.06);
  --map-minor: rgba(255,255,255,.12);
  --map-major: rgba(255,255,255,.22);
  --route: #ffcc00;
  --route-glow: rgba(255,204,0,.65);
}

#site-navbar{
  background: linear-gradient(180deg,#083026,#061e1a);
  min-height: 84px;
}

#site-navbar > canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none; /* don’t block clicks */
}

.navbar-brand {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 1.5vw + 0.5rem, 2.25rem); /* scales with viewport */
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.15);
  transition: transform 0.2s ease, color 0.2s ease;
}

.navbar-brand:hover {
  color: #ffcc00; /* matches your route color */
  transform: scale(1.03);
}