/* ==========================================================================
   Chrome: header, nawigacja, overlay, stopka, sticky bar mobile.
   Wlasnosc leada. Buildery sekcji tego nie dotykaja.
   ========================================================================== */

.skip {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  background: var(--ink); color: var(--paper); padding: 0.75rem 1.25rem;
  z-index: 100; border-radius: 0 0 4px 4px; font-size: 0.8rem;
}
.skip:focus { transform: translate(-50%, 0); }

/* --- Header ------------------------------------------------------------- */
.site-head {
  position: fixed; inset: 0 0 auto; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.site-head__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; min-height: 4.5rem;
}
.site-head.is-stuck { background: var(--paper); border-bottom-color: var(--hairline); }

.site-head__logo { display: flex; align-items: center; color: var(--purple); }
.site-head__logo-full { height: 26px; width: calc(26px * 2588 / 472); }
.site-head__logo-mark { display: none; height: 26px; width: 26px; }

.site-nav { display: none; }
.site-nav__list { display: flex; gap: clamp(1rem, 2vw, 2rem); }
.site-nav__list a {
  font-size: 0.82rem; letter-spacing: 0.01em; position: relative; padding-block: 0.35rem;
}
.site-nav__list a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0.1rem;
  border-bottom: 1px solid var(--purple); transition: right 0.45s var(--ease);
}
.site-nav__list a:hover { color: var(--purple); }
.site-nav__list a:hover::after { right: 0; }

.site-head__act { display: flex; align-items: center; gap: 1rem; }
.site-head__cta { display: none; padding: 0.8rem 1.4rem; }
.site-head__burger { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; }
.site-head__bars { display: grid; gap: 6px; width: 22px; }
.site-head__bars i { display: block; height: 1px; background: var(--ink); transition: transform 0.4s var(--ease), opacity 0.3s; }
.site-head__burger[aria-expanded="true"] .site-head__bars i:first-child { transform: translateY(3.5px) rotate(45deg); }
.site-head__burger[aria-expanded="true"] .site-head__bars i:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

@media (min-width: 1024px) {
  .site-nav { display: block; }
  .site-head__cta { display: inline-flex; }
  .site-head__burger { display: none; }
}
@media (max-width: 420px) {
  .site-head__logo-full { display: none; }
  .site-head__logo-mark { display: block; }
}

/* --- Overlay menu ------------------------------------------------------- */
.nav-ovl {
  position: fixed; inset: 0; z-index: 45; background: var(--paper);
  padding-top: 4.5rem; display: flex; flex-direction: column; justify-content: space-between;
  opacity: 0; pointer-events: none; transition: opacity 0.45s var(--ease);
}
.nav-ovl[hidden] { display: none; }
.nav-ovl.is-open { opacity: 1; pointer-events: auto; }
.nav-ovl__in { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding-block: clamp(2rem, 6vh, 4rem); }
.nav-ovl__list a {
  display: flex; align-items: baseline; gap: 1.25rem;
  font: 300 clamp(2rem, 9vw, 3.2rem)/1.35 var(--sans);
  border-bottom: 1px solid var(--hairline); padding-block: 0.35em;
}
.nav-ovl__list a:hover { color: var(--purple); }
.nav-ovl__n { font: 500 0.65rem/1 var(--sans); letter-spacing: 0.2em; color: var(--muted); }
.nav-ovl__foot { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: baseline; padding-top: 2rem; }
.nav-ovl__tel { font: 300 1.5rem/1 var(--sans); color: var(--purple); }
.nav-ovl__links { display: flex; gap: 1.5rem; }
.nav-ovl__links a { font-size: 0.8rem; border-bottom: 1px solid var(--hairline); padding-bottom: 2px; }

/* --- Fioletowa plyta konca strony: .fcta + .site-foot -------------------- */
/* Decyzja klienta: caly ogon strony idzie w brandowy fiolet. .fcta i stopka
   przestaja byc dwoma polami i staja sie JEDNA plyta, rozdzielona hairlinem.
   (Wczesniej .fcta byla grafitowa, zeby fiolet nie urosl do 1200px tapety.
   Ten argument upada, bo plyta stoi na samym koncu dokumentu, pod calym
   tokiem cieplej bieli - czyta sie jako zamkniecie, nie jako tlo tresci.)
   W srodku strony fiolet nadal jest wylacznie sygnatura - zadna sekcja
   miedzy hero a stopka nie ma go jako powierzchni.

   Wspolna paleta zamiast .on-dark. .on-dark znaczy "grafit + paper + #A5A199",
   a #A5A199 na fiolecie daje 3.67:1, czyli tekst pomocniczy ponizej AA.
   Liczby ponizej sa policzone wzorem WCAG na tle #602F81 i pilnowane przez
   audyt.js (sekcja PARY):

   --pl-ink   #FDFBF6            -> 9.14:1  (ten sam odcien co logo-full-paper.svg)
   --pl-soft  #CEBFD6            -> 5.42:1  (AA z zapasem 0.92; dla porownania
              --muted #6B6B66 ma tu 1.51:1, a #A5A199 z .on-dark 3.67:1)
   --pl-line  rgba(paper, 0.30)  -> 2.18:1  (dotychczasowe 0.16 dawalo na
              fiolecie 1.52:1, czyli linie praktycznie nieobecna; na graficie
              ta sama alfa wazyla 1.66:1, wiec na fiolecie trzeba jej wiecej,
              zeby linia czytala sie tak samo)
              UWAGA: to jest hairline dekoracyjny. Kazda krawedz, ktora sama
              wyznacza pole sterowania (obrys przycisku), potrzebuje 3:1
              wedlug WCAG 1.4.11 i ma wlasna, mocniejsza alfe - patrz
              .btn--on-dark nizej.

   Focus ring i zaznaczenie tekstu sa domyslnie fioletowe, wiec na fiolecie
   znikaja - oba dostaja tu jawna wersje na papierze. */
.fcta,
.site-foot {
  --pl-ink:  var(--paper);
  --pl-soft: #CEBFD6;
  --pl-line: rgba(253, 251, 246, 0.30);

  background: var(--purple);
  color: var(--pl-ink);
}
.fcta .label,  .fcta .muted,
.site-foot .label, .site-foot .muted { color: var(--pl-soft); }
.fcta :focus-visible, .site-foot :focus-visible { outline-color: var(--paper); }
.fcta ::selection,    .site-foot ::selection { background: var(--paper); color: var(--purple); }

/* --- Final CTA ---------------------------------------------------------- */
/* Oddech przy styku jest o stopien mniejszy niz dawniej (bylo 7rem + 7rem).
   Gdy oba pola mialy inny kolor, ta przerwa oddzielala dwie plaszczyzny.
   Teraz kolor jest jeden, wiec 14rem fioletu miedzy przyciskiem a logotypem
   czytaloby sie jak dziura w skladzie, a nie jak oddech. */
.fcta { padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem); overflow: hidden; }

/* Ghost marquee. Na graficie mial #4A4A46, czyli 1.75:1 - ledwie widoczny
   slad pod solidnym napisem. Na fiolecie odpowiednikiem tej wagi jest
   fiolet rozjasniony 22% papieru (1.78:1). Bazowy .ghost (--hairline) mialby
   tu 6.97:1, czyli krzyczalby glosniej niz sam wordmark. */
.fcta .marquee .ghost { color: color-mix(in srgb, var(--paper) 22%, var(--purple)); }
.fcta__marquee { margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.fcta__marquee .display { font-size: clamp(3rem, 11vw, 10rem); }
.fcta__h { max-width: 18ch; }
.fcta__p { margin-top: 1.75rem; }
.fcta__act { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.5rem; }
/* Obrys 0.45 alfy, nie 0.30. Tu obrys jest JEDYNA rzecza wyznaczajaca pole
   przycisku, wiec obowiazuje go WCAG 1.4.11 (granica komponentu, min 3:1).
   0.30 daje po zmieszaniu z fioletem rgb(143,108,164) i tylko 2.18:1;
   0.45 daje rgb(167,139,182) i 3.14:1. Hairline'y stopki zostaja na 0.30,
   bo one sa dekoracja, nie krawedzia sterowania. */
.btn--on-dark { border-color: rgba(253,251,246,0.45); color: var(--paper); }

/* Hover NIE wypelnia pola papierem. Wypelniony ghost wygladal identycznie jak
   spoczynkowy .btn--light obok, czyli najechanie na numer telefonu robilo
   z niego mocniejszy przycisk niz glowne CTA - hierarchia odwracala sie pod
   kursorem. Teraz hover podnosi obrys do pelnego papieru i doklada ledwie
   12% wypelnienia: ruch jest wyrazny, ale pole zostaje slabsze od pelnej
   plamy CTA. Tekst ma na tym tle 8.0:1. */
.btn--on-dark:hover { border-color: var(--paper); background: rgba(253,251,246,0.12); color: var(--paper); }

/* Przyciski na fiolecie.
   .btn--primary (fiolet na fiolecie) tu nie istnieje - byloby to pole
   niewidoczne, z sama etykieta w powietrzu. Na plycie brandowej hierarchia
   sie odwraca: glowna akcja jest pelna plama papieru (9.14:1 do tla),
   druga - obrysem z tego samego papieru. To ten sam jezyk co reszta strony,
   tylko w negatywie.
   Hover NIE moze isc w --purple ani --purple-deep: pierwszy zrownuje przycisk
   z tlem, drugi zostawia 1.4:1, czyli przycisk gasnie dokladnie w momencie,
   w ktorym uzytkownik go wskazuje. Idzie wiec w --panel (7.66:1) - ruch jest
   wyrazny, a pole caly czas trzyma sie mocno nad tlem. */
.fcta .btn--light:hover { background: var(--panel); color: var(--ink); }

/* --- Stopka: dolna polowa fioletowej plyty ------------------------------- */
/* Paleta i tlo przychodza z bloku .fcta, .site-foot wyzej. Tutaj zostaje
   wylacznie uklad i styk.

   Styk: skoro .fcta i stopka maja juz ten sam kolor, granica nie moze byc
   sama zmiana tla - bo jej nie ma. Robi ja hairline przez cala szerokosc,
   tej samej wagi co linia nad notka prawna nizej. Dzieki temu plyta ma
   wewnetrzny rytm (CTA | dane | nota), a nie jest jednym polem fioletu. */
.site-foot {
  border-top: 1px solid var(--pl-line);
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
}

.site-foot__in { display: grid; gap: 2.5rem; }
.site-foot__logo { height: 30px; width: auto; }
.site-foot__tag { margin-top: 1.25rem; max-width: 34ch; font-size: 0.9rem; }
.site-foot__col ul { display: grid; gap: 0.6rem; margin-top: 1.25rem; font-size: 0.9rem; }
/* Hover przez podkreslenie, nie przez zmiane koloru. Kazdy odcien jasniejszy od
   #FDFBF6 na fiolecie po prostu nie istnieje, a kazdy ciemniejszy scisza link
   w momencie, w ktorym uzytkownik go wskazuje. */
.site-foot__col a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: text-decoration-color var(--dur) var(--ease);
}
.site-foot__col a:hover { text-decoration-color: var(--pl-ink); }
.site-foot__bot {
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between;
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem;
  border-top: 1px solid var(--pl-line);
}
/* .label ma line-height 1, bo z zalozenia jest jednowierszowy. Linijka z NIP-em
   lamie sie na telefonie na trzy wiersze i wersaliki z diakrytykami zaczynaly
   na siebie zachodzic. Interlinia tylko tutaj, reszta labeli zostaje bez zmian. */
.site-foot__bot .label { line-height: 1.7; }
@media (min-width: 768px)  { .site-foot__in { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .site-foot__in { grid-template-columns: 1.6fr repeat(3, 1fr); gap: 3rem; } }

/* --- Sticky bar mobile -------------------------------------------------- */
/* Odkad stopka jest fioletowa, prawy przycisk paska (tez fioletowy) przeplywa
   przez chwile nad tlem w dokladnie tym samym kolorze. Pasek dostaje wiec
   wlasna krawedz: hairline #E0DDD5 ma 6.97:1 do fioletu i 11.46:1 do grafitu,
   wiec czyta sie nad kazda sekcja serwisu, a cien odkleja go od tresci. */
.mob-bar {
  position: fixed; inset: auto 0 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--hairline); border-top: 1px solid var(--hairline);
  box-shadow: 0 -14px 30px rgba(36, 36, 34, 0.14);
  transform: translateY(100%); transition: transform 0.45s var(--ease);
}
.mob-bar.is-on { transform: none; }
.mob-bar__b {
  background: var(--paper); text-align: center; padding: 1.05rem 1rem;
  font: 500 0.68rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase;
}
.mob-bar__b--p { background: var(--purple); color: #fff; }

/* Fokus paska liczymy osobno, bo .mob-bar jest RODZENSTWEM stopki, a nie jej
   dzieckiem - przemalowanie z bloku .fcta, .site-foot go nie obejmuje.
   Pasek jest fixed i przeplywa nad kazda sekcja serwisu, wiec obwodka na
   zewnatrz pola trafia raz na krem, raz na fiolet i nie da sie dobrac jednego
   koloru, ktory dziala na obu (fioletowa na fiolecie ma 1.00:1). Dlatego
   obwodka wchodzi DO SRODKA przycisku: tlo pod nia jest wtedy znane na pewno.
   Papier na fiolecie i fiolet na papierze to ta sama para, 9.14:1. */
.mob-bar__b:focus-visible { outline-offset: -5px; }
.mob-bar__b--p:focus-visible { outline-color: var(--paper); }
@media (min-width: 1024px) { .mob-bar { display: none; } }
@media (max-width: 1023px) { body { padding-bottom: 3.4rem; } }