/*
 * FabrykaCmyka 2.0 — Metody nadruku: landing (.fcs-metody) + podstrona metody (.fcs-metoda).
 * Port stylow z handoffow „Metody Nadruku" i „Metoda - Sitodruk", scope pod .fcs-metody / .fcs-metoda.
 * Tokeny z motywu (assets/tokens.css) z fallbackami var(--fc-..., #hex).
 * Sekcje full-bleed poza kontenerem .fc2 → responsywnosc przez media queries (1080/680), nie container queries.
 * Uwaga: w komentarzach nigdy sekwencja gwiazdka-slash.
 */

/* ============================================================
 *  WSPOLNE tokeny + primitywy (oba widoki)
 * ============================================================ */
.fcs-metody,
.fcs-metoda {
	--fcm-yellow: var(--fc-yellow, #FFDE2C);
	--fcm-yellow-deep: var(--fc-yellow-deep, #F5C400);
	--fcm-magenta: var(--fc-magenta, #C800A7);
	--fcm-magenta-d: var(--fc-magenta-d, #a90b8f);
	--fcm-cyan: var(--fc-cyan, #6EC1E4);
	--fcm-ink: var(--fc-ink, #2B2B2B);
	--fcm-text: var(--fc-text, #54595F);
	--fcm-soft: var(--fc-soft, #7A7A7A);
	--fcm-border: var(--fc-border, #ECECEC);
	--fcm-bg-soft: var(--fc-bg-soft, #F7F8F8);
	--fcm-head: var(--fc-font-head, 'Poppins', sans-serif);
	--fcm-body: var(--fc-font-body, 'Lato', sans-serif);

	background: #141418;
	color: #E8E8EA;
	font-family: var(--fcm-body);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.fcs-metody h1,
.fcs-metody h2,
.fcs-metody h3,
.fcs-metody h4,
.fcs-metoda h1,
.fcs-metoda h2,
.fcs-metoda h3,
.fcs-metoda h4 {
	font-family: var(--fcm-head);
	margin: 0;
	line-height: 1.12;
}

.fcs-metody p,
.fcs-metoda p {
	margin: 0;
}

.fcs-metody a,
.fcs-metoda a {
	text-decoration: none;
	color: inherit;
}

.fcs-metody button,
.fcs-metoda button {
	font-family: inherit;
	cursor: pointer;
}

.fcs-wrap2 {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 56px;
}

/* Eyebrow */
.fcs-metody .fcs-eyebrow2,
.fcs-metoda .fcs-eyebrow2 {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--fcm-head);
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	margin-bottom: 16px;
	color: var(--fcm-yellow);
}

.fcs-metody .fcs-eyebrow2 i,
.fcs-metoda .fcs-eyebrow2 i {
	width: 22px;
	height: 2px;
	background: currentColor;
	display: block;
	flex: none;
}

/* Buttony */
.fcs-metody .fcs-btn2,
.fcs-metoda .fcs-btn2 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: 52px;
	padding: 0 26px;
	border-radius: 11px;
	font-family: var(--fcm-head);
	font-weight: 700;
	font-size: 15.5px;
	border: 2px solid transparent;
	transition: .16s;
	white-space: nowrap;
	cursor: pointer;
}

.fcs-metody .fcs-btn2 svg,
.fcs-metoda .fcs-btn2 svg {
	flex: none;
	transition: transform .16s;
}

.fcs-metody .fcs-btn2:hover svg,
.fcs-metoda .fcs-btn2:hover svg {
	transform: translateX(3px);
}

.fcs-metody .fcs-btn2--yellow,
.fcs-metoda .fcs-btn2--yellow {
	background: var(--fcm-yellow);
	color: #1a1600;
}

.fcs-metody .fcs-btn2--yellow:hover,
.fcs-metody .fcs-btn2--yellow:focus-visible,
.fcs-metoda .fcs-btn2--yellow:hover,
.fcs-metoda .fcs-btn2--yellow:focus-visible {
	background: #fff;
	color: #1a1600;
	outline: none;
}

.fcs-metody .fcs-btn2--yellow:active,
.fcs-metoda .fcs-btn2--yellow:active {
	background: var(--fcm-yellow-deep);
	color: #1a1600;
}

.fcs-metody .fcs-btn2--dark,
.fcs-metoda .fcs-btn2--dark {
	background: #141418;
	color: #fff;
}

.fcs-metody .fcs-btn2--dark:hover,
.fcs-metody .fcs-btn2--dark:focus-visible,
.fcs-metoda .fcs-btn2--dark:hover,
.fcs-metoda .fcs-btn2--dark:focus-visible {
	background: var(--fcm-magenta);
	color: #fff;
	outline: none;
}

.fcs-metody .fcs-btn2--dark:active,
.fcs-metoda .fcs-btn2--dark:active {
	background: var(--fcm-magenta-d);
	color: #fff;
}

.fcs-metody .fcs-btn2--onyellow,
.fcs-metoda .fcs-btn2--onyellow {
	background: #fff;
	color: #1a1600;
	border-color: #fff;
}

.fcs-metody .fcs-btn2--onyellow:hover,
.fcs-metody .fcs-btn2--onyellow:focus-visible,
.fcs-metoda .fcs-btn2--onyellow:hover,
.fcs-metoda .fcs-btn2--onyellow:focus-visible {
	background: #141418;
	color: #fff;
	border-color: #141418;
	outline: none;
}

.fcs-metody .fcs-btn2--onyellow:active,
.fcs-metoda .fcs-btn2--onyellow:active {
	background: #1a1600;
	color: #fff;
	border-color: #1a1600;
}

.fcs-metody .fcs-btn2--ghost,
.fcs-metoda .fcs-btn2--ghost {
	background: transparent;
	color: #1a1600;
	border-color: #1a1600;
}

.fcs-metody .fcs-btn2--ghost:hover,
.fcs-metody .fcs-btn2--ghost:focus-visible,
.fcs-metoda .fcs-btn2--ghost:hover,
.fcs-metoda .fcs-btn2--ghost:focus-visible {
	background: #1a1600;
	color: var(--fcm-yellow);
	outline: none;
}

.fcs-metody .fcs-btn2--ghost:active,
.fcs-metoda .fcs-btn2--ghost:active {
	background: #1a1600;
	color: #fff;
}

/* Reveal on scroll */
.fcs-rv2 {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .7s cubic-bezier(.16, .8, .24, 1), transform .7s cubic-bezier(.16, .8, .24, 1);
}

.fcs-rv2.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.fcs-rv2 {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Placeholder obrazka (brak wgranego zdjecia) */
.fcs-imgph2 {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(420px 200px at 82% -8%, rgba(200, 0, 167, .28), transparent 60%),
		radial-gradient(360px 200px at 0% 120%, rgba(110, 193, 228, .2), transparent 60%),
		linear-gradient(180deg, #26262f, #17171c);
}

.fcs-imgph2 img,
.fcs-metody .fcs-cover,
.fcs-metoda .fcs-cover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Sekcje */
.fcs-metody .fcs-sec2,
.fcs-metoda .fcs-sec2 {
	padding: 96px 0;
}

.fcs-metody .fcs-sec2--white,
.fcs-metoda .fcs-sec2--white {
	background: #fff;
	color: var(--fcm-text);
}

.fcs-metody .fcs-shead2,
.fcs-metoda .fcs-shead2 {
	max-width: 720px;
	margin-bottom: 48px;
}

.fcs-metody .fcs-shead2--c,
.fcs-metoda .fcs-shead2--c {
	margin: 0 auto 56px;
	text-align: center;
}

.fcs-metody .fcs-shead2 h2,
.fcs-metoda .fcs-shead2 h2 {
	font-size: 46px;
	font-weight: 800;
	letter-spacing: -1.4px;
	text-transform: uppercase;
	line-height: 1;
	color: #fff;
}

.fcs-metody .fcs-shead2 p,
.fcs-metoda .fcs-shead2 p {
	font-size: 17px;
	margin-top: 16px;
	text-wrap: pretty;
	opacity: .75;
}

.fcs-metody .fcs-sec2--white .fcs-eyebrow2,
.fcs-metoda .fcs-sec2--white .fcs-eyebrow2 {
	color: var(--fcm-magenta);
}

.fcs-metody .fcs-sec2--white .fcs-shead2 h2,
.fcs-metoda .fcs-sec2--white .fcs-shead2 h2 {
	color: var(--fcm-ink);
}

.fcs-metody .fcs-sec2--white .fcs-shead2 p,
.fcs-metoda .fcs-sec2--white .fcs-shead2 p {
	opacity: 1;
	color: var(--fcm-soft);
}

.fcs-metody .fcs-shead2--c .fcs-divider,
.fcs-metoda .fcs-shead2--c .fcs-divider {
	width: 120px;
	height: 2px;
	background: var(--fcm-border);
	margin: 22px auto 0;
}

/* ============================================================
 *  LANDING (.fcs-metody)
 * ============================================================ */

/* Page hero */
.fcs-metody .fcs-phero {
	position: relative;
	background: #26262f;
	background-image:
		radial-gradient(1200px 460px at 80% -20%, rgba(200, 0, 167, .34), transparent 62%),
		radial-gradient(1000px 420px at 0% 120%, rgba(110, 193, 228, .22), transparent 60%),
		linear-gradient(180deg, #2c2c37, #1a1a21);
	padding: 72px 0 64px;
	border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.fcs-metody .fcs-phero > .fcs-wrap2 {
	position: relative;
	z-index: 1;
}

.fcs-metody .fcs-crumb {
	font-family: var(--fcm-head);
	font-weight: 600;
	font-size: 13px;
	color: #8a8a92;
	margin-bottom: 20px;
	display: flex;
	gap: 9px;
	align-items: center;
	flex-wrap: wrap;
}

.fcs-metody .fcs-crumb a:hover {
	color: var(--fcm-yellow);
}

.fcs-metody .fcs-crumb span {
	color: #4a4a52;
}

.fcs-metody .fcs-phero h1 {
	font-family: var(--fcm-head);
	font-weight: 800;
	font-size: 60px;
	line-height: 1;
	letter-spacing: -1.6px;
	text-transform: uppercase;
	color: #fff;
}

.fcs-metody .fcs-phero h1 em {
	color: var(--fcm-yellow);
	font-style: normal;
}

.fcs-metody .fcs-phero p {
	font-size: 17.5px;
	color: #a6a6b0;
	margin-top: 22px;
	max-width: 640px;
	line-height: 1.65;
	text-wrap: pretty;
}

/* Konfigurator */
.fcs-metody .fcs-cfg {
	background: #101014;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 24px;
	padding: 38px 36px;
	margin-bottom: 44px;
}

.fcs-metody .fcs-cfg__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 30px;
}

.fcs-metody .fcs-cfg__head h3 {
	font-family: var(--fcm-head);
	font-weight: 800;
	font-size: 24px;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: -.4px;
}

.fcs-metody .fcs-cfg__head span {
	font-size: 14px;
	color: #8a8a92;
}

.fcs-metody .fcs-cfg__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

.fcs-metody .fcs-q h4 {
	font-family: var(--fcm-head);
	font-weight: 700;
	font-size: 16px;
	color: #fff;
	margin-bottom: 15px;
	display: flex;
	gap: 10px;
	align-items: baseline;
}

.fcs-metody .fcs-q h4 i {
	font-family: var(--fcm-head);
	font-weight: 800;
	color: var(--fcm-magenta);
	font-size: 14px;
	font-style: normal;
	flex: none;
}

.fcs-metody .fcs-qopts {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fcs-metody .fcs-qopt {
	text-align: left;
	background: #1c1c22;
	border: 1.5px solid rgba(255, 255, 255, .1);
	color: #d4d4dc;
	border-radius: 12px;
	padding: 13px 16px;
	font-family: var(--fcm-head);
	font-weight: 600;
	font-size: 13.8px;
	transition: .15s;
	cursor: pointer;
}

.fcs-metody .fcs-qopt:hover,
.fcs-metody .fcs-qopt:focus-visible {
	border-color: rgba(255, 255, 255, .4);
	color: #fff;
	outline: none;
}

.fcs-metody .fcs-qopt.is-on {
	background: rgba(200, 0, 167, .16);
	border-color: var(--fcm-magenta);
	color: #fff;
}

.fcs-metody .fcs-qopt.is-on:active,
.fcs-metody .fcs-qopt:active {
	transform: translateY(1px);
}

.fcs-metody .fcs-cfg__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 30px;
	padding-top: 26px;
	border-top: 1px solid rgba(255, 255, 255, .08);
}

.fcs-metody .fcs-cfg__res {
	font-family: var(--fcm-head);
	font-weight: 700;
	font-size: 15.5px;
	color: #e8e8ea;
}

.fcs-metody .fcs-cfg__res b {
	color: var(--fcm-yellow);
}

.fcs-metody .fcs-cfg__reset {
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, .25);
	color: #d4d4dc;
	border-radius: 10px;
	padding: 11px 20px;
	font-family: var(--fcm-head);
	font-weight: 700;
	font-size: 13.5px;
	transition: .15s;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.fcs-metody .fcs-cfg__reset svg {
	flex: none;
}

.fcs-metody .fcs-cfg__reset:hover,
.fcs-metody .fcs-cfg__reset:focus-visible {
	border-color: var(--fcm-yellow);
	color: var(--fcm-yellow);
	outline: none;
}

.fcs-metody .fcs-cfg__reset:active {
	transform: translateY(1px);
}

.fcs-metody .fcs-cfg__reset[hidden] {
	display: none;
}

/* Siatka metod */
.fcs-metody .fcs-methodgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.fcs-metody .fcs-method {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	background: #1c1c22;
	border: 1px solid rgba(255, 255, 255, .08);
	min-height: 340px;
	display: flex;
	color: inherit;
	transition: opacity .3s, filter .3s, transform .18s, border-color .18s, box-shadow .18s;
}

.fcs-metody .fcs-method:hover,
.fcs-metody .fcs-method:focus-visible {
	border-color: var(--fcm-magenta);
	transform: translateY(-4px);
	color: inherit;
	outline: none;
}

.fcs-metody .fcs-method__im {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, #2a2a33, #17171c);
}

.fcs-metody .fcs-method__im img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fcs-metody .fcs-method__grad {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(180deg, rgba(20, 20, 24, .12) 28%, rgba(14, 14, 18, .95) 100%);
}

.fcs-metody .fcs-method__n {
	position: absolute;
	z-index: 3;
	right: 18px;
	top: 15px;
	font-family: var(--fcm-head);
	font-weight: 800;
	font-size: 14px;
	color: var(--fcm-yellow);
	opacity: .92;
}

.fcs-metody .fcs-method__badge {
	position: absolute;
	z-index: 4;
	left: 16px;
	top: 16px;
	background: var(--fcm-yellow);
	color: #1a1600;
	font-family: var(--fcm-head);
	font-weight: 800;
	font-size: 11px;
	letter-spacing: .4px;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 999px;
	box-shadow: 0 6px 18px -6px rgba(255, 222, 44, .6);
	opacity: 0;
	transition: opacity .2s;
}

.fcs-metody .fcs-method.is-hit .fcs-method__badge {
	opacity: 1;
}

.fcs-metody .fcs-method__c {
	position: relative;
	z-index: 3;
	margin-top: auto;
	padding: 24px;
}

.fcs-metody .fcs-method__c h3 {
	font-family: var(--fcm-head);
	font-weight: 800;
	font-size: 21px;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: -.3px;
}

.fcs-metody .fcs-method__c p {
	font-size: 13.7px;
	color: #c8c8ce;
	margin-top: 8px;
	line-height: 1.5;
}

.fcs-metody .fcs-method__go {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 16px;
	font-family: var(--fcm-head);
	font-weight: 700;
	font-size: 13.5px;
	color: var(--fcm-yellow);
}

.fcs-metody .fcs-method__go svg {
	flex: none;
	transition: transform .16s;
}

.fcs-metody .fcs-method:hover .fcs-method__go svg {
	transform: translateX(4px);
}

.fcs-metody .fcs-method.is-hit {
	border-color: var(--fcm-yellow);
	box-shadow: 0 0 0 2px rgba(255, 222, 44, .4), 0 26px 54px -26px rgba(255, 222, 44, .35);
}

.fcs-metody .fcs-method.is-dim {
	opacity: .34;
	filter: grayscale(.55);
}

.fcs-metody .fcs-method.is-dim:hover {
	opacity: .62;
}

/* Porownywarka */
.fcs-metody .fcs-cmpwrap {
	overflow-x: auto;
	border: 1px solid var(--fcm-border);
	border-radius: 18px;
}

.fcs-metody .fcs-cmp {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
	min-width: 820px;
}

.fcs-metody .fcs-cmp th,
.fcs-metody .fcs-cmp td {
	padding: 17px 20px;
	text-align: left;
	border-bottom: 1px solid var(--fcm-border);
	vertical-align: middle;
}

.fcs-metody .fcs-cmp thead th {
	font-family: var(--fcm-head);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .7px;
	text-transform: uppercase;
	color: var(--fcm-soft);
	background: var(--fcm-bg-soft);
	border-bottom: 2px solid var(--fcm-ink);
	white-space: nowrap;
}

.fcs-metody .fcs-cmp tbody tr:last-child td {
	border-bottom: 0;
}

.fcs-metody .fcs-cmp tbody tr {
	transition: .13s;
}

.fcs-metody .fcs-cmp tbody tr:hover {
	background: var(--fcm-bg-soft);
}

.fcs-metody .fcs-cmp__name {
	font-family: var(--fcm-head);
	font-weight: 800;
	color: var(--fcm-ink);
	font-size: 15.5px;
}

.fcs-metody .fcs-cmp__name small {
	display: block;
	font-family: var(--fcm-body);
	font-weight: 400;
	color: var(--fcm-soft);
	font-size: 12.5px;
	margin-top: 3px;
}

.fcs-metody .fcs-cmp td:first-child {
	color: var(--fcm-ink);
}

.fcs-metody .fcs-cmp tbody td {
	color: var(--fcm-text);
}

.fcs-metody .fcs-cmp__run {
	font-family: var(--fcm-head);
	font-weight: 700;
	font-size: 13px;
	color: var(--fcm-ink);
}

.fcs-metody .fcs-cmp__best {
	color: var(--fcm-text);
	font-size: 13.8px;
}

.fcs-metody .fcs-cmp__link {
	font-family: var(--fcm-head);
	font-weight: 700;
	font-size: 13px;
	color: var(--fcm-magenta);
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.fcs-metody .fcs-cmp__link:hover,
.fcs-metody .fcs-cmp__link:focus-visible {
	color: var(--fcm-magenta-d);
	outline: none;
}

/* Kropki skali 1–3 (wypełnione magenta, puste szare) */
.fcs-metody .fcs-cdots {
	display: inline-flex;
	gap: 5px;
}

.fcs-metody .fcs-cdot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #d9dce0;
	display: block;
	flex: none;
}

.fcs-metody .fcs-cdot.on {
	background: var(--fcm-magenta);
}

.fcs-metody .fcs-cmpnote {
	font-size: 12.5px;
	color: var(--fcm-soft);
	margin-top: 16px;
}

/* ============================================================
 *  WSPÓLNY BLOK CTA (.fcs-mcta) — landing + podstrona metody
 *  Wygląd 1:1 z projektem podstrony metody: żółte tło pełnej szerokości,
 *  treść wyśrodkowana, tytuł uppercase, 3 przyciski w rzędzie.
 * ============================================================ */
.fcs-metody .fcs-mcta,
.fcs-metoda .fcs-mcta {
	background: var(--fcm-yellow);
	color: #1a1600;
	padding: 80px 0;
}

.fcs-metody .fcs-mcta__in,
.fcs-metoda .fcs-mcta__in {
	text-align: center;
	max-width: 820px;
	margin: 0 auto;
}

.fcs-metody .fcs-mcta h2,
.fcs-metoda .fcs-mcta h2 {
	font-family: var(--fcm-head);
	font-weight: 800;
	font-size: 44px;
	text-transform: uppercase;
	letter-spacing: -1.3px;
	line-height: 1.02;
}

.fcs-metody .fcs-mcta p,
.fcs-metoda .fcs-mcta p {
	font-size: 17px;
	color: #3a3200;
	margin: 16px auto 0;
	max-width: 660px;
	line-height: 1.6;
}

.fcs-metody .fcs-mcta__act,
.fcs-metoda .fcs-mcta__act {
	display: flex;
	gap: 13px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 32px;
}

/* ============================================================
 *  PODSTRONA METODY (.fcs-metoda)
 * ============================================================ */

.fcs-metoda .fcs-crumb2 {
	font-family: var(--fcm-head);
	font-weight: 600;
	font-size: 13px;
	color: #c9c9d2;
	margin-bottom: 20px;
	display: flex;
	gap: 9px;
	align-items: center;
	flex-wrap: wrap;
}

.fcs-metoda .fcs-crumb2 a:hover {
	color: var(--fcm-yellow);
}

.fcs-metoda .fcs-crumb2 span {
	color: #7a7a84;
}

/* Hero metody */
/* Wysokosc i kotwiczenie 1:1 z .fcp-mhero (O nas / Kontakt) — hero ma wygladac jak TEN SAM element. */
.fcs-metoda .fcs-mhero {
	position: relative;
	min-height: 460px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: #141418;
}

.fcs-metoda .fcs-mhero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.fcs-metoda .fcs-mhero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fcs-metoda .fcs-mhero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(8, 8, 12, .82), rgba(8, 8, 12, .5) 52%, rgba(8, 8, 12, .18));
}

.fcs-metoda .fcs-mhero__in {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-bottom: 60px;
}

.fcs-metoda .fcs-mhero h1 {
	font-family: var(--fcm-head);
	font-weight: 800;
	font-size: 72px;
	line-height: 1;
	letter-spacing: -2px;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 4px 34px rgba(0, 0, 0, .45);
	max-width: 840px;
}

.fcs-metoda .fcs-mhero__bar {
	width: 92px;
	height: 5px;
	background: var(--fcm-yellow);
	border-radius: 3px;
	margin-top: 24px;
}

/* Intro */
.fcs-metoda .fcs-intro__grid {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 56px;
	align-items: center;
}

.fcs-metoda .fcs-intro h2 {
	font-family: var(--fcm-head);
	font-weight: 800;
	font-size: 46px;
	letter-spacing: -1.4px;
	color: #fff;
	line-height: 1.02;
}

.fcs-metoda .fcs-intro p {
	font-size: 16.5px;
	color: #a6a6b0;
	margin-top: 20px;
	line-height: 1.78;
	text-wrap: pretty;
}

.fcs-metoda .fcs-intro__media {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: 20px;
	overflow: hidden;
	background: #1c1c22;
	border: 1px solid rgba(255, 255, 255, .08);
}

/* Zalety */
.fcs-metoda .fcs-zgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.fcs-metoda .fcs-zcard {
	display: flex;
	gap: 18px;
	padding: 26px 24px;
	border-radius: 16px;
	border: 1px solid transparent;
	transition: transform .22s cubic-bezier(.16, .8, .24, 1), box-shadow .22s, border-color .22s, background .22s;
}

.fcs-metoda .fcs-zcard:hover {
	transform: translateY(-6px);
	background: #fff;
	border-color: var(--fcm-border);
	box-shadow: 0 26px 50px -28px rgba(200, 0, 167, .45);
}

.fcs-metoda .fcs-zicon {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	border: 2px solid var(--fcm-magenta);
	color: var(--fcm-magenta);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	transition: transform .3s cubic-bezier(.16, .8, .24, 1), background .22s, color .22s, box-shadow .22s;
}

.fcs-metoda .fcs-zcard:hover .fcs-zicon {
	background: var(--fcm-magenta);
	color: #fff;
	transform: rotate(-8deg) scale(1.08);
	box-shadow: 0 10px 24px -8px rgba(200, 0, 167, .55);
}

.fcs-metoda .fcs-zicon svg {
	flex: none;
	transition: transform .3s cubic-bezier(.16, .8, .24, 1);
}

.fcs-metoda .fcs-zcard:hover .fcs-zicon svg {
	transform: scale(1.06);
}

.fcs-metoda .fcs-zcard h3 {
	font-family: var(--fcm-head);
	font-weight: 800;
	font-size: 18px;
	text-transform: uppercase;
	color: var(--fcm-ink);
	letter-spacing: -.2px;
	line-height: 1.18;
	margin-bottom: 10px;
	transition: color .22s;
}

.fcs-metoda .fcs-zcard:hover h3 {
	color: var(--fcm-magenta);
}

.fcs-metoda .fcs-zcard p {
	font-size: 14.5px;
	color: var(--fcm-text);
	line-height: 1.62;
	text-wrap: pretty;
}

/* FAQ */
.fcs-metoda .fcs-faq__grid {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 52px;
	align-items: start;
}

/* Bez zdjęcia FAQ — jedna kolumna, lista pytań na pełną szerokość (brak pustego placeholdera). */
.fcs-metoda .fcs-faq__grid--full {
	grid-template-columns: 1fr;
}

.fcs-metoda .fcs-facc {
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.fcs-metoda .fcs-fitem {
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.fcs-metoda .fcs-fq {
	width: 100%;
	text-align: left;
	background: transparent;
	border: 0;
	color: #fff;
	font-family: var(--fcm-head);
	font-weight: 700;
	font-size: 16px;
	padding: 21px 2px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	transition: .14s;
	line-height: 1.35;
	cursor: pointer;
}

.fcs-metoda .fcs-fq:hover,
.fcs-metoda .fcs-fq:focus-visible {
	color: var(--fcm-yellow);
	outline: none;
}

.fcs-metoda .fcs-fq.is-open {
	color: var(--fcm-magenta);
}

.fcs-metoda .fcs-fq__sign {
	flex: none;
	font-size: 24px;
	font-weight: 600;
	line-height: 1;
	width: 22px;
	text-align: center;
}

.fcs-metoda .fcs-fa {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .3s cubic-bezier(.16, .8, .24, 1);
}

.fcs-metoda .fcs-fa.is-open {
	grid-template-rows: 1fr;
}

.fcs-metoda .fcs-fa > div {
	overflow: hidden;
}

.fcs-metoda .fcs-fa__in {
	font-size: 15px;
	color: #a6a6b0;
	line-height: 1.7;
	padding: 0 2px 22px;
	max-width: 640px;
	text-wrap: pretty;
}

.fcs-metoda .fcs-faq__media {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: 18px;
	overflow: hidden;
	background: #1c1c22;
	border: 1px solid rgba(255, 255, 255, .08);
}

/* Galeria (pary cross-fade) */
.fcs-metoda .fcs-pgrid {
	display: grid;
	/* 2 kafle w rzędzie (było 4 — za małe zdjęcia, korekta właściciela 2026-07-25). */
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
}

.fcs-metoda .fcs-ptile {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	background: var(--fcm-bg-soft);
	border: 1px solid var(--fcm-border);
	aspect-ratio: 1 / 1;
	transition: .18s;
}

.fcs-metoda .fcs-ptile:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px -22px rgba(0, 0, 0, .35);
}

.fcs-metoda .fcs-ptile__l {
	position: absolute;
	inset: 0;
	transition: opacity .45s cubic-bezier(.16, .8, .24, 1);
}

.fcs-metoda .fcs-ptile__l img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Warstwa-tło (kadrowana) — pokrywa kafel; size/position z inline (kadr z panelu). */
.fcs-metoda .fcs-ptile__bg {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
}

.fcs-metoda .fcs-ptile__l--back {
	opacity: 0;
}

.fcs-metoda .fcs-ptile:hover .fcs-ptile__l--back {
	opacity: 1;
}

.fcs-metoda .fcs-ptile__hint {
	position: absolute;
	z-index: 3;
	left: 12px;
	bottom: 12px;
	background: rgba(20, 20, 24, .82);
	color: #fff;
	font-family: var(--fcm-head);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .4px;
	text-transform: uppercase;
	padding: 6px 11px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	/* Badge widoczny od razu (zgłoszenie właściciela) — informuje, że kafel jest interaktywny; hover już tylko subtelnie podbija. */
	opacity: 1;
	transform: none;
	transition: .22s;
	pointer-events: none;
}

.fcs-metoda .fcs-ptile__hint svg {
	flex: none;
}

.fcs-metoda .fcs-ptile:hover .fcs-ptile__hint {
	opacity: 1;
	transform: none;
}

/* ============================================================
 *  RESPONSYWNOSC (media queries — sekcje full-bleed poza .fc2)
 * ============================================================ */
@media (max-width: 1080px) {
	.fcs-wrap2 {
		padding: 0 32px;
	}
	.fcs-metody .fcs-phero h1 {
		font-size: 44px;
	}
	.fcs-metody .fcs-cfg__grid,
	.fcs-metody .fcs-methodgrid {
		grid-template-columns: repeat(2, 1fr);
	}
	.fcs-metody .fcs-shead2 h2,
	.fcs-metody .fcs-mcta h2 {
		font-size: 34px;
	}
	.fcs-metoda .fcs-mhero h1 {
		font-size: 50px;
	}
	.fcs-metoda .fcs-intro__grid,
	.fcs-metoda .fcs-faq__grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.fcs-metoda .fcs-zgrid,
	.fcs-metoda .fcs-pgrid {
		grid-template-columns: repeat(2, 1fr);
	}
	.fcs-metoda .fcs-shead2 h2,
	.fcs-metoda .fcs-intro h2,
	.fcs-metoda .fcs-mcta h2 {
		font-size: 34px;
	}
}

@media (max-width: 680px) {
	.fcs-metody .fcs-phero {
		padding: 48px 0 44px;
	}
	.fcs-metody .fcs-phero h1 {
		font-size: 34px;
	}
	.fcs-metody .fcs-cfg {
		padding: 26px 20px;
	}
	.fcs-metody .fcs-cfg__grid,
	.fcs-metody .fcs-methodgrid {
		grid-template-columns: 1fr;
	}
	/* Po odpowiedziach konfiguratora dopasowane kafle na gorze listy (desktop bez zmian). */
	.fcs-metody .fcs-method.is-hit { order: -1; }
	.fcs-metody .fcs-method.is-dim { order: 1; }
	.fcs-metody .fcs-mcta h2,
	.fcs-metoda .fcs-mcta h2 {
		font-size: 30px;
	}
	.fcs-metoda .fcs-mhero {
		min-height: 300px; /* wspólnie z .fcp-mhero (O nas/Kontakt) — ten sam element */
	}
	.fcs-metoda .fcs-mhero h1 {
		font-size: 36px;
	}
	.fcs-metoda .fcs-mhero__scrim {
		background: linear-gradient(180deg, rgba(8, 8, 12, .4), rgba(8, 8, 12, .78));
	}
	.fcs-metoda .fcs-zgrid,
	.fcs-metoda .fcs-pgrid {
		grid-template-columns: 1fr;
	}

	/* Tabela porównania → karty per metoda (label + wartość w wierszach; kropki zostają). */
	.fcs-metody .fcs-cmpwrap {
		overflow-x: visible;
		border: 0;
		border-radius: 0;
	}
	.fcs-metody .fcs-cmp {
		min-width: 0;
	}
	.fcs-metody .fcs-cmp thead {
		display: none;
	}
	.fcs-metody .fcs-cmp,
	.fcs-metody .fcs-cmp tbody,
	.fcs-metody .fcs-cmp tr,
	.fcs-metody .fcs-cmp td {
		display: block;
		width: auto;
	}
	.fcs-metody .fcs-cmp tbody tr {
		border: 1px solid var(--fcm-border);
		border-radius: 14px;
		padding: 8px 16px 14px;
		margin-bottom: 14px;
		background: #fff;
	}
	.fcs-metody .fcs-cmp tbody tr:hover {
		background: #fff;
	}
	.fcs-metody .fcs-cmp td {
		border-bottom: 1px solid var(--fcm-border);
		padding: 11px 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		text-align: right;
	}
	.fcs-metody .fcs-cmp td:first-child {
		border-bottom: 2px solid var(--fcm-ink);
		text-align: left;
		padding-top: 14px;
	}
	.fcs-metody .fcs-cmp td:last-child {
		border-bottom: 0;
		justify-content: flex-start;
	}
	/* Etykieta wiersza z nagłówka (data-label). */
	.fcs-metody .fcs-cmp td[data-label]::before {
		content: attr(data-label);
		font-family: var(--fcm-head);
		font-weight: 700;
		font-size: 11px;
		letter-spacing: .5px;
		text-transform: uppercase;
		color: var(--fcm-soft);
		flex: none;
	}
}

/* Dlugie wyrazy (np. niemieckie zlozenia jak Geschaeftspartner) rozpychaly strone w poziomie na mobile.
   overflow-wrap dziedziczy na potomkow i lamie wyraz TYLKO gdy nie miesci sie w kolumnie - zero zmian w normalnym skladzie; "anywhere" (nie break-word) bo wplywa na min-content = dziala tez we flex/grid. */
main[class*="fcs-"]{overflow-wrap:anywhere}