/* FutureSubs · экраны «Активируем подписку…» и «Готово — не закрывайте эту страницу» · 02.10.2026
   Только оформление. Живую сцену (галактика из частиц) рисует fs-act.*.js на холсте во всю карточку;
   без него и без WebGL экран остаётся цельным: базовое состояние всего видимое, сцена — CSS-рисунок. */

/* ── палитра сервиса ── */
#activate,#procState,#cxIntro{--fx-a:#22d3ee;--fx-a-rgb:34,211,238;--fx-b:#3b82f6;--fx-b-rgb:59,130,246;--fx-c:#8b5cf6;--fx-c-rgb:139,92,246;--fx-ok:#34d399;--fx-ok-rgb:52,211,153;--fx-ink:#03131c;--fx-glass:rgba(8,13,25,.58);--fx-line:rgba(255,255,255,.1);--fx-text:rgba(234,240,250,.8)}
#activate[data-fx-svc="claude"],#p3.claude-activation #procState,body.claude-mode #procState,#okState.cx-claude #cxIntro{--fx-a:#f5a060;--fx-a-rgb:245,160,96;--fx-b:#e07850;--fx-b-rgb:224,120,80;--fx-c:#fbbf24;--fx-c-rgb:251,191,36;--fx-ink:#210d03;--fx-glass:rgba(22,12,8,.58)}
#activate[data-fx-svc="grok"],body.grok-mode #procState,#okState.cx-grok #cxIntro{--fx-a:#f4f7fb;--fx-a-rgb:244,247,251;--fx-b:#cbd3de;--fx-b-rgb:203,211,222;--fx-c:#8b95a7;--fx-c-rgb:139,149,167;--fx-ink:#0a0e15;--fx-glass:rgba(13,15,20,.62)}

/* ── карточка в состояниях экрана (атрибуты ставит скрипт) ── */
#activateSection[data-fx-state="proc"]{max-width:1100px!important}
#activate.act-card[data-fx-state="proc"]{max-width:1060px!important;padding:28px 40px 40px;isolation:isolate;background:linear-gradient(180deg,rgba(5,9,18,.9),rgba(4,7,14,.84));border-color:rgba(var(--fx-a-rgb),.2);box-shadow:0 50px 130px -60px rgba(var(--fx-b-rgb),.6),inset 0 1px 0 rgba(255,255,255,.07)}
#activate.act-card[data-fx-state="intro"]{isolation:isolate}
/* переход «ожидание → готово» без затемнения: карточка сайта при смене состояния заново проигрывает
   появление (fu, полсекунды темноты) — сцена должна продолжаться, а не гаснуть. Метку ставит скрипт
   в том же кадре и держит до ухода с экрана успеха, поэтому карточка не мигает и после интро. */
body.cx-activated #activate.act-card[data-fx-noanim]{animation:none!important}
#activate>.fxa-canvas{position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:0;transition:opacity .9s ease}
#activate[data-fx-live]>.fxa-canvas{opacity:1}
#activate:not([data-fx-state="proc"]):not([data-fx-state="intro"])>.fxa-canvas{opacity:0;transition:none}
#activate[data-fx-state="proc"] .steps-bar,#activate[data-fx-state="proc"] .steps-cap{display:none!important}
#activate[data-fx-state="proc"] .act-head{margin-bottom:10px}
#activate[data-fx-state="proc"] #actKeyBadge{font-family:'JetBrains Mono',monospace;background:rgba(var(--fx-a-rgb),.07);border-color:rgba(var(--fx-a-rgb),.26);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* плашка «Вы попали на активацию»: инструкция уже пройдена — остаются заголовок и чипы */
#activate[data-fx-state="proc"] #fsWelcomeAct{margin:0 0 4px;padding:12px 16px;background:var(--fx-glass);border-color:var(--fx-line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
#activate[data-fx-state="proc"] #fsWelcomeAct .fs-welc-p,#activate[data-fx-state="proc"] #fsWelcomeAct .fs-welc-w,#activate[data-fx-state="proc"] #fsWelcomeAct .fsw-note{display:none!important}
#activate[data-fx-state="proc"] #fsWelcomeAct .fs-welc-t{margin-bottom:0}
#activate[data-fx-state="proc"] #fsWelcomeAct .fsw-chips{margin-top:10px}
#activate[data-fx-state="intro"] #fsWelcomeAct{display:none!important}
#activate[data-fx-state="intro"][data-fx-live] #okState>.cx-neb{display:none}

/* ══════════ ОЖИДАНИЕ ══════════ */
#p3 #procState.fxa-proc{position:relative;padding:0;text-align:center}
#p3 #procState .fxa-hero{position:relative;height:clamp(214px,28vw,300px);pointer-events:none}

/* сцена без WebGL: тот же сюжет, нарисованный CSS */
#procState .fxa-art,#cxIntro .fxa-art{position:absolute;inset:0;transition:opacity .9s ease;background-image:radial-gradient(1.2px 1.2px at 12% 22%,rgba(255,255,255,.8),transparent 100%),radial-gradient(1px 1px at 27% 68%,rgba(255,255,255,.6),transparent 100%),radial-gradient(1.4px 1.4px at 44% 12%,rgba(255,255,255,.7),transparent 100%),radial-gradient(1px 1px at 63% 84%,rgba(255,255,255,.55),transparent 100%),radial-gradient(1.3px 1.3px at 78% 30%,rgba(255,255,255,.75),transparent 100%),radial-gradient(1px 1px at 91% 62%,rgba(255,255,255,.6),transparent 100%),radial-gradient(1px 1px at 6% 80%,rgba(255,255,255,.5),transparent 100%),radial-gradient(1.2px 1.2px at 55% 48%,rgba(255,255,255,.4),transparent 100%)}
#procState .fxa-art i,#cxIntro .fxa-art i{position:absolute;left:50%;top:50%;display:block}
#procState .fxa-art-disc,#cxIntro .fxa-art-disc{width:min(76%,580px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) rotate(-11deg) scaleY(.42);background:conic-gradient(from 40deg,rgba(var(--fx-a-rgb),0) 0deg,rgba(var(--fx-a-rgb),.6) 52deg,rgba(var(--fx-c-rgb),.3) 112deg,rgba(var(--fx-a-rgb),0) 172deg,rgba(var(--fx-a-rgb),0) 180deg,rgba(var(--fx-a-rgb),.6) 232deg,rgba(var(--fx-c-rgb),.3) 292deg,rgba(var(--fx-a-rgb),0) 352deg);filter:blur(11px);-webkit-mask-image:radial-gradient(circle,#000 16%,rgba(0,0,0,.55) 46%,transparent 70%);mask-image:radial-gradient(circle,#000 16%,rgba(0,0,0,.55) 46%,transparent 70%);animation:fxaArtSpin 70s linear infinite}
#procState .fxa-art-ring,#cxIntro .fxa-art-ring{width:min(88%,670px);aspect-ratio:1;border-radius:50%;border:1.5px dashed rgba(var(--fx-a-rgb),.34);transform:translate(-50%,-50%) rotate(-11deg) scaleY(.42)}
#procState .fxa-art-core,#cxIntro .fxa-art-core{width:128px;height:128px;margin:-64px 0 0 -64px;border-radius:50%;background:radial-gradient(circle,#fff 0,rgba(255,236,200,.92) 11%,rgba(var(--fx-a-rgb),.36) 38%,rgba(var(--fx-a-rgb),0) 68%)}
/* рисунок-замена нужен только там, где живой сцены нет: без скрипта (атрибутов нет) или когда WebGL отказал (data-fx-art) */
#activate[data-fx-state] .fxa-art{opacity:0}
#activate[data-fx-art] .fxa-art{opacity:1}
@keyframes fxaArtSpin{from{transform:translate(-50%,-50%) rotate(-11deg) scaleY(.42) rotate(0)}to{transform:translate(-50%,-50%) rotate(-11deg) scaleY(.42) rotate(360deg)}}

/* падающие звёзды — чистое украшение, базово невидимы */
#procState .fxa-comet{position:absolute;width:130px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,0),#fff);opacity:0;filter:drop-shadow(0 0 6px rgba(var(--fx-a-rgb),.95))}
#procState .fxa-comet1{top:14%;left:70%;transform:rotate(156deg);animation:fxaComet1 11s linear 2.4s infinite}
#procState .fxa-comet2{top:8%;left:12%;transform:rotate(24deg);animation:fxaComet2 17s linear 7s infinite}
@keyframes fxaComet1{0%{opacity:0;transform:rotate(156deg) translateX(-40px)}1.5%{opacity:.95}7%{opacity:0;transform:rotate(156deg) translateX(330px)}100%{opacity:0;transform:rotate(156deg) translateX(330px)}}
@keyframes fxaComet2{0%{opacity:0;transform:rotate(24deg) translateX(-40px)}1%{opacity:.8}4.5%{opacity:0;transform:rotate(24deg) translateX(300px)}100%{opacity:0;transform:rotate(24deg) translateX(300px)}}

#p3 #procState .fxa-head{position:relative;margin-top:2px}
#p3 #procState .fxa-kicker{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 12px;border-radius:999px;font-size:12px;line-height:1;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--fx-a);background:rgba(var(--fx-a-rgb),.09);border:1px solid rgba(var(--fx-a-rgb),.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#p3 #procState .fxa-kicker i{width:8px;height:8px;border-radius:50%;background:var(--fx-a);animation:fxaPing 1.8s ease-out infinite}
@keyframes fxaPing{0%{box-shadow:0 0 0 0 rgba(var(--fx-a-rgb),.65)}80%,100%{box-shadow:0 0 0 9px rgba(var(--fx-a-rgb),0)}}
#p3 #procState .fxa-title{margin:16px 0 8px;font-size:clamp(27px,3.3vw,38px);line-height:1.12;font-weight:700;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 34px rgba(var(--fx-a-rgb),.4)}
#p3 #procState .fxa-dots i{font-style:normal;animation:fxaDot 1.4s ease-in-out infinite}
#p3 #procState .fxa-dots i:nth-child(2){animation-delay:.2s}
#p3 #procState .fxa-dots i:nth-child(3){animation-delay:.4s}
@keyframes fxaDot{0%,60%,100%{opacity:.22}30%{opacity:1}}
#p3 #procState .fxa-status{margin:0 auto;max-width:640px;min-height:1.5em;font-size:clamp(15.5px,1.35vw,17.5px);line-height:1.5;font-weight:400;color:var(--fx-text)}

/* три этапа */
#p3 #procState .fxa-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:26px 0 0;text-align:left;counter-reset:fxstep}
#p3 #procState .fxa-step{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"mark pill" "label label";align-items:center;row-gap:14px;column-gap:12px;min-height:122px;padding:16px 16px 18px;border-radius:18px;background:var(--fx-glass);border:1px solid var(--fx-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px -28px rgba(0,0,0,.85);color:rgba(232,238,248,.6);font-size:15.5px;line-height:1.4;font-weight:500;counter-increment:fxstep;transition:border-color .5s ease,box-shadow .5s ease,color .5s ease}
#p3 #procState .fxa-step>span{grid-area:label;align-self:start}
#p3 #procState .fxa-step::after{content:"Далее";grid-area:pill;justify-self:end;padding:7px 10px;border-radius:999px;font-size:11px;line-height:1;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:rgba(232,238,248,.42);border:1px solid rgba(255,255,255,.1)}
#p3 #procState .fxa-step:not(:last-child)::before{content:"";position:absolute;right:-15px;top:35px;width:14px;height:2px;border-radius:2px;background:rgba(255,255,255,.14)}
#p3 #procState .fxa-mark{grid-area:mark;position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.15);font-style:normal;transition:background .5s ease,border-color .5s ease,box-shadow .5s ease}
#p3 #procState .fxa-mark::before{content:counter(fxstep);font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:500;color:rgba(232,238,248,.62);transition:opacity .3s ease}
#p3 #procState .fxa-mark svg{position:absolute;width:21px;height:21px;fill:none;stroke:var(--fx-ok);stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.5);transition:opacity .35s ease,transform .45s var(--cx-spring,ease)}
#p3 #procState .fxa-step.active{color:#fff;border-color:transparent;background:linear-gradient(180deg,rgba(var(--fx-a-rgb),.15),rgba(8,13,25,.62)) padding-box,linear-gradient(90deg,rgba(var(--fx-a-rgb),.85),rgba(var(--fx-c-rgb),.42) 30%,rgba(255,255,255,.1) 55%,rgba(var(--fx-c-rgb),.42) 80%,rgba(var(--fx-a-rgb),.85)) border-box;background-size:100% 100%,240% 100%;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 22px 54px -26px rgba(var(--fx-a-rgb),.7);animation:fxaBorder 8s linear infinite}
@keyframes fxaBorder{from{background-position:0 0,0 0}to{background-position:0 0,240% 0}}
#p3 #procState .fxa-step.active::after{content:"Сейчас";color:var(--fx-a);border-color:rgba(var(--fx-a-rgb),.42);background:rgba(var(--fx-a-rgb),.1)}
#p3 #procState .fxa-step.active .fxa-mark{background:rgba(var(--fx-a-rgb),.14);border-color:rgba(var(--fx-a-rgb),.6);box-shadow:0 0 24px rgba(var(--fx-a-rgb),.4)}
#p3 #procState .fxa-step.active .fxa-mark::before{color:#fff}
#p3 #procState .fxa-step.active .fxa-mark::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid transparent;border-top-color:var(--fx-a);border-right-color:rgba(var(--fx-a-rgb),.3);animation:fxaSpin 1.1s linear infinite}
@keyframes fxaSpin{to{transform:rotate(360deg)}}
#p3 #procState .fxa-step.done{color:rgba(240,246,255,.9);border-color:rgba(var(--fx-ok-rgb),.3);background:linear-gradient(180deg,rgba(var(--fx-ok-rgb),.08),rgba(8,13,25,.56))}
#p3 #procState .fxa-step.done::after{content:"Готово";color:var(--fx-ok);border-color:rgba(var(--fx-ok-rgb),.4);background:rgba(var(--fx-ok-rgb),.09)}
#p3 #procState .fxa-step.done:not(:last-child)::before{background:linear-gradient(90deg,var(--fx-ok),var(--fx-a));box-shadow:0 0 10px rgba(var(--fx-a-rgb),.6)}
#p3 #procState .fxa-step.done .fxa-mark{background:rgba(var(--fx-ok-rgb),.15);border-color:rgba(var(--fx-ok-rgb),.55);box-shadow:0 0 20px rgba(var(--fx-ok-rgb),.28)}
#p3 #procState .fxa-step.done .fxa-mark::before{opacity:0}
#p3 #procState .fxa-step.done .fxa-mark svg{opacity:1;transform:none}

/* время и подсказка — уравновешенная пара */
#p3 #procState .fxa-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px;text-align:left}
#p3 #procState .fxa-eta,#p3 #procState .fxa-hint{display:block;position:relative;max-width:none;margin:0;padding:20px 22px;border-radius:18px;background:var(--fx-glass);border:1px solid var(--fx-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px -28px rgba(0,0,0,.85);overflow:hidden;animation:none}
#p3 #procState .fxa-hint::before{display:none}
#p3 #procState .fxa-eta{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"label" "time" "bar" "note";justify-items:center;align-content:center;text-align:center}
#p3 #procState .fxa-eta-label{grid-area:label;font-size:12px;line-height:1.2;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(232,238,248,.58)}
#p3 #procState #actEtaTime{grid-area:time;margin-top:8px;font-family:'JetBrains Mono',monospace;font-size:58px;line-height:1;font-weight:500;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 0 34px rgba(var(--fx-a-rgb),.65)}
#p3 #procState .fxa-bar{grid-area:bar;justify-self:stretch;position:relative;height:8px;margin:16px 0 12px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
#p3 #procState #actEtaFill{position:relative;display:block;width:0;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--fx-b),var(--fx-a));box-shadow:0 0 16px rgba(var(--fx-a-rgb),.65);transition:width 1s linear;overflow:hidden}
#p3 #procState #actEtaFill::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 100%);background-size:120px 100%;background-repeat:no-repeat;animation:fxaSheen 2.2s linear infinite}
@keyframes fxaSheen{from{background-position:-120px 0}to{background-position:calc(100% + 120px) 0}}
#p3 #procState .fxa-eta-note{grid-area:note;font-size:14.5px;line-height:1.45;color:var(--fx-text)}
#p3 #procState .fxa-hint-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
#p3 #procState .fxa-hint-ico{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(var(--fx-a-rgb),.12);border:1px solid rgba(var(--fx-a-rgb),.32)}
#p3 #procState .fxa-hint-ico svg{width:21px;height:21px;fill:none;stroke:var(--fx-a);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#p3 #procState .fxa-hint .pch-title{font-size:16.5px;line-height:1.3;font-weight:700;letter-spacing:-.01em;color:var(--fx-a)}
#p3 #procState .fxa-hint .pch-text{font-size:14.5px;line-height:1.6;font-weight:400;color:var(--fx-text)}
#p3 #procState .fxa-hint .pch-text strong{color:#fff;font-weight:600}

/* ══════════ ИНТРО УСПЕХА ══════════ */
#okState #cxIntro.fxa-intro{position:relative;z-index:1;width:100%;max-width:none;margin:0;padding:0 0 8px;text-align:center;animation:none}
#okState #cxIntro .fxa-hero{position:relative;height:clamp(176px,19vw,236px);pointer-events:none}
#okState #cxIntro .fxa-emblem{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:108px;height:108px;margin:-54px 0 0 -54px;border-radius:50%;background:radial-gradient(circle at 50% 34%,rgba(52,211,153,.62),rgba(16,185,129,.2) 58%,rgba(3,14,11,.6) 100%);border:1px solid rgba(110,231,183,.75);box-shadow:0 0 0 9px rgba(52,211,153,.09),0 0 70px rgba(52,211,153,.6),inset 0 0 26px rgba(52,211,153,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fxaPop .7s var(--cx-spring,ease-out)}
#okState #cxIntro .fxa-emblem svg{width:56px;height:56px;fill:none;stroke:#f0fff8;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 10px rgba(52,211,153,.95))}
#okState #cxIntro .fxa-emblem svg path{stroke-dasharray:36;stroke-dashoffset:0;animation:fxaDraw .75s ease-out}
#okState #cxIntro .fxa-emblem-ring{position:absolute;inset:-2px;border-radius:50%;border:1px solid rgba(110,231,183,.55);opacity:0;animation:fxaRipple 2.6s ease-out infinite}
#okState #cxIntro .fxa-emblem-ring2{animation-delay:1.3s}
@keyframes fxaPop{from{transform:scale(.4);opacity:0}}
@keyframes fxaDraw{from{stroke-dashoffset:36}}
@keyframes fxaRipple{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(2.1)}}
#okState #cxIntro .fxa-ok-kicker{display:inline-flex;align-items:center;gap:8px;margin-top:2px;padding:8px 15px 8px 11px;border-radius:999px;font-size:12px;line-height:1;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6ee7b7;background:rgba(16,185,129,.1);border:1px solid rgba(52,211,153,.34);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#okState #cxIntro .fxa-ok-kicker svg{width:15px;height:15px;fill:none;stroke:#34d399;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
#okState #cxIntro .fxa-ok-title{max-width:900px;margin:14px auto 10px;font-size:clamp(28px,4.3vw,48px);line-height:1.08;font-weight:800;letter-spacing:-.025em;color:#fff;text-wrap:balance;text-shadow:0 2px 40px rgba(var(--fx-a-rgb),.35)}
#okState #cxIntro .fxa-ok-text{max-width:660px;margin:0 auto;font-size:clamp(16px,1.5vw,18.5px);line-height:1.6;font-weight:400;color:rgba(238,242,248,.88)}
#okState #cxIntro .fxa-ok-text b{color:#fff;font-weight:700}
#okState #cxIntro .fxa-perks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:none;margin:22px 0 0;text-align:left}
#okState #cxIntro .fxa-perk{display:flex;align-items:center;gap:13px;padding:17px 18px;border-radius:18px;background:var(--fx-glass);border:1px solid var(--fx-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px -28px rgba(0,0,0,.85);font-size:15px;line-height:1.5;color:var(--fx-text)}
#okState #cxIntro .fxa-perk b{color:#fff;font-weight:700}
#okState #cxIntro .fxa-pk{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:rgba(var(--fx-a-rgb),.12);border:1px solid rgba(var(--fx-a-rgb),.32)}
#okState #cxIntro .fxa-pk svg{width:21px;height:21px;fill:none;stroke:var(--fx-a);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#okState #cxIntro .fxa-perk:first-child .fxa-pk{background:rgba(52,211,153,.13);border-color:rgba(52,211,153,.4)}
#okState #cxIntro .fxa-perk:first-child .fxa-pk svg{stroke:#34d399;stroke-width:2.6}
#okState #cxIntro .fxa-cta{margin-top:22px}
#okState #cxIntro .fxa-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:340px;min-height:60px;margin:0;padding:0 34px;border:0;border-radius:17px;font-family:'Sora',sans-serif;font-size:17.5px;font-weight:700;letter-spacing:-.01em;color:var(--fx-ink);background:linear-gradient(120deg,var(--fx-a),var(--fx-b));box-shadow:0 20px 48px -16px rgba(var(--fx-a-rgb),.75),inset 0 1px 0 rgba(255,255,255,.45);cursor:pointer;opacity:1;pointer-events:auto;overflow:hidden;animation:none;transition:transform .2s ease,box-shadow .2s ease}
#okState #cxIntro .fxa-btn i{font-style:normal;transition:transform .2s ease}
#okState #cxIntro .fxa-btn::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:34%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0));transform:skewX(-18deg);animation:fxaShine 3.2s ease-in-out infinite}
@keyframes fxaShine{0%,55%{left:-40%}100%{left:120%}}
#okState #cxIntro .fxa-btn:hover{transform:translateY(-2px);box-shadow:0 26px 56px -16px rgba(var(--fx-a-rgb),.9),inset 0 1px 0 rgba(255,255,255,.45);background:linear-gradient(120deg,var(--fx-a),var(--fx-b))}
#okState #cxIntro .fxa-btn:hover i{transform:translateX(4px)}
#okState #cxIntro .fxa-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
#okState #cxIntro .fxa-auto{width:220px;height:4px;margin:20px auto 0;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
#okState #cxIntro .fxa-auto span{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--fx-ok),var(--fx-a));transform-origin:left center;animation:fxaAuto 6.5s linear}
@keyframes fxaAuto{from{transform:scaleX(0)}}
#okState #cxIntro .fxa-auto-note{margin-top:10px;font-size:13.5px;line-height:1.4;color:rgba(232,238,248,.55)}
#activate[data-fx-hold] #cxIntro .fxa-auto,#activate[data-fx-hold] #cxIntro .fxa-auto-note{display:none}

/* появление: скрытое состояние живёт только внутри keyframes; после settle анимаций нет вовсе */
#okState #cxIntro .fxa-in{animation:fxaIn .7s var(--cx-smooth,ease) }
#okState #cxIntro .fxa-in2{animation-duration:.85s}
#okState #cxIntro .fxa-in3{animation-duration:1s}
#okState #cxIntro .fxa-in4{animation-duration:1.15s}
#okState #cxIntro .fxa-in5{animation-duration:1.3s}
@keyframes fxaIn{0%,25%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:none}}
#activate[data-fx-settled] #cxIntro .fxa-in{animation:none}

/* стекло: размытие фона только там, где оно дёшево */
@media (min-width:760px){
  #p3 #procState .fxa-step,#p3 #procState .fxa-eta,#p3 #procState .fxa-hint,#okState #cxIntro .fxa-perk{-webkit-backdrop-filter:blur(14px) saturate(1.35);backdrop-filter:blur(14px) saturate(1.35)}
  #p3 #procState .fxa-step:hover,#okState #cxIntro .fxa-perk:hover{border-color:rgba(var(--fx-a-rgb),.34)}
}

/* ── невысокий экран ноутбука: сцена ниже, кнопка поднимается над пояснениями, чтобы не уйти под край ── */
@media (min-width:760px) and (max-height:780px){
  #p3 #procState .fxa-hero{height:clamp(200px,22vw,240px)}
  #okState.cx-intro-active #cxIntro.fxa-intro{display:flex;flex-direction:column;align-items:center}
  #okState #cxIntro .fxa-hero{align-self:stretch;height:clamp(170px,16vw,204px)}
  #okState #cxIntro .fxa-cta{order:5}
  #okState #cxIntro .fxa-perks{order:6;align-self:stretch}
}

/* ── телефон ── */
@media (max-width:759px){
  #activate.act-card[data-fx-state="proc"]{padding:20px 16px 22px}
  #p3 #procState.fxa-proc{display:flex;flex-direction:column}
  #p3 #procState .fxa-hero{order:0}
  #p3 #procState .fxa-head{order:1}
  #p3 #procState .fxa-duo{display:contents}
  #p3 #procState .fxa-eta{order:2;margin-top:20px;padding:16px 18px;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label time" "bar bar" "note note";justify-items:start;align-items:end;text-align:left}
  #p3 #procState .fxa-eta-label{padding-bottom:5px}
  #p3 #procState .fxa-bar{margin:14px 0 10px}
  #p3 #procState .fxa-steps{order:3;grid-template-columns:1fr;gap:10px;margin-top:12px}
  #p3 #procState .fxa-hint{order:4;margin-top:12px;padding:16px 18px}
  #p3 #procState .fxa-step,#p3 #procState .fxa-eta,#p3 #procState .fxa-hint{background:rgba(8,13,25,.74)}
  #p3 #procState .fxa-step.active{background:linear-gradient(180deg,rgba(var(--fx-a-rgb),.16),rgba(8,13,25,.78)) padding-box,linear-gradient(90deg,rgba(var(--fx-a-rgb),.85),rgba(var(--fx-c-rgb),.42) 30%,rgba(255,255,255,.1) 55%,rgba(var(--fx-c-rgb),.42) 80%,rgba(var(--fx-a-rgb),.85)) border-box;background-size:100% 100%,240% 100%}
  #p3 #procState .fxa-step{grid-template-columns:auto 1fr auto;grid-template-areas:"mark label pill";row-gap:0;column-gap:10px;min-height:0;padding:12px 12px 12px 13px;font-size:14.5px;border-radius:16px}
  #p3 #procState .fxa-step>span{align-self:center}
  #p3 #procState .fxa-step:not(:last-child)::before{right:auto;left:30px;top:auto;bottom:-11px;width:2px;height:10px}
  #p3 #procState .fxa-step.done:not(:last-child)::before{background:linear-gradient(180deg,var(--fx-ok),var(--fx-a))}
  #p3 #procState .fxa-mark{width:36px;height:36px}
  #p3 #procState .fxa-step::after{padding:6px 7px;font-size:9.5px;letter-spacing:.07em}
  #p3 #procState #actEtaTime{margin-top:0;font-size:40px;letter-spacing:-.03em}
  #p3 #procState .fxa-title{margin:14px 0 6px}
  #okState.cx-intro-active #cxIntro.fxa-intro{display:flex;flex-direction:column;align-items:center}
  #okState #cxIntro .fxa-hero{align-self:stretch}
  #okState #cxIntro .fxa-cta{order:5;align-self:stretch}
  #okState #cxIntro .fxa-perks{order:6;align-self:stretch;grid-template-columns:1fr;gap:10px;margin-top:22px}
  #okState #cxIntro .fxa-perk{align-items:center;padding:13px 14px;background:rgba(8,13,25,.74)}
  #okState #cxIntro .fxa-emblem{width:78px;height:78px;margin:-39px 0 0 -39px}
  #okState #cxIntro .fxa-emblem svg{width:42px;height:42px}
  #okState #cxIntro .fxa-cta{margin-top:20px}
  #okState #cxIntro .fxa-btn{width:100%;min-width:0;min-height:58px;padding:0 18px;font-size:16.5px}
}
@media (max-width:359px){
  #p3 #procState .fxa-step{font-size:14px;padding:11px 12px}
  #p3 #procState .fxa-step::after{display:none}
  #p3 #procState .fxa-kicker,#okState #cxIntro .fxa-ok-kicker{font-size:10.5px;letter-spacing:.06em}
  #p3 #procState .fxa-eta-label{font-size:10.5px;letter-spacing:.08em}
  #p3 #procState #actEtaTime{font-size:36px}
  #okState #cxIntro .fxa-btn{font-size:15.5px}
}

/* ── меньше движения ── */
@media (prefers-reduced-motion:reduce){
  #procState .fxa-art-disc,#cxIntro .fxa-art-disc,#procState .fxa-comet,#p3 #procState .fxa-kicker i,#p3 #procState .fxa-dots i,#p3 #procState .fxa-step.active,#p3 #procState .fxa-step.active .fxa-mark::after,#p3 #procState #actEtaFill::after,#okState #cxIntro .fxa-emblem,#okState #cxIntro .fxa-emblem svg path,#okState #cxIntro .fxa-emblem-ring,#okState #cxIntro .fxa-btn::after,#okState #cxIntro .fxa-auto span,#okState #cxIntro .fxa-in{animation:none!important}
  #p3 #procState #actEtaFill{transition:none}
}