.site-header{
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(255,255,255,.97);
    border-bottom:1px solid #e9eef5;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px)
}

.header-inner{
    position:relative;
    display:flex;
    align-items:center;
    min-height:76px;
    gap:28px
}

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

.brand-mark{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:12px;
    color:#fff;
    background:linear-gradient(135deg,#2563eb,#4f7df3);
    font-size:14px;
    font-weight:900;
    box-shadow:0 10px 24px rgba(37,99,235,.22)
}

.brand-text{
    display:flex;
    flex-direction:column;
    line-height:1
}

.brand-text strong{
    font-size:16px;
    letter-spacing:.06em;
    text-transform:uppercase
}

.brand-text small{
    margin-top:4px;
    color:#64748b;
    font-size:9px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase
}

.main-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:26px;
    margin-left:auto
}

.main-nav>a,
.nav-dropdown__toggle{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border:0;
    padding:28px 0;
    background:none;
    text-decoration:none;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
    white-space:nowrap
}

.main-nav>a:hover,
.main-nav>a.is-active,
.nav-dropdown__toggle:hover,
.nav-dropdown__toggle.is-active{
    color:var(--blue)
}

.nav-dropdown{
    position:static
}

.nav-dropdown__chevron{
    transition:transform .2s ease
}

.nav-dropdown.is-open .nav-dropdown__chevron{
    transform:rotate(180deg)
}

.header-tools{
    display:flex;
    align-items:center;
    gap:10px
}

.lang-switch{
    display:flex;
    gap:4px;
    padding:4px;
    border:1px solid var(--line);
    border-radius:999px
}

.lang-switch a{
    display:grid;
    place-items:center;
    min-width:34px;
    height:34px;
    border-radius:999px;
    text-decoration:none;
    font-size:11px;
    font-weight:800
}

.lang-switch a.is-active{
    color:#fff;
    background:var(--blue)
}

.wcag-toggle{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    flex:0 0 44px;
    padding:0;
    border:0;
    border-radius:50%;
    color:#fff;
    background:var(--blue,#2563eb);
    cursor:pointer;
    box-shadow:0 10px 24px rgba(37,99,235,.22);
    transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease
}

.wcag-toggle:hover{
    transform:translateY(-2px);
    background:#1d4ed8;
    box-shadow:0 14px 30px rgba(37,99,235,.32)
}

.wcag-toggle:active{
    transform:translateY(0) scale(.96)
}

.wcag-toggle:focus-visible{
    outline:3px solid #93c5fd;
    outline-offset:3px
}

.wcag-toggle svg{
    display:block;
    width:25px;
    height:25px;
    fill:currentColor;
    color:#fff;
    pointer-events:none
}

.menu-toggle{
    display:none
}

.nav-mega{
    position:absolute;
    left:50%;
    top:calc(100% - 1px);
    width:min(1120px,calc(100vw - 40px));
    display:grid;
    grid-template-columns:320px minmax(0,1fr);
    gap:26px;
    padding:26px;
    border:1px solid var(--line);
    border-radius:0 0 28px 28px;
    background:#fff;
    box-shadow:0 30px 70px rgba(15,23,42,.16);
    transform:translate(-50%,-10px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:transform .2s ease,opacity .2s ease,visibility .2s ease
}

.nav-dropdown.is-open .nav-mega{
    transform:translate(-50%,0);
    opacity:1;
    visibility:visible;
    pointer-events:auto
}

.nav-mega__intro{
    padding:24px;
    border-radius:22px;
    background:linear-gradient(145deg,#0b1738,#173f96);
    color:#fff
}

.nav-mega__eyebrow{
    display:block;
    margin-bottom:12px;
    color:#93c5fd;
    font-size:11px;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase
}

.nav-mega__intro h2{
    font-size:26px;
    line-height:1.12
}

.nav-mega__intro p{
    color:#cbd5e1;
    font-size:14px
}

.nav-mega__all{
    color:#fff;
    font-weight:900;
    text-decoration:none
}

.nav-mega__grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px
}

.nav-mega__item{
    display:grid;
    grid-template-columns:48px minmax(0,1fr) 24px;
    gap:14px;
    align-items:center;
    min-height:88px;
    padding:16px;
    border:1px solid #e9eef6;
    border-radius:18px;
    background:#fff;
    text-decoration:none;
    box-shadow:0 1px 2px rgba(15,23,42,.02);
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background-color .2s ease
}

.nav-mega__item:hover{
    transform:translateY(-2px);
    border-color:rgba(37,99,235,.3);
    background:#fcfdff;
    box-shadow:0 14px 30px rgba(15,23,42,.08)
}

.nav-mega__item:focus-visible{
    outline:3px solid rgba(37,99,235,.24);
    outline-offset:2px
}

.nav-mega__icon{
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    border:1px solid #e3ebf8;
    border-radius:15px;
    color:#2563eb;
    background:linear-gradient(180deg,#f8fbff 0%,#edf4ff 100%);
    box-shadow:0 8px 20px rgba(37,99,235,.07),inset 0 1px 0 rgba(255,255,255,.95);
    transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease
}

.nav-mega__item:hover .nav-mega__icon{
    transform:translateY(-1px) scale(1.035);
    border-color:#c9d9f8;
    background:linear-gradient(180deg,#ffffff 0%,#eaf2ff 100%);
    box-shadow:0 12px 24px rgba(37,99,235,.12),inset 0 1px 0 rgba(255,255,255,1)
}

.nav-mega__icon svg{
    display:block;
    width:24px;
    height:24px;
    overflow:visible;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
    transition:transform .2s ease
}

.nav-mega__icon svg path,
.nav-mega__icon svg circle,
.nav-mega__icon svg rect,
.nav-mega__icon svg line,
.nav-mega__icon svg polyline,
.nav-mega__icon svg polygon,
.nav-mega__icon svg ellipse{
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke
}

.nav-mega__item:hover .nav-mega__icon svg{
    transform:scale(1.04)
}

.nav-mega__content strong{
    display:block;
    color:#0f172a;
    font-size:14px;
    line-height:1.25
}

.nav-mega__content small{
    display:block;
    margin-top:5px;
    color:var(--muted);
    font-size:12px;
    line-height:1.45
}

.nav-mega__arrow{
    display:grid;
    place-items:center;
    width:24px;
    height:24px;
    color:#94a3b8;
    transition:transform .2s ease,color .2s ease
}

.nav-mega__item:hover .nav-mega__arrow{
    color:var(--blue);
    transform:translateX(3px)
}

@media(max-width:1080px){
    .main-nav{
        gap:16px
    }

    .brand-text small{
        display:none
    }
}

@media(max-width:980px){
    .header-inner{
        min-height:68px
    }

    .menu-toggle{
        display:flex;
        width:44px;
        height:44px;
        margin-left:auto;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:5px;
        border:1px solid var(--line);
        border-radius:12px;
        background:#fff
    }

    .menu-toggle span{
        width:20px;
        height:2px;
        background:#0f172a
    }

    .main-nav{
        position:fixed;
        inset:68px 0 auto;
        display:none;
        max-height:calc(100vh - 68px);
        overflow:auto;
        margin:0;
        padding:18px;
        background:#fff;
        border-top:1px solid var(--line);
        box-shadow:0 24px 60px rgba(15,23,42,.12)
    }

    body.menu-open .main-nav{
        display:block
    }

    .main-nav>a,
    .nav-dropdown__toggle{
        width:100%;
        justify-content:space-between;
        padding:14px 6px
    }

    .nav-mega{
        position:static;
        width:100%;
        grid-template-columns:1fr;
        gap:14px;
        margin-top:8px;
        padding:14px;
        border-radius:20px;
        transform:none;
        display:none;
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        box-shadow:none
    }

    .nav-dropdown.is-open .nav-mega{
        display:grid;
        transform:none
    }

    .nav-mega__grid{
        grid-template-columns:1fr
    }

    .nav-mega__item{
        min-height:82px
    }

    .header-inner{
        gap:8px
    }

    .brand{
        min-width:0;
        flex:0 1 auto
    }

    .menu-toggle{
        margin-left:auto;
        flex:0 0 44px;
        order:2
    }

    .header-tools{
        display:flex;
        align-items:center;
        gap:7px;
        flex:0 0 auto;
        order:3
    }

    .header-tools .wcag-toggle{
        order:1;
        width:44px;
        height:44px;
        flex-basis:44px
    }

    .header-tools .lang-switch{
        order:2;
        gap:2px;
        padding:3px
    }

    .header-tools .lang-switch a{
        min-width:29px;
        height:34px;
        font-size:10px
    }
}

@media(max-width:640px){
    .header-inner{
        min-height:64px;
        gap:6px
    }

    .brand-text{
        display:none
    }

    .brand-mark{
        width:40px;
        height:40px;
        border-radius:11px
    }

    .menu-toggle{
        width:40px;
        height:40px;
        flex-basis:40px
    }

    .header-tools{
        gap:5px
    }

    .header-tools .wcag-toggle{
        width:40px;
        height:40px;
        flex-basis:40px
    }

    .header-tools .wcag-toggle svg{
        width:22px;
        height:22px
    }

    .header-tools .lang-switch{
        padding:2px
    }

    .header-tools .lang-switch a{
        min-width:27px;
        height:34px;
        padding:0 2px
    }

    .main-nav{
        inset:64px 0 auto;
        max-height:calc(100vh - 64px)
    }
}

@media(max-width:370px){
    .container.header-inner{
        width:min(100% - 20px,var(--container,1200px))
    }

    .header-tools .lang-switch a{
        min-width:25px;
        font-size:9px
    }
}

@media(max-width:520px){
    .nav-mega{
        padding:10px
    }

    .nav-mega__intro{
        padding:20px
    }

    .nav-mega__intro h2{
        font-size:23px
    }

    .nav-mega__item{
        grid-template-columns:44px minmax(0,1fr) 20px;
        gap:12px;
        min-height:78px;
        padding:13px
    }

    .nav-mega__icon{
        width:44px;
        height:44px;
        border-radius:13px
    }

    .nav-mega__icon svg{
        width:22px;
        height:22px
    }

    .nav-mega__content strong{
        font-size:13px
    }

    .nav-mega__content small{
        font-size:11px
    }
}

@media(prefers-reduced-motion:reduce){
    .nav-mega,
    .nav-mega__item,
    .nav-mega__icon,
    .nav-mega__icon svg,
    .nav-mega__arrow,
    .nav-dropdown__chevron,
    .wcag-toggle{
        transition:none!important
    }
}