/* ═══════════════════════════════════════
   RESPONSIVE.CSS — Breakpoints
   ═══════════════════════════════════════ */

/* ── 900px: tablet / small desktop ── */
@media (max-width: 900px) {
  /* Nav */
  .nav-l, .nav-cta { display: none; }
  .hb { display: flex; }

  /* Hero */
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: calc(var(--nav-h) + 20px); padding-bottom: 60px; }
  .hero-iw { order: -1; padding: 0 20%; margin-bottom: 32px; }
  .hero-img { max-width: 260px; }
  .hero-st { gap: 28px; flex-wrap: wrap; }
  .hero-c { padding: 0 clamp(20px,4vw,48px); text-align: center; }
  .hero-a, .hero-st, .hero-lb { justify-content: center; }
  .hero-d { margin-left: auto; margin-right: auto; }

  /* Layout grids */
  .tg { grid-template-columns: 1fr 1fr; }
  .ab-g { grid-template-columns: 1fr; gap: 40px; }
  .ab-im { max-width: 380px; margin: 0 auto; }
  .te-g { grid-template-columns: 1fr; }
  .bl-g { grid-template-columns: 1fr; }
  .co-g { grid-template-columns: 1fr; gap: 40px; }
  .dt-g { grid-template-columns: 1fr; }
  .dt-sb { position: static; }
  .py-g { grid-template-columns: 1fr; }
  .vp-g { grid-template-columns: 1fr; }
  .ft-g { grid-template-columns: 1fr 1fr; }
  .ft-bt { flex-direction: column; gap: 12px; text-align: center; }
  .ig-i { flex-direction: column; text-align: center; }
}

/* ── 600px: mobile ── */
@media (max-width: 600px) {
  .tg { grid-template-columns: 1fr; }
  .cg { grid-template-columns: 1fr; }
  .ds-g { grid-template-columns: 1fr; }
  .ec { grid-template-columns: 1fr; }
  .wf span { display: none; }
  .wf { padding: 16px; border-radius: 50%; }
}

/* ── 480px: small mobile ── */
@media (max-width: 480px) {
  .hero-a { flex-direction: column; align-items: stretch; }
  .hero-a .btn { justify-content: center; }
  .ft-g { grid-template-columns: 1fr; }
}