/* ==========================================================================
   ConnectDeep AI — responsive.css
   Breakpoints: mobile < 600px, tablet < 900px, desktop >= 1200px.
   ========================================================================== */

@media (min-width: 1200px) { .hero-grid { gap: var(--space-6); } }

@media (max-width: 899px) {
  h1 { font-size: clamp(40px, 9vw, 56px); }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-left  { grid-column: 1 / -1; }
  .hero-right { grid-column: 1 / -1; margin-top: var(--space-8); }
  .hero { padding-top: calc(76px + var(--space-6)); }
  .dash-stage { display: flex; flex-direction: column; gap: var(--space-3); }
  .dash-stage .laptop { order: 0; }
  .float-card { position: static; width: 100%; max-width: 420px; margin-inline: auto; }
  .listening-card { order: 1; }
  .hubspot-chip   { order: 2; border-radius: var(--radius-md); justify-content: center; }
  .agent-card     { order: 3; }
  .connector { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 599px) {
  .shell { padding-inline: 20px; }
  .header-inner { padding: 16px 20px; }
  .site-header nav[aria-label="Primary"] { display: none; }
  .header-ctas { display: none; }
  .nav-toggle { display: block; }
  .hero { padding-top: calc(76px + 56px); padding-bottom: 56px; }
  .trusted { padding: 56px 0; }
  .footer-grid { padding-top: 56px; padding-bottom: 56px; grid-template-columns: 1fr; }
  .logo-row { display: none; }
  .logo-marquee { display: flex; }
  .hero-highlights { grid-template-columns: 1fr; }
  .hero-dek { font-size: 16px; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .dash-charts, .dash-lists { grid-template-columns: 1fr; }
  .dash { min-height: 0; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; transition: opacity 0.01ms; }
  .marquee-track { animation: none; }
  .float-card { animation: none; }
}