/* ===== RESPONSIVE ===== */

@media (max-width: 900px) {
  .hero .container {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .hero h1 { font-size: 2.6rem; }
  .hero-visual { order: -1; }
  .doe-scene { width: 280px; height: 300px; }
  .float-badge { display: none; }
  .how-grid { grid-template-columns: 1fr; }
  .paths-grid { grid-template-columns: 1fr; }
  .config-layout { grid-template-columns: 1fr; }
  .stats-counters { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  section { padding: 72px 0; }
  .prereq-grid { grid-template-columns: repeat(2, 1fr); }
  .flow-diagram { flex-wrap: wrap; gap: 8px; }
  .flow-arrow { width: 40px; }
}

@media (max-width: 600px) {
  .hero h1 { font-size: 2rem; }
  .section-title { font-size: 1.8rem; }
  .hero-actions { flex-direction: column; }
  .btn { width: 100%; justify-content: center; }

  /* Mobile nav: hide links by default, show hamburger */
  nav .nav-links { display: none; }
  .nav-toggle { display: block; }

  .model-pills { justify-content: center; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .stat-value { font-size: 2.2rem; }
  .prereq-grid { grid-template-columns: 1fr 1fr; }
  .flow-diagram { padding: 16px 0; }
  .flow-arrow { width: 30px; }
  .flow-node-circle { width: 44px; height: 44px; font-size: 1rem; }
  .flow-node-label { font-size: 0.65rem; }
}

@media (max-width: 380px) {
  .prereq-grid { grid-template-columns: 1fr; }
}