/* ============================================================
   VOLTKIN HOME V3 POLISH
   Visual polish layer over V2
============================================================ */

:root {
    --v3-cyan: #28c9ed;
    --v3-cyan-soft: rgba(40, 201, 237, .22);
    --v3-border: rgba(118, 166, 184, .20);
    --v3-border-hover: rgba(67, 205, 235, .52);

    --v3-panel:
        rgba(7, 19, 27, .88);

    --v3-panel-deep:
        rgba(4, 13, 19, .96);

    --v3-text-muted:
        #9fb0b8;
}


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

body {
    background:
        radial-gradient(
            circle at 82% 4%,
            rgba(40, 201, 237, .07),
            transparent 28%
        ),
        radial-gradient(
            circle at 20% 36%,
            rgba(79, 124, 81, .045),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #061018 0%,
            #050d14 55%,
            #040a10 100%
        );
}


.vk-main {
    position: relative;
}


.vk-main::before {
    content: "";

    position: fixed;

    pointer-events: none;

    z-index: -1;

    inset: 0;

    opacity: .25;

    background-image:
        radial-gradient(
            rgba(255,255,255,.045) .6px,
            transparent .6px
        );

    background-size:
        7px 7px;
}


/* ============================================================
   BRAND RAIL - LESS CYBERPUNK / MORE PREMIUM
============================================================ */

.vk-brand-rail {
    border-right:
        1px solid rgba(102, 150, 168, .12);

    background:
        linear-gradient(
            180deg,
            rgba(6, 17, 24, .99),
            rgba(4, 11, 16, .99)
        );

    box-shadow:
        18px 0 60px rgba(0,0,0,.13);
}


.vk-brand-slogan {
    color:
        #79d6ea;

    opacity:
        .88;

    text-shadow:
        0 0 18px rgba(40, 201, 237, .16);
}


.vk-side-nav a {
    opacity:
        .82;
}


.vk-side-nav a:hover {
    opacity:
        1;

    transform:
        translateY(-1px);

    border-color:
        rgba(61, 188, 216, .30);

    background:
        linear-gradient(
            135deg,
            rgba(15, 42, 53, .82),
            rgba(7, 24, 33, .72)
        );
}


/* ============================================================
   HEADER - FLOATING GLASS
============================================================ */

.vk-header {
    position: relative;

    z-index: 30;

    height:
        70px;

    padding:
        0 22px;

    margin-bottom:
        12px;

    border:
        1px solid rgba(92, 159, 181, .22);

    background:
        linear-gradient(
            180deg,
            rgba(7, 20, 29, .90),
            rgba(5, 15, 22, .83)
        );

    backdrop-filter:
        blur(22px) saturate(120%);

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


.vk-logo {
    transition:
        transform .25s ease,
        filter .25s ease;
}


.vk-logo:hover {
    transform:
        translateY(-1px);

    filter:
        drop-shadow(0 0 10px rgba(55,204,238,.20));
}


.vk-top-nav a {
    color:
        #a7b6bd;

    transition:
        color .2s ease,
        transform .2s ease;
}


.vk-top-nav a:hover {
    transform:
        translateY(-1px);
}


.vk-top-nav a.active::after {
    width:
        20px;

    background:
        rgba(67, 211, 241, .92);

    box-shadow:
        0 0 10px rgba(40, 201, 237, .28);
}


.vk-login-btn,
.vk-register-btn {
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}


.vk-login-btn:hover,
.vk-register-btn:hover {
    transform:
        translateY(-1px);
}


.vk-register-btn:hover {
    box-shadow:
        0 8px 24px rgba(33, 191, 224, .18);
}


/* ============================================================
   HERO - WORLD FIRST, UI SECOND
============================================================ */

.vk-hero {
    min-height:
        610px;

    border:
        1px solid rgba(71, 182, 207, .34);

    box-shadow:
        0 30px 90px rgba(0,0,0,.30);

    isolation:
        isolate;
}


.vk-hero::after {
    content: "";

    position: absolute;

    z-index: 3;

    left: 0;
    right: 0;
    bottom: 0;

    height: 170px;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(3, 11, 16, .34)
        );
}


.vk-hero-scene {
    transform:
        scale(1.035);

    transition:
        transform .15s linear;

    filter:
        saturate(1.05)
        contrast(1.025)
        brightness(1.02);
}


.vk-hero-vignette {
    z-index:
        2;

    background:
        linear-gradient(
            90deg,
            rgba(4, 12, 18, .94) 0%,
            rgba(4, 12, 18, .72) 23%,
            rgba(4, 12, 18, .28) 48%,
            rgba(4, 12, 18, .04) 75%
        ),
        linear-gradient(
            180deg,
            rgba(3, 10, 15, .04),
            transparent 60%,
            rgba(3, 10, 15, .26)
        );
}


.vk-hero-content {
    z-index:
        7;

    width:
        570px;

    padding:
        92px 0 76px 62px;
}


.vk-hero-content::before {
    content: "";

    position: absolute;

    z-index:
        -1;

    width:
        470px;

    height:
        400px;

    left:
        -70px;

    top:
        30px;

    pointer-events:
        none;

    background:
        radial-gradient(
            ellipse,
            rgba(5, 17, 24, .58),
            transparent 69%
        );

    filter:
        blur(16px);
}


.vk-kicker {
    margin-bottom:
        21px;

    color:
        #c994dd;

    opacity:
        .92;
}


.vk-hero h1 {
    max-width:
        570px;

    line-height:
        .91;

    letter-spacing:
        -.045em;

    text-shadow:
        0 12px 32px rgba(0,0,0,.48);
}


.vk-hero h1 strong {
    text-shadow:
        none;

    filter:
        drop-shadow(0 5px 20px rgba(33,190,225,.10));
}


.vk-hero-content > p {
    max-width:
        455px;

    color:
        #c0cdd2;

    font-size:
        15.5px;

    line-height:
        1.65;
}


.vk-primary-button,
.vk-outline-button {
    border-radius:
        7px;

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


.vk-primary-button {
    position:
        relative;

    overflow:
        hidden;

    box-shadow:
        0 8px 26px rgba(28, 182, 215, .15);
}


.vk-primary-button::after {
    content: "";

    position:
        absolute;

    top:
        -20%;

    left:
        -60%;

    width:
        35%;

    height:
        140%;

    transform:
        skewX(-25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.30),
            transparent
        );

    transition:
        left .45s ease;
}


.vk-primary-button:hover::after {
    left:
        135%;
}


.vk-primary-button:hover {
    box-shadow:
        0 11px 32px rgba(31, 192, 225, .24);
}


.vk-outline-button:hover {
    border-color:
        rgba(72,213,241,.72);

    background:
        rgba(9, 31, 41, .84);
}


.vk-plot-chip {
    top:
        88px;

    right:
        48px;

    border-color:
        rgba(64, 190, 219, .34);

    background:
        rgba(7, 24, 32, .78);

    box-shadow:
        0 15px 38px rgba(0,0,0,.22);

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


.vk-plot-chip:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(64, 207, 238, .55);
}


.vk-hero-tag {
    color:
        #90d7e7;

    opacity:
        .78;

    text-shadow:
        none;
}


/* ============================================================
   RIGHT FEATURE CARDS
============================================================ */

.vk-right-column {
    gap:
        12px;
}


.vk-right-card {
    border:
        1px solid var(--v3-border);

    box-shadow:
        0 17px 45px rgba(0,0,0,.19);

    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease,
        background-size .45s ease;

    background-size:
        108%;
}


.vk-right-card:hover {
    transform:
        translateY(-3px);

    border-color:
        var(--v3-border-hover);

    box-shadow:
        0 24px 55px rgba(0,0,0,.26);

    background-size:
        113%;
}


.vk-right-card-copy {
    width:
        70%;

    padding:
        25px 22px;
}


.vk-right-card h2 {
    letter-spacing:
        -.015em;
}


.vk-right-card p {
    color:
        #abb9c0;
}


.vk-right-card a {
    position:
        relative;

    color:
        #6bd7ee;
}


.vk-right-card a::after {
    content: "";

    position:
        absolute;

    left:
        0;

    bottom:
        -3px;

    width:
        0;

    height:
        1px;

    background:
        currentColor;

    transition:
        width .25s ease;
}


.vk-right-card a:hover::after {
    width:
        100%;
}


/* ============================================================
   EXPERIENCE - LESS DASHBOARD-LIKE
============================================================ */

.vk-experience {
    position:
        relative;

    margin-top:
        12px;

    padding:
        35px 34px 36px;

    overflow:
        hidden;

    border:
        1px solid rgba(104, 155, 174, .18);

    background:
        linear-gradient(
            180deg,
            rgba(8, 22, 31, .95),
            rgba(5, 15, 22, .98)
        );

    box-shadow:
        0 25px 65px rgba(0,0,0,.15);
}


.vk-experience::before {
    content: "";

    position:
        absolute;

    pointer-events:
        none;

    width:
        360px;

    height:
        360px;

    right:
        -160px;

    top:
        -180px;

    border-radius:
        50%;

    background:
        rgba(31, 176, 205, .05);

    filter:
        blur(60px);
}


.vk-section-title {
    margin-bottom:
        25px;
}


.vk-section-title span {
    color:
        #aabac1;
}


.vk-section-title h2 strong {
    color:
        #58d2ec;
}


.vk-experience-grid {
    gap:
        13px;
}


.vk-exp-card {
    position:
        relative;

    border:
        1px solid rgba(94, 151, 170, .22);

    background:
        linear-gradient(
            180deg,
            rgba(9, 27, 37, .93),
            rgba(6, 19, 27, .98)
        );

    box-shadow:
        0 14px 38px rgba(0,0,0,.17);

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


.vk-exp-card:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(64, 203, 232, .45);

    box-shadow:
        0 26px 55px rgba(0,0,0,.26);
}


.vk-exp-image {
    position:
        relative;

    height:
        175px;

    background-size:
        cover;

    transition:
        transform .45s ease,
        filter .45s ease;

    filter:
        saturate(.92)
        brightness(.88);
}


.vk-exp-card:hover .vk-exp-image {
    transform:
        scale(1.035);

    filter:
        saturate(1.03)
        brightness(.98);
}


.vk-exp-content {
    position:
        relative;

    z-index:
        2;

    background:
        linear-gradient(
            180deg,
            rgba(7, 21, 30, .96),
            rgba(6, 18, 26, 1)
        );
}


.vk-exp-icon {
    border:
        1px solid rgba(83, 193, 217, .34);

    background:
        #091c26;

    box-shadow:
        0 10px 22px rgba(0,0,0,.22);
}


/* ============================================================
   HOW IT WORKS - CONNECTED JOURNEY
============================================================ */

.vk-how {
    position:
        relative;

    margin-top:
        12px;

    border:
        1px solid rgba(98, 148, 165, .17);

    background:
        linear-gradient(
            180deg,
            rgba(7, 20, 29, .94),
            rgba(5, 15, 22, .98)
        );
}


.vk-how-flow {
    position:
        relative;
}


.vk-how-flow::before {
    content: "";

    position:
        absolute;

    z-index:
        0;

    top:
        25px;

    left:
        7%;

    right:
        7%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(50, 199, 231, .28) 8%,
            rgba(50, 199, 231, .28) 92%,
            transparent
        );
}


.vk-step,
.vk-step-arrow {
    position:
        relative;

    z-index:
        2;
}


.vk-step-icon {
    background:
        #071922;

    border-color:
        rgba(69, 171, 195, .28);

    box-shadow:
        0 8px 20px rgba(0,0,0,.18);

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


.vk-step:hover .vk-step-icon {
    transform:
        translateY(-3px);

    border-color:
        rgba(57, 202, 233, .52);
}


.vk-step-number {
    background:
        #071922;

    box-shadow:
        0 0 0 4px #07151e;
}


/* ============================================================
   WORLD FEATURE - LET THE WORLD BREATHE
============================================================ */

.vk-world-feature {
    min-height:
        540px;

    margin-top:
        12px;

    border:
        1px solid rgba(84, 149, 169, .18);

    box-shadow:
        0 28px 70px rgba(0,0,0,.19);
}


.vk-world-image {
    position:
        relative;

    background-image:
        linear-gradient(
            90deg,
            transparent 52%,
            rgba(7, 21, 30, .25) 69%,
            rgba(7, 21, 30, .92) 100%
        ),
        url('/static/voltkin/assets/world/plot_overview_1280x720.png');

    filter:
        saturate(1.04)
        contrast(1.015);
}


.vk-world-text {
    padding:
        62px 55px 62px 25px;

    background:
        linear-gradient(
            90deg,
            rgba(7, 21, 30, .90),
            rgba(6, 18, 26, .99)
        );
}


.vk-world-text h2 {
    font-size:
        clamp(38px, 3.5vw, 54px);

    letter-spacing:
        -.035em;
}


.vk-world-text p {
    color:
        #a7b6bd;

    font-size:
        14px;
}


/* ============================================================
   FINAL / COMMUNITY
============================================================ */

.vk-final-grid {
    gap:
        12px;

    margin-top:
        12px;
}


.vk-final-community,
.vk-final-cta {
    border:
        1px solid rgba(91, 150, 169, .20);

    box-shadow:
        0 18px 48px rgba(0,0,0,.18);
}


.vk-final-community {
    min-height:
        355px;

    background-image:
        linear-gradient(
            90deg,
            rgba(4, 13, 20, .94),
            rgba(4, 13, 20, .60) 40%,
            rgba(4, 13, 20, .18)
        ),
        url('/static/voltkin/assets/world/world_banner_1920x480.png');
}


.vk-final-community h2 {
    font-size:
        46px;

    letter-spacing:
        -.025em;
}


.vk-final-cta {
    min-height:
        355px;

    background-image:
        linear-gradient(
            180deg,
            rgba(4, 13, 20, .67),
            rgba(4, 13, 20, .94)
        ),
        url('/static/voltkin/assets/backgrounds/footer_1920x520.png');
}


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

.vk-footer {
    min-height:
        105px;

    margin-top:
        18px;

    border-top:
        1px solid rgba(95, 145, 163, .14);
}


/* ============================================================
   REVEAL ANIMATIONS
============================================================ */

.vk-reveal {
    opacity:
        0;

    transform:
        translateY(22px);

    transition:
        opacity .65s ease,
        transform .65s ease;
}


.vk-reveal.vk-visible {
    opacity:
        1;

    transform:
        translateY(0);
}


.vk-exp-card.vk-reveal:nth-child(2) {
    transition-delay:
        .06s;
}


.vk-exp-card.vk-reveal:nth-child(3) {
    transition-delay:
        .12s;
}


.vk-exp-card.vk-reveal:nth-child(4) {
    transition-delay:
        .18s;
}


/* ============================================================
   RESPONSIVE V3
============================================================ */

@media (max-width: 1250px) {

    .vk-hero {
        min-height:
            570px;
    }

    .vk-hero-content {
        padding-left:
            45px;
    }

    .vk-world-feature {
        min-height:
            470px;
    }

}


@media (max-width: 980px) {

    .vk-main {
        padding:
            10px;
    }

    .vk-header {
        height:
            64px;
    }

    .vk-hero-content {
        width:
            560px;

        max-width:
            72%;
    }

    .vk-how-flow::before {
        display:
            none;
    }

}


@media (max-width: 680px) {

    .vk-header {
        height:
            62px;

        padding:
            0 14px;
    }

    .vk-hero {
        min-height:
            720px;
    }

    .vk-hero-content {
        width:
            100%;

        max-width:
            none;

        padding:
            330px 25px 35px;
    }

    .vk-hero-content::before {
        display:
            none;
    }

    .vk-hero h1 {
        font-size:
            46px;
    }

    .vk-experience {
        padding:
            25px 15px;
    }

    .vk-exp-image {
        height:
            210px;
    }

    .vk-world-feature {
        min-height:
            0;
    }

    .vk-world-text {
        padding:
            38px 27px 45px;
    }

    .vk-final-community {
        min-height:
            310px;

        padding:
            30px;
    }

    .vk-final-community h2 {
        font-size:
            37px;
    }

}


/* ============================================================
   ACCESSIBILITY
============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;

        animation:
            none !important;

        transition:
            none !important;
    }

    .vk-reveal {
        opacity:
            1 !important;

        transform:
            none !important;
    }

}