/* Original site's layout stays in styles.css; only the navigation is adapted. */
.glass-scene { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; display: none; }
.nav-glass-render { position: fixed; z-index: 5; pointer-events: none; display: none; }
.glass-webgl .nav-glass-render { display: block; }
.glass-webgl .glass-scene { display: block; }
.glass-webgl .sky-layer { visibility: hidden; }
.site-header {
  width: min(1184px, calc(100% - 48px)); margin: 20px auto 0; top: 20px;
  border: 0; border-radius: 26px; background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.nav-glass-surface {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: rgba(15,23,36,.25); border: 0;
  backdrop-filter: blur(14px) saturate(115%); -webkit-backdrop-filter: blur(14px) saturate(115%);
  box-shadow: 0 12px 36px rgba(0,0,0,.18);
}
.nav-glass-surface::after { content: none; }
/* In the real renderer, the shader supplies the material. No CSS frame on top. */
.glass-webgl .nav-glass-surface { visibility: hidden; }
.site-header .nav-wrap { position: relative; width: 100%; min-height: 84px; padding: 0 30px; gap: 20px; }
.site-header .brand { min-width: 0; min-height: 44px; font-size: 1.02rem; font-weight: 500; letter-spacing: .1em; }
.site-header .brand-logo { filter: drop-shadow(0 0 9px rgba(166,202,255,.24)); }
.site-header .brand-text { text-shadow: 0 1px 10px rgba(0,0,0,.35); }
.site-header .btn-outline { flex-shrink: 0; min-height: 44px; border-color: rgba(215,230,255,.25); background: rgba(213,230,255,.045); }
.site-header .btn-outline:hover { background-color: rgba(194,218,255,.12); border-color: rgba(230,239,255,.55); }
.site-header a:focus-visible { outline: 2px solid #d5bd90; outline-offset: 5px; border-radius: 14px; }
#home, #contact { scroll-margin-top: 122px; }
@media (max-width:640px) {
  .site-header { width: calc(100% - 24px); top: 12px; margin-top: 12px; border-radius: 22px; }
  .site-header .nav-wrap { min-height: 76px; padding: 0 14px; gap: 10px; }
  .site-header .brand { gap: 9px; flex: 1; }
  .site-header .brand-text { white-space: normal; font-size: .75rem; letter-spacing: .04em; max-width: none; line-height: 1.5; text-wrap: balance; }
  .site-header .brand-logo { width: 28px; height: 28px; }
  .site-header .btn-outline { min-width: 76px; min-height: 44px; font-size: .65rem; }
  #home, #contact { scroll-margin-top: 105px; }
}
@media (prefers-reduced-motion:reduce) {
  .sky-layer, .reveal, .site-header .btn { transition: none; }
  .star, .comet, .comet::before { animation: none; }
  .reveal { opacity: 1; transform: none; }
}