/* =============================================================================
   Auto Brudniewicz - landing
   =============================================================================
   Wartości odwzorowane z makiet `Brudniewicz_Home` (1920 × 10932)
   i `Brudniewicz_Mechanika`, odczytanych wizualnie z pliku Figmy.

   ⚠ SKALA JEST ŚWIADOMIE MNIEJSZA NIŻ W MAKIECIE. Makieta powstała na płótnie
   1920 px i oglądana jest w całości, przeskalowana. Strona ogląda się w skali
   1:1 w oknie 1280-1600 px, więc przeniesienie stopni pisma 1:1 czyta się jako
   grubo za duże. Proporcje i hierarchia zachowane - ta sama decyzja, co przy
   `dk-divi-child` na projekcie krawca.

   Arkusz wpina się WYŁĄCZNIE na szablonach landinga (ab_style_landinga()),
   więc nie dotyka strony głównej 371, Kontaktu 75, Cennika 362 ani Polityki 359.
   ========================================================================== */

:root {
	/* Kolory - ZMIERZONE z eksportu makiety (Brudniewicz_Mechanika.jpg, 1920 × 8917),
	   nie dobrane na oko. Każda wartość to dominanta próbki z odpowiedniego elementu. */
	--ab-granat:        #202856;  /* pas „Dlaczego", panel usług */
	--ab-granat-glebszy:#171d40;
	--ab-niebieski:     #3c5ca5;  /* baner z ilustracją */
	--ab-fiolet:        #5768c2;  /* wszystkie przyciski główne */
	--ab-fiolet-hover:  #4757ab;
	--ab-zolty:         #ffbb00;  /* „Szybki kontakt", akcent odręczny, VS. */
	--ab-tusz:          #14172e;
	--ab-tusz-slaby:    #6a6f85;
	--ab-na-ciemnym:    #ffffff;
	--ab-na-ciemnym-slaby: #aab1d4;
	--ab-tlo:           #ffffff;
	--ab-tlo-alt:       #f4f3f8;  /* jasne sekcje */
	--ab-tlo-karta:     #f5f6fb;  /* karta „W naszym warsztacie" */
	--ab-tlo-krok:      #efeff9;  /* rozwinięta karta procesu */
	--ab-obrys:         #e6e7f0;

	/* Kształt */
	--ab-r-karta: 24px;
	--ab-r-pas:   32px;
	--ab-r-pigulka: 999px;

	/* Szerokości - proporcje z makiety (płótno 1920: pasy 1795, treść 1626),
	   przeskalowane w dół, bo stronę ogląda się 1:1, a makietę w pomniejszeniu. */
	--ab-kontener: 1600px;   /* szerokość treści z makiety, 1:1 */
	--ab-kontener-szeroki: 1872px;  /* ramka hero z makiety */
	--ab-kontener-waski: 940px;

	/* Rytm */
	--ab-sekcja-y: clamp(3.5rem, 7vw, 7rem);
}

/* -------------------------------------------------------------------------
   PODSTAWY - zawężone do .ab-landing, żeby nie przemalować reszty witryny
   ---------------------------------------------------------------------- */

body.ab-landing {
	margin: 0;
	background: var(--ab-tlo);
	color: var(--ab-tusz);
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

/* ⚠ `margin-block`, NIE `margin`. Skrót zeruje też marginesy boczne, a te
   reguły mają specyficzność (0,1,1) - biją `margin-inline: auto` postawione
   na klasie komponentu (0,1,0). Skutek był taki, że wyśrodkowane nagłówki
   i akapity wstępne siadały o ~240 px w lewo od środka kolumny, wyglądając
   na błąd układu, a nie na pomyłkę w kaskadzie. */
.ab-landing h1,
.ab-landing h2,
.ab-landing h3 { margin-block: 0; line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; }
.ab-landing p  { margin-block: 0; }
.ab-landing ul, .ab-landing ol { margin: 0; padding: 0; list-style: none; }
.ab-landing img { max-width: 100%; height: auto; display: block; }
.ab-landing a { color: inherit; }

.ab-landing :focus-visible {
	outline: 3px solid var(--ab-fiolet);
	outline-offset: 3px;
	border-radius: 6px;
}

.ab-kontener {
	width: min(100% - 2.5rem, var(--ab-kontener));
	margin-inline: auto;
}
.ab-kontener--waski { max-width: var(--ab-kontener-waski); }
.ab-kontener--szeroki { width: min(100% - 2.5rem, var(--ab-kontener-szeroki)); }

.ab-sekcja { padding-block: var(--ab-sekcja-y); }
.ab-sekcja--hero { padding-top: 0; padding-bottom: clamp(2rem, 4vw, 4rem); }
.ab-sekcja--kafle,
.ab-sekcja--faq { background: var(--ab-tlo-alt); }

.ab-ikona { width: 1.25em; height: 1.25em; flex: none; }

/* -------------------------------------------------------------------------
   BELKA
   ---------------------------------------------------------------------- */

/* W makiecie belka LEŻY NA ZDJĘCIU hero, nie nad nim - biała pigułka wpuszczona
   w górną krawędź kadru. Stąd pozycjonowanie względem hero, a nie `sticky`. */
.ab-belka {
	position: absolute;
	inset: clamp(0.75rem, 1.6vw, 1.5rem) clamp(0.75rem, 1.6vw, 1.5rem) auto;
	z-index: 5;
	padding: 0;
	background: none;
}

.ab-belka__wnetrze {
	width: 100%;
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding: 0.75rem 1.5rem;
	background: #fff;
	border: 1px solid var(--ab-obrys);
	border-radius: var(--ab-r-pigulka);
	box-shadow: 0 8px 24px rgb(18 20 43 / 6%);
}

.ab-logo { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; }

/* Znak: trzy pierścienie - uproszczony odpowiednik znaku z makiety.
   ⚠ Docelowo do podmiany na oryginalny plik logo od Kozłowskiego. */
.ab-logo__znak { display: inline-flex; gap: 2px; }
.ab-logo__znak span {
	width: 15px; height: 15px;
	border: 2.5px solid var(--ab-tusz);
	border-radius: 50%;
}
.ab-logo__znak span:nth-child(2) { border-radius: 50% 50% 45% 45%; }

.ab-logo__tekst { display: grid; line-height: 1.1; }
.ab-logo__tekst strong { font-size: 0.8125rem; letter-spacing: 0.08em; }
.ab-logo__tekst span   { font-size: 0.625rem; color: var(--ab-tusz-slaby); letter-spacing: 0.04em; }

.ab-nawigacja ul { display: flex; gap: clamp(0.75rem, 2vw, 2rem); }
.ab-nawigacja a {
	text-decoration: none;
	font-size: 0.9375rem;
	color: var(--ab-tusz);
	padding-block: 0.25rem;
	border-bottom: 2px solid transparent;
}
.ab-nawigacja a:hover { border-bottom-color: var(--ab-fiolet); }

/* -------------------------------------------------------------------------
   HERO
   ---------------------------------------------------------------------- */

.ab-hero {
	position: relative;
	padding: clamp(7rem, 13vw, 12rem) clamp(1.5rem, 4vw, 4rem) clamp(5rem, 9vw, 8rem);
	border-radius: var(--ab-r-pas);
	color: var(--ab-na-ciemnym);
	text-align: center;
	overflow: hidden;
	background: var(--ab-granat-glebszy);
}

/* Zdjęcie w tle plus przyciemnienie - inaczej biały nagłówek ginie na jasnych
   partiach kadru. Gradient jest mocniejszy u góry i u dołu, gdzie leżą belka
   i pasek liczb. */
.ab-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: linear-gradient(180deg, rgb(12 16 40 / 78%) 0%, rgb(12 16 40 / 45%) 38%, rgb(12 16 40 / 82%) 100%), var(--ab-hero-foto, none);
	background-size: cover;
	background-position: center;
	pointer-events: none;
}

.ab-hero > * { position: relative; z-index: 1; }

.ab-hero__nadtytul {
	font-size: 0.9375rem;
	color: var(--ab-na-ciemnym-slaby);
	margin-bottom: 0.75rem;
}

.ab-hero__tytul {
	font-size: clamp(2.25rem, 5vw, 4rem);
	max-width: 18ch;
	margin-inline: auto;
}

.ab-hero__podtytul {
	margin-top: 1rem;
	color: var(--ab-na-ciemnym-slaby);
	font-size: clamp(1rem, 1.4vw, 1.1875rem);
}

/* Pozycja paska liczb to TRZY wiersze: mały nadpis, duża wartość, mały podpis.
   Tak jest w makiecie i to właśnie tych nadpisów dotyczy poprawka nr 1
   („Ponad", „Blisko", „Zastępcza", „Profesjonalnych" - cztery różne konstrukcje). */
.ab-liczby {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 1.5rem 1rem;
	margin-top: clamp(2.5rem, 6vw, 4.5rem);
}

.ab-liczby__poz { display: grid; gap: 0.15rem; }

.ab-liczby__nadpis {
	font-size: 0.75rem;
	color: var(--ab-na-ciemnym-slaby);
	line-height: 1.2;
}

.ab-liczby__wartosc {
	font-size: clamp(1.5rem, 2.4vw, 2.125rem);
	font-weight: 600;
	letter-spacing: -0.02em;
}

.ab-liczby__podpis {
	font-size: 0.75rem;
	color: var(--ab-na-ciemnym-slaby);
	line-height: 1.3;
}

/* Karta zachodząca na dół hero */
.ab-karta-wstepna {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem 2.5rem;
	width: min(100%, 62rem);
	margin: -3rem auto 0;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: #fff;
	border: 1px solid var(--ab-obrys);
	border-radius: var(--ab-r-karta);
	box-shadow: 0 20px 50px rgb(18 20 43 / 10%);
	position: relative;
	z-index: 2;
}

.ab-karta-wstepna__tekst { flex: 1 1 26rem; display: grid; gap: 0.75rem; }
.ab-lead { font-weight: 600; font-size: 1.0625rem; }
.ab-karta-wstepna p:not(.ab-lead) { color: var(--ab-tusz-slaby); font-size: 0.9375rem; }

.ab-plakietki { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ab-plakietki li,
.ab-plakietka-solo {
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.35rem 0.75rem;
	border: 1px solid var(--ab-obrys);
	border-radius: var(--ab-r-pigulka);
	color: var(--ab-tusz-slaby);
}
.ab-plakietka-solo { display: inline-block; }

/* -------------------------------------------------------------------------
   PRZYCISKI
   ---------------------------------------------------------------------- */

.ab-przycisk {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.8rem 1.4rem;
	border-radius: var(--ab-r-pigulka);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.ab-przycisk--glowny { background: var(--ab-fiolet); color: #fff; }
.ab-przycisk--glowny:hover { background: var(--ab-fiolet-hover); }
.ab-przycisk--glowny[disabled] { opacity: 0.55; cursor: not-allowed; }

.ab-przycisk--obrys { border-color: var(--ab-fiolet); color: var(--ab-fiolet); background: transparent; }
.ab-przycisk--obrys:hover { background: var(--ab-fiolet); color: #fff; }

.ab-przycisk--maly { padding: 0.55rem 1rem; font-size: 0.875rem; }

/* Pływający „Szybki kontakt" - żółty, jak w makiecie.
   z-index niżej niż belka (50), żeby nie zasłaniał nawigacji. */
.ab-fab {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 45;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.1rem;
	background: var(--ab-zolty);
	color: var(--ab-tusz);
	border-radius: var(--ab-r-pigulka);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.15;
	text-decoration: none;
	box-shadow: 0 10px 28px rgb(18 20 43 / 22%);
}
.ab-fab:hover { background: #ffd35e; }

/* -------------------------------------------------------------------------
   NAGŁÓWKI SEKCJI
   ---------------------------------------------------------------------- */

.ab-naglowek { text-align: center; display: grid; gap: 0.75rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }

.ab-nadpis {
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ab-tusz-slaby);
	font-weight: 600;
}

.ab-naglowek__tytul { font-size: clamp(1.75rem, 3.2vw, 2.625rem); }

.ab-naglowek__wstep {
	max-width: 60ch;
	margin-inline: auto;
	color: var(--ab-tusz-slaby);
	font-size: 0.9375rem;
}

.ab-naglowek--jasny .ab-nadpis { color: #b9c0e4; }
.ab-naglowek--jasny .ab-naglowek__tytul { color: var(--ab-na-ciemnym); }
.ab-naglowek--jasny .ab-naglowek__wstep { color: var(--ab-na-ciemnym-slaby); }

/* -------------------------------------------------------------------------
   ZAKŁADKI USŁUG
   ---------------------------------------------------------------------- */

.ab-zakladki__paski {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(0.5rem, 2vw, 2.5rem);
	border-bottom: 1px solid var(--ab-obrys);
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.ab-zakladki__pasek {
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	padding: 0.75rem 0.25rem;
	font: inherit;
	font-size: 0.9375rem;
	color: var(--ab-tusz-slaby);
	cursor: pointer;
}
.ab-zakladki__pasek.is-aktywny { color: var(--ab-fiolet); border-bottom-color: var(--ab-fiolet); font-weight: 600; }

.ab-panel {
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--ab-granat);
	color: var(--ab-na-ciemnym);
	border-radius: var(--ab-r-karta);
}
.ab-panel[hidden] { display: none; }

.ab-panel .ab-plakietka-solo { border-color: rgb(255 255 255 / 25%); color: #cdd3ee; }
.ab-panel__tytul { margin: 1rem 0 0.75rem; font-size: clamp(1.25rem, 2vw, 1.625rem); }
.ab-panel__opis { color: var(--ab-na-ciemnym-slaby); font-size: 0.9375rem; max-width: 70ch; }

.ab-chipy {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 0.5rem;
	margin: 1.5rem 0;
}

.ab-chipy li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.6rem 0.85rem;
	background: rgb(255 255 255 / 7%);
	border: 1px solid rgb(255 255 255 / 12%);
	border-radius: 12px;
	font-size: 0.8125rem;
	line-height: 1.35;
}
.ab-chipy .ab-ikona { margin-top: 0.1em; color: var(--ab-zolty); }

.ab-panel__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.ab-panel .ab-przycisk--obrys { border-color: rgb(255 255 255 / 45%); color: #fff; }
.ab-panel .ab-przycisk--obrys:hover { background: #fff; color: var(--ab-granat); }

/* -------------------------------------------------------------------------
   KAFLE POZOSTAŁYCH USŁUG
   ---------------------------------------------------------------------- */

.ab-kafle { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }

.ab-kafel {
	display: grid;
	align-content: start;
	gap: 0.75rem;
	padding: 1.5rem 1.25rem;
	background: #fff;
	border: 1px solid var(--ab-obrys);
	border-radius: var(--ab-r-karta);
}

.ab-kafel__tytul { font-size: 1rem; }
.ab-kafel__opis { font-size: 0.8125rem; color: var(--ab-tusz-slaby); }
.ab-kafel .ab-przycisk { justify-self: start; }

/* -------------------------------------------------------------------------
   CIEMNY PAS I PORÓWNANIE
   ---------------------------------------------------------------------- */

.ab-sekcja--ciemna { padding-block: clamp(1rem, 2vw, 2rem); }

.ab-pas {
	position: relative;
	padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem);
	background: var(--ab-granat);
	border-radius: var(--ab-r-pas);
	color: var(--ab-na-ciemnym);
}

.ab-porownanie {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 0 clamp(1rem, 3vw, 3rem);
	align-items: start;
}

.ab-porownanie__naglowek { font-size: clamp(1.1rem, 1.8vw, 1.5rem); font-weight: 600; padding-bottom: 1.5rem; }
.ab-porownanie__naglowek--oni { color: #9aa2cd; grid-column: 1; }
.ab-porownanie__naglowek--my  { color: var(--ab-na-ciemnym); grid-column: 3; }

.ab-porownanie__wiersz {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	padding-block: clamp(1.25rem, 2.5vw, 2rem);
	border-top: 1px solid rgb(255 255 255 / 12%);
}
.ab-porownanie__wiersz:first-of-type { border-top: 0; }

.ab-porownanie__strona { display: flex; gap: 0.85rem; }
.ab-porownanie__strona h3 { font-size: 1.0625rem; margin-bottom: 0.35rem; }
.ab-porownanie__strona p  { font-size: 0.875rem; line-height: 1.45; }

.ab-porownanie__strona--oni { grid-column: 1; }
.ab-porownanie__strona--oni h3 { color: #b7bee0; font-weight: 500; }
.ab-porownanie__strona--oni p  { color: #8790b8; }

.ab-porownanie__strona--my { grid-column: 3; }
.ab-porownanie__strona--my p { color: var(--ab-na-ciemnym-slaby); }

.ab-porownanie__vs {
	grid-column: 2;
	align-self: center;
	color: var(--ab-zolty);
	font-weight: 700;
	font-size: clamp(0.875rem, 1.4vw, 1.125rem);
	letter-spacing: 0.02em;
}

.ab-znacznik {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.85rem;
	height: 1.85rem;
	flex: none;
	border: 1.5px solid currentColor;
	border-radius: 50%;
}
.ab-znacznik--nie { color: #7d86b4; }
.ab-znacznik--tak { color: var(--ab-na-ciemnym); }

/* Powody na Mechanice */
.ab-powody { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem; }
.ab-powod { display: grid; gap: 0.6rem; align-content: start; }
.ab-powod h3 { font-size: 1.0625rem; }
.ab-powod p { font-size: 0.875rem; color: var(--ab-na-ciemnym-slaby); }

/* Odręczny akcent „Wszystko w jednym miejscu" z makiety */
.ab-odreczne {
	display: flex;
	justify-content: center;
	margin-top: clamp(2rem, 4vw, 3.5rem);
}

/* Napis jest częścią grafiki (patrz ab_odreczny_akcent) - nic tu nie nadpisujemy
   tekstem, bo powstałyby dwa napisy naraz. */
.ab-odreczne__grafika {
	width: clamp(15rem, 34vw, 26rem);
	height: auto;
}

/* --- Karty kontaktowe pod formularzem ----------------------------------- */

.ab-karty-kontaktu--dwie { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 1rem; }

/* --- Formularz: przycisk wyśrodkowany, jak w makiecie -------------------- */

.ab-formularz__stopka { justify-content: center; text-align: center; }

@media (max-width: 1100px) {
	.ab-chipy--kolumny { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
	.ab-warsztat { grid-template-columns: 1fr; }
	.ab-chipy--kolumny { grid-template-columns: 1fr; }
	.ab-baner__www { margin-left: 0; align-items: flex-start; }
	.ab-karta-telefon { margin-top: -2rem; }
}

/* =============================================================================
   LOGO I WIDEO W HERO
   ========================================================================== */

/* Znak firmowy to teraz oryginalny SVG z biblioteki klienta, nie atrapa z kółek. */
.ab-logo__obraz { display: block; width: auto; height: clamp(1.9rem, 2.6vw, 2.4rem); }

/* Wersja jasna na niebieskim banerze. `brightness(0) invert(1)` daje czystą biel
   niezależnie od kolorów w pliku - jeden plik obsługuje oba tła. */
.ab-logo__obraz--jasny { filter: brightness(0) invert(1); }

.ab-logo__zapas { font-weight: 600; letter-spacing: 0.04em; }

/* --- Wideo w tle hero ---------------------------------------------------- */

.ab-hero__wideo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	pointer-events: none;
}

/* Przyciemnienie musi leżeć NAD wideo, inaczej biały nagłówek ginie na jasnych
   klatkach. Zdjęcie z `--ab-hero-foto` zostaje jako tło pod spodem - widać je,
   zanim wideo ruszy, i wtedy, gdy przeglądarka odmówi autoodtwarzania. */
.ab-hero::before { z-index: 1; }
.ab-hero > * { position: relative; z-index: 2; }

/* Odstęp od góry musi zmieścić belkę - nadtytuł wchodził pod nią. */
.ab-landing .ab-hero {
	padding-top: clamp(9rem, 15vw, 14rem);
}

.ab-landing .ab-belka { position: absolute; }

@media (prefers-reduced-motion: reduce) {
	.ab-hero__wideo { display: none; }
}

/* =============================================================================
   ODTWORZONE PO WŁASNEJ POMYŁCE (2026-08-24)
   =============================================================================
   Edycja arkusza „od indeksu do indeksu" wycięła ~375 wierszy: selektor domykający
   zakres wystąpił DRUGI raz, dużo dalej w pliku, więc podmiana połknęła wszystko
   pomiędzy. Objaw był mylący - strona nadal się renderowała, tylko nagłówki wróciły
   do oliwkowego koloru Elementora, a formularz i stopka straciły style.

   Wniosek: przy edycji CSS-u szukać selektorów PEŁNĄ regułą albo edytować po
   nazwanych blokach, nigdy po pierwszym trafieniu `index()`.
   ========================================================================== */

/* --- Karta z telefonem i karta warsztatu (Mechanika) --------------------- */

.ab-karta-telefon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2.5rem;
	width: min(100%, 46rem);
	margin: clamp(-4.5rem, -5vw, -3rem) auto 0;
	padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.25rem, 2.5vw, 2rem);
	position: relative;
	z-index: 3;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 18px 44px rgb(20 23 46 / 14%);
}
.ab-landing .ab-karta-telefon .ab-lead { font-size: 0.9375rem; line-height: 1.45; color: var(--ab-tusz); }

.ab-warsztat {
	display: grid;
	grid-template-columns: minmax(240px, 0.72fr) 1.28fr;
	gap: clamp(1.5rem, 3vw, 3.5rem);
	padding: clamp(1.5rem, 3vw, 2.75rem);
	background: var(--ab-tlo-karta);
	border-radius: var(--ab-r-karta);
}
.ab-warsztat__tekst { display: grid; gap: 1rem; align-content: start; }
.ab-warsztat__tekst h3 { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.35; }
.ab-warsztat__tekst p  { font-size: 0.875rem; color: var(--ab-tusz-slaby); }
.ab-warsztat__tekst .ab-przycisk { justify-self: start; margin-top: auto; }

.ab-chipy--kolumny { margin: 0; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; align-content: start; }
.ab-chipy--kolumny li {
	background: #fff;
	border-color: transparent;
	color: var(--ab-tusz);
	box-shadow: 0 1px 3px rgb(20 23 46 / 6%);
	font-size: 0.75rem;
}
.ab-chipy--kolumny .ab-ikona { color: var(--ab-fiolet); }

/* --- Niebieski baner ----------------------------------------------------- */

.ab-baner {
	position: relative;
	display: grid;
	align-content: end;
	min-height: clamp(15rem, 26vw, 22rem);
	padding: clamp(1.25rem, 3vw, 2.25rem);
	background: var(--ab-niebieski);
	border-radius: var(--ab-r-karta);
	color: #fff;
	overflow: hidden;
}
.ab-baner__auto {
	position: absolute;
	right: clamp(1rem, 4vw, 4rem);
	bottom: clamp(4.5rem, 9vw, 7rem);
	width: clamp(11rem, 24vw, 19rem);
	color: rgb(255 255 255 / 92%);
}
.ab-baner__stopka {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem clamp(1rem, 3vw, 3rem);
	padding-top: 1rem;
	border-top: 2px solid rgb(255 255 255 / 85%);
	font-size: 0.875rem;
	font-weight: 500;
}
.ab-baner__www { margin-left: auto; display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.ab-baner__social { font-size: 0.75rem; opacity: 0.85; }

/* --- Bez ukrytych kosztów ------------------------------------------------ */

.ab-koszty {
	text-align: center;
	display: grid;
	gap: 0.75rem;
	padding: clamp(1.75rem, 3vw, 2.5rem);
	border: 1px solid var(--ab-obrys);
	border-radius: var(--ab-r-karta);
	background: var(--ab-tlo-alt);
}
.ab-koszty h2 { font-size: clamp(1.375rem, 2.4vw, 1.875rem); }
.ab-koszty p  { color: var(--ab-tusz-slaby); max-width: 55ch; margin-inline: auto; }

/* --- Opinie -------------------------------------------------------------- */

.ab-ocena {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem 1.5rem;
	width: fit-content;
	margin: 0 auto clamp(2rem, 4vw, 3rem);
	padding: 1rem 1.5rem;
	background: #fff;
	border: 1px solid var(--ab-obrys);
	border-radius: var(--ab-r-karta);
	box-shadow: 0 12px 30px rgb(20 23 46 / 7%);
}
.ab-ocena__wartosc { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 600; color: var(--ab-fiolet); letter-spacing: -0.02em; }
.ab-ocena__wartosc span { font-size: 0.45em; color: var(--ab-tusz-slaby); }
.ab-ocena__gwiazdki { display: inline-flex; gap: 2px; color: var(--ab-zolty); }
.ab-ocena__liczba { font-size: 0.875rem; color: var(--ab-tusz-slaby); }

.ab-opinie { columns: 3 260px; column-gap: 1rem; }
.ab-opinia {
	break-inside: avoid;
	margin: 0 0 1rem;
	padding: 1.25rem;
	background: #fff;
	border: 1px solid var(--ab-obrys);
	border-radius: var(--ab-r-karta);
}
.ab-opinia blockquote { margin: 0 0 0.85rem; font-size: 0.875rem; line-height: 1.5; }
.ab-opinia figcaption { display: grid; font-size: 0.8125rem; }
.ab-opinia figcaption strong { font-weight: 600; }
.ab-opinia figcaption span { color: var(--ab-tusz-slaby); font-size: 0.75rem; }

/* --- FAQ ----------------------------------------------------------------- */

.ab-faq { display: grid; gap: 0.75rem; }
.ab-faq__poz { background: #fff; border: 1px solid var(--ab-obrys); border-radius: 16px; padding: 0 1.25rem; }
.ab-faq__poz summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 0;
	cursor: pointer;
	font-weight: 600;
	font-size: 0.9375rem;
	list-style: none;
}
.ab-faq__poz summary::-webkit-details-marker { display: none; }
.ab-faq__poz summary::after {
	content: '';
	width: 0.6rem; height: 0.6rem; flex: none;
	border-right: 2px solid var(--ab-tusz-slaby);
	border-bottom: 2px solid var(--ab-tusz-slaby);
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.2s;
}
.ab-faq__poz[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.ab-faq__tresc { padding-bottom: 1.1rem; font-size: 0.875rem; color: var(--ab-tusz-slaby); }

/* Widoczny brak - lepiej pokazać dziurę niż wymyślić treść za klienta */
.ab-brak,
.ab-brak-inline {
	background: #fff6d8;
	border: 1px dashed #d7a72b;
	border-radius: 10px;
	padding: 0.5rem 0.75rem;
	font-size: 0.8125rem;
	color: #7a5a05;
	display: block;
}
.ab-brak-inline { display: inline; padding: 0.1rem 0.35rem; }

/* --- Kontakt ------------------------------------------------------------- */

.ab-karty-kontaktu { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.ab-karta-kontaktu {
	display: grid;
	gap: 0.75rem;
	align-content: start;
	padding: 1.5rem;
	background: #fff;
	border: 1px solid var(--ab-obrys);
	border-radius: var(--ab-r-karta);
}
.ab-karta-kontaktu h3 { font-size: 1.0625rem; }
.ab-karta-kontaktu p  { font-size: 0.875rem; color: var(--ab-tusz-slaby); }
.ab-karta-kontaktu .ab-przycisk { justify-self: start; }
.ab-karty-kontaktu--dwie { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 1rem; }
.ab-kontakt__telefon { margin-top: 2rem; text-align: center; font-size: 0.9375rem; color: var(--ab-tusz-slaby); }

/* --- Formularz ----------------------------------------------------------- */

.ab-formularz {
	display: grid;
	gap: 1.25rem;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: #fff;
	border: 1px solid var(--ab-obrys);
	border-radius: var(--ab-r-karta);
}
.ab-formularz__rzad { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.ab-formularz__rzad--auto { grid-template-columns: minmax(220px, 0.8fr) 1.2fr; align-items: start; }
.ab-formularz__grupa { border: 0; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.ab-formularz__grupa legend { padding: 0; font-weight: 600; font-size: 0.9375rem; }
.ab-formularz__kolumna { display: grid; gap: 0.75rem; align-content: start; }

.ab-pole { display: grid; gap: 0.35rem; }
.ab-pole__etykieta { font-size: 0.75rem; color: var(--ab-tusz-slaby); font-weight: 500; }
.ab-pole__etykieta span { color: var(--ab-fiolet); }
.ab-pole input,
.ab-pole select,
.ab-pole textarea {
	width: 100%;
	padding: 0.7rem 0.85rem;
	font: inherit;
	font-size: 0.9375rem;
	color: var(--ab-tusz);
	background: #fff;
	border: 1px solid var(--ab-obrys);
	border-radius: 12px;
}
.ab-pole textarea { resize: vertical; min-height: 9rem; }
.ab-pole--opis { height: 100%; }

.ab-zgoda { display: flex; gap: 0.6rem; font-size: 0.75rem; color: var(--ab-tusz-slaby); line-height: 1.5; }
.ab-zgoda input { margin-top: 0.2rem; flex: none; }
.ab-formularz__stopka { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; text-align: center; }
.ab-formularz__mikro { font-size: 0.75rem; color: var(--ab-tusz-slaby); }

/* --- Stopka -------------------------------------------------------------- */

.ab-stopka { padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem; background: var(--ab-tlo-alt); }
.ab-stopka__gora { display: flex; justify-content: center; margin-bottom: 2rem; }
.ab-stopka__kontakt {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 2rem;
	padding: 1rem 1.5rem;
	background: #fff;
	border: 1px solid var(--ab-obrys);
	border-radius: var(--ab-r-pigulka);
}
.ab-stopka__kontakt li { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.ab-stopka__kontakt a { text-decoration: none; }
.ab-stopka__kontakt a:hover { text-decoration: underline; }
.ab-stopka__kontakt .ab-ikona { color: var(--ab-fiolet); }
.ab-stopka__godziny { margin-top: 1rem; text-align: center; font-size: 0.875rem; color: var(--ab-tusz-slaby); }
.ab-stopka__linki { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; margin-top: 1.5rem; }
.ab-stopka__linki a { font-size: 0.8125rem; text-decoration: none; }
.ab-stopka__dol {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--ab-obrys);
	font-size: 0.75rem;
	color: var(--ab-tusz-slaby);
}

/* =============================================================================
   ODZYSKANIE KASKADY OD ELEMENTORA
   =============================================================================
   `.elementor-kit-342 h1 { color: … }` ma specyficzność (0,1,1) i bije kolor
   DZIEDZICZONY z sekcji - dziedziczenie przegrywa z każdą regułą wskazującą
   element wprost. Tytuł hero renderował się przez to jako `rgb(22, 30, 0)`,
   czyli ciemna oliwka na granacie. Kit stylizuje też `button`, przez co zakładki
   wychodziły jako fioletowe pigułki zamiast podkreśleń.

   Lekarstwo: własna klasa PLUS `.ab-landing`, czyli (0,2,0).
   ========================================================================== */

.ab-landing .ab-hero__tytul,
.ab-landing .ab-naglowek--jasny .ab-naglowek__tytul,
.ab-landing .ab-panel__tytul,
.ab-landing .ab-powod h3,
.ab-landing .ab-porownanie__strona--my h3 { color: var(--ab-na-ciemnym); }

.ab-landing .ab-hero__nadtytul,
.ab-landing .ab-hero__podtytul,
.ab-landing .ab-liczby__nadpis,
.ab-landing .ab-liczby__podpis { color: var(--ab-na-ciemnym-slaby); }

.ab-landing .ab-liczby__wartosc { color: var(--ab-na-ciemnym); }

.ab-landing .ab-naglowek__tytul,
.ab-landing .ab-kafel__tytul,
.ab-landing .ab-karta-kontaktu h3,
.ab-landing .ab-warsztat__tekst h3,
.ab-landing .ab-koszty h2,
.ab-landing .ab-opinia blockquote,
.ab-landing .ab-faq__poz summary { color: var(--ab-tusz); }

.ab-landing .ab-porownanie__strona--oni h3 { color: #b7bee0; }
.ab-landing .ab-porownanie__naglowek--oni { color: #9aa2cd; }
.ab-landing .ab-porownanie__naglowek--my  { color: var(--ab-na-ciemnym); }
.ab-landing .ab-baner__stopka { color: #fff; }

/* Kit narzuca też krój nagłówkom - przywracamy własny. */
.ab-landing h1,
.ab-landing h2,
.ab-landing h3,
.ab-landing .ab-przycisk,
.ab-landing input,
.ab-landing select,
.ab-landing textarea { font-family: inherit; }

/* Odnośniki: kit ustawia `a { color }` na (0,1,1) - podbijamy do (0,2,0). */
.ab-landing .ab-nawigacja a,
.ab-landing .ab-stopka__kontakt a,
.ab-landing .ab-logo { color: var(--ab-tusz); }
.ab-landing .ab-stopka__linki a { color: var(--ab-tusz-slaby); }
.ab-landing .ab-przycisk--glowny { color: #fff; }
.ab-landing .ab-przycisk--obrys { color: var(--ab-fiolet); }
.ab-landing .ab-przycisk--obrys:hover { color: #fff; }
.ab-landing .ab-panel .ab-przycisk--obrys { color: #fff; }
.ab-landing .ab-fab { color: var(--ab-tusz); }
.ab-landing .ab-link-tel { color: var(--ab-fiolet); }

/* Zakładki i przycisk wysyłki to `<button>` - kit maluje im tło i promień. */
.ab-landing .ab-zakladki__pasek {
	background: none;
	background-color: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	padding: 0.75rem 0.25rem;
	color: var(--ab-tusz-slaby);
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
}
.ab-landing .ab-zakladki__pasek.is-aktywny { color: var(--ab-fiolet); border-bottom-color: var(--ab-fiolet); background: none; }
.ab-landing .ab-zakladki__pasek:hover { color: var(--ab-tusz); }

.ab-landing button.ab-przycisk--glowny {
	background-color: var(--ab-fiolet);
	border-radius: var(--ab-r-pigulka);
	padding: 0.8rem 1.4rem;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
}
.ab-landing button.ab-przycisk--glowny:hover:not([disabled]) { background-color: var(--ab-fiolet-hover); }

/* --- Wąskie ekrany ------------------------------------------------------- */

@media (max-width: 1100px) {
	.ab-chipy--kolumny { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
	.ab-warsztat,
	.ab-formularz__rzad--auto { grid-template-columns: 1fr; }

	.ab-porownanie { grid-template-columns: 1fr; }
	.ab-porownanie__naglowek { padding-bottom: 0.5rem; }
	.ab-porownanie__naglowek--oni,
	.ab-porownanie__naglowek--my { grid-column: 1; }
	.ab-porownanie__naglowek--my { display: none; }
	.ab-porownanie__wiersz { grid-template-columns: 1fr; gap: 1rem; }
	.ab-porownanie__strona--oni,
	.ab-porownanie__strona--my,
	.ab-porownanie__vs { grid-column: 1; }
	.ab-porownanie__vs { justify-self: start; }

	/* ⚠ Belka na telefonie jest teraz hamburgerem - patrz sekcja „BELKA NA
	   TELEFONIE" na końcu pliku. Poprzednia wersja przewijała menu w poziomie pod
	   maską wygaszającą i to był **realny ubytek konwersji**: „Kontakt" stał jako
	   ostatnia z sześciu pozycji, czyli poza kadrem, a jedynym sygnałem, że coś
	   tam jeszcze jest, było przygaszenie prawej krawędzi. */
	.ab-nawigacja a { white-space: nowrap; }
}

@media (max-width: 620px) {
	.ab-liczby { grid-template-columns: repeat(2, 1fr); text-align: left; }
	.ab-hero { text-align: left; }
	.ab-hero__tytul { margin-inline: 0; }
	.ab-opinie { columns: 1; }
	.ab-karta-wstepna { margin-top: -2rem; }
	.ab-nawigacja a { font-size: 0.8125rem; }

	/* ⚠ Stało tu `.ab-fab span { display: none }` - reguła z czasów, gdy przycisk
	   był samym napisem w `<span>`. Po przebudowie na wersję z makiety pierścienie
	   i ikona telefonu też siedzą w `<span>`, więc ta linijka gasiła je razem
	   z napisem: poniżej 620 px przycisk był **pustym żółtym kółkiem**. Chowamy
	   wyłącznie napis, po klasie. */
	.ab-fab__napis { display: none; }
	.ab-fab { padding: 0.85rem; }
}

/* --- Baner jako animacja klienta ----------------------------------------- */

/* Spot ma proporcje 16:9, a pas w makiecie jest znacznie niższy. Kadrujemy więc
   od DOŁU: listwa z adresem i telefonem jest w dolnej części nagrania i musi
   zostać widoczna, a górna połowa to samo tło. */
.ab-baner {
	min-height: 0;
	padding: 0;
	aspect-ratio: 21 / 9;
	background: var(--ab-niebieski);
}

.ab-baner__wideo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
}

/* Hero wraca do zdjęcia - wideo nigdy nie było materiałem na tło. */
.ab-hero__wideo { display: none; }

@media (max-width: 700px) {
	.ab-baner { aspect-ratio: 16 / 9; }
}


/* =============================================================================
   PROCES NA MECHANICE - akordeon poziomy 1:1 z węzła `646:4138` (Component 28)
   =============================================================================
   ⚠ **To jest sekcja wyłącznie MECHANIKI.** Strona główna ma w tym miejscu
   karuzelę (`646:3757`, blok 13) i przez jedną rundę stała tu również - błędnie,
   bo makieta Mechaniki nigdy karuzeli nie miała. Zgłoszone przy odbiorze
   2026-08-25: „ta sekcja na mechanice jest inna, ma być 1:1".

   Wartości wprost z Dev Mode, bez przeskalowania - kontener treści ma 1600 px,
   dokładnie tyle co ramka w makiecie:
     Hero L  - Inter Semi Bold 76 / 1.2   → numer kroku
     H4      - Inter Semi Bold 25 / 1.3   → tytuł kroku
     Body    - Inter Regular   16 / 1.6   → opis i plakietki

   Rozwinięta karta 715,51 px, zwinięte po 262,83, odstęp 32 - razem 1600.
   Proporcje idą `flex-grow`, nie pikselami, więc przy węższym oknie zostają
   zachowane.

   ⚠ **Współczynniki to szerokość MINUS padding, nie sama szerokość.** Przy
   `flex-basis: 0` i `box-sizing: border-box` padding karty NIE bierze udziału
   w podziale - jest podłogą, którą przeglądarka dokłada każdej karcie PONAD jej
   proporcjonalny udział. Naiwne 715/263 daje więc zmierzone **661 i 281**, czyli
   kartę rozwiniętą o 54 px za wąską i zwinięte o 18 px za szerokie. Stąd
   715,51 − 60 = **655,51** i 262,83 − 60 = **202,83**; suma 1264 to dokładnie
   wolne miejsce po odjęciu odstępów (96) i czterech paddingów (240) od 1600.
   Sprawdzone pomiarem na żywej stronie: wychodzi 715,5 i 262,83.

   ⚠ Karty zwinięte pokazują SAM tytuł. W komponencie mają wyłączony opis
   (właściwość `txt`), więc brak zdania pod tytułem jest decyzją projektanta,
   a nie brakiem treści do uzupełnienia.
   ========================================================================== */

.ab-sekcja--proces { padding-block: 100px; }

.ab-sekcja--proces .ab-naglowek {
	max-width: 936px;
	margin-inline: auto;
	gap: 36px;
	margin-bottom: 80px;
}

.ab-proces--mechanika {
	display: flex;
	gap: 32px;
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ab-proces__krok {
	flex: 202.83 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	height: 501px;
	padding: 30px;
	border: 0;
	border-radius: 24px;
	background: rgb(239 239 249 / 30%);   /* wariant „skrócone" */
	transition: flex-grow 0.35s ease, background-color 0.25s ease;
}

/* Wariant „rozwiniete": mocniejsze tło i reszta szerokości rzędu.
   ⚠ Pierścienia `$Shadow-focus-ring1` NIE rysujemy - w instancji ma zerowy
   rozrzut (`0px 0px 0px 0px`), czyli w makiecie jest niewidoczny. */
.ab-proces__krok--otwarty { flex-grow: 655.51; background: rgb(222 224 243 / 50%); }

/* Przycisk niesie numer i tytuł; `<h3>` zostaje wyłącznie jako struktura. */
.ab-landing .ab-proces__naglowek { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }

.ab-landing .ab-proces__przelacznik {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 60px;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	color: inherit;
	cursor: pointer;
	/* ⚠ `white-space: nowrap` dziedziczy się z reguły Elementora na `button`.
	   „Odbierasz sprawne auto" w karcie o 262 px wyszłoby wtedy na sąsiednią
	   kartę zamiast się zawinąć - ta sama pułapka, co przy kaflach usług.
	   Klasa komponentu (0,2,0) bije regułę na elemencie. */
	white-space: normal;
}

/* Zwinięta karta jest klikalna CAŁA, nie tylko w wierszu tytułu - przycisk
   rozpycha się na całą jej wysokość, bo treść jest wtedy schowana. */
@media (min-width: 1101px) {
	.ab-proces__krok:not(.ab-proces__krok--otwarty) .ab-proces__naglowek { display: flex; flex: 1; }
	.ab-landing .ab-proces__krok:not(.ab-proces__krok--otwarty) .ab-proces__przelacznik { height: 100%; }
}

.ab-landing .ab-proces__numer {
	font-size: 76px;
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: 0;
	color: #000;
	margin: 0;
	white-space: nowrap;
}

/* ⚠ `align-items: flex-start` na przełączniku daje napisowi szerokość TREŚCI,
   nie kolumny - stąd `align-self: stretch`, a `min-width: 0` pozwala długiemu
   słowu złamać się zamiast rozpychać kartę. */
.ab-landing .ab-proces__tytul {
	align-self: stretch;
	min-width: 0;
	font-size: 25px;
	line-height: 1.3;
	font-weight: 600;
	color: #000;
	overflow-wrap: anywhere;
}

/* Treść rozwiniętej karty: opis stoi 16 px pod tytułem, a plakietki i CTA są
   dosunięte do DOŁU karty - w makiecie karta jest `justify-between`. */
.ab-proces__tresc {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	flex: 1;
	min-height: 0;
	margin-top: 16px;
}
.ab-proces__tresc[hidden] { display: none; }

.ab-landing .ab-proces__opis {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	font-weight: 400;
	color: #000;
}

/* Do dołu spycha pierwszy element PO opisie: plakietki, jeśli są (karta 1),
   a jeśli ich nie ma - samo CTA (karta 2). Bez tej drugiej reguły przycisk
   „Umów badanie" wisiałby tuż pod zdaniem, w połowie wysokości karty. */
.ab-proces__tresc > .ab-atuty { margin-top: auto; }
.ab-proces__tresc > .ab-proces__opis + .ab-przycisk-proces { margin-top: auto; }

/* --- Plakietki: układ 1 + 2, nie trzy wiersze -------------------------- */

.ab-atuty {
	display: grid;
	grid-template-columns: minmax(0, max-content) minmax(0, max-content);
	gap: 15px 10px;
	justify-content: start;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Pierwsza plakietka stoi w makiecie SAMA w wierszu (`646:4645`), dopiero pod
   nią dwie krótsze obok siebie (`646:4648`). */
.ab-atuty > :first-child { grid-column: 1 / -1; }

.ab-atut {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 50px;
	padding: 10px 16px 10px 10px;
	background: #fff;
	border-radius: 16px;
	font-size: 16px;
	line-height: 1.6;
	color: #000;
	filter: drop-shadow(0 2px 2px rgb(0 0 0 / 6%)) drop-shadow(0 4px 3px rgb(0 0 0 / 10%));
}

.ab-ikona-plik { display: block; flex: none; }
.ab-ikona-plik--circle-check { width: 30px; height: 30px; }
.ab-ikona-plik--arrow-up-right { width: 24px; height: 24px; }

/* --- Przycisk kroku ----------------------------------------------------- */

.ab-landing .ab-przycisk-proces {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 60px;
	padding-inline: 24px;
	background: #fff;
	border: 1.5px solid #5768c2;
	border-radius: 1000px;
	color: #5768c2;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	align-self: flex-start;
	transition: background-color 0.2s, color 0.2s;
}
.ab-landing .ab-przycisk-proces:hover { background: #5768c2; color: #fff; }
.ab-landing .ab-przycisk-proces:hover .ab-ikona-plik { filter: brightness(0) invert(1); }

/* ⚠ Poniżej 1100 px akordeon poziomy przestaje mieć sens - ta sama granica
   i ten sam powód co przy „Pozostałych usługach": zwinięta karta na 1/5
   szerokości telefonu to pasek z uciętym tytułem. Karty idą w kolumnę
   i WSZYSTKIE są rozwinięte, więc skrypt nie ma czym sterować. */
@media (max-width: 1100px) {
	.ab-proces--mechanika { flex-wrap: wrap; gap: 20px; }
	.ab-proces__krok { flex: 1 1 calc(50% - 10px); height: auto; min-height: 320px; }
	.ab-proces__krok--otwarty { flex: 1 1 100%; }
	.ab-landing .ab-proces__przelacznik { gap: 24px; cursor: default; }
	.ab-landing .ab-proces__numer { font-size: clamp(3rem, 5vw, 76px); }
	.ab-proces__tresc[hidden] { display: flex; }
	.ab-sekcja--proces { padding-block: clamp(3rem, 7vw, 100px); }
	.ab-sekcja--proces .ab-naglowek { gap: clamp(1rem, 2.5vw, 36px); margin-bottom: clamp(2rem, 5vw, 80px); }

	/* ⚠ Plakietki schodzą do jednej kolumny JUŻ TUTAJ, nie dopiero na telefonie.
	   Karta ma w tym zakresie połowę rzędu (ok. 500 px), a najdłuższa plakietka
	   mierzy 557 px - w dwóch kolumnach musiałaby się zawinąć, a przy sztywnych
	   50 px wysokości drugi wiersz wyszedłby poza białe tło. */
	.ab-atuty { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.ab-atut { height: auto; min-height: 50px; white-space: normal; }
}

@media (max-width: 700px) {
	.ab-proces__krok { flex: 1 1 100%; min-height: 0; padding: 24px; }
	.ab-landing .ab-proces__tytul { font-size: 20px; }
	.ab-landing .ab-przycisk-proces { font-size: 1rem; height: 52px; }
}

/* =============================================================================
   GALERIA - 1:1 z węzła `646:4237`
   =============================================================================
   Cztery kolumny `flex: 1`, odstęp 32 px w poziomie i 30 px w pionie, zaokrąglenie
   36 px. Kolumny wyrównane do GÓRY i celowo różnej wysokości (552 / 958 / 838 / 662)
   - to nie jest siatka, tylko cztery niezależne stosy.

   ⚠ Wysokości z pliku (552 / 376 / 256) zapisane jako PROPORCJE, nie sztywne
   `height`. Przy szerokości kolumny 376 px - czyli dokładnie (1600 − 3 × 32) ÷ 4 -
   proporcja daje tę samą liczbę pikseli co makieta, ale skaluje się z oknem,
   zamiast zniekształcać kadry na węższych ekranach.
   ========================================================================== */

.ab-galeria {
	display: flex;
	gap: 32px;
	align-items: flex-start;
}

.ab-galeria__kolumna {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.ab-galeria__poz {
	margin: 0;
	width: 100%;
	overflow: hidden;
	border-radius: 36px;
}

.ab-galeria__poz img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ab-galeria__poz--wysoka  { aspect-ratio: 376 / 552; }   /* 552 px przy kolumnie 376 */
.ab-galeria__poz--kwadrat { aspect-ratio: 1; }           /* 376 px */
.ab-galeria__poz--niska   { aspect-ratio: 376 / 256; }   /* 256 px */

/* ⚠ **Zawijanie czterech stosów na dwie kolumny robi DZIURY, nie siatkę.**
   Do 2026-08-25 stało tu `flex-wrap: wrap` z kolumnami po 50 %. Zawinięcie
   układa je w dwa WIERSZE, a wysokość wiersza bierze się z wyższego stosu -
   pod niższym zostaje pusta przestrzeń. Zmierzone przy 390 px: 181 px dziury
   pod pierwszą kolumną i 79 px pod czwartą, dokładnie tyle, ile widać na
   zgłoszeniu klienta.

   Lekarstwem jest układ WIELOŁAMOWY: `columns` rozdziela zdjęcia między dwa
   łamy tak, żeby wyrównać ich wysokość, więc dziura nie ma gdzie powstać.
   Stosy z makiety znikają wtedy z drzewa (`display: contents`) i przeglądarka
   dostaje płaską listę siedmiu kadrów - kolejność czytania w galerii i tak nie
   niesie treści.

   `break-inside: avoid` jest tu obowiązkowe: bez niego łam potrafi przeciąć
   zdjęcie w połowie i przenieść resztę do sąsiedniego. Odstęp pionowy robi
   `margin-bottom`, bo `gap` w wielołamie dotyczy wyłącznie przerwy MIĘDZY
   łamami. */
@media (max-width: 900px) {
	.ab-galeria {
		display: block;
		columns: 2;
		column-gap: 16px;
		orphans: 1;
		widows: 1;
	}
	.ab-galeria__kolumna { display: contents; }
	.ab-galeria__poz {
		break-inside: avoid;
		-webkit-column-break-inside: avoid;
		margin-bottom: 16px;
		border-radius: 24px;
	}
}

/* Zdjęcia z własnym kadrem z makiety: obrazek pozycjonowany w PROCENTACH ramki,
   dokładnie tak, jak zapisał go projektant. `fill` zamiast `cover` jest tu
   poprawne - podane szerokość i wysokość zachowują naturalne proporcje zdjęcia
   (1394 × 929 i 828 × 552 to oba 3:2), więc nic się nie rozciąga. */
.ab-galeria__poz--kadr { position: relative; }
.ab-galeria__poz--kadr img {
	position: absolute;
	left: var(--ab-kadr-x, 0);
	top: var(--ab-kadr-y, 0);
	width: var(--ab-kadr-w, 100%);
	height: var(--ab-kadr-h, 100%);
	max-width: none;
	object-fit: fill;
}

/* =============================================================================
   KOMPLETNY DESIGN Z FIGMY - tokeny typografii, hero, CTA, przycisk, stopka
   =============================================================================
   Wartości z węzłów `646:4012` (hero), `646:4130` (CTA), `646:4258` (przycisk)
   i `646:4140` (stopka z formularzem). Skala 1:1 - kontener treści ma 1600 px,
   tyle co ramka w makiecie.

   Nazwane style z pliku:
     H1     Inter Semi Bold 49 / 1.2
     H4     Inter Semi Bold 25 / 1.3
     H5     Inter Semi Bold 20 / 1.5
     Lead   Inter Regular   20 / 1.5
     Body   Inter Regular   16 / 1.6
     Body S Inter Regular   13 / 1.2
   ========================================================================== */

.ab-landing { font-size: 16px; line-height: 1.6; }

.ab-landing .ab-nadpis {
	font-size: 20px;
	line-height: 1.5;
	font-weight: 600;
	color: #000;
	letter-spacing: 0;
}

.ab-landing .ab-naglowek__tytul { font-size: 49px; line-height: 1.2; font-weight: 600; letter-spacing: 0; }
.ab-landing .ab-naglowek__wstep { font-size: 20px; line-height: 1.5; color: #000; max-width: none; }
.ab-landing .ab-naglowek { gap: 36px; }

/* --- HERO: granat + zdjęcie 70 % + skośny gradient w trybie multiply -------- */

.ab-hero { background: var(--ab-granat); border-radius: 36px; }

.ab-hero__foto {
	position: absolute;
	left: -22.22%;
	top: -39.35%;
	width: 126.5%;
	height: 142.96%;
	max-width: none;
	object-fit: cover;
	opacity: 0.7;
	z-index: 0;
	pointer-events: none;
}

/* Gradient LEŻY NA zdjęciu i mnoży się z nim - bez `multiply` wychodzi płaska
   mgiełka zamiast pogłębienia granatu w lewym dolnym rogu. */
.ab-hero::before {
	background-image: linear-gradient(-35.32deg, rgb(32 41 86 / 60%) 49.476%, rgb(32 41 86 / 0%) 81.935%);
	mix-blend-mode: multiply;
	z-index: 1;
}

/* --- CTA: karta z telefonem (węzeł 646:4130) ------------------------------ */

.ab-karta-telefon {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	width: min(100%, 1160px);
	margin: -60px auto 0;
	padding: 30px;
	position: relative;
	z-index: 3;
	background: #fff;
	border-radius: 24px;
	box-shadow: 0 25px 50px -12px rgb(0 0 0 / 25%);   /* $Shadow-2lx */
}

.ab-landing .ab-karta-telefon__tekst {
	max-width: 595px;
	font-size: 25px;
	line-height: 1.3;
	font-weight: 600;
	color: #000;
}

/* Duży przycisk pełny - ten sam w CTA i pod formularzem. */
.ab-landing .ab-przycisk-duzy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 80px;
	padding-inline: 40px;
	border: 0;
	border-radius: 1000px;
	background: var(--ab-fiolet);
	color: #fff;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s;
}
.ab-landing .ab-przycisk-duzy:hover:not([disabled]) { background: var(--ab-fiolet-hover); }
.ab-landing .ab-przycisk-duzy[disabled] { opacity: 0.55; cursor: not-allowed; }
.ab-przycisk-duzy .ab-ikona-plik { width: 30px; height: 30px; filter: brightness(0) invert(1); }

/* Przycisk z obrysem - karty usług. */
.ab-landing .ab-przycisk-obrys {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 60px;
	padding-inline: 24px;
	background: #fff;
	border: 1.5px solid var(--ab-fiolet);
	border-radius: 1000px;
	color: var(--ab-fiolet);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s, color 0.2s;
}
.ab-landing .ab-przycisk-obrys:hover { background: var(--ab-fiolet); color: #fff; }
.ab-landing .ab-przycisk-obrys:hover .ab-ikona-plik { filter: brightness(0) invert(1); }

/* --- Pływający „Szybki kontakt" (węzeł 646:4258) -------------------------- */

.ab-landing .ab-fab {
	position: fixed;
	right: clamp(1rem, 3vw, 2.5rem);
	bottom: clamp(1rem, 3vw, 2.5rem);
	z-index: 45;
	display: inline-flex;
	align-items: center;
	width: 184px;
	height: 80px;
	padding: 0;
	background: #fb0;
	border-radius: 999px;
	color: #202956;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	box-shadow: 0 10px 28px rgb(20 23 46 / 22%);
}

.ab-fab__fale { position: relative; width: 70px; height: 70px; flex: none; }
.ab-fab__krag { position: absolute; display: block; }
.ab-fab__krag--1 { left: 0; top: 0; width: 68px; height: 68px; }
.ab-fab__krag--2 { left: 6.25%; top: 5px; width: 60px; height: 60px; }
.ab-fab__krag--3 { left: 12.5%; top: 10px; width: 52px; height: 52px; }
.ab-fab__ikona   { position: absolute; left: 28.75%; top: 23px; width: 24px; height: 24px; }
.ab-fab__napis   { margin-left: 2px; }

/* --- ZAKOŃCZENIE STRONY: jasny panel + pasek praw autorskich --------------- */

.ab-koniec {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 53px;
	padding: 0 clamp(1rem, 2vw, 1.5rem) clamp(1.5rem, 3vw, 2rem);
}

.ab-koniec__panel {
	width: min(100%, 1874px);
	padding: 100px 136px;
	background: rgb(232 232 240 / 50%);
	border-radius: 36px;
}

.ab-koniec__wnetrze {
	width: min(100%, 1602px);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 50px;
}

.ab-koniec__gora { display: flex; flex-direction: column; gap: 80px; }
/* ⚠ `margin-inline: auto` jest tu OBOWIĄZKOWE. Nagłówek ma 1224 px w panelu
   o 1600 px, a bez marginesów automatycznych blok przywiera do lewej krawędzi -
   tekst w środku jest wyśrodkowany względem NIEGO, więc całość odjeżdża o 188 px
   w lewo względem kart pod spodem. Widać to dopiero powyżej ~1470 px okna, bo
   niżej panel jest węższy niż 1224 i ograniczenie nic nie robi. */
.ab-koniec__kontakt .ab-naglowek { margin-bottom: 0; max-width: 1224px; margin-inline: auto; }

.ab-koniec__prawa {
	width: min(100%, 1328px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	font-size: 16px;
	line-height: 1.6;
	color: #000;
}
.ab-koniec__autor { display: inline-flex; align-items: center; gap: 4px; }
.ab-landing .ab-koniec__autor a { color: #000; text-decoration: none; }
.ab-koniec__autor .ab-ikona-plik { width: 20px; height: 18px; }

/* --- Stopka wewnątrz panelu ---------------------------------------------- */

.ab-stopka {
	width: min(100%, 1328px);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 50px;
	padding: 0;
	background: none;
}

.ab-stopka__logo { display: block; }
.ab-stopka__logo .ab-logo__obraz { height: 65px; }
.ab-stopka__dolny { width: 100%; display: flex; flex-direction: column; gap: 30px; }

.ab-stopka__kontakt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 60px;
	padding: 30px;
	background: #fff;
	border: 0;
	border-radius: 24px;
}
.ab-stopka__kontakt li { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; line-height: 1.6; }
.ab-landing .ab-stopka__kontakt a { color: #000; text-decoration: none; }
.ab-landing .ab-stopka__kontakt a:hover { text-decoration: underline; }

.ab-stopka__rzad { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.ab-stopka__linki { display: flex; flex-wrap: wrap; gap: 20px; margin: 0; }
.ab-landing .ab-stopka__linki a { font-size: 16px; line-height: 1.6; color: #000; text-decoration: none; }
.ab-landing .ab-stopka__linki a:hover { text-decoration: underline; }

.ab-stopka__social { display: flex; flex-wrap: wrap; gap: 32px; }
.ab-stopka__social a { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; line-height: 1.6; color: #000; text-decoration: none; }
.ab-stopka__social .ab-ikona-plik { width: 32px; height: 32px; }

/* --- Karty usług pod formularzem ------------------------------------------ */

.ab-karty-uslug { display: flex; gap: 32px; align-items: stretch; margin: 0; }
.ab-karta-uslugi {
	flex: 1 0 0;
	min-width: 0;
	min-height: 280px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 30px;
	background: #fff;
	border-radius: 24px;
}
.ab-landing .ab-karta-uslugi h3 { font-size: 25px; line-height: 1.3; font-weight: 600; color: #000; margin-bottom: 16px; }
.ab-landing .ab-karta-uslugi p  { font-size: 20px; line-height: 1.5; color: #000; }
.ab-karta-uslugi .ab-przycisk-obrys { align-self: flex-start; }

/* --- FORMULARZ 1:1 -------------------------------------------------------- */

.ab-formularz { display: flex; flex-direction: column; gap: 39px; padding: 0; background: none; border: 0; }
.ab-formularz__rzad { display: flex; gap: 32px; align-items: stretch; }
.ab-formularz__rzad > .ab-pole { flex: 1 0 0; min-width: 0; }
.ab-formularz__rzad--auto { align-items: stretch; }
.ab-formularz__auto { display: flex; flex-direction: column; gap: 24px; }
.ab-landing .ab-formularz__naglowek { font-size: 20px; line-height: 1.5; font-weight: 600; color: #000; }
.ab-formularz__kolumna { flex: 0 0 512px; max-width: 512px; display: flex; flex-direction: column; gap: 16px; }
.ab-formularz__rzad--auto .ab-pole--opis { flex: 1 0 0; min-width: 0; }

/* Etykieta siedzi WEWNĄTRZ ramki, nad wartością - to jest sedno tego formularza. */
.ab-pole {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0;
	background: #fff;
	border: 1px solid #dee0f3;
	border-radius: 16px;
	overflow: hidden;
}
.ab-landing .ab-pole__etykieta { padding: 10px 15px 0; font-size: 13px; line-height: 1.2; font-weight: 400; color: #000; }
.ab-pole__etykieta i { font-style: normal; color: #d30d2e; }

.ab-landing .ab-pole__kontrolka {
	width: 100%;
	padding: 12px 15px;
	border: 0;
	border-radius: 0;
	background: #fff;
	font: inherit;
	font-size: 20px;
	line-height: 1.5;
	color: #000;
	appearance: none;
}
.ab-landing .ab-pole__kontrolka::placeholder { color: #b9b9bc; opacity: 1; }
.ab-landing .ab-pole__kontrolka:focus { outline: 2px solid var(--ab-fiolet); outline-offset: -2px; }
.ab-pole textarea.ab-pole__kontrolka { min-height: 200px; resize: vertical; }
.ab-pole--opis { height: 100%; }
.ab-pole--wybor .ab-ikona-plik { position: absolute; right: 15px; bottom: 10px; width: 36px; height: 36px; pointer-events: none; }
.ab-pole--wybor .ab-pole__kontrolka { padding-right: 60px; }

.ab-zgoda { display: flex; gap: 10px; align-items: flex-start; justify-content: flex-end; }
.ab-zgoda input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ab-fiolet); }
.ab-zgoda > span { max-width: 1026px; font-size: 13px; line-height: 1.5; color: #000; }
.ab-landing .ab-zgoda a { color: #000; text-decoration: underline; }

.ab-formularz__stopka { display: flex; justify-content: center; }

@media (max-width: 1400px) {
	.ab-koniec__panel { padding: clamp(2.5rem, 6vw, 100px) clamp(1.25rem, 5vw, 136px); }
	.ab-landing .ab-naglowek__tytul { font-size: clamp(1.9rem, 4vw, 49px); }
	.ab-landing .ab-karta-telefon__tekst,
	.ab-landing .ab-karta-uslugi h3 { font-size: clamp(1.25rem, 2.2vw, 25px); }
	.ab-landing .ab-przycisk-duzy { height: 64px; padding-inline: 28px; font-size: 1rem; }
	.ab-landing .ab-przycisk-obrys { height: 52px; font-size: 1rem; }
}

@media (max-width: 900px) {
	.ab-karta-telefon { flex-direction: column; align-items: flex-start; margin-top: -2.5rem; }
	.ab-formularz__rzad { flex-direction: column; }
	.ab-formularz__kolumna { flex: 1 1 auto; max-width: none; }
	.ab-karty-uslug { flex-direction: column; }
	.ab-stopka__kontakt { gap: 1rem 2rem; padding: 1.25rem; }
	.ab-stopka__rzad { flex-direction: column; align-items: flex-start; }
	.ab-zgoda { justify-content: flex-start; }
	.ab-landing .ab-nadpis { font-size: 1rem; }
	.ab-landing .ab-naglowek__wstep,
	.ab-landing .ab-karta-uslugi p { font-size: 1rem; }
	.ab-landing .ab-pole__kontrolka { font-size: 1rem; }
	.ab-landing .ab-fab { width: 64px; height: 64px; }
	.ab-fab__napis { display: none; }
	.ab-fab__fale { width: 64px; height: 64px; }
	.ab-fab__krag--1 { width: 62px; height: 62px; }
	.ab-fab__krag--2 { width: 54px; height: 54px; top: 4px; }
	.ab-fab__krag--3 { width: 46px; height: 46px; top: 8px; }
	.ab-fab__ikona { left: 20px; top: 20px; }
}

/* ⚠ `.ab-landing img { max-width: 100% }` ma (0,1,1) i przycinało zdjęcie hero
   do szerokości ramki - kadr z makiety ma 126,5 %, więc obrazek MUSI wystawać.
   Klasa komponentu (0,1,0) przegrywała; podbijamy do (0,2,0). */
.ab-landing .ab-hero__foto { max-width: none; }

/* Proporcje ramki hero z makiety: 1872 × 1104. Bez tego wysokość brała się z samej
   treści i kadr wychodził dużo płytszy niż w projekcie. */
.ab-hero { aspect-ratio: 1872 / 1104; }

@media (max-width: 900px) {
	.ab-hero { aspect-ratio: auto; }
}

/* Ikony złożone z kilku warstw SVG (Instagram) - nakładane w tym samym miejscu. */
.ab-ikona-warstwy { position: relative; display: inline-block; width: 32px; height: 32px; flex: none; }
.ab-ikona-warstwy .ab-ikona-plik { position: absolute; inset: 0; width: 32px; height: 32px; }

/* =============================================================================
   ZGODNOŚĆ Z REFERENCJĄ `brudniewiczz.jpg`
   =============================================================================
   Poprawki po porównaniu sekcja po sekcji z eksportem całej podstrony.
   ========================================================================== */

/* Pasek liczb: sama wartość i podpis, BEZ nadpisu. Nadpisy („Ponad", „Ocena",
   „Zastępcze"…) były w starszej wersji makiety i to ich dotyczyła poprawka nr 1
   z listy redakcyjnej - w tej wersji projektant je usunął. */
.ab-liczby__nadpis { display: none; }

.ab-landing .ab-liczby__wartosc { font-size: clamp(1.75rem, 2.6vw, 40px); font-weight: 400; }
.ab-landing .ab-liczby__podpis { font-size: 16px; line-height: 1.6; }

/* Plakietki usług: ikona NAD tekstem, nie obok - tak jak w referencji. */
.ab-chipy--kolumny li {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 16px;
	font-size: 16px;
	line-height: 1.4;
	border-radius: 16px;
	box-shadow: 0 1px 3px rgb(20 23 46 / 8%);
}
.ab-chipy--kolumny .ab-ikona { width: 24px; height: 24px; margin: 0; }

.ab-landing .ab-warsztat__tekst h3 { font-size: 25px; line-height: 1.3; }
.ab-landing .ab-warsztat__tekst p { font-size: 16px; line-height: 1.6; color: #000; }

/* ⚠ Kierunek gradientu hero. Kąt `-35.32deg` przepisany z eksportu Figmy wskazuje
   w CSS-ie w LEWY GÓRNY róg, więc przyciemniał środek kadru. W referencji ciemny
   jest LEWY DÓŁ, a prawa góra rozjaśniona - czyli oś biegnie ku prawemu górnemu
   rogowi. Kąty gradientów Figmy i CSS-a liczą się inaczej i przepisanie liczby
   wprost daje obrót w złą stronę. */
.ab-hero::before {
	background-image: linear-gradient(to top right, rgb(32 41 86 / 60%) 49.476%, rgb(32 41 86 / 0%) 81.935%);
}

.ab-landing .ab-hero__podtytul { font-size: 20px; line-height: 1.5; margin-top: 1rem; }
.ab-landing .ab-hero__nadtytul { font-size: 20px; line-height: 1.5; font-weight: 400; }

/* ⚠ Plakietki usług czyta się w makiecie KOLUMNAMI (diagnostyka → zmiana
   oprogramowania → naprawy układu napędowego…), a siatka domyślnie wypełnia się
   WIERSZAMI. Bez `grid-auto-flow: column` kolejność wychodzi przetasowana, choć
   pozycje i ich liczba się zgadzają - i właśnie dlatego łatwo to przeoczyć. */
.ab-chipy--kolumny {
	grid-auto-flow: column;
	grid-template-rows: repeat(5, auto);
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1100px) {
	.ab-chipy--kolumny { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
	.ab-chipy--kolumny { grid-template-columns: 1fr; }
}

/* =============================================================================
   PRZYCISKI: ODZYSKANIE KOLORU OD `a:link`
   =============================================================================
   Elementor wypisuje `.elementor-kit-342 a:link { color: unset }`. `:link` to
   pseudo-KLASA, więc ten selektor ma (0,2,1) i bije `.ab-landing .ab-przycisk-*`
   (0,2,0). A `unset` dla koloru - właściwości dziedziczonej - znaczy `inherit`,
   czyli odnośnik przejmował kolor tekstu z otoczenia.

   Objaw był mylący: przycisk wysyłki formularza (`<button>`) miał biały napis,
   a identycznie ostylowany przycisk-odnośnik (`<a>`) ciemny. Różnicy nie robiła
   klasa, tylko znacznik.

   `:any-link` dokłada trzecią klasę do rachunku - (0,3,0) - i wygrywa.
   ========================================================================== */

.ab-landing .ab-przycisk-duzy:any-link,
.ab-landing .ab-przycisk-duzy { color: #fff; }
.ab-landing .ab-przycisk-duzy:any-link .ab-ikona-plik { filter: brightness(0) invert(1); }

.ab-landing .ab-przycisk-obrys:any-link { color: var(--ab-fiolet); }
.ab-landing .ab-przycisk-obrys:any-link:hover { color: #fff; }

.ab-landing .ab-przycisk-proces:any-link { color: #5768c2; }
.ab-landing .ab-przycisk-proces:any-link:hover { color: #fff; }

.ab-landing .ab-fab:any-link { color: #202956; }

/* Ikony w przyciskach z obrysem trzymają kolor tekstu, także po najechaniu. */
.ab-przycisk-obrys .ab-ikona-plik,
.ab-przycisk-proces .ab-ikona-plik { transition: filter 0.2s; }
.ab-landing .ab-przycisk-obrys:hover .ab-ikona-plik,
.ab-landing .ab-przycisk-proces:hover .ab-ikona-plik { filter: brightness(0) invert(1); }

/* =============================================================================
   ODSTĘPY NA WĘŻSZYCH EKRANACH
   =============================================================================
   ⚠ `justify-content: space-between` rozsuwa elementy TYLKO wtedy, gdy zostaje
   wolne miejsce. Karta procesu ma w makiecie sztywne 501 px, więc przy pełnej
   szerokości odstępy powstają same - ale poniżej 1400 px wysokość idzie na `auto`
   i wolnego miejsca nie ma. Wtedy opis, plakietki i przycisk stykają się bez
   żadnej przerwy. Dlatego karta dostaje **własny `gap`**, który działa jak
   minimalny odstęp niezależnie od tego, czy jest co rozsuwać.
   ========================================================================== */

@media (max-width: 1400px) {
	.ab-sekcja { padding-block: clamp(2.5rem, 6vw, var(--ab-sekcja-y)); }
	.ab-karta-telefon { gap: 20px 32px; padding: 24px; }
	.ab-koniec { gap: clamp(1.5rem, 3vw, 53px); }
	.ab-koniec__wnetrze { gap: clamp(2rem, 4vw, 50px); }
	.ab-koniec__gora { gap: clamp(2.5rem, 5vw, 80px); }
	.ab-stopka { gap: clamp(2rem, 4vw, 50px); }
	.ab-formularz { gap: clamp(1.5rem, 3vw, 39px); }
	.ab-karty-uslug { gap: 20px; }
	.ab-karta-uslugi { padding: 24px; min-height: 0; }
	.ab-galeria { gap: clamp(0.75rem, 2vw, 32px); }
	.ab-galeria__kolumna { gap: clamp(0.75rem, 1.9vw, 30px); }
	.ab-warsztat { gap: clamp(1.5rem, 3vw, 3.5rem); padding: 24px; }
	.ab-pas { padding: clamp(2rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 4rem); }
	.ab-powody { gap: clamp(1.5rem, 3vw, 2rem); }
}

@media (max-width: 700px) {
	.ab-atut { padding: 10px 14px; font-size: 0.9375rem; }
	.ab-koniec__panel { border-radius: 24px; }
	.ab-hero { border-radius: 24px; }
	.ab-karta-telefon { border-radius: 18px; }
	.ab-landing .ab-naglowek__tytul { font-size: clamp(1.5rem, 7vw, 2rem); }
	.ab-landing .ab-hero__tytul { font-size: clamp(1.75rem, 8vw, 2.5rem); }
	.ab-liczby { gap: 1.25rem 1rem; }
	.ab-landing .ab-liczby__wartosc { font-size: 1.5rem; }
	.ab-landing .ab-liczby__podpis { font-size: 0.8125rem; }
}

/* =============================================================================
   WYRÓWNANIA I MARGINESY - poprawki po odbiorze
   ========================================================================== */

/* ⚠ Pasek kontaktowy w stopce to `<ul>`, a reguła bazowa `.ab-landing ul
   { padding: 0 }` ma (0,1,1) i kasowała `padding: 30px` z klasy komponentu
   (0,1,0). Pasek miał przez to 26 px wysokości zamiast 84 i wyglądał jak
   cienka kreska zamiast białej pigułki. Ta sama rodzina błędu, co przy
   nagłówkach - reset na gołym elemencie bije klasę. */
.ab-landing .ab-stopka__kontakt { padding: 30px; }

/* Linki i profile mają w makiecie stać w JEDNYM wierszu, rozsunięte do krawędzi.
   Przy 1328 px suma ich szerokości to 1296 px, więc mieszczą się z zapasem -
   ale `gap` doliczany do tej sumy przepychał je o kilka pikseli i wiersz się
   łamał. Powyżej 1100 px zawijanie jest wyłączone. */
.ab-stopka__rzad { gap: 20px; flex-wrap: nowrap; }

/* ⚠ Lewa kolumna formularza musi być DOKŁADNIE jedną trzecią, tak jak pola
   w rzędzie wyżej. Sztywne `512px` zgadzało się tylko przy kontenerze 1600 px;
   przy każdej innej szerokości pola z rzędu nad nią kurczyły się proporcjonalnie,
   a kolumna zostawała - i krawędzie przestawały się pokrywać. */
.ab-formularz__kolumna {
	flex: 0 0 calc((100% - 64px) / 3);
	max-width: calc((100% - 64px) / 3);
}

/* Panel zakończenia: padding boczny skaluje się z oknem, żeby stopka nie musiała
   zawijać wiersza na ekranach węższych niż płótno makiety. */
.ab-koniec__panel { padding: 100px clamp(1.5rem, 7vw, 136px); }

@media (max-width: 1100px) {
	.ab-stopka__rzad { flex-wrap: wrap; gap: 1rem 2rem; }
	.ab-formularz__kolumna { flex: 0 0 calc((100% - 32px) / 2); max-width: calc((100% - 32px) / 2); }
}

@media (max-width: 900px) {
	.ab-landing .ab-stopka__kontakt { padding: 1.25rem; }
	.ab-formularz__kolumna { flex: 1 1 auto; max-width: none; }
}

/* =============================================================================
   HERO - typografia 1:1 z węzła `646:4013`
   =============================================================================
   Sprawdzenie wykazało rozjazd we WSZYSTKICH trzech napisach naraz: rozmiary,
   wagi, kolory i odstępy. Wartości z pliku:

     nadtytuł   Inter Semi Bold 600 · 25 px · 1.3 · biały
     H1         Inter **Bold 700** · 76 px · 1.2 · biały
     podtytuł   Inter Regular  400 · 31 px · 1.3 · biały
     odstępy    30 px między każdą parą

   ⚠ H1 jest **Bold (700)**, a nie Semi Bold jak pozostałe nagłówki na stronie.
   Reguła bazowa `.ab-landing h1 { font-weight: 600 }` musi zostać przebita.

   ⚠ Wszystkie trzy napisy są **białe** - miałem nadtytuł i podtytuł w przygaszonym
   błękicie, przez co hero czytało się jako trzy poziomy ważności zamiast dwóch.
   ========================================================================== */

.ab-hero__tresc { display: flex; flex-direction: column; align-items: center; gap: 30px; }

.ab-landing .ab-hero__nadtytul {
	font-size: 25px;
	line-height: 1.3;
	font-weight: 600;
	color: #fff;
	margin: 0;
}

.ab-landing .ab-hero__tytul {
	font-size: 76px;
	line-height: 1.2;
	font-weight: 700;
	color: #fff;
	max-width: none;
}

.ab-landing .ab-hero__podtytul {
	font-size: 31px;
	line-height: 1.3;
	font-weight: 400;
	color: #fff;
	margin: 0;
}

/* ⚠ Nadpis na ciemnym pasie ma być `#848FD4`, nie czarny. Reguła
   `.ab-landing .ab-nadpis { color: #000 }` z bloku typografii ma tę samą
   specyficzność (0,2,0) co wariant jasny i stała PÓŹNIEJ w pliku, więc wygrywała
   kolejnością. Trzecia klasa rozstrzyga to niezależnie od kolejności. */
.ab-landing .ab-naglowek--jasny .ab-nadpis { color: #848fd4; text-align: center; }

/* =============================================================================
   SEKCJA WARSZTATU - 1:1 z węzła `646:4047`
   =============================================================================
   Dwa panele o wspólnym tle `rgba(222,224,243,0.3)` w jednej ramce o promieniu 36
   (nie 24). Lewy 631 px, prawy 970 px - razem 1601, czyli szerokość kontenera.
   Padding obu paneli: 50 px.
   ========================================================================== */

.ab-warsztat {
	display: flex;
	align-items: stretch;
	gap: 0;
	padding: 0;
	overflow: hidden;
	background: rgb(222 224 243 / 30%);
	border-radius: 36px;
}

.ab-warsztat__panel { padding: 50px; }
.ab-warsztat__panel--tekst {
	flex: 0 0 39.4%;          /* 631 / 1601 */
	max-width: 39.4%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2.5rem;
}
.ab-warsztat__panel--lista { flex: 1 1 0; min-width: 0; }

.ab-warsztat__tresc { display: flex; flex-direction: column; gap: 24px; }

.ab-landing .ab-warsztat__tytul {
	font-size: 31px;
	line-height: 1.3;
	font-weight: 600;
	color: #000;
}

.ab-landing .ab-warsztat__opis { font-size: 20px; line-height: 1.5; color: #000; }
.ab-landing .ab-warsztat__opis strong { font-weight: 600; }

.ab-warsztat__panel--tekst .ab-przycisk-duzy { align-self: flex-start; }

/* Plakietki: ikona NAD tekstem, trzy kolumny czytane w dół, odstęp 16 w pionie
   i 32 w poziomie. Cień `$Shadow-md` z pliku. */
.ab-chipy--kolumny {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(5, auto);
	grid-auto-flow: column;
	gap: 16px 32px;
	margin: 0;
	align-content: start;
}

.ab-chip {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 8px;
	padding: 10px 24px 10px 10px;
	background: #fff;
	border: 0;
	border-radius: 16px;
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -1px rgb(0 0 0 / 6%);
}
.ab-landing .ab-chip span { font-size: 16px; line-height: 1.6; color: #000; }
.ab-chip .ab-ikona-plik { width: 30px; height: 30px; }

@media (max-width: 1400px) {
	.ab-landing .ab-hero__tytul { font-size: clamp(2.25rem, 5.2vw, 76px); }
	.ab-landing .ab-hero__podtytul { font-size: clamp(1.125rem, 2.2vw, 31px); }
	.ab-landing .ab-hero__nadtytul { font-size: clamp(1rem, 1.8vw, 25px); }
	.ab-hero__tresc { gap: clamp(1rem, 2.5vw, 30px); }
	.ab-warsztat__panel { padding: clamp(1.5rem, 3.5vw, 50px); }
	.ab-landing .ab-warsztat__tytul { font-size: clamp(1.25rem, 2.4vw, 31px); }
	.ab-landing .ab-warsztat__opis { font-size: clamp(1rem, 1.5vw, 20px); }
	.ab-chipy--kolumny { gap: 12px 16px; }
}

@media (max-width: 1000px) {
	.ab-warsztat { flex-direction: column; }
	.ab-warsztat__panel--tekst { flex: 1 1 auto; max-width: none; }
	.ab-chipy--kolumny { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; grid-auto-flow: row; }
}

@media (max-width: 700px) {
	.ab-warsztat { border-radius: 24px; }
	.ab-chipy--kolumny { grid-template-columns: 1fr; }
}

/* =============================================================================
   INTER - WGRANY LOKALNIE, NIE Z GOOGLE FONTS
   =============================================================================
   Font wcześniej tylko „prosiło się" o Intera w stosie i działał u tych, którzy
   mają go zainstalowanego w systemie. U reszty schodził na krój zastępczy, więc
   makieta i strona wyglądały inaczej na dwóch maszynach.

   ⚠ **Nie ładujemy z Google Fonts.** Cały mechanizm odcięcia banera zgód na
   stronach testowych opiera się na tym, że nie idzie stąd ŻADNE zapytanie do
   obcego serwera. Google Fonts przesyła adres IP odwiedzającego do Google -
   to jest dokładnie ten rodzaj usługi, na który baner zbiera zgodę.

   Plik jest wariancyjny (400-700), więc jeden zestaw obsługuje wszystkie wagi
   używane na stronie: 400, 500, 600 i 700.

   ⚠ `latin-ext` jest OBOWIĄZKOWY - polskie „ąćęłńśźż" leżą poza podstawowym
   zakresem `latin`. Bez tego pliku przeglądarka podstawia inny krój tylko pod
   te znaki i tekst robi się nierówny w środku wyrazu.
   ========================================================================== */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter na WSZYSTKIM w obrębie landinga - także na polach formularza i przyciskach,
   które domyślnie biorą krój systemowy, a nie dziedziczą po stronie. */
.ab-landing,
.ab-landing *,
.ab-landing input,
.ab-landing select,
.ab-landing textarea,
.ab-landing button {
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* =============================================================================
   FORMULARZ - równe wysokości kolumn
   =============================================================================
   W makiecie każda lista wyboru ma **80 px**, odstęp 16 px, więc kolumna trzech
   list liczy 3 × 80 + 2 × 16 = **272 px**. Pole opisu ma dokładnie tę samą
   wysokość - w pliku jest ustawione na `h-full` w rzędzie wyrównanym do dołu.

   U mnie listy rozciągały się treścią, a pole opisu miało własne `min-height`,
   więc obie kolumny kończyły się w różnych miejscach.
   ========================================================================== */

.ab-formularz__rzad--auto { align-items: stretch; }

.ab-pole--wybor { height: 80px; justify-content: center; }
.ab-pole--wybor .ab-ikona-plik { bottom: auto; top: 50%; transform: translateY(-50%); }

.ab-pole--opis { height: auto; align-self: stretch; display: flex; flex-direction: column; }
.ab-pole textarea.ab-pole__kontrolka { min-height: 0; flex: 1 1 auto; resize: none; }

/* =============================================================================
   PŁYWAJĄCY PRZYCISK NA MAŁYCH EKRANACH
   =============================================================================
   Na wąskim ekranie pełna pigułka 184 × 80 zabierała ćwiartkę szerokości, napis
   łamał się na dwa wiersze, a pierścienie wystawały poza obrys. Poniżej 900 px
   zostaje samo kółko z ikoną - nazwę dla czytnika niesie `aria-label`, więc nic
   nie ginie dla dostępności.
   ========================================================================== */

@media (max-width: 900px) {
	.ab-landing .ab-fab {
		width: 64px;
		height: 64px;
		padding: 0;
		justify-content: center;
		border-radius: 999px;
		overflow: hidden;
	}
	.ab-fab__napis { display: none; }
	.ab-fab__fale { width: 64px; height: 64px; }
	.ab-fab__krag--1 { left: 2px;  top: 2px;  width: 60px; height: 60px; }
	.ab-fab__krag--2 { left: 6px;  top: 6px;  width: 52px; height: 52px; }
	.ab-fab__krag--3 { left: 10px; top: 10px; width: 44px; height: 44px; }
	.ab-fab__ikona   { left: 20px; top: 20px; width: 24px; height: 24px; }
}

/* =============================================================================
   HERO I BELKA NA TELEFONIE
   =============================================================================
   ⚠ **Kadr zdjęcia z makiety jest policzony dla ramki 1872 × 1104** - obrazek jest
   tam powiększony do 126,5 % i przesunięty w lewo i w górę. Na wąskiej, wysokiej
   ramce telefonu ten sam kadr wypycha treść zdjęcia poza widok i zostaje sam
   granat. Poniżej 900 px wracamy więc do zwykłego `cover`, który zawsze wypełnia
   ramkę niezależnie od jej proporcji.

   Belka: w makiecie nie ma wariantu mobilnego ani hamburgera, więc menu zostaje
   widoczne i przewijalne w poziomie. Żeby nie wyglądało na ucięte, dostaje
   wewnętrzny odstęp i maskę wygaszającą przy prawej krawędzi.
   ========================================================================== */

@media (max-width: 900px) {
	.ab-landing .ab-hero__foto {
		inset: 0;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Skośny gradient jest dobrany pod szeroki kadr; na pionowym lepiej działa
	   przyciemnienie od dołu, bo tam siedzi pasek liczb. */
	.ab-hero::before {
		background-image: linear-gradient(180deg, rgb(32 41 86 / 45%) 0%, rgb(32 41 86 / 75%) 100%);
	}

	.ab-hero { text-align: center; padding-top: clamp(7rem, 26vw, 10rem); }
	.ab-hero__tresc { align-items: center; }
	.ab-landing .ab-hero__tytul { margin-inline: auto; }
	.ab-liczby { text-align: center; justify-items: center; }

	.ab-belka { inset: 0.75rem 0.75rem auto; }
}

@media (max-width: 620px) {
	/* `text-align: left` z wcześniejszej wersji rozjeżdżało hero - makieta jest
	   wyśrodkowana i tak ma zostać także na telefonie. */
	.ab-hero { text-align: center; }
	.ab-landing .ab-hero__tytul { margin-inline: auto; }
	.ab-liczby { grid-template-columns: repeat(2, 1fr); text-align: center; }
	.ab-landing .ab-hero__podtytul { font-size: 1.0625rem; }
	.ab-landing .ab-hero__nadtytul { font-size: 0.9375rem; }
}

/* =============================================================================
   ZAPADNIĘTE KARTY I POLA NA TELEFONIE - jedna przyczyna
   =============================================================================
   ⚠ `flex: 1 0 0` znaczy „rośnij, nie kurcz się, baza zero" - ale **baza dotyczy
   osi głównej**. Dopóki kontener jest wierszem, zero to szerokość i wszystko
   działa. Po obróceniu go na kolumnę (`flex-direction: column` w media query)
   ta sama deklaracja znaczy „bazowa WYSOKOŚĆ zero" - karty i pola zapadały się
   do zera, a treść wychodziła poza nie i nachodziła na kolejne elementy.

   Stąd wyglądało to jak błąd układu stopki i formularza naraz, a była to jedna
   linijka w dwóch miejscach. **Przy każdym obracaniu kierunku fleksa trzeba
   zresetować `flex-basis`.**
   ========================================================================== */

@media (max-width: 900px) {
	.ab-karty-uslug { flex-direction: column; }
	.ab-karty-uslug > .ab-karta-uslugi { flex: 0 0 auto; min-height: 0; }

	.ab-formularz__rzad { flex-direction: column; }
	.ab-formularz__rzad > .ab-pole,
	.ab-formularz__rzad--auto > .ab-pole,
	.ab-formularz__rzad > .ab-formularz__kolumna { flex: 0 0 auto; width: 100%; max-width: none; }

	.ab-pole--opis { align-self: auto; }
	.ab-pole textarea.ab-pole__kontrolka { flex: 0 0 auto; min-height: 180px; resize: vertical; }

	/* Stopka: logo nie może nachodzić na karty - blok dostaje własny odstęp. */
	.ab-stopka { gap: 2rem; }
	.ab-stopka__logo .ab-logo__obraz { height: 52px; }
	.ab-stopka__linki { gap: 0.5rem 1.25rem; }
	.ab-stopka__social { gap: 1rem 1.5rem; }
	.ab-koniec__gora { gap: 2.5rem; }
}

/* ⚠ `.ab-landing *` ma specyficzność **(0,1,0)** - gwiazdka nie wnosi nic do
   rachunku. Elementor ustawia `.elementor-kit-342 a { font-family: Montserrat }`
   na (0,1,1) i wygrywał, więc WSZYSTKIE odnośniki i przyciski renderowały się
   Montserratem, choć reszta strony była już Interem. Widać to było dopiero po
   sprawdzeniu `getComputedStyle`, bo oba kroje są bezszeryfowe i przy krótkich
   napisach różnica jest ledwo zauważalna.

   Powtórzona klasa podnosi wagę do (0,2,0), a `:any-link` dokłada trzecią
   dla odnośników - tam Elementor ma jeszcze `a:link`. */
.ab-landing.ab-landing,
.ab-landing.ab-landing *,
.ab-landing.ab-landing *::before,
.ab-landing.ab-landing *::after,
.ab-landing.ab-landing a:any-link,
.ab-landing.ab-landing input,
.ab-landing.ab-landing select,
.ab-landing.ab-landing textarea,
.ab-landing.ab-landing button {
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* =============================================================================
   RUNDA UWAG 2026-08-25 - hero, belka, galeria, stopka na telefonie
   =============================================================================
   Wszystko poniżej stoi na końcu pliku ŚWIADOMIE. Arkusz ma kilka bloków o tej
   samej specyficzności rozrzuconych po historii projektu (patrz komentarze
   wyżej), więc przy remisie rozstrzyga kolejność - a te reguły mają wygrywać.
   Tam, gdzie remis nie wystarcza, waga jest podniesiona klasą `.ab-landing`.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. HERO - pasek liczb na DOLE kadru, nie doklejony do podtytułu
   --------------------------------------------------------------------------

   ⚠ `.ab-liczby { margin-top: clamp(2.5rem, 6vw, 4.5rem) }` NIGDY nie działało.
   Pasek jest listą, a reguła bazowa `.ab-landing ul { margin: 0 }` ma (0,1,1)
   i bije klasę komponentu (0,1,0) - ta sama rodzina błędu, co przy nagłówkach
   i przy pasku kontaktowym w stopce. Zmierzone przed poprawką: odstęp między
   podtytułem a paskiem liczb **0 px**, a pod paskiem 206 px pustego kadru.
   Napisy wyglądały przez to na zsunięte w jeden blok, a hero na przypadkowo
   za wysokie.

   Rozwiązanie jest jedno na oba objawy: hero staje się kolumną fleksa, a pasek
   liczb dostaje `margin-top: auto`. Automatyczny margines pochłania CAŁE wolne
   miejsce, więc treść zostaje u góry, liczby siadają nad dolnym marginesem
   wewnętrznym, a odstęp między nimi bierze się z wysokości kadru - dokładnie
   tak, jak w makiecie.

   `padding-top` jest przy okazji ściągnięty z 14 rem do 11 rem: wolne miejsce
   ma trafić MIĘDZY bloki, a nie nad pierwszy z nich. Dolna granica 8 rem nadal
   mieści belkę (pigułka kończy się ~115 px pod górną krawędzią hero).
   -------------------------------------------------------------------------- */

.ab-hero { display: flex; flex-direction: column; }

.ab-landing .ab-hero {
	padding-top: clamp(8rem, 12vw, 11rem);
	padding-bottom: clamp(3.5rem, 6vw, 6rem);
}

/* `padding-top` obok `margin-top: auto` nie jest zdublowaniem odstępu: margines
   pochłania wolne miejsce, którego na telefonie (wysokość z treści, nie z
   proporcji) po prostu nie ma. Padding jest wtedy jedynym odstępem, jaki
   zostaje - i dlatego musi tu stać. */
.ab-landing .ab-liczby {
	margin-top: auto;
	padding-top: clamp(1.75rem, 4vw, 3.25rem);
}

/* -----------------------------------------------------------------------------
   2. BELKA NA TELEFONIE - hamburger zamiast menu przewijanego w poziomie
   -------------------------------------------------------------------------- */

/* Na szerokim ekranie menu stoi w belce i żadne kontrolki nie są potrzebne. */
.ab-belka__akcje { display: none; }

@media (max-width: 900px) {
	.ab-belka__wnetrze {
		position: relative;
		flex-wrap: nowrap;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem;
		padding: 0.5rem 0.5rem 0.5rem 0.9rem;
	}

	.ab-logo { flex: 0 1 auto; min-width: 0; }
	.ab-logo__obraz { max-width: 100%; height: auto; }

	.ab-belka__akcje { display: flex; align-items: center; gap: 0.375rem; flex: none; }

	/* 44 px to najmniejszy cel dotykowy, jaki wolno postawić obok drugiego celu
	   dotykowego. Ikona ma 22-24 px, resztę robi obwódka. */
	.ab-landing .ab-belka__telefon,
	.ab-landing .ab-hamburger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		flex: none;
		padding: 0;
		border: 0;
		border-radius: var(--ab-r-pigulka);
		background: var(--ab-tlo-alt);
		color: var(--ab-tusz);
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
	}

	.ab-belka__telefon .ab-ikona-plik { width: 22px; height: 22px; }

	.ab-hamburger__kreski { position: relative; display: block; width: 20px; height: 14px; }
	.ab-hamburger__kreski span {
		position: absolute;
		left: 0;
		right: 0;
		height: 2px;
		border-radius: 2px;
		background: var(--ab-tusz);
		transition: transform 0.2s ease, opacity 0.15s ease;
	}
	.ab-hamburger__kreski span:nth-child(1) { top: 0; }
	.ab-hamburger__kreski span:nth-child(2) { top: 6px; }
	.ab-hamburger__kreski span:nth-child(3) { top: 12px; }

	.is-otwarta .ab-hamburger__kreski span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
	.is-otwarta .ab-hamburger__kreski span:nth-child(2) { opacity: 0; }
	.is-otwarta .ab-hamburger__kreski span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

	/* ⚠ Panel chowa się TYLKO przy klasie `ab-belka--js`, którą dokłada skrypt.
	   Bez tego wyłączony JavaScript zostawiłby stronę bez jakiejkolwiek
	   nawigacji - menu byłoby schowane, a przycisk, który je otwiera, martwy. */
	.ab-belka--js .ab-nawigacja {
		position: absolute;
		top: calc(100% + 8px);
		left: 0;
		right: 0;
		display: none;
		max-height: min(70vh, 26rem);
		overflow-y: auto;
		padding: 0.375rem;
		background: #fff;
		border: 1px solid var(--ab-obrys);
		border-radius: var(--ab-r-karta);
		box-shadow: 0 18px 40px rgb(18 20 43 / 14%);
		-webkit-mask-image: none;
		mask-image: none;
	}
	.ab-belka--js.is-otwarta .ab-nawigacja { display: block; }

	.ab-nawigacja ul { flex-direction: column; align-items: stretch; gap: 0; }

	.ab-landing .ab-nawigacja a {
		display: block;
		padding: 0.8rem 1rem;
		font-size: 1rem;
		border-radius: 14px;
		border-bottom: 0;
	}
	.ab-landing .ab-nawigacja li + li a { box-shadow: 0 -1px 0 rgb(18 20 43 / 7%); }
	.ab-landing .ab-nawigacja a:hover,
	.ab-landing .ab-nawigacja a:focus-visible { background: var(--ab-tlo-alt); }
}

@media (max-width: 620px) {
	/* Reguła `.ab-nawigacja a { font-size: 0.8125rem }` z bloku 620 była pisana
	   pod menu wciśnięte w jeden wiersz. W panelu pozycje mają własny wiersz,
	   więc 13 px byłoby bez powodu za małe. */
	.ab-landing .ab-nawigacja a { font-size: 1rem; }
}

/* -----------------------------------------------------------------------------
   3. PEŁNA SZEROKOŚĆ NA TELEFONIE - hero, panel z formularzem, stopka
   --------------------------------------------------------------------------
   Na 390 px kontener zabierał 40 px na marginesy, panel zakończenia kolejne
   ~55 px na własny padding, a oba miały jeszcze zaokrąglone rogi. Zostawało
   niecałe 300 px na treść. Na ekranie tej szerokości ramka nie niesie żadnej
   informacji - niesie ją treść, więc marginesy schodzą do zera, a zaokrąglenia
   do prostej krawędzi ekranu.

   Karty zachodzące na hero (`ab-karta-telefon`, `ab-karta-wstepna`) marginesu
   NIE tracą: to białe panele na zdjęciu i bez odstępu zlewałyby się z krawędzią
   ekranu.
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
	/* ⚠ `padding-top: 0` z reguły `.ab-sekcja--hero` (0,1,0) przegrywa KOLEJNOŚCIĄ
	   z `.ab-sekcja { padding-block: clamp(...) }` z bloku 1400 px, który stoi
	   niżej w pliku. Efekt: nad hero rozciągniętym na całą szerokość zostawał
	   40-pikselowy biały pas - czyli dokładnie ten margines, którego mieliśmy się
	   pozbyć, tyle że u góry. */
	.ab-landing .ab-sekcja--hero { padding-top: 0; }
	.ab-sekcja--hero { padding-inline: 0; }
	.ab-sekcja--hero > .ab-kontener { width: 100%; }
	.ab-landing .ab-hero { border-radius: 0; }
	.ab-landing .ab-hero { padding-inline: 1.25rem; }

	.ab-sekcja--hero .ab-karta-telefon,
	.ab-sekcja--hero .ab-karta-wstepna { width: calc(100% - 2rem); }

	.ab-koniec { padding-inline: 0; }
	.ab-landing .ab-koniec__panel {
		padding: clamp(2.5rem, 9vw, 3.5rem) 1.25rem;
		border-radius: 0;
	}
	.ab-koniec__prawa { padding-inline: 1.25rem; }
}

/* -----------------------------------------------------------------------------
   4. STOPKA NA TELEFONIE - wszystko do lewej, profile bez nazw
   --------------------------------------------------------------------------
   Pasek kontaktowy jest wierszem z `justify-content: center`, więc po zawinięciu
   każda pozycja lądowała na środku własnego wiersza - adres, dwa telefony i mail
   tworzyły schodki bez wspólnej osi. Na wąskim ekranie to kolumna, nie wiersz:
   jedna krawędź startowa dla wszystkich czterech pozycji.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.ab-stopka { align-items: flex-start; }
	.ab-stopka__logo { align-self: flex-start; }

	.ab-landing .ab-stopka__kontakt {
		width: 100%;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 1rem;
	}
	/* Ikona równo z PIERWSZYM wierszem tekstu - adres łamie się na dwa wiersze
	   i wyśrodkowana pinezka siadała między nimi. */
	.ab-stopka__kontakt li { align-items: flex-start; }
	.ab-stopka__kontakt .ab-ikona-plik { margin-top: 2px; }

	.ab-stopka__linki { justify-content: flex-start; }
	.ab-stopka__social { justify-content: flex-start; }
	.ab-koniec__prawa { justify-content: flex-start; }
}

@media (max-width: 700px) {
	/* Nazwy profilu znikają z WIDOKU, nie z dostępności - nazwę niesie
	   `aria-label` na odnośniku (patrz `ab_stopka()`). */
	.ab-stopka__nazwa { display: none; }
	.ab-stopka__social { gap: 0.75rem; }
	.ab-landing .ab-stopka__social a {
		width: 44px;
		height: 44px;
		justify-content: center;
		gap: 0;
	}
}

/* -----------------------------------------------------------------------------
   5. OTWARTE MENU - warstwa, nie nakładka na tekst hero (uwaga z 2026-08-25)
   --------------------------------------------------------------------------
   Panel rozwijany LEŻY na treści hero i inaczej być nie może: belka jest
   `position: absolute` na zdjęciu, więc nie ma czego rozepchnąć w dół. Problem
   nie polegał na samym nachodzeniu, tylko na tym, że nachodzenie nie było
   **widoczne jako intencja** - biały panel siadał wprost na białych napisach
   hero i całość czytała się jak usterka renderowania.

   Stąd przyciemnienie tła na czas wyboru: dokładnie ten sam zabieg, co przy
   banerze zgód na projekcie krawca. Hero cofa się na drugi plan, panel zostaje
   jedyną rzeczą do kliknięcia, a kliknięcie w przyciemnienie zamyka menu
   (obsługuje to nasłuch „klik poza belką" w `landing.js`).

   ⚠ Podniesienie `z-index` belki na czas otwarcia jest częścią tego samego:
   pływający przycisk telefonu ma 45 i bez tego sterczałby NAD przyciemnieniem,
   czyli dawałoby się go kliknąć zza zasłony.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.ab-belka--js.is-otwarta { z-index: 60; }

	.ab-belka--js.is-otwarta::after {
		content: '';
		position: fixed;
		inset: 0;
		z-index: -1;
		background: rgb(12 16 40 / 55%);
		-webkit-backdrop-filter: blur(2px);
		backdrop-filter: blur(2px);
	}

	/* Panel musi być NIEPRZEZROCZYSTY i wyraźnie odklejony od tła - sam biały
	   prostokąt bez cienia zlewał się z jasnymi partiami zdjęcia. */
	.ab-belka--js .ab-nawigacja {
		background: #fff;
		box-shadow: 0 24px 48px rgb(12 16 40 / 35%);
	}
}

/* -----------------------------------------------------------------------------
   6. PASEK LICZB - nieparzysta pozycja nie zostaje w lewej kolumnie
   --------------------------------------------------------------------------
   Pozycji jest PIĘĆ, a kolumny na telefonie dwie, więc ostatnia („Yanosik")
   siadała sama w lewej kolumnie i cała sekcja wyglądała na przekrzywioną -
   przy wyśrodkowanym tytule i podtytule tym bardziej. Ostatnia pozycja, o ile
   jest nieparzysta, rozciąga się na oba łamy i wraca na oś strony.

   `:last-child:nth-child(odd)` sprawdza OBA warunki naraz, więc reguła sama się
   wyłączy, gdyby pozycji było kiedyś sześć - a nie zostawi wtedy rozciągniętej
   na pół ekranu ostatniej karty.
   -------------------------------------------------------------------------- */

@media (max-width: 620px) {
	.ab-liczby__poz:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* -----------------------------------------------------------------------------
   7. PŁYWAJĄCY PRZYCISK NIE ZASŁANIA SEKCJI KONTAKTOWEJ
   --------------------------------------------------------------------------
   Uzasadnienie w `landing.js` przy `ab-koniec-widoczny`. Tu tylko przejście:
   przycisk gaśnie i przestaje łapać dotknięcia, zamiast znikać skokiem.

   ⚠ `visibility` i `pointer-events` MUSZĄ jechać razem z `opacity`. Sama
   przezroczystość zostawia klikalny, niewidzialny prostokąt nad formularzem -
   czyli dokładnie ten błąd, który miał zniknąć.
   -------------------------------------------------------------------------- */

.ab-landing .ab-fab {
	transition: background-color 0.2s, opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

html.ab-koniec-widoczny .ab-landing .ab-fab {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: scale(0.8);
}

/* =============================================================================
   RUNDA 2026-08-25 (II) - kolory przycisków, numer floty
   ========================================================================== */

/* -----------------------------------------------------------------------------
   8. KOLOR NAPISU NA PRZYCISKACH ERY STRONY GŁÓWNEJ
   --------------------------------------------------------------------------
   Wypełnienie przycisku z makiety (węzeł `646:3650`) zmierzone z eksportu:
   **#5768C2**, czyli dokładnie `--ab-fiolet`. Token był dobry - psuł się KOLOR
   NAPISU.

   To ta sama pułapka, którą opisuje blok „PRZYCISKI: ODZYSKANIE KOLORU OD
   `a:link`" wyżej: Elementor wypisuje `.elementor-kit-342 a:link { color: unset }`
   o wadze (0,2,1), a `unset` dla właściwości dziedziczonej znaczy `inherit`.
   Tamten blok objął jednak wyłącznie klasy z ery Mechaniki
   (`.ab-przycisk-duzy`, `.ab-przycisk-obrys`, `.ab-przycisk-proces`)
   i pominął starsze `.ab-przycisk--glowny` / `.ab-przycisk--obrys`.

   ⚠ **Objaw był mylący, bo połowa przycisków wyglądała dobrze - przez przypadek.**
   Zmierzone na żywym stagingu: „Umów diagnozę" w granatowym panelu miało napis
   `rgb(255,255,255)`, bo dziedziczyło biel z ciemnego tła; „Umów wizytę" w białej
   karcie hero dziedziczyło `rgb(20,23,46)` i było ciemnym napisem na fiolecie.
   Ta sama klasa, dwa różne kolory - różnicę robiło otoczenie, nie komponent.
   -------------------------------------------------------------------------- */

.ab-landing .ab-przycisk--glowny:any-link,
.ab-landing .ab-przycisk--glowny { color: #fff; }
.ab-landing .ab-przycisk--glowny:any-link .ab-ikona { color: #fff; }

/* Wariant obrysowy na JASNYM tle: napis i obrys w kolorze marki. Na ciemnym pasie
   (`.ab-panel`) obowiązuje wariant biały - dlatego zawężone przez `:not()`,
   a nie nadpisane niżej kolejnością. */
.ab-landing .ab-przycisk--obrys:any-link:not(.ab-panel .ab-przycisk--obrys) {
	color: var(--ab-fiolet);
	border-color: var(--ab-fiolet);
}
.ab-landing .ab-przycisk--obrys:any-link:not(.ab-panel .ab-przycisk--obrys):hover {
	background: var(--ab-fiolet);
	color: #fff;
}

/* -----------------------------------------------------------------------------
   9. NUMER BEZPOŚREDNI PRZY OBSŁUDZE FLOT
   --------------------------------------------------------------------------
   Jedyne miejsce w witrynie z numerem innym niż `58 672 24 57` (decyzja klienta
   2026-08-25). Ma się czytać jako dopisek do karty, a nie jako drugie CTA -
   stąd rozmiar tekstu, a nie przycisk.
   -------------------------------------------------------------------------- */

.ab-kontakt-flota {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	line-height: 1.6;
}
.ab-kontakt-flota .ab-ikona-plik { width: 20px; height: 20px; flex: none; }
.ab-landing .ab-kontakt-flota a { color: inherit; text-decoration: underline; }

/* Na ciemnym panelu zakładek dopisek musi być czytelny, ale nie krzyczeć.

   ⚠ Ikona jedzie jako `<img src=…svg>` (patrz `ab_ikona_plik()`), więc NIE
   dziedziczy `currentColor` - plik ma na sztywno `stroke="#5768C2"`. Na granacie
   wybielamy ją filtrem, tak samo jak ikony w przyciskach. */
.ab-panel .ab-kontakt-flota { color: var(--ab-na-ciemnym-slaby); margin-top: 1rem; }
.ab-landing .ab-panel .ab-kontakt-flota a { color: #fff; }
.ab-panel .ab-kontakt-flota .ab-ikona-plik { filter: brightness(0) invert(1); }

.ab-karta-kontaktu .ab-kontakt-flota { color: var(--ab-tusz-slaby); }
.ab-landing .ab-karta-kontaktu .ab-kontakt-flota a { color: var(--ab-tusz); }

/* =============================================================================
   STRONA GŁÓWNA 1:1 Z MAKIETY `Brudniewicz_Home` (646:3635) - 2026-08-25
   =============================================================================
   Sekcje własne strony głównej powstały ZANIM plik Figmy stał się dostępny, więc
   stały na przybliżonej, mniejszej skali (tytuły kafli 1rem, opisy 0.8125rem).
   Mechanika została w międzyczasie przebudowana 1:1 (H1 76/1.2, H4 25/1.3,
   Body 16/1.6, kontener 1600). Ten blok domyka różnicę.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   10. PANEL „USŁUGI" - węzeł `I646:3679;646:5059` (Component 23)
   --------------------------------------------------------------------------
   Panel jest SZERSZY niż kontener treści: 1877 px wobec 1600, czyli wypuszczony
   poza kolumnę. Trzy warstwy: zdjęcie → gradient 107,57° → biała karta.
   -------------------------------------------------------------------------- */

.ab-zakladki { display: flex; flex-direction: column; gap: 56px; }

/* Zakładki: 76 px wysokości i typografia z makiety zamiast dawnych 15 px. */
.ab-zakladki__paski {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
}
.ab-landing .ab-zakladki__pasek {
	height: 76px;
	padding: 0 24px;
	font-size: 20px;
	line-height: 1.5;
	font-weight: 500;
	border: 0;
	border-bottom: 3px solid rgb(18 20 43 / 10%);
	background: none;
	color: var(--ab-tusz-slaby);
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s;
}
.ab-landing .ab-zakladki__pasek.is-aktywny {
	color: var(--ab-fiolet);
	border-bottom-color: var(--ab-fiolet);
	font-weight: 600;
	background: none;
}

/* --- Panel ---------------------------------------------------------------- */

.ab-panel {
	position: relative;
	/* 1877 / 1600 - panel wychodzi poza kolumnę treści dokładnie tak, jak
	   w makiecie. Ogranicznik `100vw - 2rem` trzyma go w oknie, gdy kontener jest
	   już równy jego szerokości. */
	width: min(calc(100% * 1877 / 1600), calc(100vw - 2rem));

	/* ⚠ **`margin-inline: auto` NIE centruje elementu szerszego od rodzica** -
	   marginesy automatyczne nie schodzą poniżej zera, więc panel przywierał do
	   lewej krawędzi kontenera i całą nadwyżkę (277 px) wypuszczał w prawo.
	   Zmierzone przy oknie 1960 px: **97 px poziomego przewijania całej strony**.
	   Widać to dopiero powyżej ~1640 px, bo niżej kontener nie jest jeszcze
	   przycięty do 1600 i ogranicznik `100vw` załatwia sprawę - stąd wcześniejsze
	   pomiary „zero przewijania" przy 390-1600 px były prawdziwe i niepełne.
	   Przesunięcie o połowę własnej szerokości rozkłada nadwyżkę na oba boki,
	   dokładnie jak w makiecie (panel wyśrodkowany w ramce 1920). */
	left: 50%;
	transform: translateX(-50%);
	/* ⚠ **`min-height`, nie `height`.** Makieta ma panel 1877 × 930 z kartą
	   wyśrodkowaną w pionie - ale karta jest wtedy szeroka na 1009 px. Przy
	   węższym oknie ten sam tekst zawija się na więcej wierszy i karta ROŚNIE:
	   zmierzone przy 1601 px panelu - karta 1011 px przy panelu 930 px, czyli
	   81 px treści wycinał `overflow: hidden`. Karta musi więc stać w normalnym
	   przepływie i wyznaczać wysokość panelu, a 930 px zostaje dolną granicą,
	   żeby przy pełnej szerokości kadr zdjęcia był taki jak w projekcie. */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	min-height: 930px;
	padding: 50px 2.67%;
	overflow: hidden;
	border-radius: 64px;
	background: var(--ab-granat);
	isolation: isolate;
}
.ab-panel[hidden] { display: none; }

.ab-panel__tlo { position: absolute; inset: 0; z-index: 0; }
.ab-landing .ab-panel__foto {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

/* Gradient LEŻY NA zdjęciu i to on robi czytelne tło pod białą kartą - bez niego
   karta siada na przypadkowej jasności kadru. Kąt i przystanki 1:1 z makiety. */
.ab-panel__tlo::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: linear-gradient(107.57deg, rgb(32 41 86) 12.096%, rgb(32 41 86 / 0%) 64.562%);
}

.ab-panel__karta {
	position: relative;
	/* 100 − 2.67 − 43.59 = 53.74 % - dokładnie szerokość karty z makiety,
	   liczona od krawędzi panelu, nie od jego paddingu. */
	width: calc(100% * 53.74 / 94.66);
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 42px;
	padding: 50px;
	background: #fff;
	border-radius: 36px;
	/* ⚠ `.ab-panel` dziedziczy biel z reguły bazowej (panel jest ciemny). Karta
	   jest biała, więc MUSI jawnie wrócić do atramentu - inaczej każdy nowy
	   element w karcie będzie białym tekstem na białym tle. */
	color: #000;
}

.ab-panel__naglowek { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }

/* Plakietka działu: 13 px SemiBold wersalikami w obrysie 1 px - nie 11 px
   jak w pierwszej wersji strony głównej. */
.ab-landing .ab-panel .ab-plakietka-solo {
	padding: 8px 10px;
	border: 1px solid #111113;
	border-radius: 1000px;
	font-size: 13px;
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #111113;
}

.ab-landing .ab-panel__tytul { font-size: 31px; line-height: 1.3; font-weight: 600; color: #000; margin: 0; }
.ab-landing .ab-panel__opis  { font-size: 20px; line-height: 1.5; color: #000; max-width: none; }

.ab-panel__listy { display: flex; gap: 61px; align-items: flex-start; }
.ab-chipy--panel { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; margin: 0; }

/* ⚠ Plakietki usług to DOKŁADNIE `.ab-chip` z Mechaniki - ta sama geometria,
   ten sam cień. Powtórzenie reguł dałoby dwa miejsca do poprawiania. Tutaj
   tylko kierunek: w panelu ikona stoi OBOK tekstu, na Mechanice nad nim. */
.ab-chipy--panel .ab-chip {
	flex-direction: row;
	align-items: center;
	gap: 8px;
	padding: 10px 24px 10px 10px;
}

/* Przyciski: prawy dolny róg panelu, jeden pod drugim, wyrównane do prawej.
   ⚠ Makieta ma tu pozycję procentową policzoną dla ramki 1877 × 930 - przy innej
   wysokości panelu procenty się rozjeżdżają, więc trzymamy je marginesem. */
.ab-panel__cta {
	position: absolute;
	right: 2.46%;
	bottom: 40px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 30px;
	margin: 0;
}
.ab-panel .ab-przycisk-obrys { background: #fff; }

/* --- Panel „Usługi" na węższych ekranach ---------------------------------- */

@media (max-width: 1400px) {
	.ab-panel { min-height: 0; border-radius: 40px; padding: 40px; }
	/* Poniżej 1400 px karta zajmuje całą szerokość panelu, a przyciski wracają
	   do przepływu pod nią - nie ma już na boku miejsca, w którym mogłyby stać
	   bez zachodzenia na kartę. */
	.ab-panel__karta {
		width: 100%;
		padding: clamp(1.5rem, 3vw, 50px);
		gap: clamp(1.5rem, 3vw, 42px);
	}
	.ab-panel__cta { position: static; align-items: flex-start; margin-top: 30px; }
	.ab-panel__listy { gap: clamp(1rem, 3vw, 61px); }
	.ab-landing .ab-panel__tytul { font-size: clamp(1.25rem, 2.4vw, 31px); }
	.ab-landing .ab-panel__opis { font-size: clamp(1rem, 1.6vw, 20px); }
	.ab-landing .ab-zakladki__pasek { height: 60px; font-size: 1rem; padding-inline: 16px; }
	.ab-zakladki__paski { gap: 8px 20px; }
	.ab-zakladki { gap: clamp(1.5rem, 4vw, 56px); }
}

@media (max-width: 900px) {
	.ab-panel { border-radius: 28px; padding: 20px; }
	.ab-panel__cta { width: 100%; }
	/* ⚠ `flex-direction: column` na kolumnach plakietek wymaga resetu bazy -
	   `.ab-chip` nie ma `flex: 1 0 0`, ale kontener owszem: bez `flex-basis: auto`
	   obie kolumny zapadłyby się do zerowej wysokości. */
	.ab-panel__listy { flex-direction: column; gap: 16px; }
	.ab-chipy--panel { flex: 0 0 auto; width: 100%; }
	.ab-panel__cta .ab-przycisk-duzy,
	.ab-panel__cta .ab-przycisk-obrys { width: 100%; }
}

@media (max-width: 700px) {
	/* Panel na pełną szerokość ekranu - ta sama zasada, co przy hero i stopce. */
	.ab-sekcja--uslugi > .ab-kontener { width: 100%; }
	.ab-panel { width: 100%; border-radius: 0; }
	.ab-sekcja--uslugi .ab-naglowek { padding-inline: 1.25rem; }
	.ab-zakladki__paski { padding-inline: 1.25rem; }
}

/* --- Zakładki: własne tło i lustrzany układ ------------------------------- */
/*
   ⚠ **Każda zakładka ma w makiecie WŁASNY gradient i własną stronę karty.**
   To nie jest jeden panel z podmienianym zdjęciem - to cztery warianty
   komponentu `646:5052`, każdy z innym kolorem przesłony i innym układem.
   Kąty, kolory i przystanki 1:1 z Dev Mode, wariant po wariancie:
   mechanika `646:5053`, blacharnia `646:5060`, floty `646:5074`,
   szkody `646:5067`.

   Kąt rozstrzyga o czytelności: przesłona ma leżeć POD białą kartą, więc
   w wariantach odbitych (karta po prawej) gradient idzie z drugiej strony.
*/
.ab-panel--mechanika .ab-panel__tlo::after {
	background-image: linear-gradient(107.57deg, rgb(32 41 86) 12.096%, rgb(32 41 86 / 0%) 64.562%);
}
.ab-panel--blacharnia .ab-panel__tlo::after {
	background-image: linear-gradient(258.82deg, rgb(177 183 228) 21.002%, rgb(177 183 228 / 0%) 73.048%);
}
.ab-panel--floty .ab-panel__tlo::after {
	background-image: linear-gradient(113.37deg, rgb(168 143 160) 24.494%, rgb(168 143 160 / 0%) 71.837%);
}
.ab-panel--szkody .ab-panel__tlo::after {
	background-image: linear-gradient(258.82deg, rgb(255 0 72 / 60%) 21.002%, rgb(177 183 228 / 0%) 73.048%);
}

/* Lustro: karta po prawej, przyciski po lewej - blacharnia i likwidacja szkód. */
.ab-panel--odbicie { align-items: flex-end; }
.ab-panel--odbicie .ab-panel__cta { right: auto; left: 2.46%; align-items: flex-start; }

/* --- Plakietka z rozwijanym opisem - `Component 51`-`58` ------------------ */
/*
   ⚠ **Kolumny idą tu SIATKĄ, a nie flexem, i to jest warunek działania.**
   Plakietka o szerokości zawartości bierze `max-content` swojego najszerszego
   dziecka - a rozwinięty opis to jedno długie zdanie, więc kolumna rozpychałaby
   się do jego szerokości i panel wyjeżdżałby poza kadr. Siatka nadaje kolumnie
   znaną szerokość, więc opis ma się gdzie zawinąć.

   Skutek uboczny: zwinięte plakietki są tu szersze niż w makiecie (wypełniają
   kolumnę, zamiast obejmować tekst). Strzałki stoją za to w jednej linii,
   tak jak w FAQ na tej samej stronie.
*/
.ab-panel--szkody .ab-panel__listy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ab-panel--szkody .ab-chipy--panel { align-items: stretch; }

.ab-chipy--panel .ab-chip--rozwijany { padding: 0; overflow: hidden; }
.ab-chip--rozwijany .ab-zwijak { width: 100%; }

.ab-zwijak__glowa {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px;
	cursor: pointer;
	list-style: none;
}
/* Trójkąt `<details>` chowamy tak samo jak w FAQ - strzałka jest osobną ikoną. */
.ab-zwijak__glowa::-webkit-details-marker { display: none; }
.ab-zwijak__tytul { flex: 1 1 auto; }
.ab-chip--rozwijany .ab-ikona-plik--chevron {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	margin-left: 12px;
	transition: transform 0.2s ease;
}
.ab-zwijak[open] .ab-ikona-plik--chevron { transform: rotate(180deg); }

/* Opis: wcięcie 49 px stawia go pod tekstem tytułu, a nie pod ikoną. */
.ab-landing .ab-zwijak__opis {
	margin: 0;
	padding: 10px 20px 10px 49px;
	font-size: 16px;
	line-height: 1.6;
	color: #000;
}

/* ⚠ **Ta kwerenda MUSI stać po regule bazowej, nie w bloku 900 px wyżej.**
   Selektory mają tę samą specyficzność (0,2,0), więc przy remisie rozstrzyga
   kolejność w pliku - wersja wpisana wyżej przegrywała z siatką dwukolumnową
   i na telefonie zostawały dwie kolumny po 141 px (zmierzone w ramce 390 px).
   `flex-direction: column` z tamtego bloku siatki nie dotyczy. */
@media (max-width: 900px) {
	.ab-panel--szkody .ab-panel__listy { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.ab-chip--rozwijany .ab-ikona-plik--chevron { transition: none; }
}

/* -----------------------------------------------------------------------------
   11. „POZOSTAŁE USŁUGI" - akordeon poziomy, węzeł `646:3685`
   --------------------------------------------------------------------------
   Proporcje z makiety: otwarty 376, zwinięty 274, wysokość 501, odstęp 32.
   Zapisujemy je jako `flex-grow`, nie jako piksele - suma 376 + 4 × 274 + 4 × 32
   to dokładnie 1600, więc przy pełnej szerokości wychodzą te same liczby co
   w projekcie, a przy węższym oknie proporcja zostaje zachowana.

   ⚠ Zwinięty kafel **nie chowa treści `display: none`** tylko ją przycina -
   `hidden` na `.ab-kafel__tresc` zdejmuje ją z drzewa dostępności, a widoczność
   steruje CSS. Dzięki temu czytnik ekranu dostaje ten sam stan, co oko.
   -------------------------------------------------------------------------- */

.ab-kafle {
	display: flex;
	gap: 32px;
	align-items: stretch;
	margin: 0;
}

.ab-kafel {
	flex: 274 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	min-height: 501px;
	padding: 30px;
	background: #fff;
	border: 0;
	border-radius: 24px;
	transition: flex-grow 0.35s ease, background-color 0.25s ease;
}
.ab-kafel--otwarty { flex-grow: 376; background: var(--ab-tlo-krok); }

/* Przycisk niesie ikonę i nazwę; `<h3>` zostaje wyłącznie jako struktura. */
.ab-landing .ab-kafel__tytul { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.ab-landing .ab-kafel__przelacznik {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 60px;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
	color: inherit;
	/* ⚠ Tytuł kafla NIE zawijał się, bo `white-space: nowrap` dziedziczy się
	   z reguły Elementora na `button`. „Door-to-door i pomoc w dostarczeniu
	   pojazdu" mierzyło 556 px w kaflu o 277 px i wychodziło na sąsiedni kafel,
	   gdzie zasłaniało je jego białe tło - wyglądało to na ucięty tekst, a nie
	   na brak zawijania. Klasa komponentu (0,2,0) bije regułę na elemencie. */
	white-space: normal;
}
.ab-kafel__ikona { width: auto; height: 100px; flex: none; }

/* ⚠ `align-items: flex-start` na przełączniku sprawia, że napis dostaje szerokość
   TREŚCI, nie kolumny - „Door-to-door i pomoc w dostarczeniu pojazdu" mierzyło
   556 px w kaflu o 277 px i wychodziło poza kartę zamiast się zawinąć.
   `align-self: stretch` przywraca szerokość kolumny, a `min-width: 0` pozwala
   długiemu słowu złamać się zamiast rozpychać kafel. */
.ab-landing .ab-kafel__nazwa {
	align-self: stretch;
	min-width: 0;
	white-space: normal;
	font-size: 25px;
	line-height: 1.3;
	font-weight: 600;
	color: #000;
	overflow-wrap: anywhere;
}

.ab-kafel__tresc { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.ab-kafel__tresc[hidden] { display: none; }
.ab-landing .ab-kafel__opis { font-size: 16px; line-height: 1.6; color: #000; }

/* Wariant przycisku obrysowego z makiety kafla: 60 px, tekst 16 px. */
.ab-landing .ab-przycisk-obrys--maly { height: 60px; font-size: 16px; padding-inline: 20px; }

/* ⚠ Poniżej 1100 px akordeon poziomy przestaje mieć sens: to, co oszczędzał -
   szerokość - jest wtedy zasobem najrzadszym, a zwinięty kafel na 1/5 ekranu
   telefonu jest paskiem z uciętym tytułem. Kafle idą w kolumnę i WSZYSTKIE są
   rozwinięte, więc skrypt nie ma czym sterować. */
@media (max-width: 1100px) {
	.ab-kafle { flex-wrap: wrap; gap: 20px; }
	.ab-kafel { flex: 1 1 calc(50% - 10px); min-height: 0; }
	.ab-kafel--otwarty { flex-grow: 1; }
	.ab-landing .ab-kafel__przelacznik { gap: 24px; cursor: default; }
	.ab-kafel__tresc[hidden] { display: flex; }
}

@media (max-width: 700px) {
	.ab-kafel { flex: 1 1 100%; padding: 24px; }
	.ab-kafel__ikona { height: 72px; }
	.ab-landing .ab-kafel__nazwa { font-size: 20px; }
}

/* -----------------------------------------------------------------------------
   12. PORÓWNANIE „Standardowy warsztat vs. Auto Brudniewicz" - węzeł `646:3691`
   --------------------------------------------------------------------------
   Dwie kolumny po 730 px z przerwą 114 px na plakietkę `vs.` (730 + 114 + 730
   = 1574). Ikony mają w makiecie **64 px**, nie 20 - i są osobnymi plikami
   (`octagon-x` przygaszony `#B1B7E4`, `circle-check-64` biały), bo obie stoją
   na granacie i muszą się różnić WAGĄ, a nie tylko kształtem.
   -------------------------------------------------------------------------- */

.ab-porownanie {
	display: grid;
	grid-template-columns: 730fr 114fr 730fr;
	align-items: start;
	column-gap: 0;
	row-gap: 0;
}

.ab-landing .ab-porownanie__naglowek {
	font-size: 31px;
	line-height: 1.3;
	font-weight: 600;
	padding-bottom: 48px;
}

.ab-porownanie__wiersz {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	align-items: center;
	padding-block: 30px;
	border-top: 1px solid rgb(255 255 255 / 12%);
}
.ab-porownanie__wiersz:first-of-type { border-top: 0; }

.ab-porownanie__strona { display: flex; align-items: flex-start; gap: 20px; }
.ab-porownanie__strona .ab-ikona-plik { width: 64px; height: 64px; flex: none; }

.ab-landing .ab-porownanie__strona h3 { font-size: 25px; line-height: 1.3; font-weight: 600; margin-bottom: 10px; }
.ab-landing .ab-porownanie__strona p  { font-size: 16px; line-height: 1.6; }

/* Plakietka `vs.` - żółta, wielkości nagłówka pozycji, wyśrodkowana w przerwie. */
.ab-landing .ab-porownanie__vs {
	grid-column: 2;
	justify-self: center;
	font-size: 34px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--ab-zolty);
	margin: 0;
}

@media (max-width: 1100px) {
	.ab-porownanie { grid-template-columns: 1fr; }
	.ab-porownanie__wiersz { grid-template-columns: 1fr; gap: 16px; padding-block: 24px; }
	.ab-landing .ab-porownanie__vs { grid-column: 1; justify-self: start; font-size: 24px; }
	.ab-landing .ab-porownanie__naglowek { padding-bottom: 16px; }
	.ab-porownanie__strona .ab-ikona-plik { width: 48px; height: 48px; }
	.ab-landing .ab-porownanie__strona h3 { font-size: 20px; }
}

/* -----------------------------------------------------------------------------
   13. PROCES - karuzela z węzła `646:3757`, wspólna dla obu podstron
   --------------------------------------------------------------------------
   Kroki po 550 px z odstępem 80, tor przewijany w poziomie, po bokach wygaszenie
   po 250 px, pod spodem pasek postępu 1056 × 10.

   ⚠ Przewijanie robi NATYWNY `overflow-x` ze `scroll-snap`, a nie skrypt
   przestawiający `transform`. Konsekwencje są trzy i wszystkie na plus:
   działa gest przesunięcia palcem, działa `Tab` do kolejnego kroku (przeglądarka
   sama dosuwa fokus) i działa bez JavaScriptu. Skrypt liczy WYŁĄCZNIE szerokość
   segmentu na pasku postępu.
   -------------------------------------------------------------------------- */

.ab-karuzela { display: flex; flex-direction: column; gap: 60px; }

.ab-karuzela__okno { position: relative; }

.ab-karuzela__tor {
	display: flex;
	gap: 80px;
	margin: 0;
	padding: 0 0 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
.ab-karuzela__tor::-webkit-scrollbar { display: none; }

.ab-karuzela__krok {
	flex: 0 0 550px;
	max-width: 100%;
	display: flex;
	align-items: flex-start;
	gap: 38px;
	scroll-snap-align: start;
}

.ab-landing .ab-karuzela__numer {
	flex: none;
	font-size: 125px;
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: -0.04em;
	color: var(--ab-tusz);
}

.ab-karuzela__tresc { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; }
.ab-landing .ab-karuzela__tytul { font-size: 25px; line-height: 1.3; font-weight: 600; color: #000; }
.ab-landing .ab-karuzela__opis  { font-size: 16px; line-height: 1.6; color: var(--ab-tusz-slaby); }

/* Wygaszenie krawędzi - 250 px z każdej strony, dokładnie jak w makiecie.
   ⚠ `pointer-events: none` jest OBOWIĄZKOWE: bez tego dwa prostokąty po 250 px
   przykrywają tor i zabierają przewijanie palcem przy obu krawędziach, czyli
   dokładnie tam, gdzie kciuk ląduje najczęściej. */
.ab-karuzela__mgla {
	position: absolute;
	top: 0;
	bottom: 10px;
	width: 250px;
	max-width: 22%;
	pointer-events: none;
}
.ab-karuzela__mgla--lewa  { left: 0;  background: linear-gradient(to right, var(--ab-tlo) 0%, rgb(255 255 255 / 0%) 100%); }
.ab-karuzela__mgla--prawa { right: 0; background: linear-gradient(to left,  var(--ab-tlo) 0%, rgb(255 255 255 / 0%) 100%); }

/* Pasek postępu: 1056 × 10, segment = 1 / liczba kroków. Szerokość segmentu idzie
   ze zmiennej `--ab-krokow` ustawionej w PHP, żeby dołożenie piątego kroku nie
   wymagało ruszania arkusza. */
.ab-karuzela__pasek {
	position: relative;
	width: min(100%, 1056px);
	height: 10px;
	margin-inline: auto;
	border-radius: 999px;
	background: rgb(18 20 43 / 8%);
	overflow: hidden;
}
.ab-karuzela__segment {
	position: absolute;
	inset-block: 0;
	left: 0;
	width: calc(100% / var(--ab-krokow, 4));
	border-radius: 999px;
	background: var(--ab-granat);
	transition: transform 0.2s ease;
}

@media (max-width: 1100px) {
	.ab-karuzela { gap: 40px; }
	.ab-landing .ab-karuzela__numer { font-size: 96px; }
	.ab-karuzela__krok { flex-basis: 460px; gap: 24px; }
	.ab-karuzela__tor { gap: 48px; }
}

@media (max-width: 700px) {
	/* Jeden krok na kadr - przy węższym ekranie dwa kroki obok siebie znaczą dwa
	   ucięte kroki. Wygaszenie krawędzi schodzi do 15 %, żeby nie zjadało treści. */
	.ab-karuzela__krok { flex-basis: 100%; gap: 16px; }
	.ab-karuzela__tor { gap: 24px; }
	.ab-landing .ab-karuzela__numer { font-size: 64px; }
	.ab-landing .ab-karuzela__tytul { font-size: 20px; }
	.ab-karuzela__tresc { padding-top: 8px; }
	.ab-karuzela__mgla { max-width: 15%; }
}

/* -----------------------------------------------------------------------------
   14. OPINIE - pasek oceny i karty w skali makiety (`646:3758`)
   --------------------------------------------------------------------------
   Karty stoją w trzech łamach po 512 px (`columns`), a nie w siatce - wysokości
   są różne i wyrównanie do wiersza zrobiłoby dziury, dokładnie tak jak
   w galerii na Mechanice.
   -------------------------------------------------------------------------- */

.ab-ocena {
	gap: 24px 32px;
	padding: 30px;
	border: 0;
	border-radius: 24px;
	box-shadow: 0 12px 30px rgb(20 23 46 / 7%);
	margin-bottom: 60px;
}
.ab-landing .ab-ocena__wartosc { font-size: 64px; line-height: 1; font-weight: 700; }
.ab-ocena__logo { display: inline-flex; align-items: center; }
.ab-ocena__logo .ab-logo__obraz { height: 44px; width: auto; }
.ab-ocena__gwiazdki .ab-ikona { width: 34px; height: 34px; }
.ab-landing .ab-ocena__liczba { font-size: 16px; line-height: 1.6; color: var(--ab-tusz-slaby); }

.ab-opinie { columns: 3 300px; column-gap: 32px; }

.ab-opinia {
	break-inside: avoid;
	margin: 0 0 32px;
	padding: 30px;
	background: #fff;
	border-radius: 24px;
}
.ab-landing .ab-opinia blockquote { margin: 0 0 24px; font-size: 16px; line-height: 1.6; color: #000; }

/* Autor po lewej, znaczek Google przy prawej krawędzi karty - jak w makiecie. */
.ab-opinia figcaption { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.ab-opinia__kto { display: grid; }
.ab-landing .ab-opinia figcaption strong { font-size: 16px; line-height: 1.6; font-weight: 600; color: #000; }
.ab-landing .ab-opinia figcaption span { font-size: 16px; line-height: 1.6; color: var(--ab-tusz-slaby); }
.ab-opinia figcaption .ab-ikona-plik { width: 32px; height: 32px; flex: none; }

@media (max-width: 1100px) {
	.ab-opinie { columns: 2 260px; column-gap: 20px; }
	.ab-opinia { margin-bottom: 20px; padding: 24px; }
	.ab-landing .ab-ocena__wartosc { font-size: 44px; }
	.ab-ocena { padding: 20px; gap: 16px 20px; margin-bottom: 40px; }
	.ab-ocena__logo .ab-logo__obraz { height: 34px; }
}

@media (max-width: 700px) {
	.ab-opinie { columns: 1; }
	.ab-ocena { width: 100%; justify-content: flex-start; }
	.ab-landing .ab-ocena .ab-przycisk-duzy { width: 100%; }
}

/* -----------------------------------------------------------------------------
   15. FAQ - ikona ✕ przy pozycji otwartej (`646:3876`)
   --------------------------------------------------------------------------
   Makieta zamienia strzałkę na krzyżyk dopiero po rozwinięciu. Robimy to obrotem
   istniejącego szewronu o 45°, a nie drugim plikiem: jeden zasób mniej, a przy
   okazji dostajemy płynne przejście między stanami.
   -------------------------------------------------------------------------- */

/* ⚠ Strzałkę rysuje `summary::after` (obrócony kwadrat z dwoma bokami), a nie
   plik ikony - dlatego krzyżyk to KOLEJNY obrót tego samego pseudo-elementu,
   nie podmiana zasobu. Reguła `[open] summary::after` z wcześniejszego bloku
   ma tę samą specyficzność (0,2,2), więc rozstrzyga kolejność w pliku. */
.ab-landing .ab-faq__poz summary::after { transition: transform 0.2s ease; }
.ab-landing .ab-faq__poz[open] summary::after { transform: rotate(-45deg) translateY(2px); }

/* Skala FAQ 1:1 z makiety: pytanie 20/1.5, odpowiedź 16/1.6, karta 24 px. */
.ab-faq { gap: 24px; }
.ab-faq__poz { border: 0; border-radius: 24px; padding: 0 30px; }
.ab-landing .ab-faq__poz summary { font-size: 20px; line-height: 1.5; font-weight: 600; padding-block: 24px; }
.ab-landing .ab-faq__tresc { font-size: 16px; line-height: 1.6; color: var(--ab-tusz-slaby); padding-bottom: 24px; }

/* -----------------------------------------------------------------------------
   16. KARTY KONTAKTU I „BEZ UKRYTYCH KOSZTÓW" - skala 1:1 (`646:3888`)
   --------------------------------------------------------------------------
   Trzy karty po 512,67 px (3 × 512,67 + 2 × 32 = 1602), padding 30, promień 24,
   tytuł 25/1.3, opis 20/1.5, przycisk 60 px.
   -------------------------------------------------------------------------- */

.ab-karty-kontaktu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.ab-karta-kontaktu {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	min-height: 280px;
	padding: 30px;
	background: #fff;
	border: 0;
	border-radius: 24px;
}
.ab-landing .ab-karta-kontaktu h3 { font-size: 25px; line-height: 1.3; font-weight: 600; color: #000; }
.ab-landing .ab-karta-kontaktu p  { font-size: 20px; line-height: 1.5; color: #000; }
/* Przycisk dosunięty do dołu karty niezależnie od długości opisu. */
.ab-karta-kontaktu .ab-przycisk-obrys,
.ab-karta-kontaktu .ab-przycisk { margin-top: auto; }

.ab-landing .ab-koszty h2 { font-size: 31px; line-height: 1.3; }
.ab-landing .ab-koszty p  { font-size: 20px; line-height: 1.5; color: var(--ab-tusz-slaby); }
.ab-landing .ab-kontakt__telefon { font-size: 16px; line-height: 1.6; }

@media (max-width: 1100px) {
	.ab-karty-kontaktu { grid-template-columns: repeat(2, 1fr); gap: 20px; }
	.ab-karta-kontaktu { min-height: 0; padding: 24px; }
	.ab-landing .ab-karta-kontaktu p { font-size: 1rem; }
}

@media (max-width: 700px) {
	.ab-karty-kontaktu { grid-template-columns: 1fr; }
	.ab-landing .ab-karta-kontaktu h3 { font-size: 20px; }
}

/* =============================================================================
   WYRÓWNANIE DO EKSPORTU FIGMA MAKE (2026-08-25) - `BrudniewiczHome/index.tsx`
   =============================================================================
   Projektant dostarczył eksport całej strony głównej z Figma Make. To ten sam
   węzeł `646:3635`, ale **kompletny i offline**, więc jest dokładniejszym
   źródłem wartości niż odpytywanie API po jednym węźle.

   ⚠ **Eksportu NIE przepisujemy dosłownie** i jest to decyzja, nie przeoczenie.
   Renderuje on stałe płótno 1916 px skalowane przez `transform: scale()`:
   zero breakpointów, 315 pozycji bezwzględnych, zero znaczników semantycznych
   (ani jednego `<h1>`, `<section>`, `<nav>`). Na 390 px daje to skalę 0,204,
   czyli tekst 16 px → **3,3 px**. Bierzemy z niego WARTOŚCI, a układ zostaje
   nasz - płynny i semantyczny.

   Poniżej wyłącznie te miejsca, w których nasze wartości odbiegały od eksportu.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   17. BELKA - przyklejana, nie wpuszczona w hero (`Frame112` / `Frame113`)
   --------------------------------------------------------------------------
   W eksporcie belka to `sticky top-0` wewnątrz warstwy `pointer-events-none`
   rozciągniętej na całą wysokość strony. Odtwarzamy to 1:1, bo daje dokładnie
   ten efekt bez ani jednego ujemnego marginesu: pigułka leży na hero, a po
   przewinięciu zostaje przyklejona do górnej krawędzi.

   ⚠ Warstwa MUSI mieć `pointer-events: none`, a sama pigułka `auto` - inaczej
   niewidzialny prostokąt na całą stronę przechwytuje każde kliknięcie.
   -------------------------------------------------------------------------- */

/* ⚠ **`overflow-x: hidden` na `<body>` ZABIJA `position: sticky`** we wszystkich
   potomkach - i właśnie to robi Elementor Kit regułą `html, body { overflow-x:
   hidden }` (`post-342.css`). Element z `sticky` przestaje się przyklejać i po
   prostu odjeżdża z treścią; zmierzone: przy przewinięciu o 400 px belka miała
   `top: -380`, czyli zero przyklejenia.

   Zdejmujemy to WYŁĄCZNIE na naszych landingach i tylko dlatego, że brak
   poziomego przewijania mamy potwierdzony pomiarem przy 390 / 620 / 900 / 1100
   / 1440 / 1600 px - reguła Elementora jest zabezpieczeniem przed czymś, czego
   u nas nie ma. Na `<html>` zostaje, bo tam nie przeszkadza. */
body.ab-landing {
	position: relative;
	overflow-x: visible;
	overflow-y: visible;
}

.ab-belka-warstwa {
	position: absolute;
	inset: clamp(0.75rem, 1.6vw, 20px) 0 0;
	z-index: 50;
	pointer-events: none;
}

.ab-landing .ab-belka {
	position: sticky;
	top: clamp(0.75rem, 1.6vw, 20px);
	inset-inline: auto;
	width: min(100% - 2.5rem, 1622px);
	margin-inline: auto;
	pointer-events: auto;
}

/* Pigułka: 100 px wysokości, promień **24**, nie 999. Cień z eksportu. */
.ab-belka__wnetrze {
	min-height: 100px;
	padding: 11px 30px 10px;
	border: 0;
	border-radius: 24px;
	box-shadow: 0 10px 5px rgb(0 0 0 / 4%), 0 20px 12.5px rgb(0 0 0 / 10%);
}
.ab-belka .ab-logo__obraz { width: auto; height: 67px; }

.ab-nawigacja ul { gap: 60px; }
.ab-landing .ab-nawigacja a {
	font-size: 20px;
	line-height: 1.5;
	font-weight: 600;
	color: #202956;
}

/* -----------------------------------------------------------------------------
   18. HERO - claim 120 px i pasek liczb jako KARTY (`Frame106`)
   -------------------------------------------------------------------------- */

.ab-landing .ab-hero__tytul { font-size: 120px; line-height: 1.2; font-weight: 700; }

/* Pozycja paska to w eksporcie karta o promieniu 24 i paddingu 30, a nie sam
   tekst: wartość 49 px SemiBold biała, podpis 20 px Regular `#b1b7e4`. */
.ab-liczby {
	display: flex;
	gap: 30px;
	align-items: stretch;
	width: min(100%, 1328px);
	margin-inline: auto;
}
.ab-liczby__poz {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	/* ⚠ Padding poziomy 12, nie 30 jak w eksporcie. Pozycja ma 242 px, więc przy
	   30 px z każdej strony na podpis zostawały 182 px - a „wybór użytkowników"
	   potrzebuje 200 px i łamało się na trzeci wiersz mimo wymuszonego złamania
	   (odbiór 2026-08-26: „tu robimy łamanie na 2 wiersze, nie trzy"). Padding
	   nie rysuje tu żadnej karty - `.ab-liczby__poz` nie ma tła - więc jego
	   zwężenie niczego nie zmienia w wyglądzie poza szerokością wiersza tekstu. */
	padding: 30px 12px;
	border-radius: 24px;
	text-align: center;
}
.ab-landing .ab-liczby__wartosc { font-size: 49px; line-height: 1.2; font-weight: 600; color: #fff; }
.ab-landing .ab-liczby__podpis  { font-size: 20px; line-height: 1.5; color: #b1b7e4; }

/* -----------------------------------------------------------------------------
   19. KARTA WSTĘPNA (`Frame5`) - lead 25 px, plakietki 13 px
   -------------------------------------------------------------------------- */

.ab-karta-wstepna {
	align-items: flex-end;
	gap: 36px;
	padding: 30px;
	border: 0;
	border-radius: 24px;
	box-shadow: 0 25px 25px rgb(0 0 0 / 25%);
}
.ab-karta-wstepna__tekst { gap: 36px; }
.ab-landing .ab-lead { font-size: 25px; line-height: 1.5; font-weight: 600; color: #000; }
.ab-landing .ab-karta-wstepna p:not(.ab-lead) { font-size: 20px; line-height: 1.5; color: #000; }

.ab-plakietki { gap: 8px; }
.ab-landing .ab-plakietki li {
	padding: 8px 10px;
	border: 1px solid #111113;
	border-radius: 1000px;
	font-size: 13px;
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: 0;
	color: #111113;
}

/* -----------------------------------------------------------------------------
   20. RYTM SEKCJI - 100 px paddingu, 130 px między sekcjami (`Frame110`)
   -------------------------------------------------------------------------- */

.ab-landing .ab-sekcja { padding-block: 100px; }
.ab-landing .ab-sekcja--hero { padding-block: 0 0; }
.ab-landing .ab-pas { padding: 100px 136px; border-radius: 36px; gap: 100px; }

/* -----------------------------------------------------------------------------
   21. PORÓWNANIE - nagłówki kolumn 39 px (`Frame152`)
   -------------------------------------------------------------------------- */

.ab-landing .ab-porownanie__naglowek { font-size: 39px; line-height: 1.2; padding-bottom: 48px; }
.ab-landing .ab-porownanie__naglowek--oni { color: #b1b7e4; }

/* -----------------------------------------------------------------------------
   22. KARUZELA PROCESU - skala z eksportu (`StepsCarousel`)
   --------------------------------------------------------------------------
   Numer 150 px Medium, tytuł 31 px/38, opis 25 px/34, krok 550 px, odstęp 38.
   ⚠ Nieaktywne kroki mają w eksporcie `opacity: .5` - wygaszenie krawędzi to
   drugi mechanizm, nie jedyny. Bez tego karuzela czyta się jako cztery równie
   ważne kolumny zamiast jednej wybranej.
   -------------------------------------------------------------------------- */

.ab-karuzela__krok { flex-basis: 550px; gap: 38px; opacity: 0.5; transition: opacity 0.25s ease; }
.ab-karuzela__krok.is-aktywny { opacity: 1; }
.ab-landing .ab-karuzela__numer { font-size: 150px; line-height: 1; font-weight: 500; }
.ab-karuzela__tresc { gap: 10px; padding-top: 20px; }
.ab-landing .ab-karuzela__tytul { font-size: 31px; line-height: 38px; font-weight: 600; }
.ab-landing .ab-karuzela__opis  { font-size: 25px; line-height: 34px; }

/* -----------------------------------------------------------------------------
   23. PASEK OCENY (`Frame64`) - promień 24, padding 30, cień z eksportu
   -------------------------------------------------------------------------- */

.ab-ocena {
	width: min(100%, 1326px);
	padding: 30px;
	border-radius: 24px;
	box-shadow: 0 4px 3px rgb(0 0 0 / 5%), 0 10px 7.5px rgb(0 0 0 / 10%);
}

/* -----------------------------------------------------------------------------
   24. WARSTWA RESPONSYWNA DLA WARTOŚCI Z EKSPORTU
   --------------------------------------------------------------------------
   ⚠ **To jest część, której w eksporcie NIE MA** - ma on zero breakpointów
   i skaluje całe płótno `transform: scale()`. Wartości powyżej są dosłowne
   i obowiązują przy szerokości projektowej; tutaj sprowadzamy je do ekranów,
   na których ludzie faktycznie oglądają tę stronę.

   Reguły muszą stać PO bloku 17-23 i mieć klasę `.ab-landing`, bo tamte mają
   (0,2,0) - sam element albo sama klasa komponentu by ich nie przebiła.
   -------------------------------------------------------------------------- */

@media (max-width: 1400px) {
	.ab-landing .ab-sekcja { padding-block: clamp(2.5rem, 6vw, 100px); }
	.ab-landing .ab-pas { padding: clamp(2rem, 5vw, 100px) clamp(1.25rem, 4vw, 136px); gap: clamp(2rem, 5vw, 100px); }
	.ab-landing .ab-hero__tytul { font-size: clamp(2.25rem, 7vw, 120px); }
	.ab-landing .ab-liczby__wartosc { font-size: clamp(1.5rem, 3.2vw, 49px); }
	.ab-landing .ab-liczby__podpis { font-size: clamp(0.8125rem, 1.3vw, 20px); }
	.ab-liczby { gap: clamp(0.5rem, 1.6vw, 30px); }
	.ab-liczby__poz { padding: clamp(0.75rem, 2vw, 30px); }
	.ab-landing .ab-lead { font-size: clamp(1.125rem, 2vw, 25px); }
	.ab-landing .ab-karta-wstepna p:not(.ab-lead) { font-size: clamp(1rem, 1.5vw, 20px); }
	.ab-karta-wstepna { gap: clamp(1.25rem, 3vw, 36px); padding: clamp(1.25rem, 2.5vw, 30px); }
	.ab-karta-wstepna__tekst { gap: clamp(1rem, 2.5vw, 36px); }
	.ab-belka__wnetrze { min-height: 0; padding: clamp(0.5rem, 1.2vw, 11px) clamp(0.9rem, 2vw, 30px); }
	.ab-belka .ab-logo__obraz { height: clamp(40px, 4.5vw, 67px); }
	.ab-nawigacja ul { gap: clamp(1rem, 3.4vw, 60px); }
	.ab-landing .ab-nawigacja a { font-size: clamp(0.9375rem, 1.4vw, 20px); }
	.ab-landing .ab-porownanie__naglowek { font-size: clamp(1.25rem, 2.8vw, 39px); padding-bottom: clamp(1rem, 3vw, 48px); }
	.ab-landing .ab-karuzela__numer { font-size: clamp(3.5rem, 10vw, 150px); }
	.ab-landing .ab-karuzela__tytul { font-size: clamp(1.125rem, 2.2vw, 31px); line-height: 1.25; }
	.ab-landing .ab-karuzela__opis { font-size: clamp(1rem, 1.8vw, 25px); line-height: 1.4; }
	.ab-karuzela__krok { flex-basis: clamp(300px, 40vw, 550px); gap: clamp(1rem, 2.7vw, 38px); }
	.ab-karuzela__tresc { padding-top: clamp(0.5rem, 1.4vw, 20px); }
	.ab-ocena { padding: clamp(1rem, 2.2vw, 30px); }
}

@media (max-width: 900px) {
	/* Pasek liczb: pięć kart w rzędzie to na tablecie pięć pasków po ~140 px.
	   Schodzimy na zawijanie po trzy, a poniżej 620 px - po dwie. */
	.ab-liczby { flex-wrap: wrap; }
	.ab-liczby__poz { flex: 1 1 calc(33.333% - 1rem); }
	.ab-karta-wstepna { align-items: stretch; }
	/* Karuzela: jeden krok na kadr - dwa obok siebie znaczą dwa ucięte. */
	.ab-karuzela__krok { flex-basis: 100%; }
	.ab-landing .ab-karuzela__numer { font-size: clamp(3rem, 14vw, 96px); }
}

@media (max-width: 620px) {
	.ab-liczby__poz { flex: 1 1 calc(50% - 0.5rem); }
	/* Nieparzysta ostatnia pozycja na całą szerokość - inaczej „12" wisi samo
	   w lewej kolumnie przy wyśrodkowanym tytule (poprawka z 2026-08-25). */
	.ab-liczby__poz:last-child:nth-child(odd) { flex-basis: 100%; }
}

/* ⚠ Na telefonie karuzela pokazuje jeden krok naraz, więc przygaszanie
   nieaktywnych zabrałoby czytelność jedynemu widocznemu krokowi. */
@media (max-width: 900px) {
	.ab-karuzela__krok { opacity: 1; }
}

/* =============================================================================
   RUNDA UWAG 2026-08-25 (III) - tła, dividery, FAQ, kontakt
   =============================================================================
   Wartości z pliku `xCBA9FrieshBppT4uLCPez` (kolejna kopia makiety) oraz
   z eksportu Figma Make. Węzły podane przy każdej pozycji.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   25. „POZOSTAŁE USŁUGI" - tła kafli i sekcji (`646:3681`, `646:3685`)
   --------------------------------------------------------------------------
   Kafle NIE są białe. W makiecie mają półprzezroczyste tła i to one budują
   różnicę między pozycją otwartą a zwiniętą:

     zwinięta  `rgba(239,239,249,0.3)`
     otwarta   `rgba(222,224,243,0.5)`

   ⚠ Sekcja jest BIAŁA, nie `#f4f3f8`. Półprzezroczyste tła kafli policzono na
   biel - na naszym dotychczasowym jasnym tle sekcji zlewały się z podłożem
   i cały akordeon wyglądał na jednolitą płachtę.
   -------------------------------------------------------------------------- */

.ab-landing .ab-sekcja--kafle { background: var(--ab-tlo); }
.ab-landing .ab-kafel { background: rgb(239 239 249 / 30%); }
.ab-landing .ab-kafel--otwarty { background: rgb(222 224 243 / 50%); }

/* -----------------------------------------------------------------------------
   26. PORÓWNANIE - dividery są RÓŻNE w obu kolumnach (`646:3691`)
   --------------------------------------------------------------------------
   To nie jest jedna linia przez całą szerokość, tylko dwie osobne, w różnych
   kolorach, i właśnie ta różnica niesie sens sekcji:

     „Standardowy warsztat"  `rgba(177,183,228,0.3)` - przygaszony błękit
     „Auto Brudniewicz"      `#fb0`                  - żółty akcent marki

   ⚠ Linia stoi POD wierszem (`border-bottom`), a **ostatni wiersz jej nie ma**.
   Mieliśmy jedną wspólną linię białą 12 % nad wierszem, przez co obie kolumny
   wyglądały tak samo, a pod ostatnią pozycją wisiała krecha donikąd.
   -------------------------------------------------------------------------- */

.ab-porownanie__wiersz { border-top: 0; }
.ab-porownanie__strona {
	align-self: stretch;
	padding-bottom: 30px;
	border-bottom: 1px solid rgb(177 183 228 / 30%);
}
.ab-porownanie__strona--my { border-bottom-color: #fb0; }
.ab-porownanie__wiersz:last-of-type .ab-porownanie__strona { border-bottom: 0; }

/* -----------------------------------------------------------------------------
   27. FAQ (`646:3869`) - pytanie 25 px, padding 30/12, ikona 36
   -------------------------------------------------------------------------- */

.ab-faq__poz { padding: 0 30px; }
.ab-landing .ab-faq__poz summary { font-size: 25px; line-height: 1.3; padding-block: 12px; min-height: 100px; }
.ab-landing .ab-faq__poz[open] summary { color: #202956; }
.ab-faq__poz summary::after { width: 0.75rem; height: 0.75rem; }
.ab-landing .ab-faq__tresc { padding-bottom: 30px; }

/* -----------------------------------------------------------------------------
   28. PRZYCISK „Zobacz wszystkie opinie" - ikona 30 px, odstęp 10 (`646:3779`)
   -------------------------------------------------------------------------- */

.ab-ocena .ab-przycisk-duzy { gap: 10px; }
.ab-ocena .ab-przycisk-duzy .ab-ikona-plik { width: 30px; height: 30px; filter: none; }

@media (max-width: 1400px) {
	.ab-landing .ab-faq__poz summary { font-size: clamp(1.0625rem, 1.9vw, 25px); min-height: 0; padding-block: 16px; }
	.ab-faq__poz { padding-inline: clamp(1.25rem, 2.2vw, 30px); }
	.ab-landing .ab-faq__tresc { padding-bottom: clamp(1.25rem, 2.2vw, 30px); }
	.ab-porownanie__strona { padding-bottom: clamp(1rem, 2.2vw, 30px); }
}

/* -----------------------------------------------------------------------------
   29. BANNEREK - odstępy z węzła `646:3638`
   --------------------------------------------------------------------------
   Makieta ma DWA różne odstępy, nie jeden: 16 px między leadem a akapitem
   (to jedna myśl) i dopiero 36 px między tym blokiem a plakietkami. Jednakowy
   odstęp spłaszczał hierarchię - akapit odklejał się od zdania, które wprowadza.
   -------------------------------------------------------------------------- */

.ab-karta-wstepna__slowa { display: flex; flex-direction: column; gap: 16px; }

@media (max-width: 1400px) {
	.ab-karta-wstepna__slowa { gap: clamp(0.5rem, 1.2vw, 16px); }
}

/* -----------------------------------------------------------------------------
   30. KARUZELA STEROWANA PRZEWIJANIEM - bez doskakiwania
   --------------------------------------------------------------------------
   ⚠ `scroll-snap-type: x mandatory` WALCZY ze sterowaniem przewijaniem strony.
   Skrypt ustawia `scrollLeft` płynnie, a snap natychmiast doskakuje do najbliższej
   krawędzi kroku - zmierzone: tor przeskakiwał 0 → 630 → 880 zamiast sunąć.
   Powyżej 900 px, gdzie tor prowadzi przewijanie strony, snap więc znika.

   Na telefonie zostaje: tam kroki przesuwa się palcem i doskakiwanie jest
   dokładnie tym, czego się oczekuje po przesunięciu.
   -------------------------------------------------------------------------- */

@media (min-width: 901px) {
	.ab-karuzela__tor { scroll-snap-type: none; }
	.ab-karuzela__krok { scroll-snap-align: none; }
}

/* Przy `prefers-reduced-motion` skrypt nie rusza toru, więc snap musi wrócić -
   inaczej zostałby tor, którego nic nie prowadzi i który do niczego nie dosuwa. */
@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
	.ab-karuzela__tor { scroll-snap-type: x mandatory; }
	.ab-karuzela__krok { scroll-snap-align: start; }
}

/* =============================================================================
   HERO 1:1 Z MAKIETY - oba landingi (2026-08-25, runda IV)
   =============================================================================
   Do tej pory hero było kolumną fleksa: treść u góry, liczby dosunięte do dołu
   `margin-top: auto`. W makiecie to NIE JEST układ przepływowy - wszystkie trzy
   bloki mają stałe pozycje w kadrze 1872 x 1104, identyczne na obu podstronach:

     zdjęcie      1872 x 1104, promień 36, y = 18   (Home 646:3636, Mech. 646:4012)
     tekst        Home  y = 401 -> 34,69 % wysokości kadru
                  Mech. y = 327 -> 27,99 %
     pasek liczb  y = 739 -> 65,31 %,  szerokość 1328 -> 70,94 %
     karta pod    y = 1010 -> 89,86 %, szerokość 1329 -> 71 %

   Karta zachodzi na dolną krawędź kadru o 112 px. Zapisujemy to jako ujemny
   margines w PROCENTACH (112 / 1872 = 5,98 %), bo procentowy margines liczy się
   od SZEROKOŚCI kontenera - a ta jest identyczna dla hero i dla karty, więc
   zakładka skaluje się razem z całą sekcją i nie wymaga ani jednej wartości
   w pikselach.
   ========================================================================== */

.ab-landing .ab-hero {
	position: relative;
	display: block;
	aspect-ratio: 1872 / 1104;
	padding: 0;
	border-radius: 36px;
	overflow: hidden;
}

.ab-hero__tresc {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 68.86%;
	margin: 0;
	text-align: center;
	gap: 30px;
}

/* ⚠ Punkt zaczepienia tekstu RÓŻNI SIĘ między podstronami: na Home stoi jedno
   zdanie o 120 px, na Mechanice trzy bloki o łącznej wysokości 472 px, więc
   zaczyna się wyżej. Wspólna wartość rozjeżdżałaby jedną z nich. */
.ab-landing--glowna   .ab-hero__tresc { top: 34.69%; }
.ab-landing--mechanika .ab-hero__tresc { top: 27.99%; }

.ab-landing .ab-liczby {
	position: absolute;
	top: 65.31%;
	left: 50%;
	transform: translateX(-50%);
	width: 70.94%;
	margin: 0;
	padding: 0;
}

/* Karta wstępna (Home) i karta z telefonem (Mechanika) to w makiecie ten sam
   slot: 71 % szerokości, wyśrodkowany, zachodzący na kadr o 5,98 %. */
.ab-landing .ab-karta-wstepna,
.ab-landing .ab-karta-telefon {
	width: 71%;
	max-width: none;
	margin: -5.98% auto 0;
}

/* ⚠ H1 ma na Home 120 px, a na Mechanice 76 px. Reguła bez zawężenia dawała
   Mechanice 120 px, czyli o połowę za duży tytuł nad trzema blokami tekstu. */
.ab-landing--mechanika .ab-hero__tytul { font-size: 76px; }

@media (max-width: 1400px) {
	.ab-landing--mechanika .ab-hero__tytul { font-size: clamp(1.75rem, 5.2vw, 76px); }
}

/* -----------------------------------------------------------------------------
   HERO NA TELEFONIE - powrót do przepływu
   --------------------------------------------------------------------------
   ⚠ Pozycje procentowe są policzone dla kadru 1872 x 1104. Na pionowym ekranie
   telefonu ten sam kadr ma zupełnie inne proporcje, a bloki tekstu są dwa razy
   wyższe - trzymanie ich na sztywnych procentach nakładałoby je na siebie.
   Poniżej 900 px hero wraca więc do zwykłej kolumny.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.ab-landing .ab-hero {
		aspect-ratio: auto;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		gap: clamp(1.5rem, 5vw, 3rem);
		padding: clamp(7.5rem, 24vw, 10rem) 1.25rem clamp(2rem, 6vw, 3rem);
	}
	.ab-hero__tresc,
	.ab-landing .ab-liczby {
		position: static;
		transform: none;
		width: 100%;
	}
	.ab-landing .ab-karta-wstepna,
	.ab-landing .ab-karta-telefon {
		width: calc(100% - 2rem);
		margin-top: -2.5rem;
	}
}

/* -----------------------------------------------------------------------------
   31. MENU - widoczne podświetlenie pola pod kursorem
   --------------------------------------------------------------------------
   Zgłoszenie z odbioru: „brakuje podświetlenia dla pewności, na jakim polu
   trzyma się kursor". Dotąd hover zmieniał tylko kolor tekstu, a przy pozycjach
   oddalonych o 60 px trudno było powiązać podświetloną literę z obszarem klikalnym.

   Podświetlamy CAŁE pole, nie sam napis - dlatego odnośnik dostaje własny
   padding i tło. Fokus z klawiatury dostaje ten sam stan, żeby osoba idąca
   tabulatorem widziała dokładnie to samo, co osoba z myszą.
   -------------------------------------------------------------------------- */

.ab-landing .ab-nawigacja a {
	padding: 10px 16px;
	border-radius: 999px;
	border-bottom: 0;
	transition: background-color 0.18s ease, color 0.18s ease;
}
.ab-landing .ab-nawigacja a:hover,
.ab-landing .ab-nawigacja a:focus-visible {
	background: rgb(87 104 194 / 10%);
	color: var(--ab-fiolet);
}
/* Odstęp 60 px z makiety liczony jest między NAPISAMI, więc po dodaniu paddingu
   trzeba go o ten padding zmniejszyć - inaczej menu urosłoby o 160 px. */
.ab-nawigacja ul { gap: 28px; }

@media (max-width: 1400px) {
	.ab-nawigacja ul { gap: clamp(0.25rem, 1.6vw, 28px); }
	.ab-landing .ab-nawigacja a { padding: 8px clamp(8px, 1vw, 16px); }
}

/* -----------------------------------------------------------------------------
   32. ŻÓŁTY WIDGET - przestaje uciekać i widać, że jest klikalny
   --------------------------------------------------------------------------
   Zgłoszenie: „chwilami ucieka i nie idzie na niego najechać kursorem".
   Przyczyna: chował się, gdy w kadrze pojawiał się CAŁY panel `ab-koniec` -
   a ten ma ponad 1000 px wysokości i na Mechanice mieści jeszcze formularz,
   więc widget znikał na długo przed stopką i wracał dopiero po przewinięciu
   w górę. Obserwujemy teraz samą stopkę (patrz `landing.js`).

   Dochodzi stan `:hover` - dotąd widget nie reagował wcale, więc nie było jak
   odróżnić „nie da się kliknąć" od „nic się nie stało".
   -------------------------------------------------------------------------- */

.ab-landing .ab-fab:hover,
.ab-landing .ab-fab:focus-visible {
	background: #ffc933;
	box-shadow: 0 14px 34px rgb(20 23 46 / 30%);
	transform: translateY(-2px);
}
.ab-landing .ab-fab:active { transform: translateY(0); }

/* -----------------------------------------------------------------------------
   33. ANIMACJA LICZB W HERO
   --------------------------------------------------------------------------
   Liczby doliczają się od zera, gdy pasek wejdzie w kadr (patrz `landing.js`).
   Rezerwujemy im szerokość wariantem tabelarycznym cyfr - inaczej „+2000"
   skakałoby w bok przy każdej klatce, bo „1" jest węższa od „8".
   -------------------------------------------------------------------------- */

.ab-liczby__wartosc { font-variant-numeric: tabular-nums; }

/* -----------------------------------------------------------------------------
   34. WĄSKIE TELEFONY (360 px) - przyciski przestają rozpychać karty
   --------------------------------------------------------------------------
   ⚠ Zmierzone przy 360 px: `scrollWidth` 379 przy oknie 360, czyli 19 px
   poziomego przewijania na OBU podstronach. Winowajcą nie była karta, tylko
   **przycisk w środku**: `.ab-przycisk-obrys` ma `white-space: nowrap`, a napis
   „Porozmawiajmy o współpracy" przy 20 px i paddingu 24 nie mieści się w 320 px.
   Element z `nowrap` wyznacza minimalną szerokość rodzicowi, więc karta rosła
   za nim i wypychała całą stronę.

   Poniżej 620 px przyciski mogą więc łamać napis, a karty i komórki siatki
   dostają `min-width: 0` - bez tego element siatki nigdy nie zejdzie poniżej
   swojej treści, choćby `white-space` na to pozwalał.
   -------------------------------------------------------------------------- */

@media (max-width: 620px) {
	.ab-landing .ab-przycisk-obrys,
	.ab-landing .ab-przycisk-duzy,
	.ab-landing .ab-przycisk {
		white-space: normal;
		padding-inline: 16px;
		height: auto;
		min-height: 52px;
		padding-block: 10px;
		text-align: center;
	}
	.ab-karta-kontaktu,
	.ab-karta-uslugi,
	.ab-kafel,
	.ab-liczby__poz { min-width: 0; }
	.ab-karty-kontaktu > * { min-width: 0; }
}

/* -----------------------------------------------------------------------------
   35. SEKCJA PRZYPIĘTA - cztery kroki przejeżdżają na jednym ekranie
   --------------------------------------------------------------------------
   Polecenie z odbioru 2026-08-25: „scroll musi się szybciej triggerować -
   generalnie zrobiłbym tak, że na wysokość strony się zatrzymuje, scrollujemy
   horyzontalnie 4 kroki i leci dalej scroll wertykalny".

   Mechanizm jest CSS-owy: sekcja jest o `--ab-droga` WYŻSZA od okna, a jej
   wnętrze (`__scena`) stoi w niej `sticky` na 100vh. Przez tę nadwyżkę scena
   zostaje nieruchomo w kadrze, dopóki sekcja przez niego nie przejdzie, a skrypt
   czyta postęp i o tyle samo przesuwa tor karuzeli (patrz `landing.js`).

   ⚠ **Nigdzie nie ma `preventDefault` na kółku myszy.** Sekcja „zatrzymuje"
   stronę wysokością własnego pudełka, a nie przechwyconym zdarzeniem - dlatego
   pasek przewijania, `Page Down`, `Home`/`End` i gest „szybko w dół, żeby ominąć
   sekcję" działają dokładnie tak, jak wszędzie indziej na stronie.

   `--ab-droga` ustawia skrypt na ZAPAS toru w poziomie, więc ruch jest 1:1
   z przewinięciem. Klasę `is-przypieta` dokłada dopiero po zmierzeniu, że sekcja
   mieści się w kadrze - sam arkusz nie przypina niczego, bo na niskim ekranie
   przypięcie ucięłoby treść, której nie da się już doscrollować.

   ⚠ `position: sticky` nie działa, gdy którykolwiek przodek ma `overflow` inne
   niż `visible`. Na tych landingach jest to już rozwiązane (blok 24 zdejmuje
   `overflow-x: hidden` z `<body>` dla `.ab-landing`) - ta sama zależność, która
   wcześniej odklejała belkę.

   ⚠ Selektory mają po TRZY klasy, bo `.ab-landing .ab-sekcja { padding-block:
   100px }` z bloku 20 ma dwie i stoi wyżej w pliku. Przy remisie specyficzności
   rozstrzyga kolejność, a na niej w tym motywie już raz się przejechaliśmy.
   -------------------------------------------------------------------------- */

/*
   ⚠ **Sekcja jest wyższa od sceny o DROGĘ i robi to dolnym paddingiem, a nie
   `height: 100vh + droga`.** Poprzednia wersja rozciągała scenę na całą wysokość
   okna i centrowała w niej treść - a treść ma około 500 px, więc przy wjeździe
   sekcji w kadr użytkownik oglądał najpierw pół ekranu bieli, a nagłówek
   „JAK WYGLĄDA OBSŁUGA" wjeżdżał dopiero przy dolnej krawędzi. Zgłoszone
   2026-08-27 („za duże przerwy") ze zrzutami dokładnie tego momentu.

   Scena ma dziś swoją naturalną wysokość, więc nagłówek widać od razu, a dolny
   padding sekcji daje przewijaniu dokładnie tyle drogi, ile potrzebuje tor.
*/
.ab-landing .ab-przypiecie.is-przypieta {
	/* ⚠ **To MUSI być wysokość, nie dolny padding.** Element przyklejony jest
	   ograniczony BLOKIEM ZAWIERAJĄCYM, a ten liczy się od pola treści rodzica -
	   padding do niego nie należy. Wersja z `padding-block: 0 var(--ab-droga)`
	   dawała sekcji właściwą wysokość, ale scena nie miała ani piksela drogi
	   i po prostu przewijała się razem ze stroną (zmierzone: `scena.top = -504`
	   tam, gdzie przyklejona powinna mieć 0). `--ab-scena` ustawia skrypt po
	   zmierzeniu sceny, bo jej wysokość zależy od treści i od fontów. */
	height: calc(var(--ab-scena, 100vh) + var(--ab-droga, 0px));
	padding-block: 0;
}

.ab-landing .ab-przypiecie.is-przypieta .ab-przypiecie__scena {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	/* Sufit, nie wysokość: na niskim oknie scena i tak nie może być wyższa
	   od kadru, bo przypięcia nie dałoby się doscrollować. */
	max-height: 100vh;
	/* Górny padding to miejsce na przyklejoną belkę (pigułka 100 px + oddech na
	   jej marginesy) - bez niego nadtytuł sekcji chowa się pod menu. Na niższym
	   oknie schodzi razem z nim, żeby przypięcie nie wyłączało się na laptopie
	   tylko dlatego, że rezerwa była trzymana na sztywno. */
	padding-block: clamp(120px, 16vh, 148px) clamp(16px, 4vh, 40px);
}

/* ⚠ Kontenerowi w scenie NIE wolno dać `width: 100%`. Scena jest fleksem, więc
   `.ab-kontener` jest w niej elementem elastycznym i sam trzyma swoje
   `min(100% − 2.5rem, 1600px)`, a `margin-inline: auto` go centruje. Wymuszona
   pełna szerokość rozciągała go do 1960 px, przez co tor karuzeli miał 480 px
   zapasu zamiast 840 - czyli o połowę krótszą drogę niż zmierzona przed
   przypięciem. Objaw: kroki dojeżdżały do końca w połowie sekcji. */

/* -----------------------------------------------------------------------------
   36. KARUZELA - ostatni krok musi być odsłonięty na końcu drogi
   --------------------------------------------------------------------------
   Zgłoszenie z odbioru: „4 musi być bardziej odsłonięta". Powody były DWA i oba
   sprawiały, że czwarty krok czytało się jak tło:

   1. **Podświetlenie** brało krok najbliższy lewej krawędzi, a tor przewija się
      tylko o 1,33 kroku - więc kroki 3 i 4 nie zapalały się nigdy. Naprawione
      w `landing.js` (ten sam postęp, co segment paska).
   2. **Prawy gradient** 250 px leży dokładnie na ostatnim kroku, kiedy tor stoi
      na końcu. Wygaszenie krawędzi znaczy „tu jest dalszy ciąg" - a na końcu
      dalszego ciągu nie ma, więc gradient musi zejść. To samo z lewym na starcie.

   Klasy `is-poczatek` / `is-koniec` ustawia skrypt z `scrollLeft`, nie z indeksu
   kroku - działa tak samo przy przewijaniu strony i przy przesunięciu palcem.
   -------------------------------------------------------------------------- */

.ab-karuzela__mgla { transition: opacity 0.25s ease; }
.ab-karuzela.is-poczatek .ab-karuzela__mgla--lewa,
.ab-karuzela.is-koniec  .ab-karuzela__mgla--prawa { opacity: 0; }

/* -----------------------------------------------------------------------------
   37. FORMULARZ - stany błędu, honeypot i podziękowanie (2026-08-25)
   --------------------------------------------------------------------------
   Formularz zaczął wysyłać (patrz `functions.php`), więc pojawiły się stany,
   których dotąd nie było: pole z błędem, komunikat ogólny i ekran po wysłaniu.

   ⚠ Walidacja jest SERWEROWA i celowo nie mamy dymków przeglądarki
   (`novalidate` w markupie). Powód: komunikaty mają brzmieć naszym językiem
   i wyglądać jak reszta strony, a nie jak systemowy popup w losowym miejscu.
   -------------------------------------------------------------------------- */

/* Honeypot musi być niewidoczny dla człowieka, ale WYPEŁNIALNY dla bota -
   `display: none` część botów pomija, więc chowamy go z kadru. */
.ab-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ab-landing .ab-pole--blad { border-color: #b32d2e; }

.ab-landing .ab-pole__blad,
.ab-landing .ab-zgoda--blad .ab-pole__blad {
	display: block;
	padding: 0 16px 10px;
	font-size: 0.875rem;
	line-height: 1.5;
	color: #b32d2e;
}

/* W zgodzie komunikat stoi pod klauzulą, nie w ramce pola - stąd własny padding. */
.ab-landing .ab-zgoda--blad .ab-pole__blad { padding: 8px 0 0; }
.ab-landing .ab-zgoda--blad { color: #b32d2e; }

.ab-landing .ab-formularz__komunikat {
	margin: 0;
	padding: 16px 20px;
	background: #fdf0f0;
	border: 1px solid #f0c5c5;
	border-radius: 16px;
	font-size: 1rem;
	line-height: 1.6;
	color: #8a2224;
}

/* Podziękowanie stoi DOKŁADNIE w miejscu formularza, więc bierze jego rytm. */
.ab-podziekowanie {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 40px;
	background: var(--ab-tlo-krok);
	border-radius: 24px;
}

.ab-landing .ab-podziekowanie__tytul {
	margin: 0;
	font-size: 25px;
	line-height: 1.3;
	font-weight: 600;
	color: #000;
}

.ab-landing .ab-podziekowanie__tresc { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ab-tusz); }
.ab-landing .ab-podziekowanie__tresc a { color: var(--ab-fiolet); font-weight: 600; }

@media (max-width: 700px) {
	.ab-podziekowanie { padding: 24px; }
	.ab-landing .ab-podziekowanie__tytul { font-size: 20px; }
}

/* -----------------------------------------------------------------------------
   38. PROZA - dokumenty prawne w nowej warstwie (2026-08-26)
   --------------------------------------------------------------------------
   Polityka prywatności przeniesiona ze starej strony. Treść jest długim tekstem
   ciągłym, więc rządzi nią miara wiersza, a nie siatka makiety: kontener wąski
   (940 px) daje ok. 90 znaków w wierszu przy 17 px.

   ⚠ Nagłówki w treści to `h2` z edytora WordPressa, więc reguły muszą być
   zawężone do `.ab-proza` - inaczej przemalowałyby nagłówki sekcji na obu
   landingach, które mają tę samą klasę elementu, ale własne rozmiary z makiety.
   -------------------------------------------------------------------------- */

.ab-sekcja--proza { padding-block: clamp(7rem, 12vw, 160px) clamp(3rem, 7vw, 100px); }

.ab-proza__naglowek { display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; }

.ab-landing .ab-proza__tytul {
	margin: 0;
	font-size: clamp(1.75rem, 4vw, 49px);
	line-height: 1.2;
	font-weight: 600;
	color: var(--ab-tusz);
}

.ab-proza { color: var(--ab-tusz); }

.ab-landing .ab-proza h2 {
	margin: 48px 0 16px;
	font-size: 25px;
	line-height: 1.3;
	font-weight: 600;
	color: #000;
}
.ab-landing .ab-proza h2:first-child { margin-top: 0; }

.ab-landing .ab-proza h3 { margin: 32px 0 12px; font-size: 20px; line-height: 1.4; font-weight: 600; color: #000; }

.ab-landing .ab-proza p,
.ab-landing .ab-proza li { font-size: 1rem; line-height: 1.7; }

.ab-proza p { margin: 0 0 16px; }
.ab-proza ul,
.ab-proza ol { margin: 0 0 16px; padding-left: 1.25rem; }
.ab-proza li { margin-bottom: 8px; }
.ab-proza strong { font-weight: 600; color: #000; }

/* ⚠ Odnośniki w polityce prowadzą w większości na ZEWNĄTRZ (Google, Mozilla,
   Apple). Podkreślenie zostaje - w tekście prawnym odnośnik ma być widoczny
   bez najeżdżania kursorem. */
.ab-landing .ab-proza a {
	color: var(--ab-fiolet);
	text-decoration: underline;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

.ab-proza__powrot { margin-top: 48px; }
.ab-landing .ab-proza__powrot a { color: var(--ab-fiolet); font-weight: 600; text-decoration: none; }
.ab-landing .ab-proza__powrot a:hover { text-decoration: underline; }

/* Przyciski zgód wtyczki (shortcode'y `[rcb-consent-*]`) - żeby nie wyglądały
   jak surowy tekst, gdy wtyczka je wyrenderuje. */
.ab-proza .rcb-sc-link {
	display: inline-block;
	margin: 4px 0;
	padding: 10px 20px;
	background: none;
	border: 1.5px solid var(--ab-fiolet);
	border-radius: 999px;
	color: var(--ab-fiolet);
	font: inherit;
	font-size: 0.9375rem;
	text-decoration: none;
	cursor: pointer;
}

/* -----------------------------------------------------------------------------
   39. HERO - slider zdjęć i zdjęcia zakładek usług (2026-08-26)
   --------------------------------------------------------------------------
   Dwie uwagi z odbioru, jedna przyczyna: tło było statyczne tam, gdzie miało
   się zmieniać. W hero brakowało slidera, a w panelu „Usługi" wszystkie cztery
   zakładki pokazywały ten sam kadr.

   ⚠ Slajdy trzymają geometrię z makiety (`left: -22.22%`, `top: -39.35%`,
   126,5 % × 142,96 %) i **docelową przezroczystość 0,7** - to nie jest efekt
   przenikania, tylko sposób, w jaki zdjęcie leży pod granatem. Przenikanie
   przechodzi więc między 0 a 0,7, nigdy do pełnej krycia.

   ⚠ Bez JavaScriptu widać PIERWSZY slajd: reguła chowająca kolejne ma dwie
   klasy i wchodzi dopiero z `--js`. Ta sama zasada, co przy akordeonie -
   chowamy tylko to, co potrafimy z powrotem pokazać.
   -------------------------------------------------------------------------- */

.ab-hero__slajdy { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }

.ab-hero__slajdy .ab-hero__foto { transition: opacity 1.2s ease; }

/* Bez skryptu: drugi i kolejne slajdy schowane, pierwszy widoczny w skali makiety. */
.ab-hero__slajdy .ab-hero__foto + .ab-hero__foto { opacity: 0; }

/* Ze skryptem: widoczność steruje klasa, nie kolejność w kodzie. */
.ab-hero__slajdy--js .ab-hero__foto { opacity: 0; }
.ab-hero__slajdy--js .ab-hero__foto.is-widoczny { opacity: 0.7; }

/* Zdjęcie panelu usług przenika przy zmianie zakładki - inaczej podmiana kadru
   wygląda jak przeskok, a nie jak zmiana treści. */
.ab-panel__foto { transition: opacity 0.35s ease; }

/* -----------------------------------------------------------------------------
   40. HERO - przyciemnienie pod tekstem (2026-08-26)
   --------------------------------------------------------------------------
   Zgłoszenie: „na obrazek w hero na obu podstronach trzeba nałożyć gradient,
   by tekst w sekcji hero bardziej się wybijał".

   ⚠ **Gradient z makiety zostaje nietknięty** (`.ab-hero::before`: skos
   −35,32°, `#202956` 60 %, tryb `multiply` - dokładnie to, co widać w panelu
   warstw Figmy). On pogłębia granat w lewym dolnym rogu i jest częścią projektu.
   Problem jest gdzie indziej: napis stoi w OKOLICACH ŚRODKA kadru, a tam
   makietowy gradient jest już przezroczysty, więc biały tekst leży wprost na
   zdjęciu przy 70 % krycia.

   Dokładamy więc DRUGĄ warstwę - miękkie przyciemnienie pod samym tekstem.
   Jest pionowe i wygasa u dołu, żeby nie przygasić paska liczb ani karty, która
   nachodzi na kadr. Slider hero zmienia zdjęcia, więc czytelność nie może
   zależeć od tego, jak jasny jest akurat bieżący slajd.
   -------------------------------------------------------------------------- */

.ab-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;   /* nad zdjęciem i gradientem makiety, pod treścią (3) */
	pointer-events: none;
	border-radius: inherit;
	/* ⚠ Wartości podniesione 2026-08-26 na prośbę „dodajmy jeszcze ciemniejszy
	   gradient". Zdjęcie leży pod granatem przy 70 % krycia, więc realne
	   przyciemnienie w miejscu napisu to suma tej warstwy i tamtej - stąd u góry
	   zatrzymujemy się na 72 %, a nie na pełnym kryciu: powyżej tego progu
	   fotografia przestaje być fotografią i zostaje granatowa plama. */
	/* ⚠ Przyciemnienie jest z DWÓCH stron, nie tylko od góry. Na dole kadru stoi
	   pasek liczb z podpisami w kolorze `#b1b7e4` - a zdjęcia w sliderze bywają
	   tam jasne (fasada w słońcu, czerwony podnośnik) i podpisy po prostu nikną.
	   Środek zostaje najjaśniejszy, żeby fotografia miała gdzie oddychać. */
	background-image: linear-gradient(
		180deg,
		rgb(32 41 86 / 72%) 0%,
		rgb(32 41 86 / 60%) 30%,
		rgb(32 41 86 / 45%) 52%,
		rgb(32 41 86 / 64%) 78%,
		rgb(32 41 86 / 80%) 100%
	);
}

/* Treść hero musi zostać NAD przyciemnieniem - inaczej dołożylibyśmy mgłę
   również na napisy, czyli dokładnie odwrotnie do celu.
   ⚠ Samo `z-index` nie wystarczy poniżej 900 px: tam treść wraca do przepływu
   (`position: static`, blok 24), a element nieposycjonowany maluje się POD
   warstwą z `z-index`. Stąd `relative` na telefonie - układ zostaje przepływowy,
   a napisy wracają na wierzch. NIE wolno tu ustawiać `absolute`, bo to zabrałoby
   tamtą regułę razem z całym układem mobilnym. */
.ab-landing .ab-hero__tresc,
.ab-landing .ab-hero .ab-liczby { z-index: 3; }

@media (max-width: 900px) {
	/* ⚠ **`position: relative` MUSI iść w parze z wyzerowaniem `left` i `top`.**
	   Reguły biurkowe ustawiają hero na `absolute` z `left: 50%` i przesunięciem
	   `translateX(-50%)`. Blok mobilny wyłącza to przez `position: static` -
	   i wtedy `left` przestaje cokolwiek znaczyć, bo elementy nieposycjonowane
	   go ignorują. Kiedy w rundzie z przyciemnieniem podniosłem tu pozycjonowanie
	   na `relative` (żeby napisy weszły nad warstwę cienia), `left: 50%` **wróciło
	   do gry razem z nim**, a `transform` został wyłączony piętro wyżej. Efekt:
	   cała treść hero przesunięta o pół szerokości w prawo i ucięta - na telefonie
	   nie dało się przeczytać ani nagłówka, ani liczb. */
	.ab-landing .ab-hero__tresc,
	.ab-landing .ab-hero .ab-liczby {
		position: relative;
		left: auto;
		right: auto;
		top: auto;
	}
}

/* -----------------------------------------------------------------------------
   41. SEKCJA KONTAKTU - odstęp nagłówek → karty (2026-08-26)
   --------------------------------------------------------------------------
   Zgłoszenie: „brakuje odstępu między buttonem a kontenerami niżej". Zmierzone
   na żywej stronie: między blokiem nagłówka a rzędem kart było **0 px**, więc
   cokolwiek kończyło nagłówek - przycisk formularza, ostatni wiersz leadu -
   dotykało kart.

   W makiecie (`646:3882`) blok nagłówka kończy się na y = 221, a rząd kart
   zaczyna na y = 301. Odstęp to **80 px** i tyle wpisujemy; niżej schodzi
   płynnie, bo przy 390 px osiemdziesiąt pikseli pustki to jeden ekran przewijania.

   ⚠ Ta sama reguła obsługuje Mechanikę, gdzie w środku sekcji stoi formularz -
   wcześniej odstęp brał się z `gap` rodzica (`.ab-koniec__gora`), bo formularz
   leżał OBOK nagłówka. Po przeniesieniu go do środka `#kontakt` (żeby kotwica
   lądowała na formularzu) ten odstęp zniknął razem ze starym układem.
   -------------------------------------------------------------------------- */

.ab-koniec__kontakt {
	display: flex;
	flex-direction: column;
	gap: clamp(2rem, 5vw, 80px);
}

/* Temat zgłoszenia nad formularzem - pojawia się tylko wtedy, gdy użytkownik
   przyszedł z karty konkretnego działu (`?dzial=…`). */
.ab-landing .ab-formularz__temat {
	margin: 0;
	padding: 12px 20px;
	background: var(--ab-tlo-krok);
	border-radius: 16px;
	font-size: 1rem;
	line-height: 1.6;
	color: #000;
	align-self: flex-start;
}