/* ==========================================================================
   site-08 — Responsive rules (split from styles.css to stay under 800 lines)
   ========================================================================== */

@media (max-width: 768px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero-copy h1 {
    font-size: 34px;
  }

  .hero-sub {
    max-width: none;
  }

  .top-features-grid,
  .feature-grid,
  .steps,
  .usecase-grid,
  .testimonial-grid {
    grid-template-columns: 1fr 1fr;
  }

  .nav {
    display: none;
  }

  .section {
    padding: 64px 0;
  }

  .footer-top {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .wrap {
    padding: 0 18px;
  }

  .hero {
    padding: 56px 0 48px;
  }

  .hero-copy h1 {
    font-size: 28px;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .top-features-grid,
  .feature-grid,
  .steps,
  .usecase-grid,
  .testimonial-grid {
    grid-template-columns: 1fr;
  }

  .section-head h2 {
    font-size: 26px;
  }

  .pricing-card {
    padding: 28px 20px;
  }

  .trust-logos {
    gap: 20px;
  }

  .final-cta h2 {
    font-size: 26px;
  }
}