.site-header{
    position:sticky;
    top:0;
    z-index:1000;
    border-bottom:1px solid #1b2d4f;
    background:var(--color-bg);
    transition:background-color .25s ease,box-shadow .25s ease;
}

.site-header.scrolled{
    background:color-mix(in srgb,var(--color-surface) 92%,transparent);
    box-shadow:0 8px 30px rgba(0,0,0,.2);
    backdrop-filter:blur(12px);
}

.site-header .container{
    width:min(100%,1100px);
    margin-inline:auto;
    padding:16px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.logo{
    display:inline-flex;
    align-items:center;
    gap:9px;
    color:#fff;
    line-height:1;
    text-decoration:none;
}

.logo img{
    width:32px;
    height:32px;
    flex:0 0 32px;
    display:block;
    object-fit:contain;
}

.logo .custom-logo-image{
    width:auto;
    max-width:210px;
    height:42px;
    flex:0 1 auto;
}

.logo-name{
    color:#fff;
    font-size:20px;
    font-weight:800;
    letter-spacing:-.4px;
}

.logo-badge{
    min-height:18px;
    padding:2px 7px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:6px;
    background:#1d4ed8;
    color:#fff;
    font-size:10px;
    font-weight:700;
    letter-spacing:.8px;
    text-transform:uppercase;
}

.main-navigation{
    display:flex;
    align-items:center;
    gap:30px;
}

.primary-menu{
    margin:0;
    padding:0;
    display:flex;
    align-items:center;
    gap:30px;
    list-style:none;
}

.main-navigation a{
    color:#fff;
    font-weight:600;
    text-decoration:none;
    transition:color .2s ease;
}

.main-navigation a:hover{
    color:#5edcff;
}

.header-start-button{
    flex:0 0 auto;
}

.menu-toggle,
.mobile-start-button{
    display:none;
}

.menu-toggle{
    width:44px;
    height:44px;
    padding:9px;
    border:1px solid #294363;
    border-radius:11px;
    background:#11223d;
    cursor:pointer;
}

.menu-toggle span{
    width:24px;
    height:2px;
    margin:5px auto;
    display:block;
    border-radius:999px;
    background:#fff;
    transition:transform .25s ease,opacity .25s ease;
}

@media(max-width:820px){
    .site-header .container{
        position:relative;
        padding-block:12px;
    }

    .logo-name{
        font-size:18px;
    }

    .logo-badge{
        padding-inline:6px;
        font-size:9px;
    }

    .menu-toggle{
        margin-left:auto;
        display:block;
    }

    .header-start-button{
        display:none;
    }

    .main-navigation{
        position:absolute;
        top:calc(100% + 10px);
        right:20px;
        left:20px;
        z-index:200;
        padding:16px;
        display:none;
        flex-direction:column;
        align-items:stretch;
        gap:4px;
        border:1px solid #294363;
        border-radius:16px;
        background:var(--color-surface);
        box-shadow:0 24px 60px rgba(0,0,0,.4);
    }

    .primary-menu{
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:4px;
    }

    .main-navigation.open{
        display:flex;
    }

    .main-navigation a{
        padding:13px 14px;
        display:block;
        border-radius:10px;
    }

    .main-navigation a:hover{
        background:#17345d;
        color:#fff;
    }

    .mobile-start-button{
        margin-top:8px;
        display:block;
        background:#356cff;
        color:#fff;
        text-align:center;
    }

    .menu-toggle.active span:nth-child(1){
        transform:translateY(7px) rotate(45deg);
    }

    .menu-toggle.active span:nth-child(2){
        opacity:0;
    }

    .menu-toggle.active span:nth-child(3){
        transform:translateY(-7px) rotate(-45deg);
    }
}