.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;color:var(--ink);flex-shrink:0}
.logo-lockup{display:block;height:38px;width:auto}
.logo-mark{width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,var(--primary),#b04bff);display:grid;place-items:center;color:#fff;overflow:hidden;flex-shrink:0}
.logo-mark svg{width:70%;height:70%;display:block}
.logo-mark svg path{fill:#fff}

/* Fly-in side nav — hidden behind the burger toggle at all viewport sizes.
   Full-width on mobile, narrow side panel (20vw) from 768px upwards.
   z-index sits above the header (50) so the open menu covers it fully. */
.nav{position:fixed;top:0;right:0;bottom:0;width:100%;background:#fff;display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:64px 24px 32px;transform:translateX(100%);transition:transform .25s ease;overflow-y:auto;z-index:60}
.nav.open{transform:translateX(0)}
.nav a{width:100%;padding:18px 0;border-bottom:1px solid var(--border);font-size:18px;font-weight:600;color:var(--text);transition:color .2s;white-space:nowrap}
.nav a:hover,.nav a.active{color:var(--primary)}
.nav-close{position:absolute;top:14px;right:14px;background:none;border:none;cursor:pointer;padding:8px;color:var(--ink);line-height:0}
.nav-close svg{width:28px;height:28px}
@media(min-width:768px){.nav{width:20vw;border-left:1px solid var(--border)}}

.header-cta{display:flex;align-items:center;gap:16px}
.lang-switch,.login-link{display:none}
.lang-switch{align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--muted);letter-spacing:.02em}
.lang-switch .active{color:var(--ink)}
.lang-switch a{color:var(--muted);transition:color .2s}
.lang-switch a:hover{color:var(--primary)}
@media(min-width:768px){.lang-switch{display:inline-flex}}
.menu-toggle{display:inline-flex;background:none;border:none;cursor:pointer;padding:8px;color:var(--ink)}
.menu-toggle svg{width:28px;height:28px}

@media(max-width:480px){
  .header-inner{height:64px}
  .logo{font-size:18px}
  .logo-mark{width:28px;height:28px}
  .logo-lockup{height:33px}
  .header-cta .btn{padding:8px 14px;font-size:13px}
}