/* ═══ RESPONSIVE ══════════════════════════════════════════════════════════
   All @media queries consolidated from the entire stylesheet.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Nav: hide links on mobile */
@media (max-width: 820px) {
  .nav-links {
    display: none;
  }
}

/* Hero 3D MacBook: handled in hero.css @media block */

/* Bot chat: mobile layout */
@media (max-width: 480px) {
  .bot-chat {
    width: calc(100vw - 24px);
    right: 12px;
    bottom: 80px;
    height: 70svh;
  }
  .bot-fab {
    bottom: 16px;
    right: 16px;
  }
  .bot-cta-hint {
    right: 12px;
    bottom: 82px;
  }
}

/* Tablet and below */
@media (max-width: 1024px) {
  .svc-layout {
    grid-template-columns: 1fr;
  }
  .code-window {
    position: static;
  }
}

@media (max-width: 900px) {
  .process-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .process-row::before {
    display: none;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .testi-grid {
    grid-template-columns: 1fr;
  }
  .tool-categories {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .tool-categories {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .process-row {
    grid-template-columns: 1fr 1fr;
  }
  .hero-ctas {
    flex-direction: column;
    align-items: center;
  }
  .btn-p,
  .btn-g {
    width: 100%;
    max-width: 300px;
    text-align: center;
  }
  .cta-card {
    padding: 40px 24px;
  }
  .cta-btns {
    flex-direction: column;
    align-items: center;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .wf-body {
    padding: 24px 14px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal,
  .avail-badge,
  .hero-eyebrow,
  h1.hero-hl,
  .hero-sub,
  .hero-ctas,
  .hero-note,
  .hero-content {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  #hero {
    height: auto !important;
    min-height: 100vh !important;
  }
  .hero-pin {
    position: relative !important;
  }
  .marquee-track {
    animation: none !important;
  }
  html {
    scroll-behavior: auto;
  }
}