/* ============================================================
   SECTIONS - nav, hero, marquee, footer. (kolejne sekcje dopisywane nizej)
   ============================================================ */

/* ---------- NAV ---------- */
.nav {
	position: fixed; inset: 0 0 auto 0; z-index: 100;
	transition: background .3s var(--ease), box-shadow .3s var(--ease), padding .3s var(--ease);
	padding-block: 18px;
}
.nav__inner {
	max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter);
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav__logo img { height: 58px; width: auto; transition: height .3s var(--ease); }
.nav.is-stuck .nav__logo img { height: 48px; }
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__item--has { position: relative; }
.nav__top {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--font-head); font-weight: 700; font-size: 0.95rem;
	color: var(--text-strong); position: relative; padding: 8px 0;
}
.nav__top::after {
	content: ""; position: absolute; left: 0; bottom: 2px; width: 0; height: 2px;
	background: var(--bright); transition: width .25s var(--ease);
}
.nav__top:hover::after { width: 100%; }
/* Pozycja bez wlasnej podstrony ("Agencja") - sam naglowek dropdownu, renderowany jako <button>.
   Reset do wygladu .nav__top. Swiadomie BEZ skrotu `border`: mobilny .nav__top (nizej w pliku) dokłada
   border-bottom jako rozdzielacz, a shorthand o tej samej specyficznosci zdjalby go przy innej kolejnosci. */
.nav__top--group { background: none; border-width: 0; cursor: pointer; }
.nav__caret { transition: transform .25s var(--ease); }
.nav__item--has:hover .nav__caret,
.nav__item--has:focus-within .nav__caret { transform: rotate(180deg); }

/* Dropdown */
.nav__drop {
	position: absolute; top: 100%; left: -14px; min-width: 250px;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
	box-shadow: var(--shadow); padding: 10px; display: flex; flex-direction: column; gap: 2px;
	opacity: 0; visibility: hidden; transform: translateY(8px); transition: .2s var(--ease);
}
/* focus-within: bez tego dropdownu nie da sie otworzyc z klawiatury - a "Agencja" nie ma wlasnej strony,
   wiec Realizacje/Cennik/Poznajmy sie bylyby dla Taba nieosiagalne. */
.nav__item--has:hover .nav__drop,
.nav__item--has:focus-within .nav__drop { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__drop a {
	font-family: var(--font-head); font-weight: 600; font-size: 0.9rem;
	color: var(--text-strong); padding: 10px 12px; border-radius: 6px; white-space: nowrap;
	transition: background .2s, color .2s;
}
.nav__drop a:hover { background: var(--bg-alt); color: var(--green-ink); }
.nav__actions { display: flex; align-items: center; gap: 14px; }
.nav__burger { display: none; background: none; border: 0; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; }
.nav__burger span { width: 24px; height: 2px; background: var(--navy); transition: transform .25s var(--ease), opacity .2s; }
/* Kompaktowy przycisk kontaktu - tylko mobile (na desktopie/tablecie jest tekstowy .btn--sm). */
.nav__contact { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--green); color: #fff; flex: none; transition: background .2s var(--ease); }
.nav__contact:hover { background: var(--bright); }
.nav__contact svg { display: block; }

/* stan po scrollu - biale tlo */
.nav.is-stuck { background: #fff; box-shadow: 0 6px 24px rgba(11,43,64,0.08); padding-block: 10px; }

/* ---------- HERO ---------- */
.hero {
	position: relative; overflow: hidden;
	padding-top: clamp(130px, 17vh, 200px);
	padding-bottom: clamp(60px, 8vw, 110px);
	/* Cale tlo hero (baza + poswiaty + orby + siatka) w JEDNEJ warstwie tla elementu.
	   Wczesniej: osobne pelnoekranowe nakladki (hero__bg, 3x hero__orb z GSAP-owym
	   floatem, ::after z maska, scrim nad wszystkim) - stos warstw dusil software'owy
	   kompozytor w lab PSI/Lighthouse (bialy ekran do ~2,3 s, LCP ~5,9 s). Zmierzone
	   psidbg-bisekcja 2026-07-30: usuniecie tych warstw = perf 73 -> 96. Wyglad ~ten sam. */
	background-image:
		radial-gradient(190px at calc(42% + 130px) calc(30% + 130px), rgba(218,238,255,.30) 0%, rgba(218,238,255,.27) 40%, rgba(218,238,255,0) 100%),
		radial-gradient(290px at calc(100% - 170px) 110px, rgba(11,64,51,.13) 0%, rgba(11,64,51,.12) 42%, rgba(11,64,51,0) 100%),
		radial-gradient(250px at 110px calc(100% - 70px), rgba(22,71,115,.12) 0%, rgba(22,71,115,.11) 42%, rgba(22,71,115,0) 100%),
		linear-gradient(rgba(11,43,64,.02) 1px, transparent 1px),
		linear-gradient(90deg, rgba(11,43,64,.02) 1px, transparent 1px),
		radial-gradient(60% 50% at 100% 0%, rgba(11,64,51,0.10), transparent 70%),
		radial-gradient(50% 50% at 0% 100%, rgba(22,71,115,0.08), transparent 70%),
		linear-gradient(180deg, #fff 0%, var(--bg-alt) 100%);
	background-size: auto, auto, auto, 48px 48px, 48px 48px, auto, auto, auto;
}
.hero__inner {
	position: relative; z-index: 3;
	max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter);
	min-height: clamp(560px, 80vh, 780px);
	display: flex; align-items: center;
}
.hero__copy { max-width: 600px; }
.hero__title {
	font-size: var(--fs-hero); line-height: 0.98; letter-spacing: -0.035em;
	margin: 8px 0 26px; color: var(--navy);
}
.hero__accent { color: var(--lime); display: block; }
.hero__desc { font-size: var(--fs-lead); color: var(--text-muted); max-width: 33em; margin: 0 0 32px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__media { position: relative; }
.hero__frame {
	border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
	background: #fff; will-change: transform;
}
.hero__frame img { width: 100%; height: auto; }
.hero__chip {
	position: absolute; z-index: 2;
	font-family: var(--font-head); font-weight: 800; font-size: 0.8rem;
	background: #fff; color: var(--navy);
	padding: 12px 18px; border-radius: 100px; box-shadow: var(--shadow);
}
.hero__chip--1 { top: 8%; left: -18px; }
.hero__chip--2 { bottom: 10%; right: -12px; color: var(--green-ink); }

/* ---------- MARQUEE ---------- */
.marquee {
	background: #fff; border-block: 1px solid var(--line);
	padding-block: 30px; overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track { display: flex; align-items: center; width: max-content; animation: harta-marquee 38s linear infinite; }
.marquee__group { display: flex; align-items: center; gap: clamp(46px, 6vw, 90px); padding-right: clamp(46px, 6vw, 90px); }
.marquee img { height: 30px; width: auto; object-fit: contain; display: block; opacity: .55; filter: grayscale(1); transition: opacity .25s, filter .25s; }
.marquee img:hover { opacity: 1; filter: grayscale(0); }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes harta-marquee { to { transform: translateX(-50%); } }

/* Marquee interaktywny - JS dodaje .is-interactive i przejmuje na scroll-based
   (swipe palcem na mobile, drag myszką na desktopie). Bez JS zostaje animacja CSS wyżej. */
.marquee.is-interactive { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; cursor: grab; user-select: none; -webkit-user-select: none; }
.marquee.is-interactive::-webkit-scrollbar { width: 0; height: 0; display: none; }
.marquee.is-interactive.is-grabbing { cursor: grabbing; }
.marquee.is-interactive .marquee__track { animation: none; transform: none; }
.marquee.is-interactive img { -webkit-user-drag: none; }

/* ---------- FOOTER ---------- */
.foot { background: var(--forest); color: rgba(255,255,255,0.78); padding-top: clamp(60px,8vw,100px); overflow-x: clip; }
.foot__inner {
	max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter);
	display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px;
}
.foot__brand { min-width: 0; }
.foot__logo { height: 38px; width: auto; margin-bottom: 18px; filter: brightness(0) invert(1); }
.foot__tagline { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: #fff; max-width: 22ch; line-height: 1.4; }
.foot__heading { font-family: var(--font-head); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: #33C98A; margin: 0 0 16px; } /* WCAG AA: 5,49:1 na --forest (bylo --lime #22B274 = 4,28) */
.foot__col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.foot__col a { color: rgba(255,255,255,0.78); font-size: 0.95rem; transition: color .2s; overflow-wrap: break-word; }
.foot__col a:hover { color: #fff; }
.foot__social { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; color: rgba(255,255,255,0.78); }
.foot__social svg { flex: none; }
.foot__social:hover { color: var(--bright); }
.foot__bottom {
	max-width: var(--container); margin: clamp(50px,7vw,80px) auto 0; padding: 22px var(--gutter);
	border-top: 1px solid rgba(255,255,255,0.12);
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
	justify-content: space-between; font-size: 0.85rem; color: rgba(255,255,255,0.55);
}
.foot__flag { color: #33C98A; } /* zgodnie z .foot__heading - lime na forest oblewa AA */

/* ---------- RESPONSIVE (Phase A) ---------- */
/* Nav zwija sie do burgera przy 1150px, nie przy 900. Pomiar (Montserrat 700 + boksy z CSS):
   5 pozycji = 563px etykiet + logo 174px + CTA 128px + przelacznik 62px + gapy = 989px tresci,
   co miesci sie dopiero od ~1099px szerokosci okna. Przy progu 900px w pasmie 900-1099 etykiety
   sie lamaly (.nav__top nie ma white-space:nowrap). Prog 1150 (a nie 1099) daje ~47px luzu -
   na styk pasek nie ma oddechu miedzy logo, menu i CTA.
   Hero i stopka lamia sie dopiero przy 900px - stad osobny blok nizej. */
@media (max-width: 1150px) {
	.nav { background: #fff; box-shadow: 0 6px 24px rgba(11,43,64,0.06); }
	.nav__links {
		position: absolute; inset: 100% 0 auto 0;
		display: flex; flex-direction: column; align-items: stretch; gap: 0;
		background: #fff; padding: 8px var(--gutter) calc(24px + env(safe-area-inset-bottom));
		box-shadow: 0 20px 40px rgba(11,43,64,0.10);
		max-height: calc(100vh - 70px);
		max-height: calc(100dvh - 70px);
		overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
		scrollbar-width: none;
		transform: translateY(-12px); opacity: 0; pointer-events: none;
		/* visibility: bez niego zwiniete menu zostaje w tab-orderze (~20 niewidocznych przystankow Tab) i czyta je czytnik ekranu mimo aria-expanded="false" */
		visibility: hidden;
		transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
	}
	.nav__links::-webkit-scrollbar { width: 0; height: 0; }
	.nav.is-open .nav__links { opacity: 1; transform: translateY(0); pointer-events: auto; visibility: visible; }
	/* MENU MOBILNE - wszystkie pozycje od razu widoczne (bez accordionu).
	   KLUCZ wyrownania: align-items:stretch na .nav__links wyzej. Bez tego
	   bazowe align-items:center (desktop) sizowalo elementy do tresci i je
	   CENTROWALO -> eMAG (szerszy) i Trendyol (wezszy) mialy rozny lewy x. */
	.nav__item--has { display: flex; flex-direction: column; }
	.nav__top {
		display: flex; align-items: center;
		padding: 13px 2px; font-size: 1.06rem;
		border-bottom: 1px solid var(--line);
	}
	.nav__caret { display: none; }
	.nav__top::after { display: none; }
	/* podmenu zawsze rozwiniete; STALE wciecie (eMAG i Trendyol identycznie) */
	.nav__drop {
		position: static; opacity: 1; visibility: visible; transform: none;
		display: flex; flex-direction: column; min-width: 0;
		box-shadow: none; border: 0; background: transparent;
		margin: 0; padding: 4px 0 10px 16px;
	}
	.nav__drop a {
		padding: 9px 2px; font-size: 0.96rem; color: var(--text-muted); border: 0;
	}
	.nav__burger { display: flex; }
	.nav.is-open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
	.nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 900px) {
	.hero__inner { grid-template-columns: 1fr; }
	.hero__media { order: -1; max-width: 480px; }
	.hero__chip--1 { left: 6px; }
	.hero__chip--2 { right: 6px; }
	.foot__inner { grid-template-columns: 1fr 1fr; gap: 32px 28px; }
}
/* telefony w pionie: wszystko jedna kolumna, pod soba, z oddechem */
@media (max-width: 640px) {
	.foot__inner { grid-template-columns: 1fr; gap: 30px; }
	.foot__brand { margin-bottom: 4px; }
	.foot__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ============================================================
   SECTIONS - pain, pillars, founder, outcomes, process,
   pricing, stats, testimonials, ctaform, faq, blog.
   ============================================================ */

/* ---------- PAIN ---------- */
.pain__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pain-card {
	position: relative; overflow: hidden;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	padding: clamp(28px, 3vw, 44px);
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pain-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.pain-card__no {
	position: absolute; top: 10px; right: 22px;
	font-family: var(--font-head); font-weight: 900; line-height: 1;
	font-size: clamp(58px, 7vw, 104px); color: rgba(11,43,64,0.05);
}
.pain-card__title { position: relative; font-size: var(--fs-h3); color: var(--blue); margin: 0 0 12px; }
.pain-card__text { position: relative; margin: 0; color: var(--text); }
.pain__bridge {
	margin: clamp(36px, 5vw, 56px) auto 0; max-width: 760px; text-align: center;
	font-family: var(--font-head); font-weight: 700;
	font-size: clamp(1.05rem, 1.6vw, 1.35rem); color: var(--text-strong);
}

/* ---------- PILLARS ---------- */
.pillars__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); }
.pillar { position: relative; }
.pillar__no { display: block; font-family: var(--font-head); font-weight: 900; font-size: 2rem; color: var(--bright); margin-bottom: 14px; }
.pillar__title { font-size: var(--fs-h3); color: var(--blue); margin: 0 0 12px; }
.pillar__text { margin: 0; color: var(--text); }
@media (min-width: 900px) {
	.pillar:not(:last-child)::after {
		content: ""; position: absolute; top: 4px; bottom: 4px; right: clamp(-28px, -2vw, -14px);
		width: 1px; background: var(--line);
	}
}

/* ---------- FOUNDER ---------- */
.founder__inner { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.founder__photo {
	position: relative; aspect-ratio: 4/5; border-radius: var(--radius-lg);
	background: var(--navy); color: #fff; overflow: hidden; box-shadow: var(--shadow-lg);
	display: flex; align-items: center; justify-content: center; will-change: transform;
}
.founder__monogram { font-family: var(--font-head); font-weight: 900; font-size: clamp(70px, 9vw, 130px); color: var(--green); letter-spacing: -0.04em; }
.founder__photo-note { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.founder__photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.founder__title { font-size: var(--fs-h2); margin: 8px 0 22px; }
.founder__bio { color: var(--text); margin: 0 0 14px; max-width: 56ch; }
.founder__creds { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.founder__creds li { position: relative; padding-left: 26px; color: var(--text-strong); font-size: .95rem; }
.founder__creds li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 800; }

/* ---------- OUTCOMES ---------- */
.outcomes__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.outcome { background: var(--bg-alt); border-radius: var(--radius); padding: clamp(26px, 3vw, 40px); border-left: 3px solid var(--green); }
.outcome__title { font-size: var(--fs-h3); color: var(--blue); margin: 0 0 12px; }
.outcome__text { margin: 0; color: var(--text); }
.outcome__metric { margin: 18px 0 0; font-family: var(--font-head); }
.outcome__metric strong { color: var(--green); font-size: 1.25rem; font-weight: 900; }
.outcome__note { display: block; font-size: .72rem; color: var(--text-muted); font-weight: 600; margin-top: 2px; }
.outcomes__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 44%); gap: clamp(28px, 4vw, 56px); align-items: center; margin-bottom: clamp(36px, 5vw, 64px); }
.outcomes__intro .sec-head { margin-bottom: 0; }
.outcomes__art { margin: 0; }
.outcomes__art img { width: 100%; height: auto; display: block; }
@media (max-width: 1024px) {
	.outcomes__intro { display: block; }
	.outcomes__intro .sec-head { margin-bottom: 24px; }
	.outcomes__art { max-width: 520px; margin: 0 auto; }
}

/* ---------- PROCESS ---------- */
.process__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 50px); position: relative; margin-bottom: clamp(30px, 4vw, 50px); }
.step { text-align: center; position: relative; }
.step__no {
	display: inline-flex; align-items: center; justify-content: center;
	width: 72px; height: 72px; border-radius: 50%;
	background: var(--navy); color: #fff;
	font-family: var(--font-head); font-weight: 900; font-size: 1.4rem;
	margin-bottom: 22px; position: relative; z-index: 2; box-shadow: 0 0 0 10px var(--bg-alt);
}
.step__title { font-size: var(--fs-h3); color: var(--blue); margin: 0 0 12px; }
.step__text { margin: 0 auto; color: var(--text); max-width: 34ch; }
@media (min-width: 860px) {
	.process__steps::before { content: ""; position: absolute; top: 36px; left: 16%; right: 16%; height: 2px; background: var(--line); z-index: 0; }
}
.process__cta { text-align: center; }

/* ---------- PRICING ---------- */
.pricing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.tier { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(28px, 3vw, 40px); }
.tier--featured { background: var(--navy); border-color: var(--navy); color: var(--text-invert); border-top: 4px solid var(--green); transform: scale(1.03); }
.tier__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: #2E7358; color: #fff; /* WCAG AA: bialy 5,66:1 (bylo var(--green) #3B8C6E = 4,07, oblewalo maly bold) */ font-family: var(--font-head); font-weight: 800; font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; padding: 7px 18px; border-radius: 100px; white-space: nowrap; text-align: center; /* absolute + left:50% daje polowe karty na shrink-to-fit - dlugi tekst lamal sie i rownal do lewej */ }
.tier__eyebrow { font-family: var(--font-head); font-weight: 800; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--steel); }
.tier--featured .tier__eyebrow { color: var(--lime); }
.tier__name { font-size: 1.4rem; color: var(--blue); margin: 8px 0 12px; }
.tier--featured .tier__name { color: #fff; }
.tier__target { color: var(--text-muted); font-size: .92rem; min-height: 3.6em; margin: 0 0 18px; }
.tier--featured .tier__target { color: rgba(255,255,255,.6); }
.tier__price { font-family: var(--font-head); margin: 0 0 22px; padding: 16px 0; border-block: 1px solid var(--line); }
.tier--featured .tier__price { border-color: rgba(255,255,255,.12); }
.tier__price strong { font-size: 1.9rem; font-weight: 900; color: var(--text-strong); }
.tier--featured .tier__price strong { color: #fff; }
.tier__period { font-size: .85rem; color: var(--text-muted); font-weight: 600; }
.tier--featured .tier__period { color: rgba(255,255,255,.55); }
.tier__features { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.tier__features li { position: relative; padding-left: 28px; font-size: .95rem; }
.tier__features li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 800; }
.tier--featured .tier__features li::before { color: var(--green); }
.tier .btn { width: 100%; justify-content: center; }
/* Kafel "Zakres indywidualny" (analiza rynku): na desktopie pelna szerokosc pod trzema
   wycenionymi kaflami, niski poziomy uklad zamiast czwartej wysokiej karty. */
@media (min-width: 981px) {
	.tier--wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(230px, .9fr) 1.5fr minmax(190px, auto); grid-template-areas: "eyebrow feats price" "name feats btn" "target feats btn"; column-gap: clamp(28px, 4vw, 56px); row-gap: 0; align-items: start; padding: 24px clamp(24px, 3vw, 40px); }
	.tier--wide .tier__eyebrow { grid-area: eyebrow; }
	.tier--wide .tier__name { grid-area: name; margin: 6px 0 8px; font-size: 1.25rem; }
	.tier--wide .tier__target { grid-area: target; min-height: 0; margin: 0; }
	.tier--wide .tier__features { grid-area: feats; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; margin: 0; align-self: center; }
	.tier--wide .tier__price { grid-area: price; margin: 0 0 12px; padding: 0; border: 0; }
	.tier--wide .tier__price strong { font-size: 1.15rem; }
	.tier--wide .btn { grid-area: btn; align-self: start; }
}
.pricing__flex { max-width: 860px; margin: clamp(32px, 4vw, 48px) auto 0; padding: 26px clamp(20px, 3vw, 36px); background: rgba(59,140,110,.06); border: 1px solid rgba(59,140,110,.22); border-radius: var(--radius); text-align: center; }
.pricing__flex-title { font-size: 1.1rem; color: var(--text-strong); margin: 0 0 10px; }
.pricing__flex-text { margin: 0 auto; max-width: 62ch; font-size: .96rem; color: var(--text); }
.pricing__note { text-align: center; margin: 26px 0 0; font-size: .82rem; color: var(--text-muted); }

/* ---------- STATS (dark) ---------- */
.stats__milestones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: clamp(40px, 6vw, 80px); text-align: center; }
.milestone__num { display: block; font-family: var(--font-head); font-weight: 900; font-size: clamp(2.6rem, 5vw, 4.4rem); color: #fff; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.milestone__label { display: block; margin-top: 10px; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.stats__cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.case { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); padding: clamp(26px, 3vw, 40px); text-align: center; transition: transform .3s var(--ease), border-color .3s var(--ease); }
.case:hover { transform: translateY(-5px); border-color: rgba(59,140,110,.5); }
.case__num { display: block; font-family: var(--font-head); font-weight: 900; font-size: clamp(1.8rem, 3vw, 2.5rem); color: var(--green); line-height: 1; letter-spacing: -.03em; white-space: nowrap; }
.case__label { margin: 12px 0 0; color: rgba(255,255,255,.85); font-size: .95rem; }
.case__note { display: block; margin-top: 8px; font-size: .7rem; color: rgba(255,255,255,.4); }
.stats__note { text-align: center; margin: clamp(30px, 4vw, 46px) 0 0; font-size: .8rem; color: rgba(255,255,255,.4); }

/* ---------- TESTIMONIALS ---------- */
.slider { position: relative; max-width: 880px; margin-inline: auto; text-align: center; }
.quote { display: none; margin: 0; flex-direction: column; align-items: center; }
.quote.is-active { display: flex; }
.quote__text { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.2rem, 2.4vw, 2rem); line-height: 1.4; color: var(--text-strong); margin: 0 0 18px; }
.quote__text::before { content: "\201C"; display: block; font-size: 3.5rem; line-height: 0.6; color: var(--green); margin-bottom: 14px; }
.quote__author { font-family: var(--font-head); font-weight: 800; color: var(--green-ink); }
.slider__controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 32px; }
.slider__arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--navy); transition: border-color .2s, color .2s; }
.slider__arrow:hover { border-color: var(--green); color: var(--green); }
.slider__arrow[data-prev] { transform: scaleX(-1); }
/* kropka wizualnie 9px, ale cel dotyku 24x24 (WCAG/PSI) - rysowana w ::before */
.slider__dots { display: flex; gap: 2px; }
.slider__dot { width: 24px; height: 24px; border: 0; background: none; cursor: pointer; padding: 0; display: grid; place-items: center; }
.slider__dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--line); transition: background .2s; }
.slider__dot.is-active::before { background: var(--green); }
.testimonials__inner.has-art { display: grid; grid-template-columns: minmax(300px, 42%) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.testimonials__art { margin: 0; }
.testimonials__art img { width: 100%; height: auto; display: block; }
.testimonials__inner.has-art .slider { max-width: none; }
@media (max-width: 1024px) {
	.testimonials__inner.has-art { display: block; }
	.testimonials__art { max-width: 460px; margin: 0 auto 32px; }
}

/* ---------- CTA + FORM (dark) ---------- */
.ctaform__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 5vw, 70px); align-items: start; }
.ctaform__title { font-size: var(--fs-h2); margin: 8px 0 18px; }
.ctaform__text { color: rgba(255,255,255,.8); max-width: 46ch; margin: 0 0 16px; }
.ctaform__sign { font-family: var(--font-head); font-weight: 800; color: var(--lime); margin: 0 0 26px; }
.ctaform__deliver { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ctaform__deliver li { position: relative; padding-left: 28px; color: rgba(255,255,255,.9); }
.ctaform__deliver li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 800; }
.ctaform__panel { background: #fff; border-radius: var(--radius-lg); padding: clamp(26px, 3vw, 40px); color: var(--text); }
.ctaform__panel-title { font-size: 1.3rem; color: var(--navy); margin: 0 0 6px; }
.ctaform__panel-sub { color: var(--text-muted); font-size: .92rem; margin: 0 0 20px; }
.form { display: flex; flex-direction: column; gap: 12px; }
.form__field { width: 100%; padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; font-size: .95rem; background: var(--bg-alt); transition: border-color .2s, box-shadow .2s, background .2s; }
.form__field:focus { outline: none; border-color: var(--bright); box-shadow: 0 0 0 3px rgba(11,64,51,.15); background: #fff; }
textarea.form__field { resize: vertical; }
.form__consent { display: flex; gap: 10px; align-items: flex-start; font-size: .8rem; color: var(--text-muted); }
.form__consent input { margin-top: 3px; }
.form__submit { width: 100%; justify-content: center; margin-top: 4px; }
.form__note { font-size: .72rem; color: var(--text-muted); margin: 4px 0 0; text-align: center; }

/* ---------- Contact Form 7 (osadzony w panelu v3) ----------
   CF7 renderuje wlasny markup (.wpcf7-form z <p>-wrapperami i placeholderami).
   Dostylowujemy go pod v3 wewnatrz .cf7-wrap - bez dotykania reszty. */
.cf7-wrap .wpcf7-form p { margin: 0 0 12px; }
.cf7-wrap .wpcf7-form p:last-of-type { margin-bottom: 0; }
.cf7-wrap .hidden-fields-container { border: 0; padding: 0; margin: 0; }
.cf7-wrap label br { display: none; }
/* duplikat naglowka z formularza 277 - panel ma juz wlasny tytul/sub */
.cf7-wrap .subtitle-contact-form, .cf7-wrap .title-contact-form { display: none; }
/* etykiety (formularz 502 ma teksty etykiet) */
.cf7-wrap label { display: block; font-family: var(--font-head); font-weight: 700; font-size: .82rem; color: var(--text-strong); }
.cf7-wrap label .wpcf7-form-control-wrap { display: block; margin-top: 6px; font-weight: 400; }
/* pola */
.cf7-wrap input.wpcf7-form-control:not([type="submit"]):not([type="checkbox"]),
.cf7-wrap textarea.wpcf7-form-control {
	width: 100%; padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
	font: inherit; font-size: .95rem; background: var(--bg-alt); color: var(--text);
	transition: border-color .2s, box-shadow .2s, background .2s;
}
.cf7-wrap textarea.wpcf7-form-control { resize: vertical; min-height: 110px; }
.cf7-wrap input.wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):focus,
.cf7-wrap textarea.wpcf7-form-control:focus {
	outline: none; border-color: var(--bright); box-shadow: 0 0 0 3px rgba(11,64,51,.15); background: #fff;
}
.cf7-wrap ::placeholder { color: var(--text-muted); opacity: .85; }
/* zgoda RODO */
.cf7-wrap .wpcf7-acceptance { font-size: .8rem; color: var(--text-muted); }
.cf7-wrap .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.cf7-wrap .wpcf7-acceptance label { display: flex; gap: 9px; align-items: flex-start; font: inherit; color: var(--text-muted); font-weight: 400; }
.cf7-wrap .wpcf7-acceptance input { margin-top: 3px; flex: 0 0 auto; }
/* przycisk wysylki */
.cf7-wrap .submit-wrapper { margin-top: 4px; }
.cf7-wrap .wpcf7-submit {
	width: 100%; padding: 14px 22px; border: 0; border-radius: var(--radius-sm);
	background: var(--bright); color: #fff; font-family: var(--font-head); font-weight: 800;
	font-size: .95rem; cursor: pointer; transition: background .2s; margin-top: 6px;
}
.cf7-wrap .wpcf7-submit:hover { background: var(--green); }
.cf7-wrap .wpcf7-submit:focus { outline: none; box-shadow: 0 0 0 3px rgba(11,64,51,.25); }
.cf7-wrap .wpcf7-submit:disabled { opacity: .65; cursor: wait; }
/* spinner / walidacja / komunikat zwrotny */
.cf7-wrap .wpcf7-spinner { margin: 0 0 0 12px; }
.cf7-wrap .wpcf7-not-valid-tip { color: #c0392b; font-size: .78rem; font-weight: 600; margin-top: 5px; }
.cf7-wrap input.wpcf7-not-valid, .cf7-wrap textarea.wpcf7-not-valid { border-color: #c0392b; }
.cf7-wrap .wpcf7-response-output {
	margin: 16px 0 0 !important; padding: 12px 15px; border-radius: var(--radius-sm);
	font-size: .85rem; line-height: 1.5;
}

/* ---------- CTA + FORM - wariant „stacked" (inc/contact-form.php + CF7 502) ----------
   Zamiast kolumn copy|panel: naglowek na pelna szerokosc jako gorny wiersz, panel pod nim.
   Formularz w panelu idzie na dwie kolumny (5 pol | wiadomosc + zgoda + submit) - dzieki
   temu sekcja jest ~o polowe krotsza. Siatka opiera sie na markupie samego CF7 502
   (.contact-form-wrapper > .form-row x2), wiec formularz 277 na home tego nie lapie. */
.ctaform--stacked .ctaform__head { margin-bottom: clamp(28px, 3.4vw, 46px); }
.ctaform--stacked .ctaform__title { margin: 8px 0 14px; }
.ctaform--stacked .ctaform__text { margin: 0; }
/* Telefon i mail tylko na mobile - na desktopie niepotrzebnie wydluzaly naglowek
   (sa w stopce i na /kontakt/), a na mobile to najwygodniejszy sposob kontaktu. */
.ctaform--stacked .kontakt__details { display: none; }

.ctaform--stacked .contact-form-wrapper {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: clamp(18px, 2.6vw, 38px); align-items: stretch;
}
.ctaform--stacked .form-row { display: flex; flex-direction: column; min-width: 0; }

/* Wyrownanie dolu obu kolumn: "Umow sie" ma wypasc dokladnie na poziomie pola "Link…".
   Obie kolumny sa tej samej wysokosci (grid align-items: stretch), wiec wystarczy, zeby
   OSTATNI element kazdej z nich siedzial przy dolnej krawedzi. Pomiar (viewport 1440,
   kolumna 517px): 5 pol = 452px, wiadomosc rows="12" + zgoda + submit = 482px, czyli
   prawa kolumna jest wyzsza i to ONA wyznacza wiersz. Dlatego:
   - lewa rozklada 5 pol na cala wysokosc (odstepy 12px -> ~20px) i "Link" laduje na dole,
   - prawa i tak konczy sie przyciskiem, a textarea zostaje przy swoich ~330px.
   Skrocenie wiadomosci do 299px tez by wyrownalo, ale ma byc dluzsza, nie krotsza. */
.ctaform--stacked .form-row:first-child { justify-content: space-between; }

/* Gdyby przy innej szerokosci to lewa kolumna byla wyzsza (np. etykieta "Link…" zawinie
   sie w dwie linie), rosnie textarea i przycisk dalej laduje rowno z ostatnim polem. */
.ctaform--stacked .form-row + .form-row > p:first-child { flex: 1 1 auto; display: flex; flex-direction: column; }
.ctaform--stacked .form-row + .form-row > p:first-child > label { display: flex; flex-direction: column; flex: 1 1 auto; }
.ctaform--stacked .form-row + .form-row > p:first-child label .wpcf7-form-control-wrap { display: flex; flex-direction: column; flex: 1 1 auto; }
.ctaform--stacked .form-row + .form-row textarea.wpcf7-form-control { flex: 1 1 auto; min-height: 150px; }

@media (max-width: 860px) {
	.ctaform--stacked .kontakt__details { display: flex; margin: 22px 0 0; }
	.ctaform--stacked .contact-form-wrapper { grid-template-columns: 1fr; }
}

/* ---------- FAQ ---------- */
.faq__list { display: flex; flex-direction: column; gap: 12px; max-width: 900px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.faq-item.is-open { border-color: var(--green); box-shadow: var(--shadow); }
.faq-item__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; background: none; border: 0; cursor: pointer; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--text-strong); text-align: left; }
.faq-item__icon { position: relative; flex: 0 0 18px; width: 18px; height: 18px; }
.faq-item__icon::before, .faq-item__icon::after { content: ""; position: absolute; background: var(--green); transition: transform .25s var(--ease); }
.faq-item__icon::before { top: 8px; left: 0; width: 18px; height: 2px; }
.faq-item__icon::after { top: 0; left: 8px; width: 2px; height: 18px; }
.faq-item.is-open .faq-item__icon::after { transform: scaleY(0); }
/* visibility: samo max-height:0 tylko PRZYCINA - tresc zwinietej odpowiedzi czyta czytnik ekranu
   (mimo aria-expanded="false"), a ewentualny link w niej lapie Taba. Przy przejsciu do 'visible'
   przelaczenie jest natychmiastowe, przy chowaniu - po animacji. */
.faq-item__a { max-height: 0; overflow: hidden; visibility: hidden; transition: max-height .3s var(--ease), visibility .3s; }
.faq-item.is-open .faq-item__a { max-height: 460px; visibility: visible; }
.faq-item__a p { margin: 0; padding: 0 24px 22px; color: var(--text-muted); }
.faq__inner.has-art { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 36%); column-gap: clamp(32px, 4vw, 64px); align-items: start; }
.faq__inner.has-art .sec-head { grid-column: 1 / -1; }
.faq__art { margin: 0; position: sticky; top: 110px; }
.faq__art img { width: 100%; height: auto; display: block; }
@media (max-width: 1024px) {
	.faq__inner.has-art { display: block; }
	.faq__art { position: static; max-width: 420px; margin: 36px auto 0; }
}

/* ---------- BLOG ---------- */
.blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.post:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
/* Kadr 1200/630 = proporcja grafik z generatora (ta sama, ktorej chce og:image).
   Przy 16/10 „cover" przycinal boki i zjadal sygnet oraz znacznik w rogach. */
.post__media { display: block; aspect-ratio: 1200/630; overflow: hidden; background: var(--navy); }
.post__media img { width: 100%; height: 100%; object-fit: cover; }
/* Bez najazdu na obrazek: to gotowa kompozycja z ramka i znakami przy krawedziach,
   wiec kazde powiekszenie ucina jej brzegi. Karta i tak unosi sie na hoverze. */
.post__ph { display: grid; place-items: center; height: 100%; font-family: var(--font-head); font-weight: 900; color: var(--steel); letter-spacing: .2em; }
.post__body { padding: 24px; }
.post__date { font-size: .78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }
.post__title { font-size: 1.1rem; line-height: 1.3; margin: 8px 0 14px; }
.post__title a:hover { color: var(--green-ink); }
.post__link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 800; font-size: .85rem; color: var(--green-ink); }

/* ============================================================
   RESPONSIVE (sekcje wewnetrzne)
   ============================================================ */
@media (max-width: 980px) {
	.pillars__grid, .process__steps, .pricing__grid, .stats__cases, .blog__grid { grid-template-columns: 1fr 1fr; }
	.tier--featured { transform: none; }
	.process__steps::before { display: none; }
}
@media (max-width: 760px) {
	.pain__grid, .outcomes__grid, .founder__inner, .ctaform__inner,
	.pillars__grid, .process__steps, .pricing__grid, .stats__cases, .blog__grid { grid-template-columns: 1fr; }
	.stats__milestones { grid-template-columns: 1fr 1fr; }
	.founder__media { max-width: 360px; }
	.founder__creds { grid-template-columns: 1fr; }
}

/* ============================================================
   HERO - animowany dashboard (kolory Harta) + tlo „bajer"
   ============================================================ */
.hero__inner { position: relative; z-index: 2; }

/* Orby zlikwidowane jako elementy (poswiaty wtopione w background .hero wyzej). */


/* Dashboard card */
.dash {
	position: relative; z-index: 2;
	background: #fff; border-radius: var(--radius-lg);
	box-shadow: 0 40px 90px rgba(11,43,64,.18), 0 0 0 1px rgba(11,43,64,.04);
	padding: 22px; overflow: hidden;
}
/* przesuwajacy sie „shine" - efekt live */
.dash::after {
	content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
	background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
	transform: translateX(-120%); animation: dashShine 6.5s ease-in-out infinite;
}
@keyframes dashShine { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.dash__pt { animation: dashPulse 1.7s ease-in-out infinite; }
@keyframes dashPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.dash__bar { display: flex; align-items: center; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.dash__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.dash__dot:nth-child(1) { background: #ff6058; }
.dash__dot:nth-child(2) { background: #ffbd2e; }
.dash__dot:nth-child(3) { background: var(--bright); }
.dash__label { margin-left: 8px; font-family: var(--font-head); font-weight: 800; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); }

.dash__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.dash__kpi { background: var(--bg-alt); border-radius: var(--radius-sm); padding: 14px 16px; }
.dash__kpi-label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.dash__kpi-val { display: block; font-family: var(--font-head); font-weight: 900; font-size: clamp(1.6rem, 2.2vw, 2.1rem); color: var(--navy); line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums; }
.dash__kpi-trend { font-size: .74rem; font-weight: 800; color: var(--green); }

.dash__chart { position: relative; height: 150px; display: flex; align-items: flex-end; gap: 8px; padding: 8px 4px 0; }
.dash__bars { display: flex; align-items: flex-end; gap: 10px; width: 100%; height: 100%; }
.dash__bars i { flex: 1; height: var(--h, 50%); background: linear-gradient(180deg, var(--bright), var(--green)); border-radius: 6px 6px 0 0; transform-origin: bottom; }
.dash__bars i:last-child { background: linear-gradient(180deg, var(--blue), var(--navy)); }
.dash__line { position: absolute; inset: 8px 4px 0; width: calc(100% - 8px); height: calc(100% - 8px); overflow: visible; pointer-events: none; }
.dash__line path { fill: none; stroke: var(--navy); stroke-width: 2.5; stroke-linecap: round; }
.dash__line circle { fill: var(--navy); }

.dash__chips { display: flex; gap: 8px; margin-top: 16px; }
.dash__chips span { font-family: var(--font-head); font-weight: 800; font-size: .72rem; padding: 6px 12px; border-radius: 100px; background: var(--pale); color: var(--blue); }

/* ============================================================
   FOOTER - dostrojenie skali do reszty strony
   UWAGA: TYLKO desktop (>=901px). Bez @media te reguly bily reguly
   mobilne (rownia specyficznosc, pozniej w pliku) i stopka renderowala
   sie jako 5 kolumn TAKZE na telefonie -> scisnieta/ucieta.
   ============================================================ */
@media (min-width: 901px) {
	.foot { padding-top: clamp(70px, 9vw, 120px); }
	.foot__inner { grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; gap: clamp(24px, 3vw, 48px); }
	.foot__logo { height: 46px; }
	.foot__tagline { font-size: clamp(1.1rem, 1.5vw, 1.35rem); max-width: 20ch; }
	.foot__heading { font-size: .82rem; margin-bottom: 18px; }
	.foot__col a { font-size: 1rem; }
	.foot__contact a { display: block; font-family: var(--font-head); font-weight: 700; color: #fff; }
	.foot__bottom { font-size: .85rem; }
}

/* ============================================================
   HERO STAGE - pelnoekranowy animowany dashboard w tle (v2)
   ============================================================ */
.hero__inner { z-index: 3; }
.hero__stage {
	position: absolute; inset: 0; z-index: 1; overflow: hidden;
	perspective: 1800px; pointer-events: none;
}
/* Wash nad dashboardem: dawniej osobny pelnoekranowy .hero__scrim NAD scena
   (kolejna warstwa kompozycji); jako ::after zyje wewnatrz warstwy stage'a. */
.hero__stage::after {
	content: ""; position: absolute; inset: 0; z-index: 2;
	background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 42%, rgba(255,255,255,.9) 54%, rgba(255,255,255,.45) 70%, rgba(255,255,255,0) 88%);
}

/* duza karta dashboardu, lekko obrocona (jak na prod), wychodzi poza prawa krawedz.
   Uklad wg realnego panelu eMAG Ads: kredyt / chipy metryk / wykres / tabela kampanii. */
.dashx {
	position: absolute; top: 50%; right: -3%;
	width: min(82%, 1180px); transform: translateY(-50%);
}
.dashx__win {
	transform: perspective(1600px) rotateY(-9deg) rotateX(4deg);
	background: #fff; border-radius: 16px;
	box-shadow: 0 60px 120px rgba(11,43,64,.20), 0 0 0 1px rgba(11,43,64,.05);
	overflow: hidden; will-change: transform;
}
.dashx__topbar { display: flex; align-items: center; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--bg-alt); }
.dashx__dots { display: inline-flex; gap: 6px; }
.dashx__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.dashx__dots i:nth-child(3){ background: var(--bright); }
.dashx__brand { font-family: var(--font-head); font-weight: 900; font-size: .8rem; color: var(--navy); letter-spacing: .05em; }
.dashx__brand b { color: var(--bright); font-weight: 800; margin-left: 4px; }
.dashx__topmeta { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.dashx__pill { font-family: var(--font-head); font-size: .58rem; font-weight: 800; color: var(--text-muted); border: 1px solid var(--line); border-radius: 100px; padding: 3px 9px; background: #fff; }
.dashx__avatar { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--bright)); }

.dashx__body { display: grid; grid-template-columns: 148px 1fr; }
.dashx__side { background: var(--bg-alt); padding: 18px 14px; display: flex; flex-direction: column; gap: 13px; border-right: 1px solid var(--line); }
.dashx__navi { display: flex; align-items: center; gap: 8px; font-size: .64rem; font-weight: 700; color: var(--text-muted); }
.dashx__navi i { width: 8px; height: 8px; border-radius: 3px; background: var(--line); flex: none; }
.dashx__navi.is-active { color: var(--green); }
.dashx__navi.is-active i { background: var(--bright); }
.dashx__promo { margin-top: auto; background: var(--navy); color: rgba(255,255,255,.75); border-radius: 10px; padding: 12px; font-size: .58rem; font-weight: 700; line-height: 1.5; }
.dashx__promo b { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-family: var(--font-head); font-size: .9rem; letter-spacing: .04em; }
.dashx__promo b::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bright); animation: dashPulse 1.8s ease-in-out infinite; }

.dashx__main { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.dpanel { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.dpanel__h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.dpanel__h span { font-family: var(--font-head); font-weight: 800; font-size: .74rem; color: var(--navy); }
.dpanel__h em { font-style: normal; font-size: .6rem; color: var(--text-muted); }

/* pasek kredytu */
.dxcredit { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; }
.dxcredit__info { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }
.dxcredit__info em { font-style: normal; font-size: .58rem; font-weight: 700; color: var(--text-muted); }
.dxcredit__info b { font-family: var(--font-head); font-weight: 900; font-size: 1.15rem; color: var(--navy); letter-spacing: -.02em; }
.dxbtn { font-family: var(--font-head); font-size: .56rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; border-radius: 7px; padding: 8px 13px; }
.dxbtn--blue { background: var(--blue); }
.dxbtn--green { background: var(--bright); }

/* chipy metryk */
.dxchips { display: flex; gap: 8px; }
.dxchip { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.dxchip em { font-style: normal; font-size: .52rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dxchip b { font-family: var(--font-head); font-weight: 800; font-size: .76rem; color: var(--navy); white-space: nowrap; }
.dxchip.is-on { border-color: var(--blue); box-shadow: inset 0 -2px 0 var(--blue); }
.dxchip.is-hot { border-color: var(--bright); box-shadow: inset 0 -2px 0 var(--bright); }
.dxchip.is-hot b { color: var(--green); }

/* wykres 2 linii */
.dpanel__chart { position: relative; height: 124px; }
.dxarea { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dxline { stroke-width: 3; stroke-linecap: round; }
.dxline--a { stroke: var(--bright); }
.dxline--b { stroke: var(--navy); opacity: .5; stroke-width: 2.5; }
.dxarea__pt { fill: #fff; stroke: var(--bright); stroke-width: 3; }
.dxtip { position: absolute; font-family: var(--font-head); font-weight: 800; font-size: .6rem; color: #fff; background: var(--navy); padding: 4px 8px; border-radius: 6px; transform: translate(-50%, -50%); white-space: nowrap; }
.dxtip--1 { left: 28%; top: 38%; background: var(--blue); }
.dxtip--2 { left: 63%; top: 18%; background: var(--green); }
.dpanel__legend { display: flex; gap: 14px; margin-top: 10px; font-size: .58rem; color: var(--text-muted); }
.lg { display: inline-flex; align-items: center; gap: 5px; }
.lg::before { content: ""; width: 8px; height: 8px; border-radius: 2px; }
.lg--a::before { background: var(--bright); }
.lg--b::before { background: var(--navy); }

/* tabela kampanii */
.dxtable { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.dxtable__r { display: grid; grid-template-columns: 40px 1.4fr 1fr .8fr .8fr; align-items: center; gap: 8px; padding: 7px 12px; font-size: .62rem; font-weight: 700; color: var(--text); border-top: 1px solid var(--line); }
.dxtable__r span:nth-child(n+3) { text-align: right; }
.dxtable__r--head { border-top: 0; background: var(--bg-alt); color: var(--text-muted); font-size: .53rem; text-transform: uppercase; letter-spacing: .05em; }
.dxtable__r--total { background: var(--pale); font-family: var(--font-head); font-weight: 800; color: var(--navy); }
.dxtable__r .is-roas { color: var(--green); font-family: var(--font-head); font-weight: 800; }
.dxtoggle { position: relative; width: 26px; height: 14px; border-radius: 100px; background: var(--bright); }
.dxtoggle::after { content: ""; position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }

/* shine + puls */
.dashx__win::after {
	content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none;
	background: linear-gradient(120deg, transparent 38%, rgba(255,255,255,.35) 50%, transparent 62%);
	transform: translateX(-120%); animation: dashShine 7s ease-in-out infinite;
}
@keyframes dashShine { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.dxarea__pt { animation: dashPulse 1.8s ease-in-out infinite; }
@keyframes dashPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---- responsive hero stage ---- */
@media (max-width: 1100px) {
	.dashx { width: 86%; right: -16%; }
}
@media (max-width: 760px) {
	.hero__stage { opacity: .22; }
	.hero__stage::after { background: rgba(255,255,255,.35); }
	.dashx { width: 130%; right: -30%; }
	.hero__inner { min-height: 460px; }
}

/* ---- NAV mobile: zapobieganie wystawaniu paska poza szerokosc ---- */
@media (max-width: 600px) {
	.nav__inner { gap: 12px; }
	.nav__logo img { height: 42px; }
	.nav.is-stuck .nav__logo img { height: 38px; }
	.nav__actions .btn--sm { display: none; } /* na telefonie zamiast tekstowego - ikona .nav__contact */
	.nav__contact { display: inline-flex; } /* kontakt na pasku mobile (byl tylko na desktopie) */
}

/* ---- Dashboard: animacje wejscia w CSS (niezalezne od GSAP/CDN) ---- */
.dashx__win { transition: transform .5s var(--ease); }
.dxchip { animation: dxRise .45s var(--ease) both; animation-delay: calc(var(--i, 0) * .06s + .25s); }
.dxtable__r { animation: dxRise .45s var(--ease) both; animation-delay: calc(var(--i, 0) * .07s + .55s); }
.dxtable__r--head, .dxtable__r--total { animation: none; }
@keyframes dxRise { from { opacity: 0; transform: translateY(6px); } }
.dxarea__fill { animation: dxFade 1.2s ease .45s both; }
@keyframes dxFade { from { opacity: 0; } }
.dxline { stroke-dasharray: 780; stroke-dashoffset: 780; animation: dxDraw 1.7s var(--ease) .45s forwards; }
@keyframes dxDraw { to { stroke-dashoffset: 0; } }
.dxtip { animation: dxPop .5s var(--ease) both; animation-delay: 1.1s; }
@keyframes dxPop { from { opacity: 0; transform: translate(-50%, -50%) scale(.5); } }
@media (prefers-reduced-motion: reduce) {
	.dxchip, .dxtable__r, .dxarea__fill, .dxtip, .dxarea__pt, .dashx__promo b::after, .dashx__win::after { animation: none; }
	.dxline { animation: none; stroke-dashoffset: 0; }
}

/* ---- Cookie consent (modal na srodku + przyciemnienie; wybor przed przegladaniem) ---- */
.cookie-veil {
	position: fixed; inset: 0; z-index: 200;
	display: flex; align-items: center; justify-content: center; padding: 16px;
	background: rgba(11, 43, 64, .55);
	opacity: 0; visibility: hidden;
	transition: opacity .35s var(--ease), visibility .35s;
}
.cookie-veil.is-shown { opacity: 1; visibility: visible; }
html.cookie-lock, html.cookie-lock body { overflow: hidden; }
.cookie {
	/* 560px: zmierzone fontTools - rzad 3 przyciskow PL to 485px, wiec 520 bylo za waskie */
	width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	box-shadow: var(--shadow-lg); padding: 24px 26px;
	display: flex; flex-direction: column; gap: 16px;
	transform: translateY(14px);
	transition: transform .35s var(--ease);
}
.cookie-veil.is-shown .cookie { transform: none; }
.cookie__head { display: flex; align-items: center; gap: 12px; }
.cookie__mark { width: 30px; height: auto; }
.cookie__title { margin: 0; font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; color: var(--text-strong); }
.cookie__text { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--text); }
.cookie__text a { color: var(--green-ink); font-weight: 700; text-decoration: underline; }
.cookie__cats { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 12px 14px; background: var(--bg-alt); border-radius: 10px; }
.cookie__cat { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; font-weight: 700; color: var(--text-strong); cursor: pointer; }
.cookie__cat input { width: 16px; height: 16px; margin: 0; accent-color: var(--green-ink); cursor: pointer; }
.cookie__cat input:disabled { cursor: default; }
.cookie__more { font-size: .85rem; }
.cookie__more summary {
	cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 7px;
	color: var(--green-ink); font-weight: 700;
}
.cookie__more summary::-webkit-details-marker { display: none; }
.cookie__more summary::after {
	content: ""; width: 7px; height: 7px; margin-top: -4px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); transition: transform .25s var(--ease);
}
.cookie__more[open] summary::after { transform: rotate(225deg); margin-top: 4px; }
.cookie__more-body { margin: 10px 0 0; color: var(--text-muted); line-height: 1.55; }
.cookie__more-body p { margin: 0 0 8px; }
.cookie__more-body p:last-child { margin-bottom: 0; }
.cookie__more-body strong { color: var(--text-strong); }
.cookie__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* CTA w ciemnej karcie POLECANY: srednia zielen (forest by sie zlal z navy) */
.tier--featured .btn--primary { background: var(--green-ink); }
.tier--featured .btn--primary:hover { background: var(--bright); }

/* ---- Podstrony: nagłówek strony (pagehead) + dane kontaktowe ---- */
.pagehead { padding-top: clamp(130px, 16vh, 190px); padding-bottom: clamp(28px, 5vw, 56px); background: linear-gradient(180deg, #fff 0%, var(--bg-alt) 100%); }
.pagehead__title { font-size: clamp(2.1rem, 4.6vw, 3.5rem); color: var(--navy); margin: 8px 0 18px; line-height: 1.05; }
.pagehead__lead { font-size: var(--fs-lead); color: var(--text-muted); max-width: 62ch; }
.kontakt__details { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 0; }
.kontakt__details a { font-family: var(--font-head); font-weight: 800; font-size: 1.1rem; color: #fff; transition: color .2s; }
.kontakt__details a:hover { color: var(--lime); }

/* ---- /kontakt/ - ciemny nagłówek + portret + dedykowany formularz ---- */
.kontakt-hero { padding-top: clamp(150px, 18vh, 220px); }
.kontakt-hero__title { font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin: 8px 0 16px; line-height: 1.05; }
.kontakt-hero__lead { color: rgba(255,255,255,.82); max-width: 60ch; font-size: var(--fs-lead); }

.kontakt-form__inner { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(30px, 5vw, 64px); align-items: start; }
.kontakt-card { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 3vw, 36px); text-align: center; position: sticky; top: 100px; }
.kontakt-card__photo { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; margin: 0 auto 16px; box-shadow: var(--shadow); }
.kontakt-card__name { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; color: var(--navy); margin: 0; }
.kontakt-card__role { font-size: .85rem; color: var(--text-muted); margin: 4px 0 18px; }
.kontakt-card__details { display: flex; flex-direction: column; gap: 8px; }
.kontakt-card__details a { font-family: var(--font-head); font-weight: 700; color: var(--bright); transition: color .2s; }
.kontakt-card__details a:hover { color: var(--bright); }

.kontakt-form__title { font-size: clamp(1.6rem, 2.6vw, 2.2rem); color: var(--navy); margin: 0 0 6px; }
.kontakt-form__sub { color: var(--text-muted); margin: 0 0 24px; }

/* dedykowany formularz z etykietami (siatka 2-kol) */
.form--labeled { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--wide { grid-column: 1 / -1; }
.field__label { font-family: var(--font-head); font-weight: 700; font-size: .82rem; color: var(--text-strong); }
.field__input { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; font-size: .95rem; background: var(--bg-alt); transition: border-color .2s, box-shadow .2s, background .2s; }
.field__input:focus { outline: none; border-color: var(--bright); box-shadow: 0 0 0 3px rgba(11,64,51,.15); background: #fff; }
textarea.field__input { resize: vertical; }
.form--labeled .form__submit { justify-self: start; }
.form--labeled .form__consent { align-items: flex-start; }
@media (max-width: 760px) { .kontakt-form__inner { grid-template-columns: 1fr; } .kontakt-card { position: static; max-width: 340px; } }
@media (max-width: 560px) { .form--labeled { grid-template-columns: 1fr; } }

/* ---- NAV na ciemnym nagłówku (jasne menu/logo, dopóki nie scrolled) ---- */
.nav--on-dark:not(.is-stuck) .nav__top { color: #fff; }
.nav--on-dark:not(.is-stuck) .nav__burger span { background: #fff; }
.nav--on-dark:not(.is-stuck) .nav__logo img { filter: brightness(0) invert(1); }

/* CTA „Bezpłatny audyt" na ciemnym nagłówku: białe tło, ciemnozielony tekst ---- */
.nav--on-dark:not(.is-stuck) .btn--primary { background: #fff; color: var(--navy); }
.nav--on-dark:not(.is-stuck) .btn--primary:hover { background: var(--green); color: #fff; }

/* ---- Generyczny ciemny page-hero (podstrony) ---- */
.pagehero { padding-top: clamp(150px, 18vh, 220px); }

/* ---- Okruszki w hero podstron (widoczny odpowiednik schema BreadcrumbList).
   Kontrast na navy liczony: baza 6,5:1, linki 9,4:1 (AA z zapasem). ---- */
.crumbs { position: relative; z-index: 2; font-size: .78rem; letter-spacing: .02em; margin: 0 0 18px; color: rgba(255,255,255,.62); }
.crumbs a { color: rgba(255,255,255,.78); text-decoration: none; }
.crumbs a:hover, .crumbs a:focus-visible { color: #fff; text-decoration: underline; }
.crumbs__sep { margin: 0 9px; opacity: .55; }
.crumbs [aria-current] { color: rgba(255,255,255,.88); }
/* founder-hero (poznajmy-sie) jest jasny - ciemny wariant */
.founder-hero .crumbs { color: var(--text-muted); }
.founder-hero .crumbs a { color: var(--text); }
.founder-hero .crumbs a:hover, .founder-hero .crumbs a:focus-visible { color: var(--text-strong); }
.founder-hero .crumbs [aria-current] { color: var(--text); }
.err404-spacer { min-height: clamp(200px, 36vh, 480px); } /* 404: biale swiatlo miedzy hero a stopka (strona byla za krotka) */
.pagehero__title { font-size: clamp(2.2rem, 4.8vw, 3.8rem); margin: 8px 0 16px; line-height: 1.04; max-width: 20ch; }
.pagehero__lead { color: rgba(255,255,255,.82); max-width: 60ch; font-size: var(--fs-lead); margin: 0 0 28px; }

/* ---- Prose (bloki tekstowe podstron) ---- */
.prose { max-width: 780px; }
.prose p { margin: 0 0 16px; color: var(--text); font-size: 1.05rem; line-height: 1.75; }

/* ---- Karty usług (linkowane) ---- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.svc-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 2.5vw, 32px); color: inherit; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.svc-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(11,64,51,.25); }
.svc-card__no { font-family: var(--font-head); font-weight: 900; font-size: 1.1rem; color: var(--bright); }
.svc-card__title { font-size: 1.2rem; color: var(--navy); margin: 10px 0 8px; }
.svc-card__desc { color: var(--text-muted); font-size: .95rem; margin: 0 0 18px; flex: 1; }
.svc-card__more { font-family: var(--font-head); font-weight: 800; font-size: .85rem; color: var(--bright); display: inline-flex; align-items: center; gap: 8px; }
.svc-card__more .arrow { transition: transform .25s var(--ease); }
.svc-card:hover .svc-card__more .arrow { transform: translateX(4px); }
@media (max-width: 900px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .svc-grid { grid-template-columns: 1fr; } }

/* ---- CTA band (ciemny pas z przyciskiem) ---- */
.cta-band__inner { text-align: center; max-width: 720px; margin-inline: auto; }
.cta-band__title { font-size: clamp(1.8rem, 3.2vw, 2.6rem); margin: 0 0 14px; }
.cta-band__text { color: rgba(255,255,255,.82); margin: 0 0 26px; font-size: var(--fs-lead); }

/* wysuwany pasek pod menu - biały na ciemnym nagłówku ---- */
.nav--on-dark:not(.is-stuck) .nav__top::after { background: #fff; }

/* ---- /emag/ - liczby (równe wysokości, bez łamania), eb-stats, lista prose ---- */
.emag-stats .container { max-width: var(--container-wide); }
.emag-stats .stats__milestones { gap: clamp(18px, 3vw, 44px); align-items: stretch; }
.emag-stats .milestone { justify-content: flex-start; }
.emag-stats .milestone__num { font-size: clamp(1.7rem, 3vw, 2.7rem); white-space: nowrap; }
.emag-stats .milestone__label { min-height: 3.4em; }

.eb-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; }
.eb-stat { background: var(--bg-alt); border-radius: var(--radius); padding: clamp(22px, 2.5vw, 30px); border-left: 3px solid var(--green); }
.eb-stat__num { display: block; font-family: var(--font-head); font-weight: 900; font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--bright); line-height: 1; }
.eb-stat__label { display: block; margin-top: 8px; color: var(--text-muted); font-size: .95rem; }
@media (max-width: 560px) { .eb-stats { grid-template-columns: 1fr; } }

.prose__list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.prose__list li { position: relative; padding-left: 28px; color: var(--text); }
.prose__list li::before { content: "\2713"; position: absolute; left: 0; color: var(--green); font-weight: 800; }

/* ---- /emag/ intro - tekst + mapa Rumunii (2 kolumny) ---- */
.emag-intro__inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.emag-intro__text .sec-head { margin-bottom: 18px; }
.emag-intro__media img { width: 100%; max-width: 440px; height: auto; display: block; margin-inline: auto; }
@media (max-width: 860px) { .emag-intro__inner { grid-template-columns: 1fr; } .emag-intro__media { order: -1; max-width: 360px; margin-inline: auto; } }

/* ---- Karta ceny (konsultacje) ---- */
.price-card { display: inline-flex; flex-direction: column; align-items: flex-start; background: var(--navy); border-radius: var(--radius); padding: 22px 32px; margin-bottom: 26px; }
.price-card__num { font-family: var(--font-head); font-weight: 900; font-size: clamp(2rem, 4vw, 3rem); color: #fff; line-height: 1; }
.price-card__unit { color: var(--lime); font-weight: 700; font-size: .9rem; margin-top: 6px; }
.pricing-terms__box { max-width: 780px; margin: 0 auto; }
.pricing-terms__box .prose { max-width: none; }

/* ---- Obraz wiodący podstrony (laptop/dashboard) ---- */
.emag-figure { padding-top: clamp(36px, 5vw, 64px); padding-bottom: 0; }
.page-figure { display: block; width: 100%; max-width: 940px; height: auto; margin: 0 auto; }

/* laptop (landscape) w kolumnie intro - nieco szerszy niż kwadratowa mapa */
.emag-intro__media .page-figure { max-width: 540px; }

/* ---- jak-zaczac: intro w stylu hero - laptop jako scena w tle ---- */
.emag-intro--stage {
	position: relative; overflow: hidden;
	background: linear-gradient(180deg, #fff 0%, var(--bg-alt) 100%);
}
.emag-intro--stage::after {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
	background-image: linear-gradient(rgba(11,43,64,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(11,43,64,.04) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: radial-gradient(65% 75% at 72% 40%, #000, transparent 75%);
	        mask-image: radial-gradient(65% 75% at 72% 40%, #000, transparent 75%);
}
.emag-intro__bg {
	position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background:
		radial-gradient(55% 60% at 92% 18%, rgba(11,64,51,0.10), transparent 70%),
		radial-gradient(45% 50% at 4% 96%, rgba(22,71,115,0.08), transparent 70%);
}
/* Jak .hero__orb: radial-gradient zamiast kosztownego filter:blur(60px). */
.emag-intro__orb { position: absolute; border-radius: 50%; opacity: .5; z-index: 1; pointer-events: none; }
.emag-intro__orb--a { width: 500px; height: 500px; background: radial-gradient(circle closest-side, rgba(34,178,116,.16) 0%, rgba(34,178,116,.15) 42%, rgba(34,178,116,0) 100%); top: -150px; right: -130px; }
.emag-intro__orb--b { width: 440px; height: 440px; background: radial-gradient(circle closest-side, rgba(22,71,115,.18) 0%, rgba(22,71,115,.17) 42%, rgba(22,71,115,0) 100%); bottom: -170px; left: -150px; }
.emag-intro--stage .emag-intro__inner { position: relative; z-index: 2; grid-template-columns: 1fr 1fr; }
.emag-intro--stage .emag-intro__media { position: relative; }
.emag-intro--stage .emag-intro__media::before {
	content: ""; position: absolute; z-index: -1;
	width: 80%; height: 74%; top: 8%; left: 16%;
	background: radial-gradient(closest-side, rgba(34,178,116,.22), transparent 70%);
}
.emag-intro--stage .emag-intro__media .page-figure {
	width: 126%; max-width: none; margin: 0;
	transform: perspective(1600px) rotateY(-7deg) rotateX(2deg);
	filter: drop-shadow(0 45px 70px rgba(11,43,64,.25));
	will-change: transform;
}
@media (max-width: 860px) {
	.emag-intro--stage .emag-intro__inner { grid-template-columns: 1fr; }
	.emag-intro--stage .emag-intro__media { max-width: 440px; margin-inline: auto; }
	.emag-intro--stage .emag-intro__media .page-figure { width: 100%; transform: none; filter: drop-shadow(0 24px 40px rgba(11,43,64,.20)); }
	.emag-intro__orb--a { width: 360px; height: 360px; }
	.emag-intro__orb--b { width: 320px; height: 320px; }
}

/* ============================================================
   MOBILE FIXES (2026-05-29)
   ============================================================ */
@media (max-width: 760px) {
	/* hero: ukryj dashboard w tle (zasmiecal); czysty tekst na jasnym tle */
	.hero__stage { display: none; }
	.hero { background: linear-gradient(180deg, #fff 0%, var(--bg-alt) 100%); }
	.hero__inner { min-height: auto; }
}
@media (max-width: 560px) {
	/* cookie: ciasniejszy padding, przyciski w kolumnie */
	.cookie { padding: 18px; }
	.cookie__actions { flex-direction: column-reverse; }
	.cookie__actions .btn { width: 100%; justify-content: center; }
}

/* ---- Proces 4-krokowy (kampanie) ---- */
.process--4 .process__steps { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .process--4 .process__steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .process--4 .process__steps { grid-template-columns: 1fr; } }
/* 6 kroków = 2 rzędy po 3 - linia łącząca objęłaby tylko pierwszy rząd, więc off */
@media (min-width: 860px) { .process--6 .process__steps::before { display: none; } }
.process--6 .step__no { box-shadow: none; }
/* 8 kroków = 2 rzędy po 4 (proces wdrożenia OMS) - linia łącząca off jak przy 6 */
.process--8 .process__steps { grid-template-columns: repeat(4, 1fr); }
@media (min-width: 860px) { .process--8 .process__steps::before { display: none; } }
.process--8 .step__no { box-shadow: none; }
@media (max-width: 980px) { .process--8 .process__steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .process--8 .process__steps { grid-template-columns: 1fr; } }

/* ---- Warianty usługi (dodawanie produktów) ---- */
.variant { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 3vw, 36px); margin-bottom: 18px; }
.variant__no { font-family: var(--font-head); font-weight: 900; color: var(--bright); font-size: 1.1rem; }
.variant__title { font-size: 1.25rem; color: var(--navy); margin: 8px 0 10px; }
.variant__desc { color: var(--text); margin: 0 0 16px; }
.variant__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.variant__col h4 { font-family: var(--font-head); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin: 0 0 10px; }
.variant__col .prose__list { margin: 0; }
@media (max-width: 560px) { .variant__cols { grid-template-columns: 1fr; } }

/* ---- Callout „Zapamiętaj" ---- */
.callout { background: var(--pale); border-left: 4px solid var(--bright); border-radius: var(--radius-sm); padding: 18px 22px; margin-top: 22px; color: var(--text-strong); font-weight: 600; }

/* ---- /poznajmy-sie/ founder hero ---- */
.founder-hero { padding-top: clamp(130px, 16vh, 200px); }
.founder-hero__lead { font-size: var(--fs-lead); color: var(--text-muted); margin: 18px 0 26px; max-width: 52ch; }
.founder-hero__photo { width: 100%; max-width: 420px; height: auto; aspect-ratio: 6 / 7; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); margin-inline: auto; display: block; }

/* ---- /marketplace/ karty platform ---- */
.platforms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.plat-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 3vw, 34px); display: flex; gap: 22px; align-items: flex-start; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.plat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.plat-card__logo { width: 110px; height: 44px; object-fit: contain; object-position: left center; flex: 0 0 auto; }
.plat-card__body h3 { font-size: 1.2rem; color: var(--navy); margin: 0; }
.plat-card__tag { color: var(--green-ink); font-weight: 700; font-size: .8rem; font-family: var(--font-head); margin: 2px 0 8px; }
.plat-card__body p { margin: 0; color: var(--text-muted); font-size: .95rem; }
.plat-more { margin: 28px auto 0; max-width: 640px; text-align: center; color: var(--text-muted); }
@media (max-width: 700px) { .platforms { grid-template-columns: 1fr; } .plat-card { flex-direction: column; gap: 14px; } }

/* ---- /poznajmy-sie/ misja - jasny statement (oddzielony od ciemnego formularza) ---- */
.mission { background: var(--pale); }
.mission__inner { max-width: 820px; margin-inline: auto; text-align: center; }
.mission__title { font-size: clamp(1.8rem, 3.4vw, 2.8rem); color: var(--navy); margin: 12px 0 16px; line-height: 1.1; }
.mission__inner .eyebrow { justify-content: center; }
.mission__text { font-size: var(--fs-lead); color: var(--text); max-width: 62ch; margin-inline: auto; }

/* ---- /baza-wiedzy/ - meta wpisu + zajawka ---- */
.post__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.post__cat { font-family: var(--font-head); font-weight: 800; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--green-ink); }
.post__excerpt { color: var(--text-muted-strong); font-size: .92rem; line-height: 1.55; margin: 0 0 14px; }

/* ---- Pojedynczy wpis bloga ---- */
.article-hero__meta { color: rgba(255,255,255,.7); font-family: var(--font-head); font-weight: 700; font-size: .9rem; margin-top: 14px; }
.article-body { max-width: 940px; margin-inline: auto; }
/* Justowanie tresci wpisu. Dzielenie wyrazow obowiazkowe - bez niego justowanie
   polskiego tekstu robi "rzeki" bialych dziur (html ma lang="pl-PL", wiec hyphens dziala). */
.article-body p, .article-body li { text-align: left; hyphens: auto; }
/* wyjatki: lead w boksie CTA (duzy tekst) i spis tresci - te zostaja do lewej */
.article-body .article-ctabox__lead,
.article-body :is(ul,ol):has(> li > a[href^="#"]) li { text-align: left; hyphens: manual; }
.article-body h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--navy); margin: 1.8em 0 .5em; line-height: 1.2; }
.article-body h3 { font-size: 1.3rem; color: var(--navy); margin: 1.5em 0 .4em; }
.article-body h4 { font-size: 1.1rem; color: var(--navy); margin: 1.3em 0 .4em; }
.article-body p { margin: 0 0 1.1em; line-height: 1.8; color: var(--text); }
.article-body img { border-radius: var(--radius); height: auto; max-width: 100%; margin: 1.4em 0; }
.article-body ul, .article-body ol { margin: 0 0 1.2em 1.3em; line-height: 1.8; color: var(--text); }
.article-body li { margin-bottom: .4em; }
.article-body a { color: var(--bright); text-decoration: underline; }
.article-body strong { color: var(--text-strong); }
.article-body blockquote { border-left: 4px solid var(--bright); padding-left: 18px; margin: 1.4em 0; color: var(--text-strong); font-style: italic; }

/* ---- Tabele w tresci wpisu (styl tabeli porownawczej z home: .compare__table) ----
   Wpisy maja gole <table> z edytora - bez tych regul renderowaly sie zupelnie
   bez ramek i oddechu. Naglowek navy, pierwsza kolumna jak .compare__label,
   zebra na wierszach. Mobile: karty (gdy td ma data-th) albo przewijanie w poziomie. */
.article-body table {
	width: 100%; margin: 1.9em 0; border-collapse: separate; border-spacing: 0;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	box-shadow: var(--shadow); font-size: .95rem;
}
.article-body table th {
	padding: 15px 18px; background: var(--navy); color: #fff;
	text-align: left; vertical-align: middle; line-height: 1.35;
	font-family: var(--font-head); font-weight: 800; font-size: .74rem;
	letter-spacing: .04em; text-transform: uppercase;
}
.article-body table td {
	padding: 15px 18px; border-top: 1px solid var(--line);
	color: var(--text); line-height: 1.6; vertical-align: top;
	text-align: left; hyphens: manual;
}
.article-body table tbody tr:nth-child(even) td { background: var(--bg-alt); }
.article-body table td:first-child { font-family: var(--font-head); font-weight: 700; color: var(--text-strong); }
.article-body table p { margin: 0; text-align: inherit; }
/* rogi: przy border-collapse: separate tlo komorek nie jest przycinane przez radius tabeli */
.article-body table thead tr:first-child th:first-child { border-top-left-radius: var(--radius); }
.article-body table thead tr:first-child th:last-child { border-top-right-radius: var(--radius); }
.article-body table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius); }
.article-body table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius); }

@media (max-width: 760px) {
	/* bez etykiet data-th zostaje tabela - przewijana w poziomie */
	.article-body table:not(:has(td[data-th])) { display: block; overflow-x: auto; }
	/* z data-th - kazdy wiersz staje sie karta, naglowek kolumny wchodzi nad wartosc */
	.article-body table:has(td[data-th]) { border: 0; background: none; box-shadow: none; }
	.article-body table:has(td[data-th]) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.article-body table:has(td[data-th]) :is(tbody, tr, td) { display: block; width: 100%; }
	.article-body table:has(td[data-th]) tr {
		margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--radius);
		background: #fff; box-shadow: var(--shadow); overflow: hidden;
	}
	.article-body table:has(td[data-th]) tr:last-child { margin-bottom: 0; }
	.article-body table:has(td[data-th]) tbody tr td,
	.article-body table:has(td[data-th]) tbody tr:nth-child(even) td { background: #fff; border-radius: 0; }
	.article-body table:has(td[data-th]) td { padding: 11px 16px; border-top: 1px solid var(--line); }
	.article-body table:has(td[data-th]) td::before {
		content: attr(data-th); display: block; margin-bottom: 3px;
		font-family: var(--font-head); font-weight: 800; font-size: .68rem;
		letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted);
	}
	.article-body table:has(td[data-th]) tbody tr td:first-child { background: var(--navy); color: #fff; border-top: 0; padding: 13px 16px; }
	/* na navy pasku karty inline'y musza dziedziczyc biel - .article-body strong ma
	   var(--text-strong), czyli dokladnie kolor --navy: tekst znikal w tle */
	.article-body table:has(td[data-th]) tbody tr td:first-child :is(strong, b, em, a) { color: inherit; }
	.article-body table:has(td[data-th]) td:first-child::before { display: none; }
}
/* bez CSS Salienta WPBakery to zwykle bloki - pilnujemy tylko szerokości/odstępów */
/* siatka kolumn WPBakery - rodzic kolumn to .row_col_wrap_12 (wrapper Salienta) */
.article-body .row-bg-wrap, .article-body .row-bg, .article-body .inner-wrap.row-bg-layer { display: none !important; }
.article-body .vc_row { margin: 1.6em 0; }
.article-body .row_col_wrap_12, .article-body .row_col_wrap_12_inner { display: flex; flex-wrap: wrap; gap: 30px; align-items: center; }
.article-body .wpb_column { min-width: 0; padding: 0; }
.article-body .vc_col-sm-12 { flex: 1 1 100%; }
.article-body .vc_col-sm-6 { flex: 1 1 calc(50% - 15px); }
.article-body .vc_col-sm-4 { flex: 1 1 calc(33.333% - 20px); }
.article-body .vc_col-sm-3 { flex: 1 1 calc(25% - 23px); }
.article-body .vc_column-inner, .article-body .wpb_wrapper { width: 100%; }
.article-body .wpb_single_image, .article-body figure { margin: 0; }
.article-body .wpb_single_image img { display: block; }
@media (max-width: 700px) {
	.article-body .row_col_wrap_12, .article-body .row_col_wrap_12_inner { gap: 18px; }
	.article-body .vc_col-sm-6, .article-body .vc_col-sm-4, .article-body .vc_col-sm-3 { flex: 1 1 100%; }
}
.article-back { max-width: 940px; margin: 32px auto 0; }

/* ---- Artykuł: mniejszy odstęp hero→treść + zerowanie ogromnych vw-paddingów rzędów ---- */
.article-section { padding-top: clamp(30px, 4vw, 54px); }
.article-body .wpb_row, .article-body .vc_row-fluid { padding-top: 0 !important; padding-bottom: 0 !important; }

/* ---- V3-native: elementy po migracji z WPBakery/Nectar (bez zależności od Salienta) ---- */
/* Obraz w <figure> (dawne image_with_animation) - wyśrodkowany, ograniczony.
   Bez width:fit-content - przy srcset+sizes figura brala szerokosc z rozmiaru
   skorygowanego gestoscia (nie z realnej szerokosci pliku) i zapadala sie do ~300px.
   Wszystkie oryginaly w poradnikach maja >=1024px, wiec limit nie upscaluje.
   544px = 680 -20% (zrzuty sa kwadratowe, przy 680 zabieraly za duzo ekranu). */
.article-body .article-figure { margin: 1.8em auto; max-width: min(544px, 100%); }
.article-body .article-figure img, .article-body .article-img { display: block; width: 100%; height: auto; margin: 0; border-radius: var(--radius); }
.article-body .article-figure--center { text-align: center; }
.article-body .article-figure__zoom { display: block; }
/* Krotki krok poradnika sasiadujacy ze zrzutem - na tej samej osi co obrazek.
   Klase dokleja harta_article_steps() (inc/helpers.php), tylko akapitom <=150 zn. */
.article-body p.article-step { text-align: center; }

/* Układ dwukolumnowy: tekst + obraz (odtworzenie par vc_col-sm-6 z Salienta) */
.article-body .article-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 52px); align-items: center; margin: 2.2em 0; }
.article-body .article-cols > * { min-width: 0; }
.article-body .article-cols__text > :first-child { margin-top: 0; }
.article-body .article-cols__text > :last-child { margin-bottom: 0; }
.article-body .article-cols .article-figure { width: auto; max-width: none; margin: 0; }
.article-body .article-cols--img-left .article-cols__text { order: 2; }
@media (max-width: 760px) {
	.article-body .article-cols { grid-template-columns: 1fr; gap: 20px; margin: 1.8em 0; }
	.article-body .article-cols--img-left .article-cols__text { order: 0; }
}

/* Band CTA w treści (dawny nectar-cta „Chcesz zwiększyć…") - pytanie | tekst + przycisk */
.article-body .article-ctabox { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 44px); align-items: center; margin: 2.6em 0; padding: clamp(26px, 3.4vw, 46px); background: linear-gradient(120deg, var(--navy) 0%, var(--forest) 100%); border-radius: var(--radius-lg); color: #fff; }
.article-body .article-ctabox__lead { margin: 0; font-family: var(--font-head); font-weight: 800; font-size: clamp(1.35rem, 2.2vw, 1.85rem); line-height: 1.18; color: #fff; }
.article-body .article-ctabox__body { margin: 0; }
.article-body .article-ctabox__body > p { margin: 0 0 18px; color: rgba(255,255,255,.86); line-height: 1.7; }
.article-body .article-ctabox__btn { margin: 0; }
.article-body .article-ctabox .btn--primary { background: var(--lime); color: var(--navy); }
.article-body .article-ctabox .btn--primary:hover { background: #fff; color: var(--navy); }
@media (max-width: 760px) {
	.article-body .article-ctabox { grid-template-columns: 1fr; gap: 16px; margin: 2em 0; }
}
/* CTA (dawne nectar_btn) - .btn stylowany globalnie */
.article-body .article-cta { margin: 1.8em 0; }
/* FAQ akordeon (dawne toggle/toggles) - natywne <details>, zero JS */
/* FAQ we wpisie - wizualnie to samo co akordeon .faq-item na stronach (biala karta,
   zielona ramka + cien po otwarciu, ikona +/-). Roznica jest tylko techniczna:
   w tresci wpisu <details> zamiast buttona z ui.js, bo w edytorze piszemy czysty HTML. */
.article-body .faq { display: flex; flex-direction: column; gap: 12px; margin: 1.8em 0; }
.article-body details.faq__item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.article-body details.faq__item[open] { border-color: var(--green); box-shadow: var(--shadow); }
.article-body details.faq__item > summary {
	display: flex; align-items: center; justify-content: space-between; gap: 18px;
	padding: 20px 24px; cursor: pointer; list-style: none;
	font-family: var(--font-head); font-weight: 700; font-size: 1.05rem;
	color: var(--text-strong); text-align: left; hyphens: manual;
}
.article-body details.faq__item > summary::-webkit-details-marker { display: none; }
/* ikona jak .faq-item__icon: dwie belki 18x2 px, pionowa znika po otwarciu */
.article-body details.faq__item > summary::after {
	content: ""; flex: 0 0 18px; width: 18px; height: 18px;
	background: linear-gradient(var(--green), var(--green)) center / 18px 2px no-repeat,
	            linear-gradient(var(--green), var(--green)) center / 2px 18px no-repeat;
	transition: background-size .25s var(--ease);
}
.article-body details.faq__item[open] > summary::after { background-size: 18px 2px, 2px 0; }
.article-body .faq__a { padding: 0 24px 22px; color: var(--text-muted-strong); line-height: 1.8; text-align: left; hyphens: auto; }
.article-body .faq__a p { color: var(--text-muted-strong); }
.article-body .faq__a > :last-child { margin-bottom: 0; }
/* Graceful fallback dla dekoracyjnych klas Salienta pozostałych w treści */
.article-body .main-color { color: var(--bright); }
.article-body .subtitle-bg-main-color { display: inline-block; font-family: var(--font-head); font-weight: 800; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--bright); }
.article-body .hero-title { color: var(--navy); line-height: 1.2; }

/* Paginacja archiwów/wyszukiwarki (fallback motywu harta-v3) */
.harta-pagination { margin-top: 36px; }
.harta-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.harta-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--font-head); font-weight: 800; color: var(--navy); text-decoration: none; }
.harta-pagination a.page-numbers:hover { border-color: var(--bright); color: var(--bright); }
.harta-pagination .page-numbers.current { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ---- Spis treści - karta z tłem (listy z kotwicami: ul LUB ol) ----
   Kartę dostaje TYLKO lista najwyższego poziomu (jej li ma bezpośrednie <a href="#">).
   Zagnieżdżone pod-listy są wciągane do tej samej karty (bez własnego tła/borderu),
   żeby główne punkty i podpunkty były połączone. */
.article-body ul:has(> li > a[href^="#"]),
.article-body ol:has(> li > a[href^="#"]) {
	background: var(--bg-alt);
	border: 1px solid var(--line); border-left: 4px solid var(--bright);
	border-radius: var(--radius); margin: 1.4em 0;
}
.article-body ul:has(> li > a[href^="#"]) { list-style: none; padding: 22px 26px; }
.article-body ol:has(> li > a[href^="#"]) { list-style: decimal; padding: 22px 30px 22px 48px; }
.article-body :is(ul,ol):has(> li > a[href^="#"]) li { margin: 0 0 10px; padding: 0; }
.article-body :is(ul,ol):has(> li > a[href^="#"]) li:last-child { margin-bottom: 0; }
.article-body :is(ul,ol):has(> li > a[href^="#"]) > li::marker { color: var(--green-ink); font-weight: 800; }
.article-body :is(ul,ol):has(> li > a[href^="#"]) a { color: var(--text-strong); text-decoration: none; font-weight: 700; font-family: var(--font-head); font-size: .95rem; }
.article-body :is(ul,ol):has(> li > a[href^="#"]) a:hover { color: var(--green-ink); text-decoration: underline; }
/* zagnieżdżone (pod-punkty) - bez własnej karty, wcięcie, połączone z punktem nadrzędnym */
.article-body :is(ul,ol):has(> li > a[href^="#"]) :is(ul,ol) {
	list-style: none; background: none; border: 0; border-radius: 0;
	padding: 8px 0 2px 16px; margin: 6px 0 0;
}
.article-body :is(ul,ol):has(> li > a[href^="#"]) :is(ul,ol) li { margin: 0 0 6px; }
.article-body :is(ul,ol):has(> li > a[href^="#"]) :is(ul,ol) a { font-weight: 600; color: var(--text-muted); font-family: var(--font-body); font-size: .9rem; }

/* ---- Spis treści w formacie WPBakery „icon + text" (wpisy typu GPSR) ----
   W v3 nie ładujemy CSS Salienta ani FontAwesome → bloki .iwithtext byłyby
   bez layoutu, a ikony fa-* puste. Składamy je jako kartę z zieloną strzałką. */
.article-body .wpb_wrapper:has(> .iwithtext) {
	background: var(--bg-alt); border: 1px solid var(--line); border-left: 4px solid var(--bright);
	border-radius: var(--radius); padding: 18px 24px; margin: 1.4em 0;
}
.article-body .iwithtext { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; }
.article-body .iwithtext:last-child { margin-bottom: 0; }
.article-body .iwt-icon { flex: 0 0 auto; }
.article-body .iwt-icon i { font-style: normal; }
.article-body .iwt-icon i::before { content: "\203A"; color: var(--green); font-weight: 800; font-size: 1.15em; }
.article-body .iwt-text a { color: var(--text-strong); text-decoration: none; font-weight: 700; font-family: var(--font-head); font-size: .95rem; }
.article-body .iwt-text a:hover { color: var(--green-ink); text-decoration: underline; }
.article-body .iwithtext .clear { display: none; }

/* ---- Lightbox (powiększanie zdjęć w artykułach) ---- */
.article-body a[href$=".jpg"], .article-body a[href$=".jpeg"], .article-body a[href$=".png"], .article-body a[href$=".webp"] { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(11,43,64,.92); display: none; align-items: center; justify-content: center; padding: 30px; cursor: zoom-out; }
.lightbox.is-open { display: flex; }
.lightbox__img { max-width: 92vw; max-height: 88vh; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.lightbox__close { position: absolute; top: 16px; right: 24px; background: none; border: 0; color: #fff; font-size: 2.6rem; line-height: 1; cursor: pointer; }
/* globalny :focus-visible ma outline --bright (ciemna zielen) - na granatowym tle overlaya nie widac */
.lightbox :focus-visible { outline-color: var(--lime); }

/* Fix 2026-05-30: tytul panelu formularza byl bialy na bialym (panel ma tlo #fff wewnatrz .section--dark, globalna regula naglowkow ciemnej sekcji nadpisywala kolor). */
.ctaform .ctaform__panel .ctaform__panel-title { color: var(--navy); }
.ctaform .ctaform__panel .ctaform__panel-sub { color: var(--text-muted); }

/* ============================================================
   FALA 1 - nowe sekcje home: trustbar, compare, oms-home, trendyol-home, audience
   ============================================================ */

/* ---------- TRUST BAR ---------- */
.trustbar { padding-block: clamp(40px, 5vw, 64px); background: var(--bg-alt); }
.trustbar__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 40px); }
.trustbar__item { display: flex; gap: 14px; align-items: flex-start; }
.trustbar__check { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--bright); position: relative; margin-top: 2px; }
.trustbar__check::after { content: ""; position: absolute; left: 9px; top: 5px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.trustbar__title { display: block; font-family: var(--font-head); font-weight: 800; color: var(--text-strong); font-size: 0.98rem; margin-bottom: 4px; }
.trustbar__text { display: block; font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; }
@media (max-width: 900px) { .trustbar__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .trustbar__grid { grid-template-columns: 1fr; } }

/* ---------- COMPARE ---------- */
.compare__table { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--shadow); }
.compare__row { display: grid; grid-template-columns: 1.05fr 1.5fr 1.5fr; }
.compare__row + .compare__row { border-top: 1px solid var(--line); }
.compare__row > span { padding: 18px clamp(16px, 2vw, 26px); display: flex; align-items: center; }
.compare__row--head .compare__label,
.compare__row--head .compare__a,
.compare__row--head .compare__b { font-family: var(--font-head); font-weight: 800; font-size: 0.92rem; color: #fff; }
.compare__row--head { background: var(--navy); }
.compare__row--head .compare__b { background: var(--bright); }
.compare__label { font-family: var(--font-head); font-weight: 700; color: var(--text-strong); font-size: 0.92rem; }
.compare__a { color: var(--text-muted); font-size: 0.95rem; }
.compare__b { color: var(--text-strong); font-size: 0.95rem; font-weight: 600; background: rgba(11,64,51,0.045); }
@media (max-width: 760px) {
	.compare__row { grid-template-columns: 1fr 1fr; }
	.compare__row .compare__label { grid-column: 1 / -1; background: var(--bg-alt); border-bottom: 1px solid var(--line); font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); padding-block: 10px; }
	.compare__row--head .compare__label { display: none; }
}

/* ---------- OMS (home) ---------- */
.oms-home__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.oms-home__text .btn { margin-top: 28px; }
.oms-home__points { list-style: none; margin: 0; padding: clamp(26px, 3vw, 38px); display: grid; gap: 14px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.oms-home__points li { position: relative; padding-left: 30px; font-weight: 600; color: var(--text-strong); line-height: 1.5; }
.oms-home__points li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 15px; height: 8px; border: solid var(--bright); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
@media (max-width: 900px) { .oms-home__inner { grid-template-columns: 1fr; } }

/* ---------- TRENDYOL (home) ---------- */
.trendyol-home__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.trendyol-home__text .sec-title { margin-bottom: 16px; }
.trendyol-home__text .sec-lead { color: rgba(255,255,255,0.82); }
.trendyol-home__text .btn { margin-top: 28px; }
.trendyol-home__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.trendyol-home__points li { position: relative; padding-left: 28px; color: var(--text-invert); font-weight: 600; line-height: 1.5; }
.trendyol-home__points li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 15px; height: 8px; border: solid var(--green); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
@media (max-width: 900px) { .trendyol-home__inner { grid-template-columns: 1fr; } }

/* ---------- AUDIENCE (dla kogo / nie dla kogo) ---------- */
.audience__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3vw, 32px); }
.audience__col { padding: clamp(28px, 3vw, 40px); border-radius: var(--radius-lg); border: 1px solid var(--line); background: #fff; }
.audience__col--fit { background: rgba(11,64,51,0.045); border-color: rgba(11,64,51,0.18); }
.audience__h { font-size: var(--fs-h3); margin-bottom: 20px; }
.audience__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; }
.audience__list li { position: relative; padding-left: 32px; color: var(--text); line-height: 1.5; }
.audience__list--fit li::before { content: ""; position: absolute; left: 3px; top: 4px; width: 15px; height: 8px; border: solid var(--bright); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.audience__list--nofit li::before { content: "\00d7"; position: absolute; left: 4px; top: -2px; color: var(--steel); font-weight: 800; font-size: 1.25rem; font-family: var(--font-head); }
@media (max-width: 760px) { .audience__grid { grid-template-columns: 1fr; } }

/* ============================================================
   FALA 4 - dokumenty (legal), cennik (modele), realizacje
   ============================================================ */
.pagehero--slim { padding-block: clamp(120px, 14vh, 180px) clamp(40px, 5vw, 64px); }
.pagehero__meta { color: rgba(255,255,255,0.6); font-size: 0.9rem; margin-top: 14px; }

.legal { max-width: 820px; }
.legal__intro { font-size: var(--fs-lead); color: var(--text-muted); margin: 0 0 36px; }
.legal__block { margin-bottom: 30px; }
.legal__h { font-size: var(--fs-h3); margin-bottom: 12px; }
.legal__block p { margin: 0 0 12px; }
.legal__note { margin-top: 36px; padding: 16px 20px; background: var(--pale); border-radius: var(--radius-sm); font-size: 0.9rem; color: var(--navy); }

.foot__legal { display: flex; flex-wrap: wrap; gap: 18px; }
.foot__legal a { color: rgba(255,255,255,0.6); font-size: 0.85rem; transition: color .2s; }
.foot__legal a:hover { color: #fff; }
.foot__cookieopen { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: rgba(255,255,255,0.6); font-size: 0.85rem; transition: color .2s; }
.foot__cookieopen:hover, .foot__cookieopen:focus-visible { color: #fff; }

/* Realizacje - case + showcase */
.realcase { display: grid; grid-template-columns: 0.9fr 1.4fr; gap: clamp(28px, 4vw, 56px); align-items: center; padding: clamp(28px, 4vw, 48px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(11,64,51,0.045); }
.realcase__num { text-align: center; }
.realcase__eyebrow { display: block; font-family: var(--font-head); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green-ink); margin-bottom: 10px; }
.realcase__num strong { display: block; font-family: var(--font-head); font-weight: 900; font-size: clamp(2.4rem, 5vw, 3.6rem); color: var(--bright); line-height: 1; letter-spacing: -0.03em; }
.realcase__label { display: block; margin-top: 12px; color: var(--text-muted); font-size: 0.95rem; }
.realcase__text { margin: 0; font-size: var(--fs-lead); color: var(--text); }
@media (max-width: 760px) { .realcase { grid-template-columns: 1fr; text-align: center; } }

.showcase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 32px); }
.showcase { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.showcase__media { aspect-ratio: 4 / 3; background: var(--bg-alt); display: flex; align-items: center; justify-content: center; }
.showcase__media img { width: 100%; height: 100%; object-fit: cover; }
.showcase__media--empty { background: linear-gradient(135deg, var(--pale), #fff); }
.showcase__ph { font-family: var(--font-head); font-weight: 700; font-size: 0.85rem; color: var(--steel); }
.showcase__title { font-size: var(--fs-h3); margin: 20px clamp(18px,2vw,24px) 8px; }
.showcase__desc { margin: 0 clamp(18px,2vw,24px) 24px; color: var(--text-muted); font-size: 0.95rem; }
.showcase__note { text-align: center; color: var(--text-muted); font-size: 0.9rem; margin-top: 28px; }
@media (max-width: 760px) { .showcase-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Realizacje - flagowy case A+ w ramce urządzenia + galeria
   ============================================================ */
.flagship { display: grid; grid-template-columns: 1fr minmax(300px, 380px); gap: clamp(32px, 5vw, 72px); align-items: start; }
.flagship__panel { position: sticky; top: 100px; }
.flagship__cat { display: inline-block; font-family: var(--font-head); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-ink); padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; margin-bottom: 18px; }
.flagship__lead { font-size: var(--fs-lead); color: var(--text); margin: 0 0 28px; }
.flagship__blocks { display: grid; gap: 18px; margin-bottom: 30px; }
.flagship__block { padding-left: 18px; border-left: 2px solid var(--green); }
.flagship__bh { font-family: var(--font-head); font-weight: 800; font-size: 1rem; margin: 0 0 4px; color: var(--navy); }
.flagship__bp { margin: 0; color: var(--text-muted); font-size: 0.95rem; line-height: 1.55; }
.flagship__kpis { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.fkpi { padding: 16px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(11,64,51,0.045); text-align: center; }
.fkpi__num { display: block; font-family: var(--font-head); font-weight: 900; font-size: 1.35rem; color: var(--bright); line-height: 1.05; letter-spacing: -0.02em; }
.fkpi__unit { display: block; font-weight: 700; font-size: 0.64rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--green-ink); margin-top: 4px; }
.fkpi__label { display: block; margin-top: 9px; color: var(--text-muted); font-size: 0.76rem; line-height: 1.3; }
.flagship__note { margin: 0; font-size: 0.82rem; color: var(--steel); font-style: italic; }

.flagship__device { position: relative; }
.device { position: relative; max-width: 380px; margin-inline: auto; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--shadow-lg); overflow: hidden; }
.device__bar { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: var(--navy); }
.device__dots { display: inline-flex; gap: 5px; }
.device__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.32); }
.device__tag { font-family: var(--font-head); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.04em; color: rgba(255,255,255,.92); }
.device__screen { height: clamp(440px, 64vh, 660px); overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; background: #fff; }
.device__screen img { display: block; width: 100%; height: auto; }
.device__screen::-webkit-scrollbar { width: 8px; }
.device__screen::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.device::after { content: ""; position: absolute; left: 1px; right: 9px; bottom: 1px; height: 46px; background: linear-gradient(to top, #fff, rgba(255,255,255,0)); pointer-events: none; }
.device__hint { display: block; text-align: center; margin-top: 14px; font-size: 0.78rem; color: var(--text-muted); }

.cutouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 26px); }
.cutout { margin: 0; }
.cutout__link { display: block; position: relative; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-alt); aspect-ratio: 4 / 3; cursor: zoom-in; }
.cutout__link img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .5s var(--ease); }
.cutout__link:hover img { transform: scale(1.04); }
.cutout__zoom { position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(11,43,64,.82); color: #fff; font-size: 1.4rem; line-height: 1; opacity: 0; transform: translateY(6px); transition: .3s var(--ease); }
.cutout__link:hover .cutout__zoom { opacity: 1; transform: translateY(0); }
.cutout__cap { margin: 12px 2px 0; font-family: var(--font-head); font-weight: 700; font-size: 0.86rem; color: var(--navy); }

@media (max-width: 900px) {
	.flagship { grid-template-columns: 1fr; }
	.flagship__panel { position: static; }
}
@media (max-width: 760px) { .cutouts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .cutouts { grid-template-columns: 1fr; } }

/* ============================================================
   Home - pasmo realizacji (teaser, collage kadrów na ciemnym)
   ============================================================ */
.realteaser__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
.realteaser__lead { color: rgba(255,255,255,.82); font-size: var(--fs-lead); margin: 16px 0 28px; max-width: 52ch; }
.realteaser__collage { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.realteaser__thumb { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow-lg); background: #fff; aspect-ratio: 4 / 3; }
.realteaser__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.realteaser__thumb--1, .realteaser__thumb--4 { transform: translateY(-14px); }
.realteaser__thumb--2, .realteaser__thumb--3 { transform: translateY(14px); }
@media (max-width: 860px) {
	.realteaser__grid { grid-template-columns: 1fr; }
	.realteaser__thumb { transform: none !important; }
}
/* Na podstronach teaser bywa tuż przed cta-band - oba pasma mają identyczne ciemne tło, bez linii zlewają się w jedno. */
.realteaser + .cta-band { border-top: 1px solid rgba(255,255,255,.14); }

/* ============================================================
   Przełącznik języka (PL aktywny; RO/EN "wkrótce" do czasu tłumaczeń)
   ============================================================ */
.langsw { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.55); }
.langsw__opt { font-family: var(--font-head); font-weight: 700; font-size: 0.72rem; letter-spacing: .03em; line-height: 1; padding: 6px 9px; border-radius: 999px; color: var(--text-muted); text-decoration: none; transition: color .2s var(--ease), background .2s var(--ease); }
a.langsw__opt:hover { color: var(--navy); background: var(--pale); }
.langsw__opt.is-current { color: #fff; background: var(--bright); }
.langsw__opt.is-soon { color: var(--steel); opacity: .5; cursor: not-allowed; }
.langsw__opt.is-soon:hover { color: var(--steel); background: transparent; }

/* nav na ciemnym tle (zanim się przyklei) */
.nav--on-dark:not(.is-stuck) .langsw { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.10); }
.nav--on-dark:not(.is-stuck) .langsw__opt { color: rgba(255,255,255,.85); }
.nav--on-dark:not(.is-stuck) a.langsw__opt:hover { color: var(--navy); background: #fff; }
.nav--on-dark:not(.is-stuck) .langsw__opt.is-current { color: var(--navy); background: #fff; }
.nav--on-dark:not(.is-stuck) .langsw__opt.is-soon { color: rgba(255,255,255,.5); }

/* wariant w stopce (tło --forest) */
.langsw--foot { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); }
.langsw--foot .langsw__opt { color: rgba(255,255,255,.72); }
.langsw--foot a.langsw__opt:hover { color: var(--navy); background: #fff; }
.langsw--foot .langsw__opt.is-current { color: var(--forest); background: #fff; }
.langsw--foot .langsw__opt.is-soon { color: rgba(255,255,255,.42); }

/* wariant w nav: zwinięty - widać tylko bieżący język, pozostałe pionowo po kliknięciu (ui.js) */
.langsw--nav { position: relative; padding: 3px 6px 3px 3px; }
.langsw__toggle { display: inline-flex; align-items: center; gap: 4px; padding: 0; background: none; border-width: 0; cursor: pointer; color: inherit; }
.langsw__caret { color: var(--text-muted); transition: transform .25s var(--ease); }
.langsw--nav.is-open .langsw__caret { transform: rotate(180deg); }
.langsw__panel {
	position: absolute; top: calc(100% + 8px); right: 0; z-index: 5;
	display: flex; flex-direction: column; gap: 2px;
	min-width: 100%; padding: 6px;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow);
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.langsw--nav.is-open .langsw__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.langsw__panel .langsw__opt { text-align: center; }
/* Panel jest ZAWSZE biały, więc reguły „on-dark" (biały tekst) muszą się w nim cofnąć - inaczej białe na białym.
   Wyższa specyficzność (0,4,0 / 0,5,0) bije reguły on-dark wyżej niezależnie od kolejności w pliku. */
.nav--on-dark:not(.is-stuck) .langsw__panel .langsw__opt { color: var(--text-muted); }
.nav--on-dark:not(.is-stuck) .langsw__panel a.langsw__opt:hover { color: var(--navy); background: var(--pale); }
.nav--on-dark:not(.is-stuck) .langsw__panel .langsw__opt.is-soon { color: var(--steel); }
.nav--on-dark:not(.is-stuck) .langsw__caret { color: rgba(255,255,255,.85); }

@media (max-width: 480px) {
	.langsw { gap: 0; padding: 2px; }
	.langsw__opt { padding: 6px 7px; font-size: 0.68rem; }
}

/* ============================================================
   FIX mobile: nav ma na mobile wymuszone białe tło (≤1150px, reguła wyżej),
   więc elementy „on-dark" (białe) były niewidoczne na górze strony.
   Reset do ciemnych - dotyczy logo, burgera, linków menu i przełącznika.
   Próg MUSI być ten sam co próg białego tła nava, inaczej w paśmie różnicy
   robi się białe na białym.
   ============================================================ */
@media (max-width: 1150px) {
	.nav--on-dark:not(.is-stuck) .nav__logo img { filter: none; }
	.nav--on-dark:not(.is-stuck) .nav__burger span { background: var(--navy); }
	.nav--on-dark:not(.is-stuck) .nav__top { color: var(--text-strong); }
	.nav--on-dark:not(.is-stuck) .langsw { border-color: var(--line); background: rgba(255,255,255,.55); }
	.nav--on-dark:not(.is-stuck) .langsw__opt { color: var(--text-muted); }
	.nav--on-dark:not(.is-stuck) a.langsw__opt:hover { color: var(--navy); background: var(--pale); }
	.nav--on-dark:not(.is-stuck) .langsw__opt.is-current { color: #fff; background: var(--bright); }
	.nav--on-dark:not(.is-stuck) .langsw__opt.is-soon { color: var(--steel); }
	.nav--on-dark:not(.is-stuck) .langsw__caret { color: var(--text-muted); }
}

/* Realizacje - kredyt klienta (Major & Maker) w panelu flagowym (2026-06-16) */
.flagship__client { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 9px; margin-bottom: 22px; text-decoration: none; }
.flagship__client-label { font-family: var(--font-head); font-weight: 800; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.flagship__client-logo { height: 34px; width: auto; display: block; transition: opacity .2s ease, transform .2s ease; }
.flagship__client:hover .flagship__client-logo, .flagship__client:focus-visible .flagship__client-logo { opacity: .72; transform: translateY(-1px); }

/* Stopka - kontakt (mail/telefon) nie łamie się w wąskiej kolumnie (desktop) (2026-06-16) */
.foot__contact a { white-space: nowrap; overflow-wrap: normal; }

/* ============================================================
   AUDYT eMAG - rozbudowa landingu (2026-07-12)
   Nowe sekcje: „Co otrzymasz" (svc-card z ptaszkiem), podgląd
   raportu (audit-preview + kartki .audoc z paskami-redakcjami),
   „Audyt może ujawnić" (issues-list), „Dla kogo" (audience--single).
   ============================================================ */

/* Karty rezultatów - svc-card z ptaszkiem zamiast numeru */
.svc-card__tick { width: 34px; height: 34px; border-radius: 50%; background: rgba(34,178,116,0.14); position: relative; }
.svc-card__tick::before { content: ""; position: absolute; left: 10px; top: 11px; width: 13px; height: 7px; border: solid var(--bright); border-width: 0 0 2px 2px; transform: rotate(-45deg); }

/* Podgląd raportu - ciemna scena, po prawej kolaż „kartek" dokumentu.
   Treści wrażliwe symulują paski (.audoc__bar), nie prawdziwy tekst. */
.audit-preview__inner { display: grid; grid-template-columns: minmax(320px, 5fr) 7fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.audit-preview__text .sec-head { margin-bottom: 22px; }
.audit-preview__lead { color: rgba(255,255,255,0.85); font-size: var(--fs-lead); margin: 0 0 14px; }
.audit-preview__note { color: rgba(255,255,255,0.55); font-size: var(--fs-small); margin: 0 0 28px; }
.audit-preview__docs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 24px); align-items: start; }
.audit-preview__docs > :nth-child(even) { margin-top: 28px; }
.audoc { margin: 0; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 20px 22px; font-size: 0.82rem; line-height: 1.5; color: var(--ink); }
.audoc__h { font-family: var(--font-head); font-weight: 800; font-size: 0.82rem; color: var(--navy); border-left: 3px solid var(--lime); padding-left: 10px; margin-bottom: 12px; }
.audoc__exec { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 8px; }
.audoc__exec li { position: relative; background: var(--bg-alt); border-left: 2px solid var(--lime); border-radius: 8px; padding: 8px 10px 8px 26px; }
.audoc__exec li::before { content: ""; position: absolute; left: 11px; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
.audoc__bar { display: block; height: 9px; border-radius: 5px; background: rgba(23,32,35,0.08); margin: 8px 0 0; }
.audoc__bar--inline { display: inline-block; vertical-align: middle; width: 34%; margin: 0; }
.audoc__p { margin: 0 0 4px; }
.audoc__metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.audoc__metric { border: 1px solid; border-radius: 10px; padding: 10px 12px; }
.audoc__metric--bad { background: #F8E7E6; border-color: #B0413E; color: #7d2b29; }
.audoc__metric--good { background: #E7F6EF; border-color: #22B274; color: #0B4033; }
.audoc__val { display: block; font-family: var(--font-head); font-weight: 800; font-size: 1.25rem; line-height: 1.1; }
.audoc__lbl { display: block; font-size: 0.68rem; margin-top: 3px; opacity: 0.85; }
.audoc__links { margin-top: 14px; background: #F2F8F5; border: 1px solid #D6EBE0; border-radius: 8px; padding: 10px 12px; }
.audoc__links-h { font-family: var(--font-head); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bright); }
.audoc__links ul { margin: 6px 0 0; padding-left: 16px; }
.audoc__links li { color: var(--blue); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(22,71,115,0.35); margin: 3px 0; }
.audoc__prio { display: grid; grid-template-columns: minmax(120px, auto) 1fr; align-items: center; gap: 10px; margin: 10px 0 0; }
.audoc__prio .audoc__bar { margin: 0; }
.audoc__tag { justify-self: start; font-family: var(--font-head); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px; padding: 4px 10px; }
.audoc__tag--bad { background: #F8E7E6; color: #7d2b29; }
.audoc__tag--mid { background: var(--cream); color: var(--navy); }
.audoc__tag--low { background: rgba(121,144,180,0.16); color: var(--blue); }

/* Lista „Audyt może ujawnić" */
.issues-list { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; }
.issues-list li { position: relative; padding: 12px 16px 12px 44px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.issues-list li::before { content: "!"; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; background: rgba(176,65,62,0.12); color: #B0413E; font-family: var(--font-head); font-weight: 800; font-size: 0.7rem; line-height: 18px; text-align: center; }
.issues-note { max-width: 980px; margin: 22px auto 0; text-align: center; color: var(--text-muted); font-size: var(--fs-small); }

/* Audience w wariancie jednej kolumny („dla kogo" bez „nie dla kogo") */
.audience--single .audience__col { max-width: 920px; margin: 0 auto; }
.audience--single .audience__list { grid-template-columns: 1fr 1fr; column-gap: 34px; }

@media (max-width: 1024px) {
	.audit-preview__inner { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
	.issues-list { grid-template-columns: 1fr; }
	.audience--single .audience__list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.audit-preview__docs { grid-template-columns: 1fr; }
	.audit-preview__docs > :nth-child(even) { margin-top: 0; }
}

/* ============================================================
   DESC LEVELS - porównanie poziomów opisu produktu
   (strony „dodawanie produktów": translator / strukturalny / A+).
   Mockupy poziomów 01-02 symulują treść paskami (jak .audoc);
   karta z prawdziwym listingiem (.dlevel--aplus) jest wyróżniona.
   ============================================================ */
.dlevels__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 34px); align-items: stretch; }
.dlevel { position: relative; display: flex; flex-direction: column; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(20px, 2.4vw, 28px); }
.dlevel--aplus { background: #fff; border: 2px solid var(--lime); box-shadow: 0 18px 56px rgba(34, 178, 116, 0.16); }
.dlevel__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.dlevel__tag { font-family: var(--font-head); font-weight: 900; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-ink); }
.dlevel--aplus .dlevel__tag { color: var(--bright); }
.dlevel__badge { font-family: var(--font-head); font-weight: 700; font-size: 0.64rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--cream); color: var(--navy); }
.dlevel--aplus .dlevel__badge { background: var(--lime); color: var(--navy); }
.dlevel__badge--brand { background: var(--lime); color: var(--navy); }
.dlevel__title { font-size: 1.22rem; color: var(--navy); margin: 0 0 8px; }
.dlevel__desc { color: var(--text); font-size: 0.95rem; line-height: 1.6; margin: 0 0 18px; }
.dlevel__device { max-width: none; margin: 0; }
.dlevel .device__screen { height: clamp(280px, 36vh, 360px); }
.dlevel__screen--mock { overflow: hidden; }
.dlevel__points { list-style: none; margin: 18px 0 16px; padding: 0; display: grid; gap: 9px; }
.dlevel__points li { position: relative; padding-left: 22px; font-size: 0.92rem; line-height: 1.5; color: var(--text); }
.dlevel__points li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
.dlevel__verdict { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-family: var(--font-head); font-weight: 700; font-size: 0.9rem; color: var(--navy); }
.dlevel:nth-child(-n+2)::after { content: "\2192"; position: absolute; top: 46%; right: calc(clamp(20px, 2.6vw, 34px) / -2); transform: translate(50%, -50%); font-family: var(--font-head); font-weight: 900; font-size: 1.9rem; line-height: 1; color: var(--green); z-index: 2; }
.dlevels__cta { text-align: center; margin-top: clamp(28px, 4vw, 44px); }

/* mockupy treści - dekoracja, paski zamiast tekstu */
.dmock { padding: 18px 16px; display: grid; gap: 8px; align-content: start; }
.dmock__bar { display: block; height: 9px; border-radius: 5px; background: rgba(23, 32, 35, 0.09); }
.dmock__bar--head { height: 13px; width: 68%; background: rgba(11, 43, 64, 0.22); margin-bottom: 6px; }
.dmock__bar--w97 { width: 97%; }
.dmock__bar--w95 { width: 95%; }
.dmock__bar--w92 { width: 92%; }
.dmock__bar--w90 { width: 90%; }
.dmock__bar--w88 { width: 88%; }
.dmock__bar--w85 { width: 85%; }
.dmock__bar--w70 { width: 70%; }
.dmock__bar--w55 { width: 55%; }
.dmock__bar--cap { width: 46%; justify-self: center; background: rgba(11, 43, 64, 0.16); margin: 2px 0 6px; }
.dmock__flag { justify-self: start; font-family: var(--font-head); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; color: #7d2b29; background: #F8E7E6; border-radius: 999px; padding: 4px 10px; margin: 4px 0; }
.dmock__flag::before { content: "⚠ "; }
.dmock__img { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 10px; background: linear-gradient(135deg, #E9EFF5, #DCE7F0); margin: 4px 0 2px; }
.dmock__img::before { content: ""; width: 34px; height: 34px; opacity: 0.55; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237990B4' stroke-width='1.6'><rect x='3' y='4' width='18' height='16' rx='2'/><circle cx='9' cy='10' r='2'/><path d='M3 17l5-5 4 4 3-3 6 6'/></svg>") center/contain no-repeat; }

@media (max-width: 1020px) {
	.dlevels__grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
	.dlevel:nth-child(-n+2)::after { content: none; }
}

/* ---- Anatomia oferty: kryteria jakości karty (spec-sheet — 2 kolumny, hairline, znacznik lime) ---- */
.anatomy__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 5vw, 60px); max-width: 980px; margin: clamp(30px, 4vw, 48px) auto 0; }
.anatomy__item { padding: clamp(20px, 2.4vw, 26px) 0; border-top: 1px solid var(--line); }
.anatomy__title { position: relative; font-size: 1.12rem; color: var(--navy); margin: 0 0 7px; padding-left: 22px; }
.anatomy__title::before { content: ""; position: absolute; left: 0; top: 0.52em; width: 9px; height: 9px; border-radius: 2px; background: linear-gradient(135deg, var(--lime), var(--green)); }
.anatomy__desc { margin: 0; padding-left: 22px; color: var(--text-muted); font-size: 0.96rem; line-height: 1.6; }
@media (max-width: 760px) { .anatomy__grid { grid-template-columns: 1fr; } }

/* ---- „Po publikacji": żywy katalog — sygnały zmian (pulsujący znacznik) + panel-puenta ---- */
.maint__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.maint__signal { display: flex; align-items: flex-start; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); }
.maint__signal:hover { border-color: rgba(34,178,116,.35); box-shadow: var(--shadow); transform: translateY(-3px); }
.maint__pulse { flex: none; position: relative; width: 11px; height: 11px; margin-top: 6px; border-radius: 50%; background: var(--lime); }
.maint__pulse::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--lime); animation: maintPulse 2.6s var(--ease) infinite; }
.maint__signal:nth-child(3n+2) .maint__pulse::before { animation-delay: .85s; }
.maint__signal:nth-child(3n) .maint__pulse::before { animation-delay: 1.6s; }
.maint__text { color: var(--text); line-height: 1.5; }
@keyframes maintPulse { 0% { transform: scale(.6); opacity: .7; } 70% { transform: scale(2.4); opacity: 0; } 100% { transform: scale(2.4); opacity: 0; } }
.maint__statement { max-width: 900px; margin: clamp(28px, 4vw, 46px) auto 0; text-align: center; background: linear-gradient(180deg, rgba(34,178,116,.06), rgba(34,178,116,.02)); border: 1px solid rgba(34,178,116,.22); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 44px); }
.maint__statement-label { display: inline-block; font-family: var(--font-head); font-weight: 800; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--lime); margin-bottom: 12px; }
.maint__statement-text { margin: 0; font-size: var(--fs-lead); line-height: 1.65; color: var(--text-strong); }
@media (max-width: 900px) { .maint__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .maint__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .maint__pulse::before { animation: none; opacity: .45; transform: scale(1.4); } }

/* ============================================================
   AUDYT TRENDYOL - komponenty sygnaturowe
   (Ścieżka utraconej sprzedaży, Karta Kondycji Konta, Macierz rekomendacji)
   ============================================================ */

/* ---- Ścieżka utraconej sprzedaży: numerowane etapy ze spiną ---- */
.lostpath__steps { list-style: none; margin: clamp(30px, 4vw, 46px) auto 0; padding: 0; max-width: 860px; }
.lostpath__step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: clamp(16px, 2.4vw, 26px); align-items: start; padding-bottom: clamp(20px, 3vw, 30px); }
.lostpath__step:last-child { padding-bottom: 0; }
.lostpath__step::before { content: ""; position: absolute; left: 27px; top: 56px; bottom: 0; width: 2px; background: var(--line); z-index: 0; }
.lostpath__step:last-child::before { display: none; }
.lostpath__no { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font-family: var(--font-head); font-weight: 900; font-size: 1.15rem; box-shadow: 0 8px 22px rgba(11,43,64,.18); }
.lostpath__body { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 26px); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.lostpath__step:hover .lostpath__body { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(11,64,51,.22); }
.lostpath__title { font-size: 1.14rem; color: var(--navy); margin: 0 0 6px; }
.lostpath__desc { color: var(--text-muted); font-size: .96rem; line-height: 1.6; margin: 0; }
.lostpath__note { max-width: 860px; margin: clamp(24px, 3.4vw, 38px) auto 0; }
.lostpath__note p { color: var(--text-muted); font-size: var(--fs-small); line-height: 1.65; }
.lostpath__note p + p { margin-top: 12px; }
@media (max-width: 520px) {
	.lostpath__step { grid-template-columns: 46px 1fr; }
	.lostpath__step::before { left: 22px; top: 46px; }
	.lostpath__no { width: 46px; height: 46px; font-size: 1rem; }
}

/* ---- Karta Kondycji Konta: scorecard (5 obszarów, neutralna skala) ---- */
.healthcard { max-width: 860px; margin: clamp(30px, 4vw, 46px) auto 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.healthcard__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(16px, 2vw, 20px) clamp(20px, 2.6vw, 30px); background: var(--navy); color: #fff; }
.healthcard__brand { font-family: var(--font-head); font-weight: 900; letter-spacing: .1em; font-size: .95rem; }
.healthcard__label { font-size: .78rem; color: rgba(255,255,255,.68); text-align: right; }
.healthcard__rows { list-style: none; margin: 0; padding: 0; }
.healthcard__row { display: grid; grid-template-columns: minmax(120px, 150px) 1fr auto; align-items: center; gap: clamp(14px, 2.4vw, 28px); padding: clamp(14px, 1.9vw, 18px) clamp(20px, 2.6vw, 30px); border-top: 1px solid var(--line); }
.healthcard__row:first-child { border-top: none; }
.healthcard__area { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: 1rem; }
.healthcard__what { color: var(--text-muted); font-size: .92rem; line-height: 1.5; }
.healthcard__scale { display: inline-flex; gap: 5px; justify-self: end; }
.healthcard__scale i { width: 16px; height: 8px; border-radius: 3px; background: rgba(11,64,51,.13); }
.healthcard__scale i:first-child { background: rgba(34,178,116,.55); }
.healthcard__scale i:nth-child(2) { background: rgba(34,178,116,.32); }
.healthcard__note { margin: 0; padding: clamp(14px, 1.9vw, 18px) clamp(20px, 2.6vw, 30px); border-top: 1px solid var(--line); background: var(--bg-alt); color: var(--text-muted); font-size: var(--fs-small); }
@media (max-width: 600px) {
	.healthcard__row { grid-template-columns: 1fr auto; grid-template-areas: "area scale" "what what"; row-gap: 6px; }
	.healthcard__area { grid-area: area; }
	.healthcard__scale { grid-area: scale; }
	.healthcard__what { grid-area: what; }
}

/* ---- Macierz rekomendacji: legenda wymiarów + tabela przykładu ---- */
.recomatrix__dims { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 18px); max-width: 1000px; margin: clamp(28px, 4vw, 42px) auto 0; }
.recomatrix__dim { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--green); border-radius: var(--radius); padding: clamp(14px, 1.8vw, 18px); }
.recomatrix__dim-name { display: block; font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: .95rem; }
.recomatrix__dim-scale { display: block; margin-top: 6px; color: var(--text-muted); font-size: .82rem; line-height: 1.5; }
.recomatrix__tablewrap { max-width: 1000px; margin: clamp(22px, 3vw, 32px) auto 0; overflow-x: auto; }
.recomatrix__table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: .95rem; }
.recomatrix__table th { text-align: left; font-family: var(--font-head); font-weight: 800; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--navy); padding: 12px 16px; white-space: nowrap; }
.recomatrix__table td { padding: 13px 16px; border-top: 1px solid var(--line); color: var(--text); }
.recomatrix__table tbody tr:nth-child(even) td { background: var(--bg-alt); }
.recomatrix__table td:first-child { font-weight: 700; color: var(--navy); }
.recomatrix__prio { display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: .72rem; letter-spacing: .02em; text-transform: uppercase; border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.recomatrix__prio--bad { background: #F8E7E6; color: #7d2b29; }
.recomatrix__prio--mid { background: var(--cream); color: var(--navy); }
.recomatrix__prio--low { background: rgba(121,144,180,0.16); color: var(--blue); }
.recomatrix__note { max-width: 1000px; margin: clamp(18px, 2.4vw, 26px) auto 0; text-align: center; color: var(--text-muted); font-size: var(--fs-small); }
@media (max-width: 820px) { .recomatrix__dims { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
	.recomatrix__dims { grid-template-columns: 1fr; }
	.recomatrix__table { border: none; }
	.recomatrix__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.recomatrix__table tbody, .recomatrix__table tr, .recomatrix__table td { display: block; width: 100%; }
	.recomatrix__table tr { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; }
	.recomatrix__table td { border: none; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 16px; }
	.recomatrix__table td::before { content: attr(data-th); font-family: var(--font-head); font-weight: 800; color: var(--text-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; }
	/* tbody tr td:first-child (0,2,3) wygrywa nad regula even-row (0,2,3) dzieki pozniejszej pozycji -
	   inaczej even-row nadpisywalo granatowe tlo i zostawal bialy tekst na jasnym (kontrast 1.07). */
	.recomatrix__table tbody tr td:first-child { background: var(--navy); color: #fff; border-top: none; padding: 12px 16px; }
	.recomatrix__table td:first-child::before { display: none; }
}

/* ---- kalkulator rentownosci eMAG (.emc): shortcode [harta_emag_kalkulator] ---- */
.emc { --emc-line: var(--line); --emc-accent: var(--green-ink); font-family: var(--font-body); color: var(--text); margin: 32px 0; }
.emc *, .emc *::before, .emc *::after { box-sizing: border-box; }
.emc--simple { max-width: 680px; margin-left: auto; margin-right: auto; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(18px, 4vw, 28px); }
.emc__eyebrow { display: block; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; font-weight: 700; color: var(--green-ink); margin: 0 0 8px; }
.emc__title { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: clamp(1.25rem, 3.4vw, 1.55rem); line-height: 1.15; margin: 0 0 8px; }
.emc__intro { color: var(--text-muted); font-size: .95rem; margin: 0 0 20px; max-width: 64ch; }
.emc--full { margin-top: 24px; }
.emc__intro--seo { text-align: center; max-width: 74ch; margin: 0 auto 24px; }
.emc__hint { color: var(--text-muted); font-size: .85rem; margin: 0 0 18px; }

.emc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.emc__field { display: flex; flex-direction: column; gap: 5px; }
.emc__field--full { grid-column: 1 / -1; }
.emc__field label { font-family: var(--font-head); font-weight: 600; font-size: .88rem; color: var(--navy); }
.emc__ig { position: relative; display: flex; align-items: center; }
.emc__ig input, .emc__ig select { width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--navy); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; font-variant-numeric: tabular-nums; transition: border-color .15s, box-shadow .15s; }
.emc__ig input { padding-right: 40px; }
.emc__u { position: absolute; right: 11px; color: var(--text-muted); font-size: .86rem; font-weight: 600; pointer-events: none; }
.emc__ig input:focus, .emc__ig select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(59, 140, 110, .22); }
.emc__desc { font-size: .76rem; color: var(--text-muted); line-height: 1.4; }

.emc__seg { display: flex; gap: 5px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.emc__seg button { flex: 1; border: none; background: transparent; font-family: var(--font-head); font-weight: 600; font-size: .82rem; color: var(--text-muted); padding: 10px 8px; border-radius: 999px; cursor: pointer; transition: all .15s; }
.emc__seg button:hover { color: var(--navy); }
.emc__seg button.is-active { background: var(--white); color: var(--navy); box-shadow: var(--shadow-sm, 0 6px 18px rgba(11,43,64,.10)); }
.emc__seg button:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }

/* wynik - wersja prosta (pasek) */
.emc__out { margin-top: 20px; background: var(--navy); border-radius: var(--radius-sm); color: rgba(255,255,255,.94); padding: 18px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.emc__out-lbl { display: block; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .1em; font-size: .66rem; color: rgba(218,238,255,.62); font-weight: 700; margin-bottom: 3px; }
.emc__big { display: block; font-family: var(--font-head); font-weight: 800; font-size: clamp(1.7rem, 6vw, 2.3rem); line-height: 1; font-variant-numeric: tabular-nums; color: var(--lime); }
.emc__out.is-warn .emc__big { color: #ffcf7a; }
.emc__out.is-bad .emc__big, .emc__head.is-bad .emc__big { color: #ff9a8f; }
.emc__head.is-warn .emc__big { color: #ffcf7a; }
.emc__pct { display: block; font-family: var(--font-head); font-weight: 700; font-size: .96rem; margin-top: 4px; }
.emc__be { font-size: .82rem; color: rgba(218,238,255,.62); text-align: right; min-width: 150px; }
.emc__be b { display: block; color: #fff; font-family: var(--font-head); font-size: .95rem; }

.emc__verdict { display: flex; gap: 8px; align-items: flex-start; font-size: .86rem; line-height: 1.45; margin: 12px 0 0; color: var(--text-muted); }
.emc--simple .emc__verdict { margin-top: 20px; }
.emc__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; margin-top: 6px; background: var(--green); }
.emc__verdict.is-warn .emc__dot { background: #c98a1f; }
.emc__verdict.is-bad .emc__dot { background: #c2483c; }

.emc__foot { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line-soft, rgba(11,43,64,.07)); font-size: .85rem; color: var(--text-muted); line-height: 1.5; }
.emc__foot p { margin: 0 0 6px; }
.emc__foot a { color: var(--green-ink); font-weight: 700; text-decoration: none; border-bottom: 1.5px solid rgba(52,125,98,.4); }
.emc__foot a:hover { border-bottom-color: var(--green-ink); }

/* wersja pelna - dwie kolumny */
.emc__cols { display: grid; grid-template-columns: 1.15fr .85fr; gap: 22px; align-items: stretch; }
.emc__inputs { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm, 0 6px 18px rgba(11,43,64,.07)); padding: clamp(18px, 2.5vw, 26px); }
.emc__result { display: flex; flex-direction: column; background: var(--navy); border-radius: var(--radius); color: rgba(255,255,255,.94); padding: clamp(20px, 2.5vw, 28px); box-shadow: var(--shadow); }
.emc__result-h { display: block; font-family: var(--font-head); font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(218,238,255,.62); font-weight: 700; margin-bottom: 16px; }
.emc__rrow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.14); font-size: .95rem; color: rgba(218,238,255,.62); }
.emc__rrow b { font-family: var(--font-head); font-weight: 600; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.94); }
.emc__rrow--sub { font-size: .86rem; }
.emc__rrow--sub b { font-weight: 500; color: rgba(218,238,255,.62); }
.emc__head { display: block; margin: 20px 0 6px; padding: 16px; border-radius: var(--radius-sm); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); text-align: center; }
.emc__head-lbl { display: block; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; color: rgba(218,238,255,.62); font-weight: 700; }
.emc__head .emc__big { margin: 6px 0 2px; }
.emc__head .emc__pct { color: #fff; }
.emc__pln { display: block; font-size: .86rem; color: rgba(218,238,255,.62); margin-top: 4px; }
.emc__verdict--panel { padding: 11px 13px; border-radius: var(--radius-sm); color: #bff3d8; background: rgba(63,208,138,.14); }
.emc__verdict--panel.is-warn { background: rgba(224,169,74,.16); color: #ffdca6; }
.emc__verdict--panel.is-bad { background: rgba(255,120,108,.16); color: #ffc3bc; }
.emc__verdict--panel.is-warn .emc__dot { background: #e0a94a; }
.emc__verdict--panel.is-bad .emc__dot { background: #ff786c; }
.emc__verdict--panel .emc__dot { background: #3fd08a; }
.emc__beline { display: block; margin-top: auto; padding-top: 16px; font-size: .9rem; color: rgba(218,238,255,.62); text-align: center; }
.emc__beline b { color: #fff; font-family: var(--font-head); }

.emcalc-kalkulacja { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; line-height: 1.5; white-space: pre; }

@media (max-width: 820px) { .emc__cols { grid-template-columns: 1fr; } .emc__result { position: static; } }
@media (max-width: 520px) { .emc__grid { grid-template-columns: 1fr; } .emc__seg button { font-size: .76rem; padding: 9px 4px; } }
/* ---- /kalkulator eMAG ---- */

.emc-hidden { display: none !important; }

/* ---- home: sekcja prowadzaca do kalkulatora (.calc-home) ---- */
.calc-home__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.calc-home__title { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: var(--fs-h2); line-height: 1.12; margin: 10px 0 14px; text-wrap: balance; }
.calc-home__lead { color: var(--text-muted); font-size: var(--fs-lead); line-height: 1.6; margin: 0 0 26px; max-width: 46ch; }
.calc-home__card { background: var(--navy); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 34px); color: #fff; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
.calc-home__card-lbl { font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.68rem; color: rgba(218,238,255,.6); font-weight: 700; }
.calc-home__card-big { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.4rem, 6vw, 3.4rem); line-height: 1; color: var(--lime); font-variant-numeric: tabular-nums; margin-top: 6px; }
.calc-home__card-sub { font-family: var(--font-head); font-weight: 600; font-size: 0.95rem; color: #fff; margin: 2px 0 16px; }
.calc-home__card-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.14); font-size: 0.92rem; color: rgba(218,238,255,.6); }
.calc-home__card-row b { font-family: var(--font-head); font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
@media (max-width: 820px) { .calc-home__inner { grid-template-columns: 1fr; } .calc-home__card { order: -1; } }

/* ---- nav: wyroznienie pozycji w dropdownie (np. Kalkulator) ---- */
.nav__drop--hot { color: var(--green-ink); font-weight: 700; }
.nav__badge { display: inline-block; margin-left: 6px; font-family: var(--font-head); font-weight: 700; font-size: 0.58rem; letter-spacing: 0.05em; text-transform: uppercase; color: #06231a; background: var(--lime); border-radius: 999px; padding: 2px 7px; vertical-align: middle; line-height: 1.4; }

/* ---- /emag/analiza-rynku-emag/ - karty pelnych przykladowych analiz (2026-08-05) ---- */
.demo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 24px); }
.demo-card { position: relative; display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 2.2vw, 28px); color: inherit; text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.demo-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(11,64,51,.25); }
.demo-card__lang { align-self: flex-start; font-family: var(--font-head); font-weight: 700; font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: #06231a; background: var(--lime); border-radius: 999px; padding: 3px 9px; line-height: 1.4; }
.demo-card__name { font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; color: var(--navy); }
.demo-card__go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-family: var(--font-head); font-weight: 800; font-size: .85rem; color: var(--bright); }
.demo-card__go .arrow { transition: transform .25s var(--ease); }
.demo-card:hover .demo-card__go .arrow { transform: translateX(4px); }
.demos__note { margin: clamp(18px, 2vw, 26px) 0 0; text-align: center; color: var(--text-muted); font-size: .9rem; }
@media (max-width: 700px) { .demo-grid { grid-template-columns: 1fr; } }
/* ---- selecty CF7 (formularz zamowienia analizy w trybie mailowym ma [select]) ---- */
.cf7-wrap select.wpcf7-select { width: 100%; margin-top: 6px; padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; font-size: .95rem; background: var(--bg-alt); color: var(--text); }
.cf7-wrap select.wpcf7-select:focus { outline: none; border-color: var(--bright); box-shadow: 0 0 0 3px rgba(11,64,51,.15); background: #fff; }
/* ---- checkout zamowienia analizy (tryb Stripe) - wlasny uklad .ordersec zamiast klas CF7:
   pasek krokow + siatka dane|zakres + karta podsumowania .ordersum z cena brutto ---- */
.ordersec__steps { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; list-style: none; counter-reset: ostep; margin: 0 0 22px; padding: 0 0 16px; border-bottom: 1px solid var(--line); }
.ordersec__steps li { counter-increment: ostep; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 700; font-size: .78rem; color: var(--text-muted); }
.ordersec__steps li::before { content: counter(ostep); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-alt); border: 1px solid var(--line); font-size: .72rem; }
.ordersec__steps li:not(:last-child)::after { content: ""; display: inline-block; width: 16px; height: 2px; border-radius: 1px; background: var(--line); }
.ordersec__steps li[aria-current] { color: var(--green-ink); }
.ordersec__steps li[aria-current]::before { background: var(--lime); border-color: var(--lime); color: #06231a; font-weight: 800; }
.ordersec__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 30px); align-items: start; }
.ordersec__field { display: block; font-family: var(--font-head); font-weight: 700; font-size: .82rem; color: var(--text-strong); margin: 0 0 12px; }
.ordersec__ctl { display: block; margin-top: 6px; font-weight: 400; }
.ordersec input:not([type="checkbox"]), .ordersec select, .ordersec textarea {
	width: 100%; padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
	font: inherit; font-size: .95rem; background: var(--bg-alt); color: var(--text);
	transition: border-color .2s, box-shadow .2s, background .2s;
}
.ordersec textarea { resize: vertical; min-height: 96px; }
.ordersec input:not([type="checkbox"]):focus, .ordersec select:focus, .ordersec textarea:focus {
	outline: none; border-color: var(--bright); box-shadow: 0 0 0 3px rgba(11,64,51,.15); background: #fff;
}
.ordersec ::placeholder { color: var(--text-muted); opacity: .85; }
.ordersum { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px 14px; margin: 4px 0; }
.ordersum__title { font-family: var(--font-head); font-weight: 800; font-size: .95rem; color: var(--navy); margin: 0 0 4px; }
.ordersum__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: .88rem; color: var(--text-muted); }
.ordersum__row[hidden] { display: none; } /* display:flex wygrywa z UA [hidden] - bez tego wiersze GRATIS/netto/VAT nie znikaja */
.ordersum__row strong { font-family: var(--font-head); font-weight: 700; color: var(--text-strong); text-align: right; }
.ordersum__row--price strong { font-size: 1.3rem; font-weight: 800; color: var(--green-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ordersum__note { margin: 8px 0 0; font-size: .78rem; color: var(--text-muted); }
.ordersum__quote { margin: 8px 0 0; font-size: .85rem; font-weight: 600; color: var(--green-ink); }
.ordersec .ho-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.ordersec .ho-consent { display: flex; gap: 9px; align-items: flex-start; font-size: .8rem; color: var(--text-muted); font-weight: 400; margin: 12px 0 0; }
.ordersec .ho-consent input { margin-top: 3px; flex: 0 0 auto; }
.ordersec .cf-turnstile { margin-top: 14px; }
/* ---------- RAPORT ZBIORCZY (gratis przy kilku kategoriach) ---------- */
/* min-width:0 na obu kolumnach: bez tego element siatki ma min-width:auto i szeroka
   tabela rozpycha sekcje poza ekran (na mobile wychodzila szersza od reszty strony). */
.bundle__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.bundle__text, .bundle__doc { min-width: 0; }
.bundle__points { list-style: none; margin: 22px 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bundle__points li { position: relative; padding-left: 30px; font-size: .95rem; }
.bundle__points li::before { content: "✓"; position: absolute; left: 0; top: -1px; color: var(--green); font-weight: 800; }
.bundle__note { margin: 0 0 20px; font-size: .88rem; color: var(--text-muted); }
.bundle__doc { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(18px, 2.2vw, 26px); box-shadow: var(--shadow-md, 0 10px 30px rgba(11,43,64,.07)); }
.bundle__doc-h { font-family: var(--font-head); font-weight: 800; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); margin: 0 0 14px; }
.bundle__scroll { overflow-x: auto; }
.bundle__table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.bundle__table th { text-align: left; font-family: var(--font-head); font-weight: 700; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); padding: 0 10px 8px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.bundle__table td { padding: 11px 10px 11px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.bundle__table tr:last-child td { border-bottom: 0; }
.bundle__verdict { display: inline-block; font-family: var(--font-head); font-weight: 800; font-size: .66rem; letter-spacing: .06em; padding: 4px 9px; border-radius: 100px; white-space: nowrap; }
/* Kontrast policzony, nie zgadniety: 5,8 / 5,3 / 5,1 - wszystkie ponad AA dla malego bold. */
.bundle__verdict--yes { background: #e3f5ec; color: #1d6a4c; }
.bundle__verdict--test { background: #fdf1dc; color: #8a5a12; }
.bundle__verdict--no { background: #eceff1; color: #5a6670; }
.bundle__doc-note { margin: 14px 0 0; font-size: .74rem; color: var(--text-muted); }
@media (max-width: 900px) {
	.bundle__inner { grid-template-columns: 1fr; }
	.bundle__doc { padding: 16px 14px; }
	.bundle__table { font-size: .78rem; }
	.bundle__table th, .bundle__table td { padding-right: 8px; }
	.bundle__verdict { white-space: normal; }
}

/* Pozycje zamowienia (kategoria + wlasny zakres, powtarzalne). */
.u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.orditems { margin: 0 0 12px; }
.orditems__h { font-family: var(--font-head); font-weight: 800; font-size: .95rem; color: var(--navy); margin: 0 0 4px; }
.orditems__lead { margin: 0 0 14px; font-size: .82rem; color: var(--text-muted); }
.orditem { position: relative; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 4px; margin: 0 0 12px; min-inline-size: 0; }
.orditem__lgd { font-family: var(--font-head); font-weight: 800; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); padding: 0 6px; margin-inline-start: -6px; }
.orditem__del { position: absolute; top: 10px; right: 10px; background: none; border: 0; padding: 4px 6px; font-family: var(--font-head); font-weight: 700; font-size: .74rem; color: var(--text-muted); cursor: pointer; border-radius: 6px; }
.orditem__del:hover:not(:disabled) { color: #b32d2e; background: rgba(179,45,46,.07); }
.orditem__del:disabled { opacity: .35; cursor: default; }
.orditem__del:focus-visible, .orditem__add:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.orditems__add { margin: 0 0 10px; }
.orditem__add { background: none; border: 1px dashed var(--line); border-radius: var(--radius); padding: 9px 16px; width: 100%; font-family: var(--font-head); font-weight: 700; font-size: .84rem; color: var(--green-ink); cursor: pointer; }
.orditem__add:hover:not(:disabled) { border-color: var(--green); background: rgba(59,140,110,.05); }
.orditem__add:disabled { opacity: .45; cursor: default; }
.orditems__note { margin: 0 0 12px; font-size: .78rem; color: var(--text-muted); }
.ordersum__row--item span { overflow-wrap: anywhere; }
.ordersum__row--free strong { color: var(--green-ink); font-size: .92rem; letter-spacing: .04em; }
.ordersum__note--free { color: var(--green-ink); }
.ordersec__bill { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px 2px; margin: 0 0 12px; min-inline-size: 0; }
.ordersec__billrow { display: grid; grid-template-columns: 1fr 1.6fr; gap: 12px; }
.ordersec__billnote { margin: 2px 0 10px; font-size: .76rem; color: var(--text-muted); }
@media (max-width: 560px) { .ordersec__billrow { grid-template-columns: 1fr; gap: 0; } }
.ordersec__vat { display: flex; gap: 8px; }
.ordersec__vat select { flex: 0 0 auto; width: auto; min-width: 76px; }
.ordersec__vat input { flex: 1; min-width: 0; }
.ordersec .submit-wrapper { margin: 14px 0 0; }
.ordersec__paybadge { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 10px 0 0; font-size: .78rem; color: var(--text-muted); }
.ordersec__paybadge svg { height: 17px; width: auto; display: block; flex: 0 0 auto; }
.ordersec__submit {
	width: 100%; padding: 15px 22px; border: 0; border-radius: var(--radius-sm);
	background: var(--bright); color: #fff; font-family: var(--font-head); font-weight: 800;
	font-size: .98rem; cursor: pointer; transition: background .2s;
}
.ordersec__submit:hover { background: var(--green); }
.ordersec__submit:focus { outline: none; box-shadow: 0 0 0 3px rgba(11,64,51,.25); }
.ordersec__submit:disabled { opacity: .65; cursor: wait; }
.ordersec .ho-msg { margin: 14px 0 0; padding: 12px 15px; border-radius: var(--radius-sm); font-size: .85rem; line-height: 1.5; }
.ordersec .ho-msg--ok { background: #e7f6ef; color: #14532d; border: 1px solid #22B274; }
.ordersec .ho-msg--err { background: #f8e7e6; color: #7f1d1d; border: 1px solid #B0413E; }
@media (max-width: 860px) { .ordersec__grid { grid-template-columns: 1fr; } }
/* ---- strona sukcesu zamowienia (/zamowienie/sukces/) ---- */
.osucc { max-width: 620px; margin: 0 auto; }
.osucc .ordersum { margin: 0 0 34px; }
.osucc__note { margin: 8px 0 0; font-size: .9rem; color: var(--text-muted); text-align: center; }
.osucc__ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 22px; }

.order-banner { margin: 0 0 18px; padding: 12px 16px; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 600; }
.order-banner--ok { background: #e7f6ef; color: #14532d; }
.order-banner--warn { background: #fff4e5; color: #7c2d12; }

/* --- Widget embed kalkulatora: sekcja "Wstaw kalkulator u siebie" (below-fold, wariant mini pod formularzem) --- */
.embwrap--mini { padding-block: 40px 48px; }
.embwrap__box { max-width: 720px; }
.embwrap__title { margin: 8px 0 4px; font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; color: var(--text-strong); }
.embwrap__text { margin: 0 0 14px; font-size: .95rem; color: var(--text); max-width: 62ch; }
.embwrap__code { display: block; width: 100%; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; resize: vertical; }
.embwrap__code:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.embwrap__btn { margin-top: 10px; padding: 9px 20px; border: 0; border-radius: var(--radius-sm); background: var(--navy); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .9rem; cursor: pointer; }
.embwrap__btn:hover { background: var(--green-ink); }
.embwrap__btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* ---- slownik: hub jako lista definicyjna + strona hasla (2 kolumny, below-fold) ---- */
.gloss-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.gloss-jump__chip { display: inline-block; padding: 8px 18px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-head); font-weight: 700; font-size: .88rem; color: var(--text-strong); text-decoration: none; background: var(--white); transition: border-color .15s, color .15s; }
.gloss-jump__chip:hover { border-color: var(--green-ink); color: var(--green-ink); }
.gloss-list { border-top: 1px solid var(--line); }
.gloss-row { display: grid; grid-template-columns: 230px minmax(0, 1fr) auto; gap: 6px 32px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.gloss-row__name { font-family: var(--font-head); font-weight: 800; font-size: 1.02rem; line-height: 1.35; color: var(--text-strong); transition: color .15s; }
.gloss-row__desc { font-size: .95rem; line-height: 1.55; color: var(--text); }
.gloss-row__arrow { color: var(--green-ink); align-self: center; transition: transform .15s; }
.gloss-row:hover .gloss-row__name { color: var(--green-ink); }
.gloss-row:hover .gloss-row__arrow { transform: translateX(4px); }
.term-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(36px, 5vw, 72px); align-items: start; }
.term-aside { position: sticky; top: 96px; display: grid; gap: 20px; }
.term-aside__box { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); padding: 22px 24px; }
.term-aside__box--cta { background: var(--bg-alt); }
.term-aside__h { margin: 0 0 12px; font-family: var(--font-head); font-weight: 800; font-size: .98rem; color: var(--text-strong); }
.term-aside__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.term-aside__list a { color: var(--text); text-decoration: none; font-size: .95rem; }
.term-aside__list a:hover { color: var(--green-ink); text-decoration: underline; }
.term-aside__box--cta p { margin: 0 0 14px; font-size: .92rem; color: var(--text); }
.term-why { margin-top: 38px; }
.term-why .eyebrow { margin-bottom: 8px; }
.term-faq { margin-top: 44px; }
.term-h { margin: 0 0 14px; font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; color: var(--text-strong); }
.term-back { margin: 34px 0 0; font-size: .95rem; }
.term-back a { color: var(--green-ink); text-decoration: none; font-weight: 700; }
.term-back a:hover { text-decoration: underline; }
@media (max-width: 960px) {
	.term-cols { grid-template-columns: minmax(0, 1fr); }
	.term-aside { position: static; }
	.gloss-row { grid-template-columns: 190px minmax(0, 1fr) auto; }
}
@media (max-width: 700px) {
	.gloss-row { grid-template-columns: minmax(0, 1fr) auto; }
	.gloss-row__desc { grid-column: 1 / -1; }
}

/* ---- rfig: figura danych kategorii (klaster danych rynkowych) ----------------
   Sekcja PONIZEJ pierwszego ekranu - critical.css nietkniety.
   Kolory POLICZONE (WCAG), nie dobrane na oko:
   - wypelnienie danych = --green-ink #2f7357: 5,28 na tle --bg-alt, 4,55 wobec sciezki
   - --lime NIE nadaje sie na dane: 2,73 na bialym i 2,12 wobec sciezki (prog 3,0) -
     zostaje akcentem dekoracyjnym (podkreslenia naglowkow), nie nosi liczb
   - znacznik mediany BIALY: 5,66 na wypelnieniu (navy dalby tylko 2,59)
   - etykiety w navy, nie w --text-muted (4,30 na --bg-alt = FAIL malego tekstu)
   Bez JS i bez tooltipow: kazda wartosc ma widoczna etykiete, a pelne liczby stoja
   w tabeli nad figura - tooltip nie mialby czego dodac. */
.rfig { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(20px, 2.6vw, 34px); margin: clamp(22px, 2.8vw, 32px) 0 0; }
.rfig__panel { margin: 0; min-width: 0; }
.rfig__cap { font-family: var(--font-head); font-weight: 800; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--navy); margin: 0 0 14px; }
.rfig__track { position: relative; display: block; height: 12px; border-radius: 99px; background: var(--line); }
.rfig__fill { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: var(--green-ink, #2f7357); }
.rfig__med { position: absolute; top: -3px; bottom: -3px; width: 3px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(11,43,64,.28); }
.rfig__ends { display: flex; justify-content: space-between; gap: 10px; margin: 9px 0 0; font-size: .78rem; color: var(--navy); font-variant-numeric: tabular-nums; }
.rfig__val { margin: 10px 0 0; font-family: var(--font-head); font-weight: 800; font-size: 1.02rem; color: var(--navy); font-variant-numeric: tabular-nums; }
.rfig__note { margin: 4px 0 0; font-size: .78rem; color: var(--navy); opacity: .72; }
.rfig__rows { list-style: none; margin: 0; padding: 0; }
.rfig__row { display: grid; grid-template-columns: minmax(84px, auto) 1fr auto; align-items: center; gap: 10px; margin: 0 0 10px; }
.rfig__row:last-child { margin-bottom: 0; }
.rfig__row .rfig__lbl { font-size: .78rem; color: var(--navy); }
.rfig__row .rfig__num { font-family: var(--font-head); font-weight: 800; font-size: .9rem; color: var(--navy); font-variant-numeric: tabular-nums; }
.rfig__row .rfig__track { height: 10px; }
@media (max-width: 560px) {
	.rfig { gap: 22px; }
	.rfig__row { grid-template-columns: minmax(72px, auto) 1fr auto; }
}
/* rfig, ciag dalszy: panel szeroki (histogram) + kolumny rozkladu cen */
.rfig__panel--wide { grid-column: 1 / -1; }
.rfig__cols { display: flex; align-items: flex-end; gap: clamp(4px, 1vw, 10px); height: 104px; }
.rfig__col { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }
.rfig__colnum { font-family: var(--font-head); font-weight: 800; font-size: .72rem; text-align: center; color: var(--navy); margin: 0 0 5px; font-variant-numeric: tabular-nums; }
.rfig__colbar { border-radius: 4px 4px 0 0; background: var(--green-ink, #2f7357); min-height: 0; }
.rfig__colaxis { display: flex; justify-content: space-between; gap: 10px; margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--line); font-size: .78rem; color: var(--navy); font-variant-numeric: tabular-nums; }
/* rcmp: porownanie kategorii na landingu analizy (wiersz = link do strony kategorii) */
.rcmp { margin: clamp(18px, 2.4vw, 26px) 0 clamp(22px, 3vw, 34px); }
.rcmp__row { display: grid; grid-template-columns: minmax(120px, 1.4fr) minmax(90px, 2fr) auto auto; align-items: center; gap: clamp(10px, 1.6vw, 18px); padding: 11px 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.rcmp__row:first-of-type { border-top: 0; }
.rcmp__row:hover .rcmp__name { color: var(--green-ink, #2f7357); }
.rcmp__head { font-family: var(--font-head); font-weight: 700; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-strong, #0B2B40); opacity: .62; }
.rcmp__name { font-family: var(--font-head); font-weight: 700; font-size: .95rem; color: var(--navy); min-width: 0; }
.rcmp__name em { font-style: normal; font-weight: 700; font-size: .62rem; letter-spacing: .06em; color: var(--green-ink, #2f7357); margin-left: 7px; vertical-align: 1px; }
.rcmp__bar { position: relative; display: block; height: 10px; border-radius: 99px; background: var(--line); }
.rcmp__bar i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--green-ink, #2f7357); }
.rcmp__num { font-family: var(--font-head); font-weight: 800; font-size: .9rem; color: var(--navy); font-variant-numeric: tabular-nums; text-align: right; }
.rcmp__num--sec { font-weight: 700; opacity: .8; }
@media (max-width: 620px) {
	.rcmp__row { grid-template-columns: 1fr auto auto; grid-template-areas: "name share price" "bar bar bar"; row-gap: 8px; }
	.rcmp__name { grid-area: name; }
	.rcmp__bar { grid-area: bar; }
	.rcmp__head { display: none; }
}
/* rynlinks: lista wejsc do klastra danych rynkowych (kalkulator, hub eMAG) */
.rynlinks__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 18px; }
.rynlinks__list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--font-head); font-weight: 700; font-size: .95rem; color: var(--navy); text-decoration: none; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.rynlinks__list a:hover { border-color: rgba(11,64,51,.28); transform: translateY(-2px); color: var(--green-ink, #2f7357); }
.rynlinks__list a .arrow { transition: transform .2s var(--ease); }
.rynlinks__list a:hover .arrow { transform: translateX(3px); }
/* rfig: podpisy zakresow pod kolumnami histogramu (ta sama siatka co kolumny) */
.rfig__ranges { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(4px, 1vw, 10px); margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--line); }
.rfig__ranges span { font-size: .7rem; line-height: 1.25; text-align: center; color: var(--navy); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (max-width: 560px) { .rfig__ranges span { font-size: .62rem; } }

/* ---- Wpis sezonowy: Black Friday (oprawa kampanii eMAG) ----
   Klasa .article--bf siedzi na <article> w pages/single.php i zapala sie tylko
   dla wpisow w kategorii „black-friday". Nav, formularz i stopka zostaja poza
   nia, czyli w kolorach marki - sezon obejmuje sam wpis.

   Skad kolory: zmierzone z newslettera eMAG „Black Friday 2026". Czern #0A0A0A,
   cieply grafit #232320, zlamana biel #F2F2F0, akcenty #4DA6FF / #B57BFF oraz
   sygnaturowe spektrum magenta -> fiolet -> indygo -> blekit.

   Regula kontrastu (policzona, nie przybliżona):
   - na czerni #0A0A0A: paper 17.7, mute 5.7, blue 7.7, violet 6.8 - wszystkie AA;
   - na bieli jasne akcenty PRZEPADAJA (blue 2.6, violet 2.9), wiec na jasnym tle
     wystepuja WYLACZNIE jako wypelnienie/kreska, nigdy jako maly tekst;
   - do tekstu na jasnym sluzy ciemny koniec spektrum: #4359C7 (6.01) i #7A5CC4 (5.05).

   UWAGA above-fold: .article-hero nadpisuje tlo z base.css (inline w <head>),
   wiec jego kopia MUSI byc w critical.css - inaczej pierwsze malowanie da navy,
   a async podmieni je na czern (widoczny przeskok). Patrz stopka critical.css. */
.article--bf {
	--bf-ink:      #0A0A0A;
	--bf-panel:    #232320;
	--bf-paper:    #F2F2F0;
	--bf-mute:     #8A8A86;
	--bf-blue:     #4DA6FF;
	--bf-violet:   #B57BFF;
	--bf-deep:     #4359C7;
	--bf-plum:     #7A5CC4;
	--bf-spectrum: linear-gradient(90deg, #A0328C 0%, #7040A4 34%, #4359C7 67%, #0082E6 100%);
	/* Przemapowanie tokenow marki w obrebie wpisu: komponenty zbudowane na
	   --green/--bright (ikona FAQ, ramka otwartego pytania, cytat, linki)
	   przejmuja sezon same, bez powielania regul. Celowo --bf-plum, nie
	   --bf-violet: fioletu starcza na czerni, ale na bieli ma 2.9. */
	--green:  var(--bf-plum);
	--bright: var(--bf-deep);
	/* --green-ink to zielen-tekst na jasnym (eyebrow, kalkulator). Na bieli
	   --bf-deep ma 6.01, wiec przechodzi AA z zapasem. */
	--green-ink: var(--bf-deep);
}

/* Hero: czern zamiast navy. Pattern z brandbooka ZOSTAJE - zmienia sie tylko
   przykrywajaca go warstwa koloru, wiec faktura oprawy jest dalej nasza. */
.article--bf .article-hero {
	background-color: var(--bf-ink);
	background-image:
		radial-gradient(1200px 460px at 82% -10%, rgba(181,123,255,.20), rgba(10,10,10,0) 68%),
		linear-gradient(rgba(10,10,10,.92), rgba(10,10,10,.92)),
		url("/wp-content/uploads/2025/06/Pattern_02.svg");
	background-repeat: no-repeat, repeat, repeat;
	background-position: center top, center, center;
	background-size: auto, auto, 2600px auto;
	position: relative;
}
/* Sygnaturowy pasek spektrum na styku hero i tresci. */
.article--bf .article-hero::after {
	content: ""; position: absolute; inset: auto 0 0 0; height: 4px;
	background: var(--bf-spectrum);
}
.article--bf .article-hero .pagehero__title { color: var(--bf-paper); }
.article--bf .article-hero__meta { color: rgba(242,242,240,.72); }
.article--bf .article-hero .eyebrow { color: var(--bf-violet); }
.article--bf .article-hero .eyebrow::before { background: var(--bf-spectrum); width: 34px; }

/* Naglowki w tresci: kolor zostaje nasz (navy = czytelnosc dlugiego poradnika),
   sezon wchodzi znacznikiem spektrum nad naglowkiem. */
.article--bf .article-body h2::before {
	content: ""; display: block; width: 56px; height: 3px; border-radius: 2px;
	margin-bottom: .55em; background: var(--bf-spectrum);
}

/* Tabele: naglowek na czerni kampanii, pod nim kreska spektrum. */
.article--bf .article-body table th {
	background-color: var(--bf-ink);
	background-image: var(--bf-spectrum);
	background-size: 100% 3px;
	background-position: bottom left;
	background-repeat: no-repeat;
}
@media (max-width: 760px) {
	.article--bf .article-body table:has(td[data-th]) tbody tr td:first-child { background: var(--bf-ink); }
}

/* Boks CTA: ten sam uklad, sezonowa plaszczyzna + spektrum na gornej krawedzi. */
.article--bf .article-body .article-ctabox {
	background:
		var(--bf-spectrum) top left / 100% 4px no-repeat,
		linear-gradient(120deg, #0A0A0A 0%, #232320 58%, #2A1B44 100%);
	color: var(--bf-paper);
}
.article--bf .article-body .article-ctabox__lead { color: var(--bf-paper); }
.article--bf .article-body .article-ctabox__body > p { color: rgba(242,242,240,.86); }
.article--bf .article-body .article-ctabox .btn--primary { background: var(--bf-paper); color: var(--bf-ink); }
.article--bf .article-body .article-ctabox .btn--primary:hover { background: var(--bf-blue); color: var(--bf-ink); }

/* Cytat blokowy: kreska zamiast plaskiego forestu. */
.article--bf .article-body blockquote {
	border-left: 0; padding-left: 22px; position: relative;
}
.article--bf .article-body blockquote::before {
	content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; border-radius: 2px;
	background: var(--bf-spectrum);
}

/* ---- kalkulator Black Friday (.emc--bf): shortcode [harta_bf_kalkulator] ----
   Nadbudowa na .emc, nie osobny system: te same pola, siatka i pasek wyniku.
   Roznica jest w oprawie - kalkulator jest CIEMNA karta, bo to jedyny element
   wpisu, ktory ma zatrzymac czytelnika na dluzej, a czern kampanii dziala tu
   jak rama. Kolory z palety zmierzonej w newsletterze eMAG (patrz blok
   .article--bf wyzej).

   Kontrasty policzone na tle karty #131311 i pola #232320:
   paper 16,6 / opis #A5A5A0 7,5 / violet 6,4 / blue 7,3 / wynik #6EE7A8 12,1 /
   ostrzezenie #FFCF7A 12,8 / blad #FF9A8F 9,1 - wszystkie ponad AA.
   Opisy pod polami swiadomie #A5A5A0, nie #8A8A86: przy .76rem chcemy zapasu. */
.emc--bf {
	--bfc-card:  #131311;
	--bfc-field: #232320;
	--bfc-edge:  #34342f;
	--bfc-ink:   #F2F2F0;
	--bfc-mute:  #A5A5A0;
	--bfc-blue:  #4DA6FF;
	--bfc-viol:  #B57BFF;
	--bfc-good:  #6EE7A8;
	--bfc-warn:  #FFCF7A;
	--bfc-bad:   #FF9A8F;
	--bfc-spec:  linear-gradient(90deg, #A0328C 0%, #7040A4 34%, #4359C7 67%, #0082E6 100%);
	position: relative;
	max-width: 780px; margin-left: auto; margin-right: auto;
	background: var(--bfc-card);
	border: 1px solid var(--bfc-edge);
	border-radius: var(--radius);
	box-shadow: 0 24px 60px rgba(0,0,0,.28);
	padding: clamp(20px, 4vw, 30px);
	color: var(--bfc-ink);
	overflow: hidden;
}
/* Sygnaturowy pasek spektrum na gornej krawedzi karty. */
.emc--bf::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--bfc-spec); }
/* Delikatna poswiata w rogu - ten sam gest co w hero wpisu, tylko ciszej. */
.emc--bf::after {
	content: ""; position: absolute; top: -40%; right: -15%; width: 60%; height: 120%;
	background: radial-gradient(closest-side, rgba(181,123,255,.13), rgba(19,19,17,0) 70%);
	pointer-events: none;
}
.emc--bf > * { position: relative; z-index: 1; }

.emc--bf .emc__eyebrow { color: var(--bfc-viol); }
.emc--bf .emc__title   { color: var(--bfc-ink); }
.emc--bf .emc__intro   { color: var(--bfc-mute); }
.emc--bf .emc__grid    { margin-bottom: 20px; }
.emc--bf .emc__field label { color: var(--bfc-ink); }
.emc--bf .emc__desc    { color: var(--bfc-mute); }

.emc--bf .emc__ig input, .emc--bf .emc__ig select {
	background: var(--bfc-field); border-color: var(--bfc-edge); color: var(--bfc-ink);
}
.emc--bf .emc__ig select option { background: var(--bfc-field); color: var(--bfc-ink); }
.emc--bf .emc__u { color: var(--bfc-mute); }
.emc--bf .emc__ig input:focus, .emc--bf .emc__ig select:focus {
	border-color: var(--bfc-blue); box-shadow: 0 0 0 3px rgba(77,166,255,.28);
}
.emc--bf .emc__check { color: var(--bfc-ink); }
.emc--bf .emc__check input { accent-color: var(--bfc-viol); }

/* Naglowek grupy pol - kalkulator ma trzy bloki wejsciowe i bez podpisow
   robil sie sciana szesnastu inputow. Kreska pod nim to kawalek spektrum. */
.emc__leg {
	position: relative; font-family: var(--font-head); font-weight: 800; font-size: .72rem;
	text-transform: uppercase; letter-spacing: .1em; margin: 0 0 10px; padding-bottom: 8px;
}
.emc--bf .emc__leg { color: var(--bfc-mute); }
.emc__leg::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--line); }
.emc--bf .emc__leg::after { background: var(--bfc-spec); opacity: .55; }
.emc__legnote { font-size: .78rem; line-height: 1.5; margin: -4px 0 12px; color: var(--text-muted); }
.emc--bf .emc__legnote { color: var(--bfc-mute); }

.emc__check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-family: var(--font-head); font-weight: 600; font-size: .88rem; color: var(--navy); line-height: 1.35; }
.emc__check input { flex: 0 0 auto; width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--green); cursor: pointer; }

/* Wiersze statusu: etykieta, werdykt, powod. Powod jest tu najwazniejszy -
   samo „NIE" nie mowi, czego brakuje. */
.emc__bfout { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 18px; }
.emc__bfrow {
	display: grid; grid-template-columns: minmax(0, 13rem) auto 1fr; align-items: baseline;
	gap: 4px 12px; padding: 12px 15px; border-radius: var(--radius-sm);
	background: var(--bfc-field, var(--bg-alt)); border-left: 3px solid var(--bfc-edge, var(--line));
}
.emc__bfrow .emc__out-lbl { margin: 0; }
.emc--bf .emc__bfrow .emc__out-lbl { color: var(--bfc-mute); }
.emc__bfrow b { font-family: var(--font-head); font-weight: 800; font-size: 1rem; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--navy); }
.emc--bf .emc__bfrow b { color: var(--bfc-ink); }
.emc__bfrow.is-ok   { border-left-color: var(--bfc-good, var(--green)); }
.emc__bfrow.is-warn { border-left-color: var(--bfc-warn, #b8860b); }
.emc__bfrow.is-bad  { border-left-color: var(--bfc-bad, #b32d2e); }
.emc--bf .emc__bfrow.is-ok b   { color: var(--bfc-good); }
.emc--bf .emc__bfrow.is-warn b { color: var(--bfc-warn); }
.emc--bf .emc__bfrow.is-bad b  { color: var(--bfc-bad); }
.emc__note { font-size: .78rem; line-height: 1.45; color: var(--text-muted); grid-column: 1 / -1; }
.emc--bf .emc__note { color: var(--bfc-mute); }

/* Pasek wyniku: na ciemnej karcie musi byc CIEMNIEJSZY niz ona, inaczej
   ginie. Werdykt siedzi w srodku - to jedno zdanie jest puenta calego
   rachunku i poza pudelkiem czytalo sie jak przypis. */
.emc--bf .emc__out {
	flex-direction: column; align-items: stretch; gap: 10px;
	background: #0A0A0A; border: 1px solid var(--bfc-edge); position: relative; overflow: hidden;
	padding: 20px 22px;
}
.emc--bf .emc__out::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--bfc-spec); }
.emc--bf .emc__out-lbl { color: rgba(242,242,240,.58); }
.emc--bf .emc__big { color: var(--bfc-good); }
.emc--bf .emc__out.is-warn .emc__big { color: var(--bfc-warn); }
.emc--bf .emc__out.is-bad .emc__big  { color: var(--bfc-bad); }
.emc--bf .emc__pct { color: var(--bfc-ink); }
.emc--bf .emc__be  { color: rgba(242,242,240,.78); font-size: .9rem; }
.emc--bf .emc__be b { color: var(--bfc-ink); margin-left: .4em; }
.emc__be--fx { opacity: .78; }

/* Werdykt wewnatrz paska wyniku - oddzielony hairlinem, nie ramka. */
.emc--bf .emc__verdict {
	margin: 4px 0 0; padding-top: 14px; border-top: 1px solid rgba(242,242,240,.14);
	display: flex; gap: 10px; align-items: flex-start;
	font-size: .92rem; line-height: 1.55; color: var(--bfc-ink);
}
.emc--bf .emc__verdict .emc__dot { flex: 0 0 8px; width: 8px; height: 8px; margin-top: .5em; border-radius: 50%; background: var(--bfc-good); }
.emc--bf .emc__verdict.is-warn .emc__dot { background: var(--bfc-warn); }
.emc--bf .emc__verdict.is-bad .emc__dot  { background: var(--bfc-bad); }

.emc--bf .emc__foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bfc-edge); }
.emc--bf .emc__foot p { color: var(--bfc-mute); font-size: .8rem; line-height: 1.6; }
.emc--bf .emc__foot a { color: var(--bfc-blue); text-decoration: underline; }
.emc--bf .emc__foot a:hover { color: var(--bfc-viol); }

@media (max-width: 620px) {
	.emc--bf .emc__grid { grid-template-columns: 1fr; }
	.emc__bfrow { grid-template-columns: 1fr; }
	.emc__bfrow b { font-size: 1.05rem; }
}