/* =============================================================================
   hover.css — stany :hover odtworzone w czystym CSS
   =============================================================================

   Poprzedni kreator stron realizowal WSZYSTKIE efekty hover w JavaScripcie
   (podmiana klasy wariantu + animacja inline'owych stylow klatka po klatce).
   Po zamrozeniu strony do statycznego HTML nic z tego nie zostaje, wiec kazdy
   przycisk i element nawigacji przestalby reagowac na myszke. Ten plik odtwarza
   zmierzone zachowanie oryginalu regulami :hover.

   WSZYSTKIE wartosci nizej sa ZMIERZONE na zywej kopii przed zamrozeniem
   (Playwright, probkowanie per-klatka przez requestAnimationFrame, dopasowanie
   krzywej metoda najmniejszych kwadratow). Nie sa zgadniete.

   ---------------------------------------------------------------------------
   OD CZEGO ZALEZY TEN PLIK (musi przetrwac odbrandowanie):
   ---------------------------------------------------------------------------
   * klasy `sl-2njkm`, `sl-10hi8wr` oraz klasy wariantow `sl-v-19powf1`,
     `sl-v-635vzl`, `sl-v-19faic0`, `sl-v-10hi8wr`, `sl-v-zzkmxz`, `sl-v-s0caqm`
     — to one rozrozniaja szesc rodzajow przyciskow, kazdy ma INNY hover;
   * `sl-c13ero` (okienko ikony, 18px, overflow:hidden) i jego dwoje dzieci;
   * `sl-sSSxw`, `sl-pr6n3v`, `sl-v-pr6n3v` (pozycja nawigacji);
   * atrybut `data-border="true"` — bez niego pseudoelement ::after nie ma
     `content` z arkusza bazowego; reguly ponizej dokladaja wlasny `content`,
     wiec ramka i tak zadziala, ale wtedy rysuje ja juz ten plik;
   * zmienne `--sl-*` definiowane na `body` (jest fallback na literal, wiec
     ich utrata zmienia tylko mozliwosc przetematyzowania, nie wyglad).
   `data-highlight` NIE jest potrzebny — nie uzywam go w zadnym selektorze.
   `data-sl-name` tez nie (i tak zostal usuniety w kroku odbrandowania).

   ---------------------------------------------------------------------------
   CZEGO TU CELOWO NIE MA:
   ---------------------------------------------------------------------------
   * linkow w rich-texcie (`a.sl-text:hover`) i stylow `.sl-*` w iframe'ach —
     to juz dziala z arkusza bazowego, duplikat tylko by przeszkadzal;
   * akordeonu (`.sl-slkivp`) i hamburgera (`.sl-1mrh2jl`) — maja
     `data-highlight`, ale pomiar nie wykryl na nich ZADNEJ zmiany stylu;
   * obrotu strzalki w pozycji nawigacji (0deg -> 180deg, ~700 ms) — to
     wskaznik otwarcia dropdownu, nalezy do dropdown.js, nie do hovera.
   * stanu `:active` — oryginal nie ma zadnego (sprawdzone pomiarem przy
     wcisnietym przycisku myszy).

   ---------------------------------------------------------------------------
   O `!important`:
   ---------------------------------------------------------------------------
   Przyciski maja `background-color` i `box-shadow` w atrybucie `style=""`
   (inline), a styl inline wygrywa z kazdym selektorem. Jedyny sposob, zeby
   arkusz mogl te dwie wlasciwosci ruszyc, to `!important`. Dotyczy to
   wylacznie tych dwoch deklaracji — nigdzie indziej go nie ma.
   Dlatego stan bazowy tez jest tu odtworzony (zmienne `--slh-btn-*`):
   skoro nadpisujemy inline, musimy podac rowniez wartosc spoczynkowa.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   0. Tokeny czasu, krzywych i kolorow
   -------------------------------------------------------------------------- */

/* `body`, a nie `:root`, bo to na `body` siedza zmienne kolorow.          */
body {
  /* Przyciski: 300 ms, cubic-bezier(.44,0,.56,1).
     Pomiar (przycisk "Umow demo", 20 probek): start t=53 ms po wejsciu
     kursora (to opoznienie JS-a oryginalu, nie czesc animacji), koniec
     t=353 ms. Dopasowanie krzywej: RMSE 0.0020 dla (.44,0,.56,1) — wolne
     przeszukanie calej rodziny cubic-bezier(x1,0,x2,1) wskazuje dokladnie
     na te sama krzywa. Dla porownania: linear RMSE 0.0517, ease 0.0656. */
  --slh-dur: 300ms;
  --slh-ease: cubic-bezier(0.44, 0, 0.56, 1);

  /* Nawigacja: oryginal uzywa tu sprezyny (bez przeregulowania), nie krzywej
     czasowej. Najlepsze przyblizenie: 640 ms cubic-bezier(.18,.92,.3,1),
     RMSE 0.0020 na 30 probkach. Dla porownania easeOutQuart 0.0124. */
  --slh-nav-dur: 640ms;
  --slh-nav-ease: cubic-bezier(0.18, 0.92, 0.3, 1);

  --slh-blue:  var(--sl-blue-500, #3b82f6);
  --slh-glow:  var(--sl-blue-300, #93bbfc);
  --slh-ink:   var(--sl-gray-800, #3d3d3d);
  --slh-white: var(--sl-white, #fff);
  --slh-hair:  var(--sl-gray-300, #d1d5db);
  --slh-ink80: rgba(61, 61, 61, 0.8);
  --slh-black: var(--sl-black, #000);
}


/* =============================================================================
   1. PRZYCISKI CTA — .sl-2njkm.sl-10hi8wr
   =============================================================================
   Szesc wariantow, kazdy z innym hoverem. Stan trzymamy w zmiennych
   (--slh-btn-*), zeby reguly stanu byly jednolinijkowe i zeby ten sam zestaw
   wartosci obsluzyl :hover i :focus-visible bez powielania deklaracji.
   Zmienne same sie nie animuja, ale wlasciwosci, ktore je czytaja — tak. */


/* --- 1a. Wartosci spoczynkowe (rowne temu, co siedzi w style="") --------- */

/* "Umow demo" (sl-v-19powf1, 17x) i "Zaloguj Sie" (sl-v-635vzl, 17x):
   przezroczyste tlo, delikatny cien pod spodem, 1px szara ramka. */
.sl-2njkm.sl-10hi8wr.sl-v-19powf1,
.sl-2njkm.sl-10hi8wr.sl-v-635vzl {
  --slh-btn-bg: rgba(0, 0, 0, 0);
  --slh-btn-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04);
  --slh-btn-fg: var(--slh-ink);
  --slh-btn-border-w: 1px;
  --slh-btn-border-c: var(--slh-hair);
}

/* "Zobacz Integracje" / "Zacznij juz dzis" / "Podlacz" (sl-v-19faic0, 18x):
   to samo, ale bez cienia. */
.sl-2njkm.sl-10hi8wr.sl-v-19faic0 {
  --slh-btn-bg: rgba(0, 0, 0, 0);
  --slh-btn-shadow: none;
  --slh-btn-fg: var(--slh-ink);
  --slh-btn-border-w: 1px;
  --slh-btn-border-c: var(--slh-hair);
}

/* Przycisk w hero (sl-v-10hi8wr, 5x): juz niebieski, z jasna poswiata. */
.sl-2njkm.sl-10hi8wr.sl-v-10hi8wr {
  --slh-btn-bg: var(--slh-blue);
  --slh-btn-shadow: inset 0px 0px 29px 0px var(--slh-glow);
}

/* Przycisk w cenniku (sl-v-s0caqm, 2x): ciemny, z czarna poswiata do srodka. */
.sl-2njkm.sl-10hi8wr.sl-v-s0caqm {
  --slh-btn-bg: var(--slh-ink80);
  --slh-btn-shadow: inset 0px 0px 60px 0px var(--slh-black);
}

/* sl-v-zzkmxz (bialy przycisk w sekcjach CTA, 53x) celowo nie ma tu nic:
   pomiar pokazal, ze na hover zmienia mu sie WYLACZNIE pozycja ikony.
   Gdybysmy zadeklarowali mu background-color/box-shadow przez zmienna,
   nadpisalibysmy jego dosc zlozony cien inline bez potrzeby. */


/* --- 1b. Stan wskazany kursorem ------------------------------------------ */

/* @media (hover: hover) — na dotyku :hover potrafi "zaciac sie" po tapnieciu
   i przycisk zostalby niebieski az do nastepnego dotkniecia gdzie indziej. */
@media (hover: hover) and (pointer: fine) {

  /* Przyciski obrysowe: tlo wjezdza na niebiesko, ramka znika, tekst i ikona
     bieleja, cien przeskakuje na poswiate do srodka. */
  .sl-2njkm.sl-10hi8wr.sl-v-19powf1:hover,
  .sl-2njkm.sl-10hi8wr.sl-v-635vzl:hover,
  .sl-2njkm.sl-10hi8wr.sl-v-19faic0:hover {
    --slh-btn-bg: var(--slh-blue);
    --slh-btn-shadow: inset 0px 0px 29px 0px var(--slh-glow);
    --slh-btn-fg: var(--slh-white);
    --slh-btn-border-w: 0px;
    --slh-btn-border-c: rgba(0, 0, 0, 0);
    --slh-btn-slide: translateX(28px);
  }

  /* Hero: niebieski -> grafitowy, poswiata z niebieskiej na biala 22%. */
  .sl-2njkm.sl-10hi8wr.sl-v-10hi8wr:hover {
    --slh-btn-bg: var(--slh-ink);
    --slh-btn-shadow: inset 0px 0px 29px 0px rgba(255, 255, 255, 0.22);
    --slh-btn-slide: translateX(28px);
  }

  /* Cennik: grafitowy -> niebieski, poswiata z czarnej na niebieska. */
  .sl-2njkm.sl-10hi8wr.sl-v-s0caqm:hover {
    --slh-btn-bg: var(--slh-blue);
    --slh-btn-shadow: inset 0px 0px 60px 0px var(--slh-glow);
    --slh-btn-slide: translateX(28px);
  }

  /* Bialy przycisk CTA: tylko przesuniecie ikony. */
  .sl-2njkm.sl-10hi8wr.sl-v-zzkmxz:hover {
    --slh-btn-slide: translateX(28px);
  }
}

/* --- 1c. DODANE PONAD ORYGINAL: ten sam stan dla klawiatury --------------
   Oryginal nie mial zadnego stylu fokusu — po wyrzuceniu JS-a osoba
   poruszajaca sie tabem nie widzialaby, na czym stoi. `:focus-visible`
   odpala sie tylko przy nawigacji klawiatura, wiec klikniecie myszka
   nie zostawia po sobie podswietlonego przycisku. */
.sl-2njkm.sl-10hi8wr.sl-v-19powf1:focus-visible,
.sl-2njkm.sl-10hi8wr.sl-v-635vzl:focus-visible,
.sl-2njkm.sl-10hi8wr.sl-v-19faic0:focus-visible {
  --slh-btn-bg: var(--slh-blue);
  --slh-btn-shadow: inset 0px 0px 29px 0px var(--slh-glow);
  --slh-btn-fg: var(--slh-white);
  --slh-btn-border-w: 0px;
  --slh-btn-border-c: rgba(0, 0, 0, 0);
  --slh-btn-slide: translateX(28px);
}

.sl-2njkm.sl-10hi8wr.sl-v-10hi8wr:focus-visible {
  --slh-btn-bg: var(--slh-ink);
  --slh-btn-shadow: inset 0px 0px 29px 0px rgba(255, 255, 255, 0.22);
  --slh-btn-slide: translateX(28px);
}

.sl-2njkm.sl-10hi8wr.sl-v-s0caqm:focus-visible {
  --slh-btn-bg: var(--slh-blue);
  --slh-btn-shadow: inset 0px 0px 60px 0px var(--slh-glow);
  --slh-btn-slide: translateX(28px);
}

.sl-2njkm.sl-10hi8wr.sl-v-zzkmxz:focus-visible {
  --slh-btn-slide: translateX(28px);
}


/* --- 1d. Konsumenci zmiennych -------------------------------------------- */

/* Tlo: animowane. Cien: BEZ przejscia, bo w oryginale przeskakuje w jednej
   klatce (pomiar: przy t=35 ms cien byl juz docelowy, a tlo przebylo 1/69
   drogi). Dlatego `transition` wymienia tylko `background-color`. */
.sl-2njkm.sl-10hi8wr.sl-v-19powf1,
.sl-2njkm.sl-10hi8wr.sl-v-635vzl,
.sl-2njkm.sl-10hi8wr.sl-v-19faic0,
.sl-2njkm.sl-10hi8wr.sl-v-10hi8wr,
.sl-2njkm.sl-10hi8wr.sl-v-s0caqm {
  /* !important: patrz naglowek — te dwie wlasciwosci sa w style="" */
  background-color: var(--slh-btn-bg) !important;
  box-shadow: var(--slh-btn-shadow) !important;
  transition: background-color var(--slh-dur) var(--slh-ease);
}

/* Ramka. Oryginal chowa ja plynnie: szerokosc 1px -> 0px i kolor -> przezroczysty,
   ta sama krzywa co tlo. Rysuje ja pseudoelement ::after (pozycjonowany
   absolutnie, wiec zmiana szerokosci nic nie przesuwa). `content` i geometria
   sa powtorzone, zeby regula byla samowystarczalna takze wtedy, gdy
   `data-border="true"` kiedys zniknie. */
.sl-2njkm.sl-10hi8wr.sl-v-19powf1::after,
.sl-2njkm.sl-10hi8wr.sl-v-635vzl::after,
.sl-2njkm.sl-10hi8wr.sl-v-19faic0::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: inherit;
  pointer-events: none;
  border-style: solid;
  border-width: var(--slh-btn-border-w);
  border-color: var(--slh-btn-border-c);
  transition:
    border-width var(--slh-dur) var(--slh-ease),
    border-color var(--slh-dur) var(--slh-ease);
}

/* Napis. Trzy klasy + element = (0,3,1), czyli o wlos wyzej niz preset
   typografii (0,3,0) — bez tego kolor presetu wygralby. */
.sl-2njkm.sl-10hi8wr.sl-v-19powf1 p,
.sl-2njkm.sl-10hi8wr.sl-v-635vzl p,
.sl-2njkm.sl-10hi8wr.sl-v-19faic0 p {
  color: var(--slh-btn-fg);
  transition: color var(--slh-dur) var(--slh-ease);
}

/* Ikona (strzalka). To nie jest <svg>, tylko div z maska CSS, wiec "kolor"
   ikony to jej `background-color`.
   Uwaga: `transition` dla ikony jest zadeklarowane RAZ, nizej, razem z
   przesunieciem. Gdyby stalo tutaj, skrot `transition` z tamtej reguly
   (identyczna specyficznosc, dalej w pliku) skasowalby przejscie koloru. */
.sl-2njkm.sl-10hi8wr.sl-v-19powf1 .sl-c13ero > *,
.sl-2njkm.sl-10hi8wr.sl-v-635vzl .sl-c13ero > *,
.sl-2njkm.sl-10hi8wr.sl-v-19faic0 .sl-c13ero > * {
  background-color: var(--slh-btn-fg);
}

/* Przesuniecie strzalki.
   `.sl-c13ero` to okienko 18x18 z `overflow:hidden`, a w srodku siedza DWIE
   identyczne strzalki 18px z odstepem 10px (razem 46px). Oryginal przelaczal
   `justify-content` z `flex-end` na `flex-start`, czyli zawartosc jechala w
   prawo o 46-18 = 28px: widoczna strzalka wychodzi bokiem, a od lewej wjezdza
   druga. Tu robimy to samo transformem, bo `justify-content` sie nie animuje.
   `:not(:only-child)` pilnuje, zeby przycisk z pojedyncza strzalka (brak
   przepelnienia, wiec i brak ruchu w oryginale) zostal nietkniety. */
.sl-2njkm .sl-c13ero > :first-child:not(:only-child),
.sl-2njkm .sl-c13ero > :first-child:not(:only-child) ~ * {
  transform: var(--slh-btn-slide, none);
}

/* Jedyne miejsce, gdzie strzalki dostaja `transition` — obie wlasciwosci naraz. */
.sl-2njkm .sl-c13ero > * {
  transition:
    transform var(--slh-dur) var(--slh-ease),
    background-color var(--slh-dur) var(--slh-ease);
}


/* =============================================================================
   2. POZYCJA NAWIGACJI — .sl-sSSxw.sl-pr6n3v
   =============================================================================
   Napis i ikonka przechodza z grafitu na niebieski. Oryginal animuje to
   sprezyna (~640 ms w przyblizeniu cubic-bezier), zauwazalnie wolniej niz
   przyciski — i to nie przypadek, tylko inne ustawienie w zrodle. */

.sl-sSSxw.sl-pr6n3v.sl-v-pr6n3v {
  --slh-nav-fg: var(--slh-ink);
}

@media (hover: hover) and (pointer: fine) {
  .sl-sSSxw.sl-pr6n3v.sl-v-pr6n3v:hover {
    --slh-nav-fg: var(--slh-blue);
  }
}

/* DODANE PONAD ORYGINAL — stan dla klawiatury (element ma tabindex="0"). */
.sl-sSSxw.sl-pr6n3v.sl-v-pr6n3v:focus-visible {
  --slh-nav-fg: var(--slh-blue);
}

.sl-sSSxw.sl-pr6n3v.sl-v-pr6n3v p {
  color: var(--slh-nav-fg);
  transition: color var(--slh-nav-dur) var(--slh-nav-ease);
}

/* Strzalka obok napisu jest inline'owym SVG i barwi sie przez `stroke`. */
.sl-sSSxw.sl-pr6n3v.sl-v-pr6n3v svg,
.sl-sSSxw.sl-pr6n3v.sl-v-pr6n3v svg * {
  stroke: var(--slh-nav-fg);
  transition: stroke var(--slh-nav-dur) var(--slh-nav-ease);
}


/* =============================================================================
   3. DODANE PONAD ORYGINAL — widoczny fokus klawiatury
   =============================================================================
   Sam obrys, zeby bylo widac takze na elementach, ktore nie maja wlasnego
   hovera: akordeon i hamburger (oba maja tabindex="0"). */

.sl-2njkm.sl-10hi8wr:focus-visible,
.sl-sSSxw.sl-pr6n3v:focus-visible,
.sl-slkivp:focus-visible,
.sl-1mrh2jl:focus-visible {
  outline: 2px solid var(--slh-blue);
  outline-offset: 3px;
}


/* =============================================================================
   4. Ograniczona animacja
   =============================================================================
   Wszystkie przejscia w tym pliku czytaja czas ze zmiennej, wiec wystarczy
   zgasic zmienne — stany hover nadal dzialaja, tylko wchodza natychmiast.
   Zero walki o specyficznosc, zero `!important`. */

@media (prefers-reduced-motion: reduce) {
  body {
    --slh-dur: 1ms;
    --slh-nav-dur: 1ms;
  }
}


/* =============================================================================
   2. PANEL MENU MOBILNEGO — [data-nav-panel]
   =============================================================================
   Panel nie istnial w wygenerowanym HTML-u: poprzedni kreator dorzucal go do DOM
   dopiero po kliknieciu hamburgera, razem z regulami CSS wstrzykiwanymi w runtime.
   Wyglad odtworzony z pomiaru oryginalu przy 390 px (karta 332.5 x 349.6 @ 28.8,75).

   Dlaczego tu, a nie w dropdown.js: tamten skrypt ponizej 810 px w ogole sie nie
   podpina, wiec jego wstrzykiwany arkusz na telefonie nie istnieje. Panel mobilny
   musi miec style niezalezne od niego.                                          */

[data-nav-panel] .sl-dd-card {
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
  gap: 12px;
  padding: 24px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 60px 0 rgba(9, 4, 29, .15);
  box-sizing: border-box;
}

[data-nav-panel] .sl-dd-item { flex: 0 0 auto; display: block; }

[data-nav-panel] .sl-dd-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

[data-nav-panel] .sl-dd-label {
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7em;
  color: var(--sl-gray-800, #3d3d3d);
  transition: color .3s ease-out;
}

[data-nav-panel] .sl-dd-link:hover .sl-dd-label,
[data-nav-panel] .sl-dd-link:focus-visible .sl-dd-label { color: #3b82f6; }

[data-nav-panel] .sl-dd-link:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 4px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  [data-nav-panel] .sl-dd-label { transition-duration: 0s; }
}