/* Corporate Wellness by Betterworkplace · v1 · tokens-first. Zero literałów poza :root. Bazowy ciemny: granat #0F4662. */
:root{
  --paper:#FBF9F4; --paper-2:#F3EFE6; --card:#FFFFFF; --sand:#F3E6CD; --lime-soft:#EEF6C4;
  --ink:#0F4662; --quiet:#4F6466; --rule:rgba(15,70,98,.16); --rule-soft:rgba(15,70,98,.08);
  --teal:#54BDC2; --teal-ink:#1E7479; --teal-deep:#0F4662; --teal-soft:#D9F0F1;
  --lime:#D9F03A; --lime-hover:#C6DE22;
  --akcja:#C44612; --akcja-ciemna:#A83C10;
  --akcja-grad:linear-gradient(157deg,#CD4A13 0%,#C44612 48%,#A63B0F 100%);
  --akcja-grad-hover:linear-gradient(157deg,#B44011 0%,#A63B0F 48%,#96350D 100%);
  --font:'Helvena','DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
  --fs-h1:clamp(2.058rem,3.3vw,3rem); --fs-h2:clamp(1.5rem,2.4vw,2.058rem);
  --wrap:74rem; --narrow:46rem; --gap:1.25rem; --r:.75rem; --r-lg:2.25rem; --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --t0:.14s; --t:.24s; --t2:.42s; --t3:.62s;
  --kotwica:6rem;   /* ~80 px naglowka (kapsula ~62 px) plus oddech: cel kotwicy nie chowa sie pod naglowek */
  --s1:.5rem; --s2:.809rem; --s3:1.309rem; --s4:2.118rem; --s5:3.427rem; --s6:5.545rem;
  --fs-h3:1.272rem; --fs-lede:clamp(1.05rem,1.4vw,1.272rem);
}
*{box-sizing:border-box}
/* Bez scroll-behavior:smooth: przewijanie prowadzi Lenis (jak na dailyfruits.pl),
   dwa wygladzacze naraz walcza o ten sam scrollTop. */
html{-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
body{margin:0;font-family:var(--font);font-size:1.02rem;line-height:1.6;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal-ink);text-underline-offset:.14em}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
h1,h2,h3,h4{line-height:1.12;letter-spacing:-.02em;font-weight:700;margin:0 0 .618em;text-wrap:balance}
h1{font-size:var(--fs-h1);max-width:26ch;letter-spacing:-.03em;line-height:1.04}
h2{font-size:var(--fs-h2);max-width:30ch;margin-bottom:var(--s3)}
h3{font-size:var(--fs-h3);letter-spacing:-.01em}
p{margin:0 0 1em;max-width:66ch}
html{scroll-padding-top:var(--kotwica)}
::selection{background:var(--lime);color:var(--ink)}
ul,ol{margin:0 0 1em;padding-left:1.2em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:100}
.skip:focus{left:1rem;top:1rem}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}
.wrap.narrow{max-width:var(--narrow)}
.col-narrow{max-width:var(--narrow)}
.eyebrow{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--quiet);font-weight:500;margin:0 0 .7rem}
.eyebrow a{color:inherit}
.lede{font-size:var(--fs-lede);color:var(--ink);max-width:52ch;line-height:1.55}
.sec-lede{font-size:1.08rem;max-width:62ch;margin-bottom:1.6rem}
.src{font-size:.82rem;color:var(--quiet);max-width:70ch}
.more{font-weight:500;white-space:nowrap}

/* przyciski */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:3.05rem;padding:0 1.4rem;border-radius:999px;font-weight:500;letter-spacing:.005em;font-size:1rem;text-decoration:none;border:0;cursor:pointer;font-family:inherit;line-height:1;transition:transform var(--t) var(--ease),background var(--t) ease,color var(--t) ease,box-shadow var(--t) ease}
.btn:active{transform:translateY(0) scale(.978);transition-duration:var(--t0)}
.btn-primary{background-color:var(--akcja);background-image:var(--akcja-grad);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.btn-primary:hover{background-image:var(--akcja-grad-hover);color:#fff;transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 10px 24px rgba(196,70,18,.32)}
.btn-ghost{background:var(--paper-2);color:var(--ink)}
.btn-ghost:hover{background:var(--sand)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s3) 0 0}

/* belka kontaktowa: cicha, nieprzyklejona, nad kapsula */
.topbar{background:var(--ink);color:rgba(255,255,255,.82);font-size:.546rem;line-height:1.45;letter-spacing:.01em}
.tb-row{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;min-height:2.15rem;padding:0 .55rem 0 .95rem;min-width:0;overflow:hidden}
.tb-l,.tb-r{margin:0}
.tb-l{color:rgba(255,255,255,.74);flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-r{display:flex;align-items:center;gap:1.05rem;flex:0 0 auto;white-space:nowrap}
.tb-r a{color:rgba(255,255,255,.86);text-decoration:none;transition:color var(--t) ease}
.tb-r a:hover{color:var(--lime)}
.tb-mail,.tb-tel{white-space:nowrap}
.tb-tel{font-variant-numeric:tabular-nums}
.tb-bw{position:relative;padding-left:1.05rem}
.tb-bw::before{content:"";position:absolute;left:0;top:50%;width:.35rem;height:.35rem;margin-top:-.175rem;border-radius:50%;background:var(--teal)}
@media(max-width:60rem){.tb-l{display:none}.tb-row{justify-content:flex-end;min-height:2rem}}
@media(max-width:34rem){.tb-bw{display:none}}

/* zasłona pod panelem: strona gaśnie i rozmywa się, panel ma na czym stać */
.zaslona{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:0;visibility:hidden;
  background:rgba(15,70,98,.22);transition:opacity var(--t2) ease,visibility var(--t2)}
@supports (backdrop-filter:blur(1px)){.zaslona{backdrop-filter:blur(4px) saturate(.94)}}
.js body.panel-otwarty .zaslona{opacity:1;visibility:visible}
@media(prefers-reduced-motion:reduce){.zaslona{transition:none}}

/* nagłówek */
.site-head{position:sticky;top:0;z-index:50;background:transparent;border-bottom:0;padding:.55rem 0;transition:padding var(--t2) var(--ease)}
.head-row{--postep:0;position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.5rem;
  padding:0 .55rem 0 .95rem;border-radius:1.55rem;
  background:rgba(251,249,244,.74);border:1px solid rgba(255,255,255,.72);
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset,0 -1px 1px rgba(15,70,98,.05) inset,
             0 2px 6px rgba(15,70,98,.04),0 18px 40px -28px rgba(15,70,98,.42);
  transition:background var(--t2) ease,box-shadow var(--t2) ease,border-color var(--t2) ease}
@supports (backdrop-filter:blur(1px)){
  .head-row{background:rgba(251,249,244,.56);backdrop-filter:blur(20px) saturate(1.7) brightness(1.03)}}
/* refleks: jasniejsza smuga u gory, cieply dol z akcentem marki */
.head-row::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(160deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.1) 34%,rgba(255,255,255,0) 62%,rgba(217,240,58,.07) 100%),
             linear-gradient(168deg,rgba(84,189,194,calc(var(--postep,0) * .40)) 0%,rgba(84,189,194,calc(var(--postep,0) * .16)) 100%)}
.head-row>*{position:relative;z-index:1}
.site-head.stuck{padding:.4rem 0}
.site-head.stuck .head-row{background:rgba(251,249,244,.88);border-color:rgba(255,255,255,.85);
  box-shadow:0 1px 1px rgba(255,255,255,.95) inset,0 -1px 1px rgba(15,70,98,.07) inset,
             0 3px 8px rgba(15,70,98,.06),0 24px 50px -26px rgba(15,70,98,.5)}
@supports (backdrop-filter:blur(1px)){
  .site-head.stuck .head-row{background:rgba(251,249,244,.7);backdrop-filter:blur(26px) saturate(1.9) brightness(1.04)}}
@media(prefers-reduced-motion:reduce){.site-head,.head-row{transition:none}}
/* kotwice z rozwiniec nie moga chowac sie pod kapsula */
/* Jeden mechanizm, nie dwa. scroll-padding-top na oknie i scroll-margin-top na celu
   SUMUJA sie, wiec kotwica ladowala 110 px za nisko. Zostaje odsuniecie okna. */
.faq{scroll-margin-top:0}
/* FAQ na pelna szerokosc: wiersz to linia od krawedzi do krawedzi, plus po prawej.
   Naglowek dostaje odstep ze skali, a odpowiedz trzyma miare 62ch. */
.faq h2{margin:0 0 var(--s3)}
.logo{padding:.75rem 0;display:block}
.logo picture,.logo img{display:block}
/* Znak (DM Sans, wzor wlasciciela): caly blok tekstu na wysokosc sygnetu. Po korekcie wlasciciela -30%:
   111 px = 36 px wysokosci, z paddingiem .75rem kapsula ~62 px. Ponizej 34rem wersja bez podpisu. */
.logo img{width:111px;height:auto}
@media(max-width:34rem){.logo img{width:94px}}
.nav-list{list-style:none;margin:0;padding:0;display:flex;gap:1.15rem;align-items:center}
.nav-item{position:relative}
.nav-item>a{color:var(--ink);text-decoration:none;font-weight:500;font-size:.8125rem;letter-spacing:0;white-space:nowrap;padding:.4rem 0;display:inline-block;position:relative}
.nav-item>a::after{content:"";position:absolute;left:0;right:0;bottom:.1rem;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform var(--t) var(--ease)}
.nav-item>a:hover::after,.nav-item>a[aria-current]::after,.has-sub:hover>a::after{transform:scaleX(1)}
.nav-cta>a{background-color:var(--akcja);background-image:var(--akcja-grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.2);color:#fff;font-weight:500;padding:.5rem 1rem;border-radius:999px;border:0;transition:background var(--t) ease,color var(--t) ease}
.nav-cta>a::after{display:none}
/* chevron przy pozycjach z panelem */
.nav-item>a:has(.nav-chev){display:inline-flex;align-items:center;gap:.32rem}
.nav-chev{width:.42rem;height:.42rem;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-.12em) rotate(45deg);opacity:.55;
  transition:transform var(--t2) var(--ease),opacity var(--t) ease}
.has-sub:hover>a .nav-chev,.has-sub:focus-within>a .nav-chev,.has-sub.open>a .nav-chev{
  opacity:1;transform:translateY(.06em) rotate(-135deg)}
@media(prefers-reduced-motion:reduce){.nav-chev{transition:none}}
@media(max-width:64rem){.nav-chev{display:none}}
/* Rdzen nie jest kategoria obok kategorii: jest produktem, z ktorego reszta wynika.
   Cieniej postawiona kreska oddziela go od wejsc do niego. */
.nav-rdzen{position:relative;padding-right:1.15rem;margin-right:-.15rem}
.nav-rdzen::after{content:"";position:absolute;right:0;top:50%;height:1.1rem;width:1px;margin-top:-.55rem;background:var(--rule)}
.nav-rdzen>a{font-weight:700;font-size:.875rem;letter-spacing:-.01em}
.nav-cta>a:hover{background-image:var(--akcja-grad-hover);color:#fff}
.sub-toggle{display:none}
.sub{list-style:none;margin:0;padding:.45rem;position:absolute;left:auto;right:0;top:calc(100% + 1.345rem);min-width:15.5rem;
  background:rgba(251,249,244,.985);border:1px solid rgba(255,255,255,.85);border-radius:1.1rem;
  box-shadow:0 2px 6px rgba(15,70,98,.06),0 30px 60px -24px rgba(15,70,98,.6);
  opacity:0;visibility:hidden;transform:translateY(8px) scale(.988);transform-origin:top center;transition:opacity var(--t) var(--ease),transform var(--t2) var(--ease),visibility var(--t)}
@supports (backdrop-filter:blur(1px)){.sub{background:rgba(251,249,244,.93);backdrop-filter:blur(30px) saturate(1.9) brightness(1.03)}}
.sub li a{display:block;padding:.5rem .8rem;border-radius:.7rem;color:var(--ink);text-decoration:none;font-size:.9rem;line-height:1.45;transition:background var(--t) ease,color var(--t) ease}
.sub li a:hover{background:var(--paper-2);color:var(--teal-deep)}
@media(hover:hover){.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}}
.has-sub.open .sub{opacity:1;visibility:visible;transform:none}
/* WebKit (iPhone) nie uklada flexem dzieci <button>: kreski hamburgera dostawaly zerowa
   szerokosc i menu wygladalo na puste. Kreski siedza we wlasnym <span> z jawna szerokoscia,
   a przycisk jest tylko ramka 44x44 (uwaga 11.09, iPhone na home). */
.nav-toggle{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;padding:0;position:relative}
.nav-toggle-in{position:absolute;left:8px;top:50%;width:28px;height:16px;margin-top:-8px;display:block}
.nav-toggle-in i{position:absolute;left:0;width:28px;height:2px;background:var(--ink);border-radius:2px}
.nav-toggle-in i:nth-child(1){top:0}.nav-toggle-in i:nth-child(2){top:7px}.nav-toggle-in i:nth-child(3){top:14px}
/* Stopka kontaktowa menu istnieje tylko na waskim ekranie; na desktopie dokladala 52 px
   do belki (zlapane przez bramke zrzutow na czterech szablonach). */
.nav-stopka{display:none}
.nav-stopka-cta{display:none}
@media(max-width:64rem){
  .nav-toggle{display:block;z-index:3}
  /* Menu pelnoekranowe (wzorzec z r352.com): trzy strefy. Gorny odstep pod kapsula,
     lista linkow jako jedyna rzecz, ktora sie przewija, i stopka z kontaktem przypieta
     do dolu. Numeracja 01-05 przy pozycjach, duze litery, linie wlosowe (uwaga 11.09). */
  .nav{position:fixed;inset:0;height:100dvh;z-index:2;display:flex;flex-direction:column;
    background:var(--paper);padding:5.6rem 1.35rem 1.35rem;
    opacity:0;visibility:hidden;transform:translateY(-10px) scaleY(.985);transform-origin:top;
    transition:opacity var(--t2) var(--ease),transform var(--t2) var(--ease),visibility 0s var(--t2)}
  .nav.open{opacity:1;visibility:visible;transform:none;transition:opacity var(--t2) var(--ease),transform var(--t2) var(--ease),visibility 0s}
  .nav-srodek{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding-bottom:var(--s3)}
  .nav .sub,.nav .mega-in,.nav .mega-grid{position:static;width:auto;min-width:0;max-width:100%}
  .nav-list{flex-direction:column;align-items:stretch;gap:0;counter-reset:poz}
  .nav-item{border-bottom:1px solid var(--rule);
    opacity:0;transform:translateX(-12px);transition:opacity var(--t2) var(--ease),transform var(--t2) var(--ease)}
  .nav.open .nav-item{opacity:1;transform:none}
  .nav.open .nav-item:nth-child(2){transition-delay:.05s}.nav.open .nav-item:nth-child(3){transition-delay:.1s}
  .nav.open .nav-item:nth-child(4){transition-delay:.15s}.nav.open .nav-item:nth-child(5){transition-delay:.2s}.nav.open .nav-item:nth-child(n+6){transition-delay:.25s}
  .nav-item:not(.nav-cta)>a{flex:1;padding:1.05rem 0;border-bottom:0;font-size:1.45rem;font-weight:500;letter-spacing:-.01em;line-height:1.15;display:flex;align-items:baseline;gap:.9rem}
  .nav-item:not(.nav-cta)>a::before{counter-increment:poz;content:counter(poz,decimal-leading-zero);font-family:var(--mono);font-size:.74rem;color:var(--quiet);flex:0 0 1.5rem}
  .nav-item>a .nav-chev{display:none}
  /* Siatka wiersza: link | 2.75rem na chevron. Rozwiniecie idzie pod spodem na cala szerokosc.
     Bez tego chevron rzedu 01 stal 28 px bardziej w lewo niz w rzedach 02-05. */
  .nav-item{display:grid;grid-template-columns:minmax(0,1fr) 2.75rem;align-items:center}
  .nav-item .sub-toggle{grid-column:2;justify-self:end;margin:0;padding:0;right:auto}
  .nav-item.nav-rdzen{padding-right:0;margin-right:0}
  .nav-item.nav-rdzen::after{display:none}
  .nav-item .sub{grid-column:1/-1}
  /* Na desktopie linki menu maja nowrap; tu dluga nazwa musi sie lamac we wlasnej kolumnie,
     inaczej wchodzila pod chevron („Dla pracownikow biurowych”). */
  .nav-item:not(.nav-cta)>a{white-space:normal;min-width:0;font-size:clamp(1.2rem,5.4vw,1.45rem)}
  /* Obrys fokusu do srodka: kontener menu przycina overflow, a obrys na zewnatrz
     rysowal sie jako urwane „L” wokol pozycji. */
  .nav .mega-h-ciag{display:none}
  .nav-list>.nav-cta{display:none}
  .nav-stopka .nav-stopka-cta{display:inline-flex;flex:0 0 100%;justify-content:center;margin-bottom:var(--s2);color:#fff;font-size:1rem}
  .nav .mega-col:has(.mega-h-ciag){margin-top:-.6rem}
  .nav a:focus-visible,.nav button:focus-visible{outline:2px solid var(--teal);outline-offset:-2px;border-radius:.5rem}
  .nav-cta{order:99;padding:var(--s3) 0 0;border:0;margin-top:var(--s2)}
  .nav-cta>a{flex:1 1 auto;justify-content:center;padding:.95rem 1.2rem;font-size:1rem}
  .nav-stopka{flex:0 0 auto;padding-top:var(--s3);border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:.25rem 1.4rem;align-items:baseline;
    opacity:0;transition:opacity var(--t3) var(--ease) .3s}
  .nav.open .nav-stopka{opacity:1}
  .nav-stopka-h{margin:0;flex:0 0 100%;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--quiet)}
  .nav-stopka a{color:var(--ink);text-decoration:none;font-size:.95rem}
  /* Kapsula bez backdrop-filter, kiedy menu otwarte: filtr robi z niej blok zawierajacy
     dla position:fixed i menu nie wychodzilo poza belke. */
  .site-head.menu-open .head-row{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--paper)}
  .site-head.menu-open .nav-toggle-in i:nth-child(1){top:7px;transform:rotate(45deg)}
  .site-head.menu-open .nav-toggle-in i:nth-child(2){opacity:0}
  .site-head.menu-open .nav-toggle-in i:nth-child(3){top:7px;transform:rotate(-45deg)}
  .nav-toggle-in i{transition:top var(--t) var(--ease),transform var(--t) var(--ease),opacity var(--t) ease}
  body.menu-open{overflow:hidden}
  .sub-toggle{display:block;width:44px;height:44px;border:0;background:transparent;position:relative;cursor:pointer}
  .sub-toggle::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translate(-50%,-70%) rotate(45deg);transition:transform var(--t0) var(--ease-io)}
  .sub-toggle[aria-expanded="true"]::after{transform:translate(-50%,-30%) rotate(225deg)}
  .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:transparent;backdrop-filter:none;display:none;flex-basis:100%;padding:0 0 .6rem;min-width:0;border-radius:0}
  .has-sub.open .sub{display:block}
  .sub li a{padding:.5rem 0 .5rem 1rem;color:var(--quiet)}
}

/* hero */
.hero{padding:var(--s3) 0 0;position:relative;overflow:hidden}
@media(min-width:48rem){.hero{padding:var(--s4) 0 0}}
@media(min-width:75rem){.hero{padding:var(--s5) 0 0}}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  /* Struny konczyly sie ostro na dole hero i linie byly przeciete w polowie.
     Maska wygasza je, zanim dojda do granicy sekcji. */
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.55) 0,#000 12%,#000 58%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.55) 0,#000 12%,#000 58%,rgba(0,0,0,0) 100%)}
.hero>*{position:relative;z-index:1}
.hero>.hero-canvas{position:absolute;z-index:0}
/* stretch, nie start: po zdjeciu liczb z prawej kolumny kadr konczyl sie w polowie
   wysokosci tekstu i zostawial pod soba 165 px pustki (pomiar 11.09). */
.hero-grid{display:grid;grid-template-columns:61.8fr 38.2fr;gap:clamp(1.5rem,4vw,3.427rem);align-items:stretch;padding-bottom:var(--s4)}
.hero-img{position:relative}
.hero-img img{border-radius:var(--r-lg);aspect-ratio:1.618/1;object-fit:cover;width:100%}
.hero-chip{position:absolute;left:1rem;bottom:1rem;background:var(--lime);color:var(--ink);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.35rem .7rem;border-radius:999px}
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);padding-top:1.8rem;padding-bottom:1.8rem;border-bottom:1px solid var(--rule)}
/* Liczby to najmocniejszy dowod w tej kategorii, wiec dostaja skale display.
   Waga 300 zamiast 700: Helvena jest zmienna 200-900, a duza cienka cyfra
   czyta sie jako pewnosc siebie, nie jako krzyk. */
.num-v{display:block;font-size:clamp(2.8rem,5.4vw,4.8rem);font-weight:300;letter-spacing:-.045em;line-height:.94;font-variant-numeric:tabular-nums}
.num-l{display:block;color:var(--quiet);margin-top:.4rem;font-size:.95rem;max-width:22ch}
@media(max-width:48rem){.hero-grid{grid-template-columns:1fr;gap:var(--s3)}.hero-side{display:contents}.hero-img{order:-1}.nums{grid-template-columns:1fr;gap:1rem}.nums-side{order:2;grid-template-columns:1fr 1fr 1fr;gap:.6rem;margin-top:var(--s2)}}

/* logotypy tekstowe */
.logos{padding:var(--s4) 0;border-bottom:1px solid var(--rule-soft)}
.logos-h{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--quiet);margin:0 0 .6rem}

/* sekcje */
.sec{padding:var(--s4) 0;border-bottom:1px solid var(--rule-soft)}
@media(min-width:48rem){.sec{padding:var(--s5) 0}}
@media(min-width:75rem){.sec{padding:var(--s6) 0}}
.sec.alt{background:var(--paper-2);border-bottom:0}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:var(--s3)}
.sec-head h2{margin-bottom:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.427rem)}
/* kolumna siatki nie schodzi ponizej szerokosci tabeli (1fr = minmax(auto,1fr)): na telefonie strona wystawala o 29 px */
.two>*{min-width:0}
.two.phi{grid-template-columns:61.8fr 38.2fr;align-items:start}
@media(max-width:48rem){.two.phi{grid-template-columns:1fr}}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3.5vw,var(--s4))}
.three>div{border-top:1px solid var(--rule);padding-top:var(--s2)}
.three h3{margin-bottom:.45rem;font-size:var(--fs-h3)}
.three p{color:var(--quiet);margin:0;max-width:38ch}
@media(max-width:60rem){.three{grid-template-columns:1fr 1fr}}
@media(max-width:48rem){.three{grid-template-columns:1fr}}
@media(max-width:48rem){.two{grid-template-columns:1fr}}
.page-head{padding:var(--s4) 0 var(--s3);border-bottom:1px solid var(--rule-soft)}
@media(min-width:48rem){.page-head{padding:var(--s5) 0 var(--s4)}}
.head-grid{display:grid;grid-template-columns:61.8fr 38.2fr;gap:clamp(1.5rem,4vw,3.427rem);align-items:center}
.head-img img{border-radius:var(--r);aspect-ratio:4/3;object-fit:cover;width:100%}
@media(max-width:48rem){.head-grid{grid-template-columns:1fr}}

/* listy wierszowe zamiast kafelków */
.row-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.row{border-bottom:1px solid var(--rule)}
.row-link{display:grid;grid-template-columns:16rem 1fr auto;gap:var(--s3);align-items:baseline;padding:var(--s3) var(--s2);margin:0 calc(-1 * var(--s2));border-radius:var(--r);text-decoration:none;color:var(--ink);transition:background var(--t) ease}
.row-link:hover{background:rgba(15,70,98,.035)}
.row.plain{display:grid;grid-template-columns:16rem 1fr;gap:var(--s3);align-items:baseline;padding:var(--s3) 0}
.row-name{font-weight:700;font-size:1.15rem;letter-spacing:-.01em}
.row-text{color:var(--quiet);max-width:62ch}
.row-go{font-weight:500;color:var(--teal-ink);white-space:nowrap;transition:transform var(--t) var(--ease)}
.row-go::after{content:" →"}
.row-link:hover .row-go{transform:translateX(4px)}
.row-link:hover .row-name{color:var(--teal-ink)}
@media(max-width:48rem){.row-link,.row.plain{grid-template-columns:1fr;gap:.3rem}}

/* kroki */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.step{position:relative;padding:1.2rem 0 0;border-top:1px solid var(--rule)}
.step-n{display:block;font-size:clamp(3rem,6vw,4.5rem);font-weight:700;letter-spacing:-.05em;line-height:.9;color:var(--ink);margin-bottom:.6rem;-webkit-text-stroke:0}
.step-n::after{content:"";display:block;width:2.2rem;height:.5rem;background:var(--lime);margin-top:.5rem}
.step h3{margin-bottom:.4rem}
.step p{color:var(--quiet);margin:0}
@media(max-width:48rem){.steps{grid-template-columns:1fr}}

/* checki */
.checks{list-style:none;padding:0;margin:0}
.checks li{position:relative;padding:.55rem 0 .55rem 1.7rem;border-bottom:1px solid var(--rule-soft);max-width:60ch}
.checks li::before{content:"";position:absolute;left:0;top:1.05rem;width:.9rem;height:.5rem;border-left:2px solid var(--teal-ink);border-bottom:2px solid var(--teal-ink);transform:rotate(-45deg)}
.checks.plain li::before{width:.5rem;height:.5rem;border:0;background:var(--teal);border-radius:50%;top:1.1rem;transform:none}

/* tabela formatów */
.tablewrap{overflow-x:auto}
.fmt{border-collapse:collapse;width:100%;min-width:24rem;font-size:.95rem}
.fmt th{text-align:left;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--quiet);font-weight:500;padding:.4rem .8rem .4rem 0;border-bottom:1px solid var(--ink)}
.fmt td{padding:.6rem .8rem .6rem 0;border-bottom:1px solid var(--rule-soft);vertical-align:top}
.fmt td:first-child{font-weight:500}

/* cytaty */
.quotes{display:grid;gap:var(--s4)}
@media(min-width:64.01rem){.sec>.wrap:not(.two)>.quotes:not(.cols){grid-template-columns:repeat(3,1fr)}}
.quotes.cols{grid-template-columns:repeat(2,1fr)}
@media(max-width:48rem){.quotes.cols{grid-template-columns:1fr}}
.quote{margin:0;padding:.3rem 0 1.2rem 3.2rem;position:relative}
.quote::before{content:"„";position:absolute;left:0;top:-1.4rem;font-size:4.6rem;line-height:1;font-weight:700;color:var(--lime);letter-spacing:-.05em}
.quote blockquote{margin:0}
.quote p{font-size:1.02rem;max-width:60ch}
.quote figcaption{margin-top:.6rem;font-size:.92rem;color:var(--quiet)}
.quote figcaption strong{display:block;color:var(--ink)}
.case p:last-child{margin:0}

/* realizacje */
.real-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.real-grid.three{grid-template-columns:repeat(3,1fr)}
.real-card{display:block;text-decoration:none;color:var(--ink)}
.real-card{display:block;padding:.75rem;border-radius:var(--r-lg);background:var(--paper-2);transition:transform var(--t2) var(--ease),box-shadow var(--t2) ease}
.real-card:hover{box-shadow:0 18px 40px rgba(15,70,98,.10)}
.real-card img{aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:calc(var(--r-lg) - .9rem);margin-bottom:.7rem}
.real-card:hover{transform:translateY(-3px)}
.real-card.tint-teal{background:var(--teal-soft)}
.real-card.tint-lime{background:var(--lime-soft)}
.real-card.tint-sand{background:var(--sand)}
.real-cap{display:block;position:relative;background:var(--card);border-radius:calc(var(--r-lg) - .75rem);padding:.85rem 3.4rem .85rem 1rem;min-height:5.6rem}
.real-arrow{position:absolute;right:.8rem;bottom:.8rem;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:1rem;transition:background var(--t) ease,transform var(--t) var(--ease)}
.real-card:hover .real-arrow{transform:translateX(3px)}
.real-card:hover .real-arrow{background:var(--lime);color:var(--ink)}
.real-client{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--quiet);font-weight:700}
.real-title{display:block;font-weight:700;font-size:1rem;line-height:1.3;letter-spacing:-.01em;margin-top:.15rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.real-tags{display:block;font-size:.85rem;color:var(--quiet);margin-top:.3rem}
@media(max-width:48rem){.real-grid,.real-grid.three{grid-template-columns:1fr 1fr}}
@media(max-width:34rem){.real-grid,.real-grid.three{grid-template-columns:1fr}}
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
.gal.gal-three{grid-template-columns:repeat(3,1fr)}
@media(max-width:48rem){.gal.gal-three{grid-template-columns:1fr 1fr}}
@media(max-width:34rem){.gal.gal-three{grid-template-columns:1fr}}
.gal-item{margin:0}
.gal-item img{border-radius:var(--r);width:100%;aspect-ratio:4/3;object-fit:cover}
.gal-item figcaption{font-size:.9rem;color:var(--quiet);margin-top:.4rem}
@media(max-width:34rem){.gal{grid-template-columns:1fr}}

/* FAQ */
.faq-item{border-top:1px solid var(--rule);padding:.2rem 0}
.faq-item:last-of-type{border-bottom:1px solid var(--rule)}
.faq-item summary{cursor:pointer;font-weight:700;padding:.9rem 2rem .9rem 0;position:relative;list-style:none;font-size:1.05rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:0;top:.8rem;font-size:1.4rem;color:var(--teal-ink);font-weight:400}
.faq-item[open] summary::after{content:"−"}
.faq-item p{margin:0 0 1rem;color:var(--ink);max-width:62ch}
.faq-item .faq-body{overflow:hidden;transition:height var(--t2) var(--ease)}
.faq-item summary::after{transition:transform var(--t) var(--ease)}
.faq-item[open] summary::after{content:"+";transform:rotate(45deg)}

/* CTA + formularz */
.cta{background:var(--ink);color:#fff;border-bottom:0}
.cta h2,.cta .lede{color:#fff}
.cta a{color:var(--lime)}
.cta-grid{display:grid;grid-template-columns:38.2fr 61.8fr;gap:clamp(1.5rem,4vw,3.427rem);align-items:start}
@media(max-width:48rem){.cta-grid{grid-template-columns:1fr}}
.cta-q-h{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lime);margin:1.4rem 0 .5rem}
.cta-q{list-style:none;padding:0;margin:0 0 1rem}
.cta-q li{padding:.45rem 0;border-top:1px solid rgba(255,255,255,.15)}
.cta-alt{color:rgba(255,255,255,.75)}
/* lewa kolumna trzyma sie formularza: na duzym ekranie zostaje w polu widzenia,
   zeby stan zapytania byl widoczny w trakcie wypelniania */
@media(min-width:64.01rem){.cta-lewa{position:sticky;top:6.5rem}}
.cta-stan{position:relative}
/* podsumowanie: HUD z prawdziwym stanem, nie ozdoba. Bez JS zostaja same pytania. */
.podsum{margin:1.4rem 0 1rem}
.podsum-l{margin:0;display:grid;gap:var(--s1)}
.podsum-l>div{display:grid;grid-template-columns:7.2rem 1fr;gap:.62rem;align-items:baseline;
  padding-top:.45rem;border-top:1px solid rgba(255,255,255,.15)}
.podsum-l dt{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.podsum-l dd{margin:0;font-size:.92rem;line-height:1.45;color:#fff}
@media(max-width:34rem){.podsum-l>div{grid-template-columns:1fr;gap:.15rem}}
/* Formularz: bloki o wspolnej lewej i prawej krawedzi, rytm ze skali zlotego podzialu.
   Odstep w bloku --s1, miedzy blokami --s3. Zadnych wartosci spoza skali. */
.form{display:grid;gap:0;background:rgba(255,255,255,.06);padding:var(--s3);border-radius:var(--r)}
.form label{display:grid;gap:.35rem;font-size:.9rem;font-weight:500}
.form .lab{display:flex;align-items:baseline;gap:.42rem;flex-wrap:wrap}
.form input,.form select,.form textarea{font:inherit;padding:0 .85rem;height:2.75rem;border-radius:.5rem;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.95);color:var(--ink);width:100%;transition:box-shadow var(--t) ease,border-color var(--t) ease}
.form textarea{height:auto;padding:.7rem .85rem}
.form input:focus,.form select:focus,.form textarea:focus{box-shadow:0 0 0 3px rgba(217,240,58,.55);outline:0}
.form textarea{resize:vertical;min-height:6rem}
.form .btn{background:var(--lime);color:var(--ink)}
.form .btn:hover{background:#fff;color:var(--ink)}

/* numerowany blok: numer stoi w stalej kolumnie, wiec wszystkie tytuly zaczynaja sie w tym samym x */
/* Kreska ma tyle samo powietrza z gory co z dolu. Sam padding-top dawal 0 nad linia
   i 22 px pod nia, przez co linia przyklejala sie do pigulek poprzedniej grupy. */
.blok{border:0;padding:var(--s3) 0 0;margin:var(--s3) 0 0;min-width:0;border-top:1px solid rgba(255,255,255,.13)}
.blok:first-of-type{padding-top:0;margin-top:0;border-top:0}
.blok-h{margin:0 0 var(--s1);display:flex;align-items:baseline;gap:.62rem}
.blok-n{flex:0 0 1.45rem;font-family:var(--mono);font-size:.74rem;color:var(--lime);font-variant-numeric:tabular-nums}
.blok-t{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.blok>*+*{margin-top:var(--s1)}
.blok-nota{margin:var(--s1) 0 0;font-size:.82rem;color:rgba(255,255,255,.55);max-width:52ch}
.pola-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s1)}
@media(max-width:34rem){.pola-2{grid-template-columns:1fr}}
.sr-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.form-stopka-t{display:grid;gap:.3rem}
.form-alt{margin:0;font-size:.86rem}
.form-stopka{display:grid;grid-template-columns:auto 1fr;gap:var(--s2);align-items:center;padding-top:var(--s3);margin-top:var(--s3);border-top:1px solid rgba(255,255,255,.13)}
@media(max-width:40rem){.form-stopka{grid-template-columns:1fr;gap:var(--s1)}}
.hp{position:absolute;left:-9999px}
.form-note{font-size:.82rem;color:rgba(255,255,255,.7);margin:0}
.form-note a{color:var(--lime)}
.form-msg{margin:0;font-weight:500;min-height:1.4em}
.form-msg.ok{color:var(--lime)}
.form-msg.err{color:#FFB4A8}

/* wiedza */
.wiedza-grid{display:grid;grid-template-columns:1fr 16rem;gap:clamp(1.5rem,4vw,3.5rem)}
@media(max-width:48rem){.wiedza-grid{grid-template-columns:1fr}}
.post-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.post-row a{display:block;padding:1rem 0;border-bottom:1px solid var(--rule-soft);text-decoration:none;color:var(--ink)}
.post-date{display:block;font-size:.8rem;color:var(--quiet);letter-spacing:.06em;text-transform:uppercase}
.post-title{display:block;font-weight:700;font-size:1.1rem;letter-spacing:-.01em;margin:.2rem 0}
.post-row a:hover .post-title{color:var(--teal-ink)}
.post-ex{display:block;color:var(--quiet);max-width:70ch;font-size:.95rem}
.pag{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.5rem}
.pag a{min-width:2.4rem;text-align:center;padding:.4rem .5rem;border-radius:.4rem;text-decoration:none;color:var(--ink);border:1px solid var(--rule)}
.pag a[aria-current]{background:var(--ink);color:#fff;border-color:var(--ink)}
.side-h{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--quiet);margin-bottom:.6rem}
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li a{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-top:1px solid var(--rule-soft);text-decoration:none;color:var(--ink)}
.cat-list li a span{color:var(--quiet);font-variant-numeric:tabular-nums}
.post-meta{color:var(--quiet);font-size:.95rem}
.post-next{border-top:1px solid var(--rule);padding-top:1rem;margin-top:2rem}

/* prose (blog, strony prawne) */
.prose{padding:clamp(1.5rem,4vw,2.5rem) clamp(1rem,4vw,2rem) clamp(2rem,5vw,3.5rem)}
.prose p,.prose li{max-width:66ch;font-size:1.05rem}
.prose h2{font-size:1.5rem;margin-top:2rem}
.prose h3{font-size:1.2rem;margin-top:1.5rem}
.prose img{border-radius:var(--r);margin:1.5rem 0}
.prose blockquote{margin:1.5rem 0;padding-left:1.2rem;border-left:3px solid var(--teal);color:var(--quiet)}
.prose table{border-collapse:collapse;width:100%;font-size:.95rem;margin:1rem 0}
/* Stare wpisy maja adresy stron wklejone jako tekst linku (do 1600 px szerokosci) i tabele
   szersze niz telefon: 27 wpisow wystawalo w poziomie (pomiar 23.09, 375 px). */
.prose{overflow-wrap:anywhere}
@media(max-width:48rem){.prose table{display:block;overflow-x:auto}}
.prose td,.prose th{border:1px solid var(--rule-soft);padding:.5rem;text-align:left;vertical-align:top}
.legal p,.legal li{font-size:.98rem}

/* stopka */
.site-foot{background:var(--paper-2);padding:3rem 0 1.5rem;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
@media(max-width:48rem){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:34rem){.foot-grid{grid-template-columns:1fr}}
.foot-brand picture{display:block}
.foot-brand img{width:119px;height:auto;display:block;margin-bottom:.8rem}
.foot-endorse{font-weight:500}
.foot-legal{font-size:.9rem;color:var(--quiet)}
.foot-h{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--quiet);margin-bottom:.6rem}
.foot-list{list-style:none;margin:0;padding:0}
.foot-list li{padding:.25rem 0}
.foot-list a,.foot-col a{color:var(--ink);text-decoration:none}
.foot-list a:hover,.foot-col a:hover{text-decoration:underline}
.foot-bottom{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--rule);font-size:.85rem;color:var(--quiet)}

/* wrappery semantyczne (guard markup-bez-CSS) */
.hero-copy{min-width:0}
.num{min-width:0}

.post{display:block}
.wiedza-side{min-width:0}


/* ── charakter: marker, pasmo, podmiana zdjęć, reveal ── */
.mark{background:linear-gradient(transparent 12%,var(--lime) 12%,var(--lime) 88%,transparent 88%);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.band{position:relative;min-height:clamp(26rem,62vh,38rem);display:flex;align-items:flex-end;background:var(--ink) var(--band-m,var(--band)) center/cover no-repeat;color:#fff;isolation:isolate}
@media(min-width:48rem){.band{background-image:var(--band)}}
/* Przyciemnienie musi wystarczyc na KAZDYM kadrze, nie tylko na ciemnym.
   Pierwsza wersja dawala bieli kontrast 2.47 na jasnym betonie i kurtkach. */
.band::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(15,70,98,.28) 0%,rgba(15,70,98,.62) 38%,rgba(15,70,98,.88) 72%,rgba(15,70,98,.96) 100%)}
.band-in{padding-top:6rem;padding-bottom:3rem}
.band-kicker{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);font-weight:700;margin-bottom:1rem}
.band-q{margin:0}
.band-q p{font-size:clamp(1.4rem,3.2vw,2.5rem);font-weight:700;line-height:1.15;letter-spacing:-.025em;max-width:26ch;color:#fff;text-wrap:balance}
.band-who{margin:1rem 0 0;color:rgba(255,255,255,.75);font-size:.95rem}
.svc-grid{display:grid;grid-template-columns:61.8fr 38.2fr;gap:clamp(1.5rem,4vw,3.427rem);align-items:start}
.svc-visual{position:sticky;top:5.5rem;aspect-ratio:1/1.272;border-radius:1.2rem;overflow:hidden;background:var(--paper-2)}
.svc-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--t3) var(--ease),transform 1.2s var(--ease);transform:scale(1.04)}
.svc-visual img.on{opacity:1;transform:none}
@media(max-width:64rem){.svc-grid{grid-template-columns:1fr}.svc-visual{display:none}}
.js .rv{opacity:0;transform:translateY(10px);transition:opacity var(--t3) var(--ease),transform var(--t3) var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv :is(.real-grid,.row-list,.three,.steps,.quotes,.know-grid,.wz-pasek,.zakres,.med-grid,.uru-track,.uru-tab)>*{
  opacity:0;transform:translateY(7px);transition:opacity var(--t3) var(--ease),transform var(--t3) var(--ease)}
.js .rv.in :is(.real-grid,.row-list,.three,.steps,.quotes,.know-grid,.wz-pasek,.zakres,.med-grid,.uru-track,.uru-tab)>*{opacity:1;transform:none}
.js .rv.in :is(.real-grid,.row-list,.three,.steps,.quotes,.know-grid,.wz-pasek,.zakres,.med-grid,.uru-track,.uru-tab)>*:nth-child(2){transition-delay:.07s}
.js .rv.in :is(.real-grid,.row-list,.three,.steps,.quotes,.know-grid,.wz-pasek,.zakres,.med-grid,.uru-track,.uru-tab)>*:nth-child(3){transition-delay:.14s}
.js .rv.in :is(.real-grid,.row-list,.three,.steps,.quotes,.know-grid,.wz-pasek,.zakres,.med-grid,.uru-track,.uru-tab)>*:nth-child(4){transition-delay:.21s}
.js .rv.in :is(.real-grid,.row-list,.three,.steps,.quotes,.know-grid,.wz-pasek,.zakres,.med-grid,.uru-track,.uru-tab)>*:nth-child(n+5){transition-delay:.28s}
/* Linie torow rysuja sie od lewej po wejsciu, o krok pozniej niz wezly, ktore lacza. */
.js .rv :is(.uru-krok::after,.wz-pasek::before){transform:scaleX(0);transform-origin:left;transition:transform var(--t3) var(--ease) .21s}
.js .rv.in :is(.uru-krok::after,.wz-pasek::before){transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.js .rv,.js .rv *{opacity:1!important;transform:none!important;transition:none!important}}


/* ── architektura ekosystemu BW: eyebrow, trust, manifest z pigułkami, panel, karty wiedzy ── */
.eyebrow-brand{color:var(--teal-ink)}
.trust{list-style:none;padding:0;margin:1rem 0 0;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-size:.88rem;color:var(--quiet)}
.trust li{position:relative;padding-left:1.4rem}
.trust li::before{content:"";position:absolute;left:0;top:.5em;width:.7rem;height:.4rem;border-left:2px solid var(--teal-ink);border-bottom:2px solid var(--teal-ink);transform:rotate(-45deg)}
.statement{border-bottom:1px solid var(--rule-soft);padding:var(--s6) 0}
.phi{display:grid;grid-template-columns:61.8fr 38.2fr;gap:var(--s5);align-items:end}
.statement-h{max-width:18ch;margin:0;font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.12;letter-spacing:-.03em}
.statement-h::before{content:"";display:block;width:2.6rem;height:.42rem;background:var(--lime);margin-bottom:1.3rem;border-radius:2px}
/* Zygzak: co druga para odwraca kolumny, zeby kilka blokow pod rzad
   nie mialo tego samego ksztaltu. Kolejnosc w kodzie zostaje czytelna. */
.two.odwrotnie{grid-template-columns:38.2fr 61.8fr}
.two.odwrotnie>*:first-child{order:2}
@media(max-width:48rem){.two.odwrotnie>*:first-child{order:0}}
.phi-aside p{max-width:34ch}
.phi-aside p:first-child{font-size:1.02rem;color:var(--ink)}
@media(max-width:48rem){.phi{grid-template-columns:1fr;gap:1.4rem}}
.panel{display:grid;grid-template-columns:38.2fr 61.8fr;border-radius:var(--r-lg);overflow:hidden;background:var(--teal-soft)}
.panel-img img{width:100%;height:100%;object-fit:cover;min-height:22rem}
.panel-body{padding:clamp(1.6rem,4vw,3.2rem)}
.panel-body .band-q p{color:var(--ink);font-size:clamp(1.4rem,2.6vw,2.1rem);max-width:22ch}
.panel-body .band-who{color:var(--quiet)}
@media(max-width:48rem){.panel{grid-template-columns:1fr}.panel-img img{min-height:14rem}}
.know-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media(max-width:48rem){.know-grid{grid-template-columns:1fr}}
.know-card{display:flex;flex-direction:column;gap:.5rem;min-height:11rem;padding:var(--s3);border-radius:var(--r-lg);background:var(--card);text-decoration:none;color:var(--ink);position:relative;transition:transform var(--t2) var(--ease),box-shadow var(--t2) ease}
.know-card:hover{box-shadow:0 18px 40px rgba(15,70,98,.10)}
.know-card:hover{transform:translateY(-3px)}
.know-meta{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--quiet)}
.know-title{font-weight:700;font-size:1.08rem;letter-spacing:-.01em;line-height:1.3;padding-right:2.6rem}
.know-go{position:absolute;right:1rem;bottom:1rem;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center}
.know-card:hover .know-go{background:var(--lime);color:var(--ink)}
.form{border-radius:var(--r-lg)}
.svc-visual{border-radius:var(--r-lg)}
.head-img img{border-radius:var(--r-lg);aspect-ratio:1.618/1}


/* ── hero: liczby pod zdjęciem ── */
.hero-side{display:grid;gap:1rem;grid-template-rows:1fr}
/* Lancuch wysokosci musi przejsc przez <picture>: bez tego kadr konczy sie
   w polowie kolumny, a prawa strona hero ma poszarpany dol. */
.hero-side .hero-img,.hero-side .hero-img picture{display:block;height:100%}
.hero-side .hero-img img{height:100%;width:100%;object-fit:cover}
.nums-side{padding:.4rem 0 0;border-bottom:0;gap:.8rem;grid-template-columns:repeat(3,1fr)}
.nums-side .num-v{font-size:clamp(1.8rem,2.8vw,2.5rem);font-weight:400;letter-spacing:-.035em}
.nums-side .num-l{font-size:.82rem;margin-top:.25rem;max-width:16ch}

/* ── ikony ── */
.ico{width:1.35em;height:1.35em;flex:0 0 auto;color:var(--teal-ink);vertical-align:-.3em}
.ico-s{width:1.05em;height:1.05em;vertical-align:-.2em}
.ico-step{position:absolute;right:0;top:1.2rem;width:2rem;height:2rem;color:var(--ink)}
.step{padding-right:0}
.row-name .ico{margin-right:.5rem}
.row-link:hover .ico{color:var(--ink)}
.trust-ico li{padding-left:0;display:inline-flex;align-items:center;gap:.4rem}
.trust-ico li::before{display:none}
.trust-ico .ico{color:var(--teal-ink)}






/* ═══ MEGA MENU · jeden układ, bez nowrap, bez ucinania ═══ */
/* mega menu: trzy kolumny, identyczne pudelko dla obu swiatow (IA §2) */
.mega-in{display:block}
.mega-grid{display:grid;gap:1.4rem}
.mega-col{min-width:0}
/* Naglowek rezerwuje dwie linie zawsze. Bez tego panel z dluzszym naglowkiem
   startowal liste 18 px nizej niz pozostale i rzad sie rozjezdzal. */
.mega-h{margin:0 0 .5rem;font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--quiet);line-height:1.32;text-wrap:balance}
.mega-list{list-style:none;margin:0;padding:0}
.mega-list li{line-height:1.5rem}
/* Kolumna bez linkow: pigulki zamiast napisow. Goly tekst w rzedzie z linkami
   obiecuje klikniecie, ktorego nie ma. Pigulka mowi 'etykieta', nie 'wejscie'. */
.mega-list.plain{display:flex;flex-wrap:wrap;gap:.34rem;padding-top:.1rem}
.mega-list.plain li{line-height:1}
.mega-pill{display:inline-block;padding:.3rem .66rem;border-radius:999px;
  background:rgba(15,70,98,.055);color:var(--quiet);font-size:.83rem;line-height:1.25;
  white-space:nowrap}
.sub .mega-list a{position:relative;display:flex;align-items:center;gap:.4rem;padding:.32rem .5rem .32rem .55rem;margin-left:-.55rem;
  font-size:.9rem;line-height:1.5rem;color:var(--ink);text-decoration:none;font-weight:500;border-radius:.55rem;
  transition:color var(--t) ease,background var(--t) ease,transform var(--t2) var(--ease)}
.sub .mega-list a:hover,.sub .mega-list a:focus-visible{background:rgba(15,70,98,.045);color:var(--teal-deep);transform:translateX(3px)}
.ml-go{opacity:0;transform:translateX(-4px);font-size:.85em;color:var(--teal-deep);transition:opacity var(--t) ease,transform var(--t2) var(--ease)}
.sub .mega-list a:hover .ml-go,.sub .mega-list a:focus-visible .ml-go{opacity:1;transform:none}
.js .sub .mega-list li,.js .sub .mega-list.plain li{opacity:0;transform:translateY(5px);transition:opacity var(--t) var(--ease),transform var(--t2) var(--ease)}
.js .has-sub:hover .mega-list li,.js .has-sub:focus-within .mega-list li,.js .has-sub.open .mega-list li{opacity:1;transform:none}
.js .has-sub .mega-list li:nth-child(2){transition-delay:.05s}
.js .has-sub .mega-list li:nth-child(3){transition-delay:.09s}
.js .has-sub .mega-list li:nth-child(4){transition-delay:.13s}
.js .has-sub .mega-list li:nth-child(5){transition-delay:.17s}
.js .has-sub .mega-list li:nth-child(n+6){transition-delay:.21s}
.mega-aside{display:none}
@media(min-width:64.01rem){.nav{position:static}}
@media(min-width:60rem){
  .has-sub{position:static}
  .sub{left:-.95rem;right:-.55rem;width:auto;min-width:0;
    display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.1rem 1.3rem;
    padding:1.15rem 1.5rem;border-radius:var(--r-lg)}
  .sub.mega{display:block;left:-.95rem;right:-.55rem;top:calc(100% + 1.22rem);min-width:0;width:auto;
    border:1px solid rgba(255,255,255,.8);border-radius:var(--r-lg);
    background:rgba(251,249,244,.985);box-shadow:0 2px 6px rgba(15,70,98,.06),0 30px 60px -24px rgba(15,70,98,.6);padding:0}
  @supports (backdrop-filter:blur(1px)){.sub.mega{background:rgba(251,249,244,.93);backdrop-filter:blur(30px) saturate(1.9) brightness(1.03)}}
  .mega-in{display:grid;grid-template-columns:minmax(0,1fr) 12.5rem;gap:1.8rem;min-height:19.7rem;box-sizing:border-box;padding:1.3rem 1.6rem 1.3rem;max-width:none;overflow:hidden}
  .mega-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.04fr) minmax(0,1.04fr);gap:2.2rem}
  /* Rozdzielenie kolumn to wlos gasnacy na obu koncach, nie kreska od gory do dolu.
     Twarda linia w panelu ze szkla wyglada jak szew, gradient jak swiatlo miedzy polami. */
  .mega-col{position:relative}
  /* Pierwsza kolumna niesie usluge glowna, wiec dostaje ten sam limonkowy znak
     co teza na stronie. Jeden akcent na panel, nie trzy. Miejsce na znak rezerwuja
     WSZYSTKIE naglowki, inaczej pierwsza kolumna spada o 12 px i rzad sie rozjezdza. */
  /* Rezerwa na limonkowy znak i na drugi wiersz naglowka. Tylko na szerokim ekranie,
     bo na telefonie panel jest lista, a nie rzedem kolumn, i nie ma czego rownac.
     padding .72 + dwa wiersze po .72*1.32 = 2.62rem; rezerwa liczy sie w border-box. */
  .mega-h{position:relative;padding-top:.72rem;min-height:2.7rem}
  .mega-col:first-child .mega-h::before{content:"";position:absolute;top:0;left:0;width:1.8rem;height:2px;
    background:var(--lime);border-radius:2px}
  .mega-col+.mega-col::before{content:"";position:absolute;left:-1.1rem;top:.1rem;bottom:.1rem;width:1px;
    background:linear-gradient(180deg,rgba(15,70,98,0) 0%,rgba(15,70,98,.15) 16%,rgba(15,70,98,.15) 78%,rgba(15,70,98,0) 100%)}
  .mega-aside{position:relative}
  .mega-aside::before{content:"";position:absolute;left:-.9rem;top:.1rem;bottom:.1rem;width:1px;
    background:linear-gradient(180deg,rgba(15,70,98,0) 0%,rgba(15,70,98,.15) 16%,rgba(15,70,98,.15) 78%,rgba(15,70,98,0) 100%)}
  .mega-col{opacity:0;transform:translateY(6px);transition:opacity var(--t) ease,transform var(--t2) var(--ease)}
  .has-sub:hover .mega-col,.has-sub:focus-within .mega-col,.has-sub.open .mega-col{opacity:1;transform:none}
  .has-sub:hover .mega-col:nth-child(2),.has-sub.open .mega-col:nth-child(2){transition-delay:.05s}
  .has-sub:hover .mega-col:nth-child(3),.has-sub.open .mega-col:nth-child(3){transition-delay:.1s}
  .mega-aside{display:block;align-self:start}
  .mega-prev{display:block;border-radius:1rem;overflow:hidden;background:var(--card);text-decoration:none;color:var(--ink);box-shadow:0 14px 32px rgba(15,70,98,.12);transform:translateY(6px);opacity:0;transition:opacity var(--t) ease .12s,transform var(--t2) var(--ease) .12s}
  .has-sub:hover .mega-prev,.has-sub.open .mega-prev{opacity:1;transform:none}
  .mega-prev{overflow:hidden}
  .mega-prev img{width:100%;height:9.5rem;object-fit:cover;display:block;background:var(--teal-soft);
    transition:opacity var(--t) var(--ease),transform var(--t3) var(--ease)}
  .mega-prev img.swap{opacity:.25;transform:scale(1.015)}
  .mega-prev:hover img{transform:scale(1.025)}
  .mega-prev-nm{transition:opacity var(--t) var(--ease)}
  .mega-prev-nm.swap{opacity:0}
  .mega-prev-cap{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.5rem .8rem;min-height:2.6rem;font-size:.8rem}
  .mega-prev-nm{font-weight:700;letter-spacing:-.01em;line-height:1.25;min-width:0;overflow-wrap:anywhere;hyphens:auto;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .mega-prev-go{font-size:.76rem;color:var(--teal-deep);display:inline-flex;align-items:center;gap:.2rem;white-space:nowrap}
  .mega-prev-go .arr{font-size:.9em}
  .mega-aside-t{font-size:.78rem;color:var(--quiet);margin:.7rem .1rem 0;line-height:1.4}
  .mega-aside-t a{color:var(--ink);font-weight:700}
}
@media(max-width:60rem){
  .mega-in{padding:0}
  .mega-grid{gap:.6rem}
  .mega-h{margin-top:.4rem}
}
@media(prefers-reduced-motion:reduce){.mega-col,.mega-prev,.mega-prev img,.sub .mega-list li,.sub .mega-list a,.ml-go{transition:none!important;opacity:1!important;transform:none!important}}


/* ── badge zamiast ikon (odcienie kart) ── */
.badge{display:inline-block;width:.85rem;height:.85rem;border-radius:.28rem;vertical-align:-.05em;margin-right:.55rem;flex:0 0 auto}
.badge.tint-teal{background:var(--teal)}
.badge.tint-lime{background:var(--lime)}
.badge.tint-sand{background:#E9CF96}
.row-name .badge{margin-right:.6rem}


/* ── zaufali nam: jedno zdanie + liczba (φ) ── */
.logos-grid{display:grid;grid-template-columns:61.8fr 38.2fr;gap:var(--s3);align-items:baseline}
.logos-h{margin:0 0 var(--s2)}
.logos-line{margin:0;max-width:none;font-size:1.05rem;line-height:1.9;font-weight:600;color:var(--ink);letter-spacing:-.01em;text-wrap:pretty}
.logos-line .dot{color:var(--teal);font-weight:700;margin:0 .1em}
.logos-stat{display:grid;justify-items:end;text-align:right;align-self:end}
.logos-num{font-size:clamp(2.4rem,4.4vw,3.6rem);font-weight:300;letter-spacing:-.045em;line-height:.94;font-variant-numeric:tabular-nums}
.logos-lab{color:var(--quiet);font-size:.88rem;margin-top:.3rem}
@media(max-width:48rem){.logos-grid{grid-template-columns:1fr;gap:var(--s3)}.logos-stat{justify-items:start;text-align:left}}


/* ── okruszki ── */
.crumbs{border-bottom:1px solid var(--rule-soft)}
.crumbs ol{list-style:none;margin:0;padding:.55rem 0;display:flex;flex-wrap:wrap;gap:.2rem .5rem;font-size:.8rem;color:var(--quiet)}
.crumbs li+li::before{content:"/";margin-right:.5rem;color:var(--rule)}
.crumbs a{color:var(--quiet);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{color:var(--ink)}
picture{display:block}
picture img{width:100%}


/* ── wynik realizacji ── */
.result{display:grid;gap:.2rem}
.result-v{font-size:clamp(2.6rem,5vw,4rem);font-weight:700;letter-spacing:-.03em;line-height:1}
.result-l{font-size:1.05rem;color:var(--ink)}


/* ── powiązana usługa pod wpisem ── */
.post-svc{margin:var(--s4) 0 0;padding:var(--s3);border-radius:var(--r-lg);background:var(--teal-soft)}
.post-svc .eyebrow{margin-bottom:.4rem}
.post-svc-link{display:grid;gap:.15rem;text-decoration:none;color:var(--ink)}
/* Dwie karty w jednym bloku: druga oddzielona swiatlem i linia wlasnego tla,
   nie ramka (zasada: zero 1px borderow na kartach). 22.09 */
.post-svc-link + .post-svc-link{margin-top:var(--s2);padding-top:var(--s2);
  box-shadow:0 -1px 0 rgba(15,70,98,.10)}
.post-svc-name{font-weight:700;font-size:1.15rem;letter-spacing:-.01em}
.post-svc-desc{color:var(--quiet);font-size:.95rem}
.post-svc-go{color:var(--teal-ink);font-weight:500;margin-top:.3rem}
.post-svc-link:hover .post-svc-name{color:var(--teal-ink)}

/* mostek: IA §6, przejscie ze sciezki B do rdzenia; takze wyjscie ze stron bez formularza */
.sec.mostek{background:var(--sand);border-bottom:0;padding:var(--s4) 0}
.mostek-row{display:grid;grid-template-columns:61.8fr 38.2fr;align-items:center;gap:var(--s3)}
.mostek-t{margin:0;font-size:var(--fs-lede);line-height:1.45;max-width:52ch}
.mostek-row .btn{justify-self:end}
@media (max-width:48rem){.mostek-row{grid-template-columns:1fr;gap:var(--s2)}.mostek-row .btn{justify-self:start}}

/* T2 i T1 wg IA: cztery kroki uruchomienia, dwie karty swiatow, kontekst formularza */
.steps.four{grid-template-columns:repeat(4,1fr)}
.real-grid.two-up{grid-template-columns:1fr 1fr}
.real-grid.two-up .real-card img{aspect-ratio:16/10}
/* globalne p{max-width:66ch} sluzy tekstowi biegnacemu; tu blok zachowuje sie jak pole */
.form-ctx{margin:0;max-width:none;padding:.75rem .95rem;background:var(--teal-soft);color:var(--ink);border-radius:var(--r);font-size:.92rem;line-height:1.45}
.form-ctx strong{font-weight:700}
.form-ctx a{color:var(--teal-deep);text-underline-offset:.2em}
.form-ctx a:hover{color:var(--ink)}
@media (max-width:60rem){.steps.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:48rem){.steps.four,.real-grid.two-up{grid-template-columns:1fr}}
/* fazy wspolpracy: czas trwania i artefakt na wyjsciu (IA §4 T9).
   Stopka kroku siada na dole karty, wiec "Na wyjsciu" stoi w jednej linii
   we wszystkich czterech, niezaleznie od dlugosci opisu. */
/* Cztery karty dziela te same wiersze, wiec numer, tytul, opis i stopka stoja
   w jednej linii niezaleznie od dlugosci tekstu. Flex tego nie potrafi: rownanie
   do gory zostawia rozne spody, do dolu rozjezdza linie "Na wyjsciu". */
.steps.four:not(.steps-cienkie) .step{display:flex;flex-direction:column}
.steps.four:not(.steps-cienkie) .step>p{flex:1 0 auto}
@supports (grid-template-rows:subgrid){
  .steps.four:not(.steps-cienkie){grid-template-rows:auto auto 1fr auto}
  .steps.four:not(.steps-cienkie) .step{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0}
  .steps.four:not(.steps-cienkie) .step>p{flex:none}
}
.step-stopka{padding-top:var(--s2)}
.step-meta{margin:0 0 .4rem}
.step-czas{display:inline-flex;align-items:center;gap:.42rem;padding:.24rem .72rem .28rem;border-radius:999px;
  background:var(--lime-soft);color:var(--ink);font-size:.78rem;font-weight:500;line-height:1.3;white-space:nowrap}
.step-czas::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--lime);flex:0 0 auto}
.step-art{margin:0;font-size:.86rem;line-height:1.45;color:var(--teal-deep)}
.step-art-l{display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--quiet);margin-bottom:.15rem}

/* Uruchomienie gabinetu to podprocedura wewnatrz fazy, a nie druga drabina rowna
   przebiegowi wspolpracy. Numer schodzi do rozmiaru zwyklego tekstu, zeby strona
   nie miala dwoch ciagow 1-2-3-4 o tej samej wadze. */
.steps-cienkie .step-n{font-size:1rem;font-weight:500;line-height:1.6;color:var(--quiet);
  display:inline-flex;align-items:center;justify-content:center;
  width:1.85rem;height:1.85rem;border-radius:50%;background:var(--paper-2);margin-bottom:.7rem}
.steps-cienkie .step-n::after{display:none}
.sec.alt .steps-cienkie .step-n{background:var(--card)}

/* wskaznik "jestes tutaj" musi rozrozniac swiat (IA §2) */
.is-swiat .crumbs{position:relative}
.is-swiat .crumbs::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--teal)}
.swiat-fabryka .crumbs::before{background:var(--lime)}
.swiat-biuro .crumbs::before{background:var(--teal)}

/* konstruktor zapytania: wybory, nie kalkulator. Stoi na ciemnej sekcji formularza.
   Siatka, nie zawijany flex: zawijanie daje kazdej grupie inny prawy brzeg. */
.opts{display:grid;gap:var(--s1)}
.opts-para{grid-template-columns:1fr 1fr}
/* nieparzysta liczba opcji: ostatnia bierze oba pola, zeby rzad nie zostal urwany */
.opts-para>.opt:last-child:nth-child(odd){grid-column:1/-1}
.opts-krotkie{grid-template-columns:repeat(5,1fr)}
@media(max-width:64rem){.opts-krotkie{grid-template-columns:repeat(3,1fr)}
  .opts-krotkie>.opt:last-child:nth-child(3n+1){grid-column:1/-1}}
@media(max-width:34rem){.opts-para,.opts-krotkie{grid-template-columns:1fr}
  .opts-para>.opt:last-child:nth-child(odd),.opts-krotkie>.opt:last-child:nth-child(3n+1){grid-column:auto}}
.opt{position:relative;display:flex;align-items:center;min-height:2.75rem;padding:.4rem .95rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.26);color:rgba(255,255,255,.88);font-size:.9rem;line-height:1.25;cursor:pointer;
  transition:background var(--t) ease,border-color var(--t) ease,color var(--t) ease,transform var(--t) var(--ease)}
.opt input{position:absolute;opacity:0;width:100%;height:100%;left:0;top:0;margin:0;cursor:pointer}
.opt:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.07)}
.opt:active{transform:scale(.985)}
.opt:has(input:checked){background:#fff;border-color:#fff;color:var(--ink);font-weight:500}
.opt:has(input:focus-visible){outline:3px solid var(--lime);outline-offset:3px}
/* jednokrotny wybor zostaje pigulka, wielokrotny ma narys kwadratowy:
   ksztalt niesie regule, nie sama nazwa pola */
.opt-check{border-radius:.7rem}
.opt-krotka{justify-content:center;text-align:center;padding:.4rem .5rem;font-size:.86rem;white-space:nowrap}
@media(max-width:34rem){.opt-krotka{font-size:.9rem;padding:.4rem .95rem}}
.opt-rdzen span{position:relative;padding-left:.9rem}
.opt-rdzen span::before{content:"";position:absolute;left:0;top:50%;width:.4rem;height:.4rem;margin-top:-.2rem;border-radius:50%;background:var(--lime)}
.opt-rdzen:has(input:checked) span::before{background:var(--teal-deep)}

/* grupy pracownikow: najtanszy dowod zasiegu, wiec dostaja wlasna sekcje,
   a nie kolumne obok uslug (wsad §2) */
.grupy{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.5rem}
.grupa{position:relative;padding:.85rem 1rem .85rem 2.1rem;background:var(--card);border-radius:var(--r);
  font-weight:500;box-shadow:0 1px 2px rgba(15,70,98,.05),0 10px 22px -20px rgba(15,70,98,.5)}
.grupa::before{content:"";position:absolute;left:1rem;top:50%;width:.45rem;height:.45rem;margin-top:-.225rem;border-radius:50%;background:var(--teal)}
@media(max-width:34rem){.grupy{grid-template-columns:1fr}}
.opcjonalne{font-weight:400;font-size:.78rem;color:rgba(255,255,255,.55);letter-spacing:.02em}

/* plywajaca pigulka kontaktowa: atramentowa, zeby nie konkurowala
   z pomaranczowym przyciskiem formularza (IA §8) */
.pigulka-kontakt{position:fixed;left:50%;bottom:var(--s2);z-index:45;display:inline-flex;align-items:center;
  transform:translateX(-50%) translateY(.9rem);opacity:0;pointer-events:none;
  background:var(--lime);border-radius:999px;padding:.2rem;
  box-shadow:0 2px 8px rgba(15,70,98,.18),0 18px 38px -22px rgba(15,70,98,.7);
  transition:opacity var(--t2) var(--ease),transform var(--t2) var(--ease)}
.pigulka-kontakt.pk-on{opacity:1;transform:translateX(-50%);pointer-events:auto}
@supports (bottom:env(safe-area-inset-bottom)){
  .pigulka-kontakt{bottom:calc(env(safe-area-inset-bottom) + var(--s2))}}
.pk-poz{display:inline-flex;align-items:center;gap:.45rem;min-height:2.3rem;padding:0 .85rem;border-radius:999px;
  color:var(--ink);text-decoration:none;font-size:.85rem;font-weight:500;font-variant-numeric:tabular-nums;
  white-space:nowrap;transition:background var(--t) ease,color var(--t) ease}
.pk-poz svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.pk-sep{width:1px;align-self:stretch;margin:.4rem 0;background:rgba(15,70,98,.22)}
@media(hover:hover){.pk-poz:hover{background:rgba(15,70,98,.1);color:var(--ink)}
  .pigulka-kontakt.pk-on:hover{transform:translateX(-50%) translateY(-2px)}}
@media(hover:none){.pk-poz{min-height:2.75rem}}
@media(max-width:30rem){.pk-poz{padding:0 .65rem;font-size:.8rem}.pk-poz svg{width:13px;height:13px}}
@media(prefers-reduced-motion:reduce){.pigulka-kontakt{transition:none}}


/* Formularz wchodzi jak panel menu: bloki osiadaja po kolei, ruch krotki i jeden raz.
   Bez JS i przy prefers-reduced-motion wszystko stoi na swoim miejscu od razu. */
.js .cta:not(.in) .blok{opacity:0;transform:translateY(.5rem)}
.cta .blok{transition:opacity var(--t2) var(--ease),transform var(--t2) var(--ease)}
.cta.in .blok{opacity:1;transform:none}
.cta.in .blok:nth-of-type(1){transition-delay:.02s}
.cta.in .blok:nth-of-type(2){transition-delay:.07s}
.cta.in .blok:nth-of-type(3){transition-delay:.12s}
.cta.in .blok:nth-of-type(4){transition-delay:.17s}
.cta.in .blok:nth-of-type(5){transition-delay:.22s}
@media(prefers-reduced-motion:reduce){
  .js .cta:not(.in) .blok{opacity:1;transform:none}
  .cta .blok{transition:none}
}


/* ─────────────── ruch: jedna gramatyka dla wszystkiego, co reaguje ───────────────
   Drabina czasu ma cztery szczeble: --t0 docisk, --t mikrostan, --t2 ruch elementu,
   --t3 wejscie sekcji. Nic nie animuje sie poza ta drabina. Kazdy efekt ma byc
   odpowiedzia na dzialanie, nie ozdoba, ktora dzieje sie sama. */

/* CTA: swiatlo idzie za kursorem. Bez JS zostaje spokojny gradient. */
.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;pointer-events:none;
  background:radial-gradient(8.5rem 8.5rem at var(--mx,50%) var(--my,50%),rgba(255,255,255,.30),rgba(255,255,255,0) 66%);
  transition:opacity var(--t2) var(--ease)}
.btn-primary:hover::after,.btn-primary:focus-visible::after{opacity:1}
.form .btn::after{background:radial-gradient(8.5rem 8.5rem at var(--mx,50%) var(--my,50%),rgba(255,255,255,.6),rgba(255,255,255,0) 66%)}
.btn-ghost{transition:transform var(--t) var(--ease),background var(--t) ease,box-shadow var(--t) ease}
.btn-ghost:hover{transform:translateY(-1px);box-shadow:0 8px 20px -12px rgba(15,70,98,.5)}

/* Licznik w naglowku sekcji to nie link: zadnej strzalki i zadnego podkreslenia */
.sec-licz{font-weight:500;white-space:nowrap;color:var(--quiet)}

/* Link tekstowy: kreska wybiega spod slowa, strzalka rusza sie razem z nia */
a.more{position:relative;display:inline-flex;align-items:baseline;gap:.4rem;text-decoration:none;color:var(--teal-deep)}
a.more::after{content:"";position:absolute;left:0;right:0;bottom:-.14em;height:1.5px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform var(--t2) var(--ease)}
a.more:hover::after,a.more:focus-visible::after{transform:scaleX(1)}
a.more::before{content:"→";order:2;transition:transform var(--t2) var(--ease)}
a.more:hover::before{transform:translateX(.22rem)}
.cta a.more{color:var(--lime)}

/* Karty: jeden gest uniesienia dla wszystkich, zamiast trzech podobnych */
.real-card,.know-card{will-change:transform}
.real-card:active,.know-card:active{transform:translateY(-1px) scale(.995);transition-duration:var(--t0)}

/* Zaznaczenie opcji: ptaszek dorysowuje sie, zamiast pojawiac skokiem */
.opt-check>span{position:relative;padding-left:1.5rem}
.opt-check>span::after{content:"";position:absolute;left:.15rem;top:50%;width:.62rem;height:.34rem;
  margin-top:-.28rem;border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg) scale(.4);opacity:0;transform-origin:center;
  transition:opacity var(--t0) ease,transform var(--t2) var(--ease)}
.opt-check:has(input:checked)>span::after{opacity:1;transform:rotate(-45deg) scale(1)}
.opt-rdzen>span{padding-left:1.5rem}
.opt-rdzen>span::before{left:.42rem}
.opt-check:has(input:checked).opt-rdzen>span::before{opacity:0}

@media(prefers-reduced-motion:reduce){
  .btn-primary::after{display:none}
  a.more::after{transform:scaleX(1)}
  .opt-check>span::after{transition:none}
}


/* ─────────────── glebia: cztery warstwy, kazda oparta na prawdziwym stanie ───────────────
   Nic tu nie rusza sie samo z siebie. Kazda warstwa jest odpowiedzia na to,
   gdzie jest czytelnik albo gdzie jest jego kursor. */

/* 1. Naglowek wchodzi liniami. Linia jest jednostka czytania, wiec i jednostka ruchu. */
.ln{display:block}
@keyframes wjedz-linia{from{opacity:0;transform:translateY(.6rem)}to{opacity:1;transform:none}}
.js h1 .ln{animation:wjedz-linia var(--t3) var(--ease) both}
/* naglowek bez lamania (blog, realizacje, kategorie) wchodzi w calosci: jedna gramatyka */
.js h1:not(:has(.ln)){animation:wjedz-linia var(--t3) var(--ease) both}
.js h1 .ln:nth-child(2){animation-delay:.07s}
.js h1 .ln:nth-child(3){animation-delay:.14s}
.js h1 .ln:nth-child(n+4){animation-delay:.21s}

/* 2. Postep czytania jest kolorem pod szklem, nie paskiem obok tresci.
   Limonka lezy POD refleksem (druga warstwa tla = nizsza), wiec czyta sie
   jak barwa prześwitująca przez kapsule, a nie jak folia naklejona na wierzchu. */

/* 3. Kadr w naglowku oddycha przy przewijaniu. Maksymalnie 18 px, wiec czuc, a nie widac. */
.hero-img img,.head-img img{transform:translate3d(0,var(--par,0px),0);will-change:transform}

/* 4. Ciemna sekcja formularza ma zrodlo swiatla tam, gdzie jest kursor. */
/* Bez overflow:hidden. Warstwa swiatla to ::before z inset:0, wiec i tak nie wyjdzie
   poza sekcje, a overflow na przodku zabija position:sticky lewej kolumny. */
.cta{position:relative;isolation:isolate}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(34rem 34rem at var(--cx,50%) var(--cy,0%),rgba(217,240,58,.10),rgba(217,240,58,0) 60%);
  transition:opacity var(--t3) var(--ease)}
.cta:hover::before{opacity:1}

@media(prefers-reduced-motion:reduce){
  .cta::before{display:none}
  .hero-img img,.head-img img{transform:none}
}


/* ─────────────── notatka do zarzadu ───────────────
   Dokument, nie sekcja strony. Ma sie dobrze czytac na ekranie i wyjsc z drukarki
   jako jedna kartka, wiec caly uklad stoi na skali φ i na jednej kolumnie miary. */
.nt-akcje{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s3)}

.notatka{background:var(--card);border-radius:var(--r-lg);padding:var(--s4);
  box-shadow:0 1px 2px rgba(15,70,98,.05),0 24px 60px -40px rgba(15,70,98,.55)}
@media(max-width:40rem){.notatka{padding:var(--s3);border-radius:var(--r)}}

.nt-head{padding-bottom:var(--s2);border-bottom:2px solid var(--ink)}
.nt-marka{margin:0;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet)}
.nt-h{margin:.35rem 0 0;font-size:var(--fs-h3);letter-spacing:-.01em}
.nt-firma{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);
  flex-wrap:wrap;margin:var(--s2) 0 0;font-size:.9rem;color:var(--quiet)}
.nt-firma label{display:inline-flex;align-items:baseline;gap:.5rem}
.nt-firma input{font:inherit;color:var(--ink);border:0;border-bottom:1px solid var(--rule);
  background:transparent;padding:.1rem .2rem;min-width:12rem;transition:border-color var(--t) ease}
.nt-firma input:focus{outline:0;border-bottom-color:var(--teal-deep)}
.nt-data{font-variant-numeric:tabular-nums}

.nt-wybor{margin:var(--s3) 0 0;display:grid;gap:var(--s1)}
.nt-wybor>div{display:grid;grid-template-columns:8.5rem 1fr;gap:.7rem;align-items:baseline;
  padding-top:.45rem;border-top:1px solid var(--rule-soft)}
.nt-wybor dt{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--quiet)}
.nt-wybor dd{margin:0;font-weight:500}
@media(max-width:34rem){.nt-wybor>div{grid-template-columns:1fr;gap:.1rem}}
.nt-pusto{margin:var(--s3) 0 0;padding:.75rem .95rem;background:var(--lime-soft);
  border-radius:var(--r);font-size:.9rem;line-height:1.45;max-width:none;color:var(--ink)}

.nt-sek{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--rule-soft)}
.nt-sek h3{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--quiet);margin:0 0 var(--s1)}
.nt-sek p{font-size:.94rem;line-height:1.55}
.nt-sek p+p{margin-top:.5rem}
.nt-dwie{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.nt-dwie h3{margin-top:0}
@media(max-width:40rem){.nt-dwie{grid-template-columns:1fr;gap:var(--s2)}}

.nt-lista{margin:.5rem 0 0;padding:0;list-style:none;display:grid;gap:.32rem}
.nt-lista li{position:relative;padding-left:1rem;font-size:.94rem;line-height:1.5}
.nt-lista li::before{content:"";position:absolute;left:0;top:.62em;width:.34rem;height:.34rem;
  border-radius:50%;background:var(--teal)}

.nt-kroki{margin:.5rem 0 0;padding:0;list-style:none;counter-reset:nt;display:grid;gap:.7rem}
.nt-kroki li{counter-increment:nt;position:relative;padding-left:1.9rem}
.nt-kroki li::before{content:counter(nt,decimal-leading-zero);position:absolute;left:0;top:.1em;
  font-size:.74rem;color:var(--teal-deep);font-variant-numeric:tabular-nums}
.nt-krok-t{margin:0;font-weight:500;font-size:.94rem;display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.nt-czas{font-size:.78rem;font-weight:400;color:var(--ink);background:var(--lime-soft);
  padding:.1rem .55rem .14rem;border-radius:999px;white-space:nowrap}
.nt-krok-a{margin:.1rem 0 0;font-size:.86rem;color:var(--quiet)}

.nt-stopka{margin-top:var(--s3);padding-top:var(--s2);border-top:2px solid var(--ink);
  font-size:.78rem;color:var(--quiet)}
.nt-stopka p{margin:0}
.nt-stopka p+p{margin-top:.2rem}

/* Wydruk: zostaje sama notatka. Bez nawigacji, bez cieni, bez tla.
   Wazne: sekcje czekajace na wejscie w kadr maja opacity 0, wiec bez tego
   odblokowania drukarka wypluwa pusta kartke. Zdarzylo sie za pierwszym razem. */
@media print{
  @page{size:A4;margin:10mm}
  .topbar,.site-head,.crumbs,.page-head,.site-foot,.pasek-kontaktu,.zaslona,.nt-akcje,.skip{display:none!important}
  .js .rv,.js .rv *,.js h1 .ln,.js h1{opacity:1!important;transform:none!important;animation:none!important}
  html,body{background:#fff!important;color:#000;font-size:8.9pt}
  .sec{padding:0!important;border:0!important;background:#fff!important}
  .wrap{padding:0!important;max-width:none!important;width:auto!important}
  .notatka{box-shadow:none;border-radius:0;padding:0;background:#fff}
  .nt-sek{page-break-inside:avoid;break-inside:avoid;margin-top:2.4mm;padding-top:2.4mm}
  .nt-lista li,.nt-kroki li{font-size:8.7pt;line-height:1.3}
  .nt-lista{gap:.7mm}
  .nt-kroki{gap:1.4mm}
  .nt-sek p{font-size:8.7pt;line-height:1.36}
  .nt-wybor{margin-top:2.4mm;gap:.6mm}
  .nt-head{padding-bottom:1.6mm}
  .nt-czas{background:transparent;border:1px solid #666;padding:0 .4rem}
  .nt-firma input{border-bottom:1px solid #999}
  .nt-pusto{background:#fff;border:1px solid #999}
  .nt-stopka{margin-top:2.4mm;padding-top:1.6mm}
  a[href]::after{content:""}
}


/* ─────────────── pasek przewijania ───────────────
   Pasek strony zostaje systemowy i to jest decyzja, nie przeoczenie.
   Samo zdefiniowanie ::-webkit-scrollbar przelacza go z nakladkowego na klasyczny,
   czyli widoczny przez caly czas, a scrollbar-gutter rezerwuje mu staly pas.
   Na macOS dawalo to szara pionowa kreske przy kapsule na kazdej stronie.
   Stylujemy wylacznie pudelka, ktore naprawde sie przewijaja w srodku strony. */
.tablewrap{scrollbar-width:thin}

/* Panele i tabele nie przekazuja przewijania na strone pod spodem */
.sub,.tablewrap{overscroll-behavior:contain}


/* Kadr otwierajacy wpis. Wpisy bez kadru nie dostaja pustego miejsca:
   slot pojawia sie wylacznie wtedy, gdy wpis ma przypisany obraz. */
.post-kadr{margin-bottom:var(--s3)}
.post-kadr img,.post-kadr picture{border-radius:var(--r-lg);width:100%}
.post-kadr img{aspect-ratio:1.618/1;object-fit:cover}
@media(max-width:40rem){.post-kadr img,.post-kadr picture{border-radius:var(--r)}}


/* Kolumny i bloki na stronie glownej: odstepy tam, gdzie tresc sie sklejala */
.three p+p{margin-top:.62rem}
.steps+.two{margin-top:var(--s4)}
.steps+.two h3{margin-top:0}

/* Pas logotypow klientow. Rowne pole znaku, nie rowna wysokosc (build.py: logo_pas).
   Skala szarosci w spoczynku, kolor po najechaniu: pas ma byc dowodem, nie galeria
   szesnastu palet. Reguła jest jednolinijkowa, wiec powrot do koloru to jedna zmiana. */
.logo-pas{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(7,1fr);gap:var(--s2) var(--s1)}
.logo-kafel{display:flex;align-items:center;justify-content:center;min-height:2.75rem}
.logo-kafel img{max-width:100%;height:auto;
  /* brightness+contrast, nie samo grayscale: Nestle i Valeo maja jasnoszary oryginal
     i po samym odbarwieniu znikaja. brightness(0) odpada, bo Orlen i IKEA to tekst
     wycięty w ksztalcie, wiec zlewaja sie w jednolity prostokat (proba 11.09). */
  filter:grayscale(1) brightness(.55) contrast(1.5) opacity(.75);
  transition:filter var(--t) var(--ease)}
.logo-kafel img:hover{filter:none}
@media(prefers-reduced-motion:reduce){.logo-kafel img{transition:none}}
@media(max-width:64rem){.logo-pas{grid-template-columns:repeat(4,1fr)}}
/* cztery kolumny, nie trzy: szesnascie znakow dzieli sie na cztery rowne rzedy,
   a przy trzech ostatni rzad zostaje z jednym sierotą. */
@media(max-width:34rem){.logo-pas{grid-template-columns:repeat(4,1fr);gap:var(--s2) .5rem}}



/* Liczby pod pasem logotypow. Wyszly z hero, bo 400+ i 200+ stały tam raz, a 130 px
   nizej drugi raz: ta sama liczba dwa razy nad zgieciem przestaje byc dowodem. */
.nums-pas{grid-template-columns:1fr 1fr;padding:0;border-bottom:0;gap:var(--s3)}
.nums-pas .num-v{font-size:clamp(1.9rem,2.6vw,2.3rem);font-weight:300;letter-spacing:-.04em;line-height:1}
.nums-pas .num-l{font-size:.85rem;margin-top:.3rem;color:var(--quiet);max-width:22ch;line-height:1.45}
@media(max-width:48rem){.nums-pas{gap:var(--s2)}}



/* ── Warstwa medyczna: karta specyfikacji w zlotym podziale ──────────────────
   Lewa kolumna 38,2% niesie teze i wyjscie, prawa 61,8% szesc wierszy z opisem.
   Wiersze, nie kafelki: nad ta sekcja stoi panel modulu, a dwie plaszczyzny
   kafelkowe pod soba lamia regule ukladu. */
.med{display:grid;grid-template-columns:38.2fr 61.8fr;gap:var(--s5);align-items:start}
.med-lewa h2{margin:0 0 var(--s2)}
.med-lewa p{margin:0;max-width:34ch}
/* Przycisk potrzebuje wlasnego oddechu: --s3 pod akapitem czytalo sie jak przyklejony. */
.med-lewa .hero-cta{margin:var(--s4) 0 0}
.med-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;
  gap:0 var(--s4)}
/* Znak badania z arkusza ikon: teal, akcent limonkowy, kolumna 2.2rem, tekst obok. */
.med-w{padding:var(--s2) 0 var(--s3) 2.2rem;border-top:1px solid var(--rule-soft);position:relative}
.med-ico{position:absolute;left:0;top:calc(var(--s2) + .05rem);width:1.5rem;height:1.5rem;color:var(--teal-ink)}
.med-grid>.med-w:nth-child(1) .med-ico,.med-grid>.med-w:nth-child(2) .med-ico{top:.05rem}
.med-grid>.med-w:nth-child(1),.med-grid>.med-w:nth-child(2){border-top:0;padding-top:0}
.med-n{margin:0 0 .22rem;font-size:1rem;font-weight:600;line-height:1.3;max-width:none}
.med-t{margin:0;font-size:.92rem;line-height:1.5;color:var(--quiet);max-width:38ch}
/* Sonda: obiekt 3D pod CTA. Domyslnie zero wysokosci - rysuje go dopiero JS,
   wiec bez skryptu nie zostaje pusta dziura w ukladzie. */
.med-canvas{display:block;width:100%;height:0}
.js .med-canvas{width:clamp(12rem,19vw,17rem);height:clamp(12rem,19vw,17rem);margin-top:var(--s4);pointer-events:none}
@media(max-width:62rem){
  .med{grid-template-columns:1fr;gap:var(--s3)}
  .med-lewa p{max-width:none}
  .med-grid{grid-template-columns:1fr}
  .js .med-canvas{display:none}
  .med-grid>.med-w:nth-child(2){border-top:1px solid var(--rule-soft);padding-top:var(--s2)}
}

/* Warunki wspolpracy jako stopka modulu uruchomienia: jeden blok zamiast widgetu
   i luznej prozy pod nim. */
.uru-stopka{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2) var(--s4);
  margin:var(--s3) 0 0;padding-top:var(--s3);border-top:1px solid var(--rule)}
.uru-war{min-width:0}
.uru-war-h{margin:0 0 .3rem;font-size:1rem;font-weight:600;line-height:1.3;max-width:none}
.uru-war-t{margin:0;font-size:.93rem;line-height:1.55;color:var(--quiet);max-width:44ch}
@media(max-width:48rem){.uru-stopka{grid-template-columns:1fr;gap:var(--s2)}}

/* ── Jak dziala gabinet: os wizyty nad siatka zakresu ────────────────────────
   Bylo: cztery puste pudelka z numerami 1-4, a pod nimi trzy kafle z plakietkami
   01-03. Dwie numeracje jedna nad druga czytaly sie jak jedna, rozjechana, a pudelka
   byly rama bez tresci. Teraz jedna os z tickami (bo wizyta MA kolejnosc) i trzy
   kolumny bez numerow (bo te trzy rzeczy sa rownolegle). Wszystkie odstepy z --s. */

.wz{margin:var(--s5) 0 0}
.wz-h{display:flex;align-items:center;gap:var(--s2);margin:0 0 var(--s3);max-width:none}
.wz-0{font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:var(--quiet)}
.wz-czas{font-family:var(--mono);font-size:.8rem;font-weight:600;letter-spacing:.02em;
  color:var(--teal-deep);background:var(--teal-soft);padding:.2rem .62rem;border-radius:999px}
.wz-pasek{list-style:none;margin:0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(var(--wz-n,4),1fr)}
/* Os konczy sie na ostatnim ticku. Linia biegnaca dalej obiecuje piaty etap. */
.wz-pasek::before{content:"";position:absolute;left:.22rem;top:.22rem;height:1px;
  right:calc(100% / var(--wz-n, 4) - .22rem);background:var(--rule)}
.wz-seg{position:relative;padding:var(--s3) var(--s3) 0 0}
.wz-seg::before{content:"";position:absolute;left:0;top:0;width:.45rem;height:.45rem;
  border-radius:50%;background:var(--teal);box-shadow:0 0 0 .28rem var(--paper-2)}
.wz-f{font-size:.95rem;line-height:1.35;color:var(--ink);display:block;max-width:20ch}

.zakres{list-style:none;margin:var(--s5) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.zk{min-width:0;padding-top:var(--s2);border-top:1px solid var(--rule)}
.zk-h{margin:0 0 .25rem;font-size:1.06rem;line-height:1.3;font-weight:600}
.zk-pod{margin:0 0 var(--s2);color:var(--quiet);font-size:.93rem;line-height:1.5;max-width:32ch}
.zk-lista{list-style:none;margin:0;padding:0}
.zk-lista li{position:relative;padding:.2rem 0 .2rem .85rem;font-size:.95rem;line-height:1.5;
  max-width:36ch}
.zk-lista li::before{content:"";position:absolute;left:0;top:.8rem;width:.3rem;height:.3rem;
  border-radius:50%;background:var(--teal)}

@media(max-width:62rem){
  .wz-pasek{grid-template-columns:1fr 1fr;gap:0 var(--s3)}
  .wz-pasek::before{display:none}
  .wz-seg{padding:var(--s2) 0 var(--s2) var(--s3)}
  .wz-seg::before{left:0;top:calc(var(--s2) + .32rem)}
  .wz-f{max-width:none}
  .zakres{grid-template-columns:1fr;gap:var(--s3);margin-top:var(--s4)}
}

/* ── Uruchomienie: ciemny panel w jezyku formularza ──────────────────────────
   Ten sam material co blok kontaktowy na dole strony: tlo --ink, plaszczyzna
   rgba(255,255,255,.06), numer mono w limonce, etykieta wersalikami. Widget ma
   byc rozpoznawalny jako ten sam przedmiot co formularz, nie jako kolejny
   akapit na papierze (uwaga 11.09). */
.uru{--uru-linia:rgba(255,255,255,.13);
  margin:var(--s4) 0 0;background:var(--ink);color:#fff;border-radius:var(--r-lg);
  padding:var(--s4);box-shadow:0 24px 58px rgba(15,70,98,.14)}

.uru-track{list-style:none;margin:0;padding:0;position:relative;display:grid;
  grid-template-columns:repeat(var(--uru-n,4),1fr);gap:0 var(--s3)}
.uru-krok{position:relative;padding:2.15rem 0 0 2.1rem}
.uru-krok::after{content:"";position:absolute;top:.75rem;height:1px;left:2.05rem;
  right:calc(-1 * var(--s3) + .5rem);background:var(--uru-linia)}
.uru-track>.uru-krok:last-child::after{content:none}
.uru-n{position:absolute;left:0;top:2.15rem;font-family:var(--mono);font-size:.74rem;
  font-variant-numeric:tabular-nums;color:var(--lime)}
.uru-t{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.62);line-height:1.45;max-width:18ch}
.uru-meta{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.3rem var(--s2);margin:var(--s3) 0 0;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.42);max-width:none}

.uru-tab{display:grid;grid-template-columns:repeat(var(--uru-n,4),1fr);
  gap:0 var(--s3);align-items:start;margin:var(--s2) 0 0}
.uru-row-h{grid-column:1 / -1;margin:var(--s2) 0 var(--s1);padding-top:var(--s2);
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.5);max-width:none;border-top:1px solid var(--uru-linia)}
.uru-pole{padding:0 0 var(--s1);min-width:0}
.uru-lista{list-style:none;margin:0;padding:0}
.uru-lista li{position:relative;padding:.18rem 0 .18rem .85rem;font-size:.92rem;
  line-height:1.5;color:rgba(255,255,255,.88)}
.uru-lista li::before{content:"";position:absolute;left:0;top:.74rem;width:.28rem;height:.28rem;
  border-radius:50%;background:var(--teal)}
.uru-pole-wy .uru-lista li::before{background:var(--lime)}
.uru-pusto{color:rgba(255,255,255,.5)}
.uru-pole-wy .uru-pusto::before{background:rgba(255,255,255,.28)}
.uru-pole-krok{display:none;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--lime);margin-bottom:.42rem}

.uru-stopka{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2) var(--s4);
  margin:var(--s3) 0 0;padding-top:var(--s3);border-top:1px solid var(--uru-linia)}
.uru-war{min-width:0}
.uru-war-h{margin:0 0 .3rem;font-size:.98rem;font-weight:600;line-height:1.3;max-width:none;color:#fff}
.uru-war-t{margin:0;font-size:.9rem;line-height:1.55;color:rgba(255,255,255,.62);max-width:44ch}

@media(max-width:74rem){.uru{padding:var(--s4)}.uru-track,.uru-tab{gap:0 var(--s2)}}
@media(max-width:48rem){
  .uru{padding:var(--s3);border-radius:var(--r)}
  .uru-track{display:none}
  .uru-tab{grid-template-columns:1fr}
  .uru-meta{margin-top:0}
  .uru-pole-krok{display:block}
  .uru-pole{padding:0 0 var(--s3)}
  .uru-stopka{grid-template-columns:1fr;gap:var(--s2)}
}

/* CTA w stopce ciemnego panelu: ten sam limonkowy przycisk co w formularzu. */
.uru-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin:var(--s2) 0 0;
  padding-top:var(--s3);border-top:1px solid var(--uru-linia);max-width:none}
.uru .btn{background:var(--lime);color:var(--ink)}
.uru .btn:hover{background:#fff;color:var(--ink)}
.uru-cta-t{font-size:.9rem;color:rgba(255,255,255,.62);max-width:36ch;line-height:1.45}
/* Jak dziala gabinet: kadr gabinetu obok tresci. Strona o obecnosci fizycznej
   miala dwa bloki 'jak to dziala' bez jednego zdjecia. Zloty podzial 61,8/38,2. */
.gab-head{display:grid;grid-template-columns:minmax(0,61.8fr) minmax(0,38.2fr);gap:var(--s5);align-items:stretch}
.gab-head>*{min-width:0}
.gab-head .sec-lede{margin-bottom:0}
.gab-img{border-radius:var(--r-lg);overflow:hidden;min-height:100%;max-width:100%;aspect-ratio:16/10}
.gab-img picture,.gab-img img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:62rem){.gab-head{grid-template-columns:1fr;gap:var(--s3)}.gab-img{aspect-ratio:3/2;min-height:0}}
/* Wiersze FAQ i warstwy medycznej odpowiadaja na najechanie tak samo jak reszta strony. */
.faq-item summary{transition:color var(--t) var(--ease)}
.faq-item summary:hover{color:var(--teal-deep)}
.med-w{transition:transform var(--t2) var(--ease)}
.med-w:hover{transform:translateX(3px)}

/* Ikona kroku nad numerem: 1.5rem, teal na ciemnym, akcent limonkowy z arkusza ikon. */
.uru-ico{position:absolute;left:0;top:0;width:1.5rem;height:1.5rem;color:var(--teal)}

/* Przebieg na /jak-to-dziala/: opis w komorce tabeli toru i chip czasu w limonce. */
.uru-opis{margin:0;font-size:.93rem;line-height:1.5;color:rgba(255,255,255,.88);max-width:30ch}
.uru-czas{display:inline-block;font-family:var(--mono);font-size:.78rem;font-weight:600;color:var(--ink);
  background:var(--lime);padding:.22rem .62rem;border-radius:999px}
.uru-pole-wy .uru-opis{color:rgba(255,255,255,.72)}
/* ── /budynek: makieta w kwadracie, obok ciemny box z zakladkami na gorze i licznikiem ──
   Zloty podzial 61,8/38,2; kwadrat sceny dyktuje wysokosc obu (uwaga 11.09). */
/* start, nie stretch: przy stretch kwadrat sceny rosl do wysokosci panelu i wychodzil
   poza kolumne. Panel dostaje wysokosc sceny z JS i przewija sie w srodku. */
.bud-grid{display:grid;grid-template-columns:61.8fr 38.2fr;gap:var(--s4);align-items:start}
/* Scena plynie ze scrollem, panel po prawej rosnie swobodnie przy rozwijaniu uslug:
   makieta zostaje w kadrze, gdy czytasz oferte (uwaga 11.09). */
.bud-scena{position:sticky;top:var(--kotwica);aspect-ratio:1/1;pointer-events:none}
.bud-canvas{position:absolute;inset:0;cursor:grab;touch-action:none}
.bud-canvas canvas{display:block;width:100%!important;height:100%!important}
/* Caly blok ciemny na pelna szerokosc, scena bez pudelka: makieta stoi wprost na tle sekcji,
   panel to jasniejsza plaszczyzna jak w formularzu (uwaga 11.09). */
/* Canvas rozpiety na cala sekcje, wiec makieta nie ma krawedzi, o ktora moglaby sie uciac;
   lewa kolumna siatki to tylko rozporka wysokosci, panel lezy nad scena po prawej. */
/* Naglowek wyzej: gorny odstep sekcji schodzi z --s6 na --s4 (nadal krok skali). */
/* makieta 3D w ramce na home: jasne tło makiety, wysokość pod pełny kadr, na telefonie prawie cały ekran */
.post-tagi{margin:var(--s4) 0 0;font-size:.9375rem;color:var(--ink-2,#5a6470)}
.post-tagi a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
.mak-ramka{position:relative;height:clamp(560px,82vh,880px);border-radius:var(--r-lg);overflow:hidden;background:#F3EEE4;box-shadow:0 30px 60px -36px rgba(15,70,98,.45)}
.mak-ramka iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media(max-width:44rem){.mak-ramka{height:86svh;margin-inline:calc(clamp(1rem,4vw,2rem) * -1);border-radius:0}}
.sec.bud{padding-top:var(--s4);position:relative;background:radial-gradient(120% 90% at 40% 20%,#1F4245 0%,#0F4662 60%,#0D1F21 100%);color:#fff;border-bottom:0;overflow:hidden}
.sec.bud>.bud-canvas{position:absolute;inset:0;cursor:grab;touch-action:none}
.bud-grid{position:relative;z-index:1;pointer-events:none}
.bud-panel{pointer-events:auto}
/* Panel lezy nad scena, wiec jest prawie kryjacy z rozmyciem tla: tekst czytelny, makieta
   przeswituje tylko na tyle, zeby bylo wiadomo, ze jest pod spodem. */
.bud-panel{background:rgba(15,70,98,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;border-radius:var(--r-lg);padding:var(--s3) var(--s4) var(--s4);display:flex;flex-direction:column;box-sizing:border-box;box-shadow:0 24px 58px rgba(0,0,0,.28)}
.bud-taby{display:flex;flex-wrap:wrap;gap:.4rem;padding-bottom:var(--s3);border-bottom:1px solid rgba(255,255,255,.13)}
.bud-tab{font:inherit;font-size:.82rem;padding:.45rem .85rem;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:transparent;color:rgba(255,255,255,.82);cursor:pointer;transition:background var(--t) ease,color var(--t) ease,border-color var(--t) ease}
.bud-tab:hover{border-color:rgba(255,255,255,.5);color:#fff}
.bud-tab[aria-selected="true"]{background:var(--lime);border-color:var(--lime);color:var(--ink)}
/* Licznik: port z landingu Zdrofit (grid 3, kreski, tabular-nums), w kolorach tego panelu. */
.bud-licznik{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:var(--s3) 0 0}
.bud-licznik:empty{display:none}
.bud-licznik div{position:relative;text-align:center;padding:.4rem .2rem .5rem}
.bud-licznik div+div::before{content:"";position:absolute;left:0;top:.6rem;bottom:.6rem;width:1px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.22) 30%,rgba(255,255,255,.22) 70%,rgba(255,255,255,0))}
.bud-licznik b{display:block;font-size:2.1rem;line-height:1;font-weight:300;letter-spacing:-.03em;color:var(--lime);font-variant-numeric:tabular-nums}
.bud-licznik span{display:block;margin-top:.4rem;font-size:.7rem;line-height:1.25;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.bud-kicker{margin:var(--s3) 0 .4rem;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--lime)}
.bud-h{margin:0 0 .5rem;color:#fff;font-size:1.3rem;line-height:1.2}
.bud-lede{margin:0 0 var(--s2);color:rgba(255,255,255,.72);max-width:none;font-size:.93rem}
.bud-lista{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.bud-us{display:grid;gap:.15rem;width:100%;text-align:left;font:inherit;padding:.6rem .85rem;border-radius:.7rem;border:0;background:rgba(255,255,255,.06);color:#fff;cursor:pointer;transition:background var(--t) ease}
.bud-us:hover,.bud-us[aria-expanded="true"]{background:rgba(255,255,255,.13)}
.bud-us strong{font-size:.95rem}
.bud-us-w{padding:.5rem .85rem .7rem;font-size:.86rem;line-height:1.5;color:rgba(255,255,255,.82)}
.bud-us-w p{margin:0 0 .4rem;max-width:none}
.bud-us-w ul{margin:0 0 .5rem;padding-left:1rem}
.bud-us-w li{margin:.1rem 0}
.bud-us-link{color:var(--lime);font-size:.84rem;text-decoration:none}
.bud-us-link:hover{text-decoration:underline}
.bud-lista span{font-size:.84rem;color:rgba(255,255,255,.62)}
.bud-cta{margin:auto 0 0;padding-top:var(--s3)}
.bud .btn-primary{background:var(--lime);background-image:none;color:var(--ink)}
.bud .btn-primary:hover{background:#fff;color:var(--ink)}
.bud-link{display:inline-flex}
/* Na waskim ekranie canvas zajmuje tylko gorny pas sekcji (rozporka 62vh + padding), panel
   idzie pod nim na wlasnym tle, nie na makiecie. */
@media(max-width:64rem){.bud-grid{grid-template-columns:1fr}.bud-scena{position:relative;top:auto;aspect-ratio:auto;height:62vh}.sec.bud>.bud-canvas{position:absolute;top:0;left:0;right:0;bottom:auto;height:calc(62vh + var(--s6))}.bud-panel{background:rgba(15,70,98,.96)}.bud-dymek{display:none}}
.bud-dymek{position:absolute;z-index:3;pointer-events:none;max-width:19rem;padding:.6rem .8rem;border-radius:.7rem;background:var(--ink);color:#fff;box-shadow:0 10px 28px rgba(15,70,98,.22)}
.bud-dymek-t{margin:0 0 .15rem;font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;color:var(--lime);max-width:none}
.bud-dymek-o{margin:0;font-size:.86rem;line-height:1.45;color:rgba(255,255,255,.9);max-width:none}
/* Licznik na telefonie: trzy kolumny zostaja, ale cyfry i etykiety schodza o stopien,
   zeby 'DNI URLOPU PRACOWNIKA' nie wychodzilo poza panel (podglad GPU 11.09). */
@media(max-width:34rem){.bud-licznik b{font-size:1.5rem}.bud-licznik span{font-size:.58rem;letter-spacing:.06em}.bud-tab{font-size:.78rem;padding:.4rem .7rem}}
/* Na waskim ekranie kapsula nagłówka wedruje nad ciemna scene 3D na /budynek/ i przy .56
   krycia hamburger ginal w tle. Wiecej krycia i rozmycia, jak w wariancie .stuck na desktopie. */
@media(max-width:48rem){
  .head-row{background:rgba(251,249,244,.92)}
  @supports (backdrop-filter:blur(1px)){.head-row,.site-head.stuck .head-row{background:rgba(251,249,244,.84);backdrop-filter:blur(28px) saturate(1.8) brightness(1.04)}}
}
/* Naglowek /budynek/ na ciemnym polu, nad makieta: strona zaczyna sie od sceny, bez jasnego page-head. */
.bud-naglowek{position:relative;z-index:1;pointer-events:none;margin-bottom:var(--s3)}
.bud-naglowek h1{margin:0 0 .5rem;color:#fff;font-size:var(--fs-h1);line-height:1.08;letter-spacing:-.03em;max-width:16ch}
.bud-lede-top{margin:0;color:rgba(255,255,255,.72);font-size:1.02rem;max-width:44ch}

/* Fizjostacja: trzy produkty na dividerach, wyrozniony na piasku */
.prod3{align-items:start}
.prod{padding:1.2rem 0 0;border-top:1px solid var(--rule)}
.prod h3{margin-bottom:.4rem}.prod p{color:var(--quiet);margin:0 0 .5rem}
.prod-param{font-size:.88rem;color:var(--ink)}
.prod-wyroz{background:var(--sand);border-top:.5rem solid var(--lime);border-radius:var(--r-lg);padding:1.2rem 1.3rem 1rem}
.prod-wyroz .eyebrow{margin-bottom:.4rem}
@media(max-width:48rem){.three.prod3{grid-template-columns:1fr}}

/* Siec ekspertow zrosnieta ze zdjeciem w hero: zdjecie u gory, karta nachodzi na jego dol,
   jedno plotno nad oboma. Przelacznik grupy podmienia zdjecie i podswietla wezly. */
.siec-duo{position:relative;touch-action:pan-y}
.siec-duo .hero-img{overflow:hidden;border-radius:var(--r-lg);aspect-ratio:1.618/1.25}
.siec-duo .hero-img img{aspect-ratio:auto;height:100%;border-radius:0}
.siec-ph{position:absolute;inset:0;opacity:0;transition:opacity var(--t3) var(--ease)}
.siec-ph.is-on{opacity:1}
/* trzy dodatkowe zdjecia nie laduja sie z hero: display:none trzyma lazy-load do chwili .rdy */
.siec-ph:not(.is-on){display:none}.siec-duo.rdy .siec-ph{display:block}
.siec-ph picture,.siec-ph img{display:block;width:100%;height:100%;object-fit:cover}
.siec-duo .hero-img::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(to top,rgba(15,70,98,.55),rgba(15,70,98,0));pointer-events:none}
.siec{position:relative;margin:-3.6rem .9rem 0;border-radius:calc(var(--r-lg) - .5rem);background:rgba(251,249,244,.9);padding:1.1rem 1.2rem 1.1rem;box-shadow:0 24px 50px -28px rgba(15,70,98,.55)}
@supports (backdrop-filter:blur(1px)){.siec{background:rgba(251,249,244,.78);backdrop-filter:blur(18px) saturate(1.5)}}
.siec-txt{position:relative;z-index:3;display:flex;align-items:baseline;gap:.7rem;pointer-events:none}
.siec-n.num-v{font-size:clamp(2.2rem,3.2vw,2.9rem);font-weight:300;letter-spacing:-.045em;line-height:.94}
.siec-l{color:var(--quiet);font-size:.86rem;max-width:20ch;line-height:1.35}
.siec-chips{position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem}
.chip{font:inherit;font-size:.8rem;font-weight:600;letter-spacing:-.005em;color:var(--ink);background:var(--paper-2);border:0;border-radius:999px;padding:.42rem .8rem;cursor:pointer;transition:background var(--t) var(--ease),color var(--t) var(--ease),transform var(--t) var(--ease)}
.chip:hover{transform:translateY(-1px)}
.chip.is-on{background:var(--ink);color:#fff}
.chip:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.siec-info{position:relative;z-index:3;margin:.7rem 0 0;font-size:.9rem;line-height:1.5;color:var(--ink);max-width:40ch;min-height:2.8em}
@media(prefers-reduced-motion:reduce){.chip,.siec-ph{transition:none}}
@media(max-width:48rem){.siec{margin:-3rem .7rem 0}}

/* Hero w trzech polach: tekst, logotypy pod nim (w dziurze po lewej), zdjecie z karta po prawej na obie wysokosci */
.hero-grid{grid-template-rows:auto 1fr}
.hero-grid>.hero-copy{grid-column:1;grid-row:1}
.hero-grid>.hero-logos{grid-column:1;grid-row:2;align-self:end;min-width:0}
.hero-grid>.hero-side{grid-column:2;grid-row:1/3}
.hero-logos .logos-h{margin:0}
.hero-logos .logo-pas{grid-template-columns:repeat(4,1fr);margin-top:var(--s2);gap:var(--s2) var(--s3)}
@media(max-width:48rem){.hero-grid>.hero-copy,.hero-grid>.hero-logos,.hero-grid>.hero-side{grid-column:1;grid-row:auto}.hero-grid>.hero-side{order:2}.hero-grid>.hero-logos{order:3;margin-top:var(--s3)}}
.hero-grid>.hero-side,.hero-grid>.hero-copy{min-width:0}.siec-duo .hero-img{width:100%}
/* Logotypy pod hero na cala szerokosc: jeden rzad siedmiu znakow pod tekstem i karta */
.hero-grid{grid-template-rows:auto auto}
.hero-grid>.hero-side{grid-row:1}
.hero-grid>.hero-logos{grid-column:1/-1;grid-row:2;align-self:start;margin-top:var(--s3)}
.hero-logos .logo-pas{grid-template-columns:repeat(7,1fr);gap:var(--s2) var(--s3)}
@media(max-width:64rem){.hero-logos .logo-pas{grid-template-columns:repeat(4,1fr)}}
@media(max-width:48rem){.hero-grid>.hero-logos{grid-column:1;grid-row:auto}}
/* cien karty nie moze byc ciety przez overflow hero */
.hero{padding-bottom:var(--s4)}
@media(min-width:48.01rem){.hero-grid>.hero-copy{align-self:center}}
.hero-logos .logos-h{text-align:center;font-size:.68rem;letter-spacing:.14em;color:var(--quiet)}
/* przypis nad logotypami: na srodku calego rzedu, nie w waskim akapicie */
.hero-logos .logos-h{max-width:none;width:100%;margin:0 0 .2rem;font-size:.66rem}
/* karta wyzej na zdjeciu, logotypy nad zgieciem */
@media(min-width:48.01rem){
  .siec{margin-top:-8.6rem}
  .hero-grid>.hero-logos{margin-top:var(--s2)}
  .hero{padding-bottom:var(--s3)}
  .hero-grid{padding-bottom:0}
}

/* Karta 400+: nizsza i rowna. Liczba i opis w jednej osi (srodek), opis w jednej linii, przelaczniki w jednym rzedzie */
.siec{padding:.85rem 1.1rem .9rem}
.siec-txt{align-items:center;gap:.65rem}
.siec-n.num-v{font-size:clamp(1.9rem,2.6vw,2.35rem);line-height:1;letter-spacing:-.04em}
.siec-l{max-width:none;font-size:.84rem;line-height:1.3}
.siec-chips{margin-top:.65rem;gap:.35rem;flex-wrap:nowrap}
.siec-chips .chip{font-size:.76rem;padding:.38rem .7rem;white-space:nowrap}
.siec-info{margin-top:.55rem;font-size:.86rem;line-height:1.45;min-height:2.5em;max-width:none}
@media(min-width:48.01rem){.siec{margin-top:-6.4rem}}
@media(max-width:26rem){.siec-chips{flex-wrap:wrap}}
@media(min-width:48.01rem){.hero-grid{grid-template-columns:minmax(0,61.8fr) minmax(0,38.2fr)}}
.siec{min-width:0}.siec-chips{flex-wrap:wrap;gap:.3rem}.siec-chips .chip{font-size:.74rem;padding:.36rem .62rem}

@media(max-width:48rem){.br-desk{display:none}}

/* Panel Wiedzy: tematy w jednej linii kazdy (kolumny na szerokosc tresci), najnowsze dwa wpisy, tytul najwyzej w dwoch liniach */
@media(min-width:64.01rem){
  #drop-wiedza .mega-grid{grid-template-columns:max-content max-content minmax(0,1fr);gap:2.6rem}
  #drop-wiedza .mega-col:nth-child(-n+2) .mega-list a{white-space:nowrap}
  #drop-wiedza .mega-col:nth-child(3) .mega-list a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4;padding-right:1.4rem}
  #drop-wiedza .mega-col:nth-child(3) .mega-list li+li{margin-top:.5rem}
  #drop-wiedza .mega-col:nth-child(3) .ml-go{display:none}
}
/* Belka gorna: czytelnosc. Grubszy kroj, pelna biel, stopien z 8,7 na 10,6 px */
.topbar{font-size:.66rem;font-weight:600;letter-spacing:.015em;color:#fff}
.tb-l{color:rgba(255,255,255,.92)}
.tb-r a{color:#fff;font-weight:600}

/* Kompozycja home: sieroty w lede, hierarchia naglowkow, kadr gabinetu, rytm */
.sec-lede,.lede,.page-head .lede{text-wrap:pretty}
.sec-head+.sec-lede,.sec-lede{max-width:58ch}
.statement-h{font-size:clamp(1.8rem,3vw,2.6rem)}
.gab-img img{object-position:62% 72%}
.med-lewa h2{margin:0 0 var(--s3)}
.med{align-items:center}

/* Lista badan na podstronie: ten sam wiersz z ikona co na home, trzy kolumny na pelnej szerokosci */
.med-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--s3)}
@media(max-width:64rem){.med-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:40rem){.med-grid-3{grid-template-columns:1fr}}
.med-grid-3>.med-w:nth-child(3){border-top:0;padding-top:0}
.med-grid-3>.med-w:nth-child(3) .med-ico{top:.05rem}
@media(max-width:64rem){.med-grid-3>.med-w:nth-child(3){border-top:1px solid var(--rule-soft);padding-top:var(--s2)}}

/* Badania: stary uklad wierszy z duza ikona przed nazwa */
.row-ikona{grid-template-columns:minmax(0,38.2fr) minmax(0,61.8fr);align-items:start}
.row-ikona .row-name{display:flex;align-items:center;gap:1rem;min-height:2.6rem}
.row-ikona .row-text{padding-top:.47rem}
.row-ico{width:2.6rem;height:2.6rem;vertical-align:0;stroke-width:1.4}
@media(max-width:48rem){.row-ikona{grid-template-columns:1fr;gap:.5rem}.row-ico{width:2.2rem;height:2.2rem}.row-ikona .row-text{padding-top:0}.row-ikona .row-name{min-height:0}}
.row.plain.row-ikona{grid-template-columns:minmax(0,38.2fr) minmax(0,61.8fr);align-items:start}
@media(max-width:48rem){.row.plain.row-ikona{grid-template-columns:1fr;gap:.5rem}}

/* ── Kokpit: lekki HUD na home ──────────────────────────────
   Trzy elementy, kazdy pokazuje prawdziwy stan, zaden nie jest dekoracja:
   wskaznik przebiegu wizyty, szyna nad karta ekspertow, klawisze CTA.
   Ruch powsciagliwy, wszystko gasnie przy prefers-reduced-motion. */

/* Wskaznik wizyty: os wypelnia sie turkusem, ticki zapalaja sie po kolei.
   Stan prawdziwy: cztery fazy skladaja sie na 30 minut. */
.wz-pasek::after{content:"";position:absolute;left:.22rem;top:.22rem;height:1px;
  right:calc(100% / var(--wz-n,4) - .22rem);background:var(--teal);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.15s var(--ease-io) .12s}
.rv.in .wz-pasek::after{transform:scaleX(1)}
.wz-seg::before{background:var(--rule);transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.rv.in .wz-seg::before{background:var(--teal)}
.rv.in .wz-seg:nth-child(2)::before{transition-delay:.34s}
.rv.in .wz-seg:nth-child(3)::before{transition-delay:.62s}
.rv.in .wz-seg:nth-child(4)::before{transition-delay:.9s}
.wz-czas{font-variant-numeric:tabular-nums}

/* Szyna nad karta ekspertow: krawedz wyswietlacza, nie ramka karty. */
.siec::before{content:"";position:absolute;left:1.1rem;right:1.1rem;top:0;height:2px;
  border-radius:2px;background:linear-gradient(90deg,var(--teal),rgba(84,189,194,0));
  transform:scaleX(0);transform-origin:left center;transition:transform .9s var(--ease-io) .25s}
.siec.rdy::before,.hero .siec::before{transform:scaleX(1)}

/* CTA jak podswietlany klawisz: stan wciśniecia zamiast cienia pod spodem. */
.btn{transition:transform var(--t0) var(--ease),background var(--t) var(--ease),color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.btn-primary:hover{box-shadow:0 6px 18px -8px rgba(196,70,18,.55)}
.btn:active{transform:translateY(1px)}

@media(prefers-reduced-motion:reduce){
  .wz-pasek::after,.siec::before{transform:scaleX(1);transition:none}
  .wz-seg::before,.btn{transition:none}
}

/* ── Kokpit, druga warstwa: sterowniki ─────────────────────
   Przelacznik trybu z przejezdzajacym wskaznikiem, swiatlo otoczenia w panelu
   i kafle, ktore reaguja jak ekran dotykowy. Nic nie miga, nic nie pulsuje. */

/* Przelacznik grup jak wybor trybu jazdy: podklad przejezdza pod aktywna pozycja,
   zamiast przeskakiwac kolorem. Wspolrzedne liczy siec.js z realnego ukladu. */
.siec-chips{position:relative}
.siec-chips::before{content:"";position:absolute;left:0;top:0;height:var(--chip-h,0);width:var(--chip-w,0);
  transform:translate3d(var(--chip-x,0),var(--chip-y,0),0);
  background:var(--ink);border-radius:999px;pointer-events:none;
  opacity:0;transition:transform .42s var(--ease),width .42s var(--ease),opacity .2s var(--ease)}
.siec-chips.gotowy::before{opacity:1}
.siec-chips.gotowy .chip.is-on{background:transparent}
.chip{position:relative;z-index:1}
.chip.is-on{color:#fff}

/* Swiatlo otoczenia w ciemnym panelu: cieplejsza gora, jak podswietlona deska. */
.uru{position:relative;overflow:hidden;isolation:isolate}
.uru::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 78% at 50% -14%,rgba(84,189,194,.20),rgba(84,189,194,0) 62%)}

/* Kafle swiatow jak pola na ekranie centralnym: obraz oddycha pod palcem. */
.real-card{overflow:hidden}
.real-card img{transition:transform .5s var(--ease)}
.real-card:hover img{transform:scale(1.025)}

@media(prefers-reduced-motion:reduce){
  .siec-chips::before,.real-card img{transition:none}
  .real-card:hover img{transform:none}
}

/* ── Rysowany przekrój: ten sam gabinet w biurze i w hali (comp:rysowane-diagramy) ──
   Faza 1: kreska rysuje się postępem przewijania (--p z js/dd.js, wygładzone sprężyną).
   Faza 2: impuls biegnie po podłodze i zapala oba gabinety. Bez vector-effect:
   non-scaling-stroke, bo w Chromium psuje normalizację pathLength. */
.pas-dd{padding:var(--s5) 0;border-bottom:1px solid var(--rule-soft)}
.dd{max-width:82rem;margin:0 auto;padding:0 var(--s3);color:var(--ink)}
.dd-svg{display:block;width:100%;height:auto;overflow:visible}
.dd-grid circle{fill:currentColor;stroke:none;opacity:.14}
.dd-el{stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;fill:none;opacity:.42;
  stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0, (var(--p,0) - var(--i,0) * 0.055) * 2, 1))}
.dd-el.accent{stroke:var(--teal);opacity:1;stroke-width:2}
.dd-lab{fill:currentColor;opacity:calc(clamp(0, (var(--p,0) - .55) * 2.6, 1) * .55);
  font-family:var(--mono);font-size:15px;letter-spacing:.08em;text-transform:uppercase;text-anchor:middle}
.dd-lab-a{fill:var(--teal-ink);opacity:calc(clamp(0, (var(--p,0) - .72) * 3, 1) * .9);font-size:13px}
.dd-pulses{opacity:0;transition:opacity 600ms ease}
.dd.is-live .dd-pulses{opacity:1}
.dd-pulses .pulse{stroke:var(--teal);stroke-width:3;stroke-linecap:round;fill:none;opacity:0;
  stroke-dasharray:var(--len,.03) 2;stroke-dashoffset:var(--len,.03)}
.dd.in-view .dd-pulses .pulse{animation:dd-pulse var(--t,7s) cubic-bezier(.4,.1,.3,1) var(--d,0s) infinite both}
.dd .dd-figure .flash{opacity:0}
.dd.is-live.in-view .dd-figure .flash{animation:dd-flash var(--t,7s) ease-out var(--d,0s) infinite both}
@keyframes dd-pulse{
  0%{stroke-dashoffset:var(--len,.03);opacity:0}
  5%{opacity:.95} 38%{opacity:.95}
  46%{stroke-dashoffset:-1;opacity:0} 100%{stroke-dashoffset:-1;opacity:0}}
@keyframes dd-flash{
  0%{opacity:0} 4%{opacity:.55} 20%{opacity:0} 100%{opacity:0}}
@media(max-width:48rem){.pas-dd{padding:var(--s4) 0}.dd-lab{font-size:20px}.dd-lab-a{font-size:18px}}
@media(prefers-reduced-motion:reduce){
  .dd-el{stroke-dashoffset:0}
  .dd-lab,.dd-lab-a{opacity:.55}
  .dd-pulses{display:none}}

/* Pas z przekrojem dwóch światów: ilustracja pojęciowa pod kaflami segmentów. */
.pas-il{padding:var(--s4) 0 var(--s5);border-bottom:1px solid var(--rule-soft)}
.pas-il-in{max-width:82rem;margin:0 auto;padding:0 var(--s3)}
.pas-il-in img{display:block;width:100%;height:auto}
@media(max-width:48rem){.pas-il{padding:var(--s3) 0 var(--s4)}}
/* Stan disabled przycisków: wysyłka formularza blokuje przycisk, więc musi to być widać (N10). */
.btn:disabled,.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn:disabled:hover,.btn[disabled]:hover{transform:none;box-shadow:none}

/* Odsylacz pod skrocona karta uruchomienia na home: szczegoly (czego potrzebujemy
   od Was) stoja przy usludze, karta na home pokazuje sam tor (uwaga 21.09). */
.uru-po{margin:var(--s2) 0 0}

/* Odnosniki do uslug pod lista "Co dla nich mamy": strona grupy ma prowadzic dalej,
   a nie konczyc sie opisem (CW-02, wlasciciel 21.09). */
.grupa-uslugi{margin:var(--s2) 0 0;font-size:.9rem;color:var(--quiet)}
.grupa-uslugi a{color:var(--ink)}

/* Dwie usługi stałe na /oferta/: równorzędne karty, jedna geometria, bez hierarchii
   "główna i dodatki" (CW_3 §3, 22.09). Zero ramek — plama tła robi krawędź. */
.stala{min-width:0}
.stale{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:var(--s3);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.stala-link{display:grid;gap:0;text-decoration:none;color:var(--ink);
  background:var(--teal-soft);border-radius:var(--r-lg);overflow:hidden;height:100%}
.stala-img{display:block;aspect-ratio:16/10;overflow:hidden}
.stala-img img{width:100%;height:100%;object-fit:cover;display:block}
.stala-tresc{display:grid;gap:.35rem;padding:var(--s3)}
.stala-h{font-size:1.3rem;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.stala-t{color:var(--quiet);font-size:.95rem;line-height:1.55}
.stala-go{margin-top:.3rem;color:var(--teal-ink);font-weight:500}
.stala-link:hover .stala-h{color:var(--teal-ink)}

/* Dopisek w nagłówku sekcji: wyjaśnia zasadę, nie prowadzi nigdzie. */
.sec-note{color:var(--quiet);font-size:.9rem;max-width:34ch;line-height:1.5}

/* ── Wydarzenia: przykładowe zastosowania i dziesięć stref (CW_3 §6) ──
   Strefy to nie kafelki obok siebie, tylko rząd: zdjęcie i treść w proporcji
   złotego podziału, bez ramek. Każda strefa ma własną kotwicę. */
.zast-grid{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:var(--s3);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.zast{min-width:0;background:var(--teal-soft);border-radius:var(--r-lg);padding:var(--s3)}
.zast h3{margin:0 0 .3rem;font-size:1.05rem;line-height:1.3}
.zast p{margin:0;color:var(--quiet);font-size:.93rem;line-height:1.55}

.strefy{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;gap:var(--s4)}
.strefa{display:grid;grid-template-columns:minmax(0,38.2fr) minmax(0,61.8fr);
  gap:var(--s3) var(--s4);align-items:start;scroll-margin-top:6rem}
.strefa-img{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3}
.strefa-img img{width:100%;height:100%;object-fit:cover;display:block}
.strefa-tresc{min-width:0}
.strefa-tresc h3{display:flex;align-items:center;gap:.5rem;margin:0 0 .4rem;font-size:1.25rem;letter-spacing:-.01em}
.strefa-ico{width:1.5rem;height:1.5rem;color:var(--teal-ink);flex:none}
.strefa-opis{margin:0 0 var(--s2);color:var(--quiet);max-width:58ch;line-height:1.6}
.strefa-pasuje{margin:var(--s2) 0 .2rem;font-size:.9rem;color:var(--quiet)}
.strefa-pasuje span{color:var(--ink);font-weight:600}
@media(max-width:52rem){.strefa{grid-template-columns:1fr}}

/* Kategorie tematyczne webinarów (CW_3 §7): siedem bloków, lista przykładów
   pod każdym, komunikat o doborze eksperta pod spodem. */
.wkaty{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:var(--s3);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.wkat{min-width:0}
.wkat h3{display:flex;align-items:center;gap:.5rem;margin:0 0 .4rem;font-size:1.05rem;line-height:1.3}
.wkat-ico{width:1.35rem;height:1.35rem;color:var(--teal-ink);flex:none}
.wkat-info{margin:var(--s3) 0 0;max-width:72ch;color:var(--quiet);line-height:1.6}

/* Pięć wariantów fizjoterapii i ergonomii (CW_3 §5): osobne usługi, nie kroki procesu. */
.warianty{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:var(--s3);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.wariant{min-width:0}
.wariant h3{margin:0 0 .3rem;font-size:1.05rem;line-height:1.3}
.wariant p{margin:0;color:var(--quiet);font-size:.93rem;line-height:1.55}
.wariant-param{margin:.4rem 0 .2rem;font-family:var(--mono);font-size:.8rem;color:var(--teal-ink)}
.two-h{grid-column:1 / -1;margin:0}

/* Galeria z wydarzeń w hero podstrony eventów (CW_3 §6: autentyczne kadry,
   zero stocku i AI). Kadry pochodzą z galerii opublikowanej przez klienta. */
.gal-ev{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:var(--s2);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.gal-ev li{margin:0;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3}
.gal-ev img{width:100%;height:100%;object-fit:cover;display:block}

/* Makieta 3D jako nawigacja "Dla kogo" na stronie glownej (CW_3 §12, §14). Na telefonie CW_3
   kaze pokazac prosta liste albo kafelki: zostaja karty, makieta sie nie laduje (display:none
   nie przecina viewportu, wiec three.js nie jest pobierane). */
.sec.bud.bud-home{display:none}
@media(min-width:60rem){.sec.bud.bud-home{display:block}.dk-karty{display:none}}

/* Film z realizacji pod naglowkiem wydarzen (CW_3 §6). preload=none: plik idzie dopiero po kliknieciu. */
.ev-film{margin:0 0 var(--s3)}
.ev-film video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:var(--r);background:var(--teal-deep)}
.ev-film figcaption{margin-top:.5rem;font-size:.9rem;color:var(--quiet)}
/* Nadzor merytoryczny: portret obok tekstu, na telefonie pod nim */
.two.nadzor{align-items:center}
.nadzor-foto{margin:0;justify-self:center;width:100%;max-width:26rem}
.nadzor-foto img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;object-position:50% 25%;border-radius:var(--r-lg)}
/* Formularz Betterworkplace w ramce (jak malapalarnia.pl). Wysokosc ustawia bwp.js
   z komunikatu bwp:resize; min-height trzyma miejsce, zanim ramka sie odezwie. */
.bwp-ramka{min-width:0;overflow:hidden;background:#fff;border-radius:var(--r-lg);padding:clamp(.5rem,2vw,1.25rem);box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
.bwp-form{display:block;width:100%;min-height:320px;border:0;background:transparent}