/* =========================================
   vyhody.css — Fajn Účet
   Stránka: landing / výhody Fajn účtu
   Inspirováno stylem homepage.php (fajnsoused_cz) a
   homepage-varianty.php (fajnprace_cz) — statistiky pruh,
   trustbar, karty s čísly, tmavý blok skupiny, silné CTA.
   ========================================= */

/* ===== BAREVNÁ PALETA — jen pro tuto stránku =====
   Přepisuje globální --accent (modrá, obecne.css) na tyrkysovou, aby
   stránka jela oranžová + tyrkysová místo oranžová + modrá. Zbytek
   projektu (jiné stránky) zůstává beze změny.
   Světlejší varianta (#41E0D1, CMYK 71/0/7/12) měla s bílým textem na
   plné ploše (blok statistik) kontrast jen 1,64:1 — hluboko pod WCAG AA
   (min. 3:1 pro UI/velký text). Tahle tmavší (#0D9488) dává 3,65:1. */
.vyhody-stranka {
	--accent: 175 84% 32%;
}

/* ===== POZADÍ STRÁNKY — nahrazuje diagonální oranžovo-modrý klín z obecne.css,
   jen pro tuto stránku (jemný neutrální gradient, vzor fajnsoused_cz/homepage.php,
   kde header jede přímo na světlém pozadí hero sekce, bez barevného pruhu) ===== */
body {
	background: hsl(var(--background)) !important;
}

/* ===== WRAPPER — stránka jede full-bleed, bez rámování; jednotlivé
   sekce si nesou vlastní pozadí (viz .vyhody-hero, .vyhody-stats, ...).
   `.container` v obecne.css je sdílený kontejner (max-width: 1280px +
   padding: 1.5rem 1rem) — needituje se. Sekce ho "prorazí" přes
   position: relative + left/right: 50% vůči viewportu, ne vůči vlastnímu
   (odsazenému) rodiči — prosté width: 100vw by kvůli paddingu .container
   nesedělo přesně na okraj okna. Pozor: .vyhody-stranka NESMÍ mít
   overflow-x: hidden — to by tento trik (záporné okraje přes okraj
   rodiče) samo oříznulo; ochranu proti vodorovnému scrollu už dělá
   overflow-x: hidden na body v obecne.css. */
.vyhody-stranka > section {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
}

/* `.container` má i svislý padding (1.5rem nahoře/dole) — u první/poslední
   sekce ho zrušíme, ať hero sedí hned pod headerem bez bílé mezery a
   poslední sekce bez mezery nad patičkou. */
.vyhody-stranka > section:first-child {
	margin-top: -1.5rem;
}
.vyhody-stranka > section:last-child {
	margin-bottom: -1.5rem;
}

/* ===== HEADER — sytě oranžové pozadí jen pro tuto stránku =====
   Header (_header.php) nemá vlastní pozadí — needituje se přímo, ale
   dostává sytě oranžový podklad odsud, aby na něm vynikl bílý text/ikony,
   se kterými je navržený (viz obecne.css). Loga a hamburger ikona jsou
   externí obrázky s napevno bílou barvou (ne inline SVG). */
header {
	background: hsl(var(--primary));
}

/* ===== SPOLEČNÉ ===== */
.vyhody-hlavicka {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 40px;
}

.vyhody-hlavicka__eyebrow {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: hsl(var(--primary));
	margin-bottom: 10px;
}

.vyhody-hlavicka__nadpis {
	font-size: 1.75rem;
	font-weight: 700;
	color: hsl(var(--foreground));
	margin: 0 0 10px;
}

.vyhody-hlavicka__popis {
	font-size: 1rem;
	color: hsl(var(--muted-foreground));
	margin: 0;
	line-height: 1.5;
}

.vyhody-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.8125rem 1.5rem;
	border-radius: 999px;
	font-size: 0.9375rem;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
	border: none;
	cursor: pointer;
}
.vyhody-btn--velke {
	padding: 0.9375rem 1.75rem;
	font-size: 1rem;
}
.vyhody-btn .lucide {
	width: 1.125rem;
	height: 1.125rem;
}
.vyhody-btn--primarni {
	background: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
	box-shadow: 0 10px 24px hsl(var(--primary) / 0.35);
}
.vyhody-btn--primarni:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 28px hsl(var(--primary) / 0.4);
}
/* Modré tlačítko — hero varianty B ve vyhody-varianty.php (#0074ff, bílý text 4,6:1) */
.vyhody-btn--modre {
	background: #0074ff;
	color: #fff;
	box-shadow: 0 10px 24px rgba(0, 116, 255, 0.35);
}
.vyhody-btn--modre:hover {
	background: #005fd6;
	box-shadow: 0 14px 28px rgba(0, 116, 255, 0.4);
}
/* Varianta A ve vyhody-varianty.php — hlavní tlačítko modré jako ve variantě B
   (sdílený partial _vyhody-hero-a.php, proto přes obal varianty) */
.vyhody-varianta--velky-maskot .vyhody-btn--primarni {
	background: #0074ff;
	color: #fff;
	box-shadow: 0 10px 24px rgba(0, 116, 255, 0.35);
}
.vyhody-varianta--velky-maskot .vyhody-btn--primarni:hover {
	background: #005fd6;
	box-shadow: 0 14px 28px rgba(0, 116, 255, 0.4);
}
.vyhody-btn--bily {
	background: #fff;
	color: hsl(28, 90%, 42%);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.vyhody-btn--bily:hover {
	transform: translateY(-2px);
	background: #fff2e0;
}
.vyhody-btn--ghost {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.4);
}
.vyhody-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.2);
}

/* ===== HERO — full-bleed, bez rámování; vzor fajnsoused_cz/homepage.php ===== */
.vyhody-hero {
	padding: 3rem 2rem 2.5rem;
	background: linear-gradient(180deg, hsl(var(--accent) / 0.12) 0%, hsl(var(--background)) 100%);
	overflow: hidden;
	position: relative;
}

.vyhody-hero__inner {
	max-width: 1100px;
	margin: 0 auto;
}

.vyhody-hero__horni {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: 2.5rem;
}

.vyhody-hero__obsah {
	max-width: 420px;
	flex: 1 1 auto;
}

.vyhody-hero__predtitulek {
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: hsl(var(--primary));
	background: hsl(var(--primary) / 0.1);
	padding: 0.25rem 0.75rem;
	border-radius: 9999px;
	margin: 0 0 0.75rem;
}

.vyhody-hero__nadpis {
	font-size: 2.125rem;
	font-weight: 700;
	line-height: 1.15;
	color: hsl(var(--foreground));
	margin: 0 0 0.875rem;
}

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

.vyhody-hero__poznamka {
	margin: 0.875rem 0 0;
	font-size: 0.8125rem;
	color: hsl(var(--muted-foreground));
}

/* ---------- Maskot + mluvící bublina (vzor fs-hero__bubble) ---------- */
.vyhody-hero__vizual {
	position: relative;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	width: 340px;
}

.vyhody-hero__maskot {
	max-width: 190px;
	filter: drop-shadow(0 12px 24px hsl(var(--primary) / 0.25));
}

.vyhody-hero__bublina {
	position: relative;
	flex: 1 1 auto;
	padding: 18px 20px;
	background: #fff;
	border: 3px solid hsl(var(--primary));
	border-radius: 22px;
	box-shadow: 0 10px 30px hsl(var(--primary) / 0.18);
	animation: vyhodyBublinaNadech 4s ease-in-out infinite;
}

.vyhody-hero__bublina-tecka {
	position: absolute;
	top: -8px;
	right: -8px;
	width: 16px;
	height: 16px;
	background: hsl(var(--accent));
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 2px 6px hsl(var(--accent) / 0.4);
}

@keyframes vyhodyBublinaNadech {
	0%, 100% { transform: translateY(0) rotate(-1deg); }
	50%      { transform: translateY(-6px) rotate(1deg); }
}

/* Špička bubliny — míří doleva na maskota */
.vyhody-hero__bublina::before,
.vyhody-hero__bublina::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 100%;
	border: solid transparent;
	border-right-color: hsl(var(--primary));
	border-width: 13px;
	margin-top: -13px;
}
.vyhody-hero__bublina::after {
	border-right-color: #fff;
	border-width: 9px;
	margin-top: -9px;
	margin-right: -4px;
}

.vyhody-hero__bublina-hlavni {
	margin: 0 0 6px;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.25;
	color: hsl(var(--foreground));
}

.vyhody-hero__bublina-vedlejsi {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 500;
	color: hsl(var(--primary));
	transition: opacity 0.2s ease;
}
.vyhody-hero__bublina-vedlejsi .lucide {
	width: 1.0625rem;
	height: 1.0625rem;
	flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
	.vyhody-hero__bublina {
		animation: none;
	}
}

/* ===== ŽIVOTNÍ OSA — "Jeden účet na celý pracovní život" =====
   Svislý sloupec mezi textem (vlevo) a maskotem s bublinou (vpravo). */
.vyhody-osa {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.vyhody-osa__cara {
	position: absolute;
	top: 1.25rem;
	bottom: 1.25rem;
	left: 1.25rem;
	width: 2px;
	background: linear-gradient(180deg, hsl(var(--primary) / 0.3) 0%, hsl(var(--accent) / 0.3) 100%);
}

.vyhody-osa__bod {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	text-align: left;
	gap: 0.75rem;
}

.vyhody-osa__ikona {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 9999px;
	background: #fff;
	border: 2px solid hsl(var(--primary));
	color: hsl(var(--primary));
	box-shadow: 0 4px 12px hsl(var(--primary) / 0.18);
	flex-shrink: 0;
	animation: vyhodyOsaPulz 3.2s ease-in-out infinite;
}
.vyhody-osa__bod:nth-child(2n) .vyhody-osa__ikona {
	border-color: hsl(var(--accent));
	color: hsl(var(--accent));
	box-shadow: 0 4px 12px hsl(var(--accent) / 0.18);
}
.vyhody-osa__bod:nth-child(1) .vyhody-osa__ikona { animation-delay: 0s; }
.vyhody-osa__bod:nth-child(2) .vyhody-osa__ikona { animation-delay: 0.5s; }
.vyhody-osa__bod:nth-child(3) .vyhody-osa__ikona { animation-delay: 1s; }
.vyhody-osa__bod:nth-child(4) .vyhody-osa__ikona { animation-delay: 1.5s; }
@keyframes vyhodyOsaPulz {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-5px); }
}
.vyhody-osa__ikona .lucide {
	width: 1.375rem;
	height: 1.375rem;
}
@media (prefers-reduced-motion: reduce) {
	.vyhody-osa__ikona {
		animation: none;
	}
}

.vyhody-osa__text {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.vyhody-osa__vek {
	font-size: 0.9375rem;
	font-weight: 700;
	color: hsl(var(--foreground));
}

.vyhody-osa__popis {
	font-size: 0.8125rem;
	line-height: 1.35;
	color: hsl(var(--muted-foreground));
	max-width: 160px;
}

/* ===== STATISTIKY ===== */
.vyhody-stats {
	background: hsl(var(--accent));
	padding: 2.5rem 1.5rem;
}

.vyhody-stats__inner {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	text-align: center;
}

.vyhody-stats__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.375rem;
	color: #fff;
}

.vyhody-stats__icon {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.375rem;
}
.vyhody-stats__icon--akcent {
	background: hsl(var(--primary));
}
.vyhody-stats__icon .lucide {
	width: 1.25rem;
	height: 1.25rem;
}

.vyhody-stats__cislo {
	font-size: 1.875rem;
	font-weight: 700;
}

.vyhody-stats__label {
	font-size: 0.875rem;
	opacity: 0.9;
}

/* ===== TRUSTBAR ===== */
.vyhody-trustbar {
	background: #fff;
	border-bottom: 1px solid hsl(var(--border));
	padding: 1.125rem 1.5rem;
}

.vyhody-trustbar__inner {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 1.75rem;
	flex-wrap: wrap;
	justify-content: center;
}

.vyhody-trustbar__label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: hsl(var(--muted-foreground));
	white-space: nowrap;
}

.vyhody-trustbar__loga {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	flex-wrap: wrap;
	justify-content: center;
}

.vyhody-trustbar__logo {
	height: 26px;
	width: auto;
	object-fit: contain;
}

.vyhody-trustbar__item {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.84375rem;
	font-weight: 500;
	color: hsl(var(--foreground));
	white-space: nowrap;
}
.vyhody-trustbar__item .lucide {
	width: 1rem;
	height: 1rem;
	color: hsl(var(--primary));
}

/* ===== VÝHODY — MŘÍŽKA KARET ===== */
.vyhody-mrizka {
	padding: 3.5rem 2rem;
	background: #fff;
}
.vyhody-mrizka__inner {
	max-width: 1100px;
	margin: 0 auto;
}

.vyhody-mrizka__karty {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
}

.vyhody-karta {
	position: relative;
	background: hsl(var(--secondary));
	border: 1px solid hsl(var(--border));
	border-radius: 1rem;
	padding: 1.75rem 1.5rem;
	transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.vyhody-karta:hover {
	transform: translateY(-3px);
	background: #fff;
	box-shadow: 0 14px 28px -18px hsl(var(--primary) / 0.35);
}

.vyhody-karta__cislo {
	position: absolute;
	top: 1rem;
	right: 1.125rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: hsl(var(--muted-foreground));
}

.vyhody-karta__ikona-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 9999px;
	background: hsl(var(--primary) / 0.12);
	color: hsl(var(--primary));
	margin-bottom: 1rem;
}
.vyhody-karta:nth-child(2n) .vyhody-karta__ikona-wrap {
	background: hsl(var(--accent) / 0.12);
	color: hsl(var(--accent));
}
.vyhody-karta__ikona {
	width: 1.375rem;
	height: 1.375rem;
}

.vyhody-karta__nadpis {
	font-size: 1.0625rem;
	font-weight: 600;
	color: hsl(var(--foreground));
	margin: 0 0 0.5rem;
}

.vyhody-karta__popis {
	font-size: 0.875rem;
	line-height: 1.5;
	color: hsl(var(--muted-foreground));
	margin: 0;
}

/* ===== JAK TO FUNGUJE ===== */
.vyhody-jak {
	padding: 3.5rem 2rem;
	background: hsl(var(--secondary));
}
.vyhody-jak__inner {
	max-width: 1100px;
	margin: 0 auto;
}

.vyhody-jak__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

.vyhody-jak__krok {
	position: relative;
	background: #fff;
	border: 1px solid hsl(var(--border));
	border-radius: 1rem;
	padding: 1.75rem 1.5rem;
	text-align: center;
	transition: transform 0.15s, box-shadow 0.15s;
}
.vyhody-jak__krok:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 28px -18px hsl(var(--primary) / 0.35);
}

.vyhody-jak__cislo {
	position: absolute;
	top: 0.875rem;
	right: 1.125rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: hsl(var(--accent));
}

.vyhody-jak__ikona {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 9999px;
	background: hsl(var(--primary) / 0.12);
	color: hsl(var(--primary));
	margin-bottom: 1rem;
}
.vyhody-jak__ikona .lucide {
	width: 1.5rem;
	height: 1.5rem;
}

.vyhody-jak__nadpis {
	font-size: 1.0625rem;
	font-weight: 600;
	color: hsl(var(--foreground));
	margin: 0 0 0.5rem;
}

.vyhody-jak__popis {
	font-size: 0.875rem;
	line-height: 1.5;
	color: hsl(var(--muted-foreground));
	margin: 0;
}

/* ===== SOUČÁST FAJN SKUPINY ===== */
.vyhody-skupina {
	background: #fff;
	padding: 2rem 1.5rem;
}

.vyhody-skupina__inner {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
	background: linear-gradient(120deg, hsl(28, 60%, 16%) 0%, hsl(var(--primary)) 100%);
	border-radius: 1.25rem;
	padding: 3rem;
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 2.5rem;
	align-items: center;
	overflow: hidden;
}
.vyhody-skupina__inner::before {
	content: '';
	position: absolute;
	top: -60px;
	right: -60px;
	width: 220px;
	height: 220px;
	background: radial-gradient(circle, hsl(var(--accent) / 0.35) 0%, transparent 70%);
	pointer-events: none;
}

.vyhody-skupina__maskot-obal {
	position: relative;
	justify-self: center;
	line-height: 0;
}

/* Čára pod maskotem — zobrazuje se jen ve variantách C/D */
.vyhody-skupina__maskot-cara {
	display: none;
}

.vyhody-skupina__maskot {
	max-width: 150px;
	filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}

.vyhody-skupina__stitek {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: hsl(var(--accent));
	margin: 0 0 1rem;
}
.vyhody-skupina__stitek .lucide {
	width: 0.9375rem;
	height: 0.9375rem;
}

.vyhody-skupina__nadpis {
	font-size: 1.625rem;
	font-weight: 700;
	color: #fff;
	margin: 0 0 0.875rem;
}

.vyhody-skupina__popis {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
	max-width: 640px;
	margin: 0 0 1.375rem;
}

.vyhody-skupina__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
}

.vyhody-skupina__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #fff;
	font-size: 0.8125rem;
	padding: 0.4375rem 0.875rem;
	border-radius: 999px;
}
.vyhody-skupina__badge .lucide {
	width: 0.875rem;
	height: 0.875rem;
	color: hsl(var(--accent));
}

/* ===== ZÁVĚREČNÉ CTA ===== */
.vyhody-cta {
	position: relative;
	background: hsl(var(--primary));
	padding: 3.5rem 1.5rem;
	text-align: center;
	overflow: hidden;
}
.vyhody-cta__bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.14) 0%, transparent 45%),
		radial-gradient(circle at 85% 80%, hsl(var(--accent) / 0.3) 0%, transparent 45%);
	pointer-events: none;
}
.vyhody-cta__inner {
	position: relative;
	z-index: 1;
}

.vyhody-cta__avatary {
	display: flex;
	justify-content: center;
	margin-bottom: 1rem;
}
.vyhody-cta__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #fff;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
	margin-left: -14px;
}
.vyhody-cta__avatar:first-child {
	margin-left: 0;
}

.vyhody-cta__nadpis {
	font-size: 1.5rem;
	font-weight: 700;
	color: #fff;
	margin: 0 0 0.625rem;
}

.vyhody-cta__popis {
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 1.5rem;
}

.vyhody-cta__akce {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/* ===== RESPONZIVITA ===== */
@media (max-width: 900px) {
	.vyhody-stats__inner {
		grid-template-columns: repeat(2, 1fr);
	}
	.vyhody-mrizka__karty {
		grid-template-columns: repeat(2, 1fr);
	}
	.vyhody-jak__grid {
		grid-template-columns: 1fr;
	}
	.vyhody-skupina__inner {
		grid-template-columns: 1fr;
		padding: 2rem;
		text-align: center;
	}
	.vyhody-skupina__badges {
		justify-content: center;
	}
	.vyhody-skupina__logo {
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 640px) {
	.vyhody-hero__horni {
		flex-direction: column-reverse;
		text-align: center;
	}
	.vyhody-hero__obsah {
		max-width: none;
	}
	.vyhody-hero__actions {
		justify-content: center;
	}
	.vyhody-hero__vizual {
		width: 100%;
		flex-direction: column;
		margin: 0 auto 0.5rem;
	}
	.vyhody-hero__maskot {
		max-width: 130px;
	}
	.vyhody-hero__bublina {
		width: 100%;
	}
	/* Na mobilu je maskot nad bublinou — špička míří nahoru, ne doleva */
	.vyhody-hero__bublina::before,
	.vyhody-hero__bublina::after {
		top: auto;
		right: auto;
		left: 32px;
		bottom: 100%;
		margin-top: 0;
		border-right-color: transparent;
		border-bottom-color: hsl(var(--primary));
	}
	.vyhody-hero__bublina::after {
		border-bottom-color: #fff;
		margin-right: 0;
		margin-left: -4px;
	}
	.vyhody-hero__nadpis {
		font-size: 1.875rem;
	}
	.vyhody-osa {
		width: 100%;
		margin: 0.5rem 0;
	}
	.vyhody-osa__popis {
		max-width: none;
	}
	.vyhody-mrizka {
		padding: 2rem 1.25rem;
	}
	.vyhody-mrizka__karty {
		grid-template-columns: 1fr;
	}
	.vyhody-trustbar__loga {
		gap: 1rem;
	}
}

/* =========================================
   VARIANTY — vyhody-varianty.php
   Přepínač A/B (vzor .of-switcher z inwork_cz/odpovedni-formular-varianty.php)
   a hero varianty B „Vyčni z davu" — šedé siluety, uprostřed barevný maskot.
   ========================================= */

/* Stránka s variantami — oranžová Fajn účtu přesně #ff8b00 (hsl 32.71 100% 50%;
   globální --primary v obecne.css je #ff8c00). Na body, ať se přebarví
   i hlavička a patička mimo .vyhody-stranka. */
body:has(.vyhody-stranka--modra) {
	--primary: 32.71 100% 50%;
}

/* Stránka s variantami — místo tyrkysové akcentu modrá #0074ff (bílý text 4,6:1) */
.vyhody-stranka--modra {
	--accent: 213 100% 50%;
}
/* Blok statistik na stránce s variantami oranžový (barva hlavičky);
   zvýrazněná ikonka (hvězdička) by na oranžové zanikla — je modrá */
.vyhody-stranka--modra .vyhody-stats {
	background: hsl(var(--primary));
}
.vyhody-stranka--modra .vyhody-stats__icon--akcent {
	background: hsl(var(--accent));
}

/* Varianta A na stránce s variantami — větší maskot a bublina, ať jsou
   výhody v bublině dobře čitelné (původní vyhody.php beze změny) */
.vyhody-varianta--velky-maskot .vyhody-hero__vizual {
	width: 480px;
	gap: 12px;
}
.vyhody-varianta--velky-maskot .vyhody-hero__maskot {
	max-width: 240px;
	width: 240px;
}
.vyhody-varianta--velky-maskot .vyhody-hero__bublina {
	min-width: 220px;
	padding: 22px 24px;
}
.vyhody-varianta--velky-maskot .vyhody-hero__bublina-vedlejsi {
	font-size: 1.125rem;
	line-height: 1.35;
	color: #333;
}
.vyhody-varianta--velky-maskot .vyhody-hero__bublina-vedlejsi .lucide {
	width: 1.375rem;
	height: 1.375rem;
	color: hsl(var(--primary));
}
/* Maskot spodním okrajem přilepený na modrý blok statistik — hero bez
   spodního odsazení, mezeru pod textem a osou drží jejich vlastní margin */
.vyhody-varianta--velky-maskot .vyhody-hero {
	padding-bottom: 0;
}
.vyhody-varianta--velky-maskot .vyhody-hero__horni {
	margin-bottom: 0;
}
.vyhody-varianta--velky-maskot .vyhody-hero__obsah,
.vyhody-varianta--velky-maskot .vyhody-osa {
	margin-bottom: 2.5rem;
}
.vyhody-varianta--velky-maskot .vyhody-hero__vizual {
	align-self: flex-end;
}
.vyhody-varianta--velky-maskot .vyhody-hero__maskot {
	display: block;
	align-self: flex-end;
}
.vyhody-varianta--velky-maskot .vyhody-hero__bublina {
	align-self: center;
}
@media (max-width: 1100px) {
	.vyhody-varianta--velky-maskot .vyhody-hero__vizual {
		width: 400px;
	}
	.vyhody-varianta--velky-maskot .vyhody-hero__maskot {
		width: 190px;
	}
}
@media (max-width: 640px) {
	.vyhody-varianta--velky-maskot .vyhody-hero__vizual {
		width: 100%;
	}
	.vyhody-varianta--velky-maskot .vyhody-hero__maskot {
		width: 170px;
	}
	.vyhody-varianta--velky-maskot .vyhody-hero__bublina {
		min-width: 0;
	}
	.vyhody-varianta--velky-maskot .vyhody-hero__vizual,
	.vyhody-varianta--velky-maskot .vyhody-hero__maskot {
		align-self: center;
	}
}

/* Najížděcí časová osa (varianta A na stránce s variantami) — čára se
   vykreslí shora dolů a body naskakují postupně od 14 do 67 let. Animace se
   spustí znovu i při přepnutí na variantu A (display: none → block). */
.vyhody-osa--najizdeci .vyhody-osa__cara {
	transform-origin: top;
	animation: vyhodyOsaCara 2.2s ease-out both;
}
.vyhody-osa--najizdeci .vyhody-osa__bod {
	animation: vyhodyOsaBod 0.5s ease-out both;
}
.vyhody-osa--najizdeci .vyhody-osa__bod:nth-child(2) { animation-delay: 0.15s; }
.vyhody-osa--najizdeci .vyhody-osa__bod:nth-child(3) { animation-delay: 0.75s; }
.vyhody-osa--najizdeci .vyhody-osa__bod:nth-child(4) { animation-delay: 1.35s; }
.vyhody-osa--najizdeci .vyhody-osa__bod:nth-child(5) { animation-delay: 1.95s; }
@keyframes vyhodyOsaCara {
	from { transform: scaleY(0); }
	to   { transform: scaleY(1); }
}
@keyframes vyhodyOsaBod {
	from { opacity: 0; transform: translateX(-16px); }
	to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
	.vyhody-osa--najizdeci .vyhody-osa__cara,
	.vyhody-osa--najizdeci .vyhody-osa__bod {
		animation: none;
	}
}

/* Blok „Fajn účet je součástí Fajn skupiny" na stránce s variantami plnou
   modrou, bez přechodu i bez záře v rohu. Štítek a ikonky odznaků by na modré
   zanikly — jsou oranžové. */
.vyhody-stranka--modra .vyhody-skupina__inner {
	background: #0074ff;
}
.vyhody-stranka--modra .vyhody-skupina__inner::before {
	display: none;
}
.vyhody-stranka--modra .vyhody-skupina__stitek,
.vyhody-stranka--modra .vyhody-skupina__badge .lucide {
	color: hsl(var(--primary));
}

/* Závěrečné CTA „Založ si Fajn účet a měj náskok" na stránce s variantami
   čistou oranžovou — bez světelných skvrn (radiální přechody v .vyhody-cta__bg) */
.vyhody-stranka--modra .vyhody-cta {
	background: hsl(var(--primary));
}
.vyhody-stranka--modra .vyhody-cta__bg {
	display: none;
}

/* Hero je ve variantách zabalený do .vyhody-varianta — full-bleed jako
   ostatní sekce (.vyhody-stranka > section výše) */
.vyhody-varianta > section {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
}
.vyhody-varianta {
	display: none;
}
.vyhody-varianta--aktivni {
	display: block;
}

/* ---------- Přepínač — vzor .hv-switcher z fajnprace_cz/homepage-varianty.css ----------
   Sedí nad hlavičkou webu (do <body> ho přesouvá skript ve vyhody-varianty.php). */
.vyhody-prepinac {
	position: sticky;
	top: 12px;
	z-index: 1000;
	display: flex;
	justify-content: center;
	gap: 4px;
	width: max-content;
	max-width: calc(100% - 32px);
	margin: 12px auto;
	padding: 6px;
	overflow-x: auto;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 50px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
	font-family: "Rubik", system-ui, sans-serif;
}
.vyhody-prepinac__btn {
	flex-shrink: 0;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	min-width: 110px;
	padding: 10px 22px;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: #64748b;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.vyhody-prepinac__btn:hover {
	background: #f1f5f9;
	color: #0f172a;
}
.vyhody-prepinac__btn:focus-visible {
	outline: 3px solid #ff8b00;
	outline-offset: 2px;
}
.vyhody-prepinac__pismeno {
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
}
.vyhody-prepinac__popis {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.02em;
	opacity: 0.85;
}
.vyhody-prepinac__btn--aktivni,
.vyhody-prepinac__btn--aktivni:hover {
	background: linear-gradient(135deg, #0074ff 0%, #ff8b00 100%);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 6px 14px -4px rgba(0, 116, 255, 0.4);
}
.vyhody-prepinac__btn--aktivni .vyhody-prepinac__popis {
	opacity: 1;
}
@media (max-width: 640px) {
	.vyhody-prepinac {
		position: relative;
		top: 0;
		gap: 2px;
		padding: 4px;
	}
	.vyhody-prepinac__btn {
		min-width: 0;
		padding: 8px 10px;
	}
	.vyhody-prepinac__popis {
		font-size: 10px;
	}
}

/* Hero je teď první obsah stránky — přilepit pod header jako ve vyhody.php
   (.vyhody-stranka > section:first-child) */
.vyhody-varianta > .vyhody-hero {
	margin-top: -1.5rem;
}

/* ---------- Hero B: text na střed, dav pod ním ---------- */
.vyhody-hero--dav {
	padding-bottom: 0;
}
.vyhody-hero__obsah--stred {
	max-width: 640px;
	margin: 0 auto 2rem;
	text-align: center;
}
.vyhody-hero__obsah--stred .vyhody-hero__actions {
	justify-content: center;
}
.vyhody-hero__perex {
	margin: 0 0 1.5rem;
	font-size: 1.0625rem;
	line-height: 1.5;
	color: hsl(var(--muted-foreground));
}

/* ---------- Střídající se claimy (varianta B) ---------- */
.vyhody-claim {
	display: grid;
}
.vyhody-claim__polozka {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
}
.vyhody-claim__polozka--aktivni {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.vyhody-claim__polozka {
		transform: none;
		transition: none;
	}
}

/* ---------- Dav ---------- */
.vyhody-dav {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	max-width: 1000px;
	margin: 0 auto;
	padding-top: 2.5rem;
}
.vyhody-dav__defs {
	position: absolute;
}

.vyhody-dav__silueta {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	width: 112px;
	height: 134px;
	margin: 0 -12px;
	fill: #cbd5e1;
}
/* Různé výšky a odstíny = dojem davu, směrem ke krajům menší a světlejší */
.vyhody-dav__silueta--1,
.vyhody-dav__silueta--8 { width: 84px;  height: 100px; fill: #e2e8f0; }
.vyhody-dav__silueta--2,
.vyhody-dav__silueta--7 { width: 98px;  height: 118px; fill: #d5dce5; }
.vyhody-dav__silueta--3 { width: 106px; height: 127px; fill: #c3ccd8; }
.vyhody-dav__silueta--6 { width: 104px; height: 125px; fill: #c3ccd8; }
.vyhody-dav__silueta--4,
.vyhody-dav__silueta--5 { z-index: 1; fill: #b8c2cf; }

/* Zadní řada — za maskotem i přední řadou, hlavy vykukují mezi předními */
.vyhody-dav__zadni-rada {
	position: absolute;
	left: 50%;
	bottom: 0;
	z-index: 0;
	align-items: flex-end;
	display: flex;
	transform: translateX(-50%);
}
.vyhody-dav__silueta--zadni {
	width: 70px;
	height: 161px;
	margin: 0 -6px;
	fill: #dfe5ec;
}
.vyhody-dav__silueta--zadni:nth-child(2n) {
	margin-bottom: 8px;
	fill: #e6ebf1;
}

/* Záře za maskotem */
.vyhody-dav__zare {
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 420px;
	height: 320px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at 50% 70%, hsl(var(--primary) / 0.35) 0%, hsl(var(--primary) / 0.12) 40%, transparent 70%);
	pointer-events: none;
}

/* Podlaha — jemná linka pod davem */
.vyhody-dav__podlaha {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, hsl(var(--foreground) / 0.12), transparent);
}

/* Maskot — barevná jednička */
.vyhody-dav__hrdina {
	position: relative;
	z-index: 2;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 -4px;
}
.vyhody-dav__maskot {
	display: block;
	width: 220px;
	height: auto;
	filter: drop-shadow(0 14px 28px hsl(var(--primary) / 0.35));
}

/* Korunka vítěze — sedí na hlavě maskota. Maskot je animovaný (hlava se
   houpe o ~13 px), korunka je posazená tak, aby se s hlavou překrývala
   v celém rozsahu pohybu. */
.vyhody-dav__korunka {
	position: absolute;
	top: -2px;
	left: calc(49.5% - 36px);
	z-index: 3;
	width: 72px;
	height: 50px;
	transform: rotate(-8deg);
	filter: drop-shadow(0 4px 8px rgba(180, 83, 9, 0.35));
	overflow: visible;
}
.vyhody-dav__korunka-telo {
	fill: #fbbf24;
	stroke: #d97706;
	stroke-width: 2;
	stroke-linejoin: round;
}
.vyhody-dav__korunka-pas {
	fill: #f59e0b;
	stroke: #d97706;
	stroke-width: 2;
}
.vyhody-dav__korunka-kamen {
	fill: #fde68a;
	stroke: #d97706;
	stroke-width: 1.5;
}
.vyhody-dav__korunka-drahokam {
	fill: #0074ff;
	stroke: #fff;
	stroke-width: 1.5;
}

.vyhody-dav__stitek {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.4375rem 0.875rem;
	white-space: nowrap;
	background: #fff;
	border: 2px solid hsl(var(--accent));
	border-radius: 999px;
	box-shadow: 0 6px 16px hsl(var(--accent) / 0.25);
	font-size: 0.875rem;
	font-weight: 500;
	color: hsl(var(--accent));
}
.vyhody-dav__stitek .lucide {
	width: 1rem;
	height: 1rem;
}

/* Bublina s výhodami u maskota (varianta B) — vpravo od maskota, špička míří na něj */
.vyhody-dav__bublina {
	position: absolute;
	top: 30px;
	left: calc(100% + 4px);
	z-index: 4;
	width: 270px;
	padding: 18px 20px;
	text-align: left;
}
.vyhody-dav__bublina .vyhody-hero__bublina-vedlejsi {
	font-size: 1.125rem;
	line-height: 1.35;
	color: #333;
}
.vyhody-dav__bublina .vyhody-hero__bublina-vedlejsi .lucide {
	width: 1.375rem;
	height: 1.375rem;
	color: hsl(var(--primary));
}

@media (max-width: 900px) {
	.vyhody-dav__silueta--1,
	.vyhody-dav__silueta--8 {
		display: none;
	}
}

@media (max-width: 640px) {
	/* Na mobilu se vedle maskota nevejde — bublina nad ním, špička dolů */
	.vyhody-dav {
		padding-top: 6.5rem;
	}
	.vyhody-dav__bublina {
		top: auto;
		bottom: calc(100% + 14px);
		left: 50%;
		width: 280px;
		margin-left: -140px;
		padding: 14px 16px;
	}
	.vyhody-dav__bublina .vyhody-hero__bublina-vedlejsi {
		justify-content: center;
		font-size: 1rem;
	}
	.vyhody-dav__bublina::before,
	.vyhody-dav__bublina::after {
		top: 100%;
		bottom: auto;
		left: 50%;
		right: auto;
		margin: 0 0 0 -13px;
		border-color: transparent;
		border-top-color: hsl(var(--primary));
	}
	.vyhody-dav__bublina::after {
		margin-left: -9px;
		margin-top: -1px;
		border-top-color: #fff;
	}
	.vyhody-dav__silueta--2,
	.vyhody-dav__silueta--7 {
		display: none;
	}
	.vyhody-dav__silueta {
		width: 72px;
		height: 86px;
		margin: 0 -10px;
	}
	.vyhody-dav__silueta--3,
	.vyhody-dav__silueta--6 {
		width: 62px;
		height: 74px;
	}
	.vyhody-dav__silueta--zadni {
		width: 46px;
		height: 106px;
		margin: 0 -5px;
	}
	.vyhody-dav__maskot {
		width: 150px;
	}
	.vyhody-dav__zare {
		width: 280px;
		height: 220px;
	}
	.vyhody-dav__korunka {
		top: -4px;
		left: calc(49.5% - 25px);
		width: 50px;
		height: 35px;
	}
	.vyhody-dav__stitek {
		bottom: 8px;
		font-size: 0.75rem;
	}
	.vyhody-hero__perex {
		font-size: 1rem;
	}
}

/* ---------- Hero B na širokém desktopu: claimy + tlačítko vlevo, maskot s davem
   a bublinou vpravo. Dav dál sedí spodním okrajem na modrém bloku statistik.
   Pod 1180 px by se bublina vedle maskota nevešla — zůstává rozvržení na střed. */
@media (min-width: 1181px) {
	.vyhody-hero--dav .vyhody-hero__inner {
		display: flex;
		align-items: flex-end;
		gap: 24px;
	}
	.vyhody-hero--dav .vyhody-hero__obsah--stred {
		flex: 0 0 420px;
		max-width: 420px;
		align-self: center;
		margin: 0;
		padding-bottom: 2.5rem;
		text-align: left;
	}
	.vyhody-hero--dav .vyhody-hero__obsah--stred .vyhody-hero__actions {
		justify-content: flex-start;
	}
	.vyhody-hero--dav .vyhody-dav {
		flex: 1 1 auto;
		min-width: 0;
		margin-top: 0;
		margin-right: 0;
		margin-bottom: 0;
	}
	/* Dav se roztáhne doleva pod část s claimem, aby se vešlo všech 8 siluet;
	   text leží nad ním */
	.vyhody-hero--dav .vyhody-hero__obsah--stred {
		position: relative;
		z-index: 5;
	}
	.vyhody-hero--dav .vyhody-dav {
		margin-left: -260px;
	}
	.vyhody-hero--dav .vyhody-dav__bublina {
		width: 240px;
	}
}


/* =========================================
   VARIANTA C — obsah varianty B, hlavní část v modré zaoblené kartě jako
   fajnprace_cz/homepage-varianty.php (varianta B, .hvb-hero): karta max.
   1408 px, 16 px od kraje okna, radius 35 px (mobil 20 px), padding 44 px
   (mobil 12 px), 40 px pod hlavičkou. Ostatní sekce stejné jako u B.
   Maskot a dav stojí na spodním okraji karty.
   ========================================= */
.vyhody-stranka--siroka .vyhody-hero--dav {
	margin-top: calc(-1.5rem + 40px);
	margin-bottom: 40px;
	padding: 0 16px;
	background: none;
	overflow: visible;
}
.vyhody-stranka--siroka .vyhody-hero--dav .vyhody-hero__inner {
	max-width: 1408px;
	padding: 44px 44px 0;
	background: hsl(var(--primary));
	border-radius: 35px;
	overflow: hidden;
}

/* Texty na modré */
.vyhody-stranka--siroka .vyhody-hero--dav .vyhody-hero__nadpis {
	color: #fff;
}
.vyhody-stranka--siroka .vyhody-hero--dav .vyhody-hero__perex {
	color: rgba(255, 255, 255, 0.9);
}
.vyhody-stranka--siroka .vyhody-hero--dav .vyhody-hero__poznamka {
	color: rgba(255, 255, 255, 0.85);
}

/* Tlačítko modré (stejné jako ve variantě B), na oranžové kartě jen tmavší stín */
.vyhody-stranka--siroka .vyhody-hero--dav .vyhody-btn--modre {
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

/* Siluety v šedobéžových odstínech — na oranžové vynikají, směrem k maskotovi
   světlejší (výraznější), zadní řada tmavší (ustupuje do pozadí) */
.vyhody-stranka--siroka .vyhody-dav__silueta--1,
.vyhody-stranka--siroka .vyhody-dav__silueta--8 { fill: #f0a84a; }
.vyhody-stranka--siroka .vyhody-dav__silueta--2,
.vyhody-stranka--siroka .vyhody-dav__silueta--7 { fill: #efb76c; }
.vyhody-stranka--siroka .vyhody-dav__silueta--3,
.vyhody-stranka--siroka .vyhody-dav__silueta--6 { fill: #eec68f; }
.vyhody-stranka--siroka .vyhody-dav__silueta--4,
.vyhody-stranka--siroka .vyhody-dav__silueta--5 { fill: #eed5b3; }
.vyhody-stranka--siroka .vyhody-dav__silueta--zadni { fill: #f29a2a; }
.vyhody-stranka--siroka .vyhody-dav__silueta--zadni:nth-child(2n) { fill: #f3a33c; }
/* Oranžová záře by na oranžové kartě nebyla vidět — je světlá */
.vyhody-stranka--siroka .vyhody-dav__zare {
	background: radial-gradient(ellipse at 50% 70%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.12) 40%, transparent 70%);
}
.vyhody-stranka--siroka .vyhody-dav__podlaha {
	display: none;
}

/* ---------- Bloky pod hlavní částí — každý ve stejném zaobleném rámečku
   (max. 1408 px, 16 px od kraje, radius 35 px, mezery 40 px). Pozadí sekce
   se přesune na rámeček. ---------- */
.vyhody-stranka--siroka > section:not(:first-child) {
	margin-top: 0;
	margin-bottom: 40px;
	padding: 0 16px;
	background: none;
	border: none;
	overflow: visible;
}
.vyhody-stranka--siroka .vyhody-stats__inner,
.vyhody-stranka--siroka .vyhody-trustbar__inner,
.vyhody-stranka--siroka .vyhody-mrizka__inner,
.vyhody-stranka--siroka .vyhody-jak__inner,
.vyhody-stranka--siroka .vyhody-skupina__inner,
.vyhody-stranka--siroka .vyhody-cta__inner {
	max-width: 1408px;
	margin: 0 auto;
	border-radius: 35px;
	overflow: hidden;
}
.vyhody-stranka--siroka .vyhody-stats__inner {
	padding: 2.5rem 44px;
	background: hsl(var(--primary));
}
.vyhody-stranka--siroka .vyhody-trustbar__inner {
	padding: 1.125rem 44px;
	background: #fff;
	border: 1px solid hsl(var(--border));
}
.vyhody-stranka--siroka .vyhody-mrizka__inner {
	padding: 3.5rem 44px;
	background: #fff;
	border: 1px solid hsl(var(--border));
}
.vyhody-stranka--siroka .vyhody-jak__inner {
	padding: 3.5rem 44px;
	background: hsl(var(--secondary));
}
.vyhody-stranka--siroka .vyhody-skupina__inner {
	padding: 3rem 44px;
}
.vyhody-stranka--siroka .vyhody-cta__inner {
	padding: 3.5rem 44px;
	background: hsl(var(--primary));
}

/* Střídání — neutrální bloky jednou v rámečku, jednou bez pozadí:
   „Součást ověřené rodiny" bez, „Co ti Fajn účet dá" v rámečku, „Jak to funguje" bez.
   Barevné bloky (statistiky, Fajn skupina, CTA) rámeček mají vždy — bez pozadí
   by jejich bílý text na světlé stránce zmizel. */
.vyhody-stranka--siroka .vyhody-trustbar__inner,
.vyhody-stranka--siroka .vyhody-jak__inner {
	background: none;
	border: none;
	border-radius: 0;
}
.vyhody-stranka--siroka .vyhody-jak__inner {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

@media (max-width: 900px) {
	.vyhody-stranka--siroka .vyhody-skupina__inner {
		padding: 2rem;
	}
}

@media (max-width: 640px) {
	.vyhody-stranka--siroka > section:not(:first-child) {
		margin-bottom: 30px;
	}
	.vyhody-stranka--siroka .vyhody-stats__inner,
	.vyhody-stranka--siroka .vyhody-trustbar__inner,
	.vyhody-stranka--siroka .vyhody-mrizka__inner,
	.vyhody-stranka--siroka .vyhody-jak__inner,
	.vyhody-stranka--siroka .vyhody-skupina__inner,
	.vyhody-stranka--siroka .vyhody-cta__inner {
		border-radius: 20px;
		padding-left: 20px;
		padding-right: 20px;
	}
	.vyhody-stranka--siroka .vyhody-hero--dav {
		margin-top: calc(-1.5rem + 16px);
		margin-bottom: 30px;
	}
	.vyhody-stranka--siroka .vyhody-hero--dav .vyhody-hero__inner {
		padding: 24px 12px 0;
		border-radius: 20px;
	}
}

/* ---------- Varianta C — hlavička bez oranžového pozadí, šedé texty jako
   hlavička fajnprace_cz/homepage-varianty.php (B): odkazy #333, claim #77787b.
   _header.php / obecne.css se needitují — přebíjí se jen na této stránce.
   Bílé logo (fajnucet-bile.png) by na světlém pozadí zmizelo → barevné
   img/fajnucet-logo.svg (text loga má stejnou šedou #77787b). ---------- */
body:has(.vyhody-stranka--siroka) header {
	background: none;
}
body:has(.vyhody-stranka--siroka) header .logo img,
body:has(.vyhody-stranka--siroka) header .mobile-logo img {
	content: url('https://kodovani-ai.fajntest.cz/fajnucet_cz/img/fajnucet-logo.svg');
}
body:has(.vyhody-stranka--siroka) .fu-header-claim {
	color: #77787b;
}
body:has(.vyhody-stranka--siroka) .fu-user__ikona,
body:has(.vyhody-stranka--siroka) .fu-ub-mobile {
	color: #333;
	background: rgba(15, 23, 42, 0.06);
	border-color: transparent;
}
body:has(.vyhody-stranka--siroka) .fu-user__ikona:hover {
	background: rgba(15, 23, 42, 0.12);
}
body:has(.vyhody-stranka--siroka) .fu-header__prihlasit {
	border: 1px solid hsl(var(--primary));
	box-shadow: none;
}
/* Hamburger (bílá SVG ikona jako obrázek) → tmavě šedá */
body:has(.vyhody-stranka--siroka) header .menu-hamburger img {
	filter: brightness(0) opacity(0.8);
}
/* Odkazy menu — jen inline menu na desktopu; mobilní rozbalovací menu má
   vlastní barevné pozadí a zůstává beze změny */
@media (min-width: 992px) {
	body:has(.vyhody-stranka--siroka) header ul li a {
		color: #333;
	}
	body:has(.vyhody-stranka--siroka) header ul li.active a,
	body:has(.vyhody-stranka--siroka) header ul li a:hover,
	body:has(.vyhody-stranka--siroka) header ul li a:focus {
		border-color: #0074ff;
		color: #0074ff;
	}
}

/* ---------- Varianta C — statistiky vnořené do hlavního oranžového rámečku
   (oranžová obdoba .hvb-localities z fajnprace_cz/homepage-varianty.php B:
   tmavší oranžová #ee8200 + světlejší 1px okraj, radius 35 px / mobil 20 px,
   44 px od okrajů karty / mobil 12 px). Maskot a dav stojí na jeho horní
   hraně. Samostatná sekce statistik pod kartou je ve variantě C skrytá. ---------- */
.vyhody-hero__statistiky {
	display: none;
}
.vyhody-stranka--siroka .vyhody-hero__statistiky {
	display: block;
	position: relative;
	z-index: 6;
	flex: 0 0 100%;
}
.vyhody-stranka--siroka > section.vyhody-stats {
	display: none;
}
.vyhody-stranka--siroka .vyhody-hero--dav .vyhody-hero__inner {
	flex-wrap: wrap;
	row-gap: 0;
	padding-bottom: 44px;
}
.vyhody-stranka--siroka .vyhody-hero__statistiky .vyhody-stats__inner {
	max-width: none;
	padding: 32px;
	background: #ee8200;
	border: 1px solid #ffa73d;
	border-radius: 35px;
}
@media (max-width: 640px) {
	.vyhody-stranka--siroka .vyhody-hero--dav .vyhody-hero__inner {
		padding-bottom: 12px;
	}
	.vyhody-stranka--siroka .vyhody-hero__statistiky .vyhody-stats__inner {
		padding: 20px;
		border-radius: 20px;
	}
}

/* ---------- Varianta C — claim stejně jako nadpis homepage Fajn Práce
   (.hp-search__title h1 v produkčních stylech): Rubik 500, bílá, stín
   5px 5px 0 rgba(0,0,0,.1); 31/31 px → od 576 px 40/46 px → od 1020 px
   60/66 px + 30 px pod nadpisem. (margin-top: -30px z originálu se
   nepřebírá — tam vyrovnává nadpis vedle maskota, tady by ho jen zvedl.) ---------- */
.vyhody-stranka--siroka .vyhody-hero--dav .vyhody-hero__nadpis {
	color: #fff;
	font-family: 'Rubik', sans-serif;
	font-weight: 500;
	font-size: 31px;
	line-height: 31px;
	text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.1);
}
@media (min-width: 576px) {
	.vyhody-stranka--siroka .vyhody-hero--dav .vyhody-hero__nadpis {
		font-size: 40px;
		line-height: 46px;
	}
}
@media (min-width: 1020px) {
	.vyhody-stranka--siroka .vyhody-hero--dav .vyhody-hero__nadpis {
		font-size: 60px;
		line-height: 66px;
		padding-bottom: 30px;
	}
}
/* Širší sloupec s claimem, ať se 60 px claim vejde na 2 řádky. Dav musí
   zůstat ve stejném řádku vedle claimu — na užším desktopu je sloupec
   užší a dav víc zasahuje pod claim. */
@media (min-width: 1181px) {
	.vyhody-stranka--siroka .vyhody-hero--dav .vyhody-hero__obsah--stred {
		flex-basis: 520px;
		max-width: 520px;
	}
	.vyhody-stranka--siroka .vyhody-hero--dav .vyhody-dav {
		margin-left: -360px;
	}
}
@media (min-width: 1400px) {
	.vyhody-stranka--siroka .vyhody-hero--dav .vyhody-hero__obsah--stred {
		flex-basis: 600px;
		max-width: 600px;
	}
	.vyhody-stranka--siroka .vyhody-hero--dav .vyhody-dav {
		margin-left: -260px;
	}
}

/* Varianta C — bez malého podnadpisu pod claimem (ve variantě B zůstává) */
.vyhody-stranka--siroka .vyhody-claim .vyhody-hero__perex {
	display: none;
}

/* ---------- Varianta C — zrcadlové rozvržení: maskot s davem vlevo, claim
   s tlačítkem vpravo od něj, bublina nalevo od maskota (špička míří doprava
   na maskota). Dav zasahuje doprava pod claim místo doleva. ---------- */
@media (min-width: 1181px) {
	.vyhody-stranka--siroka .vyhody-hero--dav .vyhody-dav {
		order: 0;
		flex: 1 1 0;
		margin-left: 0;
		margin-right: -120px;
	}
	.vyhody-stranka--siroka .vyhody-hero--dav .vyhody-hero__obsah--stred {
		order: 1;
		flex-basis: 480px;
		max-width: 480px;
	}
	.vyhody-stranka--siroka .vyhody-hero__statistiky {
		order: 2;
	}
	/* Na užším desktopu se celý dav vedle claimu nevejde — bez krajních siluet,
	   ať nezasahuje pod malý text pod tlačítkem */
	.vyhody-stranka--siroka .vyhody-dav__silueta--1,
	.vyhody-stranka--siroka .vyhody-dav__silueta--8 {
		display: none;
	}
}
@media (min-width: 1400px) {
	.vyhody-stranka--siroka .vyhody-hero--dav .vyhody-dav {
		margin-left: 0;
		margin-right: -96px;
	}
	.vyhody-stranka--siroka .vyhody-hero--dav .vyhody-hero__obsah--stred {
		flex-basis: 520px;
		max-width: 520px;
	}
	.vyhody-stranka--siroka .vyhody-dav__silueta--1,
	.vyhody-stranka--siroka .vyhody-dav__silueta--8 {
		display: block;
	}
}
@media (min-width: 641px) {
	.vyhody-stranka--siroka .vyhody-dav__bublina {
		left: auto;
		right: calc(100% + 4px);
	}
	.vyhody-stranka--siroka .vyhody-dav__bublina::before,
	.vyhody-stranka--siroka .vyhody-dav__bublina::after {
		right: auto;
		left: 100%;
		border-right-color: transparent;
	}
	.vyhody-stranka--siroka .vyhody-dav__bublina::before {
		border-left-color: hsl(var(--primary));
	}
	.vyhody-stranka--siroka .vyhody-dav__bublina::after {
		margin-right: 0;
		margin-left: -4px;
		border-left-color: #fff;
	}
	/* modrá tečka v rohu bubliny na straně u maskota → přesun doleva */
	.vyhody-stranka--siroka .vyhody-dav__bublina .vyhody-hero__bublina-tecka {
		right: auto;
		left: -8px;
	}
}

/* ---------- Varianta C — šířka stránky jako homepage Fajn Brigád (produkční
   .hp-content-holder + .hp-search__holder): rámečky max. 1322 px na střed,
   pod touto šířkou od kraje ke kraji (bez okraje). Vnitřní odsazení
   12 px → od 768 px 24 px → od 1020 px 44 px, zaoblení 20 px → od 768 px
   35 px, pod hlavičkou od 1020 px mezera 24 px. ---------- */
.vyhody-stranka--siroka .vyhody-hero--dav,
.vyhody-stranka--siroka > section:not(:first-child) {
	padding-left: 0;
	padding-right: 0;
}
.vyhody-stranka--siroka .vyhody-hero--dav {
	margin-top: -1.5rem;
}
.vyhody-stranka--siroka .vyhody-hero--dav .vyhody-hero__inner,
.vyhody-stranka--siroka .vyhody-stats__inner,
.vyhody-stranka--siroka .vyhody-trustbar__inner,
.vyhody-stranka--siroka .vyhody-mrizka__inner,
.vyhody-stranka--siroka .vyhody-jak__inner,
.vyhody-stranka--siroka .vyhody-skupina__inner,
.vyhody-stranka--siroka .vyhody-cta__inner {
	max-width: 1322px;
	border-radius: 20px;
	padding-left: 12px;
	padding-right: 12px;
}
.vyhody-stranka--siroka .vyhody-hero--dav .vyhody-hero__inner {
	padding: 24px 12px 12px;
}
/* vnořené statistiky mají vlastní šířku podle karty, ne 1322 px */
.vyhody-stranka--siroka .vyhody-hero__statistiky .vyhody-stats__inner {
	max-width: none;
}
@media (min-width: 768px) {
	.vyhody-stranka--siroka .vyhody-hero--dav .vyhody-hero__inner,
	.vyhody-stranka--siroka .vyhody-stats__inner,
	.vyhody-stranka--siroka .vyhody-trustbar__inner,
	.vyhody-stranka--siroka .vyhody-mrizka__inner,
	.vyhody-stranka--siroka .vyhody-jak__inner,
	.vyhody-stranka--siroka .vyhody-skupina__inner,
	.vyhody-stranka--siroka .vyhody-cta__inner {
		border-radius: 35px;
		padding-left: 24px;
		padding-right: 24px;
	}
	.vyhody-stranka--siroka .vyhody-hero--dav .vyhody-hero__inner {
		padding: 24px;
	}
}
@media (min-width: 1020px) {
	.vyhody-stranka--siroka .vyhody-hero--dav {
		margin-top: calc(-1.5rem + 24px);
	}
	.vyhody-stranka--siroka .vyhody-hero--dav .vyhody-hero__inner,
	.vyhody-stranka--siroka .vyhody-stats__inner,
	.vyhody-stranka--siroka .vyhody-trustbar__inner,
	.vyhody-stranka--siroka .vyhody-mrizka__inner,
	.vyhody-stranka--siroka .vyhody-jak__inner,
	.vyhody-stranka--siroka .vyhody-skupina__inner,
	.vyhody-stranka--siroka .vyhody-cta__inner {
		padding-left: 44px;
		padding-right: 44px;
	}
	.vyhody-stranka--siroka .vyhody-hero--dav .vyhody-hero__inner {
		padding: 44px;
	}
}
/* Bloky bez pozadí (střídání) zůstávají bez zaoblení a rámečku */
.vyhody-stranka--siroka .vyhody-trustbar__inner,
.vyhody-stranka--siroka .vyhody-jak__inner {
	border-radius: 0;
}

/* ---------- Varianta C — větší maskot, bublina i siluety, ať vyplní prostor
   vlevo vedle claimu. Celá skupina se zvětšuje najednou (zoom) a je
   zarovnaná ke claimu; krajní siluety přetečou k levému okraji karty
   a karta je ořízne. Krajní siluety (1, 8) jsou zpět vidět. ---------- */
@media (min-width: 1181px) {
	.vyhody-stranka--siroka .vyhody-hero--dav .vyhody-dav {
		zoom: 1.15;
		justify-content: flex-end;
		margin-right: 0;
	}
	/* Maskot přisunutý ke claimu — vpravo od něj by se zvětšený dav s bublinou
	   nalevo nevešel. Přední řada jen nalevo (pod bublinou až k okraji karty),
	   zadní řada zůstává za maskotem na obou stranách. */
	.vyhody-stranka--siroka .vyhody-dav__silueta--1,
	.vyhody-stranka--siroka .vyhody-dav__silueta--2 {
		display: block;
	}
	.vyhody-stranka--siroka .vyhody-dav__silueta--5,
	.vyhody-stranka--siroka .vyhody-dav__silueta--6,
	.vyhody-stranka--siroka .vyhody-dav__silueta--7,
	.vyhody-stranka--siroka .vyhody-dav__silueta--8 {
		display: none;
	}
}
@media (min-width: 1400px) {
	.vyhody-stranka--siroka .vyhody-hero--dav .vyhody-dav {
		zoom: 1.3;
		margin-right: 0;
	}
}

/* =========================================
   VARIANTA D — rámečky, šířka, hlavička a střídání bloků jako varianta C,
   ale hero z varianty A (claim, časová osa, maskot s bublinou). Hero A je
   v oranžové kartě (max. 1322 px, padding 12/24/44, radius 20/35) se
   statistikami vnořenými uvnitř; maskot stojí na jejich horní hraně.
   Selektory přes #vyhody-var-a v .vyhody-stranka--siroka = jen varianta D.
   ========================================= */
.vyhody-stranka--siroka #vyhody-var-a .vyhody-hero {
	margin-top: -1.5rem;
	margin-bottom: 30px;
	padding: 0;
	background: none;
	overflow: visible;
}
.vyhody-stranka--siroka #vyhody-var-a .vyhody-hero__inner {
	max-width: 1322px;
	margin: 0 auto;
	padding: 24px 12px 12px;
	background: hsl(var(--primary));
	border-radius: 20px;
	overflow: hidden;
}
@media (min-width: 768px) {
	.vyhody-stranka--siroka #vyhody-var-a .vyhody-hero {
		margin-bottom: 40px;
	}
	.vyhody-stranka--siroka #vyhody-var-a .vyhody-hero__inner {
		padding: 24px;
		border-radius: 35px;
	}
}
@media (min-width: 1020px) {
	.vyhody-stranka--siroka #vyhody-var-a .vyhody-hero {
		margin-top: calc(-1.5rem + 24px);
	}
	.vyhody-stranka--siroka #vyhody-var-a .vyhody-hero__inner {
		padding: 44px;
	}
}

/* Claim stejně jako ve variantě C (nadpis homepage Fajn Práce) */
.vyhody-stranka--siroka #vyhody-var-a .vyhody-hero__nadpis {
	color: #fff;
	font-family: 'Rubik', sans-serif;
	font-weight: 500;
	font-size: 31px;
	line-height: 31px;
	text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.1);
}
@media (min-width: 576px) {
	.vyhody-stranka--siroka #vyhody-var-a .vyhody-hero__nadpis {
		font-size: 40px;
		line-height: 46px;
	}
}
/* Ve variantě D je claim v řádku vedle časové osy a maskota (užší sloupec než
   v C) — 60 px až od 1281 px, jinak by se lámal do 5 řádků */
@media (min-width: 1281px) {
	.vyhody-stranka--siroka #vyhody-var-a .vyhody-hero__nadpis {
		font-size: 60px;
		line-height: 66px;
		padding-bottom: 30px;
	}
}
.vyhody-stranka--siroka #vyhody-var-a .vyhody-hero__poznamka {
	color: rgba(255, 255, 255, 0.85);
}
.vyhody-stranka--siroka #vyhody-var-a .vyhody-btn--primarni {
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

/* Časová osa na oranžové — bílé texty a čára, kolečka s ikonami zůstávají bílá */
.vyhody-stranka--siroka #vyhody-var-a .vyhody-osa__vek {
	color: #fff;
}
.vyhody-stranka--siroka #vyhody-var-a .vyhody-osa__popis {
	color: rgba(255, 255, 255, 0.85);
}
.vyhody-stranka--siroka #vyhody-var-a .vyhody-osa__cara {
	background: rgba(255, 255, 255, 0.5);
}
.vyhody-stranka--siroka #vyhody-var-a .vyhody-osa__ikona {
	border-color: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Maskot — oranžová záře by na oranžové kartě nebyla vidět */
.vyhody-stranka--siroka #vyhody-var-a .vyhody-hero__maskot {
	filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.18));
}

/* Přepínač se 4 variantami se na úzký mobil nevejde — menší popisky */
@media (max-width: 480px) {
	.vyhody-prepinac {
		max-width: calc(100% - 16px);
	}
	.vyhody-prepinac__btn {
		padding: 7px 8px;
	}
	.vyhody-prepinac__popis {
		font-size: 9px;
		letter-spacing: 0;
		white-space: nowrap;
	}
}

/* Varianty A a D (vyhody-varianty.php) — mobil: claim, pod ním tlačítko, pak
   časová osa, pak bublina a dole maskot. Původní vyhody.php má na mobilu
   pořadí obrácené (column-reverse), tady ne. */
@media (max-width: 640px) {
	#vyhody-var-a .vyhody-hero__horni {
		flex-direction: column;
		gap: 1.5rem;
	}
	/* Jednotné mezery 24 px: claim → tlačítko → (text) → časová osa → bublina */
	#vyhody-var-a .vyhody-hero__obsah {
		padding-bottom: 0;
		margin-bottom: 0;
	}
	#vyhody-var-a .vyhody-hero__nadpis {
		margin-bottom: 24px;
	}
	#vyhody-var-a .vyhody-hero__vizual {
		margin-top: 4px;
	}
	/* Časová osa odsazená víc nad i pod sebou (24 px mezera + 16 px = 40 px) */
	#vyhody-var-a .vyhody-osa {
		margin: 16px 0;
	}
	#vyhody-var-a .vyhody-hero__vizual {
		margin-bottom: 0;
	}
	/* bublina je nad maskotem — špička dolů na maskota (místo nahoru) */
	#vyhody-var-a .vyhody-hero__bublina::before,
	#vyhody-var-a .vyhody-hero__bublina::after {
		top: 100%;
		bottom: auto;
		left: 50%;
		margin: 0 0 0 -13px;
		border-color: transparent;
		border-top-color: hsl(var(--primary));
	}
	#vyhody-var-a .vyhody-hero__bublina::after {
		margin-left: -9px;
		margin-top: -1px;
		border-top-color: #fff;
	}
}

/* Varianta C — siluety bez ořezaného spodního okraje: rámeček se statistikami
   je užší než karta a má zaoblené rohy, siluety přesahující za něj by končily
   rovnou čarou na oranžové. Spodní část proto plynule mizí (do ztracena). */
.vyhody-stranka--siroka .vyhody-dav__silueta {
	-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}


/* ---------- Varianty A a D (vyhody-varianty.php) — maskot stárne podle časové osy ----------
   Obal .vyhody-maskot je mimo variantu D „neviditelný" (display: contents),
   takže původní vyhody.php má maskota beze změny (animované mávání, bez doplňků).
   Ve variantách A a D je maskot statický snímek (img/maskot-palec-staticky.webp,
   snímek 24 z maskot-mava.webp) — v animaci se hlava houpe o ~19 px a
   doplňky (hlavně brýle) by z ní ujížděly. Doplňky jsou SVG přes obrázek
   ve stejných souřadnicích (240 × 240). */
.vyhody-maskot {
	display: contents;
}
.vyhody-maskot__doplnky {
	display: none;
}
#vyhody-var-a .vyhody-maskot {
	display: block;
	position: relative;
	flex-shrink: 0;
	align-self: flex-end;
	line-height: 0;
}
#vyhody-var-a .vyhody-maskot .vyhody-hero__maskot {
	content: url('https://kodovani-ai.fajntest.cz/fajnucet_cz/img/maskot-palec-staticky.webp');
}
#vyhody-var-a .vyhody-maskot__doplnky {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}
/* Animace výměny: stará čepice odletí nahoru a pootočí se, nová spadne
   shora na hlavu a odrazí se; brýle sjedou z čela na oči až po čapci;
   maskot poskočí a kolem hlavy se rozprsknou jiskřičky. */
.vyhody-maskot__doplnek,
.vyhody-maskot__bryle,
.vyhody-maskot__jiskra {
	transform-box: fill-box;
	transform-origin: 50% 100%;
}
.vyhody-maskot__doplnek {
	opacity: 0;
	transform: translateY(-28px) rotate(14deg);
	transition: opacity 0.3s ease, transform 0.4s ease-in;
}
.vyhody-maskot[data-vek="0"] .vyhody-maskot__doplnek--ksiltovka,
.vyhody-maskot[data-vek="1"] .vyhody-maskot__doplnek--absolvent,
.vyhody-maskot[data-vek="3"] .vyhody-maskot__doplnek--duchodce {
	opacity: 1;
	transform: none;
	transition: none;
	animation: vyhodyNasazeni 0.7s cubic-bezier(0.3, 0.7, 0.4, 1) both;
}
@keyframes vyhodyNasazeni {
	0%   { opacity: 0; transform: translateY(-46px) rotate(-14deg); }
	55%  { opacity: 1; transform: translateY(3px) rotate(3deg) scaleY(0.92); }
	75%  { transform: translateY(-4px) rotate(-1deg) scaleY(1.02); }
	100% { opacity: 1; transform: none; }
}
.vyhody-maskot[data-vek="3"] .vyhody-maskot__bryle {
	animation: vyhodyBryle 0.5s 0.45s cubic-bezier(0.3, 0.7, 0.4, 1) both;
}
@keyframes vyhodyBryle {
	0%   { opacity: 0; transform: translateY(-16px) scale(0.85); }
	70%  { opacity: 1; transform: translateY(1.5px) scale(1.03); }
	100% { opacity: 1; transform: none; }
}

/* Pérování maskota na místě (bez odlepení od rámečku se statistikami —
   jinak by byl vidět rovně ořezaný spodní okraj obrázku) */
.vyhody-maskot--zmena {
	animation: vyhodyMaskotSkok 0.6s ease-out;
}
@keyframes vyhodyMaskotSkok {
	0%   { transform: scale(1, 1); }
	25%  { transform: scale(1.05, 0.94); }
	50%  { transform: scale(0.97, 1.05); }
	75%  { transform: scale(1.02, 0.98); }
	100% { transform: scale(1, 1); }
}
.vyhody-maskot { transform-origin: 50% 100%; }

/* Jiskřičky */
.vyhody-maskot__jiskra {
	opacity: 0;
	transform-origin: 50% 50%;
}
.vyhody-maskot--zmena .vyhody-maskot__jiskra {
	animation: vyhodyJiskra 0.75s ease-out both;
}
.vyhody-maskot--zmena .vyhody-maskot__jiskra:nth-child(2) { animation-delay: 0.06s; }
.vyhody-maskot--zmena .vyhody-maskot__jiskra:nth-child(3) { animation-delay: 0.12s; }
.vyhody-maskot--zmena .vyhody-maskot__jiskra:nth-child(4) { animation-delay: 0.04s; }
.vyhody-maskot--zmena .vyhody-maskot__jiskra:nth-child(5) { animation-delay: 0.1s; }
@keyframes vyhodyJiskra {
	0%   { opacity: 0; transform: scale(0.2) rotate(0deg); }
	40%  { opacity: 1; transform: scale(1.3) rotate(45deg); }
	100% { opacity: 0; transform: scale(0.6) rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) {
	.vyhody-maskot__doplnek,
	.vyhody-maskot[data-vek] .vyhody-maskot__doplnek,
	.vyhody-maskot[data-vek="3"] .vyhody-maskot__bryle,
	.vyhody-maskot--zmena,
	.vyhody-maskot--zmena .vyhody-maskot__jiskra {
		animation: none;
		transition: opacity 0.2s;
		transform: none;
	}
}

/* Aktivní věk na časové ose (jen D) — bílý prstenec kolem ikony, ostatní texty slabší */
.vyhody-stranka--siroka #vyhody-var-a .vyhody-osa__ikona {
	transition: box-shadow 0.3s ease;
}
.vyhody-stranka--siroka #vyhody-var-a .vyhody-osa__bod--aktivni .vyhody-osa__ikona {
	box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.45), 0 4px 12px rgba(0, 0, 0, 0.12);
}
/* rozvlnění prstence u aktivního věku */
.vyhody-stranka--siroka #vyhody-var-a .vyhody-osa__bod--aktivni .vyhody-osa__ikona::after {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	border: 2px solid #fff;
	animation: vyhodyOsaVlna 0.9s ease-out both;
	pointer-events: none;
}
.vyhody-stranka--siroka #vyhody-var-a .vyhody-osa__ikona {
	position: relative;
}
@keyframes vyhodyOsaVlna {
	0%   { opacity: 0.9; transform: scale(1); }
	100% { opacity: 0; transform: scale(1.8); }
}
@media (prefers-reduced-motion: reduce) {
	.vyhody-stranka--siroka #vyhody-var-a .vyhody-osa__bod--aktivni .vyhody-osa__ikona::after {
		animation: none;
		opacity: 0;
	}
}
.vyhody-stranka--siroka #vyhody-var-a .vyhody-osa__text {
	transition: opacity 0.3s ease;
}
.vyhody-stranka--siroka #vyhody-var-a .vyhody-osa__bod:not(.vyhody-osa__bod--aktivni) .vyhody-osa__text {
	opacity: 0.7;
}


/* Stárnoucí maskot i ve variantě A — aktivní věk na časové ose oranžovým
   prstencem (bílý z varianty D by na světlém pozadí nebyl vidět) */
#vyhody-var-a .vyhody-osa__ikona {
	position: relative;
	transition: box-shadow 0.3s ease;
}
#vyhody-var-a .vyhody-osa__bod--aktivni .vyhody-osa__ikona {
	box-shadow: 0 0 0 5px hsl(var(--primary) / 0.25), 0 4px 12px hsl(var(--primary) / 0.18);
}
#vyhody-var-a .vyhody-osa__bod--aktivni .vyhody-osa__ikona::after {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	border: 2px solid hsl(var(--primary));
	animation: vyhodyOsaVlna 0.9s ease-out both;
	pointer-events: none;
}
#vyhody-var-a .vyhody-osa__text {
	transition: opacity 0.3s ease;
}
#vyhody-var-a .vyhody-osa__bod:not(.vyhody-osa__bod--aktivni) .vyhody-osa__text {
	opacity: 0.7;
}
/* Mobil (A i D): maskot pod bublinou na střed */
@media (max-width: 640px) {
	#vyhody-var-a .vyhody-maskot {
		align-self: center;
	}
}

/* Varianty C/D — blok „Fajn účet je součástí Fajn skupiny" neutrální (bílý
   s rámečkem jako „Co ti Fajn účet dá") s modrými akcenty, aby plnou barvu
   mělo na konci stránky jen oranžové CTA */
.vyhody-stranka--siroka .vyhody-skupina__inner {
	background: #fff;
	border: 1px solid hsl(var(--border));
}
.vyhody-stranka--siroka .vyhody-skupina__maskot {
	filter: drop-shadow(0 10px 20px rgba(0, 116, 255, 0.18));
}
.vyhody-stranka--siroka .vyhody-skupina__stitek {
	color: #0074ff;
}
.vyhody-stranka--siroka .vyhody-skupina__nadpis {
	color: hsl(var(--foreground));
}
.vyhody-stranka--siroka .vyhody-skupina__popis {
	color: hsl(var(--muted-foreground));
}
.vyhody-stranka--siroka .vyhody-skupina__badge {
	background: rgba(0, 116, 255, 0.06);
	border-color: rgba(0, 116, 255, 0.2);
	color: hsl(var(--foreground));
}
.vyhody-stranka--siroka .vyhody-skupina__badge .lucide {
	color: #0074ff;
}

/* Varianty C/D — „Jak to funguje" je bez rámečku, proto bez bočního paddingu:
   karty sahají až k okrajům rámečků bloků nad a pod ním */
.vyhody-stranka--siroka .vyhody-jak__inner {
	padding-left: 0;
	padding-right: 0;
}

/* Varianty C/D — maskot má do pasu useknutý spodek, proto na něm stojí čára
   (vzor .pruvodce-maskot__oddelovac z pruvodce.css), místo stínu do ztracena */
.vyhody-stranka--siroka .vyhody-skupina__maskot {
	filter: none;
}
.vyhody-stranka--siroka .vyhody-skupina__maskot-cara {
	display: block;
	position: absolute;
	left: -6px;
	right: -6px;
	bottom: -1px;
	height: 5px;
	border-radius: 9999px;
	background: linear-gradient(90deg,
		hsl(33, 100%, 50%) 0%,
		hsl(28, 100%, 58%) 50%,
		hsl(33, 100%, 50%) 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
	box-shadow: 0 2px 6px hsl(33, 100%, 50%, 0.45);
}

/* Varianty C/D — texty bloku „Fajn účet je součástí Fajn skupiny" na střed
   jako hlavička „Co ti Fajn účet dá" (.vyhody-hlavicka), maskot nad nimi */
.vyhody-stranka--siroka .vyhody-skupina__inner {
	grid-template-columns: 1fr;
	gap: 1.5rem;
	text-align: center;
}
.vyhody-stranka--siroka .vyhody-skupina__stitek {
	justify-content: center;
}
.vyhody-stranka--siroka .vyhody-skupina__popis {
	margin-left: auto;
	margin-right: auto;
}
.vyhody-stranka--siroka .vyhody-skupina__badges {
	justify-content: center;
}

/* Varianty C/D — „Fajn účet je součástí Fajn skupiny" a závěrečné CTA vedle sebe.
   Bez zásahu do markupu (sekce sdílí i vyhody.php): stránka je mřížka, kde
   ostatní děti zabírají celou šířku a tyto dvě sekce každá jednu polovinu
   šířky rámečků (1322 px, mezera 24 px). */
@media (min-width: 1200px) {
	/* mřížka přes celou šířku okna (.container je užší než 1322 px rámečky);
	   ostatní sekce se „prolamují" relativně k rodiči, takže fungují dál */
	.vyhody-stranka--siroka {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 661px) minmax(0, 661px) minmax(0, 1fr);
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}
	.vyhody-stranka--siroka > * {
		grid-column: 1 / -1;
		min-width: 0;
	}
	/* zrušit „prolomení" sekce na šířku okna (.vyhody-stranka > section) */
	.vyhody-stranka--siroka > section.vyhody-skupina,
	.vyhody-stranka--siroka > section.vyhody-cta {
		position: static;
		width: auto;
		margin-left: 0;
		margin-right: 0;
	}
	.vyhody-stranka--siroka > section.vyhody-skupina {
		grid-column: 2;
		padding: 0 12px 0 0;
	}
	.vyhody-stranka--siroka > section.vyhody-cta {
		grid-column: 3;
		padding: 0 0 0 12px;
	}
	.vyhody-stranka--siroka .vyhody-skupina__inner,
	.vyhody-stranka--siroka .vyhody-cta__inner {
		max-width: none;
		height: 100%;
		box-sizing: border-box;
	}
	.vyhody-stranka--siroka .vyhody-cta__inner {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

/* Varianty C/D — závěrečné bloky nižší: menší maskot, ať oranžové CTA vedle
   nemá nad a pod obsahem prázdné místo */
.vyhody-stranka--siroka .vyhody-skupina__maskot {
	max-width: 110px;
}

/* Varianty C/D — obsah patičky (portály, sloupce, copyright) stejně široký
   jako rámečky stránky (1322 px) místo 1240 px. Patička je společná pro celý
   web, proto jen přes :has() na této stránce. */
body:has(.vyhody-stranka--siroka) .pv-d__holder,
body:has(.vyhody-stranka--siroka) .pv-f-portaly__holder {
	max-width: calc(1322px + 2 * clamp(16px, 3vw, 32px));
}

/* Varianty C/D — tlačítka závěrečného CTA pod sebou, stejně široká */
.vyhody-stranka--siroka .vyhody-cta__akce {
	display: grid;
	grid-template-columns: auto;
	justify-content: center;
}
.vyhody-stranka--siroka .vyhody-cta__akce .vyhody-btn {
	justify-content: center;
}

/* Názvy domén s pomlčkou (Fajn-brigady.cz) se nesmí zalomit uprostřed */
.vyhody-skupina__domena {
	white-space: nowrap;
}

/* ---------- Varianty C/D — mobil a užší okna ---------- */

/* 1) Rámečky pod šířkou 1322 px + 2 × 12 px už nejsou od kraje ke kraji:
   boční okraj 12 px, ať zaoblené rohy nejsou oříznuté okrajem displeje.
   Obsah patičky lícuje s okraji rámečků. */
@media (max-width: 1345px) {
	.vyhody-stranka--siroka .vyhody-hero--dav,
	.vyhody-stranka--siroka > section:not(:first-child) {
		padding-left: 12px;
		padding-right: 12px;
	}
	body:has(.vyhody-stranka--siroka) .pv-d__holder,
	body:has(.vyhody-stranka--siroka) .pv-f-portaly__holder {
		padding-left: 12px;
		padding-right: 12px;
	}
}

/* 2) Tlačítka závěrečného CTA přes celou šířku bloku */
@media (max-width: 767px) {
	.vyhody-stranka--siroka .vyhody-cta__akce {
		grid-template-columns: 1fr;
		justify-content: stretch;
	}
}

/* 3) Kompaktní karty „Co ti Fajn účet dá" a „Jak to funguje" — ikona vlevo,
   nadpis a popis vpravo, menší odsazení */
@media (max-width: 639px) {
	.vyhody-stranka--siroka .vyhody-mrizka__karty,
	.vyhody-stranka--siroka .vyhody-jak__grid {
		gap: 0.75rem;
	}
	.vyhody-stranka--siroka .vyhody-karta,
	.vyhody-stranka--siroka .vyhody-jak__krok {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 0.875rem;
		align-items: start;
		padding: 1rem 2.25rem 1rem 1rem;
		text-align: left;
	}
	.vyhody-stranka--siroka .vyhody-karta__ikona-wrap,
	.vyhody-stranka--siroka .vyhody-jak__ikona {
		grid-row: 1 / span 2;
		width: 2.75rem;
		height: 2.75rem;
		margin: 0;
	}
	.vyhody-stranka--siroka .vyhody-jak__ikona .lucide {
		width: 1.375rem;
		height: 1.375rem;
	}
	.vyhody-stranka--siroka .vyhody-karta__nadpis,
	.vyhody-stranka--siroka .vyhody-jak__nadpis {
		margin: 0.125rem 0 0.25rem;
	}
	.vyhody-stranka--siroka .vyhody-karta__cislo,
	.vyhody-stranka--siroka .vyhody-jak__cislo {
		top: 0.875rem;
		right: 1rem;
	}
}