/* =========================================================================
   Strona główna (front-page) — zamow-kontener.pl
   Prefiks .zk-hm__. Tokeny --zk-* pochodzą z :root w assets/site-header.css.
   Zasady kolorów jak wszędzie:
   - #84BF2A (--zk-green) = tylko akcent graficzny (ikony, kreski). NIGDY tło
     pod biały tekst ani kolor tekstu na jasnym tle (od tego --zk-green-dark).
   - Kolor akcji (CTA) = --zk-red; pigułka = wyłącznie przyciski.
   - Karty/kontenery = --zk-r-card (12px); kontrolki = --zk-r-control (8px).
   FUNDAMENT (etap 1): hero + pasek zaufania + dwie ścieżki.
   ========================================================================= */

/* --------------------------------------------------------------- Baza */
.zk-hm {
	max-width: var(--zk-max, 1240px);
	margin-inline: auto;
	/* Boczny padding = jak header/stopka i pozostałe strony (max 20px) — spójność sitewide. */
	padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 20px) clamp(2.5rem, 6vw, 4.5rem);
	color: var(--zk-ink, #23291c);
	/* Font jak reszta serwisu — brak globalnej reguły body, każdy kontener
	   ustawia Inter sam (patrz warstwa-wspolna-komponenty.md). */
	font-family: var(--zk-font, sans-serif); /* kanon: zk-ui.css (Geist) */
	font-size: 1.05rem;
	line-height: 1.6;
}
.zk-hm h1, .zk-hm h2 { letter-spacing: -.01em; } /* kolor h1/h2 ustawiają klasy (.zk-ui-h2, hero) */
/* Linki tekstowe zielone — ALE nie przyciski wspólnej warstwy (te mają własny
   kolor). :not() ratuje przed konfliktem specyficzności `.zk-hm a` (0,1,1). */
.zk-hm a:not(.zk-ui-btn) { color: var(--zk-green-dark, #487214); }
.zk-hm :focus-visible {
	outline: 2px solid var(--zk-green-dark, #487214);
	outline-offset: 2px;
}

/* Przyciski: WSPÓLNA warstwa .zk-ui-btn (assets/zk-ui.css). Tu tylko wyjątki
   kontekstowe hero — patrz „01 Hero → telefon". */

/* --------------------------------------------------------------- 01 Hero */
.zk-hm__hero {
	position: relative;
	padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.5rem, 5vw, 4rem);
	margin-bottom: 0; /* hero schodzi keylinem prosto na pasek USP — bez białej przerwy */
}
/* Pełnoszerokościowa „scena" hero — wielotonowy, miękkozielony gradient (różne
   odcienie zamiast płaskiego koloru) + jasnozielona linia oddzielająca od kolejnej
   sekcji. Pseudo-element (nie clip-path) — NIE przycina cieni kart. */
.zk-hm__hero::before {
	content: ""; position: absolute; z-index: 0;
	left: 50%; transform: translateX(-50%);
	width: 100vw;
	top: calc(-1 * clamp(1.5rem, 4vw, 3rem)); /* dosuń tło pod header */
	bottom: 0;
	/* Wielowarstwowa zielona powierzchnia — rozbłyski (jasne + zielone) i cienie
	   dają głębię zamiast płaskiego koloru. Baza z lekkim przejściem tonalnym. */
	background:
		radial-gradient(85% 120% at 88% 2%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 45%),   /* jasny rozbłysk prawy-góra */
		radial-gradient(75% 95% at 100% 55%, rgba(132, 191, 42, .22), rgba(132, 191, 42, 0) 52%),      /* zielona poświata przy zdjęciu */
		radial-gradient(70% 90% at 4% 102%, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0) 55%),                  /* cień dół-lewa (głębia) */
		radial-gradient(60% 80% at 60% 120%, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0) 60%),                 /* cień u dołu */
		linear-gradient(158deg, #517f19 0%, #487214 52%, #3c5f11 100%);                                 /* baza: jaśniej u góry, ciemniej u dołu */
	border-bottom: 2px solid var(--zk-green, #84bf2a); /* jasnozielony keyline — jak w pre-stopce */
}
.zk-hm__hero-grid {
	position: relative; z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

/* --- Lewa kolumna (treść + CTA) --- */
.zk-hm__hero-main { max-width: 620px; }
/* Ciemnozielona „scena" → tekst hero na biało (kontrast jak w pre-stopce). */
.zk-hm__hero-main { color: #fff; }
.zk-hm__hero .zk-hm__h1 { color: #fff; }
.zk-hm__hero .zk-hm__h1-accent {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: var(--zk-green, #84bf2a);
	text-decoration-thickness: .09em;
	text-underline-offset: .12em;
}
.zk-hm__hero .zk-hm__lead { color: rgba(255, 255, 255, .92); }
/* Eyebrow = półprzezroczysty chip z zielonym ptaszkiem — spójny z chipsami USP
   w pre-stopce (rgba biel + jasna obwódka + jasnozielony „check"). */
.zk-hm__eyebrow {
	display: inline-flex; align-items: center; gap: .5rem;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .24);
	color: #fff;
	font-weight: 600; font-size: .9rem; letter-spacing: 0;
	padding: .5rem .95rem .5rem .7rem; border-radius: 999px; margin-bottom: 1.2rem;
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.zk-hm__eyebrow-check {
	flex: 0 0 auto; width: 18px; height: 18px;
	color: var(--zk-green, #84bf2a); /* jasnozielony ptaszek */
}
.zk-hm__h1 {
	font-size: clamp(2.1rem, 5.2vw, 3.4rem);
	line-height: 1.06;
	letter-spacing: -.02em;
	font-weight: 800;
	margin: 0 0 1rem;
}
.zk-hm__h1-accent { color: var(--zk-green-dark, #487214); }
.zk-hm__lead {
	color: var(--zk-ink, #23291c);
	font-size: 1.05rem; /* spójnie z leadem/intro na landingu (~1.08rem) */
	line-height: 1.6;
	max-width: 52ch;
	margin: 0 0 1.75rem;
}

/* Karta wyszukiwarki — dominujący CTA hero */
.zk-hm__search-card {
	background: var(--zk-bg, #fff);
	border: 1px solid var(--zk-line, #e6e8e1);
	border-radius: 16px;
	padding: clamp(1.2rem, 3vw, 1.7rem);
	text-align: left;
	max-width: 520px;
	margin: 0;
	box-shadow: 0 14px 34px rgba(20, 30, 15, .10);
}
.zk-hm__search-label {
	font-weight: 700; color: var(--zk-ink, #23291c);
	margin: 0 0 .6rem; font-size: 1.02rem;
}
.zk-hm__search-widget { position: relative; }
.zk-hm__notice { color: var(--zk-muted, #5b6152); font-size: .9rem; }

/* FiboSearch — chowamy lupy (autocomplete-podpowiedzi, nie listing wyników).
   Pole na pełną szerokość + „×" przypięty do prawej. Wzorzec z /zamow-online/. */
.zk-hm__search-widget .dgwt-wcas-search-wrapp,
.zk-hm__search-widget .dgwt-wcas-search-form,
.zk-hm__search-widget .dgwt-wcas-sf-wrapp { width: 100% !important; max-width: none !important; }
.zk-hm__search-widget .dgwt-wcas-sf-wrapp { position: relative; }
.zk-hm__search-widget .dgwt-wcas-search-submit,
.zk-hm__search-widget .dgwt-wcas-ico-magnifier { display: none !important; }
.zk-hm__search-widget .dgwt-wcas-search-input {
	width: 100% !important;
	box-sizing: border-box;
	padding-left: 1.1rem !important;
	padding-right: 2.6rem !important;
}
.zk-hm__search-widget .dgwt-wcas-close {
	right: .8rem !important;
	left: auto !important;
}
/* Focus pola = zielony pierścień → jasny sygnał, że to główna akcja hero. */
.zk-hm__search-widget .dgwt-wcas-search-input:focus {
	border-color: var(--zk-green-dark, #487214) !important;
	box-shadow: 0 0 0 3px rgba(132, 191, 42, .28) !important;
	outline: none !important;
}
/* Mikro-podpowiedź pod polem — zachęta do wpisania miasta. */
.zk-hm__search-hint {
	margin: .6rem 0 0;
	font-size: .82rem;
	color: var(--zk-muted, #5b6152);
}

/* Telefon + godziny pod wyszukiwarką (lewa kolumna → wyrównane do lewej) */
.zk-hm__hero-alt {
	display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: flex-start;
	gap: .75rem;
	margin-top: 1.5rem;
}
.zk-hm__hero-alt-label { color: rgba(255, 255, 255, .85); font-weight: 600; }
/* Telefon = wypełniony biały przycisk (na zielonym tle hero „przezroczysty"
   wariant znikał). Ikona zielona, tekst ink, delikatny cień = klikalny. */
/* Hero na ciemnej zieleni — telefon jako wypełniony biały (wariant przezroczysty
   by się gubił). Ikona zielona dziedziczy z .zk-ui-btn--call. */
.zk-hm__hero-alt .zk-ui-btn--call {
	background: var(--zk-bg, #fff);
	border-color: var(--zk-line, #e6e8e1);
	box-shadow: 0 4px 14px rgba(20, 30, 15, .07);
}
.zk-hm__hero-alt .zk-ui-btn--call:hover { background: var(--zk-bg-soft, #f2f4ec); }
.zk-hm__hero-hours {
	margin-top: .7rem;
	font-size: .9rem;
	color: rgba(255, 255, 255, .72);
}

/* --- Prawa kolumna (zdjęcie + 3 pływające karty) --- */
.zk-hm__hero-media { position: relative; }
/* Zdjęcie „unosi się": biała ramka (mat) + głęboki cień na tle zieleni. */
.zk-hm__hero-figure {
	position: relative; z-index: 1;
	border-radius: 20px; overflow: hidden;
	aspect-ratio: 1 / 1; /* zdjęcie realizacji jest poziome (~4:3) — kwadrat tnie najmniej */
	box-shadow: 0 0 0 6px #fff, 0 26px 60px rgba(20, 30, 15, .20);
}
.zk-hm__hero-photo { margin: 0; height: 100%; }
.zk-hm__hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.zk-hm__hero-photo--placeholder {
	display: flex; align-items: center; justify-content: center;
	height: 100%;
	background: var(--zk-bg-green-soft, #eef5e2);
	color: var(--zk-green, #84bf2a);
}
.zk-hm__hero-photo--placeholder svg { width: 38%; height: auto; }

/* Pływające karty — jeden, spójny format (ikona + hasło + podpis).
   Absolutne nad zdjęciem na desktopie; niewielkie zachodzenie za krawędź. */
.zk-hm__fcards { position: absolute; inset: 0; z-index: 2; }
.zk-hm__fcard {
	position: absolute;
	display: flex; align-items: center; gap: .65rem;
	background: rgba(255, 255, 255, .9);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, .75);
	border-radius: 16px;
	box-shadow: 0 16px 38px rgba(20, 30, 15, .18), 0 2px 6px rgba(20, 30, 15, .06);
	padding: .75rem .95rem;
	max-width: 234px;
	animation: zk-hm-float 6s ease-in-out infinite;
	will-change: transform;
}
.zk-hm__fcard--tr { top: 4%; right: -7%; animation-duration: 5.6s; animation-delay: 0s; }
.zk-hm__fcard--br { bottom: 13%; right: -7%; animation-duration: 6.8s; animation-delay: .9s; }
.zk-hm__fcard--bl { bottom: 5%; left: -7%; animation-duration: 6.2s; animation-delay: .45s; }

@keyframes zk-hm-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) {
	.zk-hm__fcard { animation: none; }
}

.zk-hm__fcard-ico {
	flex: 0 0 auto; display: inline-flex;
	width: 2.3rem; height: 2.3rem; align-items: center; justify-content: center;
	color: var(--zk-green-dark, #487214);
	background: var(--zk-bg-green, #e8f2d6);
	border-radius: 12px;
}
.zk-hm__fcard-ico svg { width: 1.3rem; height: 1.3rem; }
.zk-hm__fcard-txt { display: flex; flex-direction: column; gap: .1rem; }
.zk-hm__fcard-title { font-size: .95rem; font-weight: 700; letter-spacing: -.01em; color: var(--zk-ink, #23291c); line-height: 1.2; }
.zk-hm__fcard-sub { font-size: .78rem; color: var(--zk-muted, #5b6152); line-height: 1.35; }

/* --- Responsywność hero --- */
@media (max-width: 960px) {
	.zk-hm__hero-grid { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 3rem); }
	.zk-hm__hero-main { max-width: none; }
	.zk-hm__search-card { max-width: 560px; }
	/* Karty schodzą pod zdjęcie jako równa siatka (bez nakładania i animacji). */
	.zk-hm__fcards {
		position: static; inset: auto; margin-top: 1rem;
		display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem;
	}
	.zk-hm__fcard {
		position: static; inset: auto; max-width: none;
		animation: none; background: #fff; border-color: var(--zk-line, #e6e8e1);
	}
}
@media (max-width: 620px) {
	.zk-hm__fcards { grid-template-columns: 1fr; }
}

/* 02 Pasek zaufania — WSPÓLNY komponent `.zk-ui-trust` (assets/zk-ui.css),
   render przez zk_trust_render(). Bez lokalnych stylów. Styk z hero bez przerwy:
   hero ma margin-bottom 0, a .zk-ui-trust nie ma marginesu górnego. */

/* -------------------------------------------------------- 03 Dwie ścieżki */
.zk-hm__paths { margin-block: clamp(2rem, 5vw, 3.25rem); }
.zk-hm__paths-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1rem, 3vw, 1.75rem);
}
/* Karta ze zdjęciem w tle — treść na dole nad ciemnym gradientem. */
.zk-hm__path {
	position: relative; overflow: hidden;
	display: flex; align-items: flex-end;
	min-height: 400px;
	border-radius: var(--zk-r-card, 12px);
	background: var(--zk-navy, #212f45) center / cover no-repeat;
	isolation: isolate;
}
/* Gradient od dołu (czytelność białego tekstu). */
.zk-hm__path--photo::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(to top,
		rgba(15, 22, 12, .92) 0%,
		rgba(15, 22, 12, .78) 28%,
		rgba(15, 22, 12, .30) 62%,
		rgba(15, 22, 12, .05) 100%);
}
.zk-hm__path-body { position: relative; z-index: 1; padding: clamp(1.4rem, 3.5vw, 2rem); color: #fff; }
.zk-hm__path-eyebrow {
	display: inline-block;
	text-transform: uppercase; letter-spacing: .06em;
	font-size: .78rem; font-weight: 700; color: #fff;
	margin-bottom: .5rem; opacity: .9;
}
.zk-hm__path-title { font-size: clamp(1.35rem, 2.6vw, 1.7rem); margin: 0 0 .55rem; color: #fff; }
.zk-hm__path-desc { color: rgba(255, 255, 255, .9); margin: 0 0 1.35rem; max-width: 42ch; }
.zk-hm__path-cta { margin-top: 0; }
@media (max-width: 680px) {
	.zk-hm__paths-grid { grid-template-columns: 1fr; }
	.zk-hm__path { min-height: 340px; }
}

/* =========================================================================
   Wspólne elementy sekcji (04–10)
   Etykiety (eyebrow), nagłówki (h2), opisy i przyciski → WSPÓLNA warstwa
   `.zk-ui-*` (assets/zk-ui.css). Tu tylko układy specyficzne dla strony głównej.
   ========================================================================= */
/* Pełnoszerokościowy jasny band (sekcje na tle --zk-bg-soft). */
.zk-hm__band--soft {
	background: var(--zk-bg-soft, #f2f4ec);
	box-shadow: 0 0 0 100vw var(--zk-bg-soft, #f2f4ec);
	clip-path: inset(0 -100vw);
	padding-block: clamp(2.5rem, 5vw, 4rem);
	margin-block: clamp(2.5rem, 5vw, 4rem);
}
/* Pasy tła STYKAJĄ SIĘ ze sobą — biała szczelina między navy a jasnym pasem
   wygląda na błąd (zgłoszenie Wojtka 05.08: pas B2B → opinie). Margines
   zerujemy tylko w miejscu styku dwóch banded-sekcji; odstęp od zwykłych,
   białych sekcji zostaje bez zmian. */
.zk-ui-b2b + .zk-hm__band--soft,
.zk-ui-trust + .zk-hm__band--soft,
.zk-hm__band--soft + .zk-ui-b2b,
.zk-hm__band--soft + .zk-hm__band--soft { margin-top: 0; }
.zk-hm__band--soft:has(+ .zk-ui-b2b) { margin-bottom: 0; }

/* --------------------------------------------------- 04 Typy odpadów */
.zk-hm__waste { margin-block: clamp(2.5rem, 5vw, 4rem); }
.zk-hm__waste-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: clamp(.8rem, 2vw, 1.2rem);
}
.zk-hm__waste-tile {
	display: flex; align-items: center; gap: .9rem;
	background: var(--zk-bg, #fff); border: 1px solid var(--zk-line, #e6e8e1);
	border-radius: var(--zk-r-card, 12px);
	padding: 1.1rem 1.25rem; text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.zk-hm__waste-tile:hover {
	border-color: var(--zk-green, #84bf2a);
	box-shadow: 0 10px 24px rgba(20, 30, 15, .08); transform: translateY(-2px);
}
.zk-hm__waste-tile--help { border-style: dashed; }
.zk-hm__waste-ico {
	flex: 0 0 auto; width: 2.6rem; height: 2.6rem;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--zk-green-dark, #487214); background: var(--zk-bg-green, #e8f2d6); border-radius: 10px;
}
.zk-hm__waste-ico svg { width: 1.5rem; height: 1.5rem; }
.zk-hm__waste-label { font-weight: 700; flex: 1 1 auto; color: var(--zk-ink, #23291c); }
.zk-hm__waste-arrow { color: var(--zk-green-dark, #487214); font-weight: 700; }

/* --------------------------------------------------- 05 Pojemności */
.zk-hm__sizing-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: clamp(.9rem, 2vw, 1.4rem);
}
.zk-hm__size-tile {
	background: var(--zk-bg, #fff); border: 1px solid var(--zk-line, #e6e8e1);
	border-radius: var(--zk-r-card, 12px); padding: 1.4rem 1.2rem;
	text-align: center; display: flex; flex-direction: column; align-items: center; gap: .4rem;
}
.zk-hm__size-visual { color: var(--zk-green-dark, #487214); margin-bottom: .3rem; max-width: 100%; }
.zk-hm__size-visual svg { width: 100%; height: auto; display: block; }
.zk-hm__size-cap { font-size: 1.3rem; font-weight: 800; margin: 0; color: var(--zk-ink, #23291c); }
.zk-hm__size-work { font-size: .85rem; color: var(--zk-muted, #5b6152); margin: 0; min-height: 2.4em; }
.zk-hm__size-price { font-size: .95rem; color: var(--zk-ink, #23291c); }
.zk-hm__size-price strong { color: var(--zk-green-dark, #487214); font-size: 1.05rem; }
.zk-hm__size-tile .zk-ui-btn--sm { margin-top: .4rem; }

/* --------------------------------------------------- 07 Obszar */
.zk-hm__area { margin-block: clamp(2.5rem, 5vw, 4rem); }
/* LEWO: treść + miasta; PRAWO: mapa. */
.zk-hm__area-inner {
	display: grid; grid-template-columns: 1.1fr .9fr;
	gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
.zk-hm__area-stats { display: flex; gap: 1.75rem; margin-top: 1.2rem; flex-wrap: wrap; }
.zk-hm__area-stat { color: var(--zk-muted, #5b6152); font-size: .95rem; }
.zk-hm__area-stat strong { display: block; font-size: 1.7rem; color: var(--zk-ink, #23291c); font-weight: 800; line-height: 1; }
.zk-hm__area-cities { margin-top: 1.4rem; }
.zk-hm__area-cities-label { font-weight: 600; color: var(--zk-ink, #23291c); margin: 0 0 .7rem; }
.zk-hm__city-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.zk-hm__city-chip {
	display: inline-flex; background: var(--zk-bg, #fff); border: 1px solid var(--zk-line, #e6e8e1);
	border-radius: var(--zk-r-control, 8px); padding: .45rem .8rem;
	font-size: .88rem; font-weight: 600; text-decoration: none;
}
.zk-hm__city-chip:hover { border-color: var(--zk-green, #84bf2a); }
/* Interaktywna mapa Polski — komponent WSPÓLNY: style w assets/area-map.css
   (.zk-hm__area-map-svg, .zk-hm__voivo*). Tu tylko rozmieszczenie w sekcji. */
.zk-hm__area-map { display: flex; justify-content: center; }
.zk-hm__area-map .zk-hm__area-map-svg { max-width: 460px; }

@media (max-width: 820px) {
	.zk-hm__area-inner { grid-template-columns: 1fr; }
	.zk-hm__area-map { order: -1; } /* mapa nad tekstem na mobile */
	.zk-hm__area-map .zk-hm__area-map-svg { max-width: 340px; }
}

/* 08 Pas B2B — WSPÓLNY komponent `.zk-ui-b2b` (zk-ui.css), render zk_b2b_render().
   Odstępy dają marginesy sekcji sąsiednich; bez lokalnych stylów. */

/* --------------------------------------------------- 09 Opinie */
/* Styk z pasem B2B (navy) bez białej przerwy — zerujemy górny margines bandu. */

/* --------------------------------------------------- 10 Baza wiedzy */
/* Siatka i karty = WSPÓLNE .zk-blog__cards / .zk-blog__card (assets/blog.css) —
   ten sam wygląd co listing bloga. Bez lokalnego nadpisywania siatki. */
.zk-hm__blog { margin-block: clamp(2.5rem, 5vw, 4rem); }
.zk-hm__blog-all { font-weight: 700; text-decoration: none; white-space: nowrap; }
/* Naprawa: reguła `.zk-hm a:not(.zk-ui-btn)` (0,2,1) barwiła linki kart na zielono.
   Przywracamy wygląd listingu: tytuł czarny, plakietka zielona jak w blog.css. */
.zk-hm .zk-blog__card-title a { color: var(--zk-ink, #23291c); }
.zk-hm .zk-blog__card-title a:hover { color: var(--zk-green-dark, #487214); }
.zk-hm a.zk-blog__badge { color: var(--zk-green-dark, #487214); }

/* --------------------------------------------------- 11 Tekst SEO (rozwijany) */
.zk-hm__seo { margin-block: clamp(2.5rem, 5vw, 4rem); display: flex; flex-direction: column; align-items: center; }
.zk-hm__seo-inner { position: relative; width: 100%; }
.zk-hm__seo.is-collapsed .zk-hm__seo-inner { max-height: 340px; overflow: hidden; }
.zk-hm__seo.is-collapsed .zk-hm__seo-inner::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 130px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff); pointer-events: none;
}
/* Prose (treść SEO) */
.zk-hm__prose { color: var(--zk-ink, #23291c); font-size: 1.02rem; line-height: 1.7; }
.zk-hm__prose h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; color: var(--zk-ink, #23291c); letter-spacing: -.01em; margin: 1.7rem 0 .7rem; }
.zk-hm__prose > h2:first-child { margin-top: 0; }
.zk-hm__prose p { margin: 0 0 1rem; }
.zk-hm__prose ul { margin: 0 0 1.2rem; padding: 0; list-style: none; display: grid; gap: .5rem; }
.zk-hm__prose li { position: relative; padding-left: 1.6rem; }
.zk-hm__prose li::before {
	content: ""; position: absolute; left: .2rem; top: .6em;
	width: .5rem; height: .5rem; border-radius: 50%; background: var(--zk-green, #84bf2a);
}
.zk-hm__prose a { color: var(--zk-green-dark, #487214); font-weight: 600; }
/* Przycisk rozwijania (ghost, ukryty bez JS) */
.zk-hm__seo-toggle {
	display: none; margin: 1.4rem auto 0; align-items: center; gap: .45rem;
	background: #fff; color: var(--zk-green-dark, #487214);
	border: 1px solid #cfe3a8; border-radius: var(--zk-r-pill, 999px);
	padding: .62rem 1.25rem; font: inherit; font-weight: 700; line-height: 1;
	cursor: pointer; -webkit-appearance: none; appearance: none;
	transition: color .15s, background .15s, border-color .15s, box-shadow .15s;
}
.zk-hm__seo.is-collapsible .zk-hm__seo-toggle { display: inline-flex; }
.zk-hm__seo-toggle:hover, .zk-hm__seo-toggle:focus-visible {
	background: var(--zk-green-dark, #487214); color: #fff; border-color: var(--zk-green-dark, #487214);
	box-shadow: 0 3px 12px rgba(72, 114, 20, .28);
}
.zk-hm__seo-toggle-chev { display: inline-flex; transition: transform .2s ease; }
.zk-hm__seo:not(.is-collapsed) .zk-hm__seo-toggle-chev { transform: rotate(180deg); }