/* ============================================================================
   artsearch-theme — arkusz serwisu.
   Słownik tokenów i klas: INWENTARZ.md (kontrakt, zasada 3 — ustalony raz).
   Różnice wobec prototypów: ROZNICE.md. Breakpoint mobilny: 860px (jedyny).
   Kolejność sekcji: fonty → tokeny → reset → komponenty → nagłówek → stopki.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   Fonty self-hosted (kontrakt, zasada 8). Źródło plików: paczki npm
   @fontsource-variable/archivo 5.3.0 i @fontsource-variable/jetbrains-mono
   5.3.0 (pliki latin + latin-ext, zakresy unicode-range 1:1 z CSS paczek).
   „Archivo Expanded" to oś szerokości zmiennego Archivo: font-stretch 125%
   (ustalenie T1 z 2026-08-22), stąd klasa .as-expanded.
   -------------------------------------------------------------------------- */

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	font-stretch: 62% 125%;
	src: url(fonts/archivo-latin-wdth-normal.woff2) format('woff2-variations');
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	font-stretch: 62% 125%;
	src: url(fonts/archivo-latin-ext-wdth-normal.woff2) format('woff2-variations');
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-display: swap;
	font-weight: 100 800;
	src: url(fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2-variations');
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-display: swap;
	font-weight: 100 800;
	src: url(fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format('woff2-variations');
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ----------------------------------------------------------------------------
   Tokeny — wartości odczytane z handoffu (wytyczne §3 + prototypy).
   Miejsce odczytu każdego tokenu: INWENTARZ.md, sekcja „Tokeny".
   Wartość spoza handoffu wymaga wpisu w ROZNICE.md (ustalenie M2).
   -------------------------------------------------------------------------- */

.as-site {
	/* kolory — jasne tło */
	--as-bg: #f5f4ee;
	--as-card: #fffdf8;
	--as-ink: #15181d;
	--as-muted: #5d6470;
	--as-muted-2: #3a3f47;
	--as-mono-muted: #7a766c;
	--as-mono-faint: #9a958a; /* mono-szarość trzeciorzędna na jasnym — dołożona w E2 (INWENTARZ) */
	--as-line: #d7d4ca;

	/* kolory — ciemne tła sekcji */
	--as-navy: #0a1622;
	--as-navy-hi: #0b1722;
	--as-navy-lo: #0a1420;
	--as-navy-map: #101e2b;
	--as-navy-slim: #0c1822;
	--as-navy-card: #0d1a26;
	--as-navy-text: #aec0cf;
	--as-navy-text-2: #c2d2e0;
	--as-navy-text-3: #93a6b6;
	--as-navy-mono: #6f8295;
	--as-navy-line: rgba(255, 255, 255, 0.14);
	--as-navy-border: rgba(255, 255, 255, 0.16);
	--as-footer-line: #1f3a52;

	/* kolory — akcenty */
	--as-green: #0e9b6f;
	--as-green-hover: #0c855f;
	--as-green-off: #9fb8ac;
	--as-mint: #2dd4a0;
	--as-mint-hover: #5fd1ad;
	--as-mint-ink: #06241a;
	--as-amber: #c8772e;
	--as-red: #e0574f;

	/* cienie twarde */
	--as-shadow: 8px 8px 0 var(--as-ink);
	--as-shadow-mint: 5px 5px 0 rgba(14, 155, 111, 0.9);
	--as-shadow-soft: 6px 6px 0 #dfe0d6;

	/* typografia */
	--as-font: 'Archivo', system-ui, sans-serif;
	--as-font-mono: 'JetBrains Mono', monospace;
	--as-h1: clamp(32px, 4.4vw, 70.4px);
	--as-h2: clamp(28px, 3.6vw, 57.6px);
	--as-lead: clamp(15px, 1.15vw, 18.4px);

	/* rytm */
	--as-gutter: clamp(20px, 3.5vw, 56px);
	--as-gap: clamp(24px, 3vw, 48px);
	--as-max-w: 1600px; /* szerokość zamrożenia układu (droga A, E8 — ROZNICE 38): rama treści .as-shell i elementów z własnym gutterem; tła sekcji zostają full-bleed */
	/* Droga A (E8, ROZNICE 38): układ zamrożony od 1600 px — .as-shell ma
	   max-width: var(--as-max-w), a każdy clamp() zależny od okna, którego
	   sufit leżał powyżej 1600 px, dostał sufit = swoja wartość przy 1600 px
	   (X vw × 16, dokładnie, bez zaokrąglania — poniżej 1600 zmiana zerowa).
	   Komplet 49 sufitów (selektor · właściwość · X vw: przed → po):
	   --as-h1 · 4.4vw: 78 → 70.4 px
	   --as-h2 · 3.6vw: 58 → 57.6 px
	   --as-lead · 1.15vw: 19 → 18.4 px
	   --as-gutter · 3.5vw: 64 → 56 px
	   --as-gap · 3vw: 56 → 48 px
	   .as-hero__naglowek · font-size · 4.4vw: 82 → 70.4 px
	   .as-mapa__szczyt · gap · 2.5vw: 48 → 40 px
	   .as-mapa__tytul · font-size · 3.4vw: 56 → 54.4 px
	   .as-mapa__srodek-tytul · font-size · 1.3vw: 21 → 20.8 px
	   .as-problem__naglowek · font-size · 3.6vw: 60 → 57.6 px
	   .as-problem__wpis · padding · 2vw: 40 → 32 px
	   .as-system__krok · padding · 1vw: 18 → 16 px
	   .as-system__krok-tytul · font-size · 2vw: 34 → 32 px
	   .as-system__szczegoly · padding · 3vw: 52 → 48 px
	   .as-system__szczegoly · padding · 3vw: 52 → 48 px
	   .as-system__panel-tytul · font-size · 3.6vw: 60 → 57.6 px
	   .as-branze__szczyt · gap · 2vw: 40 → 32 px
	   .as-branze__panel · padding · 3vw: 52 → 48 px
	   .as-branze__panel · gap · 3vw: 52 → 48 px
	   .as-audyt__uklad · padding · 5vw: 90 → 80 px
	   .as-audyt__naglowek · font-size · 4.2vw: 68 → 67.2 px
	   .as-audyt__pozycja · padding · 2vw: 34 → 32 px
	   .as-proces__szczyt · gap · 3.5vw: 64 → 56 px
	   .as-proces__krok · padding · 2.6vw: 44 → 41.6 px
	   .as-proces__krok · padding · 1.6vw: 32 → 25.6 px
	   .as-proces__krok-nr · font-size · 4vw: 72 → 64 px
	   .as-cta__uklad · padding · 7vw: 120 → 112 px
	   .as-cta__naglowek · font-size · 4.6vw: 82 → 73.6 px
	   .as-audyt-hero__naglowek · font-size · 4.2vw: 74 → 67.2 px
	   .as-raport__naglowek · font-size · 3.2vw: 52 → 51.2 px
	   .as-branza-hero__naglowek · font-size · 5.2vw: 88 → 83.2 px
	   .as-branza-hero__lead · font-size · 1.3vw: 21 → 20.8 px
	   .as-branza-zapytania__szczyt · gap · 2.5vw: 48 → 40 px
	   .as-branza-oferta__intro · gap · 4vw: 72 → 64 px
	   .as-trojka__nr--wielki · font-size · 3.4vw: 56 → 54.4 px
	   .as-branza-cta__uklad · padding-top · 7vw: 120 → 112 px
	   .as-branza-cta__uklad · padding-bottom · 7vw: 120 → 112 px
	   .as-branza-cta__naglowek · font-size · 4.4vw: 76 → 70.4 px
	   .as-kontakt-hero__naglowek · font-size · 4.2vw: 74 → 67.2 px
	   .as-kontakt-mapa__uklad · padding-top · 5vw: 84 → 80 px
	   .as-kontakt-mapa__uklad · padding-bottom · 5vw: 84 → 80 px
	   .as-kontakt-cta__lead · font-size · 1.1vw: 18 → 17.6 px
	   .as-onas-szczyt · gap · 2.5vw: 48 → 40 px
	   .as-onas-ludzie__uklad · gap · 3.5vw: 64 → 56 px
	   .as-onas-ludzie__uklad · padding-top · 5vw: 84 → 80 px
	   .as-onas-ludzie__uklad · padding-bottom · 5vw: 84 → 80 px
	   .as-onas-cta__uklad · padding-top · 6vw: 104 → 96 px
	   .as-onas-cta__uklad · padding-bottom · 6vw: 104 → 96 px
	   .as-onas-cta__naglowek · font-size · 4.2vw: 72 → 67.2 px
	   Pominięte 184 wartości osiągają sufit przed 1600 px albo zależą od vh. */
	--as-header-h: 74px;

	/* ruch — krzywe nazwane wg zastosowania (ustalenie M4) */
	--as-t: 0.25s ease;
	--as-ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
	--as-ease-ripple: cubic-bezier(0.16, 0.84, 0.44, 1);
	--as-ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
	--as-ease-bar: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ----------------------------------------------------------------------------
   Reset — wyłącznie przez :where(.as-site): zerowa specyficzność, style nie
   wyciekają do paska administracyjnego ani do wtyczek (brief E1 §4).
   -------------------------------------------------------------------------- */

:where(.as-site),
:where(.as-site) *,
:where(.as-site) *::before,
:where(.as-site) *::after {
	box-sizing: border-box;
}

:where(.as-site) :where(h1, h2, h3, h4) {
	margin: 0;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 0.96;
}

:where(.as-site) :where(p, ul, ol, figure) {
	margin: 0;
}

:where(.as-site) :where(a) {
	text-decoration: none;
	color: inherit;
}

:where(.as-site) :where(button, input, select, textarea) {
	font: inherit;
}

:where(.as-site) :where(img, svg) {
	display: block;
	max-width: 100%;
}

/* body jest poza .as-site, więc dostaje literał kości — bez tego na stronie
   krótszej niż viewport pod stopką prześwituje białe tło przeglądarki.
   margin: 0 — świadomy wyjątek od resetu wyłącznie przez :where(.as-site)
   (E7, ZAUWAZONE 21): domyślne 8 px przeglądarki zerował dotąd arkusz
   WordPressa; po wyłączeniu stylów bloków WP przy porządkowaniu zasobów
   (E9) cały serwis dostałby ośmiopikselową ramkę. Dziś zmiana wizualnie
   zerowa — powiela stan faktyczny. */
body {
	margin: 0;
	background: #f5f4ee;
}

.as-site {
	font-family: var(--as-font);
	color: var(--as-ink);
	background: var(--as-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	/* Wrapper każdego prototypu ma overflow-x:hidden inline — bez tego
	   elementy szersze niż wąski viewport bujają stroną w poziomie
	   (dołożone w E2 przy stronie głównej; INWENTARZ). */
	overflow-x: hidden;
}

.as-site > main {
	flex: 1 0 auto;
}

.as-site ::selection {
	background: var(--as-ink);
	color: var(--as-bg);
}

/* Widoczny focus odnośników i przycisków — dodatek motywu (ROZNICE.md). */
.as-site :where(a, button, summary):focus-visible {
	outline: 2px solid var(--as-green);
	outline-offset: 2px;
}

/* Elementy, które skrypty E3 zamieniają w przyciski (węzły mapy, wiersze
   paneli): kursor wspólny; fokus per sekcja przy jej regułach (mięta na
   ciemnym, zieleń na jasnym). */
.as-site :where([role='button']) {
	cursor: pointer;
}

/* ----------------------------------------------------------------------------
   Komponenty bazowe
   -------------------------------------------------------------------------- */

.as-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 10px 18px;
	background: var(--as-ink);
	color: var(--as-bg);
}

.as-skip:focus {
	left: 0;
}

.as-shell {
	padding-left: var(--as-gutter);
	padding-right: var(--as-gutter);
	max-width: var(--as-max-w); /* droga A: rama treści od 1600 px; poniżej szerokość bloku = okno */
	margin-left: auto;
	margin-right: auto;
}

.as-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--as-gap);
}

.as-mono {
	font-family: var(--as-font-mono);
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.as-expanded {
	font-stretch: 125%;
}

.as-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 60px;
	padding: 0 30px;
	background: var(--as-green);
	color: #fff;
	font-weight: 600;
	font-size: 16px;
	white-space: nowrap;
	border: 0;
	cursor: pointer;
	transition: background var(--as-t);
}

.as-btn:hover {
	background: var(--as-green-hover);
}

.as-btn--outline {
	background: transparent;
	color: var(--as-ink);
	border: 1px solid var(--as-ink);
	transition: background var(--as-t), color var(--as-t);
}

.as-btn--outline:hover {
	background: var(--as-ink);
	color: var(--as-bg);
}

.as-card {
	border: 1px solid var(--as-ink);
	background: var(--as-card);
	box-shadow: var(--as-shadow);
}

/* Pasek mono sekcji „({nr}) — etykieta | dopisek" — numer to struktura
   (kolejność sekcji prototypu), etykiety to treść z pól. Wartości z pasków
   wszystkich sekcji Home v2: 14px pionowego paddingu, hairline dołem, 11px. */
.as-pasek {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--as-line);
	font-size: 11px;
	color: var(--as-mono-muted);
}

.as-pasek--ciemny {
	border-bottom-color: var(--as-navy-line);
	color: var(--as-navy-mono);
}

/* ----------------------------------------------------------------------------
   Logo — kwadrat atramentowy z zielonym kwadracikiem + nazwa.
   Wartości: nagłówek 18/6/18px, stopka (--invert) 22/8/20px (prototypy).
   Logo zastępcze do czasu logo od klienta (decyzja otwarta z planu etapów).
   -------------------------------------------------------------------------- */

.as-logo {
	display: flex;
	align-items: center;
	gap: 12px;
}

.as-logo__mark {
	position: relative;
	width: 18px;
	height: 18px;
	background: var(--as-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.as-logo__mark::before {
	content: '';
	width: 6px;
	height: 6px;
	background: var(--as-green);
}

.as-logo__name {
	font-weight: 700;
	font-size: 18px;
	letter-spacing: -0.01em;
}

.as-logo--invert {
	gap: 11px;
}

.as-logo--invert .as-logo__mark {
	width: 22px;
	height: 22px;
	background: #fff;
}

.as-logo--invert .as-logo__mark::before {
	width: 8px;
	height: 8px;
}

.as-logo--invert .as-logo__name {
	font-size: 20px;
	letter-spacing: -0.02em;
	color: #fff;
}

/* Podmiana na logo od klienta: w miejsce __mark + __name wchodzi jeden
   <img class="as-logo__img"> — kontener as-logo zostaje bez zmian. */
.as-logo__img {
	display: block;
	height: 18px;
	width: auto;
}

.as-logo--invert .as-logo__img {
	height: 22px;
}

/* ----------------------------------------------------------------------------
   Nagłówek — model kanoniczny (wytyczne §4): sticky 74px, tło kość 85% + blur,
   hairline dołem. Rozstaw nav 34px — rozjazd 30/34 między prototypami,
   rozstrzygnięcie w ROZNICE.md.
   -------------------------------------------------------------------------- */

.as-header {
	position: sticky;
	top: 0;
	z-index: 80;
	background: rgba(245, 244, 238, 0.85);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--as-ink);
}

.admin-bar .as-header {
	top: 32px;
}

.as-header__inner {
	height: var(--as-header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.as-header__nav {
	display: flex;
	align-items: center;
	gap: 34px;
}

.as-header__link {
	font-size: 11.5px;
	color: var(--as-ink);
	padding: 4px 0;
	border-bottom: 1px solid transparent;
}

.as-header__link:hover,
.as-header__link--active {
	border-bottom-color: var(--as-ink);
}

.as-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 40px;
	padding: 0 18px;
	border: 1px solid var(--as-ink);
	font-size: 11.5px;
	color: var(--as-ink);
	background: transparent;
	transition: background var(--as-t), color var(--as-t);
}

.as-header__phone::before {
	content: '';
	width: 6px;
	height: 6px;
	background: var(--as-green);
}

.as-header__phone:hover {
	background: var(--as-ink);
	color: var(--as-bg);
}

/* Menu mobilne: details/summary — działa bez JS; JS tylko ulepsza (ROZNICE.md). */

.as-header__mobile {
	display: none;
}

.as-header__burger {
	-webkit-appearance: none;
	appearance: none;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--as-ink);
	border: 0;
	cursor: pointer;
	padding: 0;
	list-style: none;
}

.as-header__burger::-webkit-details-marker {
	display: none;
}

.as-header__burger::marker {
	content: none;
}

.as-header__burger-box {
	position: relative;
	width: 18px;
	height: 12px;
	display: block;
}

.as-header__burger-box span {
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	background: #fff;
	transition: all 0.25s ease;
}

.as-header__burger-box span:nth-child(1) {
	top: 0;
}

.as-header__burger-box span:nth-child(2) {
	top: 5px;
}

.as-header__burger-box span:nth-child(3) {
	top: 10px;
}

.as-header__mobile[open] .as-header__burger-box span:nth-child(1) {
	top: 5px;
	transform: rotate(45deg);
}

.as-header__mobile[open] .as-header__burger-box span:nth-child(2) {
	opacity: 0;
}

.as-header__mobile[open] .as-header__burger-box span:nth-child(3) {
	top: 5px;
	transform: rotate(-45deg);
}

/* Panel jako nakładka pod paskiem (details musi objąć burger i panel — ROZNICE.md).
   max-height + przewijanie: na niskim viewporcie (telefon w poziomie) dolne
   pozycje i przycisk telefonu muszą pozostać osiągalne. */
.as-header__panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	display: flex;
	flex-direction: column;
	padding: 8px var(--as-gutter) 22px;
	background: var(--as-bg);
	border-bottom: 1px solid var(--as-ink);
	max-height: calc(100vh - var(--as-header-h));
	max-height: calc(100dvh - var(--as-header-h));
	overflow-y: auto;
}

.as-header__panel-link {
	font-size: 14px;
	color: var(--as-ink);
	padding: 14px 0;
	border-bottom: 1px solid var(--as-line);
}

.as-header__panel-link--active {
	color: var(--as-green);
}

.as-header__panel-phone {
	margin-top: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: 50px;
	background: var(--as-green);
	color: #fff;
	font-size: 13px;
}

.as-header__panel-phone::before {
	content: '';
	width: 6px;
	height: 6px;
	background: #fff;
}

@media (max-width: 860px) {
	.as-header__nav,
	.as-header__phone {
		display: none;
	}

	.as-header__mobile {
		display: block;
	}
}

@media (max-width: 782px) {
	.admin-bar .as-header {
		top: 46px;
	}
}

/* ≤600px pasek administracyjny WP przestaje być przyklejony (position:absolute
   w admin-bar.css) — nagłówek wraca na samą górę, inaczej zostawia pusty pas. */
@media (max-width: 600px) {
	.admin-bar .as-header {
		top: 0;
	}
}

/* ----------------------------------------------------------------------------
   Stopka pełna — granat #0a1622, siatka 1.4fr 1fr 1fr 1fr (bez wpisów branza
   wariant --three). Wartości ze stopek prototypów (identyczne na 5 stronach).
   -------------------------------------------------------------------------- */

.as-footer {
	background: var(--as-navy);
	color: #fff;
	border-top: 1px solid var(--as-footer-line);
}

.as-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: clamp(20px, 2.5vw, 40px);
	padding: clamp(48px, 5vw, 80px) 0 clamp(36px, 4vw, 56px);
	border-bottom: 1px solid var(--as-navy-line);
}

.as-footer__grid--three {
	grid-template-columns: 1.4fr 1fr 1fr;
}

.as-footer__brand .as-logo {
	margin-bottom: 28px;
}

.as-footer__col-title {
	font-size: 10.5px;
	color: var(--as-navy-mono);
	margin-bottom: 18px;
}

.as-footer__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 380px;
}

.as-footer__chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 10px;
	color: var(--as-navy-text);
	padding: 7px 11px;
	border: 1px solid var(--as-navy-border);
}

.as-footer__chip::before {
	content: '';
	width: 5px;
	height: 5px;
	background: var(--as-mint);
}

.as-footer__link {
	display: block;
	font-size: 14.5px;
	color: var(--as-navy-text-2);
	transition: color var(--as-t);
}

.as-footer__link + .as-footer__link {
	margin-top: 12px;
}

.as-footer__link:hover {
	color: var(--as-mint);
}

.as-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding: 22px 0;
	font-size: 10.5px;
	color: var(--as-navy-mono);
}

.as-footer__claim {
	color: var(--as-mint);
}

/* Stopka slim (landing branżowy): #0c1822, jeden rząd 28px, bez linii górnej. */

.as-footer--slim {
	background: var(--as-navy-slim);
	border-top: 0;
}

.as-footer--slim .as-footer__bottom {
	padding: 28px 0;
}

.as-footer__back {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--as-navy-text-2);
	transition: color var(--as-t);
}

.as-footer__back:hover {
	color: #fff;
}

@media (max-width: 860px) {
	.as-footer__grid {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}
}

/* ----------------------------------------------------------------------------
   Strona 404 — nowy projekt (ROZNICE.md). Górny pas: treść po lewej, karta
   odnośników po prawej; mini-mapa pasem na pełną szerokość (poprawka N5 —
   twarde zasady §2.1/§2.2). Mini-mapa to ilustracja, nie kontrolka (M3):
   zero cursor:pointer, zero hoverów, środek inny niż środek mapy właściwej.
   -------------------------------------------------------------------------- */

.as-404 {
	padding-top: clamp(48px, 5.5vw, 88px);
	padding-bottom: clamp(48px, 5.5vw, 88px);
}

.as-404__lewa {
	grid-column: span 7;
}

.as-404__prawa {
	grid-column: span 5;
	align-self: start;
}

.as-404__kicker {
	font-size: 11px;
	color: var(--as-green);
}

.as-404 h1 {
	margin-top: 16px;
	font-size: var(--as-h1);
	line-height: 0.96;
	letter-spacing: -0.03em;
}

.as-404 h1 em {
	font-style: normal;
	color: var(--as-green);
}

.as-404__lead {
	margin-top: 18px;
	max-width: 48ch;
	font-size: var(--as-lead);
	line-height: 1.55;
	color: var(--as-muted);
}

.as-404__map {
	position: relative;
	margin-top: clamp(36px, 4vw, 56px);
	aspect-ratio: 12 / 5;
	border: 1px solid var(--as-ink);
	box-shadow: var(--as-shadow);
	background-color: var(--as-navy-hi);
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(180deg, var(--as-navy-map), var(--as-navy-hi));
	background-size: 52px 52px, 52px 52px, 100% 100%;
	overflow: hidden;
}

.as-404__map svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.as-404__node {
	position: absolute;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 9px;
	color: var(--as-navy-text);
	white-space: nowrap;
}

.as-404__node::before {
	content: '';
	width: 5px;
	height: 5px;
	background: var(--as-mint);
}

.as-404__center {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 12px 18px;
	border: 1px dashed rgba(255, 255, 255, 0.35);
	background: var(--as-navy-card);
	color: var(--as-navy-text-2);
	text-align: center;
}

.as-404__center strong {
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.14em;
}

.as-404__center span {
	font-size: 8.5px;
	color: var(--as-navy-mono);
	white-space: nowrap;
}

.as-404__panel-naglowek {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 18px 22px;
	border-bottom: 1px solid var(--as-ink);
	font-size: 10.5px;
}

.as-404__panel-naglowek::before {
	content: '';
	width: 8px;
	height: 8px;
	background: var(--as-green);
}

.as-404__list {
	list-style: none;
	padding: 0;
}

.as-404__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 22px;
	border-bottom: 1px solid var(--as-line);
	font-size: 15px;
	color: var(--as-ink);
	transition: color var(--as-t);
}

.as-404__link:hover {
	color: var(--as-green);
}

.as-404__link svg {
	flex: none;
}

.as-404__cta {
	padding: 22px;
}

.as-404__cta .as-btn {
	width: 100%;
	height: 58px;
}

.as-404__facts {
	margin-top: 14px;
	font-size: 9.5px;
	color: var(--as-mono-muted);
	text-align: center;
	line-height: 1.6;
}

.as-404__facts span {
	white-space: nowrap;
}

@media (max-width: 860px) {
	.as-404 .as-grid {
		display: block;
	}

	.as-404__prawa {
		margin-top: 34px;
	}

	.as-404__map {
		aspect-ratio: 4 / 3;
	}
}

/* ============================================================================
   Strona główna (E2) — dziewięć sekcji prototypu Home v2, stan spoczynkowy.
   Kontenery sekcji: tła i hairline dołem (prototyp: border-bottom #15181d
   na każdej sekcji). Wnętrza sekcji dochodzą commitami 3–7.
   ========================================================================== */

.as-hero {
	background: var(--as-bg);
	border-bottom: 1px solid var(--as-ink);
}

/* --- Hero: dwie kolumny 6/6, karta skanu w spoczynku (wartości: prototyp
   Home v2, sekcja Hero). H1 hero ma własne stopnie z prototypu (34–82px) —
   większe niż token --as-h1, który zostaje dla pozostałych stron. --- */

.as-hero__grid {
	align-items: start;
	padding-top: clamp(40px, 4.5vw, 72px);
	padding-bottom: clamp(40px, 4.5vw, 72px);
}

.as-hero__tresc {
	grid-column: span 6;
	display: flex;
	flex-direction: column;
	gap: clamp(22px, 2.2vw, 32px);
}

.as-hero__naglowek {
	font-size: clamp(34px, 4.4vw, 70.4px);
	line-height: 0.94;
	letter-spacing: -0.03em;
}

.as-hero__naglowek span {
	color: var(--as-green);
}

.as-hero__lead {
	font-size: var(--as-lead);
	line-height: 1.55;
	color: var(--as-muted-2);
	max-width: 46ch;
}

.as-hero__skan {
	grid-column: span 6;
	display: flex;
	flex-direction: column;
}

/* Karta skanu bez twardego cienia — prototyp hero go nie ma. */
.as-hero__karta {
	border: 1px solid var(--as-ink);
	background: var(--as-card);
}

.as-hero__karta-szczyt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	border-bottom: 1px solid var(--as-ink);
}

.as-hero__karta-tytul {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: clamp(15px, 1.3vw, 19px);
	letter-spacing: -0.02em;
}

/* Kropka statusu przy tytule — statyczna; miganie (asBlink) to E3. */
.as-hero__karta-tytul::before {
	content: '';
	width: 8px;
	height: 8px;
	flex: none;
	background: var(--as-green);
}

.as-hero__karta-badge {
	font-size: 9px;
	color: var(--as-mono-faint);
	border: 1px solid var(--as-line);
	padding: 4px 7px;
}

.as-hero__wiersz-pola {
	display: flex;
	padding: 20px 22px 0;
}

.as-hero__pole {
	flex: 1;
	min-width: 0;
	height: 50px;
	padding: 0 14px;
	border: 1px solid var(--as-ink);
	border-right: none;
	background: var(--as-bg);
	font-size: 14.5px;
	color: var(--as-ink);
}

/* Widoczny focus pola wg §8.1 (ramka zielona) — prototyp miał outline:none
   bez zamiennika; zamyka wpis 3 ZAUWAZONE.md. */
.as-hero__pole:focus-visible {
	outline: 2px solid var(--as-green);
	outline-offset: -1px;
}

.as-hero__skanuj {
	height: 50px;
	padding: 0 20px;
	background: var(--as-green);
	color: #fff;
	border: 1px solid var(--as-green);
	font-weight: 600;
	font-size: 14.5px;
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--as-t);
}

.as-hero__skanuj:hover {
	background: var(--as-green-hover);
}

.as-hero__podpowiedz {
	padding: 12px 22px 4px;
	font-size: 9.5px;
	color: var(--as-mono-faint);
	letter-spacing: 0.1em;
}

.as-hero__kanaly {
	list-style: none;
	padding: 0 22px;
}

.as-hero__kanal {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 11px 0;
	border-bottom: 1px solid #ece9e0; /* hairline listy skanu — jaśniejszy od --as-line (prototyp) */
}

.as-hero__kanal-nr {
	font-size: 10px;
	color: var(--as-mono-faint);
	width: 20px;
	flex: none;
}

.as-hero__kanal-nazwa {
	flex: 1;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--as-ink);
}

.as-hero__kanal-status {
	font-size: 9.5px;
	width: 54px;
	text-align: right;
}

/* Kropka kanału w spoczynku: pusty obrys (#cfcabb z prototypu); stany
   pełne/zielone/bursztynowe nadaje skrypt skanu w E3. */
.as-hero__kanal-kropka {
	width: 9px;
	height: 9px;
	flex: none;
	background: transparent;
	border: 1px solid #cfcabb;
}

/* --- Skan (E3): stany wierszy nadaje skan.js, teksty statusów jadą
   z data-* karty; kropka aktywna miga asBlink .7 s jak w prototypie. --- */

@keyframes asBlink {
	0%,
	100% {
		opacity: 0.2;
	}

	50% {
		opacity: 1;
	}
}

.as-hero__kanal--aktywny .as-hero__kanal-status {
	color: var(--as-mono-faint);
}

.as-hero__kanal--aktywny .as-hero__kanal-kropka {
	background: var(--as-green);
	border-color: var(--as-green);
	animation: asBlink 0.7s ease-in-out infinite;
}

.as-hero__kanal--widoczny .as-hero__kanal-status {
	color: var(--as-green);
}

.as-hero__kanal--widoczny .as-hero__kanal-kropka {
	background: var(--as-green);
	border-color: var(--as-green);
}

.as-hero__kanal--brak .as-hero__kanal-status {
	color: var(--as-amber);
}

.as-hero__kanal--brak .as-hero__kanal-kropka {
	background: var(--as-amber);
	border-color: var(--as-amber);
}

/* Blok wyniku: w DOM od E3, ukryty do końca sekwencji; wartości
   z bloku wyniku prototypu (liczba, podpis, komunikat, CTA 50 px). */
.as-hero__wynik[hidden] {
	display: none;
}

.as-hero__wynik {
	margin: 4px 22px 0;
	padding: 20px 0 24px;
	border-top: 1px solid var(--as-ink);
}

.as-hero__wynik-rzad {
	display: flex;
	align-items: baseline;
	gap: 14px;
}

.as-hero__wynik-liczba {
	font-weight: 700;
	font-size: clamp(36px, 3.6vw, 52px);
	line-height: 1;
	color: var(--as-ink);
}

.as-hero__wynik-podpis {
	font-size: 14px;
	line-height: 1.25;
	color: var(--as-muted);
	max-width: 22ch;
}

.as-hero__wynik-tekst {
	margin-top: 14px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--as-ink);
	max-width: 42ch;
}

.as-hero__wynik-cta {
	margin-top: 18px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 50px;
	padding: 0 22px;
	background: var(--as-green);
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	transition: background var(--as-t);
}

.as-hero__wynik-cta:hover {
	background: var(--as-green-hover);
}

.as-hero__nota {
	margin-top: 12px;
	font-size: 9px;
	color: var(--as-mono-faint);
	line-height: 1.6;
	letter-spacing: 0.06em;
}

@media (max-width: 860px) {
	.as-hero__grid {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}

	/* Twarde łamania H1 to decyzja typograficzna na szeroki ekran; na wąskim
	   zawinięcie między nimi zostawia sierotę „tam," — poniżej 860 px tekst
	   łamie się naturalnie (poprawka N1 punktu kontrolnego; ROZNICE.md 15). */
	.as-hero__naglowek br {
		display: none;
	}
}

/* Sekcja mapy: gradient 180deg #101e2b → #0b1722 (prototyp Home v2, #mapa). */
.as-mapa {
	background: linear-gradient(180deg, var(--as-navy-map) 0%, var(--as-navy-hi) 100%);
	color: #fff;
	border-bottom: 1px solid var(--as-ink);
}

/* --- Mapa punktów styku: stan spoczynkowy (wartości: prototyp Home v2,
   sekcja #mapa, stany „idle"). Jedyne ruchome wartości to --cx/--cy na
   .as-mapa__pole — E3 animuje mapę zmiennymi i klasami stanów, bez zmian
   w znacznikach. Zero animacji w E2. --- */

.as-mapa__szczyt {
	gap: clamp(20px, 2.5vw, 40px);
	padding-top: clamp(40px, 4.5vw, 72px);
	align-items: end;
}

.as-mapa__tytul {
	grid-column: 1 / span 7;
	font-weight: 600;
	font-size: clamp(28px, 3.4vw, 54.4px);
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: #fff;
	text-wrap: balance;
}

.as-mapa__tytul span {
	color: var(--as-mint);
}

.as-mapa__nota {
	grid-column: 9 / span 4;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	padding-top: 16px;
}

.as-mapa__nota p {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--as-navy-text-3);
}

.as-mapa__nota b {
	color: #fff;
	font-weight: 600;
}

/* Pole 1600/720 z ciemnym reflektorem u góry (kolory tła pola z prototypu). */
.as-mapa__pole {
	position: relative;
	width: 100%;
	aspect-ratio: 1600 / 720;
	min-height: 380px;
	margin: clamp(28px, 3vw, 48px) 0 clamp(20px, 2vw, 32px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: radial-gradient(120% 130% at 50% -8%, #1c3a55 0%, #102536 42%, #0a1622 100%);
	overflow: hidden;
	touch-action: pan-y;
}

/* Reflektor pola: w spoczynku stoi na 50%/46% (wartości prototypu); E3
   prowadzi go za kursorem zmiennymi --spot-x/--spot-y. */
.as-mapa__pole::before {
	content: '';
	position: absolute;
	left: var(--spot-x, 50%);
	top: var(--spot-y, 46%);
	transform: translate(-50%, -50%);
	width: min(70%, 760px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(90, 210, 255, 0.34) 0%, rgba(70, 170, 225, 0.14) 34%, transparent 66%);
	pointer-events: none;
	z-index: 1;
	mix-blend-mode: screen;
	transition: left 0.14s ease-out, top 0.14s ease-out;
}

.as-mapa__siatka,
.as-mapa__linie {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.as-mapa__linie {
	pointer-events: none;
}

/* Linie w spoczynku: mięta 0.12, kreskowanie 3/6 — bez animacji przepływu
   (asFlow wchodzi w E3 razem z prefers-reduced-motion). */
.as-mapa__linia {
	stroke: rgba(45, 212, 160, 0.12);
	stroke-width: 0.9;
	stroke-dasharray: 3 6;
	animation: asFlow 5s linear infinite;
}

.as-mapa__wezly {
	list-style: none;
	padding: 0;
}

/* Węzeł w spoczynku: delikatny, jednolity — priorytety ukryte (ujawnia je
   dopiero interakcja E3, czytając data-priorytet). */
.as-node {
	--as-skala: 1;

	position: absolute;
	transform: translate(-50%, -50%) scale(var(--as-skala));
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 16px 9px 9px;
	background: rgba(255, 255, 255, 0.04);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	border: 1px solid rgba(255, 255, 255, 0.14);
	opacity: 0.92;
	box-shadow: 0 6px 18px -12px rgba(0, 0, 0, 0.5);
	transition: all 0.3s var(--as-ease-enter);
}

.as-mapa__kafelek {
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	color: rgba(190, 215, 228, 0.62);
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.04);
	transition: all 0.3s var(--as-ease-enter);
}

.as-nodelabel {
	display: flex;
	flex-direction: column;
	gap: 3px;
	align-items: flex-start;
}

.as-mapa__wezel-podpis {
	font-size: 9px;
	letter-spacing: 0.1em;
	color: rgba(150, 175, 195, 0.5);
}

.as-mapa__wezel-nazwa {
	font-weight: 600;
	font-size: clamp(12px, 1vw, 15px);
	color: #fff;
	white-space: nowrap;
	line-height: 1;
}

/* Środek „Decyzja klienta" — pozycja wyłącznie ze zmiennych pola. */
/* E3: rotate konsumuje --vr pisane pętlą silnika (obrót od prędkości);
   touch-action:none — bez tego przeglądarka przejmuje gest na pan-y pola
   i przerywa przeciąganie palcem; grab sygnalizuje sterowanie. */
.as-mapa__srodek {
	position: absolute;
	left: calc(var(--cx, 50) * 1%);
	top: calc(var(--cy, 50) * 1%);
	transform: translate(-50%, -50%);
	rotate: calc(var(--vr, 0) * 1deg);
	z-index: 6;
	background: linear-gradient(160deg, #16b083, #0c8a62);
	padding: 15px 26px;
	text-align: center;
	border: 1px solid var(--as-mint);
	box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25);
	user-select: none;
	touch-action: none;
	cursor: grab;
	transition: transform 0.35s var(--as-ease-pop), box-shadow 0.3s ease;
}

/* Statyczna poświata pod środkiem (pulsowanie asGlow to E3). */
.as-mapa__srodek::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(45, 212, 160, 0.1), rgba(45, 212, 160, 0.04) 55%, transparent 72%);
	pointer-events: none;
	transition: background 0.3s ease;
	animation: asGlow 3.4s ease-in-out infinite;
}

.as-mapa__srodek-nadpis {
	display: block;
	margin-bottom: 4px;
	font-size: 9px;
	color: rgba(255, 255, 255, 0.7);
}

.as-mapa__srodek-tytul {
	display: block;
	font-weight: 700;
	font-size: clamp(13px, 1.3vw, 20.8px);
	color: #fff;
	letter-spacing: -0.02em;
	line-height: 1;
}

/* Zachęta widoczna w spoczynku jak w prototypie (martwa kontrolka E2 —
   rozstrzygnięcie 4; chowaniem po chwycie i w stanie bez JS steruje E3). */
.as-mapa__srodek-zacheta {
	margin-top: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	font-size: 8.5px;
	color: rgba(255, 255, 255, 0.85);
}

/* Dymek: w znacznikach od E2 (atrybut hidden), wypełnia i pokazuje go E3. */
.as-mapa__dymek[hidden] {
	display: none;
}

/* E3: dymek zawsze w DOM — stanem rządzi klasa --otwarty (płynne pojawienie),
   treść ostatniego kanału zostaje na czas zanikania (jak w prototypie). */
.as-mapa__dymek {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(0.95);
	z-index: 7;
	width: min(280px, 44%);
	background: var(--as-card);
	border: 1px solid var(--as-ink);
	padding: 16px 18px;
	box-shadow: var(--as-shadow-mint);
	color: var(--as-ink);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.3s var(--as-ease-enter);
}

.as-mapa__dymek--otwarty {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
	pointer-events: auto;
}

.as-mapa__dymek-tag {
	display: block;
	margin-bottom: 7px;
	font-size: 9px;
	color: var(--as-green);
}

.as-mapa__dymek-tekst {
	display: block;
	font-weight: 600;
	font-size: 15.5px;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.as-mapa__dymek-cta {
	margin-top: 13px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 10px;
	color: var(--as-green);
	padding-bottom: 4px;
	border-bottom: 1px solid var(--as-green);
}

/* Pas CTA pod mapą (E3): rozwija się po pierwszym chwycie środka — §8.3
   „sprzężenie z CTA"; wzorzec i wartości z prototypu Branży, prototyp Home
   pasa nie zawiera (ROZNICE 19, ZAUWAZONE R9). */
.as-mapa__pas {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	border: 1px solid rgba(45, 212, 160, 0);
	background: rgba(45, 212, 160, 0.07);
	padding: 0 18px;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	margin-bottom: 0;
	transition: all 0.55s var(--as-ease-enter);
}

.as-mapa__pas--otwarty {
	border-color: rgba(45, 212, 160, 0.45);
	padding: 15px 18px;
	max-height: 240px;
	opacity: 1;
	margin-bottom: clamp(20px, 2vw, 28px);
}

.as-mapa__pas-tekst {
	font-size: 14.5px;
	line-height: 1.45;
	color: #d3e0ea; /* jasnobłękitny tekst pasa — wartość z prototypu Branży */
	max-width: 56ch;
}

.as-mapa__pas-tekst b {
	color: #fff;
	font-weight: 600;
}

.as-mapa__pas-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 48px;
	padding: 0 22px;
	background: var(--as-green);
	color: #fff;
	font-weight: 600;
	font-size: 14.5px;
	flex: none;
	transition: background 0.2s ease;
}

.as-mapa__pas-cta:hover {
	background: #13b884; /* hover-rozjaśnienie z prototypu (jak as-audyt__cta) */
}

.as-mapa__legenda {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	padding-bottom: clamp(36px, 4vw, 64px);
	font-size: 9.5px;
	color: var(--as-navy-mono);
}

.as-mapa__legenda-punkt {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.as-mapa__legenda-punkt::before {
	content: '';
	width: 9px;
	height: 9px;
	flex: none;
}

.as-mapa__legenda-punkt--pelny::before {
	background: var(--as-mint);
}

.as-mapa__legenda-punkt--obrys::before {
	border: 1px solid var(--as-mint);
}

.as-mapa__legenda-instrukcja {
	margin-left: auto;
	color: #4f6376; /* przygaszony błękit instrukcji — wartość z prototypu */
}

/* --- Mapa: interakcje (E3, commit 3). Wartości stanów wyliczone ze wzorów
   bloku skryptu prototypu Home v2 (t = priorytet/4): odsłona — tło węzła
   .02+t*.16, ramka .12+t*.55, opacity .4+t*.6, skala .92+t*.22, kafelek
   24+prio*9 px, tło kafelka .05+t*.28, ramka rgba(95,224,184,.16+t*.6),
   ikona rgba(150,240,210,.4+t*.6); aktywny — kafelek 34+prio*3 px, skala
   1.08; linie — stroke rgba(45,212,160,.1+t*.3), grubość .8+t*.9,
   asFlow (5−t*2) s. Skala 1–4 priorytetów to fakt techniczny handoffu. --- */

@keyframes asFlow {
	to {
		stroke-dashoffset: -24;
	}
}

@keyframes asRipple {
	0% {
		transform: translate(-50%, -50%) scale(0.2);
		opacity: 0.95;
	}

	100% {
		transform: translate(-50%, -50%) scale(3.4);
		opacity: 0;
	}
}

/* Wariant Home v2 (opacity .6↔1) — ujednolicony na cały serwis, ZAUWAZONE 5. */
@keyframes asGlow {
	0%,
	100% {
		opacity: 0.6;
	}

	50% {
		opacity: 1;
	}
}

/* Ruch w oknie 68–92 % cyklu 3 s (R2); animuje property rotate, więc
   w spoczynku wygrywa z rotate: calc(var(--vr)) — a --vr jest wtedy 0. */
@keyframes asWiggle {
	0%,
	68%,
	100% {
		rotate: 0deg;
	}

	72% {
		rotate: -5deg;
	}

	76% {
		rotate: 5deg;
	}

	80% {
		rotate: -4deg;
	}

	84% {
		rotate: 4deg;
	}

	88% {
		rotate: -2deg;
	}

	92% {
		rotate: 0deg;
	}
}

/* Pierścień przebudzenia: pozycja ze zmiennych pola; animację nadaje scena
   (restart wymaga zdjęcia i ponownego nadania — technika prototypu). */
.as-mapa__pierscien {
	position: absolute;
	left: calc(var(--cx, 50) * 1%);
	top: calc(var(--cy, 50) * 1%);
	transform: translate(-50%, -50%);
	width: 150px;
	height: 150px;
	border-radius: 50%;
	border: 2px solid rgba(45, 212, 160, 0.85);
	box-shadow: 0 0 26px rgba(45, 212, 160, 0.45);
	pointer-events: none;
	z-index: 5;
	opacity: 0;
}

/* Wiggle środka: cykl 3 s do pierwszego chwycenia. */
.as-mapa__pole:not(.as-mapa__pole--po-chwyceniu) .as-mapa__srodek {
	animation: asWiggle 3s ease-in-out infinite;
}

.as-mapa__pole--po-chwyceniu .as-mapa__srodek-zacheta {
	display: none;
}

.as-mapa__pole--chwycone .as-mapa__srodek {
	cursor: grabbing;
	transform: translate(-50%, -50%) scale(1.07);
	box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 0 8px rgba(45, 212, 160, 0.16);
}

.as-mapa__pole--chwycone .as-mapa__srodek::before {
	background: radial-gradient(circle, rgba(45, 212, 160, 0.3), rgba(45, 212, 160, 0.04) 55%, transparent 72%);
}

/* Odsłona priorytetów — węzły. Podwójny kontekst każdej reguły (E3,
   stan bez JS — kontrakt 6.3, zamyka ZAUWAZONE 12): klasa --odslona od
   sceny ALBO dokument bez as-js — mapa bez skryptów jest ilustracją
   z widocznymi priorytetami; :where zeruje wkład kontekstu, więc
   --aktywny i hover wygrywają jak dotąd. */
:where(.as-mapa__pole--odslona, html:not(.as-js) .as-mapa__pole) .as-node:where([data-priorytet='1']) {
	--as-skala: 0.975;

	background: rgba(45, 212, 160, 0.06);
	border-color: rgba(45, 212, 160, 0.26);
	opacity: 0.55;
	box-shadow: 0 8px 22px -12px rgba(0, 0, 0, 0.5);
}

:where(.as-mapa__pole--odslona, html:not(.as-js) .as-mapa__pole) .as-node:where([data-priorytet='2']) {
	--as-skala: 1.03;

	background: rgba(45, 212, 160, 0.1);
	border-color: rgba(45, 212, 160, 0.4);
	opacity: 0.7;
	box-shadow: 0 8px 22px -12px rgba(0, 0, 0, 0.5);
}

:where(.as-mapa__pole--odslona, html:not(.as-js) .as-mapa__pole) .as-node:where([data-priorytet='3']) {
	--as-skala: 1.085;

	background: rgba(45, 212, 160, 0.14);
	border-color: rgba(45, 212, 160, 0.53);
	opacity: 0.85;
	box-shadow: 0 8px 22px -12px rgba(0, 0, 0, 0.5);
}

:where(.as-mapa__pole--odslona, html:not(.as-js) .as-mapa__pole) .as-node:where([data-priorytet='4']) {
	--as-skala: 1.14;

	background: rgba(45, 212, 160, 0.18);
	border-color: rgba(45, 212, 160, 0.67);
	opacity: 1;
	box-shadow: 0 8px 22px -12px rgba(0, 0, 0, 0.5);
}

/* Odsłona — kafelki (rozmiar i nasycenie rosną z priorytetem). */
:where(.as-mapa__pole--odslona, html:not(.as-js) .as-mapa__pole) .as-node:where([data-priorytet='1']) .as-mapa__kafelek {
	width: 33px;
	height: 33px;
	color: rgba(150, 240, 210, 0.55);
	border-color: rgba(95, 224, 184, 0.31);
	background: rgba(45, 212, 160, 0.12);
}

:where(.as-mapa__pole--odslona, html:not(.as-js) .as-mapa__pole) .as-node:where([data-priorytet='2']) .as-mapa__kafelek {
	width: 42px;
	height: 42px;
	color: rgba(150, 240, 210, 0.7);
	border-color: rgba(95, 224, 184, 0.46);
	background: rgba(45, 212, 160, 0.19);
}

:where(.as-mapa__pole--odslona, html:not(.as-js) .as-mapa__pole) .as-node:where([data-priorytet='3']) .as-mapa__kafelek {
	width: 51px;
	height: 51px;
	color: rgba(150, 240, 210, 0.85);
	border-color: rgba(95, 224, 184, 0.61);
	background: rgba(45, 212, 160, 0.26);
}

:where(.as-mapa__pole--odslona, html:not(.as-js) .as-mapa__pole) .as-node:where([data-priorytet='4']) .as-mapa__kafelek {
	width: 60px;
	height: 60px;
	color: rgba(150, 240, 210, 1);
	border-color: rgba(95, 224, 184, 0.76);
	background: rgba(45, 212, 160, 0.33);
}

/* Odsłona — mono-podpisy węzłów. */
:where(.as-mapa__pole--odslona, html:not(.as-js) .as-mapa__pole) .as-node:where([data-priorytet='1']) .as-mapa__wezel-podpis {
	color: rgba(95, 224, 184, 0.55);
}

:where(.as-mapa__pole--odslona, html:not(.as-js) .as-mapa__pole) .as-node:where([data-priorytet='2']) .as-mapa__wezel-podpis {
	color: rgba(95, 224, 184, 0.7);
}

:where(.as-mapa__pole--odslona, html:not(.as-js) .as-mapa__pole) .as-node:where([data-priorytet='3']) .as-mapa__wezel-podpis {
	color: rgba(95, 224, 184, 0.85);
}

:where(.as-mapa__pole--odslona, html:not(.as-js) .as-mapa__pole) .as-node:where([data-priorytet='4']) .as-mapa__wezel-podpis {
	color: rgba(95, 224, 184, 1);
}

/* Węzeł aktywny (dokowanie magnesu / stuknięcie): wyskok krzywą pop. */
.as-mapa__pole .as-node--aktywny {
	--as-skala: 1.08;

	z-index: 5;
	background: rgba(45, 212, 160, 0.18);
	border-color: var(--as-mint);
	opacity: 1;
	box-shadow: 0 0 0 4px rgba(45, 212, 160, 0.16), 0 14px 30px -12px rgba(0, 0, 0, 0.7);
	transition: all 0.35s var(--as-ease-pop);
}

.as-mapa__pole .as-node--aktywny .as-mapa__kafelek {
	background: var(--as-mint);
	border-color: var(--as-mint);
	color: var(--as-mint-ink);
	transition: all 0.35s var(--as-ease-pop);
}

.as-mapa__pole .as-node--aktywny:where([data-priorytet='1']) .as-mapa__kafelek {
	width: 37px;
	height: 37px;
}

.as-mapa__pole .as-node--aktywny:where([data-priorytet='2']) .as-mapa__kafelek {
	width: 40px;
	height: 40px;
}

.as-mapa__pole .as-node--aktywny:where([data-priorytet='3']) .as-mapa__kafelek {
	width: 43px;
	height: 43px;
}

.as-mapa__pole .as-node--aktywny:where([data-priorytet='4']) .as-mapa__kafelek {
	width: 46px;
	height: 46px;
}

.as-mapa__pole .as-node--aktywny .as-mapa__wezel-podpis {
	color: var(--as-mint);
}

/* Węzły-przyciski (rolę nadaje skrypt — bez JS mapa jest ilustracją):
   widoczny fokus; mięta to zielony akcent w wariancie na ciemnym
   (spójność z fokusem reszty serwisu przy czytelności na granacie pola);
   kursor — wspólna reguła [role='button'] przy komponentach bazowych. */
.as-node[role='button']:focus-visible {
	outline: 2px solid var(--as-mint);
	outline-offset: 2px;
}

/* Hover węzła tylko na urządzeniach z realnym hoverem — lepki hover
   dotyku wyłączony (ROZNICE 18). */
@media (hover: hover) {
	.as-mapa__pole .as-node:hover {
		transform: translate(-50%, -50%) scale(calc(var(--as-skala) * 1.09));
		z-index: 6;
		border-color: rgba(95, 224, 184, 0.6);
		box-shadow: 0 0 0 3px rgba(45, 212, 160, 0.1), 0 14px 30px -12px rgba(0, 0, 0, 0.6);
	}
}

/* Linie przy odsłonie: jasność, grubość i tempo przepływu wg priorytetu. */
:where(.as-mapa__pole--odslona, html:not(.as-js) .as-mapa__pole) .as-mapa__linia:where([data-priorytet='1']) {
	stroke: rgba(45, 212, 160, 0.18);
	stroke-width: 1.03;
	stroke-dasharray: 3 5;
	animation-duration: 4.5s;
}

:where(.as-mapa__pole--odslona, html:not(.as-js) .as-mapa__pole) .as-mapa__linia:where([data-priorytet='2']) {
	stroke: rgba(45, 212, 160, 0.25);
	stroke-width: 1.25;
	stroke-dasharray: 3 5;
	animation-duration: 4s;
}

:where(.as-mapa__pole--odslona, html:not(.as-js) .as-mapa__pole) .as-mapa__linia:where([data-priorytet='3']) {
	stroke: rgba(45, 212, 160, 0.33);
	stroke-width: 1.48;
	stroke-dasharray: 3 5;
	animation-duration: 3.5s;
}

:where(.as-mapa__pole--odslona, html:not(.as-js) .as-mapa__pole) .as-mapa__linia:where([data-priorytet='4']) {
	stroke: rgba(45, 212, 160, 0.4);
	stroke-width: 1.7;
	stroke-dasharray: 3 5;
	animation-duration: 3s;
}

.as-mapa__pole .as-mapa__linia--aktywna {
	stroke: var(--as-mint);
	stroke-width: 2;
	stroke-dasharray: 0;
	animation-duration: 1.2s;
}

@media (max-width: 860px) {
	.as-mapa__szczyt {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}

	/* m-map z prototypu: pole wyższe niż szersze, węzły kompaktowe bez etykiet. */
	.as-mapa__pole {
		aspect-ratio: 3 / 4;
		min-height: 560px;
	}

	.as-node {
		padding: 7px;
		gap: 0;
	}

	.as-nodelabel {
		display: none;
	}

	/* Dymek dokowany (E3, commit 4): pasek przy dolnej albo górnej krawędzi
	   pola, po przeciwnej stronie niż środek — data-dok pisze scena wg
	   histerezy 42/58 silnika; bez atrybutu obowiązuje dół. */
	.as-mapa__dymek {
		left: 12px;
		right: 12px;
		top: auto;
		bottom: 12px;
		width: auto;
		padding: 13px 15px;
		transform: translateY(10px);
		transition: opacity 0.28s ease, transform 0.34s var(--as-ease-enter);
	}

	.as-mapa__pole[data-dok='gora'] .as-mapa__dymek {
		top: 12px;
		bottom: auto;
		transform: translateY(-10px);
	}

	.as-mapa__dymek--otwarty,
	.as-mapa__pole[data-dok='gora'] .as-mapa__dymek--otwarty {
		transform: translateY(0);
	}
}

.as-problem {
	background: var(--as-bg);
	border-bottom: 1px solid var(--as-ink);
}

/* --- Problem: karta z zielonym grzbietem + foto z zielonym offsetem,
   pas ośmiu etapów ścieżki decyzji, trzy karty problemów (wartości:
   prototyp Home v2, sekcja Problem). --- */

.as-problem__uklad {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 2.6vw, 40px);
	align-items: stretch;
	padding: clamp(40px, 4.5vw, 72px) 0 clamp(36px, 4vw, 56px);
}

.as-problem__karta {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--as-card);
	border: 1px solid var(--as-ink);
	padding: clamp(28px, 3vw, 48px);
}

.as-problem__karta::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background: var(--as-green);
}

.as-problem__naglowek {
	font-size: clamp(30px, 3.6vw, 57.6px);
	line-height: 1;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.as-problem__lead {
	margin-top: clamp(18px, 1.8vw, 24px);
	font-size: clamp(15px, 1.2vw, 18.5px);
	line-height: 1.6;
	color: var(--as-muted);
}

.as-problem__stopka {
	margin-top: auto;
	padding-top: clamp(24px, 2.5vw, 36px);
	display: flex;
	align-items: baseline;
	gap: 16px;
}

.as-problem__liczba {
	font-weight: 700;
	font-size: clamp(30px, 3vw, 46px);
	line-height: 1;
	color: var(--as-green);
	letter-spacing: -0.03em;
}

.as-problem__liczba-podpis {
	font-size: 10px;
	color: var(--as-mono-muted);
	line-height: 1.5;
}

/* Zielony blok przesunięty 14px za ramą zdjęcia (prototyp: span absolute). */
.as-problem__foto {
	position: relative;
}

.as-problem__foto::before {
	content: '';
	position: absolute;
	top: 14px;
	left: 14px;
	right: -14px;
	bottom: -14px;
	background: var(--as-green);
	z-index: 0;
}

.as-problem__foto-rama {
	position: relative;
	z-index: 1;
	height: 100%;
	min-height: clamp(320px, 30vw, 440px);
	border: 1px solid var(--as-ink);
	background: var(--as-ink);
	padding: 8px;
}

.as-problem__zdjecie {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.as-problem__sciezka {
	display: flex;
	align-items: stretch;
	border-top: 1px solid var(--as-ink);
	border-bottom: 1px solid var(--as-ink);
	flex-wrap: wrap;
}

.as-problem__etap {
	flex: 1 1 0;
	min-width: 120px;
	padding: 22px 18px;
	border-right: 1px solid var(--as-line);
	display: flex;
	flex-direction: column;
	gap: 18px;
	transition: background var(--as-t);
}

.as-problem__etap:hover {
	background: #ecebe3; /* podświetlenie komórki ścieżki (prototyp) */
}

.as-problem__etap-nr {
	font-size: 10.5px;
	color: var(--as-mono-faint);
}

.as-problem__etap-nazwa {
	font-size: clamp(15px, 1.3vw, 20px);
	font-weight: 600;
	line-height: 1.1;
}

.as-problem__karty {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	padding-bottom: clamp(40px, 5vw, 80px);
}

.as-problem__wpis {
	padding: clamp(28px, 3vw, 48px) clamp(20px, 2vw, 32px) 0;
	border-right: 1px solid var(--as-line);
}

.as-problem__wpis-nr {
	font-size: 11px;
	color: var(--as-green);
}

.as-problem__wpis-tytul {
	margin-top: 18px;
	font-size: clamp(20px, 1.7vw, 26px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.as-problem__wpis-opis {
	margin-top: 14px;
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--as-muted);
}

@media (max-width: 860px) {
	.as-problem__uklad,
	.as-problem__karty {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.as-problem__uklad {
		gap: 28px;
	}

	/* m-flatb z prototypu: karty problemów tracą boczne ramki w stosie. */
	.as-problem__wpis {
		border-left: none;
		border-right: none;
	}
}

/* Sekcje System i Audyt: solid #0c1822 (prototyp Home v2). */
.as-system,
.as-audyt {
	background: var(--as-navy-slim);
	color: #fff;
	border-bottom: 1px solid var(--as-ink);
}

/* --- System: baner foto z duotone, lista sześciu kroków + panel szczegółu
   (pierwszy krok aktywny z serwera; przełączanie klas --aktywny to E3),
   wspólna oś etapów, chipy narzędzi (wartości: prototyp Home v2, #system).
   Zero animacji w E2 — glow aktywnej kropki to statyczny box-shadow. --- */

.as-system__baner {
	position: relative;
	margin-top: clamp(28px, 3vw, 44px);
	border: 1px solid var(--as-navy-border);
	overflow: hidden;
	min-height: clamp(300px, 34vw, 440px);
	display: flex;
	align-items: flex-end;
}

.as-system__zdjecie {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* Duotone nakładkami gradientowymi jak w prototypie — nie przeróbką pliku
   (brief E2, sekcja „Zdjęcia"). Trzy warstwy: przyciemnienie 110deg,
   dociążenie dołu, zielony soft-light. */
.as-system__baner::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(0deg, rgba(11, 23, 34, 0.6) 0%, transparent 55%),
		linear-gradient(110deg, rgba(11, 23, 34, 0.86) 0%, rgba(11, 23, 34, 0.55) 46%, rgba(11, 23, 34, 0.22) 100%);
}

.as-system__baner::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: var(--as-green);
	mix-blend-mode: soft-light;
	opacity: 0.35;
}

.as-system__baner-tresc {
	position: relative;
	z-index: 2;
	padding: clamp(28px, 4vw, 56px);
	max-width: 760px;
}

.as-system__naglowek {
	font-size: clamp(30px, 4.6vw, 72px);
	line-height: 0.98;
	letter-spacing: -0.03em;
	color: #fff;
	max-width: 16ch;
	text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
}

.as-system__uklad {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	margin-top: clamp(40px, 5vw, 72px);
	padding-bottom: clamp(40px, 5vw, 80px);
}

.as-system__kroki {
	grid-column: 1 / span 5;
	border-right: 1px solid rgba(255, 255, 255, 0.18);
	list-style: none;
	padding: 0;
}

.as-system__krok {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: clamp(20px, 2vw, 32px) clamp(8px, 1vw, 16px) clamp(20px, 2vw, 32px) 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	transition: padding-left var(--as-t);
}

.as-system__krok--aktywny {
	padding-left: 14px;
}

/* Fokus wierszy i punktów Systemu (przyciski od E3) — mięta na ciemnym. */
.as-system :where([role='button']):focus-visible {
	outline: 2px solid var(--as-mint);
	outline-offset: 2px;
}

.as-system__krok-nr {
	font-size: 12px;
	flex: none;
	width: 26px;
	color: var(--as-navy-mono);
	transition: color var(--as-t);
}

.as-system__krok--aktywny .as-system__krok-nr {
	color: var(--as-mint);
}

.as-system__krok-tytul {
	flex: 1;
	font-weight: 700;
	font-size: clamp(20px, 2vw, 32px);
	letter-spacing: -0.03em;
	line-height: 1;
	color: #5e7184; /* wygaszony tytuł nieaktywnego kroku (prototyp) */
	transition: color var(--as-t);
}

.as-system__krok--aktywny .as-system__krok-tytul {
	color: #fff;
}

.as-system__krok-znacznik {
	width: 9px;
	height: 9px;
	flex: none;
	border: 1px solid rgba(255, 255, 255, 0.25);
	transition: background var(--as-t);
}

.as-system__krok--aktywny .as-system__krok-znacznik {
	background: var(--as-mint);
	border-color: var(--as-mint);
}

.as-system__szczegoly {
	grid-column: 6 / span 7;
	padding: clamp(28px, 3vw, 48px) 0 0 clamp(28px, 3vw, 48px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 380px;
}

/* Sześć paneli w DOM — widoczny wyłącznie aktywny (treść dla E3 już tu jest). */
.as-system__panel {
	display: none;
}

.as-system__panel--aktywny {
	display: block;
}

.as-system__etap {
	font-size: 11px;
	color: var(--as-mint);
}

.as-system__panel-grid {
	margin-top: 18px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 2.5vw, 40px);
	align-items: start;
}

.as-system__panel-tytul {
	font-weight: 700;
	font-size: clamp(34px, 3.6vw, 57.6px);
	line-height: 0.96;
	letter-spacing: -0.03em;
	color: #fff;
}

.as-system__panel-opis {
	font-size: clamp(16px, 1.25vw, 19px);
	line-height: 1.6;
	color: var(--as-navy-text);
}

.as-system__os {
	position: relative;
	margin-top: clamp(28px, 3.5vw, 52px);
	min-height: clamp(150px, 15vw, 200px);
	display: flex;
	align-items: center;
}

/* Cyfra-duch aktywnego etapu za osią. */
.as-system__duch {
	display: none;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-54%);
	font-weight: 800;
	font-size: clamp(130px, 17vw, 240px);
	line-height: 0.8;
	color: rgba(45, 212, 160, 0.07);
	letter-spacing: -0.05em;
	pointer-events: none;
	z-index: 0;
}

.as-system__duch--aktywny {
	display: block;
}

.as-system__tor {
	position: absolute;
	top: calc(50% - 14px);
	left: 6%;
	right: 6%;
	height: 1px;
	background: rgba(255, 255, 255, 0.16);
}

/* Pasek postępu osi: szerokość w E2 stała (krok pierwszy = 0%); E3 steruje
   zmienną --postep na osi. */
.as-system__postep {
	position: absolute;
	top: calc(50% - 14px);
	left: 6%;
	width: calc((100% - 12%) * var(--postep, 0) / 100);
	height: 1px;
	background: var(--as-mint);
	box-shadow: 0 0 10px rgba(45, 212, 160, 0.7);
}

.as-system__punkt {
	position: relative;
	z-index: 1;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.as-system__punkt-kropka {
	width: 16px;
	height: 16px;
	flex: none;
	transform: rotate(45deg);
	background: #0f2336; /* nieaktywny romb osi (prototyp) */
	border: 1px solid rgba(255, 255, 255, 0.28);
	transition: background var(--as-t);
}

.as-system__punkt--aktywny .as-system__punkt-kropka {
	background: var(--as-mint);
	border-color: var(--as-mint);
	box-shadow: 0 0 0 6px rgba(45, 212, 160, 0.16), 0 0 22px rgba(45, 212, 160, 0.6);
}

.as-system__punkt-nr {
	font-size: 11px;
	letter-spacing: 0.12em;
	color: #41566a; /* wygaszony numer osi (prototyp) */
}

.as-system__punkt--aktywny .as-system__punkt-nr {
	color: var(--as-mint);
}

.as-system__narzedzia {
	margin-top: 36px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.as-system__narzedzia-naglowek {
	font-size: 10.5px;
	color: var(--as-navy-mono);
	margin-bottom: 14px;
}

.as-system__chipy {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.as-system__chip {
	font-size: 13px;
	font-weight: 500;
	color: #cfe0ec; /* jasny błękit chipów (prototyp) */
	padding: 8px 14px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	transition: border-color var(--as-t), color var(--as-t);
}

.as-system__chip:hover {
	border-color: var(--as-mint);
	color: #fff;
}

@media (max-width: 860px) {
	.as-system__uklad {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}

	/* m-flatb/m-flatx z prototypu: kolumny tracą boczne ramki i lewy padding. */
	.as-system__kroki {
		border-right: none;
	}

	.as-system__szczegoly {
		padding-left: 0;
	}

	.as-system__panel-grid {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}
}

.as-branze {
	background: var(--as-bg);
	border-bottom: 1px solid var(--as-ink);
}

/* --- Branże: selektor czterech case'ów + panel (pierwszy aktywny z serwera;
   przełączanie klas --aktywny to E3) i obowiązkowy pas „Pracujemy ze
   wszystkimi…" (§7.3). Wartości: prototyp Home v2, sekcja #branze. --- */

.as-branze__szczyt {
	gap: clamp(16px, 2vw, 32px);
	padding: clamp(40px, 4.5vw, 72px) 0 clamp(32px, 3.5vw, 52px);
	align-items: end;
}

.as-branze__naglowek {
	grid-column: 1 / span 7;
	font-size: clamp(30px, 4.2vw, 64px);
	line-height: 1;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.as-branze__nota {
	grid-column: 9 / span 4;
	font-size: 15px;
	line-height: 1.6;
	color: var(--as-muted);
	border-left: 1px solid var(--as-ink);
	padding-left: 24px;
}

.as-branze__nota b {
	color: var(--as-ink);
	font-weight: 600;
}

.as-branze__nota span {
	color: var(--as-green);
	font-weight: 600;
}

.as-branze__uklad {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 0;
	border-top: 1px solid var(--as-ink);
	padding-bottom: clamp(40px, 5vw, 72px);
}

.as-branze__selektor {
	grid-column: 1 / span 5;
	border-right: 1px solid var(--as-ink);
	list-style: none;
	padding: 0;
}

.as-branze__wiersz {
	display: grid;
	grid-template-columns: 40px 1fr auto;
	align-items: center;
	gap: 18px;
	border-bottom: 1px solid var(--as-line);
	padding: clamp(20px, 2vw, 30px) 0;
	transition: padding-left 0.3s var(--as-ease-enter), background var(--as-t);
}

.as-branze__wiersz--aktywny {
	padding-left: 18px;
	background: #ecebe3; /* tło aktywnego wiersza (prototyp) */
}

/* Fokus wierszy selektora Branż (przyciski od E3) — zieleń na jasnym. */
.as-branze__wiersz[role='button']:focus-visible {
	outline: 2px solid var(--as-green);
	outline-offset: 2px;
}

.as-branze__wiersz-nr {
	font-size: 12px;
	letter-spacing: 0.1em;
	color: var(--as-mono-faint);
}

.as-branze__wiersz--aktywny .as-branze__wiersz-nr {
	color: var(--as-green);
}

.as-branze__wiersz-teksty {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.as-branze__wiersz-nazwa {
	font-weight: 700;
	font-size: clamp(19px, 1.9vw, 30px);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--as-mono-faint);
	transition: color var(--as-t);
}

.as-branze__wiersz--aktywny .as-branze__wiersz-nazwa {
	color: var(--as-ink);
}

.as-branze__wiersz-claim {
	font-size: 13.5px;
	color: var(--as-green);
	font-weight: 600;
}

.as-branze__wiersz-znacznik {
	width: 9px;
	height: 9px;
	flex: none;
	border: 1px solid #c7c2b6; /* obrys nieaktywnego znacznika (prototyp) */
	transition: background var(--as-t);
}

.as-branze__wiersz--aktywny .as-branze__wiersz-znacznik {
	background: var(--as-green);
	border-color: var(--as-green);
}

/* Klikalność wierszy selektora (E8, P7): kursor i hover tylko przy
   działających skryptach — bez as-js wiersze nie są przyciskami (kontrakt
   6.3); hover to tło jaśniejsze od aktywnego i nazwa w atramencie; ognisko
   klawiatury — reguła focus-visible wyżej (E3). Prototyp Home v2 nie daje
   wierszom żadnego sygnału klikalności (ROZNICE 36). */
.as-js .as-branze__wiersz[role='button'] {
	cursor: pointer;
}

@media (hover: hover) {
	.as-js .as-branze__wiersz[role='button']:hover:not(.as-branze__wiersz--aktywny) {
		background: #f0efe8; /* tło hover wiersza — jaśniejsze od aktywnego #ecebe3; wartość z E5 (tło biegnącego segmentu) */
	}

	.as-js .as-branze__wiersz[role='button']:hover .as-branze__wiersz-nazwa {
		color: var(--as-ink);
	}
}

/* Odnośnik do landingu w aktywnym wierszu (E8, P7 wariant b — U22; forma B
   z rundy poprawek odbioru): chip obrysowy jak chipy hero /audyt — mono 11 px,
   ramka 1 px w zieleni, 36 px wysokości, po najechaniu wypełnia się zielenią.
   Pierwsza forma (mono 10 px z kreską 1 px) była na żywej stronie niezauważalna.
   W wierszach nieaktywnych ukryty — przełącza go klasa --aktywny, panele.js
   bez zmian. */
.as-branze__wiersz-odnosnik {
	display: none;
	align-items: center;
	gap: 9px;
	align-self: flex-start;
	height: 36px;
	padding: 0 13px;
	margin-top: 4px;
	border: 1px solid var(--as-green);
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--as-green);
	transition: background var(--as-t), color var(--as-t);
}

.as-branze__wiersz--aktywny .as-branze__wiersz-odnosnik {
	display: inline-flex;
}

.as-branze__wiersz-odnosnik:hover {
	background: var(--as-green);
	color: #fff;
}

.as-branze__panele {
	grid-column: 6 / span 7;
}

/* Cztery panele w DOM — widoczny wyłącznie aktywny (treść dla E3 już tu jest). */
.as-branze__panel {
	display: none;
	position: relative;
	padding: clamp(28px, 3vw, 44px) 0 clamp(28px, 3vw, 40px) clamp(28px, 3vw, 48px);
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 3vw, 48px);
	align-items: center;
	overflow: hidden;
}

.as-branze__panel--aktywny {
	display: grid;
}

.as-branze__watermark {
	position: absolute;
	right: -10px;
	bottom: -30px;
	opacity: 0.05;
	pointer-events: none;
	z-index: 0;
	color: var(--as-ink);
}

.as-branze__esencja {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.as-branze__emblemat-rzad {
	display: flex;
	align-items: center;
	gap: 12px;
}

.as-branze__emblemat {
	width: 46px;
	height: 46px;
	flex: none;
	border: 1px solid var(--as-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--as-green);
}

.as-branze__przyklad {
	font-size: 10px;
	color: var(--as-mono-faint);
}

.as-branze__claim {
	margin-top: 20px;
	font-weight: 700;
	font-size: clamp(24px, 2.5vw, 40px);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--as-ink);
	text-wrap: balance;
}

.as-branze__lead {
	margin-top: 18px;
	font-size: clamp(14.5px, 1.1vw, 17px);
	line-height: 1.6;
	color: var(--as-muted);
}

.as-branze__cta {
	margin-top: clamp(26px, 2.6vw, 36px);
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 54px;
	padding: 0 26px;
	background: var(--as-ink);
	color: #fff;
	font-weight: 600;
	font-size: 15.5px;
	transition: background var(--as-t);
}

.as-branze__cta:hover {
	background: var(--as-green);
}

.as-branze__zapytania {
	position: relative;
	z-index: 1;
}

.as-branze__szuka {
	font-size: 10px;
	color: var(--as-mono-faint);
}

.as-branze__zapytania-lista {
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.as-branze__zapytanie {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--as-ink);
	opacity: 0.6;
}

.as-branze__zapytanie svg {
	flex: none;
	color: var(--as-ink);
}

.as-branze__zapytanie--pierwsze {
	box-shadow: 5px 5px 0 var(--as-green);
	opacity: 1;
}

.as-branze__zapytanie-tekst {
	flex: 1;
	font-size: clamp(13px, 1vw, 15px);
	color: var(--as-ink);
	font-weight: 500;
	line-height: 1.2;
}

.as-branze__zapytanie-ty {
	font-size: 9.5px;
	color: var(--as-green);
	flex: none;
}

.as-branze__podsumowanie {
	margin-top: 16px;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--as-muted);
}

.as-branze__podsumowanie b {
	color: var(--as-ink);
	font-weight: 600;
}

/* Pas „Pracujemy ze wszystkimi…" — pełna szerokość sekcji, własny gutter. */
.as-branze__pas {
	border-top: 1px solid var(--as-ink);
}

.as-branze__pas-uklad {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: clamp(24px, 3vw, 48px);
	align-items: center;
	padding: clamp(30px, 3.4vw, 52px) var(--as-gutter);
	max-width: var(--as-max-w); /* własny gutter zamiast .as-shell — ta sama rama (droga A) */
	margin-left: auto;
	margin-right: auto;
}

.as-branze__pas-kicker-rzad {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.as-branze__pas-kicker {
	font-size: 10px;
	color: var(--as-green);
}

.as-branze__pas-kreska {
	flex: 1;
	height: 1px;
	background: var(--as-line);
	max-width: 90px;
}

.as-branze__pas-naglowek {
	font-weight: 700;
	font-size: clamp(22px, 2.6vw, 40px);
	line-height: 1.02;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.as-branze__pas-opis {
	margin-top: 14px;
	font-size: clamp(14.5px, 1.1vw, 17px);
	line-height: 1.6;
	color: var(--as-muted);
	max-width: 64ch;
}

@media (max-width: 860px) {
	.as-branze__szczyt,
	.as-branze__uklad,
	.as-branze__panel--aktywny,
	.as-branze__pas-uklad {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}

	.as-branze__szczyt {
		align-items: stretch;
	}

	/* m-flatb/m-flatx z prototypu: kolumny tracą boczne ramki i lewy padding. */
	.as-branze__selektor {
		border-right: none;
	}

	.as-branze__panel {
		padding-left: 0;
	}

	.as-branze__pas-uklad .as-btn--outline {
		align-self: flex-start;
	}
}

/* --- Audyt: H2 + lead + CTA po lewej, lista A1–A4 przy pionowym hairline
   po prawej (wartości: prototyp Home v2, sekcja #audyt). --- */

.as-audyt__uklad {
	gap: clamp(16px, 2vw, 32px);
	padding: clamp(44px, 5vw, 80px) 0;
}

.as-audyt__tresc {
	grid-column: 1 / span 7;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
}

.as-audyt__naglowek {
	font-weight: 700;
	font-size: clamp(30px, 4.2vw, 67.2px);
	line-height: 0.96;
	letter-spacing: -0.03em;
	color: #fff;
}

.as-audyt__lead {
	font-size: clamp(16px, 1.4vw, 19px);
	line-height: 1.55;
	color: var(--as-navy-text);
	margin-bottom: 30px;
}

/* CTA sekcji: 56px i rozjaśnienie #13b884 na hover — wartości prototypu
   (na ciemnym tle przycisk jaśnieje zamiast ciemnieć). */
.as-audyt__cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 56px;
	padding: 0 26px;
	background: var(--as-green);
	color: #fff;
	font-weight: 600;
	font-size: 16px;
	transition: background var(--as-t);
}

.as-audyt__cta:hover {
	background: #13b884;
}

.as-audyt__lista {
	grid-column: 8 / span 5;
	border-left: 1px solid rgba(255, 255, 255, 0.18);
	list-style: none;
	padding: 0;
}

.as-audyt__pozycja {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 22px 0 22px clamp(20px, 2vw, 32px);
	border-bottom: 1px solid var(--as-navy-line);
}

.as-audyt__pozycja-nr {
	font-size: 11px;
	color: var(--as-mint);
	flex: none;
}

.as-audyt__pozycja-etykieta {
	font-size: clamp(15px, 1.3vw, 18px);
	font-weight: 500;
	color: #e6eef4; /* jasny tekst listy audytu (prototyp) */
}

@media (max-width: 860px) {
	.as-audyt__uklad {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}

	/* m-flatx z prototypu: lista traci pionowy hairline i lewy padding. */
	.as-audyt__lista {
		border-left: none;
	}

	.as-audyt__pozycja {
		padding-left: 0;
	}
}

.as-proces {
	background: var(--as-bg);
	border-bottom: 1px solid var(--as-ink);
}

/* --- Proces: H2 + lead obok statycznego wykresu SVG (animacje przepływu
   i pulsu to E3 — pierścień pulsu ukryty), cztery kroki z dużymi numerami
   (wartości: prototyp Home v2, sekcja Proces). --- */

.as-proces__szczyt {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 3.5vw, 56px);
	align-items: center;
	padding: clamp(40px, 4.5vw, 72px) 0 clamp(28px, 3vw, 44px);
}

.as-proces__naglowek {
	font-size: clamp(30px, 4.2vw, 64px);
	line-height: 1;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.as-proces__lead {
	margin-top: clamp(18px, 1.8vw, 24px);
	font-size: clamp(15px, 1.2vw, 18px);
	line-height: 1.6;
	color: var(--as-muted);
}

.as-proces__wykres {
	position: relative;
	width: 100%;
}

.as-proces__os-etykieta {
	position: absolute;
	top: 0;
	left: 0;
	font-size: 9px;
	color: var(--as-mono-faint);
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	letter-spacing: 0.1em;
}

.as-proces__svg {
	width: 100%;
	height: clamp(160px, 18vw, 240px);
	display: block;
	overflow: visible;
}

/* Pierścień pulsu przy ostatnim punkcie — element czeka na animację E3. */
/* E3: pierścień pulsu odkryty i animowany jak w prototypie (asPulseRing
   2.4 s na końcu ścieżki); transform-box:fill-box daje środek obrotu we
   własnym kółku SVG. Przepływ: asFlow 2.8 s po przerywanej ścieżce. */
@keyframes asPulseRing {
	0% {
		transform: scale(0.6);
		opacity: 0.9;
	}

	100% {
		transform: scale(1.7);
		opacity: 0;
	}
}

.as-proces__puls {
	transform-box: fill-box;
	transform-origin: center;
	animation: asPulseRing 2.4s ease-out infinite;
}

.as-proces__przeplyw {
	animation: asFlow 2.8s linear infinite;
}

.as-proces__numery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin-top: 14px;
}

.as-proces__numery span {
	text-align: center;
	font-size: 10px;
	color: var(--as-green);
}

.as-proces__kroki {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid var(--as-ink);
	padding-bottom: clamp(40px, 5vw, 80px);
}

.as-proces__krok {
	padding: clamp(28px, 2.6vw, 41.6px) clamp(18px, 1.6vw, 25.6px) 0;
	border-right: 1px solid var(--as-line);
}

.as-proces__krok-nr {
	font-weight: 700;
	font-size: clamp(40px, 4vw, 64px);
	color: var(--as-line);
	line-height: 1;
}

.as-proces__krok-tytul {
	margin-top: 14px;
	font-size: clamp(18px, 1.5vw, 24px);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.as-proces__krok-opis {
	margin-top: 12px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--as-muted);
}

@media (max-width: 860px) {
	.as-proces__szczyt,
	.as-proces__kroki {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}

	/* m-flatb z prototypu: kroki tracą boczne ramki w stosie. */
	.as-proces__krok {
		border-left: none;
		border-right: none;
	}
}

/* CTA końcowe: solid #0a1622 z siatką i zieloną łuną w tle (SVG), lewa
   kolumna z kickerem/H2/przyciskami/zapewnieniami, prawa karta przykładowego
   wyniku z paskami siły (wartości: prototyp Home v2, sekcja #kontakt).
   Paski w docelowych szerokościach — animacja od lewej to E3. --- */
.as-cta {
	position: relative;
	background: var(--as-navy);
	color: #fff;
	border-bottom: 1px solid var(--as-ink);
	overflow: hidden;
}

.as-cta__tlo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

.as-cta__uklad {
	position: relative;
	z-index: 1;
	padding: clamp(64px, 7vw, 112px) var(--as-gutter);
	max-width: var(--as-max-w); /* własny gutter zamiast .as-shell — ta sama rama (droga A) */
	margin-left: auto;
	margin-right: auto;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(36px, 5vw, 80px);
	align-items: center;
}

.as-cta__kicker {
	font-size: 11px;
	color: var(--as-mint);
	letter-spacing: 0.16em;
}

.as-cta__naglowek {
	margin-top: clamp(20px, 2vw, 28px);
	font-weight: 700;
	font-size: clamp(36px, 4.6vw, 73.6px);
	line-height: 0.94;
	letter-spacing: -0.04em;
	color: #fff;
	text-wrap: balance;
}

.as-cta__naglowek span {
	color: var(--as-mint);
}

.as-cta__lead {
	margin-top: clamp(20px, 2vw, 28px);
	font-size: clamp(16px, 1.4vw, 20px);
	line-height: 1.55;
	color: var(--as-navy-text-2);
	max-width: 46ch;
}

.as-cta__przyciski {
	margin-top: clamp(32px, 3.2vw, 44px);
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

/* Główny przycisk 68px z miękkim zielonym cieniem; hover-rozjaśnienie
   #13b884 i uniesienie -2px — wartości prototypu. */
.as-cta__glowny {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	height: 68px;
	padding: 0 34px;
	background: var(--as-green);
	color: #fff;
	font-weight: 700;
	font-size: clamp(16px, 1.4vw, 19px);
	box-shadow: 0 16px 40px -14px rgba(14, 155, 111, 0.7);
	transition: background var(--as-t), transform var(--as-t);
}

.as-cta__glowny:hover {
	background: #13b884;
	transform: translateY(-2px);
}

.as-cta__telefon {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 68px;
	padding: 0 30px;
	border: 1px solid rgba(255, 255, 255, 0.32);
	color: #fff;
	font-weight: 600;
	font-size: clamp(15px, 1.2vw, 17px);
	transition: background var(--as-t), border-color var(--as-t);
}

.as-cta__telefon:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: #fff;
}

.as-cta__zapewnienia {
	margin-top: clamp(26px, 2.6vw, 34px);
	display: flex;
	gap: clamp(18px, 2vw, 32px);
	flex-wrap: wrap;
}

.as-cta__zapewnienie {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	color: #9fb3c4; /* przygaszony błękit zapewnień (prototyp) */
	white-space: nowrap;
}

.as-cta__zapewnienie svg {
	color: var(--as-mint);
	flex: none;
}

.as-cta__karta {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--as-navy-border);
	padding: clamp(24px, 2.4vw, 34px);
}

.as-cta__karta-szczyt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--as-navy-line);
}

.as-cta__karta-naglowek {
	font-size: 10px;
	color: var(--as-navy-mono);
}

.as-cta__wynik {
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.as-cta__wynik-liczba {
	font-weight: 700;
	font-size: clamp(22px, 2vw, 30px);
	color: #fff;
	line-height: 1;
}

.as-cta__wynik-podpis {
	font-size: 9px;
	color: var(--as-navy-mono);
}

.as-cta__paski {
	margin-top: 8px;
	list-style: none;
	padding: 0;
}

.as-cta__pasek {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.as-cta__pasek-nazwa {
	width: 96px;
	flex: none;
	font-size: 13.5px;
	color: #e4edf4; /* jasny tekst nazw kanałów (prototyp) */
}

.as-cta__pasek-tor {
	flex: 1;
	height: 5px;
	background: rgba(255, 255, 255, 0.1);
}

/* Skala siły — jedna paleta na cały serwis (rozstrzygnięcie 1 briefu E2):
   mocny mięta / średni bursztyn / słaby czerwień, progi z config/site.php. */
/* E3: wjazd pasków od lewej przy wejściu sekcji w widok (~0,8 s po
   --as-ease-bar, §5.3; prototyp Home miał martwe przejście width bez
   wyzwalacza — ROZNICE 20). Stan startowy tylko przy działających
   skryptach; klasę --widoczne nadaje animacje.js, wyłącznik reduce
   ścina przejście do zera. */
.as-cta__pasek-sila {
	display: block;
	height: 100%;
	transform-origin: left;
	transition: transform 0.8s var(--as-ease-bar);
}

.as-js .as-cta__paski:not(.as-cta__paski--widoczne) .as-cta__pasek-sila {
	transform: scaleX(0);
}

.as-cta__pasek-sila--mocny {
	background: var(--as-mint);
}

.as-cta__pasek-sila--sredni {
	background: var(--as-amber);
}

.as-cta__pasek-sila--slaby {
	background: var(--as-red);
}

.as-cta__pasek-slowo {
	font-size: 9.5px;
	letter-spacing: 0.04em;
	width: 46px;
	text-align: right;
	flex: none;
}

.as-cta__pasek-slowo--mocny {
	color: var(--as-mint);
}

.as-cta__pasek-slowo--sredni {
	color: var(--as-amber);
}

.as-cta__pasek-slowo--slaby {
	color: var(--as-red);
}

@media (max-width: 860px) {
	.as-cta__uklad {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}
}

/* P3 (PROPOZYCJE.md; osobny commit do ewentualnego wycofania): tekstowy
   odnośnik do audytu pod kartą skanu — na telefonie pierwszy „Zamów audyt"
   jest kilka ekranów niżej. Wyłącznie ≤ 860 px; etykieta z pola. */
.as-hero__audyt-link {
	display: none;
}

@media (max-width: 860px) {
	.as-hero__audyt-link {
		display: flex;
		width: max-content;
		align-items: center;
		gap: 7px;
		margin: 14px auto 0;
		font-size: 11px;
		color: var(--as-green);
		padding-bottom: 4px;
		border-bottom: 1px solid var(--as-green);
	}
}

/* ----------------------------------------------------------------------------
   Stan bez JavaScriptu (E3; kontrakt 6.3, zamyka ZAUWAZONE 12): sterowanie
   zależne od skryptów schowane, karta skanu zwija się do przycisku do
   /audyt (etykieta z pola hero_skan_wynik_cta — rozstrzygnięcie 5 oceny
   planu), mapa zostaje ilustracją z widocznymi priorytetami (reguły
   odsłony z podwójnym kontekstem — blok mapy wyżej).
---------------------------------------------------------------------------- */

.as-js .as-hero__bez-js {
	display: none;
}

.as-hero__bez-js {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 20px 22px 0;
	height: 50px;
	padding: 0 22px;
	background: var(--as-green);
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	transition: background var(--as-t);
}

.as-hero__bez-js:hover {
	background: var(--as-green-hover);
}

/* Odnośnik P3 też znika bez skryptów (N1 oceny raportu E3): karta zwinięta
   do przycisku robi jego robotę — dwa identyczne wezwania stałyby obok. */
html:not(.as-js) :where(.as-hero__wiersz-pola, .as-hero__podpowiedz, .as-hero__audyt-link, .as-mapa__nota, .as-mapa__srodek-zacheta, .as-mapa__legenda-instrukcja) {
	display: none;
}

/* Środek bez skryptów nie zaprasza do interakcji: bez wiggle, bez grab
   (selektor z polem — musi przebić specyficzność reguły wiggle). */
html:not(.as-js) .as-mapa__pole .as-mapa__srodek {
	cursor: default;
	animation: none;
}

/* ----------------------------------------------------------------------------
   Strona /audyt (E5) — Hero z formularzem; prototyp „ArtSearch Audyt.dc.html",
   sekcja Hero. Wartości odczytane ze stylów inline prototypu; kolory chipów
   kanałów (#4a4f57, #cfccc2) wprost z prototypu — wartości jednorazowe tej
   sekcji, nie tokeny (wzorzec #13b884 z E2).
---------------------------------------------------------------------------- */

.as-audyt-hero {
	border-bottom: 1px solid var(--as-ink);
}

.as-audyt-hero__grid {
	align-items: start;
	padding-top: clamp(40px, 4.5vw, 72px);
	padding-bottom: clamp(40px, 4.5vw, 72px);
}

.as-audyt-hero__tresc {
	grid-column: span 6;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(22px, 2.2vw, 32px);
}

.as-audyt-hero__kicker {
	font-size: 11px;
	color: var(--as-green);
}

.as-audyt-hero__naglowek {
	font-size: clamp(32px, 4.2vw, 67.2px);
	line-height: 0.94;
	letter-spacing: -0.03em;
}

.as-audyt-hero__naglowek span {
	color: var(--as-green);
}

.as-audyt-hero__lead {
	font-size: var(--as-lead);
	line-height: 1.55;
	color: var(--as-muted-2);
	max-width: 46ch;
}

.as-audyt-hero__zaufanie {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.as-audyt-hero__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 10.5px;
	color: var(--as-ink);
	padding: 9px 13px;
	border: 1px solid var(--as-ink);
}

.as-audyt-hero__chip::before {
	content: '';
	width: 6px;
	height: 6px;
	background: var(--as-green);
}

.as-audyt-hero__kanaly-blok {
	align-self: stretch;
	margin-top: 6px;
	padding-top: clamp(20px, 2vw, 30px);
	border-top: 1px solid var(--as-line);
}

.as-audyt-hero__kanaly-podpis {
	font-size: 9.5px;
	color: var(--as-mono-muted);
	margin-bottom: 12px;
}

.as-audyt-hero__kanaly {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.as-audyt-hero__kanal {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 9.5px;
	color: #4a4f57;
	padding: 6px 10px;
	border: 1px solid #cfccc2;
}

.as-audyt-hero__kanal::before {
	content: '';
	width: 5px;
	height: 5px;
	background: var(--as-green);
}

.as-audyt-hero__formularz {
	grid-column: span 6;
}

@media (max-width: 860px) {
	.as-audyt-hero__grid {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}

	/* Twarde łamania projektanta obowiązują od 861 px (ROZNICE 15 i 21). */
	.as-audyt-hero__naglowek br {
		display: none;
	}
}

/* ----------------------------------------------------------------------------
   Polityka prywatności (E5) — nowy projekt bez prototypu; makieta
   zaakceptowana 2026-08-27, decyzje układu w ROZNICE.md 22. Sticky spis
   treści (karta) + sekcje dokumentu; ≤ 860 px spis jako chipy nad treścią.
---------------------------------------------------------------------------- */

.as-polityka {
	padding-top: clamp(48px, 5.5vw, 88px);
	padding-bottom: clamp(56px, 6vw, 96px);
}

.as-polityka__kicker {
	font-size: 11px;
	color: var(--as-green);
}

.as-polityka__naglowek {
	margin-top: 16px;
	font-size: var(--as-h2);
	line-height: 0.98;
	letter-spacing: -0.03em;
}

.as-polityka__lead {
	margin-top: 18px;
	max-width: 62ch;
	font-size: var(--as-lead);
	line-height: 1.55;
	color: var(--as-muted);
}

.as-polityka__uklad {
	margin-top: clamp(36px, 4vw, 56px);
	align-items: start;
}

.as-polityka__spis {
	grid-column: span 4;
	position: sticky;
	top: calc(var(--as-header-h) + 24px);
	padding: 22px;
}

.as-polityka__spis-naglowek {
	font-size: 10px;
	color: var(--as-mono-muted);
	margin-bottom: 6px;
}

.as-polityka__spis-link {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 10px 0;
	border-top: 1px solid var(--as-line);
	font-size: 11px;
	color: var(--as-ink);
	transition: color var(--as-t);
}

.as-polityka__spis-link:first-of-type {
	border-top: 0;
}

.as-polityka__spis-nr {
	color: var(--as-green);
	flex: none;
}

.as-polityka__spis-link:hover {
	color: var(--as-green);
}

.as-polityka__tresc {
	grid-column: span 8;
	max-width: 70ch;
}

.as-polityka__sekcja {
	padding: clamp(22px, 2.4vw, 34px) 0;
	border-top: 1px solid var(--as-line);
}

.as-polityka__sekcja:first-of-type {
	padding-top: 0;
	border-top: 0;
}

.as-polityka__sekcja-nr {
	font-size: 10px;
	color: var(--as-green);
}

.as-polityka__sekcja-tytul {
	margin-top: 10px;
	font-size: clamp(19px, 1.7vw, 25px);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.as-polityka__sekcja p {
	margin-top: 14px;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--as-muted-2);
}

.as-polityka__sekcja b,
.as-polityka__sekcja strong {
	color: var(--as-ink);
}

.as-polityka__sekcja ul {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.as-polityka__sekcja li {
	position: relative;
	padding: 5px 0 5px 22px;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--as-muted-2);
}

.as-polityka__sekcja li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 14px;
	width: 6px;
	height: 6px;
	background: var(--as-green);
}

.as-polityka__data {
	margin-top: clamp(28px, 3vw, 44px);
	padding-top: 18px;
	border-top: 1px solid var(--as-ink);
	font-size: 10px;
	color: var(--as-mono-muted);
}

@media (max-width: 860px) {
	.as-polityka__uklad {
		display: flex;
		flex-direction: column;
		gap: 28px;
	}

	.as-polityka__spis {
		position: static;
		width: 100%;
		padding: 16px 18px;
	}

	.as-polityka__spis-linki {
		display: flex;
		flex-wrap: wrap;
		gap: 7px;
		margin-top: 10px;
	}

	.as-polityka__spis-link,
	.as-polityka__spis-link:first-of-type {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		padding: 7px 11px;
		border: 1px solid var(--as-line);
		font-size: 10px;
	}

	.as-polityka__tresc {
		max-width: none;
	}
}

/* ----------------------------------------------------------------------------
   Formularz audytu (E5) — karta w hero /audyt; prototyp „ArtSearch
   Audyt.dc.html", §5.3 wytycznych. Jeden markup, dwa warianty (kontrakt 6.3):
   bez as-js trzy grupy pod sobą ze śródtytułami i jednym przyciskiem wysyłki;
   z as-js kroki przełącza klasa stanu as-form--krok-{n} czystym CSS — skrypt
   (commity 5–6) tylko ją podmienia. Hairline'y wnętrza karty #e6e2d8, tło
   biegnącego segmentu #f0efe8, tło wybranego celu #effaf5, placeholder
   #a49f93 — wartości jednorazowe z prototypu (wzorzec #13b884 z E2).
---------------------------------------------------------------------------- */

.as-form__szczyt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	border-bottom: 1px solid var(--as-ink);
}

.as-form__tytul {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 10.5px;
	color: var(--as-ink);
}

.as-form__kropka {
	width: 8px;
	height: 8px;
	background: var(--as-green);
	animation: asGlow 2.4s ease-in-out infinite;
}

.as-form__licznik {
	font-size: 10px;
	color: var(--as-mono-faint);
}

.as-form__segmenty {
	display: flex;
	border-bottom: 1px solid #e6e2d8;
}

.as-form__segment {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 13px 16px;
	border-right: 1px solid #e6e2d8;
}

.as-form__segment:last-child {
	border-right: 0;
}

.as-form__segment--biezacy {
	background: #f0efe8;
}

.as-form__segment-nr {
	width: 20px;
	height: 20px;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	border: 1px solid #cfccc2;
	color: var(--as-mono-faint);
}

.as-form__segment--zrobiony .as-form__segment-nr {
	border-color: var(--as-green);
	background: var(--as-green);
	color: #fff;
}

.as-form__segment-etykieta {
	font-size: 9.5px;
	color: var(--as-mono-faint);
}

.as-form__segment--biezacy .as-form__segment-etykieta,
.as-form__segment--zrobiony .as-form__segment-etykieta {
	color: var(--as-ink);
}

.as-form__krok {
	border: 0;
	margin: 0;
	min-width: 0;
	padding: clamp(22px, 2.2vw, 30px);
	padding-bottom: 0;
}

.as-form__krok:last-of-type {
	padding-bottom: clamp(22px, 2.2vw, 30px);
}

.as-form__krok-tytul {
	padding: 0;
	font-size: 10px;
	color: var(--as-mono-muted);
	letter-spacing: 0.14em;
}

html:not(.as-js) .as-form__krok + .as-form__krok {
	margin-top: clamp(22px, 2.2vw, 30px);
	border-top: 1px solid #e6e2d8;
}

.as-form__grupa {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-top: 18px;
}

.as-form__krok[data-krok='3'] .as-form__grupa {
	margin-top: 14px;
}

.as-form__krok-tytul + .as-form__grupa {
	margin-top: 14px;
}

.as-form__etykieta {
	font-size: 10px;
	color: var(--as-mono-muted);
}

.as-form__etykieta--grupy {
	display: block;
	margin: 14px 0 0;
}

.as-form__wymagane {
	color: var(--as-green);
}

/* Pola 16px, nie 15 z prototypu — poniżej 16 px iOS przybliża ekran przy
   focusie pola (ROZNICE 23). */
.as-form__pole {
	height: 50px;
	padding: 0 16px;
	border: 1px solid var(--as-ink);
	background: #fff;
	font-size: 16px;
	color: var(--as-ink);
	transition: border-color 0.2s ease;
}

.as-form__krok[data-krok='1'] .as-form__pole {
	height: 52px;
}

.as-form__pole::placeholder {
	color: #a49f93;
}

.as-form__pole:focus-visible {
	outline: 2px solid var(--as-green);
	outline-offset: -1px;
}

.as-form__pole--select {
	appearance: none;
	cursor: pointer;
}

.as-form__cele {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-top: 14px;
}

.as-form__cel {
	position: relative;
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 14px 15px;
	border: 1px solid var(--as-line);
	background: #fff;
	cursor: pointer;
	transition: border-color 0.18s ease, background 0.18s ease;
}

.as-form__cel:has(.as-form__cel-pole:checked) {
	border-color: var(--as-green);
	background: #effaf5;
}

.as-form__cel:has(.as-form__cel-pole:focus-visible) {
	outline: 2px solid var(--as-green);
	outline-offset: 2px;
}

.as-form__cel-pole {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.as-form__cel-znacznik {
	width: 22px;
	height: 22px;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #cfccc2;
	background: #fff;
	color: #fff;
	transition: border-color 0.18s ease, background 0.18s ease;
}

.as-form__cel-znacznik svg {
	opacity: 0;
}

.as-form__cel:has(.as-form__cel-pole:checked) .as-form__cel-znacznik {
	border-color: var(--as-green);
	background: var(--as-green);
}

.as-form__cel:has(.as-form__cel-pole:checked) .as-form__cel-znacznik svg {
	opacity: 1;
}

.as-form__cel-tekst {
	font-size: 14.5px;
	line-height: 1.3;
	text-align: left;
}

.as-form__nawigacja {
	display: flex;
	gap: 12px;
	padding: clamp(22px, 2.2vw, 30px);
}

.as-form__wstecz {
	display: none;
	flex: none;
	align-items: center;
	height: 54px;
	padding: 0 22px;
	border: 1px solid var(--as-ink);
	background: transparent;
	color: var(--as-ink);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.as-form__dalej,
.as-form__wyslij {
	flex: 1;
	height: 54px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--as-green);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	border: 0;
	cursor: pointer;
	transition: background var(--as-t);
}

.as-form__dalej {
	display: none;
}

.as-form__dalej:hover,
.as-form__wyslij:hover {
	background: var(--as-green-hover);
}

.as-form__wyslij:disabled {
	background: var(--as-green-off);
	cursor: not-allowed;
}

/* Warianty widoczności (kontrakt 6.3). Bez skryptów: sterowanie krokowe
   znika, wszystkie grupy widoczne, jeden przycisk wysyłki. */
html:not(.as-js) :where(.as-form__licznik, .as-form__segmenty) {
	display: none;
}

/* Ze skryptami: widoczna jedna grupa wg klasy stanu; śródtytuły grup
   zostają dla czytników (pasek segmentów jest aria-hidden), wizualnie
   znikają. */
.as-js .as-form__krok {
	display: none;
}

.as-js .as-form--krok-1 .as-form__krok[data-krok='1'],
.as-js .as-form--krok-2 .as-form__krok[data-krok='2'],
.as-js .as-form--krok-3 .as-form__krok[data-krok='3'] {
	display: block;
}

.as-js .as-form__krok-tytul {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.as-js .as-form--krok-2 .as-form__wstecz,
.as-js .as-form--krok-3 .as-form__wstecz {
	display: inline-flex;
}

.as-js .as-form--krok-1 .as-form__dalej,
.as-js .as-form--krok-2 .as-form__dalej {
	display: inline-flex;
}

.as-js .as-form__wyslij {
	display: none;
}

.as-js .as-form--krok-3 .as-form__wyslij {
	display: inline-flex;
}

.as-form__potwierdzenie {
	padding: clamp(22px, 2.2vw, 30px);
}

/* Wjazd potwierdzenia po odpowiedzi w tle (§5.3: asRise; wartości
   z prototypu). Reduced motion gasi go globalny kill-switch. */
@keyframes asRise {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.as-form__potwierdzenie--wjazd {
	animation: asRise 0.4s ease both;
}

.as-form__ok-szczyt {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.as-form__ok-ikona {
	width: 34px;
	height: 34px;
	flex: none;
	background: var(--as-green);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.as-form__ok-tytul {
	font-size: 18px;
}

.as-form__ok-echo {
	font-size: 9.5px;
	color: var(--as-mono-muted);
	margin-top: 3px;
}

.as-form__ok-lead {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--as-muted-2);
	margin-bottom: 18px;
}

.as-form__os {
	display: flex;
	flex-direction: column;
}

.as-form__os-krok {
	display: flex;
	gap: 14px;
	padding: 12px 0;
	border-top: 1px solid #e6e2d8;
}

.as-form__os-kiedy {
	font-size: 10px;
	color: var(--as-green);
	flex: none;
	width: 52px;
}

.as-form__os-co {
	font-size: 14px;
	line-height: 1.4;
	color: var(--as-ink);
}

.as-form__ok-odnosnik {
	margin-top: 20px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 13px;
	color: var(--as-green);
	font-weight: 600;
	transition: gap var(--as-t);
}

.as-form__ok-odnosnik:hover {
	gap: 14px;
}

.as-form__nota {
	font-size: 9.5px;
	color: var(--as-mono-faint);
	margin-top: 14px;
	line-height: 1.5;
	text-align: center;
}

/* Komunikat kodu odpowiedzi rdzenia (E5, commit 4) — czerwień progów
   raportu; tło #fdf2f1 jednorazowe (rozjaśnienie czerwieni na kości). */
.as-form__komunikat {
	margin: clamp(22px, 2.2vw, 30px);
	margin-bottom: 0;
	padding: 13px 15px;
	border: 1px solid var(--as-red);
	background: #fdf2f1;
	font-size: 14px;
	line-height: 1.5;
	color: var(--as-ink);
}

/* Zgoda (U14): checkbox jak cele, tekst z ustawień panelu, odnośnik do
   polityki doklejony za zdaniem (W3 oceny planu). */
.as-form__zgoda {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 13px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid #e6e2d8;
	cursor: pointer;
}

.as-form__zgoda:has(.as-form__cel-pole:focus-visible) {
	outline: 2px solid var(--as-green);
	outline-offset: 2px;
}

.as-form__cel-znacznik--zgoda {
	width: 20px;
	height: 20px;
	margin-top: 1px;
}

.as-form__zgoda:has(.as-form__cel-pole:checked) .as-form__cel-znacznik {
	border-color: var(--as-green);
	background: var(--as-green);
}

.as-form__zgoda:has(.as-form__cel-pole:checked) .as-form__cel-znacznik svg {
	opacity: 1;
}

.as-form__zgoda-tekst {
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--as-muted-2);
}

.as-form__zgoda-odnosnik {
	color: var(--as-green);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.as-form__zgoda-odnosnik:hover {
	color: var(--as-green-hover);
}

/* Po przyjęciu zgłoszenia (?lead=ok albo odpowiedź w tle): karta pokazuje
   wyłącznie potwierdzenie. */
.as-form--gotowe .as-form__segmenty {
	display: none;
}

/* Stan zastępczy bez modułu zgłoszeń (render z wyłączonym rdzeniem —
   kontrola odbioru 7): zaproszenie do kontaktu z danych firmy. */
.as-form__zastepczy {
	padding: clamp(22px, 2.2vw, 30px);
}

.as-form__zastepczy-naglowek {
	font-size: 18px;
}

.as-form__zastepczy-tekst {
	margin-top: 10px;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--as-muted-2);
}

.as-form__zastepczy-kontakt {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	font-size: 15px;
	font-weight: 600;
	color: var(--as-ink);
	transition: color var(--as-t);
}

.as-form__zastepczy-kontakt::before {
	content: '';
	width: 8px;
	height: 8px;
	background: var(--as-green);
}

.as-form__zastepczy-kontakt:hover {
	color: var(--as-green);
}

/* ----------------------------------------------------------------------------
   Sekcja #raport /audyt (E5, commit 7) — przykładowy raport siły na
   granatowym gradiencie z siatką; prototyp „ArtSearch Audyt.dc.html",
   sekcja Raport. Karta liczy wynik/luki/mocne z ośmiu procentów
   (W1+W2, ROZNICE 24). Ramka karty rgba .18 i hairline .12 wprost
   z prototypu tej sekcji.
---------------------------------------------------------------------------- */

.as-raport {
	position: relative;
	color: #fff;
	border-bottom: 1px solid var(--as-ink);
	overflow: hidden;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(180deg, var(--as-navy-hi), var(--as-navy-lo));
	background-size: 52px 52px, 52px 52px, 100% 100%;
}

.as-raport__uklad {
	align-items: center;
	padding-top: clamp(48px, 5.5vw, 88px);
	padding-bottom: clamp(48px, 5.5vw, 88px);
}

.as-raport__tresc {
	grid-column: span 5;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.as-raport__kicker {
	font-size: 11px;
	color: var(--as-mint);
}

/* 3.2vw zamiast 3.4 z prototypu: fraza „Raport, który mówi" pierwszej
   linii łamania projektanta nie mieści się w kolumnie przy metrykach
   zmiennego Archivo i do 1440 px zostawiała sierotę (ROZNICE 27). */
.as-raport__naglowek {
	font-size: clamp(28px, 3.2vw, 51.2px);
	line-height: 1;
	letter-spacing: -0.03em;
	color: #fff;
}

.as-raport__lead {
	font-size: clamp(15px, 1.1vw, 17px);
	line-height: 1.6;
	color: var(--as-navy-text);
	max-width: 42ch;
}

.as-raport__liczba-rzad {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding-top: 8px;
}

.as-raport__liczba {
	font-size: clamp(30px, 3vw, 46px);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--as-mint);
}

.as-raport__liczba-podpis {
	font-size: 10px;
	color: var(--as-navy-mono);
	line-height: 1.5;
}

.as-raport__podglad {
	grid-column: span 7;
}

.as-raport__karta {
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: var(--as-navy-card);
}

.as-raport__karta-szczyt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.as-raport__karta-tytul {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 10px;
	color: var(--as-navy-text-2);
}

.as-raport__karta-tytul::before {
	content: '';
	width: 8px;
	height: 8px;
	background: var(--as-mint);
}

.as-raport__karta-badge {
	font-size: 9.5px;
	color: var(--as-navy-mono);
}

.as-raport__karta-cialo {
	padding: clamp(20px, 2.2vw, 32px);
}

.as-raport__szczyt-wyniku {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 22px;
	flex-wrap: wrap;
}

.as-raport__wynik-etykieta {
	font-size: 9.5px;
	color: var(--as-navy-mono);
	margin-bottom: 8px;
}

.as-raport__wynik {
	font-size: clamp(30px, 3.4vw, 48px);
	line-height: 1;
	color: #fff;
}

.as-raport__wynik-skala {
	color: var(--as-navy-mono);
	font-size: 0.5em;
}

.as-raport__legenda {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.as-raport__legenda-wiersz {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 9px;
}

.as-raport__legenda-wiersz::before {
	content: '';
	width: 6px;
	height: 6px;
	background: currentColor;
}

.as-raport__legenda-wiersz--luki {
	color: var(--as-amber);
}

.as-raport__legenda-wiersz--mocne {
	color: var(--as-mint);
}

.as-raport__paski {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.as-raport__pasek {
	display: grid;
	grid-template-columns: 120px 1fr 58px;
	align-items: center;
	gap: 12px;
}

.as-raport__pasek-nazwa {
	font-size: 10px;
	color: var(--as-navy-text-2);
}

.as-raport__pasek-tor {
	display: block;
	height: 8px;
	background: rgba(255, 255, 255, 0.08);
	overflow: hidden;
}

.as-raport__pasek-sila {
	display: block;
	height: 100%;
	transform-origin: left;
	transition: transform 0.8s var(--as-ease-bar);
}

.as-js .as-raport__paski:not(.as-raport__paski--widoczne) .as-raport__pasek-sila {
	transform: scaleX(0);
}

.as-raport__pasek-sila--mocny {
	background: var(--as-mint);
}

.as-raport__pasek-sila--sredni {
	background: var(--as-amber);
}

.as-raport__pasek-sila--slaby {
	background: var(--as-red);
}

.as-raport__pasek-procent {
	font-size: 10px;
	text-align: right;
}

.as-raport__pasek-procent--mocny {
	color: var(--as-mint);
}

.as-raport__pasek-procent--sredni {
	color: var(--as-amber);
}

.as-raport__pasek-procent--slaby {
	color: var(--as-red);
}

/* Trójka kart (E5, commit 7) — wspólny komponent deliverables sekcji
   #raport (wariant ciemny) i kroków sekcji Proces (wariant jasny,
   commit 8); w prototypie obie mają identyczną strukturę. */

.as-trojka {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--as-ink);
	padding-bottom: clamp(44px, 5vw, 72px);
}

.as-trojka--ciemny {
	border-top-color: rgba(255, 255, 255, 0.14);
}

.as-trojka__wpis {
	padding: clamp(28px, 2.6vw, 40px) clamp(20px, 2vw, 32px) 0;
	border-right: 1px solid var(--as-line);
}

.as-trojka--ciemny .as-trojka__wpis {
	border-right-color: rgba(255, 255, 255, 0.12);
}

.as-trojka__wpis:last-child {
	border-right: 0;
}

.as-trojka__nr {
	font-size: 11px;
	color: var(--as-green);
}

.as-trojka--ciemny .as-trojka__nr {
	font-size: 10px;
	color: var(--as-mint);
}

.as-trojka__tytul {
	margin: 14px 0 10px;
	font-size: clamp(18px, 1.6vw, 24px);
	letter-spacing: -0.02em;
}

.as-trojka--ciemny .as-trojka__tytul {
	font-size: clamp(17px, 1.5vw, 21px);
	color: #fff;
}

.as-trojka__opis {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--as-muted);
}

.as-trojka--ciemny .as-trojka__opis {
	font-size: 14px;
	color: var(--as-navy-text-3);
}

@media (max-width: 860px) {
	.as-raport__uklad {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}

	.as-raport__naglowek br {
		display: none;
	}

	.as-raport__pasek {
		grid-template-columns: 96px 1fr 44px;
		gap: 10px;
	}

	.as-trojka {
		display: flex;
		flex-direction: column;
		gap: 28px;
	}

	.as-trojka__wpis {
		border-right: 0;
		padding-left: 0;
		padding-right: 0;
	}
}

/* ----------------------------------------------------------------------------
   Sekcje Proces i Kontakt /audyt (E5, commit 8); prototyp „ArtSearch
   Audyt.dc.html". Proces: H2 + nota przy prawej krawędzi + trójka kart
   (wariant jasny komponentu z commitu 7). Kontakt: duży telefon i e-mail
   z danych firmy + karta „Dane firmy" z CTA do #formularza.
---------------------------------------------------------------------------- */

.as-audyt-proces {
	border-bottom: 1px solid var(--as-ink);
}

.as-audyt-proces__szczyt {
	align-items: end;
	padding-top: clamp(40px, 4.5vw, 72px);
	padding-bottom: clamp(28px, 3vw, 44px);
}

.as-audyt-proces__naglowek {
	grid-column: span 7;
	font-size: var(--as-h2);
	line-height: 1;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.as-audyt-proces__nota {
	grid-column: 9 / span 4;
	font-size: 15px;
	line-height: 1.6;
	color: var(--as-muted);
	border-left: 1px solid var(--as-ink);
	padding-left: 24px;
}

.as-audyt-kontakt {
	border-bottom: 1px solid var(--as-ink);
}

.as-audyt-kontakt__uklad {
	align-items: stretch;
	padding-top: clamp(44px, 5vw, 80px);
	padding-bottom: clamp(44px, 5vw, 80px);
}

.as-audyt-kontakt__tresc {
	grid-column: span 6;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 22px;
}

.as-audyt-kontakt__kicker {
	font-size: 11px;
	color: var(--as-green);
}

.as-audyt-kontakt__naglowek {
	font-size: clamp(28px, 3.4vw, 54px);
	line-height: 1;
	letter-spacing: -0.03em;
}

.as-audyt-kontakt__lead {
	font-size: 16px;
	line-height: 1.6;
	color: var(--as-muted-2);
	max-width: 40ch;
}

.as-audyt-kontakt__kanaly {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 6px;
}

.as-audyt-kontakt__telefon {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-weight: 700;
	font-size: clamp(22px, 2.2vw, 32px);
	letter-spacing: -0.02em;
	transition: color var(--as-t);
}

.as-audyt-kontakt__telefon::before {
	content: '';
	width: 10px;
	height: 10px;
	flex: none;
	background: var(--as-green);
}

.as-audyt-kontakt__telefon:hover {
	color: var(--as-green);
}

.as-audyt-kontakt__mail {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: clamp(18px, 1.8vw, 24px);
	color: var(--as-ink);
	transition: color var(--as-t);
}

.as-audyt-kontakt__mail::before {
	content: '';
	width: 10px;
	height: 10px;
	flex: none;
	background: var(--as-ink);
	transition: background var(--as-t);
}

.as-audyt-kontakt__mail:hover {
	color: var(--as-green);
}

.as-audyt-kontakt__mail:hover::before {
	background: var(--as-green);
}

.as-audyt-kontakt__karta {
	grid-column: span 6;
	display: flex;
	flex-direction: column;
}

.as-audyt-kontakt__dane {
	padding: clamp(22px, 2.2vw, 32px);
	border-bottom: 1px solid #e6e2d8;
}

.as-audyt-kontakt__dane-naglowek {
	font-size: 10px;
	color: var(--as-mono-muted);
	margin-bottom: 16px;
}

.as-audyt-kontakt__wiersze {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.as-audyt-kontakt__wiersz {
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: 14px;
	align-items: baseline;
}

.as-audyt-kontakt__wiersz-etykieta {
	font-size: 9.5px;
	color: var(--as-mono-faint);
}

.as-audyt-kontakt__wiersz-wartosc {
	font-size: 15px;
	line-height: 1.5;
	color: var(--as-ink);
}

.as-audyt-kontakt__cta {
	margin: clamp(22px, 2.2vw, 32px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	height: 58px;
	background: var(--as-green);
	color: #fff;
	font-weight: 600;
	font-size: 16px;
	transition: background var(--as-t);
}

.as-audyt-kontakt__cta:hover {
	background: var(--as-green-hover);
}

@media (max-width: 860px) {
	.as-audyt-proces__szczyt {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}

	.as-audyt-proces__nota {
		border-left: 0;
		padding-left: 0;
	}

	.as-audyt-kontakt__uklad {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}

	.as-audyt-kontakt__naglowek br {
		display: none;
	}
}

/* Ruch wyłączony na życzenie systemu (kontrakt 6.5; dodatek — ROZNICE.md).
   transition-delay też do zera (E3): fala przebudzenia mapy stoi na delay,
   nie na duration — bez tego zostałaby serią rozciągniętych w czasie skoków. */
/* ----------------------------------------------------------------------------
   Landing branżowy — Hero (E6, commit 2); prototyp „ArtSearch Branża",
   sekcja Hero. Ciemne tło + zdjęcie (obrazek wyróżniający wpisu) pod trzema
   nakładkami z prototypu; po prawej trzy pływające karty dowodów (ukryte
   ≤ 860 px, jak w prototypie — m-hide). Wartości jednorazowe sekcji
   (#9fb3c4, #d3e0ea, #7fa8bd, #5fe0b8, rgba(10,20,30,.55)) wprost
   z prototypu — wzorzec #13b884 z E2: nie każda wartość to token.
   ------------------------------------------------------------------------- */

.as-branza-hero {
	position: relative;
	display: flex;
	min-height: clamp(560px, 72vh, 760px);
	background: var(--as-navy-hi);
	color: #fff;
	border-bottom: 1px solid var(--as-ink);
	overflow: hidden;
}

.as-branza-hero__zdjecie {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.as-branza-hero__nakladka {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.as-branza-hero__nakladka--ukos {
	background: linear-gradient(105deg, rgba(11, 23, 34, 0.92) 0%, rgba(11, 23, 34, 0.66) 46%, rgba(11, 23, 34, 0.28) 100%);
}

.as-branza-hero__nakladka--dol {
	background: linear-gradient(0deg, rgba(11, 23, 34, 0.7) 0%, transparent 55%);
}

.as-branza-hero__nakladka--zielen {
	background: var(--as-green);
	mix-blend-mode: soft-light;
	opacity: 0.35;
}

.as-branza-hero__wnetrze {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* Pasek hero jest jaśniejszy niż paski sekcji granatowych (leży na zdjęciu) —
   kolory wprost z prototypu; zawężenie przez :where (zerowa specyficzność). */
.as-branza-hero :where(.as-pasek--ciemny) {
	border-bottom-color: rgba(255, 255, 255, 0.16);
	color: #9fb3c4;
}

.as-branza-hero__tresc {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: clamp(40px, 6vw, 96px) 0 clamp(40px, 5vw, 72px);
	max-width: 920px;
}

.as-branza-hero__emblemat-rzad {
	display: flex;
	align-items: center;
	gap: 13px;
}

.as-branza-hero__emblemat {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 50px;
	height: 50px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: var(--as-green);
}

.as-branza-hero__nazwa {
	font-size: 11px;
	color: var(--as-mint);
}

.as-branza-hero__naglowek {
	margin-top: clamp(22px, 2.4vw, 34px);
	font-size: clamp(36px, 5.2vw, 83.2px);
	line-height: 0.92;
	letter-spacing: -0.035em;
	color: #fff;
	text-wrap: balance;
	text-shadow: 0 2px 40px rgba(0, 0, 0, 0.4);
}

.as-branza-hero__lead {
	margin-top: clamp(20px, 2vw, 28px);
	font-size: clamp(16px, 1.3vw, 20.8px);
	line-height: 1.55;
	color: #d3e0ea;
	max-width: 50ch;
}

.as-branza-hero__przyciski {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: clamp(30px, 3vw, 42px);
}

.as-branza-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 58px;
	padding: 0 30px;
	background: var(--as-green);
	color: #fff;
	font-weight: 600;
	font-size: 16.5px;
	transition: background var(--as-t);
}

.as-branza-hero__cta:hover {
	background: #13b884;
}

.as-branza-hero__cta-mapa {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 58px;
	padding: 0 24px;
	border: 1px solid rgba(255, 255, 255, 0.38);
	color: #fff;
	font-weight: 600;
	font-size: 15.5px;
	transition: border-color var(--as-t), background var(--as-t);
}

.as-branza-hero__cta-mapa:hover {
	border-color: var(--as-mint);
	background: rgba(45, 212, 160, 0.08);
}

.as-branza-hero__dowody {
	position: absolute;
	top: 50%;
	/* Karty stoją poza .as-shell (pozycjonowane względem sekcji full-bleed), więc
	   od 1600 px dosuwają się do ramy treści: (szerokość sekcji − rama)/2 + gutter;
	   poniżej 1600 wyrażenie jest mniejsze od guttera i max() zostawia gutter —
	   zmiana zerowa (droga A, E8). */
	right: max(var(--as-gutter), calc((100% - var(--as-max-w)) / 2 + var(--as-gutter)));
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 13px;
	width: min(340px, 33vw);
	pointer-events: none;
}

.as-branza-hero__dowody-naglowek {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-left: 2px;
	font-size: 9px;
	color: var(--as-mint);
}

.as-branza-hero__dowody-kropka {
	width: 7px;
	height: 7px;
	background: var(--as-mint);
	animation: asBlink 2s ease-in-out infinite;
}

.as-branza-hero__dowod {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 15px 17px;
	background: rgba(10, 20, 30, 0.55);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.8);
	animation: asFloat 4.5s ease-in-out infinite;
}

.as-branza-hero__dowod:nth-child(3) {
	animation-duration: 5.1s;
	animation-delay: 0.5s;
}

.as-branza-hero__dowod:nth-child(4) {
	animation-duration: 5.7s;
	animation-delay: 1s;
}

.as-branza-hero__dowod-ikona {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 38px;
	height: 38px;
	background: rgba(45, 212, 160, 0.14);
	border: 1px solid rgba(95, 224, 184, 0.4);
	color: #5fe0b8;
}

.as-branza-hero__dowod-teksty {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.as-branza-hero__dowod-kanal {
	font-size: 9px;
	color: #7fa8bd;
}

.as-branza-hero__dowod-tekst {
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	color: #fff;
}

/* Pływanie kart dowodów hero (prototyp Branży; czasy 4.5/5.1/5.7 s
   z opóźnieniami w regułach kart). */
@keyframes asFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-12px); }
}

@media (max-width: 860px) {
	/* m-heroauto / m-heroc / m-hide prototypu Branży. */
	.as-branza-hero {
		min-height: clamp(430px, 60vh, 560px);
	}

	.as-branza-hero__tresc {
		padding: 24px 0 28px;
	}

	.as-branza-hero__dowody {
		display: none;
	}
}

/* ----------------------------------------------------------------------------
   Landing branżowy — Zapytania (E6, commit 4); prototyp „ArtSearch Branża",
   sekcja „Jak Cię znajdują". Siatkę trzech kolumn niesie komponent
   as-trojka (E5); wnętrze wpisu własne: numer mono, pole zapytania z lupą
   i zielonym cieniem, opis.
   ------------------------------------------------------------------------- */

.as-branza-zapytania {
	background: var(--as-bg);
	border-bottom: 1px solid var(--as-ink);
}

.as-branza-zapytania__szczyt {
	gap: clamp(20px, 2.5vw, 40px);
	padding-top: clamp(40px, 4.5vw, 72px);
	padding-bottom: clamp(28px, 3vw, 44px);
	align-items: end;
}

.as-branza-zapytania__naglowek {
	grid-column: 1 / span 7;
	font-size: var(--as-h2);
	line-height: 1;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.as-branza-zapytania__nota {
	grid-column: 9 / span 4;
	font-size: 15px;
	line-height: 1.6;
	color: var(--as-muted);
	border-left: 1px solid var(--as-ink);
	padding-left: 24px;
}

.as-branza-zapytania__nr {
	font-size: 10px;
	color: var(--as-mono-faint);
}

.as-branza-zapytania__pole {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--as-ink);
	box-shadow: 5px 5px 0 var(--as-green);
}

.as-branza-zapytania__pole svg {
	flex: none;
}

.as-branza-zapytania__tekst {
	flex: 1;
	font-weight: 500;
	font-size: 14.5px;
	line-height: 1.2;
	color: var(--as-ink);
}

.as-branza-zapytania__opis {
	margin-top: 16px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--as-muted);
}

@media (max-width: 860px) {
	/* m-stack / m-flatx prototypu dla szczytu sekcji zapytań. */
	.as-branza-zapytania__szczyt {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}

	.as-branza-zapytania__nota {
		border-left: 0;
		padding-left: 0;
	}
}

/* ----------------------------------------------------------------------------
   Landing branżowy — Oferta (E6, commit 5); prototyp „ArtSearch Branża",
   sekcja „Co przygotujemy". Intro dwukolumnowe + makieta strony-hub
   (atrapa „Twoja Marka"; w slocie avatara emblemat branży — ROZNICE 31)
   + deliverables na as-trojka z wariantem wielkiego numeru. Kolory huba
   (#3a4b5a, #7fa8bd, #bde6d6, #9fb3c4) jednorazowe, wprost z prototypu.
   ------------------------------------------------------------------------- */

.as-branza-oferta {
	background: var(--as-bg);
	border-bottom: 1px solid var(--as-ink);
}

.as-branza-oferta__intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
	padding: clamp(40px, 4.5vw, 72px) 0 clamp(28px, 3vw, 44px);
}

.as-branza-oferta__naglowek {
	font-size: var(--as-h2);
	line-height: 1;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.as-branza-oferta__lead {
	margin-top: 20px;
	font-size: clamp(15px, 1.2vw, 18px);
	line-height: 1.6;
	color: var(--as-muted);
	max-width: 44ch;
}

.as-branza-oferta__podglad-rzad {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-top: 26px;
}

.as-branza-oferta__podglad-etykieta {
	font-size: 10px;
	color: var(--as-green);
}

.as-branza-oferta__kreska {
	flex: 1;
	height: 1px;
	background: var(--as-line);
}

/* Wielki numer deliverables (wariant komponentu as-trojka — prototyp
   Branży; numer w kolorze linii, Archivo Expanded przez as-expanded). */
.as-trojka__nr--wielki {
	font-size: clamp(34px, 3.4vw, 54.4px);
	font-weight: 800;
	line-height: 1;
	color: var(--as-line);
}

/* ----- makieta strony-hub ----- */

.as-branza-hub {
	position: relative;
	border: 1px solid var(--as-ink);
	background: var(--as-navy-slim);
	box-shadow: 10px 10px 0 rgba(14, 155, 111, 0.9);
}

.as-branza-hub__pasek {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 13px 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.as-branza-hub__kropka {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #3a4b5a;
}

.as-branza-hub__adres {
	margin-left: 10px;
	font-size: 10px;
	color: #7fa8bd;
}

.as-branza-hub__status {
	width: 7px;
	height: 7px;
	margin-left: auto;
	border-radius: 50%;
	background: var(--as-mint);
	animation: asBlink 2s ease-in-out infinite;
}

.as-branza-hub__cialo {
	padding: clamp(22px, 2.4vw, 32px);
}

.as-branza-hub__szczyt {
	display: flex;
	align-items: center;
	gap: 16px;
}

.as-branza-hub__emblemat {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 58px;
	height: 58px;
	border: 1px solid rgba(95, 224, 184, 0.4);
	background: rgba(45, 212, 160, 0.06);
	color: var(--as-mint);
}

.as-branza-hub__marka {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.as-branza-hub__nazwa {
	font-weight: 700;
	font-size: 19px;
	letter-spacing: -0.02em;
	color: #fff;
}

.as-branza-hub__podtytul {
	font-size: 10px;
	color: #7fa8bd;
}

.as-branza-hub__chipy {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
}

.as-branza-hub__chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 12px;
	background: rgba(45, 212, 160, 0.1);
	border: 1px solid rgba(95, 224, 184, 0.32);
	font-family: var(--as-font-mono);
	font-size: 10px;
	letter-spacing: 0.04em;
	color: #bde6d6;
}

.as-branza-hub__chip-kropka {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--as-mint);
}

.as-branza-hub__kafle {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-top: 18px;
}

.as-branza-hub__kafel {
	display: flex;
	align-items: flex-end;
	aspect-ratio: 16/10;
	padding: 8px;
	background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 6px, transparent 6px 12px);
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.as-branza-hub__kafel-podpis {
	font-size: 8px;
	line-height: 1.3;
	color: #7fa8bd;
}

.as-branza-hub__stopka {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.as-branza-hub__claim {
	font-size: 12.5px;
	color: #9fb3c4;
}

.as-branza-hub__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 16px;
	background: var(--as-green);
	color: #fff;
	font-weight: 600;
	font-size: 13px;
}

@media (max-width: 860px) {
	/* m-stack prototypu dla intro oferty. */
	.as-branza-oferta__intro {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}
}

/* ----------------------------------------------------------------------------
   Landing branżowy — sekcja końcowa (E6, commit 6); prototyp „ArtSearch
   Branża", sekcja CTA. Tło z siatką i łuną (SVG w szablonie, wzorzec
   as-cta__tlo strony głównej), po lewej eyebrow + H2 + lead + przyciski
   64 px, po prawej karta czterech priorytetów budowy.
   ------------------------------------------------------------------------- */

.as-branza-cta {
	position: relative;
	background: var(--as-navy);
	color: #fff;
	overflow: hidden;
}

.as-branza-cta__tlo {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.as-branza-cta__uklad {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(36px, 5vw, 72px);
	align-items: center;
	padding-top: clamp(64px, 7vw, 112px);
	padding-bottom: clamp(64px, 7vw, 112px);
}

.as-branza-cta__kicker {
	font-size: 11px;
	letter-spacing: 0.16em;
	color: var(--as-mint);
}

.as-branza-cta__naglowek {
	margin-top: clamp(20px, 2vw, 28px);
	font-size: clamp(34px, 4.4vw, 70.4px);
	line-height: 0.94;
	letter-spacing: -0.04em;
	color: #fff;
	text-wrap: balance;
}

.as-branza-cta__lead {
	margin-top: clamp(20px, 2vw, 28px);
	font-size: clamp(16px, 1.4vw, 20px);
	line-height: 1.55;
	color: var(--as-navy-text-2);
	max-width: 46ch;
}

.as-branza-cta__przyciski {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: clamp(32px, 3.2vw, 44px);
}

.as-branza-cta__glowny {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	height: 64px;
	padding: 0 32px;
	background: var(--as-green);
	color: #fff;
	font-weight: 700;
	font-size: clamp(16px, 1.4vw, 19px);
	box-shadow: 0 16px 40px -14px rgba(14, 155, 111, 0.7);
	transition: background var(--as-t);
}

.as-branza-cta__glowny:hover {
	background: #13b884;
}

.as-branza-cta__telefon {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 64px;
	padding: 0 28px;
	border: 1px solid rgba(255, 255, 255, 0.32);
	color: #fff;
	font-weight: 600;
	font-size: clamp(15px, 1.2vw, 17px);
	transition: background var(--as-t);
}

.as-branza-cta__telefon:hover {
	background: rgba(255, 255, 255, 0.06);
}

.as-branza-cta__karta {
	border: 1px solid var(--as-navy-border);
	background: rgba(255, 255, 255, 0.03);
	padding: clamp(24px, 2.4vw, 34px);
}

.as-branza-cta__karta-naglowek {
	font-size: 10px;
	color: var(--as-navy-mono);
}

.as-branza-cta__lista {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin-top: 16px;
}

.as-branza-cta__pozycja {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 11px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.as-branza-cta__pozycja-znak {
	flex: none;
	width: 8px;
	height: 8px;
	background: var(--as-mint);
}

.as-branza-cta__pozycja-tekst {
	font-size: 15px;
	color: #e4edf4;
}

@media (max-width: 860px) {
	/* m-stack prototypu dla układu sekcji końcowej. */
	.as-branza-cta__uklad {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}
}

/* ----------------------------------------------------------------------------
   Strona /kontakt (E7) — Hero; prototyp „ArtSearch Kontakt.dc.html", sekcja
   Hero. Lewa 6/12: kicker, H1 32–74 px, lead 46ch, blok kontaktu z panelu
   (telefon Expanded 22–32 px z zielonym kwadratem, e-mail 17–23 px
   z atramentowym, adres 15 px z szarym #cfccc2 — wartość jednorazowa
   prototypu). Prawa 6/12: karta formularza (komponent as-form, commit 3).
---------------------------------------------------------------------------- */

.as-kontakt-hero {
	border-bottom: 1px solid var(--as-ink);
}

.as-kontakt-hero__grid {
	align-items: start;
	padding-top: clamp(40px, 4.5vw, 72px);
	padding-bottom: clamp(40px, 4.5vw, 72px);
}

.as-kontakt-hero__tresc {
	grid-column: span 6;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(22px, 2.2vw, 32px);
}

.as-kontakt-hero__kicker {
	font-size: 11px;
	color: var(--as-green);
}

.as-kontakt-hero__naglowek {
	font-size: clamp(32px, 4.2vw, 67.2px);
	line-height: 0.94;
	letter-spacing: -0.03em;
}

.as-kontakt-hero__naglowek span {
	color: var(--as-green);
}

.as-kontakt-hero__lead {
	font-size: var(--as-lead);
	line-height: 1.55;
	color: var(--as-muted-2);
	max-width: 46ch;
}

.as-kontakt-hero__dane {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	margin-top: 4px;
	padding-top: clamp(20px, 2vw, 28px);
	border-top: 1px solid var(--as-line);
}

.as-kontakt-hero__telefon,
.as-kontakt-hero__mail,
.as-kontakt-hero__adres {
	display: inline-flex;
	align-items: center;
	gap: 14px;
}

.as-kontakt-hero__telefon::before,
.as-kontakt-hero__mail::before,
.as-kontakt-hero__adres::before {
	content: '';
	width: 10px;
	height: 10px;
	flex: none;
}

.as-kontakt-hero__telefon {
	font-weight: 700;
	font-size: clamp(22px, 2.2vw, 32px);
	letter-spacing: -0.02em;
	transition: color var(--as-t);
}

.as-kontakt-hero__telefon::before {
	background: var(--as-green);
}

.as-kontakt-hero__telefon:hover {
	color: var(--as-green);
}

.as-kontakt-hero__mail {
	font-size: clamp(17px, 1.7vw, 23px);
	color: var(--as-ink);
	transition: color var(--as-t);
}

.as-kontakt-hero__mail::before {
	background: var(--as-ink);
	transition: background var(--as-t);
}

.as-kontakt-hero__mail:hover {
	color: var(--as-green);
}

.as-kontakt-hero__mail:hover::before {
	background: var(--as-green);
}

.as-kontakt-hero__adres {
	font-size: 15px;
	color: var(--as-muted);
}

.as-kontakt-hero__adres::before {
	background: #cfccc2;
}

.as-kontakt-hero__formularz {
	grid-column: span 6;
}

/* ----------------------------------------------------------------------------
   /kontakt — Mapa i dane (E7); prototyp, sekcja Mapa. Gradient sekcji-
   przełamań; lewa 7/12: mapa rysowana wyłącznie divami (siatka 44 px, cztery
   ulice — jedna miętowa, trzy kwartały, marker z dwoma pierścieniami
   2,6 s / drugi +1,3 s, dymek z pierwszej linii adresu z panelu, etykieta
   rogu, odnośnik do Map Google); prawa 5/12: kicker, H2 24–38 px, karta
   danych (wiersze 96px/1fr). Wartości jednorazowe z prototypu: #0c1a26
   (pole), #e8f0f6 (wartości), przezroczystości ulic i kwartałów.
   Pierścienie i kropka pinezki są OKRĄGŁE jak w prototypie — jedyne koła
   w serwisie poza mapą punktów styku; rozjazd §2 wytycznych kontra prototyp:
   ZAUWAZONE R12, obowiązuje prototyp.
---------------------------------------------------------------------------- */

.as-kontakt-mapa {
	color: #fff;
	border-bottom: 1px solid var(--as-ink);
	background: linear-gradient(180deg, var(--as-navy-hi), var(--as-navy-lo));
}

.as-kontakt-mapa__uklad {
	gap: clamp(24px, 3vw, 48px);
	align-items: stretch;
	padding-top: clamp(48px, 5vw, 80px);
	padding-bottom: clamp(48px, 5vw, 80px);
}

.as-kontakt-mapa__kolumna {
	grid-column: span 7;
}

.as-kontakt-mapa__pole {
	position: relative;
	height: 100%;
	min-height: clamp(360px, 40vw, 520px);
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: #0c1a26;
	overflow: hidden;
}

.as-kontakt-mapa__siatka {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 44px 44px;
}

.as-kontakt-mapa__ulica {
	position: absolute;
	background: rgba(255, 255, 255, 0.06);
}

.as-kontakt-mapa__ulica--pozioma-1 {
	left: -8%;
	top: 34%;
	width: 116%;
	height: 14px;
	transform: rotate(-9deg);
}

.as-kontakt-mapa__ulica--pozioma-2 {
	left: -8%;
	top: 66%;
	width: 116%;
	height: 20px;
	background: rgba(255, 255, 255, 0.05);
	transform: rotate(-9deg);
}

.as-kontakt-mapa__ulica--pionowa {
	left: 24%;
	top: -10%;
	width: 12px;
	height: 120%;
	transform: rotate(6deg);
}

.as-kontakt-mapa__ulica--mietowa {
	left: 62%;
	top: -10%;
	width: 10px;
	height: 120%;
	background: rgba(14, 155, 111, 0.22);
	transform: rotate(6deg);
}

.as-kontakt-mapa__kwartal {
	position: absolute;
	border: 1px solid rgba(255, 255, 255, 0.09);
}

.as-kontakt-mapa__kwartal--1 {
	left: 30%;
	top: 40%;
	width: 80px;
	height: 56px;
}

.as-kontakt-mapa__kwartal--2 {
	left: 44%;
	top: 20%;
	width: 70px;
	height: 64px;
}

.as-kontakt-mapa__kwartal--3 {
	left: 70%;
	top: 52%;
	width: 90px;
	height: 60px;
}

.as-kontakt-mapa__marker {
	position: absolute;
	left: 52%;
	top: 50%;
}

.as-kontakt-mapa__pierscien {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 26px;
	height: 26px;
	border: 2px solid var(--as-mint);
	border-radius: 50%;
	animation: asPinezka 2.6s ease-out infinite;
}

.as-kontakt-mapa__pierscien--drugi {
	animation-delay: 1.3s;
}

/* Puls pinezki: skala 0.6→2.6 z prototypu /kontakt (asPulseRing strony
   głównej ma 0.6→1.7 — inny zakres, osobny keyframe). Reduced motion gasi
   go globalny kill-switch. */
@keyframes asPinezka {
	0% {
		transform: translate(-50%, -50%) scale(0.6);
		opacity: 0.9;
	}

	100% {
		transform: translate(-50%, -50%) scale(2.6);
		opacity: 0;
	}
}

.as-kontakt-mapa__kropka {
	position: relative;
	display: block;
	width: 16px;
	height: 16px;
	background: var(--as-mint);
	border: 3px solid #0c1a26;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 0 2px var(--as-mint);
}

.as-kontakt-mapa__dymek {
	position: absolute;
	left: 22px;
	top: -10px;
	white-space: nowrap;
	font-size: 10px;
	color: #0c1a26;
	background: var(--as-mint);
	padding: 5px 9px;
}

.as-kontakt-mapa__rog {
	position: absolute;
	top: 16px;
	left: 16px;
	font-size: 9.5px;
	color: var(--as-navy-mono);
}

.as-kontakt-mapa__google {
	position: absolute;
	bottom: 16px;
	right: 16px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 9.5px;
	color: #0c1a26;
	background: #fff;
	padding: 8px 12px;
	transition: background 0.2s ease;
}

.as-kontakt-mapa__google:hover {
	background: var(--as-mint);
}

.as-kontakt-dane {
	grid-column: span 5;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.as-kontakt-dane__kicker {
	font-size: 11px;
	color: var(--as-mint);
}

.as-kontakt-dane__naglowek {
	margin-top: 16px;
	font-size: clamp(24px, 2.4vw, 38px);
	line-height: 1.02;
	letter-spacing: -0.03em;
	color: #fff;
}

.as-kontakt-dane__karta {
	border: 1px solid var(--as-navy-border);
	background: var(--as-navy-card);
}

.as-kontakt-dane__wiersz {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 14px;
	align-items: baseline;
	padding: 16px clamp(18px, 1.8vw, 24px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.as-kontakt-dane__wiersz:last-child {
	border-bottom: 0;
}

.as-kontakt-dane__etykieta {
	font-size: 9.5px;
	color: var(--as-navy-mono);
}

.as-kontakt-dane__wartosc {
	font-size: 15px;
	line-height: 1.45;
	color: #e8f0f6;
}

/* ----------------------------------------------------------------------------
   /kontakt — slim CTA (E7); prototyp, sekcja CTA. Siatka 1fr/auto, H2
   24–44 px, akapit 52ch, przycisk = globalny as-btn (60 px, 16/600).
---------------------------------------------------------------------------- */

.as-kontakt-cta {
	border-bottom: 1px solid var(--as-ink);
}

.as-kontakt-cta__uklad {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: clamp(24px, 3vw, 48px);
	align-items: center;
	padding-top: clamp(36px, 4vw, 60px);
	padding-bottom: clamp(36px, 4vw, 60px);
}

.as-kontakt-cta__naglowek {
	font-size: clamp(24px, 2.8vw, 44px);
	line-height: 1;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.as-kontakt-cta__lead {
	margin-top: 14px;
	font-size: clamp(15px, 1.1vw, 17.6px);
	line-height: 1.55;
	color: var(--as-muted);
	max-width: 52ch;
}

@media (max-width: 860px) {
	/* m-stack prototypu dla siatek /kontakt. */
	.as-kontakt-hero__grid,
	.as-kontakt-mapa__uklad,
	.as-kontakt-cta__uklad {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}

	/* Twarde łamania projektanta obowiązują od 861 px (ROZNICE 15 i 21). */
	.as-kontakt-hero__naglowek br,
	.as-kontakt-dane__naglowek br {
		display: none;
	}

	/* m-map prototypu: niższe pole mapy na telefonie. */
	.as-kontakt-mapa__pole {
		min-height: 380px;
	}
}

/* Blok „Czego możesz się spodziewać" (E7, commit 2) — w miejscu godzin pracy
   prototypu (U9: godzin nie publikujemy), ten sam kształt: nagłówek mono
   9.5 px, wiersze 14 px co/kiedy. Obietnica raportu „3 dni robocze" to termin
   CAŁOŚCI; oś czasu /audyt rozkłada go na etapy — nie ujednolicać (W7). */
.as-kontakt-dane__oczekuj {
	padding: 16px clamp(18px, 1.8vw, 24px);
}

.as-kontakt-dane__oczekuj-naglowek {
	font-size: 9.5px;
	color: var(--as-navy-mono);
	margin-bottom: 12px;
}

.as-kontakt-dane__oczekuj-wiersz {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 5px 0;
	font-size: 14px;
}

.as-kontakt-dane__oczekuj-co {
	color: var(--as-navy-text-2);
}

.as-kontakt-dane__oczekuj-kiedy {
	color: #e8f0f6;
	font-weight: 600;
	text-align: right;
}

/* ----------------------------------------------------------------------------
   Formularz kontaktowy (E7, commit 3) — wariant komponentu as-form z E5
   na karcie /kontakt; prototyp „ArtSearch Kontakt.dc.html", karta „Napisz
   do nas". Bez kroków: nowe elementy to plakietka w prawym górnym rogu
   (10 px, mono-szarość trzeciorzędna — miejsce licznika kroków z /audyt),
   rząd dwóch pól, pole wieloliniowe (min 118 px, 13/16 px, resize pionowy),
   przycisk na całą szerokość karty (56 px z prototypu) i CTA na
   potwierdzeniu (52 px). Pola 16 px, nie 15 z prototypu (ROZNICE 23).
---------------------------------------------------------------------------- */

.as-form__plakietka {
	font-size: 10px;
	color: var(--as-mono-faint);
	text-align: right;
}

.as-form--kontakt .as-form__cialo {
	padding: clamp(22px, 2.2vw, 30px);
}

.as-form--kontakt .as-form__grupa {
	margin-top: 14px;
}

.as-form__rzad {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.as-form__rzad .as-form__grupa {
	margin-top: 0;
}

.as-form__pole--textarea {
	height: auto;
	min-height: 118px;
	padding: 13px 16px;
	resize: vertical;
	line-height: 1.5;
}

/* Bez kroków przycisk wysyłki jest widoczny także przy działających
   skryptach — reguła E5 chowa go pod as-js poza krokiem 3 formularza
   audytu, a formularz kontaktowy kroków nie ma (wykryte na makiecie). */
.as-form--kontakt .as-form__wyslij,
.as-js .as-form--kontakt .as-form__wyslij {
	display: inline-flex;
	width: 100%;
	margin-top: 20px;
	height: 56px;
}

.as-form--kontakt .as-form__ok-szczyt {
	margin-bottom: 14px;
}

.as-form--kontakt .as-form__ok-lead {
	margin-bottom: 18px;
}

.as-form__ok-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 52px;
	padding: 0 22px;
	background: var(--as-green);
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	transition: background var(--as-t);
}

.as-form__ok-cta:hover {
	background: var(--as-green-hover);
}

@media (max-width: 860px) {
	.as-form__rzad {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}

/* --------------------------------------------------------------------------
   /o-nas — Hero (E7, commit 5); prototyp „ArtSearch O nas.dc.html", sekcja
   Hero. Siatka 7/5, H1 = --as-h1, lead 52ch; karta cytatu na atramencie
   (kicker #5fd1ad = --as-mint-hover, cytat Expanded 20–28 px, chipy ośmiu
   punktów 9 px z miętowym kwadratem 5 px).
   -------------------------------------------------------------------------- */

.as-onas-hero {
	border-bottom: 1px solid var(--as-ink);
}

.as-onas-hero__grid {
	align-items: start;
	padding-top: clamp(40px, 4.5vw, 72px);
	padding-bottom: clamp(40px, 4.5vw, 72px);
}

.as-onas-hero__tresc {
	grid-column: span 7;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(22px, 2.2vw, 32px);
}

.as-onas-hero__kicker {
	font-size: 11px;
	color: var(--as-green);
}

.as-onas-hero__naglowek {
	font-size: var(--as-h1);
	line-height: 0.94;
	letter-spacing: -0.03em;
}

.as-onas-hero__naglowek span {
	color: var(--as-green);
}

.as-onas-hero__lead {
	font-size: var(--as-lead);
	line-height: 1.55;
	color: var(--as-muted-2);
	max-width: 52ch;
}

.as-onas-hero__karta {
	grid-column: span 5;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	border: 1px solid var(--as-ink);
	background: var(--as-ink);
	color: #fff;
	padding: clamp(24px, 2.4vw, 34px);
}

.as-onas-hero__karta-kicker {
	font-size: 9.5px;
	color: var(--as-mint-hover);
}

.as-onas-hero__cytat {
	margin-top: 18px;
	font-weight: 700;
	font-size: clamp(20px, 1.9vw, 28px);
	line-height: 1.14;
	letter-spacing: -0.02em;
}

.as-onas-hero__chipy {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.as-onas-hero__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 9px;
	color: var(--as-navy-text-2);
	padding: 6px 9px;
	border: 1px solid rgba(255, 255, 255, 0.18);
}

.as-onas-hero__chip::before {
	content: '';
	width: 5px;
	height: 5px;
	background: var(--as-mint);
}

/* --------------------------------------------------------------------------
   /o-nas — (01) W co wierzymy (E7, commit 5); prototyp, sekcja Wierzymy.
   Ciemna sekcja-przełamanie jak #raport (gradient + siatka 52 px). Lewa 5/12:
   kicker, H2 Expanded 28–54 px, dwa akapity 44ch; prawa 7/12: panel
   „System widoczności" — siatka 4×2 ośmiu punktów 01–08 (komórki 82 px,
   numer #4f6879 i nazwa #e8f0f6 — wartości jednorazowe z prototypu),
   stopka z miętową poświatą rgba(45,212,160,.06).
   -------------------------------------------------------------------------- */

.as-onas-wierzymy {
	position: relative;
	color: #fff;
	border-bottom: 1px solid var(--as-ink);
	overflow: hidden;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(180deg, var(--as-navy-hi), var(--as-navy-lo));
	background-size: 52px 52px, 52px 52px, 100% 100%;
}

.as-onas-wierzymy__uklad {
	align-items: center;
	padding-top: clamp(48px, 5.5vw, 88px);
	padding-bottom: clamp(48px, 5.5vw, 88px);
}

.as-onas-wierzymy__tresc {
	grid-column: span 5;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.as-onas-wierzymy__kicker {
	font-size: 11px;
	color: var(--as-mint);
}

.as-onas-wierzymy__naglowek {
	font-size: clamp(28px, 3.4vw, 54px);
	line-height: 1;
	letter-spacing: -0.03em;
	color: #fff;
}

.as-onas-wierzymy__akapit {
	font-size: clamp(15px, 1.1vw, 17px);
	line-height: 1.6;
	color: var(--as-navy-text);
	max-width: 44ch;
}

.as-onas-wierzymy__panel {
	grid-column: span 7;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: var(--as-navy-card);
}

.as-onas-wierzymy__panel-szczyt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.as-onas-wierzymy__panel-tytul {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 10px;
	color: var(--as-navy-text-2);
}

.as-onas-wierzymy__panel-tytul::before {
	content: '';
	width: 8px;
	height: 8px;
	background: var(--as-mint);
	animation: asGlow 2.6s ease-in-out infinite;
}

.as-onas-wierzymy__panel-dopisek {
	font-size: 9.5px;
	color: var(--as-navy-mono);
}

.as-onas-wierzymy__siatka {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.as-onas-wierzymy__punkt {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 15px;
	min-height: 82px;
	border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.as-onas-wierzymy__punkt:nth-child(4n) {
	border-right: 0;
}

.as-onas-wierzymy__punkt:nth-child(n + 5) {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.as-onas-wierzymy__punkt-nr {
	font-size: 9px;
	color: #4f6879;
}

.as-onas-wierzymy__punkt-nazwa {
	font-size: 13px;
	font-weight: 600;
	color: #e8f0f6;
	line-height: 1.2;
}

.as-onas-wierzymy__panel-stopka {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(45, 212, 160, 0.06);
}

.as-onas-wierzymy__panel-stopka-tekst {
	font-size: 9.5px;
	color: var(--as-navy-mono);
}

.as-onas-wierzymy__panel-cel {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 700;
	font-size: 15px;
	color: var(--as-mint);
}

.as-onas-wierzymy__panel-cel::before {
	content: '';
	width: 7px;
	height: 7px;
	background: var(--as-mint);
}

@media (max-width: 860px) {
	/* m-stack prototypu dla siatek hero i (01). */
	.as-onas-hero__grid,
	.as-onas-wierzymy__uklad {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}

	/* Twarde łamania projektanta obowiązują od 861 px (ROZNICE 15 i 21). */
	.as-onas-hero__naglowek br,
	.as-onas-wierzymy__naglowek br {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   /o-nas — szczyt sekcji (02) i (04) (E7, commit 6): H2 28–58 px z kickerem
   wewnątrz (0.3em, zieleń, odstęp .16em) na 7 kolumnach, nota na kolumnach
   9–12 przy pionowym hairline. Wspólny dla „Jak pracujemy" i „Czym się
   różnimy" — w prototypie oba szczyty są identyczne co do wartości.
   -------------------------------------------------------------------------- */

.as-onas-sekcja {
	border-bottom: 1px solid var(--as-ink);
}

.as-onas-szczyt {
	gap: clamp(20px, 2.5vw, 40px);
	align-items: end;
	padding-top: clamp(40px, 4.5vw, 72px);
	padding-bottom: clamp(28px, 3vw, 44px);
}

.as-onas-szczyt__naglowek {
	grid-column: span 7;
	font-size: var(--as-h2);
	line-height: 1;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.as-onas-szczyt__kicker {
	display: block;
	margin-bottom: 16px;
	font-size: 0.3em;
	color: var(--as-green);
	letter-spacing: 0.16em;
}

.as-onas-szczyt__nota {
	grid-column: 9 / span 4;
	font-size: 15px;
	line-height: 1.6;
	color: var(--as-muted);
	border-left: 1px solid var(--as-ink);
	padding-left: 24px;
}

/* (02) Jak pracujemy — cztery kroki w czterech kolumnach (as-trojka jest
   komponentem trzech kolumn — W8); paddingi 28–40 / 18–28 px, h4 18–23 px,
   opisy 14 px — z prototypu. */
.as-onas-metoda__kroki {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid var(--as-ink);
	padding-bottom: clamp(44px, 5vw, 72px);
}

.as-onas-metoda__krok {
	padding: clamp(28px, 2.6vw, 40px) clamp(18px, 1.8vw, 28px) 0;
	border-right: 1px solid var(--as-line);
}

.as-onas-metoda__krok:last-child {
	border-right: 0;
}

.as-onas-metoda__nr {
	font-size: 11px;
	color: var(--as-green);
}

.as-onas-metoda__tytul {
	margin: 14px 0 10px;
	font-size: clamp(18px, 1.5vw, 23px);
}

.as-onas-metoda__opis {
	font-size: 14px;
	line-height: 1.55;
	color: var(--as-muted);
}

/* --------------------------------------------------------------------------
   /o-nas — (03) Ludzie (E7, commit 6); prototyp, sekcja Ludzie + decyzja
   Artura 2026-09-02. Lewa 5/12: kicker, H2 Expanded 28–50 px, akapit 44ch,
   trzy chipy 10 px z zielonym kwadratem. Prawa 7/12: rama atramentowa 8 px,
   pole 300–460 px; w polu ALBO grafika CSS (bez obrazka wyróżniającego),
   ALBO zdjęcie (object-fit cover); nad nimi nakładka gradientowa od dołu
   (rgba(11,23,34,.72) → 58 %) i podpis 15–18 px/600. Plakietka renderuje
   się tylko przy niepustym polu (u nas puste).
   Grafika: gradient sekcji-przełamań, siatka 44 px; osiem kwadracików 10 px
   w pozycjach węzłów z config/site.php (te same x/y co mapa punktów styku),
   osiem cienkich linii od środka do każdego punktu (POŁĄCZONE — poprawka 1
   odbioru makiety), środek 14 px miętowy z dwoma pierścieniami kwadratowymi
   (asKonstelacja 2,6 s, drugi +1,3 s).
   -------------------------------------------------------------------------- */

.as-onas-ludzie__uklad {
	gap: clamp(28px, 3.5vw, 56px);
	align-items: center;
	padding-top: clamp(48px, 5vw, 80px);
	padding-bottom: clamp(48px, 5vw, 80px);
}

.as-onas-ludzie__tresc {
	grid-column: span 5;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
}

.as-onas-ludzie__kicker {
	font-size: 11px;
	color: var(--as-green);
}

.as-onas-ludzie__naglowek {
	font-size: clamp(28px, 3.2vw, 50px);
	line-height: 1;
	letter-spacing: -0.03em;
}

.as-onas-ludzie__akapit {
	font-size: clamp(15px, 1.1vw, 17px);
	line-height: 1.6;
	color: var(--as-muted-2);
	max-width: 44ch;
}

.as-onas-ludzie__hasla {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
}

.as-onas-ludzie__haslo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 10px;
	color: var(--as-ink);
	padding: 9px 13px;
	border: 1px solid var(--as-ink);
}

.as-onas-ludzie__haslo::before {
	content: '';
	width: 6px;
	height: 6px;
	background: var(--as-green);
}

.as-onas-ludzie__rama {
	grid-column: span 7;
	border: 1px solid var(--as-ink);
	background: var(--as-ink);
	padding: 8px;
}

.as-onas-ludzie__pole {
	position: relative;
	overflow: hidden;
	min-height: clamp(300px, 32vw, 460px);
	display: flex;
	align-items: flex-end;
}

.as-onas-ludzie__zdjecie,
.as-onas-ludzie__grafika {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.as-onas-ludzie__zdjecie {
	object-fit: cover;
}

.as-onas-ludzie__grafika {
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(180deg, var(--as-navy-hi), var(--as-navy-lo));
	background-size: 44px 44px, 44px 44px, 100% 100%;
	overflow: hidden;
}

/* Osiem linii od środka do punktów — technika linii mapy strony głównej
   (SVG 0–100, non-scaling-stroke), bez kreskowania i bez animacji przepływu:
   grafika statyczna, nie mapa. Poprawka 1 odbioru makiety (2026-09-02):
   punkty mają być POŁĄCZONE. */
.as-onas-ludzie__linie {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.as-onas-ludzie__linia {
	stroke: rgba(45, 212, 160, 0.32);
	stroke-width: 1;
}

/* Węzły: pozycje x/y z config/site.php (punkty_styku), inline jak na mapie
   — wartość wyliczana w locie, dopuszczony wyjątek kontraktu. */
.as-onas-ludzie__punkt {
	position: absolute;
	width: 10px;
	height: 10px;
	background: #e8f0f6;
	opacity: 0.85;
	transform: translate(-50%, -50%);
}

.as-onas-ludzie__srodek {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 14px;
	height: 14px;
	background: var(--as-mint);
	transform: translate(-50%, -50%);
	box-shadow: 0 0 0 3px var(--as-navy-hi), 0 0 0 5px var(--as-mint);
}

.as-onas-ludzie__pierscien {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 26px;
	height: 26px;
	border: 2px solid var(--as-mint);
	animation: asKonstelacja 2.6s ease-out infinite;
}

.as-onas-ludzie__pierscien--drugi {
	animation-delay: 1.3s;
}

@keyframes asKonstelacja {
	0% {
		transform: translate(-50%, -50%) scale(0.6);
		opacity: 0.9;
	}

	100% {
		transform: translate(-50%, -50%) scale(2.6);
		opacity: 0;
	}
}

.as-onas-ludzie__nakladka {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(0deg, rgba(11, 23, 34, 0.72) 0%, transparent 58%);
}

.as-onas-ludzie__plakietka {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	font-size: 9px;
	color: var(--as-green);
	background: var(--as-card);
	border: 1px solid var(--as-ink);
	padding: 4px 8px;
}

.as-onas-ludzie__podpis {
	position: relative;
	z-index: 2;
	padding: 22px;
	color: #fff;
	font-size: clamp(15px, 1.2vw, 18px);
	line-height: 1.4;
	font-weight: 600;
	max-width: 32ch;
}

/* --------------------------------------------------------------------------
   /o-nas — Zacznij tutaj (E7, commit 6); prototyp, sekcja CTA. Solid navy
   + siatka 52 px, 1.1fr/0.9fr; H2 Expanded 32–72 px, lead 46ch, przyciski
   64 px (główny 32 px paddingu, telefon obrysowy rgba .32); karta faktów:
   liczba Expanded 28–42 px mięta (min-width 76), opis 14 px.
   -------------------------------------------------------------------------- */

.as-onas-cta {
	position: relative;
	color: #fff;
	border-bottom: 1px solid var(--as-ink);
	overflow: hidden;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 52px 52px;
	background-color: var(--as-navy);
}

.as-onas-cta__uklad {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(36px, 5vw, 72px);
	align-items: center;
	padding-top: clamp(56px, 6vw, 96px);
	padding-bottom: clamp(56px, 6vw, 96px);
}

.as-onas-cta__tresc {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(20px, 2vw, 28px);
}

.as-onas-cta__kicker {
	font-size: 11px;
	color: var(--as-mint);
	letter-spacing: 0.16em;
}

.as-onas-cta__naglowek {
	font-size: clamp(32px, 4.2vw, 67.2px);
	line-height: 0.96;
	letter-spacing: -0.03em;
	color: #fff;
	text-wrap: balance;
}

.as-onas-cta__lead {
	font-size: clamp(16px, 1.4vw, 20px);
	line-height: 1.55;
	color: var(--as-navy-text-2);
	max-width: 46ch;
}

.as-onas-cta__przyciski {
	margin-top: clamp(8px, 1vw, 16px);
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.as-onas-cta__glowny {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	height: 64px;
	padding: 0 32px;
	background: var(--as-green);
	color: #fff;
	font-weight: 700;
	font-size: clamp(16px, 1.4vw, 19px);
	transition: background var(--as-t);
}

.as-onas-cta__glowny:hover {
	background: var(--as-green-hover);
}

.as-onas-cta__telefon {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 64px;
	padding: 0 28px;
	border: 1px solid rgba(255, 255, 255, 0.32);
	color: #fff;
	font-weight: 600;
	font-size: clamp(15px, 1.3vw, 18px);
	transition: border-color var(--as-t);
}

.as-onas-cta__telefon:hover {
	border-color: #fff;
}

.as-onas-cta__karta {
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: var(--as-navy-card);
}

.as-onas-cta__karta-naglowek {
	padding: clamp(22px, 2.2vw, 30px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 9.5px;
	color: var(--as-navy-mono);
}

.as-onas-cta__fakt {
	display: flex;
	align-items: baseline;
	gap: 18px;
	padding: clamp(18px, 1.8vw, 26px) clamp(22px, 2.2vw, 30px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.as-onas-cta__fakt:last-child {
	border-bottom: 0;
}

.as-onas-cta__fakt-liczba {
	flex: none;
	min-width: 76px;
	font-weight: 700;
	font-size: clamp(28px, 2.8vw, 42px);
	line-height: 1;
	color: var(--as-mint);
	letter-spacing: -0.03em;
}

.as-onas-cta__fakt-opis {
	font-size: 14px;
	line-height: 1.4;
	color: var(--as-navy-text-2);
}

@media (max-width: 860px) {
	/* m-stack prototypu dla siatek (02)–(04) i sekcji końcowej. */
	.as-onas-szczyt,
	.as-onas-ludzie__uklad,
	.as-onas-cta__uklad {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}

	.as-onas-ludzie__naglowek br,
	.as-onas-cta__naglowek br {
		display: none;
	}

	/* m-flatx prototypu: nota i kroki bez bocznych ramek i paddingu. */
	.as-onas-szczyt__nota {
		border-left: 0;
		padding-left: 0;
	}

	.as-onas-metoda__kroki {
		display: flex;
		flex-direction: column;
		gap: 28px;
	}

	.as-onas-metoda__krok {
		border-right: 0;
		padding-left: 0;
		padding-right: 0;
	}
}

/* ----------------------------------------------------------------------------
   Przegląd mobilny (E8, commit 7): pola dotykowe małych odnośników tekstowych.
   Pomiar przy 390 px: odnośniki stopki 16 px wysokości, „Zamów pełny audyt"
   pod kartą skanu 19 px, „Zobacz landing" w wierszu selektora 17 px,
   e-mail i telefon w hero /kontakt 19–24 px, powrót w stopce slim 14 px —
   poniżej minimum 24 px (WCAG 2.5.8). Powiększenie WYŁĄCZNIE pola
   dotykowego: padding skompensowany ujemnym marginesem, render identyczny
   co do piksela (dowód: _dowody/E8/). Tylko ≤ 860 px.
---------------------------------------------------------------------------- */

@media (max-width: 860px) {
	.as-footer__link {
		padding: 6px 0;
		margin: -6px 0;
	}

	.as-footer__link + .as-footer__link {
		margin-top: 6px; /* 12 px odstępu reguły stopki minus 6 px paddingu */
	}

	.as-footer__back {
		padding: 8px 0;
		margin: -8px 0;
	}

	.as-hero__audyt-link {
		padding-top: 6px;
		margin-top: 8px; /* 14 px reguły odnośnika minus 6 px paddingu */
	}

	/* Odnośnik wiersza selektora ma od formy B własne 36 px — bez dopłaty. */

	.as-kontakt-hero__telefon,
	.as-kontakt-hero__mail {
		padding: 6px 0;
		margin: -6px 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.as-site *,
	.as-site *::before,
	.as-site *::after {
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}