/*
 * Skóra PlanMax — warstwa trzecia kaskady (base.css → arkusze bloków → ta skóra,
 * base-theme/inc/assets.php). Źródło każdej wartości: pliki designu
 * docs/handoff/planmax/project/*.dc.html przez analizy
 *   AC = docs/superpowers/specs/2026-09-25-planweb-analiza-chrome-home.md
 *   AP = docs/superpowers/specs/2026-09-25-planweb-analiza-podstrony.md
 *
 * Ten plik niesie wyłącznie to, co wspólne dla całego serwisu: tokeny --pw-*,
 * reset, tło strony, keyframes i prymitywy designu (AP §0.2). Sekcje stron
 * mieszkają w blokach lokalnych `site/*`. Nagłówek i stopka to warianty bazy
 * `mega`/`kolumny` (struktura i kolory: base-theme/css/chrome/*.css); skóra
 * dokłada w css/chrome.css (kolejkowany po tym pliku, functions.php) ich pismo
 * oraz własne części: logo, baner cookies, pasek mobilny, kurtynę.
 *
 * Prymitywy skóry mają przedrostek `s-pw-` (s-pw-page, s-pw-sec, s-pw-wrap,
 * s-pw-eyebrow, s-pw-h2, s-pw-btn, s-pw-card, s-pw-checks): prymitywy bazy
 * (`.s-card`, `.s-btn`, base-theme/css/base.css) mają inne znaczenie, a reguła
 * skóry z klasą bazy przejmowała wygląd bloków bazy (bramka `cascade`:
 * wyróżniona karta agency/pricing traciła obrys). Prymitywów bazy ten plik ani
 * css/chrome.css nie dotyka. Klasy bazy, w które skóra celuje świadomie:
 * klasy wariantów chrome (`.s-hdr`, `.s-mega`, `.s-mnav`, `.s-ftr`, `.s-logo` —
 * pismo w css/chrome.css, `[data-lite] .s-hdr.is-scrolled` niżej) oraz nagłówek
 * bloku bazowego agency/showcase (`.s-showcase .s-section__eyebrow` / `__title`,
 * pismo z grup `.s-pw-eyebrow` i `.s-pw-h2.is-home` — wyłącznie w tym bloku,
 * nagłówków innych bloków bazy te reguły nie przejmują).
 *
 * Bez important: design nadpisuje stany i media queries przez `!` przy każdej
 * deklaracji (runtime designu robi tak z atrybutów style-hover); tu to samo
 * robi kolejność i specyficzność klas (lint `noImportant`).
 */

/* ==========================================================================
 * 1. Tokeny skóry
 * ========================================================================== */

:root {
	/* Kolor (AC nagłówek analizy, AP §0.2). */
	--pw-blue: #1667e6;
	--pw-blue-hover: #0d55c8;
	--pw-link: #9abeff;
	--pw-ink-dark: #0b1220;
	--pw-eyebrow: rgba(226, 235, 250, 0.9);

	/* Tła (AC §1.2–1.3). Strona główna ma własne, ciemniejsze tło; stopka jest
	   jedynym celowym twardym cięciem (AC §1.3). */
	--pw-bg-home: #05070c;
	--pw-bg-page: #070b13;
	--pw-bg-footer: #070d18;
	--pw-grad-page: linear-gradient(180deg, #091120 0%, #070c17 24%, #0a1222 48%, #070c16 72%, #060a12 100%);
	--pw-grad-plain: linear-gradient(180deg, #091120 0%, #070c17 30%, #0a1222 60%, #060a12 100%);

	/* Powierzchnie i linie (AP §0.2: karta, karta akcentowa, karta przygaszona). */
	--pw-surface: rgba(255, 255, 255, 0.07);
	--pw-surface-hover: rgba(255, 255, 255, 0.1);
	--pw-surface-dim: rgba(255, 255, 255, 0.035);
	--pw-line: rgba(255, 255, 255, 0.15);
	--pw-line-dim: rgba(255, 255, 255, 0.1);
	--pw-line-accent: rgba(122, 166, 255, 0.34);
	--pw-line-hover: rgba(122, 166, 255, 0.5);

	/* Ruch: jedna krzywa w całym designie („EO" w AC). */
	--pw-ease: cubic-bezier(0.22, 1, 0.36, 1);

	/* Kroje. Plus Jakarta Sans ma @font-face z theme.json (fontFace obu plików,
	   slugi head i body). Georgia NIE jest slugiem theme.json: to krój
	   systemowy bez pliku (szablon theme.json wymaga fontFace z plikiem), użyty
	   w designie w jednym miejscu — dopisek pod stopką (AC §1.1, §3). Zgodnie
	   z docs/tokens.md §4 nie dokładamy trzeciego sluga dla jednej strony;
	   skóra czyta go stąd. */
	--pw-font: "Plus Jakarta Sans", system-ui, sans-serif;
	--pw-font-serif: Georgia, "Times New Roman", serif;

	/* Szerokość treści sekcji (`[data-wrap]`, AP §0.1). */
	--pw-wrap: 1180px;
}

/* ==========================================================================
 * 2. Reset, html, body, pasek przewijania (AC §1.2)
 * ========================================================================== */

html {
	scroll-behavior: smooth;
	scrollbar-gutter: stable;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

::-webkit-scrollbar {
	width: 7px;
	height: 7px;
	background: transparent;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.26);
	border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.42);
}

body {
	margin: 0;
	background: var(--pw-bg-page);
	font-family: var(--pw-font);
	-webkit-font-smoothing: antialiased;
}

body.is-bg-home {
	background: var(--pw-bg-home);
}

/* Kolor linku bez własnego koloru: podstrony mają #9abeff (AC §1.2). Strona
   główna w designie nie ustawia go wcale (kolor przeglądarki), ale każdy jej
   link ma kolor własny — jedna reguła dla całego serwisu zamiast niebieskiego
   z przeglądarki, którego design nigdzie nie pokazuje. */
a {
	text-decoration: none;
	color: var(--pw-link);
}

a:hover {
	color: var(--pw-blue);
}

summary {
	list-style: none;
}

summary::-webkit-details-marker {
	display: none;
}

/* ==========================================================================
 * 3. Tło strony: <body> + wrapper .s-pw-page (AC §1.3, AP §0.1)
 *
 * Jedno ciągłe tło na całą stronę, sekcje są przezroczyste. Warstwy ambientu
 * (poświaty radialne i siatka kropek 32 px) to w designie dwa div-y
 * `position:absolute; inset:0; z-index:0` tuż po otwarciu wrappera — tutaj
 * ::before i ::after, więc nie ma ich w markupie. `isolation` robi z
 * nośnika tła kontekst warstw, dzięki czemu `z-index: -1` kładzie warstwy NAD
 * jego tłem i POD całą treścią (w designie to samo daje kolejność w DOM).
 *
 * Nośnikiem gradientu i warstw jest <body> (klasa `is-bg-*` z functions.php),
 * nie <main>: wrapper designu obejmuje nagłówek, treść I STOPKĘ, a gradient
 * i poświaty w procentach liczą się od jego wysokości. Na <main> (bez stopki)
 * ten sam gradient był ściśnięty o wysokość stopki — każdy piksel tła
 * podstron różnił się od designu o 1–4/255 (zmierzone w Zadaniu 6:
 * `shots-diff` Strony wizytówki 73 % przy identycznej wysokości stron).
 *
 * Położenie poświat różni się między stronami — wartości domyślne są
 * kanoniczne (Strona wizytówka i 13 innych stron usług), odmiany niżej po
 * klasie widoku `is-page-<key>` na body (functions.php).
 * ========================================================================== */

/* `min-height: 100vh` designu stoi na WRAPPERZE (nagłówek + treść + stopka),
   nie na treści — na <main> spychał stopkę krótkiej strony (404) na dół
   ekranu: +264 px wysokości względem designu (Zadanie 8). Niesie go <body>. */
.s-pw-page {
	overflow-x: clip;
}

body.is-bg-home,
body.is-bg-page,
body.is-bg-plain {
	min-height: 100vh;
}

.s-pw-page.is-bg-home {
	background: var(--pw-bg-home);
}

body.is-bg-page,
body.is-bg-plain {
	position: relative;
	isolation: isolate;
	background-color: var(--pw-bg-page);
}

body.is-bg-page {
	background-image: var(--pw-grad-page);
}

/* Strony prawne, 404 i Dziękujemy: prostszy gradient, bez warstw ambientu. */
body.is-bg-plain {
	background-image: var(--pw-grad-plain);
}

body.is-bg-page::before,
body.is-bg-page::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

body.is-bg-page::before {
	background: var(
		--pw-ambient,
		radial-gradient(48% 36% at 6% 14%, rgba(84, 114, 164, 0.12) 0%, rgba(84, 114, 164, 0) 72%),
		radial-gradient(46% 36% at 98% 46%, rgba(22, 103, 230, 0.1) 0%, rgba(22, 103, 230, 0) 72%),
		radial-gradient(44% 32% at 12% 80%, rgba(112, 96, 235, 0.08) 0%, rgba(112, 96, 235, 0) 74%)
	);
}

body.is-bg-page::after {
	opacity: var(--pw-dots-opacity, 0.04);
	background-image: radial-gradient(rgba(176, 205, 255, 0.9) 1px, rgba(255, 255, 255, 0) 1px);
	background-size: 32px 32px;
	-webkit-mask-image: var(--pw-dots-mask, radial-gradient(52% 40% at 88% 8%, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 72%));
	mask-image: var(--pw-dots-mask, radial-gradient(52% 40% at 88% 8%, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 72%));
}

/* Odmiany warstw — wartości z wrappera każdego pliku designu. */
.is-page-uslugi,
.is-page-tworzenie-stron-internetowych {
	--pw-ambient:
		radial-gradient(48% 30% at 6% 24%, rgba(84, 114, 164, 0.12) 0%, rgba(84, 114, 164, 0) 72%),
		radial-gradient(46% 30% at 98% 50%, rgba(22, 103, 230, 0.1) 0%, rgba(22, 103, 230, 0) 72%),
		radial-gradient(44% 26% at 12% 82%, rgba(112, 96, 235, 0.08) 0%, rgba(112, 96, 235, 0) 74%);
	--pw-dots-mask: radial-gradient(52% 40% at 90% 8%, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 72%);
}

.is-page-cennik {
	--pw-ambient:
		radial-gradient(48% 30% at 4% 30%, rgba(84, 114, 164, 0.12) 0%, rgba(84, 114, 164, 0) 72%),
		radial-gradient(46% 30% at 98% 52%, rgba(112, 96, 235, 0.1) 0%, rgba(112, 96, 235, 0) 72%),
		radial-gradient(44% 26% at 16% 82%, rgba(22, 103, 230, 0.08) 0%, rgba(22, 103, 230, 0) 74%);
	--pw-dots-mask: radial-gradient(40% 24% at 10% 40%, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 72%);
}

.is-page-realizacje {
	--pw-ambient:
		radial-gradient(48% 34% at 6% 20%, rgba(84, 114, 164, 0.12) 0%, rgba(84, 114, 164, 0) 72%),
		radial-gradient(46% 34% at 98% 58%, rgba(22, 103, 230, 0.1) 0%, rgba(22, 103, 230, 0) 72%);
	--pw-dots-mask: radial-gradient(52% 40% at 90% 10%, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 72%);
}

.is-page-o-nas {
	--pw-ambient:
		radial-gradient(48% 36% at 6% 14%, rgba(84, 114, 164, 0.12) 0%, rgba(84, 114, 164, 0) 72%),
		radial-gradient(46% 36% at 98% 50%, rgba(22, 103, 230, 0.1) 0%, rgba(22, 103, 230, 0) 72%),
		radial-gradient(44% 30% at 12% 84%, rgba(112, 96, 235, 0.08) 0%, rgba(112, 96, 235, 0) 74%);
	--pw-dots-opacity: 0;
}

.is-page-faq {
	--pw-ambient:
		radial-gradient(48% 30% at 6% 20%, rgba(84, 114, 164, 0.12) 0%, rgba(84, 114, 164, 0) 72%),
		radial-gradient(46% 30% at 98% 56%, rgba(22, 103, 230, 0.1) 0%, rgba(22, 103, 230, 0) 72%);
	--pw-dots-opacity: 0;
}

.is-page-kontakt {
	--pw-ambient:
		radial-gradient(48% 36% at 6% 14%, rgba(84, 114, 164, 0.12) 0%, rgba(84, 114, 164, 0) 72%),
		radial-gradient(46% 36% at 98% 46%, rgba(22, 103, 230, 0.1) 0%, rgba(22, 103, 230, 0) 72%),
		radial-gradient(44% 32% at 12% 86%, rgba(112, 96, 235, 0.08) 0%, rgba(112, 96, 235, 0) 74%);
	--pw-dots-opacity: 0;
}

.is-page-blog,
.is-page-formularz-kontaktowy,
.is-page-ile-kosztuje-strona-firmowa {
	--pw-ambient:
		radial-gradient(48% 36% at 6% 14%, rgba(84, 114, 164, 0.12) 0%, rgba(84, 114, 164, 0) 72%),
		radial-gradient(46% 36% at 98% 56%, rgba(22, 103, 230, 0.1) 0%, rgba(22, 103, 230, 0) 72%),
		radial-gradient(44% 32% at 16% 94%, rgba(112, 96, 235, 0.08) 0%, rgba(112, 96, 235, 0) 74%);
	--pw-dots-mask: radial-gradient(52% 44% at 90% 10%, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 72%);
}

/* ==========================================================================
 * 4. Keyframes (AC §1.4, AP §0.2)
 *
 * `pulseOut` z AC §1.4 nie wchodzi: design go nie używa (spec §1 pkt 6 —
 * martwy kod designu).
 * ========================================================================== */

@keyframes bubble {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-12px); }
}

@keyframes glow {
	0%, 100% { transform: translate3d(-6%, -4%, 0) scale(1); }
	50% { transform: translate3d(8%, 6%, 0) scale(1.14); }
}

@keyframes horizon {
	0%, 100% { opacity: 0.88; transform: translateY(0) scale(1); }
	50% { opacity: 1; transform: translateY(-1.5%) scale(1.035); }
}

@keyframes halo {
	0%, 100% { opacity: 1; transform: none; }
	55% { opacity: 0; transform: scale(1.16, 1.7); }
}

@keyframes drift {
	0% { transform: translateX(-8%); }
	100% { transform: translateX(8%); }
}

/*
 * heroIn — wejście elementów hero, każdy własnym opóźnieniem (bloki
 * site/hero-*, site/kontakt). ODSTĘPSTWO OD DESIGNU: tytuł, lead i główny
 * wizual hero (zdjęcie, okno ze zrzutem, fotka) NIE wjeżdżają — stoją od
 * pierwszej klatki; wjeżdża reszta (eyebrow, przyciski, linia zaufania, meta).
 * Powód zmierzony: przeglądarka liczy LCP dopiero po KOŃCU animacji elementu
 * LCP albo jego przodka — także samego przesunięcia, bez przezroczystości.
 * PSI na planmax.pl (2026-10-19, telefon): LCP = FCP + opóźnienie + czas
 * animacji (tytuł 0,13 + 0,55 s → +680 ms, zdjęcie w figure 0,25 + 0,6 s →
 * +850 ms), czyli 2,7–3,2 s zamiast ~1,8 s. Pilnuje tego bramka `lcp`
 * (tooling/seo.mjs): animacja na elemencie LCP albo przodku to FAIL. Ta sama
 * zasada dla kafli portfolio (tileIn) w pierwszym rzędzie.
 */
@keyframes heroIn {
	from { opacity: 0; transform: translate3d(0, 22px, 0); }
	to { opacity: 1; transform: none; }
}

/* Na telefonie hero wjeżdża z 18 px, nie z 22 px (AC §1.4, SG 118). */
@media (max-width: 640px) {
	@keyframes heroIn {
		from { opacity: 0; transform: translate3d(0, 18px, 0); }
		to { opacity: 1; transform: none; }
	}
}

@keyframes pgIn {
	from { opacity: 0; transform: translate3d(0, 16px, 0); }
	to { opacity: 1; transform: none; }
}

@keyframes cbIn {
	from { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.96); }
	to { opacity: 1; transform: none; }
}

@keyframes cbFade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes cbFadeOut {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes cbOut {
	from { opacity: 1; transform: none; }
	to { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.97); }
}

@keyframes cbSwap {
	from { opacity: 0; transform: translate3d(0, 10px, 0); }
	to { opacity: 1; transform: none; }
}

@keyframes cbRing {
	0% { transform: scale(1); opacity: 0.55; }
	70% { transform: scale(1.75); opacity: 0; }
	100% { transform: scale(1.75); opacity: 0; }
}

@keyframes ptOpen {
	from { opacity: 0.5; }
	to { opacity: 0; }
}

/* Dziękujemy (znak ✓), Kontakt (wysyłanie), Realizacje (kafelki). */
@keyframes pop {
	0% { transform: scale(0.6); opacity: 0; }
	60% { transform: scale(1.08); opacity: 1; }
	100% { transform: scale(1); }
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

@keyframes tileIn {
	from { opacity: 0; transform: translate3d(0, 14px, 0); }
	to { opacity: 1; transform: none; }
}

/* ==========================================================================
 * 5. Sekcja i kontener treści (AP §0.1)
 *
 * `<section class="s-pw-sec">` + `<div class="s-pw-wrap">` — szkielet prawie każdej
 * sekcji podstron (`section` + `[data-wrap]` w designie). Warianty odstępu:
 *   is-top-tight  pierwsza sekcja po hero: 40px u góry
 *   is-top-flush  pierwsza sekcja po hero, wariant ciasny: clamp(8px,2vw,24px)
 *   is-end        ostatnia sekcja treści przed pasem CTA: dolny odstęp
 * ========================================================================== */

.s-pw-sec {
	position: relative;
	padding: clamp(58px, 9.45vw, 104px) 24px 0;
	background: transparent;
}

.s-pw-sec[id] {
	scroll-margin-top: 72px;
}

.s-pw-sec.is-top-tight {
	padding-top: 40px;
}

.s-pw-sec.is-top-flush {
	padding-top: clamp(8px, 2vw, 24px);
}

.s-pw-sec.is-end {
	padding-bottom: clamp(62px, 10vw, 110px);
}

/* FAQ (rozwijane pytania) tuż przed pasem CTA zamyka treść tym samym dolnym
   odstępem — w designie zawsze tak: strony branżowe i Lublin, Cennik, FAQ.
   Reguła po sąsiedztwie, bo blok FAQ nie wie, co stoi za nim (Wizytówka:
   za FAQ są „Powiązane”, bez odstępu). */
.s-pw-sec.s-faq:has(+ .s-cta) {
	padding-bottom: clamp(62px, 10vw, 110px);
}

.s-pw-wrap {
	max-width: var(--pw-wrap);
	margin: 0 auto;
	padding: 0 4px;
}

@media (max-width: 640px) {
	.s-pw-sec {
		padding-left: 16px;
		padding-right: 16px;
	}

	.s-pw-wrap {
		padding-left: 4px;
		padding-right: 4px;
	}
}

/* ==========================================================================
 * 6. Prymitywy typografii (AP §0.2)
 * ========================================================================== */

/* Eyebrow: kreska 34×1 z gradientem + wersaliki. W designie kreska to pusty
   span — tu ::before (i ::after w wariancie wyśrodkowanym, lustrzana kreska,
   Cennik L232–236), więc markup to sam tekst: <p class="s-pw-eyebrow">…</p>. */
.s-pw-eyebrow,
.s-showcase .s-section__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--pw-eyebrow);
}

.s-pw-eyebrow::before,
.s-showcase .s-section__eyebrow::before,
.s-pw-eyebrow.is-centered::after {
	content: "";
	flex: none;
	width: 34px;
	height: 1px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(154, 190, 255, 0.9));
}

.s-pw-eyebrow.is-centered {
	justify-content: center;
}

.s-pw-eyebrow.is-centered::after {
	background: linear-gradient(270deg, rgba(255, 255, 255, 0.08), rgba(154, 190, 255, 0.9));
}

/* H2 sekcji; `is-small` — nagłówek w karcie albo w układzie dzielonym;
   `is-related` — „Może Cię też zainteresować" i pokrewne. */
.s-pw-h2,
.s-showcase .s-section__title {
	margin: 0;
	max-width: 22ch;
	font-size: clamp(28px, 3.4vw, 42px);
	line-height: 1.06;
	letter-spacing: -0.045em;
	font-weight: 800;
	color: #fff;
	text-wrap: pretty;
}

.s-pw-eyebrow + .s-pw-h2,
.s-showcase .s-section__eyebrow + .s-section__title {
	margin-top: 18px;
}

.s-pw-h2.is-small {
	max-width: none;
	font-size: clamp(22px, 2.4vw, 28px);
	line-height: 1.12;
	letter-spacing: -0.035em;
}

.s-pw-h2.is-related {
	max-width: none;
	font-size: clamp(24px, 2.6vw, 32px);
	line-height: 1.1;
	letter-spacing: -0.04em;
}

/* `is-home` — H2 sekcji strony głównej (AC §5 „Shared patterns”): większy
   niż na podstronach, bez ograniczenia szerokości, 16 px pod nadtytułem. */
.s-pw-h2.is-home,
.s-showcase .s-section__title {
	max-width: none;
	font-size: clamp(30px, 4vw, 52px);
	letter-spacing: -0.04em;
	text-wrap: wrap;
}

.s-pw-eyebrow + .s-pw-h2.is-home,
.s-showcase .s-section__eyebrow + .s-section__title {
	margin-top: 16px;
}

/* Znak interpunkcyjny po słowie w nagłówku (site.js `tuckPunct`): krój ma
   przy nim w grubości 800 duży lewy margines — dosunięcie do słowa. */
.s-pw-punct {
	margin-left: -0.06em;
}

/* Na telefonie nadtytuł ma 14 px (design: 12 px) — bramka mobile.textSize
   (próg 14 px na 390 px; handoff-map.json → deviations). */
@media (max-width: 640px) {
	.s-pw-eyebrow,
	.s-showcase .s-section__eyebrow {
		font-size: 14px;
		line-height: 15px;
	}
}

/* ==========================================================================
 * 7. Przyciski (AP §0.2) — stany z atrybutów style-hover/style-active designu
 *
 * Kształt i wymiary podaje ta skóra w całości. Klasa jest własna skóry
 * (`s-pw-btn`), nie prymityw bazy `.s-btn`: wspólna nazwa znaczyła, że reguły
 * skóry (specyficzność klasy) przejmowały przyciski bloków bazy.
 *   is-primary  niebieska pigułka 54 px
 *   is-ghost    obrysowana pigułka 54 px
 *   is-white    biała pigułka 48 px (karty, panele boczne)
 *   is-link     link tekstowy #9abeff + strzałka w treści
 * ========================================================================== */

.s-pw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 54px;
	padding: 0 30px;
	border: 0;
	border-radius: 100px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	transition: transform 0.18s var(--pw-ease), background 0.2s;
}

.s-pw-btn:hover {
	color: #fff;
	transform: translateY(-2px);
}

.s-pw-btn:active {
	transform: scale(0.97);
}

.s-pw-btn.is-primary {
	background: var(--pw-blue);
	box-shadow: 0 14px 34px -12px rgba(22, 103, 230, 0.75);
}

.s-pw-btn.is-primary:hover {
	background: var(--pw-blue-hover);
}

.s-pw-btn.is-ghost {
	padding: 0 28px;
	border: 1.5px solid rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.06);
	font-weight: 600;
}

.s-pw-btn.is-ghost:hover {
	background: rgba(255, 255, 255, 0.14);
}

.s-pw-btn.is-white {
	height: 48px;
	padding: 0 24px;
	background: #fff;
	font-size: 15px;
	color: var(--pw-ink-dark);
}

.s-pw-btn.is-white:hover {
	color: var(--pw-ink-dark);
}

.s-pw-btn.is-link {
	height: auto;
	padding: 0;
	border-radius: 0;
	background: none;
	font-size: inherit;
	color: var(--pw-link);
	transition: color 0.18s;
}

.s-pw-btn.is-link:hover {
	color: #fff;
	transform: none;
}

.s-pw-btn.is-link:active {
	transform: none;
}

/* Widoczny fokus z klawiatury (spec §1 pkt 5) — design go nie ma. */
.s-pw-btn:focus-visible,
.s-pw-card:focus-visible {
	outline: 2px solid var(--pw-link);
	outline-offset: 3px;
}

/* ==========================================================================
 * 8. Karty (AP §0.2)
 *   s-pw-card       obramowanie .15, tło .07, promień 26
 *   is-accent    niebieski obrys i gradient (panel „Podsumowanie", propozycja)
 *   is-dim       przygaszona (druga kolumna „Dla kogo")
 *   a.s-pw-card     karta-link: uniesienie i jaśniejszy obrys po najechaniu
 * ========================================================================== */

.s-pw-card {
	display: block;
	padding: 30px;
	border: 1px solid var(--pw-line);
	border-radius: 26px;
	background: var(--pw-surface);
	box-shadow: none;
	color: inherit;
}

.s-pw-card.is-accent {
	border-color: var(--pw-line-accent);
	border-radius: 28px;
	background: linear-gradient(160deg, rgba(22, 103, 230, 0.2) 0%, rgba(255, 255, 255, 0.06) 60%);
}

.s-pw-card.is-dim {
	border-color: var(--pw-line-dim);
	background: var(--pw-surface-dim);
}

a.s-pw-card {
	transition: transform 0.35s var(--pw-ease), border-color 0.35s, background 0.35s;
}

a.s-pw-card:hover {
	transform: translateY(-6px);
	border-color: var(--pw-line-hover);
	color: inherit;
}

/* ==========================================================================
 * 9. Listy ✓ / ✕ (AP §0.2)
 *
 * Znacznik to `.s-pw-checks__mark` z ikoną z biblioteki bazy (`check` albo
 * `zamknij`, docs/CONVENTIONS.md §9) — dekoracja `aria-hidden`; kółko jest
 * tłem znacznika, ikona bierze jego kolor (currentColor).
 * ========================================================================== */

.s-pw-checks {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.s-pw-checks > li {
	display: flex;
	gap: 12px;
	font-size: 15.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.84);
}

.s-pw-checks__mark {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	border-radius: 50%;
	background: rgba(22, 103, 230, 0.24);
	color: #9abeff;
}

.s-pw-checks.is-cross > li {
	color: rgba(255, 255, 255, 0.8);
}

.s-pw-checks.is-cross .s-pw-checks__mark {
	background: rgba(255, 120, 120, 0.14);
	color: inherit;
}

/* ==========================================================================
 * 10. Ograniczony ruch (AC §1.4)
 *
 * Design: `*,*::before,*::after{animation-duration:.01ms!important;…}`. Bez
 * important tę samą siłę daje specyficzność: `:not(#pw-rm)` dokłada wagę
 * identyfikatora (1,0,0) i pasuje do KAŻDEGO elementu (nikt nie ma
 * id="pw-rm"), więc reguła wygrywa z każdą regułą klasową skóry i bloków,
 * niezależnie od kolejności arkuszy. Inline style w PHP nie istnieją (lint),
 * więc nie ma czego jeszcze przebijać.
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	:not(#pw-rm),
	:not(#pw-rm)::before,
	:not(#pw-rm)::after {
		animation-duration: 0.01ms;
		animation-delay: 0s;
		animation-iteration-count: 1;
		transition-duration: 0.01ms;
		transition-delay: 0s;
		scroll-behavior: auto;
	}
}

/* ==========================================================================
 * 11. Tryb lekki i pauza pętli (AC §1.6, §6: planmax.js L6–22)
 *
 * `html[data-lite]` stawia js/site.js, gdy urządzenie ma ≤ 4 rdzenie albo
 * ≤ 4 GB pamięci, włączone oszczędzanie danych albo prefers-reduced-motion.
 * Design wstrzykiwał tę regułę skryptem; tu mieszka w arkuszu. Zaczepy:
 * klasy chrome (css/chrome.css).
 *
 * `data-loop` = element z nieskończoną animacją dekoracyjną (design: każdy
 * element z „infinite" w atrybucie style). site.js pauzuje go poza ekranem
 * (IntersectionObserver, margines 160 px) klasą `is-loop-paused`.
 * ========================================================================== */

[data-lite] .s-hdr.is-scrolled,
[data-lite] .s-cookies,
[data-lite] .s-mbar {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

[data-loop].is-loop-paused,
[data-loop].is-loop-paused::before,
[data-loop].is-loop-paused::after {
	animation-play-state: paused;
}

/* ==========================================================================
 * 12. Pasmo strony głównej: .s-pw-band (AC §5 „Masked section background”,
 *     §1.5 `[data-pad]`)
 *
 * Sekcje #co-robimy, #cennik i #faq strony głównej: odstępy `[data-pad]`
 * (≥ 901 px zależne od wysokości okna) i własna warstwa tła pod treścią,
 * wygaszona maską do przezroczystości na górze i dole — bez szwu między
 * sekcjami. Warstwę rysuje ::before, jej tło podaje sekcja zmienną
 * `--pw-band-bg` (css/site-<blok>.css).
 * ========================================================================== */

.s-pw-band {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 96px 24px 72px;
	background: transparent;
}

.s-pw-band::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: var(--pw-band-bg, none);
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 16%, #000 84%, rgba(0, 0, 0, 0) 100%);
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 16%, #000 84%, rgba(0, 0, 0, 0) 100%);
}

@media (min-width: 901px) {
	.s-pw-band {
		padding-top: clamp(54px, 8.5vh, 74px);
		padding-bottom: clamp(30px, 5vh, 46px);
	}
}

@media (max-width: 900px) {
	.s-pw-band {
		padding: 74px 20px 78px;
	}
}

@media (max-width: 640px) {
	.s-pw-band {
		padding-top: 56px;
		padding-bottom: 60px;
	}
}

/* ==========================================================================
 * 13. Odsłony przy przewijaniu (js/motion.js, AC §5.8)
 *
 * Stan początkowy (ukryty) WYŁĄCZNIE pod `html.js` i bez ograniczonego ruchu
 * (constraints PlanMax pkt 5): bez JS treść jest widoczna, a przy
 * prefers-reduced-motion motion.js nic nie robi. Po końcu odsłony element
 * dostaje `data-done` i wraca do stylów bez stanu ruchu.
 *   [data-rev]    element: przesunięcie 36 px i przezroczystość
 *   [data-words]  nagłówek dzielony na słowa [data-w] (przed podziałem
 *                 ukryty w całości, żeby nie mignął niepodzielony)
 *   [data-num]    licznik — bez stanu CSS (do końca pokazuje liczbę)
 * ========================================================================== */

[data-w] {
	display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
	html.js [data-rev]:not([data-done]) {
		opacity: 0;
		transform: translate3d(0, 36px, 0);
	}

	html.js [data-words]:not([data-split]),
	html.js [data-words]:not([data-done]) [data-w] {
		opacity: 0;
	}
}