/* Lokamo :: hero (v4 jasne, /b ciemne), zrodlo HTML: assets/v4/hero-g.html.
   1. Naglowek: stala linia + koncowka, ktora zmienia sie slowo po slowie (rozmycie, sprezyna).
   2. Pole "Sprawdz lokal" (glow-cta.css, v4-audyt.css).
   3. Scena: czysty kobaltowy panel (lekki gradient, jedno rozswietlenie, ziarno, dwa luki swiatla),
      z jego gornej krawedzi wychodzi iPhone 15 Pro (71,6 x 147,6 mm), uciety dolem panelu,
      w srodku szesc ekranow audytu fikcyjnego lokalu.
   Ruch tylko transform/opacity (rozmycie fraz: filter na kilku slowach). Scena stoi poza
   widokiem, po pauzie i przy prefers-reduced-motion. Samodzielne tokeny, dziala bez v4.css. */

.hg{
  --hg-ink:#0D0D0F;--hg-t2:#45454B;--hg-steel:#626268;--hg-rot:#2E4BFF;
  --e-wyj:cubic-bezier(.16,1,.3,1);--e-spr:cubic-bezier(.34,1.32,.64,1);
  --tel-w:416px;--wys:72px;--pan-h:464px;--pan-max:1040px;
  position:relative;isolation:isolate;padding:calc(var(--hdr,68px) + 52px) 0 80px;color:var(--hg-ink);text-align:center;overflow-x:clip
}
.hg--ciemne{--hg-ink:#fff;--hg-t2:#C9C9CD;--hg-steel:#A6A6AB;--hg-rot:#93A4FF;background:#0D0D0F}
.hg .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Tlo gornej czesci: chlodna biel, miekka kobaltowa poswiata za polem, statyczne ziarno */
.hg__tlo{position:absolute;inset:0 0 auto;height:min(980px,100%);z-index:-1;pointer-events:none;
  background:radial-gradient(46% 34% at 50% 44%,rgba(46,75,255,.075),rgba(46,75,255,0) 72%),radial-gradient(30% 22% at 50% 10%,rgba(255,255,255,.9),rgba(255,255,255,0))}
.hg__tlo::after{content:"";position:absolute;inset:0;background:url("/assets/v4/ziarno-ciemne.svg") 0 0/200px 200px;opacity:.07;
  -webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent)}
.hg--ciemne .hg__tlo{background:radial-gradient(46% 34% at 50% 44%,rgba(46,75,255,.24),rgba(46,75,255,0) 72%)}
.hg--ciemne .hg__tlo::after{background-image:url("/assets/v4/ziarno.svg");opacity:.1}

.hg__in{display:flex;flex-direction:column;align-items:center}
.hg__kick{display:inline-flex;align-items:center;gap:8px;margin:0 0 26px;padding:7px 14px 7px 11px;border-radius:99px;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(13,13,15,.07),0 1px 2px rgba(13,13,15,.04);font-size:14px;font-weight:520;color:var(--hg-t2);letter-spacing:-.005em}
.hg--ciemne .hg__kick{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.hg__kick svg{width:14px;height:14px;color:var(--hg-ink)}

/* Naglowek. Linia 2: wszystkie frazy w jednej komorce siatki, wiec wysokosc = najwyzsza fraza,
   a kazda fraza jest wysrodkowana sama: zero skoku ukladu i bez animowania szerokosci.
   Bez masek: rozmyte slowa nie sa przycinane (ogonki i kreski polskich liter zostaja). */
.hg__t{margin:0;font-size:clamp(44px,5.9vw,78px);font-weight:600;letter-spacing:-.047em;line-height:1.04;color:var(--hg-ink);font-kerning:normal}
.hg__l1{display:block}
.hg__rot{display:grid;justify-items:center;align-items:center;color:var(--hg-rot);padding-bottom:.06em}
.hg__fr{grid-area:1/1;white-space:nowrap}
.hg__fr:not(.is-on){opacity:0}
.hg__w{display:inline-block;transform-origin:50% 70%}
.hg__lead{margin:22px 0 0;max-width:54ch;font-size:19px;line-height:1.45;color:var(--hg-t2);letter-spacing:-.008em;text-wrap:balance}

.hg .sl{margin:36px auto 0;max-width:680px}
.hg .sl__kroki{justify-content:center}
.hg .sl__drop{text-align:left}


/* ---------- Scena: czysty kobaltowy panel, telefon wychodzi z jego gornej krawedzi ----------
   Wysokosc sceny = wystawanie telefonu + widoczny panel. Dol sceny przycina telefon (clip-path),
   gora i boki zostaja otwarte, wiec rama i cien telefonu nad panelem nie sa ciete. */
.hs{position:relative;margin:56px auto 0}
.hs__scena{position:relative;max-width:var(--pan-max);height:calc(var(--wys) + var(--pan-h));margin:0 auto;clip-path:inset(-140px -40vw 0 -40vw)}
.hs__panel{position:absolute;inset:var(--wys) 0 0;border-radius:36px;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(56% 92% at 90% 0%,rgba(186,202,255,.62),rgba(186,202,255,0) 62%),
    radial-gradient(48% 80% at 4% 100%,rgba(9,18,120,.5),rgba(9,18,120,0) 70%),
    linear-gradient(104deg,#1D36DC 0%,#2B47F7 46%,#4462FF 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 40px 80px -48px rgba(24,44,190,.55)}
/* Dwie pary cienkich lukow swiatla po bokach, wygaszone ku srodkowi (telefon stoi na czystym tle) */
.hs__smugi{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:rgba(225,232,255,.2);stroke-width:1;vector-effect:non-scaling-stroke;
  -webkit-mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.2) 34%,transparent 42%,transparent 58%,rgba(0,0,0,.2) 66%,#000 100%);
  mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.2) 34%,transparent 42%,transparent 58%,rgba(0,0,0,.2) 66%,#000 100%)}
.hs__smugi path{vector-effect:non-scaling-stroke}
.hs__ziarno{position:absolute;inset:0;background:url("/assets/v4/ziarno.svg") 0 0/180px 180px;opacity:.26;mix-blend-mode:soft-light}
/* ---------- Telefon: iPhone 15 Pro, 71,6 x 147,6 mm ---------- */
.tl{--w:var(--tel-w);position:absolute;z-index:2;left:50%;top:0;width:var(--w);height:calc(var(--w) * 2.0615);margin-left:calc(var(--w) / -2);text-align:left;color:#0D0D0F}
.tl::before{content:"";position:absolute;inset:3% 6% 0;border-radius:24%;background:rgba(4,10,70,.5);filter:blur(30px);transform:translateY(4%);z-index:-1}
.tl__rama{position:absolute;inset:0;border-radius:calc(var(--w) * .178);padding:calc(var(--w) * .0105);
  background:linear-gradient(118deg,#B9B9BF 0%,#5D5D63 9%,#2A2A2E 22%,#3E3E43 40%,#1F1F23 58%,#36363B 76%,#77777D 91%,#C2C2C8 100%);
  box-shadow:inset 0 0 0 .6px rgba(255,255,255,.45),inset 0 1.5px 1px rgba(255,255,255,.3),inset 0 -1.5px 1px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.12)}
.tl__szklo{height:100%;border-radius:calc(var(--w) * .1675);padding:calc(var(--w) * .0255);background:#030304;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 0 2px 1px rgba(0,0,0,.9)}
.tl__ekran{--p:calc(100cqw / 393);position:relative;height:100%;overflow:hidden;isolation:isolate;container-type:inline-size;border-radius:calc(var(--w) * .1395);background:#F2F3F7;
  font-family:var(--font,"Lokamo Sans",ui-sans-serif,system-ui,sans-serif);-webkit-font-smoothing:antialiased}
@supports (corner-shape:squircle){.tl__rama{corner-shape:squircle;border-radius:calc(var(--w) * .27)}.tl__szklo{corner-shape:squircle;border-radius:calc(var(--w) * .255)}.tl__ekran{corner-shape:squircle;border-radius:calc(var(--w) * .215)}}
.tl__bok{position:absolute;width:calc(var(--w) * .011);border-radius:2px;background:linear-gradient(90deg,#1E1E22,#6B6B71 45%,#2A2A2E);z-index:-1}
.tl__bok--akcja{left:calc(var(--w) * -.0085);top:16.6%;height:4.2%}
.tl__bok--g1{left:calc(var(--w) * -.0085);top:24.2%;height:7.6%}
.tl__bok--g2{left:calc(var(--w) * -.0085);top:33.4%;height:7.6%}
.tl__bok--zas{right:calc(var(--w) * -.0085);top:27%;height:11.6%}
.tl__sb{position:absolute;z-index:6;inset:0 0 auto;height:calc(var(--p) * 54);display:grid;grid-template-columns:1fr calc(var(--p) * 125) 1fr;align-items:center;font-weight:620;font-size:calc(var(--p) * 16.5);letter-spacing:-.01em;font-feature-settings:"tnum"}
.tl__godz{justify-self:center;padding-left:calc(var(--p) * 6)}
.tl__wyspa{height:calc(var(--p) * 36.5);border-radius:99px;background:#000;align-self:start;margin-top:calc(var(--p) * 11);box-shadow:inset calc(var(--p) * -24) 0 0 calc(var(--p) * -14) #000}
.tl__wyspa{position:relative}
.tl__wyspa::after{content:"";position:absolute;right:calc(var(--p) * 22);top:50%;width:calc(var(--p) * 11);height:calc(var(--p) * 11);margin-top:calc(var(--p) * -5.5);border-radius:50%;background:radial-gradient(circle at 35% 35%,#2A3550,#0A0D18 60%)}
.tl__ik{justify-self:center;display:flex;align-items:center;gap:calc(var(--p) * 6);padding-right:calc(var(--p) * 4)}
.tl__ik svg{height:calc(var(--p) * 11.5);fill:#0D0D0F}
.tl__ik svg:first-child{width:calc(var(--p) * 17)}
.tl__ik svg:nth-child(2){width:calc(var(--p) * 15.5)}
.tl__bat{position:relative;width:calc(var(--p) * 25);height:calc(var(--p) * 12);border-radius:calc(var(--p) * 3.8);box-shadow:inset 0 0 0 calc(var(--p) * 1.1) rgba(13,13,15,.38);padding:calc(var(--p) * 2)}
.tl__bat::after{content:"";position:absolute;right:calc(var(--p) * -3);top:50%;width:calc(var(--p) * 1.6);height:calc(var(--p) * 4);margin-top:calc(var(--p) * -2);border-radius:0 2px 2px 0;background:rgba(13,13,15,.4)}
.tl__bat i{display:block;height:100%;width:78%;border-radius:calc(var(--p) * 2);background:#0D0D0F}
.tl__odblask{position:absolute;z-index:7;inset:0;pointer-events:none;background:linear-gradient(112deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.16) 42%,rgba(255,255,255,0) 52%);mix-blend-mode:soft-light}


/* ---------- Aplikacja w telefonie: siatka 4 pt, jednostka --p = 1 pt ekranu 393 pt ---------- */
.ap{position:absolute;inset:calc(var(--p) * 54) 0 0;font-size:calc(var(--p) * 15);line-height:1.3;color:#0D0D0F;font-feature-settings:"tnum"}
.ap :where(p,ul,ol){margin:0;padding:0;list-style:none}
.ap :where(b,strong){font-weight:600}
.ap small,.ap em{font-size:inherit;font-style:normal}
.ap img{display:block;width:100%;height:100%;object-fit:cover}
.ap__nav{display:grid;grid-template-columns:calc(var(--p) * 32) 1fr auto;align-items:center;gap:calc(var(--p) * 10);height:calc(var(--p) * 48);padding:0 calc(var(--p) * 18)}
.ap__znak{display:grid;place-items:center;width:calc(var(--p) * 32);height:calc(var(--p) * 32);border-radius:calc(var(--p) * 10);background:#0D0D0F;color:#fff}
.ap__znak svg{width:calc(var(--p) * 15);height:calc(var(--p) * 15)}
.ap__nt{display:flex;flex-direction:column;min-width:0}
.ap__nt b{font-size:calc(var(--p) * 15);letter-spacing:-.015em;line-height:1.2}
.ap__nt small{font-size:calc(var(--p) * 12);color:#6C6C72;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap__chip{padding:calc(var(--p) * 4) calc(var(--p) * 9);border-radius:99px;background:#E6E8EE;color:#45454B;font-size:calc(var(--p) * 11.5);font-weight:560}
.ap__post{display:grid;grid-template-columns:repeat(6,1fr);gap:calc(var(--p) * 4);padding:calc(var(--p) * 4) calc(var(--p) * 18) 0}
.ap__post i{position:relative;height:calc(var(--p) * 3);border-radius:99px;background:#DFE1E7;overflow:hidden}
.ap__post i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#2E4BFF;transform-origin:0 50%;transform:scaleX(var(--v,0))}
.ap__ekrany{position:absolute;inset:calc(var(--p) * 66) 0 0;overflow:hidden}
.ap__e{position:absolute;inset:0;padding:calc(var(--p) * 10) calc(var(--p) * 16) 0;background:#F2F3F7;visibility:hidden}
.ap__e.is-on,.ap__e.is-wyj{visibility:visible}
.ap__e.is-wyj{z-index:1}
.ap__e.is-on{z-index:2}
/* Wejscie elementu ekranu (JS dodaje .is-gra po wsunieciu ekranu, opoznienie przez --i) */
.ap [data-w]{opacity:0;transform:translate3d(0,calc(var(--p) * 10),0);transition:none}
.ap .is-gra [data-w]{opacity:1;transform:none;transition:opacity .45s var(--e-wyj),transform .75s var(--e-spr);transition-delay:calc(var(--d,0ms) + var(--i,0) * 50ms)}
.ap__przew{will-change:transform}

.ap__ty{font-size:calc(var(--p) * 25);font-weight:680;letter-spacing:-.035em;line-height:1.12}
.ap__po{margin-top:calc(var(--p) * 4)!important;font-size:calc(var(--p) * 14);color:#6C6C72;line-height:1.35}
.ap__wiz,.ap__lista,.ap__rank,.ap__frazy,.ap__wk{background:#fff;border-radius:calc(var(--p) * 18);box-shadow:0 0 0 .5px rgba(13,13,15,.08),0 1px 2px rgba(16,24,40,.04),0 calc(var(--p) * 10) calc(var(--p) * 24) calc(var(--p) * -14) rgba(16,24,40,.16)}
/* Logo lokalu: kafel jak ikona aplikacji iOS, obrys 0,5 px */
.ap__logo{position:relative;display:block;width:calc(var(--p) * 36);height:calc(var(--p) * 36);border-radius:calc(var(--p) * 9);overflow:hidden;flex:none;background:#EDEEF2}
.ap__logo::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 .5px rgba(13,13,15,.14)}

/* 1. Skan: wizytowka Google */
.ap__wiz{overflow:hidden}
.ap__fot{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:calc(var(--p) * 2);height:calc(var(--p) * 124)}
.ap__img{position:relative;overflow:hidden;background:#D9D4CE}
.ap__img--okl{grid-row:1/3}
/* Blur-up: rozmyty podglad 20 px pod spodem, ostre zdjecie wchodzi przezroczystoscia i skala */
.ap__img::before{content:"";position:absolute;inset:-12%;background:var(--lq) center/cover;filter:blur(calc(var(--p) * 7));transform:scale(1.05)}
.ap__img img{position:relative;opacity:0;transform:scale(1.06)}
.is-gra .ap__img img{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.4,0,.2,1),transform 1.4s var(--e-wyj);transition-delay:520ms}
.is-gra .ap__img:nth-child(2) img{transition-delay:700ms}
.is-gra .ap__img:nth-child(3) img{transition-delay:840ms}
.ap__wiz-d{display:flex;align-items:flex-end;gap:calc(var(--p) * 12);padding:0 calc(var(--p) * 14) calc(var(--p) * 14)}
.ap__logo--duze{width:calc(var(--p) * 60);height:calc(var(--p) * 60);margin-top:calc(var(--p) * -24);border-radius:calc(var(--p) * 15);box-shadow:0 0 0 calc(var(--p) * 3) #fff,0 calc(var(--p) * 4) calc(var(--p) * 12) rgba(16,24,40,.18)}
.ap__wiz-t{display:flex;flex-direction:column;min-width:0;padding-top:calc(var(--p) * 10)}
.ap__wiz-t b{font-size:calc(var(--p) * 17);letter-spacing:-.02em;line-height:1.2;white-space:nowrap}
.ap__wiz-t small{display:block;margin-top:calc(var(--p) * 2);font-size:calc(var(--p) * 12.5);color:#6C6C72;line-height:1.3;white-space:nowrap}
.ap__wiz-t em{color:#6C6C72}
/* Gwiazdki wypelnione dokladnie do oceny (--o), informacja tez liczba obok */
.ap__gw{color:#45454B;font-weight:600}
.ap__gw::after{content:"★★★★★";margin-left:calc(var(--p) * 3);letter-spacing:.04em;background:linear-gradient(90deg,#F5A524 var(--o),#D5D7DD var(--o));-webkit-background-clip:text;background-clip:text;color:transparent}
.ap__teraz{position:relative;display:flex;align-items:center;gap:calc(var(--p) * 10);margin-top:calc(var(--p) * 10)!important;padding:calc(var(--p) * 11) calc(var(--p) * 14) calc(var(--p) * 13);border-radius:calc(var(--p) * 16);background:#E8EAF0;overflow:hidden}
.ap__teraz>i{position:relative;width:calc(var(--p) * 8);height:calc(var(--p) * 8);margin:0 calc(var(--p) * 4);border-radius:50%;background:#2E4BFF;flex:none}
.ap__teraz>i::before{content:"";position:absolute;inset:calc(var(--p) * -5);border-radius:50%;background:rgba(46,75,255,.3);animation:ap-halo 1.4s ease-out infinite}
.ap__teraz.is-ok>i{background:#1F8A55}.ap__teraz.is-ok>i::before{animation:none;opacity:0}
.ap__teraz>span{flex:1;min-width:0;display:flex;flex-direction:column}
.ap__teraz small{font-size:calc(var(--p) * 11.5);color:#6C6C72;font-weight:500}
.ap__teraz>span b{font-size:calc(var(--p) * 14);font-weight:560;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap__teraz em{font-size:calc(var(--p) * 13);color:#6C6C72;font-weight:500}
.ap__teraz em b{display:inline-block;min-width:2ch;text-align:right;color:#0D0D0F;font-size:calc(var(--p) * 17);font-weight:600}
.ap__teraz s{position:absolute;left:calc(var(--p) * 14);right:calc(var(--p) * 14);bottom:calc(var(--p) * 6);height:calc(var(--p) * 2.5);border-radius:99px;background:rgba(13,13,15,.08);overflow:hidden}
.ap__teraz s i{position:absolute;inset:0;border-radius:inherit;background:#2E4BFF;transform-origin:0 50%;transform:scaleX(calc(var(--v,0) / 100))}
.ap__lista{margin-top:calc(var(--p) * 10)!important}
.ap__lista li{position:relative;display:grid;grid-template-columns:calc(var(--p) * 24) 1fr auto;align-items:center;gap:calc(var(--p) * 12);min-height:calc(var(--p) * 46);padding:0 calc(var(--p) * 14);opacity:.42;transition:opacity .4s var(--e-wyj)}
.ap__lista li+li::before{content:"";position:absolute;top:0;left:calc(var(--p) * 50);right:0;height:.5px;background:rgba(13,13,15,.1)}
.ap__lista li.is-akt,.ap__lista li.is-ok{opacity:1}
.ap__lista b{font-size:calc(var(--p) * 15);font-weight:540;letter-spacing:-.01em}
.ap__lista small{font-size:calc(var(--p) * 12.5);color:#6C6C72}
.ap__st{position:relative;width:calc(var(--p) * 22);height:calc(var(--p) * 22);border-radius:50%;box-shadow:inset 0 0 0 calc(var(--p) * 1.6) #D3D6DE}
.is-akt>.ap__st{box-shadow:inset 0 0 0 calc(var(--p) * 1.6) rgba(46,75,255,.18)}
.is-akt>.ap__st::before{content:"";position:absolute;inset:0;border-radius:50%;border:calc(var(--p) * 1.8) solid transparent;border-top-color:#2E4BFF;animation:ap-krec .7s linear infinite}
.is-ok>.ap__st{box-shadow:none;background:#2E4BFF;animation:ap-pyk .5s var(--e-spr)}
.is-ok>.ap__st::after{content:"";position:absolute;left:31%;top:28%;width:38%;height:22%;border-left:calc(var(--p) * 2) solid #fff;border-bottom:calc(var(--p) * 2) solid #fff;transform:rotate(-45deg)}
@keyframes ap-krec{to{transform:rotate(360deg)}}
@keyframes ap-pyk{0%{transform:scale(.5)}60%{transform:scale(1.14)}100%{transform:none}}
@keyframes ap-halo{from{transform:scale(.4);opacity:1}to{transform:scale(1.5);opacity:0}}

/* 2. Wynik: karta z lukiem 270 stopni (przerwa u dolu), cieply odcien przy slabym wyniku */
.ap__wk{padding:calc(var(--p) * 18) 0 calc(var(--p) * 4);background:linear-gradient(180deg,#FFF4EE 0%,#FFFAF7 46%,#fff 70%)}
.ap__wynik{position:relative;width:calc(var(--p) * 168);height:calc(var(--p) * 168);margin:0 auto}
.ap__luk{position:absolute;inset:0;width:100%;height:100%;transform:rotate(135deg);overflow:visible}
.ap__luk circle{fill:none;stroke-width:9;stroke-linecap:round}
.ap__luk-t{stroke:#F1E4DD;stroke-dasharray:75 100}
.ap__luk-w{stroke:url(#ap-luk-g);stroke-dasharray:calc(var(--v,0) * .75) 100;opacity:clamp(0,calc(var(--v,0) * 1.5),1)}
.ap__wynik-n{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:calc(var(--p) * 4)}
.ap__wynik-n b{font-size:calc(var(--p) * 58);font-weight:690;letter-spacing:-.055em;line-height:1}
.ap__wynik-n small{margin-top:calc(var(--p) * 4);font-size:calc(var(--p) * 13);color:#6C6C72;font-weight:500}
.ap__wk-l{margin-top:calc(var(--p) * -6)!important;text-align:center;font-size:calc(var(--p) * 13);color:#6C6C72;font-weight:500}
.ap__wk-o{margin-top:calc(var(--p) * 2)!important;text-align:center;font-size:calc(var(--p) * 24);font-weight:680;letter-spacing:-.03em}
.ap__s--zle{color:#C4320A}.ap__s--sr{color:#B54708}.ap__s--ok{color:#1F7A4D}
.ap__kat{margin-top:calc(var(--p) * 10)!important}
.ap__kat li{position:relative;display:grid;grid-template-columns:calc(var(--p) * 26) 1fr auto;align-items:center;gap:calc(var(--p) * 12);min-height:calc(var(--p) * 50);padding:0 calc(var(--p) * 16)}
.ap__kat li+li::before{content:"";position:absolute;top:0;left:calc(var(--p) * 54);right:calc(var(--p) * 16);height:.5px;background:rgba(13,13,15,.09)}
.ap__kat span{display:flex;flex-direction:column}
.ap__kat b{font-size:calc(var(--p) * 14.5);font-weight:560;letter-spacing:-.01em;line-height:1.2}
.ap__kat small{font-size:calc(var(--p) * 12);font-weight:600;line-height:1.3}
.ap__kat em{font-size:calc(var(--p) * 14);font-weight:600;color:#0D0D0F}
.ap__kat em small{color:#8A8A90;font-weight:500;font-size:calc(var(--p) * 12.5)}
.ap__mr svg{display:block;width:calc(var(--p) * 26);height:calc(var(--p) * 26);transform:rotate(-90deg)}
.ap__mr circle{fill:none;stroke-width:3.4;stroke-linecap:round}
.ap__mr circle:first-child{stroke:#ECEDF1}
.ap__mr circle+circle{stroke:var(--k);stroke-dasharray:100 100;stroke-dashoffset:100}
.is-gra .ap__mr circle+circle{stroke-dashoffset:calc(100 - var(--u));transition:stroke-dashoffset 1.1s cubic-bezier(.3,1.2,.5,1);transition-delay:calc(900ms + var(--i) * 120ms)}
.ap__k--zle{--k:#E5484D}.ap__k--sr{--k:#F5A524}.ap__k--ok{--k:#30A46C}

/* 3. Mapa */
.ap__mapa{position:relative;height:calc(var(--p) * 236);margin-top:calc(var(--p) * 14);border-radius:calc(var(--p) * 18);overflow:hidden;background:#E8ECF2;box-shadow:0 0 0 .5px rgba(13,13,15,.08),0 calc(var(--p) * 10) calc(var(--p) * 24) calc(var(--p) * -14) rgba(16,24,40,.18)}
.ap__ulice{position:absolute;inset:0;width:100%;height:100%}
.ap__park{fill:#D7E8D3}
.ap__rzeka{fill:none;stroke:#C9DCF3;stroke-width:16;stroke-linecap:round}
.ap__ul path{fill:none;stroke:#fff;stroke-width:7;stroke-linecap:round}
.ap__ul--m path{stroke-width:3.5;stroke:#F8F9FB}
.ap__zasieg{position:absolute;left:50%;top:50%;width:calc(var(--p) * 300);height:calc(var(--p) * 300);margin:calc(var(--p) * -150);border-radius:50%;border:calc(var(--p) * 1.5) dashed rgba(46,75,255,.5);background:radial-gradient(closest-side,rgba(46,75,255,.13),rgba(46,75,255,.04))}
.ap__tymapa{position:absolute;left:50%;top:50%;z-index:3}
.ap__tymapa i{position:absolute;left:calc(var(--p) * -15);top:calc(var(--p) * -15);width:calc(var(--p) * 30);height:calc(var(--p) * 30);border-radius:50%;background:#fff;box-shadow:0 0 0 calc(var(--p) * 2.5) #2E4BFF,0 calc(var(--p) * 3) calc(var(--p) * 10) rgba(20,40,180,.45)}
.ap__tymapa i img{border-radius:50%}
.ap__tymapa i::before{content:"";position:absolute;inset:calc(var(--p) * -14);border-radius:50%;background:rgba(46,75,255,.28);animation:ap-halo 2.2s cubic-bezier(.2,.6,.35,1) infinite;z-index:-1}
.ap__tymapa b{position:absolute;left:calc(var(--p) * 20);top:calc(var(--p) * -11);padding:calc(var(--p) * 3) calc(var(--p) * 8);border-radius:99px;background:#2E4BFF;color:#fff;font-size:calc(var(--p) * 12);font-weight:650;box-shadow:0 calc(var(--p) * 2) calc(var(--p) * 6) rgba(20,40,180,.35)}
.ap__pinm{position:absolute;z-index:2;width:calc(var(--p) * 11);height:calc(var(--p) * 11);margin:calc(var(--p) * -5.5);border-radius:50%;background:#6B6B72;box-shadow:0 0 0 calc(var(--p) * 2) #fff,0 1px 3px rgba(0,0,0,.2);transform:scale(0)}
.is-gra .ap__pinm{transform:none;transition:transform .55s var(--e-spr);transition-delay:calc(260ms + var(--i) * 70ms)}
.ap__pinm--gr{width:calc(var(--p) * 26);height:calc(var(--p) * 26);margin:calc(var(--p) * -13);background:#fff;box-shadow:0 0 0 calc(var(--p) * 2) #fff,0 0 0 calc(var(--p) * 3) rgba(217,45,32,.85),0 calc(var(--p) * 2) calc(var(--p) * 6) rgba(0,0,0,.22)}
.ap__pinm--gr img{border-radius:50%}
.ap__pinm--gr::before{content:"";position:absolute;inset:calc(var(--p) * -7);border-radius:50%;border:calc(var(--p) * 1.5) solid rgba(217,45,32,.5);opacity:0}
.is-gra .ap__pinm--gr::before{animation:ap-grozny 2.4s ease-out 1.1s infinite}
@keyframes ap-grozny{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.55);opacity:0}}
.ap__pinm b{position:absolute;left:50%;bottom:calc(100% + var(--p) * 6);translate:-50% 0;padding:calc(var(--p) * 2) calc(var(--p) * 6);border-radius:calc(var(--p) * 6);background:#fff;color:#0D0D0F;font-size:calc(var(--p) * 11);font-weight:650;white-space:nowrap;box-shadow:0 1px 3px rgba(16,24,40,.18)}
.ap__pinm b::after{content:"★";margin-left:.15em;color:#E8A400}
.ap__staty{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--p) * 10);margin-top:calc(var(--p) * 12)}
.ap__staty>div{padding:calc(var(--p) * 12) calc(var(--p) * 14);border-radius:calc(var(--p) * 16);background:#fff;box-shadow:0 0 0 .5px rgba(13,13,15,.07),0 1px 2px rgba(16,24,40,.04)}
.ap__staty small{display:block;font-size:calc(var(--p) * 12);color:#6C6C72;font-weight:500}
.ap__staty b{display:block;margin-top:calc(var(--p) * 2);font-size:calc(var(--p) * 26);font-weight:680;letter-spacing:-.04em;line-height:1.1}
.ap__staty b s{text-decoration:none;color:#E8A400;font-size:.62em;margin-left:.12em;vertical-align:.25em}
.ap__staty em{display:block;margin-top:calc(var(--p) * 2);font-size:calc(var(--p) * 12);color:#45454B}

/* 4. Ranking */
.ap__szukaj{display:flex;align-items:center;gap:calc(var(--p) * 9);height:calc(var(--p) * 44);margin-top:calc(var(--p) * 12);padding:0 calc(var(--p) * 7) 0 calc(var(--p) * 14);border-radius:99px;background:#fff;box-shadow:0 0 0 .5px rgba(13,13,15,.08),0 calc(var(--p) * 6) calc(var(--p) * 16) calc(var(--p) * -10) rgba(16,24,40,.2)}
.ap__szukaj svg{width:calc(var(--p) * 17);height:calc(var(--p) * 17);flex:none;color:#45454B}
.ap__szukaj b{flex:1;font-size:calc(var(--p) * 15);letter-spacing:-.01em}
.ap__szukaj span{padding:calc(var(--p) * 5) calc(var(--p) * 10);border-radius:99px;background:#F0F1F5;color:#45454B;font-size:calc(var(--p) * 11.5);font-weight:560}
.ap__rank{margin-top:calc(var(--p) * 12)!important;padding:calc(var(--p) * 4) 0!important}
.ap__rw{position:relative;display:grid;grid-template-columns:calc(var(--p) * 20) calc(var(--p) * 36) 1fr auto;align-items:center;gap:calc(var(--p) * 10);min-height:calc(var(--p) * 58);padding:0 calc(var(--p) * 14) 0 calc(var(--p) * 12)}
.ap__rw+.ap__rw::before{content:"";position:absolute;top:0;left:calc(var(--p) * 78);right:0;height:.5px;background:rgba(13,13,15,.1)}
.ap__rw>i{font-style:normal;font-weight:650;font-size:calc(var(--p) * 14);color:#45454B;text-align:center}
.ap__rw b{display:block;font-size:calc(var(--p) * 15);letter-spacing:-.015em;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap__rw span:not(.ap__logo){min-width:0}
.ap__rw small{display:block;font-size:calc(var(--p) * 12.5);color:#6C6C72}
.ap__rw s{text-decoration:none;color:#E8A400;margin-left:.1em}
.ap__rw .ap__logo img{opacity:0;transform:scale(.92)}
.is-gra .ap__rw .ap__logo img{opacity:1;transform:none;transition:opacity .6s ease,transform .8s var(--e-wyj);transition-delay:calc(var(--d,0ms) + var(--i,0) * 50ms + 120ms)}
.ap__luka{display:flex;justify-content:center;align-items:center;gap:calc(var(--p) * 8);height:calc(var(--p) * 24);font-size:calc(var(--p) * 11.5);color:#8A8A90;font-weight:560}
.ap__luka::before,.ap__luka::after{content:"";width:calc(var(--p) * 40);height:.5px;background:rgba(13,13,15,.14)}
.ap__rw--ty{margin:0 calc(var(--p) * 6) calc(var(--p) * 2);padding:0 calc(var(--p) * 10) 0 calc(var(--p) * 6);border-radius:calc(var(--p) * 13);background:#EEF1FF;box-shadow:inset 0 0 0 .5px rgba(46,75,255,.35)}
.ap__rw--ty>i{color:#1D33C9}
.ap__rw--ty b{color:#1D33C9}
.ap__rw--ty em{padding:calc(var(--p) * 4) calc(var(--p) * 8);border-radius:99px;background:#fff;color:#1D33C9;font-size:calc(var(--p) * 12);font-weight:650;white-space:nowrap;box-shadow:0 0 0 .5px rgba(46,75,255,.25)}
.ap__sek{margin:calc(var(--p) * 20) calc(var(--p) * 4) calc(var(--p) * 8)!important;font-size:calc(var(--p) * 12);font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#6C6C72}
.ap__frazy li{position:relative;display:flex;align-items:center;justify-content:space-between;gap:calc(var(--p) * 10);min-height:calc(var(--p) * 46);padding:0 calc(var(--p) * 14) 0 calc(var(--p) * 16)}
.ap__frazy li+li::before{content:"";position:absolute;top:0;left:calc(var(--p) * 16);right:0;height:.5px;background:rgba(13,13,15,.1)}
.ap__frazy span{font-size:calc(var(--p) * 14.5);font-weight:520;letter-spacing:-.01em}
.ap__frazy small{color:#6C6C72;font-weight:450}
.ap__frazy b{min-width:calc(var(--p) * 40);padding:calc(var(--p) * 4) calc(var(--p) * 8);border-radius:calc(var(--p) * 8);background:#F0F1F5;text-align:center;font-size:calc(var(--p) * 12.5);font-weight:600}
.ap__frazy b.is-poza{background:#FDECEA;color:#B42318;font-size:calc(var(--p) * 12)}

/* 5. Problemy */
.ap__prob{display:grid;gap:calc(var(--p) * 8);margin-top:calc(var(--p) * 14)!important}
.ap__prob li{display:grid;grid-template-columns:calc(var(--p) * 28) 1fr auto;align-items:start;gap:0 calc(var(--p) * 12);padding:calc(var(--p) * 13) calc(var(--p) * 14);border-radius:calc(var(--p) * 16);background:#fff;box-shadow:0 0 0 .5px rgba(13,13,15,.07),0 1px 2px rgba(16,24,40,.04),0 calc(var(--p) * 10) calc(var(--p) * 24) calc(var(--p) * -14) rgba(16,24,40,.16)}
.ap__prob li.is-wcisk{animation:ap-wcisk .42s var(--e-spr)}
@keyframes ap-wcisk{0%{transform:none}35%{transform:scale(.97)}100%{transform:none}}
.ap__prob span{min-width:0}
.ap__prob b{display:block;font-size:calc(var(--p) * 14.5);letter-spacing:-.015em;line-height:1.25}
.ap__prob small{display:block;margin-top:calc(var(--p) * 2);font-size:calc(var(--p) * 12);color:#6C6C72;line-height:1.3}
.ap__prob em{grid-column:2;justify-self:start;margin-top:calc(var(--p) * 7);padding:calc(var(--p) * 3) calc(var(--p) * 8);border-radius:calc(var(--p) * 7);background:#FDECEA;color:#B42318;font-size:calc(var(--p) * 12);font-weight:600;transition:background-color .3s}
.ap__prob li.is-wcisk em{background:#FAD4D0}
.ap__zn{position:relative;width:calc(var(--p) * 28);height:calc(var(--p) * 28);margin-top:calc(var(--p) * 1)}
.ap__zn::before{content:"";position:absolute;inset:0}
.ap__zn::after{content:"!";position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:calc(var(--p) * 14)}
.ap__zn--kryt::before{background:#E5484D;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.ap__zn--kryt::after{color:#fff}
.ap__zn--waz::before{background:#F5A524;clip-path:polygon(50% 4%,100% 92%,0 92%)}
.ap__zn--waz::after{color:#3D2600;padding-top:calc(var(--p) * 6);font-size:calc(var(--p) * 12.5)}
.is-gra .ap__zn{animation:ap-drg .5s ease-in-out;animation-delay:calc(var(--d,0ms) + var(--i,0) * 50ms + 520ms)}
@keyframes ap-drg{0%,100%{transform:none}20%{transform:rotate(-9deg)}45%{transform:rotate(7deg)}70%{transform:rotate(-3deg)}}
.ap__suma{display:flex;align-items:center;justify-content:space-between;margin-top:calc(var(--p) * 10);padding:calc(var(--p) * 14) calc(var(--p) * 16);border-radius:calc(var(--p) * 16);background:#0D0D0F;color:#fff}
.ap__suma small{font-size:calc(var(--p) * 13);color:rgba(255,255,255,.7);font-weight:500}
.ap__suma b{font-size:calc(var(--p) * 19);font-weight:650;letter-spacing:-.025em;opacity:0;transition:opacity .35s var(--e-wyj)}
.ap__suma b.is-licz{opacity:1}

/* 6. Kwota */
.ap__etk{margin-top:calc(var(--p) * 14)!important;font-size:calc(var(--p) * 12.5);font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:#B42318}
.ap__kwota{margin-top:calc(var(--p) * 6)!important;font-size:calc(var(--p) * 42);font-weight:690;letter-spacing:-.045em;line-height:1.02;white-space:nowrap}
.ap__kwota small{font-size:.58em;font-weight:600;letter-spacing:-.02em;color:#45454B}
.ap__zysk{display:flex;align-items:center;gap:calc(var(--p) * 14);margin-top:calc(var(--p) * 22);padding:calc(var(--p) * 16);border-radius:calc(var(--p) * 18);color:#fff;
  background:radial-gradient(120% 140% at 85% 0%,#5A74FF,#2E4BFF 45%,#1E36D8);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 calc(var(--p) * 14) calc(var(--p) * 28) calc(var(--p) * -14) rgba(30,54,216,.6)}
.ap__zysk-z{display:grid;place-items:center;width:calc(var(--p) * 44);height:calc(var(--p) * 44);border-radius:calc(var(--p) * 13);background:rgba(255,255,255,.16);flex:none}
.ap__zysk-z svg{width:calc(var(--p) * 20);height:calc(var(--p) * 20)}
.ap__zysk small{display:block;font-size:calc(var(--p) * 12.5);color:rgba(255,255,255,.8);font-weight:500}
.ap__zysk b{display:block;font-size:calc(var(--p) * 21);font-weight:680;letter-spacing:-.03em;line-height:1.2}
.ap__zysk em{display:block;font-size:calc(var(--p) * 12.5);color:rgba(255,255,255,.8)}
.ap__guzik{display:flex;align-items:center;justify-content:center;height:calc(var(--p) * 50);margin-top:calc(var(--p) * 16);border-radius:99px;background:#0D0D0F;color:#fff;font-weight:620;font-size:calc(var(--p) * 16);letter-spacing:-.01em}
.ap__guzik.is-wcisk{animation:ap-wcisk .45s var(--e-spr)}
.ap__skad{display:block;margin-top:calc(var(--p) * 14);text-align:center;font-size:calc(var(--p) * 13);color:#45454B;text-decoration:underline;text-underline-offset:calc(var(--p) * 3);text-decoration-color:rgba(69,69,75,.4)}

/* Podpis pod scena */
/* Widoczna etykieta mocka: wynik jest przykladowy (lokal fikcyjny), nie tylko w sr-only */
.hs__etyk{display:block;width:max-content;margin:0 auto 14px;padding:5px 12px;border-radius:99px;background:#E6E8EE;color:#45454B;font-size:12.5px;font-weight:560;line-height:1.2;letter-spacing:.01em}
.hs__cap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 18px;margin-top:18px;font-size:13.5px;color:var(--hg-steel);text-align:left}
.hs__zal summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;color:var(--hg-ink);font-weight:520;text-decoration:underline;text-underline-offset:3px;list-style:none}
.hs__zal summary::-webkit-details-marker{display:none}
.hs__zal p{max-width:56ch;margin:8px 0 0;color:var(--hg-t2);line-height:1.5}
.hs__pauza{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:rgba(13,13,15,.06);color:var(--hg-ink);cursor:pointer;transition:background-color .2s}
.hs__pauza:hover{background:rgba(13,13,15,.1)}
.hs__pauza:focus-visible{outline:2px solid #2E4BFF;outline-offset:2px}
.hg--ciemne .hs__pauza{background:rgba(255,255,255,.1)}
.hs__pauza svg{width:16px;height:16px}
.hs__i-pl,.hg.is-pauza .hs__i-pa{display:none}
.hg.is-pauza .hs__i-pl{display:block}

/* Zatrzymanie: poza widokiem, pauza, karta w tle */
.hg.is-stop .ap *,.hg.is-stop .ap *::before,.hg.is-stop .ap *::after{animation-play-state:paused!important}

@media (max-width:1020px){.hg{--tel-w:360px;--wys:58px;--pan-h:404px}.hs__panel{border-radius:30px}}
@media (max-width:560px){
  .hg{--tel-w:min(304px,calc(100vw - 86px));--wys:42px;--pan-h:calc(var(--tel-w) * 1.2);padding-top:calc(var(--hdr,62px) + 26px);padding-bottom:48px}
  .hg__kick{font-size:12.5px;margin-bottom:18px;padding:6px 12px 6px 10px}
  /* Kazda fraza ma 9,5-13,6 em, wiec przy 8,6 em lamie sie zawsze na dokladnie dwie wyrownane
     linie: stala wysokosc bloku, bez pustego miejsca przy krotszych frazach. */
  .hg__t{font-size:min(38px,calc((100vw - 32px) / 9.2));letter-spacing:-.042em;line-height:1.06}
  .hg__fr{white-space:normal;text-wrap:balance;max-width:8.6em}
  .hg__lead{font-size:16.5px;margin-top:16px}
  .hg .sl{margin-top:24px}
  .hs{margin-top:36px}
  .hs__panel{border-radius:26px}
  .hs__smugi{opacity:.7}
  .hs__cap{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .ap *,.ap *::before,.ap *::after{animation:none!important;transition:none!important}
}