.header{
    position:relative;
    z-index:1000;
    width:100%;
    box-sizing:border-box;
    background:var(--color-background);
    border-bottom:1px solid var(--color-border);
    font-family:var(--font-family-base);
}

.header *,
.header *::before,
.header *::after{
    box-sizing:border-box;
}

.header__container{
    width:100%;
    max-width:var(--container);
    min-height:78px;
    margin-inline:auto;
    padding-inline:20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
}

.header__logo{
    display:inline-flex;
    align-items:center;
    flex-shrink:0;
    margin:0;
    color:var(--color-text-strong);
    font-family:var(--font-family-base);
    font-size:34px;
    font-weight:800;
    line-height:1;
    letter-spacing:0;
    white-space:nowrap;
    text-decoration:none;
}

.header__logo-x{color:var(--color-primary)}
.header__logo-text{color:var(--color-text-strong)}

.header__nav{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:40px;
    min-width:0;
}

.header__menu{
    display:flex;
    align-items:center;
    gap:40px;
    margin:0;
    padding:0;
    list-style:none;
}

.header__link{
    position:relative;
    display:inline-flex;
    align-items:center;
    margin:0;
    padding:0;
    color:var(--color-text);
    font-family:var(--font-family-base);
    font-size:15px;
    font-weight:600;
    line-height:1.4;
    letter-spacing:0;
    white-space:nowrap;
    text-decoration:none;
    transition:color .3s;
}

.header__link::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:0;
    height:2px;
    background:var(--color-primary);
    transition:width .3s;
}

.header__link:hover{color:var(--color-primary)}
.header__link:hover::after{width:100%}

.header__cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:46px;
    min-height:46px;
    flex-shrink:0;
    margin:0;
    padding:0 28px;
    border:0;
    border-radius:12px;
    background:var(--color-primary);
    color:var(--color-text-strong);
    font-family:var(--font-family-base);
    font-size:15px;
    font-weight:700;
    line-height:1;
    letter-spacing:0;
    white-space:nowrap;
}

.header__cta:hover{background:var(--color-primary-hover)}

.header__toggle,
.header__mobile-contact{
    display:none;
}

.menu-lock{overflow:hidden}

@media (max-width:1024px){
    .header__container{
        min-height:72px;
        gap:20px;
    }

    .header__toggle{
        display:flex;
        width:48px;
        height:48px;
        flex:0 0 48px;
        align-items:center;
        justify-content:center;
        margin:0;
        padding:0;
        border:1px solid var(--color-border);
        border-radius:12px;
        background:var(--color-background);
        color:var(--color-text-strong);
    }

    .header__toggle img{
        display:block;
        width:24px;
        height:24px;
        max-width:none;
    }

    .header__nav{
        position:absolute;
        top:100%;
        left:0;
        right:0;
        display:none;
        max-height:calc(100vh - 72px);
        padding:22px max(20px,calc((100% - var(--container))/2 + 20px)) 28px;
        overflow-y:auto;
        background:var(--color-background);
        border-top:1px solid var(--color-border);
        border-bottom:1px solid var(--color-border);
        box-shadow:0 18px 35px var(--color-shadow);
    }

    .header.menu-open .header__nav{display:block}

    .header__menu{
        flex-direction:column;
        align-items:stretch;
        gap:0;
    }

    .header__link,
    .header__mobile-contact{
        display:flex;
        min-height:48px;
        align-items:center;
        padding:10px 0;
    }

    .header__link::after{display:none}

    .header__cta{
        display:flex;
        width:100%;
        margin-top:16px;
    }

    .header__mobile-contact{
        justify-content:center;
        margin-top:8px;
        color:var(--color-text);
        font-family:var(--font-family-base);
        font-size:15px;
        font-weight:700;
        line-height:1.4;
        text-decoration:none;
    }
}

@media (max-width:480px){
    .header__container{padding-inline:16px}
    .header__logo{font-size:30px}
}

@media (prefers-reduced-motion:reduce){
    .header *,
    .header *::before,
    .header *::after{
        transition-duration:.01ms!important;
    }
}