/* ── Tablet / mobile  (≤ 768px) ────────────────────────── */
@media (max-width: 768px) {

  /* Nav */
  .nav-inner { padding: 12px 20px; gap: 16px; }
  .brand .name { font-size: 19px; }

  /* Hero */
  .hero {
    grid-template-columns: 1fr;
    padding: 48px 20px 40px;
    gap: 0;
  }
  .hero h1 { font-size: 44px; }
  .hero p  { font-size: 16px; max-width: 100%; }

  /* Hide dashboard mockup — too complex to render at small sizes */
  .preview { display: none; }

  /* Features */
  .features { padding: 64px 20px; }
  .features-grid { grid-template-columns: 1fr; gap: 40px; }
  .features-copy h2 { font-size: 32px; max-width: 100%; }
  .features-copy p.lead { font-size: 16px; max-width: 100%; }

  /* Logos */
  .logos { padding: 0 20px 56px; gap: 24px; }

  /* Footer */
  footer { padding: 28px 20px; }
  footer .inner { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ── Small phones (≤ 480px) ────────────────────────────── */
@media (max-width: 480px) {
  .hero { padding: 36px 16px 32px; }
  .hero h1 { font-size: 36px; }

  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { text-align: center; }

  .features { padding: 48px 16px; }
  .features-copy h2 { font-size: 28px; }

  footer { padding: 24px 16px; }
}