/* =========================================================
   VOSTOK LOGISTIKA - PREMIUM STATS
   ========================================================= */

body.home .vls{
    position:relative;
    z-index:4;

    padding:30px 0 34px;

    overflow:hidden;

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

    background:
        linear-gradient(
            180deg,
            #F4F7F8 0%,
            #F1F5F6 100%
        );
}


body.home .vls-shell{
    position:relative;

    width:
        min(
            1400px,
            calc(100% - 64px)
        );

    margin:0 auto;
}


/* =========================================================
   ONE CONTINUOUS PANEL
   ========================================================= */

body.home .vls-panel{
    position:relative;

    min-height:148px;

    display:grid;

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

    align-items:center;

    overflow:hidden;

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

    border-radius:32px;

    background:
        radial-gradient(
            circle at 12% 10%,
            rgba(88,195,217,.15),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 100%,
            rgba(57,146,177,.12),
            transparent 30%
        ),
        linear-gradient(
            110deg,
            #0B202B 0%,
            #102E3B 48%,
            #0B222E 100%
        );

    box-shadow:
        0 28px 75px
        rgba(17,46,59,.13),
        0 8px 25px
        rgba(17,46,59,.07),
        inset 0 1px 0
        rgba(255,255,255,.055);

    isolation:isolate;
}


/* =========================================================
   AMBIENT LIGHT
   ========================================================= */

body.home .vls-ambient{
    position:absolute;
    inset:0;

    z-index:0;

    pointer-events:none;
}


body.home .vls-ambient-a,
body.home .vls-ambient-b{
    position:absolute;

    border-radius:50%;

    filter:blur(45px);

    opacity:.38;
}


body.home .vls-ambient-a{
    width:250px;
    height:160px;

    left:-65px;
    top:-75px;

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


body.home .vls-ambient-b{
    width:270px;
    height:170px;

    right:-90px;
    bottom:-105px;

    background:
        rgba(39,128,157,.24);
}


/* =========================================================
   LIGHT SWEEP
   ========================================================= */

body.home .vls-sweep{
    position:absolute;

    top:-90%;
    left:-18%;

    width:105px;
    height:285%;

    opacity:0;

    transform:
        rotate(23deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.045),
            rgba(128,229,241,.085),
            rgba(255,255,255,.025),
            transparent
        );
}


body.home .vls.is-visible .vls-sweep{
    animation:
        vlsPanelSweep
        6.8s
        1.1s
        ease-in-out
        infinite;
}


/* =========================================================
   ITEMS
   ========================================================= */

body.home .vls-item{
    position:relative;
    z-index:2;

    min-width:0;

    padding:
        27px
        clamp(25px,3vw,50px);

    opacity:0;

    transform:
        translate3d(
            0,
            24px,
            0
        );

    transition:
        opacity .72s
        cubic-bezier(.2,.7,.2,1)
        var(--vls-delay),

        transform .92s
        cubic-bezier(.16,1,.3,1)
        var(--vls-delay);
}


body.home .vls.is-visible .vls-item{
    opacity:1;

    transform:none;
}


/* НЕ ЖЁСТКИЕ РАЗДЕЛИТЕЛИ */

body.home .vls-item:not(:first-child)::before{
    content:"";

    position:absolute;

    left:0;
    top:31%;
    bottom:31%;

    width:1px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(158,213,223,.12),
            rgba(255,255,255,.09),
            transparent
        );
}


/* =========================================================
   NUMBER
   ========================================================= */

body.home .vls-number-wrap{
    display:flex;

    align-items:flex-start;

    width:max-content;

    max-width:100%;
}


body.home .vls-number{
    display:block;

    margin:0;

    color:#F2FAFC;

    font-size:
        clamp(
            34px,
            3vw,
            49px
        );

    line-height:.94;

    font-weight:690;

    letter-spacing:
        -.055em;

    font-variant-numeric:
        tabular-nums;

    text-shadow:
        0 8px 28px
        rgba(0,0,0,.15);
}


/* CYAN ACCENT UNDER NUMBER */

body.home .vls-number-wrap::after{
    content:"";

    align-self:flex-end;

    width:26px;
    height:1px;

    margin:
        0 0 8px 12px;

    background:
        linear-gradient(
            90deg,
            #58C3D9,
            rgba(88,195,217,0)
        );

    box-shadow:
        0 0 12px
        rgba(88,195,217,.45);

    opacity:.9;
}


/* PLUS */

body.home .vls-suffix{
    margin:
        -2px 0 0 3px;

    color:#70D9EA;

    font-size:
        clamp(
            21px,
            1.7vw,
            28px
        );

    line-height:1;

    font-weight:650;

    font-style:normal;

    opacity:0;

    transform:
        translateY(5px)
        scale(.92);

    transition:
        opacity .35s ease,
        transform .45s
        cubic-bezier(.16,1,.3,1);
}


body.home .vls-item.is-counted .vls-suffix{
    opacity:1;

    transform:none;
}


/* =========================================================
   LABEL
   ========================================================= */

body.home .vls-label{
    margin-top:11px;

    color:
        rgba(227,240,243,.58);

    font-size:10px;

    line-height:1.45;

    font-weight:500;

    letter-spacing:.01em;

    transition:
        color .35s ease;
}


@media(hover:hover){

    body.home .vls-item:hover .vls-label{
        color:
            rgba(235,248,250,.82);
    }

}


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

@keyframes vlsPanelSweep{

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

    65%{
        opacity:1;
    }

    91%{
        opacity:.85;
    }

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

}


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

@media(max-width:900px){

    body.home .vls{
        padding:
            24px 0 30px;
    }

    body.home .vls-shell{
        width:
            calc(100% - 40px);
    }

    body.home .vls-panel{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        border-radius:28px;
    }

    body.home .vls-item{
        padding:
            25px 28px;
    }

    body.home .vls-item:nth-child(3),
    body.home .vls-item:nth-child(4){
        border-top:
            1px solid
            rgba(255,255,255,.055);
    }

    body.home .vls-item:nth-child(3)::before{
        display:none;
    }

}


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

@media(max-width:520px){

    body.home .vls{
        padding:
            18px 0 24px;
    }

    body.home .vls-shell{
        width:
            calc(100% - 28px);
    }

    body.home .vls-panel{
        min-height:0;

        border-radius:24px;
    }

    body.home .vls-item{
        padding:
            22px 17px;
    }

    body.home .vls-number{
        font-size:
            clamp(
                29px,
                9vw,
                38px
            );
    }

    body.home .vls-number-wrap::after{
        width:16px;

        margin-left:7px;
    }

    body.home .vls-label{
        margin-top:8px;

        font-size:8.7px;

        line-height:1.38;
    }

}


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

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

    body.home .vls-item{
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }

    body.home .vls-sweep{
        display:none !important;
    }

}


/* =========================================================
   STATS - STRONG GLASS + VISIBLE CASCADE
   ========================================================= */

body.home .vls{
    padding:34px 0 38px !important;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(88,195,217,.055),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #F4F7F8 0%,
            #F0F4F5 100%
        ) !important;
}


/* =========================================================
   DEEP GLASS PANEL
   ========================================================= */

body.home .vls-panel{
    position:relative !important;

    min-height:164px !important;

    overflow:hidden !important;

    border:
        1px solid
        rgba(151,222,234,.13) !important;

    border-radius:34px !important;

    background:
        linear-gradient(
            118deg,
            rgba(6,24,33,.965) 0%,
            rgba(10,38,50,.94) 35%,
            rgba(14,49,63,.91) 67%,
            rgba(7,27,37,.965) 100%
        ) !important;

    -webkit-backdrop-filter:
        blur(24px)
        saturate(145%) !important;

    backdrop-filter:
        blur(24px)
        saturate(145%) !important;

    box-shadow:
        0 34px 85px rgba(7,29,39,.20),
        0 12px 28px rgba(7,29,39,.13),
        inset 0 1px 0 rgba(255,255,255,.085),
        inset 0 -1px 0 rgba(88,195,217,.035) !important;

    isolation:isolate !important;
}


/* стеклянный верхний блик */

body.home .vls-panel::before{
    content:"";

    position:absolute;
    z-index:1;

    left:1.5%;
    right:1.5%;
    top:0;

    height:58%;

    pointer-events:none;

    border-radius:
        34px 34px 50% 50%;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.055) 0%,
            rgba(148,230,242,.018) 52%,
            transparent 100%
        );

    opacity:.9;
}


/* мягкая глубина снизу */

body.home .vls-panel::after{
    content:"";

    position:absolute;
    z-index:0;

    left:8%;
    right:8%;
    bottom:-62px;

    height:120px;

    pointer-events:none;

    border-radius:50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(88,195,217,.13) 0%,
            rgba(88,195,217,.045) 42%,
            transparent 72%
        );

    filter:blur(22px);
}


/* =========================================================
   STRONGER AMBIENT CYAN LIGHT
   ========================================================= */

body.home .vls-ambient-a{
    width:330px !important;
    height:220px !important;

    left:-95px !important;
    top:-120px !important;

    opacity:.64 !important;

    filter:blur(64px) !important;

    background:
        rgba(88,195,217,.26) !important;
}


body.home .vls-ambient-b{
    width:360px !important;
    height:230px !important;

    right:-130px !important;
    bottom:-145px !important;

    opacity:.52 !important;

    filter:blur(70px) !important;

    background:
        rgba(53,159,190,.25) !important;
}


/* =========================================================
   ITEMS - REAL CASCADE LEFT TO RIGHT
   ========================================================= */

body.home .vls-item{
    z-index:3 !important;

    opacity:0 !important;

    transform:
        translate3d(
            -34px,
            18px,
            0
        )
        scale(.975) !important;

    filter:
        blur(3px) !important;

    transition:
        opacity .62s ease,
        transform .9s cubic-bezier(.16,1,.3,1),
        filter .72s ease !important;
}


body.home .vls.is-visible .vls-item{
    opacity:1 !important;

    transform:
        translate3d(
            0,
            0,
            0
        )
        scale(1) !important;

    filter:
        blur(0) !important;
}


/* ЯВНАЯ ЗАДЕРЖКА СЛЕВА НАПРАВО */

body.home .vls.is-visible .vls-item:nth-of-type(1){
    transition-delay:.10s !important;
}

body.home .vls.is-visible .vls-item:nth-of-type(2){
    transition-delay:.28s !important;
}

body.home .vls.is-visible .vls-item:nth-of-type(3){
    transition-delay:.46s !important;
}

body.home .vls.is-visible .vls-item:nth-of-type(4){
    transition-delay:.64s !important;
}


/* =========================================================
   NUMBERS - MORE PREMIUM
   ========================================================= */

body.home .vls-number{
    color:#F4FBFC !important;

    font-size:
        clamp(
            38px,
            3.15vw,
            52px
        ) !important;

    font-weight:670 !important;

    text-shadow:
        0 0 24px rgba(116,220,236,.055),
        0 8px 26px rgba(0,0,0,.20) !important;
}


body.home .vls-label{
    color:
        rgba(226,240,243,.64) !important;

    font-size:10px !important;
}


/* более деликатные разделители */

body.home .vls-item:not(:first-child)::before{
    top:28% !important;
    bottom:28% !important;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(113,207,222,.06),
            rgba(193,233,240,.14),
            rgba(113,207,222,.06),
            transparent
        ) !important;
}


/* =========================================================
   SWEEP MORE VISIBLE
   ========================================================= */

body.home .vls-sweep{
    width:125px !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.035),
            rgba(142,234,247,.11),
            rgba(255,255,255,.045),
            transparent
        ) !important;
}


@media(max-width:900px){

    body.home .vls-panel{
        min-height:0 !important;
    }

}


@media(max-width:520px){

    body.home .vls-panel{
        border-radius:25px !important;
    }

    body.home .vls-item{
        transform:
            translate3d(
                -18px,
                12px,
                0
            )
            scale(.985) !important;
    }

}


/* =========================================================
   STATS CASCADE CLEAN
   аккуратное появление слева направо
   ========================================================= */

body.home .vls-item{
    opacity:0 !important;

    transform:
        translate3d(0,16px,0) !important;

    filter:none !important;

    transition:
        opacity .62s ease,
        transform .82s cubic-bezier(.16,1,.3,1) !important;
}


body.home .vls.is-visible .vls-item{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
}


/* ambient = первый div,
   поэтому реальные показатели идут 2,3,4,5 */

body.home .vls.is-visible .vls-item:nth-child(2){
    transition-delay:.08s !important;
}

body.home .vls.is-visible .vls-item:nth-child(3){
    transition-delay:.24s !important;
}

body.home .vls.is-visible .vls-item:nth-child(4){
    transition-delay:.40s !important;
}

body.home .vls.is-visible .vls-item:nth-child(5){
    transition-delay:.56s !important;
}


/* отключаем ошибочные старые задержки */

body.home .vls.is-visible .vls-item:nth-of-type(1),
body.home .vls.is-visible .vls-item:nth-of-type(2),
body.home .vls.is-visible .vls-item:nth-of-type(3),
body.home .vls.is-visible .vls-item:nth-of-type(4){
    transition-delay:unset;
}


/* и сразу возвращаем правильные после сброса */

body.home .vls.is-visible .vls-item:nth-child(2){
    transition-delay:.08s !important;
}

body.home .vls.is-visible .vls-item:nth-child(3){
    transition-delay:.24s !important;
}

body.home .vls.is-visible .vls-item:nth-child(4){
    transition-delay:.40s !important;
}

body.home .vls.is-visible .vls-item:nth-child(5){
    transition-delay:.56s !important;
}


/* =========================================================
   STATS = CONTINUATION OF WORKFLOW
   ========================================================= */

/*
 * Убираем отдельную секционную подложку.
 * Теперь виден настоящий фон родительского .vlw.
 */

body.home #workflow-control > #company-stats{
    position:relative !important;
    z-index:6 !important;

    width:100% !important;

    margin:0 !important;

    padding:
        18px 0 42px !important;

    background:none !important;
    background-color:transparent !important;
    background-image:none !important;

    border:0 !important;
    box-shadow:none !important;

    overflow:visible !important;
}


/*
 * Workflow теперь заканчивается ПОСЛЕ статистики.
 * Его собственный фон физически продолжается вниз.
 */

body.home #workflow-control{
    padding-bottom:0 !important;
}


/*
 * Никакого дополнительного фонового слоя
 * между workflow и цифрами.
 */

body.home #workflow-control > #company-stats::before{
    content:none !important;
    display:none !important;
}

body.home #workflow-control > #company-stats::after{
    content:none !important;
    display:none !important;
}


/*
 * Плашка остаётся на общей поверхности workflow.
 */

body.home #workflow-control > #company-stats .vls-shell{
    position:relative !important;
    z-index:7 !important;

    width:
        min(
            1400px,
            calc(100% - 64px)
        ) !important;

    margin:
        0 auto !important;
}


/*
 * Убираем ощущение отдельного следующего блока.
 */

body.home #workflow-control .vlw-shell{
    position:relative !important;
    z-index:5 !important;
}


/*
 * Стекло цифр чуть мягче интегрируем в фон workflow.
 */

body.home #workflow-control .vls-panel{
    border:
        1px solid
        rgba(135,216,230,.11) !important;

    box-shadow:
        0 27px 68px
        rgba(17,46,59,.12),
        0 8px 24px
        rgba(17,46,59,.07),
        inset 0 1px 0
        rgba(255,255,255,.08) !important;
}


/* TABLET */

@media(max-width:900px){

    body.home #workflow-control > #company-stats{
        padding:
            12px 0 32px !important;
    }

    body.home #workflow-control > #company-stats .vls-shell{
        width:
            calc(100% - 40px) !important;
    }

}


/* MOBILE */

@media(max-width:520px){

    body.home #workflow-control > #company-stats{
        padding:
            8px 0 25px !important;
    }

    body.home #workflow-control > #company-stats .vls-shell{
        width:
            calc(100% - 28px) !important;
    }

}


/* =========================================================
   WORKFLOW -> STATS SPACING FIX
   сохраняем единый фон, но опускаем плашку ниже
   ========================================================= */

@media(min-width:1025px){

    body.home #workflow-control > #company-stats{
        margin-top:52px !important;

        padding-top:0 !important;
        padding-bottom:42px !important;
    }

}


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

    body.home #workflow-control > #company-stats{
        margin-top:42px !important;

        padding-top:0 !important;
        padding-bottom:32px !important;
    }

}


@media(max-width:767px){

    body.home #workflow-control > #company-stats{
        margin-top:32px !important;

        padding-top:0 !important;
        padding-bottom:25px !important;
    }

}