/* ================================================================
   MACROFINET HOMEPAGE
   Homepage-only visual system.
   All selectors are scoped under .mf-home / .mf-home-page.
   Existing site CSS is intentionally not edited by this file.
================================================================ */

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

.mf-home {
    --mf-navy: #07162f;
    --mf-navy-2: #0b2145;
    --mf-blue: #1749a1;
    --mf-cyan: #3d6fc0;
    --mf-orange: #fd7e14;
    --mf-ink: #0a1830;
    --mf-muted: #637087;
    --mf-line: #e5ebf3;
    --mf-soft: #f5f8fc;
    --mf-white: #ffffff;
    color: var(--mf-ink);
    background: #fff;
    overflow: hidden;
    font-family: inherit;
}

.mf-home a {
    text-decoration: none;
}

.mf-home img {
    max-width: 100%;
}

.mf-shell {
    width: min(1180px, calc(100% - 48px));
    margin-inline: auto;
}

.mf-section {
    position: relative;
}

.mf-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    color: var(--mf-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    line-height: 1.4;
}

.mf-kicker::before {
    content: "";
    width: 28px;
    height: 2px;
    background: linear-gradient(90deg, var(--mf-orange), var(--mf-blue));
}

.mf-kicker--light {
    color: #9fdcff;
}

.mf-kicker--light::before {
    background: linear-gradient(90deg, var(--mf-orange), var(--mf-cyan));
}

.mf-section-intro {
    max-width: 760px;
}

.mf-section-intro--center {
    margin-inline: auto;
    text-align: center;
}

.mf-section-intro--center .mf-kicker {
    justify-content: center;
}

.mf-section-intro h2,
.mf-section-heading h2,
.mf-proof-heading h2 {
    margin: 0;
    color: var(--mf-ink);
    font-size: clamp(38px, 5vw, 68px);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: .98;
}

.mf-section-intro h2 em,
.mf-section-heading h2 em,
.mf-proof-heading h2 em,
.mf-about-copy h2 em,
.mf-intelligence__copy h2 em,
.mf-cta h2 em {
    color: var(--mf-blue);
    font-style: normal;
}

.mf-section-intro p,
.mf-section-heading > p {
    margin: 24px auto 0;
    color: var(--mf-muted);
    font-size: 17px;
    line-height: 1.75;
}

/* ------------------------------------------------
   BUTTONS / LINKS
------------------------------------------------ */
.mf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 52px;
    padding: 0 24px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .03em;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.mf-btn:hover {
    transform: translateY(-2px);
}

.mf-btn span {
    font-size: 19px;
    line-height: 1;
}

.mf-btn--primary {
    color: #fff !important;
    background: linear-gradient(135deg, var(--mf-blue), #103875);
    box-shadow: 0 15px 35px rgba(23,73,161,.25);
}

.mf-btn--primary:hover {
    color: #fff !important;
    box-shadow: 0 20px 42px rgba(23,73,161,.34);
}

.mf-btn--ghost {
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.34);
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(12px);
}

.mf-btn--ghost:hover {
    background: rgba(255,255,255,.14);
}

.mf-btn--light {
    color: var(--mf-ink) !important;
    background: #fff;
    box-shadow: 0 14px 35px rgba(0,0,0,.18);
}

.mf-text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--mf-ink) !important;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
}

.mf-text-link span {
    color: var(--mf-blue);
    font-size: 20px;
    transition: transform .2s ease;
}

.mf-text-link:hover span {
    transform: translateX(4px);
}








/* =========================================================
	START SECTION 1 — HERO CSS
========================================================= */

.mf-hero {
    --mf-blue: #171a7c;
    --mf-orange: #ff6b00;
    --mf-white: #ffffff;

    position: relative;
    width: 100%;
    height: min(880px, calc(100vh - 80px));
    min-height: 0;

    overflow: hidden;
    isolation: isolate;

    background: var(--mf-blue);

    font-family:
        Inter,
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;
}


/* =========================================================
   SLIDES
========================================================= */

.mf-hero__slides {
    position: absolute;
    inset: 0;
}


.mf-hero__slide {
    position: absolute;
    inset: 0;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .8s ease,
        visibility .8s ease;

    z-index: 1;
}


.mf-hero__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}


/* =========================================================
   IMAGE
========================================================= */

.mf-hero__image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center center;

    transform: scale(1.001);

    transition:
        transform 1.2s ease;
}


.mf-hero__slide.is-active .mf-hero__image {
    transform: scale(1);
}


/* =========================================================
   VERY LIGHT BRAND-COLOURED CONTENT PROTECTION
   Keeps original image clarity.
========================================================= */

.mf-hero__slide::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;
}


/* LEFT CONTENT SLIDES */

.mf-hero__slide:nth-child(1)::after {
    background:
        linear-gradient(
            90deg,
            rgba(23, 26, 124, .28) 0%,
            rgba(23, 26, 124, .20) 25%,
            rgba(23, 26, 124, .10) 48%,
            rgba(23, 26, 124, .03) 65%,
            rgba(23, 26, 124, 0) 78%
        );
}

.mf-hero__slide:nth-child(2)::after {

    background:
        linear-gradient(
            90deg,
            rgba(23, 26, 124, .74) 0%,
            rgba(23, 26, 124, .48) 27%,
            rgba(23, 26, 124, .16) 50%,
            rgba(23, 26, 124, 0) 70%
        );
}


/* RIGHT CONTENT SLIDE */

.mf-hero__slide:nth-child(3)::after {

    background:
        linear-gradient(
            270deg,
            rgba(23, 26, 124, .74) 0%,
            rgba(23, 26, 124, .48) 27%,
            rgba(23, 26, 124, .16) 50%,
            rgba(23, 26, 124, 0) 70%
        );
}


/* =========================================================
   CONTENT
========================================================= */

.mf-hero__content {
    position: absolute;

    top: 50%;

    width: min(550px, 42vw);

    transform: translateY(-50%);

    z-index: 4;
}


.mf-hero__content--left {
    left: clamp(32px, 7vw, 120px);
}


.mf-hero__content--right {
    right: clamp(32px, 7vw, 120px);
}


/* =========================================================
   EYEBROW
========================================================= */

.mf-hero__eyebrow {
    display: block;

    margin-bottom: 22px;

    color: var(--mf-orange);

    font-size: 12px;
    font-weight: 700;

    line-height: 1.4;

    letter-spacing: 2.4px;
}


/* =========================================================
   HEADING
========================================================= */

.mf-hero__content h1,
.mf-hero__content h2 {

    margin: 0;

    color: var(--mf-white);

    font-size:
        clamp(48px, 5.3vw, 82px);

    font-weight: 750;

    line-height: .98;

    letter-spacing: -3px;
}


.mf-hero__content h1 span,
.mf-hero__content h2 span {

    display: block;

    color: #d7e7ff !important;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.mf-hero__content p {

    max-width: 500px;

    margin:
        27px 0 0;

    color:
        rgba(255,255,255,.91);

    font-size:
        clamp(15px, 1.15vw, 18px);

    font-weight: 400;

    line-height: 1.65;

    letter-spacing: -.05px;
}


/* =========================================================
   CTA — ORIGINAL HERO BUTTON STANDARD
========================================================= */

.mf-hero__cta {

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

    margin-top: 32px;

    padding: 10px 25px;

    background: linear-gradient(
        to right,
        #ff5917,
        #ff9317
    );

    color: #ffffff;

    border: 1px solid #ff9317;

    text-decoration: none;

    font-size: 15px;
    font-weight: 700;

    border-radius: 4px;

    position: relative;
    z-index: 1;

    overflow: hidden;

    transition: all 0.3s ease-out;
}


/* ARROW */

.mf-hero__cta i {

    font-size: 16px;

    margin-left: 10px;

    color: #ffffff;

    line-height: 1;
}


/* HOVER OVERLAY */

.mf-hero__cta::after {

    content: "";

    height: 100%;
    width: 0;

    background: linear-gradient(
        to right,
        #ff9317,
        #ff5917
    );

    border-radius: 4px;

    position: absolute;

    right: 0;
    top: 0;

    z-index: -1;

    visibility: hidden;
    opacity: 0;

    transition: all 0.3s ease-out;
}


/* HOVER */

.mf-hero__cta:hover {

    color: #ffffff;
}


.mf-hero__cta:hover::after {

    visibility: visible;
    opacity: 1;
    width: 100%;
}


/* =========================================================
   CONTROLS
========================================================= */

.mf-hero__controls {

    position: absolute;

    left: clamp(32px, 7vw, 120px);
    bottom: 42px;

    z-index: 10;

    display: flex;
    align-items: center;

    gap: 12px;
}


.mf-hero__arrow {

    width: 40px;
    height: 40px;

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

    padding: 0;

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

    border-radius: 50%;

    background:
        rgba(23,26,124,.18);

    color: var(--mf-white);

    font-size: 17px;

    cursor: pointer;

    transition:
        background .25s ease,
        border-color .25s ease;
}


.mf-hero__arrow:hover {

    background: var(--mf-orange);

    border-color: var(--mf-orange);
}


.mf-hero__dots {

    display: flex;
    align-items: center;

    gap: 8px;

    margin: 0 5px;
}


.mf-hero__dot {

    width: 7px;
    height: 7px;

    padding: 0;

    border: 0;

    border-radius: 50%;

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

    cursor: pointer;

    transition:
        width .3s ease,
        background .3s ease;
}


.mf-hero__dot.is-active {

    width: 27px;

    border-radius: 10px;

    background: var(--mf-orange);
}


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

@media (max-width: 1050px) {

    .mf-hero__content {

        width: min(500px, 50vw);
    }

    .mf-hero__content h1,
    .mf-hero__content h2 {

        font-size:
            clamp(44px, 6vw, 68px);
    }
}


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

@media (max-width: 760px) {

    .mf-hero {

        height: 100svh;
        min-height: 700px;
    }


    .mf-hero__content,
    .mf-hero__content--left,
    .mf-hero__content--right {

        left: 20px;
        right: 20px;

        bottom: 105px;
        top: auto;

        width: auto;

        transform: none;
    }


    /*
       On mobile, content sits in lower area.
       Image remains visible and clear.
    */

    /* SLIDE 1 */

    .mf-hero__slide:nth-child(1)::after {

        background:
            linear-gradient(
                180deg,
                rgba(23, 26, 124, 0) 25%,
                rgba(23, 26, 124, .08) 45%,
                rgba(23, 26, 124, .24) 68%,
                rgba(23, 26, 124, .42) 100%
            );
    }


    /* SLIDE 2 & 3 */

    .mf-hero__slide:nth-child(2)::after,
    .mf-hero__slide:nth-child(3)::after {

        background:
            linear-gradient(
                180deg,
                rgba(23, 26, 124, 0) 28%,
                rgba(23, 26, 124, .20) 45%,
                rgba(23, 26, 124, .72) 72%,
                rgba(23, 26, 124, .94) 100%
            );
    }


    .mf-hero__eyebrow {

        margin-bottom: 14px;

        font-size: 9px;

        letter-spacing: 1.7px;
    }


    .mf-hero__content h1,
    .mf-hero__content h2 {

        font-size:
            clamp(38px, 10.8vw, 55px);

        line-height: .98;

        letter-spacing: -2px;
    }


    .mf-hero__content p {

        margin-top: 18px;

        font-size: 14px;

        line-height: 1.55;
    }


    .mf-hero__cta {

        min-height: 48px;

        margin-top: 22px;

        padding:
            0 19px;

        gap: 13px;

        font-size: 10px;

        border-radius: 7px;
    }


    .mf-hero__cta span {

        font-size: 17px;
    }


    .mf-hero__controls {

        left: 20px;
        right: 20px;

        bottom: 32px;

        justify-content: flex-start;
    }

}


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

@media (max-width: 430px) {

    .mf-hero {

        min-height: 670px;
    }


    .mf-hero__content h1,
    .mf-hero__content h2 {

        font-size: 39px;
    }


    .mf-hero__content p {

        font-size: 13px;
    }

}


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

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

    .mf-hero__slide,
    .mf-hero__image,
    .mf-hero__cta {

        transition: none !important;
    }

}









/* =====================================================
	     START  SECTION 2 — TRUST BAR CSS
===================================================== */

.mf-trustbar {
    position: absolute;

    left: 50%;

    width: min(1250px, calc(100vw - 50px));
    height: 94px;

    display: flex;
    align-items: center;

    padding: 10px;

    box-sizing: border-box;

    background:
        linear-gradient(
            135deg,
            #0d4eb8 0%,
            #1749A1 52%,
            #0d429e 100%
        );

    border: 1px solid rgba(255,255,255,.24);
    border-radius: 20px;

    box-shadow:
        0 26px 55px rgba(13,55,125,.30),
        0 10px 26px rgba(23,73,161,.18),
        inset 0 1px 0 rgba(255,255,255,.22);

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

    /*
     * Trust Bar stays below the header/menu.
     */
    z-index: 50;

    isolation: isolate;
}


/* =====================================================
   VIEWPORT
===================================================== */

.mf-trustbar__viewport {
    position: relative;

    flex: 1;
    min-width: 0;

    height: 100%;

    overflow: hidden;

    border-radius: 13px;

    z-index: 1;
}


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

.mf-trustbar__track {
    height: 100%;

    display: flex;
    align-items: center;

    gap: 12px;

    width: max-content;

    transform: translate3d(0, 0, 0);

    transition:
        transform .48s cubic-bezier(.22,.61,.36,1);

    will-change: transform;

    z-index: 1;
}


/* =====================================================
   TRUST CARD
===================================================== */

.mf-trust-card {
    position: relative;

    flex: 0 0 174px;

    width: 174px;
    height: 72px;

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

    padding: 7px;

    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f7f9fc
        );

    border: 1px solid rgba(255,255,255,.96);
    border-radius: 10px;

    box-shadow:
        0 6px 15px rgba(3,27,67,.12),
        inset 0 1px 0 rgba(255,255,255,.95);

    overflow: hidden;

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

    z-index: 1;
}


/* =====================================================
   IMAGE
===================================================== */

.mf-trust-card img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    object-position: center;

    border-radius: 6px;

    background: #ffffff;

    user-select: none;

    -webkit-user-drag: none;
}


/* =====================================================
   PREMIUM HOVER
===================================================== */

.mf-trust-card:hover {

    transform: translateY(-2px);

    box-shadow:
        0 10px 22px rgba(3,27,67,.16),
        inset 0 1px 0 rgba(255,255,255,.95);
}


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

.mf-trustbar__arrow {
    position: relative;

    flex: 0 0 52px;

    width: 52px;
    height: 52px;

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

    margin: 0 4px;

    color: #ffffff;

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

    border: 1px solid rgba(255,255,255,.78);
    border-radius: 50%;

    cursor: pointer;

    flex-shrink: 0;

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

    z-index: 2;
}


.mf-trustbar__arrow span {

    display: block;

    font-size: 24px;
    font-weight: 300;

    line-height: 1;
}


.mf-trustbar__arrow:hover {

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

    border-color: #ffffff;

    box-shadow:
        0 5px 18px rgba(0,0,0,.12);

    transform: scale(1.06);
}


.mf-trustbar__arrow:active {

    transform: scale(.95);
}


/* =====================================================
   HEADER / MENU SAFETY
===================================================== */

header,
.site-header,
.navbar,
.main-header,
.mf-header {

    position: relative;

    z-index: 1000 !important;
}


/*
 * Mobile/tablet navigation must always remain
 * above the Trust Bar.
 */
@media (max-width: 991px) {

    header,
    .site-header,
    .navbar,
    .main-header,
    .mf-header,
    .mobile-menu,
    .mobile-nav,
    .mobile-navigation,
    .mean-container,
    .mean-bar,
    .mean-nav {

        position: relative;

        z-index: 10000 !important;
    }

    .mf-trustbar {

        z-index: 10 !important;
    }
}


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

@media (max-width: 1100px) {

    .mf-trustbar {

        width: calc(100vw - 40px);
    }

    .mf-trust-card {

        flex-basis: 162px;
        width: 162px;
    }
}


@media (max-width: 800px) {

    .mf-trustbar {

        width: calc(100vw - 28px);

        height: 86px;

        padding: 8px;

        border-radius: 17px;
    }

    .mf-trustbar__arrow {

        flex-basis: 44px;

        width: 44px;
        height: 44px;

        margin: 0 3px;
    }

    .mf-trustbar__arrow span {

        font-size: 20px;
    }

    .mf-trust-card {

        flex-basis: 148px;
        width: 148px;

        height: 64px;
    }
}


@media (max-width: 560px) {

    .mf-trustbar {

        width: calc(100vw - 16px);

        height: 78px;

        padding: 7px;

        border-radius: 15px;
    }

    .mf-trustbar__arrow {

        flex-basis: 38px;

        width: 38px;
        height: 38px;

        margin: 0 2px;
    }

    .mf-trustbar__arrow span {

        font-size: 18px;
    }

    .mf-trust-card {

        flex-basis: 132px;
        width: 132px;

        height: 58px;
    }
}


@media (max-width: 400px) {

    .mf-trustbar {

        width: calc(100vw - 10px);
    }

    .mf-trustbar__arrow {

        flex-basis: 34px;

        width: 34px;
        height: 34px;
    }

    .mf-trustbar__arrow span {

        font-size: 16px;
    }

    .mf-trust-card {

        flex-basis: 120px;
        width: 120px;
    }
}








/* =========================================================
		START SECTION 3 — AI SEARCH CSS
========================================================= */

.ai-search-section {
    position: relative;
    width: 100%;
    padding: 108px 0 112px;
    background: #fff;
    overflow: hidden;
}

.ai-search-container {
    width: min(1240px, calc(100% - 56px));
    margin: 0 auto;

    display: grid;
    grid-template-columns: .96fr 1.04fr;
    align-items: center;
    gap: 72px;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.ai-search-content {
    position: relative;
    z-index: 3;
    max-width: 590px;
}

.ai-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 24px;

    color: #1749a1;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.ai-eyebrow span {
    width: 32px;
    height: 2px;
    display: block;

    background: linear-gradient(
        90deg,
        #1749a1,
        #fd7e14
    );

    border-radius: 20px;
}


/* =========================================================
   HEADING
========================================================= */

.ai-search-content h2 {
    margin: 0;

    color: #101828;

    font-size: clamp(54px, 5.7vw, 82px);
    font-weight: 500;

    letter-spacing: -.065em;
    line-height: .94;
}

.ai-search-content h2 strong {
    display: block;

    color: #1749a1;
    font-weight: 760;
}

.ai-search-content h2 strong span {
    color: #fd7e14;
}


/* =========================================================
   SUB HEADING
========================================================= */

.ai-search-content h3 {
    max-width: 560px;

    margin: 28px 0 17px;

    color: #26344d;

    font-size: 19px;
    font-weight: 600;
    line-height: 1.52;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.ai-search-content > p {
    max-width: 555px;

    margin: 0;

    color: #667085;

    font-size: 15px;
    line-height: 1.82;
}


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

.ai-search-bottom {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 27px;

    margin-top: 38px;
}


/* PREMIUM ORANGE BUTTON */

.ai-search-btn {

    position: relative;
    overflow: hidden;

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

    padding: 10px 25px;

    color: #ffffff;

    background: linear-gradient(
        to right,
        #ff5917,
        #ff9317
    );

    border: 1px solid #ff9317;
    border-radius: 4px;

    font-size: 15px;
    font-weight: 700;

    text-decoration: none;

    z-index: 1;

    transition: all 0.3s ease-out;
}


/* BUTTON TEXT */

.ai-search-btn span {

    position: relative;
    z-index: 3;

    color: #ffffff;
}


/* ORIGINAL ARROW ICON */

.ai-search-btn i {

    position: relative;
    z-index: 3;

    display: inline-block;

    width: auto;
    height: auto;

    margin-left: 10px;

    color: #ffffff;

    background: transparent;

    border: 0;
    border-radius: 0;

    font-family: "Font Awesome 5 Free";
    font-size: 16px;
    font-weight: 900;

    font-style: normal;

    line-height: 1;

    box-shadow: none;

    transition: none;
}


/* ORIGINAL HOVER OVERLAY */

.ai-search-btn::after {

    content: "";

    height: 100%;
    width: 0;

    background: linear-gradient(
        to right,
        #ff9317,
        #ff5917
    );

    border-radius: 4px;

    position: absolute;

    right: 0;
    top: 0;

    z-index: 0;

    visibility: hidden;
    opacity: 0;

    transition: all 0.3s ease-out;
}


/* HOVER */

.ai-search-btn:hover {

    color: #ffffff;

    transform: none;
    filter: none;

    box-shadow: none;
}


.ai-search-btn:hover::after {

    visibility: visible;
    opacity: 1;

    width: 100%;
}


/* =========================================================
   MINI POINTS
========================================================= */

.ai-mini-points {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    color: #7a8495;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .035em;
}

.ai-mini-points b {
    color: #fd7e14;
    font-size: 12px;
}


/* =========================================================
   RIGHT AI VISUAL
   SAME DESIGN — ONLY MADE LARGER
========================================================= */

.ai-search-visual {
    position: relative;

    min-height: 625px;

    overflow: hidden;
    isolation: isolate;

    border-radius: 42px;

    background:
        radial-gradient(
            circle at 50% 43%,
            rgba(83,132,207,.38) 0%,
            rgba(23,73,161,.23) 24%,
            rgba(15,52,110,.55) 48%,
            transparent 73%
        ),
        radial-gradient(
            circle at 90% 8%,
            rgba(253,126,20,.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 5% 95%,
            rgba(75,130,205,.16),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #06172f 0%,
            #0a2858 40%,
            #123f8c 70%,
            #06172f 100%
        );

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

    box-shadow:
        0 38px 90px rgba(7,28,61,.30),
        0 0 0 1px rgba(255,255,255,.035),
        inset 0 1px 0 rgba(255,255,255,.13),
        inset 0 0 100px rgba(23,73,161,.12);

    transform: translateZ(0);
}


/* =========================================================
   INNER BORDER
========================================================= */

.ai-search-visual::after {
    content: "";

    position: absolute;
    inset: 11px;

    border: 1px solid rgba(255,255,255,.055);
    border-radius: 32px;

    pointer-events: none;
    z-index: 30;
}


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

.ai-search-visual::before {
    content: "";

    position: absolute;
    inset: 0;

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

    background-size: 46px 46px;

    mask-image:
        radial-gradient(
            circle at 50% 45%,
            black 0%,
            rgba(0,0,0,.65) 43%,
            transparent 77%
        );

    opacity: .55;

    pointer-events: none;
    z-index: 0;
}


/* =========================================================
   AMBIENT GLOW
========================================================= */

.ai-blue-glow {
    position: absolute;

    top: 45%;
    left: 50%;

    width: 520px;
    height: 520px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.13) 0%,
            rgba(255,255,255,.055) 23%,
            rgba(23,73,161,.12) 44%,
            transparent 70%
        );

    filter: blur(9px);

    animation:
        aiAmbientPulse 6s ease-in-out infinite;

    pointer-events: none;
    z-index: 1;
}


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

.ai-visual-top {
    position: absolute;

    top: 27px;
    left: 30px;
    right: 30px;

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

    z-index: 25;
}

.ai-live-label {
    display: flex;
    align-items: center;
    gap: 9px;

    color: rgba(255,255,255,.80);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
}

.live-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #fd7e14;

    box-shadow:
        0 0 0 4px rgba(253,126,20,.11),
        0 0 17px rgba(253,126,20,.72);

    animation:
        livePulse 2s ease-in-out infinite;
}

.ai-live {
    padding: 6px 10px;

    color: #fff;

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

    border: 1px solid rgba(255,255,255,.15);
    border-radius: 5px;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: .13em;
}


/* =========================================================
   AI CORE
   SAME STRUCTURE — SLIGHTLY LARGER
========================================================= */

.ai-core {
    position: absolute;

    top: 45%;
    left: 50%;

    width: 410px;
    height: 410px;

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

    z-index: 6;
}

.ai-core::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 390px;
    height: 390px;

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

    border: 1px dashed rgba(255,255,255,.11);
    border-radius: 50%;

    animation:
        aiOrbit 28s linear infinite;
}

.ai-core::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 315px;
    height: 315px;

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

    border: 1px solid rgba(255,255,255,.09);
    border-radius: 50%;

    box-shadow:
        0 0 40px rgba(255,255,255,.035);

    animation:
        aiOrbitReverse 20s linear infinite;
}


/* =========================================================
   RINGS
========================================================= */

.ai-ring {
    position: absolute;

    top: 50%;
    left: 50%;

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

    border-radius: 50%;
    pointer-events: none;
}

.ring-one {
    width: 150px;
    height: 150px;

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

    box-shadow:
        0 0 45px rgba(255,255,255,.07),
        inset 0 0 24px rgba(255,255,255,.04);

    animation:
        aiCorePulse 4s ease-in-out infinite;
}

.ring-two {
    width: 250px;
    height: 250px;

    border: 1px dashed rgba(255,255,255,.17);

    animation:
        aiOrbit 18s linear infinite;
}

.ring-three {
    width: 360px;
    height: 360px;

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

    animation:
        aiOrbitReverse 25s linear infinite;
}


/* =========================================================
   CENTER
========================================================= */

.ai-core-circle {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 118px;
    height: 118px;

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

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

    border: 1px solid rgba(255,255,255,.36);
    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 25%,
            rgba(255,255,255,.23),
            rgba(23,73,161,.72) 48%,
            rgba(7,33,73,.90) 100%
        );

    box-shadow:
        0 0 0 7px rgba(255,255,255,.025),
        0 0 45px rgba(255,255,255,.15),
        0 0 95px rgba(23,73,161,.38),
        inset 0 0 34px rgba(255,255,255,.09);

    backdrop-filter: blur(12px);

    z-index: 8;

    animation:
        coreBreath 4s ease-in-out infinite;
}

.ai-core-circle::before {
    content: "";

    position: absolute;
    inset: 12px;

    border: 1px solid rgba(253,126,20,.52);
    border-radius: 50%;

    box-shadow:
        0 0 18px rgba(253,126,20,.13);
}

.ai-core-circle::after {
    content: "";

    position: absolute;

    width: 8px;
    height: 8px;

    top: 12px;
    right: 20px;

    border-radius: 50%;

    background: #fd7e14;

    box-shadow:
        0 0 14px rgba(253,126,20,.8);
}

.ai-core-circle span {
    position: relative;
    z-index: 4;

    color: #fff;

    font-size: 34px;
    font-weight: 850;

    letter-spacing: -.07em;

    text-shadow:
        0 0 20px rgba(255,255,255,.25);
}


/* =========================================================
   FLOATING CARDS
   GOOGLE MARKUP PRESERVED
========================================================= */

.ai-card {
    position: absolute;

    display: flex;
    align-items: center;
    gap: 11px;

    min-width: 198px;

    padding: 13px 14px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.13),
            rgba(255,255,255,.052)
        );

    border: 1px solid rgba(255,255,255,.17);
    border-radius: 11px;

    box-shadow:
        0 20px 42px rgba(0,0,0,.17),
        inset 0 1px 0 rgba(255,255,255,.11);

    backdrop-filter: blur(18px);

    z-index: 18;

    transition:
        border-color .3s ease,
        background .3s ease,
        filter .3s ease;
}

.ai-card:hover {
    border-color: rgba(255,255,255,.31);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.17),
            rgba(255,255,255,.07)
        );

    filter: brightness(1.08);
}


/* ICON */

.ai-card-icon {
    width: 36px;
    height: 36px;

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

    flex: 0 0 36px;

    color: #fff;

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

    border: 1px solid rgba(255,255,255,.11);
    border-radius: 8px;

    font-size: 13px;
    font-weight: 800;

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


/* GOOGLE PREMIUM G — KEEP */

.google-mark {
    position: relative;

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

    border-color: rgba(255,255,255,.9);

    box-shadow:
        0 5px 15px rgba(0,0,0,.13),
        inset 0 1px 0 rgba(255,255,255,.9);
}

.google-g {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 20px;
    font-weight: 700;

    background:
        conic-gradient(
            from -45deg,
            #4285f4 0deg 88deg,
            #34a853 88deg 165deg,
            #fbbc05 165deg 235deg,
            #ea4335 235deg 310deg,
            #4285f4 310deg 360deg
        );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* BLUE */

.ai-icon-blue {
    background:
        linear-gradient(
            135deg,
            rgba(70,127,220,.65),
            rgba(23,73,161,.50)
        );
}


/* ORANGE */

.ai-icon-orange {
    background:
        linear-gradient(
            135deg,
            #ff9a43,
            #fd7e14
        );

    box-shadow:
        0 6px 18px rgba(253,126,20,.24);
}


/* CARD TEXT */

.ai-card strong {
    display: block;

    color: #fff;

    font-size: 11px;
    font-weight: 750;
}

.ai-card small {
    display: block;

    margin-top: 3px;

    color: rgba(255,255,255,.48);

    font-size: 9px;
}

.ai-card em {
    margin-left: auto;

    color: #fd7e14;

    font-size: 13px;
    font-style: normal;

    text-shadow:
        0 0 11px rgba(253,126,20,.45);
}


/* POSITIONS */

.ai-card-one {
    top: 145px;
    left: 29px;

    animation:
        aiFloatOne 5s ease-in-out infinite;
}

.ai-card-two {
    top: 265px;
    right: 26px;

    animation:
        aiFloatTwo 6s ease-in-out infinite;
}

.ai-card-three {
    bottom: 158px;
    left: 32px;

    animation:
        aiFloatThree 5.5s ease-in-out infinite;
}


/* =========================================================
   SIGNAL CARD
========================================================= */

.ai-signal-card {
    position: absolute;

    left: 50%;
    bottom: 82px;

    width: min(370px, calc(100% - 60px));

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 14px 15px;

    transform: translateX(-50%);

    color: #fff;

    background:
        linear-gradient(
            135deg,
            rgba(7,38,83,.78),
            rgba(23,73,161,.40)
        );

    border: 1px solid rgba(255,255,255,.16);
    border-radius: 10px;

    box-shadow:
        0 20px 44px rgba(0,0,0,.19),
        inset 0 1px 0 rgba(255,255,255,.09);

    backdrop-filter: blur(18px);

    z-index: 22;
}

.signal-icon {
    width: 36px;
    height: 36px;

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

    flex: 0 0 36px;

    color: #fff;

    background:
        rgba(253,126,20,.14);

    border: 1px solid rgba(253,126,20,.32);
    border-radius: 8px;

    font-size: 18px;
}

.ai-signal-card small {
    display: block;

    margin-bottom: 3px;

    color: rgba(255,255,255,.43);

    font-size: 8px;
    font-weight: 800;
    letter-spacing: .12em;
}

.ai-signal-card strong {
    display: block;

    color: #fff;

    font-size: 10px;
    font-weight: 650;
}

.signal-line {
    position: relative;

    width: 55px;
    height: 2px;

    margin-left: auto;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            #1749a1,
            #fd7e14
        );

    border-radius: 10px;
}

.signal-line::after {
    content: "";

    position: absolute;

    top: -3px;
    left: -20px;

    width: 14px;
    height: 8px;

    border-radius: 50%;

    background: #fff;

    filter: blur(3px);

    animation:
        signalScan 2.2s linear infinite;
}


/* =========================================================
   FOOTER
========================================================= */

.ai-visual-footer {
    position: absolute;

    left: 29px;
    right: 29px;
    bottom: 23px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);

    border-top:
        1px solid rgba(255,255,255,.11);

    z-index: 24;
}

.ai-visual-footer > div {
    padding-top: 13px;

    text-align: center;

    border-right:
        1px solid rgba(255,255,255,.08);
}

.ai-visual-footer > div:last-child {
    border-right: 0;
}

.ai-visual-footer small {
    display: block;

    color: #fd7e14;

    font-size: 8px;
    font-weight: 800;
}

.ai-visual-footer strong {
    display: block;

    margin-top: 4px;

    color: #fff;

    font-size: 9px;
    letter-spacing: .08em;
}

.ai-visual-footer span {
    display: block;

    margin-top: 3px;

    color: rgba(255,255,255,.40);

    font-size: 8px;
}


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

@keyframes aiOrbit {
    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }
}

@keyframes aiOrbitReverse {
    from {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }
}

@keyframes aiCorePulse {
    0%,
    100% {
        opacity: .72;
        box-shadow:
            0 0 45px rgba(255,255,255,.06);
    }

    50% {
        opacity: 1;
        box-shadow:
            0 0 65px rgba(255,255,255,.12);
    }
}

@keyframes coreBreath {
    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(1);
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.04);
    }
}

@keyframes aiAmbientPulse {
    0%,
    100% {
        opacity: .70;
        transform:
            translate(-50%, -50%)
            scale(.96);
    }

    50% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1.04);
    }
}

@keyframes livePulse {
    0%,
    100% {
        opacity: .70;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.16);
    }
}

@keyframes aiFloatOne {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes aiFloatTwo {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }
}

@keyframes aiFloatThree {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

@keyframes signalScan {
    0% {
        left: -20px;
    }

    100% {
        left: 65px;
    }
}


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

@media (max-width: 950px) {

    .ai-search-section {
        padding: 82px 0 90px;
    }

    .ai-search-container {
        grid-template-columns: 1fr;
        gap: 52px;
    }

    .ai-search-content {
        max-width: 720px;
    }

    .ai-search-visual {
        width: 100%;
        max-width: 760px;
        margin: 0 auto;
    }
}


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

@media (max-width: 640px) {

    .ai-search-section {
        padding: 58px 0 65px;
    }

    .ai-search-container {
        width: calc(100% - 28px);
        gap: 34px;
    }

    .ai-eyebrow {
        margin-bottom: 16px;
        font-size: 9px;
    }

    .ai-search-content h2 {
        font-size: clamp(46px, 13vw, 62px);
    }

    .ai-search-content h3 {
        margin-top: 19px;
        font-size: 15px;
        line-height: 1.5;
    }

    .ai-search-content > p {
        font-size: 13px;
        line-height: 1.7;
    }

    .ai-search-bottom {
        margin-top: 26px;
        gap: 17px;
    }

    .ai-search-btn {
        min-height: 50px;
        padding: 0 19px 0 20px;
    }

    .ai-search-btn i {
        width: 25px;
        height: 25px;
    }

    .ai-mini-points {
        font-size: 8px;
    }

    .ai-search-visual {
        min-height: 540px;
        border-radius: 27px;
    }

    .ai-search-visual::after {
        inset: 7px;
        border-radius: 20px;
    }

    .ai-visual-top {
        top: 19px;
        left: 20px;
        right: 20px;
    }

    .ai-live-label {
        font-size: 7px;
    }

    .ai-live {
        padding: 4px 7px;
        font-size: 6px;
    }

    .ai-core {
        top: 44%;
        width: 310px;
        height: 310px;
    }

    .ai-core::before {
        width: 295px;
        height: 295px;
    }

    .ai-core::after {
        width: 240px;
        height: 240px;
    }

    .ring-one {
        width: 118px;
        height: 118px;
    }

    .ring-two {
        width: 198px;
        height: 198px;
    }

    .ring-three {
        width: 282px;
        height: 282px;
    }

    .ai-core-circle {
        width: 90px;
        height: 90px;
    }

    .ai-core-circle span {
        font-size: 27px;
    }

    .ai-card {
        min-width: 148px;
        padding: 9px 10px;
        gap: 8px;
    }

    .ai-card-icon {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
        font-size: 10px;
    }

    .google-g {
        font-size: 17px;
    }

    .ai-card strong {
        font-size: 8px;
    }

    .ai-card small {
        font-size: 7px;
    }

    .ai-card-one {
        top: 105px;
        left: 12px;
    }

    .ai-card-two {
        top: 205px;
        right: 10px;
    }

    .ai-card-three {
        bottom: 138px;
        left: 12px;
    }

    .ai-signal-card {
        bottom: 68px;
        width: calc(100% - 28px);
        padding: 10px 11px;
    }

    .signal-icon {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }

    .ai-signal-card strong {
        font-size: 8px;
    }

    .signal-line {
        width: 35px;
    }

    .ai-visual-footer {
        left: 17px;
        right: 17px;
        bottom: 17px;
    }

    .ai-visual-footer strong {
        font-size: 7px;
    }

    .ai-visual-footer span {
        font-size: 6px;
    }
}


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

@media (max-width: 420px) {

    .ai-search-container {
        width: calc(100% - 22px);
    }

    .ai-search-visual {
        min-height: 515px;
        border-radius: 23px;
    }

    .ai-core {
        top: 43%;
        transform:
            translate(-50%, -50%)
            scale(.90);
    }

    .ai-card {
        min-width: 136px;
    }

    .ai-card-one {
        top: 98px;
    }

    .ai-card-two {
        top: 192px;
    }

    .ai-card-three {
        bottom: 130px;
    }

    .ai-signal-card {
        bottom: 62px;
    }
}








/* =========================================================
   START SECTION 4 — WHAT WE DO CSS
========================================================= */

#mfx-section-3.mfx3 {
    --blue: #171a7c;
    --deep: #050936;
    --deep2: #080d4c;
    --electric: #5872ff;
    --electric2: #788dff;
    --orange: #ff7418;
    --white: #ffffff;

    position: relative;
    width: 100%;
    min-height: 1000px;

    overflow: hidden;
    isolation: isolate;

    color: #fff;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(48, 62, 255, .28),
            transparent 34%
        ),
        radial-gradient(
            circle at 0% 0%,
            rgba(255, 116, 24, .24),
            transparent 18%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(255, 116, 24, .20),
            transparent 18%
        ),
        linear-gradient(
            135deg,
            #070a42 0%,
            #0a0e59 48%,
            #080a42 100%
        );

    font-family:
        Inter,
        Poppins,
        Arial,
        sans-serif;
}


/* =========================================================
   BACKGROUND
========================================================= */

#mfx-section-3 .mfx3-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: -10;
    pointer-events: none;
}


/* grid */

#mfx-section-3 .mfx3-grid {
    position: absolute;
    inset: 0;

    opacity: .38;

    background-image:
        linear-gradient(
            rgba(120, 145, 255, .075) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(120, 145, 255, .075) 1px,
            transparent 1px
        );

    background-size: 64px 64px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black 10%,
            transparent 88%
        );
}


/* atmospheric glows */

#mfx-section-3 .mfx3-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(35px);
}


#mfx-section-3 .mfx3-glow-a {
    width: 620px;
    height: 620px;

    left: 50%;
    top: 50%;

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

    background:
        radial-gradient(
            circle,
            rgba(65, 83, 255, .32),
            transparent 68%
        );

    animation:
        mfx3Ambient 7s ease-in-out infinite;
}


#mfx-section-3 .mfx3-glow-b {
    width: 420px;
    height: 420px;

    right: -190px;
    bottom: -180px;

    background:
        radial-gradient(
            circle,
            rgba(255, 95, 20, .22),
            transparent 70%
        );
}


@keyframes mfx3Ambient {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(.92);

        opacity: .65;
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.08);

        opacity: 1;
    }
}


/* =========================================================
   LARGE BACKGROUND ORBITS
========================================================= */

#mfx-section-3 .mfx3-orbit-bg {
    position: absolute;

    left: 50%;
    top: 54%;

    border-radius: 50%;

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

    border: 1px solid rgba(90, 116, 255, .11);
}


#mfx-section-3 .orbit-bg-1 {
    width: 730px;
    height: 730px;
}


#mfx-section-3 .orbit-bg-2 {
    width: 1000px;
    height: 1000px;

    border-style: dashed;

    opacity: .55;

    animation:
        mfx3BgOrbit
        40s
        linear
        infinite;
}


@keyframes mfx3BgOrbit {

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }
}


/* =========================================================
   PARTICLES
========================================================= */

#mfx-section-3 .mfx3-particles {
    position: absolute;
    inset: 0;
}


#mfx-section-3 .mfx3-particle {
    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #7d91ff;

    box-shadow:
        0 0 12px #637aff,
        0 0 25px rgba(99, 122, 255, .55);

    animation:
        mfx3ParticleFloat
        var(--duration)
        ease-in-out
        infinite alternate;
}


#mfx-section-3 .mfx3-particle.orange {
    background: var(--orange);

    box-shadow:
        0 0 12px var(--orange),
        0 0 28px rgba(255, 116, 24, .55);
}


@keyframes mfx3ParticleFloat {

    from {
        transform:
            translate3d(0, 0, 0)
            scale(.65);

        opacity: .25;
    }

    to {
        transform:
            translate3d(
                var(--move-x),
                var(--move-y),
                0
            )
            scale(1.25);

        opacity: .95;
    }
}


/* =========================================================
   CONTAINER
========================================================= */

#mfx-section-3 .mfx3-container {
    position: relative;

    width: min(1320px, calc(100% - 70px));

    margin: 0 auto;

    padding:
        30px 0
        36px;
}


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

#mfx-section-3 .mfx3-header {
    position: relative;

    text-align: center;

    z-index: 20;

    margin-bottom: 28px;
}


#mfx-section-3 .mfx3-kicker {
    display: flex;

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

    gap: 13px;

    color: var(--orange);

    font-size: 14px;
    font-weight: 800;

    letter-spacing: 5px;

    margin-bottom: 12px;
}


#mfx-section-3 .mfx3-kicker-line {
    width: 82px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--orange)
        );

    box-shadow:
        0 0 10px
        rgba(255, 116, 24, .8);
}


#mfx-section-3 .mfx3-kicker-line:last-child {
    background:
        linear-gradient(
            90deg,
            var(--orange),
            transparent
        );
}


#mfx-section-3 .mfx3-kicker-dot {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #9caaff;

    box-shadow:
        0 0 12px #8da0ff;
}


#mfx-section-3 .mfx3-header h2 {
    margin: 0;

    font-size:
        clamp(48px, 5.3vw, 76px);

    line-height: .98;

    font-weight: 700;

    letter-spacing: -3px;

    color: #fff;

    text-shadow:
        0 5px 35px
        rgba(0, 0, 0, .28);
}


#mfx-section-3 .mfx3-header h2 span {
    color: var(--orange);

    text-shadow:
        0 0 30px
        rgba(255, 116, 24, .25);
}


#mfx-section-3 .mfx3-header p {
    margin:
        18px auto
        0;

    max-width: 650px;

    color:
        rgba(255, 255, 255, .82);

    font-size: 17px;

    line-height: 1.55;
}


/* =========================================================
   EXPERIENCE
========================================================= */

#mfx-section-3 .mfx3-experience {
    position: relative;

    width: 100%;

    /* IMPORTANT:
       650px experience
       300px top card
       300px bottom card
       15px top + 15px bottom
       = 20px REAL GAP
    */
    height: 750px;
}


/* connector SVG */

#mfx-section-3 .mfx3-connectors {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 1;

    pointer-events: none;

    overflow: visible;
}


#mfx-section-3 .mfx3-connector {
    fill: none;

    stroke:
        rgba(101, 126, 255, .58);

    stroke-width: 1.1;

    stroke-dasharray: 5 7;

    filter:
        drop-shadow(
            0 0 5px
            rgba(89, 113, 255, .5)
        );

    animation:
        mfx3LineDash
        5s
        linear
        infinite;
}


#mfx-section-3 .mfx3-connector-glow {
    opacity: .38;
}


@keyframes mfx3LineDash {

    to {
        stroke-dashoffset: -100;
    }
}


/* =========================================================
   SERVICE CARDS
========================================================= */

#mfx-section-3 .mfx3-card {
    position: absolute;

    width: 330px;

    /* FIX:
       315px was causing 10px overlap.
       300px gives 20px gap.
    */
    height: 350px;

    padding: 22px 34px 24px;

    box-sizing: border-box;

    text-decoration: none;

    color: #fff;

    border-radius: 22px;

    border:
        1px solid
        rgba(140, 157, 255, .68);

    background:
        radial-gradient(
            circle at var(--mx, 50%) var(--my, 50%),
            rgba(97, 120, 255, .22),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            rgba(74, 82, 188, .36),
            rgba(21, 26, 111, .58)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .12),

        0 18px 55px
        rgba(0, 0, 0, .28),

        0 0 30px
        rgba(69, 88, 255, .08);

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);

    overflow: hidden;

    z-index: 5;

    transform:
        translate3d(
            var(--card-x, 0),
            var(--card-y, 0),
            0
        );

    transition:
        transform .5s cubic-bezier(.2, .8, .2, 1),
        border-color .35s ease,
        box-shadow .35s ease;
}


/* =========================================================
   CARD POSITIONS
   20px GAP BETWEEN ROWS
========================================================= */

#mfx-section-3 .mfx3-card-1 {
    left: 50px;
    top: 15px;
}


#mfx-section-3 .mfx3-card-2 {
    right: 50px;
    top: 15px;
}


#mfx-section-3 .mfx3-card-3 {
    left: 50px;
    bottom: 15px;
}


#mfx-section-3 .mfx3-card-4 {
    right: 50px;
    bottom: 15px;
}


/* =========================================================
   ORANGE BOTTOM GLOW
========================================================= */

#mfx-section-3 .mfx3-card::after {
    content: "";

    position: absolute;

    left: 9%;
    right: 9%;
    bottom: -1px;

    height: 3px;

    border-radius: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--orange),
            #ffad52,
            var(--orange),
            transparent
        );

    box-shadow:
        0 0 12px
        rgba(255, 116, 24, .85),

        0 0 30px
        rgba(255, 116, 24, .55);
}


/* =========================================================
   ORANGE TOP GLOW
========================================================= */

#mfx-section-3 .mfx3-card-glow {
    position: absolute;

    left: 12%;
    right: 12%;

    top: -2px;

    height: 3px;

    border-radius: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--orange),
            #fff1d8,
            var(--orange),
            transparent
        );

    box-shadow:
        0 0 12px
        rgba(255, 116, 24, .95),

        0 0 30px
        rgba(255, 116, 24, .65);

    animation:
        mfx3TopLight
        4s
        ease-in-out
        infinite;
}


@keyframes mfx3TopLight {

    0%,
    100% {
        opacity: .65;
        transform: scaleX(.72);
    }

    50% {
        opacity: 1;
        transform: scaleX(1);
    }
}


/* =========================================================
   GLASS SHINE
========================================================= */

#mfx-section-3 .mfx3-card::before {
    content: "";

    position: absolute;

    top: -30%;
    left: -80%;

    width: 45%;
    height: 170%;

    transform:
        rotate(25deg);

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

    pointer-events: none;

    transition:
        left .9s ease;
}


#mfx-section-3 .mfx3-card:hover::before {
    left: 140%;
}


/* =========================================================
   HOVER
========================================================= */

#mfx-section-3 .mfx3-card:hover {
    border-color:
        rgba(135, 154, 255, .95);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.2),

        0 28px 70px
        rgba(0,0,0,.42),

        0 0 40px
        rgba(70, 99, 255, .32),

        0 0 28px
        rgba(255,116,24,.12);

    transform:
        translate3d(
            var(--card-x, 0),
            calc(var(--card-y, 0) - 8px),
            0
        )
        scale(1.018);
}


/* =========================================================
   CARD CONTENT
========================================================= */

#mfx-section-3 .mfx3-card-head {
    display: flex;

    align-items: center;
    justify-content: space-between;

    position: relative;

    z-index: 3;
}


#mfx-section-3 .mfx3-number {
    color: var(--orange);

    font-size: 17px;
    font-weight: 800;

    letter-spacing: 3px;
}


#mfx-section-3 .mfx3-arrow {
    width: 42px;
    height: 42px;

    display: flex;

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

    border-radius: 50%;

    border:
        1px solid
        rgba(160, 174, 255, .72);

    color: #fff;

    font-size: 23px;

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


#mfx-section-3 .mfx3-card:hover .mfx3-arrow {
    background: #fff;

    color: var(--blue);

    transform:
        rotate(8deg)
        scale(1.08);

    box-shadow:
        0 0 20px
        rgba(255,255,255,.4);
}


/* service icon */

#mfx-section-3 .mfx3-service-icon {
    position: relative;

    z-index: 3;

    display: flex;

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

    width: 65px;
    height: 65px;

    margin-top: 12px;

    border-radius: 14px;

    color: #fff;

    font-size: 22px;
    font-weight: 800;

    background:
        linear-gradient(
            145deg,
            #7388ff,
            #303ec4
        );

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

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.4),

        0 0 20px
        rgba(91, 115, 255, .75),

        0 0 42px
        rgba(91, 115, 255, .35);

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


#mfx-section-3 .mfx3-card:hover .mfx3-service-icon {
    transform:
        translateY(-3px)
        scale(1.06);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.5),

        0 0 25px
        rgba(91,115,255,.95),

        0 0 55px
        rgba(91,115,255,.5);
}


/* headings */

#mfx-section-3 .mfx3-card h3 {
    position: relative;

    z-index: 3;

    margin:
        12px 0
        5px;

    font-size: 24px;

    line-height: 1.15;

    font-weight: 750;

    letter-spacing: -.7px;

    color: #fff;
}


#mfx-section-3 .mfx3-card p {
    position: relative;

    z-index: 3;

    margin: 0;

    max-width: 270px;

    color:
        rgba(255,255,255,.82);

    font-size: 15.5px;

    line-height: 1.5;
}


/* =========================================================
   TAGS
========================================================= */

/* =========================================================
   TAGS — FIXED: NO OVERLAP WITH PARAGRAPH
========================================================= */

#mfx-section-3 .mfx3-tags {
    position: relative;

    left: auto;
    bottom: auto;

    display: flex;
    align-items: center;

    gap: 10px;

    margin-top: 14px;

    z-index: 3;

    flex-wrap: nowrap;
}

#mfx-section-3 .mfx3-tags span {
    padding:
        9px 16px;

    border-radius: 999px;

    border:
        1px solid
        rgba(118, 137, 255, .5);

    background:
        rgba(30, 38, 142, .34);

    color:
        rgba(255,255,255,.9);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .5px;

    white-space: nowrap;

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;
}

#mfx-section-3 .mfx3-card:hover .mfx3-tags span {
    border-color:
        rgba(255,116,24,.45);

    background:
        rgba(255,116,24,.10);

    transform:
        translateY(-2px);
}


/* =========================================================
   CENTER CORE
========================================================= */

#mfx-section-3 .mfx3-core-wrap {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 360px;
    height: 360px;

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

    z-index: 8;
}


/* orbit rings */

#mfx-section-3 .mfx3-core-orbit {
    position: absolute;

    left: 50%;
    top: 50%;

    border-radius: 50%;

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


#mfx-section-3 .orbit-one {
    width: 235px;
    height: 235px;

    border:
        1px solid
        rgba(255,116,24,.7);

    border-style: dashed;

    box-shadow:
        0 0 20px
        rgba(255,116,24,.18);

    animation:
        mfx3Spin
        15s
        linear
        infinite;
}


#mfx-section-3 .orbit-two {
    width: 305px;
    height: 305px;

    border:
        1px solid
        rgba(105, 130, 255, .55);

    box-shadow:
        0 0 30px
        rgba(76, 100, 255, .18);

    animation:
        mfx3SpinReverse
        22s
        linear
        infinite;
}


#mfx-section-3 .orbit-three {
    width: 350px;
    height: 350px;

    border:
        1px dashed
        rgba(101, 124, 255, .24);

    animation:
        mfx3Spin
        34s
        linear
        infinite;
}


@keyframes mfx3Spin {

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }
}


@keyframes mfx3SpinReverse {

    to {
        transform:
            translate(-50%, -50%)
            rotate(-360deg);
    }
}


/* center dots */

#mfx-section-3 .mfx3-core-dot {
    position: absolute;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 0 10px #fff,
        0 0 25px #6682ff;

    z-index: 5;
}


#mfx-section-3 .dot-top {
    left: 50%;
    top: 10px;

    transform: translateX(-50%);
}


#mfx-section-3 .dot-right {
    right: 10px;
    top: 50%;

    transform: translateY(-50%);
}


#mfx-section-3 .dot-bottom {
    left: 50%;
    bottom: 10px;

    transform: translateX(-50%);
}


#mfx-section-3 .dot-left {
    left: 10px;
    top: 50%;

    transform: translateY(-50%);
}


/* orange inner dots */

#mfx-section-3 .mfx3-core-dot::after {
    content: "";

    position: absolute;

    inset: -5px;

    border-radius: 50%;

    border:
        1px solid
        rgba(255,116,24,.75);

    animation:
        mfx3DotPulse
        2s
        ease-in-out
        infinite;
}


@keyframes mfx3DotPulse {

    0%,
    100% {
        transform: scale(.7);
        opacity: .4;
    }

    50% {
        transform: scale(1.25);
        opacity: 1;
    }
}


/* core */

#mfx-section-3 .mfx3-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 270px;
    height: 270px;

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

    border-radius: 50%;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 35% 22%,
            #6b7fff 0%,
            #3443c9 28%,
            #171c88 62%,
            #080c55 100%
        );

    border:
        1px solid
        rgba(125, 154, 255, .95);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.42),

        0 0 0 8px
        rgba(75, 97, 255, .09),

        0 0 35px
        rgba(72, 100, 255, .85),

        0 0 100px
        rgba(50, 71, 255, .35);
}


/* core blue pulse */

#mfx-section-3 .mfx3-core::before {
    content: "";

    position: absolute;

    inset: 12px;

    border-radius: 50%;

    border:
        1px solid
        rgba(132,153,255,.65);

    box-shadow:
        inset 0 0 25px
        rgba(87,109,255,.4);
}


/* core shine */

#mfx-section-3 .mfx3-core-shine {
    position: absolute;

    width: 110px;
    height: 300px;

    left: -160px;
    top: -20px;

    transform:
        rotate(30deg);

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

    animation:
        mfx3CoreShine
        5s
        ease-in-out
        infinite;
}


@keyframes mfx3CoreShine {

    0% {
        left: -160px;
    }

    55%,
    100% {
        left: 300px;
    }
}


#mfx-section-3 .mfx3-core-content {
    position: relative;

    z-index: 5;

    height: 100%;

    display: flex;

    flex-direction: column;

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

    text-align: center;
}


#mfx-section-3 .mfx3-core-content > span {
    margin-bottom: 12px;

    color:
        rgba(198,207,255,.9);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 3px;

    text-shadow:
        0 0 12px
        rgba(145,160,255,.9);
}


#mfx-section-3 .mfx3-core-content strong {
    font-size: 38px;

    line-height: 1;

    letter-spacing: -.5px;

    color: #fff;

    text-shadow:
        0 0 22px
        rgba(255,255,255,.2);
}


#mfx-section-3 .mfx3-core-content small {
    margin-top: 13px;

    font-size: 11px;

    line-height: 1.45;

    color:
        rgba(255,255,255,.85);
}


/* center button */

#mfx-section-3 .mfx3-core-button {
    width: 48px;
    height: 48px;

    margin-top: 17px;

    display: flex;

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

    border-radius: 50%;

    background: #fff;

    color: var(--blue);

    font-size: 23px;

    box-shadow:
        0 0 20px
        rgba(255,255,255,.45),

        0 0 35px
        rgba(100,125,255,.45);

    transition:
        transform .35s ease;
}


#mfx-section-3 .mfx3-core-button:hover {
    transform:
        rotate(12deg)
        scale(1.1);
}


/* =========================================================
   BOTTOM BAR
========================================================= */

#mfx-section-3 .mfx3-bottom {
    position: relative;

    display: flex;

    align-items: center;

    min-height: 125px;

    padding:
        18px 28px;

    margin-top: 18px;

    border:
        1px solid
        rgba(105, 128, 255, .62);

    border-radius: 25px;

    background:
        linear-gradient(
            105deg,
            rgba(10, 16, 85, .72),
            rgba(12, 20, 100, .46)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.08),

        0 18px 50px
        rgba(0,0,0,.25);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


#mfx-section-3 .mfx3-bottom-brand {
    display: flex;

    align-items: center;

    gap: 18px;

    width: 39%;

    padding-right: 35px;

    border-right:
        1px solid
        rgba(111,130,255,.25);
}


#mfx-section-3 .mfx3-bottom-brand strong {
    font-size: 14px;

    letter-spacing: 4px;

    white-space: nowrap;

    color:
        rgba(255,255,255,.92);
}


#mfx-section-3 .mfx3-bottom-pulse {
    position: relative;

    flex: 0 0 46px;

    width: 46px;
    height: 46px;

    border-radius: 50%;

    border:
        1px solid
        var(--orange);

    background:
        radial-gradient(
            circle,
            rgba(255,116,24,.85),
            rgba(255,116,24,.12) 38%,
            transparent 65%
        );

    box-shadow:
        0 0 20px
        rgba(255,116,24,.6);
}


#mfx-section-3 .mfx3-bottom-pulse::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background: #fff;

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

    box-shadow:
        0 0 15px
        var(--orange);
}


/* flow */

#mfx-section-3 .mfx3-flow {
    flex: 1;

    display: flex;

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

    gap: 24px;
}


#mfx-section-3 .mfx3-flow-item {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    min-width: 90px;
}


#mfx-section-3 .mfx3-flow-icon {
    width: 56px;
    height: 56px;

    display: flex;

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

    border-radius: 50%;

    border:
        1px solid
        rgba(100,127,255,.75);

    color: #fff;

    box-shadow:
        0 0 18px
        rgba(73,101,255,.2);
}


#mfx-section-3 .mfx3-flow-item strong {
    font-size: 12px;

    letter-spacing: 1px;
}


#mfx-section-3 .mfx3-flow-arrow {
    font-size: 29px;

    font-weight: 400;

    animation:
        mfx3ArrowPulse
        2s
        ease-in-out
        infinite;
}


#mfx-section-3 .mfx3-flow-arrow.blue {
    color: #6582ff;

    text-shadow:
        0 0 12px
        rgba(101,130,255,.8);
}


#mfx-section-3 .mfx3-flow-arrow.orange {
    color: var(--orange);

    text-shadow:
        0 0 12px
        rgba(255,116,24,.8);
}


@keyframes mfx3ArrowPulse {

    0%,
    100% {
        opacity: .45;
        transform: translateX(0);
    }

    50% {
        opacity: 1;
        transform: translateX(5px);
    }
}


/* fake icons */

#mfx-section-3 .flow-search {
    width: 18px;
    height: 18px;

    border:
        3px solid
        #fff;

    border-radius: 50%;

    position: relative;
}


#mfx-section-3 .flow-search::after {
    content: "";

    position: absolute;

    width: 8px;
    height: 3px;

    background: #fff;

    right: -7px;
    bottom: -4px;

    transform: rotate(45deg);

    border-radius: 4px;
}


#mfx-section-3 .flow-cube {
    font-size: 31px;
}


#mfx-section-3 .flow-bars {
    font-size: 19px;

    letter-spacing: -4px;
}


#mfx-section-3 .flow-rocket {
    color: var(--orange);

    font-size: 28px;

    transform:
        rotate(-35deg);

    text-shadow:
        0 0 12px
        rgba(255,116,24,.8);
}


#mfx-section-3 .mfx3-grow .mfx3-flow-icon {
    border-color:
        var(--orange);

    box-shadow:
        0 0 20px
        rgba(255,116,24,.38);
}


#mfx-section-3 .mfx3-grow strong {
    color: var(--orange);
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 901px) {

    #mfx-section-3 .mfx3-card-1 {
        --card-x: 0px;
        --card-y: 0px;
    }

    #mfx-section-3 .mfx3-card-2 {
        --card-x: 0px;
        --card-y: 0px;
    }

    #mfx-section-3 .mfx3-card-3 {
        --card-x: 0px;
        --card-y: 0px;
    }

    #mfx-section-3 .mfx3-card-4 {
        --card-x: 0px;
        --card-y: 0px;
    }

}


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

@media (max-width: 1100px) {

    #mfx-section-3 .mfx3-container {
        width:
            min(
                100% - 36px,
                920px
            );
    }

    #mfx-section-3 .mfx3-card {
        width: 290px;

        /* Tablet gap maintained */
        height: 290px;

        padding-left: 26px;
        padding-right: 26px;
    }

    #mfx-section-3 .mfx3-card-1,
    #mfx-section-3 .mfx3-card-3 {
        left: 15px;
    }

    #mfx-section-3 .mfx3-card-2,
    #mfx-section-3 .mfx3-card-4 {
        right: 15px;
    }

    #mfx-section-3 .mfx3-core-wrap {
        transform:
            translate(-50%, -50%)
            scale(.85);
    }

    #mfx-section-3 .mfx3-card h3 {
        font-size: 21px;
    }

    #mfx-section-3 .mfx3-card p {
        font-size: 14px;
    }

    #mfx-section-3 .mfx3-bottom-brand {
        width: 33%;
    }

    #mfx-section-3 .mfx3-bottom-brand strong {
        font-size: 11px;
    }

    #mfx-section-3 .mfx3-flow {
        gap: 8px;
    }

}


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

@media (max-width: 760px) {

    #mfx-section-3.mfx3 {
        min-height: auto;
    }

    #mfx-section-3 .mfx3-container {
        width:
            calc(100% - 28px);

        padding:
            55px 0
            28px;
    }

    #mfx-section-3 .mfx3-header {
        margin-bottom: 35px;
    }

    #mfx-section-3 .mfx3-kicker {
        font-size: 10px;
        letter-spacing: 3px;
    }

    #mfx-section-3 .mfx3-kicker-line {
        width: 35px;
    }

    #mfx-section-3 .mfx3-header h2 {
        font-size: 40px;

        letter-spacing: -1.8px;
    }

    #mfx-section-3 .mfx3-header p {
        font-size: 14px;
    }

    #mfx-section-3 .mfx3-desktop {
        display: none;
    }

    #mfx-section-3 .mfx3-experience {
        height: auto;

        display: flex;

        flex-direction: column;

        gap: 16px;
    }

    #mfx-section-3 .mfx3-connectors,
    #mfx-section-3 .mfx3-core-wrap {
        display: none;
    }

    #mfx-section-3 .mfx3-card {
        position: relative;

        inset: auto !important;

        width: 100%;
        height: auto;

        min-height: 285px;

        transform: none !important;

        padding:
            22px 24px 25px;
    }

    #mfx-section-3 .mfx3-card:hover {
        transform:
            translateY(-5px) !important;
    }

    #mfx-section-3 .mfx3-service-icon {
        margin-top: 14px;
    }

    #mfx-section-3 .mfx3-card h3 {
        font-size: 22px;
    }

    #mfx-section-3 .mfx3-tags {
        position: relative;

        left: auto;
        bottom: auto;

        margin-top: 20px;
    }

    #mfx-section-3 .mfx3-bottom {
        margin-top: 25px;

        flex-direction: column;

        align-items: stretch;

        gap: 25px;

        padding: 22px;
    }

    #mfx-section-3 .mfx3-bottom-brand {
        width: 100%;

        padding:
            0 0 20px;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(111,130,255,.25);
    }

    #mfx-section-3 .mfx3-bottom-brand strong {
        font-size: 11px;

        letter-spacing: 2px;
    }

    #mfx-section-3 .mfx3-flow {
        width: 100%;

        gap: 5px;

        justify-content:
            space-between;
    }

    #mfx-section-3 .mfx3-flow-arrow {
        font-size: 20px;
    }

    #mfx-section-3 .mfx3-flow-item {
        min-width: 55px;
    }

    #mfx-section-3 .mfx3-flow-icon {
        width: 45px;
        height: 45px;
    }

    #mfx-section-3 .mfx3-flow-item strong {
        font-size: 9px;
    }

    #mfx-section-3 .mfx3-orbit-bg {
        opacity: .25;
    }

}


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

@media (max-width: 430px) {

    #mfx-section-3 .mfx3-header h2 {
        font-size: 34px;
    }

    #mfx-section-3 .mfx3-card {
        min-height: 300px;
    }

    #mfx-section-3 .mfx3-tags {
        flex-wrap: wrap;
    }

    #mfx-section-3 .mfx3-flow-arrow {
        display: none;
    }

    #mfx-section-3 .mfx3-flow-item {
        min-width: 50px;
    }

}


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

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

    #mfx-section-3 *,
    #mfx-section-3 *::before,
    #mfx-section-3 *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

        transition-duration: .01ms !important;
    }

}


#mfx-section-3 .mfx3-core {
    background:
        radial-gradient(
            circle at 35% 22%,
            #ffb05c 0%,
            #ff8a2b 28%,
            #ff7418 62%,
            #b83f00 100%
        );

    border-color:
        rgba(255, 180, 100, .95);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.42),

        0 0 0 8px
        rgba(255,116,24,.10),

        0 0 35px
        rgba(255,116,24,.85),

        0 0 100px
        rgba(255,116,24,.38);
}

/* =========================================================
   SECTION 3 — FINAL GROWTH CORE ORANGE POLISH
   ONLY MIDDLE GROWTH CORE
========================================================= */

#mfx-section-3 .mfx3-core {
    background:
        radial-gradient(
            circle at 35% 20%,
            #ffb45f 0%,
            #ff8a32 20%,
            #ff7418 48%,
            #d94d08 76%,
            #9f3506 100%
        );

    border:
        1px solid
        rgba(255, 190, 120, .95);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .48),

        inset 0 -20px 45px
        rgba(120, 30, 0, .20),

        0 0 0 8px
        rgba(255, 116, 24, .08),

        0 0 35px
        rgba(255, 116, 24, .72),

        0 0 85px
        rgba(255, 116, 24, .32);
}


/* inner orange glass ring */

#mfx-section-3 .mfx3-core::before {
    border:
        1px solid
        rgba(255, 214, 170, .58);

    box-shadow:
        inset 0 0 25px
        rgba(255, 175, 95, .28);
}


/* GROWTH text polish */

#mfx-section-3 .mfx3-core-content strong {
    color: #fff;

    text-shadow:
        0 0 10px
        rgba(255,255,255,.22),

        0 0 24px
        rgba(255, 210, 165, .18);
}


/* small text inside core */

#mfx-section-3 .mfx3-core-content > span {
    color:
        rgba(255, 238, 220, .92);

    text-shadow:
        0 0 12px
        rgba(255, 220, 190, .55);
}


#mfx-section-3 .mfx3-core-content small {
    color:
        rgba(255, 245, 235, .88);
}


/* center white button */

#mfx-section-3 .mfx3-core-button {
    color: #c84b08;

    box-shadow:
        0 0 20px
        rgba(255,255,255,.48),

        0 0 35px
        rgba(255, 145, 65, .48);
}


/* =========================================================
   FINAL ORANGE CORE HOVER
========================================================= */

#mfx-section-3 .mfx3-core-button:hover {
    box-shadow:
        0 0 25px
        rgba(255,255,255,.62),

        0 0 45px
        rgba(255, 116, 24, .58);
}


/* =========================================================
   ORANGE CORE SHINE
========================================================= */

#mfx-section-3 .mfx3-core-shine {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.26),
            rgba(255,220,185,.14),
            transparent
        );
}







/* =========================================================
   START SECTION 5 — SERVICES CSS
========================================================= */

.macro-services-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #ffffff;
    padding: 105px 0 95px;
    isolation: isolate;
}

.macro-services-section::before {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    left: -260px;
    top: 180px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(27, 101, 255, 0.055) 0%,
        rgba(27, 101, 255, 0.018) 42%,
        transparent 72%
    );
    pointer-events: none;
}

.macro-services-section::after {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -330px;
    bottom: -260px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(27, 101, 255, 0.045) 0%,
        transparent 68%
    );
    pointer-events: none;
}

.macro-services-container {
    position: relative;
    z-index: 2;
    width: min(1320px, calc(100% - 70px));
    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(430px, 0.88fr) minmax(620px, 1.12fr);
    gap: 70px;
    align-items: center;
}


/* -------------------------
   LEFT CONTENT
   ------------------------- */

.macro-services-intro {
    padding: 20px 0 15px;
}

.macro-services-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;

    color: #ff6517;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.macro-services-eyebrow i {
    display: block;
    width: 66px;
    height: 1px;
    background: linear-gradient(
        90deg,
        #ff6517,
        rgba(255, 101, 23, 0.15)
    );
}

.macro-services-eyebrow b {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ff6517;
}

.macro-services-title {
    margin: 0;
    color: #102654;

    font-size: clamp(48px, 4.4vw, 72px);
    line-height: 0.98;
    letter-spacing: -3.5px;
    font-weight: 800;
}

.macro-services-title span {
    color: #1769f5;
    position: relative;
}

.macro-services-title span::after {
    content: "";
    position: absolute;
    right: -12px;
    bottom: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff6517;
}

.macro-services-description {
    max-width: 575px;
    margin: 35px 0 34px;

    color: #52688f;
    font-size: 16px;
    line-height: 1.75;
    font-weight: 500;
}


/* -------------------------
   BENEFIT POINTS
   ------------------------- */

.macro-services-points {
    width: min(100%, 600px);
    border-top: 1px solid #e6edf7;
}

.macro-services-point {
    display: flex;
    align-items: center;
    gap: 14px;

    min-height: 44px;
    padding: 7px 0;

    border-bottom: 1px solid #e6edf7;

    color: #ff681c;
    font-size: 13px;
    font-weight: 500;
}

.macro-services-check {
    flex: 0 0 19px;

    width: 19px;
    height: 19px;

    display: grid;
    place-items: center;

    border: 1.5px solid #1769f5;
    border-radius: 50%;

    color: #1769f5;
    font-size: 11px;
    font-weight: 900;
}


/* -------------------------
   BUTTONS
   ------------------------- */

/* =========================================================
   MACRO SERVICES — ACTION BUTTONS
   ========================================================= */

.macro-services-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 35px;
}

.macro-services-btn {
    min-height: 55px;
    padding: 0 23px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 28px;

    border-radius: 8px;

    font-size: 13px;
    font-weight: 800;
    text-decoration: none;

    position: relative;
    overflow: hidden;
    z-index: 1;

    transition: all 0.3s ease-out;
}

.macro-services-btn span,
.macro-services-btn strong {
    position: relative;
    z-index: 3;
}

.macro-services-btn strong {
    font-size: 21px;
    line-height: 1;
}


/* =========================================================
   PRIMARY — BLUE BUTTON
   ========================================================= */

.macro-services-btn-primary {
    min-width: 235px;

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #1769f5,
        #0754dc
    );

    box-shadow:
        0 14px 30px rgba(23, 105, 245, 0.20);
}

.macro-services-btn-primary::after {
    content: "";

    position: absolute;
    top: 0;
    right: 0;

    width: 0;
    height: 100%;

    background: linear-gradient(
        135deg,
        #0754dc,
        #1769f5
    );

    border-radius: 8px;

    z-index: 2;

    visibility: hidden;
    opacity: 0;

    transition: all 0.3s ease-out;
}

.macro-services-btn-primary:hover {
    color: #ffffff;

    transform: translateY(-3px);

    box-shadow:
        0 18px 38px rgba(23, 105, 245, 0.28);
}

.macro-services-btn-primary:hover::after {
    width: 100%;

    visibility: visible;
    opacity: 1;
}


/* =========================================================
   OUTLINE — WHITE BUTTON
   ========================================================= */

.macro-services-btn-outline {
    min-width: 205px;

    color: #ff681c;

    background: #ffffff;

    border: 1px solid #7da8ff;

    box-shadow: none;
}

.macro-services-btn-outline::after {
    content: "";

    position: absolute;
    top: 0;
    right: 0;

    width: 0;
    height: 100%;

    background: #eef5ff;

    border-radius: 8px;

    z-index: 2;

    visibility: hidden;
    opacity: 0;

    transition: all 0.3s ease-out;
}

.macro-services-btn-outline:hover {
    color: #ff681c;

    background: #f1f6ff;

    border-color: #1769f5;

    transform: translateY(-3px);

    box-shadow:
        0 12px 28px rgba(23, 105, 245, 0.16);
}

.macro-services-btn-outline:hover::after {
    width: 100%;

    visibility: visible;
    opacity: 1;
}


/* -------------------------
   SERVICE GRID
   ------------------------- */

.macro-services-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}


/* -------------------------
   SERVICE CARD
   ------------------------- */

.macro-service-card {
    position: relative;
    min-height: 365px;
    padding: 25px 25px 23px;

    overflow: hidden;

    border: 1px solid #e5ebf5;
    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,1) 0%,
            rgba(250,252,255,0.96) 100%
        );

    box-shadow:
        0 12px 35px rgba(20, 52, 100, 0.055);

    transition:
        transform 0.35s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.macro-service-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 3px;

    background: var(--service-color);

    opacity: 0.95;

    transition:
        height 0.35s ease,
        box-shadow 0.35s ease;
}

.macro-service-card::after {
    content: "";
    position: absolute;

    width: 190px;
    height: 190px;

    right: -110px;
    top: -110px;

    border-radius: 50%;

    background: var(--service-glow);

    opacity: 0;
    transition: opacity 0.4s ease;
}

.macro-service-card:hover {
    transform: translateY(-8px);

    border-color: var(--service-border);

    box-shadow:
        0 24px 55px rgba(20, 52, 100, 0.13);
}

.macro-service-card:hover::before {
    height: 5px;
    box-shadow:
        0 0 20px var(--service-color);
}

.macro-service-card:hover::after {
    opacity: 1;
}


/* -------------------------
   CARD COLORS
   ------------------------- */

.macro-service-blue {
    --service-color: #1769f5;
    --service-glow: rgba(23, 105, 245, 0.11);
    --service-border: rgba(23, 105, 245, 0.32);
}

.macro-service-orange {
    --service-color: #ff681c;
    --service-glow: rgba(255, 104, 28, 0.11);
    --service-border: rgba(255, 104, 28, 0.32);
}

.macro-service-purple {
    --service-color: #7024e8;
    --service-glow: rgba(112, 36, 232, 0.11);
    --service-border: rgba(112, 36, 232, 0.30);
}

.macro-service-green {
    --service-color: #13b96d;
    --service-glow: rgba(19, 185, 109, 0.11);
    --service-border: rgba(19, 185, 109, 0.32);
}


/* -------------------------
   CARD TOP
   ------------------------- */

.macro-service-card-top {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.macro-service-icon {
    width: 81px;
    height: 81px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--service-color);

    box-shadow:
        0 13px 28px color-mix(
            in srgb,
            var(--service-color) 28%,
            transparent
        );

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.macro-service-card:hover .macro-service-icon {
    transform: scale(1.06) rotate(-3deg);

    box-shadow:
        0 17px 35px color-mix(
            in srgb,
            var(--service-color) 36%,
            transparent
        );
}

.macro-service-icon svg {
    width: 43px;
    height: 43px;

    fill: none;
    stroke: #ffffff;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.macro-service-icon text {
    fill: #ffffff;
    stroke: none;

    font-size: 13px;
    font-weight: 900;
}


/* -------------------------
   CARD ARROW
   ------------------------- */

.macro-service-arrow {
    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    border: 1px solid var(--service-color);
    border-radius: 50%;

    color: var(--service-color);

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

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.macro-service-card:hover .macro-service-arrow {
    color: #ffffff;
    background: var(--service-color);
    transform: translateX(3px);
}


/* -------------------------
   CARD CONTENT
   ------------------------- */

.macro-service-card h3 {
    position: relative;
    z-index: 2;

    margin: 18px 0 10px;

    color: #102654;

    font-size: 21px;
    line-height: 1.15;
    letter-spacing: -0.6px;
    font-weight: 800;
}

.macro-service-line {
    position: relative;
    z-index: 2;

    width: 36px;
    height: 2px;

    margin-bottom: 13px;

    background: var(--service-color);
}

.macro-service-card p {
    position: relative;
    z-index: 2;

    margin: 0 0 12px;

    color: #506589;

    font-size: 13px;
    line-height: 1.55;
    font-weight: 500;
}

.macro-service-card ul {
    position: relative;
    z-index: 2;

    list-style: none;

    margin: 0;
    padding: 0;
}

.macro-service-card li {
    display: flex;
    align-items: center;

    gap: 9px;

    margin: 6px 0;

    color: #192f59;

    font-size: 11.5px;
    line-height: 1.35;
    font-weight: 500;
}

.macro-service-card li::before {
    content: "✓";

    flex: 0 0 15px;

    width: 15px;
    height: 15px;

    display: grid;
    place-items: center;

    border: 1.5px solid var(--service-color);
    border-radius: 50%;

    color: var(--service-color);

    font-size: 8px;
    font-weight: 900;
}


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

@media (max-width: 1150px) {

    .macro-services-container {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .macro-services-intro {
        max-width: 760px;
    }

    .macro-services-grid {
        width: 100%;
    }
}


@media (max-width: 700px) {

    .macro-services-section {
        padding: 75px 0 70px;
    }

    .macro-services-container {
        width: min(100% - 32px, 560px);
        gap: 42px;
    }

    .macro-services-title {
        font-size: clamp(43px, 12vw, 60px);
        letter-spacing: -2.5px;
    }

    .macro-services-description {
        margin-top: 25px;
        font-size: 15px;
    }

    .macro-services-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .macro-service-card {
        min-height: auto;
        padding: 23px;
    }

    .macro-services-actions {
        flex-direction: column;
    }

    .macro-services-btn {
        width: 100%;
    }
}


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

    .macro-service-card,
    .macro-service-icon,
    .macro-service-arrow,
    .macro-services-btn {
        transition: none;
    }
}








/* =========================================================
   START SECTION 6 — WHY MACROFINET CSS
========================================================= */

#mfx-section-4.mfx4 {

    --mfx4-bg: #030615;
    --mfx4-bg2: #080d2c;

    --mfx4-blue: #182b78;
    --mfx4-electric: #526dff;
    --mfx4-electric2: #7890ff;

    --mfx4-orange: #ff7418;
    --mfx4-orange2: #ff9a45;

    --mfx4-white: #ffffff;
    --mfx4-text: rgba(255,255,255,.88);
    --mfx4-muted: rgba(255,255,255,.62);

    position: relative;

    width: 100%;

    min-height: 900px;

    overflow: hidden;

    isolation: isolate;

    color: var(--mfx4-white);

    background:
        radial-gradient(
            circle at 72% 45%,
            rgba(50,76,255,.13),
            transparent 32%
        ),
        radial-gradient(
            circle at 12% 80%,
            rgba(255,116,24,.08),
            transparent 24%
        ),
        linear-gradient(
            135deg,
            var(--mfx4-bg) 0%,
            var(--mfx4-bg2) 48%,
            #020411 100%
        );

    font-family:
        Inter,
        Poppins,
        Arial,
        sans-serif;
}


/* =========================================================
   BACKGROUND
========================================================= */

#mfx-section-4 .mfx4-bg {

    position: absolute;

    inset: 0;

    overflow: hidden;

    z-index: -10;

    pointer-events: none;
}


/* Grid */

#mfx-section-4 .mfx4-grid {

    position: absolute;

    inset: 0;

    opacity: .18;

    background-image:
        linear-gradient(
            rgba(82,109,255,.09) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(82,109,255,.09) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black 5%,
            transparent 82%
        );
}


/* Glows */

#mfx-section-4 .mfx4-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(70px);

    pointer-events: none;
}


#mfx-section-4 .mfx4-glow-blue {

    width: 650px;
    height: 650px;

    right: 8%;
    top: 25%;

    background:
        radial-gradient(
            circle,
            rgba(69,91,255,.14),
            transparent 68%
        );

    animation:
        mfx4BlueGlow
        8s
        ease-in-out
        infinite alternate;
}


#mfx-section-4 .mfx4-glow-orange {

    width: 430px;
    height: 430px;

    left: -160px;
    bottom: -150px;

    background:
        radial-gradient(
            circle,
            rgba(255,116,24,.10),
            transparent 68%
        );
}


@keyframes mfx4BlueGlow {

    from {
        transform: scale(.92);
        opacity: .65;
    }

    to {
        transform: scale(1.08);
        opacity: 1;
    }
}


/* Orbits */

#mfx-section-4 .mfx4-orbit {

    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(82,109,255,.09);
}


#mfx-section-4 .mfx4-orbit-1 {

    width: 720px;
    height: 720px;

    right: -210px;
    top: 50%;

    transform:
        translateY(-50%);
}


#mfx-section-4 .mfx4-orbit-2 {

    width: 1050px;
    height: 1050px;

    right: -375px;
    top: 50%;

    border-style: dashed;

    opacity: .35;

    animation:
        mfx4Orbit
        45s
        linear
        infinite;
}


@keyframes mfx4Orbit {

    to {
        transform:
            translateY(-50%)
            rotate(360deg);
    }
}


/* =========================================================
   CONTAINER
========================================================= */

#mfx-section-4 .mfx4-container {

    position: relative;

    width:
        min(
            1320px,
            calc(100% - 70px)
        );

    margin: 0 auto;

    padding:
        42px 0
        70px;
}


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

#mfx-section-4 .mfx4-label {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-bottom: 55px;

    color:
        rgba(255,255,255,.58);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 4px;
}


#mfx-section-4 .mfx4-label-line {

    width: 90px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--mfx4-electric)
        );
}


#mfx-section-4 .mfx4-label-line.reverse {

    background:
        linear-gradient(
            90deg,
            var(--mfx4-electric),
            transparent
        );
}


#mfx-section-4 .mfx4-label-dot {

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        var(--mfx4-orange);

    box-shadow:
        0 0 12px
        rgba(255,116,24,.7);
}


/* =========================================================
   MAIN GRID
========================================================= */

#mfx-section-4 .mfx4-main {

    display: grid;

    grid-template-columns:
        minmax(360px, .86fr)
        minmax(600px, 1.14fr);

    gap: 90px;

    align-items: center;
}


/* =========================================================
   INTRO
========================================================= */

#mfx-section-4 .mfx4-intro {

    position: relative;

    z-index: 3;
}


#mfx-section-4 .mfx4-kicker {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    color:
        var(--mfx4-orange);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 4px;

    margin-bottom: 18px;
}


#mfx-section-4 .mfx4-kicker::after {

    content: "";

    width: 65px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--mfx4-orange),
            transparent
        );
}


#mfx-section-4 .mfx4-intro h2 {

    margin: 0;

    max-width: 600px;

    font-size:
        clamp(
            52px,
            5vw,
            78px
        );

    line-height: .98;

    font-weight: 750;

    letter-spacing: -3.5px;

    color:
        var(--mfx4-white);

    text-shadow:
        0 12px 40px
        rgba(0,0,0,.35);
}


#mfx-section-4 .mfx4-intro h2 span {

    color:
        var(--mfx4-orange);

    text-shadow:
        0 0 30px
        rgba(255,116,24,.22);
}


#mfx-section-4 .mfx4-intro-text {

    max-width: 520px;

    margin:
        28px 0
        0;

    color:
        var(--mfx4-muted);

    font-size: 16px;

    line-height: 1.75;
}


/* =========================================================
   STATS
========================================================= */

#mfx-section-4 .mfx4-stats {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    max-width: 540px;

    margin-top: 40px;

    padding:
        20px 0;

    border-top:
        1px solid
        rgba(100,125,255,.18);

    border-bottom:
        1px solid
        rgba(100,125,255,.18);
}


#mfx-section-4 .mfx4-stat {

    position: relative;

    padding:
        0 20px;

    text-align: left;
}


#mfx-section-4 .mfx4-stat:first-child {

    padding-left: 0;
}


#mfx-section-4 .mfx4-stat + .mfx4-stat {

    border-left:
        1px solid
        rgba(100,125,255,.18);
}


#mfx-section-4 .mfx4-stat strong {

    display: block;

    color:
        var(--mfx4-electric2);

    font-size: 32px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: -1px;

    text-shadow:
        0 0 20px
        rgba(82,109,255,.25);
}


#mfx-section-4 .mfx4-stat strong::after {

    content: "+";
}


#mfx-section-4 .mfx4-stat:nth-child(2) strong::after {

    content: "X+";
}


#mfx-section-4 .mfx4-stat:nth-child(3) strong::after {

    content: "%";
}


#mfx-section-4 .mfx4-stat span {

    display: block;

    margin-top: 9px;

    color:
        rgba(255,255,255,.58);

    font-size: 11px;

    line-height: 1.45;

    text-transform: uppercase;

    letter-spacing: .8px;
}


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

#mfx-section-4 .mfx4-cta {

    display: inline-flex;

    align-items: center;

    gap: 18px;

    margin-top: 34px;

    padding:
        6px
        7px
        6px
        23px;

    border:
        1px solid
        rgba(255,116,24,.75);

    border-radius: 999px;

    color:
        #fff;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .2px;

    background:
        rgba(255,116,24,.045);

    box-shadow:
        0 0 25px
        rgba(255,116,24,.08);

    transition:
        background .35s ease,
        box-shadow .35s ease,
        transform .35s ease;
}


#mfx-section-4 .mfx4-cta-arrow {

    display: flex;

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

    width: 40px;
    height: 40px;

    border-radius: 50%;

    background:
        var(--mfx4-orange);

    color: #fff;

    font-size: 20px;

    box-shadow:
        0 0 20px
        rgba(255,116,24,.45);

    transition:
        transform .35s ease;
}


#mfx-section-4 .mfx4-cta:hover {

    background:
        rgba(255,116,24,.10);

    box-shadow:
        0 0 35px
        rgba(255,116,24,.16);

    transform:
        translateY(-3px);
}


#mfx-section-4 .mfx4-cta:hover .mfx4-cta-arrow {

    transform:
        rotate(10deg)
        scale(1.08);
}


/* =========================================================
   BENEFITS
========================================================= */

#mfx-section-4 .mfx4-benefits {

    position: relative;

    display: flex;

    flex-direction: column;

    gap: 18px;

    padding-left: 40px;
}


/* connector */

#mfx-section-4 .mfx4-connector {

    position: absolute;

    left: 5px;
    top: 35px;
    bottom: 35px;

    width: 2px;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(82,109,255,.7) 0,
            rgba(82,109,255,.7) 5px,
            transparent 5px,
            transparent 12px
        );

    opacity: .5;
}


#mfx-section-4 .mfx4-connector-dot {

    position: absolute;

    left: 50%;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    transform:
        translateX(-50%);

    border:
        2px solid
        var(--mfx4-bg);

    box-shadow:
        0 0 15px
        currentColor;
}


#mfx-section-4 .mfx4-connector-dot:nth-child(1) {

    top: 0;

    color:
        var(--mfx4-electric);

    background:
        var(--mfx4-electric);
}


#mfx-section-4 .mfx4-connector-dot:nth-child(2) {

    top: 33.33%;

    color:
        var(--mfx4-orange);

    background:
        var(--mfx4-orange);
}


#mfx-section-4 .mfx4-connector-dot:nth-child(3) {

    top: 66.66%;

    color:
        var(--mfx4-electric);

    background:
        var(--mfx4-electric);
}


#mfx-section-4 .mfx4-connector-dot:nth-child(4) {

    bottom: 0;

    color:
        var(--mfx4-orange);

    background:
        var(--mfx4-orange);
}


/* Cards */

#mfx-section-4 .mfx4-card {

    position: relative;

    min-height: 145px;

    display: grid;

    grid-template-columns:
        112px
        1fr
        70px;

    align-items: center;

    gap: 25px;

    padding:
        22px 27px;

    border:
        1px solid
        rgba(92,115,255,.26);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(22,32,88,.72),
            rgba(6,10,37,.88)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.07),

        0 18px 45px
        rgba(0,0,0,.24),

        0 0 25px
        rgba(55,80,220,.04);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    overflow: hidden;

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        border-color .35s ease,
        box-shadow .35s ease;
}


#mfx-section-4 .mfx4-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 3px;
    height: 100%;

    background:
        var(--mfx4-electric);

    box-shadow:
        0 0 18px
        rgba(82,109,255,.6);
}


#mfx-section-4 .mfx4-card.orange-card::before {

    background:
        var(--mfx4-orange);

    box-shadow:
        0 0 18px
        rgba(255,116,24,.6);
}


#mfx-section-4 .mfx4-card:hover {

    transform:
        translateX(7px);

    border-color:
        rgba(100,125,255,.55);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.10),

        0 25px 55px
        rgba(0,0,0,.38),

        0 0 35px
        rgba(70,95,255,.10);
}


/* Card icon */

#mfx-section-4 .mfx4-card-icon {

    width: 82px;
    height: 82px;

    display: flex;

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

    border-radius: 50%;

    font-size: 34px;

    background:
        rgba(82,109,255,.10);

    border:
        1px solid
        rgba(82,109,255,.65);

    color:
        var(--mfx4-electric2);

    box-shadow:
        inset 0 0 20px
        rgba(82,109,255,.08),

        0 0 25px
        rgba(82,109,255,.12);

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


#mfx-section-4 .mfx4-card-icon.orange {

    background:
        rgba(255,116,24,.08);

    border-color:
        rgba(255,116,24,.7);

    color:
        var(--mfx4-orange);

    box-shadow:
        inset 0 0 20px
        rgba(255,116,24,.08),

        0 0 25px
        rgba(255,116,24,.12);
}


#mfx-section-4 .mfx4-card:hover .mfx4-card-icon {

    transform:
        scale(1.06);

    box-shadow:
        0 0 35px
        rgba(82,109,255,.22);
}


#mfx-section-4 .mfx4-card:hover .mfx4-card-icon.orange {

    box-shadow:
        0 0 35px
        rgba(255,116,24,.22);
}


/* Icon characters */

#mfx-section-4 .mfx4-target-icon,
#mfx-section-4 .mfx4-brain-icon,
#mfx-section-4 .mfx4-growth-icon,
#mfx-section-4 .mfx4-performance-icon {

    display: block;

    line-height: 1;
}


#mfx-section-4 .mfx4-growth-icon {

    font-size: 42px;
}


/* Card content */

#mfx-section-4 .mfx4-card-content {

    min-width: 0;
}


#mfx-section-4 .mfx4-card-title {

    display: flex;

    align-items: center;

    gap: 14px;
}


#mfx-section-4 .mfx4-card-title h3 {

    margin: 0;

    color:
        #fff;

    font-size: 21px;

    line-height: 1.2;

    font-weight: 750;

    letter-spacing: -.5px;
}


#mfx-section-4 .mfx4-card-title span {

    width: 45px;

    height: 2px;

    background:
        var(--mfx4-electric);
}


#mfx-section-4 .mfx4-card.orange-card
.mfx4-card-title span {

    background:
        var(--mfx4-orange);
}


#mfx-section-4 .mfx4-card-content p {

    margin:
        12px 0 0;

    max-width: 520px;

    color:
        rgba(255,255,255,.58);

    font-size: 13.5px;

    line-height: 1.65;
}


/* Number */

#mfx-section-4 .mfx4-card-number {

    align-self: center;

    color:
        rgba(82,109,255,.18);

    font-size: 52px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: -3px;

    text-align: right;

    transition:
        color .35s ease;
}


#mfx-section-4 .mfx4-card.orange-card
.mfx4-card-number {

    color:
        rgba(255,116,24,.14);
}


#mfx-section-4 .mfx4-card:hover
.mfx4-card-number {

    color:
        rgba(82,109,255,.34);
}


#mfx-section-4 .mfx4-card.orange-card:hover
.mfx4-card-number {

    color:
        rgba(255,116,24,.28);
}


/* =========================================================
   TRUST BAR
========================================================= */

#mfx-section-4 .mfx4-trust {

    margin-top: 55px;

    min-height: 74px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 28px;

    padding:
        12px 30px;

    border:
        1px solid
        rgba(92,115,255,.22);

    border-radius: 18px;

    background:
        rgba(7,12,43,.58);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.06),

        0 15px 40px
        rgba(0,0,0,.18);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}


#mfx-section-4 .mfx4-trust-item {

    display: flex;

    align-items: center;

    gap: 10px;

    color:
        rgba(255,255,255,.72);

    font-size: 12px;

    letter-spacing: .3px;
}


#mfx-section-4 .mfx4-trust-icon {

    width: 25px;
    height: 25px;

    display: flex;

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

    border-radius: 50%;

    border:
        1px solid
        currentColor;

    font-size: 12px;

    font-weight: 800;
}


#mfx-section-4 .mfx4-trust-icon.blue {

    color:
        var(--mfx4-electric);
}


#mfx-section-4 .mfx4-trust-icon.orange {

    color:
        var(--mfx4-orange);
}


#mfx-section-4 .mfx4-trust-separator {

    width: 1px;

    height: 25px;

    background:
        rgba(100,125,255,.18);
}


/* =========================================================
   BOTTOM WAVE
========================================================= */

#mfx-section-4 .mfx4-bottom-wave {

    position: relative;

    height: 90px;

    margin-top: 25px;

    overflow: hidden;

    opacity: .65;
}


#mfx-section-4 .mfx4-bottom-wave::before,
#mfx-section-4 .mfx4-bottom-wave::after {

    content: "";

    position: absolute;

    left: -5%;
    width: 110%;

    height: 70px;

    border-radius: 50%;

    border-top:
        1px solid
        rgba(82,109,255,.35);

    transform:
        rotate(-2deg);
}


#mfx-section-4 .mfx4-bottom-wave::before {

    top: 30px;

    box-shadow:
        0 -10px 0
        rgba(82,109,255,.07),

        0 -20px 0
        rgba(82,109,255,.04);
}


#mfx-section-4 .mfx4-bottom-wave::after {

    top: 47px;

    border-color:
        rgba(255,116,24,.38);

    transform:
        rotate(2deg);
}


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

@media (max-width: 1100px) {

    #mfx-section-4 .mfx4-container {

        width:
            min(
                calc(100% - 40px),
                920px
            );
    }

    #mfx-section-4 .mfx4-main {

        grid-template-columns:
            1fr;

        gap: 55px;
    }

    #mfx-section-4 .mfx4-intro {

        max-width: 760px;

        margin: 0 auto;

        text-align: center;
    }

    #mfx-section-4 .mfx4-intro h2,
    #mfx-section-4 .mfx4-intro-text {

        margin-left: auto;
        margin-right: auto;
    }

    #mfx-section-4 .mfx4-kicker {

        justify-content: center;
    }

    #mfx-section-4 .mfx4-stats {

        margin-left: auto;
        margin-right: auto;

        text-align: left;
    }

    #mfx-section-4 .mfx4-benefits {

        padding-left: 30px;
    }

    #mfx-section-4 .mfx4-connector {

        left: 0;
    }
}


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

@media (max-width: 760px) {

    #mfx-section-4.mfx4 {

        min-height: auto;
    }

    #mfx-section-4 .mfx4-container {

        width:
            calc(100% - 28px);

        padding:
            35px 0
            45px;
    }

    #mfx-section-4 .mfx4-label {

        margin-bottom: 38px;

        font-size: 9px;

        letter-spacing: 3px;
    }

    #mfx-section-4 .mfx4-label-line {

        width: 35px;
    }

    #mfx-section-4 .mfx4-main {

        gap: 42px;
    }

    #mfx-section-4 .mfx4-intro {

        text-align: left;
    }

    #mfx-section-4 .mfx4-kicker {

        justify-content: flex-start;

        font-size: 11px;

        letter-spacing: 3px;
    }

    #mfx-section-4 .mfx4-intro h2 {

        font-size:
            clamp(
                42px,
                12vw,
                58px
            );

        letter-spacing: -2.4px;
    }

    #mfx-section-4 .mfx4-intro-text {

        font-size: 14px;

        line-height: 1.65;

        margin-top: 22px;
    }

    #mfx-section-4 .mfx4-stats {

        margin-top: 30px;

        width: 100%;
    }

    #mfx-section-4 .mfx4-stat {

        padding:
            0 10px;
    }

    #mfx-section-4 .mfx4-stat:first-child {

        padding-left: 0;
    }

    #mfx-section-4 .mfx4-stat strong {

        font-size: 25px;
    }

    #mfx-section-4 .mfx4-stat span {

        font-size: 9px;
    }

    #mfx-section-4 .mfx4-cta {

        font-size: 12px;

        padding-left: 17px;
    }

    #mfx-section-4 .mfx4-cta-arrow {

        width: 36px;
        height: 36px;
    }

    #mfx-section-4 .mfx4-benefits {

        gap: 14px;

        padding-left: 0;
    }

    #mfx-section-4 .mfx4-connector {

        display: none;
    }

    #mfx-section-4 .mfx4-card {

        min-height: auto;

        grid-template-columns:
            65px
            1fr;

        gap: 18px;

        padding:
            20px;

        border-radius: 18px;
    }

    #mfx-section-4 .mfx4-card-icon {

        width: 62px;
        height: 62px;

        font-size: 26px;
    }

    #mfx-section-4 .mfx4-card-content {

        grid-column: 2;
    }

    #mfx-section-4 .mfx4-card-title h3 {

        font-size: 17px;
    }

    #mfx-section-4 .mfx4-card-title span {

        display: none;
    }

    #mfx-section-4 .mfx4-card-content p {

        margin-top: 9px;

        font-size: 12px;

        line-height: 1.55;
    }

    #mfx-section-4 .mfx4-card-number {

        position: absolute;

        right: 17px;
        top: 15px;

        font-size: 36px;
    }

    #mfx-section-4 .mfx4-trust {

        margin-top: 35px;

        flex-direction: column;

        gap: 13px;

        padding: 20px;

        align-items: flex-start;
    }

    #mfx-section-4 .mfx4-trust-separator {

        display: none;
    }

    #mfx-section-4 .mfx4-bottom-wave {

        height: 55px;
    }
}


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

@media (max-width: 430px) {

    #mfx-section-4 .mfx4-intro h2 {

        font-size: 38px;

        letter-spacing: -1.8px;
    }

    #mfx-section-4 .mfx4-stats {

        gap: 0;
    }

    #mfx-section-4 .mfx4-stat strong {

        font-size: 22px;
    }

    #mfx-section-4 .mfx4-card {

        grid-template-columns:
            58px
            1fr;

        padding: 17px;
    }

    #mfx-section-4 .mfx4-card-icon {

        width: 55px;
        height: 55px;
    }

    #mfx-section-4 .mfx4-card-content p {

        font-size: 11.5px;
    }
}


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

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

    #mfx-section-4 *,
    #mfx-section-4 *::before,
    #mfx-section-4 *::after {

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;
    }
}

/* =========================================================
   FINAL MICRO POLISH
   ORIGINAL DESIGN LOCKED
   BLUE + BLACK + ORANGE
========================================================= */

/* ---------- Background depth ---------- */

#mfx-section-4.mfx4 {
    background:
        radial-gradient(
            circle at 72% 45%,
            rgba(62, 88, 255, .15),
            transparent 32%
        ),
        radial-gradient(
            circle at 12% 80%,
            rgba(255, 116, 24, .075),
            transparent 24%
        ),
        linear-gradient(
            135deg,
            #030615 0%,
            #080d2c 48%,
            #020411 100%
        );
}


/* ---------- Grid refinement ---------- */

#mfx-section-4 .mfx4-grid {
    opacity: .15;
}


/* ---------- Blue glow: slightly cleaner ---------- */

#mfx-section-4 .mfx4-glow-blue {
    opacity: .82;
}


/* ---------- Orange glow: subtle ---------- */

#mfx-section-4 .mfx4-glow-orange {
    opacity: .78;
}


/* ---------- Main heading polish ---------- */

#mfx-section-4 .mfx4-intro h2 {
    text-shadow:
        0 12px 42px rgba(0, 0, 0, .38);
}


/* ---------- Orange heading accent ---------- */

#mfx-section-4 .mfx4-intro h2 span {
    text-shadow:
        0 0 32px rgba(255, 116, 24, .24);
}


/* ---------- Stats polish ---------- */

#mfx-section-4 .mfx4-stat strong {
    text-shadow:
        0 0 24px rgba(82, 109, 255, .30);
}


/* =========================================================
   CARDS — SAME SIZE / SAME LAYOUT
   ONLY VISUAL FINISHING
========================================================= */

#mfx-section-4 .mfx4-card {

    border-color:
        rgba(92, 115, 255, .30);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .075),

        0 18px 45px
        rgba(0, 0, 0, .26),

        0 0 28px
        rgba(55, 80, 220, .055);

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        border-color .35s ease,
        box-shadow .35s ease;
}


/* Blue card edge */

#mfx-section-4 .mfx4-card::before {

    width: 3px;

    box-shadow:
        0 0 20px
        rgba(82, 109, 255, .68);
}


/* Orange card edge */

#mfx-section-4 .mfx4-card.orange-card::before {

    box-shadow:
        0 0 20px
        rgba(255, 116, 24, .68);
}


/* Card hover — very subtle */

#mfx-section-4 .mfx4-card:hover {

    transform:
        translateX(6px);

    border-color:
        rgba(105, 126, 255, .52);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .10),

        0 24px 55px
        rgba(0, 0, 0, .34),

        0 0 38px
        rgba(70, 95, 255, .11);
}


/* =========================================================
   ICONS
========================================================= */

#mfx-section-4 .mfx4-card-icon {

    box-shadow:
        inset 0 0 20px
        rgba(82, 109, 255, .10),

        0 0 28px
        rgba(82, 109, 255, .14);
}


#mfx-section-4 .mfx4-card-icon.orange {

    box-shadow:
        inset 0 0 20px
        rgba(255, 116, 24, .10),

        0 0 28px
        rgba(255, 116, 24, .14);
}


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

#mfx-section-4 .mfx4-card-title h3 {

    text-shadow:
        0 3px 18px
        rgba(0, 0, 0, .18);
}


/* =========================================================
   NUMBER — PREMIUM LOW-CONTRAST
========================================================= */

#mfx-section-4 .mfx4-card-number {
    color:
        rgba(82, 109, 255, .20);
}

#mfx-section-4 .mfx4-card.orange-card
.mfx4-card-number {
    color:
        rgba(255, 116, 24, .17);
}


/* =========================================================
   TRUST BAR
========================================================= */

#mfx-section-4 .mfx4-trust {

    border-color:
        rgba(92, 115, 255, .26);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .065),

        0 16px 42px
        rgba(0, 0, 0, .22);
}


/* =========================================================
   BOTTOM WAVE — CLEANER FINISH
========================================================= */

#mfx-section-4 .mfx4-bottom-wave {
    opacity: .58;
}


/* =========================================================
   MOBILE — DO NOT CHANGE LAYOUT
========================================================= */

@media (max-width: 760px) {

    #mfx-section-4 .mfx4-card:hover {
        transform: translateY(-2px);
    }

    #mfx-section-4 .mfx4-card {
        box-shadow:
            inset 0 1px 0
            rgba(255,255,255,.07),

            0 14px 34px
            rgba(0,0,0,.24);
    }
}










/* =========================================================
   START SECTION 7 — OUR WORKFLOW CSS
========================================================= */

#mfx-section-6,
.mfx6-section {
    --mfx6-navy: #071743;
    --mfx6-blue: #1767ff;
    --mfx6-blue-2: #2d8cff;
    --mfx6-orange: #ff6b16;
    --mfx6-orange-2: #ff9b35;

    position: relative;
    width: 100%;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(220, 235, 255, .45),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fafdff 48%,
            #f3f8ff 100%
        );

    color: var(--mfx6-navy);
    isolation: isolate;
}


/* =========================================================
   BACKGROUND
========================================================= */

.mfx6-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.mfx6-grid {
    position: absolute;
    top: 0;
    right: -8%;
    width: 48%;
    height: 43%;

    opacity: .24;

    background-image:
        linear-gradient(
            rgba(53, 119, 255, .14) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(53, 119, 255, .14) 1px,
            transparent 1px
        );

    background-size: 34px 34px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black 0%,
            transparent 72%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            black 0%,
            transparent 72%
        );
}


/* diagonal upper-left decoration */

.mfx6-diagonal {
    position: absolute;
    height: 3px;
    width: 340px;

    transform: rotate(-34deg);
    transform-origin: left center;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(31, 115, 255, .65),
        rgba(31, 115, 255, .08)
    );

    filter: blur(.2px);
}

.mfx6-diagonal-1 {
    left: -40px;
    top: 85px;
}

.mfx6-diagonal-2 {
    left: -55px;
    top: 125px;
    opacity: .55;
}

.mfx6-diagonal-3 {
    left: -75px;
    top: 165px;
    opacity: .28;
}


/* =========================================================
   CSS GLOBE
========================================================= */

.mfx6-globe {
    position: absolute;

    width: 390px;
    height: 390px;

    top: -115px;
    right: -70px;

    opacity: .36;

    filter:
        drop-shadow(
            0 0 20px rgba(41, 113, 255, .25)
        );
}

.mfx6-globe-core {
    position: absolute;
    inset: 42px;

    border-radius: 50%;

    border:
        1px solid rgba(50, 123, 255, .38);

    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(255,255,255,.9),
            rgba(130, 180, 255, .25) 38%,
            rgba(25, 91, 220, .09) 68%,
            transparent 72%
        );

    box-shadow:
        inset 0 0 35px rgba(50, 125, 255, .2),
        0 0 40px rgba(50, 125, 255, .14);

    overflow: hidden;
}

.mfx6-globe-core::before {
    content: "";
    position: absolute;
    inset: 7px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            transparent 58%,
            rgba(47, 120, 255, .18) 59%,
            transparent 60%
        );
}

.mfx6-globe-lat,
.mfx6-globe-long {
    position: absolute;
    display: block;

    border: 1px solid rgba(40, 110, 255, .32);
}

.mfx6-globe-lat {
    left: 5%;
    right: 5%;
    height: 42px;

    border-radius: 50%;
}

.lat-1 {
    top: 24%;
}

.lat-2 {
    top: 39%;
}

.lat-3 {
    top: 54%;
}

.lat-4 {
    top: 69%;
}

.mfx6-globe-long {
    top: 2%;
    bottom: 2%;
    width: 110px;

    border-radius: 50%;
}

.long-1 {
    left: 17%;
    transform: rotate(18deg);
}

.long-2 {
    left: 36%;
}

.long-3 {
    left: 55%;
    transform: rotate(-18deg);
}

.mfx6-globe-orbit {
    position: absolute;

    left: 0;
    top: 110px;

    width: 390px;
    height: 110px;

    border:
        1px solid rgba(40, 110, 255, .32);

    border-radius: 50%;

    transform: rotate(-18deg);
}

.orbit-b {
    transform: rotate(24deg);
    opacity: .55;
}

.mfx6-globe-dot {
    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #2e82ff;

    box-shadow:
        0 0 10px rgba(46, 130, 255, .9);
}

.dot-1 {
    left: 23%;
    top: 30%;
}

.dot-2 {
    left: 69%;
    top: 42%;
}

.dot-3 {
    left: 42%;
    top: 72%;
}

.dot-4 {
    left: 77%;
    top: 64%;
}


/* =========================================================
   CONTAINER
========================================================= */

.mfx6-container {
    width: min(100% - 48px, 1320px);
    margin-inline: auto;

    padding:
        30px 0 38px;
}


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

.mfx6-header {
    position: relative;
    text-align: center;
    z-index: 2;
}

.mfx6-kicker {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 28px;

    margin-bottom: 14px;

    color: var(--mfx6-navy);

    font-size: 14px;
    font-weight: 700;
    letter-spacing: .30em;
}

.mfx6-kicker span {
    width: 82px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #2b83ff
        );
}

.mfx6-kicker span:last-child {
    background:
        linear-gradient(
            90deg,
            #ff7520,
            transparent
        );
}

.mfx6-header h2 {
    margin: 0;

    font-size: clamp(48px, 5.35vw, 78px);
    line-height: .98;

    font-weight: 800;
    letter-spacing: -.045em;

    color: var(--mfx6-navy);
}

.mfx6-header h2 em {
    font-style: italic;
    font-weight: 500;
    margin: 0 7px;
}

.mfx6-header h2 strong {
    color: #1768ff;
    font-weight: 800;
}

.mfx6-title-line {
    width: 205px;
    height: 4px;

    margin:
        4px 0 12px auto;

    margin-right: 15%;

    border-radius: 50%;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ff6d18
        );

    transform: rotate(-2deg);
}

.mfx6-header p {
    margin: 0;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: .29em;

    color: #41557f;
}


/* =========================================================
   WORKFLOW
========================================================= */

.mfx6-workflow {
    position: relative;

    margin-top: 42px;
}


/* wave */

.mfx6-wave {
    position: absolute;

    left: -85px;
    right: -85px;

    top: 0;

    height: 165px;

    z-index: 0;

    pointer-events: none;
}

.mfx6-wave svg {
    display: block;

    width: 100%;
    height: 100%;
}

.mfx6-wave-main {
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mfx6-wave-glow {
    opacity: .65;
}


/* =========================================================
   FIVE STEPS
========================================================= */

.mfx6-steps {
    position: relative;
    z-index: 2;

    display: grid;

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

    column-gap: 36px;

    align-items: start;

    padding-top: 52px;
}


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

.mfx6-step {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    min-width: 0;
}


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

.mfx6-number {
    position: relative;

    width: 76px;
    height: 76px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #4a9cff 0%,
            #1262e9 38%,
            #07358f 72%,
            #061e68 100%
        );

    border:
        3px solid rgba(255,255,255,.95);

    box-shadow:
        0 0 0 3px rgba(78, 145, 255, .18),
        0 0 0 7px rgba(78, 145, 255, .10),
        0 0 22px rgba(28, 108, 255, .45),
        inset 0 0 15px rgba(255,255,255,.24);

    z-index: 4;
}

.mfx6-number::before,
.mfx6-number::after {
    content: "";

    position: absolute;

    inset: -9px;

    border-radius: 50%;

    border:
        1px solid rgba(69, 132, 255, .40);
}

.mfx6-number::after {
    inset: -14px;

    border-color:
        rgba(93, 157, 255, .16);
}

.mfx6-number span {
    position: relative;

    color: white;

    font-size: 27px;
    font-weight: 800;

    letter-spacing: -.03em;
}

.mfx6-step-final .mfx6-number {
    background:
        radial-gradient(
            circle at 35% 30%,
            #ffae5b,
            #ff7c24 40%,
            #ed4e09 72%,
            #b52b00 100%
        );

    box-shadow:
        0 0 0 3px rgba(255, 137, 54, .20),
        0 0 0 7px rgba(255, 137, 54, .10),
        0 0 24px rgba(255, 112, 31, .42),
        inset 0 0 15px rgba(255,255,255,.22);
}

.mfx6-step-final .mfx6-number::before {
    border-color:
        rgba(255, 144, 68, .45);
}


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

.mfx6-step-label {
    position: relative;

    margin-top: 10px;

    padding:
        7px 21px;

    min-width: 108px;

    text-align: center;

    border-radius: 999px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #0b3f9f,
            #09286f
        );

    box-shadow:
        0 8px 18px rgba(8, 47, 126, .20);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;

    z-index: 3;
}

.mfx6-step-final .mfx6-step-label {
    background:
        linear-gradient(
            135deg,
            #102b70,
            #071744
        );
}


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

.mfx6-card {
    position: relative;

    width: 100%;

    min-height: 325px;

    margin-top: 14px;

    padding:
        22px 22px 20px;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    border-radius: 17px;

    border:
        1px solid rgba(85, 145, 255, .34);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(246,250,255,.88)
        );

    box-shadow:
        0 18px 42px rgba(42, 91, 170, .10),
        0 3px 10px rgba(56, 111, 203, .06),
        inset 0 1px 0 rgba(255,255,255,.95);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    transition:
        transform .45s cubic-bezier(.2,.75,.2,1),
        box-shadow .45s ease,
        border-color .45s ease;
}

.mfx6-card::before {
    content: "";

    position: absolute;

    inset: 1px;

    border-radius: 16px;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.65),
            transparent 38%,
            rgba(82,143,255,.05)
        );
}

.mfx6-card:hover {
    transform: translateY(-8px);

    border-color:
        rgba(50, 123, 255, .56);

    box-shadow:
        0 28px 58px rgba(36, 91, 175, .16),
        0 0 25px rgba(48, 125, 255, .09),
        inset 0 1px 0 rgba(255,255,255,1);
}


/* orange fifth */

.mfx6-step-final .mfx6-card {
    border-color:
        rgba(255, 151, 81, .42);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.97),
            rgba(255,249,245,.94)
        );
}


/* =========================================================
   ICON
========================================================= */

.mfx6-icon-wrap {
    position: relative;

    width: 108px;
    height: 108px;

    margin-bottom: 11px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    border:
        1px solid rgba(59, 124, 255, .25);

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.98) 0%,
            rgba(235,244,255,.95) 56%,
            rgba(215,231,255,.62) 100%
        );

    box-shadow:
        0 12px 28px rgba(42, 107, 231, .10),
        inset 0 0 20px rgba(91, 148, 255, .08);
}

.mfx6-icon-wrap::before {
    content: "";

    position: absolute;

    inset: -5px;

    border-radius: 50%;

    border:
        1px solid rgba(64, 129, 255, .17);
}

.mfx6-icon-wrap::after {
    content: "";

    position: absolute;

    width: 52px;
    height: 17px;

    bottom: 11px;
    left: 50%;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(75, 137, 255, .17),
            transparent 72%
        );

    filter: blur(4px);
}

.mfx6-icon-wrap img {
    position: relative;

    width: 84px;
    height: 84px;

    object-fit: contain;

    z-index: 2;

    filter:
        drop-shadow(
            0 8px 10px rgba(30, 82, 180, .12)
        );

    transition:
        transform .45s cubic-bezier(.2,.75,.2,1);
}

.mfx6-card:hover .mfx6-icon-wrap img {
    transform: scale(1.08) translateY(-2px);
}

.mfx6-step-final .mfx6-icon-wrap {
    border-color:
        rgba(255, 145, 65, .25);

    background:
        radial-gradient(
            circle,
            #fff 0%,
            #fff7ef 62%,
            #fff0df 100%
        );
}


/* =========================================================
   CARD TYPOGRAPHY
========================================================= */

.mfx6-card h3 {
    position: relative;

    margin:
        3px 0 13px;

    color: var(--mfx6-navy);

    font-size: 17px;
    line-height: 1.12;

    font-weight: 800;

    letter-spacing: -.025em;
}

.mfx6-card p {
    position: relative;

    min-height: 63px;

    margin: 0;

    color: #536588;

    font-size: 12.5px;
    line-height: 1.48;

    font-weight: 500;
}

.mfx6-card-divider {
    width: 100%;

    height: 1px;

    margin:
        11px 0 9px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(53, 113, 236, .22),
            transparent
        );

    position: relative;
}

.mfx6-card-divider::after {
    content: "";

    position: absolute;

    width: 27px;
    height: 2px;

    left: 50%;
    top: -1px;

    transform: translateX(-50%);

    border-radius: 4px;

    background: #1e6dff;
}

.mfx6-step-final
.mfx6-card-divider::after {
    background: #ff711e;
}


/* =========================================================
   LIST
========================================================= */

.mfx6-card ul {
    width: 100%;

    margin: 0;
    padding: 0;

    list-style: none;

    text-align: left;
}

.mfx6-card li {
    position: relative;

    padding-left: 23px;

    margin: 7px 0;

    color: #122453;

    font-size: 11.5px;
    line-height: 1.25;

    font-weight: 650;
}

.mfx6-card li::before {
    content: "✓";

    position: absolute;

    left: 0;
    top: -1px;

    width: 15px;
    height: 15px;

    display: grid;
    place-items: center;

    border:
        1.5px solid #2876ff;

    border-radius: 50%;

    color: #1767ff;

    font-size: 9px;
    font-weight: 900;
}


/* =========================================================
   STATS
========================================================= */

.mfx6-stats {
    position: relative;

    width: min(100%, 1110px);

    min-height: 86px;

    margin:
        42px auto 0;

    padding:
        13px 35px;

    display: grid;

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

    align-items: center;

    border-radius: 999px;

    border:
        1px solid rgba(68, 132, 255, .30);

    background:
        linear-gradient(
            100deg,
            rgba(255,255,255,.97),
            rgba(249,252,255,.94)
        );

    box-shadow:
        0 17px 38px rgba(35, 87, 171, .12),
        inset 0 1px 0 rgba(255,255,255,1);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.mfx6-stat {
    min-width: 0;

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

    gap: 15px;

    padding: 0 20px;

    position: relative;
}

.mfx6-stat:not(:last-child)::after {
    content: "";

    position: absolute;

    right: 0;

    top: 10px;
    bottom: 10px;

    width: 1px;

    background:
        linear-gradient(
            transparent,
            rgba(69, 126, 229, .25),
            transparent
        );
}

.mfx6-stat-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: grid;
    place-items: center;
}

.mfx6-stat-icon svg {
    width: 43px;
    height: 43px;

    fill: none;

    stroke: #1768ff;

    stroke-width: 2.2;

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

.mfx6-stat:first-child
.mfx6-stat-icon svg path:first-of-type {
    stroke: #ff6d19;
}

.mfx6-stat strong {
    display: block;

    color: #0b1c49;

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

    font-weight: 800;

    letter-spacing: -.045em;
}

.mfx6-stat span {
    display: block;

    margin-top: 4px;

    color: #182b57;

    font-size: 10px;

    font-weight: 600;
}


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

.mfx6-bottom {
    margin-top: 29px;

    text-align: center;
}

.mfx6-bottom-process {
    display: flex;

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

    gap: 18px;

    color: #ff6d17;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .32em;
}

.mfx6-bottom-process i {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #ff721c;
}

.mfx6-bottom-line {
    display: flex;

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

    gap: 22px;

    margin-top: 17px;
}

.mfx6-bottom-line > span {
    width: 75px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #2b83ff
        );
}

.mfx6-bottom-line > span:last-child {
    background:
        linear-gradient(
            90deg,
            #2b83ff,
            transparent
        );
}

.mfx6-bottom-line div {
    padding:
        12px 34px;

    border-radius: 999px;

    color: #112653;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .25em;

    background:
        linear-gradient(
            100deg,
            rgba(211,232,255,.92),
            rgba(255,242,229,.94)
        );

    box-shadow:
        0 10px 26px rgba(66, 111, 188, .11);
}


/* =========================================================
   REVEAL
========================================================= */

.mfx6-reveal {
    opacity: 0;
    transform: translateY(24px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.75,.2,1);
}

.mfx6-reveal.mfx6-visible {
    opacity: 1;
    transform: translateY(0);
}

.mfx6-step:nth-child(1) {
    transition-delay: .05s;
}

.mfx6-step:nth-child(2) {
    transition-delay: .12s;
}

.mfx6-step:nth-child(3) {
    transition-delay: .19s;
}

.mfx6-step:nth-child(4) {
    transition-delay: .26s;
}

.mfx6-step:nth-child(5) {
    transition-delay: .33s;
}


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

@media (max-width: 1100px) {

    .mfx6-container {
        width: min(100% - 34px, 960px);
    }

    .mfx6-steps {
        column-gap: 16px;
    }

    .mfx6-card {
        padding-left: 15px;
        padding-right: 15px;
    }

    .mfx6-card h3 {
        font-size: 15px;
    }

    .mfx6-card p {
        font-size: 11px;
    }

    .mfx6-card li {
        font-size: 10px;
    }

    .mfx6-stats {
        width: 100%;
    }

}


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

@media (max-width: 760px) {

    .mfx6-container {
        width: min(100% - 28px, 540px);

        padding-top: 24px;
        padding-bottom: 30px;
    }

    .mfx6-kicker {
        gap: 12px;

        font-size: 10px;
        letter-spacing: .22em;
    }

    .mfx6-kicker span {
        width: 38px;
    }

    .mfx6-header h2 {
        font-size: clamp(40px, 12vw, 60px);

        line-height: .98;
    }

    .mfx6-header h2 em {
        display: inline-block;
    }

    .mfx6-title-line {
        margin-right: 5%;
        width: 110px;
        height: 3px;
    }

    .mfx6-header p {
        max-width: 320px;
        margin-inline: auto;

        font-size: 9px;
        line-height: 1.6;
        letter-spacing: .20em;
    }

    .mfx6-workflow {
        margin-top: 34px;
    }

    .mfx6-wave {
        display: none;
    }

    .mfx6-steps {
        display: flex;
        flex-direction: column;

        gap: 35px;

        padding-top: 0;
    }

    .mfx6-step {
        width: 100%;
    }

    .mfx6-number {
        width: 70px;
        height: 70px;
    }

    .mfx6-card {
        width: min(100%, 360px);

        min-height: 0;

        padding: 24px;
    }

    .mfx6-icon-wrap {
        width: 112px;
        height: 112px;
    }

    .mfx6-icon-wrap img {
        width: 88px;
        height: 88px;
    }

    .mfx6-card h3 {
        font-size: 18px;
    }

    .mfx6-card p {
        font-size: 12px;
    }

    .mfx6-card li {
        font-size: 11px;
    }

    .mfx6-stats {
        width: min(100%, 380px);

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

        border-radius: 28px;

        padding: 15px 10px;

        row-gap: 15px;
    }

    .mfx6-stat {
        padding: 8px 5px;
    }

    .mfx6-stat:nth-child(2)::after {
        display: none;
    }

    .mfx6-stat:nth-child(1)::after,
    .mfx6-stat:nth-child(3)::after {
        display: block;
    }

    .mfx6-stat strong {
        font-size: 22px;
    }

    .mfx6-stat span {
        font-size: 8px;
    }

    .mfx6-stat-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .mfx6-stat-icon svg {
        width: 35px;
        height: 35px;
    }

    .mfx6-bottom-process {
        gap: 10px;

        flex-wrap: wrap;

        font-size: 9px;
        letter-spacing: .22em;
    }

    .mfx6-bottom-line {
        gap: 8px;
    }

    .mfx6-bottom-line > span {
        width: 28px;
    }

    .mfx6-bottom-line div {
        padding: 10px 17px;

        font-size: 8px;
        letter-spacing: .16em;
    }

    .mfx6-globe {
        width: 260px;
        height: 260px;

        right: -105px;
        top: -70px;

        opacity: .22;
    }

    .mfx6-globe-orbit {
        width: 260px;
    }
}


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

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

    .mfx6-reveal {
        opacity: 1;
        transform: none;

        transition: none;
    }

    .mfx6-card,
    .mfx6-icon-wrap img {
        transition: none;
    }

}


/* =========================================================
   SECTION 7 (OVERRIDE)— COMPACT + BIGGER WORKFLOW ICONS
   DESIGN PRESERVED — ONLY SIZE / SPACING ADJUSTMENTS
========================================================= */

/* ---------- COMPACT MAIN CONTAINER ---------- */

#mfx-section-6 .mfx6-container {
    padding-top: 24px;
    padding-bottom: 28px;
}


/* ---------- COMPACT HEADER ---------- */

#mfx-section-6 .mfx6-kicker {
    margin-bottom: 10px;
}

#mfx-section-6 .mfx6-header h2 {
    line-height: .94;
}

#mfx-section-6 .mfx6-title-line {
    margin-top: 2px;
    margin-bottom: 9px;
}

#mfx-section-6 .mfx6-header p {
    line-height: 1.35;
}


/* ---------- WORKFLOW CLOSER TO HEADER ---------- */

#mfx-section-6 .mfx6-workflow {
    margin-top: 30px;
}


/* ---------- KEEP WAVE SAME, JUST SLIGHTLY COMPACT ---------- */

#mfx-section-6 .mfx6-wave {
    height: 150px;
}


/* ---------- FIVE STEPS ---------- */

#mfx-section-6 .mfx6-steps {
    column-gap: 30px;
    padding-top: 44px;
}


/* =========================================================
   BIGGER ROUND ICON AREA
========================================================= */

#mfx-section-6 .mfx6-icon-wrap {
    width: 126px;
    height: 126px;

    margin-bottom: 8px;

    border-radius: 50%;
}


/* OUTER ROUND RING — SAME STYLE */

#mfx-section-6 .mfx6-icon-wrap::before {
    inset: -6px;
    border-radius: 50%;
}


/* ACTUAL IMAGE BIGGER */

#mfx-section-6 .mfx6-icon-wrap img {
    width: 104px;
    height: 104px;
}


/* HOVER SCALE SAME STYLE, ONLY STARTING SIZE BIGGER */

#mfx-section-6 .mfx6-card:hover .mfx6-icon-wrap img {
    transform: scale(1.06) translateY(-2px);
}


/* =========================================================
   COMPACT CARDS
========================================================= */

#mfx-section-6 .mfx6-card {
    min-height: 302px;

    margin-top: 11px;

    padding:
        17px 19px 16px;

    border-radius: 17px;
}


/* ---------- CARD TITLE ---------- */

#mfx-section-6 .mfx6-card h3 {
    margin:
        1px 0 9px;
}


/* ---------- CARD DESCRIPTION ---------- */

#mfx-section-6 .mfx6-card p {
    min-height: 52px;
    line-height: 1.40;
}


/* ---------- DIVIDER ---------- */

#mfx-section-6 .mfx6-card-divider {
    margin:
        8px 0 7px;
}


/* ---------- LIST ---------- */

#mfx-section-6 .mfx6-card li {
    margin: 5px 0;
}


/* =========================================================
   NUMBER + LABEL — SAME DESIGN, SLIGHTLY TIGHTER
========================================================= */

#mfx-section-6 .mfx6-number {
    width: 74px;
    height: 74px;
}

#mfx-section-6 .mfx6-step-label {
    margin-top: 8px;
    padding: 6px 19px;
}


/* =========================================================
   STATS CLOSER
========================================================= */

#mfx-section-6 .mfx6-stats {
    margin-top: 31px;
}


/* =========================================================
   BOTTOM CLOSER
========================================================= */

#mfx-section-6 .mfx6-bottom {
    margin-top: 22px;
}

#mfx-section-6 .mfx6-bottom-line {
    margin-top: 13px;
}


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

@media (max-width: 1100px) {

    #mfx-section-6 .mfx6-steps {
        column-gap: 16px;
        padding-top: 44px;
    }

    #mfx-section-6 .mfx6-icon-wrap {
        width: 116px;
        height: 116px;
    }

    #mfx-section-6 .mfx6-icon-wrap img {
        width: 96px;
        height: 96px;
    }

    #mfx-section-6 .mfx6-card {
        min-height: 300px;
        padding:
            16px 14px 15px;
    }
}


/* =========================================================
   MOBILE
   Keep mobile layout/design same, only make icons stronger
========================================================= */

@media (max-width: 760px) {

    #mfx-section-6 .mfx6-container {
        padding-top: 22px;
        padding-bottom: 26px;
    }

    #mfx-section-6 .mfx6-workflow {
        margin-top: 30px;
    }

    #mfx-section-6 .mfx6-steps {
        gap: 29px;
        padding-top: 0;
    }

    #mfx-section-6 .mfx6-icon-wrap {
        width: 124px;
        height: 124px;
    }

    #mfx-section-6 .mfx6-icon-wrap img {
        width: 102px;
        height: 102px;
    }

    #mfx-section-6 .mfx6-card {
        padding: 19px 21px 17px;
    }

    #mfx-section-6 .mfx6-stats {
        margin-top: 29px;
    }

    #mfx-section-6 .mfx6-bottom {
        margin-top: 20px;
    }
}





/* =========================================================
   TEMPORARILY HIDE SECTION 7 — OUR WORKFLOW
   CODE WILL REMAIN, SECTION WILL NOT BE VISIBLE

   FOR VISIBLE:
   REMOVE THE COMMENT AROUND THE CSS BELOW

   #mfx-section-6 {
       display: none !important;
   }
========================================================= */

#mfx-section-6 {
    display: none !important;
}










/* =========================================================
        START SECTION 8 — SELECTED WORK CSS
========================================================= */

#mfx-section-8,
.mfx8-section {
    --mfx8-navy: #071743;
    --mfx8-navy-2: #0d2356;

    --mfx8-blue: #1767ff;
    --mfx8-blue-2: #0750df;
    --mfx8-blue-light: #3d8cff;

    --mfx8-orange: #ff6b16;
    --mfx8-orange-2: #ff8a1e;

    --mfx8-purple: #6857e8;

    --mfx8-text: #132653;
    --mfx8-muted: #596b91;

    position: relative;
    width: 100%;

    overflow: hidden;

    background:
        #ffffff;

    color: var(--mfx8-navy);

    isolation: isolate;
}


/* =========================================================
   BACKGROUND
========================================================= */

.mfx8-bg {
    position: absolute;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    overflow: hidden;
}

.mfx8-bg-orb {
    position: absolute;

    border-radius: 50%;

    filter: blur(70px);

    opacity: .10;
}

.mfx8-bg-orb-1 {
    width: 420px;
    height: 420px;

    top: 100px;
    left: -260px;

    background: #1767ff;
}

.mfx8-bg-orb-2 {
    width: 380px;
    height: 380px;

    right: -250px;
    bottom: 150px;

    background: #ff7a1c;
}

.mfx8-bg-line {
    position: absolute;

    height: 1px;

    opacity: .22;
}

.mfx8-bg-line-1 {
    width: 420px;

    left: -160px;
    top: 280px;

    transform: rotate(-28deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            #1767ff,
            transparent
        );
}

.mfx8-bg-line-2 {
    width: 360px;

    right: -120px;
    bottom: 260px;

    transform: rotate(27deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            #ff6b16,
            transparent
        );
}


/* =========================================================
   CONTAINER
========================================================= */

.mfx8-container {
    width: min(100% - 48px, 1415px);

    margin-inline: auto;

    padding:
        34px 0 42px;
}


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

.mfx8-header {
    position: relative;

    text-align: center;

    margin-bottom: 27px;
}

.mfx8-kicker {
    display: flex;

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

    gap: 10px;

    margin-bottom: 5px;
}

.mfx8-kicker span {
    width: 43px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #1767ff
        );
}

.mfx8-kicker span:last-child {
    background:
        linear-gradient(
            90deg,
            #ff6b16,
            transparent
        );
}

.mfx8-kicker strong {
    color: #1767ff;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .18em;
}

.mfx8-section-label {
    display: inline-flex;

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

    min-width: 210px;

    height: 42px;

    margin-bottom: 9px;

    padding: 0 28px;

    border-radius: 999px;

    color: #1455df;

    font-size: 17px;
    font-weight: 800;

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

    border:
        1px solid rgba(65, 121, 255, .15);

    box-shadow:
        0 8px 24px rgba(41, 92, 177, .08);
}

.mfx8-header h2 {
    margin: 0;

    color: #071743;

    font-size:
        clamp(42px, 4.25vw, 65px);

    line-height: .98;

    font-weight: 850;

    letter-spacing: -.052em;
}

.mfx8-header h2 em {
    color: #1767ff;

    font-style: normal;

    font-weight: 850;
}

.mfx8-header h2 strong {
    color: #f66a16;

    font-weight: 850;
}

.mfx8-header p {
    margin: 12px 0 0;

    color: #536488;

    font-size: 15px;
    line-height: 1.45;

    font-weight: 500;
}


/* =========================================================
   FEATURED
========================================================= */

.mfx8-featured {
    display: grid;

    grid-template-columns:
        minmax(0, 1.48fr)
        minmax(0, .92fr);

    gap: 24px;

    align-items: stretch;
}


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

.mfx8-case-study,
.mfx8-video-card {
    position: relative;

    overflow: hidden;

    border-radius: 20px;

    min-width: 0;
}

.mfx8-case-study {
    color: white;

    background:
        linear-gradient(
            135deg,
            #0b52e4 0%,
            #073ca9 48%,
            #052b7b 100%
        );

    box-shadow:
        0 20px 42px rgba(22, 73, 168, .18);
}

.mfx8-video-card {
    color: white;

    background:
        linear-gradient(
            135deg,
            #ff9238 0%,
            #ff7a24 55%,
            #ff6b18 100%
        );

    box-shadow:
        0 20px 42px rgba(239, 101, 24, .16);
}

.mfx8-case-study::after,
.mfx8-video-card::after {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    pointer-events: none;

    opacity: .12;

    filter: blur(2px);
}

.mfx8-case-study::after {
    right: -150px;
    bottom: -170px;

    background: #5aa0ff;
}

.mfx8-video-card::after {
    right: -150px;
    top: -170px;

    background: #ffd5ad;
}


/* =========================================================
   CARD TOP
========================================================= */

.mfx8-case-top,
.mfx8-video-top {
    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;
    justify-content: space-between;

    min-height: 62px;

    padding:
        0 20px 0 0;
}

.mfx8-card-label {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    min-height: 52px;

    padding:
        0 23px 0 18px;

    color: white;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .01em;

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

.mfx8-video-card .mfx8-card-label {
    background:
        rgba(255, 108, 20, .98);
}

.mfx8-label-icon {
    width: 22px;
    height: 22px;

    display: grid;
    place-items: center;
}

.mfx8-label-icon svg {
    width: 21px;
    height: 21px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

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


/* =========================================================
   NAVIGATION
========================================================= */

.mfx8-navigation {
    display: flex;

    align-items: center;

    gap: 10px;
}

.mfx8-counter {
    display: flex;

    align-items: baseline;

    gap: 3px;

    margin-right: 7px;

    color: white;

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

    font-weight: 800;

    letter-spacing: -.04em;
}

.mfx8-counter small {
    font-size: 11px;

    font-weight: 600;

    opacity: .85;
}

.mfx8-arrow {
    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    border-radius: 50%;

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

    color: white;

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

    font-size: 23px;

    cursor: pointer;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease;
}

.mfx8-arrow:hover {
    transform: translateX(-2px);

    background: white;

    color: var(--mfx8-blue);
}

.mfx8-arrow-primary {
    border-color: white;

    background: white;

    color: var(--mfx8-orange);
}

.mfx8-arrow-primary:hover {
    transform: translateX(2px);

    background: #eef5ff;

    color: var(--mfx8-blue);
}

.mfx8-arrow-white:hover {
    color: var(--mfx8-orange);
}


/* =========================================================
   CASE CONTENT
========================================================= */

.mfx8-case-content {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(220px, .72fr)
        minmax(0, 1.28fr);

    gap: 20px;

    padding:
        5px 25px 20px 30px;

    align-items: center;
}

.mfx8-case-info {
    min-width: 0;
}

.mfx8-project-category {
    display: inline-flex;

    padding:
        7px 13px;

    margin-bottom: 17px;

    border-radius: 999px;

    color: #dceaff;

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

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

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .07em;
}

.mfx8-case-title {
    margin: 0;

    color: white;

    font-size:
        clamp(23px, 2vw, 31px);

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -.035em;
}

.mfx8-case-description {
    margin:
        17px 0 19px;

    max-width: 310px;

    color: rgba(255,255,255,.88);

    font-size: 12.5px;
    line-height: 1.55;

    font-weight: 450;
}

.mfx8-white-button {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding:
        11px 17px;

    border-radius: 9px;

    text-decoration: none;

    color: #0b49bf;

    background: white;

    font-size: 10px;
    font-weight: 850;

    box-shadow:
        0 10px 20px rgba(0,0,0,.12);

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

.mfx8-white-button b {
    font-size: 18px;

    line-height: 0;
}

.mfx8-white-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 14px 26px rgba(0,0,0,.18);
}


/* =========================================================
   WEBSITE PREVIEW
========================================================= */

.mfx8-website-preview {
    min-width: 0;

    display: flex;

    justify-content: flex-end;
}

.mfx8-preview-window {
    position: relative;

    width: 100%;
    max-width: 560px;

    height: 300px;

    overflow: hidden;

    border-radius: 14px;

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

    background:
        #071b48;

    box-shadow:
        0 16px 35px rgba(0,0,0,.20);
}

.mfx8-preview-track {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    transform: translateY(0);

    will-change: transform;

    transition:
        transform .15s linear;
}

.mfx8-preview-track img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;

    object-fit: contain;

    user-select: none;

    -webkit-user-drag: none;
}

.mfx8-preview-window.is-scrolling
.mfx8-preview-track {
    transition: none;
}

.mfx8-preview-hint {
    position: absolute;

    left: 50%;
    bottom: 11px;

    transform: translateX(-50%);

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        7px 11px;

    border-radius: 999px;

    color: rgba(255,255,255,.92);

    background:
        rgba(5,25,66,.72);

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

    backdrop-filter: blur(8px);

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .08em;

    opacity: .85;

    pointer-events: none;

    transition:
        opacity .3s ease;
}

.mfx8-preview-hint i {
    font-style: normal;

    font-size: 13px;
}

.mfx8-preview-window:hover
.mfx8-preview-hint {
    opacity: .15;
}


/* =========================================================
   CASE RESULTS
========================================================= */

.mfx8-case-results {
    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    margin:
        0 25px 24px;

    min-height: 72px;

    padding:
        0 8px;

    border-top:
        1px solid rgba(255,255,255,.18);

    align-items: center;
}

.mfx8-result {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-width: 0;
}

.mfx8-result:not(:last-child)::after {
    content: "";

    position: absolute;

    right: 0;

    top: 13px;
    bottom: 13px;

    width: 1px;

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

.mfx8-result-icon {
    width: 37px;
    height: 37px;

    flex: 0 0 37px;

    display: grid;
    place-items: center;
}

.mfx8-result-icon svg {
    width: 35px;
    height: 35px;

    fill: none;

    stroke: #2d8cff;

    stroke-width: 2.4;

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

.mfx8-result-orange
.mfx8-result-icon svg {
    stroke: #ff8b25;
}

.mfx8-result strong {
    display: block;

    color: white;

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

    font-weight: 800;

    letter-spacing: -.04em;
}

.mfx8-result span {
    display: block;

    margin-top: 4px;

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

    font-size: 9px;

    font-weight: 500;
}


/* =========================================================
   VIDEO CONTENT
========================================================= */

.mfx8-video-content {
    position: relative;

    z-index: 2;

    padding:
        5px 15px 18px;
}

.mfx8-video-frame {
    position: relative;

    width: 100%;

    height: 337px;

    overflow: hidden;

    border-radius: 14px;

    background: #111;

    box-shadow:
        0 15px 30px rgba(126, 53, 5, .22);
}

.mfx8-video-frame iframe {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;

    z-index: 1;
}

.mfx8-video-placeholder {
    position: absolute;

    inset: 0;

    z-index: 2;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 28px;

    background:
        linear-gradient(
            135deg,
            rgba(6,15,31,.82),
            rgba(8,16,27,.34)
        );

    pointer-events: none;

    transition:
        opacity .35s ease;
}

.mfx8-video-placeholder.is-hidden {
    opacity: 0;
}

.mfx8-video-play {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 86px;
    height: 86px;

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

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: white;

    box-shadow:
        0 0 0 10px rgba(255,255,255,.08),
        0 0 0 20px rgba(255,255,255,.04);
}

.mfx8-video-play span {
    width: 0;
    height: 0;

    margin-left: 6px;

    border-top:
        12px solid transparent;

    border-bottom:
        12px solid transparent;

    border-left:
        18px solid #ff6810;
}

.mfx8-video-quote {
    margin-top: auto;

    max-width: 340px;
}

.mfx8-video-quote b {
    display: block;

    margin-bottom: -8px;

    color: #ff7618;

    font-size: 64px;

    line-height: .6;
}

.mfx8-video-quote p {
    margin:
        0 0 12px;

    color: white;

    font-size: 14px;
    line-height: 1.45;

    font-weight: 550;
}

.mfx8-video-quote strong {
    display: block;

    color: #ff8b27;

    font-size: 12px;
}

.mfx8-video-quote small {
    display: block;

    margin-top: 3px;

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

    font-size: 10px;
}

.mfx8-orange-link {
    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;
    justify-content: space-between;

    padding:
        0 25px 19px;

    color: white;

    text-decoration: none;

    font-size: 11px;
    font-weight: 800;
}

.mfx8-orange-link b {
    font-size: 20px;

    line-height: 0;

    transition:
        transform .25s ease;
}

.mfx8-orange-link:hover b {
    transform: translateX(5px);
}


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

.mfx8-reviews {
    position: relative;

    margin-top: 25px;

    padding:
        0 0 22px;

    border-radius: 20px;

    border:
        1px solid rgba(72, 126, 225, .18);

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

    box-shadow:
        0 18px 42px rgba(46, 88, 158, .08);

    overflow: hidden;
}

.mfx8-reviews-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    min-height: 58px;

    padding:
        0 20px;
}

.mfx8-reviews .mfx8-review-label,
.mfx8-reviews .mfx8-review-label span,
.mfx8-reviews .mfx8-review-label > span:last-child {
    color: #1767ff !important;
    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.mfx8-star-icon {
    color: #1767ff;

    font-size: 18px;
}

.mfx8-review-navigation {
    display: flex;

    align-items: center;

    gap: 9px;
}

.mfx8-review-navigation .mfx8-counter {
    color: #0d2356;
}

.mfx8-review-arrow {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    border:
        1px solid rgba(23,103,255,.20);

    color: #1767ff;

    background: white;

    font-size: 21px;

    cursor: pointer;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease;
}

.mfx8-review-arrow:hover {
    transform: translateX(2px);

    color: white;

    background: #1767ff;
}

.mfx8-review-arrow:last-child:hover {
    background: #ff6b16;

    border-color: #ff6b16;
}


/* =========================================================
   REVIEW VIEWPORT
========================================================= */

.mfx8-review-viewport {
    width: 100%;
    overflow: hidden;

    padding:
        12px 72px 0;
}

.mfx8-review-track {
    display: flex;

    gap: 24px;

    transform: translateX(0);

    transition:
        transform .65s cubic-bezier(.2,.75,.2,1);

    will-change: transform;
}

.mfx8-review-card {
    position: relative;

    flex: 0 0 calc((100% - 48px) / 3);

    min-height: 180px;

    padding: 18px 20px;

    transform: translateY(-6px);

    border-radius: 15px;

    border: 1px solid rgba(78, 128, 226, .16);

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fbfdff
        );

    box-shadow:
        0 16px 30px rgba(42, 83, 150, .11);
}

.mfx8-review-quote {
    position: absolute;

    left: 20px;
    top: 10px;

    color: #1767ff;

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

    font-weight: 900;

    opacity: .95;
}

.mfx8-stars {
    margin:
        0 0 9px 47px;

    color: #ff841f;

    font-size: 16px;

    letter-spacing: .04em;
}

.mfx8-review-card p {
    margin:
        0 0 12px 47px;

    color: #101f43;

    font-size: 12px;
    line-height: 1.48;

    font-weight: 550;
}

.mfx8-review-divider {
    width: 100%;
    height: 1px;

    margin-bottom: 11px;

    background:
        linear-gradient(
            90deg,
            rgba(31,103,255,.14),
            transparent
        );
}

.mfx8-client {
    display: flex;

    align-items: center;

    gap: 10px;
}

.mfx8-client-avatar {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #1767ff;

    background:
        linear-gradient(
            145deg,
            #e7f0ff,
            #f8fbff
        );

    border:
        1px solid rgba(23,103,255,.18);

    font-size: 10px;
    font-weight: 850;
}

.mfx8-client strong {
    display: block;

    color: #0d3eae;

    font-size: 11px;

    font-weight: 800;
}

.mfx8-client small {
    display: block;

    margin-top: 3px;

    color: #63718e;

    font-size: 9px;

    font-weight: 500;
}


/* =========================================================
   DOTS
========================================================= */

.mfx8-review-dots {
    display: flex;

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

    gap: 7px;

    margin-top: 13px;
}

.mfx8-review-dots span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #d8dfef;

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

.mfx8-review-dots span.active {
    width: 10px;
    height: 10px;

    background: #1767ff;

    transform: scale(1.08);
}


/* =========================================================
   VIEW ALL REVIEWS
========================================================= */

.mfx8-review-all {
    display: flex;

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

    gap: 10px;

    margin-top: 13px;

    color: #1767ff;

    text-decoration: none;

    font-size: 11px;
    font-weight: 850;
}

.mfx8-review-all b {
    font-size: 19px;

    line-height: 0;

    transition:
        transform .25s ease;
}

.mfx8-review-all:hover b {
    transform: translateX(5px);
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.mfx8-bottom-ctas {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    margin-top: 19px;

    border-top:
        1px solid rgba(60, 111, 210, .12);

    padding-top: 15px;
}

.mfx8-bottom-cta {
    position: relative;

    display: flex;

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

    gap: 8px;

    min-height: 25px;

    color: #1767ff;

    text-decoration: none;

    font-size: 10px;
    font-weight: 850;
}

.mfx8-bottom-cta:not(:last-child)::after {
    content: "";

    position: absolute;

    right: 0;

    top: 0;
    bottom: 0;

    width: 1px;

    background:
        rgba(55, 103, 190, .13);
}

.mfx8-bottom-icon {
    font-size: 12px;
}

.mfx8-bottom-cta b {
    font-size: 17px;

    line-height: 0;

    transition:
        transform .25s ease;
}

.mfx8-bottom-cta:hover b {
    transform: translateX(4px);
}

.mfx8-bottom-orange {
    color: #f26a17;
}

.mfx8-bottom-purple {
    color: #6354df;
}


/* =========================================================
   REVEAL
========================================================= */

.mfx8-reveal {
    opacity: 0;

    transform:
        translateY(25px);

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

.mfx8-reveal.mfx8-visible {
    opacity: 1;

    transform:
        translateY(0);
}


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

@media (max-width: 1150px) {

    .mfx8-container {
        width:
            min(100% - 34px, 1050px);
    }

    .mfx8-featured {
        grid-template-columns:
            minmax(0, 1.35fr)
            minmax(0, .95fr);

        gap: 16px;
    }

    .mfx8-case-content {
        grid-template-columns:
            minmax(190px, .72fr)
            minmax(0, 1.28fr);

        padding-left: 20px;
        padding-right: 20px;
    }

    .mfx8-case-title {
        font-size: 22px;
    }

    .mfx8-case-description {
        font-size: 11px;
    }

    .mfx8-preview-window {
        height: 270px;
    }

    .mfx8-video-frame {
        height: 307px;
    }

    .mfx8-review-viewport {
        padding-inline: 35px;
    }

}


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

@media (max-width: 900px) {

    .mfx8-featured {
        grid-template-columns: 1fr;
    }

    .mfx8-case-content {
        grid-template-columns:
            .72fr 1.28fr;
    }

    .mfx8-preview-window {
        height: 315px;
    }

    .mfx8-video-frame {
        height: 420px;
    }

    .mfx8-review-card {
        flex-basis:
            calc(
                (100% - 24px) / 2
            );
    }

}


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

@media (max-width: 700px) {

    .mfx8-container {
        width:
            min(100% - 26px, 540px);

        padding:
            25px 0 32px;
    }

    .mfx8-header {
        margin-bottom: 22px;
    }

    .mfx8-section-label {
        min-width: 175px;

        height: 36px;

        padding-inline: 20px;

        font-size: 14px;
    }

    .mfx8-header h2 {
        font-size:
            clamp(34px, 10vw, 52px);

        line-height: 1;
    }

    .mfx8-header p {
        margin-top: 9px;

        font-size: 11px;
    }


    /* CASE */

    .mfx8-case-top,
    .mfx8-video-top {
        min-height: 55px;

        padding-right: 12px;
    }

    .mfx8-card-label {
        min-height: 47px;

        padding-inline: 13px;

        font-size: 9px;
    }

    .mfx8-label-icon {
        width: 18px;
        height: 18px;
    }

    .mfx8-label-icon svg {
        width: 18px;
        height: 18px;
    }

    .mfx8-counter {
        font-size: 16px;
    }

    .mfx8-counter small {
        font-size: 9px;
    }

    .mfx8-arrow {
        width: 34px;
        height: 34px;

        font-size: 18px;
    }

    .mfx8-case-content {
        grid-template-columns: 1fr;

        gap: 18px;

        padding:
            15px 16px 18px;
    }

    .mfx8-case-info {
        text-align: left;
    }

    .mfx8-project-category {
        margin-bottom: 12px;

        font-size: 8px;
    }

    .mfx8-case-title {
        font-size: 25px;
    }

    .mfx8-case-description {
        max-width: 100%;

        margin:
            12px 0 15px;

        font-size: 11px;
    }

    .mfx8-preview-window {
        height: 270px;

        max-width: none;
    }

    .mfx8-case-results {
        margin:
            0 16px 17px;

        min-height: 70px;
    }

    .mfx8-result {
        gap: 5px;

        padding-inline: 4px;
    }

    .mfx8-result-icon {
        width: 27px;
        height: 27px;

        flex-basis: 27px;
    }

    .mfx8-result-icon svg {
        width: 27px;
        height: 27px;
    }

    .mfx8-result strong {
        font-size: 16px;
    }

    .mfx8-result span {
        font-size: 7px;
    }


    /* VIDEO */

    .mfx8-video-content {
        padding:
            12px 12px 15px;
    }

    .mfx8-video-frame {
        height: 310px;
    }

    .mfx8-video-placeholder {
        padding: 20px;
    }

    .mfx8-video-play {
        width: 68px;
        height: 68px;
    }

    .mfx8-video-play span {
        border-top-width: 9px;
        border-bottom-width: 9px;
        border-left-width: 14px;
    }

    .mfx8-video-quote {
        max-width: 260px;
    }

    .mfx8-video-quote b {
        font-size: 48px;
    }

    .mfx8-video-quote p {
        font-size: 11px;
    }

    .mfx8-orange-link {
        padding:
            0 18px 17px;

        font-size: 9px;
    }


    /* REVIEWS */

    .mfx8-reviews {
        margin-top: 17px;

        border-radius: 17px;
    }

    .mfx8-reviews-header {
        min-height: 53px;

        padding-inline: 14px;
    }

    .mfx8-review-label {
        font-size: 9px;
    }

    .mfx8-review-navigation {
        gap: 6px;
    }

    .mfx8-review-navigation
    .mfx8-counter {
        font-size: 14px;
    }

    .mfx8-review-arrow {
        width: 31px;
        height: 31px;

        font-size: 17px;
    }

    .mfx8-review-viewport {
        padding-inline: 15px;
    }

    .mfx8-review-track {
        gap: 12px;
    }

    .mfx8-review-card {
        flex-basis: 100%;

        min-height: 172px;

        padding: 16px;
    }

    .mfx8-review-card p {
        font-size: 11px;
    }

    .mfx8-bottom-ctas {
        grid-template-columns: 1fr;

        gap: 0;

        padding:
            10px 14px 0;
    }

    .mfx8-bottom-cta {
        justify-content: flex-start;

        min-height: 37px;

        font-size: 9px;
    }

    .mfx8-bottom-cta:not(:last-child)::after {
        display: none;
    }

}


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

@media (max-width: 420px) {

    .mfx8-container {
        width:
            min(100% - 20px, 390px);
    }

    .mfx8-header h2 {
        font-size: 32px;
    }

    .mfx8-case-title {
        font-size: 22px;
    }

    .mfx8-preview-window {
        height: 230px;
    }

    .mfx8-video-frame {
        height: 275px;
    }

    .mfx8-case-results {
        margin-inline: 10px;
    }

    .mfx8-result strong {
        font-size: 14px;
    }

    .mfx8-result span {
        font-size: 6.5px;
    }

}


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

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

    .mfx8-reveal {
        opacity: 1;

        transform: none;

        transition: none;
    }

    .mfx8-card,
    .mfx8-arrow,
    .mfx8-white-button,
    .mfx8-review-track,
    .mfx8-preview-track {
        transition: none !important;
    }

}
.mfx8-video-card .mfx8-counter {
    color: #ffffff !important;
    opacity: 1 !important;
}

.mfx8-video-card .mfx8-counter small {
    color: rgba(255, 255, 255, .9) !important;
    opacity: 1 !important;
}

.mfx8-video-card .mfx8-video-current {
    color: #ffffff !important;
}
.mfx8-video-card .mfx8-arrow {
    color: #ffffff !important;
    border-color: rgba(255,255,255,.75) !important;
    opacity: 1 !important;
}

.mfx8-video-card .mfx8-arrow span {
    color: #ffffff !important;
    opacity: 1 !important;
}

.mfx8-video-card .mfx8-arrow-white {
    background: #ffffff !important;
    color: #ff6810 !important;
    border-color: #ffffff !important;
}

.mfx8-video-card .mfx8-arrow-white span {
    color: #ff6810 !important;
}
.mfx8-video-card .mfx8-orange-link {
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.mfx8-video-card .mfx8-orange-link span {
    color: #ffffff !important;
    opacity: 1 !important;
}

.mfx8-video-card .mfx8-orange-link b {
    color: #ffffff !important;
    opacity: 1 !important;
}
/* VIDEO TESTIMONIAL LABEL — FIX VISIBILITY */

.mfx8-video-card .mfx8-card-label {
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.mfx8-video-card .mfx8-label-icon {
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.mfx8-video-card .mfx8-label-icon svg {
    stroke: #ffffff !important;
    fill: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.mfx8-video-card .mfx8-label-icon svg path {
    stroke: #ffffff !important;
}
/* VIDEO TESTIMONIAL TEXT — FIX */

.mfx8-video-card .mfx8-card-label > span:last-child {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
    white-space: nowrap !important;
}








/* =========================================================
        START SECTION 9 — WHO WE HELP CSS
========================================================= */

.mf8-section {
  --mf8-blue: #171a7c;
  --mf8-blue-dark: #0b1165;
  --mf8-blue-light: #2879ff;
  --mf8-orange: #ff7600;

  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;

  padding: 88px 0 70px;

  color: #ffffff;

  background:
    radial-gradient(
      circle at 82% 15%,
      rgba(54,120,255,.22),
      transparent 30%
    ),
    radial-gradient(
      circle at 12% 80%,
      rgba(39,101,255,.12),
      transparent 27%
    ),
    linear-gradient(
      135deg,
      #171a7c 0%,
      #12166f 48%,
      #090e5e 100%
    );
}

.mf8-section,
.mf8-section * {
  box-sizing: border-box;
}

.mf8-container {
  position: relative;
  width: min(1280px, calc(100% - 64px));
  margin: 0 auto;
}


/* BACKGROUND */

.mf8-ring {
  position: absolute;
  border: 1px solid rgba(87,146,255,.18);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

.mf8-ring-one {
  width: 520px;
  height: 520px;
  right: -250px;
  top: -250px;
}

.mf8-ring-two {
  width: 350px;
  height: 350px;
  right: -165px;
  top: -165px;
  border-color: rgba(87,146,255,.13);
}

.mf8-dots-bg {
  position: absolute;
  left: -5px;
  top: 370px;

  width: 170px;
  height: 170px;

  opacity: .4;

  background-image: radial-gradient(
    rgba(67,128,255,.8) 1.6px,
    transparent 1.6px
  );

  background-size: 17px 17px;

  mask-image: linear-gradient(
    90deg,
    #000,
    transparent
  );

  -webkit-mask-image: linear-gradient(
    90deg,
    #000,
    transparent
  );

  pointer-events: none;
  z-index: -1;
}

.mf8-glow-point {
  position: absolute;
  right: 13%;
  top: 220px;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #ffffff;

  box-shadow:
    0 0 8px #ffffff,
    0 0 20px #3d82ff,
    0 0 42px rgba(61,130,255,.8);

  z-index: -1;
}


/* HEADER */

.mf8-header {
  max-width: 920px;
  margin: 0 auto 46px;
  text-align: center;
}

.mf8-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;

  margin-bottom: 15px;

  color: var(--mf8-orange);

  font-size: 15px;
  font-weight: 800;
  letter-spacing: 2.5px;
}

.mf8-eyebrow span {
  width: 42px;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    var(--mf8-orange)
  );
}

.mf8-eyebrow span:last-child {
  background: linear-gradient(
    90deg,
    var(--mf8-orange),
    transparent
  );
}

.mf8-title {
  margin: 0;

  color: #ffffff;

  font-size: clamp(46px, 5vw, 72px);
  line-height: .98;
  letter-spacing: -3px;
  font-weight: 800;
}

.mf8-title strong {
  color: var(--mf8-orange);
}

.mf8-intro {
  max-width: 820px;
  margin: 22px auto 0;

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

  font-size: 17px;
  line-height: 1.65;
}

.mf8-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  margin-top: 22px;
}

.mf8-divider i {
  width: 78px;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,118,0,.8)
  );
}

.mf8-divider i:last-child {
  background: linear-gradient(
    90deg,
    rgba(255,118,0,.8),
    transparent
  );
}

.mf8-divider b {
  color: var(--mf8-orange);
  font-size: 20px;
}


/* GRID */

.mf8-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}


/* CARDS */

.mf8-industry-card {
  position: relative;

  min-height: 185px;

  padding: 25px 52px 24px 136px;

  display: flex;
  align-items: center;

  border: 1px solid rgba(103,151,255,.35);
  border-radius: 13px;

  background:
    linear-gradient(
      135deg,
      rgba(43,75,180,.28),
      rgba(8,21,105,.54)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 15px 40px rgba(0,0,0,.18);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  overflow: hidden;

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

.mf8-industry-card::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      110deg,
      transparent 20%,
      rgba(255,255,255,.06) 50%,
      transparent 80%
    );

  transform: translateX(-110%);
  transition: transform .7s ease;

  pointer-events: none;
}

.mf8-industry-card:hover {
  transform: translateY(-7px);

  border-color: rgba(68,137,255,.72);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 22px 50px rgba(0,0,0,.28),
    0 0 28px rgba(42,117,255,.13);
}

.mf8-industry-card:hover::before {
  transform: translateX(110%);
}


/* ICON */

.mf8-icon {
  position: absolute;
  left: 25px;
  top: 50%;

  width: 88px;
  height: 88px;

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

  transform: translateY(-50%);

  border: 1px solid rgba(55,130,255,.8);
  border-radius: 50%;

  color: #ffffff;

  background:
    radial-gradient(
      circle,
      rgba(46,119,255,.28),
      rgba(10,25,116,.65) 68%
    );

  box-shadow:
    inset 0 0 20px rgba(44,122,255,.2),
    0 0 20px rgba(44,122,255,.18);

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

.mf8-icon::before {
  content: "";

  position: absolute;
  inset: 7px;

  border: 1px solid rgba(95,159,255,.3);
  border-radius: 50%;
}

.mf8-icon svg {
  position: relative;
  z-index: 2;

  width: 52px;
  height: 52px;
}

.mf8-industry-card:hover .mf8-icon {
  transform: translateY(-50%) scale(1.07);

  box-shadow:
    inset 0 0 23px rgba(44,122,255,.28),
    0 0 27px rgba(44,122,255,.34);
}


/* CONTENT */

.mf8-content {
  position: relative;
  z-index: 2;
}

.mf8-content h3 {
  margin: 0 0 10px;

  color: #ffffff;

  font-size: 21px;
  line-height: 1.15;
  font-weight: 750;
  letter-spacing: -.4px;
}

.mf8-content p {
  margin: 0;

  color: rgba(255,255,255,.72);

  font-size: 14px;
  line-height: 1.65;
}


/* ARROW */

.mf8-arrow {
  position: absolute;
  right: 18px;
  bottom: 14px;

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

  width: 30px;
  height: 30px;

  color: var(--mf8-orange);

  font-size: 29px;
  font-weight: 300;
  line-height: 1;

  text-decoration: none;

  transition:
    transform .3s ease,
    text-shadow .3s ease;
}

.mf8-arrow:hover {
  transform: translateX(5px);

  text-shadow:
    0 0 13px rgba(255,118,0,.8);
}


/* TRUST */

.mf8-trust {
  position: relative;

  margin-top: 32px;

  padding: 18px 18px 15px;

  border: 1px solid rgba(91,145,255,.34);
  border-radius: 21px;

  background:
    linear-gradient(
      180deg,
      rgba(31,53,153,.42),
      rgba(8,21,102,.62)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 20px 45px rgba(0,0,0,.2);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.mf8-trust::after {
  content: "";

  position: absolute;

  left: 6%;
  right: 6%;
  bottom: -2px;

  height: 2px;

  background: linear-gradient(
    90deg,
    transparent,
    #327fff,
    #6ba6ff,
    #327fff,
    transparent
  );

  box-shadow: 0 0 14px rgba(50,127,255,.8);
}

.mf8-trust-title {
  margin-bottom: 14px;

  text-align: center;

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

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
}


/* LOGOS */

.mf8-logo-area {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mf8-logo-window {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.mf8-logo-track {
  display: flex;
  gap: 9px;

  width: max-content;

  transition:
    transform .55s cubic-bezier(.22,.61,.36,1);
}

.mf8-logo {
  position: relative;

  flex: 0 0 138px;

  width: 138px;
  height: 66px;

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

  border: 1px solid rgba(102,151,255,.3);
  border-radius: 10px;

  background:
    linear-gradient(
      180deg,
      rgba(48,76,176,.3),
      rgba(8,24,105,.5)
    );

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

.mf8-logo::before {
  content: "";

  position: absolute;

  top: -4px;
  left: 50%;

  width: 5px;
  height: 5px;

  transform: translateX(-50%);

  border-radius: 50%;

  background: #ffffff;

  box-shadow:
    0 0 7px #ffffff,
    0 0 16px #4389ff,
    0 0 26px #4389ff;
}

.mf8-logo:hover {
  transform: translateY(-5px);

  border-color: rgba(76,143,255,.75);

  box-shadow:
    0 10px 25px rgba(0,0,0,.24),
    0 0 20px rgba(50,125,255,.16);
}

.mf8-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 78%;
  max-height: 45px;
  object-fit: contain;
  opacity: .96;
  filter: none;
}


/* NAV */

.mf8-nav {
  flex: 0 0 37px;

  width: 37px;
  height: 37px;

  padding: 0;

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

  border: 1px solid rgba(111,157,255,.42);
  border-radius: 50%;

  background: rgba(21,44,130,.72);

  color: #ffffff;

  font-family: inherit;
  font-size: 26px;
  line-height: 1;

  cursor: pointer;

  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease;
}

.mf8-nav:hover {
  transform: scale(1.08);

  background: rgba(43,91,205,.85);

  border-color: rgba(82,148,255,.9);
}


/* DOTS */

.mf8-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  margin-top: 13px;
}

.mf8-dot {
  width: 8px;
  height: 8px;

  padding: 0;

  border: 0;
  border-radius: 50%;

  background: rgba(150,176,255,.55);

  cursor: pointer;

  transition:
    width .3s ease,
    background .3s ease,
    box-shadow .3s ease;
}

.mf8-dot.mf8-dot-active {
  width: 22px;

  border-radius: 8px;

  background: var(--mf8-orange);

  box-shadow:
    0 0 11px rgba(255,118,0,.6);
}


/* TABLET */

@media (max-width: 1100px) {

  .mf8-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mf8-industry-card {
    min-height: 180px;
  }

  .mf8-logo {
    flex-basis: 125px;
    width: 125px;
  }
}


/* MOBILE */

@media (max-width: 720px) {

  .mf8-section {
    padding: 68px 0 52px;
  }

  .mf8-container {
    width: calc(100% - 30px);
  }

  .mf8-header {
    margin-bottom: 34px;
  }

  .mf8-title {
    font-size: 42px;
    letter-spacing: -1.8px;
  }

  .mf8-intro {
    font-size: 15px;
    line-height: 1.6;
  }

  .mf8-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .mf8-industry-card {
    min-height: 160px;
    padding: 22px 45px 22px 108px;
  }

  .mf8-icon {
    left: 17px;

    width: 74px;
    height: 74px;
  }

  .mf8-icon svg {
    width: 44px;
    height: 44px;
  }

  .mf8-content h3 {
    font-size: 19px;
  }

  .mf8-content p {
    font-size: 13px;
    line-height: 1.55;
  }

  .mf8-trust {
    margin-top: 23px;
    padding: 16px 10px 13px;
  }

  .mf8-trust-title {
    font-size: 8px;
    letter-spacing: 2px;
  }

  .mf8-nav {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
    font-size: 22px;
  }

  .mf8-logo {
    flex-basis: 118px;
    width: 118px;
    height: 59px;
  }
}


@media (max-width: 450px) {

  .mf8-title {
    font-size: 35px;
  }

  .mf8-eyebrow {
    font-size: 12px;
    letter-spacing: 1.5px;
  }

  .mf8-industry-card {
    padding-left: 97px;
  }

  .mf8-icon {
    width: 66px;
    height: 66px;
  }

  .mf8-icon svg {
    width: 39px;
    height: 39px;
  }

  .mf8-content h3 {
    font-size: 17px;
  }

  .mf8-content p {
    font-size: 12px;
  }
}



/* =========================================
   S8 — FINAL PREMIUM CLIENT LOGO STRIP
   ========================================= */

.mf8-trust {
  padding: 22px 20px 18px !important;

  background:
    radial-gradient(
      circle at 50% 120%,
      rgba(255,118,0,.18),
      transparent 40%
    ),
    linear-gradient(
      135deg,
      rgba(30,38,145,.88),
      rgba(11,18,101,.96)
    ) !important;

  border: 1px solid rgba(105,157,255,.28) !important;

  box-shadow:
    0 24px 65px rgba(3,7,55,.32),
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 35px rgba(43,112,255,.08) !important;

  border-radius: 24px !important;
}

/* Premium orange accent */
.mf8-trust::before {
  width: 115px !important;
  height: 2px !important;

  background: linear-gradient(
    90deg,
    transparent,
    #ff7600,
    #ff9a45,
    #ff7600,
    transparent
  ) !important;

  box-shadow:
    0 0 12px rgba(255,118,0,.75),
    0 0 28px rgba(255,118,0,.35) !important;
}

/* Logo heading */
.mf8-trust-title {
  margin-bottom: 18px !important;

  color: rgba(255,255,255,.72) !important;

  font-size: 10px !important;
  letter-spacing: 3.2px !important;
}

/* Logo tiles — BIGGER */
.mf8-logo {
  flex-basis: 158px !important;
  width: 158px !important;
  height: 76px !important;

  border-radius: 13px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.12),
      rgba(255,255,255,.035)
    ) !important;

  border: 1px solid rgba(255,255,255,.14) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 12px 30px rgba(0,0,0,.16) !important;
}

/* Bigger client logo */
.mf8-logo img {
  max-width: 88% !important;
  max-height: 55px !important;

  transform: scale(1.08);

  opacity: 1 !important;
  filter: none !important;

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

/* Premium hover */
.mf8-logo:hover {
  transform: translateY(-5px) !important;

  border-color:
    rgba(255,118,0,.48) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 15px 35px rgba(0,0,0,.22),
    0 0 25px rgba(255,118,0,.10) !important;
}

.mf8-logo:hover img {
  transform: scale(1.14);
}

/* Bigger navigation */
.mf8-nav {
  width: 40px !important;
  height: 40px !important;
  flex-basis: 40px !important;

  background:
    rgba(255,255,255,.065) !important;

  border-color:
    rgba(255,255,255,.16) !important;
}

.mf8-nav:hover {
  background:
    rgba(255,118,0,.15) !important;

  border-color:
    rgba(255,118,0,.52) !important;
}

/* Premium dots */
.mf8-dots {
  margin-top: 16px !important;
  gap: 8px !important;
}

.mf8-dot {
  width: 6px !important;
  height: 6px !important;

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

.mf8-dot.mf8-dot-active {
  width: 25px !important;
  height: 6px !important;

  background: #ff7600 !important;

  box-shadow:
    0 0 9px rgba(255,118,0,.75),
    0 0 20px rgba(255,118,0,.25) !important;
}

/* Mobile */
@media (max-width: 720px) {

  .mf8-logo {
    flex-basis: 135px !important;
    width: 135px !important;
    height: 68px !important;
  }

  .mf8-logo img {
    max-height: 48px !important;
  }

}
.mf8-trust {
  background: rgba(255,255,255,.97) !important;
  border: 1px solid rgba(255,255,255,.8) !important;

  box-shadow:
    0 25px 60px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}

.mf8-trust-title {
  color: #171a7c !important;
}

.mf8-logo {
  background: #ffffff !important;
  border: 1px solid rgba(23,26,124,.12) !important;

  box-shadow:
    0 10px 28px rgba(23,26,124,.10) !important;
}

.mf8-logo:hover {
  border-color: rgba(255,118,0,.45) !important;

  box-shadow:
    0 15px 35px rgba(23,26,124,.13),
    0 0 22px rgba(255,118,0,.12) !important;
}

.mf8-nav {
  color: #171a7c !important;
  background: rgba(23,26,124,.06) !important;
  border-color: rgba(23,26,124,.16) !important;
}

.mf8-nav:hover {
  color: #ffffff !important;
  background: #171a7c !important;
}

.mf8-dot {
  background: rgba(23,26,124,.22) !important;
}

.mf8-dot.mf8-dot-active {
  background: #ff7600 !important;
}

/* =========================================
   S8 — WHITE GLASS CLIENT LOGO PANEL
   ========================================= */

.mf8-trust {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.98),
      rgba(244,247,255,.96)
    ) !important;

  border: 1px solid rgba(255,255,255,.9) !important;

  box-shadow:
    0 28px 70px rgba(4,10,80,.18),
    inset 0 1px 0 #ffffff !important;

  border-radius: 24px !important;
}


/* small premium orange accent */

.mf8-trust::before {
  width: 105px !important;
  height: 2px !important;

  background: linear-gradient(
    90deg,
    transparent,
    #ff7600,
    #ff9b52,
    #ff7600,
    transparent
  ) !important;

  box-shadow:
    0 0 14px rgba(255,118,0,.55) !important;
}


/* heading */

.mf8-trust-title {
  color: #171a7c !important;
  opacity: .72;

  font-size: 10px !important;
  letter-spacing: 3px !important;
}


/* =========================================
   GLASS LOGO TILE
   ========================================= */

.mf8-logo {
  position: relative;

  flex-basis: 158px !important;
  width: 158px !important;
  height: 78px !important;

  border-radius: 15px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.92),
      rgba(238,243,255,.72)
    ) !important;

  border: 1px solid
    rgba(23,26,124,.12) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(23,26,124,.04),
    0 10px 28px rgba(23,26,124,.09) !important;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  overflow: hidden;

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


/* glass highlight */

.mf8-logo::after {
  content: "";

  position: absolute;

  top: 0;
  left: -60%;

  width: 55%;
  height: 100%;

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

  transform: skewX(-18deg);

  transition: left .7s ease;

  pointer-events: none;
}


/* logo */

.mf8-logo img {
  position: relative;
  z-index: 2;

  max-width: 97% !important;
  max-height: 90px !important;

  opacity: 1 !important;

  /*
    White logo ku subtle blue backing deuchi,
    so white logo background re disappear heba nahi.
  */

  padding: 8px 13px;

  border-radius: 9px;

  background:
    linear-gradient(
      135deg,
      #171a7c,
      #252ba4
    );

  box-shadow:
    0 5px 16px rgba(23,26,124,.18);

  object-fit: contain;

  filter: none !important;

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


/* hover */

.mf8-logo:hover {
  transform: translateY(-5px) !important;

  border-color:
    rgba(255,118,0,.42) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 16px 34px rgba(23,26,124,.14),
    0 0 24px rgba(255,118,0,.10) !important;
}

.mf8-logo:hover::after {
  left: 125%;
}

.mf8-logo:hover img {
  transform: scale(1.06);

  box-shadow:
    0 7px 20px rgba(23,26,124,.23),
    0 0 18px rgba(255,118,0,.08);
}


/* arrows */

.mf8-nav {
  color: #171a7c !important;

  background:
    rgba(23,26,124,.055) !important;

  border: 1px solid
    rgba(23,26,124,.14) !important;

  box-shadow:
    0 5px 15px rgba(23,26,124,.07) !important;
}

.mf8-nav:hover {
  color: #ffffff !important;

  background:
    #171a7c !important;

  border-color:
    #171a7c !important;
}


/* dots */

.mf8-dot {
  background:
    rgba(23,26,124,.18) !important;
}

.mf8-dot.mf8-dot-active {
  background:
    #ff7600 !important;

  box-shadow:
    0 0 9px rgba(255,118,0,.65) !important;
}


/* mobile */

@media (max-width: 720px) {

  .mf8-logo {
    flex-basis: 135px !important;
    width: 135px !important;
    height: 70px !important;
  }

  .mf8-logo img {
    max-height: 48px !important;
    padding: 7px 10px;
  }

}









/* =========================================================
        START SECTION 10 — FAQ CSS
========================================================= */

#mf-s10-faq {
  --mf-s10-blue: #171a7c;
  --mf-s10-blue-dark: #080d55;
  --mf-s10-blue-bright: #165dff;
  --mf-s10-blue-soft: #eaf0ff;
  --mf-s10-orange: #ff7600;
  --mf-s10-orange-light: #ff9b45;

  position: relative;
  isolation: isolate;

  width: 100%;
  min-height: 900px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 8% 50%,
      rgba(91,126,255,.16),
      transparent 30%
    ),
    radial-gradient(
      circle at 95% 82%,
      rgba(70,108,255,.10),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f8faff 52%,
      #eef4ff 100%
    );

  color: var(--mf-s10-blue);
}


/* =========================================================
   BACKGROUND
   ========================================================= */

#mf-s10-faq .mf-s10-bg {
  position: absolute;
  z-index: -1;

  pointer-events: none;
  border-radius: 50%;
}

#mf-s10-faq .mf-s10-bg-one {
  width: 760px;
  height: 760px;

  left: -520px;
  top: -40px;

  border: 1px solid rgba(30,80,220,.10);

  box-shadow:
    120px 0 0 rgba(70,110,255,.025),
    240px 0 0 rgba(70,110,255,.018),
    360px 0 0 rgba(70,110,255,.012);
}

#mf-s10-faq .mf-s10-bg-two {
  width: 650px;
  height: 650px;

  right: -450px;
  bottom: -430px;

  border: 1px solid rgba(44,96,255,.10);

  box-shadow:
    0 0 0 70px rgba(55,105,255,.025),
    0 0 0 140px rgba(55,105,255,.018);
}


/* DOTS */

#mf-s10-faq .mf-s10-dots {
  position: absolute;

  top: 45px;
  right: 7%;

  width: 112px;
  height: 92px;

  opacity: .75;

  background-image:
    radial-gradient(
      circle,
      #195cff 2px,
      transparent 2.5px
    );

  background-size: 18px 18px;

  pointer-events: none;
}


/* =========================================================
   MAIN SHELL
   ========================================================= */

#mf-s10-faq .mf-s10-shell {
  position: relative;

  width: min(1420px, calc(100% - 90px));

  min-height: 900px;

  margin: 0 auto;
  padding: 70px 0 55px;

  display: grid;

  grid-template-columns:
    minmax(420px, .82fr)
    minmax(600px, 1.18fr);

  gap: 70px;

  align-items: center;
}


/* =========================================================
   LEFT VISUAL
   ========================================================= */

#mf-s10-faq .mf-s10-visual {
  position: relative;

  min-width: 0;

  height: 760px;

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


#mf-s10-faq .mf-s10-image-frame {
  position: relative;

  width: 100%;
  max-width: 560px;

  height: 720px;

  overflow: hidden;

  border-radius:
    0 360px 360px 0;

  background: #dfe8ff;

  box-shadow:
    30px 30px 80px rgba(24,44,130,.12);
}


/* IMAGE */

#mf-s10-faq .mf-s10-woman {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;

  margin: 0;
  padding: 0;

  filter:
    saturate(1.04)
    contrast(1.02);
}


/* IMAGE BLUE OVERLAY */

#mf-s10-faq .mf-s10-image-frame::after {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(12,33,115,.08),
      transparent 48%,
      rgba(255,255,255,.05)
    );
}


/* =========================================================
   GROWTH NOTE
   ========================================================= */

#mf-s10-faq .mf-s10-growth-note {
  display: none !important;
}

#mf-s10-faq .mf-s10-growth-note b {
  margin-top: 9px;

  font-family: Arial, sans-serif;

  font-size: 24px;
  font-weight: 400;
}


/* =========================================================
   CONTACT GLASS CARD
   ========================================================= */

#mf-s10-faq .mf-s10-contact-card {
  position: absolute;

  z-index: 5;

  left: 18px;
  bottom: 35px;

  width: min(365px, calc(100% - 35px));

  padding: 24px 26px 22px;

  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.94),
      rgba(246,249,255,.84)
    );

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

  box-shadow:
    0 25px 55px rgba(12,32,110,.18),
    inset 0 1px 0 rgba(255,255,255,1);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}


#mf-s10-faq .mf-s10-contact-icon {
  width: 48px;
  height: 48px;

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

  margin-bottom: 13px;

  border-radius: 50%;

  color: var(--mf-s10-blue-bright);

  background:
    linear-gradient(
      145deg,
      #eef3ff,
      #dfe8ff
    );

  box-shadow:
    inset 0 1px 0 #fff,
    0 7px 18px rgba(31,78,220,.10);
}


#mf-s10-faq .mf-s10-contact-icon svg {
  width: 25px;
  height: 25px;
}


#mf-s10-faq .mf-s10-contact-copy h3 {
  margin: 0 0 8px;

  color: var(--mf-s10-blue);

  font-family: inherit;

  font-size: 20px;
  line-height: 1.2;
  font-weight: 750;
}


#mf-s10-faq .mf-s10-contact-copy p {
  margin: 0 0 18px;

  color: #56629b;

  font-family: inherit;

  font-size: 13px;
  line-height: 1.6;
}


#mf-s10-faq .mf-s10-contact-button {
  width: 100%;
  min-height: 48px;

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

  padding: 10px 25px;

  background: linear-gradient(to right, #ff5917, #ff9317);

  color: #ffffff;
  border: 1px solid #ff9317;
  border-radius: 30px;

  text-decoration: none;

  font-family: inherit;
  font-size: 15px;
  font-weight: 700;

  position: relative;
  z-index: 1;
  overflow: hidden;

  transition: all 0.3s ease-out;
}

#mf-s10-faq .mf-s10-contact-button span {
  position: relative;
  z-index: 3;
  color: #ffffff;
}

#mf-s10-faq .mf-s10-contact-button i {
  position: relative;
  z-index: 3;

  margin-left: 10px;

  color: #ffffff;
  font-family: "Font Awesome 5 Free";
  font-size: 16px;
  font-weight: 900;
  font-style: normal;
  line-height: 1;
}

#mf-s10-faq .mf-s10-contact-button::after {
  content: "";

  height: 100%;
  width: 0;

  background: linear-gradient(to right, #ff9317, #ff5917);

  border-radius: 30px;

  position: absolute;
  right: 0;
  top: 0;

  z-index: -1;

  visibility: hidden;
  opacity: 0;

  transition: all 0.3s ease-out;
}

#mf-s10-faq .mf-s10-contact-button:hover {
  color: #ffffff;
}

#mf-s10-faq .mf-s10-contact-button:hover::after {
  visibility: visible;
  opacity: 1;
  width: 100%;
}


/* =========================================================
   RIGHT CONTENT
   ========================================================= */

#mf-s10-faq .mf-s10-content {
  min-width: 0;

  width: 100%;
}


/* HEADING */

#mf-s10-faq .mf-s10-heading {
  text-align: center;

  margin-bottom: 28px;
}


#mf-s10-faq .mf-s10-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 43px;

  padding: 8px 25px;

  border: 1px solid rgba(255,118,0,.55);

  border-radius: 30px;

  color: var(--mf-s10-orange);

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

  box-shadow:
    0 7px 18px rgba(255,118,0,.05);

  font-family: inherit;

  font-size: 14px;
  font-weight: 700;
}


#mf-s10-faq .mf-s10-heading h2 {
  margin: 20px 0 12px;

  color: var(--mf-s10-blue);

  font-family: inherit;

  font-size: clamp(43px, 4vw, 70px);

  line-height: .98;

  font-weight: 800;

  letter-spacing: -2.8px;
}


#mf-s10-faq .mf-s10-heading h2 span {
  color: var(--mf-s10-blue-bright);

  text-shadow:
    0 8px 25px rgba(25,92,255,.16);
}


#mf-s10-faq .mf-s10-heading-line {
  position: relative;

  width: 175px;
  height: 3px;

  margin: 0 auto 20px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--mf-s10-orange),
      transparent
    );
}


#mf-s10-faq .mf-s10-heading-line::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 10px;
  height: 10px;

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

  border-radius: 50%;

  background: var(--mf-s10-orange);

  box-shadow:
    0 0 12px rgba(255,118,0,.55);
}


#mf-s10-faq .mf-s10-heading p {
  max-width: 720px;

  margin: 0 auto;

  color: #59649b;

  font-family: inherit;

  font-size: 16px;
  line-height: 1.55;
}


/* =========================================================
   FAQ LIST
   ========================================================= */

#mf-s10-faq .mf-s10-faq-list {
  width: 100%;

  display: flex;
  flex-direction: column;

  gap: 13px;
}


#mf-s10-faq .mf-s10-item {
  overflow: hidden;

  border-radius: 20px;

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

  border: 1px solid rgba(35,91,220,.10);

  box-shadow:
    0 8px 25px rgba(25,54,145,.055),
    inset 0 1px 0 rgba(255,255,255,.9);

  transition:
    border-color .3s ease,
    box-shadow .3s ease;
}


#mf-s10-faq .mf-s10-item:hover {
  border-color: rgba(35,91,220,.18);

  box-shadow:
    0 12px 30px rgba(25,54,145,.09);
}


#mf-s10-faq .mf-s10-item-active {
  border-color: rgba(40,105,255,.20);

  box-shadow:
    0 15px 35px rgba(29,74,190,.10);
}


/* QUESTION */

#mf-s10-faq .mf-s10-question {
  appearance: none;
  -webkit-appearance: none;

  width: 100%;

  min-height: 74px;

  display: grid;

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

  align-items: center;

  gap: 17px;

  padding: 10px 22px;

  border: 0;
  outline: 0;

  cursor: pointer;

  text-align: left;

  background: transparent;

  color: var(--mf-s10-blue);

  font: inherit;
}


#mf-s10-faq .mf-s10-number {
  width: 50px;
  height: 50px;

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

  border-radius: 50%;

  color: var(--mf-s10-blue-bright);

  background:
    linear-gradient(
      145deg,
      #eef3ff,
      #dce7ff
    );

  font-size: 19px;
  font-weight: 750;

  box-shadow:
    inset 0 1px 0 #fff;
}


#mf-s10-faq .mf-s10-item-active .mf-s10-number {
  color: #fff;

  background:
    linear-gradient(
      145deg,
      #3182ff,
      #1554ed
    );

  box-shadow:
    0 8px 20px rgba(31,95,255,.22);
}


#mf-s10-faq .mf-s10-question-text {
  min-width: 0;

  color: var(--mf-s10-blue);

  font-size: 18px;
  line-height: 1.35;

  font-weight: 720;
}


#mf-s10-faq .mf-s10-item-active .mf-s10-question-text {
  color: #11166c;
}


#mf-s10-faq .mf-s10-chevron {
  width: 30px;
  height: 30px;

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

  color: #4c5793;

  transition:
    transform .35s ease,
    color .3s ease;
}


#mf-s10-faq .mf-s10-chevron svg {
  width: 22px;
  height: 22px;
}


#mf-s10-faq .mf-s10-item-active .mf-s10-chevron {
  color: var(--mf-s10-orange);

  transform: rotate(0deg);
}


/* ANSWER */

#mf-s10-faq .mf-s10-answer {
  display: grid;

  grid-template-rows: 0fr;

  transition:
    grid-template-rows .38s ease;
}


#mf-s10-faq .mf-s10-item-active .mf-s10-answer {
  grid-template-rows: 1fr;
}


#mf-s10-faq .mf-s10-answer-inner {
  min-height: 0;
  overflow: hidden;

  margin: 0 16px 0;

  display: grid;

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

  align-items: center;

  gap: 20px;

  padding: 0 20px;

  border-radius: 15px;

  background:
    linear-gradient(
      145deg,
      #f1f5ff,
      #eaf0ff
    );

  transition:
    padding .35s ease,
    margin-bottom .35s ease;
}


#mf-s10-faq .mf-s10-item-active .mf-s10-answer-inner {
  padding-top: 18px;
  padding-bottom: 18px;

  margin-bottom: 16px;
}


#mf-s10-faq .mf-s10-answer-icon {
  width: 58px;
  height: 58px;

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

  border-radius: 13px;

  color: var(--mf-s10-orange);

  background: #fff;

  box-shadow:
    0 8px 18px rgba(25,53,145,.09),
    inset 0 1px 0 #fff;

  font-size: 29px;
}


#mf-s10-faq .mf-s10-answer-inner p {
  margin: 0;

  color: #34458e;

  font-size: 16px;
  line-height: 1.6;
}


/* =========================================================
   BOTTOM BRAND MARK
   ========================================================= */

#mf-s10-faq .mf-s10-bottom-mark {
  display: grid;

  grid-template-columns: 1fr 34px 1fr;

  align-items: center;

  gap: 12px;

  max-width: 520px;

  margin: 30px auto 0;

  text-align: center;
}


#mf-s10-faq .mf-s10-bottom-mark > span {
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(37,91,230,.35)
    );
}


#mf-s10-faq .mf-s10-bottom-mark > span:nth-child(3) {
  background:
    linear-gradient(
      90deg,
      rgba(37,91,230,.35),
      transparent
    );
}


#mf-s10-faq .mf-s10-bottom-icon {
  width: 28px;
  height: 28px;

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

  color: var(--mf-s10-blue-bright);

  font-size: 13px;
  font-weight: 800;

  border: 2px solid var(--mf-s10-blue-bright);

  border-radius: 8px;
}


#mf-s10-faq .mf-s10-bottom-mark p {
  grid-column: 1 / -1;

  margin: 3px 0 0;

  color: #52609b;

  font-size: 11px;
  letter-spacing: 3.4px;
  font-weight: 600;
}


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

@media (max-width: 1100px) {

  #mf-s10-faq .mf-s10-shell {
    width: min(100% - 50px, 900px);

    grid-template-columns: 1fr;

    gap: 55px;

    padding-top: 55px;
  }

  #mf-s10-faq .mf-s10-visual {
    height: 650px;
  }

  #mf-s10-faq .mf-s10-image-frame {
    max-width: 570px;
    height: 620px;
  }

  #mf-s10-faq .mf-s10-contact-card {
    left: 50%;
    transform: translateX(-50%);
  }

  #mf-s10-faq .mf-s10-content {
    max-width: 820px;
    margin: 0 auto;
  }

}


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

@media (max-width: 700px) {

  #mf-s10-faq {
    min-height: auto;
  }

  #mf-s10-faq .mf-s10-shell {
    width: calc(100% - 28px);

    min-height: auto;

    padding:
      45px 0
      45px;

    gap: 40px;
  }

  #mf-s10-faq .mf-s10-visual {
    height: 540px;
  }

  #mf-s10-faq .mf-s10-image-frame {
    width: 100%;
    max-width: 420px;

    height: 500px;

    border-radius:
      0 250px 250px 0;
  }

  #mf-s10-faq .mf-s10-growth-note {
    left: 35px;
    top: 42px;

    font-size: 20px;
  }

  #mf-s10-faq .mf-s10-contact-card {
    left: 50%;
    bottom: 0;

    width: calc(100% - 30px);

    padding: 19px 20px;
  }

  #mf-s10-faq .mf-s10-contact-icon {
    width: 42px;
    height: 42px;
  }

  #mf-s10-faq .mf-s10-contact-copy h3 {
    font-size: 18px;
  }

  #mf-s10-faq .mf-s10-contact-copy p {
    font-size: 12px;
  }

  #mf-s10-faq .mf-s10-heading h2 {
    font-size: 42px;
    letter-spacing: -1.8px;
  }

  #mf-s10-faq .mf-s10-heading p {
    padding: 0 10px;

    font-size: 14px;
  }

  #mf-s10-faq .mf-s10-question {
    grid-template-columns:
      42px
      minmax(0, 1fr)
      26px;

    gap: 10px;

    min-height: 67px;

    padding:
      8px 13px;
  }

  #mf-s10-faq .mf-s10-number {
    width: 42px;
    height: 42px;

    font-size: 15px;
  }

  #mf-s10-faq .mf-s10-question-text {
    font-size: 14px;
  }

  #mf-s10-faq .mf-s10-answer-inner {
    grid-template-columns: 48px minmax(0, 1fr);

    gap: 12px;

    padding-left: 12px;
    padding-right: 12px;
  }

  #mf-s10-faq .mf-s10-answer-icon {
    width: 45px;
    height: 45px;

    font-size: 22px;
  }

  #mf-s10-faq .mf-s10-answer-inner p {
    font-size: 13px;
  }

  #mf-s10-faq .mf-s10-bottom-mark {
    margin-top: 25px;
  }

  #mf-s10-faq .mf-s10-dots {
    right: 4%;
    top: 20px;

    transform: scale(.7);
    transform-origin: top right;
  }

}


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

@media (max-width: 430px) {

  #mf-s10-faq .mf-s10-visual {
    height: 485px;
  }

  #mf-s10-faq .mf-s10-image-frame {
    height: 450px;
  }

  #mf-s10-faq .mf-s10-contact-card {
    width: calc(100% - 20px);
  }

  #mf-s10-faq .mf-s10-heading h2 {
    font-size: 36px;
  }

  #mf-s10-faq .mf-s10-label {
    min-height: 38px;
    padding: 7px 18px;

    font-size: 12px;
  }

}


/* =========================================================
   MACROFINET S10 FAQ — FINAL LEFT IMAGE OVERRIDE
   Paste this AFTER your existing S10 FAQ CSS
   ========================================================= */


/* =========================================================
   DESKTOP — FINAL MOCKUP MATCH
   ========================================================= */

@media (min-width: 1101px) {

  /* ---------------------------------------------------------
     SECTION
     --------------------------------------------------------- */

  #mf-s10-faq {
    min-height: 900px;
    overflow: hidden;
    position: relative;
  }


  /* ---------------------------------------------------------
     MAIN SHELL
     Remove the old centered two-column constraint
     --------------------------------------------------------- */

  #mf-s10-faq .mf-s10-shell {
    position: relative;

    width: 100%;
    max-width: none;

    min-height: 900px;

    margin: 0;
    padding: 0 50px 55px;

    display: block;
  }


  /* ---------------------------------------------------------
     LEFT VISUAL
     FULL SECTION HEIGHT + FULL LEFT BLEED
     --------------------------------------------------------- */

  #mf-s10-faq .mf-s10-visual {

    position: absolute;

    left: 0;
    top: 0;

    width: 54vw;
    height: 900px;

    min-width: 0;

    margin: 0;
    padding: 0;

    display: block;

    z-index: 2;

    pointer-events: none;
  }


  /* ---------------------------------------------------------
     IMAGE FRAME
     IMPORTANT:
     No clipping.
     No background.
     No old pill/half-round clipping.
     --------------------------------------------------------- */

  #mf-s10-faq .mf-s10-image-frame {

    position: absolute;

    left: 0;
    top: 0;

    width: 54vw;
    height: 900px;

    max-width: none;

    margin: 0;
    padding: 0;

    overflow: visible;

    border-radius: 0;

    background: transparent;

    box-shadow: none;
  }


  /* ---------------------------------------------------------
     NEW TRANSPARENT PNG
     Image fills vertically from section top
     --------------------------------------------------------- */

  #mf-s10-faq .mf-s10-woman {

    position: absolute;

    left: 0;
    top: 0;

    display: block;

    width: auto;
    height: 100%;

    max-width: none;
    max-height: none;

    margin: 0;
    padding: 0;

    object-fit: contain;
    object-position: left top;

    filter:
      saturate(1.04)
      contrast(1.02);

    pointer-events: none;
  }


  /* ---------------------------------------------------------
     REMOVE OLD CSS OVERLAY
     PNG ALREADY CONTAINS THE CURVE
     --------------------------------------------------------- */

  #mf-s10-faq .mf-s10-image-frame::after {
    display: none;
  }


  /* ---------------------------------------------------------
     GROWTH NOTE
     Keep it on image, closer to original mockup
     --------------------------------------------------------- */

  #mf-s10-faq .mf-s10-growth-note {

    left: 65px;
    top: 70px;

    z-index: 8;

    pointer-events: none;
  }


  /* ---------------------------------------------------------
     CONTACT CARD
     Position relative to LEFT IMAGE
     --------------------------------------------------------- */

  #mf-s10-faq .mf-s10-contact-card {

    left: 35px;
    bottom: 35px;

    width: 365px;

    z-index: 20;

    pointer-events: auto;
  }


  /* ---------------------------------------------------------
     RIGHT FAQ CONTENT
     --------------------------------------------------------- */

  #mf-s10-faq .mf-s10-content {

    position: relative;

    z-index: 10;

    width: calc(55% - 20px);

    max-width: 850px;

    margin-left: 45%;

    padding-top: 65px;

    min-width: 0;
  }


  /* ---------------------------------------------------------
     HEADING
     --------------------------------------------------------- */

  #mf-s10-faq .mf-s10-heading {

    margin-bottom: 28px;

    text-align: center;
  }


  #mf-s10-faq .mf-s10-heading h2 {

    font-size: clamp(48px, 4.2vw, 68px);

    line-height: .98;

    letter-spacing: -2.8px;

    white-space: nowrap;
  }


  #mf-s10-faq .mf-s10-heading p {

    max-width: 720px;

    margin-left: auto;
    margin-right: auto;
  }


  /* ---------------------------------------------------------
     FAQ LIST
     --------------------------------------------------------- */

  #mf-s10-faq .mf-s10-faq-list {

    width: 100%;

    gap: 13px;
  }


  #mf-s10-faq .mf-s10-item {
    width: 100%;
  }


  /* ---------------------------------------------------------
     BOTTOM BRAND
     --------------------------------------------------------- */

  #mf-s10-faq .mf-s10-bottom-mark {

    max-width: 520px;

    margin-top: 30px;
  }

}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1500px) {

  #mf-s10-faq .mf-s10-visual {
    width: 52vw;
  }

  #mf-s10-faq .mf-s10-image-frame {
    width: 52vw;
  }

  #mf-s10-faq .mf-s10-content {
    width: 58%;
    max-width: 900px;

    margin-left: 43%;
  }

}


/* =========================================================
   1200–1400px
   ========================================================= */

@media (min-width: 1101px) and (max-width: 1400px) {

  #mf-s10-faq .mf-s10-visual,
  #mf-s10-faq .mf-s10-image-frame {
    width: 55vw;
  }

  #mf-s10-faq .mf-s10-content {

    width: 56%;

    margin-left: 44%;

    padding-top: 55px;
  }

  #mf-s10-faq .mf-s10-heading h2 {

    font-size: clamp(42px, 4vw, 58px);

    white-space: normal;
  }

}


/* =========================================================
   IMPORTANT — REMOVE ANY OLD IMAGE LIMIT
   ========================================================= */

@media (min-width: 1101px) {

  #mf-s10-faq .mf-s10-image-frame img.mf-s10-woman {

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

    max-width: none !important;
    max-height: none !important;

    left: 0 !important;
    top: 0 !important;

    object-fit: contain !important;
    object-position: left top !important;
  }

}
/* =========================================================
   S10 FAQ — FINAL IMAGE WIDTH FIX
   Keep image LEFT + TOP exactly where it is.
   Only reduce its RIGHT-side reach.
   ========================================================= */

@media (min-width: 1101px) {

  #mf-s10-faq .mf-s10-image-frame {
    width: 540px !important;
    max-width: none !important;

    height: 790px !important;

    margin: 0 !important;
  }

  #mf-s10-faq .mf-s10-woman {
    height: 790px !important;
    width: auto !important;

    max-width: none !important;
    max-height: none !important;

    left: 0 !important;
    top: 0 !important;
  }

  #mf-s10-faq .mf-s10-growth-note {
    display: none !important;
  }
}

/* =========================================================
   S10 FAQ — CONTACT CARD MOVE DOWN ONLY
   SIZE REMAINS EXACTLY SAME
   ========================================================= */

@media (min-width: 1101px) {

  #mf-s10-faq .mf-s10-contact-card {
    bottom: 35px !important;

    transform: translateY(50px) !important;
  }

}
/* =========================================================
   S10 — CONTACT BUTTON TEXT VISIBILITY
   ========================================================= */

#mf-s10-faq .mf-s10-contact-button {
    color: #ffffff !important;
}

#mf-s10-faq .mf-s10-contact-button span {
    color: #ffffff !important;

    font-weight: 800 !important;

    opacity: 1 !important;

    text-shadow:
        0 1px 2px rgba(0,0,0,.18);
}

#mf-s10-faq .mf-s10-contact-button b {
    color: #ffffff !important;

    opacity: 1 !important;

    font-weight: 700 !important;
}









/* =========================================================
        START SECTION 11 — CTA CSS
========================================================= */

#mf-s11 {
  --mf-navy: #02082b;
  --mf-navy-2: #07123d;
  --mf-blue: #164dff;
  --mf-blue-soft: #2347a7;
  --mf-orange: #ff6500;
  --mf-orange-2: #ff7a00;
  --mf-white: #ffffff;
  --mf-text: #f7f8ff;
  --mf-muted: #bdc5df;
  --mf-border: rgba(73,105,190,.52);

  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;

  background:
    radial-gradient(circle at 76% 35%,rgba(25,66,180,.16),transparent 34%),
    radial-gradient(circle at 10% 10%,rgba(26,62,190,.12),transparent 28%),
    linear-gradient(135deg,#010522 0%,#02072a 48%,#03092d 100%);

  color: var(--mf-text);

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

#mf-s11 *,
#mf-s11 *::before,
#mf-s11 *::after {
  box-sizing: border-box;
}

#mf-s11 button,
#mf-s11 input,
#mf-s11 textarea,
#mf-s11 select {
  font: inherit;
}


/* =========================
   BACKGROUND
========================= */

.mf-s11-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.mf-s11-arc {
  position: absolute;
  border: 1px solid rgba(30,92,255,.72);
  border-radius: 50%;
  pointer-events: none;
}

.mf-s11-arc-1 {
  width: 820px;
  height: 820px;
  left: -410px;
  top: -260px;

  box-shadow:
    0 0 20px rgba(25,87,255,.12),
    inset 0 0 25px rgba(25,87,255,.05);
}

.mf-s11-arc-2 {
  width: 950px;
  height: 950px;
  left: -525px;
  top: -325px;
  opacity: .18;
}

.mf-s11-line {
  position: absolute;
  height: 1px;
  transform-origin: left center;
  pointer-events: none;
}

.mf-s11-line-1 {
  width: 1050px;
  left: -90px;
  bottom: 52px;
  transform: rotate(-7deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(27,94,255,.62),
      rgba(255,101,0,.42),
      transparent
    );
}

.mf-s11-line-2 {
  width: 900px;
  left: -40px;
  bottom: 34px;
  transform: rotate(-4deg);
  opacity: .35;

  background:
    linear-gradient(
      90deg,
      transparent,
      #164dff,
      transparent
    );
}


/* =========================
   MAIN WRAPPER
========================= */

.mf-s11-wrap {
  width: min(1400px,calc(100% - 96px));
  min-height: 100vh;
  margin: 0 auto;

  display: grid;
  grid-template-columns:
    minmax(0,.94fr)
    minmax(560px,1.06fr);

  align-items: center;
  gap: 64px;

  padding: 52px 0 48px;
}


/* =========================
   LEFT
========================= */

.mf-s11-left {
  position: relative;
  padding: 10px 0 8px;
}

.mf-s11-eyebrow {
  display: flex;
  align-items: center;
  gap: 17px;
  margin-bottom: 27px;
}

.mf-s11-eyebrow span {
  width: 42px;
  height: 2px;

  background: var(--mf-orange);

  box-shadow:
    0 0 12px rgba(255,101,0,.45);
}

.mf-s11-eyebrow p {
  margin: 0;

  color: var(--mf-orange);

  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.2px;
  line-height: 1.2;
}

.mf-s11-title {
  margin: 0;
  max-width: 610px;

  color: var(--mf-white);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: clamp(56px,5.1vw,82px);
  font-weight: 400;
  letter-spacing: -3.5px;
  line-height: .99;
}

.mf-s11-title em {
  color: var(--mf-orange);
  font-style: italic;
}

.mf-s11-title strong {
  color: var(--mf-white);
  font-weight: 400;
}

.mf-s11-description {
  margin: 28px 0 0;
  max-width: 590px;

  color: var(--mf-muted);

  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -.1px;
}

.mf-s11-accent {
  width: 43px;
  height: 3px;
  margin-top: 27px;

  background: var(--mf-orange);

  box-shadow:
    0 0 14px rgba(255,101,0,.4);
}


/* =========================
   BENEFITS
========================= */

.mf-s11-benefits {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  margin-top: 23px;
}

.mf-s11-benefit {
  min-width: 0;
  padding: 0 25px;

  border-right:
    1px solid rgba(77,102,174,.35);
}

.mf-s11-benefit:first-child {
  padding-left: 0;
}

.mf-s11-benefit:last-child {
  padding-right: 0;
  border-right: 0;
}

.mf-s11-icon {
  width: 62px;
  height: 62px;

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

  margin-bottom: 15px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(35,91,255,.38),
      rgba(7,25,83,.85)
    );

  border:
    1px solid rgba(40,91,213,.42);
}

.mf-s11-icon svg {
  width: 29px;
  height: 29px;

  fill: none;
  stroke: var(--mf-orange);
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mf-s11-benefit h3 {
  margin: 0 0 7px;

  color: var(--mf-white);

  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.mf-s11-benefit p {
  max-width: 165px;
  margin: 0;

  color: #aeb8d7;

  font-size: 13px;
  line-height: 1.55;
}


/* =========================
   FORM CARD
========================= */

.mf-s11-form-card {
  position: relative;

  width: 100%;
  max-width: 700px;
  justify-self: end;

  padding: 43px 52px 32px;

  background:
    linear-gradient(
      145deg,
      rgba(18,34,89,.97),
      rgba(4,13,48,.98)
    );

  border: 0;

  clip-path:
    polygon(
      0 28px,
      28px 0,
      calc(100% - 28px) 0,
      100% 28px,
      100% calc(100% - 28px),
      calc(100% - 28px) 100%,
      28px 100%,
      0 calc(100% - 28px)
    );

  box-shadow:
    0 30px 80px rgba(0,0,0,.34),
    0 0 22px rgba(255,101,0,.07),
    inset 0 0 50px rgba(40,73,160,.07);
}


/* ORANGE OUTER FRAME */

.mf-s11-form-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background: var(--mf-orange);

  clip-path:
    polygon(
      0 28px,
      28px 0,
      calc(100% - 28px) 0,
      100% 28px,
      100% calc(100% - 28px),
      calc(100% - 28px) 100%,
      28px 100%,
      0 calc(100% - 28px)
    );
}


/* INNER SURFACE */

.mf-s11-form-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 1;
  pointer-events: none;

  background:
    linear-gradient(
      145deg,
      rgba(21,23,109,.97),
      rgba(8,10,55,.98)
    );

  clip-path:
    polygon(
      0 27px,
      27px 0,
      calc(100% - 27px) 0,
      100% 27px,
      100% calc(100% - 27px),
      calc(100% - 27px) 100%,
      27px 100%,
      0 calc(100% - 27px)
    );
}


/* CONTENT ABOVE BORDER */

.mf-s11-form-card > * {
  position: relative;
  z-index: 2;
}


/* =========================
   FORM HEADER
========================= */

.mf-s11-form-head {
  position: relative;
  z-index: 2;
}

.mf-s11-form-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 17px;
}

.mf-s11-form-label span {
  width: 12px;
  height: 12px;

  border-radius: 3px;

  background: var(--mf-orange);

  box-shadow:
    0 0 10px rgba(255,101,0,.55);
}

.mf-s11-form-label p {
  margin: 0;

  color: var(--mf-orange);

  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
}

.mf-s11-form-head h2 {
  margin: 0 0 29px;

  color: var(--mf-white);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 37px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -1.5px;
}

.mf-s11-form-head h2 em {
  color: var(--mf-orange);
  font-style: normal;
}


/* =========================
   FORM
========================= */

#mfS11Form {
  position: relative;
  z-index: 2;
}

.mf-s11-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 20px 26px;
}

.mf-s11-field {
  position: relative;
  min-width: 0;
}

.mf-s11-full {
  margin-top: 19px;
}

.mf-s11-field label {
  display: block;
  margin-bottom: 8px;

  color: #f0f2fa;

  font-size: 13px;
  font-weight: 500;
}

.mf-s11-field label span {
  color: var(--mf-orange);
}

.mf-s11-field input,
.mf-s11-field textarea,
.mf-s11-select-wrap select {
  width: 100%;

  color: var(--mf-white);

  background:
    rgba(1,8,38,.52);

  border:
    1px solid rgba(255,101,0,.42);

  border-radius: 7px;

  outline: none;

  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.mf-s11-field input {
  height: 49px;
  padding: 0 15px;
}

.mf-s11-field textarea {
  min-height: 104px;
  resize: vertical;
  padding: 13px 15px;
  line-height: 1.5;
}

.mf-s11-field input::placeholder,
.mf-s11-field textarea::placeholder {
  color: #858eae;
}

.mf-s11-field input:hover,
.mf-s11-field textarea:hover,
.mf-s11-select-wrap select:hover {
  border-color: rgba(255,101,0,.68);
}

.mf-s11-field input:focus,
.mf-s11-field textarea:focus,
.mf-s11-select-wrap select:focus {
  border-color: var(--mf-orange);

  box-shadow:
    0 0 0 2px rgba(255,101,0,.08),
    0 0 16px rgba(255,101,0,.10);

  background:
    rgba(2,10,42,.78);
}


/* =========================
   SELECT
========================= */

.mf-s11-select-wrap {
  position: relative;
}

.mf-s11-select-wrap select {
  height: 51px;
  padding: 0 48px 0 15px;

  appearance: none;
  cursor: pointer;
}

.mf-s11-select-wrap select option {
  color: #fff;
  background: #07123d;
}

.mf-s11-select-wrap svg {
  position: absolute;

  right: 17px;
  top: 50%;

  width: 18px;
  height: 18px;

  transform: translateY(-50%);

  fill: none;
  stroke: var(--mf-orange);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;

  pointer-events: none;
}


/* =========================
   ERRORS
========================= */

.mf-s11-error {
  display: block;
  min-height: 15px;
  margin-top: 4px;

  color: #ff8560;

  font-size: 11px;
}

.mf-s11-field.mf-error input,
.mf-s11-field.mf-error textarea,
.mf-s11-field.mf-error select {
  border-color: #ff4d2e;
}

.mf-s11-field.mf-success input,
.mf-s11-field.mf-success textarea,
.mf-s11-field.mf-success select {
  border-color: rgba(64,154,255,.8);
}


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

.mf-s11-submit {
  position: relative;

  width: 100%;
  height: 62px;

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

  margin-top: 21px;
  padding: 0 10px 0 24px;

  border: 1px solid #ff9317;
  border-radius: 5px;

  cursor: pointer;

  color: #fff !important;

  background: linear-gradient(to right, #ff5917, #ff9317);

  font-family: inherit;
  font-size: 15px;
  font-weight: 700;

  overflow: hidden;
  z-index: 1;

  transition: all 0.3s ease-out;
}

.mf-s11-submit span {
  flex: 1;
  text-align: center;
  color: #fff !important;
}

/* EXISTING ARROW — DON'T CHANGE */
.mf-s11-submit b {
  width: 46px;
  height: 46px;

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

  background: #fff;

  clip-path:
    polygon(
      18% 0,
      82% 0,
      100% 50%,
      82% 100%,
      18% 100%,
      0 50%
    );
}

.mf-s11-submit svg {
  width: 21px;
  height: 21px;

  fill: none;
  stroke: var(--mf-orange);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* HERO-STYLE HOVER */
.mf-s11-submit::after {
  content: "";

  position: absolute;
  right: 0;
  top: 0;

  width: 0;
  height: 100%;

  background: linear-gradient(to right, #ff9317, #ff5917);

  border-radius: 5px;

  visibility: hidden;
  opacity: 0;

  z-index: -1;

  transition: all 0.3s ease-out;
}

.mf-s11-submit:hover {
  color: #fff !important;
}

.mf-s11-submit:hover::after {
  width: 100%;
  visibility: visible;
  opacity: 1;
}

.mf-s11-submit:active {
  transform: none;
}


/* =========================
   SECURE
========================= */

.mf-s11-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  margin-top: 17px;

  color: #aeb7d0;

  font-size: 12px;
}

.mf-s11-secure svg {
  width: 17px;
  height: 17px;

  fill: none;
  stroke: var(--mf-orange);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================
   SUCCESS
========================= */

.mf-s11-success {
  display: none;

  margin-top: 14px;
  padding: 11px 14px;

  border:
    1px solid rgba(68,157,255,.35);

  border-radius: 6px;

  color: #cfe0ff;

  background:
    rgba(18,57,135,.14);

  text-align: center;

  font-size: 13px;
}

.mf-s11-success.is-visible {
  display: block;
}


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

@media (max-width:1180px) {

  .mf-s11-wrap {
    width: min(1100px,calc(100% - 60px));

    grid-template-columns:
      minmax(0,.9fr)
      minmax(500px,1.1fr);

    gap: 42px;

    padding: 48px 0 42px;
  }

  .mf-s11-title {
    font-size: clamp(52px,5.5vw,68px);
  }

  .mf-s11-form-card {
    padding: 40px 40px 30px;
  }
}


@media (max-width:980px) {

  #mf-s11 {
    min-height: auto;
  }

  .mf-s11-wrap {
    width: min(760px,calc(100% - 40px));

    grid-template-columns: 1fr;
    gap: 45px;

    padding: 58px 0;
  }

  .mf-s11-left {
    max-width: 700px;
    margin: 0 auto;
  }

  .mf-s11-form-card {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    justify-self: center;
  }

  .mf-s11-title {
    font-size: clamp(54px,8vw,76px);
  }
}


@media (max-width:640px) {

  .mf-s11-wrap {
    width: calc(100% - 28px);

    gap: 34px;

    padding: 42px 0;
  }

  .mf-s11-eyebrow {
    gap: 11px;
    margin-bottom: 22px;
  }

  .mf-s11-eyebrow span {
    width: 31px;
  }

  .mf-s11-eyebrow p {
    font-size: 10px;
    letter-spacing: 1.5px;
  }

  .mf-s11-title {
    font-size: clamp(45px,13vw,62px);
    letter-spacing: -2px;
  }

  .mf-s11-description {
    margin-top: 22px;
    font-size: 15px;
  }

  .mf-s11-description br {
    display: none;
  }

  .mf-s11-benefits {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .mf-s11-benefit,
  .mf-s11-benefit:first-child,
  .mf-s11-benefit:last-child {
    padding: 0 0 22px;
    border-right: 0;
    border-bottom:
      1px solid rgba(77,102,174,.3);
  }

  .mf-s11-benefit:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .mf-s11-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 12px;
  }

  .mf-s11-form-card {
    padding: 34px 20px 25px;

    clip-path:
      polygon(
        0 18px,
        18px 0,
        calc(100% - 18px) 0,
        100% 18px,
        100% calc(100% - 18px),
        calc(100% - 18px) 100%,
        18px 100%,
        0 calc(100% - 18px)
      );
  }

  .mf-s11-form-card::after {
    clip-path:
      polygon(
        0 18px,
        18px 0,
        calc(100% - 18px) 0,
        100% 18px,
        100% calc(100% - 18px),
        calc(100% - 18px) 100%,
        18px 100%,
        0 calc(100% - 18px)
      );
  }

  .mf-s11-form-card::before {
    clip-path:
      polygon(
        0 17px,
        17px 0,
        calc(100% - 17px) 0,
        100% 17px,
        100% calc(100% - 17px),
        calc(100% - 17px) 100%,
        17px 100%,
        0 calc(100% - 17px)
      );
  }

  .mf-s11-form-head h2 {
    font-size: 31px;
    margin-bottom: 25px;
  }

  .mf-s11-grid {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .mf-s11-full {
    margin-top: 15px;
  }

  .mf-s11-submit {
    height: 58px;
    font-size: 17px;
  }

  .mf-s11-submit b {
    width: 42px;
    height: 42px;
  }

  .mf-s11-secure {
    font-size: 11px;
  }

  .mf-s11-arc-1 {
    width: 620px;
    height: 620px;
    left: -390px;
  }

  .mf-s11-arc-2 {
    display: none;
  }
}
















/* ------------------------------------------------
	I THINK NOT REQURIED DEELTE AFTER CHECK, LOOKS UNNENCARY
------------------------------------------------ */
.mf-search-section {
    padding: 120px 0 105px;
    background: #fff;
}

.mf-search-flow {
    display: grid;
    grid-template-columns: 1fr .25fr 1fr .25fr 1fr .25fr 1fr;
    align-items: center;
    gap: 14px;
    margin-top: 70px;
}

.mf-search-node {
    min-height: 150px;
    padding: 26px;
    border: 1px solid var(--mf-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(20,48,90,.07);
}

.mf-search-node--ai {
    border-color: rgba(23,73,161,.18);
    background: linear-gradient(145deg, #f7fbff, #fff);
}

.mf-search-node__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 22px;
    border-radius: 11px;
    color: #fff;
    background: var(--mf-navy);
    font-size: 14px;
    font-weight: 800;
}

.mf-search-node--ai .mf-search-node__icon {
    background: linear-gradient(135deg, var(--mf-blue), var(--mf-cyan));
}

.mf-search-node strong {
    display: block;
    color: var(--mf-ink);
    font-size: 17px;
}

.mf-search-node small {
    display: block;
    margin-top: 6px;
    color: #8490a4;
    font-size: 11px;
}

.mf-search-line {
    position: relative;
    height: 1px;
    background: linear-gradient(90deg, rgba(23,73,161,.08), var(--mf-blue), rgba(23,73,161,.08));
}

.mf-search-line::after {
    content: "";
    position: absolute;
    top: -3px;
    left: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mf-blue);
    box-shadow: 0 0 15px rgba(23,73,161,.5);
}

.mf-search-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 50px;
    padding-top: 28px;
    border-top: 1px solid var(--mf-line);
}

.mf-mini-label {
    display: block;
    margin-bottom: 8px;
    color: #8994a7;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .18em;
}

.mf-search-bottom strong {
    color: var(--mf-ink);
    font-size: 19px;
}

/* ------------------------------------------------
   SERVICES
------------------------------------------------ */
.mf-services-section {
    padding: 115px 0 125px;
    background: var(--mf-soft);
}

.mf-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 55px;
}

.mf-section-heading > p {
    max-width: 410px;
    margin: 0;
}

.mf-service-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.mf-service-card {
    position: relative;
    min-height: 405px;
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    padding: 30px;
    overflow: hidden;
    border: 1px solid #e1e8f1;
    border-radius: 14px;
    color: var(--mf-ink) !important;
    background: #fff;
    box-shadow: 0 15px 45px rgba(20,48,90,.05);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.mf-service-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.mf-service-card:nth-child(5) {
    grid-column: 4 / span 2;
}

.mf-service-card:hover {
    transform: translateY(-7px);
    border-color: rgba(23,73,161,.28);
    box-shadow: 0 25px 60px rgba(20,48,90,.11);
}

.mf-service-card--featured {
    color: #fff !important;
    border-color: transparent;
    background: linear-gradient(145deg, #07162f 0%, #0c2d5d 70%, #1749a1 100%);
}

.mf-service-card__number {
    position: absolute;
    top: 25px;
    right: 27px;
    color: #a2adbf;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}

.mf-service-card--featured .mf-service-card__number {
    color: rgba(255,255,255,.42);
}

.mf-service-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 45px;
    border: 1px solid rgba(23,73,161,.15);
    border-radius: 12px;
    color: var(--mf-blue);
    background: #f4f8ff;
    font-size: 20px;
    font-weight: 800;
}

.mf-service-card--featured .mf-service-card__icon {
    color: #fff;
    border-color: rgba(255,255,255,.17);
    background: rgba(255,255,255,.08);
}

.mf-service-card h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.025em;
}

.mf-service-card p {
    margin: 14px 0 24px;
    color: #69758a;
    font-size: 14px;
    line-height: 1.65;
}

.mf-service-card--featured p {
    color: rgba(255,255,255,.7);
}

.mf-service-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-right: 20px;
}

.mf-service-card__tags span {
    padding: 6px 8px;
    border-radius: 4px;
    color: #6b778b;
    background: #f4f7fb;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
}

.mf-service-card--featured .mf-service-card__tags span {
    color: rgba(255,255,255,.72);
    background: rgba(255,255,255,.09);
}

.mf-card-arrow {
    position: absolute;
    right: 27px;
    bottom: 25px;
    color: var(--mf-blue);
    font-size: 22px;
}

.mf-service-card--featured .mf-card-arrow {
    color: #8ee9ff;
}

/* ------------------------------------------------
   INTELLIGENCE
------------------------------------------------ */
.mf-intelligence-section {
    padding: 110px 0;
    color: #fff;
    background: var(--mf-navy);
}

.mf-intelligence {
    position: relative;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    align-items: center;
    min-height: 600px;
    gap: 70px;
}

.mf-intelligence__copy h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 700;
    letter-spacing: -.05em;
    line-height: .98;
}

.mf-intelligence__copy h2 em {
    color: #8db0e8;
}

.mf-intelligence__copy > p {
    max-width: 500px;
    margin: 26px 0;
    color: rgba(255,255,255,.68);
    font-size: 16px;
    line-height: 1.75;
}

.mf-check-list {
    display: grid;
    gap: 10px;
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}

.mf-check-list li {
    color: rgba(255,255,255,.84);
    font-size: 13px;
}

.mf-check-list li::before {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    margin-right: 10px;
    border-radius: 50%;
    color: #fff;
    background: rgba(23,73,161,.16);
}

.mf-intelligence__visual {
    position: relative;
    min-height: 530px;
}

.mf-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(23,73,161,.22);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.mf-orbit--one { width: 280px; height: 280px; }
.mf-orbit--two { width: 390px; height: 390px; border-style: dashed; opacity: .65; }
.mf-orbit--three { width: 500px; height: 500px; opacity: .3; }

.mf-core {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 160px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 25%, #245fb5, #07162f 68%);
    box-shadow: 0 0 70px rgba(23,73,161,.24);
    transform: translate(-50%, -50%);
}

.mf-core__dot {
    width: 8px;
    height: 8px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--mf-cyan);
    box-shadow: 0 0 22px var(--mf-cyan);
}

.mf-core strong {
    font-size: 30px;
    letter-spacing: -.04em;
}

.mf-core small {
    margin-top: 5px;
    color: rgba(255,255,255,.55);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .16em;
}

.mf-data-card {
    position: absolute;
    z-index: 4;
    min-width: 165px;
    padding: 15px 17px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    box-shadow: 0 18px 45px rgba(0,0,0,.2);
    backdrop-filter: blur(15px);
}

.mf-data-card small {
    display: block;
    color: rgba(255,255,255,.42);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .14em;
}

.mf-data-card strong {
    display: block;
    margin: 5px 0;
    color: #8db0e8;
    font-size: 22px;
}

.mf-data-card span {
    color: rgba(255,255,255,.56);
    font-size: 10px;
}

.mf-data-card--top { top: 40px; left: 18%; }
.mf-data-card--right { top: 48%; right: 0; }
.mf-data-card--bottom { bottom: 40px; left: 20%; }

/* ------------------------------------------------
   ABOUT
------------------------------------------------ */
.mf-about-section {
    padding: 125px 0;
    background: #fff;
}

.mf-about-grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 85px;
    align-items: center;
}

.mf-about-visual {
    position: relative;
    padding: 20px 35px 35px 0;
}

.mf-about-image {
    overflow: hidden;
    border-radius: 14px;
    background: #edf3f9;
}

.mf-about-image img {
    display: block;
    width: 100%;
    height: 530px;
    object-fit: cover;
}

.mf-about-badge {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 18px 22px;
    border-radius: 8px;
    color: #fff;
    background: var(--mf-navy);
    box-shadow: 0 20px 50px rgba(7,22,47,.22);
}

.mf-about-badge strong {
    color: #8db0e8;
    font-size: 35px;
    line-height: 1;
}

.mf-about-badge span {
    color: rgba(255,255,255,.65);
    font-size: 10px;
    line-height: 1.4;
}

.mf-about-copy h2 {
    margin: 0;
    color: var(--mf-ink);
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 700;
    letter-spacing: -.05em;
    line-height: .98;
}

.mf-about-copy > p {
    max-width: 620px;
    margin: 22px 0 0;
    color: var(--mf-muted);
    font-size: 16px;
    line-height: 1.8;
}

.mf-about-points {
    display: grid;
    gap: 16px;
    margin: 32px 0;
}

.mf-about-points > div {
    display: grid;
    grid-template-columns: 35px 1fr;
    column-gap: 12px;
}

.mf-about-points span {
    grid-row: span 2;
    color: var(--mf-blue);
    font-size: 10px;
    font-weight: 800;
}

.mf-about-points strong {
    font-size: 14px;
}

.mf-about-points small {
    margin-top: 3px;
    color: #7b8799;
    font-size: 12px;
    line-height: 1.5;
}

/* ------------------------------------------------
   PROOF
------------------------------------------------ */
.mf-proof-section {
    padding: 105px 0;
    background: var(--mf-soft);
}

.mf-proof-heading {
    max-width: 650px;
    margin-bottom: 55px;
}

.mf-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid #dce4ee;
    border-bottom: 1px solid #dce4ee;
}

.mf-stat {
    padding: 40px 25px;
    text-align: center;
    border-right: 1px solid #dce4ee;
}

.mf-stat:last-child {
    border-right: 0;
}

.mf-stat strong {
    display: block;
    color: var(--mf-ink);
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 700;
    letter-spacing: -.05em;
    line-height: 1;
}

.mf-stat span {
    display: block;
    margin-top: 10px;
    color: #78859a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ------------------------------------------------
   PROCESS
------------------------------------------------ */
.mf-process-section {
    padding: 120px 0;
    background: #fff;
}

.mf-process {
    display: flex;
    align-items: flex-start;
    margin-top: 65px;
}

.mf-process-step {
    flex: 1;
}

.mf-process-step > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 22px;
    border: 1px solid #dce5f0;
    border-radius: 50%;
    color: var(--mf-blue);
    background: #f7faff;
    font-size: 10px;
    font-weight: 800;
}

.mf-process-step strong {
    display: block;
    font-size: 17px;
}

.mf-process-step p {
    max-width: 170px;
    margin: 9px 0 0;
    color: #7a8698;
    font-size: 12px;
    line-height: 1.6;
}

.mf-process-connector {
    flex: 0 0 7%;
    height: 1px;
    margin-top: 23px;
    background: linear-gradient(90deg, #dce5f0, var(--mf-blue), #dce5f0);
}

/* ------------------------------------------------
   TESTIMONIALS
------------------------------------------------ */
.mf-testimonials-section {
    padding: 115px 0;
    background: var(--mf-soft);
}

.mf-testimonial-grid {
    display: grid;
    grid-template-columns: 1.4fr .8fr;
    gap: 18px;
}

.mf-testimonial {
    min-height: 360px;
    padding: 42px;
    border: 1px solid #e2e9f2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(20,48,90,.05);
}

.mf-testimonial--accent {
    position: relative;
    color: #fff;
    background: var(--mf-navy);
}

.mf-stars {
    color: var(--mf-orange);
    letter-spacing: 5px;
    font-size: 13px;
}

.mf-testimonial blockquote {
    max-width: 700px;
    margin: 35px 0;
    color: var(--mf-ink);
    font-size: clamp(20px, 2.5vw, 31px);
    font-weight: 500;
    letter-spacing: -.025em;
    line-height: 1.4;
}

.mf-testimonial--accent blockquote {
    color: rgba(255,255,255,.88);
    font-size: 22px;
}

.mf-quote-mark {
    display: block;
    color: #8db0e8;
    font-size: 72px;
    line-height: .5;
}

.mf-person {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
}

.mf-person img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
}

.mf-person strong,
.mf-person span {
    display: block;
}

.mf-person strong {
    color: var(--mf-ink);
    font-size: 13px;
}

.mf-person span {
    margin-top: 3px;
    color: #8994a6;
    font-size: 10px;
}

.mf-testimonial--accent .mf-person strong {
    color: #fff;
}

/* ------------------------------------------------
   CLIENTS
------------------------------------------------ */
.mf-clients-section {
    padding: 110px 0;
    background: #fff;
}

.mf-client-logos {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-top: 55px;
}

.mf-client-logos div {
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    border: 1px solid #e7edf4;
    border-radius: 8px;
    background: #fff;
    filter: grayscale(1);
    opacity: .72;
    transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}

.mf-client-logos div:hover {
    filter: grayscale(0);
    opacity: 1;
    transform: translateY(-3px);
}

.mf-client-logos img {
    max-height: 65px;
    width: auto;
}

/* ------------------------------------------------
   CTA
------------------------------------------------ */
.mf-cta-section {
    overflow: hidden;
    padding: 115px 0;
    color: #fff;
    background:
        radial-gradient(circle at 75% 30%, rgba(23,73,161,.22), transparent 34%),
        radial-gradient(circle at 20% 90%, rgba(40,199,232,.12), transparent 28%),
        var(--mf-navy);
}

.mf-cta {
    position: relative;
    z-index: 2;
    max-width: 780px;
    text-align: center;
    margin-inline: auto;
}

.mf-cta h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(46px, 6vw, 80px);
    font-weight: 700;
    letter-spacing: -.055em;
    line-height: .95;
}

.mf-cta h2 em {
    color: #8db0e8;
}

.mf-cta p {
    max-width: 600px;
    margin: 25px auto 32px;
    color: rgba(255,255,255,.67);
    font-size: 16px;
    line-height: 1.75;
}

.mf-cta-glow {
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
}

.mf-cta-glow--one {
    top: -180px;
    right: -80px;
    background: rgba(23,73,161,.24);
}

.mf-cta-glow--two {
    bottom: -190px;
    left: -100px;
    background: rgba(253,126,20,.12);
}

/* ------------------------------------------------
   RESPONSIVE
------------------------------------------------ */
@media (max-width: 1100px) {
    .mf-shell {
        width: min(100% - 36px, 980px);
    }

    .mf-hero__side-note {
        display: none;
    }

    .mf-search-flow {
        grid-template-columns: 1fr 30px 1fr 30px 1fr 30px 1fr;
    }

    .mf-search-node {
        min-height: 135px;
        padding: 20px;
    }

    .mf-service-card {
        min-height: 380px;
    }

    .mf-intelligence {
        gap: 35px;
    }
}

@media (max-width: 900px) {
    .mf-hero,
    .mf-hero__content {
        min-height: 760px;
    }

    .mf-hero__overlay {
        background:
            linear-gradient(90deg, rgba(3,14,34,.94), rgba(5,22,48,.70)),
            linear-gradient(0deg, rgba(3,14,34,.7), transparent 55%);
    }

    .mf-search-flow {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .mf-search-line {
        display: none;
    }

    .mf-search-node {
        min-height: 130px;
    }

    .mf-service-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mf-service-card,
    .mf-service-card:nth-child(4),
    .mf-service-card:nth-child(5) {
        grid-column: auto;
    }

    .mf-intelligence {
        grid-template-columns: 1fr;
    }

    .mf-intelligence__visual {
        min-height: 470px;
    }

    .mf-about-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .mf-about-image img {
        height: 450px;
    }

    .mf-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mf-stat:nth-child(2) {
        border-right: 0;
    }

    .mf-stat:nth-child(-n+2) {
        border-bottom: 1px solid #dce4ee;
    }

    .mf-process {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 35px 25px;
    }

    .mf-process-connector {
        display: none;
    }

    .mf-process-step p {
        max-width: 280px;
    }

    .mf-testimonial-grid {
        grid-template-columns: 1fr;
    }

    .mf-client-logos {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .mf-shell {
        width: min(100% - 28px, 520px);
    }

    .mf-hero,
    .mf-hero__content {
        min-height: 720px;
    }

    .mf-hero__content {
        padding-top: 60px;
        padding-bottom: 95px;
    }

    .mf-hero__media img {
        object-position: 62% center;
    }

    .mf-hero h1 {
        font-size: clamp(45px, 14vw, 67px);
    }

    .mf-hero__content > p {
        font-size: 15px;
    }

    .mf-hero__actions {
        align-items: stretch;
        flex-direction: column;
        width: min(100%, 320px);
    }

    .mf-btn {
        width: 100%;
    }

    .mf-hero__signal {
        flex-wrap: wrap;
        gap: 8px;
    }

    .mf-hero__scroll {
        display: none;
    }

    .mf-hero__controls {
        right: 14px;
        bottom: 25px;
    }

    .mf-search-section,
    .mf-services-section,
    .mf-about-section,
    .mf-process-section,
    .mf-testimonials-section,
    .mf-clients-section {
        padding: 80px 0;
    }

    .mf-intelligence-section,
    .mf-cta-section {
        padding: 85px 0;
    }

    .mf-section-intro h2,
    .mf-section-heading h2,
    .mf-proof-heading h2,
    .mf-about-copy h2 {
        font-size: 42px;
    }

    .mf-section-heading {
        display: block;
        margin-bottom: 40px;
    }

    .mf-section-heading > p {
        margin-top: 22px;
    }

    .mf-search-flow {
        grid-template-columns: 1fr;
        margin-top: 45px;
    }

    .mf-search-node {
        min-height: 118px;
    }

    .mf-search-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .mf-service-grid {
        grid-template-columns: 1fr;
    }

    .mf-service-card,
    .mf-service-card:nth-child(4),
    .mf-service-card:nth-child(5) {
        min-height: 360px;
        grid-column: auto;
    }

    .mf-intelligence__visual {
        min-height: 390px;
        transform: scale(.86);
        transform-origin: center;
        margin: -25px -35px;
    }

    .mf-orbit--one { width: 220px; height: 220px; }
    .mf-orbit--two { width: 305px; height: 305px; }
    .mf-orbit--three { width: 380px; height: 380px; }

    .mf-core {
        width: 130px;
        height: 130px;
    }

    .mf-data-card {
        min-width: 135px;
    }

    .mf-data-card--top { left: 2%; }
    .mf-data-card--right { right: -4%; }
    .mf-data-card--bottom { left: 4%; }

    .mf-about-visual {
        padding-right: 0;
    }

    .mf-about-image img {
        height: 350px;
    }

    .mf-about-badge {
        right: 12px;
    }

    .mf-stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .mf-stat {
        padding: 30px 10px;
    }

    .mf-stat strong {
        font-size: 44px;
    }

    .mf-process {
        grid-template-columns: 1fr;
    }

    .mf-testimonial {
        min-height: auto;
        padding: 30px;
    }

    .mf-testimonial blockquote {
        font-size: 22px;
    }

    .mf-client-logos {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 40px;
    }

    .mf-client-logos div {
        min-height: 90px;
    }

    .mf-cta h2 {
        font-size: 47px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mf-hero__media img,
    .mf-hero__slide,
    .mf-pulse {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
    .mf-home *,
    .mf-home *::before,
    .mf-home *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}