/* =============================================
   Responsive — Device-specific breakpoints
   Samsung · iPhone · Tablet
   ============================================= */

/* ─── Hero: remove full-viewport lock on all phones (≤640px) ── */
@media (max-width: 640px) {
  .hero {
    min-height: auto;
    padding: 5.5rem 1.5rem 3rem;
  }
  .hero-badge {
    margin-bottom: 1.2rem;
    font-size: 0.65rem;
  }
  h1 {
    font-size: clamp(2.2rem, 10vw, 3rem);
    margin-bottom: 1rem;
  }
  .hero-intro {
    font-size: 0.82rem;
    line-height: 1.75;
    margin-bottom: 1.75rem;
  }
  .btn-primary,
  .btn-ghost { padding: 0.75rem 1.5rem; font-size: 0.8rem; }
}

/* ─── Section headers: stacked on all phones (≤640px) ── */
@media (max-width: 640px) {
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
  .section-header h2     { order: 1; }
  .section-header .section-tag  { order: 2; }
  .section-header .section-line { display: none; }
}

/* ─── Small phones: iPhone SE, Samsung Galaxy A (≤375px) ── */
@media (max-width: 375px) {
  nav { padding: 1rem 1.25rem; }

  .hero { padding: 6rem 1.25rem 4rem; }
  .hero-intro { font-size: 0.85rem; line-height: 1.7; }
  .btn-primary,
  .btn-ghost { padding: 0.75rem 1.5rem; font-size: 0.78rem; }

  .stats-bar { flex-wrap: wrap; }
  .stat {
    flex-basis: 50%;
    max-width: 50%;
    border-bottom: 1px solid var(--border);
  }
  .stat:nth-child(odd)  { border-right: 1px solid var(--border); }
  .stat:nth-child(3),
  .stat:nth-child(4)    { border-bottom: none; }

  section { padding: 4rem 1.25rem; }
  .cta-section { padding: 4rem 1.25rem; }
  footer {
    padding: 1.5rem 1.25rem;
    flex-direction: column;
    gap: 1.25rem;
  }
}

/* ─── Standard phones: iPhone 12/13/14/15, Samsung Galaxy S (376px–430px) ── */
@media (min-width: 376px) and (max-width: 430px) {
  nav { padding: 1rem 1.5rem; }

  .hero { padding: 7rem 1.5rem 4rem; }

  .stats-bar { flex-wrap: wrap; }
  .stat {
    flex-basis: 50%;
    max-width: 50%;
    border-bottom: 1px solid var(--border);
  }
  .stat:nth-child(odd)  { border-right: 1px solid var(--border); }
  .stat:nth-child(3),
  .stat:nth-child(4)    { border-bottom: none; }

  section { padding: 5rem 1.5rem; }
  .cta-section { padding: 5rem 1.5rem; }
  footer {
    padding: 1.5rem 1.5rem;
    flex-direction: column;
    gap: 1.25rem;
  }
}

/* ─── Large phones: iPhone Plus/Pro Max, Samsung S Ultra (431px–480px) ── */
@media (min-width: 431px) and (max-width: 480px) {
  nav { padding: 1rem 1.75rem; }
  .hero { padding: 7rem 1.75rem 4rem; }
  section { padding: 5rem 1.75rem; }
  .cta-section { padding: 5rem 1.75rem; }
  footer { padding: 1.5rem 1.75rem; }
}

/* ─── Between phones and tablets (481px–768px) ── */
@media (min-width: 481px) and (max-width: 768px) {
  nav { padding: 1.2rem 2rem; }
  .hero { padding: 7rem 2rem 4rem; }
  section { padding: 5.5rem 2rem; }
  .cta-section { padding: 5.5rem 2rem; }
  footer { padding: 1.5rem 2rem; }
}

/* ─── Tablets: iPad mini, Samsung Galaxy Tab (769px–1024px) ── */
@media (min-width: 769px) and (max-width: 1024px) {
  nav { padding: 1.2rem 2.5rem; }
  .hero { padding: 8rem 2.5rem 5rem; }
  section { padding: 5.5rem 2.5rem; }
  .cta-section { padding: 5.5rem 2.5rem; }
  footer { padding: 2rem 2.5rem; }
}

/* ─── Large tablets: iPad Air, iPad Pro, Samsung Tab S8 (1025px–1280px) ── */
@media (min-width: 1025px) and (max-width: 1280px) {
  section { padding: 6rem 2.5rem; }
  .cta-section { padding: 6rem 2.5rem; }
}