/* ============================================================
   VOLTKIN V3.1 DETAIL POLISH
   Keeps V3 layout - improves depth, balance and readability
============================================================ */


/* ============================================================
   GLOBAL - LESS BOXES, MORE DEPTH
============================================================ */

:root {
    --v31-border:
        rgba(110, 159, 178, .14);

    --v31-border-hover:
        rgba(69, 202, 232, .42);

    --v31-shadow:
        0 22px 65px rgba(0,0,0,.20);
}


/* Subtle atmospheric lighting */

body::before {
    content: "";

    position: fixed;

    inset: 0;

    z-index: -2;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 72% 12%,
            rgba(35, 177, 204, .045),
            transparent 28%
        ),
        radial-gradient(
            circle at 42% 56%,
            rgba(79, 108, 60, .035),
            transparent 33%
        );
}


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

.vk-header {
    border-color:
        rgba(96, 151, 170, .16);

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


.vk-top-nav a {
    opacity:
        .88;
}


.vk-top-nav a:hover,
.vk-top-nav a.active {
    opacity:
        1;
}


/* ============================================================
   HERO - LET THE WORLD SHOW MORE
============================================================ */

.vk-hero {
    border-color:
        rgba(78, 168, 193, .24);

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


.vk-hero-scene {
    filter:
        saturate(1.08)
        contrast(1.015)
        brightness(1.075);
}


.vk-hero-vignette {
    background:
        linear-gradient(
            90deg,
            rgba(4, 12, 18, .91) 0%,
            rgba(4, 12, 18, .65) 22%,
            rgba(4, 12, 18, .23) 45%,
            rgba(4, 12, 18, .035) 71%
        ),
        linear-gradient(
            180deg,
            rgba(3,10,15,.02),
            transparent 64%,
            rgba(3,10,15,.20)
        );
}


.vk-hero-content {
    padding-top:
        100px;
}


.vk-hero-content > p {
    color:
        #c8d3d8;

    text-shadow:
        0 2px 12px rgba(0,0,0,.45);
}


.vk-hero h1 {
    text-shadow:
        0 12px 38px rgba(0,0,0,.48);
}


/* Make the interactive plot panel feel embedded */

.vk-plot-chip {
    border-color:
        rgba(73, 180, 204, .25);

    background:
        linear-gradient(
            135deg,
            rgba(7,27,36,.82),
            rgba(5,18,26,.74)
        );

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


/* ============================================================
   RIGHT COLUMN - IMAGE FIRST
============================================================ */

.vk-right-card {
    border-color:
        var(--v31-border);

    background-size:
        112%;

    background-position:
        center;

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


.vk-right-card:hover {
    border-color:
        var(--v31-border-hover);

    box-shadow:
        0 25px 62px rgba(0,0,0,.24);

    background-size:
        117%;
}


/* less darkness over images */

.vk-world-card {
    background-image:
        linear-gradient(
            90deg,
            rgba(5,18,27,.94) 0%,
            rgba(5,18,27,.63) 52%,
            rgba(5,18,27,.06) 100%
        ),
        url('/static/voltkin/assets/world/house_and_tree_1200x800.png');
}


.vk-style-card {
    background-image:
        linear-gradient(
            90deg,
            rgba(5,18,27,.93) 0%,
            rgba(5,18,27,.58) 49%,
            rgba(5,18,27,.04) 100%
        ),
        url('/static/voltkin/assets/backgrounds/outfit_fitter_studio_1920x1080.png');
}


.vk-community-card {
    background-image:
        linear-gradient(
            90deg,
            rgba(5,18,27,.93) 0%,
            rgba(5,18,27,.54) 49%,
            rgba(5,18,27,.04) 100%
        ),
        url('/static/voltkin/assets/backgrounds/community_1920x1080.png');
}


.vk-right-card-copy {
    width:
        66%;
}


.vk-right-card h2 {
    font-size:
        21px;
}


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


/* ============================================================
   EXPERIENCE
============================================================ */

.vk-experience {
    border-color:
        rgba(92, 145, 163, .12);

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

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


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


.vk-exp-card {
    border-color:
        rgba(100, 150, 168, .15);

    box-shadow:
        0 14px 42px rgba(0,0,0,.15);

    overflow:
        hidden;
}


.vk-exp-card:hover {
    border-color:
        rgba(65, 195, 223, .38);

    box-shadow:
        0 28px 65px rgba(0,0,0,.24);
}


.vk-exp-image {
    position:
        relative;

    height:
        188px;

    filter:
        saturate(.97)
        brightness(.96);
}


.vk-exp-image::after {
    content: "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(5,16,23,.25)
        );
}


/* Outfit card - currently very dark */
.vk-exp-card:first-child .vk-exp-image {
    filter:
        saturate(1.04)
        brightness(1.13)
        contrast(.98);

    background-position:
        center 38%;
}


.vk-exp-card:first-child .vk-exp-image::before {
    content: "";

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at 50% 55%,
            rgba(42, 199, 231, .11),
            transparent 45%
        );

    pointer-events:
        none;
}


.vk-exp-content {
    padding:
        23px 19px 22px;

    background:
        linear-gradient(
            180deg,
            rgba(8,23,32,.94),
            rgba(6,17,25,.99)
        );
}


.vk-exp-content h3 {
    letter-spacing:
        .01em;
}


.vk-exp-content p {
    color:
        #9eafb7;
}


.vk-exp-content a {
    opacity:
        .88;

    transition:
        opacity .2s ease,
        letter-spacing .2s ease;
}


.vk-exp-content a:hover {
    opacity:
        1;

    letter-spacing:
        .015em;
}


/* ============================================================
   CARD TOP ACCENT
============================================================ */

.vk-exp-card::after,
.vk-right-card::after {
    content: "";

    position:
        absolute;

    left:
        15%;

    right:
        15%;

    top:
        0;

    height:
        1px;

    opacity:
        0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(79,215,241,.68),
            transparent
        );

    transition:
        opacity .25s ease;
}


.vk-exp-card:hover::after,
.vk-right-card:hover::after {
    opacity:
        1;
}


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

.vk-how {
    border-color:
        rgba(95, 145, 163, .12);

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


.vk-how-flow::before {
    opacity:
        .55;
}


.vk-step-icon {
    border-color:
        rgba(92, 151, 170, .20);
}


.vk-step:hover .vk-step-icon {
    border-color:
        rgba(65, 198, 225, .42);

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


/* ============================================================
   WORLD SECTION
============================================================ */

.vk-world-feature {
    border-color:
        rgba(98, 148, 164, .12);

    box-shadow:
        0 32px 85px rgba(0,0,0,.17);
}


.vk-world-image {
    background-image:
        linear-gradient(
            90deg,
            transparent 58%,
            rgba(7,21,30,.15) 72%,
            rgba(7,21,30,.90) 100%
        ),
        url('/static/voltkin/assets/world/plot_overview_1280x720.png');

    filter:
        saturate(1.08)
        brightness(1.04);
}


.vk-world-text {
    background:
        linear-gradient(
            90deg,
            rgba(7,21,30,.86),
            rgba(6,18,26,.99) 38%
        );
}


.vk-world-text h2 strong {
    color:
        #55d5ef;
}


/* ============================================================
   FINAL SECTIONS
============================================================ */

.vk-final-community,
.vk-final-cta {
    border-color:
        rgba(98, 148, 164, .13);
}


.vk-final-community {
    filter:
        saturate(1.03);
}


.vk-final-community h2 {
    text-shadow:
        0 8px 30px rgba(0,0,0,.34);
}


/* ============================================================
   BUTTONS - MORE PREMIUM
============================================================ */

.vk-primary-button,
.vk-register-btn {
    background:
        linear-gradient(
            180deg,
            #57ddf7 0%,
            #27c3e5 48%,
            #13add0 100%
        );
}


.vk-primary-button:hover,
.vk-register-btn:hover {
    filter:
        brightness(1.05);
}


/* ============================================================
   MICRO DETAILS
============================================================ */

.vk-small-label,
.vk-kicker {
    text-shadow:
        none;
}


.vk-section-title h2,
.vk-how-heading {
    letter-spacing:
        .035em;
}


::selection {
    background:
        rgba(39, 196, 229, .30);

    color:
        white;
}


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

@media (max-width: 980px) {

    .vk-right-card-copy {
        width:
            74%;
    }

}


@media (max-width: 680px) {

    .vk-hero-content {
        padding-top:
            350px;
    }

    .vk-hero-vignette {
        background:
            linear-gradient(
                180deg,
                rgba(4,12,18,.12),
                rgba(4,12,18,.55) 40%,
                rgba(4,12,18,.96) 72%
            );
    }

    .vk-right-card-copy {
        width:
            76%;
    }

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

}


/* ============================================================
   VOLTKIN HOME ACCOUNT STATE
============================================================ */

.vk-home-user {
    display: inline-flex;
    align-items: center;

    height: 36px;

    padding: 0 12px;

    color: #a9bac1;

    font-size: 11px;
    font-weight: 700;

    border-right:
        1px solid rgba(92, 151, 170, .16);
}

.vk-home-user::before {
    content: "";

    width: 7px;
    height: 7px;

    margin-right: 8px;

    border-radius: 50%;

    background: #50dca0;

    box-shadow:
        0 0 10px rgba(80, 220, 160, .32);
}