/* SEKCJA 2 PO REFORMIE (2026-10-10; wybór Kuby z warsztatu ~/Desktop/strony/HVMBAK-PODZIAL, https://hvmbak-podzial.pages.dev).
   Nakładka na style sekcji z index.html: tam zostaje układ, tu jest to, co Kuba zmienił. Jego słowa (10.10.2026): ziarno szronu „nie wygląda mi dobrze…
   gryzie się, kiedy się wchodzi z hero”, nagłówek „za duży”, „zakres” i „sama” nie pochylone, kafelek Jobsa „biała nudna rzecz, kiedy pod nim nic nie ma”.
   Telefon ustawił sam w narzędziu („ustawiłem idealnie”); komputer: „może się różnić tylko tym, że nagłówek AI zmieniło to… ma zostać w HVMBAK Pro”,
   tytuł „bez kreski” i „na komputerze może być trochę większy”.
   Ten plik zapisuje tools/na-landing.mjs z warsztatu ze stanu: k=nowe&kjl=240&kp=wlasny&kcp=bd6161&kjp=195&wy=lakier&bl=4.5&muT=2b&sblT=2.75&sci=19&sro=1
   Wyglądu nie stroić tutaj, tylko w warsztacie. */

/* TYTUŁ „Ten sam zakres kompetencji” = etykieta (Inter 600, wersaliki, jak „Zapis kursu” przy płycie), bez kreski, w jednej linii */
.pdz-h.pdz-glowny{font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;font-stretch:normal;font-weight:600;
  font-size:15.75px;letter-spacing:.08em;text-transform:uppercase;line-height:1;color:rgba(13,13,13,.62)}
.pdz-h.pdz-glowny br{display:none}
.pdz-h.pdz-glowny .akc{color:inherit}
/* słowa z akcentem stoją prosto */
.pdz-h .it{font-style:normal}

/* KAFELKI = tafla z src/tafla.css (klasa „tafla” w index.html); szkło rozmywa to, co pod nim: szyny klamry, strzałkę i groty kursorów.
   ZIARNO: przepis tafli miesza je soft-light, a w Chrome element z takim dzieckiem staje się osobną grupą i jego backdrop-filter przestaje widzieć
   to, co pod spodem (zmierzone 10.10.2026). Tam, gdzie pod szkłem coś leży, ziarno miesza się zwyczajnie z kryciem × 0,66: ta sama średnia
   jasność i ten sam rozrzut co soft-light 16 % (242,4 / 1,8 kontra 242,5 / 1,7). */
.pdz-kol.szklo.tafla .optyka{-webkit-backdrop-filter:blur(7px) saturate(1.06);backdrop-filter:blur(7px) saturate(1.06)}
.pdz-kol.szklo.tafla::after,#pdzCytat.szklo.tafla::after{mix-blend-mode:normal;opacity:calc(var(--tf-ziarno)*.66)}

/* PŁÓTNO KURSORÓW w .podzial: nad kreskami klamry, pod kafelkami; położenie pudełka ustawia src/zakres.js */
.szron-pudlo{position:absolute;height:0;z-index:0;pointer-events:none}

/* CYTAT: szkło rozmywa groty strzałek; strzałki rysuje src/strzalki.js w pasie na całą szerokość okna pod taflą */
#pdzCytat .optyka{-webkit-backdrop-filter:blur(4.5px) saturate(1.06);backdrop-filter:blur(4.5px) saturate(1.06)}
.cy-strz{position:absolute;left:50%;width:100vw;translate:-50% 0;z-index:0;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .6s ease .1s}
.pdz-cytat.wid+.cy-strz,html:not(.pdz-js) .cy-strz{opacity:1}
.cy-strz svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cy-strz path{fill:var(--bordo);stroke:none}
@media(prefers-reduced-motion:reduce){ .cy-strz{transition-duration:.01s;transition-delay:0s} }
/* strzałki 3D: dwa nieruchome obrazy (płótna 2D z vendor/zakres/strzalki3d.js) w tym samym pasie; wjazd = przesunięcie warstwy */
.cy-b{position:absolute;pointer-events:none;will-change:transform}
.cy-b canvas{display:block;width:100%;height:100%}
/* ZDANIE POD CYTATEM (Kuba 10.10.2026: „mamy miejsce na szerokość… słowo technologii nad słowem technologia i to się gryzie”): łamie się tylko
   tam, gdzie stoi <br class="k"> (komputer) albo <br class="t"> (telefon); odstępy .k / .t zastępują spację w miejscu, gdzie łamie się drugie urządzenie.
   Bez white-space:nowrap: na oknie węższym niż linia zdanie po prostu złamie się raz więcej, zamiast wyjść poza kolumnę. */
.pdz-most{font-size:calc(clamp(14px,1.25vw,18px)*0.94);max-width:none;text-wrap:initial}
.pdz-most br.t,.pdz-most span.t{display:none}

@media(max-width:820px){
  .pdz-h.pdz-glowny{font-size:11.12px;letter-spacing:.06em}
  /* „AI zmieniło to…” na telefonie krojem z CTA (Archivo 75 %, waga 400, zwykłe litery), bez wymuszonych łamań; na komputerze zostaje HVMBAK Pro */
  .pdz-h.pdz-teza{font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-weight:400;text-transform:none;letter-spacing:-.004em;
    font-size:28.34px;line-height:1.18;max-width:13em;margin-inline:auto;text-wrap:balance}
  .pdz-h.pdz-teza br{display:none}
  .pdz-cytat{width:min(100%,300px)}
  .pdz-most{font-size:13px;max-width:none;text-wrap:initial}
  .pdz-most br.k,.pdz-most span.k{display:none} .pdz-most br.t,.pdz-most span.t{display:inline}
}