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

.cs-hero {
    --hero-green: #4D8C09;
    --hero-dark-green: #306D0C;
    --hero-light-green: #589C00;
    --hero-gray: #595959;
    --hero-dark: #242424;
    position: relative;
    width: 100%;
    min-height: 525px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: radial-gradient( circle at 78% 45%, rgba(77, 140, 9, 0.14), transparent 27% ), radial-gradient( circle at 15% 80%, rgba(88, 156, 0, 0.08), transparent 28% ), linear-gradient( 135deg, #ffffff 0%, #fbfdf9 52%, #f3f8ed 100% );
    perspective: 1200px;
    isolation: isolate;
}


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

    .cs-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -5;
        background-image: url('../image/background/Solution.png');
        background-size: cover;
        background-position: center;
        opacity: 0.48;
    }


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

.cs-hero-grid {
    position: absolute;
    inset: 0;
    z-index: -3;
    opacity: 0.28;
    background-image: linear-gradient( rgba(77,140,9,0.07) 1px, transparent 1px ), linear-gradient( 90deg, rgba(77,140,9,0.07) 1px, transparent 1px );
    background-size: 55px 55px;
    mask-image: linear-gradient( to right, transparent, black 40%, black 100% );
    -webkit-mask-image: linear-gradient( to right, transparent, black 40%, black 100% );
}


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

.cs-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(4px);
    pointer-events: none;
    z-index: -2;
}


.cs-glow-one {
    width: 420px;
    height: 420px;
    right: 5%;
    top: 5%;
    background: radial-gradient( circle, rgba(77,140,9,0.18), transparent 68% );
    animation: csGlowMove 7s ease-in-out infinite alternate;
}


.cs-glow-two {
    width: 250px;
    height: 250px;
    left: 30%;
    bottom: -130px;
    background: radial-gradient( circle, rgba(88,156,0,0.13), transparent 70% );
    animation: csGlowMove 9s ease-in-out infinite alternate-reverse;
}


.cs-glow-three {
    width: 180px;
    height: 180px;
    right: 43%;
    top: 8%;
    background: radial-gradient( circle, rgba(48,109,12,0.08), transparent 70% );
    animation: csGlowPulse 4s ease-in-out infinite;
}


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

.cs-particle {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--hero-green);
    opacity: 0.35;
    box-shadow: 0 0 12px rgba(77,140,9,0.55);
    animation: csParticleFloat 5s ease-in-out infinite;
}


.particle-one {
    left: 8%;
    top: 25%;
    animation-delay: 0s;
}


.particle-two {
    left: 44%;
    top: 18%;
    animation-delay: 1.2s;
}


.particle-three {
    right: 11%;
    top: 22%;
    animation-delay: 2s;
}


.particle-four {
    right: 35%;
    bottom: 16%;
    animation-delay: 0.7s;
}


.particle-five {
    left: 52%;
    bottom: 11%;
    animation-delay: 2.7s;
}


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

.cs-hero-container {
    position: relative;
    z-index: 5;
    width: min(1380px, 94%);
    min-height: 525px;
    margin: auto;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 40px;
}


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

.cs-hero-content {
    position: relative;
    z-index: 10;
    padding: 40px 0 40px 3px;
    animation: csHeroContentIn 0.9s cubic-bezier(.2,.8,.2,1) both;
}


/* =========================================================
   BADGE
========================================================= */

.cs-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    margin-bottom: 18px;
    color: var(--hero-dark-green);
    background: rgba(243,248,237,0.90);
    border: 1px solid rgba(77,140,9,0.16);
    border-radius: 50px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    box-shadow: 0 7px 20px rgba(77,140,9,0.08);
    backdrop-filter: blur(10px);
    animation: csBadgeFloat 3s ease-in-out infinite;
}


.cs-badge-dot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--hero-light-green);
    box-shadow: 0 0 0 5px rgba(88,156,0,0.10), 0 0 12px rgba(88,156,0,0.45);
    animation: csDotPulse 2s ease-in-out infinite;
}


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

.cs-hero-content h1 {
    margin: 0;
    max-width: 680px;
    color: var(--hero-dark);
    font-size: clamp(34px, 4vw, 58px);
    font-weight: 800;
    letter-spacing: -1.8px;
}


.cs-heading-line {
    display: block;
}


.cs-green-text {
    position: relative;
    display: inline-block;
    color: var(--hero-green);
    background: linear-gradient( 90deg, #306D0C, #4D8C09, #589C00 );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


    /* animated line */

    .cs-green-text::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -5px;
        width: 75%;
        height: 3px;
        border-radius: 10px;
        background: linear-gradient( 90deg, var(--hero-dark-green), var(--hero-light-green), transparent );
        transform-origin: left;
        animation: csLineGrow 1.5s 0.7s ease both;
    }


/* =========================================================
   TAGLINE
========================================================= */

.cs-hero-tagline {
    max-width: 570px;
    margin: 20px 0 25px;
    color: var(--hero-gray);
    font-size: 16px;
    line-height: 1.7;
    font-weight: 500;
}


    .cs-hero-tagline strong {
        color: var(--hero-green);
        font-weight: 700;
    }


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

.cs-hero-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}


/* Common */

.cs-btn {
    position: relative;
    min-height: 47px;
    padding: 0 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    overflow: hidden;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
    transform-style: preserve-3d;
}


/* Primary */

.cs-btn-primary {
    color: #fff;
    background: linear-gradient( 135deg, #306D0C, #4D8C09, #589C00 );
    box-shadow: 0 10px 22px rgba(77,140,9,0.25);
}


    .cs-btn-primary::before {
        content: "";
        position: absolute;
        top: -60%;
        left: -80px;
        width: 50px;
        height: 200%;
        background: rgba(255,255,255,0.23);
        transform: rotate(25deg);
        transition: left 0.65s ease;
    }


    .cs-btn-primary:hover {
        color: #fff;
        transform: translateY(-4px) perspective(600px) rotateX(3deg);
        box-shadow: 0 17px 32px rgba(77,140,9,0.34);
    }


        .cs-btn-primary:hover::before {
            left: 120%;
        }


.cs-btn b {
    font-size: 17px;
    line-height: 1;
    transition: transform 0.3s ease;
}


.cs-btn:hover b {
    transform: translateX(4px);
}


/* Outline */

.cs-btn-outline {
    color: var(--hero-dark-green);
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(77,140,9,0.25);
    box-shadow: 0 8px 18px rgba(0,0,0,0.04);
    backdrop-filter: blur(10px);
}


    .cs-btn-outline:hover {
        color: var(--hero-dark-green);
        background: #F3F8ED;
        transform: translateY(-4px) perspective(600px) rotateX(3deg);
        box-shadow: 0 14px 28px rgba(77,140,9,0.14);
    }


/* Text link */

.cs-text-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 6px;
    color: var(--hero-gray);
    font-size: 12px;
    font-weight: 700;
    transition: all 0.3s ease;
}


    .cs-text-link span {
        color: var(--hero-green);
        transition: transform 0.3s ease;
    }


    .cs-text-link:hover {
        color: var(--hero-green);
        transform: translateX(3px);
    }


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


/* =========================================================
   TRUST LINE
========================================================= */

.cs-hero-trust {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 27px;
    color: #777;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.4px;
}


.cs-trust-line {
    width: 30px;
    height: 1px;
    background: var(--hero-green);
}


.cs-hero-trust i {
    color: var(--hero-green);
    font-style: normal;
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.cs-hero-visual {
    position: relative;
    min-height: 470px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1300px;
    transform-style: preserve-3d;
    animation: csVisualIn 1s 0.15s cubic-bezier(.2,.8,.2,1) both;
}


.cs-visual-scene {
    position: relative;
    width: 470px;
    height: 430px;
    transform-style: preserve-3d;
    transition: transform 0.25s ease-out;
}


/* =========================================================
   MAIN 3D CARD
========================================================= */

.cs-main-3d-card {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 350px;
    height: 275px;
    transform: translate(-50%, -50%) rotateY(-9deg) rotateX(5deg) translateZ(30px);
    transform-style: preserve-3d;
    border-radius: 25px;
    background: linear-gradient( 145deg, rgba(255,255,255,0.96), rgba(243,248,237,0.92) );
    border: 2px solid #528b14;
    box-shadow: 20px 25px 50px rgba(48,109,12,0.16), -5px -5px 20px rgba(255,255,255,0.85), inset 0 1px 0 rgba(255,255,255,0.95);
    backdrop-filter: blur(15px);
    overflow: hidden;
    animation: csCardFloat 5s ease-in-out infinite;
}


    /* Green 3D side */

    .cs-main-3d-card::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 12px;
        top: 10px;
        z-index: -1;
        border-radius: 25px;
        background: linear-gradient( 145deg, rgba(48,109,12,0.35), rgba(88,156,0,0.12) );
        transform: translateZ(-20px);
        filter: blur(1px);
    }


    /* Shine */

    .cs-main-3d-card::after {
        content: "";
        position: absolute;
        width: 180px;
        height: 400px;
        top: -100px;
        left: -130px;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.38), transparent );
        transform: rotate(25deg);
        animation: csCardShine 5s ease-in-out infinite;
    }


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

.cs-image-wrapper {
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
    position: relative;
}


    .cs-image-wrapper::before {
        content: "";
        position: absolute;
        width: 185px;
        height: 185px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(77,140,9,0.15), transparent 68% );
        animation: csLogoGlow 4s ease-in-out infinite;
    }


.cs-hero-logo {
    position: absolute;
    z-index: 2;
    height: auto;
    object-fit: contain;
    filter: drop-shadow( 0 13px 13px rgba(48,109,12,0.13) );
    transform: translateZ(45px);
    transition: transform 0.45s ease;
}


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

.cs-card-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 85px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,0.68);
    border-top: 1px solid rgba(77,140,9,0.10);
    backdrop-filter: blur(15px);
    transform: translateZ(20px);
}


    .cs-card-bottom span {
        display: block;
        margin-bottom: 5px;
        color: var(--hero-green);
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 1.5px;
    }


    .cs-card-bottom strong {
        color: var(--hero-gray);
        font-size: 12px;
        font-weight: 700;
    }


.cs-card-icon {
    width: 39px;
    height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient( 135deg, #306D0C, #589C00 );
    box-shadow: 0 8px 17px rgba(77,140,9,0.25);
    font-size: 16px;
    transform: translateZ(30px);
}


/* =========================================================
   ORBITS
========================================================= */

.cs-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(77,140,9,0.18);
    border-radius: 50%;
    pointer-events: none;
}


.orbit-one {
    width: 440px;
    height: 255px;
    transform: translate(-50%, -50%) rotate(-13deg) rotateX(65deg);
    animation: csOrbitRotate 13s linear infinite;
}


.orbit-two {
    width: 400px;
    height: 225px;
    transform: translate(-50%, -50%) rotate(28deg) rotateX(65deg);
    border-color: rgba(88,156,0,0.12);
    animation: csOrbitRotateReverse 17s linear infinite;
}


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

.cs-floating-card {
    position: absolute;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    min-width: 175px;
    border-radius: 14px;
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(255,255,255,0.95);
    box-shadow: 0 18px 35px rgba(48,109,12,0.15), inset 0 1px 0 rgba(255,255,255,0.95);
    backdrop-filter: blur(14px);
    transform-style: preserve-3d;
}


.cs-card-top {
    top: 52px;
    right: -5px;
    transform: translateZ(90px) rotateY(-7deg);
    animation: csFloatTop 4.5s ease-in-out infinite;
}


.cs-card-bottom-right {
    right: -15px;
    bottom: 42px;
    transform: translateZ(80px) rotateY(-7deg);
    animation: csFloatBottom 5.5s 0.8s ease-in-out infinite;
}


.cs-floating-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient( 135deg, #306D0C, #589C00 );
    box-shadow: 0 7px 14px rgba(77,140,9,0.20);
    font-size: 13px;
}


.cs-floating-card small {
    display: block;
    margin-bottom: 3px;
    color: #8A8A8A;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.2px;
}


.cs-floating-card strong {
    display: block;
    color: #4A4A4A;
    font-size: 10px;
    font-weight: 700;
}


/* =========================================================
   3D SPHERE
========================================================= */

.cs-3d-sphere {
    position: absolute;
    left: 13px;
    bottom: 58px;
    width: 47px;
    height: 47px;
    border-radius: 50%;
    background: radial-gradient( circle at 30% 25%, #A3D65C 0%, #589C00 30%, #306D0C 72%, #1C4507 100% );
    box-shadow: inset -9px -9px 15px rgba(0,0,0,0.18), inset 7px 7px 10px rgba(255,255,255,0.35), 0 15px 25px rgba(48,109,12,0.23);
    transform: translateZ(100px);
    animation: csSphereFloat 4s ease-in-out infinite;
}


    .cs-3d-sphere span {
        position: absolute;
        width: 11px;
        height: 11px;
        left: 10px;
        top: 8px;
        border-radius: 50%;
        background: rgba(255,255,255,0.60);
        filter: blur(1px);
    }


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

.cs-orbit-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    top: 78px;
    left: 67px;
    border-radius: 50%;
    background: #589C00;
    box-shadow: 0 0 0 6px rgba(88,156,0,0.09), 0 0 20px rgba(88,156,0,0.45);
    animation: csDotOrbit 7s linear infinite;
}


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

.cs-hero-bottom-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient( 90deg, transparent, #306D0C 25%, #589C00 50%, #306D0C 75%, transparent );
    opacity: 0.55;
}


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

@keyframes csHeroContentIn {

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

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


@keyframes csVisualIn {

    from {
        opacity: 0;
        transform: translateX(40px) scale(0.94);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}


@keyframes csCardFloat {

    0%, 100% {
        transform: translate(-50%, -50%) rotateY(-9deg) rotateX(5deg) translateZ(30px);
    }

    50% {
        transform: translate(-50%, -53%) rotateY(-6deg) rotateX(7deg) translateZ(45px);
    }
}


@keyframes csFloatTop {

    0%, 100% {
        transform: translateZ(90px) rotateY(-7deg) translateY(0);
    }

    50% {
        transform: translateZ(120px) rotateY(-4deg) translateY(-9px);
    }
}


@keyframes csFloatBottom {

    0%, 100% {
        transform: translateZ(80px) rotateY(-7deg) translateY(0);
    }

    50% {
        transform: translateZ(105px) rotateY(-4deg) translateY(8px);
    }
}


@keyframes csSphereFloat {

    0%, 100% {
        transform: translateZ(100px) translateY(0) rotate(0deg);
    }

    50% {
        transform: translateZ(120px) translateY(-14px) rotate(12deg);
    }
}


@keyframes csOrbitRotate {

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

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


@keyframes csOrbitRotateReverse {

    from {
        transform: translate(-50%, -50%) rotate(28deg) rotateX(65deg) rotateZ(360deg);
    }

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


@keyframes csDotOrbit {

    0% {
        transform: rotate(0deg) translateX(150px) rotate(0deg);
    }

    100% {
        transform: rotate(360deg) translateX(150px) rotate(-360deg);
    }
}


@keyframes csBadgeFloat {

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

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


@keyframes csDotPulse {

    0%, 100% {
        box-shadow: 0 0 0 5px rgba(88,156,0,0.10), 0 0 12px rgba(88,156,0,0.45);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(88,156,0,0.05), 0 0 20px rgba(88,156,0,0.65);
    }
}


@keyframes csLineGrow {

    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}


@keyframes csGlowMove {

    from {
        transform: translate3d(-15px, 0, 0) scale(0.95);
    }

    to {
        transform: translate3d(15px, -12px, 0) scale(1.08);
    }
}


@keyframes csGlowPulse {

    0%, 100% {
        opacity: 0.45;
        transform: scale(0.9);
    }

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


@keyframes csParticleFloat {

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

    50% {
        transform: translateY(-20px) scale(1.4);
        opacity: 0.65;
    }
}


@keyframes csCardShine {

    0% {
        left: -150px;
    }

    35%, 100% {
        left: 500px;
    }
}


@keyframes csLogoGlow {

    0%, 100% {
        transform: scale(0.9);
        opacity: 0.65;
    }

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


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

@media (max-width: 1050px) {

    .cs-hero {
        min-height: 490px;
    }


    .cs-hero-container {
        min-height: 490px;
        grid-template-columns: 1fr 0.85fr;
        gap: 10px;
    }


    .cs-hero-content h1 {
        font-size: clamp(32px, 4vw, 48px);
    }


    .cs-visual-scene {
        transform: scale(0.86);
    }


    .cs-floating-card {
        min-width: 155px;
    }
}


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

@media (max-width: 768px) {

    .cs-hero {
        min-height: auto;
        padding: 35px 0 25px;
    }


        .cs-hero::before {
            background-image: linear-gradient( 180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.82) ), url("Images/hero-business.jpg");
            background-position: center;
        }


    .cs-hero-container {
        width: 92%;
        min-height: auto;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }


    .cs-hero-content {
        width: 100%;
        padding: 10px 0 0;
        text-align: center;
    }


    .cs-hero-badge {
        margin-bottom: 14px;
    }


    .cs-hero-content h1 {
        font-size: clamp(30px, 8vw, 42px);
        line-height: 1.12;
        letter-spacing: -1px;
    }


    .cs-green-text::after {
        left: 50%;
        transform: translateX(-50%) scaleX(1);
        width: 55%;
    }


    .cs-hero-tagline {
        margin: 17px auto 21px;
        max-width: 500px;
        font-size: 14px;
    }


    .cs-hero-buttons {
        justify-content: center;
        gap: 9px;
    }


    .cs-btn {
        min-height: 44px;
        padding: 0 15px;
        font-size: 11px;
    }


    .cs-text-link {
        width: 100%;
        justify-content: center;
        padding-top: 4px;
    }


    .cs-hero-trust {
        justify-content: center;
        margin-top: 18px;
        flex-wrap: wrap;
    }


    .cs-hero-visual {
        width: 100%;
        min-height: 365px;
        margin-top: -5px;
        transform: scale(0.90);
    }


    .cs-visual-scene {
        width: 390px;
        height: 350px;
    }


    .cs-main-3d-card {
        width: 310px;
        height: 245px;
    }


    .cs-image-wrapper {
        height: 168px;
    }


    .cs-hero-logo {
        width: 235px;
    }


    .cs-card-bottom {
        min-height: 75px;
        padding: 12px 16px;
    }


        .cs-card-bottom strong {
            font-size: 10px;
        }


    .cs-floating-card {
        min-width: 145px;
        padding: 9px 11px;
    }


    .cs-card-top {
        top: 42px;
        right: -3px;
    }


    .cs-card-bottom-right {
        right: -2px;
        bottom: 35px;
    }


    .cs-3d-sphere {
        left: 5px;
        bottom: 45px;
        width: 38px;
        height: 38px;
    }


    .orbit-one {
        width: 380px;
        height: 220px;
    }


    .orbit-two {
        width: 345px;
        height: 195px;
    }


    .cs-hero-grid {
        background-size: 40px 40px;
    }
}


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

@media (max-width: 480px) {

    .cs-hero {
        padding-top: 28px;
    }


    .cs-hero-content h1 {
        font-size: 30px;
    }


    .cs-hero-tagline {
        font-size: 13px;
    }


    .cs-btn-primary,
    .cs-btn-outline {
        flex: 1;
        min-width: 145px;
    }


    .cs-hero-visual {
        min-height: 320px;
        transform: scale(0.76);
        margin-top: -28px;
        margin-bottom: -25px;
    }


    .cs-floating-card {
        transform: scale(0.9) translateZ(80px);
    }


    .cs-card-top {
        right: -15px;
    }


    .cs-card-bottom-right {
        right: -15px;
    }


    .cs-hero-trust {
        font-size: 9px;
    }
}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 360px) {

    .cs-hero-content h1 {
        font-size: 27px;
    }


    .cs-hero-buttons {
        flex-direction: column;
    }


    .cs-btn-primary,
    .cs-btn-outline {
        width: 100%;
    }


    .cs-text-link {
        margin-top: -2px;
    }


    .cs-hero-visual {
        transform: scale(0.66);
        margin-top: -45px;
        margin-bottom: -55px;
    }
}


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

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

    .cs-hero *,
    .cs-hero *::before,
    .cs-hero *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}




/* =========================================================
   COMPANY INTRODUCTION
   ========================================================= */

.company-intro-section {
    position: relative;
    width: 100%;
    min-height: 720px;
    padding: 34px 6%;
    overflow: hidden;
    background: radial-gradient( circle at 75% 45%, rgba(76, 175, 28, 0.16), transparent 32% ), linear-gradient( 135deg, #172317 0%, #202d20 48%, #111a13 100% );
    color: #ffffff;
    isolation: isolate;
    font-family: 'Inter', Arial, sans-serif;
}


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

.intro-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient( rgba(255,255,255,0.035) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,0.035) 1px, transparent 1px );
    background-size: 55px 55px;
    mask-image: linear-gradient( to right, transparent, black 30%, black 75%, transparent );
    z-index: -2;
}


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

.intro-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: -1;
}

.intro-glow-one {
    width: 400px;
    height: 400px;
    background: rgba(71, 164, 16, 0.13);
    top: -120px;
    right: 5%;
    animation: introGlowMove 7s ease-in-out infinite alternate;
}

.intro-glow-two {
    width: 300px;
    height: 300px;
    background: rgba(124, 190, 69, 0.08);
    bottom: -100px;
    left: 15%;
    animation: introGlowMove 9s ease-in-out infinite alternate-reverse;
}

@keyframes introGlowMove {

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

    100% {
        transform: translate3d(-40px,30px,0);
    }
}


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

.intro-container {
    width: 100%;
    max-width: 1450px;
    margin: auto;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 70px;
}


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

.intro-content {
    position: relative;
    z-index: 5;
}


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

.intro-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    border: 1px solid rgba(121, 190, 67, 0.3);
    border-radius: 50px;
    background: rgba(255,255,255,0.045);
    backdrop-filter: blur(12px);
    color: #a7d875;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 25px;
    box-shadow: inset 0 0 20px rgba(255,255,255,0.025), 0 8px 30px rgba(0,0,0,0.15);
}


.intro-label-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #52a510;
    box-shadow: 0 0 0 5px rgba(82,165,16,0.13), 0 0 20px rgba(82,165,16,0.8);
    animation: labelPulse 2s infinite;
}

@keyframes labelPulse {

    0%,100% {
        box-shadow: 0 0 0 5px rgba(82,165,16,0.13), 0 0 15px rgba(82,165,16,0.6);
    }

    50% {
        box-shadow: 0 0 0 9px rgba(82,165,16,0.03), 0 0 28px rgba(82,165,16,0.9);
    }
}


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

.intro-content h2 {
    margin: 0;
    max-width: 680px;
    /* SAME FONT SIZE SYSTEM AS HERO SECTION */
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1.04;
    letter-spacing: -2.5px;
    font-weight: 800;
    color: #f7faf6;
}


    .intro-content h2 span {
        display: block;
        color: #58a91a;
        background: linear-gradient( 90deg, #58a91a, #9bd465, #58a91a );
        background-size: 200% auto;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: greenTextMove 5s linear infinite;
    }

@keyframes greenTextMove {

    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}


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

.intro-line {
    width: 150px;
    height: 4px;
    margin: 28px 0 24px;
    border-radius: 20px;
    background: linear-gradient( 90deg, #4d970f, #9bd765, transparent );
    box-shadow: 0 0 20px rgba(86,169,26,0.35);
}


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

.intro-description {
    max-width: 690px;
    margin: 0 0 28px;
    color: #c5cec3;
    font-size: 17px;
    line-height: 1.75;
}


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

.intro-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-width: 680px;
    margin-bottom: 35px;
}


.intro-point {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    background: rgba(255,255,255,0.035);
    backdrop-filter: blur(10px);
    color: #e4ebe1;
    font-size: 14px;
    font-weight: 600;
    transition: transform .35s ease, background .35s ease, border-color .35s ease;
}

    .intro-point:hover {
        transform: translateY(-4px);
        background: rgba(76,157,21,0.10);
        border-color: rgba(100,175,47,0.25);
    }


.point-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: rgba(76,155,15,0.18);
    color: #80c34b;
    font-size: 13px;
    font-weight: 900;
}


/* =========================================================
   HIGHLIGHTS
   ========================================================= */

.intro-highlights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 700px;
    margin-bottom: 35px;
    border-top: 1px solid rgba(255,255,255,0.09);
    border-bottom: 1px solid rgba(255,255,255,0.09);
    padding: 18px 0;
}


.highlight-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-right: 15px;
    border-right: 1px solid rgba(255,255,255,0.08);
}


    .highlight-item:last-child {
        border-right: 0;
        padding-left: 12px;
    }


    .highlight-item strong {
        color: #68ad2e;
        font-size: 20px;
    }


    .highlight-item span {
        color: #aeb8aa;
        font-size: 11px;
        line-height: 1.4;
        font-weight: 600;
    }


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

.intro-btn {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 14px 21px 14px 23px;
    border-radius: 12px;
    text-decoration: none;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    background: linear-gradient( 135deg, #3f850b, #5da91d );
    box-shadow: 0 15px 35px rgba(53,113,11,0.28);
    transition: transform .35s ease, box-shadow .35s ease;
}


    .intro-btn span {
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: rgba(255,255,255,0.13);
        font-size: 18px;
    }


    .intro-btn:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 45px rgba(53,113,11,0.4);
    }


/* =========================================================
   RIGHT VISUAL
   ========================================================= */

.intro-visual {
    position: relative;
    min-height: 520px;
    perspective: 1200px;
}


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

.intro-image-card {
    position: absolute;
    overflow: hidden;
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.07);
    box-shadow: 0 35px 80px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
    transform-style: preserve-3d;
    transition: transform .5s ease, box-shadow .5s ease;
}


.image-card-main {
    width: 78%;
    height: 370px;
    top: 65px;
    left: 8%;
    transform: perspective(1000px) rotateY(-7deg) rotateX(3deg);
    animation: mainCardFloat 5s ease-in-out infinite;
}


    .image-card-main:hover {
        transform: perspective(1000px) rotateY(-2deg) rotateX(0deg) translateY(-8px) scale(1.015);
        box-shadow: 0 45px 100px rgba(0,0,0,0.45), 0 0 50px rgba(77,157,18,0.12);
    }


@keyframes mainCardFloat {

    0%,100% {
        transform: perspective(1000px) rotateY(-7deg) rotateX(3deg) translateY(0);
    }

    50% {
        transform: perspective(1000px) rotateY(-7deg) rotateX(3deg) translateY(-12px);
    }
}


.intro-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .8s ease;
}


.intro-image-card:hover img {
    transform: scale(1.07);
}


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

.image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(7,18,8,0.85), transparent 55% );
}


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

.image-card-content {
    position: absolute;
    left: 25px;
    right: 25px;
    bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}


    .image-card-content span {
        color: #8ac55c;
        font-size: 10px;
        letter-spacing: 2px;
        font-weight: 800;
    }


    .image-card-content strong {
        font-size: 25px;
        color: #ffffff;
    }


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

.image-card-small {
    width: 52%;
    height: 185px;
    right: -3%;
    bottom: -91px;
    transform: perspective(900px) rotateY(-10deg) rotateX(5deg);
    animation: smallCardFloat 4.5s ease-in-out infinite;
}


@keyframes smallCardFloat {

    0%,100% {
        transform: perspective(900px) rotateY(-10deg) rotateX(5deg) translateY(0);
    }

    50% {
        transform: perspective(900px) rotateY(-10deg) rotateX(5deg) translateY(-10px);
    }
}


/* =========================================================
   SMALL CARD INFO
   ========================================================= */

.small-card-info {
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 15px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px;
    border-radius: 13px;
    background: rgba(14,27,15,0.76);
    backdrop-filter: blur(12px);
}


.small-card-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #4d970f;
    color: white;
    font-weight: 900;
}


.small-card-info span {
    display: block;
    color: #8dbf67;
    font-size: 8px;
    letter-spacing: 1.5px;
    font-weight: 800;
}


.small-card-info strong {
    display: block;
    margin-top: 3px;
    color: white;
    font-size: 12px;
}


/* =========================================================
   TRUST BADGE
   ========================================================= */

.trust-badge {
    position: absolute;
    top: 18px;
    right: -1%;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    border-radius: 15px;
    background: rgba(250,252,249,0.94);
    color: #172116;
    box-shadow: 0 20px 45px rgba(0,0,0,0.28);
    backdrop-filter: blur(15px);
    animation: badgeFloat 4s ease-in-out infinite;
}


@keyframes badgeFloat {

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

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


.trust-badge-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #4c920e;
    color: white;
    box-shadow: 0 7px 20px rgba(76,146,14,0.35);
}


.trust-badge span {
    display: block;
    color: #7b8479;
    font-size: 8px;
    letter-spacing: 1.5px;
    font-weight: 800;
}


.trust-badge strong {
    display: block;
    margin-top: 3px;
    font-size: 13px;
}


/* =========================================================
   ORBITS
   ========================================================= */

.visual-orbit {
    position: absolute;
    border: 1px solid rgba(111,178,65,0.18);
    border-radius: 50%;
    pointer-events: none;
}


.orbit-one {
    width: 480px;
    height: 210px;
    top: 160px;
    left: 3%;
    transform: rotate(-22deg);
    animation: orbitRotate 12s linear infinite;
}


.orbit-two {
    width: 430px;
    height: 180px;
    top: 180px;
    left: 9%;
    transform: rotate(22deg);
    animation: orbitRotateReverse 15s linear infinite;
}


@keyframes orbitRotate {

    from {
        transform: rotate(-22deg);
    }

    to {
        transform: rotate(338deg);
    }
}


@keyframes orbitRotateReverse {

    from {
        transform: rotate(22deg);
    }

    to {
        transform: rotate(-338deg);
    }
}


/* =========================================================
   FLOATING ORBS
   ========================================================= */

.intro-orb {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient( circle at 30% 25%, #b7ed7e, #55a414 38%, #245f06 75%, #102f05 );
    box-shadow: inset -10px -15px 20px rgba(0,0,0,0.28), inset 8px 8px 12px rgba(255,255,255,0.25), 0 20px 35px rgba(0,0,0,0.3), 0 0 30px rgba(76,157,17,0.2);
    z-index: 8;
}


.orb-main {
    width: 55px;
    height: 55px;
    left: 0;
    bottom: 110px;
    animation: orbFloat 4s ease-in-out infinite;
}


.orb-small {
    width: 16px;
    height: 16px;
    top: 125px;
    left: 3%;
    animation: orbFloat 3s ease-in-out infinite reverse;
}


@keyframes orbFloat {

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

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


/* =========================================================
   RESPONSIVE - 1100px
   ========================================================= */

@media (max-width: 1100px) {

    .company-intro-section {
        padding: 80px 5%;
    }

    .intro-container {
        gap: 35px;
    }

    /* SAME HERO FONT SYSTEM */
    .intro-content h2 {
        font-size: clamp(32px, 4vw, 48px);
    }

    .intro-visual {
        min-height: 470px;
    }

    .image-card-main {
        width: 82%;
        left: 2%;
    }

    .image-card-small {
        right: -4%;
    }

    .trust-badge {
        right: -3%;
    }
}


/* =========================================================
   RESPONSIVE - 850px
   ========================================================= */

@media (max-width: 850px) {

    .company-intro-section {
        padding: 75px 6%;
    }

    .intro-container {
        grid-template-columns: 1fr;
    }

    .intro-content {
        text-align: center;
    }

    .intro-label {
        margin-left: auto;
        margin-right: auto;
    }

    /* SAME HERO MOBILE RANGE */
    .intro-content h2 {
        font-size: clamp(30px, 8vw, 42px);
    }

    .intro-line {
        margin-left: auto;
        margin-right: auto;
    }

    .intro-description {
        margin-left: auto;
        margin-right: auto;
    }

    .intro-points {
        margin-left: auto;
        margin-right: auto;
    }

    .intro-highlights {
        margin-left: auto;
        margin-right: auto;
    }

    .intro-btn {
        margin: auto;
    }

    .intro-visual {
        width: 100%;
        max-width: 650px;
        margin: 15px auto 0;
        min-height: 500px;
    }
}


/* =========================================================
   RESPONSIVE - 600px
   ========================================================= */

@media (max-width: 600px) {

    .company-intro-section {
        padding: 65px 20px;
    }

    /* SAME HERO MOBILE FONT */
    .intro-content h2 {
        font-size: 30px;
        letter-spacing: -1.5px;
    }

    .intro-description {
        font-size: 15px;
        line-height: 1.65;
    }

    .intro-points {
        grid-template-columns: 1fr;
    }

    .intro-point {
        text-align: left;
    }

    .intro-highlights {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px 0;
    }

    .highlight-item {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,0.07);
        padding: 8px 12px;
        text-align: left;
    }

        .highlight-item:last-child {
            padding-left: 12px;
            border-bottom: 0;
        }

    .intro-visual {
        min-height: 390px;
    }

    .image-card-main {
        width: 88%;
        height: 270px;
        left: 0;
        top: 55px;
    }

    .image-card-small {
        width: 58%;
        height: 145px;
        right: -2%;
        bottom: 5px;
    }

    .trust-badge {
        top: 5px;
        right: 0;
        padding: 10px 12px;
    }

    .trust-badge-icon {
        width: 32px;
        height: 32px;
    }

    .trust-badge strong {
        font-size: 11px;
    }

    .orb-main {
        width: 42px;
        height: 42px;
        left: -5px;
        bottom: 85px;
    }

    .orbit-one {
        width: 330px;
        height: 160px;
        left: 0;
        top: 130px;
    }

    .orbit-two {
        width: 300px;
        height: 130px;
        left: 5%;
        top: 145px;
    }

    .image-card-content {
        left: 17px;
        bottom: 17px;
    }

        .image-card-content strong {
            font-size: 19px;
        }
}


/* =========================================================
   RESPONSIVE - 480px
   ========================================================= */

@media (max-width: 480px) {

    .intro-content h2 {
        font-size: 30px;
    }
}


/* =========================================================
   RESPONSIVE - 400px
   ========================================================= */

@media (max-width: 400px) {

    .intro-content h2 {
        font-size: 30px;
    }

    .intro-visual {
        min-height: 350px;
    }

    .image-card-main {
        height: 245px;
    }

    .image-card-small {
        height: 125px;
    }

    .trust-badge {
        transform: scale(.88);
        transform-origin: right top;
    }
}


/* =========================================================
   RESPONSIVE - 360px
   ========================================================= */

@media (max-width: 360px) {

    .intro-content h2 {
        font-size: 27px;
    }
}




/* =========================================================
   OUR SERVICES — HOME PREVIEW
   PREMIUM LIGHT / 3D / ANIMATED
   BACKGROUND IMAGE + SOFT OVERLAY
   ========================================================= */

.services-preview-section {
    position: relative;
    width: 100%;
    padding: 24px 5.5% 11px;
    overflow: hidden;
    isolation: isolate;
    /*
       BACKGROUND IMAGE
       Soft white overlay keeps text readable
       while the calling-office image remains visible.
    */
    background: linear-gradient( 135deg, rgba(249, 252, 247, 0.84) 0%, rgba(245, 250, 242, 0.76) 45%, rgba(248, 251, 247, 0.84) 100% ), url("../image/background/bacc.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: #20251f;
}


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

.services-bg-grid {
    position: absolute;
    inset: 0;
    z-index: -5;
    pointer-events: none;
    background-image: linear-gradient( rgba(68, 139, 28, 0.045) 1px, transparent 1px ), linear-gradient( 90deg, rgba(68, 139, 28, 0.045) 1px, transparent 1px );
    background-size: 58px 58px;
    mask-image: linear-gradient( to bottom, transparent 0%, black 18%, black 82%, transparent 100% );
    animation: servicesGridMove 18s linear infinite;
}


@keyframes servicesGridMove {

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

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

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


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

.services-bg-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(75px);
    z-index: -4;
}


.services-glow-1 {
    width: 380px;
    height: 380px;
    top: -170px;
    left: -100px;
    background: rgba(86, 165, 23, 0.10);
    animation: serviceGlowOne 8s ease-in-out infinite alternate;
}


.services-glow-2 {
    width: 420px;
    height: 420px;
    right: -170px;
    bottom: -200px;
    background: rgba(112, 184, 57, 0.10);
    animation: serviceGlowTwo 10s ease-in-out infinite alternate;
}


@keyframes serviceGlowOne {

    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(55px, 35px, 0) scale(1.12);
    }
}


@keyframes serviceGlowTwo {

    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(-45px, -35px, 0) scale(1.08);
    }
}


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

.services-preview-container {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    position: relative;
}


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

.services-preview-heading {
    max-width: 820px;
    margin: 0 auto 48px;
    text-align: center;
    position: relative;
    z-index: 3;
}


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

.services-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 17px;
    border: 1px solid rgba(78, 145, 24, 0.18);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.76);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #4d8f17;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 19px;
    box-shadow: 0 10px 30px rgba(50, 100, 30, 0.06), inset 0 1px 0 rgba(255,255,255,0.95);
    animation: serviceEyebrowFloat 4s ease-in-out infinite;
}


    .services-eyebrow span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #4e970e;
        box-shadow: 0 0 0 5px rgba(78,151,14,0.10), 0 0 18px rgba(78,151,14,0.55);
        animation: serviceDotPulse 2s ease-in-out infinite;
    }


@keyframes serviceEyebrowFloat {

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

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


@keyframes serviceDotPulse {

    0%, 100% {
        box-shadow: 0 0 0 5px rgba(78,151,14,0.10), 0 0 16px rgba(78,151,14,0.45);
    }

    50% {
        box-shadow: 0 0 0 9px rgba(78,151,14,0.035), 0 0 26px rgba(78,151,14,0.75);
    }
}


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

.services-preview-heading h2 {
    margin: 0;
    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.04;
    letter-spacing: -2.5px;
    font-weight: 800;
    color: #20251f;
    text-shadow: 0 2px 12px rgba(255,255,255,0.45);
}


    .services-preview-heading h2 span {
        display: block;
        background: linear-gradient( 90deg, #41870d, #70b932, #41870d );
        background-size: 200% auto;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: servicesGreenText 5s linear infinite;
    }


@keyframes servicesGreenText {

    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}


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

.services-preview-heading p {
    max-width: 690px;
    margin: 20px auto 0;
    color: #626c62;
    font-size: 17px;
    line-height: 1.7;
    font-weight: 500;
    text-shadow: 0 1px 7px rgba(255,255,255,0.65);
}


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

.services-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    perspective: 1600px;
    position: relative;
    z-index: 2;
}


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

.service-preview-card {
    position: relative;
    min-height: 255px;
    padding: 25px 24px 23px;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(82, 139, 42, 0.20);
    /*
       Slight transparency so background image
       can be seen softly through cards.
    */
    background: linear-gradient( 145deg, rgba(255,255,255,0.91), rgba(244,250,240,0.78) );
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 16px 35px rgba(42, 82, 27, 0.09), 0 3px 8px rgba(42, 82, 27, 0.04), inset 0 1px 0 rgba(255,255,255,0.95);
    transform-style: preserve-3d;
    transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease, border-color .5s ease, background .5s ease;
    animation: serviceCardAppear .8s both;
}


    /* =========================================================
   STAGGERED ENTRANCE
   ========================================================= */

    .service-preview-card:nth-child(1) {
        animation-delay: .05s;
    }

    .service-preview-card:nth-child(2) {
        animation-delay: .12s;
    }

    .service-preview-card:nth-child(3) {
        animation-delay: .19s;
    }

    .service-preview-card:nth-child(4) {
        animation-delay: .26s;
    }

    .service-preview-card:nth-child(5) {
        animation-delay: .33s;
    }

    .service-preview-card:nth-child(6) {
        animation-delay: .40s;
    }

    .service-preview-card:nth-child(7) {
        animation-delay: .47s;
    }

    .service-preview-card:nth-child(8) {
        animation-delay: .54s;
    }


@keyframes serviceCardAppear {

    from {
        opacity: 0;
        transform: translateY(35px) rotateX(8deg) scale(.97);
    }

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


/* =========================================================
   CARD HOVER — 3D
   ========================================================= */

.service-preview-card:hover {
    transform: translateY(-10px) rotateX(3deg) rotateY(-3deg) scale(1.018);
    border-color: rgba(79, 153, 19, 0.38);
    background: linear-gradient( 145deg, rgba(255,255,255,0.96), rgba(245,251,241,0.88) );
    box-shadow: 0 30px 55px rgba(42, 89, 24, 0.17), 0 8px 20px rgba(66, 132, 26, 0.10), inset 0 1px 0 rgba(255,255,255,1);
}


/* =========================================================
   CARD LIGHT EFFECT
   ========================================================= */

.service-preview-card::before {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    top: -100px;
    right: -100px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(119, 190, 63, 0.24), transparent 70% );
    transition: transform .7s ease, opacity .7s ease;
    opacity: .55;
    pointer-events: none;
}


.service-preview-card:hover::before {
    transform: scale(2.3);
    opacity: 1;
}


/* =========================================================
   ANIMATED LIGHT SHINE
   ========================================================= */

.service-preview-card {
    isolation: isolate;
}


    .service-preview-card .service-card-content,
    .service-preview-card .service-card-icon,
    .service-preview-card .service-card-number,
    .service-preview-card .service-card-arrow {
        position: relative;
        z-index: 3;
    }


    /* =========================================================
   BOTTOM GREEN LINE
   ========================================================= */

    .service-preview-card::after {
        content: "";
        position: absolute;
        left: 24px;
        bottom: 0;
        width: 52px;
        height: 4px;
        border-radius: 10px 10px 0 0;
        background: linear-gradient( 90deg, #438c0e, #83c74a );
        transition: width .45s ease, box-shadow .45s ease;
    }


    .service-preview-card:hover::after {
        width: 115px;
        box-shadow: 0 0 18px rgba(76, 156, 19, 0.42);
    }


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

.service-card-number {
    position: absolute !important;
    top: 20px;
    right: 21px;
    width: 39px;
    height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #4c8f18;
    background: linear-gradient( 145deg, rgba(237,247,232,.92), rgba(255,255,255,.90) );
    border: 1px solid rgba(80, 147, 31, 0.16);
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 7px 16px rgba(58, 112, 24, 0.08);
    transform: translateZ(25px);
    transition: transform .45s ease, background .45s ease, color .45s ease, box-shadow .45s ease;
}


.service-preview-card:hover .service-card-number {
    transform: translateZ(50px) rotate(-6deg) scale(1.05);
    color: #ffffff;
    background: linear-gradient( 145deg, #448e0e, #68b42d );
    box-shadow: 0 12px 25px rgba(62, 137, 14, 0.28);
}


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

.service-card-icon {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    border-radius: 16px;
    background: linear-gradient( 145deg, #4c970f, #6bb72e );
    box-shadow: 0 13px 24px rgba(67, 143, 13, 0.22), inset 0 1px 0 rgba(255,255,255,0.28);
    transform: translateZ(30px);
    transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
}


    .service-card-icon::after {
        content: "";
        position: absolute;
        width: 55px;
        height: 120px;
        left: -70px;
        top: -35px;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.45), transparent );
        transform: rotate(25deg);
        transition: left .7s ease;
    }


.service-preview-card:hover .service-card-icon::after {
    left: 80px;
}


.service-card-icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .45s ease;
}


.service-preview-card:hover .service-card-icon {
    transform: translateZ(60px) rotate(-5deg) scale(1.09);
    box-shadow: 0 18px 35px rgba(63, 142, 11, 0.34), 0 0 24px rgba(98, 182, 42, 0.18);
}


    .service-preview-card:hover .service-card-icon svg {
        transform: rotate(8deg) scale(1.08);
    }


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

.service-card-content {
    position: relative;
    z-index: 2;
    transform: translateZ(20px);
    transition: transform .45s ease;
}


.service-preview-card:hover .service-card-content {
    transform: translateZ(35px);
}


.service-card-content h3 {
    margin: 0 0 10px;
    color: #20251f;
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -0.4px;
    font-weight: 800;
    transition: color .35s ease, transform .35s ease;
}


.service-preview-card:hover
.service-card-content h3 {
    color: #438a10;
    transform: translateX(2px);
}


.service-card-content p {
    margin: 0;
    max-width: 280px;
    color: #697269;
    font-size: 13.5px;
    line-height: 1.65;
    font-weight: 500;
}


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

.service-card-arrow {
    position: absolute !important;
    right: 23px;
    bottom: 20px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #4c9215;
    background: rgba(78, 151, 14, 0.08);
    border: 1px solid rgba(78, 151, 14, 0.12);
    font-size: 17px;
    font-weight: 700;
    transform: translateZ(25px);
    transition: transform .4s ease, background .4s ease, color .4s ease, box-shadow .4s ease;
}


.service-preview-card:hover .service-card-arrow {
    transform: translateZ(55px) translate(4px, -4px) rotate(5deg);
    color: #ffffff;
    background: #4b9611;
    box-shadow: 0 10px 22px rgba(67, 143, 13, 0.25);
}


/* =========================================================
   FLOATING CARD MOTION
   ========================================================= */

.service-preview-card:nth-child(1),
.service-preview-card:nth-child(5) {
    animation: serviceCardAppear .8s both, serviceSoftFloat 6s ease-in-out 1.2s infinite;
}


.service-preview-card:nth-child(2),
.service-preview-card:nth-child(6) {
    animation: serviceCardAppear .8s both, serviceSoftFloat 6.5s ease-in-out 1.5s infinite reverse;
}


.service-preview-card:nth-child(3),
.service-preview-card:nth-child(7) {
    animation: serviceCardAppear .8s both, serviceSoftFloat 7s ease-in-out 1.8s infinite;
}


.service-preview-card:nth-child(4),
.service-preview-card:nth-child(8) {
    animation: serviceCardAppear .8s both, serviceSoftFloat 6.8s ease-in-out 2s infinite reverse;
}


@keyframes serviceSoftFloat {

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

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


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

.services-preview-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 40px;
    position: relative;
    z-index: 3;
}


/* =========================================================
   TRUST LINE
   ========================================================= */

.services-trust-line {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #707a70;
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: 800;
}


    .services-trust-line b {
        color: #579e1d;
    }


.trust-line {
    width: 60px;
    height: 1px;
    display: inline-block;
    background: linear-gradient( 90deg, transparent, #5aa41c );
}


/* =========================================================
   VIEW ALL BUTTON
   ========================================================= */

.services-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding: 12px 13px 12px 20px;
    border-radius: 13px;
    text-decoration: none;
    color: #ffffff;
    background: linear-gradient( 135deg, #3f850b, #5ca91c );
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 13px 28px rgba(58, 127, 12, 0.22);
    transition: transform .35s ease, box-shadow .35s ease;
}


    .services-view-btn strong {
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: rgba(255,255,255,0.14);
        font-size: 17px;
        transition: transform .35s ease;
    }


    .services-view-btn:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 40px rgba(58, 127, 12, 0.32);
    }


        .services-view-btn:hover strong {
            transform: translate(3px, -3px);
        }


/* =========================================================
   DECORATIVE FLOATING LIGHT — LEFT
   ========================================================= */

.services-preview-section::before {
    content: "";
    position: absolute;
    width: 13px;
    height: 13px;
    top: 95px;
    left: 7%;
    border-radius: 50%;
    background: radial-gradient( circle at 30% 25%, #b7ec7f, #4e9a12 50%, #276505 );
    box-shadow: 0 0 18px rgba(74, 151, 17, 0.35);
    animation: servicesParticleOne 5s ease-in-out infinite;
    z-index: 4;
}


/* =========================================================
   DECORATIVE FLOATING LIGHT — RIGHT
   ========================================================= */

.services-preview-section::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    right: 8%;
    top: 165px;
    border-radius: 50%;
    background: radial-gradient( circle at 30% 25%, #c4ef94, #5ba31e 50%, #2d6e08 );
    box-shadow: 0 0 22px rgba(75, 154, 18, 0.32);
    animation: servicesParticleTwo 6s ease-in-out infinite reverse;
    z-index: 4;
}


@keyframes servicesParticleOne {

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

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


@keyframes servicesParticleTwo {

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

    50% {
        transform: translate3d(-25px,18px,0) scale(1.25);
    }
}


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

@media (max-width: 1150px) {

    .services-preview-section {
        padding: 70px 5% 55px;
        background-position: center center;
    }


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


    .service-preview-card {
        min-height: 235px;
    }


    .services-preview-heading {
        margin-bottom: 38px;
    }
}


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

@media (max-width: 850px) {

    .services-preview-section {
        padding: 65px 6% 50px;
        background-position: center center;
    }


    .services-preview-heading {
        max-width: 700px;
    }


        .services-preview-heading h2 {
            font-size: clamp(42px, 8vw, 58px);
            letter-spacing: -2px;
        }


        .services-preview-heading p {
            font-size: 16px;
        }


    .service-preview-card {
        min-height: 245px;
    }


    .services-preview-bottom {
        margin-top: 32px;
    }
}


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

@media (max-width: 600px) {

    .services-preview-section {
        padding: 55px 20px 45px;
        /*
           Keep the woman/calling image visible
           but move it slightly left on mobile.
        */
        background-position: 35% center;
    }


    .services-preview-heading {
        margin-bottom: 30px;
    }


    .services-eyebrow {
        font-size: 10px;
        padding: 8px 14px;
        letter-spacing: 1.6px;
    }


    .services-preview-heading h2 {
        font-size: 39px;
        line-height: 1.06;
        letter-spacing: -1.5px;
    }


    .services-preview-heading p {
        margin-top: 16px;
        font-size: 15px;
        line-height: 1.65;
    }


    /* ONE CARD PER ROW */

    .services-preview-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        perspective: none;
    }


    .service-preview-card {
        min-height: 215px;
        padding: 22px 21px 22px;
        border-radius: 19px;
        background: linear-gradient( 145deg, rgba(255,255,255,0.91), rgba(244,250,240,0.82) );
        backdrop-filter: blur(9px);
        -webkit-backdrop-filter: blur(9px);
        animation: serviceCardAppear .7s both;
    }


        .service-preview-card:hover {
            transform: translateY(-6px) scale(1.01);
        }


    .service-card-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 18px;
        border-radius: 14px;
        transform: none;
    }


    .service-preview-card:hover
    .service-card-icon {
        transform: translateY(-3px) scale(1.05);
    }


    .service-card-content h3 {
        font-size: 19px;
        margin-bottom: 8px;
    }


    .service-card-content p {
        max-width: 90%;
        font-size: 13px;
        line-height: 1.6;
    }


    .service-card-number {
        top: 17px;
        right: 17px;
        width: 35px;
        height: 35px;
        border-radius: 10px;
        font-size: 11px;
    }


    .service-card-arrow {
        right: 18px;
        bottom: 17px;
        width: 31px;
        height: 31px;
        font-size: 15px;
    }


    .services-preview-bottom {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 22px;
        margin-top: 30px;
    }


    .services-trust-line {
        font-size: 9px;
        gap: 8px;
        letter-spacing: 1.5px;
    }


    .trust-line {
        width: 35px;
    }


    .services-view-btn {
        padding: 11px 12px 11px 18px;
        font-size: 13px;
    }


    /* smaller background particles */

    .services-preview-section::before {
        width: 10px;
        height: 10px;
        left: 8%;
        top: 80px;
    }


    .services-preview-section::after {
        width: 13px;
        height: 13px;
        right: 8%;
        top: 130px;
    }
}


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

@media (max-width: 400px) {

    .services-preview-section {
        padding: 50px 16px 42px;
        background-position: 34% center;
    }


    .services-preview-heading h2 {
        font-size: 34px;
        letter-spacing: -1.3px;
    }


    .services-preview-heading p {
        font-size: 14px;
    }


    .service-preview-card {
        min-height: 205px;
        padding: 20px 18px 20px;
    }


    .service-card-content h3 {
        font-size: 18px;
    }


    .service-card-content p {
        font-size: 12.5px;
    }


    .services-trust-line {
        font-size: 8px;
        letter-spacing: 1.2px;
    }
}


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

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

    .services-bg-grid,
    .services-bg-glow,
    .services-eyebrow,
    .services-eyebrow span,
    .services-preview-heading h2 span,
    .service-preview-card,
    .services-preview-section::before,
    .services-preview-section::after {
        animation: none !important;
    }


    .service-preview-card,
    .service-card-icon,
    .service-card-number,
    .service-card-arrow,
    .services-view-btn {
        transition: none !important;
    }
}






/* =========================================================
   WHY CHOOSE CHRONICAL
   PREMIUM DARK / 3D / GLASS / ANIMATED
   ========================================================= */

.why-choose-section {
    position: relative;
    width: 100%;
    padding: 26px 5.5% 26px;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient( circle at 15% 20%, rgba(69, 145, 19, 0.12), transparent 30% ), radial-gradient( circle at 85% 75%, rgba(65, 129, 18, 0.10), transparent 30% ), linear-gradient( 135deg, #071007 0%, #0b130b 45%, #060b06 100% );
    color: #ffffff;
}


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

.why-bg-grid {
    position: absolute;
    inset: 0;
    z-index: -10;
    pointer-events: none;
    background-image: linear-gradient( rgba(117, 185, 62, 0.055) 1px, transparent 1px ), linear-gradient( 90deg, rgba(117, 185, 62, 0.055) 1px, transparent 1px );
    background-size: 65px 65px;
    mask-image: radial-gradient( ellipse at center, black 0%, rgba(0,0,0,.8) 45%, transparent 90% );
    animation: whyGridMove 22s linear infinite;
}


@keyframes whyGridMove {

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

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

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


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

.why-bg-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(100px);
    z-index: -8;
}


.why-glow-one {
    width: 430px;
    height: 430px;
    top: -200px;
    left: -150px;
    background: rgba(74, 153, 17, 0.15);
    animation: whyGlowOne 9s ease-in-out infinite alternate;
}


.why-glow-two {
    width: 500px;
    height: 500px;
    right: -220px;
    bottom: -230px;
    background: rgba(54, 127, 12, 0.13);
    animation: whyGlowTwo 11s ease-in-out infinite alternate;
}


@keyframes whyGlowOne {

    from {
        transform: translate3d(0,0,0) scale(1);
    }

    to {
        transform: translate3d(80px,60px,0) scale(1.18);
    }
}


@keyframes whyGlowTwo {

    from {
        transform: translate3d(0,0,0) scale(1);
    }

    to {
        transform: translate3d(-70px,-55px,0) scale(1.15);
    }
}


/* =========================================================
   FLOATING ORBS
   ========================================================= */

.why-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient( circle at 30% 25%, #c9f59b, #55a51b 42%, #1c4b08 75%, transparent 76% );
    box-shadow: 0 0 30px rgba(81, 166, 19, 0.45);
    z-index: -4;
}


.why-orb-one {
    width: 15px;
    height: 15px;
    top: 18%;
    left: 7%;
    animation: whyOrbOne 6s ease-in-out infinite;
}


.why-orb-two {
    width: 22px;
    height: 22px;
    top: 28%;
    right: 8%;
    animation: whyOrbTwo 7s ease-in-out infinite reverse;
}


.why-orb-three {
    width: 10px;
    height: 10px;
    bottom: 17%;
    left: 45%;
    animation: whyOrbThree 5s ease-in-out infinite;
}


@keyframes whyOrbOne {

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

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


@keyframes whyOrbTwo {

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

    50% {
        transform: translate3d(-35px,25px,0) scale(1.3);
    }
}


@keyframes whyOrbThree {

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

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


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

.why-choose-container {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    position: relative;
}


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

.why-choose-header {
    max-width: 850px;
    margin: 0 auto 65px;
    text-align: center;
    position: relative;
    z-index: 3;
}


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

.why-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    border-radius: 50px;
    border: 1px solid rgba(103, 174, 48, 0.25);
    background: rgba(89, 153, 37, 0.08);
    backdrop-filter: blur(14px);
    color: #77bd3d;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.2px;
    box-shadow: 0 12px 35px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.07);
    animation: whyEyebrowFloat 4s ease-in-out infinite;
}


    .why-eyebrow span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #65b62a;
        box-shadow: 0 0 0 5px rgba(92,170,32,.10), 0 0 20px rgba(99,181,37,.65);
        animation: whyDotPulse 2s ease-in-out infinite;
    }


@keyframes whyEyebrowFloat {

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

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


@keyframes whyDotPulse {

    0%,100% {
        box-shadow: 0 0 0 5px rgba(92,170,32,.10), 0 0 16px rgba(99,181,37,.45);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(92,170,32,.035), 0 0 28px rgba(99,181,37,.75);
    }
}


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

.why-choose-header h2 {
    margin: 22px 0 0;
    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.04;
    letter-spacing: -2.5px;
    font-weight: 800;
    color: #f4f8f2;
}


    .why-choose-header h2 span {
        display: block;
        background: linear-gradient( 90deg, #52a619, #9be261, #52a619 );
        background-size: 200% auto;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: whyGreenText 5s linear infinite;
    }


@keyframes whyGreenText {

    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}


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

.why-choose-header p {
    max-width: 730px;
    margin: 21px auto 0;
    color: #9aa79a;
    font-size: 17px;
    line-height: 1.7;
}


/* =========================================================
   FEATURE LAYOUT
   ========================================================= */

.why-feature-layout {
    display: grid;
    grid-template-columns: minmax(360px, .92fr) minmax(0, 1.6fr);
    gap: 24px;
    align-items: stretch;
    perspective: 1800px;
}


/* =========================================================
   MAIN FEATURE PANEL
   ========================================================= */

.why-main-feature {
    position: relative;
    min-height: 650px;
    padding: 28px;
    overflow: hidden;
    border-radius: 30px;
    border: 1px solid rgba(105, 177, 50, .22);
    background: linear-gradient( 145deg, rgba(21, 34, 19, .92), rgba(7, 15, 8, .97) );
    box-shadow: 0 35px 80px rgba(0,0,0,.38), 0 8px 25px rgba(38,100,15,.10), inset 0 1px 0 rgba(255,255,255,.07);
    transform-style: preserve-3d;
    transition: transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .55s ease, border-color .55s ease;
    animation: whyFeatureAppear .9s both;
}


    .why-main-feature:hover {
        transform: translateY(-7px) rotateX(1deg) rotateY(-1deg);
        border-color: rgba(112, 193, 49, .42);
        box-shadow: 0 45px 100px rgba(0,0,0,.48), 0 0 50px rgba(72,143,21,.10), inset 0 1px 0 rgba(255,255,255,.09);
    }


@keyframes whyFeatureAppear {

    from {
        opacity: 0;
        transform: translateY(40px) rotateX(8deg);
    }

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


/* =========================================================
   FEATURE INTERNAL GLOW
   ========================================================= */

.why-feature-glow {
    position: absolute;
    width: 330px;
    height: 330px;
    top: -150px;
    right: -130px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(90, 177, 30, .20), transparent 70% );
    filter: blur(20px);
    pointer-events: none;
    animation: whyFeatureGlow 7s ease-in-out infinite alternate;
}


@keyframes whyFeatureGlow {

    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.35) translate(-30px,30px);
    }
}


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

.why-feature-visual {
    position: relative;
    width: 100%;
    height: 270px;
    margin-bottom: 25px;
    perspective: 1000px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* IMAGE */

.why-image-card {
    position: relative;
    width: 82%;
    height: 235px;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(143, 210, 92, .28);
    transform: rotateY(-8deg) rotateX(3deg) translateZ(30px);
    box-shadow: 25px 30px 55px rgba(0,0,0,.42), 0 0 45px rgba(68,140,20,.12);
    transition: transform .7s cubic-bezier(.2,.8,.2,1), box-shadow .7s ease;
    z-index: 3;
    animation: whyImageFloat 6s ease-in-out infinite;
}


.why-main-feature:hover .why-image-card {
    transform: rotateY(0deg) rotateX(0deg) translateZ(55px) scale(1.025);
    box-shadow: 30px 40px 70px rgba(0,0,0,.50), 0 0 60px rgba(77,157,23,.18);
}


.why-image-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: saturate(.82) brightness(.72) contrast(1.05);
    transform: scale(1.05);
    transition: transform .8s ease, filter .8s ease;
}


.why-main-feature:hover
.why-image-card img {
    transform: scale(1.11);
    filter: saturate(.95) brightness(.82) contrast(1.06);
}


/* IMAGE DARK OVERLAY */

.why-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 135deg, rgba(5,13,5,.15), transparent 45%, rgba(47,115,12,.22) );
    pointer-events: none;
}


/* IMAGE FLOAT */

@keyframes whyImageFloat {

    0%,100% {
        transform: rotateY(-8deg) rotateX(3deg) translateY(0) translateZ(30px);
    }

    50% {
        transform: rotateY(-5deg) rotateX(2deg) translateY(-7px) translateZ(35px);
    }
}


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

.why-image-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(98, 180, 42, .18);
    pointer-events: none;
    z-index: 1;
}


.ring-one {
    width: 290px;
    height: 290px;
    animation: whyRingRotate 16s linear infinite;
}


.ring-two {
    width: 330px;
    height: 330px;
    border-style: dashed;
    opacity: .45;
    animation: whyRingRotate 22s linear infinite reverse;
}


@keyframes whyRingRotate {

    from {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.04);
    }

    to {
        transform: rotate(360deg) scale(1);
    }
}


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

.why-image-badge {
    position: absolute;
    left: 18px;
    bottom: 17px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 50px;
    background: rgba(5, 12, 5, .76);
    border: 1px solid rgba(126, 195, 75, .22);
    backdrop-filter: blur(12px);
    color: #c5dbba;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}


    .why-image-badge span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #68b72d;
        box-shadow: 0 0 12px #68b72d;
    }


/* =========================================================
   FLOATING CHIPS
   ========================================================= */

.why-floating-chip {
    position: absolute;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 13px;
    border-radius: 12px;
    background: rgba(14, 25, 12, .88);
    border: 1px solid rgba(105, 180, 49, .20);
    box-shadow: 0 15px 30px rgba(0,0,0,.35);
    backdrop-filter: blur(12px);
    transform: translateZ(70px);
    animation: whyChipFloat 5s ease-in-out infinite;
}


    .why-floating-chip strong {
        color: #74c13c;
        font-size: 12px;
    }


    .why-floating-chip span {
        color: white;
        font-size: 10px;
        font-weight: 700;
    }


.chip-one {
    top: 20px;
    right: 3px;
}


.chip-two {
    bottom: 15px;
    right: 0;
    animation-delay: -2.2s;
}


@keyframes whyChipFloat {

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

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


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

.why-feature-top {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 24px;
}


.why-feature-icon {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient( 145deg, #438d12, #66b52d );
    box-shadow: 0 15px 30px rgba(64,144,14,.25), inset 0 1px 0 rgba(255,255,255,.22);
    transform: translateZ(35px);
    transition: transform .45s ease;
}


.why-main-feature:hover .why-feature-icon {
    transform: translateZ(55px) rotate(-5deg) scale(1.06);
}


.why-feature-icon svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.why-feature-label {
    color: #70b43a;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}


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

.why-feature-content {
    position: relative;
    z-index: 3;
}


    .why-feature-content h3 {
        margin: 0 0 15px;
        max-width: 470px;
        color: #f0f5ed;
        font-size: 31px;
        line-height: 1.15;
        letter-spacing: -1px;
        font-weight: 800;
    }


        .why-feature-content h3 strong {
            color: #67b52d;
            font-weight: 800;
        }


    .why-feature-content p {
        max-width: 510px;
        margin: 0;
        color: #929f91;
        font-size: 14px;
        line-height: 1.75;
    }


/* =========================================================
   FEATURE STATS
   ========================================================= */

.why-feature-stats {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid rgba(120,170,100,.12);
}


    .why-feature-stats div {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }


    .why-feature-stats strong {
        color: #65b42c;
        font-size: 18px;
    }


    .why-feature-stats span {
        color: white;
        font-size: 9px;
        line-height: 1.4;
        letter-spacing: .6px;
    }


/* =========================================================
   FEATURE BOTTOM LINE
   ========================================================= */

.why-feature-line {
    position: absolute;
    left: 28px;
    bottom: 0;
    width: 80px;
    height: 4px;
    border-radius: 10px 10px 0 0;
    background: linear-gradient( 90deg, #438d10, #8bd052 );
    box-shadow: 0 0 22px rgba(81,164,22,.35);
}


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

.why-cards-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px;
    perspective: 1500px;
}


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

.why-card {
    position: relative;
    min-height: 310px;
    padding: 27px 25px 25px;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(113, 166, 83, .15);
    background: linear-gradient( 145deg, rgba(22,35,20,.82), rgba(10,18,10,.92) );
    box-shadow: 0 22px 45px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.045);
    transform-style: preserve-3d;
    transition: transform .5s cubic-bezier(.2,.8,.2,1), border-color .5s ease, box-shadow .5s ease, background .5s ease;
    animation: whyCardAppear .8s both;
}


    .why-card:nth-child(1) {
        animation-delay: .08s;
    }


    .why-card:nth-child(2) {
        animation-delay: .15s;
    }


    .why-card:nth-child(3) {
        animation-delay: .22s;
    }


    .why-card:nth-child(4) {
        animation-delay: .29s;
    }


    .why-card:nth-child(5) {
        animation-delay: .36s;
    }


    .why-card:nth-child(6) {
        animation-delay: .43s;
    }


@keyframes whyCardAppear {

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

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


.why-card:hover {
    transform: translateY(-9px) rotateX(2deg) rotateY(-2deg) scale(1.015);
    border-color: rgba(91, 174, 32, .34);
    box-shadow: 0 35px 65px rgba(0,0,0,.40), 0 0 35px rgba(61,133,18,.08), inset 0 1px 0 rgba(255,255,255,.08);
}


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

.why-card-highlight {
    background: linear-gradient( 145deg, rgba(35,60,26,.88), rgba(11,22,10,.95) );
    border-color: rgba(93, 169, 37, .25);
}


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

.why-card::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -100px;
    top: -100px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(91,175,37,.17), transparent 70% );
    opacity: .55;
    transition: transform .7s ease, opacity .7s ease;
    pointer-events: none;
}


.why-card:hover::before {
    transform: scale(2.2);
    opacity: 1;
}


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

.why-card-number {
    position: absolute;
    top: 21px;
    right: 21px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #6cad3c;
    background: rgba(84,145,44,.08);
    border: 1px solid rgba(91,158,49,.16);
    font-size: 11px;
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    transform: translateZ(30px);
    transition: all .45s ease;
}


.why-card:hover .why-card-number {
    color: #ffffff;
    background: linear-gradient( 145deg, #438d0f, #67b72d );
    transform: translateZ(50px) rotate(-5deg);
    box-shadow: 0 12px 25px rgba(66,145,15,.25);
}


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

.why-card-icon {
    width: 57px;
    height: 57px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    border-radius: 17px;
    background: linear-gradient( 145deg, #3e850d, #65ae2a );
    box-shadow: 0 15px 30px rgba(57,132,14,.20), inset 0 1px 0 rgba(255,255,255,.22);
    transform: translateZ(35px);
    transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease;
}


    .why-card-icon svg {
        width: 27px;
        height: 27px;
        fill: none;
        stroke: #ffffff;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


.why-card:hover .why-card-icon {
    transform: translateZ(60px) rotate(-5deg) scale(1.08);
    box-shadow: 0 20px 40px rgba(61,143,11,.30), 0 0 25px rgba(85,166,28,.12);
}


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

.why-card-content {
    position: relative;
    z-index: 2;
    transform: translateZ(20px);
}


    .why-card-content h3 {
        margin: 0 0 12px;
        max-width: 280px;
        color: #eaf0e8;
        font-size: 20px;
        line-height: 1.25;
        letter-spacing: -.5px;
        font-weight: 800;
        transition: color .35s ease, transform .35s ease;
    }


.why-card:hover
.why-card-content h3 {
    color: #75c23a;
    transform: translateX(2px);
}


.why-card-content p {
    max-width: 310px;
    margin: 0;
    color: #818d80;
    font-size: 13.5px;
    line-height: 1.7;
    font-weight: 500;
}


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

.why-card-arrow {
    position: absolute;
    right: 23px;
    bottom: 21px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #68b52d;
    background: rgba(81,150,35,.08);
    border: 1px solid rgba(88,157,40,.14);
    font-size: 17px;
    font-weight: 700;
    transform: translateZ(30px);
    transition: all .4s ease;
}


.why-card:hover .why-card-arrow {
    color: #ffffff;
    background: #4b9515;
    transform: translateZ(55px) translate(3px,-3px) rotate(5deg);
    box-shadow: 0 12px 25px rgba(65,140,14,.25);
}


/* =========================================================
   CARD BOTTOM LINE
   ========================================================= */

.why-card::after {
    content: "";
    position: absolute;
    left: 25px;
    bottom: 0;
    width: 45px;
    height: 3px;
    border-radius: 10px 10px 0 0;
    background: linear-gradient( 90deg, #438d0f, #77c744 );
    transition: width .45s ease, box-shadow .45s ease;
}


.why-card:hover::after {
    width: 105px;
    box-shadow: 0 0 20px rgba(81,164,21,.40);
}


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

.why-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 42px;
    position: relative;
    z-index: 4;
}


.why-bottom-line {
    display: flex;
    align-items: center;
    gap: 13px;
}


    .why-bottom-line span {
        width: 55px;
        height: 1px;
        background: linear-gradient( 90deg, transparent, #65ad35 );
    }


    .why-bottom-line p {
        margin: 0;
        color: white;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1.8px;
    }


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

.why-learn-btn {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding: 12px 13px 12px 20px;
    border-radius: 13px;
    text-decoration: none;
    color: #ffffff;
    background: linear-gradient( 135deg, #3e850c, #60ad23 );
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 15px 30px rgba(48,121,11,.25);
    transition: transform .35s ease, box-shadow .35s ease;
}


    .why-learn-btn strong {
        width: 31px;
        height: 31px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: rgba(255,255,255,.13);
        font-size: 17px;
        transition: transform .35s ease;
    }


    .why-learn-btn:hover {
        transform: translateY(-4px);
        box-shadow: 0 22px 45px rgba(51,132,11,.34);
    }


        .why-learn-btn:hover strong {
            transform: translate(3px,-3px);
        }


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

@media (max-width: 1150px) {

    .why-choose-section {
        padding: 85px 5%;
    }

    .why-feature-layout {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .why-main-feature {
        min-height: auto;
        padding: 30px;
    }

    .why-feature-visual {
        height: 320px;
    }

    .why-image-card {
        width: 75%;
        height: 280px;
    }

    .why-cards-grid {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }

    .why-card {
        min-height: 285px;
    }
}


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

@media (max-width: 850px) {

    .why-choose-section {
        padding: 70px 6%;
    }

    .why-choose-header {
        margin-bottom: 45px;
    }

        .why-choose-header h2 {
            font-size: clamp(40px, 8vw, 56px);
            letter-spacing: -2px;
        }

        .why-choose-header p {
            font-size: 15px;
        }

    .why-cards-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .why-feature-visual {
        height: 280px;
    }

    .why-image-card {
        width: 82%;
        height: 245px;
    }

    .why-feature-content h3 {
        font-size: 28px;
    }
}


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

@media (max-width: 600px) {

    .why-choose-section {
        padding: 62px 20px 55px;
    }

    .why-choose-header {
        margin-bottom: 35px;
    }

    .why-eyebrow {
        padding: 8px 14px;
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .why-choose-header h2 {
        margin-top: 18px;
        font-size: 38px;
        line-height: 1.06;
        letter-spacing: -1.5px;
    }

    .why-choose-header p {
        margin-top: 16px;
        font-size: 14px;
        line-height: 1.65;
    }


    /* MAIN FEATURE */

    .why-main-feature {
        padding: 21px;
        border-radius: 22px;
    }

    .why-feature-visual {
        height: 230px;
        margin-bottom: 20px;
    }

    .why-image-card {
        width: 88%;
        height: 205px;
        border-radius: 19px;
        transform: rotateY(-4deg) rotateX(2deg) translateZ(20px);
    }

        .why-image-card img {
            filter: saturate(.8) brightness(.68);
        }

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

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

    .why-floating-chip {
        padding: 7px 9px;
        gap: 6px;
    }

        .why-floating-chip strong {
            font-size: 10px;
        }

        .why-floating-chip span {
            font-size: 8px;
        }

    .chip-one {
        top: 8px;
        right: 0;
    }

    .chip-two {
        bottom: 5px;
        right: 0;
    }

    .why-image-badge {
        left: 11px;
        bottom: 10px;
        padding: 6px 9px;
        font-size: 7px;
        letter-spacing: 1px;
    }


    /* FEATURE */

    .why-feature-top {
        margin-bottom: 19px;
    }

    .why-feature-icon {
        width: 49px;
        height: 49px;
        border-radius: 14px;
    }

        .why-feature-icon svg {
            width: 24px;
            height: 24px;
        }

    .why-feature-label {
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .why-feature-content h3 {
        font-size: 25px;
        letter-spacing: -.7px;
    }

    .why-feature-content p {
        font-size: 13px;
        line-height: 1.65;
    }

    .why-feature-stats {
        margin-top: 25px;
        padding-top: 20px;
    }

        .why-feature-stats strong {
            font-size: 15px;
        }

        .why-feature-stats span {
            font-size: 8px;
        }


    /* CARDS */

    .why-cards-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .why-card {
        min-height: 235px;
        padding: 21px;
        border-radius: 19px;
    }

    .why-card-icon {
        width: 49px;
        height: 49px;
        margin-bottom: 20px;
        border-radius: 14px;
    }

        .why-card-icon svg {
            width: 24px;
            height: 24px;
        }

    .why-card-content h3 {
        font-size: 19px;
        margin-bottom: 8px;
    }

    .why-card-content p {
        max-width: 90%;
        font-size: 12.5px;
        line-height: 1.6;
    }

    .why-card-number {
        top: 16px;
        right: 16px;
        width: 35px;
        height: 35px;
        border-radius: 10px;
        font-size: 10px;
    }

    .why-card-arrow {
        right: 17px;
        bottom: 17px;
        width: 31px;
        height: 31px;
        font-size: 15px;
    }


    /* CTA */

    .why-bottom {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 22px;
        margin-top: 30px;
        text-align: center;
    }

    .why-bottom-line {
        justify-content: center;
    }

        .why-bottom-line p {
            font-size: 8px;
            letter-spacing: 1.3px;
        }

        .why-bottom-line span {
            width: 30px;
        }

    .why-learn-btn {
        padding: 11px 12px 11px 17px;
        font-size: 12px;
    }
}


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

@media (max-width: 400px) {

    .why-choose-section {
        padding: 52px 16px 48px;
    }

    .why-choose-header h2 {
        font-size: 33px;
        letter-spacing: -1.2px;
    }

    .why-choose-header p {
        font-size: 13px;
    }

    .why-feature-visual {
        height: 205px;
    }

    .why-image-card {
        width: 91%;
        height: 180px;
    }

    .why-feature-content h3 {
        font-size: 23px;
    }

    .why-feature-content p {
        font-size: 12px;
    }

    .why-feature-stats span {
        font-size: 7px;
    }

    .why-card {
        min-height: 220px;
    }

    .why-card-content h3 {
        font-size: 18px;
    }

    .why-card-content p {
        font-size: 12px;
    }
}


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

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

    .why-bg-grid,
    .why-bg-glow,
    .why-orb,
    .why-eyebrow,
    .why-eyebrow span,
    .why-choose-header h2 span,
    .why-main-feature,
    .why-card,
    .why-image-card,
    .why-image-ring,
    .why-floating-chip,
    .why-feature-glow {
        animation: none !important;
    }

    .why-main-feature,
    .why-card,
    .why-image-card,
    .why-card-icon,
    .why-card-number,
    .why-card-arrow,
    .why-feature-icon,
    .why-learn-btn {
        transition: none !important;
    }
}











/* =========================================================
   KEY STATISTICS
   ========================================================= */

.statistics-section {
    position: relative;
    width: 100%;
    min-height: 500px;
    padding: 20px 6% 25px;
    overflow: hidden;
    background: #f7faf5;
    color: #20251f;
    isolation: isolate;
}


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

.statistics-bg {
    position: absolute;
    inset: 0;
    background-image: url('../image/background/bakk.png');
    background-size: cover;
    background-position: center;
    opacity: 0.7;
    transform: scale(1.04);
    animation: statisticsBgMove 14s ease-in-out infinite alternate;
    z-index: -4;
}


@keyframes statisticsBgMove {

    0% {
        transform: scale(1.04) translate3d(0, 0, 0);
    }

    100% {
        transform: scale(1.09) translate3d(-10px, -6px, 0);
    }
}


/* =========================================================
   SOFT IMAGE OVERLAY
   ========================================================= */

.statistics-overlay {
    position: absolute;
    inset: 0;
     z-index: -3;
}


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

.statistics-grid {
    position: absolute;
    inset: 0;
     background-size: 55px 55px;
    mask-image: linear-gradient( to bottom, transparent, black 25%, black 75%, transparent );
    z-index: -2;
}


/* =========================================================
   GREEN LIGHT GLOW
   ========================================================= */

.statistics-section::before {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    right: -180px;
    top: -190px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(88,169,26,0.16), rgba(88,169,26,0.04) 45%, transparent 70% );
    filter: blur(10px);
    pointer-events: none;
    z-index: -1;
    animation: statisticsGlow 8s ease-in-out infinite alternate;
}


@keyframes statisticsGlow {

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

    100% {
        transform: translate3d(-45px, 35px, 0);
    }
}


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

.statistics-container {
    position: relative;
    width: 100%;
    max-width: 1450px;
    margin: auto;
}


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

.statistics-heading {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 42px;
}


/* LABEL */

.statistics-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 17px;
    border: 1px solid rgba(76,146,14,0.18);
    border-radius: 50px;
    background: rgba(255,255,255,0.68);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 25px rgba(37,80,19,0.06), inset 0 1px 0 rgba(255,255,255,0.8);
    color: #3e7815;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 16px;
}


.statistics-label-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4f9a12;
    box-shadow: 0 0 0 5px rgba(79,154,18,0.10), 0 0 18px rgba(79,154,18,0.55);
    animation: statisticsDotPulse 2s infinite;
}


@keyframes statisticsDotPulse {

    0%, 100% {
        box-shadow: 0 0 0 5px rgba(79,154,18,0.10), 0 0 15px rgba(79,154,18,0.45);
    }

    50% {
        box-shadow: 0 0 0 9px rgba(79,154,18,0.025), 0 0 28px rgba(79,154,18,0.75);
    }
}


/* HEADING */

.statistics-heading h2 {
    margin: 0;
    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.05;
    letter-spacing: -2.5px;
    font-weight: 800;
    color: #20251f;
}


    .statistics-heading h2 span {
        display: inline-block;
        color: #4f9713;
        background: linear-gradient( 90deg, #43870c, #79bd42, #43870c );
        background-size: 200% auto;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: statisticsTextMove 5s linear infinite;
    }


@keyframes statisticsTextMove {

    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}


/* DESCRIPTION */

.statistics-heading p {
    margin: 15px auto 0;
    max-width: 610px;
    color: black;
    font-size: 16px;
    line-height: 1.65;
}


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

.statistics-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    perspective: 1400px;
}


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

.stat-card {
    position: relative;
    min-height: 245px;
    padding: 26px 25px 22px;
    border-radius: 22px;
    border: 1px solid rgba(69,122,32,0.13);
    background: linear-gradient( 145deg, rgba(255,255,255,0.94), rgba(247,251,245,0.77) );
    backdrop-filter: blur(16px);
    box-shadow: 0 18px 45px rgba(35,73,22,0.08), inset 0 1px 0 rgba(255,255,255,0.9);
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform 0.45s cubic-bezier(.2,.8,.2,1), box-shadow 0.45s ease, border-color 0.45s ease;
    animation: statCardAppear .8s ease both;
}


    .stat-card:nth-child(1) {
        animation-delay: .10s;
    }


    .stat-card:nth-child(2) {
        animation-delay: .20s;
    }


    .stat-card:nth-child(3) {
        animation-delay: .30s;
    }


    .stat-card:nth-child(4) {
        animation-delay: .40s;
    }


@keyframes statCardAppear {

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

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


/* CARD HOVER */

.stat-card:hover {
    transform: translateY(-10px) rotateX(4deg) rotateY(-3deg) scale(1.015);
    border-color: rgba(77,151,18,0.28);
    box-shadow: 0 30px 65px rgba(36,78,19,0.14), 0 0 35px rgba(83,155,24,0.07), inset 0 1px 0 rgba(255,255,255,1);
}


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

.stat-card-glow {
    position: absolute;
    width: 180px;
    height: 180px;
    top: -100px;
    right: -70px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(91,168,29,0.15), transparent 68% );
    pointer-events: none;
    transition: transform .5s ease, opacity .5s ease;
}


.stat-card:hover .stat-card-glow {
    transform: scale(1.45);
    opacity: 1.4;
}


/* =========================================================
   CARD NUMBER ICON
   ========================================================= */

.stat-icon {
    position: relative;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 19px;
    border-radius: 12px;
    background: linear-gradient( 145deg, #4a920e, #68ad28 );
    color: white;
    box-shadow: 0 9px 22px rgba(64,132,13,0.22);
    transform: translateZ(25px);
    transition: transform .4s ease;
}


.stat-card:hover .stat-icon {
    transform: translateZ(35px) rotate(-5deg) scale(1.06);
}


.stat-icon::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,0.22);
}


.stat-icon span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}


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

.stat-number-wrap {
    position: relative;
    display: flex;
    align-items: baseline;
    min-height: 62px;
    transform: translateZ(30px);
}


.stat-number {
    display: inline-block;
    color: #2e5f0d;
    font-size: clamp(45px, 4vw, 62px);
    letter-spacing: -2px;
    font-weight: 800;
    text-shadow: 0 7px 20px rgba(56,119,12,0.10);
}


    .stat-number::after {
        content: attr(data-suffix);
        font-size: .48em;
        margin-left: 3px;
        vertical-align: top;
        color: #579a20;
    }


.stat-text-number span {
    color: #579a20;
    font-size: .62em;
    margin: 0 2px;
}


/* HIGH */

.stat-high {
    font-size: clamp(43px, 4vw, 58px);
    background: linear-gradient( 90deg, #397707, #71b53d, #397707 );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: highRecoveryShine 4s linear infinite;
}


@keyframes highRecoveryShine {

    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}


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

.stat-card h3 {
    position: relative;
    margin: 10px 0 8px;
    color: #252b24;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 800;
    transform: translateZ(20px);
}


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

.stat-card p {
    position: relative;
    margin: 0;
    max-width: 270px;
    color: #737b70;
    font-size: 12px;
    line-height: 1.55;
    transform: translateZ(15px);
}


/* =========================================================
   CARD BOTTOM LINE
   ========================================================= */

.stat-line {
    position: absolute;
    left: 25px;
    bottom: 0;
    width: 70px;
    height: 3px;
    border-radius: 10px 10px 0 0;
    background: linear-gradient( 90deg, #4d970f, #8bc95c );
    transition: width .4s ease;
}


.stat-card:hover .stat-line {
    width: 130px;
}


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

.stat-particle {
    position: absolute;
    display: block;
    border-radius: 50%;
    background: radial-gradient( circle at 30% 25%, #c6ef9c, #5fa51e 45%, #357109 );
    box-shadow: 0 0 20px rgba(75,151,15,0.24);
    pointer-events: none;
    z-index: -1;
    animation: statParticleFloat 5s ease-in-out infinite;
}


.particle-one {
    width: 13px;
    height: 13px;
    left: 7%;
    top: 24%;
}


.particle-two {
    width: 8px;
    height: 8px;
    left: 27%;
    bottom: 14%;
    animation-delay: 1s;
}


.particle-three {
    width: 17px;
    height: 17px;
    right: 9%;
    top: 22%;
    animation-delay: 2s;
}


.particle-four {
    width: 7px;
    height: 7px;
    right: 29%;
    bottom: 13%;
    animation-delay: 3s;
}


@keyframes statParticleFloat {

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

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


/* =========================================================
   BOTTOM TRUST LINE
   ========================================================= */

.statistics-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    margin-top: 38px;
    color: #75806f;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
}


    .statistics-bottom b {
        color: #4f9614;
        font-size: 13px;
    }


.bottom-line {
    width: 65px;
    height: 1px;
    background: linear-gradient( 90deg, transparent, #6cae3b );
}


    .bottom-line:last-child {
        background: linear-gradient( 90deg, #6cae3b, transparent );
    }


/* =========================================================
   RESPONSIVE — 1100px
   ========================================================= */

@media (max-width: 1100px) {

    .statistics-section {
        padding: 65px 5% 55px;
    }

    .statistics-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .stat-card {
        min-height: 225px;
    }
}


/* =========================================================
   RESPONSIVE — 700px
   ========================================================= */

@media (max-width: 700px) {

    .statistics-section {
        padding: 60px 6% 50px;
    }

    .statistics-heading {
        margin-bottom: 30px;
    }

        .statistics-heading h2 {
            font-size: clamp(40px, 9vw, 55px);
            letter-spacing: -1.8px;
        }

        .statistics-heading p {
            font-size: 14px;
        }

    .statistics-cards {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .stat-card {
        min-height: auto;
        padding: 23px 22px 22px;
    }

    .stat-number {
        font-size: 52px;
    }

    .stat-card p {
        max-width: 100%;
    }

    .statistics-bottom {
        margin-top: 28px;
        gap: 8px;
        font-size: 8px;
        letter-spacing: 1.4px;
    }

    .bottom-line {
        width: 35px;
    }
}


/* =========================================================
   RESPONSIVE — 450px
   ========================================================= */

@media (max-width: 450px) {

    .statistics-section {
        padding: 52px 18px 42px;
    }

    .statistics-label {
        font-size: 10px;
        padding: 7px 14px;
        letter-spacing: 1.6px;
    }

    .statistics-heading h2 {
        font-size: 37px;
        letter-spacing: -1.4px;
    }

    .statistics-heading p {
        font-size: 13px;
        line-height: 1.6;
    }

    .stat-card {
        border-radius: 18px;
    }

    .stat-number {
        font-size: 48px;
    }

    .stat-high {
        font-size: 46px;
    }

    .stat-card h3 {
        font-size: 16px;
    }

    .stat-card p {
        font-size: 12px;
    }

    .statistics-bottom b {
        font-size: 10px;
    }
}


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

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

    .statistics-bg,
    .statistics-section::before,
    .statistics-label-dot,
    .statistics-heading h2 span,
    .stat-high,
    .stat-particle,
    .stat-card {
        animation: none !important;
    }

    .stat-card {
        transition: none !important;
    }
}







/* =========================================================
   OUR APPROACH
========================================================= */

.approach-section {
    position: relative;
    overflow: hidden;
    padding: 28px 0 24px;
    background: radial-gradient(circle at 15% 50%, rgba(72, 180, 38, 0.09), transparent 30%), radial-gradient(circle at 85% 30%, rgba(30, 130, 70, 0.08), transparent 30%), #071009;
    isolation: isolate;
}


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

.approach-grid {
    position: absolute;
    inset: 0;
    z-index: -4;
    opacity: .32;
    background-image: linear-gradient(rgba(133, 205, 94, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(133, 205, 94, .055) 1px, transparent 1px);
    background-size: 70px 70px;
    transform: perspective(700px) rotateX(58deg) scale(1.5);
    transform-origin: center bottom;
    animation: approachGridMove 16s linear infinite;
}

@keyframes approachGridMove {

    0% {
        background-position: 0 0, 0 0;
    }

    100% {
        background-position: 0 70px, 70px 0;
    }
}


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

.approach-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    z-index: -3;
}

.approach-glow-1 {
    width: 280px;
    height: 280px;
    left: -120px;
    top: 35%;
    background: rgba(65, 180, 35, .13);
    animation: glowFloat1 8s ease-in-out infinite;
}

.approach-glow-2 {
    width: 350px;
    height: 350px;
    right: -160px;
    top: 5%;
    background: rgba(22, 115, 60, .12);
    animation: glowFloat2 10s ease-in-out infinite;
}

.approach-glow-3 {
    width: 220px;
    height: 220px;
    left: 47%;
    bottom: -130px;
    background: rgba(105, 190, 45, .09);
    animation: glowFloat3 9s ease-in-out infinite;
}

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

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

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

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

@keyframes glowFloat3 {
    0%,100% {
        transform: scale(1);
    }

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


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

.approach-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: -2;
    background: radial-gradient( circle at 30% 25%, #b5ff77, #3b9d1d 45%, #10270f 75% );
    box-shadow: 0 0 18px rgba(100, 220, 60, .35), inset -5px -6px 10px rgba(0,0,0,.45);
    animation: particleFloat 7s ease-in-out infinite;
}

.particle-1 {
    width: 11px;
    height: 11px;
    left: 8%;
    top: 28%;
}

.particle-2 {
    width: 7px;
    height: 7px;
    left: 78%;
    top: 22%;
    animation-delay: -2s;
}

.particle-3 {
    width: 14px;
    height: 14px;
    left: 88%;
    bottom: 18%;
    animation-delay: -4s;
}

.particle-4 {
    width: 6px;
    height: 6px;
    left: 35%;
    bottom: 12%;
    animation-delay: -1s;
}

@keyframes particleFloat {

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

    50% {
        transform: translate3d(20px,-28px,25px);
    }
}


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

.approach-container {
    width: min(1240px, calc(100% - 40px));
    margin: auto;
    position: relative;
}


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

.approach-header {
    max-width: 760px;
    margin: 0 auto 52px;
    text-align: center;
}

.approach-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.5px;
    color: #86d950;
}

    .approach-eyebrow span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #79d43f;
        box-shadow: 0 0 0 5px rgba(121,212,63,.08), 0 0 15px rgba(121,212,63,.6);
        animation: eyebrowPulse 2s ease-in-out infinite;
    }

@keyframes eyebrowPulse {

    0%,100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.4);
    }
}

.approach-header h2 {
    margin: 0;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -1.3px;
    color: #f3f7f2;
}

    .approach-header h2 span {
        display: block;
        color: #72c93d;
        text-shadow: 0 0 30px rgba(105,205,55,.14);
    }

.approach-header p {
    max-width: 680px;
    margin: 17px auto 0;
    font-size: 15px;
    line-height: 1.75;
    color: rgba(223,231,220,.68);
}


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

.approach-process-wrap {
    position: relative;
    padding: 0 0 10px;
}


/* =========================================================
   MAIN PROCESS LINE
========================================================= */

.approach-process-line {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 44px;
    height: 2px;
    background: rgba(120, 190, 88, .15);
    overflow: hidden;
}

.process-progress {
    width: 0;
    height: 100%;
    background: linear-gradient( 90deg, transparent, #71c83e, #b0ed77, #71c83e, transparent );
    box-shadow: 0 0 14px rgba(111,205,58,.65);
    transition: width 1.2s ease;
}


/* =========================================================
   STEPS
========================================================= */

.approach-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    perspective: 1200px;
}

.approach-step {
    position: relative;
    min-width: 0;
    text-align: center;
    transform-style: preserve-3d;
    opacity: 0;
    transform: translateY(35px) rotateX(12deg);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}

    .approach-step.visible {
        opacity: 1;
        transform: translateY(0) rotateX(0);
    }

    .approach-step:nth-child(2) {
        transition-delay: .08s;
    }

    .approach-step:nth-child(3) {
        transition-delay: .16s;
    }

    .approach-step:nth-child(4) {
        transition-delay: .24s;
    }

    .approach-step:nth-child(5) {
        transition-delay: .32s;
    }


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

.step-number {
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    color: rgba(134,217,80,.52);
}


/* =========================================================
   NODE
========================================================= */

.step-node {
    position: relative;
    width: 88px;
    height: 88px;
    margin: 0 auto 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient( circle at 35% 25%, rgba(153,236,95,.16), rgba(11,25,14,.9) 60% );
    border: 1px solid rgba(112,203,62,.34);
    box-shadow: 0 18px 35px rgba(0,0,0,.38), inset 0 0 20px rgba(86,174,45,.07);
    transform-style: preserve-3d;
    transition: transform .45s ease, border-color .45s ease, box-shadow .45s ease;
}

    .step-node::before {
        content: "";
        position: absolute;
        inset: -7px;
        border-radius: inherit;
        border: 1px solid rgba(115,207,63,.13);
        transform: translateZ(-8px);
        transition: .45s ease;
    }

    .step-node::after {
        content: "";
        position: absolute;
        inset: 8px;
        border-radius: inherit;
        border: 1px dashed rgba(129,216,75,.16);
        animation: nodeRotate 14s linear infinite;
    }

@keyframes nodeRotate {
    to {
        transform: rotate(360deg);
    }
}

.node-inner {
    position: relative;
    z-index: 2;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient( 145deg, rgba(103,197,51,.18), rgba(7,17,9,.95) );
    border: 1px solid rgba(123,214,71,.26);
    box-shadow: inset 4px 4px 10px rgba(255,255,255,.025), inset -5px -5px 10px rgba(0,0,0,.4);
}

    .node-inner svg {
        width: 25px;
        height: 25px;
        fill: none;
        stroke: #8be151;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        filter: drop-shadow(0 0 7px rgba(117,211,61,.45));
    }


/* =========================================================
   ACTIVE NODE
========================================================= */

.approach-step.active .step-node {
    border-color: rgba(130,224,73,.75);
    box-shadow: 0 0 0 8px rgba(102,192,48,.035), 0 20px 45px rgba(0,0,0,.45), 0 0 30px rgba(96,199,48,.18);
}

.approach-step.active .node-inner {
    background: radial-gradient( circle, rgba(100,195,45,.27), rgba(7,18,9,.95) );
}


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

.step-content {
    padding: 0 5px;
}

.step-label {
    display: block;
    margin-bottom: 7px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #71c83d;
}

.step-content h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.18;
    font-weight: 750;
    color: #f0f5ee;
}

.step-content p {
    margin: 10px auto 0;
    max-width: 205px;
    font-size: 12px;
    line-height: 1.65;
    color: rgba(210,222,207,.58);
}


/* =========================================================
   HOVER 3D
========================================================= */

.approach-step:hover .step-node {
    transform: translateY(-8px) rotateX(10deg) rotateY(-8deg) scale(1.06);
    border-color: rgba(137,225,81,.8);
    box-shadow: 0 25px 50px rgba(0,0,0,.5), 0 0 35px rgba(98,201,48,.2);
}

.approach-step:hover .node-inner {
    transform: translateZ(12px);
}


/* =========================================================
   BOTTOM MINI PROCESS
========================================================= */

.approach-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 46px;
    padding: 14px 20px;
    border: 1px solid rgba(111,185,77,.15);
    border-radius: 18px;
    background: linear-gradient( 120deg, rgba(21,38,24,.72), rgba(9,20,12,.58) );
    box-shadow: 0 18px 45px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.025);
    backdrop-filter: blur(14px);
}

.approach-bottom-item {
    display: flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}

    .approach-bottom-item strong {
        font-size: 10px;
        color: #75cc42;
    }

    .approach-bottom-item span {
        font-size: 11px;
        font-weight: 700;
        color: #e3e9df;
    }

    .approach-bottom-item small {
        display: block;
        margin-top: 2px;
        font-size: 9px;
        font-weight: 500;
        color: rgba(208,220,204,.48);
    }

.approach-bottom-arrow {
    font-size: 17px;
    color: rgba(117,204,66,.45);
}


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

.approach-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 30px;
}

.footer-line {
    width: 55px;
    height: 1px;
    background: linear-gradient( 90deg, transparent, rgba(116,203,62,.45) );
}

    .footer-line:last-child {
        background: linear-gradient( 90deg, rgba(116,203,62,.45), transparent );
    }

.approach-footer p {
    margin: 0;
    font-size: 11px;
    letter-spacing: .7px;
    color: rgba(216,227,212,.5);
}

.approach-footer strong {
    color: #79d047;
    font-weight: 700;
}


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

@media (max-width: 1000px) {

    .approach-section {
        padding: 65px 0 48px;
    }

    .approach-container {
        width: min(92%, 760px);
    }

    .approach-steps {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 45px;
    }

    .approach-process-line {
        display: none;
    }

    .approach-step:nth-child(4) {
        grid-column: 1;
    }

    .approach-bottom {
        flex-wrap: wrap;
    }
}


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

@media (max-width: 650px) {

    .approach-section {
        padding: 55px 0 40px;
    }

    .approach-container {
        width: calc(100% - 28px);
    }

    .approach-header {
        margin-bottom: 38px;
    }

        .approach-header h2 {
            font-size: 30px;
            letter-spacing: -.7px;
        }

        .approach-header p {
            font-size: 13px;
            line-height: 1.7;
        }

    .approach-steps {
        display: block;
    }

    .approach-step {
        display: grid;
        grid-template-columns: 58px 1fr;
        grid-template-rows: auto auto;
        text-align: left;
        padding-bottom: 27px;
        margin-bottom: 20px;
        border-bottom: 1px solid rgba(110,175,80,.09);
    }

        .approach-step:last-child {
            border-bottom: 0;
            margin-bottom: 0;
        }

    .step-number {
        grid-column: 1;
        grid-row: 1;
        margin: 4px 0 0;
        text-align: center;
    }

    .step-node {
        grid-column: 1;
        grid-row: 2;
        width: 54px;
        height: 54px;
        margin: 6px auto 0;
    }

    .node-inner {
        width: 39px;
        height: 39px;
    }

        .node-inner svg {
            width: 19px;
            height: 19px;
        }

    .step-node::after {
        inset: 5px;
    }

    .step-content {
        grid-column: 2;
        grid-row: 1 / span 2;
        padding: 4px 0 0 5px;
    }

        .step-content h3 {
            font-size: 17px;
        }

        .step-content p {
            max-width: none;
            margin-top: 7px;
            font-size: 12px;
            line-height: 1.6;
        }

    .approach-bottom {
        display: none;
    }

    .approach-footer {
        margin-top: 25px;
    }

    .footer-line {
        width: 30px;
    }

    .approach-footer p {
        font-size: 10px;
        text-align: center;
    }
}


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

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

    .approach-grid,
    .approach-glow,
    .approach-particle,
    .step-node::after,
    .approach-eyebrow span {
        animation: none !important;
    }

    .approach-step {
        opacity: 1;
        transform: none;
    }
}




.partners-section {
    position: relative;
    width: 100%;
    padding: 26px 0 46px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 45%,rgba(80,180,55,.08),transparent 32%),linear-gradient(180deg,#071009 0%,#08120b 48%,#050a07 100%);
    color: #f4f7f3;
    isolation: isolate
}

.partners-bg-grid {
    position: absolute;
    inset: 0;
    z-index: -5;
    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: 72px 72px;
    mask-image: linear-gradient(to bottom,transparent,black 15%,black 85%,transparent);
    animation: partnersGridMove 20s linear infinite
}

@keyframes partnersGridMove {
    from {
        transform: translate3d(0,0,0)
    }

    to {
        transform: translate3d(72px,72px,0)
    }
}

.partners-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: -4;
    filter: blur(10px)
}

.partners-glow-1 {
    width: 420px;
    height: 420px;
    left: -180px;
    top: 80px;
    background: radial-gradient(circle,rgba(85,190,35,.13),transparent 68%);
    animation: partnerGlowFloat 8s ease-in-out infinite
}

.partners-glow-2 {
    width: 500px;
    height: 500px;
    right: -220px;
    top: 180px;
    background: radial-gradient(circle,rgba(20,130,90,.12),transparent 68%);
    animation: partnerGlowFloat 10s ease-in-out infinite reverse
}

.partners-glow-3 {
    width: 350px;
    height: 350px;
    left: 45%;
    bottom: -220px;
    background: radial-gradient(circle,rgba(110,220,60,.08),transparent 70%);
    animation: partnerGlowFloat 12s ease-in-out infinite
}

@keyframes partnerGlowFloat {
    0%,100% {
        transform: translate3d(0,0,0) scale(1)
    }

    50% {
        transform: translate3d(0,-28px,0) scale(1.08)
    }
}

.partners-network {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -3;
    perspective: 800px
}

.network-node {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #79d63e;
    box-shadow: 0 0 10px rgba(120,215,60,.8),0 0 28px rgba(120,215,60,.35);
    animation: networkPulse 3s ease-in-out infinite
}

.node-1 {
    left: 9%;
    top: 30%
}

.node-2 {
    left: 27%;
    top: 17%;
    animation-delay: .7s
}

.node-3 {
    right: 24%;
    top: 26%;
    animation-delay: 1.2s
}

.node-4 {
    right: 9%;
    top: 56%;
    animation-delay: 1.8s
}

.node-5 {
    left: 43%;
    bottom: 13%;
    animation-delay: 2.3s
}

@keyframes networkPulse {
    0%,100% {
        transform: scale(.8);
        opacity: .35
    }

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

.network-line {
    position: absolute;
    height: 1px;
    transform-origin: left center;
    background: linear-gradient(90deg,transparent,rgba(105,210,65,.22),transparent);
    opacity: .45
}

.line-1 {
    width: 360px;
    left: 9%;
    top: 30%;
    transform: rotate(-18deg)
}

.line-2 {
    width: 420px;
    left: 27%;
    top: 17%;
    transform: rotate(12deg)
}

.line-3 {
    width: 340px;
    right: 9%;
    top: 56%;
    transform: rotate(-25deg)
}

.line-4 {
    width: 300px;
    left: 43%;
    bottom: 13%;
    transform: rotate(20deg)
}

.partners-container {
    position: relative;
    width: min(1260px,calc(100% - 50px));
    margin: auto
}

.partners-header {
    max-width: 760px;
    margin: 0 auto 48px;
    text-align: center
}

.partners-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 15px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #7ed342
}

    .partners-eyebrow span {
        width: 28px;
        height: 1px;
        background: linear-gradient(90deg,transparent,#72cf3d)
    }

        .partners-eyebrow span:last-child {
            background: linear-gradient(90deg,#72cf3d,transparent)
        }

.partners-header h2 {
    margin: 0;
    font-size: clamp(34px,4vw,58px);
    line-height: 1.05;
    font-weight: 750;
    letter-spacing: -1.8px
}

    .partners-header h2 span {
        display: block;
        margin-top: 5px;
        background: linear-gradient(90deg,#fff 0%,#8bdd4a 48%,#d8ffd0 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent
    }

.partners-header p {
    max-width: 680px;
    margin: 18px auto 0;
    font-size: 15px;
    line-height: 1.75;
    color: rgba(230,238,230,.68)
}

.partners-stage {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px;
    perspective: 1400px
}

.partner-connection {
    position: absolute;
    left: 5%;
    right: 5%;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg,transparent,rgba(117,211,60,.35),rgba(117,211,60,.75),rgba(117,211,60,.35),transparent);
    z-index: 0;
    animation: connectionPulse 3s ease-in-out infinite
}

@keyframes connectionPulse {
    0%,100% {
        opacity: .25;
        transform: scaleX(.85)
    }

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

.partner-card {
    --accent: #79d33e;
    position: relative;
    min-height: 345px;
    padding: 22px;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(145deg,rgba(30,48,34,.94),rgba(8,16,11,.97));
    border: 1px solid rgba(255,255,255,.075);
    box-shadow: 0 25px 65px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.05);
    transform-style: preserve-3d;
    transition: transform .18s ease,border-color .35s ease,box-shadow .35s ease;
    z-index: 2;
    will-change: transform
}

.partner-card-green {
    --accent: #78d63e
}

.partner-card-blue {
    --accent: #55c6ba
}

.partner-card-purple {
    --accent: #91c8ff
}

.partner-card-glow {
    position: absolute;
    width: 220px;
    height: 220px;
    right: -100px;
    top: -100px;
    border-radius: 50%;
    background: radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%);
    filter: blur(8px);
    transition: .5s ease
}

.partner-card:hover .partner-card-glow {
    transform: scale(1.45)
}

.partner-card::after {
    content: "";
    position: absolute;
    width: 70%;
    height: 180%;
    left: -100%;
    top: -40%;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent);
    transform: rotate(18deg);
    transition: left .8s ease;
    pointer-events: none
}

.partner-card:hover::after {
    left: 130%
}

.partner-card-top {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    z-index: 2
}

.partner-logo-wrap {
    display: flex;
    align-items: center;
    gap: 12px
}

.partner-logo {
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 10px 30px rgba(0,0,0,.28),0 0 20px rgba(120,215,60,.08);
    transform: translateZ(35px);
    flex-shrink: 0;
    transition: transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease
}

    .partner-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 7px;
        display: block;
        transition: transform .45s cubic-bezier(.2,.8,.2,1)
    }

.partner-card:hover .partner-logo {
    transform: translateZ(45px) rotateY(-5deg) rotateX(3deg);
    box-shadow: 0 15px 35px rgba(0,0,0,.35),0 0 28px color-mix(in srgb,var(--accent) 14%,transparent)
}

    .partner-card:hover .partner-logo img {
        transform: scale(1.06)
    }

.partner-status {
    padding: 6px 8px;
    border-radius: 20px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.07);
    color: #fff;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1.2px
}

.partner-arrow {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.65);
    font-size: 17px;
    transition: .35s ease
}

.partner-card:hover .partner-arrow {
    color: var(--accent);
    border-color: color-mix(in srgb,var(--accent) 45%,transparent);
    transform: translate(3px,-3px) rotate(8deg)
}

.partner-card-content {
    position: relative;
    margin-top: 26px;
    z-index: 2;
    transform: translateZ(25px)
}

.partner-category {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.6px;
    color: var(--accent)
}

.partner-card-content h3 {
    margin: 0;
    font-size: 24px;
    line-height: 1.1;
    font-weight: 750
}

.partner-card-content p {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(235,240,235,.58)
}

.partner-features {
    position: relative;
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    z-index: 2;
    transform: translateZ(18px)
}

    .partner-features > div {
        display: flex;
        align-items: center;
        gap: 8px
    }

    .partner-features span {
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: color-mix(in srgb,var(--accent) 14%,transparent);
        color: var(--accent);
        font-size: 10px;
        font-weight: 800
    }

    .partner-features p {
        margin: 0;
        font-size: 10px;
        line-height: 1.3;
        color: rgba(240,245,240,.66)
    }

.partner-card-footer {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 11px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 3
}

    .partner-card-footer > span {
        font-size: 7px;
        font-weight: 800;
        letter-spacing: 1.5px;
        color: #fff
    }

.partner-progress {
    flex: 1;
    height: 2px;
    overflow: hidden;
    background: rgba(255,255,255,.06);
    border-radius: 5px
}

    .partner-progress i {
        display: block;
        width: 65%;
        height: 100%;
        background: linear-gradient(90deg,transparent,var(--accent));
        animation: progressMove 3s ease-in-out infinite
    }

@keyframes progressMove {
    0% {
        transform: translateX(-100%)
    }

    50% {
        transform: translateX(20%)
    }

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

.partner-card:hover {
    border-color: color-mix(in srgb,var(--accent) 32%,transparent);
    box-shadow: 0 35px 80px rgba(0,0,0,.42),0 0 35px color-mix(in srgb,var(--accent) 8%,transparent),inset 0 1px 0 rgba(255,255,255,.08)
}

.partners-trust-strip {
    margin-top: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 15px 20px;
    border-radius: 14px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.055);
    backdrop-filter: blur(15px)
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 650;
    color: rgba(240,245,240,.65)
}

.trust-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #82d849;
    background: rgba(110,205,55,.1);
    font-size: 10px
}

.trust-divider {
    width: 1px;
    height: 20px;
    background: rgba(255,255,255,.08)
}

.partners-bottom {
    margin-top: 28px;
    display: flex;
    align-items: center;
    gap: 18px
}

.partners-bottom-line {
    flex: 1;
    height: 1px;
    overflow: hidden;
    background: linear-gradient(90deg,transparent,rgba(120,210,65,.28))
}

    .partners-bottom-line:last-child {
        background: linear-gradient(90deg,rgba(120,210,65,.28),transparent)
    }

    .partners-bottom-line span {
        display: block;
        width: 35%;
        height: 100%;
        background: #7ad440;
        animation: bottomLineMove 4s ease-in-out infinite
    }

@keyframes bottomLineMove {
    0% {
        transform: translateX(-100%)
    }

    50% {
        transform: translateX(300%)
    }

    100% {
        transform: translateX(300%)
    }
}

.partners-bottom p {
    margin: 0;
    text-align: center;
    white-space: nowrap;
    font-size: 10px;
    letter-spacing: .6px;
    color: #fff
}

.partners-bottom b {
    margin: 0 8px;
    color: #78d43d
}

.partner-card {
    opacity: 0;
    transform: translateY(35px) rotateX(5deg)
}

    .partner-card.partner-visible {
        opacity: 1;
        transform: translateY(0) rotateX(0deg);
        transition: opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)
    }

    .partner-card:nth-child(2) {
        transition-delay: .12s
    }

    .partner-card:nth-child(3) {
        transition-delay: .24s
    }

    .partner-card:nth-child(4) {
        transition-delay: .36s
    }

@media(max-width:1100px) {
    .partners-section {
        padding: 65px 0 55px
    }

    .partners-container {
        width: min(94%,900px)
    }

    .partners-stage {
        grid-template-columns: repeat(2,1fr);
        gap: 18px
    }

    .partner-card:last-child {
        grid-column: auto;
        max-width: none;
        width: auto;
        margin: 0
    }

    .partner-connection {
        display: none
    }

    .partners-trust-strip {
        flex-wrap: wrap;
        gap: 14px 20px
    }
}

@media(max-width:650px) {
    .partners-section {
        padding: 60px 0 45px
    }

    .partners-container {
        width: calc(100% - 30px)
    }

    .partners-header {
        margin-bottom: 32px
    }

    .partners-eyebrow {
        font-size: 9px;
        letter-spacing: 2.2px
    }

    .partners-header h2 {
        font-size: 34px;
        letter-spacing: -1px
    }

    .partners-header p {
        font-size: 13px;
        line-height: 1.65
    }

    .partners-stage {
        grid-template-columns: 1fr;
        gap: 15px
    }

    .partner-card, .partner-card:last-child {
        grid-column: auto;
        max-width: none;
        min-height: 315px;
        padding: 21px;
        border-radius: 20px
    }

    .partner-card-content {
        margin-top: 23px
    }

        .partner-card-content h3 {
            font-size: 24px
        }

    .partner-features {
        margin-top: 20px
    }

    .partner-card-footer {
        left: 21px;
        right: 21px;
        bottom: 19px
    }

    .partner-logo {
        width: 68px;
        height: 68px;
        border-radius: 16px
    }

        .partner-logo img {
            padding: 6px
        }

    .partner-status {
        display: none
    }

    .partners-trust-strip {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        padding: 8px
    }

    .trust-item {
        justify-content: center;
        min-height: 42px;
        font-size: 9px
    }

    .trust-divider {
        display: none
    }

    .partners-bottom {
        gap: 8px
    }

    .partners-bottom-line {
        display: none
    }

    .partners-bottom p {
        white-space: normal;
        font-size: 9px;
        line-height: 1.7
    }

    .partners-bottom b {
        margin: 0 3px
    }

    .partners-network {
        opacity: .55
    }
}

@media(prefers-reduced-motion:reduce) {
    .partners-bg-grid, .partners-glow, .network-node, .partner-connection, .partner-progress i, .partners-bottom-line span {
        animation: none !important
    }

    .partner-card {
        transition: none !important
    }
}









/* =========================================================
   FINAL HOME CTA
========================================================= */

.final-cta {
    position: relative;
    width: 100%;
    min-height: 690px;
    padding: 0px 0 0;
    overflow: hidden;
    background: radial-gradient( circle at 50% 48%, rgba(120, 220, 100, .13), transparent 30% ), radial-gradient( circle at 8% 50%, rgba(130, 225, 120, .13), transparent 27% ), radial-gradient( circle at 92% 50%, rgba(90, 200, 100, .10), transparent 27% ), linear-gradient( 180deg, #ffffff 0%, #f8fcf8 48%, #eef8ef 100% );
    color: #11221b;
    isolation: isolate;
}


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

.cta-grid {
    position: absolute;
    inset: 0;
    z-index: -8;
    opacity: .45;
    background-image: linear-gradient( rgba(24, 100, 55, .045) 1px, transparent 1px ), linear-gradient( 90deg, rgba(24, 100, 55, .045) 1px, transparent 1px );
    background-size: 55px 55px;
    mask-image: linear-gradient( to bottom, transparent, black 18%, black 82%, transparent );
    animation: ctaGridMove 22s linear infinite;
}

@keyframes ctaGridMove {

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

    to {
        transform: translate3d(55px,55px,0);
    }
}


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

.cta-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(5px);
    z-index: -6;
}

.orb-one {
    width: 320px;
    height: 320px;
    left: -130px;
    top: 120px;
    background: radial-gradient( circle, rgba(87, 205, 90, .15), transparent 68% );
    animation: orbFloatOne 8s ease-in-out infinite;
}

.orb-two {
    width: 400px;
    height: 400px;
    right: -180px;
    top: 160px;
    background: radial-gradient( circle, rgba(55, 190, 95, .12), transparent 70% );
    animation: orbFloatTwo 10s ease-in-out infinite;
}

.orb-three {
    width: 240px;
    height: 240px;
    left: 48%;
    bottom: -130px;
    background: radial-gradient( circle, rgba(125, 225, 100, .14), transparent 70% );
    animation: orbFloatThree 7s ease-in-out infinite;
}

@keyframes orbFloatOne {

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

    50% {
        transform: translate3d(25px,-35px,0) scale(1.08);
    }
}

@keyframes orbFloatTwo {

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

    50% {
        transform: translate3d(-30px,30px,0) scale(1.1);
    }
}

@keyframes orbFloatThree {

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

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


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

.cta-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -2;
}

    .cta-particles span {
        position: absolute;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #5fc85d;
        box-shadow: 0 0 12px rgba(70,190,80,.55), 0 0 30px rgba(70,190,80,.20);
        animation: particleFloat 5s ease-in-out infinite;
    }

        .cta-particles span:nth-child(1) {
            left: 8%;
            top: 30%;
        }

        .cta-particles span:nth-child(2) {
            left: 22%;
            top: 17%;
            animation-delay: .8s;
        }

        .cta-particles span:nth-child(3) {
            left: 35%;
            top: 75%;
            animation-delay: 1.5s;
        }

        .cta-particles span:nth-child(4) {
            right: 24%;
            top: 25%;
            animation-delay: 1s;
        }

        .cta-particles span:nth-child(5) {
            right: 11%;
            top: 45%;
            animation-delay: 1.8s;
        }

        .cta-particles span:nth-child(6) {
            right: 30%;
            bottom: 13%;
            animation-delay: 2.2s;
        }

        .cta-particles span:nth-child(7) {
            left: 42%;
            top: 13%;
            animation-delay: 2.8s;
        }

        .cta-particles span:nth-child(8) {
            right: 5%;
            bottom: 22%;
            animation-delay: 3.2s;
        }

@keyframes particleFloat {

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

    50% {
        transform: translate3d(0,-22px,0) scale(1.5);
        opacity: 1;
    }
}


/* =========================================================
   GREEN WAVES
========================================================= */

.cta-wave {
    position: absolute;
    width: 70%;
    height: 100px;
    left: -5%;
    border-top: 2px solid rgba(73,190,83,.15);
    border-radius: 50%;
    transform: rotate(5deg);
    z-index: -5;
    pointer-events: none;
}

.wave-one {
    top: 70%;
}

.wave-two {
    top: 74%;
    left: 35%;
    opacity: .55;
    transform: rotate(-4deg);
}


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

.cta-container {
    position: relative;
    width: min(1500px, calc(100% - 50px));
    min-height: 490px;
    margin: auto;
    display: grid;
    grid-template-columns: minmax(220px, .8fr) minmax(500px, 1.8fr) minmax(220px, .8fr);
    align-items: center;
    gap: 20px;
}


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

.cta-content {
    position: relative;
    z-index: 10;
    text-align: center;
    transform-style: preserve-3d;
    animation: contentFloat 5s ease-in-out infinite;
}

@keyframes contentFloat {

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

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


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

.cta-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 20px;
    color: #344943;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

    .cta-eyebrow span {
        width: 42px;
        height: 2px;
        background: linear-gradient( 90deg, transparent, #48ae58 );
    }

        .cta-eyebrow span:last-child {
            background: linear-gradient( 90deg, #48ae58, transparent );
        }


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

.cta-content h2 {
    margin: 0;
    font-size: clamp( 42px, 4.5vw, 72px );
    line-height: .98;
    letter-spacing: -3px;
    font-weight: 850;
    color: #10201d;
    text-wrap: balance;
    text-shadow: 0 2px 0 rgba(255,255,255,.8);
}

    .cta-content h2 span {
        display: block;
        margin-top: 7px;
        background: linear-gradient( 90deg, #075d35, #2c9d3f, #08723c );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: #129c0ea3;
    }


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

.cta-description {
    max-width: 720px;
    margin: 22px auto 0;
    font-size: 18px;
    line-height: 1.55;
    font-weight: 500;
    color: #40514c;
}


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

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.cta-btn {
    position: relative;
    min-width: 225px;
    height: 68px;
    padding: 8px 9px 8px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 17px;
    font-weight: 750;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
}

    .cta-btn::before {
        content: "";
        position: absolute;
        width: 60%;
        height: 180%;
        left: -100%;
        top: -40%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.4), transparent );
        transform: rotate(18deg);
        transition: left .7s ease;
        pointer-events: none;
    }

    .cta-btn:hover::before {
        left: 130%;
    }

    .cta-btn:hover {
        transform: translateY(-5px) translateZ(15px);
    }


/* PRIMARY */

.cta-primary {
    color: white;
    background: linear-gradient( 135deg, #08783d, #0b9b48, #075f34 );
    box-shadow: 0 18px 35px rgba(20,150,65,.24), 0 0 35px rgba(75,205,90,.18);
}

    .cta-primary:hover {
        box-shadow: 0 25px 45px rgba(20,150,65,.32), 0 0 50px rgba(75,205,90,.25);
    }


/* SECONDARY */

.cta-secondary {
    color: #126238;
    background: rgba(255,255,255,.82);
    border: 2px solid #159048;
    box-shadow: 0 12px 30px rgba(20,100,50,.10);
}

    .cta-secondary:hover {
        background: #ffffff;
        box-shadow: 0 20px 38px rgba(20,120,55,.18);
    }


/* BUTTON ICON */

.cta-btn i {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-style: normal;
    font-size: 23px;
    transition: transform .35s ease;
}

.cta-primary i {
    background: rgba(255,255,255,.17);
}

.cta-secondary i {
    background: #0b803e;
    color: white;
}

.cta-btn:hover i {
    transform: translateX(4px) rotate(-8deg);
}


/* =========================================================
   BENEFITS
========================================================= */

.cta-benefits {
    margin-top: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

.cta-benefit {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 650;
    color: #40534c;
    white-space: nowrap;
}

.benefit-icon {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient( 145deg, #e6f8df, #c9edc3 );
    color: #147b3c;
    box-shadow: inset 0 1px 0 white, 0 5px 15px rgba(50,150,70,.12);
    font-size: 15px;
    font-weight: 800;
}

.benefit-divider {
    width: 1px;
    height: 28px;
    background: rgba(30,100,55,.18);
}


/* =========================================================
   LEFT VISUAL
========================================================= */

.cta-visual {
    position: relative;
    height: 450px;
    transform-style: preserve-3d;
}

.cta-left-visual {
    perspective: 900px;
}


/* =========================================================
   PUZZLE
========================================================= */

.cta-puzzle {
    position: absolute;
    left: 50%;
    top: 54%;
    width: 260px;
    height: 230px;
    transform: translate(-50%,-50%) rotateX(8deg) rotateY(8deg);
    transform-style: preserve-3d;
    animation: puzzleFloat 6s ease-in-out infinite;
}

@keyframes puzzleFloat {

    0%,100% {
        transform: translate(-50%,-50%) rotateX(8deg) rotateY(8deg) translateY(0);
    }

    50% {
        transform: translate(-50%,-50%) rotateX(10deg) rotateY(-7deg) translateY(-12px);
    }
}

.puzzle-piece {
    position: absolute;
    width: 125px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: .5px;
    transform-style: preserve-3d;
    box-shadow: 0 18px 30px rgba(20,100,50,.16), inset 0 1px 0 rgba(255,255,255,.9);
    transition: transform .4s ease;
}

    .puzzle-piece span {
        transform: translateZ(25px);
    }

.puzzle-trust {
    left: 0;
    top: 0;
    color: #29473b;
    background: linear-gradient( 145deg, #ffffff, #e8f2e9 );
}

.puzzle-partner {
    right: 0;
    top: 0;
    color: white;
    background: linear-gradient( 145deg, #54bd5b, #16843e );
}

.puzzle-growth {
    left: 0;
    bottom: 0;
    color: white;
    background: linear-gradient( 145deg, #2ba94b, #08733a );
}

.puzzle-success {
    right: 0;
    bottom: 0;
    color: #29473b;
    background: linear-gradient( 145deg, #f9fff9, #dcebdc );
}

.puzzle-piece:hover {
    transform: translateZ(20px) scale(1.05);
}


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

.floating-info {
    position: absolute;
    width: 125px;
    min-height: 120px;
    padding: 17px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 18px;
    background: linear-gradient( 145deg, rgba(255,255,255,.82), rgba(238,250,239,.66) );
    border: 1px solid rgba(90,170,100,.22);
    backdrop-filter: blur(15px);
    box-shadow: 0 22px 40px rgba(40,120,60,.12), inset 0 1px 0 white;
    transform-style: preserve-3d;
    z-index: 4;
}

.info-one {
    top: 24px;
    left: 5px;
    animation: infoFloatOne 5s ease-in-out infinite;
}

.info-two {
    top: 180px;
    left: 65px;
    animation: infoFloatTwo 6s ease-in-out infinite;
}

@keyframes infoFloatOne {

    0%,100% {
        transform: translateY(0) rotateY(-8deg) rotateX(5deg);
    }

    50% {
        transform: translateY(-15px) rotateY(5deg) rotateX(8deg);
    }
}

@keyframes infoFloatTwo {

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

    50% {
        transform: translateY(-12px) rotateY(-5deg);
    }
}

.info-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient( circle at 30% 30%, #efffe9, #bfeab9 );
    color: #16833d;
    font-size: 21px;
    box-shadow: 0 8px 20px rgba(40,150,60,.16);
}

.floating-info strong {
    font-size: 11px;
    letter-spacing: .8px;
    color: #23443a;
}

.floating-info small {
    margin-top: 3px;
    font-size: 8px;
    letter-spacing: 1.3px;
    color: #668078;
}


/* =========================================================
   ORBITS
========================================================= */

.visual-orbit {
    position: absolute;
    border: 1px dashed rgba(53,175,75,.28);
    border-radius: 50%;
    pointer-events: none;
    animation: orbitRotate 18s linear infinite;
}

.orbit-left {
    width: 370px;
    height: 280px;
    left: -45px;
    top: 85px;
    transform: rotate(-15deg);
}

.orbit-right {
    width: 400px;
    height: 310px;
    right: -50px;
    top: 70px;
    transform: rotate(18deg);
}

@keyframes orbitRotate {

    from {
        transform: rotate(-15deg) rotateZ(0deg);
    }

    to {
        transform: rotate(-15deg) rotateZ(360deg);
    }
}

.orbit-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #4fb957;
    box-shadow: 0 0 15px rgba(70,190,80,.6);
}

.dot-a {
    top: -6px;
    left: 25%;
}

.dot-b {
    bottom: 15%;
    right: -6px;
}

.dot-c {
    top: 10%;
    right: -6px;
}

.dot-d {
    bottom: -6px;
    left: 25%;
}

.dot-e {
    top: 45%;
    left: -6px;
}


/* =========================================================
   RIGHT GLOBE
========================================================= */

.cta-right-visual {
    perspective: 1000px;
}

.cta-globe {
    position: absolute;
    width: 255px;
    height: 255px;
    right: 20px;
    top: 105px;
    border-radius: 50%;
    transform-style: preserve-3d;
    background: radial-gradient( circle at 32% 28%, rgba(255,255,255,.98), rgba(209,242,211,.86) 30%, rgba(91,190,103,.26) 65%, rgba(30,120,50,.12) );
    box-shadow: inset -30px -20px 50px rgba(40,130,60,.18), inset 20px 15px 35px rgba(255,255,255,.8), 0 30px 65px rgba(35,130,60,.15);
    animation: globeFloat 7s ease-in-out infinite;
}

@keyframes globeFloat {

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

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

.globe-core {
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    background: repeating-linear-gradient( 25deg, transparent 0 17px, rgba(37,135,57,.13) 18px 20px, transparent 21px 35px );
    opacity: .8;
    animation: globeCoreMove 8s linear infinite;
}

@keyframes globeCoreMove {

    from {
        transform: rotate(0deg) scale(1);
    }

    to {
        transform: rotate(360deg) scale(1.03);
    }
}


/* Globe rings */

.globe-ring {
    position: absolute;
    border: 1px solid rgba(47,155,67,.25);
    border-radius: 50%;
}

.ring-one {
    inset: 7% 24%;
    transform: rotateY(65deg);
    animation: ringRotate 7s linear infinite;
}

.ring-two {
    inset: 20% 8%;
    transform: rotateY(25deg);
    animation: ringRotate 9s linear infinite reverse;
}

.ring-three {
    inset: 2% 38%;
    transform: rotateY(65deg);
    animation: ringRotate 11s linear infinite;
}

@keyframes ringRotate {

    from {
        transform: rotateY(65deg) rotateZ(0deg);
    }

    to {
        transform: rotateY(65deg) rotateZ(360deg);
    }
}


/* Globe dots */

.globe-dot {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #43aa50;
    box-shadow: 0 0 14px rgba(50,180,70,.75);
}

.globe-dot-one {
    top: 25%;
    left: 32%;
}

.globe-dot-two {
    top: 48%;
    right: 20%;
}

.globe-dot-three {
    bottom: 25%;
    left: 28%;
}

.globe-dot-four {
    top: 33%;
    right: 34%;
}


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

.growth-arrow {
    position: absolute;
    width: 170px;
    height: 170px;
    right: -5px;
    top: 65px;
    transform: rotate(-18deg);
    pointer-events: none;
    animation: arrowFloat 4s ease-in-out infinite;
}

@keyframes arrowFloat {

    0%,100% {
        transform: rotate(-18deg) translate(0,0);
    }

    50% {
        transform: rotate(-18deg) translate(8px,-12px);
    }
}

.arrow-line {
    position: absolute;
    width: 125px;
    height: 125px;
    right: 0;
    bottom: 0;
    border-top: 7px solid #55c75d;
    border-right: 7px solid #55c75d;
    border-radius: 0 100% 0 0;
    filter: drop-shadow( 0 5px 8px rgba(60,170,70,.25) );
}

.arrow-head {
    position: absolute;
    right: -5px;
    top: -15px;
    font-size: 78px;
    font-weight: 800;
    color: #42ad4e;
    text-shadow: 0 10px 20px rgba(50,150,60,.20);
}


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

.business-float-card {
    position: absolute;
    right: -10px;
    bottom: 55px;
    width: 120px;
    height: 125px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient( 145deg, rgba(255,255,255,.9), rgba(235,248,236,.72) );
    border: 1px solid rgba(76,160,85,.22);
    box-shadow: 0 25px 40px rgba(30,110,50,.13), inset 0 1px 0 white;
    backdrop-filter: blur(15px);
    transform: rotateY(-12deg) rotateX(6deg);
    animation: businessCardFloat 5s ease-in-out infinite;
}

@keyframes businessCardFloat {

    0%,100% {
        transform: translateY(0) rotateY(-12deg) rotateX(6deg);
    }

    50% {
        transform: translateY(-13px) rotateY(5deg) rotateX(2deg);
    }
}

.business-card-icon {
    width: 43px;
    height: 43px;
    margin-bottom: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient( 145deg, #ddf6d9, #b7e9b5 );
    color: #19823e;
    font-size: 20px;
}

.business-float-card strong {
    font-size: 11px;
    letter-spacing: 1px;
    color: #2d4b3f;
}

.business-float-card small {
    margin-top: 3px;
    font-size: 8px;
    letter-spacing: 1.4px;
    color: #71847c;
}


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

.cta-handshake-glow {
    position: absolute;
    width: 350px;
    height: 350px;
    right: -30px;
    top: 70px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(86,200,95,.15), transparent 68% );
    filter: blur(12px);
    animation: handshakeGlow 5s ease-in-out infinite;
}

@keyframes handshakeGlow {

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

    50% {
        opacity: .9;
        transform: scale(1.12);
    }
}


/* =========================================================
   BOTTOM CTA STRIP
========================================================= */

.cta-bottom {
    position: relative;
    width: min(1450px, calc(100% - 50px));
    min-height: 115px;
    margin: 0 auto;
    padding: 20px 30px;
    display: grid;
    grid-template-columns: 220px 1px minmax(300px, 1fr) 1px 260px 270px;
    align-items: center;
    gap: 28px;
    border-top: 1px solid rgba(70,140,80,.10);
    background: rgba(255,255,255,.48);
    backdrop-filter: blur(15px);
    box-shadow: 0 -15px 50px rgba(40,120,55,.04);
    z-index: 20;
}


/* Bottom label */

.bottom-leaf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #e3f4df;
    color: #16803d;
    font-size: 22px;
}

.bottom-label {
    position: absolute;
    left: 30px;
    padding-left: 50px;
    font-size: 10px;
    line-height: 1.45;
    letter-spacing: 2px;
    font-weight: 750;
    color: #73817b;
}


/* Divider */

.bottom-divider {
    width: 1px;
    height: 58px;
    background: rgba(40,100,55,.25);
}


/* Bottom heading */

.bottom-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .bottom-heading small {
        font-size: 10px;
        letter-spacing: 2.3px;
        font-weight: 800;
        color: #273f36;
    }

    .bottom-heading strong {
        font-size: 29px;
        line-height: 1.05;
        color: #122b21;
    }

        .bottom-heading strong span {
            color: #21833c;
        }


/* Bottom text */

.cta-bottom p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #61716a;
}


/* Bottom button */

.bottom-button {
    height: 57px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px 0 28px;
    border-radius: 50px;
    text-decoration: none;
    color: white;
    font-size: 15px;
    font-weight: 750;
    background: linear-gradient( 135deg, #08783e, #0c9345 );
    box-shadow: 0 15px 30px rgba(25,140,60,.20);
    transition: transform .3s ease, box-shadow .3s ease;
}

    .bottom-button span {
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255,255,255,.16);
        font-size: 19px;
        transition: transform .3s ease;
    }

    .bottom-button:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 35px rgba(25,140,60,.28);
    }

        .bottom-button:hover span {
            transform: translateX(4px);
        }


/* =========================================================
   SCROLL REVEAL
========================================================= */

.cta-content,
.cta-left-visual,
.cta-right-visual,
.cta-bottom {
    opacity: 0;
    transform: translateY(35px);
}

.final-cta.cta-visible .cta-content {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}

.final-cta.cta-visible .cta-left-visual {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .8s ease .12s, transform .9s cubic-bezier(.2,.8,.2,1) .12s;
}

.final-cta.cta-visible .cta-right-visual {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .8s ease .22s, transform .9s cubic-bezier(.2,.8,.2,1) .22s;
}

.final-cta.cta-visible .cta-bottom {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .8s ease .35s, transform .8s cubic-bezier(.2,.8,.2,1) .35s;
}


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

@media (max-width: 1150px) {

    .final-cta {
        padding-top: 70px;
    }

    .cta-container {
        grid-template-columns: 180px minmax(450px, 1fr) 180px;
        width: min(1100px, calc(100% - 35px));
    }

    .cta-content h2 {
        font-size: clamp(38px, 5vw, 58px);
    }

    .cta-visual {
        transform: scale(.82);
    }

    .cta-left-visual {
        margin-right: -40px;
    }

    .cta-right-visual {
        margin-left: -40px;
    }

    .cta-bottom {
        grid-template-columns: 180px 1px 1fr 1px 210px;
        gap: 18px;
    }

        .cta-bottom p {
            display: none;
        }

    .bottom-button {
        min-width: 210px;
    }
}


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

@media (max-width: 800px) {

    .final-cta {
        min-height: auto;
        padding: 65px 0 0;
    }

    .cta-container {
        width: calc(100% - 30px);
        min-height: auto;
        display: flex;
        flex-direction: column;
        gap: 0;
    }


    /* Hide complex side decorations slightly */

    .cta-left-visual,
    .cta-right-visual {
        width: 100%;
        height: 160px;
        order: 2;
        transform: scale(.72);
    }

    .cta-content {
        order: 1;
        width: 100%;
    }

    .cta-left-visual {
        margin-top: 0;
    }

    .cta-right-visual {
        display: none;
    }


    /* Left visual moves behind content */

    .cta-puzzle {
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%) scale(.75);
    }

    .floating-info {
        transform: scale(.75);
    }

    .info-one {
        left: 4%;
    }

    .info-two {
        left: auto;
        right: 4%;
    }

    .orbit-left {
        width: 300px;
        height: 180px;
        left: 50%;
        transform: translateX(-50%) rotate(-10deg);
    }


    /* Heading */

    .cta-eyebrow {
        font-size: 9px;
        letter-spacing: 1.5px;
        gap: 8px;
        line-height: 1.4;
    }

        .cta-eyebrow span {
            width: 20px;
        }

    .cta-content h2 {
        font-size: clamp( 34px, 9vw, 48px );
        letter-spacing: -1.8px;
        line-height: 1;
    }

    .cta-description {
        margin-top: 17px;
        font-size: 14px;
        line-height: 1.65;
        max-width: 420px;
    }


    /* Buttons */

    .cta-buttons {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-top: 24px;
    }

    .cta-btn {
        width: min(100%, 350px);
        min-width: 0;
        height: 59px;
        font-size: 15px;
        padding-left: 23px;
    }

        .cta-btn i {
            width: 42px;
            height: 42px;
            flex-basis: 42px;
        }


    /* Benefits */

    .cta-benefits {
        margin-top: 25px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
    }

    .cta-benefit {
        flex-direction: column;
        gap: 6px;
        text-align: center;
        white-space: normal;
        font-size: 9px;
    }

    .benefit-icon {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    .benefit-divider {
        display: none;
    }


    /* Bottom */

    .cta-bottom {
        width: 100%;
        min-height: auto;
        margin-top: 15px;
        padding: 22px 18px 25px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        text-align: center;
        border-radius: 0;
    }

    .bottom-leaf {
        display: none;
    }

    .bottom-label {
        position: static;
        padding: 0;
        font-size: 8px;
        letter-spacing: 1.5px;
    }

    .bottom-divider {
        display: none;
    }

    .bottom-heading {
        align-items: center;
    }

        .bottom-heading small {
            font-size: 8px;
            letter-spacing: 1.5px;
        }

        .bottom-heading strong {
            font-size: 25px;
        }

    .cta-bottom p {
        display: block;
        font-size: 11px;
    }

    .bottom-button {
        width: min(100%, 320px);
        margin: auto;
        height: 52px;
        font-size: 13px;
    }


    /* Background */

    .cta-particles span:nth-child(n+6) {
        display: none;
    }
}


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

@media (max-width: 480px) {

    .final-cta {
        padding-top: 50px;
    }

    .cta-container {
        width: calc(100% - 24px);
    }

    .cta-eyebrow {
        font-size: 8px;
        letter-spacing: 1.1px;
    }

    .cta-content h2 {
        font-size: 34px;
        letter-spacing: -1.4px;
    }

    .cta-description {
        font-size: 13px;
    }

    .cta-buttons {
        width: 100%;
    }

    .cta-btn {
        width: 100%;
    }

    .cta-benefit {
        font-size: 8px;
    }

    .cta-left-visual {
        height: 130px;
        transform: scale(.58);
    }

    .cta-puzzle {
        transform: translate(-50%,-50%) scale(.8);
    }

    .floating-info {
        display: none;
    }

    .orbit-left {
        opacity: .5;
    }

    .bottom-heading strong {
        font-size: 23px;
    }
}


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

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

    .cta-grid,
    .cta-orb,
    .cta-particles span,
    .cta-content,
    .cta-puzzle,
    .floating-info,
    .visual-orbit,
    .cta-globe,
    .globe-core,
    .globe-ring,
    .growth-arrow,
    .business-float-card,
    .cta-handshake-glow {
        animation: none !important;
    }

    .cta-btn,
    .bottom-button {
        transition: none !important;
    }
}






/* =========================================================
   CHRONICAL SOLUTIONS
   WHY PARTNER
   NEW RADIAL 3D LAYOUT
   UNIQUE PREFIX: CSPX
========================================================= */

.cspx-partner-section {
    --cspx-green: #168342;
    --cspx-dark: #0d2b1a;
    --cspx-soft: #e9f8ed;
    --cspx-text: #193025;
    position: relative;
    width: 100%;
    min-height: 760px;
    padding: 22px 0 38px;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient( circle at center, rgba(255,255,255,.98) 0%, rgba(248,253,249,.95) 42%, rgba(237,248,239,.92) 100% );
    color: var(--cspx-text);
}


/* =========================================================
   SIDE BACKGROUND IMAGE
========================================================= */

.cspx-bg-image {
    position: absolute;
    inset: 0;
    z-index: -8;
    background-image: url('../image/background/bacc.png');
    background-size: cover;
    background-position: center;
    opacity: .72;
    transform: scale(1.04);
    animation: cspxBgMove 16s ease-in-out infinite;
    pointer-events: none;
}


@keyframes cspxBgMove {

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

    50% {
        transform: scale(1.08) translate3d(0,-7px,0);
    }
}


/* =========================================================
   LIGHT CENTER MASK
========================================================= */

.cspx-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: -7;
    background: linear-gradient( 90deg, rgba(239,249,241,.18) 0%, rgba(255,255,255,.55) 18%, rgba(255,255,255,.94) 36%, rgba(255,255,255,.97) 50%, rgba(255,255,255,.94) 64%, rgba(255,255,255,.55) 82%, rgba(239,249,241,.18) 100% );
}


/* =========================================================
   AMBIENT GLOWS
========================================================= */

.cspx-glow {
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    filter: blur(35px);
    pointer-events: none;
    z-index: -5;
    opacity: .45;
    animation: cspxGlowFloat 8s ease-in-out infinite;
}


.cspx-glow-left {
    left: -170px;
    top: 32%;
    background: radial-gradient( circle, rgba(62,190,91,.23), transparent 68% );
}


.cspx-glow-right {
    right: -170px;
    top: 42%;
    background: radial-gradient( circle, rgba(62,190,91,.20), transparent 68% );
    animation-delay: -3s;
}


@keyframes cspxGlowFloat {

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

    50% {
        transform: translateY(-25px) scale(1.08);
    }
}


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

.cspx-particle {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: radial-gradient( circle at 30% 30%, #fff, #65d883 45%, #13803e );
    box-shadow: 0 0 16px rgba(32,165,73,.45);
    z-index: -3;
    animation: cspxParticleFloat 5s ease-in-out infinite;
}


.cspx-particle-a {
    left: 8%;
    top: 27%;
}

.cspx-particle-b {
    right: 10%;
    top: 23%;
    animation-delay: -1s;
}

.cspx-particle-c {
    left: 15%;
    bottom: 17%;
    animation-delay: -2.5s;
}

.cspx-particle-d {
    right: 17%;
    bottom: 22%;
    animation-delay: -3.5s;
}


@keyframes cspxParticleFloat {

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

    50% {
        transform: translate3d(0,-24px,25px) scale(1.35);
        opacity: 1;
    }
}


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

.cspx-container {
    position: relative;
    width: min( 1320px, calc(100% - 48px) );
    margin: auto;
    z-index: 2;
}


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

.cspx-heading {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 12px;
    position: relative;
    z-index: 5;
}


.cspx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 3px;
    color: #18743b;
}


    .cspx-eyebrow span {
        width: 28px;
        height: 1px;
        background: linear-gradient( 90deg, transparent, #39a85c );
    }


        .cspx-eyebrow span:last-child {
            background: linear-gradient( 90deg, #39a85c, transparent );
        }


.cspx-heading h2 {
    margin: 0;
    font-size: clamp( 32px, 4vw, 52px );
    line-height: .98;
    letter-spacing: -2.4px;
    font-weight: 850;
    color: #12271a;
}


    .cspx-heading h2 strong {
        display: block;
        background: linear-gradient( 90deg, #0b552b, #22a451, #0b6c34 );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }


.cspx-heading p {
    margin: 12px auto 0;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(29,61,42,.68);
}


    .cspx-heading p b {
        color: #167139;
    }


/* =========================================================
   NETWORK STAGE
========================================================= */

.cspx-network {
    position: relative;
    width: 100%;
    height: 470px;
    margin-top: -2px;
    perspective: 1600px;
    transform-style: preserve-3d;
}


/* =========================================================
   3D RINGS
========================================================= */

.cspx-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    border: 1px solid rgba(38,153,72,.15);
    pointer-events: none;
    transform-style: preserve-3d;
}


.cspx-ring-outer {
    width: 570px;
    height: 570px;
    transform: translate(-50%,-50%) rotateX(66deg) rotateZ(-8deg);
    animation: cspxRingSpin 25s linear infinite;
}


.cspx-ring-middle {
    width: 420px;
    height: 420px;
    transform: translate(-50%,-50%) rotateX(68deg) rotateZ(22deg);
    border-color: rgba(37,153,73,.19);
    animation: cspxRingSpinReverse 19s linear infinite;
}


.cspx-ring-inner {
    width: 270px;
    height: 270px;
    transform: translate(-50%,-50%) rotateX(70deg) rotateZ(-15deg);
    border-color: rgba(37,153,73,.12);
    animation: cspxRingPulse 7s ease-in-out infinite;
}


@keyframes cspxRingSpin {

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

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


@keyframes cspxRingSpinReverse {

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

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


@keyframes cspxRingPulse {

    0%, 100% {
        opacity: .45;
        transform: translate(-50%,-50%) rotateX(70deg) rotateZ(-15deg) scale(.94);
    }

    50% {
        opacity: .85;
        transform: translate(-50%,-50%) rotateX(70deg) rotateZ(-15deg) scale(1.07);
    }
}


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

.cspx-connection {
    position: absolute;
    height: 1px;
    background: linear-gradient( 90deg, transparent, rgba(42,164,76,.30), transparent );
    transform-origin: left center;
    opacity: .55;
    z-index: 1;
}


.cspx-line-1 {
    width: 260px;
    left: 18%;
    top: 34%;
    transform: rotate(8deg);
}


.cspx-line-2 {
    width: 260px;
    right: 18%;
    top: 34%;
    transform: rotate(172deg);
}


.cspx-line-3 {
    width: 220px;
    left: 21%;
    top: 67%;
    transform: rotate(-13deg);
}


.cspx-line-4 {
    width: 220px;
    right: 21%;
    top: 67%;
    transform: rotate(193deg);
}


.cspx-line-5 {
    width: 185px;
    left: 32%;
    top: 83%;
    transform: rotate(28deg);
}


.cspx-line-6 {
    width: 185px;
    right: 32%;
    top: 83%;
    transform: rotate(152deg);
}


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

.cspx-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 215px;
    height: 215px;
    transform: translate(-50%,-50%) translateZ(70px);
    transform-style: preserve-3d;
    z-index: 8;
}


    .cspx-core::before {
        content: "";
        position: absolute;
        inset: -18px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(68,197,95,.14), transparent 68% );
        filter: blur(12px);
        animation: cspxCoreGlow 4s ease-in-out infinite;
    }


@keyframes cspxCoreGlow {

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

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


.cspx-core-inner {
    position: absolute;
    inset: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 50%;
    background: radial-gradient( circle at 35% 25%, #ffffff, #f0faf2 48%, #dcefe0 100% );
    border: 1px solid rgba(41,145,69,.22);
    box-shadow: 0 25px 60px rgba(20,93,42,.17), 0 0 45px rgba(55,190,84,.13), inset 0 2px 0 #fff;
    transform-style: preserve-3d;
}


.cspx-core-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 7px;
    border-radius: 15px;
    background: linear-gradient( 145deg, #ffffff, #d9f2de );
    box-shadow: 0 8px 20px rgba(28,124,54,.13);
    transform: translateZ(35px);
}


    .cspx-core-icon svg {
        width: 28px;
        height: 28px;
        fill: none;
        stroke: #168342;
        stroke-width: 3;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


.cspx-core-inner > span {
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 2.5px;
    color: #398152;
}


.cspx-core-inner h3 {
    margin: 4px 0 3px;
    font-size: 22px;
    letter-spacing: -.7px;
    color: #123622;
}


.cspx-core-inner p {
    margin: 0;
    max-width: 130px;
    font-size: 9px;
    line-height: 1.4;
    color: rgba(29,69,43,.58);
}


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

.cspx-core-orbit {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px dashed rgba(37,154,70,.35);
    animation: cspxCoreOrbit 10s linear infinite;
}


@keyframes cspxCoreOrbit {

    to {
        transform: rotateZ(360deg);
    }
}


/* CORE DOTS */

.cspx-core-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient( circle at 30% 30%, #fff, #55d87a 40%, #12813c );
    box-shadow: 0 0 16px rgba(35,173,73,.55);
    z-index: 5;
}


.cspx-dot-one {
    left: -2px;
    top: 42%;
}


.cspx-dot-two {
    right: 5px;
    top: 23%;
}


.cspx-dot-three {
    right: 25%;
    bottom: -2px;
}


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

.cspx-card {
    position: absolute;
    width: 245px;
    min-height: 154px;
    padding: 18px 18px 17px;
    border-radius: 20px;
    background: linear-gradient( 145deg, rgba(255,255,255,.91), rgba(244,251,246,.78) );
    border: 1px solid rgba(41,139,67,.17);
    box-shadow: 0 18px 38px rgba(21,82,39,.09), 0 5px 15px rgba(21,82,39,.05), inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(12px);
    transform-style: preserve-3d;
    opacity: 0;
    transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .7s ease, box-shadow .35s ease, border-color .35s ease;
    z-index: 5;
    overflow: hidden;
    --cspx-accent: #168342;
}


    .cspx-card.cspx-visible {
        opacity: 1;
    }


/* UNIQUE RADIAL POSITIONS */

.cspx-card-1 {
    left: 3%;
    top: 7%;
    transform: translate3d(-35px,25px,20px) rotateY(8deg) rotateX(4deg);
}


.cspx-card-2 {
    right: 3%;
    top: 7%;
    transform: translate3d(35px,25px,20px) rotateY(-8deg) rotateX(4deg);
}


.cspx-card-3 {
    left: 1%;
    top: 51%;
    transform: translate3d(-35px,20px,35px) rotateY(10deg);
}


.cspx-card-4 {
    right: 1%;
    top: 51%;
    transform: translate3d(35px,20px,35px) rotateY(-10deg);
}


.cspx-card-5 {
    left: 22%;
    bottom: 0;
    transform: translate3d(-25px,25px,30px) rotateY(5deg);
}


.cspx-card-6 {
    right: 22%;
    bottom: 0;
    transform: translate3d(25px,25px,30px) rotateY(-5deg);
}


    /* visible */

    .cspx-card-1.cspx-visible,
    .cspx-card-2.cspx-visible,
    .cspx-card-3.cspx-visible,
    .cspx-card-4.cspx-visible,
    .cspx-card-5.cspx-visible,
    .cspx-card-6.cspx-visible {
        transform: translate3d(0,0,35px) rotateY(0) rotateX(0);
    }


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

.cspx-card:hover {
    border-color: rgba(26,143,67,.38);
    box-shadow: 0 28px 55px rgba(20,91,42,.15), 0 0 35px rgba(45,177,76,.10), inset 0 1px 0 #fff;
    transform: translate3d(0,-9px,65px) rotateX(2deg) rotateY(0deg) !important;
}


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

.cspx-number {
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: rgba(21,119,57,.32);
}


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

.cspx-card-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient( 145deg, #ffffff, #def4e2 );
    border: 1px solid rgba(42,153,70,.14);
    box-shadow: 0 8px 18px rgba(31,120,53,.10);
    transform: translateZ(30px);
    transition: transform .4s ease;
}


.cspx-card:hover .cspx-card-icon {
    transform: translateZ(48px) rotateY(8deg) rotateX(-5deg);
}


.cspx-card-icon svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: var(--cspx-accent);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}


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

.cspx-tag {
    display: block;
    margin-top: 10px;
    margin-bottom: 4px;
    font-size: 6.5px;
    font-weight: 900;
    letter-spacing: 1.8px;
    color: var(--cspx-accent);
}


.cspx-card h3 {
    margin: 0;
    font-size: 17px;
    line-height: 1.1;
    letter-spacing: -.4px;
    color: #15291d;
    transform: translateZ(28px);
}


.cspx-card p {
    margin: 6px 0 0;
    max-width: 205px;
    font-size: 9.5px;
    line-height: 1.45;
    color: rgba(33,62,44,.64);
    transform: translateZ(20px);
}


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

.cspx-card::after {
    content: "";
    position: absolute;
    width: 55%;
    height: 180%;
    left: -100%;
    top: -40%;
    transform: rotate(20deg);
    background: linear-gradient( 90deg, transparent, rgba(255,255,255,.55), transparent );
    transition: left .8s ease;
    pointer-events: none;
}


.cspx-card:hover::after {
    left: 150%;
}


/* =========================================================
   ACCENTS
========================================================= */

.cspx-card-1 {
    --cspx-accent: #159447;
}

.cspx-card-2 {
    --cspx-accent: #197946;
}

.cspx-card-3 {
    --cspx-accent: #23935a;
}

.cspx-card-4 {
    --cspx-accent: #27854a;
}

.cspx-card-5 {
    --cspx-accent: #15804a;
}

.cspx-card-6 {
    --cspx-accent: #176e3d;
}


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

.cspx-bottom-cta {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1.1fr auto;
    align-items: center;
    gap: 28px;
    margin-top: 4px;
    padding: 14px 17px;
    min-height: 67px;
    border-radius: 18px;
    background: linear-gradient( 110deg, rgba(255,255,255,.92), rgba(242,251,245,.82) );
    border: 1px solid rgba(43,140,69,.15);
    box-shadow: 0 14px 30px rgba(25,87,43,.07), inset 0 1px 0 #fff;
    backdrop-filter: blur(12px);
}


.cspx-cta-copy > span {
    display: block;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 2px;
    color: rgba(21,104,48,.56);
}


.cspx-cta-copy h3 {
    margin: 4px 0 0;
    font-size: 23px;
    line-height: 1;
    letter-spacing: -.7px;
    color: #14291c;
}


    .cspx-cta-copy h3 strong {
        color: #188744;
    }


.cspx-bottom-cta > p {
    margin: 0;
    font-size: 9.5px;
    line-height: 1.5;
    color: rgba(34,65,45,.60);
}


.cspx-cta-btn {
    height: 42px;
    min-width: 155px;
    padding: 0 8px 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-radius: 50px;
    text-decoration: none;
    color: #fff;
    background: linear-gradient( 135deg, #08602e, #159447 );
    box-shadow: 0 10px 24px rgba(18,128,57,.22);
    transition: transform .35s ease, box-shadow .35s ease;
}


    .cspx-cta-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 32px rgba(18,128,57,.30);
    }


    .cspx-cta-btn b {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255,255,255,.15);
        font-size: 17px;
        font-weight: 400;
        transition: transform .3s ease;
    }


    .cspx-cta-btn:hover b {
        transform: translateX(4px);
    }


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

@media (max-width: 1100px) {

    .cspx-network {
        height: 510px;
    }

    .cspx-card {
        width: 215px;
    }

    .cspx-card-1 {
        left: 0;
    }

    .cspx-card-2 {
        right: 0;
    }

    .cspx-card-3 {
        left: 0;
    }

    .cspx-card-4 {
        right: 0;
    }

    .cspx-card-5 {
        left: 20%;
    }

    .cspx-card-6 {
        right: 20%;
    }

    .cspx-connection {
        opacity: .25;
    }
}


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

@media (max-width: 850px) {

    .cspx-partner-section {
        padding-top: 55px;
    }

    .cspx-network {
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        padding-top: 10px;
    }

    .cspx-ring,
    .cspx-connection,
    .cspx-core {
        display: none;
    }

    .cspx-card {
        position: relative;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: auto;
        min-height: 170px;
        transform: translateY(25px) !important;
    }

        .cspx-card.cspx-visible {
            transform: translateY(0) !important;
        }

    .cspx-bottom-cta {
        margin-top: 18px;
        grid-template-columns: 1fr auto;
    }

        .cspx-bottom-cta > p {
            display: none;
        }
}


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

@media (max-width: 600px) {

    .cspx-partner-section {
        min-height: auto;
        padding: 48px 0 28px;
    }

    .cspx-container {
        width: calc(100% - 26px);
    }

    .cspx-bg-image {
        background-position: center;
        opacity: .46;
    }

    .cspx-bg-overlay {
        background: linear-gradient( 180deg, rgba(246,252,247,.55), rgba(255,255,255,.92) 30%, rgba(255,255,255,.97) 72%, rgba(244,251,246,.65) );
    }

    .cspx-heading {
        margin-bottom: 18px;
    }

    .cspx-eyebrow {
        font-size: 7.5px;
        letter-spacing: 2px;
        gap: 7px;
    }

        .cspx-eyebrow span {
            width: 19px;
        }

    .cspx-heading h2 {
        font-size: clamp( 28px, 8.5vw, 38px );
        letter-spacing: -1.5px;
    }

    .cspx-heading p {
        font-size: 11.5px;
        line-height: 1.5;
    }

    .cspx-network {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .cspx-card {
        min-height: 180px;
        padding: 17px;
        border-radius: 18px;
    }

    .cspx-card-icon {
        width: 48px;
        height: 48px;
    }

        .cspx-card-icon svg {
            width: 27px;
            height: 27px;
        }

    .cspx-card h3 {
        font-size: 18px;
    }

    .cspx-card p {
        max-width: 100%;
        font-size: 10px;
        line-height: 1.5;
    }

    .cspx-bottom-cta {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-top: 15px;
        padding: 17px;
        text-align: center;
        border-radius: 17px;
    }

    .cspx-cta-copy h3 {
        font-size: 22px;
    }

    .cspx-cta-btn {
        width: 100%;
        min-width: 0;
    }

    .cspx-glow {
        width: 220px;
        height: 220px;
    }

    .cspx-particle {
        transform: scale(.7);
    }
}


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

@media (max-width: 380px) {

    .cspx-partner-section {
        padding-top: 42px;
    }

    .cspx-heading h2 {
        font-size: 27px;
    }

    .cspx-card {
        min-height: 185px;
    }

        .cspx-card h3 {
            font-size: 17px;
        }

        .cspx-card p {
            font-size: 9.5px;
        }
}


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

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

    .cspx-bg-image,
    .cspx-glow,
    .cspx-particle,
    .cspx-ring,
    .cspx-core-orbit {
        animation: none !important;
    }

    .cspx-card {
        transition: opacity .3s ease !important;
    }
}