/* 2Click Revenue · hero „System na żywo” v4 (D96–D97, 4.11): w oknie hero prawdziwe ekrany CRE Prototyp (screens/*.html z Figmy,
   design/tools/figma-screens). Ekran 1920 px skaluje się do okna (transform: scale, nie zoom: pod zoomem Chrome nie maluje
   animowanych potomków), kamera jedzie po wysokim ekranie (translate na .hs-scr), bloki ekranu wjeżdżają kaskadą (przejścia
   sterowane klasami, nie keyframes z fill-mode), kursor klika prawdziwe elementy. Bez filter: blur i backdrop-filter. */
@import url("screens.css?v=20261104c");
.hero__window.has-stage{background:#EDEDEB}
.hero__window.has-stage>img{opacity:0;transition:opacity .6s var(--ease-out)}
.hero__window.has-stage .c-mockwrap{visibility:hidden}.hero__window.has-stage .p-hero__phone{display:none}
.hero-stage{position:absolute;left:0;right:0;top:53px;bottom:0;overflow:hidden;background:#F1F1EF;--z:.75;--hs-ease:cubic-bezier(.2,.8,.2,1);--hs-ink:#1C1C1B;--hs-accent:#2F5670}
.hs-sprite{position:absolute;width:0;height:0;overflow:hidden}
.hs-cam{position:absolute;left:0;top:0;width:1920px;height:100%;transform:scale(var(--z));transform-origin:0 0}
/* ekran: kamera (transform na .hs-scr, czas ustawia skrypt) + wejście (opacity/transform na .hs-scr__in) */
.hs-scr{position:absolute;left:0;top:0;width:1920px;transition:transform 3.2s cubic-bezier(.45,.05,.2,1);will-change:transform}
.hs-scr__in{opacity:0;transform:translateY(18px) scale(.985);transform-origin:50% 0;transition:opacity .5s var(--hs-ease),transform .7s var(--hs-ease)}
.hs-scr.is-in .hs-scr__in{opacity:1;transform:none}
.hs-scr.is-out .hs-scr__in{opacity:0;transform:translateY(-12px) scale(.99);transition-duration:.4s,.4s}
/* kaskada bloków ekranu: poziom 1 (sekcje), poziom 2 (karty w sekcji); paski, tło, panele i scrim wchodzą w całości */
.hs-scr .hs-root>*{opacity:0;transform:translateY(14px);transition:opacity .5s var(--hs-ease),transform .65s var(--hs-ease);transition-delay:calc(120ms + var(--i,0)*70ms)}
.hs-scr .hs-root>.hs-bg{opacity:1;transform:none;transition:none}
.hs-scr .hs-root>[data-n^="Panel"]{transform:translateX(56px);transition-delay:calc(520ms + var(--i,0)*70ms)}
.hs-scr .hs-root>*>*{opacity:0;transform:translateY(10px);transition:opacity .45s var(--hs-ease),transform .6s var(--hs-ease);transition-delay:calc(220ms + var(--i,0)*70ms + var(--j,0)*60ms)}
.hs-scr .hs-root>.hs-whole>*,.hs-scr .hs-root>.hs-bg>*{opacity:1;transform:none;transition:none}
.hs-scr.is-in .hs-root>*,.hs-scr.is-in .hs-root>*>*{opacity:1;transform:none}
/* cel kursora: pierścień i wciśnięcie */
.hs-scr .hs-hit{outline:3px solid rgba(47,86,112,.45);outline-offset:3px;transition:outline-color .3s}
.hs-scr .hs-press{transform:scale(.94)!important;transition:transform .15s var(--hs-ease)!important}
/* kursor (w układzie okna, nie ekranu) */
.hs-cursor{position:absolute;left:0;top:0;z-index:9;width:24px;height:28px;opacity:0;transform:translate(60%,55%);transition:transform .8s var(--hs-ease),opacity .3s;pointer-events:none}
.hs-cursor.is-on{opacity:1}
.hs-cursor svg{position:relative;width:24px;height:28px;transition:transform .12s;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.hs-cursor svg path{fill:var(--hs-ink);stroke:#fff;stroke-width:1.6;stroke-linejoin:round}
.hs-cursor.is-click svg{transform:scale(.86)}
.hs-cursor .ring{position:absolute;left:-12px;top:-12px;width:32px;height:32px;border-radius:50%;background:rgba(47,86,112,.3);transform:scale(0);opacity:0}
.hs-cursor.is-click .ring{animation:hsRing .55s ease-out}
@keyframes hsRing{0%{transform:scale(.3);opacity:.9}100%{transform:scale(2.3);opacity:0}}
/* scenariusz procesu (D97): części ekranu czekają na swoją kolej, kroki agenta kręcą kółkiem, pole przyjmuje pisanie */
.hs-scr .hs-root .hs-wait{opacity:0;transform:translateY(8px);transition:opacity .45s var(--hs-ease),transform .55s var(--hs-ease)}
.hs-scr .hs-root .hs-wait.hs-show{opacity:1;transform:none}
.hs-scr .hs-spin>*{opacity:0}
.hs-scr .hs-spin::after{content:"";position:absolute;left:2px;top:2px;width:10px;height:10px;border-radius:50%;border:2px solid rgba(47,86,112,.22);border-top-color:var(--hs-accent);animation:hsSpin .8s linear infinite}
@keyframes hsSpin{to{transform:rotate(360deg)}}
.hs-scr .hs-think{animation:hsPulse 1.1s ease-in-out infinite}
@keyframes hsPulse{0%,100%{opacity:1}50%{opacity:.3}}
.hs-scr .hs-focus{box-shadow:0 0 0 2px rgba(47,86,112,.35)}
.hs-scr .hs-type::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-.15em;background:var(--hs-ink);animation:hsCaret 1s steps(2,start) infinite}
@keyframes hsCaret{50%{opacity:0}}
.hs-scr .hs-new{outline:3px solid rgba(47,86,112,.55);outline-offset:2px;animation:hsNew 1.4s ease-out}
/* D98: cięcie bez wejścia – stan po przeniesieniu karty wchodzi w miejscu poprzedniego ekranu */
.hs-scr.hs-cut .hs-scr__in,.hs-scr.hs-cut .hs-root>*,.hs-scr.hs-cut .hs-root>*>*{transition:none!important}
.hs-scr .hs-grab{outline:3px solid rgba(47,86,112,.45);outline-offset:3px;z-index:5}
.hs-scr .hs-swap{animation:hsSwap .9s var(--hs-ease)}
@keyframes hsSwap{0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:none}}
/* dyktowanie do CRE Pulse: mikrofon nagrywa, fala głosu z prototypu („głos · fala”) gra, potem cichnie */
.hs-scr .hs-rec{animation:hsRec 1.1s ease-out infinite}
@keyframes hsRec{0%{box-shadow:0 0 0 0 rgba(47,86,112,.45)}100%{box-shadow:0 0 0 12px rgba(47,86,112,0)}}
.hs-scr .hs-idle>*{transform:scaleY(.28);opacity:.55;transition:transform .5s var(--hs-ease),opacity .5s}
.hs-scr .hs-wave>*{transform-origin:50% 50%;animation:hsBar .62s ease-in-out infinite alternate}
.hs-scr .hs-wave>*:nth-child(3n){animation-duration:.5s;animation-delay:-.2s}.hs-scr .hs-wave>*:nth-child(3n+1){animation-duration:.74s;animation-delay:-.45s}.hs-scr .hs-wave>*:nth-child(4n+2){animation-delay:-.3s}
@keyframes hsBar{0%{transform:scaleY(.3)}100%{transform:scaleY(1.2)}}
@keyframes hsNew{0%{box-shadow:0 0 0 0 rgba(47,86,112,.5)}100%{box-shadow:0 0 0 16px rgba(47,86,112,0)}}
/* bez ruchu: stan końcowy od razu */
.hero-stage.is-static .hs-scr,.hero-stage.is-static .hs-scr *{transition:none!important;animation:none!important}
.hero-stage.is-static .hs-scr__in,.hero-stage.is-static .hs-root>*,.hero-stage.is-static .hs-root>*>*,.hero-stage.is-static .hs-wait{opacity:1;transform:none}
.hero-stage.is-static .hs-cursor{display:none}
/* sygnał na pasku kafli (strona główna) */
.tiles{position:relative}
.tiles__signal{position:absolute;top:calc(100% + 9px);left:0;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.18),0 0 18px rgba(255,255,255,.9);transform:translate(-50%,-50%);opacity:0;transition:left .9s cubic-bezier(.2,.8,.2,1),opacity .35s var(--ease-out);pointer-events:none}
.tiles__signal.is-on{opacity:1}
@media (max-width:1023.98px){.hero-stage,.tiles__signal{display:none}.hero__window.has-stage>img{opacity:1}}
/* D102: scena ręczna w sekcji (Commerce Intelligence, Dla kogo): pudełko 16:10, kamera wjeżdża w blok, płynny zoom */
.hs-box{position:relative;width:100%;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:#F1F1EF;box-shadow:var(--glass-shadow)}
.hero-stage--box{top:0}
.hero-stage--box .hs-cam{transition:transform .9s var(--hs-ease)}
.fig{padding:16px;min-height:0}
.hs-box--dk{margin-top:4px;aspect-ratio:2/1;max-height:420px} /* D108: niższa scena „Dla kogo” (MG: strefa za wysoka) – kadr 2:1, najwyżej 420 px */
@media (max-width:1023.98px){.hs-box{display:none}}