/* =========================================================
   VOSTOK LOGISTIKA / WORKFLOW
   ========================================================= */

body.home .vlw,
body.home .vlw *{
    box-sizing:border-box;
}

body.home .vlw{
    --vlw-ink:#0B1620;
    --vlw-accent:#176B87;
    --vlw-cyan:#58C3D9;
    --vlw-muted:#71828A;
    --vlw-line:rgba(34,75,91,.13);
    --mx:52%;
    --my:38%;

    position:relative;
    overflow:hidden;
    isolation:isolate;

    padding:92px 0 74px;

    background:
        radial-gradient(circle at var(--mx) var(--my), rgba(88,195,217,.10), transparent 24%),
        linear-gradient(180deg,#F7F9FA 0%,#F3F6F7 100%);

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

body.home .vlw-shell{
    position:relative;
    z-index:3;

    width:min(1400px,calc(100% - 64px));
    margin:0 auto;
}

body.home .vlw-bg{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
}

body.home .vlw-grid{
    position:absolute;
    inset:0;
    opacity:.40;

    background-image:
        linear-gradient(rgba(23,107,135,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(23,107,135,.035) 1px,transparent 1px);

    background-size:72px 72px;
    mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 82%,transparent 100%);
}

body.home .vlw-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(3px);
}

body.home .vlw-glow-a{
    width:520px;
    height:520px;
    left:-120px;
    top:10%;
    background:radial-gradient(circle,rgba(88,195,217,.08),rgba(88,195,217,0) 68%);
    animation:vlwFloatA 10s ease-in-out infinite alternate;
}

body.home .vlw-glow-b{
    width:460px;
    height:460px;
    right:-100px;
    bottom:4%;
    background:radial-gradient(circle,rgba(88,195,217,.06),rgba(88,195,217,0) 70%);
    animation:vlwFloatB 11s ease-in-out infinite alternate;
}

body.home .vlw-orbit{
    position:absolute;
    border:1px solid rgba(23,107,135,.08);
    border-radius:50%;
    animation:vlwOrbit 24s linear infinite;
}

body.home .vlw-orbit:after{
    content:"";
    position:absolute;
    width:7px;
    height:7px;
    top:14%;
    left:14%;
    border-radius:50%;
    background:rgba(88,195,217,.55);
    box-shadow:0 0 0 8px rgba(88,195,217,.06),0 0 28px rgba(88,195,217,.22);
}

body.home .vlw-orbit-a{
    width:470px;
    height:470px;
    right:-235px;
    top:-120px;
}

body.home .vlw-orbit-b{
    width:330px;
    height:330px;
    left:-165px;
    bottom:-110px;
    animation-duration:31s;
    animation-direction:reverse;
}

body.home .vlw-layout{
    display:grid;
    grid-template-columns:minmax(0,1.06fr) minmax(360px,.88fr);
    gap:clamp(58px,7vw,118px);
    align-items:start;
}

/* LEFT STORY */

body.home .vlw-story{
    position:relative;
    padding-left:48px;
}

body.home .vlw-spine{
    position:absolute;
    left:5px;
    top:14px;
    bottom:14px;
    width:1px;
    background:rgba(23,107,135,.14);
    overflow:hidden;
}

body.home .vlw-spine span{
    position:absolute;
    left:0;
    top:-36%;
    width:1px;
    height:36%;
    background:linear-gradient(to bottom,transparent,var(--vlw-cyan),transparent);
    filter:drop-shadow(0 0 5px rgba(88,195,217,.45));
    animation:vlwSignal 5.2s ease-in-out infinite;
}

body.home .vlw-step{
    position:relative;
    min-height:144px;
    max-width:780px;
    padding:28px 0 32px;
    border-top:1px solid var(--vlw-line);

    opacity:.34;
    transform:translateY(20px);
    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.2,.75,.2,1),
        border-color .45s ease;
}

body.home .vlw-step:nth-child(even){
    margin-left:34px;
}

body.home .vlw-step:last-child{
    border-bottom:1px solid var(--vlw-line);
}

body.home .vlw-step.is-visible{
    opacity:1;
    transform:none;
    border-color:rgba(23,107,135,.20);
}

body.home .vlw-step-mark{
    position:absolute;
    left:-43px;
    top:35px;
    width:9px;
    height:9px;
    border:2px solid rgba(23,107,135,.30);
    border-radius:50%;
    background:#F4F7F8;
    transition:
        transform .45s ease,
        border-color .45s ease,
        background .45s ease,
        box-shadow .45s ease;
}

body.home .vlw-step.is-visible .vlw-step-mark{
    transform:scale(1.06);
    border-color:var(--vlw-cyan);
    background:var(--vlw-cyan);
    box-shadow:0 0 0 8px rgba(88,195,217,.075),0 0 24px rgba(88,195,217,.18);
}

body.home .vlw-step-copy small{
    display:block;
    margin-bottom:12px;
    color:#74868E;
    font-size:9px;
    line-height:1;
    font-weight:700;
    letter-spacing:.18em;
}

body.home .vlw-step-copy h3{
    margin:0 0 10px !important;
    color:#172A34 !important;
    font-size:19px !important;
    line-height:1.18 !important;
    font-weight:700 !important;
    letter-spacing:-.028em !important;
}

body.home .vlw-step-copy p{
    max-width:620px;
    margin:0 !important;
    color:#74858C !important;
    font-size:11px !important;
    line-height:1.72 !important;
    font-weight:450 !important;
}

/* RIGHT INTRO */

body.home .vlw-intro{
    position:sticky;
    top:132px;
    padding-top:4px;
}

body.home .vlw-intro-frame{
    position:relative;
    min-height:690px;
    padding:34px 34px 34px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    border-radius:30px;
    overflow:hidden;
    isolation:isolate;

    box-shadow:
        0 20px 60px rgba(13,34,44,.12),
        0 6px 18px rgba(13,34,44,.08);
}

body.home .vlw-intro-frame:before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;

    background:
        url("/wp-content/uploads/vostok-logistika/workflow/workflow-bg.webp") center center / cover no-repeat;

    transform:scale(1.02);
    filter:brightness(.74) saturate(.92) contrast(1.03);
}

body.home .vlw-intro-frame:after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;

    background:
        linear-gradient(180deg,rgba(5,20,28,.18) 0%,rgba(6,25,35,.30) 28%,rgba(8,26,38,.68) 72%,rgba(7,19,27,.88) 100%);
}

body.home .vlw-intro-kicker{
    margin-bottom:18px;
    display:flex;
    align-items:center;
    gap:10px;

    color:rgba(227,242,246,.76);

    font-size:9px;
    line-height:1;
    font-weight:700;
    letter-spacing:.18em;
}

body.home .vlw-intro-kicker i{
    width:6px;
    height:6px;
    flex:0 0 6px;
    border-radius:50%;
    background:#58C3D9;
    box-shadow:0 0 0 5px rgba(88,195,217,.12);
}

body.home .vlw-intro h2{
    margin:0 !important;
    color:#FFFFFF !important;
    font-size:clamp(40px,4vw,62px) !important;
    line-height:.98 !important;
    font-weight:750 !important;
    letter-spacing:-.055em !important;
    text-transform:none !important;
}

body.home .vlw-intro h2 span{
    display:block;
    margin-top:4px;
    background:linear-gradient(90deg,#45B9D1 0%,#8DECF6 44%,#58C3D9 72%,#45A8C0 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:#8DECF6;
}

body.home .vlw-lead{
    width:min(460px,100%);
    margin:24px 0 0 !important;
    color:rgba(239,247,249,.84) !important;
    font-size:13px !important;
    line-height:1.72 !important;
    font-weight:450 !important;
    text-shadow:0 2px 14px rgba(0,0,0,.20);
}

body.home .vlw-side-note{
    width:min(440px,100%);
    margin-top:30px;
    display:grid;
    grid-template-columns:42px 1fr;
    gap:15px;
    align-items:start;
}

body.home .vlw-side-line{
    position:relative;
    display:block;
    height:1px;
    margin-top:8px;
    background:rgba(88,195,217,.34);
}

body.home .vlw-side-line:after{
    content:"";
    position:absolute;
    right:0;
    top:50%;
    width:4px;
    height:4px;
    border-radius:50%;
    background:#58C3D9;
    transform:translate(50%,-50%);
}

body.home .vlw-side-note p{
    margin:0 !important;
    color:rgba(235,246,248,.76) !important;
    font-size:10px !important;
    line-height:1.6 !important;
    font-weight:500 !important;
}

body.home .vlw-cta{
    position:relative;
    width:230px;
    height:50px;
    margin-top:28px;
    padding:0 50px 0 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:var(--vlw-accent);
    color:#fff !important;
    text-decoration:none !important;
    font-size:10px !important;
    line-height:1 !important;
    font-weight:700 !important;
    box-shadow:0 8px 20px rgba(23,107,135,.15);
    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

body.home .vlw-cta i{
    position:absolute;
    right:6px;
    top:50%;
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    font-size:14px;
    line-height:1;
    font-style:normal;
    transform:translateY(-50%);
    transition:transform .25s ease,background .25s ease;
}

@media(hover:hover){
    body.home .vlw-cta:hover{
        transform:translateY(-2px);
        background:#145F79;
        box-shadow:0 12px 25px rgba(23,107,135,.20);
    }

    body.home .vlw-cta:hover i{
        transform:translateY(-50%) rotate(9deg);
        background:rgba(255,255,255,.17);
    }
}

/* MOTION */

body.home .vlw.is-motion-ready .vlw-story,
body.home .vlw.is-motion-ready .vlw-intro{
    opacity:0;
    transform:translateY(24px);
    transition:
        opacity .75s ease,
        transform .85s cubic-bezier(.2,.75,.2,1);
}

body.home .vlw.is-motion-ready .vlw-intro{
    transition-delay:.08s;
}

body.home .vlw.is-motion-ready.is-inview .vlw-story,
body.home .vlw.is-motion-ready.is-inview .vlw-intro{
    opacity:1;
    transform:none;
}

/* TABLET */

@media(max-width:1024px){
    body.home .vlw{
        padding-top:82px;
    }

    body.home .vlw-layout{
        grid-template-columns:1fr;
        gap:58px;
    }

    body.home .vlw-intro{
        position:relative;
        top:auto;
        order:-1;
    }

    body.home .vlw-story{
        width:min(860px,100%);
        margin-left:auto;
        margin-right:auto;
    }

    body.home .vlw-intro-frame{
        min-height:560px;
    }

    body.home .vlw-step:nth-child(even){
        margin-left:22px;
    }
}

/* MOBILE */

@media(max-width:767px){
    body.home .vlw{
        padding:58px 0 50px;
        background:
            radial-gradient(circle at 72% 18%,rgba(88,195,217,.10),transparent 28%),
            linear-gradient(180deg,#F7F9FA 0%,#F3F6F7 100%);
    }

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

    body.home .vlw-grid{
        background-size:52px 52px;
        opacity:.30;
    }

    body.home .vlw-orbit-a{
        width:350px;
        height:350px;
        right:-220px;
        top:-110px;
    }

    body.home .vlw-orbit-b{
        display:none;
    }

    body.home .vlw-intro-frame{
        min-height:480px;
        padding:28px 24px 26px;
        border-radius:24px;
    }

    body.home .vlw-intro h2{
        font-size:clamp(34px,11vw,48px) !important;
    }

    body.home .vlw-lead{
        font-size:11px !important;
        line-height:1.66 !important;
    }

    body.home .vlw-side-note{
        grid-template-columns:30px 1fr;
        gap:12px;
    }

    body.home .vlw-story{
        padding-left:34px;
    }

    body.home .vlw-spine{
        left:4px;
    }

    body.home .vlw-step{
        min-height:0;
        padding:24px 0 26px;
    }

    body.home .vlw-step:nth-child(even){
        margin-left:0;
    }

    body.home .vlw-step-mark{
        left:-29px;
        top:31px;
    }

    body.home .vlw-step-copy h3{
        font-size:17px !important;
    }

    body.home .vlw-step-copy p{
        font-size:10px !important;
        line-height:1.68 !important;
    }

    body.home .vlw-cta{
        width:100%;
        height:52px;
        margin-top:24px;
    }
}

@media(prefers-reduced-motion:reduce){
    body.home .vlw *,
    body.home .vlw::before,
    body.home .vlw::after{
        animation:none !important;
        transition:none !important;
    }

    body.home .vlw.is-motion-ready .vlw-story,
    body.home .vlw.is-motion-ready .vlw-intro,
    body.home .vlw-step{
        opacity:1 !important;
        transform:none !important;
    }
}

@keyframes vlwOrbit{
    to{transform:rotate(360deg)}
}

@keyframes vlwFloatA{
    from{transform:translate3d(-16px,-10px,0) scale(.97)}
    to{transform:translate3d(18px,12px,0) scale(1.03)}
}

@keyframes vlwFloatB{
    from{transform:translate3d(12px,-8px,0) scale(1)}
    to{transform:translate3d(-16px,14px,0) scale(1.04)}
}

@keyframes vlwSignal{
    0%{top:-36%}
    100%{top:100%}
}

/* =========================================================
   WORKFLOW BLOCK — REBUILD TO MATCH CHINA START
   ========================================================= */

@media(min-width:1025px){

    body.home .vlw{
        padding-top:68px !important;
        padding-bottom:42px !important;
        overflow:hidden !important;
    }

    body.home .vlw-shell{
        width:min(1400px,calc(100% - 64px)) !important;
    }

    body.home .vlw-layout{
        grid-template-columns:minmax(340px,.82fr) minmax(0,1.18fr) !important;
        gap:clamp(60px,7vw,120px) !important;
        align-items:center !important;
    }

    /* ЛЕВАЯ ФОТО-ЧАСТЬ КАК У ВТОРОГО БЛОКА */

    body.home .vlw-intro{
        grid-column:1 !important;
        grid-row:1 !important;
        position:sticky !important;
        top:132px !important;
        padding-top:4px !important;
        z-index:2 !important;
    }

    body.home .vlw-intro-frame{
        position:relative !important;
        min-height:610px !important;
        padding:34px 55px 40px 8px !important;
        display:flex !important;
        flex-direction:column !important;
        justify-content:center !important;

        border-radius:0 !important;
        background:none !important;
        box-shadow:none !important;
        overflow:visible !important;
        isolation:isolate !important;
    }

    body.home .vlw-intro-frame::before{
        content:"" !important;
        position:absolute !important;
        z-index:-2 !important;

        left:-75px !important;
        right:-280px !important;
        top:-58px !important;
        bottom:-62px !important;

        background:url("/wp-content/uploads/vostok-logistika/workflow/workflow-bg.webp") left center/cover no-repeat !important;
        filter:brightness(.60) saturate(.90) contrast(1.05) !important;

        -webkit-mask-image:linear-gradient(
            90deg,
            #000 0%,
            #000 52%,
            rgba(0,0,0,.90) 67%,
            rgba(0,0,0,.48) 82%,
            transparent 100%
        ) !important;

        mask-image:linear-gradient(
            90deg,
            #000 0%,
            #000 52%,
            rgba(0,0,0,.90) 67%,
            rgba(0,0,0,.48) 82%,
            transparent 100%
        ) !important;
    }

    body.home .vlw-intro-frame::after{
        content:"" !important;
        position:absolute !important;
        z-index:-1 !important;

        left:-75px !important;
        right:-280px !important;
        top:-58px !important;
        bottom:-62px !important;

        background:linear-gradient(
            90deg,
            rgba(3,15,23,.90) 0%,
            rgba(5,24,34,.73) 47%,
            rgba(13,48,61,.35) 69%,
            transparent 100%
        ) !important;

        -webkit-mask-image:linear-gradient(
            90deg,
            #000 0%,
            #000 66%,
            rgba(0,0,0,.62) 84%,
            transparent 100%
        ) !important;

        mask-image:linear-gradient(
            90deg,
            #000 0%,
            #000 66%,
            rgba(0,0,0,.62) 84%,
            transparent 100%
        ) !important;
    }

    body.home .vlw-intro-kicker{
        margin-bottom:18px !important;
        color:rgba(221,241,246,.78) !important;
    }

    body.home .vlw-intro-kicker i{
        background:#58c3d9 !important;
        box-shadow:0 0 16px rgba(88,195,217,.55) !important;
    }

    body.home .vlw-intro h2{
        width:min(620px,100%) !important;
        margin:0 !important;
        color:#fff !important;
        font-size:clamp(52px,4.9vw,82px) !important;
        line-height:.96 !important;
        font-weight:760 !important;
        letter-spacing:-.058em !important;
        text-shadow:0 3px 28px rgba(0,0,0,.30) !important;
    }

    body.home .vlw-intro h2 span{
        margin-top:2px !important;
        color:#7deaff !important;
        background:linear-gradient(90deg,#45B9D1 0%,#8DECF6 45%,#58C3D9 72%,#45A8C0 100%) !important;
        -webkit-background-clip:text !important;
        background-clip:text !important;
        -webkit-text-fill-color:transparent !important;
        text-shadow:none !important;
    }

    body.home .vlw-lead{
        width:min(520px,100%) !important;
        margin:24px 0 0 !important;
        color:rgba(239,247,249,.84) !important;
        font-size:13px !important;
        line-height:1.72 !important;
        font-weight:450 !important;
        text-shadow:0 2px 14px rgba(0,0,0,.22) !important;
    }

    body.home .vlw-side-note{
        width:min(470px,100%) !important;
        margin-top:28px !important;
        display:grid !important;
        grid-template-columns:44px 1fr !important;
        gap:14px !important;
        align-items:start !important;
    }

    body.home .vlw-side-line{
        margin-top:8px !important;
        background:linear-gradient(180deg,#58c3d9,rgba(88,195,217,.10)) !important;
    }

    body.home .vlw-side-note p{
        color:rgba(235,246,248,.72) !important;
        font-size:10px !important;
        line-height:1.6 !important;
        font-weight:500 !important;
    }

    body.home .vlw-cta{
        width:220px !important;
        height:48px !important;
        margin-top:26px !important;
        padding:0 50px 0 20px !important;
        border-radius:999px !important;
        background:#176B87 !important;
        box-shadow:0 8px 20px rgba(23,107,135,.15) !important;
        font-size:10px !important;
    }

    body.home .vlw-cta i{
        right:6px !important;
        top:50% !important;
        width:36px !important;
        height:36px !important;
        border-radius:50% !important;
        background:rgba(255,255,255,.12) !important;
        transform:translateY(-50%) !important;
    }

    /* ПРАВАЯ КОЛОНКА — РОВНАЯ И КОМПАКТНАЯ */

    body.home .vlw-story{
        grid-column:2 !important;
        grid-row:1 !important;

        width:min(860px,100%) !important;
        margin-left:auto !important;
        margin-right:0 !important;
        padding-left:42px !important;
        align-self:center !important;
    }

    body.home .vlw-spine{
        left:0 !important;
        top:16px !important;
        bottom:16px !important;
        width:1px !important;
        background:rgba(23,107,135,.14) !important;
    }

    body.home .vlw-spine span{
        background:linear-gradient(to bottom,transparent,#58C3D9,transparent) !important;
        filter:drop-shadow(0 0 5px rgba(88,195,217,.45)) !important;
    }

    body.home .vlw-step{
        min-height:0 !important;
        margin:0 !important;
        padding:28px 0 28px !important;
        border-top:1px solid rgba(34,75,91,.13) !important;
        opacity:1 !important;
        transform:none !important;
    }

    body.home .vlw-step:nth-child(even){
        margin-left:0 !important;
    }

    body.home .vlw-step:last-child{
        border-bottom:1px solid rgba(34,75,91,.13) !important;
    }

    body.home .vlw-step-mark{
        left:-45px !important;
        top:35px !important;
        width:9px !important;
        height:9px !important;
        border:2px solid rgba(23,107,135,.30) !important;
        border-radius:50% !important;
        background:#F4F7F8 !important;
    }

    body.home .vlw-step.is-visible .vlw-step-mark,
    body.home .vlw-step-mark{
        transform:none !important;
    }

    body.home .vlw-step-copy{
        display:grid !important;
        grid-template-columns:170px 1fr !important;
        column-gap:30px !important;
        row-gap:4px !important;
        align-items:start !important;
    }

    body.home .vlw-step-copy small{
        grid-column:1 !important;
        grid-row:1 / 3 !important;
        display:block !important;
        margin:2px 0 0 !important;

        color:#176B87 !important;
        font-size:clamp(17px,1.45vw,23px) !important;
        line-height:1.08 !important;
        font-weight:700 !important;
        letter-spacing:-.03em !important;
    }

    body.home .vlw-step-copy h3{
        grid-column:2 !important;
        margin:0 0 8px !important;

        color:#162A34 !important;
        font-size:17px !important;
        line-height:1.22 !important;
        font-weight:700 !important;
        letter-spacing:-.025em !important;
    }

    body.home .vlw-step-copy p{
        grid-column:2 !important;
        max-width:420px !important;
        margin:0 !important;

        color:#74858C !important;
        font-size:11px !important;
        line-height:1.7 !important;
        font-weight:450 !important;
    }

    /* УБИРАЕМ КАРТОЧНЫЙ ЭФФЕКТ И ДЕЛАЕМ КАК У ВТОРОГО БЛОКА */

    body.home .vlw.is-motion-ready .vlw-story,
    body.home .vlw.is-motion-ready .vlw-intro{
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }
}

/* TABLET */

@media(max-width:1024px){

    body.home .vlw{
        padding-top:64px !important;
        padding-bottom:40px !important;
    }

    body.home .vlw-layout{
        grid-template-columns:1fr !important;
        gap:54px !important;
        align-items:start !important;
    }

    body.home .vlw-intro{
        order:-1 !important;
        position:relative !important;
        top:auto !important;
    }

    body.home .vlw-intro-frame{
        min-height:520px !important;
        padding:28px 28px 30px !important;
        border-radius:24px !important;
        overflow:hidden !important;
        box-shadow:0 20px 60px rgba(13,34,44,.12),0 6px 18px rgba(13,34,44,.08) !important;
    }

    body.home .vlw-intro-frame::before,
    body.home .vlw-intro-frame::after{
        left:0 !important;
        right:0 !important;
        top:0 !important;
        bottom:0 !important;
        -webkit-mask-image:none !important;
        mask-image:none !important;
    }

    body.home .vlw-story{
        padding-left:34px !important;
    }

    body.home .vlw-step-copy{
        grid-template-columns:140px 1fr !important;
        column-gap:22px !important;
    }
}

/* MOBILE */

@media(max-width:767px){

    body.home .vlw{
        padding:54px 0 42px !important;
    }

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

    body.home .vlw-intro-frame{
        min-height:460px !important;
        padding:24px 22px 24px !important;
    }

    body.home .vlw-intro h2{
        font-size:clamp(34px,10.5vw,48px) !important;
        line-height:.98 !important;
    }

    body.home .vlw-lead{
        font-size:11px !important;
        line-height:1.66 !important;
    }

    body.home .vlw-story{
        padding-left:28px !important;
    }

    body.home .vlw-spine{
        left:3px !important;
    }

    body.home .vlw-step{
        padding:22px 0 22px !important;
    }

    body.home .vlw-step-mark{
        left:-25px !important;
        top:29px !important;
    }

    body.home .vlw-step-copy{
        grid-template-columns:1fr !important;
        row-gap:6px !important;
    }

    body.home .vlw-step-copy small{
        grid-column:auto !important;
        grid-row:auto !important;
        margin:0 0 2px !important;
        font-size:16px !important;
    }

    body.home .vlw-step-copy h3{
        grid-column:auto !important;
        font-size:17px !important;
    }

    body.home .vlw-step-copy p{
        grid-column:auto !important;
        max-width:none !important;
        font-size:10px !important;
    }
}


/* =========================================================
   WORKFLOW FINAL MIRROR LAYOUT
   same visual logic as CHINA START
   ========================================================= */

@media(min-width:1025px){

    body.home .vlw{
        padding:72px 0 58px !important;
    }

    body.home .vlw-shell{
        width:min(1400px,calc(100% - 64px)) !important;
    }


    /* =====================================================
       LAYOUT
       LEFT = PROCESS
       RIGHT = PHOTO + MAIN TITLE
       ===================================================== */

    body.home .vlw-layout{
        display:grid !important;

        grid-template-columns:
            minmax(0,1.18fr)
            minmax(340px,.82fr) !important;

        gap:clamp(60px,7vw,120px) !important;

        align-items:start !important;
    }


    /* =====================================================
       LEFT COLUMN
       COPY OF THE STRUCTURAL LOGIC OF BLOCK 2
       ===================================================== */

    body.home .vlw-story{
        grid-column:1 !important;
        grid-row:1 !important;

        position:relative !important;

        width:auto !important;

        margin:0 !important;

        padding-left:46px !important;
    }


    body.home .vlw-spine{
        position:absolute !important;

        left:5px !important;
        top:13px !important;
        bottom:13px !important;

        width:1px !important;

        background:
            rgba(23,107,135,.14) !important;

        overflow:hidden !important;
    }


    body.home .vlw-spine span{
        position:absolute !important;

        left:0 !important;
        top:-38% !important;

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

        background:
            linear-gradient(
                to bottom,
                transparent,
                #58C3D9,
                transparent
            ) !important;

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


    body.home .vlw-step{
        position:relative !important;

        display:grid !important;

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

        gap:
            clamp(22px,3vw,48px) !important;

        align-items:start !important;

        min-height:155px !important;

        margin:0 !important;

        padding:
            28px 0 34px !important;

        border-top:
            1px solid
            rgba(34,75,91,.13) !important;

        opacity:.34 !important;

        transform:
            translateY(20px) !important;

        transition:
            opacity .7s ease,
            transform .7s
            cubic-bezier(.2,.75,.2,1),
            border-color .45s ease !important;
    }


    body.home .vlw-step:nth-child(even){
        margin-left:0 !important;
    }


    body.home .vlw-step:last-child{
        border-bottom:
            1px solid
            rgba(34,75,91,.13) !important;
    }


    body.home .vlw-step.is-visible{
        opacity:1 !important;

        transform:none !important;

        border-color:
            rgba(23,107,135,.20) !important;
    }


    body.home .vlw-step-mark{
        position:absolute !important;

        left:-45px !important;
        top:35px !important;

        width:9px !important;
        height:9px !important;

        border:
            2px solid
            rgba(23,107,135,.30) !important;

        border-radius:50% !important;

        background:#F4F7F8 !important;
    }


    body.home .vlw-step.is-visible .vlw-step-mark{
        border-color:#58C3D9 !important;

        background:#58C3D9 !important;

        box-shadow:
            0 0 0 8px
            rgba(88,195,217,.075),
            0 0 24px
            rgba(88,195,217,.18) !important;
    }


    body.home .vlw-step-word{
        padding-top:1px !important;

        color:
            rgba(11,22,32,.25) !important;

        font-size:
            clamp(18px,1.55vw,24px) !important;

        line-height:1 !important;

        font-weight:750 !important;

        letter-spacing:
            -.045em !important;

        transition:
            color .55s ease,
            transform .55s ease !important;
    }


    body.home .vlw-step.is-visible .vlw-step-word{
        color:#176B87 !important;

        transform:
            translateX(4px) !important;
    }


    body.home .vlw-step-copy{
        display:block !important;
    }


    body.home .vlw-step-copy h3{
        margin:
            0 0 9px !important;

        color:#172A34 !important;

        font-size:17px !important;

        line-height:1.2 !important;

        font-weight:700 !important;

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


    body.home .vlw-step-copy p{
        max-width:590px !important;

        margin:0 !important;

        color:#74858C !important;

        font-size:11px !important;

        line-height:1.7 !important;

        font-weight:450 !important;
    }


    /* =====================================================
       RIGHT PHOTO
       ===================================================== */

    body.home .vlw-intro{
        grid-column:2 !important;
        grid-row:1 !important;

        position:sticky !important;

        top:132px !important;

        padding-top:4px !important;

        z-index:2 !important;
    }


    body.home .vlw-intro-frame{
        position:relative !important;

        min-height:690px !important;

        padding:
            40px 0 40px 54px !important;

        display:flex !important;

        flex-direction:column !important;

        justify-content:center !important;

        align-items:flex-start !important;

        border-radius:0 !important;

        overflow:visible !important;

        background:none !important;

        box-shadow:none !important;

        isolation:isolate !important;
    }


    /* ФОТО УХОДИТ ОТ ЦЕНТРА СТРАНИЦЫ ВПРАВО */

    body.home .vlw-intro-frame::before{
        content:"" !important;

        position:absolute !important;

        z-index:-2 !important;

        left:-300px !important;
        right:-90px !important;

        top:-55px !important;
        bottom:-55px !important;

        background:
            url("/wp-content/uploads/vostok-logistika/workflow/workflow-bg.webp")
            right center /
            cover
            no-repeat !important;

        transform:none !important;

        filter:
            brightness(.63)
            saturate(.92)
            contrast(1.04) !important;

        -webkit-mask-image:
            linear-gradient(
                90deg,
                transparent 0%,
                rgba(0,0,0,.16) 15%,
                rgba(0,0,0,.60) 31%,
                #000 49%,
                #000 100%
            ) !important;

        mask-image:
            linear-gradient(
                90deg,
                transparent 0%,
                rgba(0,0,0,.16) 15%,
                rgba(0,0,0,.60) 31%,
                #000 49%,
                #000 100%
            ) !important;
    }


    /* ТЁМНАЯ ПОДЛОЖКА ПОД ТЕКСТ
       ТОЖЕ РАСТВОРЯЕТСЯ К ЦЕНТРУ */

    body.home .vlw-intro-frame::after{
        content:"" !important;

        position:absolute !important;

        z-index:-1 !important;

        left:-300px !important;
        right:-90px !important;

        top:-55px !important;
        bottom:-55px !important;

        background:
            linear-gradient(
                90deg,
                transparent 0%,
                rgba(5,24,34,.12) 19%,
                rgba(5,24,34,.45) 40%,
                rgba(4,19,28,.76) 64%,
                rgba(3,15,23,.88) 100%
            ) !important;

        -webkit-mask-image:
            linear-gradient(
                90deg,
                transparent 0%,
                rgba(0,0,0,.30) 20%,
                #000 47%,
                #000 100%
            ) !important;

        mask-image:
            linear-gradient(
                90deg,
                transparent 0%,
                rgba(0,0,0,.30) 20%,
                #000 47%,
                #000 100%
            ) !important;
    }


    /* =====================================================
       TEXT IN THE CENTER OF PHOTO
       ===================================================== */

    body.home .vlw-intro-kicker{
        margin-bottom:18px !important;

        color:
            rgba(227,242,246,.78) !important;
    }


    body.home .vlw-intro h2{
        width:min(560px,100%) !important;

        margin:0 !important;

        color:#FFFFFF !important;

        font-size:
            clamp(44px,4.25vw,68px) !important;

        line-height:.98 !important;

        font-weight:750 !important;

        letter-spacing:
            -.055em !important;

        text-shadow:
            0 3px 28px
            rgba(0,0,0,.28) !important;
    }


    body.home .vlw-intro h2 span{
        display:block !important;

        margin-top:5px !important;

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

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

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

        color:#8DECF6 !important;
    }


    body.home .vlw-lead{
        width:min(470px,100%) !important;

        margin:
            25px 0 0 !important;

        color:
            rgba(239,247,249,.84) !important;

        font-size:13px !important;

        line-height:1.72 !important;

        font-weight:450 !important;
    }


    body.home .vlw-side-note{
        width:min(440px,100%) !important;

        margin-top:32px !important;
    }


    body.home .vlw-side-note p{
        color:
            rgba(235,246,248,.74) !important;
    }


    body.home .vlw-cta{
        margin-top:28px !important;
    }

}


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

@media(max-width:1024px){

    body.home .vlw-layout{
        grid-template-columns:1fr !important;
        gap:58px !important;
    }

    body.home .vlw-intro{
        order:-1 !important;

        position:relative !important;
        top:auto !important;
    }

    body.home .vlw-intro-frame{
        min-height:540px !important;

        padding:
            34px !important;

        overflow:hidden !important;

        border-radius:26px !important;
    }

    body.home .vlw-intro-frame::before,
    body.home .vlw-intro-frame::after{
        left:0 !important;
        right:0 !important;
        top:0 !important;
        bottom:0 !important;

        -webkit-mask-image:none !important;
        mask-image:none !important;
    }

}


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

@media(max-width:767px){

    body.home .vlw{
        padding:
            58px 0 50px !important;
    }

    body.home .vlw-intro-frame{
        min-height:500px !important;

        padding:
            28px 24px !important;
    }

    body.home .vlw-story{
        padding-left:
            34px !important;
    }

    body.home .vlw-step{
        display:block !important;

        min-height:0 !important;

        padding:
            24px 0 27px !important;
    }

    body.home .vlw-step-word{
        margin-bottom:
            9px !important;

        font-size:
            18px !important;
    }

    body.home .vlw-step-mark{
        left:-29px !important;
        top:31px !important;
    }

}


/* =========================================================
   WORKFLOW HEIGHT MATCH
   ========================================================= */

@media(min-width:1025px){

    body.home .vlw{
        padding-top:54px !important;
        padding-bottom:42px !important;
    }

    body.home .vlw-intro-frame{
        min-height:585px !important;
    }

    body.home .vlw-intro-frame::before,
    body.home .vlw-intro-frame::after{
        top:-34px !important;
        bottom:-34px !important;
    }

    body.home .vlw-step{
        min-height:0 !important;
        padding:21px 0 23px !important;
    }

    body.home .vlw-step-mark{
        top:28px !important;
    }

    body.home .vlw-step-copy h3{
        margin-bottom:7px !important;
    }

}


/* =========================================================
   WORKFLOW CENTER LINE
   отдельный элемент между колонками
   ========================================================= */

@media(min-width:1025px){

    body.home .vlw-layout{
        position:relative !important;
    }

    body.home .vlw-centerline{
        position:absolute;

        z-index:7;

        left:50%;
        top:22px;
        bottom:22px;

        width:28px;

        transform:translateX(-50%);

        pointer-events:none;
    }

    body.home .vlw-centerline-track{
        position:absolute;

        left:50%;
        top:0;
        bottom:0;

        width:1px;

        transform:translateX(-50%);

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

        overflow:hidden;
    }

    body.home .vlw-centerline-signal{
        position:absolute;

        left:0;
        top:-38%;

        width:1px;
        height:38%;

        background:
            linear-gradient(
                to bottom,
                transparent,
                #58C3D9,
                transparent
            );

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

        animation:
            vlwCenterSignal
            5.2s
            ease-in-out
            infinite;
    }

    body.home .vlw-centerline b{
        position:absolute;

        left:50%;
        top:var(--p);

        width:9px;
        height:9px;

        border-radius:50%;

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

        background:#58C3D9;

        box-shadow:
            0 0 0 8px
            rgba(88,195,217,.075),
            0 0 24px
            rgba(88,195,217,.18);
    }

}


@keyframes vlwCenterSignal{

    0%{
        transform:translateY(-5%);
        opacity:0;
    }

    18%{
        opacity:1;
    }

    76%{
        opacity:1;
    }

    100%{
        transform:translateY(365%);
        opacity:0;
    }

}


@media(max-width:1024px){

    body.home .vlw-centerline{
        display:none !important;
    }

}


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

    body.home .vlw-centerline-signal{
        animation:none !important;
    }

}


/* =========================================================
   CENTER LINE - MATCH LEFT SPINE EXACTLY
   ========================================================= */

@media(min-width:1025px){

    body.home .vlw-centerline{
        top:13px !important;
        bottom:13px !important;
    }

    body.home .vlw-centerline-track{
        background:rgba(23,107,135,.14) !important;
    }

    body.home .vlw-centerline-signal{
        top:-38% !important;

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

        background:
            linear-gradient(
                to bottom,
                transparent,
                #58C3D9,
                transparent
            ) !important;

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

        animation:
            vlwCenterSignal
            5.2s
            ease-in-out
            infinite !important;
    }

    /* точки делаем такими же, как маркеры слева */

    body.home .vlw-centerline b{
        width:9px !important;
        height:9px !important;

        border:
            2px solid
            rgba(23,107,135,.30) !important;

        border-radius:50% !important;

        background:#F4F7F8 !important;

        box-shadow:none !important;
    }

    /* мягкий фирменный акцент */
    body.home .vlw-centerline b::after{
        content:"";

        position:absolute;

        inset:1px;

        border-radius:50%;

        background:#58C3D9;

        opacity:.28;
    }

}


/* =========================================================
   CENTER LINE - MATCH LEFT SPINE EXACTLY
   ========================================================= */

@media(min-width:1025px){

    body.home .vlw-centerline{
        top:13px !important;
        bottom:13px !important;
    }

    body.home .vlw-centerline-track{
        background:rgba(23,107,135,.14) !important;
    }

    body.home .vlw-centerline-signal{
        top:-38% !important;

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

        background:
            linear-gradient(
                to bottom,
                transparent,
                #58C3D9,
                transparent
            ) !important;

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

        animation:
            vlwCenterSignal
            5.2s
            ease-in-out
            infinite !important;
    }

    /* точки делаем такими же, как маркеры слева */

    body.home .vlw-centerline b{
        width:9px !important;
        height:9px !important;

        border:
            2px solid
            rgba(23,107,135,.30) !important;

        border-radius:50% !important;

        background:#F4F7F8 !important;

        box-shadow:none !important;
    }

    /* мягкий фирменный акцент */
    body.home .vlw-centerline b::after{
        content:"";

        position:absolute;

        inset:1px;

        border-radius:50%;

        background:#58C3D9;

        opacity:.28;
    }

}


/* =========================================================
   CENTER LINE = EXACT VISUAL COPY OF LEFT LINE
   ========================================================= */

@media(min-width:1025px){

    body.home .vlw-centerline{
        position:absolute !important;

        left:50% !important;

        width:28px !important;

        transform:
            translateX(-50%) !important;

        pointer-events:none !important;

        z-index:7 !important;
    }


    /* ОСНОВНАЯ ЛИНИЯ - ТЕ ЖЕ ПАРАМЕТРЫ, ЧТО У .vlw-spine */

    body.home .vlw-centerline-track{
        position:absolute !important;

        left:50% !important;
        top:0 !important;
        bottom:0 !important;

        width:1px !important;

        transform:
            translateX(-50%) !important;

        background:
            rgba(23,107,135,.14) !important;

        overflow:hidden !important;
    }


    /* СВЕТОВОЙ ИМПУЛЬС - ТА ЖЕ АНИМАЦИЯ, ЧТО У ЛЕВОЙ ЛИНИИ */

    body.home .vlw-centerline-signal{
        position:absolute !important;

        left:0 !important;
        top:-38% !important;

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

        background:
            linear-gradient(
                to bottom,
                transparent,
                #58C3D9,
                transparent
            ) !important;

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

        animation:
            vlwSignal
            5.2s
            ease-in-out
            infinite !important;
    }


    /* ТОЧКИ - КОПИЯ АКТИВНЫХ ТОЧЕК СЛЕВА */

    body.home .vlw-centerline b{
        position:absolute !important;

        left:50% !important;

        width:9px !important;
        height:9px !important;

        border:
            2px solid
            #58C3D9 !important;

        border-radius:50% !important;

        background:
            #58C3D9 !important;

        box-shadow:
            0 0 0 8px
            rgba(88,195,217,.075),
            0 0 24px
            rgba(88,195,217,.18) !important;

        transform:
            translate(-50%,-50%)
            scale(1.06) !important;
    }


    /* УБИРАЕМ МОЮ ПРЕДЫДУЩУЮ ВНУТРЕННЮЮ ТОЧКУ */

    body.home .vlw-centerline b::after{
        display:none !important;
        content:none !important;
    }

}


/* =========================================================
   WORKFLOW STORY - CLOSER COLUMNS
   ========================================================= */

@media(min-width:1025px){

    body.home .vlw-step{
        grid-template-columns:
            150px
            minmax(0,1fr) !important;

        column-gap:20px !important;
    }

}


/* =========================================================
   WORKFLOW STORY BOUNDARY
   левая колонка заканчивается ДО центральной линии
   ========================================================= */

@media(min-width:1025px){

    body.home .vlw-story{
        justify-self:start !important;
        box-sizing:border-box !important;
        min-width:0 !important;
    }

    body.home .vlw-step{
        width:100% !important;
        box-sizing:border-box !important;

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

        column-gap:20px !important;
    }

    body.home .vlw-step-copy{
        min-width:0 !important;
        width:100% !important;
    }

    body.home .vlw-step-copy h3,
    body.home .vlw-step-copy p{
        min-width:0 !important;
        max-width:100% !important;
    }

}


/* =========================================================
   WORKFLOW CTA FINAL
   same visual size as China Start, adapted to column parent
   ========================================================= */

@media(min-width:768px){

    body.home .vlw-cta{
        width:220px !important;
        min-width:220px !important;
        max-width:220px !important;

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

        flex:0 0 auto !important;
        align-self:flex-start !important;

        box-sizing:border-box !important;

        padding:0 50px 0 20px !important;

        border-radius:999px !important;

        background:#176B87 !important;

        color:#fff !important;

        font-size:10px !important;
        line-height:1 !important;
        font-weight:700 !important;

        box-shadow:
            0 8px 20px
            rgba(23,107,135,.15) !important;
    }

    body.home .vlw-cta i{
        width:36px !important;
        height:36px !important;

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

        border-radius:50% !important;

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

}

@media(hover:hover){

    body.home .vlw-cta:hover{
        transform:translateY(-2px) !important;
        background:#145F79 !important;

        box-shadow:
            0 12px 25px
            rgba(23,107,135,.20) !important;
    }

    body.home .vlw-cta:hover i{
        transform:
            translateY(-50%)
            rotate(9deg) !important;

        background:
            rgba(255,255,255,.17) !important;
    }

}


/* =========================================================
   WORKFLOW CTA = HERO PRIMARY BUTTON
   используем настоящий .vlh2-primary
   ========================================================= */

body.home .vlw-hero-cta{
    margin-top:28px !important;
    align-self:flex-start !important;
}

@media(min-width:768px){

    body.home .vlw-hero-cta{
        width:auto !important;
        min-width:237px !important;
        max-width:none !important;

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

        flex:none !important;
    }

}

@media(max-width:767px){

    body.home .vlw-hero-cta{
        margin-top:24px !important;
    }

}


/* =========================================================
   WORKFLOW
   orbit over stats + title descender fix
   ========================================================= */


/* ---------------------------------------------------------
   1. ОРБИТА С ДИОДОМ ПОВЕРХ ПЛАШКИ С ЦИФРАМИ
   --------------------------------------------------------- */

/*
 * Убираем stacking context с общего фонового контейнера.
 * Сам фон остаётся на месте, но отдельной орбите теперь
 * можно подняться выше stats-плашки.
 */

body.home #workflow-control > .vlw-bg{
    z-index:auto !important;
}


/*
 * Сетка и фоновые свечения остаются ПОД контентом.
 */

body.home #workflow-control .vlw-grid,
body.home #workflow-control .vlw-glow{
    z-index:0 !important;
}


/*
 * Верхний круг оставляем обычным фоновым элементом.
 */

body.home #workflow-control .vlw-orbit-a{
    z-index:1 !important;
}


/*
 * Нижний круг с движущимся диодом проходит
 * ПОВЕРХ тёмной плашки статистики.
 *
 * Его координаты, размер и существующую анимацию
 * не меняем вообще.
 */

body.home #workflow-control .vlw-orbit-b{
    z-index:9 !important;
}


/*
 * Сам диод также гарантированно выше линии круга.
 */

body.home #workflow-control .vlw-orbit-b::after{
    z-index:2 !important;
}


/* ---------------------------------------------------------
   2. НЕ ОБРЕЗАТЬ СЛОВО "получения"
   --------------------------------------------------------- */

body.home #workflow-control .vlw-intro h2{
    overflow:visible !important;
}


body.home #workflow-control .vlw-intro h2 span{
    line-height:.99 !important;

    padding-bottom:.12em !important;
    margin-bottom:-.12em !important;

    overflow:visible !important;
}


/* ---------------------------------------------------------
   MOBILE
   Нижняя орбита у нас штатно скрыта на мобильном,
   это поведение сохраняем.
   --------------------------------------------------------- */

@media(max-width:767px){

    body.home #workflow-control .vlw-orbit-b{
        display:none !important;
    }

}


/* =========================================================
   BOTH WORKFLOW ORBITS ABOVE CONTENT
   ========================================================= */

body.home #workflow-control .vlw-orbit-a,
body.home #workflow-control .vlw-orbit-b{
    z-index:9 !important;
}

body.home #workflow-control .vlw-orbit-a::after,
body.home #workflow-control .vlw-orbit-b::after{
    z-index:2 !important;
}