/* ============================================================
   KAKAWA — /odmiany: belka, karty odmian, koło nut, porównywarka, quiz
   Orion · 25.07.2026 · rytm inny niż home (siatka 3-kolumnowa, brak filmu),
   ale ten sam system: tokens.css, jeden akcent, żyła kakao po lewej.
   ============================================================ */

/* pasek przewijania schowany — jak na home (dyrektywa Roberta) */
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}

/* ---------- ŻYŁA KAKAO (sygnatura przeniesiona z home) ---------- */
.zyla{position:fixed;left:clamp(16px,2.6vw,40px);top:13vh;bottom:13vh;width:2px;z-index:40;
  background:linear-gradient(to bottom,transparent,var(--line) 6%,var(--line) 94%,transparent)}
.zyla__wypelnienie{position:absolute;left:-1px;top:0;width:4px;height:0%;border-radius:2px;
  background:linear-gradient(to bottom,rgba(227,154,85,.25),var(--accent) 32%,var(--accent-hi));
  box-shadow:0 0 16px rgba(201,123,61,.5)}
.zyla__kropla{position:absolute;left:-5px;width:12px;height:12px;border-radius:50% 50% 55% 45%;
  background:radial-gradient(60% 60% at 40% 35%,#F6C88A,var(--accent-hi) 55%,var(--accent));
  box-shadow:0 0 22px rgba(227,154,85,.9),0 0 46px rgba(201,123,61,.35);
  transform:translateY(-50%);opacity:.95}
.zyla__kropla::after{content:"";position:absolute;left:4px;bottom:10px;width:4px;height:26px;
  border-radius:2px;background:linear-gradient(to top,rgba(227,154,85,.55),transparent);opacity:.85}
@media (max-width:760px){.zyla{display:none}}
/* Pasek postępu z kroplą jest przyklejony do okna, więc przy stopce przecinał
   jej kompozycję pionową kreską — element opowieści wchodził w miejsce, gdzie
   opowieść się już skończyła. Gaśnie, kiedy stopka wchodzi w kadr, i wraca
   przy powrocie w górę. Krycie, nie `display`, żeby zniknięcie było płynne. */
.zyla{transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out)}
.zyla.schowana{opacity:0;transform:translateX(-14px);pointer-events:none}


/* ---------- BELKA NAWIGACJI (tylko podstrony) ---------- */
.belka{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;gap:var(--s-4);
  padding:14px clamp(28px,6vw,96px);
  background:var(--surface-1,#14100C);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px)}
.belka__marka{font-family:var(--font-display);font-size:var(--fs-2);letter-spacing:.14em;
  color:var(--text-hi);text-decoration:none}
.belka__linki{display:flex;gap:clamp(16px,2.4vw,36px);list-style:none}
.belka__linki a{font-size:var(--fs-0);letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-mid);text-decoration:none;padding-bottom:4px;border-bottom:1px solid transparent;
  transition:color var(--t-standard),border-color var(--t-standard)}
.belka__linki a:hover{color:var(--text-hi)}
.belka__linki a[aria-current="page"]{color:var(--accent);border-color:var(--accent)}
@media (max-width:700px){.belka__linki{gap:14px}.belka__linki a{letter-spacing:.1em;font-size:12px}}

/* ---------- WSTĘP ---------- */
.wstep{padding:clamp(120px,20vh,220px) clamp(28px,7vw,140px) clamp(50px,8vh,90px);
  max-width:1440px;margin:0 auto}
.oko{font-size:var(--fs-0);letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
.wstep h1{font-size:clamp(34px,6vw,76px);margin-top:var(--s-2);line-height:1.05}
.wstep__lead{margin-top:var(--s-3);color:var(--text-mid);max-width:60ch;font-size:var(--fs-2)}

/* ---------- FILTR INTENSYWNOŚCI ---------- */
.filtr{position:sticky;top:var(--sticky-filtr,60px);z-index:35;display:flex;align-items:center;gap:clamp(14px,2vw,28px);
  flex-wrap:wrap;max-width:1440px;margin:0 auto;padding:14px clamp(28px,7vw,140px);
  background:rgba(20,16,12,.72);backdrop-filter:blur(10px);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transition:opacity 380ms var(--ease-out),transform 380ms var(--ease-out),visibility 380ms}
/* poza sekcją kart pasek gaśnie i przestaje przechwytywać kliknięcia */
.filtr.schowany{opacity:0;transform:translateY(-10px);visibility:hidden;pointer-events:none}
.filtr__opis{font-size:var(--fs-0);letter-spacing:.2em;text-transform:uppercase;color:var(--text-low)}
.filtr__skala{display:flex;gap:8px}
.filtr__stopien{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:transparent;color:var(--text-mid);cursor:pointer;font-size:var(--fs-0);
  transition:all var(--t-standard) var(--ease-out)}
.filtr__stopien:hover{border-color:var(--accent);color:var(--text-hi)}
.filtr__stopien[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.filtr__reset{margin-left:auto;background:none;border:0;color:var(--text-low);cursor:pointer;
  font-size:var(--fs-0);letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid transparent;transition:color var(--t-standard),border-color var(--t-standard)}
.filtr__reset:hover{color:var(--accent);border-color:var(--accent)}

/* ---------- SIATKA KART ---------- */
.zbiory{max-width:1440px;margin:0 auto;padding:clamp(40px,7vh,80px) clamp(28px,7vw,140px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,40px);align-items:start}
@media (max-width:1080px){.zbiory{grid-template-columns:1fr;max-width:680px}}

.karta{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:var(--r-m);background:rgba(29,23,18,.45);overflow:hidden;
  transition:border-color var(--t-standard),transform var(--t-standard),
             background var(--t-standard),opacity 500ms var(--ease-out),filter 500ms var(--ease-out)}
.karta:hover{border-color:var(--accent);transform:translateY(-6px);background:rgba(42,33,26,.62)}
.karta:focus-within{border-color:var(--accent-hi);outline:2px solid var(--accent);outline-offset:3px}
.karta.przygaszona{opacity:.22;filter:grayscale(.6);pointer-events:none}
.karta.wybrana{border-color:var(--accent-hi);box-shadow:0 0 0 1px var(--accent-hi),0 24px 70px rgba(201,123,61,.22)}
.karta.wybrana::before{content:"Twój wybór";position:absolute;top:14px;left:14px;z-index:3;
  padding:5px 12px;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-ink);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase}

.karta__moneta{position:relative;aspect-ratio:1/1;background:#0d0a07;overflow:hidden}
.karta__moneta img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);
  transition:transform 900ms var(--ease-out)}
.karta:hover .karta__moneta img{transform:scale(1.12)}
.karta__moc{position:absolute;right:12px;bottom:12px;z-index:2;display:flex;gap:4px}
.karta__moc i{width:6px;height:6px;border-radius:50%;background:rgba(243,235,221,.28)}
.karta__moc i.pelna{background:var(--accent-hi);box-shadow:0 0 8px rgba(227,154,85,.8)}

.karta__tresc{padding:var(--s-3) var(--s-3) var(--s-4);display:flex;flex-direction:column;gap:var(--s-2);flex:1}
.karta__nazwa{font-family:var(--font-display);font-size:var(--fs-3)}
.karta__region{font-size:var(--fs-0);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.karta__zdanie{color:var(--text-mid)}
.karta__dane{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:var(--fs-0);color:var(--text-low);
  padding-top:var(--s-2);border-top:1px solid var(--line)}
.karta__dane b{color:var(--text-mid);font-weight:400}
/* ── Stopka karty: dwa wiersze, nie jeden rząd (29.07) ──
   Rząd z etykietą po lewej i odnośnikiem po prawej wyglądał inaczej na każdej
   karcie, bo nazwy wydań mają różną długość — raz zawijała się etykieta, raz
   sam odnośnik. Gorzej: karta ma `overflow:hidden`, więc odnośnik, który nie
   mieścił się w rzędzie, dawał się PRZYCIĄĆ na krawędzi karty i tracił część
   pola klikania. Ułożenie w dwa wiersze usuwa oba problemy naraz: układ jest
   identyczny niezależnie od długości nazwy, a odnośnik dostaje pełną szerokość
   karty jako obszar dotyku. */
.karta__stopka{margin-top:auto;padding-top:var(--s-3);display:flex;flex-direction:column;
  align-items:flex-start;gap:10px;border-top:1px solid var(--line)}
.karta__produkt{font-size:var(--fs-0);letter-spacing:.14em;text-transform:uppercase;color:var(--text-low);
  min-width:0}
/* Odnośnik jest stały: jedna linia, nie kurczy się i nie zawija — to on ma
   wyglądać tak samo na wszystkich trzech kartach. Strzałka w <i>, żeby nie
   odkleiła się od tekstu przy zawijaniu w innych szerokościach. */
.karta__cta{display:inline-flex;align-items:center;align-self:stretch;white-space:nowrap;
  min-height:34px;font-size:var(--fs-0);letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color var(--t-standard),color var(--t-standard)}
.karta__cta:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.karta__cta i{font-style:normal;margin-left:.35em;display:inline-block;
  transition:transform var(--t-standard)}
.karta__cta:hover{border-color:var(--accent)}
.karta__cta:hover i{transform:translateX(3px)}

/* ---------- KOŁO NUT ---------- */
.kolo{width:100%;max-width:230px;margin:0 auto;display:block;overflow:visible}
.kolo__siatka{stroke:var(--line);fill:none;stroke-width:1}
.kolo__os{stroke:var(--line);stroke-width:1}
.kolo__ksztalt{fill:rgba(201,123,61,.20);stroke:var(--accent);stroke-width:1.5;stroke-linejoin:round;
  transform-origin:center;transform:scale(.2);opacity:0;
  transition:transform 900ms cubic-bezier(.2,.8,.25,1),opacity 700ms var(--ease-out)}
.karta.narysowana .kolo__ksztalt{transform:scale(1);opacity:1}
.kolo__punkt{fill:var(--accent-hi);opacity:0;transition:opacity 600ms var(--ease-out) 400ms}
.karta.narysowana .kolo__punkt{opacity:1}
.kolo__etykieta{fill:var(--text-low);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  font-family:var(--font-body)}
.kolo__tabela{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- PORÓWNYWARKA — wizualna macierz zamiast suchej tabeli ---------- */
.porownanie{max-width:1440px;margin:0 auto;padding:clamp(50px,9vh,110px) clamp(28px,7vw,140px)}
.porownanie h2{font-size:clamp(28px,4vw,48px);margin-top:var(--s-2)}
.porownanie__pod{margin-top:var(--s-2);color:var(--text-low);font-size:var(--fs-0);
  letter-spacing:.16em;text-transform:uppercase}

.tabela{width:100%;margin-top:var(--s-5);border-collapse:separate;border-spacing:0;font-size:var(--fs-1)}
.tabela th,.tabela td{padding:18px 16px;text-align:left;vertical-align:middle;
  border-bottom:1px solid var(--line);transition:background var(--t-standard),color var(--t-standard)}
.tabela tbody th{font-size:var(--fs-0);letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-low);font-weight:400;width:20%;white-space:nowrap}
.tabela td{color:var(--text-mid);width:26.6%}
.tabela tbody tr:hover th{color:var(--accent)}

/* nagłówek kolumny = mini-karta z monetą, przyklejona POD belką i filtrem
   (wysokości mierzone w JS → --sticky-naglowek; bez zgadywania pikseli) */
.tabela thead th{position:sticky;top:var(--sticky-naglowek,120px);z-index:45;
  padding:22px 16px 20px;background:#14100C;
  border-bottom:1px solid var(--line);
  transition:top 380ms var(--ease-out)}
/* żadnego rozmycia poniżej krawędzi: pasek kończy się na linii wiersza,
   a wiersze przesuwają się POD nim (dyrektywa Roberta 25.07) */
.por__rogNaglowka{background:#14100C}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.por__glowa{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit}
.por__moneta{width:56px;height:56px;border-radius:50%;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 8px 26px rgba(0,0,0,.45);transition:transform var(--t-standard),border-color var(--t-standard)}
.por__moneta img{width:100%;height:100%;object-fit:cover}
.por__glowa:hover .por__moneta{transform:scale(1.07);border-color:var(--accent)}
.por__nazwa{font-family:var(--font-display);font-size:var(--fs-2);color:var(--text-hi)}
.por__odmiana{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}

/* mini koło nut w wierszu „profil smaku" */
.por__wiersz--profil td{padding-top:22px;padding-bottom:22px}
.por__kolo{width:68px;height:68px;float:left;margin-right:14px}
.por__koloTlo{fill:none;stroke:var(--line);stroke-width:1}
.por__koloKsztalt{fill:rgba(201,123,61,.24);stroke:var(--accent);stroke-width:1.4;stroke-linejoin:round}
.por__zdanie{display:block;overflow:hidden;color:var(--text-mid);font-size:var(--fs-1);line-height:1.45}

/* kropki skali (intensywność, dni fermentacji) */
.por__kropki{display:flex;align-items:center;gap:5px}
.por__kropki i{width:9px;height:9px;border-radius:50%;background:rgba(243,235,221,.16)}
.por__kropki i.pelna{background:var(--accent);box-shadow:0 0 8px rgba(201,123,61,.55)}
.por__kropki span{margin-left:8px;font-size:var(--fs-0);color:var(--text-low);letter-spacing:.1em}
.por__znacznik{display:inline-block;margin-left:10px;padding:3px 9px;border-radius:var(--r-pill);
  background:rgba(201,123,61,.18);border:1px solid var(--accent);color:var(--accent);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase}

/* pasmo wartości na skali (wysokość, prażenie) */
.por__skala{display:flex;flex-direction:column;gap:7px}
.por__skalaTlo{position:relative;height:6px;border-radius:3px;background:rgba(243,235,221,.10);overflow:hidden}
.por__skalaPasmo{position:absolute;top:0;bottom:0;border-radius:3px;
  background:linear-gradient(to right,var(--accent),var(--accent-hi));box-shadow:0 0 12px rgba(201,123,61,.5)}
.por__skalaOpis{font-size:var(--fs-0);color:var(--text-low);letter-spacing:.08em}
.por__skalaOpis b{color:var(--text-hi);font-weight:400;font-size:var(--fs-1)}

.por__region{color:var(--text-hi)}
.por__pora{display:inline-flex;align-items:center;gap:9px;color:var(--text-hi)}
.por__ikona{width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}

/* wiersz „wydanie" — miniatura produktu */
.por__wydanie{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--text-hi);
  padding:6px 12px 6px 6px;border-radius:var(--r-pill);border:1px solid var(--line);
  transition:border-color var(--t-standard),background var(--t-standard),transform var(--t-standard)}
.por__wydanie img{width:38px;height:38px;border-radius:50%;object-fit:cover}
.por__wydanie span{font-size:var(--fs-0);letter-spacing:.16em;text-transform:uppercase}
.por__wydanie i{color:var(--accent);font-style:normal}
.por__wydanie:hover{border-color:var(--accent);background:rgba(201,123,61,.12);transform:translateY(-2px)}

/* PODŚWIETLENIE KOLUMNY — CSS :has() (najnowszy standard), bez JS

   UWAGA NA PRZEZROCZYSTOŚĆ W NAGŁÓWKU (zgłoszenie Roberta 29.07):
   nagłówek kolumny jest PRZYKLEJONY, a wiersze przesuwają się pod nim. Trzyma
   go nieprzezroczyste tło #14100C. Podświetlenie kolumny nadpisywało `background`
   półprzezroczystym pomarańczem — i razem z nim znikała ta nieprzezroczystość,
   więc przez aktywny nagłówek prześwitywał tekst przejeżdżających wierszy.
   Objaw pokazywał się TYLKO na kolumnie pod kursorem, stąd wrażenie chaosu.
   Rozwiązanie: tinta jako WARSTWA (gradient o stałym kolorze) NAD krytym tłem,
   a nie zamiast niego. Wiersze poza nagłówkiem mogą zostać półprzezroczyste —
   tam nic pod nimi nie przejeżdża. */
@supports selector(:has(*)) {
  .tabela:has(.kol-1:hover) .kol-1,
  .tabela:has(.kol-2:hover) .kol-2,
  .tabela:has(.kol-3:hover) .kol-3{background:rgba(201,123,61,.09);color:var(--text-hi)}
  .tabela:has(.kol-1:hover) thead .kol-1,
  .tabela:has(.kol-2:hover) thead .kol-2,
  .tabela:has(.kol-3:hover) thead .kol-3{
    background:linear-gradient(rgba(201,123,61,.16),rgba(201,123,61,.16)),#14100C}
}
.tabela .aktywna{background:rgba(201,123,61,.09);color:var(--text-hi)}   /* fallback JS */
/* ten sam warunek dla ścieżki zapasowej sterowanej JS-em */
.tabela thead .aktywna{background:linear-gradient(rgba(201,123,61,.16),rgba(201,123,61,.16)),#14100C}

/* wiersze wjeżdżają przy przewijaniu (scroll-driven) */
@supports (animation-timeline: view()){
  .tabela tbody tr{animation:wierszWjazd linear both;animation-timeline:view();animation-range:entry 0% entry 62%}
  @keyframes wierszWjazd{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
}

/* MOBILNIE: karty w poziomym scrollu ze snapem zamiast łamania tabeli */
@media (max-width:900px){
  .tabela{display:block;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:var(--s-2)}
  .tabela thead,.tabela tbody{display:block}
  .tabela thead{display:none}
  .tabela tbody{display:flex;gap:var(--s-3)}
  .tabela tbody tr{display:none}
  .tabela::after{content:"";display:block}
  .porownanie__karty{display:flex;gap:var(--s-3);overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:var(--s-3);margin-top:var(--s-4)}
  .porownanie__karta{scroll-snap-align:start;flex:0 0 min(78vw,320px);border:1px solid var(--line);
    border-radius:var(--r-m);background:rgba(29,23,18,.5);padding:var(--s-3)}
  .porownanie__karta h4{font-family:var(--font-display);font-size:var(--fs-3);margin-bottom:var(--s-2)}
  .porownanie__karta dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:var(--fs-0)}
  .porownanie__karta dt{color:var(--text-low);letter-spacing:.14em;text-transform:uppercase}
  .porownanie__karta dd{color:var(--text-hi)}
}
@media (min-width:901px){.porownanie__karty{display:none}}

/* ---------- QUIZ ---------- */
.quiz{background:linear-gradient(to bottom,var(--surface-0),var(--surface-1));
  padding:clamp(60px,11vh,140px) clamp(28px,7vw,140px)}
.quiz__pudlo{max-width:900px;margin:0 auto;border:1px solid var(--line);border-radius:var(--r-m);
  background:rgba(29,23,18,.5);padding:clamp(28px,5vw,64px);min-height:420px;
  display:flex;flex-direction:column;justify-content:center}
.quiz__krok{display:none}
.quiz__krok.aktywny{display:block;animation:krokWjazd 500ms var(--ease-out)}
@keyframes krokWjazd{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.quiz__licznik{font-size:var(--fs-0);letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.quiz__pytanie{font-family:var(--font-display);font-size:clamp(24px,3.4vw,42px);margin-top:var(--s-2)}
.quiz__odpowiedzi{display:flex;flex-direction:column;gap:12px;margin-top:var(--s-4)}
.quiz__odp{text-align:left;padding:18px 22px;border-radius:var(--r-s);border:1px solid var(--line);
  background:transparent;color:var(--text-hi);font-size:var(--fs-1);cursor:pointer;
  transition:border-color var(--t-standard),background var(--t-standard),transform var(--t-standard)}
.quiz__odp:hover{border-color:var(--accent);background:rgba(201,123,61,.12);transform:translateX(6px)}
.quiz__nawigacja{display:flex;justify-content:space-between;align-items:center;margin-top:var(--s-4);
  font-size:var(--fs-0);letter-spacing:.16em;text-transform:uppercase;color:var(--text-low)}
.quiz__wstecz{background:none;border:0;color:var(--text-low);cursor:pointer;letter-spacing:.16em;
  text-transform:uppercase;font-size:var(--fs-0);border-bottom:1px solid transparent}
.quiz__wstecz:hover{color:var(--accent);border-color:var(--accent)}
.quiz__postep{height:2px;background:var(--line);border-radius:2px;margin-top:var(--s-4);overflow:hidden}
.quiz__postep i{display:block;height:100%;width:0%;background:linear-gradient(to right,var(--accent),var(--accent-hi));
  transition:width 500ms var(--ease-out)}
.quiz__wynik{display:none;text-align:center}
.quiz__wynik.jest{display:block;animation:krokWjazd 600ms var(--ease-out)}
.quiz__wynik h3{font-family:var(--font-display);font-size:clamp(28px,4vw,48px);margin-top:var(--s-2)}
.quiz__wynik p{color:var(--text-mid);margin-top:var(--s-2);max-width:52ch;margin-inline:auto}
.quiz__wynikCta{display:inline-flex;margin-top:var(--s-4);padding:14px 30px;border-radius:var(--r-pill);
  background:var(--accent);color:var(--accent-ink);text-decoration:none;font-size:var(--fs-0);
  letter-spacing:.16em;text-transform:uppercase;transition:background var(--t-standard),transform var(--t-standard);
  border:0;cursor:pointer}
.quiz__wynikCta:hover{background:var(--accent-hi);transform:translateY(-2px)}

/* ---------- NOTA + CTA + STOPKA ---------- */
.nota{max-width:1000px;margin:0 auto;padding:clamp(50px,9vh,110px) clamp(28px,7vw,140px)}
.nota h2{font-size:clamp(24px,3.2vw,38px);margin-top:var(--s-2)}
.nota p{color:var(--text-mid);margin-top:var(--s-3);max-width:70ch}
.nota b{color:var(--text-hi);font-weight:400}
.dalej{text-align:center;padding:clamp(40px,7vh,90px) clamp(28px,7vw,140px) clamp(70px,11vh,140px)}
.dalej__link{display:inline-flex;align-items:center;gap:12px;padding:16px 34px;border-radius:var(--r-pill);
  background:var(--accent);color:var(--accent-ink);text-decoration:none;font-size:var(--fs-1);
  letter-spacing:.1em;text-transform:uppercase;transition:background var(--t-standard),transform var(--t-standard)}
.dalej__link:hover{background:var(--accent-hi);transform:translateY(-3px)}
.dalej__pod{margin-top:var(--s-3);color:var(--text-low);font-size:var(--fs-0);letter-spacing:.18em;text-transform:uppercase}
.dalej__pod a{color:var(--text-mid);text-decoration:none;border-bottom:1px solid transparent;transition:color var(--t-standard),border-color var(--t-standard)}
.dalej__pod a:hover{color:var(--accent);border-color:var(--accent)}

.stopka{padding:var(--s-6) clamp(28px,7vw,140px) var(--s-5);border-top:1px solid var(--line);
  background:var(--surface-1);
  color:var(--text-low);font-size:var(--fs-0);letter-spacing:.12em;text-transform:uppercase}
.stopka__odcisk{width:100%;margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;
  font-size:11px;letter-spacing:.18em;color:rgba(138,122,102,.55);text-transform:none}
.stopka__odcisk b{font-weight:400;color:rgba(199,185,166,.75)}
/* ── Środek stopki musi BYĆ środkiem (zgłoszenie Roberta 29.07) ──────────────
   `justify-content:space-between` rozkłada ODSTĘPY, nie elementy. Przy trzech
   pozycjach o różnej szerokości — „KAKAWA — demonstrator technologii" ma ~280 px,
   „© 2026" ~50 px — środkowa nie ląduje na osi strony, tylko dryfuje w stronę
   węższej sąsiadki. Przycisk nad stopką stoi wtedy nad pustym miejscem, a nie
   nad żadną z pozycji, i to jest ten „rozjazd", którego nie dało się wytłumaczyć
   marginesami.

   Siatka trzech kolumn 1fr–auto–1fr rozwiązuje to z definicji: skrajne kolumny
   są sobie równe, więc środkowa siedzi dokładnie na osi, niezależnie od tego,
   jak długie są napisy po bokach. */
.stopka{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:baseline;
  gap:var(--s-3) var(--s-4);
}
.stopka > span:nth-of-type(1){justify-self:start}
.stopka > span:nth-of-type(2){justify-self:center;text-align:center}
.stopka > span:nth-of-type(3){justify-self:end}
.stopka__odcisk{grid-column:1 / -1}
@media (max-width:860px){
  .stopka{grid-template-columns:1fr;justify-items:center;text-align:center}
  .stopka > span:nth-of-type(1),
  .stopka > span:nth-of-type(2),
  .stopka > span:nth-of-type(3){justify-self:center}
}

/* ══ JEDNA MIARA DLA BLOKU DALEJ I STOPKI (zgłoszenie Roberta 29.07) ══════════
   Rozjazd brał się stąd, że oba bloki miały poziomy oddech reszty strony, ale
   NIE MIAŁY jej miary. Każda sekcja stoi w `max-width:1440px` wyśrodkowanym
   w oknie; blok „dalej" i stopka rozciągały się na całą szerokość okna.
   Skutek: na szerokim ekranie przycisk celował w środek OKNA, a pozycje stopki
   uciekały do jego skrajnych krawędzi — dwa różne układy odniesienia jeden pod
   drugim.

   Padding liczony przez `max()` trzyma tło i górną krawędź stopki na pełnej
   szerokości (bo tak ma być — to pas, nie karta), a samą TREŚĆ wprowadza
   w tę samą miarę co reszta strony. Środek przycisku to od teraz środek
   kolumny tekstu, nie środek monitora.

   Poniżej 860 px stopka przestaje być rzędem: `space-between` przy zawijaniu
   ustawia elementy w miejscach przypadkowych. Kolumna, wyśrodkowana tak jak
   przycisk nad nią — jeden układ zamiast dwóch. */
:root{ --miara:1440px; --oddech:clamp(28px,7vw,140px); }
.dalej,
.stopka{ padding-inline:max(var(--oddech), (100% - var(--miara)) / 2); }

/* Podpis autorski — jeden tytuł w całym portfolio (decyzja Roberta 29.07).
   Odcisk jest rzędem elastycznym, więc tytuł i zdanie dostają pełną szerokość,
   żeby nie rozjeżdżały się do trzech kolumn na szerokim ekranie. */
.stopka__odcisk .rola{flex:1 1 100%;color:rgba(199,185,166,.75)}
.stopka__odcisk .wyjasnienie{
  flex:1 1 100%;max-width:44em;margin-top:6px;
  font-family:var(--font-body,inherit);font-size:12.5px;letter-spacing:0;line-height:1.6;
  text-transform:none;color:rgba(138,122,102,.75);
}

/* wjazd sekcji z dołu — spójnie z home */
.wjazd{opacity:0;transform:translateY(46px)}

/* scroll-driven: karty oddychają przy wjeździe (najnowszy standard) */
@supports (animation-timeline: view()){
  .karta{animation:kartaWjazd linear both;animation-timeline:view();animation-range:entry 0% entry 85%}
  @keyframes kartaWjazd{from{opacity:.15;transform:translateY(52px) scale(.97)}to{opacity:1;transform:none}}
  .karta__moneta img{animation:monetaZoom linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes monetaZoom{from{transform:scale(1.22) translateY(-4%);filter:brightness(.7)}
    to{transform:scale(1.04) translateY(4%);filter:brightness(1.06)}}
}
@media (prefers-reduced-motion:reduce){
  .wjazd{opacity:1;transform:none}
  @supports (animation-timeline: view()){.karta,.karta__moneta img{animation:none}}
}