/* ========================
   Responsive Styles
   CineSuite.app Landing
======================== */

@media (max-width: 992px) {
  header.hero {
    flex-direction: column;
    text-align: center;
  }

  .hero-content {
    max-width: 100%;
  }

  .hero-illustration {
    margin-top: 30px;
  }

  h1 {
    font-size: 2rem;
  }

  .cta-button {
    padding: 12px 24px;
    font-size: 1rem;
  }

  .modules-list {
    flex-direction: column;
    align-items: center;
  }

  .module-card {
    width: 80%;
    margin-bottom: 15px;
  }

  .form-section form {
    width: 90%;
  }
}

@media (max-width: 768px) {
  header.hero {
    padding: 80px 15px;
  }

  h1 {
    font-size: 1.6rem;
  }

  p {
    font-size: 1rem;
  }

  .cta-button {
    padding: 10px 20px;
    font-size: 0.95rem;
  }

  .modules-list {
    gap: 10px;
  }

  .module-card {
    width: 90%;
    padding: 15px 20px;
  }

  .form-section form {
    width: 100%;
  }

  .form-section input,
  .form-section select,
  .form-section textarea,
  .form-section button {
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  header.hero {
    padding: 60px 10px;
  }

  h1 {
    font-size: 1.4rem;
  }

  .hero .logo {
    width: 150px;
  }

  .cta-button {
    padding: 8px 18px;
    font-size: 0.9rem;
  }

  .module-card {
    width: 95%;
    padding: 12px 15px;
  }

  .form-section form {
    width: 100%;
    padding: 0 5px;
  }

  .footer {
    padding: 20px 10px;
    font-size: 0.8rem;
  }
}