:root{
    --vk-width:1240px;
    --vk-cyan:#48e8ff;
    --vk-text:#f5f8ff;
    --vk-muted:#91a2bf;
    --vk-bg:#030713;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    min-height:100vh;
    overflow-x:hidden;

    color:var(--vk-text);

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    background:
        linear-gradient(
            180deg,
            rgba(2,5,14,.42) 0%,
            rgba(2,6,16,.60) 45%,
            rgba(2,5,13,.78) 100%
        ),
        url("/static/voltkin/assets/home/background/voltkin_home_background_v4.png")
        center top / cover fixed no-repeat,
        var(--vk-bg);
}

body::before{
    content:"";

    position:fixed;
    inset:0;

    pointer-events:none;
    z-index:0;

    background:
        linear-gradient(
            90deg,
            rgba(1,4,12,.08) 0%,
            rgba(2,7,18,.30) 18%,
            rgba(2,7,18,.52) 35%,
            rgba(2,7,18,.56) 50%,
            rgba(2,7,18,.52) 65%,
            rgba(2,7,18,.30) 82%,
            rgba(1,4,12,.08) 100%
        );
}

a{
    color:inherit;
    text-decoration:none;
}


/* =========================================================
   SIDE WORLD DECOR
   ========================================================= */

.vk-home-side{
    position:fixed;
    top:76px;
    bottom:0;

    width:min(19vw,300px);

    pointer-events:none;

    z-index:1;

    opacity:.43;

    filter:
        brightness(.72)
        saturate(.82)
        contrast(.92);
}

.vk-home-side-left{
    left:0;

    background:
        url("/static/voltkin/assets/home/decor/voltkin_home_side_left_v4.png")
        left top / auto 100% no-repeat;

    -webkit-mask-image:
        linear-gradient(
            to right,
            #000 0%,
            #000 58%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to right,
            #000 0%,
            #000 58%,
            transparent 100%
        );
}

.vk-home-side-right{
    right:0;

    background:
        url("/static/voltkin/assets/home/decor/voltkin_home_side_right_v4.png")
        right top / auto 100% no-repeat;

    -webkit-mask-image:
        linear-gradient(
            to left,
            #000 0%,
            #000 58%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to left,
            #000 0%,
            #000 58%,
            transparent 100%
        );
}


/* =========================================================
   NAV
   ========================================================= */

.vk-home-nav{
    position:relative;

    z-index:100;

    height:76px;

    background:
        linear-gradient(
            180deg,
            rgba(3,8,21,.98),
            rgba(4,11,26,.94)
        );

    border-bottom:
        1px solid rgba(67,221,255,.18);

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

.vk-home-nav-inner{
    width:min(
        var(--vk-width),
        calc(100% - 40px)
    );

    height:100%;

    margin:auto;

    display:grid;

    grid-template-columns:
        220px
        1fr
        220px;

    align-items:center;

    gap:20px;
}

.vk-home-logo img{
    display:block;

    width:178px;

    height:auto;
}

.vk-home-menu{
    display:flex;

    justify-content:center;

    align-items:center;

    gap:34px;
}

.vk-home-menu a{
    color:#8e9bb4;

    font-size:11px;

    font-weight:800;

    letter-spacing:.13em;

    transition:
        color .2s ease,
        text-shadow .2s ease;
}

.vk-home-menu a:hover,
.vk-home-menu a.is-active{
    color:#68ecff;

    text-shadow:
        0 0 12px rgba(64,229,255,.32);
}

.vk-home-auth{
    display:flex;

    justify-content:flex-end;

    gap:10px;
}

.vk-login-btn,
.vk-play-btn{
    min-width:98px;

    height:39px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0 17px;

    font-size:10px;

    font-weight:900;

    letter-spacing:.10em;

    border:
        1px solid rgba(55,214,255,.32);
}

.vk-login-btn{
    color:#7cecff;

    background:
        rgba(5,23,45,.78);
}

.vk-play-btn{
    color:#00141d;

    background:
        linear-gradient(
            180deg,
            #6cf4ff,
            #13acd9
        );

    box-shadow:
        0 0 20px rgba(26,215,255,.23);
}


/* =========================================================
   MAIN CENTRAL COLUMN
   ========================================================= */

.vk-home-main{
    position:relative;

    z-index:10;

    width:min(
        var(--vk-width),
        calc(100% - 44px)
    );

    margin:0 auto;

    padding:
        27px
        0
        54px;
}

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

    position:absolute;

    z-index:-1;

    top:0;
    bottom:0;

    left:-22px;
    right:-22px;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(2,7,18,.40),
            rgba(2,7,18,.58) 40%,
            rgba(2,7,18,.67) 100%
        );

    border-left:
        1px solid rgba(60,199,235,.06);

    border-right:
        1px solid rgba(60,199,235,.06);

    backdrop-filter:
        blur(2px);

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            #000 4%,
            #000 96%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            #000 4%,
            #000 96%,
            transparent 100%
        );
}


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

.vk-home-hero{
    position:relative;

    width:100%;

    aspect-ratio:1774 / 887;

    margin:
        0 auto
        13px;

    isolation:isolate;
}


/* frame ABOVE the world artwork */

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

    position:absolute;

    inset:0;

    z-index:5;

    pointer-events:none;

    background:
        url("/static/voltkin/assets/home/hero/voltkin_home_hero_frame_v4.png")
        center / 100% 100%
        no-repeat;

    filter:
        drop-shadow(
            0 15px 25px rgba(0,0,0,.48)
        );
}


/* HERO world is clipped instead of floating over everything */

.vk-home-world{
    position:absolute;

    z-index:2;

    right:4.5%;

    top:12%;

    width:48%;

    height:76%;

    overflow:hidden;

    border-radius:
        26px;

    opacity:.88;

    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.70) 14%,
            #000 31%,
            #000 100%
        );

    mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.70) 14%,
            #000 31%,
            #000 100%
        );
}

.vk-home-world::after{
    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            rgba(3,9,22,.60),
            transparent 35%
        );
}

.vk-home-world img{
    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:center;
}


/* HERO COPY */

.vk-home-hero-copy{
    position:absolute;

    z-index:10;

    left:8.5%;

    top:50%;

    width:44%;

    transform:
        translateY(-50%);

    padding:
        24px
        26px;

    background:
        linear-gradient(
            90deg,
            rgba(3,11,29,.82),
            rgba(3,11,29,.48) 72%,
            transparent 100%
        );

    border-radius:
        14px;
}

.vk-home-kicker{
    margin-bottom:12px;

    color:#52e9ff;

    font-size:10px;

    font-weight:900;

    letter-spacing:.22em;
}

.vk-home-hero h1{
    margin:0;

    max-width:570px;

    font-size:
        clamp(
            39px,
            3.2vw,
            59px
        );

    line-height:1;

    letter-spacing:-.04em;

    text-shadow:
        0 5px 22px rgba(0,0,0,.65);
}

.vk-home-hero h1 span{
    color:#5ce8ff;
}

.vk-home-hero p{
    max-width:510px;

    margin:
        17px
        0
        22px;

    color:#a4b2c9;

    font-size:13px;

    line-height:1.6;
}

.vk-home-hero-actions{
    display:flex;

    gap:11px;
}

.vk-home-cta{
    min-width:145px;

    height:41px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:
        0
        19px;

    border:
        1px solid rgba(61,224,255,.38);

    background:
        rgba(4,25,51,.84);

    color:#70edff;

    font-size:10px;

    font-weight:900;

    letter-spacing:.1em;
}

.vk-home-cta-primary{
    color:white;

    background:
        linear-gradient(
            180deg,
            #17cdec,
            #0875bf
        );

    box-shadow:
        0 0 20px rgba(16,201,240,.24);
}


/* =========================================================
   QUICK CARDS V4
   ========================================================= */

.vk-home-quick-grid{
    position:relative;

    width:94%;

    margin:
        -14px auto
        16px;

    padding:9px;

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:12px;

    z-index:15;

    border:
        1px solid rgba(61,204,237,.08);

    border-radius:
        17px;

    background:
        rgba(2,7,18,.42);

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

.vk-home-quick{
    position:relative;

    aspect-ratio:1983 / 793;

    overflow:hidden;

    filter:
        drop-shadow(
            0 8px 14px rgba(0,0,0,.55)
        );
}

.vk-home-quick > img{
    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:contain;
}

.vk-home-quick-copy{
    position:absolute;

    z-index:3;

    top:50%;

    right:6%;

    width:46%;

    transform:
        translateY(-50%);

    text-shadow:
        0 2px 8px rgba(0,0,0,.85);
}

.vk-home-quick-copy small{
    display:block;

    color:#62eaff;

    font-size:8px;

    font-weight:900;

    letter-spacing:.13em;
}

.vk-home-quick-copy strong{
    display:block;

    margin-top:3px;

    font-size:19px;

    line-height:1;
}

.vk-home-quick-copy p{
    margin:
        7px
        0
        0;

    color:#a7b5cb;

    font-size:9px;

    line-height:1.45;
}


/* =========================================================
   FEATURE CARDS V4
   ========================================================= */

.vk-home-feature-grid{
    width:94%;

    margin:
        0 auto;

    padding:10px;

    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:12px;

    border:
        1px solid rgba(61,204,237,.08);

    border-radius:
        17px;

    background:
        rgba(2,7,18,.48);

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

.vk-home-feature{
    position:relative;

    aspect-ratio:1024 / 1536;

    overflow:hidden;

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

.vk-home-feature > img{
    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:contain;
}

.vk-home-feature-copy{
    position:absolute;

    z-index:4;

    left:11%;
    right:11%;

    bottom:7%;

    text-align:center;

    text-shadow:
        0 2px 8px rgba(0,0,0,.9);
}

.vk-home-feature h3{
    margin:0;

    font-size:18px;

    line-height:1.1;
}

.vk-home-feature p{
    min-height:34px;

    margin:
        7px
        0
        10px;

    color:#a0aec5;

    font-size:9px;

    line-height:1.5;
}

.vk-home-feature-action{
    height:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#72ecff;

    border:
        1px solid rgba(62,218,255,.30);

    background:
        rgba(4,25,52,.79);

    font-size:8px;

    font-weight:900;

    letter-spacing:.11em;
}


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

.vk-home-footer{
    position:relative;

    z-index:20;

    border-top:
        1px solid rgba(57,202,238,.13);

    background:
        rgba(2,6,16,.74);
}

.vk-home-footer-inner{
    width:min(
        var(--vk-width),
        calc(100% - 40px)
    );

    min-height:80px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    color:#697791;

    font-size:9px;

    letter-spacing:.08em;
}

.vk-home-footer img{
    width:105px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1050px){

    .vk-home-nav-inner{
        grid-template-columns:
            180px
            1fr
            180px;
    }

    .vk-home-menu{
        gap:17px;
    }

    .vk-home-side{
        opacity:.25;
    }

    .vk-home-feature-grid{
        grid-template-columns:
            repeat(2,1fr);
    }
}


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

@media(max-width:760px){

    body{
        background-attachment:scroll;
    }

    .vk-home-side{
        display:none;
    }

    .vk-home-nav{
        height:68px;
    }

    .vk-home-nav-inner{
        grid-template-columns:
            1fr auto;
    }

    .vk-home-menu{
        display:none;
    }

    .vk-home-logo img{
        width:145px;
    }

    .vk-home-main{
        width:
            calc(100% - 20px);

        padding-top:14px;
    }

    .vk-home-main::before{
        left:-10px;
        right:-10px;
    }

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

        aspect-ratio:auto;
    }

    .vk-home-hero::after{
        background-size:
            cover;
    }

    .vk-home-hero-copy{
        left:6%;
        right:6%;

        top:8%;

        width:auto;

        transform:none;

        padding:18px;
    }

    .vk-home-world{
        width:82%;

        height:43%;

        right:9%;

        top:auto;

        bottom:7%;
    }

    .vk-home-quick-grid,
    .vk-home-feature-grid{
        width:100%;

        grid-template-columns:1fr;
    }

    .vk-home-quick-grid{
        margin-top:5px;
    }

    .vk-home-footer-inner{
        flex-direction:column;

        justify-content:center;

        gap:9px;

        padding:
            18px
            0;
    }
}