/* =========================================================
   AFFLEADHUB — HERO SECTION
========================================================= */

.hero {

    position: relative;

    min-height: 100vh;

    width: 100%;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: #050505;

    isolation: isolate;
}


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

.hero-content {

    position: relative;

    z-index: 5;

    width: min(1250px, calc(100% - 80px));

    margin: 0 auto;

    padding-top: 110px;
}


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

.hero-eyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 30px;

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

    font-size: 13px;

    font-weight: 500;

    letter-spacing: 1.8px;
}


.eyebrow-dot {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 0 0 4px rgba(255,255,255,.08),
        0 0 15px rgba(255,255,255,.45);
}


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

.hero-title {

    margin: 0;

    max-width: 800px;

    color: #ffffff;

    font-size: clamp(50px, 7vw, 108px);

    line-height: .94;

    letter-spacing: -5px;

    font-weight: 600;
}


.hero-title span {

    color: #ffffff;
}


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

.hero-description {

    max-width: 570px;

    margin-top: 36px;

    margin-bottom: 0;

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

    font-size: 17px;

    line-height: 1.7;

    font-weight: 400;
}


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

.hero-actions {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 32px;
}


.hero-btn {

    display: inline-flex;

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

    gap: 10px;

    height: 56px;

    padding: 0 27px;

    border-radius: 999px;

    text-decoration: none;

    font-size: 15px;

    font-weight: 600;

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


/* Primary */

.hero-btn-primary {

    color: #050505;

    background: #ffffff;
}


.hero-btn-primary:hover {

    transform: translateY(-3px);

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


.hero-btn-primary svg {

    transition: transform .3s ease;
}


.hero-btn-primary:hover svg {

    transform: translate(4px,-4px);
}


/* Secondary */

.hero-btn-secondary {

    color: #ffffff;

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

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


.hero-btn-secondary:hover {

    transform: translateY(-3px);

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

    border-color: rgba(255,255,255,.5);
}



/* =========================================================
   ABSTRACT LIGHT — RIGHT SIDE
========================================================= */

.hero-light {

    position: absolute;

    pointer-events: none;

    z-index: 1;

    filter: blur(2px);
}


/* Main sweeping light */

.hero-light-one {

    width: 900px;

    height: 430px;

    right: -170px;

    top: 47%;

    transform:
        rotate(-27deg)
        skewX(-12deg);

    border-radius: 50%;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255,255,255,.025) 28%,
            rgba(255,255,255,.12) 55%,
            rgba(255,255,255,.75) 73%,
            transparent 100%
        );

    filter: blur(18px);

    opacity: .8;
}


/* Second flowing wave */

.hero-light-two {

    width: 850px;

    height: 260px;

    right: -110px;

    top: 59%;

    transform:
        rotate(19deg)
        skewX(-15deg);

    border-radius: 50%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.04),
            rgba(255,255,255,.5),
            rgba(255,255,255,.08),
            transparent
        );

    filter: blur(22px);

    opacity: .65;
}


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

.hero-glow {

    position: absolute;

    width: 650px;
    height: 650px;

    right: -100px;
    top: 25%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.08) 0%,
            rgba(255,255,255,.025) 35%,
            transparent 70%
        );

    filter: blur(25px);

    z-index: 0;

    pointer-events: none;
}


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

.hero-scroll {

    position: absolute;

    bottom: 30px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

    z-index: 5;

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

    font-size: 12px;
}


.scroll-mouse {

    width: 30px;
    height: 48px;

    display: flex;

    justify-content: center;

    padding-top: 9px;

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

    border-radius: 20px;
}


.scroll-mouse span {

    width: 4px;
    height: 7px;

    border-radius: 10px;

    background: #ffffff;

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


@keyframes scrollDot {

    0% {
        transform: translateY(0);
        opacity: 1;
    }

    60% {
        transform: translateY(15px);
        opacity: .2;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}


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

.hero-content {

    animation: heroFadeIn 1s cubic-bezier(.22,1,.36,1) both;
}


@keyframes heroFadeIn {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   DESKTOP — 3D PHONE POSITION
========================================================= */
/* =========================================================
   DESKTOP PHONE — KEEP OUTSIDE MEDIA QUERY
========================================================= */

.hero-visual {
    position: absolute;
    right: 8%;
    top: 54%;
    width: 340px;
    height: 595px;

    transform:
        translateY(-50%)
        perspective(1200px)
        rotateY(-12deg)
        rotateX(4deg);

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

.phone {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 8px;
    border-radius: 44px;

    background: linear-gradient(
        145deg,
        #ffffff 0%,
        #dcdcdc 18%,
        #8f8f8f 45%,
        #eeeeee 72%,
        #ffffff 100%
    );

    box-shadow:
        0 30px 70px rgba(0,0,0,.55),
        0 0 35px rgba(255,255,255,.10),
        inset 0 0 0 1px rgba(255,255,255,.9);
}

.phone-frame {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 7px;
    border-radius: 37px;
    background: #050505;
}

.phone-screen {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 32px 20px 18px;
    overflow: hidden;
    border-radius: 32px;

    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(255,255,255,.07),
            transparent 35%
        ),
        linear-gradient(
            160deg,
            #161616,
            #070707 55%,
            #030303
        );

    color: #fff;
}

.hero-visual .phone-screen {
        padding: 32px 20px 18px !important;
        color: #fff !important;
        overflow: hidden !important;
    }

    /* TOP BAR */
    .hero-visual .phone-topbar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        font-size: 10px !important;
        color: rgba(255,255,255,.55) !important;
        letter-spacing: .5px !important;
    }

    .hero-visual .live-dot {
        display: block !important;
        width: 6px !important;
        height: 6px !important;
        border-radius: 50% !important;
        background: #fff !important;
        box-shadow: 0 0 10px rgba(255,255,255,.7) !important;
    }

    /* HEADING */
    .hero-visual .phone-heading {
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
        margin-top: 35px !important;
    }

    .hero-visual .phone-heading span {
        color: rgba(255,255,255,.45) !important;
        font-size: 11px !important;
    }

    .hero-visual .phone-heading strong {
        font-size: 22px !important;
        font-weight: 600 !important;
        letter-spacing: -.5px !important;
    }

    /* REVENUE CARD */
    .hero-visual .phone-revenue {
        display: block !important;
        margin-top: 25px !important;
        padding: 18px !important;

        border: 1px solid rgba(255,255,255,.09) !important;
        border-radius: 18px !important;

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.09),
                rgba(255,255,255,.025)
            ) !important;

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

    .hero-visual .metric-label {
        display: block !important;
        color: rgba(255,255,255,.45) !important;
        font-size: 10px !important;
    }

    .hero-visual .phone-revenue strong {
        display: block !important;
        margin-top: 6px !important;
        font-size: 30px !important;
        letter-spacing: -1px !important;
    }

    .hero-visual .mini-growth {
        display: block !important;
        margin-top: 8px !important;
        color: rgba(255,255,255,.55) !important;
        font-size: 10px !important;
    }

    /* TWO SMALL STAT CARDS */
    .hero-visual .phone-stats {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin-top: 10px !important;
    }

    .hero-visual .phone-stat {
        display: block !important;
        padding: 15px !important;

        border: 1px solid rgba(255,255,255,.08) !important;
        border-radius: 16px !important;

        background: rgba(255,255,255,.025) !important;
    }

    .hero-visual .phone-stat span {
        display: block !important;
        color: rgba(255,255,255,.4) !important;
        font-size: 9px !important;
    }

    .hero-visual .phone-stat strong {
        display: block !important;
        margin-top: 7px !important;
        font-size: 18px !important;
        color: #fff !important;
    }

    /* PERFORMANCE GRAPH CARD */
    .hero-visual .phone-chart {
        display: block !important;

        margin-top: 12px !important;
        padding: 16px !important;

        border: 1px solid rgba(255,255,255,.08) !important;
        border-radius: 18px !important;

        background: rgba(255,255,255,.018) !important;
    }

    .hero-visual .chart-header {
        display: flex !important;
        justify-content: space-between !important;
        margin-bottom: 10px !important;

        color: rgba(255,255,255,.45) !important;
        font-size: 9px !important;
    }

    .hero-visual .performance-line {
        display: block !important;
        width: 100% !important;
        height: 100px !important;
    }

    .hero-visual .chart-area {
        fill: url(#chartGradient) !important;
        opacity: .35 !important;
    }

    .hero-visual .chart-line {
        fill: none !important;
        stroke: #fff !important;
        stroke-width: 2 !important;
        stroke-linecap: round !important;

        filter:
            drop-shadow(
                0 0 5px rgba(255,255,255,.3)
            ) !important;
    }

    /* BOTTOM PHONE NAV */
    .hero-visual .phone-bottom {
        position: absolute !important;

        left: 20px !important;
        right: 20px !important;
        bottom: 16px !important;

        display: flex !important;
        justify-content: space-between !important;

        color: rgba(255,255,255,.3) !important;
        font-size: 8px !important;
    }

    .hero-visual .phone-nav-active {
        color: #fff !important;
    }

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

@media (max-width: 1000px) {

    .hero-content {

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

    .hero-title {

        font-size: clamp(58px, 8vw, 82px);

        letter-spacing: -4px;
    }

    .hero-light-one {

        right: -350px;

        opacity: .6;
    }

}


/* =========================================================
   AFFLEADHUB — MOBILE HERO ONLY
   ========================================================= */

@media (max-width: 768px) {

    /* -----------------------------------------------------
       HERO
    ----------------------------------------------------- */

    .hero {
        min-height: auto;
        height: auto;

        align-items: flex-start;

        padding-bottom: 90px;

        overflow: hidden;
    }


    /* -----------------------------------------------------
       HERO CONTENT
    ----------------------------------------------------- */

    .hero-content {

        width: calc(100% - 40px);

        margin: 0 auto;

        padding-top: 155px;

        position: relative;

        z-index: 5;
    }


    /* -----------------------------------------------------
       EYEBROW
    ----------------------------------------------------- */

    .hero-eyebrow {

        margin-bottom: 22px;

        font-size: 11px;

        letter-spacing: 1.5px;
    }


    /* -----------------------------------------------------
       HEADING
    ----------------------------------------------------- */

    .hero-title {

        max-width: 100%;

        font-size: clamp(47px, 13vw, 64px);

        line-height: .98;

        letter-spacing: -2.8px;

        position: relative;

        z-index: 6;
    }


    /* -----------------------------------------------------
       DESCRIPTION
    ----------------------------------------------------- */

    .hero-description {

        max-width: 100%;

        margin-top: 25px;

        font-size: 15px;

        line-height: 1.6;

        position: relative;

        z-index: 6;
    }


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

    .hero-actions {

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 10px;

        margin-top: 27px;

        position: relative;

        z-index: 10;
    }


    .hero-btn {

        width: 100%;

        height: 52px;

        display: flex;

        align-items: center;

        justify-content: center;
    }


    /* -----------------------------------------------------
       SCROLL INDICATOR
    ----------------------------------------------------- */

    .hero-scroll {

        display: none;
    }


    /* =====================================================
       3D PHONE
       IMPORTANT:
       REMOVE DESKTOP ABSOLUTE POSITIONING
       ===================================================== */

    .hero-visual {

        position: relative;

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

        width: 250px;
        height: 438px;

        margin: 70px auto 0;

        transform: none;

        z-index: 2;

        pointer-events: none;
    }


    /* -----------------------------------------------------
       PHONE GLOW
    ----------------------------------------------------- */

    .phone-glow {

        width: 360px;
        height: 360px;

        left: 50%;
        top: 50%;

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

        filter: blur(30px);
    }


    /* -----------------------------------------------------
       PHONE BODY
    ----------------------------------------------------- */

    .phone {

        width: 100%;
        height: 100%;

        padding: 6px;

        border-radius: 32px;
    }


    /* -----------------------------------------------------
       PHONE FRAME
    ----------------------------------------------------- */

    .phone-frame {

        padding: 5px;

        border-radius: 27px;
    }


    /* -----------------------------------------------------
       PHONE SCREEN
    ----------------------------------------------------- */

    .phone-screen {

        padding: 24px 15px 14px;

        border-radius: 23px;
    }


    /* -----------------------------------------------------
       PHONE TOP BAR
    ----------------------------------------------------- */

    .phone-topbar {

        font-size: 8px;
    }


    .live-dot {

        width: 5px;
        height: 5px;
    }


    /* -----------------------------------------------------
       PHONE HEADING
    ----------------------------------------------------- */

    .phone-heading {

        margin-top: 25px;

        gap: 2px;
    }


    .phone-heading span {

        font-size: 9px;
    }


    .phone-heading strong {

        font-size: 17px;

        letter-spacing: -.3px;
    }


    /* -----------------------------------------------------
       REVENUE CARD
    ----------------------------------------------------- */

    .phone-revenue {

        margin-top: 18px;

        padding: 13px;

        border-radius: 14px;
    }


    .metric-label {

        font-size: 8px;
    }


    .phone-revenue strong {

        margin-top: 5px;

        font-size: 23px;

        letter-spacing: -.7px;
    }


    .mini-growth {

        margin-top: 6px;

        font-size: 8px;
    }


    /* -----------------------------------------------------
       MINI STATS
    ----------------------------------------------------- */

    .phone-stats {

        gap: 7px;

        margin-top: 7px;
    }


    .phone-stat {

        padding: 10px;

        border-radius: 12px;
    }


    .phone-stat span {

        font-size: 7px;
    }


    .phone-stat strong {

        margin-top: 5px;

        font-size: 15px;
    }


    /* -----------------------------------------------------
       CHART
    ----------------------------------------------------- */

    .phone-chart {

        margin-top: 8px;

        padding: 10px;

        border-radius: 13px;
    }


    .chart-header {

        margin-bottom: 6px;

        font-size: 7px;
    }


    .performance-line {

        height: 70px;
    }


    /* -----------------------------------------------------
       PHONE BOTTOM NAV
    ----------------------------------------------------- */

    .phone-bottom {

        left: 15px;
        right: 15px;
        bottom: 11px;

        font-size: 6px;
    }


    /* -----------------------------------------------------
       PHONE GLOW / FLOAT
       KEEP SUBTLE ON MOBILE
    ----------------------------------------------------- */

    .phone {

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


    @keyframes phoneFloatMobile {

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

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


    /* -----------------------------------------------------
       HIDE OLD STATS IF THEY STILL EXIST
       ----------------------------------------------------- */

    .hero-stats {

        display: none;
    }

}

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

@media (max-width: 1050px) {

    .hero-visual {

        right: -40px;

        transform:
            translateY(-50%)
            scale(.8)
            perspective(1200px)
            rotateY(-12deg)
            rotateX(4deg);

        opacity: .8;
    }
}


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

@media (max-width: 768px) {

    .hero-visual {

        position: absolute;

        top: auto;
        right: -65px;
        bottom: -80px;

        width: 260px;
        height: 450px;

        transform:
            perspective(1000px)
            rotateY(-10deg)
            rotateX(3deg);

        opacity: .75;
    }

    .phone {

        border-radius: 34px;
    }

    .phone-frame {

        border-radius: 28px;
    }

    .phone-screen {

        border-radius: 22px;

        padding: 25px 15px 15px;
    }

    .phone-heading {

        margin-top: 25px;
    }

    .phone-heading strong {

        font-size: 17px;
    }

    .phone-revenue {

        margin-top: 18px;

        padding: 13px;
    }

    .phone-revenue strong {

        font-size: 22px;
    }

    .phone-chart {

        padding: 12px;
    }

    .performance-line {

        height: 70px;
    }
}


/*backround- animation*/

/* =========================================================
   FINAL HERO LIGHT MOVEMENT
========================================================= */

.hero-light-one {
    animation: heroLightFlow 10s ease-in-out infinite !important;
    opacity: .75 !important;
}

.hero-light-two {
    animation: heroLightFlowTwo 14s ease-in-out infinite !important;
    opacity: .55 !important;
}

.hero-glow {
    animation: heroGlowFlow 9s ease-in-out infinite !important;
}


/* Main light */

@keyframes heroLightFlow {

    0% {
        transform:
            translate3d(120px, -20px, 0)
            rotate(-27deg)
            scale(.95);
    }

    25% {
        transform:
            translate3d(-80px, 30px, 0)
            rotate(-24deg)
            scale(1.05);
    }

    50% {
        transform:
            translate3d(-180px, -10px, 0)
            rotate(-29deg)
            scale(1.1);
    }

    75% {
        transform:
            translate3d(-40px, 40px, 0)
            rotate(-25deg)
            scale(1.02);
    }

    100% {
        transform:
            translate3d(120px, -20px, 0)
            rotate(-27deg)
            scale(.95);
    }
}


/* Secondary light */

@keyframes heroLightFlowTwo {

    0% {
        transform:
            translate3d(-80px, 20px, 0)
            rotate(19deg)
            scale(.95);
    }

    50% {
        transform:
            translate3d(140px, -35px, 0)
            rotate(24deg)
            scale(1.12);
    }

    100% {
        transform:
            translate3d(-80px, 20px, 0)
            rotate(19deg)
            scale(.95);
    }
}


/* Ambient glow */

@keyframes heroGlowFlow {

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

    50% {
        transform: translate3d(-100px, 45px, 0) scale(1.15);
        opacity: 1;
    }
}



/* =========================================================
   SECTION 2 — AFFLEADHUB NETWORK
========================================================= */

.network-section {

    position: relative;

    width: 100%;

    padding: 190px 0 210px;

    background: #050505;

    overflow: hidden;
}


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

.network-container {

    width: min(1250px, calc(100% - 80px));

    margin: 0 auto;
}


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

.network-intro {

    max-width: 720px;

    margin-bottom: 100px;
}


.network-eyebrow {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 28px;

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

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}


.network-eyebrow span {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #D8FF37;

    box-shadow:
        0 0 12px
        rgba(216,255,55,.7);
}


.network-intro h2 {

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(55px, 7vw, 90px);

    line-height: .94;

    letter-spacing: -5px;

    font-weight: 650;
}


.network-intro h2 span {

    color: #D8FF37;
}


.network-intro p {

    max-width: 500px;

    margin: 30px 0 0;

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

    font-size: 17px;

    line-height: 1.7;
}


/* =========================================================
   NETWORK VISUAL
========================================================= */

.network-visual {

    position: relative;

    width: 100%;

    height: 560px;

    overflow: hidden;

    border-radius: 34px;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(216,255,55,.045),
            transparent 28%
        ),
        rgba(255,255,255,.012);

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

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


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

.network-glow {

    position: absolute;

    top: 50%;
    left: 50%;

    width: 420px;
    height: 420px;

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

    border-radius: 50%;

    background:
            radial-gradient(
                circle,
                rgba(216,255,55,.20) 0%,
                rgba(216,255,55,.10) 28%,
                rgba(216,255,55,.035) 50%,
                transparent 72%
            );

        filter: blur(30px);
        opacity: .95;
    animation:
        network-glow-pulse
        6s ease-in-out infinite;
}


@keyframes network-glow-pulse {

    0%,
    100% {

        opacity: .4;

        transform:
            translate(-50%, -50%)
            scale(.85);
    }

    50% {

        opacity: 1;

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


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

.network-lines {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: visible;

    pointer-events: none;
}


.network-path {

    fill: none;
    stroke: rgba(216,255,55,.70);
        stroke-width: 1.5;

        filter:
            drop-shadow(0 0 4px rgba(216,255,55,.55))
            drop-shadow(0 0 12px rgba(216,255,55,.25));

        stroke-dasharray: 7 13;

    animation:
        network-flow
        8s linear infinite;
}


.network-path:nth-child(2) {

    animation-delay:
        -2s;
}


.network-path:nth-child(3) {

    animation-direction:
        reverse;

    animation-duration:
        10s;
}


.network-path:nth-child(4) {

    animation-direction:
        reverse;

    animation-duration:
        7s;
}


@keyframes network-flow {

    from {

        stroke-dashoffset: 0;
    }

    to {

        stroke-dashoffset: -180;
    }
}


/* =========================================================
   SIDE BLOCKS
========================================================= */

.network-side {

    position: absolute;

    top: 50%;

    width: 220px;

    transform:
        translateY(-50%);
}


.network-left {

    left: 55px;

    text-align: left;
}


.network-right {

    right: 55px;

    text-align: right;
}


.network-side-number {

    margin-bottom: 12px;

    color: #D8FF37;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}


.network-side-title {

    color: #ffffff;

    font-size: 18px;

    font-weight: 650;

    letter-spacing: 1.5px;
}


.network-side p {

    max-width: 210px;

    margin: 13px 0 0;

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

    font-size: 18px;

    line-height: 1.7;
}


.network-right p {

    margin-left: auto;
}


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

.network-core {

    position: absolute;

    top: 50%;
    left: 50%;

    width: 190px;
    height: 190px;

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

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
            radial-gradient(
                circle at 35% 30%,
                rgba(255,255,255,.13),
                rgba(8,8,8,.93) 55%,
                rgba(216,255,55,.04)
            );

        border-color:
            rgba(216,255,55,.50);

        box-shadow:
            inset 0 0 45px rgba(216,255,55,.12),
            inset 0 0 15px rgba(216,255,55,.08),
            0 0 25px rgba(216,255,55,.16),
            0 0 70px rgba(216,255,55,.10);
}


/* =========================================================
   CORE RING
========================================================= */

.network-core-ring {

    position: absolute;

    inset: -13px;

    border-radius: 50%;

    border:
        1px solid
        rgba(216,255,55,.12);
    border-color:
            rgba(216,255,55,.28);

        border-top-color:
            #D8FF37;

        border-right-color:
            rgba(216,255,55,.75);

        box-shadow:
            0 0 8px rgba(216,255,55,.40),
            0 0 24px rgba(216,255,55,.18);
    animation:
        network-ring
        8s linear infinite;
}


@keyframes network-ring {

    to {

        transform:
            rotate(360deg);
    }
}


/* =========================================================
   CORE GLOW
========================================================= */

.network-core-glow {

    position: absolute;

    width: 80px;
    height: 80px;

    border-radius: 50%;

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

    

        filter: blur(25px);

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

    animation:
        core-glow
        3.5s ease-in-out infinite;
}


@keyframes core-glow {

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

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


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

.network-core-content {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    z-index: 2;

    line-height: .92;
}


.network-core-content strong {

    color: #ffffff;

    font-size: 24px;

    font-weight: 650;

    letter-spacing: -1px;
}


.network-core-small {

    margin: 7px 0;

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

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 2px;
}


/* =========================================================
   FLOATING NODES
========================================================= */

.network-node {

    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #D8FF37;

    box-shadow:
        0 0 14px
        rgba(216,255,55,.7);

    animation:
        network-node-pulse
        3s ease-in-out infinite;
}


.node-1 {

    left: 25%;

    top: 22%;
}


.node-2 {

    left: 33%;

    bottom: 21%;

    animation-delay: -1s;
}


.node-3 {

    right: 27%;

    top: 24%;

    animation-delay: -1.8s;
}


.node-4 {

    right: 34%;

    bottom: 19%;

    animation-delay: -.6s;
}


@keyframes network-node-pulse {

    0%,
    100% {

        opacity: .25;

        transform: scale(.7);
    }

    50% {

        opacity: 1;

        transform: scale(1.4);
    }
}


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

.network-bottom {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 65px;

    color: #fff;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 2px;

    white-space: nowrap;
}


.network-bottom-line {

    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(248, 239, 239, 0.1)
        );
}


.network-bottom-line:last-child {

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


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

@media (max-width: 900px) {

    .network-section {

        padding:
            150px 0 170px;
    }


    .network-visual {

        height: 500px;
    }


    .network-side {

        width: 170px;
    }


    .network-left {

        left: 30px;
    }


    .network-right {

        right: 30px;
    }


    .network-core {

        width: 165px;
        height: 165px;
    }

}


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

@media (max-width: 768px) {

    .network-section {

        padding:
            120px 0 140px;
    }


    .network-container {

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


    .network-intro {

        margin-bottom: 65px;
    }


    .network-intro h2 {

        font-size:
            clamp(48px, 12vw, 65px);

        letter-spacing:
            -3px;
    }


    .network-intro p {

        margin-top: 22px;

        font-size: 15px;
    }


    .network-visual {

        height: 620px;

        border-radius: 28px;
    }


    /* Hide complex desktop paths */

    .network-lines {

        opacity: .55;
    }


    /* Center core */

    .network-core {

        top: 50%;

        width: 155px;
        height: 155px;
    }


    .network-core-content strong {

        font-size: 19px;
    }


    /* Sides become stacked */

    .network-side {

        width:
            calc(100% - 50px);

        transform: none;

        text-align: left;
    }


    .network-left {

        top: 50px;

        left: 25px;
    }


    .network-right {

        right: auto;

        left: 25px;

        bottom: 50px;

        top: auto;

        text-align: left;
    }


    .network-side p {

        max-width: 260px;

        margin-left: 0;
    }


    .network-bottom {

        margin-top: 45px;

        gap: 12px;

        font-size: 10px;

        letter-spacing: 1px;
    }

}

/* =========================================================
   PERFORMANCE ENGINE SECTION
========================================================= */

.performance-section {

    position: relative;

    width: 100%;

    padding: 180px 0 190px;

    background: #050505;

    overflow: hidden;
}


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

.performance-container {

    width: min(1250px, calc(100% - 80px));

    margin: 0 auto;
}


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

.performance-intro {

    max-width: 760px;

    margin-bottom: 120px;
}


.performance-intro h2 {

    margin: 0;

    color: #ffffff;

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

    line-height: .98;

    letter-spacing: -4px;

    font-weight: 650;
}


.performance-intro h2 span {

    color: #D8FF37;
    
}


.performance-intro p {

    max-width: 560px;

    margin: 30px 0 0;

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

    font-size: 16px;

    line-height: 1.7;
}


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

.performance-process {

    position: relative;

    display: grid;

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

    gap: 70px;
}


/* =========================================================
   CONNECTING LINE
========================================================= */

.process-line {

    position: absolute;

    top: 79px;

    left: 8%;

    width: 84%;

    height: 1px;

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

    overflow: hidden;
}


.process-line-progress {

    width: 45%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            #D8FF37,
            transparent
        );

    animation:
        process-flow 4s ease-in-out infinite;
}


@keyframes process-flow {

    0% {
        transform: translateX(-120%);
    }

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

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

}


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

.process-step {

    position: relative;

    min-height: 310px;

    padding-top: 20px;
}


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

.process-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 35px;
}


.process-number {

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

    font-size: 12px;

    letter-spacing: 1px;
}


.process-status {

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

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 1.5px;
}


/* =========================================================
   POINT
========================================================= */

.process-point {

    position: relative;

    width: 18px;

    height: 18px;

    margin-bottom: 40px;

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

    border-radius: 50%;

    background: #050505;

    z-index: 2;
}


.process-point span {

    position: absolute;

    top: 50%;
    left: 50%;

    width: 6px;
    height: 6px;

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

    border-radius: 50%;

    background: #D8FF37;

    box-shadow:
        0 0 14px rgba(216,255,55,.7);
}


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

.process-step h3 {

    margin: 0 0 14px;

    color: #ffffff;

    font-size: 30px;

    font-weight: 600;

    letter-spacing: -1px;
}


.process-step p {

    max-width: 290px;

    margin: 0;

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

    font-size: 14px;

    line-height: 1.7;
}


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

.process-step {

    transition:
        transform .45s cubic-bezier(.22,1,.36,1);
}


.process-step:hover {

    transform: translateY(-6px);
}


.process-step:hover .process-point {

    border-color: rgba(216,255,55,.5);
}


.process-step:hover .process-point span {

    box-shadow:
        0 0 22px rgba(216,255,55,.9);
}


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

@media (max-width: 1000px) {

    .performance-section {

        padding: 150px 0 160px;
    }

    .performance-intro {

        margin-bottom: 90px;
    }

    .performance-process {

        gap: 35px;
    }

}


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

@media (max-width: 768px) {

    .performance-section {

        padding: 120px 0 130px;
    }


    .performance-container {

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


    .performance-intro {

        margin-bottom: 75px;
    }


    .performance-intro h2 {

        font-size: clamp(44px, 12vw, 60px);

        letter-spacing: -2.5px;
    }


    .performance-intro p {

        margin-top: 25px;

        font-size: 14px;
    }


    .performance-process {

        display: flex;

        flex-direction: column;

        gap: 55px;
    }


    /* Vertical line on mobile */

    .process-line {

        top: 30px;

        left: 8px;

        width: 1px;

        height: calc(100% - 60px);
    }


    .process-line-progress {

        width: 100%;

        height: 35%;

        background:
            linear-gradient(
                180deg,
                transparent,
                #D8FF37,
                transparent
            );

        animation:
            process-flow-mobile 4s ease-in-out infinite;
    }


    @keyframes process-flow-mobile {

        0% {
            transform: translateY(-120%);
        }

        50% {
            transform: translateY(100%);
        }

        100% {
            transform: translateY(240%);
        }

    }


    .process-step {

        min-height: auto;

        padding-left: 45px;

        padding-top: 0;
    }


    .process-top {

        margin-bottom: 20px;
    }


    .process-point {

        position: absolute;

        top: 2px;

        left: 0;

        margin: 0;
    }


    .process-step h3 {

        font-size: 26px;
    }


    .process-step p {

        max-width: 320px;

        font-size: 14px;
    }

}


/* =========================================================
   SECTION 4 — AUDIENCE
========================================================= */

.audience-section {

    position: relative;

    width: 100%;

    padding: 190px 0 200px;

    background: #050505;

    overflow: hidden;
}


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

.audience-container {

    width: min(1250px, calc(100% - 80px));

    margin: 0 auto;
}


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

.audience-intro {

    max-width: 760px;

    margin-bottom: 100px;
}


.audience-intro h2 {

    margin: 0;

    color: #ffffff;

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

    line-height: .98;

    letter-spacing: -4px;

    font-weight: 650;
}


.audience-intro h2 span {

    color: #D8FF37;
}


.audience-intro p {

    max-width: 560px;

    margin: 30px 0 0;

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

    font-size: 16px;

    line-height: 1.7;
}


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

.audience-grid {

    display: grid;

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

    gap: 22px;
}


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

.audience-card {

    position: relative;

    min-height: 540px;

    padding: 34px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

    border-radius: 32px;

    text-decoration: none;

    transition:
        transform .5s cubic-bezier(.22,1,.36,1),
        box-shadow .5s ease;
}


.audience-card:hover {

    transform: translateY(-8px);
}


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

.audience-card-dark {

    background:

        radial-gradient(
            circle at 80% 20%,
            rgba(255,255,255,.07),
            transparent 35%
        ),

        #101010;

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


.audience-card-dark:hover {

    box-shadow:
        0 25px 70px rgba(0,0,0,.45);
}


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

.audience-card-lime {

    background: #D8FF37;

    color: #050505;
}


.audience-card-lime:hover {

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


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

.audience-card-top {

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.audience-label {

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


.audience-card-dark .audience-label {

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


.audience-card-lime .audience-label {

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


.audience-arrow {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    font-size: 20px;

    transition:
        transform .4s ease;
}


.audience-card-dark .audience-arrow {

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

    color: #ffffff;
}


.audience-card-lime .audience-arrow {

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

    color: #050505;
}


.audience-card:hover .audience-arrow {

    transform: rotate(45deg);
}


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

.audience-icon {

    position: relative;

    width: 56px;

    height: 56px;

    margin-bottom: 45px;

    border-radius: 16px;

    display: flex;

    align-items: center;

    justify-content: center;
}


.audience-card-dark .audience-icon {

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

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


.audience-card-lime .audience-icon {

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

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


.audience-icon span {

    width: 18px;

    height: 18px;

    border-radius: 50%;

    border: 2px solid currentColor;

}


.audience-card-dark .audience-icon span {

    color: #D8FF37;
}


.audience-card-lime .audience-icon span {

    color: #050505;
}


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

.audience-content h3 {

    margin: 0;

    font-size: clamp(34px, 3vw, 48px);

    line-height: 1.02;

    letter-spacing: -2px;

    font-weight: 600;
}


.audience-card-dark .audience-content h3 {

    color: #ffffff;
}


.audience-card-lime .audience-content h3 {

    color: #050505;
}


.audience-content p {

    max-width: 390px;

    margin: 24px 0 0;

    font-size: 14px;

    line-height: 1.7;
}


.audience-card-dark .audience-content p {

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


.audience-card-lime .audience-content p {

    color: rgba(5,5,5,.6);
}


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

.audience-link {

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 13px;

    font-weight: 600;
}


.audience-card-dark .audience-link {

    color: #ffffff;
}


.audience-card-lime .audience-link {

    color: #050505;
}


.audience-link span {

    transition:
        transform .35s ease;
}


.audience-card:hover .audience-link span {

    transform: translateX(6px);
}


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

@media (max-width: 768px) {

    .audience-section {

        padding: 130px 0 140px;
    }


    .audience-container {

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


    .audience-intro {

        margin-bottom: 65px;
    }


    .audience-intro h2 {

        font-size: clamp(46px, 12vw, 62px);

        letter-spacing: -2.5px;
    }


    .audience-intro p {

        margin-top: 24px;

        font-size: 14px;
    }


    .audience-grid {

        grid-template-columns: 1fr;

        gap: 18px;
    }


    .audience-card {

        min-height: 480px;

        padding: 26px;

        border-radius: 26px;
    }


    .audience-icon {

        margin-bottom: 30px;
    }


    .audience-content h3 {

        font-size: 34px;

        letter-spacing: -1.5px;
    }

}

/* =========================================================
   SECTION 4 — 3D ROTATING ORB
========================================================= */

.section4-orb {
    position: absolute;

    width: 330px;
    height: 330px;

    left: 50%;
    top: 50%;

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

    z-index: 1;

    pointer-events: none;
}


/* CORE */

.orb-core {

    position: absolute;

    width: 190px;
    height: 190px;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #ffffff 0%,
            rgba(255,255,255,.55) 8%,
            rgba(170,255,80,.35) 25%,
            rgba(80,120,40,.18) 48%,
            transparent 72%
        );

    box-shadow:
        0 0 35px rgba(190,255,100,.25),
        0 0 90px rgba(150,255,80,.12);

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


/* RINGS */

.orb-ring {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 270px;
    height: 270px;

    transform-style: preserve-3d;

    border-radius: 50%;

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

    box-shadow:
        0 0 12px rgba(200,255,150,.18),
        inset 0 0 12px rgba(200,255,150,.08);

}


/* RING 1 */

.orb-ring-1 {

    transform:
        translate(-50%, -50%)
        rotateX(68deg);

    animation:
        orbRotate1 8s linear infinite;
}


/* RING 2 */

.orb-ring-2 {

    width: 250px;
    height: 250px;

    transform:
        translate(-50%, -50%)
        rotateY(68deg);

    animation:
        orbRotate2 11s linear infinite reverse;
}


/* RING 3 */

.orb-ring-3 {

    width: 220px;
    height: 220px;

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

    transform:
        translate(-50%, -50%)
        rotateX(35deg)
        rotateY(45deg);

    animation:
        orbRotate3 14s linear infinite;
}


/* =========================================================
   ROTATION
========================================================= */

@keyframes orbRotate1 {

    from {
        transform:
            translate(-50%, -50%)
            rotateX(68deg)
            rotateZ(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotateX(68deg)
            rotateZ(360deg);
    }
}


@keyframes orbRotate2 {

    from {
        transform:
            translate(-50%, -50%)
            rotateY(68deg)
            rotateZ(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotateY(68deg)
            rotateZ(360deg);
    }
}


@keyframes orbRotate3 {

    from {
        transform:
            translate(-50%, -50%)
            rotateX(35deg)
            rotateY(45deg)
            rotateZ(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotateX(35deg)
            rotateY(45deg)
            rotateZ(360deg);
    }
}


/* =========================================================
   SOFT LIGHT
========================================================= */

@keyframes orbPulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(.96);
        opacity: .8;
    }

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


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

@media (max-width: 768px) {

    .section4-orb {

        width: 250px;
        height: 250px;

        right: 50%;
        top: 55%;

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

        opacity: .65;
    }

    .orb-core {

        width: 145px;
        height: 145px;
    }

    .orb-ring {
        width: 205px;
        height: 205px;
    }

    .orb-ring-2 {
        width: 190px;
        height: 190px;
    }

    .orb-ring-3 {
        width: 170px;
        height: 170px;
    }
}

/* =========================================================
   SECTION 5 — PERFORMANCE NUMBERS
========================================================= */

.numbers-section {

    position: relative;

    width: 100%;

    padding: 200px 0 210px;

    background: #050505;

    overflow: hidden;
}


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

.numbers-container {

    width: min(1250px, calc(100% - 80px));

    margin: 0 auto;
}


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

.numbers-intro {

    max-width: 760px;

    margin-bottom: 120px;
}


.numbers-intro h2 {

    margin: 0;

    color: #ffffff;

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

    line-height: .98;

    letter-spacing: -4px;

    font-weight: 650;
}


.numbers-intro h2 span {
    

    color:  #D8FF37;
}


.numbers-intro p {

    max-width: 560px;

    margin: 30px 0 0;

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

    font-size: 16px;

    line-height: 1.7;
}


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

.numbers-grid {

    display: grid;

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

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

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


/* =========================================================
   STAT ITEM
========================================================= */

.number-item {

    position: relative;

    min-height: 330px;

    padding: 30px 28px 34px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    transition:
        background .4s ease;
}


.number-item:not(:last-child) {

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


.number-item:hover {

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


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

.number-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

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

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 1.5px;
}


/* =========================================================
   NUMBER
========================================================= */

.number-value {

    color: #ffffff;

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

    line-height: 1;

    letter-spacing: -4px;

    font-weight: 600;
}


.number-value span {

    color: #D8FF37;

    font-size: .55em;

    letter-spacing: -1px;
}


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

.number-label {

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

    font-size: 13px;

    line-height: 1.5;
}


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

.numbers-bottom {

    display: flex;

    align-items: center;

    gap: 24px;

    margin-top: 70px;

    color: #fff;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 2px;

    white-space: nowrap;
}


.numbers-bottom-line {

    flex: 1;

    height: 1px;

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


.numbers-bottom-line:last-child {

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


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

@media (max-width: 1000px) {

    .numbers-section {

        padding: 160px 0 170px;
    }


    .numbers-intro {

        margin-bottom: 90px;
    }


    .numbers-grid {

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


    .number-item:nth-child(2) {

        border-right: none;
    }


    .number-item:nth-child(-n+2) {

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

}


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

@media (max-width: 768px) {

    .numbers-section {

        padding: 130px 0 140px;
    }


    .numbers-container {

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


    .numbers-intro {

        margin-bottom: 70px;
    }


    .numbers-intro h2 {

        font-size: clamp(46px, 12vw, 62px);

        letter-spacing: -2.5px;
    }


    .numbers-intro p {

        margin-top: 24px;

        font-size: 14px;
    }


    .numbers-grid {

        grid-template-columns: 1fr;
    }


    .number-item {

        min-height: 230px;

        padding: 25px 0;
    }


    .number-item:not(:last-child) {

        border-right: none;

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


    .number-item:nth-child(2) {

        border-right: none;
    }


    .number-value {

        font-size: 58px;

        letter-spacing: -3px;
    }


    .numbers-bottom {

        margin-top: 55px;

        gap: 15px;

        font-size: 8px;

        letter-spacing: 1.5px;
    }

}

/* =========================================================
   SECTION 6 — FINAL CTA
========================================================= */

.final-cta-section {

    position: relative;

    width: 100%;

    padding: 220px 0 190px;

    background: #050505;

    overflow: hidden;
}


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

.final-cta-container {

    position: relative;

    width: min(1150px, calc(100% - 80px));

    margin: 0 auto;

    text-align: center;
}


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

.final-cta-glow {

    position: absolute;

    top: 50%;
    left: 50%;

    width: 600px;
    height: 350px;

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

    background:
        radial-gradient(
            ellipse,
            rgba(216,255,55,.08),
            transparent 70%
        );

    filter: blur(20px);

    pointer-events: none;

    animation:
        final-cta-pulse 5s ease-in-out infinite;
}


@keyframes final-cta-pulse {

    0%,
    100% {

        opacity: .45;

        transform:
            translate(-50%, -50%)
            scale(.9);

    }

    50% {

        opacity: 1;

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

    }

}


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

.final-cta-eyebrow {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 30px;

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

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;
}


.final-cta-dot {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #D8FF37;

    box-shadow:
        0 0 14px rgba(216,255,55,.7);

    animation:
        cta-dot-pulse 2s ease-in-out infinite;
}


@keyframes cta-dot-pulse {

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

    50% {
        opacity: 1;
    }

}


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

.final-cta-heading {

    position: relative;

    margin: 0;

    color: #ffffff;

    font-size: clamp(62px, 8vw, 110px);

    line-height: .9;

    letter-spacing: -6px;

    font-weight: 650;
}


.final-cta-heading span {

    display: block;

    color:  #D8FF37;
}


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

.final-cta-text {

    position: relative;

    max-width: 560px;

    margin: 38px auto 0;

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

    font-size: 16px;

    line-height: 1.7;
}


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

.final-cta-actions {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 14px;

    margin-top: 50px;
}


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

.final-cta-button {

    position: relative;

    min-width: 210px;

    height: 58px;

    padding: 0 22px;

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    border-radius: 999px;

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    transition:
        transform .4s cubic-bezier(.22,1,.36,1),
        box-shadow .4s ease,
        background .4s ease;
}


.final-cta-button:hover {

    transform: translateY(-4px);
}


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

.final-cta-primary {

    background: #D8FF37;

    color: #050505;

    box-shadow:
        0 0 0 rgba(216,255,55,0);
}


.final-cta-primary:hover {

    box-shadow:
        0 12px 35px rgba(216,255,55,.18);
}


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

.final-cta-secondary {

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

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

    color: #ffffff;
}


.final-cta-secondary:hover {

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

    border-color:
        rgba(255,255,255,.22);
}


/* =========================================================
   ARROW
========================================================= */

.final-cta-arrow {

    font-size: 19px;

    transition:
        transform .35s ease;
}


.final-cta-button:hover
.final-cta-arrow {

    transform:
        translate(3px, -3px);
}


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

.final-cta-bottom {

    position: relative;

    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 100px;
}


.final-cta-bottom span {

    flex: 1;

    height: 1px;

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


.final-cta-bottom span:last-child {

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


.final-cta-bottom p {

    margin: 0;

    color: #fff;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 2px;

    white-space: nowrap;
}


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

@media (max-width: 768px) {

    .final-cta-section {

        padding: 140px 0 130px;
    }


    .final-cta-container {

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


    .final-cta-glow {

        width: 350px;

        height: 300px;
    }


    .final-cta-heading {

        font-size:
            clamp(52px, 14vw, 72px);

        letter-spacing: -3.5px;

        line-height: .92;
    }


    .final-cta-text {

        margin-top: 28px;

        font-size: 14px;
    }


    .final-cta-actions {

        flex-direction: column;

        width: 100%;

        margin-top: 40px;
    }


    .final-cta-button {

        width: 100%;

        min-width: 0;

        height: 56px;
    }


    .final-cta-bottom {

        margin-top: 70px;

        gap: 12px;
    }


    .final-cta-bottom p {

        font-size: 7px;

        letter-spacing: 1px;
    }

}

/* =========================================================
   AFFLEADHUB GLOW WORDMARK
========================================================= */

.brand-glow-section {
    position: relative;

    width: 100%;
    min-height: 240px;

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

    overflow: hidden;

    padding: 50px 20px;

    background: transparent;
}


/* subtle separator */

.brand-glow-section::before,
.brand-glow-section::after {
    content: "";

    position: absolute;

    left: 8%;
    right: 8%;

    height: 1px;

    background: rgba(255, 255, 255, 0.06);
}

.brand-glow-section::before {
    top: 0;
}

.brand-glow-section::after {
    bottom: 0;
}


/* =========================================================
   MAIN WORDMARK
========================================================= */

.brand-glow-wordmark {
    position: relative;

    width: 100%;

    text-align: center;

    font-family: inherit;

    font-size: clamp(65px, 12vw, 190px);

    font-weight: 800;

    line-height: 0.85;

    letter-spacing: -0.055em;

    color: transparent;

    -webkit-text-fill-color: transparent;

    -webkit-text-stroke: 1.2px
        rgba(255, 255, 255, 0.38);

    text-transform: uppercase;

    cursor: default;

    transition:
        -webkit-text-stroke-color 0.35s ease,
        filter 0.35s ease,
        transform 0.35s ease;
}


/* =========================================================
   GLOW LAYER
========================================================= */

.brand-glow-wordmark::after {
    content: attr(data-text);

    position: absolute;

    inset: 0;

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

    color: transparent;

    -webkit-text-fill-color: transparent;

    -webkit-text-stroke: 1.2px
        rgba(200, 255, 0, 0);

    filter:
        drop-shadow(
            0 0 0 rgba(200, 255, 0, 0)
        );

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.35s ease,
        -webkit-text-stroke-color 0.35s ease,
        filter 0.35s ease;
}


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

.brand-glow-wordmark:hover {
    -webkit-text-stroke-color:
        rgba(255, 255, 255, 0.72);

    transform: scale(1.015);
}

.brand-glow-wordmark:hover::after {
    opacity: 1;

    -webkit-text-stroke-color:
        rgba(200, 255, 0, 0.8);

    filter:
        drop-shadow(
            0 0 8px rgba(200, 255, 0, 0.65)
        )
        drop-shadow(
            0 0 25px rgba(200, 255, 0, 0.35)
        )
        drop-shadow(
            0 0 55px rgba(200, 255, 0, 0.18)
        );
}


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

.brand-glow-caption {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    margin-top: 38px;
}

.brand-glow-caption span {
    width: 55px;

    height: 1px;

    background:
        rgba(255, 255, 255, 0.12);
}

.brand-glow-caption small {
    color:
        rgba(255, 255, 255, 0.42);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.28em;

    white-space: nowrap;
}


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

@media (max-width: 700px) {

    .brand-glow-section {
        min-height: 170px;

        padding: 35px 12px;
    }

    .brand-glow-wordmark {
        font-size: clamp(48px, 14vw, 85px);

        letter-spacing: -0.06em;

        -webkit-text-stroke-width: 1px;
    }

    .brand-glow-caption {
        gap: 10px;

        margin-top: 25px;
    }

    .brand-glow-caption span {
        width: 30px;
    }

    .brand-glow-caption small {
        font-size: 7px;

        letter-spacing: 0.2em;
    }
}