/* =========================================================
   Responsive breakpoints
   ========================================================= */

@media (max-width: 1100px){
  .feature-grid{ grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid{ grid-template-columns: 1fr; gap: 18px; }
  .hero-grid{ gap: 50px; }
}

@media (max-width: 900px){
  .container{ padding: 0 24px; }
  .nav-container{ padding: 14px 24px; }
  .section{ padding: 80px 0; }
  .hero{ padding: 60px 0 90px; }

  .hero-grid{ grid-template-columns: 1fr; gap: 60px; }
  .hero-visual{ max-width: 460px; margin: 0 auto; }
  .hero-stats{ gap: 24px; }

  .showcase-grid,
  .split-grid,
  .contact-grid{ grid-template-columns: 1fr; gap: 40px; }

  .team-grid{ grid-template-columns: repeat(2, 1fr); }
  .rules-grid{ grid-template-columns: repeat(2, 1fr); }

  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 30px; }

  .cta-card{ padding: 50px 26px; }
}

@media (max-width: 600px){
  .container{ padding: 0 16px; }
  .nav-container{ padding: 12px 16px; }
  .section{ padding: 60px 0; }
  .hero{ padding: 40px 0 70px; }

  h1{ font-size: 2.1rem; }
  h2{ font-size: 1.6rem; }

  .hero-sub{ font-size: 1rem; }
  .hero-ctas{ flex-direction: column; align-items: stretch; width: 100%; }
  .hero-ctas .btn{ width: 100%; }
  .hero-stats{ gap: 20px; }
  .hero-stats strong{ font-size: 1.3rem; }

  .feature-grid,
  .team-grid,
  .rules-grid{ grid-template-columns: 1fr; }

  .floating-card{ display: none; }

  .footer-grid{ grid-template-columns: 1fr; }
  .newsletter{ flex-direction: column; }
  .newsletter button{ width: 100%; }

  .contact-form{ padding: 24px; }
  .cta-card{ padding: 40px 20px; }
  .cta-card .hero-ctas{ flex-direction: column; }
}