/* ════════════════════════════════
   RESPONSIVE — Mobile First
   Breakpoints: 480 | 768 | 1024 | 1280
════════════════════════════════ */

/* ── Base (< 480px) ── */
@media (max-width: 479px) {
  :root {
    --section-py: var(--sp-16);
  }

  .hero {
    grid-template-columns: 1fr;
    padding-top: calc(var(--nav-h) + var(--sp-8));
    min-height: auto;
    padding-block-end: var(--sp-16);
    gap: var(--sp-10);
  }

  .hero-visual { display: none; }

  .hero-title {
    font-size: clamp(var(--fs-3xl), 8vw, var(--fs-4xl));
  }

  .hero-stats {
    gap: var(--sp-5);
  }

  .stat-divider { height: 30px; }

  .split-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }

  .about-visual-wrap { order: -1; }

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

  .why-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }

  .why-text { position: static; }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-1);
  }
}

/* ── Small (480px – 767px) ── */
@media (min-width: 480px) and (max-width: 767px) {
  :root { --section-py: var(--sp-16); }

  .hero {
    grid-template-columns: 1fr;
    padding-top: calc(var(--nav-h) + var(--sp-8));
    min-height: auto;
    padding-block-end: var(--sp-16);
    gap: var(--sp-10);
  }

  .hero-visual { display: none; }

  .split-grid      { grid-template-columns: 1fr; gap: var(--sp-10); }
  .services-grid   { grid-template-columns: 1fr 1fr; }
  .why-grid        { grid-template-columns: 1fr; gap: var(--sp-10); }
  .why-text        { position: static; }
  .contact-grid    { grid-template-columns: 1fr; gap: var(--sp-10); }
  .footer-grid     { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .footer-brand    { grid-column: 1 / -1; }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Tablet (768px – 1023px) ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
    padding-inline: var(--sp-8);
  }

  .hero-visual { min-height: 340px; }

  .terminal-card {
    width: min(320px, 90%);
    font-size: var(--fs-xs);
  }

  .split-grid      { gap: var(--sp-10); }
  .services-grid   { grid-template-columns: 1fr 1fr; }
  .why-grid        { grid-template-columns: 1fr 1.2fr; gap: var(--sp-10); }
  .contact-grid    { gap: var(--sp-8); }
  .footer-grid     { grid-template-columns: 1.2fr 1fr 1fr; }

  .nav-toggle { display: none; }
}

/* ── Mobile nav toggle (< 768px) ── */
@media (max-width: 767px) {
  .nav-toggle {
    display: flex;
    z-index: 1001;
  }

  .nav-menu {
    position: fixed;
    top: 0; right: 0;
    width: min(300px, 85vw);
    height: 100vh;
    background: rgba(7, 7, 20, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid var(--clr-border);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: var(--sp-12) var(--sp-8);
    gap: var(--sp-6);
    transform: translateX(100%);
    transition: transform var(--dur-slow) var(--ease-out);
    z-index: 999;
  }

  .nav-menu.open { transform: translateX(0); }

  .nav-link {
    font-size: var(--fs-lg);
    color: var(--clr-text-muted);
  }

  .nav-cta {
    padding: var(--sp-3) var(--sp-6);
    font-size: var(--fs-base);
    align-self: flex-start;
  }

  /* Hamburger → X */
  .nav-toggle.active .toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle.active .toggle-bar:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle.active .toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* ── Large Desktop (≥ 1280px) ── */
@media (min-width: 1280px) {
  .hero {
    padding-inline: var(--sp-8);
  }

  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}