.pagehero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #061525;
  background-image: linear-gradient(90deg, rgba(3, 18, 33, .98) 0%, rgba(5, 28, 48, .91) 39%, rgba(5, 27, 46, .35) 70%, rgba(5, 22, 39, .12) 100%), var(--hero-image);
  background-position: center;
  background-size: cover;
}
.pagehero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 38%, rgba(84, 200, 255, .12) 53%, transparent 68%);
  transform: translateX(-120%);
  animation: heroSheen 9s ease-in-out infinite;
}
.pagehero .wrap { position: relative; z-index: 1; }
.pagehero-products { --hero-image: url('../images/heroes/hero-products.webp'); }
.pagehero-about { --hero-image: url('../images/heroes/hero-about.webp'); }
.pagehero-contact { --hero-image: url('../images/heroes/hero-contact.webp'); }
@keyframes heroSheen {
  0%, 62% { transform: translateX(-120%); }
  88%, 100% { transform: translateX(120%); }
}
@media (max-width: 820px) {
  .pagehero { background-position: 64% center; }
  .pagehero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(3, 18, 33, .25); }
}
@media (prefers-reduced-motion: reduce) { .pagehero::after { animation: none; } }
.card-image { position: relative; overflow: hidden; aspect-ratio: 1/1; cursor: zoom-in; background: #eef5f9; }
.card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.card-image:hover { cursor: zoom-in; }
.card-image:hover img { transform: scale(1.55); }
.card-image > span { position: absolute; right: 12px; bottom: 12px; padding: 8px 11px; border-radius: 999px; color: white; background: rgba(4,21,36,.76); font-size: 10px; font-weight: 900; letter-spacing: .06em; backdrop-filter: blur(7px); }
@media (prefers-reduced-motion: reduce) { .card-image img { transition: none; } }