@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-var-pl.woff2") format("woff2");
  font-weight: 100 900; font-display: block; font-style: normal;
}

:root {
  --noc:      #121218;
  --bursztyn: #F0A93B;
  --kosc:     #F4F2ED;
  --szept:    #9C9992;
  --bordo:    #2A1017;
  --font: "Archivo", "Segoe UI", system-ui, sans-serif;
  --maxw: 1340px;
  --gut: clamp(1.1rem, 4vw, 3rem);
}
* { min-width: 0; }
/* baza typografii podniesiona z 16 na 17 px: cala strona rosnie proporcjonalnie,
   bo drobny stopien pisma sam w sobie czytal sie jak szablon */
html { font-size: 106.25%; }
body { background: var(--noc); color: var(--kosc); font-family: var(--font); line-height: 1.55; overflow-x: hidden; }
.kdz-ag-wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
/* OBWODKA PO KLIKNIECIU MYSZA - wina WordPressa, nie naszego arkusza.
   Rdzen dokleja `:where(.wp-site-blocks :focus) { outline: 2px solid }` BEZ koloru, wiec
   outline bierze `currentColor`, czyli nasza kosc - stad biala ramka wokol naglowka modulu,
   ktora zostawala do nastepnego klikniecia gdzie indziej. Regula rdzenia lapie zwykly
   `:focus`, czyli takze mysz, a nasza siedziala w `:where()`, czyli miala ZEROWA
   szczegolowosc i przegrywala.
   Zdejmujemy obwodke tylko tam, gdzie przegladarka sama uznala fokus za niewidoczny
   (klikniecie), a zostawiamy bursztynowy pierscien dla klawiatury. Zakres ograniczony
   do naszego opakowania, zeby nie ruszyc reszty serwisu. */
.kdz-agenci-v1-page :focus:not(:focus-visible) { outline: none; }
.kdz-agenci-v1-page :is(a, button):focus-visible { outline: 2px solid var(--bursztyn); outline-offset: 3px; }
:where(a, button):focus-visible { outline: 2px solid var(--bursztyn); outline-offset: 3px; }
/* Sekcja, do ktorej doszlismy plynnym przewijaniem, dostaje ognisko - inaczej klawiatura
   po klinieciu w przycisk wracalaby na poczatek strony. Przegladarka rysuje wtedy wlasna
   obwodke wokol calej sekcji i wyglada to jak zaznaczony blok tekstu. Zdejmujemy ja:
   element z `tabindex="-1"` i tak nie jest osiagalny tabulatorem, wiec obwodka niczego
   nie komunikuje. Ogniska na odnosnikach i przyciskach NIE ruszamy - tam jest potrzebne. */
[tabindex="-1"]:focus { outline: none; }

/* pasek gorny jest przezroczysty nad hero, a po przewinieciu klada sie pod nim burgund
   z pudelka. Bordo pojawia sie wtedy, gdy nie zabiera hero powietrza. */
.kdz-ag-top { position: sticky; top: 0; z-index: 30; transition: background .25s, box-shadow .25s; }
.kdz-ag-top--jedzie {
  background: rgba(42,16,23,.9); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  box-shadow: 0 1px 0 rgba(240,169,59,.22);
}
.kdz-ag-top__in { display: flex; align-items: center; justify-content: space-between; padding-block: 1.2rem; }
.kdz-ag-mark { display: block; width: clamp(7rem, 12vw, 9.5rem); }
.kdz-ag-mark img { width: 100%; height: auto; display: block; }
.kdz-ag-btn {
  display: inline-block; cursor: pointer; border: 0; background: var(--bursztyn); color: #22190A;
  font: 800 1rem/1 var(--font); letter-spacing: -.01em; padding: 1.05em 1.9em;
  text-decoration: none;
  clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 100%, 0 100%);
  transition: filter .16s, transform .12s;
}
.kdz-ag-btn:hover { filter: brightness(1.12); }
.kdz-ag-btn:active { transform: translateY(1px); }
.kdz-ag-btn--sm { padding: .6em 1.2em; font-size: .82rem; }

/* ---------- HERO ---------- */
/* Hero razem z paskiem gornym i paskiem faktow ma wypelnic DOKLADNIE jeden ekran:
   ani nie zostawiac pustki, ani nie pokazywac skrawka nastepnej sekcji.
   --nad-hero to zmierzona suma paska gornego (101 px) i paska faktow (69 px). */
:root { --nad-hero: 178px; }
/* na tablecie pasek faktow lamie sie na dwa wiersze, wiec zapas nad hero jest wiekszy,
   a scena musi zejsc nizej, bo przy jednej kolumnie tekst i robot sa jeden pod drugim */
@media (min-width: 46rem) and (max-width: 61.99rem) {
  .kdz-ag-hero { --nad-hero: 196px; }
  .kdz-ag-orbita { height: min(20vh, 12rem); }
  h1 { font-size: clamp(2.1rem, 1rem + 3.6vw, 3rem); }
}
.kdz-ag-hero {
  position: relative; padding-block: 1.2rem 0; overflow: hidden;
  box-sizing: border-box; /* bez tego padding dochodzi do min-height i hero wystaje poza ekran */
  min-height: calc(100svh - var(--nad-hero));
  display: flex; align-items: center;
}
.kdz-ag-hero > .kdz-ag-wrap { width: 100%; }
.kdz-ag-hero__in { position: relative; z-index: 2; display: grid; gap: clamp(1rem, 3vw, 2rem); }
@media (min-width: 62rem) { .kdz-ag-hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); align-items: center; } }

/* ozdobniki */
.kdz-ag-plama {
  position: absolute; z-index: 0; pointer-events: none; right: -20%; top: -30%;
  width: min(135vw, 78rem); aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(240,169,59,.17), rgba(240,169,59,.05) 46%, transparent 70%);
  border-radius: 62% 38% 47% 53% / 43% 57% 43% 57%;
  animation: plyn 20s ease-in-out infinite alternate;
}
@keyframes plyn {
  from { border-radius: 62% 38% 47% 53% / 43% 57% 43% 57%; transform: rotate(-10deg); }
  to   { border-radius: 42% 58% 63% 37% / 58% 40% 60% 42%; transform: rotate(6deg) scale(1.07); }
}
.kdz-ag-kropki {
  position: absolute; z-index: 0; pointer-events: none; opacity: .5;
  right: 3%; bottom: 12%; width: min(30vw, 13rem); aspect-ratio: 1.3;
  background-image: radial-gradient(rgba(244,242,237,.28) 1.2px, transparent 1.2px);
  background-size: 15px 15px;
  -webkit-mask-image: linear-gradient(200deg, #000, transparent 72%);
          mask-image: linear-gradient(200deg, #000, transparent 72%);
}
.kdz-ag-blysk {
  position: absolute; z-index: 1; pointer-events: none; left: 8%; top: 12%;
  width: 4.5rem; height: 4.5rem; opacity: .55;
  background:
    linear-gradient(currentColor, currentColor) center/100% 1.4px no-repeat,
    linear-gradient(currentColor, currentColor) center/1.4px 100% no-repeat;
  color: rgba(240,169,59,.7);
  transform: rotate(18deg);
  animation: iskra 7s ease-in-out infinite;
}
@keyframes iskra { 0%,100% { opacity: .2; transform: rotate(18deg) scale(.8); } 50% { opacity: .6; transform: rotate(26deg) scale(1); } }

/* ---------- slowa ---------- */
.kdz-ag-slowa { padding-bottom: clamp(1.2rem, 3vw, 2rem); position: relative; z-index: 3; }
.kdz-ag-oko { display: inline-flex; align-items: center; gap: .6rem; font: 700 .76rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--bursztyn); }
.kdz-ag-oko::before { content: ""; width: 2rem; height: 2px; background: var(--bursztyn); }

h1 {
  font-size: clamp(2.3rem, 1rem + 5.2vw, 4.5rem);
  font-weight: 800; line-height: .94; letter-spacing: -.05em; margin-top: 1.2rem; text-wrap: balance;
}
h1 .kdz-ag-lekki { font-weight: 300; letter-spacing: -.03em; }
h1 .kdz-ag-zolty { color: var(--bursztyn); }
@media (min-width: 62rem) { h1 { width: 120%; } }

.kdz-ag-lead { color: var(--szept); font-size: clamp(1rem, .95rem + .3vw, 1.12rem); max-width: 58ch; margin-top: 1rem; }
@media (min-width: 62rem) { .kdz-ag-lead { width: 116%; } }
.kdz-ag-lead b { color: var(--kosc); font-weight: 600; }

.kdz-ag-oferta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.7rem; margin-top: 1.5rem; }
/* stare reguly ceny w hero usuniete razem z kwota. Zostawione, zderzaly sie z sekcja
   o tej samej nazwie klasy i dziedziczyly do niej ujemny odstep liter, ktory zjadal spacje. */

/* ---------- scena ---------- */
.kdz-ag-scena { position: relative; z-index: 2; }
/* wysokosc sceny wiazemy z wysokoscia okna, zeby hero zawsze miescilo sie na ekranie.
   Wczesniej dyktowal ja plik wideo i hero wychodzilo poza pierwszy ekran laptopa. */
.kdz-ag-orbita { position: relative; width: 100%; aspect-ratio: 1 / .92; display: grid; place-items: center; }
@media (min-width: 62rem) {
  /* scena skaluje sie z MNIEJSZYM z wymiarow okna: na niskim laptopie robot jest mniejszy,
     na wysokim monitorze rosnie razem z hero. Kadr zostaje ten sam, wiec postac jest cala. */
  .kdz-ag-orbita { max-width: min(32vw, 46vh); margin-inline: auto; }
}

.kdz-ag-robot {
  position: relative; z-index: 2; width: 96%; height: auto; justify-self: center; align-self: end;
  /* wideo ma wlasne szare tlo, wiec maska musi zanikac na brzegach kadru.
     Cala postac miesci sie w kadrze, bo to SCENA jest mniejsza, nie maska ciasniejsza. */
  -webkit-mask-image: radial-gradient(72% 68% at 50% 44%, #000 34%, rgba(0,0,0,.9) 54%, rgba(0,0,0,.45) 72%, transparent 93%);
          mask-image: radial-gradient(72% 68% at 50% 44%, #000 34%, rgba(0,0,0,.9) 54%, rgba(0,0,0,.45) 72%, transparent 93%);
}

/* logotypy narzedzi: stale miejsca, wlasne kolory, bez tla */
.kdz-ag-narzedzie {
  position: absolute; z-index: 4; pointer-events: none;
  width: clamp(1.9rem, 4.4vw, 2.7rem); height: auto;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.55));
  animation: dryf 7s ease-in-out infinite;
}
.kdz-ag-narzedzie svg { width: 100%; height: auto; display: block; }
/* podpisy narzedzi widoczne tylko na telefonie, gdzie zastepuja etykiety zdaniowe */
.kdz-ag-narzedzie__pod { display: none; }
/* logo i podpisy na zmiane po OBU stronach robota */
.kdz-ag-narzedzie--n8n    { top: 8%;  right: 5%;  color: #EA4B71; animation-delay: 0s; }
.kdz-ag-narzedzie--claude { top: 52%; left: -4%;  color: #D97757; animation-delay: 1.6s; }
.kdz-ag-narzedzie--baza   { top: 74%; right: 6%;  color: var(--bursztyn); animation-delay: 3.2s; }
@keyframes dryf {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -9px, 0); }
}

/* adnotacje: kreska, kropka i podpis czynnosci */
.kdz-ag-adn {
  position: absolute; z-index: 5; display: flex; align-items: center; gap: .55rem;
  font-size: .82rem; line-height: 1.25; animation: dryf 8s ease-in-out infinite;
}
/* etykiety przy robocie: burgundowa plytka z pudelka, bursztynowa krawedz i sciety rog */
.kdz-ag-adn span {
  background: linear-gradient(180deg, rgba(58,18,28,.95), rgba(30,11,17,.95));
  box-shadow: inset 2px 0 0 0 var(--bursztyn);
  padding: .52em .95em; white-space: nowrap; font-weight: 600; letter-spacing: -.005em;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}
/* etykieta po prawej stronie robota jest odbita, wiec scinamy jej lewy dolny rog */
.kdz-ag-adn--1 span { box-shadow: inset -2px 0 0 0 var(--bursztyn); clip-path: polygon(9px 0, 100% 0, 100% 100%, 0 100%); }
.kdz-ag-adn i { display: block; height: 1px; width: clamp(1.2rem, 3.5vw, 2.8rem); background: linear-gradient(90deg, rgba(240,169,59,.15), rgba(240,169,59,.75)); flex: none; }
.kdz-ag-adn b { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--bursztyn); flex: none; box-shadow: 0 0 0 4px rgba(240,169,59,.16); }
/* podpisy przeplataja sie z logotypami: prawa, lewa, prawa.
   Lewy podpis trzyma sie blisko glowy robota, zeby nie wchodzil w tekst. */
/* scena jest wezsza niz wczesniej, wiec etykiety musza wyjsc dalej poza kadr,
   inaczej kladą sie robotowi na ramieniu */
.kdz-ag-adn--1 { top: 26%; right: -34%; flex-direction: row-reverse; animation-delay: .8s; }
.kdz-ag-adn--2 { top: 17%; left: -30%; animation-delay: 2.4s; }
.kdz-ag-adn--3 { top: 88%; left: -32%; animation-delay: 4s; }

.kdz-ag-podpis { text-align: center; font-size: .78rem; color: var(--szept); margin-top: .4rem; }

/* ---------- pasek ---------- */
.kdz-ag-fakty { position: relative; z-index: 2; border-top: 1px solid rgba(244,242,237,.12); }
/* fakty rozdzielone swiatlem i cienka kreska zamiast znacznikow // przed kazdym */
.kdz-ag-fakty__in { display: flex; flex-wrap: wrap; padding-block: 1.25rem; font-size: .95rem; color: var(--szept); }
.kdz-ag-fakty__in b { color: var(--kosc); font-weight: 700; }
.kdz-ag-fakty__in span { padding-inline: clamp(1.1rem, 2.8vw, 2.2rem); }
.kdz-ag-fakty__in span:first-child { padding-left: 0; }
.kdz-ag-fakty__in span + span { border-left: 1px solid rgba(244,242,237,.18); }
@media (max-width: 45.99rem) {
  /* dwie kolumny zamiast slupka: w slupku sam pasek faktow mial 197 px
     i wypychal hero poza pierwszy ekran telefonu */
  /* jeden przewijany rzad zamiast czterech wierszy: w slupku pasek mial 200 px
     i sam zjadal cwierc ekranu telefonu */
  .kdz-ag-fakty__in {
    flex-wrap: nowrap; overflow-x: auto; gap: 0; font-size: .85rem; padding-block: .8rem;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
            mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .kdz-ag-fakty__in::-webkit-scrollbar { display: none; }
  .kdz-ag-fakty__in span { flex: 0 0 auto; white-space: nowrap; padding-inline: 0 1.2rem; }
  /* Kreska rozdzielajaca zostaje takze na telefonie, bo w przewijanym rzedzie to ona
     mowi, gdzie konczy sie jeden fakt. Musi jednak dostac swiatlo z OBU stron.
     Wczesniejsza proba zdjecia kreski (border-left: 0 na samym `span`) nie dzialala:
     `.kdz-ag-fakty__in span + span` jest bardziej szczegolowy, a zapytanie o media
     nie podnosi szczegolowosci. Stad ten sam selektor, nie krotszy. */
  .kdz-ag-fakty__in span + span { padding-left: 1.2rem; }
  .kdz-ag-hero { --nad-hero: 152px; }
}

/* ---------- schody ---------- */
/* overflow przycina ozdobniki wychodzace poza kadr: bez tego .kdz-ag-esy robi poziomy przewijak */
.kdz-ag-kto { padding-block: clamp(1.8rem, 3.4vw, 2.6rem) clamp(1.2rem, 2vw, 1.6rem); position: relative; overflow: hidden; }
/* zamiast poswiaty: pionowa os prowadzaca przez schodki */
.kdz-ag-kto::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 2.4rem; top: 34%; bottom: 5.5rem; width: 1px;
  background: repeating-linear-gradient(to bottom, rgba(240,169,59,.5) 0 6px, transparent 6px 14px);
}
@media (max-width: 59.99rem) { .kdz-ag-kto::before { display: none; } }
.kdz-ag-kto > * { position: relative; z-index: 1; }

/* ozdobniki wypelniajace puste pola sekcji */
.kdz-ag-esy {
  position: absolute; z-index: 0; pointer-events: none;
  right: -1%; top: 6%; width: min(38vw, 26rem); height: auto; color: rgba(244,242,237,.16);
}
.kdz-ag-esy path { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: rysuj 5s ease-out forwards; }
.kdz-ag-esy path:nth-child(2) { animation-delay: .5s; }
.kdz-ag-esy path:nth-child(3) { animation-delay: 1s; }
@keyframes rysuj { to { stroke-dashoffset: 0; } }

.kdz-ag-siatka {
  position: absolute; z-index: 0; pointer-events: none; opacity: .5;
  right: 6%; bottom: 8%; width: min(24vw, 11rem); aspect-ratio: 1.4;
  background-image: repeating-linear-gradient(-52deg, rgba(240,169,59,.30) 0 1px, transparent 1px 9px);
  -webkit-mask-image: linear-gradient(-52deg, #000, transparent 82%);
          mask-image: linear-gradient(-52deg, #000, transparent 82%);
}
.kdz-ag-gwiazdka {
  position: absolute; z-index: 0; pointer-events: none;
  left: 1.2rem; bottom: 16%; width: 5.5rem; height: 5.5rem;
  border-left: 1px solid rgba(244,242,237,.22); border-bottom: 1px solid rgba(244,242,237,.22);
}
@media (max-width: 61.99rem) { .kdz-ag-esy { width: 70vw; right: -18%; top: 2%; opacity: .55; } .kdz-ag-gwiazdka { display: none; } }
.kdz-ag-kto h2 { font-size: clamp(1.8rem, 1.1rem + 3.2vw, 3.8rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; max-width: 30ch; text-wrap: balance; }
.kdz-ag-kto h2 em { font-style: normal; color: var(--bursztyn); }
.kdz-ag-kto__lead { color: var(--szept); max-width: 74ch; margin-top: .9rem; font-size: clamp(1rem, .95rem + .25vw, 1.12rem); }
.kdz-ag-schody { margin-top: clamp(1.3rem, 2.6vw, 2rem); display: grid; gap: clamp(1.1rem, 2.4vw, 1.8rem); }
.kdz-ag-schod { display: grid; gap: .55rem; grid-template-columns: 1fr; align-items: start; position: relative; }
/* trzy sytuacje obok siebie zamiast pod soba: pionowo sekcja zajmowala poltora ekranu.
   Schodkowosc zostaje, tylko przesuwa sie w dol kolumnami, nie wierszami. */
@media (min-width: 60rem) {
  .kdz-ag-schody { grid-template-columns: repeat(3, 1fr); align-items: start; gap: clamp(1.6rem, 3vw, 2.6rem); }
  .kdz-ag-schod { grid-template-columns: 1fr; gap: .6rem; }
  .kdz-ag-schod:nth-child(2) { margin-top: 2.2rem; }
  .kdz-ag-schod:nth-child(3) { margin-top: 4.4rem; }
  .kdz-ag-schod__z { padding-top: .8rem; border-top: 1px solid rgba(244,242,237,.14); }
}
/* zamiast numeru porzadkowego: etykieta mowiaca, o czyjej sytuacji jest mowa.
   Te trzy pozycje nie sa krokami, wiec numeracja niczego tu nie porzadkowala. */
.kdz-ag-schod__typ { font: 800 .72rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--bursztyn); margin-bottom: .55rem; }
}
@media (max-width: 59.99rem) {
}
.kdz-ag-schod__t { font-weight: 800; font-size: clamp(1.35rem, 1.1rem + .8vw, 1.85rem); letter-spacing: -.035em; line-height: 1.06; }
.kdz-ag-schod__d { color: var(--szept); font-size: .96rem; margin-top: .4rem; }
.kdz-ag-schod__z { align-self: center; font-weight: 700; }
.kdz-ag-schod__z em { font-style: normal; color: var(--bursztyn); }
@media (max-width: 59.99rem) {
  .kdz-ag-schody { gap: 0; }
  .kdz-ag-schod { padding-block: 1.5rem; border-top: 1px solid rgba(244,242,237,.14); }
  .kdz-ag-schod:first-child { border-top: 0; padding-top: .5rem; }
  .kdz-ag-schod__z { padding-top: .5rem; }
}

.kdz-ag-info { margin-top: 1.1rem; color: var(--szept); font-size: .82rem; max-width: 62ch; }


/* ---------- piatka agentow ---------- */
.kdz-ag-zespol { padding-block: clamp(1.2rem, 2vw, 1.6rem) clamp(1.8rem, 3.6vw, 2.8rem); position: relative; overflow: hidden; }
/* wielkie 5+ wypalone w tle: piatka agentow plus szosty, ktorego zbudujesz sam */
.kdz-ag-zespol::before {
  content: "5+";
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  left: 50%; top: 46%; transform: translate(-50%, -50%);
  font: 800 clamp(22rem, 59vw, 61rem)/.75 var(--font);
  letter-spacing: -.06em;
  color: rgba(244,242,237,.028);
  -webkit-text-stroke: 1.5px rgba(240,169,59,.075);
}
.kdz-ag-zespol > * { position: relative; z-index: 1; }
@media (max-width: 45.99rem) { .kdz-ag-zespol::before { top: 43%; font-size: 27rem; } }
.kdz-ag-zespol h2 { font-size: clamp(1.8rem, 1.1rem + 3.2vw, 3.8rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; max-width: 26ch; text-wrap: balance; }
.kdz-ag-zespol h2 em { font-style: normal; color: var(--bursztyn); }
.kdz-ag-zespol__lead { color: var(--szept); max-width: 76ch; margin-top: .9rem; font-size: clamp(1rem, .95rem + .25vw, 1.12rem); }

/* GALERIA AGENTOW: jedna duza postac zamiast szesciu kafelkow.
   Siatka szesciu kart zajmowala dwa ekrany i powtarzala ten sam uklad szesc razy. */
.kdz-ag-galeria { margin-top: clamp(1.3rem, 2.6vw, 2rem); }
.kdz-ag-galeria__ekran { position: relative; }
.kdz-ag-agentX { display: none; grid-template-columns: 1fr; gap: 1.2rem; align-items: center; }
.kdz-ag-agentX.kdz-ag-jest { display: grid; animation: wejscie .32s ease-out; }
@media (min-width: 52rem) { .kdz-ag-agentX { grid-template-columns: minmax(0, .46fr) minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 3.4rem); } }
@keyframes wejscie { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.kdz-ag-agentX__foto { position: relative; justify-self: center; width: min(100%, 17rem); }
/* TELEFON: wybor, opis i grafika maja zmiescic sie na jednym ekranie.
   Zmierzone na Galaxy S22 (360x780), bo to realny telefon, a nie wymyslony przypadek.

   1. Opis idzie NAD zdjecie. Ze zdjeciem na gorze przelaczenie kafelka podmienialo tresc,
      ktorej nie bylo widac: robot zajmowal 361 px, wiec zeby przeczytac opis trzeba bylo
      przewinac w dol, a zeby zmienic agenta - wrocic na gore.
   2. Robot z 17 na 12,5 rem: 361 -> 266 px. Dalej jest bohaterem sekcji, przestaje byc plakatem.
   3. Grafika blizej tekstu: odstep 1,2 -> 0,5 rem, czyli 37 -> 26 px w kadrze.

   Blok MUSI stac PO regule bazowej `.kdz-ag-agentX__foto`. Przy tej samej szczegolowosci
   wygrywa pozniejsza regula, a zapytanie o media szczegolowosci nie podnosi - postawiony
   wyzej dawal `order` i odstep, ale szerokosc cicho wracala do 17 rem. */
@media (max-width: 51.99rem) {
  .kdz-ag-agentX__foto { order: 2; width: min(100%, 12.5rem); margin-block: -1.3rem -1.1rem; }
  .kdz-ag-agentX { gap: .5rem; }
}
/* Sam odstep nie wystarczyl, bo dziura pod tekstem NIE jest odstepem tylko obrazkiem:
   PNG-i robotow maja 8-9,6% przezroczystego zapasu u gory i 6-9% u dolu (zmierzone
   `getbbox()` na szesciu plikach). Przy szerokosci 12,5 rem to okolo 23 px niewidzialnego
   powietrza nad glowa i 20 px pod stopami. Ujemny margines odbiera je z powrotem,
   zamiast przycinac zrodla - kadr zostaje nietkniety, wiec ta sama grafika dalej
   dziala na desktopie. */
.kdz-ag-agentX__foto img { position: relative; z-index: 1; width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 34px rgba(0,0,0,.55)); }
/* plyta w kolorze modulu, ta sama zasada co wczesniej pod kafelkami */
.kdz-ag-agentX__foto::before {
  content: ""; position: absolute; inset: 28% -6% 4%; z-index: 0;
  background: var(--plyta, rgba(240,169,59,.16));
  clip-path: polygon(0 16px, 16px 0, 100% 0, 100% 100%, 0 100%);
}
.kdz-ag-agentX__rola { font: 700 .74rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--bursztyn); }
.kdz-ag-agentX__t { font-weight: 800; font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem); letter-spacing: -.04em; line-height: 1.03; margin-top: .5rem; }
.kdz-ag-agentX__d { color: var(--szept); font-size: 1.05rem; margin-top: .7rem; max-width: 52ch; }
.kdz-ag-agentX__z { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid rgba(244,242,237,.14); font-size: 1rem; font-weight: 600; max-width: 52ch; }
.kdz-ag-agentX__z em { font-style: normal; color: var(--bursztyn); }

/* pasek wyboru: miniatury calej piatki plus szosty bez przebrania */
.kdz-ag-galeria__wybor { margin-bottom: clamp(1.2rem, 2.4vw, 1.8rem); display: flex; flex-wrap: wrap; gap: .5rem; }
/* Znak plus zajmuje 23 px w wierszu i na telefonie zepchnal szosty kafelek do TRZECIEGO
   rzedu: przy 360 px szerokosci na pasek zostaje 323 px, a trzy kafelki po 92 px z odstepem
   0,5 rem plus znak nie mieszczą się o niecaly piksel. Ciasniejszy odstęp oddaje ten
   piksel i uklad wraca do dwoch rzedow: 3 + (2 i szosty za plusem). 287 -> 186 px. */
@media (max-width: 51.99rem) { .kdz-ag-galeria__wybor { gap: .35rem; } }
.kdz-ag-mini {
  cursor: pointer; border: 0; background: rgba(244,242,237,.06); padding: .4rem .5rem .3rem;
  display: grid; justify-items: center; gap: .25rem; width: 5.4rem;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  transition: background .18s, transform .14s;
}
.kdz-ag-mini img { width: 2.9rem; height: auto; display: block; filter: grayscale(.55) brightness(.8); transition: filter .18s; }
.kdz-ag-mini span { font: 700 .66rem/1.1 var(--font); color: var(--szept); text-align: center; transition: color .18s; }
.kdz-ag-mini:hover { background: rgba(240,169,59,.16); transform: translateY(-2px); }
.kdz-ag-mini:hover img { filter: none; }
.kdz-ag-mini[aria-pressed="true"] { background: var(--bursztyn); }
.kdz-ag-mini[aria-pressed="true"] img { filter: none; }
.kdz-ag-mini[aria-pressed="true"] span { color: #22190A; }

/* SZOSTY KAFELEK NIE JEST SZOSTYM AGENTEM Z PAKIETU.
   Naglowek mowi o pieciu, kafelkow jest szesc - i to mylilo przy odbiorze (Bart, 25.08).
   Piatka stoi zwarta, potem znak plus, potem kafelek na bursztynowym tle: to nie kolejny
   gotowiec, tylko umiejetnosc, ktora zostaje po kursie. Tlo, nie obrys, bo kafelki maja
   scieta krawedz przez clip-path i obrys urywalby sie na ukosie. */
/* STRZALKA, NIE PLUS (Grzegorz, 25.08): plus czytal sie jako dzialanie arytmetyczne,
   czyli "piec dodac jeden rowna sie szesc gotowcow", a lead sekcji mowi cos odwrotnego.
   Strzalka niesie nastepstwo: piatka prowadzi do metody, ktora zostaje po kursie.
   Rysowana, nie wpisana jako znak U+2192 - Archivo nie ma go gwarantowanego, a podstawiony
   kroj zastepczy mialby inna szerokosc. Szerokosc 1.372rem = 23,33 px, czyli co do setnej
   tyle, ile zajmowal plus z paddingiem: rzad zawija sie na styk i nie wolno go ruszyc. */
.kdz-ag-mini-strzalka {
  align-self: center; flex: 0 0 auto; width: 1.372rem; height: .915rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M2 8h17M13.5 2.5L19 8l-5.5 5.5' fill='none' stroke='%23F0A93B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.kdz-ag-mini--wlasny { background: rgba(240,169,59,.15); }
.kdz-ag-mini--wlasny img { filter: grayscale(.15) brightness(.95); }
.kdz-ag-mini--wlasny span { color: var(--bursztyn); }
.kdz-ag-mini--wlasny:hover { background: rgba(240,169,59,.28); }
.kdz-ag-mini--wlasny[aria-pressed="true"] { background: var(--bursztyn); }
.kdz-ag-mini--wlasny[aria-pressed="true"] img { filter: none; }
.kdz-ag-mini--wlasny[aria-pressed="true"] span { color: #22190A; }

.kdz-ag-zespol__stopka { margin-top: clamp(1.3rem, 2.6vw, 2rem); display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; }
.kdz-ag-zespol__stopka p { color: var(--szept); font-size: .95rem; max-width: 46ch; }

/* ---------- 5. demonstracja: zapytaj agenta ---------- */
/* burgundowa podloga z pudelka produktowego. Bordo jest TLEM, nigdy kolorem tekstu. */
/* Burgund NIE jest tu tlem sekcji, tylko ukosnym klinem po prawej stronie.
   Plaszczyzna koloru na cala sekcje czytala sie jak plama, nawet z lamana krawedzia. */
.kdz-ag-demo { padding-block: clamp(2.4rem, 4.6vw, 3.4rem); position: relative; overflow: hidden; background: transparent; }
.kdz-ag-demo::before {
  content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23z)' opacity='.42'/%3E%3C/svg%3E"),
    linear-gradient(115deg, #4E1724 0%, #34131C 46%, #1F0C12 100%);
  background-blend-mode: overlay, normal;
  /* Dolna krawedz zeszla z 86% na 80% (25.08). Zglosili to niezaleznie Bart i Grzegorz jako
     "brakujacy margines" nad trojka kart i obaj mieli racje co do objawu, choc nie co do
     przyczyny: to nie byl odstep, tylko krawedz klina, ktora konczyla sie 40 px WEWNATRZ
     bloku trzech kart. Kolorowa granica przecinajaca tekst w poprzek czyta sie jak usterka,
     bo nia jest. Teraz klin konczy sie nad trojka, a rozdziela je cienka linia bloku.
     Jak dwoch recenzentow widzi blad tam, gdzie byl zamysl, to zamysl nie dziala. */
  clip-path: polygon(34% 0, 100% 0, 100% 80%, 16% 80%, 24% 58%);
}
/* ukosne pasy tam, gdzie klin styka sie z nocia */
.kdz-ag-demo::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: 2%; top: 4%; width: min(30vw, 17rem); aspect-ratio: 1.6;
  background-image: repeating-linear-gradient(-58deg, rgba(240,169,59,.2) 0 1px, transparent 1px 11px);
  -webkit-mask-image: linear-gradient(-58deg, #000, transparent 76%);
          mask-image: linear-gradient(-58deg, #000, transparent 76%);
}
/* wielki znak zapytania wypalony w burgundzie: sekcja jest o zadawaniu pytan */
.kdz-ag-demo__pyt {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  right: 6%; top: 40%; transform: translateY(-50%);
  font: 800 clamp(18rem, 34vw, 34rem)/.72 var(--font); letter-spacing: -.06em;
  color: rgba(244,242,237,.035); -webkit-text-stroke: 2px rgba(240,169,59,.08);
}
/* fale rozchodzace sie od kartoteki: agent przeszukuje dokumenty */
.kdz-ag-demo__fale {
  position: absolute; z-index: 0; pointer-events: none;
  left: 8%; bottom: 14%; width: min(52vw, 34rem); aspect-ratio: 1;
  background: repeating-radial-gradient(circle at 34% 62%, transparent 0 30px, rgba(240,169,59,.13) 30px 31px);
  -webkit-mask-image: radial-gradient(circle at 34% 62%, #000, transparent 68%);
          mask-image: radial-gradient(circle at 34% 62%, #000, transparent 68%);
}
@media (max-width: 61.99rem) {
  .kdz-ag-demo__pyt { right: -2%; top: 30%; font-size: 16rem; }
  .kdz-ag-demo__fale { left: -14%; bottom: 26%; width: 90vw; }
}
@media (max-width: 61.99rem) {
  /* na telefonie klin idzie w poprzek, bo pionowy podzial nie ma tam sensu */
  .kdz-ag-demo::before { clip-path: polygon(0 38%, 100% 26%, 100% 100%, 0 100%); }
  .kdz-ag-demo::after { display: none; }
}
/* TYLKO wrap, nie kazde dziecko: `.kdz-ag-demo > *` nadpisywalo pozycjonowanie ozdobnikom
   (rowna specyficznosc, pozniejsza regula), przez co wielki znak zapytania wpadal
   w uklad strony i rozpychal cala sekcje. */
.kdz-ag-demo > .kdz-ag-wrap { position: relative; z-index: 1; }
/* robot z zarowka stoi przy pytaniach: to on zacheca, zeby o cos zapytac */
.kdz-ag-demo__gora { display: grid; gap: clamp(1.4rem, 3vw, 2.6rem); align-items: end; }
@media (min-width: 62rem) { .kdz-ag-demo__gora { grid-template-columns: minmax(0, 1fr) minmax(0, .3fr); } }
/* szerokosc jawna na kontenerze: przy lazy loading obrazek nie ma jeszcze wymiaru wlasnego
   i kolumna potrafi zejsc do zera */
.kdz-ag-demo__robot { justify-self: center; width: min(100%, 17rem); }
.kdz-ag-demo__robot img { width: 100%; height: auto; display: block; filter: drop-shadow(0 22px 40px rgba(0,0,0,.55)); animation: dryf 9s ease-in-out infinite; }
/* Na telefonie robot z zarowka wchodzi PRZED naglowek, a nie miedzy pytania i odpowiedz.
   Stojac w srodku rozpychal je o 150 px i klikniecie w pytanie nie dawalo widocznej reakcji. */
@media (max-width: 61.99rem) {
  .kdz-ag-demo__robot { order: -1; justify-self: end; width: 6.5rem; margin: -.6rem -.4rem -2rem 0; }
}
.kdz-ag-demo h2 { font-size: clamp(1.8rem, 1.1rem + 2.8vw, 3.3rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; max-width: 20ch; text-wrap: balance; margin-top: 1.1rem; }
.kdz-ag-demo h2 em { font-style: normal; color: var(--bursztyn); }
.kdz-ag-demo__wstep { color: var(--szept); max-width: 52ch; margin-top: .8rem; font-size: 1.04rem; }

/* pytania: pigulki ze scietym rogiem */
.kdz-ag-pytania { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: clamp(1.1rem, 2vw, 1.5rem); }
.kdz-ag-pyt {
  cursor: pointer; border: 0; background: rgba(244,242,237,.08); color: var(--kosc);
  font: 600 .95rem/1.35 var(--font); text-align: left; padding: .78em 1.15em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
  transition: background .18s, color .18s, transform .12s;
}
.kdz-ag-pyt:hover { background: rgba(240,169,59,.22); transform: translateY(-1px); }
.kdz-ag-pyt[aria-pressed="true"] { background: var(--bursztyn); color: #22190A; font-weight: 700; }

.kdz-ag-scena2 { margin-top: clamp(1.4rem, 2.8vw, 2.2rem); display: grid; gap: clamp(2.4rem, 5vw, 3.6rem); align-items: center; }
@media (min-width: 62rem) { .kdz-ag-scena2 { grid-template-columns: minmax(0, .78fr) minmax(0, 1fr); } }

/* KARTOTEKA: teczki lezace na biurku. Wybrana wysuwa sie w strone odpowiedzi,
   reszta przygasa. To jest sygnatura tej sekcji: ruch niesie narracje, zero diagramu. */
/* zapas po bokach, zeby obrocone teczki miescily sie razem z bounding boxem rotacji.
   Proporcja kontenera musi pomiescic najnizsza teczke, inaczej wchodzi w tekst pod spodem. */
/* Proporcja 1.18 NIE miescila najnizszej teczki: zmierzone na zywej stronie 25.08 (zgloszenie
   Grzegorza) teczka OFERTA konczyla sie 8 px PONIZEJ gory noty pod kartoteka i przykrywala
   pierwszy wiersz tekstu. Dotyczylo wylacznie desktopu - ponizej 62rem obowiazuje proporcja
   2.05 z bloku telefonu, gdzie luzu bylo ponad 300 px.
   Teczka jest pozycjonowana w procentach wysokosci kontenera, wiec jej dol rosnie wolniej
   niz sam kontener (0,2 wysokosci kontra cala): 1.08 daje 15 px zapasu i kosztuje 29 px
   wysokosci sekcji. Kompozycji teczek nie ruszamy, bo byla zatwierdzona wizualnie. */
.kdz-ag-kartoteka { position: relative; width: 92%; max-width: 22rem; aspect-ratio: 1.08; margin-inline: auto; }
/* ciemne pole pod teczkami: rozbija burgundowa plaszczyzne i daje papierom na czym lezec */
/* teczki lezą juz na ciemnej stronie sekcji, wiec dodatkowa plyta jest zbedna */
/* papier jest jasny: na burgundzie ciemna teczka zlewala sie z tlem */
.kdz-ag-teczka {
  position: absolute; width: 46%; aspect-ratio: .74; padding: 1.1rem 1.05rem 1rem;
  background: linear-gradient(168deg, #EDE7DB 0%, #CDC2B1 100%);
  box-shadow: 0 22px 40px rgba(0,0,0,.55);
  border-top: 4px solid #B3A695;
  display: flex; flex-direction: column; justify-content: flex-end; gap: .55rem;
  transition: transform .5s cubic-bezier(.22,.9,.28,1.18), filter .35s, border-color .35s, box-shadow .35s;
}
.kdz-ag-teczka i { display: block; height: 5px; border-radius: 3px; background: rgba(70,52,42,.28); transition: background .35s; }
.kdz-ag-teczka i:nth-of-type(1) { width: 76%; }
.kdz-ag-teczka i:nth-of-type(2) { width: 92%; }
.kdz-ag-teczka i:nth-of-type(3) { width: 58%; }
.kdz-ag-teczka__nazwa {
  margin-top: .45rem; font: 800 .86rem/1 var(--font); letter-spacing: .18em; text-transform: uppercase;
  color: #6B5344; transition: color .35s;
}
.kdz-ag-teczka:nth-of-type(1) { left: 0;   top: 20%; transform: rotate(-9deg); z-index: 1; }
.kdz-ag-teczka:nth-of-type(2) { left: 27%; top: 10%; transform: rotate(-1deg); z-index: 2; }
.kdz-ag-teczka:nth-of-type(3) { left: 54%; top: 0;   transform: rotate(8deg);  z-index: 3; }
/* przygaszenie jasnoscia, nie przezroczystoscia: papier ma zostac papierem,
   a nie zamienic sie w brudna plame na burgundzie */
.kdz-ag-kartoteka.kdz-ag-wybrano .kdz-ag-teczka { filter: brightness(.58) saturate(.85); }
.kdz-ag-teczka.kdz-ag-wybrana {
  filter: none; z-index: 4;
  border-top-color: var(--bursztyn);
  box-shadow: 0 34px 60px rgba(0,0,0,.62);
}
.kdz-ag-teczka.kdz-ag-wybrana i { background: rgba(70,52,42,.42); }
.kdz-ag-teczka.kdz-ag-wybrana .kdz-ag-teczka__nazwa { color: #2A1017; }
.kdz-ag-teczka:nth-of-type(1).kdz-ag-wybrana { transform: rotate(-3deg) translate(16%, -14%) scale(1.07); }
.kdz-ag-teczka:nth-of-type(2).kdz-ag-wybrana { transform: rotate(1deg)  translate(14%, -16%) scale(1.07); }
.kdz-ag-teczka:nth-of-type(3).kdz-ag-wybrana { transform: rotate(3deg)  translate(10%, -8%)  scale(1.07); }

/* Na telefonie kartoteka klada sie plasko w jeden rzad i jest niska, zeby pytanie,
   teczki i odpowiedz miescily sie razem. Wczesniej odpowiedz byla poza ekranem
   i klikniecie w pytanie wygladalo, jakby nic sie nie stalo. */
@media (max-width: 61.99rem) {
  .kdz-ag-kartoteka { width: 100%; max-width: none; aspect-ratio: 2.05; margin-inline: 0; }
  .kdz-ag-teczka { width: 27%; padding: .7rem .6rem .6rem; gap: .35rem; }
  .kdz-ag-teczka i { height: 4px; }
  .kdz-ag-teczka__nazwa { font-size: .68rem; letter-spacing: .12em; margin-top: .3rem; }
  .kdz-ag-teczka:nth-of-type(1) { left: 3%;  top: 10%; transform: rotate(-6deg); }
  .kdz-ag-teczka:nth-of-type(2) { left: 36%; top: 2%;  transform: rotate(-1deg); }
  .kdz-ag-teczka:nth-of-type(3) { left: 69%; top: 8%;  transform: rotate(5deg); }
  .kdz-ag-teczka:nth-of-type(1).kdz-ag-wybrana { transform: rotate(-2deg) translateY(-12%) scale(1.08); }
  .kdz-ag-teczka:nth-of-type(2).kdz-ag-wybrana { transform: rotate(0deg)  translateY(-12%) scale(1.08); }
  .kdz-ag-teczka:nth-of-type(3).kdz-ag-wybrana { transform: rotate(2deg)  translateY(-12%) scale(1.08); }
  .kdz-ag-scena2 { gap: 1.2rem; }
  .kdz-ag-odp { min-height: 7rem; }
}

/* STATUS: wielki napis, pod ktorym przesuwa sie bursztynowe zaznaczenie.
   Zastapil liste etapow z kropkami: ta sama tresc, jeden element zamiast czterech. */
.kdz-ag-status { position: relative; display: inline-block; padding: .34em .6em .34em .5em; }
.kdz-ag-status__marker {
  position: absolute; z-index: 0; left: 0; top: 0; bottom: 0; width: 0;
  background: linear-gradient(90deg, rgba(240,169,59,.3), rgba(240,169,59,.14));
  transition: width .45s cubic-bezier(.4,.1,.2,1);
}
.kdz-ag-status__slowo {
  position: relative; z-index: 1;
  font: 800 clamp(1.05rem, .9rem + .8vw, 1.55rem)/1.15 var(--font);
  letter-spacing: -.01em; text-transform: uppercase; color: var(--kosc);
}
.kdz-ag-status--gotowe .kdz-ag-status__marker { background: linear-gradient(90deg, rgba(240,169,59,.42), rgba(240,169,59,.1)); }

.kdz-ag-odp { min-height: 9rem; }
/* zachęta wypelnia prawa kolumne, zanim padnie pierwsze pytanie */
.kdz-ag-odp__zacheta { color: var(--szept); font-size: 1.02rem; margin-top: 1.1rem; max-width: 34ch; }
.kdz-ag-odp.kdz-ag-ruszyla .kdz-ag-odp__zacheta { display: none; }
.kdz-ag-odp__tekst { font-size: clamp(1.15rem, 1rem + .8vw, 1.62rem); font-weight: 300; line-height: 1.42; letter-spacing: -.022em; margin-top: 1.1rem; min-height: 1.4em; }
.kdz-ag-odp__tekst::after { content: "▍"; color: var(--bursztyn); opacity: 0; }
.kdz-ag-odp.kdz-ag-pisze .kdz-ag-odp__tekst::after { opacity: 1; animation: mruga .8s steps(2) infinite; }
@keyframes mruga { 50% { opacity: 0; } }
.kdz-ag-odp__zrodlo { margin-top: 1.2rem; font-size: .92rem; color: var(--szept); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }
.kdz-ag-odp.kdz-ag-gotowa .kdz-ag-odp__zrodlo { opacity: 1; transform: none; }
.kdz-ag-odp__zrodlo b { color: var(--kosc); font-weight: 600; font-variant-numeric: tabular-nums; }
.kdz-ag-odp__zrodlo i { font-style: normal; color: var(--bursztyn); }
.kdz-ag-demo__nota { margin-top: 1.3rem; font-size: .88rem; color: var(--szept); max-width: 64ch; }

/* trzy kroki metody */
.kdz-ag-trojka { margin-top: clamp(1.6rem, 3vw, 2.2rem); border-top: 1px solid rgba(244,242,237,.14); padding-top: 1.3rem; display: grid; gap: 1.4rem; }
@media (min-width: 52rem) { .kdz-ag-trojka { grid-template-columns: repeat(3, 1fr); gap: 2.6rem; } }
.kdz-ag-trojka p { font-size: 1rem; }
.kdz-ag-trojka b { display: block; font-weight: 800; letter-spacing: -.02em; margin-bottom: .25rem; }
.kdz-ag-trojka span { color: var(--szept); }

/* ---------- 6. obawy: wektor, obawa, odpowiedz ---------- */
.kdz-ag-obawy { padding-block: clamp(2rem, 4vw, 3rem); position: relative; overflow: hidden; }
.kdz-ag-obawy h2 { font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3.1rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.04; max-width: 22ch; text-wrap: balance; }
.kdz-ag-obawy h2 em { font-style: normal; color: var(--bursztyn); }
.kdz-ag-obawy__lead { color: var(--szept); max-width: 58ch; margin-top: .8rem; font-size: 1rem; }

.kdz-ag-pary { margin-top: clamp(1.4rem, 2.8vw, 2.2rem); display: grid; gap: clamp(1.3rem, 2.6vw, 2rem); }
@media (min-width: 56rem) { .kdz-ag-pary { grid-template-columns: 1fr 1fr; gap: clamp(2.4rem, 4vw, 3.6rem) clamp(3rem, 6vw, 5rem); } }

.kdz-ag-para { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 1.4rem; align-items: start; }
/* znak sprawy: duzy wektor w burgundowym kole, jedyne miejsce z kolorem pudelka w tej sekcji */
/* zamiast ikony w kolku: nasz robot w pozie odpowiadajacej obawie */
.kdz-ag-para__znak { grid-row: 1 / span 2; width: clamp(4.6rem, 12vw, 7.4rem); flex: none; align-self: start; }
.kdz-ag-para__znak img { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 22px rgba(0,0,0,.5)); }
.kdz-ag-para__lek {
  font-size: clamp(1.12rem, 1rem + .55vw, 1.42rem); font-weight: 300; letter-spacing: -.03em;
  line-height: 1.18; text-wrap: balance; align-self: center;
}
.kdz-ag-para__odp { grid-column: 2; color: var(--szept); font-size: .95rem; margin-top: .65rem; }
.kdz-ag-para__odp b { color: var(--kosc); font-weight: 600; }
@media (max-width: 55.99rem) {
  .kdz-ag-para { gap: 0 1rem; }
  .kdz-ag-para__lek { align-self: center; }
}

.kdz-ag-obawy__stopka { margin-top: clamp(1.5rem, 3vw, 2.2rem); border-top: 1px solid rgba(244,242,237,.12); padding-top: 1.1rem; font-size: .88rem; color: var(--szept); max-width: 72ch; }
.kdz-ag-obawy__stopka b { color: var(--kosc); font-weight: 600; }

/* ---------- 7. program: os z rozwijanymi modulami ---------- */
.kdz-ag-program { padding-block: clamp(2rem, 4vw, 3rem); position: relative; overflow: hidden; }
.kdz-ag-program__gora { display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); align-items: end; }
@media (min-width: 58rem) { .kdz-ag-program__gora { grid-template-columns: minmax(0, 1fr) minmax(0, .34fr); } }
.kdz-ag-program h2 { font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3.1rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.04; max-width: 22ch; text-wrap: balance; }
.kdz-ag-program h2 em { font-style: normal; color: var(--bursztyn); }
.kdz-ag-program__lead { color: var(--szept); max-width: 62ch; margin-top: .8rem; font-size: 1rem; }
.kdz-ag-program__lead b { color: var(--kosc); font-weight: 600; }
.kdz-ag-program__kto { justify-self: center; max-width: 9.5rem; text-align: center; }
.kdz-ag-program__kto img { width: 100%; height: auto; display: block; filter: drop-shadow(0 16px 30px rgba(0,0,0,.55)); animation: dryf 9s ease-in-out infinite; }
.kdz-ag-program__kto p { color: var(--szept); font-size: .78rem; margin-top: .5rem; }
/* na telefonie postac modulu zerowego stoi na srodku i jest wyraznie wieksza */
@media (max-width: 57.99rem) {
  .kdz-ag-program__kto { max-width: 13rem; justify-self: center; margin-top: .4rem; }
  .kdz-ag-program__kto p { font-size: .84rem; max-width: 24ch; margin-inline: auto; }
}

/* pasek wypelnienia: ile z osmiu jest juz otwarte */
.kdz-ag-postep { margin-top: clamp(1.2rem, 2.4vw, 1.8rem); display: flex; align-items: center; gap: 1rem 1.6rem; flex-wrap: wrap; }
.kdz-ag-postep__tor { flex: 1 1 16rem; height: 8px; background: rgba(244,242,237,.1); display: block; }
.kdz-ag-postep__tor b { display: block; height: 100%; width: 12.5%; background: var(--bursztyn); }
.kdz-ag-postep__opis { font-size: .95rem; color: var(--szept); }
.kdz-ag-postep__opis b { color: var(--kosc); font-weight: 700; }

/* zamiast osi z kropkami: numer modulu niesie kolejnosc, a otwarty moduł dostaje
   burgundowa plaszczyzne. Kolejnosc jest tu prawdziwa, wiec numeracja cos znaczy. */
/* osiem modulow w jednej kolumnie robilo z sekcji dwa ekrany; na szerokim ekranie
   dzielimy je na dwie kolumny */
.kdz-ag-moduly { margin-top: clamp(1.1rem, 2vw, 1.5rem); }
@media (min-width: 62rem) {
  .kdz-ag-moduly { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 3.4rem); align-items: start; }
  .kdz-ag-modul:nth-child(5) { border-top: 0; }
}
.kdz-ag-modul { position: relative; transition: background .25s; }
.kdz-ag-modul + .kdz-ag-modul { border-top: 1px solid rgba(244,242,237,.1); }
.kdz-ag-modul--otwarty { background: linear-gradient(90deg, rgba(58,18,28,.85), rgba(42,16,23,.25) 62%, transparent); }
/* wlasny akordeon zamiast <details>: tylko jeden modul otwarty naraz i plynne rozwijanie
   (details nie animuje sie natywnie, a grid-template-rows 0fr -> 1fr tak) */
.kdz-ag-modul__glowa {
  cursor: pointer; border: 0; background: none; color: inherit; width: 100%; text-align: left;
  font: inherit; display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto;
  gap: .3rem 1.2rem; align-items: baseline; padding: 1.15rem .9rem;
}
.kdz-ag-modul__tresc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s cubic-bezier(.3,.85,.35,1); }
.kdz-ag-modul.kdz-ag-otwarty .kdz-ag-modul__tresc { grid-template-rows: 1fr; }
.kdz-ag-modul__tresc > div { overflow: hidden; }
/* Numer wygaszonego modulu mial przezroczystosc .2, czyli kontrast 1,9 do 1 wobec nocy.
   Napis ma 25,5 px i wage 800, wiec obowiazuje go prog 3 do 1 - i tak go nie spelnial.
   .42 daje 3,8 do 1, czyli zapas, a modul otwarty podniesiony do .7, zeby roznica miedzy
   zwinietym a rozwinietym pozostala czytelna. Zglosil Lighthouse, 24.08. */
.kdz-ag-modul__nr {
  font: 800 1.5rem/1 var(--font); letter-spacing: -.05em; font-variant-numeric: tabular-nums;
  color: rgba(244,242,237,.42); transition: color .2s;
}
.kdz-ag-modul.kdz-ag-otwarty .kdz-ag-modul__nr { color: rgba(244,242,237,.7); }
.kdz-ag-modul--otwarty .kdz-ag-modul__nr { color: var(--bursztyn); }
.kdz-ag-modul__t { font-weight: 700; font-size: 1.08rem; letter-spacing: -.025em; color: var(--szept); transition: color .18s; }
.kdz-ag-modul.kdz-ag-otwarty .kdz-ag-modul__t, .kdz-ag-modul__glowa:hover .kdz-ag-modul__t { color: var(--kosc); }
.kdz-ag-modul--otwarty .kdz-ag-modul__t { color: var(--kosc); }
.kdz-ag-modul__ile { color: var(--szept); font-size: .8rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kdz-ag-modul__ile::after { content: "+"; display: inline-block; margin-left: .7rem; color: var(--bursztyn); font-weight: 800; transition: transform .2s; }
.kdz-ag-modul.kdz-ag-otwarty .kdz-ag-modul__ile::after { transform: rotate(45deg); }
.kdz-ag-modul__d { color: var(--szept); font-size: .95rem; max-width: 66ch; padding: 0 .9rem 1.3rem 5.1rem; }
@media (max-width: 45.99rem) { .kdz-ag-modul__d { padding-left: .9rem; } }
@keyframes rozwin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.kdz-ag-znacznik { display: inline-block; margin-left: .6rem; font: 800 .6rem/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: #22190A; background: var(--bursztyn); padding: .42em .7em; vertical-align: .14em; clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%); }
.kdz-ag-znacznik--cichy { background: transparent; color: var(--szept); box-shadow: inset 0 0 0 1px rgba(244,242,237,.24); clip-path: none; font-weight: 700; }
@media (max-width: 45.99rem) {
  .kdz-ag-modul__glowa { grid-template-columns: 1fr; }
  .kdz-ag-modul__ile { grid-row: 2; }
  .kdz-ag-znacznik { margin-left: 0; margin-top: .4rem; }
}
.kdz-ag-program__stopka { margin-top: clamp(1.2rem, 2.4vw, 1.7rem); display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; }
.kdz-ag-program__stopka p { color: var(--szept); font-size: .9rem; max-width: 42ch; }

/* ---------- 8. bonus: pieciu gotowych ---------- */
.kdz-ag-bonus { padding-block: clamp(2rem, 4vw, 3rem); position: relative; overflow: hidden; }
.kdz-ag-bonus h2 { font-size: clamp(1.8rem, 1.1rem + 2.8vw, 3.3rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; max-width: 20ch; text-wrap: balance; }
.kdz-ag-bonus h2 em { font-style: normal; color: var(--bursztyn); }
.kdz-ag-bonus__lead { color: var(--szept); max-width: 62ch; margin-top: .8rem; font-size: 1.02rem; }
.kdz-ag-bonus__lead b { color: var(--kosc); font-weight: 600; }
/* piatka stoi na jednej plycie: to jest zespol, nie piec osobnych kart */
.kdz-ag-ekipa { margin-top: clamp(1rem, 2vw, 1.5rem); position: relative; max-width: 33rem; margin-inline: auto; }
.kdz-ag-ekipa__plyta {
  position: absolute; z-index: 0; left: 0; right: 0; bottom: 22%; top: 34%;
  background: linear-gradient(180deg, rgba(58,18,28,.85), rgba(42,16,23,.25));
  clip-path: polygon(0 22px, 22px 0, 100% 0, 100% 100%, 0 100%);
}
.kdz-ag-ekipa img { position: relative; z-index: 1; width: 100%; height: auto; display: block; filter: drop-shadow(0 26px 44px rgba(0,0,0,.55)); }
/* na telefonie jedna kolumna: przy dwoch piata pozycja zostawala sama i wygladalo to na blad */
.kdz-ag-role { margin-top: 1rem; display: grid; gap: 1.2rem 1rem; grid-template-columns: 1fr; }
@media (min-width: 34rem) { .kdz-ag-role { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 58rem) { .kdz-ag-role { grid-template-columns: repeat(5, 1fr); gap: 1.6rem 1.4rem; } }
.kdz-ag-rola__t { font-weight: 800; font-size: 1.02rem; letter-spacing: -.025em; }
.kdz-ag-rola__d { color: var(--szept); font-size: .92rem; margin-top: .3rem; }
/* nota idzie na CALA szerokosc, tak jak stopka sekcji o autorach - przy 70ch lamala sie
   w waski slupek pod piatka robotow i wygladala jak przypis, a nie jak domkniecie sekcji */
.kdz-ag-bonus__nota { margin-top: clamp(1.1rem, 2.2vw, 1.6rem); font-size: .95rem; color: var(--szept); }
.kdz-ag-bonus__nota b { color: var(--kosc); font-weight: 600; }

/* ---------- 9. cena ---------- */
/* Sekcja stoi na nocy, nie na burgundzie: pudelko produktu JEST burgundowe i na burgundowym
   tle znikalo. Bordo wraca tu jako plyta z lamana krawedzia, na ktorej lezy oferta. */
.kdz-ag-cena { padding-block: clamp(2rem, 4vw, 3rem); position: relative; overflow: hidden; }
.kdz-ag-cena h2 { font-size: clamp(1.8rem, 1.1rem + 2.8vw, 3.3rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; max-width: 18ch; text-wrap: balance; margin-top: 1rem; }
.kdz-ag-cena h2 em { font-style: normal; color: var(--bursztyn); }

.kdz-ag-oferta2 { display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); align-items: start; margin-top: clamp(1.3rem, 2.6vw, 2rem); }
@media (min-width: 62rem) { .kdz-ag-oferta2 { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: clamp(2.5rem, 5vw, 4.5rem); } }

/* plyta oferty: burgund z pudelka, krawedz lamana, nie prosta */
.kdz-ag-plyta { position: relative; padding: clamp(1.4rem, 2.6vw, 2rem) clamp(1.4rem, 2.4vw, 2rem) clamp(1.5rem, 2.8vw, 2rem); }
.kdz-ag-plyta::before {
  content: ""; position: absolute; z-index: 0; inset: 0;
  background: linear-gradient(158deg, #4A1622 0%, #2E1119 58%, #210D13 100%);
  clip-path: polygon(0 2.4rem, 34% 0, 100% 1.4rem, 100% calc(100% - 3rem), 58% 100%, 0 calc(100% - .8rem));
}
.kdz-ag-plyta > * { position: relative; z-index: 1; }
.kdz-ag-plyta__pudelko { display: block; width: min(52%, 12.5rem); height: auto; margin: -2.6rem 0 .6rem -.8rem; filter: drop-shadow(0 30px 50px rgba(0,0,0,.6)); }
@media (max-width: 61.99rem) { .kdz-ag-plyta__pudelko { width: 100%; max-width: 22rem; margin: -2rem auto .8rem; } }

.kdz-ag-kwota { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
@media (max-width: 45.99rem) { .kdz-ag-kwota { flex-wrap: nowrap; align-items: flex-end; gap: .5rem; } .kdz-ag-kwota__robot { width: 4.6rem; margin: 0 0 -.4rem -.2rem; } }
/* robot z markerem stoi przy przekreslonej kwocie: to on wlasnie ja skreslil */
.kdz-ag-kwota__robot { display: none; width: clamp(6.4rem, 17vw, 10rem); height: auto; align-self: flex-end; margin: 0 0 -.6rem -.6rem; }
.kdz-ag-cena--okno .kdz-ag-kwota__robot, .kdz-ag-cena--weekend .kdz-ag-kwota__robot { display: block; }
.kdz-ag-kwota__teraz { font-weight: 800; font-size: clamp(2.8rem, 1.8rem + 4vw, 4.4rem); letter-spacing: -.055em; line-height: .9; font-variant-numeric: tabular-nums; }
/* przekreslenie rysowane odrecznie, jakby robot machnal markerem: plaska linia
   z text-decoration wygladala jak bug, a nie jak gest */
.kdz-ag-kwota__stara { position: relative; font-weight: 700; font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); color: var(--szept); font-variant-numeric: tabular-nums; display: none; }
.kdz-ag-kwota__stara::after {
  content: ""; position: absolute; left: -8%; right: -8%; top: 46%; height: .8em; transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13.5C22 7.5 41 15 60 9.5S97 4.5 117 10' fill='none' stroke='%23F0A93B' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
/* przekreslone 1990 nalezy do OBU stanow obnizki: w weekend znikaja bonusy, nie rabat */
.kdz-ag-cena--okno .kdz-ag-kwota__stara, .kdz-ag-cena--weekend .kdz-ag-kwota__stara { display: inline; }
/* plakietka przy kwocie: na telefonie blok bonusow jest daleko nizej i moze uciec */
.kdz-ag-plus-bonusy {
  display: none; margin-top: .9rem; font: 700 .95rem/1.25 var(--font); color: #22190A;
  background: var(--bursztyn); padding: .55em .9em; width: fit-content;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.kdz-ag-plus-bonusy b { font-weight: 800; }
.kdz-ag-cena--okno .kdz-ag-plus-bonusy { display: block; }
.kdz-ag-rata { color: var(--szept); font-size: 1rem; margin-top: .7rem; }
.kdz-ag-rata b { color: var(--kosc); font-weight: 600; font-variant-numeric: tabular-nums; }
.kdz-ag-cena__cta { margin-top: 1.1rem; }
.kdz-ag-btn--duzy { font-size: 1.15rem; padding: 1.15em 2.2em; }
.kdz-ag-cena__drobne { margin-top: .9rem; font-size: .88rem; color: var(--szept); max-width: 42ch; }

.kdz-ag-wsrodku { display: grid; gap: .62rem; }
.kdz-ag-wsrodku p { position: relative; padding-left: 2.2rem; font-size: 1.02rem; }
.kdz-ag-wsrodku p::before {
  content: ""; position: absolute; left: 0; top: .15rem; width: 1.5rem; height: 1.5rem;
  background: var(--bursztyn);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5l5.2 5.2L20 7'/%3E%3C/svg%3E") center/78% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5l5.2 5.2L20 7'/%3E%3C/svg%3E") center/78% no-repeat;
}
.kdz-ag-wsrodku b { font-weight: 700; }

/* dorzuty: krotkie pozycje, ktore domykaja decyzje tuz przed przyciskiem */
.kdz-ag-dorzuty { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid rgba(244,242,237,.14); display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; }
.kdz-ag-dorzuty li {
  font: 600 .88rem/1.2 var(--font); color: var(--kosc); background: rgba(244,242,237,.07);
  padding: .55em .9em; clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}

/* zegar: w prototypie liczy z daty w atrybucie, na zywej stronie date podaje serwer w strefie WP */
.kdz-ag-zegar { display: none; margin-top: 1.1rem; }
.kdz-ag-cena--okno .kdz-ag-zegar, .kdz-ag-cena--weekend .kdz-ag-zegar { display: block; }
.kdz-ag-zegar__opis { display: block; font-size: .95rem; color: var(--kosc); font-weight: 600; }
.kdz-ag-zegar__czas {
  display: inline-block; margin-top: .5rem; font: 800 clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem)/1 var(--font);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--bursztyn);
}

/* bonusy okna: dwa pudelka z cenami i rachunek pod nimi */
/* blok bonusow idzie przez cala szerokosc: po lewej robot z prezentem i duze BONUSY,
   po prawej pudelka kursow z opisami i rachunek */
.kdz-ag-bonusy { display: none; margin-top: clamp(1.3rem, 2.6vw, 2rem); padding: clamp(1.2rem, 2.4vw, 1.8rem); background: rgba(244,242,237,.05); clip-path: polygon(0 18px, 18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }
.kdz-ag-cena--okno .kdz-ag-bonusy { display: grid; gap: clamp(1.6rem, 4vw, 3.2rem); }
/* trzy kolumny zamiast dwoch wierszy: blok bonusow schodzi z 800 px do okolo 300 */
.kdz-ag-bonusy__glowa { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.2rem; align-items: center; }
@media (min-width: 58rem) { .kdz-ag-bonusy__glowa { grid-template-columns: 1fr; text-align: left; gap: .4rem; align-content: start; } }
.kdz-ag-bonusy__robot { width: clamp(5.6rem, 14vw, 9.5rem); height: auto; display: block; filter: drop-shadow(0 18px 32px rgba(0,0,0,.6)); }
.kdz-ag-bonusy__t { font: 800 clamp(1.9rem, 1.3rem + 2.4vw, 3.2rem)/1 var(--font); letter-spacing: .03em; text-transform: uppercase; color: var(--bursztyn); }
.kdz-ag-bonusy__pod { color: var(--kosc); font-size: 1rem; font-weight: 600; margin-top: .4rem; }
.kdz-ag-bonusy__lista { display: grid; gap: .7rem; }
/* pudelko zawsze NAD tytulem i duze: w waskiej kolumnie obok tekstu bylo mikroskopijne */
/* pudelko i tytul wysrodkowane, tytul w JEDNEJ linii, wartosc osobno pod nim */
.kdz-ag-dodatek { display: grid; grid-template-columns: 1fr; gap: .7rem; justify-items: center; text-align: center; padding-bottom: .9rem; }
.kdz-ag-dodatek img { width: 9.5rem; height: auto; display: block; filter: drop-shadow(0 14px 24px rgba(0,0,0,.55)); }
.kdz-ag-dodatek__t { font-weight: 700; font-size: 1.05rem; letter-spacing: -.025em; white-space: nowrap; }
.kdz-ag-dodatek__t span { display: block; margin: .3rem 0 0; color: var(--bursztyn); font-weight: 800; font-size: .92rem; font-variant-numeric: tabular-nums; }
.kdz-ag-dodatek__d { color: var(--szept); font-size: .92rem; margin-top: .5rem; text-align: left; }
@media (max-width: 26rem) { .kdz-ag-dodatek__t { white-space: normal; } }

.kdz-ag-rachunek { margin-top: 1rem; display: grid; gap: .4rem; }
.kdz-ag-rachunek__w, .kdz-ag-rachunek__zysk { display: flex; justify-content: space-between; gap: 1.4rem; align-items: baseline; font-size: 1rem; }
.kdz-ag-rachunek__w span, .kdz-ag-rachunek__zysk span { color: var(--szept); }
.kdz-ag-rachunek__w s { color: var(--szept); text-decoration-thickness: 2px; font-variant-numeric: tabular-nums; }
.kdz-ag-rachunek__w b { font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.kdz-ag-rachunek__zysk { margin-top: .3rem; padding-top: .7rem; border-top: 1px solid rgba(240,169,59,.35); }
.kdz-ag-rachunek__zysk span { color: var(--kosc); font-weight: 600; }
.kdz-ag-rachunek__zysk em { font-style: normal; color: var(--bursztyn); font-weight: 800; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* ---------- 10. autorzy ---------- */
.kdz-ag-autorzy { padding-block: clamp(2rem, 4vw, 3rem); position: relative; overflow: hidden; }
/* naglowek i lead obok siebie: w jednej waskiej kolumnie prawa polowa sekcji stala pusta */
.kdz-ag-autorzy__gora { display: grid; gap: clamp(1rem, 3vw, 2.6rem); align-items: end; }
@media (min-width: 58rem) { .kdz-ag-autorzy__gora { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.kdz-ag-autorzy h2 { font-size: clamp(1.8rem, 1.1rem + 2.8vw, 3.3rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; max-width: 16ch; text-wrap: balance; }
.kdz-ag-autorzy h2 em { font-style: normal; color: var(--bursztyn); }
.kdz-ag-autorzy__lead { color: var(--szept); font-size: 1.02rem; }
.kdz-ag-autorzy__lead b { color: var(--kosc); font-weight: 600; }

.kdz-ag-duet { margin-top: clamp(1.4rem, 3vw, 2.2rem); display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); align-items: start; }
@media (min-width: 60rem) { .kdz-ag-duet { grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); } }
/* ścinanie rogów przeniesione na kontener `.kdz-ag-zamiana`; ta reguła miała wyższą specyficzność
   i nadpisywała zasłonę na drugim zdjęciu, przez co załoga była widoczna od razu */
.kdz-ag-duet__foto { position: relative; }

/* zdjecie studia zamienia sie w cala zaloge: na mysz po najechaniu, na telefonie po dotknieciu.
   Kosmiczny kadr gryzie sie z paleta strony, wiec nie moze byc widokiem domyslnym. */
.kdz-ag-zamiana { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; overflow: hidden;
  clip-path: polygon(0 20px, 20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%); }
.kdz-ag-zamiana img { width: 100%; height: auto; display: block; }
.kdz-ag-zamiana__a { transition: transform .8s cubic-bezier(.3,.85,.3,1), filter .8s ease; }
.kdz-ag-zamiana__b {
  position: absolute; inset: 0; height: 100%; object-fit: cover;
  /* zaslona wjezdza ukosem z prawej, tym samym skosem co kliny w reszcie strony */
  clip-path: polygon(118% 0, 118% 0, 100% 100%, 100% 100%);
  transform: scale(1.07);
  transition: clip-path .8s cubic-bezier(.3,.85,.3,1), transform 1s cubic-bezier(.3,.85,.3,1);
}
.kdz-ag-zamiana:hover .kdz-ag-zamiana__a, .kdz-ag-zamiana[aria-pressed="true"] .kdz-ag-zamiana__a { transform: scale(1.05); filter: saturate(.8) brightness(.9); }
.kdz-ag-zamiana:hover .kdz-ag-zamiana__b, .kdz-ag-zamiana:focus-visible .kdz-ag-zamiana__b, .kdz-ag-zamiana[aria-pressed="true"] .kdz-ag-zamiana__b {
  clip-path: polygon(-18% 0, 118% 0, 100% 100%, -36% 100%);
  transform: scale(1);
}
.kdz-ag-zamiana__znak {
  position: absolute; z-index: 2; left: 0; bottom: 0; margin: .8rem;
  font: 700 .74rem/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
  color: #22190A; background: var(--bursztyn); padding: .55em .8em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  transition: opacity .3s;
}
.kdz-ag-zamiana:hover .kdz-ag-zamiana__znak, .kdz-ag-zamiana[aria-pressed="true"] .kdz-ag-zamiana__znak { opacity: 0; }
.kdz-ag-duet__podpis { margin-top: .6rem; font-size: .84rem; color: var(--szept); }

/* dwie sylwetki obok siebie, bez pionowych kresek przy tekscie */
.kdz-ag-osoby { display: grid; gap: clamp(1.2rem, 2.4vw, 1.8rem); }
@media (min-width: 46rem) { .kdz-ag-osoby { grid-template-columns: 1fr 1fr; } }
@media (min-width: 60rem) { .kdz-ag-osoby { grid-template-columns: 1fr; } }
.kdz-ag-osoba__rola { display: block; font: 700 .7rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--bursztyn); }
.kdz-ag-osoba__kto { font-weight: 800; font-size: 1.22rem; letter-spacing: -.03em; margin-top: .4rem; }
.kdz-ag-osoba__d { color: var(--szept); font-size: .96rem; margin-top: .5rem; }
.kdz-ag-osoba__d b { color: var(--kosc); font-weight: 600; }


.kdz-ag-autorzy__stopka { margin-top: clamp(1.4rem, 3vw, 2rem); font-size: .95rem; color: var(--szept); }
.kdz-ag-autorzy__stopka b { color: var(--kosc); font-weight: 600; }

/* ---------- 11. faq ---------- */
/* Sekcja jest CELOWO cicha i typograficzna. Stoi miedzy dwiema mocnymi (autorzy ze zdjeciem
   i finisz na burgundzie), a wielki znak zapytania jest juz zuzyty w sekcji demonstracji -
   powtorzony tutaj czytalby sie jak brak pomyslu. Separacja idzie liniami i przestrzenia. */
.kdz-ag-faq { padding-block: clamp(2rem, 4vw, 3rem); position: relative; overflow: hidden; }
.kdz-ag-faq__uklad { display: grid; gap: clamp(1.2rem, 3vw, 2.8rem); }
/* naglowek w waskiej kolumnie z lewej: lista w dwoch kolumnach potrzebuje calej reszty,
   a pelnoszerokosciowy naglowek dokladal ekranu, ktorego ta sekcja nie ma do oddania */
@media (min-width: 62rem) { .kdz-ag-faq__uklad { grid-template-columns: minmax(0, .32fr) minmax(0, 1fr); align-items: start; } }
/* UWAGA: arkusz nie ma zerowania marginesow, wiec kazdy naglowek i akapit dostaje margines
   od przegladarki (1em gora i dol). W liscie pytan dokladalo to 44 px na KAZDY wiersz,
   czyli 175 px na sekcje. Marginesy podajemy tu skrotem, zawsze z zerem na dole. */
.kdz-ag-faq h2 { margin: .7rem 0 0; font-size: clamp(1.7rem, 1.1rem + 2.3vw, 2.8rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.04; max-width: 16ch; text-wrap: balance; }
.kdz-ag-faq h2 em { font-style: normal; color: var(--bursztyn); }
.kdz-ag-faq__lead { margin: .7rem 0 0; color: var(--szept); font-size: .95rem; max-width: 34ch; }

.kdz-ag-faq__lista { display: grid; gap: 0 clamp(1.6rem, 3vw, 3rem); }
@media (min-width: 48rem) { .kdz-ag-faq__lista { grid-template-columns: 1fr 1fr; } }
/* cienka linia nad kazda pozycja zamiast ramki, a zamiast kropki ukosny bursztynowy
   znacznik - kropki w kolorze akcentu sa na liscie rzeczy, ktore czytaja sie szablonowo */
.kdz-ag-faq__poz { padding: clamp(.65rem, 1.2vw, .9rem) 0; border-top: 1px solid rgba(244,242,237,.13); }
.kdz-ag-faq__q { margin: 0; position: relative; padding-left: 1.5rem; font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.kdz-ag-faq__q::before { content: ""; position: absolute; left: 0; top: .5em; width: 13px; height: 2px; background: var(--bursztyn); transform: skewY(-38deg); }
.kdz-ag-faq__a { margin: .42rem 0 0; padding-left: 1.5rem; color: var(--szept); font-size: .93rem; }
.kdz-ag-faq__a b { color: var(--kosc); font-weight: 600; }

.kdz-ag-faq__stopka { margin: clamp(.9rem, 2vw, 1.3rem) 0 0; padding-top: 1rem; border-top: 1px solid rgba(244,242,237,.13); font-size: .92rem; color: var(--szept); }
.kdz-ag-faq__stopka b { color: var(--kosc); font-weight: 600; }

/* ---------- 12. ostatnie wezwanie ---------- */
/* Klin burgundowy wchodzi tu z LEWEJ, odwrotnie niz w sekcji demonstracji, zeby zamkniecie
   strony nie powtarzalo tego samego kadru. Ziarno jest konieczne tak samo jak tam: plaska
   plama koloru wyglada cyfrowo i tanio. Tekst lezy czesciowo na burgundzie, czesciowo na nocy -
   oba tla sa ciemne, wiec kontrast typografii nie zmienia sie po drodze. */
.kdz-ag-finisz { padding-block: clamp(2.2rem, 4.4vw, 3.4rem); position: relative; overflow: hidden; }
.kdz-ag-finisz::before {
  content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23z)' opacity='.42'/%3E%3C/svg%3E"),
    linear-gradient(245deg, #4E1724 0%, #34131C 48%, #1F0C12 100%);
  background-blend-mode: overlay, normal;
  clip-path: polygon(0 0, 62% 0, 74% 44%, 50% 100%, 0 100%);
}
/* ukosne pasy dokladnie tam, gdzie klin styka sie z noca */
.kdz-ag-finisz::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 52%; bottom: -6%; width: min(26vw, 15rem); aspect-ratio: 1.5;
  background-image: repeating-linear-gradient(-58deg, rgba(240,169,59,.18) 0 1px, transparent 1px 11px);
  -webkit-mask-image: linear-gradient(58deg, #000, transparent 74%);
          mask-image: linear-gradient(58deg, #000, transparent 74%);
}
.kdz-ag-finisz__in { position: relative; z-index: 1; display: grid; gap: clamp(1rem, 2.6vw, 2.4rem); align-items: center; }
@media (min-width: 56rem) { .kdz-ag-finisz__in { grid-template-columns: minmax(0, .4fr) minmax(0, 1fr); } }
.kdz-ag-finisz__robot { display: block; justify-self: center; width: min(100%, 18rem); height: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.45)); }
.kdz-ag-finisz h2 { margin: 0; font-size: clamp(1.8rem, 1.1rem + 2.7vw, 3rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.03; max-width: 17ch; text-wrap: balance; }
.kdz-ag-finisz h2 em { font-style: normal; color: var(--bursztyn); }
.kdz-ag-finisz__lead { margin: .8rem 0 0; font-size: 1.02rem; color: var(--szept); max-width: 52ch; }
.kdz-ag-finisz__lead b { color: var(--kosc); font-weight: 600; }
.kdz-ag-finisz__cta { margin-top: clamp(1rem, 2.2vw, 1.5rem); }
.kdz-ag-finisz__drobne { margin: .85rem 0 0; font-size: .86rem; color: var(--szept); }

/* ---------- stopka ---------- */
/* Zamkniecie ma byc ciche: nad nia stoi burgundowy klin ostatniego wezwania, wiec stopka
   wraca na noc i trzyma sie samych wlosowych linii. Uklad i zestaw linkow wziete
   ze stopki Frontend Mastera, zeby serwis mial jeden wzorzec zamkniecia strony. */
.kdz-ag-stopka { border-top: 1px solid rgba(244,242,237,.12); padding-block: clamp(1.6rem, 3vw, 2.4rem); }
.kdz-ag-stopka__in { display: grid; gap: clamp(1.2rem, 2.6vw, 2.4rem); }
@media (min-width: 56rem) { .kdz-ag-stopka__in { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, .7fr)); } }
.kdz-ag-stopka__logo { display: block; width: 9rem; height: auto; }
.kdz-ag-stopka__marka { margin: .8rem 0 0; color: var(--szept); font-size: .88rem; max-width: 34ch; }
.kdz-ag-stopka__marka b { color: var(--kosc); font-weight: 600; }
.kdz-ag-stopka__t { margin: 0 0 .55rem; font: 700 .7rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--bursztyn); }
.kdz-ag-stopka a { display: block; padding: .2rem 0; color: var(--szept); font-size: .9rem; text-decoration: none; }
.kdz-ag-stopka a:hover { color: var(--kosc); }
.kdz-ag-stopka__dol { margin-top: clamp(1.2rem, 2.4vw, 1.8rem); padding-top: 1rem; border-top: 1px solid rgba(244,242,237,.1);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.6rem; font-size: .82rem; color: var(--szept); }

/* zapas nad kotwicami: pasek gorny jest przyklejony, wiec bez tego naglowek sekcji
   po dojsciu do kotwicy chowa sie pod nim. Dziala takze przy wejsciu na strone
   z adresem zakonczonym kotwica, gdzie skrypt nie bierze udzialu. */
:target { scroll-margin-top: 5rem; }

/* ---------- telefon ---------- */
@media (max-width: 61.99rem) {
  /* na telefonie tez jeden ekran: pasek faktow jest tam wyzszy, wiec zapas nad hero rosnie,
     a scena dostaje sufit w jednostkach wysokosci okna */
  /* UWAGA: ten blok lapie tez tablet. Zapas nad hero ustawiamy osobno dla telefonu
     (pasek faktow przewijany, 51 px) i osobno dla tabletu (pasek lamany, 94 px). */
  .kdz-ag-hero { padding-top: .6rem; }
  /* Na telefonie scena NIE dostaje sztywnej wysokosci, tylko rosnie z szerokosci wideo.
     Wysokosc procentowa i max-height nie chwytaja na elemencie wysrodkowanym w gridzie,
     wiec jedynym pewnym sterowaniem jest szerokosc. */
  /* scena wezsza od kolumny: ikony sa pozycjonowane wzgledem niej, wiec przy pelnej
     szerokosci uciekaly w rogi ekranu, daleko od robota */
  .kdz-ag-orbita { aspect-ratio: auto; height: auto; max-width: 19rem; margin-inline: auto; }
  .kdz-ag-robot { width: min(62%, 11rem); height: auto; }
  .kdz-ag-podpis { font-size: .72rem; margin-top: .15rem; }
  .kdz-ag-slowa { padding-bottom: .4rem; }
  .kdz-ag-lead { margin-top: .6rem; font-size: .98rem; }
  .kdz-ag-oferta { margin-top: .9rem; }
  .kdz-ag-oko { font-size: .7rem; }
  .kdz-ag-hero__in { gap: .5rem; }
  .kdz-ag-slowa { padding-bottom: 1rem; order: 1; }
  .kdz-ag-scena { order: 2; margin-inline: calc(var(--gut) * -.5); }
  /* stare reguly sceny usuniete: stały PO nowych i nadpisywaly im proporcje oraz szerokosc,
     przez co robot rozciagal sie i byl przycinany w polowie */
  .kdz-ag-adn { font-size: .74rem; }
  /* na telefonie robot jest maly i po bokach nie ma miejsca na etykiety, wiec jedna idzie
     nad glowe, druga pod nogi, a trzecia znika. Reset przeciwnej krawedzi jest konieczny,
     inaczej etykieta ma naraz left i right i rozciaga sie poza kadr. */
  /* Na telefonie etykiety zdaniowe nie miesza sie po bokach malego robota i jedna z trzech
     i tak wypadala. Zamiast nich pokazujemy same narzedzia: wieksze ikony z podpisami. */
  .kdz-ag-adn { display: none; }
  .kdz-ag-narzedzie { width: 2.5rem; }
  .kdz-ag-narzedzie__pod { display: block; margin-top: .25rem; font: 700 .6rem/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--szept); text-align: center; white-space: nowrap; }
  /* podpisy sa szersze od ikon, wiec ikony musza stac dalej od krawedzi, inaczej
     tekst wychodzi poza kadr i jest przycinany przez overflow sekcji */
  .kdz-ag-narzedzie--n8n { top: 4%; right: -2%; }
  .kdz-ag-narzedzie--claude { top: 40%; left: -4%; }
  .kdz-ag-narzedzie--baza { top: auto; bottom: 6%; right: 0; }
  .kdz-ag-narzedzie__pod { font-size: .56rem; letter-spacing: .06em; }
  .kdz-ag-narzedzie--n8n { top: 8%; right: 2%; }
  .kdz-ag-narzedzie--claude { top: 62%; left: 0; }
  .kdz-ag-narzedzie--baza { bottom: 18%; right: 3%; }
  .kdz-ag-blysk { display: none; }
  .kdz-ag-kropki { opacity: .3; }
  h1 { width: auto; }
  .kdz-ag-oferta { position: sticky; bottom: 0; }
}
/* male telefony: naglowek lamal sie na cztery linie i sam zjadal 147 px.
   UWAGA: sceny nie ograniczamy tu wysokoscia - przy sztywnej wysokosci wideo wystawalo
   ponizej kontenera i kladlo sie na podpisie. Rozmiar ustala szerokosc robota. */
@media (max-width: 24rem) {
  .kdz-ag-orbita { height: auto; max-width: 13.5rem; }
  .kdz-ag-robot { width: min(56%, 7.4rem); }
  .kdz-ag-podpis { font-size: .68rem; }
  .kdz-ag-narzedzie { width: 2.1rem; }
  .kdz-ag-narzedzie__pod { font-size: .52rem; }
  h1 { font-size: 1.85rem; letter-spacing: -.045em; }
  .kdz-ag-lead { font-size: .88rem; margin-top: .5rem; }
  .kdz-ag-oko { font-size: .66rem; }
}
/* waskie desktopy (np. iPad poziomo): kolumna tekstu jest tu tak waska, ze naglowek
   lamie sie na cztery linie i sam zjada 264 px. Skala tekstu i sceny musi zejsc. */
@media (min-width: 62rem) and (max-width: 70rem) {
  h1 { font-size: clamp(2rem, 4.4vw, 2.9rem); }
  .kdz-ag-lead { font-size: 1rem; }
  .kdz-ag-orbita { max-width: min(30vw, 38vh); }
}
@media (min-width: 58rem) {
  .kdz-ag-cena--okno .kdz-ag-bonusy { grid-template-columns: minmax(0, .34fr) minmax(0, 1fr); align-items: start; }
  .kdz-ag-bonusy__prawa { display: contents; }
  .kdz-ag-bonusy__lista { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
  /* rachunek na calej szerokosci, w jednej linii pod oboma kursami */
  .kdz-ag-bonusy .kdz-ag-rachunek { grid-column: 1 / -1; margin-top: .4rem; padding-top: 1.1rem; border-top: 1px solid rgba(244,242,237,.16);
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .8rem 2.4rem; }
  .kdz-ag-bonusy .kdz-ag-rachunek__w, .kdz-ag-bonusy .kdz-ag-rachunek__zysk { margin: 0; padding: 0; border: 0; display: flex; align-items: baseline; gap: .7rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }

/* ---------- strona podziekowania za zakup ---------- */
/* Osobna strona, ten sam swiat wizualny co landing: noc, bursztyn, Archivo.
   Robot swietujacy ma zanikajace krawedzie wypalone w kanale alfa, wiec nie potrzebuje
   zadnej ramki ani tla pod spodem - wtapia sie w sekcje na dowolnym gruncie. */
.kdz-ag-sukces { padding-block: clamp(2.4rem, 5vw, 4rem); position: relative; overflow: hidden; }
.kdz-ag-sukces::before {
  content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23z)' opacity='.42'/%3E%3C/svg%3E"),
    linear-gradient(200deg, #4E1724 0%, #2A1017 52%, #121218 100%);
  background-blend-mode: overlay, normal;
  clip-path: polygon(0 0, 100% 0, 100% 62%, 0 84%);
}
/* KAZDY blok tresci musi stac NAD klinem, nie tylko naglowek. Klin ma z-index 0 i inset 0,
   wiec wszystko bez wlasnego kontekstu ukladania laduje pod nim - kroki chowaly sie
   za ukosna krawedzia burgundu. Zawezone do konkretnego dziecka, nigdy do gwiazdki. */
.kdz-ag-sukces > .kdz-ag-wrap { position: relative; z-index: 1; }
.kdz-ag-sukces__in { display: grid; gap: clamp(1.2rem, 3vw, 2.4rem); align-items: center; }
@media (min-width: 54rem) { .kdz-ag-sukces__in { grid-template-columns: minmax(0, .46fr) minmax(0, 1fr); } }
.kdz-ag-sukces__robot { display: block; justify-self: center; width: min(100%, 21rem); height: auto; }
.kdz-ag-sukces h1 { margin: 0; font-size: clamp(1.9rem, 1.1rem + 3vw, 3.2rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; max-width: 16ch; text-wrap: balance; }
.kdz-ag-sukces h1 em { font-style: normal; color: var(--bursztyn); }
.kdz-ag-sukces__lead { margin: .9rem 0 0; font-size: 1.05rem; color: var(--kosc); max-width: 54ch; }
.kdz-ag-sukces__lead b { font-weight: 700; }

/* kroki: numeracja jest tu PRAWDZIWA, bo to kolejnosc w czasie, a nie ozdobnik */
.kdz-ag-kroki { margin-top: clamp(1.6rem, 4vw, 2.8rem); display: grid; gap: 0; }
@media (min-width: 54rem) { .kdz-ag-kroki { grid-template-columns: repeat(3, 1fr); gap: 0 clamp(1.4rem, 3vw, 2.6rem); } }
.kdz-ag-krok { padding: clamp(.9rem, 2vw, 1.2rem) 0; border-top: 2px solid rgba(240,169,59,.5); }
.kdz-ag-krok__nr { display: block; font: 800 .74rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--bursztyn); }
.kdz-ag-krok__t { margin: .5rem 0 0; font-size: 1.06rem; font-weight: 700; letter-spacing: -.02em; }
.kdz-ag-krok__d { margin: .35rem 0 0; font-size: .93rem; color: var(--szept); }
.kdz-ag-krok__d b { color: var(--kosc); font-weight: 600; }

/* blok bonusow na podziekowaniu: tylko w wariancie z dnia transmisji */
.kdz-ag-sukces__bonus { margin-top: clamp(1.4rem, 3vw, 2.2rem); padding: clamp(1rem, 2.4vw, 1.6rem);
  background: rgba(244,242,237,.05); clip-path: polygon(0 16px, 16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%); }
.kdz-ag-sukces__bonus p { margin: 0; font-size: .96rem; color: var(--szept); }
.kdz-ag-sukces__bonus b { color: var(--kosc); font-weight: 700; }

/* Strona podziekowania jest krotsza od okna, wiec stopka wisiala w polowie ekranu.
   Modyfikator dostaje TYLKO ta strona - na landingu tresci jest dziesiec ekranow
   i przyklejanie stopki byloby zbedne. */
.kdz-ag-strona--sukces { min-height: 100svh; display: flex; flex-direction: column; }
.kdz-ag-strona--sukces .kdz-ag-sukces { flex: 1 0 auto; }
.kdz-ag-strona--sukces .kdz-ag-stopka { margin-top: auto; }