/* =====================================================================
   materialy-pos.pl · warstwa wyglądu w stylu artykułu „Kto naprawdę
   dostarcza standy…” (kolory akcentów, kreski, podkreślenia, animacje)
   Ładowana po style.css i site.css. Działa też bez JS (bez animacji).
   ===================================================================== */
:root{
  --c1:#2f6bff;--c1s:#e8efff;--c2:#ff4d3d;--c2s:#ffe9e6;--c3:#ffb000;--c3s:#fff4d9;
  --c4:#550167;--c4s:#f5f3f6;--c5:#8b5cf6;--c5s:#f0eaff;--kraft:#c8873f;--kraft-soft:#f8eee2;
  /* gradient z pasa na kuli logo Unique Job (próbki kolorów z pliku logo, od lewej do prawej) – pasek postępu i wszystkie
     kreski / podkreślenia z gradientem (10.11.2026; wcześniej pomarańcz → żółty → zieleń) */
  --grad-logo:linear-gradient(90deg,#550167 0%,#8b0066 20%,#c90066 40%,#eb015c 60%,#f0025b 70%,#ec015f 80%,#c30169 90%,#90036c 100%);
  --grad:var(--grad-logo);
  --mark:#ffe7a3;--ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- pasek postępu i przycisk „do góry” (wstawiane przez me.js) ---------- */
.me-progress{position:fixed;left:0;right:0;top:0;height:14px;z-index:60;pointer-events:none}
.me-progress i{display:block;height:100%;background:var(--grad-logo);transform:scaleX(0);transform-origin:0 50%}
.me-pct{position:absolute;top:0;left:2.5rem;height:100%;min-width:4ch;font-weight:700;font-size:10px;line-height:14px;letter-spacing:.06em;text-align:left;font-variant-numeric:tabular-nums;color:var(--black);opacity:0;transition:opacity .3s ease}
.me-pct.on{opacity:1}
.me-pct span{display:block}
.me-pct .w{position:absolute;inset:0;color:#fff;text-shadow:0 0 3px rgba(150,70,0,.35);clip-path:inset(0 100% 0 0)}
@media (max-width:560px){.me-pct{left:1.25rem}}
.me-totop{position:fixed;right:22px;bottom:22px;z-index:550;width:54px;height:54px;border-radius:50%;background:var(--black);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 26px -12px rgba(0,0,0,.5);opacity:0;transform:translateY(26px) scale(.7);pointer-events:none;transition:opacity .3s ease,transform .45s cubic-bezier(.3,1.4,.5,1)}
.me-totop.show{opacity:1;transform:none;pointer-events:auto}
.me-totop svg{width:46px;height:46px;overflow:visible}
.me-totop .tt-track{fill:none;stroke:rgba(255,255,255,.18);stroke-width:2.5}
.me-totop .tt-ring{fill:none;stroke:url(#me-ttg);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.me-totop .tt-arrow{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.me-totop:hover .tt-arrow{transform:translateY(-3px)}
.me-totop:focus-visible{outline:2px solid var(--c1);outline-offset:3px}
@media(max-width:760px){.me-totop{right:14px;bottom:14px;width:48px;height:48px}.me-totop svg{width:40px;height:40px}body.me-scta .me-totop{bottom:calc(78px + env(safe-area-inset-bottom))}}
@media print{.me-progress,.me-totop{display:none}}

/* ---------- eyebrow z kreską jak w artykule ---------- */
.eyebrow,.section-eyebrow{color:var(--black);font-weight:500;font-size:10.5px;letter-spacing:.18em}
.eyebrow{white-space:normal}
.page-head a.eyebrow.me-badge{display:inline-block!important;width:auto}
@media(max-width:640px){.section-header:not(.split){flex-direction:column;align-items:flex-start;gap:.8rem}.section-eyebrow{white-space:normal}}
.eyebrow:before,.section-eyebrow:before{content:"";display:inline-block;vertical-align:middle;width:28px;margin:-2px 10px 0 0;border-top:1px solid currentColor}
.band .section-eyebrow,.band .eyebrow{color:#fff}
a.eyebrow{color:var(--black)}
.footer-cols h4{color:var(--black);font-weight:600}
.footer-cols h4:before{content:"";display:inline-block;vertical-align:middle;width:18px;margin:-2px 8px 0 0;border-top:1px solid currentColor}

/* ---------- wyróżnienia w nagłówkach: czarna kursywa z żółtym markerem ---------- */
.hero-title em,.section-title em,.section-title.big em,.page-head h1 em,.page-title em,.magnet h2 em,.nl h2 em,.thanks h1 em,.prose h2 em,.cta-box h3 em{color:var(--black);font-style:italic;background:linear-gradient(transparent 64%,var(--mark) 64%,var(--mark) 90%,transparent 90%) no-repeat 0 0/100% 100%;padding:0 .04em}
em.me-nomark{background:none!important;padding:0}
.band h2 em{color:#fff;font-style:italic;background:var(--grad) no-repeat 0 100%/100% 3px;padding:0 .02em 4px}

/* ---------- linki „więcej” z kolorową kreską ---------- */
.link-more,.tile .more,.exec-card .more,.fact a,.post-card .me-more{display:inline-block;font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--black);text-decoration:none;border-bottom:2px solid var(--k,var(--black));padding-bottom:3px;transition:color .2s ease,border-color .2s ease}
.tile .more,.exec-card .more{align-self:flex-start}
.link-more:hover,.tile:hover .more,.exec-card:hover .more,.fact a:hover{color:var(--gray-text)}
.link-more{--k:var(--c1)}
.section:nth-of-type(3n+2) .link-more{--k:var(--c4)}
.section:nth-of-type(3n) .link-more{--k:var(--c3)}
.fact a{color:var(--gray-text);border-bottom-width:1.5px}

/* ---------- menu: podkreślenie w gradiencie ---------- */
.nav-links a:not(.nav-cta){position:relative}
.nav-links a:not(.nav-cta):after{content:"";position:absolute;left:0;right:.12em;bottom:-7px;height:2px;border-radius:2px;background:var(--grad);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease)}
.nav-links a:not(.nav-cta):hover:after,.nav-links a[aria-current]:not(.nav-cta):after,.nav-links a.active:after{transform:none}
.nav-links a[aria-current],.nav-links a.active{border-bottom:0!important;padding-bottom:0;color:var(--black)}
.nav-links.open a:not(.nav-cta):after{bottom:-3px;right:auto;width:44px}

/* ---------- wybór języka w menu ---------- */
.nav-links .nav-lang{display:flex;align-items:center}
.nav-lang .lsw{display:inline-flex;align-items:center;gap:1px;font-weight:600;font-size:11px;letter-spacing:.14em;line-height:1}
.nav-links .nav-lang .lsw a{position:relative;display:block;padding:9px 5px 6px 6px;color:var(--gray-muted);font-weight:600;letter-spacing:.14em;border:0!important}
.nav-links .nav-lang .lsw a:after{left:6px;right:calc(5px + .14em);bottom:-1px}
.nav-links .nav-lang .lsw a[aria-current]{color:var(--black)}
.nav-links .nav-lang .lsw a[aria-current]:after{transform:none}
@media(max-width:1200px){.nav-links.open .nav-lang{padding:.6rem 0 .2rem;border-bottom:0}.nav-links.open .nav-lang .lsw{gap:.35rem}.nav-links.open .nav-lang .lsw a{display:block;padding:.7rem .55rem .8rem;border:0!important}.nav-links.open .nav-lang .lsw a:after{bottom:.35rem;width:auto}}
/* wpis dostępny tylko po polsku, materiały po polsku */
.me-lang{display:inline-block;margin-left:6px;font-size:9.5px;letter-spacing:.12em;padding:3px 7px;border-radius:99px;font-weight:600;background:#eaecf0;color:#344054;vertical-align:middle}
.me-pl-note{font-weight:600;color:var(--black)}
.inline-form .me-pl-note+.small{margin-top:-.35rem}
.inline-form .small>a{margin-left:.3em}
.me-tgrow{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.me-tgrow .me-lang{margin-left:0}
li>.me-lang,p>.me-lang{font-size:9px;padding:2px 6px;margin-left:5px;vertical-align:1px}

/* ---------- przyciski ---------- */
.btn{transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .15s ease}
.btn:active{transform:translateY(1px)}

/* ---------- liczby na stronie głównej jak KPI w artykule ---------- */
.stats .stat{position:relative}
.stats .stat:before{content:"";position:absolute;left:2.5rem;top:0;width:36px;height:3px;background:var(--k)}
.stats .stat:nth-child(1){--k:var(--c1)}.stats .stat:nth-child(2){--k:var(--c3)}.stats .stat:nth-child(3){--k:var(--c2)}.stats .stat:nth-child(4){--k:var(--c5)}
.stats .stat-num{color:var(--k)}
.facts .fact{position:relative}
.facts .fact:before{content:"";position:absolute;top:0;left:0;width:36px;height:3px;background:var(--k)}
.facts .fact+.fact:before{left:2rem}
.facts .fact:nth-child(4n+1){--k:var(--c1)}.facts .fact:nth-child(4n+2){--k:var(--c3)}.facts .fact:nth-child(4n+3){--k:var(--c2)}.facts .fact:nth-child(4n+4){--k:var(--c4)}
.facts .stat-num{color:var(--k);font-variant-numeric:tabular-nums lining-nums}
@media(max-width:900px){.stats .stat:before{left:1.5rem}.facts .fact:nth-child(2n):before{left:1.25rem}}
@media(max-width:560px){.facts .fact:before,.facts .fact:nth-child(2n):before{left:0}}

/* ---------- kafle oferty, karty, kroki: kolorowe akcenty ---------- */
.tiles .tile:nth-child(5n+1),.posts .post-card:nth-child(5n+1),.side .card:nth-child(5n+1){--k:var(--c1)}
.tiles .tile:nth-child(5n+2),.posts .post-card:nth-child(5n+2),.side .card:nth-child(5n+2){--k:var(--c3)}
.tiles .tile:nth-child(5n+3),.posts .post-card:nth-child(5n+3),.side .card:nth-child(5n+3){--k:var(--c4)}
.tiles .tile:nth-child(5n+4),.posts .post-card:nth-child(5n+4),.side .card:nth-child(5n+4){--k:var(--c2)}
.tiles .tile:nth-child(5n+5),.posts .post-card:nth-child(5n+5),.side .card:nth-child(5n+5){--k:var(--c5)}
.tile,.post-card{position:relative;transition:translate .25s ease,box-shadow .25s ease}
.tile:after,.post-card:after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--k,var(--c1));transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease);z-index:2;pointer-events:none}
.tile:hover:after,.post-card:hover:after,.tile:focus-visible:after,.post-card:focus-visible:after{transform:none}
@media (hover:hover){.tile:hover,.post-card:hover,.why-i:hover,.exec-card:hover,.side .card:not(.sticky):hover,.steps li:hover{translate:0 -4px;box-shadow:0 16px 32px -20px rgba(10,10,10,.4);z-index:3}}
.post-card h3{background:linear-gradient(var(--k,var(--c1)),var(--k,var(--c1))) no-repeat 0 100%/0 2px;transition:background-size .45s var(--ease);padding-bottom:1px}
.post-card:hover h3{background-size:100% 2px}
.why4 .why-i{position:relative;background:#fff;transition:translate .25s ease,box-shadow .25s ease}
.why4 .why-i:before{content:"";position:absolute;left:-.5px;right:-.5px;top:-.5px;height:3px;background:var(--k);transform-origin:0 50%}
.why4 .why-i:nth-child(4n+1){--k:var(--c1)}.why4 .why-i:nth-child(4n+2){--k:var(--c3)}.why4 .why-i:nth-child(4n+3){--k:var(--c4)}.why4 .why-i:nth-child(4n+4){--k:var(--c5)}
.exec-card{position:relative;transition:translate .25s ease,box-shadow .25s ease}
.exec-card:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--k,var(--c1))}
.exec2 .exec-card:nth-child(1){--k:var(--c1)}.exec2 .exec-card:nth-child(2){--k:var(--c4)}
.side .card{border-top:3px solid var(--k,var(--c1));transition:translate .25s ease,box-shadow .25s ease}
.steps li{position:relative;background:#fff;transition:translate .25s ease,box-shadow .25s ease}
.steps li:after{content:"";position:absolute;left:-.5px;right:-.5px;top:-.5px;height:3px;background:var(--k);transform-origin:0 50%}
.steps li:nth-child(5n+1){--k:var(--c1)}.steps li:nth-child(5n+2){--k:var(--c2)}.steps li:nth-child(5n+3){--k:var(--c3)}.steps li:nth-child(5n+4){--k:var(--c4)}.steps li:nth-child(5n+5){--k:var(--c5)}
.steps li::before{color:var(--k);transform-origin:0 70%}
.exec-steps li:nth-child(5n+1){--k:var(--c1)}.exec-steps li:nth-child(5n+2){--k:var(--c2)}.exec-steps li:nth-child(5n+3){--k:var(--c3)}.exec-steps li:nth-child(5n+4){--k:var(--c4)}.exec-steps li:nth-child(5n+5){--k:var(--c5)}
.exec-steps li::before{color:var(--k)}
.sectors li{position:relative}
.sectors b{display:flex;align-items:center;gap:8px}
.sectors b:before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--k,var(--c1))}
.sectors li:nth-child(5n+1){--k:var(--c1)}.sectors li:nth-child(5n+2){--k:var(--c2)}.sectors li:nth-child(5n+3){--k:var(--c3)}.sectors li:nth-child(5n+4){--k:var(--c4)}.sectors li:nth-child(5n+5){--k:var(--c5)}
.cap-tag{font-style:normal;font-size:9.5px;letter-spacing:.12em;padding:3px 9px;border-radius:99px;font-weight:600;white-space:nowrap;background:#eaecf0;color:#344054}
.cap-tag.me-in{background:var(--c4s);color:#550167}
.cap-tag.me-pa{background:var(--c1s);color:var(--c1)}

/* ---------- etykiety kategorii jak znaczniki źródeł w artykule ---------- */
.post-card .tg,a.eyebrow.me-badge,.me-cat{align-self:flex-start;display:inline-block;font-size:9.5px;letter-spacing:.12em;padding:3px 9px;border-radius:99px;font-weight:600;white-space:nowrap;background:var(--bs,var(--c1s));color:var(--bc,var(--c1))}
a.eyebrow.me-badge:before{display:none}
.me-cat-poradniki{--bs:var(--c1s);--bc:var(--c1)}
.me-cat-z-pracowni{--bs:var(--kraft-soft);--bc:#8a5a2b}
.me-cat-prawo-i-ppwr{--bs:#eaecf0;--bc:#344054}
.me-cat-trendy{--bs:var(--c5s);--bc:var(--c5)}
.me-cat-rynek{--bs:var(--c3s);--bc:#9a6700}
.me-cat-recykling-i-ekologia{--bs:var(--c4s);--bc:#550167}
.me-cat-przeglad-branzowy{--bs:var(--c2s);--bc:#b42318}
.cats a{border-radius:99px;transition:color .2s ease,border-color .2s ease,background-color .2s ease}
.tag{border-radius:99px}

/* ---------- treść wpisów ---------- */
.layout>.prose,.layout>.side{min-width:0}
.prose h2{position:relative;padding-bottom:.55rem}
.prose h2:after{content:"";position:absolute;left:0;bottom:0;width:44px;height:3px;border-radius:2px;background:var(--grad);transform-origin:0 50%}
.tldr h2:after,.faq h2:after,.sources h2:after{display:none}
.prose a{text-decoration-thickness:1px;text-underline-offset:3px;transition:color .2s ease,text-decoration-color .2s ease}
.prose a:hover{color:var(--c1);text-decoration-color:var(--c1)}
.prose blockquote{border-left:3px solid var(--c3);background:var(--c3s);padding:1rem 1.25rem;font-family:var(--font-display);font-style:italic}
.prose table{border-top:2px solid var(--black)}
.tldr{background:var(--c1s);border-left:3px solid var(--c1)}
.tldr h2{color:var(--c1)!important}
.tldr li::marker{color:var(--c1)}
.cta-box{background:var(--c4s);border:0;border-left:3px solid var(--c4)}
.cta-box h3{color:var(--black)}
.sources{border-top:2px solid var(--black)}
.share a{border-radius:99px;transition:border-color .2s ease,color .2s ease,background-color .2s ease}
.share a:hover{background:var(--black);color:#fff;border-color:var(--black)}
.toc a{text-decoration:none;display:block;transition:transform .2s ease,color .2s ease}
.toc a:hover{text-decoration:none;color:var(--c1);transform:translateX(4px)}
.toc li::marker{color:var(--c1);font-weight:600}
.faq details{transition:background-color .2s ease}
.faq summary::after{transition:transform .3s var(--ease),color .2s ease}
.faq details[open] summary::after{color:var(--c1)}
.faq details[open]{box-shadow:inset 3px 0 0 var(--c1);padding-left:1rem}
.faq summary:hover{color:var(--c1)}

/* ---------- okładki poradnika, pasy CTA, newsletter ---------- */
.cover{position:relative;overflow:hidden}
.cover:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--grad);transform-origin:0 50%}
.magnet .cover{transition:transform .4s var(--ease),box-shadow .4s ease}
@media (hover:hover){.magnet .cover:hover{transform:rotate(-2deg) translateY(-4px)}}
.band{position:relative}
.band:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--grad);transform-origin:0 50%}
.wz-bar i{background:var(--grad);height:3px;margin-top:-1px}

/* ---------- autor ze zdjęciem w kolorowym pierścieniu ---------- */
.avatar.me-photo,.person .ph.me-photo{position:relative;background:conic-gradient(from 200deg,#550167,#c90066,#f0025b,#c90066,#550167);padding:3px;overflow:visible}
.avatar.me-photo img,.person .ph.me-photo img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid #fff;background:#eee}

/* ---------- strona artykułu: okruszki i dół wpisu w szerokości artykułu ---------- */
.me-page main>.crumbs,.me-page .me-after{max-width:1120px;margin-left:auto;margin-right:auto}
.me-page .me-after{border-bottom:0}
.me-page .me-after .share{margin-bottom:2rem}

/* ---------- formularze ---------- */
.lf input:focus,.lf textarea:focus,.lf select:focus,.inline-form input:focus{border-color:var(--c1)!important;box-shadow:0 0 0 3px var(--c1s);outline:0}

/* ---------- liczby w kalkulatorze ---------- */
.calc-out b{font-variant-numeric:tabular-nums lining-nums}
.calc-out div:nth-child(4n+1) b{color:var(--c1)}.calc-out div:nth-child(4n+2) b{color:var(--c4)}.calc-out div:nth-child(4n+3) b{color:var(--c2)}.calc-out div:nth-child(4n+4) b{color:var(--c5)}

/* =====================================================================
   ANIMACJE (tylko gdy me.js działa; bez JS wszystko widać od razu)
   ===================================================================== */
.me-cnt{font-variant-numeric:tabular-nums lining-nums}
@media screen{
  html.me-anim .me-rv{transition-property:opacity,transform,translate,box-shadow;transition-duration:.8s,.8s,.25s,.25s;transition-timing-function:var(--ease),var(--ease),ease,ease;transition-delay:var(--d,0ms),var(--d,0ms),0ms,0ms}
  html.me-anim .me-rv:not(.in){opacity:0;transform:translate3d(0,26px,0)}
  html.me-anim .me-rv.me-l:not(.in){transform:translate3d(-30px,0,0)}
  html.me-anim .me-rv.me-r:not(.in){transform:translate3d(30px,0,0)}
  html.me-anim .me-rv.me-s:not(.in){transform:scale(.93)}
  html.me-anim .me-rv.me-up:not(.in){transform:translate3d(0,-26px,0)}
  html.me-anim .me-rv.me-now{transition:none!important}
  /* kreski i podkreślenia rysują się przy wejściu w widok */
  html.me-anim .me-dr.eyebrow:before,html.me-anim .me-dr.section-eyebrow:before,html.me-anim .me-dr .eyebrow:before,html.me-anim .me-dr .section-eyebrow:before{width:0;transition:width .9s var(--ease) calc(var(--d,0ms) + .15s)}
  html.me-anim .me-dr.go.eyebrow:before,html.me-anim .me-dr.go.section-eyebrow:before,html.me-anim .me-dr.go .eyebrow:before,html.me-anim .me-dr.go .section-eyebrow:before{width:28px}
  html.me-anim .me-dr em:not(.me-nomark){background-size:0 100%;transition:background-size 1.4s var(--ease) .45s}
  html.me-anim .me-dr.go em:not(.me-nomark){background-size:100% 100%}
  html.me-anim .band.me-dr h2 em{background-size:0 3px}
  html.me-anim .band.me-dr.go h2 em{background-size:100% 3px}
  html.me-anim .stats .stat.me-dr:before,html.me-anim .facts .fact.me-dr:before{width:0;transition:width .9s var(--ease) calc(var(--d,0ms) + .25s)}
  html.me-anim .stats .stat.me-dr.go:before,html.me-anim .facts .fact.me-dr.go:before{width:36px}
  html.me-anim .prose h2.me-dr:after{transform:scaleX(0);transition:transform .9s var(--ease) .2s}
  html.me-anim .prose h2.me-dr.go:after{transform:none}
  html.me-anim .why4 .why-i.me-dr:before,html.me-anim .steps li.me-dr:after,html.me-anim .band.me-dr:before,html.me-anim .cover.me-dr:before{transform:scaleX(0);transition:transform 1s var(--ease) calc(var(--d,0ms) + .2s)}
  html.me-anim .why4 .why-i.me-dr.go:before,html.me-anim .steps li.me-dr.go:after,html.me-anim .band.me-dr.go:before,html.me-anim .cover.me-dr.go:before{transform:none}
  html.me-anim .steps li.me-dr::before{transform:scale(.4);opacity:0;transition:transform .55s cubic-bezier(.3,1.6,.5,1) calc(var(--d,0ms) + .3s),opacity .3s ease calc(var(--d,0ms) + .3s)}
  html.me-anim .steps li.me-dr.go::before{transform:none;opacity:1}
  html.me-anim .sectors li.me-dr b:before{transform:scale(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1) calc(var(--d,0ms) + .3s)}
  html.me-anim .sectors li.me-dr.go b:before{transform:none}
  html.me-anim .avatar.me-photo.me-dr,html.me-anim .person .ph.me-photo.me-dr{background:none}
  html.me-anim .avatar.me-photo.me-dr:before,html.me-anim .person .ph.me-photo.me-dr:before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 200deg,#550167,#c90066,#f0025b,#c90066,#550167);opacity:0;transform:rotate(-200deg);transition:opacity .6s ease .2s,transform 1.5s var(--ease) .2s}
  html.me-anim .avatar.me-photo.me-dr.go:before,html.me-anim .person .ph.me-photo.me-dr.go:before{opacity:1;transform:none}
  html.me-anim .avatar.me-photo.me-dr img,html.me-anim .person .ph.me-photo.me-dr img{position:relative}
  /* łagodny tryb dla osób z ograniczeniem ruchu */
  html.me-anim.me-rm .me-rv:not(.in){transform:none}
  html.me-anim.me-rm .steps li.me-dr::before{transform:none}
  body.editing .me-rv{opacity:1!important;transform:none!important}
}
@media print{.me-rv{opacity:1!important;transform:none!important}}
.cover b{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
/* ---------- pozycjonowanie 11.2026: 5 powodów, 3 karty execution, nowa usługa ---------- */
.why4.me-five{grid-template-columns:repeat(5,1fr)}
.why4.me-five .why-i:nth-child(5){--k:var(--c2)}
@media (max-width:1200px){.why4.me-five{grid-template-columns:repeat(6,1fr)}.why4.me-five .why-i{grid-column:span 2}.why4.me-five .why-i:nth-child(n+4){grid-column:span 3}}
@media (max-width:900px){.why4.me-five{grid-template-columns:1fr 1fr}.why4.me-five .why-i,.why4.me-five .why-i:nth-child(n+4){grid-column:auto}.why4.me-five .why-i:last-child{grid-column:1/-1}}
@media (max-width:560px){.why4.me-five{grid-template-columns:1fr}.why4.me-five .why-i:last-child{grid-column:auto}}
.exec2.me-three{grid-template-columns:repeat(3,1fr)}
.exec2 .exec-card:nth-child(3){--k:var(--c5)}
@media (max-width:1000px){.exec2.me-three{grid-template-columns:1fr 1fr}.exec2.me-three .exec-card:nth-child(3){grid-column:1/-1}}
@media (max-width:800px){.exec2.me-three{grid-template-columns:1fr}.exec2.me-three .exec-card:nth-child(3){grid-column:auto}}
.tiles .tile.me-wide{grid-column:1/-1}
.tile.me-wide .in{border-top:0;padding:2.25rem 1.75rem 2.4rem;gap:.7rem}
.tile.me-wide h3{font-size:27px}
.tile.me-wide p{font-size:13.5px;max-width:760px}
.me-new{align-self:flex-start;font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:#fff;background:var(--black);padding:5px 9px 4px;line-height:1.2}
.prose table.me-cmp{display:table;overflow:visible;width:100%;border-collapse:collapse;border-top:0;margin:1.25rem 0 2.25rem;font-size:13px;line-height:1.6}
.prose table.me-cmp th,.prose table.me-cmp td{padding:.75rem .9rem .75rem 0;border-bottom:var(--line)}
.prose table.me-cmp thead th{font-size:10px;font-weight:600;letter-spacing:.12em;color:var(--black);border-bottom:2px solid var(--black)}
.prose table.me-cmp tbody td:first-child{font-weight:600;color:var(--black);width:22%}
.prose table.me-cmp td:last-child,.prose table.me-cmp th:last-child{padding-left:.9rem;background:#f7f6f3}
@media (max-width:640px){
.prose table.me-cmp,.prose table.me-cmp thead,.prose table.me-cmp tbody{display:block}
.prose table.me-cmp tr{display:grid;grid-template-columns:1fr 1fr;column-gap:.9rem;border-bottom:var(--line)}
.prose table.me-cmp thead tr{border-bottom:2px solid var(--black)}
.prose table.me-cmp thead th:first-child{display:none}
.prose table.me-cmp th,.prose table.me-cmp td{display:block;border:0;padding:.5rem 0;width:auto}
.prose table.me-cmp td:last-child,.prose table.me-cmp th:last-child{padding:.5rem .6rem}
.prose table.me-cmp tbody td:first-child{grid-column:1/-1;padding:.85rem 0 0}
}
/* stopka: „Niezależny partner POS” – pogrubione z markerem jak w nagłówkach */
.footer-cols p strong{font-weight:600;color:var(--black);background:linear-gradient(transparent 62%,var(--mark) 62%,var(--mark) 92%,transparent 92%) no-repeat 0 0/100% 100%;padding:0 .08em}
/* telefon: dłuższe linie nagłówka (np. „Od projektu po raport z kampanii.”) – mniejszy krój, żeby nie łamać po jednym słowie */
@media (max-width:560px){.hero-title{font-size:clamp(31px,9.4vw,44px);line-height:1.08}}
/* slider na stronie głównej: rośnie razem z ekranem (wysokość okna, na wąskich oknach szerokość kolumny),
   zdjęcia są przycięte do produktu, kropki stoją pod zdjęciem i są widoczne na białym tle */
/* kropki: jeden rząd przy każdej liczbie slajdów – pole kropki ma do 15 px i ściska się, gdy brakuje miejsca, a sama kropka ma 7 px albo mniej */
.hero-visual .slider-dots{position:static;transform:none;display:flex;flex-wrap:nowrap;justify-content:center;gap:0;margin:14px auto 0;width:100%;max-width:100%;box-sizing:border-box}
.hero-visual .slider-dot{position:relative;flex:0 1 15px;min-width:0;width:auto;height:15px;padding:0;border:0;border-radius:0;background:none;cursor:pointer;transform:none}
.hero-visual .slider-dot:before{content:"";position:absolute;left:50%;top:50%;width:min(7px,72%);aspect-ratio:1;border-radius:50%;background:#cbc7bf;transform:translate(-50%,-50%);transition:background-color .25s ease,transform .25s ease}
.hero-visual .slider-dot:hover:before{background:#9b978f}
.hero-visual .slider-dot.active{background:none}
.hero-visual .slider-dot.active:before{background:var(--black);transform:translate(-50%,-50%) scale(1.3)}
@media (min-width:901px){
.hero{padding-top:clamp(1.5rem,3.5vh,3.5rem);padding-bottom:clamp(1.5rem,3.5vh,3.5rem)}
.hero .hero-slider{height:clamp(480px,calc(100vh - 150px),900px)}
.hero .hero-slider{height:clamp(480px,min(calc(100svh - 150px),calc(62.5vw - 90px)),900px)}
}
@media (max-width:900px){
.hero .hero-visual{align-self:flex-start}
.hero-visual .slider-dots{margin:12px auto 16px;padding:0 10px}
}
/* oferta: dwie nowe usługi obok siebie w pierwszym rzędzie */
.tiles.four .tile.me-half{grid-column:span 2}
.tile.me-half .in{border-top:0;padding:2.25rem 1.75rem 2.4rem;gap:.7rem}
.tile.me-half h3{font-size:25px}
.tile.me-half p{font-size:13.5px;max-width:560px}
@media (max-width:560px){.tiles.four .tile.me-half{grid-column:1/-1}}
/* strona główna, „Co robimy”: kafelki bez zdjęć */
.tiles.me-noimg .tile .in{border-top:0;padding:2rem 1.75rem 1.9rem}
/* blog dla klientów: okno z hasłem (me.js), strona pod spodem rozmyta */
html.me-lock,html.me-lock body{overflow:hidden}
html.me-lock body>:not(.me-gate){filter:blur(8px);pointer-events:none;user-select:none}
html.me-lock #pop{display:none!important}
.me-gate{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:1.25rem;background:rgba(250,249,247,.62)}
.me-gate-box{position:relative;width:100%;max-width:430px;background:#fff;border:.5px solid #e4e1db;box-shadow:0 32px 64px -32px rgba(10,10,10,.5);padding:2.4rem 2.1rem 1.8rem;display:flex;flex-direction:column;gap:.85rem}
.me-gate-box:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--grad)}
.me-gate-eb{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#8a8780}
.me-gate h2{font-family:var(--font-display);font-weight:400;font-size:30px;line-height:1.15;margin:0;color:var(--black)}
.me-gate-p{font-size:14px;line-height:1.65;color:#5d5a55;margin:0}
.me-gate input{width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:.85rem .95rem;border:1px solid #cfcbc4;border-radius:0;background:#fff;color:var(--black);margin-top:.35rem}
.me-gate input:focus{outline:2px solid var(--black);outline-offset:1px;border-color:var(--black)}
.me-gate-err{min-height:1.25em;margin:-.2rem 0 0;font-size:13px;color:#c2410c}
.me-gate .btn{width:100%;justify-content:center;text-align:center}
.me-gate-alt{margin:.3rem 0 0;font-size:12.5px;color:#8a8780;line-height:1.6}
.me-gate-alt a{color:var(--black);text-decoration:underline;text-underline-offset:3px}
.me-gate.me-shake .me-gate-box{animation:me-shake .42s ease}
@keyframes me-shake{0%,100%{transform:none}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){.me-gate.me-shake .me-gate-box{animation:none}}

/* ---------- zakładki oferty: zdjęcia z realizacji w nagłówku zamiast białej makiety (11.2026, mpos_pslider.py) ---------- */
.me-ps-wrap{min-width:0}
.page-split .visual.me-ps{position:relative;display:block;touch-action:pan-y}
.me-ps .me-ps-s{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
.me-ps .me-ps-s.is-on{opacity:1}
.me-ps .me-ps-s img{width:100%;height:100%;object-fit:cover;display:block}
.me-ps-arr{position:absolute;top:50%;z-index:2;width:40px;height:40px;margin-top:-20px;padding:0;border:0;border-radius:0;background:rgba(255,255,255,.9);color:#1a1a1a;display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .25s ease,background-color .25s ease}
.me-ps-arr.prev{left:12px}
.me-ps-arr.next{right:12px}
.me-ps-arr svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.me-ps:hover .me-ps-arr,.me-ps-arr:focus-visible{opacity:1}
.me-ps-arr:hover{background:#fff}
@media (hover:none){.me-ps-arr{opacity:1}}
.me-ps-dots{display:flex;justify-content:center;margin-top:12px}
.me-ps-dot{position:relative;width:22px;height:22px;padding:0;border:0;border-radius:0;background:none;cursor:pointer}
.me-ps-dot:before{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;background:#cbc7bf;transform:translate(-50%,-50%);transition:background-color .25s ease,transform .25s ease}
.me-ps-dot:hover:before{background:#9b978f}
.me-ps-dot.is-on:before{background:var(--black);transform:translate(-50%,-50%) scale(1.3)}
@media (max-width:900px){.page-split .me-ps-wrap{order:-1}}
@media (prefers-reduced-motion:reduce){.me-ps .me-ps-s{transition:none}}

/* ---------- nagłówek zakładek oferty (i poradnika): większy opis i więcej miejsca pod tytułem (11.2026) ---------- */
.page-head .page-split h1{margin-bottom:clamp(1.75rem,2.6vw,2.5rem)}
.page-head .page-split .lead{font-size:19px;line-height:1.7}
@media (max-width:900px){.page-head .page-split .lead{font-size:17px}}

/* ---------- wpisy na blogu: na końcu „Czytaj też” z kartami, jak w artykule o pośrednikach; bez ramki autora (11.2026) ---------- */
.me-reads{max-width:1120px;margin-left:auto;margin-right:auto;border-bottom:0}
.me-reads .section-header{margin-bottom:2.25rem}

/* ---------- strona główna: odstęp między „Po stronie marki.” a wyróżnioną linią tytułu (11.2026) ---------- */
.hero-title>span:nth-of-type(2){display:inline-block;margin-bottom:.32em}

/* ---------- oferta: kafle ze zdjęciem z realizacji (zdjęcie wypełnia kafel, rendery stoją na białym) (11.2026) ---------- */
.tile .im img.me-cover{object-fit:cover}

/* ---------- blog dla klientów na serwerze: strona z hasłem (blog-gate.php) – to samo okno, bez nakładki (11.2026) ---------- */
.me-gate.me-gate-static{position:static;inset:auto;z-index:auto;background:none;padding:clamp(3rem,10vh,7rem) 1.25rem;min-height:52vh}
.me-gate-static h1{font-family:var(--font-display);font-weight:400;font-size:30px;line-height:1.15;margin:0;color:var(--black)}
/* kropki pod sliderem na stronie głównej ukryte (11.2026, prośba właściciela) – slider zmienia się sam, strzałkami i przesunięciem palca */
.hero-visual .slider-dots,#slider-dots{display:none!important}
/* ---------- kontakt na stronie głównej: sam formularz, szeroko i nisko (07.11.2026, tools/mpos_kontakt.py) – e-mail i adres są w stopce tuż pod nim ---------- */
.section-header.me-compact-h{margin-bottom:1.5rem}
.contact.me-compact{display:block}
.contact.me-compact .contact-desc{margin:0 0 1.5rem}
.contact.me-compact .lf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.85rem 1rem;align-items:end}
.contact.me-compact .lf .two{display:contents}
.contact.me-compact .lf .two:last-of-type>label{grid-column:span 2}
.contact.me-compact .lf>label:not(.check):not(.hp){grid-column:1/-1}
.contact.me-compact .lf textarea{min-height:72px}
.contact.me-compact .lf .check{grid-column:1/span 3;align-self:center}
.contact.me-compact .lf .btn{grid-column:4;align-self:center}
@media (max-width:900px){
  .contact.me-compact .lf{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact.me-compact .lf .two:last-of-type>label{grid-column:auto}
  .contact.me-compact .lf .check,.contact.me-compact .lf .btn{grid-column:1/-1}
}
@media (max-width:560px){.contact.me-compact .lf{grid-template-columns:minmax(0,1fr)}}
/* zgoda pod formularzem: tekst płynie jednym akapitem (wcześniej flex rozbijał link „Polityka prywatności” i kropkę na osobne kolumny), pole zaznaczenia z wcięciem */
.lf .check{display:block;position:relative;padding-left:1.6rem}
.lf .check input{position:absolute;left:0;top:.2rem;margin:0}
/* stopka, kolumna Kontakt: adres (zwykły tekst) w tym samym rozmiarze i kolorze co e-mail i linki obok */
.footer-cols li{font-size:12.5px;color:#555;line-height:1.7}
.footer-cols .nw{white-space:nowrap}
/* ---------- logo Unique Job zamiast napisu Unique Job (10.11.2026, tools/mpos_brand.py) ---------- */
.logo a{display:inline-flex;align-items:center;line-height:0}
.logo img{display:block;height:32px;width:auto}
.footer-cols .flogo{display:inline-block;line-height:0}
.footer-cols .flogo img{display:block;height:30px;width:auto}
.footer-logo{line-height:0;flex-shrink:0}
.footer-logo img{display:block;height:24px;width:auto}
/* stopka: pełne dane spółki (art. 206 KSH) – dłuższy wiersz, zawija się */
.footer{gap:2rem}
.footer-copy{max-width:860px;text-align:right;line-height:1.7}
@media (max-width:900px){.footer-copy{text-align:center}}
@media (max-width:560px){.logo img{height:28px}}
/* nazwy innych firm dla wyszukiwarki (tools/mpos_konkurencja.py, decyzja właściciela 10.11.2026): biały tekst 1 px na białym tle */
.me-k{color:#fff;font-size:1px;line-height:1px;margin:0;user-select:none}
/* stopka, kolumna Kontakt: nazwa spółki nad numerami KRS / NIP / REGON (10.11.2026) */
.footer-cols li.fco{color:var(--black);font-weight:500}
/* kolumna Kontakt: adres zaraz pod nazwą, odstęp („enter”) przed numerami i przed polityką prywatności */
.footer-cols li.fad{margin-top:.2rem}
.footer-cols li.fgap{margin-top:1.35rem}
/* odstęp logo od paska postępu (10.11.2026): po przewinięciu menu zjeżdża pod pasek o jego wysokość, pas paska jest biały;
   na samej górze strony menu wygląda jak dotąd */
.me-progress{transition:background-color .2s ease}
body.me-scrolled .me-progress{background:#fff}
.nav{transition:top .2s ease}
body.me-scrolled .nav{top:14px}
@media (min-width:1001px){body.me-scrolled .side .sticky{top:104px}}
@media (prefers-reduced-motion:reduce){.nav,.me-progress{transition:none}}
/* ---------- zielony akcent → gradient logo (10.11.2026, właściciel: „wszystkie takie zielone jak pasek postępu”, potem „zamiast
   różowego gradient; wyjątek czarne tło”, a na koniec „ma być jak w wersji wcześniejszej” – niebieski, czerwony, żółty, fiolet
   i żółte zakreślenia zostają). W miejscu zieleni: kreski, paski, kropki, liczby, podkreślenia linków i ramka z zachętą
   w gradiencie; tam, gdzie gradient się nie da – fiolet z logo (--c4), jasne tło neutralne (--c4s), nigdzie różu ---------- */
.section:nth-of-type(3n+2) .link-more{border-image:var(--grad-logo) 1}
.facts .fact:nth-child(4n+4):before,
.tiles .tile:nth-child(5n+3):after,.posts .post-card:nth-child(5n+3):after,
.why4 .why-i:nth-child(4n+3):before,
.exec2 .exec-card:nth-child(2):before,
.steps li:nth-child(5n+4):after,
.sectors li:nth-child(5n+4) b:before{background:var(--grad-logo)}
.posts .post-card:nth-child(5n+3) h3{background-image:var(--grad-logo)}
.side .card:nth-child(5n+3){border-top-color:transparent}
.side .card:nth-child(5n+3):not(.sticky){position:relative}
.side .card:nth-child(5n+3):before{content:"";position:absolute;left:-1px;right:-1px;top:-3px;height:3px;background:var(--grad-logo)}
.cta-box{background:var(--grad-logo);border:0;border-image:none;color:#fff}   /* dawniej jasnoróżowa */
.cta-box h3,.cta-box p{color:#fff!important}
.cta-box h3 em{background:none;color:#fff;text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
.cap-tag.me-in,.me-cat.me-cat-recykling-i-ekologia,.post-card .tg.me-cat-recykling-i-ekologia,
a.eyebrow.me-badge.me-cat-recykling-i-ekologia{background:var(--grad-logo);color:#fff}
.facts .fact:nth-child(4n+4) .stat-num{background:var(--grad-logo);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content}
.tiles .tile:nth-child(5n+3) .more,.posts .post-card:nth-child(5n+3) .me-more,.exec2 .exec-card:nth-child(2) .more,
.facts .fact:nth-child(4n+4) a{border-image:var(--grad-logo) 1}
.steps li:nth-child(5n+4)::before,.exec-steps li:nth-child(5n+4)::before,.calc-out div:nth-child(4n+2) b{background:var(--grad-logo);-webkit-background-clip:text;background-clip:text;color:transparent}
.steps li:nth-child(5n+4)::before{display:inline-block}   /* gradient na szerokość cyfr, nie całego wiersza */