/* ASC — animacje wspólne dla wszystkich stron.
   Działa tylko, gdy <html> ma klasę .m-js (dodawaną w <head>, jeśli użytkownik nie ogranicza ruchu).
   Bez JavaScriptu lub przy „ogranicz ruch” strona wygląda jak wcześniej. */

/* ---------- pasek postępu czytania ---------- */
.m-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:80;pointer-events:none;
  background:linear-gradient(90deg,var(--gold),var(--gold2));transform-origin:0 50%;transform:scaleX(var(--p,0));opacity:.9}

/* ---------- nagłówek: kompaktowy po przewinięciu ---------- */
.m-js .top{transition:background-color .4s,box-shadow .4s,border-color .4s}
.m-js .top .wrap{transition:height .4s cubic-bezier(.2,.7,.2,1)}
.m-js .top .logo img{transition:width .4s,height .4s}
.m-js .top.is-scrolled{background:rgba(12,16,19,.78);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 12px 34px rgba(0,0,0,.45)}
.m-js .top.is-scrolled .wrap{height:70px}
.m-js .top.is-scrolled .logo img{width:40px;height:40px}
@media(max-width:820px){.m-js .top.is-scrolled .wrap{height:62px}.m-js .top.is-scrolled .logo img{width:34px;height:34px}}

/* aktywna sekcja w menu „Przejdź do sekcji” */
.jump-panel a{position:relative;transition:background-color .25s,color .25s}
.jump-panel a.is-current{color:var(--gold2)!important;background:#1a252b}
.jump-panel a.is-current::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;background:var(--gold)}
.m-js .jump-panel{transform-origin:top right}
.m-js .jump-menu[open] .jump-panel{animation:m-drop .28s cubic-bezier(.2,.7,.2,1)}
@keyframes m-drop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}

/* podstrony: pasek „Dla kogo / Zakres …” */
.audit-jump a{position:relative;padding-bottom:4px}
.audit-jump a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold2);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.audit-jump a:hover::after,.audit-jump a.is-current::after{transform:scaleX(1)}
.audit-jump a.is-current{color:var(--gold2)}

/* ---------- pierwszy ekran ---------- */
@keyframes m-up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes m-word{from{opacity:0;transform:translateY(.45em);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes m-emblem{from{opacity:0;scale:.92}to{opacity:1;scale:1}}
@keyframes m-breathe{0%,100%{filter:brightness(1) contrast(1)}50%{filter:brightness(1.18) contrast(1.05)}}
@keyframes m-kenburns{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.09) translate3d(-1.6%,-1.2%,0)}}
@keyframes m-drift{0%{transform:translate3d(-4%,2%,0) scale(1)}50%{transform:translate3d(3%,-3%,0) scale(1.08)}100%{transform:translate3d(-2%,-1%,0) scale(1.02)}}

.m-js .hero::before{animation:m-kenburns 26s ease-in-out infinite alternate;will-change:transform}

.m-js :is(.hero,.audit-hero) :is(.crumb,.eyebrow,h1,.lead,.cta,.btn,.audit-meta,.audit-jump,.cred){animation:m-up 1s cubic-bezier(.2,.7,.2,1) both}
.m-js :is(.hero,.audit-hero) .crumb{animation-delay:.05s}
.m-js :is(.hero,.audit-hero) .eyebrow{animation-delay:.12s}
.m-js :is(.hero,.audit-hero) h1{animation-delay:.25s}
.m-js :is(.hero,.audit-hero) .lead{animation-delay:.75s}
.m-js :is(.hero,.audit-hero) :is(.cta,.btn){animation-delay:.9s}
.m-js :is(.hero,.audit-hero) .cta .btn{animation:none}
.m-js :is(.hero,.audit-hero) .audit-meta{animation-delay:1s}
.m-js .audit-hero .audit-jump{animation-delay:1.1s}
.m-js .hero .cred:nth-child(1){animation-delay:1s}
.m-js .hero .cred:nth-child(2){animation-delay:1.1s}
.m-js .hero .cred:nth-child(3){animation-delay:1.2s}
.m-js .hero .cred:nth-child(4){animation-delay:1.3s}
.m-js .hero-emblem{animation:m-emblem 1.6s .35s cubic-bezier(.2,.7,.2,1) both,m-breathe 7s 2s ease-in-out infinite;will-change:filter}

/* nagłówek słowo po słowie (gdy JS podzieli tekst) */
.m-js :is(.hero,.audit-hero) h1.m-split{animation:none}
.m-w{display:inline-block;animation:m-word .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.25s + var(--i) * 45ms)}

/* dym i iskry */
.m-smoke,.m-embers{position:absolute;inset:0;pointer-events:none}
.m-smoke{overflow:hidden;z-index:0}
.m-smoke::before,.m-smoke::after{content:"";position:absolute;inset:-20%;
  background:radial-gradient(ellipse 34% 26% at 72% 38%,rgba(223,204,166,.07),transparent 70%),radial-gradient(ellipse 30% 22% at 58% 70%,rgba(200,210,215,.05),transparent 70%);
  animation:m-drift 22s ease-in-out infinite alternate}
.m-smoke::after{animation-duration:31s;animation-direction:alternate-reverse;opacity:.8;
  background:radial-gradient(ellipse 28% 20% at 84% 62%,rgba(223,204,166,.06),transparent 70%),radial-gradient(ellipse 36% 24% at 40% 30%,rgba(190,200,205,.04),transparent 70%)}
.m-embers{z-index:0;width:100%;height:100%}
:is(.hero,.audit-hero){position:relative}
.audit-hero{overflow:hidden;isolation:isolate}
/* .wrap bez z-index — inaczej emblemat (mix-blend-mode) traci przenikanie z tłem */
:is(.hero,.audit-hero)>.wrap{position:relative}

/* ---------- pojawianie się przy przewijaniu ---------- */
.m-js .rv{opacity:0;translate:0 30px;transition:opacity .95s cubic-bezier(.2,.7,.2,1) var(--d,0s),translate .95s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.m-js .rv.in{opacity:1;translate:0 0}

/* złota kreska przy etykietach sekcji */
.m-js .eyebrow::before{content:"";display:inline-block;vertical-align:middle;width:28px;height:1px;margin:-2px 12px 0 0;background:var(--gold);transform-origin:left;transition:transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--d,0s) + .25s)}
.m-js .eyebrow.rv:not(.in)::before{transform:scaleX(0)}
.m-js .deliverable .eyebrow::before{display:none}

/* zdjęcia: kurtyna + paralaksa + kolor po najechaniu */
.m-ph{display:block;overflow:hidden;border:1px solid #ffffff17;position:relative}
.m-ph img{border:0!important;scale:1.1;translate:0 var(--py,0px);transition:filter .7s ease;will-change:translate}
figure:hover .m-ph img{filter:saturate(1)!important}
.m-js figure.rv .m-ph{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s cubic-bezier(.7,0,.2,1) calc(var(--d,0s) + .1s)}
.m-js figure.rv.in .m-ph{clip-path:inset(0 0 0 0)}

/* ---------- karty usług ---------- */
.m-js .svc{position:relative;isolation:isolate}
.m-js .svc::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .45s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(223,204,166,.11),transparent 50%)}
.m-js .svc:hover::after{opacity:1}
.m-js .svc:hover{box-shadow:0 18px 40px rgba(0,0,0,.35),0 0 0 1px rgba(195,172,127,.25)}
.m-js .svc .ico{transition:transform .5s cubic-bezier(.2,.7,.2,1),color .3s}
.m-js .svc:hover .ico{transform:translateY(-5px);color:var(--gold2)}
.m-arr{display:inline-block;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.svc-link:hover .m-arr,.svc-link:focus-visible .m-arr{transform:translateX(6px)}

/* przycisk złoty: przelotny połysk */
.m-js .btn-gold{position:relative;overflow:hidden;isolation:isolate}
.m-js .btn-gold::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);transform:translateX(-130%);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.m-js .btn-gold:hover::after{transform:translateX(130%)}

/* ---------- kroki: linia rysowana przy przewijaniu ---------- */
.m-js .steps{position:relative}
.m-js .steps::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,var(--gold2),var(--gold));transform-origin:left;transform:scaleX(var(--sp,0))}
.m-js .step::before{transition:color .5s,text-shadow .5s}
.m-js .step.lit::before{color:var(--gold2);text-shadow:0 0 18px rgba(223,204,166,.45)}

/* ---------- sekwencje: wiersze raportu, listy ---------- */
.m-js .m-seq .m-si{opacity:0;translate:-14px 0;transition:opacity .6s ease calc(var(--r) * .28s + .35s),translate .6s cubic-bezier(.2,.7,.2,1) calc(var(--r) * .28s + .35s)}
.m-js .m-seq.m-play .m-si{opacity:1;translate:0 0}
.m-js .doc.m-seq .lvl{display:inline-block;scale:0;transition:scale .5s cubic-bezier(.3,1.7,.5,1) calc(var(--r) * .28s + .55s)}
.m-js .doc.m-seq.m-play .lvl{scale:1}
.m-js .doc.rv{rotate:5deg;translate:50px 40px}
.m-js .doc.rv.in{rotate:0deg;translate:0 0;transition:opacity 1s ease,translate 1.2s cubic-bezier(.2,.7,.2,1),rotate 1.2s cubic-bezier(.2,.7,.2,1)}
.m-js .deliverable li::before{display:inline-block;transition:transform .5s cubic-bezier(.3,1.7,.5,1) calc(var(--r,0) * .28s + .55s)}
.m-js .deliverable.m-seq:not(.m-play) li::before{transform:scale(0)}

/* ---------- zakładki „Dla kogo” ---------- */
.m-tabs{position:relative}
.m-tabs .tab[aria-selected=true]{border-bottom-color:transparent!important}
.m-tabs .tab{transition:color .3s}
.m-ind{position:absolute;left:0;top:0;height:2px;width:0;background:var(--gold);pointer-events:none;transition:transform .45s cubic-bezier(.2,.7,.2,1),width .45s cubic-bezier(.2,.7,.2,1)}
@keyframes m-panel{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.m-js .panel.on{animation:m-panel .55s cubic-bezier(.2,.7,.2,1)}

/* ---------- test samooceny ---------- */
@keyframes m-q{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.m-js #qbody>*{animation:m-q .5s cubic-bezier(.2,.7,.2,1) both}
.m-js #qbody>*:nth-child(2){animation-delay:.06s}
.m-js #qbody>*:nth-child(3){animation-delay:.12s}
.m-js #qbody>*:nth-child(4){animation-delay:.18s}
.m-js #qbody>*:nth-child(5){animation-delay:.24s}
.m-js #qbody>*:nth-child(6){animation-delay:.3s}
.m-js .qbtns button{transition:border-color .25s,background-color .25s,transform .25s}
.m-js .qbtns button:hover{transform:translateY(-2px)}
.m-js .qbtns button:active{transform:scale(.97)}
.m-js .qbar i{transition:width .6s cubic-bezier(.2,.7,.2,1)}

/* ---------- FAQ ---------- */
.m-js details:not(.jump-menu) summary::after{content:"+";transition:transform .4s cubic-bezier(.2,.7,.2,1);display:inline-block}
.m-js details[open]:not(.jump-menu) summary::after{content:"+";transform:rotate(45deg)}
.m-js details.m-closing:not(.jump-menu) summary::after{transform:none}
.m-js details:not(.jump-menu) summary{transition:color .25s}
.m-js details:not(.jump-menu) summary:hover{color:var(--gold2)}
@keyframes m-fade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.m-js details[open]:not(.jump-menu)>:not(summary){animation:m-fade .5s .05s cubic-bezier(.2,.7,.2,1) both}

/* ---------- końcowe wezwanie: wolno przesuwające się światło ---------- */
.m-js .audit-cta{position:relative;overflow:hidden;isolation:isolate}
.m-js .audit-cta::before{content:"";position:absolute;width:70%;aspect-ratio:1;left:15%;top:10%;z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(223,204,166,.09),transparent 62%);animation:m-sweep 16s ease-in-out infinite alternate}
@keyframes m-sweep{from{transform:translate(-25%,10%)}to{transform:translate(25%,-15%)}}

@media(prefers-reduced-motion:reduce){.m-progress,.m-smoke,.m-embers{display:none}}

/* przechylona karta raportu wystawala ~10 px poza ekran -> poziomy pasek przewijania */
html,body{overflow-x:clip}