/* Payora Front — home page */

/* ---------------------------------------------------------------- hero theatre */
.fx-home-hero{padding-top:clamp(40px,6vw,86px)}
.fx-home-hero .fx-h1{font-size:clamp(42px,6vw,82px)}
.fx-play{display:grid;place-items:center;color:var(--ruby)}
/* [17.09.2026] Кольцо монет вокруг карточки выходит за правый край секции на ~34 px и
   растягивало ДОКУМЕНТ: на 1440 появлялась горизонтальная прокрутка окна. Обрезаем по
   секции — за краем экрана всё равно ничего не видно. clip, а не hidden: hidden сделал бы
   секцию контейнером прокрутки. Раньше это правило стояло только на телефоне (≤720). */
.fx-home-hero{overflow-x:clip}
.fxh-stage{position:relative;min-height:560px;display:grid;place-items:center;perspective:1400px}
.fxh-orbit{position:absolute;inset:50% auto auto 50%;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;border:1px dashed var(--line-2);animation:fx-spin 90s linear infinite}
.fxh-orbit::after{content:"";position:absolute;inset:70px;border-radius:50%;border:1px solid var(--line)}
.fxh-orb{position:absolute;left:50%;top:50%;margin:-19px 0 0 -19px;transform:rotate(calc(var(--k)*36deg)) translate(280px) rotate(calc(var(--k)*-36deg))}
.fxh-orb .fx-coin{animation:fxh-counter 90s linear infinite;box-shadow:0 10px 24px -8px rgba(12,17,48,.35)}
@keyframes fxh-counter{to{transform:rotate(-360deg)}}
.fxh-card{position:relative;z-index:2;width:min(400px,100%);background:var(--raise);border:1px solid var(--line);border-radius:28px;padding:20px;box-shadow:var(--shadow-3),0 0 0 8px color-mix(in srgb,var(--surface) 55%,transparent)}
.fxh-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fxh-shop{display:flex;align-items:center;gap:10px}
.fxh-shop-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--ink);color:var(--bg);font:640 17px/1 var(--f-display)}
.fxh-shop b{display:block;font-size:14.5px}
.fxh-shop small{font-size:12px;color:var(--faint)}
.fxh-status{position:relative;display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:999px;font:600 12px/1 var(--f-ui);background:var(--amber-s);color:var(--amber);transition:background .5s,color .5s;white-space:nowrap}
.fxh-status i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:fx-pulse 1.6s infinite}
.fxh-status [data-st]{display:none}
[data-theatre][data-state="pick"] .fxh-status [data-st="pick"],[data-theatre][data-state="pay"] .fxh-status [data-st="pay"],[data-theatre][data-state="confirm"] .fxh-status [data-st="confirm"],[data-theatre][data-state="paid"] .fxh-status [data-st="paid"]{display:inline}
html:not(.fx-js) .fxh-status [data-st="pick"]{display:inline}
[data-theatre][data-state="confirm"] .fxh-status{background:var(--sapphire-s);color:var(--sapphire)}
[data-theatre][data-state="paid"] .fxh-status{background:var(--emerald-s);color:var(--emerald)}
.fxh-total{display:flex;align-items:baseline;justify-content:space-between;margin:18px 0 12px;padding:14px 16px;border-radius:18px;background:var(--surface-2);border:1px solid var(--line)}
.fxh-total small{font-size:13px;color:var(--muted)}
.fxh-total b{font:560 30px/1 var(--f-display);letter-spacing:-.04em}
.fxh-steps{display:flex;gap:6px;margin-bottom:12px}
.fxh-steps span{flex:1;position:relative;padding-top:10px;font:600 11.5px/1 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}
.fxh-steps span::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px;background:var(--line-2);overflow:hidden}
.fxh-steps span::after{content:"";position:absolute;left:0;top:0;height:3px;border-radius:3px;width:0;background:var(--jewel);transition:width .8s var(--ease-out)}
[data-state="pick"] [data-sp="pick"]::after,[data-state="pay"] [data-sp="pick"]::after,[data-state="pay"] [data-sp="pay"]::after,[data-state="confirm"] [data-sp="pick"]::after,[data-state="confirm"] [data-sp="pay"]::after,[data-state="paid"] [data-sp]::after{width:100%}
[data-state="pick"] [data-sp="pick"],[data-state="pay"] [data-sp="pay"],[data-state="confirm"] [data-sp="pay"],[data-state="paid"] [data-sp="paid"]{color:var(--ink)}
.fxh-body{position:relative;height:238px}
.fxh-scene{position:absolute;inset:0;opacity:0;transform:translateY(12px) scale(.98);transition:opacity .55s var(--ease-out),transform .7s var(--ease-out);pointer-events:none}
[data-state="pick"] [data-scene="pick"],[data-state="pay"] [data-scene="pay"],[data-state="confirm"] [data-scene="confirm"],[data-state="paid"] [data-scene="paid"]{opacity:1;transform:none}
html:not(.fx-js) [data-scene="pick"]{opacity:1;transform:none}
.fxh-coins{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.fxh-coin{display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:10px 12px;border-radius:16px;border:1px solid var(--line);background:var(--surface);transition:border-color .4s,box-shadow .4s,transform .4s var(--spring)}
.fxh-coin .fx-coin{grid-row:1/3}
/* [18.09.2026] Правило писалось для НАЗВАНИЯ монеты и ловило потомком ЛЮБОЙ <b>
   внутри карточки — в том числе значок сети <b class="fx-coin-net"> внутри кружка
   монеты. Тому доставались и кегль 13,5 px вместо 7,2, и overflow:hidden: буква
   сети («T» у TRON, «B» у BSC) не влезала в бокс 13x13 и обрезалась. Отсюда правило
   шире одного места: «многоточие тут намеренно» верно ДЛЯ ТОГО элемента, который
   имел в виду автор, а селектор по потомку раздаёт это оправдание вслепую. */
.fxh-coin>b{font-size:13.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fxh-coin small{font-size:11.5px;color:var(--faint);line-height:1.2}
[data-state="pick"].is-picked .fxh-coin.is-pick{border-color:var(--sapphire);box-shadow:0 0 0 4px var(--sapphire-s);transform:scale(1.03)}
.fxh-pay{display:flex;gap:16px;align-items:center;padding:12px;border-radius:18px;border:1px solid var(--line);background:var(--surface)}
.fxh-qr{flex:none;color:var(--ink);padding:8px;background:#fff;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line)}
:root[data-theme="dark"] .fxh-qr{color:#0C1130}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fxh-qr{color:#0C1130}}
.fxh-pay-r{display:flex;flex-direction:column;gap:8px;min-width:0}
.fxh-pay-r small{font-size:12px;color:var(--muted)}
.fxh-pay-r>b{font:560 24px/1 var(--f-mono);letter-spacing:-.03em}
.fxh-pay-r>b em{font-style:normal;font-size:14px;color:var(--muted)}
.fxh-net{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2)}
.fxh-addr,.fxh-timer{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.fxh-addr{padding:6px 9px;border-radius:9px;background:var(--surface-2);border:1px solid var(--line);width:fit-content}
.fxh-conf{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:4px}
.fxh-ring{position:relative;width:128px;height:128px}
.fxh-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.fxh-ring circle{fill:none;stroke:var(--line-2);stroke-width:8}
.fxh-ring .fxh-ring-p{stroke:url(#none);stroke:var(--sapphire);stroke-linecap:round;stroke-dasharray:327;stroke-dashoffset:calc(327 - 327*var(--cp,0));transition:stroke-dashoffset .35s var(--ease)}
.fxh-ring>span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.fxh-ring b{font-size:30px;line-height:1}
.fxh-ring small{font-size:12px;color:var(--faint)}
.fxh-blocks{display:flex;gap:4px}
.fxh-blocks i{width:14px;height:8px;border-radius:3px;background:var(--line-2);transition:background .3s}
.fxh-blocks i.is-on{background:var(--sapphire)}
.fxh-conf-l{font-size:12.5px;color:var(--muted)}
.fxh-paid{display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:12px;text-align:center}
.fxh-check{width:82px;height:82px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#12A77A,#0B7D5C);box-shadow:0 18px 40px -12px rgba(11,125,92,.55);margin-bottom:8px}
[data-state="paid"] .fxh-check{animation:fxh-pop .7s var(--spring) both}
[data-state="paid"] .fxh-check .fx-i path{stroke-dasharray:30;stroke-dashoffset:30;animation:fxh-draw .6s .25s var(--ease-out) forwards}
@keyframes fxh-pop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes fxh-draw{to{stroke-dashoffset:0}}
.fxh-paid>b{font:560 20px/1.2 var(--f-display);letter-spacing:-.02em}
.fxh-paid>small{font-size:13.5px;color:var(--muted)}
.fxh-hook{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:8px 12px;border-radius:999px;font-size:11.5px;background:var(--emerald-s);color:var(--emerald)}
.fxh-hook i{width:6px;height:6px;border-radius:50%;background:currentColor}
.fxh-float{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:16px;background:color-mix(in srgb,var(--raise) 88%,transparent);border:1px solid var(--line);box-shadow:var(--shadow-2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:fxh-float 7s var(--ease) infinite alternate}
.fxh-float small{display:block;font-size:11.5px;color:var(--faint)}
.fxh-float b{font-size:13.5px}
.fxh-f-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center}
/* Плашка баланса стояла на шапке карточки и закрывала аватар магазина: карточка —
   главный предмет сцены, летящая метка не должна её перекрывать. Уводим левее,
   на карточку заходит только скруглённый угол. */
.fxh-f1{left:-12%;top:12%}
.fxh-f2{right:-6%;top:44%;animation-delay:-2.5s}
.fxh-f3{left:2%;bottom:9%;animation-delay:-4.5s}
@keyframes fxh-float{to{transform:translateY(-14px)}}

/* ---------------------------------------------------------------- ribbon */
.fx-ribbon{padding:18px 0 clamp(40px,6vw,70px)}
.fx-ribbon-t{text-align:center;font-size:14.5px;color:var(--muted);margin-bottom:22px}
.fx-pill:hover{border-color:var(--line-3)}

/* ---------------------------------------------------------------- bento */
.fxb-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.fxb{display:flex;flex-direction:column;gap:12px;padding:28px}
.fxb h3{font-size:22px;letter-spacing:-.03em;margin-top:6px}
.fxb p{font-size:15px;color:var(--muted)}
.fxb .fx-card-link{margin-top:auto;padding-top:10px}
.fxb-accept{grid-column:span 4;flex-direction:row;gap:28px;align-items:stretch}
.fxb-copy{display:flex;flex-direction:column;gap:12px;flex:1 1 44%;min-width:0}
.fxb-meta{display:flex;align-items:baseline;gap:10px}
.fxb-meta b{font-size:36px;letter-spacing:-.04em;background:var(--jewel-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.fxb-meta span{font-size:13.5px;color:var(--muted)}
.fxb-donate{grid-column:span 2}
.fxb-payout,.fxb-balance{grid-column:span 3}
.fxb-vis{border-radius:18px;background:var(--surface-2);border:1px solid var(--line)}
.fxb-list{flex:1 1 56%;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:14px}
.fxb-row{display:grid;grid-template-columns:52px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-size:13.5px;opacity:0;transform:translateX(18px)}
.fx-card.is-in .fxb-row{animation:fxb-in .7s var(--ease-out) calc(var(--i)*140ms + 250ms) both}
@keyframes fxb-in{to{opacity:1;transform:none}}
.fxb-row .r{text-align:right}
.fxb-row .fx-chip{height:22px;font-size:11px}
.fxb-don{display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px}
.fxb-emoji{font-size:30px;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--ruby-s)}
.fxb-presets{display:flex;gap:6px}
.fxb-presets i{font:600 13px/1 var(--f-mono);font-style:normal;padding:9px 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface)}
.fxb-presets i.is-on{border-color:var(--ruby);background:var(--ruby-s);color:var(--ruby)}
.fxb-bar{width:100%;height:8px;border-radius:9px;background:var(--line-2);overflow:hidden}
.fxb-bar i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,var(--ruby),var(--amber));transition:width 1.8s var(--ease-out) .3s}
.fx-card.is-in .fxb-bar i{width:68%}
.fxb-bars{height:120px;display:flex;align-items:flex-end;gap:8px;padding:16px}
.fxb-bars i{flex:1;height:0;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,var(--amber),color-mix(in srgb,var(--amber) 35%,transparent));transition:height 1.1s var(--spring)}
.fx-card.is-in .fxb-bars i{height:var(--h)}
.fxb-bars i:nth-child(2){transition-delay:.06s}.fxb-bars i:nth-child(3){transition-delay:.12s}.fxb-bars i:nth-child(4){transition-delay:.18s}.fxb-bars i:nth-child(5){transition-delay:.24s}.fxb-bars i:nth-child(6){transition-delay:.3s}.fxb-bars i:nth-child(7){transition-delay:.36s}.fxb-bars i:nth-child(8){transition-delay:.42s}
.fxb-stack{display:flex;height:120px;padding:16px;gap:6px;align-items:stretch}
.fxb-stack span{flex:0 0 0;border-radius:12px;background:linear-gradient(180deg,var(--c),color-mix(in srgb,var(--c) 70%,#000));color:#fff;font:600 12px/1 var(--f-mono);display:flex;align-items:flex-end;padding:10px;overflow:hidden;transition:flex-basis 1.2s var(--ease-out)}
.fx-card.is-in .fxb-stack span{flex-basis:var(--w)}

/* ---------------------------------------------------------------- numbers */
.fx-numbers{padding-top:0!important}

/* ---------------------------------------------------------------- network board */
.fxn-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.fxn-head .fx-head{margin-bottom:28px}
.fxn-upd{display:inline-flex;align-items:center;gap:10px;margin-bottom:30px;font:500 13px/1 var(--f-mono);color:var(--muted);padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface)}
.fxn-foot{display:flex;justify-content:center;margin-top:26px}

/* ---------------------------------------------------------------- custody */
.fxc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.fxc-card{position:relative;display:flex;flex-direction:column;gap:22px;padding:30px;border-radius:var(--r-lg);background:rgba(255,255,255,.04);border:1px solid var(--line)}
.fxc-direct{background:linear-gradient(160deg,rgba(142,162,255,.1),rgba(255,134,172,.06));border-color:rgba(182,151,255,.28)}
.fxc-top{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.fxc-top h3{font-size:24px;letter-spacing:-.03em}
.fxc-flow{display:flex;align-items:center;padding:20px 16px;border-radius:18px;background:rgba(0,0,0,.18);border:1px solid var(--line)}
.fxc-node{display:flex;flex-direction:column;align-items:center;gap:8px;flex:none;width:84px;text-align:center}
.fxc-node small{font-size:11.5px;line-height:1.3;color:var(--muted)}
.fxc-node-ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid var(--line-2);color:var(--ink)}
.fxc-direct .fxc-node:last-child .fxc-node-ic,.is-a .fxc-node:last-child .fxc-node-ic{background:var(--emerald-s);color:var(--emerald);border-color:transparent}
.fxc-wire{position:relative;flex:1;height:2px;margin-bottom:24px;background:var(--line-2);border-radius:2px;overflow:hidden;min-width:14px}
.fxc-wire i{position:absolute;top:-2px;left:-20%;width:18px;height:6px;border-radius:6px;background:var(--jewel-text);animation:fxc-run 2.4s var(--ease) infinite}
.fxc-wire:nth-child(4) i{animation-delay:.5s}.fxc-wire:nth-child(6) i{animation-delay:1s}
@keyframes fxc-run{to{left:110%}}
@keyframes fxc-run-v{to{top:110%}}
.fxc-card .fx-checks li{font-size:15px;color:var(--ink-2)}

/* ---------------------------------------------------------------- pricing */
.fxp-calc{max-width:760px;margin:0 auto 26px;padding:22px 24px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1)}
.fxp-calc-row{display:flex;align-items:center;gap:18px}
.fxp-calc-row output{flex:none;min-width:110px;text-align:right;font-size:22px;font-weight:600;letter-spacing:-.03em}
.fxp-calc-n{margin-top:12px;font-size:13px;color:var(--faint)}
.fxp-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.fxp-plan{position:relative;border-radius:var(--r-lg);padding:1px;background:var(--line);transition:transform .5s var(--ease-out),box-shadow .4s}
.fxp-plan:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.fxp-plan.is-feat{background:var(--jewel);box-shadow:var(--glow)}
.fxp-plan-in{height:100%;display:flex;flex-direction:column;gap:18px;padding:28px;border-radius:calc(var(--r-lg) - 1px);background:var(--surface)}
.fxp-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fxp-top h3{font-size:20px}
.fxp-price{display:flex;align-items:baseline;gap:6px}
.fxp-price b{font:560 52px/1 var(--f-display);letter-spacing:-.05em}
.fxp-price span{color:var(--muted)}
.fxp-rates{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted);padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fxp-rates b{color:var(--ink);font-family:var(--f-mono);font-weight:600}
.fxp-est{display:flex;align-items:baseline;justify-content:space-between;padding:12px 14px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);transition:background .4s,border-color .4s}
.fxp-est small{font-size:13px;color:var(--muted)}
.fxp-est b{font-size:20px;letter-spacing:-.03em}
.fxp-plan.is-best .fxp-est{background:var(--emerald-s);border-color:transparent}
.fxp-plan.is-best .fxp-est b{color:var(--emerald)}
.fxp-plan .fx-checks{flex:1}
.fxp-plan .fx-checks li{font-size:14.5px}
.fxp-plan .fx-btn{width:100%}

@media (max-width:1180px){
  .fxh-f1{left:-8%}.fxh-f2{right:0}
}
@media (max-width:980px){
  .fxh-stage{min-height:520px}
  .fxb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fxb-accept{grid-column:1/-1}
  .fxb-donate,.fxb-payout,.fxb-balance{grid-column:span 1}
  .fxb-donate{grid-column:1/-1}
  .fxc-grid,.fxp-plans{grid-template-columns:minmax(0,1fr)}
  .fxp-plans{max-width:520px;margin:0 auto}
}
@media (max-width:720px){
  .fxh-stage{min-height:auto;padding:30px 0 70px}
  .fxh-orbit{--R:min(210px,calc(50vw - 18px));width:calc(var(--R)*2);height:calc(var(--R)*2);margin:calc(var(--R)*-1) 0 0 calc(var(--R)*-1)}
  .fxh-orb{transform:rotate(calc(var(--k)*36deg)) translate(var(--R)) rotate(calc(var(--k)*-36deg))}
  .fxh-orb .fx-coin{--cs:30px!important}
  .fx-home-hero{overflow-x:clip}
  .fxh-float{display:none}
  .fxh-card{padding:16px;border-radius:24px}
  .fxh-body{height:250px}
  .fxh-pay{flex-direction:column;align-items:flex-start}
  .fxh-qr{width:96px;height:96px}
  .fxb-grid{grid-template-columns:minmax(0,1fr)}
  .fxb-accept{flex-direction:column}
  .fxb-row{grid-template-columns:48px minmax(0,1fr) auto}
  .fxb-row .fx-chip{display:none}
  .fxc-node{width:64px}
  .fxc-node-ic{width:38px;height:38px}
  .fxp-calc-row{flex-direction:column;align-items:stretch}
  .fxp-calc-row output{text-align:left}
  .fxn-table th:nth-child(5),.fxn-table td:nth-child(5),.fxn-table th:nth-child(2),.fxn-table td:nth-child(2){display:none}
}
@media (max-width:420px){
  /* [18.09.2026] На 320 px четыре узла по 64 px и три связи не помещались в полосу
     224 px: последний узел («Your wallet») уезжал на 138 px за край карточки и был
     виден наполовину. Раскладка становится ВЕРТИКАЛЬНОЙ — естественный вид
     горизонтального шага на телефоне, и сироты в ней не бывает по построению.
     Движение по связи сохранено своей дорожкой: прятать точку значило бы завести
     ещё один выключатель движения, а их мы не заводим. */
  .fxc-flow{flex-direction:column;align-items:center;padding:18px 12px}
  .fxc-node{width:100%}
  .fxc-wire{width:2px;height:26px;min-width:0;flex:none;margin:0}
  .fxc-wire i{top:-20%;left:-2px;width:6px;height:18px;animation-name:fxc-run-v}
  .fxh-coins{grid-template-columns:minmax(0,1fr)}
  .fxh-coin:nth-child(n+5){display:none}
}