/* === BAZA: zmienne, reset, typografia === */

:root {
	--petrol: #0d4f6c;          /* kolor główny firmy */
	--petrol-ciemny: #082f3f;   /* ciemny granat-petrol */
	--akcent: #12a5b0;          /* akcent turkusowy */
	--akcent-jasny: #e3f4f6;    /* tło podświetleń */
	--tlo: #f5f8fa;             /* tło sekcji */
	--tekst: #1a2e36;
	--tekst-2: #52676f;
	--linia: #d9e4e9;
	--biel: #ffffff;
	--promien: 10px;
	--cien: 0 8px 24px rgba(8, 47, 63, 0.08);
	--cien-mocny: 0 14px 34px rgba(8, 47, 63, 0.16);
	--maks: 1180px;
	--font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
	font-family: var(--font);
	color: var(--tekst);
	background: var(--biel);
	line-height: 1.6;
	font-size: 16px;
}

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

a { color: var(--petrol); text-decoration: none; }
a:hover { color: var(--akcent); }

h1, h2, h3, h4 { line-height: 1.2; color: var(--petrol-ciemny); font-weight: 800; }

h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: 1.2rem; }

.kontener { max-width: var(--maks); margin: 0 auto; padding: 0 20px; }

.sekcja { padding: 64px 0; }
.sekcja.tlo { background: var(--tlo); }

.etykieta-sekcji {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--akcent);
	margin-bottom: 10px;
}

.naglowek-sekcji { max-width: 720px; margin-bottom: 36px; }
.naglowek-sekcji.srodek { margin-left: auto; margin-right: auto; text-align: center; }
.naglowek-sekcji p { color: var(--tekst-2); margin-top: 10px; }

.przycisk {
	display: inline-block;
	padding: 13px 28px;
	border-radius: var(--promien);
	font-weight: 700;
	font-size: 0.95rem;
	background: var(--petrol);
	color: var(--biel);
	border: 2px solid var(--petrol);
	transition: background 0.2s, border-color 0.2s, transform 0.15s;
	cursor: pointer;
}
.przycisk:hover { background: var(--akcent); border-color: var(--akcent); color: var(--biel); transform: translateY(-1px); }

.przycisk.pusty { background: transparent; color: var(--petrol); }
.przycisk.pusty:hover { background: var(--akcent-jasny); color: var(--petrol); }

.przycisk.jasny { background: var(--biel); border-color: var(--biel); color: var(--petrol); }
.przycisk.jasny:hover { background: var(--akcent-jasny); border-color: var(--akcent-jasny); }

.ekran-czytnika {
	position: absolute; width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

@media (max-width: 720px) {
	.sekcja { padding: 44px 0; }
}