/* ── 480px — Large phone / phablet ─────────────────────────── */
@media (min-width: 480px) {
  .hero-proof      { grid-template-columns: 1fr 1fr; }
  .trust-grid      { grid-template-columns: repeat(2, 1fr); }
  .why-grid        { grid-template-columns: 1fr 1fr; }
  .stats-grid      { grid-template-columns: repeat(4, 1fr); }
  .future-grid     { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── 640px — Small tablet ───────────────────────────────────── */
@media (min-width: 640px) {
  :root {
    --sp-hero:    8rem;
    --sp-primary: 6rem;
    --sp-std:     5rem;
    --sp-compact: 4rem;
    --sp-tight:   3.5rem;
  }

  .container { padding: 0 1.75rem; }
  .form-row-2 { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
  .future-grid { grid-template-columns: repeat(3, 1fr); }
  .stats-grid  { grid-template-columns: repeat(4, 1fr); }
  .process-steps { grid-template-columns: repeat(2, 1fr); }
  .mvv-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── 768px — Tablet / Nav switch ───────────────────────────── */
@media (min-width: 768px) {
  .nav-links   { display: flex; }
  .nav-actions { display: flex; }
  .nav-hamburger { display: none; }

  .mobile-cta-bar { display: none; }

  .bento-grid { grid-template-columns: repeat(3, 1fr); }
  .about-grid { grid-template-columns: 3fr 2fr; }
  .leader-card { display: flex; }
  .contact-grid { grid-template-columns: 3fr 2fr; gap: 3rem; }
  .footer-grid  { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

/* ── 900px — Wide tablet / small laptop ────────────────────── */
@media (min-width: 900px) {
  .faq-grid            { grid-template-columns: 5fr 7fr; gap: 3rem; align-items: start; }
  .testimonials-grid   { grid-template-columns: repeat(3, 1fr); }
  .trust-grid          { grid-template-columns: repeat(3, 1fr); }
}

/* ── 1024px — Desktop ───────────────────────────────────────── */
@media (min-width: 1024px) {
  :root {
    --sp-hero:    10rem;
    --sp-primary: 7.5rem;
    --sp-std:     6rem;
    --sp-compact: 5rem;
    --sp-tight:   4rem;
  }

  .container { padding: 0 2.5rem; }

  .why-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  .process-steps {
    grid-template-columns: repeat(5, 1fr);
    position: relative;
  }
  .process-steps::before {
    content: '';
    position: absolute;
    top: 28px;
    left: calc(10% + 14px);
    right: calc(10% + 14px);
    height: 1px;
    background: var(--n200);
    z-index: 0;
  }
  .mvv-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── max-width overrides ─────────────────────────────────────── */
@media (max-width: 500px) {
  .leader-card { flex-direction: column; align-items: center; text-align: center; }
  .leader-quote { text-align: left; }
}

@media (max-width: 480px) {
  .form-row-2 { grid-template-columns: 1fr; }
  .email-capture { flex-direction: column; }
  .fca-actions { flex-direction: column; width: 100%; }
  .fca-actions .btn { width: 100%; justify-content: center; }
  .hero-ctas { flex-direction: column; align-items: center; }
}

/* ── Dark mode ───────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --white:  #0D1117;
    --n50:    #111827;
    --n100:   #1A2332;
    --n200:   #243047;
    --n300:   #2D3748;
    --n400:   #4A5568;
    --n500:   #718096;
    --n600:   #A0AEC0;
    --n700:   #CBD5E0;
    --n800:   #E2E8F0;
    --n900:   #F1F5F9;
  }

  body { background: #0D1117; color: var(--n800); }

  .section-white   { background: #0D1117; }
  .section-offwhite{ background: #111827; }

  .brand-card,
  .trust-pillar,
  .fact-chip,
  .why-card,
  .testimonial-card,
  .contact-form-wrap,
  .mvv-card,
  .faq-item,
  .contact-metric,
  .contact-chip,
  .leader-card { background: #111827; border-color: #243047; }

  .contact-hours,
  .form-testimonial,
  #entity-block,
  .faq-contact-note { background: #111827; border-color: var(--blue-800); }

  .bc-goji    { background: rgba(0,80,200,.08);   border-color: #243047; }
  .bc-domain  { background: rgba(242,152,58,.06); border-color: #243047; }
  .bc-profile { background: rgba(107,184,53,.05); border-color: #243047; }

  .faq-item       { background: #111827; border-color: #243047; }
  .faq-item.open  { background: rgba(0,80,200,.08); border-color: var(--blue-700); }

  .form-input, .form-select, .form-textarea {
    background: #111827;
    border-color: #2D3748;
    color: var(--n800);
  }

  #navbar, .drawer-panel { background: var(--blue-950); }

  .footer-links a { color: rgba(255,255,255,.45); }
}