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

@media (max-width: 1024px) {
  .hero h1 { font-size: 2.8rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .about-intro { grid-template-columns: 1fr; gap: 40px; }
  .course-detail-header { grid-template-columns: 1fr; gap: 30px; }
  .section-header h2 { font-size: 2.2rem; }
}

@media (max-width: 992px) {
  .hero .container { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .hero p { margin: 0 auto 36px; }
  .hero-cta { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-visual { order: -1; }
  .hero-card-1 { left: 10px; }
  .hero-card-2 { right: 10px; }
  .contact-wrapper { grid-template-columns: 1fr; }
  .placement-stats { grid-template-columns: repeat(2, 1fr); }
  .hero h1 { font-size: 2.5rem; }
  .page-hero h1 { font-size: 2.4rem; }
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-cta .btn-outline-nav { display: none; }
  .hamburger { display: flex; }

  .nav-links.active {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 70px; left: 0; right: 0;
    background: rgba(15,15,26,0.98);
    backdrop-filter: blur(24px);
    padding: 24px 32px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    gap: 20px;
    z-index: 999;
  }
  .nav-links.active a { color: rgba(255,255,255,0.8); font-size: 1rem; }
  .nav-links.active a:hover { color: var(--orange); }

  .hero h1 { font-size: 2rem; }
  .hero p { font-size: 0.95rem; }
  .hero-stats { flex-wrap: wrap; gap: 20px; }
  .hero-stat h3 { font-size: 1.5rem; }
  .hero .container { gap: 30px; }

  .section-header h2 { font-size: 1.8rem; }
  section { padding: 70px 0; }

  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }

  .placement-stats { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .placement-stat h3 { font-size: 1.8rem; }
  .courses-grid { grid-template-columns: 1fr; }

  .page-hero { padding: 130px 0 60px; }
  .page-hero h1 { font-size: 1.8rem; }

  .contact-form { padding: 28px; }
}

@media (max-width: 640px) {
  .trainers-grid { grid-template-columns: 1fr; }
  .stories-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .hero-card { display: none; }
  .hero h1 { font-size: 1.8rem; }
  .hero-stat h3 { font-size: 1.3rem; }
  .hero-stats { gap: 16px; }
  .placement-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .placement-stat { padding: 20px 16px; }
  .placement-stat h3 { font-size: 1.5rem; }
  .page-hero h1 { font-size: 1.5rem; }
  .section-header h2 { font-size: 1.5rem; }
  .about-intro h2 { font-size: 1.5rem; }
  .filter-bar { gap: 8px; }
  .filter-btn { padding: 8px 16px; font-size: 0.74rem; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 1.6rem; }
  .hero-cta { flex-direction: column; align-items: center; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .container { padding: 0 16px; }
  .hero-stats { gap: 12px; }
  .hero-stat h3 { font-size: 1.1rem; }
  .hero-stat p { font-size: 0.72rem; }
  .section-header h2 { font-size: 1.3rem; }
  .course-card-body { padding: 18px 20px 24px; }
  .contact-form { padding: 20px; }
  .contact-form h3 { font-size: 1.1rem; }
  .comp-table { font-size: 0.75rem; }
  .comp-table th, .comp-table td { padding: 10px 12px; }
}