
/* =========================================================
   WHY TRUST US
   REAL COMPANY STORY
   ========================================================= */


body.home .vlt{

    --vlt-accent:#176B87;
    --vlt-cyan:#58C3D9;
    --vlt-ink:#132832;
    --vlt-muted:#71828A;

    position:relative;

    overflow:hidden;

    padding:
        104px 0 108px;

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

    background:
        linear-gradient(
            180deg,
            #F3F6F7 0%,
            #F8FAFA 15%,
            #FFFFFF 44%,
            #F8FAFA 100%
        );
}


/* ---------------------------------------------------------
   AMBIENT BACKGROUND
   --------------------------------------------------------- */

body.home .vlt-ambient{
    position:absolute;

    inset:0;

    pointer-events:none;
}


body.home .vlt-light{
    position:absolute;

    border-radius:50%;

    filter:
        blur(85px);

    opacity:.7;
}


body.home .vlt-light-a{

    width:500px;
    height:500px;

    left:-260px;
    top:18%;

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

    animation:
        vltLightA
        13s
        ease-in-out
        infinite
        alternate;
}


body.home .vlt-light-b{

    width:460px;
    height:460px;

    right:-260px;
    bottom:2%;

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

    animation:
        vltLightB
        15s
        ease-in-out
        infinite
        alternate;
}


/* ---------------------------------------------------------
   SHELL
   --------------------------------------------------------- */

body.home .vlt-shell{

    position:relative;

    z-index:2;

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

    margin:
        0 auto;
}


body.home .vlt-layout{

    display:grid;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(420px,.95fr);

    gap:
        clamp(
            70px,
            7vw,
            125px
        );

    align-items:center;
}


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

body.home .vlt-photo-wrap{

    position:relative;

    min-width:0;

    opacity:0;

    transform:
        translate3d(
            -34px,
            18px,
            0
        );

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


body.home .vlt.is-visible .vlt-photo-wrap{

    opacity:1;

    transform:none;
}


body.home .vlt-photo-reveal{

    position:relative;

    height:
        clamp(
            610px,
            47vw,
            735px
        );

    overflow:hidden;

    border-radius:
        32px;

    background:#DDE5E7;

    box-shadow:
        0 35px 80px
        rgba(15,45,56,.15),
        0 10px 27px
        rgba(15,45,56,.08);

    clip-path:
        inset(
            0 100% 0 0
            round 32px
        );

    transition:
        clip-path
        1.25s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );
}


body.home .vlt.is-visible .vlt-photo-reveal{

    clip-path:
        inset(
            0 0 0 0
            round 32px
        );
}


body.home .vlt-photo{

    position:absolute;

    left:-3%;
    top:-3%;

    width:106%;
    height:106%;

    object-fit:cover;

    object-position:
        50% 44%;

    transform:
        translate3d(
            0,
            var(--vlt-photo-y,0px),
            0
        )
        scale(1.025);

    transition:
        transform .18s linear;

    will-change:transform;
}


body.home .vlt-photo-shade{

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        linear-gradient(
            90deg,
            rgba(5,18,25,.10) 0%,
            transparent 28%,
            transparent 72%,
            rgba(5,18,25,.08) 100%
        ),

        linear-gradient(
            180deg,
            transparent 55%,
            rgba(7,23,31,.15) 100%
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.22);
}


/* =========================================================
   TEXT
   ========================================================= */

body.home .vlt-content{

    position:relative;

    min-width:0;
}


/* kicker */

body.home .vlt-kicker{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:22px;

    color:#748991;

    font-size:8px;

    line-height:1;

    font-weight:760;

    letter-spacing:.18em;

    opacity:0;

    transform:
        translateY(14px);

    transition:
        opacity .62s ease .12s,
        transform .8s
        cubic-bezier(.16,1,.3,1)
        .12s;
}


body.home .vlt.is-visible .vlt-kicker{

    opacity:1;

    transform:none;
}


body.home .vlt-kicker i{

    width:6px;
    height:6px;

    flex:
        0 0 6px;

    border-radius:50%;

    background:
        var(--vlt-cyan);

    box-shadow:
        0 0 0 5px
        rgba(88,195,217,.09),
        0 0 17px
        rgba(88,195,217,.30);
}


/* title */

body.home .vlt-content h2{

    margin:0 !important;

    color:
        var(--vlt-ink) !important;

    font-size:
        clamp(
            47px,
            4.6vw,
            72px
        ) !important;

    line-height:
        .98 !important;

    font-weight:
        760 !important;

    letter-spacing:
        -.057em !important;

    opacity:0;

    transform:
        translateY(20px);

    transition:
        opacity .7s ease .20s,
        transform .95s
        cubic-bezier(.16,1,.3,1)
        .20s;
}


body.home .vlt.is-visible .vlt-content h2{

    opacity:1;

    transform:none;
}


body.home .vlt-content h2 span{

    display:block;

    padding-bottom:.08em;

    margin-bottom:-.08em;

    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;

    color:#58C3D9;

    animation:
        vltTitleFlow
        8s
        ease-in-out
        infinite;
}


body.home .vlt-content h2 strong{

    display:block;

    margin-top:4px;

    color:
        var(--vlt-ink);

    font:inherit;

    font-weight:inherit;
}


/* text */

body.home .vlt-text{

    width:
        min(
            590px,
            100%
        );

    margin-top:
        34px;
}


body.home .vlt-text p{

    margin:
        0 0 20px !important;

    color:#667A83 !important;

    font-size:
        12px !important;

    line-height:
        1.78 !important;

    font-weight:
        450 !important;

    opacity:0;

    transform:
        translateY(17px);

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


body.home .vlt-text p:nth-child(1){
    transition-delay:.34s;
}


body.home .vlt-text p:nth-child(2){
    transition-delay:.45s;
}


body.home .vlt-text p:nth-child(3){
    transition-delay:.56s;
}


body.home .vlt.is-visible .vlt-text p{

    opacity:1;

    transform:none;
}


/* message */

body.home .vlt-message{

    position:relative;

    width:
        min(
            590px,
            100%
        );

    margin-top:34px;

    padding:
        23px 0 4px 27px;

    border-top:
        1px solid
        rgba(23,107,135,.15);

    opacity:0;

    transform:
        translateY(16px);

    transition:
        opacity .65s ease .69s,
        transform .9s
        cubic-bezier(.16,1,.3,1)
        .69s;
}


body.home .vlt.is-visible .vlt-message{

    opacity:1;

    transform:none;
}


body.home .vlt-message-line{

    position:absolute;

    left:0;
    top:25px;

    width:2px;
    height:calc(100% - 25px);

    min-height:42px;

    border-radius:3px;

    background:
        linear-gradient(
            180deg,
            #58C3D9,
            rgba(88,195,217,.08)
        );
}


body.home .vlt-message p{

    margin:0 !important;

    color:#243A44 !important;

    font-size:
        clamp(
            17px,
            1.45vw,
            21px
        ) !important;

    line-height:
        1.45 !important;

    font-weight:
        650 !important;

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


/* footnote */

body.home .vlt-footnote{

    width:
        min(
            530px,
            100%
        );

    margin-top:20px;

    color:#87979D;

    font-size:10px;

    line-height:1.65;

    font-weight:500;

    opacity:0;

    transform:
        translateY(12px);

    transition:
        opacity .60s ease .80s,
        transform .8s
        cubic-bezier(.16,1,.3,1)
        .80s;
}


body.home .vlt.is-visible .vlt-footnote{

    opacity:1;

    transform:none;
}


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

@keyframes vltTitleFlow{

    0%,
    18%{
        background-position:
            105% 0;
    }

    48%,
    100%{
        background-position:
            -120% 0;
    }

}


@keyframes vltLightA{

    from{
        transform:
            translate3d(0,0,0);
    }

    to{
        transform:
            translate3d(30px,25px,0);
    }

}


@keyframes vltLightB{

    from{
        transform:
            translate3d(0,0,0);
    }

    to{
        transform:
            translate3d(-30px,-22px,0);
    }

}


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

@media(max-width:1024px){

    body.home .vlt{

        padding:
            78px 0 82px;
    }


    body.home .vlt-layout{

        grid-template-columns:
            1fr;

        gap:56px;
    }


    body.home .vlt-photo-wrap{

        width:
            min(
                800px,
                100%
            );

        margin:
            0 auto;
    }


    body.home .vlt-photo-reveal{

        height:
            clamp(
                560px,
                85vw,
                780px
            );
    }


    body.home .vlt-content{

        width:
            min(
                800px,
                100%
            );

        margin:
            0 auto;
    }

}


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

@media(max-width:767px){

    body.home .vlt{

        padding:
            58px 0 62px;
    }


    body.home .vlt-shell{

        width:
            calc(100% - 28px);
    }


    body.home .vlt-layout{

        gap:40px;
    }


    body.home .vlt-photo-reveal{

        height:
            520px;

        border-radius:
            24px;

        clip-path:
            inset(
                0 100% 0 0
                round 24px
            );
    }


    body.home .vlt.is-visible .vlt-photo-reveal{

        clip-path:
            inset(
                0 0 0 0
                round 24px
            );
    }


    body.home .vlt-photo{

        object-position:
            50% 45%;
    }


    body.home .vlt-content h2{

        font-size:
            clamp(
                36px,
                10.6vw,
                49px
            ) !important;

        line-height:
            1 !important;
    }


    body.home .vlt-text{

        margin-top:
            27px;
    }


    body.home .vlt-text p{

        margin-bottom:
            17px !important;

        font-size:
            11px !important;

        line-height:
            1.68 !important;
    }


    body.home .vlt-message{

        margin-top:
            27px;

        padding-left:
            21px;
    }


    body.home .vlt-message p{

        font-size:
            17px !important;
    }

}


/* REDUCED MOTION */

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

    body.home .vlt-light,
    body.home .vlt-content h2 span{

        animation:
            none !important;
    }


    body.home .vlt-photo-wrap,
    body.home .vlt-photo-reveal,
    body.home .vlt-kicker,
    body.home .vlt-content h2,
    body.home .vlt-text p,
    body.home .vlt-message,
    body.home .vlt-footnote{

        opacity:
            1 !important;

        transform:
            none !important;

        transition:
            none !important;
    }


    body.home .vlt-photo-reveal{

        clip-path:
            none !important;
    }

}


/* =========================================================
   TRUST PHOTO - REAL 3D DEPTH FIX
   ========================================================= */

body.home .vlt-photo-wrap{
    position:relative !important;
    perspective:1400px !important;
    overflow:visible !important;
    isolation:isolate !important;
}


/* ЗАДНЯЯ ПЛАШКА */

body.home .vlt-photo-wrap::before{
    content:"" !important;

    position:absolute !important;

    left:34px !important;
    right:-26px !important;
    top:30px !important;
    bottom:-28px !important;

    z-index:0 !important;

    border-radius:34px !important;

    background:
        linear-gradient(
            145deg,
            rgba(23,107,135,.24) 0%,
            rgba(88,195,217,.13) 38%,
            rgba(14,45,58,.20) 100%
        ) !important;

    box-shadow:
        28px 34px 70px rgba(10,31,40,.18),
        10px 16px 30px rgba(10,31,40,.10),
        inset 0 1px 0 rgba(255,255,255,.18) !important;

    transform:
        rotate(-1.5deg)
        translate3d(0,0,0) !important;

    pointer-events:none !important;
}


/* БОЛЬШАЯ МЯГКАЯ ТЕНЬ ПОД ФОТО */

body.home .vlt-photo-wrap::after{
    content:"" !important;

    position:absolute !important;

    left:11% !important;
    right:-2% !important;
    bottom:-46px !important;

    height:90px !important;

    z-index:-1 !important;

    border-radius:50% !important;

    background:
        radial-gradient(
            ellipse at center,
            rgba(10,31,40,.34) 0%,
            rgba(10,31,40,.22) 34%,
            rgba(10,31,40,.10) 56%,
            rgba(10,31,40,0) 78%
        ) !important;

    filter:blur(18px) !important;

    transform:
        translateX(24px)
        scaleX(.92) !important;

    pointer-events:none !important;
}


/* САМА ФОТОГРАФИЯ */

body.home .vlt-photo-reveal{
    position:relative !important;

    z-index:2 !important;

    transform-origin:
        50% 50% !important;

    transform:
        rotateY(-11deg)
        rotateX(2.5deg)
        rotateZ(-.3deg)
        translate3d(0,-3px,30px) !important;

    box-shadow:
        0 34px 65px rgba(10,31,40,.20),
        18px 22px 42px rgba(10,31,40,.14) !important;

    transition:
        clip-path 1.25s cubic-bezier(.16,1,.3,1),
        transform .55s cubic-bezier(.16,1,.3,1),
        box-shadow .55s ease !important;
}


/* ПРИ НАВЕДЕНИИ НЕМНОГО РАСПРЯМЛЯЕТСЯ */

body.home .vlt-photo-wrap:hover .vlt-photo-reveal{
    transform:
        rotateY(-6deg)
        rotateX(1deg)
        rotateZ(0deg)
        translate3d(0,-8px,38px) !important;

    box-shadow:
        0 45px 90px rgba(10,31,40,.22),
        22px 28px 52px rgba(10,31,40,.16) !important;
}


/* TABLET */

@media(max-width:1024px){

    body.home .vlt-photo-wrap::before{
        left:18px !important;
        right:-14px !important;
        top:18px !important;
        bottom:-16px !important;
    }

    body.home .vlt-photo-wrap::after{
        bottom:-30px !important;
        height:65px !important;
    }

    body.home .vlt-photo-reveal{
        transform:
            rotateY(-5deg)
            rotateX(1deg)
            translate3d(0,0,18px) !important;
    }

}


/* MOBILE */

@media(max-width:767px){

    body.home .vlt-photo-wrap::before{
        left:12px !important;
        right:-9px !important;
        top:12px !important;
        bottom:-10px !important;

        border-radius:25px !important;
    }

    body.home .vlt-photo-wrap::after{
        bottom:-21px !important;
        height:48px !important;
    }

    body.home .vlt-photo-reveal{
        transform:
            rotateY(-3deg)
            translate3d(0,0,10px) !important;
    }

}


/* =========================================================
   TRUST PHOTO - FIX IMAGE POSITION
   ========================================================= */

body.home .vlt-photo{
    position:absolute !important;

    inset:0 !important;

    left:0 !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;

    width:100% !important;
    height:100% !important;

    max-width:none !important;

    object-fit:cover !important;
    object-position:50% 44% !important;

    transform:
        translate3d(
            0,
            var(--vlt-photo-y,0px),
            0
        )
        scale(1.055) !important;

    transform-origin:center center !important;
}

