/* ==========================================================================
   AI MASTER PRO — RESPONSIVE STYLES
   ========================================================================== */

@media (max-width: 1100px) {
  .roadmap-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .mentors-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 540px;
    margin: 0 auto;
  }
  
  .pricing-card.popular {
    transform: none;
  }
  
  .calc-grid {
    grid-template-columns: 1fr;
  }
  
  .showcase-grid {
    grid-template-columns: 1fr;
  }

  .module-split-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 900px) {
  .nav-links {
    display: none;
  }
  
  .mobile-nav-toggle {
    display: flex;
  }
  
  .stats-bar {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .stat-item:nth-child(3)::after {
    display: none;
  }
  
  .prizes-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .section {
    padding: 70px 0;
  }
  
  .hero-section {
    padding-top: 130px;
    padding-bottom: 60px;
  }
  
  .hero-title {
    font-size: 34px;
  }
  
  .hero-subtitle {
    font-size: 16px;
  }
  
  .stats-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 10px;
  }
  
  .stat-item::after {
    display: none !important;
  }
  
  .roadmap-grid {
    grid-template-columns: 1fr;
  }
  
  .mentors-grid {
    grid-template-columns: 1fr;
    max-width: 380px;
    margin: 0 auto;
  }
  
  .curriculum-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-input-wrap {
    max-width: 100%;
  }
  
  .module-header-btn {
    padding: 18px 16px;
    flex-direction: column;
    align-items: flex-start;
  }
  
  .module-meta-tags {
    width: 100%;
    justify-content: space-between;
    margin-top: 10px;
  }
  
  .module-split-grid {
    padding: 0 16px 20px;
  }

  .module-visuals-grid {
    grid-template-columns: 1fr;
  }
  
  .calculator-card {
    padding: 28px 20px;
  }
  
  .modal-window {
    padding: 30px 20px;
  }
  
  .footer-top {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 16px;
  }
  
  .hero-title {
    font-size: 28px;
  }
  
  .btn-primary, .btn-secondary {
    width: 100%;
    padding: 14px 20px;
  }
  
  .hero-cta-group {
    flex-direction: column;
    width: 100%;
  }
  
  .stats-bar {
    grid-template-columns: 1fr;
  }
  
  .price-val {
    font-size: 28px;
  }
  
  .calc-result-amount-usd {
    font-size: 34px;
  }
}