/* HVMBAK ZAKRES — sekcja 2 landingu („Ten sam zakres kompetencji”) w warsztacie.
   Część 1: reguły przeniesione 1:1 z hvmbak-landing/index.html (stan z 05.10.2026), żeby sekcja wyglądała tu tak samo jak na stronie.
   Część 2: to, co dochodzi w warsztacie (płótno szkła, tryb okna, dopisek). Przy przenoszeniu na landing bierze się tylko część 2. */

/* ——— CZĘŚĆ 1: z landingu ——— */
:root{
  --black:#0d0d0d; --orange:#C2410C; --baby:#8CC7EE; --bordo:#7A1F2B; --papier:#eceef0;
  --display:'HVMBAK Pro','Archivo',sans-serif; --text-wdth:75%;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--papier);color:var(--black);font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);overflow-x:clip}
.tlo{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, #f7f8f9 0%, #eceef0 60%, #e2e5e8 100%)}

.krawedz{position:absolute;left:0;right:0;top:0;height:8px;z-index:3;pointer-events:none}
.krawedz::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:16px;
  background:linear-gradient(to top, rgba(18,22,28,.16), rgba(18,22,28,.05) 40%, rgba(18,22,28,0));
  border-bottom:1px solid rgba(18,22,28,.10)}
.krawedz .scianka{position:absolute;inset:0;
  -webkit-backdrop-filter:blur(2px) saturate(1.2);backdrop-filter:blur(2px) saturate(1.2);
  background:linear-gradient(to bottom,
    rgba(255,255,255,.95) 0, rgba(255,255,255,.75) 18%,
    rgba(150,165,180,.22) 40%, rgba(120,135,150,.26) 62%,
    rgba(255,255,255,.55) 84%, rgba(255,255,255,.35) 100%);
  border-bottom:1px solid rgba(18,22,28,.20)}
.krawedz .refleks{position:absolute;left:0;right:0;top:0;height:1.5px;
  background:linear-gradient(90deg, rgba(255,255,255,.5), rgba(255,255,255,1) 40%, rgba(255,255,255,1) 60%, rgba(255,255,255,.5))}
.krawedz .tor{position:absolute;left:0;right:0;top:0;height:2.5px;overflow:hidden}
.krawedz .blysk{position:absolute;top:0;height:2.5px;width:22%;left:-22%;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1) 50%, rgba(255,255,255,0));
  animation:blysk 16s cubic-bezier(.45,.05,.55,.95) infinite}
@keyframes blysk{0%{left:-22%;opacity:0} 8%{opacity:1} 92%{opacity:1} 100%{left:100%;opacity:0}}
.krawedz::after{content:'';position:absolute;left:0;right:0;top:100%;height:80px;
  background:linear-gradient(to bottom, rgba(255,255,255,.40), rgba(255,255,255,.14) 35%, rgba(255,255,255,0))}
@media(prefers-reduced-motion:reduce){ .krawedz .blysk{animation:none;opacity:0} }

.szyba{position:relative;z-index:2;padding-block:calc(var(--vh,1svh)*16) calc(var(--vh,1svh)*16);padding-inline:5vw}
.podzial{position:relative;max-width:1180px;margin:0 auto;text-align:center;isolation:isolate;
  --szyna:28px;
  --pad:48px}
#pdzSvg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
#pdzSvg path{fill:none;stroke:var(--bordo);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter}
#pdzSvg path.strzala{stroke:var(--bordo);stroke-width:2;stroke-linecap:square}
#pdzSvg path.grot{stroke:var(--bordo);stroke-width:2;stroke-linecap:square;opacity:0;transition:opacity .25s}
#pdzSvg path.grot.wid{opacity:1}
.pdz-h{margin:0;font-family:var(--display);font-weight:900;font-kerning:normal;text-transform:uppercase;line-height:1.08;letter-spacing:0;color:var(--black)}
.pdz-h .it{font-style:italic}
.pdz-glowny{font-size:clamp(30px,4.4vw,62px)}
.pdz-glowny .akc{color:var(--bordo)}
.pdz-h br.tel{display:none}
.pdz-rozejscie{height:clamp(120px,12vw,170px)}
.tylko-t{display:none}
.pdz-zejscie{height:clamp(200px,19vw,280px)}

.szklo{position:relative;z-index:1;isolation:isolate;border-radius:0;--mx:70%;--my:18%;
  background:rgba(255,255,255,.16);border:1px solid rgba(13,13,13,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(13,13,13,.05),
    0 1px 2px rgba(20,28,36,.08),0 18px 36px -24px rgba(20,28,36,.22),0 50px 80px -48px rgba(20,28,36,.30)}
.szklo>i{position:absolute;inset:0;pointer-events:none;border-radius:0;display:block}
.szklo .optyka{z-index:-3;-webkit-backdrop-filter:blur(2.5px) saturate(1.06);backdrop-filter:blur(2.5px) saturate(1.06)}
.szklo .masa{z-index:-2;background:
  linear-gradient(155deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.18) 38%,rgba(255,255,255,0) 58%,rgba(40,50,60,.09) 100%),
  radial-gradient(120% 80% at 0% 0%,rgba(255,255,255,.40),rgba(255,255,255,0) 60%)}
.szklo .swiatlo{z-index:-1;background:
  radial-gradient(ellipse 54% 44% at var(--mx) var(--my),rgba(255,255,255,.30),rgba(255,255,255,0) 72%),
  linear-gradient(calc(100deg + var(--kat,0deg)),rgba(255,255,255,0) 40%,rgba(255,255,255,.16) 49%,rgba(255,255,255,0) 58%)}
.szklo .tresc{position:relative;z-index:1}
.szklo .pdz-h{text-shadow:0 0 14px rgba(255,255,255,.75),0 0 3px rgba(255,255,255,.6)}

.pdz-galezie{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(56px,7vw,100px)}
.pdz-kol .tresc{padding:var(--pad) var(--pad) calc(var(--pad) + 4px)}
.pdz-kol.l{text-align:left} .pdz-kol.l .tresc{padding-left:calc(var(--szyna) + 36px)}
.pdz-kol.p{text-align:right} .pdz-kol.p .tresc{padding-right:calc(var(--szyna) + 36px)}
.pdz-kol h3{font-size:clamp(24px,2.7vw,38px)}
.pdz-kol ul{list-style:none;margin:clamp(26px,2.6vw,38px) 0 0;padding:0;
  font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-weight:500;font-size:clamp(15px,1.25vw,18px);
  letter-spacing:.03em;text-transform:uppercase;line-height:1.3;color:rgba(13,13,13,.86);text-shadow:0 0 10px rgba(255,255,255,.7)}
.pdz-kol li{display:flex;align-items:center;gap:12px;white-space:nowrap}
.pdz-kol li+li{margin-top:clamp(16px,1.7vw,24px)}
.pdz-kol li::before{content:'';flex:none;width:11px;height:2px;background:var(--black)}
.pdz-kol.p li{flex-direction:row-reverse}

.pdz-teza{font-size:clamp(24px,3.1vw,44px)}
.pdz-teza .akc{color:var(--bordo)}
.pdz-h br.dsk{display:inline}

.pdz-js .podzial [data-r]{opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.pdz-js .podzial [data-r].wid{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){ .pdz-js .podzial [data-r]{transition-duration:.01s!important;transition-delay:0s!important} }

@media(max-width:820px){
  .szyba{padding-block:calc(var(--vh,1svh)*12) calc(var(--vh,1svh)*12);padding-inline:18px}
  .podzial{--szyna:18px;--pad:22px;--mij:36px}
  .pdz-glowny{font-size:calc(7.9vw - 3.4px)}
  .pdz-h br.tel{display:inline}
  .pdz-rozejscie{height:104px}
  .pdz-zejscie{height:200px}
  .pdz-teza{font-size:calc(5.9vw - 1px)}
  .pdz-h br.dsk{display:none}
  .tylko-d{display:none}.tylko-t{display:inline}
  .pdz-galezie{display:block}
  .pdz-kol{width:calc(100% - var(--mij))}
  .pdz-kol.p{margin:40px 0 0 auto}
  .pdz-kol .tresc{padding:30px var(--pad) 32px}
  .pdz-kol.l .tresc{padding-left:calc(var(--szyna) + 24px)}
  .pdz-kol.p .tresc{padding-right:calc(var(--szyna) + 24px)}
  .pdz-kol h3{font-size:calc(6.4vw - 3px)}
  .pdz-kol ul{margin-top:24px;font-size:13.5px;letter-spacing:.02em}
  .pdz-kol li{gap:8px}
  .pdz-kol li::before{width:9px}
  .pdz-kol li+li{margin-top:15px}
}

/* ——— CZĘŚĆ 2: warsztat ——— */
/* płótno szkła: w dokumencie, pod treścią sekcji; wysokość ustawia silnik (od góry sekcji do końca szkła) */
#szron{position:absolute;left:0;top:0;z-index:0;display:block;pointer-events:none}
.podzial{z-index:1}

/* kafelek jako CZYSTE OKNO: szkło CSS znika, okno (biel, krawędź, cień wnęki) rysuje płótno; wymiary bez zmian (obrys zostaje przezroczysty) */
html[data-kafel="okno"] .szklo{background:none;border-color:transparent;box-shadow:none}
html[data-kafel="okno"] .szklo>i{display:none}
html[data-kafel="okno"] .szklo .pdz-h,html[data-kafel="okno"] .pdz-kol ul,html[data-kafel="okno"] .pdz-dop p{text-shadow:none}   /* poświata pod tekstem była pod szkło CSS; na czystym oknie robi jaśniejsze plamy */
html[data-km="0"] #pdzSvg path.szyna{display:none}
html[data-kafel="okno"] #pdzSvg path.szyna{clip-path:url(#pdzPoza)}   /* szyna dochodzi do krawędzi okna i wychodzi pod nim, przez środek nie biegnie */

/* dopisek „co to zmienia”: jedno zdanie pod listą, pod włosową kreską; w prawym kafelku też od lewej, żeby czytało się normalnie */
.pdz-dop{display:none;margin-top:clamp(24px,2.4vw,34px);padding-top:clamp(18px,1.8vw,24px);border-top:1px solid rgba(13,13,13,.18);text-align:left}
html[data-dop="1"] .pdz-dop,html[data-dop="2"] .pdz-dop{display:block}
.pdz-dop .et{display:none;margin-bottom:11px;font-family:'Inter',sans-serif;font-stretch:normal;font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bordo)}
html[data-dop="2"] .pdz-dop .et{display:block}
.pdz-dop p{margin:0;font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-weight:500;font-size:clamp(15.5px,1.3vw,19px);line-height:1.42;
  color:rgba(13,13,13,.84);text-wrap:pretty;outline:none;text-shadow:0 0 10px rgba(255,255,255,.7)}
.pdz-dop p:focus{box-shadow:0 0 0 1px rgba(122,31,43,.35),0 0 0 7px rgba(122,31,43,.05)}
@media(max-width:820px){
  .pdz-dop{margin-top:22px;padding-top:16px}
  .pdz-dop p{font-size:14.5px;line-height:1.4}
}

/* obudowa strony warsztatu: pas papieru nad sekcją (koniec hero) i pod nią */
.przed{height:calc(var(--vh,1svh)*20)}
.po{height:calc(var(--vh,1svh)*10)}