/* ============================================================
   System stylów. Struktura typografii, rytmu i animacji wzorowana
   na szablonie Serenique, zaimplementowana od zera w palecie
   "Róż i granat". Opis w docs/typografia-i-styl.md
   ============================================================ */

:root {
  /* kolory */
  --tlo:           #FFF8F7;
  --biel:          #FFFFFF;
  --roz:           #F2C6CE;
  --roz-jasny:     #FDF0F2;
  --granat:        #1B2A4A;
  --granat-hover:  #2A3D63;
  --akcent:        #9A4E5A;
  --akcent-dekor:  #B4626F;
  --tekst:         #1B2A4A;
  --tekst-jasny:   #6A7186;
  --linia:         #E9DADD;
  --przyciemnienie: rgba(27, 42, 74, 0.45);

  /* typografia */
  --font-naglowek: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-tresc:    "Plus Jakarta Sans", system-ui, "Segoe UI", sans-serif;

  --h1:   clamp(2.5rem, 6.5vw, 3.5rem);
  --h2:   clamp(1.9rem, 4.2vw, 2.6rem);
  --h3:   clamp(1.4rem, 2.6vw, 1.75rem);
  --lead: clamp(1.05rem, 1.6vw, 1.25rem);

  /* rytm */
  --kontener: 1350px;
  --margines: clamp(1.25rem, 4vw, 2.5rem);
  --sekcja:   clamp(3.5rem, 8vw, 6rem);
  /* Górny odstęp musi zmieścić pływający pasek nawigacji: 1rem odsunięcia
     od krawędzi plus jego wysokość, czyli około 5rem łącznie. */
  --hero-gora: clamp(9rem, 16vw, 13rem);
  --hero-dol:  clamp(6rem, 12vw, 10rem);

  --promien:   14px;
  --promien-pigulka: 120px;

  --tempo:     0.4s;
  --tempo-wolne: 0.8s;
  --krzywa:    cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Cel kotwicy zatrzymuje się poniżej pływającego paska nawigacji. */
[id] { scroll-margin-top: 6.5rem; }

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font-family: var(--font-tresc);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

/* ---------- typografia ---------- */

h1, h2, h3, h4 {
  font-family: var(--font-naglowek);
  font-weight: 400;
  color: var(--granat);
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--h1); line-height: 1.08; }
h2 { font-size: var(--h2); line-height: 1.2; }
h3 { font-size: var(--h3); line-height: 1.25; }

/* Wersja nagłówka z luźną interlinią, sygnaturowy element wzorca.
   Sprawdza się przy dłuższym zdaniu wprowadzającym. */
h2.rozstrzelony { line-height: 1.45; max-width: 20ch; }

.kursywa { font-style: italic; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.lead { font-size: var(--lead); line-height: 1.55; }
.przygaszony { color: var(--tekst-jasny); }

/* Etykieta nad nagłówkiem, z kropką z przodu. */
.etykieta {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--akcent);
  margin-bottom: 1rem;
}
.etykieta::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.na-ciemnym .etykieta { color: var(--roz); }

/* ---------- układ ---------- */

.kontener {
  width: 100%;
  max-width: var(--kontener);
  margin: 0 auto;
  padding: 0 var(--margines);
}

.sekcja { padding: var(--sekcja) 0; }
.sekcja + .sekcja { border-top: 1px solid var(--linia); }
.siatka-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

/* ---------- pasek nawigacji ---------- */

.pasek {
  position: fixed;
  inset: 1rem var(--margines) auto;
  max-width: calc(var(--kontener) - var(--margines) * 2);
  margin-inline: auto;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--biel);
  border-radius: var(--promien-pigulka);
  padding: 0.7rem 0.7rem 0.7rem 1.5rem;
  box-shadow: 0 6px 28px rgba(27, 42, 74, 0.10);
  transition: box-shadow var(--tempo) ease, transform var(--tempo) ease;
}

.pasek.schowany { transform: translateY(calc(-100% - 1.5rem)); }

.pasek-marka {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-naglowek);
  font-size: 1.35rem;
  color: var(--granat);
  text-decoration: none;
  white-space: nowrap;
}

.logo-symbol { width: 23px; height: 23px; flex: 0 0 23px; }

.pasek-menu {
  display: flex;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pasek-menu a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.85rem;
  border-radius: var(--promien-pigulka);
  color: var(--granat);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: background var(--tempo) ease, color var(--tempo) ease;
}
.pasek-menu a:hover { background: var(--roz-jasny); color: var(--akcent); }

.pasek-menu-przycisk {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--roz-jasny);
  color: var(--granat);
  cursor: pointer;
}

/* ---------- przyciski ---------- */

.przycisk {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 48px;
  padding: 0.75rem 0.75rem 0.75rem 1.5rem;
  border-radius: var(--promien-pigulka);
  border: 1px solid var(--granat);
  background: var(--granat);
  color: var(--biel);
  font-family: var(--font-tresc);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--tempo) ease, border-color var(--tempo) ease,
              color var(--tempo) ease, transform var(--tempo) ease;
}
.przycisk:hover { background: var(--granat-hover); border-color: var(--granat-hover); }
.przycisk:active { transform: scale(0.985); }

/* Rolowany tekst przycisku, sygnaturowa animacja wzorca. Dwa napisy
   jeden nad drugim; przy najechaniu górny wyjeżdża do góry, dolny
   wjeżdża na jego miejsce. Strukturę buduje skrypt przy starcie. */
.napis {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.napis-a, .napis-b {
  display: block;
  transition: transform 0.45s var(--krzywa);
}
.napis-b {
  position: absolute;
  inset: 0;
  transform: translateY(110%);
}
.przycisk:hover .napis-a { transform: translateY(-110%); }
.przycisk:hover .napis-b { transform: translateY(0); }

/* Kółko ze strzałką po prawej stronie przycisku. Strzałka wylatuje
   po przekątnej w prawo do góry, a jej kopia wjeżdża z lewego dołu. */
.przycisk .strzalka {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--biel);
  color: var(--granat);
  flex: 0 0 32px;
  overflow: hidden;
}
.przycisk .strzalka svg { transition: transform 0.45s var(--krzywa); }
.przycisk .strzalka svg.duch {
  position: absolute;
  transform: translate(-18px, 18px);
}
.przycisk:hover .strzalka svg { transform: translate(18px, -18px); }
.przycisk:hover .strzalka svg.duch { transform: translate(0, 0); }

.przycisk-obrys {
  background: transparent;
  color: var(--granat);
  padding: 0.75rem 1.5rem;
}
.przycisk-obrys:hover { background: var(--granat); color: var(--biel); }

/* warianty na ciemnym tle */
.na-ciemnym .przycisk {
  background: var(--biel);
  border-color: var(--biel);
  color: var(--granat);
}
.na-ciemnym .przycisk:hover { background: var(--roz); border-color: var(--roz); }
.na-ciemnym .przycisk .strzalka { background: var(--granat); color: var(--biel); }

.na-ciemnym .przycisk-obrys {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.75);
  color: var(--biel);
}
.na-ciemnym .przycisk-obrys:hover { background: var(--biel); color: var(--granat); }

/* ---------- ekran powitalny ---------- */

.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: var(--hero-gora) 0 var(--hero-dol);
  overflow: hidden;
}

.hero-tlo {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%; height: 100%;
  z-index: 0;
}

/* Przyciemnienie w granacie, nie w czerni. Utrzymuje kolor marki
   i daje bezpieczny kontrast dla białego tekstu. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(27, 42, 74, 0.78) 0%,
    rgba(27, 42, 74, 0.55) 45%,
    rgba(27, 42, 74, 0.28) 100%
  );
}

.hero .kontener { position: relative; z-index: 2; }
.hero h1 { color: var(--biel); max-width: 16ch; }
.hero .lead { color: rgba(255, 255, 255, 0.92); max-width: 46ch; margin-bottom: 2rem; }

.hero-przyciski { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.hero-adres {
  margin-top: 2.5rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9375rem;
}

/* ---------- zabiegi: zakładki i karty ---------- */

.taby {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 4vw, 3.5rem);
  margin: 2.5rem 0 2rem;
  padding: 0.9rem 0;
  border-block: 1.5px dashed var(--linia);
}
.tab {
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-naglowek);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  color: var(--tekst-jasny);
  padding: 0.25rem 0.4rem;
  min-height: 44px;
  transition: color var(--tempo) ease;
}
.tab:hover { color: var(--akcent); }
.tab.aktywny { color: var(--granat); }

.zabieg-karta {
  /* Karty nakładają się przy przewijaniu: karta przykleja się pod
     paskiem nawigacji, a następna nasuwa się na nią. Późniejsze karty
     malują się nad wcześniejszymi z samej kolejności w dokumencie.
     Punkt zaczepienia dolicza skrypt: karta wyższa niż ekran dostaje
     niższy top, żeby przypięta mieściła się w całości. */
  position: sticky;
  top: 6.5rem;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--biel);
  border-radius: var(--promien);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: 1.5rem;
}
.zabieg-karta[hidden] { display: none; }
.zabieg-karta h3 {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  margin: 0;
}

/* Lewa i środkowa kolumna rozpychają się w pionie: tytuł i opis u góry,
   cena i przycisk na dole, jak we wzorcu. */
.zabieg-lewa, .zabieg-srodek {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.75rem;
}
.zabieg-srodek .przycisk { align-self: flex-start; }

.cena-pigulka {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.55rem 1.3rem;
  border: 1px solid var(--granat);
  border-radius: var(--promien-pigulka);
  color: var(--granat);
  font-size: 0.9375rem;
  white-space: nowrap;
}

/* Zdjęcie karty powiększa się przy najechaniu na całą kartę. */
.zabieg-karta .odslona img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1s var(--krzywa);
}
.zabieg-karta:hover .odslona img { transform: scale(1.06); }

/* Wjazd kart po przełączeniu zakładki. */
@keyframes tab-wjazd {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.zabieg-karta.wjazd { animation: tab-wjazd 0.45s var(--krzywa) both; }

@media (max-width: 860px) {
  .zabieg-karta { grid-template-columns: 1fr; }
  .zabieg-karta .odslona { order: -1; }
  .zabieg-lewa, .zabieg-srodek { gap: 1rem; }
}

/* Pionowe kadry w dwukolumnowych sekcjach o mnie przycięte do
   niemal kwadratu, żeby nie ciągnęły się przez cały ekran. Pozycja
   ustawiona wysoko, twarz zostaje w kadrze. */
.siatka-2 .odslona img {
  aspect-ratio: 1 / 1.08;
  object-fit: cover;
  object-position: 50% 18%;
}

/* ---------- statystyki pod wypowiedzią ---------- */

.statystyki {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.stat .liczba {
  font-family: var(--font-naglowek);
  font-size: clamp(2.2rem, 4.5vw, 3rem);
  color: var(--granat);
  line-height: 1.1;
  display: block;
}
/* Bębenek licznika: każda cyfra to pionowa taśma 0-9 przewijana
   do celu, jak w liczniku analogowym. Taśmę buduje skrypt. */
.stat .liczba { display: inline-flex; align-items: baseline; }
.odo-cyfra {
  display: inline-block;
  height: 1.05em;
  overflow: hidden;
}
.odo-tasma {
  display: block;
  transition: transform 1.6s var(--krzywa);
}
.odo-tasma > span {
  display: block;
  height: 1.05em;
  line-height: 1.05;
}

.stat .podpis {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.875rem;
  color: var(--tekst-jasny);
  max-width: 16ch;
}

/* ---------- mozaika usług z ikonami ---------- */

.uslugi-glowa {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.25rem;
}
.uslugi-glowa h2 { margin: 0; max-width: 22ch; }

.mozaika {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 1.25rem;
  align-items: stretch;
}
.mozaika .kolumna {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.usluga-karta {
  flex: 1;
  background: var(--biel);
  border-radius: var(--promien);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
}
/* Duży oddech między ikoną a tytułem, jak we wzorcu. */
.usluga-karta h3 { margin: auto 0 0.5rem; padding-top: 2.25rem; font-size: 1.45rem; }
.usluga-karta p { color: var(--tekst-jasny); font-size: 0.9375rem; margin: 0; }

/* Odznaka z ikoną: granatowy kwadrat z liniową ikoną usługi. */
.ikona-odznaka {
  width: 56px; height: 56px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: var(--granat);
  color: var(--biel);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ikona-odznaka svg { width: 32px; height: 32px; }

.mozaika-foto {
  flex: 1;
  min-height: 320px;
  border-radius: var(--promien);
  overflow: hidden;
}
.mozaika-foto img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 960px) {
  /* Kolumny rozpuszczone, elementy układają się jednym ciągiem:
     najpierw zdjęcie przycięte do 4:3, potem pięć kart po kolei. */
  .mozaika { grid-template-columns: 1fr; }
  .mozaika .kolumna { display: contents; }
  .mozaika-foto {
    order: -1;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .mozaika-foto img { object-position: 50% 32%; }
  .usluga-karta { flex: 0 0 auto; }
  .usluga-karta h3 { padding-top: 1.25rem; }
}

/* ---------- pasek przewijany ---------- */

.marquee {
  overflow: hidden;
  padding: 1.25rem 0;
  border-block: 1px solid var(--linia);
}

/* Pętla działa przez przesunięcie o połowę toru, więc tor musi być
   idealnie powtarzalny: zero odstępu na kontenerze, cały rytm siedzi
   wewnątrz elementu. Inaczej na złączeniu robi się przerwa i przeskok. */
.marquee-tor {
  display: flex;
  width: max-content;
  animation: przesuw 38s linear infinite;
}

.marquee-element {
  font-family: var(--font-naglowek);
  font-size: 1.35rem;
  color: var(--akcent);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  padding-right: 1.5rem;
}
.marquee-element::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--roz);
}

@keyframes przesuw {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- cennik ---------- */

.cennik { border-top: 1px solid var(--linia); }

.cennik-wiersz {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--linia);
}
.cennik-nazwa { font-weight: 500; }
.cennik-kropki {
  flex: 1;
  min-width: 2rem;
  border-bottom: 1px dotted var(--linia);
  transform: translateY(-0.25rem);
}
.cennik-czas { color: var(--tekst-jasny); font-size: 0.9375rem; }
.cennik-cena {
  font-family: var(--font-naglowek);
  font-size: 1.35rem;
  color: var(--akcent);
  white-space: nowrap;
}

/* Na telefonach: nazwa w pierwszej linii, pod nią czas po lewej
   i cena dosunięta do prawej. Kropki schowane, bo przy zawijaniu
   nie mają sensu. */
@media (max-width: 560px) {
  .cennik-wiersz { gap: 0.2rem 0.75rem; padding: 0.95rem 0; }
  .cennik-nazwa { flex: 1 1 100%; }
  .cennik-kropki { display: none; }
  .cennik-czas { order: 2; }
  .cennik-cena { order: 3; margin-left: auto; }
}

/* ---------- przebieg wizyty ---------- */

.proces {
  background: var(--granat);
  color: rgba(255, 255, 255, 0.88);
}
.proces h2 { color: var(--biel); text-align: center; margin-inline: auto; }
.proces .etykieta { justify-content: center; width: 100%; }

.proces-krok {
  display: grid;
  grid-template-columns: minmax(0, 440px) 64px minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

/* Zdjęcie z zasłoną, która zjeżdża w dół przy pojawieniu się w kadrze. */
.odslona {
  position: relative;
  border-radius: var(--promien);
  overflow: hidden;
}
.odslona img { width: 100%; height: auto; }

/* Zdjęcia w krokach procesu mają wspólny format 4:3, dzięki czemu
   kroki są równej wysokości. Reguła celowo zawężona do procesu,
   żeby nie przycinać pionowych kadrów w innych sekcjach. */
.proces .odslona img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.odslona::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--roz);
  transform: translateY(0);
  transition: transform 1s var(--krzywa);
}
.odslona.widoczny::after { transform: translateY(101%); }

/* Zdjęcie nie blednie razem z resztą. Zasłona jest jedynym efektem,
   inaczej oba nakładałyby się i odsłanianie nie byłoby widoczne. */
.odslona.pojaw { opacity: 1; transform: none; }

/* Kolumna środkowa: numer w kółku i pionowa linia do następnego kroku. */
.krok-os {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  padding-top: 0.25rem;
}
.krok-numer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: var(--granat);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: var(--biel);
  font-family: var(--font-naglowek);
  font-size: 1.1rem;
}
/* Linia jest torem z wypełnieniem sterowanym przez JS w trakcie
   przewijania. Zmienna --postep rośnie od 0 do 100 procent, gdy środek
   ekranu przechodzi przez dany krok. */
.krok-os { --postep: 0%; }
.krok-os::after {
  content: "";
  flex: 1;
  width: 2px;
  margin-top: 0.75rem;
  border-radius: 2px;
  background: linear-gradient(
    to bottom,
    var(--roz) 0%,
    var(--roz) var(--postep),
    rgba(255, 255, 255, 0.22) var(--postep)
  );
}
.proces-krok:last-child .krok-os::after { display: none; }

/* Numer rozświetla się, gdy krok jest aktywny. */
.krok-numer { transition: background var(--tempo) ease, color var(--tempo) ease, border-color var(--tempo) ease; }
.krok-os.aktywny .krok-numer {
  background: var(--roz);
  border-color: var(--roz);
  color: var(--granat);
}

.krok-tresc { padding-top: 0.35rem; max-width: 46ch; }
.krok-tresc h3 { color: var(--biel); margin-bottom: 0.5rem; }
.krok-tresc p { color: rgba(255, 255, 255, 0.82); }

/* Na telefonach ten sam układ trzykolumnowy, tylko ciaśniejszy. */
@media (max-width: 860px) {
  .proces-krok {
    grid-template-columns: minmax(0, 5fr) 34px minmax(0, 7fr);
    gap: 0.85rem;
  }
  .krok-numer { width: 34px; height: 34px; flex-basis: 34px; font-size: 0.95rem; }
  .krok-tresc { padding-top: 0; }
  .krok-tresc h3 { font-size: 1.15rem; }
  .krok-tresc p { font-size: 0.875rem; }
}

/* ---------- pytania i odpowiedzi ---------- */

/* Dwie kolumny: po lewej nagłówek z przyciskiem, po prawej karty pytań. */
.faq-uklad {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.faq-lewa { position: sticky; top: 6.5rem; }
.faq-lewa .przycisk { margin-top: 1.25rem; }

.faq details {
  border: 1.5px dashed var(--linia);
  border-radius: var(--promien);
  padding: 0.35rem 1.4rem;
  margin-bottom: 0.85rem;
  background: transparent;
  transition: background var(--tempo) ease, border-color var(--tempo) ease,
              box-shadow var(--tempo) ease;
}
.faq details[open] {
  background: var(--biel);
  border-style: solid;
  border-color: var(--biel);
  box-shadow: 0 6px 24px rgba(27, 42, 74, 0.06);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-naglowek);
  font-size: 1.2rem;
  color: var(--granat);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 52px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-naglowek);
  font-size: 1.6rem;
  color: var(--akcent);
  transition: transform var(--tempo) var(--krzywa);
  flex: 0 0 auto;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p {
  margin: -0.15rem 0 0.9rem;
  color: var(--tekst-jasny);
  font-size: 0.9375rem;
  max-width: 62ch;
}

@media (max-width: 860px) {
  .faq-uklad { grid-template-columns: 1fr; }
  .faq-lewa { position: static; }
}

/* ---------- stopka ---------- */

.stopka {
  background: var(--granat);
  color: rgba(255, 255, 255, 0.85);
  padding: var(--sekcja) 0 2rem;
}
.stopka h3, .stopka .pasek-marka { color: var(--biel); }
.stopka a { color: var(--roz); }
.stopka-dol {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.875rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}

/* ---------- nagłówek podstrony ---------- */

.hero-mini {
  padding: calc(var(--hero-gora) * 0.72) 0 clamp(2.5rem, 6vw, 4rem);
  border-bottom: 1px solid var(--linia);
}
.hero-mini h1 { max-width: 18ch; }
.hero-mini .lead { max-width: 52ch; }

/* ---------- karty certyfikatów ---------- */

.cert-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.25rem;
}
.cert {
  border: 1.5px dashed var(--linia);
  border-radius: var(--promien);
  padding: 1.5rem 1.6rem;
  background: transparent;
  transition: background var(--tempo) ease, border-color var(--tempo) ease,
              box-shadow var(--tempo) ease, transform var(--tempo) var(--krzywa);
}
.cert:hover {
  background: var(--biel);
  border-style: solid;
  border-color: var(--biel);
  box-shadow: 0 6px 24px rgba(27, 42, 74, 0.06);
  transform: translateY(-3px);
}
/* Zdjęcie dokumentu w karcie. Klik otwiera pełny rozmiar. */
.cert-foto {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1.1rem;
  border: 1px solid var(--linia);
}
.cert-foto img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.8s var(--krzywa);
}
.cert:hover .cert-foto img { transform: scale(1.03); }
.cert.wyrozniony .cert-foto { border-color: rgba(255, 255, 255, 0.25); }

.cert .rok {
  font-family: var(--font-naglowek);
  font-size: 1.6rem;
  color: var(--akcent);
  display: block;
  margin-bottom: 0.5rem;
}
.cert h3 { font-size: 1.2rem; margin-bottom: 0.3rem; }
.cert .wystawca { color: var(--tekst-jasny); font-size: 0.9rem; }

/* Wyróżniona karta wpisu do rejestru. */
.cert.wyrozniony {
  background: var(--granat);
  border-color: var(--granat);
}
.cert.wyrozniony:hover { transform: translateY(-3px); }
.cert.wyrozniony .rok { color: var(--roz); }
.cert.wyrozniony h3 { color: var(--biel); }
.cert.wyrozniony .wystawca { color: rgba(255, 255, 255, 0.75); }

/* ---------- pojawianie się przy przewijaniu ---------- */

.pojaw {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--tempo-wolne) var(--krzywa),
              transform var(--tempo-wolne) var(--krzywa);
  will-change: opacity, transform;
}
.pojaw.widoczny { opacity: 1; transform: none; }

/* Opóźnienia dla elementów pojawiających się kaskadowo. */
.pojaw[data-opoznienie="1"] { transition-delay: 0.10s; }
.pojaw[data-opoznienie="2"] { transition-delay: 0.20s; }
.pojaw[data-opoznienie="3"] { transition-delay: 0.30s; }
.pojaw[data-opoznienie="4"] { transition-delay: 0.40s; }

/* ---------- dostępność ---------- */

:focus-visible {
  outline: 3px solid var(--akcent);
  outline-offset: 3px;
  border-radius: 4px;
}

.tylko-czytnik {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Wyłączenie ruchu dla osób, które go nie chcą. Wymóg WCAG 2.3.3.
   Bez tego animacje mogą wywoływać zawroty głowy i mdłości. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .pojaw { opacity: 1; transform: none; }
  .marquee-tor { animation: none; }
}

/* ---------- telefony ---------- */

@media (max-width: 860px) {
  .pasek { padding-left: 1.1rem; }
  .pasek-menu { display: none; }
  .pasek-menu-przycisk { display: inline-flex; }

  .pasek-menu.otwarte {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 0; right: 0;
    background: var(--biel);
    border-radius: var(--promien);
    padding: 0.6rem;
    box-shadow: 0 10px 34px rgba(27, 42, 74, 0.14);
  }

  .hero { min-height: 78vh; }
  .hero h1 { max-width: none; }
  .kafelek { min-height: 280px; }
}

/* ---------- formularz kontaktowy ---------- */

.formularz {
  background: var(--biel);
  border-radius: var(--promien);
  padding: clamp(1.75rem, 3.2vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  box-shadow: 0 10px 30px rgba(27, 42, 74, 0.08);
}
.formularz-rzad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 1.15rem;
}
.formularz label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--akcent);
}
.formularz input[type="text"],
.formularz textarea {
  font: inherit;
  font-size: 1rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--tekst);
  background: var(--tlo);
  border: 1.5px solid var(--linia);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  min-height: 48px;
  transition: border-color var(--tempo) ease, box-shadow var(--tempo) ease;
}
.formularz textarea { resize: vertical; }
.formularz ::placeholder { color: var(--tekst-jasny); opacity: 0.55; }
.formularz input[type="text"]:hover,
.formularz textarea:hover { border-color: var(--roz); }
.formularz input[type="text"]:focus-visible,
.formularz textarea:focus-visible {
  outline: none;
  border-color: var(--akcent);
  box-shadow: 0 0 0 3px var(--roz-jasny);
}
.formularz .zgoda {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.7rem;
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--tekst-jasny);
  background: var(--roz-jasny);
  border-radius: 10px;
  padding: 0.85rem 1rem;
}
.formularz .zgoda a {
  color: var(--granat);
  font-weight: 500;
  text-decoration-color: var(--akcent-dekor);
  text-underline-offset: 2px;
}
.formularz .zgoda a:hover { color: var(--akcent); }
.formularz .zgoda input {
  width: 18px; height: 18px;
  margin-top: 1px;
  flex: 0 0 18px;
  accent-color: var(--akcent);
}
.formularz .przycisk { align-self: flex-start; border: 0; margin-top: 0.25rem; }
.formularz .wyslano {
  background: var(--roz-jasny);
  border-left: 3px solid var(--roz);
  border-radius: 0 8px 8px 0;
  padding: 0.8rem 1rem;
  margin: 0;
}
/* Pole-pulapka na boty: niewidoczne dla ludzi, boty je wypelniaja
   i wiadomosc jest odrzucana. */
.miodowe { position: absolute; left: -6000px; width: 1px; height: 1px; opacity: 0; }

/* ---------- mapa dojazdu ---------- */

.mapa {
  border-radius: var(--promien);
  overflow: hidden;
  min-height: 340px;
}
.mapa iframe { display: block; width: 100%; height: 420px; border: 0; }
.mapa-przycisk {
  width: 100%;
  min-height: 340px;
  border: 1.5px dashed var(--linia);
  border-radius: var(--promien);
  background: var(--roz-jasny);
  color: var(--granat);
  font-family: var(--font-naglowek);
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.5rem;
}
.mapa-przycisk:hover { background: var(--biel); border-color: var(--roz); }
.mapa-dopisek {
  font-family: var(--font-tresc);
  font-size: 0.8125rem;
  color: var(--tekst-jasny);
  max-width: 44ch;
}

/* ---------- baner cookies ---------- */

.baner-cookies {
  position: fixed;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 60;
  max-width: 640px;
  margin-inline: auto;
  background: var(--granat);
  color: rgba(255, 255, 255, 0.9);
  border-radius: var(--promien);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  box-shadow: 0 12px 40px rgba(27, 42, 74, 0.35);
  font-size: 0.875rem;
}
.baner-cookies a { color: var(--roz); }
.baner-cookies p { margin: 0; flex: 1 1 320px; }
.baner-cookies button {
  font: inherit;
  font-weight: 500;
  background: var(--biel);
  color: var(--granat);
  border: 0;
  border-radius: var(--promien-pigulka);
  padding: 0.6rem 1.4rem;
  min-height: 44px;
  cursor: pointer;
}
.baner-cookies button.drugi {
  background: transparent;
  color: var(--biel);
  border: 1px solid rgba(255, 255, 255, 0.45);
}

/* ---------- voucher: kadry projektu ---------- */

.voucher-kadry {
  display: grid;
  gap: 1.1rem;
}
.voucher-kadry img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(27, 42, 74, 0.14);
}

/* ---------- opinie: karuzela przekrzywionych kart ---------- */

.opinie-przewijak {
  overflow: hidden;
  padding: 2.25rem 0 2rem;
}
.opinie-tor {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  animation: przesuw 60s linear infinite;
}
.opinia {
  position: relative;
  flex: 0 0 310px;
  width: 310px;
  margin: 0;
  background: var(--biel);
  border-radius: var(--promien);
  padding: 3.8rem 1.6rem 1.5rem;
  box-shadow: 0 10px 30px rgba(27, 42, 74, 0.08);
}
.opinie-tor .opinia:nth-child(odd)  { transform: rotate(-2.4deg); }
.opinie-tor .opinia:nth-child(even) { transform: rotate(2deg) translateY(10px); }

/* Dwa cudzyslowy w rogu karty, rysowane, jak we wzorcu. */
.opinia::before {
  content: "";
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  width: 42px;
  height: 32px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 18" fill="%23F2C6CE"><path d="M9.6 1.6C5.4 3.3 3 6.6 3 10.5 3 13.6 5 15.7 7.7 15.7c2.4 0 4.2-1.7 4.2-4.1 0-2.2-1.6-3.8-3.8-3.8-.3 0-.5 0-.8.1.5-2.1 2-3.8 4.2-4.7L9.6 1.6z"/><path d="M20.4 1.6c-4.2 1.7-6.6 5-6.6 8.9 0 3.1 2 5.2 4.7 5.2 2.4 0 4.2-1.7 4.2-4.1 0-2.2-1.6-3.8-3.8-3.8-.3 0-.5 0-.8.1.5-2.1 2-3.8 4.2-4.7L20.4 1.6z"/></svg>') no-repeat center / contain;
  pointer-events: none;
}

.opinia blockquote {
  margin: 0 0 1.1rem;
  font-family: var(--font-naglowek);
  font-size: 1.08rem;
  line-height: 1.5;
  color: var(--granat);
}
.opinia figcaption {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.opinia .awatar {
  width: 40px; height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  background: var(--roz);
  color: var(--granat);
  font-weight: 600;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.opinia .kto { font-size: 0.9rem; font-weight: 500; }

/* Przy ograniczeniu ruchu karuzela stoi, a liste przewija sie recznie. */
@media (prefers-reduced-motion: reduce) {
  .opinie-przewijak { overflow-x: auto; }
}

/* ---------- dane kontaktowe z ikonami ---------- */

.dane-kontaktowe { margin: 1.5rem 0 1.75rem; }
.dane-wiersz {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.85rem 0;
}
.dane-wiersz + .dane-wiersz { border-top: 1.5px dashed var(--linia); }
.dane-ikona {
  width: 44px; height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: var(--roz-jasny);
  color: var(--akcent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dane-ikona svg { width: 21px; height: 21px; }
.dane-tresc { font-size: 1rem; line-height: 1.5; padding-top: 0.1rem; }
.dane-tresc a { color: var(--granat); text-decoration-color: var(--roz); }
.dane-tresc a:hover { color: var(--akcent); }
.dane-etykieta {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--akcent);
  margin-bottom: 0.15rem;
}

/* ---------- linie stopki z ikonami ---------- */

.stopka-linia {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0 0 0.7rem;
}
.stopka-linia svg {
  width: 17px; height: 17px;
  flex: 0 0 17px;
  margin-top: 4px;
  color: var(--roz);
}