/* ============================================
   ZENDERS — Responsive Styles
   ============================================ */

/* === Tablet (max-width: 1024px) === */
@media (max-width: 1024px) {
  .hero .container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-2xl);
  }
  .hero-content { max-width: 100%; }
  .hero-buttons { justify-content: center; }
  .hero-trust { justify-content: center; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-wrapper { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}

/* === Tablet Small (max-width: 768px) === */
@media (max-width: 768px) {
  .steps-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }
  .steps-grid::before { display: none; }
  .usecases-grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
  .contact-form .form-grid { grid-template-columns: 1fr; }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }
  .footer-brand { grid-column: 1 / -1; }
  
  /* Navbar mobile */
  .nav-links {
    display: none;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(13, 14, 19, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xl);
    padding: var(--space-2xl);
  }
  .nav-links.active { display: flex; }
  .nav-links a { font-size: var(--text-xl); }
  .nav-cta { margin-left: 0; }
  .hamburger { display: flex; }
}

/* === Mobile (max-width: 640px) === */
@media (max-width: 640px) {
  :root {
    --section-padding: clamp(3rem, 4vw, 5rem);
  }

  .container { padding: 0 var(--space-md); }
  
  h1 { font-size: var(--text-5xl); }
  h2 { font-size: var(--text-4xl); }
  
  .hero { min-height: auto; padding-top: calc(var(--nav-height) + var(--space-2xl)); }
  .hero-buttons { flex-direction: column; align-items: stretch; }
  .hero-buttons .btn { justify-content: center; }
  
  .features-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: var(--space-md); text-align: center; }
  
  /* Show mobile sticky CTA */
  .mobile-sticky-cta { display: block; }
  
  .comparison-container { border-radius: var(--radius-lg); }
  .demo-player { border-radius: var(--radius-lg); }
}

/* === Wide screens (min-width: 1280px) === */
@media (min-width: 1280px) {
  .container { padding: 0 var(--space-xl); }
}