/* ============================================================
   Wallflow — tokens z Figmy (get_variable_defs)
   ============================================================ */
:root {
	--granat: #6d42d8;
	--roz: #a977e8;
	--dark-b: #130c25;
	--grey: #818181;
	--white: #fff;
	--black: #000;
	--stroke: rgba(255, 255, 255, 0.3);
	--corner: 20px;
	--glow: 20px 20px 50px rgba(109, 66, 216, 0.3);
	--container: 1440px;
	--font: "Poppins", sans-serif;
}

/* ============================================================
   MOBILE POLISH — 13.VII.2026
   Korekty wspolne dla screenow QA: opinie, wspolpraca, serwis,
   baza wiedzy i drukarki. Reguly sa celowo na koncu pliku.
   ============================================================ */
@media (max-width: 720px) {
	/* Globalnie: dzieci flex/grid nie moga poszerzac viewportu. */
	.wf-container,
	.wf-card,
	.wf-phero__inner,
	.wf-wcta__card,
	.wf-wcta__head,
	.wf-wcta__steps,
	.wf-diag__content,
	.wf-endcta__inner,
	.wf-endcta__left,
	.wf-endcta__feats { min-width: 0; max-width: 100%; }

	/* Opinie: wynik i portale jeden pod drugim, bez wyjazdu gwiazdek. */
	.wf-reviews__score {
		width: 100%;
		padding: 28px 20px;
		margin-bottom: 32px;
		flex-direction: column;
		gap: 24px;
	}
	.wf-reviews__score-main { width: 100%; justify-content: center; align-items: center; gap: 18px; }
	.wf-reviews__num { font-size: clamp(54px, 18vw, 72px); }
	.wf-reviews__num small { font-size: .5em; }
	.wf-reviews__stars-wrap { align-items: center; text-align: center; }
	.wf-reviews__score-line { width: 100%; height: 1px; align-self: auto; }
	.wf-reviews__portals { width: 100%; gap: 24px; justify-content: center; }
	.wf-reviews__portal { min-width: 0; flex: 1 1 0; }
	.wf-reviews__portal-logo img { max-width: 100%; }
	.wf-review { padding: 24px; }
	.wf-reviews__notes { gap: 32px; margin-top: 32px; }
	.wf-reviews__note { width: calc(100% - 8px); max-width: 420px; padding: 10px; transform: none; }
	.wf-reviews__note:nth-child(2n) { transform: none; }
	.wf-reviews__note figcaption { font-size: 12px; }

	/* Wspolpraca CTA: naturalna wysokosc, poprawne wiersze krokow. */
	.wf-wcta__card { padding: 28px 20px; }
	.wf-wcta__head { display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
	.wf-wcta__intro { margin: 0; gap: 20px; }
	.wf-wcta__btns { display: flex; flex-direction: column; width: 100%; gap: 16px; }
	.wf-wcta__btns .wf-btn { width: 100%; justify-content: center; }
	.wf-wcta__steps { display: flex; flex-direction: column; align-items: stretch; gap: 24px; margin-top: 40px; }
	.wf-wcta__step { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start; width: 100%; }
	.wf-wcta__step-icon { width: 52px; height: 52px; }
	.wf-wcta__step-txt { min-width: 0; overflow-wrap: anywhere; }
	.wf-wcta__step-txt strong { display: block; margin-bottom: 4px; }
	.wf-wcta__dash { display: none; }

	/* Serwis: karta hero i sekcja diagnostyki maja czytelny, naturalny uklad. */
	.wf-servicecard { margin-top: 20px; padding: 24px 20px; align-items: flex-start; gap: 18px; }
	.wf-servicecard__icon { width: 56px; height: 56px; }
	.wf-servicecard__icon img { width: 30px; height: 30px; }
	.wf-servicecard .wf-h3 { font-size: 22px; line-height: 1.25; overflow-wrap: anywhere; }
	.wf-diag {
		min-height: 0;
		padding: 72px 0;
		background-size: cover;
		background-position: 62% center;
	}
	.wf-diag::before { background: rgba(0, 0, 0, .58); }
	.wf-diag__content { gap: 24px; }
	.wf-diag__content .wf-h2 { font-size: 32px; line-height: 1.15; overflow-wrap: anywhere; }
	.wf-diag__content > p { font-size: 16px; line-height: 1.55; }
	.wf-diag .wf-iconline { align-items: flex-start; }
	.wf-diag__minis { flex-direction: column; gap: 16px; font-size: 15px; }
	.wf-diag__steps { width: 100%; flex-direction: column; align-items: stretch; gap: 18px; padding: 24px; }
	.wf-diag__step { gap: 14px; font-size: 16px; }
	.wf-diag__arrow { display: none; }

	/* Meta artykulu nie dotyka ramki i moze sie zawinac. */
	.wf-post__meta { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; line-height: 1.4; }

	/* Program kursu: dwie karty w rzedzie na telefonie, jak w makiecie. */
	.wf-program__lessons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.wf-lesson { min-height: 310px; padding: 18px; }
	.wf-lesson__no { width: 40px; height: 40px; }
	.wf-lesson__play { width: 64px; height: 64px; }
	.wf-lesson__meta { min-height: 92px; }
	.wf-lesson__meta strong { font-size: 18px; line-height: 1.4; overflow-wrap: anywhere; }

	/* Drukarki: leasing, taby, banner 360 i koncowe CTA. */
	.wf-dhero .wf-phero__leasing { width: 100%; align-items: flex-start; }
	.wf-dhero .wf-phero__leasing img { width: 38px !important; height: 38px !important; }
	.wf-dhero .wf-phero__leasing .wf-h4 { font-size: 19px; line-height: 1.35; overflow-wrap: anywhere; }
	.wf-usps--tall .wf-usps__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.wf-usps--tall .wf-usp--v { width: auto; min-height: 154px; padding: 18px 10px; border: 1px solid var(--stroke); border-radius: var(--corner); }
	.wf-usps--tall .wf-usp--v + .wf-usp--v { padding-left: 10px; border-left: 1px solid var(--stroke); }
	.wf-usps--tall .wf-usp__icon { width: 46px; height: 46px; }
	.wf-usps--tall .wf-usp__txt strong { font-size: 14px; overflow-wrap: anywhere; }
	.wf-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 12px; }
	.wf-tab { width: 100%; min-height: 132px; padding: 16px 8px; font-size: 14px; }
	.wf-cyl {
		padding-top: 56px;
		padding-bottom: 56px;
		background-size: cover;
		background-position: center;
		position: relative;
	}
	.wf-cyl::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .48); }
	.wf-cyl__inner { position: relative; min-height: 520px; justify-content: flex-start; gap: 22px; }
	.wf-cyl__inner > *, .wf-cyl__desc { max-width: 100%; }
	.wf-cyl__inner .wf-h2 { font-size: 32px; line-height: 1.15; }
	.wf-cyl__desc { font-size: 16px; line-height: 1.55; }
	.wf-cyl__note { align-items: flex-start; font-size: 15px; line-height: 1.45; }
	.wf-endcta--card .wf-endcta__inner { align-items: stretch; gap: 48px; }
	.wf-endcta__left .wf-h2 { font-size: 32px; line-height: 1.2; }
	.wf-endcta__btns { display: flex; flex-direction: column; gap: 16px; width: 100%; }
	.wf-endcta__btns .wf-btn { width: 100%; justify-content: center; }
	.wf-endcta__feats { display: flex; flex-direction: column; gap: 28px; width: 100%; }
	.wf-endcta__feats .wf-usp--v { flex-direction: row; align-items: center; text-align: left; gap: 22px; }
	.wf-endcta__feats .wf-usp__icon { width: 72px; height: 72px; flex: 0 0 auto; }
	.wf-endcta__feats .wf-usp__txt { align-items: flex-start; }
}

@media (max-width: 390px) {
	.wf-program__lessons { grid-template-columns: 1fr; }
	.wf-tabs { grid-template-columns: 1fr 1fr; }
	.wf-wcta__card { padding-left: 16px; padding-right: 16px; }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* clip (nie hidden): overflow-x:hidden tworzy scroll container i psuje position:sticky headera */
html, body { overflow-x: clip; }

body {
	margin: 0;
	background: var(--black);
	color: var(--white);
	font-family: var(--font);
	font-size: 14px;
	font-weight: 400;
	line-height: normal;
}

h1, h2, h3, h4, p { overflow-wrap: break-word; }

img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, h5 { margin: 0; }
button { font-family: inherit; cursor: pointer; }

.wf-container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 20px;
	width: 100%;
}
/* Średnie desktopy (MacBook 1366–1512 itp.): treść nie dotyka krawędzi — min. 64px marginesu
   z każdej strony; powyżej ~1570px marginesy rosną naturalnie do 240px przy 1920 (PDF pkt 19) */
@media (min-width: 1024px) {
	.wf-container { max-width: min(var(--container), calc(100vw - 128px)); }
}

/* Typografia — style H1–H4/Body z Figmy */
.wf-h1 { font-size: 48px; font-weight: 400; line-height: 1.1; }
.wf-h2 { font-size: 36px; font-weight: 500; line-height: 1.1; }
.wf-h3 { font-size: 26px; font-weight: 400; line-height: 1.3; }
.wf-h4 { font-size: 20px; font-weight: 500; }
.wf-small { font-size: 12px; }

/* Gradientowy przycisk (komponent Button) */
.wf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 10px 28px;
	border: 0;
	border-radius: 100px;
	background: linear-gradient(90deg, var(--granat), var(--roz));
	color: var(--white);
	font-size: 16px;
	font-weight: 500;
	white-space: nowrap;
	transition: filter 0.2s, transform 0.2s;
}
.wf-btn:hover { filter: brightness(1.12); }

.wf-btn--outline {
	background: transparent;
	border: 1px solid var(--stroke);
}

/* ============================================================
   Header (TOP — 864:2937) — zakotwiczony przy scrollu (poprawki2 10.VII pkt 1)
   ============================================================ */
.wf-header { position: sticky; top: 0; z-index: 250; }
html { scroll-padding-top: 160px; }
.wf-topbar { background: var(--granat); }
.wf-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	position: relative;
	padding-top: 12px;
	padding-bottom: 12px;
	text-align: center;
	font-size: 14px;
	color: var(--white);
}
.wf-topbar a { text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }
.wf-topbar a:hover { opacity: 0.85; }
/* Tekst topbara nie może wjeżdżać pod przełącznik języków (flagi po prawej):
   .wf-langs zajmuje 150px + 20px odstępu = 170px od prawej krawędzi kontenera,
   więc prawy padding musi być większy (190px z zapasem); lewy zostaje 118px,
   żeby na 1366px tekst dalej mieścił się w jednej linii. */
@media (min-width: 721px) {
	.wf-topbar__inner { padding-left: 118px; padding-right: 190px; font-size: 13px; }
}
.wf-langs { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); display: flex; gap: 4px; }
.wf-langs__item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 7px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.04em;
	opacity: 0.75;
	transition: opacity 0.2s, background 0.2s;
}
.wf-langs__flag { width: 15px; height: 10.5px; border-radius: 2px; display: block; flex: 0 0 auto; }
.wf-langs__item:hover { opacity: 1; }
.wf-langs__item.is-active { background: rgba(0, 0, 0, 0.35); opacity: 1; }
@media (max-width: 720px) {
	.wf-langs { position: static; transform: none; justify-content: center; }
	.wf-topbar__inner { flex-direction: column; gap: 8px; }
}

.wf-nav {
	background: var(--black);
	border-bottom: 0.5px solid var(--stroke);
	position: relative;
	z-index: 50;
}
.wf-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100px;
	gap: 24px;
}
.wf-logo,
.custom-logo-link { flex: 0 0 auto; }
.wf-logo img,
.custom-logo-link img { width: 76px; max-width: none; height: auto; display: block; }
.wf-nav__inner .wf-btn { flex: 0 0 auto; }

.wf-nav__center { display: flex; align-items: center; gap: 64px; min-width: 0; }

.wf-nav__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.wf-nav__list li { display: flex; align-items: center; gap: 12px; }
.wf-nav__list li + li::before {
	content: "";
	width: 1px;
	height: 16px;
	background: var(--stroke);
}
.wf-nav__list a {
	padding: 4px;
	font-size: 13px;
	font-weight: 500;
	color: var(--white);
	white-space: nowrap;
	transition: color 0.2s;
}
.wf-nav__list a:hover,
.wf-nav__list .current-menu-item a { color: var(--roz); }

.wf-socials { display: flex; align-items: center; gap: 10px; }
.wf-socials__item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	transition: opacity 0.2s;
}
.wf-socials__item:hover { opacity: 0.7; }
.wf-socials__item img {
	width: 100%;
	height: 100%;
	filter: brightness(0) invert(1); /* ikony z Figmy mają ciemne wypełnienie — na czarnym tle mają być białe jak w projekcie */
}

.wf-burger { display: none; background: none; border: 0; padding: 8px; }
.wf-burger span {
	display: block;
	width: 24px;
	height: 2px;
	margin: 5px 0;
	background: var(--white);
	transition: transform 0.2s, opacity 0.2s;
}

/* ============================================================
   Footer (894:3535)
   ============================================================ */
.wf-footer { background: var(--black); border-top: 0.5px solid var(--stroke); }
.wf-footer__main {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding-top: 32px;
	padding-bottom: 32px;
	flex-wrap: wrap;
}
.wf-footer__brand { display: flex; flex-direction: column; gap: 24px; max-width: 193px; }
.wf-footer__tagline { font-size: 14px; }

.wf-footer__contact { display: flex; gap: 12px; align-items: flex-start; max-width: 388px; }
.wf-footer__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	flex: 0 0 auto;
}
.wf-footer__icon img { width: 48px; height: 48px; }
.wf-footer__contact-txt { display: flex; flex-direction: column; gap: 4px; }
.wf-footer__contact-txt strong { font-size: 20px; font-weight: 500; }
.wf-footer__contact-txt span { font-size: 14px; }
.wf-footer__arrow { width: 48px; height: 48px; margin-left: 20px; align-self: center; }

/* Socials w stopce — większe i wyśrodkowane (poprawki2 10.VII pkt 2) */
.wf-socials--footer { gap: 18px; }
.wf-socials--footer .wf-socials__item { width: 38px; height: 38px; }

/* Mapa strony + dane kontaktowe w stopce (poprawki2 10.VII pkt 9) */
.wf-footer__links {
	display: flex;
	justify-content: space-between;
	gap: 48px;
	flex-wrap: wrap;
	padding-top: 8px;
	padding-bottom: 40px;
}
.wf-footer__col { display: flex; flex-direction: column; gap: 14px; min-width: 180px; }
.wf-footer__col-title { font-size: 16px; font-weight: 500; color: var(--white); }
.wf-footer__col nav { display: flex; flex-direction: column; gap: 10px; }
.wf-footer__sitemap {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(120px, auto));
	gap: 10px 40px;
}
.wf-footer__col a { font-size: 14px; color: var(--grey); transition: color 0.2s; }
.wf-footer__col a:hover { color: var(--roz); }
.wf-footer__col address { font-style: normal; font-size: 14px; color: var(--grey); line-height: 1.7; }
.wf-footer__col--wide { flex: 1; max-width: 320px; }
@media (max-width: 1080px) {
	.wf-socials--footer { justify-content: center; align-self: center; }
	.wf-footer__links { flex-direction: column; align-items: flex-start; gap: 32px; }
}

.wf-footer__bottom { border-top: 1px solid var(--stroke); }
.wf-footer__bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 24px;
	padding-bottom: 24px;
	font-size: 12px;
	color: var(--grey);
}
.wf-footer__bottom-inner a { padding: 4px; color: var(--grey); }
.wf-footer__bottom-inner a:hover { color: var(--white); }
.wf-footer__legal { display: flex; flex-wrap: wrap; gap: 4px 20px; }

/* ============================================================
   Elementy wspólne sekcji
   ============================================================ */
.wf-section {
	background: var(--black);
	padding: 100px 0;
	position: relative;
}
/* Neonowa linia na styku sekcji — jasna przy krawędzi i gasnąca W DÓŁ (jak w makiecie);
   rysowana wewnątrz sekcji przy jej górnej krawędzi, więc nie zależy od kolejności warstw. */
.wf-section::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 110px;
	background: linear-gradient(180deg, rgba(169, 119, 232, 0.32) 0, rgba(109, 66, 216, 0.24) 4px, rgba(109, 66, 216, 0) 100%);
	pointer-events: none;
}

.wf-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	padding: 8px 20px;
	border: 1px solid var(--roz);
	border-radius: 100px;
	background: var(--black);
	color: var(--roz);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
}

.wf-grad-text {
	background: linear-gradient(90deg, var(--granat), var(--roz));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* Fioletowy akcent w nagłówkach — na wszystkich szerokościach (Figma wallflow_the2) */
.wf-acc { color: var(--roz); }

.wf-card {
	background: var(--black);
	border: 1px solid var(--roz);
	border-radius: var(--corner);
	box-shadow: var(--glow);
}

.wf-sec-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
	margin-bottom: 64px;
}
.wf-sec-head--left { align-items: flex-start; text-align: left; margin-bottom: 32px; }
.wf-sec-head .wf-badge { align-self: center; }
.wf-sec-head--left .wf-badge { align-self: flex-start; }
.wf-sec-head__narrow { max-width: 590px; }

.wf-arrow {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	padding: 0;
	background: none;
	border: 0;
	transition: transform 0.2s;
}
.wf-arrow img { width: 64px; height: 64px; display: block; }
.wf-arrow--prev img { transform: rotate(180deg); }
.wf-arrow:hover { transform: scale(1.06); }

.wf-hr { display: block; width: 76px; height: 1px; background: var(--roz); }
.wf-center { display: flex; justify-content: center; margin-top: 64px; }
.wf-grey { color: var(--grey); }

.wf-iconline { display: flex; gap: 12px; align-items: center; }
.wf-iconline > img { width: 52px; height: 52px; flex: 0 0 auto; }
.wf-iconline div { display: flex; flex-direction: column; gap: 4px; }

.wf-stars { display: inline-flex; gap: 4px; }
.wf-stars img { width: 17px; height: 17px; }
.wf-stars--big img { width: 42px; height: 42px; margin-right: 4px; }

/* ============================================================
   Hero (490:548)
   ============================================================ */
.wf-hero__stage {
	position: relative;
	/* Proporcje kadru jak w makiecie: zdjęcie (1920x837) dosunięte do prawej zajmuje ~76% szerokości */
	aspect-ratio: 2526 / 837;
	max-height: 837px;
	min-height: calc(620 * var(--u, 1px));
	width: 100%;
	overflow: hidden;
}
.wf-hero__slide {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-color: #000;
	background-image: var(--wf-bg); /* desktopowe tło; mobile podmienia na --wf-bg-mob */
	background-size: auto 100%;
	background-position: right center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 0.8s ease;
	display: flex;
	align-items: stretch;
}
.wf-hero__slide.is-active { opacity: 1; pointer-events: auto; }
.wf-hero__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 38%, transparent 55%);
	pointer-events: none;
}
.wf-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 20px;
	align-items: stretch;
	width: 100%;
	padding-top: 64px;
	padding-bottom: 64px;
	position: relative;
	z-index: 1;
}
.wf-hero__grid--content {
	position: absolute;
	inset: 0;
	margin: 0 auto;
	z-index: 2;
	pointer-events: none;
}
.wf-hero__grid--content .wf-hero__content { pointer-events: auto; }
.wf-hero__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 56px;
	max-width: 560px;
	grid-column: 1;
	grid-row: 1;
}
.wf-hero__grid .wf-hero__person { grid-row: 1; }
.wf-hero__headings { display: flex; flex-direction: column; gap: 40px; }
.wf-hero__title { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55); }
/* „Twój partner" — jednolity fiolet --roz jak w makiecie (bez gradientu) */
.wf-hero__title .wf-grad-text {
	background: none;
	-webkit-background-clip: initial;
	background-clip: initial;
	-webkit-text-fill-color: currentColor;
	color: var(--roz);
}
.wf-hero__sub { max-width: 380px; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6); }
/* „Dostępne od ręki!" — jednolity fiolet (bez gradientu) na każdej szerokości */
.wf-hero__sub .wf-grad-text,
.wf-hero__sub .wf-acc {
	background: none;
	-webkit-background-clip: initial;
	background-clip: initial;
	-webkit-text-fill-color: currentColor;
	color: var(--roz);
}
/* Desktop: „Drukarki ścienne UV / od WallFlow®" 36px Medium; „Dostępne od ręki!" 26px Regular */
@media (min-width: 721px) {
	.wf-hero__sub { font-weight: 500; line-height: 1.1; }
	.wf-hero__sub .wf-grad-text,
	.wf-hero__sub .wf-acc {
		font-size: calc(26 * var(--u, 1px));
		font-weight: 400;
		line-height: 1.3;
		display: inline-block;
		margin-top: 2px;
	}
}
.wf-hero__person { display: flex; flex-direction: column; justify-content: flex-end; }
.wf-hero__person-card {
	border-left: 2px solid var(--roz);
	padding-left: 24px;
	display: flex;
	flex-direction: column;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}
.wf-hero__person-card strong { font-size: 20px; font-weight: 500; line-height: 30px; }
.wf-hero__person-card span { font-size: 14px; line-height: 21px; }
.wf-hero .wf-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; }
.wf-hero .wf-arrow--prev { left: max(24px, calc((100% - 1440px) / 2)); }
.wf-hero .wf-arrow--next { right: max(24px, calc((100% - 1440px) / 2)); }
.wf-hero .wf-arrow:hover { transform: translateY(-50%) scale(1.06); }

.wf-usps { background: var(--black); }
.wf-usps__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	padding-top: 64px;
	padding-bottom: 64px;
}
.wf-usp { display: flex; align-items: center; gap: 16px; }
.wf-usp__icon { width: clamp(32px, 2.3vw, 44px); height: auto; flex: 0 0 auto; }
.wf-usp__txt { display: flex; flex-direction: column; gap: 4px; }
.wf-usp__txt strong { font-size: clamp(14px, 1.05vw, 20px); font-weight: 500; line-height: 1.5; white-space: nowrap; }
.wf-usp__txt span { font-size: clamp(10px, 0.68vw, 13px); font-weight: 500; line-height: 1.5; white-space: nowrap; }
.wf-usp + .wf-usp { padding-left: clamp(16px, 1.45vw, 28px); }

/* ============================================================
   Liczby (490:547)
   ============================================================ */
.wf-stats__inner { display: flex; gap: 64px; align-items: flex-end; }
.wf-stats__head { display: flex; flex-direction: column; gap: 24px; max-width: 320px; flex: 0 0 320px; }
.wf-stats__cards { display: flex; gap: 32px; flex: 1; justify-content: space-between; }
.wf-stat {
	flex: 0 1 300px;
	min-width: 0;
	min-height: 248px;
	padding: 32px 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
	text-align: center;
}
.wf-stat__top { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.wf-stat__num { font-size: 48px; line-height: 1.1; }
.wf-stat__label { color: var(--roz); font-size: 20px; font-weight: 500; line-height: 30px; }
.wf-stat__desc { font-size: 14px; }

/* ============================================================
   7 etapów (273:228)
   ============================================================ */
.wf-steps__line {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	margin-bottom: 64px;
}
.wf-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	max-width: 150px;
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
}
.wf-step__no {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border: 1px solid var(--stroke);
	border-radius: 50%;
	font-size: 26px;
	line-height: 1.3;
	position: relative;
}
.wf-step__no::before {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--black);
	z-index: -1;
}
.wf-step.is-active .wf-step__no { border-color: var(--granat); background: var(--granat); }
.wf-step__label { font-size: 14px; text-align: center; line-height: 21px; }
.wf-step.is-active .wf-step__label { color: var(--roz); }
.wf-step__dash { width: 76px; height: 1px; background: var(--roz); margin-top: 29px; }

.wf-steps__cardrow { display: flex; align-items: center; position: relative; }
.wf-steps__card {
	display: none;
	gap: 64px;
	align-items: center;
	flex: 1;
	overflow: hidden;
	animation: wf-fade 0.4s ease;
}
.wf-steps__card.is-active { display: flex; }
@keyframes wf-fade {
	from { opacity: 0; transform: translateX(24px); }
	to { opacity: 1; transform: none; }
}
.wf-steps__img { flex: 0 0 51%; align-self: stretch; padding: 20px 0 20px 20px; }
.wf-steps__img img {
	width: 100%;
	height: 100%;
	min-height: 400px;
	object-fit: cover;
	border-radius: 14px;
	display: block;
	/* Płynne przejście zdjęcia w tło karty zamiast ostrej krawędzi (PDF pkt 20) */
	-webkit-mask-image: linear-gradient(90deg, #000 62%, transparent 99%);
	mask-image: linear-gradient(90deg, #000 62%, transparent 99%);
}
.wf-steps__body { display: flex; flex-direction: column; gap: 16px; padding: 40px 40px 40px 0; }
.wf-steps__tag { color: var(--roz); font-size: 12px; font-weight: 500; line-height: 18px; }
.wf-steps__list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.wf-steps__list li { display: flex; gap: 12px; align-items: flex-start; }
/* Minimalistyczne kropki zamiast przypadkowych ikon (PDF pkt 20) */
.wf-steps__list li::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--roz);
	flex: 0 0 auto;
	margin: 7px 8px 0 6px;
}
.wf-steps__note { margin-top: 12px; }
.wf-steps__cardrow .wf-arrow { margin-left: -32px; }

/* ============================================================
   Filary (273:704)
   ============================================================ */
.wf-pillars__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px; }
.wf-pillar { display: flex; flex-direction: column; align-items: center; }
.wf-pillar__icon {
	width: 100px;
	height: 100px;
	border: 1px solid var(--roz);
	border-radius: 50%;
	padding: 8px;
	background: var(--black);
	position: relative;
	z-index: 2;
	margin-bottom: -50px;
	flex: 0 0 auto;
}
.wf-pillar__icon span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: var(--granat);
	border-radius: 50%;
}
.wf-pillar__icon img { width: 52px; height: 52px; }
.wf-pillar__card {
	width: 100%;
	padding: 80px 24px 24px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	flex: 1;
}
.wf-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.wf-checklist li { display: flex; gap: 8px; align-items: flex-start; }
.wf-checklist img { width: 20px; height: 20px; flex: 0 0 auto; padding: 2px; }

.wf-pillars__cta { display: flex; align-items: center; justify-content: center; margin-top: 64px; }
.wf-pillars__cta .wf-pillar__icon { margin-bottom: 0; margin-right: -50px; }
.wf-pillars__cta-card { padding: 32px 32px 32px 80px; max-width: 888px; }
/* Poppins nie ma face 700 (fonts.css: 300/400/500/600) — pin do realnego 600,
   żeby <strong> w notce był pogrubiony także w silnikach bez fallbacku 700→600 */
.wf-pillars__cta-card strong { font-weight: 600; }

/* ============================================================
   YouTube (340:511)
   ============================================================ */
.wf-yt__grid { display: grid; grid-template-columns: 529px 1fr; gap: 100px; align-items: flex-start; }
.wf-yt__left { display: flex; flex-direction: column; gap: 40px; align-items: flex-start; }
.wf-yt__btn img { width: 20px; height: auto; }
.wf-yt__features { display: flex; justify-content: space-between; gap: 24px; align-self: stretch; }
.wf-yt__feature {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	text-align: center;
	padding: 10px 0;
}
.wf-yt__feature img { height: 48px; width: auto; margin-bottom: 12px; }
.wf-yt__feature strong { font-size: 14px; font-weight: 700; line-height: normal; }
.wf-yt__feature span { font-size: 12px; line-height: normal; }
.wf-yt__channel { display: flex; gap: 32px; align-items: center; }
.wf-yt__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 100px;
	flex: 0 0 auto;
	border-radius: 50%;
	overflow: hidden;
}
.wf-yt__logo img { width: 100%; height: 100%; object-fit: cover; }
.wf-yt__channel-info { display: flex; flex-direction: column; gap: 6px; }
.wf-yt__subs { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.wf-avatars { display: flex; }
.wf-avatars img {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	object-fit: cover;
	margin-right: -8px;
	border: 1px solid var(--black);
}
.wf-yt__img img { width: 100%; height: 447px; object-fit: cover; border-radius: var(--corner); display: block; }
.wf-yt__player {
	position: relative;
	height: 447px;
	cursor: pointer;
	border-radius: var(--corner);
	overflow: hidden;
}
.wf-yt__player img { height: 100%; }
.wf-yt__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0);
	transition: transform 0.25s, background 0.25s, opacity 0.3s;
}
.wf-yt__player:hover .wf-yt__play { transform: scale(1.08); background: rgba(0, 0, 0, 0.15); }
.wf-yt__player.is-playing { cursor: default; }
.wf-yt__player.is-playing .wf-yt__play { opacity: 0; pointer-events: none; }
.wf-yt__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	border-radius: var(--corner);
	opacity: 0;
	animation: wf-player-in 0.5s ease 0.05s forwards;
}
@keyframes wf-player-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* ============================================================
   Kalkulator (285:1557)
   ============================================================ */
.wf-calc__grid { display: grid; grid-template-columns: 539px 1fr; gap: 59px; align-items: end; }
.wf-calc__panel {
	background: var(--dark-b);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.wf-calc__field { display: flex; flex-direction: column; gap: 12px; }
.wf-calc__row { display: flex; align-items: center; gap: 24px; }
.wf-range {
	-webkit-appearance: none;
	appearance: none;
	flex: 1;
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(to right, var(--roz) var(--pct, 50%), var(--stroke) var(--pct, 50%));
	outline: none;
}
.wf-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--roz);
	border: 2px solid var(--stroke);
	cursor: pointer;
}
.wf-range::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--roz);
	border: 2px solid var(--stroke);
	cursor: pointer;
}
.wf-calc__value {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	width: 100px;
	padding: 8px 24px;
	border: 1px solid var(--roz);
	border-radius: 8px;
	font-size: 26px;
	line-height: 1.3;
}
.wf-calc__unit { font-size: 20px; font-weight: 500; }
.wf-calc__result { display: flex; flex-direction: column; gap: 24px; }
/* Druga linia nagłówka wyniku — fiolet na każdej szerokości (Figma 285:1494) */
.wf-calc__l2 { color: var(--roz); }
.wf-calc__total { font-size: 100px; font-weight: 300; line-height: 1.1; }
.wf-calc__summary {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	border: 1px solid var(--stroke);
	border-radius: var(--corner);
	padding: 24px 32px;
}
.wf-calc__summary div { display: flex; flex-direction: column; gap: 4px; }
.wf-calc__summary div + div { border-left: 1px solid var(--stroke); padding-left: 24px; }
.wf-calc__summary span { font-size: 14px; }
.wf-calc__summary strong { font-size: 20px; font-weight: 500; }
/* Zastrzeżenie z ikoną ⓘ — widoczne też na desktopie (Figma 285:1622) */
.wf-calc__disclaimer {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	color: var(--grey);
	font-size: 12px;
	line-height: 18px;
	max-width: 842px;
}
.wf-calc__disclaimer svg { flex: 0 0 auto; margin-top: 1px; }

/* ============================================================
   Formularz (342:517)
   ============================================================ */
.wf-form__grid { display: grid; grid-template-columns: 529px 1fr; gap: 100px; align-items: flex-start; }
.wf-form__left { display: flex; flex-direction: column; gap: 32px; }
.wf-form__points { display: flex; flex-direction: column; gap: 32px; }
.wf-form__decor { width: min(405px, 100%); }
.wf-form__card {
	background: var(--dark-b);
	padding: 64px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.wf-form__card form { display: flex; flex-direction: column; gap: 32px; }
.wf-form__ok { color: var(--roz); font-weight: 500; }
.wf-field { display: flex; flex-direction: column; gap: 8px; }
.wf-field > span:first-child { font-size: 14px; }
.wf-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.wf-field-row .wf-field { min-width: 0; }
.wf-field { min-width: 0; }
.wf-input { min-width: 0; max-width: 100%; }
.wf-input {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--stroke);
	border-radius: 8px;
	padding: 8px 16px;
}
.wf-input input, .wf-input select, .wf-input textarea {
	flex: 1;
	background: none;
	border: 0;
	outline: none;
	color: var(--white);
	font-family: inherit;
	font-size: 14px;
	line-height: 21px;
	min-width: 0;
}
.wf-input ::placeholder { color: var(--grey); opacity: 1; }
.wf-input select { color: var(--grey); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23818181' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 4px center; cursor: pointer; }
.wf-input select option { background: var(--dark-b); color: var(--white); }
.wf-input img { width: 16px; height: 16px; flex: 0 0 auto; }
.wf-input--area { padding-bottom: 56px; }
.wf-input--area textarea { resize: vertical; }
.wf-consent { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.wf-consent input {
	appearance: none;
	width: 14px;
	height: 14px;
	margin: 2px 0 0;
	border: 1px solid var(--roz);
	background: var(--black);
	flex: 0 0 auto;
	cursor: pointer;
}
.wf-consent input:checked { background: var(--roz); box-shadow: inset 0 0 0 2px var(--black); }
.wf-consent span { font-size: 12px; color: var(--grey); line-height: 18px; }
.wf-form__submit { width: 100%; }
.wf-form__submit img { width: 20px; height: 20px; }

/* ============================================================
   Jak zacząć (298:2243)
   ============================================================ */
.wf-start__row { display: flex; align-items: flex-start; justify-content: center; }
.wf-start__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
	width: 240px;
	flex: 0 0 auto;
}
.wf-start__item .wf-pillar__icon { margin-bottom: 0; }
.wf-start__no { color: var(--roz); font-size: 36px; font-weight: 500; line-height: 1.1; }
.wf-start__item h3 { min-height: 68px; display: flex; align-items: center; justify-content: center; }
.wf-start__dash { width: 180px; height: 1px; background: var(--roz); margin-top: 50px; flex: 0 1 auto; }

/* ============================================================
   Opinie (307:2501)
   ============================================================ */
.wf-reviews__score {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 1px solid var(--stroke);
	border-radius: var(--corner);
	padding: 28px 64px 28px 172px;
	max-width: 953px;
	margin: 0 auto 64px;
}
.wf-reviews__score-main { display: flex; align-items: flex-end; gap: 32px; }
.wf-reviews__num { font-size: 80px; font-weight: 400; line-height: 1.1; white-space: nowrap; }
.wf-reviews__num small { font-size: 40px; font-weight: 400; }
.wf-reviews__score-line { width: 1px; align-self: stretch; background: var(--stroke); }
.wf-reviews__logos { width: 235px; height: auto; flex: 0 0 auto; }
/* Moduł opinii Google 5★ (poprawki2 10.VII) */
.wf-greviews { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.wf-greviews__g {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: #fff;
	border-radius: 50%;
	flex: 0 0 auto;
}
.wf-greviews__txt { display: flex; flex-direction: column; gap: 4px; }
.wf-greviews__txt strong { font-size: 18px; font-weight: 500; }
.wf-greviews__row { display: flex; align-items: center; gap: 8px; }
.wf-greviews__row b { font-size: 16px; font-weight: 600; }
.wf-greviews__stars { display: flex; gap: 2px; }
.wf-greviews__stars svg { display: block; }
.wf-reviews__stars-wrap { display: flex; flex-direction: column; gap: 8px; }
.wf-reviews__row { display: flex; align-items: center; }
.wf-reviews__viewport { overflow: hidden; flex: 1; margin: 0 -16px; padding: 60px 16px; }
.wf-reviews__cards { display: flex; gap: 40px; }
.wf-reviews__cards .wf-review { flex: 0 0 calc((100% - 80px) / 3); }
.wf-review {
	padding: 40px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	min-height: 411px;
}
.wf-review__body { display: flex; flex-direction: column; gap: 24px; padding-bottom: 32px; }
.wf-review__quote { width: 32px; height: 25px; align-self: flex-start; }
.wf-review__person { display: flex; gap: 30px; align-items: center; }
.wf-review__avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.wf-review__person > div { display: flex; flex-direction: column; gap: 4px; }
.wf-reviews__row .wf-arrow { z-index: 2; }
/* Długie opinie — mniejszy font, żeby mieściły się w karcie (PDF pkt 15) */
.wf-review.is-long .wf-review__body p { font-size: 18px; line-height: 1.45; }
.wf-review.is-xlong .wf-review__body p { font-size: 15px; line-height: 1.5; }

/* Odręczne kartki referencji pod karuzelą opinii */
.wf-reviews__notes {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 48px;
	margin-top: 40px;
	flex-wrap: wrap;
}
.wf-reviews__note {
	margin: 0;
	max-width: 420px;
	background: #fdfdfb;
	border-radius: 6px;
	padding: 14px 14px 10px;
	box-shadow: 0 14px 40px rgba(109, 66, 216, 0.28), 0 4px 14px rgba(0, 0, 0, 0.5);
	transform: rotate(-1.6deg);
	transition: transform 0.25s ease;
}
.wf-reviews__note:nth-child(2n) { transform: rotate(1.4deg); }
.wf-reviews__note:hover { transform: rotate(0) scale(1.02); }
.wf-reviews__note img { display: block; width: 100%; height: auto; border-radius: 3px; }
.wf-reviews__note figcaption {
	padding: 10px 4px 4px;
	color: #2b2b2b;
	font-size: 13px;
	font-weight: 500;
	text-align: center;
}

/* ============================================================
   Odkryj / realizacje + zalety (342:524)
   ============================================================ */
.wf-gallery__head { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; max-width: 460px; margin-bottom: 32px; }
.wf-gallery__grid { display: grid; grid-template-columns: 421px 1fr; gap: 64px; margin-bottom: 64px; }
.wf-gallery__left { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.wf-gallery__metrics { display: flex; gap: 48px; }
.wf-metric { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.wf-metric img { width: 48px; height: 48px; margin-bottom: 4px; }
.wf-metric__num { color: var(--roz); font-size: 26px; line-height: 1.3; }
.wf-metric__label { font-size: 14px; line-height: 21px; }
/* Kolumny proporcjonalne (344:587 jak w Figmie) — na węższych oknach siatka
   zachowuje proporcje projektu, kafle po prawej pozostają wyśrodkowane (pkt 18) */
.wf-gallery__imgs { display: grid; grid-template-columns: minmax(0, 344fr) minmax(0, 587fr); gap: 24px; }
.wf-gallery__tall { width: 100%; height: 490px; object-fit: cover; border-radius: var(--corner); }
.wf-gallery__cells { display: flex; flex-direction: column; gap: 24px; }
.wf-gallery__row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.wf-gallery__row2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.wf-gallery__row3 img, .wf-gallery__row2 img { width: 100%; height: 233px; object-fit: cover; border-radius: var(--corner); display: block; }

.wf-advantages { display: flex; flex-direction: column; gap: 32px; }
.wf-adv { border: 1px solid var(--stroke); border-radius: var(--corner); }
.wf-adv__head {
	display: flex;
	align-items: center;
	padding: 24px 0;
	gap: 0;
}
.wf-adv__no {
	color: var(--roz);
	font-size: 36px;
	font-weight: 500;
	line-height: 1.1;
	padding: 24px;
	width: 120px;
	flex: 0 0 120px;
	text-align: center;
	border-right: 1px solid var(--stroke);
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wf-adv__title {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 0 24px;
	width: 322px;
	flex: 0 0 322px;
}
.wf-adv__title img { width: 44px; height: 44px; padding: 4px; flex: 0 0 auto; }
.wf-adv__title strong { font-size: 20px; font-weight: 500; line-height: 30px; }
.wf-adv__text { flex: 1; padding-right: 32px; }
.wf-adv__text p { font-size: 14px; line-height: 21px; }
/* Zwijanie: płynna animacja wysokości, tekst znika bez przełamywania tytułów */
.wf-adv__text {
	overflow: hidden;
	max-height: 300px;
	opacity: 1;
	transition: max-height 0.35s ease, opacity 0.3s ease;
}
.wf-adv:not(.is-open) .wf-adv__text { max-height: 0; opacity: 0; }
.wf-adv__toggle {
	background: none;
	border: 0;
	align-self: stretch;
	padding: 32px;
	flex: 0 0 auto;
	transition: opacity 0.2s;
}
.wf-adv__toggle:hover { opacity: 0.75; }
/* Ikona pozostaje plusem w obu stanach (PDF pkt 19 — bez X) */
.wf-adv__toggle img { width: 25px; height: 25px; display: block; }

/* ============================================================
   Podstrony — hero (Drukarki itd.)
   ============================================================ */
.wf-phero__stage {
	min-height: 837px;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-start;
}
.wf-phero__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
	padding-top: 117px;
}
.wf-phero__title { max-width: 560px; }
.wf-phero__sub { max-width: 637px; }
.wf-phero__btns { display: flex; gap: 32px; align-items: center; }

.wf-usps--tall .wf-usps__inner { align-items: flex-start; }
.wf-usp--v {
	flex-direction: column;
	text-align: center;
	align-items: center;
	gap: 16px;
	flex: 1;
}
.wf-usp--v .wf-usp__icon { width: 64px; height: 64px; }
.wf-usp--v .wf-usp__txt { align-items: center; }
.wf-usp--v + .wf-usp--v { border-left: 1px solid var(--stroke); padding-left: 28px; }

/* ============================================================
   Drukarki — 2 modele (601:1135)
   ============================================================ */
.wf-models__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.wf-model { padding: 32px; display: flex; flex-direction: column; gap: 32px; justify-content: space-between; }
.wf-model__inner { display: flex; gap: 12px; }
/* Zdjęcie drukarki powiększone jak w Figmie — kadr przycina pusty margines pliku
   (poprawki2 10.VII: „drukarki w kartach powiększone zgodnie z projektem") */
.wf-model__img { flex: 0 0 49%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.wf-model__img img { width: 136%; max-width: none; height: auto; }
.wf-model__info { display: flex; flex-direction: column; gap: 20px; }
.wf-model__lead { font-size: 14px; }
.wf-model__price { font-size: 14px; }
.wf-model__price strong { font-size: 26px; font-weight: 500; }
.wf-model__btns { display: flex; gap: 16px; }
.wf-model__btns .wf-btn { flex: 1; }

.wf-finance {
	margin-top: 70px;
	display: flex;
	gap: 32px;
	align-items: center;
	padding: 32px;
}
.wf-finance__icon { width: 197px; height: 197px; flex: 0 0 auto; }
/* 406px — separator pionowy trafia w 700px od lewej krawędzi karty jak w makiecie,
   a disclaimer po prawej zyskuje szerokość i łamie się na 7 linii (nie 8) */
.wf-finance__info { display: flex; flex-direction: column; gap: 24px; flex: 0 0 406px; }
/* Blok „pakiet już od" ma w Figmie 265px — tekst łamie się na 2 linie */
.wf-finance__info .wf-h4 { max-width: 265px; }
/* inline-block + margin-top: odstęp między „już od" a ceną ~17px jak w makiecie */
.wf-finance__price { color: var(--roz); font-size: 36px; font-weight: 500; line-height: 1.1; display: inline-block; margin-top: 7px; }
.wf-finance__unit { font-size: 20px; }
.wf-finance__legal { border-left: 1px solid var(--stroke); padding-left: 64px; align-self: stretch; display: flex; align-items: center; }

/* ============================================================
   Drukarki — zastosowanie (621:1378)
   ============================================================ */
.wf-materials__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.wf-material {
	height: 243px;
	border-radius: var(--corner);
	/* Obramowanie kafli powierzchni jak w projekcie (poprawki2 10.VII) */
	border: 1px solid var(--roz);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 20px;
	position: relative;
	overflow: hidden;
	box-shadow: var(--glow);
}
.wf-material::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.75));
}
.wf-material span { position: relative; z-index: 1; font-size: 20px; font-weight: 500; }
.wf-material--more { background: linear-gradient(135deg, var(--dark-b), var(--granat)); border: 1px solid var(--roz); align-items: center; }
.wf-materials__tags { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
.wf-tag {
	padding: 6px 16px;
	border: 1px solid var(--roz);
	border-radius: 100px;
	color: var(--roz);
	font-size: 12px;
	font-weight: 500;
}
.wf-usecase { margin-top: 64px; display: flex; overflow: hidden; }
/* Kolumna szersza, żeby oba przyciski mieściły się obok siebie jak w projekcie (poprawki2) */
.wf-usecase__info { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; padding: 40px; flex: 0 0 50%; }
.wf-usecase__btns { display: flex; gap: 16px; flex-wrap: wrap; }
.wf-usecase__btns img { width: 20px; height: 20px; }
.wf-usecase__img { flex: 1; }
.wf-usecase__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   Drukarki — co nowego taby (623:2742)
   ============================================================ */
/* Przebudowa „Co nowego" (poprawki2 10.VII): czarne tło, maszyna po lewej jako kolumna */
.wf-whatsnew { background: var(--black); }
.wf-whatsnew__inner { display: flex; gap: 64px; align-items: center; }
.wf-whatsnew__machine { flex: 0 0 30%; display: flex; justify-content: center; align-items: center; min-width: 0; }
.wf-whatsnew__machine img {
	max-height: 780px;
	width: auto;
	max-width: 100%;
	/* lighten: czarne tło pliku zlewa się z czernią sekcji (bez twardej krawędzi kadru) */
	mix-blend-mode: lighten;
	filter: drop-shadow(0 0 60px rgba(109, 66, 216, 0.35));
}
.wf-whatsnew__content { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; flex: 1; min-width: 0; }
.wf-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.wf-tab {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: auto;
	min-width: 108px;
	min-height: 100px;
	padding: 12px 18px;
	background: rgba(0, 0, 0, 0.6);
	border: 1px solid var(--stroke);
	border-radius: 12px;
	color: var(--white);
	font-size: 12px;
	text-align: center;
	transition: border-color 0.2s;
}
.wf-tab img { width: 32px; height: 32px; }
.wf-tab:hover, .wf-tab.is-active { border-color: var(--roz); }
/* Strzałka pod aktywnym tabem jak w projekcie */
.wf-tab.is-active::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -7px;
	transform: translateX(-50%);
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 7px solid var(--roz);
}
.wf-tabpanel { display: none; padding: 24px; gap: 24px; background: rgba(19, 12, 37, 0.85); width: 100%; }
/* Płynne przejście między panelami (poprawki2: „animacje przejść działają niepoprawnie") */
.wf-tabpanel.is-active { display: flex; animation: wf-tabfade 0.35s ease; }
@keyframes wf-tabfade {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}
.wf-tabpanel__img { flex: 0 0 220px; }
.wf-tabpanel__img img { width: 100%; height: auto; border-radius: 12px; }
/* Kafel z neonową ikoną taba — grafika panelu zmienia się z zawartością */
.wf-tabpanel__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 220 / 165;
	border-radius: 12px;
	background: radial-gradient(85% 85% at 50% 42%, rgba(109, 66, 216, 0.4), rgba(9, 5, 20, 0.95)), #0a0614;
}
.wf-tabpanel__icon img { width: 84px; height: 84px; filter: drop-shadow(0 0 18px rgba(169, 119, 232, 0.9)); }
.wf-tabpanel__title { color: var(--roz); margin-bottom: 12px; }
.wf-whatsnew .wf-btn img { width: 20px; height: 20px; }

/* ============================================================
   Drukarki — głowica + UV DTF (628:2885)
   ============================================================ */
.wf-head-upg__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 64px; align-items: center; }
/* Zdjęcie głowicy obok tekstu, większe — układ jak w projekcie (poprawki2 10.VII) */
.wf-head-upg__left {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	column-gap: 24px;
	row-gap: 20px;
	align-items: start;
	justify-items: start;
}
.wf-head-upg__left > * { grid-column: 1; }
.wf-head-upg__left h2 { max-width: 420px; }
.wf-head-upg__left p { max-width: 400px; }
.wf-head-upg__img { grid-column: 2; grid-row: 1 / span 3; max-width: 300px; width: 100%; align-self: center; }
.wf-head-upg__feats { display: flex; gap: 24px; align-items: flex-start; grid-row: 2; }
.wf-head-upg__feat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
	font-size: 14px;
	flex: 1;
}
.wf-head-upg__feat img { width: 48px; height: 48px; }
.wf-dtf {
	grid-column: 2;
	grid-row: 1 / span 2;
	background: var(--dark-b);
	display: flex;
	overflow: hidden;
	align-items: stretch;
}
.wf-dtf__txt { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; padding: 40px; flex: 1; }
.wf-dtf__img { width: 288px; object-fit: cover; }

/* ============================================================
   Drukarki — banner 360° (633:2886) i CTA końcowe (636:3177)
   ============================================================ */
/* Druk 360° wg projektu (poprawki2 10.VII): tekst w lewej kolumnie na czerni,
   butelka w naturalnej skali po prawej — bez tekstu na zdjęciu */
.wf-cyl {
	/* Kadr wg makiety: butelka większa, środek fotki ~400px w prawo od osi
	   (kotwica do środka → nie odjeżdża na ekranach >1920px) */
	background-size: auto 105%;
	background-position: calc(50% + 400px) center;
	background-repeat: no-repeat;
	background-color: var(--black);
}
.wf-cyl__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: 24px;
	min-height: 366px;
	justify-content: center;
}
.wf-cyl__inner > * { max-width: 54%; }
.wf-cyl__desc { max-width: min(680px, 54%); }
.wf-cyl__note { display: flex; align-items: center; gap: 14px; }
.wf-cyl__note svg { flex: 0 0 auto; }

.wf-endcta__inner { display: flex; gap: 125px; align-items: center; justify-content: space-between; }
/* O nas — CTA jako karta z obramowaniem (Figma 709:1808, poprawki2 10.VII) */
.wf-endcta__box {
	display: flex;
	align-items: center;
	gap: 56px;
	border: 1px solid var(--roz);
	border-radius: var(--corner);
	padding: 56px 64px;
	box-shadow: var(--glow);
	background: rgba(6, 3, 14, 0.6);
}
.wf-endcta__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 132px;
	height: 132px;
	background: var(--granat);
	border-radius: 50%;
	flex: 0 0 auto;
}
.wf-endcta__icon img { width: 60px; height: 60px; filter: brightness(0) invert(1); }
.wf-endcta--onas .wf-endcta__left { flex: 1; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.wf-endcta__btns--col { flex-direction: column; align-items: stretch; gap: 16px; flex: 0 0 auto; min-width: 320px; }
@media (max-width: 900px) {
	.wf-endcta__box { flex-direction: column; align-items: flex-start; gap: 32px; padding: 32px; }
	.wf-endcta__btns--col { min-width: 0; width: 100%; }
}
.wf-endcta__left { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.wf-endcta__btns { display: flex; gap: 16px; flex-wrap: wrap; }
.wf-endcta__btns img { width: 20px; height: 20px; }
.wf-endcta__feats { display: flex; gap: 48px; }

/* ============================================================
   Współpraca — hero + karty (689:1970)
   ============================================================ */
.wf-whero .wf-phero__stage { min-height: 720px; }
/* Współpraca — mocniejsze wygaszenie lewej strony zdjęcia pod tekst (poprawki2 10.VII) */
@media (min-width: 721px) {
	.wf-whero .wf-phero__stage::after {
		background: linear-gradient(90deg, rgba(0, 0, 0, 0.97) 0%, rgba(0, 0, 0, 0.72) 30%, rgba(0, 0, 0, 0.25) 52%, transparent 68%);
	}
}
.wf-herocards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	margin-top: -64px;
	position: relative;
	z-index: 3;
	padding-bottom: 40px;
}
.wf-herocard { display: flex; align-items: flex-start; gap: 16px; padding: 24px; background: var(--black); }
.wf-herocard__icon { width: 40px; height: 40px; flex: 0 0 auto; margin-top: 2px; }
.wf-herocard__txt { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.wf-herocard__arrow { width: 44px; height: 44px; flex: 0 0 auto; align-self: center; }

/* Krok po kroku (693:2577) */
.wf-ksteps__row { display: flex; justify-content: space-between; gap: 24px; counter-reset: kstep; position: relative; }
.wf-ksteps__row::before {
	content: "";
	position: absolute;
	top: 15px;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--roz);
	opacity: 0.5;
}
.wf-kstep { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; max-width: 200px; position: relative; }
.wf-kstep__no {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--roz);
	border-radius: 50%;
	background: var(--black);
	font-size: 12px;
	color: var(--roz);
	position: relative;
	z-index: 1;
}
.wf-kstep__icon { width: 44px; height: 44px; margin-top: 16px; }
.wf-kstep strong { font-size: 16px; font-weight: 500; }
.wf-kstep .wf-hr { width: 40px; }

/* WallFlow Care (757:5304) */
/* Care: niższa sekcja + kolumny w proporcji projektu, karty równej wysokości (poprawki2 10.VII) */
.wf-care { background-size: cover; background-position: center; padding: 72px 0; }
.wf-care__head { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; max-width: 560px; margin-bottom: 32px; }
.wf-care__desc { font-size: 13px; }
.wf-care__cards { display: grid; grid-template-columns: 1fr 1.65fr; gap: 40px; align-items: stretch; }
.wf-carecard { background: rgba(0, 0, 0, 0.85); padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.wf-carecard__head { display: flex; align-items: center; gap: 16px; }
.wf-carecard__head img { width: 48px; height: 48px; }
.wf-care__label { color: var(--roz); font-size: 14px; font-weight: 500; }
.wf-care__list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.wf-care__list li::marker { color: var(--roz); }
.wf-care__price { border: 1px solid var(--stroke); border-radius: 12px; padding: 16px 24px; align-self: flex-start; }
.wf-care__price strong { font-size: 26px; font-weight: 500; }
.wf-care__prices { display: flex; gap: 16px; flex-wrap: wrap; }
.wf-care__price--box { display: flex; gap: 12px; align-items: center; }
.wf-care__price--box img { width: 40px; height: 40px; }

/* 3 filary — taby (699:2885) */
.wf-ftabs__tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 24px; }
.wf-ftab {
	display: flex;
	gap: 20px;
	align-items: center;
	padding: 24px;
	text-align: left;
	background: var(--black);
	color: var(--white);
	border-color: var(--stroke);
	box-shadow: none;
	cursor: pointer;
}
.wf-ftab.is-active { border-color: var(--roz); box-shadow: var(--glow); }
/* Numer w większym obramowanym kwadracie + większy tytuł — wyrównanie jak w projekcie (poprawki2) */
.wf-ftab__no {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	border: 1px solid var(--roz);
	border-radius: 14px;
	font-size: 30px;
	font-weight: 400;
	flex: 0 0 auto;
}
.wf-ftab__txt { display: flex; flex-direction: column; gap: 6px; }
.wf-ftab__txt strong { font-size: 22px; line-height: 1.2; }
/* Strzałka pod aktywnym filarem jak w projekcie */
.wf-ftab { position: relative; }
.wf-ftab.is-active::after {
	content: "";
	position: absolute;
	left: 48px;
	bottom: -9px;
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
	border-top: 9px solid var(--roz);
}
.wf-ftabpanel { display: none; padding: 40px; gap: 64px; }
.wf-ftabpanel.is-active { display: flex; animation: wf-tabfade 0.35s ease; }
.wf-ftabpanel__left { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; flex: 0 0 45%; }
.wf-ftabpanel__left .wf-btn img { width: 20px; height: 20px; }
.wf-ftabpanel__list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-content: start; flex: 1; }
.wf-ftabs__bar {
	display: flex;
	justify-content: space-around;
	gap: 24px;
	border: 1px solid var(--stroke);
	border-radius: var(--corner);
	padding: 16px 24px;
	margin-top: 32px;
}
.wf-ftabs__baritem { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.wf-ftabs__baritem img { width: 22px; height: 22px; }
.wf-ftabs__baritem + .wf-ftabs__baritem { border-left: 1px solid var(--stroke); padding-left: 24px; }

/* Dla kogo (695:2687) */
.wf-who__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.wf-whocard { padding: 16px 16px 24px; display: flex; flex-direction: column; gap: 12px; }
.wf-whocard__img img { width: 100%; height: 200px; object-fit: cover; border-radius: 12px; display: block; }
.wf-who__notes { display: flex; justify-content: center; gap: 64px; margin-top: 48px; flex-wrap: wrap; }

/* Finansowanie 4 karty (701:3285) */
.wf-fin4__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; align-items: stretch; }
.wf-fincard { padding: 28px 24px; display: flex; flex-direction: column; gap: 16px; }
.wf-fincard__icon { width: 44px; height: 44px; align-self: flex-start; }
.wf-fincard .wf-checklist { flex: 1; }
.wf-fincta { margin-top: 48px; display: flex; align-items: center; gap: 32px; padding: 32px; }
.wf-fincta > img { width: 56px; height: 56px; flex: 0 0 auto; }
.wf-fincta__txt { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.wf-fincta__action { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.wf-fincta__action img { width: 20px; height: 20px; }

/* FAQ */
.wf-faq__list { display: flex; flex-direction: column; gap: 16px; max-width: 900px; margin: 0 auto; }
.wf-faqitem { border: 1px solid var(--stroke); border-radius: 12px; }
.wf-faqitem__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 500;
}
.wf-faqitem__plus { width: 18px; height: 18px; transition: transform 0.2s; }
.wf-faqitem.is-open .wf-faqitem__plus { transform: rotate(45deg); }
.wf-faqitem__body { display: none; padding: 0 24px 20px; color: var(--grey); }
.wf-faqitem.is-open .wf-faqitem__body { display: block; }

/* Współpraca — CTA końcowe */
.wf-wcta__steps { display: flex; gap: 48px; justify-content: space-between; margin-top: 48px; }
/* Współpraca — CTA końcowe jako obramowana karta (Figma 709:1666) — desktop only */
@media (min-width: 721px) {
	/* Makieta: jednolite czarne tło nad kartą (bez neonowego pasa sekcji) */
	.wf-wcta::before { content: none; }
	.wf-wcta__card { padding: 48px 56px 56px; }
	.wf-wcta__head { display: flex; align-items: center; justify-content: space-between; gap: 64px; }
	.wf-wcta__intro { margin-bottom: 0; gap: 24px; max-width: 500px; }
	.wf-wcta__intro .wf-h2 { font-size: 40px; line-height: 1.2; }
	.wf-wcta__intro p { font-size: 18px; line-height: 1.5; }
	.wf-wcta__btns { gap: 24px; flex-wrap: nowrap; flex: 0 0 auto; }
	.wf-wcta__btns .wf-btn { padding: 14px 32px; }
	/* Pozioma linia na całej szerokości karty oddziela nagłówek od 3 kroków */
	.wf-wcta__steps {
		border-top: 1px solid var(--stroke);
		margin-top: 48px;
		padding-top: 48px;
		gap: 24px;
		align-items: flex-start;
	}
	/* Krok: ikona po lewej, tytuł + opis wyrównane do lewej */
	.wf-wcta__step { display: flex; align-items: flex-start; gap: 16px; text-align: left; }
	.wf-wcta__step-icon { width: 44px; height: 44px; flex: 0 0 auto; }
	.wf-wcta__step-txt { display: flex; flex-direction: column; gap: 10px; }
	.wf-wcta__step-txt strong { display: block; font-size: 20px; font-weight: 500; line-height: 1.3; }
	.wf-wcta__step-txt span { display: block; font-size: 14px; line-height: 1.6; color: var(--grey); }
	/* Przerywana fioletowa strzałka między krokami (zamiast pionowej linii) */
	.wf-wcta__dash {
		flex: 1 1 auto;
		max-width: 110px;
		height: 0;
		border-top: 1px dashed var(--roz);
		position: relative;
		margin-top: 22px;
		opacity: 0.85;
	}
	.wf-wcta__dash::after {
		content: "";
		position: absolute;
		right: -1px;
		top: -4px;
		width: 7px;
		height: 7px;
		border-top: 1px solid var(--roz);
		border-right: 1px solid var(--roz);
		transform: rotate(45deg);
	}
}

/* ============================================================
   Serwis
   ============================================================ */
.wf-shero .wf-phero__stage { min-height: 700px; }
.wf-shero__sub { font-size: 14px; max-width: 560px; }
/* Serwis — zdjęcie u góry po prawej, gradient w lewo + w dół (poprawki2 10.VII) */
@media (min-width: 721px) {
	.wf-shero .wf-phero__stage { background-position: right top; }
	.wf-shero .wf-phero__stage::after {
		background:
			linear-gradient(90deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 32%, transparent 58%),
			linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.92) 100%);
	}
}
.wf-servicecard {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 28px 40px;
	margin-top: -60px;
	position: relative;
	z-index: 3;
	background: var(--black);
}
.wf-servicecard__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	background: var(--granat);
	border-radius: 50%;
	flex: 0 0 auto;
}
.wf-servicecard__icon img { width: 36px; height: 36px; }
.wf-servicecard div { display: flex; flex-direction: column; gap: 6px; }

.wf-services__grid { display: grid; grid-template-columns: 420px 1fr; gap: 79px; align-items: start; }
.wf-services__left { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; position: sticky; top: 24px; }
/* Usługi: 3 kolumny, ikony w okręgach po lewej (poprawki2 10.VII) */
.wf-services__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.wf-servicebox { padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.wf-servicebox img {
	width: 64px;
	height: 64px;
	padding: 15px;
	border: 1px solid var(--stroke);
	border-radius: 50%;
	align-self: flex-start;
	margin-bottom: 8px;
}

/* Diagnostyka: zdjęcie po prawej na czerni, tekst czytelny w lewej kolumnie (poprawki2 10.VII) */
.wf-diag {
	background-size: auto 100%;
	background-position: right center;
	background-repeat: no-repeat;
	background-color: var(--black);
	min-height: 645px;
	display: flex;
	align-items: center;
	position: relative;
}
.wf-diag::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.7) 34%, transparent 60%);
	pointer-events: none;
}
.wf-diag > .wf-container { position: relative; z-index: 1; }
.wf-diag__content { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; max-width: 560px; }
.wf-diag__minis { display: flex; gap: 24px; flex-wrap: wrap; font-size: 13px; }
.wf-diag__minis span { display: inline-flex; align-items: center; gap: 8px; }
.wf-diag__minis img { width: 18px; height: 18px; }
.wf-diag__steps {
	display: flex;
	align-items: center;
	gap: 16px;
	border: 1px solid var(--stroke);
	border-radius: var(--corner);
	padding: 16px 24px;
	font-size: 14px;
}
.wf-diag__step { display: inline-flex; align-items: center; gap: 10px; }
.wf-diag__step i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid var(--roz);
	border-radius: 50%;
	font-style: normal;
	color: var(--roz);
	flex: 0 0 auto;
}
.wf-diag__arrow { color: var(--roz); }
.wf-diag .wf-btn img, .wf-services .wf-btn img, .wf-shero .wf-btn img, .wf-endcta .wf-btn img { width: 20px; height: 20px; }
/* Formularz serwisowy: obramowanie karty + przycisk na pełną szerokość (poprawki2 10.VII) */
.wf-sfaq .wf-form__card { border: 1px solid var(--roz); box-shadow: var(--glow); }
.wf-sfaq .wf-form__submit { width: 100%; justify-content: center; }

.wf-sfaq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.wf-sfaq .wf-faq__list { max-width: none; margin: 0; }
.wf-sfaq .wf-form__card { padding: 40px; }

/* ============================================================
   Kontakt
   ============================================================ */
.wf-contact { background-size: cover; background-position: center; }
.wf-contact__grid { display: grid; grid-template-columns: 1fr 560px; gap: 100px; align-items: start; }
.wf-contact__info { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.wf-contact__feats { display: flex; gap: 48px; flex-wrap: wrap; }
.wf-contact__feats .wf-iconline > img { width: 40px; height: 40px; }
/* Dane kontaktowe wyeksponowane: większy telefon, ikony w kółkach, mniej pustej przestrzeni
   (poprawki2 10.VII) */
.wf-contact__data { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.wf-contact__data a, .wf-contact__data > span { display: inline-flex; align-items: center; gap: 16px; font-size: 17px; font-weight: 500; }
.wf-contact__data a[href^="tel:"] { font-size: 26px; font-weight: 600; color: var(--roz); }
.wf-contact__data img {
	width: 44px;
	height: 44px;
	padding: 11px;
	border: 1px solid var(--roz);
	border-radius: 50%;
	flex: 0 0 auto;
}
.wf-contact__form { background: rgba(19, 12, 37, 0.9); }
.wf-contact .wf-btn img { width: 20px; height: 20px; }

.wf-faq__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 64px; align-items: start; }
.wf-faq--contact .wf-faq__list { max-width: none; margin: 0; }
.wf-noanswer { display: flex; align-items: center; gap: 24px; padding: 28px 40px; margin-top: 48px; border-color: var(--stroke); box-shadow: none; }
.wf-noanswer__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	background: var(--granat);
	border-radius: 50%;
	flex: 0 0 auto;
}
.wf-noanswer__icon img { width: 30px; height: 30px; }
.wf-noanswer__txt { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.wf-noanswer > a { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; white-space: nowrap; }
.wf-noanswer > a img { width: 20px; height: 20px; }

/* ============================================================
   Baza wiedzy
   ============================================================ */
.wf-center-text { text-align: center; }
.wf-kb-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-bottom: 64px; }
.wf-kb-hero__left { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.wf-kb-hero__img img { width: 100%; max-height: 560px; object-fit: contain; }
/* Player playlisty kursu (poprawki2 10.VII) */
.wf-course__player {
	aspect-ratio: 16 / 9;
	border-radius: var(--corner);
	overflow: hidden;
	border: 1px solid var(--roz);
	box-shadow: var(--glow);
	align-self: center;
}
.wf-course__player iframe { width: 100%; height: 100%; border: 0; display: block; }
a.wf-lesson { transition: transform 0.2s, border-color 0.2s; }
a.wf-lesson:hover { transform: translateY(-3px); border-color: var(--roz); }
/* Ramka karty intro w kolorze roz jak w projekcie (poprawki2 10.VII) */
.wf-kb-intro { display: flex; gap: 32px; align-items: flex-start; padding: 40px; border-color: var(--roz); box-shadow: var(--glow); }
/* Hero bazy wiedzy bez neonowej poświaty od góry — projekt zaczyna się czystą czernią */
.wf-kb-hero::before { display: none; }
.wf-kb-intro__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	border: 1px solid var(--roz);
	border-radius: 50%;
	flex: 0 0 auto;
}
.wf-kb-intro__icon img { width: 40px; height: 40px; }
.wf-kb-intro div { display: flex; flex-direction: column; gap: 16px; }

.wf-kb-posts__ask { margin-bottom: 24px; }
.wf-kb-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 48px; }
.wf-kb-chips--4 { margin-top: 32px; margin-bottom: 96px; }
.wf-kb-chip {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px 24px;
	border-color: var(--stroke);
	box-shadow: none;
	font-size: 14px;
	font-weight: 500;
}
.wf-kb-chip img { width: 36px; height: 36px; flex: 0 0 auto; }

.wf-kb-posts__grid { display: grid; grid-template-columns: 1fr 1.55fr; gap: 32px; align-items: start; }
.wf-kb-featured { display: flex; flex-direction: column; overflow: hidden; }
.wf-kb-featured__txt { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; padding: 28px; }
.wf-kb-featured__img img { width: 100%; height: 260px; object-fit: cover; display: block; }
.wf-kb-latest { display: flex; flex-direction: column; gap: 20px; }
.wf-kb-latest__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.wf-kb-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.wf-tag--active { background: linear-gradient(90deg, var(--granat), var(--roz)); color: var(--white); border-color: transparent; }
.wf-kb-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.wf-kb-post { display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 20px; }
.wf-kb-post__img {
	display: flex;
	height: 150px;
	border-radius: 12px;
	background-size: cover;
	background-position: center;
	padding: 10px;
	align-items: flex-start;
}
.wf-kb-post strong { padding: 0 6px; }
.wf-kb-post p, .wf-kb-post > .wf-small { padding: 0 6px; }
.wf-kb-cta { margin-top: 48px; }
.wf-kb-cta__btns { display: flex; flex-direction: column; gap: 12px; }
.wf-kb-cta__btns img { width: 20px; height: 20px; }

.wf-course__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.wf-course__left { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.wf-course__feats { display: flex; gap: 32px; flex-wrap: wrap; }
.wf-course__feats .wf-usp__txt strong { font-size: 18px; }
.wf-course__img img { width: 100%; border-radius: var(--corner); }

.wf-program__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; }
.wf-program__list { gap: 20px; }
.wf-program__lessons { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.wf-lesson { overflow: hidden; display: flex; flex-direction: column; }
.wf-lesson__img { display: block; height: 190px; background-size: cover; background-position: center; }
.wf-lesson__row { display: flex; align-items: center; gap: 12px; padding: 16px; }
.wf-lesson__no {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--roz);
	border-radius: 50%;
	color: var(--roz);
	flex: 0 0 auto;
}
.wf-lesson__row strong { flex: 1; font-size: 15px; font-weight: 500; }

.wf-mentor__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
.wf-mentor__photo img { width: 100%; border-radius: var(--corner); }
.wf-mentor__info { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.wf-mentor__quote { margin-top: 12px; }
.wf-kb-final { margin-top: 32px; }

/* ============================================================
   O nas
   ============================================================ */
.wf-about-card {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 48px;
	padding: 48px;
	margin-top: -100px;
	position: relative;
	z-index: 3;
	background: var(--black);
	border-color: var(--stroke);
	box-shadow: none;
}
.wf-about-card__title { display: flex; flex-direction: column; gap: 16px; }

/* Oś czasu z ikonami w okręgach (Figma 709:1700, poprawki2 10.VII) */
.wf-history__row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; position: relative; }
.wf-history__row::before {
	content: "";
	position: absolute;
	top: 36px;
	left: -9999px;
	right: -9999px;
	height: 1px;
	background: var(--roz);
	opacity: 0.65;
}
.wf-history__item { display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; }
.wf-history__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	border: 1px solid var(--roz);
	background: var(--black);
	position: relative;
	z-index: 1;
}
.wf-history__icon img { width: 34px; height: 34px; }
.wf-history__tick { display: block; width: 1px; height: 30px; background: var(--roz); opacity: 0.65; }
.wf-history__year { font-size: 32px; font-weight: 500; line-height: 1.1; margin-top: 10px; margin-bottom: 16px; }

/* Zespół — poziome karty 3x3 z ramką (Figma 718:2900) */
.wf-team__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.wf-team__member {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	border: 1px solid var(--stroke);
	border-radius: 16px;
	overflow: hidden;
	min-height: 133px;
	text-align: center;
}
.wf-team__member img { width: 133px; height: 133px; object-fit: contain; flex: 0 0 auto; }
.wf-team__member strong { font-size: 16px; font-weight: 500; }
.wf-team__member > strong,
.wf-team__member > span { display: block; }
.wf-team__txt { flex: 1; display: flex; flex-direction: column; gap: 4px; padding-right: 16px; }
.wf-team__cta { margin-top: 64px; }
/* „Co nas napędza?" — nagłówek i karty we wspólnym boksie (Figma 718:2900) */
.wf-drive__box {
	margin-top: 96px;
	border: 1px solid var(--stroke);
	border-radius: var(--corner);
	padding: 48px;
}
.wf-drive__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 40px; }
.wf-drive__head { display: flex; align-items: center; gap: 24px; }
/* Większe okręgi ikon — proporcje względem tekstu jak w projekcie (poprawki2 10.VII) */
.wf-drive__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	border: 1px solid var(--stroke);
	border-radius: 50%;
	flex: 0 0 auto;
}
.wf-drive__icon img { width: 40px; height: 40px; }
.wf-drive__head strong { font-size: 24px; }
.wf-drive { padding: 32px; display: flex; flex-direction: column; gap: 20px; box-shadow: none; }

.wf-guide__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: start; }
.wf-guide__left { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.wf-guide__left .wf-btn img { width: 20px; height: 20px; }
.wf-checkbox-panel { padding: 32px; display: flex; flex-direction: column; gap: 16px; border-color: var(--stroke); box-shadow: none; }
.wf-checkbox-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wf-checkbox-panel__cols { display: flex; align-items: center; gap: 20px; font-size: 13px; }
.wf-checkrow { border: 1px solid var(--roz); border-radius: 12px; }
.wf-checkrow__head { display: flex; align-items: center; gap: 16px; padding: 16px 20px; cursor: pointer; font-size: 14px; font-weight: 500; }
.wf-checkrow__head > span:first-child { flex: 1; }
.wf-checkrow .wf-faqitem__body { padding: 0 20px 16px; }
/* FIX akordeonów checklisty (poprawki2 10.VII): body pokazywał się tylko dla
   .wf-faqitem.is-open — wiersze .wf-checkrow nigdy się nie otwierały. */
.wf-checkrow.is-open .wf-faqitem__body { display: block; }
.wf-checkrow__ico { width: 22px; height: 22px; flex: 0 0 auto; }
.wf-checkrow__chev { width: 20px; height: 20px; flex: 0 0 auto; transition: transform 0.25s; }
.wf-checkrow.is-open .wf-checkrow__chev { transform: rotate(180deg); }
.wf-checkrow.is-open .wf-faqitem__plus { transform: rotate(45deg); }

/* ============================================================
   Responsywność — nagłówek/stopka
   ============================================================ */
/* Menu nie skaluje się już w dół z makietą — na laptopach (MacBook 1280–1512)
   trzyma pełny rozmiar, ciaśniejsze odstępy chronią przed zawijaniem. */
@media (max-width: 1500px) and (min-width: 1081px) {
	.wf-nav__center { gap: 24px; }
	.wf-nav__list { gap: 8px; }
	.wf-nav__list li { gap: 8px; }
	.wf-socials--header { gap: 8px; }
	.wf-socials--header .wf-socials__item { width: 28px; height: 28px; }
	.wf-nav__inner .wf-btn { padding: 10px 22px; }
}
@media (max-width: 1300px) and (min-width: 1081px) {
	.wf-nav__list a { font-size: 12px; }
	.wf-socials--header { display: none; }
	.wf-nav__inner .wf-btn { font-size: 14px; padding: 8px 18px; }
}

@media (max-width: 1080px) {
	.wf-nav__center {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: flex-start;
		background: var(--black);
		border-bottom: 1px solid var(--stroke);
		padding: 16px 20px 24px;
		gap: 16px;
	}
	.wf-nav--open .wf-nav__center { display: flex; }
	.wf-nav__list { flex-direction: column; align-items: flex-start; }
	.wf-nav__list li + li::before { display: none; }
	.wf-nav__list a { font-size: 16px; }
	.wf-nav__inner .wf-btn { display: none; }
	.wf-burger { display: block; }
	.wf-footer__main { flex-direction: column; }
}

/* ============================================================
   Responsywność — sekcje (wg makiety Mobile 347:377)
   ============================================================ */
@media (max-width: 1280px) {
	.wf-hero .wf-arrow--prev { left: 16px; }
	.wf-hero .wf-arrow--next { right: 16px; }
	.wf-stats__inner { flex-direction: column; align-items: stretch; }
	.wf-stats__head { max-width: none; flex: 1; text-align: center; align-items: center; }
	.wf-yt__grid, .wf-form__grid, .wf-calc__grid { grid-template-columns: 1fr; gap: 48px; }
	.wf-gallery__grid { grid-template-columns: 1fr; }
	.wf-models__grid { grid-template-columns: 1fr; }
	.wf-whatsnew__inner { flex-direction: column; }
	.wf-whatsnew__machine { order: 2; }
	.wf-whatsnew__machine img { max-height: 480px; }
	.wf-head-upg__grid { grid-template-columns: 1fr; }
	.wf-dtf { grid-column: 1; grid-row: auto; }
	.wf-head-upg__feats { grid-row: auto; flex-wrap: wrap; }
	.wf-endcta__inner { flex-direction: column; gap: 48px; align-items: flex-start; }
	.wf-services__grid, .wf-sfaq__grid, .wf-contact__grid, .wf-guide__grid { grid-template-columns: 1fr; gap: 48px; }
	.wf-services__left { position: static; }
	.wf-kb-posts__grid, .wf-course__grid, .wf-program__grid, .wf-mentor__grid { grid-template-columns: 1fr; gap: 48px; }
	.wf-kb-chips { grid-template-columns: repeat(2, 1fr); }
	.wf-team__grid { grid-template-columns: repeat(3, 1fr); }
	.wf-history__row { grid-template-columns: repeat(3, 1fr); }
	.wf-history__row::before { display: none; }
	.wf-fin4__grid { grid-template-columns: repeat(2, 1fr); }
	.wf-care__cards { grid-template-columns: 1fr; }
	.wf-ftabpanel { flex-direction: column; gap: 32px; }
	.wf-who__grid { grid-template-columns: repeat(2, 1fr); }
	.wf-herocards { grid-template-columns: 1fr; }
	.wf-ksteps__row { flex-wrap: wrap; justify-content: center; }
	.wf-ksteps__row::before { display: none; }
	.wf-materials__grid { grid-template-columns: repeat(3, 1fr); }
	.wf-usecase { flex-direction: column; }
	.wf-start__dash { display: none; }
	.wf-start__row { flex-wrap: wrap; gap: 48px; }
	.wf-steps__card { flex-direction: column; gap: 0; }
	.wf-steps__img { flex: none; width: 100%; }
	.wf-steps__body { padding: 32px; }
	.wf-steps__cardrow .wf-arrow { display: none; }
	.wf-reviews__cards .wf-review { flex: 0 0 100%; }
	.wf-review { min-height: 0; }
	.wf-pillars__grid { grid-template-columns: 1fr; gap: 72px; }
	.wf-gallery__imgs { grid-template-columns: 1fr; }
	.wf-gallery__tall { height: 320px; width: 100%; object-fit: cover; }
	.wf-usps--tall .wf-usps__inner { flex-wrap: wrap; justify-content: flex-start; }
	.wf-usp--v + .wf-usp--v { border-left: 0; padding-left: 0; }
	.wf-usp--v { flex: 1 1 28%; }
	.wf-finance { flex-direction: column; align-items: flex-start; }
	.wf-finance__info { flex: none; }
	.wf-finance__legal { border-left: 0; padding-left: 0; }
	.wf-noanswer { flex-wrap: wrap; }
	.wf-fincta { flex-direction: column; align-items: flex-start; }
	.wf-about-card { grid-template-columns: 1fr; margin-top: 0; }
	.wf-faq__cols { grid-template-columns: 1fr; }
	.wf-wcta__steps { flex-direction: column; gap: 32px; }
}

@media (max-width: 720px) {
	.wf-section { padding: 64px 0; }
	.wf-badge { white-space: normal; text-align: center; }
	.wf-nav__list a { white-space: normal; text-align: left; }
	.wf-h1, .wf-hero__title { font-size: 34px; }
	.wf-h2 { font-size: 27px; }
	.wf-h3 { font-size: 20px; }
	.wf-calc__total { font-size: 56px; }
	.wf-hero__stage { min-height: 0; aspect-ratio: auto; max-height: none; }
	.wf-hero__grid { grid-template-columns: 1fr; }
	.wf-hero__person { display: none; }
	.wf-hero__grid--content { position: relative; inset: auto; }
	.wf-hero__content { grid-column: 1; max-width: none; }
	.wf-hero__slide { position: absolute; background-size: cover; background-position: center; }
	.wf-hero__slide.is-active { position: relative; }
	.wf-phero__stage { min-height: 0; padding: 48px 0; position: relative; }
	/* Przyciemnienie zdjęcia hero podstron — desktopowy gradient ::after działa tylko ≥721px */
	.wf-phero__stage::after {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.5);
		pointer-events: none;
	}
	.wf-phero__stage .wf-container { position: relative; z-index: 1; }
	.wf-phero__btns { flex-wrap: wrap; gap: 16px; }
	/* Żaden przycisk nie może być szerszy niż ekran — długie teksty (EN/FR) się zawijają */
	.wf-btn { white-space: normal; text-align: center; max-width: 100%; }
	.wf-hero .wf-arrow { display: none; }
	.wf-reviews__cards .wf-review { flex: 0 0 100%; }
	/* Karuzela opinii: karta na całą szerokość, strzałki pod kartą (nie zabierają szerokości) */
	.wf-reviews__row { flex-wrap: wrap; justify-content: center; gap: 16px; }
	.wf-reviews__viewport { flex: 0 0 100%; order: -1; margin: 0; padding: 24px 0; }
	.wf-review { padding: 24px; }
	.wf-review__person { gap: 16px; }
	.wf-usps__inner { flex-direction: column; align-items: flex-start; gap: 24px; }
	.wf-usp--v { align-items: flex-start; text-align: left; flex-direction: row; }
	.wf-usp__txt strong, .wf-usp__txt span { white-space: normal; font-size: revert; }
	.wf-usp__txt strong { font-size: 18px; }
	.wf-usp__txt span { font-size: 13px; }
	.wf-usp__icon { width: 40px; }
	.wf-stats__cards { flex-direction: column; align-items: center; }
	.wf-steps__line { flex-wrap: wrap; gap: 16px; }
	.wf-step__dash { display: none; }
	.wf-field-row { grid-template-columns: 1fr; }
	.wf-form__card { padding: 24px; }
	.wf-yt__features { flex-wrap: wrap; }
	.wf-calc__summary { flex-direction: column; }
	.wf-calc__summary div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--stroke); padding-top: 16px; }
	.wf-gallery__row3 { grid-template-columns: 1fr; }
	.wf-gallery__row2 { grid-template-columns: 1fr; }
	.wf-adv__head { flex-wrap: wrap; padding: 16px; gap: 12px; }
	.wf-adv__no { width: auto; flex: 0 0 auto; border-right: 0; padding: 0; }
	.wf-adv__title { width: auto; flex: 1; padding: 0; }
	.wf-adv__text { flex: 1 1 100%; order: 4; padding: 0 8px 8px; }
	.wf-adv__toggle { border-left: 0; padding: 8px; }
	.wf-reviews__score { flex-direction: column; padding: 24px; text-align: center; }
	.wf-materials__grid { grid-template-columns: repeat(2, 1fr); }
	.wf-fin4__grid, .wf-who__grid, .wf-kb-cards, .wf-drive__grid { grid-template-columns: 1fr; }
	.wf-team__grid { grid-template-columns: repeat(2, 1fr); }
	.wf-history__row { grid-template-columns: 1fr 1fr; }
	.wf-program__lessons { grid-template-columns: 1fr; }
	.wf-model__inner { flex-direction: column; }
	.wf-model__img { flex: none; width: 100%; }
	.wf-model__img img { width: 100%; }
	.wf-model { min-width: 0; }
	.wf-model__btns { flex-direction: column; }
	.wf-dtf { flex-direction: column; }
	.wf-dtf__img { width: 100%; height: 240px; }
	/* Głowica wycentrowana na mobile, ikony w 2 kolumnach (poprawki2 pkt 10 Mobile) */
	.wf-head-upg__left { grid-template-columns: 1fr; }
	.wf-head-upg__img { grid-column: 1; grid-row: auto; justify-self: center; }
	.wf-head-upg__feats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
	.wf-head-upg__feat { width: auto; }
	.wf-services__cards { grid-template-columns: 1fr; }
	/* Banner 360° i Diagnostyka: przyciemnienie tła pod tekstem (na wąskim ekranie zdjęcie wpada pod treść) */
	.wf-cyl, .wf-diag { position: relative; background-size: cover; background-position: center; }
	.wf-cyl::before, .wf-diag::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.65); }
	.wf-cyl__inner, .wf-diag > .wf-container { position: relative; z-index: 1; }
	.wf-cyl__inner > *, .wf-cyl__desc { max-width: none; }
	.wf-cyl__inner { min-height: 0; }
	/* Baza wiedzy: karta intro w kolumnie, polecany poradnik z przyciemnieniem (gradient desktopowy działa tylko ≥721px) */
	.wf-kb-intro { flex-direction: column; padding: 24px; }
	.wf-noanswer { flex-direction: column; align-items: flex-start; padding: 24px; }
	/* Poradnik zakupowy: kolumna grida nie może być szersza niż kontener (min-content długich tekstów) */
	.wf-guide__grid > * { min-width: 0; max-width: 100%; }
	.wf-checkbox-panel__head { flex-wrap: wrap; }
	.wf-kb-featured { position: relative; background-size: cover; background-position: center; }
	.wf-kb-featured::before { content: ""; position: absolute; inset: 0; background: rgba(4, 2, 10, 0.8); }
	.wf-kb-featured__txt { position: relative; z-index: 1; }
	/* Taby „Co nowego" w 2 kolumnach — ikonki się nie wysypują (poprawki2 pkt 10 Mobile) */
	.wf-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
	.wf-tab { width: auto; min-width: 0; }
	.wf-tabpanel { flex-direction: column; }
	.wf-ftabs__tabs { grid-template-columns: 1fr; }
	.wf-ftabpanel__list { grid-template-columns: 1fr; }
	.wf-ftabs__bar { flex-direction: column; align-items: flex-start; }
	.wf-ftabs__baritem + .wf-ftabs__baritem { border-left: 0; padding-left: 0; }
	.wf-diag__steps { flex-direction: column; align-items: flex-start; }
	.wf-endcta__feats { flex-direction: column; gap: 24px; }
	.wf-kb-chips { grid-template-columns: 1fr; }
	.wf-kb-latest__head { flex-direction: column; align-items: flex-start; }
	.wf-course__feats { flex-direction: column; gap: 16px; }
}

/* ============================================================
   Skalowanie 1:1 z makietą (1920px) — topbar, nagłówek, hero, pasek atutów.
   --u = 1px przy 1920 i proporcjonalnie mniej na węższych oknach,
   dzięki czemu widok wygląda jak przeskalowana makieta.
   ============================================================ */
:root { --u: min(1px, calc(100vw / 1920)); }

@media (min-width: 721px) {
	/* Header już się NIE skaluje z makietą (poprawki2 10.VII: „na MacBooku menu bardzo małe")
	   — trzyma stałe rozmiary 1:1 przy każdej szerokości desktopu. */
	.wf-nav__list { flex-wrap: nowrap; }
	.wf-nav__list a { white-space: nowrap; }
	.wf-hero .wf-container {
		max-width: calc(1440 * var(--u));
		padding-left: calc(20 * var(--u));
		padding-right: calc(20 * var(--u));
	}

	/* Hero home 1:1 z Figmy wallflow_the2 (490:548): kadr zdjęcia 837px, pas atutów osobno na czerni */
	.wf-hero__stage {
		min-height: 0;
		aspect-ratio: auto;
		max-height: none;
		height: calc(837 * var(--u));
	}
	/* Zdjęcie w naturalnej skali kadru: wysokość 100%, lewa krawędź 388px od lewej (Figma 20.21%) */
	.wf-hero__slide {
		background-position: calc(388 * var(--u)) top;
	}
	.wf-hero__slide::after { background: none; }
	.wf-hero .wf-container.wf-hero__grid {
		max-width: calc(1480 * var(--u));
		gap: 0;
		padding-top: calc(64 * var(--u));
		padding-bottom: calc(64 * var(--u));
		padding-left: calc(104 * var(--u));
		padding-right: calc(104 * var(--u));
	}
	.wf-hero .wf-badge { font-size: calc(12 * var(--u)); padding: calc(8 * var(--u)) calc(20 * var(--u)); }
	.wf-hero__content { gap: calc(64 * var(--u)); max-width: calc(440 * var(--u)); padding-left: calc(20 * var(--u)); }
	.wf-hero__headings { gap: calc(40 * var(--u)); }
	.wf-hero__title { font-size: calc(48 * var(--u)); }
	.wf-hero__sub { font-size: calc(36 * var(--u)); max-width: calc(400 * var(--u)); }
	.wf-hero__content .wf-btn {
		font-size: calc(16 * var(--u));
		padding: calc(10 * var(--u)) calc(28 * var(--u));
	}
	.wf-hero__person-card { padding-left: calc(24 * var(--u)); }
	.wf-hero__person-card strong { font-size: calc(20 * var(--u)); line-height: 1.5; }
	.wf-hero__person-card span { font-size: calc(14 * var(--u)); line-height: 1.5; }
	.wf-hero .wf-arrow, .wf-hero .wf-arrow img { width: calc(64 * var(--u)); height: calc(64 * var(--u)); }
	.wf-hero .wf-arrow { top: calc(386 * var(--u)); transform: none; }
	.wf-hero .wf-arrow:hover { transform: scale(1.06); }
	.wf-hero .wf-arrow--prev { left: calc((100% - 1440 * var(--u)) / 2); }
	.wf-hero .wf-arrow--next { right: calc((100% - 1440 * var(--u)) / 2); }

	/* Podstrony — hero jak w makietach: zdjęcie naturalnej skali dosunięte do prawej, tekst na czerni */
	.wf-phero__stage {
		min-height: 0;
		height: calc(837 * var(--u));
		background-size: auto 100%;
		background-position: right center;
		background-repeat: no-repeat;
		background-color: #000;
		align-items: center;
		position: relative;
	}
	.wf-phero__stage::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 38%, transparent 55%);
		pointer-events: none;
	}
	.wf-phero__inner { position: relative; z-index: 1; padding-top: 0; gap: calc(40 * var(--u)); }
	.wf-phero__headings { display: flex; flex-direction: column; gap: calc(40 * var(--u)); }
	.wf-phero__title, .wf-phero__sub { max-width: calc(660 * var(--u)); }
	.wf-phero__sub { font-size: calc(26 * var(--u)); line-height: 1.3; }
	.wf-whero .wf-phero__stage, .wf-shero .wf-phero__stage { min-height: 0; }
	.wf-contact {
		background-size: auto 100%;
		background-position: right center;
		background-repeat: no-repeat;
		background-color: #000;
	}
	/* Pasek atutów pod kadrem zdjęcia, na czystej czerni (Figma 583:1123) */
	.wf-usps {
		margin-top: 0;
		position: relative;
		z-index: 2;
		background: var(--black);
	}
	.wf-hero .wf-hero__slide .wf-hero__grid { padding-bottom: calc(64 * var(--u)); }
	.wf-usps .wf-container {
		max-width: calc(1480 * var(--u));
		padding-left: calc(20 * var(--u));
		padding-right: calc(20 * var(--u));
	}
	.wf-usps__inner {
		gap: calc(28 * var(--u));
		padding-top: calc(64 * var(--u));
		padding-bottom: calc(64 * var(--u));
	}
	.wf-usp { gap: calc(16 * var(--u)); }
	.wf-usp__icon { width: calc(44 * var(--u)); }
	.wf-usp__txt { gap: calc(4 * var(--u)); }
	.wf-usp__txt strong { font-size: calc(20 * var(--u)); }
	.wf-usp__txt span { font-size: calc(13 * var(--u)); }
	.wf-usp + .wf-usp { padding-left: calc(28 * var(--u)); }
}

/* Powyżej 1920px layout przestaje się skalować (--u = 1px), a zdjęcie hero było
   pozycjonowane od lewej krawędzi okna — rozjeżdżało się z wycentrowaną treścią.
   Kadr 1920px centrujemy w całości; boki wypełnia czerń. */
@media (min-width: 1921px) {
	.wf-hero__stage { background: #000; }
	.wf-hero__slide {
		left: calc((100% - 1920px) / 2);
		right: calc((100% - 1920px) / 2);
	}
	/* Kontakt: tło auto-100% ma ~1920px szerokości — na szerszych oknach
	   zostawał czarny pas z ostrą krawędzią po lewej. Cover dociąga do krawędzi. */
	.wf-contact {
		background-size: cover;
		background-position: center;
	}
}

/* Blog — wpis pojedynczy i filtry bazy wiedzy */
.wf-kb-filters .wf-tag { cursor: pointer; font-family: inherit; }
button.wf-tag { background: none; }
button.wf-tag--active { background: linear-gradient(90deg, var(--granat), var(--roz)); border-color: transparent; }
.wf-kb-featured__img img { width: 100%; height: 260px; object-fit: cover; display: block; }
.wf-post__inner { max-width: 1080px; display: flex; flex-direction: column; gap: 48px; }
.wf-post__head { display: flex; flex-direction: column; gap: 24px; align-items: center; text-align: center; }
.wf-post__head .wf-badge { align-self: center; }
.wf-post__head .wf-h1 { max-width: 860px; }
.wf-post__meta { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; }
.wf-post__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--roz); }
.wf-post__thumb img { width: 100%; height: 480px; object-fit: cover; border-radius: var(--corner); display: block; }
.wf-post__content {
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	font-size: 17px;
	line-height: 1.75;
	color: #d9d5e3;
}
.wf-post__content h2 { font-size: 28px; font-weight: 500; line-height: 1.25; margin-top: 22px; color: var(--white); }
.wf-post__content h2::after { content: ""; display: block; width: 76px; height: 1px; margin-top: 12px; background: linear-gradient(90deg, var(--granat), var(--roz)); }
.wf-post__content h3 { font-size: 21px; font-weight: 500; margin-top: 12px; color: var(--roz); }
.wf-post__content a { color: var(--roz); text-decoration: underline; }
.wf-post__content ul, .wf-post__content ol { display: flex; flex-direction: column; gap: 8px; padding-left: 22px; }
.wf-post__content blockquote { border-left: 2px solid var(--roz); padding: 8px 0 8px 24px; font-style: italic; color: var(--white); }
.wf-post__content img { max-width: 100%; border-radius: var(--corner); }
.wf-post__foot { display: flex; justify-content: center; }
.wf-related { box-shadow: none; }
.wf-related .wf-kb-cards { max-width: 1080px; margin: 0 auto; }
.wf-related__more { display: flex; justify-content: center; margin-top: 48px; }
@media (max-width: 720px) {
	/* Bez kadrowania: grafiki wyróżniające zawierają tekst, cover je ucinał */
	.wf-post__thumb img { height: auto; }
	.wf-post__content { font-size: 16px; }
}

/* ============================================================
   Korekty 1:1 z Figmy — hero podstron
   (Drukarki 538:610, O nas 711:2341, Kontakt 945:6077, Baza wiedzy 835:2809)
   ============================================================ */
@media (min-width: 721px) {
	/* --- Drukarki: kadr zdjęcia 1:1 z Figmy 538:613 — obraz 1455×1357 w ramce
	   1920×837 (x 553, y -496): maszyny powiększone, ucięte górą, koła przy pasie
	   atutów. Pozycja X kotwiczona do środka (50% + offset), żeby >1920px kadr
	   trzymał się wycentrowanej treści. --- */
	.wf-dhero { background: var(--black); }
	.wf-dhero .wf-phero__stage {
		height: calc(837 * var(--u));
		background-size: calc(1455 * var(--u)) auto;
		background-position: calc(50% + 320.5 * var(--u)) calc(-496 * var(--u));
	}
	.wf-dhero .wf-phero__stage::after { content: none; }
	.wf-dhero .wf-phero__inner { gap: calc(64 * var(--u)); }
	/* Panel USP pod hero — w makiecie nie czysta czerń: fioletowo-granatowa
	   poświata narastająca ku dolnej krawędzi panelu (próbki z Figmy 538:610:
	   #0C0819 przy ~88%, #160D2C na krawędzi). */
	.wf-dhero .wf-usps {
		margin-top: 0;
		background: linear-gradient(180deg, #000 0%, #000 72%, #0c0819 88%, #160d2c 100%);
	}
	/* Ikony pasa USP drukarek jak w makiecie: 64px + większy odstęp od etykiety */
	.wf-dhero .wf-usp--v { gap: calc(24 * var(--u)); }
	.wf-dhero .wf-usp--v .wf-usp__icon { width: calc(64 * var(--u)); height: calc(64 * var(--u)); }
	.wf-usps--tall .wf-usps__inner { padding-top: calc(64 * var(--u)); padding-bottom: calc(64 * var(--u)); }
	/* Mniejsze ikony pasa atutów, skalowane jak makieta (poprawki2: „zmniejszyć wielkość ikon") */
	.wf-usp--v .wf-usp__icon { width: calc(56 * var(--u)); height: calc(56 * var(--u)); }

	/* --- O nas: atuty w hero + karta nachodząca na zdjęcie --- */
	/* Neon przesunięty w prawo jak w projekcie — lewa połowa czysta pod tekst,
	   gradient: mocniejsze wygaszenie w lewo + dół (poprawki2 10.VII) */
	.wf-abhero .wf-phero__stage {
		background-position: calc(100% + 350 * var(--u)) center;
	}
	.wf-abhero .wf-phero__stage::after {
		background:
			linear-gradient(90deg, rgba(0, 0, 0, 0.96) 8%, rgba(0, 0, 0, 0.55) 30%, transparent 52%),
			linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.85) 100%);
	}
	.wf-abhero .wf-phero__inner { gap: calc(64 * var(--u)); }
	.wf-abhero .wf-contact__feats { gap: calc(32 * var(--u)); }
	.wf-abhero .wf-contact__feats .wf-iconline { gap: calc(24 * var(--u)); align-items: flex-start; }
	.wf-abhero .wf-contact__feats .wf-iconline > img { width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
	.wf-abhero .wf-contact__feats .wf-iconline strong { font-size: calc(20 * var(--u)); line-height: 1.5; }
	.wf-abhero .wf-contact__feats .wf-iconline .wf-small { font-size: calc(13 * var(--u)); line-height: 1.54; max-width: calc(256 * var(--u)); }
	.wf-about-card {
		margin-top: calc(-50 * var(--u));
		padding: calc(64 * var(--u));
		grid-template-columns: calc(382 * var(--u)) 1fr 1fr;
		gap: calc(64 * var(--u));
	}
	.wf-about-card__title { font-size: calc(36 * var(--u)); gap: calc(24 * var(--u)); }
	.wf-about-card .wf-hr { width: calc(169 * var(--u)); }
	.wf-about-card > p { font-size: calc(14 * var(--u)); line-height: 1.5; }
	.wf-about-card > p + p { border-left: 1px solid var(--stroke); padding-left: calc(64 * var(--u)); }

	/* --- Kontakt: proporcje kolumny informacyjnej --- */
	.wf-contact .wf-container { max-width: calc(1480 * var(--u)); }
	.wf-contact__grid { grid-template-columns: 1fr calc(670 * var(--u)); gap: calc(90 * var(--u)); } /* gap 90: lewa kolumna 680px, żeby akapit złamał się jak w makiecie („rozwiązanie dopasowane" w 3. linii — fraza potrzebuje 671px) */
	/* Mniejsze odstępy — mniej pustej przestrzeni w sekcji (poprawki2 10.VII) */
	.wf-contact__info { gap: calc(40 * var(--u)); }
	.wf-contact__sub { font-size: calc(26 * var(--u)); line-height: 1.31; max-width: calc(690 * var(--u)); } /* 690: „rozwiązanie dopasowane" w jednej linii jak w makiecie (fraza = 671px, 672 ucinało przez zaokrąglenie) */
	.wf-contact:not(.wf-abhero) .wf-contact__feats { gap: calc(40 * var(--u)); flex-wrap: nowrap; }
	.wf-contact .wf-contact__feats .wf-iconline { gap: calc(16 * var(--u)); align-items: flex-start; }
	.wf-contact .wf-contact__feats .wf-iconline > img { width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
	.wf-contact .wf-contact__feats .wf-iconline strong { font-size: calc(18 * var(--u)); font-weight: 400; line-height: 1.25; }
	.wf-contact .wf-contact__feats .wf-iconline .wf-small { font-size: calc(12 * var(--u)); line-height: 1.5; max-width: calc(217 * var(--u)); }
	.wf-contact__data { margin-top: calc(180 * var(--u)); gap: calc(16 * var(--u)); }
	.wf-contact__data .wf-h4 { font-size: calc(26 * var(--u)); font-weight: 400; margin-bottom: calc(16 * var(--u)); }
	.wf-contact__data a, .wf-contact__data > span { font-size: calc(18 * var(--u)); gap: calc(12 * var(--u)); }
	.wf-contact__data img { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }

	/* --- Baza wiedzy: opis w hero + duża karta "Centrum wiedzy" --- */
	.wf-kb-hero__left { gap: calc(40 * var(--u)); }
	.wf-kb-hero__left .wf-badge { margin-bottom: calc(24 * var(--u)); }
	.wf-kb-hero__left .wf-h3 { max-width: calc(672 * var(--u)); }
	.wf-kb-hero__desc { font-size: calc(18 * var(--u)); line-height: calc(22 / 18); max-width: calc(672 * var(--u)); }
	.wf-kb-hero__left .wf-btn { margin-top: calc(24 * var(--u)); }
	.wf-kb-hero__grid { margin-bottom: calc(100 * var(--u)); }
	.wf-kb-intro { padding: calc(64 * var(--u)); gap: calc(64 * var(--u)); }
	.wf-kb-intro__icon { width: calc(160 * var(--u)); height: calc(160 * var(--u)); }
	.wf-kb-intro__icon img { width: calc(100 * var(--u)); height: calc(100 * var(--u)); }
	.wf-kb-intro div { gap: calc(24 * var(--u)); }
	.wf-kb-intro .wf-h2 { font-size: calc(36 * var(--u)); }
	.wf-kb-intro p { font-size: calc(18 * var(--u)); line-height: calc(22 / 18); }

	/* --- Baza wiedzy: kafelki pytań, polecany poradnik i karty wpisów (Figma 864:2935) --- */
	.wf-kb-posts__ask { margin-bottom: calc(32 * var(--u)); }
	.wf-kb-chips { gap: calc(32 * var(--u)); margin-bottom: calc(64 * var(--u)); }
	.wf-kb-chip {
		padding: calc(24 * var(--u));
		min-height: calc(182 * var(--u));
		gap: calc(16 * var(--u));
		font-size: calc(20 * var(--u));
		font-weight: 500;
		line-height: 1.5;
	}
	.wf-kb-chip img {
		width: calc(64 * var(--u));
		height: calc(64 * var(--u));
		padding: calc(15 * var(--u));
		border: 1px solid var(--roz);
		border-radius: 50%;
		box-sizing: border-box;
	}
	.wf-kb-posts__grid { grid-template-columns: 589fr 787fr; gap: calc(64 * var(--u)); }
	.wf-kb-featured {
		background-size: cover;
		background-position: right center;
		position: relative;
		min-height: calc(435 * var(--u));
	}
	.wf-kb-featured::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, rgba(4, 2, 10, 0.96) 32%, rgba(4, 2, 10, 0.6) 62%, rgba(4, 2, 10, 0.05) 100%);
	}
	.wf-kb-featured__txt { position: relative; z-index: 1; flex: 1; padding: calc(24 * var(--u)); max-width: calc(430 * var(--u)); }
	.wf-kb-featured__txt .wf-h3 { margin-top: calc(8 * var(--u)); }
	.wf-kb-featured__txt .wf-btn { margin-top: auto; }
	.wf-kb-post { padding: calc(16 * var(--u)); min-height: calc(361 * var(--u)); }
	.wf-kb-post__img { height: calc(140 * var(--u)); }
	.wf-kb-post strong { font-size: calc(20 * var(--u)); font-weight: 500; line-height: 1.5; }
	.wf-kb-post p { font-size: calc(12 * var(--u)); line-height: 1.5; }
	.wf-kb-post__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding: 0 6px; }
	.wf-kb-post__time { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(12 * var(--u)); }
	.wf-kb-post__time img { width: 16px; height: 16px; }
	.wf-kb-post__go { width: 20px; height: 20px; }

	/* --- Baza wiedzy: karta CTA "Gromadź wiedzę..." (Figma 1440x312) --- */
	.wf-kb-cta { padding: calc(64 * var(--u)); gap: calc(64 * var(--u)); }
	.wf-kb-cta .wf-noanswer__icon {
		width: calc(180 * var(--u));
		height: calc(180 * var(--u));
		background: none;
		border: 1px solid var(--roz);
	}
	.wf-kb-cta .wf-noanswer__icon img { width: calc(96 * var(--u)); height: calc(96 * var(--u)); }
	.wf-kb-cta .wf-noanswer__txt { gap: calc(16 * var(--u)); max-width: calc(682 * var(--u)); }
	.wf-kb-cta .wf-noanswer__txt strong { font-size: calc(36 * var(--u)); line-height: calc(40 / 36); font-weight: 500; }
	.wf-kb-cta .wf-noanswer__txt p { font-size: calc(18 * var(--u)); line-height: calc(22 / 18); }
	.wf-kb-cta__btns { gap: calc(32 * var(--u)); }
	.wf-kb-cta__btns .wf-btn { width: calc(322 * var(--u)); justify-content: center; }
	.wf-kb-cta__btns .wf-btn img { width: 20px; height: 20px; }
}

/* ============ TREŚĆ STRON PRAWNYCH (.wf-content — fallback index.php) ============ */
.wf-content { max-width: 900px; font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, 0.85); }
.wf-content h2 { font-size: 22px; line-height: 1.3; color: var(--white); margin: 40px 0 12px; }
.wf-content p { margin: 0 0 14px; }
.wf-content ul { margin: 0 0 14px; padding-left: 22px; }
.wf-content li { margin-bottom: 8px; }
.wf-content strong { color: var(--white); }

/* ============================================================
   MOBILE 1:1 z makietą (Figma "Mobile" 347:377 i "Menu mobile" 359:426)
   ============================================================ */

/* Elementy mobilne — domyślnie ukryte na desktopie */
.wf-btn--mobilecta,
.wf-hero__team,
.wf-mdots,
.wf-yt__logo-mob,
.wf-calc__note { display: none; }

/* --- Pełnoekranowe menu mobilne (359:426) --- */
.wf-mobilemenu {
	position: fixed;
	inset: 0;
	z-index: 300;
	background: var(--black);
	display: none;
	flex-direction: column;
}
.wf-mobilemenu.is-open { display: flex; }
body.wf-menu-open { overflow: hidden; }
.wf-mobilemenu__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 12px 20px 20px;
	flex: 0 0 auto;
}
.wf-mobilemenu__top .wf-logo img,
.wf-mobilemenu__top .custom-logo-link img { width: 67px; }
.wf-mobilemenu__close {
	background: none;
	border: 0;
	padding: 8px;
	line-height: 0;
}
.wf-mobilemenu__panel {
	flex: 1;
	position: relative;
	overflow: hidden;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	background-color: var(--black);
	background-image: url("../img/hero-mobile.jpg");
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: -530px top;
	background-attachment: local;
	scrollbar-width: none;
}
.wf-mobilemenu__panel::-webkit-scrollbar { display: none; }
.wf-mobilemenu__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 390px;
	margin-left: auto;
	padding: 30px 20px 0 180px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
}
.wf-mobilemenu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.wf-mobilemenu__list a {
	display: block;
	padding: 4px;
	font-size: 18px;
	color: rgba(255, 255, 255, 0.75);
	transition: color 0.2s;
}
.wf-mobilemenu__list a:hover,
.wf-mobilemenu__list .current-menu-item a { color: var(--white); }
.wf-mobilemenu__contacts { display: flex; gap: 40px; }
.wf-mobilemenu__contacts a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 1px solid var(--roz);
	border-radius: 100px;
}
.wf-mobilemenu__cta { width: 100%; }
.wf-socials--mobilemenu {
	position: relative;
	z-index: 1;
	margin-top: auto;
	align-self: flex-end;
	padding: 24px 48px 48px 0;
	gap: 24px;
}

/* Przycisk "Kup drukarkę" widoczny, gdy desktopowy CTA znika */
@media (max-width: 1080px) {
	.wf-nav__inner .wf-btn--mobilecta {
		display: inline-flex;
		font-size: 14px;
		padding: 4px 16px;
		gap: 8px;
	}
}

@media (max-width: 720px) {
	/* --- Nagłówek (347:426): logo + Kup drukarkę + burger, bez topbara --- */
	.wf-topbar { display: none; }
	.wf-nav { border-bottom: 0; }
	.wf-nav .wf-container { padding-right: 12px; }
	.wf-nav__inner { height: 104px; padding: 0; gap: 12px; }
	.wf-logo img,
	.custom-logo-link img { width: 67px; }
	.wf-burger { padding: 8px 4px; }
	.wf-burger span {
		height: 2px;
		margin: 7px 0 7px auto;
		border-radius: 2px;
		background: var(--roz);
	}
	.wf-burger span:nth-child(1) { width: 28px; }
	.wf-burger span:nth-child(2) { width: 44px; }
	.wf-burger span:nth-child(3) { width: 18px; }

	/* --- Akcenty nagłówków w roz (na desktopie span bez stylu = biały) --- */
	.wf-acc { color: var(--roz); }

	/* --- Sekcje: rytm i typografia mobile --- */
	.wf-section {
		padding: 50px 0;
		box-shadow: 0 0 50px rgba(109, 66, 216, 0.6);
	}
	.wf-h2 { font-size: 28px; }
	.wf-sec-head { gap: 24px; margin-bottom: 32px; }
	.wf-sec-head p { font-size: 14px; }

	/* --- Hero (347:415) --- */
	.wf-hero__stage { min-height: 0; aspect-ratio: auto; max-height: none; height: auto; }
	.wf-hero__slide {
		background-image: var(--wf-bg-mob);
		background-size: cover;
		background-position: center;
	}
	.wf-hero__slide::after { background: none; }
	.wf-hero__grid {
		min-height: 532px;
		padding-top: 50px;
		padding-bottom: 50px;
	}
	.wf-hero__content { gap: 36px; justify-content: center; }
	.wf-hero__headings { gap: 28px; }
	.wf-hero__title { font-size: 32px; text-shadow: none; }
	.wf-hero__sub { font-size: 18px; line-height: 1.3; text-shadow: none; }
	.wf-hero .wf-badge { padding: 4px 16px; }
	.wf-hero .wf-grad-text {
		background: none;
		-webkit-text-fill-color: var(--roz);
		color: var(--roz);
	}

	/* Płynne przejście zdjęcia hero w sekcję zespołu — bez twardego cięcia kadru
	   (poprawki2 pkt 10 Mobile: „sekcje wysokości niedopasowane, ucięte głowy") */
	.wf-hero__slide.is-active { position: relative; }
	.wf-hero__slide.is-active::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 120px;
		background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.92));
		pointer-events: none;
	}
	.wf-hero__slide.is-active .wf-hero__grid { position: relative; z-index: 1; }

	/* --- Karty zespołu pod hero (358:425) --- */
	.wf-hero__team {
		display: block;
		position: relative;
		background: var(--black);
		padding: 12px 0;
	}
	.wf-hero__team-img { display: block; width: 100%; height: auto; }
	.wf-hero__team-cards {
		position: absolute;
		left: 20px;
		right: 20px;
		bottom: 20px;
		display: flex;
		align-items: flex-end;
		gap: 20px;
	}
	.wf-hero__team-cards .wf-hero__person-card {
		flex: 1;
		border-left-width: 2px;
		padding-left: 16px;
		padding-right: 16px;
	}
	.wf-hero__team-cards .wf-hero__person-card strong { font-size: 14px; font-weight: 400; line-height: normal; }
	.wf-hero__team-cards .wf-hero__person-card span { font-size: 12px; line-height: normal; }

	/* --- Pasek atutów (351:378) --- */
	.wf-usps__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 32px;
		padding-top: 24px;
		padding-bottom: 24px;
	}
	.wf-usp { gap: 16px; }
	.wf-usp + .wf-usp { border-left: 0; padding-left: 0; }
	.wf-usp__icon { width: 48px; }
	.wf-usp__txt { gap: 4px; }
	.wf-usp__txt strong { font-size: 20px; font-weight: 500; line-height: normal; white-space: normal; }
	.wf-usp__txt span { font-size: 13px; font-weight: 500; line-height: normal; white-space: normal; }

	/* --- Kropki paginacji sliderów (384:533 / 384:684) --- */
	.wf-mdots {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 24px;
		margin-top: 32px;
	}
	.wf-mdot {
		width: 16px;
		height: 16px;
		padding: 0;
		border: 1px solid var(--roz);
		border-radius: 50%;
		background: var(--black);
		flex: 0 0 auto;
	}
	.wf-mdot.is-active { background: var(--roz); }

	/* --- 7 etapów (384:445) --- */
	.wf-steps__line { display: none; }
	.wf-steps__img { width: 100%; }
	.wf-steps__img img {
		min-height: 0;
		height: auto;
		aspect-ratio: 1159 / 652;
		border-radius: var(--corner);
	}
	.wf-steps__body { padding: 20px 20px 24px; gap: 16px; }
	.wf-steps__body .wf-h3 { font-size: 26px; }
	.wf-steps__list { margin-top: 8px; }
	.wf-steps__note { display: none; }

	/* --- Filary: poziomy slider (384:544) --- */
	.wf-pillars .wf-sec-head { margin-bottom: 64px; }
	.wf-pillars__grid {
		display: flex;
		position: relative;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 20px;
		gap: 40px;
		margin: 0 -20px;
		padding: 0 20px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.wf-pillars__grid::-webkit-scrollbar { display: none; }
	.wf-pillar {
		flex: 0 0 min(350px, calc(100vw - 40px));
		scroll-snap-align: start;
	}
	.wf-pillar__icon { width: 80px; height: 80px; margin-bottom: -40px; }
	.wf-pillar__icon img { width: 32px; height: 32px; }
	.wf-pillar__card .wf-h3 { font-size: 26px; }
	.wf-pillars__dots { margin-top: 24px; }
	.wf-pillars__cta { margin-top: 64px; }
	.wf-pillars__cta .wf-pillar__icon { margin-right: -40px; margin-bottom: 0; }
	.wf-pillars__cta-card { padding: 32px 32px 32px 60px; }
	.wf-pillars__cta-card .wf-h3 { font-size: 18px; line-height: normal; }

	/* --- YouTube (384:694) --- */
	.wf-yt .wf-sec-head--left { margin-bottom: 24px; }
	.wf-yt__grid { gap: 50px; }
	.wf-yt__left { gap: 40px; }
	.wf-yt__left > p { font-size: 14px; }
	.wf-yt__features { flex-wrap: nowrap; justify-content: space-between; gap: 8px; }
	.wf-yt__feature { padding: 10px 0; gap: 12px; }
	.wf-yt__feature img { height: 48px; }
	.wf-yt__feature strong { font-size: 12px; font-weight: 700; }
	.wf-yt__feature span { font-size: 12px; }
	.wf-yt__channel { gap: 12px; align-items: flex-start; }
	.wf-yt__logo {
		width: 50px;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 0;
		border-radius: 50%;
		background: none;
	}
	.wf-yt__logo img { width: 100%; height: 100%; }
	.wf-yt__channel-info { gap: 2px; }
	.wf-yt__channel-info > span { font-size: 12px; }
	.wf-yt__subs { margin-top: 14px; gap: 16px; }
	.wf-avatars img { width: 32px; height: 32px; }
	.wf-yt__img img { height: 100%; }
	.wf-yt__player { height: auto; aspect-ratio: 1695 / 1080; }

	/* --- Kalkulator (365:586) --- */
	.wf-calc .wf-badge { padding: 4px 16px; }
	.wf-calc .wf-sec-head { margin-bottom: 40px; }
	.wf-calc__grid { gap: 32px; }
	.wf-calc__panel { padding: 32px 20px; gap: 32px; }
	.wf-calc__field { gap: 4px; }
	.wf-calc__row { gap: 12px; margin: 4px 0; }
	.wf-calc__value {
		min-width: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		color: var(--roz);
		font-size: 20px;
		font-weight: 500;
		line-height: normal;
	}
	.wf-calc__unit {
		margin-left: -8px;
		color: var(--roz);
		font-size: 12px;
		font-weight: 400;
	}
	.wf-calc__result { align-items: center; text-align: center; gap: 16px; }
	.wf-calc__result .wf-h1 { font-size: 26px; line-height: 1.3; }
	.wf-calc__l2 { color: var(--roz); }
	.wf-calc__total { font-size: 64px; }
	.wf-calc__note { display: block; width: 100%; text-align: left; }
	.wf-calc__summary {
		width: 100%;
		flex-direction: column;
		gap: 20px;
		padding: 24px 20px;
		text-align: left;
	}
	.wf-calc__summary div + div { border-left: 0; border-top: 0; padding-left: 0; padding-top: 0; }
	.wf-calc__disclaimer {
		display: flex;
		align-items: flex-start;
		gap: 8px;
		width: 100%;
		margin-top: 8px;
		text-align: left;
		font-size: 12px;
		color: var(--grey);
	}
	.wf-calc__disclaimer svg { flex: 0 0 auto; }

	/* --- Sekcje nieobecne w makiecie mobilnej strony głównej --- */
	.home .wf-stats,
	.home .wf-form,
	.home .wf-start,
	.home .wf-reviews,
	.home .wf-gallery,
	.page-template-page-home .wf-stats,
	.page-template-page-home .wf-form,
	.page-template-page-home .wf-start,
	.page-template-page-home .wf-reviews,
	.page-template-page-home .wf-gallery { display: none; }

	/* --- Stopka mini (365:581): copyright + polityka prywatności --- */
	.wf-footer__main { display: none; }
	.wf-footer__links { display: none; }
	.wf-footer { border-top: 0; }
	.wf-footer__bottom-inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-top: 24px;
		padding-bottom: 24px;
	}
	.wf-footer__legal a { display: none; }
	.wf-footer__legal a:first-child { display: inline-block; }
}

/* Mobile polish pass: header/menu spacing + podstrony */
@media (max-width: 720px) {
	.wf-nav .wf-container {
		padding-left: 24px;
		padding-right: 24px;
	}

	.wf-nav__inner {
		height: 112px;
		gap: 12px;
	}

	.wf-nav__inner .wf-btn--mobilecta {
		padding: 8px 18px;
		font-size: 14px;
	}

	.wf-burger {
		display: flex;
		flex: 0 0 52px;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
		margin-left: 0;
	}

	.wf-mobilemenu__top {
		padding-left: 24px;
		padding-right: 24px;
	}

	.wf-mobilemenu__panel {
		background-size: cover;
		background-position: center top;
	}

	.wf-mobilemenu__panel::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.28) 52%, rgba(0, 0, 0, 0.72));
		pointer-events: none;
	}

	.wf-mobilemenu__inner {
		padding: 28px 24px 0 48%;
		gap: 30px;
	}

	.wf-mobilemenu__list {
		gap: 12px;
	}

	.wf-mobilemenu__contacts {
		gap: 18px;
	}

	.wf-mobilemenu__contacts a {
		width: 52px;
		height: 52px;
		border-color: var(--roz);
		color: var(--roz);
		background: rgba(0, 0, 0, 0.34);
	}

	.wf-phero__stage,
	.wf-whero .wf-phero__stage,
	.wf-shero .wf-phero__stage {
		min-height: 0;
		padding: 44px 0 42px;
		align-items: center;
		background-position: center;
	}

	.wf-phero__inner {
		width: 100%;
		min-width: 0;
		padding-top: 0;
		gap: 24px;
	}

	.wf-phero__inner > *,
	.wf-kb-hero__left > * {
		max-width: 100%;
		min-width: 0;
	}

	.wf-phero .wf-h1,
	.wf-kb-hero .wf-h1 {
		font-size: 32px;
		line-height: 1.12;
	}

	.wf-phero__headings {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.wf-phero .wf-h1,
	.wf-phero__sub,
	.wf-shero__sub,
	.wf-kb-hero__left .wf-h1,
	.wf-kb-hero__left .wf-h3,
	.wf-kb-hero__desc,
	.wf-iconline,
	.wf-herocard,
	.wf-servicecard {
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	.wf-phero__sub,
	.wf-shero__sub {
		font-size: 19px;
		line-height: 1.32;
		max-width: 100%;
	}

	.wf-phero__btns {
		gap: 14px;
	}

	.wf-abhero .wf-contact__feats {
		width: 100%;
		gap: 12px;
	}

	.wf-abhero .wf-contact__feats .wf-iconline {
		width: 100%;
		min-width: 0;
		align-items: center;
		padding: 12px 14px;
		border: 1px solid rgba(169, 119, 232, 0.45);
		border-radius: 16px;
		background: rgba(0, 0, 0, 0.58);
		backdrop-filter: blur(4px);
	}

	.wf-abhero .wf-contact__feats .wf-iconline > img {
		width: 40px;
		height: 40px;
	}

	.wf-dhero .wf-usps--tall .wf-usps__inner {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: stretch;
		gap: 12px;
		padding-top: 16px;
		padding-bottom: 28px;
	}

	.wf-dhero .wf-usp--v,
	.wf-dhero .wf-usp--v + .wf-usp--v {
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 10px;
		min-height: 132px;
		padding: 14px 10px;
		text-align: center;
		border: 1px solid rgba(255, 255, 255, 0.18);
		border-radius: 16px;
		background: rgba(255, 255, 255, 0.035);
	}

	.wf-dhero .wf-usp--v .wf-usp__icon {
		width: 38px;
		height: 38px;
	}

	.wf-dhero .wf-usp--v .wf-usp__txt {
		align-items: center;
	}

	.wf-dhero .wf-usp--v .wf-usp__txt strong {
		font-size: 14px;
		line-height: 1.25;
	}

	.wf-dhero .wf-usp--v .wf-usp__txt span {
		font-size: 12px;
		line-height: 1.25;
	}

	.wf-herocards {
		margin-top: -28px;
		padding-bottom: 28px;
		gap: 14px;
	}

	.wf-herocard {
		padding: 20px;
		align-items: center;
		min-width: 0;
	}

	.wf-servicecard {
		margin-top: -28px;
		padding: 20px;
		align-items: flex-start;
		gap: 16px;
		min-width: 0;
	}

	.wf-servicecard__icon {
		width: 56px;
		height: 56px;
	}

	.wf-servicecard__icon img {
		width: 30px;
		height: 30px;
	}

	.wf-servicecard .wf-h3 {
		font-size: 22px;
		line-height: 1.22;
	}

	.wf-kb-hero {
		padding-top: 44px;
	}

	.wf-kb-hero__grid {
		grid-template-columns: 1fr;
		gap: 28px;
		margin-bottom: 32px;
	}

	.wf-kb-hero__left {
		gap: 18px;
		width: 100%;
	}

	.wf-kb-hero__left .wf-h1,
	.wf-kb-hero__left .wf-h3,
	.wf-kb-hero__desc {
		max-width: 100%;
	}

	.wf-kb-hero__img {
		width: min(82vw, 360px);
		justify-self: center;
	}

	.wf-kb-hero__img img {
		max-height: 320px;
	}
}

@media (max-width: 430px) {
	.wf-nav .wf-container {
		padding-left: 20px;
		padding-right: 20px;
	}

	.wf-nav__inner {
		height: 104px;
		gap: 8px;
	}

	.wf-nav__inner .wf-btn--mobilecta {
		padding: 7px 13px;
		font-size: 13px;
	}

	.wf-logo img,
	.custom-logo-link img {
		width: 62px;
	}

	.wf-burger {
		flex-basis: 44px;
	}

	.wf-mobilemenu__inner {
		max-width: none;
		margin-left: 0;
		padding-left: 43%;
	}

	.wf-mobilemenu__contacts {
		gap: 12px;
	}

	.wf-mobilemenu__contacts a {
		width: 48px;
		height: 48px;
	}
}

/* ============================================================
   T14 — Współpraca: „Dla kogo jest współpraca z WallFlow®?"
   (Figma 695:2687, karta = komponent „Dla kogo" 695:2665,
   notka = 695:2686). Dopisać na końcu assets/css/main.css.
   ============================================================ */

/* Notka pod kartami — jeden obramowany boks na całą szerokość.
   Style bazowe (bezpieczne też na mobile — boks zamiast dwóch
   check-itemów; rozmiary desktop niżej w media query). */
.wf-whonote {
	margin-top: 32px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	text-align: center;
}
.wf-whonote__lead { font-size: 20px; font-weight: 400; line-height: 1.3; }
.wf-whonote__sub { font-size: 16px; font-weight: 500; line-height: normal; }

@media (min-width: 721px) {
	/* (2) Podtytuł sekcji węższy — łamie się na 3 linie (Figma: 428px) */
	.wf-who .wf-sec-head__narrow { max-width: 430px; }

	/* (3) Karty: zdjęcie wypełnia całą kartę jako tło, tytuł+opis
	   nachodzą na dół zdjęcia; na zdjęciu gradient przezroczysty
	   (od 50% wysokości) → czarny na dole (Figma 695:2665) */
	.wf-whocard {
		position: relative;
		min-height: 286px;
		padding: 24px;
		justify-content: flex-end;
		gap: 4px;
		overflow: hidden;
	}
	.wf-whocard__img { position: absolute; inset: 0; z-index: 0; }
	.wf-whocard__img img { width: 100%; height: 100%; border-radius: var(--corner); }
	.wf-whocard__img::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: var(--corner);
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, #000 100%);
	}
	.wf-whocard > .wf-h4,
	.wf-whocard > .wf-small { position: relative; z-index: 1; }
	/* Typografia na karcie wg Figmy: tytuł = H3 (26/1.3 Regular), opis = Body 14 */
	.wf-whocard > .wf-h4 { font-size: 26px; font-weight: 400; line-height: 1.3; }
	.wf-whocard > .wf-small { font-size: 14px; }

	/* (3b) Karty i notka wg makiety: mały promień 8px (lokalne --corner
	   dziedziczą też img i gradient ::after), cienki obrys roz BEZ poświaty */
	.wf-who .wf-card { --corner: 8px; box-shadow: none; }

	/* (4) Notka — odstęp i rozmiary desktop (Figma: 26/1.3 Regular + 20 Medium,
	   gap sekcji 64px) */
	.wf-whonote { margin-top: 64px; }
	.wf-whonote__lead { font-size: 26px; }
	.wf-whonote__sub { font-size: 20px; }
}

/* ============================================================
   T16 — Współpraca: FAQ „Najczęściej zadawane pytania" (Figma 799:2800)
   Układ dwukolumnowy, plus w kółku po LEWEJ stronie pytania.
   Dopisać na końcu assets/css/main.css.
   ============================================================ */

/* Desktop ≥721px — 1:1 z Figmy 1920 (sekcja 799:2800, komponent FAQ 704:1637) */
@media (min-width: 721px) {
	/* Nagłówek sekcji do lewej: badge nad tytułem, gap 32 (Figma: kolumna gap-32) */
	.wf-faq--wsp .wf-sec-head {
		align-items: flex-start;
		text-align: left;
		gap: 32px;
		margin-bottom: 32px;
	}
	.wf-faq--wsp .wf-sec-head .wf-badge { align-self: flex-start; }
	/* Tytuł łamany na 2 linie jak w Figmie: „Najczęściej / zadawane pytania"
	   (EN „Frequently asked / questions", FR „Questions / fréquentes" łamią się analogicznie) */
	.wf-faq--wsp .wf-sec-head .wf-h2 { max-width: 380px; }

	/* Dwie kolumny: podtytuł 427px + lista pytań 913px, gap 100 (427+100+913 = 1440, Figma 799:2799) */
	.wf-wspfaq__cols {
		display: flex;
		align-items: flex-start;
		gap: clamp(48px, 5.2vw, 100px);
	}
	.wf-wspfaq__sub {
		flex: 0 1 427px;
		min-width: 240px;
		font-size: 18px; /* Figma: Body large 18px */
	}
	.wf-faq--wsp .wf-faq__list { flex: 1 1 0; min-width: 0; max-width: none; margin: 0; }

	/* Wiersz pytania: border --stroke (już w bazie), promień 20 (--corner), padding 16/24,
	   tekst pytania 20px/500 (Figma H4) */
	.wf-faq--wsp .wf-faqitem { border-radius: var(--corner); background: var(--black); }
	.wf-faq--wsp .wf-faqitem__head {
		justify-content: flex-start;
		padding: 16px 24px;
		font-size: 20px;
	}
	.wf-faq--wsp .wf-faqitem__head span { flex: 1 1 auto; }
	/* Plus w kółku (24px) po LEWEJ — `order` przenosi ikonę przed tekst bez zmiany DOM,
	   więc mobile ≤720 zostaje jak było (plus po prawej); rotate 45° z bazy nadal działa (+ → ×) */
	.wf-faq--wsp .wf-faqitem__plus { order: -1; width: 24px; height: 24px; }
	/* Odpowiedź wyrównana do tekstu pytania: 24 padding + 24 ikona + 16 gap = 64 */
	.wf-faq--wsp .wf-faqitem__body { padding: 0 24px 16px 64px; }
}

/* Mobile ≤720px — WYŁĄCZNIE kompensacja przeniesienia podtytułu poza .wf-sec-head
   (odtwarza dotychczasowy wygląd: badge—24—h2—24—opis 14px wyśrodkowany—32—lista) */
@media (max-width: 720px) {
	.wf-faq--wsp .wf-sec-head { margin-bottom: 24px; }
	.wf-wspfaq__sub { font-size: 14px; text-align: center; margin-bottom: 32px; }
}

/* ============================================================
   T4: Drukarki — CTA końcowe jako obramowana karta (Figma 636:3177)
   Wymaga zmiany markupu z template-spec.md (modyfikator .wf-endcta--card
   na sekcji + wewnętrzny wrapper). Desktop-only (mobile ≤720 bez zmian).
   Nadpisuje kaskadą: .wf-endcta__inner (gap 125px, l.1302),
   .wf-endcta__left (gap 32px, l.1331), .wf-endcta__btns (gap 16px, l.1332),
   .wf-endcta__feats (gap 48px, l.1334), .wf-usp--v (flex:1, l.1080),
   .wf-usp--v + .wf-usp--v (padding-left 28px, l.1089).
   ============================================================ */
@media (min-width: 721px) {
	/* Karta: czarne tło, obrys --roz, rogi --corner, glow jak w Figmie
	   (Figma: p-40, border #a977e8, radius 20, drop-shadow 20 20 50 rgba(109,66,216,.3) = var(--glow)) */
	.wf-endcta--card .wf-endcta__inner {
		border: 1px solid var(--roz);
		border-radius: var(--corner);
		background: var(--black);
		box-shadow: var(--glow);
		padding: 40px;
		gap: 48px; /* rozstaw i tak robi justify-content: space-between z reguły bazowej */
	}
	/* Lewa kolumna: szerokość naturalna (przyciski w JEDNYM rzędzie), gap tytuł→przyciski 40px */
	.wf-endcta--card .wf-endcta__left { flex: 0 0 auto; gap: 40px; }
	/* Przyciski: jeden rząd, bez zawijania */
	.wf-endcta--card .wf-endcta__btns { gap: 24px; flex-wrap: nowrap; }
	/* Atuty: bliżej siebie i bliżej treści (makieta — zwarty zestaw wewnątrz karty) */
	.wf-endcta--card .wf-endcta__feats { gap: 48px; padding: 0; }
	.wf-endcta--card .wf-usp--v { flex: 0 0 auto; }
	/* Separator (border-left var(--stroke) z reguły bazowej = Figma Line 23:
	   white/30%) — odstęp 48px po obu stronach linii */
	.wf-endcta--card .wf-usp--v + .wf-usp--v { padding-left: 48px; }
}

/* ============================================================
   T9 — Współpraca: karty hero (Figma 689:1969, karty 689:1957/1964/1966)
   Cienkie ikony outline 44px + ciaśniejsze karty (hug-content jak w Figmie).
   Dokleić na koniec assets/css/main.css.
   ============================================================ */

/* Ikona karty: 44×44 (Figma "Ikony" 44px), wyrównana do góry bloku tekstu.
   Nowe pliki ik-*-thin.svg mają viewBox ~45×45 i stroke 1.5 → efektywnie
   ~1.45px na ekranie (stare 21×21 przy 40px dawały ~2.9px — stąd "pogrubienie"). */
@media (min-width: 721px) {
	.wf-whero .wf-herocard__icon {
		width: 44px;
		height: 44px;
		margin-top: 0;
	}
	/* Strzałka w kółku wyraźnie większa (zrzut POWINNO: ~1/3 wysokości karty; było 44px) */
	.wf-whero .wf-herocard__arrow {
		width: 56px;
		height: 56px;
	}
}

/* Odstęp tytuł ↔ opis w karcie: 8px (Figma gap-[8px]; było 6px) */
.wf-whero .wf-herocard__txt { gap: 8px; }

/* Desktop (>1280px — poniżej main.css przełącza .wf-herocards na 1 kolumnę):
   karty "hug content" rozsunięte space-between, jak w Figmie (justify-between,
   szerokości 441/436/471 przy content 1440). Tekst nie rozpycha karty (flex:1 → auto),
   strzałka po stałym odstępie 64px od tekstu (16px gap + 48px marginesu). */
@media (min-width: 1281px) {
	.wf-whero .wf-herocards {
		grid-template-columns: repeat(3, auto);
		justify-content: space-between;
	}
	.wf-whero .wf-herocard {
		max-width: 480px; /* bezpiecznik na dłuższe teksty z pól WP */
		min-width: 0;
	}
	.wf-whero .wf-herocard__txt { flex: 0 0 auto; }
	.wf-whero .wf-herocard__arrow { margin-left: 48px; }
}

/* ============================================================
   T10 — Współpraca: „Jak wygląda współpraca krok po kroku?" (Figma 693:2577)
   Desktop 1:1 z Figmy 1920. Dopisać na koniec assets/css/main.css.
   Wymaga też zamiany ikon w page-wspolpraca.php (patrz template-spec.md)
   — nowe pliki kstep-*.svg już leżą w assets/img.
   ============================================================ */
@media (min-width: 721px) {
	/* Podtytuł sekcji — łamanie po „aż po" jak w makiecie (linia 1 = 363px,
	   z „start" = 399px, więc 380px wymusza właściwy podział) */
	.wf-ksteps .wf-sec-head__narrow { max-width: 380px; }

	/* Rząd kroków: oś wychodzi POZA kontener — kropka/strzałka 130px od krawędzi
	   viewportu (makieta 1920: oś ~6.8%→94.3%), kółka 01/05 na ~18.7%/81.8%.
	   Segmenty linii PRZED krokiem 01 i ZA krokiem 05 → padding 10%. */
	.wf-ksteps__row {
		margin-left: calc(50% - 50vw + 130px);
		margin-right: calc(50% - 50vw + 130px);
		padding: 0 10%;
	}

	/* Linia osi: 1px #a977e8 pełne krycie (bez opacity .5) + KROPKA 5.4px na początku
	   (Figma Frame 238). Pasek ma 7px wysokości: kreska wycentrowana na y=22px
	   = środek kółka 44px. */
	.wf-ksteps__row::before {
		top: 18.5px;
		height: 7px;
		opacity: 1;
		background:
			radial-gradient(circle 2.7px at 3.5px 3.5px, var(--roz) 98%, transparent) no-repeat,
			linear-gradient(var(--roz), var(--roz)) 0 3px / 100% 1px no-repeat;
	}

	/* STRZAŁKA na końcu linii (Figma Frame 239 — grot ~5px, kreska 1px) */
	.wf-ksteps__row::after {
		content: "";
		position: absolute;
		top: 22px;
		right: 0.5px;
		width: 5px;
		height: 5px;
		border-right: 1px solid var(--roz);
		border-bottom: 1px solid var(--roz);
		transform: translateY(-50%) rotate(-45deg);
	}

	/* Rytm pionowy kroku wg Figmy: kółko →48→ ikona →16→ tytuł →8→ linia →8→ opis */
	.wf-kstep { gap: 8px; }

	/* Kółko z cyfrą: 44px (było 32), cyfra BIAŁA 20px Medium (była różowa 12px),
	   +2px paddingu górnego jak w Figmie (693:2255). Czarny „pierścień" box-shadow
	   robi 24px przerwy w linii wokół kółka — jak odstępy segmentów w Figmie. */
	.wf-kstep__no {
		width: 44px;
		height: 44px;
		padding-top: 2px;
		font-size: 20px;
		font-weight: 500;
		color: var(--white);
		box-shadow: 0 0 0 24px var(--black);
	}

	/* Ikony: 64px wysokości (były 44px), cienka kreska — nowe pliki kstep-*.svg
	   (stroke 1.5–2 przy siatce 64 zamiast 2 przy siatce 24/32).
	   width:auto — czapka (kstep-graduation) ma naturalnie 78x64. */
	.wf-kstep__icon { width: auto; height: 64px; margin-top: 40px; } /* 8(gap)+40 = 48px od kółka */

	/* Tytuł kroku: H4 20px (był 16px); 8(gap)+8 = 16px od ikony */
	.wf-kstep strong { margin-top: 8px; font-size: 20px; line-height: normal; }

	/* Podkreślenie pod tytułem: pełna szerokość bloku tekstu (Figma Line 15 = 100%
	   szerokości kolumny kroku), nie 40px */
	.wf-kstep .wf-hr { width: 100%; }

	/* Opis kroku: Body 14px wg Figmy (wf-small ma 12px) */
	.wf-kstep .wf-small { font-size: 14px; }
}

/* ============================================================
   T11: WallFlow Care (757:5304) — typografia, odstępy, ceny wg Figmy
   Dołączyć NA KOŃCU main.css (nadpisuje bazowe .wf-care* z ~l.1393
   oraz regułę mobilną .wf-care__cards z media ≤1080 — dlatego
   media queries są tu powtórzone PO regułach desktopowych).
   ============================================================ */

/* Sekcja: pełny padding sekcyjny (Figma py-100) i odstęp głowa→karty 41px.
   Tło bez zmian pliku bazowego — plik care-bg-neon-plus.jpg (JPEG q80 z tego
   samego assetu Figmy) podpinany przez default pola care_bg (fields-spec). */
.wf-care { padding: 100px 0; background-size: cover; background-position: center; }

/* Głowa sekcji: badge→tytuł 32px, tytuł→lead→opis 40px (Figma gap-32 + gap-40) */
.wf-care__head { gap: 40px; max-width: 620px; margin-bottom: 41px; }
.wf-care__head .wf-badge { margin-bottom: -8px; }
.wf-care__head .wf-h1 { font-size: 80px; }
.wf-care__desc { font-size: 18px; }

/* Karty: proporcja 519 / 866 przy gap 55px (Figma 1440 = 519 + 55 + 866) */
.wf-care__cards { grid-template-columns: 519fr 866fr; gap: 55px; }
.wf-carecard { background: var(--black); padding: 32px; gap: 24px; min-height: 465px; }
.wf-carecard__head { gap: 20px; }
.wf-carecard__head img { width: 60px; height: 60px; } /* jak ikony głowic w makiecie (~61px); 80px łamał tytuł Care Plus na 2 linie */
.wf-carecard__head .wf-h3 { font-size: 36px; line-height: 1.1; }
.wf-care__label { font-size: 20px; }
.wf-care__list { font-size: 18px; padding-left: 24px; margin-top: -16px; } /* label→lista 8px przy gap karty 24px */

/* Boksy cen: dark-b + obrys roz + corner 20 + glow (Figma 755:5237 / 757:5285) */
.wf-care__price {
	background: var(--dark-b);
	border: 1px solid var(--roz);
	border-radius: var(--corner);
	padding: 24px 32px;
	min-height: 128px;
	display: flex;
	align-items: center;
	box-shadow: 20px 20px 25px rgba(109, 66, 216, 0.3);
	margin-top: auto; /* boks przypięty do dołu karty (Figma justify-between) */
}
.wf-care__price strong { font-size: 36px; font-weight: 500; line-height: 1.1; }
.wf-care__prices { display: flex; gap: 32px; margin-top: auto; flex-wrap: wrap; }
/* Metryki boksów lekko ściśnięte (pad 20 / gap 20 / chip 60): oba boksy muszą
   zmieścić się OBOK SIEBIE w karcie Extended (777px) — przy 24/24/64 wrapowały
   w pion, sekcja rosła do ~1340px i cover ucinał neonowy krzyż z prawej. */
.wf-care__price--box { gap: 20px; padding: 20px; margin-top: 0; }
.wf-care__price--box img { width: 60px; height: 75px; } /* głowica/chip 46.82:58.58 */
.wf-care__price--box .wf-small { font-size: 18px; }
.wf-care__price--box .wf-grey { font-size: 14px; }

/* --- Powtórzone reguły responsywne (muszą wygrać kaskadę z powyższymi) --- */
@media (max-width: 1440px) {
	.wf-care__head .wf-h1 { font-size: 64px; }
	.wf-care__prices { gap: 20px; }
}
@media (max-width: 1080px) {
	.wf-care__cards { grid-template-columns: 1fr; }
	.wf-carecard { min-height: 0; }
}
@media (max-width: 720px) {
	.wf-care { padding: 72px 0; }
	.wf-care__head { gap: 24px; margin-bottom: 32px; }
	.wf-care__head .wf-badge { margin-bottom: 0; }
	.wf-care__head .wf-h1 { font-size: 44px; }
	.wf-care__desc { font-size: 15px; }
	.wf-carecard__head img { width: 56px; height: 56px; }
	.wf-carecard__head .wf-h3 { font-size: 26px; }
	.wf-care__label { font-size: 16px; }
	.wf-care__list { font-size: 15px; margin-top: -8px; padding-left: 18px; }
	.wf-care__prices { flex-direction: column; gap: 16px; }
	.wf-care__price { min-height: 0; padding: 16px 24px; }
	.wf-care__price strong { font-size: 28px; }
	.wf-care__price--box { gap: 16px; }
	.wf-care__price--box img { width: 40px; height: 50px; }
	.wf-care__price--box .wf-small { font-size: 14px; }
}

/* ============================================================
   T12 — „Zaufali nam" (Social proof, Figma 743:4875):
   1) logotypy Google + facebook z 5★ w boksie oceny (743:4892)
   2) kropki paginacji pod karuzelą opinii (743:5028)
   ============================================================ */

/* --- Logotypy portali w boksie oceny (zastępują moduł .wf-greviews) --- */
/* Figma 743:4892: rząd gap 40px, wyrównanie do dołu; każda kolumna:
   logo w boksie h=30px + gap 8px + rząd 5 gwiazdek 100x17 (te same co w kartach). */
.wf-reviews__portals {
	display: flex;
	align-items: flex-end;
	gap: 40px;
	flex: 0 0 auto;
}
.wf-reviews__portal {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.wf-reviews__portal-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 30px;
}
.wf-reviews__portal-logo img { display: block; width: auto; }
/* Gwiazdki portali: fioletowe #6D42D8 — reużywamy star.svg i .wf-stars (17px, gap 4px),
   co odpowiada rzędowi 100x17 z Figmy (Frame 113). Bez dodatkowego CSS. */

/* --- Kropki paginacji karuzeli (Figma 743:5028: r=7.5 + stroke 1px #A977E8,
       aktywna wypełniona #A977E8, nieaktywne czarne; rozstaw środków 40px => gap 24px) --- */
.wf-reviews__dots {
	display: flex;
	justify-content: center;
	gap: 24px;
	/* Figma: 64px między rzędem kart a kropkami; .wf-reviews__viewport ma już
	   60px dolnego paddingu (miejsce na glow kart), więc dokładamy tylko 4px. */
	margin-top: 4px;
}
.wf-reviews__dot {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #000;
	border: 1px solid var(--roz);
	flex: 0 0 auto;
	transition: background-color 0.3s ease;
}
.wf-reviews__dot.is-active { background: var(--roz); }

/* Mobile — mniejsze odstępy, kropki lekko mniejsze (poza zakresem 1:1 desktop 1920,
   ale żeby nic się nie rozjeżdżało na wąskich szerokościach). */
@media (max-width: 768px) {
	.wf-reviews__portals { gap: 28px; align-items: flex-end; justify-content: center; }
	.wf-reviews__dots { gap: 16px; margin-top: 8px; }
	.wf-reviews__dot { width: 12px; height: 12px; }
}

/* ============================================================
   T13 — Sekcja „3 filary współpracy" (taby 01/02/03) — Figma 699:2885
   Strona: Współpraca (page-wspolpolpraca — .wf-ftabs, id="filary").
   Dopisać na KOŃCU assets/css/main.css (nadpisuje kaskadą).
   Wymaga zamian OLD→NEW z template-spec.md (divider + nagłówek panelu).
   ============================================================ */

@media (min-width: 721px) {

	/* --- Karty-taby (komponent „Filar" 697:2696): padding 24, gap 24,
	       wyrównanie do góry, box numeru 80px/radius 20/font 48,
	       tytuł 26px Regular, opis 14px, gap kolumny 8px --- */
	.wf-ftabs__tabs { gap: 32px; margin-bottom: 24px; }
	.wf-ftab { align-items: flex-start; gap: 24px; padding: 24px; }
	.wf-ftab__no {
		width: 80px;
		height: 80px;
		border-color: var(--stroke);
		border-radius: var(--corner);
		font-size: 48px;
		line-height: 1.1;
	}
	.wf-ftab.is-active .wf-ftab__no { border-color: var(--roz); }
	.wf-ftab__txt { gap: 8px; }
	.wf-ftab__txt strong { font-size: 26px; font-weight: 400; line-height: 1.3; }
	.wf-ftab__txt .wf-small { font-size: 14px; }

	/* Strzałka aktywnego taba: wyśrodkowana pod kartą, większa (Figma 52x30) */
	.wf-ftab.is-active::after {
		left: 50%;
		transform: translateX(-50%);
		bottom: -14px;
		border-left-width: 16px;
		border-right-width: 16px;
		border-top-width: 14px;
	}

	/* --- Karta szczegółów (699:2798): padding 32, obie kolumny 1:1,
	       pionowy divider pomiędzy (64px luzu z każdej strony) --- */
	.wf-ftabpanel { padding: 32px; gap: 0; align-items: center; justify-content: space-between; }
	.wf-ftabpanel__left { flex: 1 1 0; min-width: 0; gap: 32px; }

	/* Nagłówek panelu: „01." gradientowe 100px + tytuł 36px Medium obok (697:2753) */
	.wf-ftabpanel__head { display: flex; align-items: center; gap: 16px; margin: 0; }
	.wf-ftabpanel__no { font-size: 100px; line-height: 1; font-weight: 400; }

	/* Opis pod nagłówkiem: 18px (Figma „Body large") */
	.wf-ftabpanel__left > p { font-size: 18px; }

	/* PIONOWY divider między opisem a checklistą (699:2838) */
	.wf-ftabpanel__divider {
		flex: 0 0 auto;
		align-self: stretch;
		width: 1px;
		margin: 0 64px;
		background: var(--stroke);
	}

	/* Checklista: węższe kolumny (2 x 294px przy 1440), ikony 32px, tekst 18px,
	   odstępy 36px (kolumny) / 24px (wiersze), wycentrowana w pionie */
	.wf-ftabpanel__list { flex: 1 1 0; min-width: 0; column-gap: 36px; row-gap: 24px; align-content: center; }
	.wf-ftabpanel__list li { gap: 8px; font-size: 18px; }
	.wf-ftabpanel__list img { width: 32px; height: 32px; }

	/* --- Dolny pasek atutów (699:2883): jeden boks z ramką --roz,
	       elementy wycentrowane, separatory 64px od tekstów, ikony 32px, tekst 18px --- */
	.wf-ftabs__bar {
		justify-content: center;
		gap: 0;
		border-color: var(--roz);
		padding: 24px 32px;
	}
	.wf-ftabs__baritem { font-size: 18px; gap: 8px; padding: 0 64px; }
	.wf-ftabs__baritem img { width: 32px; height: 32px; }
	.wf-ftabs__baritem + .wf-ftabs__baritem { border-left: 1px solid var(--stroke); padding-left: 64px; }
}

/* Tablet (721–1280): panel przechodzi w kolumnę (reguła w main.css @1280) —
   divider staje się poziomą linią */
@media (max-width: 1280px) and (min-width: 721px) {
	.wf-ftabpanel__divider { width: auto; height: 1px; align-self: stretch; margin: 0; }
	.wf-ftabpanel__list { align-content: start; }
}

/* Mobile ≤720: nowe elementy z template-spec nie mogą psuć układu mobilnego
   (mobile stylowane osobno — tu tylko neutralizacja nowości) */
@media (max-width: 720px) {
	.wf-ftabpanel__divider { display: none; }
	.wf-ftabpanel__head { display: flex; align-items: center; gap: 12px; margin: 0; }
	.wf-ftabpanel__no { font-size: 56px; line-height: 1; }
}

/* ============================================================
   T15 — Współpraca / sekcja „Finansowanie dopasowane do Twojej
   sytuacji" (Figma 701:3285) — korekty 36.png → 37.png.
   Dopisać NA KOŃCU assets/css/main.css (nadpisuje bloki ~1475-1483).
   ============================================================ */

/* --- Karty finansowania (Figma komponent 701:3031) ------------- */
/* Figma: padding 32, ikona 64px, gap ikona→tytuł 32, tytuł→opis 8,
   opis→lista 32, lista gap 16, przycisk dobity do dołu (min 32 od listy). */
.wf-fincard { padding: 32px; gap: 8px; }
.wf-fincard__icon { width: 64px; height: 64px; margin-bottom: 24px; } /* 24 + gap 8 = 32 */
.wf-fincard .wf-h4 { font-size: 26px; font-weight: 400; line-height: 1.3; } /* styl H3 z Figmy (obecnie 20/500) */
.wf-fincard .wf-small { font-size: 14px; } /* Body 14 z Figmy (obecnie 12) */
.wf-fincard .wf-checklist { margin-top: 24px; } /* 24 + gap 8 = 32 */
.wf-fincard .wf-btn--outline { margin-top: 24px; border-color: var(--roz); } /* Figma: obrys przycisku --roz, nie --stroke */

/* --- Dolne CTA „Nie wiesz, która opcja…" (Figma 701:3284) ------- */
/* (2) Ikona czatu w WYPEŁNIONYM fioletowym kole: kółko 96px,
   tło --granat (#6d42d8), ikona 64px (biały stroke w SVG) — Figma 701:3272. */
.wf-fincta > img {
	width: 96px;
	height: 96px;
	padding: 16px; /* box-sizing:border-box → ikona 64px */
	background: var(--granat);
	border-radius: 50%;
}
.wf-fincta .wf-h3 { font-size: 36px; font-weight: 500; line-height: 1.1; } /* Figma: styl H2 (701:3251) */
.wf-fincta__txt { gap: 9px; }
.wf-fincta__txt p { font-size: 18px; } /* Figma: Body large 18 (701:3253) */
.wf-fincta__action { gap: 16px; } /* Figma: 16 (obecnie 8) */
.wf-fincta__action .wf-small { font-size: 14px; color: var(--white); } /* Figma: notka biała 14, nie szara 12 */

/* --- Rozmiary/odstępy desktop 1920 (Figma 1:1) ------------------ */
/* W media query, żeby nie psuć istniejących układów mobilnych
   (wcześniejsze breakpointy ~1936/1963/2027 zostają nienaruszone). */
@media (min-width: 1024px) {
	/* Figma: karty 330.75px, 1440 − 4×330.75 = 117 → gap 39px (obecnie 32) */
	.wf-fin4__grid { gap: 39px; }
	/* Karty bez poświaty (Figma: cienka jednolita ramka, brak glow) */
	.wf-fin4 .wf-card { box-shadow: none; }
	/* Przycisk kompaktowy, dopasowany do treści (Figma 701:3031) —
	   white-space:pre zachowuje podwójną spację przed strzałką „→" */
	.wf-fincard .wf-btn--outline { align-self: flex-start; white-space: pre; }
	/* Figma: CTA padding 32px/64px (obecnie 32px), odstęp od kart 64px (obecnie 48) */
	.wf-fincta { margin-top: 64px; padding: 32px 64px; }
}

/* ============================================================
   T18 — Realizacje „Odkryj wyjątkowe efekty druku ściennego"
   (home, Figma 342:524 / head 342:519). Dopisać na końcu
   assets/css/main.css. Tylko desktop (≥721px) — mobile ma
   sekcję .wf-gallery ukrytą na home (scope .home /
   .page-template-page-home), więc nic tam nie zmieniamy.
   ============================================================ */
@media (min-width: 721px) {
	/* Węższa kolumna nagłówka jak w Figmie (frame 342:519 = 421px,
	   równo z lewą kolumną gridu) — tytuł łamie się na 3 linie:
	   „Odkryj wyjątkowe / efekty druku / ściennego".
	   Nadpisuje .wf-gallery__head { max-width: 460px } z linii ~986. */
	.wf-gallery__head { max-width: 421px; }
}

/* T18b — Galeria „Odkryj" 1:1 z Figmy 342:524: treść sekcji zajmuje pełne
   1440px (240..1680 przy 1920), bez wewnętrznego paddingu 20px kontenera.
   Dzięki temu kolumna zdjęć ma 955px (Figma 307:2622): duży kafel 344×490,
   małe 179.67×233 (proporcje z makiety; wcześniej zdjęcia były zwężone do 915
   i przez to optycznie „wyższe/pionowe"). Poniżej 1920 zachowany margines
   min. 64px z każdej strony — jak globalny clamp kontenera (linia ~51). */
@media (min-width: 1024px) {
	.wf-gallery .wf-container { max-width: min(1480px, 100vw - 128px); }
}

/* ============================================================
   T19 — Serwis: hero „Serwis drukarek ściennych blisko Ciebie" (728:3596)
   + boks „Serwisujemy drukarki ścienne różnych producentów" (730:4607)
   Dokleić na KOŃCU assets/css/main.css (reguły muszą wygrać z wcześniejszymi
   o tej samej specyficzności, m.in. z .wf-shero ...::after z bloku @media 721px).
   ============================================================ */
@media (min-width: 1024px) {
	/* Zdjęcie hero większe/szersze, jak w makiecie.
	   Figma: obraz 1294x837 (aspekt assetu 1982x1282) na ramce 1920x837,
	   lewa krawędź x=716, prawa wystaje 90px poza kadr (716+1294=2010).
	   „right -90u top" odtwarza to 1:1 przy 1920 i pozostaje bezpieczne
	   na szerszych ekranach (obraz nadal kotwiczony do prawej). */
	.wf-shero .wf-phero__stage {
		background-size: auto 100%;
		background-position: right calc(-90 * var(--u)) top;
	}

	/* W Figmie hero NIE ma nakładki gradientowej — fade po lewej, fioletowa
	   poświata i fala cząsteczek na dole są wypalone w assecie
	   fig-820be168af.png (identyczny bajt-w-bajt z assetem z Figmy).
	   Dotychczasowy overlay z bloku @media(min-width:721px)
	   (czerń 0.95→0.6→transparent 58% + fade w dół od 55%) przyciemniał
	   zdjęcie o ~400px i gasił falę/poświatę na dole — stąd zdjęcie
	   wyglądało na węższe niż w makiecie. Na desktopie wyłączamy. */
	.wf-shero .wf-phero__stage::after { background: none; }

	/* Odstępy hero: badge → nagłówki → przyciski = 64 (Figma gap-64 na 728:3596;
	   wewnętrzny gap nagłówków 40 zostaje z reguł ogólnych) */
	.wf-shero .wf-phero__inner { gap: calc(64 * var(--u)); }

	/* Boks producentów (730:4607) — 1440x167, padding 32/64, obrys 1px
	   var(--roz) + rounded var(--corner) dziedziczone z .wf-card (już są),
	   bez glow (w Figmie boks nie ma cienia), ikona klucza w WYPEŁNIONYM
	   fioletowym kole 80x80 (var(--granat), ikona 48x48). */
	.wf-shero .wf-servicecard {
		margin-top: calc(-40 * var(--u)); /* nachodzi na hero o 40, jak w Figmie (mb -40) */
		min-height: calc(167 * var(--u));
		padding: calc(32 * var(--u)) calc(64 * var(--u));
		gap: calc(32 * var(--u));
		box-shadow: none;
	}
	.wf-shero .wf-servicecard__icon {
		width: calc(80 * var(--u));
		height: calc(80 * var(--u));
	}
	.wf-shero .wf-servicecard__icon img {
		width: calc(48 * var(--u));
		height: calc(48 * var(--u));
	}
	.wf-shero .wf-servicecard div { gap: calc(9 * var(--u)); }
	/* Tytuł boksu: Figma styl H2 — Poppins Medium 36 / 1.1 (obecnie .wf-h3 = 26/400) */
	.wf-shero .wf-servicecard .wf-h3 {
		font-size: calc(36 * var(--u));
		font-weight: 500;
		line-height: 1.1;
	}
	/* Opis boksu: Figma „Body large" 18px (obecnie .wf-small = 12px) */
	.wf-shero .wf-servicecard .wf-small {
		font-size: calc(18 * var(--u));
		line-height: normal;
	}
}

/* ============================================================
   T20 — Serwis: sekcja „Jakie usługi wykonujemy?" (Figma 738:4831)
   Karty usług 1:1 z Figmy 1920 (symbol „Usługi" 734:4749, 299×345,
   grid 737:4790: 3 kolumny, gap 32/32).
   Wartości w calc(N * var(--u)) — przy 1920px --u = 1px, więc jest to
   dokładnie N px z Figmy; poniżej 1920 sekcja skaluje się proporcjonalnie
   (ten sam wzorzec co .wf-contact / .wf-kb w main.css). Mobile ≤720 bez zmian.
   Dopisać na końcu assets/css/main.css.
   ============================================================ */
@media (min-width: 721px) {
	/* Kontener sekcji: treść 1440px jak w Figmie (240..1680) — jak .wf-contact */
	.wf-services .wf-container {
		max-width: calc(1480 * var(--u));
		padding-left: calc(20 * var(--u));
		padding-right: calc(20 * var(--u));
	}

	/* Lewa kolumna 400px (Figma 734:4628), odstęp do kart 79px (640→719).
	   Wynikowa szerokość karty: (1440 − 400 − 79 − 2×32)/3 = 299px ✓ */
	.wf-services__grid {
		grid-template-columns: calc(400 * var(--u)) 1fr;
		gap: calc(79 * var(--u));
	}

	/* Siatka kart: 3 kolumny, gap 32×32 (Figma: kolumny x=0/331/662, rzędy y=0/377) */
	.wf-services__cards {
		gap: calc(32 * var(--u));
	}

	/* Karta „Usługi" (734:4749): padding 32, radius var(--corner),
	   border 1px var(--roz); flex column. Gap ikona→teksty = 32,
	   tytuł→opis = 9 → flex gap 9 + margin-bottom 23 na ikonie.
	   W Figmie karta bez glow (brak efektu na komponencie). */
	.wf-servicebox {
		padding: calc(32 * var(--u));
		gap: calc(9 * var(--u));
		box-shadow: none;
	}

	/* Ikona w kółku (734:4700): okrąg 96×96, tło #000, ring 2px var(--stroke),
	   glif 48×48 → padding (96 − 48 − 2×2)/2 = 22 (box-sizing: border-box) */
	.wf-servicebox img {
		width: calc(96 * var(--u));
		height: calc(96 * var(--u));
		padding: calc(22 * var(--u));
		border: 2px solid var(--stroke);
		background: var(--black);
		margin-bottom: calc(23 * var(--u));
	}

	/* Typografia karty: H4 Poppins Medium 20 (734:4703),
	   Body Poppins Regular 14 (734:4704), leading normal (jak body) */
	.wf-servicebox .wf-h4 {
		font-size: calc(20 * var(--u));
		font-weight: 500;
	}
	.wf-servicebox .wf-small {
		font-size: calc(14 * var(--u));
	}

	/* Przyciski lewej kolumny pionowo, wyrównane do lewej (Figma 738:4831:
	   „Zgłoś usterkę" nad „Skontaktuj się z serwisem") */
	.wf-services__left .wf-phero__btns {
		flex-direction: column;
		align-items: flex-start;
		gap: calc(24 * var(--u));
	}

	/* Obrys przycisku outline w akcencie --roz (jak .wf-contact / .wf-kb-final) */
	.wf-services .wf-btn--outline { border-color: var(--roz); }
}

/* ============================================================
   T22 — Serwis: sekcja FAQ „Masz pytania?" + karta „Formularz
   serwisowy" (Figma 783:5634, plik 1NI4AtizJYLGGtVJoB0KNt).
   APPEND NA SAM KONIEC assets/css/main.css — kolejność ma
   znaczenie: nadpisujemy m.in. `.wf-sfaq .wf-form__card
   { padding: 40px; }` z okolic linii 1611 (ta sama specyficzność,
   wygrywa późniejsza reguła).
   Wszystko scoped do .wf-sfaq — FAQ na Kontakt/Współpraca/Home
   pozostaje bez zmian. Mechanizm akordeonu (main.js: klik w
   .wf-acc__head togluje .is-open na .wf-acc__item) nietknięty.
   ============================================================ */

/* --- Nagłówek sekcji: opis 20px, odstępy jak w Figmie
       (badge→tytuł 32, tytuł→opis 32, opis→lista 64) --- */
.wf-sfaq .wf-sec-head--left { gap: 32px; margin-bottom: 64px; }
.wf-sfaq .wf-sec-head--left p { font-size: 20px; font-weight: 500; }

/* --- Wiersze FAQ: plus W KÓŁKU po LEWEJ, wiersze niższe (62px),
       corner 20px. Bez zmian w markupie: zal-plus.svg (fioletowy
       glif — Figma chce BIAŁY plus w kółku z obrysem --roz, więc
       img chowamy i rysujemy kółko pseudo-elementem ::before,
       który we flexie staje się pierwszym dzieckiem = po lewej). --- */
.wf-sfaq .wf-faqitem { background: var(--black); border-radius: var(--corner); }
.wf-sfaq .wf-faqitem__head {
	justify-content: flex-start;
	gap: 16px;                 /* Figma: gap 16 kółko↔pytanie */
	padding: 16px 24px;        /* Figma: py 16 / px 24 → wiersz 62px */
	font-size: 20px;           /* Figma: Poppins Medium 20 */
	line-height: 1.5;
}
.wf-sfaq .wf-faqitem__head > span { flex: 1; }
.wf-sfaq .wf-faqitem__plus { display: none; }
.wf-sfaq .wf-faqitem__head::before {
	content: "+";
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;               /* Figma: kółko 24×24 */
	height: 24px;
	border: 1px solid var(--roz);
	border-radius: 50%;
	color: var(--white);       /* Figma: biały glif */
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	transition: transform 0.2s;
}
.wf-sfaq .wf-faqitem.is-open .wf-faqitem__head::before { transform: rotate(45deg); }
/* odpowiedź wcięta pod tekst pytania (24 pad + 24 kółko + 16 gap) */
.wf-sfaq .wf-faqitem__body { padding: 0 24px 16px 64px; }

/* --- Karta „Formularz serwisowy" — kompakt wg Figmy (688×676,
       padding 64, gap 32; węższa treść 560px dzięki paddingowi) --- */
.wf-sfaq .wf-form__card {
	padding: 64px;             /* Figma p-64 (nadpisuje 40px z l. 1611) */
	gap: 32px;
	border-radius: var(--corner);
}
/* nagłówek 36px + podtytuł 18px przysunięte do siebie na 8px:
   karta ma gap 32, więc podtytuł dostaje margin-top -24 (32-24=8) */
.wf-sfaq .wf-form__card > .wf-h3 {
	margin: 0;
	font-size: 36px;           /* Figma: Poppins Medium 36 / lh 1.1 */
	font-weight: 500;
	line-height: 1.1;
}
.wf-sfaq .wf-form__card > .wf-h3 + p { margin-top: -24px; font-size: 18px; }

/* pola ciaśniej: textarea niższa (Figma: cały blok „Opisz usterkę"
   = 122px: label 22 + gap 8 + pole 92), zgoda drobniejsza */
.wf-sfaq .wf-input--area { padding-bottom: 8px; }
.wf-sfaq .wf-input--area textarea { min-height: 76px; }
.wf-sfaq .wf-consent { gap: 8px; }
.wf-sfaq .wf-consent input { width: 12px; height: 12px; margin-top: 3px; }

/* --- OPCJONALNIE (wymaga zmiany szablonu — patrz template-spec.md):
       opis przeniesiony do lewej kolumny gridu, dzięki czemu góra
       karty formularza wyrównuje się z opisem jak w Figmie --- */
.wf-sfaq__left { display: flex; flex-direction: column; gap: 64px; min-width: 0; }
.wf-sfaq__left .wf-sfaq__sub { margin: 0; font-size: 20px; font-weight: 500; }

/* --- Mobile ≤720: przywrócenie ciaśniejszych wartości (nasze
       desktopowe reguły są bardziej specyficzne niż istniejące
       mobile'owe `.wf-form__card{padding:24px}` itd., więc trzeba
       je jawnie zdublować w media query) --- */
@media (max-width: 720px) {
	.wf-sfaq .wf-sec-head--left { gap: 24px; margin-bottom: 32px; }
	.wf-sfaq .wf-sec-head--left p { font-size: 14px; }
	.wf-sfaq .wf-faqitem__head { font-size: 16px; padding: 14px 16px; }
	.wf-sfaq .wf-faqitem__body { padding: 0 16px 14px 56px; }
	.wf-sfaq .wf-form__card { padding: 24px; }
	.wf-sfaq .wf-form__card > .wf-h3 { font-size: 24px; }
	.wf-sfaq .wf-form__card > .wf-h3 + p { font-size: 14px; }
	.wf-sfaq__left { gap: 32px; }
}

/* ============================================================
   T23 — Baza wiedzy: „Jeśli zastanawiasz się:" + „Najnowsze wpisy"
   Figma 864:2935 (sekcja), 804:3777 „Aspekty" (kafelek pytania),
   827:3867 „Blog" (polecany poradnik 589x435),
   827:3877 „Blog" (karta wpisu 246x361).
   DOKLEIĆ NA SAMYM KOŃCU assets/css/main.css — reguły w @media
   (min-width: 721px) nadpisują wcześniejszy blok desktopowy --u
   (ta sama specyficzność, późniejsza pozycja w pliku).
   ============================================================ */

/* --- Wszystkie szerokości: zajawki przycięte na wysokość (uwaga
       użytkownika: „krótsze opisy artykułów na wysokość") --- */
.wf-kb-post p,
.wf-kb-post > .wf-small {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
.wf-kb-post .wf-h4 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
.wf-kb-featured__txt .wf-small {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
.wf-kb-featured__txt .wf-h3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}

/* Badge kategorii: zwarta pigułka w lewym górnym rogu zdjęcia
   (Figma I827:3877;827:3859 — czarne tło, obrys --roz, 12px),
   z elipsą dla długich nazw realnych kategorii */
.wf-kb-post__img .wf-badge {
	display: inline-block;
	max-width: 100%;
	padding: 6px 14px;
	font-size: 11px;
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --- Desktop 1:1 z Figmy 1920 (jednostka --u jak w bloku desktopowym) --- */
@media (min-width: 721px) {
	/* Kafelki pytań „Aspekty" (804:3777): 182px wysokości,
	   ikona w kółku + tekst, wyśrodkowane w pionie. W makiecie 4. kafelek
	   (najdłuższe pytanie) jest szerszy od pozostałych — dzięki temu tekst
	   łamie się na 3 linie zamiast 5 wąskich */
	.wf-kb-chips { grid-template-columns: 1fr 1fr 1fr 1.2fr; }
	.wf-kb-chip {
		align-items: center;
		justify-content: flex-start;
		padding: calc(24 * var(--u));
		min-height: calc(182 * var(--u));
		gap: calc(12 * var(--u));
		font-size: calc(18 * var(--u));
		font-weight: 500;
		line-height: 1.4;
	}
	.wf-kb-chip img { width: calc(56 * var(--u)); height: calc(56 * var(--u)); }
	/* Łamanie tekstu kafelków jak w makiecie: jawne \n z defaultów
	   (2 linie w kartach 1-3), 4. karta łamana z dywizem
	   („zaintereso-waniem") zamiast 5 krótkich linii */
	.wf-kb-chip span { white-space: pre-line; hyphens: auto; }

	/* Polecany poradnik (827:3867, 589x435): zdjęcie wypełnia prawą część
	   karty na całą wysokość, tekst na czerni po lewej; mocniejszy gradient,
	   żeby tekst był czytelny na realnych miniaturach wpisów */
	.wf-kb-featured {
		min-height: calc(435 * var(--u));
		background-size: cover;
		background-position: right center;
	}
	.wf-kb-featured::before {
		background: linear-gradient(
			90deg,
			rgba(4, 2, 10, 0.98) 0%,
			rgba(4, 2, 10, 0.95) 42%,
			rgba(4, 2, 10, 0.62) 72%,
			rgba(4, 2, 10, 0.06) 100%
		);
	}
	.wf-kb-featured__txt {
		gap: calc(16 * var(--u));
		padding: calc(24 * var(--u));
		max-width: calc(430 * var(--u));
	}
	.wf-kb-featured__txt .wf-h3 {
		margin-top: calc(8 * var(--u));
		font-size: calc(26 * var(--u));
		line-height: 1.3;
	}
	.wf-kb-featured__txt .wf-small {
		font-size: calc(14 * var(--u));
		line-height: 1.45;
	}

	/* Karta wpisu (827:3877, 246x361): zdjęcie full-bleed jako górna część
	   karty (~55% wys. = 199px, jak w Figmie: img h 55.13%), badge NA zdjęciu,
	   kompaktowy tytuł i opis, stopka dobita do dołu (margin-top:auto już jest) */
	.wf-kb-post {
		padding: calc(16 * var(--u));
		min-height: calc(361 * var(--u));
		gap: calc(8 * var(--u));
	}
	.wf-kb-post__img {
		height: calc(199 * var(--u));
		margin: calc(-16 * var(--u)) calc(-16 * var(--u)) calc(8 * var(--u));
		padding: calc(16 * var(--u));
		border-radius: var(--corner) var(--corner) 0 0;
	}
	.wf-kb-post .wf-h4 { font-size: calc(20 * var(--u)); line-height: 1.4; }
	.wf-kb-post p { font-size: calc(12 * var(--u)); line-height: 1.5; }
	.wf-kb-post__foot { padding: 0 calc(6 * var(--u)); }
}

/* --- Mobile ≤720: przycięcia dziedziczone z reguł bazowych;
       na wąskim ekranie pozwalamy na 1 linię więcej opisu --- */
@media (max-width: 720px) {
	.wf-kb-post p { -webkit-line-clamp: 4; }
}

/* ============================================================
   T24 — Baza wiedzy: karta CTA „Gromadź wiedzę i zacznij dochodowy
   biznes z WallFlow®" — wersja KOMPAKT 1:1 z Figmy (835:2770,
   1440×312 @1920). DOKLEIĆ NA KOŃCU assets/css/main.css —
   nadpisuje (późniejszym źródłem / wyższą specyficznością)
   bazowy .wf-noanswer (~1639) i stary blok desktop (~2366–2380).
   ============================================================ */

/* Karta ma w Figmie różowy stroke + efekt „Glow" — bazowy .wf-noanswer
   wygasza je (border --stroke, box-shadow none); tu przywracamy. */
.wf-card.wf-kb-cta {
	border-color: var(--roz);
	box-shadow: var(--glow); /* = 20px 20px 50px rgba(109,66,216,.3) — 1:1 z Figma „Glow" */
}

@media (min-width: 721px) {
	/* --- Karta (835:2770): 1440×312, padding 64, gap 64, radius 20.
	       KLUCZ KOMPAKTU: szerokość karty skaluje się z --u tak samo jak
	       jej wnętrze (max-width 1440u). Bez tego przy 1568–1919 px okna
	       kontener stoi na sztywnych 1440 px, a wnętrze maleje z --u —
	       karta wygląda na rozdmuchaną (stan „jest", zrzut 57). --- */
	.wf-card.wf-kb-cta {
		/* Figma: karta 1440 szer. — .wf-container ma padding 0 20px (content 1400),
		   więc jawna szerokość + wyliczony margines centrują kartę i pozwalają jej
		   wyjść po 20px na padding kontenera (heading „…zacznij dochodowy" musi
		   zmieścić się w kolumnie 682u — przy 1400 łamał się po „zacznij"). */
		width: calc(1440 * var(--u));
		max-width: none;
		margin-left: calc((100% - 1440 * var(--u)) / 2);
		margin-right: calc((100% - 1440 * var(--u)) / 2);
		margin-top: calc(64 * var(--u)); /* odstęp od siatki wpisów: 917 − 853 = 64 (zamiast 48px) */
		padding: calc(64 * var(--u));    /* Figma p 64 */
		gap: calc(64 * var(--u));        /* Figma gap 64 (ikona↔tekst↔przyciski) */
		border-radius: var(--corner);    /* 20px */
	}

	/* --- Rakieta w kole (835:2773): 180×180, ring 1px --roz, glow,
	       ikona 100×100 (ik-rocket.svg) --- */
	.wf-kb-cta .wf-noanswer__icon {
		width: calc(180 * var(--u));
		height: calc(180 * var(--u));
		/* Makieta: wnętrze okręgu z subtelną fioletową poświatą, jaśniejszą
		   przy dolnej krawędzi (nie płaska czerń) */
		background: radial-gradient(70% 45% at 50% 102%, rgba(109, 66, 216, 0.45), rgba(109, 66, 216, 0) 100%) var(--black);
		border: 1px solid var(--roz);
		border-radius: 100px;
		box-shadow: var(--glow);
	}
	.wf-kb-cta .wf-noanswer__icon img {
		width: calc(100 * var(--u));  /* Figma: instancja „Ikony" 100×100 (było 96u) */
		height: calc(100 * var(--u));
	}

	/* --- Kolumna tekstu (835:2775): szer. 682, gap 16 --- */
	.wf-kb-cta .wf-noanswer__txt {
		flex: 1;
		gap: calc(16 * var(--u));
		max-width: calc(682 * var(--u));
	}

	/* Tytuł (835:2776): Poppins Medium 36 / 1.1, biały, 2 linie.
	   Łamanie „…dochodowy / biznes z WallFlow®": pierwsza linia
	   „Gromadź wiedzę i zacznij dochodowy" ≈ 649 px @36 → mieści się
	   w 682u; jawne font-family/weight na wypadek dziedziczenia
	   strong=700 (bold poszerza tekst i psuł łamanie — zrzut 57). */
	.wf-kb-cta .wf-noanswer__txt strong {
		font-family: var(--font);
		font-size: calc(36 * var(--u));
		font-weight: 500;
		line-height: 1.1;
		letter-spacing: 0;
		max-width: calc(682 * var(--u));
	}

	/* Opis (835:2777): 18 px / lh 22 (wys. 88 = 4 linie w Figmie).
	   W Figmie krój Inter Regular — motyw celowo używa Poppins. */
	.wf-kb-cta .wf-noanswer__txt p {
		font-size: calc(18 * var(--u));
		line-height: calc(22 / 18);
	}

	/* --- Kolumna przycisków (835:2778): szer. 322, gap 32 --- */
	.wf-kb-cta .wf-kb-cta__btns {
		flex: 0 0 auto;
		gap: calc(32 * var(--u));
	}

	/* Przycisk (Button 322×44): padding 10/28, radius 100, font
	   Poppins Medium 16, gap 12, ikona 20×20. Węższy/niższy niż
	   obecnie — wszystko skaluje się z --u (było: width 322u, ale
	   font/padding/ikona w sztywnych px). */
	.wf-kb-cta .wf-kb-cta__btns .wf-btn {
		width: calc(322 * var(--u));
		min-height: calc(44 * var(--u));
		justify-content: center;
		gap: calc(12 * var(--u));
		padding: calc(10 * var(--u)) calc(28 * var(--u));
		border-radius: 100px;
		font-size: calc(16 * var(--u));
		font-weight: 500;
	}
	.wf-kb-cta .wf-kb-cta__btns .wf-btn img {
		width: calc(20 * var(--u));
		height: calc(20 * var(--u));
	}
	/* Outline (Umów konsultację): ring --roz jak w Figmie
	   (bazowy .wf-btn--outline ma szary --stroke) */
	.wf-kb-cta .wf-kb-cta__btns .wf-btn--outline {
		border: 1px solid var(--roz);
	}
}

/* ============================================================
   T25 — Baza wiedzy: sekcja kursu „Jak zacząć dochodowy biznes
   druku ściennego?" — 1:1 z Figmy 1920 (frame 841:3289).
   DOPISAĆ NA KOŃCU assets/css/main.css — reguły o tej samej
   specyficzności nadpisują wcześniejsze .wf-course__*.
   Układ dwupoziomowy (badge+H2 nad kolumnami) wymaga markupu
   z template-spec.md (nowa klasa .wf-course__inner); bez zmiany
   markupu stosują się tylko bezpieczne poprawki (player, cechy).
   ============================================================ */

/* — Nagłówek sekcji: badge → H2 → wiersz treści; mniejsze, równe odstępy 32px (Figma: flex col gap 32) — */
.wf-course__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }

/* — Wiersz treści (Figma 841:3287): lewa kolumna 689px + player, przerwa 100px, wyrównanie do GÓRY — */
.wf-course__inner .wf-course__grid { display: flex; align-items: flex-start; gap: 100px; width: 100%; }
/* Lewa kolumna: opis → cechy, gap 64 (Figma 841:3285) */
.wf-course__inner .wf-course__left { flex: 0 1 689px; min-width: 0; gap: 64px; }
/* Opis kursu — Body large 18px (Figma 841:3142) */
.wf-course__inner .wf-course__left > p { font-size: 18px; line-height: normal; }

/* — Player YouTube: osadzony iframe widoczny od razu, zaokrąglone rogi,
     bez fioletowej obwódki i poświaty (Figma „image 11" 841:3283 — czysty prostokąt r=20) — */
.wf-course__player {
	flex: 1 1 0;
	min-width: 0;
	width: 100%;
	align-self: flex-start;
	aspect-ratio: 651 / 415; /* proporcje „image 11" 841:3283 (651×414.8) — makieta ma player wyższy niż 16:9 */
	border: 0;
	border-radius: var(--corner);
	box-shadow: none;
	overflow: hidden;
}
.wf-course__img { flex: 1 1 0; min-width: 0; }
.wf-course__img img { display: block; }

/* — Cechy kursu (Figma 841:3189): JEDNA linia, gap 32; wewnątrz itemu gap 12;
     mniejsze ikony (ramka 52px, glif ~37px, obrys 2px #A977E8) i typografia 18/14 Regular — */
.wf-course__feats { display: flex; flex-wrap: nowrap; align-items: center; gap: 32px; width: 100%; }
.wf-course__feats .wf-usp { gap: 12px; flex: 0 1 auto; }
.wf-course__feats .wf-usp + .wf-usp { padding-left: 0; }
.wf-course__feats .wf-usp__icon { width: 52px; height: 52px; }
.wf-course__feats .wf-usp__txt { gap: 2px; }
.wf-course__feats .wf-usp__txt strong { font-size: 18px; font-weight: 400; line-height: normal; white-space: nowrap; }
.wf-course__feats .wf-usp__txt span { font-size: 14px; font-weight: 400; line-height: normal; white-space: nowrap; }

/* — Responsywnie: breakpointy spójne z istniejącymi (1280 / 720) — */
@media (max-width: 1280px) {
	.wf-course__inner { gap: 24px; }
	.wf-course__inner .wf-course__grid { flex-direction: column; gap: 48px; }
	.wf-course__inner .wf-course__left { flex-basis: auto; width: 100%; gap: 40px; }
	.wf-course__player, .wf-course__img { width: 100%; flex: 0 0 auto; }
}
@media (max-width: 720px) {
	.wf-course__feats { flex-direction: column; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
}

/* ============================================================
   T26 — Baza wiedzy: „Czego się nauczysz?" (PROGRAM KURSU) — Figma 858:2851
   Nagłówek + podtytuł wycentrowane (standardowy .wf-sec-head, bez --left),
   checklista w 2 kolumnach wycentrowana, 4 karty odcinków (Figma „Lekcje"
   841:3421): stopklatka wideo w tle karty z gradientem do czerni, numer
   w fioletowym kółku u góry, przycisk play na środku, na dole tytuł + czas.
   Dopisać na końcu assets/css/main.css — nadpisuje stare reguły
   .wf-program__list / .wf-lesson__no o tej samej specyficzności.
   ============================================================ */

/* --- Checklista: 2 kolumny, wypełnianie wierszami (1,2 / 3,4 / 5 jak w Figmie 841:3311) --- */
.wf-program__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 36px;
	row-gap: 24px;
	width: 100%;
	max-width: 1083px;
	margin: 0 auto 100px; /* 100px odstępu do kart (gap sekcji w Figmie) */
}
.wf-program__list li { align-items: center; }
.wf-program__list li img { width: 28px; height: 28px; } /* Figma: ikona 32px z p2 */
.wf-program__list li span { font-size: 18px; }

/* --- Rząd 4 kart odcinków (Figma 841:3468, gap 32) --- */
.wf-program__lessons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }

/* --- Karta odcinka (Figma „Lekcje" 336x340, p24, korner 20, border stroke) --- */
.wf-lesson {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 340px;
	padding: 24px;
	border: 1px solid var(--stroke);
	border-radius: var(--corner);
	overflow: hidden;
	color: var(--white);
	background: var(--black);
}
/* Stopklatka wideo jako tło całej karty + gradient do czerni od dołu */
.wf-lesson__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}
.wf-lesson__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--black) 18.75%, rgba(0, 0, 0, 0) 45.31%);
}
/* Numer odcinka — fioletowe (granat #6d42d8) wypełnione kółko 40px, lewy górny róg */
.wf-lesson__no {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--granat);
	border: 0;
	border-radius: 50%;
	color: var(--white);
	font-size: 20px;
	font-weight: 500;
	flex: 0 0 auto;
}
/* Przycisk play — 64px kółko z obrysem 2px, wycentrowane w wolnej przestrzeni */
.wf-lesson__play {
	position: relative;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border: 2px solid var(--stroke);
	border-radius: 50%;
	flex: 0 0 auto;
	transition: border-color 0.2s, background-color 0.2s;
}
.wf-lesson__play img { width: 20px; height: 26px; margin-left: 4px; }
a.wf-lesson:hover .wf-lesson__play { border-color: var(--roz); background: rgba(109, 66, 216, 0.35); }
/* Tytuł + czas na dole karty (Figma: blok 96px, tytuł 20px, czas 12px + zegar) */
.wf-lesson__meta {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	min-height: 96px;
	gap: 12px;
}
.wf-lesson__meta strong { font-size: 20px; font-weight: 500; line-height: normal; }
.wf-lesson__time { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--white); }
.wf-lesson__time img { width: 16px; height: 16px; flex: 0 0 auto; }

/* --- Responsywność (desktop 1:1 przy 1920; niżej sensowne łamanie) --- */
@media (max-width: 1280px) {
	.wf-program__lessons { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
	/* ≤720px karty już są 1fr przez istniejącą regułę w main.css (~l. 2030) */
	.wf-program__list { grid-template-columns: 1fr; row-gap: 16px; margin-bottom: 48px; }
	.wf-program__list li span { font-size: 16px; }
	.wf-lesson { min-height: 300px; }
}

/* ============================================================
   T28 — Kontakt 1:1 z Figmy 945:6077 (zrzut 69)
   Dokleić na KOŃCU assets/css/main.css — kolejność ma znaczenie:
   reguły nadpisują 1616-1635 (baza Kontakt), 2293-2306 (korekty hero)
   oraz 820-874 (formularz) tą samą specyficznością, później w pliku.
   Wyłącznie desktop (mobile ≤720 bez zmian).
   ============================================================ */
@media (min-width: 721px) {
	/* --- (1) Drugi przycisk hero „Umów konsultację" — obrys w kolorze
	   --roz jak w Figmie (945:7174: border var(--roz), nie var(--stroke)) --- */
	.wf-contact .wf-btn--outline { border-color: var(--roz); }

	/* --- (3) Karta „Szybki kontakt" (945:6020) — ciemniejsza (pełny --dark-b
	   zamiast rgba .9) i skalowana z makietą jak reszta sekcji: dotąd padding
	   i typografia karty były w stałych px, więc na oknach <1920 karta była
	   nieproporcjonalnie wielka względem lewej kolumny (zrzut 68 vs 69). --- */
	/* Makieta: karta zaczyna się na wysokości akapitu opisu (nagłówek „Skontaktuj się z…" sam u góry) —
	   221px = badge 33 + gap 40 + H1 108 + gap 40 w kolumnie info. */
	.wf-contact__form { background: var(--dark-b); padding: calc(64 * var(--u)); gap: calc(32 * var(--u)); margin-top: calc(221 * var(--u)); }
	.wf-contact__form .wf-h3 { font-size: calc(26 * var(--u)); font-weight: 400; line-height: 1.3; }
	.wf-contact__form form { gap: calc(32 * var(--u)); }
	.wf-contact__form .wf-field { gap: calc(8 * var(--u)); }
	.wf-contact__form .wf-field > span:first-child { font-size: calc(14 * var(--u)); }
	.wf-contact__form .wf-field-row { gap: calc(32 * var(--u)); }
	.wf-contact__form .wf-input { padding: calc(8 * var(--u)) calc(16 * var(--u)); border-radius: calc(8 * var(--u)); gap: calc(8 * var(--u)); }
	.wf-contact__form .wf-input input,
	.wf-contact__form .wf-input select,
	.wf-contact__form .wf-input textarea { font-size: calc(14 * var(--u)); line-height: calc(21 * var(--u)); }
	.wf-contact__form .wf-input img { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
	.wf-contact__form .wf-input--area { padding-bottom: calc(8 * var(--u)); } /* makieta: kompaktowa textarea ~3 wiersze (83px), bez wysokiego pustego pasa */
	/* Makieta (home + kontakt): brak uchwytu resize na textarea; formularz serwisowy bez zmian */
	.wf-form .wf-input--area textarea,
	.wf-contact__form .wf-input--area textarea { resize: none; }
	.wf-contact__form .wf-consent { gap: calc(12 * var(--u)); }
	.wf-contact__form .wf-consent span { font-size: calc(12 * var(--u)); line-height: calc(18 * var(--u)); }
	.wf-contact__form .wf-form__submit { font-size: calc(16 * var(--u)); padding: calc(10 * var(--u)) calc(28 * var(--u)); gap: calc(12 * var(--u)); }
	.wf-contact__form .wf-form__submit img { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }

	/* --- (4) „Dane kontaktowe:" (945:7186) — ikony liniowe BEZ kółek
	   (baza 1626-1633 dawała 44px kółko z obwódką; korekta 2306 zostawiała
	   border+padding 11px, przez co glyph robił się mikroskopijny),
	   telefon zwykłą bielą 18px jak mail/adres, nie 26px --roz. --- */
	.wf-contact__data img { width: calc(24 * var(--u)); height: calc(24 * var(--u)); padding: 0; border: 0; border-radius: 0; }
	.wf-contact__data a,
	.wf-contact__data > span { font-size: calc(18 * var(--u)); font-weight: 400; gap: calc(8 * var(--u)); }
	.wf-contact__data a[href^="tel:"] { font-size: calc(18 * var(--u)); font-weight: 400; color: var(--white); }
}

/* ============================================================
   T29 — Kontakt: FAQ „Najczęściej zadawane pytania" (Figma 945:6652)
   Lekkie wiersze FAQ + karta „Nie znalazłeś odpowiedzi?" (945:6653).
   Desktop 1:1 z Figmy 1920; mobile ≤720 bez zmian.
   Dokleić na koniec assets/css/main.css.
   ============================================================ */

/* Nagłówek 2-linijkowy: <br class="wf-faq-title-br"> wstawiany w page-kontakt.php
   (patrz template-spec.md). Na mobile ukryty, żeby nie zmieniać obecnego renderu ≤720. */
@media (max-width: 720px) {
	.wf-faq-title-br { display: none; }
}

@media (min-width: 721px) {
	/* Kolumny: 670 + 100 + 670 w kontenerze 1440 (Figma 945:6651) */
	.wf-faq--contact .wf-faq__cols { gap: 0 100px; }
	.wf-faq--contact .wf-faq__list { gap: 0; }

	/* Wiersz FAQ: lekki, bez pełnej ramki — tylko cienka dolna linia (Figma FAQ 945:6292/945:6293) */
	.wf-faq--contact .wf-faqitem {
		border: 0;
		border-bottom: 1px solid var(--stroke);
		border-radius: 0;
		background: transparent;
	}
	/* Mniejsza typografia pytania: Poppins 14/400 (Figma 945:6297); wiersz 48px (12+24+12) */
	.wf-faq--contact .wf-faqitem__head {
		justify-content: flex-start;
		gap: 16px;
		padding: 12px 0;
		font-size: 14px;
		font-weight: 400;
	}
	.wf-faq--contact .wf-faqitem__head span { flex: 1; }
	/* Plus po LEWEJ stronie pytania, w polu 24px (Figma 945:6295) — bez zmian w HTML,
	   przestawiony przez order; zal-plus.svg jest już fioletowy (#A977E8) */
	.wf-faq--contact .wf-faqitem__plus {
		order: -1;
		width: 14px;
		height: 14px;
		margin: 5px; /* 14 + 2*5 = pole 24px; tekst zaczyna się 40px od lewej jak w Figmie */
		flex: 0 0 auto;
	}
	/* Rozwinięta odpowiedź wyrównana do tekstu pytania */
	.wf-faq--contact .wf-faqitem__body { padding: 0 0 16px 40px; }

	/* Karta „Nie znalazłeś odpowiedzi?" (Figma 945:6653): ramka --roz, ikona czatu
	   w wypełnionym fioletowym kole 96px, tytuł 36/500, opis 18px, kontakty 18px po prawej */
	.wf-faq--contact .wf-noanswer {
		gap: 32px;
		padding: 32px;
		margin-top: 64px;
		border-color: var(--roz);
	}
	.wf-faq--contact .wf-noanswer__icon { width: 96px; height: 96px; }
	.wf-faq--contact .wf-noanswer__icon img { width: 64px; height: 64px; }
	.wf-faq--contact .wf-noanswer__txt { gap: 9px; }
	.wf-faq--contact .wf-noanswer__txt .wf-h3 { font-size: 36px; font-weight: 500; line-height: 1.1; }
	.wf-faq--contact .wf-noanswer__txt .wf-small { font-size: 18px; line-height: normal; max-width: 510px; }
	.wf-faq--contact .wf-noanswer > a { font-size: 18px; gap: 8px; }
	.wf-faq--contact .wf-noanswer > a img { width: 28px; height: 28px; }
	/* Odstęp 64px między telefonem a mailem: 32 (gap kontenera) + 32 (margines) — Figma 945:6676 */
	.wf-faq--contact .wf-noanswer > a + a { margin-left: 32px; }
}

/* ============================================================
   O NAS — poprawki 1:1 z Figmy (strona 709:1676), do DOPISANIA
   na końcu main.css. Blok przygotowany przez agenta „O nas".
   ============================================================ */

/* O NAS: hero 711:2341 — kadr neonu 1:1 z Figmy (obraz 1718×837 w ramce 1920,
   x=485 → kotwica: środek + 384px), większy odstęp nagłówek→podtytuł
   (w Figmie H1 ma pustą 3. linię ≈53px + gap 40) */
@media (min-width: 721px) {
	.wf-abhero .wf-phero__stage {
		background-size: auto 100%;
		background-position: calc(50% + 384 * var(--u)) top;
	}
	.wf-abhero .wf-phero__headings { gap: calc(88 * var(--u)); }
	.wf-abhero .wf-phero__sub { max-width: calc(672 * var(--u)); }
}

/* O NAS: karta „WallFlow to więcej niż dostawca drukarek" (711:2337) —
   w Figmie border w kolorze --roz + glow (drop-shadow 20/20/25 rgba(109,66,216,.3));
   nachodzenie na zdjęcie −50px już zgodne z Figmą (mb -150 + padding 100). */
@media (min-width: 721px) {
	.wf-about-card {
		border-color: var(--roz);
		box-shadow: 20px 20px 25px rgba(109, 66, 216, 0.3);
	}
}

/* O NAS: „Co nas napędza?" (718:3087) — karta: ikona w kółku po LEWEJ,
   po prawej kolumna tytuł+opis (markup w page-o-nas.php przebudowany:
   .wf-drive__head usunięty → .wf-drive__icon + .wf-drive__txt) */
.wf-drive { flex-direction: row; align-items: flex-start; }
.wf-drive__txt { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.wf-drive__title { font-size: 20px; font-weight: 400; line-height: 1.3; }
.wf-drive__icon { border-width: 2px; }
@media (min-width: 721px) {
	/* Kontener sekcji jak w Figmie: border --roz + fioletowa poświata przy
	   prawej/dolnej krawędzi (ten sam efekt co .wf-about-card wyżej). */
	.wf-drive__box {
		padding: calc(64 * var(--u));
		border-color: var(--roz);
		box-shadow: 20px 20px 25px rgba(109, 66, 216, 0.3);
	}
	.wf-drive__grid { gap: calc(64 * var(--u)); margin-top: calc(64 * var(--u)); }
	.wf-drive { gap: calc(32 * var(--u)); padding: calc(32 * var(--u)); }
	.wf-drive__icon { width: calc(96 * var(--u)); height: calc(96 * var(--u)); }
	.wf-drive__icon img { width: calc(64 * var(--u)); height: calc(64 * var(--u)); }
	.wf-drive__title { font-size: calc(26 * var(--u)); }
	.wf-drive__txt { gap: calc(9 * var(--u)); }
	.wf-drive .wf-small { font-size: calc(14 * var(--u)); line-height: 1.5; }
}
@media (max-width: 720px) {
	.wf-drive__icon { width: 64px; height: 64px; }
	.wf-drive__icon img { width: 36px; height: 36px; }
}

/* O NAS: poradnik zakupowy (721:2337) — chipy Sprzęt/Serwis/Wdrożenie z ikonami
   (719:1861: ikona 16px, gap 8, padding 4/12, radius --corner, font 14 regular) */
.wf-tag--chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 12px;
	border-radius: var(--corner);
	font-size: 14px;
	font-weight: 400;
}
.wf-tag--chip img { width: 16px; height: 16px; flex: 0 0 auto; margin: 2px; }
@media (min-width: 721px) {
	.wf-guide__chips { gap: calc(24 * var(--u)); }
}

/* O NAS: notka z ikoną dokumentu (719:1862) — szerokość 460px, ikona u góry,
   tekst 18px jak w Figmie */
.wf-guide__note { align-items: flex-start; }
@media (min-width: 721px) {
	.wf-guide__note { max-width: calc(460 * var(--u)); }
	.wf-guide__note .wf-small { font-size: calc(18 * var(--u)); line-height: 1.4; }
}

/* O NAS: poradnik — opis 18px w 4 liniach/akapit (nie 14px w 3) i luźniejsza
   lewa kolumna jak w Figmie 721:2337: większe odstępy przed notką i przyciskiem
   „Pobierz listę w PDF". Tylko desktop. */
@media (min-width: 721px) {
	.wf-guide__left { gap: 32px; }
	.wf-guide__left > .wf-small { font-size: 18px; line-height: 1.4; }
	.wf-guide__note { margin-top: 24px; }
	.wf-guide__left > .wf-btn { margin-top: 8px; }
}

/* O NAS: panel „Koniecznie sprawdź:" (721:2325) — przełącznik WallFlow/Inne firmy
   w stylu tabów (721:2320: aktywny = prostokąt 100×~56 na tle --dark-b, tekst --roz;
   nieaktywny = sam tekst biały; font 16 medium) */
.wf-ptab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 100px;
	padding: 16px 8px;
	font-size: 16px;
	font-weight: 500;
	color: var(--white);
}
.wf-ptab.is-active { background: var(--dark-b); color: var(--roz); }

/* O NAS: wiersze checklisty „Lista cech" (721:2235) — licznik „N elementów"
   dosunięty do prawej przy chevronie (tytuł flex:1 — stary selektor
   `> span:first-child` nie łapał, bo pierwszym dzieckiem jest img),
   radius --corner, padding 20/32, tytuł 18px regular, gap wg Figmy */
@media (min-width: 721px) {
	.wf-checkbox-panel { padding: calc(24 * var(--u)); }
	.wf-checkbox-panel__head { padding-right: calc(72 * var(--u)); }
	.wf-checkbox-panel__cols { gap: calc(32 * var(--u)); }
	.wf-checkrow { border-radius: var(--corner); }
	.wf-checkrow__head {
		padding: calc(20 * var(--u)) calc(32 * var(--u));
		gap: calc(15 * var(--u));
		font-size: calc(18 * var(--u));
		font-weight: 400;
	}
	.wf-checkrow__head > span:first-of-type { flex: 1 1 auto; }
	.wf-checkrow__head .wf-small { flex: 0 0 auto; }
	.wf-checkrow__chev { margin-left: calc(17 * var(--u)); }
	.wf-checkrow__ico { width: 24px; height: 24px; }
	.wf-checkrow .wf-faqitem__body { padding: 0 calc(32 * var(--u)) calc(20 * var(--u)); }
}

/* O NAS/GLOBAL: filary — otwarta książka zamiast zamkniętej (zrzut 10→11).
   icon-book.svg używany w template-parts/section-filary.php (home + drukarki);
   podmiana bez edycji szablonu przez content:url. Alternatywa (czystsza):
   w section-filary.php linia 17 zamienić 'icon-book' na 'icon-book-open-52'. */
.wf-pillar__icon img[src$="icon-book.svg"] { content: url("../img/icon-book-open-52.svg"); }

/* ============================================================
   T21 — Serwis: „Diagnostyka, naprawa i części — wszystko w jednym
   miejscu" (Figma 767:5496 na stronie Serwis 728:3590) — desktop 1:1 1920.
   Dopisać NA KOŃCU main.css — nadpisuje istniejące reguły .wf-diag*
   (linie ~1559-1604). Mobile ≤720 bez zmian: całość w @media ≥721px.
   Zweryfikowane live na localhost:8085/serwis/ @1920 (zrzut
   t21-diag-after.png w tym katalogu; metryki w notes.md).
   ============================================================ */
@media (min-width: 721px) {
	/* Kolumna treści 628px jak w Figmie (765:5309) — przy dotychczasowych
	   560px „—" spadał do własnej linii (tytuł łamał się na 3 linie).
	   Odstępy pionowe 40px; badge→tytuł 32px (ujemny margines koryguje gap). */
	.wf-diag__content { max-width: 628px; gap: 40px; }
	.wf-diag__content .wf-badge { margin-bottom: -8px; }

	/* Opis (765:5313): w Figmie Inter 18px; motyw używa Poppins — 16px
	   Poppins daje metryki 1:1 (3 linie łamane jak w makiecie; 18px Poppins
	   dawało 4 linie i sekcję wyższą od makiety). */
	.wf-diag__content > p { font-size: 16px; }

	/* Wiersz „Diagnostyka realizowana w 48 godzin…" (List 2, I765:5380):
	   styl H4 20px/500 (dotąd 14px/700 — za mały i za ciężki). */
	.wf-diag .wf-iconline strong { font-size: 20px; font-weight: 500; }
	/* „48 godzin": w Figmie solid #a977e8, nie gradient (spójne z regułą
	   klienta „akcenty solid --roz"). Nadpisanie CSS — bez zmiany treści
	   pola diag_line (span.wf-grad-text zostaje w defaultach). */
	.wf-diag .wf-iconline .wf-grad-text {
		background: none;
		-webkit-background-clip: initial;
		background-clip: initial;
		-webkit-text-fill-color: currentColor;
		color: var(--roz);
	}

	/* 3 chipy w JEDNEJ linii (767:5459): gap 32, font 14 (dotąd 24/13px
	   i zawijanie). Szerokość wiersza PL = 621px ≤ 628. UWAGA: obecne
	   EN/FR mają 637/669px → wymagane skrócone diag_m3 (fields-spec.md). */
	.wf-diag__minis { gap: 32px; font-size: 14px; flex-wrap: nowrap; }
	.wf-diag__minis span { white-space: nowrap; }

	/* Boks procesu (767:5495): pełna szerokość kolumny (628px), tło
	   --dark-b, ramka --roz + glow, padding 32; kółka 44px z cyfrą 26/400,
	   etykiety 18px; krótkie strzałki przez space-between.
	   Wynik: 628×109px (Figma ~628×108). */
	.wf-diag__steps {
		width: 100%;
		justify-content: space-between;
		padding: 32px;
		background: var(--dark-b);
		border-color: var(--roz);
		box-shadow: var(--glow);
		font-size: 18px;
	}
	.wf-diag__step { gap: 12px; line-height: 1.2; }
	.wf-diag__step i { width: 44px; height: 44px; font-size: 26px; font-weight: 400; }
	.wf-diag__arrow { font-size: 20px; }
}

/* ============================================================
   T27 — Baza wiedzy: Prowadzący (Figma 856:2850), Dla kogo
   (864:2903) i CTA „Rozpocznij kurs" (864:2904).
   Dopisać NA KOŃCU assets/css/main.css (nadpisuje starsze reguły).
   Stare, nieużywane po zmianie: .wf-mentor__grid, .wf-mentor__info,
   .wf-mentor__quote, .wf-kb-chips--4 (mogą zostać — martwe selektory).
   ============================================================ */

/* --- Prowadzący: nagłówek + wiersz treść/karta zdjęcia (base = mobile) --- */
.wf-mentor__head { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.wf-mentor__row { display: flex; flex-direction: column; gap: 48px; margin-top: 48px; }
.wf-mentor__left { display: flex; flex-direction: column; gap: 40px; align-items: flex-start; }
.wf-mentor__intro { display: flex; flex-direction: column; gap: 24px; }
.wf-mentor__why { display: flex; flex-direction: column; gap: 24px; }
.wf-why { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.wf-why li { display: flex; gap: 12px; align-items: flex-start; }
.wf-why li > img { width: 40px; height: 40px; flex: 0 0 auto; padding: 4px; }
.wf-why__txt { display: flex; flex-direction: column; gap: 4px; }
.wf-why__txt strong { font-size: 18px; font-weight: 500; }
.wf-why__txt span { font-size: 13px; color: var(--grey); }
/* Karta ze zdjęciem prowadzącego + podpis w boksie na dole zdjęcia */
.wf-mentor__card { display: flex; flex-direction: column; align-items: center; padding: 16px; border-color: var(--roz); }
.wf-mentor__photo { display: block; width: 100%; margin-bottom: -48px; }
.wf-mentor__cap {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 16px 32px;
	background: var(--dark-b);
	border: 1px solid var(--roz);
	border-radius: var(--corner);
	text-align: center;
}
.wf-mentor__cap strong { font-size: 18px; font-weight: 500; }
.wf-mentor__cap span { font-size: 15px; }

/* --- Dla kogo jest ten kurs? — jedna karta: zdjęcie + lista z ikonami --- */
.wf-who-card { display: flex; flex-direction: column; overflow: hidden; border-color: var(--roz); }
.wf-who-card__img img { width: 100%; height: 240px; object-fit: cover; display: block; }
.wf-who-card__txt { display: flex; flex-direction: column; gap: 24px; padding: 32px 24px; }
.wf-wholist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.wf-wholist li { display: flex; gap: 8px; align-items: center; font-size: 15px; }
.wf-wholist img { width: 28px; height: 28px; flex: 0 0 auto; padding: 2px; }

/* --- CTA kursu: rakieta w kole + tytuł + przyciski w kolumnie --- */
.wf-kb-final {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
	padding: 32px 24px;
	margin-top: 48px;
	border-color: var(--roz);
}
.wf-kb-final__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 120px;
	background: var(--black);
	border: 1px solid var(--roz);
	border-radius: 50%;
	box-shadow: var(--glow);
	flex: 0 0 auto;
}
.wf-kb-final__icon img { width: 66px; height: 66px; }
.wf-kb-final__txt { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.wf-kb-final__btns { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.wf-kb-final__btns .wf-btn { justify-content: center; }
.wf-kb-final__btns .wf-btn img { width: 20px; height: 20px; }
/* W Figmie outline tego CTA ma obrys w kolorze --roz (nie --stroke) */
.wf-kb-final .wf-btn--outline { border-color: var(--roz); }

/* ============================================================
   Desktop ≥721px — 1:1 z Figmy 1920 (skala --u jak reszta motywu)
   ============================================================ */
@media (min-width: 721px) {
	/* --- Prowadzący (856:2850): tekst po LEWEJ, karta zdjęcia po PRAWEJ,
	       lewa kolumna wyrównana do DOŁU karty (Figma: items-end) --- */
	.wf-mentor__head { gap: calc(24 * var(--u)); }
	.wf-mentor__row { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: calc(64 * var(--u)); margin-top: 0; }
	.wf-mentor__left { width: calc(518 * var(--u)); flex: 0 0 auto; gap: calc(64 * var(--u)); }
	.wf-mentor__intro { gap: calc(32 * var(--u)); }
	.wf-mentor__intro strong { font-size: calc(36 * var(--u)); line-height: 1.1; }
	.wf-mentor__intro p { font-size: calc(18 * var(--u)); line-height: calc(22 / 18); }
	.wf-mentor__why { gap: calc(32 * var(--u)); }
	.wf-mentor__why .wf-h3 { font-size: calc(26 * var(--u)); }
	.wf-why { gap: calc(32 * var(--u)); }
	.wf-why li { gap: calc(12 * var(--u)); }
	.wf-why li > img { width: calc(44 * var(--u)); height: calc(44 * var(--u)); padding: calc(4 * var(--u)); }
	.wf-why__txt { gap: calc(4 * var(--u)); }
	.wf-why__txt strong { font-size: calc(20 * var(--u)); }
	.wf-why__txt span { font-size: calc(14 * var(--u)); }
	.wf-mentor__card { width: calc(765 * var(--u)); flex: 0 0 auto; padding: calc(24 * var(--u)); }
	/* Figma: zdjęcie 825x800, podpis nachodzi na dół zdjęcia (mb -81) */
	.wf-mentor__photo { margin-bottom: calc(-81 * var(--u)); }
	.wf-mentor__cap { padding: calc(16 * var(--u)) calc(32 * var(--u)); }
	.wf-mentor__cap strong { font-size: calc(20 * var(--u)); }
	.wf-mentor__cap span { font-size: calc(18 * var(--u)); }

	/* --- Dla kogo (864:2903): karta 1440x408, zdjęcie 745 po lewej,
	       tekst 695 po prawej (padding 64 / 200 z Figmy) --- */
	.wf-who-card { flex-direction: row; align-items: stretch; min-height: calc(408 * var(--u)); }
	/* Zdjęcie absolutnie w kolumnie — inaczej kwadratowy plik 1600x1600
	   rozpycha kartę w pionie (Figma: karta 408 wys., zdjęcie kadrowane) */
	.wf-who-card__img { flex: 1 1 0; min-width: 0; position: relative; }
	.wf-who-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
	.wf-who-card__txt {
		flex: 0 0 auto;
		width: calc(695 * var(--u));
		/* p-prawe 160 (nie 200 z Figmy): kontener 1400 vs 1440 — inaczej
		   najdłuższa pozycja listy (414px) łamie się na 2 linie */
		padding: calc(64 * var(--u)) calc(160 * var(--u)) calc(64 * var(--u)) calc(64 * var(--u));
		gap: calc(40 * var(--u));
		justify-content: center;
	}
	.wf-who-card__txt .wf-h2 { font-size: calc(36 * var(--u)); }
	.wf-wholist { gap: calc(24 * var(--u)); }
	.wf-wholist li { gap: calc(8 * var(--u)); font-size: calc(18 * var(--u)); }
	.wf-wholist img { width: calc(28 * var(--u)); height: calc(28 * var(--u)); padding: calc(2 * var(--u)); }

	/* --- CTA kursu (864:2904): karta p64, ikona 180, przyciski 322 w kolumnie --- */
	.wf-kb-final { flex-direction: row; align-items: center; gap: calc(64 * var(--u)); padding: calc(64 * var(--u)); margin-top: calc(100 * var(--u)); }
	.wf-kb-final__icon { width: calc(180 * var(--u)); height: calc(180 * var(--u)); }
	.wf-kb-final__icon img { width: calc(100 * var(--u)); height: calc(100 * var(--u)); }
	.wf-kb-final__txt { gap: calc(16 * var(--u)); }
	.wf-kb-final__txt .wf-h2 { font-size: calc(36 * var(--u)); line-height: calc(40 / 36); }
	.wf-kb-final__txt p { font-size: calc(18 * var(--u)); line-height: calc(22 / 18); }
	.wf-kb-final__btns { flex: 0 0 auto; width: calc(322 * var(--u)); gap: calc(32 * var(--u)); }
}

/* Mobile QA overrides must remain the final rules in this file. */
@media (max-width: 720px) {
	.wf-reviews__score { width:100%; padding:28px 20px; margin-bottom:32px; flex-direction:column; gap:24px; }
	.wf-reviews__score-main { width:100%; justify-content:center; align-items:center; gap:18px; }
	.wf-reviews__num { font-size:clamp(54px,18vw,72px); }
	.wf-reviews__num small { font-size:.5em; }
	.wf-reviews__stars-wrap { align-items:center; text-align:center; }
	.wf-reviews__score-line { width:100%; height:1px; align-self:auto; }
	.wf-reviews__portals { width:100%; gap:24px; justify-content:center; }
	.wf-reviews__portal { min-width:0; flex:1 1 0; }
	.wf-reviews__note, .wf-reviews__note:nth-child(2n) { width:calc(100% - 8px); transform:none; }

	.wf-wcta__card { padding:28px 20px; min-width:0; }
	.wf-wcta__head { display:flex; flex-direction:column; align-items:stretch; gap:28px; min-width:0; }
	.wf-wcta__intro { margin:0; gap:20px; }
	.wf-wcta__btns { display:flex; flex-direction:column; width:100%; gap:16px; }
	.wf-wcta__btns .wf-btn { width:100%; justify-content:center; }
	.wf-wcta__steps { flex-direction:column; align-items:stretch; gap:24px; margin-top:40px; min-width:0; }
	.wf-wcta__step { display:grid; grid-template-columns:52px minmax(0,1fr); gap:16px; align-items:start; width:100%; }
	.wf-wcta__step-icon { width:52px; height:52px; }
	.wf-wcta__step-txt { min-width:0; overflow-wrap:anywhere; }
	.wf-wcta__step-txt strong { display:block; margin-bottom:4px; }
	.wf-wcta__dash { display:none; }

	.wf-servicecard { margin-top:20px; padding:24px 20px; align-items:flex-start; gap:18px; }
	.wf-servicecard__icon { width:56px; height:56px; }
	.wf-servicecard__icon img { width:30px; height:30px; }
	.wf-servicecard .wf-h3 { font-size:22px; line-height:1.25; overflow-wrap:anywhere; }
	.wf-diag { min-height:0; padding:72px 0; background-size:cover; background-position:62% center; }
	.wf-diag::before { background:rgba(0,0,0,.58); }
	.wf-diag__content { gap:24px; min-width:0; }
	.wf-diag__content .wf-h2 { font-size:32px; line-height:1.15; overflow-wrap:anywhere; }
	.wf-diag__content > p { font-size:16px; line-height:1.55; }
	.wf-diag__minis { flex-direction:column; gap:16px; font-size:15px; }
	.wf-diag__steps { width:100%; flex-direction:column; align-items:stretch; gap:18px; padding:24px; }
	.wf-diag__step { gap:14px; font-size:16px; }
	.wf-diag__arrow { display:none; }

	.wf-post__meta { display:flex; flex-wrap:wrap; gap:6px 10px; font-size:13px; line-height:1.4; }
	.wf-program__lessons { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
	.wf-lesson { min-height:310px; padding:18px; }
	.wf-lesson__meta strong { font-size:18px; line-height:1.4; overflow-wrap:anywhere; }

	.wf-dhero .wf-phero__leasing { width:100%; align-items:flex-start; }
	.wf-dhero .wf-phero__leasing img { width:38px !important; height:38px !important; }
	.wf-dhero .wf-phero__leasing .wf-h4 { font-size:19px; line-height:1.35; overflow-wrap:anywhere; }
	.wf-usps--tall .wf-usps__inner { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; gap:12px; padding-top:12px; padding-bottom:20px; }
	.wf-usps--tall .wf-usp--v {
		width:auto;
		min-height:112px;
		padding:12px 10px;
		justify-content:center;
		gap:10px;
		border:1px solid var(--stroke);
		border-radius:var(--corner);
	}
	.wf-usps--tall .wf-usp--v + .wf-usp--v { padding-left:10px; border-left:1px solid var(--stroke); }
	.wf-dhero .wf-usp--v .wf-usp__icon { width:34px; height:34px; }
	.wf-dhero .wf-usp--v .wf-usp__txt strong { font-size:13px; line-height:1.25; }
	.wf-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; gap:12px; }
	.wf-tab { width:100%; min-height:132px; padding:16px 8px; font-size:14px; }
	.wf-cyl { padding:56px 0; background-size:cover; background-position:center; position:relative; }
	.wf-cyl::before {
		content:"";
		position:absolute;
		inset:0;
		background:
			linear-gradient(180deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.72) 47%, rgba(0,0,0,.32) 72%, rgba(0,0,0,.08) 100%),
			linear-gradient(90deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.2) 78%, transparent 100%);
	}
	.wf-cyl__inner { position:relative; min-height:600px; justify-content:flex-start; gap:22px; }
	.wf-cyl__inner > *, .wf-cyl__desc { max-width:100%; }
	.wf-cyl__inner .wf-h2 { max-width:520px; font-size:32px; line-height:1.15; text-shadow:0 2px 14px #000; }
	.wf-cyl__desc { max-width:520px; font-size:16px; line-height:1.55; text-shadow:0 2px 12px #000; }
	.wf-cyl__note {
		max-width:520px;
		align-items:flex-start;
		padding:12px 16px;
		border-radius:16px;
		background:rgba(0,0,0,.58);
		font-size:15px;
		line-height:1.45;
		text-shadow:0 2px 10px #000;
		backdrop-filter:blur(3px);
	}
	.wf-cyl__note img { width:32px !important; height:32px !important; }
	.wf-cyl__inner > .wf-btn { margin-top:2px; align-self:flex-start; }
	.wf-endcta--card .wf-endcta__inner { align-items:stretch; gap:48px; min-width:0; }
	.wf-endcta__left .wf-h2 { font-size:32px; line-height:1.2; }
	.wf-endcta__btns { display:flex; flex-direction:column; gap:16px; width:100%; }
	.wf-endcta__btns .wf-btn { width:100%; justify-content:center; }
	.wf-endcta__feats { display:flex; flex-direction:column; gap:28px; width:100%; }
	.wf-endcta__feats .wf-usp--v { flex-direction:row; align-items:center; text-align:left; gap:22px; }
	.wf-endcta__feats .wf-usp__icon { width:72px; height:72px; flex:0 0 auto; }
	.wf-endcta__feats .wf-usp__txt { align-items:flex-start; }
}
@media (max-width:390px) { .wf-program__lessons { grid-template-columns:1fr; } }

/* Mobile: „Co nowego" bez desktopowej kolumny z maszyną; „Druk 360°" — tekst na czerni,
   butelka w całości PONIŻEJ treści (bez nakładania tekstu na zdjęcie) */
@media (max-width: 720px) {
	.wf-whatsnew__machine { display: none; }
	.wf-cyl {
		padding-bottom: 0;
		background-size: 100% auto;
		background-position: center bottom;
	}
	.wf-cyl::before { content: none; }
	/* rezerwa pod zdjęcie: wysokość fotki = 100vw * 908/1234 (~74vw) + odstęp */
	.wf-cyl__inner { min-height: 0; padding-bottom: 80vw; }
	/* dekoracyjna maszyna przy formularzu nie mieści się w układzie jednokolumnowym */
	.wf-form__decor { display: none; }
	/* biały glif klucza — fioletowy ginął na granatowym kole */
	.wf-servicecard__icon img { filter: brightness(0) invert(1); }
}

/* mobile-fix: onas-checklist — wiersze „Koniecznie sprawdź:" na mobile:
   ikona | tytuł (flex:1, może się łamać) | licznik (nowrap, mniejszy) | chevron,
   wszystko wyśrodkowane w pionie, spójne paddingi i min. wysokość wiersza.
   (Bazowy selektor `> span:first-child` nie łapał tytułu — pierwszym dzieckiem jest img.) */
@media (max-width: 720px) {
	.wf-checkrow__head { align-items: center; gap: 12px; padding: 14px 16px; min-height: 56px; }
	.wf-checkrow__head > span:first-of-type { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
	.wf-checkrow__head .wf-small { flex: 0 0 auto; white-space: nowrap; font-size: 12px; }
	.wf-checkrow__ico, .wf-checkrow__chev { flex: 0 0 auto; }
}

/* mobile-fix: onas-team — pionowe karty zespolu na mobile (zdjecie u gory, tekst pod spodem) */
@media (max-width: 720px) {
	.wf-team__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 32px; }
	.wf-team__member {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		min-height: 0;
	}
	.wf-team__member img {
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		object-fit: contain;
	}
	.wf-team__txt {
		flex: none;
		padding: 12px 10px 16px;
		gap: 4px;
		text-align: center;
	}
	.wf-team__member strong { font-size: 15px; line-height: 1.35; overflow-wrap: break-word; }
	.wf-team__txt .wf-small { font-size: 13px; line-height: 1.4; overflow-wrap: break-word; }
}

/* mobile-fix: onas-hero — O nas: jasny neon W prześwituje pod tekstem hero;
   ogólne rgba(.5) to za mało. Mocniejszy gradient od góry (tam gdzie tekst)
   + delikatny text-shadow, spójnie z przyciemnieniem hero innych podstron. */
@media (max-width: 720px) {
	.wf-abhero .wf-phero__stage::after {
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.66) 55%, rgba(0, 0, 0, 0.45) 100%);
	}
	.wf-abhero .wf-phero__headings,
	.wf-abhero .wf-badge {
		text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
	}
}

/* mobile-fix: onas-endcta — końcowe CTA na „O nas": mniejsza ikona w kole,
   kompozycja wyśrodkowana w kolumnie, spójne odstępy; przyciski full-width
   zapewniają wcześniejsze reguły mobile. Desktop (>720px) bez zmian. */
@media (max-width: 720px) {
	.page-template-page-o-nas .wf-endcta__box {
		flex-direction: column;
		align-items: center;
		gap: 24px;
		padding: 36px 20px;
		text-align: center;
	}
	.page-template-page-o-nas .wf-endcta__icon { width: 96px; height: 96px; }
	.page-template-page-o-nas .wf-endcta__icon img { width: 44px; height: 44px; }
	.page-template-page-o-nas .wf-endcta--onas .wf-endcta__left { align-items: center; gap: 16px; }
	.page-template-page-o-nas .wf-endcta__left p { max-width: 46ch; }
	.page-template-page-o-nas .wf-endcta__btns--col { width: 100%; min-width: 0; margin-top: 8px; }
}

/* mobile-fix: kb-intro-filtry — Baza wiedzy (page-baza-wiedzy.php) na mobile:
   1) zdjęcie maszyny w hero („to zdjęcie bardziej w tle") — absolutnie pozycjonowane
      ZA tekstem, wygaszone opacity + gradientowa maska od góry, dosunięte do dołu/prawej;
      nie zajmuje miejsca w layoucie, więc sekcja nie rośnie;
   2) filtry kategorii „Najnowsze wpisy" w JEDNEJ linii, przewijane poziomo
      (scroll tylko wewnątrz paska — strona bez poziomego scrolla). */
@media (max-width: 720px) {
	.wf-kb-hero__grid { position: relative; }
	.wf-kb-hero__left { position: relative; z-index: 1; }
	.wf-kb-hero__img {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 250px;
		margin: 0;
		z-index: 0;
		opacity: 0.32;
		pointer-events: none;
		-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 55%);
		mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 55%);
	}
	.wf-kb-hero__img img { max-height: 300px; }

	/* Łańcuch min-width:0 — inaczej nowrap-owe filtry rozpychają kolumnę grida i całą stronę */
	.wf-kb-latest, .wf-kb-latest__head { min-width: 0; max-width: 100%; }
	.wf-kb-filters {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding: 2px 12px 6px 2px;
		scrollbar-width: none;
	}
	.wf-kb-filters::-webkit-scrollbar { display: none; }
	.wf-kb-filters .wf-tag { white-space: nowrap; flex: 0 0 auto; }
}

/* mobile-fix: serwis-diag — czytelność sekcji „Diagnostyka, naprawa i części":
   mocniejszy gradient przyciemnienia (jak .wf-cyl na /drukarki/), text-shadow
   na treści, boks kroków 1-2-3 na solidnym ciemnym tle z wyraźną ramką. */
@media (max-width: 720px) {
	.wf-diag::before {
		/* Globalny .wf-section::before (linia neonowa) ustawia height:110px —
		   przez to overlay był tylko paskiem u góry sekcji. inset:0 + height:auto
		   rozciąga przyciemnienie na całą sekcję. */
		inset: 0;
		height: auto;
		background:
			linear-gradient(180deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .66) 55%, rgba(0, 0, 0, .5) 100%),
			linear-gradient(90deg, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .35) 100%);
	}
	.wf-diag__content .wf-h2,
	.wf-diag__content > p,
	.wf-diag .wf-iconline strong { text-shadow: 0 2px 12px #000; }
	.wf-diag__minis { text-shadow: 0 2px 10px #000; }
	.wf-diag__steps {
		background: rgba(0, 0, 0, .74);
		border: 1px solid rgba(255, 255, 255, .5);
		backdrop-filter: blur(3px);
		text-shadow: none;
	}
}

/* mobile-fix: wsp-reviews — boks oceny 4,9/5 + karta karuzeli opinii (musi byc na koncu pliku) */
@media (max-width: 720px) {
	/* 1. Boks oceny: liczba nad gwiazdkami (kolumna), mniejsze gwiazdki 32px —
	   42px gwiazdki nie mieszcza sie obok liczby i wystaja poza 390px ekranu. */
	.wf-reviews__score-main { flex-direction: column; align-items: center; gap: 12px; }
	.wf-reviews__stars-wrap { min-width: 0; max-width: 100%; }
	.wf-stars--big { justify-content: center; }
	.wf-stars--big img { width: 32px; height: 32px; margin-right: 0; }
	/* 2. Karta opinii: karty nie rozciagaja sie do najwyzszej z karuzeli
	   (stretch + space-between spychaly autora na dol i zostawialy pustke).
	   Tresc od gory, autor zaraz pod nia, karta zwarta. */
	.wf-reviews__cards { align-items: flex-start; }
	.wf-reviews__cards .wf-review { min-height: 0; height: auto; justify-content: flex-start; }
	.wf-review__body { padding-bottom: 0; }
}

/* mobile-fix: onas-drive — „Co nas napędza?" (page-o-nas.php): zrzut użytkownika
   pokazywał DRUGI, mniejszy okrąg nachodzący na okrąg ikony (Podejście/Wartości)
   i glif nie w centrum. W aktualnym kodzie artefakt nie reprodukuje się przy
   390/640/320@2x (najpewniej stary CSS z cache przeglądarki), ale blok defensywnie
   wymusza poprawny stan: JEDEN okrąg, stały rozmiar, glif idealnie w środku,
   zero pseudo-elementów i ozdobników na ikonie. Desktop (>720px) bez zmian. */
@media (max-width: 720px) {
	.wf-drive__icon::before,
	.wf-drive__icon::after { content: none !important; display: none !important; }
	.wf-drive__icon {
		box-sizing: border-box;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 64px;
		height: 64px;
		min-width: 64px;
		min-height: 64px;
		padding: 0;
		border: 2px solid var(--stroke);
		border-radius: 50%;
		background: none;
		box-shadow: none;
		flex: 0 0 auto;
		align-self: flex-start;
	}
	.wf-drive__icon img {
		display: block;
		width: 36px;
		height: 36px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		object-fit: contain;
	}
}

/* ============================================================
   mobile-fix: wsp-proces — Współpraca: „Krok po kroku" (≤720px)
   Zamiast łamiącej się siatki 2-kolumnowej: pionowa oś czasu.
   Każdy krok = zwarty wiersz: kółko z numerem | ikona | tytuł,
   opis pod spodem; cienka linia łączy kółka kolejnych kroków.
   ============================================================ */
@media (max-width: 720px) {
	.wf-ksteps__row {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 32px;
	}
	.wf-kstep {
		display: grid;
		grid-template-columns: 44px 40px minmax(0, 1fr);
		column-gap: 14px;
		row-gap: 8px;
		align-items: center;
		max-width: none;
		text-align: left;
	}
	/* Kółko z numerem: 44px, wyrównane do góry wiersza */
	.wf-kstep__no {
		grid-column: 1;
		grid-row: 1;
		align-self: start;
		justify-self: center;
		width: 44px;
		height: 44px;
		font-size: 15px;
	}
	/* Ikona: mniejsza, w jednej linii z numerem i tytułem */
	.wf-kstep__icon {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
		width: auto;
		height: 30px;
		max-width: 40px;
		margin-top: 0;
	}
	.wf-kstep strong { grid-column: 3; grid-row: 1; }
	/* Tytuły/opisy płyną naturalnie — bez sztywnych łamań z desktopu */
	.wf-kstep strong br,
	.wf-kstep .wf-small br { display: none; }
	/* Podkreślenie zbędne w układzie wierszowym */
	.wf-kstep .wf-hr { display: none; }
	/* Opis pod ikoną+tytułem, wcięty do osi tekstu */
	.wf-kstep .wf-small {
		grid-column: 2 / 4;
		grid-row: 2;
		margin: 0;
	}
	/* Linia osi czasu między kółkami */
	.wf-kstep:not(:last-child)::after {
		content: "";
		position: absolute;
		left: 22px;
		top: 48px;
		bottom: -28px;
		width: 1px;
		background: var(--roz);
		opacity: 0.5;
	}
}

/* mobile-fix: onas-endcta (cd.) — węższy padding przycisków, żeby dłuższa
   etykieta mieściła się w jednej linii przy 390px; wyrównuje też wysokości. */
@media (max-width: 720px) {
	.page-template-page-o-nas .wf-endcta__btns--col .wf-btn { padding: 12px; }
}

/* mobile-fix: home-pillars-head — łamanie nagłówka jak w makiecie:
   „Cena obejmuje" / fioletowe „3 filary współpracy" w osobnej linii */
@media (max-width: 720px) {
	.wf-pillars .wf-h2 .wf-acc { display: block; }
}

/* mobile-fix: dhero+usps+onas (zrzuty klienta #29-#32) */
@media (max-width: 720px) {
	/* #29: mocniejszy, gradientowy overlay hero /drukarki/ (płaskie .5 nie dociemniało maszyn) */
	.wf-dhero .wf-phero__stage::after {
		background: linear-gradient(180deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .66) 55%, rgba(0, 0, 0, .45) 100%);
	}
	.wf-dhero .wf-phero__stage { text-shadow: 0 2px 12px #000; }
	/* #30: ikony kafli USP zawsze na tej samej wysokości (flex-start zamiast center,
	   które rozjeżdżało ikony przy tekstach 1- vs 2-linijkowych) */
	.wf-usps--tall .wf-usp--v { justify-content: flex-start; padding-top: 24px; padding-bottom: 18px; }
	/* #31: oddech na dole karty „O nas" (tekst kończył się na krawędzi) */
	.wf-about-card { padding-bottom: 32px; }
	/* #32: karty „Co nas napędza?" szersze — mniejsze paddingi boksu i kart */
	.wf-drive__box { padding: 24px 14px; }
	.wf-drive { padding: 24px 18px; }
}

/* mobile-fix: dhero-usps c.d. — sibling-selektor (+) bił specyficznością padding-top kafli 2-6 */
@media (max-width: 720px) {
	.wf-usps--tall .wf-usp--v,
	.wf-usps--tall .wf-usp--v + .wf-usp--v { padding-top: 24px; padding-bottom: 18px; }
}

/* mobile-fix: onas-checklist szerzej (zrzut #33) — 32px paddingu panelu zwężało wiersze do 285px */
@media (max-width: 720px) {
	.wf-checkbox-panel { padding: 24px 14px; }
}

/* mobile-fix: strzałki karuzeli + kroki diag + meta wpisu (zrzuty #34-#36) */
@media (max-width: 720px) {
	/* #34: mniejsze strzałki nawigacji opinii, większy odstęp kropek */
	.wf-reviews__row .wf-arrow img { width: 48px; height: 48px; }
	.wf-reviews__dots { margin-top: 24px; }
	/* #35: kroki 1-2-3 diagnostyki w jednej linii (desktopowe \n zbędne), kółko wyśrodkowane z tekstem */
	.wf-diag__step { display: flex; align-items: center; gap: 12px; }
	.wf-diag__step br { display: none; }
	/* #36: zegarek i play w linii z tekstem „minut czytania" */
	.wf-kb-post__time { display: inline-flex; align-items: center; gap: 6px; }
	.wf-kb-post__time img { width: 16px; height: 16px; }
	.wf-kb-post__go { align-self: center; }
}

/* p3b-footer: kolumna „Masz pytania?" (WallBot) + schludna stopka mobilna (poprawki3 pkt 2) */
.wf-footer__col--bot a { display: inline-block; }

@media (max-width: 720px) {
	/* Przywrócenie stopki na mobile w kompaktowej, wyśrodkowanej formie —
	   wcześniejsza „stopka mini" ukrywała __main i __links w całości,
	   zostawiając samotny pasek copyright zasłaniany dymkiem czatu. */
	.wf-footer { border-top: 0.5px solid var(--stroke); }
	.wf-footer__main {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 24px;
		padding-top: 40px;
		padding-bottom: 4px;
	}
	.wf-footer__brand { align-items: center; max-width: none; gap: 14px; }
	.wf-footer__main .wf-footer__contact { display: none; }
	.wf-footer__links {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 24px;
		padding-top: 24px;
		padding-bottom: 32px;
	}
	/* Mapa strony jest w menu mobilnym — w stopce zostaje kontakt + WallBot */
	.wf-footer__links .wf-footer__col:first-child { display: none; }
	.wf-footer__col { min-width: 0; align-items: center; gap: 8px; }
	.wf-footer__bottom-inner {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 6px;
		text-align: center;
		padding-bottom: 32px;
	}
	.wf-footer__legal { justify-content: center; }
}

/* p3b-timeline */
.wf-history__icon img { object-fit: contain; }
.wf-history__item:nth-child(3) .wf-history__icon img { width: 44px; height: 34px; }

/* p3b-fin-desktop: /drukarki/ — karta „Finansowanie i leasing" niższa o ~25-30%
   (poprawki3: „zmniejszyłbym po wysokości boxa z finansowanie i leasing").
   Tylko desktop (>=721px); szerokości kolumn (ikona 197 / info 406 / separator
   przy 700px) i łamanie disclaimera na 7 linii przy 1920 — bez zmian. */
@media (min-width: 721px) {
	/* mniejszy pionowy padding karty (32 -> 20), poziomy bez zmian */
	.wf-finance { padding: 20px 32px; }
	/* ikona niższa: pudełko 197px szerokości zostaje (pozycja separatora),
	   SVG skaluje się do 132px wysokości i trzyma lewej krawędzi */
	.wf-finance__icon { height: 132px; object-fit: contain; object-position: left center; }
	/* ciaśniejsza kolumna info (gap 24 -> 12) */
	.wf-finance__info { gap: 12px; }
	/* mniejszy lead „pakiet już od" (20 -> 18), nadal 2 linie przy max-width 265px */
	.wf-finance__info .wf-h4 { font-size: 18px; line-height: 1.35; }
	/* cena 36 -> 30, mniejszy odstęp nad ceną */
	.wf-finance__price { font-size: 30px; margin-top: 4px; }
	.wf-finance__unit { font-size: 17px; }
	/* disclaimer: ciaśniejsza interlinia (liczba linii zależy od szerokości,
	   więc 7 linii przy 1920 zostaje) */
	.wf-finance__legal { line-height: 1.45; }
}

/* p3b-care — poprawki3 pkt 5 (Wspolpraca/desktop): sekcja WallFlow Care
   przebudowana na 3 kolumny [tekst | karta Care Plus | karta Care Plus
   Extended], zeby wyraznie zmalala wysokosciowo. Tylko >1080px — na
   tablecie/mobile (<=1080) obowiazuja dotychczasowe reguly (head nad
   kartami, karty w 1 kolumnie). Bez zmian HTML: .wf-care__cards dostaje
   display:contents, wiec obie karty staja sie itemami grida kontenera,
   a istniejace reguly mobilne .wf-care__cards nadal dzialaja. */
@media (min-width: 1081px) {
	.wf-care { padding: 56px 0; }
	.wf-care .wf-container { display: grid; grid-template-columns: 1fr 1.1fr 1.1fr; gap: 32px; align-items: stretch; }
	.wf-care__head { max-width: none; margin-bottom: 0; gap: 20px; align-self: center; }
	.wf-care__head .wf-badge { margin-bottom: 0; }
	.wf-care__head .wf-h1 { font-size: 52px; } /* 80px szlo do pelnej szerokosci; w waskiej kolumnie 52px */
	.wf-care__head .wf-h3 { font-size: 22px; }
	.wf-care__desc { font-size: 15px; }
	.wf-care__cards { display: contents; }
	.wf-carecard { min-height: 0; padding: 28px; gap: 18px; }
	.wf-carecard__head { gap: 16px; }
	.wf-carecard__head img { width: 48px; height: 48px; }
	.wf-carecard__head .wf-h3 { font-size: 26px; }
	.wf-care__label { font-size: 17px; }
	.wf-care__list { font-size: 15px; margin-top: -6px; padding-left: 20px; }
	.wf-care__price { min-height: 96px; padding: 16px 24px; box-shadow: 12px 12px 20px rgba(109, 66, 216, 0.3); }
	.wf-care__price strong { font-size: 28px; }
	/* dwa warianty cen w wezszej karcie Extended: pod soba zamiast obok */
	.wf-care__prices { flex-direction: column; gap: 14px; }
	.wf-care__price--box { gap: 16px; padding: 14px 20px; }
	.wf-care__price--box img { width: 44px; height: 55px; }
	.wf-care__price--box .wf-small { font-size: 15px; }
	.wf-care__price--box .wf-grey { font-size: 13px; }
}

/* p3b-quickhelp — Serwis: CTA "Potrzebujesz szybkiej pomocy serwisowej?" (poprawki3 pkt 6)
   Karta z obwódką: border/radius/glow dziedziczone z .wf-endcta--card (blok T4, min-width 721px).
   Układ 2-kol.: tekst po lewej (.wf-endcta__left), przyciski w kolumnie po prawej
   (.wf-endcta__btns--col), wyśrodkowane pionowo (align-items:center z reguły bazowej __inner). */
@media (min-width: 721px) {
	.wf-endcta--serwis .wf-endcta__left { flex: 1 1 auto; gap: 20px; }
	.wf-endcta--serwis .wf-endcta__btns--col { flex: 0 0 auto; width: auto; min-width: 300px; gap: 16px; }
}
@media (max-width: 720px) {
	/* mobile: kolumna jak dotąd; gap 32px zamiast 48px z reguły --card, przyciski full-width */
	.wf-endcta--serwis .wf-endcta__inner { gap: 32px; }
	.wf-endcta--serwis .wf-endcta__btns--col { min-width: 0; width: 100%; }
}

/* p3b-conowego: poprawki3 Drukarki/Desktop — sekcja „Co nowego" */
/* (1) Prostokąt wokół maszyny: drop-shadow na kryjącym PNG rysował fioletową
   poświatę wokół całego kadru, a poświata wgrana w plik dochodzi do jego
   krawędzi. Usuwamy filtr i wygaszamy brzegi kadru maską gradientową —
   maszyna zlewa się z czernią sekcji bez twardych linii. */
.wf-whatsnew__machine img {
	filter: none;
	-webkit-mask-image:
		linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%),
		linear-gradient(to bottom, #000 0, #000 91%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%),
		linear-gradient(to bottom, #000 0, #000 91%, transparent 100%);
	mask-composite: intersect;
}
/* (3) MacBook 1366–1512: 7 tabów łamało się do 2. wiersza. Na desktopie taby
   zawsze w JEDNYM rzędzie — równy podział szerokości kolumny, ciaśniejszy
   padding i gap, min-width zdjęte (etykiety i tak łamią się przez <br>). */
@media (min-width: 1024px) {
	.wf-tabs { flex-wrap: nowrap; gap: 6px; width: 100%; }
	.wf-tab { flex: 1 1 0; width: auto; min-width: 0; padding: 12px 4px; }
}

/* p3b-post: poprawki3 pkt 7 — kolor tekstu przycisków w treści wpisów bloga.
   Regula .wf-post__content a { color: var(--roz); underline } (l. ~2409) ma
   wyzsza specyficznosc niz .wf-btn i nadpisywala bialy tekst gradientowych
   przyciskow (np. "SPRAWDZ MOZLIWOSCI!") — ciemny/rozowy tekst na fioletowym
   gradiencie. Bialy we wszystkich stanach + bez podkreslenia. */
.wf-post__content a.wf-btn,
.wf-post__content a.wf-btn:link,
.wf-post__content a.wf-btn:visited,
.wf-post__content a.wf-btn:hover,
.wf-post__content a.wf-btn:focus,
.wf-post__content a.wf-btn:active {
	color: var(--white);
	text-decoration: none;
}
/* wariant outline w treści wpisu (gdyby wystąpił) — też biały */
.wf-post__content a.wf-btn--outline,
.wf-post__content a.wf-btn--outline:visited,
.wf-post__content a.wf-btn--outline:hover {
	color: var(--white);
}

/* ============================================================
   p3b-serwishero — poprawki3 pkt 6 „Serwis/desktop": poprawa
   wyświetlania zdjęcia w hero. Referencja (poprawki3.pdf s. 8):
   hero jako wyodrębniona karta z marginesem bocznym i zaokrąglonymi
   rogami, zdjęcie po prawej łagodnie przechodzi gradientem w czerń
   w lewo (tekst w pełni czytelny na czerni), badge SERWIS nad tytułem.
   Tylko desktop/tablet (≥721px) — mobile bez zmian.
   ============================================================ */
@media (min-width: 721px) {
	.wf-shero .wf-phero__stage {
		width: min(calc(100% - 2 * clamp(20px, 3.4vw, 64px)), calc(1792 * var(--u)));
		margin: clamp(16px, 1.7vw, 32px) auto 0;
		border-radius: calc(28 * var(--u));
		overflow: hidden;
		background-color: #000;
		background-size: auto 100%;
		background-position: right top;
		background-repeat: no-repeat;
		position: relative;
	}
	/* Łagodne wtopienie zdjęcia w czerń: mocno po lewej (pod tekstem),
	   delikatnie przy dole i górze karty — jak na referencji. Nadpisuje
	   zarówno gradient z bloku 721px (linia ~1695), jak i background:none
	   z bloku T19 ≥1024px (linia ~3856) — ta sama specyficzność, dalej w pliku. */
	.wf-shero .wf-phero__stage::after {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		border-radius: inherit;
		background:
			linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.94) 30%, rgba(0, 0, 0, 0.55) 52%, rgba(0, 0, 0, 0) 76%),
			linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 24%),
			linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 16%);
	}
}

/* p3b-checklista — porownanie „WallFlow | Inne firmy" w wierszach checklisty (poprawki3 pkt 4).
   Fioletowe naglowki kolumn raz nad cala checklista (w naglowku panelu, jak w referencji);
   w kazdym wierszu otwartego akordeonu: etykieta | kolumna WallFlow (zielony check
   lub wartosc tekstowa z formatu „etykieta|wartosc") | kolumna „Inne firmy"
   (puste kolko — klik zaznacza/odznacza, stan tylko w pamieci strony). */
.wf-checkbox-panel__cols.wf-chk-heads { gap: 8px; }
/* Tekstowe zakładki kolumn wg Figmy 721:2337 — „WallFlow" fiolet na subtelnym
   ciemnofioletowym tle, „Inne firmy" czysty tekst; bez wypełnionych pigułek. */
.wf-chk-heads__cell {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	flex: 0 0 auto; width: 104px; min-height: 36px; padding: 4px 6px;
	border-radius: 6px; background: none; color: var(--white);
	font-size: 14px; font-weight: 600; line-height: 1.2; text-align: center;
}
.wf-chk-heads__cell--wf { color: var(--roz); background: rgba(109, 66, 216, 0.16); }
.wf-checkbox-panel__head { padding-right: 21px; }
.wf-checklist--cmp li { align-items: center; }
.wf-cmp__label { flex: 1 1 auto; min-width: 0; }
.wf-cmp__cell { flex: 0 0 auto; width: 104px; display: flex; align-items: center; justify-content: center; }
.wf-cmp__wf em { font-style: normal; font-weight: 600; font-size: 13px; text-align: center; }
.wf-cmp__other { background: none; border: 0; padding: 2px 0; margin: 0; cursor: pointer; }
.wf-cmp__other::before {
	content: ""; display: flex; align-items: center; justify-content: center;
	width: 16px; height: 16px; box-sizing: border-box;
	border: 2px solid rgba(255, 255, 255, 0.65); border-radius: 50%;
	font-size: 10px; line-height: 1; color: var(--white);
	transition: border-color 0.15s, background 0.15s;
}
.wf-cmp__other:hover::before { border-color: var(--white); }
.wf-cmp__other.is-on::before { content: "\2713"; background: #22c55e; border-color: #22c55e; }
@media (min-width: 721px) {
	.wf-checkbox-panel__head { padding-right: calc(33 * var(--u)); }
}
@media (max-width: 720px) {
	.wf-checkbox-panel__head { justify-content: flex-end; row-gap: 10px; padding-right: 21px; }
	.wf-checkbox-panel__head .wf-h4 { flex: 1 1 100%; }
	.wf-chk-heads__cell, .wf-cmp__cell { width: 74px; }
	.wf-chk-heads__cell { font-size: 11px; min-height: 30px; padding: 3px 4px; }
	.wf-cmp__label { overflow-wrap: anywhere; }
	.wf-cmp__wf em { font-size: 12px; }
}


/* p3b-mobile-home */
/* ============================================================
   poprawki3 (PDF „MOBILE - Strona Glowna"): odkrycie sekcji
   stats / start / reviews / gallery / form na mobile home
   + kompaktowe liczniki 3-w-rzedzie miedzy hero a „7 etapow".
   Desktop bez zmian - calosc w @media (max-width: 720px).
   ============================================================ */
@media (max-width: 720px) {
	/* Odkrycie sekcji ukrytych dotad na mobile home (nadpisuje display:none z linii ~2944) */
	.home .wf-stats,
	.home .wf-form,
	.home .wf-start,
	.home .wf-reviews,
	.home .wf-gallery,
	.page-template-page-home .wf-stats,
	.page-template-page-home .wf-form,
	.page-template-page-home .wf-start,
	.page-template-page-home .wf-reviews,
	.page-template-page-home .wf-gallery { display: block; }

	/* --- 1. Liczniki (490:547): male, 3 boksy w JEDNYM rzedzie --- */
	.wf-stats { padding: 32px 0; }
	/* Klient: „musza byc male" - naglowek sekcji zabiera za duzo miejsca na 390px */
	.wf-stats__head { display: none; }
	.wf-stats__cards {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
		align-items: stretch;
	}
	.wf-stat {
		min-height: 0;
		padding: 14px 6px;
		gap: 4px;
		justify-content: flex-start;
	}
	.wf-stat__top { gap: 2px; }
	.wf-stat__num { font-size: 26px; }
	.wf-stat__label { font-size: 10px; line-height: 1.35; }
	/* Dolny, dluzszy opis nie miesci sie w malym boksie */
	.wf-stat__desc { display: none; }

	/* --- 2a. „Jak zaczac" (298:2243): kroki w kolumnie, wysrodkowane --- */
	.wf-start__row { flex-direction: column; align-items: center; gap: 40px; margin-bottom: 40px; }
	.wf-start__item { width: 100%; max-width: 340px; gap: 16px; }
	.wf-start__item h3 { min-height: 0; }
	.wf-start__no { font-size: 30px; }

	/* --- 2b. Opinie: karuzela ma juz globalne reguly mobilne (karta 100%,
	   strzalki pod viewportem) - tu tylko drobny szlif odstepow --- */
	.wf-reviews .wf-sec-head { margin-bottom: 32px; }

	/* --- 2c. Galeria realizacji (342:524): kafle 2 kolumny, proporcje przez aspect-ratio --- */
	.wf-gallery__head { max-width: none; align-items: center; text-align: center; gap: 24px; margin-bottom: 32px; }
	.wf-gallery__grid { gap: 32px; margin-bottom: 40px; }
	.wf-gallery__left { align-items: center; text-align: center; gap: 24px; }
	.wf-gallery__metrics { width: 100%; justify-content: space-between; gap: 12px; }
	.wf-metric { flex: 1 1 0; min-width: 0; }
	.wf-metric__num { font-size: 22px; }
	.wf-metric__label { font-size: 12px; line-height: 1.4; }
	.wf-gallery__imgs { gap: 12px; }
	.wf-gallery__cells { gap: 12px; }
	.wf-gallery__tall { height: auto; aspect-ratio: 344 / 300; object-fit: cover; }
	.wf-gallery__row3 { grid-template-columns: 1fr 1fr; gap: 12px; }
	.wf-gallery__row2 { grid-template-columns: 1fr 1fr; gap: 12px; }
	.wf-gallery__row3 img,
	.wf-gallery__row2 img { height: auto; aspect-ratio: 4 / 3; }
	/* 3. kafel rzedu trojkowego na pelna szerokosc - bez pustej dziury w siatce */
	.wf-gallery__row3 img:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }

	/* --- 2d. Formularz: pola juz 1-kolumnowo globalnie; szlif naglowka i odstepow --- */
	.wf-form .wf-sec-head--left { align-items: flex-start; text-align: left; }
	.wf-form__grid { gap: 32px; }
	.wf-form__left { gap: 24px; }
	.wf-form__points { gap: 20px; }
	.wf-form__card form { gap: 24px; }
}

/* p3b-mobile-wspolpraca */
@media (max-width: 720px) {
	/* (1) "Dla kogo jest WallFlow" - kompaktowa siatka 2 kol. x 3 wiersze
	   (bylo: 1 kolumna, zdjecia 200px -> sekcja ~2800px wysokosci) */
	.wf-who__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.wf-whocard { padding: 10px 10px 14px; gap: 8px; }
	.wf-whocard__img img { height: 84px; border-radius: 8px; }
	.wf-whocard > .wf-h4 { font-size: 14px; font-weight: 600; line-height: 1.25; }
	.wf-whocard > .wf-small { font-size: 11px; line-height: 1.4; }

	/* (2) Formy finansowania - poziomy slider scroll-snap zamiast 1 kolumny */
	.wf-fin4__grid {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 12px;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.wf-fin4__grid::-webkit-scrollbar { display: none; height: 0; }
	.wf-fin4__grid > .wf-fincard {
		flex: 0 0 86%;
		min-width: 0;
		scroll-snap-align: center;
		padding: 24px 20px;
	}
}

/* p3b-mobile-drukarki: poprawki3 „MOBILE → Drukarki" — wyłącznie ≤720px */
@media (max-width: 720px) {
	/* (1) Leasing w hero: delikatny box — napis nie zlewa się z tłem maszyn */
	.wf-dhero .wf-phero__leasing {
		width: auto;
		max-width: 100%;
		align-self: flex-start;
		padding: 10px 14px;
		background: rgba(0, 0, 0, .55);
		border: 1px solid rgba(169, 119, 232, .4);
		border-radius: 14px;
	}

	/* (2) Pas USP pod hero: 3 kolumny × 2 rzędy, mniejsze ikony/fonty — sekcja wyraźnie niższa */
	.wf-dhero .wf-usps--tall .wf-usps__inner {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
		padding-top: 10px;
		padding-bottom: 14px;
	}
	.wf-dhero .wf-usps--tall .wf-usp--v,
	.wf-dhero .wf-usps--tall .wf-usp--v + .wf-usp--v {
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		text-align: center;
		gap: 6px;
		min-height: 0;
		padding: 10px 4px 8px;
	}
	.wf-dhero .wf-usps--tall .wf-usp--v .wf-usp__icon { width: 32px; height: 32px; }
	.wf-dhero .wf-usps--tall .wf-usp--v .wf-usp__txt { align-items: center; gap: 2px; }
	.wf-dhero .wf-usps--tall .wf-usp--v .wf-usp__txt strong { font-size: 11px; line-height: 1.25; }
	.wf-dhero .wf-usps--tall .wf-usp--v .wf-usp__txt span { font-size: 10px; line-height: 1.2; }

	/* (3) Karty modeli drukarek jako poziomy slider scroll-snap (czysty CSS) */
	.wf-models__grid {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 6px;
	}
	.wf-models__grid::-webkit-scrollbar { display: none; }
	.wf-models__grid .wf-model { flex: 0 0 86%; scroll-snap-align: center; }

	/* (4) Zwarta karta „Finansowanie i leasing": bez wielkiego kalkulatora, mniejsze fonty */
	.wf-finance { margin-top: 36px; padding: 18px 16px; gap: 12px; }
	.wf-finance__icon { display: none; }
	.wf-finance__info { gap: 10px; }
	.wf-finance .wf-h3 { font-size: 19px; }
	.wf-finance__info > div p { font-size: 14px; line-height: 1.45; }
	.wf-finance__info .wf-h4 { max-width: none; font-size: 16px; line-height: 1.35; }
	.wf-finance__price { font-size: 24px; margin-top: 2px; }
	.wf-finance__unit { font-size: 14px; }
	.wf-finance__legal { font-size: 12px; line-height: 1.4; }

	/* (5) „Na czym drukować": mniejsze kafle w 3 kolumnach, podpisy jednolite i równe;
	   „i wiele więcej" jako pełnej szerokości pasek z tym samym krojem (bez „krzywej" linii) */
	.wf-materials__grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
	.wf-material { height: 100px; padding: 10px 6px; border-radius: 12px; align-items: flex-end; justify-content: center; }
	.wf-material span { font-size: 12px; font-weight: 500; line-height: 1.25; text-align: center; }
	.wf-material--more { grid-column: 1 / -1; height: 52px; align-items: center; }
	/* tagi pod siatką („Dekoracje wnętrz" itd.) — równe chipy, jeden rozmiar, wyśrodkowane */
	.wf-materials__tags { gap: 8px; margin-top: 24px; justify-content: center; align-items: center; }
	.wf-materials__tags .wf-tag {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 5px 12px;
		font-size: 11px;
		line-height: 1.3;
		text-align: center;
	}

	/* (6a) „Co nowego": ikona panelu bez odznaczającego się kafla —
	   przezroczyste tło + neonowy glow jak w miniaturkach tabów */
	.wf-tabpanel { padding: 20px 16px; gap: 16px; }
	.wf-tabpanel__img { flex: 0 0 auto; }
	.wf-tabpanel__icon {
		width: 100%;
		aspect-ratio: auto;
		padding: 12px 0 2px;
		background: transparent;
		border-radius: 0;
	}
	.wf-tabpanel__icon img { width: 56px; height: 56px; filter: drop-shadow(0 0 16px rgba(169, 119, 232, .95)); }
}

/* p3b-btn-b */
#filary, #filar-1, #filar-2, #filar-3, #wpisy, #kurs { scroll-margin-top: 96px; }

/* p3b-kb — poprawki3 pkt 7 „Baza wiedzy/desktop" */
/* (7.1) chipy „Jeśli zastanawiasz się:" — fioletowa ramka jak w projekcie */
.wf-kb-chip { border-color: var(--roz); }

/* (7.2) link „Zobacz wszystkie wpisy →" pod siatką najnowszych wpisów */
.wf-kb-latest__all {
	align-self: flex-end;
	font-size: 16px;
	font-weight: 500;
	color: var(--roz);
	text-decoration: none;
	transition: color 0.2s;
}
.wf-kb-latest__all:hover { color: var(--white); }

/* (7.2) /blog/ — listing wszystkich wpisów w kartach bazy wiedzy (home.php) */
.wf-blog .wf-sec-head { margin-bottom: 48px; }
.wf-blog .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.wf-blog .navigation.pagination { display: flex; justify-content: center; margin-top: 48px; }
.wf-blog .nav-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.wf-blog .nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--stroke);
	border-radius: 100px;
	color: var(--white);
	font-size: 14px;
	text-decoration: none;
}
.wf-blog .nav-links .page-numbers.current,
.wf-blog .nav-links a.page-numbers:hover { border-color: var(--roz); color: var(--roz); }
.wf-blog__back { margin-top: 40px; text-align: center; }
.wf-blog__back a { color: var(--roz); }

/* (7.3) CTA „Gromadź wiedzę…": fioletowa rakieta (kb-rocket-100.svg);
   na mobile kółko czarne z ramką roz zamiast granatowego wypełnienia */
@media (max-width: 720px) {
	.wf-kb-cta .wf-noanswer__icon { background: var(--black); border: 1px solid var(--roz); }
}

/* (7.4) sekcja kursu: badge+H2 przeniesione do lewej kolumny (góra tekstu = góra playera);
   rytm odstępów: badge→32→H2→32→opis→64→cechy */
.wf-course__inner .wf-course__left { gap: 32px; }
.wf-course__inner .wf-course__feats { margin-top: 32px; }

/* (7.6) miniatury wpisów (bannery z tekstem po lewej) — kadrowanie od LEWEJ,
   żeby cover nie ucinał tekstu na grafice */
.wf-kb-post__img { background-position: left center; }


/* ============================================================
   p3b-kontakt — poprawki3 pkt 8 „Kontakt/Desktop":
   dane kontaktowe wyżej (mniejsza luka po lewej kolumnie)
   + wyeksponowany, klikalny numer telefonu.
   Desktop ≥721px; mobile bez zmian (baza ~1806 daje już 26px --roz).
   ============================================================ */
@media (min-width: 721px) {
	/* Luka nad danymi: było margin-top 180*u (linia ~2493) — zmniejszone. */
	.wf-contact__data { margin-top: calc(64 * var(--u)); gap: calc(14 * var(--u)); }
	.wf-contact__data .wf-h4 { margin-bottom: calc(8 * var(--u)); }
	/* Telefon: duży, bold, w kolorze --roz (nadpisuje 18px/white z linii ~4519). */
	.wf-contact__data a[href^="tel:"] {
		font-size: calc(34 * var(--u));
		font-weight: 700;
		line-height: 1.2;
		color: var(--roz);
	}
	.wf-contact__data a[href^="tel:"] img { width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
	.wf-contact__data a[href^="tel:"]:hover { filter: brightness(1.18); }
}

/* p3c-kb-hero: nowa grafika hero Bazy wiedzy (świecąca księga, pozioma 16:9)
   zamiast dawnej pionowej drukarki — na mobile stara maska + 250px gasiła
   prawie cały glow (ciekawa część grafiki jest w jej środku/górze),
   więc poszerzamy obraz, podbijamy opacity i skracamy gradient maski. */
@media (max-width: 720px) {
	.wf-kb-hero__img {
		width: min(84vw, 360px);
		opacity: 0.5;
		-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 32%);
		mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 32%);
	}
}

/* p4-03-onas-odstep-gradient */
/* O nas: ~36px CZARNEGO odstępu między dolną krawędzią karty hero
   (.wf-about-card) a linią gradientową sekcji „Historia" (.wf-section::before).
   Dotąd dół karty = góra sekcji (0px). padding-bottom na sekcji hero,
   żeby nie rozciągać samej karty. Desktop only — mobile bez zmian. */
@media (min-width: 721px) {
	.wf-abhero { padding-bottom: calc(36 * var(--u)); }
}

/* p4-04-onas-ramka-endcta */
/* O nas: karta CTA „Chcesz poznać nas bliżej?" (.wf-noanswer.wf-team__cta;
   klasa wf-team__cta występuje tylko na page-o-nas, więc zmiana nie dotyka
   kart .wf-noanswer na /kontakt/ i /baza-wiedzy/) — wg Figmy ramka fioletowa
   jak we wzorcu „Co nas napędza?" (.wf-drive__box: border-color var(--roz),
   ~4626). Bazowy .wf-noanswer (~1820) wygasza ją do var(--stroke).
   Tylko kolor ramki; desktop ≥721px jak wzorzec — mobile bez zmian. */
@media (min-width: 721px) {
	.wf-noanswer.wf-team__cta { border-color: var(--roz); }
}

/* p4-05-onas-ramka-pdf-btn */
/* O nas: przycisk „Pobierz listę w PDF" w sekcji poradnika (.wf-guide) —
   obwódka w akcencie --roz jak w Figmie (721:2337) i spójnie z resztą
   fioletowych ramek na stronie (chipy, wiersze checklisty). Ten sam wzorzec
   co na /serwis/ (.wf-services .wf-btn--outline): zmiana TYLKO koloru,
   grubość/styl z bazowego .wf-btn--outline (1px solid) bez zmian.
   .wf-guide występuje wyłącznie na /o-nas/, więc inne strony bez zmian. */
.wf-guide .wf-btn--outline { border-color: var(--roz); }

/* p4-02-drukarki-form-drukarka: /drukarki/ — sekcja formularza: zdjęcie drukarki
   (lewa kolumna) powiększone i dociągnięte do dolnej linii karty formularza
   (klient: „sporo pustej przestrzeni"). Lewa kolumna rozciąga się do wysokości
   karty, obrazek wypełnia pozostałą wysokość; object-fit:contain zachowuje
   proporcje (cała maszyna z kółkami widoczna), kotwica u dołu. Tylko desktop
   dwukolumnowy (>1280px); mobile/tablet bez zmian (≤720 decor ukryty). */
@media (min-width: 1281px) {
	.page-template-page-drukarki .wf-form__left { align-self: stretch; }
	.page-template-page-drukarki .wf-form__decor {
		width: 100%;
		flex: 1 1 auto;
		min-height: 0;
		margin-top: auto;
		object-fit: contain;
		object-position: center bottom;
	}
}

/* p4-09-serwis-odstep-gradient */
/* Serwis: ~36px CZARNEGO odstępu między dolną krawędzią boksu
   „Serwisujemy drukarki ścienne różnych producentów" (.wf-shero .wf-servicecard)
   a linią gradientową następnej sekcji (.wf-services / .wf-section::before).
   Dotąd dół boksu = góra sekcji (gap 0px). padding-bottom na sekcji hero
   (tło body = czarne), żeby nie rozciągać samego boksu. Wzorzec jak p4-03
   na /o-nas/. .wf-shero występuje tylko na page-serwis.php.
   Desktop only — mobile (≤720px) bez zmian. */
@media (min-width: 721px) {
	.wf-phero.wf-shero { padding-bottom: calc(36 * var(--u)); }
}

/* p4-01-home-yt-kadr */
/* Strona główna, sekcja YouTube: miniatura podcastu (yt_img) była kadrowana
   object-fit:cover w boksie o sztywnej wysokości 447px — przy szerokościach
   okna < 1920 prawa kolumna grida (1fr przy stałych 529px + 100px gap) robiła
   się węższa niż kadr 16:9 i cover ucinał tekst z boków („ZTUKA DRUKU",
   „oczątki w druku ściennym"; na mobile aspect 1695/1080 ucinał ±75px kadru).
   Fix jak kafle „Bazy wiedzy" (cover + center), ale boks trzyma proporcje
   16:9 samego kadru YT, więc cover nie ma czego ucinać przy ŻADNEJ
   szerokości — cały tekst stopklatki widoczny, obraz nadal wypełnia kontener
   (bez pasów), zaokrąglenia i przycisk play bez zmian; iframe po kliknięciu
   (position:absolute inset:0) dostaje dokładnie 16:9, więc film osadza się
   bez czarnych pasów. Przy 1920 wysokość 771px → ~434px (było 447px). */
.wf-yt__player { height: auto; aspect-ratio: 16 / 9; }
.wf-yt__player img { height: 100%; object-fit: cover; object-position: center; }

/* p4-08-wspolpraca-wcta-wysokosc */
/* /wspolpraca/, końcowa karta CTA (.wf-wcta__card, Figma 709:1666).
   Przyczyna pustki: .wf-wcta__btns miało flex:0 0 auto + flex-wrap:nowrap
   (rząd 2 przycisków ~645px nigdy się nie kurczył), więc przy oknach
   < ~1500px flex ściskał .wf-wcta__intro poniżej 500px — tytuł łamał się
   na 4 linie, head rósł do ~300px, a wycentrowane przyciski zostawiały
   ~170px czarnej pustki nad/pod sobą (karta 580-606px zamiast ~450px).
   Fix: ≥1281px intro nie jest ściskane (tytuł max 2 linie), a przyciski
   przy braku miejsca zawijają się jeden pod drugim do prawej (auto
   dopasowanie do dłuższych tekstów EN/FR); 721-1280px przyciski w kolumnie.
   Dolny padding karty = górny (48px). Mobile ≤720px bez zmian. */
@media (min-width: 721px) {
	.wf-wcta__card { padding: 48px 56px; }
}
@media (min-width: 1281px) {
	.wf-wcta__intro { flex: 0 0 auto; }
	.wf-wcta__btns { flex: 0 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
}
@media (min-width: 721px) and (max-width: 1280px) {
	.wf-wcta__head { flex-wrap: wrap; }
	.wf-wcta__btns { flex-direction: column; align-items: stretch; }
	.wf-wcta__btns .wf-btn { justify-content: center; }
}

/* p4-07-wspolpraca-kafle-strzalki */
/* /wspolpraca/ hero: kafle-linki pod zdjęciem (.wf-herocards). Blok T9 przy
   ≥1281px daje kaflom hug-content (kolumny auto + space-between), ale blok
   tekstu ma flex:0 0 auto (shrink 0), a karta min-width:0 — gdy suma
   naturalnych szerokości 3 kafli przekracza kontener (PL/EN ≤ ~1500px,
   FR nawet przy 1920), grid ściska karty poniżej szerokości treści
   i niekurczliwa zawartość wypycha strzałkę poza prawą krawędź ramki.
   Fix: tekst może się kurczyć i zawijać (shrink 1 + min-width:0), ikona
   i strzałka pozostają sztywne — strzałka zawsze w całości w ramce,
   ~24px od prawej krawędzi (padding karty), jak w kaflu 1. Przy
   szerokościach, gdzie kafle mieszczą się naturalnie (PL/EN 1600–1920),
   nic się nie zmienia — shrink działa dopiero przy niedoborze miejsca.
   Zakres jak w T9 (≥1281px); 721–1280px to układ 1-kolumnowy (bez
   problemu), mobile ≤720px ma własny układ — nietknięty. */
@media (min-width: 1281px) {
	.wf-whero .wf-herocard__txt {
		flex: 0 1 auto;
		min-width: 0;
		overflow-wrap: break-word;
	}
	.wf-whero .wf-herocard__icon,
	.wf-whero .wf-herocard__arrow {
		flex-shrink: 0;
	}
}
/* p4-07 c.d.: w ściśniętym zakresie 1281–1500px stały odstęp tekst→strzałka
   64px (16px gap + 48px margin z T9) zabiera tekstowi za dużo miejsca —
   zmniejszamy margines do 16px (odstęp 32px), dzięki czemu np. tytuł EN
   „Implementation" (162.8px przy h4 20px) mieści się w linii bez cięcia
   w środku słowa, a kafel 1 przy 1440px renderuje się jak przed zmianą
   (tekst 201px > naturalne 185px — zero zawijania). Przy >1500px margines
   48px zostaje bez zmian (PL/EN mieszczą się tam naturalnie). */
@media (min-width: 1281px) and (max-width: 1500px) {
	.wf-whero .wf-herocard__arrow { margin-left: 16px; }
	/* Backstop dla najwęższych okien ~1281–1350px (tylko EN): gdyby słowo
	   nadal nie mieściło się w linii, łam z poprawnym dywizem zamiast
	   twardego cięcia przez overflow-wrap */
	.wf-whero .wf-herocard__txt:lang(en) { -webkit-hyphens: auto; hyphens: auto; }
}

/* p4-10-serwis-diag-tlo */
/* /serwis/ „Diagnostyka, naprawa i części" (.wf-diag): tło „rozjechane" —
   przywrócenie kadru i wtopienia z Figmy (767:5496). Tło to gotowy kolaż
   fig-fab77772df.png (2474x1318) z MIĘKKIMI krawędziami wypalonymi w pliku
   (lewa ~1/5 pliku to czysta czerń). Dwa źródła problemu na desktopie:
   1) .wf-diag::before (linia ~1750) podmienia background globalnej linii
      neonowej .wf-section::before, ale dziedziczy jej height:110px — lewy
      gradient przyciemniający był tylko 110px paskiem u góry, kończył się
      twardą poziomą krawędzią na kolażu, a jasna plansza CMYK wjeżdżała
      pod tekst bez żadnego ściemnienia;
   2) kadr „auto 100% / right center" stawiał kolaż ~100px za bardzo w lewo
      względem makiety i nie docinał prawej strony (w Figmie prawa szafa
      jest lekko przycięta krawędzią sekcji, kompozycja „dolega" do prawej).
   Fix (tylko ≥721px — mobile ma własne reguły mobile-fix z inset:0
   i mocniejszym overlayem, zostają nietknięte):
   - auto 102% + kotwica do PRAWEJ z ujemnym offsetem skalowanym --u:
     przy 1920 kolaż zaczyna się ~44% szerokości (plansza CMYK tuż za
     kolumną tekstu 628px), prawa krawędź docięta ~114px jak w makiecie;
     >1920 offset stały (kolaż klei się do prawej, lewa strona czernią),
     <1920 offset maleje z --u; pion 102% docina po ~9px góra/dół
     (obie krawędzie pliku i tak wygasają/są kadrowane jak w Figmie);
   - ::before inset:0 + height:auto + gradient L→R: pełna czerń pod kolumną
     tekstu, płynne wygaszenie do ~62% szerokości — miękko dotapia lewy
     skraj kolażu (strzykawka/CMYK) i gwarantuje zero twardych krawędzi
     także na 2560, gdzie lewa krawędź pliku ląduje w kadrze. */
@media (min-width: 721px) {
	.wf-diag {
		background-size: auto 102%;
		background-position: right calc(-114 * var(--u)) center;
	}
	.wf-diag::before {
		inset: 0;
		height: auto;
		background: linear-gradient(90deg,
			#000 0%,
			rgba(0, 0, 0, .94) 30%,
			rgba(0, 0, 0, .55) 40%,
			rgba(0, 0, 0, .18) 50%,
			rgba(0, 0, 0, 0) 62%);
	}
}

/* p5-01-stopka-mobile */
/* Dolna część stopki na mobile wg makiety klienta (15.png):
   „© 2026 WallFlow" (szary, wycentrowany) → duży odstęp → „Polityka
   prywatności" (biała, wycentrowana) → duży odstęp → JEDEN rząd trzech
   regulaminów w 3 równych kolumnach (białe, wycentrowane, łamią się na
   2 linie). DOM z footer.php ma już właściwą kolejność (p.copyright,
   potem nav.wf-footer__legal z privacy jako pierwszym linkiem), więc
   wystarczy CSS: nav staje się gridem 3 kolumn, a privacy zajmuje cały
   pierwszy wiersz. Nadpisuje wcześniejsze mobile-reguły („stopka mini"
   ~l.2966 ukrywała regulaminy; p3b-footer ~l.5365 dawał gap 6px).
   Desktop (>=721px) nietknięty. */
@media (max-width: 720px) {
	/* na makiecie nad copyrightem nie ma linii separatora */
	.wf-footer__bottom { border-top: 0; }
	.wf-footer__bottom-inner {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 40px;
		text-align: center;
		padding-top: 24px;
		padding-bottom: 44px;
		font-size: 18px;
		line-height: 1.4;
	}
	/* przywrócenie linków regulaminów ukrytych przez „stopkę mini" */
	.wf-footer__legal a { display: block; }
	.wf-footer__legal {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 44px 8px;
		/* szerzej niż content-box (jak na makiecie, gdzie teksty sięgają
		   bliżej krawędzi): kolumna ~116px pomieści „WallFlow Care" (113px
		   @16px Poppins) w jednej linii — łamanie tylko po „Regulamin” */
		width: calc(100% + 16px);
		margin-left: -8px;
		margin-right: -8px;
		align-items: start;
		justify-items: center;
	}
	/* 16px @390 (nie 18px, bo „WallFlow Care" ~128px @18 nie mieści się
	   w 1/3 szerokości i łamałoby się na 3 linie zamiast 2 z makiety);
	   skala vw utrzymuje łamanie „Regulamin” / reszta także na 375/360/320 */
	.wf-footer__legal a {
		padding: 0;
		font-size: clamp(12px, 4.1vw, 16px);
		line-height: 1.4;
		color: var(--white);
		text-align: center;
	}
	/* „Polityka prywatności" na całą szerokość pierwszego wiersza grida */
	.wf-footer__legal a:first-child { grid-column: 1 / -1; font-size: 18px; }
}

/* p5-02-menu-jezyki — przełącznik PL | EN | FR z flagami w nagłówku menu mobilnego.
   Markup: wf_language_switcher() wstawiony w .wf-mobilemenu__top (header.php) między
   logo a przyciskiem zamknięcia; poniżej nadpisania topbarowych stylów .wf-langs*.
   Makieta 16.png: aktywny język --roz, pozostałe biało-szare, pionowe kreski-separatory;
   klient dodatkowo prosi o małe flagi przed kodami. */
.wf-mobilemenu__top .wf-langs {
	position: static;
	transform: none;
	flex: 1 1 auto;
	min-width: 0;
	justify-content: center;
	gap: 0;
	margin: 0 6px;
}
.wf-mobilemenu__top .wf-langs__item {
	padding: 0 11px;
	border-radius: 0;
	gap: 7px;
	font-size: 15px;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.78);
	opacity: 1;
	transition: color 0.2s;
}
.wf-mobilemenu__top .wf-langs__item + .wf-langs__item { border-left: 1px solid rgba(255, 255, 255, 0.3); }
.wf-mobilemenu__top .wf-langs__item:hover { color: var(--white); }
.wf-mobilemenu__top .wf-langs__item.is-active { background: none; color: var(--roz); }
.wf-mobilemenu__top .wf-langs__flag { width: 17px; height: 11.9px; }
/* Węższe ekrany (<390: iPhone SE/mini itp.): ciaśniej, żeby języki nie najeżdżały
   na logo/przycisk zamknięcia (przy 390 pełny wariant mieści się co do piksela) */
@media (max-width: 389px) {
	.wf-mobilemenu__top .wf-langs__item { padding: 0 7px; font-size: 13px; gap: 5px; }
	.wf-mobilemenu__top .wf-langs__flag { width: 14px; height: 9.8px; }
}

/* p5-03-menu-tlo-drukarka */
/* Menu mobilne: podmiana tła panelu na kadr z nowej makiety klienta —
   maszyna WallArtist Plus+ z bliska przy LEWEJ krawędzi (ekran dotykowy
   w górnej 1/3, czerwony przycisk, pionowy napis na krawędzi obudowy,
   fioletowa poświata), reszta czarna. Źródło: assets/img/fig-6ba62aaf98.png
   (1175x1160) — TO SAMO ujęcie, którego użyła makieta (i sekcja formularza
   na /drukarki/); dotychczasowy hero-mobile.jpg (1323x657, poziomy kadr
   ciety przez cover) pokazywał maszynę nieczytelnie i PO PRAWEJ, pod
   pozycjami menu. Kadr wyliczony z makiety (skala ~0.74 px CSS na px pliku
   przy 390px viewportu): lewa krawędź szafy ~20px za lewą krawędzią ekranu,
   prawa krawędź frontu ~120px (~31% szerokości), góra szafy ~28% wysokości
   ekranu. background-attachment:local zostaje (panel jest scrollerem — tło
   przewija się razem z treścią, nie „pływa"). Na makiecie dół maszyny
   (w pliku: kółka/podstawa od ~523px treści panelu) jest wygaszony do
   czerni, a srebrny maszt za prawą krawędzią szafy przygaszony — oba
   gradienty są WARSTWAMI background panelu (też local), a NIE ::before:
   ::before ma wysokość viewportu zakotwiczoną w początku scrolla, więc po
   przewinięciu dłuższego menu uciekałby w górę i odsłaniał jasne kółka
   (fade dołu jest w px od początku treści — trzyma się obrazka przy każdej
   pozycji scrolla i długości menu). Stary gradient ::before (linia ~3006)
   wygaszony na rzecz warstwy 90deg (czytelność pozycji menu po prawej).
   Tylko ≤720px (wyżej menu nie istnieje); desktop bez zmian. */
@media (max-width: 720px) {
	.wf-mobilemenu__panel {
		background-color: #000;
		background-image:
			linear-gradient(180deg, rgba(0, 0, 0, 0) 420px, rgba(0, 0, 0, 0.8) 540px, #000 590px),
			linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.16) 20%, rgba(0, 0, 0, 0.38) 33%, rgba(0, 0, 0, 0.52) 55%, rgba(0, 0, 0, 0.68) 78%, rgba(0, 0, 0, 0.72) 100%),
			url("../img/fig-6ba62aaf98.png");
		background-repeat: no-repeat;
		background-size: auto, auto, 870px auto;
		background-position: 0 0, 0 0, -377px -128px;
		background-attachment: local, local, local;
	}
	.wf-mobilemenu__panel::before {
		background: none;
	}
}

/* p5-04-hero-mobile */
/* Strona główna, hero ≤720px — nowa makieta klienta (18.png): zamiast
   dotychczasowego kadru hero-mobile.jpg (1323x657, poziomy — przy cover
   ekran maszyny ledwo widoczny przy górnej krawędzi) maszyna WallArtist
   Plus+ z assets/img/fig-6ba62aaf98.png (1175x1160 — to samo ujęcie,
   którego użyła makieta; por. blok p5-03) dosunięta do PRAWEJ krawędzi:
   maszt/prowadnice u góry, korpus z ekranem dotykowym w środkowej części
   kadru, podstawa ścięta dolną krawędzią. Skala ~0.75 px CSS na px pliku
   (wyliczenie z makiety jak w p5-03) => background-size 880px auto;
   kotwiczenie od PRAWEJ (right -407px), żeby przy 360/414px maszyna
   zostawała przy prawej krawędzi, a czerń przybywała po lewej. Do tego
   fioletowa poświata od lewej-dołu (radial-gradient, pierwsza warstwa
   background) + czerń tła. Reguła obejmuje WSZYSTKIE slajdy .wf-hero__slide
   — crossfade slidera nie zmienia już obrazu (inline --wf-bg-mob przestaje
   być używane, bo background-image nadpisujemy w całości; bez !important,
   inline ustawia tylko custom property). Dolny fade 120px z reguły
   .wf-hero__slide.is-active::after (przejście w sekcję zespołu pod hero)
   zostaje — wygasza podstawę maszyny jak na makiecie. Desktop (≥721px,
   w tym blok ≥1921px) bez zmian. */
@media (max-width: 720px) {
	.wf-hero__slide {
		background-color: #000;
		background-image:
			radial-gradient(ellipse 380px 340px at 16% 72%, rgba(158, 108, 232, 0.38) 0%, rgba(128, 78, 214, 0.18) 46%, rgba(0, 0, 0, 0) 78%),
			radial-gradient(ellipse 470px 190px at 32% 88%, rgba(150, 95, 225, 0.22) 0%, rgba(0, 0, 0, 0) 74%),
			url("../img/fig-6ba62aaf98.png");
		background-repeat: no-repeat;
		background-size: 100% 100%, 100% 100%, 850px auto;
		background-position: 0 0, 0 0, right -370px top -150px;
	}
	/* Dolny fade nieco mocniejszy — na makiecie podstawa/kółka maszyny są
	   wygaszone do czerni (i płynne przejście w sekcję zespołu zostaje). */
	.wf-hero__slide.is-active::after {
		height: 140px;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.94));
	}
	/* Treść jak na makiecie: badge ~1/3 wysokości, przycisk w dolnej części —
	   lekkie zepchnięcie bloku treści w dół względem dotychczasowego środka. */
	.wf-hero__grid {
		padding-top: 84px;
		padding-bottom: 40px;
	}
}

/* p5-05-mobilemenu-cta-fix — przycisk „Pobierz cennik →" w menu mobilnym łamał się
   na dwie linie przy szerokościach 391–720px: .wf-mobilemenu__inner ma sztywne
   width/max-width 390px (spisane z makiety 390), a padding-left skaluje się z vw —
   przy ~712px padding zjadał niemal całą sztywną szerokość i na treść zostawały
   ~24px (CTA zapadał się do 56px). Inner ma zajmować pełną szerokość overlaya;
   przy 390px wynik identyczny jak dotąd (100% = 390px). Nowrap jako bezpiecznik,
   żeby strzałka nigdy nie spadała do drugiej linii. */
@media (max-width: 720px) {
	.wf-mobilemenu .wf-mobilemenu__inner {
		width: 100%;
		max-width: none;
	}
	.wf-mobilemenu .wf-mobilemenu__cta { white-space: nowrap; }
}

/* p6-02 drukarki-form-decor */
/* /drukarki/, sekcja formularza: drukarka w lewej kolumnie ma być WIĘKSZA
   i sięgać dolnej linii karty formularza (klient: „mała drukarka i pusto").
   p4-02 wyrównał już dół (flex:1 + margin-top:auto + contain), ale box dekora
   (529x522 @1920) ma niemal te same proporcje co plik fig-6ba62aaf98.png
   (1175x1160), więc contain wypełniał box 1:1 — a sama maszyna to tylko ~48%
   szerokości PLIKU (reszta: czarne marginesy + poświata), stąd maszyna
   ~252px w kolumnie 529px i „czarna pustka" po bokach. Wysokości nie da się
   dodać (limitem jest karta), więc jedyna droga „w górę" to zoom z docięciem
   szczytu masztu: img poszerzony do 133% kolumny (align-self:center — równy
   nawis ~87px na stronę @1920, mieści się w 100px odstępie do karty; czarne
   pole nawisu ginie na czarnym tle), a object-fit:cover ze wspólną kotwicą
   center bottom (po p4-02) skaluje plik do szerokości boxu (~0.60 zamiast
   0.45 — maszyna ~336px, +33%) i docina górne ~290px pliku (sam maszt;
   korpus z ekranem i podstawa z kółkami w całości widoczne, dół dalej
   licuje z dołem karty). Maska wygasza górną krawędź (cięte w połowie
   szyny masztu znikają miękko w czerni zamiast urywać się twardą linią).
   Skala 0.60 << 1.0 naturalnego pliku — zero rozmycia. Zakres jak p4-02
   (≥1281px, desktop 2-kolumnowy); 721–1280 i mobile (decor ukryty przez
   mobile-fix) bez zmian; home/kontakt bez zmian (scope po szablonie). */
@media (min-width: 1281px) {
	.page-template-page-drukarki .wf-form__decor {
		width: 133%;
		max-width: none; /* globalne img{max-width:100%} (l.162) przycinałoby 133% z powrotem do szerokości kolumny */
		/* basis 0 zamiast auto z p4-02: przy szerokości 133% „auto" brałoby
		   naturalną wysokość z proporcji (~694px) i wydłużało kolumnę/wiersz
		   grida poza kartę — img ma tylko wypełniać resztę wysokości karty */
		flex: 1 1 0;
		align-self: center;
		object-fit: cover;
		-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 96px);
		mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 96px);
	}
}

/* p6-04 serwis-diag-bg */
/* /serwis/ „Diagnostyka, naprawa i części" (.wf-diag): kadr kolażu 1:1
   z makiety „WallFlow 2026 (Copy)" (SvM4F8grNexWLCXe8k18Ac, strona Serwis
   728:3590, sekcja = Frame 364 767:5496). Geometria POTWIERDZONA w Figma MCP
   (get_design_context; wcześniej wyznaczona niezależnie dopasowaniem NCC
   assetu do zrzutu makiety — zgodność <3 px): sekcja 1920×845; kolaż to
   IMAGE FILL sekcji (scaleMode CROP, plik fig-fab77772df.png 2474×1318,
   skala 0.64112) renderowany 1586.11×845 px: top 0, dół 0 (pełna wysokość
   sekcji), lewa krawędź 438.91 px, prawa DOCIĘTA 105.02 px ZA prawą
   krawędzią sekcji. Kolumna tekstu 628 px @ x=240. Nad kolażem NIE ma
   żadnego gradientu (potwierdzone w metadanych + pomiar luminancji
   zrzut≈asset) — wtopienia są wypalone w pliku; plansza CMYK ma być JASNA
   (dotychczasowy p4-10 przyciemniał ją do 62% szerokości). Odwzorowanie:
   - rozmiar przez wysokość sekcji: 98.35% = 844/858 (sekcja treściowa 858 px
     przy PL; skaluje się z sekcją gdy EN/FR zmieni wysokość o piksele);
     kotwica TOP (w makiecie kolaż od górnej krawędzi; ~14 px niedoboru na
     dole ginie w czerni — dolne wiersze pliku są czarne);
   - prawa krawędź: right calc(-105.5*--u) → @1920 docięcie 105.5 px jak
     w makiecie, <1920 offset maleje z --u (kolaż wjeżdża w lewo pod tekst —
     gradient czytelności p4-10 zostaje dla 721–1699 px);
   - ≥1700 px lżejszy gradient: wygasa przy ~53% szerokości (@1920 = 1018 px),
     żeby plansza CMYK (jasna treść od ~863 px) była widoczna jak w makiecie,
     a ogon tekstu (kolumna 628 kończy się ~888 px) dostawał jeszcze ≤.12 czerni;
   - ≥1921 px: kompozycja skaluje się Z SZEROKOŚCIĄ jak makieta (kolaż nie
     zostaje „małą wyspą w czerni" — to widział klient przy oknie ~2716 px):
     szerokość kolażu 1584/1920 = 82.5vw, docięcie prawej 105.5/1920 vw,
     a sekcja rośnie przez min-height 845/1920 = 44.01vw, więc kolaż dalej
     wypełnia ją do dołu; treść (stałe px) pozostaje wyśrodkowana w pionie.
     Ciągłość na styku 1920/1921: 1584px ↔ 82.5vw, offsety równe.
   Mobile ≤720 px nietknięty (własne reguły mobile-fix). */
@media (min-width: 721px) {
	.wf-diag {
		background-size: auto 98.35%;
		background-position: right calc(-105.5 * var(--u)) top;
	}
}
@media (min-width: 1700px) {
	.wf-diag::before {
		background: linear-gradient(90deg,
			#000 0%,
			rgba(0, 0, 0, .92) 27%,
			rgba(0, 0, 0, .45) 38%,
			rgba(0, 0, 0, .12) 46%,
			rgba(0, 0, 0, 0) 53%);
	}
}
@media (min-width: 1921px) {
	.wf-diag {
		min-height: calc(100vw * 845 / 1920);
		background-size: calc(100vw * 1584 / 1920) auto;
		background-position: right calc(100vw * -105.5 / 1920) top;
	}
	.wf-diag::before {
		background: linear-gradient(90deg,
			#000 0%,
			rgba(0, 0, 0, .88) 24%,
			rgba(0, 0, 0, .3) 35%,
			rgba(0, 0, 0, 0) 42%);
	}
}

/* p6-01 hero-home-drukarka (mobile) */
/* Hero home ≤720 wg AKTUALNEJ makiety mobile (Figma SvM4F8grNexWLCXe8k18Ac,
   ramka 347:415 „Frame 8" 390x532): tłem NIE jest już fig-6ba62aaf98.png
   (dekor formularza, którego użył blok p5-04), tylko dedykowany wariant
   nowego zdjęcia hero BEZ ludzi — sama maszyna „WallArtist Plus+" z wypaloną
   fioletową poświatą (asset image-filla ramki, 4096x2045; tu hero-home-mob-2026.jpg,
   JPEG q80, 3198px = 3x szerokości renderowanej). Kadr z Figmy: obraz na wysokość
   ramki (532px -> szer. 1065.6px), offset X -311.8px, top 0. Kotwiczymy od PRAWEJ
   (nawis 1065.6-390-311.8 = 363.8px ~ -364px), żeby przy 360-414px maszyna
   zostawała przy prawej krawędzi (jak w p5-04). auto 100% zamiast sztywnych px:
   przy wyższym slajdzie (dłuższe teksty EN/FR) obraz dalej wypełnia wysokość.
   Radial-gradienty z p5-04 zbędne — poświata jest w pliku (makieta nie nakłada
   żadnych gradientów na tło). Nadpisanie bije p5-04 kaskadą (ta sama specyficzność,
   dalej w pliku); inline style slajdów ustawia tylko --wf-bg/--wf-bg-mob, więc
   bez !important. Desktop (≥721) nietknięty.
   FIX „twardej krawędzi" ze zgłoszenia klienta: dolny fade slajdu
   (.wf-hero__slide.is-active::after, l.2754 + p5-04) ustawia left/right/bottom/height,
   ale NIE nadpisuje top:0 odziedziczonego z bazowej reguły ::after (inset:0, l.526);
   przy nadokreśleniu (top+bottom+height) wygrywa para top+height, więc „dolny" fade
   140px renderował się na GÓRZE slajdu: przyciemniał zdjęcie pod headerem i kończył
   się twardą linią na y=244 (104+140). top:auto przywraca kotwiczenie do dołu
   (płynne przejście w sekcję zespołu, jak w komentarzu reguły źródłowej). */
@media (max-width: 720px) {
	.wf-hero__slide {
		background-color: #000;
		background-image: url("../img/hero-home-mob-2026.jpg");
		background-repeat: no-repeat;
		background-size: auto 100%;
		background-position: right -364px top;
	}
	.wf-hero__slide.is-active::after { top: auto; }
}

/* p7-01-home-form-drukarka: HOME — sekcja formularza: drukarka w lewej kolumnie
   dociągnięta do dolnej linii karty formularza (klient 17.VII: „drukarka po lewo
   powinna być wielkości do końca formularza"). Ten sam asset (fig-6ba62aaf98.png,
   wypalone czarne marginesy — maszyna ~48% szer. pliku) i ta sama recepta co
   finalny stan /drukarki/ (p4-02 + p6-02): lewa kolumna stretch do wysokości
   wiersza grida, img wypełnia resztę wysokości (flex 1 1 0 — basis 0, żeby
   naturalna wysokość z proporcji nie wydłużała wiersza poza kartę), poszerzony
   do 133% kolumny (nawis ~87px/stronę ginie w czerni w 100px gapie),
   object-fit:cover z kotwicą center bottom (dół maszyny licuje z dołem karty,
   docięty szczyt masztu wygasa maską 96px). Zakres jak na drukarkach: tylko
   desktop 2-kolumnowy ≥1281px; 721–1280 bez zmian, ≤720 decor ukryty
   (mobile-fix); /drukarki/ i /kontakt/ nietknięte (scope po body class home
   + szablonie wersji językowych page-home). */
@media (min-width: 1281px) {
	.home .wf-form__left,
	.page-template-page-home .wf-form__left { align-self: stretch; }
	.home .wf-form__decor,
	.page-template-page-home .wf-form__decor {
		width: 133%;
		max-width: none;
		flex: 1 1 0;
		min-height: 0;
		margin-top: auto;
		align-self: center;
		object-fit: cover;
		object-position: center bottom;
		-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 96px);
		mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 96px);
	}
}

/* p7-02-menu-mobilne-makieta: menu mobilne 1:1 z ramki „Menu mobile" 359:426
   pliku „WallFlow 2026 (Copy)" (SvM4F8grNexWLCXe8k18Ac), zgłoszenie klienta
   17.VII. Geometria z get_metadata (ramka 390x750):
   (1) JĘZYKI: makieta ma czysty tekst PL | EN | FR bez flag, ale klient
   jawnie kazał flagi ZOSTAWIĆ („tylko flagi zostaw od jezykow") — przełącznik
   bez zmian, obowiązuje p5-02 (flagi 17px + kody, separatory border-left).
   (2) TŁO panelu = hero-home-mob-2026.jpg (asset image-filla Frame 177
   z makiety to 4096x2045 machine-only — wymiary jak hero desktop, ale BEZ
   ludzi; treściowo identyczny z istniejącym hero-home-mob-2026.jpg 3198px,
   więc bez nowego assetu; to NIE jest już fig-6ba62aaf98.png z p5-03):
   render 941.4x470 @390 (szer. 241.38vw, proporcje 2.003), left -141.2vw
   (widoczny prawy wycinek 58.5–100% pliku = maszyna z bliska), top 8px
   (makieta: img y112, header 104). ZERO gradientów-overlayów (wypalone
   w pliku; warstwy z p5-03 znikają wraz z podmianą background-image);
   attachment:local zostaje (panel = scroller). Niżej czysty #000.
   (3) UKŁAD treści wg makiety: kolumna od lewej 180/390 = 46.15% (stare 48%
   z bloku ≤720 i 43% z ≤480 nadpisane później w pliku), prawy padding 20px,
   top 8px; rytm pozycji = bazowe gap 16 + padding 4 (nadpisuje gap:12),
   inner gap 40 (nadpisuje 30), kontakty gap 40 (nadpisuje 18/12), kółka
   50px (24px ikona + 12px padding + border) bez półprzezroczystego tła.
   Socials na dole zostają jak są (w makiecie wiersz socials jest urwany:
   pusty komponent FACEBOOK + samo Instagram — stan niedokończony).
   CTA „Pobierz cennik →" zostaje (treść ustalona przez klienta; makieta ma
   stare „Kup drukarkę"). Tylko ≤720px. */
@media (max-width: 720px) {
	.wf-mobilemenu__panel {
		background-color: #000;
		background-image: url("../img/hero-home-mob-2026.jpg");
		background-repeat: no-repeat;
		background-size: 241.38vw auto;
		background-position: left -141.2vw top 8px;
		background-attachment: local;
	}
	.wf-mobilemenu__inner {
		padding: 8px 20px 0 46.15%;
		gap: 40px;
	}
	.wf-mobilemenu__list { gap: 16px; }
	.wf-mobilemenu__contacts { gap: 40px; }
	.wf-mobilemenu__contacts a {
		width: 50px;
		height: 50px;
		background: none;
	}
}