/* =========================================================
   HOMEPAGE — Fajn soused
   BEM CSS pro obsah stránky (homepage.php)
========================================================== */

.fs-section-head {
	text-align: center;
	max-width: 620px;
	margin: 0 auto 40px;
}

.fs-section-head--row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	text-align: left;
	max-width: none;
	margin: 0 0 32px;
	gap: 24px;
	flex-wrap: wrap;
}

.fs-section-head__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 500;
	color: var(--fs-accent);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 10px;
}

.fs-section-head__pulse {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--fs-accent);
	box-shadow: 0 0 0 0 rgba(224, 123, 0, 0.6);
	animation: fsPulse 1.8s infinite;
}

@keyframes fsPulse {
	0%   { box-shadow: 0 0 0 0 rgba(224, 123, 0, 0.6); }
	70%  { box-shadow: 0 0 0 8px rgba(224, 123, 0, 0); }
	100% { box-shadow: 0 0 0 0 rgba(224, 123, 0, 0); }
}

.fs-section-head__title {
	font-size: 30px;
	font-weight: 500;
	margin: 0 0 10px;
	color: var(--fs-text);
}

.fs-section-head__desc {
	font-size: 16px;
	color: #77787b;
	margin: 0;
	line-height: 1.5;
}

.fs-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
	transition: opacity .15s, background .15s, transform .1s;
}

.fs-btn--primary {
	background: var(--fs-accent);
	color: #fff;
}

.fs-btn--primary:hover { background: var(--fs-accent-dark); transform: translateY(-1px); }

.fs-btn--outline {
	background: #fff;
	color: var(--fs-accent);
	border: 1px solid var(--fs-accent);
}

.fs-btn--outline:hover { background: #fff2e0; }

.fs-btn--ghost-light {
	background: rgba(255,255,255,0.12);
	color: #fff;
	border: 1px solid rgba(255,255,255,0.4);
}

.fs-btn--ghost-light:hover { background: rgba(255,255,255,0.2); }

.fs-btn--lg {
	padding: 14px 28px;
	font-size: 16px;
}

/* Hero akce: Nabízím = zelená, Hledám = oranžová — stejný barevný kód jako u karet */
.fs-hero__actions .fs-btn--offer {
	background: var(--fs-primary);
}

.fs-hero__actions .fs-btn--offer:hover {
	background: var(--fs-primary-dark);
}

.fs-hero__actions .fs-btn--request {
	color: var(--fs-accent);
	border-color: var(--fs-accent);
}

.fs-hero__actions .fs-btn--request:hover {
	background: #fff2e0;
}

/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */
.fs-hero {
	background: linear-gradient(180deg, #fff2e0 0%, var(--fs-bg) 100%);
	padding: 56px 24px 64px;
}

@media (max-width: 900px) {
	.fs-hero { padding: 28px 20px 40px; }
}

.fs-hero__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 48px;
	align-items: center;
}

.fs-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 1px solid var(--fs-border);
	color: var(--fs-accent);
	font-size: 13px;
	font-weight: 500;
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 18px;
}

.fs-hero__badge i { width: 14px; height: 14px; }

.fs-hero__title {
	font-size: 44px;
	line-height: 1.15;
	font-weight: 500;
	margin: 0 0 18px;
	color: var(--fs-text);
}

.fs-hero__title-accent { color: var(--fs-accent); }

.fs-hero__desc {
	font-size: 17px;
	line-height: 1.6;
	color: #77787b;
	max-width: 520px;
	margin: 0 0 28px;
}

.fs-hero__search {
	display: flex;
	background: #fff;
	border: 1px solid var(--fs-border);
	border-radius: 14px;
	padding: 6px;
	gap: 6px;
	box-shadow: var(--fs-shadow);
	margin-bottom: 20px;
}

.fs-hero__search-field {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	padding: 10px 12px;
	color: #77787b;
}

.fs-hero__search-field i { width: 18px; height: 18px; flex-shrink: 0; }

.fs-hero__search-field input {
	border: none;
	outline: none;
	font-family: inherit;
	font-size: 14px;
	width: 100%;
	color: var(--fs-text);
}

.fs-hero__search-field--location {
	border-left: 1px solid var(--fs-border);
}

.fs-hero__search-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: none;
	background: var(--fs-accent);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	padding: 14px 28px;
	border-radius: 10px;
	cursor: pointer;
	transition: background .15s;
}

.fs-hero__search-btn i { width: 19px; height: 19px; flex-shrink: 0; }

.fs-hero__search-btn:hover { background: var(--fs-primary-dark); }

.fs-hero__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.fs-hero__visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

/* Přepínač variant A/B — jen pro porovnání návrhů bubliny, needituje se z ostrého obsahu */
.fs-hero__switch {
	position: absolute;
	top: -34px;
	left: 0;
	display: flex;
	gap: 4px;
	background: #fff;
	border: 1px solid var(--fs-border);
	border-radius: 999px;
	padding: 3px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	z-index: 5;
}

.fs-hero__switch-btn {
	width: 28px;
	height: 26px;
	border: none;
	background: transparent;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	color: #77787b;
	cursor: pointer;
	transition: background .15s, color .15s;
}

.fs-hero__switch-btn:hover { color: var(--fs-text); }

.fs-hero__switch-btn--active {
	background: var(--fs-primary);
	color: #fff;
}

.fs-hero__variant { display: none; }
.fs-hero__variant--active { display: block; }

.fs-hero__mascot {
	max-width: 260px;
	filter: drop-shadow(0 12px 24px rgba(224,123,0,0.18));
}

/* ---------- Varianta A: bublina se sousedovou fotkou (původní) ---------- */
.fs-hero__bubble {
	position: relative;
	flex: 0 1 240px;
	padding: 20px 22px;
	background: #fff;
	border: 3px solid var(--fs-accent);
	border-radius: 24px;
	text-align: center;
	box-shadow: 0 10px 30px rgba(224, 123, 0, 0.18);
	animation: fsBublinaNadech 4s ease-in-out infinite;
}

/* Zelený puntík v rohu — druhý akcent vedle oranžového rámečku */
.fs-hero__bubble-tecka {
	position: absolute;
	top: -8px;
	right: -8px;
	width: 18px;
	height: 18px;
	background: var(--fs-primary);
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(31, 122, 61, 0.4);
}

/* Jemné pohupování — bublina "žije" */
@keyframes fsBublinaNadech {
	0%, 100% { transform: translateY(0) rotate(-1deg); }
	50%      { transform: translateY(-6px) rotate(1deg); }
}

/* Špička bubliny — dvojitá, aby seděl i barevný rámeček. Míří doprava na maskota. */
.fs-hero__bubble::before,
.fs-hero__bubble::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	border: solid transparent;
	border-left-color: var(--fs-accent);
	border-width: 14px;
	margin-top: -14px;
}

.fs-hero__bubble::after {
	border-left-color: #fff;
	border-width: 10px;
	margin-top: -10px;
	margin-left: -4px;
}

.fs-hero__bubble-avatar {
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto 10px;
	border: 2px solid var(--fs-accent);
}

.fs-hero__bubble-hlavni {
	margin: 0;
	font-size: clamp(17px, 2.4vw, 20px);
	font-weight: 500;
	line-height: 1.2;
	color: var(--fs-accent);
}

.fs-hero__bubble-vedlejsi {
	margin: 5px 0 0;
	font-size: 13.5px;
	font-weight: 400;
	color: #77787b;
	line-height: 1.35;
}

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

/* ---------- Varianta B: dialog — bublina maskota nad Danielovou odpovědí ---------- */
.fs-hero__dialog {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	flex: 0 1 260px;
}

.fs-hero__dialog .fs-hero__bubble {
	flex: none;
	width: 100%;
	padding: 18px 20px;
}

/* Bublina maskota — blíž k maskotovi (zarovnaná doprava) a vzhledově
   podobná té Danielově (stejný border-radius, jen menší padding). */
.fs-hero__dialog .fs-hero__bubble--ask {
	width: auto;
	align-self: flex-end;
	margin-right: -70px;
	padding: 14px 20px;
	border-width: 3px;
	border-radius: 24px;
	animation: none;
}

.fs-hero__bubble--ask .fs-hero__bubble-vedlejsi {
	margin: 0;
	font-size: 14px;
	color: var(--fs-text);
	font-weight: 500;
}

/* Danielova bublina "mluví" — špička míří dolů od bubliny (ne k maskotovi) */
.fs-hero__dialog .fs-hero__bubble--reply::before,
.fs-hero__dialog .fs-hero__bubble--reply::after {
	top: 100%;
	left: 40px;
	margin-top: 0;
	margin-left: -14px;
	border-left-color: transparent;
	border-top-color: var(--fs-accent);
}

.fs-hero__dialog .fs-hero__bubble--reply::after {
	border-top-color: #fff;
	margin-left: -10px;
	margin-top: -4px;
}

.fs-hero__dialog .fs-hero__bubble--reply .fs-hero__bubble-avatar {
	width: 56px;
	height: 56px;
	margin-bottom: 8px;
}

.fs-hero__bubble--reply .fs-hero__bubble-hlavni {
	font-size: 15px;
	color: var(--fs-text);
	margin-bottom: 10px;
}

/* Chip s kategorií — minimalistický tag, který se cyklicky střídá */
.fs-hero__bubble-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 10px 0 0;
	padding: 7px 14px;
	background: var(--fs-primary-light);
	color: var(--fs-primary-dark);
	font-size: 13px;
	font-weight: 500;
	border-radius: 999px;
	opacity: 0;
	transform: translateY(4px);
}

.fs-hero__bubble-chip i { width: 15px; height: 15px; flex-shrink: 0; }

.fs-hero__bubble-chip--in {
	animation: fsChipFade .45s ease forwards;
}

@keyframes fsChipFade {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.fs-hero__bubble--reply { animation: none; }
	.fs-hero__bubble-chip--in { animation: none; opacity: 1; transform: none; }
}

/* ---------- Mobil: maskot + bublina menší a vedle sebe, texty kratší a menší ---------- */
@media (max-width: 900px) {
	.fs-hero__inner { grid-template-columns: 1fr; gap: 0; }
	.fs-hero__title { font-size: 24px; margin: 0 0 10px; }
	.fs-hero__desc { font-size: 14.5px; margin: 0 0 18px; }
	.fs-hero__search { flex-direction: column; }
	.fs-hero__search-field--location { border-left: none; border-top: 1px solid var(--fs-border); }

	.fs-hero__visual {
		order: -1;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-end;
		gap: 0;
		margin-bottom: 14px;
		max-width: 100%;
		padding: 0 4px;
	}

	/* Zplošťuje vnořené wrappery aktivní varianty B, ať jsou obě bubliny
	   i maskot přímými flex items ve stejném kontejneru — jde je pak
	   řadit přes order. Neaktivní varianta (display:none) musí zůstat
	   skrytá — proto jen na .fs-hero__variant--active, ne na obě. */
	.fs-hero__variant[data-hero-variant-panel="b"].fs-hero__variant--active,
	.fs-hero__variant[data-hero-variant-panel="b"].fs-hero__variant--active .fs-hero__dialog {
		display: contents;
	}

	.fs-hero__mascot {
		max-width: 84px;
		filter: drop-shadow(0 6px 12px rgba(224,123,0,0.18));
	}

	/* Varianta A — bublina vedle zmenšeného maskota */
	.fs-hero__variant--active > .fs-hero__bubble {
		flex: 0 1 170px;
		padding: 12px 14px;
		border-width: 2px;
		border-radius: 18px;
		margin-bottom: 14px;
	}

	.fs-hero__variant--active > .fs-hero__bubble-avatar {
		width: 44px;
		height: 44px;
		margin-bottom: 6px;
	}

	.fs-hero__variant--active > .fs-hero__bubble-hlavni { font-size: 14px; }
	.fs-hero__variant--active > .fs-hero__bubble-vedlejsi { font-size: 11.5px; }

	.fs-hero__variant--active > .fs-hero__bubble::before,
	.fs-hero__variant--active > .fs-hero__bubble::after {
		border-width: 9px;
		margin-top: -9px;
	}

	.fs-hero__variant--active > .fs-hero__bubble::after {
		border-width: 6px;
		margin-top: -6px;
		margin-left: -3px;
	}

	/* Varianta B na mobilu — přeskupeno na dva řádky, ať je jasné, kdo
	   mluví: nahoře přes celou šířku otázka maskota (špička dolů, na
	   střed), pod tím maskot + Danielova odpověď vedle sebe. */
	.fs-hero__dialog .fs-hero__bubble--ask {
		order: 1;
		align-self: flex-end;
		flex: 0 0 100%;
		width: 260px;
		max-width: 90%;
		margin: 0 0 16px auto;
		padding: 10px 16px;
		border-width: 2px;
	}

	.fs-hero__bubble--ask .fs-hero__bubble-vedlejsi {
		font-size: 13px;
		white-space: normal;
		text-align: center;
	}

	/* Špička míří dolů, blíž pravému okraji bubliny — ukazuje na hlavu maskota pod ní.
	   Jen jeden rámeček (bez druhé bílé výplně), stejně jako u bubliny --reply. */
	.fs-hero__bubble--ask::before {
		top: 100%;
		left: 82%;
		border-left-color: transparent;
		border-top-color: var(--fs-accent);
		border-width: 9px;
		margin-top: 0;
		margin-left: 1px;
	}

	.fs-hero__bubble--ask::after {
		display: none;
	}

	.fs-hero__mascot {
		order: 2;
		align-self: flex-start;
		margin-top: -30px;
	}

	.fs-hero__dialog .fs-hero__bubble--reply {
		order: 2;
		flex: 0 1 190px;
		width: auto;
		padding: 12px 14px;
		border-width: 2px;
		border-radius: 18px;
	}

	.fs-hero__bubble--reply .fs-hero__bubble-avatar {
		width: 44px;
		height: 44px;
		margin-bottom: 6px;
	}

	.fs-hero__bubble--reply .fs-hero__bubble-hlavni { font-size: 13px; margin-bottom: 8px; }
	.fs-hero__bubble-chip { font-size: 12px; padding: 6px 12px; }

	/* Špička míří doprava, k hlavě maskota vedle bubliny — jen jeden rámeček (bez druhé bílé výplně) */
	.fs-hero__dialog .fs-hero__bubble--reply::before {
		top: 30%;
		left: 100%;
		margin-top: 0;
		border-left-color: var(--fs-accent);
		border-top-color: transparent;
		border-width: 9px;
	}

	.fs-hero__bubble--reply::after {
		display: none;
	}
}

@media (max-width: 420px) {
	/* I na nejmenších telefonech bublina zůstává vedle maskota — jen o něco menší */
	.fs-hero__mascot { max-width: 88px; }

	.fs-hero__variant--active > .fs-hero__bubble { flex-basis: 140px; padding: 10px 12px; }
	.fs-hero__variant--active > .fs-hero__bubble-avatar { width: 38px; height: 38px; margin-bottom: 4px; }
	.fs-hero__variant--active > .fs-hero__bubble-hlavni { font-size: 13px; }
	.fs-hero__variant--active > .fs-hero__bubble-vedlejsi { font-size: 11px; }

	.fs-hero__dialog { flex-basis: 150px; }
	.fs-hero__bubble--reply { padding: 10px 12px; }
	.fs-hero__bubble--reply .fs-hero__bubble-avatar { width: 38px; height: 38px; margin-bottom: 4px; }
	.fs-hero__bubble--reply .fs-hero__bubble-hlavni { font-size: 12px; }
	.fs-hero__bubble-chip { font-size: 11px; padding: 5px 10px; }
}

/* ---------------------------------------------------------
   ČÍSLA KOMUNITY
--------------------------------------------------------- */
.fs-stats {
	background: var(--fs-accent);
	padding: 40px 24px;
}

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

.fs-stats__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	color: #fff;
}

.fs-stats__icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255,255,255,0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 6px;
}

/* Hodnocení (hvězda) vystupuje jako oranžový akcent mezi zelenými ikonami */
.fs-stats__item:last-child .fs-stats__icon {
	background: var(--fs-primary);
}

.fs-stats__icon i { width: 20px; height: 20px; }

/* Hromádka překrývajících se fotek sousedů — efekt jako u pluginu na sociální sítě */
.fs-stats__avatars {
	display: flex;
	align-items: center;
	margin-bottom: 6px;
}

.fs-stats__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--fs-accent);
	margin-left: -12px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.fs-stats__avatar:first-child { margin-left: 0; }

.fs-stats__avatar--more {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,0.9);
	color: var(--fs-accent-dark);
	font-size: 11.5px;
	font-weight: 500;
	border-color: #fff;
}

.fs-stats__number {
	font-size: 30px;
	font-weight: 500;
}

.fs-stats__label {
	font-size: 14px;
	opacity: 0.85;
}

@media (max-width: 700px) {
	.fs-stats__inner { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------
   TRUSTBAR — pruh důvěry hned pod čísly
--------------------------------------------------------- */
.fs-trustbar {
	background: #fff;
	border-bottom: 1px solid var(--fs-border);
	padding: 18px 24px;
}

.fs-trustbar__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
	justify-content: center;
}

.fs-trustbar__label {
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #77787b;
	white-space: nowrap;
}

.fs-trustbar__logos {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
	justify-content: center;
}

.fs-trustbar__logo img {
	height: 26px;
	width: auto;
}

.fs-trustbar__item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--fs-text);
	white-space: nowrap;
}

.fs-trustbar__item i { width: 16px; height: 16px; color: var(--fs-accent); }

/* ---------------------------------------------------------
   KATEGORIE
--------------------------------------------------------- */
.fs-kategorie {
	padding: 64px 24px;
}

.fs-kategorie__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.fs-kategorie__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
}

.fs-kategorie__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	background: #fff;
	border: 1px solid var(--fs-border);
	border-radius: var(--fs-radius);
	padding: 22px 12px;
	transition: border-color .15s, transform .15s, box-shadow .15s;
}

.fs-kategorie__item:hover {
	border-color: var(--fs-accent);
	transform: translateY(-3px);
	box-shadow: 0 14px 28px -16px rgba(224,123,0,0.35);
}

/* Každá čtvrtá karta dostane zelený akcent — barvy se v mřížce prostřídají */
.fs-kategorie__item:nth-child(4n):hover {
	border-color: var(--fs-primary);
	box-shadow: 0 14px 28px -16px rgba(31,122,61,0.35);
}

.fs-kategorie__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff2e0;
	color: var(--fs-accent);
}

.fs-kategorie__item:nth-child(4n) .fs-kategorie__icon {
	background: var(--fs-primary-light);
	color: var(--fs-primary-dark);
}

.fs-kategorie__icon i { width: 20px; height: 20px; }

.fs-kategorie__label {
	font-size: 13px;
	font-weight: 500;
	color: var(--fs-text);
	line-height: 1.3;
}

.fs-kategorie__count {
	font-size: 11px;
	font-weight: 500;
	color: #77787b;
	background: var(--fs-bg);
	padding: 2px 8px;
	border-radius: 999px;
}

@media (max-width: 900px) {
	.fs-kategorie__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
	/* Kompaktnější karty — 3 sloupce, menší ikona a odsazení, ať se
	   na mobilu vejde víc kategorií najednou a sekce nezabírá tolik místa. */
	.fs-kategorie { padding: 40px 16px; }

	.fs-kategorie__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}

	.fs-kategorie__item {
		flex-direction: row;
		justify-content: flex-start;
		text-align: left;
		gap: 6px;
		padding: 8px;
		min-width: 0;
	}

	.fs-kategorie__icon {
		width: 30px;
		height: 30px;
		flex-shrink: 0;
	}

	.fs-kategorie__icon i { width: 15px; height: 15px; }

	.fs-kategorie__label {
		font-size: 11px;
		line-height: 1.2;
		min-width: 0;
	}

	.fs-kategorie__count {
		display: none;
	}
}

@media (max-width: 400px) {
	/* Na užších telefonech se delší názvy ("Hodinový manžel/ka",
	   "Pracovník/ce ve službách") do 3. sloupce nevejdou bez lámání
	   uprostřed slova — přejdeme na 2 sloupce, ať mají karty víc místa. */
	.fs-kategorie__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------
   MAPA + VÝPIS
--------------------------------------------------------- */
.fs-vypis {
	padding: 64px 24px;
	background: #fff2e0;
}

.fs-vypis__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.fs-vypis__tabs {
	display: flex;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--fs-border);
	border-radius: 999px;
	padding: 4px;
}

.fs-vypis__tab {
	border: none;
	background: transparent;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	color: #77787b;
	padding: 8px 16px;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s, color .15s;
}

.fs-vypis__tab--active,
.fs-vypis__tab:hover {
	background: var(--fs-accent);
	color: #fff;
}

/* Nabízím = zelená, Hledám = oranžová — stejná logika jako u karet a mapy */
.fs-vypis__tab--offer:hover {
	background: var(--fs-primary);
}

.fs-vypis__tab--request:hover {
	background: var(--fs-accent);
}

.fs-vypis__layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: start;
}

.fs-vypis__map {
	position: relative;
	background: #f5ddc2;
	border: 1px solid var(--fs-border);
	border-radius: var(--fs-radius);
	min-height: 480px;
	overflow: hidden;
}

.fs-vypis__map-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: #c98a4b;
	font-size: 14px;
}

.fs-vypis__map-placeholder i { width: 32px; height: 32px; }

/* Pin s fotkou souseda — kulatý portrét + kapkový hrot dolů, aby zůstal poznat jako místo na mapě */
.fs-vypis__pin {
	position: absolute;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: var(--fs-accent);
	border: 3px solid #fff;
	box-shadow: 0 4px 12px rgba(0,0,0,0.28);
	cursor: pointer;
	transform: translate(-50%, -100%);
}

.fs-vypis__pin img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

/* Hrot pod fotkou — ukazuje přesný bod na mapě */
.fs-vypis__pin::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 0;
	height: 0;
	border: 8px solid transparent;
	border-top-color: #fff;
	transform: translateX(-50%);
	margin-top: -1px;
}

.fs-vypis__pin--offer { border-color: var(--fs-primary); }
.fs-vypis__pin--offer::after { border-top-color: var(--fs-primary); }

.fs-vypis__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-height: 480px;
	overflow-y: auto;
	padding-right: 4px;
}

.fs-card {
	background: #fff;
	border: 1px solid var(--fs-border);
	border-left: 3px solid var(--fs-accent);
	border-radius: var(--fs-radius);
	padding: 20px;
	transition: transform .15s, box-shadow .15s;
}

.fs-card--offer {
	border-left-color: var(--fs-primary);
}

.fs-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -18px rgba(224,123,0,0.35);
}

.fs-card--offer:hover {
	box-shadow: 0 14px 28px -18px rgba(31,122,61,0.35);
}

.fs-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.fs-card__badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 500;
	padding: 4px 10px;
	border-radius: 999px;
}

.fs-card__badge i { width: 12px; height: 12px; }

.fs-card__badge--offer {
	background: var(--fs-primary-light);
	color: var(--fs-primary-dark);
}

.fs-card__badge--request {
	background: #fff2e0;
	color: var(--fs-accent-dark);
}

.fs-card__time {
	font-size: 12px;
	color: #77787b;
}

.fs-card__title {
	font-size: 16px;
	font-weight: 500;
	margin: 0 0 6px;
	color: var(--fs-text);
}

.fs-card__desc {
	font-size: 14px;
	color: #77787b;
	line-height: 1.5;
	margin: 0 0 16px;
}

.fs-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.fs-card__person {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--fs-text);
}

.fs-card__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 1px solid var(--fs-border);
}

.fs-card__rating {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 500;
	color: var(--fs-primary-dark);
}

.fs-card__rating i { width: 14px; height: 14px; fill: currentColor; }

.fs-vypis__more {
	text-align: center;
	margin-top: 32px;
}

@media (max-width: 900px) {
	.fs-vypis { padding: 40px 16px; }
	.fs-vypis__layout { grid-template-columns: 1fr; gap: 16px; }
	.fs-vypis__map { min-height: 220px; }
	.fs-vypis__list { max-height: none; overflow: visible; }
	.fs-vypis__pin { width: 52px; height: 52px; }
}

@media (max-width: 560px) {
	/* Tři tabsy se na úzkém displeji nevejdou do řady — zmenšit a nechat zalomit */
	.fs-vypis__tabs {
		flex-wrap: wrap;
		width: 100%;
		border-radius: 14px;
	}

	.fs-vypis__tab {
		flex: 1 1 auto;
		padding: 8px 10px;
		font-size: 12.5px;
		text-align: center;
	}
}

/* ---------------------------------------------------------
   JAK TO FUNGUJE
--------------------------------------------------------- */
.fs-jak {
	padding: 72px 24px;
}

.fs-jak__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.fs-jak__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-bottom: 32px;
}

.fs-jak__card {
	position: relative;
	background: #fff;
	border: 1px solid var(--fs-border);
	border-radius: var(--fs-radius);
	padding: 28px 20px;
	text-align: center;
	transition: transform .15s, box-shadow .15s;
}

.fs-jak__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 28px -18px rgba(31,122,61,0.35);
}

/* Sudé karty (2 a 4) dostanou při hoveru oranžový akcent — barvy se prostřídají */
.fs-jak__card:nth-child(2n):hover {
	box-shadow: 0 14px 28px -18px rgba(224,123,0,0.35);
}

.fs-jak__card:nth-child(2n) .fs-jak__icon {
	background: #fff2e0;
	color: var(--fs-accent);
}

.fs-jak__num {
	position: absolute;
	top: 14px;
	right: 18px;
	font-size: 13px;
	font-weight: 500;
	color: var(--fs-primary);
}

.fs-jak__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--fs-primary-light);
	color: var(--fs-primary);
	margin-bottom: 16px;
}

.fs-jak__icon i { width: 24px; height: 24px; }

.fs-jak__title {
	font-size: 17px;
	font-weight: 500;
	margin: 0 0 8px;
	color: var(--fs-text);
}

.fs-jak__desc {
	font-size: 14px;
	color: #77787b;
	line-height: 1.5;
	margin: 0;
}

.fs-jak__note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center;
	font-size: 14px;
	color: #77787b;
	margin: 0;
}

.fs-jak__note i { width: 16px; height: 16px; color: var(--fs-accent); flex-shrink: 0; }

@media (max-width: 900px) {
	.fs-jak__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
	.fs-jak__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   APLIKACE / NOTIFIKACE
--------------------------------------------------------- */
.fs-app {
	background: linear-gradient(180deg, var(--fs-accent) 0%, var(--fs-accent-dark) 100%);
	padding: 72px 24px;
	overflow: hidden;
}

.fs-app__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 0.8fr;
	gap: 48px;
	align-items: center;
}

.fs-app__stitek {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255,255,255,0.14);
	border: 1px solid rgba(255,255,255,0.24);
	color: #fff;
	font-size: 12.5px;
	font-weight: 500;
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 16px;
}

.fs-app__stitek i { width: 13px; height: 13px; color: var(--fs-primary); }

.fs-app__title {
	font-size: 30px;
	font-weight: 500;
	color: #fff;
	margin: 0 0 24px;
	line-height: 1.25;
}

.fs-app__benefity {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0 0 28px;
}

.fs-app__benefity li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.fs-app__benefity i {
	width: 20px;
	height: 20px;
	color: var(--fs-primary);
	flex-shrink: 0;
	margin-top: 2px;
}

.fs-app__benefity strong {
	display: block;
	color: #fff;
	font-size: 15px;
	margin-bottom: 2px;
}

.fs-app__benefity span {
	display: block;
	color: rgba(255,255,255,0.75);
	font-size: 13.5px;
}

.fs-app .fs-btn--primary {
	background: #fff;
	color: var(--fs-accent);
}

.fs-app .fs-btn--primary:hover { background: #fff2e0; }

.fs-app__visual {
	display: flex;
	justify-content: center;
}

.fs-app__phone {
	position: relative;
	width: 240px;
	height: 480px;
	background: #0e1c13;
	border-radius: 36px;
	padding: 12px;
	box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
}

.fs-app__phone-notch {
	position: absolute;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 18px;
	background: #0e1c13;
	border-radius: 0 0 12px 12px;
	z-index: 2;
}

.fs-app__phone-screen {
	position: relative;
	width: 100%;
	height: 100%;
	background: #fff2e0;
	border-radius: 26px;
	overflow: hidden;
	padding: 40px 12px 12px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fs-app__notif {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: #fff;
	border-radius: 14px;
	padding: 12px;
	box-shadow: 0 8px 16px -8px rgba(0,0,0,0.2);
	opacity: 0;
	animation: fsNotifIn 9s ease-in-out infinite;
}

.fs-app__notif--1 { animation-delay: 0s; }
.fs-app__notif--2 { animation-delay: 3s; }
.fs-app__notif--3 { animation-delay: 6s; }

@keyframes fsNotifIn {
	0%   { opacity: 0; transform: translateY(10px); }
	6%   { opacity: 1; transform: translateY(0); }
	28%  { opacity: 1; transform: translateY(0); }
	34%  { opacity: 0; transform: translateY(-6px); }
	100% { opacity: 0; }
}

.fs-app__notif-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #fff2e0;
	color: var(--fs-accent);
	flex-shrink: 0;
}

.fs-app__notif-icon i { width: 14px; height: 14px; }

.fs-app__notif strong {
	display: block;
	font-size: 12.5px;
	color: var(--fs-text);
}

.fs-app__notif span {
	display: block;
	font-size: 11.5px;
	color: #77787b;
}

@media (max-width: 900px) {
	.fs-app__inner { grid-template-columns: 1fr; text-align: center; }
	.fs-app__benefity { text-align: left; }
	.fs-app__visual { order: -1; }
	.fs-app__phone { width: 200px; height: 400px; }
}

/* ---------------------------------------------------------
   DŮVĚRA / FAJN SKUPINA
--------------------------------------------------------- */
.fs-group {
	padding: 64px 24px;
}

.fs-group__inner {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	background: linear-gradient(120deg, #123320 0%, #1f7a3d 100%);
	border-radius: 24px;
	padding: 48px;
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 40px;
	align-items: center;
	overflow: hidden;
}

/* Oranžová záře v rohu — druhý akcent na tmavém pozadí */
.fs-group__inner::before {
	content: "";
	position: absolute;
	top: -60px;
	right: -60px;
	width: 220px;
	height: 220px;
	background: radial-gradient(circle, rgba(255,140,0,0.35) 0%, transparent 70%);
	pointer-events: none;
}

.fs-group__mascot {
	max-width: 180px;
	justify-self: center;
	filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3));
}

.fs-group__logo {
	height: 32px;
	width: auto;
	object-fit: contain;
	margin-bottom: 16px;
}

.fs-group__title {
	font-size: 26px;
	font-weight: 500;
	color: #fff;
	margin: 0 0 14px;
}

.fs-group__desc {
	font-size: 15px;
	line-height: 1.6;
	color: #d9f0e1;
	max-width: 640px;
	margin: 0 0 22px;
}

.fs-group__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 22px;
}

.fs-group__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.16);
	color: #fff;
	font-size: 13px;
	padding: 7px 14px;
	border-radius: 999px;
}

.fs-group__badge i { width: 14px; height: 14px; color: var(--fs-accent); }

.fs-group__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--fs-accent);
	font-size: 14px;
	font-weight: 500;
}

.fs-group__link i { width: 15px; height: 15px; }

@media (max-width: 700px) {
	.fs-group__inner { grid-template-columns: 1fr; padding: 32px; text-align: center; }
	.fs-group__badges { justify-content: center; }
	.fs-group__logo { margin-left: auto; margin-right: auto; }
}

/* ---------------------------------------------------------
   CTA
--------------------------------------------------------- */
.fs-cta {
	position: relative;
	background: var(--fs-accent);
	padding: 64px 24px;
	text-align: center;
	overflow: hidden;
}

.fs-cta__bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 15% 20%, rgba(255,255,255,0.12) 0%, transparent 45%),
		radial-gradient(circle at 85% 80%, rgba(31,122,61,0.25) 0%, transparent 45%);
	pointer-events: none;
}

.fs-cta__inner {
	position: relative;
	z-index: 1;
}

/* Hromádka fotek sousedů nad nadpisem — sociální důkaz, stejný vzor jako u statistik a trustbaru */
.fs-cta__avatars {
	display: flex;
	justify-content: center;
	margin-bottom: 16px;
}

.fs-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;
}

.fs-cta__avatar:first-child { margin-left: 0; }

.fs-cta__title {
	font-size: 28px;
	font-weight: 500;
	color: #fff;
	margin: 0 0 10px;
}

.fs-cta__desc {
	font-size: 16px;
	color: rgba(255,255,255,0.85);
	margin: 0 0 28px;
}

.fs-cta__actions {
	display: flex;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
}

.fs-cta__actions .fs-btn--primary {
	background: #fff;
	color: var(--fs-accent);
}

.fs-cta__actions .fs-btn--primary:hover { background: #fff2e0; }

/* ---------------------------------------------------------
   Respekt k redukovanému pohybu
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.fs-hero__mascot,
	.fs-hero__bubble,
	.fs-hero__pulse,
	.fs-section-head__pulse,
	.fs-app__notif {
		animation: none;
	}
}