/* Strona "O nas": Sekcja 1 (hero). Renderowana przez page-o-nas.php,
   ladowana wylacznie przez odwolai_v2_is_about_page(). Wszystkie selektory
   izolowane pod .oai-site .oai-about-hero, osobna przestrzen klas od
   pozostalych podstron. Sekcje 2-6 tej strony nie zostaly jeszcze wdrozone -
   ten plik zawiera wylacznie CSS Sekcji 1 (Hero), zgodnie z zakresem
   biezacego zadania.

   Modul po prawej to jeden wspolny, otwarty "dossier" (DECYZJA, KOSZTORYS,
   DOKUMENTY, SPRAWA + mocniejsze domkniecie), nie cztery karty ani cztery
   przyciski: pojedyncza wspolna rama (border + radius-l), cztery pozycje w
   jednej semantycznej liscie rozdzielone cienkimi separatorami (ten sam
   generyczny mechanizm co w innych juz zaakceptowanych modulach tej strony -
   .oai-how-page-results__item, .oai-problems-damages-hero), a domkniecie
   "Co z nich naprawdę wynika?" oddzielone grubsza, cyjanowa linia jako
   wizualny akcent koncowy. Kazda pozycja ma dekoracyjny kwadracik ::before w
   cyjanie (aria-hidden przez pseudo-element, nie wchodzi do drzewa
   dostepnosci) budujacy typograficzny, nie ikonowy, akcent. Modul jest w
   pelni statyczny: bez hover, bez linkow, bez JavaScriptu, bez animacji -
   lista pozostaje czytelna jako zwykla <ul> nawet bez CSS.

   Uklad dwukolumnowy (tresc / modul dossier) jest celowo blizszy 50/50 (nie
   52/48 jak modul przeplywu Sekcji 1 strony "Jak to dziala") - zgodnie z
   zadaniem, ktore wprost okresla ten uklad jako "okolo 50/50". Wlacza sie od
   1024px, ten sam prog dwukolumnowy uzywany konsekwentnie na pozostalych
   podstronach projektu. Ponizej tego progu (caly tablet i mobile) hero jest
   w pelni jednokolumnowe: tresc nad modulem dossier, zgodnie z bezpieczna
   zasada stosowana konsekwentnie w calym projekcie (brak dostepu do
   rzeczywistego renderu). Breadcrumb ma tu dwa poziomy (Strona glowna,
   biezaca "O nas"), ta sama konstrukcja co breadcrumb hero stron
   /jak-to-dziala/ i /problemy-i-szkody/, we wlasnej przestrzeni klas
   .oai-about-hero__breadcrumb*. */

.oai-site .oai-about-hero {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 48px 20px;
	background-color: var(--oai-color-white);
}

.oai-site .oai-about-hero__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

/* Breadcrumb (dwa poziomy: strona glowna, biezaca) */

.oai-site .oai-about-hero__breadcrumb {
	width: 100%;
	margin: 0 0 32px;
}

.oai-site .oai-about-hero__breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oai-site .oai-about-hero__breadcrumb-item {
	display: flex;
	align-items: center;
	font-size: 14px;
	line-height: 1.4;
}

.oai-site .oai-about-hero__breadcrumb-item + .oai-about-hero__breadcrumb-item > .oai-about-hero__breadcrumb-current::before {
	content: "/\00A0";
	margin: 0 8px 0 8px;
	font-size: 14px;
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-about-hero__breadcrumb-current {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-about-hero__breadcrumb-link {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--oai-color-navy-muted);
	text-decoration: none;
	transition: color var(--oai-transition-fast), text-decoration-color var(--oai-transition-fast);
}

.oai-site .oai-about-hero__breadcrumb-link:hover {
	color: var(--oai-color-navy);
	text-decoration: underline;
	text-decoration-color: var(--oai-color-cyan);
}

html[data-oai-input="keyboard"] .oai-site .oai-about-hero__breadcrumb-link:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Uklad: tresc + modul dossier (jednokolumnowo do 1024px) */

.oai-site .oai-about-hero__layout {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.oai-site .oai-about-hero__content {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-about-hero__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-about-hero__title {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-about-hero__lead {
	margin: 0 0 28px;
	max-width: 560px;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-about-hero__ctas {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
}

.oai-site .oai-about-hero__cta {
	width: 100%;
}

/* Modul dossier: jeden wspolny, otwarty zestaw czterech hasel + domkniecie */

.oai-site .oai-about-hero__dossier {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-l);
	padding: 8px 28px;
	background-color: var(--oai-color-white);
}

.oai-site .oai-about-hero__dossier-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.oai-site .oai-about-hero__dossier-item {
	padding: 18px 0;
	max-width: 100%;
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-about-hero__dossier-item::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 12px;
	background-color: var(--oai-color-cyan);
	vertical-align: middle;
}

.oai-site .oai-about-hero__dossier-item + .oai-about-hero__dossier-item {
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-about-hero__dossier-closing {
	margin: 0;
	padding: 22px 0 26px;
	max-width: 100%;
	border-top: 2px solid var(--oai-color-cyan);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Tablet od 768px: wieksza typografia, CTA w jednym rzedzie */

@media (min-width: 768px) {
	.oai-site .oai-about-hero {
		padding: 64px 40px;
	}

	.oai-site .oai-about-hero__title {
		font-size: 2rem;
	}

	.oai-site .oai-about-hero__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-about-hero__ctas {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	.oai-site .oai-about-hero__cta {
		width: auto;
	}
}

/* Desktop od 1024px: dwie kolumny okolo 50/50 (ten sam prog dwukolumnowy co
   pozostale podstrony projektu) */

@media (min-width: 1024px) {
	.oai-site .oai-about-hero__layout {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: start;
		gap: 56px;
	}

	.oai-site .oai-about-hero__content {
		max-width: 100%;
	}

	.oai-site .oai-about-hero__lead {
		max-width: 100%;
	}
}

@media (min-width: 1280px) {
	.oai-site .oai-about-hero {
		padding: 80px 40px;
	}

	.oai-site .oai-about-hero__title {
		font-size: 2.25rem;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-about-hero {
		padding: 40px 16px;
	}

	.oai-site .oai-about-hero__title {
		font-size: 1.5rem;
	}

	.oai-site .oai-about-hero__dossier {
		padding: 4px 20px;
	}

	.oai-site .oai-about-hero__dossier-item {
		font-size: 1.0625rem;
	}
}

/* ==========================================================================
   Sekcja 2: Dlaczego powstalo OdwolAI
   Jasna, nieklikalna sekcja wyjasniajaca konkretny problem, z ktorego
   wyrosl serwis - wyraznie inna od Hero. Bardzo subtelny odcien granatu
   (rgba(1,2,66,0.02)) jako tlo calej sekcji: ten sam, juz zaakceptowany
   token uzywany jako neutralne tlo Sekcji 5 strony "Jak to dziala"
   (.oai-how-page-specialists, page-how-it-works.css) - odroznia sekcje od
   bialego Hero bez wprowadzania nowego, przypadkowego koloru.

   Prawy modul trzech pytan NIE jest zamknieta rama jak modul "dossier"
   Hero (border ze wszystkich stron + radius-l): to celowa roznica
   konstrukcyjna wymagana zadaniem. Zamiast tego modul ma pojedyncza,
   cienka pionowa linie cyjanowa po lewej stronie calego bloku (jeden
   wspolny akcent spinajacy caly modul, nie technika timeline: brak
   kropek/wezlow przy kazdej pozycji, brak polaczen miedzy elementami) oraz
   cienkie poziome separatory miedzy pytaniami - ten sam generyczny
   mechanizm oddzielania pozycji listy co w innych juz zaakceptowanych
   modulach tej strony (.oai-how-page-specialists__item,
   .oai-about-hero__dossier-item), przepisany na wlasne wartosci. Elementy
   nie sa linkami: brak href, brak hover, brak cursor:pointer, brak
   strzalki kierunkowej - w bezposrednim odroznieniu od w pelni klikalnych
   sciezek Hero strony /problemy-i-szkody/ (.oai-problems-damages-hero__path).

   Uklad dwukolumnowy (intro ~48%, modul pytan ~52%) wlacza sie od 1024px,
   ten sam prog dwukolumnowy uzywany konsekwentnie na pozostalych
   podstronach projektu. Ponizej tego progu (caly tablet i mobile) sekcja
   jest w pelni jednokolumnowa: intro nad modulem pytan, zgodnie z
   bezpieczna zasada stosowana konsekwentnie w calym projekcie (brak
   dostepu do rzeczywistego renderu). */

.oai-site .oai-about-why {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 48px 20px;
	background-color: rgba(1, 2, 66, 0.02);
}

.oai-site .oai-about-why__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.oai-site .oai-about-why__intro {
	min-width: 0;
	max-width: 640px;
}

.oai-site .oai-about-why__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-about-why__heading {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-about-why__text {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-about-why__text:last-child {
	margin-bottom: 0;
}

/* Modul trzech pytan: otwarta konstrukcja z pojedyncza pionowa linia
   cyjanowa, bez zamknietej ramy i bez klikalnych wierszy */

.oai-site .oai-about-why__questions {
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 0;
	max-width: 100%;
	border-left: 3px solid var(--oai-color-cyan);
}

.oai-site .oai-about-why__question {
	box-sizing: border-box;
	padding: 20px 0 20px 24px;
	max-width: 100%;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-about-why__question + .oai-about-why__question {
	border-top: 1px solid var(--oai-color-border);
}

@media (min-width: 768px) {
	.oai-site .oai-about-why {
		padding: 64px 40px;
	}

	.oai-site .oai-about-why__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-about-why__text {
		font-size: 1.0625rem;
	}

	.oai-site .oai-about-why__question {
		font-size: 1.1875rem;
		padding: 22px 0 22px 28px;
	}
}

/* Od 1024px: intro po lewej (~48%), modul pytan po prawej (~52%) - ten sam,
   juz ugruntowany na tej stronie prog dwukolumnowy (patrz uzasadnienie na
   poczatku bloku). */

@media (min-width: 1024px) {
	.oai-site .oai-about-why__inner {
		flex-direction: row;
		align-items: flex-start;
		gap: 56px;
	}

	.oai-site .oai-about-why__intro {
		flex: 0 1 48%;
		max-width: 48%;
	}

	.oai-site .oai-about-why__questions {
		flex: 0 1 52%;
		max-width: 52%;
	}
}

@media (min-width: 1280px) {
	.oai-site .oai-about-why {
		padding: 80px 40px;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-about-why {
		padding: 40px 16px;
	}

	.oai-site .oai-about-why__question {
		padding: 18px 0 18px 20px;
	}
}

/* ==========================================================================
   Sekcja 3: Specjalista i system
   Jeden z glownych elementow zaufania strony - jednoznacznie pokazuje, ze
   czlowiek przygotowuje finalna tresc, a system wylacznie pomaga
   porzadkowac material. Tlo calej sekcji pozostaje jasne (biel) - kontrast
   granat/biel wystepuje WYLACZNIE wewnatrz jednego zamknietego,
   zaokraglonego modulu (overflow:hidden + radius-l), nie jako
   pelnoszerokosciowe granatowe tlo calej sekcji. To celowa, wymagana
   zadaniem roznica wzgledem Sekcji 3 strony "Jak to dziala"
   (.oai-how-page-process, pelne granatowe tlo calej sekcji) - unikamy
   powtorzenia tego samego wzorca w obrebie tego samego motywu.

   Modul jest asymetryczny: czesc "specjalista" (~58%) ma granatowe tlo i
   jasny tekst (ten sam juz zaakceptowany zestaw tokenow "jasny tekst na
   granacie" - biel na H3, rgba(255,255,255,0.85) na opisie - co Sekcja 3
   strony "Jak to dziala" i Sekcja 7 "Koncowe CTA"), czesc "system" (~42%)
   ma jasne tlo i granatowy tekst. Ta asymetria plus mocniejsza waga H3
   specjalisty (800 vs 700) buduje wymagany priorytet wizualny specjalisty
   bez dodatkowych elementow graficznych. Miedzy obiema czesciami cienki
   cyjanowy separator (border-left na desktopie, border-top na
   tablecie/mobile po stronie systemu) - ten sam generyczny mechanizm
   zmiany orientacji separatora uzywany juz w innych modulach tej strony
   (.oai-about-why__question), tu w wariancie cyjanowym zamiast
   --oai-color-border, zgodnie z wymaganiem zadania.

   Nota pod obiema czesciami ma subtelne, jasne tlo (rgba(1,2,66,0.03)) i
   mniejszy, spokojny tekst - swiadomie inna, lzejsza technika niz mocna,
   pelna granatowa nota Sekcji 6 "Co otrzymujesz" strony "Jak to dziala"
   (.oai-how-page-results__note): tu nota ma pozostac czytelna, ale nie
   moze wygladac jak ostrzezenie ani CTA.

   Uklad dwukolumnowy wlacza sie od 1024px, ten sam prog dwukolumnowy
   uzywany konsekwentnie na pozostalych podstronach projektu. Ponizej tego
   progu (caly tablet i mobile) modul jest w pelni jednokolumnowy:
   specjalista nad systemem, separator pionowy zmienia sie w poziomy. */

.oai-site .oai-about-work-model {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 48px 20px;
	background-color: var(--oai-color-white);
}

.oai-site .oai-about-work-model__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-about-work-model__intro {
	min-width: 0;
	max-width: 680px;
	margin: 0 0 32px;
}

.oai-site .oai-about-work-model__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-about-work-model__heading {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-about-work-model__lead {
	margin: 0;
	max-width: 100%;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-about-work-model__module {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	border-radius: var(--oai-radius-l);
	overflow: hidden;
}

.oai-site .oai-about-work-model__areas {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.oai-site .oai-about-work-model__area {
	box-sizing: border-box;
	padding: 32px 24px;
	min-width: 0;
}

.oai-site .oai-about-work-model__area--specialist {
	background-color: var(--oai-color-navy);
}

.oai-site .oai-about-work-model__area--system {
	background-color: var(--oai-color-white);
	border-top: 2px solid var(--oai-color-cyan);
}

.oai-site .oai-about-work-model__area-heading {
	margin: 0 0 10px;
	max-width: 100%;
	font-size: 1.125rem;
	line-height: 1.35;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-about-work-model__area--specialist .oai-about-work-model__area-heading {
	font-weight: 800;
	color: var(--oai-color-white);
}

.oai-site .oai-about-work-model__area--system .oai-about-work-model__area-heading {
	font-weight: 700;
	color: var(--oai-color-navy);
}

.oai-site .oai-about-work-model__area-text {
	margin: 0;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.6;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-about-work-model__area--specialist .oai-about-work-model__area-text {
	color: rgba(255, 255, 255, 0.85);
}

.oai-site .oai-about-work-model__area--system .oai-about-work-model__area-text {
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-about-work-model__note {
	box-sizing: border-box;
	margin: 0;
	padding: 18px 24px;
	background-color: rgba(1, 2, 66, 0.03);
	max-width: 100%;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

@media (min-width: 768px) {
	.oai-site .oai-about-work-model {
		padding: 64px 40px;
	}

	.oai-site .oai-about-work-model__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-about-work-model__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-about-work-model__area {
		padding: 40px 32px;
	}

	.oai-site .oai-about-work-model__area-heading {
		font-size: 1.1875rem;
	}

	.oai-site .oai-about-work-model__area-text {
		font-size: 1rem;
	}

	.oai-site .oai-about-work-model__note {
		padding: 20px 32px;
		font-size: 0.9375rem;
	}
}

/* Od 1024px: asymetryczny uklad dwukolumnowy (specjalista ~58%, system
   ~42%) w jednym wspolnym rzedzie - ten sam, juz ugruntowany na tej
   stronie prog dwukolumnowy (patrz uzasadnienie na poczatku bloku).
   Separator zmienia orientacje z border-top na border-left. */

@media (min-width: 1024px) {
	.oai-site .oai-about-work-model__areas {
		flex-direction: row;
		align-items: stretch;
	}

	.oai-site .oai-about-work-model__area--specialist {
		flex: 0 0 58%;
		max-width: 58%;
	}

	.oai-site .oai-about-work-model__area--system {
		flex: 0 0 42%;
		max-width: 42%;
		border-top: none;
		border-left: 2px solid var(--oai-color-cyan);
	}
}

@media (max-width: 360px) {
	.oai-site .oai-about-work-model {
		padding: 40px 16px;
	}

	.oai-site .oai-about-work-model__area {
		padding: 24px 20px;
	}

	.oai-site .oai-about-work-model__note {
		padding: 16px 20px;
	}
}

/* ==========================================================================
   Sekcja 4: Zasady pracy
   Cztery niezalezne zasady - NIE proces chronologiczny: brak numeracji
   (01-04), brak osi, brak timeline, brak strzalek, brak progresu. Sekcja
   ma byc lzejsza wizualnie niz granatowy modul Sekcji 3 - w pelni jasna,
   typograficzna, redakcyjna. Tlo bialе (ten sam token co Hero i modul
   Sekcji 3), zeby wyraznie odciac sie od granatu poprzedniej sekcji.

   Uklad: intro (eyebrow + H2) po lewej w waskiej kolumnie (~36%), cztery
   otwarte wiersze po prawej w szerszej kolumnie (~62%) od 1024px - inne
   proporcje niz Sekcja 2 (intro ~48%, modul pytan ~52%), zgodnie z
   wymaganiem zadania (36-38% / 62-66%). Separatory miedzy wierszami sa
   neutralne (--oai-color-border), NIE cyjanowe jak w Sekcji 2 i 3 - to
   celowe zroznicowanie akcentu miedzy sekcjami tej strony, tak zeby kazda
   sekcja miala wlasny, rozpoznawalny sygnal wizualny zamiast powielac ten
   sam cyjanowy motyw wszedzie.

   Kazdy wiersz to <li> z H3 nad opisem - ten sam generyczny mechanizm
   separatora "item + item { border-top }" co w innych juz zaakceptowanych
   listach tej strony i strony "Jak to dziala"
   (.oai-how-page-specialists__item), przepisany na wlasne wartosci. Wiersze
   NIE sa klikalne jako calosc: brak href na <li>, brak hover na wierszu,
   brak cursor:pointer, brak znaku kierunkowego - bezposrednie, wymagane
   zadaniem odroznienie od w pelni klikalnych wierszy indeksu
   /problemy-i-szkody/ (.oai-problems-damages-decision__link) i selektora
   uslug strony "Jak to dziala" (.oai-how-page-service-choice__link).

   Wylacznie w Zasadzie 3 (trzeci <li>) trzy nazwy uslug sa prawdziwymi
   linkami tekstowymi (get_permalink 2365/2366/2368 + esc_url(), z tym samym
   bezpiecznym fallbackiem do home_url('/') co w
   section-how-it-works-service-choice.php) - stylistyka linku (granatowy
   tekst, cyjanowe podkreslenie, pogrubienie podkreslenia na hover) powtarza
   juz zaakceptowany wzorzec .oai-how-page-form-documents__privacy-link i
   .oai-how-page-service-choice__helper-link, przepisany na wlasne klasy. */

.oai-site .oai-about-principles {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 48px 20px;
	background-color: var(--oai-color-white);
}

.oai-site .oai-about-principles__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.oai-site .oai-about-principles__intro {
	min-width: 0;
	max-width: 480px;
}

.oai-site .oai-about-principles__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-about-principles__heading {
	margin: 0;
	max-width: 100%;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-about-principles__list {
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 0;
	max-width: 100%;
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-about-principles__item {
	box-sizing: border-box;
	padding: 24px 0;
}

.oai-site .oai-about-principles__item + .oai-about-principles__item {
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-about-principles__item-heading {
	margin: 0 0 8px;
	max-width: 100%;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-about-principles__item-text {
	margin: 0;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-about-principles__product-link {
	font-size: inherit;
	line-height: inherit;
	font-family: inherit;
	color: var(--oai-color-navy);
	font-weight: 600;
	text-decoration-line: underline;
	text-decoration-color: var(--oai-color-cyan);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: text-decoration-thickness var(--oai-transition-fast);
}

.oai-site .oai-about-principles__product-link:hover {
	text-decoration-thickness: 2px;
}

html[data-oai-input="keyboard"] .oai-site .oai-about-principles__product-link:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: 2px;
	border-radius: 2px;
}

@media (min-width: 768px) {
	.oai-site .oai-about-principles {
		padding: 64px 40px;
	}

	.oai-site .oai-about-principles__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-about-principles__item {
		padding: 28px 0;
	}

	.oai-site .oai-about-principles__item-text {
		font-size: 1rem;
	}
}

/* Od 1024px: intro po lewej (~36%), lista zasad po prawej (~62%) - inne
   proporcje niz Sekcja 2, zgodnie z wymaganiem zadania (patrz uzasadnienie
   na poczatku bloku). Ten sam, juz ugruntowany na tej stronie prog
   dwukolumnowy. */

@media (min-width: 1024px) {
	.oai-site .oai-about-principles__inner {
		flex-direction: row;
		align-items: flex-start;
		gap: 56px;
	}

	.oai-site .oai-about-principles__intro {
		flex: 0 1 36%;
		max-width: 36%;
	}

	.oai-site .oai-about-principles__list {
		flex: 0 1 62%;
		max-width: 62%;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-about-principles {
		padding: 40px 16px;
	}

	.oai-site .oai-about-principles__item {
		padding: 20px 0;
	}
}

/* ==========================================================================
   Sekcja 5: Kto stoi za OdwolAI
   Sekcja buduje wiarygodnosc bez budowania marki personalnej - brak imienia
   i nazwiska wlasciciela, brak zdjec, brak fikcyjnego zespolu. Tlo bialе,
   ten sam token co Hero i Sekcja 4, zeby sekcja pozostala spokojna i jasna
   po redakcyjnej Sekcji 4.

   Modul trzech punktow zaufania (Doswiadczenie / Dokumenty / Jasne zasady)
   jest celowo inny od modulu pytan Sekcji 2: zamiast pojedynczej pionowej
   linii cyjanowej po lewej stronie calego bloku (.oai-about-why__questions),
   tu cyjanowy akcent to cienka poziома linia NAD modulem
   (border-top na <ul>), a separatory miedzy trzema punktami sa neutralne
   (--oai-color-border) - inna kompozycja, inna grubosc, inna relacja z
   tresci, zgodnie z wymaganiem zadania (nie kopiowac 1:1 Sekcji 2). Modul
   jest wezszy (~44%) i krotszy niz szeroka lista czterech zasad Sekcji 4
   (~62%), z bardziej zwiezlymi punktami - kolejna celowa roznica rytmu.

   Nota prawna na pelna szerokosc pod calym ukladem domyka sekcje: spokojne,
   nieco mniejsze pismo, dwa linki tekstowe do Regulaminu Serwisu i Polityki
   prywatnosci stylowane identycznie jak juz zaakceptowany wzorzec
   .oai-about-principles__product-link (granatowy tekst, cyjanowe
   podkreslenie, pogrubienie na hover) - nie nowy system linkow, tylko
   przepisanie istniejacego wzorca na wlasne klasy. Adresy budowane przez
   home_url('/regulamin-serwisu/') i home_url('/polityka-prywatnosci/'),
   potwierdzone jako rzeczywiste, dzialajace lokalne slugi w
   template-parts/footer/site-footer.php.

   Uklad dwukolumnowy (tresc ~56%, punkty zaufania ~44%) wlacza sie od
   1024px, ten sam prog dwukolumnowy uzywany konsekwentnie na pozostalych
   podstronach projektu. Ponizej tego progu (caly tablet i mobile) sekcja
   jest w pelni jednokolumnowa: tresc nad punktami zaufania, punkty nad
   nota. */

.oai-site .oai-about-people {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 48px 20px;
	background-color: var(--oai-color-white);
}

.oai-site .oai-about-people__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.oai-site .oai-about-people__content {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-about-people__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-about-people__heading {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-about-people__text {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-about-people__text:last-child {
	margin-bottom: 0;
}

/* Modul trzech punktow zaufania: cienka cyjanowa linia nad modulem, cienkie
   neutralne separatory miedzy punktami - inna kompozycja niz pionowa linia
   Sekcji 2 (patrz uzasadnienie na poczatku bloku) */

.oai-site .oai-about-people__points {
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 0;
	max-width: 100%;
	border-top: 2px solid var(--oai-color-cyan);
}

.oai-site .oai-about-people__point {
	box-sizing: border-box;
	padding: 20px 0;
	max-width: 100%;
}

.oai-site .oai-about-people__point + .oai-about-people__point {
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-about-people__point-heading {
	margin: 0 0 6px;
	max-width: 100%;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-about-people__point-text {
	margin: 0;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-about-people__note {
	margin: 0;
	max-width: 100%;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-about-people__note-link {
	font-size: inherit;
	line-height: inherit;
	font-family: inherit;
	color: var(--oai-color-navy);
	font-weight: 600;
	text-decoration-line: underline;
	text-decoration-color: var(--oai-color-cyan);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: text-decoration-thickness var(--oai-transition-fast);
}

.oai-site .oai-about-people__note-link:hover {
	text-decoration-thickness: 2px;
}

html[data-oai-input="keyboard"] .oai-site .oai-about-people__note-link:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: 2px;
	border-radius: 2px;
}

@media (min-width: 768px) {
	.oai-site .oai-about-people {
		padding: 64px 40px;
	}

	.oai-site .oai-about-people__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-about-people__text {
		font-size: 1.0625rem;
	}

	.oai-site .oai-about-people__point-text {
		font-size: 1rem;
	}

	.oai-site .oai-about-people__note {
		font-size: 0.9375rem;
	}
}

/* Od 1024px: tresc po lewej (~56%), punkty zaufania po prawej (~44%) - ten
   sam, juz ugruntowany na tej stronie prog dwukolumnowy (patrz uzasadnienie
   na poczatku bloku). Nota pozostaje na pelna szerokosc pod calym ukladem. */

@media (min-width: 1024px) {
	.oai-site .oai-about-people__inner {
		display: grid;
		grid-template-columns: 56fr 44fr;
		align-items: start;
		gap: 56px;
	}

	.oai-site .oai-about-people__content {
		grid-column: 1;
		grid-row: 1;
	}

	.oai-site .oai-about-people__points {
		grid-column: 2;
		grid-row: 1;
	}

	.oai-site .oai-about-people__note {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-about-people {
		padding: 40px 16px;
	}

	.oai-site .oai-about-people__point {
		padding: 16px 0;
	}
}

/* ==========================================================================
   Sekcja 6: Koncowe CTA
   Ostatnia sekcja strony "O nas" - domyka strone i wskazuje dwa logiczne
   kolejne kroki, bez kierowania od razu do konkretnego produktu. Tlo
   pozostaje w pelni jasne (biel), sekcja jest otwarta (bez zamknietego
   modulu, bez ramy, bez karty) - to celowe, wymagane zadaniem odroznienie
   od zwartego granatowego boxa konczacego strone "Jak to dziala"
   (.oai-how-page-final-cta, tlo var(--oai-color-navy)). Poniewaz tlo tej
   sekcji jest jasne, oba CTA korzystaja wprost z juz istniejacego,
   globalnego systemu przyciskow .oai-cta / .oai-cta--primary /
   .oai-cta--secondary (main.css) - tego samego, ktorego uzywa juz Hero tej
   samej strony - a nie z lokalnych klas przyciskow, jakie strona
   "Jak to dziala" musiala stworzyc specjalnie pod swoje granatowe tlo.

   Uklad: tresc (eyebrow, H2, tekst) po lewej (~57%), dwa CTA po prawej
   (~43%) w jednej pionowej kolumnie, wycentrowanej wzgledem tresci - od
   1024px, ten sam prog dwukolumnowy uzywany konsekwentnie na pozostalych
   podstronach projektu. Ponizej tego progu (caly tablet i mobile) sekcja
   jest w pelni jednokolumnowa: tresc nad akcjami, glowne CTA nad drugim.
   H2 jest tu celowo wiekszy niz w Sekcjach 2-5 (1.625rem/1.875rem/2rem),
   zeby podkreslic koncowy, domykajacy charakter sekcji, bez powielania
   rozmiaru H1 Hero. Brak zamknietego modulu i standardowy dolny padding
   sekcji (48/64/80px) zapewniaja jasna przestrzen przed granatowym
   footerem (site-footer.css) - oba bloki nigdy sie nie stykaja. */

.oai-site .oai-about-final-cta {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 48px 20px;
	background-color: var(--oai-color-white);
}

.oai-site .oai-about-final-cta__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.oai-site .oai-about-final-cta__content {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-about-final-cta__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-about-final-cta__heading {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 1.625rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-about-final-cta__text {
	margin: 0;
	max-width: 100%;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-about-final-cta__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.oai-site .oai-about-final-cta__cta {
	width: 100%;
}

@media (min-width: 768px) {
	.oai-site .oai-about-final-cta {
		padding: 64px 40px;
	}

	.oai-site .oai-about-final-cta__heading {
		font-size: 1.875rem;
	}

	.oai-site .oai-about-final-cta__text {
		font-size: 1.0625rem;
	}

	.oai-site .oai-about-final-cta__cta {
		width: auto;
	}
}

/* Od 1024px: tresc po lewej (~57%), dwa CTA po prawej (~43%), pionowo
   wycentrowane wzgledem tresci - ten sam, juz ugruntowany na tej stronie
   prog dwukolumnowy (patrz uzasadnienie na poczatku bloku). */

@media (min-width: 1024px) {
	.oai-site .oai-about-final-cta__inner {
		flex-direction: row;
		align-items: center;
		gap: 56px;
	}

	.oai-site .oai-about-final-cta__content {
		flex: 0 1 57%;
	}

	.oai-site .oai-about-final-cta__actions {
		flex: 0 1 43%;
		align-items: stretch;
	}

	.oai-site .oai-about-final-cta__cta {
		width: 100%;
	}
}

@media (min-width: 1280px) {
	.oai-site .oai-about-final-cta__heading {
		font-size: 2rem;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-about-final-cta {
		padding: 40px 16px;
	}
}