/* ==========================
   CORE MODULES
========================== */
:root {
    --section-bg: #030712;
    --section-bg-2: #0a0f1e;
    --card-bg: rgba(15,20,40,.75);
    --dark-border: rgba(255,255,255,.08);
    --heading: #ffffff;
    --paragraph: #a1a1aa;
}

.modules-section {
    padding: 100px 0;
}

.modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    gap: 24px;
}

.module-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 30px;
    transition: .35s;
}

    .module-card:hover {
        transform: translateY(-8px);
        border-color: var(--purple-500);
        box-shadow: 0 20px 40px rgba(0,0,0,.35);
    }

.module-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(103,61,230,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #8b5cf6;
    margin-bottom: 20px;
}

.module-card h3 {
    font-size: 22px;
    margin-bottom: 18px;
}

.module-card ul {
    list-style: none;
}

    .module-card ul li {
        padding: 10px 0;
        color: var(--text-secondary);
        border-bottom: 1px solid rgba(255,255,255,.05);
    }

        .module-card ul li:last-child {
            border: none;
        }
/*==========================================
WHY ORBIT
==========================================*/
.why-orbit-section {
    padding: 120px 0;
    background: #030712;
}


.orbit-card {
    background: rgba(15,20,40,.75);
    border: 1px solid rgba(103,61,230,.2);
}


    .orbit-card h3 {
        color: white;
    }


    .orbit-card p {
        color: #a1a1aa;
    }

    .orbit-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg,#6D5DFB,#00C6FF);
        transform: scaleX(0);
        transition: .35s;
    }

    .orbit-card:hover::before {
        transform: scaleX(1);
    }

    .orbit-card:hover {
        transform: translateY(-12px);
        box-shadow: 0 30px 60px rgba(0,0,0,.08);
    }

.orbit-icon {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    background: #F5F7FF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    margin-bottom: 22px;
}

.orbit-card h3 {
    font-size: 22px;
    margin-bottom: 15px;
    color: #222;
}

.orbit-card p {
    color: #666;
    line-height: 1.8;
}

/*=========================
Tablet
=========================*/

@media(max-width:991px) {

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

/*=========================
Mobile
=========================*/

@media(max-width:767px) {

    .why-orbit-section {
        padding: 70px 0;
    }

    .orbit-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .orbit-card {
        padding: 28px;
    }
}
/*==============================
SMART CAMPUS
===============================*/

.smart-campus-section {
    background: #0a0f1e;
}


.campus-feature {
    background: rgba(15,20,40,.8);
    border: 1px solid rgba(103,61,230,.15);
}

    .campus-feature:hover {
        transform: translateY(-8px);
    }

.feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    background: linear-gradient(135deg,#6D5DFB,#00C6FF);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    flex-shrink: 0;
}

.phone-mockup {
    background: #111827;
    padding: 18px;
    border-radius: 35px;
    box-shadow: 0 35px 70px rgba(0,0,0,.25);
}

.phone-header {
    color: #fff;
    text-align: center;
    padding: 10px;
    font-weight: 600;
}

.phone-screen {
    background: #111827;
    color: white;
}

.scan-box {
    text-align: center;
}

.qr-box {
    width: 170px;
    height: 170px;
    background: repeating-linear-gradient( 45deg, #000, #000 8px, #fff 8px, #fff 16px );
    margin: auto;
    border-radius: 10px;
    margin-bottom: 25px;
}

.scan-box h4 {
    font-size: 24px;
    margin-bottom: 8px;
}

.scan-box span {
    color: #22c55e;
    font-weight: 700;
}

@media(max-width:991px) {

    .campus-wrapper {
        grid-template-columns: 1fr;
    }

    .phone-mockup {
        max-width: 360px;
        margin: auto;
    }
}
/*==========================
MOBILE APPS
==========================*/

.mobile-apps-section {
    padding: 120px 0;
    background: #fff;
}

.apps-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 40px;
    margin-top: 70px;
}

.app-card {
    text-align: center;
}

.app-phone {
    background: #111827;
    padding: 14px;
    border-radius: 32px;
    box-shadow: 0 30px 70px rgba(0,0,0,.18);
    margin-bottom: 30px;
    transition: .35s;
}

.app-card:hover .app-phone {
    transform: translateY(-12px);
}

.phone-top {
    color: #fff;
    padding: 12px;
    font-weight: 600;
    text-align: center;
}

.phone-body {
    background: #fff;
    border-radius: 22px;
    padding: 20px;
    min-height: 500px;
}

.app-profile {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #6D5DFB;
    margin: auto;
    margin-bottom: 20px;
}

.app-line {
    height: 12px;
    background: #ececec;
    border-radius: 10px;
    margin-bottom: 10px;
}

    .app-line.short {
        width: 60%;
        margin: auto;
        margin-bottom: 25px;
    }

.app-box {
    padding: 18px;
    border-radius: 18px;
    margin-bottom: 18px;
    font-size: 15px;
}

    .app-box strong {
        display: block;
        margin-top: 8px;
        font-size: 20px;
    }

.blue {
    background: #E8F2FF;
}

.green {
    background: #EAFBF2;
}

.orange {
    background: #FFF4E8;
}

.purple {
    background: #F2EDFF;
}

.app-card h3 {
    margin-bottom: 12px;
    font-size: 24px;
}

.app-card p {
    color: #666;
    line-height: 1.8;
}

@media(max-width:991px) {

    .apps-grid {
        grid-template-columns: 1fr;
    }

    .app-phone {
        max-width: 340px;
        margin: auto 0 25px;
    }
}

.orbit-modules {
    padding: 110px 0;
    background: #fff;
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 25px;
    margin-top: 60px;
}

.module-card {
    background: white;
    border-radius: 20px;
    padding: 35px;
    border: 1px solid #ececec;
    transition: .35s;
}

    .module-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 45px rgba(0,0,0,.08);
    }

.module-icon {
    width: 65px;
    height: 65px;
    border-radius: 18px;
    background: #eef3ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 20px;
}

.module-card h3 {
    font-size: 22px;
    margin-bottom: 12px;
    font-weight: 700;
}

.module-card p {
    line-height: 1.8;
    color: #666;
}

.highlight {
    background: linear-gradient(180deg,#f8fbff,#eef6ff);
}

.premium {
    background: linear-gradient(135deg,#673de6,#8256ff);
    color: white;
}

    .premium p {
        color: white;
    }

    .premium .module-icon {
        background: rgba(255,255,255,.15);
    }

@media(max-width:991px) {

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

@media(max-width:600px) {

    .module-grid {
        grid-template-columns: 1fr;
    }
}

.workflow-section {
    padding: 120px 0;
    background: #f8fbff;
}

.workflow {
    margin-top: 70px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.workflow-item {
    width: 170px;
    background: white;
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(0,0,0,.06);
    transition: .35s;
}

    .workflow-item:hover {
        transform: translateY(-10px);
    }

.workflow-icon {
    width: 70px;
    height: 70px;
    margin: auto;
    border-radius: 18px;
    background: linear-gradient(135deg,#673de6,#8256ff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    margin-bottom: 20px;
}

.workflow-item h3 {
    font-size: 20px;
    margin-bottom: 12px;
}

.workflow-item p {
    font-size: 14px;
    line-height: 1.7;
    color: #666;
}

.workflow-arrow {
    font-size: 42px;
    color: #673de6;
    margin-top: 65px;
    font-weight: 700;
}

@media(max-width:991px) {

    .workflow {
        flex-direction: column;
        align-items: center;
    }

    .workflow-arrow {
        transform: rotate(90deg);
        margin: 0;
    }

    .workflow-item {
        width: 100%;
        max-width: 350px;
    }
}



.dashboard-wrapper {
    margin-top: 60px;
    display: flex;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 35px 80px rgba(0,0,0,.08);
}

.dashboard-sidebar {
    width: 250px;
    background: #111827;
    padding: 40px 25px;
    color: white;
}

.side-logo {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 45px;
}

.logo-circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #673de6;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

.dashboard-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dashboard-sidebar li {
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: .3s;
}

    .dashboard-sidebar li:hover,
    .dashboard-sidebar li.active {
        background: #673de6;
    }

.dashboard-content {
    background: #0a0f1e;
}

.dashboard-card {
    background: rgba(15,20,40,.8);
    border: 1px solid rgba(255,255,255,.08);
}

.dashboard-card {
    background: white;
    padding: 25px;
    border-radius: 18px;
}

    .dashboard-card span {
        font-size: 14px;
        color: #777;
    }

    .dashboard-card h3 {
        font-size: 34px;
        margin: 10px 0;
    }

.dashboard-bottom {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    margin-top: 35px;
}

.dashboard-chart,
.dashboard-activity {
    background: white;
    padding: 25px;
    border-radius: 20px;
}

.bars {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 220px;
    margin-top: 30px;
}

    .bars div {
        flex: 1;
        background: #673de6;
        border-radius: 8px 8px 0 0;
    }

.dashboard-activity ul {
    padding-left: 20px;
    margin-top: 20px;
}

.dashboard-activity li {
    margin-bottom: 18px;
}

@media(max-width:991px) {

    .dashboard-wrapper {
        flex-direction: column;
    }

    .dashboard-sidebar {
        width: 100%;
    }

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

    .dashboard-bottom {
        grid-template-columns: 1fr;
    }
}

@media(max-width:600px) {

    .dashboard-cards {
        grid-template-columns: 1fr;
    }
}

.visitor-showcase {
    padding: 120px 0;
    background: #f8fbff;
}

.visitor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.visitor-list {
    margin-top: 40px;
}

.visitor-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.check {
    width: 45px;
    height: 45px;
    background: #673de6;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 20px;
    font-weight: bold;
    flex-shrink: 0;
}

.phone-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
}

.phone {
    width: 320px;
    background: #111;
    padding: 12px;
    border-radius: 40px;
    box-shadow: 0 30px 70px rgba(0,0,0,.2);
}

.phone-top {
    height: 30px;
    width: 120px;
    background: #222;
    margin: auto;
    border-radius: 0 0 15px 15px;
}

.phone-screen {
    background: white;
    border-radius: 30px;
    padding: 40px 25px;
    text-align: center;
}

.scan-circle {
    width: 90px;
    height: 90px;
    margin: auto;
    background: #eef3ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    margin-bottom: 25px;
}

.qr-box {
    font-size: 18px;
    font-family: monospace;
    padding: 25px;
    background: #fafafa;
    border: 2px dashed #ddd;
    border-radius: 15px;
    margin: 25px 0;
    line-height: 1.4;
}

.phone-screen button {
    background: #673de6;
    color: white;
    border: none;
    padding: 15px 35px;
    border-radius: 12px;
    font-size: 16px;
    cursor: pointer;
}

.floating {
    position: absolute;
    background: white;
    padding: 15px 22px;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0,0,0,.12);
    font-weight: 600;
}

.approve {
    top: 40px;
    left: 0;
}

.alert {
    bottom: 50px;
    right: 0;
}

@media(max-width:991px) {

    .visitor-grid {
        grid-template-columns: 1fr;
    }

    .phone {
        margin-top: 40px;
    }
}

.apps-showcase {
    padding: 120px 0;
    background: #fff;
}

.apps-grid {
    margin-top: 70px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 40px;
}

.phone-frame {
    background: #111827;
    padding: 14px;
    border-radius: 40px;
    box-shadow: 0 30px 60px rgba(0,0,0,.12);
}

.screen {
    background: white;
    border-radius: 28px;
    padding: 30px;
}

    .screen h3 {
        text-align: center;
        margin-bottom: 30px;
        font-size: 26px;
    }

.app-card {
    background: #f6f8ff;
    padding: 18px;
    margin-bottom: 18px;
    border-radius: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
}

    .app-card strong {
        color: #673de6;
    }

.phone-frame:hover {
    transform: translateY(-12px);
    transition: .35s;
}

@media(max-width:991px) {

    .apps-grid {
        grid-template-columns: 1fr;
    }
}

.ai-section {
    padding: 120px 0;
    background: #f8fbff;
}

.ai-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    margin-top: 70px;
    align-items: center;
}

.ai-feature {
    display: flex;
    gap: 20px;
    margin-bottom: 35px;
}

.ai-icon {
    width: 65px;
    height: 65px;
    border-radius: 18px;
    background: #673de6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    flex-shrink: 0;
}

.ai-feature h3 {
    margin-bottom: 8px;
    font-size: 22px;
}

.ai-feature p {
    color: #666;
    line-height: 1.8;
}

.analytics-card {
    background: white;
    padding: 35px;
    border-radius: 25px;
    box-shadow: 0 20px 50px rgba(0,0,0,.08);
}

.chart-bars {
    display: flex;
    align-items: flex-end;
    height: 240px;
    gap: 14px;
    margin: 40px 0;
}

    .chart-bars span {
        flex: 1;
        background: #673de6;
        border-radius: 8px 8px 0 0;
    }

.score-boxes {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 15px;
}

    .score-boxes div {
        background: #f4f6ff;
        padding: 20px;
        border-radius: 16px;
        text-align: center;
    }

    .score-boxes h4 {
        font-size: 28px;
        margin-bottom: 8px;
    }

@media(max-width:991px) {

    .ai-grid {
        grid-template-columns: 1fr;
    }

    .score-boxes {
        grid-template-columns: 1fr;
    }
}
/*==========================
WHY ORBIT
===========================*/

.why-orbit-section {
    padding: 120px 0;
    background: #ffffff;
}

.usp-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
    margin-top: 70px;
}

.usp-card {
    background: #fff;
    border-radius: 20px;
    padding: 35px;
    border: 1px solid #edf2f7;
    transition: .35s;
    box-shadow: 0 15px 45px rgba(0,0,0,.05);
}

    .usp-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 25px 60px rgba(0,0,0,.08);
    }

.usp-icon {
    font-size: 42px;
    margin-bottom: 20px;
}

.usp-card h3 {
    font-size: 22px;
    margin-bottom: 15px;
    font-weight: 700;
}

.usp-card p {
    line-height: 1.8;
    color: #6b7280;
}

@media(max-width:992px) {

    .usp-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width:768px) {

    .why-orbit-section {
        padding: 70px 0;
    }

    .usp-grid {
        grid-template-columns: 1fr;
    }

    .usp-card {
        padding: 25px;
    }
}
/*=========================
PRODUCT MODULES
==========================*/

.modules-section {
    padding: 120px 0;
    background: #f8fbff;
}

.modules-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 25px;
    margin-top: 70px;
}

.module-card {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    border: 1px solid #e8eef7;
    transition: .35s;
    position: relative;
    overflow: hidden;
}

    .module-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 5px;
        height: 100%;
        background: #4f46e5;
    }

    .module-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 45px rgba(0,0,0,.08);
    }

.module-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #eef2ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #4f46e5;
    margin-bottom: 20px;
}

.module-card h3 {
    font-size: 20px;
    margin-bottom: 12px;
}

.module-card p {
    color: #6b7280;
    line-height: 1.8;
}

@media(max-width:1200px) {

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

@media(max-width:992px) {

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

@media(max-width:768px) {

    .modules-section {
        padding: 70px 0;
    }

    .modules-grid {
        grid-template-columns: 1fr;
    }
}
/*=========================================
        PRODUCT MODULES DARK SAAS UI
=========================================*/

.product-modules {
    padding: 120px 0;
    background: radial-gradient(circle at top left,rgba(103,61,230,.18),transparent 35%), #030712;
}


    /* Header */

    .product-modules .section-badge {
        background: rgba(103,61,230,.15);
        border: 1px solid rgba(103,61,230,.4);
        color: #a78bfa;
    }


    .product-modules .section-title {
        color: white;
    }


    .product-modules .section-subtitle {
        color: #94a3b8;
    }


    /* GRID */

    .product-modules .modules-grid {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 28px;
        margin-top: 70px;
    }



    /* CARD */

    .product-modules .module-card {
        position: relative;
        background: linear-gradient( 145deg, rgba(255,255,255,.08), rgba(255,255,255,.03) );
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 26px;
        padding: 35px 28px;
        overflow: hidden;
        transition: .35s;
        backdrop-filter: blur(15px);
    }



        /* Glow Line */

        .product-modules .module-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg,#673de6,#00c6ff);
            transform: scaleX(0);
            transition: .35s;
        }


        .product-modules .module-card:hover::before {
            transform: scaleX(1);
        }



        .product-modules .module-card:hover {
            transform: translateY(-12px);
            border-color: rgba(103,61,230,.5);
            box-shadow: 0 30px 70px rgba(0,0,0,.45), 0 0 40px rgba(103,61,230,.15);
        }




    /* ICON */


    .product-modules .module-icon {
        width: 75px;
        height: 75px;
        border-radius: 22px;
        background: linear-gradient( 135deg, #673de6, #00c6ff );
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 35px;
        margin-bottom: 25px;
        box-shadow: 0 15px 35px rgba(103,61,230,.35);
    }



    /* TITLE */


    .product-modules .module-card h3 {
        color: white;
        font-size: 22px;
        margin-bottom: 15px;
        font-weight: 700;
    }



    /* DESCRIPTION */


    .product-modules .module-card p {
        color: #94a3b8;
        line-height: 1.8;
        font-size: 15px;
    }



    /* Hover Icon */

    .product-modules .module-card:hover .module-icon {
        transform: scale(1.08);
        transition: .35s;
    }





/* TABLET */

@media(max-width:1100px) {

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




/* MOBILE */

@media(max-width:768px) {


    .product-modules {
        padding: 80px 0;
    }


        .product-modules .modules-grid {
            grid-template-columns: 1fr;
            gap: 20px;
        }


        .product-modules .module-card {
            padding: 30px 25px;
        }
}
/*================================
WHY ORBIT PREMIUM DARK UI
================================*/

.why-orbit {
    padding: 120px 0;
    background: radial-gradient( circle at top, rgba(103,61,230,.18), transparent 40% ), #030712;
}


    /* Header */

    .why-orbit .section-header {
        text-align: center;
        max-width: 800px;
        margin: auto;
    }


    .why-orbit .section-title {
        color: #fff;
        font-size: 48px;
        line-height: 1.2;
    }


    .why-orbit .section-subtitle {
        color: #94a3b8;
        font-size: 17px;
    }


/* GRID */

.why-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 28px;
    margin-top: 70px;
}



/* CARD */

.why-card {
    position: relative;
    background: linear-gradient( 145deg, rgba(255,255,255,.08), rgba(255,255,255,.03) );
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 24px;
    padding: 35px 25px;
    text-align: center;
    overflow: hidden;
    transition: .35s;
    backdrop-filter: blur(15px);
}



    /* Top Glow Line */

    .why-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient( 90deg, #673de6, #00c6ff );
        transform: scaleX(0);
        transition: .35s;
    }


    .why-card:hover::before {
        transform: scaleX(1);
    }



    .why-card:hover {
        transform: translateY(-12px);
        border-color: rgba(103,61,230,.5);
        box-shadow: 0 25px 60px rgba(103,61,230,.25);
    }



/* ICON */


.why-icon {
    width: 75px;
    height: 75px;
    margin: 0 auto 25px;
    border-radius: 22px;
    background: linear-gradient( 135deg, #673de6, #00c6ff );
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    box-shadow: 0 15px 30px rgba(103,61,230,.35);
}




.why-card h3 {
    color: white;
    font-size: 21px;
    margin-bottom: 15px;
}




.why-card p {
    color: #94a3b8;
    line-height: 1.7;
    font-size: 15px;
}




/* Tablet */

@media(max-width:1100px) {

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



/* Mobile */

@media(max-width:768px) {

    .why-orbit {
        padding: 70px 0;
    }


        .why-orbit .section-title {
            font-size: 34px;
        }


    .why-grid {
        grid-template-columns: 1fr;
    }
}
/*================================
DASHBOARD PREVIEW DARK SAAS UI
================================*/

.dashboard-preview {
    padding: 110px 0;
    background: radial-gradient(circle at top right, rgba(103,61,230,.18), transparent 35%), #030712;
}


/* Wrapper */

.dashboard-wrapper {
    display: flex;
    border-radius: 30px;
    overflow: hidden;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 30px 80px rgba(0,0,0,.45);
    margin-top: 70px;
}



/* Sidebar */

.dashboard-sidebar {
    width: 260px;
    background: radial-gradient( circle at top left, rgba(103,61,230,.35), transparent 45% ), linear-gradient( 180deg, #111827, #030712 );
    padding: 35px 25px;
    border-right: 1px solid rgba(103,61,230,.25);
    box-shadow: inset -20px 0 50px rgba(103,61,230,.08);
}



.sidebar-menu {
    color: #94a3b8;
    padding: 16px;
    border-radius: 14px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: .35s;
    font-weight: 600;
}



    .sidebar-menu:hover,
    .sidebar-menu.active {
        background: linear-gradient( 135deg, #673de6, #00c6ff );
        color: white;
        box-shadow: 0 10px 30px rgba(103,61,230,.35);
    }



/* Content */


.dashboard-content {
    flex: 1;
    padding: 40px;
}





/* Cards */

.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
    margin-bottom: 40px;
}



.dashboard-card {
    background: linear-gradient( 145deg, rgba(255,255,255,.08), rgba(255,255,255,.03) );
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    padding: 25px;
    transition: .35s;
}



    .dashboard-card:hover {
        transform: translateY(-8px);
        border-color: rgba(103,61,230,.5);
    }



    .dashboard-card h3 {
        color: #94a3b8;
        font-size: 15px;
    }



    .dashboard-card h1 {
        color: white;
        font-size: 34px;
        margin: 15px 0;
    }



    .dashboard-card span {
        color: #22c55e;
        font-size: 14px;
    }



/* Bottom */


.dashboard-bottom {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 25px;
}



.attendance-box,
.activity-box {
    background: linear-gradient( 145deg, rgba(255,255,255,.07), rgba(255,255,255,.03) );
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    padding: 30px;
}




    .attendance-box h3,
    .activity-box h3 {
        color: white;
        margin-bottom: 20px;
    }



/* Chart */


.fake-chart {
    height: 220px;
    display: flex;
    align-items: flex-end;
    gap: 18px;
}



    .fake-chart span {
        flex: 1;
        background: linear-gradient( #8b5cf6, #5b4bff );
        border-radius: 12px 12px 0 0;
    }




/* Activity */


.activity-box ul {
    padding-left: 15px;
}



.activity-box li {
    color: #cbd5e1;
    margin-bottom: 18px;
    list-style: none;
}




/* Tablet */

@media(max-width:1100px) {


    .dashboard-wrapper {
        flex-direction: column;
    }


    .dashboard-sidebar {
        width: auto;
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 10px;
    }



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


    .dashboard-bottom {
        grid-template-columns: 1fr;
    }
}



/* Mobile */


@media(max-width:768px) {


    .dashboard-preview {
        padding: 70px 0;
    }


    .dashboard-sidebar {
        grid-template-columns: repeat(2,1fr);
        padding: 20px;
    }


    .dashboard-content {
        padding: 20px;
    }



    .dashboard-cards {
        grid-template-columns: 1fr;
    }


    .fake-chart {
        height: 160px;
    }
}


/*================================
INTEGRATIONS DARK NEON SAAS UI
================================*/

.integrations-section {
    padding: 120px 0;
    background: radial-gradient( circle at top right, rgba(103,61,230,.22), transparent 35% ), radial-gradient( circle at bottom left, rgba(0,198,255,.12), transparent 35% ), #030712;
    position: relative;
    overflow: hidden;
}


    /* HEADER */

    .integrations-section .section-badge {
        background: rgba(103,61,230,.15);
        border: 1px solid rgba(103,61,230,.45);
        color: #c4b5fd;
    }


    .integrations-section .section-title {
        color: white;
    }


    .integrations-section .section-subtitle {
        color: #94a3b8;
    }



/* GRID */

.integration-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 28px;
    margin-top: 70px;
}



/* CARD */

.integration-card {
    position: relative;
    background: linear-gradient( 145deg, rgba(255,255,255,.08), rgba(255,255,255,.03) );
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 26px;
    padding: 35px 25px;
    text-align: center;
    overflow: hidden;
    transition: .35s;
    backdrop-filter: blur(15px);
}



    /* TOP PURPLE GLOW */

    .integration-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient( 90deg, #673de6, #00c6ff );
        transform: scaleX(0);
        transition: .35s;
    }



    .integration-card:hover::before {
        transform: scaleX(1);
    }




    /* HOVER */

    .integration-card:hover {
        transform: translateY(-12px);
        border-color: rgba(103,61,230,.6);
        box-shadow: 0 30px 70px rgba(0,0,0,.45), 0 0 45px rgba(103,61,230,.25);
    }





/* ICON */


.integration-icon {
    width: 80px;
    height: 80px;
    margin: auto;
    border-radius: 22px;
    background: linear-gradient( 135deg, #673de6, #00c6ff );
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    margin-bottom: 25px;
    box-shadow: 0 15px 40px rgba(103,61,230,.45);
    transition: .35s;
}



.integration-card:hover .integration-icon {
    transform: scale(1.1) rotate(3deg);
}




/* TITLE */


.integration-card h3 {
    color: white;
    font-size: 22px;
    margin-bottom: 15px;
    font-weight: 700;
}



/* TEXT */


.integration-card p {
    color: #94a3b8;
    line-height: 1.8;
    font-size: 15px;
}





/* TABLET */

@media(max-width:1100px) {


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





/* MOBILE */


@media(max-width:768px) {


    .integrations-section {
        padding: 80px 0;
    }


    .integration-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }


    .integration-card {
        padding: 30px 25px;
    }
}

/*==================================
SCHOOL JOURNEY DARK NEON SAAS UI
==================================*/

.school-journey {
    padding: 120px 0;
    background: radial-gradient( circle at top left, rgba(103,61,230,.22), transparent 35% ), #030712;
    position: relative;
    overflow: hidden;
}


    /* HEADER */

    .school-journey .section-title {
        color: #ffffff;
    }


    .school-journey .section-subtitle {
        color: #94a3b8;
    }


/* WRAPPER */

.journey-wrapper {
    margin-top: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}



/* CARD */

.journey-step {
    width: 190px;
    position: relative;
    background: linear-gradient( 145deg, rgba(255,255,255,.08), rgba(255,255,255,.03) );
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 26px;
    padding: 30px 22px;
    text-align: center;
    backdrop-filter: blur(15px);
    transition: .35s;
    overflow: hidden;
}


    /* TOP GLOW */


    .journey-step::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient( 90deg, #673de6, #00c6ff );
        transform: scaleX(0);
        transition: .35s;
    }



    .journey-step:hover::before {
        transform: scaleX(1);
    }




    .journey-step:hover {
        transform: translateY(-12px);
        border-color: rgba(103,61,230,.6);
        box-shadow: 0 30px 70px rgba(0,0,0,.45), 0 0 40px rgba(103,61,230,.25);
    }




/* ICON */


.journey-icon {
    width: 75px;
    height: 75px;
    margin: 0 auto 25px;
    border-radius: 22px;
    background: linear-gradient( 135deg, #673de6, #00c6ff );
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 35px;
    box-shadow: 0 15px 40px rgba(103,61,230,.45);
    transition: .35s;
}




.journey-step:hover .journey-icon {
    transform: scale(1.1) rotate(5deg);
}




/* TITLE */


.journey-step h3 {
    color: white;
    font-size: 20px;
    margin-bottom: 15px;
    font-weight: 700;
}




/* TEXT */


.journey-step p {
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.8;
}




/* ARROW */


.journey-arrow {
    font-size: 38px;
    color: #8b5cf6;
    font-weight: 700;
    text-shadow: 0 0 20px rgba(139,92,246,.7);
}




/* TABLET */

@media(max-width:1100px) {


    .journey-wrapper {
        gap: 25px;
    }
}



/* MOBILE */


@media(max-width:768px) {


    .school-journey {
        padding: 80px 0;
    }


    .journey-wrapper {
        flex-direction: column;
    }



    .journey-arrow {
        transform: rotate(90deg);
    }



    .journey-step {
        width: 100%;
        max-width: 350px;
    }
}
/*==================================
TRUSTED SCHOOLS
==================================*/

.trusted-schools {
    padding: 110px 0;
    background: #f8faff;
    overflow: hidden;
}

.logo-slider {
    margin-top: 60px;
    overflow: hidden;
}

.logo-track {
    display: flex;
    width: max-content;
    animation: scrollLogos 30s linear infinite;
}

.school-logo {
    min-width: 250px;
    height: 90px;
    background: #fff;
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 25px;
    font-weight: 700;
    font-size: 20px;
    color: #444;
    border: 1px solid #ececec;
    box-shadow: 0 10px 30px rgba(0,0,0,.05);
}

.logo-track:hover {
    animation-play-state: paused;
}

@keyframes scrollLogos {

    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@media(max-width:768px) {

    .trusted-schools {
        padding: 70px 0;
    }

    .school-logo {
        min-width: 180px;
        height: 70px;
        font-size: 16px;
    }
}

/*====================================
FAQ
====================================*/

.faq-section {
    background: #030712;
}



.faq-list {
    max-width: 900px;
    margin: 70px auto 0;
}

.faq-item {
    background: rgba(15,20,40,.8);
    border: 1px solid rgba(103,61,230,.2);
}

.faq-question {
    padding: 25px 30px;
    font-size: 20px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

    .faq-question span {
        font-size: 28px;
        color: #5b4bff;
    }

.faq-answer {
    padding: 0 30px 30px;
    color: #6b7280;
    line-height: 1.8;
    display: none;
}

.faq-item.active .faq-answer {
    display: block;
}

@media(max-width:768px) {

    .faq-section {
        padding: 70px 0;
    }

    .faq-question {
        font-size: 17px;
        padding: 20px;
    }

    .faq-answer {
        padding: 0 20px 20px;
    }
}
/*===================================
BOOK DEMO
===================================*/

.demo-section {
    padding: 110px 0;
    background: #f8faff;
}

.demo-wrapper {
    display: grid;
    grid-template-columns: 1fr 450px;
    gap: 60px;
    align-items: center;
}

.demo-left h2 {
    font-size: 48px;
    margin: 20px 0;
}

.demo-left p {
    color: #6b7280;
    line-height: 1.8;
    margin-bottom: 35px;
}

.demo-benefits {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.benefit-item {
    background: white;
    padding: 18px 22px;
    border-radius: 14px;
    font-weight: 600;
    box-shadow: 0 10px 25px rgba(0,0,0,.05);
}

.demo-form {
    background: rgba(15,20,40,.85);
    border: 1px solid rgba(103,61,230,.2);
}

    .demo-form h3 {
        margin-bottom: 25px;
        font-size: 28px;
    }

    .demo-form form {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .demo-form input {
        background: #030712;
        color: white;
        border: 1px solid rgba(255,255,255,.1);
    }

        .demo-form input:focus {
            border-color: #5b4bff;
        }

    .demo-form button {
        height: 56px;
        border: none;
        border-radius: 14px;
        background: #5b4bff;
        color: white;
        font-size: 17px;
        font-weight: 600;
        cursor: pointer;
        transition: .3s;
    }

        .demo-form button:hover {
            transform: translateY(-2px);
            background: #4834d4;
        }

@media(max-width:992px) {

    .demo-wrapper {
        grid-template-columns: 1fr;
    }

    .demo-form {
        max-width: 550px;
        margin: auto;
        width: 100%;
    }
}

@media(max-width:768px) {

    .demo-section {
        padding: 70px 0;
    }

    .demo-left h2 {
        font-size: 34px;
    }

    .demo-form {
        padding: 25px;
    }
}
/*====================================
CUSTOMER SUCCESS
====================================*/

.success-section {
    padding: 110px 0;
    background: #fff;
}

.success-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 30px;
    margin-top: 70px;
}

.success-card {
    background: #f8faff;
    border-radius: 22px;
    padding: 40px 30px;
    text-align: center;
    transition: .35s;
    border: 1px solid #ececec;
}

    .success-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 60px rgba(0,0,0,.08);
    }

.success-number {
    font-size: 52px;
    font-weight: 800;
    color: #5b4bff;
    margin-bottom: 15px;
}

.success-card h3 {
    margin-bottom: 15px;
    font-size: 22px;
}

.success-card p {
    color: #6b7280;
    line-height: 1.8;
}

@media(max-width:1100px) {

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

@media(max-width:768px) {

    .success-section {
        padding: 70px 0;
    }

    .success-grid {
        grid-template-columns: 1fr;
    }

    .success-number {
        font-size: 42px;
    }
}

.product-showcase {
    padding: 110px 0;
    background: #f8faff;
}

.showcase-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
    margin-top: 70px;
}

.showcase-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    height: 300px;
    cursor: pointer;
}

    .showcase-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .5s;
    }

.showcase-overlay {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 30px;
    background: linear-gradient(transparent,rgba(0,0,0,.85));
    color: white;
}

.showcase-card:hover img {
    transform: scale(1.08);
}

@media(max-width:992px) {

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

@media(max-width:768px) {

    .product-showcase {
        padding: 70px 0;
    }

    .showcase-grid {
        grid-template-columns: 1fr;
    }

    .showcase-card {
        height: 240px;
    }
}

/*================================
TRUSTED SCHOOLS DARK SECTION
================================*/

.trusted-section {
    padding: 100px 0;
    background: #030712;
    position: relative;
}


    .trusted-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 10%;
        right: 10%;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(103,61,230,.4), transparent );
    }


.trusted-title {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #a1a1aa;
    margin-bottom: 50px;
}



/* Logo Grid */

.trusted-logos {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 20px;
}



/* Logo Cards */

.logo-box {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15,20,40,.75);
    border: 1px solid rgba(103,61,230,.18);
    border-radius: 18px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    transition: .35s;
    backdrop-filter: blur(10px);
}


    .logo-box:hover {
        transform: translateY(-8px);
        border-color: #673DE6;
        box-shadow: 0 20px 40px rgba(103,61,230,.25);
    }



/* Tablet */

@media(max-width:1100px) {

    .trusted-logos {
        grid-template-columns: repeat(3,1fr);
    }
}



/* Mobile */

@media(max-width:600px) {

    .trusted-section {
        padding: 70px 0;
    }


    .trusted-logos {
        grid-template-columns: repeat(2,1fr);
    }


    .logo-box {
        height: 75px;
        font-size: 15px;
    }
}



/*================================
GLOBAL DARK PURPLE NEON OVERRIDE
================================*/


/* ALL LIGHT SECTIONS */

.trusted-schools,
.mobile-apps-section,
.orbit-modules,
.workflow-section,
.visitor-showcase,
.apps-showcase,
.ai-section,
.why-orbit-section,
.modules-section,
.demo-section,
.success-section,
.product-showcase {
    background: radial-gradient(circle at top left, rgba(103,61,230,.18), transparent 35%), #030712;
}



/*================================
TRUSTED SCHOOLS DARK NEON
================================*/


.trusted-schools {
    padding: 120px 0;
    overflow: hidden;
}


    .trusted-schools .section-title {
        color: #fff;
    }


    .trusted-schools .section-subtitle {
        color: #94a3b8;
    }



.logo-slider {
    margin-top: 70px;
}



.school-logo {
    background: linear-gradient( 145deg, rgba(255,255,255,.08), rgba(255,255,255,.03) );
    border: 1px solid rgba(255,255,255,.08);
    color: #fff;
    backdrop-filter: blur(15px);
    box-shadow: 0 20px 50px rgba(0,0,0,.45);
    transition: .35s;
}



    .school-logo:hover {
        transform: translateY(-10px);
        border-color: #673de6;
        box-shadow: 0 20px 50px rgba(103,61,230,.35), 0 0 30px rgba(103,61,230,.25);
    }



/*================================
ALL WHITE CARDS TO DARK NEON
================================*/


.app-card,
.success-card,
.benefit-item,
.showcase-card,
.analytics-card,
.workflow-item {
    background: linear-gradient( 145deg, rgba(255,255,255,.08), rgba(255,255,255,.03) );
    border: 1px solid rgba(255,255,255,.08);
    color: white;
}



    .app-card p,
    .success-card p,
    .workflow-item p,
    .ai-feature p {
        color: #94a3b8;
    }



    .app-card h3,
    .success-card h3,
    .workflow-item h3,
    .ai-feature h3 {
        color: white;
    }



/*================================
PURPLE NEON BUTTONS
================================*/


button,
.demo-form button {
    background: linear-gradient( 135deg, #673de6, #8b5cf6 );
    box-shadow: 0 15px 35px rgba(103,61,230,.35);
}



    button:hover,
    .demo-form button:hover {
        box-shadow: 0 20px 45px rgba(103,61,230,.55);
    }



/*================================
PHONE MOCKUP DARK
================================*/


.phone-body,
.screen,
.phone-screen {
    background: #0a0f1e !important;
    color: white;
}



.app-line {
    background: rgba(255,255,255,.1);
}



.blue,
.green,
.orange,
.purple {
    background: rgba(103,61,230,.15);
    border: 1px solid rgba(103,61,230,.25);
    color: white;
}



/*================================
AI ANALYTICS
================================*/


.analytics-card {
    background: linear-gradient( 145deg, rgba(255,255,255,.08), rgba(255,255,255,.03) );
    border: 1px solid rgba(255,255,255,.08);
}



.score-boxes div {
    background: rgba(103,61,230,.15);
    color: white;
}



/*================================
SUCCESS NUMBERS
================================*/


.success-number {
    background: linear-gradient( 90deg, #8b5cf6, #00c6ff );
    -webkit-background-clip: text;
    color: transparent;
}



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


@media(max-width:768px) {

    .trusted-schools,
    .mobile-apps-section,
    .orbit-modules,
    .workflow-section,
    .ai-section,
    .success-section {
        padding: 80px 0;
    }
}
/* =================================
HERO DASHBOARD PREVIEW
================================= */

.hero-right {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}


.dashboard-preview-card {
    width: 100%;
    max-width: 560px;
    background: linear-gradient( 145deg, rgba(255,255,255,.09), rgba(255,255,255,.03) );
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 30px;
    padding: 25px;
    backdrop-filter: blur(20px);
    box-shadow: 0 40px 100px rgba(0,0,0,.55), 0 0 60px rgba(103,61,230,.18);
}


/* HEADER */

.dashboard-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}


    .dashboard-header h4 {
        color: white;
        font-size: 17px;
        font-weight: 700;
    }



.dashboard-dots {
    display: flex;
    gap: 7px;
}


    .dashboard-dots span {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        display: block;
    }


        /* Red */
        .dashboard-dots span:nth-child(1) {
            background: #ff5f57;
        }


        /* Yellow */
        .dashboard-dots span:nth-child(2) {
            background: #ffbd2e;
        }


        /* Green */
        .dashboard-dots span:nth-child(3) {
            background: #28c840;
        }


/* BODY */

.dashboard-body {
    padding-top: 25px;
}



/* STATS */


.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 15px;
}



.dashboard-stat {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    padding: 18px 12px;
    border-radius: 18px;
}



    .dashboard-stat h2 {
        color: white;
        font-size: 25px;
        margin-bottom: 8px;
    }



    .dashboard-stat p {
        color: #94a3b8;
        font-size: 13px;
    }




/* CHART */


.dashboard-chart {
    height: 190px;
    margin-top: 35px;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding: 20px;
    background: rgba(0,0,0,.25);
    border-radius: 20px;
}


    .dashboard-chart .bar {
        flex: 1;
        background: linear-gradient( 180deg, #00c6ff, #673de6 );
        border-radius: 12px 12px 0 0;
        box-shadow: 0 0 20px rgba(103,61,230,.5);
    }



/* FLOATING CARDS */


.floating-box {
    position: absolute;
    right: -35px;
    top: 70px;
    width: 240px;
    padding: 20px;
    background: rgba(15,23,42,.95);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 18px;
    box-shadow: 0 25px 60px rgba(0,0,0,.45);
}



    .floating-box strong {
        color: white;
        font-size: 16px;
    }



    .floating-box p {
        margin-top: 8px;
        color: #22c55e;
        font-size: 14px;
    }




    .floating-box.second {
        top: auto;
        bottom: 60px;
        right: -20px;
    }


        .floating-box.second p {
            color: #38bdf8;
        }



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


@media(max-width:1100px) {


    .dashboard-preview-card {
        max-width: 500px;
    }



    .floating-box {
        right: -10px;
    }
}



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


@media(max-width:768px) {


    .hero-right {
        margin-top: 50px;
    }



    .dashboard-preview-card {
        padding: 18px;
        border-radius: 22px;
    }



    .dashboard-stats {
        grid-template-columns: repeat(2,1fr);
    }



    .dashboard-chart {
        height: 150px;
    }



    .floating-box {
        position: relative;
        right: auto;
        top: auto;
        bottom: auto;
        margin-top: 20px;
        width: 100%;
    }



        .floating-box.second {
            right: auto;
        }
}


/*================================
LIVE STATS DARK SAAS SECTION
================================*/

.live-stats {
    padding: 80px 0;
    background: #030712;
    position: relative;
}


.stats-wrapper {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 25px;
    align-items: center;
    justify-content: center;
}



.stat-box {
    background: linear-gradient( 145deg, rgba(255,255,255,.08), rgba(255,255,255,.03) );
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    padding: 35px 20px;
    text-align: center;
    backdrop-filter: blur(15px);
    transition: .35s;
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
}



    .stat-box:hover {
        transform: translateY(-10px);
        border-color: #673de6;
        box-shadow: 0 25px 60px rgba(103,61,230,.25);
    }



    .stat-box h2 {
        font-size: 42px;
        font-weight: 800;
        margin-bottom: 12px;
        background: linear-gradient( 90deg, #8b5cf6, #00c6ff );
        -webkit-background-clip: text;
        color: transparent;
    }



    .stat-box span {
        color: #94a3b8;
        font-size: 17px;
        font-weight: 600;
    }



/* Tablet */

@media(max-width:1100px) {

    .stats-wrapper {
        grid-template-columns: repeat(3,1fr);
    }
}


/* Mobile */

@media(max-width:768px) {

    .live-stats {
        padding: 60px 0;
    }


    .stats-wrapper {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }


    .stat-box {
        padding: 25px 15px;
    }


        .stat-box h2 {
            font-size: 32px;
        }
}



@media(max-width:480px) {

    .stats-wrapper {
        grid-template-columns: 1fr;
    }
}


/*=================================
 EVERYTHING INCLUDED HIGHLIGHT
 DARK SAAS NEON UI
=================================*/

.highlight-section {
    padding: 120px 0;
    background: radial-gradient( circle at top left, rgba(103,61,230,.22), transparent 35% ), #030712;
}



    /* HEADER */

    .highlight-section .section-header {
        text-align: center;
        max-width: 800px;
        margin: auto;
    }


    .highlight-section .section-badge {
        display: inline-block;
        padding: 8px 18px;
        border-radius: 50px;
        background: rgba(103,61,230,.15);
        border: 1px solid rgba(103,61,230,.45);
        color: #c4b5fd;
        font-weight: 600;
    }



    .highlight-section .section-title {
        color: white;
        font-size: 48px;
        margin-top: 20px;
    }



    .highlight-section .section-subtitle {
        color: #94a3b8;
        font-size: 18px;
        margin-top: 15px;
    }



/* GRID */

.highlight-grid {
    margin-top: 70px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 28px;
}




/* CARD */

.highlight-card {
    position: relative;
    background: linear-gradient( 145deg, rgba(255,255,255,.08), rgba(255,255,255,.03) );
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 26px;
    padding: 35px 30px;
    overflow: hidden;
    transition: .35s;
    backdrop-filter: blur(15px);
}



    /* TOP GLOW */

    .highlight-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient( 90deg, #673de6, #00c6ff );
        transform: scaleX(0);
        transition: .35s;
    }



    .highlight-card:hover::before {
        transform: scaleX(1);
    }



    .highlight-card:hover {
        transform: translateY(-12px);
        border-color: rgba(103,61,230,.6);
        box-shadow: 0 30px 70px rgba(0,0,0,.45), 0 0 40px rgba(103,61,230,.2);
    }



/* ICON */


.highlight-icon {
    width: 75px;
    height: 75px;
    border-radius: 22px;
    background: linear-gradient( 135deg, #673de6, #00c6ff );
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
    margin-bottom: 25px;
    box-shadow: 0 15px 40px rgba(103,61,230,.4);
    transition: .35s;
}



.highlight-card:hover .highlight-icon {
    transform: scale(1.1) rotate(5deg);
}



/* TITLE */


.highlight-card h3 {
    color: white;
    font-size: 22px;
    margin-bottom: 15px;
    font-weight: 700;
}



/* DESCRIPTION */


.highlight-card p {
    color: #94a3b8;
    line-height: 1.8;
    font-size: 15px;
}



/* TABLET */


@media(max-width:1100px) {


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



/* MOBILE */


@media(max-width:768px) {


    .highlight-section {
        padding: 80px 0;
    }


    .highlight-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }


    .highlight-section .section-title {
        font-size: 34px;
    }


    .highlight-card {
        padding: 30px 25px;
    }
}


/* =====================================
   MODULE SHOWCASE DARK SAAS UI
===================================== */

.modules-showcase {
    padding: 120px 0;
    background: radial-gradient(circle at top left, rgba(103,61,230,.25), transparent 35%), #030712;
}


    /* HEADER */

    .modules-showcase .section-header {
        text-align: center;
        max-width: 850px;
        margin: auto;
    }


    .modules-showcase .section-badge {
        display: inline-block;
        padding: 8px 18px;
        border-radius: 50px;
        background: rgba(103,61,230,.15);
        border: 1px solid rgba(103,61,230,.5);
        color: #c4b5fd;
    }


    .modules-showcase .section-title {
        color: white;
        font-size: 48px;
        margin-top: 20px;
    }


    .modules-showcase .section-subtitle {
        color: #94a3b8;
        font-size: 18px;
        margin-top: 20px;
    }



/* MAIN LAYOUT */

.modules-layout {
    margin-top: 70px;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 40px;
    align-items: start;
}



/* LEFT MODULE LIST */

.modules-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


.module-item {
    padding: 18px 22px;
    border-radius: 16px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    color: #cbd5e1;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: .35s;
}


    .module-item span {
        color: #8b5cf6;
        margin-right: 12px;
    }



    .module-item:hover,
    .module-item.active {
        background: linear-gradient( 135deg, #673de6, #00c6ff );
        color: white;
        transform: translateX(8px);
        box-shadow: 0 15px 40px rgba(103,61,230,.35);
    }



        .module-item.active span {
            color: white;
        }

.rahvi-chat {
    position: fixed;
    right: 25px;
    bottom: 90px;
    width: 350px;
    height: 450px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 9999;
}


.rahvi-chat-header {
    background: #2563eb;
    color: white;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


    .rahvi-chat-header button {
        background: none;
        border: none;
        color: white;
        font-size: 20px;
        cursor: pointer;
    }


.rahvi-chat-body {
    flex: 1;
    padding: 20px;
    color: #333;
}


.rahvi-chat-input {
    display: flex;
    padding: 10px;
    border-top: 1px solid #ddd;
}


    .rahvi-chat-input input {
        flex: 1;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 10px;
    }


    .rahvi-chat-input button {
        margin-left: 8px;
        background: #2563eb;
        color: white;
        border: none;
        padding: 10px 15px;
        border-radius: 10px;
    }

/* RIGHT PREVIEW */

.module-preview {
    background: linear-gradient( 145deg, rgba(255,255,255,.09), rgba(255,255,255,.03) );
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 30px;
    padding: 35px;
    backdrop-filter: blur(20px);
    box-shadow: 0 30px 80px rgba(0,0,0,.45);
}



/* HEADER */

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}



    .preview-header h3 {
        color: white;
        font-size: 24px;
    }



    .preview-header span {
        color: #22c55e;
        font-weight: 700;
    }



/* CARDS */

.preview-cards {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    margin-top: 30px;
}



.preview-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    padding: 25px;
    border-radius: 20px;
}



    .preview-card h4 {
        color: #94a3b8;
        font-size: 15px;
    }


    .preview-card h2 {
        color: white;
        font-size: 38px;
        margin-top: 15px;
    }



/* CHART */

.preview-chart {
    height: 240px;
    margin-top: 35px;
    border-radius: 20px;
    background: rgba(0,0,0,.25);
    position: relative;
    overflow: hidden;
}


.chart-line {
    position: absolute;
    width: 80%;
    height: 4px;
    background: linear-gradient( 90deg, #673de6, #00c6ff );
    top: 55%;
    left: 10%;
    transform: rotate(-8deg);
    box-shadow: 0 0 25px #673de6;
}




/* TABLET */

@media(max-width:1000px) {

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



/* MOBILE */

@media(max-width:768px) {

    .modules-showcase {
        padding: 80px 0;
    }


        .modules-showcase .section-title {
            font-size: 34px;
        }


    .preview-cards {
        grid-template-columns: 1fr;
    }


    .module-preview {
        padding: 25px;
    }
}
/* ======================================
   ROLE BASED DASHBOARD DARK SAAS UI
====================================== */


.dashboard-role-section {
    padding: 120px 0;
    background: radial-gradient( circle at top right, rgba(103,61,230,.25), transparent 35% ), #030712;
}



    /* HEADER */

    .dashboard-role-section .section-header {
        text-align: center;
        max-width: 850px;
        margin: auto;
    }


    .dashboard-role-section .section-badge {
        display: inline-block;
        padding: 8px 18px;
        border-radius: 50px;
        background: rgba(103,61,230,.15);
        border: 1px solid rgba(103,61,230,.45);
        color: #c4b5fd;
    }



    .dashboard-role-section .section-title {
        color: white;
        font-size: 48px;
        margin-top: 20px;
    }


    .dashboard-role-section .section-subtitle {
        color: #94a3b8;
        margin-top: 20px;
    }



/* MAIN GRID */


.role-grid {
    margin-top: 70px;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
    align-items: start;
}



/* LEFT MENU */


.role-menu {
    display: flex;
    flex-direction: column;
    gap: 15px;
}



.role-item {
    padding: 18px 22px;
    border-radius: 16px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    color: #cbd5e1;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: .35s;
}



    .role-item:hover,
    .role-item.active {
        background: linear-gradient( 135deg, #673de6, #00c6ff );
        color: white;
        transform: translateX(8px);
        box-shadow: 0 15px 40px rgba(103,61,230,.35);
    }





/* RIGHT PREVIEW */


.role-preview {
    background: linear-gradient( 145deg, rgba(255,255,255,.08), rgba(255,255,255,.03) );
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 30px;
    padding: 30px;
    backdrop-filter: blur(20px);
}



/* TOP STAT CARDS */


.top-cards {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px;
}



.mini-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    padding: 22px;
}



    .mini-card h4 {
        color: #94a3b8;
        font-size: 14px;
    }


    .mini-card h2 {
        color: white;
        font-size: 32px;
        margin-top: 12px;
    }




/* DASHBOARD WINDOW */


.dashboard-window {
    margin-top: 35px;
    display: grid;
    grid-template-columns: 200px 1fr;
    min-height: 300px;
    background: rgba(0,0,0,.25);
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
}



/* WINDOW SIDEBAR */


.window-sidebar {
    padding: 25px;
    background: rgba(255,255,255,.04);
}



.window-item {
    padding: 14px;
    border-radius: 12px;
    color: #94a3b8;
    margin-bottom: 10px;
    font-weight: 600;
}



    .window-item.active {
        background: linear-gradient( 135deg, #673de6, #00c6ff );
        color: white;
    }





/* CONTENT */


.window-content {
    padding: 40px;
}



.graph {
    height: 220px;
    display: flex;
    align-items: flex-end;
    gap: 18px;
}



.graph-bar {
    flex: 1;
    background: linear-gradient( 180deg, #00c6ff, #673de6 );
    border-radius: 12px 12px 0 0;
    box-shadow: 0 0 25px rgba(103,61,230,.5);
}




/* TABLET */


@media(max-width:1100px) {


    .role-grid {
        grid-template-columns: 1fr;
    }


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




/* MOBILE */


@media(max-width:768px) {


    .dashboard-role-section {
        padding: 80px 0;
    }



        .dashboard-role-section .section-title {
            font-size: 34px;
        }


    .role-grid {
        gap: 25px;
    }



    .top-cards {
        grid-template-columns: 1fr;
    }



    .dashboard-window {
        grid-template-columns: 1fr;
    }


    .window-sidebar {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 10px;
    }


    .window-item {
        margin: 0;
    }
}

/* ==========================
   DEMO SECTION
========================== */

.demo-section {
    padding: 110px 0;
    background: radial-gradient(circle at top left, rgba(124,58,237,.18), transparent 35%), #030712;
}


.demo-wrapper {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 70px;
    align-items: center;
}


/* LEFT */

.demo-left h2 {
    margin-top: 20px;
    font-size: 52px;
    line-height: 1.15;
    font-weight: 800;
    color: #fff;
}


.demo-left p {
    margin-top: 25px;
    max-width: 650px;
    font-size: 18px;
    line-height: 1.8;
    color: #94a3b8;
}



/* BENEFITS */


.demo-benefits {
    margin-top: 45px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}


.benefit-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 22px 28px;
    border-radius: 18px;
    background: linear-gradient( 135deg, rgba(255,255,255,.08), rgba(255,255,255,.03) );
    border: 1px solid rgba(255,255,255,.08);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    backdrop-filter: blur(15px);
    transition: .3s;
}



    .benefit-item:hover {
        transform: translateX(8px);
        border-color: #7c3aed;
    }



/* FORM CARD */


.demo-form {
    background: linear-gradient( 145deg, rgba(255,255,255,.10), rgba(255,255,255,.04) );
    border: 1px solid rgba(255,255,255,.12);
    padding: 40px;
    border-radius: 28px;
    box-shadow: 0 25px 70px rgba(0,0,0,.45);
    backdrop-filter: blur(20px);
}



    .demo-form h3 {
        font-size: 32px;
        margin-bottom: 30px;
        color: white;
        font-weight: 800;
    }



    .demo-form input {
        width: 100%;
        height: 58px;
        margin-bottom: 18px;
        padding: 0 20px;
        border-radius: 14px;
        background: #080d1d;
        border: 1px solid rgba(255,255,255,.12);
        color: white;
        font-size: 16px;
        outline: none;
    }



        .demo-form input::placeholder {
            color: #64748b;
        }



        .demo-form input:focus {
            border-color: #8b5cf6;
            box-shadow: 0 0 0 3px rgba(139,92,246,.15);
        }




    .demo-form button {
        width: 100%;
        height: 60px;
        margin-top: 10px;
        border: none;
        border-radius: 16px;
        background: linear-gradient( 90deg, #6d28d9, #8b5cf6 );
        color: white;
        font-size: 18px;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 15px 35px rgba(124,58,237,.35);
        transition: .3s;
    }



        .demo-form button:hover {
            transform: translateY(-3px);
        }



/* MOBILE */


@media(max-width:992px) {


    .demo-wrapper {
        grid-template-columns: 1fr;
        gap: 50px;
    }


    .demo-left h2 {
        font-size: 38px;
    }


    .demo-form {
        padding: 25px;
    }
}

html {
    scroll-behavior: smooth;
}
/* ==========================
   FOOTER
========================== */

.ravrek-footer {
    background: #020617;
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 80px 0 25px;
}


.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 50px;
}


.footer-brand h2 {
    color: white;
    font-size: 32px;
}


    .footer-brand h2 span {
        background: linear-gradient( 90deg,#6366f1,#06b6d4);
        -webkit-background-clip: text;
        color: transparent;
    }


.footer-brand p {
    color: #94a3b8;
    line-height: 1.8;
    margin-top: 20px;
}



.footer-column {
    display: flex;
    flex-direction: column;
    gap: 14px;
}


    .footer-column h3 {
        color: white;
        margin-bottom: 10px;
    }


    .footer-column a {
        color: #94a3b8;
        text-decoration: none;
    }


        .footer-column a:hover {
            color: white;
        }



.footer-bottom {
    margin-top: 50px;
    padding-top: 25px;
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex;
    justify-content: space-between;
    color: #64748b;
}



@media(max-width:768px) {

    .footer-grid {
        grid-template-columns: 1fr;
    }


    .footer-bottom {
        flex-direction: column;
        gap: 10px;
    }
}

.rahvi-agent {
    position: fixed;
    right: 25px;
    bottom: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #111827;
    padding: 12px 18px;
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(0,0,0,.4);
    cursor: pointer;
    z-index: 9999;
}



.rahvi-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #6366f1;
    border-radius: 50%;
    font-size: 25px;
}



.rahvi-text {
    display: flex;
    flex-direction: column;
}


    .rahvi-text strong {
        color: white;
    }


    .rahvi-text span {
        font-size: 12px;
        color: #94a3b8;
    }

/* ==========================
   PRICING
========================== */


.pricing-section {
    padding: 100px 0;
    background: radial-gradient( circle at top, rgba(124,58,237,.15), transparent 40% );
}



.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
    margin-top: 50px;
}



.pricing-card {
    background: rgba(15,23,42,.75);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 24px;
    padding: 40px 30px;
    position: relative;
    backdrop-filter: blur(20px);
    transition: .3s;
}



    .pricing-card:hover {
        transform: translateY(-10px);
        border-color: #8b5cf6;
        box-shadow: 0 20px 50px rgba(124,58,237,.25);
    }




    .pricing-card h3 {
        color: white;
        font-size: 28px;
    }



.plan-desc {
    color: #94a3b8;
    margin: 15px 0;
}



.price {
    font-size: 42px;
    font-weight: 800;
    color: white;
    margin: 25px 0;
}



    .price span {
        font-size: 16px;
        color: #94a3b8;
    }




.pricing-card button {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    border: none;
    background: linear-gradient( 90deg, #7c3aed, #06b6d4 );
    color: white;
    font-weight: 700;
    cursor: pointer;
}



.pricing-card ul {
    list-style: none;
    padding: 0;
    margin-top: 30px;
}



.pricing-card li {
    color: #cbd5e1;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}




/* Popular */


.popular {
    border: 2px solid #8b5cf6;
    transform: scale(1.05);
    box-shadow: 0 0 50px rgba(139,92,246,.35);
}



.popular-tag {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: #8b5cf6;
    color: white;
    padding: 7px 20px;
    border-radius: 30px;
    font-size: 13px;
}





@media(max-width:900px) {


    .pricing-grid {
        grid-template-columns: 1fr;
    }


    .popular {
        transform: none;
    }
}



.footer-social {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

    .footer-social a {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255,255,255,0.08);
        color: #fff;
        font-size: 20px;
        text-decoration: none;
        transition: all .3s ease;
    }

        .footer-social a:hover {
            background: #0A66C2;
            transform: translateY(-3px);
        }


.btn-trial {
    display: inline-block;
    text-align: center;
    text-decoration: none;
}
/* --- FORM SUBMISSION LOADER & ANIMATION SYSTEM --- */
.submit-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

    .submit-loader-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

.loader-spinner-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
}

.loader-orbit-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 4px solid transparent;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: orbitRotate 1.2s linear infinite;
}

.loader-orbit-ring-inner {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 4px solid transparent;
    border-bottom-color: #38bdf8;
    border-radius: 50%;
    animation: orbitRotate 0.8s linear infinite reverse;
}

.loader-center-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 20px;
    animation: pulseGlow 1.5s ease-in-out infinite;
}

.loader-status-text {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    animation: textFadePulse 1.8s ease-in-out infinite;
}

@keyframes orbitRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulseGlow {
    0%, 100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(0.9);
    }

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

@keyframes textFadePulse {
    0%, 100% {
        opacity: 0.7;
    }

    50% {
        opacity: 1;
    }
}

/* =======================================================
   MOBILE OVERFLOW & CUTTING RESPONSIVE FIXES
   ======================================================= */

/* 1. Core Modules Grid Fix */
@media (max-width: 480px) {
    .modules-grid, .product-modules .modules-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .module-card {
        padding: 20px !important; /* Fixed inside padding overflow */
        box-sizing: border-box !important;
    }
}

/* 2. Smart Campus & Phone Mockup Overflow Fix */
@media (max-width: 768px) {
    .phone-mockup {
        width: 100% !important;
        max-width: 320px !important;
        padding: 12px !important;
        box-sizing: border-box !important;
    }

    .qr-box {
        width: 100% !important;
        max-width: 160px !important;
        height: 160px !important;
    }
}

/* 3. Mobile Apps Grid & Cards Fix */
@media (max-width: 768px) {
    .apps-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .app-phone, .phone-frame {
        width: 100% !important;
        max-width: 310px !important;
        margin: 0 auto 20px !important;
        box-sizing: border-box !important;
    }

    .phone-body, .screen {
        padding: 15px !important;
        min-height: auto !important; /* Removes fixed height breaks */
    }
}

/* 4. Visitor Showcase Floating Element Fix */
@media (max-width: 576px) {
    .phone-wrapper {
        width: 100% !important;
        overflow: hidden !important; /* Prevents floating badge leak */
        padding: 10px 0 !important;
    }

    .phone {
        width: 100% !important;
        max-width: 290px !important;
        box-sizing: border-box !important;
    }

    /* Badges adjusting dynamically inside screen layout */
    .floating {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        margin: 10px auto !important;
        display: inline-block !important;
        text-align: center !important;
    }
}

/* 5. AI Section Charts & Boxes Fix */
@media (max-width: 576px) {
    .analytics-card {
        padding: 20px !important;
        box-sizing: border-box !important;
    }

    .chart-bars, .fake-chart {
        gap: 6px !important;
        height: 150px !important;
    }

    .score-boxes {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

/* 6. School Journey Steps Responsive Fix */
@media (max-width: 768px) {
    .journey-wrapper {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
    }

    .journey-step {
        width: 100% !important;
        max-width: 280px !important; /* Replaced hardcoded 190px */
        box-sizing: border-box !important;
        margin: 0 auto !important;
    }
}

/* 7. Global Typography and Box Protection */
@media (max-width: 480px) {
    *, *::before, *::after {
        box-sizing: border-box !important; /* Prevents padding from inflating sizes */
    }

    /* Long heading text breaks safely */
    h1, h2, h3 {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
}


@media (max-width: 767px) {
    /* 3. HERO RIGHT SIDE - THE GRAPH SCROLLER WRAPPER */
    .hero-right {
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 20px 10px 40px 10px !important;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

        /* Custom Webkit Scrollbar to keep it sleek */
        .hero-right::-webkit-scrollbar {
            height: 4px;
        }

        .hero-right::-webkit-scrollbar-thumb {
            background: rgba(147, 51, 234, 0.4);
            border-radius: 4px;
        }

    /* Force the dashboard layout to maintain its structured width inside scroller */
    .dashboard-mockup {
        width: 650px !important;
        min-width: 650px !important;
        margin: 0 auto;
        position: relative !important;
    }

    .qr-visitor-entry,
    .visitor-tracking,
    .floating-card {
        position: absolute !important;
    }
}

/* --- 🚀 FLOATING BANNER (DESKTOP) --- */
.soft-launch-banner {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    background: linear-gradient(135deg, #0f172a, #1e3a8a);
    backdrop-filter: blur(8px);
    padding: 12px 24px;
    border-radius: 50px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: max-content;
    max-width: 90%;
    transition: all 0.3s ease;
}

.banner-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.badge-live {
    background: #ef4444;
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.banner-text {
    color: #e2e8f0;
    font-size: 14px;
    font-weight: 500;
}

.banner-link {
    color: #facc15;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    transition: all 0.2s ease;
}

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

/* --- 👧 DANCING GIRL ANIMATION SYSTEM (DESKTOP) --- */
.school-girl-anim {
    position: absolute;
    top: -46px !important;
    left: 30px !important;
    width: 52px !important;
    height: 52px !important;
    z-index: 10001 !important;
    transform-origin: bottom center !important;
    /* 🔥 पूरी बॉडी का डांस मूवमेंट */
    animation: girlDanceBody 0.6s ease-in-out infinite alternate !important;
}

.girl-svg {
    width: 100% !important;
    height: 100% !important;
    filter: drop-shadow(0px 5px 6px rgba(0, 0, 0, 0.4)) !important;
}

/* 💃 SVG के अंदर के पार्ट्स को नचाने का कोड */
.girl-leg-left {
    transform-origin: 24px 50px !important;
    animation: legDanceLeft 0.3s ease-in-out infinite alternate !important;
}

.girl-leg-right {
    transform-origin: 40px 50px !important;
    animation: legDanceRight 0.3s ease-in-out infinite alternate 0.15s !important;
}

.girl-hair-left {
    transform-origin: 20px 18px !important;
    animation: hairMove 0.6s ease-in-out infinite alternate !important;
}

.girl-hair-right {
    transform-origin: 44px 18px !important;
    animation: hairMove 0.6s ease-in-out infinite alternate 0.3s !important;
}

/* 🔥 डांस कीफ़्रेम्स */
@keyframes girlDanceBody {
    0% {
        transform: translateY(0) scale(1) rotate(-3deg);
    }

    100% {
        transform: translateY(-6px) scale(1.05) rotate(3deg);
    }
}

@keyframes legDanceLeft {
    0% {
        transform: translateY(0) translateX(0);
    }

    100% {
        transform: translateY(-3px) translateX(-2px);
    }
}

@keyframes legDanceRight {
    0% {
        transform: translateY(0) translateX(0);
    }

    100% {
        transform: translateY(-3px) translateX(2px);
    }
}

@keyframes hairMove {
    0% {
        transform: rotate(-8deg);
    }

    100% {
        transform: rotate(8deg);
    }
}
/* --- 📱 MOBILE OPTIMIZATION (Fixes Footer Link Hiding & Clicking) --- */
@media (max-width: 768px) {
    .soft-launch-banner {
        bottom: 90px !important;
        padding: 0 !important; /* पैडिंग 0 की ताकि यह फुटर लिंक्स को न दबाए */
        border-radius: 16px !important;
        width: 94% !important;
        max-width: 380px !important;
        /* 🌟 जादुई प्रॉपर्टी: इससे बैनर के आर-पार नीचे की लिंक्स (About Us, Privacy Policy) पर क्लिक हो सकेगा! */
        pointer-events: none !important;
        /* फुटर के ऊपर थोड़ा सा ट्रांसपेरेंट लुक ताकि नीचे का टेक्स्ट हल्का दिखता रहे */
        background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 58, 138, 0.95)) !important;
    }

    .banner-container {
        flex-direction: column !important;
        gap: 8px !important;
        text-align: left !important; /* टेक्स्ट को लेफ्ट किया ताकि राइट साइड लड़की के लिए खाली रहे */
        padding: 16px 60px 16px 16px !important; /* राइट साइड में 60px स्पेस दिया लड़की के लिए */
    }

    .badge-live {
        align-self: flex-start !important;
        font-size: 10px !important;
    }

    .banner-text {
        font-size: 11px !important;
        line-height: 1.4 !important;
        display: block !important;
        margin-bottom: 2px !important;
    }

    /* 🌟 बैनर का बटन */
    .banner-link {
        font-size: 12px !important;
        background: rgba(254, 204, 21, 0.2) !important;
        padding: 8px 12px !important;
        border-radius: 30px !important;
        width: max-content !important; /* बटन को पूरी चौड़ाई की जगह छोटा किया */
        display: inline-block !important;
        /* 🌟 सिर्फ बटन पर क्लिक काम करे, इसलिए इसे auto किया */
        pointer-events: auto !important;
    }

    /* 👧 लड़की को मोबाइल पर राइट साइड के कोने में सेट किया (ताकि टेक्स्ट या लिंक्स ब्लॉक न हों) */
    .school-girl-anim {
        top: 50% !important;
        right: 12px !important; /* राइट साइड में फिक्स */
        left: auto !important;
        margin-left: 0 !important;
        transform: translateY(-50%) !important; /* वर्टिकली सेंटर */
        width: 42px !important;
        height: 42px !important;
        /* 🌟 लड़की पर भी क्लिक काम कर सके */
        pointer-events: auto !important;
        /* मोबाइल के लिए सिंपल बाउंस डांस */
        animation: girlBounceMobile 0.6s ease-in-out infinite alternate !important;
    }
}

/* 💃 मोबाइल के लिए स्पेशल डांस स्टेप */
@keyframes girlBounceMobile {
    0% {
        transform: translateY(-50%) scale(1) rotate(-3deg);
    }

    100% {
        transform: translateY(-65%) scale(1.05) rotate(3deg);
    }
}

/* 🌟 जब यूजर फुटर में आए (सिर्फ लड़की बचेगी) */
.soft-launch-banner.only-girl-mode {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    backdrop-filter: none !important;
    width: auto !important;
    pointer-events: none !important; /* फुटर के लिंक्स पर क्लिक होने के लिए */
}

    /* टेक्स्ट, बैज और बटन को गायब करना */
    .soft-launch-banner.only-girl-mode .banner-container {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* 👧 लड़की को सही जगह पर रोक कर रखना जब मोड एक्टिव हो */
    .soft-launch-banner.only-girl-mode .school-girl-anim {
        pointer-events: auto !important;
    }

/* 📱 मोबाइल पर लड़की की स्पेशल पोजीशन (चैटबॉट के ठीक ऊपर) */
@media (max-width: 768px) {
    .soft-launch-banner.only-girl-mode {
        bottom: 90px !important; /* चैटबॉट बटन के अलाइनमेंट में रखने के लिए */
        left: 85% !important; /* राइट साइड में खिसका दिया */
    }

        .soft-launch-banner.only-girl-mode .school-girl-anim {
            left: 0 !important;
            margin-left: 0 !important;
            transform: none !important;
            width: 44px !important;
            height: 44px !important;
            /* फुटर एरिया में भी मटकती रहेगी */
            animation: girlDanceBodyMobile 0.6s ease-in-out infinite alternate !important;
        }
}
/* ❌ क्लोज बटन की स्टाइल */
.banner-close-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ef4444;
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 11px;
    line-height: 14px;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    transition: transform 0.2s;
    pointer-events: auto !important;
}

    .banner-close-btn:hover {
        transform: scale(1.2);
    }

/* 🌟 जब सिर्फ लड़की वाला मोड एक्टिव हो */
.soft-launch-banner.only-girl-mode {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    backdrop-filter: none !important;
    width: auto !important;
    pointer-events: none !important;
}

    /* क्लोज बटन और टेक्स्ट कंटेनर दोनों गायब हो जाएंगे */
    .soft-launch-banner.only-girl-mode .banner-container,
    .soft-launch-banner.only-girl-mode .banner-close-btn {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .soft-launch-banner.only-girl-mode .school-girl-anim {
        pointer-events: auto !important;
        cursor: default; /* अब क्लिक करने की जरूरत नहीं तो कर्सर नॉर्मल */
    }

/* 📱 मोबाइल रिस्पॉन्सिव पोजीशन (चैटबॉट के ऊपर) */
@media (max-width: 768px) {
    .soft-launch-banner.only-girl-mode {
        bottom: 90px !important;
        left: 85% !important;
    }

        .soft-launch-banner.only-girl-mode .school-girl-anim {
            left: 0 !important;
            margin-left: 0 !important;
            transform: none !important;
            width: 44px !important;
            height: 44px !important;
            animation: girlDanceBodyMobile 0.6s ease-in-out infinite alternate !important;
        }
}