@media (max-width: 800px) {
  .system-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .container {
    width: min(calc(100% - 28px), var(--container-width));
  }

  .header__content {
    min-height: 64px;
  }

  .server-status {
    font-size: 12px;
  }

  .hero {
    padding: 80px 0 64px;
  }

  .hero__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .button,
  .mode-badge {
    width: 100%;
    text-align: center;
  }

  .system-grid {
    grid-template-columns: 1fr;
  }
}