/* =========================================
   MMK MEDIA & GRAPHICS
   RESPONSIVE CSS
========================================= */

/* LARGE DESKTOP */
@media (max-width: 1400px) {
    .container{ width:94%; }
    .navbar ul{ gap:28px; }
}

/* LAPTOP */
@media (max-width: 1200px) {
    .hero{ min-height:auto; padding:150px 0 80px; }
    .hero-grid{ grid-template-columns:1fr; gap:60px; }
    .hero-content{ text-align:center; }
    .hero p{ margin-left:auto; margin-right:auto; }
    .hero-buttons{ justify-content:center; }
    .hero-stats{ justify-content:center; }
    .stage{ max-width:760px; margin:0 auto; }
    .navbar ul{ gap:20px; }
    .navbar a{ font-size:14px; }

    .solutions-grid{
        grid-template-columns:1fr;
        gap:36px;
    }

    .solutions-content{ text-align:center; }
    .solutions-content p{ margin-left:auto; margin-right:auto; }
    .btn-outline{ margin-left:auto; margin-right:auto; }

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

    .process-row{
        flex-wrap:wrap;
        row-gap:36px;
    }

    .process-step{
        flex:1 1 40%;
        min-width:220px;
    }

    .process-arrow{
        display:none;
    }

    .review-card{ flex:0 0 calc(33.333% - 12px); }
    .industries-grid{ grid-template-columns:repeat(5, minmax(0,1fr)); }
    .cta-box{ padding:44px 36px; }

    .insights-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
    .footer-top{ grid-template-columns:1fr 1fr 1fr; row-gap:36px; }
    .footer-about{ grid-column:1 / -1; }
    .footer-about p{ max-width:420px; }
}

/* TABLET / MOBILE NAV BREAKPOINT */
@media (max-width: 992px) {

    .header .container{ height:76px; }
    .logo img{ height:85px; }

    /* The off-canvas nav below is a DOM child of .header. A backdrop-filter on
       an ancestor changes the containing block / compositing layer for any
       fixed-position descendant, which is what was causing the whole mobile
       menu to render blurred on real devices. Drop the frosted-glass effect
       here (solid background instead) so the nav gets a clean compositing
       layer of its own. */
    .header{
        backdrop-filter:none;
        background:rgba(var(--bg-rgb), 0.97);
    }

    .header-btn{ display:none; }

    .menu-toggle{
        display:flex;
        margin-left:auto;
    }

    /* Hide the button that used to duplicate the toggle */
    .header > .container > .header-btn{ display:none; }

    .hero{ padding-top:120px; }
    .hero h1{ font-size:clamp(30px, 6vw, 46px); }
    .hero p{ font-size:16px; line-height:1.75; }

    .hero-stats{ flex-wrap:wrap; }
    .stat-box{ flex:1 1 150px; min-width:140px; }

    /* Off-canvas nav */
    .navbar{
        position:fixed;
        top:0;
        right:-400px;
        width:min(360px, 88vw);
        max-width:88vw;
        height:100vh;
        height:100dvh;
        margin:0;
        padding:100px 28px 40px;
        background:rgba(var(--bg-rgb), 0.99);
        box-shadow:-24px 0 60px -24px rgba(16,30,60,.35);
        border-left:1px solid var(--border);
        /* No transform here on purpose: transform promotes this panel to its
           own GPU-composited layer, and on many mobile/Android GPUs text
           rendered inside such a layer comes out visibly softer/blurred.
           Animating 'right' instead keeps it in the normal layout/paint
           path so the text stays crisp. */
        visibility:hidden;
        transition:right .4s ease, visibility .4s ease;
        z-index:1001;
        overflow-y:auto;
        pointer-events:none;
    }

    .navbar.active{
        right:0;
        visibility:visible;
        pointer-events:auto;
    }

    .navbar ul{
        width:100%;
        display:flex;
        flex-direction:column;
        gap:0;
    }

    .navbar li{
        width:100%;
        border-bottom:1px solid var(--border);
    }

    .navbar a{
        display:flex;
        align-items:center;
        width:100%;
        padding:18px 5px;
        font-size:18px;
        font-weight:600;
        color:var(--text);
        transition:padding-left .3s ease, color .3s ease;
    }

    .navbar a:hover{
        color:var(--secondary);
        padding-left:12px;
    }

    .stats-bar-item{
        flex:1 1 45%;
    }

    .stats-bar-item:nth-child(2)::after{
        display:none;
    }

    .review-card{ flex:0 0 calc(50% - 9px); }
    .industries-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); }

    .cta-box{ flex-direction:column; text-align:center; padding:40px 30px; }
    .cta-content{ max-width:100%; }
    .cta-content p{ margin-left:auto; margin-right:auto; }
    .cta-checklist{ justify-content:center; }

    .footer-top{ grid-template-columns:1fr 1fr; gap:36px 24px; }
    .footer-about{ grid-column:1 / -1; }

    .back-to-top{ width:44px; height:44px; right:18px; bottom:18px; }
}

/* MOBILE */
@media (max-width: 768px) {

    .container{ width:90%; }
    .header .container{ height:70px; }
    .logo img{ height: 85px;px; }

     
  .hero{
        background-color: #ffffff;
        background-image: url('../images/mobile-hero-bg-new.png');
        background-repeat: no-repeat;
        background-position: right top;
        /* New banner artwork has much more built-in white space, so it
           can render bigger while still leaving a safe text margin. */
        background-size: 100% auto;

        /* Zarurat ho to height adjust kar lena */
        min-height: 100vh;
    }




    .hero-grid{ gap:48px; }

    /* Keep text left-aligned and narrow enough to stay clear of the
       diagonal banner artwork on the right (banner fades to white
       further down, so only the tag/heading/top of the paragraph
       need the narrower column). */
    .hero-content{ text-align:left; }

    .hero-tag{
        padding:9px 16px;
        font-size:11px;
        letter-spacing:1.4px;
        margin-bottom:20px;
        max-width:72%;
        white-space:normal;
    }

    .hero h1{
        line-height:1.15;
        max-width:70%;
        text-shadow:0 1px 14px rgba(255,255,255,.65);
    }

    .hero p{
        margin-top:20px;
        max-width:66%;
        margin-left:0;
        margin-right:0;
        text-shadow:0 1px 10px rgba(255,255,255,.6);
    }

    .hero-buttons{
        margin-top:28px;
        flex-direction:column;
        gap:14px;
        width:100%;
    }

    .btn-primary, .btn-secondary{
        width:100%;
        padding:16px 24px;
        text-align:center;
    }

    /* View Case Studies (secondary button) was hard to see over the
       banner artwork — give it a solid, opaque card look on mobile
       instead of a faint transparent border. */
    .btn-secondary{
        background:rgba(255,255,255,.95);
        border:1px solid rgba(15,23,42,.10);
        color:var(--primary);
        font-weight:700;
        box-shadow:0 8px 20px rgba(15,23,42,.06);
    }

    /* Stats boxes are desktop-only now; mobile shows .hero-features instead */
    .hero-stats{ display:none; }

    .hero-features{
        display:grid;
        grid-template-columns:repeat(4, 1fr);
        gap:6px;
        margin-top:40px;
        padding:18px 6px;
        border-radius:20px;

        background: linear-gradient(
            180deg,
            rgba(255,255,255,.95) 0%,
            rgba(250,252,255,.90) 100%
        );
        border: 1px solid rgba(255,255,255,.9);
        box-shadow:
            0 8px 20px rgba(15,23,42,.05),
            0 20px 45px rgba(15,23,42,.06),
            inset 0 1px 0 rgba(255,255,255,.9);
        backdrop-filter: blur(20px);
    }

    .feature-icon-wrap{
        width:42px;
        height:42px;
        border-radius:50%;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:9px;
        box-sizing:border-box;
        margin-bottom:8px;
    }

    .fw-orange{ background:rgba(244,90,34,.12); }
    .fw-blue{ background:rgba(36,103,216,.12); }
    .fw-green{ background:rgba(34,197,94,.14); }
    .fw-purple{ background:rgba(147,51,234,.14); }

    .feature-box span{
        font-size:10px;
        line-height:1.35;
        font-weight:700;
        color:#0A2C73;
    }

    /* ---- Dashboard: stack + tone down 3D on mobile ---- */
    .stage{ width:100%; max-width:100%; margin-top:8px; }

    .dashboard{
        aspect-ratio:auto;
        min-height:0;
        padding:18px 16px;
        transform:none;
        animation:pulseGlow 5s ease-in-out infinite;
        gap:14px;
    }

    .dash-header{ gap:8px; }
    .header-right{ padding:5px 9px; font-size:10px; }
    .live-badge{ font-size:9px; padding:4px 8px; margin-right:6px; }

    .metrics{
        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:9px;
    }

    .metric-card{ padding:12px 13px; }
    .metric-value{ font-size:18px; }

    .second-row{
        grid-template-columns:1fr;
        gap:12px;
    }

    .chart-area{ min-height:170px; }

    .donut-wrap{ min-height:150px; }
    .donut-wrap svg{ max-width:150px; }

    .bottom-nav{
        flex-wrap:wrap;
        row-gap:16px;
        column-gap:4px;
    }

    .nav-item{ flex:1 1 30%; min-width:70px; }
    .nav-label{ font-size:8.5px; }

    .stats-bar{ padding:0 0 55px; }

    .stats-bar-inner{
        flex-direction:column;
        align-items:stretch;
        padding:6px;
    }

    .stats-bar-item{
        flex:1 1 auto;
        width:100%;
        padding:16px 10px;
    }

    .stats-bar-item:not(:last-child)::after{
        left:10px;
        right:10px;
        top:auto;
        bottom:0;
        width:auto;
        height:1px;
    }

    .stats-bar-icon{
        width:42px;
        height:42px;
    }

    .stats-bar-icon svg{ width:19px; height:19px; }

    .stats-bar-text h3{ font-size:19px; }

    .solutions{ padding:10px 0 60px; }

    .solutions-cards{
        grid-template-columns:1fr;
        gap:12px;
    }

    .process{ padding:10px 0 55px; }
    .process-header{ margin-bottom:36px; }

    .process-row{
        flex-direction:column;
        gap:30px;
    }

    .process-step{ min-width:0; }
    .process-step p{ max-width:100%; }

    .reviews{ padding:10px 0 50px; }
    .reviews-header{ justify-content:center; text-align:center; }
    .reviews-header > div{ width:100%; }
    .reviews-nav{ display:none; }

    .review-card{ flex:0 0 85%; }

    .industries{ padding:10px 0 55px; }
    .industries-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
    .industry-item{ padding:18px 8px; }
    .industry-item span{ font-size:10.5px; }

    .cta{ padding:0 0 60px; }
    .cta-box{ padding:34px 22px; border-radius:22px; }
    .cta-checklist{ flex-direction:column; align-items:center; gap:10px; }
    .cta-action .btn-primary{ width:100%; justify-content:center; }

    .insights{ padding:10px 0 55px; }
    .insights-header{ text-align:center; justify-content:center; }
    .insights-header > div{ width:100%; }
    .insights-grid{ grid-template-columns:1fr; gap:16px; }

    .site-footer{ padding-top:50px; }
    .footer-top{ grid-template-columns:1fr; gap:32px; text-align:center; }
    .footer-about p{ margin:0 auto; }
    .footer-social{ justify-content:center; }
    .footer-contact li{ justify-content:center; }
    .footer-bottom{ flex-direction:column; text-align:center; }
}

/* SMALL MOBILE */
@media (max-width: 576px) {
    .container{ width:calc(100% - 32px); }

    .hero{ padding-top:100px; }

    .hero-stats{ grid-template-columns:1fr; }
    .stat-box{ padding:18px; flex-direction:row; justify-content:space-between; align-items:center; }
    .stat-box h2{ font-size:24px; }
    .stat-box span{ font-size:12px; }

    .hero-features{ gap:2px; padding:14px 4px; }
    .feature-icon-wrap{ width:36px; height:36px; padding:8px; margin-bottom:6px; }
    .feature-box span{ font-size:9px; }

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

    .bottom-nav{ column-gap:8px; }
    .nav-item{ flex:1 1 45%; }

    .review-card{ flex:0 0 92%; padding:20px 18px; }
    .industries-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
    .cta-content h2{ font-size:22px; }
}

/* EXTRA SMALL MOBILE */
@media (max-width: 400px) {
    .btn-primary, .btn-secondary{ font-size:14px; }
    .metric-value{ font-size:16px; }
}

/* REDUCE MOTION ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
}