/* Shared site header.
   The homepage carries this design inline; every other page loads it from here
   so the floating nav island is the one header across the whole site.
   Scoped to #nav / .mnav so it never touches a page's other <nav> elements. */
:root{
  --hdr-a08:rgba(216,119,249,.08);--hdr-a10:rgba(216,119,249,.12);--hdr-a15:rgba(216,119,249,.18);
  --hdr-bdr:rgba(216,119,249,.22);--hdr-bdr-h:rgba(232,197,255,.40);
  --hdr-sh:0 4px 24px rgba(4,4,11,.34),inset 0 1px 0 rgba(255,255,255,.05);
  --hdr-bg:rgba(11,10,19,.58);--hdr-bg-s:rgba(11,10,19,.9);
  --hdr-menu:rgba(11,10,19,.98);
  --hdr-ink:rgba(4,4,11,.92);
  --hdr-glow:rgba(192,38,211,.12);
  --hdr-card:linear-gradient(145deg,rgba(240,171,252,.11),rgba(129,140,248,.06));
  --hdr-drop:0 10px 40px rgba(4,4,11,.42);--hdr-drop-s:0 6px 28px rgba(4,4,11,.55);
  --hdr-fg:#F3EEFF;--hdr-fg60:rgba(243,238,255,.64);--hdr-line:rgba(243,238,255,.09);
  --hdr-ac:#D877F9;
  --hdr-grad:linear-gradient(118deg,#F0ABFC 0%,#C026D3 32%,#818CF8 68%,#5EEAD4 100%);
  --hdr-font:Inter,system-ui,sans-serif;
}
html[data-theme=light]{
  --hdr-a08:rgba(192,38,211,.06);--hdr-a10:rgba(192,38,211,.09);--hdr-a15:rgba(192,38,211,.13);
  --hdr-bdr:rgba(192,38,211,.20);--hdr-bdr-h:rgba(147,51,234,.42);
  --hdr-sh:0 4px 24px rgba(80,30,120,.10),inset 0 1px 0 rgba(255,255,255,.7);
  --hdr-bg:rgba(255,255,255,.72);--hdr-bg-s:rgba(255,255,255,.9);
  --hdr-menu:rgba(255,255,255,.98);
  --hdr-ink:rgba(251,250,255,.95);
  --hdr-glow:rgba(192,38,211,.10);
  --hdr-card:linear-gradient(145deg,rgba(240,171,252,.14),rgba(129,140,248,.09));
  --hdr-drop:0 10px 40px rgba(80,30,120,.12);--hdr-drop-s:0 6px 28px rgba(80,30,120,.16);
  --hdr-fg:#1C1430;--hdr-fg60:rgba(28,20,48,.66);--hdr-line:rgba(28,20,48,.12);
  --hdr-ac:#C026D3;
  --hdr-grad:linear-gradient(118deg,#C026D3 0%,#A21CAF 30%,#7C3AED 62%,#0D9488 100%);
}

/* NAV — floating island */
#nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);width:min(1140px,calc(100vw - 28px));z-index:900;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 14px;border-radius:999px;background:var(--hdr-bg);backdrop-filter:blur(20px) saturate(1.25);border:1px solid var(--hdr-bdr);box-shadow:var(--hdr-sh),var(--hdr-drop);transition:top .4s cubic-bezier(.4,0,.2,1),background .4s,box-shadow .4s,border-color .4s,padding .4s;font-family:var(--hdr-font)}
#nav.s{top:10px;background:var(--hdr-bg-s);border-color:var(--hdr-bdr-h);box-shadow:var(--hdr-sh),var(--hdr-drop-s);padding:6px 10px 6px 14px}
#nav.nav-open{z-index:960}
/* the island floats over the page, so the flow needs its height back */
#nav-spacer{height:88px}

#nav .logo{text-decoration:none;display:flex;align-items:center;gap:10px;flex-shrink:0;z-index:2}
#nav .logo-icon{width:36px;height:36px;overflow:hidden;border-radius:11px;flex-shrink:0;border:1px solid var(--hdr-bdr);background:var(--hdr-card);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
#nav .logo-icon img{width:100%;height:100%;object-fit:contain;display:block}
#nav .logo-text{font-family:var(--hdr-font);font-size:1.22rem;font-weight:600;color:var(--hdr-fg);letter-spacing:-.01em}
#nav .logo-text em{font-style:italic;background:var(--hdr-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
#nav .nl{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:4px;list-style:none;margin:0;padding:4px;border-radius:999px;background:var(--hdr-a08);border:1px solid rgba(243,238,255,.04)}
#nav .nl a{font-family:var(--hdr-font);font-size:.73rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--hdr-fg60);text-decoration:none;transition:all .25s;padding:8px 14px;border-radius:999px;white-space:nowrap;display:block}
#nav .nl a:hover{color:var(--hdr-fg);background:var(--hdr-a15)}
#nav .nl a[aria-current=page]{color:var(--hdr-fg);background:var(--hdr-a15)}
#nav .nbtn,.mnav .nbtn{font-family:var(--hdr-font);font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--hdr-grad);text-decoration:none;padding:9px 18px;border-radius:999px;transition:transform .25s,box-shadow .25s,opacity .25s;box-shadow:0 4px 18px var(--hdr-glow);flex-shrink:0;white-space:nowrap}
#nav .nbtn:hover,.mnav .nbtn:hover{opacity:.92;transform:translateY(-1px);box-shadow:0 6px 22px var(--hdr-glow)}
.mnav .bwa{font-family:var(--hdr-font);font-size:.77rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#25D366;text-decoration:none;padding:13px 20px;border:1px solid rgba(37,211,102,.22);display:inline-flex;align-items:center;gap:8px;transition:all .3s}
.mnav .bwa:hover{border-color:rgba(37,211,102,.5)}

#nav .lang-sw{position:relative;display:inline-block;margin-inline-start:auto;flex-shrink:0;z-index:2;border:0;padding:0}
#nav .lang-sw summary{list-style:none;font-family:var(--hdr-font);font-size:.73rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--hdr-fg);padding:8px 14px;border:1px solid var(--hdr-bdr);border-radius:999px;cursor:pointer;display:flex;align-items:center;gap:7px;user-select:none;transition:all .25s;background:var(--hdr-a08);white-space:nowrap}
#nav .lang-sw summary::-webkit-details-marker{display:none}
#nav .lang-sw summary::after{content:'▾';font-size:.70rem;opacity:.5;margin-left:2px}
#nav .lang-sw summary:hover{background:var(--hdr-a15);border-color:var(--hdr-bdr-h)}
#nav .lang-sw[open] summary{border-color:var(--hdr-bdr-h);background:var(--hdr-a15)}
#nav .lang-menu{position:absolute;right:0;left:auto;top:calc(100% + 10px);background:var(--hdr-menu);backdrop-filter:blur(20px);border:1px solid var(--hdr-bdr);border-radius:14px;min-width:168px;padding:0;z-index:400;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--hdr-sh),0 16px 40px rgba(0,0,0,.45)}
#nav .lang-menu a{font-family:var(--hdr-font);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--hdr-fg60);padding:11px 16px;transition:all .2s;display:flex;align-items:center;gap:10px;text-decoration:none;border-bottom:1px solid var(--hdr-line)}
#nav .lang-menu a:last-child{border-bottom:none}
#nav .lang-menu a:hover{color:var(--hdr-fg);background:var(--hdr-a10)}
#nav .lang-menu .lang-active{color:var(--hdr-fg);background:var(--hdr-a08)}
html[dir=rtl] #nav .lang-menu{right:auto;left:0}

#nav .theme-tg{width:38px;height:38px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--hdr-bdr);border-radius:999px;background:var(--hdr-a08);color:var(--hdr-fg);cursor:pointer;transition:background .25s,border-color .25s,color .25s}
#nav .theme-tg:hover{background:var(--hdr-a15);border-color:var(--hdr-bdr-h);color:var(--hdr-ac)}
#nav .theme-tg svg{display:block;pointer-events:none}
#nav .theme-tg .ti-sun{display:none}
html[data-theme=light] #nav .theme-tg .ti-sun{display:block}
html[data-theme=light] #nav .theme-tg .ti-moon{display:none}

#nav .hmb{display:none;flex-direction:column;gap:4px;background:var(--hdr-a08);border:1px solid var(--hdr-bdr);border-radius:10px;cursor:pointer;padding:6px 7px;z-index:1001;position:relative;flex-shrink:0;transition:background .25s,border-color .25s}
#nav .hmb:hover{background:var(--hdr-a15);border-color:var(--hdr-bdr-h)}
#nav .hmb span{display:block;width:17px;height:1.5px;background:var(--hdr-fg);transition:all .35s ease;border-radius:2px}
#nav .hmb.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
#nav .hmb.open span:nth-child(2){opacity:0;transform:scaleX(0)}
#nav .hmb.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.mnav{position:fixed;inset:0;background:var(--hdr-ink);backdrop-filter:blur(24px);z-index:950;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:36px;opacity:0;pointer-events:none;transition:opacity .4s ease,transform .4s ease;transform:translateY(-12px);padding:0}
.mnav.open{opacity:1;pointer-events:all;transform:translateY(0)}
.mnav a{font-family:var(--hdr-font);font-size:1rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--hdr-fg60);text-decoration:none;transition:color .3s;display:flex;align-items:center;gap:12px}
.mnav a::before{content:'';width:16px;height:1px;background:var(--hdr-ac);flex-shrink:0;transition:width .3s}
.mnav a:hover{color:var(--hdr-fg)}
.mnav a:hover::before{width:28px}
.mnav .nbtn{border-radius:0;margin-top:12px;font-size:.76rem}
.mnav .nbtn::before,.mnav .bwa::before{display:none}
.mnav-cta{margin-top:16px;padding-top:28px;border-top:1px solid var(--hdr-line);width:80%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.mnav-head{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:flex-end;padding:max(14px,env(safe-area-inset-top)) 16px 0;z-index:2;pointer-events:none}
.mnav-close{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--hdr-a08);border:1px solid var(--hdr-bdr);border-radius:12px;color:var(--hdr-fg);font-size:1.5rem;line-height:1;cursor:pointer;transition:all .25s;font-family:var(--hdr-font);flex-shrink:0;pointer-events:all}
.mnav-close:hover{background:var(--hdr-a15);border-color:var(--hdr-bdr-h)}

@media(max-width:960px){
  #nav{top:10px;width:calc(100vw - 20px);padding:8px 12px;border-radius:20px}
  #nav .nl{display:none}
  #nav .hmb{display:flex}
  #nav-spacer{height:74px}
}
@media(prefers-reduced-motion:reduce){
  #nav,.mnav,#nav .hmb span{transition:none}
}