/* Гостевой лендинг simple-pass.ru — только то, что есть ТОЛЬКО здесь.
 * Общая хрома (шапка, полоса прогресса, типографика героя, подвал) — в
 * /shared/css/page.css, она общая с B2B: править там.
 *
 * Адресат — гость, а не заведение. Поэтому ни слова про процессинг, плагины и
 * интеграции: только что он получает и как этим пользоваться.
 */

/* ======================= ГЕРОЙ ======================= */

/* Обёртка даёт герою запас прокрутки, на котором он ПРИБИТ: иначе пластик
   осыпается уже за нижней кромкой экрана, то есть в пустоту. */
.hero-wrap { height: 190svh; }

.hero {
  position: sticky;
  top: 0;
  height: 100svh;
  margin-top: -66px;
  padding-top: 66px;
}

.hero-in { grid-template-columns: 1fr 420px; }

.deck-shell {
  --rx: 0deg;
  --ry: 0deg;
  justify-self: center;
  position: relative;
  width: 100%;
  max-width: 420px;
  height: min(520px, 66svh);
  perspective: 1600px;
  opacity: 0;
  animation: rise 1000ms var(--ease) 400ms forwards;
}

.deck-tilt {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 200ms var(--ease);
}

/* Пластик намеренно безликий: ни имени, ни логотипа — как стопка карт,
   которую никто не носит с собой. Контраст к живой карте в телефоне. */
.pcard {
  position: absolute;
  top: 34%;
  left: 50%;
  z-index: 2;
  width: 250px;
  height: 158px;
  margin: -79px 0 0 -125px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(150deg, #2a2e33, #16191d 70%);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.9);
}

/* Магнитная полоса — единственная деталь: этого хватает, чтобы прочитать «пластик». */
.pcard::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 26px;
  height: 26px;
  background: rgba(0, 0, 0, 0.55);
}

.pcard::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 20px;
  height: 22px;
  opacity: 0.25;
  background: repeating-linear-gradient(90deg,
    var(--text-3) 0 2px, transparent 2px 4px, var(--text-3) 4px 5px, transparent 5px 9px);
}

.p1 { transform: translate(-118px, 8px) rotate(-15deg); }
.p2 { transform: translate(-24px, -44px) rotate(-3deg); }
.p3 { transform: translate(84px, 44px) rotate(11deg); }

.phone {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 236px;
  height: 470px;
  margin: -235px 0 0 -118px;
  border-radius: 36px;
  border: 1px solid var(--line);
  background: linear-gradient(170deg, #202429, #0e1013);
  padding: 10px;
  box-shadow: var(--e-3);
  transform: translateY(28px) scale(0.86);
  opacity: 0.25;
}

.phone-glow {
  position: absolute;
  inset: -16%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--brass-glow), transparent 72%);
  opacity: 0;
}

.phone-scr {
  height: 100%;
  border-radius: 27px;
  background: var(--bg);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ph-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.ph-tier {
  color: var(--brass);
  border: 1px solid var(--brass-deep);
  border-radius: var(--r-pill);
  padding: 3px 8px;
}

.ph-bal { text-align: center; }

.ph-bal b {
  display: block;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--bonus);
  line-height: 1;
}

.ph-bal span {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
}

.ph-qr {
  margin-top: auto;
  background: var(--paper);
  border-radius: var(--r-md);
  padding: 12px;
}

.qr {
  width: 100%;
  display: block;
  /* Пиксели QR должны остаться пикселями, а не мылом. */
  image-rendering: pixelated;
  shape-rendering: crispEdges;
}

.ph-hint {
  margin: 0 0 4px;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Хореография героя: карты разлетаются, телефон выходит вперёд. Укладываем в
   первый экран прокрутки — герой в это время прибит, поэтому виден целиком. */
@supports (animation-timeline: scroll()) {
  .pcard,
  .phone,
  .phone-glow {
    animation-timeline: scroll(root block);
    animation-range: 5svh 80svh;
    animation-fill-mode: both;
    animation-timing-function: var(--ease);
  }

  .p1 { animation-name: drop-1; }
  .p2 { animation-name: drop-2; }
  .p3 { animation-name: drop-3; }
  .phone { animation-name: phone-in; }
  .phone-glow { animation-name: glow-in; }

  @keyframes drop-1 {
    from { transform: translate(-118px, 8px) rotate(-15deg); opacity: 1; }
    to { transform: translate(-330px, 280px) rotate(-58deg); opacity: 0; }
  }

  @keyframes drop-2 {
    from { transform: translate(-24px, -44px) rotate(-3deg); opacity: 1; }
    to { transform: translate(-90px, 360px) rotate(24deg); opacity: 0; }
  }

  @keyframes drop-3 {
    from { transform: translate(84px, 44px) rotate(11deg); opacity: 1; }
    to { transform: translate(320px, 300px) rotate(52deg); opacity: 0; }
  }

  @keyframes phone-in {
    from { transform: translateY(28px) scale(0.86); opacity: 0.25; }
    to { transform: none; opacity: 1; }
  }

  @keyframes glow-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* Нет таймлайнов — показываем итог: телефон. Пластик без разлёта бессмыслен. */
@supports not (animation-timeline: scroll()) {
  .pcard { display: none; }
  .phone { transform: none; opacity: 1; }
  .phone-glow { opacity: 1; }
}

/* ======================= 01 ЗАЧЕМ ЭТО МНЕ ======================= */

.why-sec { border-top: 1px solid var(--line); }

.perks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.perk {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 26px 24px;
  background: linear-gradient(170deg, var(--surface), rgba(18, 20, 23, 0.35));
  display: grid;
  gap: 10px;
  align-content: start;
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.perk:hover { border-color: var(--brass-deep); transform: translateY(-4px); }

/* Главное преимущество занимает две колонки: скидка в чек — то, ради чего всё. */
.perk-big { grid-column: span 2; }

.perk-n {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--brass);
}

.perk h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.02em;
  margin: 0;
}

.perk p { margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.55; }

/* Мини-чек внутри карточки: показать выгоду, а не описать её. */
.pk-viz {
  margin-top: 6px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  display: grid;
  gap: 7px;
  max-width: 320px;
}

.pk-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--text-2); }
.pk-row b { color: var(--text-1); }
.pk-minus b { color: var(--brass); }
.pk-sum { padding-top: 7px; border-top: 1px solid var(--line); }
.pk-sum b { font-family: var(--font-display); font-size: 17px; }

/* Лестница уровней */
.ladder { display: flex; gap: 6px; margin-top: 4px; }

.ld {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 8px;
  display: grid;
  gap: 2px;
  text-align: center;
}

.ld i { font-style: normal; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.ld b { font-size: 14px; color: var(--text-2); }

.ld-on { border-color: var(--brass-deep); background: rgba(217, 186, 133, 0.07); }
.ld-on b { color: var(--brass); }

/* ======================= 02 ИГРА ======================= */

.play-sec {
  border-top: 1px solid var(--line);
  background: radial-gradient(70% 80% at 78% 40%, rgba(217, 186, 133, 0.07), transparent 65%), var(--bg);
}

.plays { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.play {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px 22px;
  background: linear-gradient(170deg, var(--surface), rgba(18, 20, 23, 0.35));
  display: grid;
  gap: 10px;
  align-content: start;
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.play:hover { border-color: var(--brass-deep); transform: translateY(-4px); }

.play h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.02em;
  margin: 0;
}

.play p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.5; }

.pl-viz { margin-top: 6px; display: grid; gap: 6px; }

.pl-bid {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--text-2);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 7px 10px;
}

.pl-bid.win { border-color: var(--brass-deep); color: var(--brass); }
.pl-bid b { font-weight: 700; }

.pl-prog { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.pl-prog i { display: block; height: 100%; width: 66%; background: var(--bonus); }
.pl-prog i.p2 { width: 82%; background: var(--brass); }
.pl-l { font-size: 11px; color: var(--text-3); }

.pl-cap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--brass);
  background: rgba(217, 186, 133, 0.07);
  border: 1px dashed var(--brass-deep);
  border-radius: var(--r-xs);
  padding: 9px 11px;
}

.lock {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  border: 1.5px solid var(--brass);
  flex: none;
}

/* ======================= 03 ШАГИ ======================= */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.step {
  background: var(--surface);
  padding: 34px 28px 30px;
  transition: background var(--t-base) var(--ease);
}

.step:hover { background: var(--surface-2); }

.step-n {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--brass);
}

.step h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.02em;
  margin: 16px 0 12px;
}

.step p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.5; }

/* ======================= 04 ЧТО ВНУТРИ ======================= */

.inside-sec { border-top: 1px solid var(--line); }

.inside-in {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}

.ticks {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  color: var(--text-2);
  font-size: 15px;
}

.ticks li { display: flex; gap: 12px; align-items: flex-start; }

.ticks li::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--brass);
}

/* Карта — намёк, а не картография: сетка кварталов и пульсирующие точки. */
.map {
  position: relative;
  height: 340px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, var(--line-soft) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(90deg, var(--line-soft) 0 1px, transparent 1px 52px),
    var(--surface);
}

.pin {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brass);
  animation: ping 3s var(--ease) infinite;
}

.pin1 { top: 22%; left: 16%; animation-delay: 0ms; }
.pin2 { top: 58%; left: 30%; animation-delay: 600ms; }
.pin3 { top: 30%; left: 62%; animation-delay: 1200ms; }
.pin4 { top: 74%; left: 78%; animation-delay: 1800ms; }
.pin5 { top: 46%; left: 84%; animation-delay: 2400ms; }

@keyframes ping {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 186, 133, 0.5); }
  50% { box-shadow: 0 0 0 10px rgba(217, 186, 133, 0); }
}

.map-card {
  position: absolute;
  left: 50%;
  bottom: 18px;
  translate: -50% 0;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 16px;
  display: grid;
  gap: 2px;
  box-shadow: var(--e-2);
  min-width: 190px;
}

.map-card b { font-family: var(--font-display); font-size: 14px; }
.map-card span { font-size: 11px; color: var(--text-3); }
.map-card em { font-style: normal; font-size: 11px; color: var(--bonus); margin-top: 4px; }

/* ======================= 05 ЧЕСТНО ======================= */

.fair-sec { border-top: 1px solid var(--line); }

.fair {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.fair > div { background: var(--surface); padding: 28px 26px; display: grid; gap: 10px; align-content: start; }

.fair h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.02em;
  margin: 0;
}

.fair p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.55; }

/* ======================= 06 ЗАБРАТЬ ======================= */

.get-sec {
  border-top: 1px solid var(--line);
  background: radial-gradient(80% 120% at 50% 0%, rgba(217, 186, 133, 0.1), transparent 62%), var(--bg);
  text-align: center;
}

.get-in .eyebrow { justify-content: center; }
.get-in .eyebrow::after { display: none; }
.get-in .lead { margin-inline: auto; }
.get-cta { display: flex; justify-content: center; margin-top: 38px; }

/* ======================= АДАПТИВ ======================= */

@media (max-width: 1100px) {
  .plays { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1000px) {
  .hero-in, .inside-in { grid-template-columns: 1fr; }
  .deck-shell { justify-self: start; max-width: 340px; height: 470px; }
  .steps { grid-template-columns: 1fr; }

  /* Узкий экран: контент героя ВЫШЕ экрана (≈1020px против 812) — прибивать
     его нельзя, низ оказался бы недоступен, а height:100svh + align-items:
     center заворачивал верх под шапку и overflow срезал заголовок с эйбровом.
     Поэтому герой здесь течёт по контенту, а шапка стоит НАД ним, а не на нём.
     overflow: clip, а не hidden — hidden сделал бы герой контейнером прокрутки
     и погасил бы таймлайн разлёта (та же грабля, что с body). */
  .hero-wrap { height: auto; }

  .hero {
    position: static;
    height: auto;
    min-height: 100svh;
    margin-top: 0;
    padding: 26px 0 76px;
    overflow: clip;
  }

  .hero-in { padding-top: 0; }

  /* Без прибивания таймлайн от корня прокрутил бы разлёт вхолостую — ещё до
     того, как стопка попала в кадр. Вешаем его на проход самой стопки: карты
     осыпаются ровно тогда, когда на них смотрят. Диапазон монотонный
     (entry → exit). Нет таймлайна — fill-mode оставит стопку целой. */
  @supports (animation-timeline: view()) {
    .deck-shell {
      view-timeline-name: --deck;
      view-timeline-axis: block;
    }

    .pcard,
    .phone,
    .phone-glow {
      animation-timeline: --deck;
      animation-range: entry 80% exit 20%;
    }
  }
  .perks { grid-template-columns: repeat(2, 1fr); }
  .perk-big { grid-column: span 2; }
  .fair { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .hero-cta { display: grid; }
  .deck-shell { max-width: 100%; height: 440px; }
  /* На узком экране разлёт в 330px улетал бы далеко за кадр. */
  .pcard { width: 210px; height: 132px; margin: -66px 0 0 -105px; }
  .perks, .plays { grid-template-columns: 1fr; }
  .perk-big { grid-column: span 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-wrap { height: auto; }
  .hero { position: static; height: auto; padding-block: 120px 90px; }
  .deck-shell { opacity: 1; animation: none; }
  /* Без разлёта пластик не читается как мысль — оставляем итог. */
  .pcard { display: none; }
  .phone { transform: none; opacity: 1; animation: none; }
  .phone-glow { opacity: 1; animation: none; }
  .pin { animation: none; }
}