@media (max-width: 1024px) {
  .hero, .ecosystem-grid, .service-grid, .footer-grid, .kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 768px) {

  .hero, .ecosystem-grid, .service-grid, .footer-grid, .kpi-grid { grid-template-columns: 1fr; }
  .section { padding-block: var(--space-6); }
}
/* SUAR has one intentional dark palette regardless of operating-system theme.
 * Component surfaces and foregrounds are owned by the shared token system. */