@media (max-width: 1120px) {
  .shell-status,
  .shell-demo {
    display: none;
  }

  .shell-inner {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }

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

  .hero-visual {
    min-height: 460px;
  }

  .ops-panel {
    inset: 2% auto auto 0;
    min-width: min(760px, 100%);
    width: 100%;
  }
}

@media (max-width: 820px) {
  :root {
    --header-h: 104px;
  }

  .shell-inner {
    width: min(100% - 24px, var(--container));
    grid-template-columns: 1fr auto;
    align-items: start;
    padding: 12px 0;
  }

  .brand {
    min-width: 0;
  }

  .shell-actions {
    display: grid;
    grid-template-columns: auto auto;
    gap: 8px;
  }

  .lang-switch {
    grid-column: 1 / -1;
  }

  .theme-toggle {
    display: none;
  }

  .container {
    width: min(100% - 28px, var(--container));
  }

  .home-hero {
    min-height: 0;
    padding-top: 38px;
  }

  .h1 {
    font-size: clamp(38px, 11vw, 52px);
    overflow-wrap: anywhere;
  }

  .page-title {
    font-size: clamp(32px, 10vw, 48px);
    overflow-wrap: anywhere;
  }

  .actions,
  .download-grid,
  .grid-2,
  .grid-3,
  .metric-row,
  .page-split {
    grid-template-columns: 1fr;
  }

  .actions {
    display: grid;
  }

  .btn {
    width: 100%;
    white-space: normal;
    text-align: center;
  }

  .hero-visual {
    min-height: 390px;
    margin-top: 8px;
  }

  .ops-panel {
    position: relative;
    min-width: 0;
    transform: none;
    animation: none;
  }

  .ops-body {
    grid-template-columns: 1fr;
  }

  .ops-sidebar {
    display: none;
  }

  .ops-metrics {
    grid-template-columns: 1fr;
  }

  .ops-row {
    grid-template-columns: 1fr 1fr;
  }

  .floating-chip {
    display: none;
  }

  .timeline-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }

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

@media (max-width: 430px) {
  :root {
    --header-h: 118px;
  }

  .brand {
    grid-template-columns: 38px auto;
  }

  .brand-logo {
    width: 38px;
    height: 38px;
  }

  .brand-meta {
    font-size: 11px;
  }

  .navigation-panel {
    inset: 0;
    width: 100vw;
    border-radius: 0;
  }

  .page-card-inner,
  .card {
    padding: 18px;
  }

  .ops-content {
    padding: 16px;
  }
}