/* =========================================================
   INNER HERO — SMALLER / CLEANER
   ========================================================= */

.inner-hero {
    position: relative;

    max-width: 100%;

    padding: 42px 0 32px;

    margin-bottom: 8px;

    overflow: hidden;
}


/* subtle glow behind hero */

.inner-hero::before {
    content: "";

    position: absolute;

    width: 360px;
    height: 180px;

    top: -80px;
    left: 8%;

    background: rgba(57, 119, 255, 0.07);

    filter: blur(70px);

    border-radius: 50%;

    pointer-events: none;
}


/* Kicker */

.inner-hero .kicker {
    position: relative;

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

    margin-bottom: 9px;

    color: #3977ff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.7px;
}


/* Small line before kicker */

.inner-hero .kicker::before {
    content: "";

    width: 22px;
    height: 2px;

    margin-right: 8px;
    margin-left: 28px;

    border-radius: 999px;

    background: #3977ff;
}


/* Hero title */

.inner-hero h1 {
    position: relative;

    margin-left: 35px;

    color: #15223a;

    font-size: clamp(32px, 4vw, 48px);

    line-height: 1.05;

    font-weight: 850;

    letter-spacing: -1.7px;
}


/* Hero description */

.inner-hero p {
    position: relative;

    max-width: 560px;

    margin: 10px 0 0 25px;

    color: #718097;

    font-size: 13px;

    line-height: 1.65;
}

/*  INNER HERO SEP 24 ============================================================= */


.inner-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background:
        /* Small floating balls */
        radial-gradient(circle, rgba(255,255,255,.65) 0 3px, transparent 4px) 8% 18% / 100px 100px,
        radial-gradient(circle, rgba(255,255,255,.45) 0 4px, transparent 5px) 22% 72% / 130px 130px,
        radial-gradient(circle, rgba(255,255,255,.55) 0 3px, transparent 4px) 35% 25% / 150px 150px,
        radial-gradient(circle, rgba(255,255,255,.40) 0 5px, transparent 6px) 48% 80% / 120px 120px,
        radial-gradient(circle, rgba(255,255,255,.60) 0 3px, transparent 4px) 62% 18% / 140px 140px,
        radial-gradient(circle, rgba(255,255,255,.45) 0 4px, transparent 5px) 74% 65% / 110px 110px,
        radial-gradient(circle, rgba(255,255,255,.55) 0 3px, transparent 4px) 88% 25% / 130px 130px,
        radial-gradient(circle, rgba(255,255,255,.40) 0 5px, transparent 6px) 94% 82% / 150px 150px,

        /* Main gradient */
        linear-gradient(
            115deg,
            #e9f6f8 0%,
            #d7eff2 15%,
            #b5e4e6 30%,
            #73cbd0 45%,
            #03ad9b 60%,
            #1594aa 75%,
            #0878a5 100%
        ) !important;

    background-repeat: no-repeat;
}


/* Floating balls */
.inner-hero::before,
.inner-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}


/* Large Ball 1 */
.inner-hero::before {
    width: 90px;
    height: 90px;
    top: 8%;
    left: 8%;

    background: radial-gradient(
        circle at 30% 25%,
        rgba(255, 255, 255, 0.75),
        rgba(255, 255, 255, 0.18) 40%,
        rgba(255, 255, 255, 0.03) 70%,
        transparent 72%
    );

    box-shadow:
        0 0 35px rgba(255, 255, 255, 0.18);

    animation: heroBallOne 11s ease-in-out infinite alternate;
}


/* Large Ball 2 */
.inner-hero::after {
    width: 140px;
    height: 140px;
    right: 7%;
    bottom: 8%;

    background: radial-gradient(
        circle at 30% 25%,
        rgba(255, 255, 255, 0.65),
        rgba(255, 255, 255, 0.14) 40%,
        rgba(255, 255, 255, 0.02) 70%,
        transparent 72%
    );

    box-shadow:
        0 0 45px rgba(255, 255, 255, 0.15);

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


/* Large Ball Movement */
@keyframes heroBallOne {
    0% {
        transform: translate(0, 20px) scale(0.85);
    }

    25% {
        transform: translate(100px, -20px) scale(1);
    }

    50% {
        transform: translate(180px, 50px) scale(1.08);
    }

    75% {
        transform: translate(100px, 100px) scale(0.92);
    }

    100% {
        transform: translate(-20px, 60px) scale(1.05);
    }
}


@keyframes heroBallTwo {
    0% {
        transform: translate(0, 0) scale(1);
    }

    30% {
        transform: translate(-100px, -60px) scale(1.1);
    }

    60% {
        transform: translate(-180px, 20px) scale(0.9);
    }

    100% {
        transform: translate(-70px, 100px) scale(1.05);
    }
}