/*
 * Пять блоков после «Правил»: условия, партнёрам, шаги с призывом, вопросы, подвал.
 *
 * Классы с префиксом rx-, чтобы не пересекаться со скомпилированным style.css.
 * Тема — та же переменная --dark (0 или 1), цвета набора от --scene-ink.
 * Всё, что появляется по прокрутке, спрятано только под .rx-js: если скрипт
 * не загрузился, блоки стоят на месте и читаются.
 */

:root {
  --rx-ink-08: color-mix(in srgb, var(--scene-ink) 8%, transparent);
  --rx-ink-12: color-mix(in srgb, var(--scene-ink) 12%, transparent);
  --rx-ink-20: color-mix(in srgb, var(--scene-ink) 20%, transparent);
  --rx-ink-55: color-mix(in srgb, var(--scene-ink) 55%, transparent);
  --rx-ink-60: color-mix(in srgb, var(--scene-ink) 60%, transparent);
  --rx-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* Перламутр — тот же набор, что у радужной каймы кнопки первого экрана */
  --rx-pearl: linear-gradient(90deg, #8fdcff, #a142ff 38%, #ff7ad9 62%, #a1ff42 86%, #8fdcff);
}

/* ——— Общая сетка разделов ——————————————————————————————————————— */

.rx-sec {
  position: relative;
  z-index: 10;
  max-width: 1240px;
  margin: 0 auto;
  padding: 24vh 24px 0;
}

.rx-head {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.rx-h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.045em;
}

.rx-h2--left {
  text-align: left;
}

/* Подзаголовок — приглушённым цветом, а не opacity: opacity забрала бы
   анимация появления, и в конце текст вставал бы в полную силу */
.rx-sub {
  max-width: 52ch;
  margin: 20px auto 0;
  color: var(--rx-ink-60);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.rx-sub--left {
  margin-left: 0;
}

/* Подписи карточек — пилюлей, как «Экспоненциальная торговля» у стратегий
   (сама пилюля — .rh-chip из style.css) */
.rx-chip {
  align-self: flex-start;
}

/* На калькуляторе плашка тёмная при любой теме — пилюля тоже тёмная,
   как подписи у карточек показателей */
.rh-chip.rx-chip--dark {
  color: #ffffffcc;
  background: #ffffff1a;
  box-shadow: inset 0 0 0 1px #ffffff14;
}

/* Стекло плашек — как у карточек стратегий, но без SVG-искажения: оно самое
   дорогое на странице, а здесь плашек много */
.rx-glass {
  position: relative;
  border-radius: 14px;
  background: rgba(255, 255, 255, calc(0.4 - var(--dark) * 0.33));
  border: 1px solid rgba(255, 255, 255, calc(0.6 - var(--dark) * 0.46));
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.07),
    0 16px 30px -25px rgba(0, 0, 0, 0.38),
    0 4px 10px -9px rgba(0, 0, 0, 0.2),
    0 0 21px -8px rgba(255, 255, 255, 0.3),
    inset 0 0 12px -4px rgba(255, 255, 255, calc(0.7 - var(--dark) * 0.5));
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}

/* ——— Появление по прокрутке ——————————————————————————————————————— */

.rx-js [data-reveal],
.rx-js [data-stagger] > * {
  opacity: 0;
  translate: 0 30px;
  filter: blur(8px);
  transition:
    opacity 0.9s var(--rx-ease),
    translate 0.9s var(--rx-ease),
    filter 0.9s var(--rx-ease);
}

.rx-js [data-reveal].is-in,
.rx-js [data-stagger].is-in > * {
  opacity: 1;
  translate: 0 0;
  filter: none;
}

/* Заголовки разделов: проступают и поднимаются снизу, когда дошли до
   отметки на экране (класс is-up ставит скрипт) */
.rx-rise {
  opacity: 0;
  translate: 0 46px;
  transition:
    opacity 1s var(--rx-ease),
    translate 1.1s var(--rx-ease);
}

.rx-rise[data-title-sub] {
  transition-delay: 0.14s;
}

.rx-rise.is-up {
  opacity: 1;
  translate: 0 0;
}

/* Заголовок по буквам: буквы поднимаются от середины строки к краям, ход
   привязан к прокрутке. Слова — неразрывными обёртками, чтобы строка ломалась
   только между ними */
.rx-wd {
  display: inline-block;
  white-space: nowrap;
}

.rx-c {
  display: inline-block;
  will-change: transform, opacity;
}

/* ═══════════════════ Условия ═══════════════════ */

/* Делёж — колонкой в 30%, калькулятор — 70% */
.rx-pricing-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  gap: 14px;
  margin-top: 56px;
}

/* — Делёж прибыли — */

.rx-split {
  --rx-split: 0;
  display: flex;
  flex-direction: column;
  padding: 32px 36px 34px;
}

.rx-split-nums {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-top: 40px;
}

.rx-split-nums b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(64px, 7.4vw, 108px);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.06em;
}

.rx-split-nums span:not([data-count]) {
  display: block;
  margin-top: 10px;
  color: var(--rx-ink-55);
  font-size: 14px;
  letter-spacing: -0.01em;
}

/* Тонкий разделитель между долями — ровно посередине карточки */
.rx-split-nums::before {
  content: "";
  position: absolute;
  top: 6%;
  bottom: 4px;
  left: 50%;
  width: 1px;
  background: var(--rx-ink-12);
}

.rx-split-us {
  text-align: right;
}

/* Ледяной голубой — как линия графика прибыли на плашке «Правил».
   На светлой теме тон глубже: фирменный #8fdcff на белом почти не читается */
:root {
  --rx-ice: #3a9fd6;
}

@supports (color: color-mix(in lab, red, red)) {
  :root {
    --rx-ice: color-mix(in srgb, #8fdcff calc(var(--dark) * 100%), #3a9fd6);
  }
}

/* Доля Rheo — ледяным голубым, ваша — цветом текста */
.rx-split-us b {
  color: var(--rx-ice);
}

.rx-note {
  margin-top: 22px;
  color: var(--rx-ink-55);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

@keyframes rx-pearl {
  to {
    background-position: 200% 0;
  }
}

/* — Калькулятор: тёмная плашка при любой теме, пара к белой — */

.rx-calc {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  color: #fff;
  /* Фирменный тёмный — как у плашки ИИ, — и холодный свет из правого угла,
     где стоит знак */
  background:
    radial-gradient(64% 58% at 86% 8%, #8fdcff42 0%, #8fdcff12 42%, #8fdcff00 72%),
    linear-gradient(170deg, #1a1d24 0%, #0b0d12 68%);
  box-shadow:
    inset 0 2px 2px #ffffff29,
    inset 0 0 0 1px #ffffff14,
    0 24px 65px -30px #000000bf;
}

.rx-calc-in {
  position: relative;
  padding: 32px 36px 30px;
}

.rx-calc-dep {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 26px;
}

.rx-calc-val {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.2vw, 56px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}

.rx-calc-dep span {
  font-size: 14px;
  opacity: 0.5;
}

/* Ползунок: тонкая линия, пройденная часть светлая. --rx-fill ставит скрипт */
.rx-range {
  --rx-fill: 0%;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 28px;
  margin-top: 18px;
  background: transparent;
  cursor: pointer;
}

.rx-range::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #fff 0 var(--rx-fill), #ffffff2e var(--rx-fill) 100%);
}

.rx-range::-moz-range-track {
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #fff 0 var(--rx-fill), #ffffff2e var(--rx-fill) 100%);
}

.rx-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -9.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 0 5px #ffffff1f,
    0 6px 14px -4px #000;
  transition: box-shadow 0.25s;
}

.rx-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 0 5px #ffffff1f,
    0 6px 14px -4px #000;
}

.rx-range:hover::-webkit-slider-thumb,
.rx-range:focus-visible::-webkit-slider-thumb {
  box-shadow:
    0 0 0 9px #ffffff26,
    0 6px 14px -4px #000;
}

.rx-range:focus-visible {
  outline: none;
}

.rx-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 16px;
}

.rx-tier {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 11.5px;
  color: #ffffff80;
  box-shadow: inset 0 0 0 1px #ffffff1c;
  transition:
    background-color 0.35s,
    color 0.35s,
    box-shadow 0.35s;
}

.rx-tier b {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #fff;
}

.rx-tier.is-on {
  background: #fff;
  color: #0b0d1299;
  box-shadow: 0 10px 24px -14px #fff8;
}

.rx-tier.is-on b {
  color: #0b0d12;
}

.rx-calc-rows {
  margin-top: 22px;
}

.rx-calc-rows div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid #ffffff17;
  font-size: 14px;
}

.rx-calc-rows dt {
  opacity: 0.55;
}

.rx-calc-rows dd {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rx-calc-rows dd::after {
  content: " USDT";
  opacity: 0.45;
  font-size: 0.8em;
}

.rx-calc-total dt {
  opacity: 0.9;
}

.rx-calc-total dd {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

/* ═══════════════════ Партнёрам ═══════════════════ */

.rx-partners-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
}

.rx-plist {
  display: grid;
  gap: 22px;
  margin-top: 40px;
  list-style: none;
}

.rx-plist li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.rx-ico {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(168deg, #23272f 0%, #0b0d12 100%);
  box-shadow:
    inset 0 1px #ffffff24,
    0 8px 18px -12px #000c;
}

.rx-ico svg {
  width: 21px;
  height: 21px;
}

.rx-plist b {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.rx-plist span:not(.rx-ico) {
  display: block;
  margin-top: 4px;
  color: var(--rx-ink-55);
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.rx-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
  padding: 14px 22px;
  border-radius: 99px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--scene-ink);
  box-shadow: inset 0 0 0 1px var(--rx-ink-20);
  transition:
    background-color 0.3s,
    color 0.3s,
    box-shadow 0.3s;
}

.rx-link svg {
  width: 15px;
  height: 15px;
  transition: translate 0.3s var(--rx-ease);
}

.rx-link:hover {
  background: var(--scene-ink);
  color: var(--scene-paper);
  box-shadow: inset 0 0 0 1px var(--scene-ink);
}

.rx-link:hover svg {
  translate: 4px 0;
}

/* — Сеть партнёров — */

.rx-net {
  --rx-draw: 0;
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1;
  margin-left: auto;
}

.rx-net svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.rx-net-orbit {
  fill: none;
  stroke: var(--rx-ink-12);
  stroke-width: 1;
  stroke-dasharray: 2 6;
}

/* Линии прочерчиваются по прокрутке: длина пути нормирована в 1 */
.rx-net-line {
  fill: none;
  stroke: var(--rx-ink-20);
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--rx-l, 0));
}

.rx-net-node {
  fill: var(--scene-paper);
  stroke: var(--scene-ink);
  stroke-width: 1.4;
  opacity: var(--rx-n, 0);
  transform-box: fill-box;
  transform-origin: center;
  scale: calc(0.4 + var(--rx-n, 0) * 0.6);
}

.rx-net-node--l1 {
  fill: var(--scene-ink);
}

/* Импульсы бегут к центру: доход с линий стекается к вам */
.rx-net-pulse {
  fill: url(#rx-pulse-grad);
  opacity: calc(var(--rx-draw) * 0.95);
}

.rx-net-tag {
  fill: var(--rx-ink-55);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: var(--rx-draw);
}

/* Ядро «Вы»: тёмный диск с бегущей перламутровой каймой */
.rx-net-core {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 22%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 35% 30%, #3a404c 0%, #0b0d12 70%);
  box-shadow:
    inset 0 2px 3px #ffffff38,
    inset 0 -3px 6px #00000080,
    0 24px 40px -18px #000c;
}

.rx-net-core b {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.rx-net-ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(from var(--rh-ang, 0deg), #8fdcff, #a142ff, #ff7ad9, #a1ff42, #8fdcff);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  animation: rx-ring 5s linear infinite;
}

/* Свечение каймы — её же размытая копия */
.rx-net-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  filter: blur(14px);
  opacity: 0.55;
}

@keyframes rx-ring {
  to {
    --rh-ang: 360deg;
  }
}

/* ═══════════════════ Шаги ═══════════════════ */

.rx-steps {
  position: relative;
  z-index: 10;
  margin-top: 16vh;
}

/* Высоту секции ставит скрипт: запас дорожки + экран. Экран внутри
   приколот, пока дорожка едет влево */
.rx-steps-pin {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100svh;
  overflow: hidden;
}

.rx-head--tight {
  padding: 0 24px;
}

.rx-rail {
  --rx-steps: 0;
  position: relative;
  width: min(1100px, 100% - 48px);
  height: 12px;
  margin: 48px auto 0;
}

.rx-rail::before,
.rx-rail-fill {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--rx-ink-12);
}

.rx-rail-fill {
  background: var(--scene-ink);
  transform-origin: left;
  scale: var(--rx-steps) 1;
}

.rx-rail-dot {
  position: absolute;
  top: 0;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--scene-paper);
  box-shadow: inset 0 0 0 2px var(--rx-ink-20);
  transition:
    background-color 0.35s,
    box-shadow 0.35s,
    scale 0.35s var(--rx-ease);
}

.rx-rail-dot[data-i="0"] {
  left: 0;
}
.rx-rail-dot[data-i="1"] {
  left: 25%;
}
.rx-rail-dot[data-i="2"] {
  left: 50%;
}
.rx-rail-dot[data-i="3"] {
  left: 75%;
}
.rx-rail-dot[data-i="4"] {
  left: 100%;
}

.rx-rail-dot.is-on {
  background: var(--scene-ink);
  box-shadow: 0 0 0 5px var(--rx-ink-12);
  scale: 1.15;
}

.rx-track-wrap {
  margin-top: 40px;
}

/* Первая карточка встаёт под начало рельса */
.rx-track {
  display: flex;
  gap: 16px;
  width: max-content;
  padding: 0 24px 0 max(24px, (100vw - 1100px) / 2);
  list-style: none;
  will-change: transform;
}

.rx-step {
  display: flex;
  flex-direction: column;
  width: clamp(280px, 27vw, 380px);
  min-height: 300px;
  padding: 28px 30px 30px;
  transition:
    translate 0.5s var(--rx-ease),
    box-shadow 0.5s;
}

/* Номер шага — контуром; у текущего шага заливается */
.rx-step-n {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--rx-ink-20);
  transition:
    color 0.5s,
    -webkit-text-stroke-color 0.5s;
}

.rx-step.is-on .rx-step-n {
  color: var(--scene-ink);
  -webkit-text-stroke-color: transparent;
}

.rx-step.is-on {
  translate: 0 -8px;
}

.rx-step h3 {
  margin-top: auto;
  padding-top: 40px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.rx-step p {
  margin-top: 10px;
  color: var(--rx-ink-55);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.015em;
}

/* Последний шаг — тёмный, как плашка ИИ: старт */
.rx-step--go {
  position: relative;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(170deg, #1f2229 0%, #0b0d12 75%);
  box-shadow:
    inset 0 2px 2px #ffffff29,
    inset 0 0 0 1px #ffffff14,
    0 24px 65px -30px #000000bf;
}

.rx-step--go p {
  color: #ffffff8c;
}

.rx-step--go .rx-step-n {
  -webkit-text-stroke-color: #ffffff38;
}

.rx-step--go.is-on .rx-step-n {
  background: var(--rx-pearl);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke-color: transparent;
  animation: rx-pearl 6s linear infinite;
}

/* — Призыв — */

.rx-cta-wrap {
  max-width: 1240px;
  margin: 10vh auto 0;
  padding: 0 24px;
}

.rx-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 24px;
  color: #fff;
  background: #07080b;
  box-shadow:
    inset 0 1px #ffffff2e,
    inset 0 0 0 1px #ffffff12,
    0 40px 90px -40px #000000d9;
}

/* Сияние: три размытых перламутровых пятна медленно ходят по кругу */
.rx-cta-aurora {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
}

.rx-cta-aurora i {
  position: absolute;
  width: 46%;
  aspect-ratio: 1.6;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  mix-blend-mode: screen;
  animation: rx-drift 16s ease-in-out infinite alternate;
}

.rx-cta-aurora i:nth-child(1) {
  left: 4%;
  bottom: -26%;
  background: #42a1ff;
}

.rx-cta-aurora i:nth-child(2) {
  left: 30%;
  bottom: -34%;
  background: #a142ff;
  animation-duration: 21s;
  animation-delay: -6s;
}

.rx-cta-aurora i:nth-child(3) {
  right: 2%;
  bottom: -24%;
  background: #ff7ad9;
  opacity: 0.4;
  animation-duration: 18s;
  animation-delay: -11s;
}

@keyframes rx-drift {
  0% {
    translate: 0 0;
    scale: 1;
  }
  50% {
    translate: 12% -10%;
    scale: 1.15;
  }
  100% {
    translate: -10% 4%;
    scale: 0.92;
  }
}

.rx-cta-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 104px 32px 92px;
  text-align: center;
}

.rx-cta-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.6vw, 64px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.05em;
}

.rx-cta-sub {
  max-width: 44ch;
  margin-top: 20px;
  color: #ffffffa6;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.rx-cta-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}

.rx-cta-note {
  margin-top: 26px;
  color: #ffffff66;
  font-size: 13px;
  letter-spacing: -0.01em;
}

/* Кнопка: белая пилюля, по наведению вокруг загорается радужная кайма —
   та же, что у «Подключиться» на первом экране */
.rx-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 32px;
  border-radius: 99px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #0b0d12;
  background: #fff;
  transition:
    scale 0.4s var(--rx-ease),
    background-color 0.3s;
}

.rx-btn:hover {
  scale: 1.03;
}

.rx-btn-label {
  position: relative;
  z-index: 2;
}

.rx-btn-ring,
.rx-btn-glow {
  position: absolute;
  pointer-events: none;
  background: var(--rb-grad);
  background-size: 200%;
  animation: rh-rainbow 2s linear infinite;
  opacity: 0;
  transition: opacity 0.35s;
}

.rx-btn-ring {
  inset: -3px;
  border-radius: 99px;
  padding: 3px;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
}

.rx-btn-glow {
  left: 50%;
  bottom: -26%;
  width: 70%;
  height: 26%;
  translate: -50% 0;
  filter: blur(14px);
}

.rx-btn:hover .rx-btn-ring,
.rx-btn:focus-visible .rx-btn-ring {
  opacity: 1;
}

.rx-btn:hover .rx-btn-glow,
.rx-btn:focus-visible .rx-btn-glow {
  opacity: 0.9;
}

.rx-btn:focus-visible {
  outline: none;
}

.rx-btn--ghost {
  color: #fff;
  background: transparent;
  box-shadow: inset 0 0 0 1px #ffffff40;
}

.rx-btn--ghost:hover {
  background: #ffffff14;
}

/* ═══════════════════ Вопросы ═══════════════════ */

.rx-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
  gap: 48px;
  align-items: start;
}

.rx-faq-side {
  position: sticky;
  top: 18vh;
}

.rx-faq-list {
  border-top: 1px solid var(--rx-ink-12);
}

.rx-q {
  border-bottom: 1px solid var(--rx-ink-12);
}

.rx-q-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 26px 4px;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.03em;
  text-align: left;
  color: inherit;
  background: none;
  cursor: pointer;
}

.rx-q-btn span {
  transition: translate 0.4s var(--rx-ease);
}

.rx-q-btn:hover span,
.rx-q.is-open .rx-q-btn span {
  translate: 6px 0;
}

.rx-q-btn:focus-visible {
  outline: 2px solid var(--rx-ink-20);
  outline-offset: 4px;
  border-radius: 6px;
}

/* Плюс в кружке: открытый вопрос — крестик на залитом круге */
.rx-q-plus {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--rx-ink-20);
  transition:
    background-color 0.4s,
    box-shadow 0.4s,
    rotate 0.5s var(--rx-ease);
}

.rx-q-plus::before,
.rx-q-plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  margin: -0.75px 0 0 -6px;
  border-radius: 2px;
  background: var(--scene-ink);
  transition: background-color 0.4s;
}

.rx-q-plus::after {
  rotate: 90deg;
}

.rx-q.is-open .rx-q-plus {
  rotate: 135deg;
  background: var(--scene-ink);
  box-shadow: inset 0 0 0 1px var(--scene-ink);
}

.rx-q.is-open .rx-q-plus::before,
.rx-q.is-open .rx-q-plus::after {
  background: var(--scene-paper);
}

.rx-q-a {
  height: 0;
  overflow: hidden;
  transition: height 0.5s var(--rx-ease);
}

.rx-q-a p {
  max-width: 60ch;
  padding: 0 60px 28px 10px;
  color: var(--rx-ink-60);
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: -0.01em;
  opacity: 0;
  translate: 0 -8px;
  transition:
    opacity 0.45s 0.08s,
    translate 0.45s 0.08s var(--rx-ease);
}

.rx-q.is-open .rx-q-a p {
  opacity: 1;
  translate: 0 0;
}

/* ═══════════════════ Подвал ═══════════════════ */

.rx-foot {
  position: relative;
  z-index: 10;
  max-width: 1440px;
  margin: 26vh auto 0;
  padding: 0 24px 28px;
  overflow: hidden;
}

.rx-foot-top {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--rx-ink-12);
}

.rx-foot-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.46em;
  height: max-content;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--scene-ink);
}

.rx-foot-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, auto));
  gap: 56px;
}

.rx-foot-cols div {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.rx-foot-cap {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.45;
}

.rx-foot-cols a {
  width: max-content;
  color: var(--rx-ink-60);
  font-size: 14px;
  letter-spacing: -0.01em;
  transition: color 0.25s;
}

.rx-foot-cols a:hover {
  color: var(--scene-ink);
}

/* Знак во всю ширину: кегль подгоняет скрипт, буквы поднимаются по прокрутке.
   Низ уходит в прозрачность — знак растворяется в странице */
.rx-word {
  width: max-content;
  margin: 8vh auto 0;
  /* Отрицательная разрядка оставляет хвост за последней буквой, и знак
     визуально съезжает вправо — возвращаем его на середину */
  translate: -0.025em 0;
  font-family: var(--font-display);
  font-size: 17vw;
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.055em;
  white-space: nowrap;
  text-align: center;
  user-select: none;
  background: linear-gradient(180deg, var(--scene-ink) 30%, color-mix(in srgb, var(--scene-ink) 0%, transparent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* У разобранного на буквы знака заливка — на каждой букве: background-clip
   родителя на inline-block детей не переходит */
.rx-word.is-split {
  background: none;
}

.rx-word.is-split .rx-c {
  background: linear-gradient(180deg, var(--scene-ink) 30%, color-mix(in srgb, var(--scene-ink) 0%, transparent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.rx-foot-bot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-top: 28px;
  color: var(--rx-ink-55);
  font-size: 12px;
  line-height: 1.55;
}

.rx-foot-bot p {
  max-width: 96ch;
}

.rx-foot-bot span {
  white-space: nowrap;
}

/* ═══════════════════ Узкие экраны ═══════════════════ */

@media (max-width: 900px) {
  .rx-sec {
    padding-top: 16vh;
  }

  .rx-pricing-grid,
  .rx-partners-grid,
  .rx-faq-grid {
    grid-template-columns: 1fr;
  }

  .rx-split {
    padding: 28px 24px 26px;
  }

  .rx-calc-in {
    padding: 28px 22px 24px;
  }

  .rx-net {
    max-width: 440px;
    margin: 0 auto;
  }

  .rx-faq-side {
    position: static;
  }

  /* Шаги — столбцом, без приколотого экрана и бокового хода */
  .rx-steps-pin {
    position: static;
    height: auto;
    overflow: visible;
  }

  .rx-rail {
    display: none;
  }

  .rx-track {
    flex-direction: column;
    width: auto;
    padding: 0 24px;
    transform: none !important;
  }

  .rx-step {
    width: auto;
    min-height: 0;
  }

  .rx-step h3 {
    padding-top: 26px;
  }

  .rx-cta-in {
    padding: 72px 22px 64px;
  }

  .rx-foot-top {
    flex-direction: column;
  }

  .rx-foot-cols {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
  }

  .rx-foot-bot {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

@media (max-width: 560px) {
  .rx-split-nums b {
    font-size: 60px;
  }

  .rx-tiers {
    gap: 4px;
  }

  .rx-tier {
    padding: 9px 8px;
    font-size: 10.5px;
  }

  .rx-q-a p {
    padding-right: 8px;
  }
}

/* ═══════════════════ Без движения ═══════════════════ */

@media (prefers-reduced-motion: reduce) {
  .rx-js [data-reveal],
  .rx-js [data-stagger] > * {
    opacity: 1;
    translate: none;
    filter: none;
    transition: none;
  }

  .rx-cta-aurora i,
  .rx-net-ring,
  .rx-btn-ring,
  .rx-btn-glow {
    animation: none;
  }

  .rx-steps-pin {
    position: static;
    height: auto;
  }

  .rx-rail {
    display: none;
  }

  .rx-track {
    flex-wrap: wrap;
    width: auto;
    transform: none !important;
  }
}

/* ——— Узкая колонка делёжа: цифры стопкой, между ними горизонтальная черта ——— */

.rx-split {
  padding: 28px 26px 26px;
}

.rx-split .rx-split-nums {
  flex-direction: column;
  align-items: stretch;
  gap: 22px;
  margin-top: 30px;
}

.rx-split .rx-split-nums::before {
  top: 50%;
  bottom: auto;
  left: 0;
  right: 0;
  width: auto;
  height: 1px;
}

.rx-split .rx-split-us {
  text-align: left;
}

.rx-split .rx-split-nums b {
  font-size: clamp(52px, 5.2vw, 76px);
}

.rx-split .rx-split-nums span:not([data-count]) {
  margin-top: 8px;
}

.rx-split .rx-note {
  margin-top: auto;
  padding-top: 22px;
}

/* ——— Калькулятор во всю ширину: слева ввод, справа расчёт ——— */

.rx-calc-in {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 56px;
  align-items: end;
  padding: 36px 40px 34px;
}

.rx-calc-in .rx-calc-rows {
  margin-top: 0;
}

@media (max-width: 1100px) {
  .rx-pricing-grid {
    grid-template-columns: 1fr;
  }

  .rx-split .rx-split-nums {
    flex-direction: row;
  }

  .rx-split .rx-split-nums::before {
    top: 6%;
    bottom: 4px;
    left: 50%;
    right: auto;
    width: 1px;
    height: auto;
  }

  .rx-split .rx-split-us {
    text-align: right;
  }
}

@media (max-width: 900px) {
  .rx-calc-in {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 28px 22px 24px;
  }
}

/* Над первой строкой расчёта черты нет: сверху её ничто не отделяет */
.rx-calc-rows div:first-child {
  border-top: 0;
}

/* Шкала доли: два ряда по 20 клеток. Закрашенные — цветом своей цифры,
   остальные — бледным следом, чтобы было видно целое. --rx-split растёт по
   прокрутке, клетка с номером --k закрашивается, когда до неё дошла волна */
.rx-meter {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 3px;
  margin-top: 14px;
}

.rx-meter b {
  display: block;
  height: 6px;
  border-radius: 1.5px;
  background: var(--rx-ink-08);
}

/* Закрашенная клетка — заливка поверх бледного следа отдельным слоем:
   так её можно плавно гасить, не трогая след */
.rx-meter b {
  position: relative;
}

.rx-meter b.is-on::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--scene-ink);
}

.rx-meter--us b.is-on::after {
  background: var(--rx-ice);
}

/* Эквалайзер: крайние клетки дышат — плавно уходят почти в ноль и
   возвращаются; длительность и сдвиг у каждой свои, рисунок не повторяется */
.rx-meter b.is-eq::after {
  animation: rx-eq var(--eq-dur) cubic-bezier(0.45, 0, 0.55, 1) var(--eq-del) infinite;
}

@keyframes rx-eq {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: var(--eq-low);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rx-meter b.is-eq::after {
    animation: none;
  }
}

/* Итог стоит вровень с нижним краем плашек ставок */
.rx-calc-in .rx-calc-total {
  padding-bottom: 0;
  align-items: flex-end;
}

/* Между долями разделителя нет: их и так разводят шкалы */
.rx-split .rx-split-nums::before {
  display: none;
}


/* Подписи расчёта — в одну строку */
.rx-calc-in .rx-calc-rows dt {
  white-space: nowrap;
}

/* ——— Калькулятор в две строки: сверху ввод, снизу расчёт тремя колонками ——— */

.rx-calc-in {
  grid-template-columns: 1fr;
  gap: 0;
  height: 100%;
  align-content: space-between;
}

.rx-calc-in .rx-calc-rows {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  margin-top: 30px;
  border-top: 1px solid #ffffff17;
}

.rx-calc-in .rx-calc-rows div,
.rx-calc-in .rx-calc-rows div:first-child {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  padding: 18px 0 0;
  border-top: 0;
}

.rx-calc-in .rx-calc-rows div + div {
  padding-left: 24px;
  border-left: 1px solid #ffffff17;
}

.rx-calc-in .rx-calc-rows dd {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.rx-calc-in .rx-calc-total dd {
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
}

.rx-calc {
  display: flex;
  flex-direction: column;
}

.rx-calc .rx-calc-in {
  flex: 1;
}

@media (max-width: 560px) {
  .rx-calc-in .rx-calc-rows {
    grid-template-columns: 1fr;
  }

  .rx-calc-in .rx-calc-rows div + div {
    padding-left: 0;
    border-left: 0;
  }
}


/* ——— Калькулятор: слева ввод и расчёт, справа колонка итога ———
   Итог — отдельная колонка во всю высоту плашки, на неё падает свет из угла.
   Слайдер, ставки и две строки расчёта живут в левой колонке */

.rx-calc-in {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 0;
  align-content: stretch;
  align-items: stretch;
  padding: 0;
}

.rx-calc-l {
  display: flex;
  flex-direction: column;
  padding: 36px 36px 30px 40px;
}

.rx-calc-l .rx-calc-rows {
  grid-template-columns: 1fr 1fr;
  margin-top: auto;
  padding-top: 0;
}

.rx-calc-l .rx-tiers {
  margin-bottom: 28px;
}

.rx-calc-sum {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 36px 36px 30px;
  border-left: 1px solid #ffffff17;
  background: linear-gradient(180deg, #ffffff0a, #ffffff03 60%, #ffffff00);
}

.rx-calc-sum .rx-calc-total {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 0;
  border: 0;
}

.rx-calc-sum dt {
  font-size: 14px;
  opacity: 0.6;
}

.rx-calc-sum .rx-calc-total dd {
  font-family: var(--font-display);
  font-size: clamp(32px, 2.8vw, 40px);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rx-calc-sum .rx-calc-total dd::after {
  content: " USDT";
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  opacity: 0.45;
}

@media (max-width: 900px) {
  .rx-calc-in {
    grid-template-columns: 1fr;
  }

  .rx-calc-l,
  .rx-calc-sum {
    padding: 26px 22px;
  }

  .rx-calc-sum {
    border-left: 0;
    border-top: 1px solid #ffffff17;
  }
}

/* Слева остался только ввод: ставки прижаты к низу колонки */
.rx-calc-l .rx-tiers {
  margin-top: auto;
  margin-bottom: 0;
}

/* Справа: две строки расчёта, под ними итог */
.rx-calc-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #ffffff17;
  font-size: 14px;
}

.rx-calc-line dt {
  opacity: 0.55;
}

.rx-calc-line dd {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rx-calc-line dd::after {
  content: " USDT";
  opacity: 0.45;
  font-size: 0.8em;
}

.rx-calc-sum .rx-calc-total {
  margin-top: 22px;
}

/* Строки расчёта: подпись сверху, цифра под ней — колонка узкая, в строку
   подпись с цифрой не помещались */
.rx-calc-line {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 0;
}

.rx-calc-line dd {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.03em;
}


/* Колонка делёжа: больше воздуха от краёв, контент мельче */
.rx-split {
  padding: 36px 36px 34px;
}

.rx-split .rx-split-nums {
  gap: 26px;
  margin-top: 28px;
}

.rx-split .rx-split-nums b {
  font-size: clamp(44px, 4.2vw, 62px);
}

.rx-split .rx-split-nums span:not([data-count]) {
  margin-top: 6px;
  font-size: 13px;
}

.rx-split .rx-meter {
  gap: 2.5px;
  margin-top: 12px;
}

.rx-split .rx-meter b {
  height: 5px;
}

/* ——— Фон блока условий: робот ———
   Справа, в стороне от заголовка, чтобы не мешать его читать: голова в
   пустом месте правее заголовка, корпус уходит за плашки и книзу растворяется. Плашки стоят выше слоем — стекло размывает
   его за собой */
.rx-pricing {
  isolation: isolate;
}

.rx-pricing > :not(.rx-robot) {
  position: relative;
  z-index: 1;
}

.rx-robot {
  position: absolute;
  z-index: 0;
  top: 12vh;
  right: -130px;
  width: auto;
  height: min(108%, 860px);
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 92%);
}

@media (max-width: 900px) {
  .rx-robot {
    height: 640px;
    top: 6vh;
    opacity: 0.6;
  }
}

/* ═══════════════════ Условия: сцена с роботом ═══════════════════
   Блок выходит из сетки на всю ширину экрана. По центру крупно робот, слева
   делёж прибыли гигантскими цифрами, справа калькулятор — оба без плашек,
   прямо на фоне страницы. Цвета набора — от темы */

.rx-price {
  position: relative;
  z-index: 10;
  padding-top: 24vh;
  overflow-x: clip;
}

.rx-price-head {
  position: relative;
  z-index: 2;
  padding: 0 24px;
}

.rx-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 40px;
  min-height: min(92vh, 860px);
  margin-top: 4vh;
  padding: 0 clamp(24px, 4vw, 64px) 6vh;
}

/* Робот — по центру во всю высоту сцены, книзу растворяется */
.rx-bot {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 0;
  height: 100%;
  width: auto;
  max-width: none;
  translate: -50% 0;
  pointer-events: none;
  user-select: none;
  /* Книзу растворяется, плечи гаснут к краям — над ними цифры и калькулятор */
  -webkit-mask-image:
    linear-gradient(180deg, #000 0%, #000 62%, transparent 98%),
    linear-gradient(90deg, transparent 8%, #000 34%, #000 66%, transparent 92%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, #000 0%, #000 62%, transparent 98%),
    linear-gradient(90deg, transparent 8%, #000 34%, #000 66%, transparent 92%);
  mask-composite: intersect;
}

.rx-shares,
.rx-calc--bare {
  position: relative;
  z-index: 1;
}

/* — Делёж: гигантские цифры слева — */

.rx-price .rx-shares {
  display: flex;
  flex-direction: column;
  gap: 4vh;
  max-width: 420px;
  padding: 0;
}

.rx-price .rx-shares .rx-chip {
  align-self: flex-start;
}

.rx-share b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(80px, 10vw, 160px);
  font-weight: 500;
  line-height: 0.82;
  letter-spacing: -0.07em;
  font-variant-numeric: tabular-nums;
}

.rx-share--us b {
  color: var(--rx-ice);
}

.rx-share-cap {
  display: block;
  margin-top: 12px;
  color: var(--scene-ink);
  font-size: 15px;
  letter-spacing: -0.01em;
}

.rx-price .rx-meter {
  max-width: 340px;
  margin-top: 16px;
}

/* — Калькулятор без плашки справа — */

.rx-calc.rx-calc--bare {
  justify-self: end;
  display: flex;
  flex-direction: column;
  width: min(100%, 430px);
  overflow: visible;
  color: var(--scene-ink);
  background: none;
  box-shadow: none;
  border-radius: 0;
}

.rx-calc--bare .rx-chip {
  align-self: flex-start;
}

.rx-calc--bare .rx-calc-dep {
  margin-top: 22px;
}

.rx-calc--bare .rx-calc-val {
  font-size: clamp(48px, 4.6vw, 68px);
}

.rx-calc--bare .rx-calc-dep span {
  color: var(--rx-ink-55);
  opacity: 1;
}

.rx-calc--bare .rx-range::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--scene-ink) 0 var(--rx-fill), var(--rx-ink-12) var(--rx-fill) 100%);
}

.rx-calc--bare .rx-range::-moz-range-track {
  background: linear-gradient(90deg, var(--scene-ink) 0 var(--rx-fill), var(--rx-ink-12) var(--rx-fill) 100%);
}

.rx-calc--bare .rx-range::-webkit-slider-thumb {
  background: var(--scene-ink);
  box-shadow:
    0 0 0 5px var(--rx-ink-12),
    0 6px 14px -4px #0006;
}

.rx-calc--bare .rx-range::-moz-range-thumb {
  background: var(--scene-ink);
}

.rx-calc--bare .rx-tier {
  color: var(--rx-ink-55);
  box-shadow: inset 0 0 0 1px var(--rx-ink-20);
}

.rx-calc--bare .rx-tier b {
  color: var(--scene-ink);
}

.rx-calc--bare .rx-tier.is-on {
  background: var(--scene-ink);
  color: color-mix(in srgb, var(--scene-paper) 65%, transparent);
  box-shadow: none;
}

.rx-calc--bare .rx-tier.is-on b {
  color: var(--scene-paper);
}

.rx-calc-list {
  margin-top: 26px;
}

.rx-calc-list div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--rx-ink-12);
  font-size: 14px;
}

.rx-calc-list dt {
  color: var(--rx-ink-55);
}

.rx-calc-list dd {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rx-calc-list dd::after {
  content: " USDT";
  color: var(--rx-ink-55);
  font-size: 0.8em;
}

.rx-calc-list .rx-calc-total {
  padding-bottom: 0;
}

.rx-calc-list .rx-calc-total dt {
  color: var(--scene-ink);
}

.rx-calc-list .rx-calc-total dd {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
}

@media (max-width: 1000px) {
  .rx-stage {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-top: 46vh;
  }

  .rx-bot {
    top: 0;
    bottom: auto;
    height: 52vh;
  }

  .rx-calc.rx-calc--bare {
    justify-self: stretch;
    width: 100%;
  }
}

/* Робот один на обе темы — белый рендер */

/* Робот без растворения: его низ уходит под следующий блок, который
   наезжает на сцену тёмной плитой */
.rx-bot {
  -webkit-mask-image: none;
  mask-image: none;
}

.rx-stage {
  padding-bottom: 8vh;
}

/* ——— «С чего начать» — тёмная плита во всю ширину под сценой с роботом ———
   Свои цвета набора: светлый текст на тёмном при любой теме. Производные
   --rx-ink-* пересчитываем здесь же: на :root они уже посчитаны от тёмного
   набора светлой темы и сами не обновятся */
#start {
  --scene-ink: #ffffff;
  --scene-paper: #0b0d12;
  --rx-ink-08: rgba(255, 255, 255, 0.08);
  --rx-ink-12: rgba(255, 255, 255, 0.12);
  --rx-ink-20: rgba(255, 255, 255, 0.2);
  --rx-ink-55: rgba(255, 255, 255, 0.55);
  --rx-ink-60: rgba(255, 255, 255, 0.6);
  color: #fff !important;
  z-index: 12;
  margin-top: 0;
  padding-top: 6vh;
  padding-bottom: 6vh;
}

#start::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: calc(50% - (100vw - var(--sbw, 0px)) / 2);
  width: calc(100vw - var(--sbw, 0px));
  border-radius: 36px;
  background:
    radial-gradient(60% 50% at 80% 0%, #8fdcff14, #8fdcff00 70%),
    linear-gradient(180deg, #11141a 0%, #0b0d12 40%);
  box-shadow:
    inset 0 1px #ffffff1f,
    0 -30px 80px -40px #0009;
}


/* Плечи робота заходят под колонки. Плашек нет, но под текстом лежит мягкая
   подсветка цветом фона страницы — без краёв, только чтобы читались строки */
.rx-shares::before,
.rx-calc--bare::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -18% -22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--scene-paper) 66%, color-mix(in srgb, var(--scene-paper) 0%, transparent) 100%);
  opacity: 0.94;
  pointer-events: none;
}

/* Всё, что тянется на ширину окна: 100vw включает полосу прокрутки, и без
   поправки страница уезжала вбок на её ширину. --sbw ставит скрипт */
.rh-metricbg {
  left: calc(50% - (100vw - var(--sbw, 0px)) / 2);
  width: calc(100vw - var(--sbw, 0px));
}

/* Колонки — выше, ближе к лицу: по середине сцены, а не у её низа */
.rx-stage {
  align-items: center;
  padding-bottom: 14vh;
}

/* Крупно только ваша доля; 30% — в прежнем размере */
.rx-share--us b {
  font-size: clamp(56px, 6.4vw, 104px);
}

/* Заголовки колонок — без пилюль, тем же набором, что названия стратегий
   («Rheo CopyTrade»): Manrope 26px, плотная разрядка */
.rx-col-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

/* Подписи ставок — в одну строку */
.rx-calc--bare .rx-tier {
  white-space: nowrap;
}

.rx-calc-list div:first-child {
  border-top: 0;
}

/* Стеклянные шаги на тёмной плите: светлое стекло светлой темы здесь
   слепило бы, поэтому стекло всегда тёмное */
#start .rx-glass {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px #ffffff14,
    0 24px 50px -30px #000c;
}

/* Призыв — отдельной секцией после «Партнёрам» */
.rx-cta-sec {
  position: relative;
  z-index: 10;
  padding-top: 24vh;
}

.rx-cta-sec .rx-cta-wrap {
  margin-top: 0;
}

/* Чертёж-продолжение робота на тёмной плите. Ширина та же, что у фото над
   ним (--bot-w меряет скрипт), — так линии рук и корпуса продолжают края
   фото без зазора. Содержимое шагов лежит поверх */
.rx-blueprint {
  position: absolute;
  z-index: 0;
  top: 0;
  /* Чертёж шире фото: руки выходят за его края. Ширина и сдвиг — в долях
     ширины фото над ним (--bot-w), так линии продолжают края фото точно */
  left: calc(50% - var(--bot-w, 1100px) * 0.5 - var(--bot-w, 1100px) * 0.029);
  width: calc(var(--bot-w, 1100px) * 1.0578);
  max-width: none;
  height: auto;
  opacity: 0.25;
  pointer-events: none;
  user-select: none;
}

/* Чертёж — фон плиты: что влезло в неё, то и видно, прокручивается вместе
   с плитой */
#start {
  overflow: clip;
}

#start .rx-steps-run {
  position: relative;
  z-index: 1;
}

/* ═══════════════════ Шаги подключения — вкладки, как у Veles ═══════════════════
   Плита тёмная при любой теме: набор светлый. Сверху ряд шагов с полосой
   прогресса, под ним одна большая карточка: слева текст, справа иллюстрация
   интерфейса, собранная из HTML (не картинкой — резкая на любом экране) */

.rx-ob {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.rx-ob-kicker {
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8fdcff;
}

.rx-ob-nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 54px;
}

.rx-ob-tab {
  --ob-p: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  text-align: left;
  color: #ffffff73;
  background: none;
  cursor: pointer;
  transition: color 0.3s;
}

.rx-ob-tab span {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.rx-ob-tab span i {
  font-style: normal;
  font-size: 12px;
  opacity: 0.6;
}

.rx-ob-tab:hover,
.rx-ob-tab.is-on,
.rx-ob-tab.is-done {
  color: #fff;
}

.rx-ob-tab:focus-visible {
  outline: 2px solid #ffffff40;
  outline-offset: 6px;
  border-radius: 4px;
}

.rx-ob-line {
  position: relative;
  display: block;
  height: 2px;
  border-radius: 2px;
  background: #ffffff1f;
  overflow: hidden;
}

.rx-ob-line b {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #fff;
  transform-origin: left;
  scale: var(--ob-p) 1;
}

.rx-ob-tab.is-on .rx-ob-line b {
  background: #8fdcff;
}

/* — Карточки — */

.rx-ob-cards {
  position: relative;
  display: grid;
  margin-top: 28px;
}

.rx-ob-card {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: 40px;
  align-items: center;
  min-height: 440px;
  padding: 44px 48px;
  border-radius: 22px;
  color: #fff;
  background:
    radial-gradient(70% 90% at 85% 0%, #8fdcff14, #8fdcff00 70%),
    rgba(255, 255, 255, 0.04);
  box-shadow:
    inset 0 1px #ffffff1a,
    inset 0 0 0 1px #ffffff0f,
    0 30px 70px -40px #000;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  translate: 0 14px;
  transition:
    opacity 0.55s var(--rx-ease),
    translate 0.55s var(--rx-ease),
    visibility 0s 0.55s;
}

.rx-ob-card.is-on {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition:
    opacity 0.55s var(--rx-ease),
    translate 0.55s var(--rx-ease),
    visibility 0s;
}

.rx-ob-copy h3 {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.rx-ob-copy p {
  margin-top: 16px;
  max-width: 34ch;
  color: #ffffff99;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.015em;
}

/* — Иллюстрация: окна интерфейса, соединённые пунктиром — */

.rx-ob-art {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

/* Детали иллюстрации заезжают по очереди, когда карточка открывается */
.rx-ob-art > * {
  opacity: 0;
  translate: 0 18px;
  transition:
    opacity 0.6s var(--rx-ease),
    translate 0.6s var(--rx-ease);
}

.rx-ob-card.is-on .rx-ob-art > * {
  opacity: 1;
  translate: 0 0;
}

.rx-ob-card.is-on .rx-ob-art > :nth-child(2) {
  transition-delay: 0.15s;
}

.rx-ob-card.is-on .rx-ob-art > :nth-child(3) {
  transition-delay: 0.3s;
}

.ui-win {
  position: relative;
  flex-shrink: 0;
  width: 250px;
  padding: 22px;
  border-radius: 16px;
  color: #0b0d12;
  background: #fff;
  box-shadow: 0 24px 50px -24px #000;
  font-size: 13px;
}

.ui-win--small {
  width: 210px;
}

.ui-win--wide {
  width: 360px;
}

.ui-win--browser {
  padding-top: 40px;
}

.ui-dots {
  position: absolute;
  top: 14px;
  left: 16px;
  display: flex;
  gap: 6px;
}

.ui-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e2e4e8;
}

.ui-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.ui-logo img {
  width: 26px;
  height: auto;
}

.ui-cap {
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0b0d1280;
}

.ui-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #f3f4f6;
}

.ui-field span {
  font-size: 10px;
  color: #0b0d1270;
}

.ui-field em {
  font-style: normal;
  font-size: 13px;
  color: #0b0d12cc;
}

.ui-btn {
  margin-top: 14px;
  padding: 11px;
  border-radius: 99px;
  text-align: center;
  font-weight: 500;
  color: #fff;
  background: #0b0d12;
}

.ui-btn--go {
  background: linear-gradient(90deg, #0b0d12, #2a3a4a);
  box-shadow: 0 0 0 3px #8fdcff40;
}

.ui-link {
  padding: 12px;
  border-radius: 10px;
  text-align: center;
  background: #f3f4f6;
  color: #0b0d1299;
}

.ui-link b {
  color: #3a9fd6;
  font-weight: 600;
}

.ui-bingx {
  margin: 4px 0 16px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #2a54ff;
}

.ui-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid #0b0d1214;
  font-size: 12.5px;
  color: #0b0d1299;
}

.ui-row b {
  font-weight: 500;
  color: #0b0d12;
}

.ui-row b.ui-ok {
  color: #1e9d6a;
}

.ui-bal {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ui-bal b {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.05em;
}

.ui-bal span {
  color: #0b0d1280;
}

.ui-spark {
  height: 56px;
  margin: 10px 0 8px;
  color: #3a9fd6;
}

.ui-spark svg {
  width: 100%;
  height: 100%;
}

.ui-tog {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid #0b0d1214;
}

.ui-tog i {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 99px;
  background: #d9dce2;
}

.ui-tog i::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px #0003;
}

.ui-tog.is-on i {
  background: #0b0d12;
}

.ui-tog.is-on i::after {
  left: 16px;
}

/* «Вывод средств» выключен — подсвечиваем красным */
.ui-tog:not(.is-on) span {
  color: #d23b3b;
}

.ui-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px #0b0d121c;
  color: #0b0d12b3;
}

.ui-opt i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px #0b0d1250;
}

.ui-opt.is-on {
  box-shadow: inset 0 0 0 1.5px #0b0d12;
  color: #0b0d12;
}

.ui-opt.is-on i {
  box-shadow: inset 0 0 0 4.5px #0b0d12;
}

/* Пунктирная связка между окнами, по ней бежит огонёк */
.ui-wire {
  position: relative;
  flex: 1 1 60px;
  min-width: 40px;
  max-width: 120px;
  height: 2px;
  background: repeating-linear-gradient(90deg, #ffffff66 0 6px, transparent 6px 12px);
}

.ui-wire i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: #8fdcff;
  box-shadow: 0 0 12px #8fdcff;
  animation: ui-run 1.8s linear infinite;
}

@keyframes ui-run {
  from {
    left: 0;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  to {
    left: calc(100% - 8px);
    opacity: 0;
  }
}

.ui-pill {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  padding: 6px 12px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: #0b0d12;
  background: #8fdcff;
  box-shadow: 0 0 0 5px #8fdcff26;
}

.ui-badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: 14px;
  color: #fff;
  background: #ffffff12;
  box-shadow: inset 0 0 0 1px #ffffff1f;
  font-size: 14px;
}

.ui-badge b {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #0b0d12;
  background: #8fdcff;
}

.ui-msg {
  flex-shrink: 0;
  width: 240px;
  padding: 16px 18px;
  border-radius: 16px 16px 16px 4px;
  color: #fff;
  background: #1f2a36;
  box-shadow: 0 24px 50px -24px #000;
  font-size: 13px;
  line-height: 1.5;
}

.ui-msg-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #8fdcff;
}

.ui-msg-head img {
  width: 18px;
  filter: invert(1);
}

.ui-msg p {
  color: #ffffffb3;
}

.ui-msg b {
  color: #fff;
  font-weight: 500;
}

.ui-msg .ui-plus {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: #8fdcff;
}

@media (max-width: 1000px) {
  .rx-ob-nav {
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    overflow-x: auto;
    padding-bottom: 6px;
  }

  .rx-ob-card {
    grid-template-columns: 1fr;
    padding: 30px 22px;
  }

  .rx-ob-art {
    flex-direction: column;
  }

  .ui-wire {
    flex: none;
    width: 2px;
    height: 34px;
    min-width: 0;
    background: repeating-linear-gradient(180deg, #ffffff66 0 6px, transparent 6px 12px);
  }

  .ui-wire i {
    display: none;
  }

  .ui-win,
  .ui-win--wide,
  .ui-msg {
    width: min(100%, 300px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-wire i {
    animation: none;
  }
}

/* Плита по высоте — во весь чертёж робота: иначе он обрывался на бёдрах.
   Высота чертежа = его ширина × 2161 / 2000 */
#start {
  min-height: calc(var(--bot-w, 1100px) * 1.0578 * 1.0805);
  padding-bottom: 10vh;
}

/* Воздух вокруг блока шагов — одинаковый сверху и снизу */
#start {
  padding-top: 16vh;
  padding-bottom: 16vh;
}

/* Чертёж гаснет к тексту и плашкам: под содержимым лежит мягкое пятно цветом
   плиты — у стыка с фото и по краям робот виден, у текста почти пропадает */
.rx-ob::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -10% -14%;
  border-radius: 50%;
  background: radial-gradient(closest-side, #0b0d12 58%, rgba(11, 13, 18, 0.6) 78%, rgba(11, 13, 18, 0) 100%);
  /* Не в ноль: у текста робот всё равно чуть проступает */
  opacity: 0.6;
  pointer-events: none;
}

/* Сверху воздуха больше, снизу плита кончается по содержимому — чертёж
   обрезается её краем */
#start {
  min-height: 0;
  padding-top: 24vh;
  padding-bottom: 12vh;
}

/* Карточка шага выше */
.rx-ob-card {
  min-height: 560px;
}

/* ═══════════════════ Шаги — все сразу, по референсу «After the release» ═══════════════════
   Заголовок лесенкой во всю ширину. Слева подпись, пилюля и список шагов
   крупной капителью. Справа три плашки уступом: две белые и тёмная высокая */

.rx-ob2 {
  max-width: 1320px;
}

/* Плита и так тёмная — пятно-гаситель под содержимым здесь шире */
.rx-ob2::before {
  inset: -6% -10%;
}

.rx-ob2-title {
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 96px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.055em;
  color: #fff;
}

.rx-ob2-title span {
  display: block;
}

.rx-ob2-title span + span {
  padding-left: 22%;
}

.rx-ob2-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr);
  gap: 40px;
  margin-top: 64px;
}

.rx-ob2-side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  padding-left: 8%;
}

.rx-ob2-cap {
  max-width: 22ch;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #ffffffb3;
}

.rx-ob2-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 10px 14px;
  border-radius: 99px;
  font-size: 15px;
  color: #fff;
  background: linear-gradient(90deg, #2a3442, #0b0d12);
  box-shadow:
    inset 0 1px #ffffff24,
    inset 0 0 0 1px #ffffff14;
}

.rx-ob2-chip img {
  width: 22px;
  height: auto;
  filter: invert(1);
}

.rx-ob2-list {
  margin-top: 28px;
  list-style: none;
}

.rx-ob2-list li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
}

.rx-ob2-list li i {
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #8fdcff;
  translate: 0 -0.5em;
}

/* — Плашки уступом — */

.rx-ob2-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: 14px;
}

.rx-ob2-card {
  display: flex;
  flex-direction: column;
  padding: 26px 26px 28px;
  border-radius: 26px;
  color: #0b0d12;
  background: #fff;
  box-shadow: 0 30px 60px -36px #000;
}

.rx-ob2-card--key {
  grid-column: 1;
  grid-row: 1;
}

.rx-ob2-card--dep {
  grid-column: 2;
  grid-row: 2;
}

.rx-ob2-card--go {
  grid-column: 3;
  grid-row: 1 / span 2;
  min-height: 520px;
  color: #fff;
  background:
    radial-gradient(90% 60% at 100% 0%, #8fdcff33, #8fdcff00 70%),
    linear-gradient(170deg, #1d2430 0%, #07080b 60%);
  box-shadow:
    inset 0 1px #ffffff26,
    inset 0 0 0 1px #ffffff12,
    0 30px 60px -30px #000;
}

.rx-ob2-card h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.rx-ob2-big {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: clamp(36px, 3.2vw, 48px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
}

.rx-ob2-card--dep .rx-ob2-big {
  margin: 0 0 22px;
}

.rx-ob2-small {
  margin-top: 8px;
  font-size: 13px;
  color: #0b0d1299;
}

.rx-ob2-text {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: #0b0d12b3;
}

.rx-ob2-card--go .rx-ob2-text {
  color: #ffffffb3;
}

/* Переключатели прав ключа */
.rx-ob2-tog {
  margin-top: 22px;
  list-style: none;
}

.rx-ob2-tog li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid #0b0d1214;
  font-size: 13.5px;
}

.rx-ob2-tog i {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 99px;
  background: #0b0d12;
}

.rx-ob2-tog i::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 16px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
}

.rx-ob2-tog .is-off span {
  color: #d23b3b;
}

.rx-ob2-tog .is-off i {
  background: #d9dce2;
}

.rx-ob2-tog .is-off i::after {
  left: 2px;
  box-shadow: 0 1px 3px #0003;
}

/* Полоса депозита */
.rx-ob2-bar {
  display: block;
  height: 6px;
  margin-top: auto;
  padding-top: 0;
  border-radius: 99px;
  background: #0b0d121a;
  overflow: hidden;
}

.rx-ob2-card--dep .rx-ob2-text {
  margin-bottom: 22px;
}

.rx-ob2-bar i {
  display: block;
  width: 58%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8fdcff00, #3a9fd6 40%, #0b0d12);
}

/* Тёмная высокая плашка */
.rx-ob2-arrow {
  width: 46px;
  height: 62px;
}

.rx-ob2-go {
  margin-top: auto;
}

.rx-ob2-card--go h3 {
  color: #8fdcff;
}

.rx-ob2-card--go .rx-ob2-big sup {
  margin-left: 8px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  vertical-align: top;
  color: #ffffff99;
}

.rx-ob2-card--go .rx-ob2-text {
  margin-top: 40px;
}

@media (max-width: 1000px) {
  .rx-ob2-title span + span {
    padding-left: 10%;
  }

  .rx-ob2-grid {
    grid-template-columns: 1fr;
  }

  .rx-ob2-side {
    padding-left: 0;
  }

  .rx-ob2-cards {
    grid-template-columns: 1fr 1fr;
  }

  .rx-ob2-card--key {
    grid-column: 1;
    grid-row: 1;
  }

  .rx-ob2-card--dep {
    grid-column: 2;
    grid-row: 1;
  }

  .rx-ob2-card--go {
    grid-column: 1 / span 2;
    grid-row: 2;
    min-height: 340px;
  }
}

@media (max-width: 560px) {
  .rx-ob2-cards {
    grid-template-columns: 1fr;
  }

  .rx-ob2-card--key,
  .rx-ob2-card--dep,
  .rx-ob2-card--go {
    grid-column: 1;
    grid-row: auto;
  }
}

.rx-ob2-note {
  margin-top: 8px;
  font-size: 12px;
  color: #ffffff80;
}

.rx-ob2-list li {
  font-size: clamp(17px, 1.45vw, 22px);
}

/* Подпись — обычным регистром, как подзаголовки разделов */
.rx-ob2-cap {
  max-width: 26ch;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.02em;
  text-transform: none;
  color: #ffffff99;
}

/* Шаги — каждый в одну строку: колонка шире, кегль чуть меньше */
.rx-ob2-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.9fr);
}

.rx-ob2-side {
  padding-left: 0;
}

.rx-ob2-list li {
  font-size: clamp(15px, 1.3vw, 20px);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .rx-ob2-list li {
    white-space: normal;
  }
}

/* Уточнение в шаге — мелко, обычным регистром */
.rx-ob2-list small {
  align-self: center;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #ffffff80;
}

/* Последний шаг — кнопкой: та же белая пилюля с радужной каймой, что в призыве */
.rx-ob2-list .rx-ob2-start {
  margin-top: 22px;
}

.rx-ob2-start .rx-btn {
  height: 50px;
  padding: 0 40px;
  font-family: var(--font-sans);
  font-size: 15px;
  text-transform: none;
}

/* Шапка над тёмной плитой: локально включаем тёмную тему — все её цвета
   считаются от --dark и --scene-ink */
header.rx-on-dark {
  --dark: 1;
  --scene-ink: #fff;
  --scene-paper: #0b0d12;
}

/* Лента закрытых сделок в тёмной плашке */
.rx-ob2-feed {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 26px;
  list-style: none;
}

.rx-ob2-feed li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #ffffff0d;
  box-shadow: inset 0 0 0 1px #ffffff12;
  font-size: 12.5px;
  transition:
    opacity 0.6s var(--rx-ease),
    translate 0.6s var(--rx-ease),
    max-height 0.6s var(--rx-ease),
    padding 0.6s var(--rx-ease),
    margin 0.6s var(--rx-ease);
  max-height: 60px;
}

.rx-ob2-feed li span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #ffffffcc;
  white-space: nowrap;
}

.rx-ob2-feed li span i {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8fdcff;
  box-shadow: 0 0 8px #8fdcff;
}

.rx-ob2-feed li em {
  font-style: normal;
  color: #ffffff66;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rx-ob2-feed li b {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #8fdcff;
  white-space: nowrap;
}

/* Новая сделка въезжает сверху, самая старая гаснет внизу */
.rx-ob2-feed li.is-new {
  opacity: 0;
  translate: 0 -12px;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: -8px;
}

.rx-ob2-feed li.is-old {
  opacity: 0;
}

.rx-ob2-feed li:nth-child(3) {
  opacity: 0.7;
}

.rx-ob2-feed li:nth-child(4) {
  opacity: 0.4;
}

.rx-ob2-card--go .rx-ob2-go {
  margin-top: 28px;
}

/* Чертёж от ряда плашек плавно уходит в ноль к низу плиты */
.rx-blueprint {
  -webkit-mask-image: linear-gradient(180deg, #000 var(--fade-a, 60%), transparent var(--fade-b, 100%));
  mask-image: linear-gradient(180deg, #000 var(--fade-a, 60%), transparent var(--fade-b, 100%));
}

/* Лента фиксированной высоты — на четыре строки: новая сделка сдвигает
   строки внутри, а не раздувает плашку, и плита не прыгает */
.rx-ob2-feed {
  height: 184px;
  overflow: hidden;
  flex-shrink: 0;
}

.rx-ob2-feed li {
  flex-shrink: 0;
  box-sizing: border-box;
  height: 40px;
  max-height: 40px;
}

.rx-ob2-feed li.is-new {
  height: 0;
}

/* Прибыль — зелёным */
.rx-ob2-feed li b {
  color: #4ade80;
}

/* Тёмная плашка делит ряды сетки с соседями: верх (стрелка, лента) — в
   первом ряду, «15 мин» — во втором, ровно на уровне «$500». Подписи —
   тем же стилем, что у депозита: крупная цифра, под ней заголовок */
.rx-ob2-card--go {
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 14px;
  padding-top: 26px;
  padding-bottom: 28px;
}

.rx-ob2-go-top,
.rx-ob2-go-bot {
  min-width: 0;
}

.rx-ob2-go-bot {
  padding-top: 26px;
}

.rx-ob2-card--go .rx-ob2-go-bot .rx-ob2-big {
  margin: 0 0 22px;
}

.rx-ob2-card--go .rx-ob2-go-bot h3 {
  color: #fff;
}

.rx-ob2-card--go .rx-ob2-go-bot .rx-ob2-text {
  margin-top: 10px;
}

/* Описания в плашках — чуть мельче */
.rx-ob2-text {
  font-size: 13px;
}

/* Заголовок «От регистрации до старта» — в одну строку: тёмная колонка шире */
.rx-ob2-cards {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr);
}

.rx-ob2-card--go .rx-ob2-go-bot h3 {
  white-space: nowrap;
}

@media (max-width: 1000px) {
  .rx-ob2-cards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .rx-ob2-cards {
    grid-template-columns: 1fr;
  }
}

/* Заголовки плашек — в одну строку и чуть компактнее */
.rx-ob2-card h3 {
  font-size: 16px;
  white-space: nowrap;
}

/* Точка у пары — зелёная, как прибыль */
.rx-ob2-feed li span i {
  background: #4ade80;
  box-shadow: 0 0 8px #4ade80;
}

@media (max-width: 1000px) {
  .rx-ob2-card h3 {
    white-space: normal;
  }
}

/* «Торговля» — словом, а не цифрой: мельче, чтобы не упиралась в края */
.rx-ob2-card--key .rx-ob2-big {
  font-size: clamp(28px, 2.4vw, 36px);
}

.rx-ob2-text {
  text-wrap: pretty;
}

/* Фон тёмной плашки — перебор знаков, как у «Что решает ИИ»; к низу, где
   текст, гаснет */
.rx-ob2-card--go {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.rx-ob2-glitch {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.36;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, rgba(0, 0, 0, 0.25) 75%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 45%, rgba(0, 0, 0, 0.25) 75%, transparent 100%);
}

.rx-ob2-go-top,
.rx-ob2-go-bot {
  position: relative;
}

/* Строки ленты — стекло: размывают код под собой */
.rx-ob2-feed li {
  background: rgba(20, 24, 32, 0.45);
  box-shadow:
    inset 0 1px #ffffff1f,
    inset 0 0 0 1px #ffffff14,
    0 8px 20px -12px #000;
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  backdrop-filter: blur(8px) saturate(1.2);
}

/* Код гаснет к началу нижнего блока «15 мин»: под цифрой и текстом его нет */
.rx-ob2-glitch {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 18%, transparent 48%);
  mask-image: linear-gradient(180deg, #000 0%, #000 18%, transparent 48%);
}

/* Низ плашки под кодом — тот же сероватый отсвет, что сверху; код тише */
.rx-ob2-card--go {
  background:
    radial-gradient(90% 60% at 100% 0%, #8fdcff33, #8fdcff00 70%),
    radial-gradient(110% 55% at 50% 100%, #8fa3bd2e, #8fa3bd00 75%),
    linear-gradient(170deg, #1d2430 0%, #07080b 60%);
}

.rx-ob2-glitch {
  opacity: 0.26;
}

/* Плашка синеватая по всей высоте, а не уходит книзу в чёрно-серый */
.rx-ob2-card--go {
  background:
    radial-gradient(90% 60% at 100% 0%, #8fdcff33, #8fdcff00 70%),
    radial-gradient(110% 55% at 50% 100%, #8fdcff1a, #8fdcff00 75%),
    linear-gradient(170deg, #171d27 0%, #0e131b 55%, #0a0f16 100%);
}

/* Обрезка плиты — по её же скруглениям: иначе чертёж робота вылезал в углы
   за край закругления */
#start {
  border-radius: 36px;
}

/* Строки ленты — заметнее стекло: светлый налёт, блик по верхней кромке,
   сильнее размытие */
.rx-ob2-feed li {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%),
    rgba(20, 26, 36, 0.45);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.28),
    inset 0 -1px rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 0 14px -6px rgba(255, 255, 255, 0.35),
    0 10px 24px -14px #000;
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
}



/* ——— Призыв: фон как у плашки «Что не меняется» ———
   Плашка идёт за темой: на светлой — белая с перламутровыми лентами, на
   тёмной — графитовая с тёмным дублем. Цвета и тени — те же, что у той плашки */
.rx-cta {
  color: var(--scene-ink);
  background: linear-gradient(166deg, #ffffff 0%, #e8eaee 100%);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, calc(0.9 - var(--dark) * 0.74)),
    inset 0 0 0 1px rgba(0, 0, 0, calc(0.06 - var(--dark) * 0.06)),
    inset 0 0 0 1px rgba(255, 255, 255, calc(var(--dark) * 0.1)),
    0 40px 90px -40px rgba(0, 0, 0, calc(0.45 + var(--dark) * 0.4));
}

@supports (color: color-mix(in lab, red, red)) {
  .rx-cta {
    background: linear-gradient(166deg,
      color-mix(in srgb, #3b414d calc(var(--dark) * 100%), #fff) 0%,
      color-mix(in srgb, #242832 calc(var(--dark) * 100%), #e8eaee) 100%);
  }
}

.rx-cta-field {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.rx-cta-field video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.4);
}

.rx-cta-sub {
  color: var(--rx-ink-60);
}

.rx-cta-note {
  color: var(--rx-ink-55);
}

/* Главная кнопка на светлой плашке — тёмная, на тёмной — белая */
.rx-cta .rx-btn {
  color: var(--scene-paper);
  background: var(--scene-ink);
}

.rx-cta .rx-btn--ghost {
  color: var(--scene-ink);
  background: color-mix(in srgb, var(--scene-paper) 55%, transparent);
  box-shadow: inset 0 0 0 1px var(--rx-ink-20);
}

.rx-cta .rx-btn--ghost:hover {
  background: color-mix(in srgb, var(--scene-paper) 80%, transparent);
}

/* Под текстом призыва — мягкое пятно цветом плашки: ленты не спорят с набором */
.rx-cta-in {
  position: relative;
}

.rx-cta-in::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 10% 14%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--scene-paper) 30%, color-mix(in srgb, var(--scene-paper) 0%, transparent) 100%);
  opacity: 0.75;
  pointer-events: none;
}

/* Призыв — тёмный при любой теме: тёмный ролик смешивается через screen */
.rx-cta {
  --scene-ink: #fff;
  --scene-paper: #0b0d12;
  --rx-ink-20: rgba(255, 255, 255, 0.2);
  --rx-ink-55: rgba(255, 255, 255, 0.55);
  --rx-ink-60: rgba(255, 255, 255, 0.65);
  color: #fff;
  background: linear-gradient(166deg, #1a1e26 0%, #0b0d12 100%);
  box-shadow:
    inset 0 1px #ffffff2e,
    inset 0 0 0 1px #ffffff12,
    0 40px 90px -40px #000000d9;
}

.rx-cta-video {
  mix-blend-mode: screen;
}

/* Без пятна под текстом — вместо него ролик тише */
.rx-cta-in::before {
  display: none;
}

.rx-cta-video {
  opacity: 0.3;
}

/* ——— Подвал: строка ссылок и надпись из точек ——— */

.rx-mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--rx-ink-60);
}

.rx-foot-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 48px;
  padding-top: 18px;
  border-top: 1px solid var(--rx-ink-12);
}

.rx-foot-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.rx-foot-legal a {
  transition: color 0.25s;
}

.rx-foot-legal a:hover {
  color: var(--scene-ink);
}

.rx-foot-legal .txt {
  display: inline-block;
  white-space: nowrap;
}

.rx-word2 {
  margin-top: 26px;
}

.rx-word-canvas {
  display: block;
  width: 100%;
  color: color-mix(in srgb, var(--scene-ink) 45%, transparent);
}

.rx-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .rx-foot-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Строка ссылок подвала — плотнее; при наведении просто темнеет */
.rx-mono {
  font-weight: 600;
}

/* Призыв — светлый при любой теме, как «Что не меняется» в светлой теме:
   белая плашка, ленты через multiply, набор тёмный */
.rx-cta {
  --scene-ink: #0b0d12;
  --scene-paper: #fff;
  --rx-ink-12: rgba(11, 13, 18, 0.12);
  --rx-ink-20: rgba(11, 13, 18, 0.2);
  --rx-ink-55: rgba(11, 13, 18, 0.55);
  --rx-ink-60: rgba(11, 13, 18, 0.62);
  color: #0b0d12;
  background: linear-gradient(166deg, #ffffff 0%, #e8eaee 100%);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(0, 0, 0, 0.06),
    0 40px 90px -40px rgba(0, 0, 0, 0.55);
}

.rx-cta-video {
  mix-blend-mode: multiply;
  opacity: 1;
}

/* Ответы в вопросах — темнее, читаются увереннее */
.rx-q-a p {
  color: color-mix(in srgb, var(--scene-ink) 82%, transparent);
}

/* Ленты призыва — вдвое тише */
.rx-cta-video {
  opacity: 0.5;
}

/* Ленты отдалены: кадр целиком помещается по высоте плашки, его края
   растворяются маской — среза рамки не видно */
.rx-cta-field video {
  inset: 0 auto 0 50%;
  width: auto;
  height: 100%;
  object-fit: fill;
  translate: -50% 0;
  scale: 1.25;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-composite: intersect;
}

/* Призыв с кольцом: тёмная плашка, ролик на чёрном снимаем через screen */
.rx-cta {
  --scene-ink: #fff;
  --scene-paper: #0b0d12;
  --rx-ink-12: rgba(255, 255, 255, 0.12);
  --rx-ink-20: rgba(255, 255, 255, 0.2);
  --rx-ink-55: rgba(255, 255, 255, 0.55);
  --rx-ink-60: rgba(255, 255, 255, 0.65);
  color: #fff;
  background: linear-gradient(166deg, #1a1e26 0%, #0b0d12 100%);
  box-shadow:
    inset 0 1px #ffffff2e,
    inset 0 0 0 1px #ffffff12,
    0 40px 90px -40px #000000d9;
}

.rx-cta-video {
  mix-blend-mode: screen;
  opacity: 0.7;
}

/* Кольцо — крупно, на всю ширину плашки, как было до отдаления */
.rx-cta-field video {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  translate: none;
  scale: 1;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Кольцо ещё крупнее */
.rx-cta-field video {
  scale: 1.6;
}

/* Новый кадр — дуга, сама уже крупная: без укрупнения */
.rx-cta-field video {
  scale: 1;
}

/* Рост плашки призыва по прокрутке: --cta-p 0 → 1. В начале плашка у́же
   колонки сетки, к концу — во всю ширину окна, скругление уменьшается.
   Ширину меняем отступами обёртки, а не scale — текст не мылится */
.rx-cta-wrap {
  max-width: none;
  padding: 0 calc((1 - var(--cta-p, 1)) * 16vw + var(--cta-p, 1) * 12px);
}

.rx-cta {
  border-radius: calc(36px - var(--cta-p) * 12px);
}

.rx-cta-in {
  padding-top: calc(104px + var(--cta-p) * 60px);
  padding-bottom: calc(92px + var(--cta-p) * 60px);
}

.rx-cta-field video {
  scale: calc(1.25 - var(--cta-p) * 0.25);
}

@media (max-width: 900px) {
  .rx-cta-wrap {
    padding: 0 calc((1 - var(--cta-p, 1)) * 6vw + 12px);
  }
}

/* Плашка призыва выше: при росте добавляет больше воздуха сверху и снизу */
.rx-cta-in {
  padding-top: calc(120px + var(--cta-p) * 110px);
  padding-bottom: calc(108px + var(--cta-p) * 110px);
}

/* Плашка призыва раскрывается до полной ширины окна, как плита шагов:
   отступы обёртки уходят в ноль, скругление — как у плиты */
.rx-cta-wrap {
  padding: 0 calc((1 - var(--cta-p, 1)) * 16vw);
}

.rx-cta {
  border-radius: calc(36px + (1 - var(--cta-p, 1)) * 0px);
}

@media (max-width: 900px) {
  .rx-cta-wrap {
    padding: 0 calc((1 - var(--cta-p, 1)) * 6vw);
  }
}

/* Кольца целиком: кадр вписан по высоте плашки. Фон кадра чёрный и через
   screen растворяется, поэтому пустые поля по бокам не видны */
.rx-cta-field video {
  object-fit: contain;
  scale: calc(1.1 - var(--cta-p, 1) * 0.1);
}

/* Наложение — на обёртке ролика, а не на самом видео: обёртка — свой контекст
   наложения, и screen у видео смешивался с пустотой внутри неё, отчего был
   виден чёрный прямоугольник кадра. Обёртка же смешивается с фоном плашки */
.rx-cta-video {
  mix-blend-mode: normal;
  opacity: 1;
}

.rx-cta-field {
  mix-blend-mode: screen;
}

/* Масштаб — как прежде: кадр на всю плашку */
.rx-cta-field video {
  object-fit: cover;
  scale: calc(1.25 - var(--cta-p, 1) * 0.25);
}

/* Дуга сама крупная — без укрупнения */
.rx-cta-field video {
  scale: 1;
}

/* ——— Робот Rheo над депозитом и линия к счёту ——— */
.rx-ob2-link {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  /* линия упирается прямо в плашку депозита: перекрываем зазор сетки */
  margin-bottom: -14px;
}

.rx-ob2-bot {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2c333f 0%, #0b0d12 75%);
  box-shadow:
    inset 0 1px 2px #ffffff40,
    0 14px 30px -12px #000;
}

.rx-ob2-bot img {
  position: relative;
  width: 28px;
  height: auto;
  filter: invert(1);
}

/* Кайма дышит: пульс от робота */
.rx-ob2-bot-ring {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #8fdcff80;
  animation: rx-bot-pulse 2.4s ease-out infinite;
}

@keyframes rx-bot-pulse {
  0% {
    box-shadow: 0 0 0 0 #8fdcffa0;
  }
  100% {
    box-shadow: 0 0 0 16px #8fdcff00;
  }
}

.rx-ob2-bot-cap {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #fff;
}

/* Линия: пунктир, по нему вниз к счёту бежит светящаяся капля */
.rx-ob2-wire {
  position: relative;
  width: 2px;
  height: 80px;
  margin-top: 12px;
  background: repeating-linear-gradient(180deg, #ffffff59 0 5px, transparent 5px 10px);
}

.rx-ob2-wire i {
  position: absolute;
  left: 50%;
  top: 0;
  width: 8px;
  height: 16px;
  margin-left: -4px;
  border-radius: 4px;
  background: linear-gradient(180deg, #8fdcff00, #8fdcff);
  box-shadow: 0 0 10px #8fdcff;
  animation: rx-wire 1.6s cubic-bezier(0.5, 0, 0.6, 1) infinite;
}

@keyframes rx-wire {
  0% {
    top: -16px;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

@media (max-width: 1000px) {
  .rx-ob2-link {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rx-ob2-bot-ring,
  .rx-ob2-wire i {
    animation: none;
  }
}

/* ——— Призыв: две линии-графика вместо ролика ——— */
.rx-cta-field {
  mix-blend-mode: normal;
}

.rx-cta-lines {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.rx-line path {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}

.rx-line--a path {
  stroke: url(#rx-line-a);
}

.rx-line--b path {
  stroke: url(#rx-line-b);
}

.rx-line--a .rx-line-core {
  stroke-width: 2px;
}

.rx-line--b .rx-line-core {
  stroke-width: 1px;
  opacity: 0.5;
}

.rx-line-glow {
  stroke-width: 10px;
  opacity: 0;
  filter: blur(7px);
  transition: opacity 1.2s 1.4s;
}

.rx-line--b .rx-line-glow {
  stroke-width: 6px;
}

/* Появление: линия прочерчивается слева направо */
.rx-line-core {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.2s cubic-bezier(0.6, 0, 0.2, 1);
}

.rx-line--b .rx-line-core {
  transition-delay: 0.3s;
}

.rx-cta-lines.is-in .rx-line-core {
  stroke-dashoffset: 0;
}

.rx-cta-lines.is-in .rx-line--a .rx-line-glow {
  opacity: 0.4;
}

.rx-cta-lines.is-in .rx-line--b .rx-line-glow {
  opacity: 0.15;
}

/* Бегущий свет по линиям */
.rx-line-run {
  stroke-width: 3px;
  stroke-dasharray: 0.07 0.93;
  stroke-dashoffset: 1;
  opacity: 0;
  filter: drop-shadow(0 0 6px #8fdcff);
  animation: rx-run 6s linear infinite;
  transition: opacity 0.6s 2s;
}

.rx-line--b .rx-line-run {
  stroke-width: 2px;
  animation-duration: 8s;
  animation-delay: -3s;
}

.rx-cta-lines.is-in .rx-line-run {
  opacity: 1;
}

.rx-cta-lines.is-in .rx-line--b .rx-line-run {
  opacity: 0.6;
}

@keyframes rx-run {
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rx-line-core {
    stroke-dashoffset: 0;
    transition: none;
  }

  .rx-line-run {
    display: none;
  }
}

/* Робот Rheo — белый кружок с чёрным знаком */
.rx-ob2-bot {
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #e6e9ee 100%);
  box-shadow:
    inset 0 1px 2px #ffffff,
    inset 0 -2px 4px #0b0d1214,
    0 14px 30px -12px #000;
}

.rx-ob2-bot img {
  filter: none;
}

/* ——— Связка «робот → API → счёт» ——— */

/* Робот — снова тёмный кружок с белым знаком */
.rx-ob2-bot {
  background: radial-gradient(circle at 35% 30%, #2c333f 0%, #0b0d12 75%);
  box-shadow:
    inset 0 1px 2px #ffffff40,
    0 14px 30px -12px #000;
}

.rx-ob2-bot img {
  filter: invert(1);
}

.rx-ob2-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: flex-start;
  gap: 12px;
  margin-left: 40px;
}

.rx-ob2-grid {
  position: relative;
}

/* Логотип биржи в API-карточке */
.rx-ob2-bingx {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0b0d12;
}

.rx-ob2-bingx b {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.rx-ob2-card--key .rx-ob2-big {
  margin-top: 18px;
}

.rx-ob2-sub {
  margin-top: 6px;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #0b0d1299;
}

/* Провода поверх сетки: пунктир, по нему бежит светящаяся капля */
.rx-ob2-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.rx-ob2-cards,
.rx-ob2-side {
  position: relative;
  z-index: 1;
}

.rx-ob2-wires .w-base {
  fill: none;
  stroke: #ffffff59;
  stroke-width: 1.5;
  stroke-dasharray: 5 6;
}

.rx-ob2-wires .w-run {
  fill: none;
  stroke: #8fdcff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 0.06 0.94;
  filter: drop-shadow(0 0 6px #8fdcff);
  animation: rx-wire-run 2.4s linear infinite;
}

.rx-ob2-wires .w-run--2 {
  animation-delay: -1.2s;
}

@keyframes rx-wire-run {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@media (max-width: 1000px) {
  .rx-ob2-wires,
  .rx-ob2-node {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rx-ob2-wires .w-run {
    display: none;
  }
}

/* Кружок робота — тем же градиентом, что пилюля «Пошаговый мастер» */
.rx-ob2-bot {
  background: linear-gradient(90deg, #2a3442, #0b0d12);
  box-shadow:
    inset 0 1px #ffffff24,
    inset 0 0 0 1px #ffffff14,
    0 14px 30px -12px #000;
}

.rx-ob2-chip {
  padding-left: 20px;
}

/* Робот по левому краю колонки, вровень с подписью и списком */
.rx-ob2-node {
  margin-left: 0;
  align-items: flex-start;
}

/* Ролик под линиями: снимаем чёрный фон кадра наложением на обёртке */
.rx-cta-field {
  mix-blend-mode: screen;
}

.rx-cta-lines {
  z-index: -1;
}

/* Ролик не масштабируется при росте плашки */
.rx-cta-field video {
  scale: 1 !important;
}

/* Плашка призыва — в ширину сетки, как остальные блоки */
.rx-cta-wrap {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
}

.rx-cta {
  border-radius: 24px;
}

.rx-cta-in {
  padding-top: 120px;
  padding-bottom: 108px;
}

@media (max-width: 900px) {
  .rx-cta-wrap {
    padding: 0 16px;
  }

  .rx-cta-in {
    padding-top: 72px;
    padding-bottom: 64px;
  }
}

/* Иконки списка партнёров — хромовые бейджи, как у показателей */
.rx-mbadge {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
}

.rx-mbadge-ic {
  width: 20px;
  height: 20px;
}

.rx-mbadge-ic {
  width: 15px;
  height: 15px;
}

/* Бейджи списка партнёров — ровно как в блоке показателей:
   кружок 43 / 54 / 70px, иконка 21 / 24px */
.rx-mbadge {
  width: 43px;
  height: 43px;
}

.rx-mbadge-ic {
  width: 21px;
  height: 21px;
}

@media (min-width: 640px) {
  .rx-mbadge {
    width: 54px;
    height: 54px;
  }
}

@media (min-width: 1280px) {
  .rx-mbadge {
    width: 70px;
    height: 70px;
  }

  .rx-mbadge-ic {
    width: 24px;
    height: 24px;
  }
}

.rx-plist li {
  align-items: center;
}

/* ═══════════ Партнёрам: цифры слева, витрина наград справа ═══════════ */

.rx-pstats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 40px;
  margin-top: 36px;
}

.rx-pstats b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(34px, 3.2vw, 48px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
}

.rx-pstats span {
  display: block;
  max-width: 14ch;
  margin-top: 8px;
  color: var(--rx-ink-55);
  font-size: 13.5px;
  line-height: 1.35;
}

.rx-partners .rx-plist {
  margin-top: 36px;
  gap: 16px;
}

.rx-partners-grid {
  align-items: center;
}

/* — Витрина — */
.rx-awards {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  padding: 30px;
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(80% 60% at 100% 0%, #8fdcff26, #8fdcff00 70%),
    linear-gradient(170deg, #1a1f28 0%, #0b0d12 70%);
  box-shadow:
    inset 0 1px #ffffff26,
    inset 0 0 0 1px #ffffff12,
    0 40px 80px -40px #000;
  overflow: hidden;
}

.rx-aw-cap {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8fdcff;
}

.rx-aw-big {
  display: block;
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: clamp(48px, 4.6vw, 68px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.055em;
}

.rx-aw-sub {
  display: block;
  margin-top: 8px;
  font-size: 18px;
  color: #ffffffb3;
}

/* Лента едет вверх по кругу: два одинаковых списка друг за другом */
.rx-aw-reel {
  position: relative;
  height: 300px;
  margin-top: 26px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}

.rx-aw-list {
  list-style: none;
  animation: rx-reel 28s linear infinite;
}

.rx-awards:hover .rx-aw-list {
  animation-play-state: paused;
}

@keyframes rx-reel {
  to {
    transform: translateY(-100%);
  }
}

.rx-aw-list li {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  padding: 12px 16px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)),
    rgba(20, 26, 36, 0.45);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  font-size: 14px;
}

.rx-st-n {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  color: #ffffff66;
}

.rx-aw-list b {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.rx-aw-list em {
  font-style: normal;
  color: #8fdcff;
  white-space: nowrap;
}

.rx-aw-note {
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.45;
  color: #ffffff80;
}

@media (max-width: 900px) {
  .rx-awards {
    margin: 0 auto;
  }

  .rx-pstats {
    gap: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rx-aw-list {
    animation: none;
  }
}

/* Три цифры — каждая в стеклянной плашке, как карточки стратегий */
.rx-pstats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 560px;
}

.rx-pstats > div {
  padding: 18px 18px 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, calc(0.4 - var(--dark) * 0.33));
  border: 1px solid rgba(255, 255, 255, calc(0.6 - var(--dark) * 0.46));
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.07),
    0 16px 30px -25px rgba(0, 0, 0, 0.38),
    0 4px 10px -9px rgba(0, 0, 0, 0.2),
    inset 0 0 12px -4px rgba(255, 255, 255, calc(0.7 - var(--dark) * 0.5));
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}

.rx-pstats b {
  font-size: clamp(28px, 2.6vw, 38px);
}

@media (max-width: 560px) {
  .rx-pstats {
    grid-template-columns: 1fr;
  }
}

/* Витрина — все девять статусов сразу, без ленты и прокрутки */
.rx-aw-list {
  margin-top: 16px;
  animation: none;
}

.rx-aw-list li {
  padding: 10px 14px;
  margin-bottom: 6px;
}

.rx-aw-list li:last-child {
  margin-bottom: 0;
  /* вершина программы — выделена */
  background:
    linear-gradient(90deg, rgba(143, 220, 255, 0.16), rgba(143, 220, 255, 0.04)),
    rgba(20, 26, 36, 0.45);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px rgba(143, 220, 255, 0.35);
}

.rx-partners-head {
  margin-bottom: 56px;
}

.rx-partners .rx-pstats {
  margin-top: 0;
}

/* Колонки партнёров — по верхнему краю: цифры и витрина на одной линии */
.rx-partners-grid {
  align-items: start;
}

/* «до» — мелко перед цифрой; подписи у всех трёх ровно в две строки */
.rx-pstats b small {
  margin-right: 5px;
  font-size: 0.45em;
  font-weight: 500;
  letter-spacing: -0.02em;
  vertical-align: 0.6em;
}

.rx-pstats span {
  max-width: none;
  white-space: nowrap;
}

/* Иконка статуса — шлем робота; с каждым статусом светлеет,
   у Ambassador — ледяной голубой со свечением */
.rx-aw-list li {
  grid-template-columns: 22px 1fr auto;
}

.rx-st-ic {
  width: 20px;
  height: 20px;
  fill: #ffffff;
  opacity: 0.35;
}

.rx-aw-list li:nth-child(n + 4) .rx-st-ic { opacity: 0.5; }
.rx-aw-list li:nth-child(n + 6) .rx-st-ic { opacity: 0.7; }
.rx-aw-list li:nth-child(n + 8) .rx-st-ic { opacity: 0.9; }

.rx-aw-list li:last-child .rx-st-ic {
  fill: #8fdcff;
  opacity: 1;
  filter: drop-shadow(0 0 6px #8fdcff);
}

/* Пункты партнёров — больше воздуха и тонкие разделители между ними */
.rx-partners .rx-plist {
  gap: 0;
}

.rx-partners .rx-plist li {
  padding: 22px 0;
  border-top: 1px solid var(--rx-ink-12);
}

.rx-partners .rx-plist li:last-child {
  border-bottom: 1px solid var(--rx-ink-12);
}

/* Шлем статуса крупнее, чтобы читался */
.rx-aw-list li {
  grid-template-columns: 26px 1fr auto;
}

.rx-st-ic {
  width: 24px;
  height: 24px;
}

.rx-partners .rx-plist li:first-child {
  border-top: 0;
}

.rx-partners .rx-plist li:last-child {
  border-bottom: 0;
}

/* Робот со спины на фоне таблицы статусов: справа, крупно, приглушён и
   растворяется к краям — строки лежат поверх */
.rx-awards {
  isolation: isolate;
}

.rx-aw-bot {
  position: absolute;
  z-index: -1;
  right: -18%;
  bottom: -6%;
  height: 112%;
  width: auto;
  max-width: none;
  opacity: 0.32;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(70% 70% at 60% 55%, #000 35%, transparent 100%);
  mask-image: radial-gradient(70% 70% at 60% 55%, #000 35%, transparent 100%);
}

/* Главная цифра — первая плашка: фирменный тёмный, белый набор */
.rx-pstats > div:first-child {
  color: #fff;
  background: linear-gradient(170deg, #1a1f28 0%, #0b0d12 75%);
  border-color: transparent;
  box-shadow:
    inset 0 1px #ffffff2e,
    inset 0 0 0 1px #ffffff12,
    0 20px 40px -24px #000;
}

.rx-pstats > div:first-child span {
  color: #ffffff99;
}

.rx-partners .rx-plist li {
  gap: 28px;
}

/* ——— Партнёры: заголовок слева, цифры справа строками; ниже остальное ——— */
.rx-partners-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  margin-bottom: 72px;
}

.rx-prows > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px 0;
  border-top: 1px solid var(--rx-ink-12);
}

.rx-prows > div:first-child {
  padding-top: 0;
  border-top: 0;
}

.rx-prows span {
  font-size: 15px;
  line-height: 1.35;
  color: var(--rx-ink-60);
}

.rx-prows b {
  font-family: var(--font-display);
  font-size: clamp(56px, 6vw, 92px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.055em;
  white-space: nowrap;
}

.rx-prows b small {
  margin-right: 8px;
  font-size: 0.35em;
  letter-spacing: -0.02em;
  vertical-align: 0.9em;
  color: var(--rx-ink-55);
}

/* Главная — голубая */
.rx-prows > div:first-child b {
  color: var(--rx-ice);
}

@media (max-width: 900px) {
  .rx-partners-top {
    grid-template-columns: 1fr;
  }
}

/* Таблица статусов — на всю правую колонку, левый край по линии цифр */
.rx-partners-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
}

.rx-awards {
  max-width: none;
  margin-left: 0;
}

/* «до» — на базовой линии цифры */
.rx-prows b small {
  vertical-align: baseline;
}

/* Подписи цифр — в одну строку, цветом набора */
.rx-prows span {
  white-space: nowrap;
  color: var(--scene-ink);
}

.rx-cta .rx-cta-sub {
  color: #fff;
}

/* Цифры партнёрки — меньше, в балансе с заголовком слева */
.rx-prows b {
  font-size: clamp(44px, 4.4vw, 66px);
}

.rx-prows > div {
  padding: 18px 0;
}

.rx-prows > div:first-child {
  padding-top: 0;
}

/* Значки статусов — объёмные цветные, у каждого свой */
.rx-aw-list li {
  grid-template-columns: 34px 1fr auto;
}

.rx-aw-list li .rx-st-ic.rx-st-3d {
  width: 34px;
  height: 34px;
  fill: none;
  opacity: 1;
  overflow: visible;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.55));
}

.rx-aw-list li .rx-st-ic.rx-st-top {
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 8px #8fdcff80);
}

/* Подсказки «i» у цифр партнёрки: схема и пояснение */
.rx-prows > div {
  position: relative;
}

.rx-prows > div:hover,
.rx-prows > div:focus-within {
  z-index: 5;
}

.rx-info {
  position: relative;
  display: inline-flex;
  vertical-align: -3px;
  margin-left: 8px;
  color: var(--rx-ink-55);
  cursor: help;
  outline: none;
  transition: color 0.2s;
}

.rx-info svg {
  width: 16px;
  height: 16px;
}

.rx-info:hover,
.rx-info:focus-visible {
  color: var(--rx-ice);
}

.rx-prows .rx-tip {
  position: absolute;
  z-index: 10;
  top: calc(100% + 12px);
  left: -18px;
  display: block;
  width: 340px;
  padding: 18px;
  border-radius: 16px;
  white-space: normal;
  font-size: 13px;
  line-height: 1.45;
  color: #ffffffb3;
  background: linear-gradient(170deg, #1a1f28 0%, #0b0d12 80%);
  box-shadow:
    inset 0 1px #ffffff26,
    inset 0 0 0 1px #ffffff12,
    0 24px 50px -20px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  pointer-events: none;
  cursor: default;
}

.rx-info:hover .rx-tip,
.rx-info:focus .rx-tip {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

/* Мостик, чтобы подсказка не закрывалась, пока ведёшь к ней курсор */
.rx-prows .rx-tip::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}

.rx-prows .rx-tip-h {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
}

.rx-prows .rx-tip-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  white-space: normal;
  color: inherit;
  font-size: inherit;
}

.rx-tip-c {
  flex: 1 1 0;
  padding: 7px 8px;
  border-radius: 9px;
  font-style: normal;
  font-size: 11.5px;
  line-height: 1.25;
  text-align: center;
  color: #ffffffd9;
  background: #ffffff0f;
  box-shadow: inset 0 0 0 1px #ffffff14;
}

.rx-tip-c.is-hi,
.rx-tip-n.is-hi {
  color: #0b0d12;
  font-weight: 600;
  background: #8fdcff;
  box-shadow: 0 0 14px -4px #8fdcff;
}

.rx-tip-ar {
  flex: none;
  font-style: normal;
  color: #8fdcff;
}

.rx-prows .rx-tip-line {
  gap: 0;
  justify-content: space-between;
  background: linear-gradient(#ffffff26, #ffffff26) center / 100% 1px no-repeat;
}

.rx-tip-n {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border-radius: 999px;
  font-style: normal;
  font-size: 12px;
  color: #fff;
  background: #1a1f28;
  box-shadow: inset 0 0 0 1px #ffffff26;
}

.rx-tip-n.is-dots {
  box-shadow: none;
  color: #ffffff80;
}

.rx-prows .rx-tip-t {
  display: block;
  margin-top: 6px;
  white-space: normal;
  font-size: 13px;
  color: #ffffffa6;
}

@media (max-width: 600px) {
  .rx-prows .rx-tip {
    width: min(340px, calc(100vw - 32px));
    left: 0;
  }
}

/* Ambassador без выделения; подсветка — у любой строки по наведению */
.rx-aw-list li,
.rx-aw-list li:last-child {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)),
    rgba(20, 26, 36, 0.45);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: background 0.25s, box-shadow 0.25s;
}

.rx-aw-list li:hover {
  background:
    linear-gradient(90deg, rgba(143, 220, 255, 0.16), rgba(143, 220, 255, 0.04)),
    rgba(20, 26, 36, 0.45);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px rgba(143, 220, 255, 0.35);
}

.rx-aw-list li .rx-st-ic.rx-st-3d {
  transition: filter 0.25s, transform 0.25s;
}

.rx-aw-list li:hover .rx-st-ic.rx-st-3d {
  transform: scale(1.08);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 8px #8fdcff80);
}

/* Подсказки — больше воздуха */
.rx-prows .rx-tip {
  width: 380px;
  padding: 24px 24px 22px;
  border-radius: 18px;
}

.rx-prows .rx-tip-h {
  margin-bottom: 16px;
  font-size: 16px;
}

.rx-prows .rx-tip-row {
  gap: 8px;
  margin-bottom: 10px;
}

.rx-prows .rx-tip-line {
  gap: 0;
  margin-bottom: 4px;
}

.rx-tip-c {
  padding: 10px 10px;
  border-radius: 10px;
  line-height: 1.3;
}

.rx-prows .rx-tip-t {
  margin-top: 14px;
  line-height: 1.55;
}

@media (max-width: 600px) {
  .rx-prows .rx-tip {
    width: min(380px, calc(100vw - 32px));
  }
}

/* Плашки схемы — одной высоты; логотип Rheo над словом */
.rx-prows .rx-tip-row {
  align-items: stretch;
}

.rx-tip-ar {
  align-self: center;
}

.rx-tip-c {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 52px;
}

.rx-tip-logo {
  width: 18px;
  height: 14px;
  fill: currentColor;
}

/* Подсказка «линии»: лесенка приглашений */
.rx-prows .rx-tree {
  display: block;
}

.rx-prows .rx-tree-i {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding-left: calc(var(--lv) * 18px);
  white-space: normal;
  font-size: 12.5px;
  color: #ffffffa6;
}

/* Уголок от предыдущего узла */
.rx-prows .rx-tree-i:not(:first-child)::before {
  content: "";
  position: absolute;
  left: calc(var(--lv) * 18px - 9px);
  top: -6px;
  width: 8px;
  height: 23px;
  border-left: 1px solid #ffffff33;
  border-bottom: 1px solid #ffffff33;
  border-bottom-left-radius: 5px;
}

.rx-tree-n {
  flex: none;
  min-width: 52px;
  padding: 5px 9px;
  border-radius: 999px;
  font-style: normal;
  font-size: 12px;
  text-align: center;
  color: #fff;
  background: #1a1f28;
  box-shadow: inset 0 0 0 1px #ffffff26;
}

.rx-tree-n.is-hi {
  color: #0b0d12;
  font-weight: 600;
  background: #8fdcff;
  box-shadow: 0 0 14px -4px #8fdcff;
}

.rx-prows .rx-tree-t b {
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  letter-spacing: 0;
  line-height: inherit;
  color: #fff;
}

.rx-prows .rx-tree-t {
  white-space: normal;
  font-size: 12.5px;
  line-height: 1.35;
  color: #ffffffa6;
}

.rx-prows .rx-tree-t b {
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
}

/* ═══════════ Тёмная тема: плоские карточки на графите ═══════════
   Карточка на полтона светлее фона, тонкая рамка, без бликов, свечения
   и тяжёлых теней — мягкий контраст, как в панелях приложений */
.is-dark {
  --rx-surface: #15181d;
  --rx-surface-2: #1b1f25;
  --rx-line: rgba(255, 255, 255, 0.07);
}

.is-dark .rh-strat,
.is-dark .rr-panel--dark,
.is-dark .rx-ob2-card--go,
.is-dark .rx-awards,
.is-dark .rx-cta,
.is-dark .rx-prows .rx-tip {
  background: var(--rx-surface);
  box-shadow: inset 0 0 0 1px var(--rx-line);
}

.is-dark .rh-plot {
  background: #101317;
}

.is-dark .rx-aw-list li,
.is-dark .rx-aw-list li:last-child {
  background: var(--rx-surface-2);
  box-shadow: inset 0 0 0 1px var(--rx-line);
}

.is-dark .rx-aw-list li:hover {
  background: #20252c;
  box-shadow: inset 0 0 0 1px rgba(143, 220, 255, 0.3);
}

.is-dark .rx-tip-c,
.is-dark .rx-tip-n,
.is-dark .rx-tree-n {
  background: var(--rx-surface-2);
}

/* Карточки стратегий: без белого ореола и внутреннего свечения */
.is-dark .rh-strat {
  border-color: rgba(255, 255, 255, 0.07) !important;
  box-shadow: none !important;
}

.is-dark .rh-strat > .pointer-events-none {
  box-shadow: none !important;
}

/* Выделенные плашки подсказок остаются голубыми и в тёмной теме */
.is-dark .rx-tip-c.is-hi,
.is-dark .rx-tip-n.is-hi,
.is-dark .rx-tree-n.is-hi {
  background: #8fdcff;
}

/* Чертёж подогнан к белому фото по краю плеча и швам панелей:
   масштаб 1.0974 ширины фото, сдвиг влево 0.0487 */
.rx-blueprint {
  left: calc(50% - var(--bot-w, 1100px) * 0.5 - var(--bot-w, 1100px) * 0.0487);
  width: calc(var(--bot-w, 1100px) * 1.0974);
}

/* Колонки подвала начинаются по линии вопросов FAQ; отступ меряет скрипт (--faq-x) */
@media (min-width: 901px) {
  .rx-foot-top {
    display: grid;
    grid-template-columns: var(--faq-x, 1fr) minmax(0, 1fr);
    gap: 0;
  }

  .rx-foot-cols {
    justify-content: space-between;
  }
}
