/* Warstwa FormImpress — komponenty z plansz design systemu.

   CO TU STOI, A CO NIE. Kit Foreto (kit.css, 190 kB) zostaje nietknięty poza
   jedną zamianą kroju numerałów; ten arkusz DOPISUJE się do niego na końcu
   kolejki i przebija tylko te reguły, w których FormImpress wygląda inaczej
   niż Foreto: pigułka zamiast prostokąta, krój nagłówkowy zamiast jednego
   Poppinsa, pole na lodzie zamiast pola z obwódką, karta z linią 10 %,
   nagłówek sekcji z etykietą-trójkątem.

   Reszty kitu nie ruszamy CELOWO. Fork, który przepisuje kit, przestaje być
   forkiem po pierwszej zmianie w źródle — a ten kit jeszcze żyje w Foreto.

   Wszystkie wartości pochodzą z mostu (kit-bridge.css → theme.json). Ani jednej
   liczby, której nie ma na planszy — a jeśli jest, stoi przy niej powód.
   Plansze: Doc/design-system/Main.dc.html, Przyciski.dc.html, Karty.dc.html,
   Sekcje.dc.html.                                                            */

/* ---------------------------------------------------------------------------
   1. Typografia — para „cienki + gruby" i akcent.

   ZNAK ROZPOZNAWCZY MARKI, przeniesiony ze starej strony: nagłówek składa się
   z wiersza cienkiego i wiersza pogrubionego („Nasze usługi / Twój produkt.").
   W treści zapisujemy to dwoma znacznikami semantycznymi, nie klasami:

     <em>   — wiersz cienki (waga 200). To PODKREŚLENIE ZNACZENIOWE, więc
              znacznik jest tu na miejscu, a redaktor ma go w pasku edytora
              bez uczenia się nazw klas.
     <mark> — słowo w błękicie. Też znaczeniowe („to jest to słowo"), i też
              dostępne w edytorze jednym kliknięciem.

   Kursywy i żółtego tła nie chcemy — oba są zdejmowane niżej.
   --------------------------------------------------------------------------- */

h1 em, h2 em, h3 em, h4 em,
.foreto-section-title em,
.fi-h1 em, .fi-h2 em {
	font-style: normal;
	font-weight: var(--wp--custom--weight--thin);
}

h1 mark, h2 mark, h3 mark, h4 mark,
.foreto-section-title mark,
.fi-h1 mark, .fi-h2 mark {
	background: none;
	color: var(--fi-blekit-500);
}

/* Na ciemnym tle akcent jaśnieje: błękit 500 na głębi daje 3,4:1, błękit 300
   ponad 8:1. Kolor akcentu nie może być jedyną informacją, ale i tak ma być
   czytelny. */
.na-ciemnym h1 mark,
.na-ciemnym h2 mark,
.na-ciemnym h3 mark,
.na-ciemnym .foreto-section-title mark { color: var(--fi-blekit-300); }

/* Etykieta z trójkątem — nadnagłówek sekcji. Trójkąt jest znakiem marki
   (papierowy samolot z logo), rysowany obramowaniami zamiast SVG, bo bierze
   kolor z `currentColor` i nie wymaga drugiego pliku. Ukryty przed czytnikiem
   nie jest potrzebny: pusty element bez treści i tak nic nie ogłasza. */
/* Okruszki (.fi-g-okruszki) mają ten sam styl i trójkąt, co etykieta —
   jedna forma dla „gdzie jesteś" nad tytułem. */
.fi-etykieta,
.fi-g-okruszki,
.fi-p-okruszki ol {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--fi-display);
	font-weight: var(--wp--custom--weight--medium);
	font-size: var(--wp--preset--font-size--label);
	line-height: var(--foreto-space-4);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fi-blekit-600);
}

.fi-etykieta::before,
.fi-g-okruszki::before,
.fi-p-okruszki ol::before {
	content: '';
	width: 0;
	height: 0;
	border-left: 8px solid currentColor;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
}

/* Trójkąt delikatnie „płynie" w prawo i wraca — 3 px, 3 s, jak oddech.
   Ruch tylko na pseudoelemencie, więc tekst etykiety stoi w miejscu i nic
   się nie przelicza poza jednym translate. Wyłączony przy ograniczonym ruchu. */
.fi-etykieta::before,
.fi-g-okruszki::before,
.fi-p-okruszki ol::before { animation: fi-trojkat-plyw 3s ease-in-out infinite; }

@keyframes fi-trojkat-plyw {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(3px); }
}

/* Ptaszki na listach kontrolnych i listach realizacji dryfują jak trójkąt
   etykiety — ten sam ruch, fazy rozrzucone po sąsiadach, żeby kolumna nie
   kołysała się chórem. */
.foreto-checklist li::before,
.foreto-case-list > li::before { animation: fi-trojkat-plyw 3s ease-in-out infinite; }
.foreto-checklist li:nth-child(2n)::before,
.foreto-case-list > li:nth-child(2n)::before { animation-delay: -1.4s; }
.foreto-checklist li:nth-child(3n)::before,
.foreto-case-list > li:nth-child(3n)::before { animation-delay: -0.6s; }

@media (prefers-reduced-motion: reduce) {
	.fi-etykieta::before,
	.fi-g-okruszki::before,
	.fi-p-okruszki ol::before,
	.foreto-checklist li::before,
	.foreto-case-list > li::before { animation: none; }
}

.fi-etykieta--biel,
.na-ciemnym .fi-etykieta { color: var(--fi-blekit-300); }

.fi-lead {
	font-size: var(--wp--preset--font-size--lead);
	line-height: var(--wp--custom--line--lead);
	font-weight: var(--wp--custom--weight--light);
	color: var(--fi-granat-500);
}

/* Blok „na ciemnym" — hero, pasmo CTA, stopka. Jeden przełącznik zamiast
   wariantu przy każdym komponencie: sekcja deklaruje, że stoi na granacie,
   a elementy w środku czytają to z kontekstu. */
.na-ciemnym { color: var(--wp--custom--text--on-dark); }
.na-ciemnym h1,
.na-ciemnym h2,
.na-ciemnym h3,
.na-ciemnym h4,
.na-ciemnym .foreto-section-title { color: var(--wp--custom--dark--ink); }
.na-ciemnym .fi-lead { color: rgb(255 255 255 / 0.72); }
.na-ciemnym .foreto-section-head__lead { color: rgb(255 255 255 / 0.72); }

/* ---------------------------------------------------------------------------
   2. Nagłówek sekcji.

   Foreto centruje tytuł sekcji i pisze go WERSALIKAMI. FormImpress ma nagłówki
   duże, lekkie i DOSUNIĘTE DO LEWEJ — wersaliki zostają wyłącznie na etykietach
   i przyciskach. To jedna z dwóch rzeczy, po których te dwa serwisy różnią się
   na pierwszy rzut oka (druga to pigułka).
   --------------------------------------------------------------------------- */

.foreto-section-title {
	text-align: left;
	text-transform: none;
	font-family: var(--fi-display);
	letter-spacing: -0.02em;
}

/* Akcent w nagłówku sekcji: u Foreto czerwony i w osobnym wierszu. Tu błękit,
   wiersz zostaje osobny (blok sam decyduje modyfikatorem --inline). */
.foreto-section-title__accent { color: var(--fi-blekit-500); }
.na-ciemnym .foreto-section-title__accent { color: var(--fi-blekit-300); }

.foreto-section-head__lead {
	font-size: var(--wp--preset--font-size--lead);
	line-height: var(--wp--custom--line--lead);
	color: var(--fi-granat-500);
}

/* ---------------------------------------------------------------------------
   3. Przycisk — pigułka.

   52 px wysokości, wersaliki 14 px, tracking 4 %, krój nagłówkowy. Wysokość
   niesie `height`, nie dopełnienie pionowe: przy pigułce wysokość jest
   wymiarem projektowym (promień = połowa wysokości), a dopełnienie liczone
   z interlinii rozjeżdżało rząd przycisków o 1–2 px, tak samo jak w polach
   (powód rozpisany w kit.css przy .foreto-input).
   --------------------------------------------------------------------------- */

.foreto-btn,
.fi-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: var(--foreto-btn-h);
	padding: 0 var(--foreto-btn-pad-x);
	border: 1.5px solid transparent;
	border-radius: var(--foreto-radius-pill);
	font-family: var(--fi-display);
	font-weight: var(--wp--custom--weight--semibold);
	font-size: var(--wp--preset--font-size--card);
	line-height: 1;
	letter-spacing: var(--foreto-btn-tracking);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--foreto-transition-base), color var(--foreto-transition-base), border-color var(--foreto-transition-base);
}

.foreto-btn.foreto-btn--sm,
.fi-btn.fi-btn--sm { height: var(--foreto-btn-h-sm); padding: 0 var(--foreto-btn-pad-x-sm); font-size: var(--wp--preset--font-size--label); }
.foreto-btn.foreto-btn--lg,
.fi-btn.fi-btn--lg { height: var(--foreto-btn-h-lg); padding: 0 36px; font-size: 15px; }

/* Warianty. Nazwy foretowe (--solid, --dark, --light) zostają, bo używa ich kit
   i bloki PHP; nazwy z planszy (--granat, --obrys, --szklo, --biel) są dopisane
   obok jako aliasy, żeby dało się przenosić fragmenty plansz bez tłumaczenia. */
.foreto-btn.foreto-btn--solid,
.fi-btn.fi-btn--solid {
	padding: 0 var(--foreto-btn-pad-x);
	background: var(--fi-blekit-500);
	border-color: var(--fi-blekit-500);
	color: var(--wp--custom--text--on-accent);
	box-shadow: none;
}
.foreto-btn.foreto-btn--solid:hover, .foreto-btn.foreto-btn--solid:focus-visible,
.fi-btn.fi-btn--solid:hover, .fi-btn.fi-btn--solid:focus-visible {
	background: var(--fi-blekit-600);
	border-color: var(--fi-blekit-600);
}

.foreto-btn.foreto-btn--dark,
.fi-btn.fi-btn--granat {
	padding: 0 var(--foreto-btn-pad-x);
	background: var(--fi-granat-900);
	border-color: var(--fi-granat-900);
	color: var(--fi-biel);
}
.foreto-btn.foreto-btn--dark:hover, .foreto-btn.foreto-btn--dark:focus-visible,
.fi-btn.fi-btn--granat:hover, .fi-btn.fi-btn--granat:focus-visible {
	background: var(--fi-granat-700);
	border-color: var(--fi-granat-700);
}

.foreto-btn.foreto-btn--outline,
.fi-btn.fi-btn--obrys {
	padding: 0 var(--foreto-btn-pad-x);
	background: transparent;
	border-color: var(--foreto-border-control);
	color: var(--fi-granat-900);
}
.foreto-btn.foreto-btn--outline:hover, .foreto-btn.foreto-btn--outline:focus-visible,
.fi-btn.fi-btn--obrys:hover, .fi-btn.fi-btn--obrys:focus-visible { border-color: var(--fi-granat-900); }

/* Obrys biały — na ciemnym tle (pasmo CTA): biała kreska 1,5 px, biały tekst,
   koło błękitne. Najechanie wypełnia bielą jak wariant --biel. */
.fi-btn.fi-btn--obrys-biel {
	padding: 0 var(--foreto-btn-pad-x);
	background: transparent;
	border-color: var(--fi-biel);
	color: var(--fi-biel);
}
.fi-btn.fi-btn--obrys-biel:hover, .fi-btn.fi-btn--obrys-biel:focus-visible {
	background: var(--fi-biel);
	color: var(--fi-granat-900);
}

/* Szkło — TYLKO na ciemnym tle (hero, pasmo CTA, stopka). Na bieli półprzezroczysta
   biel na bieli daje przycisk bez granic, więc wariantu jasnego nie ma. */
.foreto-btn.foreto-btn--glass,
.fi-btn.fi-btn--szklo {
	padding: 0 var(--foreto-btn-pad-x);
	background: rgb(255 255 255 / 0.08);
	border-color: rgb(255 255 255 / 0.25);
	color: var(--fi-biel);
	backdrop-filter: blur(12px);
}
.foreto-btn.foreto-btn--glass:hover, .fi-btn.fi-btn--szklo:hover { background: rgb(255 255 255 / 0.16); }

.foreto-btn.foreto-btn--light,
.fi-btn.fi-btn--biel {
	padding: 0 var(--foreto-btn-pad-x);
	background: var(--fi-biel);
	border-color: var(--fi-biel);
	color: var(--fi-granat-900);
}
.foreto-btn.foreto-btn--light:hover, .foreto-btn.foreto-btn--light:focus-visible,
.fi-btn.fi-btn--biel:hover, .fi-btn.fi-btn--biel:focus-visible { background: var(--fi-lod); border-color: var(--fi-lod); }

.foreto-btn.foreto-btn--link,
.fi-btn.fi-btn--link {
	height: auto;
	padding: 0;
	gap: 10px;
	background: none;
	border-color: transparent;
	color: var(--fi-granat-900);
}
.na-ciemnym .foreto-btn.foreto-btn--link,
.na-ciemnym .fi-btn.fi-btn--link { color: var(--fi-biel); }

.foreto-btn:focus-visible,
.fi-btn:focus-visible {
	outline: 3px solid rgb(0 166 237 / 0.4);
	outline-offset: 3px;
}

.foreto-btn.foreto-btn[disabled], .foreto-btn.foreto-btn[aria-disabled="true"] {
	background: var(--fi-lod);
	border-color: transparent;
	color: var(--fi-tekst-2);
	opacity: 0.6;
}

/* Strzałka na końcu przycisku — bez koła w tle (zdjęte: na błękicie było
   jasnoniebieską plamą, na obrysie osobnym akcentem obok tekstu). Strzałka
   bierze kolor tekstu przycisku; na najechanie rośnie. */
.fi-btn__kolo {
	width: 20px;
	height: 20px;
	margin-right: -6px;
	background: none;
	color: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.fi-strzalka { width: 14px; height: 14px; display: inline-block; }

/* Przycisk-koło (ikonowy). Kursor „zobacz" na kartach realizacji. */
.fi-kolo {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	background: var(--fi-blekit-500);
	color: var(--fi-biel);
}
.fi-kolo--obrys { background: transparent; border: 1.5px solid var(--foreto-border-control); color: var(--fi-granat-900); }
.fi-kolo--szklo { background: rgb(255 255 255 / 0.1); border: 1.5px solid rgb(255 255 255 / 0.3); color: var(--fi-biel); }
.fi-kolo svg { width: 18px; height: 18px; }

/* Ikonowe przyciski kitu (powrót na górę, sterowanie karuzeli) — koło zamiast
   kwadratu, bo w tym systemie okrągłe jest wszystko, co ma jeden glif. */
.foreto-icon-btn { border-radius: 50%; }

/* ---------------------------------------------------------------------------
   4. Tag i znacznik.
   --------------------------------------------------------------------------- */

.fi-tag,
.foreto-badge,
.foreto-chip {
	border-radius: var(--foreto-radius-pill);
	font-family: var(--fi-display);
}

.fi-tag {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 14px;
	font-weight: var(--wp--custom--weight--medium);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fi-granat-500);
	background: var(--fi-lod);
}
.fi-tag--aktywny { background: var(--fi-granat-900); color: var(--fi-biel); }
/* Tag na ciemnej karcie (realizacje, hero). Wcześniej biel 10 % na zdjęciu —
   na jasnym kadrze tekst ginął (kontrast poniżej 3:1). Teraz tło to głębia
   65 % z rozmyciem i biała kreska 25 %: biel na tym tle ma ponad 9:1
   niezależnie od zdjęcia pod spodem. */
/* BEZ rozmycia tła: element z backdrop-filter przy ruchu o ułamki piksela
   jest rasteryzowany od nowa w każdej klatce i ruch wygląda jak drżenie.
   Ciemniejsze tło (72 %) daje ten sam kontrast bez rozmycia. */
.fi-tag--ciemny {
	background: rgb(7 15 43 / 0.72);
	border: 1px solid rgb(255 255 255 / 0.25);
	color: var(--fi-biel);
	/* Pływanie leci ZAWSZE, z amplitudą 0 w spoczynku (ta sama sztuczka, co
	   przy kole ze strzałką): włączanie animacji na najechaniu wrzucało tag
	   od razu w środek fazy (ujemne opóźnienie), a wyłączanie zerowało
	   przesunięcie skokowo. Amplituda i obrót przechodzą płynnie w 400 ms. */
	transition: transform 400ms ease, background-color 300ms ease;
	transform-origin: center;
}

/* Na najechaniu na kartę tagi ożywają — każdy przechyla się w inną stronę
   i pływa w innej fazie, jak ikony w bento. Kąty rozrzucone po pozycjach,
   żeby rząd nie kładł się jednym ruchem. */
a:hover .fi-tag--ciemny,
a:focus-visible .fi-tag--ciemny {
	background: rgb(7 15 43 / 0.85);
}
/* Kąt zależy od DWÓCH pozycji: tagu w karcie i karty w siatce. Karty
   nieparzyste zaczynają w lewo, parzyste w prawo, co trzecia ma własny
   zestaw — sąsiednie karty nigdy nie kładą pierwszego tagu tak samo. */
a:hover .fi-tag--ciemny:nth-child(1), a:focus-visible .fi-tag--ciemny:nth-child(1) { transform: rotate(-3deg); }
a:hover .fi-tag--ciemny:nth-child(2), a:focus-visible .fi-tag--ciemny:nth-child(2) { transform: rotate(2.5deg); }
a:hover .fi-tag--ciemny:nth-child(3), a:focus-visible .fi-tag--ciemny:nth-child(3) { transform: rotate(-2deg); }
a:hover .fi-tag--ciemny:nth-child(4), a:focus-visible .fi-tag--ciemny:nth-child(4) { transform: rotate(3deg); }

a:nth-child(2n):hover .fi-tag--ciemny:nth-child(1), a:nth-child(2n):focus-visible .fi-tag--ciemny:nth-child(1) { transform: rotate(2.5deg); }
a:nth-child(2n):hover .fi-tag--ciemny:nth-child(2), a:nth-child(2n):focus-visible .fi-tag--ciemny:nth-child(2) { transform: rotate(-3deg); }
a:nth-child(2n):hover .fi-tag--ciemny:nth-child(3), a:nth-child(2n):focus-visible .fi-tag--ciemny:nth-child(3) { transform: rotate(3deg); }
a:nth-child(2n):hover .fi-tag--ciemny:nth-child(4), a:nth-child(2n):focus-visible .fi-tag--ciemny:nth-child(4) { transform: rotate(-2deg); }

a:nth-child(3n):hover .fi-tag--ciemny:nth-child(1), a:nth-child(3n):focus-visible .fi-tag--ciemny:nth-child(1) { transform: rotate(-2deg); }
a:nth-child(3n):hover .fi-tag--ciemny:nth-child(2), a:nth-child(3n):focus-visible .fi-tag--ciemny:nth-child(2) { transform: rotate(3deg); }
a:nth-child(3n):hover .fi-tag--ciemny:nth-child(3), a:nth-child(3n):focus-visible .fi-tag--ciemny:nth-child(3) { transform: rotate(-3deg); }
a:nth-child(3n):hover .fi-tag--ciemny:nth-child(4), a:nth-child(3n):focus-visible .fi-tag--ciemny:nth-child(4) { transform: rotate(2.5deg); }

/* Faza pływania też przesunięta per karta, żeby dwa sąsiednie tagi
   w dwóch sąsiednich kartach nie unosiły się razem. */


/* Tag, który sam jest odsyłaczem albo przyciskiem (filtry portfolio i bloga):
   na WŁASNE najechanie robi to, co tagi na karcie na najechanie karty —
   unosi się i przechyla, na przemian w lewo i w prawo. Ta sama amplituda
   z przejściem, więc bez skoku przy wejściu i zejściu. */
a.fi-tag,
button.fi-tag {
	transition: background-color 300ms ease, color 300ms ease, transform 400ms ease;
	transform-origin: center;
}

a.fi-tag:hover, a.fi-tag:focus-visible,
button.fi-tag:hover, button.fi-tag:focus-visible { transform: rotate(-2deg); }
a.fi-tag:nth-child(2n):hover, a.fi-tag:nth-child(2n):focus-visible, :nth-child(2n) > a.fi-tag:hover, :nth-child(2n) > a.fi-tag:focus-visible,
button.fi-tag:nth-child(2n):hover, button.fi-tag:nth-child(2n):focus-visible, :nth-child(2n) > button.fi-tag:hover, :nth-child(2n) > button.fi-tag:focus-visible { transform: rotate(2deg); }
a.fi-tag:nth-child(3n):hover, a.fi-tag:nth-child(3n):focus-visible, :nth-child(3n) > a.fi-tag:hover, :nth-child(3n) > a.fi-tag:focus-visible,
button.fi-tag:nth-child(3n):hover, button.fi-tag:nth-child(3n):focus-visible, :nth-child(3n) > button.fi-tag:hover, :nth-child(3n) > button.fi-tag:focus-visible { transform: rotate(-1.5deg); }

@media (prefers-reduced-motion: reduce) {
	a.fi-tag, button.fi-tag { animation: none; transition: none; }
	a.fi-tag:hover, button.fi-tag:hover, a.fi-tag:focus-visible, button.fi-tag:focus-visible { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.fi-tag--ciemny { transition: none; animation: none; }
	a:hover .fi-tag--ciemny, a:focus-visible .fi-tag--ciemny { transform: none; }
}
.fi-tag--akcent { background: rgb(0 166 237 / 0.12); color: var(--fi-blekit-600); }


/* ---------------------------------------------------------------------------
   GLIFY ZAMIAST IKON FORETO. Kit maluje ikony pikselowymi plikami z
   assets/icons przez maskę; FormImpress rysuje wszystko kreską 1.8
   z zaokrąglonymi końcami (strzałki przycisków, koła, okno galerii). Tu
   podmiana masek na glify w tym stylu — data-URI, bez plików. Maska bierze
   tylko alfę, więc kolor kreski w SVG nie ma znaczenia. Zestaw obejmuje też
   komponenty, których FormImpress dziś nie pokazuje (oś czasu, karuzela kitu,
   lista kontrolna, cytat) — gdyby weszły na stronę, dostaną od razu właściwy
   glif.
   --------------------------------------------------------------------------- */
.foreto-btn__arrow,
.foreto-btn--sm .foreto-btn__arrow,
.foreto-icon--arrow-right,
.foreto-icon--arrow-right-sm,
.foreto-icon--arrow-long-right,
.foreto-case__arrow {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
}

.foreto-select-wrap::after,
.foreto-navbar__chev,
.foreto-header__lang-arrow,
.foreto-icon--chevron-down {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.foreto-page-btn__glyph,
.foreto-carousel__glyph,
.foreto-icon--chevron-sm {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
}

.foreto-timeline__more-glyph,
.foreto-scroll-mark__glyph,
.foreto-icon--double-chevron-down {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l6 6 6-6M6 13l6 6 6-6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l6 6 6-6M6 13l6 6 6-6'/%3E%3C/svg%3E");
}

.foreto-facets__opt::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
}

.foreto-checklist li::before,
.foreto-case-list > li::before,
.foreto-icon--check-square {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zM8 12.5l3 3 5-6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zM8 12.5l3 3 5-6'/%3E%3C/svg%3E");
}

.foreto-quote__mark,
.foreto-icon--quote {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16a3 3 0 0 1-3-3V9a4 4 0 0 1 4-4M19 16a3 3 0 0 1-3-3V9a4 4 0 0 1 4-4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16a3 3 0 0 1-3-3V9a4 4 0 0 1 4-4M19 16a3 3 0 0 1-3-3V9a4 4 0 0 1 4-4'/%3E%3C/svg%3E");
}

.foreto-shot__go {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H4v5M15 4h5v5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H4v5M15 4h5v5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E");
}

.foreto-case__live::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6'/%3E%3C/svg%3E");
}


/* Przycisk „na górę" jako koło z obrysem jak reszta kół FormImpress. Kit
   wstawia dwukolorowy obrazek Foreto i na najechanie maluje tło ciemną
   linią (--foreto-border-hairline jest u nas granatowe), więc czarny glif
   znikał. Obrazek schowany, glif z maski (jeden kolor, bierze currentColor). */
.foreto-to-top.foreto-icon-btn {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1.5px solid var(--foreto-border-control);
	background: var(--fi-biel);
	color: var(--fi-granat-900);
	box-shadow: var(--fi-cien-1);
	transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, opacity 300ms ease, translate 300ms ease, visibility 300ms ease;
}

.foreto-to-top .foreto-to-top__glyph { display: none; }

.foreto-to-top::before {
	content: '';
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform 300ms ease;
}

.foreto-to-top:hover,
.foreto-to-top:focus-visible {
	background: var(--fi-blekit-500);
	border-color: var(--fi-blekit-500);
	color: var(--fi-biel);
}

.foreto-to-top:hover::before,
.foreto-to-top:focus-visible::before { transform: scale(1.25); }

/* ---------------------------------------------------------------------------
   5. Pola — na lodzie, 56 px, fokus błękitny.

   Foreto rysuje pole obwódką na bieli. FormImpress kładzie je na LODZIE bez
   obwódki: pole jest wtedy widoczne jako plama, a nie jako ramka, i cała
   uwaga zostaje przy fokusie. Obwódka jest przezroczysta, a nie żadna —
   inaczej pole skakałoby o 3 px w chwili fokusu.
   --------------------------------------------------------------------------- */

.foreto-input,
.foreto-textarea,
.foreto-select,
.foreto-file,
.fi-pole__wejscie {
	border: 1.5px solid transparent;
	border-radius: var(--foreto-radius);
	background: var(--fi-lod);
	color: var(--fi-tekst);
}

.foreto-input:hover,
.foreto-textarea:hover,
.foreto-select:hover,
.foreto-file:hover { border-color: rgb(13 44 84 / 0.2); }

/* Pole pliku to etykieta z ukrytym wejściem, więc fokus czyta się z rodzica. */
.foreto-input:focus-visible,
.foreto-textarea:focus-visible,
.foreto-select:focus-visible,
.foreto-field--file:has(input:focus-visible) .foreto-file,
.fi-pole__wejscie--fokus {
	background: var(--fi-biel);
	border-color: var(--fi-blekit-500);
	box-shadow: 0 0 0 4px rgb(0 166 237 / 0.15);
	outline: none;
}

.foreto-input:not(:placeholder-shown),
.foreto-textarea:not(:placeholder-shown),
.foreto-field[data-filled] .foreto-input,
.foreto-field[data-filled] .foreto-textarea,
.foreto-file[data-state="selected"] { border-color: rgb(13 44 84 / 0.2); }

.foreto-input[aria-invalid="true"],
.foreto-textarea[aria-invalid="true"],
.foreto-select[aria-invalid="true"],
.foreto-file[aria-invalid="true"],
.foreto-field--file[data-invalid] .foreto-file,
.fi-pole__wejscie--blad {
	background: var(--fi-biel);
	border-color: var(--fi-czerwien-foreto);
}

/* Checkbox kitu (maska z pikselową ikoną Foreto, szary #737373) nie pasuje do
   reszty strony. Tu ten sam kwadrat, co .fi-check w wycenie: 22 px, promień
   7, obwódka granatowa 30 %, po zaznaczeniu błękit z białym ptaszkiem
   (ten sam glif, co w wycenie, tylko jako tło, bo natywne pole nie ma
   dzieci). Fokus i błąd jak w polach tekstowych. */
.foreto-checkbox {
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border: 1.5px solid rgb(13 44 84 / 0.3);
	border-radius: 7px;
	background-color: var(--fi-biel);
	-webkit-mask: none;
	mask: none;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.foreto-checkbox:hover { background-color: var(--fi-biel); border-color: rgb(13 44 84 / 0.5); }

.foreto-checkbox:checked {
	background-color: var(--fi-blekit-500);
	border-color: var(--fi-blekit-500);
	-webkit-mask: none;
	mask: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7.5L5.5 10.5L11.5 4'/%3E%3C/svg%3E");
}

.foreto-checkbox:focus-visible {
	outline: none;
	border-color: var(--fi-blekit-500);
	box-shadow: 0 0 0 4px rgb(0 166 237 / 0.15);
}

.foreto-checkbox[aria-invalid="true"] {
	background-color: var(--fi-biel);
	border-color: var(--fi-czerwien-foreto);
}

.foreto-consent { align-items: flex-start; gap: 12px; }

/* Ikona spinacza w polu pliku: kreska 1.8 jak strzałki, błękit. */
.fi-pole__ikona {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	display: grid;
	place-items: center;
	color: var(--fi-blekit-600);
}

.fi-pole__ikona svg { width: 20px; height: 20px; }

/* Grupa <main> w układzie „flow" dokłada każdemu kolejnemu dziecku
   margin-block-start równy block-gap (24 px). Sekcje widoków mają własny rytm
   w paddingu — ten margines robił 24 px szczeliny między ciemnym pasmem
   a lodową sekcją. */
main > .fi-g-sekcja,
main > .fi-g-pasmo,
main > .fi-p-sekcja,
main > .fi-hero,
main > .foreto-section,
main > [class*="wp-block-formimpress-"] { margin-block-start: 0; }

/* Okno wyniku formularza (<dialog>): jedna karta na środku, tło przyciemnione
   granatem. Ikona w kole jak kafle ikon, lista błędów jako lodowe pigułki
   z odsyłaczem do pola. */
.fi-okno {
	width: min(460px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: var(--foreto-radius-card);
	background: var(--fi-biel);
	color: var(--fi-tekst);
	box-shadow: 0 30px 80px rgb(7 15 43 / 0.28);
	overflow: auto;
}

.fi-okno::backdrop {
	background: rgb(7 15 43 / 0.55);
	backdrop-filter: blur(6px);
}

.fi-okno[open] { animation: fi-okno-wjazd 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }

@keyframes fi-okno-wjazd {
	from { opacity: 0; translate: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.fi-okno[open] { animation: none; }
}

.fi-okno__tresc {
	padding: 40px 36px 36px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.fi-okno__ikona {
	width: 72px;
	height: 72px;
	border-radius: 24px;
	display: grid;
	place-items: center;
	margin-bottom: 20px;
	background: rgb(0 166 237 / 0.12);
	color: var(--fi-blekit-600);
	rotate: -4deg;
	animation: fi-plyw 5s ease-in-out infinite;
}

.fi-okno--blad .fi-okno__ikona {
	background: rgb(227 30 36 / 0.1);
	color: var(--fi-czerwien-foreto);
}

.fi-okno__tytul {
	margin: 0;
	font-family: var(--fi-display);
	font-weight: 600;
	font-size: 22px;
	line-height: 30px;
	color: var(--fi-granat-900);
	text-wrap: balance;
}

.fi-okno__lista {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: left;
}

.fi-okno__lista[hidden] { display: none; }

.fi-okno__lista a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 16px;
	border-radius: 16px;
	background: var(--fi-lod);
	font-size: 14px;
	line-height: 22px;
	color: var(--fi-tekst-2);
	text-decoration: none;
	transition: background 0.2s ease;
}

.fi-okno__lista a strong {
	font-family: var(--fi-display);
	font-weight: 600;
	color: var(--fi-granat-900);
}

.fi-okno__lista a:hover,
.fi-okno__lista a:focus-visible { background: rgb(0 166 237 / 0.12); }

.fi-okno__akcje { margin-top: 28px; }

.foreto-label,
.fi-pole__etykieta {
	font-family: var(--fi-display);
	font-weight: var(--wp--custom--weight--semibold);
	font-size: var(--wp--preset--font-size--card);
	line-height: var(--foreto-space-3);
	color: var(--fi-granat-900);
	text-transform: none;
	letter-spacing: 0;
}

/* ---------------------------------------------------------------------------
   6. Karta — 24 px, linia 10 %.
   --------------------------------------------------------------------------- */

.foreto-card,
.fi-karta {
	background: var(--wp--custom--surface--card);
	border: var(--fi-linia);
	border-radius: var(--foreto-radius-card);
}

.foreto-card--shadow { box-shadow: var(--fi-cien-1); border-color: transparent; }
.foreto-card--accent { background: var(--fi-blekit-500); border-color: transparent; }

.fi-karta--lod { background: var(--fi-lod); border-color: transparent; }
.fi-karta--ciemna { background: var(--fi-granat-900); border-color: transparent; color: var(--fi-biel); }
.fi-karta--glebia { background: var(--fi-glebia); border-color: rgb(255 255 255 / 0.08); color: var(--fi-biel); }
.fi-karta--gradient { background: var(--fi-gradient); border-color: transparent; color: var(--fi-biel); }

/* Kafel ikony usługi — 64 px, promień 18. Promień jest MIĘDZY polem (16)
   a kartą (24), bo kafel jest jednym i drugim naraz: nosi ikonę jak pole
   i stoi na karcie jak karta. Jedyna liczba w tym arkuszu spoza skali —
   wprost z planszy Karty.dc.html. */
.fi-ikona-kafel {
	width: 64px;
	height: 64px;
	border-radius: 18px;
	background: var(--fi-lod);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.fi-ikona-kafel--ciemny { background: rgb(255 255 255 / 0.08); }
.fi-ikona-kafel .fi-ikona { width: 36px; height: 36px; }

/* ---------------------------------------------------------------------------
   PŁYWANIE — motyw przewodni ruchu w serwisie.

   Wszystko, co jest „obiektem" (kafel ikony, karta w hero i w panelu, koło ze
   strzałką), unosi się o kilka pikseli i opada, jak na wodzie. Ruch idzie na
   `translate`, a nie na `transform`: dzięki temu powiększenie i obrót na
   najechaniu (które są na `transform`) nakładają się na pływanie, zamiast je
   zatrzymywać. Fazy są rozrzucone po sąsiadach, żeby rząd ikon nie kołysał
   się chórem. Przy ograniczonym ruchu w systemie wszystko stoi.
   --------------------------------------------------------------------------- */
@keyframes fi-plyw {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -6px; }
}

.fi-ikona-kafel { animation: fi-plyw 5s ease-in-out infinite; transition: transform 400ms ease, background-color 400ms ease; transform-origin: center; }

/* Obraz-ozdoba w treści (np. maszyna do pisania obok tekstu o wydawnictwie):
   stoi na środku swojej kolumny, w pionie na wysokości tekstu, lekko
   przekręcony jak karty realizacji i pływa jak ikony. Klasa dla bloku obrazu
   z edytora (Dodatkowe klasy CSS). */
/* Dwie kolumny w motywie FormImpress dzielą się 1:1 (jedna reguła dla całej
   witryny), a nie 1,2:1 z kitu, gdzie pierwsza kolumna jest szersza. */
.foreto-split > *,
.foreto-split > :first-child { flex: 1 1 486px; }
/* Rynna między kolumnami taka sama jak w głowie sekcji (siatka 1:1, space-7):
   druga kolumna zaczyna się dokładnie pod leadem głowy, a nie 12 px dalej. */
.foreto-split { column-gap: var(--foreto-space-7); }

/* Obraz w splicie 1:1 stoi na środku swojej kolumny i nie wystaje poza wysokość
   tekstu obok: przy 70 % szerokości kolumny (z obrotem -3°) jego obrys mieści się
   w stosie akapitów z przyciskiem. */
.fi-obraz-plyw { display: flex; justify-content: center; align-self: center; margin: 0; }
.fi-obraz-plyw img { max-width: 70%; height: auto; rotate: -3deg; animation: fi-plyw 6s ease-in-out infinite; animation-delay: -1.2s; will-change: translate; }

/* Na wąskim ekranie obraz stoi nad tekstem, nie obok — nie ma czego nie przerastać,
   więc dostaje więcej miejsca. */
@media (max-width: 600px) {
	.fi-obraz-plyw img { max-width: 84%; }
}

@media (prefers-reduced-motion: reduce) {
	.fi-obraz-plyw img { rotate: 0deg; animation: none; }
}

/* Oś czasu (kit): numer etapu ma stać NA ŚRODKU szyny — kit centruje go
   przez margin-inline: auto, a zaraz potem zeruje marginesem w regule numeru,
   więc numer zjeżdżał do lewej krawędzi i wchodził na punkt. Do tego numer
   i punkt pływają jak tagi i ikony kafli — różne fazy, żeby nie kołysały się
   chórem. Przy ograniczonym ruchu stoją. */
.foreto-timeline .foreto-timeline__year,
.foreto-timeline .foreto-timeline__month { margin-inline: auto; }
.foreto-timeline .foreto-timeline__year { animation: fi-plyw 5s ease-in-out infinite; }
.foreto-timeline .foreto-timeline__dot { animation: fi-plyw 6s ease-in-out infinite; animation-delay: -2.4s; }
.foreto-timeline__item:nth-child(even) .foreto-timeline__year { animation-delay: -1.8s; }
.foreto-timeline__item:nth-child(even) .foreto-timeline__dot { animation-delay: -4.1s; }

@media (prefers-reduced-motion: reduce) {
	.foreto-timeline .foreto-timeline__year,
	.foreto-timeline .foreto-timeline__dot { animation: none; }
}

/* Ikona w kaflu na najechanie na KAŻDĄ kartę-odsyłacz (listing usług,
   powiązane usługi, bento): rośnie o 8 % i przechyla się — na przemian
   w lewo i w prawo po pozycji karty w siatce, żeby rząd nie kładł się
   jednym gestem. Pływanie leci dalej (jest na `translate`). */
a:hover .fi-ikona-kafel,
a:focus-visible .fi-ikona-kafel { transform: scale(1.08) rotate(-4deg); }
a:nth-child(2n):hover .fi-ikona-kafel,
a:nth-child(2n):focus-visible .fi-ikona-kafel { transform: scale(1.08) rotate(5deg); }
a:nth-child(3n):hover .fi-ikona-kafel,
a:nth-child(3n):focus-visible .fi-ikona-kafel { transform: scale(1.08) rotate(-6deg); }
:nth-child(2n) > .fi-ikona-kafel, :nth-child(2n) .fi-ikona-kafel { animation-delay: -1.7s; }
:nth-child(3n) > .fi-ikona-kafel, :nth-child(3n) .fi-ikona-kafel { animation-delay: -3.1s; }
:nth-child(5n) > .fi-ikona-kafel, :nth-child(5n) .fi-ikona-kafel { animation-delay: -0.9s; }

/* Koło ze strzałką — JEDNA reakcja na wskazanie w całym serwisie, na każdej
   karcie: koło wypełnia się błękitem i PŁYWA (plyw.js), a glif w środku
   ROŚNIE o 35 %. Dwa ruchy na dwóch elementach — nie nakładają się. Pływanie na najechanie robi
   plyw.js (Web Animations API) — patrz komentarz w tym pliku.
   To sygnał „to jest odsyłacz" — ten sam, gdziekolwiek go zobaczysz. */
.fi-kolo,
.fi-btn__kolo {
	transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, transform 300ms ease;
	transform-origin: center;
}
.fi-kolo svg { transition: transform 300ms ease; transform-origin: center; }

/* Koło, które samo jest przyciskiem albo odsyłaczem (strzałki karuzeli,
   szukajka), reaguje tak samo jak koło w karcie. */
a:hover .fi-kolo,
a:focus-visible .fi-kolo,
button:hover .fi-kolo,
button.fi-kolo:hover,
button.fi-kolo:focus-visible,
a.fi-kolo:hover,
a.fi-kolo:focus-visible,
.fi-g-panel__karta:hover .fi-kolo {
	background: var(--fi-blekit-500);
	border-color: var(--fi-blekit-500);
	color: var(--fi-biel);
}
a:hover .fi-kolo svg,
a:focus-visible .fi-kolo svg,
button:hover .fi-kolo svg,
button.fi-kolo:hover svg,
button.fi-kolo:focus-visible svg,
a.fi-kolo:hover svg,
a.fi-kolo:focus-visible svg,
.fi-g-panel__karta:hover .fi-kolo svg { transform: scale(1.35); }

button.fi-kolo { cursor: pointer; }
button.fi-kolo:focus-visible { outline: none; box-shadow: 0 0 0 4px rgb(0 166 237 / 0.25); }

/* Koło w przycisku: KOŁO PŁYWA (plyw.js, na translate), a SAMA STRZAŁKA
   rośnie o 10 % — dwa ruchy na dwóch elementach, więc nie nakładają się
   i nic nie przeskakuje. Koło nie zmienia rozmiaru. */
.fi-btn__kolo svg { transition: transform 300ms ease; transform-origin: center; }
.fi-btn:hover .fi-btn__kolo svg,
.fi-btn:focus-visible .fi-btn__kolo svg { transform: scale(1.25); }

/* Na błękitnym tle (kafel gradientowy, przycisk solid) błękitne koło by
   zniknęło — tam wypełnienie idzie w granat. */
.fi-g-kafel--gradient:hover .fi-kolo { background: var(--fi-granat-900); border-color: var(--fi-granat-900); }

@media (prefers-reduced-motion: reduce) {
	.fi-ikona-kafel, .fi-kolo, .fi-btn__kolo { animation: none; }
	.fi-ikona-kafel { transition: none; }
	a:hover .fi-ikona-kafel, a:focus-visible .fi-ikona-kafel { transform: none; }
	.fi-kolo, .fi-btn__kolo, .fi-kolo svg, .fi-btn__kolo svg { transition: none; }
	a:hover .fi-kolo, a:focus-visible .fi-kolo, button:hover .fi-kolo, .fi-g-panel__karta:hover .fi-kolo, .fi-btn:hover .fi-btn__kolo, .fi-btn:focus-visible .fi-btn__kolo,
	a:hover .fi-kolo svg, a:focus-visible .fi-kolo svg, button:hover .fi-kolo svg, .fi-g-panel__karta:hover .fi-kolo svg, .fi-btn:hover .fi-btn__kolo svg, .fi-btn:focus-visible .fi-btn__kolo svg { transform: none; }
}

/* ---------------------------------------------------------------------------
   7. Tła — kropki, siatka, poświata, trójkąty.

   Wszystkie CSS-em, żaden PNG. Mapa kropek ze starej stopki była obrazem
   500 kB; radial-gradient rysuje to samo za zero bajtów i skaluje się
   na każdą szerokość.
   --------------------------------------------------------------------------- */

.fi-kropki {
	background-image: radial-gradient(circle, rgb(255 255 255 / 0.22) 1.2px, transparent 1.5px);
	background-size: 12px 12px;
}
.fi-kropki--ciemne {
	background-image: radial-gradient(circle, rgb(13 44 84 / 0.18) 1.2px, transparent 1.5px);
	background-size: 12px 12px;
}
.fi-siatka {
	background-image:
		linear-gradient(rgb(13 44 84 / 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgb(13 44 84 / 0.06) 1px, transparent 1px);
	background-size: 48px 48px;
}
.fi-poswiata {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	pointer-events: none;
}
.fi-trojkaty {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='48' viewBox='0 0 56 48'><path d='M0 0h55L27.5 47z' fill='none' stroke='rgba(255,255,255,0.10)' stroke-width='1'/></svg>");
	background-size: 56px 48px;
}

/* ---------------------------------------------------------------------------
   8. Logo w nagłówku i stopce.
   --------------------------------------------------------------------------- */

.fi-logo { display: block; height: 36px; width: auto; color: currentColor; }
.fi-logo svg { display: block; height: 100%; width: auto; }

/* ---------------------------------------------------------------------------
   9. Zredukowany ruch — jedna reguła na całą warstwę.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.foreto-btn,
	.fi-btn { transition: none; }
}

/* ===========================================================================
   NAGŁÓWEK — pływająca nawigacja w pigułce.

   DWA WARIANTY, DWA ZACHOWANIA W UKŁADZIE, i to nie jest kosmetyka.
   „ciemny" stoi NAD hero (position: absolute), więc nie zabiera wysokości:
   hero zaczyna się przy górnej krawędzi okna i to on niesie odstęp na pasek.
   „jasny" stoi W POTOKU i przykleja się do góry przy przewijaniu — na białej
   stronie pasek musi być cały czas pod ręką, a nie tylko na starcie.

   Plansze: Sekcje.dc.html (nav-ciemna / nav-jasna), StronaGlowna.dc.html.
   =========================================================================== */

.fi-naglowek {
	position: relative;
	z-index: 50;
	padding: var(--foreto-space-4) var(--foreto-wrap-gutter) 0;
}

.fi-naglowek--ciemny {
	position: absolute;
	inset-inline: 0;
	top: 0;
}

.fi-naglowek--jasny {
	position: sticky;
	top: 0;
	background: var(--wp--custom--surface--page);
	padding-bottom: var(--foreto-space-4);
}

.fi-nawigacja {
	position: relative;
	/* NAD PANELEM MENU (40). Pigułka i panel są rodzeństwem, więc o tym, co
	   przykrywa co, decyduje wyłącznie z-index — a pigułka musi zostać na
	   wierzchu, bo niesie krzyżyk zamykający. */
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--foreto-space-5);
	max-width: var(--foreto-wrap-max);
	margin-inline: auto;
	height: 80px;
	padding: 0 var(--foreto-space-4) 0 var(--foreto-space-5);
	border-radius: var(--foreto-radius-pill);
}

/* TŁO PIGUŁKI STOI NA PSEUDOELEMENCIE, NIE NA SAMEJ PIGUŁCE, i to nie jest
   ozdobnik składni — bez tego menu mobilne jest niesprawne.
   `backdrop-filter` tworzy BLOK ZAWIERAJĄCY dla potomków `position: fixed`
   (CSS Filter Effects 1, „containing block"), więc pełnoekranowy panel menu,
   który siedzi w pasku, przyklejał się do wnętrza pigułki zamiast do okna:
   zmierzone — panel wychodził wysoki na 80 px i szeroki na pasek.
   Zdjęte na pseudoelement rozmycie nie obejmuje potomków paska, a wygląda
   dokładnie tak samo.

   Samo rozmycie też nie jest ozdobą: bez niego biały tekst na jasnym zrzucie
   projektu w hero traci kontrast. Przeglądarka bez obsługi dostaje samo tło
   rgba, które przy 0,45 krycia i tak wystarcza na 4,5:1. */
.fi-nawigacja::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	backdrop-filter: blur(16px);
}

.fi-nawigacja--szklo { color: var(--fi-biel); }
.fi-nawigacja--szklo::before {
	background: rgb(7 15 43 / 0.45);
	border: 1px solid rgb(255 255 255 / 0.14);
}

.fi-nawigacja--biel { color: var(--fi-granat-900); }
.fi-nawigacja--biel::before {
	background: rgb(255 255 255 / 0.8);
	border: var(--fi-linia);
	box-shadow: var(--fi-cien-1);
}

.fi-naglowek .fi-logo { height: 37px; flex: 0 0 auto; }
.fi-naglowek .fi-logo svg { height: 37px; }

.fi-menu__lista {
	display: flex;
	align-items: center;
	gap: var(--foreto-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fi-menu__link {
	font-family: var(--fi-display);
	font-weight: var(--wp--custom--weight--medium);
	font-size: 15px;
	line-height: var(--foreto-space-4);
	color: inherit;
	text-decoration: none;
	transition: color var(--foreto-transition-fast);
}

.fi-menu__link:hover { color: var(--fi-blekit-300); }
.fi-nawigacja--biel .fi-menu__link:hover { color: var(--fi-blekit-600); }

/* Pozycja bieżąca — kolor I podkreślenie. Sam kolor byłby jedynym nośnikiem
   informacji (1.4.1), a błękit na białej pigułce ledwie przechodzi próg. */
.fi-menu__link[aria-current="page"],
.fi-menu__link[aria-current="location"] {
	color: var(--fi-blekit-300);
	text-decoration: underline;
	text-underline-offset: 8px;
	text-decoration-thickness: 2px;
}
.fi-nawigacja--biel .fi-menu__link[aria-current="page"],
.fi-nawigacja--biel .fi-menu__link[aria-current="location"] { color: var(--fi-blekit-600); }

.fi-naglowek__prawa { display: flex; align-items: center; gap: var(--foreto-space-4); }

.fi-jezyki {
	display: flex;
	align-items: center;
	gap: var(--foreto-space-2);
	font-family: var(--fi-display);
	font-weight: var(--wp--custom--weight--medium);
	font-size: 13px;
	line-height: var(--foreto-space-4);
}

.fi-jezyki__poz { color: inherit; text-decoration: none; }
.fi-jezyki__poz--wyl { opacity: 0.4; }

/* --- Szuflada: hamburger i menu pełnoekranowe --------------------------- */

/* Guzik hamburgera stoi TYLKO na wąskim ekranie. Na desktopie pasek pokazuje
   wszystkie pięć pozycji, więc drugi sposób dojścia do nich jest zbędnym
   przystankiem tabulatora. `display: none` zdejmuje go z kolejności tabulacji
   i o to tu chodzi. */
.fi-szuflada__guzik {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: inherit;
	background: rgb(255 255 255 / 0.1);
}
.fi-nawigacja--biel .fi-szuflada__guzik { background: rgb(13 44 84 / 0.06); }

/* Trzy kreski rysowane jednym elementem: środkowa to on sam, skrajne to
   pseudoelementy. Po otwarciu składają się w krzyżyk (plansza MobilneMenu). */
.fi-szuflada__glif,
.fi-szuflada__glif::before,
.fi-szuflada__glif::after {
	display: block;
	width: 18px;
	height: 1.8px;
	border-radius: 2px;
	background: currentColor;
	transition: transform var(--foreto-transition-base), opacity var(--foreto-transition-fast);
}
.fi-szuflada__glif { position: relative; }
.fi-szuflada__glif::before,
.fi-szuflada__glif::after { content: ''; position: absolute; left: 0; }
.fi-szuflada__glif::before { top: -6px; }
.fi-szuflada__glif::after { top: 6px; width: 12px; }

.fi-szuflada__stan:checked ~ .fi-nawigacja .fi-szuflada__glif { background: transparent; }
.fi-szuflada__stan:checked ~ .fi-nawigacja .fi-szuflada__glif::before { top: 0; width: 18px; transform: rotate(45deg); }
.fi-szuflada__stan:checked ~ .fi-nawigacja .fi-szuflada__glif::after { top: 0; width: 18px; transform: rotate(-45deg); }

.fi-szuflada__stan:focus-visible ~ .fi-nawigacja .fi-szuflada__guzik { outline: 3px solid rgb(0 166 237 / 0.4); outline-offset: 3px; }

/* Panel: cały ekran, nie szuflada z boku. Przy pięciu pozycjach panel na
   420 px zostawiałby połowę ekranu na przygaszoną stronę pod spodem —
   plansza pokazuje pełny ekran i to jest właściwsze: menu jest tu jedyną
   rzeczą, którą się w tej chwili robi. Wejście od dołu (translateY), bo
   telefon trzyma się u dołu i stamtąd wygodniej sięgnąć. */
/* Panel wchodzi POD pasek, nie nad niego (40 < 50 z .fi-naglowek). Pigułka
   z hamburgerem musi zostać widoczna, bo to ona zamienia się w krzyżyk i jest
   jedynym widocznym wyjściem z menu — Escape trzeba wiedzieć. */
.fi-szuflada__panel {
	position: fixed;
	inset: 0;
	z-index: 40;
	width: 100%;
	padding: 88px var(--foreto-space-4) var(--foreto-space-7);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	background: var(--fi-glebia);
	color: var(--fi-biel);
	border: 0;
	transform: translateY(2%);
	opacity: 0;
	visibility: hidden;
	transition:
		transform var(--foreto-transition-base),
		opacity var(--foreto-transition-base),
		visibility var(--foreto-transition-base);
}

.fi-szuflada__stan:checked ~ .fi-szuflada__panel {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
}

.fi-szuflada__poswiata {
	width: 420px;
	height: 420px;
	right: -160px;
	bottom: -160px;
	background: rgb(0 166 237 / 0.35);
}

.fi-szuflada__nawigacja { position: relative; }

.fi-szuflada__lista { margin: 0; padding: 0; list-style: none; }

.fi-szuflada__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 0;
	border-bottom: 1px solid rgb(255 255 255 / 0.1);
	font-family: var(--fi-display);
	font-weight: var(--wp--custom--weight--medium);
	font-size: 26px;
	line-height: var(--foreto-space-5);
	color: var(--fi-biel);
	text-decoration: none;
}
.fi-szuflada__lista > li:last-child .fi-szuflada__link { border-bottom: 0; }
.fi-szuflada__link[aria-current="page"],
.fi-szuflada__link[aria-current="location"] { color: var(--fi-blekit-300); }

.fi-szuflada__stopa {
	position: relative;
	margin-top: auto;
	padding-top: var(--foreto-space-7);
	display: flex;
	flex-direction: column;
	gap: var(--foreto-space-3);
}

.fi-btn.fi-btn--pelny { width: 100%; }

.fi-szuflada__wiersz { display: flex; align-items: center; justify-content: space-between; }
.fi-szuflada__telefon {
	font-family: var(--fi-display);
	font-weight: var(--wp--custom--weight--medium);
	font-size: 15px;
	color: var(--fi-blekit-300);
	text-decoration: none;
}

/* Na szerokim ekranie pasek pokazuje wszystkie pozycje, więc hamburger i panel
   schodzą CAŁKOWICIE (`display: none`), a nie tylko z oczu: inaczej zostawiłyby
   przystanek tabulatora prowadzący do drugiej kopii tego samego menu. */
@media (min-width: 1182px) {
	.fi-szuflada__guzik,
	.fi-szuflada__panel { display: none; }
}

@media (max-width: 1181px) {
	.fi-menu { display: none; }
	.fi-naglowek__cta { display: none; }
}

@media (max-width: 640px) {
	.fi-naglowek { padding-inline: 12px; }
	.fi-nawigacja { height: 64px; padding: 0 12px 0 18px; }
	.fi-naglowek .fi-logo,
	.fi-naglowek .fi-logo svg { height: 28px; }
	.fi-naglowek > .fi-nawigacja > .fi-naglowek__prawa > .fi-jezyki { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.fi-szuflada__panel,
	.fi-szuflada__glif,
	.fi-szuflada__glif::before,
	.fi-szuflada__glif::after { transition: none; }
}

/* ===========================================================================
   STOPKA.
   =========================================================================== */

/* Pas Grupy Foreto nad stopką: lód, tekst po lewej, sześć białych kafli
   z logami po prawej. Kafle i ich pływanie biorą style .fi-g-loga__pole
   i .fi-g-spolka z widoki-glowna.css (ładowanego na każdej stronie). */
.fi-pas-grupy {
	background: var(--fi-lod);
	padding: var(--foreto-space-8) var(--foreto-wrap-gutter);
}

.fi-pas-grupy__wnetrze {
	max-width: var(--foreto-wrap-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--foreto-space-8);
	align-items: center;
}

.fi-pas-grupy__tekst {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

/* Tytuł jak w sekcjach (.fi-g-h2: em cienkie, mark błękit), tylko mniejszy —
   to pas nad stopką, nie sekcja. */
.fi-pas-grupy .fi-pas-grupy__tytul { font-size: 30px; line-height: 36px; }

.fi-pas-grupy__opis {
	margin: 0;
	max-width: 46ch;
	font-size: 15px;
	line-height: 24px;
	color: var(--fi-tekst-2);
}

.fi-pas-grupy__loga {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.fi-pas-grupy .fi-g-loga__pole { background: var(--fi-biel); }

@media (max-width: 1023px) {
	.fi-pas-grupy__wnetrze { grid-template-columns: 1fr; gap: var(--foreto-space-6); }
}

@media (max-width: 599px) {
	.fi-pas-grupy { padding-block: var(--foreto-space-7); }
	.fi-pas-grupy__loga { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.fi-stopka {
	position: relative;
	overflow: hidden;
	background: var(--fi-glebia);
	color: var(--wp--custom--text--on-dark);
	/* Po zdjęciu bloku „Porozmawiajmy" siatka jest pierwsza — górne dopełnienie
	   stopki i górne dopełnienie siatki sumowały się do 128 px. */
	padding: var(--foreto-space-8) var(--foreto-wrap-gutter) var(--foreto-space-5);
}

/* Mapa z kropek — prawa strona, wygaszona maską ku lewej, żeby nie wchodziła
   pod tekst kolumn. Maska, nie krycie całości: kropki mają zniknąć TAM, gdzie
   stoi treść, a nie zblednąć wszędzie po równo. */
.fi-stopka__mapa {
	position: absolute;
	inset-block: 0;
	right: 0;
	width: 44%;
	opacity: 0.6;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 50%);
	        mask-image: linear-gradient(90deg, transparent 0%, #000 50%);
	pointer-events: none;
}

.fi-stopka__wnetrze {
	position: relative;
	max-width: var(--foreto-wrap-max);
	margin-inline: auto;
}

/* Góra stopki („Porozmawiajmy" z kontaktem) zdjęta: dublowała pasmo CTA,
   które stoi teraz nad pasem Grupy Foreto. Kontakt biura jest w kolumnie. */

.fi-stopka__siatka {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--foreto-space-7);
	padding: 0 0 var(--foreto-space-7);
}

.fi-stopka__marka { display: flex; flex-direction: column; gap: var(--foreto-space-4); }
.fi-stopka__marka .fi-logo { height: 37px; color: var(--fi-biel); }
.fi-stopka__marka .fi-logo svg { height: 37px; }

.fi-stopka__opis {
	margin: 0;
	max-width: 360px;
	font-size: var(--wp--preset--font-size--card);
	line-height: var(--wp--custom--line--card);
	color: rgb(255 255 255 / 0.6);
}

/* Odsyłacz do Foreto jak każdy odsyłacz w serwisie: błękitne podkreślenie.
   Czerwień Foreto zeszła z tekstów na życzenie — została tylko w stanach
   błędu pól formularza. */
.fi-stopka__foreto {
	color: var(--fi-biel);
	text-decoration: underline;
	text-decoration-color: var(--fi-blekit-500);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.fi-stopka__social { display: flex; gap: var(--foreto-space-3); }

/* Koła społecznościowe: 48 px, glif 20 px, pływają bez przerwy jak kafle
   ikon — każde w innej fazie, żeby rząd nie unosił się w takt. */
.fi-social {
	width: 48px;
	height: 48px;
	text-decoration: none;
	animation: fi-plyw 5s ease-in-out infinite;
}

.fi-social:nth-child(2) { animation-delay: -1.7s; }
.fi-social:nth-child(3) { animation-delay: -3.4s; }
.fi-social__glif { width: 20px; height: 20px; }

.fi-stopka__kol { display: flex; flex-direction: column; gap: var(--foreto-space-2); }

.fi-stopka__tytul {
	margin: 0 0 var(--foreto-space-2);
	font-family: var(--fi-display);
	font-weight: var(--wp--custom--weight--medium);
	font-size: var(--wp--preset--font-size--label);
	line-height: var(--foreto-space-3);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fi-blekit-300);
}

.fi-stopka__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.fi-stopka__lista a,
.fi-stopka__adres,
.fi-stopka__osoba {
	font-size: 15px;
	line-height: var(--foreto-space-4);
	color: rgb(255 255 255 / 0.7);
	text-decoration: none;
	font-style: normal;
}
.fi-stopka__lista a:hover { color: var(--fi-biel); }
.fi-stopka__osoba { margin: var(--foreto-space-2) 0 0; }
.fi-stopka__osoba strong { color: var(--fi-biel); font-weight: var(--wp--custom--weight--medium); }
.fi-stopka__osoba a { color: inherit; text-decoration: none; }

.fi-stopka__pasek {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--foreto-space-4);
	padding-top: var(--foreto-space-4);
	border-top: var(--fi-linia-ciemna);
	font-size: 13px;
	color: rgb(255 255 255 / 0.45);
}
.fi-stopka__pasek p { margin: 0; }
.fi-stopka__prawne { margin: 0; padding: 0; list-style: none; display: flex; gap: var(--foreto-space-4); flex-wrap: wrap; }
.fi-stopka__prawne a { color: inherit; text-decoration: none; }
.fi-stopka__prawne a:hover { color: var(--fi-biel); text-decoration: underline; }

@media (max-width: 1181px) {
	.fi-stopka__siatka { grid-template-columns: 1fr 1fr; }
	.fi-stopka__marka { grid-column: span 2; }
}

@media (max-width: 760px) {
	.fi-stopka { padding: var(--foreto-space-8) var(--foreto-space-4) var(--foreto-space-4); }
	.fi-stopka__siatka { gap: var(--foreto-space-5) var(--foreto-space-4); padding: 0 0 var(--foreto-space-5); }
	.fi-stopka__pasek { flex-direction: column; align-items: flex-start; gap: var(--foreto-space-3); }
}

/* ===========================================================================
   HERO strony głównej.
   =========================================================================== */

.fi-hero {
	position: relative;
	overflow: hidden;
	background: var(--fi-glebia);
	color: var(--wp--custom--text--on-dark);
	/* Odstęp górny to wysokość paska (80) + jego odstęp (24) + powietrze.
	   Pasek stoi nad hero bezwzględnie, więc miejsce na niego musi dać hero. */
	padding: 200px var(--foreto-wrap-gutter) 0;
}

.fi-hero__poswiata {
	width: 720px;
	height: 720px;
	right: -160px;
	top: -260px;
	background: rgb(0 166 237 / 0.35);
}

/* Konstelacja cząsteczek jak na starej stronie — rysuje ją konstelacja.js.
   Dwa płótna: w hero (biel, pod treścią, nad poświatą) i pod całą stroną
   (błękit; position: fixed z ujemnym z-index jak dryf Foreto — przodek
   z isolation: isolate trzyma je NAD tłem <body>, a POD treścią; sekcje
   z własnym tłem zasłaniają je sobą). Bez skryptu po prostu ich nie ma. */
.foreto-root:has(.fi-tlo-konstelacja) { isolation: isolate; }

.fi-tlo-konstelacja {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.fi-hero__konstelacja {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.fi-hero__wnetrze {
	position: relative;
	max-width: var(--foreto-wrap-max);
	margin-inline: auto;
}

/* Siatka hero: hasło po lewej, pływające karty realizacji po prawej
   (plansza StronaGlowna.dc.html). */
.fi-hero__siatka {
	/* JEDEN PODZIAŁ dwóch kolumn w całym serwisie: 1:1. Hero, głowy stron,
	   pary tekst+panel, referencje, kontakt, pas Grupy — wszystko po równo. */
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--foreto-space-6);
	align-items: center;
	padding-bottom: var(--foreto-space-10);
}

.fi-hero__tresc {
	display: flex;
	flex-direction: column;
	gap: var(--foreto-space-5);
	max-width: 760px;
}

/* Pływające karty: dwie realizacje przekrzywione o 3–4°. Pozycje bezwzględne w polu 500 px — jak na
   planszy. Ruch to lekkie unoszenie, wyłączone przy ograniczonym ruchu. */
.fi-hero__karty {
	position: relative;
	height: 500px;
}

.fi-hero__karta {
	position: absolute;
	display: block;
	border-radius: 20px;
	overflow: hidden;
	background: var(--fi-glebia);
	border: 1px solid rgb(255 255 255 / 0.12);
	box-shadow: 0 30px 80px rgb(0 0 0 / 0.45);
	color: var(--fi-biel);
	text-decoration: none;
	transition: transform 400ms ease, box-shadow 400ms ease;
}
.fi-hero__karta:hover,
.fi-hero__karta:focus-visible {
	box-shadow: 0 40px 90px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(111 208 255 / 0.5);
	outline: none;
}

.fi-hero__karta--1 {
	left: 40px;
	top: 0;
	width: 420px;
	transform: rotate(-3deg);
	animation: fi-hero-unos 7s ease-in-out infinite;
}
.fi-hero__karta--2 {
	left: 220px;
	top: 260px;
	width: 340px;
	transform: rotate(4deg);
	animation: fi-hero-unos-2 9s ease-in-out infinite;
}
.fi-hero__karta--1:hover, .fi-hero__karta--1:focus-visible { transform: rotate(-3deg) translateY(-6px); animation-play-state: paused; }
.fi-hero__karta--2:hover, .fi-hero__karta--2:focus-visible { transform: rotate(4deg) translateY(-6px); animation-play-state: paused; }

.fi-hero__karta-obraz {
	display: block;
	width: 100%;
	height: 236px;
	object-fit: cover;
	object-position: top;
}
.fi-hero__karta--2 .fi-hero__karta-obraz { height: 190px; }

.fi-hero__karta-dol {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	background: rgb(7 15 43 / 0.85);
}
.fi-hero__karta--2 .fi-hero__karta-dol { padding: 12px 16px; }

.fi-hero__karta-dol .fi-kolo { width: 44px; height: 44px; flex: 0 0 auto; }
.fi-hero__karta-opis { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fi-hero__karta-tytul {
	font-family: var(--fi-display);
	font-weight: var(--wp--custom--weight--semibold);
	font-size: 16px;
	line-height: 20px;
	color: var(--fi-biel);
}
.fi-hero__karta-meta {
	font-size: 12px;
	line-height: 16px;
	color: rgb(255 255 255 / 0.6);
}


@keyframes fi-hero-unos { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-10px); } }
@keyframes fi-hero-unos-2 { 0%, 100% { transform: rotate(4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-12px); } }

@media (prefers-reduced-motion: reduce) {
	.fi-hero__karta { animation: none; }
}

.fi-hero__tytul {
	margin: 0;
	font-family: var(--fi-display);
	font-weight: var(--wp--custom--weight--bold);
	font-size: 88px;
	line-height: 88px;
	letter-spacing: -0.03em;
	color: var(--fi-biel);
}
.fi-hero__tytul em { font-style: normal; font-weight: var(--wp--custom--weight--thin); }
.fi-hero__tytul mark { background: none; color: var(--fi-blekit-300); }

.fi-hero__lead { max-width: 520px; }

.fi-hero__akcje { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Pasmo „Zaufali nam" — nazwy klientów tekstem, nie logotypami. Logotypy wejdą
   z biblioteki mediów, kiedy będzie treść; dziś nazwa niesie tę samą
   informację i nie wymaga dwudziestu plików. */
.fi-hero__pasmo {
	display: flex;
	align-items: center;
	gap: var(--foreto-space-8);
	padding: var(--foreto-space-5) 0;
	border-top: var(--fi-linia-ciemna);
	overflow-x: auto;
	scrollbar-width: none;
}
.fi-hero__pasmo::-webkit-scrollbar { display: none; }

.fi-hero__pasmo-etykieta {
	flex: 0 0 auto;
	font-family: var(--fi-display);
	font-size: 11px;
	font-weight: var(--wp--custom--weight--medium);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgb(255 255 255 / 0.4);
	white-space: nowrap;
}

.fi-klient {
	flex: 0 0 auto;
	font-family: var(--fi-display);
	font-weight: var(--wp--custom--weight--semibold);
	font-size: 17px;
	letter-spacing: 0.04em;
	color: rgb(255 255 255 / 0.45);
	white-space: nowrap;
}

@media (max-width: 1181px) {
	.fi-hero { padding-top: 160px; }
	.fi-hero__tytul { font-size: 64px; line-height: 66px; }
	.fi-hero__karty { height: 420px; }
	.fi-hero__karta--1 { left: 0; width: 340px; }
	.fi-hero__karta--1 .fi-hero__karta-obraz { height: 190px; }
	.fi-hero__karta--2 { left: 140px; top: 220px; width: 280px; }
	.fi-hero__karta--2 .fi-hero__karta-obraz { height: 150px; }
}

/* Poniżej 900 px hero w jednej kolumnie: zostaje jedna karta, statyczna,
   na całą szerokość (plansza MobilnaGlowna.dc.html). */
@media (max-width: 900px) {
	.fi-hero__siatka { grid-template-columns: 1fr; gap: var(--foreto-space-6); padding-bottom: var(--foreto-space-6); }
	.fi-hero__karty { height: auto; }
	.fi-hero__karta { position: static; width: 100%; transform: none; animation: none; }
	.fi-hero__karta--2 { display: none; }
	.fi-hero__karta--1 .fi-hero__karta-obraz { height: 190px; }
}

@media (max-width: 640px) {
	.fi-hero { padding: 120px var(--foreto-space-4) 0; }
	.fi-hero__tytul { font-size: 40px; line-height: 44px; }
	.fi-hero__akcje .fi-btn { width: 100%; }
	.fi-hero__pasmo { gap: var(--foreto-space-5); }
}

/* ===========================================================================
   Nagłówek strony (podstrony) — etykieta + h1 po lewej, lead po prawej.
   Plansza: czesci/naglowek-strony.html.
   =========================================================================== */

/* WZORZEC GŁOWY PODSTRONY — te same miary wszędzie (O nas, usługi, kontakt,
   portfolio, blog, realizacja, wycena, 404, szukaj): 96 px od góry, etykieta
   16 px nad h1, h1 64/68, lead 19/32 w prawej kolumnie na linii dołu h1,
   kolumny 1:1 z odstępem 64, 64 px do treści. */
.fi-naglowek-strony {
	--fi-glowa-gora: 72px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--foreto-space-8);
	/* Etykieta i tytuł ZAWSZE od góry — wyrównanie do dołu spychało lewą kolumnę
	   w dół, gdy prawa była wyższa. Lead sam schodzi do linii dołu tytułu. */
	align-items: start;
	max-width: var(--foreto-wrap-max);
	margin-inline: auto;
	/* 72 px od dołu nagłówka strony (128) = 200 px od góry, dokładnie tam, gdzie
	   etykieta w hero na stronie głównej. */
	padding: var(--fi-glowa-gora) 0 var(--foreto-space-8);
}

.fi-naglowek-strony > .fi-lead,
.fi-naglowek-strony > :not(.fi-g-glowa__tekst) { align-self: end; }

@media (max-width: 1181px) {
	.fi-naglowek-strony { grid-template-columns: 1fr; gap: var(--foreto-space-4); padding: var(--foreto-space-8) 0 var(--foreto-space-7); }
}

/* ===========================================================================
   PASMO CTA.

   Foreto maluje je pełną czerwienią, centruje i pisze WERSALIKAMI. Plansza
   FormImpress (StronaGlowna.dc.html, „PASMO CTA") daje głębię z siatką
   trójkątów, nagłówek dosunięty do lewej w parze cienki + gruby, a przycisk
   po prawej w tym samym wierszu.

   Przestawiony jest ton `accent`, a nie osobny wariant, bo TO jest domyślne
   pasmo we wszystkich szablonach — dokładanie wariantu znaczyłoby ustawianie
   go przy każdym użyciu i pierwszą zapomnianą czerwoną wstawkę.
   =========================================================================== */

.foreto-root .foreto-cta[data-tone="accent"] {
	--foreto-tone-bg: var(--fi-glebia);
	--foreto-tone-fg: var(--fi-biel);
	--foreto-text-muted: rgb(255 255 255 / 0.7);
	--foreto-border-hairline: rgb(255 255 255 / 0.24);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='48' viewBox='0 0 56 48'><path d='M0 0h55L27.5 47z' fill='none' stroke='rgba(255,255,255,0.10)' stroke-width='1'/></svg>");
	background-size: 56px 48px;
}

.foreto-cta__inner {
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--foreto-space-7);
	text-align: left;
}

.foreto-cta__copy { display: flex; flex-direction: column; gap: var(--foreto-space-4); }

.foreto-cta__title {
	font-family: var(--fi-display);
	font-size: 60px;
	line-height: 64px;
	letter-spacing: -0.02em;
	text-transform: none;
	color: var(--fi-biel);
	max-width: 720px;
}

.foreto-cta__lead { color: rgb(255 255 255 / 0.72); max-width: 52ch; }

/* Przycisk stoi w wierszu z nagłówkiem, więc odstęp górny z kitu (który go
   odsuwał od akapitu POD spodem) tylko rozjeżdżałby wyrównanie do dołu. */
.foreto-cta__action { margin-top: 0; flex-shrink: 0; }

@media (max-width: 760px) {
	.foreto-cta__inner { flex-direction: column; align-items: flex-start; }
	.foreto-cta__title { font-size: 34px; line-height: 40px; }
}

/* Kwadraty iskier z Foreto SCHODZĄ z pasma, a na ich miejsce wchodzi poświata
   z planszy. Powód jest projektowy, nie techniczny: pasmo FormImpressu ma już
   jedną teksturę (siatkę trójkątów ze znaku marki), a dwie naraz zamieniają
   tło w szum. Iskry zostają w kodzie, bo blok jest wspólny z Foreto —
   `display: none` na dekoracji ukrytej i tak przed czytnikiem nic nie kosztuje
   poza jedną regułą, a odwrócenie tej decyzji to jej skasowanie.

   Poświata jest pseudoelementem, a nie węzłem w PHP: to warstwa czysto
   malarska i nie ma po co stać w drzewie dokumentu. */
.foreto-cta[data-tone="accent"] .foreto-sparks,
.foreto-cta[data-tone="accent"] .foreto-snake { display: none; }

.foreto-cta[data-tone="accent"]::after {
	content: '';
	position: absolute;
	right: 80px;
	top: -220px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: rgb(0 166 237 / 0.4);
	filter: blur(80px);
	pointer-events: none;
	z-index: 0;
}