/* ==========================================================================
   AgroPelletLoop 4.0 EPI — main.css (koncepcja K2 „Sterownia")
   Tokeny: petrol #0E3B3E · butelka #123028 · kość #F2EFE6 · limonka #B8D94A ·
   bursztyn #D9A441 · tło jasne #FAF8F2
   ========================================================================== */

:root {
	--petrol: #0E3B3E;
	--butelka: #123028;
	--kosc: #F2EFE6;
	--limonka: #B8D94A;
	--limonka-ciemna: #7E9A22;
	--bursztyn: #D9A441;
	--tlo-jasne: #FAF8F2;
	--krem: #F2EFE6;
	--tekst: #16302B;
	--tekst-mut: #45564F;
	--biel: #FFFFFF;
	--gradient-ciemny: linear-gradient(152deg, var(--petrol) 0%, var(--butelka) 78%);
	--max: 1200px;
	--promien: 22px;
	--font-glowny: 'Lexend', system-ui, sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, monospace;
	--cien-karta: 0 10px 34px rgba(14, 59, 62, 0.10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
figure { margin: 0; }
/* Antidotum na grid blowout: dzieci siatek nie narzucają min-content szerokości toru */
.sekcja__wnetrze--dwie > *, .sekcja__wnetrze--app > *, .sekcja__kolumny-dwie > *,
.bento__karta--duza > *, .grupa-siatka > *, .hero__wnetrze > * { min-width: 0; }
body {
	margin: 0;
	font-family: var(--font-glowny);
	font-size: 17px;
	line-height: 1.65;
	color: var(--tekst);
	background: var(--tlo-jasne);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--limonka-ciemna); }
h1, h2, h3 { line-height: 1.16; margin: 0 0 0.55em; font-weight: 800; letter-spacing: -0.015em; }
p { margin: 0 0 1em; }
.mono { font-family: var(--font-mono); }

.skip-link {
	position: absolute; left: -999px; top: 0; z-index: 100;
	background: var(--limonka); color: var(--butelka); padding: 10px 18px; border-radius: 0 0 12px 0;
	font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--bursztyn); outline-offset: 2px; }

/* ---------- Pas brandowy (TYLKO znaki, biała apla) + osobny pas info ---------- */
.pas-brand {
	background: var(--biel);
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
	gap: 14px 44px; padding: 14px 20px;
}
.pas-brand img { height: 56px; width: auto; }
.pas-info {
	background: var(--biel);
	border-top: 1px solid #E8E4D8; border-bottom: 1px solid #E8E4D8;
	text-align: center; font-size: 0.82rem; color: var(--tekst-mut);
	padding: 8px 20px;
}

/* ---------- Nagłówek ---------- */
.naglowek { background: var(--tlo-jasne); border-bottom: 1px solid #E8E4D8; position: sticky; top: 0; z-index: 50; }
.naglowek__wnetrze {
	max-width: var(--max); margin: 0 auto; padding: 12px 24px;
	display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.naglowek__marka { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tekst); }
.naglowek__sygnet { width: 40px; height: 40px; }
.naglowek__nazwa { font-weight: 800; font-size: 1.14rem; letter-spacing: -0.01em; }
.naglowek__nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.naglowek__nav a { text-decoration: none; color: var(--tekst); font-weight: 600; font-size: 0.94rem; }
.naglowek__nav a:hover { color: var(--limonka-ciemna); }
.naglowek__cta {
	background: var(--butelka); color: var(--kosc) !important;
	padding: 9px 18px; border-radius: 999px;
}
.naglowek__cta:hover { background: var(--petrol); }

/* ---------- Przyciski ---------- */
.przycisk {
	display: inline-block; text-decoration: none; font-weight: 700; font-size: 0.98rem;
	padding: 14px 28px; border-radius: 999px; transition: transform 0.18s ease, background 0.18s ease;
}
.przycisk:hover { transform: translateY(-2px); }
.przycisk--limonka { background: var(--limonka); color: var(--butelka); }
.przycisk--kontur { border: 2px solid rgba(242, 239, 230, 0.55); color: var(--kosc); }
.przycisk--kontur:hover { border-color: var(--limonka); color: var(--limonka); }
.przycisk--kontur-ciemny { border: 2px solid var(--butelka); color: var(--butelka); }

/* ---------- HERO H4: ciemny premium, 3 telefony bez tła ---------- */
.hero { background: var(--gradient-ciemny); color: var(--kosc); overflow: hidden; }
.hero__wnetrze {
	max-width: 1380px; margin: 0 auto; padding: clamp(56px, 7vw, 104px) 24px clamp(64px, 8vw, 120px);
	display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 4vw, 64px); align-items: center;
}
.hero__kicker { color: var(--limonka); font-size: 0.82rem; letter-spacing: 0.04em; margin-bottom: 20px; }
.hero__naglowek { font-size: clamp(2.1rem, 4.3vw, 3.55rem); color: var(--biel); }
.hero__naglowek .akcent { color: var(--limonka); }
.hero__lead { font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: rgba(242, 239, 230, 0.88); max-width: 34em; }
.hero__cta-rzad { display: flex; gap: 16px; flex-wrap: wrap; margin: 30px 0 26px; }
.hero__telemetria { font-size: 0.74rem; color: rgba(184, 217, 74, 0.62); letter-spacing: 0.02em; }

.hero__wizual { position: relative; min-height: clamp(420px, 42vw, 640px); }
.hero__telefon { position: absolute; will-change: transform; filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.42)); }
.hero__telefon--1 { width: 46%; left: 4%;  top: 9%;  z-index: 3; transform: rotate(-7deg); }
.hero__telefon--2 { width: 44%; left: 34%; top: 0;   z-index: 2; transform: rotate(3deg); }
.hero__telefon--3 { width: 42%; left: 62%; top: 15%; z-index: 1; transform: rotate(9deg); }
.hero__telefon img, .hero__telefon .asc-placeholder { width: 100%; }
.hero__telefon .asc-placeholder { aspect-ratio: 9 / 18.5; }

/* Efekt WOW (III.9i): wjazd ze staggerem + subtelny float ≤8 px */
.hero__telefon { opacity: 0; translate: 0 46px; transition: opacity 0.7s ease, translate 0.7s cubic-bezier(0.22, 0.8, 0.3, 1); }
.hero__wizual.is-widoczne .hero__telefon--1 { opacity: 1; translate: 0 0; transition-delay: 0.05s; }
.hero__wizual.is-widoczne .hero__telefon--2 { opacity: 1; translate: 0 0; transition-delay: 0.22s; }
.hero__wizual.is-widoczne .hero__telefon--3 { opacity: 1; translate: 0 0; transition-delay: 0.39s; }
@keyframes hero-float-a { 0%, 100% { margin-top: 0; } 50% { margin-top: -8px; } }
@keyframes hero-float-b { 0%, 100% { margin-top: 0; } 50% { margin-top: -6px; } }
.hero__wizual.is-widoczne.is-plywa .hero__telefon--1 { animation: hero-float-a 5.4s ease-in-out infinite; }
.hero__wizual.is-widoczne.is-plywa .hero__telefon--2 { animation: hero-float-b 6.2s ease-in-out 0.6s infinite; }
.hero__wizual.is-widoczne.is-plywa .hero__telefon--3 { animation: hero-float-a 5.8s ease-in-out 1.1s infinite; }

/* ---------- Sekcje wspólne ---------- */
.sekcja { padding: clamp(56px, 7vw, 100px) 0; }
.sekcja--jasna { background: var(--tlo-jasne); }
.sekcja--kremowa { background: var(--krem); }
.sekcja--ciemna { background: var(--gradient-ciemny); color: var(--kosc); }
.sekcja__wnetrze { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.sekcja__wnetrze--waska { max-width: 820px; }
.sekcja__wnetrze--dwie { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
.sekcja__telemetria {
	font-size: 0.76rem; letter-spacing: 0.03em; color: var(--limonka-ciemna);
	margin: 0 0 10px; text-transform: lowercase;
}
.sekcja__telemetria--jasna { color: var(--limonka); }
.sekcja__naglowek { font-size: clamp(1.7rem, 3vw, 2.5rem); position: relative; display: inline-block; padding-bottom: 14px; }
.sekcja--ciemna .sekcja__naglowek { color: var(--biel); }
.sekcja__lead { max-width: 46em; font-size: 1.06rem; color: var(--tekst-mut); }
.sekcja__lead--jasny { color: rgba(242, 239, 230, 0.85); }
.sekcja__zdjecie { border-radius: var(--promien); display: block; width: 100%; box-shadow: var(--cien-karta); }
.sekcja__zdjecie--mala { aspect-ratio: 4 / 3; object-fit: cover; }
.sekcja__podpis { font-size: 0.74rem; color: var(--tekst-mut); margin-top: 10px; }
.sekcja__podpis--jasny { color: rgba(242, 239, 230, 0.6); }
.sekcja__wizual--srodek { max-width: 860px; margin: 44px auto 0; }
.sekcja__nota { font-size: 0.88rem; color: rgba(242, 239, 230, 0.66); }
.sekcja__kolumny-dwie { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(24px, 3.5vw, 52px); align-items: start; }
.sekcja__foto-para { display: grid; gap: 20px; }

/* Animowane podkreślenie nagłówków (recykling schematu WOW — v5.9e) */
.podkreslenie-hook svg.podkreslenie {
	position: absolute; left: 0; bottom: 0; width: min(300px, 62%); height: 10px; overflow: visible;
}
.podkreslenie-hook svg.podkreslenie path {
	stroke: var(--bursztyn); stroke-width: 4; fill: none; stroke-linecap: round;
	stroke-dasharray: 1; stroke-dashoffset: 1;
	transition: stroke-dashoffset 0.9s cubic-bezier(0.5, 0, 0.2, 1);
}
.sekcja--ciemna .podkreslenie-hook svg.podkreslenie path { stroke: var(--limonka); }
.podkreslenie-hook.is-narysowane svg.podkreslenie path { stroke-dashoffset: 0; }

/* ---------- 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, rgba(14, 59, 62, 0.05), rgba(14, 59, 62, 0.05) 12px, rgba(14, 59, 62, 0.10) 12px, rgba(14, 59, 62, 0.10) 24px);
	border: 2px dashed rgba(14, 59, 62, 0.35); border-radius: var(--promien);
	min-height: 220px; width: 100%; padding: 18px; text-align: center;
}
.sekcja--ciemna .asc-placeholder, .hero .asc-placeholder {
	background: repeating-linear-gradient(-45deg, rgba(242, 239, 230, 0.05), rgba(242, 239, 230, 0.05) 12px, rgba(242, 239, 230, 0.11) 12px, rgba(242, 239, 230, 0.11) 24px);
	border-color: rgba(242, 239, 230, 0.4);
}
.asc-placeholder__nazwa { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; word-break: break-all; }
.asc-placeholder__info { font-size: 0.72rem; opacity: 0.7; }
.sekcja__zdjecie.asc-placeholder { aspect-ratio: 16 / 10; }

/* ---------- Problem ---------- */
.lista-problemow { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.lista-problemow li {
	background: var(--biel); border-radius: 16px; padding: 16px 20px;
	border-left: 4px solid var(--bursztyn); box-shadow: var(--cien-karta);
}

/* ---------- Bento (Innowacja) ---------- */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.bento__karta {
	background: var(--biel); border-radius: var(--promien); padding: 26px;
	position: relative; box-shadow: var(--cien-karta);
}
.bento__karta h3 { font-size: 1.14rem; }
.bento__karta p { font-size: 0.95rem; color: var(--tekst-mut); margin-bottom: 0; }
.bento__numer { font-size: 0.72rem; color: var(--limonka-ciemna); letter-spacing: 0.05em; margin-bottom: 8px; }
.bento__strzalka { position: absolute; right: 20px; bottom: 14px; color: var(--bursztyn); font-size: 1.3rem; }
.bento__karta--duza {
	grid-column: span 3; background: var(--butelka); color: var(--kosc);
	display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 26px; align-items: center;
}
.bento__karta--duza h3 { color: var(--limonka); font-size: 1.35rem; }
.bento__karta--duza p { color: rgba(242, 239, 230, 0.85); }
.bento__karta--duza .bento__numer { color: var(--limonka); }
.bento__granule { max-width: min(100%, 340px); display: block; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.4)); }
.bento__wizual .asc-placeholder { aspect-ratio: 1 / 1; max-width: 320px; margin: 0 auto; min-height: 200px; }

/* Zdjęcie linii z pływającymi chipami KPI */
.linia-foto { margin-top: 44px; }
.linia-foto__ramka { position: relative; margin: 0; }
.linia-foto__zdjecie { aspect-ratio: 21 / 9; object-fit: cover; }
.chip {
	position: absolute; display: inline-flex; align-items: center; gap: 8px;
	background: var(--biel); color: var(--tekst);
	font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700;
	padding: 9px 15px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}
.chip__piktogram { color: var(--limonka-ciemna); }
.chip--1 { top: 12%; left: 5%; }
.chip--2 { top: 58%; right: 6%; }
.chip--3 { bottom: 10%; left: 26%; }
.linia-foto__nota { font-size: 0.84rem; color: var(--tekst-mut); margin-top: 14px; max-width: 60em; }

/* ---------- Droga partii: pozioma lista scroll-snap (wzorzec Biblioteki) ---------- */
.droga {
	display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
	padding: 30px max(24px, calc((100vw - var(--max)) / 2 + 24px)) 26px;
	scrollbar-color: var(--limonka-ciemna) transparent;
}
.droga::-webkit-scrollbar { height: 8px; }
.droga::-webkit-scrollbar-thumb { background: var(--limonka-ciemna); border-radius: 999px; }
.droga__karta {
	flex: 0 0 min(78vw, 330px); scroll-snap-align: start;
	background: var(--biel); border-radius: var(--promien); padding: 26px;
	border-top: 5px solid var(--limonka); box-shadow: var(--cien-karta);
}
.droga__karta h3 { font-size: 1.12rem; }
.droga__karta p { font-size: 0.93rem; color: var(--tekst-mut); margin-bottom: 0; }
.droga__krok { font-size: 0.72rem; color: var(--limonka-ciemna); letter-spacing: 0.06em; margin-bottom: 8px; }

/* ---------- Aplikacja: rotator 3 mockupów telefonu (III.11 v6.4) ---------- */
.sekcja__wnetrze--app {
	max-width: min(1520px, 97vw); margin: 0 auto; padding: 0 24px;
	display: grid; grid-template-columns: 1.55fr 0.85fr; gap: clamp(24px, 3vw, 48px); align-items: center;
}
.rotator { position: relative; }
.rotator__scena {
	position: relative; width: 100%;
	min-height: clamp(520px, 46vw, 800px);
	display: flex; align-items: center; justify-content: center;
}
.rotator__scena::before {
	/* blob skalowany DO mockupu — może nie obejmować całej bryły */
	content: ""; position: absolute; inset: 6% 14%;
	background: radial-gradient(closest-side, rgba(184, 217, 74, 0.24), rgba(184, 217, 74, 0.05) 72%, transparent);
	border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%;
}
.rotator__slajd {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0.6s;
}
.rotator__slajd.is-active { opacity: 1; visibility: visible; }
.rotator__mockup {
	max-height: min(70vh, 740px); width: auto; max-width: 100%;
	filter: drop-shadow(0 30px 46px rgba(0, 0, 0, 0.45));
}
.rotator__slajd .asc-placeholder { width: min(58%, 420px); aspect-ratio: 9 / 16.5; min-height: 520px; }
.rotator__sterowanie { text-align: center; margin-top: 6px; }
.rotator__pauza {
	background: transparent; border: 1.5px solid rgba(242, 239, 230, 0.4); color: rgba(242, 239, 230, 0.8);
	font-family: var(--font-mono); font-size: 0.74rem; padding: 7px 16px; border-radius: 999px; cursor: pointer;
}
.rotator__pauza:hover { border-color: var(--limonka); color: var(--limonka); }
.lista-widokow { list-style: none; margin: 20px 0; padding: 0; display: grid; gap: 18px; }
.lista-widokow li { display: flex; gap: 14px; align-items: flex-start; }
.lista-widokow__nr {
	flex: 0 0 auto; color: var(--limonka); font-weight: 700; font-size: 0.86rem;
	border: 1.5px solid rgba(184, 217, 74, 0.5); border-radius: 10px; padding: 4px 9px;
}
.lista-widokow div { color: rgba(242, 239, 230, 0.87); font-size: 0.97rem; }

/* ---------- Rząd piktogramów w karcie (Dual-use) ---------- */
.karta-piktogramy {
	margin-top: 44px; background: var(--biel); border: 1.5px solid #E4DFCF; border-radius: var(--promien);
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; padding: 34px 30px;
}
.karta-piktogramy__ikona { color: var(--limonka-ciemna); display: inline-block; margin-bottom: 12px; }
.karta-piktogramy__pozycja h3 { font-size: 1.06rem; }
.karta-piktogramy__pozycja p { font-size: 0.92rem; color: var(--tekst-mut); margin-bottom: 0; }

/* ---------- KPI ---------- */
.kpi-siatka { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 36px; }
.kpi-karta {
	background: rgba(242, 239, 230, 0.06); border: 1px solid rgba(184, 217, 74, 0.28);
	border-radius: 18px; padding: 22px;
}
.kpi-karta__wartosc { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; color: var(--limonka); margin: 0 0 8px; }
.kpi-karta__opis { font-size: 0.85rem; color: rgba(242, 239, 230, 0.78); margin: 0; }

/* ---------- Grupa ---------- */
.grupa-siatka { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 34px; }
.grupa-karta { background: var(--biel); border-radius: var(--promien); padding: 28px; box-shadow: var(--cien-karta); }
.grupa-karta h3 { font-size: 1.12rem; }
.grupa-karta p { font-size: 0.95rem; color: var(--tekst-mut); margin-bottom: 0; }
.grupa-karta__rola { font-size: 0.72rem; letter-spacing: 0.05em; color: var(--limonka-ciemna); margin-bottom: 8px; }
.grupa-karta--lider { border-top: 5px solid var(--limonka); }
.grupa-karta--odr { border-top: 5px solid var(--bursztyn); }
.grupa-karta:last-child { grid-column: span 2; }
.grupa-nota {
	margin-top: 24px; font-size: 0.88rem; color: var(--tekst-mut);
	background: var(--krem); border-radius: 14px; padding: 14px 20px; display: inline-block;
}

/* ---------- Harmonogram / kamienie ---------- */
.kamienie { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 0; }
.kamienie__pozycja {
	display: grid; grid-template-columns: 22px 1fr auto; gap: 18px; align-items: start;
	padding: 18px 0; border-bottom: 1px solid #E4DFCF; position: relative;
}
.kamienie__status { width: 14px; height: 14px; border-radius: 50%; margin-top: 6px; border: 3px solid var(--tekst-mut); }
.kamienie__pozycja--zakonczone .kamienie__status { background: var(--limonka); border-color: var(--limonka-ciemna); }
.kamienie__pozycja--w-trakcie .kamienie__status { background: var(--bursztyn); border-color: var(--bursztyn); }
.kamienie__termin { font-size: 0.76rem; color: var(--limonka-ciemna); margin: 0 0 4px; }
.kamienie__etykieta { margin: 0; font-weight: 600; font-size: 0.98rem; }

.badge {
	display: inline-block; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700;
	padding: 5px 12px; border-radius: 999px; letter-spacing: 0.04em; white-space: nowrap;
}
.badge--planowane { background: #E7E3D6; color: var(--tekst-mut); }
.badge--w-trakcie { background: #F6E3BC; color: #7A5A14; }
.badge--zakonczone { background: #DCEBB0; color: #3F5A10; }

/* ---------- Finansowanie ---------- */
.finanse { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 34px; }
.finanse-karta { background: var(--biel); border-radius: 18px; padding: 24px; box-shadow: var(--cien-karta); border-top: 4px solid var(--limonka); }
.finanse-karta__kwota { font-size: 1.12rem; font-weight: 700; color: var(--petrol); margin: 0 0 8px; }
.finanse-karta__opis { font-size: 0.86rem; color: var(--tekst-mut); margin: 0; }
.finanse-zdanie { margin-top: 28px; font-size: 0.92rem; color: var(--tekst-mut); border-left: 4px solid var(--bursztyn); padding-left: 18px; max-width: 62em; }

/* ---------- Aktualności ---------- */
.aktualnosci-siatka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; }
.aktualnosci-siatka--lista { grid-template-columns: 1fr; max-width: 820px; }
.wpis-karta { background: var(--biel); border-radius: var(--promien); padding: 26px; box-shadow: var(--cien-karta); display: flex; flex-direction: column; }
.wpis-karta__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.wpis-karta__data { font-size: 0.74rem; color: var(--tekst-mut); }
.wpis-karta__tytul { font-size: 1.12rem; margin-bottom: 10px; }
.wpis-karta__tytul a { color: var(--tekst); text-decoration: none; }
.wpis-karta__tytul a:hover { color: var(--limonka-ciemna); }
.wpis-karta__zajawka { font-size: 0.93rem; color: var(--tekst-mut); flex: 1; }
.wpis-karta__wiecej {
	margin-top: 16px; align-self: flex-start; font-weight: 700; text-decoration: none;
	color: var(--butelka); border: 2px solid var(--limonka); border-radius: 999px; padding: 9px 20px; font-size: 0.9rem;
}
.wpis-karta__wiecej:hover { background: var(--limonka); }
.aktualnosci-link { margin-top: 30px; }
.paginacja { margin-top: 26px; }
.wpis-pelny__tytul { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.wpis-pelny__tresc { font-size: 1.02rem; }
.wpis-pelny__powrot { margin-top: 34px; }

/* ---------- Stopka ---------- */
.stopka { background: var(--butelka); color: rgba(242, 239, 230, 0.85); }
.stopka a { color: var(--limonka); }
.stopka__wnetrze {
	max-width: var(--max); margin: 0 auto; padding: 56px 24px 34px;
	display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px;
}
.stopka__marka { font-weight: 800; font-size: 1.2rem; color: var(--biel); margin-bottom: 10px; }
.stopka__opis { font-size: 0.92rem; }
.stopka__meta { font-size: 0.72rem; color: rgba(184, 217, 74, 0.7); }
.stopka__tytul { font-weight: 700; color: var(--biel); margin: 0 0 6px; }
.stopka__kol p { font-size: 0.92rem; }
.stopka__brand {
	background: var(--biel); display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
	gap: 14px 44px; padding: 16px 20px; margin: 0 24px; border-radius: 16px 16px 0 0;
	max-width: 760px; margin-left: auto; margin-right: auto;
}
.stopka__brand img { height: 50px; width: auto; }
.stopka__finansowanie {
	background: var(--petrol); text-align: center; font-size: 0.8rem;
	color: rgba(242, 239, 230, 0.75); padding: 16px 24px;
}

/* ==========================================================================
   MOBILE ≤ 900 px — każdy desktopowy override siatki ma tu lustrzany wpis
   ========================================================================== */
@media (max-width: 900px) {
	.hero__wnetrze { grid-template-columns: 1fr; }
	.hero__wizual { min-height: clamp(330px, 88vw, 430px); }
	.hero__telefon--1 { width: 44%; left: 2%; }
	.hero__telefon--2 { width: 42%; left: 30%; }
	.hero__telefon--3 { width: 40%; left: 58%; }
	.sekcja__wnetrze--dwie { grid-template-columns: 1fr; }
	.sekcja__kolumny-dwie { grid-template-columns: 1fr; }
	.sekcja__foto-para { grid-template-columns: 1fr 1fr; }
	/* Lustro dla sekcji Aplikacja (v6.4c/d): JEDNA kolumna, tekst NAD mockupem */
	.sekcja__wnetrze--app { grid-template-columns: 1fr; }
	.sekcja__wnetrze--app .rotator { order: 2; }
	.sekcja__wnetrze--app .sekcja__tekst { order: 1; }
	.rotator__scena { min-height: clamp(430px, 118vw, 560px); }
	.rotator__mockup { max-height: min(76vh, 540px); }
	.rotator__slajd .asc-placeholder { width: min(86%, 360px); min-height: 420px; }
	.bento { grid-template-columns: 1fr; }
	.bento__karta--duza { grid-column: span 1; grid-template-columns: 1fr; }
	.karta-piktogramy { grid-template-columns: 1fr; }
	.kpi-siatka { grid-template-columns: 1fr 1fr; }
	.grupa-siatka { grid-template-columns: 1fr; }
	.grupa-karta:last-child { grid-column: span 1; }
	.finanse { grid-template-columns: 1fr 1fr; }
	.aktualnosci-siatka { grid-template-columns: 1fr; }
	.stopka__wnetrze { grid-template-columns: 1fr; }
	.chip { font-size: 0.68rem; padding: 7px 11px; }
	.chip--3 { left: 8%; }
	.kamienie__pozycja { grid-template-columns: 18px 1fr; }
	.kamienie__pozycja .badge { grid-column: 2; justify-self: start; }
	.naglowek__nav { gap: 14px; font-size: 0.9rem; }
}
@media (max-width: 480px) {
	.kpi-siatka { grid-template-columns: 1fr; }
	.finanse { grid-template-columns: 1fr; }
	.sekcja__foto-para { grid-template-columns: 1fr; }
	.pas-brand img { height: 44px; }
}

/* ==========================================================================
   prefers-reduced-motion: rotacja i float wyłączone, elementy widoczne od razu
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.hero__telefon { opacity: 1; translate: 0 0; transition: none; animation: none !important; }
	.podkreslenie-hook svg.podkreslenie path { stroke-dashoffset: 0; transition: none; }
	.rotator__slajd { transition: none; }
	.przycisk { transition: none; }
}