/* ============================================================
   RESPONSIVE — mobile-first breakpoints
   ============================================================ */

/* Large desktop tweak */
@media (min-width: 1280px) {
  :root { --container-padding: 2rem; }
}

/* ── Tablet landscape (≤1024px) ── */
@media (max-width: 1024px) {
  .grid-4      { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }

  .process-grid::before { display: none; }
  .process-grid { grid-template-columns: repeat(2, 1fr); }

  .value-row { grid-template-columns: 1fr; }
  .value-row.reverse .value-content { order: 1; }
  .value-row.reverse .value-visual  { order: 2; }

  .stats-bar-inner { grid-template-columns: repeat(2, 1fr); }
  .stats-bar-item  { border-right: none; border-bottom: 1px solid var(--border); }
  .stats-bar-item:nth-child(odd)  { border-right: 1px solid var(--border); }
  .stats-bar-item:nth-child(3),
  .stats-bar-item:nth-child(4)    { border-bottom: none; }
}

/* ── Tablet portrait (≤768px) ── */
@media (max-width: 768px) {
  :root {
    --space-3xl: 5rem;
    --space-2xl: 3rem;
  }

  /* Navigation */
  .nav-links        { display: none; }
  .nav-toggle       { display: flex; }
  .nav-right .btn   { display: none; }

  /* Grids */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  /* Process */
  .process-grid { grid-template-columns: 1fr; }
  .process-step { text-align: left; display: flex; align-items: flex-start; gap: var(--space-md); }
  .process-step-num { margin: 0; flex-shrink: 0; width: 52px; height: 52px; }

  /* Footer */
  .footer-grid  { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: var(--space-sm); text-align: center; }

  /* CTA */
  .cta-banner { padding: var(--space-2xl) var(--space-lg); }
  .cta-banner h2 { font-size: 1.75rem; }

  /* Case metrics */
  .case-metrics { flex-wrap: wrap; gap: var(--space-md); }

  /* Form rows */
  .form-row { grid-template-columns: 1fr; }

  /* Stats bar */
  .stats-bar-inner { grid-template-columns: 1fr 1fr; }

  /* Value row visual */
  .value-visual { min-height: 220px; padding: var(--space-xl); }

  /* Hero */
  .hero-content { padding: 4rem 0 3rem; }
  .hero-subtitle { font-size: var(--text-base); }
}

/* ── Mobile (≤480px) ── */
@media (max-width: 480px) {
  :root {
    --container-padding: 1rem;
    --space-3xl: 4rem;
    --space-2xl: 2.5rem;
    --space-xl:  2rem;
  }

  .display-xl { font-size: 2.125rem; }
  .display-lg { font-size: 1.875rem; }
  .display-md { font-size: 1.625rem; }

  .btn-lg { padding: 0.875rem 1.5rem; font-size: var(--text-base); }
  .btn-group { flex-direction: column; }
  .btn-group .btn { width: 100%; justify-content: center; }

  .section  { padding: var(--space-2xl) 0; }
  .page-hero { padding: calc(var(--nav-height) + 3rem) 0 3rem; }

  /* Nav drawer full width on very small screens */
  .nav-drawer { max-width: 100%; }

  /* Stats bar single column */
  .stats-bar-inner { grid-template-columns: 1fr; }
  .stats-bar-item  { border-right: none !important; }
  .stats-bar-item:last-child { border-bottom: none; }

  /* Cards */
  .card { padding: var(--space-lg); }
  .case-card-body { padding: var(--space-lg); }
  .case-card-head { padding: 1rem var(--space-lg); }

  /* Footer */
  .footer { padding: var(--space-2xl) 0 var(--space-lg); }

  /* Scroll top position */
  .scroll-top { bottom: 1.25rem; right: 1.25rem; width: 38px; height: 38px; font-size: 16px; }

  /* Value big number */
  .value-big-num { font-size: 4rem; }
}

/* ── Tiny (≤360px) ── */
@media (max-width: 360px) {
  :root { --container-padding: 0.875rem; }
  .display-xl { font-size: 1.875rem; }
}

/* ── Print ── */
@media print {
  .nav, .nav-drawer, .nav-overlay, .scroll-top { display: none; }
  body { background: white; color: black; }
  .hero-section { min-height: auto; background: none; }
  #hero-canvas  { display: none; }
}