/* Global responsive helpers */
img, svg, video {
  max-width: 100%;
  height: auto;
}

.container {
  width: 92%;
}

@media (max-width: 1200px) {
  .hero-left h1 { font-size: 3.4rem; }
  .features-title,
  .analytics-title,
  .collab-title,
  .testimonials-title,
  .about-title { font-size: 2.6rem; }
}

@media (max-width: 992px) {
  .header { padding: 18px 0; }
  .nav { flex-wrap: wrap; gap: 14px; }
  .logo img { height: 48px; }
  .nav nav ul { flex-wrap: wrap; gap: 16px; justify-content: center; }

  .hero { padding: 80px 0; }
  .hero-inner { flex-direction: column; align-items: stretch; gap: 36px; }
  .hero-right { width: 100%; }
  .hero-left h1 { font-size: 2.6rem; }
  .cta-buttons { flex-wrap: wrap; }

  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .analytics-inner,
  .collab-inner,
  .about-inner { flex-direction: column; gap: 40px; }
  .analytics-right { grid-template-columns: 1fr; }
  .about-right { grid-template-columns: 1fr; }
  .testi-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .approach-grid { grid-template-columns: 1fr; }
  .services-list { grid-template-columns: 1fr; }
  .mission-vision-grid { grid-template-columns: 1fr; }
  .contact-container { grid-template-columns: 1fr; gap: 32px; }
  .contact-info-grid { grid-template-columns: 1fr; }
  .site-footer .footer-top { flex-direction: column; gap: 24px; }
}

@media (max-width: 768px) {
  .hero { padding: 70px 0; }
  .hero-left h1 { font-size: 2.1rem; }
  .hero-left p.lead { font-size: 1.05rem; }
  .contact-card { padding: 28px; }

  .features { padding: 70px 0; }
  .features-title,
  .analytics-title,
  .collab-title,
  .testimonials-title,
  .about-title { font-size: 2rem; }

  .analytics,
  .collab,
  .testimonials,
  .about-cta { padding: 70px 0; }

  .testi-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }

  .menu-toggle{ display: flex; }
  .nav nav{ width: 100%; }
  .nav nav ul{
    display: none;
    flex-direction: column;
    background: var(--nav-bg);
    padding: 16px;
    border-radius: 12px;
    gap: 12px;
  }
  .nav.nav-open nav ul{ display: flex; }
}

@media (max-width: 520px) {
  .nav nav ul { flex-direction: column; gap: 10px; align-items: center; }
  .hero-left h1 { font-size: 1.9rem; }
  .btn { width: 100%; justify-content: center; }
  .cta-buttons { gap: 10px; }
  .contact-card { padding: 22px; }
  .footer-left .footer-logo img { height: 48px; }
}