@media (max-width: 720px) {
  .topbar { padding: 0 20px; }
  .topbar nav { gap: 0; }
  .hero { min-height: 800px; }
  .hero-vignette {
    background: linear-gradient(0deg, #040a0f 37%, rgba(4,10,15,.64) 66%, rgba(4,10,15,.08) 100%),
                linear-gradient(90deg, transparent 20%, rgba(4,10,15,.6));
  }
  .hero-copy { width: 100%; max-width: 100%; min-width: 0; }
  .hero-copy > p { width: 100%; max-width: 100%; font-size: 16px; color: #b2c1c4; }
  .hero-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .button { width: 100%; justify-content: center; }
  .status-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-strip > div, .status-time { min-width: 0; }
  .card-grid { grid-template-columns: minmax(0, 1fr); }
  .feature-card { min-width: 0; }
}

@media (max-width: 390px) {
  .brand { font-size: 12px; gap: 9px; }
  .brand-mark { width: 25px; height: 25px; }
  .nav-launch { font-size: 10px; padding: 8px 9px; }
  h1 { font-size: 46px; }
}