@media all {

}
@media (max-width: 1200px) {

}
@media (max-width: 1000px) {
	
}
@media (max-width: 700px) {

}

/* === [BLOCK: hero-dark] START === */
/* Hero ciemny granat z neonowym akcentem + radial glows */
.bg-ok-ink {
	background:
		radial-gradient(900px 500px at 12% 10%, rgba(94,255,182,.10), transparent 60%),
		radial-gradient(700px 400px at 90% 0%, rgba(110,92,255,.18), transparent 65%),
		linear-gradient(180deg, #0A1330 0%, #0E1740 100%) !important;
	color:#F1F5F9 !important;
}
.bg-ok-ink h1, .bg-ok-ink h2, .bg-ok-ink h3, .bg-ok-ink h4, .bg-ok-ink p, .bg-ok-ink li { color:#F1F5F9; }
.bg-ok-ink em { color:var(--ok-cta); font-style:normal; }
.bg-ok-ink strong { color:#fff; }
.bg-ok-ink .eyebrow { color:var(--ok-cta); }
.bg-ok-ink .eyebrow::before { background:var(--ok-cta); }
.bg-ok-ink .pill { background:rgba(94,255,182,.12); color:var(--ok-cta); border:1px solid rgba(94,255,182,.3); }

/* Plakietka „nowość" / banner u góry hero */
.hero-banner {
	display:inline-flex; align-items:center; gap:.5rem;
	background:rgba(255,181,71,.12); color:#FFD79A; border:1px solid rgba(255,181,71,.35);
	padding:.4rem .85rem; border-radius:999px; font-size:.82rem; font-weight:600;
	margin-bottom:1.25rem;
}
.hero-banner::before { content:"●"; color:#FFB547; font-size:.6rem; }
/* === [BLOCK: hero-dark] END === */
/* === [BLOCK: hero-light] START === */
/* Hero jasny — niebieski uspokajający, e-PIT vibe, dla landingów konsumenckich/B2E */

.bg-ok-sky {
	background:
		radial-gradient(900px 500px at 12% 0%, rgba(37,99,235,.08), transparent 60%),
		radial-gradient(700px 400px at 90% 100%, rgba(16,185,129,.07), transparent 65%),
		linear-gradient(180deg, #F8FAFC 0%, #EFF6FF 100%) !important;
	color: #0F172A !important;
}
.bg-ok-sky h1, .bg-ok-sky h2, .bg-ok-sky h3, .bg-ok-sky h4 { color: #0F172A; }
.bg-ok-sky p, .bg-ok-sky li { color: #334155; }
.bg-ok-sky em { color: #2563EB; font-style: normal; font-weight: 700; }
.bg-ok-sky strong { color: #0F172A; }
.bg-ok-sky a:not(.btn):not(.pricing-cta) { color: #2563EB; text-decoration: none; border-bottom: 1px solid rgba(37,99,235,.3); }
.bg-ok-sky a:not(.btn):not(.pricing-cta):hover { border-bottom-color: #2563EB; }

/* Hero-light specyficzne klasy */
.bg-ok-sky .eyebrow {
	display: inline-block;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #2563EB;
	margin-bottom: 1.25rem;
	padding: .35rem .75rem;
	background: rgba(37,99,235,.08);
	border-radius: 999px;
}

.bg-ok-sky h1 {
	font-size: clamp(2rem, 4.5vw, 3.5rem) !important;
	font-weight: 700 !important;
	line-height: 1.15 !important;
	letter-spacing: -.02em;
	margin: 0 0 1.25rem !important;
}

.bg-ok-sky .hero-subtitle {
	font-size: clamp(1rem, 1.4vw, 1.2rem) !important;
	line-height: 1.55 !important;
	color: #475569;
	max-width: 62ch;
	margin: 0 0 2rem !important;
}

/* CTA hero-light — primary (niebieski) + outline (jasny) */
.bg-ok-sky .hero-cta-row {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}
.bg-ok-sky .btn-sky-primary,
.bg-ok-sky a.btn-sky-primary {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: #2563EB;
	color: #fff !important;
	border: 0;
	padding: .9rem 1.6rem;
	border-radius: 12px;
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none !important;
	transition: background .2s, transform .15s, box-shadow .2s;
	box-shadow: 0 8px 24px -8px rgba(37,99,235,.5);
}
.bg-ok-sky .btn-sky-primary:hover {
	background: #1D4ED8;
	transform: translateY(-1px);
	box-shadow: 0 12px 32px -8px rgba(37,99,235,.6);
}
.bg-ok-sky .btn-sky-outline,
.bg-ok-sky a.btn-sky-outline {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: transparent;
	color: #0F172A !important;
	border: 1px solid #CBD5E1;
	padding: .9rem 1.6rem;
	border-radius: 12px;
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none !important;
	transition: background .2s, border-color .2s, transform .15s;
}
.bg-ok-sky .btn-sky-outline:hover {
	background: #fff;
	border-color: #94A3B8;
	transform: translateY(-1px);
}

.bg-ok-sky .hero-meta {
	font-size: .85rem;
	color: #64748B;
	margin-top: .5rem;
}

/* Mockup card po prawej */
.bg-ok-sky .hero-mockup {
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 32px 80px -32px rgba(15,23,42,.3);
	border: 1px solid rgba(37,99,235,.15);
	background: #fff;
	max-width: 100%;
	height: auto;
}
.bg-ok-sky .hero-mockup img {
	display: block;
	width: 100%;
	height: auto;
}

/* Trust badges pod CTA (np. "12 MB · darmowy okres próbny · Windows 10/11") */
.bg-ok-sky .hero-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1.5rem;
	font-size: .85rem;
	color: #64748B;
}
.bg-ok-sky .hero-trust span {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}
.bg-ok-sky .hero-trust span::before {
	content: "✓";
	color: #10B981;
	font-weight: 700;
}

@media (max-width: 768px) {
	.bg-ok-sky h1 {
		font-size: clamp(1.7rem, 7vw, 2.2rem) !important;
	}
	.bg-ok-sky .hero-cta-row .btn-sky-primary,
	.bg-ok-sky .hero-cta-row .btn-sky-outline {
		width: 100%;
		justify-content: center;
	}
}

/* === [BLOCK: hero-light] END === */
/* === [BLOCK: section-eyebrow] START === */
/* Mała etykieta nad H2 z paskiem — np. "Co to jest", "Porównanie", "FAQ" */
.eyebrow {
	display:inline-flex; align-items:center; gap:.55rem;
	font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
	color:var(--mark-dark); margin-bottom:.6rem;
}
.eyebrow::before {
	content:""; width:28px; height:2px; background:var(--mark); display:inline-block; border-radius:2px;
}
.bg-ok-ink .eyebrow, .bg-ok-ink-2 .eyebrow { color:var(--ok-cta); }
.bg-ok-ink .eyebrow::before, .bg-ok-ink-2 .eyebrow::before { background:var(--ok-cta); }
/* === [BLOCK: section-eyebrow] END === */
/* === [BLOCK: gradient-sections] START === */
.bg-ok-ink-2 {
	background:linear-gradient(135deg, #101A3D 0%, #1A2456 50%, #0F1A45 100%) !important;
	color:#F1F5F9 !important;
}
.bg-ok-ink-2 h1,.bg-ok-ink-2 h2,.bg-ok-ink-2 h3,.bg-ok-ink-2 h4,.bg-ok-ink-2 p,.bg-ok-ink-2 li{ color:#F1F5F9; }

.bg-ok-blue {
	background:linear-gradient(135deg, #1E40AF 0%, #2563EB 60%, #3B82F6 100%) !important;
	color:#F1F5F9 !important;
}
.bg-ok-blue h1,.bg-ok-blue h2,.bg-ok-blue h3,.bg-ok-blue h4,.bg-ok-blue p,.bg-ok-blue li{ color:#F1F5F9; }

.bg-ok-mint {
	background:linear-gradient(135deg, #064E3B 0%, #047857 60%, #059669 100%) !important;
	color:#ECFDF5 !important;
}
.bg-ok-mint h1,.bg-ok-mint h2,.bg-ok-mint h3,.bg-ok-mint h4,.bg-ok-mint p,.bg-ok-mint li{ color:#ECFDF5; }
/* === [BLOCK: gradient-sections] END === */
/* === [BLOCK: feature-cards] START === */
/* Karty feature — duże ikony emoji w kółku, biały kafelek z subtelną ramką */
.feature-card {
	background:#fff; border:1px solid #E5E9F2; border-radius:16px;
	padding:1.5rem !important;
	transition: transform .2s, box-shadow .2s, border-color .2s;
	height:100%;
}
.feature-card:hover { transform:translateY(-4px); box-shadow:0 18px 40px -16px rgba(15,23,42,.18); border-color:#D1D5DB; }
.feature-card .feat-ico {
	display:inline-flex; align-items:center; justify-content:center;
	width:52px; height:52px; border-radius:12px; font-size:1.6rem;
	background:linear-gradient(135deg, rgba(14,190,127,.12), rgba(110,92,255,.12));
	margin-bottom:1rem;
}
.feature-card h3 { font-size:1.1rem !important; margin:.25rem 0 .5rem !important; color:#0F172A; line-height:1.3; }
.feature-card p { font-size:.92rem; color:#475569; line-height:1.55; margin:0; }

/* Wariant karty z plakietką „Gratis" / „W cenie" */
.feature-card .feat-tag {
	display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
	background:rgba(14,190,127,.12); color:var(--mark-dark);
	padding:.3rem .55rem; border-radius:6px; margin-bottom:.7rem;
}
/* === [BLOCK: feature-cards] END === */
/* === [BLOCK: glass-card] START === */
/* Szklana karta — cookie-banner preview po prawej w hero, plus inne miejsca */
.glass {
	background:rgba(255,255,255,.06);
	border:1px solid rgba(255,255,255,.14);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-radius:18px;
	padding:1.5rem !important;
	box-shadow: 0 30px 80px -20px rgba(0,0,0,.55);
}
.glass.dark {
	background:rgba(10,19,48,.55);
}
.glass h3 { font-size:1.05rem !important; margin:.25rem 0 .75rem !important; }
.glass p { font-size:.92rem; opacity:.85; }
.glass .glass-actions { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem; }
.glass .glass-actions .gb {
	font-size:.82rem; font-weight:600; padding:.55rem .9rem; border-radius:10px;
	display:inline-block; cursor:default;
}
.glass .glass-actions .gb.primary { background:var(--ok-cta); color:var(--ok-cta-ink); }
.glass .glass-actions .gb.ghost { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.3); }
.glass .glass-actions .gb.muted { color:rgba(255,255,255,.6); }
.glass .glass-tags { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:1rem; padding-top:1rem; border-top:1px dashed rgba(255,255,255,.15); }
.glass .glass-tags span {
	font-size:.7rem; font-weight:600; letter-spacing:.05em;
	color:rgba(255,255,255,.7); background:rgba(255,255,255,.06);
	padding:.3rem .55rem; border-radius:6px;
}
/* === [BLOCK: glass-card] END === */
/* === [BLOCK: bullet-icon-list] START === */
/* Lista punktowana z ikoną w kółku po lewej (sekcja "tematy prawne", "consent mode") */
.icon-list { list-style:none !important; padding:0 !important; margin:1.25rem 0 !important; }
.icon-list li {
	display:flex; align-items:flex-start; gap:1rem;
	padding:.95rem 1.1rem; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
	border-radius:12px; margin-bottom:.65rem;
}
.bg-white .icon-list li, body:not(.dark_mode) .icon-list:not(.dark) li {
	background:#fff; border:1px solid #E5E9F2;
}
.icon-list li .il-ico {
	display:inline-flex; align-items:center; justify-content:center;
	width:36px; height:36px; border-radius:10px; font-size:1.1rem; flex-shrink:0;
	background:rgba(94,255,182,.15);
}
.bg-white .icon-list li .il-ico, body:not(.dark_mode) .icon-list:not(.dark) li .il-ico {
	background:linear-gradient(135deg, rgba(14,190,127,.15), rgba(110,92,255,.1));
}
.icon-list li .il-body { flex:1; line-height:1.5; }
.icon-list li .il-body h4 { margin:0 0 .25rem !important; font-size:1rem; }
.icon-list li .il-body p { margin:0; font-size:.92rem; opacity:.85; }
/* === [BLOCK: bullet-icon-list] END === */
/* === [BLOCK: checklist-grid] START === */
/* Siatka „GA4 events gratis" — small chips z check.
   Kontrast: tekst #FFF na ciemnym, mocniejszy background, mocniejsza ramka. */
.check-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:.6rem; margin:1.25rem 0; }
/* Domyślny ciemny — używany w sekcjach bg-ok-ink/bg-ok-ink-2 */
.bg-ok-ink .check-grid .ck, .bg-ok-ink-2 .check-grid .ck {
	background:rgba(94,255,182,.18); border:1.5px solid rgba(94,255,182,.5);
	color:#FFFFFF; font-weight:600;
}
.check-grid .ck {
	background:rgba(14,190,127,.1); border:1.5px solid rgba(14,190,127,.35);
	color:#0F172A; padding:.75rem 1rem; border-radius:10px; font-size:.92rem; font-weight:600;
	display:flex; align-items:center; gap:.6rem; line-height:1.3;
}
.check-grid .ck::before { content:"✓"; color:var(--ok-cta); font-weight:900; font-size:1.1em; flex-shrink:0; }
.bg-ok-ink .check-grid .ck::before, .bg-ok-ink-2 .check-grid .ck::before { color:var(--ok-cta); }
/* === [BLOCK: checklist-grid] END === */
/* === [BLOCK: pill-chips] START === */
/* Chipy / tagi — np. "RODO · Consent Mode v2 · GTM" */
.pills { display:flex; gap:.5rem; flex-wrap:wrap; margin:1rem 0; }
.pill {
	display:inline-flex; align-items:center; gap:.4rem;
	padding:.45rem .85rem; border-radius:999px;
	background:rgba(14,190,127,.1); color:var(--mark-dark);
	font-size:.82rem; font-weight:600; border:1px solid rgba(14,190,127,.25);
}
.pill.amber { background:rgba(255,181,71,.12); color:#B8730E; border-color:rgba(255,181,71,.3); }
.pill.violet { background:rgba(110,92,255,.12); color:var(--mark2-dark); border-color:rgba(110,92,255,.25); }
.pill.rose { background:rgba(255,107,107,.12); color:#C0392B; border-color:rgba(255,107,107,.25); }
/* === [BLOCK: pill-chips] END === */
/* === [BLOCK: pricing-table] START === */
/* Cennik z toggle miesiąc/rok, 2 karty (standard + featured), highlighted „Najpopularniejszy" */

.pricing-toggle {
	display: inline-flex;
	background: #F1F5F9;
	border-radius: 999px;
	padding: 4px;
	margin: 0 auto 2.5rem;
	gap: 4px;
}
.pricing-toggle button {
	background: transparent;
	border: 0;
	padding: .65rem 1.5rem;
	border-radius: 999px;
	font-size: .9rem !important;
	font-weight: 500;
	color: #64748B;
	cursor: pointer;
	transition: background .2s, color .2s;
}
.pricing-toggle button.active {
	background: #fff;
	color: #0F172A;
	box-shadow: 0 1px 3px rgba(15,23,42,.08);
}
.pricing-toggle .save-badge {
	display: inline-block;
	background: rgba(14,190,127,.15);
	color: var(--mark-dark);
	font-size: .65rem;
	font-weight: 700;
	padding: .15rem .4rem;
	border-radius: 4px;
	margin-left: .35rem;
}

.pricing-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	max-width: 900px;
	margin: 0 auto;
	align-items: stretch;
}
.pricing-card {
	background: #fff;
	border: 1px solid #E5E9F2;
	border-radius: 20px;
	padding: 2.5rem 2rem !important;
	position: relative;
	display: flex;
	flex-direction: column;
	transition: transform .2s, box-shadow .2s;
	height: 100%;
}
.pricing-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 60px -20px rgba(15,23,42,.18);
}
.pricing-card.featured {
	border: 2px solid var(--mark);
	box-shadow: 0 24px 60px -20px rgba(15,23,42,.18);
	overflow: hidden;
}
.pricing-card .pricing-badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--mark);
	color: #fff;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: .4rem .8rem;
	border-radius: 999px;
	white-space: nowrap;
}
.pricing-card .pricing-icon {
	font-size: 2rem;
	margin-bottom: .5rem;
	line-height: 1;
}
.pricing-card h3.pricing-title {
	font-size: 1.3rem !important;
	font-weight: 700 !important;
	color: #0F172A;
	margin: 0 0 .25rem !important;
	line-height: 1.2;
}
.pricing-card .pricing-subtitle {
	font-size: .9rem;
	color: #64748B;
	margin: 0 0 1.5rem !important;
	line-height: 1.4;
}
.pricing-card .pricing-price-row {
	display: flex;
	align-items: baseline;
	gap: .25rem;
	margin-bottom: .25rem;
}
.pricing-card .pricing-price {
	font-size: 2.5rem !important;
	font-weight: 700;
	color: #0F172A;
	line-height: 1;
	margin: 0;
}
.pricing-card .pricing-currency {
	font-size: 1rem;
	font-weight: 500;
	color: #64748B;
}
.pricing-card .pricing-period {
	font-size: .9rem;
	color: #64748B;
}
.pricing-card .pricing-price-note {
	font-size: .75rem;
	color: #94A3B8;
	margin: .25rem 0 1.5rem !important;
}
.pricing-card ul.pricing-features {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem !important;
	flex: 1;
}
.pricing-card ul.pricing-features li {
	display: flex;
	gap: .65rem;
	align-items: flex-start;
	padding: .5rem 0;
	font-size: .92rem;
	color: #334155;
	line-height: 1.4;
	margin: 0;
}
.pricing-card ul.pricing-features li::before {
	content: "✓";
	color: var(--mark);
	font-weight: 700;
	flex-shrink: 0;
	margin-top: .05rem;
}
.pricing-card ul.pricing-features li.muted {
	color: #94A3B8;
}
.pricing-card ul.pricing-features li.muted::before {
	content: "—";
	color: #CBD5E1;
}
.pricing-card ul.pricing-features li strong {
	color: #0F172A;
}
.pricing-card .pricing-cta {
	display: block;
	width: 100%;
	text-align: center;
	padding: .85rem 1.5rem;
	border-radius: 12px;
	font-weight: 600 !important;
	font-size: .95rem !important;
	text-decoration: none !important;
	transition: background .2s, color .2s, transform .15s;
	margin-top: auto;
}
.pricing-card .pricing-cta.outline {
	background: transparent;
	color: #0F172A !important;
	border: 1px solid #CBD5E1;
}
.pricing-card .pricing-cta.outline:hover {
	background: #F1F5F9;
	transform: translateY(-1px);
}
.pricing-card .pricing-cta.primary {
	background: var(--mark);
	color: #fff !important;
	border: 0;
}
.pricing-card .pricing-cta.primary:hover {
	background: var(--mark-dark);
	transform: translateY(-1px);
}
.pricing-footer-note {
	text-align: center;
	font-size: .85rem;
	color: #64748B;
	margin-top: 2rem;
}

/* Centrowanie toggle nad grid (gdy używany w columns:1 sekcji) */
.pricing-toggle-wrap {
	text-align: center;
}

@media (max-width: 768px) {
	.pricing-grid {
		grid-template-columns: 1fr;
		max-width: 380px;
	}
	.pricing-card {
		padding: 2rem 1.5rem !important;
	}
	.pricing-card h3.pricing-title {
		font-size: 1.2rem !important;
	}
	.pricing-card .pricing-price {
		font-size: 2.2rem !important;
	}
}

/* === [BLOCK: pricing-table] END === */
/* === [BLOCK: comparison-table] START === */
/* Tabela porównawcza vs konkurencja */
.compare-table { width:100%; border-collapse:separate; border-spacing:0; margin:1.5rem 0; font-size:.95rem; }
.compare-table thead th {
	background:#F8FAFC; color:#475569; font-weight:600; text-align:left;
	padding:1rem .9rem; border-bottom:2px solid #E2E8F0; font-size:.85rem;
	letter-spacing:.02em;
}
.compare-table thead th.us {
	background:linear-gradient(135deg, var(--mark-dark), var(--mark));
	color:#fff; border-bottom:2px solid var(--mark-dark);
	position:relative;
}
.compare-table thead th.us::before { content:"✦ "; }
.compare-table tbody td {
	padding:.95rem .9rem; border-bottom:1px solid #EEF2F7; color:#1E293B; vertical-align:top;
}
.compare-table tbody td:first-child { font-weight:600; color:#0F172A; }
.compare-table tbody tr:hover td { background:#FCFCFD; }
.compare-table td.us-col {
	background:rgba(14,190,127,.06); font-weight:600; color:var(--mark-dark);
	border-left:1px solid rgba(14,190,127,.2);
	border-right:1px solid rgba(14,190,127,.2);
}
.compare-table tbody tr:last-child td.us-col { border-bottom:1px solid rgba(14,190,127,.2); border-bottom-left-radius:10px; border-bottom-right-radius:10px; }
@media (max-width: 700px) {
	.compare-table { font-size:.82rem; }
	.compare-table thead th, .compare-table tbody td { padding:.7rem .55rem; }
}
/* === [BLOCK: comparison-table] END === */
/* === [BLOCK: steps-list] START === */
/* 3-kroki workflow ("Pobierz → Zaloguj → Działasz") — numer w kółku + ikona + tytuł + opis */

.steps-list {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 2.5rem;
	max-width: 960px;
	margin: 0 auto;
	position: relative;
}
.step-item {
	text-align: center;
	position: relative;
	padding: 0 .5rem;
}
.step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--mark);
	color: #fff;
	font-size: 1.4rem;
	font-weight: 700;
	font-family: var(--font-family-header, inherit);
	margin: 0 auto 1rem;
	box-shadow: 0 12px 28px -10px rgba(15,23,42,.25);
	position: relative;
	z-index: 2;
}
.step-icon {
	font-size: 1.5rem;
	margin-bottom: .75rem;
	line-height: 1;
}
.step-title {
	font-size: 1.2rem !important;
	font-weight: 700 !important;
	color: #0F172A !important;
	margin: 0 0 .5rem !important;
	line-height: 1.3;
}
.step-desc {
	font-size: .95rem !important;
	color: #475569 !important;
	line-height: 1.55 !important;
	max-width: 28ch;
	margin: 0 auto !important;
}

/* Linia łącząca kroki (tylko desktop, między 1-2 i 2-3) */
.step-item:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 28px;
	left: calc(50% + 28px);
	width: calc(100% - 56px);
	height: 2px;
	background: repeating-linear-gradient(90deg, #CBD5E1 0 6px, transparent 6px 12px);
	z-index: 1;
}

/* Wariant ciemny (dla osadzenia w bg-ok-ink) */
.bg-ok-ink .steps-list .step-number { background: var(--ok-cta, var(--mark)); color: #0A1330; }
.bg-ok-ink .steps-list .step-title { color: #F1F5F9 !important; }
.bg-ok-ink .steps-list .step-desc { color: #CBD5E1 !important; }
.bg-ok-ink .step-item:not(:last-child)::after {
	background: repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 6px, transparent 6px 12px);
}

@media (max-width: 768px) {
	.steps-list {
		grid-template-columns: 1fr;
		gap: 2rem;
		max-width: 380px;
	}
	.step-item:not(:last-child)::after {
		display: none; /* ukryj linię — pionowe kroki bez połączeń */
	}
	.step-number {
		width: 48px;
		height: 48px;
		font-size: 1.2rem;
	}
}

/* === [BLOCK: steps-list] END === */
/* === [BLOCK: founder-story] START === */
/* Sekcja founder story — narracja 1-os po lewej + avatar/imię po prawej.
   Reużywalna: workpatrol, każdy klient z osobistą historią założyciela. */

.founder-story-wrap {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 3rem;
	align-items: center;
	max-width: 1100px;
	margin: 0 auto;
}

.founder-narrative {
	position: relative;
	padding-left: 2rem;
}
.founder-narrative::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--mark);
	border-radius: 2px;
}
.founder-narrative .founder-quote-mark {
	position: absolute;
	left: -.5rem;
	top: -1rem;
	font-size: 4rem;
	color: var(--mark);
	opacity: .12;
	font-family: Georgia, serif;
	font-weight: 700;
	line-height: 1;
}
.founder-narrative .eyebrow {
	display: inline-block;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mark);
	margin-bottom: 1rem;
}
.founder-narrative h2 {
	font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	margin: 0 0 1.5rem !important;
	color: #0F172A;
}
.founder-narrative p {
	font-size: 1.05rem !important;
	line-height: 1.7 !important;
	color: #334155;
	margin: 0 0 1.1rem !important;
	max-width: 56ch;
}
.founder-narrative p strong {
	color: #0F172A;
	font-weight: 700;
}
.founder-narrative .founder-signoff {
	font-size: .95rem !important;
	color: #475569;
	margin-top: 1.5rem !important;
	font-style: italic;
}
.founder-narrative .founder-signoff strong {
	color: #0F172A;
	font-style: normal;
}

.founder-avatar-col {
	text-align: center;
}
.founder-avatar {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--mark) 0%, var(--mark-dark) 100%);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 4rem;
	font-weight: 700;
	font-family: var(--font-family-header, inherit);
	margin: 0 auto 1rem;
	box-shadow: 0 24px 60px -20px rgba(15,23,42,.3);
	letter-spacing: -.05em;
}
.founder-avatar img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}
.founder-name {
	font-size: 1.15rem !important;
	font-weight: 700 !important;
	color: #0F172A !important;
	margin: 0 !important;
}
.founder-role {
	font-size: .9rem;
	color: #64748B;
	margin: .25rem 0 0 !important;
}

/* Wariant ciemny (na bg-ok-ink / wp-hero-bg-dark) */
.bg-ok-ink .founder-narrative h2,
.wp-hero-bg-dark .founder-narrative h2 { color: #F1F5F9; }
.bg-ok-ink .founder-narrative p,
.wp-hero-bg-dark .founder-narrative p { color: #CBD5E1; }
.bg-ok-ink .founder-narrative p strong,
.wp-hero-bg-dark .founder-narrative p strong { color: #fff; }
.bg-ok-ink .founder-name,
.wp-hero-bg-dark .founder-name { color: #F1F5F9 !important; }

@media (max-width: 768px) {
	.founder-story-wrap {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.founder-avatar-col {
		order: -1;
	}
	.founder-avatar {
		width: 140px;
		height: 140px;
		font-size: 3rem;
	}
	.founder-narrative {
		padding-left: 1.2rem;
	}
	.founder-narrative h2 {
		font-size: clamp(1.4rem, 5vw, 1.8rem) !important;
	}
}

/* === [BLOCK: founder-story] END === */
/* === [BLOCK: screenshot-showcase] START === */
/* Grid screenów z mocnym shadow + caption + click → lightbox.
   Warianty: 1-wide hero / 3-w-rzędzie / cały-zestaw (12 screenów). */

.showcase-grid {
	display: grid;
	gap: 1.5rem;
	max-width: 1200px;
	margin: 0 auto;
}
.showcase-grid.cols-1 { grid-template-columns: 1fr; max-width: 1000px; }
.showcase-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.showcase-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.showcase-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.showcase-item {
	cursor: pointer;
	transition: transform .25s, box-shadow .25s;
}
.showcase-item:hover {
	transform: translateY(-4px);
}
.showcase-item .showcase-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	box-shadow: 0 24px 60px -20px rgba(15,23,42,.25);
	border: 1px solid #E5E9F2;
	background: #fff;
	overflow: hidden;
}
.showcase-item:hover .showcase-img {
	box-shadow: 0 32px 80px -20px rgba(15,23,42,.35);
}
.showcase-item .showcase-caption {
	margin-top: 1rem;
	font-size: .92rem !important;
	color: #475569 !important;
	line-height: 1.5 !important;
	text-align: center;
}
.showcase-item .showcase-caption strong {
	color: #0F172A;
	font-weight: 600;
}

/* Wariant dark — na ciemnym tle (bg-ok-ink itp.) */
.bg-ok-ink .showcase-item .showcase-caption,
.wp-hero-bg-dark .showcase-item .showcase-caption { color: #CBD5E1 !important; }
.bg-ok-ink .showcase-item .showcase-caption strong,
.wp-hero-bg-dark .showcase-item .showcase-caption strong { color: #fff; }
.bg-ok-ink .showcase-item .showcase-img,
.wp-hero-bg-dark .showcase-item .showcase-img { border-color: rgba(255,255,255,.1); }

/* Lightbox overlay - vanilla JS */
.showcase-lightbox {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(15,23,42,.92);
	z-index: 9999;
	cursor: zoom-out;
	padding: 2rem;
	align-items: center;
	justify-content: center;
	overflow: auto;
}
.showcase-lightbox.active {
	display: flex;
}
.showcase-lightbox img {
	max-width: 95vw;
	max-height: 90vh;
	width: auto;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 32px 80px -20px rgba(0,0,0,.5);
}
.showcase-lightbox-close {
	position: fixed;
	top: 1.5rem;
	right: 1.5rem;
	width: 48px;
	height: 48px;
	background: rgba(255,255,255,.1);
	color: #fff;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	transition: background .2s;
}
.showcase-lightbox-close:hover {
	background: rgba(255,255,255,.2);
}
.showcase-lightbox-close .material-symbols-outlined {
	font-size: 28px;
}

@media (max-width: 900px) {
	.showcase-grid.cols-3,
	.showcase-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.showcase-grid.cols-2,
	.showcase-grid.cols-3,
	.showcase-grid.cols-4 { grid-template-columns: 1fr; }
}

/* === [BLOCK: screenshot-showcase] END === */
/* === [BLOCK: faq-pretty] START === */
/* Lifting domyślnego .faq z core — większy padding, ładny accordion z plus/minus */
.faq { max-width:860px; margin:0 auto; }
.faq .f {
	background:#fff !important; border:1px solid #E5E9F2 !important;
	border-radius:14px !important; padding:0 !important; margin-bottom:.7rem !important;
	overflow:hidden; transition: border-color .2s, box-shadow .2s;
}
.faq .f.active { border-color:rgba(14,190,127,.4) !important; box-shadow:0 8px 28px -10px rgba(14,190,127,.2); }
.faq .f h3 {
	padding:1.1rem 1.3rem !important; margin:0 !important;
	font-size:1.02rem !important; font-weight:600 !important; color:#0F172A;
	display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.faq .f h3 span.faq_arrow {
	float:none !important; flex-shrink:0;
	width:28px; height:28px; border-radius:50%;
	background:rgba(14,190,127,.12); color:var(--mark-dark);
	display:inline-flex !important; align-items:center; justify-content:center;
	font-size:1.1rem !important; transition: transform .2s, background .2s;
}
.faq .f.active h3 span.faq_arrow { background:var(--mark); color:#fff; transform:rotate(45deg); }
.faq .f .t { padding:0 1.3rem 1.2rem !important; color:#475569; line-height:1.6; font-size:.95rem; }
/* === [BLOCK: faq-pretty] END === */
/* === [BLOCK: contact-form-dark] START === */
/* Formularz kontaktowy w sekcji ciemnej — input pola na granacie */
.bg-ok-ink form input[type=text],
.bg-ok-ink form input[type=email],
.bg-ok-ink form input[type=tel],
.bg-ok-ink form textarea,
.bg-ok-ink form select,
.bg-ok-ink-2 form input[type=text],
.bg-ok-ink-2 form input[type=email],
.bg-ok-ink-2 form input[type=tel],
.bg-ok-ink-2 form textarea,
.bg-ok-ink-2 form select {
	background:rgba(255,255,255,.06) !important; color:#F1F5F9 !important;
	border:1.5px solid rgba(255,255,255,.15) !important; border-radius:10px !important;
	padding:.85rem 1rem !important; font-size:.95rem;
}
.bg-ok-ink form input::placeholder, .bg-ok-ink-2 form input::placeholder,
.bg-ok-ink form textarea::placeholder, .bg-ok-ink-2 form textarea::placeholder {
	color:rgba(241,245,249,.4) !important;
}
.bg-ok-ink form button[type=submit], .bg-ok-ink-2 form button[type=submit] {
	background:var(--ok-cta) !important; color:var(--ok-cta-ink) !important;
	font-weight:700 !important; padding:1rem 1.6rem !important; border-radius:12px !important;
	box-shadow: 0 12px 32px -8px rgba(94,255,182,.55) !important;
	width:100%; cursor:pointer; border:none !important;
}
.bg-ok-ink form button[type=submit]:hover, .bg-ok-ink-2 form button[type=submit]:hover {
	transform:translateY(-1px);
	box-shadow: 0 18px 40px -10px rgba(94,255,182,.7) !important;
}
.bg-ok-ink form .form-check, .bg-ok-ink-2 form .form-check { color:rgba(241,245,249,.75); font-size:.85rem; }
.bg-ok-ink form .form-check a, .bg-ok-ink-2 form .form-check a { color:var(--ok-cta); }
/* === [BLOCK: contact-form-dark] END === */
/* === [BLOCK: neon-cta] START === */
/* Neonowy CTA przycisk — używamy dla najmocniejszych call-to-action */
nav.neon p > a, .btn-neon {
	background:var(--ok-cta) !important;
	color:var(--ok-cta-ink) !important;
	font-weight:700 !important;
	padding:.95rem 1.6rem !important;
	border-radius:12px !important;
	display:inline-flex !important; align-items:center; gap:.5rem;
	box-shadow: 0 12px 32px -8px rgba(94,255,182,.55), inset 0 -2px 0 rgba(0,0,0,.12) !important;
	border:none !important;
	transition: transform .15s, box-shadow .2s;
}
nav.neon p > a:hover, .btn-neon:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 40px -10px rgba(94,255,182,.7), inset 0 -2px 0 rgba(0,0,0,.12) !important;
}
nav.neon p > a::after, .btn-neon::after {
	content:"→"; margin-left:.25rem; font-weight:800; font-size:1.1em;
}

/* Ghost button do hero (drugorzędny) */
nav.ghost p > a {
	background:transparent !important;
	color:#fff !important;
	border:1.5px solid rgba(255,255,255,.35) !important;
	padding:.9rem 1.5rem !important;
	border-radius:12px !important;
	font-weight:600 !important;
}
nav.ghost p > a:hover { background:rgba(255,255,255,.1) !important; border-color:rgba(255,255,255,.6) !important; }
/* === [BLOCK: neon-cta] END === */
/* === [BLOCK: cookie-floating-icon] START === */
/* Pływająca ikona ciastka jako dekoracja w hero (po lewej, lekko obrócona) */
.cookie-deco {
	position:absolute; pointer-events:none; opacity:.08; font-size:14rem;
	transform:rotate(-15deg); top:15%; right:-3rem; z-index:0;
}
.bg-ok-ink, .bg-ok-ink-2 { position:relative; overflow:hidden; }
.bg-ok-ink > .container, .bg-ok-ink-2 > .container { position:relative; z-index:1; }
/* === [BLOCK: cookie-floating-icon] END === */
/* === [BLOCK: header-logo-size] START === */
/* Większe logo w headerze — 70px na PC, 55px na mobile */
header.header_main section .logo a img,
header.header_main .logo a img {
	height: 70px;
	width: auto;
	max-width: none;
}
@media (max-width: 600px) {
	header.header_main section .logo a img,
	header.header_main .logo a img {
		height: 55px;
	}
}
/* === [BLOCK: header-logo-size] END === */
/* === [BLOCK: landing-e-maestro] START === */
/* ===== e-maestro.pl — landing-only CSS, palette niebieska e-PIT vibe ===== */

/* Override --mark per-klient (body scope, nie :root, zgodne z regułą #1):
   --mark zmienia kolor wszystkich klocków używających tej zmiennej:
   pricing-card.featured border, step-number background, pricing-cta.primary itd. */
body.em-landing {
	--mark: #2563EB;
	--mark-dark: #1D4ED8;
	--mark-light: rgba(37,99,235,.12);
}

/* ===== Hero — używamy klocka hero-light (bg-ok-sky), tu tylko micro-tweaki ===== */

/* Mockup w hero - lekkie rotate na desktop, brak na mobile */
.bg-ok-sky .em-hero-mockup {
	background: #fff;
	border: 1px solid rgba(37,99,235,.12);
	border-radius: 16px;
	box-shadow: 0 32px 80px -32px rgba(37,99,235,.25);
	overflow: hidden;
	transform: rotate(-1deg);
	transition: transform .4s;
	max-width: 480px;
	margin-left: auto;
	margin-right: 0;
	box-sizing: border-box;
}
.bg-ok-sky .em-hero-mockup:hover {
	transform: rotate(0);
}
@media (max-width: 768px) {
	.bg-ok-sky .em-hero-mockup {
		transform: none;
	}
}

/* ===== Sekcja "Co e-Maestro zrobi za Ciebie" (feature-cards override) ===== */

.em-section h2 {
	text-align: center;
	font-size: clamp(1.8rem, 3.5vw, 2.5rem) !important;
	font-weight: 700 !important;
	color: #0F172A;
	margin: 0 0 .75rem !important;
}
.em-section .em-section-subtitle {
	text-align: center;
	color: #64748B;
	font-size: 1.05rem;
	max-width: 55ch;
	margin: 0 auto 3rem !important;
}

/* Feature-cards z paletą e-maestro */
.em-section .feature-card .feat-ico {
	background: linear-gradient(135deg, rgba(37,99,235,.15), rgba(16,185,129,.12));
}

/* ===== Sekcja "Jak zacząć" (steps-list już renderuje się z --mark, czyli niebieskie) ===== */

/* ===== Trust-bar pod hero (mała linijka z logo systemów) ===== */
.em-trust-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	justify-content: center;
	align-items: center;
	padding: 2rem 1rem;
	border-top: 1px solid #E5E9F2;
	border-bottom: 1px solid #E5E9F2;
	background: #F8FAFC;
}
.em-trust-bar span {
	font-size: .85rem;
	color: #64748B;
	font-weight: 500;
}
.em-trust-bar strong {
	color: #0F172A;
}

/* ===== Final CTA strip (przed footer) ===== */
.em-cta-final {
	background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
	color: #fff;
	padding: 4rem 2rem !important;
	border-radius: 20px;
	text-align: center;
	max-width: 1000px;
	margin: 0 auto;
	box-shadow: 0 32px 80px -32px rgba(37,99,235,.5);
}
.em-cta-final h2 {
	color: #fff !important;
	font-size: clamp(1.8rem, 3.5vw, 2.5rem) !important;
	margin: 0 0 1rem !important;
}
.em-cta-final p {
	color: rgba(255,255,255,.85);
	font-size: 1.1rem;
	max-width: 50ch;
	margin: 0 auto 2rem !important;
}
.em-cta-final .btn-cta-white {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: #fff;
	color: #2563EB !important;
	padding: 1rem 2rem;
	border-radius: 12px;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none !important;
	transition: transform .15s, box-shadow .2s;
	box-shadow: 0 12px 32px -12px rgba(0,0,0,.3);
}
.em-cta-final .btn-cta-white:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 40px -12px rgba(0,0,0,.4);
}
.em-cta-final .em-cta-meta {
	margin-top: 1rem;
	font-size: .85rem;
	color: rgba(255,255,255,.7);
}

@media (max-width: 768px) {
	.em-cta-final {
		padding: 3rem 1.5rem !important;
		margin: 0 1rem;
	}
}

/* === [BLOCK: landing-e-maestro] END === */
/* === [BLOCK: landing-pozycjosprawdzator] START === */
/* ===== POZYCJOSPRAWDZATOR — landing-only CSS ===== */
/* HERO — bez bg, tło jest na <section class="ps-bg-hero"> (Reguła #11) */
.ps-hero{padding:3rem 0 4rem;overflow:hidden}
section.ps-bg-hero{background:linear-gradient(135deg,rgba(124,58,237,.08) 0%,#fff 50%,rgba(16,185,129,.08) 100%)}
.ps-hero-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center;max-width:1200px;margin:0 auto;padding:0 1rem}
@media(min-width:900px){.ps-hero-grid{grid-template-columns:1fr 1fr;gap:3rem}}
.ps-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:600;padding:.4rem .85rem;border-radius:9999px;margin-bottom:1.2rem}
.ps-eyebrow-lab{background:rgba(16,185,129,.12);color:#047857}
.ps-pulse{width:.5rem;height:.5rem;border-radius:9999px;background:#10b981;animation:pspulse 2s infinite}
@keyframes pspulse{0%,100%{opacity:1}50%{opacity:.4}}
.ps-h1{font-family:var(--font-family-header);font-size:clamp(2.2rem,5vw,3.8rem);font-weight:700;line-height:1.05;letter-spacing:-.02em;margin:0 0 1.2rem}
.ps-text-mark{color:#7c3aed}
.ps-text-lab{color:#047857}
.ps-text-warn{color:#b45309}
.ps-text-rose{color:#be123c}
.ps-text-muted{color:#94a3b8}
.ps-lead{font-size:clamp(1rem,1.5vw,1.2rem);color:#475569;line-height:1.6;max-width:550px;margin:0 0 1.8rem}
.ps-cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.8rem}
.ps-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.5rem;border-radius:.75rem;font-weight:600;font-size:.95rem;text-decoration:none;transition:all .2s}
.ps-btn-mark{background:#6d28d9;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.ps-btn-mark:hover{background:#5b21b6;box-shadow:0 4px 12px rgba(124,58,237,.3)}
.ps-btn-ghost{background:#fff;color:#1e293b;border:1px solid #e2e8f0}
.ps-btn-ghost:hover{background:#f8fafc}
.ps-btn-ghost-dark{background:rgba(15,23,42,.4);color:#fff;border:1px solid rgba(255,255,255,.3)}
.ps-btn-ghost-dark:hover{background:rgba(15,23,42,.6)}
.ps-btn-light{background:#fff;color:#0f172a}
.ps-btn-big{font-size:1rem;padding:1rem 2rem}
.ps-checks{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-size:.88rem;color:#64748b}
.ps-checks div{display:flex;align-items:center;gap:.4rem}
.ps-check{color:#10b981;font-weight:700}

.ps-mockup-wrap{position:relative}
.ps-mockup{background:#fff;border:1px solid #e2e8f0;border-radius:1rem;box-shadow:0 25px 50px -12px rgba(124,58,237,.15);overflow:hidden;transform:rotate(1deg);transition:transform .5s;max-width:100%;box-sizing:border-box}
@media(max-width:768px){.ps-mockup{transform:none}}
.ps-mockup:hover{transform:rotate(0)}
.ps-browser-bar{background:#f8fafc;border-bottom:1px solid #e2e8f0;padding:.6rem 1rem;display:flex;align-items:center;gap:.4rem}
.ps-dot{width:.7rem;height:.7rem;border-radius:9999px}
.ps-dot-r{background:#fb7185}.ps-dot-y{background:#fbbf24}.ps-dot-g{background:#34d399}
.ps-url{margin-left:.7rem;font-family:'SF Mono',monospace;font-size:.7rem;color:#94a3b8}
.ps-mockup-body{padding:1.2rem}
.ps-kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1.2rem}
.ps-kpi{border:1px solid #e2e8f0;border-radius:.65rem;padding:.7rem}
.ps-kpi-label{display:flex;align-items:center;gap:.4rem;font-size:.65rem;color:#64748b;text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.ps-kpi-icon{width:1.6rem;height:1.6rem;border-radius:9999px;display:grid;place-items:center;font-size:.75rem}
.ps-bg-lab{background:rgba(16,185,129,.15)}
.ps-bg-mark{background:rgba(124,58,237,.15)}
.ps-bg-warn{background:rgba(245,158,11,.15)}
.ps-bg-rose{background:rgba(244,63,94,.15)}
.ps-bg-mark-soft{background:rgba(124,58,237,.1)}
.ps-bg-lab-soft{background:rgba(16,185,129,.1)}
.ps-bg-warn-soft{background:rgba(245,158,11,.1)}
.ps-kpi-num{font-family:var(--font-family-header);font-size:1.5rem;font-weight:700;margin-top:.2rem}
.ps-table-mini{display:flex;flex-direction:column;gap:.3rem}
.ps-tm-head{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;margin-bottom:.4rem}
.ps-meta{color:#94a3b8;font-size:.78rem}
.ps-mono{font-family:'SF Mono',monospace;color:#64748b;font-size:.7rem}
.ps-tm-row{display:flex;justify-content:space-between;align-items:center;padding:.4rem .5rem;border-radius:.4rem;font-size:.85rem}
.ps-tm-row:hover{background:#f8fafc}
.ps-pos{font-family:'SF Mono',monospace;font-size:.72rem;font-weight:600;padding:.15rem .5rem;border-radius:9999px}
.ps-pos-good{background:rgba(16,185,129,.15);color:#047857}
.ps-pos-mid{background:rgba(245,158,11,.15);color:#b45309}
.ps-trend{font-size:.7rem;margin-left:.4rem}
.ps-up{color:#059669}
.ps-down{color:#e11d48}

.ps-trust{padding:1.5rem 0;background:#fff;border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0}
.ps-trust-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;text-align:center;max-width:1200px;margin:0 auto;padding:0 1rem}
@media(min-width:768px){.ps-trust-grid{grid-template-columns:repeat(4,1fr)}}
.ps-trust-num{font-family:var(--font-family-header);font-size:clamp(1.8rem,4vw,2.5rem);font-weight:700}
.ps-trust-lbl{font-size:.85rem;color:#64748b;margin-top:.3rem;line-height:1.4}

.ps-section-roomy{max-width:1200px;margin:0 auto;padding:4rem 1rem;box-sizing:border-box;width:100%;min-width:0;overflow-x:hidden}
@media(max-width:768px){.ps-section-roomy{padding:3rem .75rem}}
.ps-section-head{text-align:center;max-width:780px;margin:0 auto 3rem}
.ps-section-head-tight{margin-bottom:1.5rem}
.ps-eyebrow-mark-text,.ps-eyebrow-lab-text,.ps-eyebrow-light{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;margin-bottom:.8rem}
.ps-eyebrow-mark-text{color:#6d28d9}
.ps-eyebrow-lab-text{color:#047857}
.ps-eyebrow-light{color:#a78bfa}
.ps-h2{font-family:var(--font-family-header);font-size:clamp(1.5rem,3.5vw,3rem);font-weight:700;line-height:1.15;letter-spacing:-.01em;margin:0 0 1rem;word-break:break-word;hyphens:auto}
.ps-h2-light{font-family:var(--font-family-header);font-size:clamp(1.5rem,3.5vw,3rem);font-weight:700;line-height:1.15;color:#fff;margin:0 0 1rem;word-break:break-word;hyphens:auto}
.ps-h3{font-family:var(--font-family-header);font-size:clamp(1.2rem,2vw,1.5rem);font-weight:700;margin:0 0 .8rem}
.ps-section-lead{font-size:clamp(1rem,1.3vw,1.1rem);color:#475569;line-height:1.6;margin:.5rem auto;max-width:680px}
.ps-section-lead-light{font-size:clamp(1rem,1.3vw,1.1rem);color:#cbd5e1;line-height:1.6;margin:.5rem auto;max-width:680px}
.ps-section-foot{text-align:center;font-size:.78rem;color:#94a3b8;max-width:600px;margin:1.5rem auto 0;line-height:1.5}
.ps-code-light{background:rgba(255,255,255,.1);padding:.15rem .4rem;border-radius:.3rem;font-family:'SF Mono',monospace;font-size:.85em;color:#c4b5fd}

.ps-features-grid{display:grid;grid-template-columns:1fr;gap:1.2rem;margin-bottom:2.5rem;grid-auto-rows:1fr}
@media(min-width:768px){.ps-features-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.ps-features-grid{grid-template-columns:repeat(3,1fr)}}
.ps-feat-card{display:flex;flex-direction:column;height:100%}
.ps-feat-card{background:#fff;border:1px solid #e2e8f0;border-radius:1rem;padding:1.5rem;transition:all .2s}
.ps-feat-card:hover{box-shadow:0 10px 25px -5px rgba(0,0,0,.1);transform:translateY(-3px)}
.ps-feat-icon{width:3rem;height:3rem;border-radius:.75rem;display:grid;place-items:center;font-size:1.4rem;margin-bottom:1rem}
.ps-feat-card h3{font-family:var(--font-family-header);font-size:1.1rem;font-weight:600;margin:0 0 .5rem}
.ps-feat-card p{font-size:.88rem;color:#475569;line-height:1.6;margin:0}

.ps-gamechanger{background:linear-gradient(135deg,#6d28d9 0%,#5b21b6 50%,#4c1d95 100%);color:#fff;border-radius:1.5rem;padding:2.5rem 2rem;box-shadow:0 25px 50px -12px rgba(76,29,149,.4);position:relative;overflow:hidden}
.ps-gc-emoji{font-size:5rem;float:left;margin-right:1.5rem;line-height:1}
@media(min-width:768px){.ps-gamechanger{padding:3rem}}
.ps-gc-badge{display:inline-block;background:#f59e0b;color:#fff;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:.3rem .8rem;border-radius:9999px;margin-bottom:.8rem}
.ps-gc-h3{font-family:var(--font-family-header);font-size:clamp(1.4rem,2.5vw,2rem);font-weight:700;line-height:1.2;margin:0 0 1rem}
.ps-gc-lead{color:#ddd6fe;font-size:1.05rem;line-height:1.6;margin:0 0 .8rem}
.ps-gc-lead strong{color:#fff}
.ps-gc-sub{color:#c4b5fd;font-size:.88rem;margin:0}

.ps-steps-grid{display:grid;grid-template-columns:1fr;gap:1.2rem}
@media(min-width:768px){.ps-steps-grid{grid-template-columns:repeat(4,1fr)}}
.ps-step{background:#fff;border:1px solid #e2e8f0;border-radius:1rem;padding:1.5rem;height:100%}
.ps-step-num{width:2.5rem;height:2.5rem;border-radius:9999px;background:#6d28d9;color:#fff;font-family:var(--font-family-header);font-weight:700;font-size:1.1rem;display:grid;place-items:center;margin-bottom:1rem}
.ps-step-num-final{background:#047857}
.ps-step h3{font-family:var(--font-family-header);font-size:1.1rem;font-weight:600;margin:0 0 .5rem}
.ps-step p{font-size:.88rem;color:#475569;line-height:1.6;margin:0}

/* PODGLAD ciemny — bg jest na <section class="ps-bg-app"> (Reguła #11) */
.ps-preview-wrap{color:#fff;padding:4rem 1rem;box-sizing:border-box;overflow-x:hidden}
@media(max-width:768px){.ps-preview-wrap{padding:3rem .75rem}}
section.ps-bg-app{background:#0f172a;background-image:radial-gradient(circle at 20% 50%,rgba(124,58,237,.2) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(16,185,129,.15) 0%,transparent 50%),linear-gradient(180deg,#0f172a 0%,#1e293b 100%);color:#fff;overflow-x:hidden}
section.ps-bg-app .ps-app-mockup,section.ps-bg-app .ps-app-body{max-width:100%;min-width:0;box-sizing:border-box}
section.ps-bg-app h1,section.ps-bg-app h2,section.ps-bg-app h3{color:#fff}
.ps-preview-wrap > .ps-section-head{margin:0 auto 2.5rem}
.ps-app-mockup{max-width:100%;width:100%;margin:0 auto;background:#fff;color:#0f172a;border-radius:1rem;overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:0 25px 50px -12px rgba(0,0,0,.5);box-sizing:border-box;min-width:0}
@media(min-width:1100px){.ps-app-mockup{max-width:1100px}}
.ps-app-body{padding:.75rem;box-sizing:border-box;min-width:0}
@media(min-width:768px){.ps-app-body{padding:2rem}}
.ps-browser-bar .ps-url{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.ps-app-head{margin-bottom:1.5rem}
.ps-breadcrumb{font-size:.75rem;color:#94a3b8;margin-bottom:.3rem}
.ps-app-title-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:.5rem}
.ps-app-title{font-family:var(--font-family-header);font-size:clamp(1.4rem,2vw,1.8rem);font-weight:700;margin:0}
.ps-app-sub{font-family:'SF Mono',monospace;font-size:.78rem;color:#64748b;margin:.2rem 0 0}
.ps-app-actions{display:flex;gap:.4rem;font-size:.75rem}
.ps-app-btn{background:#f1f5f9;padding:.4rem .7rem;border-radius:.5rem}
.ps-app-btn-mark{background:#6d28d9;color:#fff}
.ps-kpi-grid-6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;margin-bottom:1.5rem;width:100%}
@media(min-width:768px){.ps-kpi-grid-6{grid-template-columns:repeat(6,minmax(0,1fr));gap:.75rem}}
.ps-kpi-grid-6 .ps-kpi{padding:.55rem;min-width:0}
.ps-kpi-grid-6 .ps-kpi-label{font-size:.6rem;gap:.3rem}
.ps-kpi-grid-6 .ps-kpi-icon{width:1.3rem;height:1.3rem;font-size:.65rem}
.ps-table-cap{font-size:.72rem;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-bottom:.5rem}
.ps-table-app{border:1px solid #e2e8f0;border-radius:.75rem;overflow:hidden}
.ps-tap-head,.ps-tap-row{display:grid;grid-template-columns:2fr 1.5fr .8fr .8fr .8fr .8fr;gap:.5rem;padding:.6rem .8rem;align-items:center;font-size:.82rem;min-width:0}
.ps-tap-head{background:#f8fafc;font-size:.65rem;text-transform:uppercase;color:#64748b;letter-spacing:.05em;font-weight:600}
.ps-tap-row{border-top:1px solid #f1f5f9}
.ps-tap-row:hover{background:#fafbfc}
.ps-tap-row > *,.ps-tap-head > *{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:768px){.ps-tap-head{display:none}.ps-tap-row{grid-template-columns:1fr auto;font-size:.8rem;padding:.6rem;min-width:0}.ps-tap-row > :nth-child(n+2):not(:last-child){display:none}.ps-tap-row > :first-child{white-space:normal;min-width:0;overflow:hidden;text-overflow:ellipsis}}
.ps-table-foot{text-align:center;font-size:.78rem;color:#94a3b8;margin-top:.8rem}
.ps-mockup-footnote{text-align:center;font-size:.78rem;color:#94a3b8;max-width:600px;margin:1.5rem auto 0}

.ps-audience-grid{display:grid;grid-template-columns:1fr;gap:1.2rem}
@media(min-width:768px){.ps-audience-grid{grid-template-columns:repeat(3,1fr)}}
.ps-aud-card{border-radius:1rem;padding:1.5rem 2rem;color:#fff}
.ps-aud-mark{background:linear-gradient(135deg,#6d28d9 0%,#5b21b6 100%)}
.ps-aud-lab{background:linear-gradient(135deg,#059669 0%,#047857 100%)}
.ps-aud-dark{background:linear-gradient(135deg,#334155 0%,#1e293b 100%)}
.ps-aud-emoji{font-size:2.5rem;margin-bottom:.8rem}
.ps-aud-card h3{font-family:var(--font-family-header);font-size:1.4rem;font-weight:700;margin:0 0 .5rem;color:#fff}
.ps-aud-card p{font-size:.92rem;line-height:1.6;margin:0;color:rgba(255,255,255,.9)}

.ps-testimonials-grid{display:grid;grid-template-columns:1fr;gap:1.2rem}
@media(min-width:768px){.ps-testimonials-grid{grid-template-columns:repeat(3,1fr)}}
.ps-testimonial{background:#fff;border:1px solid #e2e8f0;border-radius:1rem;padding:1.5rem;display:flex;flex-direction:column;margin:0;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.ps-stars{color:#f59e0b;font-size:1.1rem;letter-spacing:.1em;margin-bottom:.8rem}
.ps-testimonial blockquote{flex:1;color:#334155;font-size:.92rem;line-height:1.6;margin:0;font-style:normal;quotes:none}
.ps-testimonial figcaption{display:flex;align-items:center;gap:.8rem;margin-top:1.2rem;padding-top:1rem;border-top:1px solid #f1f5f9;font-size:.85rem}
.ps-avatar{width:3rem;height:3rem;border-radius:9999px;display:grid;place-items:center;color:#fff;font-family:var(--font-family-header);font-weight:700;font-size:1rem}
.ps-avatar-mark{background:linear-gradient(135deg,#7c3aed,#5b21b6)}
.ps-avatar-lab{background:linear-gradient(135deg,#10b981,#047857)}
.ps-avatar-warn{background:linear-gradient(135deg,#f59e0b,#e11d48)}

.ps-cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:1rem;border:1px solid #e2e8f0;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.05);max-width:100%;width:100%;margin:0 auto;box-sizing:border-box}
@media(min-width:1024px){.ps-cmp-wrap{max-width:1000px}}
.ps-cmp{width:100%;min-width:520px;border-collapse:collapse;font-size:.9rem}
@media(max-width:768px){.ps-cmp{font-size:.7rem;min-width:0}.ps-cmp th,.ps-cmp td{padding:.4rem .25rem !important;word-break:break-word}.ps-cmp th{font-size:.65rem}}
.ps-cmp thead tr{background:#f8fafc;border-bottom:2px solid #e2e8f0}
.ps-cmp th{padding:1rem;font-weight:600;color:#475569;text-align:center}
.ps-cmp th:first-child{text-align:left}
.ps-cmp td{padding:.75rem 1rem;border-top:1px solid #f1f5f9;text-align:center}
.ps-cmp td:first-child{text-align:left;font-weight:500}
.ps-yes{color:#059669;font-size:1.2rem;font-weight:700}
.ps-no{color:#e11d48;font-size:1.2rem;font-weight:700}
.ps-warn-text{color:#b45309;font-size:.78rem}

.ps-credits-row{display:grid;grid-template-columns:1fr;gap:.8rem;max-width:900px;margin:0 auto 2rem}
@media(min-width:768px){.ps-credits-row{grid-template-columns:repeat(3,1fr)}}
.ps-credit-card{background:#fff;border:2px solid;border-radius:1rem;padding:1.2rem;text-align:center}
.ps-credit-mark{border-color:#c4b5fd}
.ps-credit-lab{border-color:#a7f3d0}
.ps-credit-warn{border-color:#fde68a}
.ps-credit-emoji{font-size:1.8rem;margin-bottom:.4rem}
.ps-credit-name{font-family:var(--font-family-header);font-weight:600;font-size:1.05rem}
.ps-credit-cost{font-family:var(--font-family-header);font-size:1.6rem;font-weight:700;margin-top:.5rem}
.ps-credit-desc{font-size:.78rem;color:#64748b;margin-top:.5rem;line-height:1.4}

.ps-pricing-card{background:#fff;border:1px solid #e2e8f0;border-radius:1.5rem;box-shadow:0 25px 50px -12px rgba(124,58,237,.08);max-width:1000px;margin:0 auto 2rem;padding:2rem}
@media(min-width:768px){.ps-pricing-card{padding:3rem}}
.ps-pakiety{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:600px){.ps-pakiety{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.ps-pakiety{grid-template-columns:repeat(4,1fr)}}
.ps-pakiet{background:#fff;border:1px solid #e2e8f0;border-radius:.85rem;padding:1.2rem;text-align:center;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:all .2s;position:relative}
.ps-pakiet:hover{border-color:#c4b5fd;box-shadow:0 10px 25px -5px rgba(0,0,0,.1)}
.ps-pakiet-popular{border:2px solid #c4b5fd;background:rgba(124,58,237,.03)}
.ps-pakiet-badge{position:absolute;top:-.7rem;left:50%;transform:translateX(-50%);background:#f59e0b;color:#fff;font-size:.65rem;font-weight:700;padding:.2rem .6rem;border-radius:9999px;text-transform:uppercase;letter-spacing:.05em}
.ps-pakiet-name{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:#64748b}
.ps-pakiet-credits{font-family:var(--font-family-header);font-size:1.3rem;font-weight:700;margin-top:.3rem}
.ps-pakiet-price{font-family:var(--font-family-header);font-size:1.8rem;font-weight:700;margin-top:.7rem}
.ps-pakiet-disc{font-size:.78rem;font-weight:600;margin-top:.2rem}
.ps-pakiet-hint{font-size:.7rem;color:#94a3b8;margin-top:.4rem}
.ps-pakiet-cta{margin-top:.8rem;font-size:.78rem;font-weight:600;color:#6d28d9}
.ps-pricing-info{display:grid;grid-template-columns:1fr;gap:.8rem;margin-top:1.5rem;font-size:.88rem}
@media(min-width:768px){.ps-pricing-info{grid-template-columns:repeat(2,1fr)}}
.ps-info-card{border-radius:.75rem;padding:1rem 1.2rem;border:1px solid}
.ps-info-lab{background:rgba(16,185,129,.05);border-color:rgba(16,185,129,.2)}
.ps-info-mark{background:rgba(124,58,237,.05);border-color:rgba(124,58,237,.2)}
.ps-info-h{font-weight:600;margin-bottom:.3rem}
.ps-info-lab .ps-info-h{color:#047857}
.ps-info-mark .ps-info-h{color:#6d28d9}
.ps-info-card p{font-size:.78rem;color:#475569;line-height:1.6;margin:0}
.ps-pricing-bottom{text-align:center;margin-top:2rem}
.ps-pricing-bottom .ps-meta{margin-top:.8rem;display:block;font-size:.75rem}

.ps-abonament{max-width:1000px;margin:0 auto 1.5rem}
.ps-abonament > div{background:linear-gradient(135deg,#6d28d9 0%,#5b21b6 50%,#4c1d95 100%);color:#fff;border-radius:1.5rem;padding:2rem;box-shadow:0 25px 50px -12px rgba(76,29,149,.4)}
@media(min-width:768px){.ps-abonament > div{padding:3rem}}
.ps-abon-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:center}
@media(min-width:768px){.ps-abon-grid{grid-template-columns:1fr auto}}
.ps-abon-badge{display:inline-block;background:#f59e0b;color:#fff;font-size:.65rem;font-weight:700;padding:.25rem .7rem;border-radius:9999px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.7rem}
.ps-abon-h3{font-family:var(--font-family-header);font-size:clamp(1.4rem,2.5vw,2rem);font-weight:700;line-height:1.2;margin:0 0 1rem;color:#fff}
.ps-abon-yellow{color:#fcd34d}
.ps-abon-h3 u{text-decoration-color:#f59e0b;text-decoration-thickness:3px;text-underline-offset:.25em}
.ps-abon-lead{color:#ddd6fe;font-size:1rem;line-height:1.6;margin:0 0 1rem;max-width:600px}
.ps-abon-checks{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;font-size:.85rem;color:#ddd6fe}
.ps-abon-checks div{display:flex;align-items:center;gap:.4rem}
.ps-abon-cta{display:flex;flex-direction:column;gap:.7rem}
.ps-abon-call{background:#f59e0b;color:#fff;padding:1rem 1.5rem;border-radius:.75rem;text-decoration:none;font-weight:700;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.1rem;box-shadow:0 4px 12px rgba(245,158,11,.3)}
.ps-abon-call-lbl{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;opacity:.85}
.ps-abon-call-num{font-size:1.2rem}
.ps-abon-mail{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.3);padding:.7rem 1.2rem;border-radius:.75rem;text-decoration:none;font-weight:600;font-size:.85rem;text-align:center}

.ps-whitelabel{max-width:1000px;margin:0 auto 1rem}
.ps-whitelabel > div{background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%);color:#fff;border-radius:1.5rem;padding:1.5rem 2rem;box-shadow:0 25px 50px -12px rgba(0,0,0,.3)}
.ps-wl-grid{display:grid;grid-template-columns:1fr;gap:1rem;align-items:center}
@media(min-width:768px){.ps-wl-grid{grid-template-columns:auto 1fr auto}}
.ps-wl-emoji{font-size:3rem}
.ps-wl-eyebrow{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#fcd34d;margin-bottom:.3rem}
.ps-wl-h3{font-family:var(--font-family-header);font-size:1.3rem;font-weight:700;margin:0 0 .5rem;color:#fff}
.ps-whitelabel p{font-size:.88rem;color:#cbd5e1;line-height:1.6;margin:0}

.ps-faq-wrap{max-width:850px}
.ps-faq-wrap .faq{display:flex;flex-direction:column;gap:.7rem}
.ps-faq-wrap .faq .f{background:#fff;border:1px solid #e2e8f0;border-radius:.75rem;padding:1.2rem 1.4rem}
.ps-faq-wrap .faq .f h3{font-family:var(--font-family-text);font-size:1rem;font-weight:600;color:#1e293b;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin:0;line-height:1.5}
.ps-faq-wrap .faq .f h3 .faq_arrow{color:#6d28d9;font-size:1.2rem;font-weight:400;flex-shrink:0;transition:transform .2s}
.ps-faq-wrap .faq .f h3 .faq_arrow[data-status="1"]{transform:rotate(45deg)}
.ps-faq-wrap .faq .f .t{display:none;font-size:.92rem;color:#475569;line-height:1.65;margin-top:.8rem}
.ps-faq-wrap .faq .f .t.open{display:block}

/* CTA final — bg na <section class="ps-bg-cta"> (Reguła #11) */
.ps-cta-final{color:#fff;padding:4rem 1rem;position:relative;overflow:hidden}
@media(max-width:768px){.ps-cta-final{padding:3rem 1rem}}
section.ps-bg-cta{background:linear-gradient(135deg,#6d28d9 0%,#5b21b6 50%,#4c1d95 100%);color:#fff;position:relative;overflow:hidden}
section.ps-bg-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 30%,rgba(16,185,129,.4) 0%,transparent 40%);opacity:.2;pointer-events:none}
.ps-cta-final::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 30%,rgba(16,185,129,.4) 0%,transparent 40%);opacity:.2}
.ps-cta-inner{max-width:850px;margin:0 auto;text-align:center;position:relative}
.ps-cta-lead{color:#ddd6fe;font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.6;margin:1.2rem auto 2rem;max-width:600px}
.ps-cta-form{background:rgba(255,255,255,.95);backdrop-filter:blur(8px);color:#0f172a;border-radius:1rem;padding:1.5rem 2rem;box-shadow:0 25px 50px -12px rgba(0,0,0,.3);max-width:650px;margin:0 auto;text-align:left}
.ps-cta-form input,.ps-cta-form textarea,.ps-cta-form select{background:#fff !important;border:1px solid #cbd5e1 !important;color:#0f172a !important}
.ps-cta-form button[type="submit"]{background:#6d28d9 !important;color:#fff !important;border:none}
.ps-cta-buttons{margin-top:2rem;display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
.ps-cta-foot{margin-top:1.5rem;color:#c4b5fd;font-size:.88rem;padding:0 .5rem;line-height:1.7}
.ps-cta-foot a{color:#fff;text-decoration:underline;font-weight:600;white-space:nowrap}
/* === [BLOCK: landing-pozycjosprawdzator] END === */
/* === [BLOCK: landing-workpatrol] START === */
/* ===== workpatrol.pl — landing-only CSS, palette granat + czerwony sztos B2B ===== */

/* Override --mark per-klient (body scope, NIE :root - Reguła #1):
   --mark zmienia kolor klocków używających tej zmiennej:
   pricing-card.featured border, step-number background, feature-card hover etc. */
body.wp-landing {
	--mark: #DC2626;
	--mark-dark: #B91C1C;
	--mark-light: rgba(220,38,38,.1);
}

/* ===== Hero (ciemne tło granat + radial glows + czerwone akcenty) ===== */
.wp-hero-bg-dark {
	background:
		radial-gradient(900px 500px at 12% 10%, rgba(220,38,38,.08), transparent 60%),
		radial-gradient(700px 400px at 90% 0%, rgba(220,38,38,.12), transparent 65%),
		linear-gradient(180deg, #0A0F1F 0%, #0F172A 100%) !important;
	color: #F1F5F9 !important;
}
.wp-hero-bg-dark h1,
.wp-hero-bg-dark h2,
.wp-hero-bg-dark h3,
.wp-hero-bg-dark h4 { color: #F1F5F9; }
.wp-hero-bg-dark p,
.wp-hero-bg-dark li { color: #CBD5E1; }
.wp-hero-bg-dark em { color: #DC2626; font-style: normal; font-weight: 700; }
.wp-hero-bg-dark strong { color: #fff; }

.wp-hero-bg-dark .eyebrow {
	display: inline-block;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: #FCA5A5;
	margin-bottom: 1.5rem;
	padding: .4rem .9rem;
	background: rgba(220,38,38,.15);
	border: 1px solid rgba(220,38,38,.4);
	border-radius: 999px;
}

.wp-hero-bg-dark h1 {
	font-size: clamp(2rem, 4.8vw, 3.8rem) !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
	letter-spacing: -.02em;
	margin: 0 0 1.5rem !important;
}

.wp-hero-bg-dark .hero-subtitle {
	font-size: clamp(1rem, 1.4vw, 1.2rem) !important;
	line-height: 1.6 !important;
	color: #94A3B8 !important;
	max-width: 62ch;
	margin: 0 0 2rem !important;
}

/* CTA workpatrol — primary (czerwony) + outline (ghost) */
.wp-cta-row {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}
.wp-btn-primary,
a.wp-btn-primary {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: #DC2626;
	color: #fff !important;
	border: 0;
	padding: 1rem 1.8rem;
	border-radius: 12px;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none !important;
	transition: background .2s, transform .15s, box-shadow .2s;
	box-shadow: 0 8px 28px -8px rgba(220,38,38,.6);
}
.wp-btn-primary:hover {
	background: #B91C1C;
	transform: translateY(-1px);
	box-shadow: 0 12px 36px -8px rgba(220,38,38,.7);
}
.wp-btn-ghost,
a.wp-btn-ghost {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: transparent;
	color: #F1F5F9 !important;
	border: 1px solid rgba(255,255,255,.25);
	padding: 1rem 1.8rem;
	border-radius: 12px;
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none !important;
	transition: background .2s, border-color .2s, transform .15s;
}
.wp-btn-ghost:hover {
	background: rgba(255,255,255,.05);
	border-color: rgba(255,255,255,.4);
	transform: translateY(-1px);
}
.wp-btn-tertiary,
a.wp-btn-tertiary {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	color: #FCA5A5 !important;
	text-decoration: none !important;
	font-size: .92rem;
	font-weight: 500;
	border-bottom: 1px dashed rgba(252,165,165,.4);
	padding-bottom: 2px;
	transition: color .2s, border-color .2s;
}
.wp-btn-tertiary:hover {
	color: #fff !important;
	border-bottom-color: #fff;
}

.wp-gratis-badge {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-top: 1.5rem;
	padding: .65rem 1rem;
	background: rgba(16,185,129,.12);
	border: 1px solid rgba(16,185,129,.3);
	border-radius: 8px;
	color: #6EE7B7;
	font-size: .88rem;
	font-weight: 500;
}
.wp-gratis-badge .material-symbols-outlined {
	color: #10B981;
	font-size: 18px;
}

.wp-hero-social {
	font-size: .85rem;
	color: #64748B !important;
	margin-top: 2rem !important;
}

/* ===== Bridge line (między dwiema sub-sekcjami features) ===== */
.wp-bridge {
	text-align: center;
	max-width: 800px;
	margin: 3rem auto 0;
	padding: 1.75rem 2.5rem;
	background: rgba(220,38,38,.06);
	border-top: 3px solid #DC2626;
	border-bottom: 3px solid #DC2626;
	border-radius: 4px;
	font-size: 1.1rem !important;
	line-height: 1.55;
	color: #334155 !important;
	font-weight: 500;
}
.wp-bridge strong { color: #0F172A; }

/* ===== Sub-sekcje "Co dostajesz" - eyebrow grup zielony/czerwony ===== */
.wp-features-eyebrow {
	display: inline-block;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: .35rem .8rem;
	border-radius: 999px;
	margin-bottom: 1rem;
}
.wp-features-eyebrow.green {
	background: rgba(16,185,129,.12);
	color: #047857;
}
.wp-features-eyebrow.red {
	background: rgba(220,38,38,.1);
	color: #B91C1C;
}
.wp-features-eyebrow .material-symbols-outlined {
	font-size: 14px;
	vertical-align: middle;
	margin-right: .25rem;
}

/* ===== Sytuacje "Brzmi znajomo?" (sekcja problem) ===== */
.wp-situations {
	max-width: 800px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.wp-situation-item {
	display: flex;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	background: #fff;
	border: 1px solid #E5E9F2;
	border-radius: 12px;
	border-left: 4px solid #DC2626;
	font-size: 1.05rem !important;
	color: #1E293B !important;
	line-height: 1.55 !important;
	font-style: italic;
}
.wp-situation-item .material-symbols-outlined {
	font-size: 24px;
	color: #DC2626;
	flex-shrink: 0;
	margin-top: .15rem;
}

.wp-hook-line {
	text-align: center;
	font-size: 1.15rem !important;
	font-weight: 600 !important;
	color: #0F172A !important;
	margin: 2rem auto 0 !important;
	max-width: 700px;
}
.wp-hook-line strong { color: #DC2626; }

/* ===== Deep features (4 z screenami, grid 2x2) ===== */
.wp-deep-features {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	max-width: 1100px;
	margin: 0 auto;
}
.wp-deep-card {
	background: #fff;
	border: 1px solid #E5E9F2;
	border-radius: 16px;
	padding: 2rem !important;
	transition: transform .2s, box-shadow .2s;
}
.wp-deep-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 60px -20px rgba(15,23,42,.18);
}
.wp-deep-card .wp-deep-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: rgba(220,38,38,.1);
	color: #DC2626;
	margin-bottom: 1.25rem;
}
.wp-deep-card .wp-deep-icon .material-symbols-outlined {
	font-size: 30px;
}
.wp-deep-card h3 {
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	color: #0F172A;
	margin: 0 0 .75rem !important;
	line-height: 1.3;
}
.wp-deep-card p {
	font-size: .95rem !important;
	color: #475569 !important;
	line-height: 1.6 !important;
	margin: 0 0 1.25rem !important;
}
.wp-deep-card .wp-deep-screen {
	display: block;
	width: 100%;
	height: auto;
	max-height: 360px;
	object-fit: cover;
	object-position: top center;
	border-radius: 8px;
	border: 1px solid #E5E9F2;
	cursor: pointer;
	transition: transform .2s;
}
.wp-deep-card .wp-deep-screen:hover {
	transform: scale(1.02);
}

/* ===== Sekcja Legalność (krótka, uspokajająca) ===== */
.wp-legal-grid {
	max-width: 850px;
	margin: 0 auto;
	display: grid;
	gap: 1rem;
}
.wp-legal-item {
	display: flex;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: #fff;
	border-radius: 8px;
	border-left: 3px solid #10B981;
}
.wp-legal-item .material-symbols-outlined {
	color: #10B981;
	font-size: 24px;
	flex-shrink: 0;
}
.wp-legal-item strong {
	color: #0F172A;
	font-weight: 700;
}
.wp-legal-item p {
	margin: 0 !important;
	font-size: .95rem !important;
	color: #334155 !important;
	line-height: 1.5 !important;
}

/* ===== Demo teaser ===== */
.wp-demo-teaser-img {
	display: block;
	width: 100%;
	max-width: 1100px;
	height: auto;
	margin: 0 auto;
	border-radius: 16px;
	box-shadow: 0 32px 80px -24px rgba(15,23,42,.25);
	border: 1px solid #E5E9F2;
	cursor: pointer;
	transition: transform .25s;
}
.wp-demo-teaser-img:hover {
	transform: translateY(-4px);
}

/* ===== Final CTA strip ===== */
.wp-cta-final {
	background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
	color: #fff;
	padding: 4rem 2rem !important;
	border-radius: 20px;
	text-align: center;
	max-width: 1000px;
	margin: 0 auto;
	box-shadow: 0 32px 80px -32px rgba(15,23,42,.5);
	position: relative;
	overflow: hidden;
}
.wp-cta-final::before {
	content: "";
	position: absolute;
	top: -50%;
	right: -10%;
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(220,38,38,.2) 0%, transparent 70%);
	pointer-events: none;
}
.wp-cta-final .eyebrow {
	color: #FCA5A5 !important;
	margin-bottom: 1rem;
	position: relative;
}
.wp-cta-final h2 {
	color: #fff !important;
	font-size: clamp(1.8rem, 3.5vw, 2.5rem) !important;
	margin: 0 0 1.5rem !important;
	position: relative;
}
.wp-cta-final .wp-cta-row {
	justify-content: center;
	margin-bottom: 1.5rem;
	position: relative;
}
.wp-cta-final .wp-cta-meta {
	color: rgba(255,255,255,.6) !important;
	font-size: .9rem !important;
	margin: 0 !important;
	position: relative;
}

@media (max-width: 768px) {
	.wp-deep-features { grid-template-columns: 1fr; }
	.wp-cta-row .wp-btn-primary,
	.wp-cta-row .wp-btn-ghost { width: 100%; justify-content: center; }
	.wp-cta-final { padding: 3rem 1.5rem !important; margin: 0 1rem; }
}

/* === [BLOCK: landing-workpatrol] END === */
/* === [BLOCK: page-base] START === */
/* Lokalne dodatkowe zmienne (NIE pulsujące — tylko ok-* niestandardowe) */
:root {
	--ok-ink:#0A1330;        /* granat hero */
	--ok-ink-2:#101A3D;
	--ok-cta:#5EFFB6;        /* neonowy CTA */
	--ok-cta-ink:#082019;
	--ok-amber:#FFB547;
	--ok-blue:#2563EB;
}

body { background:#FAFBFC; color:#0F172A; }
a { transition: color .2s, background .2s, transform .2s, box-shadow .2s; }

/* Nagłówki — większe, śmielsze niż domyślne (fit do hero-look) */
h1, .h1 { font-size: clamp(2rem, 5.5vw, 3.6rem); letter-spacing:-0.02em; line-height:1.05; font-weight:800; }
h2, .h2 { font-size: clamp(1.6rem, 4.5vw, 2.6rem); letter-spacing:-0.015em; line-height:1.1; font-weight:800; }
h3, .h3 { font-size: clamp(1.15rem, 2.5vw, 1.35rem); letter-spacing:-0.005em; line-height:1.25; font-weight:700; }
/* === [BLOCK: page-base] END === */
/* === [BLOCK: section-margins-reset-bridge] START === */
/* Lejdis-bhp - reset duzych marginow theme/AOS, spojny rytm 2rem/3rem */
/* !important bo Bridge daje marginy inline w style="margin:..." (np. AOS dorzuca 6rem) */
html body section.container.aos-init { margin-top: 0 !important; margin-bottom: 0 !important; }
html body section.container.mw900px { margin-top: 0 !important; margin-bottom: 0 !important; }
html body section.container.layout-2:has(.testimonials),
html body section.container:has(> .section-content .testimonials) {
  margin-top: 2rem !important; margin-bottom: 2rem !important;
}
/* === [BLOCK: section-margins-reset-bridge] END === */
/* === [BLOCK: section-paddings-bridge] START === */
/* Lejdis-bhp - spojne paddingi sekcji (Bridge nie daje paddingu pionowego) */
html body section.container { padding-top: 2rem; padding-bottom: 2rem; }
html body section.container.bg-grey-lighter,
html body section.container.bg-mark-light {
  padding-top: 3rem; padding-bottom: 3rem;
}
/* Reset marginow pierwszego/ostatniego elementu w section-content */
section.container > .section-content > div > *:first-child { margin-top: 0; }
section.container > .section-content > div > *:last-child { margin-bottom: 0; }
section.container > .section-content > *:first-child { margin-top: 0; }
section.container > .section-content > *:last-child { margin-bottom: 0; }
@media (max-width: 768px) {
  html body section.container { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  html body section.container.bg-grey-lighter,
  html body section.container.bg-mark-light {
    padding-top: 2rem; padding-bottom: 2rem;
  }
}
/* === [BLOCK: section-paddings-bridge] END === */
/* === [BLOCK: section-spacing] START === */
/* Większy oddech w hero/features — ładniej niż domyślne 4rem.
   UWAGA: sekcja dnt_creator JEST kontenerem, nie ma dziecka .container.
   Dlatego selector na sekcji bezpośrednio. Inline style padding="" wygra
   z tym CSS — ale gdy padding jest pusty, klasa zadziała. */
section.section-tight { padding-top:1.5rem !important; padding-bottom:1.5rem !important; }
section.section-roomy { padding-top:5rem !important; padding-bottom:5rem !important; }
@media (max-width:700px){
	section.section-roomy { padding-top:3rem !important; padding-bottom:3rem !important; }
}
/* === [BLOCK: section-spacing] END === */
/* === [BLOCK: steps-v1-bridge] START === */
/* Lejdis-bhp - kroki/etapy procesu (uzywane np. w "Jak wyglada wspolpraca") */
section.container.steps-v1 > .section-content { position: relative; align-items: flex-start; }
section.container.steps-v1 > .section-content > div {
  position: relative; text-align: center; padding: 0 0.5rem;
}
/* Kolko z numerem - biale na niebieskim tle bg-mark-light */
section.container.steps-v1 > .section-content > div > div:first-child {
  width: 60px; height: 60px; border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.25rem auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  position: relative; z-index: 2;
}
section.container.steps-v1 > .section-content > div > div:first-child span {
  font-size: 1.5rem !important; color: #277ABD; font-weight: 700; line-height: 1;
}
/* Linia laczaca kroki - pozioma na desktop */
section.container.steps-v1 > .section-content > div::before {
  content: ""; position: absolute; top: 30px;
  left: -50%; right: 50%; height: 3px;
  background: rgba(255,255,255,0.5); z-index: 1;
}
section.container.steps-v1 > .section-content > div:first-of-type::before { display: none; }
section.container.steps-v1 > .section-content > div p { color: #fff; margin: 0.25rem 0; line-height: 1.5; }
section.container.steps-v1 > .section-content > div p strong {
  display: block; font-size: 1rem; margin-bottom: 0.5rem; color: #fff;
}
/* Mobile: pionowy uklad */
@media (max-width: 768px) {
  section.container.steps-v1 > .section-content > div { margin-bottom: 1.5rem; }
  section.container.steps-v1 > .section-content > div::before {
    top: -1.25rem; left: 50%; right: auto;
    width: 3px; height: 1.25rem; transform: translateX(-50%);
  }
}
/* === [BLOCK: steps-v1-bridge] END === */

/* === [BLOCK: pup-katalog] START === */
/* Branding katalogu urzędów pracy — kolorystyka czarno-zielono-biała (decyzja Przemka 2026-07-22).
   Per-site powiatowy-urzad-pracy.pl. */
:root {
	--mark:#16A34A;
	--mark-light:#5BC98A;
	--mark-dark:#107C3A;
	--grey-dark:#111827;   /* teksty + tło stopki: czarny zamiast szarego */
	--grey-darker:#030712; /* pasek copyright pod stopką */
}

/* Wyszukiwarka urzędów w hero */
.pup-szukajka { position: relative; max-width: 640px; margin: 0 0 1rem; }
.pup-szukajka input {
	width: 100%; padding: 1.15rem 8rem 1.15rem 3.25rem; font-size: 1.12rem;
	border: 2px solid var(--mark); border-radius: 16px; background: var(--white);
	box-shadow: 0 18px 44px -14px color-mix(in srgb, var(--mark) 45%, transparent);
	outline: none; transition: border-color .2s, box-shadow .2s;
}
.pup-szukajka input:focus {
	border-color: var(--mark-dark);
	box-shadow: 0 18px 48px -10px color-mix(in srgb, var(--mark) 60%, transparent);
}
.pup-szukajka .pup-szukajka-ico {
	position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%);
	color: var(--mark); pointer-events: none; line-height: 1;
}
/* Przycisk „Szukaj" wbudowany w pole — poprawka widoczności wyszukiwarki (Przemek 2026-07-23) */
.pup-szukajka-btn {
	position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
	height: calc(100% - 12px); padding: 0 1.35rem; border: 0; border-radius: 12px;
	background: var(--mark); color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer;
	display: inline-flex; align-items: center; gap: .4rem; line-height: 1; transition: background .2s;
}
.pup-szukajka-btn:hover { background: var(--mark-dark); }
.pup-szukajka-btn .material-symbols-outlined { font-size: 1.25rem; }
@media (max-width: 560px) {
	.pup-szukajka input { padding-right: 3.75rem; }
	.pup-szukajka-btn { padding: 0 .8rem; }
	.pup-szukajka-btn .pup-szukajka-btn-txt { display: none; }
}
.pup-szukaj-wyniki {
	position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 300;
	background: var(--white); border: 1px solid var(--line); border-radius: 14px;
	box-shadow: 0 24px 60px -20px color-mix(in srgb, var(--ink) 35%, transparent);
	max-height: 420px; overflow-y: auto; text-align: left;
}
.pup-szukaj-wyniki a {
	display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
	padding: .8rem 1.1rem; color: var(--ink) !important; text-decoration: none !important;
	border-bottom: 1px solid var(--surface-2); border-radius: 0;
}
.pup-szukaj-wyniki a:last-child { border-bottom: 0; }
.pup-szukaj-wyniki a:hover, .pup-szukaj-wyniki a.active { background: var(--surface); }
.pup-szukaj-wyniki a .woj { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.pup-szukaj-wyniki .pup-szukaj-brak { padding: .8rem 1.1rem; color: var(--muted); font-size: .92rem; }

/* Kafle województw — siatka (brak .feature-grid w tej wersji bloku feature-cards) + rozwijana lista urzędów */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.feature-card .feat-ico {
	background: color-mix(in srgb, var(--mark) 10%, transparent);
	color: var(--mark);
}
.feature-card details { margin-top: .75rem; }
.feature-card details summary {
	cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .35rem;
	color: var(--mark); font-weight: 600; font-size: .9rem; user-select: none;
}
.feature-card details summary::-webkit-details-marker { display: none; }
.feature-card details summary::after { content: "expand_more"; font-family: 'Material Symbols Outlined'; font-size: 1.1rem; transition: transform .2s; }
.feature-card details[open] summary::after { transform: rotate(180deg); }
.feature-card details ul { list-style: none; margin: .6rem 0 0; padding: 0; }
.feature-card details ul li { margin: 0; padding: 0; }
.feature-card details ul li a {
	display: block; padding: .35rem 0; font-size: .9rem; line-height: 1.35;
	color: var(--text) !important; text-decoration: none;
	border-bottom: 0 !important;
}
.feature-card details ul li a:hover { color: var(--mark) !important; }

/* Sekcja SEO na głównej (text_container) — kontener zamiast full-width od krawędzi */
main.p1 .text_container.body1 { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }

html { scroll-behavior: smooth; }

/* Chipy popularnych miast pod szukajką */
.pup-miasta { margin: 1.25rem 0 .75rem; }
.pup-miasta .pill,
.pup-miasta a.pill {
	background: color-mix(in srgb, var(--mark) 10%, transparent);
	color: var(--mark-dark);
	border: 1px solid color-mix(in srgb, var(--mark) 25%, transparent);
	text-decoration: none; cursor: pointer;
	transition: background .2s, color .2s;
}
.pup-miasta .pill:hover { background: var(--mark); color: var(--white); }

/* Mapa Polski + kafle województw obok siebie */
.pup-woj-uklad { display: grid; grid-template-columns: minmax(300px, 42%) 1fr; gap: 2.5rem; align-items: start; }
main.p1 #wojewodztwa.container { overflow: visible; } /* core daje .container overflow:hidden — zabija position:sticky mapy */
.pup-mapa-box { position: sticky; top: 24px; }
.pup-mapa { width: 100%; height: auto; display: block; }
.pup-mapa .pup-mapa-woj {
	fill: color-mix(in srgb, var(--mark) 26%, var(--white));
	stroke: var(--white); stroke-width: 2;
	cursor: pointer; transition: fill .2s;
}
.pup-mapa .pup-mapa-woj:hover { fill: var(--mark-light); }
.pup-mapa .pup-mapa-woj.active { fill: var(--mark); }
.pup-woj-kafle.feature-grid { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 1.25rem; }
.pup-woj-kafle .feature-card.active { border-color: var(--mark); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mark) 35%, transparent); }
/* Kafel województwa = link do huba /wojewodztwo-{slug}/ (poprawka Przemka 2026-07-23) */
.pup-woj-card { display: flex; flex-direction: column; align-items: flex-start; text-decoration: none !important; cursor: pointer; }
.pup-woj-card .pup-woj-card-nazwa { font-size: 1.15rem; font-weight: 700; color: #0F172A; line-height: 1.3; }
.pup-woj-card .pup-woj-card-liczba { font-size: .92rem; color: var(--muted); margin-top: .35rem; }
.pup-woj-card .pup-woj-card-go { margin-top: .9rem; font-size: .9rem; font-weight: 600; color: var(--mark-dark); display: inline-flex; align-items: center; gap: .3rem; }
.pup-woj-card:hover .pup-woj-card-go { color: var(--mark); }
@media (max-width: 900px) {
	.pup-woj-uklad { grid-template-columns: 1fr; }
	.pup-mapa-box { position: static; max-width: 420px; margin: 0 auto; }
}

/* Sekcja „Jak korzystać" — 3 kroki */
.pup-kroki { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.pup-krok { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 1.75rem 1.5rem; text-align: center; }
.pup-krok-nr {
	width: 44px; height: 44px; margin: 0 auto 1rem; border-radius: 50%;
	background: var(--mark); color: var(--white);
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 1.15rem;
}
.pup-krok h3 { margin: 0 0 .5rem; font-size: 1.1rem; }
.pup-krok p { margin: 0; color: var(--text-soft); font-size: .95rem; line-height: 1.55; }

/* Hero: zielone tinty i eyebrow zamiast hardcodowanego niebieskiego (starsza wersja bloku hero-light w bazie) */
.bg-ok-sky {
	background:
		radial-gradient(900px 500px at 12% 0%, color-mix(in srgb, var(--mark) 8%, transparent), transparent 60%),
		radial-gradient(700px 400px at 90% 100%, color-mix(in srgb, var(--mark) 7%, transparent), transparent 65%),
		linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--mark) 6%, var(--white)) 100%) !important;
}
.bg-ok-sky .eyebrow { color: var(--mark-dark); background: color-mix(in srgb, var(--mark) 10%, transparent); }
.bg-ok-sky a:not(.btn):not(.pricing-cta) { color: var(--mark); border-bottom-color: color-mix(in srgb, var(--mark) 30%, transparent); }
.bg-ok-sky a:not(.btn):not(.pricing-cta):hover { border-bottom-color: var(--mark); }
.bg-ok-sky .pup-miasta a.pill { color: var(--mark-dark); border: 1px solid color-mix(in srgb, var(--mark) 25%, transparent); }
.bg-ok-sky .pup-miasta a.pill:hover { color: var(--white); background: var(--mark); }

/* Stopka czarna (schemat czarno-zielono-biały; markup floty ma bg-grey-lighter) */
footer.footer_wrapper .footer_content.bg-grey-lighter { background: var(--grey-dark) !important; color: #D1D5DB; }
footer.footer_wrapper .footer_content h2,
footer.footer_wrapper .footer_content h3,
footer.footer_wrapper .footer_content h4,
footer.footer_wrapper .footer_content strong { color: var(--white); }
footer.footer_wrapper .footer_content a { color: var(--mark-light); }
footer.footer_wrapper .footer_content a:hover { color: var(--white); }
footer.footer_wrapper .footer_content input[type=submit] { background: var(--mark); color: var(--white); border: 0; }
footer.footer_wrapper .footer_content input[type=submit]:hover { background: var(--mark-dark); }
.footer_credits { background: var(--grey-darker); color: #9CA3AF; }
.footer_credits .center { padding-top: .6rem; padding-bottom: .6rem; }
.footer_credits a { color: var(--mark-light); }

/* Hub województwa (theme o_cat.php) — kafle urzędów + interlinking */
.pup-hub-grid.feature-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; }
.pup-hub-card { display: flex; flex-direction: column; align-items: flex-start; text-decoration: none !important; cursor: pointer; }
.pup-hub-card .pup-hub-city { font-size: 1.15rem; font-weight: 700; color: #0F172A; line-height: 1.3; }
.pup-hub-card .pup-hub-name { font-size: .88rem; color: var(--muted); margin-top: .2rem; }
.pup-hub-card .pup-hub-go { margin-top: .9rem; font-size: .9rem; font-weight: 600; color: var(--mark-dark); display: inline-flex; align-items: center; gap: .3rem; }
.pup-hub-card:hover .pup-hub-go { color: var(--mark); }
.pup-hub-woj-links { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.pup-hub-woj-links a {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .5rem .9rem; border-radius: 999px;
	background: var(--white); border: 1px solid var(--line);
	color: var(--text) !important; text-decoration: none !important; font-size: .92rem;
	transition: border-color .2s, color .2s;
}
.pup-hub-woj-links a:hover { border-color: var(--mark); color: var(--mark-dark) !important; }
.pup-hub-woj-links a span { font-size: .78rem; color: var(--muted); background: var(--surface); border-radius: 999px; padding: .05rem .45rem; }
/* === [BLOCK: pup-katalog] END === */

/* === [BLOCK: pup-urzad] START === */
/* Strona pojedynczego urzędu pracy ($page=='o', theme o.php). Per-site powiatowy-urzad-pracy.pl. */

/* Nagłówek — chipy szybkich faktów (ocena / telefon / adres) */
.pup-urzad-fakty { display: flex; flex-wrap: wrap; gap: .65rem; }
.pup-urzad-fakty .pup-fakt {
	display: inline-flex; align-items: center; gap: .45rem;
	padding: .55rem .95rem; border-radius: 999px;
	background: var(--white); border: 1px solid var(--line);
	color: var(--text) !important; text-decoration: none !important; font-size: .95rem; line-height: 1;
}
.pup-urzad-fakty a.pup-fakt:hover { border-color: var(--mark); }
.pup-urzad-fakty .pup-fakt .material-symbols-outlined { font-size: 1.15rem; color: var(--mark); }
.pup-urzad-fakty .pup-fakt strong { color: #0F172A; }
.pup-urzad-fakty .pup-fakt-sub { color: var(--muted); font-size: .85rem; }

/* Karta kontaktu */
.pup-kontakt-card { height: 100%; }
.pup-kontakt-card h2, .pup-kontakt-card h3 { color: #0F172A; }
.pup-adres { display: flex; gap: .6rem; font-style: normal; line-height: 1.5; margin: 0 0 1rem; }
.pup-adres .material-symbols-outlined { color: var(--mark); font-size: 1.35rem; flex: 0 0 auto; margin-top: .1rem; }
.pup-kontakt-lista { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.pup-kontakt-lista li { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; margin: 0; }
.pup-kontakt-lista li .material-symbols-outlined { color: var(--mark); font-size: 1.3rem; flex: 0 0 auto; }
.pup-kontakt-lista li a { text-decoration: none; word-break: break-word; }
.pup-godziny { margin: .5rem 0 0; }
.pup-godziny li { text-transform: capitalize; }

/* Kolumna prawa — zdjęcie + mapa */
.pup-urzad-foto { width: 100%; height: auto; max-height: 380px; object-fit: cover; border-radius: 1rem; margin-bottom: 1rem; display: block; }
.pup-mapa-embed { border-radius: 1rem; overflow: hidden; line-height: 0; }
.pup-mapa-full iframe { height: 460px; }
@media (max-width: 700px) { .pup-mapa-full iframe { height: 340px; } }

/* Opinie Google */
/* Karuzela owl w kontenerze flex (layout-1 .section-content): flex-item domyślnie ma min-width:auto
   i nie zwęża się poniżej szerokości owl-stage (min-content WSZYSTKICH slajdów) → treść przycinana
   na mobile. min-width:0 + overflow:hidden przerywa rozdmuchanie kolumny. */
#opinie .section-content { min-width: 0; }
#opinie .section-content > div { min-width: 0; max-width: 100%; }
.testimonials { max-width: 100%; overflow: hidden; }
.pup-opinie-srednia { display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; margin: 0 0 1.5rem; flex-wrap: wrap; }
.pup-opinie-srednia .pup-gwiazdka { color: #F5A623; font-size: 1.6rem; line-height: 1; font-variation-settings: 'FILL' 1; }
.pup-opinie-srednia strong { color: #0F172A; }
.pup-link-google, .pup-link-woj { display: inline-flex; align-items: center; gap: .4rem; color: var(--mark-dark) !important; font-weight: 600; text-decoration: none !important; }
.pup-link-google:hover, .pup-link-woj:hover { color: var(--mark) !important; }
.pup-link-google .material-symbols-outlined { font-size: 1.15rem; }
/* karuzela recenzji: karta na jasnym tle sekcji surface-2 */
#opinie .testimonial { background: var(--white); border: 1px solid var(--line); border-radius: 1rem; padding: 1.5rem; height: 100%; }
#opinie .testimonial .text { color: var(--text-soft); line-height: 1.6; margin: .9rem 0; font-size: .95rem; }
#opinie .testimonial .name { font-weight: 700; color: #0F172A; }
#opinie .testimonial .date { color: var(--muted); font-size: .82rem; }
#opinie .testimonial .source .name { font-weight: 600; font-size: .82rem; color: var(--muted); }
#opinie .owl-nav button.owl-prev, #opinie .owl-nav button.owl-next { color: var(--mark) !important; }
#opinie .owl-dots .owl-dot.active span { background: var(--mark) !important; }

/* Nabory (data_json) — zaświeci w etapie 7 */
.pup-nabory-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }
.pup-nabor { display: flex; flex-direction: column; align-items: flex-start; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: .75rem; padding: 1.25rem 1.4rem; }
.pup-nabor-akt { border-left-color: var(--mark); }
.pup-nabor-typ { font-weight: 700; color: #0F172A; margin-bottom: .6rem; }
.pup-nabor-status { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .92rem; }
.pup-nabor-status .material-symbols-outlined { font-size: 1.2rem; }
.pup-nabor-status-on { color: var(--mark-dark); }
.pup-nabor-status-off { color: var(--muted); }
.pup-nabor-status .material-symbols-outlined { font-size: 1.15rem; }
.pup-nabor-termin { margin-top: .5rem; font-size: .9rem; color: var(--text-soft); }
.pup-nabor-link { display: inline-flex; align-items: center; gap: .3rem; margin-top: .75rem; font-size: .88rem; font-weight: 600; color: var(--mark-dark) !important; text-decoration: none !important; }
.pup-nabor-link:hover { color: var(--mark) !important; }
/* Kafle naborów w 2 kolumnach + 3 najnowsze ogłoszenia w kaflu */
.pup-nabory-2col { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .pup-nabory-2col { grid-template-columns: 1fr; } }
.pup-nabor-akts { width: 100%; margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; }
.pup-nabor-akt-item { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .55rem 0; text-decoration: none !important; border-bottom: 1px solid var(--surface-2); }
.pup-nabor-akt-item:last-child { border-bottom: 0; padding-bottom: 0; }
.pup-nabor-akt-tytul { color: #0F172A; font-size: .9rem; line-height: 1.35; }
a.pup-nabor-akt-item:hover .pup-nabor-akt-tytul { color: var(--mark-dark); text-decoration: underline; }
.pup-nabor-akt-data { color: var(--muted); font-size: .8rem; white-space: nowrap; flex: 0 0 auto; }

/* Aktualności — układ jak dashboard crawlera (tytuł + plakietki + nabór + publikacja) */
.pup-akt-lista { display: flex; flex-direction: column; gap: .5rem; }
.pup-akt-row { padding: 1rem 1.15rem; background: var(--white); border: 1px solid var(--line); border-radius: .7rem; transition: box-shadow .2s, border-color .2s; }
.pup-akt-row.pup-akt-hl { border-color: var(--mark); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mark) 30%, transparent); }
.pup-akt-tytul { font-weight: 600; line-height: 1.4; margin-bottom: .55rem; }
.pup-akt-tytul a { color: #0F172A !important; text-decoration: none; }
.pup-akt-tytul a:hover { color: var(--mark-dark) !important; text-decoration: underline; }
.pup-akt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; font-size: .85rem; color: var(--muted); }
.pup-akt-nabor { display: inline-flex; align-items: center; gap: .3rem; }
.pup-akt-nabor .material-symbols-outlined { font-size: 1.05rem; }
.pup-akt-pub { color: var(--muted); }
.pup-badge { display: inline-flex; align-items: center; padding: .15rem .6rem; border-radius: 999px; font-size: .76rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.pup-badge-dotacja    { background: color-mix(in srgb, var(--mark) 15%, transparent); color: var(--mark-dark); }
.pup-badge-niepewny   { background: #FEF3C7; color: #92400E; }
.pup-badge-zakonczony { background: var(--surface-2); color: var(--muted); }
.pup-badge-typ        { background: #E5EDF7; color: #1E3A5F; }

/* Archiwum aktualności (/{slug}/aktualnosci/) — filtry status+typ jak dashboard */
.pup-akt-filtry { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.75rem; }
.pup-akt-filtr-grupa { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pup-akt-filtr-lbl { font-weight: 700; color: #0F172A; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; margin-right: .25rem; }
.pup-akt-chip { padding: .4rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--text); font-size: .88rem; font-weight: 600; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.pup-akt-chip:hover { border-color: var(--mark); }
.pup-akt-chip.active { background: var(--mark); border-color: var(--mark); color: #fff; }
.pup-akt-brak { color: var(--muted); padding: 1rem 0; }

/* Inne urzędy w województwie — inline chipy */
.pup-woj-inline { display: flex; flex-wrap: wrap; gap: .55rem; }
.pup-woj-inline a {
	display: inline-flex; align-items: center;
	padding: .5rem .95rem; border-radius: 999px;
	background: var(--white); border: 1px solid var(--line);
	color: var(--text) !important; text-decoration: none !important; font-size: .93rem;
	transition: border-color .2s, color .2s;
}
.pup-woj-inline a:hover { border-color: var(--mark); color: var(--mark-dark) !important; }
/* === [BLOCK: pup-urzad] END === */