/* Responsive improvements for MagmaKzDev
   Keep brand colors and layout intact; enhance mobile spacing,
   touch targets, and focus styles for accessibility. */

/* Base adjustments */
html,body{height:100%;}

/* Make main content flow vertically on small screens */
@media (max-width: 900px) {
  .hero{padding:2rem 1rem}
  .panel-mockup{display:none}
  .menu{position:fixed;top:64px;left:0;right:0;background:#070707;padding:1rem}
  .menu.open{display:block}
}

/* Improve touch targets */
button, .btn{min-height:44px}

/* Better spacing for forms */
form label{display:block;margin-bottom:.75rem}

/* Focus outlines for keyboard users */
:focus{outline:3px solid rgba(255,70,0,.25);outline-offset:2px}

/* Back-to-top button adjustments */
#backToTop{position:fixed;right:18px;bottom:18px;display:none;z-index:9999;background:#ff6a00;color:#fff;border-radius:8px;padding:10px;border:none}

/* Cookie banner adjustments */
#cookie-banner{position:fixed;left:12px;right:12px;bottom:12px;background:#0b0b0b;color:#fff;padding:16px;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.6);z-index:9999;display:flex;gap:12px;align-items:center}

/* Loading screen */
#loading-screen{position:fixed;inset:0;background:#000;display:flex;align-items:center;justify-content:center;z-index:10000;color:#fff}

/* Small screens: compact nav */
@media (max-width:480px){
  .hero__content h1{font-size:1.5rem}
}
```css
@media (max-width: 1200px) {

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

}

@media (max-width: 900px) {

    .client-hero {
        grid-template-columns: 1fr;
    }

    .menu {
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        background: #111;
        flex-direction: column;
        padding: 20px;
        display: none;
    }

    .menu.active {
        display: flex;
    }

    .nav-toggle {
        display: flex;
    }

}

@media (max-width: 768px) {

    .client-panel-grid {
        grid-template-columns: 1fr;
    }

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

}

@media (max-width: 480px) {

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

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.6rem;
    }

}
```