/* ---------- Wdrożenie ---------- */
b{font-weight:400}

/* hero: problemy, z którymi przychodzi firma */
.f-hero .ctas{margin-top:30px}
.w-pain{background:rgba(13,14,18,.52);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);padding:22px 26px 10px}
.w-pain-h{font-size:14px;color:var(--mut);padding-bottom:10px}
.w-pain ul{list-style:none}
.w-pain li{display:flex;align-items:center;gap:14px;padding:15px 0;border-top:1px solid rgba(255,255,255,.1);font-size:16px;color:#fff;opacity:0;transform:translateY(8px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.w-pain li::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:var(--pk);box-shadow:0 0 0 4px rgba(248,76,137,.18)}
.w-pain.in li{opacity:1;transform:none}

/* etapy: pięć równych kolumn w jednej ramie */
.w-proc{padding:clamp(48px,7vh,84px) clamp(28px,3vw,48px) clamp(40px,6vh,64px);background:rgba(13,14,18,.42);backdrop-filter:blur(12px) saturate(1.1);-webkit-backdrop-filter:blur(12px) saturate(1.1)}
.w-proc-head h2{font-size:clamp(30px,2.6vw,44px)}
.w-proc-head p{margin-top:16px;font-size:clamp(15px,1vw,16.5px);line-height:1.5}
.w-proc-head p.lit{--lc:rgba(243,243,245,.86)}
.w-sts{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(3,auto);margin-top:clamp(36px,5vh,56px);border-top:1px solid rgba(255,255,255,.14)}
.w-st{position:relative;display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start;padding:30px clamp(16px,1.6vw,26px) 6px}
.w-st p{align-self:start}
.w-st+.w-st{border-left:1px solid rgba(255,255,255,.1)}
.w-st:first-child{padding-left:0}.w-st:last-child{padding-right:0}
/* jedna ciągła linia postępu przez wszystkie etapy, bez szwów między kolumnami */
.w-sts{position:relative;--p:0}
.w-sts::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:rgba(255,255,255,.75);transform:scaleX(var(--p));transform-origin:left;transition:transform .65s var(--ease)}
/* znacznik etapu: węzeł na górnej linii, cyfra bez zera z przodu */
.w-st-n{position:absolute;top:-12px;left:-12px;z-index:1;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;font-size:12px;line-height:1;color:var(--mut2);
  background:#000;border:1px solid rgba(255,255,255,.2);transition:color .5s,border-color .5s}
.w-st:first-child .w-st-n{left:0}
.w-st.on .w-st-n{color:#fff;border-color:rgba(255,255,255,.75)}
.w-st svg{display:block;width:100%;height:auto;aspect-ratio:160/100;margin:8px 0 24px;overflow:visible}
.w-st h3{font-size:clamp(17px,1.2vw,20px);line-height:1.25;letter-spacing:-.01em;color:rgba(243,243,245,.55);transition:color .6s}
.w-st p{margin-top:10px;font-size:14.5px;line-height:1.45;color:var(--mut);opacity:.6;transition:opacity .6s}
.w-st.on h3{color:#fff}
.w-st.on p{opacity:1}
/* schematy: kwadrat to zadanie, kolor to projekt */
.w-st .q{fill:rgba(255,255,255,.2);stroke:none;opacity:0;transform-box:fill-box;transform-origin:center;scale:.4;transition:opacity .5s var(--d),scale .7s var(--ease) var(--d)}
.w-st .tag{opacity:0;fill-opacity:.35;transition:opacity .5s var(--d)}
.w-st .dr{fill:none;stroke:rgba(255,255,255,.42);stroke-width:1.2;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1.6s var(--ease) var(--d,0ms)}
.w-st .pp{fill:rgba(255,255,255,.12);stroke:rgba(255,255,255,.5);stroke-width:1.2;opacity:0;transition:opacity .5s var(--d)}
.w-st .led{fill:#3BD13B;opacity:0;transition:opacity .4s .9s}
.w-st .ok{fill:#45D5ED}
.w-st .tick{fill:none;stroke:#111216;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .4s .8s}
.w-st.on .q{opacity:1;scale:1}
.w-st.on .tag,.w-st.on .pp,.w-st.on .led,.w-st.on .tick{opacity:1}
.w-st.on .tag{opacity:1}
.w-st.on .dr{stroke-dashoffset:0}
.w-st.on .led{animation:wled 1.6s steps(2) 1.2s infinite}
.w-st.on .loop{animation:wspin 6s linear 1.8s infinite;transform-box:view-box;transform-origin:134px 50px}
@keyframes wspin{to{transform:rotate(360deg)}}

/* serwer: wszystko zostaje w granicy firmy */
.w-url{display:flex;align-items:center;gap:.5em;padding:.45em 1em .45em .8em;border-radius:999px;background:rgba(255,255,255,.08);color:#fff}
.w-url svg{width:1.1em;height:1.1em;flex:none;fill:none;stroke:#44D4EC;stroke-width:1.5}
.w-host{position:relative;display:flex;align-items:center;gap:0;padding:clamp(48px,7vh,70px) clamp(24px,2.4vw,40px) clamp(36px,5vh,52px);border:1px dashed rgba(255,255,255,.28)}
.w-host-l{position:absolute;left:18px;top:-.7em;padding:0 10px;font-size:13px;color:var(--mut);background:#1a1b20}
.w-host-team{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;flex:none}
.w-host-team .av{width:34px;height:34px;font-size:12px}
.w-host-ln{flex:1 1 0;min-width:24px;height:12px;overflow:visible}
.w-host-ln path{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.5;vector-effect:non-scaling-stroke}
.w-host.run .w-host-ln path{stroke:#44D4EC;stroke-dasharray:4 10;animation:wflow 1.4s linear infinite}
@keyframes wflow{to{stroke-dashoffset:-28}}
.w-host-app{flex:0 1 auto;min-width:0;padding:14px;border-radius:.6em;background:rgba(30,31,36,.82);border:1px solid rgba(255,255,255,.1);font:400 13.5px/1.3 Lato,sans-serif;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.w-host-app p{margin-top:12px;font-size:13px;color:#bdbdc2;max-width:15em}
.w-host-srv{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px}
.w-host-srv i{display:block;width:64px;height:15px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.05);position:relative}
.w-host-srv i::after{content:"";position:absolute;right:6px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:#3BD13B;opacity:.4}
.w-host.run .w-host-srv i::after{animation:wled 1.2s steps(2) infinite}
.w-host-srv i:nth-child(2)::after{animation-delay:-.4s!important}.w-host-srv i:nth-child(3)::after{animation-delay:-.8s!important}
@keyframes wled{50%{opacity:1}}
.w-host-srv b{margin-top:8px;font-size:13.5px;color:#fff}

/* rozliczenie: bez kafla, oś czasu na tle strony */
.w-bill{position:relative;padding:clamp(110px,14vh,170px) 0 clamp(100px,13vh,160px);margin:clamp(40px,6vh,80px) 0}
/* pas przez całą szerokość ekranu, przyciemnia i rozmywa góry, bez ramki i krzyżyków */
.w-bill::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(11,12,16,.66);backdrop-filter:blur(16px) saturate(1.05);-webkit-backdrop-filter:blur(16px) saturate(1.05);
  -webkit-mask:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);mask:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
.w-bill>.wrap{position:relative}
.w-bill-head h2{font-size:clamp(30px,2.6vw,44px)}
.w-bill-head p{margin-top:16px;font-size:clamp(15px,1vw,16.5px);line-height:1.5}
.w-bill-head p.lit{--lc:rgba(243,243,245,.86)}
.w-tl{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(28px,3vw,56px);margin-top:clamp(48px,7vh,80px)}
.w-tl-k{font-size:13px;color:#44D4EC;padding-bottom:16px}
.w-tl-a{position:relative;height:28px;display:flex;align-items:center}
.w-tl-start::before{content:"";position:absolute;left:0;top:50%;width:13px;height:13px;margin-top:-6.5px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(141,63,242,.35);z-index:1}
.w-tl-start b{display:block;width:100%;height:6px;border-radius:3px;background:linear-gradient(90deg,#8D3FF2,#44D4EC);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease) .2s}
.w-tl-months{gap:0;justify-content:space-between;-webkit-mask:linear-gradient(90deg,#000 70%,transparent);mask:linear-gradient(90deg,#000 70%,transparent)}
.w-tl-months::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.22)}
.w-tl-months i{position:relative;width:1px;height:16px;background:rgba(255,255,255,.55);opacity:0;transform:scaleY(.2);transition:opacity .4s calc(1.3s + var(--k) * 90ms),transform .5s var(--ease) calc(1.3s + var(--k) * 90ms)}
.w-tl-months em{position:absolute;left:0;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#44D4EC;box-shadow:0 0 12px 2px rgba(68,212,236,.7);opacity:0}
.w-tl h3{margin-top:28px;font-size:clamp(22px,1.7vw,28px);line-height:1.15;letter-spacing:-.02em}
.w-tl ul{list-style:none;margin-top:18px;display:grid;gap:12px}
.w-tl li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.35;color:rgba(243,243,245,.86)}
.w-tl.in .w-tl-start b{transform:none}
.w-tl.in .w-tl-months i{opacity:1;transform:none}
.w-tl.in .w-tl-months em{animation:wmon 6s linear 2.6s infinite}
@keyframes wmon{0%{left:0;opacity:0}6%{opacity:1}80%{opacity:1}100%{left:100%;opacity:0}}
.w-bill-n{display:flex;align-items:center;gap:10px;margin-top:clamp(40px,6vh,64px);padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:14.5px;color:var(--mut)}
.w-bill-n svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round}