/* ─────────────────────────────────────────────────────────────
   responsive.css
   Breakpoints de la desktop spre mobile (desktop-first).
   Breakpoints:
     ≤ 960px  — tablet
     ≤ 680px  — mobile mare
     ≤ 480px  — mobile mic
───────────────────────────────────────────────────────────── */


/* ══════════════════════════════════════════════════════════════
   TABLET — ≤ 960px
══════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {

  /* Hero: stivuit vertical */
  .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-12);
  }
  .hero__sub  { margin-inline: auto; }
  .hero__ctas { justify-content: center; }
  .hero__proof { justify-content: center; }
  .hero__visual { order: -1; }

  /* Scene hero mai mică */
  .hero-scene {
    max-width: 340px;
    margin-inline: auto;
  }

  /* Features: 2 coloane */
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Audience: stivuit */
  .audience-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* Counters: stivuit */
  .counters-grid {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin-inline: auto;
  }

  /* Steps: ascunde linia verticală pe tablet */
  .steps::before { display: none; }

  /* Navbar: ascunde linkurile */
  .navbar__nav  { display: none; }
  .navbar__cta  { display: none; }
  .navbar__hamburger { display: flex; }

  /* Footer: stivuit */
  .footer__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer__contact { text-align: center; }

  /* Cost total: stivuit */
  .cost-total {
    flex-direction: column;
    text-align: center;
    gap: var(--space-5);
    padding: var(--space-8);
  }
  .cost-total__left { text-align: center; }

  /* Validation box stats */
  .validation-box__stats {
    gap: var(--space-6);
  }
}


/* ══════════════════════════════════════════════════════════════
   MOBILE MARE — ≤ 680px
══════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {

  /* Hero: ascundem scena cu carduri — prea aglomerat pe telefon */
  .hero__visual { display: none; }

  /* Hero padding top mai mic */
  .hero { padding-top: calc(var(--space-24) + 60px); }

  /* Features: o coloană */
  .features-grid { grid-template-columns: 1fr; }

  /* Cost grid: o coloană */
  .cost-grid { grid-template-columns: 1fr; }

  /* Steps: simplificat */
  .step {
    grid-template-columns: var(--space-12) 1fr;
    gap: var(--space-4);
  }
  .step__icon { display: none; }

  /* Agent note: stivuit */
  .agent-note { flex-direction: column; gap: var(--space-3); }

  /* Form chips: mai compacte */
  .chip-group { gap: var(--space-2); }
  .chip span  { font-size: var(--text-xs); padding: var(--space-2) var(--space-3); }

  /* Butoane hero: stivuite */
  .hero__ctas { flex-direction: column; align-items: center; }
  .hero__ctas .btn { width: 100%; max-width: 320px; }
}


/* ══════════════════════════════════════════════════════════════
   MOBILE MIC — ≤ 480px
══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Section spacing redus */
  section { padding-block: var(--space-16); }

  /* Formular: padding mic */
  .reg-form { padding: var(--space-6); }

  /* Audience card: padding mic */
  .audience-card { padding: var(--space-6); }

  /* Counter card: padding mic */
  .counter-card { padding: var(--space-8) var(--space-5); }

  /* Validation box stats: stivuite */
  .validation-box__stats {
    flex-direction: column;
    gap: var(--space-5);
    align-items: center;
  }

  /* Final CTA: textul mai mic */
  .final-cta h2 {
    font-size: var(--text-3xl);
  }
}