@font-face{font-family:"Chakra Petch";font-weight:700;font-display:swap;src:url("../fonts/chakra-petch-700-full.woff2") format("woff2")}
@font-face{font-family:"Chakra Petch";font-weight:600;font-display:swap;src:url("../fonts/chakra-petch-600-full.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:400;font-display:swap;src:url("../fonts/hanken-grotesk-400-full.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:500;font-display:swap;src:url("../fonts/hanken-grotesk-500-full.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:700;font-display:swap;src:url("../fonts/hanken-grotesk-700-full.woff2") format("woff2")}
@font-face{font-family:"Noto Sans JP";font-weight:700;font-display:swap;src:url("../fonts/noto-sans-jp-neko.woff2") format("woff2");unicode-range:U+732B}

:root{
  --sumi-dark:#0E262C;--sumi:#14343B;--washi:#F5EFE0;--white:#FFFFFF;--amber:#E8A13D;--amber-hi:#F2B85E;
  --haiiro:#5F6E72;--hairline:#D9D2BD;--washi-92:#E9E3D6;
  /* Przygaszony tekst NA CIEMNYM tle. --haiiro jest zaprojektowany na jasne (na washi
     daje 4,62:1 i jest OK), ale na sumi-dark spada do 2,97:1 - poniżej minimum 4,5:1,
     czyli dane spółki w stopce były realnie nieczytelne. Ten token daje 6,62:1:
     czyta się, a nadal jest wyraźnie drugoplanowy wobec washi-92 (12,33:1).
     NIE używać --haiiro na sumi/sumi-dark - od tego jest ten. */
  --haiiro-dark:#9FAAAC;
  --ease:cubic-bezier(.16,1,.3,1);--wrap:1180px;--gut:clamp(1.25rem,5vw,3.5rem);
}
@property --c{syntax:"<length>";inherits:false;initial-value:0px}
*{margin:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--washi);color:var(--sumi);font-family:"Hanken Grotesk",system-ui,sans-serif;
  font-size:clamp(1rem,.97rem+.15vw,1.0625rem);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;cursor:none}
@media (pointer:coarse){body{cursor:auto}}
/* body{cursor:none} nie moze zabierac belki wstawiania w polach formularza (punkt konwersji) */
input,textarea,select,[contenteditable]{cursor:auto}
input:not([type]),input[type="text"],input[type="email"],input[type="tel"],input[type="url"],input[type="search"],input[type="number"],input[type="password"],input[type="date"],input[type="time"],textarea,[contenteditable]:not([contenteditable="false"]){cursor:text}
select,input[type="checkbox"],input[type="radio"],input[type="file"],input[type="range"],input[type="color"],input[type="submit"],input[type="reset"],input[type="button"]{cursor:pointer}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:"Chakra Petch";font-weight:700;line-height:1.04;letter-spacing:-.015em;text-wrap:balance}
.amber{color:var(--amber)}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.eyebrow{font-family:"Chakra Petch";font-weight:600;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--haiiro)}
.lead{font-size:clamp(1.08rem,1.4vw,1.32rem);line-height:1.55;color:var(--haiiro)}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

/* cięcia */
/* Ścięcie 45° na WSPÓLNYM selektorze, nie tylko na .cut. Wcześniej clip-path siedział
   w regule .cut, a .cut-lg/.cut-sm ustawiały samo --c - więc element z klasą „cut-lg" BEZ
   „cut" nie był w ogóle przycinany. Dotyczyło to 9 miejsc, w tym KAŻDEJ karty CTA, panelu
   procesu, modułu demo i hero wpisu blogowego: sygnatura marki znikała dokładnie tam, gdzie
   jest najbardziej widoczna. Reguła zgrupowana leżała w assets/css/base.css, ale ten arkusz
   nie jest kolejkowany (inc/enqueue.php ładuje wyłącznie kot-czuwa.css i style.css). */
.cut,.cut-sm,.cut-lg{clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.cut{--c:20px}
.cut-lg{--c:44px}
.cut-sm{--c:10px}

/* przyciski */
.btn{--c:10px;position:relative;z-index:0;display:inline-flex;align-items:center;gap:.55em;padding:.9em 1.6em;
  font-family:"Chakra Petch";font-weight:600;color:var(--sumi);
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)));
  transition:transform .3s var(--ease),background-color .3s var(--ease),--c .3s var(--ease)}
.btn--amber{background:var(--amber)}.btn--amber:hover{background:var(--amber-hi);transform:translateY(-2px);--c:14px}
.btn--ghost{color:var(--washi);background:transparent}
.btn--ghost::before,.btn--ghost::after{content:"";position:absolute;z-index:-1;
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.btn--ghost::before{inset:0;background:rgba(245,239,224,.5)}.btn--ghost::after{inset:1.5px;background:var(--sumi-dark)}
.btn--ghost:hover{color:var(--sumi);transform:translateY(-2px)}.btn--ghost:hover::after{background:var(--amber)}
.btn--ink{color:var(--washi);background:var(--sumi)}.btn--ink:hover{background:var(--sumi-dark);transform:translateY(-2px);--c:14px}
.ar{transition:transform .3s var(--ease)}.btn:hover .ar,.arrowlink:hover .ar{transform:translateX(4px)}
.arrowlink{display:inline-flex;align-items:center;gap:.45em;font-family:"Chakra Petch";font-weight:600;color:var(--sumi)}
.arrowlink:hover{color:var(--amber)}

/* kursor-łapka */
.cursor{position:fixed;top:0;left:0;z-index:500;width:24px;height:24px;margin:-12px 0 0 -12px;pointer-events:none;opacity:0;
  transition:opacity .3s var(--ease);will-change:transform}
.cursor g ellipse,.cursor g path{fill:var(--amber)}
@media (pointer:coarse){.cursor{display:none}}

/* NAV */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;gap:2rem;
  padding:1rem var(--gut);transition:background-color .35s var(--ease),box-shadow .35s var(--ease)}
.nav.is-scrolled{background:rgba(245,239,224,.9);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--hairline)}
.logo__svg{height:46px;width:auto}.logo__svg path{fill:var(--washi);transition:fill .35s var(--ease)}
.nav.is-scrolled .logo__svg path{fill:var(--sumi)}
.nav__links{margin-left:auto;display:flex;gap:1.9rem}
.nav__links a{font-family:"Chakra Petch";font-weight:600;font-size:1rem;color:var(--washi);opacity:.9;position:relative;padding:.2em 0;transition:color .35s}
.nav.is-scrolled .nav__links a{color:var(--sumi)}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--amber);transition:width .3s var(--ease)}
.nav__links a:hover::after{width:100%}
.nav__cta{font-size:.95rem;padding:.72em 1.35em}
@media (max-width:980px){.nav__links{display:none}}

/* HERO (pełnoekranowy ciemny - jedyny full-bleed) */
.hero{position:relative;background:var(--sumi-dark);color:var(--washi);min-height:96svh;display:flex;align-items:flex-end;overflow:hidden;
  padding:9rem 0 clamp(5rem,10vh,8rem)}
.hero__canvas{position:absolute;inset:0;z-index:0}
.hero__wm{position:absolute;right:-.14em;bottom:-.24em;z-index:0;font-family:"Noto Sans JP";font-weight:700;line-height:.8;
  font-size:min(96vh,70vw);color:var(--washi);opacity:.055;pointer-events:none}
.hero .wrap{position:relative;z-index:2;width:100%;max-width:1560px}
.hero__h1{font-family:"Chakra Petch";font-weight:700;font-size:clamp(2.9rem,8.4vw,7.2rem);line-height:.98;letter-spacing:-.015em;color:var(--washi);margin-bottom:1.6rem}
.hero__lead{font-size:clamp(1.1rem,1.5vw,1.4rem)}
.line{display:block;overflow:hidden;padding-block:.02em}.line>i{display:inline-block;font-style:normal}
.js .line>i{transform:translateY(120%)}
/* bez JS nic nie wjezdza, wiec maska nie jest potrzebna - inaczej przycina descendery */
html:not(.js) .line{overflow:visible}
.is-loaded .line>i{transition:transform .9s var(--ease);transform:none}
.is-loaded .line:nth-child(1)>i{transition-delay:.28s}.is-loaded .line:nth-child(2)>i{transition-delay:.42s}
.wsleep{position:relative;white-space:nowrap}
.wsleep svg{position:absolute;left:-2%;bottom:-.16em;width:104%;height:.4em;overflow:visible}
.wsleep path{stroke:var(--amber);stroke-width:6;fill:none;stroke-linecap:round;stroke-dasharray:220}
.js .wsleep path{stroke-dashoffset:220}
.is-loaded .wsleep path{transition:stroke-dashoffset .7s var(--ease) 1.1s;stroke-dashoffset:0}
.hero__lead{font-weight:500;color:var(--washi-92);max-width:44ch;margin-bottom:2rem}
.js .hero__lead{opacity:0;transform:translateY(14px)}
.is-loaded .hero__lead{transition:opacity .8s var(--ease) .9s,transform .8s var(--ease) .9s;opacity:1;transform:none}
.hero__cta{display:flex;gap:.9rem;flex-wrap:wrap}
.js .hero__cta{opacity:0;transform:translateY(14px)}
.is-loaded .hero__cta{transition:opacity .8s var(--ease) 1.05s,transform .8s var(--ease) 1.05s;opacity:1;transform:none}
.hero__foot{display:flex;align-items:center;gap:clamp(1rem,3vw,2rem);flex-wrap:wrap;margin-top:clamp(1.8rem,4vh,2.6rem);padding-top:1.4rem;border-top:1px solid rgba(217,210,189,.2)}
.js .hero__foot{opacity:0;transform:translateY(14px)}
.is-loaded .hero__foot{transition:opacity .8s var(--ease) 1.2s,transform .8s var(--ease) 1.2s;opacity:1;transform:none}
.hero__legend{font-family:"Chakra Petch";font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--haiiro)}
.hero__trail{height:clamp(44px,5vw,54px);width:auto;overflow:visible}
.hero__goal{transform-box:fill-box;transform-origin:center;animation:heropaw 3.4s var(--ease) 2s infinite}
@keyframes heropaw{0%,80%,100%{filter:brightness(1)}88%{filter:brightness(1.22)}}

/* PROBLEM - na washi, ciemna karta WYSTAJE w górę nad hero */
.problem{position:relative;padding:0 0 clamp(3rem,7vw,6rem)}
.problem__card{position:relative;z-index:5;margin-top:clamp(-5rem,-6vw,-3rem);margin-left:auto;max-width:640px;
  background:var(--sumi);color:var(--washi);padding:clamp(1.8rem,3vw,2.6rem)}
.problem__card .eyebrow{color:var(--amber)}
.problem__card h2{font-size:clamp(1.5rem,2.6vw,2.1rem);color:var(--washi);margin:.6rem 0}
.problem__card p{color:var(--washi-92)}
.problem__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start;
  padding-top:clamp(2.5rem,5vw,4rem)}
.problem__lead h2{font-size:clamp(1.8rem,3.4vw,2.8rem)}
.steps{display:flex;flex-direction:column;gap:1.1rem}
.step{display:flex;gap:.9rem;align-items:flex-start}
.step:nth-child(2){margin-left:2rem}.step:nth-child(3){margin-left:4rem}
.step__eye{flex:none;width:14px;margin-top:.35em}.step__eye path{fill:var(--amber)}
.step b{font-family:"Chakra Petch";font-weight:600}
@media (max-width:820px){.problem__grid{grid-template-columns:1fr}.step:nth-child(2),.step:nth-child(3){margin-left:0}}

/* SERVICES - biały PAS na całą szerokość (inny niż washi), indeks 01-06 */
.services{background:var(--white);position:relative;z-index:3;padding:clamp(3.5rem,7vw,6rem) 0}
.services__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:2.5rem;flex-wrap:wrap}
.services__head h2{font-size:clamp(1.8rem,3.6vw,3rem)}
.idx{border-top:1px solid var(--hairline)}
.idx__row{display:grid;grid-template-columns:auto 1fr auto auto;gap:clamp(1rem,3vw,2.5rem);align-items:center;
  padding:clamp(1.1rem,2.2vw,1.7rem) 0;border-bottom:1px solid var(--hairline);position:relative;cursor:pointer;
  transition:padding-left .35s var(--ease)}
.idx__row:hover{padding-left:1.2rem}
.idx__num{font-family:"Chakra Petch";font-weight:700;font-size:clamp(1.4rem,2.4vw,2rem);color:var(--haiiro);
  position:relative;width:1.7em;transition:color .35s var(--ease)}
.idx__num::after{content:"";position:absolute;right:-.15em;top:50%;transform:translateY(-50%) scaleX(0);
  width:.16em;height:1.1em;background:var(--amber);border-radius:2px;transition:transform .35s var(--ease)}
.idx__row:hover .idx__num{color:var(--sumi)}.idx__row:hover .idx__num::after{transform:translateY(-50%) scaleX(1)}
.idx__title{font-family:"Chakra Petch";font-weight:600;font-size:clamp(1.1rem,2vw,1.5rem)}
.idx__desc{color:var(--haiiro);max-width:34ch;font-size:.98rem}
.idx__go{color:var(--haiiro);transition:transform .35s var(--ease),color .35s}
.idx__row:hover .idx__go{color:var(--amber);transform:translateX(5px)}
@media (max-width:760px){.idx__row{grid-template-columns:auto 1fr auto}.idx__desc{display:none}}

/* PROCESS - ciemny panel WYDZIELONY (nie full-width), nachodzi na sąsiadów; trop rysuje się scrollem */
.process{position:relative;padding:clamp(2rem,5vw,4rem) 0}
.process__panel{position:relative;z-index:4;margin-top:clamp(-3rem,-4vw,-2rem);background:var(--sumi-dark);color:var(--washi);
  padding:clamp(2.2rem,4vw,3.4rem) clamp(1.5rem,4vw,3rem) clamp(3rem,5vw,4rem)}
.process__panel .eyebrow{color:var(--amber)}
.process__panel h2{color:var(--washi);font-size:clamp(1.8rem,3.4vw,2.7rem);margin:.5rem 0 2.2rem;max-width:18ch}
.trail{position:relative;width:100%}
.trail svg{width:100%;height:auto;overflow:visible}
.trailline{stroke:var(--amber);stroke-width:2;fill:none;stroke-dasharray:1;stroke-dashoffset:1;opacity:.5}
.trailpaw{opacity:0;transform-box:fill-box;transform-origin:center;transform:translateY(6px) scale(.8);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.trailstops{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1.4rem}
.tstop{opacity:.35;transition:opacity .4s var(--ease)}
.tstop.on{opacity:1}
.tstop .k{font-family:"Chakra Petch";font-weight:600;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.tstop h3{color:var(--washi);font-size:clamp(1.05rem,1.7vw,1.3rem);margin:.3rem 0}
.tstop p{color:var(--washi-92);font-size:.95rem}
.process__note{margin-top:2rem;color:var(--washi-92);max-width:60ch}
@media (max-width:760px){.trailstops{grid-template-columns:1fr 1fr;gap:1.4rem}}

/* WHY - ciemny pas pełnej szerokości, ale watermark-słowo WYSTAJE poza krawędź; oczy wracają */
.why{position:relative;background:var(--sumi);color:var(--washi);overflow:hidden;padding:clamp(4rem,8vw,7rem) 0}
.why__canvas{position:absolute;inset:0;z-index:0}
.why__word{position:absolute;left:-3vw;bottom:-2vw;z-index:0;font-family:"Chakra Petch";font-weight:700;
  font-size:clamp(6rem,18vw,15rem);color:var(--washi);opacity:.05;white-space:nowrap;pointer-events:none}
.why .wrap{position:relative;z-index:2}
.why h2{color:var(--washi);font-size:clamp(1.9rem,3.8vw,3rem);max-width:16ch;margin-bottom:2.5rem}
.tryptych{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.pillar{padding:0 clamp(1rem,2.5vw,2rem);position:relative}
.pillar+.pillar{border-left:1px solid rgba(245,239,224,.16)}
.pillar h3{color:var(--washi);font-size:clamp(1.2rem,2vw,1.5rem);margin-bottom:.5rem}
.pillar p{color:var(--washi-92)}
.tech{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem;margin-top:3rem;padding-top:1.6rem;border-top:1px solid rgba(245,239,224,.14)}
.tech span:first-child{color:var(--washi-92);font-size:.9rem}
.tech b{font-family:"Chakra Petch";font-weight:600;opacity:.6;transition:opacity .3s;margin-left:.2rem}
.tech b:hover{opacity:1}
@media (max-width:820px){.tryptych{grid-template-columns:1fr;gap:1.6rem}.pillar+.pillar{border-left:none;border-top:1px solid rgba(245,239,224,.16);padding-top:1.6rem}}

/* DEMO - washi, split, okno WYSTAJE w górę nad why */
.demo{position:relative;padding:clamp(3.5rem,7vw,6rem) 0}
.demo__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.demo__win{position:relative;z-index:6;margin-top:clamp(-6rem,-7vw,-3rem);background:var(--white);border:1px solid var(--hairline);
  min-height:300px;display:grid;place-items:center;padding:2rem}
.demo__win .muted{color:var(--haiiro)}
.demo h2{font-size:clamp(1.8rem,3.4vw,2.7rem);margin-bottom:1rem}
@media (max-width:820px){.demo__grid{grid-template-columns:1fr}.demo__win{margin-top:0}}

/* ABOUT - washi, cytat editorial off-center */
.about{padding:clamp(3rem,6vw,5rem) 0}
.about__q{max-width:52ch}
.about__q .whisk{width:56px;margin-bottom:1.2rem}.about__q .whisk path{stroke:var(--sumi);stroke-width:4;fill:none;stroke-linecap:round}
.about__q p{font-family:"Chakra Petch";font-weight:600;font-size:clamp(1.4rem,2.8vw,2.1rem);line-height:1.3}

/* CTA - ciemna karta WYSTAJE w dół, nachodzi na stopkę */
.ctaband{position:relative;padding-top:clamp(2rem,5vw,4rem)}
.ctacard{position:relative;z-index:7;background:var(--sumi);color:var(--washi);padding:clamp(2.4rem,4vw,3.6rem);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(-5rem,-6vw,-3rem)}
.ctacard h2{color:var(--washi);font-size:clamp(1.6rem,3vw,2.4rem);max-width:20ch}
.ctacard__goal{width:40px}.ctacard__goal g{fill:var(--amber)}
.ctacard__right{display:flex;align-items:center;gap:1.2rem}

/* FOOTER */
.footer{position:relative;background:var(--sumi-dark);color:var(--washi);padding:clamp(7rem,10vw,9rem) 0 2.5rem;overflow:hidden}
.footer__eyes{position:absolute;inset:0;z-index:0;opacity:.5;background-repeat:repeat;background-size:560px auto}
.footer .wrap{position:relative;z-index:2}
.footer__top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2rem}
.footer__logo{height:40px}.footer__logo path{fill:var(--washi)}
.footer__top p{color:var(--washi-92);margin-top:.8rem;max-width:32ch}
/* Dane rejestrowe: drugoplanowe, ale czytelne. Wcześniej stał tu inline'owy
   color:var(--haiiro) w footer.php, który nadpisywał regułę wyżej i dawał 2,97:1. */
.footer__legal{color:var(--haiiro-dark);font-size:.85rem;margin-top:.6rem}
.footer__h{font-family:"Chakra Petch";font-weight:600;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--haiiro-dark);margin:0 0 .8rem}
.footer__col a{display:block;color:var(--washi-92);padding:.2rem 0}.footer__col a:hover{color:var(--amber)}
/* Profile social - ikony zamiast nazw. Trzy nazwy obok siebie czytały się jak lista
   podstron; znak platformy rozpoznaje się bez czytania.
   To OFICJALNE znaki platform, nie nasze ikony - dlatego pełne wypełnienie, a nie
   brandbookowa linia 2 px (s.07 dotyczy własnego zestawu Neko).
   Padding daje pole dotyku ~40 px przy ikonie 22 px; ujemny margines kompensuje go
   w pionie, żeby ikony stały w tej samej osi co tekst wyżej. */
.footer__social{margin-top:1.8rem}
.footer__social .footer__h{margin-bottom:.45rem}
.footer__social-links{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin-left:-.55rem}
.footer__social-links a{display:inline-flex;padding:.55rem;color:var(--washi-92);
  transition:color .3s var(--ease),transform .3s var(--ease)}
.footer__social-links a:hover{color:var(--amber);transform:translateY(-2px)}
.footer__social-ic{width:22px;height:22px;display:block;fill:currentColor}
.footer__bottom{display:flex;gap:1.2rem;align-items:center;margin-top:3rem;padding-top:1.4rem;border-top:1px solid rgba(245,239,224,.14);
  font-size:.9rem;color:var(--washi-92);flex-wrap:wrap}
.footer__kanji{font-family:"Noto Sans JP";font-weight:700;color:var(--amber);opacity:.8}
@media (max-width:820px){.footer__top{grid-template-columns:1fr;gap:1.6rem}}

/* REVEAL */
/* Bezpiecznik: gdyby kot-czuwa.js się nie wczytał, klasa .in nigdy nie przyjdzie
   i treść zostałaby niewidoczna na stałe. Animacja po 4 s odsłania ją bez JS-a;
   przy normalnym działaniu skryptu .in gasi ją wcześniej (animation:none). */
[data-reveal]{transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js [data-reveal]{opacity:0;transform:translateY(26px);animation:neko-reveal-failsafe 0s linear 10s forwards}
/* Skrypt, gdy tylko wystartuje, ZDEJMUJE zabezpieczenie - inaczej po 4 s odsłaniałoby
   wszystko poniżej pierwszego ekranu i użytkownik, który czyta dłużej, straciłby
   animację wejścia na całej reszcie strony. Klasę `reveal-js` nadaje kot-czuwa.js
   w pierwszej linii; jeśli skrypt nie dojedzie, klasa nie powstaje i zabezpieczenie działa. */
/* Bezpiecznik NIE jest już wyłączany globalnie. Zmierzone na żywo: w oknie 9000 px
   bez scrolla - a tak renderuje Googlebot - 25 z 33 bloków zostawało na opacity:0.
   Tekst i tak jest w DOM i zostanie zaindeksowany, ale strona oceniana wizualnie
   wyglądała na pustą. Element, który dostał .in, ma animation:none linijkę niżej,
   więc bezpiecznik dotyka wyłącznie tego, czego scroll nie odsłonił.
   10 s zamiast 4 s: realny czytelnik zdąży przewinąć i zobaczy efekt wejścia,
   a renderer i osoba, która zostawiła kartę otwartą, dostaną treść zamiast pustki. */
[data-reveal].in{opacity:1;transform:none;animation:none}
@keyframes neko-reveal-failsafe{to{opacity:1;transform:none}}
[data-reveal-d="1"]{transition-delay:.08s}[data-reveal-d="2"]{transition-delay:.16s}[data-reveal-d="3"]{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1!important;transform:none!important}
  .line>i,.hero__lead,.hero__cta,.hero__foot,.logo,.wsleep path{opacity:1!important;transform:none!important;stroke-dashoffset:0!important}
  .hero__goal{animation:none!important}
  .marquee__track{animation:none!important}
  body{cursor:auto}.cursor{display:none}
}

/* ================= WZBOGACENIA: styl brandbook + animacje ================= */
/* ścięcia na pasach/panelach (PG+LD) */
.services,.contactpanel{clip-path:polygon(0 var(--c),0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 100%);--c:44px}
/* reveal: mocniejsze warianty */
[data-reveal].in{transition-duration:.9s}
[data-reveal="clip"]{transition:clip-path .9s var(--ease)}
.js [data-reveal="clip"]{clip-path:inset(0 0 100% 0);opacity:1;transform:none}
[data-reveal="clip"].in{clip-path:inset(0 0 0 0)}
[data-reveal="scale"]{transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js [data-reveal="scale"]{opacity:0;transform:scale(.96)}
[data-reveal="scale"].in{opacity:1;transform:none}

/* ZAUFALI NAM */
.trusted{padding:clamp(1.8rem,3.5vw,2.8rem) 0;border-block:1px solid var(--hairline)}
.trusted__row{display:flex;align-items:center;gap:2rem;flex-wrap:wrap}
.trusted__label{font-family:"Chakra Petch";font-weight:600;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--haiiro);flex:none}
.marquee{overflow:hidden;flex:1;min-width:220px;-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee__track{display:flex;gap:3.2rem;width:max-content;animation:marq 28s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
/* Za mało logotypów na przewijanie - stoją w miejscu, bez maski wygaszającej brzegi
   (maska przy nieruchomym rzędzie zjadałaby pierwszy i ostatni znak). */
.marquee--stoi{-webkit-mask:none;mask:none;flex:0 1 auto}
.marquee--stoi .marquee__track{animation:none;transform:none;align-items:center}
.marquee b{font-family:"Chakra Petch";font-weight:700;font-size:1.15rem;color:var(--haiiro);opacity:.55;white-space:nowrap;transition:opacity .3s,color .3s}
.marquee b:hover{opacity:1;color:var(--sumi)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ZESPÓŁ */
.team{padding:clamp(3rem,6vw,5rem) 0}
.team__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.6rem);margin-top:2.2rem}
.team__card{--c:18px;position:relative;transition:transform .35s var(--ease),--c .35s var(--ease)}
.team__card:hover{transform:translateY(-6px);--c:26px}
.team__photo{position:relative;aspect-ratio:4/5;background:var(--sumi);display:grid;place-items:center;overflow:hidden;
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.team__photo>svg{width:54%;stroke:rgba(245,239,224,.55);fill:none;stroke-width:4}
.team__eye{position:absolute;right:12px;bottom:12px;width:15px;opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.team__eye path{fill:var(--amber)}
.team__card:hover .team__eye{opacity:1;transform:none}
.team__name{font-family:"Chakra Petch";font-weight:600;font-size:1.05rem;margin-top:.7rem}
.team__role{color:var(--haiiro);font-size:.9rem}
.team__note{color:var(--haiiro);font-size:.85rem;margin-top:1.6rem}
@media (max-width:820px){.team__grid{grid-template-columns:1fr 1fr}}

/* OPINIE */
.testi{padding:clamp(3rem,6vw,5rem) 0}
.testi__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.5vw,2rem);margin-top:2.2rem}
.tcard{--c:20px;position:relative;z-index:0;padding:clamp(1.6rem,2.6vw,2.4rem);transition:transform .35s var(--ease)}
.tcard,.tcard::before,.tcard::after{clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.tcard::before,.tcard::after{content:"";position:absolute;z-index:-1}
.tcard::before{inset:0;background:var(--hairline)}.tcard::after{inset:1px;background:var(--white)}
.tcard:hover{transform:translateY(-4px)}
.tcard .whisk{width:52px;margin-bottom:1rem}.tcard .whisk path{stroke:var(--sumi);stroke-width:4;fill:none;stroke-linecap:round}
.tcard blockquote{font-family:"Chakra Petch";font-weight:600;font-size:clamp(1.1rem,1.7vw,1.35rem);line-height:1.35}
.tcard cite{display:block;margin-top:1rem;font-style:normal;color:var(--haiiro);font-size:.9rem}
@media (max-width:760px){.testi__grid{grid-template-columns:1fr}}

/* KONTAKT */
.contact{padding:clamp(2rem,4vw,3rem) 0 clamp(3rem,6vw,5rem)}
.contactpanel{position:relative;z-index:2;background:var(--white);padding:clamp(2rem,4vw,3.4rem)}
.contact__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.contact h2{font-size:clamp(1.7rem,3.2vw,2.5rem);margin:.4rem 0 1rem}
.contact__info p{color:var(--haiiro);margin-bottom:.5rem}
.contact__info a{color:var(--sumi);text-decoration:underline;text-decoration-color:var(--amber);text-underline-offset:.15em}
.form{display:grid;gap:1rem}.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:flex;flex-direction:column;gap:.35rem}
.field label{font-family:"Chakra Petch";font-weight:600;font-size:.8rem}
.field input,.field textarea{--c:10px;padding:.8em 1em;background:var(--washi);border:1px solid var(--hairline);font:inherit;color:var(--sumi);
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)));transition:border-color .3s,background-color .3s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--amber);background:var(--white)}
.field textarea{min-height:7rem;resize:vertical}
.form__rodo{display:flex;gap:.6rem;align-items:flex-start;font-size:.84rem;color:var(--haiiro)}
.form__rodo input{margin-top:.25rem;accent-color:var(--amber);width:1.1em;height:1.1em;flex:none}
.form__ok{display:none}.form.sent .form__ok{display:block;font-family:"Chakra Petch";font-weight:600;color:var(--sumi)}
.form.sent .form__fields{display:none}
@media (max-width:760px){.contact__grid{grid-template-columns:1fr}.form__row{grid-template-columns:1fr}}

/* dopieszczenia hover */
.pillar{transition:transform .35s var(--ease)}.pillar:hover{transform:translateY(-4px)}
.demo__win{transition:transform .35s var(--ease),--c .35s var(--ease)}.demo__win:hover{transform:translateY(-4px);--c:30px}
.idx__title{transition:color .3s}.idx__row:hover .idx__title{color:var(--sumi)}
/* zespół: bursztynowy pasek na dole zdjęcia + rozjaśnienie sylwetki (zamiast słabego oka) */
.team__eye{display:none!important}
.team__photo::after{content:"";position:absolute;left:0;bottom:0;height:5px;width:100%;background:var(--amber);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.team__card:hover .team__photo::after{transform:scaleX(1)}
.team__card:hover .team__photo>svg{stroke:rgba(245,239,224,.9)}
.team__photo>svg{transition:stroke .35s var(--ease)}
.team__card:hover .team__role{color:var(--amber)}.team__role{transition:color .35s}
/* proces: ruch po najechaniu - kroki unoszą się i zapalają, panel podświetla całą ścieżkę */
.tstop{transition:opacity .4s var(--ease),transform .35s var(--ease)}
.tstop:hover{transform:translateY(-6px)}
.tstop:hover h3{color:var(--amber-hi)}
.tstop h3{transition:color .3s}
.process__panel:hover .tstop{opacity:1}
.trailgoal{transform-box:fill-box;transform-origin:center}
.process__panel:hover .trailgoal{animation:goalpulse 1.6s var(--ease) infinite}
@keyframes goalpulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25)}}

/* ===== Nawigacja: dropdown + mobile + skip-link (motyw WP) ===== */
/* Tekst wyłącznie dla czytnika ekranu - ogólna klasa pomocnicza motywu
   (moduły mają własne aliasy: .ncmp__sr, .psys__sr). */
.crumbs__tu{display:inline-block;max-width:min(42ch,48vw);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;vertical-align:bottom;opacity:.8}
@media (max-width:640px){.crumbs__tu{max-width:22ch}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{position:fixed;top:12px;left:12px;z-index:999;background:var(--amber);color:var(--sumi);padding:.7em 1.1em;font-family:"Chakra Petch";font-weight:600}
.site-main{display:block}
.nav__item--sub{position:relative;display:flex;align-items:center}
.nav__chev{font-size:.7em;display:inline-block;transition:transform .3s var(--ease)}
.nav__item--sub:hover .nav__chev,.nav__item--sub:focus-within .nav__chev{transform:rotate(180deg)}
.nav__sub{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);min-width:250px;background:var(--sumi);padding:.5rem;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .25s var(--ease) .12s,transform .25s var(--ease) .12s,visibility 0s linear .37s;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));box-shadow:0 20px 50px rgba(0,0,0,.35)}
/*
 * Most nad szczeliną między przyciskiem a panelem.
 *
 * Zmierzone: przycisk „Usługi" kończy się na y=55, otwarty panel zaczyna na y=59 -
 * między nimi zostają 4 px, na których kursor nie jest już nad przyciskiem i jeszcze
 * nie nad panelem. Dopóki schodzi się PIONOWO, nic się nie dzieje, bo pozostaje w obrysie
 * przycisku. Ale przycisk ma 59 px szerokości, a panel 250 px, więc sięgając po skosie do
 * pozycji z brzegu listy kursor trafia w to pasmo POZA przyciskiem - :hover pada i menu znika.
 *
 * Mostu NIE da się powiesić na .nav__sub: ten element ma clip-path, który przyciąłby
 * pseudoelement wystający ponad panel. Dlatego most rośnie z .nav__item--sub w dół.
 * Istnieje tylko przy :hover/:focus-within i sam się podtrzymuje - kursor wchodzący
 * na most nadal jest nad elementem, więc stan hover się nie urywa.
 */
.nav__item--sub:hover::after,.nav__item--sub:focus-within::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);width:270px;height:16px}
.nav__item--sub:hover .nav__sub,.nav__item--sub:focus-within .nav__sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(4px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s}
.nav__sub a{padding:.6em .8em!important;font-size:.92rem!important;color:var(--washi)!important;white-space:nowrap}
.nav__sub a::after{display:none}
.nav__sub a:hover{background:rgba(245,239,224,.08);color:var(--amber)!important}
.nav__burger{display:none;position:relative;width:44px;height:44px;background:none;border:0;cursor:pointer;margin-left:.4rem}
.nav__burger span{position:absolute;left:10px;right:10px;height:2px;background:var(--washi);transition:transform .3s var(--ease),opacity .3s}
.nav.is-scrolled .nav__burger span{background:var(--sumi)}
.nav__burger span:nth-child(1){top:17px}.nav__burger span:nth-child(2){bottom:17px}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
.mobile{position:fixed;inset:0;z-index:90;background:var(--sumi-dark);display:flex;flex-direction:column;justify-content:center;gap:.3rem;padding:var(--gut);overflow:hidden}
.mobile[hidden]{display:none}
.mobile__kanji{position:absolute;right:-.12em;bottom:-.18em;font-family:"Noto Sans JP";font-weight:700;font-size:62vw;line-height:.8;color:var(--washi);opacity:.05;pointer-events:none}
.mobile__nav{display:flex;flex-direction:column;gap:.3rem;position:relative;z-index:1}
.mobile__label{font-family:"Chakra Petch";font-weight:600;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--haiiro-dark);margin-top:1rem}
.mobile__nav a{font-family:"Chakra Petch";font-weight:700;font-size:clamp(1.3rem,5.5vw,1.9rem);color:var(--washi)}
.mobile__nav a:hover{color:var(--amber)}
.mobile .btn{align-self:flex-start;position:relative;z-index:1;margin-top:1.4rem}
/* Na mobile znikaja .nav__links, .nav__tel i .nav__cta, a to WLASNIE .nav__links
   nioslo margin-left:auto, ktore spychalo pasek na prawo. Bez tego w flexie zostaja
   tylko logo i hamburger obok siebie z gap 2rem - hamburger ladowal na srodku.
   Auto-margines musi wiec przejac hamburger. */
@media (max-width:980px){.nav__burger{display:block;margin-left:auto}.nav__cta{display:none}}

/* ===== Szablony: strony / blog / artykuł ===== */
:root{--header-h:84px}
.wrap--narrow{max-width:760px}
.center{text-align:center}
.crumbs{font-family:"Chakra Petch";font-weight:600;font-size:.78rem;color:var(--haiiro);margin-bottom:1rem;display:flex;gap:.5rem;flex-wrap:wrap}
.crumbs a{color:var(--haiiro)}.crumbs a:hover{color:var(--amber)}
.pagehero{position:relative;overflow:hidden;background:var(--sumi);padding:calc(var(--header-h) + clamp(2rem,5vw,4rem)) 0 clamp(2rem,4vw,3rem)}
.pagehero--center{min-height:68vh;display:flex;align-items:center}
.pagehero__wm{position:absolute;right:-.1em;bottom:-.25em;font-family:"Noto Sans JP";font-weight:700;font-size:min(60vh,50vw);line-height:.8;color:var(--washi);opacity:.05;pointer-events:none;z-index:0}
.pagehero .wrap{position:relative;z-index:1}
.pagehero .eyebrow{color:var(--amber)}
.pagehero .crumbs,.pagehero .crumbs a{color:rgba(245,239,224,.72)}
.pagehero .crumbs a:hover{color:var(--amber)}
/* .bloghero ma ciemne tło (--sumi) tak samo jak .pagehero, a domyślna szarość
   okruszków (--haiiro) jest na nim nieczytelna. Bez tego nowe okruszki na /blog/
   i na archiwach kategorii byłyby praktycznie niewidoczne. */
.bloghero .crumbs,.bloghero .crumbs a{color:rgba(245,239,224,.72)}
.bloghero .crumbs a:hover{color:var(--amber)}
.pagehero__h1{font-family:"Chakra Petch";font-weight:700;font-size:clamp(2.2rem,5.5vw,4rem);line-height:1.02;letter-spacing:-.015em;color:var(--washi);max-width:20ch}
.pagehero--center .pagehero__h1{max-width:none}
.pagebody{background:var(--washi);padding:clamp(1rem,3vw,2rem) 0 clamp(3rem,6vw,5rem)}
.prose{max-width:70ch;font-size:clamp(1.02rem,1.2vw,1.15rem);line-height:1.75;color:var(--sumi)}
.prose>*+*{margin-top:1.1em}
.prose>*:first-child{margin-top:0}
.prose h2{font-family:"Chakra Petch";font-weight:700;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.15;margin-top:2.2em;letter-spacing:-.01em;scroll-margin-top:100px}
.prose h3{font-family:"Chakra Petch";font-weight:600;font-size:clamp(1.2rem,1.8vw,1.5rem);margin-top:1.6em;scroll-margin-top:100px}
.prose h2+p,.prose h3+p{margin-top:.6em}
.prose ul{list-style:none;padding-left:0}
.prose ul li{position:relative;padding-left:1.6em}
.prose ul li::before{content:"";position:absolute;left:0;top:.6em;width:.5em;height:.8em;background:var(--amber);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.prose ol{list-style:none;counter-reset:n;padding-left:0}
.prose ol li{position:relative;padding-left:2em;counter-increment:n}
.prose ol li::before{content:counter(n);position:absolute;left:0;top:0;font-family:"Chakra Petch";font-weight:700;color:var(--amber)}
.prose li+li{margin-top:.4em}
.prose a{color:var(--sumi);text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:2px;text-underline-offset:.15em}
.prose a:hover{color:var(--amber)}
.prose blockquote{border-left:3px solid var(--amber);padding-left:1.2em;font-family:"Chakra Petch";font-weight:600;font-size:1.12em}
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:80;background:transparent}
.progress span{display:block;height:100%;width:0;background:var(--amber)}
.arthead{position:relative;overflow:hidden;background:var(--sumi);padding:calc(var(--header-h) + clamp(2rem,5vw,4rem)) 0 clamp(1.4rem,3vw,2.2rem)}
.arthead .wrap{position:relative;z-index:1}
.arthead .crumbs,.arthead .crumbs a{color:rgba(245,239,224,.72)}
.arthead .crumbs a:hover{color:var(--amber)}
.badge{display:inline-block;font-family:"Chakra Petch";font-weight:600;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:.8rem}
.arthead__h1{font-family:"Chakra Petch";font-weight:700;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.06;letter-spacing:-.015em;color:var(--washi);max-width:24ch}
.artmeta{margin-top:1rem;color:rgba(245,239,224,.7);font-size:.9rem;font-family:"Chakra Petch";font-weight:600}
.artgrid{background:var(--washi);display:grid;grid-template-columns:230px 1fr;gap:clamp(2rem,5vw,4rem);align-items:start;padding-block:clamp(1.5rem,3vw,2.5rem)}
.toc{position:sticky;top:100px;align-self:start}
.toc__title{font-family:"Chakra Petch";font-weight:700;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--haiiro);display:block;margin-bottom:.8rem}
.toc ul{list-style:none;padding:0;margin:0;border-left:1px solid var(--hairline);display:flex;flex-direction:column}
.toc a{display:block;padding:.4em .9em;color:var(--haiiro);font-size:.88rem;line-height:1.3;border-left:2px solid transparent;margin-left:-1px}
.toc a:hover{color:var(--sumi)}
.toc a.is-active{color:var(--sumi);border-left-color:var(--amber);font-weight:600}
.toc li.lvl-3 a{padding-left:1.6em;font-size:.82rem}
@media (max-width:900px){.artgrid{grid-template-columns:1fr}.toc{position:static;margin-bottom:1.5rem}}
/* Box autora: powiększony 2026-09-10. Awatar 64 -> 96 px (źródło: rozmiar neko-avatar 192 px,
   kadrowany od góry, więc twarz wreszcie wypełnia kadr), padding i odstępy w górę.
   Scalone dwie reguły, które wcześniej stały obok siebie i druga nadpisywała align-items. */
.authorbox{--c:24px;position:relative;z-index:0;display:flex;gap:1.5rem;align-items:flex-start;padding:2rem;margin-top:3rem;background:var(--sumi);color:var(--washi);clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
/* Zdjecie autora dostaje TE SAME sciete narozniki co caly box (prawy gorny i lewy dolny).
   Wlasne --c, nie dziedziczone: box ma 24px przy ~160px wysokosci, a zdjecie ma 96px -
   ten sam promien zjadlby twarz. 14px daje ten sam efekt wizualny w mniejszej skali.
   Ciecie siedzi na kontenerze, wiec obejmuje tez zastepczy sygnet przy braku zdjecia. */
.authorbox__ph{flex:none;width:96px;height:96px;background:var(--sumi-dark);display:grid;place-items:center;overflow:hidden;--c:14px;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.authorbox__ph svg{width:60%}
.authorbox__img{width:96px;height:96px;object-fit:cover;display:block}
.authorbox__label{display:block;font-family:"Chakra Petch";font-weight:700;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:.2rem}
.authorbox strong{font-family:"Chakra Petch";font-weight:600;font-size:1.06rem}
.authorbox__role{font-weight:500;color:var(--washi-92);font-size:.9em}
.authorbox p{color:var(--washi-92);font-size:.95rem;margin-top:.4rem;line-height:1.6;max-width:62ch}
.authorbox__link{display:inline-block;margin-top:.55rem;font-family:"Chakra Petch";font-weight:600;font-size:.85rem;color:var(--amber)}
.authorbox__link:hover{color:var(--amber-hi)}
@media (max-width:520px){.authorbox{flex-direction:column;gap:1.1rem;padding:1.5rem}}
.related{margin-top:3rem}
.related h2{font-family:"Chakra Petch";font-weight:700;font-size:1.5rem;margin-bottom:1.2rem}
.related__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:760px){.related__grid{grid-template-columns:1fr}}
.bloghero{position:relative;overflow:hidden;background:var(--sumi);padding:calc(var(--header-h) + clamp(2.5rem,5vw,4rem)) 0 clamp(1.6rem,3vw,2.6rem)}
.bloghero .wrap{position:relative;z-index:1}
.bloghero .eyebrow{color:var(--amber)}
.bloghero__h1{font-family:"Chakra Petch";font-weight:700;font-size:clamp(2.2rem,5vw,3.6rem);color:var(--washi);letter-spacing:-.015em}
.bloghero .lead{color:var(--washi-92)}
/* 猫 znak wodny na ciemnych hero bloga */
.bloghero::before,.arthead::before{content:"猫";position:absolute;right:-.08em;bottom:-.26em;font-family:"Noto Sans JP";font-weight:700;font-size:min(52vh,44vw);line-height:.8;color:var(--washi);opacity:.05;pointer-events:none;z-index:0}
.bloglist{background:var(--washi);padding:0 0 clamp(3rem,6vw,5rem)}
.pills{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:2rem}
.pill{--c:8px;font-family:"Chakra Petch";font-weight:600;font-size:.85rem;padding:.5em 1em;background:#fff;border:1px solid var(--hairline);color:var(--sumi);clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)));transition:border-color .25s}
.pill:hover{border-color:var(--amber)}
.pill.is-active{background:var(--amber);border-color:var(--amber)}
.postgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media (max-width:900px){.postgrid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.postgrid{grid-template-columns:1fr}}
.postcard{--c:18px;position:relative;z-index:0;display:flex;flex-direction:column;gap:.5rem;padding:1.6rem;color:var(--sumi);text-decoration:none;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)));transition:transform .35s var(--ease),--c .35s var(--ease)}
.postcard::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--hairline);clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.postcard::after{content:"";position:absolute;inset:1px;z-index:-1;background:#fff;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.postcard:hover{transform:translateY(-5px);--c:26px}
.postcard__cat{font-family:"Chakra Petch";font-weight:600;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.postcard__title{font-family:"Chakra Petch";font-weight:600;font-size:1.15rem;line-height:1.2}
.postcard__meta{color:var(--haiiro);font-size:.82rem}
.postcard__ex{color:var(--haiiro);font-size:.92rem}
.postcard__go{margin-top:auto;color:var(--amber);font-size:1.3rem;transition:transform .3s var(--ease)}
.postcard:hover .postcard__go{transform:translateX(5px)}
.pagination .page-numbers{display:inline-block;font-family:"Chakra Petch";font-weight:600;padding:.5em .9em;margin:.2em;background:#fff;border:1px solid var(--hairline);color:var(--sumi)}
.pagination .page-numbers.current{background:var(--amber);border-color:var(--amber)}

/* ===== Header solidny (podstrony) ===== */
.nav--solid{background:rgba(245,239,224,.92);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--hairline)}
.nav--solid .logo__svg path{fill:var(--sumi)}
.nav--solid .nav__links a{color:var(--sumi)}
.nav--solid .nav__burger span{background:var(--sumi)}

/* ===== Grafika główna wpisu + media kart ===== */
/* Zdjęcie główne wpisu. Stoi z boku po prawej i WCHODZI w ciemny nagłówek - ujemny
   margines wyciąga je nad .artgrid, a z-index stawia ponad .arthead (który ma tam tylko
   znak wodny 猫, więc nic nie zasłania). Bez podpisu: to zdjęcie główne, nie ilustracja.
   Poniżej 900 px float i nachodzenie znikają - przy jednej kolumnie oblewanie nie ma sensu,
   a wjazd na nagłówek przykryłby tytuł. */
/* Gdy wpis MA zdjęcie, nagłówek dostaje zapas na dole - zdjęcie wchodzi w ten zapas,
   a nie na linię meta (bez tego przykrywało nazwisko autora). Bez zdjęcia nic się nie zmienia. */
.arthead--foto{padding-bottom:clamp(5.5rem,10vw,9rem)}
@media (max-width:900px){.arthead--foto{padding-bottom:clamp(1.4rem,3vw,2.2rem)}}

.prose>.artlede,.artlede{--c:28px;position:relative;z-index:3;float:right;
  width:min(46%,460px);height:auto;display:block;
  margin:clamp(-8.5rem,-11vw,-4.5rem) 0 1.8rem 2.4rem;
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
@media (max-width:900px){.prose>.artlede,.artlede{float:none;width:100%;margin:0 0 1.6rem;z-index:auto}}

/* [neko_img class="bok"] - ilustracja z boku, opływana tekstem. Ten sam gest co zdjęcie
   główne, ale z podpisem i mniejsza. Przyjmuje zdjęcie, zrzut ekranu i wygenerowaną grafikę. */
.imgslot--bok{float:right;width:min(44%,380px);margin:.3rem 0 1.4rem 2.2rem}
@media (max-width:900px){.imgslot--bok{float:none;width:100%;margin:0 0 1.5rem}}

.artmedia{margin:0;width:100%;aspect-ratio:16/7;overflow:hidden;background:var(--sumi-dark);position:relative}
.artmedia__img{width:100%;height:100%;object-fit:cover;display:block}
.artmedia__ph{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
.artmedia__ph span{font-family:"Noto Sans JP";font-weight:700;font-size:min(46vh,34vw);line-height:.8;color:var(--amber);opacity:.12}
.postcard__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--sumi-dark);--c:10px;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)));margin-bottom:.4rem}
.postcard__img{width:100%;height:100%;object-fit:cover;display:block}
.postcard__ph{position:absolute;inset:0;display:grid;place-items:center;font-family:"Noto Sans JP";font-weight:700;font-size:3.4rem;color:var(--amber);opacity:.28}

/* ===== Komponenty treści (blog / usługi) ===== */
.prose blockquote{--c:16px;position:relative;border:0;margin-block:1.8em;padding:1.5rem 1.8rem;background:#fff;font-family:"Chakra Petch";font-weight:600;font-size:clamp(1.15rem,1.8vw,1.45rem);line-height:1.35;color:var(--sumi);clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.prose blockquote::before{content:"";position:absolute;left:0;top:1.5rem;bottom:1.5rem;width:4px;background:var(--amber)}
.prose blockquote p{margin:0}
.prose blockquote cite{display:block;margin-top:.7rem;font-family:"Hanken Grotesk";font-style:normal;font-weight:500;font-size:.9rem;color:var(--haiiro)}
.callout{--c:14px;margin-block:1.8em;padding:1.2rem 1.4rem;background:#fff;border-left:4px solid var(--amber);clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.callout>strong,.callout__label{display:block;font-family:"Chakra Petch";font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin:0 0 .4rem}
.callout p{margin:0 0 .5rem;color:var(--sumi)}.callout p:last-child{margin-bottom:0}
.callout ul,.callout ol{margin:.3rem 0 0;padding-left:1.2em;color:var(--sumi)}
.callout ul li,.callout ol li{margin:.25em 0}
.callout--info{border-left-color:var(--sumi)}.callout--info>strong,.callout--info .callout__label{color:var(--sumi)}
.callout--warn{border-left-color:var(--amber);background:#fbf4e8}.callout--warn>strong,.callout--warn .callout__label{color:var(--sumi)}
/* Element siatki ma domyślnie min-width:auto i nie kurczy się poniżej szerokości
   zawartości - dlatego overflow-x na samej tabeli nie działał i szeroka tabela
   rozpychała całą kolumnę. Zmierzone: 7 z 10 wpisów miało poziome przepełnienie
   na 375 px, najgorszy o 33%. */
.artgrid>*{min-width:0}
.prose table{display:block;overflow-x:auto;max-width:100%;border-collapse:collapse;margin-block:1.6em;font-size:.95rem;-webkit-overflow-scrolling:touch}
.prose th,.prose td{text-align:left;padding:.7em .9em;border-bottom:1px solid var(--hairline);vertical-align:top}
.prose thead th{font-family:"Chakra Petch";font-weight:700;background:var(--sumi);color:var(--washi)}
.prose tbody tr:nth-child(even){background:rgba(20,52,59,.035)}

/* ===== FAQ akordeon (z sekcji „FAQ / pytania” w treści) ===== */
.faq{border-top:1px solid var(--hairline);margin-block:1.5em}
.faq__item{border-bottom:1px solid var(--hairline)}
/* Nagłówek opakowuje teraz przycisk akordeonu (H3 zostaje w konspekcie) - zeruje
   własny rozmiar i marginesy, żeby wygląd sekcji pytań nie zmienił się ani o piksel.
   Selektor z .faq, bo akordeon siedzi w .prose, a `.prose h3` (margin-top:1.6em)
   ma wyższą swoistość niż sama klasa i rozepchnąłby listę pytań. */
.faq .faq__h{margin:0;font:inherit;font-weight:inherit}
.faq__h .faq__q{width:100%}
.faq__q{width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;padding:1.1rem 0;font-family:"Chakra Petch";font-weight:600;font-size:clamp(1.02rem,1.4vw,1.2rem);color:var(--sumi);background:none;border:0;cursor:pointer}
.faq__ic{flex:none;width:20px;height:20px;position:relative}
.faq__ic::before,.faq__ic::after{content:"";position:absolute;inset:0;margin:auto;background:var(--amber)}
.faq__ic::before{width:100%;height:2px}.faq__ic::after{width:2px;height:100%;transition:transform .3s var(--ease)}
.faq__q[aria-expanded="true"] .faq__ic::after{transform:scaleY(0)}
.faq__a{overflow:hidden;height:0}
.faq__a-inner{padding-bottom:1.2rem;color:var(--haiiro);max-width:66ch}
.faq__a-inner>*+*{margin-top:.6em}

/* ===== Landing usługi: hero + formularz komunikaty ===== */
.pagehero__lead{font-size:clamp(1.1rem,1.6vw,1.4rem);line-height:1.55;color:var(--washi-92);max-width:46ch;margin-top:1.2rem;font-weight:500}
.pagehero__cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.8rem}
.pagehero__trust{margin-top:1.4rem;font-family:"Chakra Petch";font-weight:600;font-size:.78rem;letter-spacing:.02em;color:rgba(245,239,224,.72)}
/* Landing usługi: szersza kolumna tekstu, mocniejszy H1 (2-3 linie, nie 6) */
.pagehero--usluga{padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.pagehero--usluga .pagehero__h1{font-size:clamp(2.6rem,5vw,4.4rem);line-height:1.05;letter-spacing:-.02em;max-width:15ch;text-wrap:balance}
#kontakt,#jak-to-dziala{scroll-margin-top:100px}
#jak-to-dziala{display:block}
.form__err{background:#fbf4e8;border-left:4px solid var(--amber);padding:.9rem 1.1rem;margin-bottom:1rem;color:var(--sumi);font-size:.95rem}
.form__ok[role="status"]{display:block;background:var(--sumi);color:var(--washi);padding:1.4rem 1.6rem;font-family:"Chakra Petch";font-weight:600;font-size:1.05rem;--c:16px;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}

/* Baner zgody na cookie */
.consent{position:fixed;inset:0;z-index:300;display:flex;align-items:flex-end;justify-content:center;padding:clamp(1rem,4vw,2.6rem);background:rgba(10,26,30,0);pointer-events:none;transition:background .45s var(--ease)}
/* Bez pointer-events:auto na KONTENERZE. Kontener jest pełnoekranowy, więc przejmował
   kliknięcia na całej stronie - zmierzone: przy pierwszym wejściu na telefonie nie dało się
   otworzyć menu hamburgerowego, bo trafiało w niewidoczne tło banera. Klikalna ma być sama
   karta, a ta ma pointer-events:auto w .consent__inner linijkę niżej. Przyciemnienie tła
   zostaje - jest dekoracją, nie blokadą. */
.consent.is-in{background:rgba(10,26,30,.62)}
.consent.is-gone{background:rgba(10,26,30,0)!important;pointer-events:none}
.consent__inner{pointer-events:auto;max-width:740px;width:100%;background:var(--sumi);color:var(--washi);--c:18px;padding:clamp(1.5rem,3vw,2.1rem) clamp(1.6rem,3.5vw,2.3rem);display:flex;gap:1.6rem;align-items:center;justify-content:space-between;flex-wrap:wrap;border-top:3px solid var(--amber);box-shadow:0 30px 80px -18px rgba(10,26,30,.75);clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)));transform:translateY(150%);transition:transform .5s var(--ease)}
.consent.is-in .consent__inner{transform:translateY(0)}
.consent.is-gone .consent__inner{transform:translateY(150%)}
.consent__txt{flex:1 1 300px;font-size:.96rem;line-height:1.55;color:var(--washi-92)}
.consent__txt strong{display:block;font-family:"Chakra Petch";font-weight:700;font-size:clamp(1.15rem,1.8vw,1.4rem);color:var(--washi);margin-bottom:.4rem}
.consent__txt a{color:var(--amber);text-decoration:underline}
/* flex:0 0 auto nie pozwalał grupie ani się zawinąć, ani skurczyć - trzy przyciski
   nie mieściły się na telefonie i „Akceptuję wszystko” wychodziło poza ekran. */
.consent__btns{display:flex;flex-wrap:wrap;gap:.7rem;flex:1 1 auto;align-items:center}
.consent__btns .btn{padding:.72rem 1.35rem;font-size:.9rem}
.consent .btn--ink{background:transparent;color:var(--washi);box-shadow:inset 0 0 0 1.5px rgba(245,239,224,.5)}
.consent .btn--ink:hover{background:rgba(245,239,224,.12)}
.consent__prefs{flex-basis:100%;margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid rgba(245,239,224,.18);display:flex;flex-direction:column;gap:.75rem}
.consent__prefs[hidden]{display:none}
.consent__opt{display:flex;gap:.65rem;align-items:flex-start;font-size:.9rem;line-height:1.45;color:var(--washi-92);cursor:pointer}
.consent__opt input{margin:.15rem 0 0;width:18px;height:18px;flex:none;accent-color:var(--amber);cursor:pointer}
.consent__opt input:disabled{opacity:.55;cursor:default}
.consent__opt strong{color:var(--washi);font-weight:600}
.consent__save{align-self:flex-start;margin-top:.2rem}
/* Karta jest tu kolumną, więc flex-basis z .consent__txt (300px) działa jako baza WYSOKOŚCI
   i rozpychała blok tekstu o ~125px ponad jego treść - między tekstem a przyciskami robiła się
   pusta dziura. W kolumnie tekst ma się układać do swojej zawartości.
   Przyciski: w rzędzie trzy nie mieszczą się na telefonie, więc jeden pod drugim. */
@media(max-width:640px){
  .consent__inner{flex-direction:column;align-items:stretch;gap:1.1rem}
  .consent__txt{flex:0 0 auto}
  .consent__btns{width:100%;flex-direction:column;align-items:stretch}
  .consent__btns .btn{flex:0 0 auto;width:100%;justify-content:center;text-align:center}
}

/* Pasek z oczami śledzącymi kursor (reużywalny) */
.eyesband{background:var(--sumi);color:var(--washi);overflow:hidden}
.eyesband__host{position:relative;min-height:clamp(360px,44vw,520px);display:flex;align-items:center}
.eyesband__host canvas{position:absolute;inset:0;display:block}
.eyesband__content{position:relative;z-index:1;text-align:center;max-width:760px;padding-block:clamp(3.2rem,6vw,5rem)}
.eyebrow--amber{color:var(--amber)}
.eyesband__title{font-family:"Chakra Petch";font-weight:700;font-size:clamp(1.9rem,4.2vw,3.1rem);line-height:1.04;color:var(--washi);margin-top:.6rem;letter-spacing:-.01em}
.eyesband__text{margin-top:1.1rem;color:rgba(245,239,224,.82);font-size:clamp(1rem,1.4vw,1.12rem);line-height:1.6}

/* Hero landingu: tekst + animowany wizual tematu */
.uhero{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center;margin-top:1.3rem}
.uhero__text{min-width:0}
.uhero__viz{position:relative}
.uviz{position:relative;overflow:visible}
.uviz__back{position:absolute;inset:-7% auto auto -10%;width:54%;max-width:230px;opacity:.07;z-index:0;pointer-events:none}
.uviz__back svg{width:100%;height:auto}.uviz__back svg path{fill:var(--washi)}
.uviz__frame{position:relative;z-index:1;overflow:hidden;background:#fff;border:1px solid var(--hairline);--c:22px;padding:1.1rem 1.2rem;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)));box-shadow:0 22px 50px -30px rgba(20,52,59,.5)}
.uviz__frame::before{content:"";position:absolute;left:0;top:0;width:54px;height:5px;background:var(--amber);z-index:2}
.uviz-svg{display:block;width:100%;height:auto}
.uviz__front{position:absolute;z-index:4;width:clamp(78px,23%,120px);pointer-events:none}
.uviz__front--tl{top:-8%;left:-9%}.uviz__front--tr{top:-9%;right:-8%}
.uviz__front--br{bottom:-9%;right:-8%}.uviz__front--bl{bottom:-9%;left:-9%}
.uviz-stick{display:block;width:100%;height:auto;overflow:visible}
@media(max-width:920px){.uhero{grid-template-columns:1fr}.uhero__viz{max-width:460px;margin-top:.6rem;overflow:hidden}}

/* animacje wizualu - tylko dla użytkowników bez preferencji redukcji ruchu */
@media(prefers-reduced-motion:no-preference){
	.uviz-svg [class^="uviz-"]{transform-box:fill-box}
	/* sticker wyłamany - delikatny bob */
	.uviz-stick__in{transform-origin:center;animation:uvizBob 3.6s ease-in-out infinite}
	/* stos kart-zadań (automatyzacje) - fade stagger bez transform (chroni translate/rotate) */
	.uviz-card{animation:uvizCardIn .7s ease both}
	.uviz-card--3{animation-delay:0s}.uviz-card--2{animation-delay:.12s}.uviz-card--1{animation-delay:.26s}
	@keyframes uvizCardIn{from{opacity:0}to{opacity:1}}
	/* automatyzacje */
	.uviz-token{transform-origin:center;animation:uvizToken 2.8s ease-in-out infinite}
	@keyframes uvizToken{0%{transform:translateX(0);opacity:0}12%{opacity:1}50%{transform:translateX(160px)}88%{opacity:1}100%{transform:translateX(320px);opacity:0}}
	.uviz-gear{transform-origin:center;animation:uvizSpin 7s linear infinite}
	@keyframes uvizSpin{to{transform:rotate(360deg)}}
	/* chatboty */
	.uviz-msg{animation:uvizPop 5s ease-in-out infinite}
	.uviz-msg--2{animation-delay:.7s}
	@keyframes uvizPop{0%,6%{opacity:0;transform:translateY(12px)}18%,90%{opacity:1;transform:translateY(0)}100%{opacity:1}}
	.uviz-dot{transform-origin:center;animation:uvizDot 1.3s ease-in-out infinite}
	.uviz-dot--2{animation-delay:.16s}.uviz-dot--3{animation-delay:.32s}
	@keyframes uvizDot{0%,70%,100%{transform:translateY(0);opacity:.45}35%{transform:translateY(-5px);opacity:1}}
	/* szkolenia */
	.uviz-bar{transform-origin:bottom;animation:uvizGrow 1.4s cubic-bezier(.2,.8,.2,1) both}
	.uviz-bar--2{animation-delay:.18s}.uviz-bar--3{animation-delay:.36s}
	@keyframes uvizGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
	.uviz-spark{transform-origin:center;animation:uvizSparkle 3.4s ease-in-out infinite}
	@keyframes uvizSparkle{0%,100%{transform:scale(.7) rotate(0);opacity:.6}50%{transform:scale(1.1) rotate(45deg);opacity:1}}
	/* audyt */
	.uviz-tick{stroke-dasharray:70;stroke-dashoffset:70;animation:uvizDraw .55s ease forwards}
	.uviz-tick--1{animation-delay:.5s}.uviz-tick--2{animation-delay:1.1s}.uviz-tick--3{animation-delay:1.7s}
	@keyframes uvizDraw{to{stroke-dashoffset:0}}
	.uviz-scan{animation:uvizScan 4.5s ease-in-out infinite}
	@keyframes uvizScan{0%{transform:translate(110px,95px)}45%{transform:translate(360px,105px)}75%{transform:translate(360px,235px)}100%{transform:translate(110px,95px)}}
	/* rozwój i opieka */
	.uviz-loop{transform-origin:center;animation:uvizSpin 10s linear infinite}
	.uviz-paw{transform-origin:center;animation:uvizPulse 2.6s ease-in-out infinite}
	@keyframes uvizPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
	/* systemy - pytanie i podświetlenie */
	.uviz-q{transform-origin:center;animation:uvizBob 3s ease-in-out infinite}
	@keyframes uvizBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
	.uviz-hlrow{transform-origin:left center;animation:uvizHl 4s ease-in-out infinite}
	@keyframes uvizHl{0%,20%{opacity:0;transform:scaleX(.2)}45%,80%{opacity:1;transform:scaleX(1)}100%{opacity:1}}
	.uviz-src{animation:uvizPop 4s ease-in-out infinite;animation-delay:.6s}
}
/* pozycja bazowa skanera (gdy ruch wyłączony) */
.uviz-scan{transform:translate(300px,180px)}

/* ===== Body usługi cięte na oddychające bandy ===== */
.pagebody .prose{max-width:none}
.uband{padding-block:clamp(2rem,4.5vw,3.6rem)}
.uband+.uband{border-top:1px solid var(--hairline)}
.uband__in{max-width:72ch;margin-inline:0}
.uband__in>*+*{margin-top:1.1em}
.uband__in>*:first-child{margin-top:0}
.uband--steps .uband__in{max-width:none}
.uband .lead{font-size:clamp(1.2rem,1.9vw,1.55rem);line-height:1.5;font-weight:500;color:var(--sumi)}
.uband--feature .uband__in>h2::before,.uband--ink .uband__in>h2::before{content:"";display:block;width:54px;height:5px;background:var(--amber);margin-bottom:.85rem}
/* karty „dla kogo / zastosowania" */
.uband--cards ul.cards{list-style:none;padding:0;margin-top:1.3em;display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:1rem}
.uband--cards ul.cards li{--c:14px;position:relative;padding:1.3rem 1.4rem;background:#fff;border:1px solid var(--hairline);clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.uband--cards ul.cards li::before{content:none}
/* kroki procesu */
.uband--steps ol.steps{list-style:none;counter-reset:n;padding:0;margin-top:1.3em;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem}
.uband--steps ol.steps>li{--c:16px;counter-increment:n;position:relative;padding:1.4rem;background:#fff;border:1px solid var(--hairline);clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.uband--steps ol.steps>li::before{content:counter(n);display:block;font-family:"Chakra Petch";font-weight:700;font-size:2.2rem;color:var(--amber);line-height:1;margin-bottom:.35rem}
@media(max-width:820px){.uband--steps ol.steps{grid-template-columns:1fr}}
/* ink band (rzadko) - kontenerowy ciemny panel */
.uband--ink{background:var(--sumi);color:var(--washi);--c:20px;padding:clamp(1.6rem,3vw,2.4rem) clamp(1.4rem,3vw,2.2rem);clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.uband--ink h2,.uband--ink h3{color:var(--washi)}
.uband+.uband--ink,.uband--ink+.uband{border-top:0}
/* stagger dzieci bandu (reveal na .uband → .in) */
.uband[data-reveal]{opacity:1;transform:none}
.uband .r-item{transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0)*.06s)}
.js .uband .r-item{opacity:0;transform:translateY(18px)}
.uband.in .r-item{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.uband .r-item{opacity:1!important;transform:none!important;transition:none!important}}
/* proces: kroki H3 z amber akcentem */
.uband--steps .uband__in>h3{border-left:3px solid var(--amber);padding-left:.95rem}

/* ===== Sloty na obrazy (edytor / [neko_img]) - na-brand, jasny placeholder ===== */
.imgslot{position:relative;margin:0;display:block}
.imgslot__frame{position:relative;display:block;--c:18px;overflow:hidden;background:var(--washi);border:1px solid var(--hairline);clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.imgslot__frame img,.imgslot img{display:block;width:100%;height:100%;object-fit:cover}
.imgslot__ph{position:absolute;inset:0;display:grid;place-items:center;gap:.55rem;text-align:center;padding:1.2rem}
.imgslot__ph::before{content:"猫";font-family:"Noto Sans JP";font-weight:700;font-size:clamp(2.6rem,7vw,3.8rem);color:var(--amber);opacity:.2;line-height:1}
.imgslot__hint{position:relative;z-index:1;max-width:34ch;font-family:"Chakra Petch",sans-serif;font-size:.8rem;letter-spacing:.01em;color:var(--haiiro)}
.imgslot__cap{margin-top:.55rem;padding-left:.1rem;font-size:.82rem;line-height:1.45;color:var(--haiiro)}
.imgslot__cap a{color:var(--haiiro);text-decoration:underline;text-underline-offset:2px}
/* Wykres słupkowy w treści (reużywalny) */
.nchart{margin:1.9em 0;padding:1.4rem clamp(1.1rem,3vw,1.6rem);background:var(--white);border:1px solid var(--hairline);--c:16px;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.nchart__title{font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:1rem;line-height:1.35;color:var(--sumi);margin:0 0 1.1rem}
.nchart__rows{display:flex;flex-direction:column;gap:.75rem}
.nchart__row{display:grid;grid-template-columns:minmax(5.5rem,9rem) 1fr auto;align-items:center;gap:.85rem}
.nchart__label{font-size:.9rem;color:var(--sumi);font-weight:500;line-height:1.25}
.nchart__track{position:relative;height:1.55rem;background:var(--washi-92)}
.nchart__bar{display:block;height:100%;background:var(--haiiro);transform-origin:left}
.nchart__bar.is-hi{background:var(--amber)}
.nchart.in .nchart__bar{animation:nchartGrow 1s var(--ease) both}
@keyframes nchartGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.nchart__val{font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:.9rem;color:var(--sumi);text-align:right;min-width:3rem}
@media(max-width:520px){.nchart__row{grid-template-columns:1fr auto;grid-template-areas:"lbl val" "trk trk";row-gap:.3rem}.nchart__label{grid-area:lbl}.nchart__val{grid-area:val}.nchart__track{grid-area:trk}}
/* Ścieżka kroków / cykl (reużywalne) */
.nsteps{margin:1.9em 0}
.nsteps__list{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem}
.nsteps__step{display:flex;align-items:center;gap:.6rem;max-width:20rem;padding:.6rem .95rem .6rem .6rem;background:var(--washi);border:1px solid var(--hairline);--c:11px;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.nsteps__n{flex:0 0 auto;width:1.7rem;height:1.7rem;display:grid;place-items:center;background:var(--amber);color:var(--sumi-dark);font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:.9rem;--c:5px;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.nsteps__t{font-size:.9rem;font-weight:600;line-height:1.3;color:var(--sumi)}
.nsteps__arrow{color:var(--haiiro);font-weight:700;font-size:1.05rem}
.nsteps__loop{margin:.95rem 0 0;font-size:.88rem;color:var(--haiiro);font-style:italic}
.nsteps__loop span{color:var(--amber);font-style:normal;font-weight:700;margin-right:.25rem}
/* wariant pionowy - oś czasu / checklista (długie etykiety) */
.nsteps--v .nsteps__list{flex-direction:column;align-items:stretch;gap:0}
.nsteps--v .nsteps__arrow{display:none}
.nsteps--v .nsteps__step{max-width:none;background:none;border:none;clip-path:none;padding:0 0 1.15rem;gap:.9rem;align-items:flex-start;position:relative}
.nsteps--v .nsteps__step:not(:last-child)::before{content:"";position:absolute;left:.84rem;top:1.55rem;bottom:-.15rem;width:2px;background:var(--hairline)}
.nsteps--v .nsteps__n{position:relative;z-index:1}
.nsteps--v .nsteps__t{padding-top:.32rem;font-weight:500;font-size:.95rem}
@media(max-width:560px){.nsteps__list{flex-direction:column;align-items:stretch}.nsteps__step{max-width:none}.nsteps__arrow{align-self:center;transform:rotate(90deg)}}
/* „Mapa zadań” - tabela z wyróżnionym kandydatem na pilotaż */
.tasktable{margin:1.9em 0}
/* Przewija się OPAKOWANIE, nie sama tabela.
   Gdy overflow-x siedział na <table>, trzeba jej było dać display:block - a wtedy
   kolumny tracą wspólną siatkę i na telefonie treść łamie się po jednym słowie
   w wierszu (zmierzone: wiersz „Odpowiada na powtarzalne pytania tekstem” zajmował
   5 linii i 300 px wysokości). Na figurze tabela zostaje tabelą.
   min-width pilnuje, żeby kolumny miały czytelną szerokość - bez tego przeglądarka
   ściska je do zera i przewijanie niczego nie ratuje. */
.prose .tasktable{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.prose .tasktable table{display:table;width:100%;min-width:34rem;margin-block:0}
/* Podpowiedź tylko wtedy, gdy tabela REALNIE wystaje - klasę nadaje JS po pomiarze.
   position:sticky trzyma ją przy lewej krawędzi okna przewijania, więc nie ucieka
   razem z tabelą. Bez JS nie ma podpowiedzi, ale przewijanie i tak działa. */
.prose .tasktable::before{content:none}
.prose .tasktable.ma-przewijanie::before{content:"Przewiń w bok →";position:sticky;left:0;display:block;width:max-content;margin-bottom:.5rem;font-family:"Chakra Petch";font-weight:600;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--haiiro)}
.prose .tasktable tr.is-pick td{background:rgba(232,161,61,.15);font-weight:600;color:var(--sumi)}
.prose .tasktable tr.is-pick td:first-child{box-shadow:inset 3px 0 0 var(--amber)}
.prose .wp-block-image img,.prose .wp-block-media-text__media img,.prose figure.wp-block-image img{--c:16px;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
/* zdjęcia zespołu - realne obrazy */
.team__photo img{width:100%;height:100%;object-fit:cover;display:block}
.teamband{background:var(--washi)}

/* ===== Landing bespoke: „co budujemy" (ikony) ===== */
.caps{background:var(--washi);padding:clamp(2.6rem,6vw,4.8rem) 0}
.caps__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.5rem);margin-top:2rem}
.caps__card{--c:16px;background:#fff;border:1px solid var(--hairline);padding:1.6rem;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)));transition:transform .35s var(--ease),--c .35s var(--ease)}
.caps__card:hover{transform:translateY(-6px);--c:24px}
.caps__ic{display:grid;place-items:center;width:54px;height:54px;background:var(--washi);--c:12px;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.caps__ic .ic{width:32px;height:32px}
.caps__card:hover .caps__ic .ic g,.caps__card:hover .caps__ic .ic path{stroke:var(--amber)}
.caps__ic .ic g,.caps__ic .ic path{transition:stroke .35s var(--ease)}
.caps__card h3{font-family:"Chakra Petch";font-weight:700;font-size:1.14rem;margin-top:1rem;color:var(--sumi)}
.caps__card p{color:var(--haiiro);font-size:.94rem;line-height:1.55;margin-top:.5rem}
@media(max-width:900px){.caps__grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.caps__grid{grid-template-columns:1fr}}
.caps--3 .caps__grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* ===== Landing bespoke: ciemny pas tematyczny (wystające słowo) ===== */
.featband{position:relative;overflow:hidden;background:var(--sumi);color:var(--washi);padding:clamp(3.4rem,8vw,6.2rem) 0}
.featband__word{position:absolute;right:-.04em;bottom:-.26em;font-family:"Chakra Petch";font-weight:700;font-size:clamp(5.5rem,19vw,15rem);line-height:.8;color:var(--washi);opacity:.05;pointer-events:none;white-space:nowrap;z-index:0}
.featband .wrap{position:relative;z-index:1}
.featband__in{max-width:60ch}
.featband .eyebrow{color:var(--amber)}
.featband h2{font-family:"Chakra Petch";font-weight:700;font-size:clamp(2rem,4vw,3.2rem);line-height:1.05;letter-spacing:-.015em;margin:.5rem 0 1rem;color:var(--washi)}
.featband p{color:var(--washi-92);font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.6}

/* ===== Landing bespoke: media-row (slot na grafikę) ===== */
.mediarow{background:var(--washi);padding:clamp(2.6rem,6vw,4.8rem) 0}
.mediarow__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.mediarow__text h2{font-family:"Chakra Petch";font-weight:700;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.08;letter-spacing:-.01em;margin:.4rem 0 1rem;color:var(--sumi)}
.mediarow__text p{color:var(--haiiro);font-size:1.08rem;line-height:1.6;margin-bottom:1.6rem;max-width:46ch}
.mediarow__media .imgslot__frame{aspect-ratio:4/3}
@media(max-width:820px){.mediarow__grid{grid-template-columns:1fr}}

/* ===== Landing bespoke: agenda / program (oś czasu) ===== */
.agenda{background:var(--washi);padding:clamp(2.6rem,6vw,4.8rem) 0}
.agenda__list{list-style:none;padding:0;margin-top:2rem;max-width:800px;position:relative}
.agenda__list::before{content:"";position:absolute;left:27px;top:38px;bottom:38px;width:2px;background:var(--hairline)}
.agenda__item{position:relative;display:grid;grid-template-columns:56px 1fr;gap:1.5rem;padding:.9rem 0;align-items:start}
.agenda__k{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;font-family:"Chakra Petch";font-weight:700;font-size:1.1rem;color:var(--washi);background:var(--sumi);--c:14px;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.agenda__item:last-child .agenda__k{background:var(--amber);color:var(--sumi)}
.agenda__body{padding-top:.35rem}
.agenda__body h3{font-family:"Chakra Petch";font-weight:700;font-size:1.22rem;color:var(--sumi)}
.agenda__body p{color:var(--haiiro);margin-top:.35rem;line-height:1.55}
.agenda__note{color:var(--haiiro);font-size:.9rem;margin-top:1.4rem;max-width:800px}

/* ===== compare (automatyzacje): ręcznie vs Neko ===== */
.compare{background:var(--washi);padding:clamp(2.6rem,6vw,4.8rem) 0}
.compare__grid{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(.8rem,2vw,1.6rem);align-items:stretch;margin-top:2rem}
.compare__col{--c:18px;padding:1.6rem 1.7rem;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.compare__col--before{background:#fff;border:1px solid var(--hairline)}
.compare__col--after{background:var(--sumi);color:var(--washi)}
.compare__tag{font-family:"Chakra Petch";font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--haiiro)}
.compare__col--after .compare__tag{color:var(--amber)}
.compare__col ul{list-style:none;padding:0;margin:1rem 0 0}
.compare__col li{position:relative;padding-left:1.7em;margin:.7em 0;line-height:1.5}
.compare__col--before li::before{content:"×";position:absolute;left:.15em;top:-.05em;color:var(--haiiro);font-weight:700;font-size:1.15em}
.compare__col--after li::before{content:"";position:absolute;left:.15em;top:.5em;width:.55em;height:.85em;background:var(--amber);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.compare__arrow{display:grid;place-items:center;font-size:2rem;color:var(--amber);font-family:"Chakra Petch";font-weight:700}
@media(max-width:820px){.compare__grid{grid-template-columns:1fr}.compare__arrow{transform:rotate(90deg);padding:.4rem 0}}

/* ===== chat (chatboty): okno rozmowy ===== */
.chatsec{background:var(--washi);padding:clamp(2.6rem,6vw,4.8rem) 0}
.chatsec__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.chatsec__text h2{font-family:"Chakra Petch";font-weight:700;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.08;margin:.4rem 0 1rem;color:var(--sumi)}
.chatsec__text p{color:var(--haiiro);font-size:1.08rem;line-height:1.6;margin-bottom:1.6rem;max-width:46ch}
.chatsec__win{--c:20px;background:#fff;border:1px solid var(--hairline);padding:1.4rem;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)));display:flex;flex-direction:column;gap:.7rem;box-shadow:0 22px 50px -30px rgba(20,52,59,.5)}
.chatmsg{max-width:82%;padding:.7rem 1rem;font-size:.95rem;line-height:1.45;--c:12px;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.chatmsg--bot{align-self:flex-start;background:var(--sumi);color:var(--washi)}
.chatmsg--user{align-self:flex-end;background:var(--amber);color:var(--sumi)}
.chatmsg--typing{align-self:flex-start;display:flex;gap:5px;padding:.95rem 1rem}
.chatmsg--typing span{width:7px;height:7px;border-radius:50%;background:var(--washi);opacity:.5;animation:nekoTyping 1.3s ease-in-out infinite}
.chatmsg--typing span:nth-child(2){animation-delay:.16s}.chatmsg--typing span:nth-child(3){animation-delay:.32s}
@keyframes nekoTyping{0%,70%,100%{transform:translateY(0);opacity:.45}35%{transform:translateY(-5px);opacity:1}}
@media(prefers-reduced-motion:reduce){.chatmsg--typing span{animation:none}}
@media(max-width:820px){.chatsec__grid{grid-template-columns:1fr}}

/* ===== checklist (audyt): co sprawdzamy ===== */
.checklist{background:var(--washi);padding:clamp(2.6rem,6vw,4.8rem) 0}
.checklist__grid{list-style:none;padding:0;margin-top:2rem;display:grid;grid-template-columns:1fr 1fr;gap:.4rem 2.4rem}
.checklist__item{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;padding:.85rem 0;border-bottom:1px solid var(--hairline);line-height:1.5;color:var(--sumi)}
.checklist__tick{display:grid;place-items:center;width:28px;height:28px;color:var(--amber);background:rgba(232,161,61,.14);--c:8px;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.checklist__tick svg{width:16px;height:16px}
@media(max-width:700px){.checklist__grid{grid-template-columns:1fr}}

/* ===== loop (rozwój): pętla opieki (ciemna) ===== */
.loopsec{background:var(--sumi);color:var(--washi);padding:clamp(3rem,6vw,5rem) 0}
.loopsec .eyebrow{color:var(--amber)}
.loopsec .services__head h2,.loopsec h2{color:var(--washi)}
.loopsec__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2rem}
.loopsec__card{--c:16px;background:rgba(245,239,224,.06);border:1px solid rgba(245,239,224,.14);padding:1.4rem;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.loopsec__n{display:grid;place-items:center;width:40px;height:40px;font-family:"Chakra Petch";font-weight:700;background:var(--amber);color:var(--sumi);--c:10px;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.loopsec__card h3{font-family:"Chakra Petch";font-weight:700;font-size:1.1rem;margin-top:.9rem;color:var(--washi)}
.loopsec__card p{color:var(--washi-92);font-size:.92rem;line-height:1.5;margin-top:.4rem}
.loopsec__note{margin-top:1.6rem;color:var(--washi-92)}
.loopsec__cyc{color:var(--amber);font-size:1.3em;display:inline-block}
@media(max-width:820px){.loopsec__grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.loopsec__grid{grid-template-columns:1fr}}

/* ===== O nas: hero redakcyjne (oczy, bez CTA) ===== */
.abouthero{position:relative;overflow:hidden;background:var(--sumi);color:var(--washi);min-height:58svh;display:flex;align-items:center;padding:calc(var(--header-h) + clamp(2.5rem,5vw,4rem)) 0 clamp(2.5rem,5vw,3.5rem)}
.abouthero .hero__canvas{position:absolute;inset:0;z-index:0}
.abouthero .wrap{position:relative;z-index:2;width:100%}
.abouthero .crumbs,.abouthero .crumbs a{color:rgba(245,239,224,.72)}
.abouthero .crumbs a:hover{color:var(--amber)}
.abouthero .eyebrow{color:var(--amber)}
.abouthero h1{font-family:"Chakra Petch";font-weight:700;font-size:clamp(2.6rem,6vw,5rem);line-height:1.02;letter-spacing:-.02em;color:var(--washi);max-width:16ch;margin:.5rem 0 1.1rem;text-wrap:balance}
.abouthero .lead{color:var(--washi-92);font-size:clamp(1.15rem,1.6vw,1.5rem);max-width:52ch;line-height:1.5}
.abouthero__scroll{display:inline-flex;align-items:center;gap:.5em;margin-top:1.9rem;font-family:"Chakra Petch";font-weight:600;color:var(--washi);opacity:.92}
.abouthero__scroll:hover{color:var(--amber)}
.abouthero__arr{display:inline-block;animation:aboutBounce 1.8s var(--ease) infinite}
@keyframes aboutBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(prefers-reduced-motion:reduce){.abouthero__arr{animation:none}}

/* ===== Blog: baner CTA (blok do wpisów) + przyciski w treści ===== */
.blogcta{background:var(--sumi);color:var(--washi);--c:22px;margin-block:2em;padding:clamp(1.5rem,4vw,2.3rem);display:grid;grid-template-columns:1fr auto;column-gap:1.6rem;row-gap:.35rem;align-items:center;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.blogcta>*{margin:0}
.blogcta h3{grid-column:1;grid-row:1;font-family:"Chakra Petch";font-weight:700;font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.12;color:var(--washi)}
.blogcta p{grid-column:1;grid-row:2;color:var(--washi-92);font-size:.98rem}
.blogcta .wp-block-buttons{grid-column:2;grid-row:1/span 2;display:flex;align-items:center}
.blogcta .wp-block-button__link,.prose .wp-block-button__link,.article__body .wp-block-button__link{--c:14px;background:var(--amber);color:var(--sumi);font-family:"Chakra Petch";font-weight:600;padding:.85rem 1.5rem;border-radius:0;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.blogcta .wp-block-button__link:hover,.prose .wp-block-button__link:hover,.article__body .wp-block-button__link:hover{background:var(--amber-hi)}
@media(max-width:600px){.blogcta{grid-template-columns:1fr}.blogcta .wp-block-buttons{grid-column:1;grid-row:auto;margin-top:.6rem}}

/* realne logotypy w marquee „Zaufali nam" */
.marquee__logo{display:inline-block;height:30px;max-width:190px;width:auto;object-fit:contain;opacity:.7;filter:grayscale(1);vertical-align:middle;margin:0 .2rem;transition:filter .3s var(--ease),opacity .3s var(--ease)}
.marquee__track:hover .marquee__logo{opacity:.9}
/* Najechanie na konkretny znak pokazuje go w oryginalnych barwach. Pasek i tak
   zatrzymuje się pod kursorem (.marquee:hover), więc da się w logo trafić.
   Podwójny selektor, bo .marquee__track:hover .marquee__logo ma wyższą swoistość
   niż samo .marquee__logo:hover i inaczej wygrywałby krycie. */
.marquee__track:hover .marquee__logo:hover,
.marquee__logo:hover{opacity:1;filter:none}

/* wycofanie zgody (RODO art. 7 ust. 3) - dyskretny chip */
.consent-reopen{position:fixed;left:1rem;bottom:1rem;z-index:150;font-family:"Chakra Petch";font-weight:600;font-size:.72rem;letter-spacing:.04em;color:var(--haiiro);background:var(--washi);border:1px solid var(--hairline);padding:.45em .8em;--c:8px;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)));cursor:pointer;transition:color .3s var(--ease),border-color .3s var(--ease)}
.consent-reopen:hover{color:var(--sumi);border-color:var(--haiiro)}
/* Dyskrecję niesie kolor (haiiro na washi), nie przezroczystość. Przy opacity:.55
   treść wpisu prześwitywała przez chip na wylot, a na dotyku nie ma hovera,
   który by to cofnął - przygaszenie zostawało na stałe. */
.consent-reopen[hidden]{display:none}

/* =========================================================================
   PACZKA FIXÓW „widać od razu" - 2026-09-01 (agent: fixy wizualne, poz. 2/4)
   Sekcja dopisana na końcu celowo: nadpisuje reguły wcześniejsze w pliku.
   Nie przenosić wyżej, nie scalać z blokami powyżej.
   ========================================================================= */

/* (a) .idx__row ma 4 dzieci (num / title / desc / go) - grid musi mieć 4 kolumny,
   inaczej strzałka „→" spada do drugiego wiersza. Na ≤760px desc znika,
   więc kolumny są trzy (nie dwie, jak w regule z linii ~142). */
.idx__row{grid-template-columns:auto 1fr auto auto}
@media (max-width:760px){
  .idx__row{grid-template-columns:auto 1fr auto;column-gap:clamp(.8rem,3vw,1.4rem)}
  .idx__desc{display:none}
}

/* (b) Lista technologii: osobne chipy ze ściętym narożnikiem zamiast zlepka <b>. */
.tech__list{display:flex;flex-wrap:wrap;gap:.5rem}
.tech .tech__chip{--c:8px;display:inline-block;margin-left:0;opacity:1;
  font-family:"Chakra Petch",sans-serif;font-weight:600;font-size:.85rem;line-height:1;
  color:var(--washi-92);background:rgba(245,239,224,.05);
  box-shadow:inset 0 0 0 1px rgba(245,239,224,.2);
  padding:.62em .85em;
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)));
  transition:color .3s var(--ease),background-color .3s var(--ease),box-shadow .3s var(--ease)}
.tech .tech__chip:hover{color:var(--washi);background:rgba(232,161,61,.1);box-shadow:inset 0 0 0 1px var(--amber)}
@media (max-width:560px){.tech{gap:.9rem}.tech .tech__chip{font-size:.8rem;padding:.55em .75em}}

/* (d) Fallback awatara w boxie autora = sygnet Neko (zamiast sylwetki człowieka). */
.authorbox__syg{width:58%;height:auto;display:block;opacity:.9}


/* === OKŁADKI WPISÓW (generator SVG) - scalone z cover.css === */
/* ===== Wygenerowane okładki wpisów (neko_cover_svg / neko_post_cover) =====
   Inline SVG ma własne width/height w px (1200×750 lub 1200×525) - bez tego
   reguły rozpycha kafel. Ratio SVG = ratio kontenera (.postcard__media 16/10,
   .artmedia 16/7), więc domyślne preserveAspectRatio nie zostawia pasów;
   gdyby zaokrąglenie coś zostawiło, pod spodem i tak jest sumi-dark. */
.cover{display:block;width:100%;height:100%}
.postcard__media .cover,.artmedia .cover{position:absolute;inset:0}


/* === MODUŁ „ROZŁÓŻ SWÓJ PROCES” - scalone z proces-demo.css === */
/* =========================================================================
   PDEMO - „Rozłóż swój proces” (strona główna, decyzja 32)
   Do scalenia z assets/css/kot-czuwa.css. Korzysta z istniejących tokenów
   (--sumi-dark/--washi/--amber/--haiiro/--ease/--gut) i z @property --c.
   Zasada: stan KOŃCOWY jest stanem bazowym - animację włącza dopiero .js,
   więc bez JS i przy prefers-reduced-motion widać komplet informacji.
   ========================================================================= */

.pdemo{position:relative;padding:clamp(2rem,5vw,4rem) 0}
.pdemo__panel{position:relative;z-index:4;background:var(--sumi-dark);color:var(--washi);
  padding:clamp(2.2rem,4vw,3.4rem) clamp(1.5rem,4vw,3rem) clamp(2.4rem,4vw,3.4rem)}
.pdemo__panel .eyebrow{color:var(--amber)}
.pdemo__panel h2{color:var(--washi);font-size:clamp(1.8rem,3.4vw,2.7rem);margin:.5rem 0 1.7rem;max-width:20ch}

/* --- chipy (tablist) - bez JS bezużyteczne, więc chowane bramką .js --- */
.pdemo__tabs{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1.8rem}
html:not(.js) .pdemo__tabs{display:none}
.pdemo__chip{--c:8px;font-family:"Chakra Petch";font-weight:600;font-size:.9rem;line-height:1.2;
  padding:.66em 1.15em;color:var(--washi);background:rgba(245,239,224,.08);border:0;
  box-shadow:inset 0 0 0 1px rgba(245,239,224,.28);
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)));
  transition:background-color .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease),--c .25s var(--ease)}
.pdemo__chip:hover{background:rgba(245,239,224,.17)}
.pdemo__chip[aria-selected="true"]{--c:12px;background:var(--amber);color:var(--sumi-dark);box-shadow:inset 0 0 0 1px var(--amber)}

/* --- pasek kafli --- */
.pdemo__stage{position:relative}
.pdemo__steps{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);align-items:stretch;gap:.55rem}
.pdemo__steps[hidden],.pdemo__sum[hidden]{display:none}

.pdemo__step{--c:10px;display:flex;flex-direction:column;gap:.45rem;padding:.85rem .9rem 1rem;
  background:var(--washi);color:var(--sumi);
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)));
  transition:opacity .45s var(--ease),transform .45s var(--ease),
             background-color .35s var(--ease),color .35s var(--ease),--c .35s var(--ease)}
.js .pdemo__step{opacity:0;transform:translateY(10px)}
.pdemo__step.is-on{opacity:1;transform:none}

.pdemo__num{font-family:"Chakra Petch";font-weight:700;font-size:.7rem;letter-spacing:.16em;color:var(--haiiro)}
/* overflow-wrap jest tu ZABEZPIECZENIEM, nie kosmetyką: .pdemo__step ma clip-path,
   więc słowo szersze od kolumny nie zawijało się, tylko zostawało PO CICHU UCIĘTE.
   Zmierzone na żywo: w paśmie ok. 861-940 px szerokości okna ucinały się „Sprawdza,”
   (7 kroków, -5 px) i „Dopasowuje” (6 kroków, -2 px). Ta linia zdejmuje limit
   długości słowa z przyszłej treści modułu. Mechaniki (JS, dane, markup) nie dotyka. */
.pdemo__label{font-family:"Chakra Petch";font-weight:600;font-size:.92rem;line-height:1.22;overflow-wrap:anywhere}
.pdemo__tag{margin-top:auto;display:flex;align-items:center;gap:.35em;
  font-size:.7rem;letter-spacing:.05em;color:var(--haiiro)}
.js .pdemo__tag{opacity:0;transition:opacity .3s var(--ease)}
.pdemo__step.is-marked .pdemo__tag{opacity:1}
.pdemo__check{flex:none;width:12px;height:12px}
.pdemo__check path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:square;stroke-linejoin:miter}

/* stan „to zdejmujemy”: z JS po drugim przebiegu (.is-auto), bez JS od razu */
.pdemo__step.is-auto,
html:not(.js) .pdemo__step[data-auto="1"]{--c:14px;background:var(--amber);color:var(--sumi-dark)}
.pdemo__step.is-auto .pdemo__num,
.pdemo__step.is-auto .pdemo__tag,
html:not(.js) .pdemo__step[data-auto="1"] .pdemo__num,
html:not(.js) .pdemo__step[data-auto="1"] .pdemo__tag{color:var(--sumi-dark)}

/* gaszenie starego paska przy zmianie chipa (180 ms) */
.pdemo__steps.is-out .pdemo__step{opacity:0;transform:translateY(6px);transition-duration:.18s}

/* --- podsumowanie z faktów (liczby biorą się z kafli, nie z deklaracji) --- */
.pdemo__sum{margin-top:1.5rem;font-family:"Chakra Petch";font-weight:600;
  font-size:clamp(1.02rem,1.9vw,1.3rem);line-height:1.3;color:var(--washi)}
.pdemo__sum .pdemo__dot{color:var(--haiiro)}
.js .pdemo__sum{opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.pdemo__sum.is-on{opacity:1;transform:none}

.pdemo__fine{margin-top:.65rem;max-width:62ch;font-size:.86rem;line-height:1.5;color:var(--washi-92);opacity:.72}
.pdemo__cta{margin-top:1.9rem}

/* --- mobile: chipy w poziomym pasku ze snapem, kafle w kolumnie --- */
@media (max-width:860px){
  .pdemo__tabs{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:calc(clamp(1.5rem,4vw,3rem) * -1);padding-inline:clamp(1.5rem,4vw,3rem);padding-bottom:.35rem}
  .pdemo__tabs::-webkit-scrollbar{display:none}
  .pdemo__chip{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap}
  .pdemo__steps{grid-auto-flow:row;grid-auto-columns:auto;gap:.45rem}
  .pdemo__step{flex-direction:row;align-items:center;gap:.75rem;padding:.7rem .9rem}
  .pdemo__label{flex:1 1 auto}
  .pdemo__num{flex:none}
  .pdemo__tag{margin-top:0;flex:none;text-align:right}
}
@media (max-width:420px){
  .pdemo__step{flex-wrap:wrap}
  .pdemo__tag{flex:1 0 100%;justify-content:flex-start;padding-left:calc(.7rem + 2ch)}
}

/* --- bez ruchu: od razu stan końcowy, zero staggera --- */
@media (prefers-reduced-motion:reduce){
  .js .pdemo__step,.js .pdemo__sum{opacity:1;transform:none;transition:none}
  .js .pdemo__tag{opacity:1;transition:none}
  .pdemo__steps.is-out .pdemo__step{opacity:1;transform:none}
  .pdemo__chip,.pdemo__step{transition:none}
}


/* === WEKTOROWE OKNA PRODUKTU (media-viz) - scalone z makieta-visual.css === */
/* ==========================================================================
   makieta-visual - wektorowe „okno produktu” (typ sekcji: media-viz)
   Schematyczna wizualizacja interfejsu zamiast pustego slotu na zdjęcie.
   Tekst zostaje tekstem: cały układ to HTML + CSS, zero krzywych, zero rastru.
   Do scalenia z kot-czuwa.css (zmienne palety mają fallbacki, więc plik działa też sam).
   ========================================================================== */

/* --- Sekcja media-viz: dziedziczy siatkę po .mediarow ---------------------- */
.mediarow--viz .mediarow__media{min-width:0}
/* Kontener zapytań: musi być PRZODKIEM .mviz - element nie może odpytywać sam siebie. */
.mviz-fig{margin:0;min-width:0;container-type:inline-size}

/* --- Ramka okna ----------------------------------------------------------- */
.mviz{
  --c:20px;
  position:relative;
  background:#fff;
  border:1px solid var(--hairline,#D9D2BD);
  overflow:hidden; /* łapka wjeżdża spoza kadru - nie może rozpychać strony */
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)));
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  color:var(--sumi,#14343B);
  line-height:1.35;
}

/* Pasek okna - bez adresu URL, sam „identyfikator widoku”. */
.mviz__bar{
  display:flex;align-items:center;gap:.7rem;
  padding:.55rem .9rem;
  background:var(--sumi,#14343B);
  color:var(--washi,#F5EFE0);
}
.mviz__dots{display:inline-flex;gap:.32rem;flex:none}
.mviz__dots i{width:.42rem;height:.42rem;background:var(--washi,#F5EFE0);opacity:.42;display:block}
.mviz__dots i:first-child{opacity:.75;background:var(--amber,#E8A13D)}
.mviz__tab{
  font-family:"Chakra Petch","Hanken Grotesk",system-ui,sans-serif;font-weight:600;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--washi-92,#E9E3D6);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* --- Wnętrze okna --------------------------------------------------------- */
.mviz__body{
  position:relative;
  display:grid;gap:.7rem;
  padding:clamp(.8rem,3cqi,1.25rem);
  background:var(--washi,#F5EFE0);
}
.mviz__pane{background:#fff;border:1px solid var(--hairline,#D9D2BD);padding:.7rem .75rem;min-width:0}

.mviz__lab{
  display:block;
  font-family:"Chakra Petch","Hanken Grotesk",system-ui,sans-serif;font-weight:600;
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--haiiro,#5F6E72);margin-bottom:.45rem;
}
.mviz__id{
  font-family:"Chakra Petch","Hanken Grotesk",system-ui,sans-serif;font-weight:700;
  font-size:clamp(.78rem,2.4cqi,.95rem);color:var(--sumi,#14343B);
}
.mviz__head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap;margin-bottom:.15rem}
.mviz__badge{
  font-family:"Chakra Petch","Hanken Grotesk",system-ui,sans-serif;font-weight:600;
  font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.2em .6em;background:var(--washi-92,#E9E3D6);color:var(--haiiro,#5F6E72);
}
.mviz__btn{
  display:inline-block;justify-self:start;
  padding:.5em 1.05em;background:var(--amber,#E8A13D);color:var(--sumi,#14343B);
  font-family:"Chakra Petch","Hanken Grotesk",system-ui,sans-serif;font-weight:600;
  font-size:clamp(.72rem,2.2cqi,.85rem);
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
}

/* --- Wariant „makieta” (warsztat) ----------------------------------------- */
.mviz__body--makieta{grid-template-columns:1fr}
.mviz__steps{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.mviz__step{
  padding:.42em .6em;background:var(--washi-92,#E9E3D6);
  font-size:clamp(.74rem,2.2cqi,.88rem);color:var(--haiiro,#5F6E72);
  border-left:3px solid transparent;
}
.mviz__hit.mviz__step{background:#fff;border-left-color:var(--amber,#E8A13D);color:var(--sumi,#14343B);font-weight:600;box-shadow:inset 0 0 0 1px var(--hairline,#D9D2BD)}
.mviz__pane--rec{display:grid;gap:.55rem;align-content:start}
.mviz__fields{margin:0;display:grid;gap:.28rem}
.mviz__f{
  display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
  padding:.36em .5em;background:var(--washi,#F5EFE0);
}
.mviz__f dt{
  flex:none;font-family:"Chakra Petch","Hanken Grotesk",system-ui,sans-serif;font-weight:600;
  font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--haiiro,#5F6E72);
}
.mviz__f dd{margin:0;font-size:clamp(.74rem,2.2cqi,.88rem);text-align:right;min-width:0;overflow-wrap:anywhere}

/* --- Wariant „wiedza” (systemy-ai) ---------------------------------------- */
.mviz__ask{display:flex;gap:.45rem;flex-wrap:wrap;align-items:stretch}
.mviz__input{
  flex:1 1 12rem;min-width:0;
  padding:.55em .7em;background:#fff;border:1px solid var(--hairline,#D9D2BD);
  font-size:clamp(.74rem,2.2cqi,.88rem);color:var(--sumi,#14343B);
}
.mviz__ask .mviz__btn{flex:none;align-self:stretch;display:inline-flex;align-items:center}
.mviz__answer{background:#fff;border:1px solid var(--hairline,#D9D2BD);padding:.7rem .75rem}
.mviz__answer p{margin:0 0 .55rem;font-size:clamp(.74rem,2.2cqi,.9rem);color:var(--sumi,#14343B)}
.mviz__src{
  display:inline-block;
  padding:.34em .6em;
  background:rgba(232,161,61,.22);
  border-left:3px solid var(--amber,#E8A13D);
  font-size:clamp(.68rem,2cqi,.8rem);color:var(--sumi,#14343B);
}
.mviz__src b{font-weight:600;color:var(--haiiro,#5F6E72)}

/* --- Wariant „program” (szkolenia-ai) ------------------------------------- */
.mviz__body--program{background:var(--washi,#F5EFE0)}
.mviz__seg{display:inline-flex;border:1px solid var(--hairline,#D9D2BD);background:#fff}
.mviz__segi{
  padding:.32em .6em;
  font-family:"Chakra Petch","Hanken Grotesk",system-ui,sans-serif;font-weight:600;
  font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--haiiro,#5F6E72);
}
.mviz__segi--on{background:var(--sumi,#14343B);color:var(--washi,#F5EFE0)}
.mviz__mods{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;counter-reset:mviz}
.mviz__mod{
  display:flex;gap:.65rem;align-items:baseline;
  background:#fff;border:1px solid var(--hairline,#D9D2BD);
  padding:.5em .65em;
}
.mviz__t{
  flex:none;font-family:"Chakra Petch","Hanken Grotesk",system-ui,sans-serif;font-weight:700;
  font-size:.72rem;letter-spacing:.04em;color:var(--amber,#E8A13D);
}
.mviz__m{font-size:clamp(.74rem,2.2cqi,.88rem);min-width:0}

/* --- Wariant „flow” (automatyzacje-ai) ------------------------------------ */
.mviz__sw{
  display:inline-flex;align-items:center;gap:.45em;
  font-family:"Chakra Petch","Hanken Grotesk",system-ui,sans-serif;font-weight:600;
  font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sumi,#14343B);
  background:#fff;border:1px solid var(--hairline,#D9D2BD);padding:.3em .6em;
}
.mviz__sw i{width:1.5em;height:.72em;background:var(--amber,#E8A13D);position:relative;display:block;flex:none}
.mviz__sw i::after{content:"";position:absolute;top:1px;right:1px;bottom:1px;width:.6em;background:var(--sumi,#14343B)}
.mviz__lane{background:#fff;border:1px solid var(--hairline,#D9D2BD);padding:.6rem .7rem}
.mviz__lane--after{border-left:3px solid var(--amber,#E8A13D)}
.mviz__nodes{margin:0 0 .45rem;display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .35rem}
.mviz__node{
  padding:.34em .55em;background:var(--washi-92,#E9E3D6);
  font-size:clamp(.68rem,2cqi,.8rem);color:var(--haiiro,#5F6E72);
}
.mviz__node--auto{background:var(--sumi,#14343B);color:var(--washi,#F5EFE0)}
.mviz__arr{color:var(--haiiro,#5F6E72);font-size:.8rem;line-height:1}
.mviz__arr--auto{color:var(--amber,#E8A13D)}
.mviz__meta{display:block;font-size:.7rem;color:var(--haiiro,#5F6E72)}

/* --- Podpis pod oknem ------------------------------------------------------ */
.mviz__cap{
  margin-top:.7rem;
  font-family:"Chakra Petch","Hanken Grotesk",system-ui,sans-serif;font-weight:600;
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--haiiro,#5F6E72);
}

/* --- Kursor-łapka ---------------------------------------------------------- */
.mviz__paw{
  position:absolute;width:clamp(20px,7cqi,30px);height:auto;
  left:var(--x1);top:var(--y1);
  transform:translate(-50%,-12%);
  pointer-events:none;
  filter:drop-shadow(0 3px 6px rgba(20,52,59,.28));
}
.mviz__paw ellipse,.mviz__paw path{fill:var(--sumi,#14343B)}

/* Punkty „kliknięcia” - wartości domyślne (układ wąski, kolumna). */
.mviz--makieta{--x1:30%;--y1:19%;--x2:52%;--y2:60%;--x3:38%;--y3:90%}
.mviz--wiedza {--x1:40%;--y1:11%;--x2:24%;--y2:26%;--x3:46%;--y3:88%}
.mviz--program{--x1:46%;--y1:19%;--x2:44%;--y2:50%;--x3:44%;--y3:90%}
.mviz--flow   {--x1:46%;--y1:17%;--x2:42%;--y2:46%;--x3:42%;--y3:88%}

/* --- Układ szeroki (okno szersze niż ~430 px) ------------------------------ */
@container (min-width:430px){
  .mviz__body--makieta{grid-template-columns:minmax(0,34fr) minmax(0,66fr)}
  .mviz--makieta{--x1:20%;--y1:42%;--x2:66%;--y2:46%;--x3:58%;--y3:86%}
  .mviz--wiedza {--x1:38%;--y1:13%;--x2:88%;--y2:13%;--x3:40%;--y3:84%}
  .mviz--program{--x1:72%;--y1:12%;--x2:45%;--y2:46%;--x3:45%;--y3:88%}
  .mviz--flow   {--x1:84%;--y1:12%;--x2:48%;--y2:44%;--x3:66%;--y3:84%}
}

/* --- Animacja: łapka przechodzi i „klika” trzy elementy (pętla 6 s) -------- */
/* Bez JS-a i wyłącznie przy prefers-reduced-motion: no-preference.           */
.mviz__hit{position:relative}
.mviz__hit::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--amber,#E8A13D);opacity:0;
}
.mviz__hit--1{--d:1.12s}
.mviz__hit--2{--d:2.56s}
.mviz__hit--3{--d:4s}

@media (prefers-reduced-motion:no-preference){
  .mviz__paw{animation:mviz-paw 6s var(--ease,cubic-bezier(.22,1,.36,1)) infinite}
  .mviz__hit{animation:mviz-press 6s ease-out var(--d) infinite}
  .mviz__hit::after{animation:mviz-tint 6s ease-out var(--d) infinite}
}

@keyframes mviz-paw{
  0%  {left:105%;top:112%;opacity:0;transform:translate(-50%,-12%) scale(1)}
  6%  {left:calc((105% + var(--x1)) / 2);top:calc((112% + var(--y1)) / 2);opacity:1;transform:translate(-50%,-12%) scale(1)}
  18% {left:var(--x1);top:var(--y1);opacity:1;transform:translate(-50%,-12%) scale(1)}
  22% {left:var(--x1);top:var(--y1);opacity:1;transform:translate(-50%,-12%) scale(.82)}
  26% {left:var(--x1);top:var(--y1);opacity:1;transform:translate(-50%,-12%) scale(1)}
  42% {left:var(--x2);top:var(--y2);opacity:1;transform:translate(-50%,-12%) scale(1)}
  46% {left:var(--x2);top:var(--y2);opacity:1;transform:translate(-50%,-12%) scale(.82)}
  50% {left:var(--x2);top:var(--y2);opacity:1;transform:translate(-50%,-12%) scale(1)}
  66% {left:var(--x3);top:var(--y3);opacity:1;transform:translate(-50%,-12%) scale(1)}
  70% {left:var(--x3);top:var(--y3);opacity:1;transform:translate(-50%,-12%) scale(.82)}
  74% {left:var(--x3);top:var(--y3);opacity:1;transform:translate(-50%,-12%) scale(1)}
  92% {left:105%;top:112%;opacity:1;transform:translate(-50%,-12%) scale(1)}
  100%{left:105%;top:112%;opacity:0;transform:translate(-50%,-12%) scale(1)}
}
@keyframes mviz-press{
  0%,100%{transform:none}
  1%     {transform:scale(.96)}
  9%     {transform:scale(.96)}
  15%    {transform:none}
}
@keyframes mviz-tint{
  0%,100%{opacity:0}
  1%     {opacity:.2}
  9%     {opacity:.2}
  16%    {opacity:0}
}

/* =========================================================================
   TELEFON W SERWISIE + PASEK KCIUKA - sekcja dopisana 2026-09-06.
   Numer żyje w jednym miejscu (neko_opt('phone')), a tu dostaje cztery
   wcielenia: dyskretny link w nagłówku (desktop), wiersz w menu mobilnym,
   pozycja w stopce, para telefon+CTA na dolnym pasku (≤980px).
   Dolny pasek startuje ukryty i pokazuje go dopiero JS (klasa .is-in).
   Nie przenosić wyżej - nadpisuje reguły .nav / .contact__info z góry pliku.
   ========================================================================= */

/* --- (a) nagłówek, desktop: tekstowy link, bez tła, żeby nie licytował się
       z bursztynowym CTA obok --------------------------------------------- */
.nav__tel{display:inline-flex;align-items:center;gap:.5em;margin-left:-.6rem;
  font-family:"Chakra Petch",sans-serif;font-weight:600;font-size:.92rem;letter-spacing:.01em;
  color:var(--washi);opacity:.82;white-space:nowrap;transition:opacity .3s var(--ease),color .3s var(--ease)}
.nav.is-scrolled .nav__tel{color:var(--sumi)}
.nav__tel:hover{opacity:1;color:var(--amber)}
.nav__tel-ic{width:17px;height:17px;flex:none}
.nav__tel-ic g,.nav__tel-ic path{stroke:currentColor;transition:stroke .3s var(--ease)}
/* ≤980px nagłówkowe CTA znika (reguła z linii ~352) - telefon idzie tam,
   gdzie kciuk: do menu mobilnego i na dolny pasek. */
@media (max-width:980px){.nav__tel{display:none}}

/* --- (b) menu mobilne: pełny wiersz pod nawigacją ------------------------- */
.mobile__tel{display:flex;align-items:center;gap:.7rem;position:relative;z-index:1;
  margin-top:1.6rem;padding:.9rem 0 0;border-top:1px solid rgba(245,239,224,.18);
  font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:clamp(1.15rem,4.8vw,1.5rem);
  color:var(--washi);transition:color .3s var(--ease)}
.mobile__tel:hover,.mobile__tel:focus-visible{color:var(--amber)}
.mobile__tel-ic{width:24px;height:24px;flex:none}
.mobile__tel-ic g,.mobile__tel-ic path{stroke:var(--amber)}

/* --- (c) stopka: kolejna pozycja w kolumnie „Firma” ---------------------- */
.footer__col a.footer__tel{display:inline-flex;align-items:center;gap:.45em}
.footer__tel-ic{width:15px;height:15px;flex:none}
.footer__tel-ic g,.footer__tel-ic path{stroke:currentColor}

/* --- (d) strona Kontakt: telefon i mail jako dwa równorzędne wejścia ----- */
.contact__ways{display:grid;gap:.7rem;margin:1.5rem 0 .4rem}
.contact__info a.contact__way{--c:12px;display:flex;align-items:center;gap:.9rem;
  padding:.85rem 1rem;color:var(--sumi);text-decoration:none;
  background:var(--washi);box-shadow:inset 0 0 0 1px var(--hairline);
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)));
  transition:background-color .3s var(--ease),box-shadow .3s var(--ease),--c .3s var(--ease)}
.contact__info a.contact__way:hover{background:var(--white);box-shadow:inset 0 0 0 1px var(--amber);--c:16px}
.contact__way-ic{display:grid;place-items:center;width:40px;height:40px;flex:none;background:var(--sumi);--c:10px;
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.contact__way-ic .ic{width:22px;height:22px}
.contact__way-ic .ic g,.contact__way-ic .ic path{stroke:var(--washi);transition:stroke .3s var(--ease)}
.contact__way:hover .contact__way-ic .ic g,.contact__way:hover .contact__way-ic .ic path{stroke:var(--amber)}
.contact__way-txt{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.contact__way-lab{font-family:"Chakra Petch",sans-serif;font-weight:600;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--haiiro)}
.contact__way-val{font-family:"Chakra Petch",sans-serif;font-weight:700;line-height:1.1;
  font-size:clamp(1.05rem,2.2vw,1.3rem);overflow-wrap:anywhere}
.contact__way--tel .contact__way-val{letter-spacing:.005em}
@media (min-width:900px){.contact__ways{grid-template-columns:1fr}}

/* --- (e) pasek kciuka (tylko ≤980px) ------------------------------------- */
/* z-index 200: nad nawigacją (100) i przyciskiem cookies (150), pod banerem
   zgody (300) i kursorem-łapką (500) - baner ma zawsze pierwszeństwo. */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:200;display:none;gap:1px;
  padding-bottom:env(safe-area-inset-bottom,0px);background:var(--hairline);
  box-shadow:0 -12px 30px -18px rgba(10,26,30,.55);
  transform:translateY(110%);transition:transform .38s var(--ease);will-change:transform}
.callbar.is-in{transform:translateY(0)}
.callbar a{display:flex;align-items:center;justify-content:center;gap:.5em;min-height:56px;
  padding:.7rem .8rem;font-family:"Chakra Petch",sans-serif;font-weight:700;
  font-size:.9rem;line-height:1.15;text-align:center;color:var(--sumi)}
.callbar__tel{flex:0 0 auto;min-width:8.5rem;background:var(--washi);color:var(--sumi)}
.callbar__tel:active{background:var(--washi-92)}
.callbar__cta{flex:1 1 auto;background:var(--amber);color:var(--sumi)}
.callbar__cta:active{background:var(--amber-hi)}
.callbar__ic{width:19px;height:19px;flex:none}
.callbar__ic g,.callbar__ic path{stroke:currentColor}
@media (max-width:980px){
  .callbar{display:flex}
  /* Przycisk „Ustawienia cookies” (bottom:1rem) - podnosimy go nad pasek. */
  .callbar.is-in ~ .consent-reopen{bottom:calc(56px + env(safe-area-inset-bottom,0px) + .6rem)}
}
@media (max-width:360px){.callbar a{font-size:.82rem}.callbar__tel{min-width:7.2rem}}
/* Baner cookie stoi w tym samym rogu ekranu - dopóki jest na wierzchu,
   pasek zjeżdża pod krawędź (fallback bez :has: i tak jest pod ściemnieniem). */
body:has(.consent:not(.is-gone)) .callbar{transform:translateY(110%)}
@media (prefers-reduced-motion:reduce){.callbar{transition:none}}
/* Wydruk: pasek jest sterowany kciukiem, na papierze to tylko czarny pas na
   dole strony (numer i tak stoi w stopce i na Kontakcie). */
@media print{.callbar{display:none!important}}

/* =========================================================================
   KADR ZDJĘCIOWY W SEKCJACH - komponent CZEKAJĄCY NA ZDJĘCIA.
   UWAGA: w szablonach nie ma dziś ANI JEDNEGO użycia tych klas i to jest stan
   docelowy do czasu własnej sesji. Reguły powstały 2026-09-07 pod trzy kadry
   assets/img/foto-biuro-*.jpg wycięte z sesji Adboosters - te pliki zostały
   usunięte tego samego dnia (właściciel: „Nie możesz wykorzystywać materiałów
   Adboosters"), a odwołania wycięte z tpl-o-nas.php i tpl-kontakt.php.
   Reguł NIE kasujemy, bo komponent jest poprawny i wraca w PLAN-zdjecia.md
   (ustawienie A: poziome kadry wnętrza na /o-nas/ i /kontakt/, pozycja S-1/S-2).
   Zanim wstawisz tu jakikolwiek obraz, przejdź test z zasady 5.0 briefu: napisz
   jednym zdaniem, co ten kadr pokazuje z tego, o czym mówi sąsiedni tekst.
   Nie ma zdania - nie ma obrazu; nierówny układ naprawia się układem.
   Kadry mają być 4/3, żeby aspect-ratio + object-fit niczego nie obcinały.
   Nie przenosić wyżej - nadpisuje .featband .wrap i .about__q z góry pliku.
   ========================================================================= */

/* --- (a) wspólny kadr --- */
.foto{position:relative;margin:0;overflow:hidden;aspect-ratio:4/3;background:var(--sumi-dark)}
.foto img{width:100%;height:100%;object-fit:cover;display:block}

/* --- (b) ciemny pas tematyczny: tekst + zdjęcie w dwóch kolumnach --- */
.featband--foto .wrap{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(1.8rem,4vw,3.4rem);align-items:center}
.featband--foto .featband__in{max-width:46ch}
.featband--foto .foto{box-shadow:inset 0 0 0 1px rgba(245,239,224,.14)}
@media (max-width:860px){
  .featband--foto .wrap{grid-template-columns:1fr}
  .featband--foto .featband__in{max-width:60ch}
}

/* --- (c) zamykający cytat na /o-nas/ obok zdjęcia --- */
.about--foto .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:clamp(1.8rem,4vw,3.4rem);align-items:center}
.about--foto .about__q{max-width:44ch}
@media (max-width:860px){.about--foto .wrap{grid-template-columns:1fr}}

/* --- (d) Kontakt: kadr pod danymi spółki, wypełnia lewą kolumnę panelu --- */
.contact__foto{margin-top:1.6rem}
@media (max-width:760px){.contact__foto{margin-top:1.2rem}}
/* Ze zdjęciem lewa kolumna jest wyższa od formularza. Przy align-items:start
   (reguła z góry pliku) cała nadwyżka bieli zbierała się pod przyciskiem
   „Wyślij"; centrowanie rozkłada ją nad i pod formularzem. */
@media (min-width:761px){.contactpanel .contact__grid{align-items:center}}

/* =========================================================================
   FORMULARZ - pola kwalifikujące: selecty, podpowiedzi, oznaczenie pól
   wymaganych, lista błędów. Dopisane na końcu pliku świadomie: reguł
   .field input / .field textarea (góra pliku) nie ruszamy, bo są przetestowane,
   a select ma inne wymagania (background-image + appearance).
   ========================================================================= */

/* Select NIE MOŻE wejść do reguły .field input,.field textarea - tam background
   jest skrótem, który przy :focus wyczyściłby strzałkę. Dlatego osobna reguła,
   w niej background-color i background-image ustawione niezależnie. */
.field select{--c:10px;padding:.8em 2.7em .8em 1em;
  background-color:var(--washi);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%235F6E72' stroke-width='1.7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.05em center;
  border:1px solid var(--hairline);border-radius:0;font:inherit;color:var(--sumi);
  appearance:none;-webkit-appearance:none;
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)));
  transition:border-color .3s,background-color .3s}
.field select:focus{outline:none;border-color:var(--amber);background-color:var(--white)}
.field select option{color:var(--sumi)}

/* Pole odrzucone przez walidację serwera (aria-invalid z szablonu). Sygnał był
   dotąd tylko dla czytników ekranu. Bez czerwieni - paleta jej nie ma - i bez
   ambera, który na tym tle nie dobija do 3:1.
   UWAGA na kolejność: ta reguła ma tę samą wagę co reguła fokusa niżej, więc stoi
   NAD nią świadomie - inaczej pole z błędem gubiłoby wskaźnik fokusa. */
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.field select[aria-invalid="true"]{
  border-color:var(--sumi);box-shadow:inset 0 0 0 1px var(--sumi)}
.form__rodo input[aria-invalid="true"]{outline:2px solid var(--sumi);outline-offset:1px}

/* Focus klawiaturowy w polach formularza. `outline` jest tu bezużyteczny -
   clip-path pola obcina go razem z narożnikami, więc ring rysujemy wewnątrz.
   Ring jest DWUTONOWY świadomie: amber na washi to 1,91:1, czyli poniżej progu
   3:1 dla wskaźnika fokusa, więc kolor marki zostaje, a granicę robi sumi
   (11,56:1 na washi). Kolejność cieni ma znaczenie - pierwszy leży na wierzchu. */
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{
  border-color:var(--amber);box-shadow:inset 0 0 0 2px var(--amber),inset 0 0 0 3px var(--sumi)}
.form__rodo input:focus-visible{outline:3px solid var(--sumi);outline-offset:2px}

/* Podpowiedzi: para kontaktowa (e-mail albo telefon) i pole strony firmowej.
   Ujemny margines dociąga podpowiedź do wiersza, nad którym stoi (.form ma gap:1rem);
   wewnątrz .field (flex column z gap:.35rem) jest już zbędny i podciągałby tekst na pole. */
.form__hint{margin:-.45rem 0 0;font-size:.82rem;color:var(--haiiro)}
.form__hint--start{margin:0}
.field .form__hint{margin:0}
.field__req{color:var(--sumi);font-weight:700}

/* Komunikat błędu przy konkretnym polu (zbiorcza lista zostaje nad formularzem). */
.field__err{margin:-.65rem 0 0;font-size:.82rem;font-weight:600;color:var(--sumi)}
.field .field__err{margin:0}

/* Podłoga szerokości selecta (najdłuższa opcja) przechodziła na kolumnę gridu
   i rozpychała formularz poza panel przy viewportach < ~322 px, a body ma
   overflow-x:hidden, więc obciętego pola nie da się przewinąć. */
.field{min-width:0}
.field input,.field textarea,.field select{width:100%;min-width:0}

/* Lista błędów w .form__err (jeden komunikat = sam akapit, kilka = lista). */
.form__err p{margin:0}
.form__err ul{margin:.4rem 0 0;padding-left:1.15rem}
.form__err li{margin:.15rem 0}

/* =========================================================================
   [neko_compare] - DWA TORY TEGO SAMEGO PROCESU (dziś / po wdrożeniu).
   Komponent treści bloga, kontrakt i opis stanów: inc/content.php (na końcu).
   Dopisane NA KOŃCU pliku świadomie - reguł .nchart / .nsteps / .tasktable
   (sekcja „Komponenty treści”, ~linie 600-690) nie ruszamy, są przetestowane.

   ZASADY RYSOWANIA (nie do negocjacji):
   1. Płaskie kolory wyłącznie z palety. Zero gradientów, zero box-shadow,
      zero filter, zero warstw z przezroczystością.
   2. Ścięcia 45° tylko przez clip-path, zawsze w parze prawy-górny /
      lewy-dolny. --c zgodne z resztą motywu: 16px na figurze (jak .nchart),
      11px na chipie (jak .nsteps__step), 3px na markerze i próbce legendy.
   3. Amber występuje DOKŁADNIE dwa razy: lewa krawędź toru „po wdrożeniu”
      i kwadracik przy węźle, który zostaje przy człowieku. Tor pełen amberu
      byłby krzykiem - stan „robi system” jest sumi.
   4. Bez numeracji węzłów. <ol> niesie kolejność dla czytnika ekranu, ale
      wizualnie numerów nie ma: dwa numerowane tory obok siebie sugerowałyby,
      że krok 3 toru A odpowiada krokowi 3 toru B. Nie odpowiada.
   5. Strzałka to ::after na .ncmp__node, nie osobny element DOM - w <ol>
      wolno trzymać wyłącznie <li>. Dlatego chip jest osobnym <span>:
      clip-path na <li> obcinałby razem z narożnikami także tę strzałkę.
   6. Tory ZAWSZE jeden pod drugim, nigdy obok siebie, nawet przy 1068px.
      Kolejność czytania „przed → po” jest pionowa, a sześć węzłów w dwóch
      kolumnach po 320px byłoby nieczytelne.
   7. Próg przełączenia w pion to CONTAINER QUERY, nie media query -
      komponent musi znieść 335-721px w kolumnie wpisu (.prose) ORAZ do
      1068px w .uband--steps na landingach usług. Szerokość okna nic tu
      nie mówi. 560px dla spójności z .nsteps, które ma tam media query.
   8. Zero JS i zero [data-reveal]. Gdyby kot-czuwa.js nie wykonał się do
      końca, `.js [data-reveal]{opacity:0}` zostawiłby figurę niewidoczną na
      zawsze - przy grafice niosącej treść merytoryczną to nie kosmetyka.
      UWAGA: .nchart i .nsteps mają dziś data-reveal, więc na jednej stronie
      są dwa reżimy. Ujednolicenie to osobna decyzja właściciela.
   ========================================================================= */

.ncmp{container-type:inline-size;margin:1.9em 0;padding:1.4rem clamp(1.1rem,3vw,1.6rem);
  background:var(--white);border:1px solid var(--hairline);--c:16px;
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.ncmp__title{font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:1rem;line-height:1.35;color:var(--sumi);margin:0 0 1.15rem}

/* Tor. Obie krawędzie są, żeby chipy stały w jednej pionowej linii; kolorem
   różni się tylko tor „po wdrożeniu”. */
.ncmp__lane{padding-left:.95rem;border-left:3px solid var(--hairline)}
.ncmp__lane+.ncmp__lane{margin-top:1.3rem}
.ncmp__lane--b{border-left-color:var(--amber)}
.ncmp__lab{margin:0 0 .65rem;font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--haiiro)}
.ncmp__lane--b .ncmp__lab{color:var(--sumi)}

/* Lista węzłów. Reset jest konieczny: .prose ol li ma licznik w ::before. */
.ncmp__nodes{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.ncmp__node{display:flex;align-items:center;gap:.5rem;min-width:0;margin:0}
/* .prose ol li ma (0,1,2) i wygrywa z samym .ncmp__node - stąd prefiks .prose:
   bez niego zostaje padding-left:2em i licznik z ::before. */
.prose .ncmp__nodes{padding-left:0}
.prose .ncmp__node{position:static;padding-left:0}
.prose .ncmp__node::before{content:none}
.prose .ncmp__node+.ncmp__node{margin-top:0}
.ncmp__node:not(:last-child)::after{content:"→";color:var(--haiiro);font-weight:700;font-size:1.05rem;line-height:1}

.ncmp__chip{display:inline-block;max-width:20rem;padding:.5rem .85rem;font-size:.88rem;font-weight:600;
  line-height:1.3;background:var(--washi);border:1px solid var(--hairline);color:var(--sumi);--c:11px;
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.ncmp__node.is-auto .ncmp__chip{background:var(--sumi);border-color:var(--sumi);color:var(--washi)}
.ncmp__node.is-human .ncmp__chip{background:var(--white);border:2px solid var(--sumi);color:var(--sumi)}
.ncmp__node.is-human .ncmp__chip::before{content:"";display:inline-block;width:.55rem;height:.55rem;
  margin-right:.5rem;background:var(--amber);--c:3px;
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.ncmp__node.is-drop .ncmp__chip{background:transparent;border:1px dashed var(--hairline);color:var(--haiiro);text-decoration:line-through}

.ncmp__note{margin:.75rem 0 0;font-size:.85rem;line-height:1.45;color:var(--haiiro)}

/* Legenda - tylko stany faktycznie użyte (składa ją PHP). */
.ncmp__legend{list-style:none;margin:1.25rem 0 0;padding:.9rem 0 0;border-top:1px solid var(--hairline);
  display:flex;flex-wrap:wrap;gap:.5rem 1.3rem;font-size:.82rem;color:var(--haiiro)}
.prose .ncmp__legend{padding-left:0}
.ncmp__legend li{display:flex;align-items:center;gap:.45rem;margin:0}
.prose .ncmp__legend li{position:static;padding-left:0}
.prose .ncmp__legend li::before{content:none}
.prose .ncmp__legend li+li{margin-top:0}
.ncmp__sw{flex:none;width:1.15rem;height:.85rem;--c:3px;
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.ncmp__sw.is-auto{background:var(--sumi)}
.ncmp__sw.is-human{background:var(--white);border:2px solid var(--sumi)}
.ncmp__sw.is-drop{background:transparent;border:1px dashed var(--hairline)}

/* Stan węzła podany tekstem dla czytnika ekranu. Motyw nie miał dotąd żadnej
   klasy visually-hidden - jeśli będzie potrzebna gdzie indziej, przenieść wyżej
   pod ogólną nazwą, a tę zostawić jako alias. */
.ncmp__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Pion: dir="v" albo wąski kontener. Strzałka ustępuje pionowemu łącznikowi,
   dokładnie jak .nsteps--v .nsteps__step::before. */
.ncmp--v .ncmp__nodes{flex-direction:column;align-items:stretch;gap:0}
.ncmp--v .ncmp__node{flex-direction:column;align-items:stretch;gap:0}
.ncmp--v .ncmp__node:not(:last-child)::after{content:"";width:2px;height:.6rem;margin-left:1.15rem;background:var(--hairline)}
.ncmp--v .ncmp__chip{max-width:none}
@container (max-width:560px){
  .ncmp__nodes{flex-direction:column;align-items:stretch;gap:0}
  .ncmp__node{flex-direction:column;align-items:stretch;gap:0}
  .ncmp__node:not(:last-child)::after{content:"";width:2px;height:.6rem;margin-left:1.15rem;background:var(--hairline)}
  .ncmp__chip{max-width:none}
}


/* ==========================================================================
   PSYS - „Tak wygląda makieta po warsztacie". Trzy pulpity klikalnych makiet.
   Doklejać na KOŃCU assets/css/kot-czuwa.css (arkusz jest scalony, ładuje się
   wszędzie - sekcja może więc stanąć zarówno na froncie, jak i na landingu).

   Sekcja jest statyczna: żadnego JS, żadnych zakładek. Jedyny ruch to istniejący
   [data-reveal] z kot-czuwa.js - ten sam, co w reszcie strony.

   Dlaczego okna stoją JEDNO POD DRUGIM, a nie w siatce 3×1:
   pas kafelków pulpitu ma w źródle 1169 px CSS szerokości. W siatce 3×1 kafel ma
   przy --wrap:1180px dokładnie 340 px, czyli skala 0,29 - etykieta 14 px zjeżdża
   do 4 px, a wielka liczba 32 px do 9 px. Zrzut przestaje cokolwiek pokazywać
   i łamie zasadę 5.0 (obraz ma mieć sens w swoim miejscu). W układzie pionowym
   ten sam pas dostaje pełne 1068 px, czyli skalę 0,91 - etykiety renderują się
   przy ~12,8 px i są czytelne.
   ========================================================================== */

.psys{background:var(--washi);padding:clamp(3.4rem,7vw,6rem) 0}

.psys__head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.2rem,3vw,2.6rem);align-items:end;margin-bottom:clamp(1.8rem,4vw,2.8rem)}
.psys__head h2{font-size:clamp(1.7rem,3.2vw,2.5rem);margin-top:.5rem}
.psys__lead{color:var(--haiiro);font-size:clamp(1rem,1.2vw,1.12rem);max-width:52ch}
@media(max-width:860px){.psys__head{grid-template-columns:1fr;align-items:start}}

.psys__list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(2.2rem,4.5vw,3.4rem)}
/* min-width:0 jest tu OBOWIĄZKOWE. Bez tego element siatki nie schodzi poniżej
   min-content, a min-content okna to 920 px z .psys__shot img - cała sekcja
   (nagłówek, podpis, chipy) wypychała stronę w bok na telefonie. */
.psys__item{display:grid;gap:1.1rem;min-width:0}

/* --- okno makiety --------------------------------------------------------- */
/* Ramka jest jedynym miejscem, w którym trzy obce palety (zieleń / ochra / czerń)
   dostają wspólny język Neko: sumi-dark pasek, hairline, ścięcie 45°. */
.psys__win{--c:20px;margin:0;min-width:0;background:var(--white);border:1px solid var(--hairline);
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.psys__bar{display:flex;align-items:center;gap:.7rem;padding:.55rem .9rem;background:var(--sumi);color:var(--washi)}
.psys__dots{display:inline-flex;gap:.32rem;flex:none}
.psys__dots i{display:block;width:.42rem;height:.42rem;background:var(--washi);opacity:.42}
.psys__dots i:first-child{opacity:1;background:var(--amber)}
.psys__tab{font-family:"Chakra Petch";font-weight:600;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--washi-92);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* „dane przykładowe" siedzi w pasku, a nie pod obrazem: kadr obciął firmowy napis
   „Makieta demo", więc uczciwość przekazu musi przejąć nasza własna ramka. */
.psys__note{margin-left:auto;flex:none;font-family:"Chakra Petch";font-weight:600;font-size:.62rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--haiiro-dark);white-space:nowrap}

/* Kadr przewijany w bok zamiast skalowanego w dół: poniżej ~1030 px okna
   przeglądarki pas kafelków zszedłby poniżej progu czytelności. Ten sam wzorzec,
   co .pdemo__tabs na telefonie. */
.psys__shot{min-width:0;overflow-x:auto;overscroll-behavior-x:contain;background:var(--washi-92);scrollbar-width:none}
.psys__shot::-webkit-scrollbar{display:none}
.psys__shot:focus-visible{outline:3px solid var(--amber);outline-offset:-3px}
.psys__shot img{display:block;width:100%;min-width:920px;height:auto}

.psys__cap{padding:.75rem .95rem .9rem;border-top:1px solid var(--hairline);
  font-size:.88rem;line-height:1.5;color:var(--haiiro)}

.psys__swipe{display:none;margin-top:-.35rem;font-family:"Chakra Petch";font-weight:600;
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--haiiro)}
@media(max-width:1030px){.psys__swipe{display:block}}

/* --- opis pod oknem ------------------------------------------------------- */
.psys__body{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(1rem,2.4vw,2.4rem);align-items:start;min-width:0}
.psys__body>*{min-width:0}
@media(max-width:860px){.psys__body{grid-template-columns:1fr;gap:1.1rem}}

.psys__branch{display:block;font-family:"Chakra Petch";font-weight:600;font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.psys__body h3{font-family:"Chakra Petch";font-weight:700;font-size:clamp(1.15rem,1.9vw,1.45rem);
  line-height:1.15;margin-top:.45rem;color:var(--sumi)}
.psys__pain{margin-top:.6rem;max-width:46ch}

.psys__meta{display:grid;gap:.55rem;align-content:start}
.psys__screens-lab{font-family:"Chakra Petch";font-weight:600;font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--haiiro)}
.psys__screens{display:flex;flex-wrap:wrap;gap:.4rem}
.psys__chip{--c:6px;padding:.3em .7em;background:var(--washi-92);border:1px solid var(--hairline);
  font-family:"Chakra Petch";font-weight:600;font-size:.78rem;color:var(--sumi);
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.psys__roles{font-size:.93rem;color:var(--haiiro)}

/* Link renderuje się TYLKO gdy w danych jest adres - patrz docblock szablonu.
   Ma być wyraźny (pełny przycisk), bo prowadzi poza serwis. */
.psys__openwrap{margin-top:.35rem}
.psys__open{font-size:.92rem;padding:.72em 1.25em}
.psys__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* --- zastrzeżenie i CTA ---------------------------------------------------- */
.psys__fine{margin-top:clamp(1.8rem,3.5vw,2.6rem);padding-left:.95rem;
  border-left:2px solid var(--hairline);max-width:74ch;font-size:.93rem;color:var(--haiiro)}
.psys__cta{margin-top:1.5rem}

/* ===== REALIZACJA ARKA+ (.rlz) - dowód innej kategorii niż makiety =========
   Sekcja stoi zaraz za .psys i MUSI się od niej różnić na pierwszy rzut oka,
   bo makieta i wdrożony system to dwie różne obietnice. Rozróżnienie robią:
   białe tło (makiety siedzą na washi), ciemna metryczka z nazwą klienta,
   cięcie 44 px na oknie zamiast 20 px oraz bursztynowa zakładka „instancja
   demonstracyjna” zamiast szarej „dane przykładowe”.
   Rytmu jasne-ciemne to nie psuje: .rlz jest jasna, więc między ciemnym
   .process__panel a ciemnym .why nadal stoi jasny blok (tu: .psys + .rlz). */
.rlz{background:var(--white);padding:clamp(3.4rem,7vw,6rem) 0}
.rlz__head{max-width:62ch}
.rlz__eyebrow{color:var(--amber)}
.rlz__head h2{font-size:clamp(1.7rem,3.2vw,2.5rem);margin-top:.5rem}
.rlz__lead{margin-top:.9rem;color:var(--haiiro);font-size:clamp(1rem,1.2vw,1.12rem)}

/* --- metryczka klienta (jedyne miejsce z nazwą realnej firmy) -------------- */
.rlz__card{--c:44px;margin-top:clamp(1.8rem,3.5vw,2.6rem);background:var(--sumi-dark);color:var(--washi);
  padding:clamp(1.4rem,2.8vw,2.2rem) clamp(1.3rem,3vw,2.4rem);
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.rlz__meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(1rem,2.2vw,2rem)}
.rlz__metaitem{min-width:0}
.rlz__meta dt{font-family:"Chakra Petch";font-weight:600;font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--haiiro-dark)}
.rlz__meta dd{margin:.35rem 0 0;font-size:.98rem;line-height:1.45;color:var(--washi)}
.rlz__live{display:inline-flex;align-items:center;gap:.4em;font-family:"Chakra Petch";font-weight:600;
  color:var(--amber);text-transform:uppercase;letter-spacing:.08em;font-size:.86rem}
.rlz__live::before{content:"";width:.5rem;height:.5rem;background:var(--amber);flex:none}

/* --- było / jest ----------------------------------------------------------- */
.rlz__story{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:clamp(1rem,2.4vw,2rem);margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.rlz__col{min-width:0;padding:1.1rem 1.2rem;border-left:3px solid var(--hairline);background:var(--washi)}
.rlz__col--now{border-left-color:var(--amber)}
.rlz__col h3{font-family:"Chakra Petch";font-weight:700;font-size:.78rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--haiiro)}
.rlz__col--now h3{color:var(--amber)}
.rlz__col p{margin-top:.55rem;font-size:.98rem;line-height:1.55}
.rlz__col--was p{color:var(--haiiro)}

/* --- reguły, których system pilnuje sam ------------------------------------ */
.rlz__rules{margin-top:clamp(1.6rem,3vw,2.4rem);max-width:74ch}
.rlz__rules-lab{font-family:"Chakra Petch";font-weight:600;font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--haiiro)}
.rlz__rulelist{list-style:none;margin:.7rem 0 0;padding:0;display:grid;gap:.5rem}
.rlz__rulelist li{position:relative;padding-left:1.5rem;font-size:.98rem;line-height:1.5}
.rlz__rulelist li::before{content:"";position:absolute;left:0;top:.62em;width:.6rem;height:.6rem;
  background:var(--amber);clip-path:polygon(0 0,100% 0,100% 100%)}
/* Reguła .rlz__roles usunięta 2026-09-13: role przeniesione do .rz__roles (blok .rz__*
   niżej), a martwa klasa z var(--haiiro) w sąsiedztwie ciemnych komponentów .rlz__* jest
   gotową pułapką - haiiro wolno stawiać WYŁĄCZNIE na jasnym tle. */

/* --- okna ze zrzutami ------------------------------------------------------ */
/* Ten sam wzorzec przewijania w bok co .psys__shot: poniżej ~1030 px okna
   przeglądarki ekran skalowany w dół schodzi poniżej progu czytelności. */
.rlz__shots{list-style:none;margin:clamp(1.8rem,3.5vw,2.8rem) 0 0;padding:0;
  display:grid;gap:clamp(1.6rem,3vw,2.6rem)}
.rlz__shotitem{display:grid;gap:.6rem;min-width:0}
.rlz__win{--c:44px;margin:0;min-width:0;background:var(--white);border:1px solid var(--hairline);
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
/* padding-right > --c okna: ścięcie 44 px zjadało ostatnie litery napisu
   „instancja demonstracyjna”, a to jest zdanie, którego nie wolno urwać. */
.rlz__bar{display:flex;align-items:center;gap:.7rem;padding:.55rem 3rem .55rem .9rem;
  background:var(--sumi-dark);color:var(--washi)}
.rlz__dots{display:inline-flex;gap:.32rem;flex:none}
.rlz__dots i{display:block;width:.42rem;height:.42rem;background:var(--washi);opacity:.42}
.rlz__dots i:first-child{opacity:1;background:var(--amber)}
.rlz__tab{font-family:"Chakra Petch";font-weight:600;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--washi-92);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Zakładka NIE mówi „Makieta” - to jest system. Ale mówi, skąd jest zrzut:
   liczby na ekranach są zasiewowe i nie wolno ich czytać jako stanu szkoły. */
.rlz__note{margin-left:auto;flex:none;font-family:"Chakra Petch";font-weight:600;font-size:.62rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--amber);white-space:nowrap}
.rlz__shot{min-width:0;overflow-x:auto;overscroll-behavior-x:contain;background:var(--washi-92);scrollbar-width:none}
.rlz__shot::-webkit-scrollbar{display:none}
.rlz__shot:focus-visible{outline:3px solid var(--amber);outline-offset:-3px}
.rlz__shot img{display:block;width:100%;min-width:920px;height:auto}
.rlz__cap{padding:.75rem .95rem .9rem;border-top:1px solid var(--hairline);
  font-size:.88rem;line-height:1.5;color:var(--haiiro)}
.rlz__swipe{display:none;font-family:"Chakra Petch";font-weight:600;font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--haiiro)}
@media(max-width:1030px){.rlz__swipe{display:block}}

/* --- zastrzeżenie, rozwój, CTA --------------------------------------------- */
.rlz__fine{margin-top:clamp(1.6rem,3vw,2.4rem);padding-left:.95rem;border-left:2px solid var(--amber);
  max-width:74ch;font-size:.93rem;color:var(--haiiro)}
.rlz__next{--c:20px;margin-top:1.4rem;padding:1rem 1.2rem;background:var(--washi);max-width:74ch;
  font-size:.98rem;line-height:1.55;
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.rlz__cta{margin-top:1.5rem}
@media(max-width:860px){.rlz__card{--c:28px}.rlz__win{--c:28px}.rlz__bar{padding-right:2.1rem}}

/* ===== REALIZACJE - archiwum /realizacje/ i pełny case (.rz) ================
   Świadomie MAŁO nowych reguł: cały wygląd case'u to te same klasy .rlz__*, co
   w zajawce ARKA+ na stronie głównej (metryczka, było/jest, reguły, okna ze
   zrzutami, zastrzeżenie). Dwa źródła prawdy dla tego samego komponentu
   oznaczałyby, że któraś z zasad uczciwości rozjedzie się przy pierwszej
   poprawce - a siedzą w nich zdania, których nie wolno zgubić.
   Hero obu szablonów to .bloghero (ciemne, ze znakiem 猫): .nav--solid nie jest
   nigdzie nadawane, więc na jasnym tle logo i linki w washi zniknęłyby. */

/* --- hero (wspólne dla archiwum i case'u) ---------------------------------- */
.rzhero .crumbs,.rzhero .crumbs a{color:rgba(245,239,224,.72)}
.rzhero .crumbs a:hover{color:var(--amber)}
.rzhero .lead{margin-top:.9rem;max-width:64ch}
.rzhero__note{margin-top:.8rem;max-width:60ch;font-size:.95rem;color:var(--haiiro-dark)}
.rzhero__meta{margin-top:1rem;font-family:"Chakra Petch";font-weight:600;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}

/* --- archiwum: kafle -------------------------------------------------------
   .postgrid/.postcard bez zmian; dochodzi tylko status, bo „wdrożony”
   i „w trakcie” to dwie różne obietnice i czytelnik ma je rozróżnić PRZED
   kliknięciem, a nie dopiero w metryczce w środku. */
.rzlist{padding-top:clamp(1.6rem,3vw,2.4rem)}
.rzlist__empty{max-width:66ch;padding:2.5rem 0}
.rzcard__status{font-family:"Chakra Petch";font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:.7rem;color:var(--haiiro)}
.rzcard__status.is-live{color:var(--amber)}
.rzcard__status.is-live::before{content:"";display:inline-block;width:.42rem;height:.42rem;
  margin-right:.4em;vertical-align:.06em;background:var(--amber)}

/* --- case: tło i rytm ------------------------------------------------------
   Białe, nie washi: wszystkie bloki .rlz__* są rysowane pod białe tło
   (.rlz__col i .rlz__next mają washi jako wypełnienie i na washi straciłyby
   kontrast). Case czyta się jak dokument, więc jedno spokojne tło pod całość. */
.rzbody{background:var(--white);padding:clamp(2rem,4vw,3.2rem) 0 clamp(2.6rem,5vw,4rem)}

/* Nagłówki „Było / Jest” są tu <h2> (na stronie głównej <h3>) - konspekt case'u
   musi się trzymać kupy, bo to materiał czytany bez reszty strony. */
.rzbody .rlz__col h2{font-family:"Chakra Petch";font-weight:700;font-size:.78rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--haiiro);margin:0}
.rzbody .rlz__col--now h2{color:var(--amber)}

/* --- kto co widzi ---------------------------------------------------------- */
.rz__roles-lab{margin-top:1.6rem}
.rz__roles{list-style:none;margin:.7rem 0 0;padding:0;display:grid;gap:.5rem}
.rz__roles li{position:relative;padding-left:1.5rem;font-size:.98rem;line-height:1.5}
.rz__roles li::before{content:"";position:absolute;left:0;top:.55em;width:.6rem;height:.6rem;
  border:2px solid var(--hairline)}
.rz__roles b{font-family:"Chakra Petch";font-weight:600}

/* --- narracja, stempel, powrót --------------------------------------------- */
.rzcase__prose{margin-top:clamp(1.8rem,3.5vw,2.8rem);max-width:70ch}
/* Data „opis sprawdzony” jest mechanizmem uczciwości, nie ozdobą: status brzmi
   „rozwijany w kolejnych etapach”, więc tekst zestarzeje się po cichu. */
.rz__stamp{margin-top:1.1rem;padding-left:.95rem;border-left:2px solid var(--hairline);
  max-width:74ch;font-size:.9rem;color:var(--haiiro)}
.rz__back{margin-top:clamp(1.8rem,3.5vw,2.6rem);font-family:"Chakra Petch";font-weight:600}
.rz__back a{color:var(--haiiro)}
.rz__back a:hover{color:var(--amber)}
/* Jedna realizacja = jedna szersza kolumna zamiast wąskiego kafla w siatce na trzy.
   Klasę nadaje archive-realizacja.php z liczby pozycji w pętli, nie CSS-owe :has() -
   ma działać tak samo w każdej przeglądarce. */
.postgrid--one{grid-template-columns:minmax(0,520px)}