/* =======================================================
   JamiiNet Broadband — responsive.css  (v2)
   Mobile-first breakpoints: 400 / 640 / 768 / 1024 / 1280
   ======================================================= */

/* ── LARGE SCREENS (1280px+) ── */
@media (min-width: 1280px) {
  .container { padding: 0 2rem; }
  .hero__content { padding-left: 2rem; padding-right: 2rem; }
}

/* ── TABLET (max 1024px) ── */
@media (max-width: 1024px) {
  .services__grid   { grid-template-columns: repeat(2,1fr); }
  .tech__cards      { grid-template-columns: repeat(2,1fr); }

  .about__grid      { grid-template-columns: 1fr; gap: 3rem; }
  .about__card      { right: 0; top: auto; bottom: -20px; }
  .about__img       { height: 360px; }
  .about__mv        { grid-template-columns: 1fr 1fr; }

  .roadmap__track   { flex-direction: column; align-items: center; }
  .roadmap__connector {
    width: 2px; height: 32px;
    background: linear-gradient(180deg, var(--orange), rgba(245,158,11,.3));
  }
  .roadmap__step    { padding: 0; max-width: 380px; width: 100%; }

  .footer__top      { grid-template-columns: 1fr; gap: 2rem; }
}

/* ── TABLET SMALL (max 768px) ── */
@media (max-width: 768px) {
  :root { --nav-h: 60px; }

  /* Nav: hide desktop links, show hamburger */
  .nav__links    { display: none; }
  .nav__hamburger { display: flex; }

  .hero__content { padding-bottom: 8rem; }
  .hero__subheading { font-size: 1rem; }
  .hero__stat-divider { display: none; }
  .hero__stats { gap: 1.5rem; }
  .stat-number { font-size: 1.8rem; }

  .services__grid { grid-template-columns: repeat(2,1fr); gap: 1rem; }
  .tech__cards    { grid-template-columns: 1fr 1fr; gap: 1rem; }

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

  .pricing__cards { grid-template-columns: 1fr; max-width: 400px; }

  .contact__grid  { grid-template-columns: 1fr; gap: 3rem; }
  .form-row       { grid-template-columns: 1fr; }

  .footer__nav    { grid-template-columns: repeat(3,1fr); gap: 1rem; }
  .footer__bottom { flex-direction: column; text-align: center; }

  .back-to-top    { bottom: 24px; right: 24px; }

  .impact__roadmap { padding: 1.5rem; }
}

/* ── MOBILE (max 640px) ── */
@media (max-width: 640px) {
  .container { padding: 0 1.25rem; }
  .section   { padding: 4rem 0; }

  .hero__actions { flex-direction: column; width: 100%; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .hero__stats { flex-wrap: wrap; gap: 1.25rem; }
  .hero__stat  { min-width: 110px; }

  .services__grid { grid-template-columns: 1fr; }
  .tech__cards    { grid-template-columns: 1fr; }

  .about__card    { position: static; margin-top: 1rem; display: inline-flex; }

  .contact-form   { padding: 1.5rem; }

  .footer__nav    { grid-template-columns: repeat(2,1fr); }
  .footer__nav-col:last-child { grid-column: 1 / -1; }

  .pricing__toggle { width: 100%; }
  .toggle-btn      { flex: 1; }
}

/* ── MINIMUM (max 400px) ── */
@media (max-width: 400px) {
  h1 { font-size: 2rem; }
  .hero__eyebrow { font-size: .7rem; }
  .nav__logo-img { height: 34px; }
  .footer__logo-img { height: 34px; }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .cursor, .cursor-trail, .hero__canvas { display: none; }
}

/* ── PRINT ── */
@media print {
  .nav, .cursor, .cursor-trail, .back-to-top, .hero__canvas { display: none; }
  body  { color: #000; background: #fff; }
  .hero { min-height: auto; padding: 2rem 0; }
}