/* ---------- RESPONSIVE MEDIA QUERIES ---------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { height: 380px; order: -1; }
  .hero-scene-float { --hero-scale: 0.82; }
  .chip--api, .chip--deploy { display: none; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .process-strip { flex-direction: column; align-items: stretch; gap: 28px; }
  .process-strip::before { display: none; }
  .process-strip::after {
    content: "";
    position: absolute;
    top: 26px; bottom: 26px; left: 26px;
    width: 1px;
    background: var(--line);
    transition: background .3s ease;
  }
  .process-strip:hover::after { background: rgba(var(--teal-rgb), 0.4); }
  .proc-step { flex-direction: row; align-items: flex-start; text-align: left; padding: 0; gap: 18px; }
  .proc-card { margin-top: 0; }
  .why-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .pf-featured { grid-template-columns: 1fr; }
  .fb-layout { grid-template-columns: 1fr; }
  .fb-wall { height: 360px; }
  .stack-groups { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 868px) {
  .handoff-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Mobile header/nav (<=768px) ---------- */
@media (max-width: 768px) {
  .nav-row { height: 60px; }
  .logo { font-size: 16px; gap: 8px; }
  .logo-image { width: 30px; height: 30px; }

  .nav-toggle { display: flex; width: 36px; height: 36px; border-radius: 9px; }
  .nav-cta { gap: 10px; }
  .nav-cta .btn--ghost, .nav-cta .btn--primary { display: none; }

  nav.nav-links {
    position: fixed; top: 60px; left: 0; right: 0; bottom: 0;
    background: #0A0D16;
    flex-direction: column; align-items: flex-start;
    padding: 28px 24px; gap: 22px;
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 90;
    overflow-y: auto;
  }
  nav.nav-links.open { transform: translateX(0); }
  nav.nav-links a { font-size: 17px; }
  .nav-link-mobile { display: block; padding-top: 18px; border-top: 1px solid var(--line-soft); color: var(--accent-3) !important; }
  .nav-signup-mobile { display: inline-flex; margin-top: 10px; color: #0b0f19 !important; font-weight: 700 !important; }
}

@media (max-width: 720px) {
  .wrap { padding: 0 20px; }
  .services-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  section { padding: 72px 0; }
  .footer-row { flex-direction: column; align-items: flex-start; }
  .pf-grid { grid-template-columns: repeat(2, 1fr); }
  .pf-details-scroll { max-height: 380px; }
  .tz-grid { grid-template-columns: repeat(2, 1fr); }
  /* Grid items default to min-width:auto, so a track refuses to shrink
     below its content's intrinsic width. .tz-time's 23px monospace time
     string ("11:45 AM") is wider than a 2-column mobile track has room
     for, which was forcing .tz-grid — and everything above it up to
     .why-section — wider than the viewport. min-width:0 lets the card
     actually shrink to its track; the smaller font below means it still
     fits on one line at normal widths, and simply wraps to a second line
     instead of overflowing if a device/zoom level makes it tighter still. */
  .tz-card { min-width: 0; }
  .tz-time { font-size: 17px; }
  .clock-card-head { flex-direction: column; align-items: flex-start; }
  .stack-groups { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .chip-pulse { animation: none !important; }
  .reveal { transition: none; opacity: 1; transform: none; }
  .fb-track { animation: none; }
  .overlap-now { transition: none; }
}