/* ============================================
   RESPONSIVE DESIGN
   Media Queries for Mobile, Tablet, Desktop
   ============================================ */

/* Tablet: 768px - 1199px */
@media (max-width: 768px) {
  .container {
    padding: 2rem 1.5rem;
    gap: 2rem;
  }

  .headline {
    font-size: clamp(2.5rem, 10vw, 4.5rem);
  }

  .newsletter {
    flex-direction: column;
  }

  .newsletter-input {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .newsletter-button {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    width: 100%;
  }

  footer {
    padding: 1.5rem;
  }

  .footer-content {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .footer-right {
    text-align: center;
  }
}

/* Mobile: 480px - 767px */
@media (max-width: 480px) {
  .container {
    padding: 2rem 1rem;
    gap: 1.5rem;
  }

  .headline {
    font-size: clamp(2rem, 8vw, 3.5rem);
  }

  .divider {
    width: 40px;
  }

  .description {
    font-size: 0.9rem;
  }

  footer {
    padding: 1rem;
  }

  .footer-content {
    font-size: 0.75rem;
    gap: 0.5rem;
  }
}

/* Micro: < 480px */
@media (max-width: 360px) {
  .container {
    padding: 1.5rem 0.75rem;
    gap: 1rem;
  }

  .headline {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
    letter-spacing: 0.08em;
  }

  .subheading {
    font-size: 0.7rem;
  }

  .newsletter-wrapper {
    max-width: 100%;
  }
}