/* === MOBILE (base styles above handle < 480px) === */

/* Small phones: tighten spacing */
@media (max-width: 380px) {
  :root {
    --container-padding: 1rem;
  }

  .hero__title {
    font-size: 1.75rem;
  }

  .section__title {
    font-size: 1.5rem;
  }

  .email-form {
    flex-direction: column;
  }
}

/* Tablet: 480px+ */
@media (min-width: 480px) {
  .hero__title {
    font-size: var(--font-size-3xl);
  }
}

/* Tablet landscape / small desktop: 768px+ */
@media (min-width: 768px) {
  .hero__title {
    font-size: var(--font-size-4xl);
  }

  .section__title {
    font-size: var(--font-size-3xl);
  }

  .section {
    padding: var(--space-section) 0;
  }

  .quote__text {
    font-size: var(--font-size-2xl);
  }
}

/* Desktop: 1024px+ */
@media (min-width: 1024px) {
  .hero {
    padding: 10rem 0 var(--space-section);
  }
}

/* Mobile section spacing */
@media (max-width: 767px) {
  .section {
    padding: var(--space-3xl) 0;
  }

  .hero {
    min-height: 90vh;
    padding: 6rem 0 var(--space-2xl);
  }

  .hero__subtitle {
    font-size: var(--font-size-base);
  }

  .section__title {
    font-size: var(--font-size-2xl);
  }

  .section__subtitle {
    font-size: var(--font-size-base);
  }

  .quote__text {
    font-size: var(--font-size-lg);
  }

  .btn-group {
    flex-direction: column;
    align-items: center;
  }

  .btn {
    width: 100%;
    justify-content: center;
    max-width: 320px;
  }

  .video-embed {
    margin: var(--space-xl) auto;
    border-radius: var(--border-radius-sm);
  }

  .equation {
    font-size: var(--font-size-xl);
  }

  .highlight-stat__number {
    font-size: var(--font-size-2xl);
  }

  .variable-hero {
    min-height: 50vh;
    padding: 6rem 0 var(--space-2xl);
  }

  .content-section__title {
    font-size: var(--font-size-xl);
  }

  .footer-cta__title {
    font-size: var(--font-size-2xl);
  }
}