/* ============================================================
   AI AGENT IA - Responsive Stylesheet
   ============================================================ */

/* Tablet (768px) */
@media (max-width: 1024px) {
  .hero-container { grid-template-columns: 1fr; gap: 32px; }
  .hero-title { font-size: 40px; }
  .hero-visual { max-width: 500px; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .cases-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .testi-grid { grid-template-columns: repeat(2, 1fr); }
  .tech-grid { grid-template-columns: repeat(2, 1fr); }
  .problem-solution-grid { grid-template-columns: 1fr; }
  .contact-wrap { grid-template-columns: 1fr; }
  .demo-wrap { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile (640px) */
@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .nav-menu {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--bg);
    flex-direction: column;
    padding: 20px 24px;
    gap: 4px;
    border-bottom: 1px solid rgba(100,116,139,0.12);
    box-shadow: var(--shadow);
  }
  .nav-menu.open { display: flex; }
  .nav-menu a { padding: 12px 16px; width: 100%; }
  .nav-lang-switch { margin-left: 0; }
  .nav-cta-li { margin-left: 0; width: 100%; }
  .nav-cta { width: 100%; }

  .hero { padding: 48px 0; }
  .hero-title { font-size: 32px; }
  .hero-subtitle { font-size: 17px; }
  .hero-stats { flex-direction: column; gap: 16px; }
  .hero-visual { display: none; }

  .features-grid { grid-template-columns: 1fr; }
  .cases-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .testi-grid { grid-template-columns: 1fr; }
  .tech-grid { grid-template-columns: 1fr; }

  .page-hero .page-title { font-size: 32px; }

  .section { padding: 48px 0; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .chat-widget { height: 480px; }

  .cookie-banner { bottom: 0; left: 0; transform: none; width: 100%; border-radius: var(--radius) var(--radius) 0 0; max-width: 100%; }

  h1 { font-size: 32px; }
  h2 { font-size: 28px; }
  .hero-title { font-size: 32px; }
}