/* HVMBAK LIQUID — warstwa szkła i przełączniki wyglądu (24.09.2026) */

/* płótno pod całą stroną, nad szarym .tlo (z −2); na ekranach dotykowych stała wysokość 100lvh,
   żeby chowanie pasków przeglądarki nie przebudowywało buforów (ta sama pułapka co gradient landingu) */
#liquid{position:fixed;left:0;top:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block}
@media(pointer:coarse){#liquid{height:100lvh}}

/* gradient z landingu tylko w wariancie „Obecne” */
.barwa{display:none}
html[data-tlo=obecne] .barwa{display:block}

/* ——— ścieżka Updates: szkło rysuje płótno, w DOM zostaje sam tekst ——— */
html.liquid .rozwoj .szklo{background:none;border-color:transparent;box-shadow:none}
html.liquid .rozwoj .szklo>i{display:none}
html.liquid .rozwoj .szklo .pdz-h{text-shadow:none}
html.liquid .rozwoj-linie path{stroke:transparent}          /* kreski też liczy płótno — pod szkłem są rozmyte */
html.liquid .rozwoj-karta h2{color:#0d0d0d}
html.liquid .rozwoj-karta p{color:rgba(13,13,13,.78)}
html.liquid[data-tekst=bialy] .rozwoj-karta h2{color:#fff}
html.liquid[data-tekst=bialy] .rozwoj-karta p{color:rgba(255,255,255,.9)}

/* ——— sekcja 2: to samo szkło, ale czyste (nic pod spodem), w CSS — pod taflami biegną szyny SVG ——— */
html[data-gora=nowe] .szyba .szklo{
  background:linear-gradient(162deg,rgba(255,255,255,.40) 0%,rgba(255,255,255,.16) 46%,rgba(255,255,255,.24) 100%);
  border:0;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.72),
    inset 0 1px 0 rgba(255,255,255,.95),
    0 0 0 1px rgba(36,40,46,.055),
    0 10px 22px -16px rgba(30,34,40,.16),
    0 44px 70px -48px rgba(30,34,40,.30)}
html[data-gora=nowe] .szyba .szklo .optyka{-webkit-backdrop-filter:blur(9px) saturate(1.12);backdrop-filter:blur(9px) saturate(1.12)}
html[data-gora=nowe] .szyba .szklo .masa{background:linear-gradient(128deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,0) 42%)}
html[data-gora=nowe] .szyba .szklo .swiatlo{background:radial-gradient(ellipse 60% 52% at var(--mx) var(--my),rgba(255,255,255,.2),rgba(255,255,255,0) 72%)}
html[data-gora=nowe] .szyba .szklo .pdz-h,html[data-gora=nowe] .szyba .pdz-kol ul{text-shadow:none}

/* ——— nagłówek narzędzia (zamiast hero) ——— */
.lq-start{position:relative;z-index:3;min-height:calc(var(--vh,1svh)*34);padding:28px 5vw 0;display:flex;flex-direction:column;gap:18px}
.lq-start img{height:20.7px;width:auto;align-self:flex-start}
.lq-start p{margin:auto 0 0;max-width:44ch;font-family:'Archivo',sans-serif;font-stretch:75%;font-size:clamp(15px,1.25vw,18px);line-height:1.5;color:rgba(13,13,13,.72)}
.lq-start p span{font-family:var(--display);font-weight:900;text-transform:uppercase;color:var(--black);letter-spacing:0}
.lq-skok{align-self:flex-start;margin-bottom:calc(var(--vh,1svh)*4);display:inline-flex;gap:10px;align-items:center;
  font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--black);
  padding:12px 16px;border:1px solid rgba(13,13,13,.2)}
.lq-skok i{font-style:normal}
.lq-skok:hover{background:rgba(13,13,13,.05)}
@media(max-width:820px){.lq-start{padding:18px 18px 0}.lq-start img{height:17px}}

#liquidZapas{height:0}