/* ============================================================
   PAWEŁ SOWA — wspólny wygląd stron
   Podpinany przez /style.css na każdej podstronie tego klienta.

   Paleta: czerń, biel, akcenty czerwone (wybór Pawła).
   Klasy zgodne ze skillem /strona-podziekowania.
   ============================================================ */

:root {
	/* ---- KOLORY ----
	   Wybór klienta: czarny, biały, akcenty czerwone. */
	--brand: 17, 17, 17;
	/* kolor wiodący: czerń — nagłówki, ramki, tła ciemnych sekcji */
	--brand-deep: 10, 10, 10;
	/* głębsza czerń: hero, finałowe CTA, stopka */
	--cta: 196, 22, 28;
	/* akcent czerwony — przyciski i akcenty; biały tekst na nim: 6,0:1 */
	--cta-hover: 168, 17, 22;
	--cta-light: 255, 77, 82;
	/* jaśniejsza czerwień do użycia NA CZARNYM TLE — 5,9:1 */
	--ink: 17, 17, 17;
	/* tekst główny — 18,9:1 na białym */
	--muted: 90, 90, 95;
	/* tekst pomocniczy — 6,2:1 na białym */
	--white: 255, 255, 255;
	--bg-alt: 245, 245, 246;
	/* tło sekcji alternatywnej — rytm strony */
	--tint: 250, 250, 251;
	/* najjaśniejszy odcień — ramki wyróżnione na białym */
	--line: 226, 226, 229;
	/* obramowania */

	/* ---- RYTM PIONOWY ----
	   Jedna zmienna trzyma odstęp nad nagłówkiem sekcji i pod nim.
	   Dzięki temu nagłówek „oddycha” tak samo z góry i z dołu. */
	--sekcja: 96px;

	/* Realna wysokość baneru cookie, ustawiana skryptem po jego wyrenderowaniu.
	   Odsuwa sticky bar i stopkę, żeby baner niczego nie zasłaniał.
	   Zero, gdy baneru nie ma albo został zaakceptowany. */
	--baner-h: 0px;

	/* ---- PROMIENIE I CIENIE ---- */
	--r-sm: 12px;
	--r-md: 18px;
	--r-lg: 24px;
	--cien-karta: 0 1px 2px rgba(17, 17, 17, .04), 0 8px 24px rgba(17, 17, 17, .05);
	--cien-karta-hover: 0 2px 4px rgba(17, 17, 17, .06), 0 18px 40px rgba(17, 17, 17, .09);
	--cien-cta: 0 10px 26px rgba(196, 22, 28, .28);

	/* ---- TYPOGRAFIA ----
	   Oba kroje mają podzbiór latin-ext (ą ć ę ł ń ó ś ź ż / Ą Ć Ę Ł Ń Ó Ś Ź Ż). */
	--font-heading: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ---------- Podstawa ---------- */
* {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 18px;
	color: rgba(var(--ink), 1);
	background-color: rgba(var(--white), 1);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
	font-family: var(--font-heading);
	font-weight: 700;
	margin: 0 0 20px 0;
	/* interlinia nie schodzi poniżej 1,15 — inaczej ucina ogonki
	   polskich wielkich liter (Ą, Ę, Ż, Ź) */
	line-height: 1.18;
	letter-spacing: -0.6px;
	text-wrap: balance;
}

h1 {
	font-size: clamp(32px, 4.4vw, 56px);
	font-weight: 800;
	letter-spacing: -1.4px;
}

h2 {
	font-size: clamp(26px, 2.8vw, 38px);
}

h3 {
	font-size: 20px;
	letter-spacing: -0.3px;
}

p {
	margin: 0 0 18px 0;
	text-wrap: pretty;
}

a {
	text-decoration: none;
	color: rgba(var(--cta), 1);
}

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

:focus-visible {
	outline: 3px solid rgba(var(--cta), 1);
	outline-offset: 3px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	* {
		animation: none !important;
		transition: none !important;
	}
}

/* ---------- Układ ---------- */
.container {
	max-width: 900px;
	/* 60–75 znaków w wierszu */
	margin: 0 auto;
	padding: 0 24px;
}

.container-wide {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

section {
	padding: var(--sekcja) 0;
}

.section-alt {
	background-color: rgba(var(--bg-alt), 1);
}

/* Odstęp pod nagłówkiem sekcji równy odstępowi nad nim
   (czyli górnemu paddingowi sekcji). */
.section-title {
	font-size: clamp(26px, 2.8vw, 38px);
	text-align: center;
	margin-bottom: var(--sekcja);
}

.section-title.ma-podtytul {
	margin-bottom: 18px;
}

.section-subtitle {
	text-align: center;
	color: rgba(var(--muted), 1);
	max-width: 680px;
	margin: 0 auto var(--sekcja) auto;
}

.accent {
	color: rgba(var(--cta), 1);
}

.lead p {
	font-size: 19px;
}

/* ---------- 1. Hero (czarne) ---------- */
.hero {
	position: relative;
	overflow: hidden;
	background-color: rgba(var(--brand-deep), 1);
	color: rgba(var(--white), 1);
	padding: 76px 0 58px 0;
	text-align: center;
}

/* delikatna czerwona poświata za nagłówkiem — jedyny efekt na stronie */
.hero::before {
	content: "";
	position: absolute;
	top: -30%;
	left: 50%;
	width: min(1100px, 130%);
	aspect-ratio: 1;
	transform: translateX(-50%);
	background: radial-gradient(circle, rgba(var(--cta), .20) 0%, rgba(var(--cta), 0) 62%);
	pointer-events: none;
}

.hero>.container {
	position: relative;
}

.hero .eyebrow {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.2px;
	/* nadtytuł bywa pisany wersalikami — interlinia z zapasem na ogonki */
	line-height: 1.45;
	color: rgba(var(--white), .92);
	background: rgba(var(--white), .06);
	border: 1px solid rgba(var(--white), .16);
	border-radius: 999px;
	padding: 9px 20px;
	margin-bottom: 28px;
	backdrop-filter: blur(6px);
}

.hero .eyebrow::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(var(--cta-light), 1);
	margin-right: 10px;
	vertical-align: middle;
}

.hero h1 {
	color: rgba(var(--white), 1);
	max-width: 900px;
	margin: 0 auto 24px auto;
}

.hero .subtitle {
	font-size: clamp(17px, 1.4vw, 20px);
	color: rgba(var(--white), .78);
	max-width: 720px;
	margin: 0 auto;
}

.hero .divider {
	width: 56px;
	height: 4px;
	background: rgba(var(--cta), 1);
	margin: 36px auto 0 auto;
	border-radius: 2px;
}

/* Dwa akapity pod nagłówkiem hero — same nie mają odstępu między sobą.
   Używa strona podziękowania (potwierdzenie + wers z mailem). */
.hero .subtitle+.subtitle {
	margin-top: 16px;
}

/* Odnośnik na czarnym tle — czerwień z palety jest tu za ciemna. */
.hero .subtitle a {
	color: rgba(var(--white), 1);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Znaczek potwierdzenia — strona podziękowania, sekcja 1. */
.check-badge {
	display: block;
	margin: 0 auto 28px auto;
	line-height: 0;
}

/* ---------- 2. Wideo ---------- */
.video-wrapper {
	position: relative;
	aspect-ratio: 16 / 9;
	width: 100%;
	border-radius: var(--r-lg);
	overflow: hidden;
	background: rgba(var(--brand-deep), 1);
	box-shadow: 0 24px 70px rgba(17, 17, 17, .18);
}

.video-wrapper iframe,
.video-wrapper video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.video-caption {
	text-align: center;
	font-size: 15px;
	color: rgba(var(--muted), 1);
	margin-top: 20px;
}

/* Makieta okładki na czas montażu wideo.
   Wymienna na iframe bez zmian w pozostałym CSS. */
.video-makieta {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 24px;
	background-image:
		linear-gradient(rgba(10, 10, 10, .58), rgba(10, 10, 10, .76)),
		url("https://media-static.b-cdn.net/pawel-sowa/Pawe%C5%82-zdjecie.jpg");
	background-size: cover;
	background-position: center 20%;
}

.video-makieta .play {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: rgba(var(--cta), 1);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 26px;
	box-shadow: 0 0 0 10px rgba(var(--cta), .18), 0 12px 34px rgba(0, 0, 0, .5);
}

.video-makieta .play svg {
	margin-left: 5px;
}

.video-makieta .poster-text {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(19px, 2.6vw, 34px);
	line-height: 1.25;
	letter-spacing: -0.6px;
	color: rgba(var(--white), 1);
	max-width: 720px;
	margin: 0;
	text-shadow: 0 2px 16px rgba(0, 0, 0, .6);
}

/* dwie linie okładki: pierwsze zdanie, drugie zdanie — łamanie <br> w treści */

/* ---------- Przyciski ---------- */
.btn {
	display: inline-block;
	background: rgba(var(--cta), 1);
	color: rgba(var(--white), 1);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: -0.2px;
	padding: 19px 38px;
	border-radius: 14px;
	min-height: 44px;
	box-shadow: var(--cien-cta);
	transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.btn:hover {
	background: rgba(var(--cta-hover), 1);
	transform: translateY(-2px);
	box-shadow: 0 14px 34px rgba(196, 22, 28, .34);
}

.btn:active {
	transform: translateY(0);
}

.inline-cta {
	text-align: center;
	margin-top: 52px;
}

.btn-section {
	text-align: center;
}

.btn-note,
.click-trigger {
	font-size: 15px;
	color: rgba(var(--muted), 1);
	margin-top: 16px;
}

.click-trigger {
	text-align: center;
}

/* ---------- 3. Kalendarz ---------- */
/* Kotwica siedzi na samym widgecie, więc przyciski przewijają wprost
   do kalendarza. Odstęp od górnej krawędzi ekranu, żeby nie był przyklejony. */
#kalendarz {
	scroll-margin-top: 28px;
}

/* Nagłówek z podtytułem: podtytuł należy do nagłówka, więc pełny odstęp
   sekcji idzie dopiero pod podtytułem (klasa .section-subtitle). */
.promise-title {
	text-align: center;
	font-size: clamp(26px, 2.8vw, 38px);
	margin-bottom: 16px;
}

.calendly-inline-widget {
	width: 100%;
}

/* ---------- Sticky CTA (tylko telefon) ---------- */
.sticky-cta {
	display: none;
}

@media (max-width: 767px) {
	.sticky-cta {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 50;
		background: rgba(var(--brand-deep), .97);
		backdrop-filter: blur(10px);
		border-top: 1px solid rgba(var(--white), .12);
		box-shadow: 0 -6px 24px rgba(0, 0, 0, .38);
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		transform: translateY(120%);
		transition: transform .22s ease;
	}

	.sticky-cta.is-visible {
		transform: translateY(0);
	}

	/* sticky bar siada NAD banerem cookie, dopóki baner jest na ekranie */
	.sticky-cta {
		bottom: var(--baner-h);
	}

	.sticky-cta .sticky-note {
		display: block;
		font-size: 12px;
		line-height: 1.4;
		text-align: center;
		color: rgba(var(--white), .78);
		margin: 0 0 6px 0;
	}

	.sticky-cta .btn {
		display: block;
		width: 100%;
		text-align: center;
		padding: 15px 18px;
		font-size: 17px;
		box-shadow: none;
	}
}

/* ---------- Baner cookie ----------
   Pasek informacyjny, NIE bramka zgody: nie blokuje piksela Meta ani
   żadnego innego skryptu. Decyzja właściciela systemu z 2026-08-07,
   uzasadnienie i zastrzeżenie prawne w skillu /strona-vsl-kod,
   references/standard-techniczny.md, sekcja 6. */
.cookie-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	/* wyżej niż sticky bar (50), żeby nie chował się pod nim */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 16px 24px calc(16px + env(safe-area-inset-bottom));
	background: rgba(var(--brand-deep), .98);
	border-top: 1px solid rgba(var(--white), .12);
	box-shadow: 0 -6px 24px rgba(0, 0, 0, .28);
}

.cookie-bar p {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(var(--white), .82);
	max-width: 820px;
}

.cookie-bar a {
	color: rgba(var(--white), 1);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* przycisk zgody: mniejszy od CTA strony, żeby nie konkurował z rezerwacją */
.cookie-bar .cookie-ok {
	flex: 0 0 auto;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	color: rgba(var(--white), 1);
	background: rgba(var(--cta), 1);
	border: 0;
	border-radius: 10px;
	padding: 11px 26px;
	min-height: 44px;
	cursor: pointer;
	transition: background-color .18s ease;
}

.cookie-bar .cookie-ok:hover {
	background: rgba(var(--cta-hover), 1);
}

.cookie-bar .cookie-x {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(var(--white), .7);
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: color .18s ease, background-color .18s ease;
}

.cookie-bar .cookie-x:hover {
	color: rgba(var(--white), 1);
	background: rgba(var(--white), .10);
}

@media (max-width: 767px) {
	.cookie-bar {
		flex-wrap: wrap;
		gap: 12px;
		padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
		text-align: center;
	}

	.cookie-bar p {
		flex: 1 1 100%;
		order: 1;
		font-size: 13px;
	}

	.cookie-bar .cookie-ok {
		order: 2;
		flex: 1 1 auto;
	}

	.cookie-bar .cookie-x {
		order: 3;
	}
}

/* ---------- 4. Fascynacje + transparentność ---------- */
.fascinations {
	list-style: none;
	padding: 0;
	margin: 0 0 44px 0;
}

.fascinations li {
	position: relative;
	padding-left: 44px;
	margin-bottom: 22px;
}

.fascinations li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(var(--cta), .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4161C' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/15px no-repeat;
}

.offer-transparency {
	background: rgba(var(--white), 1);
	border: 1px solid rgba(var(--line), 1);
	border-left: 4px solid rgba(var(--cta), 1);
	border-radius: var(--r-md);
	padding: 28px 30px;
	font-size: 16px;
	box-shadow: var(--cien-karta);
}

.offer-transparency p:last-child {
	margin-bottom: 0;
}

/* ---------- 5. Bio ---------- */
.bio-container {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 24px;
}

.bio-grid {
	display: grid;
	grid-template-columns: 320px 1fr;
	/* pierwszy wiersz przylega do nagłówka, reszta wysokości idzie do treści —
	   inaczej wysoka kolumna ze zdjęciem rozpycha lukę pod nagłówkiem */
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"photo header"
		"photo body";
	gap: 18px 48px;
	align-items: start;
}

.bio-header,
.bio-body {
	align-self: start;
}

.bio-header {
	grid-area: header;
}

.bio-photo {
	grid-area: photo;
}

.bio-body {
	grid-area: body;
}

.bio-photo img {
	border-radius: var(--r-md);
	box-shadow: var(--cien-karta);
}

.bio-name {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1.4px;
	line-height: 1.45;
	text-transform: uppercase;
	color: rgba(var(--cta), 1);
	margin: 0 0 10px 0;
}

/* ---------- 6. Książki ----------
   Szerokość dopasowana do dwóch kafelków wideo z sekcji dowodów:
   360 px kafelek + 43 px realnej przerwy + 360 px kafelek. */
.books-image {
	max-width: 763px;
	margin: 0 auto;
}

.books-image img {
	width: 100%;
	display: block;
	border-radius: var(--r-md);
	box-shadow: var(--cien-karta);
}

/* Pasek z faktami pod biogramem */
.facts-bar {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 56px;
	background: rgba(var(--brand-deep), 1);
	color: rgba(var(--white), 1);
	border-radius: var(--r-lg);
	padding: 38px 30px;
	text-align: center;
}

.facts-bar>div+div {
	border-left: 1px solid rgba(var(--white), .12);
}

.facts-bar .num {
	display: block;
	font-family: var(--font-heading);
	font-size: 34px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -1px;
	color: rgba(var(--cta-light), 1);
}

.facts-bar .lbl {
	display: block;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(var(--white), .8);
	margin-top: 8px;
}

/* ---------- 6. Dowody (siatka wideo 2 na 2) ---------- */
.testimonial-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 26px;
	max-width: 780px;
	margin: 0 auto;
}

/* Kafelek o stałych proporcjach 9:16.
   Nagrania mają różne formaty źródła, więc obraz wpisujemy w kafelek,
   a nie kafelek w obraz — inaczej siatka skacze. */
.tcard-video {
	position: relative;
	aspect-ratio: 9 / 16;
	width: 100%;
	max-width: 360px;
	margin: 0 auto;
	background: #000;
	border-radius: var(--r-md);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--cien-karta);
	transition: box-shadow .2s ease, transform .2s ease;
}

.tcard-video:hover {
	box-shadow: var(--cien-karta-hover);
	transform: translateY(-2px);
}

.tcard-video video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Nagranie poziome zamknięte w czarnej ramce 480×368:
   przycinamy same pasy góra i dół, reszta zostaje w kadrze. */
.tcard-video.is-wide video {
	height: auto;
	aspect-ratio: 48 / 31;
	object-fit: cover;
}

.disclaimer {
	font-size: 14px;
	line-height: 1.6;
	/* drobny druk ma być czytelny, nie ukryty — kontrast 6,2:1 */
	color: rgba(var(--muted), 1);
	margin-top: 30px;
	text-align: center;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/* ---------- 7. Agenda + dla kogo ---------- */
.agenda-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

.agenda-item {
	background: rgba(var(--white), 1);
	border: 1px solid rgba(var(--line), 1);
	border-radius: var(--r-md);
	padding: 34px 30px;
	box-shadow: var(--cien-karta);
	transition: box-shadow .2s ease, transform .2s ease;
}

.agenda-item:hover {
	box-shadow: var(--cien-karta-hover);
	transform: translateY(-3px);
}

.agenda-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 14px;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 18px;
	color: rgba(var(--white), 1);
	background: rgba(var(--cta), 1);
	margin-bottom: 18px;
}

.agenda-item p {
	font-size: 16px;
	color: rgba(var(--muted), 1);
	margin: 0;
}

/* Zamknięcie sekcji — wyróżnione, z zapasem powietrza z obu stron */
.agenda-close {
	max-width: 860px;
	margin: 72px auto;
	padding: 40px 44px;
	text-align: center;
	font-family: var(--font-heading);
	font-size: clamp(19px, 1.9vw, 25px);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: -0.4px;
	color: rgba(var(--ink), 1);
	background: rgba(var(--white), 1);
	border: 1px solid rgba(var(--line), 1);
	border-radius: var(--r-lg);
	box-shadow: var(--cien-karta);
	text-wrap: balance;
	position: relative;
}

.agenda-close::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 72px;
	height: 4px;
	border-radius: 0 0 4px 4px;
	background: rgba(var(--cta), 1);
}

.fit-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 26px;
}

.fit-box {
	border: 1px solid rgba(var(--line), 1);
	border-radius: var(--r-md);
	padding: 30px 32px;
	background: rgba(var(--white), 1);
	box-shadow: var(--cien-karta);
}

.fit-box h3 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.fit-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: rgba(var(--cta), 1);
	background: rgba(var(--cta), .12);
}

.fit-box.is-no .fit-icon {
	color: rgba(var(--muted), 1);
	background: rgba(var(--muted), .12);
}

.fit-box p {
	margin: 0;
	font-size: 17px;
	color: rgba(var(--muted), 1);
}

/* ---------- 8. Odwrócenie ryzyka ---------- */
.guarantee-box {
	background: rgba(var(--white), 1);
	border: 1px solid rgba(var(--line), 1);
	border-radius: var(--r-lg);
	padding: 48px 48px 56px 48px;
	text-align: center;
	box-shadow: var(--cien-karta);
	position: relative;
	overflow: hidden;
}

/* nagłówek w karcie oddycha tak samo od górnej krawędzi karty, jak do treści */
.guarantee-box h2 {
	margin-bottom: 48px;
}

.guarantee-box::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: rgba(var(--cta), 1);
}

.guarantee-box p:last-child {
	margin-bottom: 0;
}

/* ---------- 9. FAQ ---------- */
.faq-list {
	max-width: 800px;
	margin: 0 auto;
}

.faq-item {
	border: 1px solid rgba(var(--line), 1);
	border-radius: var(--r-md);
	margin-bottom: 14px;
	background: rgba(var(--white), 1);
	transition: box-shadow .2s ease, border-color .2s ease;
}

.faq-item[open],
.faq-item:hover {
	border-color: rgba(var(--ink), .18);
	box-shadow: var(--cien-karta);
}

.faq-item summary {
	cursor: pointer;
	list-style: none;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.4;
	letter-spacing: -0.3px;
	padding: 24px 62px 24px 28px;
	position: relative;
}

.faq-item summary::-webkit-details-marker {
	display: none;
}

.faq-item summary::after {
	content: "";
	position: absolute;
	right: 24px;
	top: 24px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(var(--cta), .10) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4161C' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/13px no-repeat;
	transition: transform .2s ease;
}

.faq-item[open] summary::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4161C' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
	transform: rotate(180deg);
}

.faq-answer {
	padding: 0 28px 24px 28px;
	color: rgba(var(--muted), 1);
}

.faq-answer p:last-child {
	margin-bottom: 0;
}

/* ---------- 10. Finałowe CTA ---------- */
.final-cta {
	position: relative;
	overflow: hidden;
	background: rgba(var(--brand-deep), 1);
	color: rgba(var(--white), 1);
	text-align: center;
}

.final-cta::before {
	content: "";
	position: absolute;
	bottom: -40%;
	left: 50%;
	width: min(1100px, 130%);
	aspect-ratio: 1;
	transform: translateX(-50%);
	background: radial-gradient(circle, rgba(var(--cta), .18) 0%, rgba(var(--cta), 0) 62%);
	pointer-events: none;
}

.final-cta>.container {
	position: relative;
}

.final-cta h2 {
	color: rgba(var(--white), 1);
	font-size: clamp(24px, 2.6vw, 36px);
	max-width: 900px;
	margin: 0 auto 24px auto;
}

.final-cta .subtitle {
	max-width: 760px;
	margin: 0 auto 14px auto;
	color: rgba(var(--white), .82);
}

.final-cta .click-trigger {
	color: rgba(var(--white), .78);
}

/* ---------- Stopka ---------- */
footer {
	background: rgba(var(--brand-deep), 1);
	border-top: 1px solid rgba(var(--white), .10);
	padding: 48px 0 40px 0;
	text-align: center;
}

footer .footer-nav {
	margin-bottom: 22px;
}

footer .footer-nav a {
	color: rgba(var(--white), 1);
	font-size: 15px;
	margin: 0 12px;
	text-decoration: underline;
	text-underline-offset: 4px;
}

footer .footer-legal p {
	font-size: 14px;
	line-height: 1.6;
	color: rgba(var(--white), .7);
	max-width: 820px;
	margin: 0 auto 12px auto;
}

/* ============================================================
   TABLET
   ============================================================ */
@media (max-width: 1023px) {
	:root {
		--sekcja: 76px;
	}

	.agenda-grid,
	.fit-grid {
		grid-template-columns: 1fr;
	}

	.bio-grid {
		gap: 12px 32px;
		grid-template-columns: 260px 1fr;
	}
}

/* ============================================================
   TELEFON
   ============================================================ */
@media (max-width: 767px) {

	:root {
		--sekcja: 60px;
	}

	body {
		font-size: 17px;
	}

	.container,
	.container-wide,
	.bio-container {
		padding: 0 20px;
	}

	.hero {
		padding: 44px 0 40px 0;
	}

	.hero .eyebrow {
		font-size: 13px;
		margin-bottom: 22px;
	}

	.hero .subtitle,
	.lead p {
		font-size: 17px;
	}

	.hero .divider {
		margin-top: 30px;
	}

	.video-makieta .play {
		width: 58px;
		height: 58px;
		margin-bottom: 16px;
		box-shadow: 0 0 0 7px rgba(var(--cta), .18), 0 8px 22px rgba(0, 0, 0, .5);
	}

	.video-makieta .play svg {
		width: 22px;
		height: 22px;
	}

	.testimonial-grid,
	.facts-bar {
		grid-template-columns: 1fr;
	}

	.facts-bar {
		padding: 30px 24px;
		gap: 26px;
	}

	.facts-bar>div+div {
		border-left: 0;
		border-top: 1px solid rgba(var(--white), .12);
		padding-top: 26px;
	}

	.bio-grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"header"
			"photo"
			"body";
		gap: 24px;
	}

	/* okładka książki pod zdjęciem, ale nie na całą szerokość ekranu */
	.books-image {
		max-width: 100%;
	}

	.agenda-close {
		margin: 48px auto;
		padding: 30px 24px;
		text-align: left;
	}

	.agenda-close::before {
		left: 24px;
		transform: none;
		width: 56px;
	}

	.guarantee-box {
		padding: 38px 24px;
	}

	.offer-transparency {
		padding: 24px 22px;
	}

	.faq-item summary {
		padding: 20px 58px 20px 22px;
	}

	.faq-answer {
		padding: 0 22px 20px 22px;
	}

	.inline-cta {
		margin-top: 40px;
	}

	/* widget kalendarza potrzebuje na telefonie ok. 900 px wysokości,
	   inaczej przewija się wewnętrznie i użytkownik gubi przyciski */
	.calendly-inline-widget {
		height: 900px !important;
	}

	/* przycisk na telefonie zawsze pełnej szerokości */
	.btn {
		display: block;
		width: 100%;
		text-align: center;
		padding: 17px 20px;
		font-size: 17px;
	}

	/* zapas na sticky bar i baner cookie, żeby nie zasłaniały stopki */
	footer {
		padding-bottom: calc(116px + var(--baner-h));
	}
}