/*
  Shared site header and dropdown navigation.
  Linked after each page's inline <style>, so these rules win wherever a page
  still carries its own older nav styles. The collapse breakpoint is wider than
  the pages' original 980px because the primary nav now carries five menus.
*/
header{position:sticky;top:0;z-index:60;background:rgba(7,9,12,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--hairline);}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 32px;}
.logo{font-family:'Unbounded',sans-serif;font-weight:700;font-size:18px;display:flex;align-items:baseline;flex:none;}
.logo .dot{color:var(--neon);}
.nav-links{display:flex;align-items:center;gap:clamp(18px,2vw,28px);}
.nav-links > a,.nav-menu-toggle{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);transition:color .15s ease;white-space:nowrap;}
.nav-links > a:hover,.nav-links > a[aria-current="page"]{color:var(--neon);}
.nav-links > a.nav-cta{color:var(--white-glow);border:1px solid rgba(239,247,252,.18);border-radius:6px;padding:9px 14px;}
.nav-links > a.nav-cta:hover{border-color:var(--neon);color:var(--neon);}
.menu-btn{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:none;border:1px solid var(--hairline);border-radius:8px;color:var(--white-glow);cursor:pointer;}
.menu-btn svg{width:22px;height:22px;stroke:currentColor;}

.nav-menu{position:relative;}
.nav-menu-toggle{display:inline-flex;align-items:center;gap:7px;padding:0;background:none;border:0;cursor:pointer;}
.nav-menu-toggle:hover,.nav-menu-toggle[aria-expanded="true"],.nav-menu.is-current .nav-menu-toggle{color:var(--neon);}
.nav-menu-toggle svg{width:10px;height:10px;stroke:currentColor;transition:transform .15s ease;}
.nav-menu-toggle[aria-expanded="true"] svg{transform:rotate(180deg);}
.nav-submenu{display:none;position:absolute;top:calc(100% + 16px);left:-14px;width:320px;padding:8px;flex-direction:column;gap:2px;background:rgba(10,13,18,.98);border:1px solid rgba(239,247,252,.18);border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,.45);}
.nav-submenu.nav-submenu-end{left:auto;right:-14px;}
/* Invisible bridge so the pointer can travel from toggle to panel without closing it. */
.nav-submenu::before{content:"";position:absolute;left:0;right:0;top:-17px;height:17px;}
.nav-submenu.is-open{display:flex;}
.nav-submenu a{display:block;padding:11px 12px;border-radius:6px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--white-glow);transition:background .15s ease,color .15s ease;}
.nav-submenu a:hover{background:var(--panel-2);color:var(--neon);}
.nav-submenu a[aria-current="page"]{color:var(--neon);background:rgba(62,210,255,.06);}
.nav-submenu .sub-desc{display:block;margin-top:4px;font-family:'Inter',sans-serif;font-size:12.5px;line-height:1.45;letter-spacing:0;text-transform:none;color:var(--steel);}
.nav-submenu .sub-overview{border-bottom:1px solid var(--hairline);border-radius:6px 6px 0 0;margin-bottom:4px;padding-bottom:13px;color:var(--neon);}

@media(max-width:1240px){
  .nav{position:relative;}
  .nav-links{display:none;position:absolute;top:calc(100% + 1px);left:0;right:0;max-height:calc(100vh - 80px);overflow-y:auto;padding:18px 32px 26px;background:var(--obsidian);border-bottom:1px solid var(--hairline);flex-direction:column;align-items:flex-start;gap:18px;}
  .nav-links.is-open{display:flex;}
  .nav-links > a,.nav-menu-toggle{font-size:13px;}
  .nav-links > a{width:100%;}
  .nav-links > a.nav-cta{width:auto;}
  .menu-btn{display:inline-flex;}
  .nav-menu{width:100%;}
  .nav-submenu,.nav-submenu.nav-submenu-end{position:static;width:auto;margin-top:14px;padding:0 0 0 16px;gap:14px;background:none;border:0;border-left:1px solid rgba(239,247,252,.18);border-radius:0;box-shadow:none;}
  .nav-submenu::before{display:none;}
  .nav-submenu a,.nav-submenu .sub-overview{padding:0;margin:0;border:0;font-size:12px;color:var(--steel);}
  .nav-submenu a:hover,.nav-submenu a[aria-current="page"]{background:none;}
  .nav-submenu .sub-desc{display:none;}
}
@media(max-width:580px){
  .nav{padding:15px 20px;}
  .nav-links{padding:18px 20px 26px;}
}
@media(prefers-reduced-motion:reduce){
  .nav-menu-toggle svg,.nav-submenu a,.nav-links > a{transition:none;}
}