/* =========================================================
   FINAL LEAD
   LIGHT SECTION + DARK ORIGINAL FORM
   ========================================================= */

body.home .vlf{
    --vlf-cyan:#58C3D9;
    --vlf-blue:#176B87;
    --vlf-dark:#081C26;

    position:relative;
    z-index:4;
    overflow:hidden;
    isolation:isolate;

    padding:82px 0 88px;

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

    background:
        radial-gradient(
            circle at 14% 22%,
            rgba(88,195,217,.075),
            transparent 27%
        ),
        radial-gradient(
            circle at 87% 78%,
            rgba(23,107,135,.055),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #F4F7F8 0%,
            #F8FAFA 48%,
            #F1F5F6 100%
        );
}


/* BACKGROUND */

body.home .vlf-bg{
    position:absolute;
    inset:0;
    pointer-events:none;
}

body.home .vlf-grid{
    position:absolute;
    inset:0;

    opacity:.24;

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

    background-size:72px 72px;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 20%,
            #000 82%,
            transparent
        );

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

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

body.home .vlf-glow-a{
    width:430px;
    height:430px;
    left:-230px;
    top:5%;

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

    animation:
        vlfGlowA 12s ease-in-out infinite alternate;
}

body.home .vlf-glow-b{
    width:390px;
    height:390px;
    right:-190px;
    bottom:-120px;

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

    animation:
        vlfGlowB 14s ease-in-out infinite alternate;
}


/* SHELL */

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

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

    margin:0 auto;
}


/* HEADING */

body.home .vlf-heading{
    width:min(900px,100%);

    margin:0 auto 38px;

    text-align:center;

    opacity:0;
    transform:translateY(20px);

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

body.home .vlf.is-visible .vlf-heading{
    opacity:1;
    transform:none;
}

body.home .vlf-kicker{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:9px;

    margin-bottom:16px;

    color:#748991;

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

    font-weight:750;
    letter-spacing:.18em;
}

body.home .vlf-kicker i{
    width:6px;
    height:6px;

    border-radius:50%;

    background:var(--vlf-cyan);

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

body.home .vlf-heading h2{
    margin:0 !important;

    color:#142A34 !important;

    font-size:
        clamp(39px,4vw,62px) !important;

    line-height:.98 !important;

    font-weight:760 !important;

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

body.home .vlf-heading 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;

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

body.home .vlf-heading p{
    width:min(650px,100%);

    margin:17px auto 0 !important;

    color:#809097 !important;

    font-size:11px !important;
    line-height:1.68 !important;
}


/* =========================================================
   DARK FORM PANEL
   ========================================================= */

body.home .vlf-form{
    position:relative;

    display:grid;

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

    gap:34px;

    align-items:stretch;

    padding:24px;

    border:
        1px solid
        rgba(116,210,225,.12);

    border-radius:32px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 88% 16%,
            rgba(88,195,217,.13),
            transparent 22%
        ),
        radial-gradient(
            circle at 8% 100%,
            rgba(23,107,135,.17),
            transparent 30%
        ),
        linear-gradient(
            115deg,
            #071923 0%,
            #0A2531 48%,
            #0D3444 100%
        );

    box-shadow:
        0 30px 70px rgba(9,33,43,.16),
        0 10px 25px rgba(9,33,43,.09),
        inset 0 1px 0 rgba(255,255,255,.06);

    opacity:0;

    transform:
        translateY(28px)
        scale(.985);

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

body.home .vlf.is-visible .vlf-form{
    opacity:1;
    transform:none;
}


/* soft sweep */

body.home .vlf-form::before{
    content:"";

    position:absolute;

    top:-120px;
    left:-170px;

    width:120px;
    height:300px;

    transform:rotate(26deg);

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

    animation:
        vlfFormSweep 8s ease-in-out infinite;

    pointer-events:none;
}


/* =========================================================
   LEFT INTRO INSIDE FORM
   ========================================================= */

body.home .vlf-form-intro{
    position:relative;
    z-index:2;

    min-height:190px;

    padding:
        25px 24px 24px;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    overflow:hidden;

    border:
        1px solid
        rgba(173,225,234,.09);

    border-radius:23px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.012)
        );
}

body.home .vlf-form-intro::after{
    content:"";

    position:absolute;

    width:180px;
    height:180px;

    left:-80px;
    top:-95px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(88,195,217,.14),
            transparent 68%
        );

    pointer-events:none;
}

body.home .vlf-form-signal{
    position:absolute;

    left:24px;
    top:23px;

    width:42px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--vlf-cyan),
            rgba(88,195,217,.08)
        );
}

body.home .vlf-form-signal::after{
    content:"";

    position:absolute;

    right:0;
    top:50%;

    width:5px;
    height:5px;

    transform:translateY(-50%);

    border-radius:50%;

    background:var(--vlf-cyan);

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

body.home .vlf-form-intro small{
    margin-bottom:9px;

    color:rgba(157,211,222,.48);

    font-size:8px;

    font-weight:700;

    letter-spacing:.16em;
}

body.home .vlf-form-intro strong{
    max-width:190px;

    color:#F0F7F9;

    font-size:19px;

    line-height:1.18;

    font-weight:650;

    letter-spacing:-.035em;
}

body.home .vlf-form-intro p{
    max-width:195px;

    margin:12px 0 0 !important;

    color:rgba(211,229,233,.50) !important;

    font-size:9px !important;

    line-height:1.55 !important;
}


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

body.home .vlf-fields{
    position:relative;
    z-index:2;

    display:grid;

    grid-template-columns:
        1.3fr .72fr 1fr;

    gap:10px;

    align-content:center;
}

body.home .vlf-field{
    position:relative;

    min-width:0;
    height:62px;

    display:flex;
    align-items:center;

    padding:0 19px;

    overflow:hidden;

    border:
        1px solid
        rgba(193,229,235,.09);

    border-radius:18px;

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

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

body.home .vlf-field:hover{
    background:
        rgba(255,255,255,.038);

    border-color:
        rgba(162,221,232,.15);
}

body.home .vlf-field:focus-within{
    transform:translateY(-2px);

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

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

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

body.home .vlf-field > span{
    position:absolute;

    left:19px;
    top:50%;

    transform:translateY(-50%);

    color:
        rgba(216,232,236,.44);

    font-size:9px;

    font-weight:570;

    pointer-events:none;

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

body.home .vlf-field.has-value > span,
body.home .vlf-field:focus-within > span{
    opacity:0;

    transform:
        translateY(-50%)
        translateX(6px);
}

body.home .vlf-field input{
    width:100%;
    height:100%;

    padding:0;

    border:0 !important;

    outline:0 !important;

    background:transparent !important;

    box-shadow:none !important;

    color:#F2F9FA !important;

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

    font-size:10px;

    font-weight:540;
}


/* special positions */

body.home .vlf-field-product{
    grid-column:1 / 3;
}

body.home .vlf-field-quantity{
    grid-column:3;
}

body.home .vlf-field-task{
    grid-column:1;
}

body.home .vlf-field-name{
    grid-column:2;
}

body.home .vlf-field-phone{
    grid-column:3;
}


/* =========================================================
   BUTTON
   ========================================================= */

body.home .vlf-submit{
    grid-column:1 / 4;

    position:relative;

    height:58px;

    margin-top:2px;

    padding:0 8px 0 23px;

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

    overflow:hidden;

    border:0;

    border-radius:18px;

    cursor:pointer;

    color:#fff;

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

    box-shadow:
        0 15px 32px rgba(23,107,135,.24),
        inset 0 1px rgba(255,255,255,.13);

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

    font-size:10px;

    font-weight:700;

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        opacity .28s ease;
}

body.home .vlf-submit::before{
    content:"";

    position:absolute;

    top:-95%;
    left:-30%;

    width:80px;
    height:190px;

    transform:rotate(27deg);

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

    animation:
        vlfButtonSweep 4.8s ease-in-out infinite;
}

body.home .vlf-submit span{
    position:relative;
    z-index:2;
}

body.home .vlf-submit i{
    position:relative;
    z-index:2;

    width:43px;
    height:43px;

    margin-left:auto;

    display:grid;
    place-items:center;

    border-radius:14px;

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

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

body.home .vlf-submit svg{
    width:17px;
    height:17px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.7;

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

body.home .vlf-submit:hover{
    transform:translateY(-2px);

    box-shadow:
        0 19px 40px rgba(23,107,135,.32),
        inset 0 1px rgba(255,255,255,.14);
}

body.home .vlf-submit:hover i{
    transform:
        translateX(3px)
        rotate(-4deg);

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


/* =========================================================
   STATUS
   ========================================================= */

body.home .vlf-status{
    position:absolute;

    left:50%;
    bottom:-32px;

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

    width:max-content;
    max-width:90%;

    color:#667B84;

    font-size:9px;

    opacity:0;

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

body.home .vlf-status.is-visible{
    opacity:1;

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

body.home .vlf-status.is-success{
    color:#176B87;
}

body.home .vlf-status.is-error{
    color:#B55757;
}


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

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

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

@keyframes vlfGlowA{
    from{
        transform:translate3d(0,0,0);
    }

    to{
        transform:translate3d(28px,21px,0);
    }
}

@keyframes vlfGlowB{
    from{
        transform:translate3d(0,0,0);
    }

    to{
        transform:translate3d(-28px,-20px,0);
    }
}

@keyframes vlfFormSweep{
    0%,70%{
        left:-170px;
        opacity:0;
    }

    77%{
        opacity:1;
    }

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

@keyframes vlfButtonSweep{
    0%,63%{
        left:-30%;
    }

    100%{
        left:135%;
    }
}


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

@media(max-width:1000px){

    body.home .vlf-form{
        grid-template-columns:1fr;

        gap:18px;
    }

    body.home .vlf-form-intro{
        min-height:150px;
    }

}


@media(max-width:720px){

    body.home .vlf{
        padding:58px 0 68px;
    }

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

    body.home .vlf-heading{
        margin-bottom:29px;
    }

    body.home .vlf-heading h2{
        font-size:
            clamp(35px,10vw,47px) !important;
    }

    body.home .vlf-form{
        padding:12px;

        border-radius:26px;
    }

    body.home .vlf-form-intro{
        min-height:140px;

        border-radius:20px;
    }

    body.home .vlf-fields{
        grid-template-columns:1fr;
    }

    body.home .vlf-field,
    body.home .vlf-submit{
        grid-column:1 !important;

        height:56px;
    }

    body.home .vlf-field{
        border-radius:16px;
    }

    body.home .vlf-submit{
        border-radius:16px;
    }

}


/* reduced motion */

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

    body.home .vlf *,
    body.home .vlf *::before,
    body.home .vlf *::after{
        animation:none !important;
        transition:none !important;
    }

    body.home .vlf-heading,
    body.home .vlf-form{
        opacity:1 !important;
        transform:none !important;
    }

}