/* ============================================================
   VOLTKIN HOME V6
   CINEMATIC GAME PORTAL
   DARK VIOLET / CYBERPUNK / LO-FI
============================================================ */

:root{
    --bg:#05030a;
    --bg2:#080411;
    --panel:#0c0814;
    --panel2:#120a1e;

    --violet:#9b4dff;
    --violet2:#c466ff;
    --purple:#7136db;
    --pink:#ef68ff;
    --cyan:#40d9ff;

    --white:#f7f2ff;
    --text:#c4b9d1;
    --muted:#766c82;

    --green:#5ee6ad;

    --line:rgba(174,96,255,.20);
    --line2:rgba(198,111,255,.42);

    --shadow:
        0 30px 100px rgba(0,0,0,.45);

    --radius:22px;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    overflow-x:hidden;

    background:
        radial-gradient(
            circle at 75% 8%,
            rgba(113,54,219,.15),
            transparent 28%
        ),
        radial-gradient(
            circle at 10% 45%,
            rgba(155,77,255,.10),
            transparent 28%
        ),
        #05030a;

    color:var(--white);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

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

button{
    font:inherit;
}

img{
    max-width:100%;
}


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

.vk-site{
    position:relative;
    min-height:100vh;
    isolation:isolate;
}

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

    position:fixed;
    inset:0;

    z-index:-20;

    pointer-events:none;

    opacity:.23;

    background-image:
        linear-gradient(
            rgba(160,90,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(160,90,255,.035) 1px,
            transparent 1px
        );

    background-size:54px 54px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 82%
        );
}

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

    position:fixed;
    inset:0;

    z-index:9999;

    pointer-events:none;

    opacity:.055;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.03) 0,
            rgba(255,255,255,.03) 1px,
            transparent 1px,
            transparent 4px
        );
}

.vk-glow{
    position:fixed;
    z-index:-10;

    border-radius:50%;

    filter:blur(120px);

    pointer-events:none;

    opacity:.24;

    animation:
        vkGlowMove
        18s ease-in-out
        infinite alternate;
}

.vk-glow.one{
    width:600px;
    height:600px;

    top:12%;
    left:-260px;

    background:#7136db;
}

.vk-glow.two{
    width:620px;
    height:620px;

    top:38%;
    right:-270px;

    background:#9b4dff;

    animation-delay:-7s;
}

@keyframes vkGlowMove{
    from{
        transform:
            translate3d(0,0,0)
            scale(.9);
    }

    to{
        transform:
            translate3d(65px,-35px,0)
            scale(1.08);
    }
}


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

.vk-nav{
    position:fixed;

    top:16px;
    left:50%;

    transform:translateX(-50%);

    z-index:1000;

    width:min(
        1460px,
        calc(100% - 36px)
    );

    min-height:72px;

    display:flex;
    align-items:center;

    gap:28px;

    padding:
        12px
        14px
        12px
        20px;

    border:
        1px solid rgba(180,105,255,.22);

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            rgba(9,5,16,.91),
            rgba(15,7,26,.84)
        );

    backdrop-filter:
        blur(24px);

    box-shadow:
        0 20px 70px rgba(0,0,0,.38),
        inset 0 1px rgba(255,255,255,.035);
}

.vk-logo{
    flex:0 0 auto;
}

.vk-logo img{
    display:block;
    width:190px;
}

.vk-menu{
    display:flex;
    align-items:center;

    gap:30px;

    margin-left:auto;
}

.vk-menu a{
    position:relative;

    color:#aaa0b5;

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

    letter-spacing:.09em;
    text-transform:uppercase;

    transition:.2s;
}

.vk-menu a:hover{
    color:#fff;
}

.vk-menu a::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:-12px;

    width:0;
    height:2px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            #944dff,
            #ee72ff
        );

    box-shadow:
        0 0 14px rgba(179,84,255,.8);

    transition:.25s;
}

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

.vk-account-actions{
    display:flex;
    align-items:center;

    gap:9px;
}

.vk-login-btn,
.vk-register-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:42px;

    padding:0 17px;

    border-radius:11px;

    font-size:10px;
    font-weight:900;

    letter-spacing:.08em;
    text-transform:uppercase;

    cursor:pointer;
}

.vk-login-btn{
    color:#c7bccf;

    border:
        1px solid rgba(180,107,255,.25);

    background:
        rgba(8,5,14,.36);
}

.vk-register-btn{
    color:white;

    border:
        1px solid rgba(216,141,255,.66);

    background:
        linear-gradient(
            135deg,
            #6d37d4,
            #a74bff
        );

    box-shadow:
        0 0 30px rgba(146,68,255,.25);
}


/* ============================================================
   SIDE RAIL
============================================================ */

.vk-side-rail{
    position:fixed;

    z-index:100;

    left:18px;
    top:50%;

    transform:
        translateY(-50%);

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:16px;
}

.vk-side-line{
    width:1px;
    height:50px;

    background:
        linear-gradient(
            transparent,
            rgba(191,115,255,.55),
            transparent
        );
}

.vk-side-word{
    writing-mode:
        vertical-rl;

    transform:
        rotate(180deg);

    color:#807389;

    font-size:9px;
    font-weight:900;

    letter-spacing:.22em;
    text-transform:uppercase;
}

.vk-side-dot{
    width:8px;
    height:8px;

    border-radius:50%;

    background:#a254ff;

    box-shadow:
        0 0 14px rgba(162,84,255,.8);
}


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

.vk-hero{
    position:relative;

    min-height:960px;

    display:flex;
    align-items:center;

    overflow:hidden;

    padding:
        170px
        max(7vw, 60px)
        115px;

    background:
        linear-gradient(
            90deg,
            rgba(4,2,9,.98) 0%,
            rgba(6,3,13,.91) 28%,
            rgba(8,3,16,.51) 54%,
            rgba(4,2,9,.16) 100%
        ),
        linear-gradient(
            0deg,
            #05030a 0%,
            transparent 38%
        ),
        url(
            "/static/voltkin/assets/backgrounds/home_hero_1920x1080.png"
        );

    background-size:cover;
    background-position:center;
}

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

    position:absolute;

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

    height:240px;

    background:
        linear-gradient(
            transparent,
            #05030a
        );
}

.vk-hero-shell{
    position:relative;

    z-index:5;

    width:min(
        1380px,
        100%
    );

    margin:0 auto;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        380px;

    gap:70px;

    align-items:center;
}

.vk-hero-main{
    max-width:840px;
}

.vk-kicker{
    display:flex;
    align-items:center;

    gap:12px;

    margin-bottom:23px;

    color:#bd75ff;

    font-size:10px;
    font-weight:900;

    letter-spacing:.24em;
    text-transform:uppercase;
}

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

    width:45px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            #b25eff,
            transparent
        );
}

.vk-hero h1{
    margin:0;

    font-size:
        clamp(
            61px,
            7vw,
            114px
        );

    line-height:.88;

    letter-spacing:-.06em;

    font-weight:950;
}

.vk-hero h1 .gradient{
    display:block;

    margin-top:9px;

    color:transparent;

    background:
        linear-gradient(
            100deg,
            #fff 0%,
            #e2c7ff 28%,
            #ba74ff 62%,
            #ed7cff 100%
        );

    -webkit-background-clip:text;
    background-clip:text;

    filter:
        drop-shadow(
            0 0 24px rgba(165,75,255,.18)
        );
}

.vk-hero-tagline{
    margin-top:19px;

    color:#9f65ff;

    font-size:13px;
    font-weight:900;

    letter-spacing:.34em;
    text-transform:uppercase;
}

.vk-hero-copy{
    max-width:620px;

    margin-top:26px;

    color:#aaa0b4;

    font-size:17px;
    line-height:1.75;
}

.vk-hero-copy strong{
    color:#e7def0;
}

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

    gap:12px;

    margin-top:34px;
}

.vk-primary-button,
.vk-secondary-button{
    min-height:55px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:10px;

    padding:0 26px;

    border-radius:12px;

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

    letter-spacing:.07em;
    text-transform:uppercase;

    transition:
        transform .2s,
        box-shadow .2s;
}

.vk-primary-button{
    color:white;

    border:
        1px solid rgba(218,148,255,.69);

    background:
        linear-gradient(
            135deg,
            #7538dc,
            #b246ff
        );

    box-shadow:
        0 13px 42px rgba(138,58,235,.32);
}

.vk-primary-button:hover{
    transform:
        translateY(-2px);

    box-shadow:
        0 18px 52px rgba(142,62,244,.44);
}

.vk-secondary-button{
    color:#d2c7dc;

    border:
        1px solid rgba(174,103,255,.27);

    background:
        rgba(8,5,15,.57);

    backdrop-filter:
        blur(12px);
}


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

.vk-hero-metrics{
    display:grid;

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

    max-width:650px;

    gap:1px;

    margin-top:48px;

    overflow:hidden;

    border:
        1px solid rgba(173,96,255,.16);

    border-radius:14px;

    background:
        rgba(136,64,225,.09);
}

.vk-hero-metric{
    padding:18px;

    background:
        rgba(8,5,14,.75);
}

.vk-hero-metric strong{
    display:block;

    font-size:18px;

    color:#efe7f7;
}

.vk-hero-metric span{
    display:block;

    margin-top:4px;

    color:#72687c;

    font-size:8px;
    font-weight:900;

    letter-spacing:.14em;
    text-transform:uppercase;
}


/* ============================================================
   HERO FLOATING HUD
============================================================ */

.vk-hero-hud{
    position:relative;

    min-height:560px;
}

.vk-hud{
    position:absolute;

    overflow:hidden;

    border:
        1px solid rgba(186,108,255,.27);

    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            rgba(18,9,32,.89),
            rgba(8,5,14,.84)
        );

    backdrop-filter:
        blur(22px);

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

.vk-hud.large{
    top:0;
    right:0;

    width:330px;
}

.vk-hud.small{
    left:-30px;
    bottom:28px;

    width:255px;
}

.vk-hud img{
    display:block;

    width:100%;
    height:175px;

    object-fit:cover;

    filter:
        saturate(.80)
        brightness(.74)
        contrast(1.06);
}

.vk-hud-body{
    padding:18px;
}

.vk-hud-label{
    margin-bottom:7px;

    color:#bb72ff;

    font-size:8px;
    font-weight:900;

    letter-spacing:.18em;
    text-transform:uppercase;
}

.vk-hud h3{
    margin:0;

    font-size:17px;
}

.vk-hud p{
    margin:
        7px 0 0;

    color:#81758b;

    font-size:11px;
    line-height:1.55;
}

.vk-status-line{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-top:15px;

    color:#72687d;

    font-size:9px;
}

.vk-online{
    color:#62e5ad;
}

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

    display:inline-block;

    width:6px;
    height:6px;

    margin-right:6px;

    border-radius:50%;

    background:#62e5ad;

    box-shadow:
        0 0 11px rgba(98,229,173,.75);
}


/* ============================================================
   LIVE SIGNAL BAR
============================================================ */

.vk-live-wrap{
    position:relative;

    z-index:20;

    margin-top:-57px;
}

.vk-live{
    width:min(
        1370px,
        calc(100% - 42px)
    );

    margin:0 auto;

    display:grid;

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

    min-height:120px;

    overflow:hidden;

    border:
        1px solid rgba(174,96,255,.25);

    border-radius:19px;

    background:
        rgba(10,5,18,.94);

    backdrop-filter:
        blur(26px);

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

.vk-live-block{
    padding:22px 25px;
}

.vk-live-block + .vk-live-block{
    border-left:
        1px solid rgba(165,91,255,.12);
}

.vk-mini-label{
    color:#ad67ff;

    font-size:8px;
    font-weight:900;

    letter-spacing:.2em;
    text-transform:uppercase;
}

.vk-live-title{
    margin-top:8px;

    font-size:18px;
    font-weight:850;
}

.vk-live-copy{
    display:flex;
    align-items:center;

    gap:14px;

    color:#a296aa;

    font-size:12px;
    line-height:1.6;
}

.vk-pulse{
    flex:0 0 auto;

    width:9px;
    height:9px;

    border-radius:50%;

    background:#ac5cff;

    box-shadow:
        0 0 16px rgba(172,92,255,.9);

    animation:
        vkPulse
        1.8s infinite;
}

@keyframes vkPulse{
    50%{
        opacity:.33;
        transform:
            scale(.7);
    }
}


/* ============================================================
   COMMON SECTION
============================================================ */

.vk-section{
    width:min(
        1370px,
        calc(100% - 42px)
    );

    margin:0 auto;

    padding:
        100px
        0;
}

.vk-section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;

    gap:40px;

    margin-bottom:42px;
}

.vk-section-head-main{
    max-width:760px;
}

.vk-section-tag{
    margin-bottom:12px;

    color:#ae69ff;

    font-size:9px;
    font-weight:900;

    letter-spacing:.22em;
    text-transform:uppercase;
}

.vk-section-head h2{
    margin:0;

    font-size:
        clamp(
            35px,
            4vw,
            59px
        );

    line-height:1.02;

    letter-spacing:-.045em;
}

.vk-section-head h2 span{
    color:#b870ff;
}

.vk-section-head p{
    max-width:650px;

    margin:
        17px 0
        0;

    color:#8e8298;

    font-size:14px;
    line-height:1.75;
}

.vk-section-code{
    color:#655b70;

    font-size:9px;
    font-weight:900;

    letter-spacing:.16em;
    text-align:right;
}


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

.vk-feature-grid{
    display:grid;

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

    gap:14px;
}

.vk-feature-card{
    position:relative;

    min-height:430px;

    overflow:hidden;

    border:
        1px solid rgba(166,93,255,.17);

    border-radius:21px;

    background:#0b0712;

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

.vk-feature-card img{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    filter:
        brightness(.58)
        saturate(.78)
        contrast(1.08);

    transition:
        transform .65s,
        filter .65s;
}

.vk-feature-card:hover img{
    transform:
        scale(1.055);

    filter:
        brightness(.69)
        saturate(.93)
        contrast(1.06);
}

.vk-feature-card::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(8,4,15,.05),
            rgba(8,4,15,.30) 45%,
            rgba(5,3,10,.97) 100%
        ),
        linear-gradient(
            120deg,
            rgba(106,35,199,.19),
            transparent 50%
        );
}

.vk-feature-card-content{
    position:absolute;

    z-index:3;

    left:23px;
    right:23px;
    bottom:24px;
}

.vk-feature-card-number{
    margin-bottom:11px;

    color:#b86fff;

    font-size:8px;
    font-weight:900;

    letter-spacing:.18em;
}

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

    font-size:20px;
}

.vk-feature-card p{
    margin:
        9px 0
        0;

    color:#978a9f;

    font-size:12px;
    line-height:1.6;
}

.vk-feature-link{
    display:inline-block;

    margin-top:17px;

    color:#ca8aff;

    font-size:9px;
    font-weight:900;

    letter-spacing:.12em;
    text-transform:uppercase;
}


/* ============================================================
   STORY CINEMATIC
============================================================ */

.vk-story{
    position:relative;

    min-height:640px;

    display:flex;
    align-items:center;

    overflow:hidden;

    border:
        1px solid rgba(171,96,255,.20);

    border-radius:27px;

    background:
        linear-gradient(
            90deg,
            rgba(8,4,14,.98) 0%,
            rgba(9,4,16,.90) 38%,
            rgba(9,4,17,.38) 68%,
            rgba(7,3,13,.12) 100%
        ),
        url(
            "/static/voltkin/assets/backgrounds/news_devlog_1920x1080.png"
        );

    background-size:cover;
    background-position:center;

    box-shadow:var(--shadow);
}

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

    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            0deg,
            rgba(7,3,12,.82),
            transparent 45%
        );
}

.vk-story-content{
    position:relative;

    z-index:3;

    max-width:660px;

    padding:
        70px;
}

.vk-story-content h2{
    margin:0;

    font-size:
        clamp(
            39px,
            4.8vw,
            69px
        );

    line-height:1;

    letter-spacing:-.045em;
}

.vk-story-content h2 span{
    color:#b86cff;
}

.vk-story-content p{
    margin-top:22px;

    color:#a095aa;

    font-size:15px;
    line-height:1.8;
}

.vk-quote{
    margin-top:28px;

    padding-left:18px;

    border-left:
        2px solid #a85aff;

    color:#dfd3e9;

    font-size:12px;
    font-style:italic;
}


/* ============================================================
   STATS
============================================================ */

.vk-stats{
    display:grid;

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

    overflow:hidden;

    border:
        1px solid rgba(165,90,255,.16);

    border-radius:20px;

    background:
        rgba(11,6,19,.70);
}

.vk-stat{
    padding:
        30px 25px;

    border-right:
        1px solid rgba(165,90,255,.11);
}

.vk-stat:last-child{
    border-right:0;
}

.vk-stat-icon{
    margin-bottom:18px;

    color:#b76cff;

    font-size:24px;
}

.vk-stat strong{
    display:block;

    font-size:22px;
}

.vk-stat span{
    display:block;

    margin-top:5px;

    color:#766b80;

    font-size:10px;

    letter-spacing:.08em;
    text-transform:uppercase;
}


/* ============================================================
   DEVELOPMENT / COMMUNITY
============================================================ */

.vk-dual{
    display:grid;

    grid-template-columns:
        1.1fr
        .9fr;

    gap:15px;
}

.vk-panel{
    overflow:hidden;

    border:
        1px solid rgba(165,92,255,.17);

    border-radius:23px;

    background:
        linear-gradient(
            145deg,
            rgba(18,9,31,.86),
            rgba(7,5,13,.90)
        );

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

.vk-panel-head{
    padding:
        27px 28px;

    border-bottom:
        1px solid rgba(165,92,255,.11);
}

.vk-panel-head h3{
    margin:
        8px 0
        0;

    font-size:26px;
}

.vk-feed{
    padding:
        8px 28px
        18px;
}

.vk-feed-row{
    display:grid;

    grid-template-columns:
        12px
        1fr
        auto;

    gap:13px;

    align-items:start;

    padding:
        18px 0;

    border-bottom:
        1px solid rgba(160,88,255,.09);
}

.vk-feed-row:last-child{
    border-bottom:0;
}

.vk-feed-dot{
    width:8px;
    height:8px;

    margin-top:5px;

    border-radius:50%;

    background:#a65cff;

    box-shadow:
        0 0 10px rgba(166,92,255,.7);
}

.vk-feed-row strong{
    display:block;

    font-size:13px;
}

.vk-feed-row p{
    margin:
        4px 0
        0;

    color:#81768c;

    font-size:11px;
    line-height:1.55;
}

.vk-feed-time{
    color:#665d70;

    font-size:9px;
}


/* ============================================================
   COMMUNITY VISUAL PANEL
============================================================ */

.vk-community-panel{
    position:relative;

    min-height:520px;

    overflow:hidden;

    background:
        linear-gradient(
            0deg,
            rgba(5,3,10,.96),
            transparent 60%
        ),
        url(
            "/static/voltkin/assets/backgrounds/community_1920x1080.png"
        );

    background-size:cover;
    background-position:center;
}

.vk-community-content{
    position:absolute;

    z-index:3;

    left:30px;
    right:30px;
    bottom:30px;
}

.vk-community-content h3{
    margin:
        8px 0
        8px;

    font-size:31px;
}

.vk-community-content p{
    max-width:480px;

    margin:0;

    color:#978ba1;

    font-size:12px;
    line-height:1.65;
}


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

.vk-final{
    position:relative;

    overflow:hidden;

    margin-bottom:70px;

    padding:
        74px 55px;

    border:
        1px solid rgba(177,100,255,.23);

    border-radius:26px;

    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(148,65,255,.28),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #130920,
            #08050e
        );

    box-shadow:var(--shadow);
}

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

    position:absolute;

    right:-90px;
    top:-90px;

    width:400px;
    height:400px;

    border:
        1px solid rgba(185,110,255,.15);

    border-radius:50%;
}

.vk-final h2{
    position:relative;
    z-index:2;

    max-width:780px;

    margin:0;

    font-size:
        clamp(
            40px,
            5vw,
            73px
        );

    line-height:.98;

    letter-spacing:-.05em;
}

.vk-final h2 span{
    color:#b96eff;
}

.vk-final p{
    position:relative;
    z-index:2;

    max-width:600px;

    margin:
        18px 0
        30px;

    color:#978a9f;

    line-height:1.7;
}

.vk-final .vk-primary-button{
    position:relative;
    z-index:3;
}


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

.vk-footer{
    padding:
        0
        30px
        40px;
}

.vk-footer-inner{
    width:min(
        1370px,
        100%
    );

    margin:0 auto;

    display:grid;

    grid-template-columns:
        1fr
        auto;

    gap:30px;

    padding:
        35px 0;

    border-top:
        1px solid rgba(163,91,255,.13);
}

.vk-footer-logo img{
    width:150px;
}

.vk-footer-copy{
    margin-top:12px;

    color:#655d70;

    font-size:9px;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.vk-footer-links{
    display:flex;
    align-items:center;

    gap:25px;

    color:#776d81;

    font-size:10px;
}


/* ============================================================
   LOGGED-IN HOME STATE
============================================================ */

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

    gap:7px;

    color:#cbbfd5;

    font-size:10px;
    font-weight:850;
}

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

    width:7px;
    height:7px;

    border-radius:50%;

    background:#63e5ad;

    box-shadow:
        0 0 10px rgba(99,229,173,.65);
}


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

@media(max-width:1160px){

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

    .vk-menu{
        display:none;
    }

    .vk-hero-shell{
        grid-template-columns:1fr;
    }

    .vk-hero-hud{
        display:none;
    }

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

    .vk-dual{
        grid-template-columns:1fr;
    }

    .vk-live{
        grid-template-columns:
            1fr 1fr;
    }

    .vk-live-block:last-child{
        display:none;
    }
}


@media(max-width:760px){

    .vk-nav{
        top:10px;

        width:
            calc(100% - 20px);

        min-height:60px;

        padding:
            9px 11px;
    }

    .vk-logo img{
        width:135px;
    }

    .vk-login-btn{
        display:none;
    }

    .vk-register-btn{
        min-height:38px;
        padding:0 12px;
    }

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

        padding:
            125px
            22px
            80px;

        background-position:
            64% center;
    }

    .vk-hero h1{
        font-size:
            clamp(
                49px,
                17vw,
                78px
            );
    }

    .vk-hero-copy{
        font-size:14px;
    }

    .vk-hero-metrics{
        grid-template-columns:1fr;
    }

    .vk-live-wrap{
        margin-top:-25px;
    }

    .vk-live{
        grid-template-columns:1fr;
    }

    .vk-live-block + .vk-live-block{
        border-left:0;

        border-top:
            1px solid rgba(165,91,255,.12);
    }

    .vk-section{
        width:
            calc(100% - 28px);

        padding:
            67px 0;
    }

    .vk-section-head{
        align-items:flex-start;
        flex-direction:column;
    }

    .vk-section-code{
        display:none;
    }

    .vk-feature-grid{
        grid-template-columns:1fr;
    }

    .vk-feature-card{
        min-height:420px;
    }

    .vk-story{
        min-height:570px;

        background-position:
            67% center;
    }

    .vk-story-content{
        padding:
            40px 24px;
    }

    .vk-stats{
        grid-template-columns:
            1fr 1fr;
    }

    .vk-stat:nth-child(2){
        border-right:0;
    }

    .vk-stat{
        border-bottom:
            1px solid rgba(165,90,255,.11);
    }

    .vk-final{
        padding:
            50px 24px;
    }

    .vk-footer-inner{
        grid-template-columns:1fr;
    }

    .vk-footer-links{
        flex-wrap:wrap;
    }
}