/* Wspolny styl stron firmowych. Wydzielony z index.html przy przebudowie pod
   wyszukiwarki (24.09.2026): podstron jest piec, wiec jeden plik z cache bije
   piec kopii tego samego CSS w <style>. Zero bibliotek, zero zapytan do sieci. */
:root{
  --paper:#f7f5f1; --panel:#fffdfa; --ink:#16130f; --ink-2:#4a443c; --ink-3:#7d7568;
  --line:#e0dad0; --line-2:#cec6b8;
  --accent:#b45309; --accent-soft:#fdf3e7; --znak:#d97706;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{ --paper:#101114; --panel:#17191d; --ink:#eef0f3; --ink-2:#b6bcc5; --ink-3:#848b96;
         --line:#24272c; --line-2:#343941; --accent:#e8912f; --accent-soft:#2a1b0c; --znak:#d97706; }
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
     font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:980px;margin:0 auto;padding:0 24px}
a{color:var(--accent)}
img{max-width:100%;height:auto}

header{border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.logo{font-weight:660;letter-spacing:-.02em;font-size:17px;color:var(--ink);text-decoration:none}
nav a{margin-left:22px;color:var(--ink-2);text-decoration:none;font-size:14.5px}
nav a:hover{color:var(--ink)}
@media(max-width:760px){nav{display:none}}

.hero{padding:84px 0 62px}
h1{font-size:clamp(32px,5vw,52px);line-height:1.1;letter-spacing:-.03em;margin:0 0 24px;font-weight:660;max-width:20ch}
.lead{font-size:clamp(18px,2.1vw,21px);color:var(--ink-2);max-width:64ch;margin:0}
.kicker{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
        color:var(--accent);margin-bottom:20px}

section{padding:60px 0;border-top:1px solid var(--line)}
h2{font-size:clamp(24px,3vw,31px);letter-spacing:-.02em;margin:0 0 14px;font-weight:640}
h3{letter-spacing:-.01em}
.sub{color:var(--ink-2);max-width:64ch;margin:0 0 32px}
.tresc p{color:var(--ink-2);max-width:68ch}
.tresc ul{color:var(--ink-2);max-width:68ch;padding-left:20px}
.tresc li{margin-bottom:7px}
.tresc h3{margin:34px 0 10px;font-size:19px}

/* liczby jako dowod, nie ozdoba */
.liczby{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
        background:var(--line);border:1px solid var(--line);margin-top:40px}
.liczba{background:var(--panel);padding:22px}
.liczba b{display:block;font-size:27px;font-weight:660;letter-spacing:-.02em}
.liczba span{font-size:14px;color:var(--ink-3)}

/* Kart jest cztery, wiec uklad 2x2, a nie `auto-fit`: przy trzech kolumnach czwarta
   karta zostawala sama, a obok niej swiecila pusta kratka w kolorze siatki. */
.cols{display:grid;grid-template-columns:1fr;gap:1px;
      background:var(--line);border:1px solid var(--line)}
@media(min-width:640px){.cols{grid-template-columns:repeat(2,1fr)}}
.col{background:var(--panel);padding:26px}
.col h3{margin:0 0 9px;font-size:17.5px}
.col p{margin:0 0 14px;color:var(--ink-2);font-size:15.5px}
.col a{font-size:14.5px;text-decoration:none}

.work{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.item{background:var(--panel);padding:28px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:start}
.item h3{margin:0 0 7px;font-size:19px}
.item .role{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
            color:var(--accent);display:block;margin-bottom:11px}
.item p{margin:0 0 12px;color:var(--ink-2);font-size:15.5px;max-width:60ch}
.item .stats{font-family:var(--mono);font-size:13px;color:var(--ink-3)}
.item .go{white-space:nowrap;font-size:14.5px;text-decoration:none}
@media(max-width:640px){.item{grid-template-columns:1fr}}

.how{display:grid;gap:26px;max-width:70ch}
.how div h3{margin:0 0 6px;font-size:17px}
.how div p{margin:0;color:var(--ink-2);font-size:15.5px}

.faq{max-width:70ch}
.faq details{border-top:1px solid var(--line);padding:16px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:560;font-size:16.5px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+ ";color:var(--accent);font-family:var(--mono)}
.faq details[open] summary::before{content:"\2212 "}
.faq p{color:var(--ink-2);margin:12px 0 0;font-size:15.5px}

.cta{padding:70px 0;border-top:1px solid var(--line)}
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
     padding:14px 26px;font-weight:560;font-size:16px;margin-top:18px;border:0;cursor:pointer;
     font-family:inherit}
.btn:disabled{opacity:.55;cursor:default}

/* formularz: uklad i pole-pulapka jak na fabos.pro */
form.kontakt{max-width:560px;margin-top:26px}
form.kontakt label{display:block;font-size:14px;color:var(--ink-2);margin:16px 0 6px}
form.kontakt input,form.kontakt textarea{width:100%;padding:11px 13px;font-size:16px;font-family:inherit;
  background:var(--panel);color:var(--ink);border:1px solid var(--line-2)}
form.kontakt textarea{min-height:140px;resize:vertical}
form.kontakt .pulapka{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
form.kontakt .zgoda{display:flex;gap:10px;align-items:flex-start;margin-top:20px;font-size:14.5px;color:var(--ink-2)}
form.kontakt .zgoda input{width:auto;margin-top:4px}
.komunikat{margin-top:16px;font-size:15px}
.komunikat.ok{color:#15803d}
.komunikat.blad{color:#b91c1c}
@media (prefers-color-scheme:dark){.komunikat.ok{color:#4ade80}.komunikat.blad{color:#f87171}}

.okruchy{font-size:13.5px;color:var(--ink-3);padding-top:22px}
.okruchy a{color:var(--ink-3)}

footer{border-top:1px solid var(--line);padding:30px 0;color:var(--ink-3);font-size:14px}
footer a{color:var(--ink-3)}
.klauzula{margin-top:14px;font-size:12.5px;color:var(--ink-3);max-width:80ch}

/* ==========================================================================
   ZYCIE STRONY (24.09.2026). Eman: „brakuje mi ruchu, interakcji, na ruchy".
   Trzy warstwy: ruch ciagly (scena), reakcja na kursor (poswiata i pochylenie),
   odslanianie przy przewijaniu. Wszystko w czystym JS, zero bibliotek, zero
   zapytan do sieci - tak samo jak na fabos.pro.
   Kazdy efekt gasnie przy `prefers-reduced-motion`, patrz koniec pliku.
   ========================================================================== */

/* --- poswiata podazajaca za kursorem -------------------------------------- */
.zywy{position:relative;isolation:isolate}
.zywy::before{
  content:"";position:absolute;inset:-10% -5%;z-index:-1;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%),
             color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%);
  opacity:0;transition:opacity .45s ease;
}
.zywy.aktywny::before{opacity:1}

/* siatka hali w tle naglowka, dryfuje powoli */
.hero{position:relative;overflow:hidden}
.hero .siatka{
  position:absolute;inset:-40px;z-index:-2;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(75% 65% at 50% 35%,#000 35%,transparent 100%);
  animation:dryf 38s linear infinite;
}
@keyframes dryf{to{background-position:52px 52px}}

/* --- scena: linia technologiczna z plynacymi impulsami -------------------- */
.scena{margin-top:40px;border:1px solid var(--line);background:var(--panel);
       padding:22px 20px 14px;position:relative;overflow:hidden}
.scena-naglowek{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:6px}
.scena-naglowek b{color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}
.scena svg{display:block;width:100%;height:118px;overflow:visible}
.tor{fill:none;stroke:var(--line-2);stroke-width:2}
.wezel circle{fill:var(--panel);stroke:var(--line-2);stroke-width:2;
              transition:stroke .25s ease, fill .25s ease}
.wezel text{font-family:var(--sans);font-size:11.5px;fill:var(--ink-3);text-anchor:middle}
.wezel.pulsuje circle{stroke:var(--accent);fill:color-mix(in srgb,var(--accent) 16%,var(--panel))}
.wezel.pulsuje text{fill:var(--ink)}
.impuls{fill:var(--accent)}

/* pasek zdarzen pod scena */
.zdarzenia{border-top:1px solid var(--line);margin-top:10px;padding-top:9px;
  font-family:var(--mono);font-size:12.5px;line-height:20px;color:var(--ink-2);
  height:29px;overflow:hidden}
/* 29 px = 20 px wiersza + 9 px odstepu u gory. Przy `box-sizing:border-box` (ustawionym
   globalnie na poczatku pliku) wysokosc obejmuje takze padding, wiec wpisane tu wczesniej
   20 px zostawialo tekstowi 11 px i ucinalo go od dolu PRZEZ CALY CZAS, nie tylko podczas
   animacji wjazdu. Zmierzone, nie ocenione na oko: `getBoundingClientRect()` pokazywal
   dol tekstu 10 px nizej niz dol paska. */
.zdarzenia span{display:block;animation:wjazd .5s ease}
@keyframes wjazd{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}

/* --- kafle liczb i karty reaguja na kursor -------------------------------- */
.liczba,.col{position:relative;transition:transform .25s ease, border-color .25s ease}
.liczba b{font-variant-numeric:tabular-nums}
.cols{perspective:900px}
.col{transform-style:preserve-3d;will-change:transform}
.col::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(240px circle at var(--kx,50%) var(--ky,50%),
             color-mix(in srgb,var(--accent) 12%,transparent),transparent 65%);
}
.col:hover::after{opacity:1}
.col:hover h3{color:var(--accent)}
.col h3{transition:color .25s ease}
.liczba:hover{transform:translateY(-3px)}
.liczba::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent);
  transition:width .35s ease;
}
.liczba:hover::after{width:100%}

/* podkreslenie wjezdzajace pod pozycjami menu */
nav a{position:relative}
nav a::after{content:"";position:absolute;left:0;bottom:-4px;height:1.5px;width:0;
  background:var(--accent);transition:width .25s ease}
nav a:hover::after{width:100%}

/* --- odslanianie przy przewijaniu ----------------------------------------- */
.odslon{opacity:0;transform:translateY(18px);
        transition:opacity .6s ease, transform .6s ease}
.odslon.widoczny{opacity:1;transform:none}

/* --- szacunek dla ustawien uzytkownika ------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .hero .siatka{animation:none}
  .zywy::before{display:none}
  .zdarzenia span{animation:none}
  .odslon{opacity:1;transform:none;transition:none}
  .liczba,.col{transition:none}
}

/* --- znak w naglowku ------------------------------------------------------ */
.logo{display:inline-flex;align-items:center;gap:10px}
.logo .znak{display:block;width:28px;height:28px}
.logo .ciemnytryb{display:none}
@media (prefers-color-scheme:dark){
  /* Czarny element sygnetu zniknalby na ciemnym tle, wiec w tym trybie wchodzi
     wariant z jasnym elementem. Dwa obrazki zamiast filtra CSS: `invert` zamienilby
     takze niebieski i bursztyn na ich negatywy, czyli zepsul cala palete. */
  .logo .jasnytryb{display:none}
  .logo .ciemnytryb{display:block}
}

/* ==========================================================================
   SUWAK „ARKUSZ kontra SYSTEM" (pomysl z 24.09.2026)
   Strona mowila tekstem „jesli cos dziala na arkuszach, a powinno dzialac samo",
   ale nigdzie tego nie pokazywala. Tu widac obie strony naraz, a granice przesuwa
   sam odwiedzajacy.
   Kolory prawej strony sa WZIETE Z FABOS-a (granat + bursztyn), zeby podglad
   wygladal jak realny ekran systemu, a nie jak abstrakcyjna ilustracja.
   ========================================================================== */
:root{
  --screen:#111827; --screen-2:#1f2937; --screen-line:#2b3444;
  --screen-ink:#eef0f3; --screen-dim:#98a2b3; --signal:#f2b01e;
}

.ba{position:relative;border:1px solid var(--line-2);overflow:hidden;
    height:440px;background:var(--panel);user-select:none;touch-action:pan-y}
.ba-l,.ba-r{position:absolute;inset:0;padding:22px;overflow:hidden}

/* serce efektu: arkusz widoczny od lewej do --x */
.ba-l{background:#fbfbf7;color:#222;z-index:2;
      clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.ba-r{background:var(--screen);color:var(--screen-ink)}

.ba-tag{position:absolute;top:16px;z-index:3;font-family:var(--mono);font-size:11.5px;
        letter-spacing:.12em;text-transform:uppercase;padding:5px 9px}
.ba-tag.l{left:16px;background:#fde8d7;color:#8a2c0a}
.ba-tag.r{right:16px;background:var(--screen-2);color:#6ee0a8;border:1px solid var(--screen-line)}

.handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:var(--signal);
        z-index:4;transform:translateX(-1px);pointer-events:none}
.handle::after{content:"◀ ▶";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
        background:var(--signal);color:#1a1300;font:600 11px/1 var(--mono);padding:10px 8px;
        white-space:nowrap}

/* Niewidzialny suwak na calym kadrze. Jeden element obsluguje mysz, dotyk ORAZ
   klawiature, wiec nie trzeba osobno pisac obslugi przeciagania - a to wlasnie
   reczne przeciaganie bywa zrodlem bledow, bo `setPointerCapture` potrafi odebrac
   klikalnosc elementom pod spodem. */
.ba-suwak{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;
          z-index:5;margin:0}

/* arkusz */
.xls{margin-top:34px;font:13px/1.2 Calibri,Carlito,Arial,sans-serif;border-collapse:collapse;width:760px}
.xls td,.xls th{border:1px solid #d4d4d4;padding:6px 7px;white-space:nowrap}
.xls th{background:#efefef;font-weight:400;color:#666;text-align:left}
.xls .r{background:#ffd7d7}.xls .y{background:#fff2a8}.xls .g{color:#999}
.xls-tabs{position:absolute;left:22px;bottom:14px;display:flex;gap:2px;
          font:12px Calibri,Arial,sans-serif}
.xls-tabs span{background:#eee;border:1px solid #ccc;padding:4px 10px;color:#444}
.xls-tabs span.akt{background:#fff;font-weight:600;color:#111}
.sticky{position:absolute;right:46%;top:250px;transform:rotate(3deg);background:#fff59d;color:#333;
        font:15px/1.3 "Comic Sans MS","Segoe Print",cursive;padding:12px 14px;width:170px;
        box-shadow:2px 4px 8px rgba(0,0,0,.18)}

/* system */
.sys{margin-top:34px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.sys .c{background:var(--screen-2);border:1px solid var(--screen-line);padding:14px 16px}
.sys .c h4{margin:0;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
           color:var(--screen-dim)}
.sys .v{font-weight:700;font-size:30px;line-height:1.1;margin-top:4px;font-variant-numeric:tabular-nums}
.sys .v.ok{color:#6ee0a8}
.sys .v.sig{color:var(--signal)}
.sys p{margin:8px 0 0;font-size:13px;color:var(--screen-dim)}
.steps{display:flex;gap:6px;margin-top:10px}
.steps i{flex:1;height:6px;background:var(--screen-line)}
.steps i.d{background:#6ee0a8}.steps i.n{background:var(--signal)}
.ba-hint{margin-top:12px;font-family:var(--mono);font-size:12px;color:var(--ink-3)}

@media(max-width:760px){.ba{height:560px}.sticky{display:none}.xls{width:auto;font-size:11.5px}}

/* prawa strona suwaka to PRAWDZIWY ekran systemu (zrzut z anonimizowanej kopii),
   pokazany w naturalnej skali i przyciety kadrem, a nie pomniejszony do nieczytelnosci */
.ba-r{padding:0}
.ba-zrzut{display:block;width:1280px;max-width:none;height:auto;
          transform-origin:top left;position:absolute;top:44px;left:0}
.ba-tag.r{z-index:3}

/* lewa strona: to, co robi arkusz arkuszem */
.xls-belka{position:absolute;top:0;left:0;right:0;height:26px;background:#217346;color:#fff;
  font:12px/26px Arial,sans-serif;padding:0 12px;overflow:hidden;white-space:nowrap}
.xls-formula{position:absolute;top:26px;left:0;right:0;height:24px;background:#f5f5f5;
  border-bottom:1px solid #d4d4d4;display:flex;align-items:center;gap:10px;
  font:12px/24px Arial,sans-serif;color:#333;padding:0 10px}
.xls-formula span{min-width:44px;border:1px solid #ccc;background:#fff;padding:1px 6px}
.xls-formula em{font-style:italic;color:#888}
.xls{margin-top:62px}
.xls th.nr{background:#efefef;color:#666;text-align:center;width:26px;font-weight:400}
.xls tr.xls-kol th{background:#e6e6e6;color:#555;text-align:center;font-weight:400;height:18px}

/* Etykiety na DOL kadru: u gory zaslanialy pasek formuly po lewej i pasek menu
   systemu po prawej, czyli dokladnie te elementy, po ktorych poznaje sie oba
   narzedzia. Zakladki arkusza ustepuja im miejsca. */
.ba-tag{top:auto;bottom:14px}
.ba-tag.l{left:16px}
.ba-tag.r{right:16px}
.xls-tabs{bottom:46px}
.ba-zrzut{top:0}

/* ==========================================================================
   OS POWROTU (pomysl Emana 24.09.2026)
   Pionowa podzialka przy krawedzi okna, po ktorej jezdzi karetka. Jej polozenie
   pokazuje, gdzie sie jest na stronie; klikniecie wysyla ja na gore, a podczas
   przejazdu mija slowa opisujace droge od arkusza do systemu.
   Pierwotny pomysl mowil o nakretce na precie gwintowanym. Podzialka robi to samo,
   ale nie udaje czesci maszyny w tekscie o oprogramowaniu.
   ========================================================================== */
.os{position:fixed;right:24px;top:96px;bottom:96px;width:26px;z-index:40;
    opacity:0;transition:opacity .4s ease;pointer-events:none}
.os.widac{opacity:1;pointer-events:auto}

/* sama szyna: cienka linia z kreskami podzialki */
.os-szyna{position:absolute;left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%);
  background:var(--line-2)}
.os-szyna::after{content:"";position:absolute;left:-5px;top:0;bottom:0;width:11px;
  background-image:repeating-linear-gradient(to bottom,
      var(--line-2) 0 1px, transparent 1px 14px);
  opacity:.75}

/* karetka: prostokat z miedziana krawedzia, jedzie wraz z przewijaniem */
.os-karetka{position:absolute;left:50%;top:0;width:22px;height:12px;
  transform:translate(-50%,-50%);background:var(--panel);
  border:1px solid var(--line-2);border-left:3px solid var(--znak);
  cursor:pointer;transition:border-color .2s ease, background .2s ease}
.os-karetka:hover{background:var(--accent-soft);border-left-color:var(--accent)}
.os-karetka:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* slowo mijane podczas przejazdu, po lewej stronie osi */
/* Slowo mijane w drodze. Pojawia sie od razu, zostaje na chwile i gasnie samo,
   dlatego zanikanie jest DLUZSZE od pojawienia sie: znika lagodnie, wchodzi zdecydowanie. */
.os-slowo{position:absolute;right:34px;top:0;transform:translateY(-50%);
  font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;white-space:nowrap;color:var(--ink);background:var(--paper);
  padding:6px 10px;border:1px solid var(--line-2);opacity:0;
  transition:opacity .55s ease}
.os-slowo.widoczne{opacity:1;transition:opacity .12s ease}

@media(max-width:900px){.os{display:none}}
@media (prefers-color-scheme:dark){.os-karetka{background:var(--panel)}}

/* Sam prostokat ma 22x12 px, czyli mniej niz zalecane 24x24 dla celu klikniecia.
   Powiekszamy OBSZAR trafienia niewidzialna otoczka, zamiast rysowac wiekszy element:
   wyglad zostaje delikatny, a trafic da sie bez celowania. */
.os-karetka::before{content:"";position:absolute;inset:-12px -8px;cursor:pointer}
/* Napis stoi przy GORNYM koncu osi, czyli tam, dokad sie jedzie, i jest widoczny
   przez caly czas przewijania. Przy karetce kolidowalby ze slowami mijanymi w drodze. */
.os-cel{position:absolute;right:0;top:-34px;font-family:var(--mono);font-size:13px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
  background:var(--paper);border:1px solid var(--line-2);padding:6px 10px;cursor:pointer;
  white-space:nowrap;transition:background .2s ease,color .2s ease}
.os-cel:hover{background:var(--accent-soft)}
.os-cel:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* pasek rozliczenia banderol pod tabela arkusza */
.xls-band{margin-top:10px;font:12px/1.5 Calibri,Carlito,Arial,sans-serif;color:#333;
  background:#fff8e1;border:1px solid #e6d9a8;padding:6px 9px;display:inline-block}
.xls-band b{font-weight:700}
.xls .c{text-align:right}
.xls tr.sum td,.xls tr.sum th{background:#f1f1f1;font-weight:700}

/* Po wstawieniu PRAWDZIWEGO arkusza (13 wierszy zamiast szesciu) kadr zrobil sie
   za ciasny: karteczka zaslaniala kolumne z realizacja, a zakladki wchodzily na
   wiersze z bledami. Wyzszy kadr, karteczka wyzej i mniejsza, zakladki na samym dole. */
.ba{height:508px}
.sticky{top:96px;right:40%;width:150px;font-size:13.5px;padding:10px 12px}
.xls-tabs{bottom:12px}
.xls-band{position:absolute;left:22px;bottom:42px;margin:0}
@media(max-width:760px){.ba{height:600px}}
/* Etykieta „Arkusz" siedzi w lewym dolnym rogu, wiec zakladki zaczynaja sie za nia. */
.xls-tabs{left:96px}