.header{

    position: fixed;

    inset: 24px 0 auto;

    z-index: var(--z-header);

    width: 100%;
}

.header__container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding: var(--space-16) var(--space-24);

    background: rgba(255,255,255,.15);


    backdrop-filter: blur(18px);

    border:1px solid rgba(255,255,255,.25);

    border-radius: var(--radius-xl);

    box-shadow: var(--shadow-sm);
}

.header--scrolled .header__container{
    background: rgba(255,255,255,.70);
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow-md);
}

.header__menu{

    display:flex;

    gap: var(--space-32);

    list-style:none;

}

.header__menu a{

    text-decoration:none;

    color: var(--color-title);

    transition: color var(--transition);

}

.header__menu a:hover{

    color: var(--color-primary);

}

/* ==========================================
   HAMBURGER
========================================== */

.header__toggle{

    display:none;

    width:52px;

    height:52px;

    border:none;

    background:transparent;

    cursor:pointer;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:6px;

}

.header__toggle span{

    width:26px;

    height:2px;

    background:var(--color-title);

    transition:all .35s ease;

}

@media (max-width:992px){

    .header__menu{

        display:none;

    }

    .header__actions{

        display:none;

    }

    .header__toggle{

        display:flex;

    }

}

/* ==========================================
   MOBILE MENU
========================================== */

.header__mobile{

    position:fixed;

    top:0;

    right:-100%;

    width:320px;

    max-width:85vw;

    height:100vh;

    background:#fff;

    box-shadow:-12px 0 40px rgba(0,0,0,.12);

    padding:100px 32px 40px;

    display:flex;

    flex-direction:column;

    transition:right .35s ease;

    z-index:var(--z-overlay);

}

.header__mobile.active{

    right:0;

}

.header__mobile-menu{

    list-style:none;

    display:flex;

    flex-direction:column;

    gap:24px;

    margin:0;

    padding:0;

}

.header__mobile-menu a{

    text-decoration:none;

    color:var(--color-title);

    font-size:1.1rem;

    font-weight:500;

}

.header__mobile-btn{

    margin-top:40px;

    width:100%;

    justify-content:center;

}

@media (min-width:993px){

    .header__mobile{

        display:none;

    }

}

@media (max-width:992px){

    .header__toggle{

        position:relative;

        z-index:var(--z-modal);

    }

}