/* =========================================================
   SIMPLVPN — GLOBAL THEMES
   Dark + Light
   ========================================================= */


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

:root,
html[data-theme="dark"]{
    color-scheme:dark;

    --theme-bg:#05090e;
    --theme-bg-soft:#08121b;

    --theme-panel:#0a1620;
    --theme-panel-2:#0d1b27;
    --theme-panel-3:#101e2a;

    --theme-text:#f5f7fb;
    --theme-text-soft:#c6d0d8;
    --theme-muted:#91a0ad;
    --theme-muted-2:#71818e;

    --theme-line:rgba(255,255,255,.09);
    --theme-line-strong:rgba(255,255,255,.16);

    --theme-header:rgba(4,8,13,.96);

    --theme-shadow:rgba(0,0,0,.36);

    --theme-blue:#5b8cff;
    --theme-blue-soft:#88aaff;

    --theme-green:#74f879;
    --theme-green-2:#3fe582;

    --theme-success-bg:rgba(116,248,121,.055);
    --theme-success-line:rgba(116,248,121,.22);

    --theme-warning-bg:rgba(255,178,64,.035);
    --theme-warning-line:rgba(255,190,80,.16);

    --theme-input:#091923;

    --theme-secondary:rgba(255,255,255,.035);
    --theme-secondary-hover:rgba(255,255,255,.07);

    --theme-chip:rgba(255,255,255,.025);
}


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

html[data-theme="light"]{
    color-scheme:light;

    --theme-bg:#f3f6fa;
    --theme-bg-soft:#edf2f7;

    --theme-panel:#ffffff;
    --theme-panel-2:#f7f9fc;
    --theme-panel-3:#eef3f8;

    --theme-text:#111927;
    --theme-text-soft:#344154;
    --theme-muted:#5d6d80;
    --theme-muted-2:#7b8999;

    --theme-line:rgba(17,25,39,.115);
    --theme-line-strong:rgba(17,25,39,.19);

    --theme-header:rgba(255,255,255,.96);

    --theme-shadow:rgba(28,42,61,.12);

    --theme-blue:#426fe6;
    --theme-blue-soft:#6188ef;

    --theme-green:#32c969;
    --theme-green-2:#2dbd62;

    --theme-success-bg:#f1fff4;
    --theme-success-line:rgba(50,201,105,.22);

    --theme-warning-bg:#fffaf0;
    --theme-warning-line:rgba(172,116,12,.20);

    --theme-input:#ffffff;

    --theme-secondary:#f1f4f8;
    --theme-secondary-hover:#e7ecf2;

    --theme-chip:#f5f7fa;
}


/* =========================================================
   GLOBAL
   ========================================================= */

body{
    color:var(--theme-text) !important;

    background:
        radial-gradient(
            circle at 83% 3%,
            color-mix(in srgb,var(--theme-blue) 12%,transparent),
            transparent 34rem
        ),
        radial-gradient(
            circle at 8% 25%,
            color-mix(in srgb,var(--theme-green) 5%,transparent),
            transparent 30rem
        ),
        var(--theme-bg) !important;
}

body::before{
    opacity:.16;
}

html[data-theme="light"] body::before{
    opacity:.05;
}


/* smooth transition only after JS initializes */
html.theme-ready body,
html.theme-ready .site-header,
html.theme-ready .feature-strip,
html.theme-ready .feature-item,
html.theme-ready .price-card,
html.theme-ready .step,
html.theme-ready .device,
html.theme-ready details,
html.theme-ready .faq-item,
html.theme-ready .quick,
html.theme-ready .diagnostic,
html.theme-ready .check,
html.theme-ready .searchbox,
html.theme-ready .payment-card,
html.theme-ready .about-card,
html.theme-ready .about-point,
html.theme-ready .cta-box,
html.theme-ready .support-box,
html.theme-ready .mobile-menu{
    transition:
        background .24s ease,
        background-color .24s ease,
        color .24s ease,
        border-color .24s ease,
        box-shadow .24s ease;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
summary,
.faq-title,
.price,
.period,
.quick strong,
.step h3,
.feature-item strong{
    color:var(--theme-text);
}

.hero-copy,
.section-head p,
.section-title p,
.step p,
.feature-item span,
.per-month,
.payment-card p,
.about-copy p,
.about-point span,
.quick span,
.faq-body,
details p,
.support-box p,
.footer-meta,
.count,
.popular,
.trial-note{
    color:var(--theme-muted) !important;
}


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

.site-header,
.header{
    background:var(--theme-header) !important;
    border-color:var(--theme-line) !important;
}

html[data-theme="light"] .site-header{
    box-shadow:0 5px 24px rgba(26,42,63,.055);
}

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

.site-header .brand-vpn{
    color:var(--theme-blue) !important;
}

.site-header .nav-links{
    color:var(--theme-muted) !important;
}

.site-header .nav-links a:hover{
    color:var(--theme-text) !important;
}


/* =========================================================
   THEME TOGGLE
   ========================================================= */

.theme-toggle,
.mobile-menu-toggle{
    color:var(--theme-text) !important;
    background:var(--theme-secondary) !important;
    border-color:var(--theme-line) !important;
}

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


/* =========================================================
   BUTTONS
   ========================================================= */

.button-secondary,
.btn:not(.btn-primary){
    color:var(--theme-text) !important;
    background:var(--theme-secondary) !important;
    border-color:var(--theme-line) !important;
}

.button-secondary:hover,
.btn:not(.btn-primary):hover{
    background:var(--theme-secondary-hover) !important;
    border-color:var(--theme-line-strong) !important;
}

.button-primary,
.btn-primary{
    color:#061009 !important;

    background:
        linear-gradient(
            135deg,
            #7df678,
            #3fe582
        ) !important;
}


/* =========================================================
   HERO
   ========================================================= */

html[data-theme="dark"] .gradient-word{
    background:
        linear-gradient(
            90deg,
            #f5f7fb 0%,
            #e8edff 35%,
            #78a0ff 57%,
            #617fff 100%
        ) !important;

    -webkit-background-clip:text !important;
    background-clip:text !important;
    color:transparent !important;
}

html[data-theme="light"] .gradient-word{
    background:
        linear-gradient(
            90deg,
            #111927 0%,
            #111927 37%,
            #4f78e6 55%,
            #6385ef 100%
        ) !important;

    -webkit-background-clip:text !important;
    background-clip:text !important;
    color:transparent !important;
}

.mascot-card{
    border-color:var(--theme-line) !important;

    background:
        linear-gradient(
            145deg,
            var(--theme-panel),
            var(--theme-panel-2)
        ) !important;

    box-shadow:
        0 28px 70px var(--theme-shadow) !important;
}

html[data-theme="light"] .mascot-card img{
    box-shadow:
        0 14px 38px rgba(28,42,61,.10);
}

.status-chip{
    border-color:var(--theme-success-line) !important;
}

html[data-theme="dark"] .status-chip{
    color:#e5ffe8 !important;
    background:rgba(3,12,9,.83) !important;
}

html[data-theme="light"] .status-chip{
    color:#165228 !important;
    background:#f3fff5 !important;
}


/* =========================================================
   GENERAL CARDS / SURFACES
   ========================================================= */

.feature-strip,
.price-card,
.step,
.device,
details,
.payment-card,
.about-card,
.about-point,
.quick,
.diagnostic,
.check,
.faq-item{
    border-color:var(--theme-line) !important;
}

.feature-strip,
.price-card,
.step,
.device,
details,
.payment-card,
.about-card,
.about-point,
.quick,
.diagnostic,
.check,
.faq-item{
    background:var(--theme-panel) !important;
}

html[data-theme="light"] .feature-strip,
html[data-theme="light"] .price-card,
html[data-theme="light"] .step,
html[data-theme="light"] .payment-card,
html[data-theme="light"] .about-card,
html[data-theme="light"] .quick,
html[data-theme="light"] .diagnostic{
    box-shadow:
        0 18px 48px rgba(28,42,61,.075);
}


/* =========================================================
   FEATURE STRIP
   ========================================================= */

.feature-item + .feature-item{
    border-color:var(--theme-line) !important;
}

.feature-icon{
    border-color:
        color-mix(
            in srgb,
            var(--theme-green) 22%,
            transparent
        ) !important;

    background:
        color-mix(
            in srgb,
            var(--theme-green) 7%,
            transparent
        ) !important;
}


/* =========================================================
   PRICING
   ========================================================= */

.price-card:hover{
    border-color:
        color-mix(
            in srgb,
            var(--theme-blue) 38%,
            transparent
        ) !important;
}

.price-card.highlight{
    border-color:
        color-mix(
            in srgb,
            var(--theme-green) 58%,
            transparent
        ) !important;
}

.badge{
    color:#061009 !important;
    background:var(--theme-green) !important;
}

.price-features li{
    color:var(--theme-text-soft) !important;
}

.price-features li::before{
    color:var(--theme-green) !important;
}

.saving{
    color:var(--theme-green) !important;
}


/* =========================================================
   STEPS
   ========================================================= */

.step-number{
    color:white !important;

    background:
        linear-gradient(
            135deg,
            var(--theme-blue),
            #77a0ff
        ) !important;
}


/* =========================================================
   DEVICES
   ========================================================= */

.device{
    color:var(--theme-text-soft) !important;
}

.device-icon{
    color:var(--theme-blue) !important;
}


/* =========================================================
   PAYMENT
   ========================================================= */

.payment-icon{
    color:var(--theme-blue) !important;

    border-color:
        color-mix(
            in srgb,
            var(--theme-blue) 22%,
            transparent
        ) !important;

    background:
        color-mix(
            in srgb,
            var(--theme-blue) 8%,
            transparent
        ) !important;
}

.payment-note{
    color:var(--theme-muted) !important;
    background:var(--theme-success-bg) !important;
    border-color:var(--theme-success-line) !important;
}

.payment-note strong{
    color:var(--theme-text) !important;
}


/* =========================================================
   ABOUT
   ========================================================= */

.about-check{
    color:var(--theme-green) !important;

    background:
        color-mix(
            in srgb,
            var(--theme-green) 10%,
            transparent
        ) !important;
}

.about-stat{
    border-color:var(--theme-line) !important;
}

.about-stat span{
    color:var(--theme-muted) !important;
}

.about-stat strong{
    color:var(--theme-text) !important;
}


/* =========================================================
   CTA
   ========================================================= */

.cta-box,
.support-box{
    border-color:
        color-mix(
            in srgb,
            var(--theme-blue) 25%,
            transparent
        ) !important;

    background:
        radial-gradient(
            circle at 85% 20%,
            color-mix(
                in srgb,
                var(--theme-blue) 12%,
                transparent
            ),
            transparent 22rem
        ),
        var(--theme-panel) !important;
}


/* =========================================================
   FAQ MAIN PAGE + FAQ DATABASE
   ========================================================= */

.faq-body{
    color:var(--theme-muted) !important;
}

.faq-body strong,
.faq-body b{
    color:var(--theme-text) !important;
}

.faq-body a{
    color:var(--theme-blue) !important;
}

.faq-title,
.faq-item summary{
    color:var(--theme-text) !important;
}

.tag{
    color:var(--theme-blue-soft) !important;

    background:
        color-mix(
            in srgb,
            var(--theme-blue) 10%,
            transparent
        ) !important;
}

html[data-theme="light"] .tag{
    background:#edf3ff !important;
    border:1px solid rgba(66,111,230,.08);
}

.chevron{
    color:var(--theme-muted) !important;
}

.faq-item[open] .chevron{
    color:var(--theme-green) !important;
}


/* =========================================================
   FAQ SEARCH
   ========================================================= */

.searchbox{
    color:var(--theme-text) !important;
    background:var(--theme-input) !important;
    border-color:
        color-mix(
            in srgb,
            var(--theme-blue) 28%,
            transparent
        ) !important;

    box-shadow:
        0 18px 48px var(--theme-shadow);
}

.searchbox input{
    color:var(--theme-text) !important;
}

.searchbox input::placeholder{
    color:var(--theme-muted-2) !important;
}

.search-icon{
    color:var(--theme-blue) !important;
}

.clear-search{
    color:var(--theme-muted) !important;
}


/* =========================================================
   FAQ CATEGORIES
   ========================================================= */

.category,
.popular button{
    color:var(--theme-muted) !important;
    background:var(--theme-chip) !important;
    border-color:var(--theme-line) !important;
}

.category:hover,
.popular button:hover{
    color:var(--theme-text) !important;
    border-color:var(--theme-line-strong) !important;
}

.category.active{
    color:#061009 !important;
    background:var(--theme-green) !important;
    border-color:var(--theme-green) !important;
}


/* =========================================================
   DIAGNOSTICS
   ========================================================= */

.diag-count{
    color:var(--theme-green) !important;
}

.progress{
    background:
        color-mix(
            in srgb,
            var(--theme-text) 7%,
            transparent
        ) !important;
}

.progress span{
    background:
        linear-gradient(
            90deg,
            var(--theme-blue),
            var(--theme-green)
        ) !important;
}

.check strong{
    color:var(--theme-text) !important;
}

.check span{
    color:var(--theme-muted) !important;
}

.reset{
    color:var(--theme-muted) !important;
}

.reset:hover{
    color:var(--theme-text) !important;
}


/* =========================================================
   WARNING
   ========================================================= */

.warning{
    color:var(--theme-muted) !important;
    background:var(--theme-warning-bg) !important;
    border-color:var(--theme-warning-line) !important;
}

html[data-theme="dark"] .warning strong{
    color:#ffd28a !important;
}

html[data-theme="light"] .warning strong{
    color:#986500 !important;
}


/* =========================================================
   MOBILE MENU
   ========================================================= */

.mobile-menu{
    color:var(--theme-text) !important;
    background:var(--theme-panel) !important;
    border-color:var(--theme-line) !important;
}

.mobile-menu-nav a{
    color:var(--theme-text-soft) !important;
}

.mobile-menu-nav a:hover{
    color:var(--theme-text) !important;
    background:var(--theme-secondary) !important;
}

.mobile-menu-divider{
    background:var(--theme-line) !important;
}

.mobile-menu-foot{
    color:var(--theme-muted) !important;
}

html[data-theme="light"] .mobile-menu-backdrop{
    background:rgba(28,42,61,.26);
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer,
footer{
    border-color:var(--theme-line) !important;
}

.footer-links{
    color:var(--theme-muted) !important;
}

.footer-links a:hover{
    color:var(--theme-text) !important;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

html[data-theme="dark"]{
    scrollbar-color:#263746 #071018;
}

html[data-theme="light"]{
    scrollbar-color:#bac4cf #edf2f7;
}


/* =========================================================
   SELECTION
   ========================================================= */

::selection{
    color:#071009;
    background:#74f879;
}


/* =========================================================
   SIMPLVPN — LIGHT THEME V2
   Холодная светлая tech-тема
   ========================================================= */

html[data-theme="light"]{
    --theme-bg:#edf3f8;
    --theme-bg-soft:#f5f8fb;

    --theme-panel:rgba(255,255,255,.82);
    --theme-panel-2:#f8fbfd;
    --theme-panel-3:#eef4f9;

    --theme-text:#111827;
    --theme-text-soft:#344154;
    --theme-muted:#607086;
    --theme-muted-2:#7f8da0;

    --theme-line:rgba(31,55,82,.105);
    --theme-line-strong:rgba(31,55,82,.18);

    --theme-header:rgba(248,251,253,.92);

    --theme-shadow:rgba(48,74,105,.12);

    --theme-blue:#4778eb;
    --theme-blue-soft:#658cf0;

    --theme-green:#37cd70;
    --theme-green-2:#2fc164;

    --theme-success-bg:rgba(239,255,243,.86);
    --theme-success-line:rgba(55,205,112,.22);

    --theme-warning-bg:rgba(255,250,239,.88);
    --theme-warning-line:rgba(172,116,12,.18);

    --theme-input:rgba(255,255,255,.88);

    --theme-secondary:rgba(255,255,255,.72);
    --theme-secondary-hover:rgba(243,247,251,.94);

    --theme-chip:rgba(255,255,255,.66);
}


/* =========================================================
   LIGHT PAGE BACKGROUND
   ========================================================= */

html[data-theme="light"] body{
    background:
        radial-gradient(
            circle at 82% 7%,
            rgba(71,120,235,.15),
            transparent 33rem
        ),

        radial-gradient(
            circle at 12% 27%,
            rgba(55,205,112,.07),
            transparent 29rem
        ),

        radial-gradient(
            circle at 55% 72%,
            rgba(103,146,225,.055),
            transparent 34rem
        ),

        linear-gradient(
            180deg,
            #edf3f8 0%,
            #f6f9fc 38%,
            #eef4f9 70%,
            #eaf1f7 100%
        ) !important;

    background-attachment:fixed;
}


/* =========================================================
   VERY SUBTLE TECH GRID
   ========================================================= */

html[data-theme="light"] body::before{
    content:"";

    position:fixed;
    inset:0;

    pointer-events:none;

    opacity:.42;

    background-image:
        linear-gradient(
            rgba(55,80,110,.022) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(55,80,110,.022) 1px,
            transparent 1px
        );

    background-size:42px 42px;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.68),
            transparent 82%
        );

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.68),
            transparent 82%
        );
}


/* =========================================================
   LIGHT HEADER — GLASS
   ========================================================= */

html[data-theme="light"] .site-header{
    background:rgba(248,251,253,.88) !important;

    border-top-color:rgba(31,55,82,.10) !important;
    border-bottom-color:rgba(31,55,82,.10) !important;

    box-shadow:
        0 8px 28px rgba(45,68,97,.065) !important;

    backdrop-filter:blur(18px) saturate(125%) !important;
    -webkit-backdrop-filter:blur(18px) saturate(125%) !important;
}


/* =========================================================
   LIGHT GLASS SURFACES
   ========================================================= */

html[data-theme="light"] .feature-strip,
html[data-theme="light"] .price-card,
html[data-theme="light"] .step,
html[data-theme="light"] .device,
html[data-theme="light"] details,
html[data-theme="light"] .payment-card,
html[data-theme="light"] .about-card,
html[data-theme="light"] .about-point,
html[data-theme="light"] .quick,
html[data-theme="light"] .diagnostic,
html[data-theme="light"] .check,
html[data-theme="light"] .faq-item,
html[data-theme="light"] .searchbox,
html[data-theme="light"] .cta-box,
html[data-theme="light"] .support-box{
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.88),
            rgba(244,248,252,.74)
        ) !important;

    border-color:rgba(38,68,100,.105) !important;

    box-shadow:
        0 18px 46px rgba(46,72,102,.085),
        inset 0 1px 0 rgba(255,255,255,.9) !important;

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


/* =========================================================
   LIGHT HERO AREA
   ========================================================= */

html[data-theme="light"] .hero{
    position:relative;
}

html[data-theme="light"] .hero::before{
    content:"";

    position:absolute;
    inset:-60px 0 0;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 75% 22%,
            rgba(71,120,235,.095),
            transparent 30rem
        ),

        radial-gradient(
            circle at 22% 35%,
            rgba(55,205,112,.045),
            transparent 24rem
        );
}

html[data-theme="light"] .hero > .container{
    position:relative;
    z-index:1;
}


/* =========================================================
   LIGHT MASCOT CARD
   ========================================================= */

html[data-theme="light"] .mascot-card{
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.94),
            rgba(237,244,250,.82)
        ) !important;

    border-color:rgba(38,68,100,.11) !important;

    box-shadow:
        0 28px 70px rgba(46,72,102,.13),
        inset 0 1px 0 rgba(255,255,255,.95) !important;
}

html[data-theme="light"] .hero-visual::before{
    background:
        radial-gradient(
            circle,
            rgba(71,120,235,.20),
            rgba(55,205,112,.055) 44%,
            transparent 72%
        ) !important;

    filter:blur(44px);
}


/* =========================================================
   LIGHT SECTION RHYTHM
   ========================================================= */

html[data-theme="light"] .pricing{
    background:
        linear-gradient(
            180deg,
            rgba(225,235,245,.28),
            rgba(238,244,249,.72),
            rgba(225,235,245,.30)
        ) !important;
}

html[data-theme="light"] .devices{
    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(255,255,255,.18),
            transparent
        );
}

html[data-theme="light"] #payment{
    position:relative;
}

html[data-theme="light"] #payment::before{
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 12% 30%,
            rgba(55,205,112,.05),
            transparent 26rem
        );
}

html[data-theme="light"] #payment > .container{
    position:relative;
    z-index:1;
}

html[data-theme="light"] #about{
    position:relative;
}

html[data-theme="light"] #about::before{
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 82% 30%,
            rgba(71,120,235,.07),
            transparent 30rem
        );
}

html[data-theme="light"] #about > .container{
    position:relative;
    z-index:1;
}


/* =========================================================
   LIGHT PRICING
   ========================================================= */

html[data-theme="light"] .price-card.highlight{
    background:
        linear-gradient(
            145deg,
            rgba(248,255,250,.94),
            rgba(239,249,244,.86)
        ) !important;

    border-color:rgba(55,205,112,.42) !important;

    box-shadow:
        0 22px 55px rgba(42,107,70,.095),
        inset 0 1px 0 rgba(255,255,255,.95) !important;
}

html[data-theme="light"] .price-card:hover{
    transform:translateY(-4px);

    box-shadow:
        0 24px 58px rgba(46,72,102,.12),
        inset 0 1px 0 rgba(255,255,255,.95) !important;
}


/* =========================================================
   LIGHT FEATURE ICONS
   ========================================================= */

html[data-theme="light"] .feature-icon,
html[data-theme="light"] .payment-icon{
    background:
        linear-gradient(
            145deg,
            rgba(245,250,255,.95),
            rgba(236,244,251,.88)
        ) !important;

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


/* =========================================================
   LIGHT FAQ
   ========================================================= */

html[data-theme="light"] .faq-item[open]{
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.94),
            rgba(245,249,253,.86)
        ) !important;

    box-shadow:
        0 20px 48px rgba(46,72,102,.09),
        inset 0 1px 0 rgba(255,255,255,.96) !important;
}

html[data-theme="light"] .category{
    background:rgba(255,255,255,.60) !important;
}

html[data-theme="light"] .category:hover{
    background:rgba(255,255,255,.88) !important;
}


/* =========================================================
   LIGHT FOOTER
   ========================================================= */

html[data-theme="light"] .site-footer,
html[data-theme="light"] footer{
    background:
        linear-gradient(
            180deg,
            rgba(237,243,248,.35),
            rgba(231,238,245,.72)
        );

    border-color:rgba(31,55,82,.10) !important;
}


/* =========================================================
   LIGHT MOBILE DRAWER
   ========================================================= */

html[data-theme="light"] .mobile-menu{
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.96),
            rgba(239,245,250,.97)
        ) !important;

    box-shadow:
        -18px 26px 60px rgba(46,72,102,.15) !important;
}