﻿/* =========================================================
   CUSTOMER VERIFICATION
   DARK INTELLIGENCE SECTION
========================================================= */

.cv-intelligence-sections {
    position: relative;
    width: 100%;
    min-height: 760px;
    padding: 105px 0 75px;
    overflow: hidden;
    color: #ffffff;
    background: radial-gradient( circle at 78% 42%, rgba(77, 140, 9, 0.20), transparent 28% ), radial-gradient( circle at 10% 80%, rgba(48, 109, 12, 0.18), transparent 30% ), linear-gradient( 135deg, #06120a 0%, #0a1b0e 45%, #071309 100% );
}


/* =========================================================
   BACKGROUND GRID
========================================================= */

.cv-grid {
    position: absolute;
    inset: 0;
    opacity: 0.16;
    pointer-events: none;
    background-image: linear-gradient( rgba(119, 190, 57, 0.12) 1px, transparent 1px ), linear-gradient( 90deg, rgba(119, 190, 57, 0.12) 1px, transparent 1px );
    background-size: 65px 65px;
    mask-image: linear-gradient( to bottom, transparent, black 18%, black 82%, transparent );
    animation: cvGridMove 18s linear infinite;
}

@keyframes cvGridMove {

    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(65px);
    }
}


/* =========================================================
   GLOW
========================================================= */

.cv-bg-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(5px);
}

.cv-bg-glow-one {
    width: 420px;
    height: 420px;
    top: 5%;
    right: 8%;
    background: radial-gradient( circle, rgba(88, 156, 0, 0.17), transparent 70% );
    animation: cvGlowFloat 7s ease-in-out infinite;
}

.cv-bg-glow-two {
    width: 300px;
    height: 300px;
    bottom: -100px;
    left: -80px;
    background: radial-gradient( circle, rgba(76, 175, 28, 0.13), transparent 70% );
    animation: cvGlowFloat 9s ease-in-out infinite reverse;
}

@keyframes cvGlowFloat {

    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(15px, -20px, 0) scale(1.08);
    }
}


/* =========================================================
   PARTICLES
========================================================= */

.cv-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

    .cv-particles span {
        position: absolute;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #78c735;
        box-shadow: 0 0 8px rgba(120, 199, 53, 0.8), 0 0 20px rgba(120, 199, 53, 0.35);
        animation: cvParticle 5s ease-in-out infinite;
    }

        .cv-particles span:nth-child(1) {
            top: 16%;
            left: 7%;
        }

        .cv-particles span:nth-child(2) {
            top: 27%;
            left: 43%;
            animation-delay: 1s;
        }

        .cv-particles span:nth-child(3) {
            top: 14%;
            right: 12%;
            animation-delay: 2s;
        }

        .cv-particles span:nth-child(4) {
            top: 70%;
            left: 17%;
            animation-delay: 1.5s;
        }

        .cv-particles span:nth-child(5) {
            top: 82%;
            right: 19%;
            animation-delay: 2.5s;
        }

        .cv-particles span:nth-child(6) {
            top: 47%;
            left: 3%;
            animation-delay: 3s;
        }

        .cv-particles span:nth-child(7) {
            top: 63%;
            right: 5%;
            animation-delay: .7s;
        }

        .cv-particles span:nth-child(8) {
            top: 91%;
            left: 51%;
            animation-delay: 1.8s;
        }

@keyframes cvParticle {

    0%, 100% {
        opacity: .25;
        transform: translateY(0) scale(.8);
    }

    50% {
        opacity: 1;
        transform: translateY(-18px) scale(1.25);
    }
}


/* =========================================================
   CONTAINER
========================================================= */

.cv-container {
    position: relative;
    z-index: 5;
    width: min(1380px, 92%);
    min-height: 570px;
    margin: auto;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 70px;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.cv-content {
    position: relative;
    z-index: 5;
    max-width: 570px;
}

.cv-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #8dc63f;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
    margin-bottom: 24px;
    animation: cvFadeUp .8s ease both;
}

.cv-eyebrow-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #8dc63f;
    box-shadow: 0 0 0 5px rgba(141, 198, 63, .10), 0 0 18px rgba(141, 198, 63, .55);
    animation: cvPulse 2s infinite;
}

.cv-eyebrow-line {
    width: 45px;
    height: 1px;
    margin-left: 5px;
    background: linear-gradient( 90deg, #589c00, transparent );
}

@keyframes cvPulse {

    0%, 100% {
        box-shadow: 0 0 0 5px rgba(141, 198, 63, .10), 0 0 15px rgba(141, 198, 63, .4);
    }

    50% {
        box-shadow: 0 0 0 9px rgba(141, 198, 63, .03), 0 0 28px rgba(141, 198, 63, .8);
    }
}


.cv-content h2 {
    margin: 0 0 25px;
    font-size: clamp(48px, 5vw, 76px);
    line-height: .96;
    letter-spacing: -3px;
    font-weight: 800;
    color: #ffffff;
    animation: cvFadeUp .9s .1s ease both;
}

    .cv-content h2 span {
        display: block;
        color: #67a916;
        text-shadow: 0 0 30px rgba(103, 169, 22, .15);
    }


.cv-intro {
    max-width: 535px;
    margin-bottom: 28px;
    color: rgba(255,255,255,.67);
    font-size: 15px;
    line-height: 1.85;
    animation: cvFadeUp .9s .2s ease both;
}


/* =========================================================
   HIGHLIGHT
========================================================= */

.cv-highlight {
    display: flex;
    align-items: center;
    gap: 15px;
    width: fit-content;
    margin-bottom: 32px;
    padding: 13px 20px 13px 13px;
    border: 1px solid rgba(141,198,63,.18);
    border-radius: 15px;
    background: linear-gradient( 135deg, rgba(141,198,63,.11), rgba(255,255,255,.025) );
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 15px 40px rgba(0,0,0,.12);
    animation: cvFadeUp .9s .3s ease both;
}

.cv-highlight-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: linear-gradient( 135deg, #589c00, #8dc63f );
    color: #ffffff;
    font-size: 19px;
    font-weight: 800;
    box-shadow: 0 8px 22px rgba(88,156,0,.3);
}

.cv-highlight strong {
    display: block;
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 3px;
}

.cv-highlight small {
    color: rgba(255,255,255,.48);
    font-size: 11px;
}


/* =========================================================
   POINTS
========================================================= */

.cv-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    animation: cvFadeUp .9s .4s ease both;
}

.cv-point {
    padding: 14px 13px;
    border-top: 1px solid rgba(141,198,63,.18);
    transition: .35s ease;
}

    .cv-point:hover {
        border-color: #73b32b;
        transform: translateY(-4px);
    }

    .cv-point span {
        display: block;
        margin-bottom: 8px;
        color: #79b933;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1px;
    }

    .cv-point p {
        margin: 0;
        color: rgba(255,255,255,.66);
        font-size: 12px;
        line-height: 1.5;
    }


/* =========================================================
   RIGHT VISUAL
========================================================= */

.cv-visual {
    position: relative;
    min-height: 570px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
}


/* =========================================================
   ORBITS
========================================================= */

.cv-orbit {
    position: absolute;
    border: 1px solid rgba(105,175,34,.15);
    border-radius: 50%;
    transform: rotate(-18deg);
}

.cv-orbit-one {
    width: 590px;
    height: 300px;
    animation: cvOrbit 12s linear infinite;
}

.cv-orbit-two {
    width: 470px;
    height: 250px;
    transform: rotate(25deg);
    animation: cvOrbitReverse 15s linear infinite;
}

@keyframes cvOrbit {

    from {
        transform: rotate(-18deg) rotateZ(0deg);
    }

    to {
        transform: rotate(-18deg) rotateZ(360deg);
    }
}

@keyframes cvOrbitReverse {

    from {
        transform: rotate(25deg) rotateZ(360deg);
    }

    to {
        transform: rotate(25deg) rotateZ(0deg);
    }
}


/* =========================================================
   MAIN PANEL
========================================================= */

.cv-verification-panel {
    position: relative;
    z-index: 4;
    width: min(510px, 90%);
    padding: 20px;
    border-radius: 25px;
    border: 1px solid rgba(141,198,63,.20);
    background: linear-gradient( 145deg, rgba(20,43,22,.94), rgba(6,20,10,.96) );
    box-shadow: 0 35px 90px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transform: rotateY(-5deg) rotateX(2deg);
    animation: cvPanelFloat 5s ease-in-out infinite;
}

@keyframes cvPanelFloat {

    0%, 100% {
        transform: rotateY(-5deg) rotateX(2deg) translateY(0);
    }

    50% {
        transform: rotateY(-3deg) rotateX(1deg) translateY(-10px);
    }
}


/* =========================================================
   PANEL TOP
========================================================= */

.cv-panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 3px 18px;
}

    .cv-panel-top span {
        display: block;
        margin-bottom: 4px;
        color: #6ea82c;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 1.8px;
    }

    .cv-panel-top strong {
        color: #ffffff;
        font-size: 17px;
        font-weight: 700;
    }

.cv-live {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border-radius: 30px;
    color: #8dc63f;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    background: rgba(141,198,63,.07);
    border: 1px solid rgba(141,198,63,.14);
}

    .cv-live i,
    .cv-footer-status i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #8dc63f;
        box-shadow: 0 0 10px #8dc63f;
        animation: cvLivePulse 1.5s infinite;
    }

@keyframes cvLivePulse {

    0%, 100% {
        opacity: .5;
    }

    50% {
        opacity: 1;
    }
}


/* =========================================================
   SCAN AREA
========================================================= */

.cv-scan-area {
    position: relative;
    height: 205px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    background: radial-gradient( circle at center, rgba(88,156,0,.16), transparent 42% ), linear-gradient( 135deg, rgba(255,255,255,.035), rgba(88,156,0,.025) );
    border: 1px solid rgba(141,198,63,.10);
}


    /* SCAN LINES */

    .cv-scan-area::before {
        content: "";
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient( 0deg, transparent 0px, transparent 11px, rgba(141,198,63,.035) 12px );
    }


/* SCAN MOVEMENT */

.cv-scan-line {
    position: absolute;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient( 90deg, transparent, #8dc63f, #d0f69b, #8dc63f, transparent );
    box-shadow: 0 0 12px #8dc63f, 0 0 35px rgba(141,198,63,.5);
    animation: cvScanner 3s ease-in-out infinite;
}

@keyframes cvScanner {

    0% {
        top: 12%;
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    50% {
        top: 85%;
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    100% {
        top: 12%;
        opacity: 0;
    }
}


/* =========================================================
   USER SILHOUETTE
========================================================= */

.cv-user-shape {
    position: relative;
    z-index: 2;
    width: 120px;
    height: 155px;
    display: flex;
    align-items: center;
    flex-direction: column;
    filter: drop-shadow( 0 0 22px rgba(141,198,63,.15) );
}

.cv-user-head {
    width: 55px;
    height: 55px;
    margin-top: 10px;
    border-radius: 50%;
    background: radial-gradient( circle at 35% 30%, #b7df83, #4e8c12 65%, #19380b );
    border: 1px solid rgba(188,232,125,.3);
}

.cv-user-body {
    width: 105px;
    height: 75px;
    margin-top: 10px;
    border-radius: 55px 55px 15px 15px;
    background: linear-gradient( 135deg, #73ad31, #193b0e );
    border: 1px solid rgba(141,198,63,.22);
}


/* =========================================================
   SCAN TEXT
========================================================= */

.cv-scan-text {
    position: absolute;
    bottom: 13px;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(141,198,63,.65);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
    animation: cvTextBlink 2s infinite;
}

@keyframes cvTextBlink {

    0%, 100% {
        opacity: .35;
    }

    50% {
        opacity: 1;
    }
}


/* =========================================================
   SCAN CORNERS
========================================================= */

.cv-scan-corner {
    position: absolute;
    width: 25px;
    height: 25px;
    border-color: rgba(141,198,63,.65);
    border-style: solid;
}

.corner-tl {
    top: 15px;
    left: 15px;
    border-width: 2px 0 0 2px;
}

.corner-tr {
    top: 15px;
    right: 15px;
    border-width: 2px 2px 0 0;
}

.corner-bl {
    bottom: 15px;
    left: 15px;
    border-width: 0 0 2px 2px;
}

.corner-br {
    bottom: 15px;
    right: 15px;
    border-width: 0 2px 2px 0;
}


/* =========================================================
   CHECKS
========================================================= */

.cv-checks {
    padding: 17px 2px 12px;
}

.cv-check-row {
    display: grid;
    grid-template-columns: 35px 1fr auto;
    align-items: center;
    gap: 11px;
    padding: 12px 8px;
    border-bottom: 1px solid rgba(255,255,255,.055);
    transition: .3s ease;
}

    .cv-check-row:last-child {
        border-bottom: 0;
    }

    .cv-check-row:hover {
        background: rgba(141,198,63,.045);
        border-radius: 10px;
    }

.cv-check-symbol {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: #8dc63f;
    background: rgba(141,198,63,.09);
    border: 1px solid rgba(141,198,63,.13);
    font-size: 13px;
    font-weight: 800;
}

.cv-check-info strong {
    display: block;
    margin-bottom: 3px;
    color: rgba(255,255,255,.88);
    font-size: 11px;
}

.cv-check-info span {
    color: rgba(255,255,255,.40);
    font-size: 10px;
}

.cv-check-row b {
    color: #78b637;
    font-size: 8px;
    letter-spacing: 1px;
}


/* =========================================================
   PANEL FOOTER
========================================================= */

.cv-panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 4px 2px;
    color: rgba(255,255,255,.35);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.cv-footer-status {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(141,198,63,.65);
}


/* =========================================================
   FLOATING BADGES
========================================================= */

.cv-floating-badge {
    position: absolute;
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 145px;
    padding: 11px 14px;
    border-radius: 13px;
    background: rgba(12,31,15,.88);
    border: 1px solid rgba(141,198,63,.17);
    box-shadow: 0 18px 35px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter: blur(14px);
    animation: cvBadgeFloat 4s ease-in-out infinite;
}

.cv-badge-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 8px;
    color: #8dc63f;
    background: rgba(141,198,63,.10);
    font-size: 12px;
    font-weight: 800;
}

.cv-floating-badge small {
    display: block;
    margin-bottom: 3px;
    color: rgba(255,255,255,.38);
    font-size: 7px;
    letter-spacing: 1.2px;
}

.cv-floating-badge strong {
    color: #ffffff;
    font-size: 10px;
}

.cv-badge-one {
    top: 17%;
    left: 1%;
    animation-delay: .5s;
}

.cv-badge-two {
    top: 48%;
    right: -2%;
    animation-delay: 1.4s;
}

.cv-badge-three {
    bottom: 15%;
    left: 5%;
    animation-delay: 2.1s;
}

@keyframes cvBadgeFloat {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}


/* =========================================================
   BOTTOM STRIP
========================================================= */

.cv-bottom-strip {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    border-top: 1px solid rgba(141,198,63,.09);
    background: rgba(2,10,5,.32);
    color: rgba(255,255,255,.38);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

    .cv-bottom-strip i {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #72b331;
        box-shadow: 0 0 8px #72b331;
    }


/* =========================================================
   ANIMATION
========================================================= */

@keyframes cvFadeUp {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .cv-container {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .cv-content h2 {
        font-size: 55px;
    }

    .cv-floating-badge {
        transform: scale(.9);
    }

    .cv-badge-one {
        left: -5%;
    }

    .cv-badge-two {
        right: -5%;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .cv-intelligence-sections {
        min-height: auto;
        padding: 75px 0 80px;
    }

    .cv-container {
        width: 90%;
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .cv-content {
        max-width: 100%;
        text-align: center;
    }

    .cv-eyebrow {
        justify-content: center;
        font-size: 10px;
        letter-spacing: 1.8px;
    }

    .cv-content h2 {
        font-size: clamp(43px, 12vw, 60px);
        letter-spacing: -2px;
    }

    .cv-intro {
        margin-left: auto;
        margin-right: auto;
        font-size: 13px;
        line-height: 1.75;
    }

    .cv-highlight {
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }

    .cv-points {
        text-align: left;
    }

    .cv-visual {
        min-height: 470px;
    }

    .cv-verification-panel {
        width: min(470px, 92%);
        padding: 15px;
        transform: none;
        animation: cvPanelMobileFloat 5s ease-in-out infinite;
    }

    @keyframes cvPanelMobileFloat {

        0%, 100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-7px);
        }
    }

    .cv-scan-area {
        height: 175px;
    }

    .cv-orbit-one {
        width: 470px;
        height: 250px;
    }

    .cv-orbit-two {
        width: 380px;
        height: 210px;
    }

    .cv-floating-badge {
        min-width: 125px;
        padding: 9px 11px;
    }

    .cv-badge-one {
        left: -3%;
        top: 12%;
    }

    .cv-badge-two {
        right: -3%;
        top: 45%;
    }

    .cv-badge-three {
        left: 2%;
        bottom: 9%;
    }

    .cv-bottom-strip {
        position: relative;
        margin-top: 55px;
        padding: 15px;
        flex-wrap: wrap;
        gap: 10px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .cv-intelligence-sections {
        padding-top: 60px;
    }

    .cv-container {
        width: 91%;
    }

    .cv-content h2 {
        font-size: 43px;
    }

    .cv-intro {
        font-size: 12px;
    }

    .cv-points {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .cv-point {
        display: grid;
        grid-template-columns: 35px 1fr;
        gap: 8px;
        align-items: center;
    }

        .cv-point span {
            margin: 0;
        }

    .cv-visual {
        min-height: 430px;
    }

    .cv-verification-panel {
        width: 100%;
    }

    .cv-panel-top strong {
        font-size: 14px;
    }

    .cv-scan-area {
        height: 150px;
    }

    .cv-user-shape {
        transform: scale(.82);
    }

    .cv-check-row {
        grid-template-columns: 30px 1fr auto;
        gap: 8px;
    }

    .cv-check-symbol {
        width: 27px;
        height: 27px;
        font-size: 11px;
    }

    .cv-floating-badge {
        min-width: 110px;
    }

        .cv-floating-badge small {
            font-size: 6px;
        }

        .cv-floating-badge strong {
            font-size: 9px;
        }

    .cv-badge-one {
        left: -8%;
    }

    .cv-badge-two {
        right: -8%;
    }

    .cv-badge-three {
        left: -5%;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .cv-grid,
    .cv-bg-glow,
    .cv-particles span,
    .cv-orbit,
    .cv-verification-panel,
    .cv-floating-badge,
    .cv-scan-line,
    .cv-scan-text,
    .cv-eyebrow-dot {
        animation: none !important;
    }
}
/* =========================================================
   CUSTOMER VERIFICATION
   TECHNICAL CONTROL SYSTEM
   ALL CLASSES ARE SCOPED
========================================================= */

.cv-control-section {
    position: relative;
    width: 100%;
    padding: 50px 0 ;
    overflow: hidden;
    background: radial-gradient( circle at 15% 25%, rgba(88, 156, 0, 0.10), transparent 27% ), radial-gradient( circle at 85% 75%, rgba(77, 140, 9, 0.08), transparent 30% ), #f7faf4;
}


/* =========================================================
   BACKGROUND
========================================================= */

.cv-control-bg-grid {
    position: absolute;
    inset: 0;
    opacity: .55;
    background-image: linear-gradient( rgba(77,140,9,.055) 1px, transparent 1px ), linear-gradient( 90deg, rgba(77,140,9,.055) 1px, transparent 1px );
    background-size: 55px 55px;
    mask-image: linear-gradient( to bottom, transparent, black 15%, black 85%, transparent );
    pointer-events: none;
}


.cv-control-glow {
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    animation: cvControlGlow 8s ease-in-out infinite alternate;
}


.cv-control-glow-one {
    top: -180px;
    left: -120px;
    background: rgba(88,156,0,.13);
}


.cv-control-glow-two {
    right: -140px;
    bottom: -180px;
    background: rgba(48,109,12,.10);
    animation-delay: 2s;
}


@keyframes cvControlGlow {

    from {
        transform: scale(.85);
        opacity: .45;
    }

    to {
        transform: scale(1.15);
        opacity: .85;
    }
}


/* =========================================================
   CONTAINER
========================================================= */

.cv-control-container {
    position: relative;
    z-index: 2;
    width: min(1380px, 92%);
    margin: auto;
}


/* =========================================================
   HEADING
========================================================= */

.cv-control-heading {
    max-width: 790px;
    margin: 0 auto 70px;
    text-align: center;
}


.cv-control-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    color: #4d8c09;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}


.cv-control-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #589c00;
    box-shadow: 0 0 0 5px rgba(88,156,0,.10), 0 0 15px rgba(88,156,0,.45);
    animation: cvControlPulse 2s infinite;
}


.cv-control-line {
    width: 40px;
    height: 1px;
    background: #8dc63f;
}


.cv-control-heading h2 {
    margin: 0;
    color: #172317;
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -1.8px;
}


    .cv-control-heading h2 strong {
        display: block;
        color: #4d8c09;
    }


.cv-control-heading p {
    max-width: 700px;
    margin: 22px auto 0;
    color: #667066;
    font-size: 15px;
    line-height: 1.8;
}


/* =========================================================
   MAIN SYSTEM
========================================================= */

.cv-control-system {
    position: relative;
    min-height: 560px;
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    align-items: center;
    gap: 55px;
}


/* =========================================================
   LEFT CONSOLE
========================================================= */

.cv-control-console {
    position: relative;
    padding: 5px;
    border-radius: 22px;
    background: linear-gradient( 145deg, rgba(48,109,12,.75), rgba(22,43,23,.98) );
    box-shadow: 0 30px 60px rgba(25,55,26,.18), inset 0 1px 0 rgba(255,255,255,.12);
    transform: perspective(1000px) rotateY(5deg);
    transition: .5s ease;
}


    .cv-control-console:hover {
        transform: perspective(1000px) rotateY(0deg) translateY(-8px);
        box-shadow: 0 40px 80px rgba(25,55,26,.25), 0 0 40px rgba(88,156,0,.12);
    }


.cv-control-console-top {
    height: 48px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
}


.cv-control-status {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #8dc63f;
    box-shadow: 0 0 12px #8dc63f;
    animation: cvControlPulse 1.7s infinite;
}


.cv-control-live {
    margin-left: auto;
    padding: 5px 9px;
    border-radius: 20px;
    color: #b9e878;
    background: rgba(141,198,63,.10);
    border: 1px solid rgba(141,198,63,.20);
    font-size: 9px;
}


.cv-control-console-screen {
    position: relative;
    margin: 0 10px;
    padding: 25px 20px;
    min-height: 365px;
    overflow: hidden;
    border-radius: 15px;
    background: linear-gradient( 135deg, rgba(255,255,255,.035), rgba(255,255,255,.01) );
    border: 1px solid rgba(255,255,255,.08);
}


    .cv-control-console-screen::before {
        content: "";
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient( to bottom, transparent 0, transparent 4px, rgba(141,198,63,.018) 5px );
        pointer-events: none;
    }


.cv-control-terminal-title {
    margin-bottom: 28px;
    color: #8dc63f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}


.cv-control-terminal-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 24px;
    align-items: center;
    gap: 12px;
    min-height: 55px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}


    .cv-control-terminal-row span {
        color: #fff;
        font-size: 11px;
        font-weight: 700;
    }


    .cv-control-terminal-row b {
        color: #fff;
        font-size: 9px;
        letter-spacing: 1px;
    }


    .cv-control-terminal-row i {
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        color: #8dc63f;
        background: rgba(141,198,63,.10);
        border: 1px solid rgba(141,198,63,.20);
        font-size: 11px;
        font-style: normal;
    }


.cv-control-terminal-progress {
    margin-top: 30px;
}


.cv-control-progress-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 9px;
}


    .cv-control-progress-label span {
        color: #fff;
        font-size: 9px;
        letter-spacing: 1px;
    }


    .cv-control-progress-label strong {
        color: #8dc63f;
        font-size: 11px;
    }


.cv-control-progress-bar {
    height: 5px;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(255,255,255,.08);
}


    .cv-control-progress-bar span {
        display: block;
        width: 98%;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient( 90deg, #306d0c, #8dc63f );
        transform-origin: left;
        animation: cvControlProgress 2s ease-out;
    }


.cv-control-console-bottom {
    min-height: 55px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}


    .cv-control-console-bottom span {
        display: flex;
        align-items: center;
        gap: 7px;
        color: #fff;
        font-size: 8px;
        letter-spacing: .8px;
    }


    .cv-control-console-bottom i {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #8dc63f;
    }


/* =========================================================
   CENTER CORE
========================================================= */

.cv-control-core-area {
    position: relative;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
}


.cv-control-core-shadow {
    position: absolute;
    width: 220px;
    height: 65px;
    bottom: 78px;
    border-radius: 50%;
    background: rgba(48,109,12,.18);
    filter: blur(25px);
    animation: cvControlShadow 4s ease-in-out infinite;
}


.cv-control-core {
    position: relative;
    z-index: 5;
    width: 220px;
    height: 220px;
    padding: 12px;
    border-radius: 50%;
    background: linear-gradient( 145deg, #8dc63f, #306d0c );
    box-shadow: 0 30px 55px rgba(48,109,12,.30), inset 8px 8px 20px rgba(255,255,255,.25), inset -10px -12px 20px rgba(0,0,0,.20);
    animation: cvControlFloat 5s ease-in-out infinite;
}


.cv-control-core-glass {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
    background: radial-gradient( circle at 35% 25%, rgba(255,255,255,.22), transparent 35% ), linear-gradient( 145deg, rgba(88,156,0,.94), rgba(31,91,9,.98) );
    border: 1px solid rgba(255,255,255,.20);
    box-shadow: inset 0 0 30px rgba(255,255,255,.06);
}


.cv-control-core-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 13px;
    border-radius: 15px;
    color: #306d0c;
    background: white;
    font-size: 23px;
    font-weight: 900;
    box-shadow: 0 8px 20px rgba(0,0,0,.15);
}


.cv-control-core-glass span {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
    opacity: .72;
}


.cv-control-core-glass strong {
    margin-top: 3px;
    font-size: 25px;
    letter-spacing: 1px;
}


.cv-control-core-glass small {
    margin-top: 7px;
    font-size: 8px;
    letter-spacing: 1.2px;
    opacity: .58;
}


/* =========================================================
   ROTATING RINGS
========================================================= */

.cv-control-core-ring {
    position: absolute;
    border: 1px solid rgba(77,140,9,.25);
    border-radius: 50%;
    transform-style: preserve-3d;
}


.cv-control-ring-one {
    width: 330px;
    height: 145px;
    transform: rotateX(67deg);
    animation: cvControlRotateOne 9s linear infinite;
}


.cv-control-ring-two {
    width: 390px;
    height: 175px;
    transform: rotateY(65deg) rotateX(8deg);
    animation: cvControlRotateTwo 12s linear infinite reverse;
}


.cv-control-ring-three {
    width: 275px;
    height: 275px;
    border-style: dashed;
    opacity: .55;
    animation: cvControlRotateThree 18s linear infinite;
}


/* =========================================================
   ORBIT NODES
========================================================= */

.cv-control-orbit-node {
    position: absolute;
    z-index: 7;
    min-width: 100px;
    padding: 9px 13px;
    display: flex;
    align-items: center;
    gap: 7px;
    border-radius: 9px;
    color: #354535;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(77,140,9,.13);
    box-shadow: 0 12px 30px rgba(48,109,12,.10);
    backdrop-filter: blur(12px);
    font-size: 9px;
    font-weight: 700;
    animation: cvControlNodeFloat 4s ease-in-out infinite;
}


    .cv-control-orbit-node span {
        color: #4d8c09;
        font-size: 8px;
        font-weight: 900;
    }


.cv-control-node-one {
    top: 72px;
    left: 5px;
}


.cv-control-node-two {
    top: 155px;
    right: 0;
    animation-delay: 1s;
}


.cv-control-node-three {
    bottom: 75px;
    left: 35px;
    animation-delay: 2s;
}


/* SCAN LINE */

.cv-control-scan-line {
    position: absolute;
    z-index: 8;
    width: 260px;
    height: 1px;
    background: linear-gradient( 90deg, transparent, rgba(141,198,63,.8), transparent );
    filter: blur(.2px);
    animation: cvControlScan 3.5s ease-in-out infinite;
}


/* =========================================================
   RIGHT STACK
========================================================= */

.cv-control-stack {
    position: relative;
}


.cv-control-stack-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 15px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(77,140,9,.15);
}


    .cv-control-stack-title span {
        color: #306d0c;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 1.5px;
    }


    .cv-control-stack-title b {
        color: #8dc63f;
        font-size: 12px;
    }


.cv-control-layer {
    position: relative;
    display: grid;
    grid-template-columns: 42px 1fr 28px;
    gap: 12px;
    align-items: center;
    min-height: 100px;
    padding: 15px 12px;
    margin-bottom: 10px;
    border: 1px solid rgba(77,140,9,.10);
    border-radius: 15px;
    background: rgba(255,255,255,.67);
    box-shadow: 0 10px 25px rgba(48,109,12,.045);
    transition: .4s ease;
    overflow: hidden;
}


    .cv-control-layer::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 3px;
        height: 100%;
        background: linear-gradient( to bottom, #8dc63f, #306d0c );
        transform: scaleY(0);
        transform-origin: bottom;
        transition: .4s ease;
    }


    .cv-control-layer:hover {
        transform: translateX(-7px);
        border-color: rgba(77,140,9,.25);
        box-shadow: 0 18px 35px rgba(48,109,12,.10);
    }


        .cv-control-layer:hover::before {
            transform: scaleY(1);
        }


.cv-control-layer-number {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #4d8c09;
    background: #eef6e8;
    border: 1px solid #d8e8ca;
    font-size: 10px;
    font-weight: 900;
}


.cv-control-layer-content h3 {
    margin: 0 0 5px;
    color: #273427;
    font-size: 13px;
    font-weight: 800;
}


.cv-control-layer-content p {
    margin: 0;
    color: #737d73;
    font-size: 10px;
    line-height: 1.55;
}


.cv-control-layer-check {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #4d8c09;
    background: rgba(88,156,0,.09);
    font-size: 11px;
    font-weight: 900;
}


/* =========================================================
   BOTTOM TECH BAR
========================================================= */

.cv-control-techbar {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 65px;
    padding: 20px 0;
    border-top: 1px solid rgba(77,140,9,.14);
    border-bottom: 1px solid rgba(77,140,9,.14);
}


    .cv-control-techbar > div {
        position: relative;
        display: grid;
        grid-template-columns: 35px 1fr;
        grid-template-rows: auto auto;
        column-gap: 11px;
        padding: 5px 25px;
    }


        .cv-control-techbar > div:not(:last-child)::after {
            content: "";
            position: absolute;
            right: 0;
            top: 8px;
            width: 1px;
            height: 45px;
            background: rgba(77,140,9,.14);
        }


.cv-control-tech-icon {
    grid-row: span 2;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: #4d8c09;
    background: #eaf4e2;
    border: 1px solid #d8e8ca;
    font-size: 8px;
    font-weight: 900;
}


.cv-control-techbar strong {
    color: #334133;
    font-size: 10px;
    letter-spacing: 1px;
}


.cv-control-techbar small {
    margin-top: 3px;
    color: #7c857c;
    font-size: 10px;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes cvControlPulse {

    0%, 100% {
        box-shadow: 0 0 0 0 rgba(141,198,63,.30);
    }

    50% {
        box-shadow: 0 0 0 7px rgba(141,198,63,0);
    }
}


@keyframes cvControlProgress {

    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}


@keyframes cvControlFloat {

    0%, 100% {
        transform: translateY(0) rotateX(0deg);
    }

    50% {
        transform: translateY(-14px) rotateX(2deg);
    }
}


@keyframes cvControlShadow {

    0%, 100% {
        transform: scaleX(.8);
        opacity: .4;
    }

    50% {
        transform: scaleX(1.15);
        opacity: .7;
    }
}


@keyframes cvControlRotateOne {

    from {
        transform: rotateX(67deg) rotateZ(0deg);
    }

    to {
        transform: rotateX(67deg) rotateZ(360deg);
    }
}


@keyframes cvControlRotateTwo {

    from {
        transform: rotateY(65deg) rotateX(8deg) rotateZ(0deg);
    }

    to {
        transform: rotateY(65deg) rotateX(8deg) rotateZ(360deg);
    }
}


@keyframes cvControlRotateThree {

    from {
        transform: rotateZ(0deg);
    }

    to {
        transform: rotateZ(360deg);
    }
}


@keyframes cvControlNodeFloat {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}


@keyframes cvControlScan {

    0% {
        transform: translateY(-130px);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: translateY(130px);
        opacity: 0;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .cv-control-system {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .cv-control-core-area {
        grid-column: 1 / -1;
        grid-row: 1;
        height: 420px;
    }

    .cv-control-console {
        grid-column: 1;
    }

    .cv-control-stack {
        grid-column: 2;
    }

    .cv-control-techbar {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 0;
    }

        .cv-control-techbar > div:nth-child(2)::after {
            display: none;
        }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .cv-control-section {
        padding: 75px 0 60px;
    }

    .cv-control-container {
        width: 91%;
    }

    .cv-control-heading {
        margin-bottom: 45px;
    }

        .cv-control-heading h2 {
            font-size: 34px;
            letter-spacing: -1px;
        }

        .cv-control-heading p {
            font-size: 13px;
            line-height: 1.7;
        }

    .cv-control-system {
        display: flex;
        flex-direction: column;
        gap: 35px;
        min-height: auto;
    }

    .cv-control-core-area {
        order: 1;
        width: 100%;
        height: 350px;
    }

    .cv-control-console {
        order: 2;
        width: 100%;
        transform: none;
    }

    .cv-control-stack {
        order: 3;
        width: 100%;
    }

    .cv-control-core {
        width: 170px;
        height: 170px;
    }

    .cv-control-ring-one {
        width: 260px;
        height: 115px;
    }

    .cv-control-ring-two {
        width: 300px;
        height: 140px;
    }

    .cv-control-ring-three {
        width: 220px;
        height: 220px;
    }

    .cv-control-node-one {
        top: 30px;
        left: 0;
    }

    .cv-control-node-two {
        top: 105px;
        right: 0;
    }

    .cv-control-node-three {
        bottom: 35px;
        left: 10px;
    }

    .cv-control-orbit-node {
        min-width: 90px;
        font-size: 8px;
    }

    .cv-control-console-screen {
        min-height: 330px;
    }

    .cv-control-techbar {
        margin-top: 45px;
        grid-template-columns: 1fr;
        gap: 15px;
    }

        .cv-control-techbar > div {
            padding: 8px 0;
        }

            .cv-control-techbar > div::after {
                display: none !important;
            }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .cv-control-heading h2 {
        font-size: 29px;
    }

    .cv-control-heading p {
        font-size: 12px;
    }

    .cv-control-core-area {
        height: 310px;
    }

    .cv-control-core {
        width: 145px;
        height: 145px;
    }

    .cv-control-core-icon {
        width: 38px;
        height: 38px;
        margin-bottom: 8px;
        font-size: 18px;
    }

    .cv-control-core-glass strong {
        font-size: 19px;
    }

    .cv-control-core-glass small {
        font-size: 7px;
    }

    .cv-control-ring-one {
        width: 215px;
        height: 95px;
    }

    .cv-control-ring-two {
        width: 245px;
        height: 115px;
    }

    .cv-control-ring-three {
        width: 190px;
        height: 190px;
    }

    .cv-control-orbit-node {
        min-width: auto;
        padding: 7px 9px;
    }

    .cv-control-node-one {
        top: 25px;
    }

    .cv-control-node-two {
        top: 90px;
    }

    .cv-control-node-three {
        bottom: 20px;
    }

    .cv-control-terminal-row {
        grid-template-columns: 1fr auto 22px;
    }

        .cv-control-terminal-row span {
            font-size: 10px;
        }

        .cv-control-terminal-row b {
            font-size: 8px;
        }

    .cv-control-layer {
        grid-template-columns: 36px 1fr 25px;
        gap: 9px;
        padding: 13px 10px;
    }

    .cv-control-layer-number {
        width: 34px;
        height: 34px;
    }

    .cv-control-layer-content h3 {
        font-size: 12px;
    }

    .cv-control-layer-content p {
        font-size: 10px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .cv-control-section *,
    .cv-control-section *::before,
    .cv-control-section *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}
/* =========================================================
   CUSTOMER VERIFICATION — TECH BACKGROUND
   All classes are uniquely prefixed with cv-
========================================================= */

.customer-verification-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}


/* =========================================================
   BACKGROUND MASTER
========================================================= */

.cv-background {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}


/* =========================================================
   TECHNICAL GRID
========================================================= */

.cv-bg-grid {
    position: absolute;
    inset: -10%;
    opacity: 0.42;
    background-image: linear-gradient( rgba(48, 145, 54, 0.075) 1px, transparent 1px ), linear-gradient( 90deg, rgba(48, 145, 54, 0.075) 1px, transparent 1px );
    background-size: 58px 58px;
    transform: perspective(700px) rotateX(58deg) scale(1.45);
    transform-origin: center bottom;
    animation: cvGridMove 18s linear infinite;
}


@keyframes cvGridMove {

    0% {
        transform: perspective(700px) rotateX(58deg) scale(1.45) translateY(0);
    }

    100% {
        transform: perspective(700px) rotateX(58deg) scale(1.45) translateY(58px);
    }
}


/* =========================================================
   LARGE AMBIENT GLOWS
========================================================= */

.cv-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
}


.cv-glow-left {
    width: 420px;
    height: 420px;
    left: -180px;
    top: 18%;
    background: radial-gradient( circle, rgba(87, 190, 52, 0.17), transparent 68% );
    animation: cvGlowFloatLeft 9s ease-in-out infinite alternate;
}


.cv-glow-right {
    width: 480px;
    height: 480px;
    right: -220px;
    top: 8%;
    background: radial-gradient( circle, rgba(51, 170, 75, 0.14), transparent 68% );
    animation: cvGlowFloatRight 11s ease-in-out infinite alternate;
}


.cv-glow-center {
    width: 520px;
    height: 520px;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    background: radial-gradient( circle, rgba(77, 192, 50, 0.13), transparent 66% );
    filter: blur(90px);
    animation: cvCenterPulse 5s ease-in-out infinite;
}


@keyframes cvGlowFloatLeft {

    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(100px, 45px, 0);
    }
}


@keyframes cvGlowFloatRight {

    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-90px, 60px, 0);
    }
}


@keyframes cvCenterPulse {

    0%, 100% {
        opacity: 0.45;
        transform: translate(-50%, -50%) scale(0.85);
    }

    50% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.08);
    }
}


/* =========================================================
   SCANNING HORIZONTAL LIGHT
========================================================= */

.cv-scan-line {
    position: absolute;
    left: -10%;
    width: 120%;
    height: 1px;
    top: -5%;
    background: linear-gradient( 90deg, transparent, rgba(92, 214, 72, 0.05), rgba(100, 224, 78, 0.8), rgba(92, 214, 72, 0.05), transparent );
    box-shadow: 0 0 18px rgba(72, 206, 60, 0.5);
    opacity: 0.7;
    animation: cvScanMove 8s linear infinite;
}


@keyframes cvScanMove {

    0% {
        top: -5%;
        opacity: 0;
    }

    10% {
        opacity: 0.8;
    }

    90% {
        opacity: 0.8;
    }

    100% {
        top: 105%;
        opacity: 0;
    }
}


/* =========================================================
   ORBIT / RADAR RINGS
========================================================= */

.cv-orbit {
    position: absolute;
    left: 50%;
    top: 51%;
    border: 1px solid rgba(71, 174, 60, 0.16);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotateX(65deg);
    opacity: 0.8;
}


.cv-orbit-1 {
    width: 330px;
    height: 120px;
    animation: cvOrbitRotate 14s linear infinite;
}


.cv-orbit-2 {
    width: 500px;
    height: 185px;
    animation: cvOrbitRotateReverse 19s linear infinite;
}


.cv-orbit-3 {
    width: 690px;
    height: 255px;
    border-color: rgba(71, 174, 60, 0.09);
    animation: cvOrbitRotate 25s linear infinite;
}


@keyframes cvOrbitRotate {

    from {
        transform: translate(-50%, -50%) rotateX(65deg) rotateZ(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotateX(65deg) rotateZ(360deg);
    }
}


@keyframes cvOrbitRotateReverse {

    from {
        transform: translate(-50%, -50%) rotateX(65deg) rotateZ(360deg);
    }

    to {
        transform: translate(-50%, -50%) rotateX(65deg) rotateZ(0deg);
    }
}


/* =========================================================
   DATA CONNECTION LINES
========================================================= */

.cv-data-line {
    position: absolute;
    height: 1px;
    background: linear-gradient( 90deg, transparent, rgba(76, 188, 61, 0.55), transparent );
    transform-origin: left center;
    opacity: 0.35;
}


.cv-data-line-1 {
    width: 340px;
    left: 5%;
    top: 34%;
    transform: rotate(-8deg);
    animation: cvDataPulse 4s ease-in-out infinite;
}


.cv-data-line-2 {
    width: 290px;
    right: 4%;
    top: 39%;
    transform: rotate(10deg);
    animation: cvDataPulse 5s ease-in-out infinite 1s;
}


.cv-data-line-3 {
    width: 420px;
    left: 15%;
    bottom: 22%;
    transform: rotate(7deg);
    animation: cvDataPulse 6s ease-in-out infinite 2s;
}


@keyframes cvDataPulse {

    0%, 100% {
        opacity: 0.12;
        transform: scaleX(0.65) rotate(-8deg);
    }

    50% {
        opacity: 0.55;
        transform: scaleX(1) rotate(-8deg);
    }
}


/* =========================================================
   FLOATING DATA PARTICLES
========================================================= */

.cv-particle {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #61d84b;
    box-shadow: 0 0 7px rgba(92, 214, 73, 0.9), 0 0 18px rgba(92, 214, 73, 0.45);
    animation: cvParticleFloat 7s ease-in-out infinite;
}


.cv-particle-1 {
    left: 12%;
    top: 21%;
    animation-delay: 0s;
}


.cv-particle-2 {
    left: 28%;
    top: 68%;
    animation-delay: 1.4s;
}


.cv-particle-3 {
    left: 44%;
    top: 18%;
    animation-delay: 2.1s;
}


.cv-particle-4 {
    right: 17%;
    top: 27%;
    animation-delay: 0.8s;
}


.cv-particle-5 {
    right: 9%;
    top: 67%;
    animation-delay: 2.8s;
}


.cv-particle-6 {
    left: 7%;
    bottom: 19%;
    animation-delay: 3.5s;
}


.cv-particle-7 {
    right: 30%;
    bottom: 14%;
    animation-delay: 1.8s;
}


.cv-particle-8 {
    left: 62%;
    top: 31%;
    animation-delay: 4s;
}


@keyframes cvParticleFloat {

    0%, 100% {
        transform: translate3d(0, 0, 0) scale(0.7);
        opacity: 0.25;
    }

    50% {
        transform: translate3d(0, -28px, 0) scale(1.2);
        opacity: 1;
    }
}


/* =========================================================
   CORNER TECH MARKS
========================================================= */

.cv-corner-mark {
    position: absolute;
    width: 75px;
    height: 75px;
    opacity: 0.28;
}


.cv-corner-tl {
    left: 30px;
    top: 35px;
    border-left: 1px solid #58bd4d;
    border-top: 1px solid #58bd4d;
}


.cv-corner-tr {
    right: 30px;
    top: 35px;
    border-right: 1px solid #58bd4d;
    border-top: 1px solid #58bd4d;
}


.cv-corner-bl {
    left: 30px;
    bottom: 35px;
    border-left: 1px solid #58bd4d;
    border-bottom: 1px solid #58bd4d;
}


.cv-corner-br {
    right: 30px;
    bottom: 35px;
    border-right: 1px solid #58bd4d;
    border-bottom: 1px solid #58bd4d;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 992px) {

    .cv-orbit-1 {
        width: 260px;
        height: 95px;
    }

    .cv-orbit-2 {
        width: 390px;
        height: 145px;
    }

    .cv-orbit-3 {
        width: 520px;
        height: 190px;
    }

    .cv-bg-grid {
        background-size: 45px 45px;
    }

    .cv-data-line {
        opacity: 0.2;
    }
}


@media (max-width: 768px) {

    .cv-glow-left,
    .cv-glow-right {
        width: 280px;
        height: 280px;
        filter: blur(55px);
    }

    .cv-glow-center {
        width: 350px;
        height: 350px;
        filter: blur(65px);
    }

    .cv-orbit-1 {
        width: 220px;
        height: 80px;
    }

    .cv-orbit-2 {
        width: 320px;
        height: 120px;
    }

    .cv-orbit-3 {
        width: 430px;
        height: 160px;
    }

    .cv-corner-mark {
        width: 45px;
        height: 45px;
    }

    .cv-corner-tl,
    .cv-corner-tr {
        top: 20px;
    }

    .cv-corner-bl,
    .cv-corner-br {
        bottom: 20px;
    }

    .cv-corner-tl,
    .cv-corner-bl {
        left: 15px;
    }

    .cv-corner-tr,
    .cv-corner-br {
        right: 15px;
    }

    .cv-particle {
        width: 4px;
        height: 4px;
    }
}


@media (max-width: 480px) {

    .cv-bg-grid {
        opacity: 0.28;
        background-size: 36px 36px;
    }

    .cv-orbit-1 {
        width: 180px;
        height: 65px;
    }

    .cv-orbit-2 {
        width: 260px;
        height: 95px;
    }

    .cv-orbit-3 {
        width: 340px;
        height: 125px;
    }

    .cv-data-line {
        display: none;
    }

    .cv-particle-2,
    .cv-particle-5,
    .cv-particle-7 {
        display: none;
    }
}
/* =========================================================
   CUSTOMER VERIFICATION
   STRONG TECHNICAL ANIMATED BACKGROUND
   ADD THIS AT THE VERY END OF service6.css
========================================================= */

.cv-control-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: radial-gradient( circle at 12% 18%, rgba(92, 166, 20, .20), transparent 24% ), radial-gradient( circle at 88% 22%, rgba(47, 132, 25, .14), transparent 26% ), radial-gradient( circle at 50% 110%, rgba(93, 175, 30, .16), transparent 35% ), linear-gradient( 135deg, #f8fbf5 0%, #f2f8ef 48%, #f9fcf7 100% ) !important;
}


    /* =========================================================
   MOVING TECH GRID
========================================================= */

    .cv-control-section::before {
        content: "";
        position: absolute;
        inset: -100px;
        z-index: 0;
        pointer-events: none;
        background-image: linear-gradient( rgba(72, 142, 17, .075) 1px, transparent 1px ), linear-gradient( 90deg, rgba(72, 142, 17, .075) 1px, transparent 1px );
        background-size: 55px 55px;
        transform: perspective(700px) rotateX(58deg) scale(1.5);
        transform-origin: center bottom;
        opacity: .8;
        animation: cvTechnicalGridMove 18s linear infinite;
    }


@keyframes cvTechnicalGridMove {

    0% {
        transform: perspective(700px) rotateX(58deg) scale(1.5) translateY(0);
    }

    100% {
        transform: perspective(700px) rotateX(58deg) scale(1.5) translateY(55px);
    }
}


/* =========================================================
   LARGE MOVING AURORA LIGHT
========================================================= */

.cv-control-section::after {
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: conic-gradient( from 0deg, transparent 0deg, rgba(104, 190, 28, .12) 45deg, transparent 90deg, rgba(58, 150, 15, .10) 180deg, transparent 250deg, rgba(106, 191, 31, .12) 310deg, transparent 360deg );
    filter: blur(20px);
    opacity: .9;
    pointer-events: none;
    z-index: 0;
    animation: cvAuroraRotate 18s linear infinite, cvAuroraPulse 7s ease-in-out infinite;
}


@keyframes cvAuroraRotate {

    from {
        transform: translate(-50%, -50%) rotate(0deg) scale(.9);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg) scale(.9);
    }
}


@keyframes cvAuroraPulse {

    0%, 100% {
        opacity: .35;
    }

    50% {
        opacity: .95;
    }
}


/* =========================================================
   EXISTING CONTENT ABOVE EFFECTS
========================================================= */

.cv-control-container {
    position: relative;
    z-index: 5;
}


/* =========================================================
   ANIMATED SCANNING LIGHT
========================================================= */

.cv-control-section .cv-control-container::before {
    content: "";
    position: absolute;
    left: -10%;
    right: -10%;
    top: 8%;
    height: 1px;
    background: linear-gradient( 90deg, transparent, rgba(86, 167, 19, .0), rgba(86, 167, 19, .65), rgba(140, 220, 65, .85), rgba(86, 167, 19, .0), transparent );
    box-shadow: 0 0 12px rgba(86, 167, 19, .45), 0 0 35px rgba(86, 167, 19, .20);
    opacity: .8;
    pointer-events: none;
    animation: cvScanningBeam 6s ease-in-out infinite;
}


@keyframes cvScanningBeam {

    0% {
        transform: translateY(0);
        opacity: 0;
    }

    15% {
        opacity: .8;
    }

    50% {
        opacity: 1;
    }

    85% {
        opacity: .8;
    }

    100% {
        transform: translateY(680px);
        opacity: 0;
    }
}


/* =========================================================
   FLOATING DATA PARTICLES
========================================================= */

.cv-control-section .cv-control-container::after {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    top: 20%;
    left: 8%;
    border-radius: 50%;
    background: #72c52b;
    box-shadow: 120px 80px 0 rgba(94,170,25,.75), 260px -40px 0 rgba(110,190,38,.65), 420px 120px 0 rgba(76,151,16,.60), 610px -60px 0 rgba(105,185,35,.75), 780px 170px 0 rgba(77,150,18,.65), 950px 30px 0 rgba(112,192,42,.70), 1080px 230px 0 rgba(81,158,20,.55), 200px 430px 0 rgba(96,174,28,.65), 470px 520px 0 rgba(73,148,15,.55), 720px 390px 0 rgba(107,187,38,.65), 930px 500px 0 rgba(79,156,18,.60);
    filter: drop-shadow(0 0 7px rgba(91,170,20,.7));
    opacity: .75;
    pointer-events: none;
    animation: cvDataParticles 9s ease-in-out infinite alternate;
}


@keyframes cvDataParticles {

    0% {
        transform: translate3d(0, 15px, 0) scale(.7);
        opacity: .35;
    }

    50% {
        opacity: .95;
    }

    100% {
        transform: translate3d(25px, -25px, 0) scale(1.25);
        opacity: .75;
    }
}


/* =========================================================
   TECHNICAL RADAR RINGS
========================================================= */

.cv-control-section .cv-control-system {
    position: relative;
}


    /* large radar behind entire system */

    .cv-control-section .cv-control-system::before {
        content: "";
        position: absolute;
        width: 620px;
        height: 620px;
        left: 50%;
        top: 52%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        border: 1px solid rgba(79, 155, 18, .13);
        box-shadow: 0 0 0 45px rgba(79,155,18,.025), 0 0 0 90px rgba(79,155,18,.020), 0 0 0 135px rgba(79,155,18,.015), 0 0 0 180px rgba(79,155,18,.010);
        pointer-events: none;
        z-index: -1;
        animation: cvRadarPulse 5s ease-in-out infinite;
    }


@keyframes cvRadarPulse {

    0%, 100% {
        opacity: .35;
        transform: translate(-50%, -50%) scale(.94);
    }

    50% {
        opacity: .9;
        transform: translate(-50%, -50%) scale(1.04);
    }
}


/* =========================================================
   ROTATING RADAR ARC
========================================================= */

.cv-control-section .cv-control-system::after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid transparent;
    border-top-color: rgba(86, 166, 18, .55);
    border-right-color: rgba(86, 166, 18, .20);
    pointer-events: none;
    z-index: -1;
    animation: cvRadarRotate 12s linear infinite;
}


@keyframes cvRadarRotate {

    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}


/* =========================================================
   CONSOLE ENHANCEMENT
========================================================= */

.cv-control-console {
    position: relative;
    box-shadow: 0 25px 60px rgba(31, 72, 15, .16), 0 0 0 1px rgba(92, 166, 25, .08);
    animation: cvConsoleFloat 5s ease-in-out infinite;
}


@keyframes cvConsoleFloat {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}


/* =========================================================
   GLOW AROUND CENTRAL VISUAL
========================================================= */

.cv-control-section .cv-control-system {
    isolation: isolate;
}


    .cv-control-section .cv-control-system > * {
        position: relative;
    }


/* =========================================================
   EXTRA CORNER LIGHTS
========================================================= */

.cv-control-section {
    --cv-green: rgba(83, 164, 16, .8);
}


    .cv-control-section .cv-control-heading::before {
        content: "";
        position: absolute;
        width: 180px;
        height: 180px;
        left: 3%;
        top: 18%;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(92, 174, 25, .16), transparent 70% );
        filter: blur(12px);
        pointer-events: none;
        animation: cvSideGlow 6s ease-in-out infinite alternate;
    }


    .cv-control-section .cv-control-heading::after {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        right: 2%;
        top: 28%;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(70, 145, 17, .13), transparent 70% );
        filter: blur(15px);
        pointer-events: none;
        animation: cvSideGlow 7s ease-in-out infinite alternate-reverse;
    }


@keyframes cvSideGlow {

    from {
        transform: scale(.75);
        opacity: .35;
    }

    to {
        transform: scale(1.25);
        opacity: 1;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .cv-control-section::before {
        background-size: 38px 38px;
        opacity: .55;
    }


    .cv-control-section::after {
        width: 430px;
        height: 430px;
    }


    .cv-control-section .cv-control-system::before {
        width: 380px;
        height: 380px;
        box-shadow: 0 0 0 30px rgba(79,155,18,.025), 0 0 0 60px rgba(79,155,18,.018), 0 0 0 90px rgba(79,155,18,.012);
    }


    .cv-control-section .cv-control-system::after {
        width: 300px;
        height: 300px;
    }


    .cv-control-section .cv-control-heading::before {
        left: -80px;
    }


    .cv-control-section .cv-control-heading::after {
        right: -100px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .cv-control-section::before {
        background-size: 30px 30px;
    }


    .cv-control-section .cv-control-system::before {
        width: 280px;
        height: 280px;
    }


    .cv-control-section .cv-control-system::after {
        width: 220px;
        height: 220px;
    }


    .cv-control-section .cv-control-container::after {
        transform: scale(.7);
        transform-origin: top left;
    }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .cv-control-section::before,
    .cv-control-section::after,
    .cv-control-section .cv-control-container::before,
    .cv-control-section .cv-control-container::after,
    .cv-control-section .cv-control-system::before,
    .cv-control-section .cv-control-system::after,
    .cv-control-console,
    .cv-control-section .cv-control-heading::before,
    .cv-control-section .cv-control-heading::after {
        animation: none !important;
    }
}