/* X Radar: ч/б вариант frem-design (из Frem_lab/04-Skills/frem-design/assets/frem.css). Акцент — белый, без лайма и голубого.
Подключение: + шрифты Google (см. SKILL.md).
Правило слоя: всё анимируемое — только transform / opacity / translate. Никаких blur/backdrop-filter
на больших слоях и в прокрутке — на них сайт скроллился рывками. */
/* ---------- 1. Токены ---------- */
:root{
--bg:#000; --card:#070707; --plane:#0b0b0b; --plane-2:#121212; --plane-3:#141414;
--line:rgba(255,255,255,.16); --line-2:rgba(255,255,255,.34); --line-3:rgba(255,255,255,.85);
--line-soft:rgba(255,255,255,.09);
--fg:#fff; --text-2:#cfcfcf; --muted:#a3a3a3; --muted-2:#8a8a8a; --dim:#5f5f5f;
--acid:#ffffff; --acid-2:#a8a8a8; --acid-hi:#ffffff; --acid-glow:rgba(255,255,255,.32);
--cold:#8f8f8f; /* второй цвет — только в задниках и второй линии графика, не в UI */
--danger:#ff6b6b;
--f-display:"Unbounded","Arial Black",system-ui,sans-serif;
--f-body:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
--f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
--ease:cubic-bezier(.2,.8,.2,1); /* стандартная «вылетающая» кривая */
--ease-out:cubic-bezier(.16,1,.3,1); /* длинные появления: слова, блоки, модалки */
--r-sm:12px; --r:14px; --r-md:22px; --r-lg:26px;
color-scheme:dark;
}
/* ---------- 2. База ---------- */
[hidden]{display:none!important}
*{box-sizing:border-box}
img{max-width:100%}
html{scroll-behavior:smooth;scroll-padding-top:84px;scrollbar-gutter:stable}
html:has(dialog[open]){overflow:hidden}
body{background:var(--bg);color:var(--fg);font:17px/1.55 var(--f-body);margin:0;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--bg)}
a{color:inherit}
::selection{background:var(--acid);color:#000}
:focus-visible{outline:2px solid var(--acid);outline-offset:3px;border-radius:10px}
main{position:relative;z-index:1}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
section{padding-block:72px}
h1,h2,h3{font-family:var(--f-display);font-weight:500;margin:0;line-height:1.02;text-wrap:balance}
/* ---------- 3. Типографика-фишки ---------- */
.acid{color:var(--acid)}
.tag{font:500 12px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--acid)}
.kicker{font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.label{font:500 clamp(20px,2.4vw,30px)/1.15 var(--f-display);text-transform:uppercase;letter-spacing:.01em}
/* текст гаснет вправо: белый → серый → почти чёрный */
.fade-text{background:linear-gradient(90deg,#fff 0%,#fff 45%,#6b6b6b 75%,#2a2a2a 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* «металлические» цифры 01/02/03 — тонкий Unbounded, градиент сверху вниз */
.metal{font:300 clamp(64px,7vw,96px)/.8 var(--f-display);background:linear-gradient(180deg,#fff 0%,#cfcfcf 35%,#4a4a4a 70%,#141414 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.04em;user-select:none}
/* перелив по акцентному слову заголовка */
.sheen{background:linear-gradient(100deg,var(--acid) 0%,var(--acid) 38%,#7a7a7a 50%,var(--acid) 62%,var(--acid) 100%);background-size:260% 100%;
-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 5.5s linear infinite;filter:drop-shadow(0 0 24px rgba(255,255,255,.35))}
@keyframes sheen{from{background-position:120% 0}to{background-position:-140% 0}}
/* ---------- 4. Кнопки ---------- */
/* громкая (маркетинг): лаймовый градиент, свечение, блик по наведению */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;cursor:pointer;
font:500 17px/1 var(--f-display);letter-spacing:.04em;padding:18px 28px;border-radius:var(--r);border:0;color:#0a0a0a;
background:linear-gradient(180deg,var(--acid),var(--acid-2));box-shadow:0 0 0 1px rgba(255,255,255,.5),0 10px 40px -10px var(--acid-glow);
transition:transform .25s,box-shadow .25s;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.65) 50%,transparent 65%);transform:translateX(-130%);transition:transform .8s}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--acid),0 16px 50px -8px var(--acid-glow)}
.btn:hover::after{transform:translateX(130%)}
.btn.line{background:transparent;color:var(--fg);box-shadow:0 0 0 2px var(--line-3) inset,0 0 18px rgba(255,255,255,.28),0 0 2px rgba(255,255,255,.6) inset}
.btn.line:hover{box-shadow:0 0 0 2px #fff inset,0 0 30px rgba(255,255,255,.45)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.4;pointer-events:none}
/* спокойная (формы, оплата): ровный лайм, без градиента и блика, стрелка в тёмной плашке */
.calm .btn:not(.line){background:var(--acid);color:#0a0a0a;font:600 16px/1.2 var(--f-body);letter-spacing:0;box-shadow:none;transition:background-color .25s,translate .3s var(--ease)}
.calm .btn:not(.line)::after{display:none}
.calm .btn:not(.line):hover{background:var(--acid-hi);transform:none;box-shadow:none;translate:0 -1px}
.calm .btn:not(.line):active{translate:0 1px}
.calm .btn.line{box-shadow:0 0 0 1px rgba(255,255,255,.22) inset}
.btn.go{justify-content:space-between;gap:16px;width:100%;padding:8px 8px 8px 24px;min-height:60px;border-radius:16px;text-align:left}
.btn .arr{width:44px;height:44px;border-radius:11px;background:#0a0a0a;color:var(--acid);display:grid;place-items:center;flex:0 0 auto;transition:translate .35s var(--ease)}
.btn .arr svg{width:20px;height:20px}
.btn:hover .arr{translate:3px 0}
.chip{font:500 14px/1 var(--f-display);padding:14px 18px;border-radius:var(--r);border:0;background:none;color:var(--fg);cursor:pointer;
box-shadow:0 0 0 1.5px var(--line-2) inset;transition:box-shadow .3s,color .3s}
.chip:hover{box-shadow:0 0 0 1.5px var(--acid) inset,0 0 18px var(--acid-glow);color:var(--acid)}
.chip[aria-pressed="true"]{background:linear-gradient(180deg,var(--acid),var(--acid-2));color:#0a0a0a;box-shadow:none}
/* ---------- 5. Шапка ---------- */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(0,0,0,.95);border-bottom:1px solid rgba(255,255,255,.06)}
.bar{display:flex;align-items:center;gap:28px;padding-block:16px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;font:500 18px/1 var(--f-display);letter-spacing:.08em}
.logo svg{width:42px;height:34px;filter:drop-shadow(0 0 8px rgba(255,255,255,.55))}
nav.tabs{display:flex;gap:26px;margin-left:auto;flex-wrap:wrap}
nav.tabs a{text-decoration:none;font:500 15px/1 var(--f-display);color:#d9d9d9;padding:8px 0;position:relative;transition:color .4s}
nav.tabs a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--acid);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);box-shadow:0 0 10px var(--acid)}
nav.tabs a:hover{color:#fff}
nav.tabs a[aria-current="page"]{color:var(--acid)}
nav.tabs a[aria-current="page"]::after{transform:none}
.bar .btn{padding:13px 18px;font-size:13px}
.progress{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);height:2px;z-index:40;background:linear-gradient(90deg,var(--acid-2),var(--acid));
transform-origin:left;transform:scaleX(0);box-shadow:0 0 12px var(--acid)}
@supports (animation-timeline: scroll()){ .progress{animation:grow linear both;animation-timeline:scroll(root)} }
@keyframes grow{to{transform:scaleX(1)}}
/* ---------- 6. Герой ---------- */
.hero{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:28px;padding-block:64px 56px;align-items:start}
.hero > *{min-width:0}
/* 8.4vw / 128px: слово из 6–7 букв капслоком ещё влезает в левую колонку рядом с фактами */
.hero h1{font-size:clamp(44px,8.4vw,128px);font-weight:500;letter-spacing:-.02em;text-transform:uppercase;line-height:.9;position:relative;z-index:1}
.hero .who{font:500 clamp(22px,2.6vw,36px)/1.1 var(--f-display);color:var(--acid);margin-top:22px;position:relative;z-index:1}
.hero .lead{color:var(--text-2);max-width:44ch;margin:20px 0 34px;position:relative;z-index:1}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;position:relative;z-index:1}
/* фирменный мотив: линия «графика», которая рисуется за заголовком (белая + лаймовая подсветка + холодная вторая) */
.chart{position:absolute;left:-2%;top:4%;width:90%;height:56%;z-index:0;pointer-events:none;overflow:visible}
.chart path{fill:none;stroke:#fff;stroke-width:5;filter:drop-shadow(0 0 6px rgba(255,255,255,.55))}
.chart .glowline{stroke:var(--acid);stroke-width:2;opacity:.9;filter:drop-shadow(0 0 8px var(--acid))}
.chart .cold{stroke:var(--cold);stroke-width:2;opacity:.5;filter:drop-shadow(0 0 8px rgba(170,170,170,.8))}
.chart .draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 2.6s cubic-bezier(.65,0,.35,1) .2s forwards}
.chart .cold.draw{animation-delay:.9s}
@keyframes draw{to{stroke-dashoffset:0}}
.hero h1 .ln{display:block;animation:up 1.1s var(--ease) both}
.hero h1 .ln:nth-child(2){animation-delay:.12s}
.hero h1 .ln:nth-child(3){animation-delay:.24s}
@keyframes up{from{transform:translateY(40%);opacity:0}}
/* параллакс героя прямо от прокрутки — на видеокарте; где scroll-timeline нет — просто без него */
@supports (animation-timeline: scroll()){
.hero h1,.hero .who,.hero .chart,.facts{animation:px linear both;animation-timeline:scroll(root);animation-range:0 140vh}
.hero h1{--px:30.8vh} .hero .chart{--px:53.2vh} .hero .who{--px:16.8vh} .facts{--px:-11.2vh}
}
@keyframes px{to{transform:translate3d(0,var(--px),0)}}
/* крупные цифры под заголовком: моно, лаймовая чёрточка снизу */
.stats{display:flex;flex-wrap:wrap;gap:14px 0;margin-top:34px;position:relative;z-index:1}
.stat{display:grid;gap:6px;padding:4px 30px 4px 0;margin-right:30px;border-right:1px solid rgba(255,255,255,.14);text-decoration:none;color:var(--fg)}
.stat:last-child{border-right:0;margin-right:0}
.stat b{font:700 clamp(32px,3.2vw,46px)/1 var(--f-mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-shadow:0 0 24px rgba(255,255,255,.18);position:relative;padding-bottom:12px}
.stat b::after{content:"";position:absolute;left:0;bottom:0;width:26px;height:2px;border-radius:2px;background:var(--acid);box-shadow:0 0 10px var(--acid-glow)}
.stat span{font:500 13px/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* факты справа от героя: контурные плашки, одна — зелёная */
.facts{display:grid;gap:16px;position:relative;z-index:1}
.fact{border-radius:var(--r-md);padding:22px 24px;background:rgba(0,0,0,.8);box-shadow:0 0 0 1.5px var(--line-2) inset,0 0 22px rgba(255,255,255,.06);
font:400 clamp(19px,1.8vw,24px)/1.22 var(--f-display);transition:transform .35s var(--ease)}
.fact:hover{transform:translateX(-6px)}
.fact small{display:block;font:500 14px/1.4 var(--f-body);color:var(--muted);margin-top:8px}
.fact b{font-weight:400;color:var(--acid)}
.fact.green{background:linear-gradient(170deg,rgba(0,0,0,.4) 0%,rgba(255,255,255,.10) 100%);box-shadow:0 0 0 1.5px rgba(255,255,255,.45) inset,0 0 30px rgba(255,255,255,.12)}
.fact .timer{font:700 clamp(26px,2.4vw,34px)/1 var(--f-mono);color:var(--acid);text-shadow:0 0 18px var(--acid-glow);display:block;margin-top:8px}
/* ---------- 7. Бегущая строка: контурные слова, одно залитое, лаймовые разделители ---------- */
.marquee{overflow:hidden;border-block:1px solid rgba(255,255,255,.08);padding-block:22px;position:relative}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:1;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,#000,transparent)}
.marquee::after{right:0;background:linear-gradient(-90deg,#000,transparent)}
.mq{display:flex;gap:44px;width:max-content;animation:mq 34s linear infinite;will-change:transform}
.mq span{font:500 clamp(30px,4.2vw,56px)/1 var(--f-display);text-transform:uppercase;white-space:nowrap;color:transparent;-webkit-text-stroke:1.3px rgba(255,255,255,.55)}
.mq span.f{color:#fff;-webkit-text-stroke:0}
.mq i{font:500 clamp(30px,4.2vw,56px)/1 var(--f-display);font-style:normal;color:var(--acid);text-shadow:0 0 18px var(--acid-glow)}
@keyframes mq{to{transform:translateX(-50%)}}
/* ---------- 8. Заголовок секции ---------- */
.sec-title{display:flex;align-items:end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.sec-title h2{font-size:clamp(32px,4.4vw,58px);font-weight:400}
.sec-title p{color:var(--muted);max-width:44ch;margin:0}
/* ---------- 9. Карточки ---------- */
/* граница — не border, а inset box-shadow: ровная линия + мягкое свечение одним свойством */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.card{border-radius:var(--r-lg);background:var(--card);box-shadow:0 0 0 2px var(--line-3) inset,0 0 26px rgba(255,255,255,.08);display:flex;flex-direction:column;
overflow:hidden;position:relative;min-width:0;transition:transform .45s var(--ease),box-shadow .45s}
/* пятно света под курсором: JS пишет --mx/--my */
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(500px circle at var(--mx,80%) var(--my,0%),rgba(255,255,255,.12),transparent 45%);opacity:0;transition:opacity .4s;pointer-events:none}
.card:hover{transform:translateY(-6px);box-shadow:0 0 0 2px #fff inset,0 0 40px rgba(255,255,255,.16)}
.card:hover::before{opacity:1}
.card .top{padding:34px 34px 30px;display:grid;gap:16px;flex:1;align-content:start}
.card h3{font-size:clamp(28px,3vw,42px);font-weight:400}
.card p{margin:0;color:#d4d4d4;max-width:46ch}
.card .bottom{border-top:2px solid var(--line-3);padding:22px 34px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.card .no{font:400 30px/1 var(--f-display);background:linear-gradient(90deg,#fff 0%,#9a9a9a 40%,#000 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.card .no b{font-weight:400;-webkit-text-fill-color:var(--acid)}
.card.big{grid-column:1 / -1}
.card.big .top{grid-template-columns:1fr auto;align-items:end;column-gap:40px}
.card.big .metal{font-size:clamp(90px,12vw,170px)}
/* плитка-преимущество: текст + металлическая цифра справа, лаймовый « /» в конце фразы */
.why{display:grid;grid-template-columns:1fr 1fr;gap:26px 34px}
.wb{position:relative;border-radius:20px;background:rgba(6,7,8,.9);box-shadow:0 0 0 2px rgba(255,255,255,.22) inset;padding:22px 150px 22px 24px;min-height:96px;
display:flex;align-items:center;overflow:hidden;transition:box-shadow .5s var(--ease-out),transform .5s var(--ease-out)}
.wb:hover{box-shadow:0 0 0 2px rgba(255,255,255,.6) inset,0 0 26px rgba(255,255,255,.08);transform:translateY(-4px)}
.wb p{margin:0;font:500 17px/1.4 var(--f-body);position:relative;z-index:1}
.wb p::after{content:" /";color:var(--acid);font-weight:700}
.wb .metal{position:absolute;right:18px;top:50%;transform:translateY(-50%)}
/* шаги 01-02-03 */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.stp{border-radius:var(--r-md);background:rgba(6,7,8,.9);box-shadow:0 0 0 2px rgba(255,255,255,.22) inset;padding:28px;display:grid;gap:12px;min-width:0;
transition:box-shadow .5s var(--ease-out),transform .5s var(--ease-out)}
.stp:hover{transform:translateY(-4px)}
.stp .metal{font-size:80px}
.stp h3{font-size:22px;font-weight:400}
.stp p{margin:0;color:var(--muted)}
/* карточка-ссылка «доверие»: тихая плоскость, круглая стрелка в углу */
.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tcard{position:relative;display:grid;gap:6px;align-content:start;padding:20px 58px 20px 20px;border-radius:20px;text-decoration:none;color:var(--fg);
background:var(--plane);box-shadow:0 0 0 1px var(--line-soft) inset;transition:box-shadow .3s,translate .35s var(--ease)}
.tcard:hover{box-shadow:0 0 0 1px rgba(255,255,255,.55) inset,0 16px 36px -20px var(--acid-glow);translate:0 -3px}
.tcard b{font:400 19px/1.2 var(--f-display)}
.tcard .t-s{font-size:14px;line-height:1.4;color:var(--muted)}
.tcard .t-go{position:absolute;right:16px;top:16px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#171717;color:var(--acid);
transition:background-color .3s,color .3s,translate .35s var(--ease)}
.tcard .t-go svg{width:14px;height:14px}
.tcard:hover .t-go{background:var(--acid);color:#0a0a0a;translate:2px -2px}
/* ---------- 10. Прайс-ряд (каталог) ---------- */
.prow{display:grid;grid-template-columns:minmax(0,1fr) 150px 150px auto;grid-template-areas:"main stock price buy";align-items:center;gap:28px;
padding:24px 28px;border-radius:var(--r-md);background:var(--card);box-shadow:0 0 0 1.5px var(--line-2) inset;
transition:box-shadow .35s,transform .35s var(--ease);animation:vtIn .55s var(--ease) backwards;animation-delay:calc(var(--i,0) * 45ms)}
.prow:hover{box-shadow:0 0 0 1.5px var(--acid) inset,0 0 30px rgba(255,255,255,.1);transform:translateX(4px)}
.pr-main{grid-area:main;min-width:0}
.pr-name{font:400 clamp(20px,2vw,26px)/1.15 var(--f-display);margin:0;overflow-wrap:anywhere}
.pr-desc{margin:8px 0 0;color:var(--muted);font-size:15px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pr-stock{grid-area:stock;font:500 13px/1.3 var(--f-mono);color:var(--text-2);display:flex;align-items:center;gap:8px}
.pr-stock i{width:8px;height:8px;border-radius:50%;background:var(--acid);box-shadow:0 0 10px var(--acid);flex:0 0 auto}
.pr-price{grid-area:price;font:400 28px/1 var(--f-display);color:var(--acid);text-align:right;white-space:nowrap}
.pr-price small{display:block;font:500 12px/1 var(--f-mono);color:var(--muted);margin-top:8px}
.prow .btn{grid-area:buy;padding:15px 22px;font-size:14px}
.prow.out{opacity:.5}
.prow.out .pr-stock i{background:var(--dim);box-shadow:none}
/* ---------- 11. Спокойная форма + итог ----------
Где человек вводит данные и платит — тише: серые плоскости без свечения, акцент только у кнопки и суммы. */
.topup{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:start}
.form{border-radius:var(--r-lg);background:var(--plane);box-shadow:0 0 0 1px var(--line-soft) inset;padding:26px;display:grid;gap:19px;min-width:0}
label,.field-legend{display:block;font:500 14px/1.2 var(--f-body);color:#d4d4d4;margin-bottom:8px}
input,textarea,select{width:100%;font:500 16px/1.4 var(--f-body);color:var(--fg);background:var(--plane-2);border:0;border-radius:var(--r-sm);padding:15px 16px;
box-shadow:0 0 0 1px rgba(255,255,255,.1) inset;transition:box-shadow .25s,background-color .25s}
input.mono,textarea.mono{font-family:var(--f-mono)} /* логины, адреса, коды — моно */
input:hover,textarea:hover,select:hover{background-color:#161616}
input:focus,textarea:focus,select:focus{outline:none;background-color:var(--plane-3);box-shadow:0 0 0 1px rgba(255,255,255,.55) inset,0 0 0 4px rgba(255,255,255,.08)}
input::placeholder,textarea::placeholder{color:#5c5c5c}
textarea{min-height:140px;resize:vertical}
select{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;background-repeat:no-repeat;background-position:right 16px center;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23a3a3a3' stroke-width='1.8'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E")}
.hint{font-size:14px;color:var(--muted-2);margin-top:6px}
.err{font-size:14px;color:var(--danger);margin-top:6px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.amounts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.amounts button{border:0;font:500 14px/1 var(--f-body);background:#151515;color:var(--text-2);border-radius:999px;padding:9px 15px;cursor:pointer;transition:background-color .2s,color .2s}
.amounts button:hover{background:#202020;color:#fff}
/* сегмент-переключатель на радиокнопках с ползунком: JS ставит --n (кол-во) и --i (выбранный) */
.seg-field{border:0;margin:0;padding:0;min-width:0}
.seg{position:relative;isolation:isolate;display:flex;padding:4px;border-radius:var(--r);background:var(--plane-3)}
.seg::before{content:"";position:absolute;z-index:-1;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / var(--n, 2));border-radius:10px;
background:#272727;box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 6px 16px -6px rgba(0,0,0,.7);
translate:calc(var(--i, 0) * 100%) 0;transition:translate .4s cubic-bezier(.3,.7,.15,1)}
.seg label{flex:1 1 0;min-width:0;margin:0;position:relative;cursor:pointer}
.seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.seg label span{display:block;text-align:center;font:500 14px/1.2 var(--f-body);color:#8f8f8f;padding:11px 6px;border-radius:10px;transition:color .25s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg label:hover span{color:#d4d4d4}
.seg input:checked + span{color:#fff}
.seg input:focus-visible + span{outline:2px solid var(--acid);outline-offset:-2px}
/* итог: сумма крупно моно, знак валюты маленький лаймовый */
.summary{position:sticky;top:calc(env(safe-area-inset-top,0px) + 100px);border-radius:var(--r-lg);padding:32px;display:grid;gap:16px;min-width:0;
background:linear-gradient(165deg,var(--plane) 40%,rgba(60,60,60,.35) 150%);box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 20px 60px -34px rgba(170,170,170,.25)}
.summary .big{display:flex;align-items:flex-start;gap:6px;font:700 clamp(52px,5vw,74px)/.95 var(--f-mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums;
padding-block:6px 4px;color:#fff;text-shadow:0 0 30px rgba(255,255,255,.16)}
.summary .big .cur{font:700 .5em/1 var(--f-mono);margin-top:.1em;color:var(--acid);text-shadow:0 0 18px var(--acid-glow)}
dl.sum{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin:0}
dl.sum dt{color:var(--muted-2)}
dl.sum dd{margin:0;text-align:right;font:700 15px/1.3 var(--f-mono);overflow-wrap:anywhere}
.divider{border-top:1px solid rgba(255,255,255,.08);padding-top:18px;display:grid;gap:14px}
.state{font:500 15px/1.45 var(--f-body)}
.state:empty{display:none}
.state.ok{color:var(--acid)}
.state.err{color:var(--danger)}
/* только что показанный блок мягко выезжает (без JS) */
.appear{transition:opacity .45s var(--ease),translate .45s var(--ease)}
@starting-style{ .appear{opacity:0;translate:0 6px} }
/* ---------- 12. Модалка на