/* DAPLO Crew — fundament v2 (29.09.2026): gramatyka daplo.agency (daplo.css v2), barwy, kroje, ikony i logo Crew.
   Źródło układów: projects/daplo-agency-redesign/site/assets/css/daplo.css, glowna.css, case.css.
   Mapowanie: czerń → granat #1E3150, najciemniejsze pola → #0E1A2B, grafit → #16243A, tła → papier #F7F6F3,
   bursztyn #F59E0B tylko na ciemnym, CTA na jasnym #B45309, IBM Plex → Barlow Semi Condensed + DM Sans, Phosphor → Tabler.
   Zasada: surowe kolory WYŁĄCZNIE w :root. Sekcje (sNN.css) używają tylko var(--cr-*). Poprzednia wersja: strona/archiwum-v1/. */

/* ---------- 1. Tokeny ---------- */
:root {
  color-scheme: only light;

  /* marka i tła */
  --cr-marka: #1E3150;          /* granat: nagłówek strony, ciemne kafle, przyciski systemowe, linie struktury */
  --cr-marka-jasna: #5B7196;
  --cr-marka-tint: #E8EDF5;     /* tło chipu rejestru D, aktywny wiersz w makiecie */
  --cr-glebia: #0E1A2B;         /* najciemniejsze pola (S12, tekst na bursztynie) */
  --cr-glebia-2: #16243A;       /* grafit daplo.agency: karty i hover na granacie */
  --cr-na-glebi-2: #A9B8D0;     /* tekst pomocniczy na ciemnym (mgła) */
  --cr-obrys-ciemne: #34496D;   /* obrysy i przerywane podziały na ciemnym */
  --cr-zorza-1: #5684C4;        /* poświata tła hero: chłodny błękit; tylko jako gradient na granacie, nigdy tekst ani linia */
  --cr-zorza-2: #2CA0B2;        /* poświata tła hero: morski; jw. */
  --cr-sygnal: #1E3150;         /* przycisk główny na jasnym: granat (04.10, motyw niebiesko-biały jak czarny przycisk daplo.agency); bursztyn tylko na ciemnym i w nagłówku */
  --cr-sygnal-hov: #16243A;
  --cr-sygnal-ciemne: #F59E0B;  /* akcent i CTA na ciemnym, tekst #0E1A2B; nigdy tekst/linia na jasnym */
  --cr-sygnal-ciemne-hov: #FBBF24;
  --cr-pole-tint: #FEF3C7;      /* znacznik pola: tło */
  --cr-pole-krawedz: #B45309;   /* znacznik pola: dolna krawędź */
  --cr-tlo: #FFFFFF;
  --cr-papier: #F3F6FA;         /* kafle jasne (panel daplo.agency), chłodny, z nutą granatu (04.10, wcześniej beż #F7F6F3) */
  --cr-papier-2: #E9EEF5;       /* panele, pola w makietach (wcześniej #EEEDE7) */
  --cr-tekst: #1F2B3D;
  --cr-tekst-2: #5C6474;
  --cr-linia: #D3DBE6;
  --cr-linia-2: #E4E9F0;        /* linie wewnątrz makiet */
  --cr-szkielet: #C2CCD9;       /* ramka MK, kropki paska, paski szkieletu */
  --cr-obrys-ui: #6D7889;       /* (04.10: chłodne szarości zamiast ciepłych) */
  --cr-biel: #FFFFFF;

  /* stany (PLAN-LP §4.7) — tylko w makietach, schematach i formularzu; zieleń wyłącznie „Zatwierdzone” */
  --cr-st-brak: #B91C1C;
  --cr-st-brak-tlo: #FEE2E2;
  --cr-st-czeka: #1E40AF;
  --cr-st-czeka-tlo: #DBEAFE;
  --cr-st-zatw: #166534;
  --cr-st-zatw-tlo: #DCFCE7;
  --cr-st-uniew: #374151;
  --cr-st-uniew-tlo: #F3F4F6;

  /* cień jak daplo.agency (jeden), promienie 8 / 16 */
  --cr-cien: 0 12px 32px rgba(14, 26, 43, .14);
  --cr-cien-duzy: 0 24px 60px rgba(14, 26, 43, .12);
  --cr-cien-kartka: var(--cr-cien);
  --cr-r-s: 8px;
  --cr-r-m: 16px;
  --cr-r-kontr: 8px;            /* zgodność z v1 (przyciski, pola) */
  --cr-r-karta: 8px;            /* zgodność z v1 */

  /* role (przełączane na kaflach ciemnych) */
  --cr-fokus: var(--cr-marka);
  --cr-tlo-sek: var(--cr-tlo);
  --cr-kolor-tekst: var(--cr-tekst);
  --cr-kolor-tekst-2: var(--cr-tekst-2);
  --cr-kolor-nagl: var(--cr-marka);
  --cr-kolor-etyk: var(--cr-tekst-2);
  --cr-kolor-linii: var(--cr-marka);   /* łączniki ciągłe */

  /* kroje z zapasem dopasowanym metrykami (CLS) */
  --cr-f-nagl: "Barlow Semi Condensed", "Barlow SC Zapas", "Arial Narrow", Arial, sans-serif;
  --cr-f-tresc: "DM Sans", "DM Sans Zapas", Arial, sans-serif;

  /* typografia: proporcje daplo.agency (h1 : h2 : h3 : lead), Barlow SC o ~10% większy, bo węższy od Plex */
  --cr-t-h1: clamp(2.5rem, 7.8125vw - 1.25rem, 3.625rem);
  --cr-t-h1-sub: clamp(2.25rem, 7.03vw - 1.125rem, 3.375rem);
  --cr-t-h2: clamp(1.9375rem, 5.078vw - .5rem, 2.75rem);
  --cr-t-h3: clamp(1.375rem, .78125vw + 1rem, 1.5rem);
  --cr-t-lead: clamp(1.125rem, .78125vw + .75rem, 1.25rem);
  --cr-t-liczba: clamp(3rem, 9.375vw - 1.5rem, 4.5rem);

  /* siatka jak daplo.agency (telefon): m = odsunięcie kafla od krawędzi, p = wcięcie treści w kaflu */
  --cr-m: 8px;
  --cr-p: 12px;
  --cr-max: 1200px;             /* szerokość treści wąskich sekcji: nagłówek, hero, „Przed i po”, pytania, rozmowa (jak daplo.agency) */
  --cr-max-szer: 1680px;        /* szerokość treści pozostałych sekcji strony głównej (daplo.agency --max-tresc) */
  --cr-sekcja: 64px;
  --cr-sekcja-duza: 88px;
  --cr-kafel-py: 40px;
  --cr-ns-odstep: 32px;
  --cr-karty-odstep: 16px;
  --cr-nagl-h: 56px;
  --cr-pasek-h: 72px;
  /* aliasy v1 */
  --cr-margines: calc(var(--cr-m) + var(--cr-p));
  --cr-odstep: var(--cr-karty-odstep);
  --cr-sek: var(--cr-sekcja);
  --cr-sek-ciemna: var(--cr-kafel-py);
  --cr-kontener: var(--cr-max);
  --cr-modul: 24px;

  /* ruch jak daplo.agency */
  --cr-krzywa: cubic-bezier(.25, .46, .45, .94);
  --cr-ruch-szybki: 150ms;
  --cr-ruch-stan: 250ms;
  --cr-ruch: 350ms;
  --cr-ruch-rys: 700ms;

  /* kształt węzłów: koło (sześciokąty z v1 odwołane 29.09) */
  --cr-heks: circle(50% at 50% 50%);
}
@media (min-width: 768px) {
  :root {
    --cr-m: clamp(20px, 3.33vw, 48px);
    --cr-p: clamp(12px, 5vw, 72px);
    --cr-kafel-py: 64px;
    --cr-sekcja: 96px;
    --cr-sekcja-duza: 128px;
    --cr-ns-odstep: 56px;
    --cr-karty-odstep: 24px;
  }
}
@media (min-width: 1024px) { :root { --cr-nagl-h: 72px; } }

/* zapasowe kroje z metrykami policzonymi z plików Google Fonts (29.09.2026, próbka PL) */
@font-face {
  font-family: "Barlow SC Zapas";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial");
  size-adjust: 83.9%; ascent-override: 119.2%; descent-override: 23.8%; line-gap-override: 0%;
}
@font-face {
  font-family: "DM Sans Zapas";
  src: local("Arial"), local("ArialMT");
  size-adjust: 101.9%; ascent-override: 97.3%; descent-override: 30.4%; line-gap-override: 0%;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-padding-top: calc(var(--cr-nagl-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html.pasek-on { scroll-padding-bottom: calc(var(--cr-pasek-h) + 8px); }
body {
  margin: 0; min-height: 100vh;
  background: var(--cr-tlo); color: var(--cr-tekst);
  font-family: var(--cr-f-tresc); font-size: 1.125rem; line-height: 1.6; font-weight: 400;
  overflow-x: clip;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; font-kerning: normal;
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd, fieldset { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-underline-offset: .25em; text-decoration-thickness: 1.5px; }
fieldset { border: 0; padding: 0; min-width: 0; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--cr-fokus); outline-offset: 3px; }
::selection { background: var(--cr-marka); color: var(--cr-biel); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
}

/* ---------- 3. Wariant A/B (§6.0) — bez JS widać A ---------- */
html:not([data-war="b"]) [data-tylko="b"],
html[data-war="b"] [data-tylko="a"] { display: none !important; }

/* ---------- 4. Typografia (daplo.css §3) ---------- */
.h1, h1 {
  font-family: var(--cr-f-nagl); font-weight: 700;
  font-size: var(--cr-t-h1); line-height: 1.1; letter-spacing: -.005em;
  color: var(--cr-kolor-nagl); text-wrap: balance;
}
.h1--sub { font-size: var(--cr-t-h1-sub); }
.h2, h2 {
  font-family: var(--cr-f-nagl); font-weight: 600;
  font-size: var(--cr-t-h2); line-height: 1.15;
  color: var(--cr-kolor-nagl); text-wrap: balance;
}
.h3, h3 {
  font-family: var(--cr-f-nagl); font-weight: 600;
  font-size: var(--cr-t-h3); line-height: 1.25;
  color: var(--cr-kolor-nagl); text-wrap: balance;
}
.lead { font-size: var(--cr-t-lead); line-height: 1.5; color: var(--cr-kolor-tekst-2); max-width: 62ch; text-wrap: pretty; }
.tresc p + p { margin-top: 1em; }
.tresc, .tresc p { max-width: 68ch; }
.fakt { font-size: 1.0625rem; line-height: 1.4; font-weight: 600; }
.maly { font-size: .875rem; line-height: 1.45; }
.drugi { color: var(--cr-kolor-tekst-2); }
.dane, .num { font-family: var(--cr-f-nagl); font-variant-numeric: tabular-nums; font-weight: 600; }
.tnum { font-variant-numeric: tabular-nums; }
.liczba { /* liczby dowodowe — wartość końcowa od pierwszej klatki */
  font-family: var(--cr-f-nagl); font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: var(--cr-t-liczba); line-height: 1; letter-spacing: -.01em; white-space: nowrap;
}
.nowrap, .nw { white-space: nowrap; }
strong, b { font-weight: 600; }

/* lista ze znacznikiem: kwadrat 6 px jak etykieta daplo.agency */
.lista-heks { padding: 0; list-style: none; }
.lista-heks > li { position: relative; padding-left: 22px; }
.lista-heks > li + li { margin-top: .5em; }
.lista-heks > li::before { content: ""; position: absolute; left: 2px; top: .68em; width: 7px; height: 7px; background: var(--cr-marka); }
.sek--granat .lista-heks > li::before, .sek--glebia .lista-heks > li::before { background: var(--cr-sygnal-ciemne); }

/* ---------- 5. Ikony (Tabler 3.48, 1,5 px) ---------- */
.i { width: 24px; height: 24px; flex: none; stroke-width: 1.5; fill: none; stroke: currentColor; }
.i--16 { width: 16px; height: 16px; }
.i--20 { width: 20px; height: 20px; }
.i--32 { width: 32px; height: 32px; }
.ikona-poj, .poj { /* pojemnik 48 / 56 jak .poj daplo.agency */
  display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: var(--cr-r-s);
  background: var(--cr-papier); color: var(--cr-marka);
}
.ikona-poj .i, .poj .i { width: 32px; height: 32px; }
@media (min-width: 768px) { .ikona-poj, .poj { width: 56px; height: 56px; } }
.sek--papier .ikona-poj, .sek--papier .poj, .tafla--papier .poj { background: var(--cr-tlo); }
.sek--granat .ikona-poj, .sek--glebia .ikona-poj, .sek--granat .poj, .sek--glebia .poj { background: var(--cr-glebia-2); color: var(--cr-sygnal-ciemne); }

/* ---------- 6. Kontener i siatka (daplo.css §4) ---------- */
.kontener { width: min(var(--cr-max), 100% - 2 * (var(--cr-m) + var(--cr-p))); margin-inline: auto; }
/* szerokie sekcje jak na daplo.agency: treść do 1680 px (powyżej okna 1440 px rośnie razem z oknem); reszta zostaje w 1200 px */
/* (04.10) wszystkie sekcje w jednej szerokości 1200 px, PRESTIZ-DAPLO §8; dawna lista szerokich sekcji usunięta */
#jak-to-dziala { --cr-max: var(--cr-max-szer); }   /* (04.10) wyjątek: sześć animowanych kart potrzebuje szerokości, w 1200 px makiety się ściskały */
@media (min-width: 1024px) { #jak-to-dziala { --cr-m: 16px; --cr-p: 40px; } }   /* węższy margines i wcięcie kafla: w oknie 1440 treść ok. 1330 px zamiast 1200 */
.siatka { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cr-karty-odstep); }
.siatka > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 768px) {
  .siatka { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .t-4 { grid-column: span 4; } .t-8 { grid-column: span 8; }
}
@media (min-width: 1024px) {
  .siatka { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .d-3 { grid-column: span 3; } .d-4 { grid-column: span 4; } .d-5 { grid-column: span 5; } .d-6 { grid-column: span 6; }
  .d-7 { grid-column: span 7; } .d-8 { grid-column: span 8; } .d-12 { grid-column: 1 / -1; }
  .d-od-2 { grid-column-start: 2; } .d-od-6 { grid-column-start: 6; } .d-od-7 { grid-column-start: 7; } .d-od-8 { grid-column-start: 8; }
}
@media (max-width: 1023.98px) { .tylko-desk { display: none !important; } }
@media (min-width: 1024px) { .tylko-tel { display: none !important; } }
@media (max-width: 767.98px) { .od-768 { display: none !important; } }

/* ---------- 7. Sekcje i kafle (daplo.css §4: .sekcja, .kafel) ----------
   .sek          = sekcja na bieli (odstęp od góry, bez tła)
   .sek--papier  = kafel papierowy: odsunięty od krawędzi o --cr-m, promień 16, wcięcie treści --cr-p
   .sek--granat  = ciemny kafel granatowy, .sek--glebia = kafel w najciemniejszym tle
   .tafla        = ten sam kafel jako blok wewnątrz sekcji (np. panel w kolumnie) */
.sek { position: relative; padding-top: var(--cr-sekcja); color: var(--cr-kolor-tekst); }
.sek--duza { padding-top: var(--cr-sekcja-duza); }
.sek--papier, .sek--papier-2, .sek--granat, .sek--glebia, .tafla {
  margin: var(--cr-sekcja) var(--cr-m) 0;
  padding: var(--cr-kafel-py) var(--cr-p);
  border-radius: var(--cr-r-m);
  background: var(--cr-tlo-sek);
}
.tafla { margin: 0; }
.sek--papier > .kontener, .sek--papier-2 > .kontener, .sek--granat > .kontener, .sek--glebia > .kontener, .tafla > .kontener { width: min(var(--cr-max), 100%); }
.sek--papier, .tafla--papier { --cr-tlo-sek: var(--cr-papier); }
.sek--papier-2, .tafla--papier-2 { --cr-tlo-sek: var(--cr-papier-2); }
main > .sek:last-child:not(.sek--papier):not(.sek--papier-2):not(.sek--granat):not(.sek--glebia) { padding-bottom: var(--cr-sekcja); }
main > .sek:last-child { margin-bottom: var(--cr-sekcja); }

.sek--granat, .sek--glebia, .tafla--granat, .tafla--glebia, .na-ciemnym {
  --cr-fokus: var(--cr-sygnal-ciemne);
  --cr-kolor-tekst: var(--cr-biel);
  --cr-kolor-tekst-2: var(--cr-na-glebi-2);
  --cr-kolor-nagl: var(--cr-biel);
  --cr-kolor-etyk: var(--cr-na-glebi-2);
  --cr-kolor-linii: var(--cr-na-glebi-2);
  color: var(--cr-biel);
}
.sek--granat, .tafla--granat { --cr-tlo-sek: var(--cr-marka); }
.sek--glebia, .tafla--glebia { --cr-tlo-sek: var(--cr-glebia); }
.sek--granat a:not(.btn), .sek--glebia a:not(.btn) { color: var(--cr-biel); }
/* powrót do jasnych ról wewnątrz białej karty na ciemnym tle (np. formularz w S12) */
.na-jasnym {
  --cr-fokus: var(--cr-marka);
  --cr-kolor-tekst: var(--cr-tekst);
  --cr-kolor-tekst-2: var(--cr-tekst-2);
  --cr-kolor-nagl: var(--cr-marka);
  --cr-kolor-etyk: var(--cr-tekst-2);
  --cr-kolor-linii: var(--cr-marka);
  --cr-tlo-sek: var(--cr-tlo);
  color: var(--cr-tekst);
}
.sek--granat .na-jasnym a:not(.btn), .sek--glebia .na-jasnym a:not(.btn) { color: var(--cr-marka); }

/* ---------- 8. Nagłówek sekcji NS (daplo.css §5): etykieta → H2 → lead ---------- */
.sek-nagl { display: grid; gap: 0; max-width: 820px; margin-bottom: var(--cr-ns-odstep); }
.sek-nagl .etykieta { margin-bottom: 12px; }
.sek-nagl .rej { justify-self: start; margin-bottom: 16px; }
.sek-nagl .lead { margin-top: 16px; max-width: 62ch; }
.sek-nagl__akcja { margin-top: 20px; }
@media (min-width: 1024px) {
  .sek-nagl--dziel { max-width: none; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .sek-nagl--dziel .sek-nagl__gl { grid-column: 1 / span 7; }
  .sek-nagl--dziel .sek-nagl__bok { grid-column: 8 / span 5; padding-top: var(--ns-bok-top, 36px); }
  .sek-nagl--dziel .sek-nagl__bok .lead { margin-top: 0; }
  .sek-nagl--srodek { max-width: 760px; margin-inline: auto; text-align: center; justify-items: center; }
  .sek-nagl--srodek .etykieta { justify-content: center; }
  .sek-nagl--srodek .lead { margin-inline: auto; }
}
.sek-nagl__gl, .sek-nagl__bok { display: grid; justify-items: start; }

.etykieta {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--cr-f-tresc); font-weight: 600; font-size: .9375rem; line-height: 1.4;
  color: var(--cr-kolor-etyk);
}
.etykieta::before { content: ""; width: 8px; height: 8px; background: var(--cr-marka); flex: none; }
.sek--granat .etykieta::before, .sek--glebia .etykieta::before, .na-ciemnym .etykieta::before { background: var(--cr-sygnal-ciemne); }
.etykieta__nr, .etykieta .heks { display: none; }   /* v1: numer i sześciokąt; w gramatyce daplo.agency sam kwadrat */
.heks { display: inline-block; flex: none; width: 8px; height: 8px; background: currentColor; clip-path: var(--cr-heks); }
.heks--12 { width: 12px; height: 12px; }

/* ---------- 9. Przyciski, linki, pigułki (daplo.css §6) ---------- */
.btn {
  --btn-tlo: var(--cr-marka); --btn-tekst: var(--cr-biel); --btn-obrys: var(--cr-marka);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; min-width: min(220px, 100%); padding: 0 20px 0 24px;
  background: var(--btn-tlo); color: var(--btn-tekst);
  border: 2px solid var(--btn-obrys); border-radius: var(--cr-r-s);
  font-family: var(--cr-f-tresc); font-size: 1.0625rem; font-weight: 600; line-height: 1.2; text-decoration: none; text-align: center;
  transition: background-color var(--cr-ruch-szybki) var(--cr-krzywa), border-color var(--cr-ruch-szybki) var(--cr-krzywa), transform var(--cr-ruch-szybki) var(--cr-krzywa);
  -webkit-tap-highlight-color: transparent; cursor: pointer;
}
.btn .i { width: 20px; height: 20px; transition: transform var(--cr-ruch-szybki) var(--cr-krzywa); }
.btn:active { transform: translateY(1px); }
.btn--cta { --btn-tlo: var(--cr-sygnal); --btn-obrys: var(--cr-sygnal); --btn-tekst: var(--cr-biel); }
.btn--sys { --btn-tlo: var(--cr-marka); --btn-obrys: var(--cr-marka); }
.btn--drugi { --btn-tlo: var(--cr-tlo); --btn-tekst: var(--cr-marka); --btn-obrys: var(--cr-marka); }
.btn--jasny { --btn-tlo: var(--cr-biel); --btn-tekst: var(--cr-marka); --btn-obrys: var(--cr-biel); }
/* na ciemnym: CTA bursztyn z tekstem głębi, drugi przycisk biały obrys */
.sek--granat .btn--cta, .sek--glebia .btn--cta, .na-ciemnym .btn--cta, .nagl .btn--cta { --btn-tlo: var(--cr-sygnal-ciemne); --btn-obrys: var(--cr-sygnal-ciemne); --btn-tekst: var(--cr-glebia); }
.sek--granat .btn--drugi, .sek--glebia .btn--drugi { --btn-tlo: transparent; --btn-tekst: var(--cr-biel); --btn-obrys: var(--cr-biel); }
.sek--granat .na-jasnym .btn--cta, .sek--glebia .na-jasnym .btn--cta { --btn-tlo: var(--cr-sygnal); --btn-obrys: var(--cr-sygnal); --btn-tekst: var(--cr-biel); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { --btn-tlo: var(--cr-glebia-2); --btn-obrys: var(--cr-glebia-2); }
  .btn:hover .ik-strz { transform: translateX(4px); }
  .btn--cta:hover { --btn-tlo: var(--cr-sygnal-hov); --btn-obrys: var(--cr-sygnal-hov); }
  .btn--drugi:hover { --btn-tlo: var(--cr-papier); --btn-obrys: var(--cr-marka); }
  .btn--jasny:hover { --btn-tlo: var(--cr-papier); --btn-obrys: var(--cr-papier); }
  .sek--granat .btn--cta:hover, .sek--glebia .btn--cta:hover, .na-ciemnym .btn--cta:hover, .nagl .btn--cta:hover { --btn-tlo: var(--cr-sygnal-ciemne-hov); --btn-obrys: var(--cr-sygnal-ciemne-hov); }
  .sek--granat .btn--drugi:hover, .sek--glebia .btn--drugi:hover { --btn-tlo: var(--cr-glebia-2); --btn-obrys: var(--cr-biel); }
  .sek--granat .na-jasnym .btn--cta:hover, .sek--glebia .na-jasnym .btn--cta:hover { --btn-tlo: var(--cr-sygnal-hov); --btn-obrys: var(--cr-sygnal-hov); }
}
.btn--maly { min-height: 44px; min-width: 0; padding: 0 16px; font-size: 1rem; }
.btn--kompakt { min-height: 48px; min-width: 0; padding: 0 16px; }
.btn[aria-disabled="true"], .btn:disabled { cursor: progress; }
@media (max-width: 767.98px) { .btn--szer-tel { width: 100%; } }
.btn-rzad { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 768px) { .btn-rzad { gap: 16px; } }

.link-strz {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px;
  font-weight: 600; font-size: 1.0625rem; color: var(--cr-marka);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .25em;
}
.link-strz .i { width: 20px; height: 20px; transition: transform var(--cr-ruch-szybki) var(--cr-krzywa); }
.link-strz--maly { font-size: .9375rem; min-height: 44px; }
.sek--granat .link-strz, .sek--glebia .link-strz { color: var(--cr-biel); }
.tresc a, p a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .25em; }
@media (hover: hover) and (pointer: fine) {
  .link-strz:hover, .tresc a:hover, p a:hover { text-decoration-thickness: 2.5px; }
  .link-strz:hover .i { transform: translateX(4px); }
}

/* pigułka (daplo .pig) */
.pig {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 3px 14px;
  border: 1.5px solid var(--cr-obrys-ui); border-radius: 999px; background: var(--cr-tlo);
  font-family: var(--cr-f-nagl); font-size: .9375rem; line-height: 1.2; font-weight: 600; color: var(--cr-tekst);
}
.pig .i { width: 18px; height: 18px; margin-left: -4px; }
.pig--ciemna { background: var(--cr-glebia-2); border-color: var(--cr-obrys-ciemne); color: var(--cr-biel); }
.pig-rzad { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- 10. Etykiety rejestrów D / R / B: chipy w kształcie .pig (§3.1), teksty stałe ---------- */
.rej {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; max-width: 100%;
  padding: 4px 14px 4px 12px; border: 1.5px solid; border-radius: 999px;
  font-family: var(--cr-f-nagl); font-weight: 600; font-size: .9375rem; line-height: 1.2;
}
.rej__znak { flex: none; width: 8px; height: 8px; }
/* D: działa — tło granatowe jasne, pełna kropka */
.rej--d { color: var(--cr-marka); background: var(--cr-marka-tint); border-color: var(--cr-marka-tint); }
.rej--d .rej__znak { border-radius: 50%; background: var(--cr-marka); box-shadow: 0 0 0 3px rgba(30, 49, 80, .16); }
/* R: dziś ręcznie — biel, obrys UI, znak kartki */
.rej--r { color: var(--cr-tekst); background: var(--cr-tlo); border-color: var(--cr-obrys-ui); }
.rej--r .rej__znak { width: 9px; height: 12px; border-radius: 1px; background: var(--cr-tlo); box-shadow: inset 0 0 0 1.5px var(--cr-tekst-2), inset 0 -4px 0 -2.5px var(--cr-tekst-2); }
/* B: projekt — przezroczysty, obrys kreskowany, kółko samą linią */
.rej--b { color: var(--cr-marka); background: transparent; border-color: var(--cr-marka-jasna); border-style: dashed; }
.rej--b .rej__znak { border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--cr-marka-jasna); }
/* na ciemnych kaflach */
.sek--granat .rej--d, .sek--glebia .rej--d { color: var(--cr-biel); background: var(--cr-glebia-2); border-color: var(--cr-obrys-ciemne); }
.sek--granat .rej--d .rej__znak, .sek--glebia .rej--d .rej__znak { background: var(--cr-sygnal-ciemne); box-shadow: 0 0 0 3px rgba(245, 158, 11, .22); }
.sek--granat .rej--r, .sek--glebia .rej--r, .sek--granat .rej--b, .sek--glebia .rej--b { color: var(--cr-biel); background: transparent; border-color: var(--cr-na-glebi-2); }
.sek--granat .na-jasnym .rej--d, .sek--glebia .na-jasnym .rej--d { color: var(--cr-marka); background: var(--cr-marka-tint); border-color: var(--cr-marka-tint); }

/* ---------- 11. Stany (PLAN-LP §4.7): zawsze ikona + słowo ---------- */
.stan {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 8px;
  border-radius: 999px; border: 1.5px solid transparent; white-space: nowrap;
  font-family: var(--cr-f-nagl); font-weight: 600; font-size: .9375rem; line-height: 1;
}
.stan .i { width: 20px; height: 20px; }
.stan--jest { color: var(--cr-marka); background: var(--cr-tlo); border-color: var(--cr-marka-jasna); }
.stan--brak { color: var(--cr-st-brak); background: var(--cr-st-brak-tlo); border-color: var(--cr-st-brak); }
.stan--ocena {
  color: var(--cr-tekst); border: 1.5px dashed var(--cr-tekst-2);
  background-color: var(--cr-tlo);
  background-image: repeating-linear-gradient(45deg, var(--cr-linia) 0 1px, transparent 1px 6px);
}
.stan--nd { color: var(--cr-tekst-2); background: none; border-color: transparent; padding-left: 4px; }
.stan--czeka { color: var(--cr-st-czeka); background: var(--cr-st-czeka-tlo); border-color: var(--cr-st-czeka); }
.stan--zatw { color: var(--cr-st-zatw); background: var(--cr-st-zatw-tlo); border-color: var(--cr-st-zatw); }
.stan--uniew { color: var(--cr-st-uniew); background: var(--cr-st-uniew-tlo); border-color: var(--cr-st-uniew); }
.stan--zatw .i--pelna { fill: currentColor; stroke: none; }
/* w makietach i na kartce: 26 px, 13 px (minimum) */
.mk .stan, .kartka .stan, .plyw .stan, .stan--maly { height: 26px; padding: 0 9px 0 6px; font-size: .8125rem; gap: 4px; }
.mk .stan .i, .kartka .stan .i, .plyw .stan .i, .stan--maly .i { width: 16px; height: 16px; }

/* węzeł stanu w macierzy: koło 28 px, ikona 16 px */
.wezel {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 28px; height: 28px; color: var(--cr-biel); isolation: isolate;
}
.wezel::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--cr-marka); }
.wezel .i { width: 16px; height: 16px; stroke-width: 2; }
.wezel--jest::before { background: var(--cr-marka); }
.wezel--brak::before { background: var(--cr-st-brak); }
.wezel--ocena { color: var(--cr-tekst); }
.wezel--ocena::before { background: var(--cr-tlo); border: 1.5px dashed var(--cr-tekst); }
.wezel--nd { color: var(--cr-tekst-2); }
.wezel--nd::before { display: none; }
.wezel--czeka::before { background: var(--cr-st-czeka); }
.wezel--zatw::before { background: var(--cr-st-zatw); }
.wezel--uniew::before { background: var(--cr-st-uniew); }

/* węzeł struktury 12 px i etap 28 px z cyfrą (koła jak .etap daplo.agency) */
.wezel-str { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--cr-tlo-sek); box-shadow: inset 0 0 0 2px var(--cr-kolor-linii); }
.etap {
  position: relative; z-index: 2; display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--cr-marka); color: var(--cr-biel);
  font-family: var(--cr-f-nagl); font-weight: 600; font-size: .9375rem; font-variant-numeric: tabular-nums;
}
.etap .i { width: 16px; height: 16px; }
.etap--pusty { background: var(--cr-tlo); color: var(--cr-marka); box-shadow: inset 0 0 0 2px var(--cr-marka); }
.sek--granat .etap, .sek--glebia .etap { background: var(--cr-tlo-sek); color: var(--cr-biel); box-shadow: 0 0 0 2px var(--cr-biel); }
.sek--granat .etap--pusty, .sek--glebia .etap--pusty { box-shadow: inset 0 0 0 2px var(--cr-na-glebi-2); color: var(--cr-na-glebi-2); }

/* ---------- 12. Makieta MK (daplo.css §10): ramka, pasek z kropkami i adresem, aplikacja ---------- */
.obraz { position: relative; margin: 0; min-width: 0; }
.obraz > .rej { margin-bottom: 16px; }
.podpis, .mk-podpis { margin-top: 12px; font-size: .9375rem; line-height: 1.45; font-weight: 500; color: var(--cr-kolor-tekst-2); }
.podpis b, .podpis strong { color: var(--cr-kolor-tekst); font-weight: 600; }
.plotno { position: relative; width: 100%; }

.mk {
  position: relative; background: var(--cr-tlo); color: var(--cr-tekst);
  border: 2px solid var(--cr-szkielet); border-radius: var(--cr-r-m);
  overflow: hidden; contain: layout paint; display: flex; flex-direction: column;
  font-family: var(--cr-f-tresc); font-size: 14px; line-height: 1.35;
}
.mk--cien { box-shadow: var(--cr-cien-duzy); }
.mk__bar { flex: none; height: 40px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border-bottom: 1px solid var(--cr-linia-2); }
.mk__kropki { display: flex; gap: 6px; flex: none; }
.mk__kropki i { width: 8px; height: 8px; border-radius: 50%; background: var(--cr-szkielet); }
/* adres: gdy się nie mieści, obcina się z prawej (kłódka i początek zostają) */
.mk__adres {
  flex: 1; min-width: 0; max-width: 300px; margin-inline: auto; padding: 0 10px; height: 24px;
  display: flex; align-items: center; justify-content: center; justify-content: safe center; gap: 6px;
  background: var(--cr-papier); border-radius: var(--cr-r-s); font-size: 13px; color: var(--cr-tekst-2); white-space: nowrap; overflow: hidden;
}
.mk__adres .i { width: 13px; height: 13px; }
.mk__bar-luz { flex: none; width: 42px; }
.mk__app { flex: 1; display: grid; grid-template-columns: 52px minmax(0, 1fr); min-height: 0; }
.mk__app--bez-boku { grid-template-columns: minmax(0, 1fr); }
.mk__bok { border-right: 1px solid var(--cr-linia-2); background: var(--cr-papier); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0; }
.mk__bok i { width: 20px; height: 20px; border-radius: 5px; background: var(--cr-szkielet); opacity: .7; }
.mk__bok i.jest { background: var(--cr-marka); opacity: 1; }
.mk__znak { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 7px; background: var(--cr-marka); }
.mk__znak img { width: 18px; height: 18px; }
.mk__ekran { padding: 14px 16px; min-width: 0; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.mk__gora { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mk__okr { font-size: 13px; color: var(--cr-tekst-2); }
.mk__modul { font-family: var(--cr-f-nagl); font-size: 17px; font-weight: 600; line-height: 1.2; color: var(--cr-marka); }
.mk__btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: var(--cr-marka); color: var(--cr-biel); border-radius: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.mk__btn .i { width: 15px; height: 15px; }
.mk__btn--2 { background: var(--cr-tlo); color: var(--cr-marka); box-shadow: inset 0 0 0 1px var(--cr-linia); }
.mk__osoba { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mk__av { width: 44px; height: 44px; border-radius: 50%; background: var(--cr-papier); border: 1px solid var(--cr-linia-2); display: grid; place-items: center; font-family: var(--cr-f-nagl); font-weight: 600; font-size: 15px; color: var(--cr-marka); flex: none; }
.mk__av--m { width: 30px; height: 30px; font-size: 13px; }
.mk__nazw { font-family: var(--cr-f-nagl); font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--cr-marka); }
.mk__pola { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; }
.mk__pole { display: grid; gap: 3px; min-width: 0; }
.mk__pole > span:first-child { font-size: 13px; color: var(--cr-tekst-2); }
.mk__pole > b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk__chipy { display: flex; flex-wrap: wrap; gap: 6px; }
.mk__chip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border: 1px solid var(--cr-linia); border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--cr-tlo); white-space: nowrap; }
.mk__chip--jest { background: var(--cr-marka); color: var(--cr-biel); border-color: var(--cr-marka); }
.mk__status { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--cr-marka-tint); color: var(--cr-marka); font-size: 13px; font-weight: 600; width: max-content; }
.mk__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cr-marka); }
.mk__szk { height: 8px; border-radius: 4px; background: var(--cr-szkielet); opacity: .55; }
.mk__szk--k { width: 40%; } .mk__szk--s { width: 62%; } .mk__szk--d { width: 86%; }
.mk__karta { border: 1px solid var(--cr-linia-2); border-radius: var(--cr-r-s); padding: 10px 12px; display: grid; gap: 8px; }
.mk__tab { display: grid; border: 1px solid var(--cr-linia-2); border-radius: var(--cr-r-s); overflow: hidden; }
.mk__tr { display: grid; align-items: center; gap: 10px; padding: 0 12px; min-height: 40px; border-top: 1px solid var(--cr-linia-2); font-size: 13px; }
.mk__tr:first-child { border-top: 0; }
.mk__tr--g { background: var(--cr-papier); font-weight: 600; color: var(--cr-tekst-2); min-height: 32px; }
.mk__tr--akt { background: var(--cr-marka-tint); }
.mk__tr b { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk__pasek { display: block; height: 6px; border-radius: 3px; background: var(--cr-papier-2); overflow: hidden; }
.mk__pasek i { display: block; width: var(--w, 100%); height: 100%; border-radius: 3px; background: var(--cr-marka); }

/* okno v1 (S3–S12) w gramatyce MK: ramka 2 px, promień 16, pasek z kropkami; znak w granatowym kwadracie */
.okno {
  position: relative; background: var(--cr-tlo); color: var(--cr-tekst);
  border: 2px solid var(--cr-szkielet); border-radius: var(--cr-r-m); overflow: hidden;
  font-size: .875rem; line-height: 1.4;
}
.okno__pasek {
  display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px;
  background: var(--cr-tlo); color: var(--cr-marka); border-bottom: 1px solid var(--cr-linia-2);
  font-family: var(--cr-f-nagl); font-weight: 600; font-size: .9375rem; white-space: nowrap; overflow: hidden;
}
.okno__pasek::before { content: ""; flex: none; width: 36px; height: 8px; margin-right: 4px; background: radial-gradient(circle at 4px 4px, var(--cr-szkielet) 3.6px, transparent 4.2px) 0 0 / 14px 8px repeat-x; }
.okno__znak { width: 24px; height: 24px; flex: none; padding: 4px; border-radius: 6px; background: var(--cr-marka); }
.okno__nazwa { overflow: hidden; text-overflow: ellipsis; }
.okno__tresc { padding: 16px; }
@media (min-width: 768px) { .okno__tresc { padding: 18px 20px; } }
.okno__panel { background: var(--cr-papier); border-radius: var(--cr-r-s); padding: 12px; }
.okno .etyk-pola, .mk .etyk-pola { display: block; font-size: .8125rem; line-height: 1.3; color: var(--cr-tekst-2); }  /* 13 px — minimum */
.okno .wartosc, .mk .wartosc { font-family: var(--cr-f-nagl); font-weight: 600; font-size: 1.25rem; font-variant-numeric: tabular-nums; color: var(--cr-marka); }
@media (min-width: 1024px) { .okno .wartosc { font-size: 1.125rem; } }
/* rejestr B: rysunek projektu — sama linia, ramka kreskowana; węzły i pigułki stanów zachowują wypełnienia */
.okno--projekt, .mk--projekt { background: transparent; border: 2px dashed var(--cr-marka-jasna); }
.okno--projekt .okno__pasek, .mk--projekt .mk__bar { background: transparent; color: var(--cr-marka); border-bottom: 1.5px dashed var(--cr-marka-jasna); }
.okno--projekt .okno__znak { background: transparent; padding: 2px; }
.okno--projekt .okno__panel { background: transparent; border: 1.5px solid var(--cr-marka-jasna); }
.okno--projekt .szk { background: transparent; box-shadow: inset 0 0 0 1.5px var(--cr-linia); }
.okno--projekt .btn, .mk--projekt .mk__btn { background: transparent; color: var(--cr-marka); border-color: var(--cr-marka-jasna); box-shadow: inset 0 0 0 1.5px var(--cr-marka-jasna); }

/* ---------- 13. Kartka A4 i wachlarz (daplo.css §10, glowna.css) ---------- */
/* kartka (rejestr R albo dokument z systemu): bez paska okna i bez znaku aplikacji */
.kartka {
  position: relative; background: var(--cr-tlo); color: var(--cr-tekst);
  border: 1px solid var(--cr-linia); border-radius: 2px; box-shadow: var(--cr-cien);
  padding: 20px; font-size: .875rem; line-height: 1.45;
}
@media (min-width: 768px) { .kartka { padding: 24px 28px; } }
.kartka--a4 { aspect-ratio: 210 / 297; overflow: hidden; }
.kartka__nagl { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding-bottom: 12px; border-bottom: 1.5px solid var(--cr-marka); margin-bottom: 12px; }
.kartka__tytul { font-family: var(--cr-f-nagl); font-weight: 700; font-size: 1.125rem; line-height: 1.2; color: var(--cr-marka); }
.kartka__meta { font-family: var(--cr-f-nagl); font-weight: 500; font-size: .8125rem; color: var(--cr-tekst-2); font-variant-numeric: tabular-nums; }
.kartka__wiersz { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--cr-linia-2); }
.kartka__stopka { margin-top: 12px; font-size: .8125rem; color: var(--cr-tekst-2); }
/* elementy małych kartek dokumentów (wachlarz) */
.kartka__sp { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kartka__sp i { height: 5px; border-radius: 2px; background: var(--cr-szkielet); }
.kartka__sp i:first-child { width: 46%; background: var(--cr-marka-jasna); opacity: .6; }
.kartka__sp i:last-child { width: 22%; }
.kartka__t { font-family: var(--cr-f-nagl); font-size: 15px; font-weight: 700; margin: 4px 0 1px; line-height: 1.2; color: var(--cr-marka); }
.kartka__szk { height: 4px; border-radius: 2px; background: var(--cr-szkielet); opacity: .75; flex: none; }
.kartka__szk--k { width: 58%; } .kartka__szk--s { width: 80%; }
.kartka__tab { border: 1px solid var(--cr-linia-2); border-radius: 2px; display: grid; background: var(--cr-tlo); }
.kartka__tab > div { display: grid; gap: 1px; padding: 5px 7px; border-top: 1px solid var(--cr-linia-2); }
.kartka__tab > div:first-child { border-top: 0; }
.kartka__tab span { color: var(--cr-tekst-2); font-size: 13px; line-height: 1.2; }
.kartka__tab b { font-weight: 600; font-size: 13px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kartka__podp { margin-top: auto; display: flex; justify-content: space-between; gap: 14%; }
.kartka__podp i { flex: 1; border-top: 1px solid var(--cr-tekst-2); height: 8px; }
.kartka .zn { padding: 0 2px; margin: 0 -2px; }
/* wachlarz: kartki z --x, --y, --o (obrót), ostatnia na wierzchu */
.wachlarz { position: relative; }
.wachlarz .kartka {
  position: absolute; width: 176px; aspect-ratio: 1 / 1.414; left: var(--x, 0); top: var(--y, 0);
  transform: rotate(var(--o, 0deg)); transform-origin: 50% 100%;
  padding: 14px 12px; display: flex; flex-direction: column; gap: 7px; font-size: 13px; line-height: 1.3; overflow: hidden;
}
.wachlarz .kartka:not(.kartka--wierzch) .kartka__t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 14. Scena, karty pływające, chip, znacznik pola ---------- */
.scena { position: relative; }
.plyw {
  position: absolute; z-index: 3;
  top: var(--pl-t, auto); right: var(--pl-r, auto); bottom: var(--pl-b, auto); left: var(--pl-l, auto);
  width: var(--pl-w, auto); max-width: min(320px, 90%);
  background: var(--cr-tlo); color: var(--cr-tekst);
  border: 1px solid var(--cr-linia-2); border-radius: var(--cr-r-s); box-shadow: var(--cr-cien);
  padding: 10px 12px; font-size: 14px; line-height: 1.35;
}
.plyw__nagl, .plyw__t { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-family: var(--cr-f-tresc); font-size: 13px; font-weight: 600; color: var(--cr-tekst-2); }
.plyw__t > span:first-child { display: inline-flex; align-items: center; gap: 6px; color: var(--cr-marka); }
.plyw__lista { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.plyw__lista li { display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 8px; border-radius: 6px; font-size: 14px; color: var(--cr-tekst-2); }
.plyw__lista li.jest { background: var(--cr-papier); color: var(--cr-marka); font-weight: 600; }
@media (max-width: 767.98px) {
  /* telefon: karta wraca do przepływu i zachodzi na obraz od dołu */
  .plyw:not(.plyw--tel-abs) { position: relative; inset: auto; width: auto; max-width: none; margin: -24px 12px 0; }
}
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; max-width: 60%;
  padding: 8px 12px; background: var(--cr-tlo); border-radius: var(--cr-r-s); box-shadow: var(--cr-cien);
  font-size: .9375rem; font-weight: 500; line-height: 1.3; color: var(--cr-tekst);
}
.chip--abs { position: absolute; z-index: 3; }
.kropka { width: 20px; height: 20px; border-radius: 50%; background: var(--cr-marka); color: var(--cr-biel); display: grid; place-items: center; flex: none; }
.kropka .i { width: 13px; height: 13px; stroke-width: 2.25; }
/* znacznik pola: tło #FEF3C7 + dolna krawędź #B45309, zapala się sekwencyjnie ([data-zn-sekw]) */
.zn {
  --zn-t: 0;
  background: linear-gradient(var(--cr-pole-tint), var(--cr-pole-tint)) no-repeat 0 0 / calc(var(--zn-t) * 100%) 100%;
  border-bottom: 2px solid color-mix(in srgb, var(--cr-pole-krawedz) calc(var(--zn-t) * 100%), transparent);
  border-radius: 2px; padding: 1px 4px; margin: 0 -4px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  transition: --zn-t 240ms var(--cr-krzywa);
}
.zn.on, html:not(.js) .zn { --zn-t: 1; }
@property --zn-t { syntax: "<number>"; inherits: false; initial-value: 0; }
@media (prefers-reduced-motion: reduce) { .zn { --zn-t: 1; } }

/* paski szkieletu (to, co mniejsze niż 13 px) */
.szk { display: block; height: 8px; width: var(--w, 100%); border-radius: 4px; background: var(--cr-szkielet); opacity: .55; }
.szk--gruby { height: 12px; }
.szk + .szk { margin-top: 8px; }
.maska { font-family: var(--cr-f-nagl); font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* ---------- 15. Schematy i łączniki = nici daplo.agency (daplo.css §11) ----------
   Linia 2 px, narożniki zaokrąglone r = 8, kółka 4 px na końcach, grot otwarty 4,5 px. Warstwę rysuje crew.js. */
.schemat, .sch { position: relative; }
.schemat figcaption, .sch figcaption { margin-top: 20px; font-size: .9375rem; color: var(--cr-kolor-tekst-2); font-weight: 500; max-width: 72ch; }
.laczniki { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.laczniki path { fill: none; stroke: var(--cr-kolor-linii); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.laczniki .l--kresk { stroke: var(--cr-kolor-tekst-2); stroke-dasharray: 6 6; }
.laczniki .l--kropk { stroke: var(--cr-szkielet); stroke-width: 1; stroke-dasharray: 4 4; }
.laczniki circle { fill: var(--cr-tlo-sek); stroke: var(--cr-kolor-linii); stroke-width: 2; }
.laczniki circle.l--kresk { stroke: var(--cr-kolor-tekst-2); }
.laczniki circle.l--brak { stroke: var(--cr-st-brak); }
.laczniki .grot { fill: none; stroke: var(--cr-kolor-linii); stroke-width: 2; stroke-dasharray: none; }
.laczniki .grot.l--kresk { stroke: var(--cr-kolor-tekst-2); }
.sek--granat .laczniki .l--kropk, .sek--glebia .laczniki .l--kropk { stroke: var(--cr-obrys-ciemne); }
[data-lacznik] { display: none; }
.schemat > :not(.laczniki) { position: relative; z-index: 1; }
/* linie statyczne w HTML (pionowy tor na telefonie) */
.tor { border-left: 2px solid var(--cr-kolor-linii); }
.tor--kresk { border-left-style: dashed; border-left-color: var(--cr-kolor-tekst-2); }
.tor--kropk { border-left: 1px dashed var(--cr-szkielet); }
.legenda { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; padding: 0; list-style: none; font-size: .9375rem; color: var(--cr-kolor-tekst-2); }
.legenda li { display: inline-flex; align-items: center; gap: 10px; }
.legenda__linia { display: inline-block; width: 28px; height: 0; border-top: 2px solid var(--cr-kolor-linii); }
.legenda__linia--kresk { border-top-style: dashed; border-top-color: var(--cr-kolor-tekst-2); }
.legenda__linia--kropk { border-top: 1px dashed var(--cr-szkielet); }
.strefa { font-family: var(--cr-f-nagl); font-weight: 600; font-size: .9375rem; color: var(--cr-kolor-tekst-2); letter-spacing: .01em; }
/* węzeł schematu (daplo .wezel) — nazwa .wezel-k, bo .wezel to węzeł stanu */
.wezel-k { position: relative; z-index: 2; background: var(--cr-tlo); border: 1px solid var(--cr-linia); border-radius: var(--cr-r-s); padding: 12px 16px; display: grid; gap: 4px; align-content: start; color: var(--cr-tekst); }
.wezel-k__t { font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.wezel-k__p { font-size: .875rem; line-height: 1.4; color: var(--cr-tekst-2); }
.wezel-k--kresk { border: 1.5px dashed var(--cr-tekst-2); background: transparent; }

/* ---------- 16. Karta, pas wyników, belka (daplo.css §7, §13) ---------- */
.karta { position: relative; background: var(--cr-tlo); color: var(--cr-tekst); border: 1px solid var(--cr-linia-2); border-radius: var(--cr-r-m); padding: 24px; }
@media (min-width: 768px) { .karta { padding: 32px; } }
.karta--plaska { border-color: transparent; }
.sek--glebia .karta--ciemna, .sek--granat .karta--ciemna, .karta--ciemna { background: var(--cr-glebia-2); color: var(--cr-biel); border-color: var(--cr-obrys-ciemne); }
.sek--granat .karta:not(.karta--ciemna), .sek--glebia .karta:not(.karta--ciemna) { border-color: transparent; }

.wyniki { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; }
.wyniki__k { padding: 20px 0; border-top: 1px dashed var(--cr-obrys-ciemne); min-width: 0; }
.wyniki__k:first-child { border-top: 0; padding-top: 0; }
.wyniki__l { display: flex; align-items: baseline; gap: .12em; color: var(--cr-kolor-nagl); }
.wyniki__l small { font-size: .45em; font-weight: 600; letter-spacing: 0; color: var(--cr-kolor-tekst-2); }
.wyniki__t { margin-top: 12px; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
.wyniki__z { margin-top: 4px; font-size: .9375rem; line-height: 1.45; color: var(--cr-kolor-tekst-2); }
@media (min-width: 768px) {
  .wyniki { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wyniki__k { border-top: 0; border-left: 1px dashed var(--cr-obrys-ciemne); padding: 0 32px; }
  .wyniki__k:first-child { border-left: 0; padding-left: 0; }
}
.sek:not(.sek--granat):not(.sek--glebia) .wyniki__k { border-color: var(--cr-szkielet); }

.belka { max-width: var(--cr-max); margin-inline: auto; background: var(--cr-marka); color: var(--cr-biel); border-radius: var(--cr-r-m); padding: 24px; display: grid; gap: 16px; align-items: center; }
.belka p { font-family: var(--cr-f-nagl); font-size: 1.375rem; font-weight: 600; line-height: 1.3; }
@media (min-width: 768px) { .belka { min-height: 88px; padding: 16px 16px 16px 32px; grid-template-columns: 1fr auto; } }

/* ---------- 17. Akordeon <details> (S3, S6, S8, S11): karty jak FAQ daplo.agency ---------- */
.akordeon { display: grid; gap: 8px; }
.akordeon > details { background: var(--cr-tlo); border: 1px solid var(--cr-linia-2); border-radius: var(--cr-r-m); transition: border-color var(--cr-ruch-szybki) var(--cr-krzywa); }
@media (hover: hover) and (pointer: fine) { .akordeon > details:hover { border-color: var(--cr-obrys-ui); } }
.akordeon summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 14px 16px; cursor: pointer; list-style: none;
  font-family: var(--cr-f-nagl); font-weight: 600; font-size: 1.25rem; line-height: 1.25; color: var(--cr-marka);
}
.akordeon summary::-webkit-details-marker { display: none; }
.akordeon summary .i { width: 24px; height: 24px; transition: transform var(--cr-ruch-stan) var(--cr-krzywa); }
.akordeon details[open] > summary .i { transform: rotate(180deg); }
.akordeon__tresc { padding: 0 16px 20px; max-width: 72ch; color: var(--cr-tekst); }
.akordeon__tresc > * + * { margin-top: .75em; }
@media (min-width: 768px) { .akordeon summary { padding: 16px 24px; } .akordeon__tresc { padding: 0 24px 24px; } }

/* ---------- 18. Formularz (§10) ---------- */
.form { display: grid; gap: 20px; }
.pole { display: grid; gap: 6px; }
.pole__etyk, .kafle > legend { font-weight: 600; font-size: 1rem; line-height: 1.35; color: var(--cr-tekst); }
.pole__wym { font-weight: 400; color: var(--cr-tekst-2); }
.pole__input {
  width: 100%; min-height: 52px; padding: 10px 14px;
  font-size: 1.125rem; line-height: 1.4; color: var(--cr-tekst); background: var(--cr-tlo);
  border: 1px solid var(--cr-obrys-ui); border-radius: var(--cr-r-s);
}
.pole__input::placeholder { color: var(--cr-tekst-2); opacity: 1; }
.pole__input:focus-visible { outline-offset: 2px; border-color: var(--cr-marka); }
.pole__input[aria-invalid="true"] { border: 2px solid var(--cr-st-brak); padding: 9px 13px; }
.pole__blad, .kafle__blad { display: flex; gap: 6px; align-items: flex-start; font-size: .9375rem; line-height: 1.4; color: var(--cr-st-brak); font-weight: 500; }
.pole__blad .i, .kafle__blad .i { width: 20px; height: 20px; margin-top: 1px; }
.kafle { display: grid; gap: 10px; }
.kafle > legend { margin-bottom: 10px; padding: 0; }
.kafle__siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 768px) { .kafle__siatka { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kafel { position: relative; }  /* kafel wyboru w formularzu (nie mylić z .sek--papier / .tafla) */
.kafel input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.kafel span {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 52px; height: 100%;
  padding: 8px 10px; text-align: center; font-weight: 500; font-size: 1rem; line-height: 1.25;
  border: 1px solid var(--cr-obrys-ui); border-radius: var(--cr-r-s); background: var(--cr-tlo); color: var(--cr-tekst);
}
.kafel span .i { display: none; width: 20px; height: 20px; color: var(--cr-marka); }
.kafel input:checked + span { border: 2px solid var(--cr-marka); box-shadow: inset 0 0 0 1px var(--cr-marka); padding: 7px 9px; color: var(--cr-marka); font-weight: 600; }
.kafel input:checked + span .i { display: inline-block; }
.kafel input:focus-visible + span { outline: 3px solid var(--cr-fokus); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .kafel:hover span { border-color: var(--cr-marka); } }
.kafle[aria-invalid="true"] .kafel span, .kafle.kafle--blad .kafel span { border-color: var(--cr-st-brak); }
.blad-podsum { border: 2px solid var(--cr-st-brak); border-radius: var(--cr-r-s); background: var(--cr-st-brak-tlo); color: var(--cr-tekst); padding: 14px 16px; }
.blad-podsum__tytul { font-family: var(--cr-f-nagl); font-weight: 700; font-size: 1.125rem; color: var(--cr-st-brak); margin-bottom: 6px; }
.blad-podsum ul { margin: 0; padding-left: 20px; }
.blad-podsum a { color: var(--cr-st-brak); font-weight: 600; }
.form__uwaga { font-size: .9375rem; line-height: 1.5; color: var(--cr-tekst-2); }
.form__uwaga strong { color: var(--cr-tekst); }
.form[aria-busy="true"] .btn { opacity: .85; }
.form-sukces { display: grid; gap: 12px; }
.form-sukces__tytul { display: flex; align-items: center; gap: 10px; }

/* ---------- 19. Dostępność ---------- */
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip {
  position: fixed; top: 12px; left: 12px; z-index: 200; display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px;
  border-radius: 999px; background: var(--cr-marka); color: var(--cr-biel); font-weight: 600; font-size: 1rem; text-decoration: none;
  transform: translateY(-160%);
}
.skip:focus, .skip:focus-visible { transform: none; outline-color: var(--cr-sygnal-ciemne); }
main:focus { outline: none; }

/* ---------- 20. Nagłówek strony (daplo.css §8 + „wersja czarna” 26.09) w granacie ---------- */
.nagl {
  position: sticky; top: 0; z-index: 50; height: var(--cr-nagl-h);
  background: var(--cr-marka); color: var(--cr-biel);
  --cr-fokus: var(--cr-sygnal-ciemne);
  transition: transform var(--cr-ruch-stan) var(--cr-krzywa);
}
.nagl--ukryty { transform: translateY(-100%); }
.nagl__wew { height: 100%; display: flex; align-items: center; gap: 8px; }
.nagl__logo { display: inline-flex; align-items: center; height: 44px; margin-right: auto; flex: none; }
.nagl__logo img { height: 26px; width: auto; }
.nagl__nav { display: none; }
.nagl__nav ul, .menu ul, .stopka ul { list-style: none; margin: 0; padding: 0; }
.nagl__nav ul { display: flex; align-items: center; gap: 8px; }
.nagl__nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px;
  border-radius: var(--cr-r-s); font-size: 1.0625rem; font-weight: 500; line-height: 1.2; color: var(--cr-biel); text-decoration: none;
  transition: background-color var(--cr-ruch-szybki);
}
.nagl__nav a[aria-current]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: var(--cr-biel); }
@media (hover: hover) and (pointer: fine) { .nagl__nav a:hover { background: var(--cr-glebia-2); } }
.nagl__cta { display: none; }
.nagl__menu-btn {
  width: 44px; height: 44px; display: grid; place-items: center; margin-right: -10px;
  border: 0; border-radius: var(--cr-r-s); background: transparent; color: var(--cr-biel);
}
.nagl__menu-btn .i { width: 26px; height: 26px; }
.nagl__menu-btn .i-zamknij, .nagl__menu-btn[aria-expanded="true"] .i-otworz { display: none; }
.nagl__menu-btn[aria-expanded="true"] .i-zamknij { display: block; }
html:not(.js) .nagl__menu-btn { display: none; }
.nagl__cta, .nagl__nav a { white-space: nowrap; }
@media (min-width: 1024px) {
  .nagl__logo { margin-right: 24px; }
  .nagl__logo img { height: 28px; }
  .nagl__cta { display: inline-flex; min-width: 0; flex: none; margin-left: auto; padding: 0 16px 0 20px; }
  .nagl__menu-btn { margin-right: -10px; margin-left: 8px; }
}
@media (min-width: 1200px) {
  .nagl__logo { margin-right: 48px; }
  .nagl__nav { display: flex; margin-right: auto; }
  .nagl__cta { margin-left: 0; }
  .nagl__menu-btn { display: none !important; }
}
@media (min-width: 1200px) and (max-width: 1319px) { .nagl__nav a { padding: 0 10px; font-size: 1rem; } .nagl__logo { margin-right: 24px; } }

/* menu mobilne: arkusz pod nagłówkiem (daplo .arkusz) */
.menu {
  position: fixed; left: 0; right: 0; top: var(--cr-nagl-h); z-index: 49;
  height: calc(100vh - var(--cr-nagl-h)); height: calc(100dvh - var(--cr-nagl-h));
  overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column;
  background: var(--cr-tlo); color: var(--cr-tekst);
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
}
.menu nav { flex: 1; }
.menu ul { margin-bottom: 24px; }
.menu li a {
  display: flex; align-items: center; justify-content: space-between; min-height: 56px;
  border-bottom: 1px solid var(--cr-linia-2);
  font-family: var(--cr-f-tresc); font-weight: 600; font-size: 1.25rem; color: var(--cr-marka); text-decoration: none;
}
.menu li a .i { color: var(--cr-marka); }
.menu .btn { width: 100%; }
html.menu-otwarte { overflow: hidden; }
@media (min-width: 1200px) { .menu { display: none !important; } }

/* pasek dolny telefonu (< 1024 px): CTA; jeden przyklejony element naraz (daplo .pasek-dolny) */
.pasek-dol {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  padding: 8px 20px calc(8px + env(safe-area-inset-bottom));
  background: var(--cr-tlo); box-shadow: var(--cr-cien);
  transform: translateY(110%); visibility: hidden;
  transition: transform 150ms var(--cr-krzywa), visibility 0s linear 150ms;
}
.pasek-dol .btn { width: 100%; min-height: 52px; }
.pasek-dol--widoczny { transform: none; visibility: visible; transition: transform var(--cr-ruch-stan) var(--cr-krzywa), visibility 0s; }
@media (min-width: 1024px) { .pasek-dol { display: none; } }

/* ---------- 21. Stopka ---------- */
.stopka { background: var(--cr-tlo); padding-block: 48px 40px; font-size: 1rem; }
.stopka > .kontener { padding-top: 40px; border-top: 1px solid var(--cr-linia-2); }
.stopka__siatka { display: grid; gap: 32px; }
@media (min-width: 768px) { .stopka__siatka { grid-template-columns: 1.4fr 1fr 1fr; } }
.stopka__logo img { width: auto; height: 28px; }
.stopka__nagl { font-family: var(--cr-f-nagl); font-weight: 600; font-size: 1.0625rem; color: var(--cr-marka); margin-bottom: 8px; }
.stopka ul li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cr-tekst); }
.stopka__opis { margin-top: 16px; max-width: 36ch; }
.stopka__prawne { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--cr-linia-2); font-size: .875rem; line-height: 1.45; color: var(--cr-tekst-2); }
@media (max-width: 1023.98px) { .stopka { padding-bottom: calc(40px + var(--cr-pasek-h)); } }

/* ---------- 22. Ruch wejścia (daplo.css §12): 350 ms, 12 px, raz; grupy co 120 ms ---------- */
html.js .wej:not(.jest) { opacity: 0; transform: translateY(12px); }
html.js .wej { transition: opacity var(--cr-ruch) var(--cr-krzywa) var(--d, 0ms), transform var(--cr-ruch) var(--cr-krzywa) var(--d, 0ms); }
@media (prefers-reduced-motion: reduce) { html.js .wej:not(.jest) { opacity: 1; transform: none; } }
@media (forced-colors: active) { .zn { border-bottom-color: CanvasText; } .laczniki path, .laczniki circle { stroke: CanvasText; } }

/* ---------- 23. Zdjęcia i portrety ---------- */
.foto { margin: 0; }
.foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--cr-r-m); background: var(--cr-papier-2); }
.portret { border-radius: 50%; object-fit: cover; background: var(--cr-papier-2); }

/* ---------- Numer do skopiowania (04.10) ----------
   Przycisk [data-kopiuj] (obsługa w crew.js): wygląda jak tekst lub link, obok małe „kopiuj” → „skopiowano”. Kliknięcie tylko kopiuje. */
.kopiuj { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: copy; text-align: left; }
.kopiuj__stan { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; background: var(--cr-papier-2); font-family: var(--cr-f-tresc); font-size: .75rem; font-weight: 600; letter-spacing: .02em; color: var(--cr-tekst-2); transition: background-color var(--cr-ruch) var(--cr-krzywa), color var(--cr-ruch) var(--cr-krzywa); }
.kopiuj--ok .kopiuj__stan { background: var(--cr-st-zatw-tlo); color: var(--cr-st-zatw); }
.kopiuj--tekst { font-weight: 600; color: var(--cr-marka); }
.kopiuj--tekst .tnum { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1.5px; }
.kopiuj--stopka { min-height: 44px; font-weight: 400; color: var(--cr-tekst); }
.kopiuj--stopka .tnum { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .kopiuj:hover .kopiuj__stan { background: var(--cr-marka-tint); color: var(--cr-marka); } .kopiuj--ok:hover .kopiuj__stan { background: var(--cr-st-zatw-tlo); color: var(--cr-st-zatw); } }
@media (prefers-reduced-motion: reduce) { .kopiuj__stan { transition: none; } }

/* ---------- 23. Kraje w menu, panelu i stopce (04.10) ---------- */
.flaga { display: inline-block; flex: none; width: 24px; height: 16px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.flaga--se { background: linear-gradient(#FECC00, #FECC00) 7px 0 / 4px 100% no-repeat, linear-gradient(#FECC00, #FECC00) 0 6px / 100% 4px no-repeat, #006AA7; }
.flaga--no { background: linear-gradient(#00205B, #00205B) 7.5px 0 / 3px 100% no-repeat, linear-gradient(#00205B, #00205B) 0 6.5px / 100% 3px no-repeat, linear-gradient(#fff, #fff) 6px 0 / 6px 100% no-repeat, linear-gradient(#fff, #fff) 0 5px / 100% 6px no-repeat, #BA0C2F; }
.flaga--de { background: linear-gradient(#000 0 33.3%, #DD0000 33.3% 66.6%, #FFCE00 66.6%); }
.flaga--nl { background: linear-gradient(#AE1C28 0 33.3%, #fff 33.3% 66.6%, #21468B 66.6%); }

/* przycisk „Kraje” w pasku: jak link nawigacji */
.nagl__kraje { position: relative; }
.nagl__kraje-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 10px 0 12px; border: 0; border-radius: var(--cr-r-s);
  background: transparent; font: inherit; font-size: 1.0625rem; font-weight: 500; line-height: 1.2; color: var(--cr-biel); cursor: pointer; white-space: nowrap;
}
.nagl__kraje-btn .i { width: 18px; height: 18px; transition: transform var(--cr-ruch-szybki); }
.nagl__kraje-btn[aria-expanded="true"] { background: var(--cr-glebia-2); }
.nagl__kraje-btn[aria-expanded="true"] .i { transform: rotate(180deg); }
.nagl__kraje-btn[aria-current]::after { content: ""; position: absolute; left: 12px; right: 30px; bottom: 6px; height: 2px; background: var(--cr-biel); }
@media (hover: hover) and (pointer: fine) { .nagl__kraje-btn:hover { background: var(--cr-glebia-2); } }
@media (min-width: 1200px) and (max-width: 1319px) { .nagl__kraje-btn { padding: 0 8px 0 10px; font-size: 1rem; } }

/* mega-menu krajów (v2, 04.10): ciemny panel jak „Dla kogo” na daplo.agency; lista po lewej, podgląd kraju po prawej, pasek rozmowy na dole */
.nagl__panel { position: absolute; top: calc(100% + 8px); left: -150px; width: 760px; border-radius: var(--cr-r-m); background: var(--cr-glebia); color: var(--cr-biel); box-shadow: 0 28px 56px -18px rgba(4, 10, 20, .7), 0 0 0 1px var(--cr-obrys-ciemne); overflow: hidden; }
.nagl__panel[hidden] { display: none; }
.nagl__panel::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }   /* mostek: kursor przechodzi z przycisku na panel bez zamknięcia */
.mega { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 16px; }
.nagl__nav .mega__lista { display: grid; gap: 4px; align-content: start; }
.nagl__nav .mega__lista a { display: flex; align-items: flex-start; gap: 14px; min-height: 0; padding: 14px 14px; border-radius: 12px; color: var(--cr-biel); white-space: normal; }
.nagl__nav .mega__lista a::after { display: none; }
.mega__lista a > span:last-child { display: grid; gap: 4px; }
.mega__lista b { font-family: var(--cr-f-nagl); font-size: 1.1875rem; font-weight: 600; line-height: 1.15; }
.mega__lista small { font-size: .875rem; line-height: 1.4; color: var(--cr-na-glebi-2); }
.mega__lista .flaga { width: 28px; height: 19px; margin-top: 2px; }
.nagl__nav .mega__lista a.jest, .nagl__nav .mega__lista a:focus-visible { background: var(--cr-glebia-2); }
.nagl__nav .mega__lista a[aria-current] b { text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--cr-sygnal-ciemne); }
.mega__podglad { display: grid; padding: 18px; border-radius: 14px; background: var(--cr-glebia-2); border: 1px solid var(--cr-obrys-ciemne); }
.mega__pod { display: grid; gap: 14px; align-content: start; justify-items: start; }
.mega__pod { grid-area: 1 / 1; }
.mega__pod[data-ukryty] { visibility: hidden; }   /* (04.10 poprawka) wszystkie podglądy w jednej komórce: stała wysokość i szerokość, bez skoków przy zmianie kraju */
.mega__okno { width: 100%; border-radius: 12px; background: var(--cr-tlo); color: var(--cr-tekst); overflow: hidden; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .6); }
.mega__bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--cr-linia-2); }
.mega__kropki { display: flex; gap: 5px; }
.mega__kropki i { width: 8px; height: 8px; border-radius: 50%; background: var(--cr-szkielet); }
.mega__adres { flex: 1; padding: 3px 10px; border-radius: 6px; background: var(--cr-papier); font-size: .75rem; color: var(--cr-tekst-2); text-align: center; }
.mega__ekran { display: grid; gap: 10px; padding: 14px; }
.mega__os { display: flex; align-items: center; gap: 10px; }
.mega__av { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--cr-linia); font-family: var(--cr-f-nagl); font-size: .8125rem; font-weight: 700; color: var(--cr-marka); }
.mega__nazw { padding: 2px 6px; border-radius: 4px; background: var(--cr-pole-tint); border-bottom: 2px solid var(--cr-pole-krawedz); font-family: var(--cr-f-nagl); font-size: .9375rem; font-weight: 600; }
.mega__chipy { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }   /* (04.10) tagi w jednej kolumnie: ta sama wysokość okienka dla każdego kraju */
.mega__chipy span { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--cr-linia); font-size: .75rem; font-weight: 600; color: var(--cr-tekst); }
.mega__szk { display: block; height: 7px; border-radius: 4px; background: var(--cr-linia-2); }
.mega__szk--k { width: 55%; }
.mega__pig { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: var(--cr-tlo); font-family: var(--cr-f-nagl); font-size: .9375rem; font-weight: 600; color: var(--cr-marka); }
.mega__pig .flaga { width: 20px; height: 13px; }
.mega__t { font-family: var(--cr-f-nagl); font-size: 1.1875rem; font-weight: 600; line-height: 1.25; color: var(--cr-biel); }
.nagl__nav .mega__link { display: inline-flex; align-items: center; gap: 8px; min-height: 0; padding: 0; font-size: .9375rem; font-weight: 600; color: var(--cr-biel); text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1.5px; }
.nagl__nav .mega__link::after { display: none; }
.mega__link .i { width: 16px; height: 16px; }
.nagl__nav .mega__dol { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px; border-top: 1px solid var(--cr-obrys-ciemne); border-radius: 0; font-size: .9375rem; font-weight: 600; color: var(--cr-biel); }
.nagl__nav .mega__dol::after { display: none; }
.mega__dol .i { width: 18px; height: 18px; color: var(--cr-sygnal-ciemne); }
@media (hover: hover) and (pointer: fine) {
  .nagl__nav .mega__lista a:hover { background: var(--cr-glebia-2); }
  .nagl__nav .mega__dol:hover { background: var(--cr-glebia-2); }
}
@media (min-width: 1200px) and (max-width: 1319px) { .nagl__panel { left: -110px; } }

/* menu mobilne: grupa krajów */
.menu__nagl { margin: 4px 0 8px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cr-tekst-2); }
.menu .menu__kraje { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.menu .menu__kraje a { display: flex; align-items: center; gap: 10px; justify-content: flex-start; min-height: 52px; padding: 8px 12px; border: 1px solid var(--cr-linia); border-radius: 10px; }
.menu .menu__kraje b { font-family: var(--cr-f-nagl); font-weight: 600; font-size: 1.0625rem; color: var(--cr-marka); }
.menu .menu__kraje a[aria-current] { border-color: var(--cr-marka); background: var(--cr-marka-tint); }

/* stopka: kolumna krajów */
@media (min-width: 768px) { .stopka__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .stopka__siatka { grid-template-columns: 1.3fr 1fr 1.1fr 1fr; } }
.stopka .stopka__kraje a { gap: 10px; }
.stopka .stopka__kraje a[aria-current] { font-weight: 600; color: var(--cr-marka); }

/* ---------- 24. Przejścia i animacje jak na daplo.agency (04.10) ---------- */
/* przejścia między podstronami (View Transitions API: Chrome, Edge, Safari 18+; inne przechodzą bez animacji):
   pasek stoi, treść krótko gaśnie i wchodzi o kilka pikseli od dołu */
@view-transition { navigation: auto; }
.nagl { view-transition-name: naglowek; }
::view-transition-group(naglowek) { animation: none; }
::view-transition-old(naglowek) { display: none; }
::view-transition-new(naglowek) { animation: none; }
::view-transition-old(root) { animation: vtWyj 140ms cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vtWej 300ms cubic-bezier(.2, .8, .2, 1) 140ms both; }
@keyframes vtWyj { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vtWej { from { opacity: 0; transform: translateY(10px); } }

/* mega-menu: otwieranie 200 ms (opacity + 4 px), przyciemnione tło pod paskiem */
html.js .nagl__panel { display: block; opacity: 0; visibility: hidden; transform: translateY(-4px); pointer-events: none;
  transition: opacity 200ms var(--cr-krzywa), transform 200ms var(--cr-krzywa), visibility 0s linear 200ms; }
html.js .nagl__panel.jest { opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity 200ms var(--cr-krzywa), transform 200ms var(--cr-krzywa); }
.mega-tlo { position: fixed; inset: var(--cr-nagl-h) 0 0 0; z-index: 49; background: rgba(8, 14, 26, .28); opacity: 0; pointer-events: none; transition: opacity 200ms var(--cr-krzywa); }
.mega-tlo.jest { opacity: 1; }
@media (max-width: 1199.98px) { .mega-tlo { display: none; } }

/* przesuwany znacznik aktywnego kraju po lewej */
.mega__lista { position: relative; }
.mega__znacznik { position: absolute; left: 0; right: 0; top: 0; height: var(--mz-h, 0); transform: translateY(var(--mz-y, 0)); border-radius: 12px; background: var(--cr-glebia-2);
  transition: transform 280ms cubic-bezier(.2, .8, .2, 1), height 280ms cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.nagl__nav .mega__lista li { position: relative; z-index: 1; }
.nagl__nav .mega__lista a.jest, .nagl__nav .mega__lista a:hover { background: transparent; }
.mega__lista .flaga { transition: transform 280ms cubic-bezier(.2, .8, .2, 1); }
.mega__lista a.jest .flaga { transform: scale(1.12); }

/* podgląd kraju (v3, 04.10, poprawka glitcha): ramka okienka zawsze biała i nieruchoma, stary podgląd znika od razu,
   nowa treść wchodzi w ok. 0,2 s (przesunięcie 8 px zgodnie z kierunkiem, bez rozmycia) */
.mega__podglad { position: relative; }
.mega__pod.wchodzi > :not(.mega__okno), .mega__pod.wchodzi .mega__ekran > * { animation: mpWej 220ms cubic-bezier(.2, .8, .2, 1) both; }
.mega__pod.wchodzi .mega__ekran > :nth-child(2) { animation-delay: 25ms; }
.mega__pod.wchodzi .mega__ekran > :nth-child(n+3) { animation-delay: 45ms; }
.mega__pod.wchodzi > :nth-child(3) { animation-delay: 30ms; }
.mega__pod.wchodzi > :nth-child(4) { animation-delay: 50ms; }
@keyframes mpWej { from { opacity: 0; transform: translateY(calc(var(--kier, 1) * 8px)); } to { opacity: 1; transform: none; } }
@keyframes mpWyj { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(calc(var(--kier, 1) * -10px)); } }
@keyframes mpZnika { from { opacity: 1; } to { opacity: 0; } }
@keyframes mpPojaw { from { opacity: .6; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html.js .nagl__panel, html.js .nagl__panel.jest, .mega-tlo, .mega__znacznik { transition: none; }
  .mega__pod.wchodzi > :not(.mega__okno), .mega__pod.wchodzi .mega__ekran > * { animation: none; }
}