/* Devas 10X — responsive.css · mobile-first breakpoints + mobile nav */

/* Tablet and below */
@media (max-width: 900px) {
  .cred-grid { grid-template-columns: repeat(3, 1fr); row-gap: 20px; }
  .cards.three { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .two-col.reverse .col-media { order: 0; }
}

/* Mobile: hamburger nav */
@media (max-width: 720px) {
  .nav-toggle { display: flex; }
  .nav-menu {
    position: fixed; inset: 68px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 8px 16px 16px;
    transform: translateY(-120%); transition: transform .22s ease;
    box-shadow: 0 12px 24px rgba(8, 17, 31, .12);
  }
  .nav-menu.open { transform: translateY(0); }
  .nav-menu li { width: 100%; }
  .nav-menu a { display: block; padding: 12px 10px; font-size: 1rem; }
  .nav-cta { text-align: center; margin-top: 6px; }

  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .cards.three { grid-template-columns: 1fr; }
  .cred-grid { grid-template-columns: 1fr 1fr; }
  .hero-sub { font-size: 1.05rem; }
  .btn { width: 100%; text-align: center; }
  .btn-row { flex-direction: column; }
}

/* Small phones */
@media (max-width: 420px) {
  .stats { grid-template-columns: 1fr; }
  .cred-grid { grid-template-columns: 1fr; }
  .wrap { padding: 0 18px; }
}