/* =========================================================
   LOS COMMAND CENTER
========================================================= */

.los-command-section {
    --los-green: #59ff87;
    --los-green-soft: #79ffa1;
    --los-dark: #020907;
    position: relative;
    width: 100%;
    min-height: 1050px;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient( circle at 50% 60%, rgba(37, 255, 120, .12), transparent 28% ), radial-gradient( circle at 80% 30%, rgba(0, 180, 100, .08), transparent 25% ), #020907;
    color: #fff;
    font-family: "Inter", "Segoe UI", sans-serif;
}


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

.los-command-grid {
    position: absolute;
    inset: 0;
    opacity: .25;
    pointer-events: none;
    background-image: linear-gradient( rgba(85,255,145,.055) 1px, transparent 1px ), linear-gradient( 90deg, rgba(85,255,145,.055) 1px, transparent 1px );
    background-size: 70px 70px;
    mask-image: linear-gradient( to bottom, transparent, #000 12%, #000 88%, transparent );
}


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

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

.los-command-glow-1 {
    width: 600px;
    height: 600px;
    right: 10%;
    top: 30%;
    background: rgba(45,255,125,.12);
    animation: commandGlowOne 9s ease-in-out infinite alternate;
}

.los-command-glow-2 {
    width: 450px;
    height: 450px;
    left: 5%;
    bottom: 5%;
    background: rgba(0,160,100,.09);
    animation: commandGlowTwo 11s ease-in-out infinite alternate;
}

@keyframes commandGlowOne {
    from {
        transform: translate3d(-30px,20px,0) scale(.9);
    }

    to {
        transform: translate3d(40px,-30px,0) scale(1.1);
    }
}

@keyframes commandGlowTwo {
    from {
        transform: translate3d(20px,-20px,0);
    }

    to {
        transform: translate3d(-30px,30px,0);
    }
}


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

.los-command-particles i {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--los-green);
    box-shadow: 0 0 14px var(--los-green);
    opacity: .35;
    animation: commandParticle 3s ease-in-out infinite;
}

    .los-command-particles i:nth-child(1) {
        left: 8%;
        top: 18%;
    }

    .los-command-particles i:nth-child(2) {
        left: 17%;
        top: 65%;
        animation-delay: .4s;
    }

    .los-command-particles i:nth-child(3) {
        left: 28%;
        top: 25%;
        animation-delay: 1s;
    }

    .los-command-particles i:nth-child(4) {
        left: 38%;
        top: 80%;
        animation-delay: 1.5s;
    }

    .los-command-particles i:nth-child(5) {
        left: 48%;
        top: 18%;
        animation-delay: .8s;
    }

    .los-command-particles i:nth-child(6) {
        left: 58%;
        top: 72%;
        animation-delay: 1.8s;
    }

    .los-command-particles i:nth-child(7) {
        left: 67%;
        top: 22%;
        animation-delay: .2s;
    }

    .los-command-particles i:nth-child(8) {
        left: 78%;
        top: 55%;
        animation-delay: 1.3s;
    }

    .los-command-particles i:nth-child(9) {
        left: 90%;
        top: 28%;
        animation-delay: .6s;
    }

    .los-command-particles i:nth-child(10) {
        left: 93%;
        top: 78%;
        animation-delay: 1.7s;
    }

    .los-command-particles i:nth-child(11) {
        left: 12%;
        top: 87%;
        animation-delay: .9s;
    }

    .los-command-particles i:nth-child(12) {
        left: 33%;
        top: 48%;
        animation-delay: 2s;
    }

    .los-command-particles i:nth-child(13) {
        left: 73%;
        top: 84%;
        animation-delay: .3s;
    }

    .los-command-particles i:nth-child(14) {
        left: 84%;
        top: 40%;
        animation-delay: 1.1s;
    }

    .los-command-particles i:nth-child(15) {
        left: 52%;
        top: 91%;
        animation-delay: .5s;
    }

@keyframes commandParticle {
    0%,100% {
        opacity: .15;
        transform: scale(.6);
    }

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


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

.los-command-container {
    position: relative;
    width: min(1450px, calc(100% - 80px));
    margin: auto;
    padding: 75px 0 35px;
}


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

.los-command-header {
    position: relative;
    z-index: 10;
    max-width: 760px;
}

.los-command-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    color: var(--los-green);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 6px;
}

    .los-command-eyebrow span {
        width: 18px;
        height: 1px;
        background: var(--los-green);
        box-shadow: 0 0 10px var(--los-green);
    }

.los-command-header h2 {
    margin: 0;
    font-size:45px;
    font-weight: 750;
}

    .los-command-header h2 strong {
        color: var(--los-green-soft);
        text-shadow: 0 0 35px rgba(70,255,130,.18);
    }

.los-command-header p {
    max-width: 690px;
    margin: 27px 0 0;
    color: rgba(225,255,237,.68);
    font-size: 15px;
    line-height: 1.7;
}


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

.los-command-stage {
    position: relative;
    height: 650px;
    margin-top: 25px;
    perspective: 1400px;
    transform-style: preserve-3d;
}


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

.los-command-orbit {
    position: absolute;
    left: 50%;
    top: 57%;
    border: 1px solid rgba(75,255,140,.18);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%,-50%) rotateX(68deg);
}

.los-command-orbit-1 {
    width: 480px;
    height: 180px;
    animation: orbitPulse 5s ease-in-out infinite;
}

.los-command-orbit-2 {
    width: 690px;
    height: 260px;
    opacity: .7;
}

.los-command-orbit-3 {
    width: 900px;
    height: 340px;
    opacity: .35;
}

@keyframes orbitPulse {
    0%,100% {
        opacity: .35;
        transform: translate(-50%,-50%) rotateX(68deg) scale(.96);
    }

    50% {
        opacity: .8;
        transform: translate(-50%,-50%) rotateX(68deg) scale(1.03);
    }
}


/* =========================================================
   COLUMNS
========================================================= */

.los-command-column {
    position: absolute;
    top: 75px;
    width: 270px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.los-command-left {
    left: 0;
}

.los-command-right {
    right: 0;
}


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

.los-command-card {
    position: relative;
    min-height: 155px;
    padding: 20px 21px;
    overflow: hidden;
    border: 1px solid rgba(83,255,143,.28);
    border-radius: 18px;
    background: linear-gradient( 145deg, rgba(12,45,32,.82), rgba(2,18,12,.84) );
    backdrop-filter: blur(18px);
    box-shadow: 0 20px 45px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.045), 0 0 25px rgba(50,255,120,.035);
    transform-style: preserve-3d;
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
    opacity: 0;
    transform: translateY(35px) rotateX(7deg);
}

.los-command-section.is-visible .los-command-card {
    opacity: 1;
    transform: translateY(0) rotateX(0);
}

    .los-command-section.is-visible
    .los-command-card:nth-child(2) {
        transition-delay: .12s;
    }

    .los-command-section.is-visible
    .los-command-card:nth-child(3) {
        transition-delay: .24s;
    }

.los-command-card:hover {
    border-color: rgba(95,255,145,.72);
    box-shadow: 0 28px 60px rgba(0,0,0,.5), 0 0 35px rgba(45,255,120,.13);
    transform: translateY(-5px) translateZ(15px);
}


/* CARD LIGHT SWEEP */

.los-command-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( 115deg, transparent 20%, rgba(100,255,160,.09) 50%, transparent 80% );
    transform: translateX(-120%);
    transition: transform .8s ease;
}

.los-command-card:hover::before {
    transform: translateX(120%);
}


/* CARD TOP */

.los-command-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .los-command-card-top span {
        color: var(--los-green);
        font-size: 26px;
        font-weight: 750;
    }

    .los-command-card-top b {
        color: rgba(170,255,196,.42);
        font-size: 7px;
        letter-spacing: 2px;
    }


/* CARD ICON */

.los-command-card-icon {
    position: absolute;
    top: 17px;
    right: 18px;
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(80,255,140,.28);
    border-radius: 10px;
    background: rgba(45,255,120,.06);
    color: var(--los-green);
    font-size: 19px;
    opacity: .75;
}


/* CARD CONTENT */

.los-command-card h3 {
    position: relative;
    margin: 9px 50px 0 0;
    color: #fff;
    font-size: 14px;
    line-height: 1.25;
}

.los-command-card p {
    position: relative;
    margin: 10px 0 0;
    color: rgba(220,255,232,.57);
    font-size: 10px;
    line-height: 1.55;
}


/* PROGRESS */

.los-card-progress {
    position: absolute;
    left: 21px;
    right: 21px;
    bottom: 11px;
    height: 1px;
    overflow: hidden;
    background: rgba(100,255,155,.08);
}

    .los-card-progress span {
        display: block;
        width: 35%;
        height: 100%;
        background: var(--los-green);
        box-shadow: 0 0 8px var(--los-green);
        animation: cardProgress 3s ease-in-out infinite;
    }

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

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


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

.los-command-center {
    position: absolute;
    left: 50%;
    top: 53%;
    width: 500px;
    height: 500px;
    transform: translate(-50%,-50%) translateZ(30px);
    transform-style: preserve-3d;
    transition: transform .25s ease-out;
    z-index: 5;
}


/* =========================================================
   CENTER RINGS
========================================================= */

.los-command-ring {
    position: absolute;
    left: 50%;
    top: 57%;
    border: 1px solid rgba(75,255,140,.25);
    border-radius: 50%;
    transform: translate(-50%,-50%) rotateX(65deg);
    transform-style: preserve-3d;
}

.ring-a {
    width: 280px;
    height: 110px;
    animation: ringSpin 8s linear infinite;
}

.ring-b {
    width: 380px;
    height: 150px;
    animation: ringSpin 12s linear infinite reverse;
}

.ring-c {
    width: 470px;
    height: 190px;
    opacity: .4;
    animation: ringSpin 16s linear infinite;
}

@keyframes ringSpin {
    from {
        transform: translate(-50%,-50%) rotateX(65deg) rotateZ(0deg);
    }

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


/* =========================================================
   DATA DOTS
========================================================= */

.los-data-dot {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--los-green);
    box-shadow: 0 0 8px var(--los-green), 0 0 25px var(--los-green);
    animation: dataDot 2.4s ease-in-out infinite;
}

.dot-a {
    left: 9%;
    top: 50%;
}

.dot-b {
    right: 8%;
    top: 45%;
    animation-delay: .5s;
}

.dot-c {
    left: 32%;
    top: 17%;
    animation-delay: 1s;
}

.dot-d {
    right: 30%;
    bottom: 14%;
    animation-delay: 1.5s;
}

@keyframes dataDot {
    0%,100% {
        opacity: .3;
        transform: scale(.7);
    }

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


/* =========================================================
   3D PLATFORM
========================================================= */

.los-command-platform {
    position: absolute;
    left: 50%;
    top: 57%;
    width: 340px;
    height: 210px;
    transform: translate(-50%,-50%) rotateX(58deg);
    transform-style: preserve-3d;
}


/* PLATFORM LAYERS */

.los-platform-layer {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border: 1px solid rgba(85,255,145,.45);
    border-radius: 28px;
    background: linear-gradient( 145deg, rgba(15,65,45,.8), rgba(2,20,13,.92) );
    box-shadow: 0 0 30px rgba(50,255,120,.12);
}

.layer-1 {
    width: 340px;
    height: 210px;
}

.layer-2 {
    width: 305px;
    height: 180px;
    transform: translate(-50%,-50%) translateZ(16px);
}

.layer-3 {
    width: 265px;
    height: 150px;
    transform: translate(-50%,-50%) translateZ(32px);
}


/* PLATFORM GLOW */

.los-platform-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 220px;
    height: 120px;
    transform: translate(-50%,-50%) translateZ(45px);
    border-radius: 50%;
    background: rgba(60,255,125,.18);
    filter: blur(35px);
    animation: platformGlow 3s ease-in-out infinite alternate;
}

@keyframes platformGlow {
    from {
        opacity: .35;
        transform: translate(-50%,-50%) translateZ(45px) scale(.85);
    }

    to {
        opacity: .8;
        transform: translate(-50%,-50%) translateZ(45px) scale(1.15);
    }
}


/* =========================================================
   LOS CORE
========================================================= */

.los-command-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 190px;
    height: 125px;
    transform: translate(-50%,-50%) translateZ(65px) rotateX(-58deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(105,255,160,.58);
    border-radius: 17px;
    background: linear-gradient( 145deg, #123a29, #04150d );
    box-shadow: 0 0 40px rgba(55,255,120,.25), inset 0 0 30px rgba(60,255,130,.07);
    animation: coreFloat 4s ease-in-out infinite;
}

@keyframes coreFloat {
    0%,100% {
        transform: translate(-50%,-50%) translateZ(65px) rotateX(-58deg) translateY(0);
    }

    50% {
        transform: translate(-50%,-50%) translateZ(65px) rotateX(-58deg) translateY(-8px);
    }
}

.los-core-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient( 120deg, transparent 20%, rgba(120,255,170,.12), transparent 70% );
    animation: coreShine 4s linear infinite;
}

@keyframes coreShine {
    from {
        transform: translateX(-100%);
    }

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

.los-core-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    color: rgba(205,255,220,.58);
    font-size: 7px;
    letter-spacing: 1.5px;
}

    .los-core-status i {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--los-green);
        box-shadow: 0 0 8px var(--los-green);
    }

.los-command-core > strong {
    position: relative;
    color: var(--los-green-soft);
    font-size: 43px;
    line-height: 1;
    text-shadow: 0 0 12px rgba(70,255,130,.7), 0 0 35px rgba(70,255,130,.3);
}

.los-command-core > small {
    position: relative;
    margin-top: 5px;
    text-align: center;
    color: rgba(220,255,231,.78);
    font-size: 7px;
    line-height: 1.35;
    letter-spacing: 1px;
}


/* =========================================================
   FLOATING APPLICATION PANEL
========================================================= */

.los-command-panel {
    position: absolute;
    left: 50%;
    top: -18%;
    width: 205px;
    padding: 15px;
    transform: translateX(-50%) translateZ(80px) rotateY(-8deg) rotateX(3deg);
    border: 1px solid rgba(100,255,165,.42);
    border-radius: 15px;
    background: rgba(5,29,20,.78);
    backdrop-filter: blur(18px);
    box-shadow: 0 20px 50px rgba(0,0,0,.45), 0 0 30px rgba(50,255,120,.1);
    animation: applicationFloat 4.5s ease-in-out infinite;
    z-index: 15;
}

@keyframes applicationFloat {
    0%,100% {
        transform: translateX(-50%) translateZ(80px) translateY(0) rotateY(-8deg) rotateX(3deg);
    }

    50% {
        transform: translateX(-50%) translateZ(80px) translateY(-12px) rotateY(-4deg) rotateX(3deg);
    }
}

.los-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 9px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

    .los-panel-header b {
        color: var(--los-green);
        font-size: 15px;
    }

.los-panel-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-top: 1px solid rgba(255,255,255,.05);
    color: rgba(220,255,232,.42);
    font-size: 9px;
}

    .los-panel-row i {
        color: rgba(90,255,140,.35);
        font-style: normal;
    }

    .los-panel-row.active {
        color: rgba(220,255,232,.72);
    }

        .los-panel-row.active i {
            color: var(--los-green);
        }


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

.los-center-label {
    position: absolute;
    left: 50%;
    bottom: 1%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    color: rgba(190,255,210,.4);
    font-size: 7px;
    letter-spacing: 2px;
}

    .los-center-label b {
        color: rgba(110,255,150,.7);
    }


/* =========================================================
   CONNECTING LINES
========================================================= */

.los-command-connectors {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.connector {
    position: absolute;
    height: 1px;
    transform-origin: left center;
    background: linear-gradient( 90deg, transparent, rgba(75,255,140,.8), transparent );
    box-shadow: 0 0 10px rgba(70,255,130,.5);
}

    .connector::after {
        content: "";
        position: absolute;
        right: 30%;
        top: 50%;
        width: 6px;
        height: 6px;
        transform: translateY(-50%);
        border-radius: 50%;
        background: var(--los-green);
        box-shadow: 0 0 12px var(--los-green);
        animation: connectorNode 2s ease-in-out infinite;
    }

@keyframes connectorNode {
    0%,100% {
        opacity: .3;
        transform: translateY(-50%) scale(.7);
    }

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

.left-1 {
    width: 220px;
    left: 18%;
    top: 31%;
    transform: rotate(10deg);
}

.left-2 {
    width: 230px;
    left: 18%;
    top: 49%;
    transform: rotate(2deg);
}

.left-3 {
    width: 220px;
    left: 18%;
    top: 67%;
    transform: rotate(-12deg);
}

.right-1 {
    width: 220px;
    right: 18%;
    top: 31%;
    transform: rotate(170deg);
}

.right-2 {
    width: 230px;
    right: 18%;
    top: 49%;
    transform: rotate(178deg);
}

.right-3 {
    width: 220px;
    right: 18%;
    top: 67%;
    transform: rotate(192deg);
}


/* =========================================================
   BENEFITS
========================================================= */

.los-command-benefits {
    position: relative;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    min-height: 78px;
    border: 1px solid rgba(75,255,140,.42);
    border-radius: 18px;
    background: rgba(3,20,14,.72);
    backdrop-filter: blur(18px);
    box-shadow: 0 0 35px rgba(50,255,120,.05), inset 0 0 25px rgba(50,255,120,.03);
}

    .los-command-benefits > div {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
    }

        .los-command-benefits > div:not(:last-child)::after {
            content: "";
            position: absolute;
            right: 0;
            width: 1px;
            height: 30px;
            background: rgba(110,255,155,.22);
        }

    .los-command-benefits span {
        color: var(--los-green);
        font-size: 27px;
        text-shadow: 0 0 15px rgba(70,255,130,.7);
    }

    .los-command-benefits strong {
        color: rgba(240,255,245,.88);
        font-size: 9px;
        letter-spacing: 1.5px;
    }


/* =========================================================
   FOOTER
========================================================= */

.los-command-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
    color: rgba(190,235,207,.32);
    font-size: 8px;
    letter-spacing: 2px;
}

    .los-command-footer b {
        margin: 0 7px;
        color: var(--los-green);
    }

    .los-command-footer em {
        color: rgba(190,235,207,.38);
        font-style: normal;
    }


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1200px) {

    .los-command-container {
        width: min(1080px, calc(100% - 50px));
    }

    .los-command-column {
        width: 235px;
    }

    .los-command-card {
        min-height: 150px;
    }

        .los-command-card p {
            font-size: 9px;
        }

    .los-command-center {
        transform: translate(-50%,-50%) scale(.82) translateZ(20px);
    }

    .left-1,
    .left-2,
    .left-3 {
        left: 20%;
        width: 170px;
    }

    .right-1,
    .right-2,
    .right-3 {
        right: 20%;
        width: 170px;
    }
}


/* =========================================================
   RESPONSIVE — MOBILE/TABLET
========================================================= */

@media (max-width: 900px) {

    .los-command-section {
        min-height: auto;
    }

    .los-command-container {
        width: calc(100% - 30px);
        padding: 55px 0 30px;
    }

    .los-command-header {
        max-width: 100%;
    }

        .los-command-header h2 {
            font-size: clamp(38px, 8vw, 55px);
            letter-spacing: -2px;
        }

        .los-command-header p {
            font-size: 13px;
        }

    .los-command-stage {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 18px;
        margin-top: 35px;
        perspective: none;
    }

    .los-command-orbit,
    .los-command-connectors {
        display: none;
    }


    /* CENTER FIRST */

    .los-command-center {
        position: relative;
        left: auto;
        top: auto;
        width: min(480px,100%);
        height: 390px;
        margin: 0 auto;
        transform: none !important;
    }


    .los-command-column {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .los-command-left {
        order: 2;
    }

    .los-command-right {
        order: 3;
    }

    .los-command-card {
        min-height: 165px;
    }

        .los-command-card:hover {
            transform: translateY(-4px);
        }


    /* CENTER SCALE */

    .los-command-platform {
        transform: translate(-50%,-50%) rotateX(58deg) scale(.9);
    }

    .los-command-panel {
        transform: translateX(-50%) scale(.92);
    }


    /* BENEFITS */

    .los-command-benefits {
        margin-top: 20px;
        grid-template-columns: 1fr 1fr;
    }

        .los-command-benefits > div {
            min-height: 65px;
        }

            .los-command-benefits > div:nth-child(2)::after {
                display: none;
            }

            .los-command-benefits > div:nth-child(1),
            .los-command-benefits > div:nth-child(2) {
                border-bottom: 1px solid rgba(110,255,155,.15);
            }

    .los-command-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        line-height: 1.8;
    }
}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 600px) {

    .los-command-container {
        width: calc(100% - 22px);
        padding-top: 40px;
    }

    .los-command-eyebrow {
        gap: 9px;
        font-size: 8px;
        letter-spacing: 3px;
    }

        .los-command-eyebrow span {
            width: 10px;
        }

    .los-command-header h2 {
        font-size: 36px;
        line-height: 1.04;
    }

    .los-command-header p {
        font-size: 12px;
        line-height: 1.65;
        margin-top: 20px;
    }

    .los-command-stage {
        margin-top: 20px;
    }


    /* CENTER */

    .los-command-center {
        height: 330px;
        width: 100%;
        overflow: visible;
    }

    .los-command-ring.ring-a {
        width: 230px;
        height: 90px;
    }

    .los-command-ring.ring-b {
        width: 300px;
        height: 120px;
    }

    .los-command-ring.ring-c {
        width: 370px;
        height: 145px;
    }

    .los-command-platform {
        width: 280px;
        height: 175px;
        transform: translate(-50%,-50%) rotateX(58deg) scale(.78);
    }

    .los-command-panel {
        width: 175px;
        top: 0;
        padding: 12px;
        transform: translateX(-50%) scale(.82);
    }

    .los-center-label {
        bottom: 0;
        font-size: 6px;
    }


    /* CARDS */

    .los-command-column {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .los-command-card {
        min-height: 145px;
        padding: 18px;
    }

    .los-command-card-top span {
        font-size: 24px;
    }

    .los-command-card h3 {
        font-size: 15px;
    }

    .los-command-card p {
        font-size: 10px;
        max-width: 90%;
    }


    /* BENEFITS */

    .los-command-benefits {
        grid-template-columns: 1fr;
        border-radius: 15px;
    }

        .los-command-benefits > div {
            min-height: 58px;
            justify-content: flex-start;
            padding-left: 25px;
        }

            .los-command-benefits > div::after {
                display: none !important;
            }

            .los-command-benefits > div:not(:last-child) {
                border-bottom: 1px solid rgba(110,255,155,.14);
            }

    .los-command-footer {
        font-size: 7px;
    }
}


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

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

    .los-command-section *,
    .los-command-section *::before,
    .los-command-section *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}







/* =========================================================
   LMS — LOAN MANAGEMENT SYSTEM
========================================================= */

.lms-section {
    position: relative;
    width: 100%;
    min-height: 1050px;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient( circle at 50% 52%, rgba(120, 212, 61, .10), transparent 27% ), linear-gradient( 180deg, #f8fbf7 0%, #f2f7f1 100% );
    color: #18201b;
    font-family: "Inter", "Segoe UI", sans-serif;
}


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

.lms-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .45;
    background-image: linear-gradient( rgba(30, 80, 45, .045) 1px, transparent 1px ), linear-gradient( 90deg, rgba(30, 80, 45, .045) 1px, transparent 1px );
    background-size: 65px 65px;
    mask-image: linear-gradient( to bottom, transparent, #000 15%, #000 85%, transparent );
}


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

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

.lms-glow-1 {
    width: 500px;
    height: 500px;
    top: 30%;
    left: 50%;
    background: rgba(120, 212, 61, .12);
    transform: translateX(-50%);
    animation: lmsGlow1 9s ease-in-out infinite alternate;
}

.lms-glow-2 {
    width: 350px;
    height: 350px;
    right: -80px;
    bottom: 5%;
    background: rgba(45, 145, 110, .08);
    animation: lmsGlow2 10s ease-in-out infinite alternate;
}

@keyframes lmsGlow1 {
    from {
        transform: translate(-50%, -20px) scale(.9);
    }

    to {
        transform: translate(-50%, 25px) scale(1.1);
    }
}

@keyframes lmsGlow2 {
    from {
        transform: translate(20px, -20px);
    }

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


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

.lms-particles i {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #78d43d;
    box-shadow: 0 0 12px rgba(120, 212, 61, .8);
    opacity: .35;
    animation: lmsParticle 4s ease-in-out infinite;
}

    .lms-particles i:nth-child(1) {
        left: 7%;
        top: 20%;
    }

    .lms-particles i:nth-child(2) {
        left: 16%;
        top: 55%;
        animation-delay: .8s;
    }

    .lms-particles i:nth-child(3) {
        left: 29%;
        top: 15%;
        animation-delay: 1.5s;
    }

    .lms-particles i:nth-child(4) {
        left: 43%;
        top: 25%;
        animation-delay: 2s;
    }

    .lms-particles i:nth-child(5) {
        left: 58%;
        top: 17%;
        animation-delay: .5s;
    }

    .lms-particles i:nth-child(6) {
        left: 73%;
        top: 29%;
        animation-delay: 1.2s;
    }

    .lms-particles i:nth-child(7) {
        left: 89%;
        top: 21%;
        animation-delay: 2.2s;
    }

    .lms-particles i:nth-child(8) {
        left: 94%;
        top: 55%;
        animation-delay: .4s;
    }

    .lms-particles i:nth-child(9) {
        left: 82%;
        top: 77%;
        animation-delay: 1.7s;
    }

    .lms-particles i:nth-child(10) {
        left: 68%;
        top: 88%;
        animation-delay: .9s;
    }

    .lms-particles i:nth-child(11) {
        left: 31%;
        top: 83%;
        animation-delay: 2.4s;
    }

    .lms-particles i:nth-child(12) {
        left: 12%;
        top: 76%;
        animation-delay: 1.1s;
    }

@keyframes lmsParticle {

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

    50% {
        opacity: .8;
        transform: scale(1.5) translateY(-12px);
    }
}


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

.lms-container {
    position: relative;
    width: min(1400px, calc(100% - 80px));
    margin: auto;
    padding: 80px 0 40px;
}


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

.lms-header {
    position: relative;
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
    z-index: 10;
}

.lms-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    color: #65b72e;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 5px;
    margin-bottom: 22px;
}

    .lms-eyebrow span {
        width: 25px;
        height: 1px;
        background: #78d43d;
        box-shadow: 0 0 8px rgba(120, 212, 61, .6);
    }

.lms-header h2 {
    margin: 0;
    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.02;
    letter-spacing: -3px;
    font-weight: 700;
    color: #18201b;
}

    .lms-header h2 strong {
        display: block;
        color: #70bd36;
        font-weight: 700;
    }

.lms-header p {
    max-width: 760px;
    margin: 24px auto 0;
    color: #657069;
    font-size: 15px;
    line-height: 1.75;
}


/* =========================================================
   MAIN VISUAL
========================================================= */

.lms-visual {
    position: relative;
    height: 590px;
    margin-top: 30px;
    perspective: 1400px;
    transform-style: preserve-3d;
}


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

.lms-orbit {
    position: absolute;
    left: 50%;
    top: 58%;
    border: 1px solid rgba(99, 176, 55, .22);
    border-radius: 50%;
    pointer-events: none;
    transform-style: preserve-3d;
}

.lms-orbit-1 {
    width: 530px;
    height: 190px;
    transform: translate(-50%, -50%) rotateX(67deg);
    animation: lmsOrbit1 12s linear infinite;
}

.lms-orbit-2 {
    width: 700px;
    height: 260px;
    transform: translate(-50%, -50%) rotateX(67deg);
    animation: lmsOrbit2 17s linear infinite reverse;
}

.lms-orbit-3 {
    width: 880px;
    height: 330px;
    transform: translate(-50%, -50%) rotateX(67deg);
    opacity: .55;
    animation: lmsOrbit3 22s linear infinite;
}

@keyframes lmsOrbit1 {
    from {
        transform: translate(-50%, -50%) rotateX(67deg) rotateZ(0);
    }

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

@keyframes lmsOrbit2 {
    from {
        transform: translate(-50%, -50%) rotateX(67deg) rotateZ(360deg);
    }

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

@keyframes lmsOrbit3 {
    from {
        transform: translate(-50%, -50%) rotateX(67deg) rotateZ(0);
    }

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


/* =========================================================
   CONNECTIONS
========================================================= */

.lms-connections {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.lms-line {
    position: absolute;
    height: 1px;
    transform-origin: left center;
    background: linear-gradient( 90deg, transparent, rgba(100, 190, 55, .7), transparent );
    box-shadow: 0 0 10px rgba(120, 212, 61, .3);
}

.lms-line-1 {
    width: 300px;
    left: 21%;
    top: 45%;
    transform: rotate(17deg);
}

.lms-line-2 {
    width: 330px;
    left: 20%;
    top: 59%;
    transform: rotate(-7deg);
}

.lms-line-3 {
    width: 320px;
    left: 24%;
    top: 72%;
    transform: rotate(-25deg);
}

.lms-line-4 {
    width: 300px;
    left: 55%;
    top: 44%;
    transform: rotate(-17deg);
}

.lms-line-5 {
    width: 330px;
    left: 55%;
    top: 59%;
    transform: rotate(7deg);
}

.lms-line-6 {
    width: 320px;
    left: 53%;
    top: 72%;
    transform: rotate(25deg);
}


/* NODES */

.lms-node {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #78d43d;
    box-shadow: 0 0 8px #78d43d, 0 0 20px rgba(120, 212, 61, .6);
    animation: lmsNode 2.2s ease-in-out infinite;
}

.lms-node-1 {
    left: 28%;
    top: 49%;
}

.lms-node-2 {
    left: 26%;
    top: 59%;
    animation-delay: .3s;
}

.lms-node-3 {
    left: 30%;
    top: 70%;
    animation-delay: .7s;
}

.lms-node-4 {
    right: 28%;
    top: 49%;
    animation-delay: .2s;
}

.lms-node-5 {
    right: 26%;
    top: 59%;
    animation-delay: .5s;
}

.lms-node-6 {
    right: 30%;
    top: 70%;
    animation-delay: .9s;
}

@keyframes lmsNode {

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

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


/* =========================================================
   CENTRAL 3D HUB
========================================================= */

.lms-hub {
    position: absolute;
    left: 50%;
    top: 59%;
    width: 300px;
    height: 250px;
    transform: translate(-50%, -50%) rotateX(4deg) rotateY(0deg);
    transform-style: preserve-3d;
    z-index: 6;
    transition: transform .25s ease-out;
}

.lms-hub-shadow {
    position: absolute;
    width: 270px;
    height: 80px;
    left: 50%;
    bottom: 5px;
    transform: translateX(-50%) rotateX(65deg);
    border-radius: 50%;
    background: rgba(76, 150, 47, .18);
    filter: blur(15px);
}


/* PLATFORM */

.lms-hub-platform {
    position: absolute;
    width: 270px;
    height: 130px;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%) rotateX(58deg);
    transform-style: preserve-3d;
}

.lms-platform-top {
    position: absolute;
    inset: 0;
    border-radius: 28px;
    border: 1px solid rgba(91, 164, 48, .55);
    background: linear-gradient( 145deg, #ffffff, #dfeadd );
    box-shadow: 0 15px 35px rgba(39, 83, 48, .15), inset 0 0 25px rgba(120, 212, 61, .08);
}

    .lms-platform-top span {
        position: absolute;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #78d43d;
        box-shadow: 0 0 10px rgba(120, 212, 61, .7);
    }

        .lms-platform-top span:nth-child(1) {
            left: 22%;
            top: 30%;
        }

        .lms-platform-top span:nth-child(2) {
            right: 20%;
            top: 28%;
        }

        .lms-platform-top span:nth-child(3) {
            left: 50%;
            bottom: 18%;
        }


/* PLATFORM SIDE */

.lms-platform-side {
    position: absolute;
    left: 0;
    bottom: -35px;
    width: 270px;
    height: 45px;
    border-radius: 0 0 25px 25px;
    background: linear-gradient( 180deg, #d4e5d2, #b8cdb7 );
    border: 1px solid rgba(91, 164, 48, .4);
    transform-origin: top;
    transform: rotateX(-90deg);
}


/* HUB FACE */

.lms-hub-face {
    position: absolute;
    left: 50%;
    top: -18px;
    width: 155px;
    height: 125px;
    transform: translateX(-50%) translateZ(60px) rotateX(-58deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    border: 1px solid rgba(85, 160, 46, .55);
    background: linear-gradient( 145deg, #173a27, #071a11 );
    box-shadow: 0 20px 45px rgba(20, 60, 30, .25), 0 0 35px rgba(120, 212, 61, .14);
}

.lms-hub-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    margin-bottom: 6px;
    border: 1px solid rgba(120, 212, 61, .45);
    border-radius: 9px;
    color: #8be35b;
    font-size: 19px;
    background: rgba(120, 212, 61, .08);
}

    .lms-hub-icon span {
        animation: hubRotate 5s linear infinite;
    }

@keyframes hubRotate {
    to {
        transform: rotate(360deg);
    }
}

.lms-hub-face strong {
    color: #7fe34b;
    font-size: 34px;
    line-height: 1;
    text-shadow: 0 0 18px rgba(120, 212, 61, .5);
}

.lms-hub-face small {
    margin-top: 6px;
    color: rgba(232, 255, 235, .75);
    font-size: 7px;
    letter-spacing: 1.5px;
    text-align: center;
}


/* HUB GLOW */

.lms-hub-pulse {
    position: absolute;
    left: 50%;
    top: 45%;
    width: 130px;
    height: 130px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(120, 212, 61, .13);
    filter: blur(25px);
    z-index: -1;
    animation: hubPulse 2.8s ease-in-out infinite alternate;
}

@keyframes hubPulse {
    from {
        opacity: .25;
        transform: translate(-50%, -50%) scale(.8);
    }

    to {
        opacity: .75;
        transform: translate(-50%, -50%) scale(1.15);
    }
}


/* HUB RINGS */

.lms-hub-ring {
    position: absolute;
    left: 50%;
    top: 59%;
    border: 1px solid rgba(95, 175, 52, .35);
    border-radius: 50%;
    transform-style: preserve-3d;
}

.hub-ring-1 {
    width: 350px;
    height: 135px;
    transform: translate(-50%, -50%) rotateX(66deg);
    animation: hubRing1 8s linear infinite;
}

.hub-ring-2 {
    width: 430px;
    height: 170px;
    transform: translate(-50%, -50%) rotateX(66deg);
    animation: hubRing2 12s linear infinite reverse;
}

@keyframes hubRing1 {
    to {
        transform: translate(-50%, -50%) rotateX(66deg) rotateZ(360deg);
    }
}

@keyframes hubRing2 {
    to {
        transform: translate(-50%, -50%) rotateX(66deg) rotateZ(-360deg);
    }
}


/* =========================================================
   LMS CARDS
========================================================= */

.lms-card {
    position: absolute;
    width: 245px;
    min-height: 155px;
    padding: 19px 20px;
    border-radius: 20px;
    border: 1px solid rgba(70, 120, 65, .18);
    background: linear-gradient( 145deg, rgba(255,255,255,.96), rgba(244,249,243,.92) );
    box-shadow: 0 18px 45px rgba(30, 65, 38, .09), 0 4px 10px rgba(30, 65, 38, .04), inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter: blur(12px);
    transform-style: preserve-3d;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    z-index: 8;
}

    .lms-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient( 120deg, transparent 25%, rgba(120,212,61,.10), transparent 75% );
        transform: translateX(-110%);
        transition: transform .7s ease;
        pointer-events: none;
    }

    .lms-card:hover::before {
        transform: translateX(110%);
    }

    .lms-card:hover {
        border-color: rgba(100, 180, 55, .5);
        box-shadow: 0 25px 60px rgba(35, 90, 45, .14), 0 0 25px rgba(120, 212, 61, .10);
    }


/* CARD TOP */

.lms-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lms-card-number {
    color: #70bf39;
    font-size: 27px;
    font-weight: 800;
}

.lms-card-icon {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #6cba38;
    border: 1px solid rgba(104, 180, 55, .22);
    background: rgba(120, 212, 61, .08);
    font-size: 18px;
}


/* CARD CONTENT */

.lms-card h3 {
    margin: 7px 0 0;
    color: #1b261e;
    font-size: 15px;
    line-height: 1.2;
}

.lms-card p {
    margin: 9px 0 0;
    color: #69746d;
    font-size: 10px;
    line-height: 1.55;
}

.lms-card-line {
    display: block;
    width: 35px;
    height: 2px;
    margin-top: 12px;
    background: #78d43d;
    box-shadow: 0 0 8px rgba(120, 212, 61, .4);
}


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

.lms-card-1 {
    left: 5%;
    top: 9%;
    animation: lmsFloat1 5s ease-in-out infinite;
}

.lms-card-2 {
    left: 0;
    top: 43%;
    animation: lmsFloat2 5.8s ease-in-out infinite;
}

.lms-card-3 {
    left: 11%;
    top: 78%;
    animation: lmsFloat3 6s ease-in-out infinite;
}

.lms-card-4 {
    right: 5%;
    top: 9%;
    animation: lmsFloat2 5.5s ease-in-out infinite;
}

.lms-card-5 {
    right: 0;
    top: 42%;
    animation: lmsFloat1 6s ease-in-out infinite;
}

.lms-card-6 {
    right: 11%;
    top: 78%;
    animation: lmsFloat3 5.7s ease-in-out infinite;
}

@keyframes lmsFloat1 {

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

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

@keyframes lmsFloat2 {

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

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

@keyframes lmsFloat3 {

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

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


/* =========================================================
   LIFECYCLE
========================================================= */

.lms-lifecycle {
    position: relative;
    z-index: 12;
    display: flex;
    align-items: center;
    gap: 35px;
    min-height: 82px;
    padding: 15px 25px;
    border: 1px solid rgba(76, 135, 61, .2);
    border-radius: 18px;
    background: rgba(255,255,255,.78);
    box-shadow: 0 15px 35px rgba(30, 65, 38, .07), inset 0 1px 0 white;
    backdrop-filter: blur(14px);
}

.lms-life-title {
    display: flex;
    flex-direction: column;
    min-width: 125px;
}

    .lms-life-title span {
        color: #4d7e3c;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 2px;
    }

    .lms-life-title small {
        margin-top: 5px;
        color: #9aa39d;
        font-size: 7px;
        letter-spacing: 1.3px;
    }

.lms-life-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    gap: 14px;
}

    .lms-life-flow span {
        color: #334238;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 1px;
        white-space: nowrap;
    }

    .lms-life-flow b {
        color: #78c844;
        font-size: 18px;
    }


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

.lms-bottom {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-top: 25px;
}

.lms-bottom-line {
    flex: 1;
    height: 1px;
    background: linear-gradient( 90deg, transparent, rgba(91, 145, 70, .3) );
}

    .lms-bottom-line:last-child {
        background: linear-gradient( 90deg, rgba(91, 145, 70, .3), transparent );
    }

.lms-bottom p {
    margin: 0;
    color: #69756e;
    font-size: 10px;
    letter-spacing: 2px;
    text-align: center;
}

.lms-bottom strong {
    color: #5da631;
}


/* =========================================================
   RESPONSIVE — 1200px
========================================================= */

@media (max-width: 1200px) {

    .lms-container {
        width: min(1100px, calc(100% - 50px));
    }

    .lms-card {
        width: 210px;
    }

    .lms-card-1 {
        left: 1%;
    }

    .lms-card-3 {
        left: 5%;
    }

    .lms-card-4 {
        right: 1%;
    }

    .lms-card-6 {
        right: 5%;
    }

    .lms-orbit-3 {
        width: 760px;
    }

    .lms-line {
        opacity: .65;
    }
}


/* =========================================================
   RESPONSIVE — 900px
========================================================= */

@media (max-width: 900px) {

    .lms-section {
        min-height: auto;
    }

    .lms-container {
        width: calc(100% - 30px);
        padding: 60px 0 35px;
    }

    .lms-header h2 {
        font-size: clamp(38px, 7vw, 55px);
    }

    .lms-header p {
        font-size: 14px;
    }

    .lms-visual {
        height: auto;
        margin-top: 45px;
        padding: 20px 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .lms-orbit,
    .lms-connections {
        display: none;
    }

    .lms-hub {
        position: relative;
        left: auto;
        top: auto;
        grid-column: 1 / -1;
        grid-row: 1;
        margin: 0 auto 30px;
        transform: scale(.9);
    }

    .lms-card {
        position: relative;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        width: auto;
        min-height: 160px;
        margin: 0 !important;
        animation: none;
    }

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

    .lms-card-2 {
        grid-column: 2;
        grid-row: 2;
    }

    .lms-card-3 {
        grid-column: 1;
        grid-row: 3;
    }

    .lms-card-4 {
        grid-column: 2;
        grid-row: 3;
    }

    .lms-card-5 {
        grid-column: 1;
        grid-row: 4;
    }

    .lms-card-6 {
        grid-column: 2;
        grid-row: 4;
    }

    .lms-lifecycle {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding: 20px;
    }

    .lms-life-flow {
        width: 100%;
        flex-wrap: wrap;
    }
}


/* =========================================================
   RESPONSIVE — 600px
========================================================= */

@media (max-width: 600px) {

    .lms-container {
        width: calc(100% - 24px);
        padding-top: 45px;
    }

    .lms-eyebrow {
        gap: 8px;
        font-size: 8px;
        letter-spacing: 3px;
    }

        .lms-eyebrow span {
            width: 15px;
        }

    .lms-header h2 {
        font-size: 36px;
        line-height: 1.06;
        letter-spacing: -1.5px;
    }

        .lms-header h2 strong {
            margin-top: 4px;
        }

    .lms-header p {
        font-size: 13px;
        line-height: 1.65;
        margin-top: 20px;
    }

    .lms-visual {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 35px;
    }

    .lms-hub {
        grid-column: 1;
        grid-row: 1;
        width: 280px;
        transform: scale(.82);
        margin-bottom: 5px;
    }

    .lms-card {
        grid-column: 1 !important;
        min-height: 145px;
        padding: 17px 18px;
    }

    .lms-card-1 {
        grid-row: 2;
    }

    .lms-card-2 {
        grid-row: 3;
    }

    .lms-card-3 {
        grid-row: 4;
    }

    .lms-card-4 {
        grid-row: 5;
    }

    .lms-card-5 {
        grid-row: 6;
    }

    .lms-card-6 {
        grid-row: 7;
    }

    .lms-life-flow {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 13px;
    }

        .lms-life-flow b {
            display: none;
        }

        .lms-life-flow span {
            padding: 9px 0;
            border-bottom: 1px solid rgba(80,130,65,.12);
            font-size: 8px;
        }

    .lms-bottom {
        gap: 10px;
    }

        .lms-bottom p {
            font-size: 8px;
            line-height: 1.6;
            letter-spacing: 1px;
        }

    .lms-bottom-line {
        display: none;
    }
}


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

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

    .lms-section *,
    .lms-section *::before,
    .lms-section *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}