/* Strony ofertowe FORWEB — landing promujący gotowe pakiety usług.
   Paleta marki: navy #202040, cyan #40C0F0. Font Quicksand (z fallbackiem). */

.fws-offer {
	--of-navy: #202040;
	--of-cyan: #40C0F0;
	--of-ink: #202040;
	--of-muted: #6b6b82;
	--of-line: #e3e6f0;
	--of-soft: #f5f7fc;
	--of-radius: 18px;
	--of-head-from: #dceffb;
	--of-head-to: #e9e4f7;
	--of-banner-from: #202040;
	--of-banner-to: #40C0F0;
	--of-pol-border: #40C0F0;
	--of-pol-head-from: #cdeafb;
	--of-pol-head-to: #ddd3f4;
	--of-badge-bg: #40C0F0;
	--of-badge-text: #202040;
	--of-c-name: #202040;
	--of-c-desc: #6b6b82;
	--of-c-price: #202040;
	--of-border-w: 2px;
	--of-tile-w: 380px;
	--of-tile-gap: 22px;
	--of-fs-name: 22px;
	--of-fs-price: 40px;
	--of-fs-kicker: 15px;
	--of-fw-kicker: 900;
	--of-fw-name: 800;
	--of-fw-desc: 400;
	--of-fw-price: 800;
	font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--of-ink);
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 16px;
	line-height: 1.55;
}

.fws-offer *, .fws-offer *::before, .fws-offer *::after { box-sizing: border-box; }
.fws-of-svg { width: 100%; height: 100%; display: block; }

/* ---------- Banner ---------- */
.fws-of-hero {
	position: relative;
	border-radius: var(--of-radius);
	overflow: hidden;
	margin: 8px 0 36px;
	padding: 30px 38px;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 150px;
	background:
		radial-gradient(115% 130% at 100% 30%, rgba(64,192,240,.42) 0%, rgba(64,192,240,0) 58%),
		linear-gradient(135deg, var(--of-banner-from) 0%, var(--of-banner-to) 100%);
}
.fws-of-hero-inner { position: relative; flex: 0 1 auto; min-width: 0; max-width: 640px; margin-right: auto; z-index: 2; }

/* Przycisk „Dowiedz się więcej" w bannerze */
.fws-of-hero-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	background: var(--of-cyan);
	color: var(--of-navy);
	font-weight: 800;
	font-size: 14px;
	text-decoration: none;
	padding: 11px 22px;
	border-radius: 11px;
	transition: transform .15s ease, box-shadow .15s ease;
	box-shadow: 0 6px 18px rgba(64,192,240,.28);
}
.fws-of-hero-cta:hover { transform: translateY(-1px); box-shadow: 0 9px 24px rgba(64,192,240,.38); color: var(--of-navy); }
.fws-of-hero-cta-arr { transition: transform .15s ease; }
.fws-of-hero-cta:hover .fws-of-hero-cta-arr { transform: translateX(3px); }

/* Grafika: stos kart usług 3D po prawej */
.fws-of-hero-art {
	position: relative;
	flex-shrink: 0;
	width: 150px;
	height: 130px;
	margin-left: auto;
	z-index: 2;
}
.fws-of-art-card {
	position: absolute;
	width: 90px;
	height: 90px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.fws-of-art-card .fws-of-svg, .fws-of-art-card svg { width: 46%; height: 46%; }
.fws-of-art-back {
	right: 18px; top: 4px;
	background: rgba(255,255,255,.06);
	border: 1.5px solid rgba(64,192,240,.32);
	transform: rotate(-9deg);
	color: #9fe0fa;
}
.fws-of-art-mid {
	right: 6px; top: 20px;
	background: rgba(64,192,240,.14);
	border: 1.5px solid rgba(64,192,240,.5);
	transform: rotate(5deg);
	color: #bfeafb;
}
.fws-of-art-main {
	right: 30px; top: 34px;
	background: rgba(64,192,240,.22);
	border: 2px solid var(--of-cyan);
	color: #fff;
}
/* Pojedyncza karta (net / tv) — wyśrodkowana, lekki obrót */
.fws-of-hero-art-1 { width: 116px; }
.fws-of-hero-art-1 .fws-of-art-main { right: 16px; top: 18px; width: 96px; height: 96px; }
.fws-of-hero-art-1 .fws-of-art-main .fws-of-svg, .fws-of-hero-art-1 .fws-of-art-main svg { width: 50%; height: 50%; }
.fws-of-pill {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: rgba(64,192,240,.15);
	border: 1px solid rgba(64,192,240,.4);
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 16px;
}
.fws-of-badge {
	display: inline-block;
	background: var(--of-cyan);
	color: var(--of-navy);
	font-weight: 800;
	font-size: 10.5px;
	letter-spacing: .5px;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 999px;
}
.fws-of-kicker {
	font-size: var(--of-fs-kicker) !important;
	font-weight: var(--of-fw-kicker);
	color: #9fe0fa;
	letter-spacing: .6px;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	line-height: 1;
}
.fws-of-kicker-ic {
	width: 1.1em;
	height: 1.1em;
	display: inline-flex;
	color: #9fe0fa;
}
.fws-of-title {
	font-size: 32px;
	line-height: 1.12;
	font-weight: 800;
	margin: 0 0 12px;
	color: #fff;
	max-width: 640px;
}
.fws-of-lead {
	font-size: 15.5px;
	line-height: 1.55;
	color: rgba(255,255,255,.88);
	margin: 0;
	max-width: 600px;
}

/* ---------- Kafle ---------- */
.fws-of-tiles {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--of-tile-gap);
	margin: 0 auto 44px;
	align-items: stretch;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 22px 4px 16px;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	width: fit-content;
	max-width: 100%;
}
/* Gdy kafli jest dużo i nie mieszczą się — przewijaj w poziomie, nie zawijaj.
   width:fit-content + margin auto centruje pasek, gdy się mieści; przy nadmiarze
   przewija się bez obcinania pierwszego kafla. */
.fws-of-tiles > .fws-of-tile {
	flex: 0 0 var(--of-tile-w);
	width: var(--of-tile-w);
	scroll-snap-align: center;
}
/* Pasek przewijania subtelny */
.fws-of-tiles::-webkit-scrollbar { height: 8px; }
.fws-of-tiles::-webkit-scrollbar-track { background: var(--of-soft); border-radius: 999px; }
.fws-of-tiles::-webkit-scrollbar-thumb { background: #c3ccdd; border-radius: 999px; }
.fws-of-tiles::-webkit-scrollbar-thumb:hover { background: #a9b5cc; }

/* Karuzela kafli: wrapper z uchwytami nawigacji + sygnał, że można przewijać */
.fws-of-tiles-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 44px;
}
.fws-of-tiles-wrap .fws-of-tiles { margin-bottom: 0; }
.fws-of-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: #fff;
	color: var(--of-navy);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(32,32,64,.22);
	transition: background .15s ease, transform .15s ease;
}
.fws-of-nav:hover { background: var(--of-cyan); color: var(--of-navy); }
.fws-of-nav:active { transform: translateY(-50%) scale(.94); }
.fws-of-nav[hidden] { display: none; }
.fws-of-nav-prev { left: 2px; }
.fws-of-nav-next { right: 2px; }
/* Delikatne wygaszenie na krawędziach jako podpowiedź o przewijaniu */
.fws-of-tiles-wrap.has-overflow::after,
.fws-of-tiles-wrap.has-overflow::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 16px;
	width: 48px;
	pointer-events: none;
	z-index: 3;
}
.fws-of-tiles-wrap.has-overflow.can-prev::before {
	left: 0;
	background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,0));
}
.fws-of-tiles-wrap.has-overflow.can-next::after {
	right: 0;
	background: linear-gradient(270deg, rgba(255,255,255,.95), rgba(255,255,255,0));
}
.fws-of-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-style: solid !important;
	border-width: var(--of-border-w) !important;
	border-color: var(--of-line) !important;
	border-radius: var(--of-radius) !important;
	padding: 26px 24px 24px;
	transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease, border-color .2s ease;
}
.fws-of-tile:hover {
	transform: translateY(-5px);
	box-shadow: 0 18px 44px rgba(32,32,64,.12);
	border-color: #c7d6ea;
}
.fws-of-tile.is-polecany {
	border-color: var(--of-pol-border);
	box-shadow: 0 12px 36px rgba(64,192,240,.18);
}
.fws-of-tile-badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--of-badge-bg);
	color: var(--of-badge-text);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: .3px;
	padding: 5px 14px;
	border-radius: 999px;
	box-shadow: 0 4px 12px rgba(32,32,64,.18);
	white-space: nowrap;
}
/* Nagłówek kafla: pas z delikatnym gradientem (cyan→fiolet), obejmuje nazwę+opis.
   Ujemne marginesy wyrównują pas do krawędzi kafla pod zaokrąglonymi rogami;
   górne rogi zaokrąglone (radius kafla minus grubość ramki). */
.fws-of-tile-head {
	margin: -26px -24px 18px;
	padding: 24px 20px 18px;
	background: linear-gradient(135deg, var(--of-head-from) 0%, var(--of-head-to) 100%);
	border-radius: 16px 16px 0 0;
	min-height: 118px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.fws-of-tile-name {
	font-size: var(--of-fs-name) !important;
	font-weight: var(--of-fw-name) !important;
	margin: 0;
	color: var(--of-c-name) !important;
	text-align: center !important;
}
.fws-of-tile-desc {
	font-size: 14px;
	font-weight: var(--of-fw-desc) !important;
	line-height: 1.4;
	color: var(--of-c-desc) !important;
	margin: 6px 0 0;
	text-align: center !important;
	min-height: 2.8em;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Polecany kafel: mocniejszy akcent w nagłówku */
.fws-of-tile.is-polecany .fws-of-tile-head {
	background: linear-gradient(135deg, var(--of-pol-head-from) 0%, var(--of-pol-head-to) 100%);
}
.fws-of-tile-items {
	list-style: none;
	padding: 0;
	margin: 0 0 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.fws-of-tile-items li {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 15px;
	font-weight: 600;
}
.fws-of-li-body { display: flex; flex-direction: column; gap: 6px; }
.fws-of-li-speeds { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.fws-of-speed {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.fws-of-speed-ic {
	width: 20px;
	height: 20px;
	color: var(--of-cyan);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 20px;
}
.fws-of-speed-ic svg { width: 20px; height: 20px; }
.fws-of-speed-body { display: flex; flex-direction: column; line-height: 1.05; }
.fws-of-speed-val {
	font-size: 18px !important;
	font-weight: 800 !important;
	color: var(--of-navy) !important;
}
.fws-of-speed-lbl {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: var(--of-muted);
	margin-top: 2px;
}
.fws-of-li-ic {
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: var(--of-soft);
	color: var(--of-navy);
	padding: 7px;
}
.fws-of-tile-old {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 24px;
	padding-top: 8px;
}
.fws-of-old-amount {
	font-size: 16px;
	font-weight: 700;
	color: var(--of-muted);
	text-decoration: line-through;
	text-decoration-color: #d05656;
}
.fws-of-old-tag {
	font-size: 11px;
	font-weight: 800;
	color: #c0392b;
	background: #fdecec;
	padding: 3px 9px;
	border-radius: 999px;
	letter-spacing: .2px;
}
/* Blok ceny jest „kotwicą": margin-top:auto dociska go w dół tak, że cena
   stoi na równej wysokości we wszystkich kaflach obok siebie (siatka stretch).
   Górna część (nazwa+opis+pozycje) wypełnia przestrzeń nad ceną.
   Stała wysokość slotu starej ceny utrzymuje równe położenie samej ceny. */
/* Elastyczny odstęp pozycje→cena z górnym ograniczeniem.
   flex:1 dopycha cenę dla wyrównania między kaflami, max-height ucina
   nadmiar, więc przy mało treści cena nie spada za nisko (zostaje wyżej). */
.fws-of-tile-spacer { flex: 1 1 auto; min-height: 8px; max-height: 28px; }
.fws-of-price-block { padding-top: 8px; }
.fws-of-price-block .fws-of-tile-old { margin-top: 0; }
.fws-of-tile-old + .fws-of-tile-price { margin-top: 2px; }
.fws-of-tile-price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 6px;
	padding-top: 8px;
}
.fws-of-amount {
	font-size: var(--of-fs-price) !important;
	font-weight: var(--of-fw-price) !important;
	color: var(--of-c-price) !important;
	line-height: 1;
}
.fws-of-cur { font-size: 17px; font-weight: 700; color: var(--of-navy); }
.fws-of-mc { font-size: 13px; color: var(--of-muted); }
.fws-of-okres { font-size: 12.5px; color: var(--of-muted); margin: 4px 0 16px; text-align: center !important; }

.fws-of-tile-feat {
	list-style: none;
	padding: 16px 0 0;
	margin: 4px 0 18px;
	border-top: 1px solid var(--of-line);
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.fws-of-tile-feat li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	color: #34344e;
}
.fws-of-feat-ic {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	color: var(--of-cyan);
}

.fws-of-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 4px;
	padding: 14px 20px;
	border-radius: 12px;
	background: var(--of-navy);
	color: #fff;
	font-weight: 800;
	font-size: 16px;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .2s ease, background .15s ease;
}
.fws-of-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(32,32,64,.22);
	background: #2a2a5c;
}
.fws-of-tile.is-polecany .fws-of-cta {
	background: linear-gradient(135deg, var(--of-cyan), #2bb0e6);
	color: var(--of-navy);
}
.fws-of-tile.is-polecany .fws-of-cta:hover {
	background: linear-gradient(135deg, #4fc8f5, #2bb0e6);
}
.fws-of-arrow { font-size: 19px; line-height: 1; }

/* ---------- Globalna lista funkcji ---------- */
.fws-of-features {
	background: var(--of-soft);
	border-radius: var(--of-radius);
	padding: 30px 28px;
	margin-bottom: 40px;
}
.fws-of-features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 18px;
}
.fws-of-feature {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	font-weight: 700;
	color: var(--of-navy);
}
.fws-of-feature-ic {
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: #fff;
	color: var(--of-cyan);
	padding: 9px;
	box-shadow: 0 3px 10px rgba(32,32,64,.08);
}

/* ---------- Sprzęt (zakładki) ---------- */
.fws-of-sprzet-sec { margin-bottom: 44px; }
.fws-of-sprzet-h {
	font-size: 26px;
	font-weight: 800;
	text-align: center;
	margin: 0 0 8px;
	color: var(--of-navy);
}
.fws-of-sprzet-intro {
	font-size: 15px;
	color: var(--of-muted);
	text-align: center;
	max-width: 640px;
	margin: 0 auto 26px;
}

.fws-of-dev-stage { margin-bottom: 18px; }
.fws-of-dev-panel { display: none; }
.fws-of-dev-panel.is-active {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 28px;
	align-items: center;
	border: 1.5px solid var(--of-line);
	border-radius: var(--of-radius);
	padding: 28px;
	background: #fff;
}
.fws-of-dev-img {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--of-soft);
	border-radius: 14px;
	padding: 24px;
	min-height: 220px;
}
.fws-of-dev-img img {
	max-width: 100%;
	max-height: 260px;
	object-fit: contain;
	display: block;
}
.fws-of-dev-noimg { width: 84px; height: 84px; color: #b9c0d4; display: inline-block; }
.fws-of-dev-name { font-size: 22px; font-weight: 800; margin: 0 0 10px; color: var(--of-navy); }
.fws-of-dev-desc { font-size: 15px; color: var(--of-muted); margin: 0 0 16px; }
.fws-of-dev-cechy { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.fws-of-dev-cechy li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: #34344e; }
.fws-of-dev-ic { flex: 0 0 18px; width: 18px; height: 18px; color: var(--of-cyan); }

/* Karty-zakładki pod spodem */
.fws-of-dev-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}
.fws-of-dev-tab {
	display: flex;
	align-items: center;
	gap: 12px;
	border: 1.5px solid var(--of-line);
	border-radius: 14px;
	background: #fff;
	padding: 10px 16px 10px 10px;
	cursor: pointer;
	font-family: inherit;
	font-weight: 700;
	font-size: 14px;
	color: var(--of-navy);
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.fws-of-dev-tab:hover { border-color: #c7d6ea; transform: translateY(-2px); }
.fws-of-dev-tab.is-active {
	border-color: var(--of-cyan);
	box-shadow: 0 6px 18px rgba(64,192,240,.18);
}
.fws-of-dev-tab-thumb {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 10px;
	background: var(--of-soft);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.fws-of-dev-tab-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.fws-of-dev-tab-noimg { color: #b9c0d4; padding: 11px; }
.fws-of-dev-tab-name { white-space: nowrap; }

/* ---------- Dlaczego my ---------- */
.fws-of-why { margin-bottom: 48px; }
.fws-of-why-title {
	font-size: 26px;
	font-weight: 800;
	text-align: center;
	margin: 0 0 26px;
	color: var(--of-navy);
}
.fws-of-why-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 22px;
}
.fws-of-why-item {
	text-align: center;
	padding: 8px 12px;
}
.fws-of-why-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--of-soft);
	color: var(--of-cyan);
	padding: 12px;
	margin-bottom: 14px;
}
.fws-of-why-item h4 { font-size: 17px; font-weight: 800; margin: 0 0 8px; color: var(--of-navy); }
.fws-of-why-item p { font-size: 14px; color: var(--of-muted); margin: 0; }

/* ---------- Pasek zaufania ---------- */
.fws-of-trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	margin: -8px 0 36px;
	padding: 20px 24px;
	background: var(--of-soft);
	border-radius: var(--of-radius);
}
.fws-of-trust-item { display: flex; align-items: center; gap: 12px; }
.fws-of-trust-ic {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 11px;
	background: #fff;
	color: var(--of-cyan);
	padding: 9px;
	box-shadow: 0 3px 10px rgba(32,32,64,.08);
}
.fws-of-trust-txt { display: flex; flex-direction: column; line-height: 1.25; }
.fws-of-trust-big { font-size: 15px; font-weight: 800; color: var(--of-navy); }
.fws-of-trust-small { font-size: 12.5px; color: var(--of-muted); }

/* ---------- FAQ ---------- */
.fws-of-faq { margin-bottom: 48px; }
.fws-of-faq-title {
	font-size: 26px;
	font-weight: 800;
	text-align: center;
	margin: 0 0 24px;
	color: var(--of-navy);
}
.fws-of-faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.fws-of-faq-item {
	border: 1.5px solid var(--of-line);
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
}
.fws-of-faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	cursor: pointer;
	list-style: none;
	padding: 18px 22px;
	font-size: 16px;
	font-weight: 700;
	color: var(--of-navy);
}
.fws-of-faq-q::-webkit-details-marker { display: none; }
.fws-of-faq-chev { flex: 0 0 20px; width: 20px; height: 20px; color: var(--of-cyan); transition: transform .2s ease; }
.fws-of-faq-item[open] .fws-of-faq-chev { transform: rotate(180deg); }
.fws-of-faq-a {
	padding: 0 22px 20px;
	font-size: 15px;
	color: var(--of-muted);
	line-height: 1.6;
}
.fws-of-faq-item[open] .fws-of-faq-q { border-bottom: 1px solid var(--of-line); margin-bottom: 14px; }

/* ---------- Poradniki / artykuły ---------- */
.fws-of-articles { margin-bottom: 48px; }
.fws-of-articles-title {
	font-size: 26px;
	font-weight: 800;
	text-align: center;
	margin: 0 0 24px;
	color: var(--of-navy);
}
.fws-of-articles-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
	max-width: 1000px;
	margin: 0 auto;
}
.fws-of-article-card {
	display: flex;
	flex-direction: column;
	text-align: left;
	padding: 0;
	border: 1.5px solid var(--of-line);
	border-radius: var(--of-radius);
	background: #fff;
	cursor: pointer;
	overflow: hidden;
	font-family: inherit;
	transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease, border-color .2s ease;
}
.fws-of-article-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(32,32,64,.12);
	border-color: #c7d6ea;
}
.fws-of-article-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--of-soft); }
.fws-of-article-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fws-of-article-title {
	font-size: 16px;
	font-weight: 800;
	color: var(--of-navy);
	padding: 14px 16px 4px;
	line-height: 1.3;
}
.fws-of-article-more {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	font-weight: 700;
	color: var(--of-cyan);
	padding: 0 16px 16px;
	margin-top: auto;
}
.fws-of-article-more svg { width: 15px; height: 15px; transform: rotate(-90deg); }

/* ---------- Strona pojedynczego poradnika (/poradnik/{slug}/) ---------- */
.fws-guide-wrap {
	font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--of-navy);
	padding: 32px 20px 56px;
}
.fws-guide {
	max-width: 760px;
	margin: 0 auto;
}
.fws-guide-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 700;
	color: var(--of-muted);
	text-decoration: none;
	margin-bottom: 20px;
	transition: color .15s ease;
}
.fws-guide-back:hover { color: var(--of-cyan); }
.fws-guide-back-ic { width: 18px; height: 18px; transform: rotate(90deg); }
.fws-guide-hero {
	border-radius: 18px;
	overflow: hidden;
	margin-bottom: 26px;
	box-shadow: 0 14px 40px rgba(32,32,64,.14);
}
.fws-guide-hero img {
	display: block;
	width: 100%;
	max-height: 380px;
	object-fit: cover;
}
.fws-guide-title {
	font-size: 32px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--of-navy);
	margin: 0 0 22px;
}
.fws-guide-body {
	font-size: 17px;
	line-height: 1.75;
	color: #34344e;
}
.fws-guide-body h2 {
	font-size: 22px;
	font-weight: 800;
	color: var(--of-navy);
	margin: 30px 0 10px;
	line-height: 1.25;
}
.fws-guide-body p { margin: 0 0 16px; }
.fws-guide-body p:last-child { margin-bottom: 0; }
.fws-guide-body strong { color: var(--of-navy); }
.fws-guide-cta {
	margin-top: 40px;
	padding: 26px 28px;
	border-radius: 18px;
	background: linear-gradient(135deg, var(--of-navy) 0%, #1d3a6e 100%);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}
.fws-guide-cta-text { display: flex; flex-direction: column; gap: 4px; }
.fws-guide-cta-text strong { font-size: 18px; font-weight: 800; }
.fws-guide-cta-text span { font-size: 14px; color: rgba(255,255,255,.85); }
.fws-guide-cta-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 26px;
	border-radius: 12px;
	background: var(--of-cyan);
	color: var(--of-navy);
	font-weight: 800;
	font-size: 15px;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .2s ease;
}
.fws-guide-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(64,192,240,.35); }

@media (max-width: 720px) {
	.fws-of-hero { padding: 30px 24px; gap: 0; }
	.fws-of-hero-art { display: none; }
	.fws-of-title { font-size: 28px; }
	.fws-of-lead { font-size: 15px; }
	.fws-of-amount { font-size: 34px; }
	.fws-of-dev-panel.is-active { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
	.fws-of-dev-tab-name { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
	.fws-of-tile, .fws-of-cta { transition: none; }
	.fws-of-tile:hover, .fws-of-cta:hover { transform: none; }
}