/* CarNova07 Instagram campaign images & high-precision graphics */
.product-photo {
  width: 100%;
  height: 280px;
  object-fit: cover;
  object-position: center;
  border-radius: 14px;
  filter: contrast(1.05) saturate(0.9);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
}

.product-card:hover .product-photo {
  transform: scale(1.06);
  filter: contrast(1.08) saturate(1.05);
}

/* Editorial & technical HUD graphics */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.25;
  background-image: linear-gradient(rgba(56, 189, 248, 0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(56, 189, 248, 0.2) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: linear-gradient(90deg, transparent 0, black 58%, transparent 100%);
  transform: perspective(440px) rotateX(67deg) translateY(38%);
  transform-origin: center bottom;
}

.hero-hud {
  position: absolute;
  z-index: 4;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font: 10px/1.6 var(--mono);
  letter-spacing: 1.5px;
  color: rgba(226, 232, 240, 0.8);
}

.hero-hud-left {
  left: 6vw;
  top: 24vh;
}

.hud-line {
  height: 44px;
  width: 2px;
  background: linear-gradient(var(--blue), transparent);
  box-shadow: 0 0 10px var(--blue);
}

.hero-hud-right {
  right: 6vw;
  bottom: 14vh;
  align-items: center;
}

.hero-hud-right small {
  text-align: right;
}

.hud-orbit {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(56, 189, 248, 0.6);
  border-radius: 50%;
  position: relative;
  color: var(--blue);
  font-size: 14px;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.2);
}

.hud-orbit:before, .hud-orbit:after, .hud-orbit i {
  content: '';
  position: absolute;
  border-radius: 50%;
  inset: 6px;
  border: 1px dashed rgba(56, 189, 248, 0.5);
  animation: hudSpin 9s linear infinite;
}

.hud-orbit:after {
  inset: -6px;
  border-style: dotted;
  animation-direction: reverse;
  animation-duration: 12s;
}

.hud-orbit i {
  inset: auto;
  width: 5px;
  height: 5px;
  background: var(--blue);
  border: 0;
  top: -2px;
  left: 50%;
  box-shadow: 0 0 12px 3px var(--blue);
}

.hero-scan {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  height: 2px;
  top: -5%;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.85), transparent);
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.9);
  animation: scan 7s ease-in-out infinite;
  pointer-events: none;
}

@keyframes hudSpin {
  to { transform: rotate(360deg); }
}

@keyframes scan {
  0%, 100% { top: 5%; opacity: 0; }
  25%, 70% { opacity: 0.85; }
  50% { top: 90%; opacity: 0.15; }
}

@media (max-width: 991px) {
  .product-photo {
    height: 220px;
    border-radius: 12px;
  }
  .hero-hud-left {
    display: none !important;
  }
  .hero-hud-right {
    right: 16px;
    bottom: 16px;
    transform: scale(0.7);
    transform-origin: right bottom;
  }
}

@media (max-width: 560px) {
  .hero-grid {
    background-size: 40px 40px;
    opacity: 0.12;
  }
}