/*! AI Systems page (site-aisystems-*) — scoped additions only. */

/* ---- Hero: decorative pattern texture standing in for the un-harvested
   background video (see site-aisystems-hero.php header note). ---- */
.aisys-hero { position: relative; overflow: hidden; }
.aisys-hero-pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}
.aisys-hero .hero-inner { position: relative; z-index: 1; }
.aisys-unmute-note {
  font-family: var(--mono-font);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
  display: inline-flex;
  align-items: center;
}
body.lang-ar .aisys-unmute-note { font-family: var(--ar-body); letter-spacing: 0.02em; text-transform: none; }

/* ---- Stats: 4 items, 2-col mobile / 4-col desktop (both divide evenly) ---- */
.aisys-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--bg-2);
  overflow: hidden;
  margin-top: 56px;
  box-shadow: 0 24px 64px -32px rgba(10, 10, 15, 0.16);
}
@media (min-width: 720px) { .aisys-stats-grid { grid-template-columns: repeat(4, 1fr); } }
.aisys-stats-grid .number-cell {
  padding: clamp(28px, 3vw, 44px);
  border-inline-end: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
@media (max-width: 719px) {
  .aisys-stats-grid .number-cell:nth-child(2n) { border-inline-end: none; }
  .aisys-stats-grid .number-cell:nth-last-child(-n+2) { border-bottom: none; }
}
@media (min-width: 720px) {
  .aisys-stats-grid .number-cell:last-child { border-inline-end: none; }
  .aisys-stats-grid .number-cell { border-bottom: none; }
}

/* ---- Client logos: light-bg static grid, plain <img> (no mask tint --
   real company wordmarks stay legible, see file header note). ---- */
.aisys-logos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  overflow: hidden;
  margin-top: 40px;
}
@media (min-width: 600px) { .aisys-logos-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 880px) { .aisys-logos-grid { grid-template-columns: repeat(5, 1fr); } }
.aisys-logo-cell {
  aspect-ratio: 2 / 1;
  background: var(--bg-2);
  display: grid;
  place-items: center;
  padding: 20px;
  min-width: 0;
  /* Same fix as .site-client-cell (clients.css): without min-height:0 a
     near-square logo's content-based min-height beats aspect-ratio and the
     cell overflows its row (measured 87px-186px instead of a uniform 87px
     at 2-col mobile), producing a ragged grid. */
  min-height: 0;
}
.aisys-logo-cell img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.3s var(--ease-out);
}
.aisys-logo-cell:hover img { opacity: 1; }