.site-header{position:sticky; top:0; z-index:50; background:rgba(15,17,19,.6); backdrop-filter:saturate(140%) blur(6px); border-bottom:1px solid var(--line)}
.site-header .nav{display:flex; align-items:center; gap:16px; height:62px}
.brand img{display:block}


/* drawer */
.menu-toggle{display:none; width:40px; height:40px; border:1px solid var(--line); background:#15181c; border-radius:10px}
.menu-icon{width:18px; height:2px; background:var(--fg); position:relative; display:block; margin:0 auto}
.menu-icon::before,.menu-icon::after{content:""; position:absolute; left:0; right:0; height:2px; background:var(--fg)}
.menu-icon::before{top:-6px}
.menu-icon::after{top:6px}


.nav-drawer ul{display:flex; gap:20px; align-items:center; list-style:none; margin:0; padding:0}
.nav-drawer a{display:block; padding:8px 8px; color:var(--fg); text-decoration:none; border-radius:10px}
.nav-drawer a:hover{background:#171b20}
.nav-cta .btn{padding:.6rem .9rem}


.nav-overlay{position:fixed; inset:0; background:rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:.25s}


@media (max-width: 980px){
.menu-toggle{display:inline-grid; place-items:center}
.nav-drawer{position:fixed; inset:0 0 0 auto; width:min(78vw,340px); background:#0f1215; border-left:1px solid var(--line); translate:100% 0; transition:translate .25s ease; padding:20px}
.nav-drawer ul{flex-direction:column; align-items:stretch}
.nav-drawer .nav-cta .btn{width:100%}
html.nav-open .nav-drawer{translate:0 0}
html.nav-open .nav-overlay{opacity:1; pointer-events:auto}
}