.site-header{
position:sticky;
top:0;
z-index:1000;
backdrop-filter:blur(16px);
background:rgba(255,255,255,0.08);
border-bottom:1.5px solid var(--color-border-glass);
}

.header-inner{
display:flex;
align-items:center;
justify-content:space-between;
min-height:72px;
}

.brand-link{
display:flex;
align-items:center;
gap:12px;
text-decoration:none;
}

.brand-mark{
height:48px;
width:auto;
}

.brand-text{
font-family:var(--font-heading);
font-size:1.4rem;
font-weight:700;
color:var(--color-text-on-gradient);
}

.nav{
display:flex;
align-items:center;
gap:24px;
}

.nav-list{
display:flex;
gap:20px;
}

.nav-link{
color:var(--color-text-on-gradient);
text-decoration:none;
font-weight:500;
}

.nav-link:hover{
color:#fff;
}

.nav-cta{
display:flex;
}

.nav-toggle{
display:none;
gap:5px;
padding:10px;
}

.nav-toggle span{
display:block;
width:22px;
height:2px;
background:#fff;
}

@media(max-width:900px){
.nav{
position:fixed;
top:72px;
right:0;
bottom:0;
left:0;
width:100%;
max-width:none;
height:calc(100vh - 72px);
height:calc(100dvh - 72px);
flex-direction:column;
align-items:flex-start;
padding:32px max(24px,calc((100% - var(--container-max))/2));
background:linear-gradient(145deg,#665ee9 0%,#8b65ec 58%,#7b5ce0 100%);
backdrop-filter:none;
clip-path:inset(0 0 0 100%);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:clip-path .3s ease,opacity .2s ease,visibility 0s linear .3s;
overflow-y:auto;
overscroll-behavior:contain;
}

.nav.open{
clip-path:inset(0);
opacity:1;
visibility:visible;
pointer-events:auto;
transition:clip-path .3s ease,opacity .2s ease;
}

.nav-list{
flex-direction:column;
width:100%;
}

.nav-link{
font-size:1.2rem;
display:block;
padding-block:8px;
}

.nav-toggle{
display:flex;
position:relative;
z-index:1;
width:44px;
height:44px;
align-items:center;
justify-content:center;
border-radius:12px;
}

.nav-toggle span{transition:transform .25s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

body.nav-open{overflow:hidden}
}