/* ============================================================
   SEWTEAM strona glowna. Motyw jasny: gradient jasna zielen -> biel,
   napisy i przyciski w butelkowej zieleni. Podglad lokalny.
   Sciezki obrazow wzgledne; przed wdrozeniem:
     sed -i 's|"wp-content/|"/wp-content/|g' hero-butelkowa.html
   ============================================================ */
:root{
  --green:#085008;        /* butelkowa zielen: naglowki, przyciski, sekcje ciemne */
  --green-deep:#063c06;
  --acc:#80ba27;          /* jasna zielen: wypelnienia, podkreslenia, NIE tekst na bieli */
  --warm:#963f06;        /* cieply rdzawy akcent, przelamuje zielen naglowkow.
                             Wybrany tak, zeby przechodzil AA wszedzie, takze na
                             najjasniejszym punkcie gradientu hero (3.68:1). */
  --acc-text:#9bd23f;     /* limonka do tekstu na ciemnej zieleni (5.41:1) */
  --ink:#162012;          /* tekst podstawowy na jasnym tle */
  --mut:#4c5a46;          /* tekst drugorzedny na jasnym tle (7:1 na bieli) */
  --paper:#f6f8f4;
  --white:#fff;
  --line:#dde5d4;
  --tint:#f1f7e6;         /* delikatna podkladka sekcji naprzemiennych */
  --display:'Poppins',system-ui,sans-serif;  /* czcionka z oryginalnej strony sewteam.pl */
  --body:'Poppins',system-ui,-apple-system,sans-serif;
  --wrap:1240px;
  --gut:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--white);color:var(--ink);font-family:var(--body);
     font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
     /* clip, nie hidden: hidden robi z body kontener przewijania, a to potrafi
        zepsuc position:sticky w srodku, czyli mechanike ekranu wprowadzajacego.
        clip tak samo ucina wystajaca tresc, ale scrollportu nie tworzy. */
     overflow-x:clip}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
::selection{background:var(--acc);color:var(--green-deep)}

/* pojawianie sie przy scrollu */
[data-rv]{opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-rv].in{opacity:1;transform:none}

/* ---------- naglowek ---------- */
.hdr{position:absolute;inset:0 0 auto;z-index:30;padding:22px var(--gut);
     display:flex;align-items:center;gap:28px}
.hero-logo{display:inline-block;margin-bottom:26px}
.hero-logo img{height:clamp(58px,9vw,96px);width:auto;
  filter:drop-shadow(0 10px 24px rgba(8,80,8,.25))}
/* Logo w naglowku. Do 26.08 naglowek stron uslugowych nie mial ZADNEGO
   logo ani linku do strony glownej: lewy gorny rog, czyli miejsce,
   w ktorym kazdy uzytkownik szuka powrotu na start, byl pusty przez
   637 px. Jedynym wyjsciem byl drobny okruszek nizej.
   Na stronie glownej to logo jest ukryte, bo hero ma juz swoje, duze. */
.hdr-logo{display:inline-flex;align-items:center;margin-right:auto}
.hdr-logo img{height:clamp(30px,3.4vw,42px);width:auto}
.glowna .hdr-logo{display:none}
/* Na stronie glownej logo jest ukryte, wiec znika element, ktory dopychal
   reszte naglowka w prawo. Bez tego menu i telefon zbijaly sie do lewej
   krawedzi i polowa paska zostawala pusta. */
.glowna .hdr-nav,.glowna .hdr-burger{margin-left:auto}

/* Menu bez JavaScriptu, na ukrytym polu wyboru.
   Probowane najpierw na <details> i odrzucone: zamkniety <details>
   zeruje szerokosc swojej zawartosci na poziomie przegladarki i nie da
   sie tego pewnie nadpisac stylem, wiec na szerokim ekranie lista
   linkow miala 0 px szerokosci. Pole wyboru jest w pelni sterowalne. */
/* Kanoniczny sposob ukrycia pola tak, zeby zostalo w drzewie dostepnosci:
   czytnik ekranu je oglasza i da sie je zogniskowac tabulatorem.
   Nie uzywamy display:none ani visibility:hidden, bo te odbieraja fokus. */
.hdr-check{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.hdr-burger{display:none}
.hdr-nav{display:flex;gap:26px;font-size:.82rem;font-weight:600;
         letter-spacing:.04em;text-transform:uppercase;color:var(--green)}
.hdr-nav a{opacity:.85;transition:opacity .25s}
.hdr-nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:5px;
  text-decoration-thickness:2px;text-decoration-color:var(--acc)}
.hdr-tel{font-weight:700;font-size:.95rem;white-space:nowrap;color:var(--green)}

/* ---------- hero: gradient jasna zielen -> biel ---------- */
.hero{position:relative;min-height:94svh;display:flex;align-items:center;
      justify-content:center;overflow:hidden;isolation:isolate;
      background:linear-gradient(180deg,#9ccb55 0%,#cfe6a4 48%,var(--white) 100%)}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(8,80,8,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(8,80,8,.07) 1px,transparent 1px);
  background-size:clamp(60px,7vw,104px) clamp(60px,7vw,104px);
  mask-image:linear-gradient(#000 55%,transparent)}
.hero-core{position:relative;z-index:20;width:100%;max-width:780px;
           padding:96px var(--gut) 100px;text-align:center}
.eyebrow{font-size:.76rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
         color:var(--green);display:inline-flex;align-items:center;gap:10px;margin-bottom:22px}
.eyebrow::before,.eyebrow::after{content:"";width:26px;height:2px;background:var(--warm)}
h1{font-family:var(--display);font-weight:800;line-height:.94;letter-spacing:-.02em;
   margin-bottom:26px;text-wrap:balance;color:var(--green)}
.h1-lead{display:block;font-size:clamp(1.05rem,2.4vw,1.6rem);font-weight:700;
         letter-spacing:.01em;margin-bottom:14px}
.h1-big{display:block;font-size:clamp(2.3rem,7.2vw,5.1rem)}
/* jedyny glosny blok: butelkowa zielen, bialy tekst (odwrocone) */
.h1-block{display:inline-block;background:var(--warm);color:var(--white);
          padding:.06em .26em .12em;margin-top:.1em;border-radius:3px;
          box-shadow:0 18px 44px -14px rgba(150,63,6,.5)}
.lead{font-size:clamp(.98rem,1.5vw,1.12rem);line-height:1.62;color:var(--ink);
      max-width:600px;margin:0 auto 34px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:3px;
     font-weight:600;font-size:.96rem;transition:all .3s var(--ease);border:1px solid transparent}
.btn-main{background:var(--green);color:var(--white);
          box-shadow:0 12px 34px -12px rgba(8,80,8,.6)}
.btn-main:hover{background:var(--green-deep);transform:translateY(-2px);
                box-shadow:0 18px 44px -12px rgba(8,80,8,.55)}
.btn-ghost{border-color:rgba(8,80,8,.4);color:var(--green)}
.btn-ghost:hover{border-color:var(--green);background:rgba(8,80,8,.06);transform:translateY(-2px)}
.microcopy{margin-top:20px;font-size:.83rem;color:var(--mut);max-width:470px;margin-inline:auto}

/* rozsypane zdjecia: biala ramka jak odbitki, przy scrollu zjezdzaja za napis */
.tiles{position:absolute;inset:0;z-index:10;pointer-events:none;--pas:350px}
.tile{position:absolute;pointer-events:auto;display:block;border-radius:3px;overflow:hidden;
      background:var(--white);padding:6px;
      box-shadow:0 16px 40px -14px rgba(8,40,8,.4);
      transition:box-shadow .4s var(--ease);will-change:transform,opacity}
.tile img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;border-radius:2px;
          transition:transform .45s var(--ease)}
.tile:hover{box-shadow:0 24px 54px -16px rgba(8,40,8,.5);z-index:15}
.tile:hover img{transform:scale(1.06)}
.tile .cap{position:absolute;inset:auto 6px 6px;padding:14px 8px 6px;font-size:.66rem;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--white);
  background:linear-gradient(transparent,rgba(6,40,6,.85));border-radius:0 0 2px 2px;
  opacity:0;transition:opacity .3s}
.tile:hover .cap{opacity:1}
/* Wzorzec: okaydev.co. Dwie geste kolumny odbitek, DOCIAZONE KU GORZE,
   na wysokosci naglowka. Poprzedni uklad rozkladal je rownomiernie do samego
   dolu hero, przez co dolne wychodzily poza pierwszy ekran i pojawialy sie
   dopiero w momencie, gdy scroll juz wciagal je za napis: nikt ich nie widzial
   w spoczynku. Teraz wszystkie 10 miesci sie nad linia zgiecia.

   Odbitki celowo NACHODZA na siebie jak kolaz: t2, t4, t8 i t10 leza na
   sasiadach i maja z-index 11, zeby uklad mial glebie. Tekst ma z-index 20,
   wiec i tak jest zawsze na wierzchu, a hover podnosi kafelek na 15. */
.t1{top:3%;left:1.5%;width:clamp(150px,17vw,330px);--rot:-3.5deg;--bd:6.5s}
.t2{top:17%;left:11.5%;width:clamp(122px,13vw,252px);--rot:2.5deg;--bd:7.8s;--bdel:-2.1s}
.t3{top:33%;left:2%;width:clamp(150px,17.5vw,340px);--rot:-1.5deg;--bd:7.1s;--bdel:-4.4s}
.t4{top:52%;left:10%;width:clamp(112px,11.5vw,224px);--rot:5deg;--bd:5.9s;--bdel:-1.2s}
.t9{top:66%;left:2.5%;width:clamp(108px,11vw,214px);--rot:3.5deg;--bd:7.6s;--bdel:-3.8s}
.t5{top:3%;right:1.5%;width:clamp(144px,16vw,312px);--rot:3deg;--bd:7.4s;--bdel:-3.3s}
.t8{top:16%;right:12%;width:clamp(116px,12vw,232px);--rot:-5.5deg;--bd:6.8s;--bdel:-2.9s}
.t6{top:32%;right:2%;width:clamp(150px,17.5vw,340px);--rot:-2.5deg;--bd:6.2s;--bdel:-5.1s}
.t7{top:52%;right:10%;width:clamp(126px,13vw,252px);--rot:4deg;--bd:8.1s;--bdel:-0.7s}
.t10{top:66%;right:2.5%;width:clamp(112px,11.5vw,222px);--rot:-3deg;--bd:6s;--bdel:-1.6s}
.t2,.t4,.t8,.t10{z-index:11}
.tile{transform:rotate(var(--rot))}

/* Delikatne unoszenie w miejscu, zeby odbitki zyly takze bez scrollowania.
   Animowana jest osobna wlasciwosc translate, nie transform, wiec sklada sie
   i z obrotem z CSS, i z przesunieciem, ktore skrypt scrolla wpisuje inline.
   Kazda odbitka ma inny czas i faze (--bd, --bdel), zeby nie falowaly chorem. */
@keyframes tile-bob{
  0%{translate:0 0}
  50%{translate:0 -11px}
  100%{translate:0 0}
}
.tile{animation:tile-bob var(--bd,7s) ease-in-out var(--bdel,0s) infinite}
@media (prefers-reduced-motion:reduce){
  .tile{animation:none}
}

/* ---------- zdjecia w tresci: figura, duet, trio ----------
   Sciana tekstu czyta sie dobrze wyszukiwarce, ale czlowiek po niej
   przewija. Te trzy komponenty sluza do przetykania sekcji zdjeciami
   realizacji, zeby dowod byl widoczny w trakcie czytania, a nie dopiero
   w galerii na dole strony.

   figura: jedno zdjecie na pelna szerokosc kolumny tresci
   duet:   dwa obok siebie
   trio:   trzy obok siebie, na mobile przewijane w poziomie          */
.figura, .duet, .trio{margin:34px auto 0;max-width:var(--w,1180px)}
.figura figcaption, .duet figcaption, .trio figcaption{
  margin-top:10px;font-size:.82rem;color:var(--mut);line-height:1.45}
.figura img, .duet img, .trio img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:10px;
  background:#e9ece7;box-shadow:0 14px 34px -18px rgba(8,40,8,.45)}
.figura img{aspect-ratio:21/9}
.duet{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.duet img{aspect-ratio:4/3}
.trio img{aspect-ratio:1/1}
.duet figure, .trio figure{margin:0}

/* Zdjecie wtopione w akapit, oplywane tekstem. Uzywane tam, gdzie sekcja
   jest krotka i pelna szerokosc bylaby przesada. */
.obok{float:right;width:clamp(220px,34%,360px);margin:6px 0 22px 28px}
.obok img{width:100%;border-radius:10px;display:block;
  box-shadow:0 14px 34px -18px rgba(8,40,8,.45)}
.obok figcaption{margin-top:8px;font-size:.8rem;color:var(--mut);line-height:1.4}

@media (max-width:820px){
  .duet{grid-template-columns:1fr;gap:16px}
  .trio{grid-template-columns:repeat(3,1fr);gap:10px}
  .figura img{aspect-ratio:16/9}
  .obok{float:none;width:auto;margin:18px 0}
}

/* ---------- pas produktow: butelkowa zielen ---------- */
.marquee{background:var(--green);color:var(--paper);overflow:hidden;position:relative;z-index:5}
.mq-track{display:flex;width:max-content;animation:mq 46s linear infinite}
.mq-track span{font-family:var(--display);font-weight:700;font-size:clamp(.95rem,2vw,1.5rem);
  letter-spacing:-.01em;text-transform:uppercase;padding:16px 26px;display:inline-flex;
  align-items:center;gap:26px;white-space:nowrap}
.mq-track span::after{content:"";width:7px;height:7px;background:var(--warm);
  transform:rotate(45deg);flex:none}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- sekcje wspolne ---------- */
.sec{padding:clamp(60px,8vw,108px) var(--gut);max-width:var(--wrap);margin:0 auto}
.sec-tint{background:var(--tint);border-block:1px solid var(--line)}
.sec-tint>.sec{background:none}
.sec-head{max-width:680px;margin-bottom:48px}
.sec-head h2{font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.6rem,3.6vw,2.5rem);line-height:1.08;color:var(--green)}
.sec-head p{margin-top:16px;color:var(--mut)}
.kicker{font-size:.76rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--green);display:inline-flex;align-items:center;gap:10px;margin-bottom:16px}
.kicker::before{content:"";width:26px;height:2px;background:var(--warm)}

/* ---------- realizacje (kafelki zostaja TYLKO tutaj) ---------- */
.prod-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
.card{position:relative;border-radius:4px;overflow:hidden;background:var(--white);
      border:1px solid var(--line);transition:border-color .3s var(--ease),
      transform .3s var(--ease),box-shadow .3s var(--ease)}
.card:hover{border-color:var(--green);transform:translateY(-4px);
  box-shadow:0 20px 44px -18px rgba(8,80,8,.3)}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover;
          transition:transform .5s var(--ease)}
.card:hover img{transform:scale(1.04)}
.card-body{padding:18px 20px 22px}
.card h3{font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;
         color:var(--green);margin-bottom:7px}
.card p{font-size:.86rem;color:var(--mut);line-height:1.5}
.card .go{font-style:normal;margin-top:12px;font-size:.78rem;font-weight:700;letter-spacing:.05em;
          text-transform:uppercase;color:var(--green);display:inline-flex;align-items:center;gap:7px;
          transition:gap .3s var(--ease)}
.card:hover .go{gap:12px}

/* pozostale uslugi pod kafelkami */
.more-title{margin:34px 0 14px;font-size:.82rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mut)}
.more-links{display:flex;flex-wrap:wrap;gap:10px}
.more-links a{padding:10px 18px;border-radius:22px;border:1px solid var(--line);
  font-size:.86rem;font-weight:600;color:var(--green);transition:all .3s var(--ease)}
.more-links a:hover{border-color:var(--green);background:var(--tint);transform:translateY(-2px)}

/* ---------- wideo ---------- */
.vid-wrap{position:relative;border-radius:6px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 26px 60px -24px rgba(8,80,8,.35)}
.vid-wrap video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  color:var(--ink);padding:18px;font-size:.95rem}
.vid-wrap video a{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.vid-note{margin-top:14px;font-size:.83rem;color:var(--mut)}

/* ---------- proces: pionowa os czasu, nie kafelki ---------- */
.tl{position:relative;max-width:820px;margin-left:8px}
.tl::before{content:"";position:absolute;left:19px;top:6px;bottom:6px;width:2px;
  background:var(--line)}
.tl-fill{position:absolute;left:19px;top:6px;width:2px;background:var(--warm);
  height:0;transition:height 1.6s var(--ease)}
.tl.in .tl-fill{height:calc(100% - 12px)}
.tl-step{position:relative;padding:0 0 40px 66px}
.tl-step:last-child{padding-bottom:0}
.tl-dot{position:absolute;left:8px;top:2px;width:24px;height:24px;border-radius:50%;
  background:var(--white);border:2px solid var(--green);display:grid;place-items:center}
.tl-dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--warm);
  transform:scale(0);transition:transform .5s var(--ease)}
.tl-step.in .tl-dot::after{transform:scale(1)}
.tl-num{font-family:var(--display);font-weight:800;font-size:.8rem;color:var(--mut);
  letter-spacing:.14em;margin-bottom:4px}
.tl-step h3{font-family:var(--display);font-weight:700;font-size:1.12rem;color:var(--green);
  margin-bottom:6px;letter-spacing:-.01em}
.tl-step p{font-size:.92rem;color:var(--mut);max-width:56ch}

/* zdjecia przy krokach procesu */
.tl-step{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:start}
.tl-body{min-width:0}
.tl-photo{width:clamp(96px,13vw,150px);border-radius:4px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 10px 26px -14px rgba(8,80,8,.3);display:block}
.tl-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s var(--ease)}
.tl-photo:hover img{transform:scale(1.06)}

/* ---------- mozaika z placu montazu ---------- */
.mosaic{display:grid;gap:10px;grid-template-columns:repeat(6,1fr);grid-auto-rows:118px;
  grid-auto-flow:dense}
.mosaic a{position:relative;overflow:hidden;border-radius:4px;display:block;
  border:1px solid var(--line)}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.mosaic a:hover img{transform:scale(1.06)}
.mosaic .w2{grid-column:span 2}
.mosaic .h2{grid-row:span 2}
.mosaic .cap{position:absolute;inset:auto 0 0;padding:16px 12px 8px;font-size:.68rem;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--white);
  background:linear-gradient(transparent,rgba(6,40,6,.85));opacity:0;transition:opacity .3s}
.mosaic a:hover .cap{opacity:1}
.mosaic-more{margin-top:22px}

/* ---------- widelki: cennik redakcyjny z paskami zakresow ---------- */
.pricelist{border-top:1px solid var(--line)}
.prow{display:grid;grid-template-columns:minmax(150px,1.1fr) minmax(0,1.6fr) minmax(130px,.9fr);
  gap:clamp(14px,3vw,36px);align-items:center;padding:20px 4px;
  border-bottom:1px solid var(--line);transition:background .25s}
.prow:hover{background:var(--tint)}
.prow h3{font-size:.98rem;font-weight:600;color:var(--ink)}
.prow h3 small{display:block;font-size:.78rem;font-weight:400;color:var(--mut);margin-top:2px}
.pbar{position:relative;height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.pbar i{position:absolute;top:0;bottom:0;border-radius:4px;
  background:linear-gradient(90deg,var(--warm),var(--green));
  left:var(--lo);width:0;transition:width 1.1s var(--ease) .15s}
.pricelist.in .pbar i{width:calc(var(--hi) - var(--lo))}
.pbar-scale{display:flex;justify-content:space-between;font-size:.68rem;color:var(--mut);
  margin-top:6px;letter-spacing:.04em}
.prow .val{font-family:var(--display);font-weight:700;font-size:clamp(.98rem,1.6vw,1.18rem);
  color:var(--green);text-align:right;letter-spacing:-.01em;line-height:1.25}
.price-foot{margin-top:26px;padding:18px 22px;border-left:3px solid var(--warm);
  background:var(--tint);border-radius:0 4px 4px 0;font-size:.9rem;color:var(--ink)}
.price-foot a{color:var(--green);font-weight:600;text-decoration:underline;
  text-underline-offset:3px}

/* ---------- dlaczego: chaos kontra porzadek + lista redakcyjna ---------- */
.versus{display:grid;gap:22px;grid-template-columns:1fr auto 1fr;align-items:stretch;
  margin-bottom:56px}
.vs-panel{border:1px dashed #c3cdb8;border-radius:6px;padding:26px 22px;min-height:250px;
  position:relative;background:var(--white)}
.vs-panel.order{border:1px solid var(--green);box-shadow:0 20px 48px -22px rgba(8,80,8,.35)}
.vs-panel h3{font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--mut);
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:18px}
.vs-panel.order h3{color:var(--green)}
.chip{display:inline-block;padding:8px 14px;border-radius:20px;font-size:.82rem;font-weight:600;
  background:var(--paper);border:1px solid var(--line);color:var(--mut);margin:0 6px 10px 0}
.chaos .chip{animation:wobble 4.6s ease-in-out infinite}
.chaos .chip:nth-child(odd){animation-delay:-1.2s}
.chaos .chip:nth-child(3n){animation-delay:-2.4s}
@keyframes wobble{0%,100%{transform:rotate(-2.5deg) translateY(0)}
  50%{transform:rotate(2deg) translateY(-4px)}}
.chaos .meta{font-size:.78rem;color:var(--mut);margin-top:12px;line-height:1.6}
.vs-mid{display:grid;place-items:center;font-family:var(--display);font-weight:800;
  color:var(--green);font-size:1rem}
.order .one{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.order .one b{font-family:var(--display);font-size:2.4rem;font-weight:800;color:var(--green);
  line-height:1}
.order .one span{font-size:.9rem;color:var(--ink);font-weight:600}
.order ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:.88rem;
  color:var(--ink)}
.order li{padding-left:22px;position:relative}
.order li::before{content:"";position:absolute;left:0;top:.42em;width:11px;height:6px;
  border-left:2px solid var(--warm);border-bottom:2px solid var(--warm);transform:rotate(-45deg)}
.why-list{border-top:1px solid var(--line)}
.why-row{display:grid;grid-template-columns:auto minmax(160px,.7fr) 1.6fr;gap:clamp(14px,3vw,40px);
  padding:26px 4px;border-bottom:1px solid var(--line);align-items:baseline}
.why-row b{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,3vw,2.2rem);
  color:transparent;-webkit-text-stroke:1.5px var(--warm);letter-spacing:.02em;line-height:1}
.why-row h3{font-family:var(--display);font-weight:700;font-size:1.04rem;color:var(--green);
  letter-spacing:-.01em}
.why-row p{font-size:.92rem;color:var(--mut);max-width:62ch}

/* ---------- dla kogo: przelacznik rol ---------- */
.roles{max-width:900px}
.role-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.role-tab{padding:11px 22px;border-radius:24px;border:1px solid var(--line);
  background:var(--white);color:var(--ink);font-weight:600;font-size:.88rem;cursor:pointer;
  font-family:var(--body);transition:all .3s var(--ease)}
.role-tab:hover{border-color:var(--green)}
.role-tab[aria-selected="true"]{background:var(--green);color:var(--white);
  border-color:var(--green);box-shadow:0 10px 26px -12px rgba(8,80,8,.55)}
.role-panel{display:none;border-left:3px solid var(--warm);padding:6px 0 6px 26px;
  animation:fadein .45s var(--ease);grid-template-columns:1fr minmax(200px,260px);
  gap:26px;align-items:start}
.role-panel.on{display:grid}
.role-img{border-radius:5px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 14px 34px -18px rgba(8,80,8,.35)}
.role-img img{width:100%;aspect-ratio:4/3;object-fit:cover}
@keyframes fadein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.role-panel h3{font-family:var(--display);font-weight:700;font-size:1.2rem;color:var(--green);
  margin-bottom:10px;letter-spacing:-.01em}
.role-panel p{color:var(--ink);max-width:64ch;margin-bottom:12px}
.role-panel .ex{font-size:.86rem;color:var(--mut)}
.role-panel .ex b{color:var(--green);font-weight:700}

/* ---------- opinie: wolno plynacy pas cytatow ---------- */
.rev-band{overflow:hidden;position:relative;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.rev-track{display:flex;gap:22px;width:max-content;animation:mq 60s linear infinite;
  padding:8px 0 14px}
.rev-band:hover .rev-track{animation-play-state:paused}
.rev{flex:none;width:min(360px,78vw);padding:26px 24px 22px;background:var(--white);
  border:1px solid var(--line);border-radius:6px;position:relative;
  box-shadow:0 14px 34px -20px rgba(8,80,8,.25)}
.rev::before{content:"\201D";position:absolute;top:2px;right:16px;
  font-family:var(--display);font-size:3.6rem;line-height:1;color:var(--warm);opacity:.5}
.rev .stars{color:var(--warm);letter-spacing:.15em;font-size:.9rem;margin-bottom:12px}
.rev blockquote{font-size:.9rem;color:var(--ink);line-height:1.6;margin-bottom:14px}
.rev cite{font-style:normal;font-size:.82rem;font-weight:700;color:var(--green);display:block}
.rev .src{font-size:.76rem;color:var(--mut)}

/* ---------- FAQ ---------- */
.faq-list{max-width:840px}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{cursor:pointer;list-style:none;padding:19px 40px 19px 0;position:relative;
  font-weight:600;font-size:1rem;color:var(--ink);transition:color .25s}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{color:var(--green)}
.faq-list summary::after{content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--green);border-bottom:2px solid var(--green);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.faq-list details[open] summary{color:var(--green)}
.faq-list details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq-list .ans{padding:0 0 22px;font-size:.92rem;color:var(--mut);line-height:1.62;
  max-width:74ch}
.faq-list .ans a{color:var(--green);text-decoration:underline;text-underline-offset:3px}

/* ---------- wycena: ciemne domkniecie strony ---------- */
.quote-sec{background:linear-gradient(180deg,var(--green) 0%,var(--green-deep) 100%);
  color:var(--paper)}
.quote{display:grid;gap:38px;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:start;max-width:var(--wrap);margin:0 auto;
  padding:clamp(60px,8vw,108px) var(--gut)}
.quote-copy .kicker{color:var(--acc-text)}
.quote-copy h2{font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.6rem,3.6vw,2.4rem);line-height:1.08;color:var(--white);margin-bottom:18px}
.quote-copy p{color:rgba(246,248,244,.85);margin-bottom:22px}
.quote-copy .direct{display:flex;flex-direction:column;gap:10px;margin-top:26px}
.quote-copy .direct a{font-family:var(--display);font-weight:700;font-size:1.24rem;
  color:var(--white)}
.quote-copy .direct a:hover{color:var(--acc-text)}
.quote-copy .direct span{font-size:.83rem;color:rgba(246,248,244,.66)}
form.quote-form{background:var(--white);border-radius:6px;padding:28px 26px;color:var(--ink);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.5)}
.fld{margin-bottom:16px}
.fld label{display:block;font-size:.82rem;font-weight:600;color:var(--ink);margin-bottom:7px}
.fld input,.fld select,.fld textarea{width:100%;padding:12px 14px;background:var(--paper);
  border:1px solid var(--line);border-radius:3px;color:var(--ink);font:inherit;font-size:.92rem;
  transition:border-color .25s}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--green);outline:none}
.fld textarea{min-height:92px;resize:vertical}
.fld-2{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.78rem;color:var(--mut);
  line-height:1.5;margin:18px 0 20px}
.consent a{color:var(--green);text-decoration:underline}
.consent input{width:16px;height:16px;flex:none;margin-top:2px;accent-color:var(--green)}
form.quote-form .btn-main{width:100%;justify-content:center}
.form-note{margin-top:14px;font-size:.78rem;color:var(--mut);text-align:center}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- stopka ---------- */
.ftr{background:var(--green-deep);color:var(--paper)}
.ftr-in{max-width:var(--wrap);margin:0 auto;padding:52px var(--gut) 34px;
  display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.ftr h4{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acc-text);margin-bottom:15px}
.ftr ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.ftr a{font-size:.88rem;color:rgba(246,248,244,.78)}
.ftr a:hover{color:var(--acc-text)}
.ftr address{font-style:normal;font-size:.88rem;color:rgba(246,248,244,.78);line-height:1.7}
.ftr-logo{display:inline-block;margin-bottom:18px}
.ftr-logo img{height:60px;width:auto}
.soc{display:flex;gap:12px}
.soc a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(246,248,244,.28);color:rgba(246,248,244,.85);
  transition:all .3s var(--ease)}
.soc a:hover{background:var(--acc);border-color:var(--acc);color:var(--green-deep);
  transform:translateY(-3px)}
.soc svg{width:20px;height:20px}
.ftr-bot{border-top:1px solid rgba(246,248,244,.14);padding:20px var(--gut);text-align:center;
  font-size:.78rem;color:rgba(246,248,244,.62)}
.ftr-bot a{text-decoration:underline;text-underline-offset:3px}

/* ---------- mobile ---------- */
@media (max-width:900px){
  /* Do 26.08 bylo tu po prostu .hdr-nav{display:none} i NIC w zamian:
     ponizej 900 px nowe strony nie mialy zadnej nawigacji poza okruszkiem.
     Teraz menu chowa sie za przyciskiem, a nie znika. */
  .hdr{padding:14px var(--gut);gap:12px}
  /* Trzy poziome kreski. Srodkowa to <span>, gorna i dolna to jego
     ::before i ::after. Po otwarciu srodkowa gasnie, a skrajne skladaja
     sie w krzyzyk, wiec ten sam przycisk zamyka panel. */
  .hdr-burger{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
    width:44px;height:44px;border:1px solid rgba(8,80,8,.35);border-radius:3px;
    background:rgba(255,255,255,.72);-webkit-tap-highlight-color:transparent}
  .hdr-burger span{position:relative;display:block}
  .hdr-burger span,.hdr-burger span::before,.hdr-burger span::after{
    width:22px;height:2px;border-radius:2px;background:var(--green);
    transition:transform .25s var(--ease),background-color .2s var(--ease)}
  .hdr-burger span::before,.hdr-burger span::after{content:"";position:absolute;left:0}
  .hdr-burger span::before{top:-7px}
  .hdr-burger span::after{top:7px}
  .hdr-check:checked~.hdr-burger span{background:transparent}
  .hdr-check:checked~.hdr-burger span::before{transform:translateY(7px) rotate(45deg)}
  .hdr-check:checked~.hdr-burger span::after{transform:translateY(-7px) rotate(-45deg)}
  .hdr-check:focus-visible~.hdr-burger{outline:2px solid var(--green);outline-offset:3px}
  .hdr-nav{display:none;position:absolute;right:var(--gut);top:calc(100% - 4px);z-index:40;
    flex-direction:column;gap:0;min-width:214px;padding:8px;
    background:var(--white);border:1px solid var(--line);border-radius:4px;
    box-shadow:0 22px 48px -18px rgba(8,40,8,.45)}
  .hdr-check:checked~.hdr-nav{display:flex}
  .hdr-nav a{padding:12px 14px;border-radius:3px;opacity:1}
  .hdr-nav a:hover{background:var(--tint);text-decoration:none}
  .hdr-tel{font-size:.88rem}
  .hero{min-height:auto}
  .hero-core{padding:104px var(--gut) 84px}
  .t3,.t4,.t7,.t8,.t9,.t10{display:none}
  /* Na telefonie zostaja cztery odbitki i sa tylko nieco wieksze niz byly.
     Podwojenie z desktopu zasloniloby tu napis, a to on ma byc pierwszy. */
  .t1{top:4%;left:-10%;width:clamp(132px,22vw,196px)}
  .t2{top:auto;bottom:17%;left:-13%;width:clamp(112px,18vw,162px)}
  .t5{top:3%;right:-10%;width:clamp(128px,21vw,188px)}
  .t6{top:auto;bottom:14%;right:-13%;width:clamp(132px,22vw,196px)}
  .versus{grid-template-columns:1fr}
  .vs-mid{padding:4px 0}
  .why-row{grid-template-columns:auto 1fr;grid-template-areas:"n t" "n p"}
  .why-row b{grid-area:n}.why-row h3{grid-area:t}.why-row p{grid-area:p}
  .quote{grid-template-columns:1fr;gap:30px}
}
@media (max-width:700px){
  .prod-grid{grid-template-columns:1fr 1fr;gap:11px}
  .card p{display:none}
  .card-body{padding:13px 13px 16px}
  .card h3{font-size:.88rem;line-height:1.25;margin-bottom:8px}
  .card .go{margin-top:0;font-size:.68rem;letter-spacing:.04em}
  .card img{aspect-ratio:4/3}
  .prow{grid-template-columns:1fr auto;grid-template-areas:"t v" "b b"}
  .prow h3{grid-area:t}.prow .val{grid-area:v}.prow .pwrap{grid-area:b}
}
@media (max-width:700px){
  .tl-photo{width:86px}
  .role-panel{grid-template-columns:1fr}
  .role-img{max-width:300px}
  .mosaic{grid-template-columns:repeat(3,1fr);grid-auto-rows:96px}
}
@media (max-width:560px){
  .tiles{display:none}
  .hero-core{padding:100px var(--gut) 64px}
  .fld-2{grid-template-columns:1fr}
  .tl-step{grid-template-columns:1fr}
  .tl-photo{width:100%;max-width:220px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .mq-track,.rev-track{animation:none}
  [data-rv]{opacity:1;transform:none}
  .tl-fill{height:calc(100% - 12px)}
  .pricelist .pbar i{width:calc(var(--hi) - var(--lo))}
}

/* ============================================================
   STRONY USLUGOWE: komponenty uzywane poza strona glowna
   ============================================================ */
.hero-svc{position:relative;padding:120px var(--gut) clamp(48px,6vw,76px);
  background:linear-gradient(180deg,#9ccb55 0%,#cfe6a4 55%,var(--white) 100%);overflow:hidden}
.hero-svc::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(8,80,8,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(8,80,8,.07) 1px,transparent 1px);
  background-size:clamp(60px,7vw,104px) clamp(60px,7vw,104px);
  mask-image:linear-gradient(#000 55%,transparent)}
.hero-svc-in{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;
  display:grid;gap:clamp(26px,4vw,52px);grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center}
.hero-svc h1{font-size:clamp(1.9rem,4.4vw,3.1rem);line-height:1.04;margin-bottom:20px}
.hero-svc .lead{margin:0 0 26px;max-width:60ch;text-align:left}
.hero-svc .cta-row{justify-content:flex-start}
.hero-svc-img{border-radius:6px;overflow:hidden;border:3px solid var(--white);
  box-shadow:0 26px 60px -24px rgba(8,40,8,.5)}
.hero-svc-img img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* pasek liczb */
.stats{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  margin-top:clamp(30px,4vw,44px);padding-top:26px;border-top:1px solid rgba(8,80,8,.22)}
.stats div b{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(1.4rem,2.6vw,2rem);color:var(--green);line-height:1;margin-bottom:6px}
.stats div span{font-size:.83rem;color:var(--ink);line-height:1.45;display:block}

/* tabele merytoryczne */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:5px}
table.tbl{border-collapse:collapse;width:100%;min-width:560px;font-size:.9rem;background:var(--white)}
table.tbl th,table.tbl td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);
  vertical-align:top}
table.tbl th{background:var(--tint);font-weight:600;color:var(--green);font-size:.84rem;
  letter-spacing:.02em}
table.tbl tr:last-child td{border-bottom:none}
table.tbl td:first-child{font-weight:600;color:var(--ink);white-space:nowrap}
table.tbl td{color:var(--mut)}
/* wrap1: pierwsza kolumna to zdanie, a nie etykieta, wiec musi sie lamac.
   Bez tego tabela rozpycha sie na kilkaset px i wymusza przewijanie w bok. */
table.tbl.wrap1 td:first-child{white-space:normal}
/* linki w tabeli. Uzywa ich hub uslug, gdzie tabela JEST nawigacja */
table.tbl a{color:var(--green);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:rgba(8,80,8,.35);
  transition:text-decoration-color .25s var(--ease)}
table.tbl a:hover{text-decoration-color:var(--green)}

/* naglowek grupy uslug wewnatrz jednej sekcji */
h3.grp{font-family:var(--display);font-weight:700;font-size:1.1rem;letter-spacing:-.01em;
  color:var(--green);margin:34px 0 14px}
h3.grp:first-of-type{margin-top:8px}

/* karta: na telefonie wiersz rozklada sie w pionie zamiast przewijac w bok.
   Powod: w tabeli routujacej link siedzi w trzeciej kolumnie, czyli poza
   ekranem 375 px. Strona, ktorej cala robota to kierowanie ruchu, nie moze
   chowac linku za przewijaniem. Dotyczy wylacznie tabel z klasa .karta. */
@media(max-width:640px){
  table.tbl.karta{min-width:0}
  table.tbl.karta thead{display:none}
  table.tbl.karta,table.tbl.karta tbody,table.tbl.karta tr,table.tbl.karta td{
    display:block;width:100%}
  table.tbl.karta tr{border-bottom:1px solid var(--line);padding:8px 0}
  table.tbl.karta tr:last-child{border-bottom:none}
  table.tbl.karta td{border-bottom:none;padding:4px 16px;white-space:normal}
  table.tbl.karta td:first-child{padding-top:10px;color:var(--green);font-size:.95rem}
  table.tbl.karta td:last-child{padding-bottom:10px}
}

/* klauzula informacyjna */
.nota{margin-top:24px;padding:18px 22px;border-left:3px solid var(--warm);background:var(--tint);
  border-radius:0 4px 4px 0;font-size:.88rem;color:var(--ink);line-height:1.6}
.nota b{color:var(--green)}
.nota a{color:var(--green);text-decoration:underline;text-underline-offset:3px}

/* okruchy */
.bc{max-width:var(--wrap);margin:0 auto;padding:14px var(--gut) 0;font-size:.8rem;
  color:var(--mut);position:relative;z-index:3}
.bc a{color:var(--green)}
.bc a:hover{text-decoration:underline;text-underline-offset:3px}
.bc span{opacity:.5;margin:0 7px}

@media (max-width:860px){
  .hero-svc-in{grid-template-columns:1fr}
  .hero-svc{padding-top:104px}
}

/* Okruszki i mikrokopia leza na jasnozielonym tle hero, a nie na bieli.
   Kolor --mut (#4c5a46) daje tam tylko 3.88:1, czyli ponizej progu WCAG AA.
   Ciemniejszy --ink daje 8.87:1. Dotyczy hero strony glownej i stron uslugowych. */
.hero-svc .bc,.hero-svc .bc a{color:var(--ink)}
.hero .microcopy,.hero-svc .microcopy{color:var(--ink)}

/* Filtr segmentu przy formularzu. SEWTEAM przyjmuje zlecenia
   wieloelementowe, nie pojedyncze drobiazgi. Ten akapit ma ten filtr
   wykonywac sam, bez odsylania kogokolwiek z kwitkiem. */
.quote-copy .zakres{font-size:.9rem;color:rgba(246,248,244,.72);
  border-left:2px solid var(--acc-text);padding-left:16px;margin:22px 0 0}

/* ============================================================
   PAS MARKI ZOIGO (tylko /strony-internetowe-www/)
   ------------------------------------------------------------
   Ta jedna strona mowi o czyms, czego SEWTEAM nie wykonuje, wiec
   podpisuje sie inna marka. Zamiast udawac, ze to ta sama firma,
   pas dostaje identyfikacje ZoiGO Creative Solutions: granatowa
   czern, limonke i techniczne etykiety w stylu rysunku
   architektonicznego, zgodnie z brand bookiem ZoiGO.
   Reszta strony zostaje w systemie SEWTEAM, wiec czytelnik widzi
   wyraznie, gdzie konczy sie jedna firma, a zaczyna druga.

   SWIADOMY KOMPROMIS: brand book ZoiGO przewiduje Cormorant
   Garamond i JetBrains Mono. NIE dociagamy ich z Google Fonts.
   Powod nie jest wydajnosciowy (9,4 s LCP dotyczylo starej strony
   glownej, nowa to inny plik), tylko proporcjonalny: dwie dodatkowe
   rodziny krojow obslugiwalyby jeden pas na jednej stronie.
   Sygnatura marki niesie sie kolorem, siatka i etykietami FIG.,
   a nie plikiem fontu. Mono bierzemy z zasobow systemowych.
   Gdyby Iwona chciala pelnej zgodnosci z brand bookiem, wystarczy
   dopisac <link> do JetBrains Mono w polu "uwagi" w _specs.py.
   ============================================================ */
.zg{
  --zg-bg:#06080F;        /* baza z brand booka ZoiGO */
  --zg-bg2:#0D1628;       /* warstwa kart */
  --zg-lime:#B8FF00;      /* akcent: etykiety, liczby, linki */
  --zg-lime-2:#D4FF7A;
  --zg-txt:#EEEEF5;
  --zg-mut:#A9B0C4;       /* 7,2:1 na #06080F */
  --zg-line:rgba(184,255,0,.22);
  --zg-mono:ui-monospace,'JetBrains Mono','Cascadia Mono','Consolas',monospace;
  background:var(--zg-bg);color:var(--zg-txt);
  background-image:linear-gradient(rgba(184,255,0,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(184,255,0,.045) 1px,transparent 1px);
  background-size:56px 56px;
}
.zg .sec-head h2,.zg h3{color:var(--zg-txt)}
.zg .sec-head p,.zg p{color:var(--zg-mut)}
.zg a{color:var(--zg-lime)}
.zg a:hover{color:var(--zg-lime-2)}
/* kicker SEWTEAM jest butelkowo zielony z rdzawa kreska: na granacie
   znika. W tym pasie przejmuje kolory ZoiGO. */
.zg .kicker,.zg .sec-head .kicker{color:var(--zg-lime)}
.zg .kicker::before{background:var(--zg-lime)}

/* szyna techniczna: FIG. 01 / PARTNER / ...
   Selektory z .zg z przodu, bo .zg p jest bardziej szczegolowe
   niz samo .zg-rail i przejelo kolor calej szyny. */
.zg .zg-rail{font-family:var(--zg-mono);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--zg-mut);display:flex;flex-wrap:wrap;gap:10px;
  align-items:center;padding-bottom:14px;border-bottom:1px solid var(--zg-line);
  margin-bottom:clamp(34px,5vw,54px)}
.zg .zg-rail span{color:rgba(238,238,245,.3)}
.zg .zg-rail span:first-child{color:var(--zg-lime);letter-spacing:.2em}
.zg .zg-rail b{font-weight:400;color:var(--zg-txt)}
.zg .zg-rail .dot::before{content:"\25CF";color:var(--zg-lime);margin-right:6px}

/* wizytowka: portret plus kim jest */
.zg-kto{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);
  gap:clamp(24px,4vw,48px);align-items:start}
.zg-kto>figure{margin:0;border:1px solid var(--zg-line);border-radius:4px;overflow:hidden;
  background:var(--zg-bg2)}
.zg-kto img{width:100%;height:auto;display:block}
.zg-kto figcaption{font-family:var(--zg-mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--zg-mut);padding:10px 12px;
  border-top:1px solid var(--zg-line)}
.zg-kto h2{font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.5rem,3.2vw,2.1rem);line-height:1.15;margin-bottom:16px}
.zg-kto p{margin-bottom:14px;max-width:62ch}
.zg-logo{width:150px;height:auto;margin-bottom:18px;display:block}

/* liczby */
.zg-liczby{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:18px;margin:26px 0 24px;padding-top:22px;border-top:1px solid var(--zg-line)}
.zg-liczby div b{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(1.3rem,2.4vw,1.8rem);color:var(--zg-lime);line-height:1;margin-bottom:7px}
.zg-liczby div span{font-family:var(--zg-mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--zg-mut);line-height:1.5;display:block}

/* bezposredni kontakt do ZoiGO */
.zg-kontakt{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
  font-size:.9rem;padding-top:20px;border-top:1px solid var(--zg-line)}
.zg-kontakt a{font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* karta case study */
.zg-case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,46%);
  gap:clamp(26px,4vw,52px);align-items:center;margin-top:clamp(30px,4vw,44px)}
.zg-case img{width:100%;height:auto;border-radius:4px;display:block}
.zg-case h3{font-family:var(--display);font-weight:700;font-size:clamp(1.2rem,2.4vw,1.6rem);
  line-height:1.2;margin-bottom:16px}
.zg-meta{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:9px}
.zg-meta li{display:grid;grid-template-columns:minmax(0,118px) minmax(0,1fr);gap:14px;
  font-size:.88rem;color:var(--zg-mut);padding-bottom:9px;
  border-bottom:1px solid rgba(238,238,245,.09)}
.zg-meta b{font-family:var(--zg-mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--zg-lime);font-weight:400;padding-top:3px}
.zg-wynik{margin:0;padding:18px 20px;background:var(--zg-bg2);
  border-left:3px solid var(--zg-lime);border-radius:0 4px 4px 0;font-size:.92rem}
.zg-wynik b{color:var(--zg-txt)}

/* pozostale realizacje.
   Flex, nie grid, i to celowo: realizacji jest siedem, a kazda siatka
   o stalej liczbie kolumn zostawia przy tej liczbie wyrwe w ostatnim
   rzedzie (przy czterech kolumnach bylo to 283 px pustki w prawym dolnym
   rogu). Tu ostatni, niepelny rzad centruje sie sam, a karty w kazdym
   rzedzie maja te sama szerokosc, bo flex-grow jest wylaczony. */
.zg-inne{display:flex;flex-wrap:wrap;justify-content:center;
  gap:22px;margin-top:clamp(28px,4vw,40px)}
.zg-inne figure{flex:0 1 100%}
@media(min-width:560px){.zg-inne figure{flex-basis:calc(50% - 11px)}}
@media(min-width:900px){.zg-inne figure{flex-basis:calc(33.333% - 15px)}}
@media(min-width:1180px){.zg-inne figure{flex-basis:calc(25% - 17px)}}
.zg-inne figure{margin:0;background:var(--zg-bg2);border:1px solid var(--zg-line);
  border-radius:4px;overflow:hidden}
.zg-inne img{width:100%;height:auto;display:block}
.zg-inne figcaption{padding:15px 17px 18px;font-size:.85rem;color:var(--zg-mut);line-height:1.5}
.zg-inne figcaption b{display:block;font-family:var(--display);color:var(--zg-txt);
  font-size:.98rem;margin-bottom:6px}
.zg-inne figcaption i{font-style:normal;font-family:var(--zg-mono);font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--zg-lime);
  display:block;margin-top:9px}

/* zastrzezenie pod pasem: kto wystawia fakture */
.zg-nota{margin-top:clamp(30px,4vw,44px);padding:18px 22px;
  border:1px dashed var(--zg-line);border-radius:4px;font-size:.87rem;line-height:1.62}
.zg-nota b{color:var(--zg-lime)}

@media(max-width:860px){
  .zg-kto{grid-template-columns:1fr}
  .zg-kto>figure{max-width:240px}
  .zg-case{grid-template-columns:1fr}
  .zg-case>div:last-child{order:-1}
}
@media(max-width:520px){
  .zg-meta li{grid-template-columns:1fr;gap:4px}
}

/* ============================================================
   EKRAN WPROWADZAJACY (tylko strona glowna)
   ------------------------------------------------------------
   Wzorzec: "light tunnel through void" z analogueagency.com.
   Tam jest granatowa czern i bialo-niebieski rozblysk; tutaj
   butelkowa zielen #085008, promienie w #80ba27 i biel.

   Calosc jest ZROBIONA GRADIENTAMI, bez ani jednego pliku
   graficznego. Powod: ten ekran staje sie pierwszym, co widzi
   uzytkownik, wiec nie moze dolozyc ani kilobajta do LCP.

   Jak dziala przewijanie: sekcja ma wybieg dwoch ekranow, a scena
   w srodku jest sticky. Skrypt liczy postep i podaje go w dwoch
   zmiennych: --zlaczenie (polowki zdania zjezdzaja do siebie
   i rosna) i --akapit (tekst pod spodem sie pojawia).

   WYJSCIE JEST ZWYKLYM PRZEWIJANIEM, bez zadnej animacji. Gdy zdanie
   i akapit sa gotowe, sticky puszcza scene i cala plansza odjezdza
   w gore, a hero wjezdza za nia. Wczesniej kadr zwijal sie w maly
   kwadrat i uciekal w gore; wygladalo to zle, wiec zostalo usuniete
   razem ze zmienna --wyjscie. Do tego kroku nie trzeba ani jednej
   linii skryptu: robi go przegladarka, wiec jest plynny zawsze,
   nawet gdy skrypt sie zatnie.

   Wartosci domyslne sa USTAWIONE NA STAN KONCOWY zdania, wiec
   bez JavaScriptu widac gotowe zdanie i akapit, a nie polowki
   rozrzucone po bokach. Wysokosc wybiegu dokłada dopiero skrypt.
   ============================================================ */
.intro{position:relative;height:100svh;--zlaczenie:1;--akapit:1}
/* Tlo sceny to ta sama czern-zielen, co brzeg kadru. Jest tu na wypadek,
   gdyby kadr nie pokryl calej sceny: pod spodem ma byc "void" z oryginalu,
   a nie biel body. */
.intro-scena{position:sticky;top:0;height:100svh;background:#021702}
.intro-kadr{position:absolute;inset:0;overflow:hidden;background:
  radial-gradient(circle at 50% 50%,
    #ffffff 0%, #eafbd2 3%, #b6e56a 8%, var(--acc) 15%,
    #2f7d18 30%, var(--green) 48%, #052d05 72%, #021702 100%)}

/* promienie: waskie kliny w kole, wygaszone w srodku i przy brzegach,
   zeby punkt zbiegu zostal czystym swiatlem */
.intro-promienie{position:absolute;inset:-25%;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255,255,255,0) 0deg .35deg,
    rgba(214,245,160,.5) .35deg .8deg,
    rgba(255,255,255,0) .8deg 2.2deg);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,
    transparent 0%, transparent 6%, #000 26%, #000 52%, transparent 82%);
  mask-image:radial-gradient(circle at 50% 50%,
    transparent 0%, transparent 6%, #000 26%, #000 52%, transparent 82%);
  animation:intro-obrot 150s linear infinite}
@keyframes intro-obrot{to{transform:rotate(360deg)}}

.intro-tresc{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(20px,3vw,34px);
  padding:0 var(--gut);text-align:center}

/* Zdanie jest JEDNYM ciagiem tekstu rozsunietym na boki, a nie dwoma
   osobnymi napisami. Dzieki temu polowki zawsze zejda sie idealnie,
   bez dublowania tresci i bez ryzyka, ze przy innej szerokosci ekranu
   zlacza sie z przesunieciem. */
.intro-zdanie{display:flex;flex-wrap:wrap;justify-content:center;
  gap:0 .34em;max-width:22ch;
  font-family:var(--display);font-weight:800;color:var(--white);
  font-size:clamp(1.9rem,6.4vw,4.6rem);line-height:1.02;letter-spacing:-.03em;
  text-shadow:0 4px 40px rgba(2,23,2,.55);
  /* Polowki zaczynaja MALE przy krawedziach i rosna, schodzac sie do srodka.
     Bez skalowania przy pelnym rozmiarze wyjezdzaly poza ekran (lewa do -189 px,
     prawa do 1462 px na oknie 1280), wiec pierwsze, co widzial uzytkownik,
     to byly dwa uciete napisy. Skala dziala tez na przesuniecie polowek,
     bo licza sie w ukladzie wspolrzednych rodzica. */
  transform:scale(calc(.46 + .54 * var(--zlaczenie)))}
.intro-zdanie span{display:block;
  transform:translateX(calc(var(--kier) * 34vw * (1 - var(--zlaczenie))));
  opacity:calc(.45 + .55 * var(--zlaczenie))}
.intro-l{--kier:-1}
.intro-p{--kier:1}

.intro-akapit{max-width:56ch;color:rgba(255,255,255,.9);
  font-size:clamp(.92rem,1.5vw,1.06rem);line-height:1.65;
  opacity:var(--akapit);
  transform:translateY(calc((1 - var(--akapit)) * 16px))}

/* Naglowek na stronie glownej musi byc PRZYPIETY, a nie odjezdzajacy.
   Powod: jest pozycjonowany absolutnie na gorze dokumentu, wiec po trzech
   ekranach wprowadzenia hero zostaloby bez menu i bez logo, czyli dokladnie
   z problemem, ktory naprawialismy wczesniej.

   Pigulka jest tlem, a nie sam pasek: to wzorzec z oryginalu (floating
   translucent pill). Polprzezroczysta biel z rozmyciem czyta sie i na
   ciemnym wprowadzeniu, i na jasnym hero, wiec nie trzeba przelaczac
   kolorow skryptem przy przewijaniu. */
.glowna .hdr{position:fixed;padding:14px var(--gut)}
.glowna .hdr::before{content:"";position:absolute;inset:8px var(--gut);
  border-radius:999px;background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 10px 34px -16px rgba(2,23,2,.55);z-index:-1}
.glowna .hdr-nav,.glowna .hdr-tel,.glowna .hdr-burger{position:relative}
.glowna .hdr-nav{margin-right:8px}
.glowna .hdr-tel{margin-right:16px}
@media (max-width:900px){
  .glowna .hdr-nav{margin-right:0}
  .glowna .hdr-burger{margin-right:8px}
}

@media (prefers-reduced-motion:reduce){
  .intro-promienie{animation:none}
  .intro-zdanie span{transform:none}
}