/* Floating glass navigation, with a touch-friendly disclosure menu. */
html { scroll-padding-top:112px; }
#nav {
  top:max(20px, env(safe-area-inset-top));
  left:50%; right:auto;
  transform:translateX(-50%);
  width:calc(100% - 48px); max-width:1200px;
  min-height:76px; padding:12px 26px;
  gap:24px;
  border:1px solid rgba(179,203,244,.17);
  border-radius:999px;
  background:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 40px rgba(0,0,0,.2);
  transition:background .3s,border-color .3s,box-shadow .3s;
}
#nav::before {
  content:''; position:absolute; inset:0; z-index:-1;
  border-radius:inherit; pointer-events:none;
  background:linear-gradient(115deg,rgba(18,43,82,.52),rgba(8,13,25,.65) 60%);
  backdrop-filter:blur(24px) saturate(145%);
  -webkit-backdrop-filter:blur(24px) saturate(145%);
}
#nav.solid {
  background:transparent;
  border:1px solid rgba(179,203,244,.21);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 14px 42px rgba(0,0,0,.26);
}
#nav.solid::before { background:linear-gradient(115deg,rgba(19,37,67,.72),rgba(8,13,25,.78) 65%); }
#nav .nav-logo { flex:0 0 auto; display:flex; align-items:center; min-height:44px; font-size:16px; white-space:nowrap; }
#nav .nav-logo span {
  filter:drop-shadow(0 0 5px rgba(76,132,235,.2));
}
#nav .nav-links { display:flex; align-items:center; gap:32px; }
#nav .nav-links > a { display:flex; align-items:center; min-height:44px; color:rgba(242,237,230,.78); }
#nav .nav-links > a:hover { color:#fff; }
#nav .nav-side { gap:12px; }
#nav .lang-switch { background:rgba(8,14,27,.24); backdrop-filter:none; -webkit-backdrop-filter:none; }
#nav .lang-btn { min-width:40px; min-height:36px; padding:8px 10px; font-size:10px; }
.nav-menu-toggle { display:none; }
#nav .mobile-language { display:none; }
#nav :is(a,button):focus-visible { outline:2px solid #9ac5ff; outline-offset:4px; border-radius:6px; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  #nav::before, #nav.solid::before { background:rgba(12,21,38,.96); }
}
@media(max-width:900px) {
  #nav {
    top:max(14px, env(safe-area-inset-top));
    width:calc(100% - 32px); max-width:680px;
    min-height:68px; padding:10px 18px 10px 22px; gap:12px;
  }
  #nav .nav-logo { font-size:clamp(13px,3.7vw,19px); }
  #nav .nav-side { margin-left:auto; }
  #nav .nav-side > .lang-switch { display:none; }
  .nav-menu-toggle {
    appearance:none; display:flex; flex-direction:column; justify-content:center; align-items:center;
    gap:6px; width:44px; height:44px; padding:8px; flex-shrink:0;
    color:var(--cream); border:0; background:transparent; border-radius:50%;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .nav-menu-toggle span { display:block; width:24px; height:2px; border-radius:2px; background:currentColor; transition:transform .22s,opacity .18s; }
  .nav-menu-toggle[aria-expanded=true] span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
  .nav-menu-toggle[aria-expanded=true] span:nth-child(2) { opacity:0; }
  .nav-menu-toggle[aria-expanded=true] span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }
  #nav .nav-links {
    position:absolute; left:0; right:0; top:calc(100% + 10px);
    display:flex; flex-direction:column; align-items:stretch; gap:4px;
    padding:16px; border-radius:26px; border:1px solid rgba(179,203,244,.17);
    background:rgba(11,19,35,.94);
    backdrop-filter:blur(26px) saturate(140%);
    -webkit-backdrop-filter:blur(26px) saturate(140%);
    box-shadow:0 16px 48px rgba(0,0,0,.32);
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px);
    transition:opacity .2s,transform .2s,visibility .2s;
    max-height:calc(100dvh - 112px); overflow-y:auto;
  }
  #nav.menu-open .nav-links { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
  #nav .nav-links > a { min-height:48px; padding:12px 16px; border-radius:14px; font-size:15px; }
  #nav .nav-links > a:hover { background:rgba(120,169,240,.1); }
  #nav .mobile-language { display:flex; align-self:flex-start; margin:10px 0 0 12px; }
  #nav .mobile-language .lang-btn { min-width:48px; min-height:44px; }
}
@media(max-width:360px) {
  #nav { width:calc(100% - 24px); padding-left:18px; padding-right:12px; min-height:64px; }
  #nav .nav-logo { font-size:13px; }
}
/* The full header folds into a clear Menu button in the same top position. */
#nav[data-scroll-dock] {
  --nav-edge:max(20px, env(safe-area-inset-top));
  top:var(--nav-edge);
  transition:background .3s,border-color .3s,box-shadow .3s;
}
#nav[data-scroll-dock] > * { transition:opacity .16s ease; }
#nav[data-scroll-dock].is-morphing { overflow:hidden; transition:none; pointer-events:none; }
#nav[data-scroll-dock].is-morphing > * { opacity:0; }
#nav[data-scroll-dock].is-docked {
  width:168px; min-height:48px; padding:0; gap:0;
  transform:translateX(-50%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 22px rgba(0,0,0,.24);
}
#nav[data-scroll-dock].is-docked::before { background:rgba(11,19,35,.96); }
#nav[data-scroll-dock].is-docked:not(.is-morphing) > :not(.dock-compass) { display:none; }
.dock-compass { display:none; position:absolute; top:0; left:50%; width:166px; height:46px; transform:translateX(-50%); }
#nav.is-docked .dock-compass,
#nav.is-morphing .dock-compass { display:block; }
#nav .compass-toggle {
  appearance:none; position:relative; display:flex; align-items:center; justify-content:center; gap:14px;
  width:166px; height:46px; padding:0 18px; border:0; border-radius:999px;
  background:transparent; color:#e6edfc; cursor:pointer;
}
.compass-caption { font:400 13px var(--heading-font); letter-spacing:0; white-space:nowrap; }
.compact-brand-accent { background-image:var(--metal-sheen-soft),var(--accent-gradient-text); background-blend-mode:screen,normal; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.compact-progress-track { position:absolute; left:18px; right:18px; bottom:-7px; height:2px; border-radius:2px; background:rgba(107,147,208,.18); overflow:hidden; pointer-events:none; }
.compact-progress { display:block; width:100%; height:100%; background:#fff; border-radius:inherit; transform:scaleX(0); transform-origin:left; }
#nav .compass-toggle:hover { color:#fff; }
#nav .compass-toggle:focus-visible { border-radius:999px; }
.compass-menu {
  position:absolute; left:50%; top:calc(100% + 20px); width:252px; max-width:calc(100vw - 24px);
  display:flex; flex-direction:column; gap:4px; padding:10px;
  border:1px solid rgba(179,203,244,.2); border-radius:22px;
  background:rgba(11,19,35,.97); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:0 10px 30px rgba(0,0,0,.3);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translate(-50%,-8px) scale(.97); transform-origin:50% 0;
  transition:opacity .2s,transform .3s cubic-bezier(.2,.65,.2,1),visibility .2s;
}
.compass-open .compass-menu { opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0) scale(1); }
#nav .compass-menu > a {
  display:flex; align-items:center; justify-content:flex-start; gap:14px;
  width:100%; min-height:46px; padding:12px 14px; border-radius:12px;
  color:#e6edfc; text-decoration:none; font:13px 'DM Sans',sans-serif;
  transition:background .2s;
}
#nav .compass-menu > a:hover { background:rgba(120,169,240,.1); }
.compass-menu > a > [aria-hidden] { font-size:9px; color:#7799ce; }
#nav .compass-languages { display:flex; align-self:center; margin:8px auto 2px; background:rgba(255,255,255,.025); }
#nav .compass-languages .lang-btn { width:44px; height:44px; min-width:44px; min-height:44px; }
html.nav-is-docked { scroll-padding-top:92px; scroll-padding-bottom:24px; }
@media(max-width:900px) {
  #nav[data-scroll-dock] { --nav-edge:max(14px, env(safe-area-inset-top)); }
}
@media(prefers-reduced-motion:reduce) {
  #nav:not([data-scroll-dock="animated"]),
  #nav:not([data-scroll-dock="animated"]) > *,
  #nav:not([data-scroll-dock="animated"])::after,
  #nav:not([data-scroll-dock="animated"]) .nav-links,
  #nav:not([data-scroll-dock="animated"]) .nav-menu-toggle span { transition:none; }
}