/* ============================================
   Responsive - Mobile-First Overrides
   ============================================ */

/* ---- Small Phones (base: 0-479px) ---- */
/* Base styles already handle this */

.hero h1 {
  font-size: var(--text-4xl);
}

.section-title {
  font-size: var(--text-3xl);
}

/* ---- Large Phones (sm: 480px+) ---- */
@media (min-width: 480px) {
  .hero-badges {
    gap: var(--space-3);
  }

  .hero h1 {
    font-size: var(--text-5xl);
  }
}

/* ---- Tablets (md: 768px+) ---- */
@media (min-width: 768px) {
  :root {
    --container-padding: var(--space-6);
  }

  .section-title {
    font-size: var(--text-4xl);
  }

  .hero-subtitle {
    font-size: var(--text-xl);
  }

  /* About section: reverse on desktop */
  .about-text .section-title {
    text-align: left;
  }

  .about-text .section-title::before {
    margin-left: 0;
    margin-right: auto;
  }
}

/* ---- Small Desktops (lg: 1024px+) ---- */
@media (min-width: 1024px) {
  :root {
    --section-padding-y: 6rem;
  }

  .hero h1 {
    font-size: var(--text-6xl);
  }

  .nav-logo {
    font-size: var(--text-2xl);
  }
}

/* ---- Large Desktops (xl: 1280px+) ---- */
@media (min-width: 1280px) {
  :root {
    --section-padding-y: 7rem;
  }
}