/*
 * Блок «Что мы предлагаем?» на главной: два баннера вместо четырёх карточек-тезисов.
 * Слева — бесконечные ленты способов выплаты, справа — телефон с уведомлениями
 * о зачислении. Обе анимации на чистом CSS, без скриптов.
 */

.skc-offer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}

/*
 * Текст и картинка — одна центрированная пара, а не прижатые к краям блоки:
 * иначе на широком экране весь прирост ширины уходил в пустоту между ними.
 */
.skc-offer-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  /* Высота именно задана, а не выведена из содержимого: лента стоит в потоке, и от
     её собственной высоты (три набора плиток) карточка растянулась бы на экран. */
  height: 340px;
  overflow: hidden;
  border: 1px solid #2a2a2e;
  border-radius: 12px;
  background: linear-gradient(180deg, #16161a 0%, #121214 100%);
  transition: border-color .5s;
}
.skc-offer-card:hover { border-color: rgba(34, 209, 126, .55) }

/* Свечение-подложка и верхняя линия — как у карточек «Почему SkinsFlux?». */
.skc-offer-card::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -80px;
  width: 320px;
  height: 320px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: hsla(150, 84%, 42%, .5);
  filter: blur(64px);
  opacity: .22;
  pointer-events: none;
  transition: opacity .5s;
}
.skc-offer-card:hover::before { opacity: .5 }
.skc-offer-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, #22d17e 50%, transparent);
  opacity: .5;
  transition: opacity .5s;
}
.skc-offer-card:hover::after { opacity: 1 }

/* Уголки-скобки, тот же приём, что у соседних блоков главной. */
.skc-offer-corner { position: absolute; z-index: 3; opacity: .4; transition: opacity .5s }
.skc-offer-card:hover .skc-offer-corner { opacity: 1 }
.skc-offer-corner.tl { top: 10px; left: 10px }
.skc-offer-corner.tr { top: 10px; right: 10px; transform: rotate(90deg) }
.skc-offer-corner.br { right: 10px; bottom: 10px; transform: rotate(180deg) }
.skc-offer-corner.bl { bottom: 10px; left: 10px; transform: rotate(-90deg) }

.skc-offer-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 0 1 340px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  padding: 34px 0;
}
.skc-offer-copy h3 {
  margin: 0;
  color: #fff;
  font-family: var(--font-display, inherit);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.skc-offer-copy h3 b { color: #22d17e; font-weight: inherit }
.skc-offer-copy p {
  margin: 0;
  color: rgba(255, 255, 255, .5);
  font-size: 13.5px;
  line-height: 1.55;
  text-wrap: pretty;
}
.skc-offer-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  margin-top: 6px;
  padding: 0 20px;
  border-radius: 8px;
  background: linear-gradient(180deg, #3eff9e, #14c271);
  box-shadow: 0 10px 26px -12px rgba(62, 255, 158, .6);
  color: #0b0e0c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .3s ease-in-out, filter .3s ease-in-out, box-shadow .3s ease-in-out;
}
.skc-offer-btn:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 16px 36px -10px rgba(62, 255, 158, .8) }
.skc-offer-btn:active { transform: scale(.97) }
.skc-offer-btn svg { width: 14px; height: 14px }

/* ---- левый баннер: ленты способов выплаты ------------------------------- */

.skc-mq {
  position: relative;
  z-index: 1;
  display: flex;
  flex: none;
  align-self: stretch;
  gap: 18px;
  pointer-events: none;
}
.skc-mq-col { width: 78px; height: 100%; overflow: hidden }
/* Третья лента появляется только там, где для неё есть место. */
.skc-mq-col.extra { display: none }
.skc-mq-track {
  display: flex;
  flex-direction: column;
  gap: var(--mq-gap, 18px);
  animation: skc-mq 26s linear infinite;
  will-change: transform;
}
.skc-mq-col.reverse .skc-mq-track { animation-direction: reverse }

/*
 * В ленте один и тот же набор повторён трижды, поэтому сдвиг ровно на треть
 * высоты возвращает картинку в исходное положение — склейка незаметна.
 * Поправка на зазор нужна, иначе на стыке набегает лишний отступ.
 */
@keyframes skc-mq {
  from { transform: translateY(0) }
  to { transform: translateY(calc(-100% / 3 - var(--mq-gap, 18px) / 3)) }
}

.skc-pay-tile {
  display: grid;
  width: 78px;
  height: 78px;
  flex: none;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 16px;
  background: linear-gradient(180deg, #1b1b20, #141418);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.skc-pay-tile svg { display: block; width: 38px; height: 38px }
.skc-pay-tile.wide svg { width: 52px; height: auto }
/*
 * Все значки в фирменных цветах. Оттенки карт и кошельков подняты по светлоте:
 * фирменные синие (#1434CB у Visa, #003087 у PayPal) на почти чёрной плитке
 * читаются как грязное пятно.
 */
.skc-pay-tile.coin svg { width: 42px; height: 42px }
/* У значков из первого экрана цвет стоял на самом <svg>, а не на путях, поэтому
   красим пути: иначе они падают в чёрный по умолчанию. */
.skc-pay-tile.visa svg path { fill: #2B5CFF }
.skc-pay-tile.paypal svg path { fill: #1C8CF0 }
.skc-pay-tile.mir svg path { fill: #41B45E }
/*
 * Фирменная марка СБП: восемь граней своим цветом. Порядок путей в файле
 * geometрически проверен — nth-of-type идёт слева направо и сверху вниз,
 * как в оригинальном логотипе.
 */
.skc-pay-tile.sbp svg path:nth-of-type(1) { fill: #5B57A2 }  /* левая грань, верх */
.skc-pay-tile.sbp svg path:nth-of-type(2) { fill: #D1335B }  /* правый внутренний клин */
.skc-pay-tile.sbp svg path:nth-of-type(3) { fill: #F3B52E }  /* верхняя перемычка */
.skc-pay-tile.sbp svg path:nth-of-type(4) { fill: #EF8B2C }  /* верхний клин */
.skc-pay-tile.sbp svg path:nth-of-type(5) { fill: #7DB832 }  /* нижняя перемычка */
.skc-pay-tile.sbp svg path:nth-of-type(6) { fill: #2285C6 }  /* диагональ */
.skc-pay-tile.sbp svg path:nth-of-type(7) { fill: #2F7D3E }  /* нижний клин */
.skc-pay-tile.sbp svg path:nth-of-type(8) { fill: #8E4C9E }  /* левая грань, низ */
/* Марка узкая и высокая — размер задаём по высоте, иначе рядом с круглыми
   значками она выглядит мельче. */
.skc-pay-tile.sbp svg { width: 33px; height: 40px }
.skc-pay-tile.usdt svg circle { fill: #26a17b }
.skc-pay-tile.usdc svg circle { fill: #2775ca }
.skc-pay-tile.eth svg circle { fill: #627eea }
.skc-pay-tile.usdt svg path, .skc-pay-tile.usdc svg path, .skc-pay-tile.eth svg path { fill: #fff }
.skc-pay-tile.sol svg circle { fill: #15151a }
.skc-pay-tile.sol svg path { fill: #14f195 }
.skc-pay-tile.btc svg path { fill: #F7931A }
.skc-pay-tile.ltc svg path { fill: #4D82C9 }

/* ---- правый баннер: телефон -------------------------------------------- */

/* Телефон стоит в потоке, но утоплен за нижний край карточки. */
.skc-phone-wrap {
  position: relative;
  z-index: 1;
  flex: none;
  align-self: flex-end;
  margin-bottom: -118px;
  pointer-events: none;
}
.skc-phone {
  position: relative;
  width: 248px;
  height: 380px;
  border-radius: 42px;
  padding: 3px;
  background: linear-gradient(145deg, #4a5368, #161b29 40%, #0b0f1a);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .7);
}
.skc-phone-side { position: absolute; width: 3px; border-radius: 2px; background: #2a3142 }
.skc-phone-side.a { left: -3px; top: 84px; height: 26px }
.skc-phone-side.b { left: -3px; top: 120px; height: 40px }
.skc-phone-side.c { right: -3px; top: 108px; height: 58px }
.skc-phone-frame { height: 100%; border-radius: 39px; padding: 8px; background: #04060c }
.skc-phone-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 32px;
  background: linear-gradient(180deg, #0e3326 0%, #0a1f18 55%, #060d0a 100%);
}
.skc-phone-status {
  position: absolute;
  inset: 13px 20px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
}
.skc-phone-status span { display: flex; align-items: center; gap: 5px }
.skc-phone-island {
  position: absolute;
  left: 50%;
  top: 9px;
  width: 76px;
  height: 23px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
}

.skc-phone-page { position: absolute; inset: 0; animation: skc-phone-page 11s linear infinite }
.skc-phone-date {
  margin-top: 52px;
  color: rgba(255, 255, 255, .8);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}

.skc-notif {
  position: absolute;
  inset: 82px 8px auto;
  display: flex;
  height: 56px;
  align-items: center;
  gap: 9px;
  padding: 0 9px;
  border-radius: 15px;
  background: #16211c;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .6);
  outline: 1px solid rgba(255, 255, 255, .06);
}
.skc-notif-icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: none;
  place-items: center;
  border-radius: 9px;
  background: #0d1512;
  outline: 1px solid rgba(255, 255, 255, .1);
}
.skc-notif-icon img { width: 22px; height: 22px }
.skc-notif-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; line-height: 1.2 }
.skc-notif-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px }
.skc-notif-head b { overflow: hidden; color: #fff; font-size: 11.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis }
.skc-notif-head i { flex: none; color: rgba(255, 255, 255, .45); font-size: 10px; font-style: normal }
.skc-notif-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; color: rgba(255, 255, 255, .7); font-size: 11.5px }
.skc-notif-sum i { flex: none; color: rgba(255, 255, 255, .4); font-size: 10px; font-style: normal }
.skc-notif-sum b { color: #3eff9e; font-weight: 700 }

/* ---- сцена на экране телефона ------------------------------------------
 * Один цикл 11 с: пользователь отмечает скины в инвентаре, жмёт «Продать»,
 * экран сменяется заблокированным, и приходят уведомления о зачислении.
 * Каждый элемент крутит свою анимацию той же длины, а момент события задан
 * процентом (или отрицательной задержкой), поэтому сцена не рассинхронизируется
 * и обходится без скриптов.
 */
.skc-phone-app {
  position: absolute;
  /* Нижняя треть телефона утоплена за край карточки, поэтому сцена живёт в
     верхних 204 px: иначе кнопка «Продать» оказывается в невидимой части. */
  inset: 44px 0 auto;
  height: 204px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 10px 10px;
  animation: skc-app-page 11s linear infinite;
}
.skc-app-bar { display: flex; align-items: center; gap: 7px; padding: 2px 2px 0 }
.skc-app-bar img { width: 17px; height: 17px }
.skc-app-bar span { color: #fff; font-size: 11.5px; font-weight: 700 }
.skc-app-bar b { margin-left: auto; padding: 2px 7px; border-radius: 999px; background: rgba(62, 255, 158, .12); color: #3eff9e; font-size: 9px; font-weight: 700; letter-spacing: .06em }

.skc-app-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px }
.skc-app-item {
  position: relative;
  display: flex;
  height: 58px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
}
.skc-app-item img { width: 56px; height: 26px; object-fit: contain }
.skc-app-item i { color: #3eff9e; font-size: 10px; font-style: normal; font-weight: 700 }
/* Галочка выбора появляется вместе с подсветкой рамки. */
.skc-app-item::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 5px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #3eff9e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23071009' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 9px no-repeat;
  opacity: 0;
}
.skc-app-item.m9, .skc-app-item.kar, .skc-app-item.bfk { animation: skc-app-pick 11s linear infinite }
.skc-app-item.m9::after, .skc-app-item.kar::after, .skc-app-item.bfk::after { animation: skc-app-check 11s linear infinite }
/* Отрицательная задержка сдвигает фазу: предметы отмечаются один за другим. */
.skc-app-item.kar, .skc-app-item.kar::after { animation-delay: -10.45s }
.skc-app-item.bfk, .skc-app-item.bfk::after { animation-delay: -9.9s }

.skc-app-cta {
  display: flex;
  height: 34px;
  margin-top: auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 10px;
  background: linear-gradient(180deg, #3eff9e, #14c271);
  color: #06120c;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  animation: skc-app-tap 11s linear infinite;
}
/*
 * Сумма растёт по мере выбора. Значения лежат стопкой, и каждое показывается
 * в своём окне цикла. Итоговое (самое длинное) остаётся в потоке и задаёт
 * ширину — иначе фиксированная ширина обрезала бы крупные суммы.
 */
.skc-app-sum { position: relative; display: inline-block; text-align: right }
.skc-app-sum i { font-style: normal; font-variant-numeric: tabular-nums }
.skc-app-sum .s0, .skc-app-sum .s1, .skc-app-sum .s2 { position: absolute; inset: 0; opacity: 0 }
/* Со скриптом считает одно живое число, стопка заготовок прячется. */
.skc-app-sum.is-live i { opacity: 0 }
.skc-app-sum.is-live .skc-sum-live { position: absolute; inset: 0; opacity: 1; animation: none }
.skc-app-sum .s0 { animation: skc-sum-0 11s linear infinite }
.skc-app-sum .s1 { animation: skc-sum-1 11s linear infinite }
.skc-app-sum .s2 { animation: skc-sum-2 11s linear infinite }
.skc-app-sum .s3 { opacity: 0; animation: skc-sum-3 11s linear infinite }

@keyframes skc-app-page {
  0% { opacity: 0; transform: translateX(28%); animation-timing-function: cubic-bezier(.2, .9, .3, 1) }
  4% { opacity: 1; transform: translateX(0) }
  38% { opacity: 1; transform: translateX(0); animation-timing-function: cubic-bezier(.55, 0, .75, .2) }
  43%, 100% { opacity: 0; transform: translateX(-115%) }
}
@keyframes skc-app-pick {
  0%, 9% { border-color: rgba(255, 255, 255, .07) }
  11%, 100% { border-color: rgba(62, 255, 158, .55) }
}
@keyframes skc-app-check {
  0%, 9% { opacity: 0; transform: scale(.4) }
  12%, 100% { opacity: 1; transform: scale(1) }
}
/* Пороги совпадают с моментами выбора предметов: 9%, 14%, 19% цикла. */
@keyframes skc-sum-0 { 0%, 8.9% { opacity: 1 } 9%, 100% { opacity: 0 } }
@keyframes skc-sum-1 { 0%, 8.9% { opacity: 0 } 9%, 13.9% { opacity: 1 } 14%, 100% { opacity: 0 } }
@keyframes skc-sum-2 { 0%, 13.9% { opacity: 0 } 14%, 18.9% { opacity: 1 } 19%, 100% { opacity: 0 } }
@keyframes skc-sum-3 { 0%, 18.9% { opacity: 0 } 19%, 100% { opacity: 1 } }
/* Нажатие на «Продать» — короткое утапливание кнопки перед сменой экрана. */
@keyframes skc-app-tap {
  0%, 33% { transform: scale(1); filter: brightness(1) }
  35% { transform: scale(.955); filter: brightness(1.15) }
  37%, 100% { transform: scale(1); filter: brightness(1) }
}

@keyframes skc-phone-page {
  0%, 38% { opacity: 0; transform: translateX(35%) }
  39% { opacity: 0; transform: translateX(35%); animation-timing-function: cubic-bezier(.2, .9, .3, 1) }
  44% { opacity: 1; transform: translateX(0) }
  94% { opacity: 1; transform: translateX(0); animation-timing-function: cubic-bezier(.55, 0, .75, .2) }
  100% { opacity: 0; transform: translateX(-115%) }
}
.skc-notif.one { animation: skc-notif-one 11s linear infinite }
.skc-notif.two { animation: skc-notif-two 11s linear infinite }
@keyframes skc-notif-one {
  0%, 48% { opacity: 0; transform: translateY(140%) scale(.94); animation-timing-function: cubic-bezier(.2, .9, .3, 1) }
  52% { opacity: 1; transform: translateY(-6%) scale(1) }
  54%, 66% { opacity: 1; transform: translateY(0) scale(1); animation-timing-function: cubic-bezier(.2, .9, .3, 1) }
  70%, 100% { opacity: 1; transform: translateY(62px) scale(1) }
}
@keyframes skc-notif-two {
  0%, 66% { opacity: 0; transform: translateY(140%) scale(.94); animation-timing-function: cubic-bezier(.2, .9, .3, 1) }
  70% { opacity: 1; transform: translateY(-6%) scale(1) }
  72%, 100% { opacity: 1; transform: translateY(0) scale(1) }
}

/* ---- адаптив ------------------------------------------------------------ */

@media (min-width: 1280px) {
  .skc-mq-col.extra { display: block }
}
@media (max-width: 1100px) {
  .skc-offer { grid-template-columns: 1fr }
  .skc-offer-card { height: 360px }
  .skc-offer-copy { flex-basis: 420px }
  .skc-mq-col.extra { display: block }
}
@media (max-width: 760px) {
  /*
   * На узком экране вертикальные ленты перекрывали бы текст, поэтому у левого
   * баннера лента ложится одной горизонтальной строкой под текстом: разметка та
   * же, меняются только направление дорожки и ось сдвига.
   */
  .skc-offer-card { height: auto; flex-direction: column; align-items: stretch; gap: 0 }
  .skc-mq-col { height: auto }
  .skc-offer-copy { flex: 0 0 auto; padding: 24px 20px }
  .skc-mq {
    position: static;
    width: 100%;
    margin-top: auto;
    padding: 0 0 18px;
    gap: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  .skc-mq-col { width: 100%; overflow: hidden }
  .skc-mq-col.reverse, .skc-mq-col.extra { display: none }
  /*
   * Ширина по содержимому обязательна: сдвиг в кадрах задан в процентах от самой
   * дорожки, а в строке она растягивалась лишь на ширину колонки — круг выходил
   * 114px вместо 852, и лента почти стояла на месте.
   */
  .skc-mq-track { flex-direction: row; width: max-content; animation-name: skc-mq-h; animation-duration: 20s }
  .skc-pay-tile { width: 60px; height: 60px; border-radius: 13px }
  .skc-pay-tile svg { width: 29px; height: 29px }
  .skc-pay-tile.wide svg { width: 40px }
  .skc-pay-tile.coin svg { width: 33px; height: 33px }
  .skc-pay-tile.sbp svg { width: 26px; height: 32px }

  /*
   * На телефоне экран макета видно почти целиком, и сцена, рассчитанная на
   * настольный вид, занимала лишь верхнюю часть: под кнопкой «Продать» оставалась
   * пустая полоса. Сцена становится выше, карточки предметов — крупнее, а кнопка
   * (она прижата к низу) опускается вместе с нижней границей.
   */
  .skc-phone-app { height: 260px }
  .skc-app-grid { gap: 8px }
  .skc-app-item { height: 72px; gap: 3px }
  .skc-app-item img { width: 68px; height: 32px }
  .skc-app-item i { font-size: 11px }
  .skc-app-item::after { right: 6px; top: 6px; width: 15px; height: 15px; background-size: 10px }
  .skc-app-cta { height: 38px; font-size: 11.5px }

  /* Телефон уходит под нижний край: видно экран с обоими уведомлениями. */
  .skc-offer-phone { min-height: 430px }
  .skc-offer-phone .skc-phone-wrap { margin-bottom: -150px }
  .skc-offer-phone .skc-offer-copy { padding-bottom: 8px }
  .skc-phone-wrap {
    align-self: center;
    margin: 4px auto -150px;
    transform: scale(.82);
    transform-origin: top center;
  }
}
@keyframes skc-mq-h {
  from { transform: translateX(0) }
  to { transform: translateX(calc(-100% / 3 - var(--mq-gap, 18px) / 3)) }
}
@media (max-width: 420px) {
  .skc-phone-wrap { transform: scale(.74) }
}

/* ---- вариант 2: две полосы во всю ширину (?offer=2) ----------------------
 * Карточки идут одна под другой, поэтому каждой достаётся вся ширина блока:
 * лента разворачивается в две горизонтальные строки с крупными плитками, а
 * телефон уезжает влево и становится больше. Разметка та же, меняются только
 * направление дорожек и размеры.
 */
@media (min-width: 761px) {
  html[data-offer="2"] .skc-offer { grid-template-columns: 1fr; gap: 18px }
  html[data-offer="2"] .skc-offer-card { height: 310px; gap: 48px; padding: 0 46px; justify-content: space-between }
  html[data-offer="2"] .skc-offer-copy { flex: 0 0 min(470px, 40%); padding: 34px 0 }
  html[data-offer="2"] .skc-offer-copy h3 { font-size: 27px }
  html[data-offer="2"] .skc-offer-copy p { font-size: 14.5px; max-width: 44ch }
  html[data-offer="2"] .skc-offer-btn { height: 46px; padding: 0 24px; font-size: 12px }

  /* Лента — две встречные горизонтальные строки во всю оставшуюся ширину. */
  html[data-offer="2"] .skc-mq {
    flex: 1 1 auto;
    flex-direction: column;
    align-self: center;
    gap: 16px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
  html[data-offer="2"] .skc-mq-col { width: 100%; height: auto; overflow: hidden }
  html[data-offer="2"] .skc-mq-col.extra { display: none }
  html[data-offer="2"] .skc-mq-track { flex-direction: row; animation-name: skc-mq-h; animation-duration: 38s }
  html[data-offer="2"] .skc-pay-tile { width: 94px; height: 94px; border-radius: 20px }
  html[data-offer="2"] .skc-pay-tile svg { width: 46px; height: 46px }
  html[data-offer="2"] .skc-pay-tile.wide svg { width: 62px; height: auto }
  html[data-offer="2"] .skc-pay-tile.coin svg { width: 50px; height: 50px }
  html[data-offer="2"] .skc-pay-tile.sbp svg { width: 40px; height: 48px }

  /* Телефон слева, текст справа. */
  html[data-offer="2"] .skc-offer-phone { flex-direction: row-reverse; height: 364px }
  html[data-offer="2"] .skc-offer-phone .skc-offer-copy { flex: 0 1 560px }
  html[data-offer="2"] .skc-phone-wrap {
    flex: none;
    /* Утопление подобрано так, чтобы кнопка «Продать» оставалась в видимой части. */
    margin: 0 30px -148px 0;
    transform: scale(1.18);
    transform-origin: bottom center;
  }
}

/* ---- варианты 3–6: две полосы, но не во всю ширину ----------------------
 * Карточки идут одна под другой, как во втором варианте, но ограничены по
 * ширине и выровнены по центру: иначе текст и картинка расходятся по краям и
 * между ними остаётся дыра. Лента при этом крутится вертикально, как в первом.
 */
@media (min-width: 761px) {
  html[data-offer="3"] .skc-offer, html[data-offer="4"] .skc-offer, html[data-offer="5"] .skc-offer, html[data-offer="6"] .skc-offer { grid-template-columns: 1fr; gap: 18px }
  html[data-offer="3"] .skc-offer-card, html[data-offer="4"] .skc-offer-card, html[data-offer="5"] .skc-offer-card, html[data-offer="6"] .skc-offer-card {
    width: 100%;
    max-width: 960px;
    height: 330px;
    margin: 0 auto;
    gap: 38px;
    padding: 0 40px;
    justify-content: center;
  }
  html[data-offer="3"] .skc-offer-copy, html[data-offer="4"] .skc-offer-copy, html[data-offer="5"] .skc-offer-copy, html[data-offer="6"] .skc-offer-copy { flex: 0 1 430px; padding: 32px 0 }
  html[data-offer="3"] .skc-offer-copy h3, html[data-offer="4"] .skc-offer-copy h3, html[data-offer="5"] .skc-offer-copy h3, html[data-offer="6"] .skc-offer-copy h3 { font-size: 25px }
  html[data-offer="3"] .skc-offer-copy p, html[data-offer="4"] .skc-offer-copy p, html[data-offer="5"] .skc-offer-copy p, html[data-offer="6"] .skc-offer-copy p { font-size: 14px; max-width: 42ch }
  html[data-offer="3"] .skc-offer-btn, html[data-offer="4"] .skc-offer-btn, html[data-offer="5"] .skc-offer-btn, html[data-offer="6"] .skc-offer-btn { height: 45px; padding: 0 22px; font-size: 11.5px }

  /* Лента вертикальная, как в первом варианте, но плитки крупнее — места больше. */
  html[data-offer="3"] .skc-mq, html[data-offer="4"] .skc-mq, html[data-offer="5"] .skc-mq, html[data-offer="6"] .skc-mq { flex: none; align-self: stretch; gap: 16px }
  html[data-offer="3"] .skc-mq-col, html[data-offer="4"] .skc-mq-col, html[data-offer="5"] .skc-mq-col, html[data-offer="6"] .skc-mq-col { width: 88px; height: 100% }
  html[data-offer="3"] .skc-mq-col.extra, html[data-offer="4"] .skc-mq-col.extra, html[data-offer="5"] .skc-mq-col.extra, html[data-offer="6"] .skc-mq-col.extra { display: block }
  html[data-offer="3"] .skc-pay-tile, html[data-offer="4"] .skc-pay-tile, html[data-offer="5"] .skc-pay-tile, html[data-offer="6"] .skc-pay-tile { width: 88px; height: 88px; border-radius: 19px }
  html[data-offer="3"] .skc-pay-tile svg, html[data-offer="4"] .skc-pay-tile svg, html[data-offer="5"] .skc-pay-tile svg, html[data-offer="6"] .skc-pay-tile svg { width: 43px; height: 43px }
  html[data-offer="3"] .skc-pay-tile.wide svg, html[data-offer="4"] .skc-pay-tile.wide svg, html[data-offer="5"] .skc-pay-tile.wide svg, html[data-offer="6"] .skc-pay-tile.wide svg { width: 58px; height: auto }
  html[data-offer="3"] .skc-pay-tile.coin svg, html[data-offer="4"] .skc-pay-tile.coin svg, html[data-offer="5"] .skc-pay-tile.coin svg, html[data-offer="6"] .skc-pay-tile.coin svg { width: 47px; height: 47px }
  html[data-offer="3"] .skc-pay-tile.sbp svg, html[data-offer="4"] .skc-pay-tile.sbp svg, html[data-offer="5"] .skc-pay-tile.sbp svg, html[data-offer="6"] .skc-pay-tile.sbp svg { width: 37px; height: 45px }

  /* Телефон слева, текст справа; утопление подобрано под кнопку «Продать». */
  html[data-offer="3"] .skc-offer-phone, html[data-offer="4"] .skc-offer-phone, html[data-offer="5"] .skc-offer-phone, html[data-offer="6"] .skc-offer-phone { flex-direction: row-reverse; height: 342px }
  html[data-offer="3"] .skc-phone-wrap, html[data-offer="4"] .skc-phone-wrap, html[data-offer="5"] .skc-phone-wrap, html[data-offer="6"] .skc-phone-wrap {
    flex: none;
    margin: 0 24px -136px 0;
    transform: scale(1.1);
    transform-origin: bottom center;
  }
}

/* ---- вариант 4: те же полосы со сдвигом в разные стороны (?offer=4) ------
 * Полосы перестают стоять строго друг под другом: лента уходит влево, телефон
 * вправо. Картинки обеих полос оказываются ближе к середине страницы, и взгляд
 * идёт по диагонали, а пустое место работает как воздух, а не как дыра.
 */
@media (min-width: 761px) {
  html[data-offer="4"] .skc-offer-pay { margin-left: 0; margin-right: auto }
  html[data-offer="4"] .skc-offer-phone { margin-left: auto; margin-right: 0 }
}

/* ---- вариант 5: телефон ровно под лентой (?offer=5) ----------------------
 * Полосы разной ширины и со сдвигом подобраны так, чтобы середина телефона
 * пришлась точно под середину ленты: картинки встают в одну вертикаль, а текст
 * расходится по разные стороны.
 *
 *   ширина первой полосы 820 − отступ 40 − лента 296 = лента начинается на 484
 *   484 + (296 − 248)/2 = 508 — середина телефона; минус отступ 40 = сдвиг 468
 */
@media (min-width: 1240px) {
  html[data-offer="5"] .skc-offer-pay { width: 820px; max-width: 820px; margin: 0 auto 0 0 }
  html[data-offer="5"] .skc-offer-phone {
    width: auto;
    max-width: none;
    margin: 0 0 0 468px;
    /* При row-reverse main-end — левый край, поэтому телефон прижимается к нему
       и его положение перестаёт зависеть от длины текста. */
    justify-content: flex-end;
  }
  html[data-offer="5"] .skc-phone-wrap { margin-right: 36px }
}

/* ---- оформление блока: десять вариантов (?offerSkin=1…10) ----------------
 * Меняется только «обёртка» карточек — фон, рамка, свечение, уголки. Раскладка
 * (?offer=1…5) и содержимое остаются прежними, поэтому оформление и раскладку
 * можно примерять независимо друг от друга.
 */

/* 1 — как сейчас: тёмная карточка, зелёное свечение сверху, уголки-скобки. */

/* 2 — без рамки: только мягкая подложка и тень, границы растворены. */
html[data-offer-skin="2"] .skc-offer-card { border-color: transparent; background: radial-gradient(120% 140% at 50% 0%, #17171c, #0e0e11 70%); box-shadow: 0 26px 60px -34px #000 }
html[data-offer-skin="2"] .skc-offer-card::after { display: none }
html[data-offer-skin="2"] .skc-offer-corner { display: none }

/* 3 — градиентная рамка в один пиксель. */
html[data-offer-skin="3"] .skc-offer-card { border-color: transparent; background: linear-gradient(180deg, #16161a, #121214) padding-box, linear-gradient(140deg, rgba(62,255,158,.65), rgba(62,255,158,.06) 45%, rgba(255,255,255,.12)) border-box }
html[data-offer-skin="3"] .skc-offer-card::after { display: none }
html[data-offer-skin="3"] .skc-offer-corner { display: none }

/* 4 — стекло: размытая подложка и светлая полупрозрачная рамка. */
html[data-offer-skin="4"] .skc-offer-card { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.035); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px) }
html[data-offer-skin="4"] .skc-offer-card::before { opacity: .35 }
html[data-offer-skin="4"] .skc-offer-card::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.5) 50%, transparent) }

/* 5 — инженерная сетка на фоне, как в блоке инструментов. */
html[data-offer-skin="5"] .skc-offer-card { background: #0f0f12 }
html[data-offer-skin="5"] .skc-offer-card::before {
  inset: 0; top: 0; width: auto; height: auto; transform: none; border-radius: 0; filter: none; opacity: 1;
  background-image: linear-gradient(rgba(62,255,158,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(62,255,158,.07) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(90% 80% at 50% 0%, #000, transparent 75%);
  mask-image: radial-gradient(90% 80% at 50% 0%, #000, transparent 75%);
}

/* 6 — диагональные полосы, приглушённые. */
html[data-offer-skin="6"] .skc-offer-card { background: #101014 }
html[data-offer-skin="6"] .skc-offer-card::before {
  inset: 0; top: 0; width: auto; height: auto; transform: none; border-radius: 0; filter: none; opacity: .5;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 11px);
  -webkit-mask-image: linear-gradient(100deg, #000 10%, transparent 70%);
  mask-image: linear-gradient(100deg, #000 10%, transparent 70%);
}

/* 7 — акцентная пара: карточка с лентой становится светло-зелёной. */
html[data-offer-skin="7"] .skc-offer-pay { border-color: #9bde00; background: linear-gradient(180deg, #b9ff2e, #9bde00) }
html[data-offer-skin="7"] .skc-offer-pay::before, html[data-offer-skin="7"] .skc-offer-pay::after { display: none }
html[data-offer-skin="7"] .skc-offer-pay .skc-offer-copy h3 { color: #0b1403 }
html[data-offer-skin="7"] .skc-offer-pay .skc-offer-copy h3 b { color: #0b1403; opacity: .62 }
html[data-offer-skin="7"] .skc-offer-pay .skc-offer-copy p { color: rgba(11,20,3,.72) }
html[data-offer-skin="7"] .skc-offer-pay .skc-offer-btn { background: #0b1403; color: #d8ff7a; box-shadow: none }
html[data-offer-skin="7"] .skc-offer-pay .skc-offer-corner path { stroke: #0b1403 }
html[data-offer-skin="7"] .skc-offer-pay .skc-pay-tile { border-color: rgba(11,20,3,.14); background: rgba(11,20,3,.82) }

/* 8 — срезанный угол вместо скругления. */
html[data-offer-skin="8"] .skc-offer-card { border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 28px 100%, 0 calc(100% - 28px)) }
html[data-offer-skin="8"] .skc-offer-corner.bl { display: none }
html[data-offer-skin="8"] .skc-offer-btn { border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px)) }

/* 9 — неоновая рамка: по периметру бежит зелёный блик. */
html[data-offer-skin="9"] .skc-offer-card { border-color: rgba(62,255,158,.28); box-shadow: 0 0 0 1px rgba(62,255,158,.08), 0 0 40px -18px rgba(62,255,158,.55) }
html[data-offer-skin="9"] .skc-offer-card::after {
  inset: -1px; height: auto; border-radius: 13px; opacity: 1;
  background: conic-gradient(from var(--skc-offer-angle, 0deg), transparent 0deg, rgba(62,255,158,.85) 28deg, transparent 70deg);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 1px;
  animation: skc-offer-ring 6s linear infinite;
}
@property --skc-offer-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false }
@keyframes skc-offer-ring { to { --skc-offer-angle: 360deg } }

/* 10 — без карточки: контент лежит прямо на странице, разделяют линии. */
html[data-offer-skin="10"] .skc-offer-card { border: 0; border-radius: 0; background: none; box-shadow: none }
html[data-offer-skin="10"] .skc-offer-card::before { opacity: .14 }
html[data-offer-skin="10"] .skc-offer-card::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); opacity: 1 }
html[data-offer-skin="10"] .skc-offer-corner { display: none }
html[data-offer-skin="10"] .skc-offer-copy { padding-left: 0 }

/* ---- вариант 6: зеркало — обе картинки слева (?offer=6) ------------------
 * Лента и телефон выстроены в одну колонку слева, текст — справа в обеих
 * полосах. Взгляд идёт по прямой сверху вниз, без зигзага.
 */
@media (min-width: 761px) {
  html[data-offer="6"] .skc-offer-pay { flex-direction: row-reverse }
  html[data-offer="6"] .skc-offer-pay .skc-mq { margin-right: 8px }
}

/* ---- вариант 7: неравный ряд (?offer=7) ---------------------------------
 * Карточки рядом, но разной ширины: лента в узкой, телефон в широкой. Телефону
 * нужно больше места, ленте хватает двух колонок.
 */
@media (min-width: 1100px) {
  html[data-offer="7"] .skc-offer { grid-template-columns: 42fr 58fr }
  html[data-offer="7"] .skc-offer-card { height: 356px }
  html[data-offer="7"] .skc-offer-pay .skc-mq-col.extra { display: none }
  html[data-offer="7"] .skc-offer-phone .skc-offer-copy { flex-basis: 360px }
  html[data-offer="7"] .skc-phone-wrap { transform: scale(1.06); transform-origin: bottom center; margin-bottom: -132px }
}

/* ---- вариант 8: лесенка (?offer=8) --------------------------------------
 * Карточки рядом, но вторая опущена: получается ступенька, а блок перестаёт
 * читаться как ровный прямоугольник.
 */
@media (min-width: 1100px) {
  html[data-offer="8"] .skc-offer { align-items: start }
  html[data-offer="8"] .skc-offer-phone { margin-top: 54px }
}

/* ---- вариант 9: один общий баннер (?offer=9) ----------------------------
 * Карточки стыкуются без зазора и общей рамки, поэтому читаются как одна
 * широкая полоса: текст — лента — телефон — текст.
 */
@media (min-width: 1100px) {
  html[data-offer="9"] .skc-offer { gap: 0 }
  html[data-offer="9"] .skc-offer-pay { border-right: 0; border-radius: 12px 0 0 12px }
  html[data-offer="9"] .skc-offer-phone { border-radius: 0 12px 12px 0; flex-direction: row-reverse }
  html[data-offer="9"] .skc-offer-phone .skc-phone-wrap { margin-right: 0; margin-left: -10px }
  /* Свечение общее: два одинаковых пятна на стыке выглядели бы швом. */
  html[data-offer="9"] .skc-offer-pay::before { left: 35% }
  html[data-offer="9"] .skc-offer-phone::before { left: 65% }
  html[data-offer="9"] .skc-offer-corner.tr, html[data-offer="9"] .skc-offer-corner.br { display: none }
  html[data-offer="9"] .skc-offer-phone .skc-offer-corner.tl, html[data-offer="9"] .skc-offer-phone .skc-offer-corner.bl { display: none }
  html[data-offer="9"] .skc-offer-phone .skc-offer-corner.tr, html[data-offer="9"] .skc-offer-phone .skc-offer-corner.br { display: block }
}

/* ---- вариант 10: смещение по диагонали (?offer=10) ----------------------
 * Полосы разъезжаются в разные стороны, но не налезают друг на друга: между
 * ними обычный зазор, а ступенька создаётся только по горизонтали.
 */
@media (min-width: 1240px) {
  html[data-offer="10"] .skc-offer { grid-template-columns: 1fr; gap: 18px }
  html[data-offer="10"] .skc-offer-card { width: 100%; max-width: 900px; height: 330px; padding: 0 40px; gap: 36px }
  html[data-offer="10"] .skc-offer-pay { margin: 0 auto 0 0; flex-direction: row }
  html[data-offer="10"] .skc-offer-phone {
    position: relative;
    z-index: 2;
    margin: 0 0 0 auto;
    flex-direction: row-reverse;
    justify-content: flex-end;
    box-shadow: 0 26px 60px -34px #000;
  }
  html[data-offer="10"] .skc-offer-copy { flex: 0 1 400px }
  html[data-offer="10"] .skc-mq-col.extra { display: block }
  html[data-offer="10"] .skc-phone-wrap { margin: 0 26px -136px 0; transform: scale(1.08); transform-origin: bottom center }
}

/* ---- вариант 11: те же полосы по центру, но во всю ширину (?offer=11) ----
 * Повторяет третий вариант — две полосы друг под другом с вертикальной лентой,
 * — но ширина карточек подогнана под блок «Как это работает?» ниже: там
 * контейнер max-w-[80rem] минус боковые отступы px-8, то есть 1280 − 64 = 1216.
 * Лишнюю ширину забирают текст, лента и зазор между ними, иначе пара осталась
 * бы прежнего размера и вокруг неё появилась пустота.
 */
@media (min-width: 761px) {
  html[data-offer="11"] .skc-offer { grid-template-columns: 1fr; gap: 18px }
  html[data-offer="11"] .skc-offer-card {
    width: 100%;
    max-width: 1216px;
    height: 348px;
    margin: 0 auto;
    gap: 72px;
    padding: 0 56px;
    justify-content: center;
  }
  html[data-offer="11"] .skc-offer-copy { flex: 0 1 580px; padding: 34px 0 }
  html[data-offer="11"] .skc-offer-copy h3 { font-size: 27px }
  html[data-offer="11"] .skc-offer-copy p { font-size: 14.5px; max-width: 46ch }
  html[data-offer="11"] .skc-offer-btn { height: 46px; padding: 0 24px; font-size: 12px }

  /* Лента вертикальная, как в третьем варианте, плитки чуть крупнее. */
  html[data-offer="11"] .skc-mq { flex: none; align-self: stretch; gap: 16px }
  html[data-offer="11"] .skc-mq-col { width: 94px; height: 100% }
  html[data-offer="11"] .skc-mq-col.extra { display: block }
  html[data-offer="11"] .skc-pay-tile { width: 94px; height: 94px; border-radius: 20px }
  html[data-offer="11"] .skc-pay-tile svg { width: 46px; height: 46px }
  html[data-offer="11"] .skc-pay-tile.wide svg { width: 62px; height: auto }
  html[data-offer="11"] .skc-pay-tile.coin svg { width: 50px; height: 50px }
  html[data-offer="11"] .skc-pay-tile.sbp svg { width: 40px; height: 48px }

  /* Телефон слева, текст справа; утопление подобрано под кнопку «Продать». */
  html[data-offer="11"] .skc-offer-phone { flex-direction: row-reverse; height: 358px }
  html[data-offer="11"] .skc-phone-wrap {
    flex: none;
    margin: 0 30px -144px 0;
    transform: scale(1.14);
    transform-origin: bottom center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skc-mq-track, .skc-phone-page, .skc-notif.one, .skc-notif.two,
  .skc-phone-app, .skc-app-item, .skc-app-item::after, .skc-app-cta, .skc-app-sum i,
  html[data-offer-skin="9"] .skc-offer-card::after { animation: none }
  .skc-app-sum .s0, .skc-app-sum .s1, .skc-app-sum .s2 { opacity: 0 }
  /* Без движения показываем итог сценария: экран с зачислениями. */
  .skc-phone-app { opacity: 0 }
  .skc-app-item::after { opacity: 1 }
  .skc-app-sum .s3 { opacity: 1 }
  /* Без движения показываем финальную картину: оба уведомления на своих местах. */
  .skc-notif.one { transform: translateY(62px) }
}

/* Блок далеко внизу страницы: пока он не на экране, анимации внутри не нужны.
   Класс снимает рантайм, когда блок появляется в поле зрения. */
.skc-offer-card.is-idle, .skc-offer-card.is-idle *,
.skc-offer-card.is-idle::before, .skc-offer-card.is-idle::after,
.skc-offer-card.is-idle *::before, .skc-offer-card.is-idle *::after { animation-play-state: paused !important }

/* ---- третий баннер: маркет (?offer3=market) ------------------------------
 * Две встречные колонки живых лотов. Карточки те же по духу, что в маркете:
 * арт, название, цена. Движение — бесконечная дорожка из трёх наборов, как у
 * ленты способов выплаты, поэтому стык не виден.
 */
.skc-shop { display: flex; flex: none; align-self: stretch; gap: 14px; overflow: hidden }
.skc-shop-col { width: 168px; overflow: hidden }
.skc-shop-track { display: flex; flex-direction: column; gap: 12px; animation: skc-shop-up 34s linear infinite }
.skc-shop-col.reverse .skc-shop-track { animation-name: skc-shop-down }
.skc-shop-card {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 10px 10px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 13px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
}
.skc-shop-card img { width: 126px; height: 58px; object-fit: contain }
.skc-shop-card b { max-width: 100%; overflow: hidden; color: #f2f2f4; font-size: 11.5px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis }
.skc-shop-card span { max-width: 100%; overflow: hidden; color: rgba(255, 255, 255, .38); font-size: 10.5px; white-space: nowrap; text-overflow: ellipsis }
.skc-shop-card i { margin-top: 3px; color: #3eff9e; font-size: 12.5px; font-style: normal; font-weight: 800 }
@keyframes skc-shop-up {
  from { transform: translateY(0) }
  to { transform: translateY(calc(-100% / 3 - 4px)) }
}
@keyframes skc-shop-down {
  from { transform: translateY(calc(-100% / 3 - 4px)) }
  to { transform: translateY(0) }
}

/* ---- третий баннер: партнёрская программа (?offer3=ref) ------------------
 * Лесенка уровней: подсветка ползёт снизу вверх за один цикл, вместе с ней
 * загораются ступени и всплывают начисления. Один цикл — 12 с, как у соседей.
 */
.skc-ref { position: relative; display: flex; flex: none; width: 320px; flex-direction: column; gap: 10px; align-self: center }
.skc-ref-label { color: rgba(255, 255, 255, .34); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase }
.skc-ref-ladder { position: relative; display: flex; flex-direction: column-reverse; gap: 7px }
.skc-ref-step {
  display: flex; align-items: center; gap: 10px; padding: 9px 13px;
  border: 1px solid rgba(255, 255, 255, .07); border-radius: 11px;
  background: rgba(255, 255, 255, .025); color: rgba(255, 255, 255, .45);
  animation: skc-ref-step 12s linear infinite;
}
.skc-ref-step b { font-size: 12.5px; font-weight: 800 }
.skc-ref-step u { margin-left: auto; color: #3eff9e; font-size: 12.5px; font-weight: 800; text-decoration: none; opacity: .5 }
.skc-ref-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .18) }
/* Ступени загораются одна за другой: сдвиг фазы — пятая часть цикла. */
.skc-ref-step.s0 { animation-delay: 0s }
.skc-ref-step.s1 { animation-delay: -10.6s }
.skc-ref-step.s2 { animation-delay: -9.2s }
.skc-ref-step.s3 { animation-delay: -7.8s }
.skc-ref-step.s4 { animation-delay: -6.4s }
@keyframes skc-ref-step {
  0%, 6% { border-color: rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .025); color: rgba(255, 255, 255, .45) }
  11%, 94% { border-color: rgba(62, 255, 158, .45); background: rgba(62, 255, 158, .09); color: #fff }
  100% { border-color: rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .025); color: rgba(255, 255, 255, .45) }
}
.skc-ref-step.s0 .skc-ref-dot, .skc-ref-step.s1 .skc-ref-dot, .skc-ref-step.s2 .skc-ref-dot,
.skc-ref-step.s3 .skc-ref-dot, .skc-ref-step.s4 .skc-ref-dot { animation: skc-ref-dot 12s linear infinite; animation-delay: inherit }
@keyframes skc-ref-dot {
  0%, 6% { background: rgba(255, 255, 255, .18); box-shadow: none }
  11%, 94% { background: #3eff9e; box-shadow: 0 0 10px rgba(62, 255, 158, .8) }
  100% { background: rgba(255, 255, 255, .18); box-shadow: none }
}
/* Зелёная полоса слева показывает, до какого уровня дорос партнёр. */
.skc-ref-beam {
  position: absolute; left: -9px; bottom: 0; width: 2px;
  border-radius: 2px; background: linear-gradient(180deg, #3eff9e, rgba(62, 255, 158, .15));
  animation: skc-ref-beam 12s linear infinite;
}
@keyframes skc-ref-beam {
  0%, 6% { height: 10% }
  26% { height: 32% }
  46% { height: 54% }
  66% { height: 76% }
  86%, 94% { height: 100% }
  100% { height: 10% }
}
.skc-ref-chips { position: relative; height: 26px }
.skc-ref-chip {
  position: absolute; left: 0; padding: 4px 10px; border: 1px solid rgba(62, 255, 158, .3);
  border-radius: 999px; background: rgba(62, 255, 158, .1); color: #3eff9e;
  font-size: 11px; font-weight: 800; opacity: 0;
  animation: skc-ref-chip 12s linear infinite;
}
.skc-ref-chip.c1 { left: 92px; animation-delay: -10.4s }
.skc-ref-chip.c2 { left: 184px; animation-delay: -8.8s }
@keyframes skc-ref-chip {
  0% { opacity: 0; transform: translateY(10px) }
  8%, 30% { opacity: 1; transform: translateY(0) }
  40%, 100% { opacity: 0; transform: translateY(-10px) }
}

/* Раскладка 11: третий баннер живёт по тем же правилам, что и первые два. */
@media (min-width: 761px) {
  html[data-offer="11"] .skc-offer-shop, html[data-offer="11"] .skc-offer-ref {
    width: 100%; max-width: 1216px; height: 348px; margin: 0 auto; gap: 72px; padding: 0 56px; justify-content: center;
  }
  html[data-offer="11"] .skc-offer-ref { flex-direction: row-reverse }
}

@media (max-width: 760px) {
  /* Высота обязательна: карточка на телефоне тянется по содержимому, и без неё
     лента разворачивалась во все восемнадцать карточек — баннер вырастал в полтора
     экрана. */
  .skc-shop { height: 300px; padding: 0 16px 18px; gap: 10px }
  .skc-shop-col { width: 50% }
  .skc-shop-card img { width: 100%; height: 52px }
  .skc-ref { width: auto; padding: 0 20px 20px }
}

/* ---- партнёрский баннер, вариант 2: счётчик (?refAnim=2) -----------------
 * Баланс набегает ступенями: значения лежат стопкой и показываются по очереди,
 * рядом меняется уровень, снизу падают начисления. Один цикл — 12 с.
 */
.skc-offer-ref[data-ref-anim="2"] .skc-ref { width: 300px; gap: 12px }
.skc-ref-total { position: relative; height: 56px }
.skc-ref-stack { position: relative; display: block; height: 56px }
.skc-ref-stack i {
  position: absolute; inset: 0; color: #fff; font-size: 44px; font-style: normal;
  font-weight: 800; letter-spacing: -.02em; opacity: 0; animation: skc-ref-total 12s linear infinite;
}
.skc-ref-stack .t1 { animation-delay: -10.8s }
.skc-ref-stack .t2 { animation-delay: -8.4s }
.skc-ref-stack .t3 { animation-delay: -6s }
.skc-ref-stack .t4 { animation-delay: -3.6s }
@keyframes skc-ref-total {
  0%, 18% { opacity: 1; transform: translateY(0) }
  22%, 100% { opacity: 0; transform: translateY(-8px) }
}
.skc-ref-badges { position: relative; height: 26px }
.skc-ref-badge {
  position: absolute; left: 0; padding: 5px 11px; border: 1px solid rgba(62, 255, 158, .3);
  border-radius: 999px; background: rgba(62, 255, 158, .1); color: #3eff9e;
  font-size: 11px; font-weight: 800; letter-spacing: .04em; opacity: 0;
  animation: skc-ref-badge 12s linear infinite;
}
.skc-ref-badge.b1 { animation-delay: -10.8s }
.skc-ref-badge.b2 { animation-delay: -8.4s }
.skc-ref-badge.b3 { animation-delay: -6s }
.skc-ref-badge.b4 { animation-delay: -3.6s }
@keyframes skc-ref-badge {
  0%, 18% { opacity: 1; transform: translateX(0) }
  22%, 100% { opacity: 0; transform: translateX(6px) }
}
.skc-ref-drops { position: relative; height: 24px }
.skc-ref-drop {
  position: absolute; top: 0; padding: 4px 10px; border-radius: 999px;
  background: rgba(62, 255, 158, .12); color: #3eff9e; font-size: 11px; font-weight: 800;
  opacity: 0; animation: skc-ref-drop 12s linear infinite;
}
.skc-ref-drop.d0 { left: 0 }
.skc-ref-drop.d1 { left: 96px; animation-delay: -9.6s }
.skc-ref-drop.d2 { left: 192px; animation-delay: -7.2s }
@keyframes skc-ref-drop {
  0% { opacity: 0; transform: translateY(-14px) }
  8%, 24% { opacity: 1; transform: translateY(0) }
  34%, 100% { opacity: 0; transform: translateY(10px) }
}

/* ---- вариант 3: сеть приглашённых (?refAnim=3) ---------------------------
 * Вокруг центра по очереди появляются друзья, и от каждого к центру летит
 * монетка — так видно, что доход идёт со всех сторон.
 */
.skc-offer-ref[data-ref-anim="3"] .skc-ref { width: 300px; align-items: center }
.skc-ref-net { position: relative; width: 260px; height: 220px }
.skc-ref-core {
  position: absolute; left: 50%; top: 50%; display: grid; width: 62px; height: 62px;
  margin: -31px 0 0 -31px; place-items: center; border: 1px solid rgba(62, 255, 158, .45);
  border-radius: 50%; background: rgba(62, 255, 158, .12); color: #3eff9e;
  font-size: 22px; font-weight: 800; animation: skc-ref-core 12s ease-in-out infinite;
}
@keyframes skc-ref-core {
  0%, 100% { box-shadow: 0 0 0 0 rgba(62, 255, 158, .35) }
  50% { box-shadow: 0 0 34px 2px rgba(62, 255, 158, .45) }
}
.skc-ref-node {
  position: absolute; display: grid; width: 34px; height: 34px; place-items: center;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 50%;
  background: rgba(255, 255, 255, .04); opacity: 0; transform: scale(.6);
  animation: skc-ref-node 12s linear infinite;
}
.skc-ref-node i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, .35) }
.skc-ref-node.n0 { left: 8px; top: 24px }
.skc-ref-node.n1 { right: 8px; top: 12px; animation-delay: -10.8s }
.skc-ref-node.n2 { left: 0; bottom: 52px; animation-delay: -9.6s }
.skc-ref-node.n3 { right: 4px; bottom: 36px; animation-delay: -8.4s }
.skc-ref-node.n4 { left: 50%; bottom: 0; margin-left: -17px; animation-delay: -7.2s }
@keyframes skc-ref-node {
  0% { opacity: 0; transform: scale(.6) }
  6%, 92% { opacity: 1; transform: scale(1) }
  100% { opacity: 0; transform: scale(.6) }
}
/* Монетка стартует у своего узла и доезжает до центра. */
.skc-ref-coin {
  position: absolute; left: 50%; top: 50%; display: grid; width: 20px; height: 20px;
  margin: -10px 0 0 -10px; place-items: center; border-radius: 50%;
  background: #3eff9e; color: #06140c; font-size: 11px; font-weight: 800; opacity: 0;
  animation: skc-ref-coin 12s linear infinite;
}
.skc-ref-coin.k0 { --x: -112px; --y: -76px }
.skc-ref-coin.k1 { --x: 112px; --y: -88px; animation-delay: -10.4s }
.skc-ref-coin.k2 { --x: -120px; --y: 52px; animation-delay: -9.2s }
.skc-ref-coin.k3 { --x: 114px; --y: 68px; animation-delay: -8s }
.skc-ref-coin.k4 { --x: 0px; --y: 92px; animation-delay: -6.8s }
@keyframes skc-ref-coin {
  0% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.4) }
  6% { opacity: 1; transform: translate(var(--x), var(--y)) scale(1) }
  20% { opacity: 1; transform: translate(0, 0) scale(1) }
  26%, 100% { opacity: 0; transform: translate(0, 0) scale(.5) }
}

/* ---- вариант 4: три шага (?refAnim=4) ------------------------------------
 * Ссылка → продажа друга → процент на баланс. Движений четыре (?refStep=1…4),
 * скорость задаётся одним параметром (?refSpeed=8) и живёт в переменной
 * --ref-cycle: от неё считаются и длительности, и задержки шагов, поэтому сцена
 * остаётся согласованной на любой скорости.
 */
.skc-offer-ref[data-ref-anim="4"] .skc-ref { width: 350px }
.skc-ref-stages { position: relative; display: flex; flex-direction: column; gap: 10px; padding-left: 16px }
.skc-ref-stage {
  display: flex; align-items: center; gap: 11px; padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .07); border-radius: 12px;
  background: rgba(255, 255, 255, .025); color: rgba(255, 255, 255, .5);
  font-size: 12.5px; font-weight: 700;
  animation-duration: var(--ref-cycle, 12s); animation-iteration-count: infinite; animation-timing-function: linear;
}
.skc-ref-stage b {
  display: grid; width: 22px; height: 22px; flex: none; place-items: center;
  border-radius: 50%; background: rgba(255, 255, 255, .08); color: inherit; font-size: 11px;
}
/* Значок шага: он же подсвечивается ярче текста, когда шаг активен. */
.skc-ref-ico { display: grid; width: 20px; height: 20px; flex: none; place-items: center; color: inherit }
.skc-ref-ico svg { width: 17px; height: 17px }
.skc-ref-gain {
  margin-left: auto; padding: 3px 8px; border-radius: 999px; background: rgba(62, 255, 158, .14);
  color: #3eff9e; font-size: 10.5px; font-style: normal; font-weight: 800; opacity: 0;
  animation: skc-ref-gain var(--ref-cycle, 12s) linear infinite;
  animation-delay: calc(var(--ref-cycle, 12s) * -0.34);
}
@keyframes skc-ref-gain {
  0%, 4% { opacity: 0; transform: translateX(-6px) }
  10%, 26% { opacity: 1; transform: translateX(0) }
  34%, 100% { opacity: 0; transform: translateX(6px) }
}
/* Шаги идут друг за другом: каждый сдвинут на треть цикла. */
.skc-ref-stage.g1 { animation-delay: calc(var(--ref-cycle, 12s) * -0.667) }
.skc-ref-stage.g2 { animation-delay: calc(var(--ref-cycle, 12s) * -0.334) }

/* 1 — подсветка со сдвигом вправо. */
.skc-offer-ref[data-ref-step="1"] .skc-ref-stage { animation-name: skc-ref-stage }
@keyframes skc-ref-stage {
  0%, 2% { border-color: rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .025); color: rgba(255, 255, 255, .5); transform: translateX(0) }
  8%, 30% { border-color: rgba(62, 255, 158, .45); background: rgba(62, 255, 158, .09); color: #fff; transform: translateX(4px) }
  38%, 100% { border-color: rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .025); color: rgba(255, 255, 255, .5); transform: translateX(0) }
}

/* 2 — карточки выезжают слева и остаются до конца цикла. */
.skc-offer-ref[data-ref-step="2"] .skc-ref-stage { animation-name: skc-ref-stage-in; opacity: 0 }
@keyframes skc-ref-stage-in {
  0%, 2% { opacity: 0; transform: translateX(-18px); border-color: rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .025); color: rgba(255, 255, 255, .5) }
  12%, 92% { opacity: 1; transform: translateX(0); border-color: rgba(62, 255, 158, .35); background: rgba(62, 255, 158, .07); color: #fff }
  100% { opacity: 0; transform: translateX(-18px); border-color: rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .025); color: rgba(255, 255, 255, .5) }
}

/* 3 — волна: шаг слегка увеличивается, значок разгорается. */
.skc-offer-ref[data-ref-step="3"] .skc-ref-stage { animation-name: skc-ref-stage-wave }
@keyframes skc-ref-stage-wave {
  0%, 4% { transform: scale(1); border-color: rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .025); color: rgba(255, 255, 255, .5); box-shadow: none }
  14%, 28% { transform: scale(1.04); border-color: rgba(62, 255, 158, .5); background: rgba(62, 255, 158, .1); color: #fff; box-shadow: 0 10px 30px -14px rgba(62, 255, 158, .9) }
  42%, 100% { transform: scale(1); border-color: rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .025); color: rgba(255, 255, 255, .5); box-shadow: none }
}
.skc-offer-ref[data-ref-step="3"] .skc-ref-ico {
  animation: skc-ref-ico var(--ref-cycle, 12s) linear infinite; animation-delay: inherit;
}
.skc-offer-ref[data-ref-step="3"] .skc-ref-stage.g1 .skc-ref-ico { animation-delay: calc(var(--ref-cycle, 12s) * -0.667) }
.skc-offer-ref[data-ref-step="3"] .skc-ref-stage.g2 .skc-ref-ico { animation-delay: calc(var(--ref-cycle, 12s) * -0.334) }
@keyframes skc-ref-ico {
  0%, 6% { color: rgba(255, 255, 255, .4); transform: scale(1) }
  14%, 28% { color: #3eff9e; transform: scale(1.18) }
  40%, 100% { color: rgba(255, 255, 255, .4); transform: scale(1) }
}

/* 4 — значок пульсирует и шаг «дышит», карточка не двигается. */
.skc-offer-ref[data-ref-step="4"] .skc-ref-stage { animation-name: skc-ref-stage-pulse }
@keyframes skc-ref-stage-pulse {
  0%, 4% { border-color: rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .025); color: rgba(255, 255, 255, .5) }
  12% { border-color: rgba(62, 255, 158, .55); background: rgba(62, 255, 158, .14); color: #fff }
  20% { border-color: rgba(62, 255, 158, .3); background: rgba(62, 255, 158, .06); color: rgba(255, 255, 255, .85) }
  28% { border-color: rgba(62, 255, 158, .55); background: rgba(62, 255, 158, .14); color: #fff }
  40%, 100% { border-color: rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .025); color: rgba(255, 255, 255, .5) }
}
.skc-offer-ref[data-ref-step="4"] .skc-ref-stage b {
  animation: skc-ref-num var(--ref-cycle, 12s) linear infinite; animation-delay: inherit;
}
.skc-offer-ref[data-ref-step="4"] .skc-ref-stage.g1 b { animation-delay: calc(var(--ref-cycle, 12s) * -0.667) }
.skc-offer-ref[data-ref-step="4"] .skc-ref-stage.g2 b { animation-delay: calc(var(--ref-cycle, 12s) * -0.334) }
@keyframes skc-ref-num {
  0%, 6% { background: rgba(255, 255, 255, .08); box-shadow: none }
  14%, 30% { background: #3eff9e; color: #06140c; box-shadow: 0 0 14px rgba(62, 255, 158, .8) }
  40%, 100% { background: rgba(255, 255, 255, .08); box-shadow: none }
}

.skc-ref-line {
  position: absolute; left: 0; top: 0; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(62, 255, 158, .15), #3eff9e);
  animation: skc-ref-line var(--ref-cycle, 12s) linear infinite;
}
@keyframes skc-ref-line {
  0%, 4% { height: 18% }
  33% { height: 52% }
  66%, 94% { height: 100% }
  100% { height: 18% }
}

@media (max-width: 760px) {
  .skc-offer-ref[data-ref-anim="2"] .skc-ref,
  .skc-offer-ref[data-ref-anim="3"] .skc-ref,
  .skc-offer-ref[data-ref-anim="4"] .skc-ref { width: auto; padding: 0 20px 20px }
  .skc-ref-net { width: 100%; max-width: 280px; margin: 0 auto }
}

/* Сторона анимации в партнёрском баннере: по умолчанию слева (?refSide=left),
   со значением right текст уезжает влево, а анимация встаёт справа. */
@media (min-width: 761px) {
  html[data-offer="11"] .skc-offer-ref[data-ref-side="right"] { flex-direction: row }
}