/* =============================================================
   PrecisionSeedChain 4.0 — „Ziarno i dowód" (K3, hero H5)
   Paleta: ecru / atrament / buraczany / złoto ziarna / zieleń liścia
   Fonty lokalne: Fraunces (nagłówki), Work Sans (tekst) — OFL
   ============================================================= */

@font-face {
	font-family: 'Fraunces';
	src: url('../fonts/fraunces.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
}
@font-face {
	font-family: 'Work Sans';
	src: url('../fonts/worksans.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
}

:root {
	--bg: #FAF5EC;
	--ink: #241B1E;
	--accent: #A33B5C;
	--gold: #DFA32E;
	--leaf: #4F7A46;
	--accent-pastel: #F3E2E8;
	--gold-pastel: #F7EBD2;
	--biel: #FFFFFF;
	--font-naglowki: 'Fraunces', Georgia, serif;
	--font-tekst: 'Work Sans', Arial, sans-serif;
	--promien: 22px;
	--cien: 0 14px 40px rgba(36, 27, 30, 0.12);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-tekst);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--font-naglowki); line-height: 1.14; margin: 0 0 0.55em; font-weight: 640; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
h3 { font-size: 1.22rem; font-weight: 600; }
p { margin: 0 0 1em; }

.wiersz { max-width: 1240px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }
.wiersz--waski { max-width: 780px; }

.skip-link {
	position: absolute; left: -999px; top: 0; z-index: 100;
	background: var(--ink); color: var(--biel); padding: 10px 18px; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

/* --------------------- pas brandowy (biała apla — TYLKO znaki) --------------------- */
.pas-brand { background: var(--biel); }
.pas-brand__wnetrze { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 18px 44px; padding-top: 14px; padding-bottom: 14px; }
.pas-brand__znak--pswpr { height: 56px; width: auto; flex: none; }
.pas-brand__znak--ue { height: 44px; width: auto; flex: none; }

/* pasek informacyjny o współfinansowaniu — POD znakami (nigdy między nimi) */
.pas-info { background: #F3ECDD; border-bottom: 1px solid rgba(36,27,30,0.08); }
.pas-info__tekst { margin: 0; padding: 8px 0; font-size: 0.78rem; line-height: 1.45; text-align: center; color: rgba(36,27,30,0.75); }

/* --------------------------- nagłówek/menu --------------------------- */
.naglowek { background: var(--bg); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(36,27,30,0.07); backdrop-filter: saturate(1.2); }
.naglowek__wnetrze { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 12px; padding-bottom: 12px; }
.naglowek__logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.naglowek__nazwa { font-family: var(--font-naglowki); font-weight: 640; font-size: 1.18rem; }
.naglowek__nazwa em { font-style: normal; color: var(--accent); }
.naglowek__menu { display: flex; flex-wrap: wrap; gap: clamp(10px, 2vw, 26px); }
.naglowek__menu a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.98rem; border-bottom: 2px solid transparent; padding-bottom: 2px; }
.naglowek__menu a:hover { border-bottom-color: var(--accent); }

/* ------------------------------ HERO H5 ------------------------------ */
.hero { padding: clamp(40px, 7vw, 96px) 0 clamp(48px, 7vw, 100px); overflow: hidden; }
.hero__siatka { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 5vw, 70px); align-items: center; }
.hero__kicker { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 600; color: var(--leaf); margin-bottom: 18px; }
.hero__tytul { font-size: clamp(2.35rem, 5vw, 4rem); font-weight: 680; }
.hero__lead { font-size: 1.08rem; max-width: 56ch; margin: 18px 0 26px; }

/* marker — efekt WOW: „domalowanie" podkreślenia przy załadowaniu */
.marker { position: relative; white-space: nowrap; }
.marker::after {
	content: '';
	position: absolute; left: -0.12em; right: -0.12em; bottom: 0.04em;
	height: 0.42em; z-index: -1;
	background: linear-gradient(100deg, var(--gold) 0%, #E8B84B 100%);
	border-radius: 0.21em 0.32em 0.18em 0.3em;
	transform: scaleX(0); transform-origin: left center;
	transition: transform 0.9s cubic-bezier(0.22, 0.9, 0.3, 1) 0.35s;
}
.marker.is-inked::after { transform: scaleX(1); }

.przycisk {
	display: inline-block; background: var(--accent); color: var(--biel);
	font-weight: 600; text-decoration: none; padding: 14px 30px; border-radius: 999px;
	box-shadow: 0 8px 22px rgba(163, 59, 92, 0.32); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.przycisk:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(163, 59, 92, 0.4); }
.przycisk--kontur { background: transparent; color: var(--accent); border: 2px solid var(--accent); box-shadow: none; }

.hero__wizual { position: relative; min-height: clamp(320px, 38vw, 520px); }
.hero__blob {
	position: absolute; inset: 6% 2% 4% 6%;
	background: radial-gradient(circle at 32% 28%, var(--accent-pastel), #EDD3DC 78%);
	border-radius: 53% 47% 44% 56% / 49% 55% 45% 51%;
}
/* ROTATOR HERO — pojedynczy obiekt na blobie, elementy zmieniają się jeden po drugim (crossfade) */
.hero__rotator { position: absolute; inset: 0; z-index: 2; }
.hero__slajd {
	position: absolute; left: 50%; top: 50%;
	opacity: 0; visibility: hidden;
	transition: opacity 0.9s ease, visibility 0s linear 0.9s;
	filter: drop-shadow(0 22px 30px rgba(36,27,30,0.24));
}
.hero__slajd.is-active { opacity: 1; visibility: visible; transition: opacity 0.9s ease; }
/* każdy slajd ma własną skalę i mikro-obrót — obiekt-bohater duży, elementy nieco mniejsze */
.hero__slajd--burak     { width: min(72%, 420px); transform: translate(-50%, -52%); }
.hero__slajd--kukurydza { width: min(50%, 300px); transform: translate(-50%, -50%) rotate(-8deg); }
.hero__slajd--fasola    { width: min(48%, 290px); transform: translate(-50%, -50%) rotate(7deg); }
.hero__slajd--chip      { width: min(44%, 260px); transform: translate(-50%, -50%) rotate(-5deg); }
/* delikatne unoszenie aktywnego slajdu */
@keyframes psc-unoszenie { 0%, 100% { margin-top: 0; } 50% { margin-top: -8px; } }
.hero__slajd.is-active { animation: psc-unoszenie 6s ease-in-out infinite; }

/* placeholdery mediów (kontrakt MEDIA-MAP) */
.asc-placeholder {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
	background: repeating-linear-gradient(-45deg, #F1E7D6 0 14px, #EBDFCB 14px 28px);
	border: 2px dashed rgba(36,27,30,0.28); border-radius: var(--promien);
	min-height: 220px; padding: 22px; text-align: center; width: 100%;
}
.asc-placeholder__nazwa { font-family: monospace; font-size: 0.86rem; font-weight: 700; word-break: break-all; }
.asc-placeholder__info { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(36,27,30,0.6); }
.hero__slajd.asc-placeholder { min-height: 220px; padding: 12px; font-size: 0.72rem; }

/* ------------------------------ sekcje ------------------------------ */
.sekcja { padding: clamp(52px, 7vw, 104px) 0; }
.sekcja__siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 64px); align-items: center; }
.sekcja__siatka--odwrocona .sekcja__tekst { order: 1; }
.sekcja__siatka--odwrocona .sekcja__wizual { order: 2; }
.sekcja__lead { max-width: 68ch; font-size: 1.05rem; }
.akcent { color: var(--accent); }
.akcent--zloto { color: var(--gold); }

/* odręczne podkreślenie SVG pod nagłówkami — ANIMOWANE tym samym schematem co marker hero
   (rysowanie od lewej po wejściu w widok; klasa .is-drawn z IntersectionObserver) */
.podkreslenie { display: block; width: min(300px, 62%); height: 12px; color: var(--gold); margin-top: 4px; }
.podkreslenie svg { width: 100%; height: 100%; display: block; overflow: visible; }
.podkreslenie path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.9s cubic-bezier(0.22, 0.9, 0.3, 1) 0.15s; }
.podkreslenie.is-drawn path { stroke-dashoffset: 0; }
.sekcja--ciemna .podkreslenie { color: var(--gold); }

/* film-w-sekcji — zaokrąglony kontener (wzorzec Frusento) */
.asc-wideo { position: relative; border-radius: var(--promien); overflow: hidden; box-shadow: var(--cien); }
.asc-wideo video { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 16 / 10; }
.asc-wideo__pauza {
	position: absolute; right: 14px; bottom: 14px;
	width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
	background: rgba(36,27,30,0.55); color: var(--biel); font-size: 0.95rem;
}
.asc-wideo__pauza:hover { background: rgba(36,27,30,0.75); }
.asc-placeholder--wideo { aspect-ratio: 16 / 10; min-height: 0; }

.chipy { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.chip {
	background: var(--biel); border-radius: 999px; padding: 9px 18px; font-size: 0.88rem;
	box-shadow: 0 6px 18px rgba(36,27,30,0.1); border: 1px solid rgba(36,27,30,0.07);
}
.chip b { color: var(--accent); }

/* problem — pełny kolor pastelowy */
.sekcja--pelny-kolor { background: var(--gold-pastel); }
.karty-problem { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 30px 0 40px; }
.karta {
	background: var(--biel); border-radius: var(--promien); padding: 28px 26px;
	box-shadow: 0 8px 26px rgba(36,27,30,0.08);
}
.karta h3 { color: var(--accent); }
.karta p { margin: 0; font-size: 0.97rem; }

.figura { margin: 0; }
.figura--waska { max-width: 860px; margin: 0 auto; }
.figura__obraz { border-radius: var(--promien); box-shadow: var(--cien); width: 100%; object-fit: cover; }
.figura figcaption { font-size: 0.86rem; color: rgba(36,27,30,0.68); margin-top: 12px; }
.siatka-2-figury { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 4vw, 44px); margin-top: clamp(34px, 5vw, 60px); }

/* karuzela scroll-snap „Droga partii" */
.karuzela {
	display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
	padding: 26px clamp(18px, calc((100vw - 1240px) / 2 + 40px), 999px) 34px;
	-webkit-overflow-scrolling: touch;
}
.karuzela::-webkit-scrollbar { height: 10px; }
.karuzela::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 999px; }
.karuzela::-webkit-scrollbar-track { background: rgba(36,27,30,0.08); border-radius: 999px; }
.karuzela__karta {
	flex: 0 0 clamp(260px, 30vw, 350px); scroll-snap-align: start;
	background: var(--biel); border-radius: var(--promien); padding: 28px 26px;
	box-shadow: 0 8px 26px rgba(36,27,30,0.09); border-top: 6px solid var(--accent);
}
.karuzela__karta:nth-child(even) { border-top-color: var(--gold); }
.karuzela__nr { font-family: var(--font-naglowki); font-size: 2rem; font-weight: 680; color: var(--accent-pastel); -webkit-text-stroke: 1.4px var(--accent); display: block; margin-bottom: 8px; }
.karuzela__karta p { margin: 0; font-size: 0.94rem; }

/* innowacja — sekcja ciemna gradientem tokenów */
.sekcja--ciemna { background: linear-gradient(150deg, #241B1E 0%, #3A2228 55%, #4A2531 100%); color: #F6EEE6; }
.sekcja--ciemna h2 { color: #FBF6EE; }
.sekcja--ciemna a { color: var(--gold); }
.lista-innowacji { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 12px; }
.lista-innowacji li { padding-left: 30px; position: relative; font-size: 0.98rem; }
.lista-innowacji li::before { content: ''; position: absolute; left: 0; top: 0.42em; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); }
.lista-innowacji b { color: var(--gold); }
.zastrzezenie { font-size: 0.88rem; color: rgba(246,238,230,0.72); border-left: 3px solid var(--gold); padding-left: 16px; }

/* kolaż zdjęć (3 zachodzące kadry) */
.kolaz { position: relative; min-height: clamp(340px, 40vw, 540px); }
.kolaz__kadr { position: absolute; border-radius: 18px; box-shadow: 0 16px 38px rgba(0,0,0,0.35); object-fit: cover; }
.kolaz__kadr--a { width: 62%; aspect-ratio: 4 / 3; left: 0; top: 4%; z-index: 1; }
.kolaz__kadr--b { width: 46%; aspect-ratio: 1 / 1; right: 0; top: 26%; z-index: 2; transform: rotate(2.5deg); }
.kolaz__kadr--c { width: 42%; aspect-ratio: 4 / 3; left: 12%; bottom: 0; z-index: 3; transform: rotate(-2deg); }
.kolaz .asc-placeholder { position: absolute; min-height: 140px; }
.kolaz .kolaz__kadr--a.asc-placeholder { height: 46%; }
.kolaz .kolaz__kadr--b.asc-placeholder { height: 40%; }
.kolaz .kolaz__kadr--c.asc-placeholder { height: 36%; }

/* aplikacja — mockup na złotym blobie */
.aplikacja-wizual { position: relative; min-height: clamp(320px, 36vw, 500px); }
.aplikacja-wizual__blob {
	position: absolute; inset: 8% 4% 6% 4%;
	background: radial-gradient(circle at 30% 26%, var(--gold-pastel), #F0DDB4 80%);
	border-radius: 46% 54% 57% 43% / 52% 46% 54% 48%;
}
.aplikacja-wizual__rotator { position: absolute; inset: 0; z-index: 2; }
.aplikacja-wizual__mockup {
	position: absolute; left: 50%; top: 50%;
	width: min(82%, 520px);
	opacity: 0; visibility: hidden;
	transition: opacity 0.9s ease, visibility 0s linear 0.9s;
	filter: drop-shadow(0 24px 34px rgba(36,27,30,0.26));
}
.aplikacja-wizual__mockup.is-active { opacity: 1; visibility: visible; transition: opacity 0.9s ease; }
/* każdy mockup pod innym kątem — bryły są już różne, CSS dodaje tylko mikro-obrót */
.aplikacja-wizual__mockup--1 { transform: translate(-50%, -50%) rotate(-2deg); }
.aplikacja-wizual__mockup--2 { transform: translate(-50%, -50%) rotate(1.5deg); }
.aplikacja-wizual__mockup--3 { transform: translate(-50%, -50%) rotate(-1deg); }
.aplikacja-wizual__mockup.asc-placeholder { min-height: 280px; }
.lista-funkcji { padding-left: 22px; margin: 0 0 1em; }
.lista-funkcji li { margin-bottom: 8px; }
.lista-funkcji li::marker { color: var(--accent); }

/* KPI — pastel buraczany */
.sekcja--pastel { background: var(--accent-pastel); }
.tabela-otoczka { overflow-x: auto; margin: 26px 0 40px; border-radius: var(--promien); box-shadow: var(--cien); }
.tabela-kpi { width: 100%; border-collapse: collapse; background: var(--biel); min-width: 640px; }
.tabela-kpi th, .tabela-kpi td { text-align: left; padding: 15px 20px; border-bottom: 1px solid rgba(36,27,30,0.08); font-size: 0.95rem; }
.tabela-kpi thead th { background: var(--ink); color: var(--biel); font-family: var(--font-naglowki); font-weight: 600; letter-spacing: 0.02em; }
.tabela-kpi tbody tr:nth-child(even) { background: #FBF7F0; }
.tabela-kpi td b { color: var(--accent); }

/* grupa */
.lista-grupy { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 22px; }
.lista-grupy h3 { margin-bottom: 6px; }
.lista-grupy p { margin: 0; font-size: 0.97rem; }
.adnotacja {
	background: var(--gold-pastel); border-radius: 14px; padding: 14px 20px;
	font-size: 0.9rem; border-left: 4px solid var(--gold);
}

/* harmonogram */
.kamienie { list-style: none; counter-reset: kamien; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.kamien {
	display: grid; grid-template-columns: 190px 1fr auto; gap: 18px; align-items: center;
	background: var(--biel); border-radius: 16px; padding: 16px 22px;
	box-shadow: 0 6px 20px rgba(36,27,30,0.07);
}
.kamien__data { font-weight: 600; font-size: 0.92rem; color: var(--leaf); }
.kamien__tytul { font-size: 0.97rem; }
.badge {
	display: inline-block; border-radius: 999px; padding: 5px 14px;
	font-size: 0.76rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
}
.badge--planowane { background: #EDE6DA; color: #6B5E52; }
.badge--w-trakcie { background: var(--gold-pastel); color: #8A6410; }
.badge--zakonczone { background: #DFEADB; color: var(--leaf); }

/* finansowanie */
.finanse { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 30px 0 26px; }
.finanse__pole { background: var(--biel); border-radius: var(--promien); padding: 26px; box-shadow: 0 8px 26px rgba(36,27,30,0.08); border-top: 6px solid var(--accent); }
.finanse__pole:nth-child(2) { border-top-color: var(--gold); }
.finanse__pole:nth-child(3) { border-top-color: var(--leaf); }
.finanse__kwota { display: block; font-family: var(--font-naglowki); font-size: 1.7rem; font-weight: 680; margin-bottom: 6px; }
.finanse__opis { font-size: 0.9rem; color: rgba(36,27,30,0.72); }
.finanse__szczegoly { font-size: 0.92rem; max-width: 88ch; }

/* aktualności */
.aktualnosci { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 26px 0 30px; }
.aktualnosci--lista { grid-template-columns: 1fr; max-width: 780px; }
.aktualnosc { background: var(--biel); border-radius: var(--promien); padding: 26px; box-shadow: 0 8px 26px rgba(36,27,30,0.08); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.aktualnosc__tytul { font-size: 1.15rem; margin: 0; }
.aktualnosc__tytul a { color: var(--ink); text-decoration: none; }
.aktualnosc__tytul a:hover { color: var(--accent); }
.aktualnosc__data { font-size: 0.84rem; color: rgba(36,27,30,0.6); margin: 0; }
.aktualnosc__zajawka { font-size: 0.94rem; }
.aktualnosc__zajawka p { margin: 0; }
.aktualnosc__wiecej { font-weight: 600; text-decoration: none; margin-top: auto; }
.aktualnosc__wiecej:hover { text-decoration: underline; }
.aktualnosci__wszystkie { margin: 0; }

/* wpis / strona */
.tytul-strony, .wpis__tytul { font-size: clamp(2rem, 4vw, 2.8rem); }
.wpis__data { color: rgba(36,27,30,0.6); font-size: 0.9rem; }
.paginacja { margin-top: 30px; }

/* stopka */
.stopka { background: var(--ink); color: rgba(250,245,236,0.85); }
.stopka__apla { background: var(--biel); padding: 20px 0; }
.stopka__znaki { display: flex; align-items: center; justify-content: center; gap: 46px; flex-wrap: wrap; }
.stopka__znak { height: 58px; width: auto; }
.stopka__tresc { padding-top: 34px; padding-bottom: 34px; }
.stopka__zdanie { font-size: 0.84rem; line-height: 1.6; }
.stopka__kontakt a { color: var(--gold); }
.stopka__prawa { font-size: 0.8rem; color: rgba(250,245,236,0.55); margin: 14px 0 0; }

/* -------------------------- responsywność -------------------------- */
@media (max-width: 900px) {
	.hero__siatka, .sekcja__siatka { grid-template-columns: 1fr; }
	.hero__tekst { order: 1; }
	.hero__wizual { order: 2; min-height: 320px; }
	.sekcja__siatka--odwrocona .sekcja__tekst { order: 1; }
	.sekcja__siatka--odwrocona .sekcja__wizual { order: 2; }
	.karty-problem, .finanse, .aktualnosci { grid-template-columns: 1fr; }
	.siatka-2-figury { grid-template-columns: 1fr; }
	.kamien { grid-template-columns: 1fr; gap: 6px; }
	.marker { white-space: normal; }
}
@media (max-width: 480px) {
	body { font-size: 16px; }
	.naglowek__wnetrze { flex-direction: column; align-items: flex-start; gap: 10px; }
	.naglowek__menu { font-size: 0.9rem; row-gap: 6px; }
	.pas-brand__znak--pswpr { height: 44px; }
	.pas-brand__znak--ue { height: 36px; }
}

/* ------------------- dostępność: reduced motion -------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.marker::after { transition: none; transform: scaleX(1); }
	.podkreslenie path { transition: none; stroke-dashoffset: 0; }
	.hero__slajd.is-active { animation: none; }
	.hero__slajd, .aplikacja-wizual__mockup { transition: none; }
	.przycisk, .przycisk:hover { transition: none; transform: none; }
}