/* DOŁĄCZ — przyklejony przycisk do oferty (06.10.2026). Prośba Kuby: przycisk przyklejony na środku przy dolnej krawędzi ekranu, szklany,
   z ostrymi rogami, od sekcji 2 do czarnej oferty. Wersję 1 (mleczna biała płytka z niebieskim myślnikiem i czarnym kwadratem) odrzucił:
   „wygląda tanio… samo szkło mi się nie podoba”. Pokazał, o jakie szkło chodzi: przejrzysta tafla, za którą wszystko jest rozmyte,
   „zaśniedziałe, zziarnione”, z cienką krawędzią, do tego „fajna obramóweczka… może jakaś poświata”.
   Dlatego: PRZEJRZYSTE szkło (rozmycie tego, co pod spodem, prawie bez bieli), drobne ZIARNO (dwie warstwy szumu: ciemne i jasne drobiny),
   cienka RAMKA z gradientem, który powoli się obraca, jasna krawędź od środka i POŚWIATA w rogu tafli. Jedna szeroka tafla, napis + strzałka.
   LICZBY SĄ KUBY: dobrał je w podglądzie (https://przycisk.hvmbak-landing.pages.dev/, pasek „Ustaw”; źródła ~/Desktop/strony/HVMBAK-DOSTEP/przycisk/)
   i odesłał linkiem: rozmiar 1,06, rozmycie 9, mleczność 0,05, ziarno 0,20, poświata 0,5, ramka SREBRNA, ruch ramki włączony, napis
   „Dołącz w pre-orderze”. Stroić tam, tu wklejać wynik.
   ZAPAS (Kuba: „ewentualnie kiedyś możemy zmienić na ciepłą zamiast srebrnej”): ramka ciepła = szara → pomarańcz → bordo strony, czyli
   --dl-r1:rgba(13,13,13,.2); --dl-r2:rgba(13,13,13,.12); --dl-r3:#C2410C; --dl-r4:#7A1F2B; --dl-cieply:194,65,12.
   Szkło jest przejrzyste, więc nad czarnymi elementami strony (blok KANONY, czarne tabliczki, teczki) tafla robi się ciemna: napis zmienia
   się wtedy na biały (klasa .ciemno z src/dolacz.js, które patrzy, co leży pod środkiem przycisku).
   Pokazywanie: src/dolacz.js (klasa .wid). Schowany jest poza kolejnością Tab (visibility) i jego ramka wtedy stoi. */
@property --dl-kat{syntax:'<angle>';inherits:false;initial-value:105deg}
.dolacz{--dl-s:1.06;--dl-bok:38px;--dl-mgla:9px;--dl-mleko:.05;--dl-ziarno:.2;--dl-rama:1.5px;--dl-poswiata:.5;--dl-kat:105deg;
  --dl-r1:rgba(13,13,13,.22);--dl-r2:rgba(255,255,255,.7);--dl-r3:rgba(13,13,13,.3);--dl-r4:rgba(255,255,255,.9);--dl-cieply:255,255,255;   /* ramka srebrna */
  position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));z-index:40;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;gap:calc(13px*var(--dl-s));height:calc(52px*var(--dl-s));padding:0 calc(var(--dl-bok)*var(--dl-s));
  transform:translate(-50%,16px);opacity:0;visibility:hidden;pointer-events:none;
  color:var(--black);text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;font-stretch:normal;font-weight:600;font-size:calc(12.5px*var(--dl-s));line-height:1;
  letter-spacing:.14em;text-transform:uppercase;
  background:radial-gradient(85% 170% at 100% 125%,rgba(var(--dl-cieply),calc(.34*var(--dl-poswiata))),rgba(var(--dl-cieply),0) 62%),
    linear-gradient(180deg,rgba(255,255,255,calc(var(--dl-mleko) + .08)),rgba(255,255,255,var(--dl-mleko)));
  -webkit-backdrop-filter:blur(var(--dl-mgla)) saturate(1.6) contrast(.9) brightness(1.06);backdrop-filter:blur(var(--dl-mgla)) saturate(1.6) contrast(.9) brightness(1.06);
  border:var(--dl-rama) solid transparent;border-image:linear-gradient(var(--dl-kat),var(--dl-r1) 0%,var(--dl-r2) 36%,var(--dl-r3) 70%,var(--dl-r4) 100%) 1;
  box-shadow:0 18px 40px -18px rgba(13,13,13,.5),0 3px 10px rgba(13,13,13,.10),10px 14px 36px -14px rgba(var(--dl-cieply),calc(.7*var(--dl-poswiata)));
  transition:opacity .3s,transform .4s cubic-bezier(.3,.7,.2,1),visibility 0s .4s,color .25s}
.dolacz.wid{transform:translate(-50%,0);opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s;animation:dl-kat 10s linear infinite}   /* ramka obraca się tylko, gdy przycisk widać */
.dolacz.ciemno{color:#fff}
/* ziarno: dwie warstwy drobin z szumu (ciemne i jasne), zwykłe krycie, bez trybów mieszania */
.dolacz::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:var(--dl-ziarno);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='z' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.5 0 0 0 -.6'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23z)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='z' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 1.9 0 0 -.72'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23z)'/%3E%3C/svg%3E")}
/* połysk: jaśniejsza górna połowa tafli i włosowa jasna kreska pod górną krawędzią */
.dolacz::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 50%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.42),inset 0 1px 0 rgba(255,255,255,.5)}
.dolacz-n{position:relative;z-index:1;margin-right:-.14em}          /* bez światła po ostatniej literze */
.dolacz-s{position:relative;z-index:1;flex:none;display:block;width:calc(11px*var(--dl-s));height:calc(11px*var(--dl-s));fill:none;stroke:currentColor;stroke-width:1.4;
  transition:transform .2s}
@keyframes dl-kat{to{--dl-kat:465deg}}
.dolacz:focus-visible{outline:2px solid var(--black);outline-offset:3px}
@media(hover:hover){.dolacz:hover{--dl-poswiata:1} .dolacz:hover .dolacz-s{transform:translateY(2px)}}
@media(min-width:821px){.dolacz{bottom:30px;height:calc(56px*var(--dl-s));font-size:calc(13px*var(--dl-s));padding:0 calc((var(--dl-bok) + 8px)*var(--dl-s))}}
@media(max-width:359px){.dolacz{--dl-bok:22px}}                     /* bardzo wąskie telefony: tafla węższa, żeby nie dotykała krawędzi ekranu */
@media(prefers-reduced-motion:reduce){.dolacz,.dolacz.wid{transform:translate(-50%,0);transition:opacity .2s,visibility 0s .2s,color .2s;animation:none} .dolacz.wid{transition-delay:0s} .dolacz-s{transition:none}}
/* przeglądarka bez rozmycia tła: tafla mleczna, żeby napis się czytał */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.dolacz{--dl-mleko:.82}}