/* ==========================================================
   CHINMUN RESPONSIVE
========================================================== */


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

@media (max-width: 1100px) {

    .hero-container {

        grid-template-columns:
            1fr;

        gap: 55px;

    }


    .hero-content {

        text-align: center;

    }


    .hero-title {

        margin-left: auto;
        margin-right: auto;

    }


    .hero-description {

        margin-left: auto;
        margin-right: auto;

    }


    .hero-actions {

        justify-content: center;

    }


    .hero-trust {

        justify-content: center;

    }


    .hero-dashboard-wrap {

        width:
            min(
                900px,
                100%
            );

        margin:
            0 auto;

    }


    .feature-grid {

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

    }


    .experience-container {

        grid-template-columns:
            1fr;

        gap: 60px;

    }


    .experience-copy {

        text-align: center;

    }


    .experience-copy p {

        margin-left: auto;
        margin-right: auto;

    }

}

/* ==========================================================
   CHINMUN ERP
   MOBILE MENU - FINAL WORKING SYSTEM
========================================================== */

@media (max-width: 800px) {


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

    .site-header {

        position: fixed;

        top: 0;

        left: 0;

        right: 0;

        z-index: 10000;

    }


    .nav-shell {

        position: relative;

    }


    /* ======================================================
       MOBILE MENU BUTTON
    ====================================================== */

    .mobile-menu-btn {

        display: flex;

        align-items: center;

        justify-content: center;

        flex-direction: column;

        gap: 5px;

        width: 44px;

        height: 44px;

        padding: 0;

        flex-shrink: 0;

        position: relative;

        z-index: 10003;

        cursor: pointer;

    }


    .mobile-menu-btn span {

        display: block;

        width: 22px;

        height: 2px;

        margin: 0;

        border-radius: 10px;

        background: #ffffff;

        transition:
            transform .25s ease,
            opacity .25s ease;

    }


    /* ======================================================
       HAMBURGER → X
    ====================================================== */

    .mobile-menu-btn.is-active span:nth-child(1) {

        transform:
            translateY(7px)
            rotate(45deg);

    }


    .mobile-menu-btn.is-active span:nth-child(2) {

        opacity: 0;

    }


    .mobile-menu-btn.is-active span:nth-child(3) {

        transform:
            translateY(-7px)
            rotate(-45deg);

    }


    /* ======================================================
       MOBILE NAVIGATION PANEL
    ====================================================== */

    .main-nav {

        position: fixed;

        top: 78px;

        left: 12px;

        right: 12px;

        bottom: 12px;


        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 5px;


        padding: 16px;


        background:
            rgba(8, 12, 28, 0.98);


        border:
            1px solid
            rgba(255, 255, 255, 0.12);


        border-radius: 20px;


        backdrop-filter:
            blur(25px);

        -webkit-backdrop-filter:
            blur(25px);


        box-shadow:
            0 25px 70px
            rgba(0, 0, 0, 0.45);


        z-index: 10001;


        overflow-y: auto;


        /* CLOSED STATE */

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transform:
            translateY(-15px);


        transition:
            opacity .25s ease,
            visibility .25s ease,
            transform .25s ease;

    }


    /* ======================================================
       OPEN MOBILE MENU
    ====================================================== */

    .main-nav.is-open {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform:
            translateY(0);

    }


    /* ======================================================
       NAV LINKS
    ====================================================== */

    .main-nav > a {

        display: flex;

        align-items: center;

        width: 100%;

        flex-shrink: 0;

        padding:
            14px 16px;

        border-radius:
            12px;

    }


    .main-nav > a:hover,
    .main-nav > a.active {

        background:
            rgba(255, 255, 255, 0.07);

    }


    /* ======================================================
       LOGIN + REGISTER
       FIXED AT BOTTOM OF MENU
    ====================================================== */

    .main-nav .nav-actions {

        display: flex !important;

        flex-direction: column;

        align-items: stretch;

        gap: 10px;

        width: 100%;

        margin-top: 40px;

        padding-top: 20px;

        flex-shrink: 0;

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


        /* IMPORTANT:
           Parent main-nav controls visibility */

        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;

        transform: none !important;

        position: static !important;

        background: transparent !important;

        border-left: none !important;

        border-right: none !important;

        border-bottom: none !important;

        box-shadow: none !important;

    }

/* ==========================================================
   REGISTER NOW BUTTON
========================================================== */

.nav-actions .btn-primary.btn-small {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-width: 132px;

    height: 48px;

    padding:
        0 16px;

    white-space: nowrap;

    border-radius: 14px;

    text-decoration: none;

    line-height: 1;

    font-size: 14px;

    font-weight: 700;

}


/* ==========================================================
   REGISTER BUTTON ARROW
========================================================== */

.nav-actions .btn-primary.btn-small span {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 16px;

    height: 16px;

    flex-shrink: 0;

    font-size: 17px;

    line-height: 1;

    transition:
        transform .25s ease;

}


/* ==========================================================
   HOVER EFFECT
========================================================== */

.nav-actions .btn-primary.btn-small:hover span {

    transform:
        translate(
            3px,
            -3px
        );

}
    /* ======================================================
       LOGIN BUTTON
    ====================================================== */

    .main-nav .nav-actions .nav-login {

        width: 100%;

        min-height: 48px;

        height: 48px;

        display: flex;

        align-items: center;

        justify-content: center;

    }


    /* ======================================================
       REGISTER BUTTON
    ====================================================== */

    .main-nav .nav-actions .btn {

        width: 100%;

        min-height: 48px;

        height: 48px;

        display: flex;

        align-items: center;

        justify-content: center;

    }


    /* ======================================================
       BODY SCROLL LOCK
    ====================================================== */

    body.mobile-menu-active {

        overflow: hidden;

    }

}


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

@media (max-width: 600px) {


    .main-nav {

        top: 70px;

        bottom: 10px;

    }

}
/* ==========================================================
   SMALL MOBILE HEADER POSITION
========================================================== */

@media (max-width: 600px) {


    .main-nav {

        top: 70px;

        left: 10px;

        right: 10px;

        bottom: 10px;
		height:450px;

    }

}


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

@media (max-width: 700px) {

    .container {

        width:
            calc(100% - 28px);

    }


    .hero-section {

        min-height:
            auto;

        padding:
            125px 0 80px;

    }


    .hero-title {

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

    }


    .hero-description {

        font-size:
            15px;

    }


    .hero-actions {

        flex-direction:
            column;

    }


    .hero-actions .btn {

        width:
            100%;

    }


    .hero-trust {

        display:
            grid;

        gap:
            9px;

    }


    .dashboard-card {

        border-radius:
            18px;

    }


    .dashboard-main {

        min-height:
            350px;

    }


    .dashboard-sidebar {

        width:
            45px;

        padding:
            12px 6px;

    }


    .dashboard-logo {

        width:
            32px;

        height:
            32px;

    }


    .dashboard-nav {

        width:
            32px;

        height:
            32px;

    }


    .dashboard-content {

        padding:
            14px;

    }


    .dashboard-heading h3 {

        font-size:
            17px;

    }


    .dashboard-date {

        display:
            none;

    }


    .dashboard-kpis {

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

    }


    .dashboard-analytics {

        grid-template-columns:
            1fr;

    }


    .dashboard-panel {

        min-height:
            180px;

    }


    .chart-area {

        height:
            130px;

    }


    .insights-panel {

        min-height:
            auto;

    }


    .floating-chip {

        display:
            none;

    }


    .dashboard-cursor-label {

        display:
            none;

    }


    .trust-strip-inner {

        justify-content:
            center;

        padding:
            18px 0;

    }


    .trust-strip-inner div {

        width:
            45%;

        justify-content:
            center;

    }


    .feature-grid {

        grid-template-columns:
            1fr;

    }


    .feature-card {

        min-height:
            245px;

    }


    .section {

        padding:
            80px 0;

    }


    .section-heading h2,
    .experience-copy h2 {

        font-size:
            43px;

    }


    .experience-section {

        padding:
            90px 0;

    }


    .experience-orbit {

        width:
            min(
                370px,
                100%
            );

    }


    .cta-card {

        display:
            block;

        padding:
            32px;

    }


    .cta-buttons {

        margin-top:
            25px;

    }


    .cta-buttons .btn {

        width:
            100%;

    }

}


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

@media (max-width: 460px) {

    .hero-badge {

        font-size:
            8px;

    }


    .hero-title {

        font-size:
            42px;

    }


    .dashboard-browser-bar {

        height:
            42px;

    }


    .browser-title {

        font-size:
            7px;

    }


    .dashboard-kpi {

        padding:
            11px;

    }


    .dashboard-kpi strong {

        font-size:
            11px;

    }


    .dashboard-kpi small {

        font-size:
            7px;

    }


    .feature-card {

        padding:
            22px;

    }


    .orbit-node {

        font-size:
            7px;

        padding:
            8px 10px;

    }


    .orbit-center {

        width:
            120px;

        height:
            120px;

    }

}


/* ==========================================================
   LOGIN POPUP RESPONSIVE
========================================================== */

@media (max-width: 800px) {

    .login-modal-overlay {

        padding:
            16px;

        align-items:
            flex-start;

        overflow-y:
            auto;

    }


    .login-modal {

        width:
            100%;

        max-width:
            520px;

        margin:
            80px auto 30px;

        border-radius:
            22px;

    }


    .login-modal-header {

        padding:
            22px 22px 18px;

    }


    .login-modal-body {

        padding:
            22px;

    }


    .login-modal-title {

        font-size:
            26px;

    }

}


/* ==========================================================
   SMALL MOBILE LOGIN POPUP
========================================================== */

@media (max-width: 460px) {

    .login-modal-overlay {

        padding:
            10px;

    }


    .login-modal {

        margin-top:
            70px;

        border-radius:
            18px;

    }


    .login-modal-header {

        padding:
            18px 18px 15px;

    }


    .login-modal-body {

        padding:
            18px;

    }


    .login-modal-title {

        font-size:
            23px;

    }


    .login-modal-close {

        width:
            38px;

        height:
            38px;

    }

}/* ==========================================================
   MOBILE HEADER NAVIGATION - FINAL
========================================================== */

@media (max-width: 768px) {

    /* ==========================================
       NAV SHELL
    ========================================== */

    .nav-shell {
        position: relative;
    }


    /* ==========================================
       MOBILE MENU - DEFAULT HIDDEN
    ========================================== */

    .main-nav {
        position: absolute;

        top: calc(100% + 12px);
        left: 0;
        right: 0;

        display: flex;

        flex-direction: column;
        align-items: stretch;

        gap: 6px;

        padding: 14px;

        border:
            1px solid
            rgba(255, 255, 255, 0.10);

        border-radius:
            18px;

        background:
            rgba(8, 13, 32, 0.98);

        backdrop-filter:
            blur(20px);

        box-shadow:
            0 25px 60px
            rgba(0, 0, 0, 0.45);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transform:
            translateY(-12px);

        transition:
            opacity 0.25s ease,
            transform 0.25s ease,
            visibility 0.25s ease;

        z-index:
            9999;
    }


    /* ==========================================
       MOBILE MENU - OPEN
       JS CLASS: mobile-menu-open
    ========================================== */

    .main-nav.mobile-menu-open {
        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform:
            translateY(0);
    }


    /* ==========================================
       MOBILE MENU LINKS
    ========================================== */

    .main-nav a {
        display: flex;

        align-items: center;

        width: 100%;

        min-height: 48px;

        padding:
            0 16px;

        border-radius:
            12px;

        color:
            rgba(255, 255, 255, 0.78);

        text-decoration:
            none;

        transition:
            background 0.2s ease,
            color 0.2s ease,
            transform 0.2s ease;
    }


    .main-nav a:hover,
    .main-nav a.active {
        color:
            #ffffff;

        background:
            rgba(72, 125, 255, 0.12);
    }


    .main-nav a:active {
        transform:
            scale(0.98);
    }


    /* ==========================================
       MOBILE MENU TOGGLE BUTTON
    ========================================== */

    .mobile-menu-btn {
        display: flex;

        flex-direction: column;

        align-items: center;
        justify-content: center;

        gap: 5px;

        width: 46px;
        height: 46px;

        padding: 0;

        border:
            1px solid
            rgba(255, 255, 255, 0.10);

        border-radius:
            12px;

        cursor:
            pointer;

        background:
            rgba(255, 255, 255, 0.05);
    }


    /* ==========================================
       TOGGLE LINES
    ========================================== */

    .mobile-menu-btn span {
        display: block;

        width: 20px;
        height: 2px;

        border-radius:
            10px;

        background:
            #ffffff;

        transition:
            transform 0.25s ease,
            opacity 0.25s ease;
    }


    /* ==========================================
       TOGGLE ACTIVE - CROSS
    ========================================== */

    .mobile-menu-btn.is-active span:nth-child(1) {
        transform:
            translateY(7px)
            rotate(45deg);
    }


    .mobile-menu-btn.is-active span:nth-child(2) {
        opacity:
            0;
    }


    .mobile-menu-btn.is-active span:nth-child(3) {
        transform:
            translateY(-7px)
            rotate(-45deg);
    }

}
/* ==========================================================
   MOBILE NAVIGATION ACTIONS
========================================================== */

.mobile-nav-actions {
    display: none;
}


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

@media screen and (max-width: 768px) {


    /* Desktop Login/Register hide */

    .nav-actions {
        display: none !important;
    }


    /* Mobile menu open hone par buttons show */

    .main-nav.is-open
    .mobile-nav-actions {

        display: flex !important;

        flex-direction: column;

        width: 100%;

        gap: 10px;

        margin-top: 20px;

        padding-top: 18px;

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

    }


    /* Mobile Login Button */

    .main-nav.is-open
    .mobile-nav-login {

        display: flex;

        align-items: center;

        justify-content: center;

        width: 100%;

        min-height: 48px;

    }


    /* Mobile Register Button */

    .main-nav.is-open
    .mobile-nav-register {

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 8px;

        width: 100%;

        min-height: 48px;

    }


}


/* ==========================================================
   DESKTOP VIEW
========================================================== */

@media screen and (min-width: 769px) {


    /* Mobile buttons never show on desktop */

    .mobile-nav-actions {
        display: none !important;
    }


    /* Desktop actions */

    .nav-actions {

        display: flex;

        align-items: center;

    }


}