/* =====================================================================
   NEXLORA — Responsive layer
   Keeps the experience colorful & animated on mobile while simplifying
   heavy effects. Load AFTER style.css.
   ===================================================================== */

/* ---- Large tablet / small desktop ---- */
@media (max-width: 1100px) {
  .cards-grid, .portfolio-grid, .pricing-grid, .testi-grid, .sol-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid, .stats, .process { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-contact { grid-column: 1 / -1; }
}

/* ---- Tablet ---- */
@media (max-width: 900px) {
  :root { --header-h: 70px; }

  .nav-links { display: none; }
  .hamburger { display: block; }

  .hero-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .hero-cta, .hero-trust { justify-content: center; }
  .hero-lead { margin-inline: auto; }
  .hero-visual { max-width: 420px; margin-inline: auto; order: -1; }

  .about-grid { grid-template-columns: 1fr; }
  .scroll-hint { display: none; }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .cards-grid, .portfolio-grid, .pricing-grid, .testi-grid,
  .sol-grid, .why-grid, .stats, .process, .form-grid { grid-template-columns: 1fr; }

  .feature-list { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand, .footer-contact { grid-column: 1 / -1; }

  .process-step:not(:last-child)::after { display: none; }
  .hero h1 { font-size: clamp(34px, 11vw, 48px); }

  .float-stack { inset-block-end: 16px; inset-inline-end: 16px; }
  .fab { width: 50px; height: 50px; font-size: 20px; }
  .toast-wrap { inset-inline: 16px; inset-block-end: 86px; max-width: none; }
  .cookie { inset-inline: 16px; max-width: none; }

  .modal { padding: 26px 18px; }
  .step-nav { flex-direction: column-reverse; }
  .step-nav .btn { width: 100%; }

  /* Performance: reduce expensive blur/animations on small screens */
  .bg-aurora { filter: blur(40px); animation-duration: 30s; }
  .bg-grid { background-size: 44px 44px; opacity: .25; }
  .orb { display: none; }
  .hero-chip.c2, .hero-chip.c3 { display: none; }
  /* keep mobile light: no per-card backdrop blur (see note in style.css) */

  /* Disable 3D tilt translateZ depth on touch (handled in JS too) */
  .svc-icon, .svc-card h3, .svc-card p, .svc-card .svc-link { transform: none !important; }
}

@media (max-width: 420px) {
  .btn { padding: 13px 22px; font-size: 14px; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; }
}

/* Touch devices: hide custom cursor, keep colorful transitions */
@media (hover: none) {
  .cursor-dot, .cursor-ring { display: none !important; }
  body.cursor-on { cursor: auto; }
}