/* ============================================================================
   RHO DEEP — warstwa DOMYKAJĄCA. Ładowana jako OSTATNIA, więc wygrywa
   z arkuszami obszarowymi. Trzymamy tu reguły spójności całego serwisu.
   Poprawka 04.09.2026: „za kolorowo".
   ========================================================================= */

/* ---- 1. SPOKOJNA PALETA W LISTACH PRODUKTÓW ----
   Gdy produkty stoją obok siebie, każdy we własnym kolorze, wychodzi tęcza.
   Zasada: w LIŚCIE tekst jest atramentowy, a kolor produktu zostaje tylko
   jako mały znacznik. Pełny kolor należy się produktowi na JEGO stronie. */
.prod-k .kat,.pcard .cat,.aicard .tag,.ekox-karta .ekox-kat,.innekafel .cat,.qp .kat{
  color:var(--muted2);letter-spacing:.13em}
.prod-k h3,.pcard h3,.ekox-karta h3,.ekox-karta b,.innekafel b{color:var(--ink)}
.prod-k .go,.pcard .go,.ekox-karta .go,.innekafel .go{color:var(--ink2)}
.prod-k:hover .go,.pcard:hover .go{color:var(--ink)}

/* KOLOR NIESIE WYŁĄCZNIE IKONA. Nazwa produktu, kategoria i opis — atramentowe. */
.prod-k .ik,.ekox-ikona,.mega-ico,.kafla-ik{
  background:color-mix(in srgb,var(--c) 14%,transparent);border:0;color:var(--c)}
.prod-k .ik svg,.ekox-ikona svg,.mega-ico svg{opacity:1}
.prod-k::after{opacity:.06}
.prod-k:hover::after{opacity:.16}
.prod-k::before,.pcard::before{opacity:.22}

/* kolorowe kreski na krawędziach kart w listach — zdejmujemy */
.branza{border-left:0}
.aicard::before{width:2px;opacity:.35}
/* pigułki i znaczniki tekstowe bez koloru produktu */
.hero-chip::before,.mega-i-plaski .mega-t::before{background:var(--muted2);box-shadow:none}

/* ---- 2. NAGŁÓWKI: jeden atrament (domknięcie reguły z rdzenia) ---- */
h1,h2,h3,h4{color:var(--ink)}
h1 .hl,h2 .hl,h3 .hl,h1 .l2,h2 .l2,h1 .grad-txt,h2 .grad-txt,
.phero h1 span,.shead h2 span{color:var(--muted);-webkit-text-fill-color:var(--muted);background:none}

/* ---- 3. LICZBY: jeden gradient dla wszystkich, nie kolor produktu ---- */
.statrow .n,.kafel .n,.mocna .n{background:var(--grad);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ---- 4. DOMKNIĘCIE: w nagłówku NIC nie jest kolorowe ---- */
h1 *,h2 *,h3 *,h4 *{
  color:var(--muted) !important;-webkit-text-fill-color:var(--muted) !important;
  background:none !important;background-image:none !important}
h1 svg,h2 svg,h3 svg{color:inherit !important;-webkit-text-fill-color:currentColor !important}

/* ---- 5. ODNOŚNIKI W TREŚCI: atrament z podkreśleniem, nie kolorowy tekst ---- */
p a:not(.btn):not(.ctrl),li a:not(.btn):not(.ctrl),.lead a:not(.btn),
.go,.s-link,a.wiecej{color:var(--ink2);text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--ink2) 35%,transparent);text-underline-offset:3px}
p a:not(.btn):hover,li a:not(.btn):hover,.lead a:not(.btn):hover,.go:hover{color:var(--ink);
  text-decoration-color:var(--ink)}
.go{text-decoration:none}
.go:hover{text-decoration:none}

/* ============================================================================
   6. JEDEN CZAT (poprawka 04.09 — „po co są dwa, zrób jedną stronę czatu")
   ========================================================================= */
.czat-sekcja{position:relative;overflow:hidden}
.czat-nag{max-width:760px;margin-bottom:38px}
.czat-nag h1{margin-bottom:16px}
.czat{max-width:900px;border-radius:var(--r-xl);
  background:linear-gradient(180deg,color-mix(in srgb,var(--glass2) 100%,transparent),var(--glass));
  box-shadow:0 1px 0 0 rgba(255,255,255,.07) inset,0 40px 90px -50px rgba(0,0,0,1);
  backdrop-filter:blur(16px);padding:8px 8px 18px;position:relative}
.czat-watek{min-height:330px;max-height:min(58vh,620px);overflow:auto;padding:22px 22px 6px;
  display:flex;flex-direction:column;gap:22px;scrollbar-width:thin}
.cz-wiad{display:flex;gap:14px;align-items:flex-start;animation:czWjazd .5s var(--ease) both}
@keyframes czWjazd{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cz-znak{flex:0 0 34px;width:34px;height:34px;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--violet) 18%,transparent)}
.cz-znak svg{width:22px;height:22px}
.cz-tresc{flex:1;min-width:0}
.cz-tresc p{color:var(--ink2);font-size:15px;line-height:1.7;margin:0 0 10px}
.cz-tresc p:last-child{margin-bottom:0}
.cz-ja{justify-content:flex-end}
.cz-ja .cz-tresc{flex:0 1 auto;max-width:72%;padding:13px 18px;border-radius:18px 18px 4px 18px;
  background:var(--grad);box-shadow:0 12px 30px -14px rgba(124,92,255,.9)}
.cz-ja .cz-tresc p{color:#fff}
.cz-podpowiedzi{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.cz-pd{font:inherit;font-size:13px;color:var(--ink2);background:var(--glass);border:0;cursor:pointer;
  padding:9px 15px;border-radius:999px;text-align:left;
  transition:transform .25s var(--ease),color .2s,background .2s}
.cz-pd:hover{transform:translateY(-2px);color:var(--ink);background:var(--glass2)}
.cz-zwiniete .cz-podpowiedzi{display:none}
.cz-zrodla{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--glass-line)}
.cz-zrodla-t{flex-basis:100%;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted2)}
.cz-zrodlo{font-size:12px;color:var(--ink2);background:var(--glass);padding:6px 12px;border-radius:999px}
.cz-mysli{display:inline-flex;gap:5px;padding:6px 0}
.cz-mysli i{width:7px;height:7px;border-radius:50%;background:var(--muted2);
  animation:czPuls 1.1s var(--ease) infinite}
.cz-mysli i:nth-child(2){animation-delay:.16s}.cz-mysli i:nth-child(3){animation-delay:.32s}
@keyframes czPuls{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.czat-pole{display:flex;gap:8px;align-items:center;margin:14px 14px 0;padding:7px 7px 7px 20px;
  border-radius:999px;background:color-mix(in srgb,var(--panel2) 70%,transparent);
  box-shadow:0 1px 0 0 rgba(255,255,255,.07) inset;transition:box-shadow .4s var(--ease)}
.czat-pole:focus-within{box-shadow:0 1px 0 0 rgba(255,255,255,.12) inset,0 0 0 1px color-mix(in srgb,var(--violet) 55%,transparent)}
.czat-pole input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--ink);
  font:inherit;font-size:15px;padding:11px 0}
.czat-pole input::placeholder{color:var(--muted2)}
.czat-stopka{margin:14px 22px 0;font-size:12.5px;color:var(--muted2);line-height:1.55}
@media(max-width:700px){.cz-ja .cz-tresc{max-width:86%}.czat-watek{padding:16px 14px 4px}}

/* ============================================================================
   7. BLOKI MAJĄ SIĘ STAPIAĆ Z TŁEM  (poprawka 04.09 — „ohydny granat wszędzie”)
   Karta to nie pudełko w innym kolorze. To ledwie widoczna mgiełka światła nad
   tłem strony: żadnego granatowego wypełnienia, żadnych kolorowych obwódek.
   Rozdziela je ODSTĘP i cień, nie kreska.
   ========================================================================= */
.pcard,.kafel,.branza,.i3,.aicard,.qp,.finder,.map,.nowagen-box,.karta,.mocna,.krok,
.innekafel,.prod-k,.kontkafel,.kontform,.kontdane,.ekox-karta,.ekox-linia,.mf-karta,
.czat,.statrow,.statrow>div,.heritage,.logogrid>*,.por,.polityka,.ktab,.cenlock,
.plan,.plany>*,.modul-kafel,.faq-poz,.timeline,.mega-in,.kafla,.mega-feat{
  background:rgba(255,255,255,.028) !important;
  border:0 !important;
  box-shadow:0 1px 0 0 rgba(255,255,255,.05) inset, 0 24px 60px -46px rgba(0,0,0,.9) !important;
  backdrop-filter:blur(10px)}
html[data-theme="deep-light"] .pcard,html[data-theme="deep-light"] .kafel,
html[data-theme="deep-light"] .branza,html[data-theme="deep-light"] .i3,
html[data-theme="deep-light"] .aicard,html[data-theme="deep-light"] .prod-k,
html[data-theme="deep-light"] .innekafel,html[data-theme="deep-light"] .ekox-karta,
html[data-theme="deep-light"] .mocna,html[data-theme="deep-light"] .krok,
html[data-theme="deep-light"] .kontkafel,html[data-theme="deep-light"] .czat,
html[data-theme="deep-light"] .statrow,html[data-theme="deep-light"] .statrow>div,
html[data-theme="deep-light"] .mega-in,html[data-theme="deep-light"] .kafla{
  background:rgba(255,255,255,.72) !important;
  box-shadow:0 1px 2px rgba(24,28,72,.05), 0 22px 50px -40px rgba(24,28,72,.55) !important}

/* uniesienie zamiast obwódki */
.pcard:hover,.prod-k:hover,.kafel:hover,.aicard:hover,.innekafel:hover,.ekox-karta:hover,
.mocna:hover,.branza:hover{
  background:rgba(255,255,255,.05) !important;
  box-shadow:0 1px 0 0 rgba(255,255,255,.08) inset, 0 34px 70px -40px rgba(0,0,0,1) !important}
html[data-theme="deep-light"] .pcard:hover,html[data-theme="deep-light"] .prod-k:hover,
html[data-theme="deep-light"] .kafel:hover,html[data-theme="deep-light"] .aicard:hover{
  background:#fff !important;box-shadow:0 26px 56px -34px rgba(24,28,72,.5) !important}

/* menu i kafle hero potrzebują nieprzezroczystego tła — ale nie granatowego pudełka */
.mega-in{background:color-mix(in srgb,var(--bg) 88%,transparent) !important;
  backdrop-filter:blur(26px) saturate(150%)}
.kafla,.czat{background:color-mix(in srgb,var(--bg) 72%,transparent) !important;
  backdrop-filter:blur(20px)}

/* ---- ŻADNYCH KOLOROWYCH OBWÓDEK (zielonych, czerwonych, akcentowych) ---- */
.nowagen-box,.krok,.mocna,.aicard,.branza,.pomoc-pop,.ekox-linia,.zacheta,.cenlock,
.plan-polecany,.faq-poz,.por{border-left:0 !important;border-top:0 !important;
  border-right:0 !important;border-bottom:0 !important}
.aicard::before,.pcard::before,.ekox-linia::before,.plan::before{display:none !important}
hr,.sep,.dropsep{border-color:rgba(255,255,255,.07) !important}

/* pasy sekcji: subtelna zmiana jasności tła, nie kolorowe pudło */
.pas{background:rgba(255,255,255,.018) !important}
html[data-theme="deep-light"] .pas{background:rgba(24,28,72,.028) !important}
.pas::before{opacity:.18}

/* ============================================================================
   8. NAGŁÓWEK SEKCJI NA CAŁEJ SZEROKOŚCI (poprawka 04.09 — „strona wąska”)
   Zamiast wąskiej kolumny po lewej i pustki po prawej: tytuł z lewej,
   wprowadzenie z prawej. Szerokość ekranu wreszcie pracuje.
   ========================================================================= */
@media(min-width:1100px){
  .shead:not(.center){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    column-gap:64px;align-items:end}
  .shead:not(.center) .eyebrow{grid-column:1;grid-row:1;justify-self:start;margin-bottom:16px}
  .shead:not(.center) h1,.shead:not(.center) h2{grid-column:1;grid-row:2;max-width:16ch;margin:0}
  .shead:not(.center) .lead{grid-column:2;grid-row:1/3;align-self:end;max-width:62ch;margin:0}
  .shead:not(.center) .lead+.lead{grid-column:2;grid-row:3;margin-top:14px}

  /* sekcje pisane bez .shead — tekst też nie może wisieć w lewej ćwiartce */
  .section>.wrap>h2+.lead,.section>.wrap>h1+.lead{max-width:74ch}
}
.shead.center h2,.shead.center h1{max-width:26ch}

/* site.css trzymał nagłówki sekcji w 760 px — stąd wrażenie wąskiej strony */
.shead{max-width:none}
.shead.center{max-width:900px;margin-left:auto;margin-right:auto}
@media(min-width:1100px){
  .shead:not(.center) h1,.shead:not(.center) h2{max-width:19ch}
  .shead:not(.center) .lead{max-width:none}
  .shead:not(.center){grid-template-columns:minmax(0,.95fr) minmax(0,1fr);column-gap:80px}
}

/* Sekcja tekstowa, która została sama w dwukolumnowej siatce, ma zająć całą
   szerokość i ułożyć się jak nagłówek sekcji: tytuł z lewej, treść z prawej. */
@media(min-width:1100px){
  .grid2:has(> :only-child){grid-template-columns:1fr}
  .grid2:has(> :only-child) > *{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr);
    column-gap:80px;align-items:start}
  .grid2:has(> :only-child) > * > .eyebrow{grid-column:1;grid-row:1}
  .grid2:has(> :only-child) > * > h2,.grid2:has(> :only-child) > * > h3{grid-column:1;grid-row:2;max-width:19ch;margin-top:0}
  .grid2:has(> :only-child) > * > .lead{grid-column:2;max-width:none;margin-top:0}
  .grid2:has(> :only-child) > * > .lead+.lead{margin-top:16px}
}

/* ---- 9. ETYKIETY W KARTACH: mały znacznik, nie kolorowy pas ----
   `.pcard` jest kolumną flex, więc `display:inline-block` i tak rozciągał
   etykietę na całą szerokość karty. Stąd te kolorowe belki. */
.feat .f .fn,.pcard .fn,.pcard .cat,.prod-k .kat,.aicard .tag,.i3-n,.mocna .tag,.krok .kn{
  align-self:flex-start;justify-self:start;width:auto;max-width:max-content;
  background:transparent !important;border:0 !important;padding:0 !important;
  color:var(--muted2) !important;font-size:10.5px;letter-spacing:.14em}
.feat .f .fn::before,.pcard .cat::before{content:"";display:inline-block;width:5px;height:5px;
  border-radius:50%;background:var(--c);margin-right:8px;vertical-align:middle;transform:translateY(-1px)}

/* ---- 10. JASNE ILUSTRACJE NA CIEMNYM TLE ----
   Nie da się „wtopić” białego renderu bez przygaszenia go. Wygaszamy jasność,
   podbijamy nasycenie i rozpuszczamy krawędzie — zamiast wycinać biały prostokąt. */
html[data-theme="deep"] .media img,
html[data-theme="deep"] .hero-art img,
html[data-theme="deep"] .phero img:not(.logo):not([src*="logo"]){
  filter:brightness(.72) contrast(1.12) saturate(1.25);
  -webkit-mask-image:radial-gradient(72% 72% at 50% 47%,#000 26%,rgba(0,0,0,.6) 62%,transparent 84%);
  mask-image:radial-gradient(72% 72% at 50% 47%,#000 26%,rgba(0,0,0,.6) 62%,transparent 84%);
  border-radius:0 !important;transition:filter .8s var(--ease),transform 1.1s var(--ease)}
html[data-theme="deep"] .media:hover img,
html[data-theme="deep"] .phero:hover img:not(.logo){filter:brightness(.86) contrast(1.1) saturate(1.3)}

/* ---- 11. ZNAKI PRODUKTÓW — bryły izometryczne, bez kafelka i bez obwódki ---- */
.znak{width:var(--px,56px);height:var(--px,56px);flex:0 0 var(--px,56px);
  display:inline-grid;place-items:center;color:var(--c);
  background:none !important;border:0 !important;box-shadow:none !important;border-radius:0;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.55)) drop-shadow(0 0 26px color-mix(in srgb,var(--c) 18%,transparent));
  transition:transform .55s var(--ease),filter .55s var(--ease)}
.znak svg{width:100%;height:100%;overflow:visible}
.znak .zn-cien{transition:transform .55s var(--ease),opacity .55s var(--ease);transform-origin:20px 36px}
a:hover>.znak,.pcard:hover .znak,.prod-k:hover .znak,.node:hover .znak,.ekox-karta:hover .znak,
.mega-i:hover .znak,.kafla:hover .znak{
  transform:translateY(-4px) rotate(-2deg) scale(1.05);
  filter:drop-shadow(0 20px 28px rgba(0,0,0,.6)) drop-shadow(0 0 34px color-mix(in srgb,var(--c) 30%,transparent))}
a:hover>.znak .zn-cien,.pcard:hover .znak .zn-cien{transform:scale(.88);opacity:.1}
@media (prefers-reduced-motion:reduce){.znak,.znak .zn-cien{transition:none}}
/* stare miejsca po miniaturkach */
.disc,.eko-disc,.mf-disc,.ekox-ikona,.innekafel-img{background:transparent !important;
  box-shadow:none !important;border:0 !important;overflow:visible !important;width:auto !important;height:auto !important}

/* domknięcie: etykiety i odnośniki w kartach produktów też są atramentowe */
.ekox-tag,.ekox-karta .tag,.qprod .kat,.innekafel .kat,.mf-karta .tag{
  color:var(--muted2) !important;background:transparent !important;border:0 !important;padding:0 !important}
.ekox-tag::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--c);margin-right:8px;vertical-align:middle;transform:translateY(-1px)}
.ekox-karta a,.ekox-linia a,.mf-karta a{color:var(--ink2)}
.ekox-karta a:hover,.ekox-linia a:hover{color:var(--ink)}

/* etykiety klasy produktu w kartach ekosystemu — atrament, nie barwa produktu */
.ekox-kl,.ekox-go{color:var(--muted2) !important;background:transparent !important}
.ekox-karta:hover .ekox-go{color:var(--ink) !important}
/* odnośniki „poznaj …" pisane inline'em kolorem produktu */
a[style*="color:var(--albion)"],a[style*="color:var(--ainova)"],a[style*="color:var(--atano)"],
a[style*="color:var(--axino)"],a[style*="color:var(--xped)"],a[style*="color:var(--bidi)"],
a[style*="color:var(--avok)"],a[style*="color:var(--modus)"],a[style*="color:var(--meso)"]{
  color:var(--ink2) !important}
a[style*="color:var(--albion)"]:hover,a[style*="color:var(--ainova)"]:hover,
a[style*="color:var(--atano)"]:hover,a[style*="color:var(--axino)"]:hover,
a[style*="color:var(--xped)"]:hover,a[style*="color:var(--bidi)"]:hover,
a[style*="color:var(--avok)"]:hover{color:var(--ink) !important}

/* zadania na /rozwiazania: znak produktu niesie kolor, etykieta i odnośnik są atramentowe */
.zad-glowa{display:flex;gap:16px;align-items:flex-start;margin-bottom:14px}
.zad-glowa .znak{margin-top:2px}
.zad-glowa h3{margin:4px 0 0 !important}
.zad-tag,.zad-go{color:var(--muted2) !important}
.zad-go{font-weight:600 !important}
.zad:hover .zad-go{color:var(--ink) !important}
.zad::after{display:none !important}

/* w mega-menu bryła stoi bez kafelka */
.mega-ico{background:transparent !important;border:0 !important;width:auto !important;height:auto !important;
  flex:0 0 38px;display:grid;place-items:center}
.mega-ico .znak{filter:drop-shadow(0 6px 12px rgba(0,0,0,.5))}
.mega-i:hover .mega-ico .znak{transform:translateY(-3px) scale(1.06)}

/* ---- 12. ALBION: sklep, B2B i aplikacje mobilne ---- */
.sklep-duo{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.sklep-k{padding:32px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.028);box-shadow:0 1px 0 0 rgba(255,255,255,.05) inset,0 24px 60px -46px rgba(0,0,0,.9)}
html[data-theme="deep-light"] .sklep-k{background:rgba(255,255,255,.72);
  box-shadow:0 1px 2px rgba(24,28,72,.05),0 22px 50px -40px rgba(24,28,72,.55)}
.sklep-k h3{margin:18px 0 10px}
.sklep-k p{color:var(--muted);font-size:14.5px;line-height:1.65}
.sklep-l{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.sklep-l li{font-size:13.5px;color:var(--ink2);padding-left:20px;position:relative}
.sklep-l li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:2px;
  border-radius:2px;background:var(--albion);opacity:.8}

.apkigrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:34px}
.apka{display:flex;flex-direction:column;gap:12px}
.apka-glowa{display:flex;gap:16px;align-items:center}
.apka-dla{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted2);margin-bottom:2px}
.apka-glowa h3{margin:0 !important;font-size:19px}
/* miniatura telefonu rysowana CSS-em — bez ramek i obrazków */
.apka-ekran{position:relative;flex:0 0 34px;width:34px;height:56px;border-radius:9px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 26%,transparent),transparent 70%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 26%,transparent) inset,
             0 10px 22px -12px color-mix(in srgb,var(--c) 90%,transparent);
  display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 7px;overflow:hidden}
.apka-pas{height:3px;border-radius:2px;background:var(--c);opacity:.85;width:100%;
  transform-origin:left;animation:apkaPas 3.6s var(--ease) infinite}
.apka-pas.p2{width:70%;opacity:.55;animation-delay:.3s}
.apka-pas.p3{width:45%;opacity:.35;animation-delay:.6s}
@keyframes apkaPas{0%,70%,100%{transform:scaleX(1)}35%{transform:scaleX(.55)}}
.apka p{color:var(--muted);font-size:14px;line-height:1.6;margin:0}
.apka-l{list-style:none;margin:auto 0 0;padding:14px 0 0;display:grid;gap:7px}
.apka-l li{font-size:13px;color:var(--ink2);padding-left:18px;position:relative}
.apka-l li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;
  border-radius:50%;background:var(--c);opacity:.65}
@media (prefers-reduced-motion:reduce){.apka-pas{animation:none}}
@media(max-width:900px){.sklep-duo{grid-template-columns:1fr}.sklep-k{padding:24px}}

/* ---- 13. albion.rho.pl — pas wejścia do portalu ---- */
.wejscie{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:64px;align-items:center}
.wejscie-tresc h2{margin:12px 0 16px}
.wejscie-znaki{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.wejscie-kafel{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 14px;
  border-radius:var(--r-lg);background:rgba(255,255,255,.028);
  box-shadow:0 1px 0 0 rgba(255,255,255,.05) inset,0 20px 46px -40px rgba(0,0,0,.9);
  transition:transform .45s var(--ease),background .3s}
html[data-theme="deep-light"] .wejscie-kafel{background:rgba(255,255,255,.72);
  box-shadow:0 1px 2px rgba(24,28,72,.05),0 18px 40px -34px rgba(24,28,72,.5)}
.wejscie-kafel:hover{transform:translateY(-5px);background:rgba(255,255,255,.05)}
.wejscie-kafel b{font-size:14.5px;color:var(--ink)}
.wejscie-kafel span{font-size:11.5px;color:var(--muted2);font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase}
@media(max-width:1000px){.wejscie{grid-template-columns:1fr;gap:36px}}
@media(max-width:560px){.wejscie-znaki{grid-template-columns:repeat(2,1fr)}}

/* ---- 14. ŁAŃCUCH PROCESU W HERO — od zamówienia po serwis ---- */
.lancuch{display:flex;flex-wrap:wrap;gap:8px 6px;margin-top:26px;align-items:stretch}
.lan-e{position:relative;display:flex;flex-direction:column;gap:1px;padding:9px 14px 9px 20px;
  border-radius:12px;background:rgba(255,255,255,.03);
  box-shadow:0 1px 0 0 rgba(255,255,255,.05) inset;
  transition:transform .35s var(--ease),background .3s}
html[data-theme="deep-light"] .lan-e{background:rgba(255,255,255,.7);
  box-shadow:0 1px 2px rgba(24,28,72,.05)}
.lan-e::before{content:"";position:absolute;left:10px;top:14px;width:5px;height:5px;border-radius:50%;
  background:var(--c);box-shadow:0 0 9px var(--c)}
.lan-e:hover{transform:translateY(-3px);background:rgba(255,255,255,.055)}
.lan-e b{font-size:13px;font-weight:650;color:var(--ink);line-height:1.25}
.lan-e i{font-style:normal;font-size:11px;color:var(--muted2);line-height:1.3}
/* strzałka między etapami — łańcuch, nie luźne pigułki */
.lan-e:not(:last-child)::after{content:"";width:12px;height:1px;position:absolute;right:-9px;top:50%;
  background:linear-gradient(90deg,var(--line2),transparent)}
@media(max-width:900px){.lan-e i{display:none}.lan-e{padding:8px 12px 8px 18px}}

/* ---- 15. ANIMOWANY ŁAŃCUCH PROCESU (prawa kolumna hero) ---- */
.proc{position:relative;display:grid;grid-template-columns:1fr;gap:2px;padding:6px 0 6px 0}
.proc-szyna{position:absolute;left:9px;top:18px;bottom:18px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,transparent,var(--line2) 12%,var(--line2) 88%,transparent);opacity:.5}
.proc-szyna i{position:absolute;left:-3px;width:8px;height:8px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 14px var(--mint);animation:procPlynie var(--petla) linear infinite}
@keyframes procPlynie{0%{top:0;opacity:0}6%{opacity:1}94%{opacity:1}100%{top:100%;opacity:0}}
.proc-e{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:14px;align-items:center;padding:9px 12px 9px 0;border-radius:12px;
  opacity:.42;transition:opacity .5s var(--ease),transform .5s var(--ease);
  animation:procZapal var(--petla) var(--ease) infinite;animation-delay:var(--op)}
@keyframes procZapal{0%,100%{opacity:.42;transform:translateX(0)}
  4%{opacity:1;transform:translateX(4px)}14%{opacity:1;transform:translateX(4px)}22%{opacity:.42;transform:translateX(0)}}
.proc-w{grid-row:1/3;width:20px;height:20px;border-radius:50%;position:relative;
  background:color-mix(in srgb,var(--c) 20%,transparent);display:grid;place-items:center}
.proc-w::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);
  box-shadow:0 0 10px color-mix(in srgb,var(--c) 90%,transparent)}
.proc-t{font-size:13.5px;font-weight:650;color:var(--ink);line-height:1.2}
.proc-o{font-size:11.5px;color:var(--muted2);line-height:1.3}
@media (prefers-reduced-motion:reduce){
  .proc-e{animation:none;opacity:1}.proc-szyna i{animation:none;top:0}}
@media(max-width:1100px){.proc-o{display:none}}

/* scena ekosystemu przeniesiona do drugiego akapitu */
.kim-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:56px;align-items:center}
.kim-duo .hero-scena{min-height:440px}
.kim-duo .kafla{transform:scale(.9)}
@media(max-width:1100px){.kim-duo{grid-template-columns:1fr}.kim-duo .hero-scena{min-height:340px}}

/* ---- 16. SIEĆ PRZEPŁYWU ---- */
.siec{position:relative;width:100%;overflow-x:auto;overflow-y:hidden;padding:6px 0 10px}
.siec svg{display:block;width:100%;min-width:1320px;height:auto;overflow:visible}

/* połączenia */
.siec .kr{fill:none;stroke:var(--line2);stroke-width:1.2;opacity:.42}
.siec .kr-pob{opacity:.26;stroke-dasharray:5 6}
.siec .kr-zwrot{opacity:.3;stroke-dasharray:2 7}
.siec .kr-plyn{fill:none;stroke:var(--c,var(--violet));stroke-width:2;stroke-linecap:round;
  stroke-dasharray:3 26;opacity:.9;animation:siecPlyn 2.6s linear infinite;animation-delay:var(--op)}
@keyframes siecPlyn{from{stroke-dashoffset:29}to{stroke-dashoffset:0}}

/* węzły */
.siec .w{animation:siecZapal var(--petla) var(--ease) infinite;animation-delay:var(--op)}
@keyframes siecZapal{0%,100%{opacity:.5}5%{opacity:1}16%{opacity:1}26%{opacity:.5}}
.siec .w-tlo{fill:rgba(255,255,255,.045);stroke:none}
html[data-theme="deep-light"] .siec .w-tlo{fill:rgba(255,255,255,.85)}
.siec .w:hover .w-tlo{fill:rgba(255,255,255,.09)}
.siec .w-p{fill:var(--c);filter:drop-shadow(0 0 6px var(--c))}
.siec .w-t{fill:var(--ink);font-size:13px;font-weight:650;font-family:var(--sans)}
.siec .w-o{fill:var(--muted2);font-size:10.5px;font-family:var(--sans)}

/* tory podpisane z lewej */
.siec-tory{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px}
.siec-tor{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted2)}
.siec-tor i{width:16px;height:2px;border-radius:2px;background:var(--c);display:inline-block}
.siec-tor.przer i{background:none;border-top:2px dashed var(--muted2)}

@media (prefers-reduced-motion:reduce){
  .siec .kr-plyn{animation:none;stroke-dasharray:none;opacity:.35}
  .siec .w{animation:none;opacity:1}}
.hero-solo{grid-template-columns:1fr !important}
.hero-solo>div{max-width:none}
.hero-solo .lead{max-width:88ch}
.siec-blok{margin-top:56px}
.siec-glowa{margin-bottom:22px}
.siec-glowa h2{max-width:34ch;font-size:clamp(20px,1.9vw,26px)}

/* ---- 17. HERO: tekst na całą szerokość + jednakowe przyciski ---- */
@media(min-width:1100px){
  .hero-solo>div{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    column-gap:72px;align-items:start}
  .hero-solo .hero-tyt{grid-column:1;grid-row:1/3;align-self:start}
  .hero-solo .kicker{margin-bottom:20px}
  .hero-solo h1{margin:0}
  .hero-solo .lead{grid-column:2;max-width:none;margin-top:0 !important}
  .hero-solo .lead+.lead{margin-top:14px !important}
  .hero-solo .hero-cta,.hero-solo .zapytaj{grid-column:1/-1}
}
/* jeden rozmiar dla wszystkich przycisków w hero */
.hero-cta .btn,.zapytaj .btn{height:52px;min-width:224px;padding:0 26px;font-size:15px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px}
.zapytaj form{padding:6px 6px 6px 22px}
.zapytaj{max-width:760px}
.siec-glowa h2{max-width:none}

/* ---- 18. SIEĆ: większe klocki, tory w kolorach, opis po najechaniu ---- */
.siec{position:relative}
.siec svg{min-width:1560px}
.siec .kr{fill:none;stroke:var(--c,var(--line2));stroke-width:1.6;opacity:.22;transition:opacity .3s,stroke-width .3s}
.siec .kr-pob{stroke-dasharray:6 7;opacity:.16}
.siec .kr-zwrot{stroke-dasharray:2 8;opacity:.18}
.siec .kr-plyn{fill:none;stroke:var(--c,var(--violet));stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:4 30;opacity:.85;animation:siecPlyn 2.8s linear infinite;animation-delay:var(--op);
  transition:opacity .3s,stroke-width .3s}
.siec .w-tlo{fill:rgba(255,255,255,.05);transition:fill .3s}
.siec .w-t{font-size:15.5px}
.siec .w-o{font-size:11.5px}
.siec .w{cursor:pointer;outline:none}
.siec .w:focus-visible .w-tlo{fill:rgba(255,255,255,.12)}
/* podświetlenie sąsiedztwa */
.siec-lupa .w{opacity:.22 !important;animation:none}
.siec-lupa .w-sas{opacity:.8 !important}
.siec-lupa .w-on{opacity:1 !important}
.siec-lupa .w-on .w-tlo{fill:color-mix(in srgb,var(--c) 26%,transparent)}
.siec-lupa .w-sas .w-tlo{fill:color-mix(in srgb,var(--c) 14%,transparent)}
.siec-lupa .kr,.siec-lupa .kr-plyn{opacity:.05 !important}
.siec-lupa .kr.kr-on{opacity:.6 !important;stroke-width:2.2}
.siec-lupa .kr-plyn.kr-on{opacity:1 !important;stroke-width:3.4}
/* rozwijany opis */
.siec-opis{position:absolute;z-index:5;transform:translate(28px,-50%);max-width:330px;padding:16px 18px;
  border-radius:16px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(18px);
  box-shadow:0 1px 0 0 rgba(255,255,255,.08) inset,0 26px 60px -26px rgba(0,0,0,1),
             0 0 0 1px color-mix(in srgb,var(--c) 26%,transparent);
  animation:siecOpis .28s var(--ease) both;pointer-events:none}
.siec-opis.z-prawej{transform:translate(-100%,-50%) translateX(-28px)}
@keyframes siecOpis{from{opacity:0;transform:translate(20px,-50%) scale(.96)}}
.siec-opis.z-prawej{animation:none}
.siec-opis b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:6px}
.siec-opis p{font-size:13px;color:var(--muted);line-height:1.6;margin:0}
@media (prefers-reduced-motion:reduce){.siec-opis{animation:none}}

/* ---- 19. SIEĆ ZŁOŻONA — wąskie ekrany ---- */
.siec-zlozona{display:none}
@media(max-width:1180px){
  .siec{display:none}
  .siec-zlozona{display:grid;gap:34px;margin-top:8px}
  .sz-tor{position:relative;padding-left:26px}
  .sz-tor::before{content:"";position:absolute;left:7px;top:12px;bottom:6px;width:2px;border-radius:2px;
    background:linear-gradient(180deg,var(--line2),transparent)}
  .sz-tyt{font-size:15px;margin:0 0 14px;position:relative}
  .sz-tyt::before{content:"";position:absolute;left:-26px;top:6px;width:16px;height:16px;border-radius:50%;
    background:var(--grad);opacity:.9}
  .sz-kafle{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
  .sz-k{position:relative;padding:16px 18px 16px 34px;border-radius:16px;
    background:rgba(255,255,255,.028);box-shadow:0 1px 0 0 rgba(255,255,255,.05) inset}
  html[data-theme="deep-light"] .sz-k{background:rgba(255,255,255,.72);
    box-shadow:0 1px 2px rgba(24,28,72,.05)}
  .sz-p{position:absolute;left:16px;top:22px;width:8px;height:8px;border-radius:50%;background:var(--c);
    box-shadow:0 0 10px var(--c)}
  .sz-k b{display:block;font-size:14.5px;color:var(--ink);line-height:1.25}
  .sz-o{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--muted2);margin:3px 0 8px}
  .sz-k p{font-size:13px;color:var(--muted);line-height:1.55;margin:0}
  .siec-tory{display:none}
}

/* ---- 20. /asystent — czat wyśrodkowany, opisy krótsze ---- */
.czat-sekcja .wrap{display:flex;flex-direction:column;align-items:center}
.czat-nag{max-width:660px;margin:0 auto 30px;text-align:center}
.czat-nag .eyebrow{margin:0 auto 16px}
.czat-nag h1{margin-bottom:12px}
.czat-nag .lead{margin:0 auto;max-width:56ch;font-size:16px}
.czat{width:100%;max-width:820px;margin:0 auto}
.czat-watek{min-height:300px}
.cz-podpowiedzi{justify-content:flex-start}
.czat-stopka{margin:12px 22px 0;text-align:center;font-size:12px}
/* czat: karta widoczna, bez pustki między powitaniem a polem */
.czat{background:rgba(255,255,255,.04) !important;
  box-shadow:0 1px 0 0 rgba(255,255,255,.07) inset,0 34px 80px -50px rgba(0,0,0,1) !important;
  padding:10px 10px 20px}
html[data-theme="deep-light"] .czat{background:rgba(255,255,255,.8) !important;
  box-shadow:0 1px 2px rgba(24,28,72,.06),0 30px 60px -46px rgba(24,28,72,.5) !important}
.czat-watek{min-height:0;padding:24px 24px 4px}
.czat-sekcja{padding-top:24px}
.cz-podpowiedzi{margin-top:16px}
.czat-pole{margin:16px 14px 0}

/* ============================================================================
   21. PODSTRONY JAK STRONA GŁÓWNA
   Nagłówek strony i pas statystyk wyglądały inaczej niż na `/`. Ujednolicamy
   globalnie, żeby nie poprawiać tego osobno na każdej podstronie.
   ========================================================================= */
@media(min-width:1100px){
  /* nagłówek podstrony: tytuł z lewej, wprowadzenie z prawej — jak `.shead` na `/` */
  /* tylko proste nagłówki: gdy hero ma własną grafikę albo siatkę, zostawiamy jego układ */
  .phero .wrap:not(:has(img)):not(:has(svg)):not(:has(.grid2)):not(:has(.hero-cta)){
    display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    column-gap:72px;align-items:start}
  .phero .crumbs{grid-column:1/-1;margin-bottom:22px}
  .phero .eyebrow{grid-column:1;grid-row:2;justify-self:start;margin-bottom:18px}
  .phero h1{grid-column:1;grid-row:3;margin:0;max-width:18ch}
  .phero .lead{grid-column:2;grid-row:2/5;max-width:none;margin:0 !important;align-self:center}
  .phero .hero-cta,.phero .pmeta,.phero .phero-art{grid-column:1/-1}
}
.phero h1{font-size:clamp(28px,3vw,40px)}

/* pas statystyk: liczba nad podpisem, nie sklejona z nim */
.statrow>div{display:flex;flex-direction:column;gap:2px}
.statrow .n{display:block;line-height:1}
.statrow .lbl,.statrow span:not(.n){display:block;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:10px;line-height:1.35}

/* oś czasu: rok atramentowy, nie akcentowy */
.timeline-i .ty{color:var(--muted2) !important}
.timeline-i{position:relative}

/* sekcje podstron dostają ten sam oddech co strona główna */
.phero.section{padding-top:56px;padding-bottom:64px}

/* /kontakt — wartości i odnośniki atramentowe, kolor zostaje przy ikonie */
.kontkafel b,.kontkafel a,.kontkafel strong,.kontdane a,.kontdol a:not(.btn){color:var(--ink) !important}
.kontkafel a:hover,.kontdane a:hover{color:var(--ink) !important;text-decoration-color:var(--ink)}
.kontkafel .kikona,.kontkafel svg{color:var(--c,var(--violet))}
/* pigułka nie może się rozjeżdżać przy długim tekście */
.eyebrow{max-width:100%;white-space:normal;line-height:1.4}

/* ---- 22. WARSTWY SYSTEMU — płyty izometryczne zamiast płaskich belek ---- */
.rs-warstwy svg{overflow:visible}
.rs-plyta{opacity:0;transform:translateY(-26px);
  animation:rsPlyta .9s var(--ease) forwards;animation-delay:calc(var(--i) * .16s)}
@keyframes rsPlyta{to{opacity:1;transform:none}}
.rs-plyta-g{transition:opacity .4s}
.rs-plyta:hover .rs-plyta-g{opacity:1 !important}
.rs-opis{opacity:0;animation:rsOpis .8s var(--ease) forwards;animation-delay:calc(.35s + var(--i) * .16s)}
@keyframes rsOpis{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.rs-iskra{filter:drop-shadow(0 0 10px currentColor);opacity:.95}
/* lekkie unoszenie całego stosu — daje głębię bez rozpraszania */
.rs-warstwy{animation:rsStos 9s ease-in-out infinite}
@keyframes rsStos{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){
  .rs-plyta,.rs-opis{opacity:1;animation:none;transform:none}
  .rs-warstwy{animation:none}
  .rs-iskra{display:none}}

/* ---- 23. MAPA INTEGRACJI ATANO ---- */
.atmapa{margin-top:34px;overflow-x:auto}
.atmapa svg{display:block;width:100%;min-width:1180px;height:auto;overflow:visible;font-family:var(--sans)}
/* nitki od kafelków do szyny grupy */
.at-nitka{fill:none;stroke:var(--c,var(--line2));stroke-width:1.2;opacity:.3;
  transition:opacity .3s,stroke-width .3s}
.at-chip:hover ~ .at-nitka,.at-nitka:hover{opacity:.8}
.at-nitka-d{stroke-dasharray:4 5}
/* szyny grup + płynące dane */
.at-szyna{fill:none;stroke:var(--line2);stroke-width:2;opacity:.3}
.at-plyn{fill:none;stroke:var(--atano);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:5 26;opacity:.9;animation:atPlyn 2.4s linear infinite}
.at-plyn-2{stroke:var(--xped);animation-delay:.5s}
.at-plyn-3{stroke:var(--ainova);animation-delay:1s}
@keyframes atPlyn{from{stroke-dashoffset:31}to{stroke-dashoffset:0}}
/* rdzeń */
.at-aureola{fill:none;stroke:var(--atano);stroke-opacity:.28;stroke-width:1.5;
  animation:atPuls 4.5s var(--ease) infinite}
@keyframes atPuls{0%,100%{r:150;opacity:.5}50%{r:162;opacity:.15}}
.at-koro{fill:color-mix(in srgb,var(--atano) 9%,transparent);
  stroke:color-mix(in srgb,var(--atano) 55%,transparent);stroke-width:1.5}
.at-nazwa{fill:var(--ink);font-size:34px;font-weight:800;text-anchor:middle;letter-spacing:-.02em}
.at-pod{fill:var(--muted);font-size:12.5px;text-anchor:middle}
/* kafelki */
.at-chip rect{fill:rgba(255,255,255,.05);transition:fill .3s}
html[data-theme="deep-light"] .at-chip rect{fill:rgba(255,255,255,.8)}
.at-chip circle{fill:var(--c)}
.at-chip text{fill:var(--ink2);font-size:13px}
.at-chip{opacity:0;animation:atChip .6s var(--ease) forwards;animation-delay:calc(var(--i) * .045s)}
@keyframes atChip{to{opacity:1}}
.at-chip:hover rect{fill:color-mix(in srgb,var(--c) 22%,transparent)}
.at-chip:hover text{fill:var(--ink)}
.at-grupa{fill:var(--muted2);font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
/* liczby pod mapą */
.atliczby{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;margin-top:34px;
  background:var(--glass-line);border-radius:var(--r-lg);overflow:hidden}
.atliczby>div{background:rgba(255,255,255,.028);padding:26px 24px}
html[data-theme="deep-light"] .atliczby>div{background:rgba(255,255,255,.72)}
.atliczby .n{display:block;font-size:clamp(26px,2.6vw,36px);font-weight:800;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.atliczby .lbl{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-top:12px}
@media (prefers-reduced-motion:reduce){
  .at-chip{opacity:1;animation:none}.at-plyn,.at-aureola{animation:none}}