/* =========================================================
   SIMPLVPN — GLOBAL HEADER
   Один и тот же header для всех страниц
   ========================================================= */

.site-header{
    position:sticky !important;
    top:0;
    z-index:1000;

    height:84px !important;

    background:rgba(4,8,13,.96) !important;
    border-top:3px solid rgba(255,255,255,.14);
    border-bottom:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.site-header .nav{
    width:min(calc(100% - 42px),1320px) !important;
    height:81px !important;

    margin:0 auto !important;
    padding:0 !important;

    display:grid !important;
    grid-template-columns:190px 1fr auto !important;

    align-items:center !important;
    gap:38px !important;
}

.site-header .brand{
    min-width:0;
    display:flex;
    align-items:center;
}

.site-header .brand img{
    display:block;
    width:184px !important;
    height:48px !important;

    object-fit:contain;
    object-position:left center;
}


/* NAVIGATION */

.site-header .nav-links{
    margin:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:32px !important;

    white-space:nowrap;

    color:#b8c2cc !important;

    font-size:16px !important;
    line-height:1 !important;
    font-weight:650 !important;
    letter-spacing:-.01em;
}

.site-header .nav-links a{
    position:relative;

    display:flex;
    align-items:center;

    min-height:81px;

    padding:0 !important;

    color:inherit;
    text-decoration:none;

    transition:
        color .18s ease,
        opacity .18s ease;
}

.site-header .nav-links a:hover{
    color:#fff !important;
}

.site-header .nav-links a::after{
    content:"";

    position:absolute;

    left:50%;
    right:50%;
    bottom:18px;

    height:2px;

    border-radius:4px;

    background:linear-gradient(
        90deg,
        #5b8cff,
        #76f77a
    );

    opacity:0;

    transition:
        left .18s ease,
        right .18s ease,
        opacity .18s ease;
}

.site-header .nav-links a:hover::after{
    left:0;
    right:0;
    opacity:1;
}


/* HEADER ACTIONS */

.site-header .header-actions{
    margin:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;

    gap:11px !important;
}

.site-header .button{
    height:46px !important;
    min-height:46px !important;

    padding:0 20px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    border-radius:12px !important;

    white-space:nowrap;

    font-size:14px !important;
    line-height:1 !important;
    font-weight:750 !important;

    text-decoration:none;

    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.site-header .button:hover{
    transform:translateY(-1px);
}

.site-header .button-secondary{
    min-width:101px;

    color:#eef2f6 !important;

    border:1px solid rgba(255,255,255,.11) !important;

    background:rgba(255,255,255,.035) !important;
}

.site-header .button-secondary:hover{
    border-color:rgba(255,255,255,.20) !important;
    background:rgba(255,255,255,.065) !important;
}

.site-header .button-primary{
    min-width:202px;

    color:#051008 !important;

    border:0 !important;

    background:linear-gradient(
        135deg,
        #82fa78,
        #42e583
    ) !important;

    box-shadow:0 10px 30px rgba(62,229,128,.15);
}

.site-header .button-primary:hover{
    box-shadow:0 13px 34px rgba(62,229,128,.23);
}


/* MEDIUM DESKTOP */

@media(max-width:1180px){

    .site-header .nav{
        grid-template-columns:170px 1fr auto !important;
        gap:22px !important;
    }

    .site-header .brand img{
        width:164px !important;
    }

    .site-header .nav-links{
        gap:22px !important;
        font-size:14px !important;
    }

    .site-header .button-primary{
        min-width:174px;
        padding:0 16px !important;
    }
}


/* TABLET / MOBILE */

@media(max-width:980px){

    .site-header{
        height:69px !important;
    }

    .site-header .nav{
        height:66px !important;

        display:flex !important;

        width:min(calc(100% - 28px),1320px) !important;
    }

    .site-header .brand{
        flex:1;
    }

    .site-header .brand img{
        width:158px !important;
        height:41px !important;
    }

    .site-header .nav-links{
        display:none !important;
    }

    .site-header .button-secondary{
        display:none !important;
    }

    .site-header .button-primary{
        width:auto;
        min-width:0;

        height:40px !important;
        min-height:40px !important;

        padding:0 14px !important;

        font-size:12px !important;
    }
}

@media(max-width:420px){

    .site-header .brand img{
        width:140px !important;
    }

    .site-header .button-primary{
        font-size:11px !important;
        padding:0 11px !important;
    }
}


/* =========================================================
   SIMPLVPN WORDMARK V2
   ========================================================= */

.site-header .brand{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;

    min-width:180px;
}

.site-header .brand .brand-mark{
    width:34px !important;
    height:39px !important;

    flex:0 0 34px;

    object-fit:contain;
}

.site-header .brand-wordmark{
    display:flex;
    align-items:baseline;

    white-space:nowrap;

    font-size:23px;
    line-height:1;
    font-weight:760;
    letter-spacing:-.045em;
}

.site-header .brand-simpl{
    color:var(--theme-text);
}

.site-header .brand-vpn{
    color:#5b8cff;
}


/* =========================================================
   HEADER BUTTON CONTRAST
   ========================================================= */

html[data-theme="dark"] .site-header .button-secondary{
    color:#f3f6fa !important;

    background:#0c1219 !important;

    border-color:rgba(255,255,255,.13) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);
}

html[data-theme="dark"] .site-header .button-secondary:hover{
    color:#fff !important;

    background:#121b25 !important;

    border-color:rgba(255,255,255,.21) !important;
}


html[data-theme="light"] .site-header .button-secondary{
    color:#18202c !important;

    background:#f3f5f8 !important;

    border-color:rgba(17,25,39,.14) !important;

    box-shadow:
        0 1px 2px rgba(20,31,48,.03),
        inset 0 1px 0 #fff;
}

html[data-theme="light"] .site-header .button-secondary:hover{
    color:#0c121b !important;

    background:#e8ecf2 !important;

    border-color:rgba(17,25,39,.23) !important;
}


/* =========================================================
   LIGHT HEADER
   ========================================================= */

html[data-theme="light"] .site-header{
    background:rgba(255,255,255,.96) !important;

    border-top-color:rgba(17,25,39,.13) !important;
    border-bottom-color:rgba(17,25,39,.10) !important;

    box-shadow:
        0 6px 25px rgba(25,40,60,.055) !important;
}

html[data-theme="light"] .site-header .nav-links{
    color:#5d6a7c !important;
}

html[data-theme="light"] .site-header .nav-links a:hover{
    color:#111927 !important;
}


/* =========================================================
   DARK HEADER
   ========================================================= */

html[data-theme="dark"] .site-header{
    background:rgba(4,8,13,.96) !important;
}


/* =========================================================
   RESPONSIVE WORDMARK
   ========================================================= */

@media(max-width:1180px){

    .site-header .brand{
        min-width:155px;
    }

    .site-header .brand-wordmark{
        font-size:21px;
    }

    .site-header .brand .brand-mark{
        width:31px !important;
        height:36px !important;
    }
}

@media(max-width:980px){

    .site-header .brand{
        min-width:0;
    }

    .site-header .brand-wordmark{
        font-size:21px;
    }
}

@media(max-width:420px){

    .site-header .brand-wordmark{
        font-size:19px;
    }

    .site-header .brand .brand-mark{
        width:29px !important;
        height:33px !important;
    }
}


/* =========================================================
   SIMPLVPN — MOBILE NAVIGATION
   ========================================================= */

.mobile-menu-toggle{
    display:none;

    width:42px;
    height:42px;
    flex:0 0 42px;

    padding:0;

    border:1px solid var(--theme-line);
    border-radius:11px;

    background:var(--theme-button-secondary);
    color:var(--theme-text);

    cursor:pointer;

    align-items:center;
    justify-content:center;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.mobile-menu-toggle:hover{
    background:var(--theme-button-secondary-hover);
    border-color:var(--theme-line-strong);
}

.mobile-menu-toggle-lines{
    position:relative;

    width:19px;
    height:14px;

    display:block;
}

.mobile-menu-toggle-lines::before,
.mobile-menu-toggle-lines::after,
.mobile-menu-toggle-lines span{
    content:"";

    position:absolute;
    left:0;

    width:19px;
    height:2px;

    border-radius:5px;

    background:currentColor;

    transition:
        top .2s ease,
        transform .2s ease,
        opacity .2s ease;
}

.mobile-menu-toggle-lines::before{
    top:0;
}

.mobile-menu-toggle-lines span{
    top:6px;
}

.mobile-menu-toggle-lines::after{
    top:12px;
}


/* OPEN BURGER */

.mobile-menu-toggle[aria-expanded="true"]
.mobile-menu-toggle-lines::before{
    top:6px;
    transform:rotate(45deg);
}

.mobile-menu-toggle[aria-expanded="true"]
.mobile-menu-toggle-lines span{
    opacity:0;
}

.mobile-menu-toggle[aria-expanded="true"]
.mobile-menu-toggle-lines::after{
    top:6px;
    transform:rotate(-45deg);
}


/* BACKDROP */

.mobile-menu-backdrop{
    position:fixed;
    z-index:998;

    inset:0;

    visibility:hidden;
    opacity:0;

    background:rgba(0,0,0,.48);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);

    transition:
        opacity .22s ease,
        visibility .22s ease;
}

html[data-mobile-menu="open"] .mobile-menu-backdrop{
    visibility:visible;
    opacity:1;
}


/* DRAWER */

.mobile-menu{
    position:fixed;
    z-index:999;

    top:69px;
    right:0;

    width:min(390px,calc(100vw - 24px));
    height:calc(100dvh - 69px);

    display:flex;
    flex-direction:column;

    padding:22px 18px 25px;

    overflow-y:auto;

    border-left:1px solid var(--theme-line);

    background:var(--theme-panel);

    box-shadow:
        -20px 30px 70px var(--theme-shadow);

    transform:translateX(105%);

    transition:
        transform .24s cubic-bezier(.22,.8,.25,1);
}

html[data-mobile-menu="open"] .mobile-menu{
    transform:translateX(0);
}


/* MOBILE LINKS */

.mobile-menu-nav{
    display:grid;
    gap:4px;
}

.mobile-menu-nav a{
    min-height:51px;

    padding:0 14px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    border-radius:12px;

    color:var(--theme-text-soft);

    font-size:16px;
    font-weight:650;

    transition:
        color .18s ease,
        background .18s ease;
}

.mobile-menu-nav a::after{
    content:"›";

    color:var(--theme-muted);

    font-size:22px;
    font-weight:400;
}

.mobile-menu-nav a:hover{
    color:var(--theme-text);

    background:var(--theme-button-secondary);
}


/* MOBILE DIVIDER */

.mobile-menu-divider{
    height:1px;

    margin:18px 0;

    background:var(--theme-line);
}


/* MOBILE ACTIONS */

.mobile-menu-actions{
    display:grid;
    gap:10px;
}

.mobile-menu-actions .button{
    width:100%;

    min-height:49px !important;
    height:49px !important;

    font-size:14px !important;
}


/* MOBILE FOOT */

.mobile-menu-foot{
    margin-top:auto;
    padding-top:25px;

    color:var(--theme-muted);

    font-size:11px;
    line-height:1.6;
}


/* LOCK PAGE */

html[data-mobile-menu="open"],
html[data-mobile-menu="open"] body{
    overflow:hidden;
}


/* =========================================================
   MOBILE HEADER
   ========================================================= */

@media(max-width:980px){

    .site-header .header-actions{
        gap:8px !important;
    }

    /*
     * На мобильном оставляем в обычной шапке
     * только переключатель темы и бургер.
     */

    .site-header .header-actions
    > .button{
        display:none !important;
    }

    .site-header .theme-toggle{
        display:inline-grid !important;
    }

    .mobile-menu-toggle{
        display:inline-flex;
    }
}


@media(min-width:981px){

    .mobile-menu,
    .mobile-menu-backdrop{
        display:none !important;
    }
}


@media(max-width:620px){

    .mobile-menu{
        top:69px;

        width:calc(100vw - 16px);

        padding:
            18px
            14px
            22px;
    }

    .mobile-menu-nav a{
        min-height:49px;

        font-size:15px;
    }
}


/* =========================================================
   THEME SWITCH — FINAL / ISOLATED
   Не наследует размеры CTA-кнопок
   ========================================================= */

.site-header .theme-toggle{
    box-sizing:border-box !important;

    width:46px !important;
    min-width:46px !important;
    max-width:46px !important;

    height:46px !important;
    min-height:46px !important;
    max-height:46px !important;

    flex:0 0 46px !important;

    margin:0 !important;
    padding:0 !important;

    display:grid !important;
    place-items:center !important;

    border-radius:12px !important;

    cursor:pointer !important;

    line-height:0 !important;

    overflow:hidden !important;

    appearance:none !important;
    -webkit-appearance:none !important;

    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease !important;
}


/* ICON */

.site-header .theme-toggle svg{
    display:none;

    width:20px !important;
    height:20px !important;

    min-width:20px !important;
    min-height:20px !important;

    margin:0 !important;

    stroke:currentColor;

    pointer-events:none;
}


/* DARK:
   показываем солнце — переключение в light
*/

html[data-theme="dark"]
.site-header
.theme-toggle{
    color:#eef3f8 !important;

    background:#0c131b !important;

    border:1px solid rgba(255,255,255,.13) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 5px 15px rgba(0,0,0,.12) !important;
}

html[data-theme="dark"]
.site-header
.theme-toggle:hover{
    color:#fff !important;

    background:#131d28 !important;

    border-color:rgba(255,255,255,.22) !important;

    transform:translateY(-1px);
}

html[data-theme="dark"]
.site-header
.theme-toggle
.theme-sun{
    display:block !important;
}


/* LIGHT:
   показываем луну — переключение в dark
*/

html[data-theme="light"]
.site-header
.theme-toggle{
    color:#1c2735 !important;

    background:#f3f5f8 !important;

    border:1px solid rgba(17,25,39,.13) !important;

    box-shadow:
        0 2px 8px rgba(24,39,58,.055),
        inset 0 1px 0 #fff !important;
}

html[data-theme="light"]
.site-header
.theme-toggle:hover{
    color:#0c131c !important;

    background:#e8edf3 !important;

    border-color:rgba(17,25,39,.22) !important;

    transform:translateY(-1px);
}

html[data-theme="light"]
.site-header
.theme-toggle
.theme-moon{
    display:block !important;
}


/* MOBILE */

@media(max-width:980px){

    .site-header .theme-toggle{
        width:40px !important;
        min-width:40px !important;
        max-width:40px !important;

        height:40px !important;
        min-height:40px !important;
        max-height:40px !important;

        flex-basis:40px !important;

        border-radius:10px !important;
    }

    .site-header .theme-toggle svg{
        width:18px !important;
        height:18px !important;

        min-width:18px !important;
        min-height:18px !important;
    }
}