/* ==========================================================================
   BOSS — Beat Of Street Studio | main.css
   Etap 1: global style, fonty, header, hero, marquee, footer, animacje.
   Metodyka klas: BEM-lite. Paleta: czerń + neonowy róż + biel.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTY DEKORACYJNE (lokalne, tylko do krótkich akcentów — NIE do UI/body)
   Uwaga: to graffiti display fonts — używamy ich do haseł BEZ polskich znaków
   diakrytycznych (BOSS, Nowy Targ, High Heels itd.). Body = font systemowy.
   -------------------------------------------------------------------------- */
@font-face {
	font-family: "UrbanSideWalks";
	src: url("../fonts/urbanSideWalks-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "MarkerTags";
	src: url("../fonts/MarkerTags.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* --------------------------------------------------------------------------
   2. ZMIENNE / DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
	/* Kolory bazowe */
	--c-black:        #0a0a0b;
	--c-bg:           #0a0a0b;
	--c-bg-elev:      #141416;
	--c-ink:          #ffffff;
	--c-ink-soft:     #d8d8dd;
	--c-ink-mute:     #8b8b93;
	--c-line:         rgba(255, 255, 255, 0.10);

	/* Warstwowanie sekcji strony głównej — subtelne odcienie czerni/grafitu.
	   Utrzymują klubowy, ciemny klimat; służą tylko do rozdzielenia bloków. */
	--boss-bg:         #0a0a0b;                    /* bazowa czerń (= --c-bg) */
	--boss-bg-soft:    #101013;                    /* płaski grafit — sekcja „soft" */
	--boss-bg-panel:   #141416;                    /* panel/elew (= --c-bg-elev) */
	--boss-border-soft: rgba(255, 255, 255, 0.06); /* cienki separator sekcji */

	/* Akcent — neonowy róż (roboczy #ff1fae, lekko dostrojony) */
	--c-pink:         #ff1fae;
	--c-pink-hot:     #ff4fc2;
	--c-pink-deep:    #c1067f;
	--c-pink-glow:    rgba(255, 31, 174, 0.55);

	/* ---- Typografia ----
	   font-body   = UI, menu, opis, przyciski (system stack, premium)
	   font-display = urbanSideWalks — TYLKO akcent H1 „w Nowym Targu"
	   font-tag     = MarkerTags — TYLKO drobny street detal (marquee)
	   Zasada: fonty dekoracyjne bez polskich znaków diakrytycznych. */
	--font-body: "Inter", "Helvetica Neue", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, system-ui, sans-serif;
	--font-display: "UrbanSideWalks", var(--font-body);
	--font-tag: "MarkerTags", var(--font-body);

	/* Skala typograficzna — kontrolowana (mniej „plakatowa" niż wcześniej) */
	--fs-tag:     0.72rem;                                  /* tagi High Heels/Hip-Hop/Commercial */
	--fs-menu:    0.9rem;                                   /* nawigacja */
	--fs-btn:     0.82rem;                                  /* przyciski */
	--fs-body:    clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
	--fs-lead:    clamp(1rem, 0.95rem + 0.35vw, 1.2rem);    /* opis hero — spokojny */
	--fs-h2:      clamp(1.9rem, 1.4rem + 2.4vw, 3.25rem);
	--fs-h1:      clamp(2.4rem, 1.55rem + 3.2vw, 4.5rem);   /* H1 desktop ~72px, mobile ~38px */
	--fs-h1-accent: clamp(2.9rem, 1.7rem + 4.4vw, 5.6rem);  /* akcent graffiti — kompensacja x-height */

	/* Line-height / tracking */
	--lh-tight:  1.03;
	--lh-snug:   1.12;
	--tracking-tight: -0.025em;
	--tracking-wide:  0.18em;

	/* Przyciski */
	--radius-btn: 999px;
	/* Glow pod kursorem (łatwa zmiana kolorów w jednym miejscu) */
	--btn-glow-pink:   rgba(255, 31, 174, 0.55);
	--btn-glow-purple: rgba(139, 92, 246, 0.60);

	/* Układ */
	--container:   1200px;
	--gutter:      clamp(1.25rem, 4vw, 3rem);
	--header-h:    72px;
	--radius:      14px;

	/* Ruch */
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--dur:  0.5s;
}

/* --------------------------------------------------------------------------
   3. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
	background: var(--c-bg);
	color: var(--c-ink);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.6;
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--c-pink-hot);
	outline-offset: 3px;
	border-radius: 4px;
}

h1, h2, h3 { line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; }

ul { list-style: none; padding: 0; }

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Dostępność */
.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px; height: 1px; overflow: hidden;
	white-space: nowrap;
}
.skip-link {
	position: absolute; left: 8px; top: -60px;
	background: var(--c-pink); color: #fff;
	padding: 0.6rem 1rem; border-radius: 8px; z-index: 1000;
	transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 8px; }

/* --------------------------------------------------------------------------
   4. PRZYCISKI
   -------------------------------------------------------------------------- */
/* Baza — wspólna rodzina stylistyczna. Glow i ripple sterowane z JS przez --x/--y. */
.boss-btn {
	--x: 50%;
	--y: 50%;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.875rem;              /* 14px */
	letter-spacing: 0.03em;
	text-transform: uppercase;
	line-height: 1;
	padding: 0.7em 1.4em;
	border: 1px solid transparent;
	border-radius: var(--radius-btn);
	cursor: pointer;
	overflow: hidden;                  /* przycina glow/ripple do kształtu */
	isolation: isolate;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.2s var(--ease), box-shadow 0.3s var(--ease),
	            border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.boss-btn__label { position: relative; z-index: 2; }

/* Focus ring — zachowuje kształt pill (nadpisuje globalne border-radius:4px) */
.boss-btn:focus-visible {
	outline: 2px solid var(--c-pink-hot);
	outline-offset: 2px;
	border-radius: var(--radius-btn);
}

/* Glow podążający za kursorem — radial-gradient w punkcie (--x,--y) */
.boss-btn__glow {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s var(--ease);
	background: radial-gradient(
		130px circle at var(--x) var(--y),
		var(--btn-glow-purple) 0%,
		var(--btn-glow-pink) 38%,
		transparent 72%
	);
}

/* Ripple po kliknięciu — wstrzykiwany przez JS, sam się usuwa */
.boss-btn__ripple {
	position: absolute;
	z-index: 1;
	width: 14px; height: 14px;
	margin: -7px 0 0 -7px;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, var(--btn-glow-pink) 45%, transparent 70%);
	transform: scale(0);
	opacity: 0.6;
	animation: bossRipple 0.6s var(--ease) forwards;
}
@keyframes bossRipple {
	to { transform: scale(16); opacity: 0; }
}

/* ---- PRIMARY: gradient róż→purple, mocniejszy glow ---- */
.boss-btn--primary {
	color: #fff;
	background: linear-gradient(135deg, #ff1fae 0%, #b3199c 52%, #8b5cf6 130%);
	border-color: rgba(255, 255, 255, 0.16);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset,
	            0 6px 18px -10px var(--c-pink-glow);
}
.boss-btn--primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24) inset,
	            0 12px 34px -10px var(--btn-glow-purple);
}
.boss-btn--primary:hover .boss-btn__glow { opacity: 0.9; }
.boss-btn--primary:active { transform: translateY(0); }

/* ---- SECONDARY: outline/ghost, słabszy glow ---- */
.boss-btn--secondary {
	color: var(--c-ink-soft);
	background: rgba(255, 255, 255, 0.025);
	border-color: var(--c-line);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.boss-btn--secondary:hover {
	color: var(--c-ink);
	border-color: rgba(255, 31, 174, 0.55);
	transform: translateY(-1px);
	box-shadow: 0 8px 24px -14px var(--btn-glow-pink);
}
.boss-btn--secondary:hover .boss-btn__glow { opacity: 0.28; }

/* ---- HEADER: kompaktowy primary, subtelniejszy ---- */
.boss-btn--header {
	color: #fff;
	font-size: 0.78rem;               /* ~12.5px */
	padding: 0.55em 1.1em;
	background: linear-gradient(135deg, #ff1fae 0%, #c11a8f 60%, #9b52e0 130%);
	border-color: rgba(255, 255, 255, 0.14);
	box-shadow: 0 4px 14px -10px var(--c-pink-glow);
}
.boss-btn--header:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px -12px var(--btn-glow-purple);
}
.boss-btn--header:hover .boss-btn__glow { opacity: 0.5; }

/* Urządzenia bez hovera (dotyk) — bez glow, prosto i lekko */
@media (hover: none) {
	.boss-btn__glow { display: none; }
}

/* --------------------------------------------------------------------------
   5. HEADER
   -------------------------------------------------------------------------- */
.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	height: var(--header-h);
	display: flex;
	align-items: center;
	background: transparent;
	transition: background-color 0.3s var(--ease), backdrop-filter 0.3s var(--ease),
	            border-color 0.3s var(--ease), height 0.3s var(--ease);
	border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
	background: rgba(10, 10, 11, 0.82);
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	border-bottom-color: var(--c-line);
	height: 64px;
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Branding = sam znak graficzny (bez dopisywanego tekstu) */
.site-header__brand {
	display: inline-flex;
	align-items: center;
	margin-right: auto;
	transition: opacity 0.2s var(--ease);
}
.site-header__brand:hover { opacity: 0.82; }
.site-header__logo {
	width: auto;
	height: 40px;
	object-fit: contain;
	transition: height 0.3s var(--ease);
}
.site-header.is-scrolled .site-header__logo { height: 34px; }

/* Nawigacja */
.nav__list { display: flex; align-items: center; gap: clamp(1.1rem, 2vw, 2rem); }
.nav__link {
	position: relative;
	font-size: var(--fs-menu);
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--c-ink-soft);
	padding: 0.4rem 0;
	transition: color 0.2s var(--ease);
}
.nav__link::after {
	content: "";
	position: absolute;
	left: 0; bottom: -2px;
	width: 100%; height: 2px;
	background: var(--c-pink);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.28s var(--ease);
}
.nav__link:hover { color: var(--c-ink); }
.nav__link:hover::after { transform: scaleX(1); }

.site-header__cta { flex-shrink: 0; }

/* Hamburger */
.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px; height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--c-line);
	border-radius: 10px;
	cursor: pointer;
}
.nav-toggle__bar {
	display: block;
	width: 20px; height: 2px;
	margin-inline: auto;
	background: var(--c-ink);
	transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: center;
	padding-top: var(--header-h);
	overflow: hidden;
	isolation: isolate;
}

/* .hero__media tworzy własny kontekst stackingu (position + z-index), więc dodatnie
   z-indexy warstw poniżej są w nim izolowane i nie przebijają nad .hero__content. */
.hero__media { position: absolute; inset: 0; z-index: -2; }

/* Video w tle — pokrywa placeholder, leży pod overlayem i ziarnem */
.hero__video {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	z-index: 1;
}

/* Placeholder pod video — animowany gradient „scena/światła" (warstwa bazowa/fallback) */
.hero__placeholder {
	position: absolute; inset: 0;
	z-index: 0;
	background:
		radial-gradient(80% 75% at 80% 6%, rgba(255, 31, 174, 0.20), transparent 55%),
		radial-gradient(70% 70% at 10% 95%, rgba(150, 20, 110, 0.13), transparent 60%),
		linear-gradient(155deg, #160410 0%, #0c0a0d 45%, #08080a 100%);
	background-size: 128% 128%;
	animation: heroPan 22s ease-in-out infinite alternate;
}
@keyframes heroPan {
	0%   { background-position: 0% 0%; }
	100% { background-position: 100% 100%; }
}

/* Overlay dla czytelności tekstu na video */
.hero__overlay {
	position: absolute; inset: 0;
	background:
		linear-gradient(90deg, rgba(10,10,11,0.78) 0%, rgba(10,10,11,0.35) 55%, rgba(10,10,11,0.15) 100%),
		linear-gradient(0deg, rgba(10,10,11,0.9) 0%, transparent 45%);
	z-index: 2;
}

/* Ziarno / grain */
.hero__grain {
	position: absolute; inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	opacity: 0.05;
	mix-blend-mode: overlay;
	pointer-events: none;
	z-index: 3;
}

/* Blok treści = dwukolumnowy layout: lewa = branding (logo + wordmark), prawa = tekst + CTA */
.hero__content {
	position: relative;
	max-width: var(--container);
	padding-block: 3rem;
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
}
.hero__tags, .hero__title, .hero__lead { max-width: 620px; }

/* Lewa kolumna — komplet brandowy z prawdziwych assetów (logo BOSS + wordmark) */
.hero__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(0.35rem, 0.8vw, 0.7rem);
	position: relative;
	isolation: isolate;
}
/* Subtelny glow za logo — czytelność na ciemnym tle, bez ciężkiego efektu */
.hero__brand::before {
	content: "";
	position: absolute;
	inset: -14% -8% 4%;
	z-index: -1;
	background: radial-gradient(58% 52% at 50% 40%, rgba(255, 31, 174, 0.20), transparent 70%);
	filter: blur(6px);
	pointer-events: none;
}
.hero__brand-logo {
	width: clamp(210px, 24vw, 340px);
	height: auto;
	filter: drop-shadow(0 12px 40px rgba(255, 31, 174, 0.26));
}
.hero__brand-wordmark {
	width: clamp(190px, 21vw, 300px);
	height: auto;
	opacity: 0.96;
	/* Plik logo BOSS ma ~61px przezroczystego pola u dołu (kwadrat 700×700) —
	   podciągamy wordmark w górę, żeby komplet był zwarty (kompensacja per breakpoint niżej). */
	margin-top: -1.7rem;
}

/* Tagi stylów — czytelne kapsuły (system font, NIE graffiti) */
.hero__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.6rem; }
.hero__tag {
	font-size: var(--fs-tag);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--c-ink-soft);
	padding: 0.42em 0.85em;
	border: 1px solid var(--c-line);
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.035);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

/* H1 — linia główna premium (system), druga linia = akcent graffiti */
.hero__title { margin-bottom: 1.4rem; }
.hero__title-main {
	display: block;
	font-family: var(--font-body);
	font-size: var(--fs-h1);
	font-weight: 800;
	line-height: var(--lh-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--c-ink);
}
.hero__title-accent {
	display: block;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--fs-h1-accent);
	line-height: 0.95;
	letter-spacing: 0.01em;
	color: var(--c-pink);
	margin-top: 0.08em;
	text-shadow: 0 0 34px rgba(255, 31, 174, 0.32);
}

.hero__lead {
	font-size: var(--fs-lead);
	line-height: 1.55;
	color: var(--c-ink-soft);
	max-width: 42ch;
	margin-bottom: 2rem;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Scroll indicator — subtelny, nie koliduje z CTA (sam wskaźnik, bez napisu) */
.hero__scroll {
	position: absolute;
	left: 50%; bottom: 1.75rem;
	transform: translateX(-50%);
	display: inline-flex;
	z-index: 2;
	opacity: 0.65;
	transition: opacity 0.2s var(--ease);
}
.hero__scroll:hover { opacity: 1; }
.hero__scroll-line {
	width: 1px; height: 40px;
	background: linear-gradient(var(--c-pink), transparent);
	animation: scrollPulse 1.8s ease-in-out infinite;
	transform-origin: top;
}
@keyframes scrollPulse {
	0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
	50%      { transform: scaleY(1);   opacity: 1; }
}

/* --------------------------------------------------------------------------
   7. MARQUEE
   -------------------------------------------------------------------------- */
.marquee {
	overflow: hidden;
	border-block: 1px solid var(--c-line);
	background: var(--c-bg-elev);
	padding-block: 0.9rem;
	white-space: nowrap;
}
.marquee__track {
	display: inline-flex;
	align-items: center;
	gap: 1.5rem;
	animation: marquee 28s linear infinite;
	will-change: transform;
}
.marquee__item {
	font-family: var(--font-tag);
	font-size: clamp(1.4rem, 1rem + 2vw, 2.6rem);
	color: var(--c-ink);
	letter-spacing: 0.02em;
}
.marquee__sep { color: var(--c-pink); font-size: 1rem; }
@keyframes marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.marquee:hover .marquee__track { animation-play-state: paused; }

/* --------------------------------------------------------------------------
   8. SEKCJE (placeholder — kolejne etapy)
   -------------------------------------------------------------------------- */
.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section__title { font-size: var(--fs-h2); margin-bottom: 0.6rem; }
.section--placeholder .section__title::after {
	content: "";
	display: block;
	width: 64px; height: 4px;
	margin-top: 0.6rem;
	background: var(--c-pink);
	border-radius: 4px;
}
.section__note { color: var(--c-ink-mute); max-width: 52ch; }
.section__note a { color: var(--c-pink-hot); }

/* --- Warstwowanie sekcji (home) ----------------------------------------
   Subtelne rozdzielenie bloków strony głównej BEZ zmiany layoutu, treści ani
   kart. Różnicujemy tylko tło, oddech i cienkie separatory, żeby scroll czuł
   osobne sekcje zamiast jednej długiej czarnej płaszczyzny. Wszystkie warianty
   zostają w ciemnej, klubowej palecie (czerń / grafit + drobny róż w tle).
   `position: relative` — separatory ::before rysujemy jako miękkie linie. */
.boss-section--alt,
.boss-section--soft,
.boss-section--deep { position: relative; }

/* Miękki separator u góry — hairline wygaszany po bokach (nie twarda ramka). */
.boss-section--alt::before,
.boss-section--soft::before,
.boss-section--deep::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(90deg,
		transparent,
		var(--boss-border-soft) 18%,
		var(--boss-border-soft) 82%,
		transparent);
	pointer-events: none;
}

/* „alt" — otwiera content: grafit + bardzo delikatny różowy radial glow u góry. */
.boss-section--alt {
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(255, 31, 174, 0.06), transparent 44%),
		linear-gradient(180deg, #101014 0%, #0b0b0d 100%);
}

/* „soft" — płaski, jednolity grafit; własny, spokojny obszar bloku. */
.boss-section--soft {
	background: var(--boss-bg-soft);
	padding-block: clamp(4rem, 9vw, 8rem); /* nieco większy oddech niż baza */
}

/* „deep" — głęboka czerń z subtelnym pionowym gradientem (ciemniej po brzegach). */
.boss-section--deep {
	background: linear-gradient(180deg, #08080a 0%, #0d0d11 52%, #08080a 100%);
}

/* Intro — krótkie wprowadzenie pod hero */
.intro { border-bottom: 1px solid var(--c-line); }
.intro__inner { max-width: 62ch; }
.intro__eyebrow {
	font-size: var(--fs-eyebrow);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--c-pink-hot);
	margin-bottom: 0.9rem;
}
.intro__title { font-size: var(--fs-h2); margin-bottom: 1rem; }
.intro__title em { color: var(--c-pink); font-style: normal; }
.intro__text { color: var(--c-ink-soft); font-size: var(--fs-lead); line-height: 1.5; }
.intro__text + .intro__text { margin-top: 1rem; font-size: var(--fs-body); color: var(--c-ink-mute); }

/* --------------------------------------------------------------------------
   8b. GALERIA — „Tak tańczy BOSS" (scattered kafelki)
   Reveal na [data-reveal] (obserwator w main.js). Rotacja/offset = :nth-child.
   -------------------------------------------------------------------------- */
.boss-gallery { position: relative; overflow: hidden; border-bottom: 1px solid var(--c-line); }

.boss-gallery__head { max-width: 60ch; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.boss-gallery__eyebrow {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--c-pink-hot);
	margin-bottom: 0.9rem;
}
.boss-gallery__title { font-size: var(--fs-h2); margin-bottom: 1rem; }
.boss-gallery__title em {
	font-style: normal;
	color: var(--c-pink);
	text-shadow: 0 0 30px rgba(255, 31, 174, 0.30);
}
.boss-gallery__text { color: var(--c-ink-soft); font-size: var(--fs-lead); line-height: 1.5; max-width: 54ch; }

/* Grid — desktop 4 kolumny; „scatter" robią rotacje + offsety niżej */
.boss-gallery__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1rem, 2vw, 1.6rem);
	align-items: start;
}

/* Kafelek — bazowy stan = ukryty (reveal steruje JS przez .is-visible).
   WYDAJNOŚĆ: hover animuje WYŁĄCZNIE transform (kompozytowany na GPU).
   Reveal to jednorazowa @keyframes (fill: backwards) — nie dokłada
   transition-delay do hovera, więc kafelki reagują natychmiast.        */
.boss-gallery__item {
	--rot: 0deg;
	--ty: 0px;
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius);
	border: 1px solid var(--c-line);
	background: var(--c-bg-elev);
	box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.8);
	opacity: 0;
	transform: translateY(30px) rotate(var(--rot)) scale(0.98);
	transition: transform 0.28s var(--ease);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	will-change: transform;
}
.boss-gallery__item.is-visible {
	opacity: 1;
	transform: translateY(var(--ty)) rotate(var(--rot));
	animation: boss-gallery-in 0.7s var(--ease) backwards;
	animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes boss-gallery-in {
	from { opacity: 0; transform: translateY(30px) rotate(var(--rot)) scale(0.98); }
}
/* Klip przeniesiony z .item na obraz — dzięki temu glow może wyjść poza kafelek */
/* Kafelek jako przycisk — wypełnia figurę, reset stylów buttona.
   cursor:zoom-in sygnalizuje powiększanie (ten sam wzorzec co .gallery-page__btn). */
.boss-gallery__btn {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	border-radius: var(--radius);
	cursor: zoom-in;
	-webkit-appearance: none;
	appearance: none;
}
.boss-gallery__btn:focus-visible { outline: 2px solid var(--c-pink-hot); outline-offset: 3px; }

.boss-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius);
}

/* Delikatny dolny gradient dla spójności z ciemnym tłem */
.boss-gallery__item::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: var(--radius);
	background: linear-gradient(180deg, transparent 55%, rgba(10, 10, 11, 0.38) 100%);
	opacity: 0.7;
	transition: opacity 0.3s var(--ease);
}

/* Różowy glow jako TANI pseudo-element: animujemy tylko opacity (kompozyt),
   nie dynamiczny box-shadow. Leży za kafelkiem (z-index:-1), spilluje na zewnątrz. */
.boss-gallery__item::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: var(--radius);
	box-shadow: 0 18px 55px -22px var(--c-pink-glow),
	            0 0 0 1px rgba(255, 31, 174, 0.35);
	opacity: 0;
	transition: opacity 0.3s var(--ease);
	pointer-events: none;
}

/* Rotacje / offsety — elegancki scatter, nie chaos */
.boss-gallery__item:nth-child(6n+1) { --rot: -4deg; --ty: 10px; }
.boss-gallery__item:nth-child(6n+2) { --rot:  3deg; --ty: -8px; }
.boss-gallery__item:nth-child(6n+3) { --rot: -2deg; --ty: 16px; }
.boss-gallery__item:nth-child(6n+4) { --rot:  4deg; --ty: -4px; }
.boss-gallery__item:nth-child(6n+5) { --rot: -3deg; --ty:  6px; }
.boss-gallery__item:nth-child(6n+6) { --rot:  2deg; --ty: -12px; }

/* Hover (tylko mysz + realny wskaźnik) — prostuje, delikatnie unosi, subtelny glow.
   Zero animowanego box-shadow/filter/blur — tylko transform + opacity glow. */
@media (hover: hover) and (pointer: fine) {
	.boss-gallery__item.is-visible:hover {
		transform: translateY(calc(var(--ty) - 6px)) rotate(0deg) scale(1.03);
		z-index: 2;
	}
	.boss-gallery__item.is-visible:hover::before { opacity: 1; }
	.boss-gallery__item.is-visible:hover::after  { opacity: 0.25; }
}

.boss-gallery__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	margin-top: clamp(2rem, 5vw, 3.25rem);
}

/* Tablet — 3 kolumny, łagodniejszy scatter */
@media (max-width: 900px) {
	.boss-gallery__grid { grid-template-columns: repeat(3, 1fr); }
	.boss-gallery__item { --ty: 0px !important; }
	.boss-gallery__item:nth-child(odd)  { --rot: -2.5deg; }
	.boss-gallery__item:nth-child(even) { --rot:  2.5deg; }
}

/* Mobile — 2 kolumny, bez rotacji, czytelnie */
@media (max-width: 560px) {
	.boss-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
	.boss-gallery__item { --rot: 0deg !important; }
	.boss-gallery__actions { flex-direction: column; align-items: stretch; }
	.boss-gallery__actions .boss-btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   8c. SIGNUP / ZAPISY — sekcja „Zapisz się" (formularz + panel propozycji)
   Ciemna karta premium, akcenty róż/purple, spójne z .boss-btn i .reveal.
   -------------------------------------------------------------------------- */
.signup {
	position: relative;
	border-bottom: 1px solid var(--c-line);
	/* Delikatna poświata tła — spójna z klimatem sceny */
	background:
		radial-gradient(120% 80% at 85% -10%, rgba(255, 31, 174, 0.10), transparent 55%),
		radial-gradient(90% 70% at -10% 110%, rgba(139, 92, 246, 0.10), transparent 55%);
}

.signup__head { max-width: 60ch; margin-bottom: clamp(2rem, 5vw, 3.25rem); }
.signup__eyebrow {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--c-pink-hot);
	margin-bottom: 0.9rem;
}
.signup__title { font-size: var(--fs-h2); margin-bottom: 1rem; }
.signup__title em {
	font-style: normal;
	color: var(--c-pink);
	text-shadow: 0 0 30px rgba(255, 31, 174, 0.30);
}
.signup__lead { color: var(--c-ink-soft); font-size: var(--fs-lead); line-height: 1.5; max-width: 56ch; }

/* Alerty (po wysłaniu / błąd) */
.signup__alert {
	border-radius: var(--radius);
	padding: 1rem 1.2rem;
	margin-bottom: 1.8rem;
	font-size: var(--fs-body);
	border: 1px solid var(--c-line);
	background: var(--c-bg-elev);
}
.signup__alert strong { display: inline; margin-right: 0.35em; }
.signup__alert--ok  { border-color: rgba(16, 185, 129, 0.5); background: rgba(16, 185, 129, 0.10); color: #d7fbe8; }
.signup__alert--err { border-color: rgba(255, 31, 174, 0.5); background: rgba(255, 31, 174, 0.10); color: #ffe3f5; }

/* Układ dwukolumnowy: formularz + panel propozycji */
.signup__grid {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: start;
}

/* Karta formularza */
.signup__card {
	background: linear-gradient(180deg, rgba(20, 20, 22, 0.95), rgba(14, 14, 16, 0.95));
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: clamp(1.4rem, 3vw, 2.4rem);
	box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.9);
}

.signup-field { margin-bottom: 1.3rem; }
.signup-row {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 1rem;
}
.signup-label {
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--c-ink-soft);
	margin-bottom: 0.5rem;
}
.signup-label .req { color: var(--c-pink-hot); }
.signup-hint { font-weight: 400; color: var(--c-ink-mute); font-size: 0.82rem; }

/* Inputy / selecty */
.signup-input {
	width: 100%;
	font: inherit;
	font-size: var(--fs-body);
	color: var(--c-ink);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--c-line);
	border-radius: 10px;
	padding: 0.75em 0.9em;
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
	-webkit-appearance: none;
	appearance: none;
}
.signup-input::placeholder { color: var(--c-ink-mute); }
.signup-input:focus {
	outline: none;
	border-color: var(--c-pink);
	background: rgba(255, 255, 255, 0.06);
	box-shadow: 0 0 0 3px rgba(255, 31, 174, 0.18);
}
select.signup-input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ff4fc2' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	padding-right: 2.4rem;
}
select.signup-input option { background: #141416; color: var(--c-ink); }
/* Chrome dla input[type=number] — spójny wygląd */
.signup-field--age .signup-input { text-align: left; }

/* Pigułki wyboru (radio / checkbox) */
.signup-choices { display: flex; gap: 0.6rem; }
.signup-choices--wrap { flex-wrap: wrap; }
.signup-pill {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.6em 1.1em;
	border: 1px solid var(--c-line);
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.035);
	color: var(--c-ink-soft);
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
	transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.signup-pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.signup-pill:hover { color: var(--c-ink); border-color: rgba(255, 31, 174, 0.5); }
.signup-pill:has(input:checked) {
	color: #fff;
	border-color: var(--c-pink);
	background: rgba(255, 31, 174, 0.14);
	box-shadow: 0 0 0 1px var(--c-pink), 0 8px 22px -14px var(--c-pink-glow);
}
.signup-pill:has(input:focus-visible) { outline: 2px solid var(--c-pink-hot); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   KOLORY STYLÓW TAŃCA — spójny system dla przycisków (formularz) i tagów (panel).
   High Heels = róż, Hip-Hop = czerwony, Commercial = niebieski, Freestyle = limonka.
   Każdy styl ustawia zestaw zmiennych (--style-c / border / bg / glow).
   -------------------------------------------------------------------------- */
.signup-style--high-heels { --style-c: #ff1fae; --style-border: rgba(255, 31, 174, 0.55); --style-bg: rgba(255, 31, 174, 0.14); --style-glow: rgba(255, 31, 174, 0.35); }
.signup-style--hip-hop    { --style-c: #ff3b3b; --style-border: rgba(255, 59, 59, 0.55);  --style-bg: rgba(255, 59, 59, 0.13);  --style-glow: rgba(255, 59, 59, 0.32); }
.signup-style--commercial { --style-c: #3b82f6; --style-border: rgba(59, 130, 246, 0.60); --style-bg: rgba(59, 130, 246, 0.14); --style-glow: rgba(59, 130, 246, 0.32); }
.signup-style--freestyle  { --style-c: #a3e635; --style-border: rgba(163, 230, 53, 0.60); --style-bg: rgba(163, 230, 53, 0.14); --style-glow: rgba(163, 230, 53, 0.28); }

/* Przyciski wyboru stylu w formularzu.
   ZASADA: kolor = WYBÓR, nie wygląd domyślny.
   - Stan nieaktywny: neutralny (ciemne tło, szara ramka, jasny tekst) — jak zwykła pigułka.
   - Hover: tylko delikatna sugestia koloru stylu (subtelna ramka + lekki glow, bez wypełnienia).
   - Zaznaczony: pełny akcent stylu (kolorowa ramka, delikatne tło, biały tekst, lekki glow). */
.signup-style-pill { color: var(--c-ink-soft); border-color: var(--c-line); background: rgba(255, 255, 255, 0.035); }
.signup-style-pill:hover {
	color: var(--c-ink);
	border-color: var(--style-border);
	background: rgba(255, 255, 255, 0.035);
	box-shadow: 0 0 14px -6px var(--style-glow);
	transform: translateY(-1px);
}
.signup-style-pill:has(input:checked) {
	color: #fff;
	border-color: var(--style-c);
	background: var(--style-bg);
	box-shadow: 0 0 0 1px var(--style-c), 0 10px 24px -14px var(--style-glow);
}
.signup-style-pill:has(input:focus-visible) { outline-color: var(--style-c); }
/* Pole „styl" oznaczone jako niewypełnione — pozostaje neutralne (kolor tylko przy wyborze) */
.signup-field.is-invalid .signup-style-pill { border-color: rgba(255, 31, 174, 0.6); }
.signup-field.is-invalid .signup-style-pill:has(input:checked) { border-color: var(--style-c); }

/* Pola warunkowe — subtelne wejście */
.signup-conditional {
	border-left: 2px solid rgba(255, 31, 174, 0.35);
	padding-left: 1rem;
	margin-bottom: 1.3rem;
	animation: signup-reveal 0.35s var(--ease);
}
.signup-conditional[hidden] { display: none; }
@keyframes signup-reveal {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

/* Zgoda RODO */
.signup-consent {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--c-ink-soft);
	cursor: pointer;
}
.signup-consent input {
	flex: 0 0 auto;
	width: 20px; height: 20px;
	margin-top: 0.1rem;
	accent-color: var(--c-pink);
	cursor: pointer;
}
.signup-consent a { color: var(--c-pink-hot); }

/* Krótka klauzula informacyjna RODO pod checkboxem */
.signup-gdpr-note {
	margin-top: 0.9rem;
	font-size: 0.78rem;
	line-height: 1.55;
	color: var(--c-ink-mute);
}
.signup-gdpr-note a { color: var(--c-pink-hot); }

/* Honeypot — całkowicie ukryty dla ludzi */
.signup-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Błędy walidacji */
.signup-error { display: block; margin-top: 0.4rem; font-size: 0.8rem; color: var(--c-pink-hot); min-height: 0; }
.signup-field.is-invalid .signup-input { border-color: var(--c-pink); box-shadow: 0 0 0 3px rgba(255, 31, 174, 0.16); }
.signup-field.is-invalid .signup-pill { border-color: rgba(255, 31, 174, 0.6); }

.signup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 0.4rem; }
.signup-submit { padding: 0.85em 1.8em; }
.signup-note { font-size: 0.8rem; color: var(--c-ink-mute); }

/* --- Panel propozycji grup --- */
.signup__aside { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.signup-panel {
	background:
		radial-gradient(120% 60% at 100% 0%, rgba(139, 92, 246, 0.14), transparent 60%),
		var(--c-bg-elev);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: clamp(1.3rem, 2.5vw, 1.9rem);
	box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.9);
}
.signup-panel__eyebrow {
	font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--c-pink-hot); margin-bottom: 0.5rem;
}
.signup-panel__title { font-size: 1.5rem; margin-bottom: 0.5rem; }
.signup-panel__fineprint { font-size: 0.78rem; color: var(--c-ink-mute); line-height: 1.45; margin-bottom: 1rem; }
.signup-panel__hint { color: var(--c-ink-soft); font-size: 0.95rem; line-height: 1.5; }
.signup-panel__note {
	color: var(--c-ink-mute);
	font-size: 0.82rem;
	line-height: 1.45;
	margin-bottom: 0.9rem;
	padding-left: 0.7rem;
	border-left: 2px solid var(--c-pink);
}
.signup-panel__note[hidden] { display: none; }
.signup-panel__disclaimer {
	margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--c-line);
	font-size: 0.78rem; color: var(--c-ink-mute); line-height: 1.5;
}

.signup-groups { display: flex; flex-direction: column; gap: 0.55rem; }
.signup-groups[hidden] { display: none; }
.signup-groups__item {
	border: 1px solid var(--c-line);
	border-radius: 12px;
	padding: 0.6rem 0.8rem;
	background: rgba(255, 255, 255, 0.03);
	animation: signup-reveal 0.3s var(--ease) backwards;
	transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.signup-groups__item:hover { border-color: rgba(255, 31, 174, 0.45); transform: translateY(-2px); }
.signup-groups__name { display: block; font-weight: 700; color: var(--c-ink); }
.signup-groups__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.signup-groups__tag {
	font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em;
	color: var(--c-pink-hot); background: rgba(255, 31, 174, 0.10);
	border: 1px solid rgba(255, 31, 174, 0.3); border-radius: 100px; padding: 0.2em 0.7em;
}
/* Tag stylu w panelu — kolor wg stylu (nadpisuje domyślny róż) */
.signup-groups__tag.signup-style--high-heels,
.signup-groups__tag.signup-style--hip-hop,
.signup-groups__tag.signup-style--commercial,
.signup-groups__tag.signup-style--freestyle {
	color: var(--style-c);
	background: var(--style-bg);
	border-color: var(--style-border);
}

/* Pigułka potwierdzonego poziomu grupy w panelu propozycji.
   Statusów organizacyjnych (rekrutacja/kontynuacja/decyzja studia) NIE pokazujemy. */
.signup-groups__badge {
	font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em;
	border-radius: 100px; padding: 0.2em 0.7em;
	color: var(--c-ink-soft); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--c-line);
}

/* Responsywność sekcji zapisów */
@media (max-width: 900px) {
	.signup__grid { grid-template-columns: 1fr; }
	.signup__aside { position: static; }
}
@media (max-width: 560px) {
	.signup-row { grid-template-columns: 1fr; }
	.signup-actions { flex-direction: column; align-items: stretch; }
	.signup-submit { width: 100%; }
	.signup-note { text-align: center; }
}

/* --------------------------------------------------------------------------
   9. FOOTER
   -------------------------------------------------------------------------- */
/* Premium, ciemna stopka B.O.S.S. — delikatny gradient + różowy glow w tle,
   a treść zamknięta w zaokrąglonym panelu z subtelnym borderem. */
.site-footer {
	position: relative;
	/* Stopka kontynuuje „closing area": startuje TYM SAMYM odcieniem co dół CTA
	   (#0d0d11) i schodzi do czerni na końcu strony; górna poświata wyśrodkowana
	   (50% 0%) domyka glow z dołu CTA. Zamiast twardego border-top — subtelny,
	   miękki separator ::before (rgba 0.06, wygaszany po bokach), bo kolor startu
	   stopki = kolor końca CTA i przejście ma być płynne. */
	background:
		radial-gradient(120% 80% at 50% 0%, rgba(255, 31, 174, 0.10), transparent 60%),
		radial-gradient(80% 70% at 78% -6%, rgba(139, 92, 246, 0.07), transparent 55%),
		linear-gradient(180deg, #0d0d11 0%, #0b0b0d 46%, var(--c-bg) 100%);
	overflow: hidden;
}
.site-footer::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(90deg,
		transparent,
		rgba(255, 255, 255, 0.06) 22%,
		rgba(255, 255, 255, 0.06) 78%,
		transparent);
	pointer-events: none;
}
.site-footer__panel {
	position: relative;
	margin-block: clamp(2.5rem, 5vw, 4.25rem);
	padding: clamp(1.9rem, 4vw, 3.25rem);
	border: 1px solid var(--c-line);
	border-radius: 22px;
	background:
		radial-gradient(90% 130% at 100% 0%, rgba(139, 92, 246, 0.07), transparent 55%),
		linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.site-footer__grid {
	display: grid;
	/* Marka szersza (logo + brand + opis), nawigacja węższa, kontakt średni. */
	grid-template-columns: 1.5fr 0.9fr 1.15fr;
	gap: clamp(2rem, 5vw, 4rem);
}

/* Kolumna marki — okrągłe logo z LEWEJ, tekst marki (nazwa + opis + social) z PRAWEJ,
   w jednej linii i wyśrodkowane względem siebie w pionie. */
.site-footer__brand-col {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: clamp(1.25rem, 2.4vw, 2rem);
	min-width: 0;
}
.site-footer__brand {
	display: block;
	flex: 0 0 auto;
	transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.site-footer__brand:hover { opacity: 0.9; transform: translateY(-2px); }
.site-footer__logo {
	display: block;
	width: clamp(104px, 10vw, 132px);
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border-radius: 50%;
}
/* Blok tekstowy obok logo — min-width:0 pozwala akapitom się zawijać zamiast rozpychać rząd. */
.site-footer__brand-text {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	min-width: 0;
}
.site-footer__brand-name {
	font-size: 1.1rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: var(--c-ink);
	line-height: 1.15;
}
.site-footer__brand-name-sub {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-ink-mute);
}
.site-footer__desc { color: var(--c-ink-soft); max-width: 34ch; }
.site-footer__desc-alt { color: var(--c-ink-mute); font-size: 0.9rem; max-width: 36ch; }

.site-footer__social { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.35rem; }
.site-footer__social-link {
	display: inline-flex; align-items: center;
	padding: 0.5rem 1.05rem;
	font-size: 0.85rem; font-weight: 600;
	color: var(--c-ink-soft);
	border: 1px solid var(--c-line);
	border-radius: 999px;
	transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
	color: var(--c-ink);
	border-color: var(--c-pink);
	background: rgba(255, 31, 174, 0.09);
}

/* Nagłówki kolumn — drobny różowy akcent po lewej. */
.site-footer__heading {
	position: relative;
	font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--c-ink-soft); margin-bottom: 1.25rem; font-weight: 700;
	padding-left: 0.9rem;
}
.site-footer__heading::before {
	content: ""; position: absolute; left: 0; top: 0.05em;
	width: 4px; height: 0.95em; border-radius: 2px;
	background: linear-gradient(var(--c-pink), var(--c-pink-deep));
}

.footer-menu { display: flex; flex-direction: column; gap: 0.7rem; }
.footer-menu li { margin: 0; }
.footer-menu a {
	display: inline-flex; color: var(--c-ink-soft);
	transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}
.footer-menu a:hover,
.footer-menu a:focus-visible { color: var(--c-pink-hot); transform: translateX(3px); }

.site-footer__contact-col { display: flex; flex-direction: column; align-items: flex-start; }
.site-footer__address { font-style: normal; display: flex; flex-direction: column; gap: 0.7rem; }
.site-footer__contact-line { color: var(--c-ink-soft); transition: color 0.2s var(--ease); }
a.site-footer__contact-line:hover,
a.site-footer__contact-line:focus-visible { color: var(--c-pink-hot); }
.site-footer__contact-line[data-placeholder] { color: var(--c-ink-mute); }

.site-footer__cta {
	display: inline-flex; align-items: center; gap: 0.55rem;
	margin-top: 1.5rem;
	padding: 0.7rem 1.3rem;
	font-size: 0.85rem; font-weight: 700;
	color: var(--c-ink);
	border: 1px solid var(--c-pink-deep);
	border-radius: 999px;
	background: rgba(255, 31, 174, 0.08);
	transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.site-footer__cta:hover,
.site-footer__cta:focus-visible {
	background: rgba(255, 31, 174, 0.16);
	border-color: var(--c-pink);
	transform: translateY(-1px);
}
.site-footer__cta-arrow { transition: transform 0.2s var(--ease); }
.site-footer__cta:hover .site-footer__cta-arrow { transform: translateX(3px); }

/* Dolny pasek — copyright, linki prawne, credit. */
.site-footer__bottom { border-top: 1px solid var(--c-line); background: rgba(0, 0, 0, 0.28); }
.site-footer__bottom-inner {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 0.75rem 1.5rem;
	padding-block: 1.5rem;
}
.site-footer__copy { font-size: 0.8rem; color: var(--c-ink-mute); }

/* Dyskretne, ale widoczne linki prawne w stopce */
.site-footer__legal {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 0.4rem 1.1rem;
	font-size: 0.8rem;
}
.site-footer__legal-link {
	color: var(--c-ink-mute);
	text-decoration: none;
	background: none; border: 0; padding: 0; cursor: pointer;
	font: inherit; line-height: 1.4;
	transition: color 0.2s var(--ease);
}
.site-footer__legal-link:hover,
.site-footer__legal-link:focus-visible { color: var(--c-pink-hot); }

/* Credit — elegancki, ale subtelny; Kotler jako wyróżniony link. */
.site-footer__credit { font-size: 0.8rem; color: var(--c-ink-mute); }
.site-footer__credit-sep { margin-inline: 0.4rem; opacity: 0.5; }
.site-footer__credit-link {
	color: var(--c-ink-soft); font-weight: 600;
	border-bottom: 1px solid transparent;
	transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.site-footer__credit-link:hover,
.site-footer__credit-link:focus-visible { color: var(--c-pink-hot); border-bottom-color: var(--c-pink); }

/* --------------------------------------------------------------------------
   10. ANIMACJE WEJŚCIA (reveal)
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
/* Delikatny stagger dla elementów hero (branding + kolejne elementy tekstu) */
.hero__brand.reveal { transition-delay: 0.05s; }
.hero__text .reveal:nth-child(1) { transition-delay: 0.12s; }
.hero__text .reveal:nth-child(2) { transition-delay: 0.19s; }
.hero__text .reveal:nth-child(3) { transition-delay: 0.26s; }
.hero__text .reveal:nth-child(4) { transition-delay: 0.33s; }

/* --------------------------------------------------------------------------
   11. RESPONSYWNOŚĆ
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.site-header__cta { display: none; }        /* CTA przenosimy do menu mobilnego / sticky bar */
	.nav-toggle { display: flex; }

	/* Desktopowa nawigacja znika na mobile — obsługę przejmuje dedykowany
	   pełnoekranowy panel .boss-mobile-menu (patrz sekcja „MOBILE MENU"). */
	.site-nav { display: none; }

	/* Hero na tablecie/mobile — układ pionowy: branding na górze, treść pod spodem */
	.hero__content {
		max-width: 100%;
		padding-block: 2rem;
		grid-template-columns: 1fr;
		gap: clamp(1.5rem, 4vw, 2.5rem);
		justify-items: center;
		text-align: center;
	}
	.hero__brand { order: -1; }
	.hero__brand-logo { width: clamp(160px, 34vw, 240px); }
	.hero__brand-wordmark { width: clamp(170px, 40vw, 250px); margin-top: -1.2rem; }
	.hero__tags { justify-content: center; }
	.hero__tags, .hero__title, .hero__lead { margin-inline: auto; }
	.hero__actions { justify-content: center; }
	.hero__scroll { display: none; }

	/* Tablet — marka (logo + tekst w rzędzie) na pełną szerokość nad dwiema kolumnami. */
	.site-footer__grid { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 3rem); }
	.site-footer__brand-col { grid-column: 1 / -1; }
	.site-footer__desc, .site-footer__desc-alt { max-width: 60ch; }
}

/* Niskie/landscape ekrany — scroll indicator zbędny (kolidowałby z CTA) */
@media (max-height: 720px) {
	.hero__scroll { display: none; }
}

/* Hero na telefonie — nie rozciągamy na pełny ekran (było „za wysokie/przeciągnięte”).
   Wysokość dopasowana do treści + kotwiczenie pod headerem, zamiast wyśrodkowania w 100svh. */
@media (max-width: 600px) {
	.hero {
		min-height: auto;
		align-items: flex-start;
		padding-top: calc(var(--header-h) + 1.6rem);
		padding-bottom: 2.75rem;
	}
	.hero__content { padding-block: 0; gap: 1.5rem; }
	.hero__brand { gap: 0.6rem; }
	.hero__brand-logo { width: clamp(130px, 38vw, 175px); }
	.hero__brand-wordmark { width: clamp(150px, 50vw, 205px); margin-top: -0.9rem; }
	.hero__tags { margin-bottom: 1.1rem; }
	.hero__title { margin-bottom: 0.9rem; }
	.hero__lead { margin-bottom: 1.5rem; }
}

@media (max-width: 560px) {
	.hero__actions { flex-direction: column; align-items: stretch; }
	.hero__actions .boss-btn { width: 100%; }

	/* Telefon — jedna kolumna; marka wraca do pionu (logo NAD tekstem), wyśrodkowana. */
	.site-footer__grid { grid-template-columns: 1fr; gap: 2.25rem; }
	.site-footer__brand-col {
		grid-column: auto;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 1.1rem;
		max-width: 100%;
	}
	.site-footer__brand-text { align-items: center; gap: 0.9rem; }
	.site-footer__desc, .site-footer__desc-alt { max-width: 46ch; margin-inline: auto; }
	.site-footer__social { justify-content: center; }
	.site-footer__bottom-inner { flex-direction: column; text-align: center; justify-content: center; }
	.site-footer__legal { justify-content: center; }
}

/* Najmniejsze ekrany — akcent graffiti nie może wychodzić poza szerokość (bez poziomego scrolla). */
@media (max-width: 400px) {
	:root { --fs-h1-accent: clamp(2.2rem, 8.5vw, 2.9rem); }
}

/* Desktopowy CTA w wysuwanym menu — relikt; nowy panel ma własny .boss-mobile-menu__cta. */
.site-nav__cta { display: none; }

/* --------------------------------------------------------------------------
   13. MOBILE MENU — pełnoekranowy panel nawigacji (≤900px)
   Dedykowana struktura (.boss-mobile-menu) sterowana hamburgerem przez JS.
   Domyślnie [hidden] (brak w DOM-flow); JS zdejmuje hidden i dodaje .is-open.
   -------------------------------------------------------------------------- */
.boss-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 200;                 /* nad headerem (100) i sticky barem (90) */
	display: flex;
	justify-content: flex-end;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s var(--ease), visibility 0.25s var(--ease);
}
.boss-mobile-menu[hidden] { display: none; }   /* stan bazowy zanim JS wejdzie */
.boss-mobile-menu.is-open { opacity: 1; visibility: visible; }

/* Tło: ciemna warstwa + subtelny radialny glow róż/purpura. */
.boss-mobile-menu__backdrop {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 80% at 100% 0%, rgba(255, 31, 174, 0.18), transparent 55%),
		radial-gradient(100% 70% at 0% 100%, rgba(139, 92, 246, 0.16), transparent 55%),
		rgba(6, 6, 8, 0.86);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	cursor: pointer;
}

/* Panel: pełna wysokość, szeroki (na telefonie prawie cały ekran), wjeżdża z prawej. */
.boss-mobile-menu__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(100%, 420px);
	height: 100%;
	padding: calc(1.2rem + env(safe-area-inset-top)) clamp(1.4rem, 6vw, 2.2rem) calc(1.6rem + env(safe-area-inset-bottom));
	background:
		linear-gradient(180deg, rgba(20, 20, 24, 0.96), rgba(10, 10, 12, 0.98));
	border-left: 1px solid var(--c-line);
	box-shadow: -24px 0 60px rgba(0, 0, 0, 0.5);
	transform: translateX(24px);
	transition: transform 0.28s var(--ease);
	overflow-y: auto;
}
.boss-mobile-menu.is-open .boss-mobile-menu__panel { transform: translateX(0); }

/* Góra panelu: brand (logo + wordmark) + zamknięcie */
.boss-mobile-menu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--boss-border-soft);
}
.boss-mobile-menu__brand {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	min-width: 0;
	color: var(--c-ink);
}
.boss-mobile-menu__brand-mark {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid var(--c-line);
	box-shadow: 0 0 0 3px rgba(255, 31, 174, 0.06);
	flex: none;
}
.boss-mobile-menu__brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
	min-width: 0;
}
.boss-mobile-menu__brand-word {
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 1.02rem;
	letter-spacing: 0.14em;
	color: var(--c-ink);
}
.boss-mobile-menu__brand-sub {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.66rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-ink-mute);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.boss-mobile-menu__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	color: var(--c-ink-soft);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--c-line);
	border-radius: 12px;
	cursor: pointer;
	flex: none;
	-webkit-tap-highlight-color: transparent;
	transition: color 0.2s var(--ease), border-color 0.2s var(--ease),
	            background 0.2s var(--ease), transform 0.2s var(--ease);
}
.boss-mobile-menu__close-icon { display: block; }
.boss-mobile-menu__close:hover,
.boss-mobile-menu__close:focus-visible {
	color: var(--c-pink-hot);
	border-color: rgba(255, 31, 174, 0.45);
	background: rgba(255, 31, 174, 0.08);
}
.boss-mobile-menu__close:active { transform: scale(0.94); }

/* Środek: linki nawigacji — lista wyrównana do lewej, numer + label + strzałka */
.boss-mobile-menu__nav {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.15rem;
	padding-block: clamp(1rem, 4vh, 1.9rem);
	flex: 1 1 auto;
}
.boss-mobile-menu__link {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 0.85rem;
	min-height: 56px;
	padding: 0.55rem 0.25rem;
	color: var(--c-ink);
	border-bottom: 1px solid var(--boss-border-soft);
	transition: color 0.2s var(--ease), padding-left 0.25s var(--ease);
}
.boss-mobile-menu__link:last-child { border-bottom: 0; }
.boss-mobile-menu__link-index {
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--c-ink-mute);
	transition: color 0.2s var(--ease);
	flex: none;
}
.boss-mobile-menu__link-label {
	font-family: var(--font-body);
	font-size: clamp(1.65rem, 7vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.05;
}
.boss-mobile-menu__link-arrow {
	margin-left: auto;
	align-self: center;
	font-size: 1.1rem;
	color: var(--c-pink);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 0.2s var(--ease), transform 0.25s var(--ease);
}
.boss-mobile-menu__link:hover,
.boss-mobile-menu__link:focus-visible {
	color: var(--c-pink-hot);
	padding-left: 0.75rem;
}
.boss-mobile-menu__link:hover .boss-mobile-menu__link-index,
.boss-mobile-menu__link:focus-visible .boss-mobile-menu__link-index { color: var(--c-pink); }
.boss-mobile-menu__link:hover .boss-mobile-menu__link-arrow,
.boss-mobile-menu__link:focus-visible .boss-mobile-menu__link-arrow {
	opacity: 1;
	transform: translateX(0);
}

/* Dół panelu: CTA + telefon + social (osobna sekcja, NIE w środku listy) */
.boss-mobile-menu__foot {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding-top: 1.3rem;
	border-top: 1px solid var(--boss-border-soft);
}
.boss-mobile-menu__cta {
	width: 100%;
	justify-content: center;
	min-height: 50px;
	font-size: var(--fs-btn);
}
/* Telefon — elegancki contact row (label + numer), nie luźny szary tekst */
.boss-mobile-menu__phone {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 46px;
	padding: 0 0.9rem;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-btn);
	background: rgba(255, 255, 255, 0.02);
	transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.boss-mobile-menu__phone-label {
	font-family: var(--font-body);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-ink-mute);
}
.boss-mobile-menu__phone-number {
	font-family: var(--font-body);
	font-size: 0.98rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--c-ink);
}
.boss-mobile-menu__phone:hover,
.boss-mobile-menu__phone:focus-visible {
	border-color: rgba(255, 31, 174, 0.4);
	background: rgba(255, 31, 174, 0.05);
}
.boss-mobile-menu__phone:hover .boss-mobile-menu__phone-label,
.boss-mobile-menu__phone:focus-visible .boss-mobile-menu__phone-label { color: var(--c-ink-soft); }
/* Social — dyskretne linki tekstowe pod contact row */
.boss-mobile-menu__social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding-top: 0.15rem;
}
.boss-mobile-menu__social-link {
	font-family: var(--font-body);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-ink-mute);
	transition: color 0.2s var(--ease);
}
.boss-mobile-menu__social-link:hover,
.boss-mobile-menu__social-link:focus-visible { color: var(--c-pink-hot); }
.boss-mobile-menu__social-dot { color: var(--c-ink-mute); font-size: 0.6rem; }

/* --------------------------------------------------------------------------
   13b. STICKY MOBILE ACTION BAR — przyklejony pasek CTA na dole (≤900px)
   -------------------------------------------------------------------------- */
/* Wrapper: technicznie przyklejony na dole, ale WIZUALNIE przezroczysty — bez
   pełnego tła/docka/border-top. Trzyma tylko pozycjonowanie i padding pod przyciski.
   pointer-events:none, żeby przezroczysty pas nie łapał kliknięć pod przyciskami. */
.boss-mobile-actions {
	display: none;              /* pokazywany dopiero w media query mobile */
	position: fixed;
	left: 0; right: 0;
	bottom: max(12px, env(safe-area-inset-bottom));
	z-index: 90;                /* pod menu (200), pod/obok headera (100) */
	padding: 0 clamp(14px, 4vw, 18px);
	pointer-events: none;
	background: transparent;
	border: 0;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
/* Wewnętrzny grid — dwa przyciski, wyśrodkowane, z limitem szerokości. */
.boss-mobile-actions__inner {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 10px;
	max-width: 520px;
	margin: 0 auto;
	pointer-events: auto;       /* przyciski znów klikalne */
}
/* Przyciski oparte o system .boss-btn: pill, kompaktowe, spójny font. */
.boss-mobile-actions__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 18px;
	font-family: var(--font-body);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	border: 1px solid transparent;
	border-radius: var(--radius-btn);
	transition: transform 0.15s var(--ease), background 0.2s var(--ease),
	            border-color 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.boss-mobile-actions__link:active { transform: translateY(1px); }
/* Zadzwoń — outline/ghost jak .boss-btn--secondary, półprzezroczyste tło tylko na przycisku. */
.boss-mobile-actions__link--call {
	color: var(--c-ink);
	background: rgba(18, 18, 22, 0.55);
	border-color: var(--c-line);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.boss-mobile-actions__link--call:hover,
.boss-mobile-actions__link--call:focus-visible {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 31, 174, 0.45);
}
/* Zapisz się — główny różowy gradient, spójny z .boss-btn--primary, subtelny glow. */
.boss-mobile-actions__link--signup {
	color: #fff;
	background: linear-gradient(135deg, #ff1fae 0%, #b3199c 52%, #8b5cf6 130%);
	border-color: rgba(255, 255, 255, 0.16);
	box-shadow: 0 6px 18px -8px var(--c-pink-glow);
}
.boss-mobile-actions__link--signup:hover,
.boss-mobile-actions__link--signup:focus-visible {
	box-shadow: 0 10px 26px -10px var(--btn-glow-purple);
}

/* Aktywacja mobile: pokaż sticky bar, zrób miejsce pod treścią, zablokuj scroll przy menu. */
@media (max-width: 900px) {
	.boss-mobile-actions { display: block; }
	/* Zapas na dole, żeby sticky bar nie zasłaniał końcówki strony/stopki. */
	.site-footer__bottom { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

	/* Podstrona „Zapisz się": zachowujemy OBA przyciski (Zadzwoń + Zapisz się).
	   Na tej podstronie „Zapisz się" przewija do formularza (#formularz-zapisow,
	   link ustawiony warunkowo w footer.php), a nie prowadzi ponownie do tej samej strony.
	   Zapas pod sekcją zapisów, by pływające przyciski nie zasłaniały ostatnich pól. */
	body.page-zapisz .signup--page { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* Body scroll lock, gdy menu otwarte — plus ukrycie sticky baru pod overlayem. */
body.is-mobile-menu-open { overflow: hidden; }
body.is-mobile-menu-open .boss-mobile-actions { display: none; }

/* Respekt dla prefers-reduced-motion — bez slajdu panelu, tylko fade. */
@media (prefers-reduced-motion: reduce) {
	.boss-mobile-menu__panel { transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   14. PODSTRONY — wspólny nagłówek (page hero) + treść
   -------------------------------------------------------------------------- */
.page-hero {
	position: relative;
	padding-top: calc(var(--header-h) + clamp(2.5rem, 7vw, 5rem));
	padding-bottom: clamp(2rem, 5vw, 3.5rem);
	overflow: hidden;
	isolation: isolate;
	border-bottom: 1px solid var(--c-line);
}
.page-hero__bg {
	position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient(85% 75% at 82% -20%, rgba(255, 31, 174, 0.18), transparent 55%),
		radial-gradient(70% 70% at -10% 115%, rgba(139, 92, 246, 0.14), transparent 60%),
		linear-gradient(160deg, #160410 0%, #0c0a0d 45%, var(--c-bg) 100%);
}
.page-hero__inner { max-width: 62ch; }
.page-hero__eyebrow {
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--c-pink-hot); margin-bottom: 0.9rem;
}
.page-hero__title { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); margin-bottom: 1.1rem; }
.page-hero__title em { font-style: normal; color: var(--c-pink); text-shadow: 0 0 30px rgba(255, 31, 174, 0.30); }
.page-hero__lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--c-ink-soft); max-width: 56ch; }

.page-body { }

/* Treść tekstowa (prose) — czytelny blok */
.prose { max-width: 62ch; color: var(--c-ink-soft); font-size: var(--fs-body); line-height: 1.7; }
.prose--wide { max-width: 74ch; }
.prose p + p { margin-top: 1rem; }
.prose h2, .prose h3 { color: var(--c-ink); margin: 1.6rem 0 0.6rem; }
.prose h2 { font-size: 1.25rem; }
.prose h3 { font-size: 1.05rem; }
.prose a { color: var(--c-pink-hot); }
.prose ul, .prose ol { margin: 0.6rem 0 0.6rem 1.3rem; padding: 0; }
.prose li { margin: 0.3rem 0; padding-left: 0.2rem; }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }
.prose strong { color: var(--c-ink); }
.prose__muted { color: var(--c-ink-mute); }
/* Meta-informacja na stronach prawnych (data aktualizacji / status roboczy) */
.prose .legal-meta {
	margin: 0 0 1.4rem;
	padding: 0.7rem 1rem;
	font-size: 0.82rem;
	color: var(--c-ink-mute);
	border-left: 3px solid var(--c-pink);
	background: rgba(255, 31, 174, 0.06);
	border-radius: 0 8px 8px 0;
}

/* Tytuł bloku wewnątrz podstrony */
.block-title {
	font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
	margin-bottom: 1.4rem;
}
.block-title + .cards-grid { margin-bottom: 2.5rem; }

/* Pasek informacyjny „w przygotowaniu" */
.notice-band {
	display: flex; align-items: flex-start; gap: 0.7rem;
	background: rgba(255, 31, 174, 0.07);
	border: 1px solid rgba(255, 31, 174, 0.28);
	border-radius: var(--radius);
	padding: 0.9rem 1.2rem;
	color: var(--c-ink-soft);
	font-size: 0.92rem; line-height: 1.5;
	margin-bottom: 2rem;
}
.notice-band__dot {
	flex: 0 0 auto; width: 10px; height: 10px; margin-top: 0.35rem;
	border-radius: 50%; background: var(--c-pink);
	box-shadow: 0 0 12px var(--c-pink-glow);
}

/* Panel „grafik w przygotowaniu" (/grafik/ gdy boss_is_schedule_public_enabled() === false) */
.schedule-prep {
	text-align: center;
	background:
		radial-gradient(120% 60% at 50% 0%, rgba(255, 31, 174, 0.14), transparent 60%),
		var(--c-bg-elev);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: clamp(2rem, 3vw + 1rem, 3.2rem) clamp(1.2rem, 3vw, 2.4rem);
	box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.9);
}
.schedule-prep__eyebrow {
	font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--c-pink-hot); margin-bottom: 0.9rem;
}
.schedule-prep__title {
	font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.15rem);
	max-width: 34ch; margin: 0 auto 1rem;
}
.schedule-prep__message {
	color: var(--c-ink-soft); font-size: 1rem; line-height: 1.6;
	max-width: 56ch; margin: 0 auto;
}

/* --------------------------------------------------------------------------
   15. KARTY (zajęcia / grupy / trenerzy) + grafik
   -------------------------------------------------------------------------- */
.cards-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1rem, 2vw, 1.5rem);
}
.cards-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cards-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Karta bazowa */
.info-card, .style-card, .trainer-card {
	background: linear-gradient(180deg, rgba(20, 20, 22, 0.9), rgba(14, 14, 16, 0.9));
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: clamp(1.2rem, 2.5vw, 1.8rem);
	transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.info-card:hover, .style-card:hover, .trainer-card:hover {
	transform: translateY(-3px);
	border-color: rgba(255, 31, 174, 0.4);
}
.info-card__title, .style-card__name { font-size: 1.25rem; margin-bottom: 0.5rem; color: var(--c-ink); }
.info-card__desc, .style-card__desc { color: var(--c-ink-mute); font-size: 0.95rem; line-height: 1.55; }

/* Style-card — lewy akcent w kolorze stylu (system --style-c z sekcji zapisów) */
.style-card { position: relative; padding-left: 1.5rem; }
.style-card::before {
	content: ""; position: absolute; left: 0; top: 1.2rem; bottom: 1.2rem;
	width: 4px; border-radius: 4px;
	background: var(--style-c, var(--c-pink));
	box-shadow: 0 0 16px -2px var(--style-glow, var(--c-pink-glow));
}
.style-card__name { color: var(--style-c, var(--c-ink)); }

/* Karta trenera — placeholder ze zdjęciem */
.trainer-card { text-align: center; }
.trainer-card__photo {
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	margin-bottom: 1rem;
	display: flex; align-items: center; justify-content: center;
	background:
		radial-gradient(70% 70% at 50% 0%, rgba(255, 31, 174, 0.18), transparent 60%),
		var(--c-bg-elev);
	border: 1px solid var(--c-line);
}
.trainer-card__initials {
	font-family: var(--font-display);
	font-size: 2rem; color: var(--c-pink); opacity: 0.5; letter-spacing: 0.05em;
}
.trainer-card__name { font-size: 1.1rem; color: var(--c-ink); }
.trainer-card__role { font-size: 0.85rem; color: var(--c-ink-mute); margin-top: 0.2rem; }

/* --------------------------------------------------------------------------
   15b. SCHEDULE / GRAFIK — podstrona /grafik/ (dni → sale → karty zajęć)
   ŹRÓDŁO PRAWDY = CPT boss_schedule. Cały grafik jest w HTML (SEO/no-JS);
   JS (main.js sekcja 7) tylko filtruje: dzień / sala / grupa.
   Sala oznaczana tekstem + kolorem + ikoną (nie samym kolorem — a11y).
   -------------------------------------------------------------------------- */

/* Kolory sal (nie tylko dekoracja — wzmacniają tekstową etykietę) */
.sched { --room1-c: #ff1fae; --room2-c: #2dd4bf; }

/* --- Sterowanie: dzień / sala / grupa --- */
.sched-controls {
	display: flex; flex-direction: column; gap: 1rem;
	background: var(--c-bg-elev);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: clamp(0.95rem, 2.5vw, 1.3rem);
	margin-bottom: clamp(1.3rem, 3vw, 2rem);
}
/* Desktop: dzień pełną szerokość, sala + grupa obok siebie (mniej pustego miejsca) */
@media (min-width: 760px) {
	.sched-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.6rem; align-items: start; }
	.sched-field--days { grid-column: 1 / -1; }
}
.sched-field { display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; }
.sched-field__label {
	font-size: 0.7rem; font-weight: 800; text-transform: uppercase;
	letter-spacing: 0.1em; color: var(--c-ink-soft);
}

/* Zakładki dni */
.sched-days-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sched-days-tabs.is-muted { opacity: 0.45; }
.sched-tab {
	font: inherit; font-size: 0.86rem; font-weight: 600; letter-spacing: 0.01em;
	color: var(--c-ink-soft);
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid var(--c-line);
	border-radius: 100px;
	padding: 0.55em 1.15em; cursor: pointer; min-height: 44px;
	transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.sched-tab__short { display: none; }
.sched-tab:hover { color: var(--c-ink); border-color: rgba(255, 31, 174, 0.5); background: rgba(255, 31, 174, 0.06); }
.sched-tab:active { transform: translateY(1px); }
.sched-tab.is-active {
	color: #fff; border-color: var(--c-pink);
	background: rgba(255, 31, 174, 0.18);
	box-shadow: 0 0 0 1px var(--c-pink), 0 8px 22px -14px var(--c-pink-glow);
}

/* Filtr sali (chipy) */
.sched-room-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sched-chip {
	font: inherit; font-size: 0.86rem; font-weight: 600;
	color: var(--c-ink-soft);
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid var(--c-line);
	border-radius: 100px;
	padding: 0.55em 1.15em; cursor: pointer; min-height: 44px;
	display: inline-flex; align-items: center; gap: 0.5em;
	transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.sched-chip::before {
	content: ""; width: 0.62em; height: 0.62em; border-radius: 3px;
	background: currentColor; opacity: 0; transition: opacity 0.2s var(--ease);
}
.sched-chip--room_1::before { background: var(--room1-c); opacity: 0.9; }
.sched-chip--room_2::before { background: var(--room2-c); opacity: 0.9; }
.sched-chip:hover { color: var(--c-ink); border-color: rgba(255, 255, 255, 0.3); }
.sched-chip:active { transform: translateY(1px); }
.sched-chip.is-active { color: #fff; border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.1); }
.sched-chip--room_1.is-active { border-color: var(--room1-c); box-shadow: 0 0 0 1px var(--room1-c); }
.sched-chip--room_2.is-active { border-color: var(--room2-c); box-shadow: 0 0 0 1px var(--room2-c); }

/* Dropdown grup (natywny select, dobrze ostylowany) */
.sched-select {
	font: inherit; font-size: 0.92rem; color: var(--c-ink);
	background: var(--c-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23b8b8c8' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E") no-repeat right 0.95rem center / 12px;
	border: 1px solid var(--c-line);
	border-radius: 12px;
	padding: 0.72em 2.4em 0.72em 0.95em;
	width: 100%; min-height: 46px;
	appearance: none; -webkit-appearance: none; cursor: pointer;
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.sched-select:hover { border-color: rgba(255, 255, 255, 0.3); }

/* Pasek stanu filtra + reset */
.sched-status {
	display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap;
	margin-bottom: clamp(1rem, 2.5vw, 1.4rem);
	padding: 0.6rem 0.95rem;
	background: color-mix(in srgb, var(--c-pink) 9%, transparent);
	border: 1px solid color-mix(in srgb, var(--c-pink) 32%, transparent);
	border-radius: 12px;
}
.sched-status[hidden] { display: none; }
.sched-status__text { font-size: 0.9rem; font-weight: 600; color: var(--c-ink); min-width: 0; }
.sched-reset {
	font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--c-ink);
	background: rgba(255, 255, 255, 0.06); border: 1px solid var(--c-line);
	border-radius: 100px; padding: 0.45em 1.1em; cursor: pointer; min-height: 38px; white-space: nowrap;
	transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.sched-reset:hover { color: #fff; border-color: var(--c-pink); background: rgba(255, 31, 174, 0.12); }

/* --- Dni: kolumny sal --- */
.sched-days { display: grid; gap: clamp(1.4rem, 3vw, 2rem); }
.sched-day[hidden] { display: none; }
.sched-day__title {
	font-size: 1.05rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
	color: var(--c-ink); margin-bottom: 1rem;
	padding-bottom: 0.6rem; border-bottom: 1px solid var(--c-line);
}
.sched-day__rooms {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(0.9rem, 2vw, 1.5rem);
	align-items: start;
}
.sched-room { min-width: 0; }
.sched-room[hidden] { display: none; }
/* Nagłówek kolumny sali — czytelnie połączony z kartami pod spodem */
.sched-room__head {
	margin: 0 0 0.85rem; padding-bottom: 0.5rem;
	border-bottom: 2px solid color-mix(in srgb, var(--room-c, var(--c-line)) 45%, transparent);
}
.sched-room[data-sched-room-col="room_1"] { --room-c: var(--room1-c); }
.sched-room[data-sched-room-col="room_2"] { --room-c: var(--room2-c); }
.sched-room__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }

/* Badge sali — tekst + kolor + ikona (a11y: nie polega na samym kolorze) */
.sched-badge {
	display: inline-flex; align-items: center; gap: 0.45em;
	font-size: 0.8rem; font-weight: 800; letter-spacing: 0.03em;
	text-transform: uppercase; color: #0b0b12;
	border-radius: 100px; padding: 0.4em 0.9em; line-height: 1;
}
.sched-badge__icon { width: 0.72em; height: 0.72em; border-radius: 3px; background: rgba(0, 0, 0, 0.55); }
.sched-badge--room_1 { background: var(--room1-c); }
.sched-badge--room_2 { background: var(--room2-c); }
.sched-badge--sm { font-size: 0.68rem; padding: 0.3em 0.62em; }

/* Karta zajęć — strefa nagłówka (godzina + sala) i strefa treści (info + trener) */
.sched-card {
	position: relative;
	display: flex; flex-direction: column; gap: 0.6rem;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.012));
	border: 1px solid var(--c-line);
	border-left: 3px solid var(--style-c, var(--c-ink-mute));
	border-radius: 14px;
	padding: 0.9rem 1rem 0.95rem;
	transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.sched-card:hover {
	transform: translateY(-1px);
	border-color: color-mix(in srgb, var(--style-c, #fff) 55%, var(--c-line));
	box-shadow: 0 10px 26px -20px rgba(0, 0, 0, 0.9);
}
.sched-card[hidden] { display: none; }

.sched-card__head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.sched-card__time {
	font-weight: 800; font-size: 1.08rem; letter-spacing: 0.01em;
	color: var(--c-ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}

.sched-card__body { display: flex; align-items: flex-start; gap: 0.9rem; }
.sched-card__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.sched-card__name {
	font-size: 1.06rem; font-weight: 700; line-height: 1.25; color: var(--c-ink);
	overflow-wrap: anywhere;
}
.sched-card__note { font-size: 0.8rem; color: var(--c-ink-mute); line-height: 1.45; }
.sched-card__tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.05rem; }

/* Trener — strefa prawa (desktop): avatar u góry, imię pod spodem, słabsze niż nazwa */
.sched-card__trainer {
	flex: 0 0 auto; width: 76px;
	display: flex; flex-direction: column; align-items: center; gap: 0.35rem; text-align: center;
}
.sched-avatar {
	width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex: none;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--room-c, #fff) 22%, transparent), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
	display: flex; align-items: center; justify-content: center;
}
.sched-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sched-avatar--ph { background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)); }
.sched-avatar__ini { font-weight: 800; font-size: 1.2rem; letter-spacing: 0.02em; color: var(--c-ink); line-height: 1; }
.sched-card__trainer-name {
	font-size: 0.8rem; font-weight: 600; color: var(--c-ink-soft); line-height: 1.2; overflow-wrap: anywhere;
}

/* Tagi — główny styl kolorowy, poziom neutralny (mniejszy kontrast) */
.sched-tag {
	font-size: 0.7rem; font-weight: 600; letter-spacing: 0.01em;
	color: var(--c-ink-soft);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--c-line);
	border-radius: 100px; padding: 0.2em 0.7em; white-space: nowrap;
}
.sched-tag--style {
	color: var(--style-c, var(--c-ink));
	border-color: color-mix(in srgb, var(--style-c, var(--c-line)) 55%, transparent);
	background: color-mix(in srgb, var(--style-c, transparent) 12%, transparent);
}
.sched-tag--lvl {
	color: var(--c-ink-mute);
	background: rgba(255, 255, 255, 0.028);
	border-color: rgba(255, 255, 255, 0.09);
}

/* Kolory stylów (data-style) — spójne z panelem zapisów */
.sched-card[data-style="hip-hop"],    .sched-tag--style[data-style="hip-hop"]    { --style-c: #ff3b3b; }
.sched-card[data-style="high-heels"], .sched-tag--style[data-style="high-heels"] { --style-c: #ff1fae; }
.sched-card[data-style="commercial"], .sched-tag--style[data-style="commercial"] { --style-c: #3b82f6; }
.sched-card[data-style="freestyle"],  .sched-tag--style[data-style="freestyle"]  { --style-c: #a3e635; }
.sched-card[data-style="confirm"] { --style-c: #8b7cf6; }

/* Puste stany */
.sched-room__empty { font-size: 0.85rem; color: var(--c-ink-mute); padding: 0.5rem 0.2rem; font-style: italic; }
.sched-room__empty[hidden] { display: none; }
.sched-empty {
	display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
	color: var(--c-ink-mute); font-size: 0.95rem; text-align: center;
	padding: 2rem 1rem; margin-top: 0.5rem;
	background: var(--c-bg-elev); border: 1px solid var(--c-line); border-radius: var(--radius);
}
.sched-empty[hidden] { display: none; }
.sched-empty__text { margin: 0; }
.schedule-empty--static {
	color: var(--c-ink-mute); font-size: 0.95rem; text-align: center;
	padding: 1.5rem 1rem;
	background: var(--c-bg-elev); border: 1px solid var(--c-line); border-radius: var(--radius);
}

/* Fokus klawiatury — widoczny dla wszystkich kontrolek grafiku */
.sched-tab:focus-visible, .sched-chip:focus-visible, .sched-select:focus-visible, .sched-reset:focus-visible {
	outline: 2px solid var(--c-pink); outline-offset: 2px;
}

/* Mobile: zakładki skrócone; trener jako rząd (avatar z lewej, imię z prawej) */
@media (max-width: 600px) {
	.sched-tab__short { display: inline; }
	.sched-tab__full { display: none; }
	.sched-tab { padding: 0.55em 1em; }
	.sched-card__body { flex-direction: column; gap: 0.7rem; }
	.sched-card__trainer {
		flex-direction: row; width: 100%; align-items: center; text-align: left; gap: 0.6rem;
		padding-top: 0.65rem; border-top: 1px solid var(--c-line);
	}
	.sched-avatar { width: 46px; height: 46px; }
	.sched-avatar__ini { font-size: 1.05rem; }
	.sched-card__trainer-name { font-size: 0.9rem; }
}

/* Szacunek dla prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.sched-card, .sched-tab, .sched-chip, .sched-reset, .sched-select { transition: none; }
	.sched-card:hover, .sched-tab:active, .sched-chip:active { transform: none; }
}

/* --------------------------------------------------------------------------
   16. „JAK TO DZIAŁA" (kroki) — podstrona Zapisz się
   -------------------------------------------------------------------------- */
.how-it-works { border-bottom: 1px solid var(--c-line); }
.steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1rem, 2vw, 1.5rem);
	margin-bottom: 1.4rem;
}
.steps__item {
	display: flex; flex-direction: column; gap: 0.7rem;
	background: var(--c-bg-elev);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: 1.3rem;
}
.steps__num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 50%;
	font-weight: 800; font-size: 1.1rem; color: #fff;
	background: linear-gradient(135deg, #ff1fae 0%, #8b5cf6 130%);
	box-shadow: 0 8px 20px -10px var(--c-pink-glow);
}
.steps__text { color: var(--c-ink-soft); font-size: 0.95rem; line-height: 1.45; }

/* Sekcja zapisów na osobnej podstronie — bez podwójnego górnego paddingu */
.signup--page { padding-top: clamp(2.5rem, 6vw, 4rem); }

/* --- „Jak to działa" na /zapisz-sie/ — lekki, dopracowany komponent kroków.
   Scope: TYLKO .how-it-works (współdzielony .steps na innych podstronach bez zmian). --- */
.how-it-works .steps {
	grid-auto-rows: 1fr;          /* wszystkie karty równej wysokości (także w układzie 2×2) */
	gap: clamp(0.8rem, 1.7vw, 1.2rem);
	/* .steps to <ol> — kasujemy domyślny padding-inline listy (40px), przez który
	   karty były przesunięte w prawo względem nagłówka i noty. Wspólna oś sekcji. */
	list-style: none;
	padding: 0;
	margin-inline: 0;            /* zostawiamy margin-bottom z bazowego .steps */
	width: 100%;
	max-width: none;
	box-sizing: border-box;
}
.how-it-works .steps__item {
	align-items: flex-start;
	min-height: 100%;             /* rozciąga kartę do wspólnej wysokości w rzędzie */
	gap: 0.8rem;
	background: linear-gradient(180deg, rgba(22, 20, 24, 0.55), rgba(14, 14, 16, 0.5));
	border-color: rgba(255, 255, 255, 0.07);
	padding: clamp(1rem, 1.7vw, 1.2rem);
}
.how-it-works .steps__num {
	flex: 0 0 auto;               /* numer nigdy się nie kurczy ani nie „pływa" */
	width: 42px; height: 42px;
	font-family: var(--font-body);
	font-weight: 700; font-size: 1.02rem; line-height: 1;
	box-shadow: 0 6px 16px -11px var(--c-pink-glow);   /* subtelniejszy glow — numer nie dominuje */
}
.how-it-works .steps__text { font-size: 0.98rem; line-height: 1.5; }

/* Tekst pod krokami — czytelny, drugorzędny (nie „wyblakły"), ograniczona szerokość. */
.how-it-works .section__note {
	margin-top: 1.15rem;
	max-width: 46ch;
	color: var(--c-ink-soft);
	line-height: 1.6;
}

/* Kotwica formularza zapisów — start pod sticky headerem (nie chowa się). */
#formularz-zapisow { scroll-margin-top: calc(var(--header-h) + 1.2rem); }

/* Hero /zapisz-sie/ na mobile — nieco wyraźniejszy oddech pod sticky headerem,
   spójny rytm startu strony. Scope: tylko ta podstrona. */
@media (max-width: 600px) {
	body.page-zapisz .page-hero { padding-top: calc(var(--header-h) + 3rem); }
}

/* --------------------------------------------------------------------------
   17. KONTAKT — premium podstrona (/kontakt/)
   Hero-CTA + siatka kart (glow-card) + „Jak do nas trafić" (mapa iframe embed).
   Reużywa: .boss-btn, .boss-glow-card (glow --x/--y z main.js), .section-head,
   warianty tła .boss-section--alt / --deep. Mapa = iframe bez API key.
   -------------------------------------------------------------------------- */

/* --- Siatka kart kontaktowych --- */
.contact-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: clamp(1rem, 2.2vw, 1.5rem);
}
.contact-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.55rem;
	padding: clamp(1.4rem, 3vw, 1.9rem);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	background: linear-gradient(180deg, rgba(20, 20, 22, 0.7), rgba(14, 14, 16, 0.7));
	transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.contact-card:hover {
	transform: translateY(-4px);
	border-color: rgba(255, 31, 174, 0.35);
	box-shadow: 0 24px 50px -30px var(--c-pink-glow);
}
.contact-card__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; margin-bottom: 0.4rem;
	border-radius: 12px;
	color: var(--c-pink-hot);
	background: rgba(255, 31, 174, 0.10);
	border: 1px solid rgba(255, 31, 174, 0.24);
}
.contact-card__icon svg { width: 24px; height: 24px; }
.contact-card__label {
	font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em;
	color: var(--c-ink-mute); font-weight: 700;
}
.contact-card__value { color: var(--c-ink); font-size: 1.05rem; line-height: 1.5; }
.contact-card__value a { color: inherit; transition: color 0.2s var(--ease); word-break: break-word; }
.contact-card__value a:hover { color: var(--c-pink-hot); }
.contact-card__link {
	margin-top: auto; padding-top: 0.3rem;
	display: inline-flex; align-items: center; gap: 0.4rem;
	font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em;
	color: var(--c-pink-hot);
}
.contact-card__arrow { transition: transform 0.25s var(--ease); }
.contact-card__link:hover .contact-card__arrow { transform: translateX(4px); }
.contact-card__socials { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; padding-top: 0.4rem; }
.contact-card__social {
	display: inline-flex; align-items: center;
	padding: 0.4em 0.9em;
	font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em;
	color: var(--c-ink-soft);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-btn);
	transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.contact-card__social:hover,
.contact-card__social:focus-visible {
	color: var(--c-ink);
	border-color: rgba(255, 31, 174, 0.55);
	background: rgba(255, 31, 174, 0.08);
}

/* --- „Jak do nas trafić" — info + mapa --- */
.contact-directions {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}
.contact-directions__title {
	font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight);
	margin-bottom: 0.8rem;
}
.contact-directions__text { color: var(--c-ink-soft); font-size: var(--fs-lead); line-height: 1.55; }
.contact-facts { display: flex; flex-direction: column; gap: 0.9rem; margin: 1.6rem 0; list-style: none; }
.contact-fact { display: flex; flex-direction: column; gap: 0.2rem; }
.contact-fact__label {
	font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em;
	color: var(--c-ink-mute); font-weight: 700;
}
.contact-fact__value { color: var(--c-ink); font-size: 1.05rem; transition: color 0.2s var(--ease); }
a.contact-fact__value:hover { color: var(--c-pink-hot); }
.contact-directions__btn { align-self: flex-start; }

/* Panel mapy — zaokrąglone rogi, subtelny border, responsywny iframe (bez horizontal scrolla) */
.contact-map-panel { display: flex; flex-direction: column; gap: 0.9rem; }
.contact-map-embed {
	position: relative;
	aspect-ratio: 4 / 3;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	border-radius: var(--radius);
	border: 1px solid var(--c-line);
	background: var(--c-bg-elev);
	box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.8);
}
.contact-map-embed iframe {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	border: 0; display: block;
	filter: grayscale(0.15) contrast(1.02);
}
.contact-map-panel__link {
	align-self: flex-start;
	display: inline-flex; align-items: center; gap: 0.4rem;
	font-weight: 700; font-size: 0.9rem; letter-spacing: 0.02em;
	color: var(--c-pink-hot);
}
.contact-map-panel__link:hover .contact-card__arrow { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   18. KOŃCOWY CTA — wspólny glow-card (strona główna + wszystkie podstrony)
   Markup: template-parts/cta-band.php (klasy .home-cta*).
   -------------------------------------------------------------------------- */
.home-cta {
	position: relative;
	/* CTA + stopka = jeden „closing area". Tło CTA startuje neutralną czernią u
	   góry i schodzi do koloru startu stopki (#0d0d11), a różowo-purpurowa
	   poświata jest przy DOLE — spotyka się z górnym glow stopki, więc szew
	   CTA↔footer znika. Brak twardego border-bottom (tworzył podwójną linię
	   z border-top stopki). Panel .home-cta__inner (karta) zostaje bez zmian. */
	background:
		radial-gradient(120% 85% at 50% 116%, rgba(255, 31, 174, 0.12), transparent 60%),
		radial-gradient(80% 70% at 78% 122%, rgba(139, 92, 246, 0.08), transparent 55%),
		linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg) 42%, #0d0d11 100%);
	text-align: center;
}
/* CTA końcowe = jeden spójny, ciemny panel-karta z subtelną poświatą na CAŁEJ
   powierzchni. Glow (.boss-glow-card::after) jest przypięty do tego panelu
   (inset:0), przycięty do border-radius (overflow:hidden) i leży POD treścią
   (z-index:-1 + isolation). Większy --glow-size, bo panel jest duży — inaczej
   robiłby małą plamkę w środku. Na dotyku glow::after=off → zostaje statyczne,
   subtelne tło panelu (poniższe gradienty). */
.home-cta__inner {
	position: relative;
	overflow: hidden;
	max-width: 72ch;
	margin-inline: auto;
	padding: clamp(2.2rem, 5vw, 3.6rem) clamp(1.5rem, 4vw, 3rem);
	border: 1px solid var(--c-line);
	border-radius: 22px;
	background:
		radial-gradient(80% 130% at 50% -10%, rgba(255, 31, 174, 0.12), transparent 60%),
		radial-gradient(90% 130% at 100% 115%, rgba(139, 92, 246, 0.10), transparent 55%),
		linear-gradient(180deg, rgba(20, 20, 22, 0.92), rgba(14, 14, 16, 0.92));
}
/* Większa poświata dla dużego panelu CTA. Selektor złożony (2 klasy) MUSI wygrać
   z domyślnym `.boss-glow-card { --glow-size: 440px }`, które leży dalej w pliku. */
.home-cta__inner.boss-glow-card { --glow-size: 620px; }
.home-cta__eyebrow {
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--c-pink-hot); margin-bottom: 0.9rem;
}
.home-cta__title { font-size: var(--fs-h2); margin-bottom: 1rem; }
.home-cta__title em { font-style: normal; color: var(--c-pink); text-shadow: 0 0 30px rgba(255, 31, 174, 0.30); }
.home-cta__text { color: var(--c-ink-soft); font-size: var(--fs-lead); line-height: 1.5; margin-bottom: 1.8rem; }
.home-cta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

/* --------------------------------------------------------------------------
   19. GALERIA — podstrona /galeria/ (filtry + grid + lightbox)
   -------------------------------------------------------------------------- */
.gallery-filters {
	display: flex; flex-wrap: wrap; gap: 0.6rem;
	margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.gallery-filter {
	font: inherit;
	font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em;
	color: var(--c-ink-soft);
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid var(--c-line);
	border-radius: 100px;
	padding: 0.55em 1.2em;
	cursor: pointer;
	transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.gallery-filter:hover { color: var(--c-ink); border-color: rgba(255, 31, 174, 0.5); }
.gallery-filter.is-active {
	color: #fff;
	border-color: var(--c-pink);
	background: rgba(255, 31, 174, 0.14);
	box-shadow: 0 0 0 1px var(--c-pink), 0 8px 22px -14px var(--c-pink-glow);
}
.gallery-filter--all { color: var(--c-ink-mute); }

/* Podfiltry Gala / Backstage (poziom 2) — pojawiają się dla lat z backstage. */
.gallery-subfilters {
	display: flex; flex-wrap: wrap; gap: 0.5rem;
	margin: -0.6rem 0 clamp(1.5rem, 4vw, 2.5rem);
}
.gallery-subfilters[hidden] { display: none; }
.gallery-subfilter {
	font: inherit;
	font-size: 0.74rem; font-weight: 600; letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--c-ink-mute);
	background: transparent;
	border: 1px solid var(--c-line);
	border-radius: 100px;
	padding: 0.4em 1em;
	cursor: pointer;
	transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.gallery-subfilter:hover { color: var(--c-ink); border-color: rgba(255, 31, 174, 0.45); }
.gallery-subfilter.is-active {
	color: #fff;
	border-color: var(--c-pink);
	background: rgba(255, 31, 174, 0.12);
}

.gallery-page__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(0.8rem, 1.6vw, 1.3rem);
}
.gallery-page__item {
	margin: 0;
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--c-line);
	background: var(--c-bg-elev);
}
.gallery-page__item[hidden] { display: none; }
.gallery-page__btn {
	display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
	background: none; position: relative; line-height: 0;
	-webkit-tap-highlight-color: transparent;
}
.gallery-page__img {
	width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
	transition: transform 0.4s var(--ease), filter 0.3s var(--ease);
}
.gallery-page__btn::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(10, 10, 11, 0.5) 100%);
	opacity: 0.6; transition: opacity 0.3s var(--ease); pointer-events: none;
}
.gallery-page__tags {
	position: absolute; left: 0.6rem; bottom: 0.6rem; z-index: 2;
	display: flex; gap: 0.35rem; flex-wrap: wrap; line-height: 1;
	opacity: 0; transform: translateY(4px);
	transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.gallery-page__tag {
	font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
	color: #fff; background: rgba(255, 31, 174, 0.85);
	border-radius: 100px; padding: 0.28em 0.7em;
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
@media (hover: hover) and (pointer: fine) {
	.gallery-page__btn:hover .gallery-page__img { transform: scale(1.06); }
	.gallery-page__btn:hover::after { opacity: 0.3; }
	.gallery-page__btn:hover .gallery-page__tags { opacity: 1; transform: none; }
}
.gallery-page__btn:focus-visible { outline: 2px solid var(--c-pink-hot); outline-offset: 3px; }

.gallery-page__empty { color: var(--c-ink-mute); text-align: center; padding: 2rem 0; }
.gallery-page__seo { max-width: 74ch; margin-top: clamp(2rem, 5vw, 3.5rem); }

/* Lightbox */
.lightbox {
	position: fixed; inset: 0; z-index: 1000;
	display: flex; align-items: center; justify-content: center;
	padding: clamp(1rem, 4vw, 3rem);
}
.lightbox[hidden] { display: none; }
.lightbox__backdrop {
	position: absolute; inset: 0;
	background: rgba(6, 6, 8, 0.9);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	animation: lightbox-fade 0.2s var(--ease);
}
.lightbox__dialog {
	position: relative; z-index: 1; max-width: min(1000px, 100%); max-height: 100%;
	display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
	animation: lightbox-in 0.28s var(--ease);
}
.lightbox__img {
	max-width: 100%; max-height: 82vh; object-fit: contain;
	border-radius: var(--radius);
	box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px var(--c-line);
}
.lightbox__caption { color: var(--c-ink-soft); font-size: 0.9rem; text-align: center; max-width: 70ch; }
.lightbox__close {
	position: absolute; top: -3rem; right: 0;
	width: 44px; height: 44px; border-radius: 50%;
	background: rgba(255, 255, 255, 0.08); border: 1px solid var(--c-line);
	color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.lightbox__close:hover { background: rgba(255, 31, 174, 0.2); border-color: var(--c-pink); }
@keyframes lightbox-fade { from { opacity: 0; } }
@keyframes lightbox-in { from { opacity: 0; transform: scale(0.96); } }

/* --------------------------------------------------------------------------
   20. RESPONSYWNOŚĆ PODSTRON
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.cards-grid, .cards-grid--3, .cards-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.steps { grid-template-columns: repeat(2, 1fr); }
	.how-it-works .steps { gap: clamp(0.8rem, 2vw, 1.2rem); }
	.gallery-page__grid { grid-template-columns: repeat(2, 1fr); }
	/* Kontakt: „Jak do nas trafić" — mapa nad tekstem, jedna kolumna */
	.contact-directions { grid-template-columns: 1fr; }
	.contact-map-panel { order: -1; }
}
@media (max-width: 560px) {
	.cards-grid, .cards-grid--3, .cards-grid--4 { grid-template-columns: 1fr; }
	.steps { grid-template-columns: 1fr; }
	/* „Jak to działa" na mobile: lekki komponent kroków — numer w stałej kolumnie
	   po lewej, tekst po prawej, wspólna oś, kompaktowa wysokość.
	   Scope: TYLKO .how-it-works — pozostałe podstrony z .steps bez zmian. */
	.how-it-works .steps { gap: 0.6rem; }
	.how-it-works .steps__item {
		display: grid;
		grid-template-columns: 42px 1fr;   /* numer | tekst — stała oś dla wszystkich kart */
		align-items: center;
		gap: 0.9rem;
		min-height: 80px;
		padding: 0.75rem 0.95rem;
	}
	.how-it-works .steps__num { width: 42px; height: 42px; font-size: 1.02rem; }
	.how-it-works .steps__text { font-size: 1.06rem; line-height: 1.45; }
	.gallery-page__grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
	.home-cta__actions { flex-direction: column; align-items: stretch; }
	.home-cta__actions .boss-btn { width: 100%; }
	.lightbox__close { top: 0.5rem; right: 0.5rem; }
	/* Kontakt: karty pełnej szerokości, mapa nieco wyższa */
	.contact-cards { grid-template-columns: 1fr; }
	.contact-map-embed { aspect-ratio: 3 / 3.4; }
}

/* --------------------------------------------------------------------------
   12. PREFERS-REDUCED-MOTION — szanujemy ustawienia użytkownika
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.reveal { opacity: 1; transform: none; }
	.hero__placeholder { animation: none; }
	/* Bez ruchu tła: chowamy video, zostaje statyczny placeholder (poster/gradient). */
	.hero__video { display: none; }
	/* Galeria: bez rotacji/offsetu i bez ukrywania na starcie */
	.boss-gallery__item { --rot: 0deg !important; --ty: 0px !important; opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   21. TRENERZY — spójna prezentacja zespołu instruktorek (/trenerzy/)
   Jeden komponent-karta dla KAŻDEJ instruktorki (te same proporcje zdjęcia,
   ten sam rytm). Marcelina tylko z chipem „Właścicielka studia" — bez większej
   sekcji i bez własnego CTA. Naprzemienny układ zdjęcie/tekst.
   -------------------------------------------------------------------------- */

/* --- Wspólne wartości zespołu: „Co tworzy ekipę BOSS?" --- */
.team-values__head {
	text-align: center;
	max-width: 46ch;
	margin: 0 auto clamp(1.8rem, 4vw, 2.8rem);
}
.team-values__eyebrow {
	font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--c-pink-hot); margin-bottom: 0.6rem;
}
.team-values__title {
	font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight);
}
.value-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(0.9rem, 2vw, 1.2rem);
}
@media (min-width: 560px) { .value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .value-grid { grid-template-columns: repeat(4, 1fr); } }

.value-card {
	position: relative;
	display: flex; flex-direction: column;
	height: 100%;
	padding: clamp(1.35rem, 2.6vw, 1.75rem);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	background:
		radial-gradient(90% 80% at 0% 0%, rgba(255, 31, 174, 0.07), transparent 60%),
		linear-gradient(180deg, rgba(20, 20, 22, 0.7), rgba(14, 14, 16, 0.7));
	overflow: hidden;
	transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
/* Subtelna górna linia akcentu — pojawia się na hover */
.value-card::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
	background: linear-gradient(90deg, var(--c-pink), #8b5cf6);
	transform: scaleX(0); transform-origin: left;
	transition: transform 0.3s var(--ease);
}
.value-card:hover {
	transform: translateY(-4px);
	border-color: rgba(255, 31, 174, 0.35);
	box-shadow: 0 22px 46px -28px var(--c-pink-glow);
}
.value-card:hover::before { transform: scaleX(1); }
.value-card__num {
	position: absolute; top: 0.85rem; right: 1rem;
	font-family: var(--font-display);
	font-size: 1.15rem; line-height: 1; letter-spacing: 0.03em;
	color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.18);
	pointer-events: none;
}
.value-card__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; margin-bottom: 1rem;
	border-radius: 12px;
	color: var(--c-pink-hot);
	background: rgba(255, 31, 174, 0.10);
	border: 1px solid rgba(255, 31, 174, 0.22);
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.value-card__icon svg { width: 24px; height: 24px; }
.value-card:hover .value-card__icon {
	transform: translateY(-2px);
	background: rgba(255, 31, 174, 0.16);
	box-shadow: 0 0 20px -4px var(--c-pink-glow);
}
.value-card__title {
	font-size: 1.06rem; line-height: var(--lh-snug); color: var(--c-ink);
	margin-bottom: 0.45rem;
}
.value-card__desc {
	color: var(--c-ink-soft); font-size: 0.9rem; line-height: 1.55;
	margin-top: auto;
}

/* --- Lista instruktorek --- */
.instructors {
	display: flex;
	flex-direction: column;
	gap: clamp(1.6rem, 4vw, 2.6rem);
	/* Sztywna szerokość kolumny zdjęcia — identyczna dla KAŻDEJ instruktorki,
	   niezależnie od tego, po której stronie jest zdjęcie (fix nierównych rozmiarów).
	   Powiększona vs. poprzednia wersja: zdjęcie jest wyraźnie większe i „na bogato". */
	--media-w: clamp(300px, 34%, 400px);
	/* Jednolity padding karty = wewnętrzny inset zdjęcia z KAŻDEJ z 4 stron. */
	--card-pad: clamp(1.3rem, 2.6vw, 2rem);
}

/* Pojedyncza karta instruktorki — ten sam layout dla wszystkich.
   --x/--y: pozycja kursora (ustawiana przez JS) dla poświaty w ::before. */
.instructor {
	--x: 50%;
	--y: 50%;
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--card-pad);
	/* align-items:stretch tylko jako fallback — geometria zdjęcia jest w
	   praktyce niezależna od niej, bo .instructor__media ma własny
	   align-self + stałą aspect-ratio (patrz niżej). */
	align-items: stretch;
	padding: var(--card-pad);
	border: 1px solid var(--c-line);
	border-radius: 22px;
	background:
		radial-gradient(120% 120% at 0% 0%, rgba(255, 31, 174, 0.06), transparent 55%),
		linear-gradient(180deg, rgba(20, 20, 22, 0.55), rgba(14, 14, 16, 0.55));
	overflow: hidden;
	transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.instructor:hover {
	border-color: rgba(255, 31, 174, 0.22);
	box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.9);
}

/* Poświata pod kursorem — subtelna, tylko w obrębie danej karty.
   JS (main.js) aktualizuje --x/--y na mousemove; tu tylko renderujemy gradient. */
.instructor::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0;
	pointer-events: none;
	background: radial-gradient(
		420px circle at var(--x) var(--y),
		rgba(255, 31, 174, 0.14),
		rgba(139, 92, 246, 0.08) 45%,
		transparent 70%
	);
	transition: opacity 0.4s var(--ease);
}
.instructor:hover::before { opacity: 1; }

/* Smaczek: cienka neonowa linia u góry karty, delikatnie „przesuwa się" na hover */
.instructor::after {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(90deg, transparent, var(--c-pink) 20%, #8b5cf6 50%, var(--c-pink) 80%, transparent);
	background-size: 200% 100%;
	background-position: 0% 0%;
	opacity: 0;
	transition: opacity 0.35s var(--ease), background-position 0.9s var(--ease);
}
.instructor:hover::after {
	opacity: 0.85;
	background-position: 100% 0%;
}

/* Urządzenia dotykowe / bez hovera — bez poświaty (nie ma za czym „podążać") */
@media (hover: none) {
	.instructor::before { display: none; }
}

/* Ograniczone animacje — poświata i linia zostają, ale bez ruchu/przejść */
@media (prefers-reduced-motion: reduce) {
	.instructor::before,
	.instructor::after {
		transition: none;
	}
	.instructor:hover::after { background-position: 0% 0%; }
}
@media (min-width: 1024px) {
	/* Zdjęcie zawsze w kolumnie o stałej szerokości --media-w → identyczny box.
	   Układ 2-kolumnowy włączamy dopiero od 1024px — poniżej zdjęcie jest na całą
	   szerokość (unikamy wąskiego, „paskowego" zdjęcia w ciasnej kolumnie na tablecie).
	   Nieco większy odstęp między zdjęciem a treścią niż padding karty. */
	.instructor          { grid-template-columns: var(--media-w) minmax(0, 1fr); column-gap: clamp(1.6rem, 3vw, 2.6rem); }
	.instructor--reverse { grid-template-columns: minmax(0, 1fr) var(--media-w); }
	.instructor__media { grid-column: 1; grid-row: 1; }
	.instructor__body  { grid-column: 2; grid-row: 1; }
	.instructor--reverse .instructor__media { grid-column: 2; }
	.instructor--reverse .instructor__body  { grid-column: 1; }
}

/* Zdjęcie — WSZYSTKIE w tym samym kontenerze z object-fit: cover.
   Stała aspect-ratio (4:5, wzorzec = Marcelina) niezależna od realnych
   proporcji pliku źródłowego — to ONA definiuje geometrię boxa, a nie
   naturalny rozmiar zdjęcia. Uwaga: "align-items: stretch" na .instructor
   potrafi nadpisać aspect-ratio w Grid, dlatego media dostaje własny
   align-self (patrz niżej) i nie polega na wysokości wiersza. */
.instructor__media {
	position: relative;
	z-index: 1;
	width: 100%;
	aspect-ratio: 4 / 5;
	align-self: center;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--c-line);
	background:
		radial-gradient(70% 60% at 50% 0%, rgba(255, 31, 174, 0.14), transparent 60%),
		var(--c-bg-elev);
	box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9);
}
.instructor__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: var(--pos, center 20%);
	display: block;
}
/* Delikatny gradient u dołu — pod overlay z tagami */
.instructor__media::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, transparent 45%, rgba(10, 10, 11, 0.72) 100%);
	z-index: 1;
}

/* Tagi stylów jako subtelny overlay u dołu zdjęcia — odciąża prawą kolumnę */
.instructor__media-tags {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	display: flex; flex-wrap: wrap; gap: 0.4rem;
	padding: 0.8rem;
}

/* Brak zdjęcia — box z akronimem B.O.S.S. zamiast fotografii */
.instructor__media--placeholder {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 0.6rem;
	padding: 0 0.8rem;
	text-align: center;
}
/* Akronim ma 8 znaków (B.O.S.S.), więc skala jest mniejsza niż przy 4-znakowym
   zapisie — plus max-width, żeby przy wąskim boxie nigdy nie wyszedł poza kadr. */
.instructor__placeholder-mark {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 3.4vw, 2.4rem);
	max-width: 100%;
	color: var(--c-pink); opacity: 0.5; letter-spacing: 0.05em;
}
.instructor__placeholder-note {
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--c-ink-mute);
}

/* Treść — wyśrodkowana w pionie względem zdjęcia (spójny rytm obu kolumn).
   position:relative → treść zawsze nad poświatą karty (.instructor::before). */
.instructor__body {
	position: relative;
	z-index: 1;
	min-width: 0;
	align-self: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.instructor__meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem;
	margin-bottom: 0.9rem;
}
/* Numer 01–05 jako gradientowy akcent przy nazwisku */
.instructor__num {
	font-family: var(--font-display);
	font-size: 1.55rem; line-height: 1; letter-spacing: 0.02em;
	background: linear-gradient(135deg, var(--c-pink) 0%, #8b5cf6 100%);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}
.instructor__eyebrow {
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--c-ink-mute);
	padding-left: 0.75rem; border-left: 1px solid var(--c-line);
}
.instructor__badge {
	display: inline-flex; align-items: center; gap: 0.5em;
	margin-left: auto;
	font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
	color: #fff;
	background: linear-gradient(135deg, #ff1fae 0%, #b3199c 55%, #8b5cf6 130%);
	padding: 0.4em 0.9em; border-radius: 999px;
	box-shadow: 0 8px 22px -12px var(--c-pink-glow);
}
.instructor__name {
	font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
	line-height: var(--lh-snug); letter-spacing: var(--tracking-tight);
	color: var(--c-ink); margin-bottom: 0.35rem;
}
.instructor__role {
	font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--c-pink-hot); margin-bottom: 1.1rem;
}
.instructor__desc {
	color: var(--c-ink-soft); font-size: var(--fs-body); line-height: 1.65;
	max-width: 60ch;
}
.instructor__desc p + p { margin-top: 0.75rem; }

/* Dekoracyjny podział między opisem a punktami */
.instructor__divider {
	display: block; height: 1px; margin: 1.3rem 0 0;
	background: linear-gradient(90deg, rgba(255, 31, 174, 0.5), rgba(255, 31, 174, 0.06) 55%, transparent);
}

/* Punkty „mocne strony" — 4 mini-kafle w gridzie 2×2.
   grid-auto-rows: 1fr → wszystkie 4 kafle mają IDENTYCZNĄ wysokość,
   nawet gdy któryś tekst zawinie się do dwóch linii. */
.instructor__points {
	list-style: none; margin: 1.1rem 0 0; padding: 0;
	display: grid; gap: 0.6rem; grid-template-columns: 1fr 1fr;
	grid-auto-rows: 1fr;
}
.instructor__points li {
	position: relative;
	display: flex; align-items: center; min-height: 3.1rem;
	padding: 0.7rem 0.85rem 0.7rem 1.9rem;
	color: var(--c-ink-soft); font-size: 0.88rem; line-height: 1.35;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--c-line); border-radius: 10px;
	transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.instructor__points li::before {
	content: ""; position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%);
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--c-pink);
	box-shadow: 0 0 10px var(--c-pink-glow);
}
.instructor:hover .instructor__points li {
	border-color: rgba(255, 31, 174, 0.16);
	background: rgba(255, 31, 174, 0.04);
}

/* Chip / tag — bazowy + wariant overlay na zdjęciu */
.i-tag {
	font-size: var(--fs-tag); font-weight: 600; letter-spacing: 0.04em;
	color: var(--c-ink-soft);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--c-line);
	padding: 0.4em 0.85em; border-radius: 999px;
	transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.instructor__media-tags .i-tag {
	font-size: 0.68rem; padding: 0.34em 0.72em;
	color: #fff;
	background: rgba(10, 10, 11, 0.5);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	border-color: rgba(255, 255, 255, 0.22);
}
.instructor:hover .instructor__media-tags .i-tag { border-color: rgba(255, 31, 174, 0.4); }

/* Tablet + mobile (stacked): zdjęcie NAD tekstem, na całą szerokość karty.
   Dzięki temu odstęp po bokach zdjęcia = odstęp góra/dół = --card-pad
   (równe insety, koniec z wąskim zdjęciem i wielkimi marginesami po bokach). */
@media (max-width: 1023px) {
	.instructor__media {
		max-height: 72vh;   /* na szerszych tabletach zdjęcie nie robi się absurdalnie wysokie */
	}
	/* Na szerszym (poziomym) kadrze stacked kadrujemy od góry → twarze zawsze widoczne,
	   niezależnie od indywidualnego --pos (który steruje kadrem pionowym na desktopie). */
	.instructor__media img { object-position: 50% 14%; }
	.instructor__body { align-self: stretch; }
	.instructor__desc { max-width: none; }
}
@media (max-width: 359px) {
	/* Tylko na skrajnie wąskich ekranach kafle w jednej kolumnie (czytelność) */
	.instructor__points { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.instructor__meta { gap: 0.55rem; }
	.instructor__badge { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   22. ZAJĘCIA (/zajecia/) — style, grupy wiekowe, zdjęcia, kroki, CTA
   Wizualna prezentacja oferty. Karty stylów korzystają z systemu --style-c
   (signup-style--*). Wspólny nagłówek sekcji .section-head (wyśrodkowany).
   -------------------------------------------------------------------------- */

/* Wspólny, wyśrodkowany nagłówek sekcji (eyebrow + tytuł + lead) */
.section-head {
	text-align: center;
	max-width: 62ch;
	margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.section-head__eyebrow {
	font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--c-pink-hot); margin-bottom: 0.6rem;
}
.section-head__title {
	font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight);
	margin-bottom: 0.8rem;
}
.section-head__lead {
	color: var(--c-ink-soft); font-size: var(--fs-lead); line-height: 1.55;
	max-width: 58ch; margin: 0 auto;
}

/* Chip w wariancie różowym (typy grup) */
.i-tag--accent {
	color: var(--c-pink-hot);
	background: rgba(255, 31, 174, 0.10);
	border-color: rgba(255, 31, 174, 0.30);
}

/* Delikatny stagger wejścia dla siatek kart (bazuje na --i) */
.zstyle-card[data-reveal],
.steps__item[data-reveal] { transition-delay: calc(var(--i, 0) * 0.06s); }

/* Sąsiadujące sekcje /zajecia/ — spójny, nieprzesadzony rytm pionowy */
.zstyles-section, .zforwho-section, .zhelp-section {
	padding-block: clamp(2.6rem, 6vw, 5rem);
}

/* --- 2. Style tańca --- */
.zstyles {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1rem, 2.2vw, 1.6rem);
}
.zstyle-card {
	position: relative;
	display: flex; flex-direction: column;
	padding: clamp(1.5rem, 3vw, 2.1rem);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	background:
		radial-gradient(120% 90% at 0% 0%, var(--style-bg, rgba(255, 31, 174, 0.10)), transparent 55%),
		linear-gradient(180deg, rgba(20, 20, 22, 0.92), rgba(14, 14, 16, 0.92));
	overflow: hidden;
	transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
/* Górna linia akcentu w kolorze stylu */
.zstyle-card::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
	background: var(--style-c, var(--c-pink));
	opacity: 0.9;
}
.zstyle-card:hover {
	transform: translateY(-4px);
	border-color: var(--style-border, rgba(255, 31, 174, 0.5));
	box-shadow: 0 24px 50px -30px var(--style-glow, var(--c-pink-glow));
}
.zstyle-card__num {
	position: absolute; top: 0.7rem; right: 1rem;
	font-family: var(--font-display);
	font-size: 1.4rem; line-height: 1; letter-spacing: 0.03em;
	color: transparent; -webkit-text-stroke: 1px var(--style-border, rgba(255, 255, 255, 0.2));
	pointer-events: none;
}
.zstyle-card__head { margin-bottom: 0.9rem; padding-right: 2.2rem; }
.zstyle-card__name {
	font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem);
	color: var(--style-c, var(--c-ink)); margin-bottom: 0.3rem;
}
.zstyle-card__for {
	font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em;
	color: var(--c-ink-mute);
}
.zstyle-card__desc {
	color: var(--c-ink-soft); font-size: 0.96rem; line-height: 1.6;
	margin-bottom: 1.1rem;
}
.zstyle-card__points {
	display: grid; grid-template-columns: repeat(2, 1fr);
	gap: 0.45rem 1.1rem; margin-bottom: 1.2rem;
}
.zstyle-card__points li {
	position: relative; padding-left: 1.1rem;
	font-size: 0.9rem; line-height: 1.4; color: var(--c-ink-soft);
}
.zstyle-card__points li::before {
	content: ""; position: absolute; left: 0; top: 0.5em;
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--style-c, var(--c-pink));
	box-shadow: 0 0 8px -1px var(--style-glow, var(--c-pink-glow));
}
.zstyle-card__tags {
	display: flex; flex-wrap: wrap; gap: 0.4rem;
	margin-top: auto; padding-top: 0.2rem;
}

/* --- 3. „Dla kogo są zajęcia?" — chipy-kotwice do dużych sekcji --- */
.zforwho-chips {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem;
	margin-top: clamp(0.4rem, 2vw, 1rem);
}
.zforwho-chip {
	display: inline-flex; align-items: center;
	font-size: 0.9rem; font-weight: 700; letter-spacing: 0.02em;
	color: var(--c-ink); text-decoration: none;
	padding: 0.6em 1.3em; border-radius: 999px;
	background: rgba(255, 31, 174, 0.08);
	border: 1px solid rgba(255, 31, 174, 0.28);
	transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
}
.zforwho-chip:hover, .zforwho-chip:focus-visible {
	transform: translateY(-2px);
	background: rgba(255, 31, 174, 0.14);
	border-color: rgba(255, 31, 174, 0.55);
	box-shadow: 0 12px 26px -16px var(--c-pink-glow);
}

/* --- 4–6. Duże sekcje wiekowe: Dzieci / Młodzież / Dorośli --- */
.zage-section {
	padding-block: clamp(2.8rem, 6.5vw, 5.5rem);
	scroll-margin-top: calc(var(--header-h) + 1.2rem);
	border-top: 1px solid var(--c-line);
}
.zage {
	display: grid;
	grid-template-columns: 1.02fr 0.98fr;
	gap: clamp(1.6rem, 4vw, 3.4rem);
	align-items: center;
}
/* Naprzemienny rytm — zdjęcia po lewej dla sekcji „reverse" (Młodzież) */
.zage-section--reverse .zage__media { order: -1; }

.zage__eyebrow {
	font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--c-pink-hot); margin-bottom: 0.5rem;
}
.zage__title {
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); line-height: var(--lh-snug);
	letter-spacing: var(--tracking-tight); margin-bottom: 0.9rem;
}
.zage__lead {
	color: var(--c-ink-soft); font-size: var(--fs-lead); line-height: 1.6;
	margin-bottom: 0.9rem; max-width: 54ch;
}
.zage__lead:last-of-type { margin-bottom: 1.4rem; }

/* Kafle wiekowe (badge) */
.zage-tiers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 0.8rem; margin-bottom: 1.3rem;
}
.zage-tier {
	display: flex; flex-direction: column; gap: 0.35rem;
	padding: 0.95rem 1.05rem;
	border: 1px solid var(--c-line); border-radius: 12px;
	background:
		radial-gradient(120% 100% at 0% 0%, rgba(255, 31, 174, 0.10), transparent 60%),
		rgba(255, 255, 255, 0.02);
	transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.zage-tier:hover { transform: translateY(-3px); border-color: rgba(255, 31, 174, 0.4); }
.zage-tier__age {
	font-family: var(--font-display); font-size: 1.35rem; line-height: 1;
	letter-spacing: 0.02em; color: var(--c-pink-hot);
}
.zage-tier__desc { font-size: 0.86rem; line-height: 1.45; color: var(--c-ink-soft); }

/* Chipy typów/poziomów */
.zage-features { display: flex; flex-wrap: wrap; gap: 0.45rem; }

/* Kolaż zdjęć: 1 duże (pełna szerokość) + 2 mniejsze obok siebie.
   Proporcje 3:2 = format źródłowy zdjęć → minimalny, kontrolowany crop. */
.zage-collage {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(0.5rem, 1.2vw, 0.85rem);
}
.zage-collage__item {
	margin: 0; overflow: hidden; border-radius: 14px;
	border: 1px solid var(--c-line);
	aspect-ratio: 3 / 2;
	background: var(--c-bg-elev);
	transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.zage-collage__item--lg { grid-column: 1 / -1; }
.zage-collage__img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 0.45s var(--ease);
}
.zage-collage__item:hover {
	border-color: rgba(255, 31, 174, 0.4);
	box-shadow: 0 22px 46px -30px var(--c-pink-glow);
}
.zage-collage__item:hover .zage-collage__img { transform: scale(1.05); }

/* --- 7. Kroki + CTA pod nimi --- */
.steps__title { font-size: 1.05rem; line-height: 1.2; color: var(--c-ink); }
.zhelp-actions { display: flex; justify-content: center; margin-top: clamp(1.4rem, 3vw, 2rem); }

/* --- Responsywność /zajecia/ --- */
@media (max-width: 900px) {
	.zstyles { grid-template-columns: 1fr; }
	/* Sekcje wiekowe: jedna pod drugą, zdjęcia zawsze nad tekstem */
	.zage { grid-template-columns: 1fr; gap: clamp(1.4rem, 5vw, 2rem); }
	.zage__media, .zage-section--reverse .zage__media { order: -1; }
	.zage__lead { max-width: none; }
}
@media (max-width: 560px) {
	.zstyle-card__points { grid-template-columns: 1fr; }
	.zage-tiers { grid-template-columns: 1fr; }
	/* Kolaż: jedna kolumna — zdjęcia pełnej szerokości, czytelne, nie za małe */
	.zage-collage { grid-template-columns: 1fr; }
}

/* ==========================================================================
   23. STRONA GŁÓWNA (landing) — sekcje home-* + wspólny efekt .boss-glow-card
   Przebudowa 2026-07-18. Reużywa: .section-head, .value-card, .zage-collage,
   .steps, system kolorów stylów (signup-style--*).
   ========================================================================== */

/* --- Wspólny helper: poświata pod kursorem na kartach ---------------------
   Ten sam wzorzec co karty /trenerzy/: JS (main.js, sekcja 8) ustawia --x/--y
   na mousemove, tu renderujemy gradient. Glow w ::after (z-index -1 + isolation)
   → jest NAD tłem karty, ale POD treścią, bez kolizji z ::before (linie akcentu).
   Tylko urządzenia z hoverem; wyłączony przy prefers-reduced-motion. */
.boss-glow-card {
	--x: 50%;
	--y: 50%;
	--glow-size: 440px; /* promień poświaty — nadpisywalny na większych panelach (np. CTA) */
	position: relative;
	isolation: isolate;
}
.boss-glow-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
	background: radial-gradient(
		var(--glow-size) circle at var(--x) var(--y),
		rgba(255, 31, 174, 0.16),
		rgba(139, 92, 246, 0.09) 45%,
		transparent 72%
	);
	transition: opacity 0.4s var(--ease);
}
.boss-glow-card:hover::after { opacity: 1; }
/* Bez hovera (dotyk) — nie ma za czym „podążać" */
@media (hover: none) {
	.boss-glow-card::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.boss-glow-card::after { transition: none; }
}

/* Stagger wejścia siatek kart home (bazuje na --i) */
.home-group-card[data-reveal],
.home-style-card[data-reveal] { transition-delay: calc(var(--i, 0) * 0.06s); }

/* --- 2. O studiu: „BOSS to więcej niż zajęcia" --------------------------- */
.home-about__head {
	max-width: 64ch;
	margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}
.home-about__eyebrow {
	font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--c-pink-hot); margin-bottom: 0.6rem;
}
.home-about__title {
	font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight);
	margin-bottom: 0.9rem;
}
.home-about__title em { color: var(--c-pink); font-style: normal; }
.home-about__lead {
	color: var(--c-ink-soft); font-size: var(--fs-lead); line-height: 1.6;
}
.home-about__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 4vw, 2.5rem);
	align-items: center;
}
@media (min-width: 960px) {
	.home-about__grid { grid-template-columns: 0.95fr 1.05fr; }
}
/* Wewnątrz sekcji O studiu wartości zawsze 2×2 (spójny ciężar obok kolażu) */
.home-about__values.value-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 459px) {
	.home-about__values.value-grid { grid-template-columns: 1fr; }
}

/* --- 3. Grupy wiekowe (teaser do /zajecia/) ------------------------------ */
.home-groups__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: clamp(1rem, 2.2vw, 1.5rem);
}
.home-group-card {
	display: flex; flex-direction: column;
	text-decoration: none; color: inherit;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	overflow: hidden;
	background: linear-gradient(180deg, rgba(20, 20, 22, 0.7), rgba(14, 14, 16, 0.7));
	transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.home-group-card:hover {
	transform: translateY(-4px);
	border-color: rgba(255, 31, 174, 0.35);
	box-shadow: 0 24px 50px -30px var(--c-pink-glow);
}
.home-group-card:focus-visible {
	outline: 2px solid var(--c-pink-hot); outline-offset: 3px;
}
.home-group-card__media {
	position: relative; display: block;
	aspect-ratio: 3 / 2; overflow: hidden;
	background: var(--c-bg-elev);
}
.home-group-card__img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 0.5s var(--ease);
}
.home-group-card:hover .home-group-card__img { transform: scale(1.05); }
.home-group-card__media::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, transparent 40%, rgba(10, 10, 11, 0.78) 100%);
}
.home-group-card__ages {
	position: absolute; left: 0.9rem; bottom: 0.75rem; z-index: 1;
	font-family: var(--font-display);
	font-size: 1.1rem; letter-spacing: 0.03em; color: var(--c-pink-hot);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.home-group-card__body {
	display: flex; flex-direction: column; gap: 0.5rem;
	padding: clamp(1.1rem, 2.4vw, 1.5rem);
}
.home-group-card__name {
	font-size: 1.3rem; line-height: 1.1; color: var(--c-ink);
}
.home-group-card__desc {
	color: var(--c-ink-soft); font-size: 0.92rem; line-height: 1.5;
}
.home-group-card__link {
	margin-top: 0.35rem;
	display: inline-flex; align-items: center; gap: 0.4rem;
	font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em;
	color: var(--c-pink-hot);
}
.home-group-card__link svg { transition: transform 0.25s var(--ease); }
.home-group-card:hover .home-group-card__link svg { transform: translateX(4px); }

/* --- 4. Style tańca (teaser do /zajecia/) -------------------------------- */
.home-styles__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1rem, 2.2vw, 1.5rem);
}
.home-style-card {
	position: relative;
	display: flex; flex-direction: column; gap: 0.7rem;
	padding: clamp(1.4rem, 3vw, 2rem);
	text-decoration: none; color: inherit;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 0% 0%, var(--style-bg, rgba(255, 31, 174, 0.10)), transparent 55%),
		linear-gradient(180deg, rgba(20, 20, 22, 0.92), rgba(14, 14, 16, 0.92));
	transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.home-style-card::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
	background: var(--style-c, var(--c-pink)); opacity: 0.9;
}
.home-style-card:hover {
	transform: translateY(-4px);
	border-color: var(--style-border, rgba(255, 31, 174, 0.5));
	box-shadow: 0 24px 50px -30px var(--style-glow, var(--c-pink-glow));
}
.home-style-card:focus-visible {
	outline: 2px solid var(--style-c, var(--c-pink-hot)); outline-offset: 3px;
}
.home-style-card__num {
	position: absolute; top: 0.6rem; right: 1rem;
	font-family: var(--font-display); font-size: 1.4rem; line-height: 1; letter-spacing: 0.03em;
	color: transparent; -webkit-text-stroke: 1px var(--style-border, rgba(255, 255, 255, 0.2));
	pointer-events: none;
}
.home-style-card__name {
	font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem); line-height: 1.1;
	color: var(--style-c, var(--c-ink)); padding-right: 2.2rem;
}
.home-style-card__desc {
	color: var(--c-ink-soft); font-size: 0.95rem; line-height: 1.55;
}
.home-style-card__tags {
	display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.1rem;
}
.home-style-card__link {
	margin-top: auto; padding-top: 0.3rem;
	display: inline-flex; align-items: center; gap: 0.4rem;
	font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em;
	color: var(--style-c, var(--c-pink-hot));
}
.home-style-card__link svg { transition: transform 0.25s var(--ease); }
.home-style-card:hover .home-style-card__link svg { transform: translateX(4px); }

/* --- 5. Trenerzy — teaser ------------------------------------------------ */
.home-trainers__card {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.4rem, 3vw, 2.4rem);
	align-items: center;
	padding: clamp(1.6rem, 4vw, 3rem);
	border: 1px solid var(--c-line);
	border-radius: 22px;
	overflow: hidden;
	background:
		radial-gradient(90% 130% at 100% 0%, rgba(139, 92, 246, 0.12), transparent 55%),
		radial-gradient(80% 130% at 0% 100%, rgba(255, 31, 174, 0.10), transparent 55%),
		linear-gradient(180deg, rgba(20, 20, 22, 0.78), rgba(14, 14, 16, 0.78));
}
@media (min-width: 860px) {
	.home-trainers__card { grid-template-columns: 1.05fr 0.95fr; }
}
.home-trainers__eyebrow {
	font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--c-pink-hot); margin-bottom: 0.5rem;
}
.home-trainers__title {
	font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight);
	margin-bottom: 0.7rem;
}
.home-trainers__text {
	color: var(--c-ink-soft); font-size: var(--fs-lead); line-height: 1.6;
	max-width: 52ch; margin-bottom: 1.4rem;
}
.home-trainers__avatars {
	display: flex; flex-wrap: wrap; gap: clamp(0.5rem, 1.6vw, 0.9rem);
	justify-content: flex-start;
}
@media (min-width: 860px) {
	.home-trainers__avatars { justify-content: flex-end; }
}
.home-trainer-avatar {
	width: clamp(76px, 13vw, 112px); aspect-ratio: 1;
	border-radius: 50%; overflow: hidden;
	border: 2px solid rgba(255, 255, 255, 0.14);
	background: var(--c-bg-elev);
	box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.85);
	transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.home-trainer-avatar img {
	width: 100%; height: 100%; object-fit: cover;
	object-position: var(--pos, center 20%); display: block;
}
.home-trainers__card:hover .home-trainer-avatar { border-color: rgba(255, 31, 174, 0.4); }
.home-trainer-avatar:hover {
	transform: translateY(-4px) scale(1.06);
	box-shadow: 0 18px 36px -16px var(--c-pink-glow);
}
.home-trainer-avatar--placeholder {
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, rgba(255, 31, 174, 0.20), rgba(139, 92, 246, 0.20));
}
.home-trainer-avatar__initials {
	font-family: var(--font-display); font-size: clamp(1.1rem, 3vw, 1.7rem);
	color: var(--c-ink); opacity: 0.85; letter-spacing: 0.03em;
}

/* --- Responsywność home -------------------------------------------------- */
@media (max-width: 640px) {
	.home-styles__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.home-about__head { max-width: none; }
}