/* ================================
   RESPONSIVE
   ================================ */

@media (max-width: 1024px) {
  :root {
    --section-y: 80px;
    --container-pad: 24px;
  }
  .grid-2 { gap: 56px; }
  .feature-grid,
  .showcase-grid,
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .playset-detail { gap: 56px; }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

@media (max-width: 768px) {
  :root {
    --section-y: 60px;
    --container-pad: 16px;
  }
  h1 { font-size: clamp(2rem, 8vw, 2.8rem); }
  h2 { font-size: clamp(1.6rem, 6vw, 2.1rem); }

  .nav-desktop,
  .header-cta {
    display: none;
  }
  .menu-toggle { display: flex; }

  .grid-2,
  .playset-detail,
  .playset-detail.reverse {
    grid-template-columns: 1fr;
    gap: 40px;
    direction: ltr;
  }
  .playset-detail.reverse > * { direction: ltr; }

  .feature-grid,
  .showcase-grid,
  .values-grid,
  .process-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .hero { min-height: 82vh; }
  .hero-content { padding: 80px 16px 60px; }
  .hero-meta {
    gap: 24px;
    flex-wrap: wrap;
  }
  .hero-meta strong { font-size: 1.4rem; }

  .page-hero-content { padding: 70px 16px 50px; }

  .section-head { margin-bottom: 50px; }

  .contact-form { padding: 28px 22px; }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .cta-buttons { flex-direction: column; align-items: stretch; }
  .cta-buttons .btn { width: 100%; }
  .hero-ctas .btn { flex: 1; min-width: 140px; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 2.1rem; }
  .hero-sub { font-size: 1rem; }
  .feature-card,
  .value-card { padding: 30px 24px; }
  .btn { padding: 13px 22px; font-size: 0.9rem; }
}