.header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:1000;

    padding:24px 0;

    background:rgba(248,250,252,.35);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    transition:
        background .35s ease,
        padding .35s ease,
        backdrop-filter .35s ease,
        border-color .35s ease;

}

.header.header--scrolled{

    padding:16px 0;

    background:rgba(248,250,252,.82);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    border-bottom:1px solid rgba(15,23,42,.06);

}

.header-wrapper{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

/* LOGO */

.logo{

    display:flex;

    align-items:center;

}

.logo img{

    display:block;

    width:190px;

    height:auto;

}

/* NAVIGATION */

.nav-menu{

    display:flex;

    align-items:center;

    gap:48px;

}

.nav-menu a{

    position:relative;

    font-size:.95rem;

    font-weight:600;

    color:var(--text);

    transition:color .3s ease;

}

.nav-menu a::after{

    content:"";

    position:absolute;

    left:2px;
    right:2px;

    bottom:-8px;

    height:2px;

    background:var(--accent);

    border-radius:999px;

    transform:scaleX(0);

    transform-origin:center;

    transition:transform .3s ease;

}

.nav-menu a:hover{

    color:var(--accent);

}

.nav-menu a:hover::after{

    transform:scaleX(1);

}

/* CTA */

.header-cta{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 24px;

    border-radius:999px;

    background:var(--primary);

    color:var(--white);

    font-size:.95rem;

    font-weight:700;

    transition:
        background-color .3s ease,
        transform .3s ease;

}

.header-cta:hover{

    background:var(--accent);

    transform:translateY(-2px);

}

/* MOBILE BUTTON */

.menu-toggle{

    display:none;

}