/* Renn prototype — бренд: Geist, трекинг −4%, заголовки Medium, текст Regular */
:root {
  --ink: #080C14;
  --white: #FFFFFF;
  --black: #000000;
  --muted: rgba(8, 12, 20, .56);
  --blue-0: #03050C; --blue-1: #54799D;
  --green-0: #000000; --green-1: #294048; --green-2: #F9FFF3;
  --accent: #3E6E9E;          /* синий линий Keep: тон #54799D, затемнён для контраста на белом */
  --accent-green: #3C6A5E;    /* зелёный линий Find: тон #294048, высветлен под белую панель */
  --red: #D6453D;
  --r: 4px;
  --circ: cubic-bezier(.785,.135,.15,.86);    /* движение, как у Sharplink */
  --fade: cubic-bezier(.455,.03,.515,.955);
  --rise: cubic-bezier(.2,.8,.2,1);           /* появление, как у Polar */
  --soft: cubic-bezier(.4,0,.2,1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--white); }
body { font-family: "Geist", system-ui, sans-serif; letter-spacing: -0.04em; color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3 { font-weight: 500; }
.letter { display: inline-block; }
.word { display: inline-block; white-space: nowrap; }

#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 30; pointer-events: none; }

/* ---------- Стекло: один рецепт, две темы ----------
   Общие: кромка с бликом под −45°, обводка, тень, размытие. Меняются только переменные темы.
   В Chrome/Edge сверху добавляется настоящее преломление (класс .has-refraction, фильтр строит main.js). */
/* Стекло без скриптов: плотное матовое размытие с усилением цвета, тонкая обводка,
   блик по верхней кромке, светлая кромка под −45° и мягкий диагональный отсвет поверх. */
.glass { --g-fill: rgba(255,255,255,.1); --g-stroke: rgba(255,255,255,.16); --g-rim: rgba(255,255,255,.55); --g-top: rgba(255,255,255,.22); --g-sheen: rgba(255,255,255,.08);
  --g-shadow: 0 12px 32px -10px rgba(3,5,12,.45); --g-ink: #fff; --g-blur: 22px;
  position: relative; isolation: isolate; background: var(--g-fill); color: var(--g-ink); border: 1px solid var(--g-stroke);
  box-shadow: inset 0 1px 0 var(--g-top), inset 0 0 0 1px rgba(255,255,255,.02), var(--g-shadow);
  backdrop-filter: blur(var(--g-blur)) saturate(1.8) brightness(1.04); -webkit-backdrop-filter: blur(var(--g-blur)) saturate(1.8) brightness(1.04);
  transition: background .3s var(--fade), color .3s var(--fade), border-color .3s var(--fade), box-shadow .3s var(--fade); }
/* светлая кромка: ярче в верхнем левом и нижнем правом углах */
.glass::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; padding: 1px; z-index: 1;
  background: linear-gradient(135deg, var(--g-rim) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 68%, var(--g-rim) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
/* мягкий диагональный отсвет, как свет на настоящем стекле */
.glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: linear-gradient(125deg, var(--g-sheen) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 100%); }
.glass[data-glass="light"] { --g-fill: rgba(255,255,255,.58); --g-stroke: rgba(8,12,20,.07); --g-rim: rgba(255,255,255,1); --g-top: rgba(255,255,255,.9); --g-sheen: rgba(255,255,255,.45);
  --g-shadow: 0 14px 34px -12px rgba(8,13,20,.18); --g-ink: var(--ink); }

/* ---------- Кнопка: одна форма, квадрат со стрелкой внутри ----------
   Ховер как у Sharplink: надпись прокатывается вверх, квадрат уходит за правый край,
   новый (синий) въезжает слева, надпись сдвигается вправо. Всё в границах одной формы. */
.btn { --h: 48px; --sq: 40px; --pad: 4px; position: relative; display: inline-flex; align-items: center; height: var(--h); padding: var(--pad); overflow: hidden; border-radius: var(--r); background: var(--btn-bg); color: var(--btn-ink); font-size: 15px; font-weight: 400; user-select: none; }
.btn-label { position: relative; flex: 1; height: var(--sq); overflow: hidden; display: flex; flex-direction: column; padding: 0 12px; transition: transform .5s var(--circ) 0s; }
.btn-label > span, .btn-icon > span { height: var(--sq); flex: none; display: flex; align-items: center; transition: transform .5s var(--circ) 0s; }
.btn-icon { position: relative; width: var(--sq); height: var(--sq); flex: none; overflow: hidden; display: flex; flex-direction: column; border-radius: 2px; background: var(--btn-sq); color: var(--btn-ink); transition: transform .5s var(--circ) .1s; }
.btn-icon > span { justify-content: center; }
.btn-icon svg { width: 11px; height: 11px; }
.btn-icon-left { position: absolute; left: var(--pad); top: var(--pad); background: #54799D; color: #fff; transform: translateX(calc(-100% - var(--pad) - 2px)); transition: transform .5s var(--circ) 0s; }
@media (hover: hover) {
  .btn:hover .btn-label > span, .btn:hover .btn-icon > span { transform: translateY(-100%); }
  .btn:hover .btn-label { transform: translateX(var(--sq)); transition-delay: .12s; }
  .btn:hover .btn-label > span { transition-delay: .12s; }
  .btn:hover .btn-icon:not(.btn-icon-left) { transform: translateX(calc(100% + var(--pad) + 2px)); transition-delay: 0s; }
  .btn:hover .btn-icon > span { transition-delay: .07s; }
  .btn:hover .btn-icon-left { transform: translateX(0); transition-delay: .12s; }
}
.btn { --btn-bg: var(--ink); --btn-ink: #fff; --btn-sq: rgba(255,255,255,.12); }
.btn-on-dark { --btn-bg: #fff; --btn-ink: var(--ink); --btn-sq: rgba(8,12,20,.08); }
.btn-wide { min-width: 252px; }
.btn-sm { --h: 36px; --sq: 28px; font-size: 13px; width: 120px; }
.btn-sm .btn-label { padding: 0 8px; }

/* ---------- Шапка: 550×44, стекло (Figma 75:1528) ---------- */
.header { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 50; }
.header-in { display: flex; align-items: center; justify-content: space-between; width: 550px; height: 44px; padding: 4px 4px 4px 16px; border-radius: 8px; }
.brand img { width: 88px; height: 20px; transition: filter .3s var(--fade); }
.header-in[data-glass="light"] .brand img { filter: brightness(0); }
.nav { position: relative; display: flex; width: 200px; height: 36px; padding: 2px; border-radius: 4px; font-size: 13px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(8,12,20,.06); transition: background .3s var(--fade); }
.header-in[data-glass="light"] .nav { background: rgba(8,12,20,.04); }
.nav a { position: relative; z-index: 1; flex: 1; display: grid; place-items: center; border-radius: 3px; }
.header-in[data-glass="light"] .btn-sm { --btn-bg: var(--ink); --btn-ink: #fff; --btn-sq: rgba(255,255,255,.12); }
/* подсветка сегмента: плавно переезжает между пунктами (навигация и вопросы) */
.seg-hl { position: absolute; z-index: 0; top: 0; left: 0; width: 0; height: 0; border-radius: 3px; background: rgba(255,255,255,.1); opacity: 0; pointer-events: none;
  transition: transform .45s var(--circ), width .45s var(--circ), opacity .25s var(--fade), background .3s var(--fade); }
[data-glass="light"] .seg-hl { background: rgba(8,12,20,.06); }

/* ---------- Why: закреплённая сцена, hero сжимается в плашку ---------- */
.stage-why { position: relative; height: 100vh; }
.why-layout { position: relative; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 124px; }
.why-heads { margin-bottom: 52px; }
.why-texts { margin-top: 32px; }
.why-heads, .why-texts { position: relative; width: 100%; display: grid; justify-items: center; text-align: center; }
.why-heads > *, .why-texts > * { grid-area: 1 / 1; }
.why-h { font-size: 52px; line-height: 1.04; letter-spacing: -0.045em; }
.why-p { font-size: 17px; line-height: 1.45; max-width: 520px; color: var(--muted); }

.plate { position: relative; width: 1280px; max-width: calc(100vw - 80px); height: 480px; border-radius: 8px; isolation: isolate; }
.plate-bg { position: absolute; inset: 0; border-radius: 8px; overflow: hidden; }
/* Живые градиенты: двигаются только центры световых пятен, цвета остаются ровно макетными.
   Свойства зарегистрированы через @property, поэтому браузер плавно анимирует проценты внутри градиента. */
@property --ax { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --ay { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --bx { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --by { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.plate-keep { --ax: 50%; --ay: 108%; --bx: 80%; --by: 40%; background:
  radial-gradient(90% 55% at var(--ax) var(--ay), #F4F7FA 0%, rgba(214,226,237,.9) 22%, rgba(120,152,184,.55) 48%, rgba(84,121,157,0) 75%),
  radial-gradient(70% 50% at var(--bx) var(--by), rgba(84,121,157,.35) 0%, rgba(84,121,157,0) 70%),
  linear-gradient(180deg, #03050C 0%, #070C16 22%, #1B2C42 55%, #4E6F90 85%, #8FA8C0 100%); }
.plate-find { opacity: 0; --ax: 15%; --ay: 110%; background:
  radial-gradient(120% 90% at var(--ax) var(--ay), rgba(249,255,243,.6) 0%, rgba(41,64,72,0) 45%),
  linear-gradient(200deg, var(--green-0) 0%, #14222A 35%, var(--green-1) 72%, #B9C8BA 100%); }
@keyframes drift-keep { 0% { --ax: 85%; --ay: 110%; --bx: 10%; --by: 0%; } 33% { --ax: 55%; --ay: 92%; --bx: 34%; --by: 22%; } 66% { --ax: 98%; --ay: 86%; --bx: 0%; --by: 30%; } 100% { --ax: 70%; --ay: 112%; --bx: 22%; --by: -10%; } }
@keyframes drift-find { 0% { --ax: 15%; --ay: 110%; } 33% { --ax: 45%; --ay: 90%; } 66% { --ax: 2%; --ay: 86%; } 100% { --ax: 30%; --ay: 112%; } }
.is-live .plate-keep { animation: drift-hero 16s ease-in-out infinite alternate; }
.is-live .plate-find { animation: drift-find 14s ease-in-out infinite alternate; }
/* живой фон: шейдер MeshGradient поверх CSS-градиента (он же запасной вариант), сверху — световые акценты макета */
.live { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.4s var(--soft); }
.live.is-ready { opacity: 1; }
/* лёгкое зерно, чтобы стекло читалось на ровном градиенте */
.plate-grain { position: absolute; inset: 0; border-radius: 8px; pointer-events: none; opacity: .14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Дашборд: стеклянная карточка на плашке, белая панель сверху (чем выше, тем светлее) */
.dash { position: absolute; left: 50%; top: 50%; width: 760px; border-radius: 8px; padding: 0 6px 6px; --g-blur: 22px; }
.dash-top { height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; font-size: 12px; color: rgba(8,12,20,.6); }
.dash-top img { filter: brightness(0); opacity: .85; }
.dash-panel { background: #fff; border-radius: 6px; padding: 18px 20px 14px; }
.dash-note { font-size: 13px; line-height: 1.4; color: rgba(8,12,20,.62); margin-bottom: 8px; }
.chart { display: block; width: 100%; height: auto; overflow: visible; font-family: "Geist", sans-serif; letter-spacing: -0.02em; }
.chart .grid line { stroke: rgba(8,12,20,.09); stroke-width: 1; }
.dash-axis { display: flex; justify-content: space-between; font-size: 12px; color: rgba(8,12,20,.56); margin-top: 4px; padding-right: 20px; }
.icon-dark { filter: brightness(0); opacity: .8; }
/* все подписи графиков одного размера */
.c-label { font-size: 12px; fill: rgba(8,12,20,.62); }

.k-curve { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.k-line { stroke: rgba(8,12,20,.45); stroke-width: 1; stroke-dasharray: 4 4; }
.k-liq { fill: rgba(214,69,61,.12); stroke: none; }
.k-liq-label { font-size: 12px; fill: var(--red); opacity: 0; transition: opacity .5s var(--soft); }
.k-liq-label.is-on { opacity: 1; }
.k-mark { opacity: 0; transition: opacity .3s var(--soft); }
.k-mark.is-on { opacity: 1; }
.tile { fill: #fff; stroke: rgba(8,12,20,.14); transition: stroke .5s var(--soft), fill .5s var(--soft); }
.k-mark.is-liquidated .tile { stroke: var(--red); }
.k-ic { transition: filter .5s var(--soft), opacity .5s var(--soft); }

.tile-dark { fill: var(--ink); }
.k-status { font-size: 12px; fill: var(--accent); opacity: 0; transition: opacity .5s var(--soft); }
.k-status.is-on { opacity: 1; }
/* Ползунок: толстая дорожка с заполненной частью, квадратный бегунок-«предмет» */
.chart { touch-action: pan-y; }   /* вертикальный скролл на телефоне свободен, горизонталь — ползунку */
.slider { --sl: var(--accent); cursor: grab; outline: none; }
.chart-find .slider { --sl: var(--accent-green); }
.chart.is-dragging, .chart.is-dragging .slider { cursor: grabbing; }
.bar-hit { fill: transparent; }
.bar-track { stroke: rgba(8,12,20,.1); stroke-width: 4; stroke-linecap: round; }
.bar-fill { stroke: var(--sl); stroke-width: 4; stroke-linecap: round; }
.bar-knob { fill: var(--sl); stroke: #fff; stroke-width: 2.5; paint-order: stroke;
  filter: drop-shadow(0 1px 1.5px rgba(8,12,20,.22)) drop-shadow(0 3px 8px rgba(8,12,20,.16)); }
/* наведение: бегунок не растёт, под ним проявляется лёгкая серая подложка */
.bar-halo { fill: rgba(8,12,20,.08); opacity: 0; transition: opacity .2s var(--soft); }
.slider:hover .bar-halo, .chart.is-dragging .bar-halo { opacity: 1; }
.bar-ring { fill: none; stroke: var(--sl); stroke-width: 2; opacity: 0; }
.slider:focus-visible:not(.by-pointer) .bar-ring { opacity: 1; }
/* при перетаскивании состояние меняется сразу, без переходов */
.chart.is-scrub .k-mark, .chart.is-scrub .tile, .chart.is-scrub .k-ic, .chart.is-scrub .k-status, .chart.is-scrub .k-liq-label { transition: none; }

.f-cap { stroke: rgba(8,12,20,.45); stroke-width: 1; stroke-dasharray: 4 4; }
.f-base, .f-capped { fill: none; stroke: var(--accent-green); stroke-width: 1.5; }
.f-full { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.f-fork { fill: var(--accent-green); }
.f-axis, .f-t-capped { fill: var(--accent-green); }

/* ---------- Hero поверх плашки ---------- */
.hero { position: absolute; inset: 0; z-index: 10; color: #fff; will-change: clip-path; }
.hero-bg { position: absolute; inset: 0; --ax: 50%; --ay: 108%; --bx: 80%; --by: 40%; background:
  radial-gradient(90% 55% at var(--ax) var(--ay), #F4F7FA 0%, rgba(214,226,237,.9) 22%, rgba(120,152,184,.55) 48%, rgba(84,121,157,0) 75%),
  radial-gradient(70% 50% at var(--bx) var(--by), rgba(84,121,157,.35) 0%, rgba(84,121,157,0) 70%),
  linear-gradient(180deg, #03050C 0%, #070C16 22%, #1B2C42 55%, #4E6F90 85%, #8FA8C0 100%); }
@keyframes drift-hero { 0% { --ax: 50%; --ay: 108%; --bx: 80%; --by: 40%; } 33% { --ax: 30%; --ay: 98%; --bx: 52%; --by: 58%; } 66% { --ax: 68%; --ay: 112%; --bx: 92%; --by: 22%; } 100% { --ax: 44%; --ay: 100%; --bx: 64%; --by: 30%; } }
.is-live .hero-bg { animation: drift-hero 16s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .is-live .hero-bg, .is-live .plate-keep, .is-live .plate-find { animation: none; } }
/* воздух как в макете: Backed by ~200 px от верха, дальше 72 / 80 / 64 / 24 */
.hero-in { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding-top: 196px; }
.hero-h { font-size: 88px; line-height: 1.04; letter-spacing: -0.05em; display: flex; flex-direction: column; align-items: center; margin-top: 72px; }
.hero-line { display: flex; align-items: center; gap: 22px; white-space: nowrap; }
.cube-anchor { display: inline-block; width: 92px; height: 92px; flex: none; }
.ticker { display: inline-block; position: relative; min-width: 3.1em; min-height: 1em; text-align: left; }
.ticker-word { display: inline-block; white-space: nowrap; }
.hero-lead { margin-top: 80px; font-size: 17px; line-height: 1.4; color: rgba(255,255,255,.78); }
.hero-actions { margin-top: 64px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.textlink { font-size: 14px; color: rgba(255,255,255,.88); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.4); transition: text-decoration-color .2s var(--fade); }
.textlink:hover { text-decoration-color: #fff; }

/* Плашка Backed by: не кнопка. Ширина внутренней плашки рассчитана на оба состояния, размер не прыгает */
.backed { display: inline-flex; align-items: center; gap: 8px; padding: 3px 3px 3px 10px; border-radius: 5px; background: rgba(10,15,24,.55); border: 1px solid rgba(255,255,255,.08); font-size: 12px; color: rgba(255,255,255,.6); transition: color .25s var(--fade), border-color .25s var(--fade); }
.backed-inner { position: relative; display: grid; place-items: center; width: 92px; height: 26px; border-radius: 3px; background: rgba(0,0,0,.55); transition: background .25s var(--fade); }
.backed-mark { grid-area: 1 / 1; display: flex; align-items: center; gap: 4px; transition: opacity .3s var(--fade), transform .4s var(--circ); }
.backed-batches { opacity: 0; transform: translateY(6px); }
.backed-num { font-size: 11px; font-weight: 500; color: #fff; }
.backed:hover { color: rgba(255,255,255,.9); border-color: rgba(255,255,255,.16); }
.backed:hover .backed-inner { background: rgba(255,255,255,.08); }
.backed:hover .backed-base { opacity: 0; transform: translateY(-6px); }
.backed:hover .backed-batches { opacity: 1; transform: none; }

/* ---------- How it works ---------- */
.stage-how { position: relative; height: 100vh; overflow: hidden; color: var(--ink); }
.how-bg { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--soft); }
.how-bg-white { background: #fff; opacity: 1; }
.how-bg-blue { background: linear-gradient(180deg, #FFFFFF 0%, #D4DFE9 30%, #7F9DBA 100%); }
.how-bg-navy { background: linear-gradient(180deg, #2A3D52 0%, #0E1724 60%, #05080D 100%); }
.how-bg-black { background: var(--black); }
.stage-how[data-stage="1"] .how-bg-blue, .stage-how[data-stage="2"] .how-bg-blue, .stage-how[data-stage="3"] .how-bg-blue { opacity: 1; }
.stage-how[data-stage="2"] .how-bg-navy, .stage-how[data-stage="3"] .how-bg-navy { opacity: 1; }
.stage-how[data-stage="3"] .how-bg-black { opacity: 1; }
.how-in { position: relative; height: 100%; }
.how-h { position: absolute; top: 124px; left: 0; right: 0; text-align: center; font-size: 52px; letter-spacing: -0.045em; transition: color .6s var(--soft), opacity .6s var(--soft); }
.stage-how[data-stage="2"] .how-h { color: #fff; }
.stage-how[data-stage="3"] .how-h { color: #fff; opacity: 0; }
.card-anchor { position: absolute; left: 50%; top: 50%; width: 360px; height: 450px; margin: -205px 0 0 -180px; }
.scroll-hint { position: absolute; left: 0; right: 0; bottom: 112px; text-align: center; font-size: 13px; color: rgba(8,12,20,.55); opacity: 0; }
/* этапы — просто текст, в общей ленте, которая едет вверх вместе со скроллом.
   Активный этап (в середине экрана) яркий, остальные приглушены; чередуются слева и справа. */
.steps-track { position: absolute; inset: 0; opacity: 0; will-change: transform; pointer-events: none; }
.step { position: absolute; width: 334px; margin-top: -80px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; opacity: .26; transition: opacity .5s var(--soft), color .6s var(--soft); }
.step.is-active { opacity: 1; }
.step .n { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 30px; padding: 0 10px; border: 1px solid currentColor; border-radius: 999px; font-size: 11px; font-weight: 500; letter-spacing: -0.02em; }
.step h3 { font-size: 32px; line-height: 1.12; letter-spacing: -0.045em; }
.step p { font-size: 15px; line-height: 1.45; opacity: .72; }
.step-1 { left: calc(50% - 180px - 110px - 334px); top: 50%; }
.step-2 { left: calc(50% + 180px + 110px); top: calc(50% + 300px); }
.step-3 { left: calc(50% - 180px - 110px - 334px); top: calc(50% + 600px); }
.stage-how[data-stage="2"] .step, .stage-how[data-stage="3"] .step { color: #fff; }

/* Вопросы: стекло как у шапки, без разделителя; ответ раскрывается вверх */
.how-faq { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); width: 520px; opacity: 0; z-index: 2; }
.faq-row { position: relative; display: flex; padding: 4px; border-radius: 6px; }
.faq-row button { position: relative; z-index: 1; flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 14px; font-size: 13px; text-align: left; border-radius: 3px; }
.pm { position: relative; width: 10px; height: 10px; flex: none; }
.pm::before, .pm::after { content: ""; position: absolute; left: 0; top: 4.5px; width: 10px; height: 1px; background: currentColor; transition: transform .35s var(--circ); }
.pm::after { transform: rotate(90deg); }
button[aria-expanded="true"] .pm::after { transform: rotate(0deg); }
.faq-answer { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); padding: 16px 18px; border-radius: 6px; font-size: 14px; line-height: 1.45; opacity: 0; transform: translateY(8px); pointer-events: none; --g-blur: 22px; transition: opacity .5s var(--rise), transform .7s var(--rise), background .3s var(--fade), color .3s var(--fade); }
.faq-answer.is-open { opacity: 1; transform: none; pointer-events: auto; }

/* ---------- Refinance: тот же чёрный, без шва ---------- */
.stage-ref { position: relative; height: 100vh; background: var(--black); color: #fff; }
.ref-in { position: relative; height: 100%; padding: 96px 40px 40px; }
.ref-frame { position: relative; height: 100%; border: 1px solid rgba(255,255,255,.26); border-radius: 8px; }
.ref-copy { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 20px; pointer-events: none; }
.ref-copy .btn { pointer-events: auto; margin-top: 12px; }
.ref-h { font-size: 64px; letter-spacing: -0.05em; }
.ref-line { display: inline-flex; align-items: center; gap: 16px; }
.ref-line img { filter: brightness(0) invert(1); }
.ref-p { font-size: 18px; color: rgba(255,255,255,.66); max-width: 520px; }

.stage-end { height: 60vh; display: grid; place-items: center; background: #fff; color: var(--muted); font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }
}