/* ===== Uwagi Pani Anny Rydel (Aquafilter, 27.10.2026): logo, wyszukiwarka, karta bez ilości, atuty bez prostokątów, liczby od zera ===== */
/* logo od Aquafilter */
.marka img{display:block;height:46px;width:auto}
.nag .marka img.logo-poziom{height:54px;margin:-4px 0}
.stopka .marka img.logo-znak{height:72px;width:72px}
.stopka .marka img.logo-poziom{height:54px}
@media (max-width:760px){.nag .marka img.logo-poziom{height:42px;margin:0}}

/* wyszukiwarka: Esc działa też myszką */
.paleta .pal-esc{display:inline-flex;align-items:center;gap:8px;margin-left:auto;padding:5px 6px 5px 5px;border-radius:10px;color:var(--gray-2);transition:background .2s,color .2s}
.paleta .pal-esc kbd{margin:0}
.paleta .pal-esc span{font-size:13px;line-height:1}
.paleta .pal-esc:hover{background:var(--tint-a,var(--graphite-2));color:var(--akcent-2,var(--white))}
.paleta .pal-esc-st{font:inherit;color:inherit;letter-spacing:inherit;padding:0;border-radius:6px}
.paleta .pal-esc-st:hover{color:var(--akcent-2,var(--white));text-decoration:underline;text-underline-offset:3px}

/* atuty na stronie głównej: nieklikalne – bez prostokątów w tle, ikony w kółku z gradientem */
html[data-motyw] .moc-atuty>div.atut,.moc-atuty>div.atut{background:none!important;border:0!important;box-shadow:none!important;padding:6px 4px}
.moc-atuty>div.atut svg{box-sizing:content-box;width:30px;height:30px;padding:15px;border-radius:50%;color:var(--akcent-2,#0B5CAD);background:radial-gradient(circle at 30% 25%,#fff,color-mix(in srgb,var(--akcent,#0A7BD1) 16%,#fff));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--akcent,#0A7BD1) 26%,transparent),0 14px 26px -16px color-mix(in srgb,var(--akcent-2,#0B5CAD) 70%,transparent)}
.moc-atuty:has(>div.atut){grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.moc-atuty:has(>div.atut){grid-template-columns:minmax(0,1fr)}}

/* pas liczb (uwaga Pani Anny: ciekawszy, dynamiczny, odliczanie od 0): cyfry przewijają się jak w liczniku, ikona, pasek postępu i błysk światła */
.liczby b,.p-liczby b,.om-liczby .r{font-variant-numeric:tabular-nums}
.lz{white-space:nowrap}
lz-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
lz-cyfry{display:inline-flex}
lz-k{display:inline-block;height:1.3em;margin:-.15em 0;clip-path:inset(.15em -.08em)}
lz-r{display:block;will-change:transform}
lz-r>i{display:block;height:1.3em;line-height:1.3em;font-style:normal;text-align:center}
.lz-jedzie lz-k{-webkit-mask-image:linear-gradient(transparent 12%,#000 36%,#000 64%,transparent 88%);mask-image:linear-gradient(transparent 12%,#000 36%,#000 64%,transparent 88%)}
lz-dop{display:inline-block;opacity:0;transform:translateY(.25em) scale(.4);transform-origin:20% 80%;transition:opacity .25s,transform .55s cubic-bezier(.34,1.7,.64,1);color:var(--lz-akc,#9BDCFF)}
.lz-gotowe lz-dop{opacity:1;transform:none}
.om-liczby lz-dop{--lz-akc:var(--akcent,#0A7BD1)}

#liczby>div,.p-liczby>div{position:relative;isolation:isolate;overflow:hidden;transition:background .35s}
html[data-motyw] .liczby>div{padding:28px 26px 36px}
html[data-motyw] .p-liczby>div{padding:24px 24px 36px}
.liczby b{font-size:clamp(36px,3.3vw,48px)}
/* ikona w szklanym kafelku */
lz-ik{display:grid;place-items:center;width:40px;height:40px;margin-bottom:16px;border-radius:12px;color:#fff;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 10px 22px -14px rgba(0,0,0,.5);opacity:0;transform:translateY(10px) scale(.8);transition:opacity .6s,transform .7s cubic-bezier(.34,1.5,.64,1),background .3s;transition-delay:calc(var(--i,0)*.14s)}
lz-ik svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.licz-start lz-ik{opacity:1;transform:none}
/* pasek postępu napełnia się razem z licznikiem */
.liczby>div::after,.p-liczby>div::after{content:"";position:absolute;left:26px;right:26px;bottom:18px;height:2px;border-radius:2px;background:linear-gradient(90deg,#fff,rgba(255,255,255,.45)) 0 0/0% 100% no-repeat,rgba(255,255,255,.14);transition:background-size 2.3s cubic-bezier(.12,.72,.16,1);transition-delay:calc(var(--i,0)*.14s)}
.p-liczby>div::after{left:24px;right:24px}
.liczby.licz-start>div::after,.p-liczby.licz-start>div::after{background-size:100% 100%,auto}
/* błysk światła przechodzi falą przez kolejne liczby */
#liczby>div::before,.p-liczby>div::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.13) 50%,transparent 70%);transform:translateX(-115%)}
.licz-start>div::before{animation:lz-blysk 1.5s cubic-bezier(.3,.6,.3,1) both;animation-delay:calc(var(--i,0)*.14s + .15s)}
@keyframes lz-blysk{to{transform:translateX(115%)}}
@media (hover:hover){
  #liczby>div:hover,.p-liczby>div:hover{background:rgba(255,255,255,.06)}
  .licz-start>div:hover lz-ik{transform:translateY(-3px) rotate(-6deg);background:rgba(255,255,255,.2);transition-delay:0s}
}
html[data-motyw="1"] lz-ik{color:#F0D3BC;box-shadow:inset 0 0 0 1px rgba(210,145,95,.35),0 10px 22px -14px rgba(0,0,0,.6)}
html[data-motyw="1"] lz-dop{--lz-akc:#E5B48E}
html[data-motyw="1"] .liczby>div::after{background:linear-gradient(90deg,#D9B497,rgba(217,180,151,.4)) 0 0/0% 100% no-repeat,rgba(210,145,95,.16)}
html[data-motyw="1"] .liczby.licz-start>div::after{background-size:100% 100%,auto}
@media (max-width:760px){
  .liczby b{font-size:34px}
  #liczby>div:last-child:nth-child(odd){grid-column:1/-1}
  html[data-motyw] .liczby>div{padding:22px 20px 32px}
  html[data-motyw] .p-liczby>div{padding:20px 14px 32px}
  .liczby>div::after{left:20px;right:20px;bottom:16px}
  .p-liczby>div::after{left:14px;right:14px;bottom:16px}
  lz-ik{width:34px;height:34px;margin-bottom:12px;border-radius:10px}
  lz-ik svg{width:17px;height:17px}
}
@media (prefers-reduced-motion:reduce){lz-ik,lz-dop,.liczby>div::after,.p-liczby>div::after{transition:none}.licz-start>div::before{animation:none}}