/* =========================================================
   VOSTOK LOGISTIKA HERO V2
   ========================================================= */

.vlh2-hero,
.vlh2-hero *{
    box-sizing:border-box;
}

.vlh2-hero{
    --ocean:#176B87;
    --ice:#58C3D9;
    --dark:#08141D;
    --dark2:#102633;

    --px:70%;
    --py:35%;

    position:relative;

    width:100%;

    min-height:720px;

    overflow:hidden;

    isolation:isolate;

    background:
        radial-gradient(
            circle at var(--px) var(--py),
            rgba(88,195,217,.13),
            transparent 24%
        ),
        radial-gradient(
            circle at 82% 20%,
            rgba(20,119,153,.17),
            transparent 35%
        ),
        linear-gradient(
            125deg,
            #07131c 0%,
            #0a1822 47%,
            #102d3b 100%
        );

    color:#fff;

    font-family:'Montserrat',Arial,sans-serif;
}


/* ========================================
   PARTICLES
   ======================================== */

.vlh2-particles{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    z-index:0;

    opacity:.8;

    pointer-events:none;
}


/* ========================================
   GRID
   ======================================== */

.vlh2-grid{
    position:absolute;

    inset:0;

    z-index:0;

    opacity:.11;

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

    background-size:70px 70px;

    mask-image:
        radial-gradient(
            circle at 75% 45%,
            black,
            transparent 70%
        );

    pointer-events:none;
}


/* ========================================
   CURSOR LIGHT
   ======================================== */

.vlh2-cursor-light{
    position:absolute;

    z-index:1;

    width:500px;
    height:500px;

    left:var(--px);
    top:var(--py);

    transform:
        translate(-50%,-50%);

    border-radius:50%;

    opacity:.38;

    filter:blur(12px);

    background:
        radial-gradient(
            circle,
            rgba(88,195,217,.14) 0%,
            rgba(23,107,135,.07) 34%,
            transparent 70%
        );

    pointer-events:none;

    transition:
        opacity .25s ease;
}


/* ========================================
   AURORA
   ======================================== */

.vlh2-aurora{
    position:absolute;

    z-index:0;

    border-radius:50%;

    filter:blur(90px);

    pointer-events:none;

    animation:
        vlh2Aurora
        11s
        ease-in-out
        infinite alternate;
}

.vlh2-aurora-a{
    width:420px;
    height:420px;

    top:-160px;
    right:8%;

    background:
        rgba(88,195,217,.13);
}

.vlh2-aurora-b{
    width:500px;
    height:500px;

    right:37%;
    bottom:-330px;

    background:
        rgba(23,107,135,.18);

    animation-delay:-5s;
}


/* ========================================
   SHELL
   ======================================== */

.vlh2-shell{
    position:relative;

    z-index:4;

    width:min(
        1380px,
        calc(100% - 72px)
    );

    min-height:720px;

    margin:0 auto;

    padding:
        82px
        0
        98px;

    display:grid;

    grid-template-columns:
        minmax(0,.89fr)
        minmax(560px,1.11fr);

    gap:55px;

    align-items:center;
}


/* ========================================
   COPY
   ======================================== */

.vlh2-copy{
    max-width:675px;
}

.vlh2-kicker{
    display:inline-flex;

    align-items:center;

    gap:11px;

    margin-bottom:23px;

    color:#8fb4c1;

    font-size:10px;
    line-height:1;

    font-weight:700;

    letter-spacing:.16em;
}

.vlh2-kicker i{
    width:7px;
    height:7px;

    border-radius:50%;

    background:#58C3D9;

    box-shadow:
        0 0 0 7px rgba(88,195,217,.07),
        0 0 18px rgba(88,195,217,.55);

    animation:
        vlh2PulseDot
        2.4s
        ease-in-out
        infinite;
}


/* TITLE */

.vlh2-title{
    margin:0 !important;

    max-width:650px;

    font-family:'Montserrat',Arial,sans-serif !important;

    font-weight:760 !important;

    text-transform:none !important;

    letter-spacing:-.058em !important;
}

.vlh2-title-main{
    display:block;

    color:#fff;

    font-size:
        clamp(56px,5vw,76px);

    line-height:1.03;
}

.vlh2-title-accent{
    position:relative;

    display:block;

    width:max-content;

    max-width:100%;

    margin-top:10px;

    font-size:
        clamp(56px,5vw,76px);

    line-height:1;

    color:#58C3D9;

    background:
        linear-gradient(
            90deg,
            #45B9D1 0%,
            #8DECF6 45%,
            #58C3D9 72%,
            #45A8C0 100%
        );

    background-size:220% 100%;

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

    -webkit-text-fill-color:transparent;

    animation:
        vlh2TextFlow
        5s
        linear
        infinite;
}


/* LEAD */

.vlh2-lead{
    max-width:620px;

    margin:
        28px
        0
        0 !important;

    color:#b4c5cc !important;

    font-family:'Montserrat',Arial,sans-serif !important;

    font-size:16px !important;

    line-height:1.72 !important;

    font-weight:450 !important;
}


/* ========================================
   NEON FOLLOW EFFECT
   ======================================== */

.vlh2-neon{
    position:relative;

    isolation:isolate;
}

.vlh2-neon::after{
    content:"";

    position:absolute;

    z-index:-1;

    left:var(--nx,50%);
    top:var(--ny,50%);

    width:150px;
    height:90px;

    transform:
        translate(-50%,-50%);

    border-radius:50%;

    opacity:0;

    pointer-events:none;

    background:
        radial-gradient(
            circle,
            rgba(88,195,217,.15),
            rgba(88,195,217,.055) 35%,
            transparent 72%
        );

    filter:blur(10px);

    transition:
        opacity .25s ease;
}

.vlh2-neon:hover::after{
    opacity:1;
}


/* ========================================
   ACTIONS
   ======================================== */

.vlh2-actions{
    margin-top:34px;

    display:flex;

    align-items:center;

    gap:12px;
}

.vlh2-primary,
.vlh2-secondary{
    position:relative;

    height:57px;

    border-radius:999px;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    font-family:'Montserrat',Arial,sans-serif !important;

    font-size:12px !important;

    line-height:1 !important;

    font-weight:700 !important;

    text-decoration:none !important;

    will-change:transform;

    transition:
        transform .2s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease !important;
}

.vlh2-primary{
    min-width:237px;

    padding:
        0
        8px
        0
        25px;

    color:#fff !important;

    background:
        linear-gradient(
            110deg,
            #176B87,
            #1B7E9C
        );

    box-shadow:
        0 17px 40px
        rgba(23,107,135,.28),
        inset 0 1px rgba(255,255,255,.13);

    overflow:hidden;
}

.vlh2-primary::before{
    content:"";

    position:absolute;

    top:-80%;
    left:-30%;

    width:85px;
    height:180px;

    transform:
        rotate(28deg);

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

    animation:
        vlh2ButtonSweep
        4.6s
        ease-in-out
        infinite;
}

.vlh2-primary i{
    width:42px;
    height:42px;

    margin-left:auto;

    border-radius:50%;

    display:grid;

    place-items:center;

    background:
        rgba(255,255,255,.13);

    transition:
        transform .3s ease,
        background .3s ease;
}

.vlh2-primary svg{
    width:17px;
    height:17px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.vlh2-primary:hover{
    color:#fff !important;

    box-shadow:
        0 20px 52px
        rgba(46,168,201,.35),
        0 0 0 1px
        rgba(123,231,247,.12);
}

.vlh2-primary:hover i{
    transform:
        translateX(3px)
        rotate(-4deg);

    background:
        rgba(255,255,255,.20);
}

.vlh2-secondary{
    min-width:148px;

    padding:0 23px;

    color:#d7e4e8 !important;

    border:
        1px solid
        rgba(255,255,255,.14);

    background:
        rgba(255,255,255,.035);

    backdrop-filter:blur(10px);
}

.vlh2-secondary:hover{
    color:#fff !important;

    border-color:
        rgba(88,195,217,.40);

    background:
        rgba(88,195,217,.065);

    box-shadow:
        0 0 25px
        rgba(88,195,217,.08);
}


/* ========================================
   CLIENTS
   ======================================== */

.vlh2-client-row{
    margin-top:29px;

    display:flex;

    gap:25px;
}

.vlh2-client{
    display:flex;

    align-items:center;

    gap:9px;

    color:#7f959e;

    font-size:9px;

    font-weight:600;
}

.vlh2-client>i{
    width:22px;
    height:22px;

    display:grid;

    place-items:center;

    color:#58C3D9;
}

.vlh2-client svg{
    width:17px;
    height:17px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.55;
    stroke-linecap:round;
    stroke-linejoin:round;

    transition:
        filter .25s ease,
        transform .25s ease;
}

.vlh2-client:hover svg{
    transform:scale(1.08);

    filter:
        drop-shadow(
            0 0 8px
            rgba(88,195,217,.65)
        );
}


/* ========================================
   VISUAL AREA
   ======================================== */

.vlh2-visual{
    position:relative;

    height:530px;

    display:flex;

    align-items:center;
    justify-content:center;

    perspective:1200px;
}


/* HALOS */

.vlh2-halo{
    position:absolute;

    border-radius:50%;

    pointer-events:none;

    border:
        1px solid
        rgba(88,195,217,.08);

    animation:
        vlh2HaloSpin
        28s
        linear
        infinite;
}

.vlh2-halo-a{
    width:500px;
    height:500px;
}

.vlh2-halo-b{
    width:620px;
    height:620px;

    opacity:.55;

    animation-direction:reverse;
}

.vlh2-halo-c{
    width:740px;
    height:740px;

    opacity:.25;

    animation-duration:40s;
}


/* ========================================
   NETWORK CARD
   ======================================== */

.vlh2-network{
    position:relative;

    z-index:4;

    width:min(650px,100%);

    border:
        1px solid
        rgba(139,226,241,.13);

    border-radius:30px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.025)
        );

    box-shadow:
        0 50px 120px
        rgba(0,0,0,.34),

        inset 0 1px
        rgba(255,255,255,.08),

        0 0 60px
        rgba(24,120,151,.06);

    backdrop-filter:
        blur(22px);

    transform-style:preserve-3d;

    will-change:transform;

    transition:
        transform .12s linear;
}


/* CARD TOP */

.vlh2-network-head{
    height:72px;

    padding:
        0
        23px;

    display:flex;

    align-items:center;
    justify-content:space-between;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);
}

.vlh2-network-head small{
    display:block;

    color:#6d8b98;

    font-size:7.5px;

    letter-spacing:.15em;

    font-weight:700;
}

.vlh2-network-head strong{
    display:block;

    margin-top:6px;

    color:#eef6f8;

    font-size:14px;

    font-weight:650;
}

.vlh2-network-head strong span{
    color:#58C3D9;
}

.vlh2-network-live{
    display:flex;

    align-items:center;

    gap:7px;

    color:#73919d;

    font-size:7.5px;

    letter-spacing:.09em;

    font-weight:700;
}

.vlh2-network-live i{
    width:6px;
    height:6px;

    border-radius:50%;

    background:#58C3D9;

    box-shadow:
        0 0 0 5px
        rgba(88,195,217,.07),

        0 0 14px
        rgba(88,195,217,.55);

    animation:
        vlh2PulseDot
        2s
        ease-in-out
        infinite;
}


/* ========================================
   MAP
   ======================================== */

.vlh2-map{
    position:relative;

    height:350px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 30% 50%,
            rgba(88,195,217,.05),
            transparent 28%
        );
}

.vlh2-map::before{
    content:"";

    position:absolute;

    inset:0;

    opacity:.12;

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

    background-size:
        40px
        40px;
}

.vlh2-map-svg{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;
}


/* ROUTES */

.vlh2-route-base{
    fill:none;

    stroke:
        rgba(107,167,188,.13);

    stroke-width:1.2;
}

.vlh2-route-energy{
    fill:none;

    stroke:
        url(#vlh2RouteGradient);

    stroke-width:2;

    stroke-linecap:round;

    stroke-dasharray:
        3
        11;

    filter:
        url(#vlh2Glow);

    animation:
        vlh2Dash
        2.5s
        linear
        infinite;
}

.vlh2-packet{
    fill:#A6F5FF;

    filter:
        url(#vlh2Glow);
}


/* ORIGIN */

.vlh2-origin-ring{
    fill:none;

    stroke:
        rgba(88,195,217,.18);

    stroke-width:1;

    transform-origin:
        150px
        252px;

    animation:
        vlh2OriginRing
        2.7s
        ease-out
        infinite;
}

.vlh2-origin-ring-b{
    animation-delay:
        -1.3s;
}

.vlh2-origin-core{
    fill:#7FE8F5;

    filter:
        url(#vlh2Glow);
}


/* ========================================
   COUNTRY NODES
   ======================================== */

.vlh2-node{
    position:absolute;

    z-index:5;

    display:flex;

    align-items:center;

    gap:8px;

    padding:
        7px
        10px
        7px
        7px;

    border-radius:13px;

    border:
        1px solid
        rgba(255,255,255,.075);

    background:
        rgba(8,28,38,.62);

    backdrop-filter:
        blur(12px);

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

.vlh2-node>i{
    width:31px;
    height:31px;

    display:grid;

    place-items:center;

    flex:0 0 31px;

    border-radius:9px;

    color:#8DEAF6;

    background:
        rgba(88,195,217,.11);

    font-style:normal;

    font-size:7.5px;

    letter-spacing:.08em;

    font-weight:800;

    box-shadow:
        inset 0 0 0 1px
        rgba(88,195,217,.08);
}

.vlh2-node small{
    display:block;

    color:#587885;

    font-size:5.8px;

    letter-spacing:.12em;

    font-weight:700;
}

.vlh2-node strong{
    display:block;

    margin-top:4px;

    color:#dce9ed;

    font-size:8px;

    font-weight:650;
}

.vlh2-node:hover{
    transform:
        translateY(-3px)
        scale(1.025);

    border-color:
        rgba(88,195,217,.24);

    background:
        rgba(11,43,56,.78);

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.25),

        0 0 24px
        rgba(88,195,217,.09);
}

.vlh2-node-cn{
    left:8%;
    top:43%;
}

.vlh2-node-by{
    right:6%;
    top:7%;
}

.vlh2-node-ru{
    right:1%;
    top:31%;
}

.vlh2-node-kz{
    right:7%;
    top:62%;
}

.vlh2-node-kg{
    right:15%;
    bottom:3%;
}


/* CENTER LABEL */

.vlh2-center-label{
    position:absolute;

    z-index:4;

    left:43%;
    top:43%;

    display:flex;

    align-items:center;

    gap:9px;

    padding:
        8px
        11px;

    border-radius:13px;

    background:
        rgba(5,20,28,.43);

    border:
        1px solid
        rgba(255,255,255,.055);

    backdrop-filter:
        blur(10px);
}

.vlh2-center-label>span{
    width:30px;
    height:30px;

    display:grid;

    place-items:center;

    border-radius:9px;

    color:#8FEAF6;

    background:
        rgba(88,195,217,.08);

    font-size:10px;

    font-weight:750;
}

.vlh2-center-label small{
    display:block;

    color:#587984;

    font-size:5.8px;

    letter-spacing:.12em;
}

.vlh2-center-label strong{
    display:block;

    margin-top:3px;

    color:#b7c8ce;

    font-size:7.5px;

    font-weight:600;
}


/* ========================================
   MODES
   ======================================== */

.vlh2-modes{
    padding:
        10px
        18px
        18px;

    display:grid;

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

    gap:7px;
}

.vlh2-mode{
    position:relative;

    height:48px;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:7px;

    overflow:hidden;

    border-radius:13px;

    color:#8fa5ae;

    border:
        1px solid
        rgba(255,255,255,.055);

    background:
        rgba(3,15,22,.21);

    font-size:8.5px;

    font-weight:650;

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

.vlh2-mode i{
    display:grid;

    place-items:center;

    color:#58C3D9;
}

.vlh2-mode svg{
    width:15px;
    height:15px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.45;
    stroke-linecap:round;
    stroke-linejoin:round;

    transition:
        transform .28s ease,
        filter .28s ease;
}

.vlh2-mode:hover{
    transform:
        translateY(-2px);

    color:#d9e9ed;

    border-color:
        rgba(88,195,217,.18);

    background:
        rgba(88,195,217,.055);
}

.vlh2-mode:hover svg{
    transform:
        scale(1.10);

    filter:
        drop-shadow(
            0 0 7px
            rgba(88,195,217,.7)
        );
}


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

.vlh2-float{
    position:absolute;

    z-index:8;

    min-width:190px;

    padding:
        11px
        14px
        11px
        11px;

    display:flex;

    align-items:center;

    gap:10px;

    border-radius:15px;

    border:
        1px solid
        rgba(132,223,240,.12);

    background:
        rgba(7,25,34,.82);

    backdrop-filter:
        blur(17px);

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

        0 0 28px
        rgba(88,195,217,.04);
}

.vlh2-float>i{
    width:38px;
    height:38px;

    display:grid;

    place-items:center;

    border-radius:11px;

    color:#8BEAF5;

    background:
        linear-gradient(
            145deg,
            rgba(88,195,217,.17),
            rgba(88,195,217,.055)
        );
}

.vlh2-float svg{
    width:18px;
    height:18px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round;

    filter:
        drop-shadow(
            0 0 5px
            rgba(88,195,217,.55)
        );
}

.vlh2-float small{
    display:block;

    color:#567986;

    font-size:6.2px;

    letter-spacing:.13em;

    font-weight:700;
}

.vlh2-float strong{
    display:block;

    margin-top:5px;

    color:#dfecef;

    font-size:9.2px;

    font-weight:650;
}

.vlh2-float-a{
    right:-8px;
    top:5px;

    animation:
        vlh2FloatA
        5.3s
        ease-in-out
        infinite;
}




/* ========================================
   BOTTOM
   ======================================== */

.vlh2-bottom{
    position:absolute;

    z-index:10;

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

    height:50px;

    display:flex;

    align-items:center;

    overflow:hidden;

    border-top:
        1px solid
        rgba(255,255,255,.065);

    background:
        rgba(3,13,18,.30);

    backdrop-filter:
        blur(8px);
}

.vlh2-bottom>div{
    width:min(
        1380px,
        calc(100% - 72px)
    );

    margin:0 auto;

    display:flex;

    align-items:center;

    gap:14px;

    color:#5f7d89;

    font-size:7.8px;

    letter-spacing:.10em;

    font-weight:650;

    text-transform:uppercase;
}

.vlh2-bottom i{
    width:4px;
    height:4px;

    border-radius:50%;

    background:#3d859c;

    box-shadow:
        0 0 7px
        rgba(88,195,217,.35);
}


/* ========================================
   STOP OLD CONTENT OVERLAP
   ======================================== */

body.home .full_width{
    position:relative !important;

    z-index:20 !important;

    margin-top:0 !important;

    transform:none !important;
}

body.home .full_width_inner{
    margin-top:0 !important;

    padding-top:0 !important;
}

body.home .full_width_inner >
.wpb_row:first-child,
body.home .full_width_inner >
.vc_row:first-child,
body.home .full_width_inner >
section:first-child{
    margin-top:0 !important;

    transform:none !important;

    position:relative !important;

    z-index:1 !important;
}


/* ========================================
   ENTRANCE
   ======================================== */

.vlh2-copy>*{
    animation:
        vlh2Reveal
        .72s
        cubic-bezier(.2,.75,.2,1)
        both;
}

.vlh2-copy>*:nth-child(1){
    animation-delay:.04s;
}

.vlh2-copy>*:nth-child(2){
    animation-delay:.11s;
}

.vlh2-copy>*:nth-child(3){
    animation-delay:.18s;
}

.vlh2-copy>*:nth-child(4){
    animation-delay:.25s;
}

.vlh2-copy>*:nth-child(5){
    animation-delay:.32s;
}


/* ========================================
   KEYFRAMES
   ======================================== */

@keyframes vlh2Reveal{

    from{
        opacity:0;

        transform:
            translate3d(0,18px,0);
    }

    to{
        opacity:1;

        transform:none;
    }

}

@keyframes vlh2TextFlow{

    0%{
        background-position:
            0% 50%;
    }

    100%{
        background-position:
            220% 50%;
    }

}

@keyframes vlh2PulseDot{

    0%,100%{
        opacity:.75;

        transform:
            scale(.92);
    }

    50%{
        opacity:1;

        transform:
            scale(1.12);
    }

}

@keyframes vlh2Dash{

    from{
        stroke-dashoffset:0;
    }

    to{
        stroke-dashoffset:-56;
    }

}

@keyframes vlh2OriginRing{

    0%{
        opacity:.7;

        transform:
            scale(.45);
    }

    100%{
        opacity:0;

        transform:
            scale(1.55);
    }

}

@keyframes vlh2ButtonSweep{

    0%,60%{
        left:-40%;
        opacity:0;
    }

    68%{
        opacity:.75;
    }

    82%{
        opacity:.1;
    }

    100%{
        left:130%;
        opacity:0;
    }

}

@keyframes vlh2FloatA{

    0%,100%{
        transform:
            translate3d(0,0,0);
    }

    50%{
        transform:
            translate3d(0,7px,0);
    }

}

@keyframes vlh2FloatB{

    0%,100%{
        transform:
            translate3d(0,0,0);
    }

    50%{
        transform:
            translate3d(0,-7px,0);
    }

}

@keyframes vlh2HaloSpin{

    from{
        transform:
            rotate(0deg)
            scale(1);
    }

    50%{
        transform:
            rotate(180deg)
            scale(1.025);
    }

    to{
        transform:
            rotate(360deg)
            scale(1);
    }

}

@keyframes vlh2Aurora{

    from{
        transform:
            translate3d(-25px,-12px,0)
            scale(.95);
    }

    to{
        transform:
            translate3d(28px,16px,0)
            scale(1.08);
    }

}


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

@media(max-width:1150px){

    .vlh2-shell{
        width:
            calc(100% - 42px);

        grid-template-columns:
            minmax(0,.88fr)
            minmax(470px,1.12fr);

        gap:30px;
    }

    .vlh2-title-main,
    .vlh2-title-accent{
        font-size:
            clamp(
                49px,
                5vw,
                64px
            );
    }

    .vlh2-network{
        width:100%;
    }

    .vlh2-node strong{
        font-size:7.5px;
    }

}


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

@media(max-width:767px){

    .vlh2-hero{
        min-height:auto;
    }

    .vlh2-particles{
        opacity:.35;
    }

    .vlh2-cursor-light{
        display:none;
    }

    .vlh2-shell{
        width:
            calc(100% - 28px);

        min-height:auto;

        display:block;

        padding:
            48px
            0
            82px;
    }

    .vlh2-kicker{
        margin-bottom:17px;

        font-size:8px;
    }

    .vlh2-title-main,
    .vlh2-title-accent{
        font-size:
            clamp(
                42px,
                12.7vw,
                56px
            );
    }

    .vlh2-title-accent{
        margin-top:7px;
    }

    .vlh2-lead{
        margin-top:21px !important;

        font-size:14px !important;

        line-height:1.6 !important;
    }

    .vlh2-actions{
        display:grid;

        grid-template-columns:1fr;

        gap:9px;

        margin-top:25px;
    }

    .vlh2-primary,
    .vlh2-secondary{
        width:100%;
    }

    .vlh2-client-row{
        display:grid;

        grid-template-columns:
            1fr
            1fr;

        gap:8px;

        margin-top:22px;
    }

    .vlh2-client{
        align-items:flex-start;

        font-size:8.2px;
    }


    .vlh2-visual{
        height:auto;

        margin-top:43px;
    }

    .vlh2-halo{
        display:none;
    }

    .vlh2-network{
        width:100%;

        border-radius:22px;

        transform:none !important;
    }

    .vlh2-network-head{
        height:66px;

        padding:
            0
            16px;
    }

    .vlh2-map{
        height:330px;
    }

    .vlh2-node{
        padding:
            6px
            7px
            6px
            6px;
    }

    .vlh2-node>i{
        width:27px;
        height:27px;

        flex-basis:27px;
    }

    .vlh2-node small{
        display:none;
    }

    .vlh2-node strong{
        margin-top:0;

        font-size:6.7px;
    }

    .vlh2-node-cn{
        left:4%;
    }

    .vlh2-node-by{
        right:2%;
    }

    .vlh2-node-ru{
        right:-1%;
    }

    .vlh2-node-kz{
        right:3%;
    }

    .vlh2-node-kg{
        right:8%;
    }

    .vlh2-center-label{
        display:none;
    }

    .vlh2-modes{
        grid-template-columns:
            1fr
            1fr;

        padding:
            8px
            13px
            14px;
    }

    .vlh2-float{
        display:none;
    }

    .vlh2-bottom{
        height:49px;
    }

    .vlh2-bottom>div{
        width:
            calc(100% - 28px);

        gap:8px;

        overflow:hidden;

        white-space:nowrap;

        font-size:6.2px;
    }

}


/* ========================================
   REDUCED MOTION
   ======================================== */

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

    .vlh2-hero *,
    .vlh2-hero *::before,
    .vlh2-hero *::after{
        animation:none !important;

        transition-duration:.01ms !important;
    }

}



/* VOSTOK ROUTE ENGINE V2 START */

/* =========================================================
   ТОЧНОЕ ПРИБЫТИЕ ГРУЗА
   Никаких псевдо-линий около плашек.
   ========================================================= */


/* УБИРАЕМ ЛЮБЫЕ СТАРЫЕ ДОПОЛНИТЕЛЬНЫЕ КОННЕКТОРЫ */

.vlh2-node:not(.vlh2-node-cn)::before,
.vlh2-node:not(.vlh2-node-cn)::after{
    content:none !important;
    display:none !important;
}


/* САМИ ЛИНИИ */

.vlh2-route-base{
    fill:none;

    stroke:
        rgba(94,169,192,.14);

    stroke-width:1.2;

    stroke-linecap:round;
}

.vlh2-route-energy{
    fill:none;

    stroke:
        url(#vlh2RouteGradient);

    stroke-width:1.8;

    stroke-linecap:round;

    stroke-dasharray:
        2 10;

    filter:url(#vlh2Glow);

    animation:
        vlh2Dash
        2.4s
        linear
        infinite;
}


/* СВЕТОВОЙ ПАКЕТ */

.vlh2-packet{
    fill:#D8FCFF;

    opacity:0;

    pointer-events:none;

    filter:
        url(#vlh2Glow);

    will-change:
        opacity;
}


/* =========================================================
   ПЛАШКА В МОМЕНТ ФАКТИЧЕСКОГО ПРИБЫТИЯ
   ========================================================= */

.vlh2-node.vlh2-arrived{
    border-color:
        rgba(134,235,248,.68) !important;

    background:
        linear-gradient(
            135deg,
            rgba(24,78,96,.94),
            rgba(8,35,47,.91)
        ) !important;

    box-shadow:
        0 0 0 1px
        rgba(113,229,244,.09),

        0 0 16px
        rgba(88,195,217,.24),

        0 0 40px
        rgba(88,195,217,.15),

        0 0 75px
        rgba(88,195,217,.07),

        inset 0 0 24px
        rgba(88,195,217,.075) !important;

    animation:
        vlh2ArrivalImpact
        .62s
        cubic-bezier(.16,.75,.2,1)
        both;
}


/* КОД СТРАНЫ В МОМЕНТ ПРИБЫТИЯ */

.vlh2-node.vlh2-arrived > i{
    color:#F0FEFF !important;

    text-shadow:
        0 0 5px
        rgba(200,251,255,1),

        0 0 14px
        rgba(88,195,217,.82),

        0 0 28px
        rgba(88,195,217,.38) !important;

    filter:
        drop-shadow(
            0 0 6px
            rgba(88,195,217,.50)
        );
}


/* НАЗВАНИЕ СТРАНЫ */

.vlh2-node.vlh2-arrived strong{
    color:#F3FDFF !important;

    text-shadow:
        0 0 8px
        rgba(121,229,243,.32);
}


/* КОРОТКИЙ УДАР СВЕТА */

@keyframes vlh2ArrivalImpact{

    0%{
        filter:
            brightness(1);
    }

    16%{
        filter:
            brightness(1.45);
    }

    38%{
        filter:
            brightness(1.20);
    }

    64%{
        filter:
            brightness(1.08);
    }

    100%{
        filter:
            brightness(1);
    }

}


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

    .vlh2-node.vlh2-arrived{
        animation:none !important;
    }

}

/* VOSTOK ROUTE ENGINE V2 END */

/* VOSTOK CHINA FLOAT START */

.vlh2-float-cn{
    /*
       Китай находится слева внутри карты.
       Плашка висит над ним и не перекрывает маршруты.
    */

    left:18px !important;
    top:78px !important;

    right:auto !important;
    bottom:auto !important;

    min-width:194px;

    animation:
        vlh2ChinaFloat
        5.2s
        cubic-bezier(.45,.05,.55,.95)
        infinite !important;

    transform-origin:
        50%
        100%;
}


/* немного усиливаем ощущение парения */

.vlh2-float-cn::after{
    content:"";

    position:absolute;

    left:26px;
    right:26px;

    bottom:-15px;

    height:15px;

    border-radius:50%;

    background:
        radial-gradient(
            ellipse,
            rgba(88,195,217,.15),
            transparent 70%
        );

    filter:blur(7px);

    opacity:.55;

    pointer-events:none;

    animation:
        vlh2ChinaFloatShadow
        5.2s
        cubic-bezier(.45,.05,.55,.95)
        infinite;
}


@keyframes vlh2ChinaFloat{

    0%,
    100%{
        transform:
            translate3d(0,0,0)
            rotate(-.3deg);
    }

    25%{
        transform:
            translate3d(2px,-5px,0)
            rotate(.25deg);
    }

    50%{
        transform:
            translate3d(0,-9px,0)
            rotate(.45deg);
    }

    75%{
        transform:
            translate3d(-2px,-4px,0)
            rotate(-.15deg);
    }

}


@keyframes vlh2ChinaFloatShadow{

    0%,
    100%{
        opacity:.52;
        transform:scaleX(1);
    }

    50%{
        opacity:.26;
        transform:scaleX(.82);
    }

}


/* мобильная версия без плавающей карточки */

@media(max-width:767px){

    .vlh2-float-cn{
        display:none !important;
    }

}

/* VOSTOK CHINA FLOAT END */

/* VOSTOK CHINA FLOAT EXACT POSITION START */

/*
 * Позиция теперь задаётся JS относительно
 * реальной плашки CN / Китай.
 */

.vlh2-float-cn{
    left:var(--vlh2-cn-float-left,0px) !important;
    top:var(--vlh2-cn-float-top,0px) !important;

    right:auto !important;
    bottom:auto !important;

    margin:0 !important;

    z-index:12 !important;
}

/* VOSTOK CHINA FLOAT EXACT POSITION END */


/* VOSTOK COUNTRY MONOGRAM V1 START */

/* =========================================================
   COUNTRY MONOGRAM
   Убираем старые квадратные "иконки".
   ========================================================= */

.vlh2-node > i{
    position:relative !important;

    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    flex:0 0 42px !important;

    display:grid !important;
    place-items:center !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    border-radius:0 !important;

    background:
        linear-gradient(
            115deg,
            #5DBFD2 0%,
            #B8F8FF 25%,
            #FFFFFF 43%,
            #6ED5E7 59%,
            #2C8AA5 79%,
            #9AE8F3 100%
        ) !important;

    background-size:230% 100% !important;

    -webkit-background-clip:text !important;
    background-clip:text !important;

    -webkit-text-fill-color:transparent !important;

    color:transparent !important;

    font-family:'Montserrat',Arial,sans-serif !important;

    font-size:17px !important;
    line-height:1 !important;

    font-weight:800 !important;

    font-style:normal !important;

    letter-spacing:-.045em !important;

    text-shadow:none !important;

    box-shadow:none !important;

    filter:
        drop-shadow(
            0 2px 1px
            rgba(0,0,0,.30)
        )
        drop-shadow(
            0 0 5px
            rgba(88,195,217,.20)
        );

    transform:
        perspective(100px)
        rotateX(4deg)
        rotateY(-5deg)
        translateZ(0);

    transform-origin:center;

    animation:
        vlh2CountryMetal
        5.5s
        ease-in-out
        infinite;

    transition:
        transform .30s cubic-bezier(.2,.8,.2,1),
        filter .30s ease !important;

    overflow:visible !important;
}


/* мягкий ореол за буквами, без рамки */

.vlh2-node > i::before{
    content:"";

    position:absolute;

    z-index:-1;

    left:50%;
    top:50%;

    width:49px;
    height:49px;

    transform:
        translate(-50%,-50%);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(88,195,217,.11) 0%,
            rgba(88,195,217,.045) 34%,
            transparent 70%
        );

    filter:blur(4px);

    opacity:.58;

    pointer-events:none;

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


/* тонкий движущийся свет по буквам */

.vlh2-node > i::after{
    content:"";

    position:absolute;

    z-index:2;

    left:5px;
    right:5px;

    top:7px;

    height:1px;

    opacity:.26;

    border-radius:50%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(224,253,255,.95),
            transparent
        );

    filter:
        blur(.2px);

    transform:
        translateY(0);

    animation:
        vlh2CountryScan
        4.3s
        ease-in-out
        infinite;

    pointer-events:none;
}


/* индивидуальные небольшие углы,
   чтобы монограммы не выглядели клонами */

.vlh2-node-cn > i{
    transform:
        perspective(100px)
        rotateX(4deg)
        rotateY(-7deg);
}

.vlh2-node-by > i{
    transform:
        perspective(100px)
        rotateX(3deg)
        rotateY(5deg);
}

.vlh2-node-ru > i{
    transform:
        perspective(100px)
        rotateX(5deg)
        rotateY(-4deg);
}

.vlh2-node-kz > i{
    transform:
        perspective(100px)
        rotateX(3deg)
        rotateY(6deg);
}

.vlh2-node-kg > i{
    transform:
        perspective(100px)
        rotateX(5deg)
        rotateY(-5deg);
}


/* HOVER */

.vlh2-node:hover > i{
    transform:
        perspective(100px)
        rotateX(0deg)
        rotateY(0deg)
        translateY(-1px)
        scale(1.10) !important;

    filter:
        drop-shadow(
            0 2px 1px
            rgba(0,0,0,.25)
        )
        drop-shadow(
            0 0 7px
            rgba(145,241,252,.70)
        )
        drop-shadow(
            0 0 17px
            rgba(88,195,217,.32)
        ) !important;
}

.vlh2-node:hover > i::before{
    opacity:.95;

    transform:
        translate(-50%,-50%)
        scale(1.13);
}


/* =========================================================
   ПРИБЫТИЕ ГРУЗА
   Монограмма вспыхивает строго вместе с .vlh2-arrived
   ========================================================= */

.vlh2-node.vlh2-arrived > i{
    background:
        linear-gradient(
            105deg,
            #FFFFFF 0%,
            #D9FCFF 22%,
            #8FF0FA 43%,
            #FFFFFF 56%,
            #58C3D9 78%,
            #DDFDFF 100%
        ) !important;

    background-size:250% 100% !important;

    -webkit-background-clip:text !important;
    background-clip:text !important;

    -webkit-text-fill-color:transparent !important;

    filter:
        drop-shadow(
            0 0 4px
            rgba(224,253,255,1)
        )
        drop-shadow(
            0 0 10px
            rgba(139,240,252,.95)
        )
        drop-shadow(
            0 0 23px
            rgba(88,195,217,.64)
        ) !important;

    transform:
        perspective(100px)
        rotateX(0)
        rotateY(0)
        scale(1.13) !important;

    animation:
        vlh2CountryArrivalMetal
        .62s
        cubic-bezier(.16,.75,.2,1)
        both !important;
}

.vlh2-node.vlh2-arrived > i::before{
    opacity:1;

    background:
        radial-gradient(
            circle,
            rgba(167,246,255,.30) 0%,
            rgba(88,195,217,.13) 36%,
            transparent 72%
        );

    transform:
        translate(-50%,-50%)
        scale(1.28);
}


/* =========================================================
   ANIMATION
   ========================================================= */

@keyframes vlh2CountryMetal{

    0%,
    100%{
        background-position:
            0% 50%;
    }

    50%{
        background-position:
            100% 50%;
    }

}


@keyframes vlh2CountryScan{

    0%,
    20%{
        opacity:0;

        transform:
            translateY(2px)
            scaleX(.5);
    }

    43%{
        opacity:.42;
    }

    64%{
        opacity:0;

        transform:
            translateY(25px)
            scaleX(1);
    }

    100%{
        opacity:0;

        transform:
            translateY(25px)
            scaleX(.5);
    }

}


@keyframes vlh2CountryArrivalMetal{

    0%{
        background-position:
            0% 50%;

        filter:
            drop-shadow(
                0 0 3px
                rgba(88,195,217,.25)
            );
    }

    20%{
        background-position:
            100% 50%;

        filter:
            drop-shadow(
                0 0 5px
                rgba(238,254,255,1)
            )
            drop-shadow(
                0 0 15px
                rgba(139,240,252,.95)
            )
            drop-shadow(
                0 0 30px
                rgba(88,195,217,.68)
            );
    }

    55%{
        background-position:
            170% 50%;
    }

    100%{
        background-position:
            230% 50%;
    }

}


/* MOBILE */

@media(max-width:767px){

    .vlh2-node > i{
        width:34px !important;
        height:34px !important;
        min-width:34px !important;
        flex-basis:34px !important;

        font-size:14px !important;
    }

    .vlh2-node > i::before{
        width:38px;
        height:38px;
    }

}


/* REDUCED MOTION */

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

    .vlh2-node > i,
    .vlh2-node > i::after{
        animation:none !important;
    }

}

/* VOSTOK COUNTRY MONOGRAM V1 END */

/* VOSTOK COUNTRY GLOW 50 START */

/* Обычное состояние */
.vlh2-node > i{
    filter:
        drop-shadow(
            0 2px 1px
            rgba(0,0,0,.30)
        )
        drop-shadow(
            0 0 4px
            rgba(88,195,217,.10)
        ) !important;
}

.vlh2-node > i::before{
    opacity:.29 !important;
}


/* Наведение мыши */
.vlh2-node:hover > i{
    filter:
        drop-shadow(
            0 2px 1px
            rgba(0,0,0,.25)
        )
        drop-shadow(
            0 0 5px
            rgba(145,241,252,.35)
        )
        drop-shadow(
            0 0 11px
            rgba(88,195,217,.16)
        ) !important;
}

.vlh2-node:hover > i::before{
    opacity:.48 !important;
}


/* Прибытие светового импульса */
.vlh2-node.vlh2-arrived > i{
    filter:
        drop-shadow(
            0 0 3px
            rgba(224,253,255,.50)
        )
        drop-shadow(
            0 0 7px
            rgba(139,240,252,.48)
        )
        drop-shadow(
            0 0 15px
            rgba(88,195,217,.32)
        ) !important;
}

.vlh2-node.vlh2-arrived > i::before{
    opacity:.50 !important;

    background:
        radial-gradient(
            circle,
            rgba(167,246,255,.15) 0%,
            rgba(88,195,217,.065) 36%,
            transparent 72%
        ) !important;
}


/* Сам пик вспышки тоже делаем вдвое спокойнее */
@keyframes vlh2CountryArrivalMetal{

    0%{
        background-position:0% 50%;

        filter:
            drop-shadow(
                0 0 2px
                rgba(88,195,217,.13)
            );
    }

    20%{
        background-position:100% 50%;

        filter:
            drop-shadow(
                0 0 3px
                rgba(238,254,255,.50)
            )
            drop-shadow(
                0 0 8px
                rgba(139,240,252,.48)
            )
            drop-shadow(
                0 0 16px
                rgba(88,195,217,.34)
            );
    }

    55%{
        background-position:170% 50%;
    }

    100%{
        background-position:230% 50%;
    }

}

/* VOSTOK COUNTRY GLOW 50 END */


/* VOSTOK COUNTRY POSITION V1 START */

/* =========================================================
   KAZAKHSTAN / KYRGYZSTAN POSITION
   Только разводим две нижние страны.
   ========================================================= */


/*
 * Казахстан оставляем справа,
 * но немного поднимаем.
 */

.vlh2-node-kz{
    right:4% !important;
    top:58% !important;

    bottom:auto !important;
    left:auto !important;
}


/*
 * Кыргызстан уводим ниже и немного левее.
 * Теперь между плашками появляется
 * нормальный визуальный воздух.
 */

.vlh2-node-kg{
    right:14% !important;
    bottom:1.5% !important;

    top:auto !important;
    left:auto !important;
}


/*
 * На среднем экране сохраняем
 * раздельное расположение.
 */

@media(max-width:1150px) and (min-width:768px){

    .vlh2-node-kz{
        right:2% !important;
        top:57% !important;
    }

    .vlh2-node-kg{
        right:12% !important;
        bottom:1% !important;
    }

}


/*
 * Мобильная версия.
 * Здесь плашки компактнее,
 * но также не пересекаются.
 */

@media(max-width:767px){

    .vlh2-node-kz{
        right:1% !important;
        top:57% !important;
    }

    .vlh2-node-kg{
        right:8% !important;
        bottom:1% !important;
    }

}

/* VOSTOK COUNTRY POSITION V1 END */

/* VOSTOK KZ POSITION FINAL START */

/* ПК */
.vlh2-node-kz{
    top:51% !important;
    right:4% !important;

    bottom:auto !important;
    left:auto !important;
}


/* Планшет */
@media(max-width:1150px) and (min-width:768px){

    .vlh2-node-kz{
        top:50% !important;
        right:2% !important;
    }

}


/* Телефон */
@media(max-width:767px){

    .vlh2-node-kz{
        top:51% !important;
        right:1% !important;
    }

}

/* VOSTOK KZ POSITION FINAL END */

/* VOSTOK KZ POSITION FINAL START */

/* ПК */
.vlh2-node-kz{
    top:51% !important;
    right:4% !important;

    bottom:auto !important;
    left:auto !important;
}


/* Планшет */
@media(max-width:1150px) and (min-width:768px){

    .vlh2-node-kz{
        top:50% !important;
        right:2% !important;
    }

}


/* Телефон */
@media(max-width:767px){

    .vlh2-node-kz{
        top:51% !important;
        right:1% !important;
    }

}

/* VOSTOK KZ POSITION FINAL END */

/* VOSTOK KZ POSITION FINAL START */

/* ПК */
.vlh2-node-kz{
    top:51% !important;
    right:4% !important;

    bottom:auto !important;
    left:auto !important;
}


/* Планшет */
@media(max-width:1150px) and (min-width:768px){

    .vlh2-node-kz{
        top:50% !important;
        right:2% !important;
    }

}


/* Телефон */
@media(max-width:767px){

    .vlh2-node-kz{
        top:51% !important;
        right:1% !important;
    }

}

/* VOSTOK KZ POSITION FINAL END */

/* VOSTOK KZ POSITION REAL FIX START */

@media(min-width:768px){

    .vlh2-map .vlh2-node-kz{
        top:55% !important;
        right:4% !important;
        bottom:auto !important;
        left:auto !important;
    }

}

/* VOSTOK KZ POSITION REAL FIX END */


/* VOSTOK COUNTRY LAYOUT V1 START */

/* =========================================================
   ЕДИНАЯ СЕТКА ПЛАШЕК СТРАН
   ========================================================= */

.vlh2-node{
    width:148px !important;
    height:54px !important;

    min-width:148px !important;
    min-height:54px !important;

    padding:0 12px !important;

    display:grid !important;

    grid-template-columns:
        42px
        minmax(0,1fr) !important;

    column-gap:10px !important;

    align-items:center !important;

    justify-content:initial !important;

    text-align:left !important;
}


/* Код страны */

.vlh2-node > i{
    align-self:center !important;
    justify-self:center !important;

    margin:0 !important;
}


/* Текстовая часть */

.vlh2-node > div{
    width:100% !important;

    min-width:0 !important;

    height:100% !important;

    display:flex !important;

    flex-direction:column !important;

    align-items:flex-start !important;
    justify-content:center !important;

    gap:4px !important;

    margin:0 !important;
    padding:0 !important;

    text-align:left !important;
}


/* Верхняя маленькая подпись */

.vlh2-node > div > small{
    display:block !important;

    width:100% !important;

    margin:0 !important;
    padding:0 !important;

    color:#607f8b !important;

    font-family:'Montserrat',Arial,sans-serif !important;

    font-size:5.7px !important;
    line-height:1 !important;

    font-weight:700 !important;

    letter-spacing:.115em !important;

    text-align:left !important;

    white-space:nowrap !important;
}


/* Название страны */

.vlh2-node > div > strong{
    display:block !important;

    width:100% !important;

    margin:0 !important;
    padding:0 !important;

    color:#dce9ed;

    font-family:'Montserrat',Arial,sans-serif !important;

    font-size:8.8px !important;
    line-height:1.15 !important;

    font-weight:650 !important;

    letter-spacing:-.01em !important;

    text-align:left !important;

    white-space:nowrap !important;
}


/* Китай такой же по геометрии */

.vlh2-node-cn{
    text-align:left !important;
}


/* При прибытии геометрия текста не меняется */

.vlh2-node.vlh2-arrived > div{
    transform:none !important;
}

.vlh2-node.vlh2-arrived strong{
    letter-spacing:-.01em !important;
}


/* Hover тоже не двигает внутренности */

.vlh2-node:hover > div{
    transform:none !important;
}


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

@media(max-width:767px){

    .vlh2-node{
        width:112px !important;
        min-width:112px !important;

        height:45px !important;
        min-height:45px !important;

        grid-template-columns:
            34px
            minmax(0,1fr) !important;

        column-gap:6px !important;

        padding:0 8px !important;
    }

    .vlh2-node > div > small{
        display:block !important;

        font-size:4.6px !important;

        letter-spacing:.08em !important;
    }

    .vlh2-node > div > strong{
        font-size:6.9px !important;
    }

}

/* VOSTOK COUNTRY LAYOUT V1 END */


/* VOSTOK FLOAT CARDS LAYOUT V1 START */

/* =========================================================
   ПЛАВАЮЩИЕ ПЛАШКИ КИТАЯ
   ========================================================= */

.vlh2-float-cn,
.vlh2-float-a{
    width:210px !important;
    min-width:210px !important;
    height:58px !important;
    min-height:58px !important;

    padding:8px 12px !important;

    display:grid !important;

    grid-template-columns:
        38px
        minmax(0,1fr) !important;

    column-gap:11px !important;

    align-items:center !important;

    border-radius:16px !important;

    text-align:left !important;
}


/* ИКОНКА */

.vlh2-float-cn > i,
.vlh2-float-a > i{
    width:38px !important;
    height:38px !important;

    margin:0 !important;

    display:grid !important;
    place-items:center !important;

    align-self:center !important;
    justify-self:center !important;

    border-radius:11px !important;

    flex:none !important;
}


/* ТЕКСТОВАЯ КОЛОНКА */

.vlh2-float-cn > div,
.vlh2-float-a > div{
    width:100% !important;
    min-width:0 !important;

    margin:0 !important;
    padding:0 !important;

    display:flex !important;

    flex-direction:column !important;

    justify-content:center !important;
    align-items:flex-start !important;

    gap:5px !important;

    text-align:left !important;
}


/* МАЛЕНЬКИЙ ЗАГОЛОВОК */

.vlh2-float-cn small,
.vlh2-float-a small{
    display:block !important;

    width:100% !important;

    margin:0 !important;
    padding:0 !important;

    color:#648794 !important;

    font-family:'Montserrat',Arial,sans-serif !important;

    font-size:6.4px !important;
    line-height:1 !important;

    font-weight:750 !important;

    letter-spacing:.13em !important;

    white-space:nowrap !important;

    text-align:left !important;
}


/* ОСНОВНОЙ ТЕКСТ */

.vlh2-float-cn strong,
.vlh2-float-a strong{
    display:block !important;

    width:100% !important;

    margin:0 !important;
    padding:0 !important;

    color:#E6F0F3 !important;

    font-family:'Montserrat',Arial,sans-serif !important;

    font-size:9.4px !important;
    line-height:1.15 !important;

    font-weight:650 !important;

    letter-spacing:-.012em !important;

    white-space:nowrap !important;

    text-align:left !important;
}


/* =========================================================
   СКЛАД В КИТАЕ
   Позицию продолжает задавать существующая привязка.
   ========================================================= */

.vlh2-float-cn{
    z-index:15 !important;
}


/* =========================================================
   КОНТРОЛЬ
   Позиция теперь тоже рассчитывается относительно Китая.
   ========================================================= */

.vlh2-float-a{
    left:var(--vlh2-control-left,0px) !important;
    top:var(--vlh2-control-top,0px) !important;

    right:auto !important;
    bottom:auto !important;

    margin:0 !important;

    z-index:15 !important;

    animation:
        vlh2ControlFloat
        5.6s
        cubic-bezier(.45,.05,.55,.95)
        infinite !important;
}


/* Чуть другое движение, чтобы две карточки
   не плавали абсолютно синхронно */

@keyframes vlh2ControlFloat{

    0%,
    100%{
        transform:
            translate3d(0,0,0)
            rotate(.20deg);
    }

    25%{
        transform:
            translate3d(-2px,4px,0)
            rotate(-.15deg);
    }

    50%{
        transform:
            translate3d(0,8px,0)
            rotate(-.30deg);
    }

    75%{
        transform:
            translate3d(2px,4px,0)
            rotate(.15deg);
    }

}


/* мягкая воздушная тень */

.vlh2-float-a::after{
    content:"";

    position:absolute;

    left:28px;
    right:28px;

    top:-14px;

    height:14px;

    border-radius:50%;

    background:
        radial-gradient(
            ellipse,
            rgba(88,195,217,.11),
            transparent 70%
        );

    filter:blur(7px);

    opacity:.45;

    pointer-events:none;
}


/* MOBILE */

@media(max-width:767px){

    .vlh2-float-cn,
    .vlh2-float-a{
        display:none !important;
    }

}

/* VOSTOK FLOAT CARDS LAYOUT V1 END */


/* VOSTOK TRANSPORT MODES V2 START */


/* =========================================================
   КОНТЕЙНЕР ЧЕТЫРЁХ СПОСОБОВ ДОСТАВКИ
   ========================================================= */

.vlh2-modes{
    padding:
        11px
        18px
        18px !important;

    display:grid !important;

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

    gap:8px !important;
}


/* =========================================================
   САМА ПЛАШКА
   ========================================================= */

.vlh2-mode{
    position:relative !important;

    height:58px !important;

    min-width:0 !important;

    padding:
        0
        10px !important;

    display:grid !important;

    grid-template-columns:
        38px
        minmax(0,1fr) !important;

    column-gap:8px !important;

    align-items:center !important;

    justify-content:initial !important;

    overflow:hidden !important;

    border-radius:14px !important;

    border:
        1px solid
        rgba(126,215,232,.09) !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.047),
            rgba(255,255,255,.017)
        ) !important;

    box-shadow:
        inset 0 1px
        rgba(255,255,255,.035),

        0 8px 22px
        rgba(0,0,0,.08) !important;

    backdrop-filter:
        blur(12px);

    color:#fff !important;

    transition:
        transform .28s
        cubic-bezier(.2,.8,.2,1),

        border-color .28s ease,

        background .28s ease,

        box-shadow .28s ease !important;
}


/* лёгкая подсветка под курсором */

.vlh2-mode::before{
    content:"";

    position:absolute;

    inset:0;

    opacity:0;

    pointer-events:none;

    background:
        radial-gradient(
            circle at var(--nx,50%) var(--ny,50%),
            rgba(101,222,239,.12),
            rgba(88,195,217,.035) 28%,
            transparent 60%
        );

    transition:
        opacity .25s ease;
}

.vlh2-mode:hover::before{
    opacity:1;
}


/* верхний технологичный блик */

.vlh2-mode::after{
    content:"";

    position:absolute;

    left:10%;
    right:10%;

    top:0;

    height:1px;

    opacity:.28;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(178,245,253,.55),
            transparent
        );

    transform:
        translateX(-110%);

    animation:
        vlh2ModeTopScan
        6.8s
        ease-in-out
        infinite;

    pointer-events:none;
}


/* =========================================================
   ИКОНКА БЕЗ КВАДРАТА
   ========================================================= */

.vlh2-mode-icon{
    position:relative !important;

    z-index:3 !important;

    width:38px !important;
    height:38px !important;

    min-width:38px !important;

    margin:0 !important;

    display:grid !important;
    place-items:center !important;

    border:0 !important;
    border-radius:0 !important;

    background:none !important;

    box-shadow:none !important;

    color:#A4F1FA !important;

    transform:
        perspective(100px)
        rotateX(4deg)
        rotateY(-5deg);

    transition:
        transform .30s
        cubic-bezier(.2,.8,.2,1),

        filter .30s ease !important;
}


/* мягкий ореол, аналогично кодам стран */

.vlh2-mode-icon::before{
    content:"";

    position:absolute;

    z-index:-1;

    width:42px;
    height:42px;

    left:50%;
    top:50%;

    transform:
        translate(-50%,-50%);

    border-radius:50%;

    opacity:.20;

    background:
        radial-gradient(
            circle,
            rgba(88,195,217,.15) 0%,
            rgba(88,195,217,.045) 38%,
            transparent 70%
        );

    filter:blur(5px);

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


/* =========================================================
   SVG
   ========================================================= */

.vlh2-mode-icon svg{
    position:relative;

    z-index:2;

    width:30px !important;
    height:30px !important;

    overflow:visible;

    fill:none !important;

    stroke:#A9F3FC !important;

    stroke-width:1.65 !important;

    stroke-linecap:round !important;
    stroke-linejoin:round !important;

    filter:
        drop-shadow(
            0 1px 0
            rgba(255,255,255,.20)
        )
        drop-shadow(
            0 2px 1px
            rgba(0,0,0,.34)
        )
        drop-shadow(
            0 0 3px
            rgba(88,195,217,.13)
        ) !important;

    transition:
        transform .30s
        cubic-bezier(.2,.8,.2,1),

        stroke .30s ease,

        filter .30s ease !important;
}


/* =========================================================
   ТЕКСТ
   ========================================================= */

.vlh2-mode > span{
    position:relative;

    z-index:3;

    width:100%;

    min-width:0;

    display:flex;

    flex-direction:column;

    justify-content:center;
    align-items:flex-start;

    gap:4px;

    text-align:left;
}

.vlh2-mode > span > small{
    display:block;

    margin:0 !important;

    color:#567986 !important;

    font-family:'Montserrat',Arial,sans-serif !important;

    font-size:5.4px !important;

    line-height:1 !important;

    font-weight:750 !important;

    letter-spacing:.13em !important;

    white-space:nowrap;
}

.vlh2-mode > span > strong{
    display:block;

    margin:0 !important;

    color:#D8E8EC !important;

    font-family:'Montserrat',Arial,sans-serif !important;

    font-size:8.8px !important;

    line-height:1 !important;

    font-weight:650 !important;

    letter-spacing:-.01em !important;

    white-space:nowrap;
}


/* =========================================================
   HOVER
   ========================================================= */

.vlh2-mode:hover{
    transform:
        translateY(-3px) !important;

    border-color:
        rgba(111,222,239,.23) !important;

    background:
        linear-gradient(
            145deg,
            rgba(88,195,217,.075),
            rgba(255,255,255,.025)
        ) !important;

    box-shadow:
        0 12px 28px
        rgba(0,0,0,.13),

        0 0 18px
        rgba(88,195,217,.045),

        inset 0 1px
        rgba(255,255,255,.06) !important;
}


.vlh2-mode:hover .vlh2-mode-icon{
    transform:
        perspective(100px)
        rotateX(0)
        rotateY(0)
        translateY(-1px)
        scale(1.07) !important;

    filter:
        drop-shadow(
            0 0 5px
            rgba(88,195,217,.20)
        ) !important;
}


.vlh2-mode:hover .vlh2-mode-icon::before{
    opacity:.36;

    transform:
        translate(-50%,-50%)
        scale(1.08);
}


.vlh2-mode:hover .vlh2-mode-icon svg{
    stroke:#E0FCFF !important;

    transform:
        scale(1.04);

    filter:
        drop-shadow(
            0 1px 0
            rgba(255,255,255,.25)
        )
        drop-shadow(
            0 2px 1px
            rgba(0,0,0,.30)
        )
        drop-shadow(
            0 0 5px
            rgba(125,232,245,.32)
        )
        drop-shadow(
            0 0 10px
            rgba(88,195,217,.12)
        ) !important;
}


.vlh2-mode:hover > span > strong{
    color:#F2FCFE !important;
}


/* =========================================================
   ИНДИВИДУАЛЬНЫЙ ХАРАКТЕР ИКОНОК
   ========================================================= */

.vlh2-mode-auto .vlh2-mode-icon{
    transform:
        perspective(100px)
        rotateX(4deg)
        rotateY(-6deg);
}

.vlh2-mode-air .vlh2-mode-icon{
    transform:
        perspective(100px)
        rotateX(3deg)
        rotateY(4deg)
        rotate(-2deg);
}

.vlh2-mode-sea .vlh2-mode-icon{
    transform:
        perspective(100px)
        rotateX(5deg)
        rotateY(-4deg);
}

.vlh2-mode-rail .vlh2-mode-icon{
    transform:
        perspective(100px)
        rotateX(4deg)
        rotateY(5deg);
}


/* =========================================================
   НЕБОЛЬШАЯ ЖИВАЯ АНИМАЦИЯ
   ========================================================= */

.vlh2-mode-auto:hover svg{
    transform:
        translateX(1px)
        scale(1.04);
}

.vlh2-mode-air:hover svg{
    transform:
        translate(1px,-2px)
        rotate(-3deg)
        scale(1.05);
}

.vlh2-mode-sea:hover svg{
    transform:
        translateY(-1px)
        rotate(.7deg)
        scale(1.04);
}

.vlh2-mode-rail:hover svg{
    transform:
        translateY(-1px)
        scale(1.04);
}


/* =========================================================
   SCAN
   ========================================================= */

@keyframes vlh2ModeTopScan{

    0%,
    58%{
        opacity:0;
        transform:translateX(-110%);
    }

    66%{
        opacity:.32;
    }

    82%{
        opacity:.06;
        transform:translateX(110%);
    }

    100%{
        opacity:0;
        transform:translateX(110%);
    }

}


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

@media(max-width:767px){

    .vlh2-modes{
        grid-template-columns:
            repeat(2,1fr) !important;

        gap:7px !important;

        padding:
            8px
            13px
            14px !important;
    }

    .vlh2-mode{
        height:55px !important;

        grid-template-columns:
            36px
            minmax(0,1fr) !important;

        padding:
            0
            9px !important;
    }

    .vlh2-mode-icon{
        width:36px !important;
        height:36px !important;

        min-width:36px !important;
    }

    .vlh2-mode-icon svg{
        width:27px !important;
        height:27px !important;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .vlh2-mode::after{
        animation:none !important;
    }

}

/* VOSTOK TRANSPORT MODES V2 END */

/* VOSTOK COUNTRY NAMES CLEAN V1 START */

/*
 * В плашках стран теперь только:
 * код страны + крупное название.
 */

.vlh2-node > div{
    display:flex !important;
    flex-direction:column !important;

    align-items:flex-start !important;
    justify-content:center !important;

    gap:0 !important;

    height:100% !important;
}


/* На случай старого HTML */
.vlh2-node > div > small{
    display:none !important;
}


/* Основное название страны */

.vlh2-node > div > strong{
    display:block !important;

    width:100% !important;

    margin:0 !important;
    padding:0 !important;

    color:#E5F0F3 !important;

    font-family:'Montserrat',Arial,sans-serif !important;

    font-size:11px !important;
    line-height:1 !important;

    font-weight:720 !important;

    letter-spacing:.025em !important;

    text-transform:uppercase !important;

    white-space:nowrap !important;

    text-align:left !important;
}


/*
 * При прибытии груза название
 * светится вместе с плашкой,
 * но геометрия не прыгает.
 */

.vlh2-node.vlh2-arrived > div > strong{
    color:#F6FEFF !important;

    font-size:11px !important;

    letter-spacing:.025em !important;

    text-shadow:
        0 0 6px rgba(130,235,248,.22) !important;
}


/* Mobile */

@media(max-width:767px){

    .vlh2-node > div > strong{
        font-size:8.2px !important;
        letter-spacing:.015em !important;
    }

    .vlh2-node.vlh2-arrived > div > strong{
        font-size:8.2px !important;
    }

}

/* VOSTOK COUNTRY NAMES CLEAN V1 END */


/* VOSTOK COUNTRY PLAQUE FINAL START */

/* =========================================================
   ФИНАЛЬНОЕ ВЫРАВНИВАНИЕ ПЛАШЕК СТРАН
   ========================================================= */

.vlh2-map .vlh2-node{
    width:154px !important;
    min-width:154px !important;
    max-width:154px !important;

    height:54px !important;
    min-height:54px !important;
    max-height:54px !important;

    padding:0 11px !important;

    display:grid !important;

    grid-template-columns:
        40px
        minmax(0,1fr) !important;

    column-gap:9px !important;

    align-items:center !important;

    justify-items:stretch !important;

    text-align:left !important;
}


/* =========================================================
   CN / RU / KZ / KG / BY
   ========================================================= */

.vlh2-map .vlh2-node > i{
    width:40px !important;
    min-width:40px !important;
    height:40px !important;

    margin:0 !important;

    align-self:center !important;
    justify-self:center !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    font-size:15px !important;
    line-height:1 !important;

    font-weight:800 !important;

    letter-spacing:-.04em !important;
}


/* =========================================================
   КОНТЕЙНЕР НАЗВАНИЯ
   ========================================================= */

.vlh2-map .vlh2-node > div{
    width:100% !important;
    min-width:0 !important;

    height:54px !important;

    margin:0 !important;
    padding:0 !important;

    display:flex !important;

    flex-direction:row !important;

    align-items:center !important;
    justify-content:flex-start !important;

    gap:0 !important;

    overflow:visible !important;

    text-align:left !important;
}


/* старые подписи полностью скрыты */

.vlh2-map .vlh2-node > div > small{
    display:none !important;
}


/* =========================================================
   НАЗВАНИЕ СТРАНЫ
   ========================================================= */

.vlh2-map .vlh2-node > div > strong{
    width:auto !important;
    max-width:100% !important;

    margin:0 !important;
    padding:0 !important;

    display:block !important;

    color:#F2F7F9 !important;

    font-family:'Montserrat',Arial,sans-serif !important;

    font-size:9px !important;
    line-height:1 !important;

    font-weight:700 !important;

    letter-spacing:.01em !important;

    text-transform:uppercase !important;

    white-space:nowrap !important;

    overflow:visible !important;

    text-overflow:clip !important;

    text-align:left !important;

    transform:none !important;
}


/* =========================================================
   HOVER И ПРИБЫТИЕ НЕ ДОЛЖНЫ ЛОМАТЬ ГЕОМЕТРИЮ
   ========================================================= */

.vlh2-map .vlh2-node:hover > div,
.vlh2-map .vlh2-node.vlh2-arrived > div{
    transform:none !important;
}


.vlh2-map .vlh2-node:hover > div > strong{
    color:#FFFFFF !important;

    font-size:9px !important;
    letter-spacing:.01em !important;
}


.vlh2-map .vlh2-node.vlh2-arrived > div > strong{
    color:#FFFFFF !important;

    font-size:9px !important;
    line-height:1 !important;

    letter-spacing:.01em !important;

    text-shadow:
        0 0 5px
        rgba(125,231,245,.18) !important;
}


/* =========================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ========================================================= */

@media(max-width:767px){

    .vlh2-map .vlh2-node{
        width:118px !important;
        min-width:118px !important;
        max-width:118px !important;

        height:46px !important;
        min-height:46px !important;
        max-height:46px !important;

        grid-template-columns:
            32px
            minmax(0,1fr) !important;

        column-gap:6px !important;

        padding:0 7px !important;
    }


    .vlh2-map .vlh2-node > i{
        width:32px !important;
        min-width:32px !important;
        height:32px !important;

        font-size:12px !important;
    }


    .vlh2-map .vlh2-node > div{
        height:46px !important;
    }


    .vlh2-map .vlh2-node > div > strong,
    .vlh2-map .vlh2-node:hover > div > strong,
    .vlh2-map .vlh2-node.vlh2-arrived > div > strong{
        font-size:7px !important;

        letter-spacing:0 !important;
    }

}

/* VOSTOK COUNTRY PLAQUE FINAL END */

/* VOSTOK ROUTE ORIGIN EXACT V1 START */

/*
 * Координаты transform-origin теперь задаёт JS.
 * Поэтому старые 150px / 252px больше не используются.
 */

.vlh2-origin-ring{
    transform-origin:center;
}


/*
 * Центральная световая точка должна быть
 * компактной и выглядеть как источник маршрутов.
 */

.vlh2-origin-core{
    filter:url(#vlh2Glow);

    stroke:
        rgba(213,252,255,.48);

    stroke-width:1;

    paint-order:stroke fill;

    transition:
        cx .15s ease,
        cy .15s ease;
}

/* VOSTOK ROUTE ORIGIN EXACT V1 END */


/* VOSTOK CHINA CHAIN V1 START */


/* =========================================================
   НОВЫЕ ПЛАВАЮЩИЕ ПЛАШКИ
   ========================================================= */

.vlh2-float-buy,
.vlh2-float-contract{
    width:210px !important;
    min-width:210px !important;

    height:58px !important;
    min-height:58px !important;

    padding:8px 12px !important;

    display:grid !important;

    grid-template-columns:
        38px
        minmax(0,1fr) !important;

    column-gap:11px !important;

    align-items:center !important;

    border-radius:16px !important;

    text-align:left !important;

    z-index:16 !important;
}


/* ИКОНКИ */

.vlh2-float-buy > i,
.vlh2-float-contract > i{
    width:38px !important;
    height:38px !important;

    margin:0 !important;

    display:grid !important;
    place-items:center !important;

    border-radius:11px !important;

    color:#8BEAF5 !important;

    background:
        linear-gradient(
            145deg,
            rgba(88,195,217,.16),
            rgba(88,195,217,.045)
        ) !important;
}


.vlh2-float-buy svg,
.vlh2-float-contract svg{
    width:18px !important;
    height:18px !important;

    fill:none !important;

    stroke:currentColor !important;

    stroke-width:1.5 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;

    filter:
        drop-shadow(
            0 0 4px
            rgba(88,195,217,.30)
        );
}


/* ТЕКСТОВАЯ КОЛОНКА */

.vlh2-float-buy > div,
.vlh2-float-contract > div{
    width:100% !important;
    min-width:0 !important;

    margin:0 !important;
    padding:0 !important;

    display:flex !important;

    flex-direction:column !important;

    justify-content:center !important;
    align-items:flex-start !important;

    gap:5px !important;
}


.vlh2-float-buy small,
.vlh2-float-contract small{
    display:block !important;

    width:100% !important;

    margin:0 !important;
    padding:0 !important;

    color:#648794 !important;

    font-family:'Montserrat',Arial,sans-serif !important;

    font-size:6.4px !important;
    line-height:1 !important;

    font-weight:750 !important;

    letter-spacing:.13em !important;

    white-space:nowrap !important;
}


.vlh2-float-buy strong,
.vlh2-float-contract strong{
    display:block !important;

    width:100% !important;

    margin:0 !important;
    padding:0 !important;

    color:#E6F0F3 !important;

    font-family:'Montserrat',Arial,sans-serif !important;

    font-size:9.4px !important;
    line-height:1.15 !important;

    font-weight:650 !important;

    letter-spacing:-.012em !important;

    white-space:nowrap !important;
}


/* =========================================================
   ПОЗИЦИИ ЗАДАЁТ JS
   ========================================================= */

.vlh2-float-buy{
    left:var(--vlh2-buy-left,0px) !important;
    top:var(--vlh2-buy-top,0px) !important;

    right:auto !important;
    bottom:auto !important;

    animation:
        vlh2BuyFloat
        6.1s
        ease-in-out
        infinite !important;
}


.vlh2-float-contract{
    left:var(--vlh2-contract-left,0px) !important;
    top:var(--vlh2-contract-top,0px) !important;

    right:auto !important;
    bottom:auto !important;

    animation:
        vlh2ContractFloat
        6.4s
        ease-in-out
        infinite !important;
}


/* =========================================================
   ПАРЕНИЕ
   ========================================================= */

@keyframes vlh2BuyFloat{

    0%,
    100%{
        transform:
            translate3d(0,0,0)
            rotate(-.15deg);
    }

    50%{
        transform:
            translate3d(1px,-6px,0)
            rotate(.25deg);
    }

}


@keyframes vlh2ContractFloat{

    0%,
    100%{
        transform:
            translate3d(0,0,0)
            rotate(.15deg);
    }

    50%{
        transform:
            translate3d(-1px,6px,0)
            rotate(-.22deg);
    }

}


/* лёгкая воздушная подсветка */

.vlh2-float-buy::after,
.vlh2-float-contract::after{
    content:"";

    position:absolute;

    left:30px;
    right:30px;

    height:14px;

    border-radius:50%;

    background:
        radial-gradient(
            ellipse,
            rgba(88,195,217,.10),
            transparent 70%
        );

    filter:blur(7px);

    opacity:.34;

    pointer-events:none;
}


.vlh2-float-buy::after{
    bottom:-13px;
}


.vlh2-float-contract::after{
    top:-13px;
}


/* MOBILE */

@media(max-width:767px){

    .vlh2-float-buy,
    .vlh2-float-contract{
        display:none !important;
    }

}

/* VOSTOK CHINA CHAIN V1 END */








/* VOSTOK PERFORMANCE V3 START */


/* =========================================================
   БОЛЬШЕ НИКАКОГО CANVAS
   ========================================================= */

.vlh2-particles{
    display:none !important;
}


/* =========================================================
   УБИРАЕМ ТЯЖЁЛЫЕ БЕСКОНЕЧНЫЕ ЭФФЕКТЫ
   ========================================================= */

.vlh2-halo,
.vlh2-aurora,
.vlh2-route-energy,
.vlh2-title-accent,
.vlh2-node > i,
.vlh2-node > i::after,
.vlh2-mode::after{
    animation:none !important;
}


/*
 * Два статичных halo можно оставить,
 * третий не нужен.
 */

.vlh2-halo-c{
    display:none !important;
}


/* =========================================================
   УБИРАЕМ BACKDROP FILTER
   ========================================================= */

.vlh2-network,
.vlh2-node,
.vlh2-mode,
.vlh2-float,
.vlh2-secondary,
.vlh2-bottom{

    -webkit-backdrop-filter:
        none !important;

    backdrop-filter:
        none !important;
}


.vlh2-network{
    background:
        linear-gradient(
            145deg,
            rgba(25,52,64,.96),
            rgba(7,24,33,.96)
        ) !important;

    will-change:auto !important;
}


.vlh2-node{
    background:
        rgba(8,28,38,.95);
}


.vlh2-float{
    background:
        rgba(7,25,34,.97) !important;
}


/* =========================================================
   SVG FILTERЫ
   ========================================================= */

/*
 * Blur-фильтр SVG на четырёх постоянно
 * движущихся объектах особенно неприятен
 * для мобильных GPU.
 */

.vlh2-route-energy,
.vlh2-route-base,
.vlh2-packet{

    filter:none !important;
}


.vlh2-packet{
    fill:#BDF8FF !important;

    stroke:
        rgba(88,195,217,.50);

    stroke-width:.8;
}


/* =========================================================
   ARRIVAL ОСТАЁТСЯ
   ========================================================= */

.vlh2-node.vlh2-arrived{

    animation:
        vlh2ArrivalImpact
        .62s
        cubic-bezier(.16,.75,.2,1)
        both !important;

    border-color:
        rgba(134,235,248,.68) !important;

    box-shadow:
        0 0 0 1px
        rgba(113,229,244,.08),

        0 0 13px
        rgba(88,195,217,.18),

        0 0 27px
        rgba(88,195,217,.08),

        inset 0 0 18px
        rgba(88,195,217,.055)
        !important;
}


.vlh2-node.vlh2-arrived > i{

    animation:
        vlh2CountryArrivalMetal
        .62s
        ease
        both !important;
}


/* =========================================================
   КОГДА HERO НЕ ВИДЕН
   ========================================================= */

.vlh2-performance-paused
.vlh2-float,

.vlh2-performance-paused
.vlh2-origin-ring,

.vlh2-performance-paused
.vlh2-kicker i{

    animation-play-state:
        paused !important;
}


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

@media(max-width:767px){


    /*
     * Самые тяжёлые декоративные слои
     * на телефоне вообще не нужны.
     */

    .vlh2-halo,
    .vlh2-aurora,
    .vlh2-cursor-light{

        display:none !important;
    }


    .vlh2-network{

        transform:none !important;

        box-shadow:
            0 15px 35px
            rgba(0,0,0,.18) !important;
    }


    /*
     * Даём больше пространства вокруг Китая.
     */

    .vlh2-map{

        height:
            400px !important;

        overflow:
            visible !important;
    }


    /*
     * ЧЕТЫРЕ ПЛАВАЮЩИЕ ПЛАШКИ
     * Стали заметно крупнее.
     */

    .vlh2-float-cn,
    .vlh2-float-a,
    .vlh2-float-buy,
    .vlh2-float-contract{

        display:grid !important;

        position:absolute !important;

        width:
            166px !important;

        min-width:
            166px !important;

        max-width:
            166px !important;

        height:
            54px !important;

        min-height:
            54px !important;

        margin:0 !important;

        padding:
            7px
            9px !important;

        grid-template-columns:
            32px
            minmax(0,1fr) !important;

        column-gap:
            8px !important;

        align-items:
            center !important;

        border-radius:
            14px !important;

        z-index:
            15 !important;

        grid-column:
            auto !important;

        grid-row:
            auto !important;
    }


    .vlh2-float-cn{

        left:
            var(
                --vlh2-cn-float-left,
                0px
            ) !important;

        top:
            var(
                --vlh2-cn-float-top,
                0px
            ) !important;
    }


    .vlh2-float-a{

        left:
            var(
                --vlh2-control-left,
                0px
            ) !important;

        top:
            var(
                --vlh2-control-top,
                0px
            ) !important;
    }


    .vlh2-float-buy{

        left:
            var(
                --vlh2-buy-left,
                0px
            ) !important;

        top:
            var(
                --vlh2-buy-top,
                0px
            ) !important;
    }


    .vlh2-float-contract{

        left:
            var(
                --vlh2-contract-left,
                0px
            ) !important;

        top:
            var(
                --vlh2-contract-top,
                0px
            ) !important;
    }


    /*
     * ИКОНКИ
     */

    .vlh2-float-cn > i,
    .vlh2-float-a > i,
    .vlh2-float-buy > i,
    .vlh2-float-contract > i{

        width:
            32px !important;

        height:
            32px !important;

        min-width:
            32px !important;

        border-radius:
            9px !important;
    }


    .vlh2-float-cn svg,
    .vlh2-float-a svg,
    .vlh2-float-buy svg,
    .vlh2-float-contract svg{

        width:
            15px !important;

        height:
            15px !important;
    }


    /*
     * ТЕКСТ
     */

    .vlh2-float-cn small,
    .vlh2-float-a small,
    .vlh2-float-buy small,
    .vlh2-float-contract small{

        font-size:
            5px !important;

        letter-spacing:
            .08em !important;
    }


    .vlh2-float-cn strong,
    .vlh2-float-a strong,
    .vlh2-float-buy strong,
    .vlh2-float-contract strong{

        color:
            #EAF4F6 !important;

        font-size:
            7.1px !important;

        line-height:
            1.08 !important;

        white-space:
            nowrap !important;
    }


    /*
     * Парение оставляем.
     * Это только transform четырёх маленьких DOM-элементов.
     */

    .vlh2-float-buy{

        animation:
            vlh2MobileLightFloatA
            8s
            ease-in-out
            infinite !important;
    }


    .vlh2-float-cn{

        animation:
            vlh2MobileLightFloatB
            8.7s
            ease-in-out
            infinite !important;
    }


    .vlh2-float-a{

        animation:
            vlh2MobileLightFloatA
            9.1s
            ease-in-out
            infinite !important;
    }


    .vlh2-float-contract{

        animation:
            vlh2MobileLightFloatB
            8.4s
            ease-in-out
            infinite !important;
    }


    /*
     * Все дополнительные blur-тени
     * плавающих карточек отключаем.
     */

    .vlh2-float-cn::after,
    .vlh2-float-a::after,
    .vlh2-float-buy::after,
    .vlh2-float-contract::after{

        display:none !important;
    }


    /*
     * Никаких переходов, рассчитанных на hover.
     */

    .vlh2-node,
    .vlh2-mode,
    .vlh2-network{

        transition:none !important;
    }

}


@keyframes vlh2MobileLightFloatA{

    0%,
    100%{
        transform:
            translate3d(
                0,
                0,
                0
            );
    }

    50%{
        transform:
            translate3d(
                0,
                -3px,
                0
            );
    }

}


@keyframes vlh2MobileLightFloatB{

    0%,
    100%{
        transform:
            translate3d(
                0,
                -1px,
                0
            );
    }

    50%{
        transform:
            translate3d(
                0,
                3px,
                0
            );
    }

}


/* VOSTOK PERFORMANCE V3 END */

/* HERO BRIGHTNESS FIX */
.vlh2-hero{background:radial-gradient(circle at 78% 30%,rgba(88,195,217,.17),transparent 46%),radial-gradient(circle at 47% 92%,rgba(23,107,135,.19),transparent 42%),linear-gradient(125deg,#081720 0%,#0B1E29 48%,#123546 100%)!important}
.vlh2-network{background:linear-gradient(145deg,rgba(36,73,88,.82),rgba(10,35,46,.91))!important;border-color:rgba(139,226,241,.16)!important;box-shadow:0 32px 75px rgba(0,0,0,.23),inset 0 1px rgba(255,255,255,.08),0 0 38px rgba(88,195,217,.045)!important}
.vlh2-node{background:linear-gradient(135deg,rgba(15,48,61,.94),rgba(8,31,42,.94))!important}
.vlh2-float{background:linear-gradient(145deg,rgba(15,45,57,.96),rgba(7,28,38,.97))!important}
.vlh2-mode{background:linear-gradient(145deg,rgba(255,255,255,.052),rgba(88,195,217,.025))!important}
@media(max-width:767px){.vlh2-hero{background:radial-gradient(circle at 72% 33%,rgba(88,195,217,.13),transparent 39%),linear-gradient(135deg,#081720 0%,#0B202B 55%,#123443 100%)!important}}


/* HERO LITE MODE */
.vlh2-packet{
    display:block !important;
    opacity:1 !important;
}

.vlh2-copy>*{
    animation-play-state:running !important;
}

@media(max-width:767px){
    .vlh2-float-cn,
    .vlh2-float-a,
    .vlh2-float-buy,
    .vlh2-float-contract{
        animation-play-state:running !important;
    }
}

/* MOBILE ROUTE MAP HEIGHT FIX */

@media(max-width:767px){

    .vlh2-map{
        height:330px !important;
        min-height:330px !important;
        max-height:330px !important;
    }

}

/* COUNTRY EQUAL SPACING FINAL */

/* ПК и планшет */
@media(min-width:768px){

    .vlh2-node-by,
    .vlh2-node-ru,
    .vlh2-node-kz,
    .vlh2-node-kg{
        right:3% !important;
        left:auto !important;
        bottom:auto !important;
    }

    .vlh2-node-by{ top:6% !important; }
    .vlh2-node-ru{ top:31% !important; }
    .vlh2-node-kz{ top:56% !important; }
    .vlh2-node-kg{ top:81% !important; }

}


/* Телефон */
@media(max-width:767px){

    .vlh2-node-by,
    .vlh2-node-ru,
    .vlh2-node-kz,
    .vlh2-node-kg{
        right:2% !important;
        left:auto !important;
        bottom:auto !important;
    }

    .vlh2-node-by{ top:6% !important; }
    .vlh2-node-ru{ top:31% !important; }
    .vlh2-node-kz{ top:56% !important; }
    .vlh2-node-kg{ top:81% !important; }

}

/* MOBILE HERO BUTTONS FINAL */

@media(max-width:767px){

    .vlh2-actions{
        width:100% !important;
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:9px !important;
    }

    .vlh2-primary,
    .vlh2-secondary{
        position:relative !important;

        width:100% !important;
        min-width:0 !important;

        height:56px !important;
        min-height:56px !important;

        margin:0 !important;
        padding:0 58px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        border-radius:999px !important;

        font-family:'Montserrat',Arial,sans-serif !important;
        font-size:12px !important;
        line-height:1 !important;
        font-weight:700 !important;

        text-align:center !important;
    }

    /* Текст первой кнопки строго в геометрическом центре */

    .vlh2-primary > span{
        position:relative !important;
        z-index:2 !important;

        display:block !important;

        width:100% !important;

        margin:0 !important;
        padding:0 !important;

        text-align:center !important;
    }

    /* Стрелка больше не двигает текст */

    .vlh2-primary > i{
        position:absolute !important;

        right:7px !important;
        top:50% !important;

        width:42px !important;
        height:42px !important;

        margin:0 !important;

        transform:translateY(-50%) !important;
    }

    .vlh2-primary:hover > i{
        transform:
            translateY(-50%)
            translateX(2px) !important;
    }

    /* У второй кнопки тот же центр */

    .vlh2-secondary{
        justify-content:center !important;
        text-align:center !important;
    }

}

/* ULTRA LIGHT HERO STARS V2 */

.vlh2-lite-dots{
    display:none !important;
}

.vlh2-stars{
    position:absolute;
    inset:0;

    z-index:2;

    overflow:hidden;

    pointer-events:none;
}

.vlh2-stars-a,
.vlh2-stars-b{
    position:absolute;

    inset:-35px;

    pointer-events:none;

    will-change:transform;
}


/* Крупные заметные точки */

.vlh2-stars-a{
    opacity:.72;

    background:
        radial-gradient(circle at 8% 22%,  #A5F3FC 0 2px, transparent 2.8px),
        radial-gradient(circle at 17% 67%, #58C3D9 0 2.4px, transparent 3.2px),
        radial-gradient(circle at 28% 38%, #D8FCFF 0 1.8px, transparent 2.6px),
        radial-gradient(circle at 39% 81%, #72DCEB 0 2px, transparent 2.8px),
        radial-gradient(circle at 48% 19%, #A9F5FC 0 2.3px, transparent 3px),
        radial-gradient(circle at 58% 57%, #58C3D9 0 1.8px, transparent 2.7px),
        radial-gradient(circle at 67% 30%, #DDFDFF 0 2px, transparent 2.8px),
        radial-gradient(circle at 75% 75%, #6CD4E5 0 2.4px, transparent 3.2px),
        radial-gradient(circle at 84% 43%, #B8F8FF 0 1.9px, transparent 2.7px),
        radial-gradient(circle at 93% 18%, #58C3D9 0 2.1px, transparent 2.9px),
        radial-gradient(circle at 90% 86%, #D8FCFF 0 2px, transparent 2.8px),
        radial-gradient(circle at 61% 91%, #79E1EF 0 1.8px, transparent 2.6px);

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


/* Второй слой, мелкие точки */

.vlh2-stars-b{
    opacity:.38;

    background:
        radial-gradient(circle at 12% 48%, #FFFFFF 0 1.3px, transparent 2px),
        radial-gradient(circle at 23% 13%, #91EAF4 0 1.5px, transparent 2.2px),
        radial-gradient(circle at 33% 61%, #FFFFFF 0 1.2px, transparent 1.9px),
        radial-gradient(circle at 45% 42%, #58C3D9 0 1.5px, transparent 2.2px),
        radial-gradient(circle at 53% 76%, #B8F8FF 0 1.2px, transparent 1.9px),
        radial-gradient(circle at 64% 11%, #FFFFFF 0 1.4px, transparent 2.1px),
        radial-gradient(circle at 72% 52%, #58C3D9 0 1.4px, transparent 2.1px),
        radial-gradient(circle at 81% 27%, #DDFDFF 0 1.2px, transparent 1.9px),
        radial-gradient(circle at 88% 63%, #82E4F0 0 1.5px, transparent 2.2px),
        radial-gradient(circle at 96% 39%, #FFFFFF 0 1.3px, transparent 2px);

    animation:
        vlh2StarsDriftB
        23s
        ease-in-out
        infinite alternate;
}


@keyframes vlh2StarsDriftA{

    from{
        transform:
            translate3d(-4px,8px,0);
    }

    to{
        transform:
            translate3d(13px,-15px,0);
    }

}


@keyframes vlh2StarsDriftB{

    from{
        transform:
            translate3d(8px,-5px,0);
    }

    to{
        transform:
            translate3d(-11px,13px,0);
    }

}


/* Когда первый экран не виден */

.vlh2-performance-paused
.vlh2-stars-a,
.vlh2-performance-paused
.vlh2-stars-b{
    animation-play-state:paused !important;
}


/* На телефоне тоже видны, но двигаются ещё медленнее */

@media(max-width:767px){

    .vlh2-stars-a{
        opacity:.60;

        animation-duration:
            24s !important;
    }

    .vlh2-stars-b{
        opacity:.30;

        animation-duration:
            29s !important;
    }

}


/* Сами точки не перекрывают контент */

.vlh2-shell,
.vlh2-bottom{
    position:relative;
    z-index:4;
}


/* ULTRA LIGHT HERO STARS V2 */

.vlh2-lite-dots{
    display:none !important;
}

.vlh2-stars{
    position:absolute;
    inset:0;

    z-index:2;

    overflow:hidden;

    pointer-events:none;
}

.vlh2-stars-a,
.vlh2-stars-b{
    position:absolute;

    inset:-35px;

    pointer-events:none;

    will-change:transform;
}


/* Крупные заметные точки */

.vlh2-stars-a{
    opacity:.72;

    background:
        radial-gradient(circle at 8% 22%,  #A5F3FC 0 2px, transparent 2.8px),
        radial-gradient(circle at 17% 67%, #58C3D9 0 2.4px, transparent 3.2px),
        radial-gradient(circle at 28% 38%, #D8FCFF 0 1.8px, transparent 2.6px),
        radial-gradient(circle at 39% 81%, #72DCEB 0 2px, transparent 2.8px),
        radial-gradient(circle at 48% 19%, #A9F5FC 0 2.3px, transparent 3px),
        radial-gradient(circle at 58% 57%, #58C3D9 0 1.8px, transparent 2.7px),
        radial-gradient(circle at 67% 30%, #DDFDFF 0 2px, transparent 2.8px),
        radial-gradient(circle at 75% 75%, #6CD4E5 0 2.4px, transparent 3.2px),
        radial-gradient(circle at 84% 43%, #B8F8FF 0 1.9px, transparent 2.7px),
        radial-gradient(circle at 93% 18%, #58C3D9 0 2.1px, transparent 2.9px),
        radial-gradient(circle at 90% 86%, #D8FCFF 0 2px, transparent 2.8px),
        radial-gradient(circle at 61% 91%, #79E1EF 0 1.8px, transparent 2.6px);

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


/* Второй слой, мелкие точки */

.vlh2-stars-b{
    opacity:.38;

    background:
        radial-gradient(circle at 12% 48%, #FFFFFF 0 1.3px, transparent 2px),
        radial-gradient(circle at 23% 13%, #91EAF4 0 1.5px, transparent 2.2px),
        radial-gradient(circle at 33% 61%, #FFFFFF 0 1.2px, transparent 1.9px),
        radial-gradient(circle at 45% 42%, #58C3D9 0 1.5px, transparent 2.2px),
        radial-gradient(circle at 53% 76%, #B8F8FF 0 1.2px, transparent 1.9px),
        radial-gradient(circle at 64% 11%, #FFFFFF 0 1.4px, transparent 2.1px),
        radial-gradient(circle at 72% 52%, #58C3D9 0 1.4px, transparent 2.1px),
        radial-gradient(circle at 81% 27%, #DDFDFF 0 1.2px, transparent 1.9px),
        radial-gradient(circle at 88% 63%, #82E4F0 0 1.5px, transparent 2.2px),
        radial-gradient(circle at 96% 39%, #FFFFFF 0 1.3px, transparent 2px);

    animation:
        vlh2StarsDriftB
        23s
        ease-in-out
        infinite alternate;
}


@keyframes vlh2StarsDriftA{

    from{
        transform:
            translate3d(-4px,8px,0);
    }

    to{
        transform:
            translate3d(13px,-15px,0);
    }

}


@keyframes vlh2StarsDriftB{

    from{
        transform:
            translate3d(8px,-5px,0);
    }

    to{
        transform:
            translate3d(-11px,13px,0);
    }

}


/* Когда первый экран не виден */

.vlh2-performance-paused
.vlh2-stars-a,
.vlh2-performance-paused
.vlh2-stars-b{
    animation-play-state:paused !important;
}


/* На телефоне тоже видны, но двигаются ещё медленнее */

@media(max-width:767px){

    .vlh2-stars-a{
        opacity:.60;

        animation-duration:
            24s !important;
    }

    .vlh2-stars-b{
        opacity:.30;

        animation-duration:
            29s !important;
    }

}


/* Сами точки не перекрывают контент */

.vlh2-shell,
.vlh2-bottom{
    position:relative;
    z-index:4;
}


/* HERO STARS SOFTER */

.vlh2-stars-a{
    opacity:.46 !important;
}

.vlh2-stars-b{
    opacity:.24 !important;
}

@media(max-width:767px){

    .vlh2-stars-a{
        opacity:.40 !important;
    }

    .vlh2-stars-b{
        opacity:.20 !important;
    }

}
@media(min-width:768px){.vlh2-hero{min-height:612px!important}.vlh2-shell{min-height:612px!important;padding:70px 0 83px!important}}
@media(min-width:768px){.vlh2-shell{min-height:459px!important;padding:28px 0 38px!important;}}