/* ============================================
   Simplifier — responsive.css
   Breakpoints: 1200px, 1024px, 768px, 480px, 375px
   Mobile-first approach
   ============================================ */

/* ===== 1200px — Large tablet / small desktop ===== */
@media (max-width: 1200px) {
  :root { --container: 100%; }
  .container { padding: 0 var(--sp-xl); }
  .pricing-cards { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-2xl); }
}

/* ===== 1024px — Tablet landscape ===== */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-sub { max-width: 100%; }
  .hero-visual { display: none; }
  .btn-actions { justify-content: center; }
  .hero-trust { justify-content: center; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .file-types { grid-template-columns: repeat(3, 1fr); }
  .howto-layout { grid-template-columns: 1fr; }
  .howto-sidebar { position: static; }
  .guide-layout { grid-template-columns: 1fr; }
  .guide-sidebar { position: static; }
  .contact-layout { grid-template-columns: 1fr; }
}

/* ===== 768px — Tablet portrait ===== */
@media (max-width: 768px) {
  /* Nav */
  .nav-links { display: none; }
  .hamburger { display: flex; }

  /* Typography */
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.125rem; }

  /* Sections */
  .section { padding: var(--sp-3xl) 0; }
  .section-sm { padding: var(--sp-2xl) 0; }
  .section-header { margin-bottom: var(--sp-2xl); }

  /* Grids → 1 column */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .use-cases { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .pricing-cards { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .related-grid { grid-template-columns: 1fr; }

  /* How it works steps */
  .step { grid-template-columns: 1fr; gap: var(--sp-2xl); }
  .step:nth-child(even) .step-vis { order: 0; }
  .step-vis { height: 220px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-2xl); }
  .footer-bottom { flex-direction: column; gap: var(--sp-md); text-align: center; }
  .footer-legal { gap: var(--sp-lg); }

  /* Web App */
  .app-shell { grid-template-columns: 1fr; }
  .app-panel-left { border-right: none; border-bottom: 1px solid var(--border); }
  .app-panel { min-height: auto; }

  /* Mode grid */
  .mode-grid { grid-template-columns: repeat(2, 1fr); }

  /* File types */
  .file-types { grid-template-columns: repeat(2, 1fr); }

  /* Howto */
  .howto-layout { grid-template-columns: 1fr; gap: var(--sp-2xl); }
  .howto-sidebar { position: static; }

  /* Guide */
  .guide-layout { grid-template-columns: 1fr; gap: var(--sp-2xl); }
  .guide-sidebar { position: static; }
}

/* ===== 480px — Mobile ===== */
@media (max-width: 480px) {
  :root { --nav-h: 64px; }
  .container { padding: 0 var(--sp-md); }

  h1 { font-size: 1.875rem; }
  h2 { font-size: 1.375rem; }

  .btn-lg { padding: 14px 24px; font-size: 1rem; }
  .btn-actions { flex-direction: column; align-items: stretch; }
  .btn-actions .btn, .btn-actions .appstore-badge { width: 100%; justify-content: center; }
  .btn-actions-center .btn, .btn-actions-center .appstore-badge { width: auto; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-md); }
  .stat-n { font-size: 2rem; }

  .hero { padding: calc(var(--nav-h) + var(--sp-3xl)) 0 var(--sp-3xl); }
  .hero-light { padding: calc(var(--nav-h) + var(--sp-2xl)) 0 var(--sp-2xl); }

  .p-card { padding: var(--sp-xl); }
  .p-amount { font-size: 2.25rem; }

  .cta-banner { padding: var(--sp-3xl) 0; }

  .faq-q { padding: var(--sp-lg); font-size: 0.875rem; }
  .faq-a-inner { padding: 0 var(--sp-lg) var(--sp-lg); }

  .file-types { grid-template-columns: repeat(2, 1fr); }

  .section-header p { font-size: 1rem; }

  .guide-meta { gap: var(--sp-md); }

  /* Contact */
  .contact-layout { grid-template-columns: 1fr; gap: var(--sp-2xl); }
}

/* ===== 375px — Small mobile ===== */
@media (max-width: 375px) {
  .container { padding: 0 var(--sp-md); }
  h1 { font-size: 1.75rem; }
  .pricing-toggle-row { flex-direction: column; gap: var(--sp-sm); }
  .faq-cats { gap: 6px; }
  .faq-cat { padding: 6px 14px; font-size: 0.8125rem; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none !important; opacity: 1 !important; transform: none !important; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}