/* ==========================================================
   SHAINSECURITY — LOGO COLOR THEME
   ========================================================== */

:root {
    --shain-black: #010211;
    --shain-navy: #09133a;
    --shain-navy-soft: #0c1937;

    --shain-blue: #0e65d8;
    --shain-cyan: #0fb1fa;
    --shain-cyan-light: #4bdcff;

    --shain-violet: #6d35ff;
    --shain-violet-soft: #4220a5;

    --shain-white: #eef2f8;
    --shain-muted: #91a7c1;

    --shain-border: rgba(65, 158, 255, .16);
    --shain-border-bright: rgba(15, 177, 250, .34);

    --shain-card:
        rgba(8, 19, 48, .78);

    --shain-gradient:
        linear-gradient(
            135deg,
            #6d35ff 0%,
            #0fb1fa 45%,
            #0e65d8 100%
        );

    --shain-blue-gradient:
        linear-gradient(
            135deg,
            #0fb1fa,
            #0e65d8
        );
}


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

html {
    background:
        var(--shain-black);
}

body {
    color:
        var(--shain-white) !important;

    background:
        radial-gradient(
            circle at 12% 5%,
            rgba(71, 38, 184, .18),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 8%,
            rgba(0, 132, 255, .16),
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 55%,
            rgba(9, 68, 160, .09),
            transparent 45%
        ),
        var(--shain-black) !important;
}


.muted,
.hero-description,
.section-heading p,
.plan-note,
.feature-card p,
.step-card p,
.app-info span,
.help-content,
.profile-row span,
.order-date {
    color:
        var(--shain-muted) !important;
}


/* ==========================================================
   BRAND
   ========================================================== */

.brand-mark,
.logo-mark {
    background:
        linear-gradient(
            180deg,
            #7437ff 0%,
            #13caff 48%,
            #0967e8 100%
        ) !important;

    color:
        var(--shain-cyan) !important;

    box-shadow:
        0 0 20px
        rgba(15, 177, 250, .45),
        0 0 45px
        rgba(109, 53, 255, .18) !important;
}


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

.header,
.legal-header {
    background:
        rgba(1, 2, 17, .82) !important;

    border-bottom:
        1px solid
        rgba(41, 118, 231, .15) !important;

    backdrop-filter:
        blur(18px);
}


.nav-links a:hover,
.footer-links a:hover,
.site-legal-links a:hover {
    color:
        var(--shain-cyan-light) !important;
}


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

.hero {
    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(13, 109, 222, .17),
            transparent 50%
        ),
        radial-gradient(
            ellipse at 18% 50%,
            rgba(92, 42, 229, .11),
            transparent 34%
        ) !important;
}


.hero h1 {
    color:
        var(--shain-white) !important;
}


.hero h1 span {
    background:
        linear-gradient(
            90deg,
            #7437ff 0%,
            #19c8ff 42%,
            #0877f7 100%
        ) !important;

    -webkit-background-clip:
        text !important;

    background-clip:
        text !important;

    color:
        transparent !important;
}


.hero-badge,
.section-label,
.download-label,
.legal-label {
    color:
        var(--shain-cyan-light) !important;
}


.hero-badge {
    background:
        rgba(15, 177, 250, .07) !important;

    border-color:
        rgba(15, 177, 250, .22) !important;
}


.badge-dot {
    background:
        var(--shain-cyan) !important;

    box-shadow:
        0 0 15px
        rgba(15, 177, 250, .9) !important;
}


.hero-meta {
    border-color:
        var(--shain-border) !important;

    background:
        linear-gradient(
            135deg,
            rgba(9, 19, 58, .72),
            rgba(4, 10, 34, .65)
        ) !important;

    box-shadow:
        0 22px 70px
        rgba(0, 0, 0, .30),
        inset 0 1px
        rgba(255,255,255,.025) !important;
}


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

.btn-primary,
.button:not(.button-secondary),
.nav-button.primary,
.legal-button,
.early-btn {
    background:
        var(--shain-blue-gradient) !important;

    color:
        #ffffff !important;

    border-color:
        rgba(38, 187, 255, .34) !important;

    box-shadow:
        0 8px 28px
        rgba(0, 119, 255, .20) !important;
}


.btn-primary:hover,
.button:not(.button-secondary):hover,
.nav-button.primary:hover,
.legal-button:hover,
.early-btn:hover {
    background:
        linear-gradient(
            135deg,
            #33d9ff,
            #1479ff
        ) !important;

    box-shadow:
        0 10px 34px
        rgba(15, 177, 250, .26) !important;
}


.btn-secondary,
.button-secondary,
.nav-button.secondary,
.back-button {
    color:
        var(--shain-white) !important;

    background:
        rgba(11, 25, 57, .68) !important;

    border-color:
        var(--shain-border) !important;
}


.btn-secondary:hover,
.button-secondary:hover,
.nav-button.secondary:hover,
.back-button:hover {
    background:
        rgba(17, 42, 87, .80) !important;

    border-color:
        var(--shain-border-bright) !important;
}


/* ==========================================================
   CARDS
   ========================================================== */

.feature-card,
.plan-card,
.step-card,
.app-card,
.download-app,
.card-box,
.panel,
.checkout-box,
.login-box,
.login-card,
.auth-card,
.buy-card,
.legal-card,
.stat-card {
    background:
        linear-gradient(
            145deg,
            rgba(12, 29, 65, .82),
            rgba(5, 13, 38, .92)
        ) !important;

    border-color:
        var(--shain-border) !important;

    box-shadow:
        inset 0 1px
        rgba(255,255,255,.025),
        0 20px 55px
        rgba(0,0,0,.14) !important;
}


.feature-card:hover,
.plan-card:hover,
.app-card:hover,
.download-app:hover {
    border-color:
        var(--shain-border-bright) !important;

    box-shadow:
        0 22px 60px
        rgba(0, 82, 190, .10) !important;
}


/* ==========================================================
   ICONS
   ========================================================== */

.feature-icon,
.trial-icon,
.platform-icon,
.download-logo,
.app-logo {
    color:
        #ffffff !important;

    background:
        linear-gradient(
            135deg,
            rgba(109, 53, 255, .9),
            rgba(15, 177, 250, .95)
        ) !important;

    border:
        1px solid
        rgba(87, 192, 255, .22) !important;

    box-shadow:
        0 7px 24px
        rgba(17, 107, 226, .16) !important;
}


/* ==========================================================
   PLANS
   ========================================================== */

#plans,
.section-soft {
    background:
        linear-gradient(
            180deg,
            rgba(7, 20, 55, .72),
            rgba(2, 5, 25, .82)
        ) !important;

    border-color:
        rgba(32, 113, 224, .10) !important;
}


.plan-card.featured {
    border-color:
        rgba(15, 177, 250, .48) !important;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(109, 53, 255, .18),
            transparent 37%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(15, 177, 250, .11),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #0d2450,
            #07132e
        ) !important;

    box-shadow:
        0 22px 65px
        rgba(14, 101, 216, .14) !important;
}


.plan-card.featured .plan-price {
    color:
        var(--shain-cyan-light) !important;
}


.plan-badge {
    color:
        white !important;

    background:
        linear-gradient(
            135deg,
            #7437ff,
            #0e79f5
        ) !important;
}


.trial-strip {
    border-color:
        rgba(91, 82, 255, .25) !important;

    background:
        linear-gradient(
            90deg,
            rgba(98, 45, 219, .09),
            rgba(15, 177, 250, .06)
        ) !important;
}


/* ==========================================================
   HELP
   ========================================================== */

.help-section {
    background:
        radial-gradient(
            circle at 5% 30%,
            rgba(14, 101, 216, .16),
            transparent 35%
        ),
        radial-gradient(
            circle at 95% 60%,
            rgba(109, 53, 255, .15),
            transparent 35%
        ),
        var(--shain-black) !important;
}


.help-list details {
    background:
        linear-gradient(
            110deg,
            rgba(11, 40, 91, .66),
            rgba(36, 24, 90, .50)
        ) !important;

    border-color:
        var(--shain-border) !important;
}


.help-list details[open],
.help-list details:hover {
    border-color:
        rgba(15, 177, 250, .32) !important;
}


/* ==========================================================
   CABINET / ADMIN
   ========================================================== */

.status-active,
.badge-active {
    color:
        #58e8ff !important;

    background:
        rgba(15, 177, 250, .13) !important;
}


.status-dot-account.status-active {
    background:
        var(--shain-cyan) !important;

    box-shadow:
        0 0 15px
        rgba(15, 177, 250, .85) !important;
}


.tab.active {
    background:
        var(--shain-blue-gradient) !important;

    color:
        white !important;
}


.renew-btn {
    color:
        var(--shain-cyan-light) !important;

    background:
        rgba(14, 101, 216, .12) !important;

    border-color:
        rgba(15, 177, 250, .30) !important;
}


.search,
.field input {
    background:
        rgba(2, 8, 29, .82) !important;

    border-color:
        var(--shain-border) !important;

    color:
        var(--shain-white) !important;
}


.search:focus,
.field input:focus {
    border-color:
        var(--shain-cyan) !important;

    box-shadow:
        0 0 0 3px
        rgba(15, 177, 250, .08) !important;
}


/* ==========================================================
   LINKS
   ========================================================== */

.legal-card a,
.check a,
.offer-check a,
.requisites a {
    color:
        var(--shain-cyan-light) !important;
}


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

.cta-card {
    background:
        radial-gradient(
            circle at 90% 25%,
            rgba(15, 177, 250, .22),
            transparent 34%
        ),
        radial-gradient(
            circle at 10% 100%,
            rgba(109, 53, 255, .13),
            transparent 43%
        ),
        linear-gradient(
            145deg,
            #0c2049,
            #060d28
        ) !important;

    border-color:
        rgba(15, 177, 250, .27) !important;
}


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

.footer,
.legal-footer {
    background:
        rgba(1, 2, 17, .48);

    border-color:
        rgba(41, 118, 231, .12) !important;
}