/* Only Wallet, вариант 3 «Telegram». Строится поверх /static/base.css */

:root { --hdr-h: 56px; }
@media (min-width: 768px) { :root { --hdr-h: 64px; } }
html { scroll-padding-top: var(--hdr-h); }

/* Цвета текста и карточек следуют тону страницы. Токены зарегистрированы как цвета
   и плавно перетекают один раз на корне, а все элементы получают их по наследству.
   Так текст читается в любой момент перехода черный ⇄ белый и не отстает от фона. */
@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, .08); }
@property --card { syntax: "<color>"; inherits: true; initial-value: #f2f2f7; }
html {
  --tone-flip: cubic-bezier(.9, 0, .1, 1);
  transition: --bg var(--tone-dur) var(--ease-io), --line var(--tone-dur) var(--ease-io), --card var(--tone-dur) var(--ease-io),
    --fg var(--tone-dur) var(--tone-flip), --fg-2 var(--tone-dur) var(--tone-flip);
}
/* Текст меняет цвет резко в середине перехода, когда фон уже серый:
   так он не растворяется в фоне на полпути */
@supports (transition-timing-function: linear(0, 1)) {
  html { --tone-flip: linear(0, 0 45%, 1 55%, 1); }
}
body.v3 { transition: none; }
/* Первый экран черный: до запуска site.js (и без JS) страница сразу черная, без белой вспышки */
html:not([data-tone]) { --bg: var(--d-bg); --fg: var(--d-fg); --fg-2: var(--d-fg-2); --line: var(--d-line); --card: var(--d-card); color-scheme: dark; }
.v3 section[data-tone] { color: inherit; }
.v3 .lead { color: var(--fg-2); }
.v3 .lead b { color: var(--fg); }

/* ---------- Шапка ---------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  background-color: color-mix(in srgb, var(--bg) 72%, 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; justify-content: space-between; gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-ic { width: 30px; height: 30px; border-radius: 7px; box-shadow: 0 0 0 .5px rgba(255,255,255,.22); flex: none; }
.brand-ic img { width: 30px; height: 30px; }
.brand-name { font-size: 18px; font-weight: 600; letter-spacing: -.025em; }
.hdr-btn {
  height: 36px; padding: 0 16px; font-size: 15px; gap: 0;
  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);
}
@media (hover: hover) { .hdr-btn:hover { box-shadow: inset 0 1px .5px rgba(255,255,255,.6), inset 0 -1px 1px rgba(0,20,80,.25), 0 6px 18px -5px rgba(52,123,246,.8); } }
.hdr-btn::before { inset: 1px 14% auto; }
.btn-tg-icon { fill: currentColor; }

/* ---------- Первый экран ---------- */
.hero { position: relative; padding: 36px 0 0; overflow-x: clip; }
.hero-copy { text-align: center; }
.hero-title { font-size: clamp(36px, 10.3vw, 84px); }
.hero-lead { margin: 18px auto 0; max-width: 30em; }
.hero-cta { margin-top: 28px; }
.hero-cta .btn { display: flex; max-width: 320px; margin: 0 auto; }

/* Цены: крупные цифры, серые подписи */
.prices {
  list-style: none;
  margin: 30px auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 420px;
}
.price { position: relative; padding: 2px 4px; display: flex; flex-direction: column; align-items: center; }
.price + .price::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--line);
}
.price b {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.price b small {
  font-size: .5em;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-right: .14em;
  color: var(--fg-2);
}
.price span {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--fg-2);
}

/* Сцена: глубокий синий свет снизу, как софит */
.hero-visual { position: relative; margin-top: 44px; padding-bottom: 72px; display: flex; justify-content: center; }
.stage { position: absolute; inset: 0; pointer-events: none; transition: opacity var(--tone-dur) var(--ease-io); }
html[data-tone="light"] .stage { opacity: 0; }
.stage i { position: absolute; left: 50%; display: block; transform: translateX(-50%); }
/* мягкое свечение за телефоном, растет от пола вверх */
.stage-haze {
  top: 4%;
  bottom: -110px;
  width: 300%;
  max-width: 1400px;
  background: radial-gradient(ellipse 34% 80% at 50% 84%, rgba(52,123,246,.26) 0%, rgba(44,104,224,.12) 40%, rgba(36,90,200,.04) 70%, rgba(36,90,200,0));
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent);
  mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent);
}
/* световое пятно на полу под телефоном */
.stage-pool {
  bottom: 6px;
  width: 170%;
  max-width: 720px;
  height: 132px;
  background: radial-gradient(closest-side, rgba(96,156,255,.62) 0%, rgba(60,128,246,.30) 36%, rgba(52,123,246,.08) 70%, rgba(52,123,246,0));
}
/* кромка сцены */
.stage-edge {
  bottom: 71px;
  width: 96%;
  height: 1px;
  background: linear-gradient(90deg, rgba(120,170,255,0), rgba(170,205,255,.55) 50%, rgba(120,170,255,0));
}

/* ---------- Телефон ---------- */
.phone {
  --pw: min(316px, calc(100vw - 44px));
  position: relative;
  width: var(--pw);
  z-index: 1;
}
.ph-body {
  --sq-r: 54px;
  padding: 3px;
  background:
    linear-gradient(180deg, #55555c 0%, #26262a 6%, #151518 28%, #131316 72%, #18203a 93%, #3b5a9e);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), 0 12px 40px -10px rgba(52,123,246,.22);
}
.ph-bezel { --sq-r: 51px; padding: 8px; background: #000; }
.ph-screen {
  --sq-r: 43px;
  --u: calc(100cqw / 393);
  position: relative;
  aspect-ratio: 393 / 852;
  container-type: inline-size;
  overflow: hidden;
  background: #0a0d14;
  color: #fff;
  letter-spacing: 0;
  -webkit-user-select: none;
  user-select: none;
}
.ph-key { position: absolute; width: 3px; background: linear-gradient(90deg, #2a2a2e, #4a4a50); border-radius: 2px; }
.ph-key-a { left: -2px; top: 17%; height: 4.5%; }
.ph-key-b { left: -2px; top: 24%; height: 8%; }
.ph-key-c { right: -2px; top: 26%; height: 11%; background: linear-gradient(270deg, #2a2a2e, #4a4a50); }

/* Обои чата: темный градиент с едва заметным узором */
.tg-wall {
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200' fill='none' stroke='white' stroke-opacity='.05' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M34 22q2 12 14 14-12 2-14 14-2-12-14-14 12-2 14-14z'/%3E%3Ccircle cx='150' cy='34' r='9'/%3E%3Crect x='84' y='84' width='34' height='22' rx='4' transform='rotate(-14 101 95)'/%3E%3Cpath d='M89 93h7'/%3E%3Cpath d='M144 156l32-14-10 30-7-10zM159 162l17-20'/%3E%3Ccircle cx='42' cy='150' r='11'/%3E%3Cpath d='M42 145v10'/%3E%3Cpath d='M70 64v12M64 70h12'/%3E%3Cpath d='M178 88l3 6 6.5 1-4.7 4.5 1.1 6.5-5.9-3.1-5.9 3.1 1.1-6.5-4.7-4.5 6.5-1z'/%3E%3Cpath d='M96 178c4-6 12-6 16 0'/%3E%3Ccircle cx='122' cy='136' r='1.6'/%3E%3Ccircle cx='12' cy='96' r='1.6'/%3E%3C/svg%3E") 0 0 / calc(190 * var(--u)) auto repeat,
    radial-gradient(90% 55% at 15% 8%, rgba(52,123,246,.20), rgba(52,123,246,0) 70%),
    radial-gradient(80% 50% at right 62%, rgba(84,64,190,.16), rgba(84,64,190,0) 70%),
    radial-gradient(90% 50% at 10% bottom, rgba(22,120,150,.14), rgba(22,120,150,0) 70%),
    #0a0d14;
}
.tg-scrim {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: calc(150 * var(--u));
  background: linear-gradient(180deg, rgba(8,10,15,.92) 0%, rgba(8,10,15,.55) 55%, rgba(8,10,15,0));
  z-index: 2;
}

/* Строка состояния iOS */
.ios-status {
  position: absolute;
  inset: 0 0 auto;
  height: calc(54 * var(--u));
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(4 * var(--u)) calc(30 * var(--u)) 0 calc(54 * var(--u));
}
.ios-time { font-size: calc(17 * var(--u)); font-weight: 600; letter-spacing: -.01em; }
.ios-island {
  position: absolute;
  top: calc(11 * var(--u));
  left: 50%;
  width: calc(124 * var(--u));
  height: calc(36 * var(--u));
  margin-left: calc(-62 * var(--u));
  border-radius: 999px;
  background: #000;
}
.ios-icons { display: flex; align-items: center; gap: calc(6 * var(--u)); fill: #fff; color: #fff; }
.ic-sig { width: calc(18 * var(--u)); height: auto; }
.ic-wifi { width: calc(17 * var(--u)); height: auto; }
.ic-bat { width: calc(27 * var(--u)); height: auto; }

/* Шапка чата в стиле iOS 26: стеклянные капсулы */
.glass {
  background: rgba(36, 38, 46, .55);
  -webkit-backdrop-filter: blur(12px) saturate(170%);
  backdrop-filter: blur(12px) saturate(170%);
  box-shadow:
    inset 0 .5px 0 rgba(255,255,255,.24),
    inset 0 0 0 .5px rgba(255,255,255,.07),
    0 4px 14px rgba(0,0,0,.22);
}
.tg-head {
  position: absolute;
  top: calc(56 * var(--u));
  left: calc(14 * var(--u));
  right: calc(14 * var(--u));
  height: calc(46 * var(--u));
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tg-back { width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: 50%; display: grid; place-items: center; color: #fff; }
.tg-back svg { width: calc(11 * var(--u)); height: auto; margin-left: calc(-2 * var(--u)); }
.tg-title {
  height: calc(46 * var(--u));
  min-width: calc(150 * var(--u));
  padding: 0 calc(22 * var(--u));
  border-radius: 999px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.tg-title b { font-size: calc(16 * var(--u)); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.tg-sub { position: relative; display: block; align-self: stretch; height: calc(16 * var(--u)); font-size: calc(13 * var(--u)); line-height: calc(16 * var(--u)); color: rgba(255,255,255,.55); }
.tg-sub > span { position: absolute; inset: 0; transition: opacity .35s var(--ease), transform .45s var(--ease); }
.sub-typing { opacity: 0; transform: translate3d(0, 4px, 0); color: #6aa3ff; }
.tg-head.is-typing .sub-bot { opacity: 0; transform: translate3d(0, -4px, 0); }
.tg-head.is-typing .sub-typing { opacity: 1; transform: none; }
.sub-typing i { display: inline-block; width: calc(3 * var(--u)); height: calc(3 * var(--u)); margin-left: calc(2 * var(--u)); border-radius: 50%; background: currentColor; vertical-align: middle; animation: dot 1.2s var(--ease-io) infinite; }
.sub-typing i:nth-child(2) { animation-delay: .15s; }
.sub-typing i:nth-child(3) { animation-delay: .3s; }
.tg-ava { width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 .5px rgba(255,255,255,.18), 0 4px 14px rgba(0,0,0,.22); }
.tg-ava img { width: calc(46 * var(--u)); height: calc(46 * var(--u)); transform: scale(1.12); }

/* Лента сообщений: итоговая раскладка прижата к низу, как в Telegram.
   Сообщения появляются на своих местах, поэтому ничего не прыгает. */
.tg-chat {
  position: absolute;
  left: 0; right: 0;
  top: calc(108 * var(--u));
  bottom: calc(150 * var(--u));
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: calc(7 * var(--u));
  padding: 0 calc(12 * var(--u)) calc(10 * var(--u));
  font-size: calc(17 * var(--u));
  line-height: calc(22 * var(--u));
  letter-spacing: -.01em;
}
.tg-date {
  align-self: center;
  margin-bottom: calc(6 * var(--u));
  padding: calc(3 * var(--u)) calc(11 * var(--u));
  border-radius: 999px;
  font-size: calc(13 * var(--u));
  line-height: calc(18 * var(--u));
  font-weight: 500;
  color: rgba(255,255,255,.88);
}
.msg {
  position: relative;
  max-width: 84%;
  padding: calc(7 * var(--u)) calc(12 * var(--u));
  border-radius: calc(18 * var(--u));
}
.msg .tail { position: absolute; bottom: 0; width: calc(14 * var(--u)); height: calc(16 * var(--u)); transition: opacity .25s var(--ease); }
.msg.out {
  align-self: flex-end;
  background: #347bf6;
  box-shadow: inset 0 .5px 0 rgba(255,255,255,.22);
  border-bottom-right-radius: calc(5 * var(--u));
  margin-right: calc(7 * var(--u));
  transform-origin: right bottom;
}
.msg.out .tail { right: calc(-8 * var(--u)); fill: #347bf6; }
.msg.in {
  align-self: flex-start;
  background: #1e2027;
  border-bottom-left-radius: calc(5 * var(--u));
  margin-left: calc(7 * var(--u));
  transform-origin: left bottom;
}
.msg.in .tail { left: calc(-8 * var(--u)); transform: scaleX(-1); fill: #1e2027; }
.msg.grouped .tail { opacity: 0; }
.tm {
  display: inline-flex;
  align-items: center;
  gap: calc(3 * var(--u));
  margin-left: calc(9 * var(--u));
  position: relative;
  top: calc(5 * var(--u));
  float: right;
  font-size: calc(11.5 * var(--u));
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
  color: rgba(255,255,255,.45);
  font-variant-numeric: tabular-nums;
}
.msg.out .tm { color: rgba(255,255,255,.72); }
.chk { width: calc(16 * var(--u)); height: auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.chk2 { transition: opacity .3s var(--ease); }
.msg.out.unread .chk2 { opacity: 0; }

/* Сообщение с картой */
.msg.photo { width: calc(316 * var(--u)); max-width: none; padding: calc(3 * var(--u)); }
.ph-img {
  position: relative;
  overflow: hidden;
  padding: calc(22 * var(--u)) calc(26 * var(--u)) calc(26 * var(--u));
  border-radius: calc(15 * var(--u)) calc(15 * var(--u)) calc(5 * var(--u)) calc(5 * var(--u));
  background:
    radial-gradient(62% 50% at 50% 108%, rgba(88,152,255,.75) 0%, rgba(52,123,246,.26) 45%, rgba(52,123,246,0)),
    radial-gradient(80% 60% at 50% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #10141d 0%, #0a0d15);
}
.ph-img img {
  position: relative;
  width: calc(258 * var(--u)); /* фото 316 минус поля пузыря 3+3 и подложки 26+26 */
  height: auto;
  border-radius: calc(10 * var(--u));
  box-shadow: 0 calc(10 * var(--u)) calc(18 * var(--u)) rgba(0,0,0,.6), 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0,0,0,.4), 0 calc(1 * var(--u)) 0 rgba(120,170,255,.35);
}
.ph-img::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -20% auto -20% 0;
  width: 45%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.16) 50%, rgba(255,255,255,0));
  transform: translate3d(-130%, 0, 0) skewX(-12deg);
  pointer-events: none;
}
.ph-img.shine::after { animation: shine 1.5s var(--ease) .25s 1 both; }
.cap { padding: calc(6 * var(--u)) calc(9 * var(--u)) calc(6 * var(--u)); }
.cap-sub { display: block; font-size: calc(14 * var(--u)); line-height: calc(19 * var(--u)); color: rgba(255,255,255,.55); }
.cap-sub .tm { top: calc(4 * var(--u)); }

/* Сообщения с кодами */
.code-msg { min-width: calc(214 * var(--u)); padding: calc(8 * var(--u)) calc(13 * var(--u)) calc(9 * var(--u)); }
.code-msg .k { display: block; font-size: calc(15 * var(--u)); line-height: calc(20 * var(--u)); font-weight: 600; color: rgba(255,255,255,.62); }
.code-msg .code {
  display: block;
  margin-top: calc(1 * var(--u));
  font-size: calc(30 * var(--u));
  line-height: calc(36 * var(--u));
  font-weight: 600;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.code-msg .code .tm { top: calc(16 * var(--u)); letter-spacing: 0; }
.code-msg .meta { display: block; margin-top: calc(2 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(19 * var(--u)); color: rgba(255,255,255,.62); }
.code-msg .meta .tm { top: calc(4 * var(--u)); }
.claude { display: inline-block; width: calc(14 * var(--u)); height: calc(14 * var(--u)); margin: 0 calc(5 * var(--u)) 0 0; vertical-align: calc(-2 * var(--u)); fill: #d97757; }

/* Индикатор набора */
.slot { position: relative; display: flex; flex-direction: column; }
.typing {
  position: absolute;
  left: calc(7 * var(--u));
  top: 0;
  height: calc(36 * var(--u));
  padding: 0 calc(14 * var(--u));
  display: none;
  align-items: center;
  gap: calc(5 * var(--u));
  border-radius: calc(18 * var(--u));
  border-bottom-left-radius: calc(5 * var(--u));
  background: #1e2027;
  transform-origin: left bottom;
}
.typing i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: rgba(255,255,255,.55); animation: dot 1.2s var(--ease-io) infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }

/* Низ экрана: поле ввода и кнопка мини-приложения */
.tg-input {
  position: absolute;
  left: calc(12 * var(--u));
  right: calc(12 * var(--u));
  bottom: calc(98 * var(--u));
  height: calc(44 * var(--u));
  z-index: 3;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
}
.tg-circ { flex: none; width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 50%; display: grid; place-items: center; color: rgba(255,255,255,.7); }
.tg-circ svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.tg-field { flex: 1; align-self: stretch; border-radius: 999px; display: flex; align-items: center; padding: 0 calc(16 * var(--u)); font-size: calc(17 * var(--u)); color: rgba(255,255,255,.4); }
.tg-kbd {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(88 * var(--u));
  z-index: 3;
  padding: calc(8 * var(--u)) calc(12 * var(--u)) 0;
  background: rgba(16, 18, 24, .72);
  box-shadow: inset 0 .5px 0 rgba(255,255,255,.08);
}
.tg-app {
  height: calc(46 * var(--u));
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--u));
  font-size: calc(17 * var(--u));
  font-weight: 600;
  letter-spacing: -.01em;
  background: linear-gradient(180deg, #4a8dff, #347bf6);
  box-shadow: inset 0 .5px 0 rgba(255,255,255,.4);
}
.tg-app img { width: calc(20 * var(--u)); height: auto; filter: invert(1); }
.ios-home { position: absolute; z-index: 4; left: 50%; bottom: calc(8 * var(--u)); width: calc(134 * var(--u)); height: calc(5 * var(--u)); margin-left: calc(-67 * var(--u)); border-radius: 999px; background: rgba(255,255,255,.85); }

/* Анимация переписки. Без JS и при reduce-motion показано итоговое состояние. */
.msg, .tg-date { transition: opacity .45s var(--ease), transform .7s var(--ease); }
.chat-armed .msg:not(.is-on), .chat-armed .tg-date:not(.is-on) { opacity: 0; transform: translate3d(0, calc(10 * var(--u)), 0) scale(.9); }
.chat-armed .typing { display: flex; opacity: 0; transform: scale(.6); transition: opacity .3s var(--ease), transform .45s var(--ease); }
.chat-armed .typing.is-on { opacity: 1; transform: none; }

@keyframes dot {
  0%, 60%, to { opacity: .35; transform: translate3d(0, 0, 0); }
  30% { opacity: 1; transform: translate3d(0, -20%, 0); }
}
@keyframes shine {
  to { transform: translate3d(330%, 0, 0) skewX(-12deg); }
}

/* ---------- Общие для секций ---------- */
.topup, .pay { padding: 104px 0 120px; }
.sec-head { text-align: center; }
.sec-head .lead { margin: 16px auto 0; max-width: 30em; text-wrap: balance; }
.topup .note { text-align: center; }
.eb-green { color: #0e9447; }

/* ---------- Пополнение криптой ---------- */
.coins {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.coin {
  position: relative;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--card);
}
.coin-usdt { grid-column: span 2; grid-row: span 2; padding: 18px; }
.usdt { width: 48px; height: 48px; }
.coin-txt b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.coin-txt > span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.25; color: var(--fg-2); }
.coin-usdt .coin-txt b { font-size: 30px; letter-spacing: -.035em; line-height: 1.05; }
.coin-usdt .coin-txt > span { font-size: 14px; margin-top: 3px; }
.nets { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.nets li {
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  background-color: var(--bg);
}
.badge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  background: var(--c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.12);
}
.badge-sol { background: linear-gradient(135deg, #9945ff 0%, #5d7cf0 50%, #14f195); }
.note {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--fg-2);
}

/* ---------- Apple Pay ---------- */
.pay-media { position: relative; margin-top: 36px; }
.pay-media .render-slot {
  padding: 40px 28px 104px;
  outline: 0;
  background:
    radial-gradient(70% 55% at 50% 112%, rgba(52,123,246,.30), rgba(52,123,246,0) 70%),
    radial-gradient(90% 70% at 50% 0%, rgba(255,255,255,.05), rgba(255,255,255,0) 70%),
    #0c0c0f;
}
.pay-media .render-slot::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 26px;
  border: 1.5px dashed rgba(255,255,255,.16);
  pointer-events: none;
}
.rs-txt { max-width: 19em; text-wrap: balance; }
.rs-txt b { margin-bottom: 6px; }
.push {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px 13px 13px;
  background: rgba(44, 46, 54, .6);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  color: #fff;
}
.push-ic { flex: none; width: 38px; height: 38px; border-radius: 9px; overflow: hidden; box-shadow: 0 0 0 .5px rgba(255,255,255,.18); }
.push-ic img { width: 38px; height: 38px; }
.push-txt { min-width: 0; flex: 1; font-size: 15px; line-height: 1.3; letter-spacing: -.01em; }
.push-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.push-top b { font-weight: 600; }
.push-top i { font-style: normal; font-size: 13px; color: rgba(255,255,255,.5); }
.push-body { display: block; color: rgba(255,255,255,.78); }

.points { list-style: none; margin: 32px 0 0; padding: 0; }
.points li {
  padding: 18px 0;
  font-size: 17px;
  line-height: 1.4;
  color: var(--fg-2);
  border-top: 1px solid var(--line);
}
.points li:last-child { border-bottom: 1px solid var(--line); }
.points b { color: var(--fg); font-weight: 600; }
.sec-cta { margin-top: 32px; text-align: center; }
.sec-cta .btn { display: flex; max-width: 320px; margin: 0 auto; }

/* ---------- Планшет и шире ---------- */
@media (min-width: 600px) {
  .coins { gap: 12px; max-width: 560px; }
  .coin { padding: 16px; }
  .badge { width: 40px; height: 40px; font-size: 11px; }
  .coin-txt b { font-size: 20px; }
  .coin-txt > span { font-size: 14px; }
  .coin-usdt { padding: 24px; }
  .usdt { width: 60px; height: 60px; }
  .coin-usdt .coin-txt b { font-size: 40px; }
  .nets li { font-size: 13px; padding: 5px 10px; }
  .pay-media { max-width: 560px; }
  .phone { --pw: 340px; }
  .ph-body { --sq-r: 56px; }
  .ph-bezel { --sq-r: 53px; }
  .ph-screen { --sq-r: 45px; }
}

@media (min-width: 1024px) {
  .hero { padding-top: 8px; }
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    align-items: center;
    column-gap: 64px;
    min-height: calc(100svh - var(--hdr-h));
    max-height: 980px;
  }
  .hero-copy { text-align: left; padding-bottom: 40px; }
  .hero-title { font-size: clamp(60px, 5.4vw, 80px); }
  .hero-lead { margin: 24px 0 0; max-width: 23.5em; font-size: 21px; }
  .hero-lead b { display: block; }
  .hero-cta { margin-top: 36px; }
  .hero-cta .btn { display: inline-flex; max-width: none; margin: 0; padding: 0 32px; }
  .prices { margin: 52px 0 0; max-width: 560px; grid-template-columns: repeat(3, auto); justify-content: start; }
  .price { align-items: flex-start; padding: 2px 36px; }
  .price:first-child { padding-left: 0; }
  .price b { font-size: 48px; }
  .price span { margin-top: 8px; font-size: 15px; }
  .hero-visual { margin-top: 0; padding: 24px 0 64px; }
  .stage-edge { bottom: 63px; width: 104%; }
  .stage-pool { bottom: -2px; height: 150px; }

  .topup, .pay { padding: 136px 0; }
  .sec-head .lead { text-wrap: pretty; }
  .sec-head { text-align: left; }
  .sec-head .lead { margin-left: 0; }
  .topup-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: 1fr auto auto 1fr; column-gap: 64px; }
  .topup-grid .sec-head { grid-column: 1; grid-row: 2; }
  .topup-grid .note { grid-column: 1; grid-row: 3; margin-top: 28px; text-align: left; }
  .coins { grid-column: 2; grid-row: 1 / span 4; margin: 0; max-width: none; gap: 14px; }
  .coin { padding: 22px; }
  .coin-usdt { padding: 32px; }
  .badge { width: 46px; height: 46px; font-size: 12.5px; }
  .coin-txt b { font-size: 24px; }
  .coin-usdt .coin-txt b { font-size: 56px; }
  .usdt { width: 72px; height: 72px; }

  .pay-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-rows: 1fr auto auto auto 1fr; column-gap: 80px; }
  .pay-media { grid-column: 1; grid-row: 1 / span 5; margin: 0; max-width: 600px; }
  .pay-grid .sec-head { grid-column: 2; grid-row: 2; }
  .points { grid-column: 2; grid-row: 3; }
  .sec-cta { grid-column: 2; grid-row: 4; text-align: left; }
  .sec-cta .btn { margin: 0; }
  .push { left: 32px; right: auto; bottom: 32px; width: 360px; }
}

@media (prefers-reduced-motion: reduce) {
  .typing i, .sub-typing i { animation: none; }
}