/* ============================================================
   Tomasz Bigus – trener personalny · WERSJA BONUS
   Dark athletic editorial: Anton (display) + Manrope (tekst),
   marquee, outline typography, mozaika, poziomy pas certyfikatów
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
	--bg: #0b1f3f;
	--bg-elev: #10294f;
	--line: rgba(255, 255, 255, 0.13);
	--text: #eef3fa;
	--muted: #9db1cd;
	--accent: #5db3ff;
	--accent-soft: #9ed1ff;
	--ink: #071a35;
	--navy: #0c468e;

	--font-display: "Anton", "Arial Narrow", sans-serif;
	--font-body: "Manrope", "Segoe UI", sans-serif;

	--wrap: 1240px;
	--pad: clamp(1.2rem, 4vw, 2.5rem);
	--space: clamp(3rem, 6.5vw, 5.5rem);
	--header-h: 76px;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 1.02rem;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: var(--ink); }

img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1.15em; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: #7cc2ff; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--space); }

.skip-link {
	position: absolute; left: -999px; top: 0;
	background: var(--accent); color: var(--ink);
	padding: 0.7rem 1.2rem; z-index: 300; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---------- Pasek postępu przewijania ---------- */
.scroll-progress {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 3px;
	z-index: 210;
	background: transparent;
}
.scroll-progress span {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--accent), #ffffff);
}

/* ---------- Nagłówek ---------- */
.site-header {
	position: fixed;
	inset-inline: 0; top: 0;
	z-index: 200;
	transition: border-color 0.3s ease;
	border-bottom: 1px solid transparent;
}
/* tło z blurem na pseudo-elemencie — backdrop-filter na samym headerze
   tworzyłby containing block i psuł fixed .nav-menu na mobile */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: transparent;
	transition: background-color 0.3s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header.is-scrolled::before {
	background: rgba(9, 26, 53, 0.85);
	backdrop-filter: blur(12px);
}

.nav-inner {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--pad);
	min-height: var(--header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.nav-logo img { width: clamp(140px, 16vw, 190px); height: auto; }

.nav-menu {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	align-items: center;
	gap: clamp(0.2rem, 1.6vw, 1.1rem);
}
.nav-menu a {
	display: inline-block;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--text);
	text-decoration: none;
	padding: 0.5rem 0.65rem;
}
.nav-menu a i {
	font-style: normal;
	color: var(--accent);
	margin-right: 0.35em;
	font-size: 0.7rem;
}
.nav-menu a:hover { color: var(--accent); }
.nav-menu a.is-active { color: var(--accent); }
/* podkreślenie rysujące się od lewej */
.nav-menu a:not(.nav-cta) { position: relative; }
.nav-menu a:not(.nav-cta)::after {
	content: "";
	position: absolute;
	left: 0.65rem; right: 0.65rem; bottom: 0.2rem;
	height: 1px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s var(--ease);
}
.nav-menu a:not(.nav-cta):hover::after,
.nav-menu a:not(.nav-cta).is-active::after { transform: scaleX(1); }

.nav-menu .nav-cta {
	border: 1px solid var(--accent);
	color: var(--accent);
	padding: 0.55rem 1.3rem;
	margin-left: 0.4rem;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.nav-menu .nav-cta:hover { background: var(--accent); color: var(--ink); }

.nav-toggle {
	display: none;
	background: none; border: 0; cursor: pointer;
	padding: 0.7rem;
	z-index: 220;
}
.nav-toggle span {
	display: block;
	width: 34px; height: 3px;
	background: #fff;
	margin: 7px 0;
	transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: flex-end;
	isolation: isolate;
	overflow: hidden;
	padding-bottom: clamp(3rem, 8vh, 6rem);
}
.hero-bg {
	position: absolute; inset: 0; z-index: -1;
	background: url("../img/hero.jpg") center 28% / cover no-repeat;
	filter: saturate(0.85);
	animation: hero-zoom 16s ease-out forwards;
}
.hero-bg::after {
	content: "";
	position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(11, 31, 63, 0.55) 0%, rgba(11, 31, 63, 0.25) 45%, rgba(11, 31, 63, 0.97) 100%),
		linear-gradient(75deg, rgba(12, 70, 142, 0.6), transparent 60%);
}
@keyframes hero-zoom {
	from { transform: scale(1.07); }
	to   { transform: scale(1); }
}

/* teaser wideo w tle hero – wstrzykiwany przez JS (main.js), wjeżdża
   płynnie nad zdjęcie-placeholder; gradient ::after zostaje na wierzchu */
.hero-video {
	position: absolute;
	inset: 0;
	overflow: hidden;
	opacity: 0;
	transition: opacity 1.2s ease;
}
.hero-video.is-playing { opacity: 1; }
.hero-video iframe {
	position: absolute;
	top: 50%; left: 50%;
	/* pokrycie kadru 16:9 niezależnie od proporcji hero; player renderowany
	   2x większy i skalowany w dół — YouTube dobiera jakość strumienia do
	   rozmiaru playera, więc dostaje sygnał do serwowania HD */
	width: max(200%, 355.56vh);
	height: max(200%, 112.5vw);
	transform: translate(-50%, -50%) scale(0.5);
	pointer-events: none;
	border: 0;
}

.hero-inner {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--pad);
}

.hero-eyebrow {
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 1.2rem;
}

.hero-title {
	margin: 0 0 1rem;
	font-family: var(--font-display);
	font-weight: 400;
	text-transform: uppercase;
	line-height: 0.92;
	font-size: clamp(4.2rem, 16vw, 12.5rem);
	letter-spacing: 0.01em;
}
.hero-line { display: block; }
.hero-line--outline {
	color: transparent;
	-webkit-text-stroke: 2px rgba(255, 255, 255, 0.85);
	text-stroke: 2px rgba(255, 255, 255, 0.85);
}

/* tagline jest częścią H1 (SEO), ale wizualnie zachowuje styl podtytułu */
.hero-tag {
	display: block;
	font-family: var(--font-body);
	font-size: clamp(1rem, 2.2vw, 1.35rem);
	font-weight: 500;
	letter-spacing: 0.24em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--muted);
	margin-top: 1.1rem;
	margin-bottom: 1.2rem;
}

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; }

/* ---------- Przyciski ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 1.05rem 2.2rem;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
/* smuga światła przelatująca przez przycisk na hover */
.btn::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	left: -70%;
	width: 45%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
	transform: skewX(-20deg);
	transition: left 0.55s ease;
	pointer-events: none;
}
.btn:hover::after { left: 130%; }

.btn-solid {
	background: var(--accent);
	color: var(--ink);
	border: 1px solid var(--accent);
}
.btn-solid:hover { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--ink); }

.btn-play {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.5);
}
.btn-play:hover { border-color: #fff; color: #fff; }
.btn-play svg { flex: none; }

/* ---------- Nagłówki sekcji ---------- */
.section-head {
	display: flex;
	align-items: baseline;
	gap: 1.2rem;
	margin-bottom: clamp(1.7rem, 3.5vw, 2.6rem);
	padding-bottom: 1rem;
	position: relative;
}
/* linia pod nagłówkiem rośnie od lewej po wejściu w viewport */
.section-head::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: var(--line);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 1s var(--ease) 0.2s;
}
.section-head.is-visible::after { transform: scaleX(1); }
.section-no {
	font-family: var(--font-display);
	font-size: clamp(1.1rem, 2vw, 1.5rem);
	color: var(--accent);
	letter-spacing: 0.04em;
	display: inline-block;
	opacity: 0;
	transform: translateX(-14px);
	transition: opacity 0.6s var(--ease) 0.35s, transform 0.6s var(--ease) 0.35s;
}
.section-head.is-visible .section-no { opacity: 1; transform: none; }
.section-head h2 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(2.2rem, 6vw, 4.2rem);
	text-transform: uppercase;
	line-height: 1;
	letter-spacing: 0.015em;
}

/* ---------- 01 O mnie ---------- */
.about-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
.about-photo {
	margin: 0;
	position: relative;
	overflow: hidden;
}
.about-photo img {
	filter: grayscale(35%) contrast(1.05);
	transition: filter 0.5s ease, transform 0.5s ease;
}
.about-photo:hover img { filter: none; transform: scale(1.03); }
.about-photo::after {
	content: "";
	position: absolute; inset: 0;
	border: 1px solid rgba(255, 255, 255, 0.18);
	pointer-events: none;
}

.about-lead {
	font-size: clamp(1.3rem, 2.6vw, 1.8rem);
	line-height: 1.45;
	font-weight: 500;
	color: #fff;
	margin-bottom: 1.4em;
}
.about-lead em {
	font-style: normal;
	color: var(--accent);
}
.about-body p:not(.about-lead) { color: var(--muted); }
.about-body strong { color: var(--text); }

/* ---------- Film ---------- */
.video-strip {
	position: relative;
	isolation: isolate;
	min-height: 62vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
	padding-block: var(--space);
}
.video-strip-bg {
	position: absolute; inset: 0; z-index: -1;
	background: url("../img/video-bg.jpg") center 30% / cover no-repeat;
}
@media (min-width: 1024px) {
	.video-strip-bg { background-attachment: fixed; }
}
.video-strip-bg::after {
	content: "";
	position: absolute; inset: 0;
	background: rgba(9, 26, 53, 0.74);
}

.video-kicker {
	font-weight: 700;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	font-size: 0.8rem;
	color: var(--accent);
	margin-bottom: 1.6rem;
}
.video-title {
	margin: 0 0 2.2rem;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(2rem, 5vw, 3.4rem);
	text-transform: uppercase;
	line-height: 1;
}
/* osadzony player z pełnym filmem */
.video-embed {
	width: min(920px, calc(100vw - 2 * var(--pad)));
	aspect-ratio: 16 / 9;
	margin-inline: auto;
	border: 1px solid var(--line);
	background: #000;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* fasada playera: poster + własny przycisk play zamiast interfejsu YouTube */
.video-poster {
	position: relative;
	display: block;
	width: 100%; height: 100%;
	padding: 0; border: 0;
	background: #000;
	cursor: pointer;
}
.video-poster img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	filter: saturate(0.9);
	transition: transform 0.45s ease, filter 0.45s ease;
}
.video-poster:hover img,
.video-poster:focus-visible img { transform: scale(1.03); filter: none; }
.video-poster-play {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 74px; height: 74px;
	border: 1px solid rgba(255, 255, 255, 0.85);
	background: rgba(9, 26, 53, 0.55);
	color: #fff;
	backdrop-filter: blur(4px);
	transition: background-color 0.2s ease;
}
.video-poster-play svg { margin-left: 3px; }
.video-poster:hover .video-poster-play,
.video-poster:focus-visible .video-poster-play { background: var(--accent); }

/* ---------- 02 Treningi ---------- */
.trainings-intro { max-width: 60rem; }
.trainings-intro p:first-child { color: var(--muted); }
.trainings-intro strong, .trainings-intro a { color: var(--text); }
.trainings-intro a { color: var(--accent); }
.trainings-see-you {
	font-family: var(--font-display);
	font-size: clamp(1.3rem, 2.6vw, 1.9rem);
	text-transform: uppercase;
	color: var(--accent);
	letter-spacing: 0.03em;
}

.trainings-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(1.4rem, 3vw, 2.4rem);
	margin-top: clamp(2rem, 4vw, 3rem);
}
.t-card {
	background: var(--bg-elev);
	border: 1px solid var(--line);
	padding-top: clamp(1.8rem, 3.5vw, 2.6rem);
	transition: border-color 0.3s ease, transform 0.3s ease;
}
.t-card:hover { border-color: var(--accent); transform: translateY(-5px); }
.t-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 84px; height: 84px;
	margin-left: clamp(1.4rem, 3vw, 2rem);
	border: 1px solid var(--accent);
	color: var(--accent);
	transition: background-color 0.3s ease, color 0.3s ease;
}
.t-card:hover .t-card-icon { background: var(--accent); color: var(--ink); }
.t-card-body { padding: clamp(1.4rem, 3vw, 2rem); }
.t-card-body h3 {
	margin: 0 0 0.6rem;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.t-card-body p { margin: 0; color: var(--muted); }

/* ---------- 03 Certyfikaty ---------- */
.certificates-intro {
	max-width: 58rem;
	color: var(--muted);
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
.certificates-intro strong { color: var(--text); }

.cert-scroller {
	display: flex;
	gap: clamp(0.9rem, 2vw, 1.4rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-inline: max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad)));
	padding-bottom: 1rem;
	scrollbar-width: thin;
	scrollbar-color: var(--accent) transparent;
}
.cert-scroller a {
	flex: 0 0 clamp(230px, 26vw, 330px);
	scroll-snap-align: start;
	border: 1px solid var(--line);
	transition: border-color 0.25s ease, transform 0.25s ease;
	background: #fff;
}
.cert-scroller a:hover { border-color: var(--accent); transform: translateY(-4px); }
.cert-scroller img {
	aspect-ratio: 550 / 500;
	object-fit: cover;
	width: 100%;
	transition: opacity 0.6s var(--ease) var(--d, 0ms), transform 0.6s var(--ease) var(--d, 0ms);
}
/* certyfikaty wjeżdżają jeden po drugim */
.cert-scroller a:nth-child(2) img { --d: 70ms; }
.cert-scroller a:nth-child(3) img { --d: 140ms; }
.cert-scroller a:nth-child(4) img { --d: 210ms; }
.cert-scroller a:nth-child(5) img { --d: 280ms; }
.cert-scroller a:nth-child(6) img { --d: 350ms; }
.cert-scroller a:nth-child(7) img { --d: 420ms; }
.cert-scroller a:nth-child(8) img { --d: 490ms; }
.cert-scroller.reveal img { opacity: 0; transform: translateY(18px); }
.cert-scroller.is-visible img { opacity: 1; transform: none; }
.cert-hint {
	text-align: center;
	color: var(--muted);
	letter-spacing: 0.3em;
	font-size: 0.78rem;
	text-transform: uppercase;
	margin: 0.6rem 0 0;
}

/* ---------- 04 Cennik ---------- */
.pricing-intro {
	max-width: 58rem;
	color: var(--muted);
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
.pricing-intro strong { color: var(--text); }

.pricing { background: var(--bg-elev); border-block: 1px solid var(--line); }

.pricing-groups {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(2rem, 5vw, 4rem);
}
.price-group-title {
	margin: 0 0 1.4rem;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	text-transform: uppercase;
	color: var(--accent);
	letter-spacing: 0.03em;
}
.price-list {
	list-style: none;
	margin: 0; padding: 0;
}
.price-list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.05rem;
	border-bottom: 1px solid var(--line);
	transition:
		padding-left 0.25s ease,
		border-color 0.25s ease,
		opacity 0.55s var(--ease) var(--d, 0ms),
		transform 0.55s var(--ease) var(--d, 0ms);
}
.price-list li:hover { padding-left: 0.6rem; border-bottom-color: var(--accent); }
/* wiersze cennika wjeżdżają kaskadą po odsłonięciu grupy */
.price-list li:nth-child(1) { --d: 80ms; }
.price-list li:nth-child(2) { --d: 160ms; }
.price-list li:nth-child(3) { --d: 240ms; }
.price-list li:nth-child(4) { --d: 320ms; }
.price-group.reveal .price-list li { opacity: 0; transform: translateY(16px); }
.price-group.is-visible .price-list li { opacity: 1; transform: none; }
.p-name { font-weight: 500; }
.p-name small {
	display: block;
	color: var(--muted);
	font-size: 0.82rem;
	font-weight: 400;
}
.p-val {
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	line-height: 1;
	white-space: nowrap;
}
.p-val i {
	font-style: normal;
	font-size: 0.55em;
	color: var(--muted);
	margin-left: 0.2em;
}

/* ---------- 05 Galeria ---------- */
.gallery .wrap { margin-bottom: 0; }

.mosaic {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	grid-auto-rows: 230px;
	grid-auto-flow: dense;
	gap: 5px;
}
.mosaic-wide { grid-column: span 2; }
.mosaic-tall { grid-row: span 2; }

.mosaic a {
	display: block;
	position: relative;
	width: 100%; height: 100%;
	overflow: hidden;
}
.mosaic img {
	width: 100%; height: 100%;
	object-fit: cover;
	filter: grayscale(65%) contrast(1.04);
	transition: filter 0.45s ease, transform 0.45s ease;
}
.mosaic a:hover img,
.mosaic a:focus-visible img { filter: none; transform: scale(1.06); }
.mosaic a::after {
	content: "+";
	position: absolute;
	right: 0.8rem; bottom: 0.5rem;
	font-family: var(--font-display);
	font-size: 1.6rem;
	color: #fff;
	opacity: 0;
	transition: opacity 0.3s ease;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}
.mosaic a:hover::after { opacity: 1; }

/* na mobile mozaika zamienia się w poziomą karuzelę – zajmuje jeden rząd
   zamiast szesnastu kafli pod sobą */
@media (max-width: 700px) {
	.mosaic {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 8px;
		padding-inline: var(--pad);
		scrollbar-width: none;
	}
	.mosaic::-webkit-scrollbar { display: none; }
	.mosaic li {
		flex: 0 0 min(78vw, 340px);
		scroll-snap-align: center;
		aspect-ratio: 700 / 430;
	}
}

/* ---------- Wielki cytat ---------- */
.big-quote {
	padding-block: var(--space);
	background:
		radial-gradient(60% 120% at 50% 0%, rgba(18, 88, 172, 0.4), transparent 70%);
	text-align: center;
}
.big-quote blockquote { margin-block: 0; }
.big-quote p {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.7rem, 5vw, 3.6rem);
	line-height: 1.25;
	text-transform: uppercase;
	max-width: 62rem;
	margin-inline: auto;
	letter-spacing: 0.01em;
}
/* słowa rozjaśniane sekwencyjnie po wejściu w viewport (reveal → is-visible) */
.big-quote .qw {
	color: var(--muted);
	opacity: 0.3;
	transition: color 0.45s ease, opacity 0.45s ease;
	transition-delay: calc(var(--i, 0) * 85ms);
}
.big-quote .is-visible .qw {
	color: #fff;
	opacity: 1;
}
.big-quote .qw-accent { position: relative; }
.big-quote .is-visible .qw-accent { color: var(--accent); }
.big-quote .qw-accent::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -0.06em;
	height: 3px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.6s ease;
	transition-delay: calc(var(--i, 0) * 85ms + 350ms);
}
.big-quote .is-visible .qw-accent::after { transform: scaleX(1); }

/* ---------- 06 FAQ ---------- */
.faq-list { max-width: 60rem; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.2rem;
	padding: 1.2rem 0;
	font-weight: 700;
	font-size: clamp(1.02rem, 2vw, 1.2rem);
	color: var(--text);
	transition: color 0.2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
	content: "+";
	flex: none;
	font-family: var(--font-display);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--accent);
	transition: transform 0.25s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--accent-soft); }
.faq-item p { margin: 0 0 1.35rem; max-width: 52rem; color: var(--muted); }
.faq-item p strong { color: var(--text); }

/* ---------- 07 Kontakt ---------- */
.contact { text-align: left; }
.contact-ask {
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	font-size: clamp(0.8rem, 1.6vw, 0.95rem);
	color: var(--muted);
	margin-bottom: 1rem;
}
.contact-phone {
	display: inline-block;
	font-family: var(--font-display);
	font-size: clamp(2.6rem, 9vw, 7rem);
	line-height: 1.05;
	color: #fff;
	text-decoration: none;
	letter-spacing: 0.01em;
	transition: color 0.25s ease;
}
.contact-phone:hover { color: var(--accent); }
.contact-meta {
	margin-top: 1.4rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	align-items: center;
	font-size: clamp(1rem, 2vw, 1.2rem);
	color: var(--muted);
}
.contact-meta a { color: var(--text); }
.contact-meta a:hover { color: var(--accent); }

/* ---------- Stopka ---------- */
.site-footer {
	border-top: 1px solid var(--line);
	text-align: center;
	padding: 2.6rem var(--pad);
	color: var(--muted);
	font-size: 0.9rem;
}
.footer-logo { width: 180px; margin: 0 auto 1rem; opacity: 0.9; }
.site-footer a { color: var(--text); }
.site-footer a:hover { color: var(--accent); }

/* ---------- Lightbox / modal ---------- */
.lightbox,
.video-modal {
	position: fixed;
	inset: 0;
	z-index: 400;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(4, 14, 30, 0.95);
	padding: clamp(0.8rem, 3vw, 2.5rem);
}
.lightbox[hidden],
.video-modal[hidden] { display: none; }

.lightbox-figure { margin: 0; max-width: min(1100px, 92vw); max-height: 88vh; display: flex; }
.lightbox-figure img {
	max-width: 100%; max-height: 88vh; width: auto;
	object-fit: contain;
	box-shadow: 0 20px 80px rgba(0, 0, 0, 0.7);
}

.lightbox-close {
	position: absolute;
	top: 0.9rem; right: 1.1rem;
	background: none; border: 0;
	color: #fff;
	font-size: 2.6rem; line-height: 1;
	cursor: pointer;
	padding: 0.3rem 0.6rem;
	opacity: 0.8;
	transition: opacity 0.2s ease;
}
.lightbox-close:hover { opacity: 1; }

.lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: #fff;
	font-size: 2.2rem; line-height: 1;
	width: 54px; height: 54px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 6px;
	transition: background-color 0.2s ease;
}
.lightbox-nav:hover { background: rgba(255, 255, 255, 0.18); }
.lightbox-prev { left: clamp(0.4rem, 2vw, 1.6rem); }
.lightbox-next { right: clamp(0.4rem, 2vw, 1.6rem); }

.video-modal-frame {
	width: min(1000px, 94vw);
	aspect-ratio: 16 / 9;
	background: #000;
	overflow: hidden;
	box-shadow: 0 20px 80px rgba(0, 0, 0, 0.7);
}
.video-modal-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Reveal (jeden system ruchu: --ease, 0.8 s) ---------- */
.reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal[data-anim="left"] { transform: translateX(-40px); }
.reveal[data-anim="right"] { transform: translateX(40px); }
.reveal.is-visible { opacity: 1; transform: none; }

/* kaskady w siatkach (klasa .reveal jest zdejmowana po animacji,
   więc opóźnienia nie spowalniają późniejszych hoverów) */
.trainings-cards .t-card.reveal:nth-child(2) { transition-delay: 0.12s; }
.mosaic li.reveal:nth-child(3n+2) { transition-delay: 0.08s; }
.mosaic li.reveal:nth-child(3n+3) { transition-delay: 0.16s; }

/* stagger dla hero */
.hero-line.reveal { transition-delay: 0.1s; }
.hero-line--outline.reveal { transition-delay: 0.22s; }
.hero-tag.reveal { transition-delay: 0.5s; }
.hero-actions.reveal { transition-delay: 0.62s; }

/* maskowane odsłonięcie linii hero i numeru telefonu */
.hero-line { overflow: hidden; }
.hero-line .line-inner,
.contact-phone .line-inner {
	display: block;
	transform: translateY(108%);
	transition: transform 0.9s var(--ease);
}
.hero-title .hero-line:nth-child(1) .line-inner { transition-delay: 0.15s; }
.hero-title .hero-line:nth-child(2) .line-inner { transition-delay: 0.3s; }
.hero-line.is-visible .line-inner { transform: none; }

.contact-phone { overflow: hidden; }
.contact-phone .line-inner { transition-delay: 0.1s; }
.contact-phone.is-visible .line-inner { transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.reveal { opacity: 1; transform: none; transition: none; }
	.hero-line .line-inner,
	.contact-phone .line-inner { transform: none !important; }
	.section-head::after { transform: none !important; }
	.section-no { opacity: 1 !important; transform: none !important; }
	.hero-bg { animation: none; }
	*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- Responsywność ---------- */
@media (max-width: 900px) {
	.about-grid { grid-template-columns: 1fr; }
	.about-photo { max-width: 560px; }
}

@media (max-width: 820px) {
	:root { --header-h: 64px; }

	.site-header { border-bottom-color: var(--line); }
	.site-header::before {
		background: rgba(9, 26, 53, 0.92);
		backdrop-filter: blur(12px);
	}

	/* klasyczny układ: logo do lewej, burger dosunięty do prawej */
	.nav-toggle {
		display: block;
		margin-left: auto;
		margin-right: -0.7rem; /* kreski licują z prawą krawędzią treści mimo paddingu przycisku */
	}

	.nav-menu {
		position: fixed;
		inset: 0;
		top: var(--header-h);
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 0;
		padding: 2rem var(--pad);
		background: var(--bg);
		transform: translateX(100%);
		transition: transform 0.3s ease;
		overflow-y: auto;
	}
	.nav-menu.is-open { transform: translateX(0); }
	.nav-menu li { width: 100%; }
	.nav-menu a {
		display: block;
		width: 100%;
		font-size: 1.3rem;
		padding: 1rem 0.2rem;
		border-bottom: 1px solid var(--line);
	}
	.nav-menu .nav-cta {
		margin: 1.4rem 0 0;
		text-align: center;
		border: 1px solid var(--accent);
		font-size: 1.05rem;
		padding: 0.85rem 1rem;
	}

	/* równomierny rozkład elementów hero na całej wysokości ekranu */
	.hero { align-items: stretch; padding-bottom: 1.5rem; }
	.hero-inner {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		padding-top: calc(var(--header-h) + 1rem);
	}
	.hero-eyebrow,
	.hero-title { margin-bottom: 0; }
	.hero-actions { gap: 0.9rem; }
	.hero-actions .btn {
		padding: 0.75rem 1.4rem;
		font-size: 0.78rem;
	}
	.contact-phone { overflow-wrap: anywhere; }
	.lightbox-nav { width: 44px; height: 44px; font-size: 1.8rem; }
}

/* ============================================================
   Baner cookies
   ============================================================ */
.cookie-banner {
	position: fixed;
	left: 50%;
	bottom: clamp(0.8rem, 2vw, 1.6rem);
	transform: translateX(-50%) translateY(160%);
	width: min(880px, calc(100% - 1.6rem));
	z-index: 350;
	background: var(--bg-elev);
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: 0 18px 55px rgba(0, 0, 0, 0.5);
	padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(1.2rem, 3vw, 1.9rem);
	opacity: 0;
	visibility: hidden;
	transition: transform 0.5s var(--ease), opacity 0.4s var(--ease), visibility 0.5s;
}
.cookie-banner.is-visible {
	transform: translateX(-50%) translateY(0);
	opacity: 1;
	visibility: visible;
}
.cookie-inner {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2rem);
	flex-wrap: wrap;
}
.cookie-text {
	flex: 1 1 320px;
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--muted);
}
.cookie-text strong { color: var(--text); font-weight: 700; }
.cookie-text a { color: var(--accent); }
.cookie-actions {
	display: flex;
	flex: 0 0 auto;
	gap: 0.7rem;
	flex-wrap: wrap;
}
.cookie-btn {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.75rem 1.5rem;
	border-radius: 9px;
	border: 1px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.cookie-btn:hover { transform: translateY(-2px); }
.cookie-btn--accept { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.cookie-btn--accept:hover { background: var(--accent-soft); border-color: var(--accent-soft); }
.cookie-btn--reject { background: transparent; color: var(--text); border-color: rgba(255, 255, 255, 0.4); }
.cookie-btn--reject:hover { border-color: #fff; color: #fff; }

@media (max-width: 560px) {
	.cookie-banner { width: calc(100% - 1.2rem); }
	.cookie-actions { width: 100%; }
	.cookie-btn { flex: 1 1 auto; text-align: center; }
}

/* ============================================================
   Strona prawna (polityka prywatności)
   ============================================================ */
/* nagłówek na podstronie bez hero – tło widoczne od razu */
.site-header--solid { border-bottom-color: var(--line); }
.site-header--solid::before {
	background: rgba(9, 26, 53, 0.9);
	backdrop-filter: blur(12px);
}

.legal { padding-block: clamp(2.6rem, 6vw, 4.5rem); padding-top: calc(var(--header-h) + clamp(2.4rem, 5vw, 3.6rem)); }
.legal .wrap { max-width: 900px; }
.legal-head { margin-bottom: clamp(2rem, 5vw, 3rem); }
.legal-eyebrow {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 0.7rem;
}
.legal-head h1 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 0.98;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	font-size: clamp(2.4rem, 7vw, 4.4rem);
	margin: 0 0 0.6rem;
}
.legal-updated { color: var(--muted); font-size: 0.9rem; margin: 0; }
.legal-body { font-size: 1.02rem; }
.legal-body h2 {
	font-family: var(--font-display);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	font-size: clamp(1.4rem, 3.5vw, 2rem);
	line-height: 1.1;
	margin: 2.4em 0 0.7em;
	padding-top: 1.6rem;
	border-top: 1px solid var(--line);
}
.legal-body h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.legal-body h3 {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 1.05rem;
	margin: 1.6em 0 0.5em;
	color: var(--text);
}
.legal-body ul { margin: 0 0 1.15em; padding-left: 1.3em; }
.legal-body li { margin-bottom: 0.5em; }
.legal-body a { color: var(--accent); }
.legal-note {
	background: var(--bg-elev);
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent);
	border-radius: 10px;
	padding: 1.1rem 1.3rem;
	color: var(--muted);
	font-size: 0.92rem;
	margin: 1.6em 0;
}
.legal-contact {
	background: var(--bg-elev);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: clamp(1.2rem, 3vw, 1.8rem);
	margin-top: 1.4em;
}
.legal-contact p { margin: 0.2em 0; }
.legal-back {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 2.6rem;
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--text);
}
.legal-back:hover { color: var(--accent); }