/* =========================================================
   CHRONICAL SOLUTIONS
   ABOUT PAGE — 3D BREADCRUMB
   UNIQUE PREFIX: CSP-ABT
========================================================= */

.csp-abt-breadcrumb {
    --csp-abt-green: #16803d;
    --csp-abt-green-dark: #07552a;
    --csp-abt-green-light: #55d879;
    --csp-abt-text: #10241a;
    position: relative;
    width: 100%;
    height: 260px;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
    background: radial-gradient( circle at 18% 50%, rgba(74, 222, 128, .12), transparent 25% ), radial-gradient( circle at 82% 45%, rgba(34, 197, 94, .10), transparent 28% ), linear-gradient( 180deg, #fbfefc 0%, #f2faf4 52%, #ffffff 100% );
    color: var(--csp-abt-text);
    perspective: 1400px;
}


/* =========================================================
   BACKGROUND IMAGE / ABSTRACT 3D
========================================================= */

.csp-abt-bread-bg {
    position: absolute;
    inset: -15px;
    z-index: -10;
    pointer-events: none;
     background-image: url('../image/background/bac.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: saturate(.85) contrast(.96);
    transform: scale(1.04);
    animation: cspAbtBreadBgFloat 15s ease-in-out infinite;
}


@keyframes cspAbtBreadBgFloat {

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

    50% {
        transform: scale(1.07) translate3d(0, -5px, 0);
    }
}


/* =========================================================
   LIGHT OVERLAY
========================================================= */

.csp-abt-bread-overlay {
    position: absolute;
    inset: 0;
    z-index: -9;
    pointer-events: none;
    background: linear-gradient( 90deg, rgba(250, 254, 251, .28), rgba(255, 255, 255, .78) 27%, rgba(255, 255, 255, .90) 50%, rgba(255, 255, 255, .78) 73%, rgba(250, 254, 251, .28) );
}


/* =========================================================
   SUBTLE 3D GRID
========================================================= */

.csp-abt-bread-grid {
    position: absolute;
    inset: 0;
    z-index: -7;
    pointer-events: none;
    opacity: .28;
    background-image: linear-gradient( rgba(38, 143, 72, .055) 1px, transparent 1px ), linear-gradient( 90deg, rgba(38, 143, 72, .055) 1px, transparent 1px );
    background-size: 42px 42px;
    transform: perspective(700px) rotateX(58deg) scale(1.35) translateY(35px);
    transform-origin: center bottom;
    mask-image: linear-gradient( to bottom, transparent 5%, black 55%, transparent 100% );
}


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

.csp-abt-bread-container {
    position: relative;
    width: min( 1320px, calc(100% - 60px) );
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transform-style: preserve-3d;
}


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

.csp-abt-bread-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transform-style: preserve-3d;
    transition: transform .25s ease-out;
}


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

.csp-abt-bread-mini {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-bottom: 5px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 3px;
    color: rgba(22, 101, 52, .75);
    transform: translateZ(30px);
}


    .csp-abt-bread-mini span {
        width: 25px;
        height: 1px;
        display: block;
        background: linear-gradient( 90deg, transparent, #36a85b );
    }


        .csp-abt-bread-mini span:last-child {
            background: linear-gradient( 90deg, #36a85b, transparent );
        }


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

.csp-abt-bread-content h1 {
    margin: 0;
    font-size: clamp( 31px, 4vw, 45px );
    line-height: 1;
    letter-spacing: -1.8px;
    font-weight: 850;
    color: #10241a;
    transform: translateZ(45px);
}


    .csp-abt-bread-content h1 strong {
        color: var(--csp-abt-green);
        font-weight: 850;
        background: linear-gradient( 90deg, #07552a, #159447, #38a957 );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }


/* =========================================================
   BREADCRUMB NAV
========================================================= */

.csp-abt-breadcrumb-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin-top: 9px;
    padding: 7px 13px;
    min-height: 32px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .68);
    border: 1px solid rgba(41, 142, 71, .16);
    box-shadow: 0 8px 20px rgba(22, 92, 43, .06), inset 0 1px 0 rgba(255, 255, 255, .95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transform: translateZ(38px);
    transition: transform .35s ease, box-shadow .35s ease;
}


    .csp-abt-breadcrumb-nav:hover {
        transform: translateZ(48px) translateY(-2px);
        box-shadow: 0 12px 27px rgba(22, 92, 43, .10), 0 0 22px rgba(74, 222, 128, .08), inset 0 1px 0 #ffffff;
    }


/* =========================================================
   HOME LINK
========================================================= */

.csp-abt-home-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: rgba(22, 101, 52, .70);
    font-size: 11px;
    font-weight: 700;
    transition: color .3s ease, transform .3s ease;
}


    .csp-abt-home-link:hover {
        color: var(--csp-abt-green);
        transform: translateY(-1px);
    }


    .csp-abt-home-link svg {
        width: 13px;
        height: 13px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


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

.csp-abt-bread-arrow {
    width: 19px;
    height: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(21, 128, 61, .07);
    color: rgba(21, 128, 61, .55);
}


    .csp-abt-bread-arrow svg {
        width: 12px;
        height: 12px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        animation: cspAbtArrowPulse 2.5s ease-in-out infinite;
    }


@keyframes cspAbtArrowPulse {

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

    50% {
        transform: translateX(3px);
    }
}


/* =========================================================
   CURRENT PAGE
========================================================= */

.csp-abt-current {
    position: relative;
    font-size: 11px;
    font-weight: 800;
    color: #123d24;
    white-space: nowrap;
}


    .csp-abt-current::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -3px;
        height: 1px;
        border-radius: 10px;
        background: linear-gradient( 90deg, transparent, #37a856, transparent );
        transform: scaleX(.6);
        animation: cspAbtUnderline 3s ease-in-out infinite;
    }


@keyframes cspAbtUnderline {

    0%, 100% {
        transform: scaleX(.55);
        opacity: .5;
    }

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


/* =========================================================
   SIDE WORDS
========================================================= */

.csp-abt-bread-side {
    position: absolute;
    top: 50%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transform-style: preserve-3d;
    pointer-events: none;
    opacity: .55;
}


    .csp-abt-bread-side span {
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 2.5px;
        color: rgba(21, 128, 61, .34);
        white-space: nowrap;
    }


.csp-abt-side-left {
    left: 25px;
    transform: translateY(-50%) rotateY(18deg) rotateZ(-90deg) translateZ(20px);
}


.csp-abt-side-right {
    right: 25px;
    transform: translateY(-50%) rotateY(-18deg) rotateZ(90deg) translateZ(20px);
}


/* =========================================================
   3D ORBITS
========================================================= */

.csp-abt-orbit {
    position: absolute;
    border: 1px solid rgba(38, 158, 77, .17);
    border-radius: 50%;
    transform-style: preserve-3d;
    pointer-events: none;
    z-index: -3;
}


.csp-abt-orbit-left {
    width: 270px;
    height: 120px;
    left: -85px;
    top: 15px;
    transform: rotateX(62deg) rotateZ(-18deg);
    animation: cspAbtOrbitLeft 13s linear infinite;
}


.csp-abt-orbit-right {
    width: 310px;
    height: 135px;
    right: -100px;
    bottom: 3px;
    transform: rotateX(63deg) rotateZ(20deg);
    animation: cspAbtOrbitRight 16s linear infinite;
}


@keyframes cspAbtOrbitLeft {

    from {
        transform: rotateX(62deg) rotateZ(0deg);
    }

    to {
        transform: rotateX(62deg) rotateZ(360deg);
    }
}


@keyframes cspAbtOrbitRight {

    from {
        transform: rotateX(63deg) rotateZ(360deg);
    }

    to {
        transform: rotateX(63deg) rotateZ(0deg);
    }
}


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

.csp-abt-orbit span,
.csp-abt-orbit i {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: radial-gradient( circle at 30% 25%, #ffffff, #64df82 35%, #14833f 75% );
    box-shadow: 0 0 12px rgba(44, 185, 82, .55), 0 0 25px rgba(44, 185, 82, .18);
}


.csp-abt-orbit span {
    left: 50%;
    top: -5px;
}


.csp-abt-orbit i {
    right: 13%;
    bottom: 13%;
}


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

.csp-abt-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient( circle at 30% 25%, #ffffff, #65df83 40%, #15803d );
    box-shadow: 0 0 13px rgba(37, 175, 76, .45), 0 0 25px rgba(37, 175, 76, .16);
    pointer-events: none;
    z-index: -2;
    animation: cspAbtParticleFloat 5s ease-in-out infinite;
}


.csp-abt-particle-1 {
    left: 15%;
    top: 25%;
    animation-delay: -.8s;
}


.csp-abt-particle-2 {
    left: 27%;
    bottom: 18%;
    width: 6px;
    height: 6px;
    animation-delay: -2.2s;
}


.csp-abt-particle-3 {
    right: 17%;
    top: 27%;
    width: 7px;
    height: 7px;
    animation-delay: -1.4s;
}


.csp-abt-particle-4 {
    right: 29%;
    bottom: 20%;
    width: 5px;
    height: 5px;
    animation-delay: -3s;
}


@keyframes cspAbtParticleFloat {

    0%, 100% {
        transform: translate3d(0, 0, 0) scale(.75);
        opacity: .35;
    }

    50% {
        transform: translate3d(0, -13px, 22px) scale(1.25);
        opacity: .9;
    }
}


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

.csp-abt-bottom-glow {
    position: absolute;
    left: 50%;
    bottom: -34px;
    width: 55%;
    height: 70px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient( ellipse, rgba(64, 198, 91, .13), transparent 70% );
    filter: blur(8px);
    pointer-events: none;
    z-index: -1;
    animation: cspAbtBottomGlow 5s ease-in-out infinite;
}


@keyframes cspAbtBottomGlow {

    0%, 100% {
        opacity: .5;
        transform: translateX(-50%) scaleX(.9);
    }

    50% {
        opacity: .9;
        transform: translateX(-50%) scaleX(1.08);
    }
}


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

@media (max-width: 900px) {

    .csp-abt-breadcrumb {
        height: 145px;
    }


    .csp-abt-bread-container {
        width: calc(100% - 45px);
    }


    .csp-abt-bread-side {
        opacity: .35;
    }


    .csp-abt-side-left {
        left: 5px;
    }


    .csp-abt-side-right {
        right: 5px;
    }


    .csp-abt-orbit-left {
        left: -130px;
    }


    .csp-abt-orbit-right {
        right: -135px;
    }
}


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

@media (max-width: 600px) {

    .csp-abt-breadcrumb {
        height: 126px;
    }


    .csp-abt-bread-bg {
        background-position: center;
        opacity: .18;
    }


    .csp-abt-bread-overlay {
        background: linear-gradient( 180deg, rgba(255,255,255,.65), rgba(255,255,255,.88) );
    }


    .csp-abt-bread-container {
        width: calc(100% - 28px);
    }


    .csp-abt-bread-mini {
        font-size: 7px;
        letter-spacing: 2px;
        gap: 7px;
        margin-bottom: 4px;
    }


        .csp-abt-bread-mini span {
            width: 18px;
        }


    .csp-abt-bread-content h1 {
        font-size: clamp( 28px, 9vw, 36px );
        letter-spacing: -1.2px;
    }


    .csp-abt-breadcrumb-nav {
        margin-top: 7px;
        padding: 6px 11px;
        gap: 8px;
        min-height: 29px;
    }


    .csp-abt-home-link {
        font-size: 10px;
        gap: 5px;
    }


        .csp-abt-home-link svg {
            width: 12px;
            height: 12px;
        }


    .csp-abt-current {
        font-size: 10px;
    }


    .csp-abt-bread-arrow {
        width: 17px;
        height: 17px;
    }


        .csp-abt-bread-arrow svg {
            width: 11px;
            height: 11px;
        }


    .csp-abt-bread-side {
        display: none;
    }


    .csp-abt-orbit-left {
        width: 190px;
        height: 90px;
        left: -105px;
        top: 5px;
    }


    .csp-abt-orbit-right {
        width: 210px;
        height: 95px;
        right: -115px;
        bottom: -5px;
    }


    .csp-abt-orbit span,
    .csp-abt-orbit i {
        width: 7px;
        height: 7px;
    }


    .csp-abt-particle-1 {
        left: 8%;
    }


    .csp-abt-particle-2 {
        left: 22%;
    }


    .csp-abt-particle-3 {
        right: 8%;
    }


    .csp-abt-particle-4 {
        right: 23%;
    }


    .csp-abt-bread-grid {
        background-size: 30px 30px;
        opacity: .18;
        transform: perspective(500px) rotateX(60deg) scale(1.4) translateY(30px);
    }
}


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

@media (max-width: 380px) {

    .csp-abt-breadcrumb {
        height: 118px;
    }


    .csp-abt-bread-content h1 {
        font-size: 27px;
    }


    .csp-abt-breadcrumb-nav {
        padding: 5px 9px;
        gap: 7px;
    }


    .csp-abt-home-link,
    .csp-abt-current {
        font-size: 9px;
    }
}


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

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

    .csp-abt-bread-bg,
    .csp-abt-orbit,
    .csp-abt-particle,
    .csp-abt-bread-arrow svg,
    .csp-abt-current::after,
    .csp-abt-bottom-glow {
        animation: none !important;
    }
}




/* =========================================================
   CHRONICAL SOLUTIONS
   ABOUT US - WHO WE ARE
   3D BUSINESS VISUAL
   UNIQUE PREFIX : CSA
========================================================= */

.csa-about-section {
    --csa-green: #23b85b;
    --csa-green-bright: #63ec91;
    --csa-green-dark: #087335;
    --csa-bg: #04110a;
    --csa-bg-two: #071b11;
    --csa-white: #f2fff6;
    --csa-muted: rgba(220,240,227,.64);
    position: relative;
    width: 100%;
    min-height: 760px;
    padding: 35px 0 40px;
    overflow: hidden;
    isolation: isolate;
    color: var(--csa-white);
    background: radial-gradient( circle at 75% 48%, rgba(35,190,91,.15), transparent 27% ), radial-gradient( circle at 15% 85%, rgba(18,130,62,.12), transparent 30% ), linear-gradient( 135deg, #031009 0%, #06170e 48%, #04130b 100% );
}


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

.csa-bg-grid {
    position: absolute;
    inset: -20%;
    z-index: -20;
    opacity: .16;
    pointer-events: none;
    background-image: linear-gradient( rgba(73,205,108,.09) 1px, transparent 1px ), linear-gradient( 90deg, rgba(73,205,108,.09) 1px, transparent 1px );
    background-size: 55px 55px;
    transform: perspective(800px) rotateX(64deg) translateY(180px) scale(1.35);
    transform-origin: center bottom;
    animation: csaGridMove 18s linear infinite;
}


@keyframes csaGridMove {

    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 55px;
    }
}


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

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


.csa-glow-one {
    width: 420px;
    height: 420px;
    right: 4%;
    top: 18%;
    background: rgba(29,183,82,.13);
    animation: csaGlowFloat 8s ease-in-out infinite;
}


.csa-glow-two {
    width: 320px;
    height: 320px;
    left: -100px;
    bottom: 5%;
    background: rgba(20,135,66,.12);
    animation: csaGlowFloat 10s ease-in-out infinite reverse;
}


.csa-glow-three {
    width: 220px;
    height: 220px;
    left: 45%;
    top: 4%;
    background: rgba(83,224,126,.07);
    filter: blur(65px);
}


@keyframes csaGlowFloat {

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

    50% {
        transform: translate3d(0,-28px,0) scale(1.12);
    }
}


/* =========================================================
   3D ORBITS
========================================================= */

.csa-orbit {
    position: absolute;
    border: 1px solid rgba(77,211,115,.13);
    border-radius: 50%;
    pointer-events: none;
    z-index: -6;
    transform-style: preserve-3d;
}


.csa-orbit-one {
    width: 620px;
    height: 620px;
    right: -250px;
    top: 20px;
    transform: rotateX(68deg) rotateZ(-15deg);
    animation: csaOrbitOne 25s linear infinite;
}


.csa-orbit-two {
    width: 380px;
    height: 380px;
    left: -180px;
    bottom: -150px;
    transform: rotateX(68deg) rotateZ(20deg);
    animation: csaOrbitTwo 20s linear infinite reverse;
}


.csa-orbit span {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: radial-gradient( circle at 30% 25%, #ffffff, #56e47f 38%, #087335 75% );
    box-shadow: 0 0 15px rgba(54,222,104,.8), 0 0 35px rgba(54,222,104,.25);
}


.csa-orbit-one span {
    left: 50%;
    top: -6px;
}


.csa-orbit-two span {
    right: -5px;
    bottom: 12%;
}


@keyframes csaOrbitOne {

    from {
        transform: rotateX(68deg) rotateZ(0deg);
    }

    to {
        transform: rotateX(68deg) rotateZ(360deg);
    }
}


@keyframes csaOrbitTwo {

    from {
        transform: rotateX(68deg) rotateZ(360deg);
    }

    to {
        transform: rotateX(68deg) rotateZ(0deg);
    }
}


/* =========================================================
   FLOATING DOTS
========================================================= */

.csa-floating-dot {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: radial-gradient( circle at 30% 25%, #ffffff, #52df7d 40%, #087335 );
    box-shadow: 0 0 15px rgba(55,215,101,.65);
    z-index: -3;
    pointer-events: none;
    animation: csaDotFloat 5s ease-in-out infinite;
}


.csa-dot-one {
    left: 12%;
    top: 20%;
}


.csa-dot-two {
    left: 47%;
    top: 12%;
    animation-delay: 1.3s;
}


.csa-dot-three {
    right: 9%;
    top: 28%;
    animation-delay: 2s;
}


.csa-dot-four {
    right: 25%;
    bottom: 12%;
    animation-delay: 3s;
}


@keyframes csaDotFloat {

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

    50% {
        transform: translateY(-22px) scale(1.35);
        opacity: 1;
    }
}


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

.csa-about-container {
    position: relative;
    width: min( 1320px, calc(100% - 60px) );
    margin: auto;
    z-index: 2;
}


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

.csa-about-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 35px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 4px;
    color: rgba(91,222,126,.78);
}


.csa-label-line {
    width: 55px;
    height: 1px;
    background: linear-gradient( 90deg, transparent, rgba(75,207,112,.7) );
}


.csa-label-line-right {
    background: linear-gradient( 90deg, rgba(75,207,112,.7), transparent );
}


/* =========================================================
   MAIN TWO COLUMN LAYOUT
========================================================= */

.csa-about-layout {
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    gap: 55px;
    align-items: center;
}


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

.csa-about-content {
    position: relative;
    z-index: 20;
    opacity: 0;
    transform: translateX(-45px);
    transition: opacity .9s ease, transform 1s cubic-bezier(.2,.8,.2,1);
}


    .csa-about-content.csa-visible {
        opacity: 1;
        transform: translateX(0);
    }


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

.csa-mini-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 3px;
    color: rgba(104,225,137,.85);
}


.csa-mini-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #42d975;
    box-shadow: 0 0 13px rgba(66,217,117,.8);
    animation: csaPulseDot 2s ease-in-out infinite;
}


@keyframes csaPulseDot {

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

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


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

.csa-about-content h2 {
    margin: 0;
    max-width: 620px;
    font-size: clamp( 42px, 5vw, 72px );
    letter-spacing: -1.5px;
    font-weight: 800;
    color: #effff4;
}


    .csa-about-content h2 span {
        display: inline-block;
        position: relative;
        background: linear-gradient( 90deg, #20a952, #67e58e );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }


        .csa-about-content h2 span::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -7px;
            height: 2px;
            background: linear-gradient( 90deg, #29b95d, transparent );
            transform-origin: left;
            animation: csaUnderline 3s ease-in-out infinite;
        }


@keyframes csaUnderline {

    0%, 100% {
        transform: scaleX(.25);
        opacity: .4;
    }

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


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

.csa-about-intro {
    max-width: 590px;
    margin: 26px 0 0;
    font-size: 16px;
    line-height: 1.75;
    color: rgba(224,242,229,.76);
}


    .csa-about-intro strong {
        color: #70e998;
        font-weight: 700;
    }


.csa-about-description {
    max-width: 590px;
    margin: 13px 0 0;
    font-size: 13px;
    line-height: 1.75;
    color: rgba(202,224,209,.53);
}


/* =========================================================
   SERVICE PILLS
========================================================= */

.csa-service-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 24px;
    max-width: 610px;
}


.csa-service-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 35px;
    padding: 0 12px 0 7px;
    border-radius: 50px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(104,219,135,.12);
    color: rgba(225,244,230,.72);
    font-size: 10px;
    font-weight: 600;
    backdrop-filter: blur(12px);
    transition: transform .35s ease, border-color .35s ease, background .35s ease;
}


    .csa-service-pill:hover {
        transform: translateY(-4px);
        border-color: rgba(74,218,113,.38);
        background: rgba(39,168,79,.09);
    }


.csa-pill-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #63e58b;
    background: rgba(51,193,91,.12);
    font-size: 11px;
}


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

.csa-about-stats {
    display: flex;
    align-items: center;
    margin-top: 32px;
    max-width: 580px;
}


.csa-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 27px;
    margin-right: 27px;
    border-right: 1px solid rgba(120,211,144,.14);
}


    .csa-stat:last-child {
        border-right: 0;
        margin-right: 0;
        padding-right: 0;
    }


    .csa-stat strong {
        font-size: 21px;
        color: #35c766;
        font-weight: 800;
    }


    .csa-stat span {
        font-size: 8px;
        line-height: 1.35;
        letter-spacing: .5px;
        color: rgba(211,235,218,.48);
        text-transform: uppercase;
    }


/* =========================================================
   3D VISUAL STAGE
========================================================= */

.csa-about-visual {
    position: relative;
    width: 100%;
    height: 555px;
    perspective: 1500px;
    transform-style: preserve-3d;
    opacity: 0;
    transform: translateX(45px) scale(.96);
    transition: opacity 1s ease, transform 1.1s cubic-bezier(.2,.8,.2,1);
}


    .csa-about-visual.csa-visible {
        opacity: 1;
        transform: translateX(0) scale(1);
    }


/* =========================================================
   3D FLOOR
========================================================= */

.csa-visual-floor {
    position: absolute;
    left: 50%;
    bottom: 20px;
    width: 500px;
    height: 260px;
    transform: translateX(-50%) rotateX(68deg) translateZ(-90px);
    border: 1px solid rgba(68,207,105,.18);
    border-radius: 50%;
    background: radial-gradient( ellipse, rgba(41,172,78,.18), transparent 67% );
    box-shadow: 0 0 80px rgba(31,168,74,.14);
    pointer-events: none;
    animation: csaFloorPulse 5s ease-in-out infinite;
}


@keyframes csaFloorPulse {

    0%, 100% {
        transform: translateX(-50%) rotateX(68deg) translateZ(-90px) scale(.94);
    }

    50% {
        transform: translateX(-50%) rotateX(68deg) translateZ(-90px) scale(1.05);
    }
}


/* =========================================================
   IMAGE CARD BASE
========================================================= */

.csa-image-card {
    position: absolute;
    overflow: hidden;
    border-radius: 24px;
    background: #10251a;
    border: 1px solid rgba(133,224,157,.25);
    box-shadow: 0 35px 70px rgba(0,0,0,.40), 0 0 35px rgba(24,158,70,.09), inset 0 1px 0 rgba(255,255,255,.12);
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform .22s ease-out, box-shadow .4s ease, filter .4s ease;
}


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

.csa-image-inner {
    position: absolute;
    inset: 0;
    overflow: hidden;
}


    .csa-image-inner::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        background: linear-gradient( 145deg, rgba(24,160,70,.22), transparent 38%, rgba(0,0,0,.42) );
        pointer-events: none;
    }


    .csa-image-inner::after {
        content: "";
        position: absolute;
        left: -120%;
        top: 0;
        width: 70%;
        height: 100%;
        z-index: 3;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.11), transparent );
        transform: skewX(-18deg);
        animation: csaImageShine 6s ease-in-out infinite;
        pointer-events: none;
    }


@keyframes csaImageShine {

    0%, 55% {
        left: -120%;
    }

    75%, 100% {
        left: 150%;
    }
}


.csa-image-inner img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: saturate(.88) contrast(1.05) brightness(.86);
    transition: transform .8s ease, filter .8s ease;
}


.csa-image-card:hover
.csa-image-inner img {
    transform: scale(1.07);
    filter: saturate(1) contrast(1.06) brightness(.94);
}


/* =========================================================
   LEFT IMAGE
   IMPORTANT: CLEARLY VISIBLE
========================================================= */

.csa-image-secondary {
    width: 235px;
    height: 325px;
    left: 0;
    top: 112px;
    z-index: 3;
    opacity: .95;
    transform: translate3d(0,0,20px) rotateY(13deg) rotateZ(-5deg);
    transform-origin: right center;
}


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

.csa-image-main {
    width: 300px;
    height: 405px;
    left: 50%;
    top: 72px;
    z-index: 8;
    transform: translate3d(-50%,0,100px) rotateY(-4deg) rotateX(2deg);
    transform-origin: center center;
}


    .csa-image-main:hover {
        box-shadow: 0 45px 90px rgba(0,0,0,.48), 0 0 55px rgba(38,190,86,.20);
    }


/* =========================================================
   RIGHT IMAGE
   IMPORTANT: CLEARLY VISIBLE
========================================================= */

.csa-image-tertiary {
    width: 235px;
    height: 325px;
    right: 0;
    bottom: 68px;
    z-index: 4;
    opacity: .95;
    transform: translate3d(0,0,35px) rotateY(-13deg) rotateZ(5deg);
    transform-origin: left center;
}


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

.csa-image-caption {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 14px;
    background: rgba(4,20,12,.82);
    border: 1px solid rgba(143,235,164,.17);
    backdrop-filter: blur(14px);
    z-index: 10;
    transform: translateZ(35px);
}


.csa-caption-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 9px;
    color: #6aeb91;
    background: rgba(51,190,90,.14);
    font-size: 14px;
}


.csa-image-caption small {
    display: block;
    font-size: 7px;
    letter-spacing: 1.5px;
    color: rgba(216,240,222,.48);
    margin-bottom: 3px;
}


.csa-image-caption strong {
    display: block;
    font-size: 11px;
    color: #effff3;
}


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

.csa-floating-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 10;
    padding: 6px 10px;
    border-radius: 50px;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: #75ed99;
    background: rgba(3,20,11,.78);
    border: 1px solid rgba(95,222,125,.23);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 20px rgba(0,0,0,.2);
}


/* =========================================================
   3D CORE
========================================================= */

.csa-core {
    position: absolute;
    left: 50%;
    top: 51%;
    width: 88px;
    height: 88px;
    z-index: 12;
    transform: translate(-50%,-50%) translateZ(150px);
    transform-style: preserve-3d;
    pointer-events: none;
}


.csa-core-center {
    position: absolute;
    inset: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient( circle at 30% 25%, #6ef399, #159447 45%, #063c20 85% );
    border: 1px solid rgba(191,255,208,.45);
    box-shadow: 0 0 25px rgba(47,213,98,.6), 0 0 65px rgba(39,183,82,.28), inset 0 4px 10px rgba(255,255,255,.25);
    transform: translateZ(20px);
    animation: csaCoreFloat 4s ease-in-out infinite;
}


    .csa-core-center span {
        font-size: 17px;
        font-weight: 900;
        color: white;
        letter-spacing: -1px;
    }


.csa-core-ring {
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(84,222,119,.38);
    border-radius: 50%;
    transform-style: preserve-3d;
}


.csa-core-ring-one {
    transform: rotateX(67deg);
    animation: csaRingRotate 5s linear infinite;
}


.csa-core-ring-two {
    transform: rotateY(67deg);
    animation: csaRingRotateReverse 7s linear infinite;
}


@keyframes csaRingRotate {

    from {
        transform: rotateX(67deg) rotateZ(0);
    }

    to {
        transform: rotateX(67deg) rotateZ(360deg);
    }
}


@keyframes csaRingRotateReverse {

    from {
        transform: rotateY(67deg) rotateZ(360deg);
    }

    to {
        transform: rotateY(67deg) rotateZ(0);
    }
}


@keyframes csaCoreFloat {

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

    50% {
        transform: translateZ(35px) translateY(-5px);
    }
}


/* =========================================================
   VISUAL INFO CARD
========================================================= */

.csa-visual-info {
    position: absolute;
    right: 0;
    top: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 13px;
    border-radius: 14px;
    background: rgba(7,27,16,.86);
    border: 1px solid rgba(108,221,137,.20);
    backdrop-filter: blur(15px);
    box-shadow: 0 20px 40px rgba(0,0,0,.28);
    z-index: 15;
    animation: csaInfoFloat 4.5s ease-in-out infinite;
}


@keyframes csaInfoFloat {

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

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


.csa-info-number {
    width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #65e98d;
    background: rgba(47,189,87,.13);
    font-size: 8px;
    font-weight: 900;
}


.csa-visual-info small {
    display: block;
    font-size: 7px;
    letter-spacing: 1.5px;
    color: rgba(216,240,222,.42);
    margin-bottom: 3px;
}


.csa-visual-info strong {
    display: block;
    font-size: 11px;
    color: #effff3;
}


/* =========================================================
   CONNECTION DOTS
========================================================= */

.csa-connect {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #57df80;
    box-shadow: 0 0 14px rgba(67,221,111,.85);
    z-index: 13;
    animation: csaConnectPulse 2.5s ease-in-out infinite;
}


.csa-connect-one {
    left: 18%;
    top: 49%;
}


.csa-connect-two {
    right: 20%;
    top: 31%;
    animation-delay: .8s;
}


.csa-connect-three {
    right: 15%;
    bottom: 27%;
    animation-delay: 1.4s;
}


@keyframes csaConnectPulse {

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

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


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

.csa-connect-line {
    position: absolute;
    height: 1px;
    transform-origin: left center;
    background: linear-gradient( 90deg, rgba(80,218,117,.5), transparent );
    z-index: 2;
    opacity: .5;
}


.csa-connect-line-one {
    width: 115px;
    left: 18%;
    top: 49%;
    transform: rotate(-15deg);
}


.csa-connect-line-two {
    width: 105px;
    right: 14%;
    bottom: 27%;
    transform: rotate(-35deg);
}


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

.csa-value-strip {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 58px;
    padding: 20px 25px;
    border-radius: 20px;
    background: linear-gradient( 110deg, rgba(255,255,255,.045), rgba(38,159,75,.045) );
    border: 1px solid rgba(102,207,129,.12);
    backdrop-filter: blur(16px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 25px 50px rgba(0,0,0,.16);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .8s ease .2s, transform .8s ease .2s;
}


    .csa-value-strip.csa-visible {
        opacity: 1;
        transform: translateY(0);
    }


.csa-value-item {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 48px;
    padding: 0 20px;
    border-right: 1px solid rgba(109,207,132,.12);
}


    .csa-value-item:last-child {
        border-right: 0;
    }


.csa-value-number {
    font-size: 10px;
    font-weight: 900;
    color: #39c768;
}


.csa-value-item strong {
    display: block;
    font-size: 11px;
    color: rgba(236,250,240,.86);
    margin-bottom: 3px;
}


.csa-value-item span {
    display: block;
    font-size: 8px;
    color: rgba(197,224,204,.42);
}


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

@media (max-width: 1100px) {

    .csa-about-section {
        padding: 85px 0 60px;
    }


    .csa-about-container {
        width: min( 94%, 980px );
    }


    .csa-about-layout {
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }


    .csa-about-content h2 {
        font-size: clamp( 40px, 5vw, 58px );
    }


    .csa-about-visual {
        height: 500px;
    }


    .csa-image-main {
        width: 275px;
        height: 370px;
    }


    .csa-image-secondary {
        width: 205px;
        height: 285px;
        left: 0;
    }


    .csa-image-tertiary {
        width: 205px;
        height: 285px;
        right: 0;
    }


    .csa-visual-info {
        right: 0;
    }


    .csa-value-strip {
        margin-top: 45px;
    }
}


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

@media (max-width: 820px) {

    .csa-about-section {
        padding: 75px 0 55px;
    }


    .csa-about-layout {
        grid-template-columns: 1fr;
    }


    .csa-about-content {
        text-align: center;
    }


    .csa-mini-title {
        justify-content: center;
    }


    .csa-about-content h2 {
        max-width: 700px;
        margin: 0 auto;
    }


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


    .csa-service-pills {
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }


    .csa-about-stats {
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }


    /* VISUAL */

    .csa-about-visual {
        width: 100%;
        max-width: 620px;
        height: 520px;
        margin: 20px auto 0;
    }


    .csa-image-main {
        width: 285px;
        height: 380px;
        top: 75px;
    }


    .csa-image-secondary {
        width: 205px;
        height: 290px;
        left: 0;
        top: 125px;
    }


    .csa-image-tertiary {
        width: 205px;
        height: 290px;
        right: 0;
        bottom: 60px;
    }


    .csa-value-strip {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }


    .csa-value-item {
        border-right: 0;
        padding: 10px 15px;
    }
}


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

@media (max-width: 600px) {

    .csa-about-section {
        padding: 58px 0 42px;
        min-height: auto;
    }


    .csa-about-container {
        width: calc(100% - 28px);
    }


    .csa-about-label {
        margin-bottom: 25px;
        font-size: 8px;
        letter-spacing: 2.5px;
        gap: 9px;
    }


    .csa-label-line {
        width: 25px;
    }


    .csa-about-content h2 {
        font-size: clamp( 34px, 10vw, 46px );
        letter-spacing: -2px;
    }


    .csa-about-intro {
        font-size: 13px;
        line-height: 1.65;
        margin-top: 19px;
    }


    .csa-about-description {
        font-size: 11px;
        line-height: 1.7;
    }


    .csa-service-pills {
        gap: 7px;
        margin-top: 20px;
    }


    .csa-service-pill {
        min-height: 32px;
        padding: 0 9px 0 6px;
        font-size: 8px;
    }


    .csa-pill-icon {
        width: 20px;
        height: 20px;
        font-size: 9px;
    }


    .csa-about-stats {
        margin-top: 25px;
    }


    .csa-stat {
        padding-right: 13px;
        margin-right: 13px;
        gap: 6px;
    }


        .csa-stat strong {
            font-size: 16px;
        }


        .csa-stat span {
            font-size: 6.5px;
        }


    /* =====================================================
       MOBILE 3 IMAGE STAGE
    ===================================================== */

    .csa-about-visual {
        height: 455px;
        margin-top: 22px;
        max-width: 100%;
    }


    /* LEFT */

    .csa-image-secondary {
        width: 128px;
        height: 185px;
        left: 0;
        top: 125px;
        transform: translate3d(0,0,15px) rotateY(8deg) rotateZ(-5deg);
    }


    /* CENTER */

    .csa-image-main {
        width: 205px;
        height: 285px;
        left: 50%;
        top: 72px;
        transform: translate3d(-50%,0,80px) rotateY(-3deg) rotateX(2deg);
    }


    /* RIGHT */

    .csa-image-tertiary {
        width: 128px;
        height: 180px;
        right: 0;
        bottom: 55px;
        transform: translate3d(0,0,25px) rotateY(-8deg) rotateZ(5deg);
    }


    /* CORE */

    .csa-core {
        width: 62px;
        height: 62px;
        top: 52%;
        left: 50%;
    }


    .csa-core-center {
        inset: 15px;
    }


        .csa-core-center span {
            font-size: 12px;
        }


    /* INFO */

    .csa-visual-info {
        right: 0;
        top: 8px;
        padding: 7px 9px;
    }


    .csa-info-number {
        width: 23px;
        height: 23px;
    }


    .csa-visual-info strong {
        font-size: 9px;
    }


    .csa-visual-info small {
        font-size: 6px;
    }


    /* CAPTION */

    .csa-image-caption {
        left: 8px;
        right: 8px;
        bottom: 8px;
        padding: 7px;
        gap: 7px;
    }


    .csa-caption-icon {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }


    .csa-image-caption strong {
        font-size: 8px;
    }


    .csa-image-caption small {
        font-size: 5px;
    }


    .csa-floating-tag {
        font-size: 5px;
        top: 8px;
        left: 8px;
        padding: 5px 7px;
    }


    .csa-visual-floor {
        width: 310px;
        height: 170px;
        bottom: 15px;
    }


    .csa-connect-line {
        display: none;
    }


    /* VALUE */

    .csa-value-strip {
        grid-template-columns: 1fr;
        margin-top: 28px;
        padding: 12px;
    }


    .csa-value-item {
        min-height: 50px;
        border-bottom: 1px solid rgba(109,207,132,.10);
        padding: 9px 6px;
    }


        .csa-value-item:last-child {
            border-bottom: 0;
        }


        .csa-value-item strong {
            font-size: 10px;
        }


        .csa-value-item span {
            font-size: 7px;
        }


    .csa-orbit-one {
        width: 350px;
        height: 350px;
        right: -190px;
    }


    .csa-orbit-two {
        width: 250px;
        height: 250px;
        left: -160px;
    }


    .csa-bg-grid {
        opacity: .08;
        background-size: 38px 38px;
    }
}


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

@media (max-width: 390px) {

    .csa-about-content h2 {
        font-size: 32px;
    }


    .csa-about-intro {
        font-size: 12px;
    }


    .csa-about-visual {
        height: 420px;
    }


    .csa-image-main {
        width: 190px;
        height: 265px;
        top: 68px;
    }


    .csa-image-secondary {
        width: 112px;
        height: 165px;
        left: -2px;
        top: 122px;
    }


    .csa-image-tertiary {
        width: 112px;
        height: 160px;
        right: -2px;
        bottom: 48px;
    }


    .csa-core {
        width: 57px;
        height: 57px;
    }


    .csa-core-center {
        inset: 14px;
    }
}


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

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

    .csa-bg-grid,
    .csa-glow,
    .csa-orbit,
    .csa-floating-dot,
    .csa-mini-dot,
    .csa-about-content h2 span::after,
    .csa-core-center,
    .csa-core-ring,
    .csa-visual-info,
    .csa-connect,
    .csa-visual-floor,
    .csa-image-inner::after {
        animation: none !important;
    }


    .csa-about-content,
    .csa-about-visual,
    .csa-value-strip {
        transition: none !important;
        opacity: 1;
        transform: none;
    }
}






/* =========================================================
   CHRONICAL SOLUTIONS
   VISION + MISSION
   UNIQUE PREFIX: CVM
========================================================= */

.cvm-section {
    --cvm-green: #129447;
    --cvm-green-dark: #075d2c;
    --cvm-green-light: #55d77c;
    --cvm-dark: #10241a;
    --cvm-text: #234136;
    position: relative;
    width: 100%;
    padding: 21px 0 45px;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient( circle at 50% 45%, rgba(78, 214, 116, .13), transparent 31% ), linear-gradient( 180deg, #f9fdfb 0%, #f0f9f3 53%, #ffffff 100% );
    color: var(--cvm-text);
}


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

.cvm-container {
    position: relative;
    width: min(1400px, calc(100% - 70px));
    margin: auto;
    z-index: 5;
}


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

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

.cvm-bg-glow-1 {
    width: 620px;
    height: 620px;
    left: -250px;
    top: 80px;
    background: radial-gradient( circle, rgba(49, 192, 91, .15), transparent 70% );
    animation: cvmGlowFloat 9s ease-in-out infinite;
}

.cvm-bg-glow-2 {
    width: 650px;
    height: 650px;
    right: -280px;
    top: 100px;
    background: radial-gradient( circle, rgba(54, 196, 95, .13), transparent 70% );
    animation: cvmGlowFloat 11s ease-in-out infinite reverse;
}


@keyframes cvmGlowFloat {

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

    50% {
        transform: translate3d(0, -20px, 0) scale(1.08);
    }
}


/* =========================================================
   3D FLOOR GRID
========================================================= */

.cvm-grid-floor {
    position: absolute;
    width: 100%;
    height: 320px;
    left: 0;
    bottom: -130px;
    opacity: .32;
    background-image: linear-gradient( rgba(41, 164, 77, .12) 1px, transparent 1px ), linear-gradient( 90deg, rgba(41, 164, 77, .12) 1px, transparent 1px );
    background-size: 55px 55px;
    transform: perspective(500px) rotateX(62deg) scale(1.3);
    transform-origin: center bottom;
    mask-image: linear-gradient( to top, black, transparent );
    pointer-events: none;
    z-index: -6;
}


/* =========================================================
   FLOWING 3D LINES
========================================================= */

.cvm-flow {
    position: absolute;
    width: 850px;
    height: 220px;
    border: 2px solid rgba(47, 184, 85, .13);
    border-left-color: transparent;
    border-right-color: transparent;
    border-radius: 50%;
    pointer-events: none;
    z-index: -5;
    filter: blur(.2px);
}

.cvm-flow-1 {
    left: -180px;
    bottom: 70px;
    transform: rotate(-12deg) perspective(500px) rotateX(35deg);
    animation: cvmFlowMove 8s ease-in-out infinite;
}

.cvm-flow-2 {
    right: -200px;
    bottom: 110px;
    transform: rotate(10deg) perspective(500px) rotateX(35deg);
    animation: cvmFlowMove 10s ease-in-out infinite reverse;
}

.cvm-flow-3 {
    width: 1000px;
    left: 50%;
    bottom: -50px;
    transform: translateX(-50%) rotateX(55deg);
    border-color: rgba(51, 184, 88, .09);
    animation: cvmFlowPulse 7s ease-in-out infinite;
}


@keyframes cvmFlowMove {

    0%, 100% {
        transform: translateY(0) rotate(-12deg) rotateX(35deg);
    }

    50% {
        transform: translateY(-15px) rotate(-8deg) rotateX(35deg);
    }
}


@keyframes cvmFlowPulse {

    0%, 100% {
        opacity: .3;
        transform: translateX(-50%) rotateX(55deg) scale(.95);
    }

    50% {
        opacity: .75;
        transform: translateX(-50%) rotateX(55deg) scale(1.05);
    }
}


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

.cvm-particle {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: radial-gradient( circle at 30% 25%, #ffffff, #72df92 38%, #159044 80% );
    box-shadow: 0 0 15px rgba(40, 181, 79, .45), 0 0 35px rgba(40, 181, 79, .15);
    pointer-events: none;
    z-index: -2;
    animation: cvmParticleFloat 5s ease-in-out infinite;
}

.cvm-particle-1 {
    left: 7%;
    top: 23%;
}

.cvm-particle-2 {
    left: 19%;
    top: 66%;
    animation-delay: 1.3s;
}

.cvm-particle-3 {
    right: 8%;
    top: 26%;
    animation-delay: 2s;
}

.cvm-particle-4 {
    right: 17%;
    top: 65%;
    animation-delay: 2.8s;
}

.cvm-particle-5 {
    left: 50%;
    top: 18%;
    width: 6px;
    height: 6px;
    animation-delay: .7s;
}

.cvm-particle-6 {
    right: 38%;
    bottom: 12%;
    width: 7px;
    height: 7px;
    animation-delay: 1.8s;
}


@keyframes cvmParticleFloat {

    0%, 100% {
        transform: translate3d(0, 0, 0) scale(.75);
        opacity: .45;
    }

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


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

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

.cvm-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 3.5px;
    color: #408866;
}

    .cvm-eyebrow span {
        width: 42px;
        height: 2px;
        border-radius: 20px;
        background: linear-gradient( 90deg, transparent, #37a963 );
    }

        .cvm-eyebrow span:last-child {
            background: linear-gradient( 90deg, #37a963, transparent );
        }


.cvm-heading h2 {
    margin: 0;
    font-size: clamp(42px, 5vw, 70px);
    line-height: .95;
    letter-spacing: -3px;
    font-weight: 900;
    color: #10251b;
}

    .cvm-heading h2 strong {
        color: var(--cvm-green);
        background: linear-gradient( 100deg, #075b2d, #12a34d, #45c86c );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }


.cvm-heading p {
    margin: 16px auto 0;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(31, 67, 48, .67);
}


/* =========================================================
   MAIN STAGE
========================================================= */

.cvm-main-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(270px, 1fr) minmax(430px, 1.35fr) minmax(270px, 1fr);
    align-items: center;
    gap: 25px;
    perspective: 1800px;
}


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

.cvm-info-card {
    position: relative;
    min-height: 405px;
    padding: 35px 32px 28px;
    border-radius: 28px;
    overflow: hidden;
    transform-style: preserve-3d;
    background: linear-gradient( 145deg, rgba(255,255,255,.92), rgba(239,250,243,.72) );
    border: 1px solid rgba(54,157,82,.18);
    box-shadow: 0 30px 65px rgba(25, 90, 46, .09), 0 8px 25px rgba(25, 90, 46, .05), inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(18px);
    opacity: 0;
    transform: translateY(45px) rotateX(8deg);
    transition: opacity .8s ease, transform .9s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
    will-change: transform;
}

    .cvm-info-card.cvm-visible {
        opacity: 1;
        transform: translateY(0) rotateX(0);
    }


/* Card decorative orb */

.cvm-card-orb {
    position: absolute;
    width: 190px;
    height: 190px;
    right: -90px;
    top: -90px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(44, 191, 82, .16), transparent 68% );
    filter: blur(5px);
    pointer-events: none;
    transition: transform .6s ease;
}

.cvm-info-card:hover .cvm-card-orb {
    transform: scale(1.5);
}


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

.cvm-card-icon {
    position: relative;
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 21px;
    background: linear-gradient( 145deg, #f7fff8, #d9f4df );
    border: 1px solid rgba(42,157,73,.16);
    box-shadow: 0 14px 28px rgba(35,137,61,.13), inset 0 1px 0 #ffffff;
    transform: translateZ(45px);
    transition: transform .45s ease, box-shadow .45s ease;
}

    .cvm-card-icon::before {
        content: "";
        position: absolute;
        inset: 7px;
        border-radius: 17px;
        background: radial-gradient( circle, rgba(61,207,94,.16), transparent 70% );
    }

    .cvm-card-icon svg {
        position: relative;
        width: 36px;
        height: 36px;
        fill: none;
        stroke: #108641;
        stroke-width: 3;
        stroke-linecap: round;
        stroke-linejoin: round;
        z-index: 2;
    }

.cvm-info-card:hover .cvm-card-icon {
    transform: translateZ(65px) rotateY(8deg) rotateX(-5deg);
    box-shadow: 0 20px 35px rgba(35,137,61,.19), 0 0 28px rgba(60,205,92,.14);
}


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

.cvm-card-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2.4px;
    color: #23794a;
}

    .cvm-card-label span {
        width: 28px;
        height: 2px;
        border-radius: 10px;
        background: #35aa5f;
    }


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

.cvm-info-card h3 {
    position: relative;
    margin: 9px 0 0;
    font-size: 32px;
    line-height: 1;
    letter-spacing: -1.4px;
    color: #10251b;
    transform: translateZ(30px);
}

    .cvm-info-card h3 strong {
        color: #159447;
    }


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

.cvm-card-line {
    width: 54px;
    height: 3px;
    margin-top: 17px;
    border-radius: 20px;
    background: linear-gradient( 90deg, #0c7436, #55d77c );
}


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

.cvm-info-card p {
    position: relative;
    margin: 17px 0 0;
    max-width: 420px;
    font-size: 13px;
    line-height: 1.72;
    color: rgba(31, 62, 45, .70);
    transform: translateZ(25px);
}


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

.cvm-card-bottom {
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: 25px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

    .cvm-card-bottom span {
        font-size: 9px;
        line-height: 1.4;
        font-weight: 900;
        letter-spacing: 2px;
        color: rgba(46,133,76,.40);
    }

    .cvm-card-bottom b {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #ffffff;
        color: #168644;
        font-size: 21px;
        box-shadow: 0 9px 20px rgba(28,111,53,.11);
        transition: transform .35s ease;
    }

.cvm-info-card:hover .cvm-card-bottom b {
    transform: translateX(5px);
}


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

.cvm-world-stage {
    position: relative;
    height: 470px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
}


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

.cvm-world-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(34,166,76,.28);
    transform-style: preserve-3d;
    pointer-events: none;
}

.cvm-ring-outer {
    width: 410px;
    height: 205px;
    transform: rotateX(67deg) rotateZ(-12deg);
    animation: cvmRingRotate 12s linear infinite;
}

.cvm-ring-middle {
    width: 355px;
    height: 180px;
    transform: rotateX(69deg) rotateZ(25deg);
    border-color: rgba(40,185,82,.32);
    animation: cvmRingRotateReverse 9s linear infinite;
}

.cvm-ring-inner {
    width: 300px;
    height: 150px;
    transform: rotateX(72deg) rotateZ(-35deg);
    border-color: rgba(75,205,104,.22);
    animation: cvmRingPulse 5s ease-in-out infinite;
}


.cvm-world-ring span {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient( circle at 30% 25%, white, #55db78 40%, #0c7b38 80% );
    box-shadow: 0 0 18px rgba(42,190,81,.6);
}

.cvm-ring-outer span {
    top: -6px;
    left: 50%;
}

.cvm-ring-middle span {
    right: 7%;
    bottom: 12%;
}

.cvm-ring-inner span {
    left: 5%;
    bottom: 18%;
}


@keyframes cvmRingRotate {

    from {
        transform: rotateX(67deg) rotateZ(0deg);
    }

    to {
        transform: rotateX(67deg) rotateZ(360deg);
    }
}

@keyframes cvmRingRotateReverse {

    from {
        transform: rotateX(69deg) rotateZ(360deg);
    }

    to {
        transform: rotateX(69deg) rotateZ(0deg);
    }
}

@keyframes cvmRingPulse {

    0%,100% {
        opacity: .35;
        transform: rotateX(72deg) rotateZ(-35deg) scale(.92);
    }

    50% {
        opacity: .85;
        transform: rotateX(72deg) rotateZ(35deg) scale(1.05);
    }
}


/* =========================================================
   GLOBE
========================================================= */

.cvm-globe-wrap {
    position: relative;
    width: 270px;
    height: 270px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateZ(55px);
    z-index: 4;
}


.cvm-globe-glow {
    position: absolute;
    width: 270px;
    height: 270px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(38,194,83,.30), rgba(73,215,108,.10) 42%, transparent 72% );
    filter: blur(14px);
    animation: cvmGlobeGlow 4s ease-in-out infinite;
}


@keyframes cvmGlobeGlow {

    0%,100% {
        transform: scale(.92);
        opacity: .65;
    }

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


.cvm-globe {
    position: relative;
    width: 235px;
    height: 235px;
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient( circle at 32% 25%, rgba(255,255,255,.95), rgba(207,245,218,.88) 25%, rgba(101,209,126,.48) 52%, rgba(12,122,55,.65) 90% );
    border: 2px solid rgba(62,194,92,.38);
    box-shadow: inset -28px -20px 45px rgba(4,100,43,.28), inset 18px 12px 30px rgba(255,255,255,.8), 0 25px 45px rgba(22,117,53,.17);
    transform-style: preserve-3d;
    animation: cvmGlobeFloat 5s ease-in-out infinite;
}


@keyframes cvmGlobeFloat {

    0%,100% {
        transform: translateY(0) rotateY(-3deg);
    }

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


/* Globe latitude */

.cvm-globe-grid {
    position: absolute;
    inset: -12%;
    border-radius: 50%;
    border: 1px solid rgba(19,122,55,.22);
}

.cvm-grid-a {
    transform: rotateY(68deg) scaleX(.48);
}

.cvm-grid-b {
    transform: rotateX(67deg) scaleY(.45);
}


/* Artificial continents */

.cvm-continent {
    position: absolute;
    background: linear-gradient( 135deg, #4acb70, #087937 );
    filter: drop-shadow( 2px 4px 4px rgba(7,100,41,.17) );
    opacity: .82;
}

.cvm-continent-a {
    width: 76px;
    height: 105px;
    left: 63px;
    top: 48px;
    border-radius: 55% 35% 48% 38% / 35% 48% 45% 55%;
    transform: rotate(-18deg);
}

.cvm-continent-b {
    width: 54px;
    height: 72px;
    left: 120px;
    top: 125px;
    border-radius: 40% 55% 50% 40%;
    transform: rotate(24deg);
}

.cvm-continent-c {
    width: 36px;
    height: 45px;
    right: 35px;
    top: 62px;
    border-radius: 60% 40% 45% 50%;
    transform: rotate(-25deg);
}


/* Globe highlight */

.cvm-globe-highlight {
    position: absolute;
    width: 90px;
    height: 130px;
    left: 25px;
    top: 18px;
    border-radius: 50%;
    background: linear-gradient( 110deg, rgba(255,255,255,.45), transparent );
    filter: blur(3px);
    transform: rotate(-28deg);
}


/* =========================================================
   PEDESTAL
========================================================= */

.cvm-pedestal {
    position: absolute;
    width: 280px;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%) translateZ(20px);
    z-index: 3;
}

.cvm-pedestal-top {
    width: 100%;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient( 180deg, #f9fffa, #bdeec9 );
    border: 1px solid rgba(49,164,76,.2);
    box-shadow: 0 0 25px rgba(46,190,81,.20);
}

.cvm-pedestal-body {
    height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: -4px;
    background: linear-gradient( 180deg, #dff7e5, #b8e9c4 );
    border-left: 1px solid rgba(36,145,66,.18);
    border-right: 1px solid rgba(36,145,66,.18);
    color: #27784a;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
    white-space: nowrap;
}

    .cvm-pedestal-body i {
        font-style: normal;
        opacity: .4;
    }

.cvm-pedestal-bottom {
    height: 17px;
    margin-top: -3px;
    border-radius: 0 0 50% 50%;
    background: linear-gradient( 180deg, #c9efd3, #91dca5 );
}


/* =========================================================
   FLOATING VALUE PILLS
========================================================= */

.cvm-value-pill {
    position: absolute;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 118px;
    height: 42px;
    padding: 0 13px;
    border-radius: 50px;
    background: linear-gradient( 145deg, rgba(255,255,255,.96), rgba(244,252,247,.85) );
    border: 1px solid rgba(57,157,83,.15);
    box-shadow: 0 12px 28px rgba(32,111,56,.09), inset 0 1px 0 #ffffff;
    backdrop-filter: blur(12px);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #214d35;
    animation: cvmValueFloat 4s ease-in-out infinite;
}

.cvm-pill-icon {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e2f7e7;
}

    .cvm-pill-icon svg {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: #138541;
        stroke-width: 3;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


.cvm-value-people {
    top: 52px;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: .2s;
}

.cvm-value-innovation {
    left: 1%;
    top: 33%;
    animation-delay: .8s;
}

.cvm-value-excellence {
    right: 0;
    top: 33%;
    animation-delay: 1.4s;
}

.cvm-value-integrity {
    left: 7%;
    bottom: 20%;
    animation-delay: 2s;
}

.cvm-value-value {
    right: 5%;
    bottom: 20%;
    animation-delay: 2.7s;
}


@keyframes cvmValueFloat {

    0%,100% {
        margin-top: 0;
    }

    50% {
        margin-top: -9px;
    }
}


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

.cvm-bottom-values {
    position: relative;
    width: min(650px, 100%);
    margin: 20px auto 0;
    padding: 13px 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    border-radius: 50px;
    background: linear-gradient( 110deg, rgba(255,255,255,.90), rgba(239,250,243,.82) );
    border: 1px solid rgba(49,151,78,.15);
    box-shadow: 0 14px 35px rgba(27,100,48,.08), inset 0 1px 0 white;
    backdrop-filter: blur(14px);
}

.cvm-bottom-value {
    display: flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}

.cvm-bottom-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e3f7e8;
}

    .cvm-bottom-icon svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: #168545;
        stroke-width: 3;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.cvm-bottom-value span {
    font-size: 10px;
    font-weight: 800;
    color: #234b35;
}

.cvm-value-divider {
    width: 1px;
    height: 28px;
    background: rgba(41,128,65,.18);
}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.cvm-reveal {
    opacity: 0;
    transform: translateY(35px);
}

    .cvm-reveal.cvm-visible {
        opacity: 1;
        transform: translateY(0);
    }

.cvm-main-stage .cvm-vision-card {
    transition-delay: .05s;
}

.cvm-main-stage .cvm-world-stage {
    transition-delay: .18s;
}

.cvm-main-stage .cvm-mission-card {
    transition-delay: .30s;
}


/* =========================================================
   DESKTOP CARD HOVER
========================================================= */

@media (min-width: 1000px) {

    .cvm-info-card:hover {
        box-shadow: 0 35px 75px rgba(22,100,48,.14), 0 0 35px rgba(56,193,88,.08), inset 0 1px 0 white;
    }
}


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

@media (max-width: 1150px) {

    .cvm-section {
        padding: 65px 0 55px;
    }

    .cvm-container {
        width: min( 94%, 950px );
    }

    .cvm-main-stage {
        grid-template-columns: 1fr 1fr;
        gap: 22px;
    }

    .cvm-world-stage {
        grid-column: 1 / -1;
        grid-row: 1;
        height: 420px;
        max-width: 600px;
        width: 100%;
        margin: 0 auto;
    }

    .cvm-vision-card {
        grid-column: 1;
        grid-row: 2;
    }

    .cvm-mission-card {
        grid-column: 2;
        grid-row: 2;
    }

    .cvm-info-card {
        min-height: 360px;
    }
}


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

@media (max-width: 760px) {

    .cvm-section {
        padding: 55px 0 45px;
    }

    .cvm-container {
        width: calc(100% - 30px);
    }

    .cvm-heading {
        margin-bottom: 28px;
    }

        .cvm-heading h2 {
            font-size: clamp( 39px, 10vw, 55px );
            letter-spacing: -2px;
        }

        .cvm-heading p {
            font-size: 13px;
        }

    .cvm-main-stage {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .cvm-world-stage {
        order: 1;
        width: 100%;
        height: 390px;
    }

    .cvm-vision-card {
        order: 2;
        width: 100%;
    }

    .cvm-mission-card {
        order: 3;
        width: 100%;
    }

    .cvm-info-card {
        min-height: 340px;
        padding: 28px;
    }

    .cvm-bottom-values {
        margin-top: 18px;
        gap: 15px;
        padding: 12px 15px;
    }
}


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

@media (max-width: 600px) {

    .cvm-section {
        padding: 48px 0 38px;
    }

    .cvm-container {
        width: calc(100% - 24px);
    }

    .cvm-eyebrow {
        font-size: 8px;
        letter-spacing: 2.3px;
        gap: 8px;
    }

        .cvm-eyebrow span {
            width: 23px;
        }

    .cvm-heading h2 {
        font-size: 39px;
    }

    .cvm-heading p {
        margin-top: 12px;
        font-size: 12px;
        line-height: 1.55;
    }


    /* World */

    .cvm-world-stage {
        height: 355px;
    }

    .cvm-globe-wrap {
        width: 215px;
        height: 215px;
    }

    .cvm-globe {
        width: 185px;
        height: 185px;
    }

    .cvm-globe-glow {
        width: 220px;
        height: 220px;
    }

    .cvm-continent-a {
        width: 60px;
        height: 83px;
        left: 48px;
        top: 38px;
    }

    .cvm-continent-b {
        width: 43px;
        height: 58px;
        left: 94px;
        top: 100px;
    }

    .cvm-continent-c {
        width: 29px;
        height: 37px;
        right: 27px;
        top: 49px;
    }


    /* Rings */

    .cvm-ring-outer {
        width: 330px;
        height: 165px;
    }

    .cvm-ring-middle {
        width: 285px;
        height: 145px;
    }

    .cvm-ring-inner {
        width: 240px;
        height: 120px;
    }


    /* Pills */

    .cvm-value-pill {
        min-width: 90px;
        height: 34px;
        padding: 0 8px;
        gap: 5px;
        font-size: 6.5px;
        letter-spacing: .8px;
    }

    .cvm-pill-icon {
        width: 21px;
        height: 21px;
    }

        .cvm-pill-icon svg {
            width: 12px;
            height: 12px;
        }

    .cvm-value-people {
        top: 5px;
    }

    .cvm-value-innovation {
        left: 0;
        top: 34%;
    }

    .cvm-value-excellence {
        right: 0;
        top: 34%;
    }

    .cvm-value-integrity {
        left: 4%;
        bottom: 15%;
    }

    .cvm-value-value {
        right: 4%;
        bottom: 15%;
    }


    /* Pedestal */

    .cvm-pedestal {
        width: 215px;
        bottom: 27px;
    }

    .cvm-pedestal-body {
        font-size: 5.5px;
        gap: 4px;
    }


    /* Cards */

    .cvm-info-card {
        min-height: 330px;
        padding: 24px 22px 25px;
        border-radius: 23px;
    }

    .cvm-card-icon {
        width: 58px;
        height: 58px;
        border-radius: 17px;
    }

        .cvm-card-icon svg {
            width: 31px;
            height: 31px;
        }

    .cvm-card-label {
        margin-top: 22px;
        font-size: 8px;
        letter-spacing: 2px;
    }

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

    .cvm-info-card p {
        font-size: 12px;
        line-height: 1.65;
    }

    .cvm-card-bottom {
        left: 22px;
        right: 22px;
        bottom: 20px;
    }

        .cvm-card-bottom b {
            width: 36px;
            height: 36px;
        }


    /* Bottom values */

    .cvm-bottom-values {
        border-radius: 22px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
        padding: 14px 18px;
    }

    .cvm-bottom-value {
        justify-content: center;
    }

    .cvm-value-divider {
        width: 70%;
        height: 1px;
        margin: auto;
    }


    /* Background */

    .cvm-side-word {
        display: none;
    }

    .cvm-flow {
        opacity: .5;
    }
}


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

@media (max-width: 390px) {

    .cvm-heading h2 {
        font-size: 34px;
    }

    .cvm-world-stage {
        height: 330px;
    }

    .cvm-globe {
        width: 160px;
        height: 160px;
    }

    .cvm-globe-wrap {
        width: 190px;
        height: 190px;
    }

    .cvm-ring-outer {
        width: 290px;
        height: 145px;
    }

    .cvm-ring-middle {
        width: 250px;
        height: 125px;
    }

    .cvm-ring-inner {
        width: 210px;
        height: 105px;
    }

    .cvm-value-pill {
        min-width: 80px;
        height: 31px;
        font-size: 5.8px;
    }

    .cvm-info-card {
        min-height: 320px;
    }

        .cvm-info-card h3 {
            font-size: 25px;
        }
}


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

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

    .cvm-bg-glow,
    .cvm-flow,
    .cvm-particle,
    .cvm-world-ring,
    .cvm-globe,
    .cvm-globe-glow,
    .cvm-value-pill {
        animation: none !important;
    }

    .cvm-reveal,
    .cvm-info-card {
        transition: opacity .3s ease !important;
        transform: none !important;
    }
}
/* =========================================================
   CENTER TEXT INSIDE GLOBE
   UNIQUE PREFIX : CSA-VALUE-GLOBE
========================================================= */

.csa-value-globe-center {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    transform: translate(-50%, -50%) translateZ(80px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    transform-style: preserve-3d;
    pointer-events: none;
}


    /* =========================================================
   GLOWING CORE
========================================================= */

    .csa-value-globe-center::before {
        content: "";
        position: absolute;
        inset: 20px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(54, 214, 108, .35), rgba(17, 105, 53, .16) 45%, transparent 72% );
        filter: blur(8px);
        animation: csaValueCorePulse 3s ease-in-out infinite;
    }


/* =========================================================
   ROTATING RING
========================================================= */

.csa-value-globe-ring {
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    border: 1px solid rgba(76, 224, 124, .45);
    box-shadow: 0 0 20px rgba(39, 201, 94, .22), inset 0 0 20px rgba(39, 201, 94, .12);
    transform: rotateX(68deg);
    animation: csaValueRingRotate 7s linear infinite;
}


    /* SECOND RING */

    .csa-value-globe-ring::before {
        content: "";
        position: absolute;
        inset: 10px;
        border-radius: 50%;
        border: 1px dashed rgba(92, 230, 137, .35);
        transform: rotateY(72deg);
        animation: csaValueRingReverse 5s linear infinite;
    }


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

.csa-value-globe-content {
    position: relative;
    width: 95px;
    height: 95px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: radial-gradient( circle at 35% 25%, #55e78a, #159548 38%, #075528 72%, #032716 100% );
    border: 1px solid rgba(177, 255, 200, .45);
    box-shadow: 0 0 20px rgba(52, 220, 105, .55), 0 0 55px rgba(38, 192, 88, .28), inset 0 5px 12px rgba(255,255,255,.25), inset 0 -10px 18px rgba(0,0,0,.28);
    transform: translateZ(35px);
    animation: csaValueCenterFloat 4s ease-in-out infinite;
}


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

.csa-value-globe-mini {
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 2px;
    color: rgba(239,255,244,.72);
    margin-bottom: 4px;
}


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

.csa-value-globe-title {
    font-size: 19px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 1px;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0,0,0,.25);
}


/* =========================================================
   SUBTITLE
========================================================= */

.csa-value-globe-subtitle {
    margin-top: 7px;
    font-size: 5px;
    font-weight: 700;
    letter-spacing: 1px;
    color: rgba(226,255,235,.72);
    white-space: nowrap;
}


/* =========================================================
   CORE PULSE
========================================================= */

@keyframes csaValueCorePulse {

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

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


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

@keyframes csaValueRingRotate {

    0% {
        transform: rotateX(68deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(68deg) rotateZ(360deg);
    }
}


@keyframes csaValueRingReverse {

    0% {
        transform: rotateY(72deg) rotateZ(360deg);
    }

    100% {
        transform: rotateY(72deg) rotateZ(0deg);
    }
}


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

@keyframes csaValueCenterFloat {

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

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


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

@media (max-width: 900px) {

    .csa-value-globe-center {
        width: 125px;
        height: 125px;
        transform: translate(-50%, -50%) translateZ(60px);
    }

    .csa-value-globe-content {
        width: 82px;
        height: 82px;
    }

    .csa-value-globe-title {
        font-size: 16px;
    }

    .csa-value-globe-mini {
        font-size: 6px;
    }

    .csa-value-globe-subtitle {
        font-size: 4px;
    }
}


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

@media (max-width: 600px) {

    .csa-value-globe-center {
        width: 100px;
        height: 100px;
        transform: translate(-50%, -50%) translateZ(40px);
    }

    .csa-value-globe-ring {
        inset: 3px;
    }

    .csa-value-globe-content {
        width: 68px;
        height: 68px;
        transform: translateZ(25px);
    }

    .csa-value-globe-title {
        font-size: 13px;
    }

    .csa-value-globe-mini {
        font-size: 5px;
        letter-spacing: 1.3px;
        margin-bottom: 3px;
    }

    .csa-value-globe-subtitle {
        font-size: 3.5px;
        letter-spacing: .6px;
        margin-top: 5px;
    }
}
.csa-value-globe-title,
.csa-value-globe-subtitle {
    transition: opacity .35s ease, transform .35s ease;
}






/* =========================================================
   CHRONICAL SOLUTIONS
   CORE VALUES — 3D COMMAND CENTER
   UNIQUE PREFIX : CVA
========================================================= */

.cva-values-section {
    --cva-green: #29c866;
    --cva-bright: #6af29a;
    --cva-dark-green: #087b38;
    --cva-bg: #03100a;
    --cva-bg-2: #061a10;
    --cva-white: #f1fff5;
    --cva-muted: rgba(210,235,218,.58);
    position: relative;
    width: 100%;
    min-height: 850px;
    padding: 41px 0 0px;
    overflow: hidden;
    isolation: isolate;
    color: var(--cva-white);
    background: radial-gradient( circle at 50% 48%, rgba(24,155,71,.15), transparent 25% ), radial-gradient( circle at 5% 90%, rgba(17,121,57,.13), transparent 28% ), linear-gradient( 135deg, #020b06 0%, #061810 48%, #031009 100% );
}


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

.cva-bg-grid {
    position: absolute;
    inset: -30%;
    z-index: -10;
    opacity: .16;
    background-image: linear-gradient( rgba(74,204,111,.12) 1px, transparent 1px ), linear-gradient( 90deg, rgba(74,204,111,.12) 1px, transparent 1px );
    background-size: 60px 60px;
    transform: perspective(800px) rotateX(64deg) translateY(170px) scale(1.4);
    transform-origin: center bottom;
    animation: cvaGridMove 18s linear infinite;
}


@keyframes cvaGridMove {

    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 60px;
    }
}


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

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


.cva-bg-glow-a {
    width: 430px;
    height: 430px;
    left: 37%;
    top: 25%;
    background: rgba(30,188,82,.13);
    animation: cvaGlowA 8s ease-in-out infinite;
}


.cva-bg-glow-b {
    width: 320px;
    height: 320px;
    right: -90px;
    top: 10%;
    background: rgba(19,145,65,.11);
    animation: cvaGlowB 10s ease-in-out infinite;
}


.cva-bg-glow-c {
    width: 250px;
    height: 250px;
    left: -100px;
    bottom: 5%;
    background: rgba(39,178,83,.09);
    animation: cvaGlowB 12s ease-in-out infinite reverse;
}


@keyframes cvaGlowA {

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

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


@keyframes cvaGlowB {

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

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


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

.cva-bg-orbit {
    position: absolute;
    border: 1px solid rgba(71,210,112,.10);
    border-radius: 50%;
    pointer-events: none;
    z-index: -6;
}


.cva-bg-orbit-a {
    width: 700px;
    height: 700px;
    right: -300px;
    top: -260px;
    transform: rotateX(68deg) rotateZ(20deg);
    animation: cvaBackgroundOrbit 25s linear infinite;
}


.cva-bg-orbit-b {
    width: 470px;
    height: 470px;
    left: -230px;
    bottom: -270px;
    transform: rotateX(68deg) rotateZ(-25deg);
    animation: cvaBackgroundOrbit 19s linear infinite reverse;
}


@keyframes cvaBackgroundOrbit {

    from {
        transform: rotateX(68deg) rotateZ(0deg);
    }

    to {
        transform: rotateX(68deg) rotateZ(360deg);
    }
}


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

.cva-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient( circle at 30% 25%, #fff, #56e687 38%, #087335 80% );
    box-shadow: 0 0 16px rgba(69,224,117,.75);
    z-index: -2;
    animation: cvaParticleFloat 5s ease-in-out infinite;
}


.cva-particle-1 {
    left: 8%;
    top: 22%;
}

.cva-particle-2 {
    left: 28%;
    top: 14%;
    animation-delay: 1s;
}

.cva-particle-3 {
    right: 12%;
    top: 25%;
    animation-delay: 2s;
}

.cva-particle-4 {
    right: 7%;
    bottom: 20%;
    animation-delay: 1.5s;
}

.cva-particle-5 {
    left: 17%;
    bottom: 14%;
    animation-delay: 2.5s;
}

.cva-particle-6 {
    left: 55%;
    top: 10%;
    animation-delay: 3s;
}

.cva-particle-7 {
    right: 31%;
    bottom: 9%;
    animation-delay: 1.8s;
}


@keyframes cvaParticleFloat {

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

    50% {
        transform: translateY(-25px) scale(1.35);
        opacity: 1;
    }
}


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

.cva-container {
    position: relative;
    width: min( 1320px, calc(100% - 60px) );
    margin: auto;
    z-index: 2;
}


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

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


.cva-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    margin-bottom: 17px;
    color: rgba(99,227,135,.78);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 4px;
}


.cva-eyebrow-line {
    width: 48px;
    height: 1px;
    background: linear-gradient( 90deg, transparent, rgba(73,213,112,.7) );
}


.cva-eyebrow-line-right {
    background: linear-gradient( 90deg, rgba(73,213,112,.7), transparent );
}


.cva-heading h2 {
    margin: 0;
    font-size: clamp( 42px, 5vw, 68px );
    line-height: .98;
    letter-spacing: -3px;
    font-weight: 800;
    color: #f0fff4;
}


    .cva-heading h2 span {
        background: linear-gradient( 90deg, #20aa53, #68ec98 );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }


.cva-heading p {
    max-width: 560px;
    margin: 18px auto 0;
    font-size: 13px;
    line-height: 1.7;
    color: white;
}


/* =========================================================
   COMMAND STAGE
========================================================= */

.cva-command-stage {
    position: relative;
    display: grid;
    grid-template-columns: 205px minmax(430px, 1fr) 355px;
    align-items: center;
    gap: 35px;
    min-height: 520px;
    perspective: 1600px;
    transform-style: preserve-3d;
}


/* =========================================================
   LEFT NAV
========================================================= */

.cva-value-nav {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 10px;
    border-left: 1px solid rgba(91,216,125,.13);
    transform: translateZ(40px);
}


.cva-nav-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px 17px;
    border-bottom: 1px solid rgba(93,210,123,.10);
    margin-bottom: 7px;
}


    .cva-nav-heading span {
        font-size: 22px;
        font-weight: 900;
        color: rgba(70,211,112,.75);
    }


    .cva-nav-heading small {
        font-size:10px;
        letter-spacing: 2px;
        color: white;
    }


.cva-nav-item {
    position: relative;
    display: grid;
    grid-template-columns: 30px 1fr 22px;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: rgba(217,240,223,.52);
    text-align: left;
    cursor: pointer;
    transition: background .35s ease, border-color .35s ease, transform .35s ease, color .35s ease;
}


    .cva-nav-item:hover {
        transform: translateX(5px);
        color: #dfffea;
        background: rgba(47,181,84,.06);
        border-color: rgba(80,214,117,.10);
    }


    .cva-nav-item.cva-active {
        color: #effff4;
        background: linear-gradient( 110deg, rgba(43,185,84,.13), rgba(255,255,255,.025) );
        border-color: rgba(80,218,117,.20);
        box-shadow: 0 12px 30px rgba(0,0,0,.16);
    }


        .cva-nav-item.cva-active::before {
            content: "";
            position: absolute;
            left: -1px;
            top: 9px;
            bottom: 9px;
            width: 2px;
            border-radius: 4px;
            background: #4fe27e;
            box-shadow: 0 0 12px rgba(73,224,119,.7);
        }


.cva-nav-number {
    font-size: 8px;
    font-weight: 900;
    color: #35c968;
}


.cva-nav-name {
    font-size: 11px;
    font-weight: 700;
    color:white;
}


.cva-nav-arrow {
    font-size: 14px;
    opacity: .45;
    transition: transform .3s ease, opacity .3s ease;
}


.cva-nav-item:hover .cva-nav-arrow,
.cva-nav-item.cva-active .cva-nav-arrow {
    transform: translate(2px,-2px);
    opacity: 1;
    color: #65e891;
}


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

.cva-core-stage {
    position: relative;
    height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    transition: transform .18s ease-out;
}


/* =========================================================
   FLOOR
========================================================= */

.cva-core-floor {
    position: absolute;
    width: 430px;
    height: 190px;
    left: 50%;
    bottom: 42px;
    transform: translateX(-50%) rotateX(70deg);
    border-radius: 50%;
    border: 1px solid rgba(65,210,108,.18);
    background: radial-gradient( ellipse, rgba(38,184,82,.18), transparent 68% );
    box-shadow: 0 0 80px rgba(30,178,76,.12);
    animation: cvaFloorAnimation 5s ease-in-out infinite;
}


@keyframes cvaFloorAnimation {

    0%, 100% {
        transform: translateX(-50%) rotateX(70deg) scale(.94);
    }

    50% {
        transform: translateX(-50%) rotateX(70deg) scale(1.07);
    }
}


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

.cva-core-orbit {
    position: absolute;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(71,218,116,.25);
    border-radius: 50%;
    transform-style: preserve-3d;
    pointer-events: none;
}


.cva-core-orbit-1 {
    transform: rotateX(70deg) rotateZ(20deg);
    animation: cvaOrbitRotate1 9s linear infinite;
}


.cva-core-orbit-2 {
    width: 350px;
    height: 350px;
    transform: rotateY(67deg) rotateZ(-20deg);
    animation: cvaOrbitRotate2 12s linear infinite reverse;
}


.cva-core-orbit-3 {
    width: 245px;
    height: 245px;
    transform: rotateX(55deg) rotateY(30deg);
    border-style: dashed;
    opacity: .55;
    animation: cvaOrbitRotate3 7s linear infinite;
}


.cva-core-orbit span {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient( circle at 30% 25%, white, #62eb91 40%, #0a7736 80% );
    box-shadow: 0 0 15px rgba(76,231,122,.9);
}


.cva-core-orbit-1 span {
    top: -4px;
    left: 50%;
}


.cva-core-orbit-2 span {
    right: -4px;
    top: 50%;
}


.cva-core-orbit-3 span {
    bottom: 8%;
    left: 8%;
}


@keyframes cvaOrbitRotate1 {

    from {
        transform: rotateX(70deg) rotateZ(0);
    }

    to {
        transform: rotateX(70deg) rotateZ(360deg);
    }
}


@keyframes cvaOrbitRotate2 {

    from {
        transform: rotateY(67deg) rotateZ(360deg);
    }

    to {
        transform: rotateY(67deg) rotateZ(0);
    }
}


@keyframes cvaOrbitRotate3 {

    from {
        transform: rotateX(55deg) rotateY(30deg) rotateZ(0);
    }

    to {
        transform: rotateX(55deg) rotateY(30deg) rotateZ(360deg);
    }
}


/* =========================================================
   CENTRAL CORE
========================================================= */

.cva-central-core {
    position: relative;
    width: 205px;
    height: 205px;
    transform-style: preserve-3d;
    z-index: 10;
    animation: cvaCoreFloat 5s ease-in-out infinite;
}


@keyframes cvaCoreFloat {

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

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


/* =========================================================
   CORE HALO
========================================================= */

.cva-core-halo {
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(74,232,125,.30), transparent 65% );
    filter: blur(12px);
    animation: cvaHaloPulse 3s ease-in-out infinite;
}


@keyframes cvaHaloPulse {

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

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


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

.cva-core-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(94,234,136,.45);
    transform-style: preserve-3d;
}


.cva-core-ring-a {
    inset: -13px;
    transform: rotateX(72deg);
    animation: cvaRingA 6s linear infinite;
}


.cva-core-ring-b {
    inset: -24px;
    transform: rotateY(68deg);
    opacity: .65;
    animation: cvaRingB 8s linear infinite reverse;
}


.cva-core-ring-c {
    inset: -36px;
    transform: rotateX(58deg) rotateY(25deg);
    border-style: dashed;
    opacity: .32;
    animation: cvaRingC 14s linear infinite;
}


@keyframes cvaRingA {

    from {
        transform: rotateX(72deg) rotateZ(0);
    }

    to {
        transform: rotateX(72deg) rotateZ(360deg);
    }
}


@keyframes cvaRingB {

    from {
        transform: rotateY(68deg) rotateZ(360deg);
    }

    to {
        transform: rotateY(68deg) rotateZ(0);
    }
}


@keyframes cvaRingC {

    from {
        transform: rotateX(58deg) rotateY(25deg) rotateZ(0);
    }

    to {
        transform: rotateX(58deg) rotateY(25deg) rotateZ(360deg);
    }
}


/* =========================================================
   SPHERE
========================================================= */

.cva-core-sphere {
    position: absolute;
    inset: 35px;
    border-radius: 50%;
    background: radial-gradient( circle at 28% 20%, #8affad 0%, #42d975 18%, #159447 48%, #075326 78%, #021b0d 100% );
    border: 1px solid rgba(185,255,204,.48);
    box-shadow: 0 0 30px rgba(46,216,102,.55), 0 0 85px rgba(30,184,80,.25), inset 10px 10px 25px rgba(255,255,255,.18), inset -15px -15px 25px rgba(0,0,0,.35);
    transform: translateZ(45px);
    overflow: hidden;
}


/* =========================================================
   SPHERE SHINE
========================================================= */

.cva-sphere-shine {
    position: absolute;
    width: 80px;
    height: 35px;
    left: 20px;
    top: 14px;
    border-radius: 50%;
    background: rgba(255,255,255,.26);
    filter: blur(10px);
    transform: rotate(-25deg);
}


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

.cva-sphere-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    text-shadow: 0 2px 8px rgba(0,0,0,.3);
}


    .cva-sphere-content small {
        font-size: 6px;
        letter-spacing: 2px;
        opacity: .65;
        margin-bottom: 2px;
    }


    .cva-sphere-content strong {
        font-size: 40px;
        line-height: 1;
        font-weight: 900;
        letter-spacing: -2px;
    }


    .cva-sphere-content span {
        margin-top: 5px;
        font-size: 6px;
        letter-spacing: 3px;
        opacity: .7;
    }


/* =========================================================
   ENERGY LINES
========================================================= */

.cva-energy-line {
    position: absolute;
    height: 1px;
    transform-origin: left center;
    background: linear-gradient( 90deg, transparent, rgba(66,224,113,.45), transparent );
    opacity: .55;
    z-index: 2;
    animation: cvaEnergyPulse 3s ease-in-out infinite;
}


.cva-energy-line-1 {
    width: 145px;
    left: 12%;
    top: 42%;
    transform: rotate(-13deg);
}


.cva-energy-line-2 {
    width: 125px;
    right: 12%;
    top: 37%;
    transform: rotate(13deg);
}


.cva-energy-line-3 {
    width: 120px;
    left: 18%;
    bottom: 32%;
    transform: rotate(14deg);
}


.cva-energy-line-4 {
    width: 145px;
    right: 15%;
    bottom: 27%;
    transform: rotate(-14deg);
}


@keyframes cvaEnergyPulse {

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

    50% {
        opacity: .75;
    }
}


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

.cva-floating-label {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border-radius: 50px;
    background: rgba(4,24,14,.72);
    border: 1px solid rgba(94,222,126,.15);
    backdrop-filter: blur(12px);
    color: white;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    box-shadow: 0 15px 35px rgba(0,0,0,.18);
    z-index: 15;
    animation: cvaLabelFloat 4s ease-in-out infinite;
}


    .cva-floating-label span {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #4ce07b;
        box-shadow: 0 0 10px #4ce07b;
    }


.cva-floating-label-a {
    left: 5%;
    top: 22%;
}


.cva-floating-label-b {
    right: 7%;
    top: 22%;
    animation-delay: 1s;
}


.cva-floating-label-c {
    right: 14%;
    bottom: 18%;
    animation-delay: 2s;
}


@keyframes cvaLabelFloat {

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

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


/* =========================================================
   RIGHT INFO PANEL
========================================================= */

.cva-info-panel {
    position: relative;
    min-height: 390px;
    padding: 27px;
    border-radius: 26px;
    background: linear-gradient( 145deg, rgba(18,48,31,.70), rgba(4,23,14,.72) );
    border: 1px solid rgba(119,229,148,.16);
    backdrop-filter: blur(20px);
    box-shadow: 0 35px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.07);
    transform: translateZ(55px) rotateY(-3deg);
    overflow: hidden;
    transition: transform .5s ease;
}


    .cva-info-panel::before {
        content: "";
        position: absolute;
        width: 180px;
        height: 180px;
        right: -90px;
        top: -90px;
        border-radius: 50%;
        background: rgba(53,205,99,.10);
        filter: blur(20px);
    }


    .cva-info-panel:hover {
        transform: translateZ(70px) rotateY(0);
    }


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

.cva-panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(105,218,132,.10);
}


.cva-panel-index {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #54dc7e;
}


.cva-panel-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px;
    color: white;
}


    .cva-panel-status i {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #4de17b;
        box-shadow: 0 0 10px rgba(77,225,123,.9);
    }


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

.cva-panel-icon {
    width: 54px;
    height: 54px;
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: linear-gradient( 145deg, rgba(75,220,116,.20), rgba(22,130,59,.08) );
    border: 1px solid rgba(98,227,137,.18);
    color: #65e98e;
    font-size: 23px;
    box-shadow: 0 0 25px rgba(37,190,85,.08);
}


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

.cva-panel-content {
    margin-top: 24px;
}


    .cva-panel-content small {
        display: block;
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 2px;
        color:white;
        margin-bottom: 8px;
    }


    .cva-panel-content h3 {
        margin: 0;
        font-size: 35px;
        line-height: 1;
        letter-spacing: -1.5px;
        color: #effff4;
        font-weight: 800;
        transition: opacity .25s ease, transform .25s ease;
    }


    .cva-panel-content p {
        max-width: 290px;
        margin: 15px 0 0;
        font-size: 11px;
        line-height: 1.8;
        color:white;
        transition: opacity .25s ease, transform .25s ease;
    }


/* =========================================================
   DIVIDER
========================================================= */

.cva-panel-divider {
    width: 100%;
    height: 1px;
    margin-top: 25px;
    background: linear-gradient( 90deg, rgba(82,219,118,.20), transparent );
}


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

.cva-panel-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 19px;
}


    .cva-panel-bottom span {
        display: block;
        font-size: 8px;
        color: white;
        margin-bottom: 4px;
    }


    .cva-panel-bottom strong {
        font-size: 10px;
        color: #67e993;
        letter-spacing: .5px;
    }


.cva-panel-arrow {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(49,194,91,.10);
    border: 1px solid rgba(87,220,119,.14);
    color: #65e990;
    font-size: 16px;
}


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

.cva-panel-progress {
    display: flex;
    gap: 5px;
    margin-top: 25px;
}


    .cva-panel-progress span {
        height: 2px;
        flex: 1;
        border-radius: 10px;
        background: rgba(102,216,130,.12);
        transition: background .3s ease;
    }


        .cva-panel-progress span.cva-progress-active {
            background: #50df7c;
            box-shadow: 0 0 10px rgba(80,223,124,.55);
        }


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

.cva-bottom-track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 44px;
    margin-top: -17px;
    padding: 14px 20px;
    overflow: hidden;
    border-top: 1px solid rgba(97,213,125,.08);
    border-bottom: 1px solid rgba(97,213,125,.08);
    white-space: nowrap;
}


.cva-track-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 700;
    color: white;
}


    .cva-track-item span {
        font-size: 7px;
        color: #42d574;
    }


.cva-bottom-track i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(78,221,119,.6);
    box-shadow: 0 0 8px rgba(78,221,119,.5);
}


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

@media (max-width: 1150px) {

    .cva-command-stage {
        grid-template-columns: 175px minmax(350px, 1fr) 300px;
        gap: 20px;
    }

    .cva-info-panel {
        padding: 22px;
    }

    .cva-panel-content h3 {
        font-size: 29px;
    }

    .cva-central-core {
        transform: scale(.85);
    }

    .cva-core-orbit-1 {
        width: 260px;
        height: 260px;
    }

    .cva-core-orbit-2 {
        width: 300px;
        height: 300px;
    }
}


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

@media (max-width: 900px) {

    .cva-values-section {
        padding: 80px 0 55px;
    }

    .cva-container {
        width: calc(100% - 40px);
    }

    .cva-heading {
        margin-bottom: 35px;
    }

    .cva-command-stage {
        grid-template-columns: 1fr;
        gap: 20px;
        min-height: auto;
    }


    /* NAV BECOMES TOP */

    .cva-value-nav {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 7px;
        border-left: 0;
        border-bottom: 1px solid rgba(91,216,125,.10);
        padding: 0 0 12px;
    }

    .cva-nav-heading {
        display: none;
    }

    .cva-nav-item {
        min-height: 48px;
        grid-template-columns: 25px 1fr;
        border-radius: 10px;
    }

    .cva-nav-arrow {
        display: none;
    }

    .cva-nav-name {
        font-size: 9px;
    }

    .cva-core-stage {
        height: 470px;
    }

    .cva-info-panel {
        width: min(100%, 550px);
        margin: 0 auto;
        transform: none;
    }

        .cva-info-panel:hover {
            transform: translateY(-3px);
        }
}


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

@media (max-width: 600px) {

    .cva-values-section {
        min-height: auto;
        padding: 60px 0 40px;
    }

    .cva-container {
        width: calc(100% - 28px);
    }


    /* HEADING */

    .cva-heading {
        margin-bottom: 28px;
    }

    .cva-eyebrow {
        font-size: 8px;
        letter-spacing: 2.5px;
        gap: 8px;
    }

    .cva-eyebrow-line {
        width: 25px;
    }

    .cva-heading h2 {
        font-size: clamp( 35px, 10vw, 46px );
        letter-spacing: -2px;
    }

    .cva-heading p {
        font-size: 10px;
        line-height: 1.7;
    }


    /* NAV */

    .cva-value-nav {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .cva-nav-item {
        min-height: 44px;
        padding: 0 8px;
    }

    .cva-nav-number {
        font-size: 7px;
    }

    .cva-nav-name {
        font-size: 8px;
    }


    /* CORE */

    .cva-core-stage {
        height: 365px;
        overflow: hidden;
    }

    .cva-core-floor {
        width: 280px;
        height: 130px;
        bottom: 18px;
    }

    .cva-central-core {
        width: 155px;
        height: 155px;
    }

    .cva-core-sphere {
        inset: 28px;
    }

    .cva-sphere-content strong {
        font-size: 29px;
    }

    .cva-sphere-content small {
        font-size: 5px;
    }

    .cva-sphere-content span {
        font-size: 5px;
    }

    .cva-core-orbit-1 {
        width: 220px;
        height: 220px;
    }

    .cva-core-orbit-2 {
        width: 250px;
        height: 250px;
    }

    .cva-core-orbit-3 {
        width: 185px;
        height: 185px;
    }


    /* FLOATING LABELS */

    .cva-floating-label {
        font-size: 5px;
        padding: 5px 8px;
    }

    .cva-floating-label-a {
        left: 2%;
        top: 18%;
    }

    .cva-floating-label-b {
        right: 2%;
        top: 18%;
    }

    .cva-floating-label-c {
        right: 8%;
        bottom: 13%;
    }


    /* ENERGY */

    .cva-energy-line {
        opacity: .3;
    }


    /* PANEL */

    .cva-info-panel {
        min-height: auto;
        padding: 20px;
        border-radius: 20px;
    }

    .cva-panel-icon {
        width: 45px;
        height: 45px;
        margin-top: 20px;
        border-radius: 12px;
        font-size: 19px;
    }

    .cva-panel-content {
        margin-top: 18px;
    }

        .cva-panel-content h3 {
            font-size: 27px;
        }

        .cva-panel-content p {
            font-size: 10px;
            line-height: 1.7;
        }

    .cva-panel-status {
        font-size: 5px;
    }


    /* BOTTOM */

    .cva-bottom-track {
        justify-content: flex-start;
        gap: 18px;
        margin-top: 28px;
        overflow-x: auto;
        scrollbar-width: none;
    }

        .cva-bottom-track::-webkit-scrollbar {
            display: none;
        }
}


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

@media (max-width: 390px) {

    .cva-core-stage {
        height: 330px;
    }

    .cva-central-core {
        width: 135px;
        height: 135px;
    }

    .cva-core-sphere {
        inset: 25px;
    }

    .cva-sphere-content strong {
        font-size: 25px;
    }

    .cva-core-orbit-1 {
        width: 190px;
        height: 190px;
    }

    .cva-core-orbit-2 {
        width: 215px;
        height: 215px;
    }

    .cva-core-orbit-3 {
        width: 160px;
        height: 160px;
    }

    .cva-floating-label-c {
        display: none;
    }
}


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

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

    .cva-bg-grid,
    .cva-bg-glow,
    .cva-bg-orbit,
    .cva-particle,
    .cva-core-floor,
    .cva-core-orbit,
    .cva-central-core,
    .cva-core-halo,
    .cva-core-ring,
    .cva-energy-line,
    .cva-floating-label {
        animation: none !important;
    }
}





/* =========================================================
   CHRONICAL SOLUTIONS
   WHY CHOOSE US — TRUST MATRIX
   UNIQUE PREFIX : CWS
========================================================= */

.cws-section {
    --cws-green: #18b957;
    --cws-bright: #48df7d;
    --cws-dark: #08783b;
    --cws-text: #10251a;
    --cws-muted: #64736a;
    --cws-light: #f5faf7;
    position: relative;
    width: 100%;
    padding: 0px 0 36px;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient( circle at 72% 48%, rgba(46, 210, 112, .12), transparent 27% ), radial-gradient( circle at 10% 85%, rgba(53, 194, 108, .08), transparent 25% ), #f6faf7;
    color: var(--cws-text);
}


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

.cws-bg-image {
    position: absolute;
    inset: 0;
    z-index: -10;
    background-image: linear-gradient( 90deg, rgba(246,250,247,.98) 0%, rgba(246,250,247,.92) 34%, rgba(246,250,247,.68) 58%, rgba(246,250,247,.88) 100% ), url("../image/background/bacckk.png");
     background-size: cover;
    background-position: center;
    opacity: .42;
    animation: cwsImageMove 18s ease-in-out infinite alternate;
}


@keyframes cwsImageMove {

    0% {
        background-position: 48% center;
        transform: scale(1);
    }

    100% {
        background-position: 55% center;
        transform: scale(1.04);
    }
}


.cws-bg-wash {
    position: absolute;
    inset: 0;
    z-index: -9;
    background: linear-gradient( 90deg, #f7fbf8 0%, rgba(247,251,248,.96) 34%, rgba(247,251,248,.55) 68%, rgba(247,251,248,.82) 100% );
}


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

.cws-bg-grid {
    position: absolute;
    inset: -30%;
    z-index: -7;
    opacity: .18;
    background-image: linear-gradient( rgba(29,150,77,.11) 1px, transparent 1px ), linear-gradient( 90deg, rgba(29,150,77,.11) 1px, transparent 1px );
    background-size: 55px 55px;
    transform: perspective(900px) rotateX(62deg) rotateZ(-8deg) translateY(220px);
    transform-origin: center bottom;
    animation: cwsGridMove 16s linear infinite;
}


@keyframes cwsGridMove {

    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 55px;
    }
}


/* =========================================================
   LIGHT BLOBS
========================================================= */

.cws-light {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    z-index: -5;
}


.cws-light-1 {
    width: 420px;
    height: 420px;
    right: 18%;
    top: 18%;
    background: rgba(45,210,106,.13);
    animation: cwsLightFloat 8s ease-in-out infinite;
}


.cws-light-2 {
    width: 260px;
    height: 260px;
    left: -90px;
    bottom: 5%;
    background: rgba(32,177,86,.10);
    animation: cwsLightFloat 10s ease-in-out infinite reverse;
}


@keyframes cwsLightFloat {

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

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


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

.cws-container {
    position: relative;
    width: min( 1380px, calc(100% - 70px) );
    min-height: 700px;
    margin: auto;
    display: grid;
    grid-template-columns: minmax(330px, .78fr) minmax(650px, 1.65fr);
    align-items: center;
    gap: 30px;
    z-index: 2;
}


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

.cws-intro {
    position: relative;
    padding: 20px 20px 30px 10px;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .9s ease, transform 1s cubic-bezier(.2,.8,.2,1);
}


.cws-section.cws-visible .cws-intro {
    opacity: 1;
    transform: translateY(0);
}


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

.cws-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #159d4d;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 3px;
}


.cws-eyebrow-line {
    width: 45px;
    height: 1px;
    background: linear-gradient( 90deg, transparent, #29bf65 );
}


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

.cws-big-number {
    position: absolute;
    top: -55px;
    right: 10px;
    font-size: 180px;
    line-height: 1;
    font-weight: 900;
    color: rgba(24,185,87,.045);
    letter-spacing: -15px;
    pointer-events: none;
}


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

.cws-intro h2 {
    position: relative;
    margin: 22px 0 0;
    max-width: 500px;
    font-size: clamp( 55px, 6vw, 86px );
    line-height: .99;
    letter-spacing: -5px;
    font-weight: 850;
    color: #12281c;
}


    .cws-intro h2 span {
        display: block;
        background: linear-gradient( 100deg, #078c42, #36ce70 );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }


/* =========================================================
   LEAD
========================================================= */

.cws-lead {
    max-width: 450px;
    margin: 27px 0 0;
    font-size: 20px;
    line-height: 1.45;
    font-weight: 650;
    color: #254334;
}


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

.cws-description {
    max-width: 440px;
    margin: 15px 0 0;
    font-size: 13px;
    line-height: 1.85;
    color: #68786e;
}


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

.cws-mini-stats {
    display: flex;
    margin-top: 38px;
    gap: 0;
}


.cws-stat {
    min-width: 105px;
    padding: 0 20px;
    border-left: 1px solid rgba(19,126,62,.16);
}


    .cws-stat:first-child {
        padding-left: 0;
        border-left: 0;
    }


    .cws-stat strong {
        display: block;
        font-size: 18px;
        color: #159f50;
    }


    .cws-stat span {
        display: block;
        margin-top: 4px;
        font-size: 8px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: #7a8980;
    }


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

.cws-visual {
    position: relative;
    height: 700px;
    perspective: 1800px;
    transform-style: preserve-3d;
    opacity: 0;
    transform: scale(.94);
    transition: opacity 1s ease .15s, transform 1.2s cubic-bezier(.2,.8,.2,1);
}


.cws-section.cws-visible .cws-visual {
    opacity: 1;
    transform: scale(1);
}


/* =========================================================
   FLOOR
========================================================= */

.cws-floor {
    position: absolute;
    width: 520px;
    height: 180px;
    left: 50%;
    top: 52%;
    transform: translate(-50%,-50%) rotateX(70deg);
    border-radius: 50%;
    border: 1px solid rgba(29,157,78,.18);
    background: radial-gradient( ellipse, rgba(46,205,105,.16), transparent 67% );
    box-shadow: 0 0 90px rgba(35,185,91,.13);
    animation: cwsFloorPulse 5s ease-in-out infinite;
}


@keyframes cwsFloorPulse {

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

    50% {
        transform: translate(-50%,-50%) rotateX(70deg) scale(1.08);
    }
}


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

.cws-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(28,162,78,.15);
    border-radius: 50%;
    transform-style: preserve-3d;
    pointer-events: none;
}


.cws-ring-1 {
    width: 570px;
    height: 250px;
    transform: translate(-50%,-50%) rotateX(72deg) rotateZ(10deg);
    animation: cwsRingOne 14s linear infinite;
}


.cws-ring-2 {
    width: 460px;
    height: 460px;
    transform: translate(-50%,-50%) rotateY(67deg);
    animation: cwsRingTwo 18s linear infinite reverse;
}


.cws-ring-3 {
    width: 390px;
    height: 180px;
    transform: translate(-50%,-50%) rotateX(55deg) rotateZ(-25deg);
    border-style: dashed;
    opacity: .6;
    animation: cwsRingThree 11s linear infinite;
}


@keyframes cwsRingOne {

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

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


@keyframes cwsRingTwo {

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

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


@keyframes cwsRingThree {

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

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


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

.cws-core {
    position: absolute;
    width: 190px;
    height: 190px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) translateZ(80px);
    transform-style: preserve-3d;
    z-index: 20;
    animation: cwsCoreFloat 5s ease-in-out infinite;
}


@keyframes cwsCoreFloat {

    0%,100% {
        transform: translate(-50%,-50%) translateZ(70px);
    }

    50% {
        transform: translate(-50%,-57%) translateZ(110px);
    }
}


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

.cws-core-glow {
    position: absolute;
    inset: -35px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(42,213,111,.26), transparent 65% );
    filter: blur(15px);
    animation: cwsCoreGlow 3s ease-in-out infinite;
}


@keyframes cwsCoreGlow {

    0%,100% {
        transform: scale(.85);
        opacity: .6;
    }

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


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

.cws-core-ring {
    position: absolute;
    inset: -17px;
    border-radius: 50%;
    border: 1px solid rgba(38,189,94,.42);
    transform: rotateX(70deg);
    animation: cwsCoreRing 6s linear infinite;
}


@keyframes cwsCoreRing {

    from {
        transform: rotateX(70deg) rotateZ(0);
    }

    to {
        transform: rotateX(70deg) rotateZ(360deg);
    }
}


/* =========================================================
   CORE FACE
========================================================= */

.cws-core-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 50%;
    background: radial-gradient( circle at 28% 20%, #9cffbd 0%, #4ce080 16%, #19a851 46%, #08723a 73%, #034222 100% );
    border: 1px solid rgba(174,255,199,.65);
    box-shadow: 0 0 30px rgba(36,193,91,.38), 0 0 90px rgba(32,185,86,.20), inset 10px 10px 25px rgba(255,255,255,.22), inset -15px -15px 25px rgba(0,0,0,.30);
    color: white;
    transform: translateZ(30px);
}


.cws-core-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    border-radius: 13px;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.20);
    font-size: 19px;
}


.cws-core-face strong {
    font-size: 27px;
    letter-spacing: 3px;
}


.cws-core-face span {
    margin-top: 7px;
    font-size: 6px;
    letter-spacing: 3px;
    opacity: .72;
}


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

.cws-orbit-card {
    position: absolute;
    width: 245px;
    min-height: 190px;
    padding: 19px;
    border-radius: 20px;
    background: linear-gradient( 145deg, rgba(255,255,255,.91), rgba(238,248,241,.73) );
    border: 1px solid rgba(29,143,72,.15);
    box-shadow: 0 25px 60px rgba(20,74,42,.12), inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter: blur(14px);
    transform-style: preserve-3d;
    transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease, border-color .5s ease;
    z-index: 15;
}


    .cws-orbit-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient( 120deg, rgba(71,221,126,.09), transparent 45% );
        opacity: .6;
        pointer-events: none;
    }


    .cws-orbit-card:hover {
        border-color: rgba(29,180,83,.35);
        box-shadow: 0 35px 75px rgba(21,94,49,.18), 0 0 30px rgba(37,196,93,.08);
        transform: translateZ(75px) rotateX(2deg) rotateY(-4deg) translateY(-8px);
    }


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

.cws-orbit-1 {
    left: 8%;
    top: 13%;
    animation: cwsCardFloat 5s ease-in-out infinite;
}


.cws-orbit-2 {
    right: 9%;
    top: 11%;
    animation: cwsCardFloat 5.8s ease-in-out infinite reverse;
}


.cws-orbit-3 {
    left: -2%;
    top: 43%;
    animation: cwsCardFloat 6.5s ease-in-out infinite;
}


.cws-orbit-4 {
    right: -2%;
    top: 43%;
    animation: cwsCardFloat 5.5s ease-in-out infinite reverse;
}


.cws-orbit-5 {
    left: 8%;
    bottom: 1%;
    animation: cwsCardFloat 6s ease-in-out infinite reverse;
}


.cws-orbit-6 {
    right: 8%;
    bottom: 1%;
    animation: cwsCardFloat 6.8s ease-in-out infinite;
}


@keyframes cwsCardFloat {

    0%,100% {
        margin-top: 0;
    }

    50% {
        margin-top: -8px;
    }
}


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

.cws-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


    .cws-card-top span {
        font-size: 9px;
        font-weight: 900;
        color: #1cad58;
        letter-spacing: 1px;
    }


    .cws-card-top i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #43db7a;
        box-shadow: 0 0 10px rgba(45,215,109,.7);
        animation: cwsDotPulse 2s ease-in-out infinite;
    }


@keyframes cwsDotPulse {

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

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


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

.cws-card-icon {
    width: 39px;
    height: 39px;
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: linear-gradient( 145deg, rgba(52,205,105,.17), rgba(18,137,61,.06) );
    border: 1px solid rgba(43,184,91,.17);
    color: #20ae59;
    font-size: 17px;
    transform: translateZ(20px);
}


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

.cws-orbit-card h3 {
    position: relative;
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.15;
    letter-spacing: -.3px;
    color: #173122;
    font-weight: 800;
}


.cws-orbit-card p {
    position: relative;
    margin: 9px 0 0;
    font-size: 9px;
    line-height: 1.65;
    color: #708078;
}


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

.cws-card-line {
    width: 35px;
    height: 2px;
    margin-top: 13px;
    border-radius: 5px;
    background: linear-gradient( 90deg, #29c96a, transparent );
}


/* =========================================================
   CONNECTION NODES
========================================================= */

.cws-node {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #31cc6b;
    box-shadow: 0 0 14px rgba(39,203,102,.8);
    z-index: 25;
    animation: cwsNodePulse 2.7s ease-in-out infinite;
}


.cws-node-1 {
    left: 30%;
    top: 22%;
}


.cws-node-2 {
    right: 30%;
    top: 19%;
    animation-delay: .5s;
}


.cws-node-3 {
    left: 27%;
    top: 50%;
    animation-delay: 1s;
}


.cws-node-4 {
    right: 27%;
    top: 52%;
    animation-delay: 1.5s;
}


.cws-node-5 {
    left: 35%;
    bottom: 17%;
    animation-delay: 2s;
}


.cws-node-6 {
    right: 35%;
    bottom: 15%;
    animation-delay: 2.4s;
}


@keyframes cwsNodePulse {

    0%,100% {
        transform: scale(.65);
        opacity: .35;
    }

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


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

.cws-bottom {
    position: relative;
    width: min( 1200px, calc(100% - 70px) );
    margin: 24px auto 0;
    display: flex;
    align-items: center;
    gap: 20px;
    color: black;
}


    .cws-bottom > span {
        flex: 1;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(27,139,70,.16) );
    }


        .cws-bottom > span:last-child {
            background: linear-gradient( 90deg, rgba(27,139,70,.16), transparent );
        }


    .cws-bottom p {
        margin: 0;
        font-size: 12px;
        font-weight: 800;
        white-space: nowrap;
    }


    .cws-bottom b {
        margin: 0 9px;
        color: #29ba62;
    }


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

@media (max-width: 1250px) {

    .cws-container {
        grid-template-columns: 320px minmax(560px, 1fr);
        gap: 10px;
    }

    .cws-visual {
        transform: scale(.9);
        transform-origin: center;
    }

    .cws-orbit-card {
        width: 215px;
    }

    .cws-orbit-1 {
        left: 0;
    }

    .cws-orbit-2 {
        right: 0;
    }

    .cws-orbit-3 {
        left: -4%;
    }

    .cws-orbit-4 {
        right: -4%;
    }
}


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

@media (max-width: 1000px) {

    .cws-section {
        padding-top: 80px;
    }

    .cws-container {
        grid-template-columns: 1fr;
        width: min( 900px, calc(100% - 40px) );
    }

    .cws-intro {
        text-align: center;
        padding: 0;
    }

    .cws-eyebrow {
        justify-content: center;
    }

    .cws-intro h2 {
        margin-left: auto;
        margin-right: auto;
    }

    .cws-lead,
    .cws-description {
        margin-left: auto;
        margin-right: auto;
    }

    .cws-mini-stats {
        justify-content: center;
    }

    .cws-big-number {
        right: 50%;
        transform: translateX(50%);
    }

    .cws-visual {
        height: 650px;
        margin-top: 15px;
    }
}


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

@media (max-width: 700px) {

    .cws-section {
        min-height: auto;
        padding: 70px 0 45px;
    }

    .cws-container {
        width: calc(100% - 28px);
    }

    .cws-intro h2 {
        font-size: clamp(48px, 14vw, 70px);
        letter-spacing: -4px;
    }

    .cws-lead {
        font-size: 16px;
    }

    .cws-description {
        font-size: 11px;
    }

    .cws-big-number {
        font-size: 110px;
        top: -25px;
    }


    /* visual */

    .cws-visual {
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-top: 35px;
        opacity: 1;
        transform: none !important;
    }


    /* hide desktop orbital structure */

    .cws-ring,
    .cws-floor,
    .cws-node {
        display: none;
    }


    /* center becomes first item */

    .cws-core {
        position: relative;
        width: 145px;
        height: 145px;
        left: auto;
        top: auto;
        transform: none !important;
        grid-column: 1 / -1;
        justify-self: center;
        margin-bottom: 10px;
    }


    .cws-core-face strong {
        font-size: 21px;
    }


    .cws-core-icon {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }


    /* cards */

    .cws-orbit-card {
        position: relative;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: auto;
        min-height: 170px;
        padding: 15px;
        animation: none;
    }


        .cws-orbit-card:hover {
            transform: translateY(-5px) translateZ(20px);
        }


        .cws-orbit-card h3 {
            font-size: 13px;
        }


        .cws-orbit-card p {
            font-size: 8px;
        }


    .cws-mini-stats {
        margin-top: 28px;
    }


    .cws-bottom {
        width: calc(100% - 28px);
        margin-top: 35px;
        overflow: hidden;
    }


        .cws-bottom > span {
            display: none;
        }


        .cws-bottom p {
            width: 100%;
            text-align: center;
            white-space: normal;
            line-height: 2.2;
            font-size: 7px;
        }
}


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

@media (max-width: 420px) {

    .cws-visual {
        grid-template-columns: 1fr;
    }

    .cws-core {
        grid-column: auto;
        width: 135px;
        height: 135px;
        margin-bottom: 5px;
    }

    .cws-orbit-card {
        min-height: 145px;
    }

    .cws-card-icon {
        width: 34px;
        height: 34px;
    }

    .cws-orbit-card h3 {
        font-size: 14px;
    }

    .cws-orbit-card p {
        font-size: 9px;
    }

    .cws-mini-stats {
        gap: 5px;
    }

    .cws-stat {
        min-width: 85px;
        padding: 0 10px;
    }
}


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

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

    .cws-bg-image,
    .cws-bg-grid,
    .cws-light,
    .cws-floor,
    .cws-ring,
    .cws-core,
    .cws-core-glow,
    .cws-core-ring,
    .cws-orbit-card,
    .cws-node {
        animation: none !important;
    }

    .cws-intro,
    .cws-visual {
        opacity: 1 !important;
        transform: none !important;
    }
}