.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 540px;
  display: flex;
  align-items: center;
  background: #111;
}

.hero-slides,
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-slides span {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transform: scale(1.04);
  animation: hero-show 42s infinite;
}

.hero-slides span:nth-child(1) { background-image: url('images/hero-road-blocker.jpg'); animation-delay: 0s; }
.hero-slides span:nth-child(2) { background-image: url('images/hero-cctv-project.jpg'); animation-delay: 6s; }
.hero-slides span:nth-child(3) { background-image: url('images/hero-road-safety.jpg'); animation-delay: 12s; }
.hero-slides span:nth-child(4) { background-image: url('images/hero-control-panel.jpg'); animation-delay: 18s; }
.hero-slides span:nth-child(5) { background-image: url('images/hero-perimeter-fence.jpg'); animation-delay: 24s; }
.hero-slides span:nth-child(6) { background-image: url('images/hero-security-fence.jpg'); animation-delay: 30s; }
.hero-slides span:nth-child(7) { background-image: url('images/hero-uvis.jpg'); animation-delay: 36s; }

.hero-overlay {
  z-index: -1;
  background: linear-gradient(90deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.78) 48%, rgba(0,0,0,.3) 100%);
}

.hero-content { position: relative; }
.hero p:not(.eyebrow) { max-width: 750px; color: #f0f0f0; line-height: 1.45; }
.hero-products { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0; }
.hero-products span { border: 1px solid rgba(255,242,0,.7); background: rgba(0,0,0,.52); padding: 8px 11px; color: #fff; font-size: 12px; font-weight: 800; }

@keyframes hero-show {
  0% { opacity: 0; transform: scale(1.04); }
  3%, 12% { opacity: 1; transform: scale(1); }
  15%, 100% { opacity: 0; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slides span { animation: none; }
  .hero-slides span:first-child { opacity: 1; }
}

@media (max-width: 560px) {
  .hero { min-height: 570px; }
  .hero-overlay { background: rgba(0,0,0,.76); }
}