/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Tablet & Mobile Breakpoints
   ═══════════════════════════════════════════════════════════ */

/* ─── Tablet (≤ 900px) ─── */
@media (max-width: 900px) {
  .feature-block { grid-template-columns: 1fr; }
  .feature-block.reverse { direction: ltr; }
  .pricing-cards { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .blog-grid { grid-template-columns: 1fr; }
  .community-cards { grid-template-columns: 1fr; }
  .benefits-grid { grid-template-columns: 1fr; }
  .benefits-bottom { grid-template-columns: 1fr; }
  .devices-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
}

/* ─── Mobile (≤ 640px) ─── */
@media (max-width: 640px) {
  .navbar-links { display: none; }
  .hero h1 { font-size: 36px; letter-spacing: -1px; }
  .review-card { width: 300px; }
  .contact-form-row { grid-template-columns: 1fr; }
  .contact-card-inner { padding: 32px 20px; }
  .contact-tabs button { padding: 8px 16px; font-size: 13px; }
}