/* ═══════════════════════════════════════════════════════════════
   ADSY — style strony  ·  v5 (uniwersalna)
   ───────────────────────────────────────────────────────────────
   Wyglad → Dostosuj → Dodatkowy CSS  (albo plik w motywie potomnym)

   · kolory   — z globalnej palety Kadence
   · czcionki — z ustawien typografii motywu
   · odstepy  — zmienne --sec-y i --wrap-w na gorze pliku

   WAZNE: cala tresc strony musi byc owinieta w element z klasa "jsz".
   Najprosciej: blok Grupa wokol wszystkiego → Zaawansowane →
   Dodatkowa klasa CSS → jsz
   ═══════════════════════════════════════════════════════════════ */

/* ============================================================
   PALETA — rampa zieleni z palety Kadence + jeden ciepły neutral
   ============================================================ */
:root{
  /* ─── KOLORY z globalnej palety Kadence ───────────────────────
     Sloty inne u Ciebie? Zmień numery TYLKO tutaj — przemaluje calosc.
     Wartosc po przecinku to zapas, gdy palety nie ma.              */
  /* Z PALETY — sloty, ktore faktycznie odpowiadaja projektowi */
  --forest: var(--global-palette1, #063d28);   /* ciemna zielen  */
  --moss:   var(--global-palette2, #02603d);   /* zielen posrednia */
  --stone:  var(--global-palette6, #e2e5e2);   /* linie, obramowania */
  --paper:  var(--global-palette8, #f6f7f5);   /* jasne tlo sekcji */
  --white:  var(--global-palette9, #ffffff);

  /* WLASNE — paleta serwisu ich nie zawiera, wiec zostaja wpisane wprost.
     Gdybys kiedys dodal jasna zielen do palety Kadence, podmien --spring
     na var(--global-paletteN). Slotow 3,4,5 NIE uzywamy: u Ciebie to
     granaty i ciemna szarosc, ktore rozjezdzaja sie z zielonym projektem. */
  --spring: #48f093;   /* akcent — tylko na ciemnym tle */
  --ink:    #111a16;   /* tekst glowny  */
  --gray:   #5b625f;   /* tekst poboczny */

  /* odcienie pochodne — zapas; nizej liczone z palety */
  --void:#03150e; --emerald:#0e8a55; --mint:#eaf6ef; --sand:#e8dcc2;

  /* ─── CZCIONKI ────────────────────────────────────────────────
     Kroj dziedziczony z motywu (Dostosuj → Typografia).
     --hand to akcent odreczny; wpisz inherit, zeby go wylaczyc.    */
  --hand:'Caveat',cursive;

  /* ─── ODSTEPY — jedno miejsce na caly serwis ──────────────────*/
  --sec-y:       clamp(58px, 7.5vw, 118px);
  --sec-y-tight: clamp(30px, 4vw, 58px);
  --wrap-w:      min(1240px, 91vw);

  --pill:200px;
  --soft:cubic-bezier(.05,.2,.1,1);
  --out:cubic-bezier(.24,1,.3,1);
}@supports (color: color-mix(in srgb, red, blue)){:root{
    --void:    color-mix(in srgb, var(--forest) 74%, #000);
    --emerald: color-mix(in srgb, var(--forest) 52%, var(--spring));
    --mint:    color-mix(in srgb, var(--forest) 8%,  #fff);
  }
}.jsz *,.jsz *::before,.jsz *::after{box-sizing:border-box}html{scroll-behavior:smooth}.jsz{margin:0;background:#fff;color:var(--ink);font-family:inherit;font-size:17px;line-height:1.6;letter-spacing:-.02em;-webkit-font-smoothing:antialiased;overflow-x:hidden}.jsz h1,.jsz h2,.jsz h3,.jsz h4{margin:0;letter-spacing:-.04em;line-height:1.02;font-weight:800}.jsz h1{font-size:clamp(2.9rem,7.6vw,82px)}.jsz h2{font-size:clamp(2.1rem,5.2vw,58px);line-height:1.06}.jsz h3{font-size:clamp(1.15rem,1.7vw,24px);letter-spacing:-.03em;line-height:1.22;font-weight:700}.jsz h4{font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.3}.jsz p{margin:0 0 1em}.jsz a{color:inherit}.jsz img{max-width:100%;display:block}.jsz .wrap{width:var(--wrap-w);margin-inline:auto}.jsz .narrow{width:min(860px,91vw);margin-inline:auto}.jsz .sec{padding:var(--sec-y) 0;position:relative}.jsz .sec--paper{background:var(--paper)}.jsz .sec--mint{background:var(--mint)}.jsz .sec--void{background:var(--void);color:#e6f2ec}.jsz .sec--forest{background:var(--forest);color:#e6f2ec}.jsz .lead{font-size:clamp(1.05rem,1.7vw,21px);color:var(--gray);font-weight:400;max-width:58ch;line-height:1.55}.jsz .sec--void .lead,.jsz .sec--forest .lead{color:rgba(230,242,236,.7)}.jsz .eyebrow{display:inline-flex;align-items:center;gap:11px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--moss);margin-bottom:22px}.jsz .eyebrow::before{content:'';width:28px;height:2px;background:currentColor}.jsz .sec--void .eyebrow,.jsz .sec--forest .eyebrow{color:var(--spring)}.jsz .hand{font-family:var(--hand);font-size:1.35em;line-height:.9;color:var(--moss);display:inline-block}.jsz .sec--void .hand,.jsz .sec--forest .hand{color:var(--spring)}/* pasek postępu czytania */
.jsz .prog{position:fixed;top:0;left:0;height:3px;width:0;background:var(--spring);z-index:200;transition:width .1s linear}/* przyciski */
.jsz .btn{display:inline-flex;align-items:center;gap:12px;padding:18px 36px;border-radius:var(--pill);border:2px solid transparent;background:var(--forest);color:#fff;font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;letter-spacing:-.01em;transition:transform .4s var(--out),background .4s var(--out),color .4s var(--out),border-color .4s var(--out)}.jsz .btn:hover{transform:translateY(-4px);background:var(--moss)}.jsz .btn__dot{width:9px;height:9px;border-radius:50%;background:var(--spring);flex:none}.jsz .btn--ghost{background:transparent;color:var(--ink);border-color:var(--stone)}.jsz .btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}.jsz .btn--spring{background:var(--spring);color:var(--forest)}.jsz .btn--spring:hover{background:#fff;color:var(--forest)}.jsz .btn--spring .btn__dot{background:var(--forest)}.jsz .btn--sm{padding:13px 26px;font-size:15px}.jsz .chip{display:inline-block;padding:8px 17px;border-radius:var(--pill);background:var(--mint);color:var(--moss);font-size:13.5px;font-weight:700}.jsz .sec--void .chip,.jsz .sec--forest .chip{background:rgba(72,240,147,.15);color:var(--spring)}.jsz .ul-link{position:relative;text-decoration:none;font-weight:600;display:inline-block;padding-bottom:2px}.jsz .ul-link::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;background:currentColor;transform:scaleX(0);transform-origin:right center;transition:transform .45s var(--out)}.jsz .ul-link:hover::after{transform:scaleX(1);transform-origin:left center}/* header */
.jsz .hdr{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--stone)}.jsz .hdr__in{display:flex;align-items:center;justify-content:space-between;height:78px;gap:26px}.jsz .hdr__logo{font-weight:800;letter-spacing:-.06em;font-size:21px;text-decoration:none;white-space:nowrap}.jsz .hdr__logo span{color:var(--moss)}.jsz .hdr__nav{display:flex;gap:30px;font-size:15px}@media (max-width:1040px){.jsz .hdr__nav{display:none}}.jsz .hdr__cta-long{display:inline}.jsz .hdr__cta-short{display:none}@media (max-width:620px){.jsz .hdr__in{height:62px;gap:12px}.jsz .hdr__logo{font-size:18px}.jsz .hdr .btn{padding:11px 20px;font-size:14px;gap:9px}.jsz .hdr__cta-long{display:none}.jsz .hdr__cta-short{display:inline}
}/* plamy */
.jsz .blobs{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;overflow:clip}.jsz .blob{position:absolute;width:46vw;height:46vw;max-width:640px;max-height:640px;border-radius:50%;filter:blur(90px);will-change:transform,border-radius}.jsz .blob--a{background:var(--emerald);opacity:.42;top:-18%;left:-10%;animation:bl1 24s ease-in-out infinite}.jsz .blob--b{background:var(--sand);opacity:.5;top:6%;right:-16%;animation:bl2 30s ease-in-out infinite}.jsz .blob--c{background:var(--moss);opacity:.34;bottom:-30%;left:32%;animation:bl1 36s ease-in-out infinite reverse}@keyframes bl1{0%,100%{transform:translate(0,0) scale(1);border-radius:52% 48% 40% 60%/56% 44% 56% 44%}50%{transform:translate(7%,9%) scale(1.15);border-radius:38% 62% 58% 42%/42% 58% 42% 58%}}@keyframes bl2{0%,100%{transform:translate(0,0) scale(1.06);border-radius:44% 56% 62% 38%/48% 52% 48% 52%}50%{transform:translate(-9%,7%) scale(.9);border-radius:60% 40% 36% 64%/60% 40% 60% 40%}}/* ============================================================
   HERO
   ============================================================ */
.jsz .hero{position:relative;padding:clamp(44px,5.5vw,88px) 0 clamp(60px,7.5vw,112px);overflow:hidden;overflow:clip}.jsz .hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,5vw,66px);align-items:center}@media (max-width:980px){.jsz .hero__grid{grid-template-columns:1fr}}.jsz .hero h1{margin-bottom:30px}.jsz .hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}.jsz .hero__note{margin-top:40px;padding-top:24px;border-top:1px solid var(--stone);font-size:16px;color:var(--gray);max-width:44ch}.jsz .scribble{position:relative;display:inline-block;font-family:var(--hand);font-weight:600;padding:0 .04em;color:var(--moss)}.jsz .scribble svg{position:absolute;left:-4%;bottom:-.16em;width:108%;height:.36em;overflow:visible;pointer-events:none}.jsz .scribble path{fill:none;stroke:var(--moss);stroke-width:7;stroke-linecap:round;stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 1.1s var(--out) .6s}.jsz .is-in .scribble path{stroke-dashoffset:0}.jsz .hero__media{position:relative}.jsz .hero__frame{position:relative;overflow:hidden;overflow:clip;border-radius:26px}.jsz .hero__frame img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 18%}@media (max-width:720px){.jsz .hero__frame img{aspect-ratio:1/1;object-position:center 12%}.jsz .hero__frame{border-radius:20px}
}.jsz .float{position:absolute;z-index:6;background:#fff;border-radius:16px;padding:15px 19px;box-shadow:0 20px 50px rgba(6,61,40,.18);font-size:14px;font-weight:700;line-height:1.3;display:flex;align-items:center;gap:13px;white-space:nowrap}.jsz .float small{display:block;font-weight:500;color:var(--gray);font-size:12.5px}.jsz .float__ic{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:15px;font-weight:800;background:var(--mint);color:var(--moss)}.jsz .float--a{left:-8%;top:13%}.jsz .float--b{right:-6%;bottom:12%}@media (max-width:1180px){.jsz .float--a{left:-2%}.jsz .float--b{right:-2%}}@media (max-width:600px){.jsz .float{display:none}}/* ============================================================
   MARQUEE
   ============================================================ */
.jsz .marq{overflow:hidden;overflow:clip;padding:30px 0;background:var(--void);color:#e6f2ec}.jsz .marq__track{display:flex;width:max-content;animation:marq 28s linear infinite}.jsz .marq:hover .marq__track{animation-play-state:paused}.jsz .marq__set{display:flex;align-items:center;gap:46px;padding-right:46px}.jsz .marq__set span{font-size:clamp(1.5rem,4.6vw,52px);font-weight:800;letter-spacing:-.045em;white-space:nowrap}/* kontur tylko tam, gdzie litery są dość duże, żeby go udźwignąć */
.jsz @media (min-width:900px){.jsz .marq__set span:nth-child(4n+3){-webkit-text-stroke:1.6px var(--spring);color:transparent}
}@media (max-width:899px){.jsz .marq__set span:nth-child(4n+3){color:var(--spring)}.jsz .marq__set{gap:30px;padding-right:30px}
}.jsz .marq__dot{width:11px;height:11px;border-radius:50%;background:var(--spring);flex:none}@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}/* ============================================================
   LICZBY
   ============================================================ */
.jsz .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--stone)}@media (max-width:820px){.jsz .stats{grid-template-columns:repeat(2,1fr)}}.jsz .stat{padding:38px 26px 0 0;position:relative}.jsz .stat::before{content:'';position:absolute;top:-1px;left:0;width:0;height:3px;background:var(--moss);transition:width .9s var(--out)}.jsz .is-in .stat::before{width:calc(100% - 20px)}.jsz .is-in .stat:nth-child(2)::before{transition-delay:.12s}.jsz .is-in .stat:nth-child(3)::before{transition-delay:.24s}.jsz .is-in .stat:nth-child(4)::before{transition-delay:.36s}.jsz .stat b{display:block;font-size:clamp(2.6rem,6vw,68px);font-weight:800;letter-spacing:-.055em;line-height:1;color:var(--forest)}.jsz .stat b i{font-style:normal;font-size:.42em;letter-spacing:-.02em;margin-left:4px;color:var(--gray)}.jsz .stat span{display:block;margin-top:12px;font-size:15px;color:var(--gray);max-width:22ch}/* ============================================================
   MANIFEST — pełnoekranowy pas ze zdjęciem
   ============================================================ */
.jsz .manifest{position:relative;overflow:hidden;overflow:clip;background:var(--void);color:#fff;isolation:isolate}.jsz .manifest__bg{position:absolute;inset:0;z-index:1;opacity:.34}.jsz .manifest__bg img{width:100%;height:120%;object-fit:cover;object-position:center 22%}.jsz .manifest__bg::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,var(--void) 8%,rgba(3,21,14,.55) 55%,rgba(3,21,14,.9) 100%)}.jsz .manifest__in{position:relative;z-index:3;padding:clamp(90px,13vw,190px) 0}.jsz .manifest q{display:block;quotes:none;font-size:clamp(1.9rem,4.6vw,52px);font-weight:800;letter-spacing:-.04em;line-height:1.1;max-width:19ch}.jsz .manifest__mark{font-family:var(--hand);font-size:clamp(4rem,9vw,110px);line-height:.6;color:var(--spring);display:block;margin-bottom:10px}.jsz .manifest__who{margin-top:34px;display:flex;align-items:center;gap:14px;font-size:15px;color:rgba(255,255,255,.62)}.jsz .manifest__who img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:center 18%}/* ============================================================
   ZDJĘCIA W NAGŁÓWKU
   ============================================================ */
.jsz .inline-img{display:inline-block;vertical-align:middle;width:.86em;height:.86em;border-radius:50%;object-fit:cover;object-position:center 20%;margin:0 .06em;transform:scale(0);opacity:0;transition:transform .75s var(--out),opacity .5s ease}.jsz .is-in .inline-img{transform:scale(1);opacity:1}.jsz .is-in .inline-img:nth-of-type(2){transition-delay:.15s}.jsz .is-in .inline-img:nth-of-type(3){transition-delay:.3s}/* ============================================================
   BLOKI KOLORU
   ============================================================ */
.jsz .blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px}@media (max-width:900px){.jsz .blocks{grid-template-columns:1fr}}.jsz .block{
  position:relative;overflow:hidden;overflow:clip;
  border-radius:24px;padding:clamp(28px,3.4vw,44px);
  display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .6s var(--soft),box-shadow .6s var(--soft);
}@media (min-width:901px){.jsz .block{min-height:340px} }.jsz .block--1{background:var(--forest);color:#e6f2ec}.jsz .block--2{background:var(--sand);color:var(--ink)}.jsz .block--3{background:var(--emerald);color:#fff}/* rozjaśnienie sterowane osobno, żeby dało się je odpalić i hoverem, i scrollem */
.jsz .block::before{
  content:'';position:absolute;inset:0;z-index:0;opacity:0;
  background:radial-gradient(120% 100% at 20% 0%,rgba(255,255,255,.22),transparent 62%);
  transition:opacity .6s var(--soft);
}.jsz .block > *{position:relative;z-index:1}.jsz .block__n{
  display:flex;align-items:center;gap:12px;
  font-size:13px;font-weight:800;letter-spacing:.16em;opacity:.55;margin-bottom:auto;
  transition:opacity .5s var(--soft);
}.jsz .block__n::after{
  content:'';height:2px;width:0;background:currentColor;opacity:.5;
  transition:width .7s var(--out);
}.jsz .block h3{margin:34px 0 14px;font-size:clamp(1.3rem,2vw,28px)}.jsz .block p{margin:0;font-size:15.5px;opacity:.82;line-height:1.55}/* stan aktywny — hover na desktopie, środek ekranu na dotyku */
.jsz .block.is-live{transform:translateY(-9px);box-shadow:0 30px 65px rgba(6,61,40,.22)}.jsz .block.is-live::before{opacity:1}.jsz .block.is-live .block__n{opacity:.95}.jsz .block.is-live .block__n::after{width:34px}/* ============================================================
   DIAGRAM ARCHITEKTURY — pełna sekcja
   ============================================================ */
.jsz .arch{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(34px,5vw,80px);align-items:center;margin-top:56px}@media (max-width:940px){.jsz .arch{grid-template-columns:1fr}}.jsz .arch__box{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.13);border-radius:24px;padding:clamp(24px,3vw,36px)}.jsz .arch__box{position:relative;background:#fff;border:1px solid var(--stone);border-radius:24px;padding:clamp(24px,3vw,36px);box-shadow:0 26px 60px rgba(6,61,40,.08)}.jsz .node{
  display:block;width:100%;text-align:left;cursor:pointer;font-family:inherit;
  font-size:15px;font-weight:700;letter-spacing:-.025em;padding:13px 18px;border-radius:13px;
  border:1px solid var(--stone);background:var(--paper);color:var(--ink);
  transition:background .3s var(--out),color .3s var(--out),border-color .3s var(--out),transform .3s var(--out);
}.jsz .node:hover,.jsz .node.is-on{background:var(--forest);color:#fff;border-color:var(--forest);transform:translateX(5px)}.jsz .node:focus-visible{outline:3px solid var(--moss);outline-offset:2px}.jsz .node--root{background:var(--forest);color:#fff;border-color:var(--forest);font-size:16px}.jsz .node--root:hover,.jsz .node--root.is-on{background:var(--emerald);border-color:var(--emerald)}.jsz .arch__tree{display:grid;gap:10px}.jsz .arch__branch{display:grid;gap:10px;padding-left:24px;margin-left:11px;border-left:1px solid var(--stone)}.jsz .arch__branch>*{position:relative}.jsz .arch__branch>*::before{content:'';position:absolute;left:-24px;top:50%;width:17px;height:1px;background:var(--stone)}.jsz .arch__sub{padding-left:24px;margin-left:11px;border-left:1px dashed #bcd7c7;display:grid;gap:10px}.jsz .arch__sub .node{font-size:14px;font-weight:600;padding:10px 16px}/* rola pojawia się W ŚRODKU elementu — na mobile nie trzeba jej nigdzie szukać */
.jsz .node__role{
  display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .45s var(--out),opacity .3s ease,margin-top .45s var(--out);
  margin-top:0;
}.jsz .node__role > i{overflow:hidden;overflow:clip;font-style:normal;font-size:13.5px;font-weight:500;letter-spacing:-.01em;line-height:1.4;display:block}.jsz .node.is-on .node__role{grid-template-rows:1fr;opacity:.82;margin-top:7px}/* chipy przypięte do ramki */
.jsz .arch__chip{
  position:absolute;z-index:4;padding:9px 16px;border-radius:var(--pill);
  font-size:12.5px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;
  background:var(--forest);color:#fff;box-shadow:0 12px 30px rgba(6,61,40,.22);
}.jsz .arch__chip--a{top:-15px;right:18px}.jsz .arch__chip--b{bottom:-15px;left:18px;background:var(--emerald)}@media (max-width:420px){.jsz .arch__chip{font-size:11.5px;padding:8px 13px} }/* ============================================================
   WARIANTY — karty hover_desc
   ============================================================ */
.jsz .variants{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:56px}@media (max-width:820px){.jsz .variants{grid-template-columns:1fr}}.jsz .vcard{position:relative;display:flex;min-height:380px;padding:clamp(28px,3.2vw,42px);overflow:hidden;overflow:clip;border-radius:24px;isolation:isolate;color:#fff;text-decoration:none;transform:translateY(0);box-shadow:0 0 0 rgba(0,0,0,0);transition:transform .65s var(--soft),box-shadow .65s var(--soft)}.jsz .vcard.is-on{transform:translateY(-12px);box-shadow:0 30px 65px rgba(3,21,14,.32)}.jsz .vcard__bg{position:absolute;inset:0;z-index:1;transform:scale(1);transition:transform 1s ease}.jsz .vcard.is-on .vcard__bg{transform:scale(1.16);transition:transform 9s cubic-bezier(.1,.2,.7,1)}.jsz .vcard__bg::before,.jsz .vcard__bg::after{content:'';position:absolute;inset:0;z-index:2;transition:opacity .65s var(--soft)}.jsz .vcard__bg::before{
  background:
    radial-gradient(circle,rgba(255,255,255,.075) 1.4px,transparent 1.4px) 0 0/26px 26px,
    radial-gradient(120% 110% at 18% 8%,#0a5236 0%,#063d28 55%,#03150e 100%);
  opacity:1;
}.jsz .vcard__bg::after{
  background:
    radial-gradient(circle,rgba(255,255,255,.1) 1.4px,transparent 1.4px) 0 0/26px 26px,
    radial-gradient(120% 110% at 18% 8%,#12a86c 0%,#0e8a55 48%,#02603d 100%);
  opacity:0;
}.jsz .vcard.is-on .vcard__bg::before{opacity:0}.jsz .vcard.is-on .vcard__bg::after{opacity:1}.jsz .vcard__in{position:relative;z-index:10;width:100%;align-self:flex-end}.jsz .vcard__head{transform:translateY(0);transition:transform .65s var(--soft)}.jsz .vcard.is-on .vcard__head{transform:translateY(calc(-1 * var(--shift,0px)))}.jsz .vcard__ic{width:46px;height:46px;margin-bottom:20px;color:var(--spring)}.jsz .vcard h3{color:#fff;font-size:clamp(1.35rem,2.2vw,30px)}.jsz .vcard__desc{position:absolute;left:0;bottom:0;width:100%;margin:0;opacity:0;transform:translateY(22px);transition:opacity .18s var(--soft),transform .18s var(--soft)}.jsz .vcard__desc p{margin:0;font-size:16px;line-height:1.5;color:rgba(255,255,255,.85)}.jsz .vcard.is-on .vcard__desc{opacity:1;transform:translateY(0);transition:opacity .65s var(--soft) .15s,transform .65s var(--soft) .15s}.jsz .vcard__more{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:13.5px;font-weight:700;color:var(--spring);letter-spacing:.03em}.jsz .vcard__more::after{content:'→';transition:transform .4s var(--out)}.jsz .vcard.is-on .vcard__more::after{transform:translateX(7px)}/*
   Na dotyku zamiast chowania opisu pod gestem — karuzela ze snapem.
   Aktywna jest karta, która akurat jest wyśrodkowana, więc pełna animacja
   (zoom tła, wysuw opisu, unos karty) odsłania się sama przy przesuwaniu.
*/
.jsz .variants__hint{display:none}@media (max-width:820px){.jsz .variants{
    display:flex;grid-template-columns:none;gap:14px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /*
       overflow-x:auto wymusza przycinanie w pionie, więc unos karty (-12px)
       i cień (65px rozmycia) muszą zmieścić się WEWNĄTRZ scrollera.
       Stąd hojny padding zamiast walki z overflow.
    */
    padding:24px 4px 62px;
    margin-top:-24px;margin-bottom:-40px;
  }.jsz .variants::-webkit-scrollbar{display:none}.jsz .vcard{flex:0 0 84%;scroll-snap-align:center;min-height:430px}.jsz .vcard.is-on{transform:translateY(-7px);box-shadow:0 18px 42px rgba(3,21,14,.3)}.jsz .vcard:active{transform:scale(.985)}.jsz .variants__hint{
    display:flex;align-items:center;gap:9px;margin-top:34px;
    font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--moss);
  }.jsz .variants__hint::after{content:'→';animation:nudge 1.6s ease-in-out infinite}
}@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}/* ============================================================
   PROCES
   ============================================================ */
.jsz .steps{display:grid;grid-template-columns:repeat(5,1fr);margin-top:56px;border-top:2px solid var(--stone)}@media (max-width:980px){.jsz .steps{grid-template-columns:repeat(2,1fr)}}@media (max-width:560px){.jsz .steps{grid-template-columns:1fr}}.jsz .step{position:relative;padding:34px 24px 0 0}.jsz .step::before{content:'';position:absolute;top:-2px;left:0;width:0;height:3px;background:var(--moss);transition:width .85s var(--out)}.jsz .is-in .step::before{width:calc(100% - 14px)}.jsz .is-in .step:nth-child(2)::before{transition-delay:.12s}.jsz .is-in .step:nth-child(3)::before{transition-delay:.24s}.jsz .is-in .step:nth-child(4)::before{transition-delay:.36s}.jsz .is-in .step:nth-child(5)::before{transition-delay:.48s}.jsz .step__n{font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--moss);display:block;margin-bottom:14px}.jsz .step p{margin:9px 0 0;font-size:15px;color:var(--gray)}/* ============================================================
   KALKULATOR WYCENY
   ============================================================ */
.jsz .calc{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:56px}@media (max-width:900px){.jsz .calc{grid-template-columns:1fr}}.jsz .calc__panel{background:var(--void);color:#e6f2ec;border-radius:26px;padding:clamp(32px,4vw,52px);position:relative;overflow:hidden;overflow:clip}.jsz .calc__val{font-size:clamp(3rem,8vw,90px);font-weight:800;letter-spacing:-.06em;line-height:1;margin:18px 0 6px;color:var(--spring);font-variant-numeric:tabular-nums}.jsz .calc__val small{font-size:.26em;font-weight:600;letter-spacing:-.02em;color:rgba(230,242,236,.6);margin-left:6px}.jsz .calc__row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;font-size:15px;padding:13px 0;border-top:1px solid rgba(255,255,255,.12)}.jsz .calc__row b{font-weight:700;white-space:nowrap}.jsz .calc__row span{color:rgba(230,242,236,.62)}.jsz .calc__ctrl{background:var(--paper);border:1px solid var(--stone);border-radius:26px;padding:clamp(32px,4vw,52px);display:flex;flex-direction:column;justify-content:center}.jsz .calc__count{font-size:clamp(2.4rem,5.5vw,58px);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--forest);font-variant-numeric:tabular-nums}.jsz .calc__count span{font-size:.32em;font-weight:600;letter-spacing:-.02em;color:var(--gray);margin-left:8px}.jsz input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:var(--stone);margin:28px 0 10px;cursor:pointer}.jsz input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:var(--forest);border:4px solid #fff;box-shadow:0 4px 14px rgba(6,61,40,.35);cursor:pointer}.jsz input[type=range]::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:var(--forest);border:4px solid #fff;box-shadow:0 4px 14px rgba(6,61,40,.35);cursor:pointer}.jsz .calc__scale{display:flex;justify-content:space-between;font-size:13px;color:var(--gray);font-weight:600}.jsz .calc__hint{margin:26px 0 0;font-size:14.5px;color:var(--gray)}/* ============================================================
   FAQ
   ============================================================ */
.jsz .faq details{border-bottom:1px solid var(--stone)}.jsz .faq summary{list-style:none;cursor:pointer;padding:28px 50px 28px 0;position:relative;font-size:clamp(1.05rem,2.1vw,23px);font-weight:700;letter-spacing:-.03em;transition:color .3s var(--out)}.jsz .faq summary:hover{color:var(--moss)}.jsz .faq summary::-webkit-details-marker{display:none}.jsz .faq summary::after{content:'';position:absolute;right:8px;top:50%;width:16px;height:2px;background:var(--moss)}.jsz .faq summary::before{content:'';position:absolute;right:15px;top:50%;width:2px;height:16px;margin-top:-8px;background:var(--moss);transition:transform .45s var(--out),opacity .3s}.jsz .faq details.is-open summary::before{transform:scaleY(0);opacity:0}/* natywne <details> otwiera się skokowo — wysokość animujemy siatką */
.jsz .faq__body{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .45s var(--out),opacity .35s ease;
  opacity:0;
}.jsz .faq__body > div{overflow:hidden;overflow:clip;min-height:0}.jsz .faq details.is-open .faq__body{grid-template-rows:1fr;opacity:1}.jsz .faq p{padding:0 14% 30px 0;color:var(--gray);font-size:16.5px;margin:0}/* ============================================================
   CTA KOŃCOWE
   ============================================================ */
.jsz .cta{text-align:center;position:relative;overflow:hidden;overflow:clip}.jsz .cta h2{max-width:16ch;margin-inline:auto}.jsz .cta .lead{margin:24px auto 0}.jsz .cta__btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:38px}.jsz .cta__chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:30px}/* stopka */
.jsz .foot{background:var(--void);color:#e6f2ec;padding:76px 0 32px}.jsz .foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px}@media (max-width:800px){.jsz .foot__grid{grid-template-columns:1fr}}.jsz .foot h4{margin-bottom:16px;color:var(--spring);font-size:12px;letter-spacing:.16em;text-transform:uppercase}.jsz .foot a{color:inherit;text-decoration:none}.jsz .foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px}.jsz .foot__bot{margin-top:52px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:rgba(230,242,236,.5)}/* ============================================================
   SILNIK
   ============================================================ */
.jsz [data-anim="up"]{opacity:0;transform:translateY(36px);transition:opacity .85s var(--soft),transform .85s var(--soft)}.jsz .is-in[data-anim="up"]{opacity:1;transform:none}.jsz [data-mask]{clip-path:inset(0 100% 0 0);transition:clip-path 1.2s var(--out)}.jsz [data-mask="circle"]{clip-path:circle(0% at 50% 50%);transition-duration:1.4s}.jsz .is-in[data-mask]{clip-path:inset(0 0 0 0)}.jsz .is-in[data-mask="circle"]{clip-path:circle(75% at 50% 50%)}.jsz .sh-w{display:inline-block;overflow:hidden;overflow:clip;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}.jsz .sh-w:has(.scribble){overflow:visible}.jsz .sh-i{display:inline-block;transform:translateY(105%);transition:transform .95s var(--out)}.jsz .is-in .sh-i{transform:translateY(0)}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.jsz *,.jsz *::before,.jsz *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.jsz [data-anim="up"],.jsz .sh-i,.jsz .inline-img{opacity:1!important;transform:none!important}.jsz [data-mask]{clip-path:none!important}.jsz .blob{animation:none}
}


/* Dwie sekcje o tym samym tle stykajace sie ze soba dawaly podwojny
   odstep i wrazenie rozciagniecia. Na styku zbijamy go o polowe. */
.jsz .sec:not(.sec--mint):not(.sec--paper):not(.sec--forest)
  + .sec:not(.sec--mint):not(.sec--paper):not(.sec--forest),
.jsz .sec--paper + .sec--paper,
.jsz .sec--mint  + .sec--mint{ padding-top: var(--sec-y-tight); }

/* Marginesy motywu potrafia rozpychac sekcje — zerujemy na styku. */
.jsz .sec > .wrap > :first-child,
.jsz .sec > .narrow > :first-child{ margin-top:0; }
.jsz .sec > .wrap > :last-child,
.jsz .sec > .narrow > :last-child{ margin-bottom:0; }


/* ═══════════════════════════════════════════════════════════════
   POPRAWKI MOBILNE
   Wspolna przyczyna trzech usterek: animowane paski ::before byly
   zaprojektowane pod uklad JEDNORZEDOWY. Gdy siatka lamie sie na
   telefonie, pasek kolejnego wiersza lezy tuz pod tekstem
   poprzedniego i czyta sie jak przekreslenie.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width:820px){
  /* ── STATYSTYKI ── kazda komorka dostaje wlasna linie i oddech */
  .jsz .stats{ border-top:0; gap:32px 20px; }
  .jsz .stat{ padding:20px 0 0; border-top:1px solid var(--stone); }
  .jsz .is-in .stat::before{ width:100%; }
  .jsz .stat span{ max-width:none; }

  /* ── WARIANTY ── ujemny margines gorny wciagal karuzele POD
     podpowiedz "przesun, aby zobaczyc warianty" i karta ja zaslaniala */
  .jsz .variants{ margin-top:0; }
  .jsz .variants__hint{ margin-top:30px; margin-bottom:0; }

  /* Na dotyku opis jest widoczny od razu, wiec karta nie musi
     rezerwowac na niego miejsca — znika pusta gora i nadmiarowa wysokosc */
  .jsz .vcard{ min-height:300px; }
  .jsz .vcard__in{ align-self:flex-start; }
  .jsz .vcard__head{ transform:none !important; }
  .jsz .vcard__desc{
    position:static; opacity:1; transform:none;
    margin-top:14px; transition:none;
  }
}

@media (max-width:980px){
  /* ── PROCES ── to samo co przy statystykach */
  .jsz .steps{ border-top:0; row-gap:4px; }
  .jsz .step{ padding:20px 0 26px; border-top:2px solid var(--stone); }
  .jsz .is-in .step::before{ width:100%; }
}


/* ═══════════════════════════════════════════════════════════════
   SEKCJA ARCHITEKTURY — przebudowa
   ───────────────────────────────────────────────────────────────
   Trzy usterki mialy trzy rozne przyczyny:
   1. align-items:center centrowal krotki tekst wzgledem wysokiego
      diagramu — stad ogromna pustka po lewej stronie.
   2. Rola rozwijala sie z grid-template-rows 0fr->1fr, czyli
      ZMIENIALA WYSOKOSC elementu. Kazde najechanie przesuwalo
      wszystko ponizej.
   3. Rola elementu glownego byla ukryta do kliknięcia.
   ═══════════════════════════════════════════════════════════════ */

/* ── UKLAD ── tekst do gory i przyklejony; towarzyszy mapie przy przewijaniu */
.jsz .arch{
  align-items:start;
  grid-template-columns:0.9fr 1.1fr;
  gap:clamp(30px,4vw,64px);
}
.jsz .arch > *:first-child{ position:sticky; top:100px; }

/* ── ELEMENTY MAPY ── stala wysokosc, rola widoczna od razu.
   Brak rozwijania = brak przeskokow ukladu przy najechaniu i kliknieciu.
   Hover zmienia wylacznie kolor i przesuniecie (transform nie przelicza
   ukladu strony), wiec nic sie nie rusza. */
.jsz .arch__tree{ gap:8px; }
.jsz .node{
  display:flex; flex-direction:column; justify-content:center; gap:3px;
  min-height:66px; padding:12px 18px;
  transition:background .3s var(--out), color .3s var(--out),
             border-color .3s var(--out), transform .3s var(--out);
}
.jsz .node--root{ min-height:72px; }
.jsz .arch__sub .node{ min-height:58px; padding:10px 16px; }

.jsz .node__role{
  display:block; grid-template-rows:none;
  opacity:.7; margin-top:0;
  transition:opacity .3s var(--out);
}
.jsz .node__role > i{
  display:block; overflow:visible;
  font-style:normal; font-size:12.5px; font-weight:500;
  line-height:1.35; letter-spacing:-.01em;
}
/* margin-top:7px z reguly bazowej .node.is-on .node__role dokladal
   wysokosc przy aktywacji — zerujemy, inaczej uklad nadal przeskakuje */
.jsz .node:hover .node__role,
.jsz .node.is-on .node__role{ opacity:.95; margin-top:0; }

/* laczniki celuja w srodek elementu — przy stalej wysokosci pasuja rowno */
.jsz .arch__branch > *::before{ top:33px; }

@media (max-width:900px){
  .jsz .arch{ grid-template-columns:1fr; }
  .jsz .arch > *:first-child{ position:static; }
  .jsz .node{ min-height:0; }
  .jsz .node--root, .jsz .arch__sub .node{ min-height:0; }
}