/* ==========================================================================
   MURTY TECHNOLOGY — RESPONSIVE LAYER
   Loaded after style.css. Handles graceful de-escalation of the 3D / glass
   effects on smaller viewports (less parallax, smaller stage, stacked grids).
   ========================================================================== */

/* ---- Ultra-wide monitors: give the canvas more breathing room ---- */
@media (min-width: 1800px) {
  .container-narrow, .container { max-width: 1440px; }
  .hero-copy .headline { font-size: 4.8rem; }
  .core-stage { height: 660px; }
}

/* ---- Laptops ---- */
@media (max-width: 1199.98px) {
  .hero-grid { grid-template-columns: 1fr; }
  .core-stage { height: 460px; margin-top: 2rem; }
  .hero-copy { text-align: center; }
  .hero-actions, .hero-stats { justify-content: center; }
  .float-panel.p1, .float-panel.p3 { left: 4%; }
  .float-panel.p2, .float-panel.p4 { right: 4%; }
}

/* ---- Tablets ---- */
@media (max-width: 991.98px) {
  #site-header { top: 12px; padding: 0.5rem 0.5rem 0.5rem 1.2rem; }
  .main-nav { display: none; }
  .nav-toggle { display: block; }

  .mobile-nav {
    position: fixed;
    top: 84px;
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    width: min(420px, 92vw);
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    box-shadow: var(--glass-shadow);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    padding: 1.2rem;
    opacity: 0;
    visibility: hidden;
    transition: all var(--dur-med) var(--ease-premium);
    z-index: 998;
  }
  .mobile-nav.open { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
  .mobile-nav ul { list-style: none; margin: 0; padding: 0; }
  .mobile-nav a {
    display: block;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    color: var(--ink);
    text-decoration: none;
    font-weight: 500;
    transition: background var(--dur-fast) var(--ease-premium);
  }
  .mobile-nav a:hover, .mobile-nav a.active { background: rgba(30,79,216,0.08); color: var(--primary); }
  .mobile-nav .header-cta { margin-top: 0.6rem; padding: 0 0.4rem; }
  .mobile-nav .btn-murty { width: 100%; justify-content: center; }

  .section { padding: 5.5rem 0; }
  .core-stage { height: 380px; }
  .bg-blob { filter: blur(60px); }
}

/* ---- Mobile ---- */
@media (max-width: 767.98px) {
  .hero { padding-top: 7rem; }
  .hero-copy .headline { font-size: clamp(2.1rem, 8vw, 2.8rem); }
  .hero-stats { gap: 1.4rem; flex-wrap: wrap; }
  .core-stage { height: 320px; }
  .core-wrap { transform: rotateY(-10deg) rotateX(4deg) scale(0.85); }
  .float-panel { font-size: 0.68rem; padding: 0.6rem 0.85rem; }
  .float-panel.p5 { display: none; }
  .core-orbit.o2 { display: none; }

  .section { padding: 4rem 0; }
  .section-head { margin-bottom: 2.2rem; }

  .about-visual { height: 300px; }

  .why-row { flex-direction: row; }

  .cta-section { padding: 3.4rem 1.6rem; border-radius: 24px; }

  .footer-bottom { flex-direction: column; align-items: flex-start; }
  #back-to-top { right: 1.1rem; bottom: 1.1rem; width: 42px; height: 42px; }

  #cursor-glow { display: none; }
}

/* ---- Small phones ---- */
@media (max-width: 420px) {
  .hero-stats { gap: 1rem; }
  .hero-stats div strong { font-size: 1.3rem; }
  .service-card { padding: 1.6rem 1.3rem; }
  .testi-card { padding: 1.8rem; }
  .testi-card p.quote { font-size: 1.08rem; }
}

/* ---- Respect reduced motion on top of the base rule in style.css ---- */
@media (prefers-reduced-motion: reduce) {
  .core-wrap, .core-orbit, .bg-blob, .float-panel, .tech-chip, .social-row a {
    animation: none !important;
  }
}
.mobile-nav.open {
  display: block;   /* add this line */
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}