@media (min-width: 1180px) {
  #servicesGrid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 560px) {
  #servicesGrid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

@media (max-width: 960px) {
  .hero {
    grid-template-columns: 1fr;
  }
  .layout {
    padding: 24px 14px 60px;
  }
  .panel {
    padding: 16px;
  }
  .grid {
    gap: 10px;
  }
  .card {
    padding: 12px;
  }
  .hero-stats {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}

@media (max-width: 640px) {
  .release-versions {
    flex-direction: column;
    gap: 8px;
  }
  .release-versions .align-right {
    text-align: left;
  }
}

@media (max-width: 760px) {
  .topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 16px;
  }
  .brand {
    justify-content: flex-start;
  }
  .top-actions {
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
  }
  .top-actions .ghost {
    padding: 8px 10px;
  }
  .top-indicators {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    align-items: center;
  }
  .top-indicators .chip-label {
    grid-column: 1 / -1;
    margin-right: 0;
    font-size: 0.8rem;
  }
  .top-indicators .status-chip,
  .top-indicators .hint {
    width: auto;
    justify-self: flex-start;
  }
}

@media (max-width: 820px) {
  .hero {
    grid-template-columns: 1fr;
  }
  .hero-stats {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}