.home-hero[data-current-slide="hardware"] .home-visual {
  inset: 18px 2% auto auto;
  width: min(76%, 1100px);
  aspect-ratio: 2;
}

.home-visual .hardware-slide::after { background: none; }
.hardware-stage { position: absolute; inset: 0; isolation: isolate; }
.home-visual .hardware-stage .hardware-background { object-fit: fill; }
.home-visual .hardware-stage .hardware-product {
  inset: auto;
  left: var(--product-x);
  top: var(--product-y);
  width: var(--product-width);
  height: auto;
  z-index: var(--product-layer);
  object-fit: contain;
  filter: drop-shadow(0 12px 8px rgb(0 0 0 / 30%));
}

.home-hero[data-current-slide="hardware"] .home-visual::after {
  z-index: 11;
  background: linear-gradient(90deg, #111315 0%, rgb(17 19 21 / 80%) 10%, transparent 43%, transparent 95%, #111315 100%), linear-gradient(0deg, #111315 0%, transparent 10%, transparent 97%, #111315 100%);
}

@media (max-width: 600px) {
  .home-hero .hero-scene-note { min-height: 240px; }
  .home-hero .home-visual,
  .home-hero[data-current-slide="hardware"] .home-visual {
    inset: auto 0 206px;
    width: 100%;
    height: 210px;
    aspect-ratio: auto;
    overflow: hidden;
  }
  /* Crop only the empty left background; all product layers share one stage. */
  .hardware-stage { inset: 0 0 auto auto; width: 420px; height: 210px; }
  .home-hero[data-current-slide="hardware"] .home-visual::after {
    background: linear-gradient(0deg, #111315 0%, transparent 10%);
  }
}