/* Слайд карусели «Подписки PS Plus» — общий для магазина и сайта (static/hero-subs.js).
   Построен как слайд карт пополнения (веер + подпись), цвета плашек — тарифы с полки:
   Essential светлый, Extra жёлто-оранжевый, Deluxe чёрный с золотом. */
.hero-slide--subs { padding: 0; overflow: hidden; }
.hero-subs {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 26px 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border-radius: inherit;
  background:
    radial-gradient(70% 50% at 50% 38%, rgba(0, 112, 255, 0.42), transparent 70%),
    linear-gradient(160deg, #0b1d4a 0%, #08143a 52%, #050b22 100%);
  container-type: inline-size;
}
.hero-subs::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.5;
  background: repeating-radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 13px);
  -webkit-mask-image: radial-gradient(circle at 50% 80%, #000 0 60%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 80%, #000 0 60%, transparent 78%);
}
/* Веер: передняя плашка прямая, задние уходят вправо-вверх (как у карт пополнения). */
.hero-subs-stack {
  position: relative;
  width: min(74%, 260px);
  aspect-ratio: 2.1 / 1;
  margin: 4px 44px 0 0;
}
.hero-subs-plate {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  overflow: hidden;
  transform: translate(calc(var(--i) * 22px), calc(var(--i) * -16px))
             rotate(calc(var(--i) * 6deg)) scale(calc(1 - var(--i) * 0.05));
  transform-origin: 10% 90%;
  z-index: calc(10 - var(--i));
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.hero-subs-plate::after {                 /* блик — та же диагональ, что на плашках полки */
  content: "";
  position: absolute;
  inset: -40% -10%;
  background: linear-gradient(105deg, transparent 46%, rgba(255, 255, 255, 0.35) 50%, transparent 54%);
}
.hero-subs-plate.is-essential { background: linear-gradient(135deg, #ffffff 0%, #e6f1ff 55%, #c9e6ff 100%); color: #0b1530; }
.hero-subs-plate.is-extra { background: linear-gradient(135deg, #ffe66d 0%, #ffc53d 50%, #ff8a2b 100%); color: #1a1205; }
.hero-subs-plate.is-deluxe { background: linear-gradient(135deg, #0d0d0f 0%, #2a2216 55%, #b8862b 100%); color: #f6e7c1; }
.hero-subs-plate-name {
  position: relative;
  z-index: 1;
  font-size: clamp(18px, 8cqw, 28px);
  font-weight: 900;
  letter-spacing: 0.08em;
}
.hero-subs-caption {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.hero-subs-kicker {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hero-subs-title {
  font-size: 30px;
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: 0.02em;
  background: linear-gradient(92deg, #fff 0%, #7cc4ff 60%, #3aa0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.45));
}
.hero-subs-price { margin-top: 4px; color: rgba(255, 255, 255, 0.9); font-size: 14px; font-weight: 700; }
.hero-subs-price b { color: #fff; font-size: 17px; font-weight: 900; }
.hero-subs-fine { color: rgba(255, 255, 255, 0.55); font-size: 11px; font-weight: 600; }