/* ==========================================================================
   Ustawiacz.pl — arkusz glowny

   Jezyk wizualny: karta parametrow maszyny. Ta firma ustawia nastawy
   wtryskarek, a jej wlasne zdjecie z galerii to ekran sterownika ARBURG.
   Stad cienkie linie, narozniki jak w rysunku technicznym, odczyty
   monospace i zestawienia tabelaryczne zamiast kafelkow z ikonami.

   Kolory pochodza z dwoch wersji logo klienta: grafit z obu,
   pomaranicz z wersji drugiej, ziele n z uzywanej dzis.
   ========================================================================== */

/* --------------------------------------------------------------- ZMIENNE */
:root {
	/* Powierzchnie */
	--czern:        oklch(0.16 0.006 250);
	--grafit:       oklch(0.21 0.006 250);
	--stal:         oklch(0.60 0.008 250);
	--papier:       oklch(0.985 0.002 250);
	--papier-cien:  oklch(0.955 0.003 250);
	--biel:         oklch(1 0 0);

	/* Kolory marki */
	--pom:       oklch(0.68 0.20 45);     /* znak i elementy graficzne */
	--pom-tekst: oklch(0.55 0.17 42);     /* tekst pomaranczowy na jasnym */
	--pom-btn:   oklch(0.50 0.16 42);     /* tlo przycisku, bialy napis zdaje AA */
	--pom-btn-h: oklch(0.44 0.15 42);
	--pom-jasny: oklch(0.80 0.15 52);     /* akcent na ciemnym */
	--zielen:        oklch(0.70 0.15 160);
	--zielen-tekst:  oklch(0.49 0.12 160);
	/* Wariant na CIEMNE tlo, ta sama jasnosc co --pom-jasny.
	   Zielen 0.49 jest liczona pod jasne tlo i na grafitowym pasku
	   dawala 3,33:1 przy progu 4,50 (zmierzone na /blog/).
	   Zmienna byla juz UZYWANA przy komunikacie formularza,
	   ale nigdzie nie zdefiniowana. */
	--zielen-jasna:  oklch(0.80 0.13 160);

	/* Tekst */
	--tekst:          oklch(0.22 0.005 250);
	--tekst-slaby:    oklch(0.46 0.006 250);
	--tekst-jasny:    oklch(0.97 0.002 250);
	--tekst-jasny-sl: oklch(0.76 0.006 250);

	/* Linie wlosowe */
	--linia:            oklch(0.88 0.004 250);
	--linia-slaba:      oklch(0.93 0.003 250);
	--linia-ciemna:     oklch(0.32 0.006 250);
	--linia-ciemna-sl:  oklch(0.26 0.006 250);

	/* Siatka 4 px */
	--o-1: 0.25rem;  --o-2: 0.5rem;   --o-3: 0.75rem;  --o-4: 1rem;
	--o-5: 1.25rem;  --o-6: 1.5rem;   --o-7: 1.75rem;  --o-8: 2rem;
	--o-10: 2.5rem;  --o-12: 3rem;    --o-14: 3.5rem;  --o-16: 4rem;
	--o-20: 5rem;    --o-24: 6rem;

	/* Rytm sekcji — trzy rozne miary, nie jedna na wszystko */
	--sek-ciasna:   clamp(2.75rem, 4.5vw, 4rem);
	--sek-normalna: clamp(3.5rem, 5.6vw, 5.25rem);
	--sek-szeroka:  clamp(4.5rem, 7.5vw, 7rem);

	/* Kontener */
	--px-tel: 1.25rem;
	--px-tab: 2rem;
	--px-desk: 3rem;
	--pas: clamp(20rem, 94vw, 84rem);

	/* Kroje. Po kazdym docelowym stoi krój ZAPASOWY o dopasowanej szerokosci
	   — definicje nizej, pod blokiem :root. */
	--f-naglowek: 'Archivo', 'Archivo zapas', 'Segoe UI', system-ui, sans-serif;
	--f-tresc:    'Inter Tight', 'Inter zapas', 'Segoe UI', system-ui, sans-serif;
	--f-mono:     'JetBrains Mono', 'Mono zapas', ui-monospace, 'Cascadia Mono', monospace;

	/* Skala — duzy rozstrzal miedzy naglowkiem a reszta buduje hierarchie */
	/* Naglowki zeszly w dol, tresc poszla w gore. Wczesniej roznica byla
	   tak duza, ze naglowek krzyczal, a tekst pod nim wygladal na drobny
	   druk. Teraz stopnie sa blizej siebie i lepiej ze soba graja. */
	--fs-h1:  clamp(2.125rem, 1.5rem + 2.6vw, 3.5rem);
	--fs-h2:  clamp(1.5rem, 1.24rem + 1.15vw, 2.375rem);
	--fs-h3:  clamp(1.1875rem, 1.11rem + 0.35vw, 1.4375rem);
	--fs-h4:  clamp(1.0625rem, 1.03rem + 0.16vw, 1.1875rem);
	--fs-tresc: clamp(1.0625rem, 1.03rem + 0.16vw, 1.1875rem);
	/* Dolna granica 1rem: na 320 px kolumna ma okolo 280 px i kazdy piksel
	   wiecej wypycha zdanie do drugiej linii. Zmierzone. */
	--fs-lead: clamp(1.0625rem, 1rem + 0.28vw, 1.3125rem);
	--fs-maly:  0.9375rem;   /* 15 px */
	/* Dwa najnizsze stopnie podniesione o piksel. Wczesniej bylo 13 i 11 px,
	   a nasz wlasny prog to 14 px na najdrobniejszym tekscie i 15 px na
	   tresci. Zmierzone na telefonie: 24 miejsca ponizej progu, w tym opisy
	   uslug, ktore sa tresciа, a nie ozdobnikiem. */
	--fs-mikro: 0.875rem;    /* 14 px */
	--fs-nano:  0.75rem;     /* 12 px */
	/* Pola formularza: 16 px to prog, ponizej ktorego iOS sam
	   przybliza strone przy dotknieciu pola. Nigdy mniej. */
	--fs-pole:  1rem;

	/* Skala wyniesienia. Trzy stopnie, kazdy warstwowy — pojedynczy
	   box-shadow czyta sie plasko. Cienie „wytloczonej plytki” i podswietlen
	   krawedzi NIE naleza do tej skali: to efekty konkretnych komponentow,
	   nie poziomy uniesienia, i zostaja przy swoich regulach. */
	--cien-1:
		0 1px 2px oklch(0.16 0.006 250 / 0.05),
		0 2px 6px oklch(0.16 0.006 250 / 0.05);
	--cien-3:
		0 8px 20px oklch(0.10 0.004 250 / 0.28),
		0 24px 60px oklch(0.10 0.004 250 / 0.45);
	--cien-2:
		0 1px 1px oklch(0.16 0.006 250 / 0.035),
		0 2px 2px oklch(0.16 0.006 250 / 0.035),
		0 4px 4px oklch(0.16 0.006 250 / 0.035),
		0 8px 8px oklch(0.16 0.006 250 / 0.035),
		0 16px 16px oklch(0.16 0.006 250 / 0.035);

	/* Sprezystosc zamiast domyslnego ease */
	--spr-gladka: cubic-bezier(0.22, 1, 0.36, 1);
	--spr-szybka: cubic-bezier(0.16, 1, 0.3, 1);
	--t-mikro:  120ms;
	--t-krotki: 200ms;
	--t-sredni: 320ms;

	--ikona-swiatlo: transparent;

	/* Naglowek ma dwa poziomy: pasek 40 px i belka 74 px. Ponizej 600 px
	   pasek znika, wiec zostaje sama belka. Wszystko, co musi zejsc spod
	   naglowka, liczy sie z tej zmiennej. */
	--wys-naglowka: 74px;
}

@media (min-width: 600px) { :root { --wys-naglowka: 114px; } }

/* --------------------------------------------------- KROJE ZAPASOWE
   Kroje z Google Fonts doladowuja sie po pierwszym wyswietleniu strony.
   Do tego czasu tekst rysowany jest krojem systemowym, a ten ma INNA
   SZEROKOSC znakow. Naglowek zawija sie wtedy w innym miejscu i po
   doladowaniu fontu cala sekcja skacze.

   Pomiar na zywej stronie (te same zdania, 100 px):
       Archivo         2961,8 px   krój systemowy 2937,6 px  →  100,82%
       Inter Tight     2914,0 px                             →   99,20%
       JetBrains Mono  3660,0 px   krój o stalej szerokosci  →  109,13%

   `size-adjust` skaluje krój zapasowy do TEJ SAMEJ szerokosci, wiec tekst
   lamie sie identycznie przed doladowaniem i po nim. Interlinie w motywie
   sa podane wprost (1.12, 1.3, 1.7...), wiec wysokosc wiersza nie zalezy
   od metryk kroju i nadpisywanie `ascent`/`descent` nie jest potrzebne.

   Zmierzone przed zmiana: przesuniecia ukladu 0,117 przy progu Google 0,1,
   jeden skok o 38 px w chwili doladowania fontu (892 ms).
   ------------------------------------------------------------------ */
@font-face {
	font-family: 'Archivo zapas';
	src: local('Segoe UI'), local('Roboto'), local('Helvetica Neue'), local('Arial');
	size-adjust: 100.82%;
	font-display: swap;
}
@font-face {
	font-family: 'Inter zapas';
	src: local('Segoe UI'), local('Roboto'), local('Helvetica Neue'), local('Arial');
	size-adjust: 99.20%;
	font-display: swap;
}
@font-face {
	font-family: 'Mono zapas';
	src: local('Cascadia Mono'), local('Consolas'), local('DejaVu Sans Mono'),
	     local('Menlo'), local('Courier New');
	size-adjust: 109.13%;
	font-display: swap;
}

/* Osobny krój zapasowy dla napisow POSZERZONYCH.
   Archivo jest krojem zmiennym z osia szerokosci, wiec `font-stretch: 112%`
   faktycznie go rozciaga. Krój systemowy tej osi NIE MA i `font-stretch`
   nic z nim nie robi — po doladowaniu Archivo napisy robia sie o kilkanascie
   procent szersze i lista marek lamie sie na drugi wiersz, spychajac cala
   strone o 39 px.

   UWAGA przy liczeniu: `size-adjust` skaluje SZEROKOSC ZNAKOW, ale NIE
   skaluje `letter-spacing` — ten liczy sie od niezmienionego rozmiaru
   pisma. Stosunek zmierzony na tekscie z odstepem miedzyliterowym daje
   wiec za mala wartosc. Pierwsza proba (117,75%) wyszla wlasnie tak
   i zostawila przesuniecie 0,092.

   Pomiar tych samych nazw marek przy 100 px, BEZ odstepu:
       Archivo, font-stretch 112%   5076,5 px
       krój systemowy               4256,1 px   →  119,27%          */
@font-face {
	font-family: 'Archivo zapas szeroki';
	src: local('Segoe UI'), local('Roboto'), local('Helvetica Neue'), local('Arial');
	size-adjust: 119.27%;
	font-display: swap;
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--wys-naglowka) + 1.5rem);
}

body {
	margin: 0;
	background: var(--papier);
	color: var(--tekst);
	font-family: var(--f-tresc);
	font-size: var(--fs-tresc);
	line-height: 1.7;
	/* Przycinanie tylko na body. Na html zabija pozycje przewijania. */
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: 'kern' 1, 'liga' 1;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--f-naglowek);
	font-weight: 700;
	line-height: 1.12;
	/* -0,028 em przy poszerzonym kroju sklejalo litery. */
	letter-spacing: -0.018em;
	text-wrap: balance;
}
h3, h4 { line-height: 1.3; letter-spacing: -0.01em; font-weight: 600; }

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
button { font: inherit; color: inherit; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

:focus-visible { outline: 2px solid var(--pom); outline-offset: 3px; border-radius: 1px; }
::selection { background: var(--pom); color: #fff; }

.us-pomijacz {
	position: absolute;
	inset-inline-start: var(--o-4);
	inset-block-start: -100%;
	z-index: 300;
	padding: var(--o-3) var(--o-5);
	background: var(--czern);
	color: var(--tekst-jasny);
	transition: inset-block-start var(--t-krotki) var(--spr-szybka);
}
.us-pomijacz:focus { inset-block-start: var(--o-4); }

/* ------------------------------------------------------------- KONTENERY */
.us-pas {
	width: var(--pas);
	margin-inline: auto;
	padding-inline: var(--px-tel);
}
@media (min-width: 768px)  { .us-pas { padding-inline: var(--px-tab); } }
@media (min-width: 1200px) { .us-pas { padding-inline: var(--px-desk); } }

.us-sekcja { padding-block: var(--sek-normalna); }

/* Sekcja zamykana pasem zdjec domyka sie ciasniej niz sekcja z tekstem.
   Pas obrazow czyta sie jak przejscie do nastepnego rozdzialu, a nie jak
   osobna calosc, wiec nie potrzebuje pelnego oddechu pod spodem.
   Klasa byla juz w kodzie strony, ale NIE MIALA zadnej reguly — sekcja
   z karuzela miala dokladnie te same odstepy co kazda inna.
   Zmierzone: 177 px miedzy dolem zdjec a napisem „06 / PYTANIA”. */
/* Dwie klasy w selektorze, zeby wygrac z regula ogolna rowniez wewnatrz
   zapytania medialnego dla malych ekranow — tam `.us-sekcja` jest nadpisane
   pozniej w arkuszu. */
.us-sekcja.us-sekcja--ciasna { padding-block-end: var(--o-8); }

/* Pytania po pasie zdjec zaczynaja sie wyzej. Selektor OGOLNEGO rodzenstwa,
   nie sasiada: miedzy sekcja galerii a pytaniami stoi jeszcze znacznik
   <dialog> podgladu zdjec i „+” go nie przeskakiwal. */
.us-galeria ~ .us-faq.us-sekcja { padding-block-start: var(--sek-ciasna); }

@media (max-width: 767px) {
	.us-sekcja.us-sekcja--ciasna { padding-block-end: var(--o-6); }
	.us-galeria ~ .us-faq.us-sekcja { padding-block-start: var(--o-8); }
}

.us-ciemna { position: relative; background: var(--czern); color: var(--tekst-jasny); }

/* Ziarno: faktura na duzych ciemnych plaszczyznach. Bez tego platy czerni
   czytaja sie jak plaski ekran. */
.us-ziarno::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	mix-blend-mode: soft-light;
	opacity: 0.05;
	pointer-events: none;
	z-index: 0;
}
.us-ziarno > * { position: relative; z-index: 1; }

/* -------------------------------------------------------- CZESCI WSPOLNE */

/* Nadtytul. Krój, wersaliki i swiatlo miedzy literami wystarcza za etykiete.
   Bez pigulki, bez kropki, bez kreski z przodu. */
.us-nad {
	font-family: var(--f-mono);
	font-size: var(--fs-nano);
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pom-tekst);
}
.us-ciemna .us-nad { color: var(--pom-jasny); }
.us-nad--zielony { color: var(--zielen-tekst); }
.us-ciemna .us-nad--zielony,
.us-czolo .us-nad--zielony { color: var(--zielen-jasna); }

.us-h2 {
	font-size: var(--fs-h2);
	/* Zostaje „balance” z reguly ogolnej. Probowalem „pretty” — mial unikac
	   pojedynczego slowa w ostatniej linii, a podwoil liczbe takich naglowkow
	   (5 -> 10 na czterech szerokosciach). Pomiar rozstrzygnal. */
}

.us-lead {
	margin-block-start: var(--o-5);
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--tekst-slaby);
}
.us-ciemna .us-lead { color: var(--tekst-jasny-sl); }

.us-glowa {
	margin-block-end: var(--o-12);
	padding-block-end: var(--o-6);
	border-block-end: 1px solid var(--linia);
}
.us-ciemna .us-glowa { border-block-end-color: var(--linia-ciemna); }
.us-glowa .us-nad { display: block; margin-block-end: var(--o-4); }

.us-glowa--rzad {
	display: flex;
	flex-wrap: wrap;
	gap: var(--o-5) var(--o-8);
	align-items: flex-end;
	justify-content: space-between;
}

.us-glowa__proza { margin-block-start: var(--o-6); color: var(--tekst-slaby); line-height: 1.7; }
.us-glowa__stopka { margin-block-start: var(--o-8); }

.us-mono {
	font-family: var(--f-mono);
	font-size: 0.92em;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

.us-proza p { margin-block: 0 var(--o-5); }
.us-proza p:last-child { margin-block-end: 0; }
.us-proza h2, .us-proza h3 { margin-block: var(--o-10) var(--o-4); font-size: var(--fs-h3); }
.us-proza ul { margin-block: 0 var(--o-5); padding-inline-start: var(--o-6); list-style: disc; }
.us-proza li { margin-block-end: var(--o-2); }
.us-proza a { color: var(--pom-tekst); font-weight: 500; }
.us-proza--ciemna { color: var(--tekst-jasny-sl); }
.us-proza--ciemna a { color: var(--pom-jasny); }

/* --------------------------------------------------------------- OKAZ
   Zdjecie w ramce z narozami rysunku technicznego. Nie tapeta pod
   gradientem, tylko okaz pokazany na planszy. */
.us-okaz { margin: 0; }
.us-okaz__ramka { position: relative; background: var(--papier-cien); }
.us-ciemna .us-okaz__ramka { background: var(--grafit); }

.us-okaz__obraz { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.us-okaz__obraz--szeroki { aspect-ratio: 21 / 9; }

.us-okaz__naroz {
	position: absolute;
	width: 14px;
	height: 14px;
	border: 0 solid var(--pom);
	pointer-events: none;
}
.us-okaz__naroz--lg { inset-block-start: -1px; inset-inline-start: -1px; border-width: 2px 0 0 2px; }
.us-okaz__naroz--pg { inset-block-start: -1px; inset-inline-end: -1px;   border-width: 2px 2px 0 0; }
.us-okaz__naroz--ld { inset-block-end: -1px;   inset-inline-start: -1px; border-width: 0 0 2px 2px; }
.us-okaz__naroz--pd { inset-block-end: -1px;   inset-inline-end: -1px;   border-width: 0 2px 2px 0; }

.us-okaz__podpis {
	display: flex;
	flex-wrap: wrap;
	gap: var(--o-1) var(--o-4);
	align-items: baseline;
	margin-block-start: var(--o-4);
	font-size: var(--fs-mikro);
	color: var(--tekst-jasny-sl);
}
.us-okaz__podpis .us-mono { color: var(--pom-jasny); }
.us-okaz__opis { color: var(--stal); }

/* ------------------------------------------------------------- PRZYCISKI */
.us-przycisk {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--o-2);
	min-height: 52px;
	padding: var(--o-3) var(--o-7);
	border: 1px solid transparent;
	font-family: var(--f-naglowek);
	font-size: var(--fs-maly);
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition:
		background-color var(--t-krotki) var(--spr-szybka),
		border-color var(--t-krotki) var(--spr-szybka),
		color var(--t-krotki) var(--spr-szybka),
		transform var(--t-mikro) var(--spr-szybka);
}

.us-przycisk--akcent { background: var(--pom-btn); color: #fff; }
.us-przycisk--akcent:hover,
.us-przycisk--akcent:focus-visible { background: var(--pom-btn-h); transform: translateY(-2px); }

/* Wariant cichy: sama linia. Jeden mocny przycisk na ekran wystarczy,
   drugi ma byc drugim glosem, nie rownorzednym. */
.us-przycisk--cichy { background: transparent; border-color: oklch(0.78 0.02 60); color: var(--grafit); }
.us-ciemna .us-przycisk--cichy { border-color: var(--linia-ciemna); color: var(--tekst-jasny); }
.us-przycisk--cichy:hover,
.us-przycisk--cichy:focus-visible { border-color: var(--pom); color: var(--pom-tekst); transform: translateY(-2px); }
.us-ciemna .us-przycisk--cichy:hover,
.us-ciemna .us-przycisk--cichy:focus-visible { color: var(--pom-jasny); }

.us-przycisk--pelny { width: 100%; }

.us-przycisk--maly {
	min-height: 44px;
	padding: var(--o-2) var(--o-5);
	background: var(--pom-btn);
	color: #fff;
	white-space: nowrap;
}@media (hover: hover) {
.us-przycisk--maly:hover { background: var(--pom-btn-h); }
}

/* Podkreslenie wjezdzajace od lewej — sygnal bez zmiany ukladu. */
.us-link {
	position: relative;
	display: inline-block;
	padding-block-end: 2px;
	font-family: var(--f-naglowek);
	font-size: var(--fs-maly);
	font-weight: 600;
	text-decoration: none;
	color: var(--pom-tekst);
}
.us-ciemna .us-link { color: var(--pom-jasny); }
.us-link--zielony { color: var(--zielen-tekst); }
.us-ciemna .us-link--zielony,
.us-czolo .us-link--zielony { color: var(--zielen-jasna); }

.us-link::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--t-krotki) var(--spr-szybka);
}
.us-link:hover::after, .us-link:focus-visible::after { transform: scaleX(1); }

/* Sama kreska rysowana pseudoelementem to dla audytu stanow zmiana
   niewidoczna, a i dla oka slaby sygnal. Dokladamy zmiane barwy. */
.us-link:hover, .us-link:focus-visible { color: var(--pom-btn); }
.us-ciemna .us-link:hover,
.us-ciemna .us-link:focus-visible { color: var(--biel); }
.us-link--zielony:hover, .us-link--zielony:focus-visible { color: var(--tekst); }

/* -------------------------------------------------------------- NAGLOWEK
   Dwa poziomy. Gorny pasek niesie dane, ktorych szuka sie najpierw.
   Dolna belka: znak, nawigacja, telefon, jeden przycisk akcji.
   Przy przewijaniu gorny pasek sie zwija, belka zostaje na miejscu.
   Naglowek nigdy sie nie chowa — chowanie i wysuwanie przy przewijaniu
   to szarpanie, ktore czyta sie jak niedorobka. */
.us-naglowek {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 200;
}

.us-pasek {
	background: oklch(0.12 0.005 250);
	border-block-end: 1px solid oklch(0.97 0.002 250 / 0.07);
	overflow: hidden;
	max-height: 40px;
	transition: max-height var(--t-krotki) var(--spr-szybka),
		opacity var(--t-mikro) var(--spr-szybka);
}
.us-naglowek.jest-przewiniety .us-pasek { max-height: 0; opacity: 0; }

.us-pasek__srodek {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--o-6);
	width: var(--pas);
	margin-inline: auto;
	min-height: 40px;
	padding-inline: var(--px-tel);
	font-family: var(--f-mono);
	font-size: var(--fs-nano);
	letter-spacing: 0.08em;
	color: var(--stal);
}
@media (min-width: 768px)  { .us-pasek__srodek { padding-inline: var(--px-tab); } }
@media (min-width: 1200px) { .us-pasek__srodek { padding-inline: var(--px-desk); } }

.us-pasek__dane { display: flex; flex-wrap: wrap; align-items: center; gap: var(--o-5); }
.us-pasek__dane li { display: flex; align-items: center; gap: var(--o-5); }
.us-pasek__dane li + li::before {
	content: '';
	width: 1px;
	height: 10px;
	background: var(--linia-ciemna);
}
.us-pasek__dane a { text-decoration: none; transition: color var(--t-mikro) var(--spr-szybka); }@media (hover: hover) {
.us-pasek__dane a:hover { color: var(--pom-jasny); }
}

.us-pasek__teza { display: none; color: var(--pom-jasny); text-transform: uppercase; letter-spacing: 0.14em; }
@media (min-width: 900px) { .us-pasek__teza { display: block; } }
@media (max-width: 599px) { .us-pasek { display: none; } }

.us-belka {
	background: oklch(0.16 0.006 250 / 0.9);
	-webkit-backdrop-filter: blur(16px) saturate(1.3);
	backdrop-filter: blur(16px) saturate(1.3);
	border-block-end: 1px solid oklch(0.97 0.002 250 / 0.1);
	transition: background-color var(--t-krotki) var(--spr-szybka),
		border-color var(--t-krotki) var(--spr-szybka);
}
.us-naglowek.jest-przewiniety .us-belka {
	background: oklch(0.16 0.006 250 / 0.97);
	border-block-end-color: oklch(0.68 0.20 45 / 0.55);
}

/* Trzy kolumny: nawigacja jest wysrodkowana wzgledem STRONY, nie wzgledem
   miejsca, ktore zostalo po bokach. */
.us-belka__srodek {
	display: grid;
	/* Dwie sciezki, dopoki nawigacja jest ukryta. Element z `display: none`
	   NIE zajmuje sciezki w siatce, wiec przy zapisie `1fr auto 1fr` akcje
	   z hamburgerem wpadaly do SRODKOWEJ kolumny. Zmierzone na 390 px:
	   hamburger stal 171 px od prawej krawedzi zamiast przy niej. */
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: var(--o-6);
	width: var(--pas);
	margin-inline: auto;
	min-height: 74px;
	padding-inline: var(--px-tel);
}
@media (min-width: 768px)  { .us-belka__srodek { padding-inline: var(--px-tab); } }
@media (min-width: 1200px) { .us-belka__srodek { padding-inline: var(--px-desk); } }

.us-marka {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	text-decoration: none;
	transition: opacity var(--t-krotki) var(--spr-szybka), transform var(--t-mikro) var(--spr-szybka);
}
.us-marka:hover, .us-marka:focus-visible { opacity: 0.8; transform: translateY(-1px); }

/* Logo klienta jest ciemnografitowe, a belka czarna. */
/* Znak firmowy niesie wlasna barwe marki. Wczesniej szedl przez filtr
   brightness(0) invert(1), ktory robil go CALKIEM bialym i gubil
   pomarancz. Teraz plik jest przygotowany pod ciemne tlo: kwadraty
   w barwie marki, grafitowy napis przemalowany na jasny. */
.us-marka__logo { width: auto; height: 30px; }

.us-marka__nazwa {
	font-family: var(--f-naglowek);
	font-size: 1.25rem;
	font-weight: 700;
	font-style: italic;
	letter-spacing: -0.03em;
	color: var(--tekst-jasny);
}

.us-nawigacja { display: none; justify-self: center; }
@media (min-width: 1100px) {
	.us-nawigacja { display: block; }
	.us-belka__srodek { grid-template-columns: 1fr auto 1fr; }
}

.us-menu { display: flex; align-items: center; gap: var(--o-2); }

.us-menu a {
	position: relative;
	display: block;
	padding: var(--o-3);
	font-family: var(--f-naglowek);
	font-size: var(--fs-maly);
	font-weight: 500;
	font-stretch: 104%;
	text-decoration: none;
	color: var(--tekst-jasny-sl);
	transition: color var(--t-mikro) var(--spr-szybka);
}

/* Znacznik pozycji rysowany pseudoelementem, zeby nie przesuwal ukladu. */
.us-menu a::after {
	content: '';
	position: absolute;
	inset-inline: var(--o-3);
	inset-block-end: 10px;
	height: 1px;
	background: var(--pom);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--t-krotki) var(--spr-szybka);
}
.us-menu .current-menu-item > a,
.us-menu .current_page_item > a { color: var(--tekst-jasny); }
.us-menu .current-menu-item > a::after,
.us-menu .current_page_item > a::after { transform: scaleX(1); }

.us-menu a:hover, .us-menu a:focus-visible { color: var(--pom-jasny); }
.us-menu a:hover::after, .us-menu a:focus-visible::after { transform: scaleX(1); }

.us-belka__akcje { display: flex; align-items: center; justify-self: end; gap: var(--o-5); }

/* Telefon jako odczyt, nie kolejny przycisk. */
.us-tel {
	display: none;
	flex-direction: column;
	gap: 1px;
	text-decoration: none;
	color: var(--tekst-jasny-sl);
	transition: color var(--t-mikro) var(--spr-szybka),
		transform var(--t-mikro) var(--spr-szybka);
}
@media (min-width: 700px) { .us-tel { display: inline-flex; } }

.us-tel__etykieta {
	font-family: var(--f-mono);
	font-size: var(--fs-nano);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--stal);
}
.us-tel__numer {
	font-family: var(--f-mono);
	font-size: var(--fs-maly);
	font-weight: 500;
	color: var(--tekst-jasny);
	transition: color var(--t-mikro) var(--spr-szybka);
}
.us-tel:hover, .us-tel:focus-visible { color: var(--tekst-jasny); transform: translateY(-1px); }
.us-tel:hover .us-tel__numer, .us-tel:focus-visible .us-tel__numer { color: var(--pom-jasny); }

.us-belka__cta { display: none; min-height: 46px; padding-inline: var(--o-6); }
@media (min-width: 900px) { .us-belka__cta { display: inline-flex; } }

.us-zaslona__dol { margin-block-start: var(--o-8); display: flex; flex-direction: column; gap: var(--o-4); }
.us-zaslona__mail {
	font-family: var(--f-mono);
	font-size: var(--fs-maly);
	color: var(--tekst-jasny-sl);
	text-decoration: none;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}@media (hover: hover) {
.us-zaslona__mail:hover { color: var(--pom-jasny); }
}


/* ------------------------------------------------------------- HAMBURGER */
.us-hamburger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	width: 48px;
	height: 48px;
	/* 11 px, nie token: trzy kreski po 26 px maja stac optycznie
	   posrodku pola dotyku 48 px. Siatka 8 px daje tu 8 albo 16 — obie
	   wartosci widocznie rozjezdzaja hamburger. */
	padding: 0 11px;
	border: 1px solid var(--linia-ciemna);
	background: transparent;
	transition: border-color var(--t-krotki) var(--spr-szybka);
}
@media (min-width: 1024px) { .us-hamburger { display: none; } }@media (hover: hover) {
.us-hamburger:hover { border-color: var(--pom); }
}

.us-hamburger__kreska {
	display: block;
	width: 100%;
	height: 1.5px;
	background: var(--tekst-jasny);
	transition: transform var(--t-krotki) var(--spr-szybka), opacity var(--t-mikro) var(--spr-szybka);
}
.us-hamburger[aria-expanded="true"] .us-hamburger__kreska:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.us-hamburger[aria-expanded="true"] .us-hamburger__kreska:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* ----------------------------------------------------------- MENU NA TEL. */
.us-zaslona {
	position: fixed;
	inset: 0;
	z-index: 250;
	display: flex;
	flex-direction: column;
	padding: var(--o-5);
	background: var(--czern);
	color: var(--tekst-jasny);
	transform: translateX(100%);
	transition: transform var(--t-sredni) var(--spr-gladka);
	overflow-y: auto;
}
.us-zaslona[hidden] { display: none; }
.us-zaslona.jest-otwarta { transform: translateX(0); }

.us-zaslona__gora {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 48px;
	margin-block-end: var(--o-10);
}
.us-zaslona__tytul {
	font-family: var(--f-mono);
	font-size: var(--fs-nano);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--stal);
}
.us-zaslona__zamknij {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--linia-ciemna);
	background: transparent;
	color: var(--tekst-jasny);
}@media (hover: hover) {
.us-zaslona__zamknij:hover { border-color: var(--pom); color: var(--pom-jasny); }
}

.us-zaslona__nawigacja { flex: 1; }

.us-menu-mobilne a {
	display: flex;
	align-items: center;
	min-height: 56px;
	padding: var(--o-3) 0;
	border-block-end: 1px solid var(--linia-ciemna-sl);
	font-family: var(--f-naglowek);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	text-decoration: none;
	transition: color var(--t-krotki) var(--spr-szybka), padding-inline-start var(--t-krotki) var(--spr-szybka);
}
.us-menu-mobilne a:hover,
.us-menu-mobilne a:focus-visible { padding-inline-start: var(--o-3); color: var(--pom-jasny); }
.us-menu-mobilne .current-menu-item > a { color: var(--pom-jasny); }

.us-zaslona__tel { margin-block-start: var(--o-8); font-family: var(--f-mono); }

body.menu-otwarte { overflow: hidden; }

/* ==========================================================================
   SEKCJA OTWIERAJACA — ukosny podzial

   Konstrukcja zywcem ze starej strony: jasny panel z trescia po lewej,
   zdjecie po prawej, granica biegnie ukosem i jest podkreslona pasem
   w kolorze marki (tam zielonym, tu pomaranczowym). Pas i przyciecie
   zdjecia rysuje TA SAMA geometria procentowa, wiec sa rownolegle
   przy kazdej szerokosci okna.
   ========================================================================== */
.us-hero {
	position: relative;
	background:
		radial-gradient(80% 70% at 12% 20%, oklch(0.99 0.004 62) 0%, transparent 60%),
		linear-gradient(180deg, oklch(0.975 0.008 62) 0%, oklch(0.955 0.010 58) 100%);
	color: var(--tekst);
	overflow: hidden;
}

.us-hero__pas {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	width: var(--pas);
	min-height: 560px;
	margin-inline: auto;
	padding-inline: var(--px-tel);
	padding-block: calc(var(--wys-naglowka) + var(--o-10)) var(--o-12);
}
@media (min-width: 768px)  { .us-hero__pas { padding-inline: var(--px-tab); } }
@media (min-width: 1200px) { .us-hero__pas { padding-inline: var(--px-desk); } }

.us-hero__slowo { width: 100%; }
@media (min-width: 1000px) { .us-hero__slowo { width: 44%; } }

.us-hero__slowo .us-nad { display: block; margin-block-end: var(--o-5); }

/* Czcionka mniejsza niz w poprzednich podejsciach — uwaga Pawla. */
.us-hero__naglowek {
	font-size: clamp(2rem, 1.4rem + 2.5vw, 3.25rem);
	font-weight: 700;
	font-stretch: 108%;
	letter-spacing: -0.02em;
	line-height: 1.04;
	text-transform: uppercase;
	color: oklch(0.20 0.005 250);
}

/* Pierwsze slowo w kolorze marki na wlasnej linii — zabieg ze starej
   strony, gdzie „TECHNOLOGIA" byla zielona, a reszta czarna. */
.us-hero__akcent { display: block; color: var(--pom); }

.us-hero__lead {
	margin-block-start: var(--o-6);
	font-size: var(--fs-lead);
	line-height: 1.55;
	color: var(--tekst-slaby);
}

.us-hero__akcje { display: flex; flex-wrap: wrap; gap: var(--o-3); margin-block-start: var(--o-8); }

.us-fakty {
	display: flex;
	flex-wrap: wrap;
	gap: var(--o-6) var(--o-10);
	margin: var(--o-10) 0 0;
	padding-block-start: var(--o-6);
	border-block-start: 1px solid oklch(0.86 0.012 60);
}
.us-fakt { display: flex; flex-direction: column; gap: var(--o-1); }
.us-fakt dt {
	font-family: var(--f-mono);
	font-size: var(--fs-nano);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tekst-slaby);
}
.us-fakt dd {
	margin: 0;
	font-family: var(--f-naglowek);
	font-size: 1.625rem;
	font-weight: 700;
	font-stretch: 110%;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--pom-btn);
}
.us-fakt--szeroki dd {
	font-family: var(--f-mono);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--grafit);
}

/* ------------------------------------------------------ KADR ZA UKOSEM */
.us-hero__kadr { display: none; }

@media (min-width: 1000px) {
	.us-hero__kadr {
		display: block;
		position: absolute;
		inset-block: 0;
		inset-inline-end: 0;
		width: 54%;
		clip-path: polygon(24% 0, 100% 0, 100% 100%, 7% 100%);
	}

	.us-hero__obraz {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 55% 45%;
	}

	/* Pas marki wzdluz szwu i cienka grafitowa kreska obok. */
	.us-szew {
		position: absolute;
		inset-block: 0;
		inset-inline-end: 0;
		width: 54%;
		pointer-events: none;
		z-index: 1;
	}
	.us-szew--pas {
		background: var(--pom);
		clip-path: polygon(20.8% 0, 24.4% 0, 7.4% 100%, 3.8% 100%);
	}
	.us-szew--kreska {
		background: var(--grafit);
		clip-path: polygon(18.4% 0, 19.6% 0, 2.6% 100%, 1.4% 100%);
	}
}

/* Blok lat lezy na szwie, na wierzchu wszystkich warstw. Kotwica to pas
   tresci, wiec blok zawsze konczy sie nad paskiem marek. */
.us-lata {
	display: none;
	position: absolute;
	z-index: 3;
	inset-block-end: var(--o-8);
	inset-inline-start: 45%;
	flex-direction: column;
	gap: var(--o-2);
	padding: var(--o-5) var(--o-6);
	background: var(--pom-btn);
	color: #fff;
	box-shadow:
		0 2px 4px oklch(0.16 0.006 250 / 0.2),
		0 10px 20px oklch(0.16 0.006 250 / 0.18),
		0 24px 44px oklch(0.50 0.16 42 / 0.22);
}
@media (min-width: 1100px) { .us-lata { display: flex; } }

.us-lata__wartosc {
	font-family: var(--f-naglowek);
	font-size: clamp(2.25rem, 1.9rem + 1.4vw, 2.75rem);
	font-weight: 700;
	font-stretch: 112%;
	line-height: 0.9;
	letter-spacing: -0.03em;
}
.us-lata__opis { font-size: var(--fs-mikro); line-height: 1.45; opacity: 0.94; }

/* Kadr na telefonie: pod trescia, na pelna szerokosc, z lekkim ukosem
   gornej krawedzi — echo szwu z komputera. */
.us-hero__kadr-tel { margin: 0; }
@media (min-width: 1000px) { .us-hero__kadr-tel { display: none; } }

.us-hero__obraz-tel {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	clip-path: polygon(0 20px, 100% 0, 100% 100%, 0 100%);
}


/* ------------------------------------------------------ PASEK MAREK
   Nazwy maszyn, na ktorych ta firma pracuje, tuz pod pierwszym ekranem.
   To jest dowod kompetencji, a nie ozdobnik — i dlatego stoi wysoko. */
.us-marki {
	/* Nad kadrem w porzadku warstw: zdjecie za ukosem konczy sie na tym
	   pasku, a nie pod nim. */
	position: relative;
	z-index: 2;
	border-block-start: 1px solid oklch(0.87 0.012 60);
	background: oklch(0.94 0.012 58);
}

.us-marki__pas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--o-4) var(--o-8);
	width: var(--pas);
	margin-inline: auto;
	padding: var(--o-5) var(--px-tel);
}
@media (min-width: 768px)  { .us-marki__pas { padding-inline: var(--px-tab); } }
@media (min-width: 1200px) { .us-marki__pas { padding-inline: var(--px-desk); } }

.us-marki__etykieta {
	font-family: var(--f-mono);
	font-size: var(--fs-nano);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tekst-slaby);
}

.us-marki__lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--o-3) var(--o-7);
}

.us-marki__lista li {
	/* Krój zapasowy POSZERZONY — patrz blok @font-face na gorze pliku.
	   Bez niego lista skacze o wiersz w chwili doladowania Archivo. */
	font-family: 'Archivo', 'Archivo zapas szeroki', 'Segoe UI', system-ui, sans-serif;
	font-size: 1.0625rem;
	font-weight: 700;
	font-stretch: 112%;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--grafit);
}

.us-marki__reszta {
	font-weight: 400 !important;
	font-stretch: 100% !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	font-family: var(--f-tresc) !important;
	font-size: var(--fs-maly) !important;
	color: var(--tekst-slaby) !important;
}

/* ==========================================================================
   O FIRMIE
   ========================================================================== */
.us-o-firmie__gora { display: grid; gap: var(--o-8); }

/* Podzial na dwie kolumny dopiero od 1100 px. Przy 900-1100 kolumna
   naglowka miala 287-370 px przy czcionce ponad 30 px i „Technolodzy,
   nie przedstawiciele handlowi” lamalo sie na TRZY linie z samotnym
   „handlowi”. Zmierzone na 1024 px. */
@media (min-width: 1100px) {
	.us-o-firmie__gora {
		grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
		gap: var(--o-16);
		/* Bez tego pole naglowka rozciaga sie na cala wysokosc wiersza
		   i przyklejenie nie ma gdzie zadzialac. */
		align-items: start;
	}
}

.us-o-firmie__glowa { border: none; margin: 0; padding: 0; }
.us-o-firmie__glowa .us-nad { display: block; margin-block-end: var(--o-4); }

/* Naglowek zostaje na ekranie, kiedy proza i zdjecie obok jada dalej.
   Prawa kolumna jest wyrazne wyzsza, wiec przyklejenie ma okolo 600 px
   drogi, zanim naglowek zjedzie razem z koncem sekcji.
   Robi to `position: sticky`, a nie przeliczanie pozycji przy kazdym
   przewinieciu — jest plynne takze na telefonie i nie kosztuje klatek. */
@media (min-width: 1100px) {
	.us-o-firmie__glowa {
		position: sticky;
		inset-block-start: calc(var(--wys-naglowka) + var(--o-10));
	}
}

/* Ponizej 900 px kolumny sa jedna pod druga, wiec przyklejenie nie ma
   sensu — naglowek zaslanialby tresc. */

.us-o-firmie__kolumna { display: flex; flex-direction: column; gap: var(--o-12); }
.us-o-firmie__proza { color: var(--tekst-slaby); line-height: 1.75; }
.us-o-firmie__okaz { margin-block-start: var(--o-12); }

.us-tezy {
	display: grid;
	gap: var(--o-10);
	margin-block-start: var(--o-12);
	padding-block-start: var(--o-10);
	border-block-start: 1px solid var(--linia);
}
/* Trzy kolumny dopiero od 1200 px. Zmierzone przy progu 820: kolumna miala
   144 px szerokosci i 15 znakow w linii, przez co cztery zdania lamaly sie
   na dziewiec urwanych linijek. Miedzy 700 a 1200 px dwie kolumny daja
   okolo 55 znakow, czyli normalna dlugosc wiersza. */
@media (min-width: 700px) and (max-width: 1399px) {
	.us-tezy { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--o-10); }
}
@media (min-width: 1400px) {
	.us-tezy { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--o-12); }
}

.us-teza { display: flex; flex-direction: column; gap: var(--o-4); }
@media (min-width: 1400px) {
	.us-teza { padding-inline-end: var(--o-8); border-inline-end: 1px solid var(--linia-slaba); }
	.us-teza:last-child { border-inline-end: none; padding-inline-end: 0; }
}

/* Rysunki maja rozne proporcje, wiec rownamy je wysokoscia, nie polem.
   Kwadratowe pole robilo z szerokiego rysunku maluszka obok pozostalych. */
.us-teza__rysunek {
	display: flex;
	align-items: center;
	height: 72px;
	--ikona-grafit: var(--grafit);
	--ikona-akcent: var(--pom);
	--ikona-swiatlo: transparent;
}
.us-teza__rysunek svg { width: auto; height: 100%; }

.us-teza__tytul { font-size: var(--fs-h3); }
.us-teza__opis { font-size: var(--fs-maly); line-height: 1.65; color: var(--tekst-slaby); }

/* ==========================================================================
   TECHNOLOGIE
   ========================================================================== */
.us-tech-lista { display: flex; flex-direction: column; gap: var(--o-20); }
.us-tech { display: grid; gap: var(--o-8); align-items: center; }
@media (min-width: 900px) {
	.us-tech { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: var(--o-16); }
	.us-tech--odwrocony .us-tech__slowo { order: 2; }
	.us-tech--odwrocony .us-tech__okaz  { order: 1; }
}

.us-tech__nr {
	display: block;
	margin-block-end: var(--o-4);
	font-size: var(--fs-mikro);
	font-weight: 500;
	letter-spacing: 0.14em;
	color: var(--pom-jasny);
}
.us-tech__nazwa { font-size: var(--fs-h2); }
.us-tech__skrot {
	margin-block-start: var(--o-5);
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--tekst-jasny-sl);
}
.us-tech .us-proza { margin-block-start: var(--o-6); }

/* Odczyt materialow — etykieta i wartosc jak w karcie nastaw. */
.us-odczyt {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--o-4);
	align-items: baseline;
	margin-block: var(--o-8) 0;
	padding-block-start: var(--o-5);
	border-block-start: 1px solid var(--linia-ciemna);
}
.us-odczyt__etykieta {
	font-family: var(--f-mono);
	font-size: var(--fs-nano);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--stal);
}
.us-odczyt__wartosc { margin: 0; font-size: var(--fs-maly); color: var(--tekst-jasny); }

.us-tech .us-link { margin-block-start: var(--o-7); }
.us-tech__okaz .us-okaz__obraz { aspect-ratio: 4 / 3; }

/* --------------------------------------------------- GLOWA DWUKOLUMNOWA
   Naglowek po lewej, proza po prawej w wezszej kolumnie. Dlugi akapit
   ciagnacy sie przez cala szerokosc ekranu czyta sie fatalnie — oko gubi
   poczatek nastepnego wiersza. Szerokosc ogranicza KOLUMNA SIATKI,
   nie max-width na samym tekscie. */
.us-glowa--para {
	display: grid;
	gap: var(--o-6) var(--o-16);
	align-items: end;
}
@media (min-width: 900px) {
	.us-glowa--para { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1200px) {
	.us-glowa--para { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

.us-glowa__lewa .us-nad { display: block; margin-block-end: var(--o-4); }
.us-glowa__prawa { color: var(--tekst-slaby); line-height: 1.75; }
.us-ciemna .us-glowa__prawa { color: var(--tekst-jasny-sl); }

/* ==========================================================================
   ZAKRES PRAC — kafle z rysunkami
   Siatka na liniach wlosowych (szpary 1 px), kazdy kafel z dwubarwnym
   rysunkiem z tego samego zestawu, ktory gra w sekcji o firmie.
   ========================================================================== */
.us-kafle {
	display: grid;
	gap: 1px;
	background: var(--linia-slaba);
	border: 1px solid var(--linia-slaba);
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 560px)  { .us-kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .us-kafle { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1140px) { .us-kafle { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.us-kafel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--o-3);
	padding: var(--o-6) var(--o-5) var(--o-5);
	background: var(--biel);
	transition: background-color var(--t-krotki) var(--spr-szybka);
}@media (hover: hover) {
.us-kafel:hover { background: var(--papier-cien); }
}

/* Kreska marki rosnie od lewej wzdluz gornej krawedzi kafla. */
.us-kafel::before {
	content: '';
	position: absolute;
	inset-block-start: -1px;
	inset-inline: 0;
	height: 2px;
	background: var(--pom);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--t-krotki) var(--spr-szybka);
}@media (hover: hover) {
.us-kafel:hover::before { transform: scaleX(1); }
}

.us-kafel__nr {
	position: absolute;
	inset-block-start: var(--o-4);
	inset-inline-end: var(--o-4);
	font-size: var(--fs-mikro);
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--stal);
	transition: color var(--t-krotki) var(--spr-szybka);
}@media (hover: hover) {
.us-kafel:hover .us-kafel__nr { color: var(--pom-tekst); }
}

.us-kafel__rysunek {
	display: flex;
	align-items: center;
	height: 48px;
	--ikona-grafit: var(--grafit);
	--ikona-akcent: var(--pom);
	--ikona-swiatlo: transparent;
}
.us-kafel__rysunek svg { width: auto; height: 100%; max-width: 100%; }

/* Rysunek wolany z zestawu nie ma wlasnego viewBox — ten siedzi na symbolu.
   Dlatego rozmiar musi przyjsc z CSS, inaczej przegladarka wstawi domyslne
   300x150 px i kafle sie rozjada. */
.us-teza__rysunek .us-rysunek,
.us-kafel__rysunek .us-rysunek { width: 100%; height: 100%; }

.us-kafel__nazwa {
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	/* Miejsce na dwie linie zawsze, nawet gdy nazwa miesci sie w jednej.
	   Bez tego opis pod jednoliniowa nazwa startuje wyzej niz u sasiadow. */
	min-height: calc(1.3em * 2);
}

.us-kafel__opis {
	/* Wczesniej „margin-block-start: auto” dociskal opis do dolu kafla.
	   Przy jednoliniowym opisie („Elementy form i oprzyrzadowania”) spadal
	   o 20 px nizej niz dwuliniowi sasiedzi — zmierzone na 1440 i 900 px.
	   Teraz opis idzie zaraz po nazwie i wszystkie zaczynaja sie rowno.

	   Rozmiar: to jest TRESC, a nie etykieta — jedyne zdanie opisujace
	   usluge. Na telefonie idzie w gore do 15 px, bo ponizej tego progu
	   czyta sie go z trudem przy trzymaniu telefonu w reku. Na biurku
	   zostaje 14 px, gdzie odleglosc od ekranu jest wieksza. */
	font-size: var(--fs-mikro);
	line-height: 1.5;
	color: var(--tekst-slaby);
}

/* --------------------------------------------- WYROWNANIA W GLOWACH
   Krotki lead w glowie dwukolumnowej dochodzi do prawej krawedzi,
   a przycisk pod siatka stoi na srodku — uwagi Pawla. */
/* Dobicie do prawej ma sens TYLKO wtedy, gdy tekst stoi w prawej kolumnie
   glowy. Na waskim ekranie kolumny sie skladaja, akapit zajmuje cala
   szerokosc i wyrownany do prawej wyglada, jakby uciekal. */
@media (min-width: 900px) {
	.us-glowa__prawa--dokraw { text-align: end; }
}
.us-glowa__stopka { text-align: center; }


/* ==========================================================================
   TECHNOLOGIE — przeglad z kadrami
   ========================================================================== */
.us-tech-przeglad {
	display: grid;
	gap: var(--o-8);
}
@media (min-width: 640px)  { .us-tech-przeglad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .us-tech-przeglad { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--o-6); } }

.us-kadr__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
	/* Reakcja musi byc widoczna na samym odnosniku, nie tylko na jego
	   dzieciach — inaczej najechanie na opis nie daje zadnego sygnalu. */
	background: transparent;
	transition: background-color var(--t-krotki) var(--spr-szybka);
}
.us-kadr__link:hover,
.us-kadr__link:focus-visible { background: oklch(0.68 0.20 45 / 0.06); }

.us-kadr__obraz-pole {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--grafit);
	border-block-end: 2px solid transparent;
	transition: border-color var(--t-krotki) var(--spr-szybka);
}

.us-kadr__obraz {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	filter: saturate(0.85) brightness(0.82);
	transition: transform var(--t-sredni) var(--spr-gladka),
		filter var(--t-krotki) var(--spr-szybka);
}

.us-kadr__link:hover .us-kadr__obraz,
.us-kadr__link:focus-visible .us-kadr__obraz { transform: scale(1.05); filter: saturate(1) brightness(1); }
.us-kadr__link:hover .us-kadr__obraz-pole,
.us-kadr__link:focus-visible .us-kadr__obraz-pole { border-block-end-color: var(--pom); }

/* Numer siedzi na kadrze, w rogu, na ciemnej podkladce. */
.us-kadr__nr {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 34px;
	padding-inline: var(--o-3);
	background: oklch(0.12 0.005 250 / 0.88);
	font-family: var(--f-mono);
	font-size: var(--fs-mikro);
	font-weight: 500;
	letter-spacing: 0.12em;
	color: var(--pom-jasny);
}

.us-kadr__tresc {
	display: flex;
	flex-direction: column;
	gap: var(--o-2);
	padding-block-start: var(--o-5);
}

.us-kadr__nazwa {
	font-family: var(--f-naglowek);
	font-size: var(--fs-h3);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.012em;
	transition: color var(--t-krotki) var(--spr-szybka);
}@media (hover: hover) {
.us-kadr__link:hover .us-kadr__nazwa { color: var(--pom-jasny); }
}

.us-kadr__skrot { font-size: var(--fs-maly); line-height: 1.6; color: var(--tekst-jasny-sl); }

.us-kadr__mat {
	margin-block-start: auto;
	min-height: 3.25rem;
	padding-block-start: var(--o-4);
	border-block-start: 1px solid var(--linia-ciemna-sl);
	font-family: var(--f-mono);
	/* Lista materialow to INFORMACJA, po ktora gosc siega, a nie znacznik
	   sekcji — stad stopien wyzej niz etykiety. Zmierzone: przy 12 px
	   „termoplasty, tworzywa termoodporne i chemoodporne” czytalo sie
	   na telefonie z trudem. */
	font-size: var(--fs-mikro);
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--stal);
}

/* ==========================================================================
   PARK MASZYNOWY — plytki znamionowe
   Polowa galerii klienta to zdjecia tabliczek przykreconych do obudow.
   Ta sekcja mowi tym samym jezykiem.
   ========================================================================== */
.us-plytki {
	display: grid;
	gap: var(--o-5);
}
@media (min-width: 620px)  { .us-plytki { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .us-plytki { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.us-plytka {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--o-2);
	padding: var(--o-7) var(--o-8);
	background: linear-gradient(160deg,
		oklch(0.26 0.006 250) 0%,
		oklch(0.22 0.006 250) 55%,
		oklch(0.19 0.006 250) 100%);
	border: 1px solid oklch(0.97 0.002 250 / 0.1);
	/* Swiatlo od gory i cien od dolu — plytka ma wygladac na wytloczona,
	   a nie namalowana. */
	box-shadow:
		inset 0 1px 0 oklch(0.97 0.002 250 / 0.12),
		inset 0 -1px 0 oklch(0.10 0.004 250 / 0.5),
		0 1px 2px oklch(0.10 0.004 250 / 0.4);
	transition: transform var(--t-krotki) var(--spr-szybka),
		border-color var(--t-krotki) var(--spr-szybka);
}@media (hover: hover) {
.us-plytka:hover { transform: translateY(-2px); border-color: oklch(0.68 0.20 45 / 0.5); }
}

/* Dwa wkrety w gornych rogach. */
.us-plytka__srub {
	position: absolute;
	inset-block-start: 10px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%,
		oklch(0.55 0.008 250), oklch(0.24 0.006 250));
	box-shadow: 0 1px 0 oklch(0.97 0.002 250 / 0.12);
}
.us-plytka__srub--l { inset-inline-start: 10px; }
.us-plytka__srub--p { inset-inline-end: 10px; }

.us-plytka__producent {
	font-family: var(--f-naglowek);
	font-size: 1.5rem;
	font-weight: 700;
	font-stretch: 112%;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--tekst-jasny);
	line-height: 1.1;
}

.us-plytka__model {
	font-family: var(--f-mono);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--pom-jasny);
}

.us-plytka__typ {
	margin-block-start: auto;
	padding-block-start: var(--o-5);
	border-block-start: 1px solid oklch(0.97 0.002 250 / 0.1);
	font-size: var(--fs-maly);
	color: var(--stal);
}

/* ==========================================================================
   GALERIA — siatka asymetryczna
   ========================================================================== */
.us-siatka { display: grid; gap: var(--o-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .us-siatka { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Pierwszy kadr jest najlepszy, wiec dostaje cztery razy wiecej miejsca. */
@media (min-width: 768px) {
	.us-siatka__poz:first-child { grid-column: span 2; grid-row: span 2; }
	.us-siatka__poz:first-child .us-zdjecie__obraz { aspect-ratio: 1 / 1; }
}

.us-zdjecie {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--papier-cien);
	outline: 0 solid var(--pom);
	transition: outline-width var(--t-krotki) var(--spr-szybka);
}
.us-zdjecie:hover, .us-zdjecie:focus-visible { outline: 2px solid var(--pom); outline-offset: 2px; }

.us-zdjecie__obraz {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform var(--t-sredni) var(--spr-gladka);
}@media (hover: hover) {
.us-zdjecie:hover .us-zdjecie__obraz { transform: scale(1.04); }
}

.us-zdjecie__lupa {
	position: absolute;
	inset-block-end: var(--o-2);
	inset-inline-end: var(--o-2);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: var(--pom-btn);
	color: #fff;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--t-krotki) var(--spr-szybka), transform var(--t-krotki) var(--spr-szybka);
}
.us-zdjecie:hover .us-zdjecie__lupa,
.us-zdjecie:focus-visible .us-zdjecie__lupa { opacity: 1; transform: translateY(0); }

.us-lupa {
	max-width: 94vw;
	max-height: 94dvh;
	padding: 0;
	border: none;
	background: var(--czern);
	color: var(--tekst-jasny);
}
.us-lupa::backdrop { background: oklch(0.12 0.004 250 / 0.92); }
.us-lupa__obraz { max-width: 100%; max-height: 82dvh; width: auto; margin-inline: auto; object-fit: contain; }
.us-lupa__podpis { padding: var(--o-4); font-size: var(--fs-maly); text-align: center; color: var(--tekst-jasny-sl); }
.us-lupa__zamknij {
	position: absolute;
	inset-block-start: var(--o-3);
	inset-inline-end: var(--o-3);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: none;
	background: oklch(0.16 0.006 250 / 0.75);
	color: var(--tekst-jasny);
}@media (hover: hover) {
.us-lupa__zamknij:hover { background: var(--pom-btn); }
}

/* ==========================================================================
   ARTYKULY
   ========================================================================== */
.us-wpisy { display: grid; gap: var(--o-6); }
@media (min-width: 700px) { .us-wpisy { grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); } }

.us-wpis { border-block-start: 1px solid var(--linia); }

.us-wpis__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding-block-start: var(--o-5);
	text-decoration: none;
	background: transparent;
	transition: background-color var(--t-krotki) var(--spr-szybka);
}
.us-wpis__link:hover, .us-wpis__link:focus-visible { background: oklch(0.70 0.15 160 / 0.06); }

.us-wpis__figura { margin: 0 0 var(--o-5); overflow: hidden; }
.us-wpis__obraz {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform var(--t-sredni) var(--spr-gladka);
}@media (hover: hover) {
.us-wpis__link:hover .us-wpis__obraz { transform: scale(1.03); }
}

.us-wpis__tresc { display: flex; flex-direction: column; gap: var(--o-2); padding-inline: var(--o-1); }
.us-wpis__data {
	font-family: var(--f-mono);
	font-size: var(--fs-nano);
	letter-spacing: 0.1em;
	color: var(--zielen-tekst);
}
.us-wpis__tytul { font-size: var(--fs-h4); line-height: 1.28; transition: color var(--t-krotki) var(--spr-szybka); }@media (hover: hover) {
.us-wpis__link:hover .us-wpis__tytul { color: var(--zielen-tekst); }
}
.us-wpis__zajawka { font-size: var(--fs-maly); line-height: 1.6; color: var(--tekst-slaby); }

@media (min-width: 800px) {
	.us-wpisy--lista { grid-template-columns: minmax(0, 1fr); }
	.us-wpisy--lista .us-wpis__link { flex-direction: row; gap: var(--o-8); align-items: stretch; }
	.us-wpisy--lista .us-wpis__figura { flex: 0 0 30%; margin-block-end: 0; }
	.us-wpisy--lista .us-wpis__obraz { height: 100%; aspect-ratio: auto; }
	.us-wpisy--lista .us-wpis__tresc { flex: 1; justify-content: center; padding-block: var(--o-2) var(--o-6); }
}

/* ==========================================================================
   PYTANIA
   ========================================================================== */
.us-faq__lista { border-block-start: 1px solid var(--linia); }
.us-pytanie { border-block-end: 1px solid var(--linia-slaba); }

.us-pytanie__naglowek {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--o-5);
	min-height: 64px;
	padding-block: var(--o-4);
	cursor: pointer;
	list-style: none;
	font-family: var(--f-naglowek);
	font-size: var(--fs-h4);
	font-weight: 600;
	line-height: 1.35;
	transition: color var(--t-mikro) var(--spr-szybka);
}
.us-pytanie__naglowek::-webkit-details-marker { display: none; }@media (hover: hover) {
.us-pytanie__naglowek:hover { color: var(--pom-tekst); }
}

/* Znak plus rysowany dwiema kreskami. Obraca sie w krzyzyk po otwarciu. */
.us-pytanie__znak {
	position: relative;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	transition: transform var(--t-krotki) var(--spr-szybka);
}
.us-pytanie__znak::before, .us-pytanie__znak::after {
	content: '';
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 0;
	width: 100%;
	height: 1.5px;
	background: var(--pom-tekst);
}
.us-pytanie__znak::after { transform: rotate(90deg); }
.us-pytanie[open] .us-pytanie__znak { transform: rotate(45deg); }

.us-pytanie__tresc {
	padding-block: 0 var(--o-6);
	padding-inline-end: var(--o-10);
	color: var(--tekst-slaby);
	line-height: 1.7;
}
/* Element details potrafi przelaczac stan, a tresc i tak zostaje widoczna. */
.us-pytanie:not([open]) .us-pytanie__tresc { display: none; }

/* ==========================================================================
   KONTAKT — karta zgloszenia
   Lewa kolumna: telefon wielkosci naglowka, bo w tej branzy dzwoni sie
   pierwsze. Prawa: formularz zbudowany jak karta zgloszenia serwisowego —
   numerowane pozycje na liniach wlosowych, podkreslenia zamiast pudelek.
   ========================================================================== */
.us-zgloszenie {
	display: grid;
	gap: var(--o-10);
	align-items: start;
}
@media (min-width: 900px) {
	.us-zgloszenie {
		grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
		gap: var(--o-12);
	}
}

/* ------------------------------------------------------------ LEWA KOLUMNA */
.us-zgloszenie__bok {
	display: flex;
	flex-direction: column;
	gap: var(--o-8);
}
@media (min-width: 900px) {
	/* Dane jada z trescia formularza, zamiast uciekac na gore. */
	.us-zgloszenie__bok { position: sticky; top: calc(var(--wys-naglowka) + var(--o-8)); }
}

.us-bok__blok { display: flex; flex-direction: column; gap: var(--o-2); }

.us-bok__etykieta {
	font-family: var(--f-mono);
	font-size: var(--fs-nano);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--stal);
}

.us-bok__telefon {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	width: fit-content;
	/* Numer ma wage naglowka sekcji — to jest glowna droga kontaktu. */
	font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	text-decoration: none;
	color: var(--pom-jasny);
	transition: color var(--t-mikro) var(--spr-szybka);
}
.us-bok__telefon:hover,
.us-bok__telefon:focus-visible { color: var(--biel); }

.us-bok__drobne { font-size: var(--fs-maly); color: var(--tekst-jasny-sl); }

.us-bok__dane {
	display: flex;
	flex-direction: column;
	gap: var(--o-4);
	margin: 0;
	padding-block-start: var(--o-6);
	border-block-start: 1px solid var(--linia-ciemna);
}
.us-bok__poz { display: flex; flex-direction: column; gap: var(--o-1); }
.us-bok__poz dt {
	font-family: var(--f-mono);
	font-size: var(--fs-nano);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--stal);
}
.us-bok__poz dd {
	margin: 0;
	font-size: var(--fs-tresc);
	color: var(--tekst-jasny);
}
.us-bok__poz dd a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: inherit;
	text-decoration: none;
	border-block-end: 1px solid var(--linia-ciemna);
	transition: color var(--t-mikro) var(--spr-szybka),
		border-color var(--t-mikro) var(--spr-szybka);
}
.us-bok__poz dd a:hover,
.us-bok__poz dd a:focus-visible { color: var(--pom-jasny); border-color: var(--pom); }

.us-bok__teza {
	padding-inline-start: var(--o-4);
	border-inline-start: 2px solid var(--pom);
	font-size: var(--fs-maly);
	line-height: 1.6;
	color: var(--tekst-jasny-sl);
}
.us-bok__teza span { display: block; color: var(--stal); }

/* ------------------------------------------------- KARTA ZGLOSZENIA (prawa) */
.us-karta-zgl {
	display: flex;
	flex-direction: column;
	/* Barwa bazowa POD gradientem — panel malowany samym gradientem zglasza
	   tlo jako przezroczyste i kazdy audyt kontrastu czyta wtedy warstwe
	   spod spodu. */
	background-color: oklch(0.215 0.008 250);
	background-image: linear-gradient(168deg, oklch(0.235 0.010 250) 0%, oklch(0.185 0.006 250) 100%);
	border: 1px solid var(--linia-ciemna);
	box-shadow: var(--cien-3);
}

/* Belka karty: tytul + numer druku, jak na formularzu warsztatowym. */
.us-karta-zgl__belka {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--o-4);
	padding: var(--o-4) var(--o-6);
	border-block-end: 1px solid var(--linia-ciemna);
	background: oklch(0.16 0.006 250 / 0.6);
}
.us-karta-zgl__tytul {
	font-family: var(--f-mono);
	font-size: var(--fs-nano);
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tekst-jasny);
}
.us-karta-zgl__nr { font-size: var(--fs-nano); letter-spacing: 0.14em; color: var(--pom-jasny); }

/* ------------------------------------------------------------ POLA
   Trzecia wersja pol. Poprzednia byla ladna i nieczytelna: podkreslenia
   nie czytaly sie jak miejsce do wpisania, a podpowiedzi w srodku pola
   („Jan Kowalski”, „jan@firma.pl”) wygladaly na tresc juz wypelniona.
   Teraz: prawdziwa ramka pola, etykieta zwykla wielkoscia i krojem tresci,
   po prawej jednym slowem czy pole jest wymagane, a wskazowka POD polem. */
.us-karta-zgl__pola {
	display: flex;
	flex-direction: column;
	gap: var(--o-7);
	padding: var(--o-7) var(--o-6);
}
@media (min-width: 900px) { .us-karta-zgl__pola { padding: var(--o-8); gap: var(--o-8); } }

.us-pole { display: flex; flex-direction: column; gap: var(--o-2); }

.us-pole__glowa {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--o-4);
}

.us-pole__nazwa {
	display: flex;
	align-items: baseline;
	gap: var(--o-3);
	font-size: var(--fs-maly);
	font-weight: 500;
	line-height: 1.4;
	color: var(--tekst-jasny);
	cursor: pointer;
}

.us-pole__krok {
	font-size: var(--fs-nano);
	letter-spacing: 0.1em;
	color: var(--stal);
}

/* Jedno slowo zamiast gwiazdki. Gwiazdka wymaga legendy, slowo nie. */
.us-pole__stan {
	flex-shrink: 0;
	font-family: var(--f-mono);
	font-size: var(--fs-nano);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--stal);
}
.us-pole__stan--wymagane { color: var(--pom-jasny); }

/* Pole ma wygladac jak pole: wlasne tlo, ramka, wysokosc pod palec. */
.us-pole__wpis {
	width: 100%;
	min-height: 52px;
	padding: var(--o-3) var(--o-4);
	border: 1px solid var(--linia-ciemna);
	background: oklch(0.275 0.010 250);
	color: var(--tekst-jasny);
	font-family: var(--f-tresc);
	font-size: var(--fs-pole);
	line-height: 1.5;
	transition: border-color var(--t-krotki) var(--spr-szybka),
		background-color var(--t-krotki) var(--spr-szybka);
}
.us-pole__wpis--obszar { min-height: 9rem; resize: vertical; }@media (hover: hover) {
.us-pole__wpis:hover { border-color: var(--stal); }
}
.us-pole__wpis:focus {
	/* Zaznaczenie widoczne rowniez z klawiatury. */
	outline: 2px solid var(--pom);
	outline-offset: 2px;
	border-color: var(--pom);
	background: oklch(0.31 0.012 250);
}
/* Autouzupelnienie przegladarki wstawia wlasne biale tlo — przykrywamy je
   cieniem wewnetrznym, inaczej pole robi sie biale na ciemnej karcie. */
.us-pole__wpis:-webkit-autofill,
.us-pole__wpis:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--tekst-jasny);
	box-shadow: inset 0 0 0 100px oklch(0.275 0.010 250);
	transition: background-color 9999s;
}

/* Wskazowka pod polem, nie w srodku. */
.us-pole__pod {
	font-size: var(--fs-maly);
	line-height: 1.5;
	color: var(--tekst-jasny-sl);
}

/* Dwa pola obok siebie z wlasnymi etykietami. */
.us-pole__para { display: grid; gap: var(--o-4); }
@media (min-width: 560px) { .us-pole__para { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.us-podpole { display: flex; flex-direction: column; gap: var(--o-2); }
.us-podpole label {
	font-size: var(--fs-maly);
	color: var(--tekst-jasny-sl);
	cursor: pointer;
}

/* ------------------------------------------------------------ STOPKA KARTY */
.us-karta-zgl__stopka {
	display: flex;
	flex-direction: column;
	gap: var(--o-4);
	padding: var(--o-6);
	border-block-start: 1px solid var(--linia-ciemna);
	background: oklch(0.16 0.006 250 / 0.4);
}
@media (min-width: 900px) { .us-karta-zgl__stopka { padding: var(--o-6) var(--o-8); } }

.us-zgoda { display: flex; align-items: flex-start; gap: var(--o-3); }
.us-zgoda__zaznacz {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin-block-start: 2px;
	accent-color: var(--pom-btn);
	/* Kwadrat zostaje 22 px, bo wieksze pole wyboru wyglada niezgrabnie.
	   Powiekszamy sam OBSZAR DOTYKU niewidoczna otoczka, zeby palec trafial
	   w 44 px zgodnie z wytycznymi. `position: relative` jest potrzebne,
	   inaczej otoczka odnosi sie do najblizszego przodka. */
	position: relative;
	cursor: pointer;
}
.us-zgoda__zaznacz::after {
	content: "";
	position: absolute;
	/* (44 - 22) / 2 = 11 px z kazdej strony */
	inset: -11px;
}
.us-zgoda__tekst {
	font-size: var(--fs-maly);
	line-height: 1.5;
	color: var(--tekst-jasny-sl);
	cursor: pointer;
}

.us-karta-zgl__wyslij { width: 100%; }
@media (min-width: 620px) { .us-karta-zgl__wyslij { width: auto; align-self: flex-start; } }

.us-wymagane { color: var(--pom-tekst); }

.us-pulapka {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.us-formularz__odpowiedz { min-height: 1.5rem; font-size: var(--fs-maly); line-height: 1.5; }
.us-formularz__odpowiedz.jest-dobra { color: var(--zielen-jasna); }
.us-formularz__odpowiedz.jest-zla   { color: var(--pom-jasny); }
.us-karta-zgl.jest-wysylany { opacity: 0.6; pointer-events: none; }

.us-mapa { margin-block-start: var(--o-8); overflow: hidden; aspect-ratio: 21 / 9; }
.us-mapa iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.4) contrast(1.05); }


/* ==========================================================================
   CZOLO PODSTRONY
   ========================================================================== */
.us-czolo {
	position: relative;
	padding-block: calc(var(--wys-naglowka) + var(--sek-normalna)) var(--sek-ciasna);
	background: var(--czern);
	color: var(--tekst-jasny);
	border-block-end: 1px solid var(--pom);
}

.us-okruszki {
	display: flex;
	flex-wrap: wrap;
	gap: var(--o-2);
	margin-block-end: var(--o-6);
	font-family: var(--f-mono);
	font-size: var(--fs-mikro);
	color: var(--stal);
}
.us-okruszki a { color: var(--tekst-jasny-sl); text-decoration: none; }@media (hover: hover) {
.us-okruszki a:hover { color: var(--pom-jasny); }
}

.us-czolo__tytul { font-size: var(--fs-h1); letter-spacing: -0.035em; line-height: 1; }
.us-czolo__lead { margin-block-start: var(--o-6); font-size: var(--fs-lead); line-height: 1.5; color: var(--tekst-jasny-sl); }
.us-czolo__data { display: block; margin-block-start: var(--o-5); font-family: var(--f-mono); font-size: var(--fs-maly); color: var(--pom-jasny); }

/* -------------------------------------------------------------- ARTYKUL */
.us-artykul__figura { margin: 0 0 var(--o-12); overflow: hidden; }
.us-artykul__obraz { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

.us-stronicowanie { margin-block-start: var(--o-14); }
.us-stronicowanie .nav-links { display: flex; flex-wrap: wrap; gap: var(--o-2); justify-content: center; }
.us-stronicowanie .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	min-height: 48px;
	padding-inline: var(--o-3);
	border: 1px solid var(--linia);
	text-decoration: none;
	font-family: var(--f-mono);
	font-size: var(--fs-maly);
	transition: background-color var(--t-krotki) var(--spr-szybka),
		border-color var(--t-krotki) var(--spr-szybka), color var(--t-krotki) var(--spr-szybka);
}@media (hover: hover) {
.us-stronicowanie .page-numbers:hover,
.us-stronicowanie .page-numbers.current { background: var(--pom-btn); border-color: var(--pom-btn); color: #fff; }
}

/* ------------------------------------------------------------------- 404 */
.us-404 { padding-block: var(--sek-szeroka); }
.us-404__kod {
	display: block;
	font-family: var(--f-mono);
	font-size: clamp(3.5rem, 2.5rem + 4.5vw, 6rem);
	font-weight: 500;
	line-height: 1;
	color: var(--pom-jasny);
}
.us-404__tytul { margin-block-start: var(--o-6); font-size: var(--fs-h2); }
.us-404__lead { margin-block-start: var(--o-5); color: var(--tekst-jasny-sl); line-height: 1.6; }
.us-404__linki { display: flex; flex-wrap: wrap; gap: var(--o-2) var(--o-8); margin-block: var(--o-10); }
.us-404__linki a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tekst-jasny-sl); text-decoration: none; }@media (hover: hover) {
.us-404__linki a:hover { color: var(--pom-jasny); }
}

/* ==========================================================================
   STOPKA
   ========================================================================== */
.us-stopka {
	padding-block: var(--sek-normalna) var(--o-8);
	background: var(--czern);
	color: var(--tekst-jasny-sl);
	border-block-start: 1px solid var(--linia-ciemna);
}

.us-stopka__siatka { display: grid; gap: var(--o-10); }
@media (min-width: 640px)  { .us-stopka__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .us-stopka__siatka { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--o-12); } }

.us-stopka__logo { width: auto; height: 34px; }
.us-stopka__nazwa { font-family: var(--f-naglowek); font-size: 1.375rem; font-weight: 700; font-style: italic; color: var(--tekst-jasny); }
.us-stopka__haslo { margin-block-start: var(--o-5); font-size: var(--fs-maly); line-height: 1.6; }

.us-stopka__tytul {
	margin-block-end: var(--o-5);
	font-family: var(--f-mono);
	font-size: var(--fs-nano);
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--stal);
}

.us-stopka__lista { display: flex; flex-direction: column; gap: var(--o-3); font-size: var(--fs-maly); }
.us-stopka__lista li { display: flex; align-items: center; gap: var(--o-3); }
.us-stopka__lista a { text-decoration: none; transition: color var(--t-mikro) var(--spr-szybka); }
.us-stopka__lista a:hover, .us-stopka__lista a:focus-visible { color: var(--pom-jasny); }
.us-stopka__lista--menu li { display: block; }
.us-stopka__lista--menu a { display: inline-flex; align-items: center; min-height: 32px; }

/* Palec jest grubszy od kursora. Na urzadzeniach dotykowych kazdy odnosnik
   w stopce dostaje 44 px wysokosci — tyle, ile podaja wytyczne. Na biurku
   zostaje 32 px, bo mysza trafia dokladnie, a wyzsze wiersze rozdelyby
   stopke bez powodu.
   Zmierzone przed zmiana: siedem odnosnikow po 40 px na szerokosci 375. */
@media (pointer: coarse) {
	.us-stopka__lista a,
	.us-stopka__lista--menu a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

.us-stopka__dol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--o-3) var(--o-8);
	justify-content: space-between;
	align-items: center;
	margin-block-start: var(--o-14);
	padding-block-start: var(--o-6);
	border-block-start: 1px solid var(--linia-ciemna-sl);
	font-size: var(--fs-maly);
}
.us-stopka__nip { margin-inline-start: var(--o-3); color: var(--stal); }
.us-stopka__autor a { color: var(--tekst-jasny); text-decoration: none; }@media (hover: hover) {
.us-stopka__autor a:hover { color: var(--pom-jasny); }
}

/* -------------------------------------------- SLUCHAWKA I PASEK COOKIES */
.us-sluchawka {
	position: fixed;
	/* Sluchawka stoi NAD paskiem cookies, bo pasek ma wyzszy z-index i przy
	   pierwszej wizycie przechwytywal tapniecia. Samo „padding-inline-end”
	   na pasku nie wystarcza: pasek to nadal prostokat na pelna szerokosc,
	   a przy 157 px wysokosci siegal ponad sluchawke. Wysokosc paska podaje
	   skrypt, wiec dziala przy kazdej dlugosci tekstu i na kazdym ekranie. */
	inset-block-end: calc(var(--o-5) + var(--wys-cookies, 0px));
	inset-inline-end: var(--o-5);
	z-index: 190;
	transition: inset-block-end var(--t-sredni) var(--spr-gladka);
	display: none;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: var(--pom-btn);
	color: #fff;
	box-shadow: var(--cien-2);
	transition: transform var(--t-krotki) var(--spr-szybka), background-color var(--t-krotki) var(--spr-szybka);
}
.us-sluchawka.jest-widoczna { display: flex; }@media (hover: hover) {
.us-sluchawka:hover { background: var(--pom-btn-h); transform: scale(1.06); }
}
@media (min-width: 1024px) { .us-sluchawka { display: none !important; } }

.us-sluchawka__puls {
	position: absolute;
	inset: 0;
	background: var(--pom);
	/* Bez tego pierscien przejmuje dotkniecia obok przycisku. */
	pointer-events: none;
	animation: us-puls 2.6s ease-out infinite;
}
@keyframes us-puls {
	0%   { transform: scale(1); opacity: 0.45; }
	70%  { transform: scale(1.45); opacity: 0; }
	100% { transform: scale(1.45); opacity: 0; }
}

.us-cookies {
	position: fixed;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: 195;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--o-3) var(--o-6);
	/* Na komorce pasek ma byc niski. Poprzednio zajmowal 157 px, czyli
	   jedna piata ekranu, i to byla uwaga zglaszana wprost. */
	padding: var(--o-3) var(--o-4);
	background: oklch(0.16 0.006 250 / 0.97);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: var(--tekst-jasny-sl);
	border-block-start: 1px solid var(--linia-ciemna);
	transform: translateY(100%);
	transition: transform var(--t-sredni) var(--spr-gladka);
	font-size: var(--fs-maly);
}
.us-cookies[hidden] { display: none; }
.us-cookies.jest-widoczny { transform: translateY(0); }
.us-cookies__tekst { margin: 0; line-height: 1.45; }
.us-cookies__tekst a { color: var(--pom-jasny); }

/* Na waskim ekranie tekst i przycisk stoja w jednym wierszu, a tekst
   jest o stopien mniejszy. Zmierzone: 157 px wysokosci przed zmiana. */
@media (max-width: 599px) {
	.us-cookies {
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: var(--o-3);
		font-size: var(--fs-mikro);
	}
	.us-cookies .us-przycisk--maly { flex-shrink: 0; }
}
@media (min-width: 1024px) { .us-cookies { padding-inline: var(--o-5); } }

/* ------------------------------------------------- POLA DOTYKU NA TELEFONIE
   Kazdy element, w ktory sie stuka, ma miec co najmniej 44 px wysokosci.
   Ponizej tej wartosci palec trafia obok. Zmierzone skryptem stany.py. */
@media (hover: none), (max-width: 1023px) {
	.us-marka { min-height: 44px; }

	.us-link,
	.us-okruszki a,
	.us-stopka__lista a,
	.us-stopka__autor a,
	.us-404__linki a,
	.us-dane__wartosc {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	.us-stopka__lista li { align-items: center; min-height: 44px; }
	.us-stopka__lista--menu a { min-height: 44px; }
	.us-stronicowanie .page-numbers { min-width: 48px; min-height: 48px; }
}

/* ------------------------------------------------ RYTM NA MALYM EKRANIE
   Strona glowna ma dziewiec sekcji. Na telefonie kazdy odstep liczy sie
   podwojnie, bo wszystko stoi jedno pod drugim. Sciagamy oddechy sekcji
   i splaszczamy kadry, zeby nie zmuszac do przewijania przez 18 ekranow. */
@media (max-width: 767px) {
	.us-sekcja { padding-block: var(--o-12); }

	.us-glowa { margin-block-end: var(--o-8); }

	.us-tech-lista { gap: var(--o-14); }
	.us-tech { gap: var(--o-6); }
	.us-tech__okaz .us-okaz__obraz { aspect-ratio: 16 / 10; }

	.us-o-firmie__okaz .us-okaz__obraz { aspect-ratio: 16 / 10; }

	.us-tezy { margin-block-start: var(--o-10); padding-block-start: var(--o-8); gap: var(--o-8); }
	.us-teza__rysunek { width: 52px; height: 52px; }

	.us-formularz { padding: var(--o-5); }

	.us-stopka { padding-block: var(--o-12) var(--o-6); }
	.us-stopka__dol { margin-block-start: var(--o-10); }

	.us-hero__pas { padding-block-end: var(--o-12); }
	.us-hero { padding-block-start: var(--wys-naglowka); }
	.us-parametr { min-height: 0; padding-block: var(--o-5); }
}

/* ---------------------------------------------- WIECEJ SWIATLA W SEKCJACH
   Cztery ciemne sekcje z rzedu robily ze strony tunel. Ciemne dostaja
   glebie zamiast plaskiej czerni, jasne — cieplejszy papier i cien pod
   elementami, zeby nie byly plaskimi prostokatami. */
.us-ciemna {
	background:
		radial-gradient(120% 80% at 12% 0%,
			oklch(0.22 0.008 250) 0%, transparent 60%),
		radial-gradient(90% 70% at 92% 100%,
			oklch(0.24 0.02 45 / 0.35) 0%, transparent 62%),
		var(--czern);
}

/* Panel pod trzema tezami. Stara strona miala w tym miejscu jasny panel
   i to jej sluzylo — rozbijal monotonie. */
.us-tezy {
	position: relative;
	margin-block-start: var(--o-12);
	padding: var(--o-12) var(--o-10);
	border-block-start: none;
	background:
		linear-gradient(180deg,
			oklch(0.97 0.006 60) 0%,
			oklch(0.955 0.008 55) 100%);
	box-shadow:
		0 1px 1px oklch(0.16 0.006 250 / 0.03),
		0 2px 2px oklch(0.16 0.006 250 / 0.03),
		0 4px 4px oklch(0.16 0.006 250 / 0.03),
		0 8px 8px oklch(0.16 0.006 250 / 0.03);
}

/* Kreska marki wzdluz gornej krawedzi panelu. */
.us-tezy::before {
	content: '';
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	background: linear-gradient(90deg,
		var(--pom) 0%, var(--pom) 22%, oklch(0.88 0.02 60) 22%);
}

@media (max-width: 767px) {
	.us-tezy { padding: var(--o-8) var(--o-5); }
}

.us-teza__rysunek { --ikona-swiatlo: oklch(0.965 0.007 58); }

@media (min-width: 820px) {
	.us-teza { border-inline-end-color: oklch(0.88 0.01 60); }
}

/* Kadry technologii: obraz nie ma byc przygaszony do szarosci. */
.us-kadr__obraz { filter: saturate(0.95) brightness(0.94); }@media (hover: hover) {
/* Plytki znamionowe: cieplejszy odblask na krawedzi. */
.us-plytka:hover {
	box-shadow:
		inset 0 1px 0 oklch(0.97 0.002 250 / 0.18),
		inset 0 -1px 0 oklch(0.10 0.004 250 / 0.5),
		0 2px 4px oklch(0.10 0.004 250 / 0.4),
		0 10px 24px oklch(0.68 0.20 45 / 0.16);
}
}

/* ---------------------------------------------- POPRAWKI Z LISTY PAWLA */

/* Glowa z dluga proza obok: wyrownanie do gory. Do dolu wygladalo tak,
   jakby tytul spadl na dno pustej kolumny. */
.us-glowa--gora { align-items: start; }
.us-glowa--gora .us-glowa__prawa { font-size: var(--fs-maly); line-height: 1.75; }

/* Park maszynowy: piec plytek w ukladzie 3 + 2 — trzy w gornym rzedzie,
   dwie szersze w dolnym. Siatka szesciosciezkowa. */
@media (min-width: 700px) {
	.us-plytki { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.us-plytka { grid-column: span 2; }
	.us-plytka:nth-child(4),
	.us-plytka:nth-child(5) { grid-column: span 3; }
}

/* Lepsze tlo sekcji maszyn: modularna siatka ze znaku firmowego
   i ciepla poswiata zamiast plaskiej czerni. */
.us-park {
	background:
		linear-gradient(oklch(0.97 0.002 250 / 0.04) 1px, transparent 1px),
		linear-gradient(90deg, oklch(0.97 0.002 250 / 0.04) 1px, transparent 1px),
		radial-gradient(85% 90% at 88% 6%, oklch(0.30 0.05 45 / 0.32) 0%, transparent 58%),
		radial-gradient(120% 80% at 8% 100%, oklch(0.22 0.008 250) 0%, transparent 60%),
		var(--czern);
	background-size: 44px 44px, 44px 44px, auto, auto, auto;
}

/* ---------------------------------------------- GALERIA JAKO KARUZELA
   Zdjecia plyna w jednym kierunku bez przerwy i bez suwaka. Rzad zawiera
   DWA komplety tych samych zdjec, a przesuw konczy sie dokladnie na -50%,
   wiec petla wraca w to samo miejsce i szwu nie widac.
   Pod kursorem i przy zaznaczeniu z klawiatury karuzela staje — inaczej
   nie da sie w nic trafic. */
.us-karuzela {
	/* Stan wyjsciowy, gdy JavaScript nie powielil zdjec: zwykly rzad do
	   przewiniecia. Dopiero po podwojeniu kompletu wlacza sie przesuw. */
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
	padding-block: var(--o-2) var(--o-4);
	/* Zdjecia wygasaja przy krawedziach zamiast urywac sie plaskim cieciem. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6rem,
		#000 calc(100% - 6rem), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 6rem,
		#000 calc(100% - 6rem), transparent 100%);
}
@media (max-width: 599px) {
	.us-karuzela {
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2rem,
			#000 calc(100% - 2rem), transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 2rem,
			#000 calc(100% - 2rem), transparent 100%);
	}
}

.us-karuzela.jest-plynna { overflow: hidden; }

.us-karuzela__rzad {
	display: flex;
	gap: var(--o-3);
	width: max-content;
}

.us-karuzela.jest-plynna .us-karuzela__rzad {
	animation: us-plyn var(--czas, 56s) linear infinite;
	will-change: transform;
}
/* Przesuw o polowe szerokosci rzadu, czyli o dokladnie jeden komplet zdjec.
   Polowa gapu na koncu domyka rytm, zeby przeskok nie zjadl odstepu. */
@keyframes us-plyn {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(calc(-50% - var(--o-3) / 2), 0, 0); }
}

.us-karuzela:hover .us-karuzela__rzad,
.us-karuzela:focus-within .us-karuzela__rzad { animation-play-state: paused; }

.us-karuzela__poz { flex: 0 0 auto; }

.us-karuzela__obraz {
	height: 240px;
	width: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	transition: transform var(--t-sredni) var(--spr-gladka),
		filter var(--t-sredni) var(--spr-gladka);
}
@media (max-width: 599px) { .us-karuzela__obraz { height: 180px; } }@media (hover: hover) {
.us-karuzela .us-zdjecie:hover .us-karuzela__obraz { transform: scale(1.04); }
}

/* Kto wylaczyl animacje w systemie, dostaje zwykla tasme do przewiniecia.
   Drugi komplet zdjec wtedy znika, zeby nie ogladac tego samego dwa razy. */
@media (prefers-reduced-motion: reduce) {
	.us-karuzela, .us-karuzela.jest-plynna { overflow-x: auto; scroll-snap-type: x proximity; }
	.us-karuzela.jest-plynna .us-karuzela__rzad { animation: none; }
	.us-karuzela__poz[aria-hidden='true'] { display: none; }
	.us-karuzela__poz { scroll-snap-align: center; }
}

/* ---------------------------------------------- PYTANIA W DWOCH KOLUMNACH */
.us-faq__lista {
	border-block-start: none;
	display: grid;
	align-items: start;
	gap: 0 var(--o-16);
}
@media (min-width: 900px) { .us-faq__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.us-pytanie { border-block-start: 1px solid var(--linia-slaba); border-block-end: none; }

.us-pytanie__naglowek {
	min-height: 52px;
	padding-block: var(--o-4);
	font-size: var(--fs-tresc);
}

.us-pytanie__tresc { padding-block-end: var(--o-5); font-size: var(--fs-maly); }


/* ---------------------------------------------------------------- RUCH */
.us-anim {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 480ms var(--spr-gladka), transform 480ms var(--spr-gladka);
}
.us-anim.jest-widoczna { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.us-anim { opacity: 1; transform: none; }
}

/* Bez skryptu tresc musi byc widoczna. */
.no-js .us-anim { opacity: 1; transform: none; }

/* ==========================================================================
   ZASLONA „W BUDOWIE”
   Podstrony do czasu akceptacji wygladu. Nie komunikat wtyczki serwisowej,
   tylko ekran w barwach firmy — z tym samym ukosnym szwem co sekcja
   powitalna, zeby czytal sie jak czesc projektu.
   ========================================================================== */
.us-kurtyna-body { background: var(--czern); }

.us-kurtyna {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	/* Dynamiczna jednostka, bo na iOS pasek adresu chowa sie i wraca. */
	min-height: 100dvh;
	padding-block: var(--section-md);
	padding-inline: var(--px-tel);
	background-color: var(--czern);
	background-image:
		radial-gradient(90% 80% at 82% 8%, oklch(0.30 0.05 45 / 0.30) 0%, transparent 60%),
		radial-gradient(110% 90% at 6% 100%, oklch(0.22 0.008 250) 0%, transparent 62%);
	color: var(--tekst-jasny);
}
@media (min-width: 768px) { .us-kurtyna { padding-inline: var(--px-tab); } }
@media (min-width: 1200px) { .us-kurtyna { padding-inline: var(--px-desk); } }

/* Ta sama geometria co szew w sekcji powitalnej — pasy zostaja rownolegle. */
.us-kurtyna__szew { position: absolute; inset-block: 0; inset-inline: 0; pointer-events: none; }
.us-kurtyna__szew--pas {
	background: var(--pom);
	clip-path: polygon(78.8% 0, 82.4% 0, 65.4% 100%, 61.8% 100%);
	opacity: 0.9;
}
.us-kurtyna__szew--kreska {
	background: var(--stal);
	clip-path: polygon(76.4% 0, 77.6% 0, 60.6% 100%, 59.4% 100%);
	opacity: 0.35;
}
@media (max-width: 767px) {
	.us-kurtyna__szew--pas { clip-path: polygon(86% 0, 92% 0, 62% 100%, 56% 100%); }
	.us-kurtyna__szew--kreska { clip-path: polygon(82% 0, 84% 0, 54% 100%, 52% 100%); }
}

.us-kurtyna__tresc {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--o-5);
	width: 100%;
	margin-inline: auto;
	max-width: var(--pas);
}

.us-kurtyna__znak {
	display: inline-flex;
	align-items: center;
	/* Znak jest linkiem do strony glownej, wiec musi miec pole dotyku 44 px
	   i widoczna reakcje na kursor. Zmierzone przed poprawka: 189x36 px
	   i zero zmiany przy najechaniu. */
	min-height: 44px;
	margin-block-end: var(--o-6);
	opacity: 0.92;
	transition: opacity var(--t-krotki) var(--spr-szybka),
		transform var(--t-krotki) var(--spr-szybka);
}
.us-kurtyna__znak:hover,
.us-kurtyna__znak:focus-visible { opacity: 1; transform: translateY(-2px); }
.us-kurtyna__znak img { height: clamp(2.25rem, 2rem + 1vw, 3rem); width: auto; }
.us-kurtyna__nazwa {
	font-family: var(--f-naglowek);
	font-size: var(--fs-h3);
	font-weight: 700;
	color: var(--tekst-jasny);
}

.us-kurtyna__nad { color: var(--pom-jasny); }

.us-kurtyna__naglowek {
	margin: 0;
	font-family: var(--f-naglowek);
	font-size: clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.025em;
	text-wrap: balance;
}
.us-kurtyna__akcent { display: block; color: var(--pom-jasny); }

.us-kurtyna__lead {
	font-size: var(--fs-tresc);
	line-height: 1.7;
	color: var(--tekst-jasny-sl);
}

.us-kurtyna__akcje {
	display: flex;
	flex-wrap: wrap;
	gap: var(--o-3);
	margin-block-start: var(--o-3);
}
.us-kurtyna .us-przycisk--cichy { color: var(--tekst-jasny); border-color: var(--linia-ciemna); }@media (hover: hover) {
.us-kurtyna .us-przycisk--cichy:hover { border-color: var(--pom); color: var(--pom-jasny); }
}

/* Pelny tekst oferty na podstronie — akapity pod glowa sekcji, pelna
   szerokosc pasa, bez zwezania kolumny. */
.us-oferta__proza {
	display: flex;
	flex-direction: column;
	gap: var(--o-5);
	margin-block-end: var(--o-12);
	font-size: var(--fs-tresc);
	line-height: 1.75;
	color: var(--tekst-slaby);
}

/* ==================================================== POPRAWKI NA TELEFON
   Sesja 7.08: sześć uwag Pawła po obejrzeniu na komórce.
   ====================================================================== */

/* Znak firmowy w rozwinietym menu. Bez niego ekran menu nie mowil,
   na czyjej stronie sie jest. */
.us-zaslona__znak {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	opacity: 0.95;
	transition: opacity var(--t-krotki) var(--spr-szybka);
}
.us-zaslona__znak:hover,
.us-zaslona__znak:focus-visible { opacity: 1; }
/* Ten sam filtr co w nagloweku i stopce. Bez niego ciemny napis znaku
   lezy na czerni menu — zmierzone: kontrast 1,47:1, jasnych pikseli 7,3%,
   czyli widac same pomaranczowe kwadraciki, a slowo „Ustawiacz.pl" znika. */
.us-zaslona__znak img {
	height: 30px;
	width: auto;
}
.us-zaslona__nazwa {
	font-family: var(--f-naglowek);
	font-size: 1.125rem;
	font-weight: 700;
	font-style: italic;
	color: var(--tekst-jasny);
}

@media (max-width: 767px) {
	/* Sekcja powitalna zaczynala sie za nisko: do wysokosci paska (74 px)
	   dochodzil jeszcze pelny oddech sekcji. Na telefonie liczy sie kazdy
	   ekran, wiec zostaje sam pasek plus niewielki odstep. */
	.us-hero__pas { padding-block-start: var(--o-8); }

	/* ------------------------------------------------ STOPKA KOMPAKTOWA
	   Mierzone przed zmiana: 1113 px na ekranie 390 px, czyli ponad pelny
	   ekran samej stopki. Cztery bloki jeden pod drugim to za duzo — trzy
	   listy odnosnikow ida w dwie kolumny, znak zostaje na pelnej szerokosci.
	   Samo docinanie odstepow dawalo 1070 px, czyli prawie nic. */
	.us-stopka { padding-block: var(--o-10) var(--o-6); }
	.us-stopka__siatka {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--o-7) var(--o-6);
	}
	.us-stopka__marka { grid-column: 1 / -1; }

	.us-stopka__blok { border-block-start: 1px solid var(--linia-ciemna); padding-block-start: var(--o-4); }
	.us-stopka__tytul { margin-block-end: var(--o-3); }
	.us-stopka__lista { gap: var(--o-1); }
	/* Pole dotyku 44 px, nie 40. Wczesniej stalo tu 40 z adnotacja „prog
	   z audytu” — audyt mial wtedy inny prog. Wytyczne mowia 44 px i tyle
	   ustawiamy; ta regula jest ponizej bloku (pointer: coarse), wiec to
	   ona rozstrzyga na telefonie. */
	.us-stopka__lista a,
	.us-stopka__lista--menu a { min-height: 44px; }

	/* Opis uslugi to tresc, nie etykieta — na telefonie 15 px. */
	.us-kafel__opis { font-size: var(--fs-maly); }

	/* Pasek ciasteczek: gosc ma podjac decyzje, wiec musi przeczytac,
	   czego dotyczy. Na telefonie idzie do 15 px. */
	.us-cookies__tekst { font-size: var(--fs-maly); }
	/* Lista materialow rowniez — na telefonie o stopien wyzej. */
	.us-kadr__mat { font-size: var(--fs-maly); }
	.us-stopka__lista li { align-items: flex-start; }

	/* Trzeci blok stal sam w rzedzie z pusta polowa obok. Rozciagamy go
	   na cala szerokosc, a jego liste ukladamy w dwie kolumny. */
	.us-stopka__blok:last-of-type { grid-column: 1 / -1; }
	.us-stopka__blok:last-of-type .us-stopka__lista {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 var(--o-6);
	}

	/* Znak i haslo ciasniej. */
	.us-stopka__logo { height: 26px; }
	.us-stopka__haslo { margin-block-start: var(--o-2); }
}