/* =====================================================
   MYFUNADS HOME
===================================================== */


/* =====================================================
   HERO
===================================================== */

.hero {
    position: relative;

    width: 100%;
    min-height: 100vh;

    overflow: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding-top: 185px;

    isolation: isolate;
}


/* =====================================================
   OLD ATMOSPHERE
   Kept for compatibility with existing HTML
===================================================== */

.hero-atmosphere {
    position: absolute;

    inset: 0;

    z-index: -4;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 72%,
            rgba(255, 91, 55, .12),
            transparent 30%
        ),
        radial-gradient(
            circle at 20% 55%,
            rgba(255, 120, 80, .08),
            transparent 25%
        ),
        radial-gradient(
            circle at 80% 55%,
            rgba(255, 150, 90, .08),
            transparent 25%
        );
}


/* =====================================================
   FULLSCREEN BLACK HOLE LOOP (video; img kept for safety)
===================================================== */

.hero-black-hole {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: -3;

    overflow: hidden;

    background: #000;

    pointer-events: none;
}


.hero-black-hole img,
.hero-black-hole video {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

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

    transform: scale(1.01);
}


/* =====================================================
   CINEMATIC OVERLAY
===================================================== */

.hero-overlay {
    position: absolute;

    inset: 0;

    z-index: -2;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, .52) 0%,
            rgba(0, 0, 0, .12) 28%,
            rgba(0, 0, 0, .08) 58%,
            rgba(0, 0, 0, .55) 100%
        );
}


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

.hero-content {
    position: relative;

    z-index: 5;

    width: min(900px, 90%);

    margin-top: 10px;

    text-align: center;

    color: #fff;
}


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

.hero-eyebrow {
    display: flex;

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

    gap: 14px;

    margin-bottom: 18px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .28em;

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


.hero-eyebrow span {
    width: 32px;
    height: 1px;

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


.hero-eyebrow span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .55),
            transparent
        );
}


/* =====================================================
   TITLE
===================================================== */

.hero-title {
    position: relative;

    margin: 0;

    text-align: center;

    font-size: clamp(48px, 6vw, 88px);

    line-height: .94;

    letter-spacing: -.055em;

    font-weight: 700;

    color: #fff;

    z-index: 5;

    text-shadow:
        0 4px 30px rgba(0, 0, 0, .35);
}


.hero-title span {
    background:
        linear-gradient(
            100deg,
            #ffffff 0%,
            #ffb06d 48%,
            #ff6b4f 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


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

.hero-description {
    position: relative;

    z-index: 5;

    max-width: 620px;

    margin: 25px auto 0;

    text-align: center;

    font-size: 16px;

    line-height: 1.6;

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

    text-shadow:
        0 2px 15px rgba(0, 0, 0, .4);
}


/* =====================================================
   ACTIONS
===================================================== */

.hero-actions {
    position: relative;

    z-index: 10;

    display: flex;

    justify-content: center;

    gap: 14px;

    margin-top: 28px;
}


.hero-button {
    position: relative;

    display: flex;

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

    gap: 30px;

    min-width: 185px;

    padding: 12px 14px 12px 20px;

    border-radius: 999px;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .04em;

    overflow: hidden;

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


.hero-button span,
.hero-button b {
    position: relative;

    z-index: 2;
}


.hero-button b {
    width: 32px;
    height: 32px;

    display: flex;

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

    border-radius: 50%;

    font-size: 15px;

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


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

.hero-button-primary {
    color: #fff;

    background: #111;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, .25);
}


.hero-button-primary b {
    background: #ef5a46;
}


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

.hero-button-secondary {
    color: #fff;

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

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

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

    box-shadow:
        0 10px 35px rgba(0, 0, 0, .12);
}


.hero-button-secondary b {
    background: rgba(255, 255, 255, .15);
}


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

.hero-button:hover {
    transform: translateY(-3px);
}


.hero-button:hover b {
    transform: rotate(45deg);
}


.hero-button-primary:hover {
    background: #ff6b4f;
}


.hero-button-secondary:hover {
    background: #fff;

    color: #111;

    border-color: #fff;
}


.hero-button-secondary:hover b {
    background: rgba(0, 0, 0, .08);
}


/* =====================================================
   SUBTLE VIDEO VIGNETTE
===================================================== */

.hero::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            transparent 35%,
            rgba(0, 0, 0, .18) 75%,
            rgba(0, 0, 0, .5) 100%
        );
}



/* =====================================================
   HERO GLASS CARDS
===================================================== */

.orbit-data {
    position: absolute;

    z-index: 8;

    width: 190px;
    min-height: 78px;

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 16px 18px;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.14),
            rgba(255,255,255,.035)
        );

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

    backdrop-filter: blur(22px) saturate(125%);
    -webkit-backdrop-filter: blur(22px) saturate(125%);

    box-shadow:
        0 20px 55px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.15),
        inset 0 -1px 0 rgba(255,255,255,.04);

    color: #fff;

    pointer-events: none;
}


/* =====================================================
   GLASS HIGHLIGHT
===================================================== */

.orbit-data::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,.12),
            transparent 40%,
            transparent 70%,
            rgba(255,120,80,.04)
        );

    pointer-events: none;
}


/* =====================================================
   ORANGE ATMOSPHERIC GLOW
===================================================== */

.orbit-data::after {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    border-radius: 50%;

    background: rgba(255,85,60,.10);

    filter: blur(35px);

    pointer-events: none;
}


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

.orbit-data > * {
    position: relative;

    z-index: 2;
}


/* =====================================================
   ICON
===================================================== */

.data-icon {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 50%;

    color: #ff7459;

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

    border:
        1px solid rgba(255,110,85,.28);

    box-shadow:
        0 0 25px rgba(255,80,55,.12);

    font-size: 14px;

    font-weight: 700;
}


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

.orbit-data small {
    display: block;

    margin-bottom: 5px;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .18em;

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


/* =====================================================
   VALUE
===================================================== */

.orbit-data strong {
    display: block;

    font-size: 21px;

    line-height: 1;

    letter-spacing: -.025em;

    color: #fff;

    text-shadow:
        0 3px 15px rgba(0,0,0,.4);
}


/* =====================================================
   TOP LEFT
===================================================== */

.traffic-data {

    left: 6%;

    top: 20%;

}


/* =====================================================
   TOP RIGHT
===================================================== */

.campaigns-data {

    right: 6%;

    top: 22%;

}


/* =====================================================
   BOTTOM LEFT
===================================================== */

.conversion-data {

    left: 5.5%;

    top: 63%;

}


/* =====================================================
   BOTTOM RIGHT
===================================================== */

.reach-data {

    right: 5.5%;

    top: 65%;

}


/* =====================================================
   SUBTLE FLOATING MOTION
===================================================== */

.traffic-data {
    animation:
        cardFloatLeft 6s ease-in-out infinite;
}

.campaigns-data {
    animation:
        cardFloatRight 7s ease-in-out infinite;
}

.conversion-data {
    animation:
        cardFloatLeft 7.5s ease-in-out infinite;
}

.reach-data {
    animation:
        cardFloatRight 6.5s ease-in-out infinite;
}


@keyframes cardFloatLeft {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -8px, 0);
    }
}


@keyframes cardFloatRight {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, 8px, 0);
    }
}


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

@media (max-width: 768px) {

    .orbit-data {

        width: 145px;

        min-height: 60px;

        padding: 11px 12px;

        gap: 9px;

        border-radius: 15px;

    }


    .data-icon {

        width: 29px;
        height: 29px;

        font-size: 11px;

    }


    .orbit-data small {

        font-size: 9px;

    }


    .orbit-data strong {

        font-size: 15px;

    }


    .traffic-data {

        left: 2%;

        top: 24%;

    }


    .campaigns-data {

        right: 2%;

        top: 25%;

    }


    .conversion-data {

        left: 2%;

        top: 67%;

    }


    .reach-data {

        right: 2%;

        top: 69%;

    }

}

/* =====================================================
   CARD MICRO-HOVER
   Works if pointer-events are enabled later.
===================================================== */

.orbit-data:hover {
    transform: translateY(-4px);

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

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .18),
            rgba(255, 255, 255, .065)
        );

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


/* =====================================================
   MOBILE GLASS CARDS
===================================================== */

@media (max-width: 768px) {

    .orbit-data {
        min-width: 128px;

        padding: 9px 11px;

        gap: 8px;

        border-radius: 13px;

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

        transform: scale(.78);
    }


    .data-icon {
        width: 28px;
        height: 28px;

        font-size: 11px;
    }


    .orbit-data strong {
        font-size: 13px;
    }


    .orbit-data small {
        font-size: 9px;
    }


    .traffic-data {
        left: 1%;

        top: 63%;
    }


    .campaigns-data {
        right: 1%;

        top: 63%;
    }


    .conversion-data {
        left: 1%;

        top: 77%;
    }


    .reach-data {
        right: 1%;

        top: 77%;
    }
}


@media (max-width: 480px) {

    .orbit-data {
        min-width: 115px;

        padding: 8px 10px;

        transform: scale(.70);
    }


    .traffic-data,
    .campaigns-data {
        top: 66%;
    }


    .conversion-data,
    .reach-data {
        top: 80%;
    }
}


/* =====================================================
   SCROLL INDICATOR
===================================================== */

.scroll-indicator {
    position: absolute;

    z-index: 10;

    bottom: 25px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

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


.scroll-indicator small {
    font-size: 9px;

    font-weight: 700;

    letter-spacing: .2em;
}


.scroll-mouse {
    position: relative;

    width: 18px;
    height: 29px;

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

    border-radius: 20px;
}


.scroll-mouse::before {
    content: "";

    position: absolute;

    top: 6px;
    left: 50%;

    width: 3px;
    height: 5px;

    transform: translateX(-50%);

    border-radius: 4px;

    background: #fff;

    animation:
        scrollDot 1.7s infinite ease-in-out;
}


@keyframes scrollDot {

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

        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        transform:
            translate(-50%, 9px);

        opacity: 0;
    }
}


/* =====================================================
   PLACEHOLDER
===================================================== */

.home-section-placeholder {
    min-height: 600px;
}


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

@media (max-width: 768px) {

    .hero {
        padding-top: 125px;

        min-height: 900px;
    }


    /* Black hole positioning on mobile */

    .hero-black-hole img,
    .hero-black-hole video {
        object-position: center center;

        transform: scale(1.15);
    }


    /* Content */

    .hero-content {
        width: 92%;

        margin-top: 15px;
    }


    .hero-title {
        font-size: clamp(42px, 12vw, 65px);

        line-height: .96;
    }


    .hero-description {
        width: 90%;

        font-size: 14px;
    }


    /* Buttons */

    .hero-actions {
        flex-direction: column;

        align-items: center;

        width: 220px;

        margin-left: auto;
        margin-right: auto;
    }


    .hero-button {
        width: 100%;
    }


    /* Eyebrow */

    .hero-eyebrow {
        font-size: 9px;

        gap: 8px;

        letter-spacing: .2em;
    }


    .hero-eyebrow span {
        width: 22px;
    }


    /* Scroll */

    .scroll-indicator {
        bottom: 15px;
    }
}


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

@media (max-width: 480px) {

    .hero {
        padding-top: 115px;

        min-height: 850px;
    }


    .hero-title {
        font-size: clamp(38px, 12vw, 54px);
    }


    .hero-description {
        font-size: 13px;

        margin-top: 20px;
    }


    .hero-actions {
        margin-top: 24px;
    }


    .hero-button {
        min-width: 170px;

        padding:
            10px
            12px
            10px
            17px;

        font-size: 11px;
    }


    .hero-button b {
        width: 29px;
        height: 29px;
    }


    .hero-black-hole img,
    .hero-black-hole video {
        transform: scale(1.25);
    }
}


/* =====================================================
   CINEMATIC SCROLL SCENE
===================================================== */

.scroll-scene {
    position: relative;

    width: 100%;

    overflow: hidden;
}


/* =====================================================
   MYFUNADS — ABOUT SECTION
   CINEMATIC ORBITAL ECOSYSTEM
===================================================== */


/* =====================================================
   SECTION
===================================================== */

.about-section {

    position: relative;

    width: 100%;

    min-height: 100vh;

    padding:
        140px
        5vw
        120px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background: transparent;

    

}


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

.about-section::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    
}


.about-section::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    

}


/* =====================================================
   HEADING OUTSIDE CARD
===================================================== */

.about-heading {

    position: relative;

    z-index: 5;

    width: min(1000px, 92%);

    margin-bottom: 50px;

    text-align: center;

}


.about-heading-eyebrow {

    display: block;

    margin-bottom: 17px;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .28em;

    color:
        rgba(3, 3, 3, 0.947);

}


.about-heading h2 {

    margin: 0;

    font-size:
        clamp(52px, 7vw, 100px);

    line-height: .92;

    letter-spacing: -.06em;

    font-weight: 700;

}


.about-heading h2 span {

    background:

        linear-gradient(
            100deg,
            #080808 10%,
            #ffae82 58%,
            #ff5b48 100%
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}


.about-heading p {

    max-width: 520px;

    margin:
        22px
        auto
        0;

    font-size: 15px;

    line-height: 1.7;

    color:
        #080808;

}


/* =====================================================
   BIG CARD
===================================================== */

.about-main-card {

    position: relative;

    z-index: 3;

    width: min(1400px, 94vw);

    min-height: 650px;

    display: grid;

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

    align-items: center;

    overflow: hidden;

    border-radius: 34px;

    background:

        radial-gradient(
            circle at 78% 50%,
            rgba(255,70,45,.18),
            transparent 32%
        ),

        radial-gradient(
            circle at 25% 100%,
            rgba(255,130,65,.12),
            transparent 38%
        ),

        linear-gradient(
            135deg,
            #180807 0%,
            #200b08 40%,
            #100605 100%
        );

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

    box-shadow:

        0 45px 120px
        rgba(0,0,0,.55),

        inset 0 1px 0
        rgba(255,255,255,.09);

}


/* =====================================================
   CARD GLOW
===================================================== */

.about-card-glow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(70px);

}


.about-card-glow-one {

    width: 360px;

    height: 360px;

    right: 4%;

    top: 2%;

    background:
        rgba(255,70,45,.10);

}


.about-card-glow-two {

    width: 260px;

    height: 260px;

    left: 30%;

    bottom: -100px;

    background:
        rgba(255,140,70,.07);

}


/* =====================================================
   LEFT SIDE
===================================================== */

.about-left {

    position: relative;

    z-index: 10;

    min-width: 0;

    padding:
        70px
        60px
        65px;

}


.about-content {

    width: 100%;

    max-width: 620px;

}


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

.about-eyebrow {

    display: block;

    margin-bottom: 22px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .22em;

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

}


/* =====================================================
   TITLE
===================================================== */

.about-content h3 {

    margin: 0;

    max-width: 620px;

    font-size:
        clamp(48px, 5vw, 78px);

    line-height: .94;

    letter-spacing: -.055em;

    font-weight: 650;

    color: #fff;

}


.about-content h3 span {

    display: block;

    background:

        linear-gradient(
            100deg,
            #fff,
            #ffad82,
            #ff5c48
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}


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

.about-description {

    max-width: 540px;

    margin:
        30px
        0
        0;

    font-size: 16px;

    line-height: 1.75;

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

}


/* =====================================================
   INFORMATION / METRIC CARDS
===================================================== */

.about-info-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 190px));

    gap: 16px;

    margin-top: 38px;

}


.about-info-card {

    min-height: 82px;

    padding:
        18px
        19px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    border-radius: 17px;

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.12),
            rgba(255,255,255,.035)
        );

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

    backdrop-filter:
        blur(18px);

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

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.10),

        0 16px 35px
        rgba(0,0,0,.20);

}


.about-info-label {

    margin-bottom: 8px;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .16em;

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

}


.about-info-card strong {

    font-size: 14px;

    line-height: 1.3;

    font-weight: 500;

    color: #fff;

}


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

.about-actions {

    display: none;

    grid-template-columns:
        repeat(2, minmax(0, 190px));

    gap: 16px;

    margin-top: 38px;

}


.about-action-primary,
.about-action-secondary {

    min-height: 58px;

    padding:
        7px
        8px
        7px
        20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-radius: 50px;

    text-decoration: none;

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

}


.about-action-primary {

    color: #fff;

    background:

        linear-gradient(
            100deg,
            #ef503d,
            #ff835e
        );

    box-shadow:

        0 15px 40px
        rgba(255,70,50,.17);

}


.about-action-secondary {

    color: #fff;

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

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

}


.about-action-primary span,
.about-action-secondary span {

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .12em;

}


.about-action-primary b,
.about-action-secondary b {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        rgba(0,0,0,.22);

    font-size: 15px;

}


.about-action-secondary b {

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

}


.about-action-primary:hover,
.about-action-secondary:hover {

    transform:
        translateY(-3px);

}


/* =====================================================
   META
===================================================== */

.about-meta {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 28px;

}


.about-meta span:first-child {

    color: #ff7259;

    font-size: 10px;

    font-weight: 700;

}


.about-meta span:last-child {

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

    font-size: 9px;

    letter-spacing: .18em;

}


/* =====================================================
   RIGHT SIDE
===================================================== */

.about-right {

    position: relative;

    height: 100%;

    min-height: 650px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* =====================================================
   ORBIT
===================================================== */

.about-orbit {

    position: relative;

    width: 500px;

    height: 500px;

}


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

.about-orbit-ring {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

}


.about-ring-large {

    inset: 12px;

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

}


.about-ring-small {

    inset: 105px;

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

}


/* =====================================================
   FIXED MF
===================================================== */

.about-orbit-center {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 105px;

    height: 105px;

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

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:

        radial-gradient(
            circle at 35% 25%,
            rgba(255,255,255,.15),
            rgba(255,255,255,.045) 55%,
            rgba(0,0,0,.38)
        );

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

    backdrop-filter:
        blur(20px);

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

    box-shadow:

        0 0 55px
        rgba(255,75,55,.10),

        inset 0 1px 0
        rgba(255,255,255,.13);

    z-index: 20;

}


.about-orbit-center::before {

    content: "";

    position: absolute;

    inset: -11px;

    border-radius: 50%;

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

}


.about-orbit-center span {

    /* was inheriting near-black text on the dark centre */
    color: rgba(255,255,255,.92);

    font-size: 26px;

    font-weight: 800;

    letter-spacing: -.08em;

}


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

.about-circle-track {

    position: absolute;

    inset: 0;

    border-radius: 50%;

    --track-rotation: 0deg;

    transform:
        rotate(0deg);

    transition:

        transform
        1.35s
        cubic-bezier(.22,.8,.28,1);

}


/* =====================================================
   CIRCLE
===================================================== */

.about-circle {

    position: absolute;

    top: 50%;

    left: 50%;

    width: var(--circle-size, 92px);

    height: var(--circle-size, 92px);

    margin:
        calc(var(--circle-size, 92px) / -2)
        0
        0
        calc(var(--circle-size, 92px) / -2);

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

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

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

    backdrop-filter:
        blur(14px);

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

    cursor: pointer;

    outline: none;

    color: #fff;

    transition:

        background .45s ease,

        border-color .45s ease,

        box-shadow .45s ease,

        scale .45s ease;

}


/*
   TOP
*/

.about-circle:nth-child(1) {

    --circle-angle: -90deg;

    transform:
        rotate(-90deg)
        translateX(var(--orbit-r, 205px));

}


.about-circle:nth-child(2) {

    --circle-angle: 30deg;

    transform:
        rotate(30deg)
        translateX(var(--orbit-r, 205px));

}


.about-circle:nth-child(3) {

    --circle-angle: 150deg;

    transform:
        rotate(150deg)
        translateX(var(--orbit-r, 205px));

}


/* =====================================================
   KEEP TEXT UPRIGHT
===================================================== */

.about-circle-inner {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 100%;

    /*
     * Counter BOTH:
     * 1. the orbit rotation
     * 2. the circle's original position rotation
     */

    transform:
        rotate(
            calc(
                -1 *
                (
                    var(--circle-angle) +
                    var(--track-rotation)
                )
            )
        );

}


.about-circle-inner small {

    margin-bottom: 4px;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .04em;

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

}


.about-circle-inner strong {

    font-size: 11px;

    line-height: 1.25;

    font-weight: 500;

    text-align: center;

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

}


/* =====================================================
   ACTIVE CIRCLE
===================================================== */

.about-circle.is-active {

    border-color:
        rgba(255,105,80,.70);

    background:

        radial-gradient(
            circle,
            rgba(255,100,75,.22),
            rgba(255,80,60,.07)
        );

    box-shadow:

        0 0 35px
        rgba(255,75,55,.18),

        0 0 80px
        rgba(255,75,55,.07),

        inset 0 0 22px
        rgba(255,100,75,.08);

    scale: 1.10;

}


.about-circle.is-active
.about-circle-inner small {

    color:
        #ff765d;

}


.about-circle.is-active
.about-circle-inner strong {

    color: #fff;

}


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

.about-circle:not(.is-active):hover {

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

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

    scale: 1.06;

}


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

.about-orbit-status {

    position: absolute;

    bottom: 45px;

    left: 50%;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    gap: 8px;

    white-space: nowrap;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .17em;

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

}


.about-status-dot {

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background:
        #ff6c54;

    box-shadow:
        0 0 14px
        rgba(255,90,70,.85);

    animation:
        aboutStatusPulse
        2s
        ease-in-out
        infinite;

}


@keyframes aboutStatusPulse {

    0%,
    100% {
        opacity: .4;
    }

    50% {
        opacity: 1;
    }

}


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

.about-content.is-leaving {

    animation:
        aboutContentLeave
        .42s
        cubic-bezier(.4,0,1,1)
        forwards;

}


.about-content.is-entering {

    animation:
        aboutContentEnter
        .75s
        cubic-bezier(.22,.8,.28,1)
        forwards;

}


@keyframes aboutContentLeave {

    from {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter:
            blur(0);

    }

    to {

        opacity: 0;

        transform:
            translateY(-25px)
            scale(.985);

        filter:
            blur(7px);

    }

}


@keyframes aboutContentEnter {

    from {

        opacity: 0;

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

        filter:
            blur(8px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter:
            blur(0);

    }

}


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

@media (max-width: 1100px) {

    .about-section {

        padding:
            120px
            3vw
            100px;

    }


    .about-main-card {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(400px, .9fr);

    }


    .about-left {

        padding:
            55px
            40px;

    }


    .about-content h3 {

        font-size:
            clamp(44px, 5vw, 65px);

    }


    .about-orbit {

        transform:
            scale(.85);

    }

}


/* =====================================================
   TABLET / SMALL LAPTOP
===================================================== */

@media (max-width: 900px) {

    .about-section {

        padding-top: 100px;

    }


    .about-heading {

        margin-bottom: 35px;

    }


    .about-main-card {

        grid-template-columns: 1fr;

        min-height: auto;

    }


    .about-left {

        padding:
            55px
            50px
            30px;

    }


    .about-right {

        min-height: 560px;

    }


    .about-orbit {

        transform:
            scale(.82);

    }


    .about-orbit-status {

        bottom: 30px;

    }

}


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

@media (max-width: 600px) {

    .about-section {

        padding:
            85px
            14px
            80px;

    }


    .about-heading {

        width: 100%;

        margin-bottom: 28px;

    }


    .about-heading-eyebrow {

        font-size: 10px;

    }


    .about-heading h2 {

        font-size: 48px;

    }


    .about-heading p {

        font-size: 13px;

        margin-top: 18px;

    }


    .about-main-card {

        width: 100%;

        border-radius: 25px;

    }


    .about-left {

        padding:
            42px
            22px
            5px;

    }


    .about-eyebrow {

        font-size: 10px;

        margin-bottom: 18px;

    }


    .about-content h3 {

        font-size: 45px;

    }


    .about-description {

        margin-top: 23px;

        font-size: 14px;

        line-height: 1.7;

    }


    .about-info-grid {

        grid-template-columns: 1fr 1fr;

        gap: 9px;

        margin-top: 28px;

    }


    .about-info-card {

        min-height: 72px;

        padding:
            14px
            13px;

        border-radius: 14px;

    }


    .about-info-label {

        font-size: 9px;

    }


    .about-info-card strong {

        font-size: 12px;

    }


    .about-actions {

        grid-template-columns: 1fr 1fr;

        gap: 9px;

        margin-top: 28px;

    }


    .about-action-primary,
    .about-action-secondary {

        min-height: 52px;

        padding-left: 14px;

    }


    .about-action-primary span,
    .about-action-secondary span {

        font-size: 10px;

    }


    .about-action-primary b,
    .about-action-secondary b {

        width: 34px;

        height: 34px;

    }


    .about-meta {

        margin-top: 22px;

    }


    .about-right {

        min-height: 410px;

        overflow: hidden;

    }


    .about-orbit {

        /* real (unscaled) geometry so circles fit and labels stay readable */
        --orbit-r: min(132px, calc((100vw - 124px) / 2));
        --circle-size: 78px;

        width: calc(var(--orbit-r) * 2 + var(--circle-size) + 8px);

        height: calc(var(--orbit-r) * 2 + var(--circle-size) + 8px);

        transform: none;

    }


    .about-orbit-status {

        bottom: 15px;

        font-size: 9px;

    }


    .about-orbit-center {

        width: 86px;

        height: 86px;

    }


    .about-circle-inner small {

        font-size: 9px;

    }


    .about-circle-inner strong {

        font-size: 12px;

    }

}


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

@media (max-width: 400px) {

    .about-section {

        padding-left: 10px;

        padding-right: 10px;

    }


    .about-heading h2 {

        font-size: 42px;

    }


    .about-left {

        padding-left: 18px;

        padding-right: 18px;

    }


    .about-content h3 {

        font-size: 40px;

    }


    .about-info-grid {

        grid-template-columns: 1fr;

    }


    .about-actions {

        grid-template-columns: 1fr;

    }


    .about-right {

        min-height: 370px;

    }


}


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

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

    .about-circle-track {

        transition: none;

    }


    .about-status-dot {

        animation: none;

    }


    .about-content.is-leaving,
    .about-content.is-entering {

        animation: none;

    }

}


/* =====================================================
   PERFORMANCE FLOW
   HORIZONTAL CINEMATIC SCROLL
===================================================== */

/* =====================================================
   PERFORMANCE FLOW — SCROLL CONTAINER
===================================================== */

.performance-flow {
    position: relative;

    width: 100%;

   background: transparent;
    /*
        IMPORTANT:
        Do NOT put overflow:hidden/clip here.
        Sticky needs the parent scroll area.
    */

    overflow: visible;
}


.performance-flow-sticky {
    position: sticky;

    top: 0;

    width: 100%;
    height: 100vh;

    /*
        THIS is the viewport that stays locked
        while the parent section is being scrolled.
    */

    overflow: hidden;

    display: flex;

    align-items: center;

    isolation: isolate;
}


/* =====================================================
   INTRO
===================================================== */

.flow-intro {
    position: absolute;

    z-index: 20;

    left: 6vw;
    top: 14vh;

    width: 380px;

    pointer-events: none;
}

.flow-intro {
    transition:
        opacity .55s ease,
        transform .7s cubic-bezier(.16, 1, .3, 1);
}

.flow-intro.is-hidden {
    opacity: 0;
    transform: translateY(-30px);
    pointer-events: none;
}


.flow-intro-eyebrow {
    display: block;

    margin-bottom: 16px;

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

    letter-spacing: .28em;

    color: rgba(0,0,0,.48);
}


.flow-intro h2 {
    margin: 0;

    font-size: clamp(38px, 4.3vw, 70px);

    line-height: .94;

    letter-spacing: -.055em;

    color: #111;
}


.flow-intro h2 span {
    background:
        linear-gradient(
            100deg,
            #111,
            #ed5747 55%,
            #f0a06b
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


.flow-intro p {
    max-width: 340px;

    margin-top: 22px;

    font-size: 13px;

    line-height: 1.65;

    color: rgba(0,0,0,.52);
}


/* =====================================================
   SCROLL HINT
===================================================== */

.flow-scroll-hint {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 32px;

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

    letter-spacing: .2em;

    color: rgba(0,0,0,.42);
}


.flow-scroll-hint i {
    position: relative;

    width: 70px;
    height: 1px;

    background: rgba(0,0,0,.18);

    overflow: hidden;
}


.flow-scroll-hint i::after {
    content: "";

    position: absolute;

    left: -30px;
    top: 0;

    width: 30px;
    height: 1px;

    background: #ef5a46;

    animation: flowHint 1.8s infinite ease-in-out;
}


@keyframes flowHint {

    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(100px);
    }

}


/* =====================================================
   WORLD
===================================================== */

.flow-world {
    position: absolute;

    inset: 0;

    overflow: hidden;
}


.flow-track {
    position: absolute;

    left: 0;
    top: 0;

    width: 7200px;
    height: 100%;

    will-change: transform;

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


/* =====================================================
   NETWORK SVG
===================================================== */

.flow-network {
    position: absolute;

    left: 0;

    top: 50%;

    width: 7000px;
    height: 700px;

    transform:
        translateY(-50%);

    overflow: visible;

    pointer-events: none;

    z-index: 2;
}


.flow-path {
    fill: none;

    stroke:
        rgba(239, 82, 64, .34);

    stroke-width: 2;

    stroke-linecap: round;

    stroke-dasharray: 10 14;

    animation:
        flowDash 2.5s linear infinite;
}


.flow-branch {
    stroke:
        rgba(239, 82, 64, .20);

    stroke-width: 1.5;
}


@keyframes flowDash {

    to {
        stroke-dashoffset: -48;
    }

}


/* =====================================================
   GLOWING NODES
===================================================== */

.flow-node {
    position: absolute;

    z-index: 5;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #ef5a46;

    box-shadow:
        0 0 0 5px rgba(239,90,70,.08),
        0 0 22px rgba(239,90,70,.55);

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


@keyframes flowNodePulse {

    0%,
    100% {
        transform: scale(.8);
        opacity: .55;
    }

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

}


/* NODE POSITIONS */

.node-1 {
    left: 420px;
    top: calc(50% - 4px);
}

.node-2 {
    left: 1780px;
    top: calc(50% - 134px);
}

.node-3 {
    left: 2450px;
    top: calc(50% + 126px);
}

.node-4 {
    left: 3100px;
    top: calc(50% - 4px);
}

.node-5 {
    left: 4700px;
    top: calc(50% - 134px);
}

.node-6 {
    left: 5500px;
    top: calc(50% + 126px);
}

.node-7 {
    left: 6500px;
    top: calc(50% - 4px);
    
}
.node-7 {

    width: 12px;
    height: 12px;

    box-shadow:
        0 0 0 7px rgba(239,90,70,.08),
        0 0 30px rgba(239,90,70,.75),
        0 0 65px rgba(239,90,70,.28);

}

.node-8 {
    left: 5920px;
    top: calc(50% + 146px);
}


/* =====================================================
   FLOW CARDS
===================================================== */

.flow-card {
    position: absolute;

    z-index: 10;

    width: 285px;
    min-height: 320px;

    padding: 25px;

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            rgba(19,25,22,.96),
            rgba(9,13,12,.92)
        );

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

    box-shadow:
        0 35px 80px rgba(30,15,10,.20),
        inset 0 1px 0 rgba(255,255,255,.06);

    color: #fff;

    opacity: .18;

    transform:
        translateY(35px)
        scale(.92);

    transition:
        opacity .8s ease,
        transform 1s cubic-bezier(.16,1,.3,1),
        box-shadow .8s ease;

    overflow: hidden;
}


.flow-card::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(239,90,70,.15),
            transparent 35%
        );

    pointer-events: none;
}


.flow-card.is-visible {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


.flow-card.is-current {
    box-shadow:
        0 40px 100px rgba(30,15,10,.28),
        0 0 60px rgba(239,90,70,.10),
        inset 0 1px 0 rgba(255,255,255,.08);
}


/* =====================================================
   CARD POSITIONS
===================================================== */

.flow-card-company {
    left: 520px;
    top: 50%;

    transform:
        translateY(-50%)
        translateY(35px)
        scale(.92);
}


.flow-card-company.is-visible {
    transform:
        translateY(-50%)
        translateY(0)
        scale(1);
}


.flow-card-campaign {
    left: 1120px;
    top: 50%;

    transform:
        translateY(-50%)
        translateY(35px)
        scale(.92);
}


.flow-card-campaign.is-visible {
    transform:
        translateY(-50%)
        translateY(0)
        scale(1);
}


.flow-card-manager {
    left: 1780px;
    top: calc(50% - 245px);
}


.flow-card-platform {
    left: 2450px;
    /*
     * Mirrors .flow-card-manager (50% - 245px) around the
     * centre line: spans 50% - 75px ... 50% + 245px, so it still
     * meets node 3 on the lower curve. The old 50% + 70px ran
     * ~390px below centre and was cut off on shorter screens.
     */
    top: calc(50% - 75px);
}


.flow-card-publisher {
    left: 3100px;
    top: 50%;

    transform:
        translateY(-50%)
        translateY(35px)
        scale(.92);
}


.flow-card-publisher.is-visible {
    transform:
        translateY(-50%)
        translateY(0)
        scale(1);
}


.flow-card-rnd {
    left: 4700px;
    top: calc(50% - 245px);
}


.flow-card-success {
    left: 6100px;
    top: 50%;

    width: 340px;

    min-height: 370px;

    transform:
        translateY(-50%)
        translateY(35px)
        scale(.9);
}


.flow-card-success.is-visible {
    transform:
        translateY(-50%)
        translateY(0)
        scale(1);
}


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

.flow-card-top {
    position: relative;

    z-index: 2;

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 25px;
}


.flow-card-top span {
    font-size: 9px;

    font-weight: 800;

    letter-spacing: .18em;

    color: #ef705d;
}


.flow-card-top small {
    font-size: 9px;

    font-weight: 700;

    letter-spacing: .18em;

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


.flow-card h3 {
    position: relative;

    z-index: 2;

    margin: 18px 0 10px;

    font-size: 30px;

    line-height: .94;

    letter-spacing: -.045em;
}


.flow-card h3 span {
    color: #ef705d;
}


.flow-card p {
    position: relative;

    z-index: 2;

    margin: 0;

    font-size: 11px;

    line-height: 1.65;

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


/* =====================================================
   ICONS
===================================================== */

.flow-card-icon {
    position: relative;

    z-index: 2;

    width: 52px;
    height: 52px;

    display: flex;

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

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #ef5a46,
            #f49b69
        );

    color: #fff;

    font-size: 15px;

    font-weight: 900;

    box-shadow:
        0 10px 30px rgba(239,90,70,.22);
}


.campaign-icon {
    font-size: 28px;
}


.flow-avatar {
    position: relative;

    z-index: 2;

    width: 52px;
    height: 52px;

    display: flex;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #f9a078,
            #e84f40 65%
        );

    font-size: 11px;

    font-weight: 900;

    box-shadow:
        0 10px 35px rgba(239,90,70,.25);
}


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

.flow-card-tags {
    position: relative;

    z-index: 2;

    display: flex;

    gap: 7px;

    margin-top: 22px;
}


.flow-card-tags span {
    padding: 6px 9px;

    border-radius: 999px;

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

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

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .12em;

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


/* =====================================================
   ACTIVE MANAGER
===================================================== */

.flow-mini-status {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 24px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .15em;

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


.flow-mini-status i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #72d59b;

    box-shadow:
        0 0 12px rgba(114,213,155,.7);
}


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

.platform-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: repeat(2, 35px);

    gap: 6px;
}


.platform-grid span {
    width: 35px;
    height: 35px;

    display: flex;

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

    border-radius: 10px;

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

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

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

    font-size: 9px;

    font-weight: 800;
}


/* =====================================================
   PUBLISHER ORBIT
===================================================== */

.publisher-orbit {
    position: relative;

    z-index: 2;

    width: 55px;
    height: 55px;
}


.publisher-orbit::before {
    content: "";

    position: absolute;

    inset: 5px;

    border: 1px solid rgba(239,90,70,.35);

    border-radius: 50%;
}


.publisher-orbit span {
    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #ef705d;
}


.publisher-orbit span:nth-child(1) {
    left: 5px;
    top: 24px;
}


.publisher-orbit span:nth-child(2) {
    right: 5px;
    top: 10px;
}


.publisher-orbit span:nth-child(3) {
    right: 10px;
    bottom: 4px;
}


/* =====================================================
   R&D GRAPH
===================================================== */

.rnd-graph {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: end;

    gap: 6px;

    height: 55px;
}


.rnd-graph span {
    width: 12px;

    border-radius: 5px 5px 2px 2px;

    background:
        linear-gradient(
            to top,
            #ef5a46,
            #f5a174
        );
}


.rnd-graph span:nth-child(1) {
    height: 20px;
}

.rnd-graph span:nth-child(2) {
    height: 29px;
}

.rnd-graph span:nth-child(3) {
    height: 24px;
}

.rnd-graph span:nth-child(4) {
    height: 40px;
}

.rnd-graph span:nth-child(5) {
    height: 51px;
}


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

.flow-card-footer {
    position: absolute;

    left: 25px;
    right: 25px;
    bottom: 20px;

    display: flex;

    justify-content: space-between;

    align-items: center;
}


.flow-card-footer span {
    font-size: 9px;

    font-weight: 800;

    letter-spacing: .16em;

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


.flow-card-footer b {
    color: #ef705d;

    font-size: 14px;
}


/* =====================================================
   SUCCESS CARD
===================================================== */

.success-glow {
    position: absolute;

    width: 220px;
    height: 220px;

    right: -50px;
    top: -70px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(239,90,70,.28),
            transparent 70%
        );

    filter: blur(10px);
}


.success-number {
    position: relative;

    z-index: 2;

    margin-top: 30px;

    font-size: 64px;

    line-height: .9;

    font-weight: 800;

    letter-spacing: -.07em;

    background:
        linear-gradient(
            100deg,
            #fff,
            #ef705d,
            #f5ad78
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


.success-label {
    position: relative;

    z-index: 2;

    margin-top: 8px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .2em;

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


.success-line {
    display: flex;

    align-items: end;

    gap: 5px;

    height: 35px;

    margin-top: 25px;
}


.success-line span {
    width: 18px;

    border-radius: 4px 4px 0 0;

    background: #ef705d;
}


.success-line span:nth-child(1) {
    height: 10px;
}

.success-line span:nth-child(2) {
    height: 14px;
}

.success-line span:nth-child(3) {
    height: 12px;
}

.success-line span:nth-child(4) {
    height: 20px;
}

.success-line span:nth-child(5) {
    height: 27px;
}

.success-line span:nth-child(6) {
    height: 35px;
}


/* =====================================================
   FLOATING LABELS
===================================================== */

.flow-floating-label {
    position: absolute;

    z-index: 7;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 7px 10px;

    border-radius: 999px;

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

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

    backdrop-filter: blur(12px);

    color: rgba(0,0,0,.45);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .15em;
}


.flow-floating-label b {
    color: #ef5a46;
}


.floating-1 {
    left: 1380px;
    top: 22%;
}


.floating-2 {
    left: 3500px;
    top: 70%;
}


.floating-3 {
    left: 5200px;
    top: 18%;
}


/* =====================================================
   PROGRESS
===================================================== */

.flow-progress {
    position: absolute;

    z-index: 30;

    left: 50%;
    bottom: 32px;

    transform: translateX(-50%);

    display: flex;

    align-items: center;

    gap: 15px;

    width: min(520px, 70vw);
}


.flow-progress-number,
.flow-progress-label {
    font-size: 9px;

    font-weight: 800;

    letter-spacing: .18em;

    color: rgba(0,0,0,.45);

    white-space: nowrap;
}


.flow-progress-line {
    position: relative;

    flex: 1;

    height: 1px;

    background: rgba(0,0,0,.12);
}


.flow-progress-line span {
    position: absolute;

    left: 0;
    top: 0;

    width: 0%;
    height: 1px;

    background: #ef5a46;

    box-shadow:
        0 0 10px rgba(239,90,70,.4);
}


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

@media (max-width: 1100px) {

    .flow-intro {
        left: 4vw;
        width: 300px;
    }

    .flow-intro h2 {
        font-size: 46px;
    }

}


/* =====================================================
   MOBILE
   NO HORIZONTAL PINNING
===================================================== */

@media (max-width: 768px) {

    .performance-flow {
        height: auto;

        padding:
            110px
            18px
            100px;

        overflow: hidden;
    }


    .performance-flow-sticky {
        position: relative;

        height: auto;

        display: block;

        overflow: visible;
    }


    .flow-intro {
        position: relative;

        left: auto;
        top: auto;

        width: 100%;

        margin-bottom: 55px;
    }


    .flow-intro h2 {
        font-size: clamp(42px, 12vw, 64px);
    }


    .flow-intro p {
        max-width: 90%;
    }


    .flow-scroll-hint {
        display: none;
    }


    .flow-world {
        position: relative;

        inset: auto;

        overflow: visible;
    }


    .flow-track {
        position: relative;

        left: auto;
        top: auto;

        width: 100%;
        height: auto;

        display: flex;

        flex-direction: column;

        gap: 22px;

        transform: none !important;
    }


    .flow-network {
        display: none;
    }


    .flow-node {
        display: none;
    }


    .flow-card,
    .flow-card-company,
    .flow-card-campaign,
    .flow-card-manager,
    .flow-card-platform,
    .flow-card-publisher,
    .flow-card-rnd,
    .flow-card-success {

        position: relative;

        left: auto;
        top: auto;

        width: 100%;

        min-height: 300px;

        opacity: 1;

        transform: none !important;

        transition: none;
    }


    .flow-card-success {
        width: 100%;
    }


    .flow-floating-label {
        display: none;
    }


    .flow-progress {
        display: none;
    }

}


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

@media (max-width: 480px) {

    .performance-flow {
        padding-left: 14px;
        padding-right: 14px;
    }


    .flow-card {
        padding: 22px;

        border-radius: 21px;
    }


    .flow-card h3 {
        font-size: 27px;
    }


    .success-number {
        font-size: 54px;
    }

}




/* =====================================================
   PERFORMANCE FLOW — STICKY FIX
   Desktop only: this is the pinned horizontal-scroll
   mechanism. Unscoped, it overrode the (max-width: 768px)
   stacked layout above, so on phones the intro sat on top
   of the cards and the section clipped its content.
===================================================== */

@media (min-width: 769px) {

    .performance-flow {
        position: relative;
        width: 100%;
        overflow: visible !important;
    }

    .performance-flow-sticky {
        position: sticky !important;
        position: -webkit-sticky !important;

        top: 0;

        width: 100%;
        height: 100vh;

        overflow: hidden;

        display: flex;
        align-items: center;

        z-index: 1;
    }

    .flow-world {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;

        overflow: hidden;
    }

    .flow-track {
        position: absolute;

        left: 0;
        top: 0;

        width: 700vw;

        height: 100%;

        will-change: transform;
    }

}




/* =====================================================
   PERFORMANCE FLOW — TRANSPARENT BACKGROUND
===================================================== */

.performance-flow {
    background: transparent !important;
}


/* =====================================================
   CAMPAIGN GROWTH DASHBOARD
===================================================== */

.growth-dashboard {

    position: absolute;

    left: 6800px;
    top: 50%;

    z-index: 20;

    width: 560px;
    min-height: 390px;

    padding: 30px;

    border-radius: 34px;

    background:
        linear-gradient(
            145deg,
            rgba(20,25,22,.98),
            rgba(8,12,11,.96)
        );

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

    box-shadow:
        0 45px 100px rgba(20,10,8,.25),
        0 0 80px rgba(239,90,70,.08),
        inset 0 1px 0 rgba(255,255,255,.08);

    color: #fff;

    overflow: hidden;

    opacity: 0;

    transform:
        translateY(-50%)
        scale(.06);

    transform-origin: left center;

    filter: blur(5px);

    pointer-events: none;

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


/* OPEN */

.growth-dashboard.is-open {

    opacity: 1;

    transform:
        translateY(-50%)
        translateX(0)
        scale(1);

    filter: blur(0);

    border-radius: 26px;

}


/* =====================================================
   DASHBOARD TOP
===================================================== */

.dashboard-top {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    padding-bottom: 22px;

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


.dashboard-eyebrow {

    display: block;

    margin-bottom: 8px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .22em;

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


.dashboard-top h3 {

    margin: 0;

    font-size: 34px;

    line-height: .95;

    letter-spacing: -.045em;
}


.dashboard-top h3 span {

    background:
        linear-gradient(
            100deg,
            #ef705d,
            #f5ad78
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


.dashboard-status {

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 7px 10px;

    border-radius: 999px;

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

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

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .15em;

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


.dashboard-status i {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #ef705d;

    box-shadow:
        0 0 12px rgba(239,90,70,.8);

}


/* =====================================================
   MAIN GROWTH AREA
===================================================== */

.dashboard-main {

    display: grid;

    grid-template-columns:
        190px 1fr;

    gap: 30px;

    align-items: center;

    padding: 25px 0;
}


.dashboard-growth span {

    display: block;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .18em;

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


.dashboard-growth strong {

    display: block;

    margin-top: 8px;

    font-size: 52px;

    line-height: .9;

    letter-spacing: -.07em;

    background:
        linear-gradient(
            100deg,
            #fff,
            #ef705d,
            #f5ad78
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


.dashboard-growth small {

    display: block;

    margin-top: 9px;

    font-size: 9px;

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


/* =====================================================
   CHART
===================================================== */

.dashboard-chart {

    position: relative;

    height: 120px;

    display: flex;

    align-items: flex-end;

    gap: 8px;

    padding:
        10px 0 0;

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


.dashboard-chart span {

    flex: 1;

    display: block;

    border-radius:
        5px 5px 0 0;

    background:
        linear-gradient(
            180deg,
            #ef705d,
            rgba(239,90,70,.25)
        );

    transform:
        scaleY(0);

    transform-origin:
        bottom;

    transition:
        transform .8s cubic-bezier(.16,1,.3,1);

}


.growth-dashboard.is-open
.dashboard-chart span {

    transform:
        scaleY(1);

}


.dashboard-chart span:nth-child(1) {
    transition-delay: .12s;
}

.dashboard-chart span:nth-child(2) {
    transition-delay: .18s;
}

.dashboard-chart span:nth-child(3) {
    transition-delay: .24s;
}

.dashboard-chart span:nth-child(4) {
    transition-delay: .30s;
}

.dashboard-chart span:nth-child(5) {
    transition-delay: .36s;
}

.dashboard-chart span:nth-child(6) {
    transition-delay: .42s;
}

.dashboard-chart span:nth-child(7) {
    transition-delay: .48s;
}

.dashboard-chart span:nth-child(8) {
    transition-delay: .54s;
}


/* =====================================================
   METRICS
===================================================== */

.dashboard-metrics {

    display: grid;

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

    gap: 8px;
}


.dashboard-metric {

    padding: 15px;

    border-radius: 14px;

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

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

    opacity: 0;

    transform:
        translateY(15px);

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


.growth-dashboard.is-open
.dashboard-metric {

    opacity: 1;

    transform:
        translateY(0);
}


.dashboard-metric:nth-child(1) {
    transition-delay: .45s;
}

.dashboard-metric:nth-child(2) {
    transition-delay: .52s;
}

.dashboard-metric:nth-child(3) {
    transition-delay: .59s;
}

.dashboard-metric:nth-child(4) {
    transition-delay: .66s;
}


.dashboard-metric span {

    display: block;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .16em;

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


.dashboard-metric strong {

    display: block;

    margin-top: 7px;

    font-size: 19px;

    letter-spacing: -.03em;
}


.dashboard-metric small {

    display: block;

    margin-top: 4px;

    font-size: 9px;

    color:
        #ef705d;
}


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

.dashboard-footer {

    display: flex;

    justify-content: space-between;

    margin-top: 18px;

    padding-top: 15px;

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

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .18em;

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

/* =====================================================
   GROWTH DASHBOARD
   OPENS FROM FINAL NETWORK NODE
===================================================== */

.growth-dashboard {

    --dashboard-progress: 0;

    opacity:
        var(--dashboard-progress);

    transform:
        translateY(-50%)
        translateX(
            calc(
                -300px +
                (300px * var(--dashboard-progress))
            )
        )
        scale(
            calc(
                .035 +
                (.965 * var(--dashboard-progress))
            )
        );

    filter:
        blur(
            calc(
                7px -
                (7px * var(--dashboard-progress))
            )
        );

    border-radius:
        calc(
            42px -
            (16px * var(--dashboard-progress))
        );

    transform-origin:
        left center;

    transition: none;

}


/* CONTENT DOES NOT APPEAR BEFORE THE PANEL */

.growth-dashboard .dashboard-chart span {

    transform:
        scaleY(
            var(--dashboard-progress)
        );

    opacity:
        var(--dashboard-progress);

    transition: none;

}


.growth-dashboard .dashboard-metric {

    opacity:
        var(--dashboard-progress);

    transform:
        translateY(
            calc(
                18px -
                (18px * var(--dashboard-progress))
            )
        );

    transition: none;

}



/* =====================================================
   GROWTH DASHBOARD — MOBILE
   No horizontal journey below 769px, so show the panel
   fully open as the last card in the stacked flow.
===================================================== */

@media (max-width: 768px) {

    .growth-dashboard {
        --dashboard-progress: 1;

        position: relative;
        left: auto;
        top: auto;

        width: 100%;
        min-height: 0;
        padding: 24px;

        transform: none;
        filter: none;
        pointer-events: auto;
    }

    .growth-dashboard .dashboard-main {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .growth-dashboard .dashboard-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* =====================================================
   MYFUNADS ENGINE
===================================================== */

.engine-section {

    position: relative;

    width: 100%;
    min-height: 100vh;

    padding: 150px 6vw 110px;

    overflow: hidden;

    background: transparent;

}


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

.engine-bg-glow {

    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;

    opacity: .35;

}

.engine-bg-glow-one {

    left: -180px;
    top: 35%;

    background: rgba(239, 90, 70, .20);

}

.engine-bg-glow-two {

    right: -180px;
    top: 15%;

    background: rgba(255, 170, 120, .25);

}


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

.engine-header {

    position: relative;

    z-index: 5;

    max-width: 760px;

    margin: 0 auto;

    text-align: center;

}

.engine-eyebrow {

    display: block;

    margin-bottom: 18px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .28em;

    color: #8e7770;

}

.engine-header h2 {

    margin: 0;

    font-size: clamp(48px, 6vw, 92px);

    line-height: .92;

    letter-spacing: -.055em;

    color: #171514;

}

.engine-header h2 span {

    display: block;

    color: #ef5a46;

}

.engine-header p {

    max-width: 520px;

    margin: 28px auto 0;

    font-size: 14px;

    line-height: 1.8;

    color: #766864;

}


/* =====================================================
   ENGINE STAGE
===================================================== */

.engine-stage {

    position: relative;

    z-index: 5;

    max-width: 1250px;

    min-height: 560px;

    margin: 90px auto 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: rgba(239, 90, 70, .20);

    border-radius: 50px;



}


/* =====================================================
   SIDE COLUMNS
===================================================== */

.engine-side {

    width: 285px;

    display: flex;

    flex-direction: column;

    gap: 130px;

}

.engine-side-left {

    align-items: flex-end;

}

.engine-side-right {

    align-items: flex-start;

}


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

.engine-card {

    position: relative;

    width: 250px;

    min-height: 150px;

    padding: 25px;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.82),
            rgba(255,247,243,.65)
        );

    border: 1px solid rgba(70,40,30,.08);

    box-shadow:
        0 25px 60px rgba(70,35,25,.10),
        inset 0 1px 0 rgba(255,255,255,.9);

    backdrop-filter: blur(20px);

    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.16,1,.3,1),
        box-shadow .4s ease;

}

.engine-card.is-visible {

    opacity: 1;

    transform: translateY(0);

}

.engine-card:hover {

    transform: translateY(-8px);

    box-shadow:
        0 35px 80px rgba(70,35,25,.15),
        inset 0 1px 0 rgba(255,255,255,.95);

}

.engine-card-number {

    position: absolute;

    top: 18px;
    right: 20px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .2em;

    color: #aa938c;

}

.engine-card-icon {

    width: 36px;
    height: 36px;

    display: flex;

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

    margin-bottom: 22px;

    border-radius: 12px;

    background: rgba(239,90,70,.10);

    color: #ef5a46;

    font-size: 17px;

}

.engine-card small {

    display: block;

    margin-bottom: 6px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .22em;

    color: #a18b84;

}

.engine-card h3 {

    margin: 0;

    font-size: 25px;

    letter-spacing: -.04em;

    color: #1b1715;

}

.engine-card p {

    margin: 9px 0 0;

    font-size: 10px;

    line-height: 1.6;

    color: #85746e;

}


/* =====================================================
   CENTRAL ENGINE
===================================================== */

.engine-core-wrap {

    position: relative;

    width: 360px;
    height: 360px;

    display: flex;

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

}


/* ORBITS */

.engine-orbit {

    position: absolute;

    border: 1px solid rgba(239,90,70,.16);

    border-radius: 50%;

    pointer-events: none;

}

.engine-orbit-one {

    width: 230px;
    height: 230px;

    animation:
        engineOrbit 18s linear infinite;

}

.engine-orbit-two {

    width: 300px;
    height: 300px;

    border-style: dashed;

    animation:
        engineOrbitReverse 24s linear infinite;

}

.engine-orbit-three {

    width: 350px;
    height: 350px;

    border-color: rgba(239,90,70,.08);

    animation:
        engineOrbit 32s linear infinite;

}


/* CORE */

.engine-core {

    position: relative;

    z-index: 5;

    width: 150px;
    height: 150px;

    display: flex;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #383331,
            #171514 68%,
            #0b0a09 100%
        );

    box-shadow:
        0 35px 80px rgba(30,15,10,.25),
        0 0 70px rgba(239,90,70,.18);

}

.engine-core-inner {

    display: flex;

    flex-direction: column;

    align-items: center;

}

.engine-core-inner span {

    font-size: 42px;

    font-weight: 900;

    letter-spacing: -.08em;

    color: white;

}

.engine-core-inner b {

    margin-top: 4px;

    font-size: 9px;

    letter-spacing: .35em;

    color: #ef5a46;

}


/* PULSE */

.engine-core-pulse {

    position: absolute;

    width: 150px;
    height: 150px;

    border-radius: 50%;

    border: 1px solid rgba(239,90,70,.35);

    animation:
        enginePulse 2.8s ease-out infinite;

}


/* =====================================================
   CONNECTION LINES
===================================================== */

.engine-line {

    position: absolute;

    top: 50%;

    width: 145px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(239,90,70,.45),
            transparent
        );

    transform: translateY(-50%);

}

.engine-line::after {

    content: "";

    position: absolute;

    top: -3px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #ef5a46;

    box-shadow:
        0 0 18px rgba(239,90,70,.7);

    animation:
        engineSignal 2.5s linear infinite;

}

.engine-line-left {

    left: calc(50% - 325px);

}

.engine-line-right {

    right: calc(50% - 325px);

}

.engine-line-right::after {

    animation-delay: 1.25s;

}


/* =====================================================
   RESULT
===================================================== */

.engine-result {

    position: relative;

    z-index: 5;

    display: flex;

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

    gap: 20px;

    margin-top: 20px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .22em;

    color: #927b74;

}

.engine-result i {

    font-style: normal;

    color: #ef5a46;

}

.engine-result strong {

    color: #ef5a46;

}


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

@keyframes engineOrbit {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

@keyframes engineOrbitReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }

}

@keyframes enginePulse {

    0% {
        transform: scale(.85);
        opacity: .8;
    }

    70% {
        transform: scale(1.45);
        opacity: 0;
    }

    100% {
        transform: scale(1.45);
        opacity: 0;
    }

}

@keyframes engineSignal {

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

    15% {
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    100% {
        left: calc(100% - 7px);
        opacity: 0;
    }

}


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

@media (max-width: 768px) {

    .engine-section {

        padding:
            100px 20px 80px;

    }

    .engine-header h2 {

        font-size: 52px;

    }

    .engine-header p {

        font-size: 12px;

    }

    .engine-stage {

        min-height: auto;

        margin-top: 70px;

        flex-direction: column;

        gap: 55px;

    }

    .engine-side {

        width: 100%;

        gap: 25px;

        align-items: center;

    }

    .engine-side-left {

        order: 1;

    }

    .engine-core-wrap {

        order: 2;

        width: 300px;
        height: 300px;

    }

    .engine-side-right {

        order: 3;

    }

    .engine-card {

        width: min(100%, 310px);

    }

    .engine-line {

        display: none;

    }

    .engine-result {

        flex-wrap: wrap;

        gap: 10px;

        margin-top: 50px;

        line-height: 2;

    }

}



/* =====================================================
   MYFUNADS — PERFORMANCE MODELS 3D CAROUSEL
===================================================== */

.models-section {

    position: relative;

    width: 100%;
    min-height: 120vh;

    padding: 120px 5vw 70px;

    overflow: hidden;

    background: transparent;

    perspective: 1600px;

}


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

.models-header {

    position: relative;

    z-index: 10;

    max-width: 700px;

    margin: 0 auto;

    text-align: center;

}


.models-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .24em;

    color: #777;

}


.models-eyebrow::before {

    content: "";

    width: 28px;
    height: 1px;

    background: #ff6742;

}


.models-header h2 {

    margin: 0;

    font-size: clamp(44px, 5vw, 76px);

    line-height: .94;

    letter-spacing: -.055em;

    font-weight: 500;

    color: #171313;

}


.models-header h2 span {

    color: #e65d3d;

}


.models-header p {

    max-width: 480px;

    margin: 24px auto 0;

    font-size: 14px;

    line-height: 1.7;

    color: #777;

}


/* =====================================================
   CAROUSEL
===================================================== */

.models-carousel {

    position: relative;

    width: 100%;

    /* fits the zoomed (translateZ 260px) active card plus the
       controls below it without touching the intro text */
    height: 660px;

    margin-top: 35px;

    display: flex;

    justify-content: center;

    align-items: center;

    perspective: 1500px;

}


.models-stage {

    position: relative;

    width: 340px;

    height: 430px;

    transform-style: preserve-3d;

}


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

.model-card {

    position: absolute;

    left: 0;
    top: 0;

    width: 340px;
    height: 430px;

    padding: 30px;

    border-radius: 28px;

    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            rgba(35, 31, 30, .98),
            rgba(14, 13, 13, .98)
        );

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

    box-shadow:
        0 35px 80px rgba(20, 10, 8, .25),
        inset 0 1px 0 rgba(255,255,255,.08);

    color: #fff;

    transform-style: preserve-3d;

    transition:
        transform .8s cubic-bezier(.22,.61,.36,1),
        opacity .8s ease,
        filter .8s ease;

    overflow: hidden;

}


.model-card::before {

    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -90px;
    top: -80px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 103, 63, .35),
            transparent 68%
        );

    filter: blur(10px);

}


.model-card::after {

    content: "";

    position: absolute;

    inset: 1px;

    border-radius: 27px;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.08),
            transparent 35%,
            transparent 70%,
            rgba(255,103,63,.08)
        );

}


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

.model-number {

    position: relative;

    z-index: 2;

    font-size: 10px;

    letter-spacing: .18em;

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

}


.model-icon {

    position: relative;

    z-index: 2;

    width: 74px;
    height: 74px;

    margin-top: 48px;

    display: flex;

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

    border-radius: 50%;

    font-size: 17px;

    font-weight: 700;

    color: #fff;

    background:
        radial-gradient(
            circle at 35% 30%,
            #ff977b,
            #e65334 60%,
            #8f2e20
        );

    box-shadow:
        0 0 35px rgba(255,91,55,.25);

}


.model-label {

    position: relative;

    z-index: 2;

    display: block;

    margin-top: 35px;

    font-size: 9px;

    letter-spacing: .2em;

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

}


.model-card h3 {

    position: relative;

    z-index: 2;

    margin: 12px 0 0;

    font-size: 40px;

    line-height: .95;

    letter-spacing: -.045em;

    font-weight: 500;

}


.model-card h3 span {

    color: #ff7655;

}


.model-card p {

    position: relative;

    z-index: 2;

    max-width: 260px;

    margin-top: 20px;

    font-size: 12px;

    line-height: 1.7;

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

}


.model-footer {

    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 25px;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 16px;

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

    font-size: 9px;

    letter-spacing: .15em;

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

}


.model-footer b {

    color: #ff7655;

}


/* =====================================================
   CAROUSEL STATES
===================================================== */

.model-card.is-active {

    z-index: 10;

    opacity: 1;

    filter: brightness(1);

}


.model-card.is-side {

    opacity: .72;

    filter: brightness(.72);

}


.model-card.is-far {

    opacity: .25;

    filter: brightness(.45);

}


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

.models-controls {

    position: relative;

    z-index: 20;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 28px;

    margin-top: -5px;

}


.models-arrow {

    width: 54px;
    height: 54px;

    border-radius: 50%;

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

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

    backdrop-filter: blur(12px);

    font-size: 20px;

    color: #171313;

    cursor: pointer;

    transition:
        transform .3s ease,
        background .3s ease;

}


.models-arrow:hover {

    transform: scale(1.08);

    background: #fff;

}


.models-counter {

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 10px;

    letter-spacing: .15em;

    color: #777;

}


.models-counter span:first-child {

    color: #171313;

    font-weight: 700;

}


.models-counter i {

    display: block;

    width: 35px;

    height: 1px;

    background: #bbb;

}


/* =====================================================
   BOTTOM CAPTION
===================================================== */

.models-caption {

    position: absolute;

    left: 5vw;
    right: 5vw;
    bottom: 25px;

    display: flex;

    justify-content: space-between;

    font-size: 9px;

    letter-spacing: .18em;

    color: rgba(30,25,23,.4);

}


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

@media (max-width: 768px) {

    .models-section {

        min-height: auto;

        padding:
            90px
            18px
            90px;

    }


    .models-header h2 {

        font-size: 44px;

    }


    .models-header p {

        font-size: 13px;

    }


    .models-carousel {

        /* single size source for stage + cards on phones */
        --models-card-w: min(290px, calc(100vw - 72px));
        --models-stage-h: 400px;

        height: 520px;

        margin-top: 40px;

    }


    .models-stage {

        width: var(--models-card-w);
        height: var(--models-stage-h);

    }


    .model-card {

        width: var(--models-card-w);
        height: var(--models-stage-h);

        padding: 25px;

    }


    .model-card h3 {

        font-size: 34px;

    }


    .model-icon {

        margin-top: 38px;

    }


    .model-footer {

        left: 25px;
        right: 25px;

    }


    .models-controls {

        margin-top: 0;

    }


    .models-caption {

        left: 18px;
        right: 18px;

    }

}


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

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

    .model-card {

        transition: none;

    }

}

/* =========================================================
   MYFUNADS MODEL CARDS — TRUE WHOLE CARD FLIP
========================================================= */

/* OUTER CARD = ONLY CAROUSEL POSITION */
.model-card {
    padding: 0 !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    overflow: visible !important;

    perspective: 1400px;
    transform-style: preserve-3d;
}


/* =========================================================
   INNER = THE ACTUAL CARD THAT FLIPS
========================================================= */

.model-card-inner {

    position: relative;

    width: 100%;
    height: 100%;

    transform-style: preserve-3d;

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

}


/* =========================================================
   BOTH CARD FACES
========================================================= */

.model-card-front,
.model-card-back {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    box-sizing: border-box;

    border-radius: 28px;

    overflow: hidden;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    transform-style: preserve-3d;

}


/* =========================================================
   FRONT CARD
========================================================= */

.model-card-front {

    padding: 30px;

    background:
        radial-gradient(
            circle at 75% 15%,
            rgba(255,103,63,.12),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            rgba(35,31,30,.98),
            rgba(14,13,13,.98)
        );

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

    box-shadow:
        0 35px 80px rgba(20,10,8,.25),
        inset 0 1px 0 rgba(255,255,255,.08);

}


/* =========================================================
   BACK CARD
========================================================= */

.model-card-back {

    padding: 30px;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(255,125,76,.30),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 85%,
            rgba(255,73,42,.16),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #35231e,
            #17100e
        );

    border: 1px solid rgba(255,120,80,.25);

    box-shadow:
        0 35px 80px rgba(50,20,10,.30),
        inset 0 1px 0 rgba(255,180,140,.12);

    transform: rotateY(180deg);

}


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

.model-card-back::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: 28px 28px;

    opacity: .65;

    pointer-events: none;

}


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

.model-back-label {

    position: relative;

    z-index: 2;

    font-size: 9px;

    letter-spacing: .22em;

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

}


.model-back-icon {

    position: relative;

    z-index: 2;

    flex-shrink: 0;

    width: 68px;

    height: 68px;

    margin-top: 22px;

    display: flex;

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

    border-radius: 50%;

    font-size: 15px;

    font-weight: 700;

    color: #fff;

    background:
        radial-gradient(
            circle at 35% 30%,
            #ffb08f,
            #e65334 60%,
            #8f2e20
        );

    box-shadow:
        0 0 35px rgba(255,91,55,.25),
        inset 0 0 18px rgba(255,255,255,.15);

}


.model-card-back h3 {

    position: relative;

    z-index: 2;

    margin: 18px 0 0;

    font-size: 30px;

    line-height: .98;

    letter-spacing: -.045em;

    font-weight: 500;

}


.model-card-back h3 span {

    color: #ff7655;

}


.model-card-back p {

    position: relative;

    z-index: 2;

    margin-top: 12px;

    max-width: 280px;

    font-size: 11px;

    line-height: 1.65;

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

}


.model-detail-row {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-top: 10px;

    padding-top: 9px;

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

}


.model-detail-row span {

    font-size: 9px;

    letter-spacing: .16em;

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

}


.model-detail-row strong {

    font-size: 9px;

    letter-spacing: .12em;

    color: #ff7655;

}


.model-back-footer {

    /*
     * In the flex column (not absolutely positioned): pushed to
     * the bottom with margin-top: auto, so longer copy can never
     * run underneath it as it did before.
     */
    position: relative;

    margin-top: auto;

    padding-top: 14px;

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

    font-size: 9px;

    letter-spacing: .18em;

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

    z-index: 2;

}


/* =========================================================
   ONLY ACTIVE CARD CAN FLIP
========================================================= */

.model-card.is-active:hover .model-card-inner {

    transform: rotateY(180deg);

}


/* SIDE CARDS NEVER FLIP */

.model-card.is-side:hover .model-card-inner,
.model-card.is-far:hover .model-card-inner {

    transform: rotateY(0deg);

}


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

@media (max-width:768px) {

    .model-card-front,
    .model-card-back {

        border-radius: 24px;

        padding: 25px;

    }

    .model-card-back h3 {

        font-size: 26px;

    }


    .model-back-icon {

        width: 58px;

        height: 58px;

        margin-top: 16px;

    }

    .model-back-footer {

        margin-bottom: -4px;

    }

}


/* =========================================================
   FINAL — MODEL CAROUSEL CENTER ALIGNMENT
   DO NOT TOUCH CARD FLIP
========================================================= */

/* Keep the 3D stage locked to the exact center */
.models-carousel {
    position: relative !important;
}


/* The stage itself is the center anchor */
.models-stage {
    position: absolute !important;

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

    /* sized from the card (see the 768px models block)
       so the active card stays centred on small screens */
    width: var(--models-card-w, 340px) !important;
    height: var(--models-stage-h, 500px) !important;

    margin: 0 !important;

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

    transform-style: preserve-3d !important;
}


/* Cards stay exactly on the stage origin.
   JS controls their 3D positions. */
.model-card {
    left: 0 !important;
    top: 0 !important;

    margin: 0 !important;

    transform-origin: center center !important;
}


/* Controls remain BELOW the carousel,
   centered independently */
.models-controls {
    position: absolute !important;

    left: 50% !important;
    bottom: -10px !important;

    transform: translateX(-50%) !important;

    margin: 0 !important;

    width: max-content !important;

    display: flex !important;

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

    gap: 28px !important;

    z-index: 50 !important;
}


/* Don't let button hover transform
   move the whole controls container */
.models-controls .models-arrow {
    position: relative !important;

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

    transform: none;
}


/* Only the button itself scales */
.models-controls .models-arrow:hover {
    transform: scale(1.08);
}




/* =========================================================
   MYFUNADS — ADVERTISER NETWORK
   INFINITE LOOP SLIDER
========================================================= */

.advertisers-section {

    position: relative;

    width: 100%;
    min-height: 100vh;

    padding: 130px 0 100px;

    overflow: hidden;

    background: transparent;

}


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

.advertisers-glow {

    position: absolute;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    filter: blur(90px);

    pointer-events: none;

    opacity: .25;

}

.advertisers-glow-one {

    left: -100px;
    top: 40%;

    background: rgba(70, 190, 255, .30);

}

.advertisers-glow-two {

    right: -100px;
    top: 20%;

    background: rgba(255, 100, 90, .25);

}


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

.advertisers-header {

    position: relative;

    z-index: 10;

    width: min(700px, 90%);

    margin: 0 auto;

    text-align: center;

}

.advertisers-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .25em;

    color: #777;

}

.advertisers-eyebrow::before {

    content: "";

    width: 26px;
    height: 1px;

    background: #ef6748;

}

.advertisers-header h2 {

    margin: 0;

    font-size: clamp(
        48px,
        6vw,
        86px
    );

    line-height: .92;

    letter-spacing: -.06em;

    font-weight: 500;

    color: #151313;

}

.advertisers-header h2 span {

    color: #ef6045;

}

.advertisers-header p {

    max-width: 520px;

    margin: 25px auto 0;

    font-size: 14px;

    line-height: 1.7;

    color: #777;

}


/* =========================================================
   ADVERTISER WORLD
========================================================= */

.advertisers-world {

    position: relative;

    width: 100%;

    height: 480px;

    margin-top: 35px;

    overflow: hidden;

    perspective: 1200px;

}




/* Keep the existing marquee animations and durations. */

/* =========================================================
   LOOP
========================================================= */

.advertiser-loop {

    position: absolute;

    left: 0;
    right: 0;

    width: 100%;

    overflow: hidden;

    z-index: 4;

}

.advertiser-loop:first-of-type {
    top: 110px;
    transform: none;
}

.advertiser-loop-reverse {
    top: 285px;
    transform: none;
    opacity: .82;
}


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

.advertiser-loop-track {

    display: flex;

    align-items: center;

    width: max-content;

    gap: 28px;

    animation:
        advertiserLoop
        32s
        linear
        infinite;

    will-change: transform;

}

.advertiser-loop-reverse
.advertiser-loop-track {

    animation:
        advertiserLoopReverse
        38s
        linear
        infinite;

}


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

.advertiser-card {
    position: relative;
    flex: 0 0 190px;
    width: 190px;
    height: 120px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.45);
    box-shadow:
        0 25px 55px rgba(30,20,20,.12),
        inset 0 1px 0 rgba(255,255,255,.45);
    backdrop-filter: blur(12px);
    transform: none;
    transition: box-shadow .4s ease;
}

/* V2 FIX: Advertiser marquee logo fitting */
.advertiser-card img {
    display: block;
    width: 100%;
    height: 100%;
    flex: 0 0 70px;
    object-fit: contain;
    object-position: center;
    box-sizing: border-box;
}
.advertiser-card strong {
    color: black;
    display: block;
    width: 100%;
    text-align: center;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 600;
    margin-top: 4px;
}
/* Keep the reverse marquee cards level */

/* Keep the existing marquee animations and durations. */


/* LOGO MARK */

.advertiser-mark {

    width: 42px;
    height: 42px;

    display: flex;

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

    border-radius: 13px;

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

    font-size: 17px;

    font-weight: 700;

}

.advertiser-card strong {

    font-size: 16px;

    font-weight: 600;

    letter-spacing: -.02em;

}


/* =========================================================
   CARD COLORS
========================================================= */

.advertiser-card-blue {

    background:
        linear-gradient(
            145deg,
            #42c8f5,
            #58b4eb
        );

    color: #fff;

    --card-angle: -5deg;

}

.advertiser-card-purple {

    background:
        linear-gradient(
            145deg,
            #9d54b4,
            #73417e
        );

    color: #fff;

    --card-angle: 5deg;

}

.advertiser-card-dark {

    background:
        linear-gradient(
            145deg,
            #191919,
            #343434
        );

    color: #fff;

    --card-angle: -4deg;

}

.advertiser-card-orange {

    background:
        linear-gradient(
            145deg,
            #ff9b79,
            #ef7057
        );

    color: #fff;

    --card-angle: 5deg;

}

.advertiser-card-green {

    background:
        linear-gradient(
            145deg,
            #789b9d,
            #46686c
        );

    color: #fff;

    --card-angle: -4deg;

}

.advertiser-card-pink {

    background:
        linear-gradient(
            145deg,
            #ffaaa8,
            #f58484
        );

    color: #fff;

    --card-angle: 4deg;

}

.advertiser-card-black {

    background:
        linear-gradient(
            145deg,
            #111,
            #292929
        );

    color: #fff;

    --card-angle: -5deg;

}

.advertiser-card-yellow {

    background:
        linear-gradient(
            145deg,
            #f4c969,
            #dcae4f
        );

    color: #242018;

    --card-angle: 5deg;

}


/* SECOND ROW */

.advertiser-card-soft {

    background: #e9e7e3;

    color: #393634;

    --card-angle: 5deg;

}

.advertiser-card-lilac {

    background: #cbb8df;

    color: #fff;

    --card-angle: -4deg;

}

.advertiser-card-slate {

    background: #68747b;

    color: #fff;

    --card-angle: 5deg;

}

.advertiser-card-coral {

    background: #f28a78;

    color: #fff;

    --card-angle: -5deg;

}

.advertiser-card-teal {

    background: #5f8f91;

    color: #fff;

    --card-angle: 4deg;

}

.advertiser-card-violet {

    background: #7769a4;

    color: #fff;

    --card-angle: -4deg;

}


/* =========================================================
   FLOATING BACKGROUND CARDS
========================================================= */

.advertiser-float-card {

    position: absolute;

    z-index: 2;

    width: 115px;
    height: 85px;

    display: flex;

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

    border-radius: 20px;

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

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

    box-shadow:
        0 20px 40px rgba(40,20,20,.08);

    backdrop-filter:
        blur(15px);

    font-size: 9px;

    letter-spacing: .12em;

    color: rgba(40,30,30,.35);

    filter: blur(.2px);

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

}

.float-card-1 {

    left: 7%;
    top: 18%;

    transform: rotate(-10deg);

}

.float-card-2 {

    right: 8%;
    top: 10%;

    transform: rotate(9deg);

    animation-delay: -2s;

}

.float-card-3 {

    left: 13%;
    bottom: 12%;

    transform: rotate(8deg);

    animation-delay: -4s;

}

.float-card-4 {

    right: 12%;
    bottom: 14%;

    transform: rotate(-8deg);

    animation-delay: -1s;

}


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

.advertisers-center-label {

    position: absolute;

    left: 50%;
    top: 50%;

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

    z-index: 8;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 10px 18px;

    border-radius: 50px;

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

    border:
        1px solid rgba(30,20,20,.07);

    box-shadow:
        0 15px 40px rgba(30,20,20,.08);

    backdrop-filter:
        blur(18px);

    font-size: 9px;

    letter-spacing: .22em;

    color: #777;

}

.center-label-line {

    width: 24px;
    height: 1px;

    background: rgba(239,96,69,.5);

}


/* =========================================================
   PAUSE ON HOVER
========================================================= */

.advertiser-loop:hover
.advertiser-loop-track {

    animation-play-state: paused;

}


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

@keyframes advertiserLoop {

    from {

        transform:
            translateX(0);

    }

    to {

        transform:
            translateX(-50%);

    }

}


@keyframes advertiserLoopReverse {

    from {

        transform:
            translateX(-50%);

    }

    to {

        transform:
            translateX(0);

    }

}


@keyframes advertiserFloat {

    0%,
    100% {

        translate:
            0 0;

    }

    50% {

        translate:
            0 -12px;

    }

}


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

.advertisers-bottom {

    position: absolute;

    left: 5vw;
    right: 5vw;

    bottom: 28px;

    display: flex;

    justify-content: space-between;

    font-size: 9px;

    letter-spacing: .18em;

    color: rgba(30,25,23,.38);

}


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

@media (max-width: 768px) {

    .advertisers-section {

        min-height: auto;

        padding:
            100px
            0
            80px;

    }

    .advertisers-header {

        width: 88%;

    }

    .advertisers-header h2 {

        font-size: 46px;

    }

    .advertisers-header p {

        font-size: 13px;

    }

    .advertisers-world {

        height: 390px;

        margin-top: 25px;

    }

    .advertiser-card {

        flex-basis: 150px;

        width: 150px;
        height: 105px;

        border-radius: 20px;

    }

    .advertiser-card strong {

        font-size: 12px;

    }

    .advertiser-mark {

        width: 34px;
        height: 34px;

        font-size: 14px;

    }

    .advertiser-loop:first-of-type {

        top: 95px;

    }

    .advertiser-loop-reverse {

        top: 240px;

    }

    .advertiser-float-card {

        opacity: .45;

        transform: scale(.7);

    }

    .advertisers-center-label {

        display: none;

    }

    .advertisers-bottom {

        position: relative;

        left: auto;
        right: auto;
        bottom: auto;

        width: 88%;

        margin:
            25px auto
            0;

        flex-wrap: wrap;

        gap: 12px 25px;

    }

}



/* =========================================================
   MYFUNADS — HOW IT WORKS
========================================================= */

.how-it-works {

    position: relative;

    width: 100%;

    min-height: 100vh;

    padding: 130px 6vw 100px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 70% 55%,
            rgba(255, 104, 73, .10),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #ffffff,
            #fff8f5
        );

}


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

.how-it-works-header {

    width: min(760px, 90%);

    margin: 0 auto;

    text-align: center;

}


.how-eyebrow {

    font-size: 9px;

    letter-spacing: .24em;

    font-weight: 700;

    color: #777;

}


.how-it-works-header h2 {

    margin: 18px 0 0;

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

    line-height: .92;

    letter-spacing: -.065em;

    font-weight: 500;

    color: #171313;

}


.how-it-works-header h2 span {

    color: #ef6347;

}


.how-it-works-header p {

    max-width: 570px;

    margin: 25px auto 0;

    font-size: 14px;

    line-height: 1.7;

    color: #777;

}


/* =========================================================
   TABS
========================================================= */

.how-tabs-wrap {

    width: min(1050px, 90%);

    margin: 55px auto 0;

}


.how-tabs {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 7px;

    border-radius: 60px;

    background: #eeeeef;

}


.how-tab {

    position: relative;

    flex: 1;

    min-height: 54px;

    border: 0;

    border-radius: 50px;

    background: transparent;

    color: #252222;

    font-size: 14px;

    cursor: pointer;

    transition:
        background .4s ease,
        color .4s ease,
        transform .3s ease;

}


.how-tab:hover {

    transform: translateY(-1px);

}


.how-tab.is-active {

    background: #fff;

    color: #171313;

    box-shadow:
        0 8px 25px rgba(30,20,20,.08);

}


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

.how-content {

    width: min(1250px, 90%);

    min-height: 520px;

    margin: 75px auto 0;

    display: grid;

    grid-template-columns:
        .85fr
        1.15fr;

    align-items: center;

    gap: 70px;

}


/* =========================================================
   LEFT COPY
========================================================= */

.how-copy {

    position: relative;

}


.how-step-number {

    font-size: 11px;

    letter-spacing: .18em;

    color: #ef6347;

}


.how-current-label {

    display: block;

    margin-top: 12px;

    font-size: 9px;

    letter-spacing: .22em;

    color: #999;

}


.how-copy h3 {

    margin: 20px 0 0;

    font-size: clamp(
        42px,
        5vw,
        68px
    );

    line-height: .95;

    letter-spacing: -.055em;

    font-weight: 500;

    color: #171313;

}


.how-copy h3 span {

    color: #ef6347;

}


.how-copy > p {

    max-width: 500px;

    margin-top: 25px;

    font-size: 14px;

    line-height: 1.8;

    color: #777;

}


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

.how-points {

    margin-top: 32px;

}


.how-point {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 12px 0;

    border-bottom:
        1px solid rgba(20,15,15,.08);

}


.how-point span {

    width: 26px;

    font-size: 9px;

    letter-spacing: .12em;

    color: #ef6347;

}


.how-point p {

    margin: 0;

    font-size: 12px;

    color: #5e5a59;

}


/* =========================================================
   DASHBOARD
========================================================= */

.how-dashboard-wrap {

    position: relative;

    min-height: 470px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.how-dashboard {

    position: relative;

    width: min(650px, 100%);

    min-height: 405px;

    border-radius: 25px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #292525,
            #111010
        );

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

    box-shadow:
        0 40px 90px rgba(30,15,10,.20),
        0 0 80px rgba(255,90,60,.08);

    transition:
        transform .6s cubic-bezier(.22,.61,.36,1),
        opacity .45s ease;

}


/* =========================================================
   DASHBOARD TOP
========================================================= */

.how-dashboard .dashboard-top {

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 20px;

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

}


.how-dashboard .dashboard-brand {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .12em;

    color: #fff;

}


.how-dashboard .dashboard-brand-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #ff694b;

    box-shadow:
        0 0 12px rgba(255,105,75,.7);

}


.how-dashboard .dashboard-top-status {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 7px;

    letter-spacing: .16em;

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

}


.how-dashboard .dashboard-top-status span {

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #63d69b;

}


/* =========================================================
   DASHBOARD BODY
========================================================= */

.how-dashboard .dashboard-body {

    display: flex;

    min-height: 350px;

}


.how-dashboard .dashboard-sidebar {

    width: 55px;

    flex-shrink: 0;

    padding-top: 25px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 22px;

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

}


.how-dashboard .dashboard-sidebar i {

    display: block;

    width: 15px;
    height: 15px;

    border-radius: 4px;

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

}


.how-dashboard .dashboard-side-active {

    position: absolute;

    left: 0;

    width: 3px;
    height: 30px;

    border-radius: 0 4px 4px 0;

    background: #ff694b;

}


/* =========================================================
   DASHBOARD MAIN
========================================================= */

.how-dashboard .dashboard-main {

    flex: 1;

    padding: 25px;

}


.how-dashboard .dashboard-heading {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

}


.how-dashboard .dashboard-heading small {

    font-size: 7px;

    letter-spacing: .18em;

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

}


.how-dashboard .dashboard-heading h4 {

    margin: 7px 0 0;

    font-size: 20px;

    font-weight: 500;

    color: #fff;

}


.how-dashboard .dashboard-date {

    padding: 7px 10px;

    border-radius: 20px;

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

    font-size: 7px;

    letter-spacing: .12em;

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

}


/* =========================================================
   METRICS
========================================================= */

.how-dashboard .dashboard-metrics {

    display: grid;

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

    gap: 10px;

    margin-top: 22px;

}


.how-dashboard .dashboard-metric {

    padding: 14px;

    border-radius: 12px;

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

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

}


.how-dashboard .dashboard-metric small {

    display: block;

    font-size: 6px;

    letter-spacing: .14em;

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

}


.how-dashboard .dashboard-metric strong {

    display: block;

    margin-top: 8px;

    font-size: 21px;

    font-weight: 500;

    color: #fff;

}


.how-dashboard .dashboard-metric span {

    display: block;

    margin-top: 4px;

    font-size: 7px;

    color: #63d69b;

}


/* =========================================================
   CHART
========================================================= */

.how-dashboard .dashboard-chart {

    margin-top: 15px;

    padding: 15px;

    border-radius: 13px;

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

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

}


.how-dashboard .chart-heading {

    display: flex;

    justify-content: space-between;

    font-size: 6px;

    letter-spacing: .14em;

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

}


.how-dashboard .chart-area {

    position: relative;

    height: 115px;

    margin-top: 12px;

}


.how-dashboard .chart-grid {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            rgba(255,255,255,.045) 1px,
            transparent 1px
        );

    background-size:
        100% 25%;

}


.how-dashboard .chart-area svg {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

}


.how-dashboard .chart-fill {

    fill:
        url(#chartGradient);

}


.how-dashboard .chart-line {

    fill: none;

    stroke: #ff694b;

    stroke-width: 3;

}


.how-dashboard .chart-point {

    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #ff694b;

    box-shadow:
        0 0 12px rgba(255,105,75,.8);

}


.how-dashboard .point-one {

    left: 37%;

    top: 48%;

}


.how-dashboard .point-two {

    left: 65%;

    top: 25%;

}


.how-dashboard .point-three {

    right: 3%;

    top: 8%;

}


/* =========================================================
   BOTTOM MINI CARDS
========================================================= */

.how-dashboard .dashboard-bottom {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;

    margin-top: 10px;

}


.how-dashboard .dashboard-mini-card {

    padding: 12px;

    border-radius: 11px;

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

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

}


.how-dashboard .dashboard-mini-card small {

    display: block;

    font-size: 6px;

    letter-spacing: .14em;

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

}


.how-dashboard .dashboard-mini-card strong {

    display: block;

    margin-top: 6px;

    font-size: 14px;

    color: #fff;

}


.how-dashboard .dashboard-mini-card span {

    display: block;

    margin-top: 3px;

    font-size: 7px;

    color: #63d69b;

}


/* =========================================================
   FLOATING DATA CARDS
========================================================= */

.how-floating-card {

    position: absolute;

    z-index: 10;

    padding: 15px 18px;

    min-width: 105px;

    border-radius: 15px;

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

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

    box-shadow:
        0 20px 45px rgba(30,20,20,.12);

    backdrop-filter:
        blur(15px);

    animation:
        howFloat
        5s
        ease-in-out
        infinite;

}


.how-floating-card span {

    display: block;

    font-size: 9px;

    letter-spacing: .14em;

    color: #999;

}


.how-floating-card strong {

    display: block;

    margin-top: 5px;

    font-size: 17px;

    color: #ef6347;

}


.how-float-one {

    top: 14%;

    right: -2%;

}


.how-float-two {

    bottom: 10%;

    left: -4%;

    animation-delay: -2s;

}


@keyframes howFloat {

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

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

}


/* =========================================================
   BOTTOM PROCESS LINE
========================================================= */

.how-bottom-line {

    width: min(900px, 90%);

    margin: 55px auto 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    font-size: 9px;

    letter-spacing: .18em;

    color: rgba(30,25,25,.38);

}


.how-bottom-line i {

    width: 35px;

    height: 1px;

    background:
        rgba(239,99,71,.30);

}


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

@media (max-width: 900px) {

    .how-content {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .how-dashboard-wrap {

        min-height: 420px;

    }

    .how-float-one {

        right: 0;

    }

    .how-float-two {

        left: 0;

    }

}


@media (max-width: 600px) {

    .how-it-works {

        padding:
            100px 0 70px;

    }

    .how-tabs-wrap {

        width: 92%;

    }


    /*
     * All five steps visible as a 3 + 2 grid (the old
     * hidden-scrollbar strip hid Optimize and Scale).
     */

    .how-tabs {

        display: grid;

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

        gap: 4px;

        border-radius: 28px;

    }


    .how-tab {

        grid-column: span 2;

        min-height: 48px;

        font-size: 13px;

    }


    .how-tab:nth-child(n + 4) {

        grid-column: span 3;

    }

    .how-content {

        width: 88%;

        margin-top: 55px;

    }

    .how-copy h3 {

        font-size: 46px;

    }

    .how-dashboard {

        min-height: 360px;

    }

    .how-dashboard .dashboard-main {

        padding: 18px;

    }

    .how-dashboard .dashboard-metric strong {

        font-size: 16px;

    }

    .how-dashboard .dashboard-sidebar {

        width: 42px;

    }

    .how-floating-card {

        display: none;

    }

    .how-bottom-line {

        flex-wrap: wrap;

        justify-content: center;

        width: 88%;

        gap: 10px 12px;

        font-size: 9px;

    }


    .how-bottom-line i {

        width: 14px;

    }

}


/* =========================================================
   HOW IT WORKS — IMAGE DEVICE
========================================================= */

.how-device {

    position: relative;

    width: min(680px, 100%);

    transform:
        perspective(1400px)
        rotateY(-3deg)
        rotateX(2deg);

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

}


.how-device:hover {

    transform:
        perspective(1400px)
        rotateY(0deg)
        rotateX(0deg)
        translateY(-5px);

}


/* =========================================================
   BROWSER / LAPTOP TOP
========================================================= */

.how-device-top {

    position: relative;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 15px;

    border-radius:
        16px
        16px
        0
        0;

    background:
        linear-gradient(
            180deg,
            #302c2b,
            #211f1e
        );

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

}


.how-device-dots {

    display: flex;

    gap: 5px;

}


.how-device-dots span {

    width: 7px;
    height: 7px;

    border-radius: 50%;

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

}


.how-device-dots span:first-child {

    background:
        rgba(255,110,80,.85);

}


.how-device-url {

    position: absolute;

    left: 50%;

    transform:
        translateX(-50%);

    width: 45%;

    padding: 6px 12px;

    border-radius: 8px;

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

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

    text-align: center;

    font-size: 9px;

    letter-spacing: .08em;

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

}


.how-device-status span {

    display: block;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #62d69a;

    box-shadow:
        0 0 12px rgba(98,214,154,.5);

}


/* =========================================================
   SCREEN
========================================================= */

.how-device-screen {

    position: relative;

    width: 100%;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    background: #151313;

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

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

}


.how-screen-image {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;

    transform:
        translateX(35px)
        scale(.985);

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

    pointer-events: none;

}


.how-screen-image.is-active {

    opacity: 1;

    transform:
        translateX(0)
        scale(1);

    z-index: 2;

}


.how-screen-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

}


/* =========================================================
   SCREEN OVERLAY
========================================================= */

.how-device-screen::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 5;

    pointer-events: none;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,.08),
            transparent 25%,
            transparent 75%,
            rgba(255,255,255,.03)
        );

}


/* =========================================================
   LAPTOP BASE
========================================================= */

.how-device-base {

    position: relative;

    width: 106%;

    height: 15px;

    margin-left: -3%;

    border-radius:
        0
        0
        14px
        14px;

    background:
        linear-gradient(
            180deg,
            #77716f,
            #4d4947
        );

    box-shadow:
        0 20px 35px rgba(30,15,10,.18);

}


.how-device-base::after {

    content: "";

    position: absolute;

    left: 50%;

    top: 3px;

    transform:
        translateX(-50%);

    width: 90px;
    height: 4px;

    border-radius: 10px;

    background:
        rgba(20,18,17,.35);

}


/* =========================================================
   FLOATING CARDS
========================================================= */

.how-floating-card {

    transition:
        transform .4s ease;

}

.how-dashboard-wrap:hover
.how-float-one {

    transform:
        translateY(-8px)
        rotate(2deg);

}

.how-dashboard-wrap:hover
.how-float-two {

    transform:
        translateY(8px)
        rotate(-2deg);

}


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

.how-copy {

    transition:
        opacity .35s ease,
        transform .55s cubic-bezier(.22,.61,.36,1);

}


.how-copy.is-changing {

    opacity: 0;

    transform:
        translateY(14px);

}


.how-point {

    transition:
        opacity .4s ease,
        transform .5s ease;

}


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

@media (max-width: 900px) {

    .how-device {

        width: 100%;

        transform: none !important;

    }

}


@media (max-width: 600px) {

    .how-device-top {

        height: 34px;

    }

    .how-device-url {

        width: 50%;

        font-size: 9px;

    }

    .how-device-base {

        height: 10px;

    }

}

.how-tab {
    transition:
        background .45s cubic-bezier(.22,.61,.36,1),
        color .35s ease,
        box-shadow .45s ease,
        transform .3s ease;
}

.how-tab.is-active {
    background: #fff !important;

    color: #171313 !important;

    box-shadow:
        0 8px 25px rgba(30,20,20,.08);
}



/* =========================================================
   MYFUNADS — INTERACTIVE CTA
   ========================================================= */

.mf-cta {
  position: relative;
  overflow: hidden;
  padding: 150px 24px 100px;
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 225, 195, 0.42), transparent 32%),
    radial-gradient(circle at 85% 75%, rgba(210, 230, 255, 0.5), transparent 34%),
    linear-gradient(135deg, #fffdfb 0%, #f7f8fc 52%, #eef3ff 100%);
}

.mf-cta-inner {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
}

/* ORBS */

.mf-cta-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
}

.mf-cta-orb-one {
  width: 280px;
  height: 280px;
  top: 120px;
  left: -120px;
  background: rgba(255, 190, 145, 0.16);
}

.mf-cta-orb-two {
  width: 360px;
  height: 360px;
  right: -160px;
  bottom: 80px;
  background: rgba(150, 185, 255, 0.16);
}

/* HEADING */

.mf-cta-heading {
  max-width: 760px;
  margin: 0 auto 65px;
  text-align: center;
}

.mf-cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #77747a;
}

.mf-cta-eyebrow::before,
.mf-cta-eyebrow::after {
  content: "";
  width: 24px;
  height: 1px;
  background: #bbb9be;
}

.mf-cta-heading h2 {
  margin: 0;
  padding: 0.04em 0.08em 0.10em;
  font-size: clamp(48px, 6vw, 78px);
  line-height: 1.08;
  letter-spacing: -0.045em;
  font-weight: 800;
  color: #181719;
  overflow: visible;
}

.mf-cta-heading h2 span {
  display: block;
  padding: 0.02em 0.06em 0.08em;
  margin: 0 -0.06em;
  background: linear-gradient(100deg, #ff7043, #ff4d79, #7d6cff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  overflow: visible;
}

.mf-cta-heading p {
  max-width: 610px;
  margin: 26px auto 0;
  color: #747279;
  font-size: 16px;
  line-height: 1.7;
}

/* CHOICES */

.mf-cta-choices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}

.mf-choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 27px 28px;
  border: 1px solid rgba(30, 28, 32, 0.08);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 10px 40px rgba(35, 32, 45, 0.045);
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease,
    box-shadow 0.35s ease;
}

.mf-choice:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 92, 108, 0.25);
  box-shadow: 0 20px 55px rgba(35, 32, 45, 0.09);
}

.mf-choice.is-selected {
  border-color: rgba(255, 92, 108, 0.3);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 20px 55px rgba(35, 32, 45, 0.1);
}

.mf-choice-icon {
  flex: 0 0 55px;
  width: 55px;
  height: 55px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: #181719;
  color: white;
  font-size: 24px;
  transition: transform 0.35s ease;
}

.mf-choice.is-selected .mf-choice-icon {
  transform: rotate(-8deg) scale(1.05);
  background: linear-gradient(135deg, #ff6849, #ff4d79);
}

.mf-choice-content {
  flex: 1;
}

.mf-choice-label {
  display: block;
  margin-bottom: 5px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #99959d;
}

.mf-choice h3 {
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: #19181a;
}

.mf-choice p {
  max-width: 430px;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #77737b;
}

.mf-choice-arrow {
  font-size: 22px;
  color: #aaa6ad;
  transition: transform 0.35s ease, color 0.35s ease;
}

.mf-choice:hover .mf-choice-arrow,
.mf-choice.is-selected .mf-choice-arrow {
  color: #ff5b67;
  transform: translateX(5px);
}

/* GROWTH PANEL */

.mf-growth-panel {
  position: relative;
  padding: 42px;
  border: 1px solid rgba(30, 28, 32, 0.08);
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 30px 90px rgba(36, 31, 45, 0.09),
    inset 0 1px 0 rgba(255,255,255,0.8);
}

/* TOP */

.mf-growth-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
}

.mf-growth-kicker,
.mf-final-copy > span,
.mf-scale-heading > div > span {
  display: block;
  margin-bottom: 10px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.17em;
  color: #99959d;
}

.mf-growth-copy h3 {
  margin: 0;
  font-size: clamp(25px, 3vw, 34px);
  letter-spacing: -0.04em;
  color: #19181a;
}

.mf-growth-copy p {
  max-width: 620px;
  margin: 11px 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: #77737b;
}

.mf-growth-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border: 1px solid rgba(30, 28, 32, 0.08);
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  white-space: nowrap;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #77737b;
}

.mf-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #55c979;
  box-shadow: 0 0 0 5px rgba(85, 201, 121, 0.1);
}

/* JOURNEY */

.mf-journey {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 48px 0 52px;
}

.mf-journey-line {
  position: absolute;
  top: 17px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: #e7e5e8;
  z-index: 0;
}

.mf-journey-progress {
  display: block;
  width: 7%;
  height: 100%;
  background: linear-gradient(90deg, #ff7043, #ff4d79, #7d6cff);
  transition: width 0.5s ease;
}

.mf-journey-step {
  position: relative;
  z-index: 1;
  text-align: center;
}

.mf-journey-step span {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  margin: 0 auto 12px;
  border: 1px solid #e5e2e7;
  border-radius: 50%;
  background: #fff;
  font-size: 9px;
  font-weight: 800;
  color: #aaa6ad;
  transition: all 0.4s ease;
}

.mf-journey-step strong {
  font-size: 11px;
  font-weight: 700;
  color: #9b979e;
  transition: color 0.4s ease;
}

.mf-journey-step.is-active span,
.mf-journey-step.is-complete span {
  border-color: transparent;
  background: #181719;
  color: white;
  box-shadow: 0 7px 20px rgba(25,23,25,0.15);
}

.mf-journey-step.is-active strong,
.mf-journey-step.is-complete strong {
  color: #181719;
}

/* SCALE */

.mf-scale-area {
  padding: 27px 28px;
  border-radius: 21px;
  background: #f7f6f8;
}

.mf-scale-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
}

.mf-scale-heading > div:first-child {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}

.mf-scale-heading > div > span {
  margin-bottom: 4px;
}

.mf-scale-heading strong {
  font-size: 29px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #19181a;
}

.mf-scale-caption {
  font-size: 11px;
  color: #99959d;
}

.mf-scale-slider {
  display: block;
  width: 100%;
  /* taller box = comfortable touch target; the native track stays centred */
  height: 32px;
  margin: 15px 0 3px;
  accent-color: #ff5b67;
  cursor: pointer;
}

.mf-scale-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 700;
  color: #aaa6ad;
}

/* FINAL ACTION */

.mf-final-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 34px;
  padding-top: 34px;
  border-top: 1px solid rgba(30, 28, 32, 0.08);
}

.mf-final-copy h3 {
  margin: 0;
  font-size: 25px;
  letter-spacing: -0.035em;
  color: #19181a;
}

.mf-final-button {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding: 15px 17px 15px 23px;
  border-radius: 999px;
  background: #181719;
  color: white;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(24, 23, 25, 0.18);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease;
}

.mf-final-button:hover {
  transform: translateY(-3px);
  background: linear-gradient(100deg, #ff6849, #ff4d79);
  box-shadow: 0 18px 38px rgba(255, 85, 105, 0.22);
}

.mf-button-arrow {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.13);
  font-size: 17px;
}

/* BOTTOM */

.mf-cta-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin-top: 52px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.13em;
  color: #a3a0a6;
}

.mf-cta-bottom i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c7c4c9;
}

/* MOBILE */

@media (max-width: 760px) {

  .mf-cta {
    padding: 95px 18px 70px;
  }

  .mf-cta-heading {
    margin-bottom: 42px;
  }

  .mf-cta-heading h2 {
    font-size: 46px;
  }

  .mf-cta-choices {
    grid-template-columns: 1fr;
  }

  .mf-choice {
    padding: 21px;
  }

  .mf-growth-panel {
    padding: 25px 20px;
    border-radius: 25px;
  }

  .mf-growth-top {
    flex-direction: column;
  }

  .mf-growth-status {
    align-self: flex-start;
  }

  .mf-journey {
    margin: 38px -5px 42px;
  }

  .mf-journey-step strong {
    display: block;
    font-size: 9px;
  }

  .mf-scale-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .mf-scale-heading > div:first-child {
    align-items: center;
  }

  .mf-final-action {
    align-items: flex-start;
    flex-direction: column;
  }

  .mf-final-button {
    width: 100%;
    justify-content: space-between;
  }

  .mf-cta-bottom {
    flex-wrap: wrap;
  }
}