.offer-visual {
  position: relative;
  min-width: 0;
  min-height: 500px;
}

.card-swap {
  perspective: 900px;
  overflow: visible;
}

.card-swap-card {
  position: absolute;
  top: 62%;
  left: 38%;
  width: min(74%, 480px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 28px 65px -30px #000;
  transform-style: preserve-3d;
  transform-origin: center;
  will-change: transform;
  backface-visibility: hidden;
}

@media (min-width: 981px) {
  .offer-hero.bundle .offer-visual { width: calc(100% + 60px); margin-left: -60px; }
  .offer-hero.bundle .card-swap-card { left: 67%; }
}

.card-swap-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

.card-swap-card span {
  position: absolute;
  left: 10px;
  bottom: 9px;
  padding: 5px 8px;
  border-radius: 5px;
  background: #0b0d10e8;
  font-size: 9px;
  font-weight: 700;
}

@media (max-width: 980px) {
  .offer-visual { width: 100%; max-width: 740px; }
  .offer-hero.bundle .offer-visual { order: 2; }
}

@media (max-width: 650px) {
  .offer-visual { min-height: 380px; }
  .card-swap { width: 150%; margin-left: -25%; transform: scale(.62); }
  .card-swap-card { left: 50%; width: min(78%, 440px); }
}

@media (prefers-reduced-motion: reduce) {
  .card-swap-card { will-change: auto; }
}