/* NOCLO v8: preloader z logo, wejscie hero, pasek integracji, mikroanimacje przyciskow, autoodtwarzanie zakladek */
.pre{background:#fff;flex-direction:column;transition:transform .75s cubic-bezier(.76,0,.24,1),opacity .3s}
.pre .pin{display:flex;flex-direction:column;align-items:center;gap:20px}
.pre .pw{width:201px;height:45px;overflow:visible}
.pre svg text,.pre .pw .pt{opacity:1;animation:none}
.pre svg path{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
.pre .pw .pt{clip-path:inset(0 100% 0 0);animation:preWipe .9s cubic-bezier(.2,.65,.2,1) .15s forwards}
.pre .pw .c1{transform:translateX(-20px);opacity:0;animation:preC .7s cubic-bezier(.2,.65,.2,1) .55s forwards}
.pre .pw .c2{transform:translateX(20px);opacity:0;animation:preC .7s cubic-bezier(.2,.65,.2,1) .65s forwards,preGlow 1.1s ease 1.25s}
.pre .pbar{width:170px;height:3px;background:#ECEEF1;border-radius:2px;overflow:hidden}
.pre .pbar i{display:block;height:100%;width:0;background:var(--p);border-radius:2px;animation:preBar 1.3s cubic-bezier(.3,.1,.2,1) .1s forwards}
.pre .pct{font-size:11px;letter-spacing:.16em;color:var(--mute);font-variant-numeric:tabular-nums;font-weight:600}
.pre.off{opacity:1;visibility:visible;transform:translateY(-101%)}
.pre.fast .pw .pt,.pre.fast .pw .c1,.pre.fast .pw .c2{animation-duration:.35s;animation-delay:0s}
.pre.fast .pbar,.pre.fast .pct{display:none}
@keyframes preWipe{to{clip-path:inset(0 -3% 0 0)}}
@keyframes preC{to{transform:none;opacity:1}}
@keyframes preGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(242,106,33,0))}50%{filter:drop-shadow(0 0 10px rgba(242,106,33,.85))}}
@keyframes preBar{to{width:100%}}
/* hero: wejscie po preloaderze (eyebrow, slowa naglowka, lead, przyciski) */
html.js .hero.mc .eyebrow,html.js .hero.mc h1 .w,html.js .hero.mc .lead,html.js .hero.mc .ctas>*{opacity:0;transform:translateY(22px);transition:opacity .75s cubic-bezier(.2,.65,.2,1),transform .75s cubic-bezier(.2,.65,.2,1)}
html.js.ready .hero.mc .eyebrow{opacity:1;transform:none;transition-delay:.05s}
html.js.ready .hero.mc h1 .w{opacity:1;transform:none;transition-delay:calc(.15s + var(--i,0)*.07s)}
html.js.ready .hero.mc .lead{opacity:1;transform:none;transition-delay:.5s}
html.js.ready .hero.mc .ctas>*{opacity:1;transform:none;transition-delay:calc(.62s + var(--i,0)*.12s)}
.hero.mc h1 .w{display:inline-block;white-space:nowrap}
html.js .hero.mc .appx{transition-delay:.55s}
.hero.mc .play i{position:relative}
.hero.mc .play i::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--p);animation:ring 2.4s ease-out infinite}
@keyframes ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(2);opacity:0}}
/* przyciski: blysk przy najechaniu, lekkie uniesienie */
.btn.p{position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s,background .2s}
.btn.p::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-20deg);transition:left .65s ease;pointer-events:none}
.btn.p:hover::after{left:140%}
.btn.p:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(216,111,69,.32)}
/* pasek integracji pod hero */
.marq{background:#14181D;color:#fff;overflow:hidden;padding:16px 0;border-top:1px solid rgba(255,255,255,.08);position:relative}
.marq::before,.marq::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:1;pointer-events:none}
.marq::before{left:0;background:linear-gradient(90deg,#14181D,transparent)}
.marq::after{right:0;background:linear-gradient(270deg,#14181D,transparent)}
.marq .lbl{position:absolute;left:0;right:0;top:-1px;text-align:center;font-size:0}
.marq .track{display:flex;gap:2.6rem;width:max-content;animation:marq 34s linear infinite;padding-left:2.6rem}
.marq:hover .track{animation-play-state:paused}
.marq span{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;font-size:.92rem;color:rgba(255,255,255,.82);white-space:nowrap}
.marq i{font-style:normal;min-width:30px;height:30px;padding:0 .4rem;border-radius:8px;background:rgba(255,255,255,.1);display:inline-flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:800;color:#fff;letter-spacing:.02em}
@keyframes marq{to{transform:translateX(-50%)}}
/* zakladki funkcji: pasek postepu przy autoodtwarzaniu */
.ftabs.auto button.on{position:relative;overflow:hidden}
.ftabs.auto button.on::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:rgba(255,255,255,.6);transform-origin:left;animation:ftp 6s linear forwards}
@keyframes ftp{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* opinie: delikatne unoszenie kart */
.rev .q{transition:transform .35s cubic-bezier(.2,.65,.2,1),box-shadow .35s}
.rev .q:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(20,24,29,.1)}
/* liczby: odliczanie */
[data-count]{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){
  html.js .hero.mc .eyebrow,html.js .hero.mc h1 .w,html.js .hero.mc .lead,html.js .hero.mc .ctas>*{opacity:1;transform:none;transition:none}
  .hero.mc .play i::after,.marq .track,.ftabs.auto button.on::after,.pre .pw .pt,.pre .pw .c1,.pre .pw .c2,.pre .pbar i{animation:none}
  .pre .pw .pt{clip-path:none}.pre .pw .c1,.pre .pw .c2{opacity:1;transform:none}
}

/* slowa naglowka hero: kolor z h1, pomaranczowe tylko wyroznione slowo */
.hero.mc h1 .w{color:inherit}
.hero.mc h1 .w>span{color:var(--p)}