/* Lusly — warstwa ruchu (fx).
   Wszystko działa tylko pod html.fx, którą ustawia fx.js, gdy użytkownik
   nie wyłączył animacji i biblioteka się załadowała. Bez niej strona
   wygląda dokładnie tak jak wcześniej. */

@property --fx-a{syntax:'<angle>';inherits:false;initial-value:0deg}

/* ---------- elementy przejęte przez fx.js ---------- */
html.fx .fx-own{opacity:1;transform:none;transition:none!important}
html.fx .fx-split.rv{opacity:1;transform:none;transition:none}

/* słowa w nagłówkach wyjeżdżają spod maski */
.fx-w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .1em;margin:0 -.02em -.1em}
.fx-wi{display:inline-block;will-change:transform;transform-origin:0 100%}

/* ---------- pasek postępu czytania ---------- */
#fx-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none;
  background:linear-gradient(90deg,#5A3BFF,#8B5CFF 60%,#B69CFF);
  transform:scaleX(0);transform-origin:0 50%}

/* ---------- hero: stos dokumentów ---------- */
html.fx .fx-stack{position:relative;justify-self:end;width:100%;max-width:440px}
@media(max-width:960px){html.fx .fx-stack{justify-self:start}}
html.fx .fx-stack .brief{position:relative;z-index:2;justify-self:auto}
.fx-paper{position:absolute;z-index:1;top:-34px;left:-46px;right:52px;bottom:30px;
  background:#fff;border:1px solid #E9E6F7;border-radius:16px;
  box-shadow:0 30px 80px rgba(90,59,255,.16),0 2px 4px rgba(18,20,43,.04);
  padding:22px 22px 0;overflow:hidden;transform:rotate(-6deg);transform-origin:70% 90%;
  opacity:0;pointer-events:none}
@media(max-width:960px){.fx-paper{left:18px;right:-4px;top:-46px;bottom:48px}}
.fx-paper-h{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.fx-paper-h i{display:block;height:9px;border-radius:5px;background:#12142B;opacity:.85;width:44%}
.fx-paper-h b{display:block;height:9px;width:14%;border-radius:5px;background:#E9E6F7}
.fx-ln{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.fx-ln em{font:500 10px/1 'JetBrains Mono',ui-monospace,monospace;color:#8B84B8;font-style:normal;width:24px;flex-shrink:0}
.fx-ln span{display:block;height:7px;border-radius:4px;background:#EEEBFA;flex:1;position:relative;overflow:hidden}
.fx-ln span+span{flex:.55}
.fx-ln.hot span::after,.fx-ln.warm span::after{content:"";position:absolute;inset:0;border-radius:inherit;
  transform:scaleX(0);transform-origin:0 50%;animation:fxHi 6s cubic-bezier(.6,0,.2,1) infinite}
.fx-ln.hot span::after{background:#F2A59C}
.fx-ln.warm span::after{background:#F0D48E;animation-delay:.5s}
.fx-beam{position:absolute;left:0;right:0;top:0;height:70px;pointer-events:none;
  background:linear-gradient(180deg,rgba(90,59,255,0),rgba(90,59,255,.12) 70%,rgba(90,59,255,.55) 98%,rgba(90,59,255,0));
  animation:fxBeam 6s cubic-bezier(.6,0,.2,1) infinite}
.fx-seal{position:absolute;right:18px;bottom:18px;width:54px;height:54px;border-radius:50%;
  border:1.5px dashed rgba(90,59,255,.45);display:flex;align-items:center;justify-content:center;
  font:600 20px/1 'JetBrains Mono',ui-monospace,monospace;color:rgba(90,59,255,.55);
  animation:fxSpin 22s linear infinite}
@keyframes fxBeam{0%{transform:translateY(-80px)}55%{transform:translateY(330px)}100%{transform:translateY(330px)}}
@keyframes fxHi{0%,18%{transform:scaleX(0)}34%,82%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes fxSpin{to{transform:rotate(360deg)}}

/* poświata podążająca za kursorem w hero */
.fx-hero-spot{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .6s;
  background:radial-gradient(520px circle at var(--x,50%) var(--y,40%),rgba(90,59,255,.10),transparent 60%)}
.hero:hover .fx-hero-spot{opacity:1}

/* ---------- liczby w pasku statystyk ---------- */
html.fx .stat{position:relative}
html.fx .stat::after{content:"";position:absolute;left:24px;bottom:22px;width:36px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#5A3BFF,#8B5CFF);transform:scaleX(var(--fx-l,0));transform-origin:0 50%}

/* ---------- taśma obszarów prawa ---------- */
.fx-marquee{overflow:hidden;border-bottom:1px solid var(--border,#E9E6F7);padding:30px 0;
  background:linear-gradient(180deg,#FAF9FF,#FFFFFF);
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.fx-mq-track{display:flex;width:max-content;will-change:transform}
.fx-mq-set{display:flex;align-items:center;flex-shrink:0}
.fx-mq-item{font-weight:620;letter-spacing:-.03em;line-height:1;white-space:nowrap;
  font-size:clamp(30px,4.6vw,58px);color:#12142B;padding:0 .42em}
/* co drugi obszar jaśniejszy fiolet — kontur (text-stroke) na iOS rysował
   wewnętrzne linie liter czcionki zmiennej, więc zamiast niego sam kolor */
.fx-mq-item:nth-child(4n+3){color:#B7ABF7}
.fx-mq-sep{font:500 clamp(22px,3vw,36px)/1 'JetBrains Mono',ui-monospace,monospace;color:#5A3BFF;padding:0 .2em;
  display:inline-block}

/* ---------- podgląd analizy: skan i redline ---------- */
html.fx .fx-demo .an-doc{position:relative}
html.fx .fx-demo .an-text p{position:relative}
html.fx .fx-demo .an-text mark{animation:none;box-shadow:none;background-color:transparent;
  --mk:#FBDDD9;--ln:#C7362F;
  background-image:linear-gradient(var(--mk),var(--mk)),linear-gradient(var(--ln),var(--ln));
  background-repeat:no-repeat;background-position:0 0,0 100%;
  background-size:var(--w,0%) 100%,var(--w,0%) 2px}
html.fx .fx-demo .an-text mark.an-m-w{--mk:#FAEFD4;--ln:#855C0C}
html.fx .fx-demo .an-text mark.an-m-s{--mk:#DCF0E5;--ln:#17714A}
.fx-scan{position:absolute;left:0;right:0;top:0;height:90px;pointer-events:none;z-index:2;opacity:0;
  background:linear-gradient(180deg,rgba(90,59,255,0),rgba(90,59,255,.10) 65%,rgba(123,92,255,.9) 97%,rgba(90,59,255,0))}
.fx-pin{position:absolute;left:-15px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--c,#C7362F);
  transform:scale(0)}
.fx-pin::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--c,#C7362F);opacity:.5;
  animation:fxRing 2.2s ease-out infinite}
@keyframes fxRing{0%{transform:scale(.6);opacity:.6}100%{transform:scale(1.8);opacity:0}}
.fx-pct{margin-left:auto;font:500 11px/1 'JetBrains Mono',ui-monospace,monospace;color:#5A3BFF;min-width:34px;text-align:right}
.fx-del{text-decoration:none;
  background:linear-gradient(#C7362F,#C7362F) 0 56%/var(--st,0%) 1.5px no-repeat}
.fx-ins{text-decoration:none;color:#3A1FD9;font-weight:500}
.fx-ins.typing::after{content:"";display:inline-block;width:1.5px;height:1.05em;background:#5A3BFF;
  vertical-align:-.15em;margin-left:1px;animation:fxCaret .7s steps(1) infinite}
@keyframes fxCaret{50%{opacity:0}}
html.fx .fx-demo .an-card.fx-done{border-left-color:#17714A}
html.fx .fx-demo .an-tag.fx-ok{background:#EFF8F3;color:#17714A}
.fx-click{animation:fxPress .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes fxPress{0%{transform:scale(1)}35%{transform:scale(.9)}100%{transform:scale(1)}}

/* ---------- porównanie: kolumna Lusly zalewa się kolorem ---------- */
html.fx .cmp-b{background-color:transparent;
  background-image:linear-gradient(var(--uv-tint,rgba(90,59,255,.08)),var(--uv-tint,rgba(90,59,255,.08)));
  background-repeat:no-repeat;background-size:var(--sw,100%) 100%}

/* ---------- reflektor pod kursorem na kartach ---------- */
html.fx .fx-spot{background-image:radial-gradient(380px circle at var(--mx,-600px) var(--my,-600px),rgba(90,59,255,.085),transparent 45%)}
html.fx .dark .fx-spot{background-image:radial-gradient(380px circle at var(--mx,-600px) var(--my,-600px),rgba(169,155,255,.12),transparent 45%)}

/* ---------- przyciski: bez przejścia transform, bo prowadzi je magnes ---------- */
html.fx .fx-mag{transition-property:background,border-color,color,box-shadow,filter}

/* ---------- wyróżniony pakiet: obracająca się poświata krawędzi ---------- */
html.fx .price-card-hi{position:relative;isolation:isolate}
.fx-ring{position:absolute;inset:-2px;border-radius:inherit;padding:2px;pointer-events:none;z-index:1;
  background:conic-gradient(from var(--fx-a),#5A3BFF,#B69CFF 25%,#5A3BFF 50%,#8B5CFF 75%,#5A3BFF);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;animation:fxRot 5s linear infinite}
@keyframes fxRot{to{--fx-a:360deg}}

/* ---------- zaufanie: pulsujące kropki ---------- */
html.fx .trust .tdot{position:relative}
html.fx .trust .tdot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid currentColor;
  color:var(--success,#17714A);animation:fxRing 2.6s ease-out infinite}

/* ---------- finał: żywa siatka koloru ---------- */
html.fx .final-box{position:relative;overflow:hidden;isolation:isolate}
.fx-mesh{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.fx-mesh i{position:absolute;width:60%;aspect-ratio:1;border-radius:50%;filter:blur(60px);opacity:.55}
.fx-mesh i:nth-child(1){background:#5A3BFF;left:-15%;top:-40%;animation:fxBlobA 16s ease-in-out infinite}
.fx-mesh i:nth-child(2){background:#8B5CFF;right:-20%;top:10%;animation:fxBlobB 19s ease-in-out infinite}
.fx-mesh i:nth-child(3){background:#2E1C99;left:25%;bottom:-60%;animation:fxBlobA 23s ease-in-out infinite reverse}
@keyframes fxBlobA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(18%,12%) scale(1.15)}}
@keyframes fxBlobB{0%,100%{transform:translate(0,0) scale(1.1)}50%{transform:translate(-22%,-8%) scale(.9)}}
@media(max-width:720px){.fx-mesh i{filter:blur(40px);opacity:.45}}

/* ---------- FAQ: odpowiedź rozwija się płynnie ---------- */
html.fx details>p{overflow:hidden}

@media(prefers-reduced-motion:reduce){
  .fx-paper,.fx-marquee,.fx-scan,.fx-ring,.fx-mesh,#fx-progress{display:none}
}

/* karty cennika prowadzi tilt — bez przejścia CSS na transform */
html.fx .price-card{transition-property:box-shadow,border-color}