/* NextLevel & Wellbeing — homepage v4
   Kanon: Visual Guide v1.4. Biel dominuje, czern buduje konstrukcje, #1557FF jest sygnalem.
   Skala web desktop: hero 56-88px, H2 32-48px, body 18-22px, label 12-14px. */

:root{
  --white:#FFFFFF;
  --ink:#10131A;
  --ink-deep:#090B10;
  --graphite:#2B3038;
  --muted:#5F6673;
  --light:#F4F5F7;
  --pale:#EAF0FF;
  --blue:#1557FF;
  --blue-deep:#0B3ECC;
  --blue-light:#7BA4FF;
  --blad:#C0261F;            /* jedyny kolor semantyczny poza kanonem, do potwierdzenia */  /* kicker i link na ciemnym tle, kontrast 4.5:1 */

  --pad:clamp(1.25rem,5vw,6rem);
  --header-h:6.6rem;
  --ease:cubic-bezier(.22,1,.36,1);

  --fs-hero:clamp(2.6rem,5.6vw,5.5rem);   /* 42 - 88 px */
  --fs-h2:clamp(1.75rem,3.1vw,3rem);      /* 28 - 48 px */
  --fs-h3:clamp(1.15rem,1.5vw,1.5rem);
  --fs-body:clamp(1.0625rem,1.15vw,1.375rem); /* 17 - 22 px */
  --fs-small:.9375rem;
  --fs-label:clamp(.75rem,.85vw,.875rem);  /* 12 - 14 px */
}

*{box-sizing:border-box}
/* Naglowek jest przypiety, wiec bez tego kazda kotwica (#formularz, #audyt)
   ustawia gorna krawedz celu na zero i chowa ja pod naglowkiem. */
html{background:var(--ink-deep);scroll-padding-top:calc(var(--header-h) + 1rem)}
body{
  margin:0;color:var(--ink);background:var(--white);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:var(--fs-body);line-height:1.55;overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
body.menu-open{overflow:hidden}
::selection{color:var(--white);background:var(--blue)}
/* Lamanie tekstu na kazdej szerokosci: naglowki rownaja dlugosc wierszy, akapity nie
   zostawiaja jednego slowa w ostatniej linii, a dlugie slowo (neurokomunikacji) na
   waskim telefonie lamie sie zamiast wypychac strone w bok. */
h1,h2,h3,.h2{text-wrap:balance}
p,li,dd,figcaption{text-wrap:pretty}
body{overflow-wrap:break-word}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,ul{margin-top:0}
h1,h2,h3,h4{font-family:Montserrat,Inter,Arial,sans-serif;letter-spacing:-.035em;line-height:1.02;
  overflow-wrap:break-word}
p,li,dd{overflow-wrap:break-word;hyphens:manual}
:focus-visible{outline:3px solid var(--blue);outline-offset:4px}

.skip-link{
  position:fixed;top:.75rem;left:.75rem;z-index:1000;padding:.8rem 1.1rem;
  color:var(--white);background:var(--blue);font-size:.875rem;font-weight:600;
  transform:translateY(-160%);transition:transform 160ms ease-out;
}
.skip-link:focus{transform:translateY(0)}

/* ——— naglowek ——— */
.hdr{
  position:fixed;inset:0 0 auto;z-index:100;display:flex;align-items:center;
  justify-content:space-between;gap:2rem;min-height:var(--header-h);
  padding:.6rem var(--pad);color:var(--white);
  transition:background 220ms ease,color 220ms ease,box-shadow 220ms ease;
}
.hdr.is-scrolled{background:rgba(9,11,16,.94);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.08)}
.hdr.is-light{
  color:var(--ink);background:rgba(255,255,255,.94);
  box-shadow:0 1px 0 rgba(16,19,26,.1);backdrop-filter:blur(16px);
}
.hdr.menu-active{color:var(--white);background:var(--ink)}
.hdr__logo{display:flex;align-items:center;min-width:max-content}
.hdr__logo img{height:4.2rem;width:auto}
.hdr__logo .logo-na-jasnym{display:none}
.hdr.is-light .logo-na-ciemnym{display:none}
.hdr.is-light .logo-na-jasnym{display:block}

.nav{display:flex;align-items:center;gap:clamp(.7rem,1.2vw,1.6rem)}
.nav a{white-space:nowrap}
.nav a:not(.btn){
  position:relative;padding:.65rem 0;font-size:var(--fs-label);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
}
.nav a:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:.3rem;height:3px;background:var(--blue);
  transform:scaleX(0);transform-origin:right;transition:transform 160ms ease-out;
}
.nav a:not(.btn):hover::after,.nav a:not(.btn):focus-visible::after{transform:scaleX(1);transform-origin:left}
/* Przelacznik jezyka. Do wersji z jednym jezykiem generator nie wypuszcza tutaj
   ZADNEGO elementu, wiec na polskiej stronie te reguly nie maja czego dotknac;
   ozywaja w dniu, w ktorym w v4-copy/slugi.json stanie druga wersja jezykowa.
   Poprzednia regula dotyczyla znacznika <b> ze starego, ozdobnego napisu PL/DE.
   Nowy przelacznik to <nav> z odnosnikami, wiec bez tych regul jezyki skleilyby sie
   w "PLDE", bez odstepu i bez widocznego wyroznienia biezacego.
   Selektor .nav .nav__lang a ma te sama moc co .nav a:not(.btn) i stoi nizej, wiec
   wygrywa: inaczej odnosniki jezykow wzielyby na siebie caly styl pozycji menu. */
.nav__lang{display:inline-flex;align-items:center;gap:.55rem;
  font-size:var(--fs-label);font-weight:700;letter-spacing:.08em}
.nav .nav__lang a{
  padding:.65rem 0;color:inherit;text-decoration:none;text-transform:uppercase;
  opacity:.6;transition:opacity 160ms ease-out,color 160ms ease-out;
}
.nav .nav__lang a::after{content:none}          /* bez podkreslenia pozycji menu */
.nav .nav__lang a:hover,.nav .nav__lang a:focus-visible{opacity:1}
.nav .nav__lang a[aria-current="page"]{opacity:1;color:var(--blue)}
/* cienka kreska rozdzielajaca, w kolorze jezyka biezacego */
.nav .nav__lang a + a{border-left:1px solid var(--blue);padding-left:.55rem}

.btn{
  white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:3.25rem;padding:.85rem 1.4rem;border:0;border-radius:1px;
  font-size:.8125rem;font-weight:700;letter-spacing:.06em;line-height:1.2;
  text-transform:uppercase;text-align:center;cursor:pointer;
  transition:background 160ms ease-out,color 160ms ease-out,transform 160ms ease-out;
}
.btn--blue{color:var(--white);background:var(--blue)}
.btn--blue:hover{background:var(--blue-deep)}
.btn--white{color:var(--ink);background:var(--white)}
.btn--white:hover{background:var(--pale)}
.btn:hover{transform:translateY(-2px)}
.btn--sm{min-height:2.9rem;padding:.7rem 1.1rem}

.tlink{
  position:relative;display:inline-block;padding:.5rem 0 .4rem;
  color:var(--blue);font-size:1rem;font-weight:700;
}
.tlink::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:currentColor;
  transform:scaleX(.3);transform-origin:left;transition:transform 200ms var(--ease);
}
.tlink:hover::after,.tlink:focus-visible::after{transform:scaleX(1)}
.tlink--light{color:var(--white)}

.menu-toggle{display:none;align-items:center;gap:.55rem;padding:.6rem 0;border:0;
  background:none;font-size:var(--fs-label);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;cursor:pointer}
.menu-toggle i{display:block;width:1.4rem;height:4px;background:currentColor;transition:transform 160ms ease}

/* ——— wspolne ——— */
.sec{padding:clamp(5rem,9vw,9rem) var(--pad)}
.sec--wyzej{padding-top:clamp(3.5rem,6vw,6rem)}
.sec--light{background:var(--white)}
.sec--gray{background:var(--light)}
.sec--dark{color:var(--white);background:var(--ink)}
.kicker{
  margin:0 0 1.2rem;color:var(--blue);font-size:var(--fs-label);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
}
.h2{font-size:var(--fs-h2);font-weight:800;margin:0 0 1.2rem}
.h2--display{font-size:clamp(2.1rem,4.2vw,4rem);max-width:34ch}
.h2--blue{color:var(--blue)}
.lead{font-size:var(--fs-body);color:var(--graphite);max-width:58ch}
.sec--dark .lead,.ev .lead,.audit .lead,.end .lead{color:rgba(255,255,255,.74)}
.sec--dark .kicker,.ev .kicker,.audit .kicker,.end .kicker,.hero .kicker{color:var(--blue-light)}
.sec--dark .know em{color:var(--blue-light)}
.note-dim{font-size:.875rem;color:var(--muted)}
.sec--dark .note-dim{color:rgba(255,255,255,.6)}

.reveal{opacity:0;transform:translateY(1.4rem);
  transition:opacity 520ms var(--ease),transform 520ms var(--ease)}
.reveal.is-visible{opacity:1;transform:none}

/* ——— 01 otwarcie + hero ——— */
/* Scena otwarcia ma dokladnie jeden ekran. Do 6 wrzesnia 2026 miala 400svh (420svh
   na telefonie) i cala choreografia byla liczona z pozycji przewijania: naglowek stawal
   sie czytelny dopiero po okolo 1800 do 2700 px. Dzis choreografia idzie za zegarem,
   rusza po wyborze jezyka i niczego nie przytrzymuje, wiec przypiecie sceny (sticky)
   i zapas na przewijanie nie maja czego obslugiwac. Strona glowna skrocila sie o 300svh,
   a na telefonie o 320svh. Sterowanie: app.js, sekcja OTWARCIE STEROWANE CZASEM. */
/* min-height:100dvh to zapas na iPhone'a: gdy Safari chowa pasek adresu, widoczna
   wysokosc rosnie ponad 100svh i bez tego pod scena mignelaby jasna sekcja. */
.open{position:relative;height:100svh;min-height:100dvh;color:var(--white);background:var(--ink-deep)}
.open__stage{position:relative;height:100svh;overflow:hidden;isolation:isolate;background:var(--ink-deep)}
.open__media,.open__shade,.open__door,.open__burst{position:absolute;inset:0}
video.open__media{background:var(--ink-deep)}
.open__media{z-index:-5;width:100%;height:100%;object-fit:cover;object-position:56% center;
  transform:scale(1.12);will-change:transform}
.open__stage{--scrim:.42}
.open__shade{z-index:-4;background:
  linear-gradient(90deg,rgba(6,8,12,var(--scrim)) 0%,
    rgba(6,8,12,calc(var(--scrim) * .55)) 46%, rgba(6,8,12,calc(var(--scrim) * .12)) 80%),
  linear-gradient(0deg,rgba(6,8,12,calc(var(--scrim) * .8)),transparent 42%)}
.open__door{z-index:1;top:-4%;bottom:-4%;height:108%;
  background:linear-gradient(155deg,#171A21 0%,#0A0C11 72%);will-change:transform}
.open__door::before{content:"";position:absolute;inset:0;opacity:.18;
  background:linear-gradient(90deg,transparent 49.6%,rgba(255,255,255,.09) 50%,transparent 50.4%)}
.open__door--l{right:auto;width:56.5%;box-shadow:28px 0 55px rgba(0,0,0,.45);transform-origin:left center}
.open__door--r{left:auto;width:43.5%;box-shadow:-28px 0 55px rgba(0,0,0,.45);transform-origin:right center}
.open__signal{position:absolute;top:0;bottom:0;left:56.4%;z-index:2;width:6px;opacity:0;
  background:var(--blue);box-shadow:0 0 26px rgba(21,87,255,.8);transform:scaleY(.04);
  will-change:transform,opacity}
.open__burst{z-index:0;opacity:0;transform:scale(.3);will-change:transform,opacity;
  background:radial-gradient(circle at 56.5% 52%,rgba(21,87,255,.72) 0%,rgba(21,87,255,.18) 18%,transparent 47%)}

.mark,.msg,.hero,.cue{position:absolute;z-index:3}
.mark{top:50%;left:50%;display:grid;justify-items:center;gap:.7rem;transform:translate(-50%,-50%);
  will-change:opacity,transform;text-align:center}
.mark img{height:clamp(3.4rem,7vw,6.4rem);width:auto}

.msg{top:50%;left:50%;width:min(90vw,64rem);margin:0;font-family:Montserrat,Inter,Arial,sans-serif;
  font-size:clamp(1.9rem,4.6vw,4.6rem);font-weight:800;letter-spacing:-.045em;line-height:1.04;
  text-align:center;opacity:0;transform:translate(-50%,calc(-50% + 2rem));will-change:opacity,transform}

.hero{bottom:clamp(4.5rem,10vh,7rem);left:var(--pad);width:min(52rem,72vw);opacity:0;
  transform:translateY(2.5rem);will-change:opacity,transform}
.hero h1{margin:0 0 1.1rem;font-size:var(--fs-hero);font-weight:800;max-width:20ch}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero__lead{max-width:46rem;margin:0 0 1.7rem;color:rgba(255,255,255,.84);font-size:var(--fs-body)}
.hero__actions{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.hero__note{margin:.9rem 0 0;color:rgba(255,255,255,.6);font-size:.875rem;font-weight:500}

.cue{display:grid;justify-items:center;gap:.8rem;
  padding:.5rem 1rem;border:0;background:none;color:var(--white);cursor:pointer}
.cue span{font-size:.75rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;opacity:.8}
.cue i{display:block;width:3px;height:3rem;border-radius:2px;background:var(--blue);
  box-shadow:0 0 14px rgba(21,87,255,.85);transform-origin:top center;
  animation:cue 2.2s var(--ease) infinite}
/* Wskaznik przewijania w sekcjach, ktore DALEJ czekaja na przewiniecie: audyt i wspolpraca.
   Kopie robi app.js z wzorca stojacego w scenie otwarcia, wiec napis przychodzi w jezyku
   strony. W otwarciu wskaznika juz nie ma, bo otwarcie idzie samo.
   Prawy dolny rog: nie wchodzi na numery etapow (lewy dol) ani na tresc sekcji, ktora
   na waskich ekranach siega do 5rem od dolu. Uklad poziomy, wiec cala rzecz ma niecale
   3rem wysokosci. Wskaznik stoi w miejscu, wiec nie ma jak skonczyc wedrowki pod dolna
   krawedzia okna, co zdarzalo sie wskaznikowi wedrujacemu w otwarciu. */
.cue--sekcja{right:var(--pad);bottom:clamp(.9rem,2.2vh,1.7rem);z-index:4;
  grid-auto-flow:column;align-items:center;gap:.7rem;padding:.4rem .2rem;
  /* 44 px to dolna granica celu dotykowego; sam uklad dawal 42 px */
  min-height:2.75rem}
.cue--sekcja i{height:1.8rem}
@keyframes cue{0%,100%{transform:scaleY(.45);opacity:.55}50%{transform:scaleY(1);opacity:1}}

/* ——— 01a ekran wyboru jezyka ———
   Pierwszy ekran serwisu. Buduje go app.js (sekcja EKRAN WYBORU JEZYKA), bo caly stan
   zna wylacznie JavaScript. Do pierwszego klikniecia strona nie przewija sie wcale.
   DWA WARIANTY WYGLADU, przelaczane klasa na elemencie nadrzednym .wybor:
     .wybor--swiatlo  (domyslny) biale napisy bez obramowania, pod nimi wedruje niebieska
                      kreska swiatla, ta sama, ktora w scenie otwarcia rozsuwa drzwi,
     .wybor--kolor    obramowanie i napis w bieli, tlo przechodzi w #1557FF przy najechaniu
                      i w rytmie spokojnego pulsu 2,5 s.
   Wybor wariantu: CONFIG.wariantWyboru w app.js albo ?wybor=kolor w adresie. */
body.wybor-otwarty{overflow:hidden}
.wybor{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;
  padding:2rem var(--pad);color:var(--white);background:var(--ink-deep);
  overscroll-behavior:contain;touch-action:none;
  transition:opacity 380ms var(--ease)}
.wybor.is-gasnie{opacity:0;pointer-events:none}
.wybor__srodek{display:grid;justify-items:center;gap:clamp(2rem,6vh,3.6rem);text-align:center}
.wybor__znak{height:clamp(3.4rem,7vw,6.4rem);width:auto}
.wybor__grupa{position:relative;display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(.8rem,2vw,1.6rem);padding-bottom:1.4rem}
.wybor__btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-width:11rem;min-height:3.4rem;padding:.9rem 1.9rem;border:0;background:none;
  font-family:Montserrat,Inter,Arial,sans-serif;font-size:clamp(1rem,1.4vw,1.15rem);
  font-weight:800;letter-spacing:-.01em;line-height:1;color:var(--white);cursor:pointer;
  transition:border-color 220ms var(--ease),transform 220ms var(--ease)}
.wybor__btn > span{position:relative;z-index:1}
.wybor__btn:hover{transform:translateY(-2px)}
/* obrys ogniska w bieli, bo w wariancie kolorowym tlo przycisku jest wtedy niebieskie */
.wybor__btn:focus-visible{outline:3px solid var(--white);outline-offset:4px}
/* Ognisko ustawione z kodu nie pasuje do :focus-visible, a czlowiek ma widziec,
   gdzie ono stoi. W wariancie "swiatlo" robi to sama kreska: stoi pod przyciskiem
   w ognisku i tam zostaje, wiec dorysowywanie obramowania zamienialoby napis bez
   ramki w przycisk z ramka, czyli w drugi wariant. W wariancie "kolor" kreski nie
   ma, wiec obrys jest potrzebny. Klase zdejmuje app.js przy pierwszym ruchu
   czlowieka i od tej chwili rzadzi zwykla regula :focus-visible. */
.wybor--kolor .wybor__btn--wskazany{outline:3px solid var(--white);outline-offset:4px}
/* jezyk, ktorego wersja jeszcze nie stoi na serwerze: widoczny, ale nic nie obiecuje */
/* .4 dawalo kontrast 3,8 do 1, ponizej progu czytelnosci. .62 daje ponad 4,5 do 1,
   a przycisk dalej czytelnie odstaje od czynnego. */
.wybor__btn--niegotowy{opacity:.62;cursor:default}
.wybor__btn--niegotowy:hover{transform:none}

.wybor--kolor .wybor__btn{border:2px solid rgba(255,255,255,.85)}
.wybor--kolor .wybor__btn::before{content:"";position:absolute;inset:0;z-index:0;
  background:var(--blue);opacity:0;animation:wybor-puls 2.5s var(--ease) infinite}
.wybor--kolor .wybor__btn:hover::before,
.wybor--kolor .wybor__btn:focus-visible::before{opacity:1;animation:none}
.wybor--kolor .wybor__btn:hover,
.wybor--kolor .wybor__btn:focus-visible{border-color:var(--blue)}
.wybor--kolor .wybor__btn--niegotowy::before{animation:none}
.wybor--kolor .wybor__swiatlo{display:none}
/* klatka 0 procent jest stanem spoczynku, wiec zatrzymanie animacji przy ograniczonym
   ruchu zostawia przycisk przezroczysty, a nie w polowie pulsu */
@keyframes wybor-puls{0%,100%{opacity:0}50%{opacity:.55}}

/* kreska swiatla: app.js podaje --x, --y i --w z ukladu przyciskow, wiec dziala tak samo,
   gdy przyciski stoja obok siebie i gdy zawina sie na dwa wiersze */
.wybor__swiatlo{position:absolute;left:0;top:0;z-index:0;display:block;
  width:var(--w,7rem);height:3px;border-radius:2px;background:var(--blue);
  box-shadow:0 0 26px rgba(21,87,255,.85);
  transform:translate(var(--x,0px),var(--y,0px));
  transition:transform 720ms var(--ease),width 720ms var(--ease)}

/* ——— 02 sytuacja ——— */
.sit__grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(17rem,.7fr);
  gap:clamp(2.5rem,6vw,7rem);align-items:end}
.sit__copy p{margin:0 0 1rem;color:var(--graphite)}
.sit__copy p:last-child{margin-bottom:0}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem);
  margin-top:clamp(3rem,5vw,4.5rem)}
/* stan spoczynkowy filaru w jednej regule; stany zapalony i najechany osobno ponizej */
.pillar{border-top:8px solid var(--ink);padding-top:1.1rem;cursor:default;
  transition:border-top-color 260ms var(--ease)}
.pillar strong{display:block;font-family:Montserrat,Inter,Arial,sans-serif;
  font-size:clamp(1.4rem,2.4vw,2.4rem);font-weight:800;letter-spacing:-.04em;line-height:1;
  transition:color 260ms var(--ease)}
.pillar p{margin:.9rem 0 0;font-size:1rem;color:var(--graphite)}
.pillar.is-lit{border-top-color:var(--blue)}
.pillar.is-lit strong{color:var(--blue)}
.pillar:hover{border-top-color:var(--blue)}
.pillar:hover strong{color:var(--blue)}

/* ——— 03 dowody ——— */
.ev{color:var(--white);background:radial-gradient(circle at 88% 10%,rgba(21,87,255,.16),transparent 26rem),var(--ink)}
.ev__head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(18rem,.75fr);
  gap:1rem clamp(2.5rem,7vw,8rem);align-items:end}
.ev__head .kicker{grid-column:1/-1}
.ev__head h2{margin:0;max-width:26ch}
.ev__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,1.6vw,1.5rem);
  margin-top:clamp(3.5rem,7vw,7rem)}
.stat{display:flex;flex-direction:column;min-height:21rem;padding:clamp(1.4rem,2.2vw,2.2rem);
  background:rgba(255,255,255,.055)}
.stat--focus{background:var(--blue)}
.stat__num{display:flex;align-items:baseline;gap:.2em;margin:0 auto 0 0;
  font-family:Montserrat,Inter,Arial,sans-serif;font-size:clamp(2.6rem,4.6vw,4.6rem);
  font-weight:800;letter-spacing:-.06em;line-height:.9;color:var(--blue)}
.stat--focus .stat__num{color:var(--white)}
.stat__num i{font-style:normal;font-size:.62em;opacity:.55;margin:0 .12em}
.stat p{margin:2.6rem 0 1.1rem;font-size:1rem;color:rgba(255,255,255,.82)}
.stat cite,.stat a{font-size:.8125rem;font-style:normal;font-weight:600;color:rgba(255,255,255,.5)}
.stat--focus p,.stat--focus cite,.stat--focus a{color:var(--white)}
.stat a:hover{color:var(--white)}
.ev__close{max-width:56ch;margin:clamp(3rem,6vw,6rem) 0 0;font-size:clamp(1.15rem,1.8vw,1.75rem);
  font-weight:500;line-height:1.4;color:rgba(255,255,255,.76)}

/* ——— 04 audyt ——— */
.audit{position:relative;height:300svh;color:var(--white);background:var(--ink-deep)}
.audit__stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--ink-deep)}
.audit__media,.audit__veil{position:absolute;inset:0}
.audit__media{width:100%;height:100%;object-fit:cover;object-position:42% center;
  transform:scale(1.06);will-change:transform}
.audit__veil{background:
  linear-gradient(90deg,rgba(6,8,12,.1) 0%,rgba(6,8,12,.42) 34%,rgba(6,8,12,.95) 58%),
  linear-gradient(0deg,rgba(6,8,12,.5),transparent 55%)}
.audit__content{position:absolute;top:calc(50% + var(--header-h) / 2);right:var(--pad);z-index:2;
  width:min(34rem,44vw);transform:translateY(-50%)}
.audit__content h2{margin:0 0 clamp(1.2rem,3.5vh,3rem)}
/* Komputer: trzy etapy stoja na ekranie naraz jako lista, przewijanie zapala biezacy
   i rozwija jego opis. Do 13 wrzesnia 2026 byl tu jeden etap naraz i licznik 01 02 03
   w rogu: na telefonie dziala, ale na duzym ekranie oko pomijalo licznik i nie bylo
   widac, ze sa jeszcze dwa kroki. Jeden etap naraz wraca w bloku @media (max-width:1280px). */
.phases{position:relative;display:grid;min-height:0}
.phase{position:relative;display:grid;grid-template-columns:2.6rem minmax(0,1fr);column-gap:1rem;
  padding:clamp(.75rem,1.8vh,1.15rem) 0;border-top:1px solid rgba(255,255,255,.18);opacity:.55;
  transition:opacity 320ms var(--ease),border-color 320ms var(--ease)}
.phase:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
.phase.is-active{opacity:1;border-top-color:var(--blue)}
.phase b{grid-row:1 / span 2;padding-top:.12rem;color:rgba(255,255,255,.62);
  font-family:Montserrat,Inter,Arial,sans-serif;font-size:1.1rem;font-weight:800;
  transition:color 320ms var(--ease)}
.phase.is-active b{color:var(--blue-light)}
.phase h3{margin:0;font-size:var(--fs-h3);font-weight:700;line-height:1.15}
.phase p{margin:0;max-width:34rem;font-size:1rem;color:rgba(255,255,255,.74);
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height 380ms var(--ease),opacity 300ms var(--ease),margin-top 300ms var(--ease)}
.phase.is-active p{max-height:8rem;opacity:1;margin-top:.55rem}
.audit__cta{margin-top:clamp(1.2rem,3vh,2rem)}
/* licznik jest potrzebny tylko przy jednym etapie naraz, czyli ponizej 1280 px */
.audit__idx{position:absolute;bottom:2rem;left:calc(var(--pad) - .9rem);z-index:2;display:none;gap:1rem;
  padding:.5rem .9rem;background:rgba(6,8,12,.72);
  font-family:Montserrat,Inter,Arial,sans-serif;font-size:.75rem;font-weight:800;letter-spacing:.08em}
.audit__idx span{opacity:.6;transition:color 160ms ease,opacity 160ms ease}
.audit__idx span.is-active{color:var(--blue-light);opacity:1}

/* ——— 05 czlowiek ——— */
.human{position:relative;min-height:106svh;overflow:hidden;background:var(--white);
  display:grid;align-items:center}
video.human__media{background:#0F1115}
.human__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:72% center;transform:scale(1.03);transition:transform 1.4s var(--ease)}
.human.is-in-view .human__media{transform:scale(1)}
.human__content{position:relative;z-index:2;justify-self:start;width:min(34rem,42vw);
  margin-left:var(--pad);padding:clamp(2rem,5vh,4rem) 0}
.human__content h2{max-width:20ch}
.human__content p{max-width:32rem;margin:0 0 1.5rem;color:var(--graphite);font-size:var(--fs-body)}

/* ——— 06 rozwiazania ——— */
.sol__head{margin-bottom:clamp(2.5rem,5vw,4rem)}
.sol__head h2{margin:0 0 1.1rem;max-width:none}
.sol__head .lead{max-width:76ch}

.pola{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,1.6vw,1.5rem)}
.pole{position:relative;display:flex;flex-direction:column;min-height:15rem;
  padding:clamp(1.5rem,2.4vw,2.2rem);background:var(--white);border:1px solid #E2E5EA;
  transition:border-color 200ms var(--ease),background 200ms var(--ease),
             color 200ms var(--ease),transform 200ms var(--ease)}
.pole h3{margin:0 0 .8rem;font-size:var(--fs-h3);font-weight:700;line-height:1.15;max-width:20ch}
.pole p{margin:0 0 1.6rem;font-size:1rem;color:var(--graphite);transition:color 200ms ease}
.pole span{margin-top:auto;color:var(--blue);font-size:.9375rem;font-weight:700}
.pole span::after{content:" \2192"}
.pole:hover,.pole:focus-visible{border-color:var(--ink);transform:translateY(-.35rem)}
.pole--audyt{grid-column:1 / -1;background:var(--ink);border-color:var(--ink);color:var(--white);
  min-height:auto;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(1.2rem,3vw,3.5rem) clamp(2rem,5vw,5rem);align-items:start;
  padding:clamp(1.8rem,3vw,2.8rem)}
.pole--audyt::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:var(--blue);
  transform:scaleX(var(--postep,0));transform-origin:left;transition:transform 120ms linear}
.pole--audyt h3{grid-column:1;grid-row:1;font-size:clamp(1.5rem,2.4vw,2.2rem);font-weight:800;
  letter-spacing:-.035em;max-width:14ch;margin:0}
.pole--audyt p{grid-column:2;grid-row:1;margin:0;max-width:44ch;font-size:1.0625rem;
  color:rgba(255,255,255,.76)}
.pole--audyt span{grid-column:1 / -1;grid-row:2;margin-top:0;color:var(--white)}
.pole--audyt:hover{border-color:var(--blue);background:#151A22}

/* ——— 07 founderzy: układ przeniesiony z wersji v2 ——— */
.experts{background:var(--light)}
.experts__head h2{max-width:none;margin:0}
.experts .cards2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);
  margin-top:clamp(2.5rem,4.5vw,3.5rem)}
.expert{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(1.2rem,2vw,1.9rem);
  align-items:start}
.expert__photo{position:relative;overflow:hidden;background:var(--white)}
.expert__photo::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:4px;
  background:var(--blue);transform:scaleX(0);transform-origin:left;z-index:2;
  transition:transform .6s var(--ease) .55s}
.expert.is-visible .expert__photo::after,.expert:hover .expert__photo::after{transform:scaleX(1)}
.expert__photo img{width:100%;height:380px;object-fit:cover;object-position:74% 12%;
  transform:translateX(56px);opacity:0;
  transition:transform .9s var(--ease),opacity .9s var(--ease)}
.expert.is-visible .expert__photo img{transform:none;opacity:1}
.expert:hover .expert__photo img{transform:scale(1.045)}
.expert h3{margin:0;font-size:1.35rem;font-weight:700;letter-spacing:-.02em}
.expert .role{margin-top:.4rem;font-size:.85rem;font-weight:600;color:var(--blue);
  text-transform:uppercase;letter-spacing:.08em}
.expert p{margin:.9rem 0 0;font-size:.95rem;color:var(--graphite);max-width:52ch}
.link-arrow{display:inline-block;margin-top:.9rem;font-size:.92rem;font-weight:600;color:var(--blue)}
.link-arrow::after{content:" \2192";transition:margin .2s var(--ease)}
.link-arrow:hover::after{margin-left:4px}
.experts__note{margin:clamp(2.2rem,3.5vw,2.8rem) 0 0;color:var(--graphite);max-width:70ch}
.experts__cta{margin-top:1.9rem}

/* ——— 08 wspolpraca: obiekt systemu jako tlo sekcji ——— */
.system{position:relative;height:300svh;color:var(--white);background:var(--ink-deep)}
.system__stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--ink-deep);
  display:flex;align-items:center}
.system__obiekt{position:absolute;top:50%;right:-4%;z-index:0;margin:0;height:104%;
  transform:translateY(-50%);pointer-events:none}
.system__obiekt video{height:100%;width:auto;display:block;mix-blend-mode:screen;
  filter:contrast(1.06) saturate(1.05)}
.system__poswiata{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 72% 50%,rgba(21,87,255,.2),transparent 40rem)}
.system__zaslona{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(90deg,rgba(9,11,16,.96) 0%,rgba(9,11,16,.86) 34%,rgba(9,11,16,.3) 62%,transparent 82%)}
.system__grid{position:relative;z-index:2;width:100%;padding:calc(var(--header-h) + 2rem) var(--pad) 3rem;
  display:grid;grid-template-columns:minmax(0,min(56ch,54%));gap:0;align-items:center}

.system__tresc h2{margin:0 0 clamp(1.5rem,3vw,2.5rem);max-width:20ch}
.etapy{list-style:none;margin:0;padding:0;display:grid;max-width:46rem}
.etap{display:grid;grid-template-columns:2.2rem minmax(0,1fr);gap:1.2rem;align-items:baseline;
  padding:1.05rem 0;border-top:1px solid rgba(255,255,255,.16);
  opacity:.45;transition:opacity 320ms var(--ease)}
.etap:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.etap b{font-family:Montserrat,Inter,Arial,sans-serif;font-size:.9375rem;font-weight:800;
  letter-spacing:.04em;color:rgba(255,255,255,.55);transition:color 320ms var(--ease)}
.etap h3{margin:0;font-size:1.0625rem;font-weight:700;line-height:1.2}
.etap p{margin:.4rem 0 0;font-size:.9375rem;color:rgba(255,255,255,.7);max-width:48ch;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height 380ms var(--ease),opacity 300ms var(--ease)}
.etap.is-active{opacity:1;border-top-color:var(--blue)}
.etap.is-active b{color:var(--blue)}
.etap.is-active p{max-height:9rem;opacity:1}

.system__boczny{grid-column:1;justify-self:start;max-width:44ch;margin:clamp(1.5rem,3vw,2.2rem) 0 0;
  padding-top:1.1rem;border-top:6px solid var(--blue);color:rgba(255,255,255,.8);font-size:1rem}

/* ——— 09 sciezki + 10 wiedza ——— */
.swiaty{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:clamp(1rem,1.8vw,1.6rem)}
.swiat{display:flex;flex-direction:column;padding:clamp(1.8rem,3vw,2.6rem);background:var(--white);
  border:1px solid #E2E5EA;transition:border-color 200ms var(--ease),transform 200ms var(--ease)}
.swiat h3{margin:0 0 1rem;font-size:clamp(1.15rem,1.6vw,1.4rem);font-weight:700;line-height:1.2;
  letter-spacing:-.02em;max-width:24ch}
.swiat p{margin:0 0 1.6rem;font-size:1rem;color:var(--graphite);max-width:46ch}
.swiat span{margin-top:auto;color:var(--blue);font-size:.9375rem;font-weight:700}
.swiat span::after{content:" \2192"}
a.swiat:hover{border-color:var(--ink);transform:translateY(-.3rem)}
.swiat--flat{cursor:default}

.know{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem);
  margin-top:clamp(2.5rem,5vw,4rem)}
.know article{border-top:8px solid var(--ink);padding-top:1.1rem}
.know em{display:block;font-style:normal;color:var(--blue);font-size:var(--fs-label);
  font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.know h3{margin:.9rem 0 .8rem;font-size:var(--fs-h3);font-weight:700;line-height:1.2}
.know span{font-size:.8125rem;font-weight:600;color:var(--muted)}

/* ——— 11 sekcja domykajaca: przeniesiona z wersji v2 ——— */
.end{position:relative;overflow:hidden;background:#050608;color:var(--white);
  padding:clamp(6rem,10vw,10rem) var(--pad)}
.end__city{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;opacity:.62}
.end::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,6,8,.72) 0%,rgba(5,6,8,.30) 55%,rgba(5,6,8,.78) 100%)}
.end__swiatla{position:absolute;inset:0;z-index:1;pointer-events:none}
.end__swiatla span{position:absolute;width:5px;height:8px;background:#FFD9A0;filter:blur(1.4px);
  mix-blend-mode:screen;opacity:0;animation:okno var(--d,9s) ease-in-out var(--dl,0s) infinite}
.end__swiatla span:nth-child(1){left:9%;top:56%;--d:11s;--dl:0s}
.end__swiatla span:nth-child(2){left:16%;top:68%;--d:8s;--dl:2.4s;width:4px}
.end__swiatla span:nth-child(3){left:23%;top:49%;--d:13s;--dl:5s}
.end__swiatla span:nth-child(4){left:31%;top:74%;--d:9s;--dl:1.2s}
.end__swiatla span:nth-child(5){left:38%;top:58%;--d:12s;--dl:6.6s;width:4px}
.end__swiatla span:nth-child(6){left:47%;top:66%;--d:10s;--dl:3.8s}
.end__swiatla span:nth-child(7){left:55%;top:52%;--d:14s;--dl:.8s}
.end__swiatla span:nth-child(8){left:63%;top:71%;--d:9s;--dl:5.7s;width:6px}
.end__swiatla span:nth-child(9){left:71%;top:60%;--d:11s;--dl:2s}
.end__swiatla span:nth-child(10){left:79%;top:47%;--d:8s;--dl:7.3s;width:4px}
.end__swiatla span:nth-child(11){left:86%;top:64%;--d:12s;--dl:4.4s}
.end__swiatla span:nth-child(12){left:93%;top:55%;--d:10s;--dl:1.7s}
@keyframes okno{0%,100%{opacity:0}12%{opacity:.85}42%{opacity:.5}70%{opacity:0}}
.end__znak{position:absolute;right:-40px;top:50%;transform:translateY(-50%);z-index:1;
  font-family:Montserrat,Inter,Arial,sans-serif;font-weight:800;font-size:clamp(8rem,22vw,19rem);
  line-height:.85;color:rgba(244,245,247,.07);letter-spacing:-.02em;text-align:right;
  user-select:none;pointer-events:none}
.end__content{position:relative;z-index:2;max-width:760px}
.end__content h2{max-width:24ch;font-size:clamp(2rem,4.4vw,3.2rem);color:var(--white)}
.end__content > p{margin:1.4rem 0 0;max-width:52ch;color:#C7CBD4;font-size:1.1rem}
.end__actions{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:2.2rem}
.end__note{margin:1.2rem 0 0;max-width:52ch;color:#9AA0AC;font-size:.9rem}

/* ——— stopka: przeniesiona z wersji v2 ——— */
.ftr{background:var(--ink);color:#AEB4C0;padding:4.5rem var(--pad) 2.5rem;font-size:.9rem}
.ftr__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem}
.ftr__logo{height:3rem;width:auto;display:block}
.ftr h3{margin:0 0 1.15rem;color:#fff;font-size:.8rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase}
.ftr p,.ftr ul{margin:0;font-size:.9rem}
.ftr ul{list-style:none;padding:0}
.ftr li{margin-bottom:.65rem}
.ftr a:hover{color:#fff}
/* Profile w mediach spolecznosciowych. Dwa miejsca, jeden wyglad rodziny: w stopce
   pod danymi firmy, na stronie o nas pod notka przy zalozycielach. Lista jest pusta
   i niewidoczna, dopoki w v4-copy/social.json nie stana adresy. */
.ftr__social{list-style:none;margin:1.4rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.5rem 1.2rem}
.ftr__social a{font-weight:600}
.ftr__social a::after{content:" \2197";font-weight:400;opacity:.6}
.experts__social{list-style:none;margin:1.6rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem}
.experts__social a{color:var(--blue);font-size:.95rem;font-weight:700}
.experts__social a::after{content:" \2197";font-weight:400;opacity:.6}
.ftr__firm{margin-top:1.4rem;line-height:1.8}
.ftr__firm b{color:#E8EAEE;font-weight:600}
.ftr__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.75rem;
  margin-top:3.5rem;padding-top:1.6rem;border-top:1px solid #262B36;
  font-size:.8rem;color:#7C8290}

/* ——————————————————————————————————————————————
   PODSTRONY — ten sam system co strona główna
   —————————————————————————————————————————————— */

.phero{position:relative;overflow:hidden;color:var(--white);background:var(--ink-deep);
  padding:calc(var(--header-h) + clamp(4rem,8vw,7rem)) var(--pad) clamp(4rem,7vw,6rem)}
.phero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.phero__veil{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(6,8,12,.94) 0%,rgba(6,8,12,.72) 52%,rgba(6,8,12,.42) 100%)}
.phero__grid{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(16rem,.55fr);gap:clamp(2rem,5vw,6rem);align-items:end}
.phero h1{margin:0 0 1.3rem;font-size:clamp(2.2rem,4.4vw,4.2rem);font-weight:800;max-width:30ch}
.phero h1 em{font-style:normal;color:var(--blue-light)}
.phero__lead{margin:0 0 1.9rem;max-width:60ch;color:rgba(255,255,255,.82);font-size:var(--fs-body)}
.phero__actions{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.phero__side{margin:0;padding-top:1.1rem;border-top:8px solid var(--blue);
  color:rgba(255,255,255,.7);font-size:.9375rem}

.sec--dwie{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
  gap:clamp(2rem,4.5vw,4.5rem);align-items:start}
.sec--dwie .sec__head h2{font-size:clamp(1.5rem,2.2vw,2.1rem);line-height:1.1}
.sec--dwie > .sec__head{margin-bottom:0;position:sticky;top:calc(var(--header-h) + 2rem)}
.sec--dwie > .sec__tresc{min-width:0}
.sec__head{max-width:30ch;margin-bottom:clamp(2rem,4vw,3rem)}
.sec__head h2{margin:0 0 1rem}
.sec__head p{margin:0 0 .8rem;color:var(--graphite)}
.sec--dark .sec__head p{color:rgba(255,255,255,.74)}
.sec__head p:last-child{margin-bottom:0}
.prose-copy{max-width:62ch}
.prose-copy p{margin:0 0 1rem;color:var(--graphite)}

.deflist{display:grid;gap:1.6rem;max-width:none;margin:0}
.deflist div{display:grid;gap:.35rem;font-size:1rem;max-width:66ch}
.deflist dt{font-family:Montserrat,Inter,Arial,sans-serif;font-size:1.0625rem;font-weight:700;
  letter-spacing:-.02em}
.deflist dd{margin:0;color:var(--graphite);font-size:1rem}

.checks{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem;max-width:none}
.checks li{position:relative;padding-left:2.4rem;font-size:1rem;max-width:calc(2.4rem + 66ch)}
.checks li::before{content:"";position:absolute;left:0;top:.45em;width:1.35rem;height:.55rem;
  border-left:5px solid var(--blue);border-bottom:5px solid var(--blue);transform:rotate(-45deg)}
.checks b{display:block;font-family:Montserrat,Inter,Arial,sans-serif;font-size:1.0625rem;font-weight:700;
  letter-spacing:-.02em;margin-bottom:.2rem}
.checks span{color:var(--graphite);font-size:1rem}
.sec--dark .checks span{color:rgba(255,255,255,.72)}

.cardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr));gap:1px;
  border-top:1px solid #E2E5EA;border-bottom:1px solid #E2E5EA}
.cardgrid > *{display:flex;flex-direction:column;padding:clamp(1.4rem,2.2vw,2rem);background:var(--white)}
/* linie siatki rysuja same kafle; pusta komorka ostatniego rzedu nie zostawia szarego prostokata */
.cardgrid > *:not(:focus-visible){outline:1px solid #E2E5EA}
.cardgrid h3{margin:0 0 .7rem;font-size:var(--fs-h3);font-weight:700;line-height:1.15}
.cardgrid p{margin:0;font-size:1rem;color:var(--graphite)}
.cardgrid span{margin-top:1.3rem;color:var(--blue);font-size:.9375rem;font-weight:700}
a.cardgrid__item:hover{background:var(--ink);color:var(--white)}
a.cardgrid__item:hover p{color:rgba(255,255,255,.72)}
a.cardgrid__item:hover span{color:var(--white)}

.colgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(12rem,100%),1fr));gap:clamp(1.5rem,3vw,2.5rem)}
.colgrid article{border-top:8px solid var(--ink);padding-top:1.1rem}
.sec--dark .colgrid article{border-top-color:rgba(255,255,255,.24)}
.colgrid h3{margin:0 0 .7rem;font-size:1.0625rem;font-weight:700}
.colgrid p{margin:0;font-size:1rem;color:var(--graphite)}
.sec--dark .colgrid p{color:rgba(255,255,255,.7)}

/* kroki uslugi: ten sam rytm co .etap na stronie glownej */
.steps{display:grid;gap:1.6rem}
.step{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1.2rem;
  padding-top:1.05rem;border-top:1px solid #DFE3EA}
.step b{grid-column:1;grid-row:1 / span 2;font-family:Montserrat,Inter,Arial,sans-serif;
  font-size:.9375rem;font-weight:800;letter-spacing:.04em;color:var(--blue)}
.step h3{grid-column:2;grid-row:1;margin:0 0 .4rem;font-size:1.0625rem;font-weight:700;line-height:1.2}
.step p{grid-column:2;grid-row:2;margin:0;font-size:1rem;color:var(--graphite);max-width:62ch}
.sec--dark .step{border-top-color:rgba(255,255,255,.24)}
.sec--dark .step b{color:var(--blue-light)}
.sec--dark .step p{color:rgba(255,255,255,.72)}

.faq{display:grid;gap:0;max-width:78ch;border-top:1px solid #DFE3EA}
.faq details{border-bottom:1px solid #DFE3EA}
.faq summary{display:flex;justify-content:space-between;gap:1.5rem;align-items:baseline;
  padding:1.3rem 0;cursor:pointer;list-style:none;
  font-family:Montserrat,Inter,Arial,sans-serif;font-size:1.0625rem;font-weight:700;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--blue);font-size:1.4rem;font-weight:700;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 1.4rem;max-width:66ch;color:var(--graphite);font-size:1rem}

.callout{display:grid;grid-template-columns:minmax(0,1fr) minmax(16rem,.8fr);
  gap:clamp(1.5rem,4vw,4rem);padding:clamp(1.6rem,3vw,2.6rem);background:var(--pale);
  border-left:8px solid var(--blue)}
.callout h2{margin:0 0 .9rem;font-size:var(--fs-h3);font-weight:800}
.callout p{margin:0 0 .8rem;color:var(--graphite);font-size:1rem;max-width:68ch}

/* kontakt: film w oknie + formularz */
.kontakt{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(16rem,.65fr);
  gap:clamp(2rem,4vw,4rem);align-items:start}
.kontakt__lewa{min-width:0}
.kontakt .form{grid-template-columns:1fr;gap:clamp(1.8rem,3vw,2.6rem)}
.kontakt .form__aside{border-top-width:6px}
.kontakt .sec__head{max-width:52ch}
.okno{position:relative;overflow:hidden;background:var(--ink-deep)}
.okno--bok{position:sticky;top:calc(var(--header-h) + 2rem);margin:0 auto;
  max-width:calc((100svh - var(--header-h) - 4rem) * 560 / 996)}
.okno--bok .okno__film{width:100%;height:auto;aspect-ratio:560 / 996;object-fit:contain;
  background:#05070B;max-height:calc(100svh - var(--header-h) - 4rem)}
.okno__film{display:block;width:100%;height:clamp(20rem,58svh,34rem);object-fit:cover}
.okno::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60%;pointer-events:none;
  background:linear-gradient(0deg,rgba(6,8,12,.92) 0%,rgba(6,8,12,.55) 42%,transparent 100%)}
/* w pionowym kadrze okno jest na dole, wiec napis idzie na gore, nad dach */
.okno--bok::after{top:0;bottom:auto;height:46%;
  background:linear-gradient(180deg,rgba(6,8,12,.88) 0%,rgba(6,8,12,.45) 55%,transparent 100%)}
.okno figcaption{position:absolute;left:var(--pad);bottom:clamp(1.5rem,4vw,3rem);z-index:2;pointer-events:none;
  max-width:34ch;color:var(--white);font-family:Montserrat,Inter,Arial,sans-serif;
  font-size:clamp(1.1rem,1.8vw,1.6rem);font-weight:700;line-height:1.25;letter-spacing:-.03em;
  text-shadow:0 2px 24px rgba(6,8,12,.7)}
.okno figcaption b{display:block;color:var(--blue-light);text-shadow:0 2px 18px rgba(6,8,12,.9);font-size:.75em;font-weight:700;
  letter-spacing:.02em;margin-bottom:.4rem}
/* wariant pionowy stoi ZA blokiem bazowym: inaczej kaskada zjada mu left, font-size i bottom */
.okno--bok figcaption{top:clamp(1.2rem,2.5vw,2rem);bottom:auto;
  left:clamp(1rem,2vw,1.6rem);right:clamp(1rem,2vw,1.6rem);max-width:none;
  font-size:clamp(1rem,1.3vw,1.25rem)}

.form{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(17rem,.85fr);
  gap:clamp(2rem,5vw,5rem);align-items:start}
.form__fields{display:grid;gap:1.2rem}
.field{display:grid;gap:.45rem}
.field label{font-size:var(--fs-label);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--graphite)}
.field input,.field select,.field textarea{
  width:100%;padding:.85rem .95rem;border:2px solid #D5DAE2;border-radius:0;background:var(--white);
  font:inherit;font-size:1rem;color:var(--ink);transition:border-color 160ms ease}
.field textarea{min-height:9rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);outline:none}
/* sama zmiana koloru obramowania daje 3,9 do 1, wiec dla klawiatury wraca obrys */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:3px solid var(--blue);outline-offset:2px}
.form__note{margin:.4rem 0 0;font-size:.875rem;color:var(--muted)}
.form__aside{padding-top:1.1rem;border-top:8px solid var(--ink)}
.form__aside h3{margin:0 0 .8rem;font-size:1.0625rem;font-weight:700}
.form__aside p{margin:0 0 1rem;font-size:1rem;color:var(--graphite)}
.form__aside a{color:var(--blue);font-weight:600}

/* brakujace fakty: widoczny znacznik dla Patrycji, do usuniecia przed publikacja */
.brak{background:#FFF3C4;color:#5C4A00;padding:.1em .4em;font-size:.9em;font-weight:600;
  border-bottom:2px solid #E0B400}

.form__ok{padding:clamp(1.4rem,2.4vw,2rem);background:var(--pale);border-left:8px solid var(--blue)}
.form__ok h3{margin:0 0 .7rem;font-size:var(--fs-h3);font-weight:800}
.form__ok p{margin:0;color:var(--graphite);font-size:1rem}
.form__ok a{color:var(--blue);font-weight:600}
.btn[disabled]{opacity:.55;cursor:default;transform:none}

/* miary naglowkow sekcji: tekst korzysta z szerokosci, nie lamie sie przedwczesnie.
   Selektory, ktore maja wlasna regule wyzej (.ev__head h2, .human__content h2,
   .end__content h2, .system__tresc h2), trzymaja max-width TAM: jedno zrodlo wartosci
   na selektor. Tutaj zostaja tylko naglowki bez wlasnej reguly. */
.osoby__h2{max-width:30ch;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sciezki__h2{max-width:32ch;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sit__grid h2{max-width:26ch}

/* ——— strona o nas i uklady podstron dodane 13.09.2026 ——— */
/* hero z founderami: zdjecie w pelnym kolorze, zaslona tylko pod tekstem po lewej */
/* Zdjecia dokumentalne podstron: kadr w pelnym kryciu, akcja po prawej, welon gesty tylko pod tekstem */
.phero--foto .phero__media{opacity:1;object-position:70% 50%}
.phero--foto .phero__veil{background:
  linear-gradient(90deg,rgba(6,8,12,.92) 0%,rgba(6,8,12,.8) 36%,rgba(6,8,12,.3) 66%,rgba(6,8,12,.06) 100%),
  linear-gradient(0deg,rgba(6,8,12,.5) 0%,rgba(6,8,12,0) 38%)}
/* tekst boczny lezy na jasnych partiach zdjecia, wiec dostaje wlasne ciemne tlo */
.phero--foto .phero__side{background:rgba(6,8,12,.78);padding:1.1rem 1.25rem 1.2rem;color:rgba(255,255,255,.86)}
.phero--founderzy{display:flex;align-items:flex-end;min-height:min(100svh,58rem)}
.phero--founderzy .phero__media{opacity:1;object-position:72% 28%}
/* tekst trzyma sie lewej polowy, zeby nie wchodzil na founderow; dopisek o siedzibie
   schodzi pod przyciski, bo po prawej stronie lezal na marynarce */
.phero--founderzy .phero__grid{width:100%;grid-template-columns:minmax(0,min(44rem,46%));align-items:start}
.phero--founderzy h1{font-size:clamp(2.1rem,3.5vw,3.6rem);max-width:none}
.phero--founderzy .phero__lead{max-width:40rem}
.phero--founderzy .phero__side{grid-column:1;max-width:30rem;margin-top:1.6rem}
.phero--founderzy .phero__veil{background:
  linear-gradient(90deg,rgba(6,8,12,.95) 0%,rgba(6,8,12,.8) 34%,rgba(6,8,12,.25) 58%,rgba(6,8,12,0) 72%),
  linear-gradient(0deg,rgba(6,8,12,.55) 0%,rgba(6,8,12,0) 32%)}

/* linie i nazwy zapalaja sie na niebiesko, gdy przewijanie do nich dojdzie (app.js: is-lit) */
.colgrid article{transition:border-color 480ms var(--ease)}
.colgrid h3{transition:color 480ms var(--ease)}
.colgrid article.is-lit{border-top-color:var(--blue)}
.colgrid article.is-lit h3{color:var(--blue)}

.prose-copy--lead{max-width:none}
.lead-duzy{max-width:34ch;margin:0 0 1.6rem;padding-left:clamp(1rem,2vw,1.6rem);border-left:6px solid var(--blue);
  font-family:Montserrat,Inter,Arial,sans-serif;font-size:clamp(1.3rem,2.2vw,2rem);font-weight:600;
  line-height:1.3;letter-spacing:-.02em;color:var(--ink)}
.prose-copy--lead > p:not(.lead-duzy):not(.nazwa-def){max-width:62ch}
.nazwa-def{display:grid;gap:.4rem;max-width:44rem;margin:clamp(1.8rem,3vw,2.6rem) 0 0;
  padding:clamp(1.2rem,2.2vw,1.8rem);background:#EAF0FF}
.nazwa-def b{font-family:Montserrat,Inter,Arial,sans-serif;font-size:.8125rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.nazwa-def span{font-size:clamp(1.05rem,1.4vw,1.25rem);font-weight:500;color:var(--ink)}

.zasady{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem);
  margin-top:clamp(1.5rem,3vw,2.2rem)}
.zasada{padding:clamp(1.4rem,2.4vw,2rem);background:var(--light);border-top:6px solid var(--ink);
  transition:border-color 480ms var(--ease)}
.zasada.is-lit{border-top-color:var(--blue)}
.zasada:last-child:nth-child(odd){grid-column:1 / -1}
.zasada b{display:block;margin-bottom:.8rem;font-family:Montserrat,Inter,Arial,sans-serif;
  font-size:.9375rem;font-weight:800;letter-spacing:.06em;color:var(--blue)}
.zasada h3{margin:0 0 .55rem;font-size:var(--fs-h3);font-weight:700;line-height:1.2}
.zasada p{margin:0;font-size:1rem;color:var(--graphite)}

.pasmo{position:relative;height:clamp(15rem,40vw,34rem);overflow:hidden;background:var(--ink)}
.pasmo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.pasmo::after{content:"";position:absolute;left:var(--pad);right:var(--pad);bottom:0;height:6px;
  background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform 900ms var(--ease)}
.pasmo.is-lit::after{transform:scaleX(1)}

.definicje{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem);
  margin-top:clamp(1.5rem,3vw,2.2rem)}
.definicja{display:flex;flex-direction:column;padding:clamp(1.6rem,2.8vw,2.4rem);color:var(--white);background:var(--ink)}
.definicja__znak{width:4rem;height:2rem;margin-bottom:1.4rem;color:rgba(255,255,255,.6)}
.definicja__znak svg{display:block;width:100%;height:100%}
.sec--pelna .sec__head{max-width:62rem}
.sec--pelna .sec__head h2{font-size:clamp(1.5rem,2.2vw,2.1rem);line-height:1.1}
.sec--pelna .sec__head p{max-width:62ch}
/* nazwa pojecia nigdy nie lamie sie w srodku slowa; rozmiar schodzi z szerokoscia ekranu */
.definicja h3{margin:0 0 .9rem;font-size:clamp(1.4rem,6.4vw,2.4rem);font-weight:800;line-height:1.05;
  letter-spacing:-.03em;color:var(--white);overflow-wrap:normal;hyphens:manual}
.definicja__co{margin:0 0 1.4rem;font-size:clamp(1.05rem,1.3vw,1.2rem);font-weight:500;line-height:1.45;
  color:rgba(255,255,255,.92)}
.definicja__label{margin:auto 0 .45rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.18);
  font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-light)}
.definicja p:last-child{margin:0;font-size:.98rem;color:rgba(255,255,255,.76)}

.rynki{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.8rem,2vw,1.5rem);
  margin:clamp(1.6rem,3vw,2.4rem) 0 0;padding:0;list-style:none}
.rynki li{padding-top:1rem;border-top:6px solid var(--ink);transition:border-color 480ms var(--ease)}
.rynki li.is-lit{border-top-color:var(--blue)}
.rynki b{display:block;font-family:Montserrat,Inter,Arial,sans-serif;font-size:clamp(2rem,4vw,3.2rem);
  font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--ink)}
.rynki span{display:block;margin-top:.4rem;font-size:.9375rem;color:var(--graphite)}

/* statystyka z paskami i polem na zysk (strona o nas). Bez JavaScriptu paski stoja pelne;
   app.js dokleja .wartosc--czeka i rozwija je dopiero, gdy sekcja wjedzie w kadr. */
.wartosc{max-width:62rem;margin-top:clamp(1.5rem,3vw,2.2rem);padding:clamp(1.4rem,3vw,2.4rem);
  background:var(--white);border:1px solid #E2E5EA}
.wartosc__jednostka{margin:0 0 1.2rem;font-size:.8125rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--graphite)}
.wartosc__pasek{display:grid;grid-template-columns:minmax(0,19rem) minmax(0,1fr);gap:.6rem 1.8rem;
  align-items:center;padding:1rem 0;border-top:1px solid #E2E5EA}
.wartosc__opis b{display:block;font-family:Montserrat,Inter,Arial,sans-serif;font-size:clamp(1.8rem,3.4vw,2.8rem);
  font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--ink)}
.wartosc__opis span{display:block;margin-top:.4rem;font-size:.9375rem;color:var(--graphite)}
.wartosc__pasek--wyzej .wartosc__opis b{color:var(--blue)}
.wartosc__tor{height:14px;overflow:hidden;background:var(--light)}
.wartosc__tor i{display:block;width:var(--szer);height:100%;background:var(--ink);transform-origin:left;
  transition:transform 900ms var(--ease)}
.wartosc__pasek--wyzej .wartosc__tor i{background:var(--blue);transition-delay:200ms}
.wartosc--czeka .wartosc__tor i{transform:scaleX(0)}
.wartosc--czeka.is-lit .wartosc__tor i{transform:scaleX(1)}
.wartosc__pole{display:grid;gap:.55rem;margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid #E2E5EA;
  font-size:.9375rem;color:var(--graphite)}
.wartosc__pole input{width:100%;max-width:18rem;padding:.8rem 1rem;font:inherit;font-size:1.125rem;color:var(--ink);
  background:var(--white);border:1px solid #C9CED6;border-radius:0}
.wartosc__pole input:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.wartosc__wynik{min-height:1.5em;margin:1rem 0 0;font-size:clamp(1.05rem,1.4vw,1.25rem);font-weight:600;color:var(--ink)}
.wartosc__uwaga{margin:.6rem 0 0;font-size:.875rem;color:var(--graphite)}
.wartosc__zrodlo{margin:.3rem 0 0;font-size:.8125rem;color:#5F6673}

/* kalkulator kosztu: element strony (o nas) i okienko chowane w zakladke (wybrane podstrony) */
.kalk{position:relative;color:var(--white);background:var(--ink)}
.kalk--sekcja{max-width:44rem;margin-top:clamp(1.5rem,3vw,2.2rem);padding:clamp(1.4rem,3vw,2.2rem)}
.kalk--okno{position:fixed;right:clamp(.75rem,2vw,1.5rem);bottom:clamp(.75rem,2vw,1.5rem);z-index:90;
  width:min(26rem,calc(100vw - 1.5rem));max-height:calc(100vh - var(--header-h) - 2rem);overflow-y:auto;
  padding:clamp(1.2rem,2.4vw,1.8rem);box-shadow:0 18px 50px rgba(0,0,0,.35);
  opacity:0;transform:translateY(1rem);transition:opacity 260ms ease,transform 260ms var(--ease)}
.kalk--okno.is-open{opacity:1;transform:none}
.kalk__tytul{margin:0 2.6rem .6rem 0;font-size:clamp(1.1rem,1.6vw,1.35rem);font-weight:800;line-height:1.2;color:var(--white)}
.kalk__wstep{margin:0 0 1rem;font-size:.9rem;color:rgba(255,255,255,.72)}
.kalk__pole{margin:0 0 1rem}
.kalk__pole label{display:block;margin-bottom:.4rem;font-size:.9rem;color:rgba(255,255,255,.88)}
.kalk__suwak{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.8rem;align-items:center}
.kalk__suwak input{width:100%;min-height:44px;accent-color:var(--blue)}
.kalk__suwak output{min-width:5.5rem;text-align:right;font-family:Montserrat,Inter,Arial,sans-serif;font-weight:800;color:var(--white)}
.kalk__wynik{margin:1rem 0 .3rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.18);
  font-size:clamp(1.05rem,1.5vw,1.25rem);font-weight:700;color:var(--white)}
.kalk__wynik2{margin:0 0 1.1rem;font-size:.95rem;color:rgba(255,255,255,.8)}
.kalk .btn{width:100%;white-space:normal;text-align:center}
.kalk__przypis{margin:.8rem 0 0;font-size:.78rem;color:rgba(255,255,255,.58)}
.kalk__zamknij{position:absolute;top:.5rem;right:.5rem;width:44px;height:44px;border:0;background:transparent;
  color:var(--white);font-size:1.7rem;line-height:1;cursor:pointer}
.kalk__zamknij:focus-visible{outline:3px solid var(--blue-light);outline-offset:-4px}
.kalk-zakladka{position:fixed;right:0;top:50%;z-index:89;min-width:44px;padding:1rem .65rem;border:0;
  color:var(--white);background:var(--blue);writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);
  font:800 .8rem/1 Montserrat,Inter,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.kalk-zakladka:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* mapa PL, DE, NL: ksztalty krajow z danych Natural Earth, nazwy i siedziba nalozone w HTML */
.mapa{margin:clamp(1.6rem,3vw,2.4rem) 0 0}
.mapa__pole{position:relative;max-width:58rem}
.mapa__ksztalt{display:block;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-composite:intersect}
.mapa__ksztalt path{fill:#EEF0F3;stroke:#FFFFFF;stroke-width:1.6;stroke-linejoin:round}
.mapa__ksztalt .mapa__aktywny{fill:#DCE5FF;stroke:var(--blue);stroke-width:1.5}
.mapa__punkty{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.mapa__kraj{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);white-space:nowrap;
  font-family:Montserrat,Inter,Arial,sans-serif;font-size:clamp(.78rem,1.7vw,1.3rem);font-weight:800;
  letter-spacing:-.01em;color:var(--ink)}
.mapa__punkt{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
.mapa__punkt::before{content:"";position:absolute;left:-7px;top:-7px;width:14px;height:14px;
  border:2px solid var(--white);border-radius:50%;background:var(--blue)}
.mapa__punkt::after{content:"";position:absolute;left:-14px;top:-14px;width:28px;height:28px;
  border:2px solid var(--blue);border-radius:50%;animation:mapa-puls 2.4s var(--ease) infinite}
@keyframes mapa-puls{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.7);opacity:0}}
.mapa__etykieta{position:absolute;left:14px;top:0;transform:translateY(-50%);white-space:nowrap;
  padding:.15rem .45rem;background:rgba(255,255,255,.9);font-size:clamp(.72rem,1.3vw,.875rem);color:var(--graphite)}
.mapa__etykieta b{margin-right:.2rem;font-weight:800;color:var(--blue)}
.mapa figcaption{max-width:60ch;margin-top:1.2rem;font-size:.9375rem;color:var(--graphite)}

/* ——— responsywnosc: bloki @media stoja NA KONCU pliku, za wszystkimi regulami
   bazowymi. Przy rownej specyficznosci wygrywa regula pozniejsza, wiec kolejnosc
   blokow jest wiazaca i wyglada tak:
     1. progi szerokosci, od najszerszego do najwezszego (1500 → 1280 → 1180 → 900 → 640),
     2. prefers-reduced-motion,
     3. max-height:520px — MUSI stac po ograniczonym ruchu, bo tamten blok
        ustawia .open{height:100svh}, a niskie okno potrzebuje .open{height:auto};
        przy odwrotnej kolejnosci sekcja otwarcia jest przycieta i wchodzi na nastepna,
     4. print — zawsze na samym koncu.
   Kazda zmiana tej kolejnosci gasi blok stojacy wyzej. ——— */

@media (max-width:1500px){
  .hdr__logo img{height:3.4rem}
  .nav{font-size:.8125rem}
}

@media (max-width:1280px){
  :root{--header-h:5.4rem}
  .hdr__logo img{height:3rem}
  .hdr{background:rgba(9,11,16,.92);backdrop-filter:blur(14px)}
  .hdr.is-scrolled{background:rgba(9,11,16,.94);backdrop-filter:blur(14px);
    box-shadow:0 1px 0 rgba(255,255,255,.08)}
  .hdr.is-light{background:rgba(255,255,255,.95)}
  .menu-toggle{display:flex;z-index:2}
  .menu-toggle[aria-expanded="true"] i{transform:rotate(90deg)}
  .nav{position:fixed;inset:0;height:100vh;height:100dvh;flex-direction:column;align-items:flex-start;
    justify-content:flex-start;gap:.5rem;padding:calc(var(--header-h) + 1.5rem) var(--pad) 2.5rem;
    overflow-y:auto;overscroll-behavior:contain;color:var(--white);background:var(--ink);
    opacity:0;pointer-events:none;transform:translateY(-1rem);
    transition:opacity 200ms ease,transform 200ms var(--ease)}
  .nav.is-open{opacity:1;pointer-events:auto;transform:none}
  /* pozycje stoja na srodku, gdy sie mieszcza, i przewijaja od gory, gdy ekran jest niski:
     justify-content:center przycialby wtedy pierwsze pozycje poza zasiegiem przewijania */
  .nav > :first-child{margin-top:auto}
  .nav > :last-child{margin-bottom:auto}
  .nav .btn{max-width:100%;white-space:normal;text-align:center}
  /* Rozmycie tla w naglowku robi z .hdr blok zawierajacy dla potomkow position:fixed.
     Nakladka menu z inset:0 mierzyla sie wtedy od paska naglowka, a nie od ekranu: miala
     jego wysokosc, a pozycje wylewaly sie na hero. Przy otwartym menu rozmycie znika,
     wiec nakladka znow liczy sie od ekranu. Logo zostaje nad nakladka. */
  .hdr.menu-active,.hdr.menu-active.is-scrolled,.hdr.menu-active.is-light{
    color:var(--white);background:var(--ink);box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none}
  .hdr__logo{position:relative;z-index:2}
  .hdr.menu-active .logo-na-ciemnym{display:block}
  .hdr.menu-active .logo-na-jasnym{display:none}
  .nav a:not(.btn){
    display:block;font-family:Montserrat,Inter,Arial,sans-serif;
    font-size:clamp(1.6rem,5.5vw,2.6rem);font-weight:800;letter-spacing:-.04em;
    line-height:1.1;text-transform:none}
  .nav__lang,.nav .btn{margin-top:1.1rem}
  /* Przelacznik jezyka w menu mobilnym zostaje w jednej linii, a nie rozpada sie na
     dwa wielkie bloki jak pozycje menu. Kazdy jezyk dostaje cel dotykowy 44x44 px,
     czyli minimum z WCAG 2.5.5. Wlasciwosci trzeba powtorzyc tutaj, bo blok
     .nav a:not(.btn) stoi wyzej w tym samym miejscu arkusza. */
  .nav .nav__lang a{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:44px;min-height:44px;padding:0 .55rem;
    font-family:inherit;font-size:var(--fs-label);font-weight:700;
    letter-spacing:.08em;line-height:1;text-transform:uppercase}
  .sit__grid,.ev__head,.sol__head{grid-template-columns:1fr}
  .sec--dwie{grid-template-columns:1fr;gap:1.5rem}
  .sec--dwie > .sec__head{position:static;max-width:32ch;margin-bottom:1rem}
  .pola{grid-template-columns:1fr 1fr}
  /* miejsce karty audytu w siatce nadrzednej ORAZ jej wewnetrzna siatka, w jednej regule */
  .pole--audyt{grid-column:span 2;grid-template-columns:1fr}
  .pole--audyt h3,.pole--audyt p,.pole--audyt span{grid-column:1;grid-row:auto}
  .pole--audyt p{max-width:none}
  .experts .cards2{grid-template-columns:1fr;gap:2.5rem}
  .sit__copy,.lead{max-width:46rem}
  .pillars{grid-template-columns:1fr;gap:1.5rem;margin-top:3rem}
  .ev__grid,.know{grid-template-columns:1fr}
  .swiaty{grid-template-columns:1fr}
  .stat{min-height:auto}
  .stat p{margin-top:1.8rem}
  .audit__content{top:auto;bottom:5rem;right:var(--pad);left:var(--pad);width:auto;transform:none}
  .phases{display:block;min-height:17rem}
  .phase{position:absolute;inset:0;display:block;padding:0;border:0;opacity:0;pointer-events:none;
    transform:translateY(1.8rem);transition:opacity 360ms var(--ease),transform 360ms var(--ease)}
  .phase:last-child{border-bottom:0}
  .phase.is-active{opacity:1;pointer-events:auto;transform:none}
  .phase b{display:block;margin-bottom:.9rem;padding-top:0;color:var(--blue-light)}
  .phase h3{margin:0 0 .9rem;line-height:1.12}
  .phase p,.phase.is-active p{margin:0;max-height:none;overflow:visible;opacity:1}
  .audit__idx{display:flex}
  .audit__veil{background:linear-gradient(0deg,rgba(6,8,12,.96) 0%,rgba(6,8,12,.66) 62%,rgba(6,8,12,.12) 100%)}
  .system{height:auto}
  .system__stage{position:relative;height:auto;display:block;padding:0}
  .system__grid{grid-template-columns:1fr;gap:2rem;
    padding:calc(var(--header-h) + clamp(2rem,6vw,4rem)) var(--pad) clamp(4rem,8vw,6rem)}
  /* Obracajacy sie model stoi POD tekstem w kazdym ukladzie, tak jak na komputerze.
     Do 13 wrzesnia 2026 schodzil tu nad naglowek sekcji jako osobny kwadrat. Maska
     rozmywa krawedzie kadru filmu, zeby nie bylo widac prostokata na ciemnym tle. */
  .system__obiekt{top:50%;right:-12%;left:auto;height:min(100%,56rem);width:auto;margin:0;
    transform:translateY(-50%)}
  .system__obiekt video{height:100%;width:auto;opacity:.8;
    -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);
    mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)}
  .system__zaslona{background:linear-gradient(90deg,rgba(9,11,16,.9) 0%,rgba(9,11,16,.7) 55%,rgba(9,11,16,.3) 100%)}
  .system__boczny{margin-top:1.5rem;justify-self:start;max-width:none}
  .etap{opacity:1}
  .etap p{max-height:none;opacity:1}
  .etap.is-active{border-top-color:var(--blue)}
  /* Tekst stoi NA filmie w kazdym ukladzie. Do 13 wrzesnia 2026 film schodzil tu nad
     tekst, a zapas pod naglowek zostawal bialym pasem miedzy audytem a okiem.
     Jasna zaslona od dolu trzyma kontrast ciemnego tekstu na zdjeciu. */
  .human{min-height:100svh;align-items:end}
  .human__media{object-position:70% 26%}
  .human::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(0deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.9) 36%,
      rgba(255,255,255,.5) 56%,rgba(255,255,255,0) 74%)}
  .human__content{width:auto;margin:0;justify-self:stretch;transform:none;
    padding:calc(var(--header-h) + 2rem) var(--pad) clamp(3rem,7vh,5rem)}
  .ftr__grid{grid-template-columns:1fr 1fr;gap:2.25rem}
  .end__znak{font-size:30vw}
}

@media (max-width:1180px){
  /* Dawna zawartosc tego bloku opisywala uklad desktopowy (obiekt systemu przy prawej
     krawedzi, wezsza kolumna audytu, ciasniejsza nawigacja). Ponizej 1280 px tego ukladu
     juz nie ma, wiec zostaje tylko to, co dalej ma sens: model systemu odsuwa sie
     dalej w prawo, bo kolumna tekstu zajmuje juz cala szerokosc. */
  .system__obiekt{right:-22%}
}

@media (max-width:900px){
  .phero__grid,.callout,.form,.kontakt{grid-template-columns:1fr}
  .okno--bok{position:static;margin:0 auto;
    max-width:min(24rem,calc((100svh - var(--header-h) - 2rem) * 560 / 996))}
  .phero__side{margin-top:.5rem}
  .zasady,.definicje{grid-template-columns:1fr}
  .wartosc__pasek{grid-template-columns:1fr}
  .zasada:last-child:nth-child(odd){grid-column:auto}
  /* Hero z founderami na telefonie i tablecie: zdjecie stoi na gorze jako osobny kadr
     i miekko przechodzi w ciemne tlo, tekst zaczyna sie pod twarzami. Zdjecie na cala
     wysokosc hero powiekszalo twarze i naglowek wchodzil na brody. */
  .phero--foto .phero__media{object-position:76% 50%}
  .phero--foto .phero__veil{background:linear-gradient(180deg,rgba(6,8,12,.5) 0%,rgba(6,8,12,.7) 42%,rgba(6,8,12,.9) 100%)}
  .phero--founderzy{display:block;min-height:0;padding:var(--header-h) 0 clamp(3rem,8vw,4.5rem)}
  .phero--founderzy .phero__media{position:relative;inset:auto;display:block;width:100%;height:auto;
    aspect-ratio:4/3;object-position:86% 22%;
    -webkit-mask-image:linear-gradient(180deg,#000 66%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 66%,transparent 100%)}
  .phero--founderzy .phero__veil{display:none}
  .phero--founderzy .phero__grid{grid-template-columns:minmax(0,1fr);margin-top:-2.5rem;padding:0 var(--pad)}
  .phero--founderzy h1{font-size:clamp(2rem,8vw,3rem)}
}

@media (max-width:640px){
  /* Do 6 wrzesnia 2026 staly tu dwie reguly, ktore dzis nie maja racji bytu:
     .open{height:420svh} (scena otwarcia idzie za zegarem, nie za przewijaniem) oraz
     .cue{display:none} (wskaznik przewijania byl gaszony akurat na telefonie, czyli tam,
     gdzie jest najbardziej potrzebny). Decyzja wlascicielki z 6 wrzesnia 2026: wskaznik
     stoi na wszystkich szerokosciach, w kazdej sekcji sterowanej przewijaniem. */
  .msg{width:calc(100vw - 2.2rem);font-size:clamp(1.75rem,9.5vw,2.9rem)}
  .hero{width:calc(100vw - var(--pad)*2);bottom:5rem}
  .hero__actions{flex-direction:column;align-items:stretch;gap:.6rem}
  .hero__actions .btn{width:100%}
  /* dwa przyciski jezyka maja zostac w jednym wierszu takze na waskim telefonie */
  .wybor__btn{min-width:9rem;padding:.9rem 1.2rem}
  .wybor__grupa{gap:.7rem}
  /* hero zajmuje cala szerokosc, wiec zaslona idzie od dolu, nie z lewej strony kadru */
  .open__shade{background:linear-gradient(0deg,rgba(6,8,12,.92) 0%,rgba(6,8,12,.6) 55%,transparent 85%)}
  .pola{grid-template-columns:1fr}
  .pole--audyt{grid-column:span 1}
  .system__obiekt{left:50%;right:auto;height:min(72%,36rem);transform:translate(-50%,-50%)}
  .system__obiekt video{opacity:.55}
  .kalk--okno{left:0;right:0;bottom:0;width:100%;max-height:85vh}
  .kalk-zakladka{top:auto;bottom:1rem;padding:.8rem 1rem;min-height:44px;writing-mode:horizontal-tb;transform:none}
  .phero--founderzy .phero__media{object-position:88% 20%}
  .phero--founderzy h1{font-size:clamp(1.75rem,7.4vw,2.4rem)}
  .system__zaslona{background:linear-gradient(180deg,rgba(9,11,16,.72) 0%,rgba(9,11,16,.5) 50%,rgba(9,11,16,.78) 100%)}
  .expert{grid-template-columns:1fr;gap:1.1rem}
  .expert__photo img{height:340px;object-position:70% 8%}
  .ftr__grid{grid-template-columns:1fr}
  .end{padding:6rem var(--pad)}
  .end__content{width:100%}
  .end__actions{flex-direction:column;align-items:stretch}
  .end__znak{font-size:34vw;right:-20px;opacity:.7}
}

@media (max-width:1280px) and (orientation:portrait){
  /* Waski ekran w pionie: dlugi tekst sekcji ludzkiej potrafi zajac cala jej wysokosc
     i naglowek trafia wtedy na najciemniejsza czesc zdjecia (320 px szerokosci).
     Jasna zaslona idzie wiec za samym tekstem i zaczyna sie tam, gdzie tekst sie
     zaczyna, a nad nim zdjecie zostaje czyste. Poziomu nie dotyczy: tam tekst stoi
     obok oka i zaslona od dolu wystarcza. */
  .human__content{background:linear-gradient(180deg,rgba(255,255,255,0) 0,
    rgba(255,255,255,.88) calc(var(--header-h) + 1.5rem),rgba(255,255,255,.94) 100%)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  .end__swiatla span{animation:none;opacity:.5}
  .open{height:100svh}
  .open__door,.open__signal,.open__burst,.mark,.msg{display:none}
  .hero{opacity:1;transform:none}
  .audit,.system{height:auto}
  .system__stage{position:relative;height:auto;display:block}
  .etap{opacity:1}
  .etap p{max-height:none;opacity:1}
  .audit__stage{position:relative;height:auto;min-height:0;overflow:visible;
    padding:calc(var(--header-h) + 2rem) var(--pad) 3rem}
  .audit__content{position:static;top:auto;right:auto;bottom:auto;left:auto;width:auto;transform:none}
  .audit__media{transform:none!important}
  .phases{position:static;display:grid;gap:1.4rem;min-height:0}
  .phase{position:relative;opacity:1;pointer-events:auto;transform:none}
  .phase p{max-height:none;opacity:1}
  .audit__idx{display:none}
  .reveal{opacity:1;transform:none}
  .cue i{animation:none}
  /* ekran wyboru zostaje, bo jezyk trzeba wybrac takze przy ograniczonym ruchu.
     Nie rusza sie na nim nic: puls stoi na klatce spoczynku, kreska swiatla nie wedruje,
     a po kliknieciu hero pokazuje sie natychmiast. */
  .wybor{transition:none}
  .wybor__btn::before{animation:none}
  .wybor__swiatlo{transition:none}
  .expert__photo img{transform:none!important;opacity:1!important}
  .expert__photo::after{transform:scaleX(1)!important}
}

@media (max-height:520px){
  /* Niskie okno: telefon w poziomie oraz powiekszenie 200 procent. Sceny przewijane
     rozkladaja sie na zwykle sekcje, tak samo jak przy ograniczonym ruchu. */
  .open{height:auto}
  .open__stage{position:relative;height:auto;min-height:100svh;overflow:hidden}
  .open__door,.open__signal,.open__burst,.mark,.msg,.cue{display:none}
  /* app.js pisze krycie i widocznosc hero prosto w styl elementu, wiec tu musi byc !important */
  .hero{position:relative;left:auto;bottom:auto;width:auto;
    opacity:1 !important;visibility:visible !important;transform:none;
    padding:calc(var(--header-h) + 1.5rem) var(--pad) 2.5rem}
  .audit{height:auto}
  .audit__stage{position:relative;height:auto;min-height:0;overflow:visible;
    padding:calc(var(--header-h) + 2rem) var(--pad) 3rem}
  .audit__content{position:static;top:auto;right:auto;bottom:auto;left:auto;width:auto;transform:none}
  .audit__media{transform:none !important}
  .phases{position:static;display:grid;gap:1.4rem;min-height:0}
  .phase{position:relative;opacity:1;pointer-events:auto;transform:none}
  .phase p{max-height:none;opacity:1}
  .audit__idx{display:none}
  .system{height:auto}
  /* ten sam zapas na przyklejony naglowek co .audit__stage: obie rozlozone sceny
     maja wygladac tak samo */
  .system__stage{position:relative;height:auto;display:block;
    padding:calc(var(--header-h) + 2rem) var(--pad) 3rem}
  .system__grid{padding:0}
  /* powtorzone z bloku max-width:1280px, bo niskie okno moze byc szersze niz 1280 px
     (powiekszenie 200 procent): model systemu zostaje tlem pod tekstem */
  .system__obiekt{position:absolute;top:50%;right:-6%;left:auto;height:100%;width:auto;margin:0;
    transform:translateY(-50%)}
  .system__obiekt video{height:100%;width:auto}
  .etap{opacity:1}
  .etap p{max-height:none;opacity:1}
  /* zapas pod naglowek niesie .human__content z bloku 1280, film lezy pod caloscia */
  .human{min-height:0}
  .okno--bok{position:static}
  /* Ekran wyboru jezyka zostaje takze przy niskim oknie, tylko sciesnia sie tak, zeby
     znak i oba przyciski zmiescily sie bez przewijania. Scena otwarcia jest tu rozlozona
     (znak, napisy i drzwi wyzej maja display:none), wiec app.js po kliknieciu pokazuje
     hero od razu, bez choreografii. */
  .wybor__srodek{gap:1.3rem}
  .wybor__znak{height:2.6rem}
  .wybor__btn{min-height:2.9rem;padding:.6rem 1.4rem}
  .wybor__grupa{padding-bottom:1rem}
}

/* @page dziala wylacznie przy drukowaniu, wiec stoi na poziomie pliku: zagniezdzone
   w @media print bywa ignorowane przez starsze silniki i wydruk dostaje domyslne marginesy */
@page{margin:14mm}

@media print{
  /* Klient drukuje oferte dla wspolnika: papier ma byc bialy, tekst atramentowy,
     sceny przewijane maja sie rozlozyc na zwykle sekcje. */
  html,body{background:var(--white);color:var(--ink);overflow:visible}

  .kalk--okno,.kalk-zakladka,.hdr,.nav,.menu-toggle,.skip-link,.cue,.wybor,.audit__idx,.end__swiatla,.end__znak,
  .open__door,.open__signal,.open__burst,.open__shade,.mark,.msg,
  .audit__veil,.phero__veil,.system__poswiata,.system__zaslona{display:none !important}
  video,.open__media,.human__media,.system__obiekt,.audit__media,.phero__media,
  .end__city{display:none !important}
  .end::after,.okno::after,.okno--bok::after,.pole--audyt::after{display:none}

  .open__stage,.audit__stage,.system__stage,.okno--bok,.sec--dwie > .sec__head{position:static !important}
  .open,.audit,.system,.human,.phero{height:auto !important;min-height:0 !important}
  .open__stage,.audit__stage,.system__stage{height:auto !important;min-height:0 !important;
    overflow:visible !important;display:block !important;padding:0}
  .hero,.audit__content,.human__content,.okno figcaption{position:static !important;
    transform:none !important;opacity:1 !important;visibility:visible !important;
    width:auto !important;max-width:none !important;inset:auto !important;margin-left:0}
  .phases{position:static;display:grid;gap:1rem;min-height:0}
  .phase{position:static;opacity:1;transform:none;pointer-events:auto}
  .expert__photo img{opacity:1 !important;transform:none !important}
  .expert__photo::after{transform:scaleX(1) !important}
  .etap{opacity:1}
  .etap p{max-height:none;opacity:1}
  .reveal{opacity:1 !important;transform:none !important}
  .system__grid,.system__stage{grid-template-columns:1fr;padding:0}

  .open,.audit,.system,.ev,.end,.phero,.ftr,.sec--dark,.pole--audyt,.stat,.stat--focus,
  .okno,.callout,.form__ok{background:var(--white) !important;color:var(--ink) !important}
  .hero h1,.hero__lead,.hero__note,.ev .lead,.audit .lead,.end .lead,.sec--dark .lead,
  .stat p,.stat cite,.stat a,.stat--focus p,.stat--focus cite,.stat--focus a,.ev__close,
  .phase p,.phase h3,.etap p,.etap h3,.system__boczny,.phero__lead,.phero__side,
  .pole--audyt p,.pole--audyt span,.end__content h2,.end__content > p,.end__note,
  .sec--dark .sec__head p,.sec--dark .checks span,.sec--dark .colgrid p,.sec--dark .step p,
  .note-dim,.sec--dark .note-dim,.okno figcaption,
  .ftr,.ftr a,.ftr h3,.ftr__firm b,.ftr__bottom{color:var(--ink) !important}
  .kicker,.sec--dark .kicker,.ev .kicker,.audit .kicker,.end .kicker,.hero .kicker,
  .phase b,.etap b,.step b,.sec--dark .step b,.sec--dark .know em,.hero h1 em,.phero h1 em,
  .okno figcaption b,.tlink,.tlink--light,.link-arrow,.pole span,.swiat span,
  .cardgrid span{color:var(--blue) !important}

  .etap,.sec--dark .colgrid article,.sec--dark .step{border-color:#DFE3EA}
  .stat{min-height:0;border:1px solid #DFE3EA}
  .btn{min-height:0;padding:.45rem .8rem;background:none !important;color:var(--ink) !important;
    border:1px solid var(--ink) !important;transform:none !important}
  .ftr__logo{content:url("assets/nl-logo-ciemne.png")}

  .sec,.phero,.end{padding:1.4rem 0}
  .ftr{padding:1.4rem 0 0}
  h1,h2,h3{break-after:avoid-page;page-break-after:avoid}
  .pole,.swiat,.stat,.step,.expert,.cardgrid > *,.colgrid article,.faq details,
  .callout,.deflist div{break-inside:avoid;page-break-inside:avoid}
  .faq details::details-content{content-visibility:visible;block-size:auto}

  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;font-weight:400;
    letter-spacing:0;word-break:break-all}
}