/* Вариант 1. «Карта»: классический первый экран в духе Tangem */

:root { --hdr-h: 56px; }
@media (min-width: 768px) { :root { --hdr-h: 64px; } }

/* Смена тона: цвета страницы зарегистрированы как <color> и плавно перетекают
   на корне. Фон, текст, серый текст и линии меняются одним движением,
   поэтому заголовок следующей секции читается еще до переключения. */
@property --bg { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --fg { syntax: "<color>"; inherits: true; initial-value: #0b0b0f; }
@property --fg-2 { syntax: "<color>"; inherits: true; initial-value: #6e6e76; }
@property --line { syntax: "<color>"; inherits: true; initial-value: rgba(0, 0, 0, 0.08); }
@property --card { syntax: "<color>"; inherits: true; initial-value: #f2f2f7; }
/* Фон перетекает плавно, а текст переключается быстро ровно в середине,
   когда фон серый: так текст не растворяется в фоне во время смены. */
html {
  --tone-text-ease: cubic-bezier(0.86, 0, 0.14, 1);
  transition: --bg var(--tone-dur) var(--ease-io), --fg var(--tone-dur) var(--tone-text-ease),
    --fg-2 var(--tone-dur) var(--tone-text-ease), --line var(--tone-dur) var(--tone-text-ease),
    --card var(--tone-dur) var(--ease-io);
  scroll-padding-top: var(--hdr-h);
}
body { transition: none; }
section[data-tone] { color: inherit; }
.lead { color: var(--fg-2); }
.lead b, .lead strong { color: var(--fg); }
/* Заглушка рендера тоже берет цвета страницы, иначе ее заголовок белый на белом во время смены тона */
.render-slot { color: var(--fg-2); }
.render-slot b { color: var(--fg); }
/* Без JS тон страницы не переключается: черные секции красятся сами */
html.no-js section[data-tone="dark"] {
  --fg: var(--d-fg); --fg-2: var(--d-fg-2); --line: var(--d-line); --card: var(--d-card);
  background: var(--d-bg);
  color: var(--fg);
}

.btn-tg-icon { fill: currentColor; filter: drop-shadow(0 1px 1px rgba(0, 30, 100, .25)); }

/* ---------- Шапка ---------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  height: calc(var(--hdr-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  color: var(--fg);
  background-color: color-mix(in srgb, var(--bg) 74%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.hdr::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--line);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.hdr.is-stuck::after { opacity: 1; }
.hdr-in { height: var(--hdr-h); display: flex; align-items: center; gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; margin-right: auto; }
.brand-icon {
  position: relative;
  width: 28px; height: 28px;
  border-radius: 7px;
  flex: none;
}
.brand-icon img { width: 28px; height: 28px; }
/* тонкая кромка, чтобы черный значок не терялся на черном */
.brand-icon::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  pointer-events: none;
}
.brand-name { font-size: 17px; font-weight: 600; letter-spacing: -.022em; }
.hdr-nav { display: none; }
.hdr-btn {
  height: 36px; padding: 0 16px; font-size: 15px;
  box-shadow: inset 0 1px .5px rgba(255, 255, 255, .55), inset 0 -1px 1px rgba(0, 20, 80, .25), 0 4px 14px -5px rgba(52, 123, 246, .7);
}
.hdr-btn.btn-primary::before { inset: 1px 14% auto; }
@media (min-width: 768px) {
  .hdr-nav { display: flex; gap: 32px; position: absolute; left: 50%; transform: translateX(-50%); }
  .hdr-nav a { font-size: 15px; font-weight: 500; text-decoration: none; opacity: .72; transition: opacity .3s var(--ease); }
  .hdr-nav a:hover { opacity: 1; }
  .hdr-in { position: relative; }
  .hdr-btn { height: 40px; padding: 0 20px; }
}

/* ---------- Первый экран ---------- */
.hero { position: relative; padding-top: 28px; text-align: center; overflow: clip; }
.hero-copy { position: relative; z-index: 2; }
.hero-title {
  font-size: clamp(40px, 11.3vw, 84px);
  line-height: 1.02;
  max-width: 11.5em;
  margin: 0 auto;
}
.hero-lead {
  margin: 18px auto 0;
  max-width: 25em;
  font-size: clamp(17px, 4.75vw, 22px);
  line-height: 1.38;
}
.hero-actions { margin-top: 28px; display: flex; justify-content: center; }
.br-d { display: none; }
.hero-cta { flex: 0 1 320px; }

.facts {
  list-style: none;
  margin: 26px auto 0;
  padding: 0;
  display: flex;
  justify-content: center;
  max-width: 400px;
}
.fact { position: relative; flex: 1 1 0; padding: 0 6px; }
.fact + .fact::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 1px;
  background: var(--line);
}
.fact-num {
  display: block;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.fact-lbl {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.28;
  letter-spacing: -.005em;
  color: var(--fg-2);
}
@media (min-width: 768px) {
  .hero { padding-top: 44px; }
  .hero-lead { margin-top: 22px; max-width: 34em; }
  .br-d { display: inline; }
  .hero-actions { margin-top: 32px; }
  .hero-cta { flex: 0 0 auto; height: 60px; padding: 0 36px; font-size: 18px; }
  .facts { max-width: 560px; margin-top: 30px; }
  .fact-num { font-size: 28px; }
  .fact-lbl { font-size: 14px; }
  .fact-lbl br { display: none; }
}

/* ---------- Сцена с картой ---------- */
.stage {
  --cw: min(88vw, 620px);
  position: relative;
  height: calc(var(--cw) * 1.02);
  margin-top: 4px;
  pointer-events: none;
}
/* Студийный свет сверху: один мягкий конус, без цветных пятен */
.stage-light {
  position: absolute;
  left: 50%; top: -22%;
  width: calc(var(--cw) * 1.9);
  height: 135%;
  transform: translateX(-50%);
  background: radial-gradient(44% 50% at 50% 46%, rgba(255, 255, 255, .11), rgba(255, 255, 255, .04) 50%, transparent 76%);
}
.stage-floor {
  position: absolute;
  left: 50%; top: 73%;
  width: calc(var(--cw) * 1.1);
  height: calc(var(--cw) * .2);
  transform: translateX(-50%);
}
.floor-pool, .floor-shadow { position: absolute; inset: 0; border-radius: 50%; }
.stage-floor, .stage-light { transition: opacity .7s var(--ease-io); }
html[data-tone="light"] .stage-floor, html[data-tone="light"] .stage-light { opacity: 0; }
.floor-pool {
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04) 50%, transparent 72%);
}
.floor-shadow {
  inset: 24% 15%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .5), rgba(0, 0, 0, .16) 55%, transparent 75%);
  filter: blur(6px);
  will-change: transform;
}
.card-scene {
  position: absolute;
  left: 50%; top: 9%;
  width: var(--cw);
  transform: translateX(-50%);
  perspective: calc(var(--cw) * 2.7);
  perspective-origin: 50% 10%;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html:not(.no-js) .card-scene { animation: scene-in 1.7s var(--ease) .1s both; }
@keyframes scene-in {
  from { opacity: 0; transform: translate3d(-50%, 80px, 0); }
  to { opacity: 1; transform: translate3d(-50%, 0, 0); }
}
.card-float {
  transform-style: preserve-3d;
  animation: card-float 7s var(--ease-io) infinite alternate;
}
@keyframes card-float {
  from { transform: translate3d(0, -7px, 0); }
  to { transform: translate3d(0, 7px, 0); }
}
.floor-pool { animation: pool-float 7s var(--ease-io) infinite alternate; }
@keyframes pool-float {
  from { opacity: .75; scale: .94; }
  to { opacity: 1; scale: 1.03; }
}

.card3d {
  --r: calc(var(--cw) * .028);
  position: relative;
  aspect-ratio: 1715 / 1080;
  transform-style: preserve-3d;
  /* стартовая поза до запуска скрипта совпадает с позой при p = 0 */
  transform: translate3d(0, -15%, 0) scale(.94) rotateX(52deg) rotateY(0deg) rotateZ(-11deg);
}
html.no-js .card3d { transform: rotateX(7deg) rotateY(-9deg) rotateZ(-6deg); }
.card-face {
  position: absolute;
  inset: 0;
  border-radius: var(--r);
  overflow: hidden;
  clip-path: inset(0 round var(--r));
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  isolation: isolate;
}
.card-face img { width: var(--cw); height: auto; }
.card-front { transform: translateZ(1.8px); }
.card-back { transform: rotateY(180deg) translateZ(1.8px); }
/* Свет падает сверху: верх карты чуть светлее, низ уходит в тень */
.card-face::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(162deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .03) 30%, rgba(255, 255, 255, 0) 48%, rgba(0, 0, 0, .26));
  pointer-events: none;
}
/* Кромка: верхний край ловит свет студии, остальной контур чуть светится */
.card-front::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: var(--r);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(255, 255, 255, .05);
  pointer-events: none;
}
/* Торец карты: тонкие слои дают толщину при наклоне, нижняя кромка ловит свет */
.card-edge {
  position: absolute;
  inset: 0;
  border-radius: var(--r);
  background: linear-gradient(180deg, #2c2c31, #18181b 55%, #616168);
  transform: translateZ(calc(1.8px - var(--i) * .9px));
}
/* Блик, который движется вместе с наклоном карты */
.card-sheen {
  position: absolute;
  top: -40%; bottom: -40%;
  left: calc(-2 * 50%);
  width: 300%;
  background: linear-gradient(108deg,
    transparent 35%,
    rgba(255, 255, 255, .05) 42%,
    rgba(255, 255, 255, .17) 47.5%,
    rgba(255, 255, 255, .05) 53%,
    transparent 60%);
  pointer-events: none;
  z-index: 1;
}
/* Пробегающий световой блик */
.card-sweep {
  position: absolute;
  top: -30%; bottom: -30%;
  left: 0;
  width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .10) 40%, rgba(255, 255, 255, .26) 50%, rgba(255, 255, 255, .10) 60%, transparent);
  transform: translate3d(-140%, 0, 0) skewX(-16deg);
  animation: sweep 8s var(--ease-io) 1.9s infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes sweep {
  0% { transform: translate3d(-140%, 0, 0) skewX(-16deg); }
  22%, to { transform: translate3d(360%, 0, 0) skewX(-16deg); }
}

@media (min-width: 768px) {
  .stage { --cw: min(50vw, 600px); height: calc(var(--cw) * .96); margin-top: 0; }
  .card-scene { top: 5%; }
}

/* ---------- Общие заголовки секций ---------- */
.sec-head { text-align: center; max-width: 760px; margin: 0 auto; }
.sec-head .lead { margin-top: 16px; }
.sec-cta { display: flex; justify-content: center; margin-top: 32px; }
.sec-cta .btn, .pay-cta .btn { flex: 0 1 320px; }
@media (min-width: 768px) { .sec-cta .btn, .pay-cta .btn { flex: 0 0 auto; } }
.eyebrow-green { color: #30d158; }

/* ---------- Цены ---------- */
.prices { padding: 88px 0 96px; }
.tiles {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
/* Плитки берут цвета страницы: пока страница черная, они темные (#141417),
   и перетекают в светлые вместе с фоном */
.tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 16px 15px;
  background: var(--card);
  color: var(--fg);
  text-align: left;
  min-width: 0;
  container-type: inline-size;
}
.tile-num {
  font-size: clamp(38px, 28cqi, 84px);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: .95;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-left: -.03em;
}
.tile-txt { display: block; font-size: 15px; line-height: 1.22; }
.tile-txt b { display: block; font-weight: 600; letter-spacing: -.015em; }
.tile-txt span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.28; color: var(--fg-2); letter-spacing: -.005em; }

.glist {
  margin: 10px 0 0;
  padding: 2px 18px;
  background: var(--card);
  color: var(--fg);
}
.glist-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  font-size: 15px;
  line-height: 1.3;
}
.glist-row + .glist-row { box-shadow: inset 0 1px 0 var(--line); }
.glist-row span { color: var(--fg-2); }
.glist-row b { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (min-width: 640px) {
  .tiles { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .tile { padding: 18px; }
}
@media (min-width: 768px) {
  .prices { padding: 128px 0 136px; }
  .tiles { margin-top: 56px; gap: 16px; }
  .glist { margin-top: 16px; padding: 4px 28px; }
  .glist-row { font-size: 17px; padding: 18px 0; }
  .sec-cta { margin-top: 48px; }
}
/* На широком экране список в две колонки на всю ширину плиток */
@media (min-width: 900px) {
  .glist { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; padding: 6px 28px; }
  .glist-row + .glist-row { box-shadow: none; }
  .glist-row:nth-child(n + 3) { box-shadow: inset 0 1px 0 var(--line); }
}
@media (min-width: 1024px) {
  .tile { padding: 28px; }
  .tile-txt { font-size: 17px; }
  .tile-txt span { font-size: 15px; margin-top: 4px; }
}

/* ---------- Apple Pay ---------- */
.pay { padding: 96px 0 112px; }
.pay-grid { display: grid; gap: 0; }
.pay-text { text-align: center; max-width: 640px; margin: 0 auto; }
.pay-text .lead { margin-top: 16px; }
.pay-slot { margin: 36px auto 0; max-width: 560px; justify-self: stretch; }
.pay-slot > div { max-width: 24em; text-wrap: balance; }
/* Пунктир внутри squircle повторяет скругление, а не режется прямым углом */
.pay-slot { outline: 0; }
.pay-slot::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1.5px dashed color-mix(in srgb, currentColor 24%, transparent);
  border-radius: 24px;
  pointer-events: none;
}
.points { list-style: none; margin: 28px 0 0; padding: 0; }
.points li {
  padding: 16px 0;
  font-size: 17px;
  line-height: 1.4;
  color: var(--fg-2);
  text-wrap: pretty;
}
.points li + li { box-shadow: inset 0 1px 0 var(--line); }
.points b { color: var(--fg); font-weight: 600; }
.pay-cta { display: flex; justify-content: center; margin-top: 28px; }

@media (min-width: 900px) {
  .pay { padding: 136px 0 168px; }
  .pay-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "slot text" "slot points" "slot cta";
    grid-template-rows: auto auto 1fr;
    column-gap: 72px;
    align-items: start;
  }
  .pay-slot { grid-area: slot; margin: 0; max-width: none; }
  .pay-text { grid-area: text; text-align: left; margin: 0; align-self: end; padding-top: 24px; }
  .pay-text .h2 { font-size: clamp(40px, 3.6vw, 52px); }
  .points { grid-area: points; margin-top: 32px; }
  .pay-cta { grid-area: cta; justify-content: flex-start; margin-top: 32px; }
}

/* ---------- Без анимаций ---------- */
@media (prefers-reduced-motion: reduce) {
  .card-float, .floor-pool, html:not(.no-js) .card-scene { animation: none; }
  .card-sweep { display: none; }
  .card3d { transform: rotateX(7deg) rotateY(-9deg) rotateZ(-6deg); }
}