/* ==========================================================
   CHINMUN ERP
   MODULES PAGE
========================================================== */


/* ==========================================================
   ROOT PAGE
========================================================== */

.modules-page {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(70, 85, 255, .10),
            transparent 32%
        ),
        var(--bg);
}


/* ==========================================================
   MODULES HERO
========================================================== */

.modules-hero {
    position: relative;
    padding:
        70px
        0
        50px;
    overflow: hidden;
}


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

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(7, 11, 24, .15),
            rgba(7, 11, 24, .85)
        );
}


.modules-hero::after {
    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    left: 50%;
    top: -420px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(83, 110, 255, .20),
            rgba(123, 46, 247, .08) 45%,
            transparent 72%
        );

    filter:
        blur(20px);

    pointer-events: none;
}


.modules-hero .container {
    position: relative;

    z-index: 2;
}


.modules-hero-content {
    width: min(
        850px,
        100%
    );

    margin:
        0 auto;

    text-align: center;
}


.modules-hero-content .eyebrow {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding:
        10px
        16px;

    border:
        1px solid
        rgba(111, 145, 255, .18);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .035);

    backdrop-filter:
        blur(12px);

    margin-bottom: 25px;
}


.eyebrow-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--cyan);

    box-shadow:
        0
        0
        14px
        rgba(0, 229, 195, .85);

    animation:
        eyebrowPulse
        2s
        infinite;
}


.modules-hero h1 {
    margin:
        0 auto;

    max-width:
        850px;

    font:
        700
        clamp(48px, 7vw, 92px)
        /
        .98
        "Space Grotesk";

    letter-spacing:
        -.055em;
}


.modules-hero h1 span {
    display: block;

    margin-top: 5px;

    background:
        linear-gradient(
            90deg,
            #52c8ff,
            #9367ff 48%,
            #ffad45
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}


.modules-hero p {
    max-width:
        680px;

    margin:
        27px auto 0;

    color:
        var(--muted);

    font-size:
        17px;

    line-height:
        1.8;
}


.modules-hero-actions {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    margin-top: 34px;

    flex-wrap: wrap;
}


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

.modules-hero-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter:
        blur(80px);

    opacity: .22;
}


.modules-glow-one {
    width: 380px;
    height: 380px;

    left: -120px;
    top: 180px;

    background:
        var(--blue);
}


.modules-glow-two {
    width: 360px;
    height: 360px;

    right: -100px;
    top: 220px;

    background:
        var(--purple);
}


/* ==========================================================
   HERO OVERVIEW
========================================================== */

.modules-hero-overview {
    width: min(
        760px,
        100%
    );

    margin:
        65px auto 0;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap: 15px;
}


.module-overview-card {
    position: relative;

    padding:
        21px
        18px;

    border:
        1px solid
        rgba(255, 255, 255, .09);

    border-radius:
        20px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .075),
            rgba(255, 255, 255, .025)
        );

    backdrop-filter:
        blur(18px);

    overflow: hidden;

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.module-overview-card::before {
    content: "";

    position: absolute;

    width: 140px;
    height: 140px;

    right: -70px;
    top: -70px;

    border-radius: 50%;

    background:
        rgba(91, 207, 255, .10);

    filter:
        blur(15px);
}


.module-overview-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(91, 207, 255, .28);

    box-shadow:
        0
        18px
        50px
        rgba(0, 0, 0, .25);
}


.overview-icon {
    display: block;

    font-size:
        24px;

    margin-bottom:
        12px;
}


.module-overview-card strong {
    display: block;

    font-size:
        15px;

    margin-bottom:
        5px;
}


.module-overview-card small {
    color:
        var(--muted);

    font-size:
        12px;
}


/* ==========================================================
   ECOSYSTEM SECTION
========================================================== */

.module-ecosystem-section {
    position: relative;

    padding:
        70px
        0
        50px;

    background:
        linear-gradient(
            180deg,
            rgba(11, 16, 36, .25),
            rgba(7, 11, 24, .95)
        );

    border-top:
        1px solid
        rgba(255, 255, 255, .04);

    border-bottom:
        1px solid
        rgba(255, 255, 255, .04);
}


.module-heading-center {
    text-align: center;

    margin:
        0 auto
        60px;
}


.module-heading-center p {
    max-width:
        680px;

    margin:
        20px auto 0;
}


/* ==========================================================
   ECOSYSTEM
========================================================== */

.module-ecosystem {
    position: relative;

    width:
        min(
            950px,
            100%
        );

    height:
        600px;

    margin:
        0 auto;

    border:
        1px solid
        rgba(255, 255, 255, .06);

    border-radius:
        36px;

    background:
        radial-gradient(
            circle at center,
            rgba(74, 80, 255, .11),
            transparent 43%
        ),
        rgba(255, 255, 255, .018);

    overflow: hidden;
}


.module-ecosystem::before {
    content: "";

    position: absolute;

    inset: 0;

    opacity: .22;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .04)
            1px,
            transparent
            1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .04)
            1px,
            transparent
            1px
        );

    background-size:
        50px
        50px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 15%,
            #000 85%,
            transparent
        );

    pointer-events: none;
}


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

.ecosystem-line {
    position: absolute;

    left: 50%;
    top: 50%;

    transform-origin:
        center;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(82, 200, 255, .34),
            rgba(147, 103, 255, .42),
            transparent
        );

    height:
        1px;

    pointer-events: none;

    z-index: 1;
}


.line-horizontal {
    width: 82%;

    transform:
        translate(
            -50%,
            -50%
        );
}


.line-vertical {
    width: 470px;

    transform:
        translate(
            -50%,
            -50%
        )
        rotate(
            90deg
        );
}


.line-diagonal-one {
    width: 690px;

    transform:
        translate(
            -50%,
            -50%
        )
        rotate(
            33deg
        );
}


.line-diagonal-two {
    width: 690px;

    transform:
        translate(
            -50%,
            -50%
        )
        rotate(
            -33deg
        );
}


/* ==========================================================
   ECOSYSTEM NODE
========================================================== */

.ecosystem-node {
    position: absolute;

    z-index: 3;

    width: 132px;
    min-height: 105px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding:
        14px;

    border:
        1px solid
        rgba(255, 255, 255, .10);

    border-radius:
        20px;

    background:
        rgba(9, 14, 31, .84);

    backdrop-filter:
        blur(15px);

    box-shadow:
        0
        15px
        40px
        rgba(0, 0, 0, .25);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.ecosystem-node:hover {
    transform:
        translateY(-6px)
        scale(1.04);

    border-color:
        rgba(92, 205, 255, .42);

    box-shadow:
        0
        22px
        60px
        rgba(39, 88, 255, .18);
}


.ecosystem-node span {
    font-size:
        24px;

    margin-bottom:
        7px;
}


.ecosystem-node strong {
    font-size:
        12px;
}


/* ==========================================================
   NODE POSITIONS
========================================================== */

.node-inventory {
    left: 9%;
    top: 14%;
}


.node-sales {
    right: 9%;
    top: 14%;
}


.node-purchase {
    left: 4%;
    top: 42%;
}


.node-dealers {
    right: 4%;
    top: 42%;
}


.node-customers {
    left: 11%;
    bottom: 12%;
}


.node-payments {
    right: 11%;
    bottom: 12%;
}


.node-reports {
    left: 50%;
    bottom: 5%;

    transform:
        translateX(-50%);
}


.node-reports:hover {
    transform:
        translateX(-50%)
        translateY(-6px)
        scale(1.04);
}


/* ==========================================================
   ECOSYSTEM CORE
========================================================== */

.ecosystem-core {
    position: absolute;

    z-index: 5;

    left: 50%;
    top: 50%;

    width: 190px;
    height: 190px;

    transform:
        translate(
            -50%,
            -50%
        );

    border-radius: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    border:
        1px solid
        rgba(125, 113, 255, .30);

    background:
        radial-gradient(
            circle at 35% 25%,
            rgba(119, 201, 255, .20),
            rgba(57, 50, 125, .20) 50%,
            rgba(6, 9, 23, .95)
        );

    box-shadow:
        0
        0
        80px
        rgba(78, 74, 255, .20),
        inset
        0
        0
        35px
        rgba(93, 201, 255, .08);
}


.ecosystem-core::before {
    content: "";

    position: absolute;

    inset: -10px;

    border-radius: 50%;

    border:
        1px solid
        rgba(91, 207, 255, .12);

    animation:
        corePulse
        3s
        infinite;
}


.ecosystem-core-logo {
    width: 48px;
    height: 48px;

    display: grid;

    place-items: center;

    border-radius:
        16px;

    margin-bottom:
        9px;

    font:
        700
        24px
        "Space Grotesk";

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--purple)
        );

    box-shadow:
        0
        10px
        30px
        rgba(90, 50, 255, .35);
}


.ecosystem-core strong {
    font:
        700
        16px
        "Space Grotesk";

    letter-spacing:
        .05em;
}


.ecosystem-core small {
    margin-top:
        4px;

    font-size:
        10px;

    letter-spacing:
        .18em;

    color:
        var(--cyan);
}


/* ==========================================================
   MAIN MODULES SECTION
========================================================== */

.modules-section {
    position: relative;

    padding:
        70px
        0;
}


.modules-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        20px;
}


/* ==========================================================
   MODULE CARD
========================================================== */

.module-card {
    position: relative;

    min-height:
        360px;

    display: flex;

    flex-direction: column;

    padding:
        25px;

    border:
        1px solid
        rgba(255, 255, 255, .08);

    border-radius:
        24px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .055),
            rgba(255, 255, 255, .018)
        );

    overflow: hidden;

    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}


.module-card::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: -90px;
    right: -90px;

    border-radius: 50%;

    background:
        rgba(89, 112, 255, .11);

    filter:
        blur(18px);

    pointer-events: none;
}


.module-card:hover {
    border-color:
        rgba(105, 180, 255, .30);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .075),
            rgba(255, 255, 255, .025)
        );

    box-shadow:
        0
        24px
        65px
        rgba(0, 0, 0, .28);
}


.module-card-header {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom:
        27px;
}


.module-icon {
    width: 56px;
    height: 56px;

    display: grid;

    place-items: center;

    border-radius:
        17px;

    font-size:
        25px;

    border:
        1px solid
        rgba(255, 255, 255, .10);
}


.icon-blue {
    background:
        rgba(13, 110, 253, .14);

    box-shadow:
        0
        10px
        30px
        rgba(13, 110, 253, .12);
}


.icon-purple {
    background:
        rgba(123, 46, 247, .16);

    box-shadow:
        0
        10px
        30px
        rgba(123, 46, 247, .12);
}


.icon-cyan {
    background:
        rgba(0, 229, 195, .12);
}


.icon-green {
    background:
        rgba(34, 197, 94, .12);
}


.icon-orange {
    background:
        rgba(255, 154, 0, .14);
}


.icon-pink {
    background:
        rgba(236, 72, 153, .14);
}


.module-number {
    color:
        rgba(255, 255, 255, .28);

    font:
        700
        14px
        "Space Grotesk";

    letter-spacing:
        .08em;
}


.module-card h3 {
    position: relative;

    z-index: 2;

    margin:
        0
        0
        13px;

    font:
        700
        24px
        /
        1.2
        "Space Grotesk";

    letter-spacing:
        -.025em;
}


.module-card p {
    position: relative;

    z-index: 2;

    margin:
        0;

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.75;
}


.module-tags {
    position: relative;

    z-index: 2;

    display: flex;

    flex-wrap: wrap;

    gap:
        8px;

    margin-top:
        24px;
}


.module-tags span {
    padding:
        7px
        10px;

    border-radius:
        999px;

    font-size:
        11px;

    color:
        #c7d0e9;

    background:
        rgba(255, 255, 255, .055);

    border:
        1px solid
        rgba(255, 255, 255, .07);
}


.module-link {
    position: relative;

    z-index: 2;

    margin-top:
        auto;

    padding-top:
        28px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    color:
        #a8dfff;

    font-size:
        13px;

    font-weight:
        700;

    border-top:
        1px solid
        rgba(255, 255, 255, .07);

    transition:
        color .25s ease;
}


.module-link span {
    font-size:
        19px;

    transition:
        transform .25s ease;
}


.module-link:hover {
    color:
        #ffffff;
}


.module-link:hover span {
    transform:
        translateX(5px);
}


/* ==========================================================
   FUTURE SECTION
========================================================== */

.future-modules-section {
    padding:
        10px
        0
        120px;
}


.future-modules-card {
    position: relative;

    display: grid;

    grid-template-columns:
        1.1fr
        .9fr;

    gap:
        55px;

    align-items: center;

    padding:
        65px;

    border-radius:
        34px;

    overflow: hidden;

    border:
        1px solid
        rgba(122, 124, 255, .15);

    background:
        radial-gradient(
            circle at 20% 15%,
            rgba(62, 156, 255, .13),
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(126, 59, 255, .13),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            rgba(17, 24, 50, .90),
            rgba(8, 12, 28, .95)
        );

    box-shadow:
        var(--shadow);
}


.future-modules-content {
    position: relative;

    z-index: 2;
}


.future-modules-content h2 {
    margin:
        0;

    font:
        700
        clamp(38px, 4vw, 62px)
        /
        1.03
        "Space Grotesk";

    letter-spacing:
        -.045em;
}


.future-modules-content h2 span {
    display: block;

    margin-top:
        5px;

    background:
        linear-gradient(
            90deg,
            #58d0ff,
            #9c65ff,
            #ffad45
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}


.future-modules-content > p {
    max-width:
        590px;

    margin:
        22px
        0
        0;

    color:
        var(--muted);

    line-height:
        1.8;
}


.future-points {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        15px;

    margin-top:
        35px;
}


.future-points > div {
    padding:
        16px;

    border-radius:
        17px;

    border:
        1px solid
        rgba(255, 255, 255, .07);

    background:
        rgba(255, 255, 255, .035);
}


.future-points span {
    display: block;

    font-size:
        20px;

    margin-bottom:
        9px;
}


.future-points strong {
    display: block;

    font-size:
        13px;

    margin-bottom:
        5px;
}


.future-points small {
    color:
        var(--muted);

    font-size:
        11px;

    line-height:
        1.5;
}


/* ==========================================================
   FUTURE VISUAL
========================================================== */

.future-visual {
    position: relative;

    min-height:
        460px;

    display: flex;

    align-items: center;

    justify-content: center;
}


.future-grid {
    position: absolute;

    width:
        100%;

    height:
        100%;

    opacity:
        .25;

    background-image:
        linear-gradient(
            rgba(105, 130, 255, .14)
            1px,
            transparent
            1px
        ),
        linear-gradient(
            90deg,
            rgba(105, 130, 255, .14)
            1px,
            transparent
            1px
        );

    background-size:
        35px
        35px;

    mask-image:
        radial-gradient(
            circle,
            #000 20%,
            transparent 72%
        );
}


.future-device {
    position: absolute;

    border:
        1px solid
        rgba(255, 255, 255, .14);

    background:
        linear-gradient(
            145deg,
            rgba(26, 35, 68, .95),
            rgba(5, 9, 23, .98)
        );

    box-shadow:
        0
        30px
        80px
        rgba(0, 0, 0, .45);
}


.future-device-main {
    width:
        420px;

    height:
        280px;

    padding:
        10px;

    border-radius:
        18px;

    transform:
        perspective(1000px)
        rotateY(-10deg)
        rotateX(4deg);
}


.device-header {
    display: flex;

    gap:
        5px;

    padding:
        4px
        4px
        10px;
}


.device-header span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .22);
}


.device-screen {
    display: grid;

    grid-template-columns:
        70px
        1fr;

    height:
        calc(
            100% - 22px
        );

    border-radius:
        9px;

    overflow: hidden;

    background:
        #0b1126;
}


.screen-sidebar {
    padding:
        18px
        12px;

    background:
        rgba(255, 255, 255, .035);
}


.screen-sidebar span {
    display: block;

    width:
        100%;

    height:
        7px;

    margin-bottom:
        16px;

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, .12);
}


.screen-content {
    padding:
        20px;
}


.screen-line {
    height:
        10px;

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, .12);
}


.screen-line.large {
    width:
        55%;
}


.screen-cards {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        8px;

    margin-top:
        17px;
}


.screen-cards span {
    height:
        48px;

    border-radius:
        7px;

    background:
        linear-gradient(
            135deg,
            rgba(86, 151, 255, .26),
            rgba(123, 70, 255, .12)
        );
}


.screen-chart {
    display: flex;

    align-items: end;

    gap:
        7px;

    height:
        100px;

    margin-top:
        20px;

    padding:
        12px;

    border-radius:
        10px;

    background:
        rgba(255, 255, 255, .035);
}


.screen-chart span {
    flex:
        1;

    border-radius:
        4px
        4px
        0
        0;

    background:
        linear-gradient(
            180deg,
            #4cc7ff,
            #715cff
        );
}


.screen-chart span:nth-child(1) {
    height: 38%;
}


.screen-chart span:nth-child(2) {
    height: 58%;
}


.screen-chart span:nth-child(3) {
    height: 43%;
}


.screen-chart span:nth-child(4) {
    height: 76%;
}


.screen-chart span:nth-child(5) {
    height: 94%;
}


/* ==========================================================
   FUTURE PHONE
========================================================== */

.future-phone {
    width:
        145px;

    height:
        290px;

    right:
        0;

    bottom:
        35px;

    padding:
        10px;

    border-radius:
        25px;

    transform:
        perspective(1000px)
        rotateY(-14deg)
        rotateZ(4deg);

    z-index:
        5;
}


.phone-screen {
    height:
        100%;

    padding:
        24px
        10px
        10px;

    border-radius:
        18px;

    background:
        linear-gradient(
            180deg,
            #101a3b,
            #090d20
        );
}


.phone-screen span {
    display: block;

    height:
        45px;

    margin-bottom:
        10px;

    border-radius:
        8px;

    background:
        linear-gradient(
            135deg,
            rgba(86, 151, 255, .25),
            rgba(126, 70, 255, .12)
        );
}


/* ==========================================================
   CTA SECTION
========================================================== */

.modules-cta-section {
    padding:
        0
        0
        120px;
}


.modules-cta-section .cta-card {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap:
        40px;

    padding:
        60px;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, .10);

    border-radius:
        30px;

    background:
        linear-gradient(
            135deg,
            rgba(21, 31, 70, .75),
            rgba(9, 12, 27, .95)
        );
}


.modules-cta-section .cta-card::before {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    right:
        -180px;

    top:
        -200px;

    border-radius: 50%;

    background:
        rgba(103, 73, 255, .15);

    filter:
        blur(45px);

    pointer-events: none;
}


.modules-cta-section .cta-card > * {
    position: relative;

    z-index: 2;
}


.modules-cta-section .cta-card h2 {
    max-width:
        680px;
}


.modules-cta-section .cta-card p {
    max-width:
        600px;

    margin-bottom:
        0;
}


.cta-actions {
    display: flex;

    gap:
        12px;

    flex-wrap:
        wrap;

    flex-shrink:
        0;
}


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

@keyframes eyebrowPulse {

    0% {
        opacity: .5;

        transform:
            scale(.85);
    }

    50% {
        opacity: 1;

        transform:
            scale(1.15);
    }

    100% {
        opacity: .5;

        transform:
            scale(.85);
    }

}


@keyframes corePulse {

    0% {
        transform:
            scale(.95);

        opacity:
            .35;
    }

    50% {
        transform:
            scale(1.08);

        opacity:
            .75;
    }

    100% {
        transform:
            scale(.95);

        opacity:
            .35;
    }

}


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

@media (
    max-width: 1100px
) {

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


    .future-modules-card {
        grid-template-columns:
            1fr;

        padding:
            50px;
    }


    .future-visual {
        min-height:
            420px;
    }


    .future-device-main {
        width:
            min(
                500px,
                82%
            );
    }

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

@media (
    max-width: 900px
) {

    .modules-hero {
        padding:
            70px
            0
            75px;
    }


    .module-ecosystem {
        height:
            540px;
    }


    .ecosystem-node {
        width:
            115px;

        min-height:
            92px;

        padding:
            11px;
    }


    .ecosystem-core {

        width:
            160px;

        height:
            160px;

    }


    .node-inventory {
        left:
            6%;
    }


    .node-sales {
        right:
            6%;
    }


    .node-purchase {
        left:
            2%;
    }


    .node-dealers {
        right:
            2%;
    }


    .future-modules-card {
        padding:
            40px;
    }


    .modules-cta-section .cta-card {

        flex-direction:
            column;

        align-items:
            flex-start;

        padding:
            45px;

    }

}



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


@media (
    max-width:700px
){


    .modules-hero {

        padding:
            70px
            0
            65px;

    }



    .modules-hero h1 {

        font-size:
            clamp(
                43px,
                13vw,
                64px
            );

    }



    .modules-hero p {

        font-size:
            15px;

    }




    .modules-hero-overview {

        grid-template-columns:
            1fr;

        gap:
            10px;

        margin-top:
            45px;

    }



    .module-overview-card {

        display:
            grid;

        grid-template-columns:
            45px 1fr;

        align-items:
            center;

        column-gap:
            10px;

        text-align:
            left;

    }



    .overview-icon {

        grid-row:
            span 2;

        margin:
            0;

    }





/* ======================================================
   ECOSYSTEM MOBILE 2 COLUMN FINAL
====================================================== */


    .module-ecosystem-section {

        padding:
            80px
            0;

    }



    .module-ecosystem {


        height:
            auto;


        padding:
            18px;


        display:
            grid;


        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );


        gap:
            12px;


        border-radius:
            25px;


    }




    .ecosystem-line {

        display:
            none;

    }




    /* ALL MODULE BOX */


    .ecosystem-node {


        position:
            relative;


        width:
            100%;


        min-height:
            105px;


        left:
            auto !important;


        right:
            auto !important;


        top:
            auto !important;


        bottom:
            auto !important;


        transform:
            none !important;


    }





    /* CORE TOP FULL WIDTH */


    .ecosystem-core {


        position:
            relative;


        width:
            100%;


        height:
            140px;


        left:
            auto;


        top:
            auto;


        grid-column:
            1 / -1;


        order:
            -1;


        transform:
            none;


        border-radius:
            24px;


    }




    .ecosystem-core::before {

        border-radius:
            24px;

    }




    /* REPORT FULL WIDTH */


    .node-reports {


        grid-column:
            1 / -1;


    }






/* MODULE CARDS */


    .modules-section {

        padding:
            85px
            0;

    }



    .modules-grid {

        grid-template-columns:
            1fr;

    }



    .module-card {

        min-height:
            330px;

        padding:
            22px;

    }



    .module-card h3 {

        font-size:
            22px;

    }





/* FUTURE */


    .future-modules-section {

        padding-bottom:
            85px;

    }



    .future-modules-card {

        padding:
            28px;

        gap:
            30px;

        border-radius:
            25px;

    }




    .future-points {

        grid-template-columns:
            1fr;

    }




    .future-visual {

        min-height:
            330px;

    }




    .future-device-main {

        width:
            90%;

        height:
            220px;

    }




    .future-phone {

        width:
            110px;

        height:
            220px;

        right:
            -5px;

        bottom:
            20px;

    }




/* CTA */


    .modules-cta-section {

        padding-bottom:
            80px;

    }



    .modules-cta-section .cta-card {

        padding:
            30px;

        border-radius:
            25px;

    }



    .cta-actions {

        width:
            100%;

    }



    .cta-actions .btn {

        width:
            100%;

    }


}






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


@media (
    max-width:420px
){


    .modules-hero-actions {

        flex-direction:
            column;

        width:
            100%;

    }




    .modules-hero-actions .btn {

        width:
            100%;

    }




    /* KEEP 2 COLUMN */


    .module-ecosystem {


        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );


        gap:
            10px;


    }





    .ecosystem-node {

        min-height:
            95px;

    }





    .node-reports {

        grid-column:
            1 / -1;

    }





    .ecosystem-core {

        grid-column:
            1 / -1;

    }



}

    .ecosystem-core {

        grid-column:
            span 2;

    }



    .future-device-main {

        width:
            94%;

    }



    .future-phone {

        display:
            none;

    }

}



/* ==========================================================
   REDUCE MOTION
========================================================== */

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


    .eyebrow-dot,
    .ecosystem-core::before {

        animation:
            none;

    }