/* ============================================================
   _style_90_wow.css — biblioteka wow-components (AUTO-GENEROWANE)
   NIE EDYTUJ RECZNIE — nadpisywany w calosci przez `css_patch.py --sync`.
   Override per-klient -> _style_100_custom.css (laduje sie POZNIEJ, wygrywa).
   ============================================================ */

/* === [BLOCK: page-base] START === */
/* ok-* zmapowane na paletę z _style-default.css — ciemne=neutral slate, akcent=brand klienta.
   ŻADNYCH wymyślonych kolorów. Brand --mark per klient. */
:root {
	--ok-ink:var(--ink);
	--ok-ink-2:var(--ink-2);
	--ok-cta:var(--mark);
	--ok-cta-ink:var(--white);
	--ok-amber:var(--mark-light);
	--ok-blue:var(--mark);
}

body { background:var(--surface); color:var(--ink); }
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; }

/* Wybór liczby kolumn dla gridów (feature/checklist/glass) — domyślnie auto-fit, cols-N wymusza N */
.feature-grid.cols-2, .check-grid.cols-2, .glass-grid.cols-2 { grid-template-columns:repeat(2,1fr); }
.feature-grid.cols-3, .check-grid.cols-3, .glass-grid.cols-3 { grid-template-columns:repeat(3,1fr); }
.feature-grid.cols-4, .check-grid.cols-4, .glass-grid.cols-4 { grid-template-columns:repeat(4,1fr); }
.feature-grid.cols-5, .check-grid.cols-5, .glass-grid.cols-5 { grid-template-columns:repeat(5,1fr); }
.feature-grid.cols-6, .check-grid.cols-6, .glass-grid.cols-6 { grid-template-columns:repeat(6,1fr); }
@media (max-width:900px){ .feature-grid[class*=cols-],.check-grid[class*=cols-],.glass-grid[class*=cols-]{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .feature-grid[class*=cols-],.check-grid[class*=cols-],.glass-grid[class*=cols-]{ grid-template-columns:1fr; } }
/* === [BLOCK: page-base] 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:color-mix(in srgb, var(--white) 4%, transparent); border:1px solid color-mix(in srgb, var(--white) 8%, transparent);
	border-radius:12px; margin-bottom:.65rem;
}
.bg-white .icon-list li, body:not(.dark_mode) .icon-list:not(.dark) li {
	background:var(--white); border:1px solid var(--line);
}
.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:color-mix(in srgb, var(--mark) 15%, transparent);
}
.bg-white .icon-list li .il-ico, body:not(.dark_mode) .icon-list:not(.dark) li .il-ico {
	background:linear-gradient(135deg, color-mix(in srgb, var(--mark) 15%, transparent), color-mix(in srgb, var(--mark) 10%, transparent));
}
.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; }
/* Defensywa: jasna karta (bez .dark) na sekcji kolorowej dziedziczy color:var(--white)
   z sekcji -> bialy tekst na bialej karcie. Wymuszamy ciemny tekst w karcie. */
.bg-mark .icon-list:not(.dark) li,
.bg-mark-light .icon-list:not(.dark) li,
.bg-mark-dark .icon-list:not(.dark) li,
.bg-ok-ink .icon-list:not(.dark) li {
	color:var(--text);
}
.bg-mark .icon-list:not(.dark) li h4,
.bg-mark-light .icon-list:not(.dark) li h4,
.bg-mark-dark .icon-list:not(.dark) li h4,
.bg-ok-ink .icon-list:not(.dark) li h4 {
	color:var(--ink);
}
/* === [BLOCK: bullet-icon-list] END === */

/* === [BLOCK: checklist-grid] START === */
/* Siatka „GA4 events gratis" — small chips z check.
   Kontrast: tekst var(--white) 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:color-mix(in srgb, var(--mark) 18%, transparent); border:1.5px solid color-mix(in srgb, var(--mark) 50%, transparent);
	color:var(--white); font-weight:600;
}
.check-grid .ck {
	background:color-mix(in srgb, var(--mark) 10%, transparent); border:1.5px solid color-mix(in srgb, var(--mark) 35%, transparent);
	color:var(--ink); 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: comparison-table] START === */
/* Tabela porównawcza vs konkurencja */
/* Tabela jest zawsze JASNĄ WYSPĄ — działa też gdy sekcja ma ciemne tło (bg-ok-ink/-ink-2).
   Bez tego ciemny tekst komórek (--ink/--ink-2) ginie na ciemnym tle sekcji. */
.compare-table {
	width:100%; border-collapse:separate; border-spacing:0; margin:1.5rem 0; font-size:.95rem;
	background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden;
	box-shadow:0 10px 30px -12px rgba(10,19,48,.18);
}
/* Komórki na jasnym tle wyspy — wymuszamy jasne tło i ciemny czytelny tekst nawet w sekcji ciemnej. */
.compare-table thead th, .compare-table tbody td { background:var(--surface); }
.bg-ok-ink .compare-table tbody td:not(.us-col), .bg-ok-ink-2 .compare-table tbody td:not(.us-col),
.bg-ok-blue .compare-table tbody td:not(.us-col), .bg-ok-mint .compare-table tbody td:not(.us-col) { color:var(--ink-2); }
.bg-ok-ink .compare-table tbody td:first-child, .bg-ok-ink-2 .compare-table tbody td:first-child,
.bg-ok-blue .compare-table tbody td:first-child, .bg-ok-mint .compare-table tbody td:first-child { color:var(--ink); }
/* Highlighted kolumna zachowuje zielony akcent marki nawet w sekcji ciemnej. */
.bg-ok-ink .compare-table td.us-col, .bg-ok-ink-2 .compare-table td.us-col,
.bg-ok-blue .compare-table td.us-col, .bg-ok-mint .compare-table td.us-col { color:var(--mark-dark); }
.compare-table thead th {
	background:var(--surface); color:var(--text-soft); font-weight:600; text-align:left;
	padding:1rem .9rem; border-bottom:2px solid var(--line); font-size:.85rem;
	letter-spacing:.02em;
}
.compare-table thead th.us {
	background:linear-gradient(135deg, var(--mark-dark), var(--mark));
	color:var(--white); 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 var(--line); color:var(--ink-2); vertical-align:top;
}
.compare-table tbody td:first-child { font-weight:600; color:var(--ink); }
.compare-table tbody tr:hover td { background:var(--surface); }
.compare-table td.us-col {
	background:color-mix(in srgb, var(--mark) 6%, transparent); font-weight:600; color:var(--mark-dark);
	border-left:1px solid color-mix(in srgb, var(--mark) 20%, transparent);
	border-right:1px solid color-mix(in srgb, var(--mark) 20%, transparent);
}
.compare-table tbody tr:last-child td.us-col { border-bottom:1px solid color-mix(in srgb, var(--mark) 20%, transparent); border-bottom-left-radius:10px; border-bottom-right-radius:10px; }
/* RWD: poniżej 700px tabela przebudowuje się w stackowane karty (bez scrolla poziomego).
   Wartości muszą mieć atrybut data-label="nazwa kolumny" — etykieta pojawia się z lewej. */
@media (max-width: 700px) {
	.compare-table { font-size:.92rem; margin:1rem 0; }
	.compare-table thead { display:none; }
	.compare-table, .compare-table tbody, .compare-table tr, .compare-table td { display:block; width:100%; }
	.compare-table tr { margin-bottom:1rem; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--white); }
	.compare-table tbody td { border-bottom:1px solid var(--line); padding:.65rem .9rem; }
	.compare-table tbody td:first-child { font-weight:700; background:var(--surface-2); color:var(--ink); font-size:.98rem; }
	.compare-table tbody td:not(:first-child) { padding:.55rem .9rem; }
	.compare-table tbody td:not(:first-child)::before { content:attr(data-label); display:block; font-size:.7rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.1rem; }
	.compare-table td.us-col { border-left:0; border-right:0; background:color-mix(in srgb, var(--mark) 8%, transparent); }
	.compare-table tbody tr:last-child td.us-col { border-radius:0; }
}
/* === [BLOCK: comparison-table] 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:color-mix(in srgb, var(--white) 6%, transparent) !important; color:var(--surface-2) !important;
	border:1.5px solid color-mix(in srgb, var(--white) 15%, transparent) !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:color-mix(in srgb, var(--mark) 40%, transparent) !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 color-mix(in srgb, var(--mark) 55%, transparent) !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 color-mix(in srgb, var(--mark) 70%, transparent) !important;
}
.bg-ok-ink form .form-check, .bg-ok-ink-2 form .form-check { color:color-mix(in srgb, var(--white) 75%, transparent); 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: 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: 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:var(--white) !important; border:1px solid var(--line) !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:color-mix(in srgb, var(--mark) 40%, transparent) !important; box-shadow:0 8px 28px -10px color-mix(in srgb, var(--mark) 20%, transparent); }
.faq .f h3 {
	position:relative; cursor:pointer;
	width:100% !important; max-width:100% !important; box-sizing:border-box !important;
	padding:1.1rem 3.6rem 1.1rem 1.3rem !important; margin:0 !important;
	font-size:1.02rem !important; font-weight:600 !important; color:var(--ink);
	display:flex; align-items:center; gap:1rem;
}
/* Strzałka pozycjonowana absolutnie z prawej — nigdy nie wyjedzie poza kartę */
.faq .f h3 span.faq_arrow {
	position:absolute !important; right:1.3rem; top:50%; transform:translateY(-50%);
	float:none !important; flex-shrink:0;
	width:28px; height:28px; border-radius:50%;
	background:color-mix(in srgb, var(--mark) 12%, transparent); 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:var(--white); transform:translateY(-50%) rotate(45deg); }
/* Odpowiedź ukryta domyślnie, pokazywana po rozwinięciu (klasa .active) */
.faq .f .t { display:none; padding:0 1.3rem 1.2rem !important; color:var(--text-soft); line-height:1.6; font-size:.95rem; }
.faq .f.active .t { display:block; }
/* === [BLOCK: faq-pretty] END === */

/* === [BLOCK: feature-cards] START === */
/* Karty feature — siatka kafli z ikonami w kółku, biały kafelek z subtelną ramką */
.feature-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1.5rem; }
.feature-card {
	background:var(--white); border:1px solid var(--line); border-radius:16px;
	color:var(--text);   /* defensja: ciemna baza karty — goły tekst nie dziedziczy bieli z sekcji kolorowej */
	padding:1.5rem !important;
	transition: transform .2s, box-shadow .2s, border-color .2s;
	height:100%; position:relative;
}
.feature-card:hover { transform:translateY(-4px); box-shadow:0 18px 40px -16px color-mix(in srgb, var(--ink) 18%, transparent); border-color:var(--line); }
.feature-card .feat-ico {
	display:inline-flex; align-items:center;
	font-size:2.1rem; color:var(--mark); line-height:1;
	margin-bottom:.75rem;
}
.feature-card h3 { font-size:1.1rem !important; margin:.25rem 0 .5rem !important; color:var(--ink); line-height:1.3; }
.feature-card p { font-size:.92rem; color:var(--text-soft); line-height:1.55; margin:0; }

/* Wariant karty z plakietką „Gratis" / „W cenie" */
.feature-card .feat-tag {
	position:absolute; top:1.1rem; right:1.1rem;
	font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
	background:color-mix(in srgb, var(--mark) 18%, transparent); color:color-mix(in srgb, var(--mark-dark) 45%, var(--ink));
	padding:.3rem .55rem; border-radius:6px;
}
/* === [BLOCK: feature-cards] 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: start;
	max-width: 1100px;
	margin: 0 auto;
}
.founder-story-wrap .founder-avatar-col { position: sticky; top: 2rem; }

.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 .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: var(--ink);
}
.founder-narrative p {
	font-size: 1.05rem !important;
	line-height: 1.7 !important;
	color: var(--text);
	margin: 0 0 1.1rem !important;
	max-width: 56ch;
}
.founder-narrative p strong {
	color: var(--ink);
	font-weight: 700;
}
.founder-narrative .founder-signoff {
	font-size: .95rem !important;
	color: var(--text-soft);
	margin-top: 1.5rem !important;
	font-style: italic;
}
.founder-narrative .founder-signoff strong {
	color: var(--ink);
	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: var(--white);
	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 color-mix(in srgb, var(--ink) 30%, transparent);
	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: var(--ink) !important;
	margin: 0 !important;
}
.founder-role {
	font-size: .9rem;
	color: var(--muted);
	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: var(--surface-2); }
.bg-ok-ink .founder-narrative p,
.wp-hero-bg-dark .founder-narrative p { color: var(--line-soft); }
.bg-ok-ink .founder-narrative p strong,
.wp-hero-bg-dark .founder-narrative p strong { color: var(--white); }
.bg-ok-ink .founder-name,
.wp-hero-bg-dark .founder-name { color: var(--surface-2) !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: glass-card] START === */
/* Szklana karta — siatka kart na ciemnej sekcji (bg-ok-ink/-2) */
.glass-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:1.5rem; }
.glass {
	/* defensja kontrastu: ciemny podkład gwarantuje czytelność jasnego tekstu
	   NIEZALEŻNIE od koloru sekcji-rodzica (nie tylko bg-ok-ink) */
	background:
		linear-gradient(color-mix(in srgb, var(--ink) 65%, transparent), color-mix(in srgb, var(--ink) 65%, transparent)),
		color-mix(in srgb, var(--white) 6%, transparent);
	color:var(--white);
	border:1px solid color-mix(in srgb, var(--white) 14%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-radius:18px;
	padding:1.5rem !important;
	box-shadow: 0 30px 80px -20px color-mix(in srgb, var(--black) 55%, transparent);
}
.glass.dark {
	background:
		linear-gradient(color-mix(in srgb, var(--ink) 65%, transparent), color-mix(in srgb, var(--ink) 65%, transparent)),
		color-mix(in srgb, var(--mark) 55%, transparent);
}
.glass h3 { font-size:1.05rem !important; margin:.25rem 0 .75rem !important; color:var(--white); }
.glass p { font-size:.92rem; opacity:.85; color:var(--white); }
.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:pointer; text-decoration:none; transition:filter .2s, transform .15s;
}
.glass .glass-actions a.gb:hover { filter:brightness(1.08); transform:translateY(-1px); }
.glass .glass-actions .gb.primary { background:var(--ok-cta); color:var(--ok-cta-ink); }
.glass .glass-actions .gb.ghost { background:transparent; color:var(--white); border:1px solid color-mix(in srgb, var(--white) 30%, transparent); }
.glass .glass-actions .gb.muted { color:color-mix(in srgb, var(--white) 60%, transparent); }
.glass .glass-tags { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:1rem; padding-top:1rem; border-top:1px dashed color-mix(in srgb, var(--white) 15%, transparent); }
.glass .glass-tags span {
	font-size:.7rem; font-weight:600; letter-spacing:.05em;
	color:color-mix(in srgb, var(--white) 85%, transparent); background:color-mix(in srgb, var(--ink) 25%, transparent);
	padding:.3rem .55rem; border-radius:6px;
}
/* === [BLOCK: glass-card] END === */

/* === [BLOCK: gradient-sections] START === */
.bg-ok-ink-2 {
	background:linear-gradient(135deg, var(--ink-2) 0%, var(--ink-2) 50%, var(--ink) 100%) !important;
	color:var(--surface-2) !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:var(--surface-2) !important; }

.bg-ok-blue {
	background:linear-gradient(135deg, var(--mark-dark) 0%, var(--mark) 60%, var(--mark-light) 100%) !important;
	color:var(--surface-2) !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:var(--surface-2) !important; }

.bg-ok-mint {
	background:linear-gradient(135deg, var(--mark-dark) 0%, var(--mark-dark) 60%, var(--mark-dark) 100%) !important;
	color:color-mix(in srgb, var(--mark) 7%, var(--white)) !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:color-mix(in srgb, var(--mark) 7%, var(--white)) !important; }
/* === [BLOCK: gradient-sections] END === */

/* === [BLOCK: hero-dark] START === */
/* Hero ciemny granat z neonowym akcentem + radial glows */
.bg-ok-ink {
	background-color:var(--ink) !important;
	background:
		radial-gradient(900px 500px at 12% 10%, color-mix(in srgb, var(--mark) 10%, transparent), transparent 60%),
		radial-gradient(700px 400px at 90% 0%, color-mix(in srgb, var(--mark) 18%, transparent), transparent 65%),
		linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%) var(--ink) !important;
	color:var(--surface-2) !important;
}
/* PATCH:hero-dark-ink-fallback-20260615 - solid ink pod gradientem + AOS opacity fix */
.bg-ok-ink[data-aos^="fade"] { opacity:1 !important; }
/* !important — wygrywa z kolorami nagłówków z szablonu (blog single, theme) o tej samej specyficzności */
.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:var(--surface-2) !important; }
.bg-ok-ink em { color:var(--ok-cta) !important; font-style:normal; }
.bg-ok-ink strong { color:var(--white) !important; }
.bg-ok-ink .eyebrow { color:var(--ok-cta) !important; }
.bg-ok-ink .eyebrow::before { background:var(--ok-cta); }
.bg-ok-ink .pill { background:color-mix(in srgb, var(--mark) 12%, transparent); color:var(--ok-cta); border:1px solid color-mix(in srgb, var(--mark) 30%, transparent); }

/* Plakietka „nowość" / banner u góry hero */
.hero-banner {
	display:inline-flex; align-items:center; gap:.5rem;
	background:color-mix(in srgb, var(--mark) 12%, transparent); color:var(--mark-light); border:1px solid color-mix(in srgb, var(--mark) 35%, transparent);
	padding:.4rem .85rem; border-radius:999px; font-size:.82rem; font-weight:600;
	margin-bottom:1.25rem;
}
.hero-banner::before { content:"●"; color:var(--mark); 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%, 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) 7%, var(--white)) 100%) !important;
	color: var(--ink) !important;
}
.bg-ok-sky h1, .bg-ok-sky h2, .bg-ok-sky h3, .bg-ok-sky h4 { color: var(--ink); }
.bg-ok-sky p, .bg-ok-sky li { color: var(--text); }
.bg-ok-sky em { color: var(--mark); font-style: normal; font-weight: 700; }
.bg-ok-sky strong { color: var(--ink); }
.bg-ok-sky a:not(.btn):not(.pricing-cta) { color: var(--mark); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--mark) 30%, transparent); }
.bg-ok-sky a:not(.btn):not(.pricing-cta):hover { border-bottom-color: var(--mark); }

/* Hero-light specyficzne klasy */
.bg-ok-sky .eyebrow {
	display: inline-block;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mark);
	margin-bottom: 1.25rem;
	padding: .35rem .75rem;
	background: color-mix(in srgb, var(--mark) 8%, transparent);
	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: var(--text-soft);
	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: var(--mark);
	color: var(--white) !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 color-mix(in srgb, var(--mark) 50%, transparent);
}
.bg-ok-sky .btn-sky-primary:hover {
	background: var(--mark-dark);
	transform: translateY(-1px);
	box-shadow: 0 12px 32px -8px color-mix(in srgb, var(--mark) 60%, transparent);
}
.bg-ok-sky .btn-sky-outline,
.bg-ok-sky a.btn-sky-outline {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: transparent;
	color: var(--ink) !important;
	border: 1px solid var(--line-soft);
	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: var(--white);
	border-color: var(--muted-soft);
	transform: translateY(-1px);
}

.bg-ok-sky .hero-meta {
	font-size: .85rem;
	color: var(--muted);
	margin-top: .5rem;
}

/* Mockup card po prawej */
.bg-ok-sky .hero-mockup {
	border-radius: 16px;
	margin-top: 2.5rem;
	overflow: hidden;
	box-shadow: 0 32px 80px -32px color-mix(in srgb, var(--ink) 30%, transparent);
	border: 1px solid color-mix(in srgb, var(--mark) 15%, transparent);
	background: var(--white);
	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: var(--muted);
}
.bg-ok-sky .hero-trust span {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}
.bg-ok-sky .hero-trust span::before {
	content: "✓";
	color: var(--mark);
	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: 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 color-mix(in srgb, var(--mark) 55%, transparent), inset 0 -2px 0 color-mix(in srgb, var(--black) 12%, transparent) !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 color-mix(in srgb, var(--mark) 70%, transparent), inset 0 -2px 0 color-mix(in srgb, var(--black) 12%, transparent) !important;
}
nav.neon p > a::after, .btn-neon::after {
	content:"→"; margin-left:.25rem; font-weight:800; font-size:1.1em;
}

/* Ghost button (drugorzędny) — domyślnie czytelny na JASNYM tle */
nav.ghost p > a {
	background:transparent !important;
	color:var(--text) !important;
	border:1.5px solid var(--line-soft) !important;
	padding:.9rem 1.5rem !important;
	border-radius:12px !important;
	font-weight:600 !important;
}
nav.ghost p > a:hover { background:var(--surface-2) !important; border-color:var(--muted) !important; }
/* Na CIEMNYCH sekcjach ghost staje się biały */
.bg-ok-ink nav.ghost p > a, .bg-ok-ink-2 nav.ghost p > a {
	color:var(--white) !important;
	border-color:color-mix(in srgb, var(--white) 35%, transparent) !important;
}
.bg-ok-ink nav.ghost p > a:hover, .bg-ok-ink-2 nav.ghost p > a:hover {
	background:color-mix(in srgb, var(--white) 10%, transparent) !important;
	border-color:color-mix(in srgb, var(--white) 60%, transparent) !important;
}
/* === [BLOCK: neon-cta] 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:color-mix(in srgb, var(--mark) 10%, transparent); color:var(--mark-dark);
	font-size:.82rem; font-weight:600; border:1px solid color-mix(in srgb, var(--mark) 25%, transparent);
}
.pill.amber { background:color-mix(in srgb, var(--mark) 12%, transparent); color:var(--mark-dark); border-color:color-mix(in srgb, var(--mark) 30%, transparent); }
.pill.violet { background:color-mix(in srgb, var(--mark) 12%, transparent); color:var(--mark2-dark); border-color:color-mix(in srgb, var(--mark) 25%, transparent); }
.pill.rose { background:color-mix(in srgb, var(--mark) 12%, transparent); color:var(--mark-dark); border-color:color-mix(in srgb, var(--mark) 25%, transparent); }
/* === [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: var(--surface-2);
	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: var(--muted);
	cursor: pointer;
	transition: background .2s, color .2s;
}
.pricing-toggle button.active {
	background: var(--white);
	color: var(--ink);
	box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 8%, transparent);
}
.pricing-toggle .save-badge {
	display: inline-block;
	background: color-mix(in srgb, var(--mark) 15%, transparent);
	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: var(--white);
	border: 1px solid var(--line);
	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 color-mix(in srgb, var(--ink) 18%, transparent);
}
.pricing-card.featured {
	border: 2px solid var(--mark);
	box-shadow: 0 24px 60px -20px color-mix(in srgb, var(--ink) 18%, transparent);
}
.pricing-card .pricing-badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--mark);
	color: var(--white);
	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: var(--ink);
	margin: 0 0 .25rem !important;
	line-height: 1.2;
}
.pricing-card .pricing-subtitle {
	font-size: .9rem;
	color: var(--muted);
	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: var(--ink);
	line-height: 1;
	margin: 0;
}
.pricing-card .pricing-currency {
	font-size: 1rem;
	font-weight: 500;
	color: var(--muted);
}
.pricing-card .pricing-period {
	font-size: .9rem;
	color: var(--muted);
}
.pricing-card .pricing-price-note {
	font-size: .75rem;
	color: var(--muted-soft);
	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: var(--text);
	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: var(--muted-soft);
}
.pricing-card ul.pricing-features li.muted::before {
	content: "—";
	color: var(--line-soft);
}
.pricing-card ul.pricing-features li strong {
	color: var(--ink);
}
.pricing-card .pricing-cta {
	display: block;
	width: 100%;
	box-sizing: border-box;
	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: var(--ink) !important;
	border: 1px solid var(--line-soft);
}
.pricing-card .pricing-cta.outline:hover {
	background: var(--surface-2);
	transform: translateY(-1px);
}
.pricing-card .pricing-cta.primary {
	background: var(--mark);
	color: var(--white) !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: var(--muted);
	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: 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-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.showcase-grid.cols-6 { grid-template-columns: repeat(6, 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 8px 24px -12px color-mix(in srgb, var(--ink) 16%, transparent);
	border: 1px solid var(--line);
	background: var(--white);
	overflow: hidden;
}
.showcase-item:hover .showcase-img {
	box-shadow: 0 16px 40px -14px color-mix(in srgb, var(--ink) 26%, transparent);
}
.showcase-item .showcase-caption {
	margin-top: 1rem;
	font-size: .92rem !important;
	color: var(--text-soft) !important;
	line-height: 1.5 !important;
	text-align: center;
}
.showcase-item .showcase-caption strong {
	color: var(--ink);
	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: var(--line-soft) !important; }
.bg-ok-ink .showcase-item .showcase-caption strong,
.wp-hero-bg-dark .showcase-item .showcase-caption strong { color: var(--white); }
.bg-ok-ink .showcase-item .showcase-img,
.wp-hero-bg-dark .showcase-item .showcase-img { border-color: color-mix(in srgb, var(--white) 10%, transparent); }

/* Lightbox overlay - vanilla JS */
.showcase-lightbox {
	display: none;
	position: fixed;
	inset: 0;
	background: color-mix(in srgb, var(--ink) 92%, transparent);
	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 color-mix(in srgb, var(--black) 50%, transparent);
}
.showcase-lightbox-close {
	position: fixed;
	top: 1.5rem;
	right: 1.5rem;
	width: 48px;
	height: 48px;
	background: color-mix(in srgb, var(--white) 10%, transparent);
	color: var(--white);
	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: color-mix(in srgb, var(--white) 20%, transparent);
}
.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: section-eyebrow] START === */
/* Mała etykieta nad H2 — np. "Co to jest", "Porównanie", "FAQ" */
.eyebrow {
	display:inline-flex; align-items:center;
	font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
	color:var(--mark-dark); margin-bottom:.6rem;
}
.bg-ok-ink .eyebrow, .bg-ok-ink-2 .eyebrow { color:var(--ok-cta); }
/* Na kolorowych (brand) sekcjach eyebrow biały — inaczej czerwony tonie w czerwonym tle */
.bg-ok-blue .eyebrow, .bg-ok-mint .eyebrow { color:var(--white); }
/* === [BLOCK: section-eyebrow] 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: split-section] START === */
/* Sekcja dwukolumnowa: LEWY blok treści + PRAWY blok wsparcia, dowolnie łączone (X×Y).
   align-items:start kasuje "pustkę" (prawa nie wisi wyśrodkowana w pionie). */
.split-wrap {
	display:grid; gap:3rem; align-items:start;
	max-width:1100px; margin:0 auto;
	grid-template-columns:1.4fr 1fr; /* domyślnie text-media */
}
.split-wrap.split-text-media { grid-template-columns:1.4fr 1fr; }  /* lewy szerszy (lekki prawy: avatar/zdjęcie) */
.split-wrap.split-balanced   { grid-template-columns:1fr 1fr; }    /* równo (ciężki prawy: formularz/statystyki) */

/* Prawa kolumna "jedzie" z długą treścią lewej */
.split-right.split-sticky { position:sticky; top:2rem; }

/* --- LEWY: narracja / value-prop / problem / feature --- */
.split-left { position:relative; }
.split-left.split-bar { padding-left:2rem; }
.split-left.split-bar::before {
	content:""; position:absolute; left:0; top:0; bottom:0;
	width:3px; background:var(--mark); border-radius:2px;
}
.split-left .eyebrow { margin-bottom:1rem; }
.split-left h2 {
	font-size:clamp(1.6rem,3vw,2.2rem) !important; font-weight:700 !important;
	line-height:1.25 !important; margin:0 0 1.25rem !important; color:var(--ink);
}
.split-left p { font-size:1.05rem !important; line-height:1.7 !important; color:var(--text); margin:0 0 1.1rem !important; max-width:56ch; }
.split-left p strong { color:var(--ink); font-weight:700; }
.split-left .split-cta {
	display:inline-flex; align-items:center; gap:.5rem; margin-top:.5rem;
	background:var(--mark); color:var(--white) !important; padding:.85rem 1.6rem; border-radius:12px;
	font-weight:600; text-decoration:none !important; transition:background .2s, transform .15s;
	box-shadow:0 8px 24px -8px color-mix(in srgb, var(--mark) 50%, transparent);
}
.split-left .split-cta:hover { background:var(--mark-dark); transform:translateY(-1px); }
.split-left ul.split-list { list-style:none; padding:0; margin:1rem 0 0; }
.split-left ul.split-list li { display:flex; gap:.65rem; align-items:flex-start; padding:.4rem 0; font-size:1rem; color:var(--text); }
.split-left ul.split-list li .material-symbols-outlined { color:var(--mark); flex-shrink:0; font-size:1.3rem; }

/* --- PRAWY: avatar --- */
.split-avatar { text-align:center; }
.split-avatar .av {
	width:200px; height:200px; border-radius:50%;
	background:linear-gradient(135deg, var(--mark) 0%, var(--mark-dark) 100%); color:var(--white);
	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 color-mix(in srgb, var(--ink) 30%, transparent);
}
.split-avatar .av img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.split-avatar .nm { font-size:1.15rem !important; font-weight:700 !important; color:var(--ink) !important; margin:0 !important; }
.split-avatar .rl { font-size:.9rem; color:var(--muted); margin:.25rem 0 0 !important; }

/* --- PRAWY: zdjęcie w ramce --- */
.split-photo {
	border-radius:16px; overflow:hidden; border:1px solid var(--line); background:var(--white);
	box-shadow:0 32px 80px -32px color-mix(in srgb, var(--ink) 30%, transparent);
}
.split-photo img { display:block; width:100%; height:auto; }

/* --- PRAWY: statystyki KPI --- */
.split-stats { display:flex; flex-direction:column; gap:1rem; }
.split-stats .stat { background:var(--white); border:1px solid var(--line); border-radius:14px; padding:1.5rem; }
.split-stats .stat .num { font-size:2.4rem; font-weight:800; color:var(--mark); line-height:1; }
.split-stats .stat .lbl { font-size:.95rem; color:var(--text-soft); margin-top:.35rem; }

/* --- PRAWY: mini-formularz --- */
.split-form {
	background:var(--white); border:1px solid var(--line); border-radius:16px; padding:1.75rem;
	box-shadow:0 24px 60px -28px color-mix(in srgb, var(--ink) 20%, transparent);
}
.split-form h3 { font-size:1.2rem !important; margin:0 0 1rem !important; color:var(--ink); }
.split-form input, .split-form textarea {
	width:100%; box-sizing:border-box; margin-bottom:.7rem; padding:.8rem 1rem;
	border:1px solid var(--line-soft); border-radius:10px; font-size:.95rem; font-family:inherit;
	color:var(--ink); background:var(--surface);
}
.split-form input:focus, .split-form textarea:focus { outline:none; border-color:var(--mark); background:var(--white); }
.split-form button {
	width:100%; box-sizing:border-box; padding:.85rem; border:0; border-radius:10px;
	background:var(--mark); color:var(--white); font-weight:600; font-size:.95rem; cursor:pointer; transition:background .2s;
}
.split-form button:hover { background:var(--mark-dark); }

/* Wariant ciemny (sekcja .bg-ok-ink) */
.bg-ok-ink .split-left h2 { color:var(--surface-2); }
.bg-ok-ink .split-left p { color:var(--line-soft); }
.bg-ok-ink .split-left p strong { color:var(--white); }
.bg-ok-ink .split-left ul.split-list li { color:var(--line-soft); }  /* defensja: lista nie zostaje ciemna na ciemnej sekcji */
.bg-ok-ink .split-avatar .nm { color:var(--surface-2) !important; }

/* RWD: stack, prawą (avatar/zdjęcie) nad treść przez .split-media-first */
@media (max-width:768px) {
	.split-wrap, .split-wrap.split-text-media, .split-wrap.split-balanced { grid-template-columns:1fr; gap:2rem; }
	.split-right.split-sticky { position:static; }
	.split-wrap.split-media-first .split-right { order:-1; }
	.split-avatar .av { width:140px; height:140px; font-size:3rem; }
	.split-left.split-bar { padding-left:1.2rem; }
}
/* === [BLOCK: split-section] 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: var(--white);
	font-size: 1.4rem;
	font-weight: 700;
	font-family: var(--font-family-header, inherit);
	margin: 0 auto 1rem;
	box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--ink) 25%, transparent);
	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: var(--ink) !important;
	margin: 0 0 .5rem !important;
	line-height: 1.3;
}
.step-desc {
	font-size: .95rem !important;
	color: var(--text-soft) !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, var(--line-soft) 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: var(--ink); }
.bg-ok-ink .steps-list .step-title { color: var(--surface-2) !important; }
.bg-ok-ink .steps-list .step-desc { color: var(--line-soft) !important; }
.bg-ok-ink .step-item:not(:last-child)::after {
	background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--white) 20%, transparent) 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: ai-authority] START === */
/* Sekcja autorytetu "Dlaczego AI poleca" — duże staty (z eeat:) + cytat o AI + chipy jakościowe.
   ZAKŁADA ciemne tło sekcji (klasa bg-ok-ink na sekcji). Wymaga: page-base (tokeny --ok-*),
   hero-dark (.bg-ok-ink + kolory tekstu/em/strong na ciemnym), section-eyebrow (typografia .eyebrow). */
.ai-auth { max-width:1100px; margin:0 auto; }
.ai-auth .ai-auth-lead { font-size:1.05rem; color:var(--surface-2); opacity:.85; margin:.5rem 0 2rem; max-width:60ch; }

/* Staty — duże brandowe liczby na półprzezroczystych kartach */
.ai-stat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:1.25rem; margin-bottom:2.25rem; }
.ai-stat {
	text-align:left; padding:1.1rem 1.25rem; border-radius:14px;
	background:color-mix(in srgb, var(--white) 6%, transparent);
	border:1px solid color-mix(in srgb, var(--surface-2) 12%, transparent);
}
.ai-stat-num { display:block; font-size:clamp(2rem,4.5vw,2.9rem); font-weight:800; line-height:1; color:var(--ok-cta); letter-spacing:-0.02em; }
.ai-stat-lbl { display:block; margin-top:.4rem; font-size:.9rem; color:var(--surface-2); opacity:.8; line-height:1.3; }

/* Cytat o AI — wyróżniony box w kolorze marki */
.ai-auth-quote {
	display:flex; gap:1rem; align-items:flex-start;
	background:color-mix(in srgb, var(--mark) 12%, transparent);
	border:1px solid color-mix(in srgb, var(--mark) 32%, transparent);
	border-radius:16px; padding:1.4rem 1.6rem; margin-bottom:1.75rem;
}
.ai-auth-quote .ai-auth-ico { font-size:2rem; color:var(--ok-cta); line-height:1; flex-shrink:0; }
.ai-auth-quote p { font-size:1.15rem; font-weight:600; color:var(--surface-2); line-height:1.45; margin:0; }
.ai-auth-quote strong { color:var(--white); }

/* Chipy jakościowe */
.ai-auth-chips { display:flex; flex-wrap:wrap; gap:.6rem; }
.ai-chip {
	display:inline-flex; align-items:center; gap:.4rem;
	background:color-mix(in srgb, var(--white) 7%, transparent);
	border:1px solid color-mix(in srgb, var(--surface-2) 14%, transparent);
	color:var(--surface-2); padding:.45rem .8rem; border-radius:999px; font-size:.88rem; font-weight:600;
}
.ai-chip .material-symbols-outlined { font-size:1.1rem; color:var(--ok-cta); }
/* === [BLOCK: ai-authority] END === */

/* === [BLOCK: section-paddings-neve] START === */
/* Neve nie daje paddingu sekcjom z tlem we WSZYSTKICH layoutach. Theme ma tylko
   `main section.full section.container > .section-content {padding:0 2rem}` (_style.css:857)
   - dziala wylacznie pod `main.full` (oferta/podstrony). Blog/sidebar (`section_container left`,
   `section_container right`) tej reguly NIE lapie -> sekcje bg-* maja padding 0/0 -> tekst dotyka
   krawedzi pasa koloru (Zlota regula #2). Ten klocek domyka brakujace paddingi dla KAZDEGO layoutu.

   Zasada bezpieczenstwa:
   - POZIOM: zawsze na `.section-content` sekcji z tlem (clamp 1rem mobile -> 2rem desktop).
     Identyczny z theme 2rem@desktop -> tam gdzie theme juz dziala nic sie nie zmienia,
     tam gdzie theme nie siega (blog) - dosypuje oddech z bokow. `.unset` (full-bleed) wykluczone.
   - PION: tylko gdy sekcja NIE ma wlasnego inline `padding` (`:not([style*="padding"])`).
     Sekcje z `style="padding:5rem 0"` (generowane przez agent-seo) zachowuja swoj padding.
     Sekcje z tlem ale bez inline paddingu (blog bg-grey-lighter) dostaja 2.5rem/3.5rem. */

html body section.container[class*="bg-"]:not(.unset) > .section-content {
  padding-left: clamp(1rem, 4vw, 2rem);
  padding-right: clamp(1rem, 4vw, 2rem);
}
html body section.container[class*="bg-"]:not([style*="padding"]) {
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

/* === ODSTEP MIEDZY SEKCJAMI (~4rem) — padding-block sekcji BEZ tla ===
   Problem: sekcje BEZ tla (zwlaszcza na blogu/sidebarze, gdzie theme nie daje ani paddingu
   ani marginu) stykaja sie pionowo bez oddechu (gap 0px - sklejone). Na ofercie sasiad-bez-tla
   ma juz margin-block ~64px, ale na blogu padTB=0 i marTB=0 -> 0px.
   Fix: dosypujemy ~2rem padding-block sekcjom BEZ klasy bg-*, bez wlasnego inline paddingu,
   nie-pierwszym (hero), nie full-bleed (.unset). Wtedy:
     - sasiad-z-tlem (2.5-3.5rem internal) + sasiad-bez-tla (~2rem) = ~4-5rem oddechu
     - dwie sekcje bez-tla = ~2rem + ~2rem = ~4rem
   PADDING, nie margin: pasy z tlem (bg-*) zostaja sklejone bez bialych szczelin (kanon reguly #3);
   oddech powstaje wewnatrz sasiada bez tla, nie jako pusta przerwa miedzy pasami koloru. */
html body .text_container > section.container:not([class*="bg-"]):not(.unset):not([style*="padding"]):not(:first-child) {
  padding-top: clamp(1.5rem, 3vw, 2rem);
  padding-bottom: clamp(1.5rem, 3vw, 2rem);
}
@media (max-width: 768px) {
  html body .text_container > section.container:not([class*="bg-"]):not(.unset):not([style*="padding"]):not(:first-child) {
    padding-top: 1.25rem; padding-bottom: 1.25rem;
  }
}
/* Reset marginu pierwszego/ostatniego elementu w section-content (zeby padding gory/dolu byl realny) */
section.container[class*="bg-"] > .section-content > div > *:first-child { margin-top: 0; }
section.container[class*="bg-"] > .section-content > div > *:last-child { margin-bottom: 0; }
section.container[class*="bg-"] > .section-content > *:first-child { margin-top: 0; }
section.container[class*="bg-"] > .section-content > *:last-child { margin-bottom: 0; }

@media (max-width: 768px) {
  /* Theme daje na mobile section.container padding-inline 1rem !important (_style.css:946) -
     poziom juz jest. Zostaje tylko pewny pion gdy brak inline paddingu. */
  html body section.container[class*="bg-"]:not([style*="padding"]) {
    padding-top: 2rem; padding-bottom: 2rem;
  }
}
/* === [BLOCK: section-paddings-neve] END === */