/* ============================================================
   MOTAVIO · PROCESS + REVIEWS V3

   Brand:
   #168FE6
   #071A2C
   #FFFFFF
   ============================================================ */


/* ============================================================
   SHARED
   ============================================================ */

.mv-process-v3,
.mv-reviews-v3,
.mv-hero-proof-v3 {

    --blue:#168FE6;
    --blue-dark:#0D78CE;
    --dark:#071A2C;
    --text:#536A7E;
    --muted:#788B9B;
    --line:#D8E5EF;
    --soft:#F3F9FD;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing:antialiased;

}


/* ============================================================
   HERO SOCIAL PROOF
   ============================================================ */

.mv-hero-proof-v3 {

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:8px 11px;

    margin-top:17px;

    padding-top:13px;

    border-top:
        1px solid
        rgba(22,143,230,.14);

}


.mv-hero-proof-v3__stars {

    display:inline-flex;

    color:#168FE6;

    font-size:17px;

    line-height:1;

    letter-spacing:.04em;

}


.mv-hero-proof-v3 strong {

    color:#071A2C;

    font-size:11px;

    line-height:1.25;

    font-weight:850;

}


.mv-hero-proof-v3__divider {

    width:1px;

    height:17px;

    background:#D8E5EF;

}


.mv-hero-proof-v3 small {

    color:#647A8C;

    font-size:9.5px;

    line-height:1.25;

}


/* ============================================================
   PROCESS
   ============================================================ */

.mv-process-v3 {

    position:relative;

    overflow:hidden;

    padding:64px 0 70px;

    border-top:
        1px solid
        rgba(216,229,239,.75);

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(22,143,230,.10),
            transparent 33rem
        ),
        linear-gradient(
            180deg,
            #F8FCFF,
            #EEF7FD
        );

}


.mv-process-v3 * {

    box-sizing:border-box;

}


.mv-process-v3__shell {

    width:min(
        1180px,
        calc(100% - 44px)
    );

    margin:0 auto;

}


/* ============================================================
   PROCESS HEAD
   ============================================================ */

.mv-process-v3__head {

    max-width:780px;

    margin:0 auto 44px;

    text-align:center;

}


.mv-process-v3__eyebrow {

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-bottom:11px;

    color:#168FE6;

    font-size:10.5px;

    line-height:1;

    font-weight:850;

    letter-spacing:.09em;

    text-transform:uppercase;

}


.mv-process-v3__eyebrow::before {

    content:"";

    width:7px;

    height:7px;

    border-radius:50%;

    background:#168FE6;

    box-shadow:
        0 0 0 5px
        rgba(22,143,230,.10);

}


.mv-process-v3__head h2 {

    margin:0;

    color:#071A2C;

    font-size:clamp(
        40px,
        3.45vw,
        52px
    );

    line-height:1;

    font-weight:850;

    letter-spacing:-.047em;

}


.mv-process-v3__head h2 span {

    color:#168FE6;

}


.mv-process-v3__head p {

    max-width:650px;

    margin:14px auto 0;

    color:#536A7E;

    font-size:13.5px;

    line-height:1.55;

}


/* ============================================================
   ROUTE
   ============================================================ */

.mv-process-v3__route {

    position:relative;

    display:grid;

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

    gap:20px;

}


/* Verbindungslinie */

.mv-process-v3__route::before {

    content:"";

    position:absolute;

    z-index:0;

    top:44px;

    left:10%;

    right:10%;

    height:2px;

    background:
        linear-gradient(
            90deg,
            rgba(22,143,230,.12),
            #168FE6 23%,
            #168FE6 77%,
            rgba(22,143,230,.12)
        );

}


/* ============================================================
   STEP
   ============================================================ */

.mv-process-v3__step {

    position:relative;

    z-index:2;

    min-width:0;

    text-align:center;

}


/* NODE */

.mv-process-v3__node {

    position:relative;

    width:88px;

    height:88px;

    display:grid;

    place-items:center;

    margin:0 auto 18px;

    border:
        1px solid
        #CFE2F0;

    border-radius:25px;

    background:#FFFFFF;

    box-shadow:
        0 12px 30px
        rgba(7,26,44,.075);

}


.mv-process-v3__node::after {

    content:attr(data-step);

    position:absolute;

    top:-8px;

    right:-8px;

    width:29px;

    height:29px;

    display:grid;

    place-items:center;

    border:
        4px solid
        #EEF7FD;

    border-radius:50%;

    color:#FFFFFF;

    background:#168FE6;

    font-size:9px;

    font-weight:900;

}


.mv-process-v3__node svg {

    width:35px;

    height:35px;

    fill:none;

    stroke:#168FE6;

    stroke-width:1.8;

    stroke-linecap:round;

    stroke-linejoin:round;

}


/* STEP COPY */

.mv-process-v3__step h3 {

    margin:0 0 7px;

    color:#071A2C;

    font-size:18px;

    line-height:1.12;

    font-weight:850;

    letter-spacing:-.025em;

}


.mv-process-v3__step p {

    max-width:240px;

    margin:0 auto;

    color:#536A7E;

    font-size:11.5px;

    line-height:1.48;

}


/* META */

.mv-process-v3__meta {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:5px;

    margin-top:11px;

    padding:6px 9px;

    border:
        1px solid
        rgba(22,143,230,.16);

    border-radius:999px;

    color:#0D78CE;

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

    font-size:7.5px;

    line-height:1;

    font-weight:800;

}


.mv-process-v3__meta i {

    width:5px;

    height:5px;

    border-radius:50%;

    background:#168FE6;

}


/* ============================================================
   PROCESS CTA
   ============================================================ */

.mv-process-v3__bottom {

    display:flex;

    flex-direction:column;

    align-items:center;

    margin-top:37px;

    text-align:center;

}


.mv-process-v3__bottom p {

    margin:0 0 13px;

    color:#536A7E;

    font-size:11px;

}


.mv-process-v3__cta {

    min-height:45px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:0 19px;

    border-radius:10px;

    color:#FFFFFF;

    background:
        linear-gradient(
            135deg,
            #168FE6,
            #0D78CE
        );

    box-shadow:
        0 10px 25px
        rgba(22,143,230,.22);

    text-decoration:none;

    font-size:12px;

    font-weight:850;

    transition:
        transform .16s ease,
        box-shadow .16s ease;

}


.mv-process-v3__cta:hover {

    transform:translateY(-2px);

    box-shadow:
        0 14px 31px
        rgba(22,143,230,.29);

}


/* ============================================================
   REVIEWS
   ============================================================ */

.mv-reviews-v3 {

    position:relative;

    padding:58px 0 64px;

    border-top:
        1px solid
        #E0EBF2;

    background:#FFFFFF;

}


.mv-reviews-v3 * {

    box-sizing:border-box;

}


.mv-reviews-v3__shell {

    width:min(
        1180px,
        calc(100% - 44px)
    );

    margin:0 auto;

}


/* ============================================================
   REVIEWS HEADER
   ============================================================ */

.mv-reviews-v3__head {

    display:grid;

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

    align-items:end;

    gap:30px;

    margin-bottom:24px;

}


.mv-reviews-v3__eyebrow {

    display:block;

    margin-bottom:9px;

    color:#168FE6;

    font-size:10.5px;

    line-height:1;

    font-weight:850;

    letter-spacing:.09em;

    text-transform:uppercase;

}


.mv-reviews-v3__head h2 {

    max-width:700px;

    margin:0;

    color:#071A2C;

    font-size:clamp(
        37px,
        3vw,
        46px
    );

    line-height:1;

    font-weight:850;

    letter-spacing:-.045em;

}


.mv-reviews-v3__head h2 span {

    color:#168FE6;

}


/* ============================================================
   SUMMARY
   ============================================================ */

.mv-reviews-v3__summary {

    min-width:240px;

    padding:13px 15px;

    border:
        1px solid
        #D8E5EF;

    border-radius:13px;

    background:#F8FCFF;

    text-align:right;

}


.mv-reviews-v3__summary-stars {

    display:block;

    margin-bottom:4px;

    color:#168FE6;

    font-size:19px;

    line-height:1;

    letter-spacing:.04em;

}


.mv-reviews-v3__summary strong {

    display:block;

    color:#071A2C;

    font-size:11px;

    font-weight:850;

}


.mv-reviews-v3__summary small {

    display:block;

    margin-top:3px;

    color:#788B9B;

    font-size:7.5px;

}


/* ============================================================
   TRACK
   ============================================================ */

.mv-reviews-v3__stage {

    position:relative;

}


.mv-reviews-v3__track {

    display:flex;

    gap:14px;

    overflow-x:auto;

    padding:3px 2px 12px;

    scroll-behavior:smooth;

    scroll-snap-type:x mandatory;

    scrollbar-width:none;

}


.mv-reviews-v3__track::-webkit-scrollbar {

    display:none;

}


/* ============================================================
   REVIEW CARD
   ============================================================ */

.mv-reviews-v3__card {

    flex:
        0 0
        calc(
            (100% - 42px) / 4
        );

    min-width:0;

    min-height:190px;

    display:flex;

    flex-direction:column;

    padding:19px 18px 17px;

    scroll-snap-align:start;

    border:
        1px solid
        #D8E5EF;

    border-radius:16px;

    background:#FFFFFF;

    box-shadow:
        0 11px 30px
        rgba(7,26,44,.05);

}


.mv-reviews-v3__stars {

    display:block;

    margin-bottom:13px;

    color:#168FE6;

    font-size:15px;

    line-height:1;

    letter-spacing:.025em;

}


.mv-reviews-v3__card blockquote {

    margin:0;

    color:#314B60;

    font-size:12px;

    line-height:1.5;

    font-weight:500;

}


.mv-reviews-v3__card footer {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:9px;

    margin-top:auto;

    padding-top:16px;

}


.mv-reviews-v3__card footer strong {

    color:#071A2C;

    font-size:9px;

    font-weight:850;

}


.mv-reviews-v3__card footer span {

    padding:4px 6px;

    border-radius:999px;

    color:#0D78CE;

    background:#EAF6FE;

    font-size:6px;

    line-height:1;

    font-weight:850;

    letter-spacing:.04em;

    text-transform:uppercase;

}


/* ============================================================
   ARROWS
   ============================================================ */

.mv-reviews-v3__arrow {

    position:absolute;

    z-index:5;

    top:50%;

    width:37px;

    height:37px;

    display:grid;

    place-items:center;

    transform:translateY(-50%);

    border:
        1px solid
        #D8E5EF;

    border-radius:50%;

    color:#168FE6;

    background:#FFFFFF;

    box-shadow:
        0 8px 22px
        rgba(7,26,44,.09);

    font-size:19px;

    cursor:pointer;

}


.mv-reviews-v3__arrow--prev {

    left:-49px;

}


.mv-reviews-v3__arrow--next {

    right:-49px;

}


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

.mv-reviews-v3__bottom {

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:8px 17px;

    margin-top:15px;

    color:#687D8E;

    font-size:8.5px;

}


.mv-reviews-v3__bottom span {

    display:inline-flex;

    align-items:center;

    gap:5px;

}


.mv-reviews-v3__bottom i {

    color:#168FE6;

    font-style:normal;

    font-weight:900;

}


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

@media(max-width:1000px) {

    .mv-process-v3__route {

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

        row-gap:38px;

    }


    .mv-process-v3__route::before {

        display:none;

    }


    .mv-reviews-v3__arrow {

        display:none;

    }


    .mv-reviews-v3__card {

        flex-basis:
            calc(
                (100% - 14px) / 2
            );

    }

}


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

@media(max-width:650px) {

    .mv-process-v3,
    .mv-reviews-v3 {

        padding:49px 0 54px;

    }


    .mv-process-v3__shell,
    .mv-reviews-v3__shell {

        width:
            calc(
                100% - 28px
            );

    }


    .mv-process-v3__head h2,
    .mv-reviews-v3__head h2 {

        font-size:33px;

    }


    .mv-process-v3__route {

        grid-template-columns:1fr;

        gap:27px;

    }


    .mv-process-v3__step {

        display:grid;

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

        column-gap:15px;

        align-items:center;

        text-align:left;

    }


    .mv-process-v3__node {

        width:68px;

        height:68px;

        grid-row:1 / 4;

        margin:0;

        border-radius:19px;

    }


    .mv-process-v3__node svg {

        width:28px;

        height:28px;

    }


    .mv-process-v3__step p {

        max-width:none;

        margin:0;

    }


    .mv-process-v3__meta {

        justify-self:start;

    }


    .mv-reviews-v3__head {

        grid-template-columns:1fr;

        gap:16px;

    }


    .mv-reviews-v3__summary {

        min-width:0;

        text-align:left;

    }


    .mv-reviews-v3__card {

        flex-basis:86%;

    }


    .mv-hero-proof-v3__divider {

        display:none;

    }


    .mv-hero-proof-v3 small {

        flex-basis:100%;

    }

}