@media (max-width: 1120px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  main { padding: 0; }
  .workspace { padding: 0 18px 90px; }
  .mobile-nav { display: grid; }
  .split { grid-template-columns: 1fr; }
  .grid-3, .grid-4, .build-grid { grid-template-columns: repeat(2, 1fr); }
  .workspace-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .note-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .topbar { flex-direction: column; align-items: stretch; }
  .top-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .btn { width: 100%; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .grid-3, .grid-4, .build-grid { grid-template-columns: 1fr; }
  .build-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .event { grid-template-columns: 80px minmax(0, 1fr); gap: 12px; }
  .event-dot { left: 78px; }
  .event-line { left: 83px; }
  .footer { border-radius: 12px; padding: 16px 14px; }
  .footer-inner { flex-direction: column; text-align: center; gap: 6px; }
  .cmd-overlay { padding-top: 6vh; }
  .note-grid { grid-template-columns: 1fr; }
  .cta-inner { flex-direction: column; text-align: center; padding: 24px 20px; }
  .cta-content { flex-direction: column; text-align: center; }
  .product-grid {
    grid-template-columns: none;
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .product-card {
    min-width: 200px;
    scroll-snap-align: start;
    flex-shrink: 0;
  }
}

@media (max-width: 400px) {
  .build-card { padding: 18px; border-radius: 16px; }
}