/* Avigon Base, main.css (ladowany asynchronicznie).
   Sekcje below-the-fold. Tokeny i above-the-fold siedza w critical.css. */

/* ---------- Sekcje / rytm ---------- */
.av-sec{padding-block:var(--av-section-y)}
.av-sec--light{background:var(--av-surface);color:var(--av-ink)}
.av-sec--alt{background:var(--av-surface-alt);color:var(--av-ink)}
.av-sec--dark{background:var(--av-surface-dark);color:var(--av-on-dark)}
.av-sec--dark .av-lead,.av-sec--dark p{color:var(--av-on-dark-soft)}
.av-sec--dark .av-h2,.av-sec--dark .av-h3,.av-sec--dark .av-h4,.av-sec--dark strong{color:var(--av-on-dark)}
.av-sec__actions{margin:2rem 0 0}
.av-sec__actions--center{display:flex;justify-content:center;margin-top:2.75rem}

.av-shead{margin-bottom:clamp(2rem,4vw,3.25rem);max-width:72ch}
.av-shead--center{margin-inline:auto;text-align:center}
.av-shead--center .av-lead{margin-inline:auto}
.av-h2--on-dark{color:var(--av-on-dark)}

.av-prose p{margin:0 0 1.15em;max-width:68ch}
.av-prose p:last-child{margin-bottom:0}
.av-prose--on-dark p{color:var(--av-on-dark-soft)}
.av-prose--sm p{font-size:.94rem}
.av-prose strong{color:var(--av-ink);font-weight:650}
.av-prose--on-dark strong{color:var(--av-on-dark)}

.av-grid{display:grid;gap:1px;background:var(--av-line)}
.av-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.av-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.av-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.av-card--bordered{border:0;padding:clamp(1.5rem,2.5vw,2rem);background:var(--av-surface)}
.av-card--bordered h3{margin-bottom:.5rem}
.av-card--bordered p{margin:0;font-size:.92rem;color:var(--av-ink-soft)}

/* Listy z ptaszkiem, bez ikon SVG, czysty CSS */
.av-checks li{position:relative;padding-left:1.7rem;margin-bottom:.6rem;font-size:.93rem}
.av-checks li::before{content:"";position:absolute;left:0;top:.42em;width:.62rem;height:.34rem;
border-left:2px solid var(--av-accent);border-bottom:2px solid var(--av-accent);transform:rotate(-45deg)}
/* Na jasnym tle sam zolty ptaszek gubi sie w tle, wiec tam idzie ciemny. */
.av-sec--light .av-checks li::before,.av-sec--alt .av-checks li::before{
border-left-color:var(--av-ink);border-bottom-color:var(--av-ink)}
.av-checks--on-dark li::before,.av-sec--dark .av-checks li::before{border-color:var(--av-accent)}
.av-checks--on-dark li{color:var(--av-on-dark-soft)}

.av-frame{margin:0;border:var(--av-border-w) solid var(--av-line);position:relative}
/* aspect-ratio rezerwuje miejsce nawet gdy obrazek nie dostal width/height.
   Dzieje sie tak dla plikow, ktorych getimagesize() nie czyta (SVG) oraz dla
   obrazow podanych jako goly URL spoza biblioteki mediow, bez tego CLS. */
.av-frame img{width:100%;aspect-ratio:4/3;object-fit:cover}
.av-frame--dark{border-color:var(--av-line-dark)}

/* ---------- Pasek zaufania ---------- */
.av-trust{padding-block:2.25rem;border-block:var(--av-border-w) solid var(--av-line);background:var(--av-surface)}
.av-trust__in{display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);flex-wrap:wrap;justify-content:center}
.av-trust__title{margin:0;font-size:.78rem;font-weight:650;letter-spacing:.1em;
text-transform:uppercase;color:var(--av-ink-soft)}
.av-trust__list{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1rem,3vw,2.5rem);justify-content:center}
.av-trust__item{font-size:.9rem;font-weight:600;color:var(--av-ink-soft)}
.av-trust__item img{max-height:26px;width:auto;filter:grayscale(1);opacity:.7;transition:opacity var(--av-ease),filter var(--av-ease)}
.av-trust__item:hover img{filter:none;opacity:1}

/* ---------- O nas ---------- */
.av-about{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4rem);align-items:start}

.av-about__cards{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--av-line);margin-top:1px}
.av-minicard{background:var(--av-surface);padding:1.15rem 1.25rem;display:block}
.av-minicard strong{display:block;font-size:.95rem;margin-bottom:.25rem}
.av-minicard span{font-size:.84rem;color:var(--av-ink-soft);line-height:1.5}
.av-sign{margin:1.75rem 0 0;padding-left:1rem;border-left:3px solid var(--av-accent)}
.av-sign__name{display:block;font-weight:700}
.av-sign__role{display:block;font-size:.82rem;color:var(--av-ink-soft)}
/* Podpis z logo sieci obok, jak na wizytowce: osoba po lewej, marka po prawej
   za cienka linia. */
.av-sign--logo{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem 1.25rem}
.av-sign__logo{height:24px;width:auto;display:block;padding-left:1.25rem;
border-left:var(--av-border-w) solid var(--av-line)}

/* ---------- Dlaczego my ---------- */



.av-why__item p{font-size:.93rem;margin-bottom:0}

.av-quote{margin:clamp(2.5rem,5vw,4rem) 0 0;padding:clamp(1.75rem,3vw,2.5rem);
border:var(--av-border-w) solid var(--av-line-dark);max-width:80ch;margin-inline:auto;text-align:center}
.av-quote p{font-family:var(--av-font-head);font-size:clamp(1.05rem,1.8vw,1.3rem);
line-height:1.5;color:var(--av-on-dark);margin-bottom:.85rem}
.av-quote cite{font-style:normal;font-size:.82rem;letter-spacing:.08em;
text-transform:uppercase;color:var(--av-accent)}

/* ---------- Metoda sprzedazy ---------- */
.av-method{display:grid;gap:1px;background:var(--av-line)}
.av-method__item{background:var(--av-surface);display:grid;
grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(1.5rem,3vw,3rem);
padding:clamp(1.75rem,3vw,2.75rem);align-items:center}
.av-method__item:nth-child(even) .av-method__media{order:-1}
.av-method__num{display:block;font-family:var(--av-font-head);font-size:.8rem;font-weight:800;
letter-spacing:.14em;color:var(--av-ink-soft);margin-bottom:.85rem}
.av-method__copy p{color:var(--av-ink-soft);max-width:62ch}
.av-method__media{margin:0;border:var(--av-border-w) solid var(--av-line)}
.av-method__media img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ---------- Pasek CTA ---------- */
.av-band{background:var(--av-surface-dark);color:var(--av-on-dark);padding-block:clamp(3rem,6vw,5rem)}
.av-band__in{display:flex;gap:2rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.av-band__in>div:first-child{max-width:56ch}
.av-band .av-h2{margin-bottom:.5rem}
.av-band__text{color:var(--av-on-dark-soft);margin:0}
.av-band__actions{display:flex;gap:.85rem;flex-wrap:wrap}

/* ---------- Proces ---------- */
.av-process{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(2rem,4vw,3.25rem);align-items:start}
.av-process__intro{position:sticky;top:110px}
.av-process__tel{margin:1rem 0 0;font-size:1.15rem;font-weight:700}
.av-process__tel a{text-decoration:none}
.av-steps{display:grid;gap:clamp(1rem,2vw,1.5rem);margin:0;padding:0;list-style:none;counter-reset:none}
/* Zolta krawedz po lewej stronie karty: prowadzi wzrok w dol stosu i wiaze
   kroki z numeracja, ktora jest w tym samym kolorze. */
.av-steps__item{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);
gap:clamp(1.25rem,2.5vw,1.75rem);align-items:stretch;
background:var(--av-surface);border:var(--av-border-w) solid var(--av-line);
border-left:3px solid var(--av-accent);
transition:box-shadow var(--av-ease),border-color var(--av-ease)}
.av-steps__item:hover{box-shadow:0 10px 30px rgba(var(--av-ink-rgb),.09)}
.av-steps__num{display:inline-flex;align-items:center;gap:.55rem;
font-family:var(--av-font-head);font-weight:var(--av-head-weight);
font-size:1.05rem;letter-spacing:.08em;color:var(--av-ink-soft);margin-bottom:.5rem}
.av-steps__num::after{content:"";width:24px;height:2px;background:var(--av-accent)}
.av-steps__item p{margin:0;color:var(--av-ink-soft);font-size:.94rem}

/* ---------- Gwarancje ---------- */
.av-seal{margin:2.5rem auto 0;max-width:max-content;padding:.9rem 1.6rem;
border:2px solid var(--av-ink);font-weight:700;font-size:.92rem;text-align:center}

/* ---------- Liczby ---------- */
.av-stats{background:var(--av-surface-dark);color:var(--av-on-dark);padding-block:clamp(3rem,6vw,5rem)}
.av-stats__title{text-align:center;margin-bottom:2.5rem}
.av-stats__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:1px;background:var(--av-line-dark);border:var(--av-border-w) solid var(--av-line-dark)}
.av-stats__item{background:var(--av-surface-dark);padding:clamp(1.5rem,3vw,2.25rem);text-align:center}
.av-stats__item dt{font-family:var(--av-font-head);font-size:clamp(1.9rem,4vw,2.9rem);
font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--av-accent)}
.av-stats__item dd{margin:.65rem 0 0;font-size:.85rem;color:var(--av-on-dark-soft);line-height:1.5}

/* ---------- Konsultacja ---------- */
.av-consult{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(2rem,4.5vw,3.5rem);align-items:start}
.av-consult__badge{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.14em;
text-transform:uppercase;color:var(--av-on-accent);background:var(--av-accent);padding:.45rem .85rem;margin-bottom:1.25rem}
.av-consult__media img{width:100%;aspect-ratio:4/5;object-fit:cover;
/* Kadr trzymamy od gory: to portret, wiec przy przycinaniu ma zniknac
   podloga, a nie twarz. */
object-position:50% 0}

/* ---------- Opinie ---------- */
.av-rating{display:flex;align-items:center;justify-content:center;gap:.75rem;flex-wrap:wrap;
margin:0 0 2.5rem;font-size:.9rem;color:var(--av-on-dark-soft)}
.av-rating__value{font-family:var(--av-font-head);font-size:2rem;font-weight:800;color:var(--av-on-dark);line-height:1}
.av-stars{color:var(--av-accent);letter-spacing:.12em}
.av-rating__count{color:var(--av-on-dark-soft)}

/* Karty opinii: biale na granacie, w slajderze motywu. Wzorowane na
   sprzedaj-piorkowski.pl: przyciecie do pieciu linii, "Czytaj wiecej",
   belka akcentu i uniesienie po najechaniu. */
.av-slider--reviews{--av-slide:min(340px,82vw)}
/* flex-start: rozwinieta karta rosnie sama, nie rozciaga sasiadek. */
.av-slider--reviews .av-slider__track{align-items:flex-start;padding:.5rem .25rem 1rem}
.av-review{position:relative;display:flex;flex-direction:column;
background:var(--av-surface);color:var(--av-ink-soft);border-radius:0;
padding:1.75rem 1.6rem 1.4rem;box-shadow:0 6px 24px rgba(var(--av-ink-rgb),.18);
transition:transform var(--av-ease),box-shadow var(--av-ease)}
.av-review::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--av-accent);
transform:scaleX(0);transform-origin:left;
transition:transform .5s cubic-bezier(.22,1,.36,1)}
.av-review:hover{transform:translateY(-4px);box-shadow:0 18px 48px rgba(var(--av-ink-rgb),.32)}
.av-review:hover::before{transform:scaleX(1)}
.av-review__stars{display:flex;gap:.15rem;margin:0 0 .9rem;color:var(--av-accent)}
.av-review__stars svg{width:15px;height:15px;fill:currentColor;display:block}
.av-review__quote{margin:0;flex:1}
.av-review__text{margin:0;font-size:.94rem;line-height:1.7;color:var(--av-ink-soft)}
/* Przyciecie tylko przy dzialajacym JS: bez niego nie byloby czym rozwinac. */
.av-slider.is-live .av-review__text{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.av-slider.is-live .av-review.is-expanded .av-review__text{-webkit-line-clamp:unset;overflow:visible}
.av-review__more{align-self:flex-start;margin:.5rem 0 0;padding:0;background:none;border:0;cursor:pointer;
font:inherit;font-size:.8rem;font-weight:700;letter-spacing:.02em;color:var(--av-accent-ink);
border-bottom:1px solid transparent;transition:border-color var(--av-ease)}
.av-review__more:hover,.av-review__more:focus-visible{border-bottom-color:currentColor}
.av-review__foot{display:flex;align-items:center;gap:.6rem;margin-top:1.1rem;padding-top:1rem;
border-top:var(--av-border-w) solid var(--av-line)}
.av-review__mark{width:18px;height:18px;flex:none;display:block;object-fit:contain;border-radius:3px}
.av-review__who{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.av-review__who strong{font-size:.9rem;color:var(--av-ink)}
.av-review__who span{font-size:.75rem;color:var(--av-ink-soft)}

/* Kafel oceny pod opiniami: ocena + gwiazdki + liczba + znak serwisu w jednym. */
.av-reviews-score{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
gap:.9rem 1.4rem;width:max-content;max-width:100%;margin:clamp(2rem,4vw,2.75rem) auto 0;
padding:1rem 1.6rem;background:var(--av-surface);color:var(--av-ink);border-radius:0}
.av-reviews-score__value{font-family:var(--av-font-head);font-weight:800;font-size:2.1rem;line-height:1;
letter-spacing:-.03em;color:var(--av-ink);padding-right:1.4rem;border-right:var(--av-border-w) solid var(--av-line)}
.av-reviews-score__meta{display:flex;flex-direction:column;gap:.35rem}
.av-reviews-score__stars{display:flex;gap:.15rem;color:var(--av-accent-base)}
.av-reviews-score__stars svg{width:16px;height:16px;fill:currentColor;display:block}
.av-reviews-score__text{font-size:.88rem;font-weight:500}
.av-reviews-score__logo{height:22px;width:auto;display:block}
.av-sec--dark .av-reviews-score .av-reviews-score__text{color:var(--av-ink-soft)}
@media (max-width:480px){
.av-reviews-score{flex-direction:column;text-align:center;padding:1.25rem}
.av-reviews-score__value{border-right:0;padding-right:0}
.av-reviews-score__meta{align-items:center}
}

/* ---------- FAQ ---------- */
/* FAQ w stylu metrohouse-row: zadnych kart ani pudelek, tylko cienkie linie
   miedzy pytaniami. Bialy tekst na zdjeciu, zolty znacznik. Proste linie,
   zero zaokraglen, zgodnie z reszta marki. */
.av-faq{max-width:52rem;margin-inline:auto}
.av-faq__list{display:block;border-top:var(--av-border-w) solid rgba(255,255,255,.16)}
.av-faq__item{background:none;border:0;box-shadow:none;
border-bottom:var(--av-border-w) solid rgba(255,255,255,.16)}
.av-faq__item summary{list-style:none;cursor:pointer;position:relative;
display:flex;align-items:center;gap:1.5rem;padding:1.45rem 0;
font-family:var(--av-font-head);font-weight:600;
font-size:clamp(1.02rem,1.5vw,1.14rem);line-height:1.4;color:#fff;
transition:color var(--av-ease)}
.av-faq__item summary::-webkit-details-marker{display:none}
.av-faq__item summary:hover{color:var(--av-accent)}
.av-faq__item[open] summary{color:var(--av-accent)}
.av-faq__item summary:focus-visible{outline:2px solid var(--av-accent);outline-offset:4px}
/* Znacznik: kwadratowy plus, ktory obraca sie w krzyzyk i zapala na zolto. */
.av-faq__item summary::after{content:"";flex:none;margin-left:auto;
width:32px;height:32px;background:rgba(255,255,255,.1);
background-image:
  linear-gradient(currentColor,currentColor),
  linear-gradient(currentColor,currentColor);
background-size:13px 2px,2px 13px;
background-position:center,center;background-repeat:no-repeat;
transition:transform .3s cubic-bezier(.4,0,.2,1),background-color var(--av-ease)}
.av-faq__item[open] summary::after{transform:rotate(45deg);
background-color:var(--av-accent);color:var(--av-on-accent)}
.av-faq__panel{overflow:hidden}
.av-faq__a{padding:0 3.5rem 1.6rem 0;border:0}
.av-faq__a p{margin:0 0 .9em;color:rgba(255,255,255,.82);font-size:1rem;line-height:1.7}
.av-faq__a p:last-child{margin-bottom:0}
.av-faq__a strong{color:#fff}
/* Bez JS panel jest po prostu widoczny, wiec tresc nigdy nie znika. */
.av-faq--js .av-faq__panel{height:0;will-change:height}
@media (prefers-reduced-motion:reduce){
  .av-faq__item summary::after{transition:none}
}
@media (max-width:620px){
  .av-faq__item summary{gap:1rem}
  .av-faq__a{padding-right:0}
}

/* ---------- Kontakt ---------- */
.av-contact__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:clamp(2rem,5vw,4rem);align-items:start}
.av-contact__list{border-top:var(--av-border-w) solid var(--av-line-dark);margin-top:.5rem}
.av-contact__list li{display:grid;grid-template-columns:120px 1fr;gap:1rem;padding:1rem 0;
border-bottom:var(--av-border-w) solid var(--av-line-dark);align-items:baseline}
.av-contact__k{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--av-on-dark-soft)}
.av-contact__v{font-size:1.02rem;font-weight:600;color:var(--av-on-dark);text-decoration:none}
a.av-contact__v:hover{color:var(--av-accent)}
.av-contact__photo{margin-top:1.5rem}
.av-contact__photo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.av-contact .av-card--form{background:var(--av-surface);color:var(--av-ink)}
.av-contact .av-card--form p,.av-contact .av-card--form .av-card__sub{color:var(--av-ink-soft)}

/* ---------- Tekst SEO ---------- */
.av-seotext__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(1.5rem,3vw,2.5rem)}
.av-seotext__grid h3{margin-bottom:.6rem}

/* ---------- Stopka ---------- */
.av-footer{background:var(--av-surface-dark);color:var(--av-on-dark-soft);
padding-block:clamp(3rem,5vw,4.5rem) 2rem;font-size:.9rem}
.av-footer__grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(auto-fit,minmax(160px,1fr));
gap:clamp(1.75rem,4vw,3rem);padding-bottom:2.5rem;border-bottom:var(--av-border-w) solid var(--av-line-dark)}
.av-footer__name{font-family:var(--av-font-head);font-weight:800;font-size:1.15rem;
color:var(--av-on-dark);display:block;margin-bottom:.75rem;letter-spacing:-.02em}
.av-footer__desc{max-width:46ch;line-height:1.6}
.av-footer__rating{display:flex;gap:.5rem;align-items:center;font-size:.85rem;margin:0}
.av-footer__h{font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--av-on-dark);margin-bottom:1rem}
.av-footer__col li{margin-bottom:.55rem;line-height:1.5}
.av-footer__col a{text-decoration:none}
.av-footer__col a:hover{color:var(--av-accent)}
.av-footer__bar{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
padding-top:1.75rem;font-size:.82rem}
.av-footer__bar p{margin:0}
.av-footer__legal{display:flex;gap:1.25rem;flex-wrap:wrap}
.av-footer__legal a{text-decoration:none}
.av-footer__legal a:hover{color:var(--av-accent)}
/* Podpis autora akcentem. Akcent na ciemnym tle ma 11,66:1 (patrz brand.json),
   wiec spokojnie niesie sie jako tekst. Zdejmujemy przy tym opacity: dziala na
   caly poddrzewo i dziecko go nie odzyska wlasnym opacity:1, wiec przy .7
   kontrast akcentu spadlby ponizej progu. */
.av-footer__credits{color:var(--av-on-dark-soft)}
.av-footer__credits a{color:var(--av-accent)}
.av-footer__credits a:hover{color:var(--av-on-dark);text-decoration:underline}

/* ---------- Sticky call bar (mobile) ---------- */
.av-callbar{display:none}
@media (max-width:900px){
.av-callbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:120;
background:var(--av-surface-dark);border-top:var(--av-border-w) solid var(--av-line-dark);
/* Wysuwa sie z dolu z wyhamowaniem: 220 ms wspolnego --av-ease bylo tu zbyt
   nagle, belka wjezdzala skokiem w pole widzenia. */
transform:translateY(100%);
transition:transform .42s cubic-bezier(.22,.61,.36,1),opacity .42s ease;
opacity:0;will-change:transform}
.av-callbar.is-visible{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){
  .av-callbar{transition:none}
}
.av-callbar__btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;
min-height:60px;padding:.6rem .75rem;text-decoration:none;font-size:.76rem;font-weight:650;
letter-spacing:.04em;text-transform:uppercase;color:var(--av-on-dark)}
.av-callbar__btn strong{font-size:.95rem;letter-spacing:0;text-transform:none}
.av-callbar__btn--form{background:var(--av-accent);color:var(--av-on-accent)}
body{padding-bottom:60px}
}

/* ---------- Podstrony (polityka prywatnosci itp.) ---------- */
.av-page{padding-block:clamp(3rem,6vw,5rem);max-width:820px}
.av-page__title{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:1.5rem}
.av-page__actions{display:flex;gap:.85rem;flex-wrap:wrap;margin-top:2rem}
.av-prose h2{font-size:1.5rem;margin-top:2rem}
.av-prose h3{font-size:1.2rem;margin-top:1.5rem}
.av-prose ul,.av-prose ol{margin:0 0 1.15em 1.25rem}
.av-prose li{list-style:disc;margin-bottom:.4rem}
.av-prose ol li{list-style:decimal}

/* ---------- Breakpointy ---------- */
@media (max-width:1040px){
.av-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
.av-about,.av-process,.av-consult,.av-contact__in{grid-template-columns:1fr}
.av-process__intro{position:static}
.av-method__item{grid-template-columns:1fr}
.av-method__item:nth-child(even) .av-method__media{order:0}
}
@media (max-width:620px){
.av-grid--3,.av-grid--4,.av-about__cards{grid-template-columns:1fr}
.av-contact__list li{grid-template-columns:1fr;gap:.2rem}
.av-band__actions .av-btn{width:100%}
.av-steps__item{grid-template-columns:1fr;gap:.5rem}
.av-footer__bar{flex-direction:column}
}

/* Kotwice pod sticky navem, bez tego CTA #kontakt chowa naglowek pod paskiem */
[id]{scroll-margin-top:96px}
/* Cel kotwicy dostaje fokus z main.js (tabindex -1, jak po natywnej kotwicy).
   To sekcja albo karta formularza, nie kontrolka: bez obwodki na calym bloku. */
[data-av-cel]:focus{outline:none}
.av-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.av-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.av-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mikro-dowód zaufania pod przyciskiem formularza */
.av-form__proof{display:flex;align-items:center;justify-content:center;gap:.5rem;
margin:.85rem 0 0;font-size:.82rem;font-weight:600;color:var(--av-ink-soft)}
.av-form__proof .av-stars{color:var(--av-accent);font-size:.9rem}

/* ---------- Partnerzy ---------- */
.av-partners__item{background:var(--av-surface);display:flex;flex-direction:column}
.av-partners__logo{display:flex;align-items:center;justify-content:center;min-height:104px;
padding:1.35rem 1.5rem;border-bottom:var(--av-border-w) solid var(--av-line);background:var(--av-surface)}
.av-partners__logo img{max-height:44px;width:auto;filter:grayscale(1);opacity:.72;
transition:opacity var(--av-ease),filter var(--av-ease)}
.av-partners__item:hover .av-partners__logo img{filter:none;opacity:1}
.av-partners__wordmark{font-weight:700;letter-spacing:.02em;color:var(--av-ink-soft)}
.av-partners__body{padding:clamp(1.25rem,2vw,1.65rem);display:flex;flex-direction:column;gap:.4rem;flex:1}
.av-partners__role{margin:0;font-size:.72rem;font-weight:700;letter-spacing:var(--av-tracking-eyebrow);
text-transform:uppercase;color:var(--av-ink-soft)}
.av-partners__text{margin:0;font-size:.88rem;line-height:1.6;color:var(--av-ink-soft)}
.av-partners__link{margin-top:auto;padding-top:.75rem;font-size:.82rem;font-weight:650;
color:var(--av-ink);text-decoration:none;border-bottom:2px solid var(--av-accent);align-self:flex-start}
.av-partners__link:hover{color:var(--av-accent-ink)}
.av-partners__note{margin:1.5rem 0 0;text-align:center;font-size:.84rem;color:var(--av-ink-soft)}

/* ---------- Profile spolecznosciowe w stopce ---------- */
.av-footer__social{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.15rem}
.av-footer__social a{display:inline-block;padding:.35rem .75rem;font-size:.78rem;font-weight:650;
letter-spacing:.03em;text-decoration:none;color:var(--av-on-dark);
border:var(--av-border-w) solid var(--av-line-dark);transition:all var(--av-ease)}
.av-footer__social a:hover{background:var(--av-accent);color:var(--av-on-accent);border-color:var(--av-accent)}


/* ---------- Slider (portfolio, partnerzy) ----------
   Track to scroll-snap: bez JS to zwykla przewijalna lista, z JS dochodza
   strzalki i kropki. Zadna tresc nie jest ukryta przed czytnikiem ekranu. */
.av-slider{position:relative}
.av-slider__head{display:flex;align-items:flex-end;justify-content:space-between;
gap:1.5rem;margin-bottom:clamp(1.5rem,3vw,2.25rem)}
/* Flex, nie grid: karty w portfolio maja rozne szerokosci, a grid-auto-columns
   wymusza jedna wartosc na wszystkie kolumny. Szerokosc MUSI byc sztywna
   (flex:0 0 X), inaczej karty zapadaja sie do zera przy 17 slajdach. */
/* Pasek przewijania schowany: nawigacje przejely strzalki i kropki pod trackiem,
   a systemowy suwak dokladal trzeci, niespojny element sterowania.
   Przewijanie gestem i kolkiem dziala dalej. */
.av-slider__track{display:flex;gap:clamp(1rem,2vw,1.5rem);
overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:0;
scrollbar-width:none;-ms-overflow-style:none}
.av-slider__track::-webkit-scrollbar{display:none}
.av-slider__track>*{scroll-snap-align:start;flex:0 0 var(--av-slide,300px)}
.av-slider__track:focus-visible{outline:2px solid var(--av-accent);outline-offset:4px}

.av-slider__foot{display:flex;align-items:center;justify-content:center;
gap:clamp(.75rem,2vw,1.5rem);margin-top:1.75rem}
.av-slider__nav{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.av-slider__btn{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;
background:var(--av-surface);color:var(--av-ink);cursor:pointer;
border:var(--av-border-w) solid var(--av-line);transition:all var(--av-ease)}
.av-slider__btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.av-slider__btn:hover:not(:disabled){background:var(--av-accent);border-color:var(--av-accent);color:var(--av-on-accent)}
.av-slider__btn:disabled{opacity:.3;cursor:default}
.av-sec--dark .av-slider__btn,.av-sec--dark .av-slider__btn{background:transparent;color:var(--av-on-dark);border-color:var(--av-line-dark)}

.av-slider__dots{display:flex;justify-content:center;align-items:center;gap:.5rem;margin:0;flex-wrap:wrap}
/* Pasek zostaje 4 px wysoki, ale sam cel dotyku ma 24 px: padding powieksza
   obszar klikalny, background-clip trzyma kolor wylacznie na tresci, a ujemny
   margines oddaje ukradzione 20 px, wiec stopka slidera nie rosnie. */
.av-slider__dot{width:28px;height:4px;padding:10px 0;margin:-10px 0;box-sizing:content-box;
background-clip:content-box;cursor:pointer;background-color:var(--av-line);
border:0;transition:background-color var(--av-ease),width var(--av-ease)}
.av-slider__dot:hover{background-color:var(--av-accent-dark)}
.av-slider__dot.is-active{background-color:var(--av-accent);width:44px}
.av-slider:not(.is-live) .av-slider__foot{display:none}

/* Portfolio: karta sprzedanej nieruchomosci */
.av-sold__item{background:var(--av-surface);border:var(--av-border-w) solid var(--av-line);
display:flex;flex-direction:column;transition:border-color var(--av-ease)}
.av-sold__item:hover{border-color:var(--av-accent)}
.av-sold__media{position:relative;overflow:hidden;background:var(--av-surface-alt)}
.av-sold__media img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .5s ease}
.av-sold__item:hover .av-sold__media img{transform:scale(1.04)}
.av-sold__flag{position:absolute;top:0;left:0;padding:.4rem .85rem;
background:var(--av-accent);color:var(--av-on-accent);
font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.av-sold__body{padding:1.15rem 1.25rem;border-top:var(--av-border-w) solid var(--av-line)}
.av-sold__body .av-h4{margin:0 0 .3rem;font-size:.98rem}
.av-sold__meta{margin:0;font-size:.84rem;color:var(--av-ink-soft);font-weight:650}

/* Partnerzy w sliderze: karta ma pelna wysokosc traku */
.av-slider__track .av-partners__item{border:var(--av-border-w) solid var(--av-line);height:100%}

@media (max-width:700px){
.av-slider__head{flex-direction:column;align-items:flex-start;gap:1rem}
}

/* ---------- Przerywnik parallax ----------
   Sam obraz, bez tresci i bez welonu. Zdjecie stoi, strona plynie po nim.
   clip-path przycina dziecko z position:fixed do obszaru sekcji, dzieki czemu
   tlem jest prawdziwy <img> (AVIF/WebP + srcset), a nie background-image,
   ktorego zadna wtyczka obrazkowa nie przekonwertuje. */
.av-parallax{position:relative;height:40vh;min-height:280px;max-height:520px;
overflow:hidden;background:var(--av-surface-alt)}
.av-parallax__media{position:absolute;inset:0;overflow:hidden}
.av-parallax__media img{width:100%;height:100%;object-fit:cover;object-position:center}
@supports (clip-path:inset(0)){
  .av-parallax{clip-path:inset(0)}
  .av-parallax__media{position:fixed}
}
/* Na dotyku i przy redukcji ruchu zdjecie stoi w sekcji, nie w oknie:
   position:fixed w iOS Safari powoduje skoki przy chowaniu paska adresu. */
@media (hover:none),(prefers-reduced-motion:reduce){
  .av-parallax__media{position:absolute}
}

/* ---------- Kafelki liczb: ramka + duza zolta wartosc ---------- */
.av-stats__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--av-line-dark)}
.av-stats__item{background:var(--av-surface-dark);padding:clamp(1.5rem,2.6vw,2.15rem)}
.av-stats__item dt{font-family:var(--av-font-head);font-weight:var(--av-head-weight);
font-size:clamp(2rem,3.6vw,2.9rem);line-height:1;letter-spacing:-.03em;color:var(--av-accent);
overflow-wrap:anywhere}
.av-stats__item dd{margin:.6rem 0 0;font-size:.86rem;line-height:1.5;color:var(--av-on-dark-soft)}
@media (max-width:900px){.av-stats__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.av-stats__grid{grid-template-columns:1fr}}

/* ---------- Zdjecie w ramce z zoltym offsetem ---------- */
.av-frame{position:relative;margin:0;border:var(--av-border-w) solid var(--av-line)}
.av-frame::before{content:"";position:absolute;inset:-14px -14px auto auto;
width:58%;height:58%;border:2px solid var(--av-accent);z-index:-1;pointer-events:none}
.av-about__side,.av-consult__media,.av-contact__photo{isolation:isolate}

/* ---------- Prezentacja oferty (zdjecia, staging) ---------- */
/* Tekst dostaje mniej miejsca, zeby suwak przed/po mogl byc wiekszy:
   to on jest dowodem w tej sekcji, a nie akapit obok niego. */
.av-staging{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
gap:clamp(2rem,4vw,3.25rem);align-items:start}
.av-staging__figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:1.5rem;margin:2rem 0 0;padding-top:1.75rem;border-top:var(--av-border-w) solid var(--av-line-dark)}
.av-staging__figures dt{font-family:var(--av-font-head);font-weight:var(--av-head-weight);
font-size:clamp(1.7rem,3vw,2.4rem);line-height:1;letter-spacing:-.03em;color:var(--av-accent)}
.av-staging__figures dd{margin:.45rem 0 0;font-size:.84rem;line-height:1.45;color:var(--av-on-dark-soft)}
.av-staging__media{margin:0;position:relative;border:var(--av-border-w) solid var(--av-line-dark)}
.av-staging__media img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.av-staging__media figcaption{padding:.9rem 1.1rem;font-size:.82rem;line-height:1.5;
color:var(--av-on-dark-soft);border-top:var(--av-border-w) solid var(--av-line-dark)}
@media (max-width:1040px){.av-staging{grid-template-columns:1fr}}


/* ---------- Porownanie: jedna siatka, wiersze wyrownane z konstrukcji ---------- */
.av-cmp{--av-cmp-cols:minmax(150px,.85fr) minmax(0,1.15fr) minmax(0,1.15fr);
margin-top:clamp(1.75rem,3vw,2.5rem);border:var(--av-border-w) solid var(--av-line)}
.av-cmp__thead,.av-cmp__row{display:grid;grid-template-columns:var(--av-cmp-cols);align-items:stretch}
.av-cmp__thead{background:var(--av-surface-dark);color:var(--av-on-dark)}
.av-cmp__th{display:flex;flex-direction:column;gap:.3rem;justify-content:flex-end;
padding:1.1rem 1.25rem;font-size:.95rem}
.av-cmp__th--crit{font-size:.72rem;font-weight:700;letter-spacing:var(--av-tracking-eyebrow);
text-transform:uppercase;color:var(--av-on-dark-soft)}
.av-cmp__th--win{background:var(--av-accent);color:var(--av-on-accent)}
.av-cmp__th strong{font-family:var(--av-font-head);font-size:1.05rem;font-weight:var(--av-head-weight);line-height:1.25}
.av-cmp__flag{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.av-cmp__flag--muted{color:var(--av-on-dark-soft)}

.av-cmp__row+.av-cmp__row,.av-cmp__thead+.av-cmp__row{border-top:var(--av-border-w) solid var(--av-line)}
.av-cmp__row:nth-child(even){background:var(--av-surface-alt)}
.av-cmp__crit{padding:1rem 1.25rem;font-size:.82rem;font-weight:700;letter-spacing:.04em;
text-transform:uppercase;color:var(--av-ink-soft);display:flex;align-items:center}
.av-cmp__cell{display:flex;gap:.6rem;align-items:flex-start;padding:1rem 1.25rem;font-size:.94rem;line-height:1.5}
.av-cmp__cell--win{background:rgba(var(--av-accent-rgb),.09);font-weight:600;
box-shadow:inset 3px 0 0 var(--av-accent)}
.av-cmp__cell--lose{color:var(--av-ink-soft)}
.av-cmp__mark{flex:none;width:18px;height:18px;margin-top:.15rem;position:relative}
.av-cmp__mark--yes::before,.av-cmp__mark--yes::after,
.av-cmp__mark--no::before,.av-cmp__mark--no::after{content:"";position:absolute;background:currentColor}
.av-cmp__mark--yes{color:var(--av-success)}
.av-cmp__mark--yes::before{left:2px;top:9px;width:6px;height:2px;transform:rotate(45deg)}
.av-cmp__mark--yes::after{left:5px;top:6px;width:12px;height:2px;transform:rotate(-50deg)}
.av-cmp__mark--no{color:var(--av-error);opacity:.75}
.av-cmp__mark--no::before,.av-cmp__mark--no::after{left:2px;top:8px;width:14px;height:2px}
.av-cmp__mark--no::before{transform:rotate(45deg)}
.av-cmp__mark--no::after{transform:rotate(-45deg)}

@media (max-width:860px){
  .av-cmp__thead{display:none}
  .av-cmp__row{grid-template-columns:1fr}
  .av-cmp__crit{padding-bottom:.35rem;background:var(--av-surface-alt)}
  .av-cmp__row:nth-child(even){background:transparent}
  .av-cmp__cell--win{box-shadow:inset 3px 0 0 var(--av-accent)}
  .av-cmp__cell::before{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  align-self:center;flex:none;width:3.2rem;color:var(--av-ink-soft)}
  .av-cmp__cell--win::before{content:"ZE MNĄ";color:var(--av-ink-soft)}
  .av-cmp__cell--lose::before{content:"SAM"}
}

/* ---------- Portfolio: wstega zebata ----------
   Duze prostokaty biegna od lewej do prawej. Nieparzyste maja zdjecie u gory
   i opis pod spodem, parzyste odwrotnie: opis u gory, zdjecie pod nim.
   Dzieki stalej wysokosci sciezki zdjecie parzystej karty zaczyna sie dokladnie
   tam, gdzie konczy sie opis nieparzystej, wiec calosc zazebia sie w rytm. */
/* 38vw daje na 1440px trzy kadry, z ktorych trzeci jest ucinany krawedzia
   ekranu. To ucinanie jest celowe: mowi uzytkownikowi, ze wstega leci dalej. */
.av-slider--portfolio{--av-pf-media:380px;--av-pf-body:122px}
/* Naglowek portfolio siedzi blizej kadrow: domyslny odstep sekcji zostawial
   dziure, ktora rozbijala zwiazek miedzy tytulem a wstega. */
.av-slider--portfolio .av-slider__head{margin-bottom:clamp(.75rem,1.5vw,1.15rem)}
.av-slider--portfolio .av-slider__head .av-shead{margin-bottom:0}
.av-slider--portfolio .av-slider__track{
  align-items:stretch;
  height:calc(var(--av-pf-media) + var(--av-pf-body));
  gap:0;   /* zdjecia maja stykac sie bez przerw */
  /* Wstega ma biec od krawedzi do krawedzi, a nie konczyc sie na kontenerze.
     Naglowek sekcji zostaje w kolumnie tekstowej. */
  width:100vw;margin-left:calc(50% - 50vw);
  padding-inline:var(--av-pad-x);scroll-padding-inline:var(--av-pad-x)}
.av-slider--portfolio .av-sold__item{
  flex:0 0 clamp(320px,38vw,560px);
  display:flex;flex-direction:column;justify-content:flex-start;
  background:none;border:0;height:100%}
.av-slider--portfolio .av-sold__media{
  flex:none;height:var(--av-pf-media);border:0;outline:0;
  background:var(--av-surface-alt)}
.av-slider--portfolio .av-sold__media img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.av-slider--portfolio .av-sold__item:hover .av-sold__media img{transform:scale(1.03)}

/* Opis: miasto jako mala etykieta nad ulica. Plakietka SPRZEDANE jest juz
   na zdjeciu, wiec podpis nie powtarza tej informacji drugi raz. */
.av-slider--portfolio .av-sold__body{
  flex:none;height:var(--av-pf-body);border:0;
  padding:.95rem 1rem 0;display:flex;flex-direction:column-reverse;
  justify-content:flex-end;align-items:center;text-align:center;gap:.35rem;
  border-top:2px solid var(--av-accent)}
.av-slider--portfolio .av-sold__body .av-h4{
  margin:0;font-size:1.15rem;line-height:1.2;letter-spacing:-.015em}
.av-slider--portfolio .av-sold__meta{
  margin:0;font-size:.7rem;font-weight:700;letter-spacing:var(--av-tracking-eyebrow);
  text-transform:uppercase;color:var(--av-ink-soft)}

@media (max-width:700px){
  /* Na telefonie jeden kadr na ekran, na cala szerokosc: przy 78vw sasiednie
     zdjecie zaglada zza krawedzi i rozprasza. */
  .av-slider--portfolio{--av-pf-media:62vw;--av-pf-body:104px}
  .av-slider--portfolio .av-slider__track{padding-inline:0;scroll-padding-inline:0}
  .av-slider--portfolio .av-sold__item{flex-basis:100vw}
  .av-slider--portfolio .av-sold__body{padding-inline:var(--av-pad-x)}
}

/* Plakietka siada na dolnej krawedzi kadru, tej stykajacej sie z podpisem,
   dzieki czemu plakietka i podpis czytaja sie jako jeden blok. */
.av-slider--portfolio .av-sold__flag{
  left:50%;transform:translateX(-50%);top:auto;bottom:0;
  padding:.45rem 1.1rem;letter-spacing:.14em}
.av-slider--portfolio .av-sold__media img{transition:transform .5s ease}

/* ---------- Zdjecia towarzyszace dluzszemu tekstowi ----------
   Kolumna ze zdjeciem jest krotsza od kolumny tekstu i zostawialaby pod soba
   puste pole. Sticky sprawia, ze zdjecie towarzyszy czytaniu zamiast wisiec
   u gory. Offset liczony z realnej wysokosci nawigacji, bo ona jest sticky. */


/* ---------- Plywajaca belka CTA ---------- */
.av-ctabar{position:fixed;left:0;right:0;bottom:0;z-index:110;
background:var(--av-surface-dark);color:var(--av-on-dark);
border-top:2px solid var(--av-accent);
transform:translateY(100%);transition:transform var(--av-ease)}
.av-ctabar.is-visible{transform:translateY(0)}
.av-ctabar__in{display:flex;align-items:center;justify-content:space-between;
gap:1.5rem;padding-block:.85rem;flex-wrap:wrap}
.av-ctabar__msg{margin:0;font-family:var(--av-font-head);font-weight:600;
font-size:1.02rem;line-height:1.3}
.av-ctabar__actions{display:flex;gap:.75rem;flex-shrink:0}
.av-ctabar .av-btn{min-height:44px;padding:.6rem 1.2rem;font-size:.9rem}
.av-ctabar .av-btn--ghost{color:var(--av-on-dark);border-color:rgba(255,255,255,.4)}
/* Przycisk tylko z ikona, w zieleni WhatsAppa: znak rozpoznawalny bez podpisu.
   Selektor musi byc podwojny, bo ".av-ctabar .av-btn" wyzej ustawia padding
   1.2rem i przy pojedynczej klasie zostawalo na ikone 5 px.
   Zielen na tle belki ma 8.91:1, wiec obrys przycisku jest czytelny; bialy
   znak w srodku to lockup marki. */
.av-ctabar .av-ctabar__wa{display:inline-flex;align-items:center;justify-content:center;
width:48px;min-height:48px;padding:0;flex:none;
background:#25d366;border-color:#25d366;color:#fff}
.av-ctabar .av-ctabar__wa:hover{background:#1ebe5d;border-color:#1ebe5d;color:#fff}
.av-ctabar .av-ctabar__wa svg{width:26px;height:26px}
.av-ctabar .av-btn--ghost:hover{background:var(--av-on-dark);color:var(--av-ink)}
/* Na mobile rolę belki pełni av-callbar, dwa paski na raz zjadłyby ekran. */
@media (max-width:900px){.av-ctabar{display:none}}
@media (prefers-reduced-motion:reduce){.av-ctabar{transition:none}}

/* ---------- Kroki procesu ze zdjeciem ---------- */
.av-steps__media{overflow:hidden;background:var(--av-surface-alt)}
.av-steps__media img{width:100%;height:100%;min-height:200px;object-fit:cover;display:block;
transition:transform .5s ease}
.av-steps__item:hover .av-steps__media img{transform:scale(1.03)}
.av-steps__body{padding:clamp(1.25rem,2.5vw,1.9rem) clamp(1.25rem,2.5vw,1.9rem) clamp(1.25rem,2.5vw,1.9rem) 0}
/* Karta bez kadru: jedna kolumna i padding takze z lewej, bo nie ma juz
   zdjecia, ktore tam stalo. Bez tego tekst wchodzil w slupek 230px
   przeznaczony na obrazek, a druga polowa karty zostawala pusta. */
.av-steps__item--bez-kadru{grid-template-columns:1fr}
.av-steps__item--bez-kadru .av-steps__body{padding-left:clamp(1.25rem,2.5vw,1.9rem)}
.av-steps__body p{margin:0;color:var(--av-ink-soft);line-height:1.6}
.av-steps__body .av-h3{margin-bottom:.5rem}
@media (max-width:820px){
  .av-steps__item{grid-template-columns:1fr}
  .av-steps__media img{min-height:180px;max-height:240px}
  .av-steps__body{padding:1.25rem}
}


/* ---------- Sekcja na zdjeciu (liczby, FAQ) ----------
   Zdjecie jako <img>, nie background-image: tla CSS nie przechodza przez
   konwersje do AVIF/WebP w zadnej metodzie Imagify. */
.av-sec--photo{position:relative;isolation:isolate;
background:var(--av-surface-dark);color:var(--av-on-dark)}
.av-sec__bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.av-sec__bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.av-sec--photo::after{content:"";position:absolute;inset:0;z-index:-1;
background:rgba(var(--av-ink-rgb),var(--av-scrim,.86))}
.av-sec--photo .av-h2,.av-sec--photo .av-h3{color:var(--av-on-dark)}
.av-sec--photo .av-lead{color:var(--av-on-dark-soft)}
.av-sec--photo .av-eyebrow{color:var(--av-accent)}

/* Kafelki liczb na zdjeciu */
.av-sec--photo .av-stats__grid{background:transparent;gap:clamp(1rem,2vw,1.5rem)}
.av-sec--photo .av-stats__item{background:rgba(255,255,255,.05);
border:var(--av-border-w) solid rgba(255,255,255,.14);
padding:clamp(1.35rem,2.4vw,1.9rem);display:flex;flex-direction:column;gap:.7rem}
.av-stats__top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.av-stats__value{margin:0;font-family:var(--av-font-head);font-weight:var(--av-head-weight);
font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1;letter-spacing:-.03em;color:var(--av-accent)}
.av-stats__icon{flex:none;display:grid;place-items:center;width:40px;height:40px;
border:var(--av-border-w) solid rgba(var(--av-accent-rgb),.45);color:var(--av-accent)}
.av-stats__icon svg{width:20px;height:20px}
.av-stats__label{margin:0;font-size:.88rem;line-height:1.5;color:var(--av-on-dark-soft)}


/* Formularz kontaktowy jedzie z uzytkownikiem przy dlugiej liscie danych obok */
@media (min-width:1041px){
  .av-contact__form{position:sticky;top:calc(var(--av-nav-h,80px) + 1.5rem)}
}

/* ---------- Plakietki social na zdjeciu w kontakcie ---------- */
.av-contact__photo{position:relative}
.av-contact__social{position:absolute;right:.85rem;bottom:.85rem;z-index:2;
display:flex;gap:.5rem;margin:0;padding:0;list-style:none}
.av-contact__social a{display:grid;place-items:center;width:40px;height:40px;
background:rgba(var(--av-ink-rgb),.72);color:#fff;
border:var(--av-border-w) solid rgba(255,255,255,.28);
transition:background var(--av-ease),color var(--av-ease),border-color var(--av-ease)}
.av-contact__social a:hover{background:var(--av-accent);color:var(--av-on-accent);border-color:var(--av-accent)}
.av-contact__social svg{width:19px;height:19px}

/* Zamkniecie belki: delikatne, w prawym rogu, nie konkuruje z CTA */
.av-ctabar__in{position:relative;padding-right:2.5rem}
.av-ctabar__close{position:absolute;right:0;top:50%;transform:translateY(-50%);
display:grid;place-items:center;width:32px;height:32px;padding:0;cursor:pointer;
background:none;border:0;color:var(--av-on-dark-soft);opacity:.65;
transition:opacity var(--av-ease),color var(--av-ease)}
.av-ctabar__close:hover{opacity:1;color:var(--av-accent)}
.av-ctabar__close svg{width:17px;height:17px}

/* ---------- Tasma logotypow partnerow ----------
   Jeden tor, lista w srodku dwa razy, przesuniecie o -50% szerokosci toru.
   Przy -50% druga kopia trafia dokladnie tam, gdzie stala pierwsza, wiec
   petla jest bezszwowa niezaleznie od liczby logotypow i szerokosci okna. */
.av-marquee{padding-block:clamp(1rem,2vw,1.5rem);
border-block:var(--av-border-w) solid var(--av-line);background:var(--av-surface);
overflow-x:clip}
.av-marquee__title{display:none;margin:0 0 1.5rem;text-align:center;font-size:.72rem;font-weight:700;
letter-spacing:var(--av-tracking-eyebrow);text-transform:uppercase;color:var(--av-ink-soft)}
.av-marquee__viewport{overflow-x:clip;overflow-y:visible;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.av-marquee__track{display:flex;align-items:center;width:max-content;
margin:0;padding:0;list-style:none;gap:clamp(2.5rem,5vw,4.5rem);
animation:av-marquee 40s linear infinite}
/* Tasma jedzie caly czas: zadnego zatrzymywania ani reakcji na kursor. */
.av-marquee__track li{flex:0 0 auto;display:flex;align-items:center;position:relative}
/* Wszystkie pliki logo maja identyczne plotno 640x180 z wyrownana masa
   optyczna znaku, wiec sama wysokosc daje juz rowny rzad. max-width jest
   celowo zdjety: wczesniej dusil szerokie wordmarki do polowy wysokosci. */
.av-marquee__track img{height:calc(64px * var(--av-logo-scale,1));width:auto;max-width:none;object-fit:contain;
/* Domyslnie szarosc, kolor dopiero pod kursorem: rzad logotypow ma byc tlem
   dla tresci, a nie piecioma konkurencyjnymi paletami tuz pod hero. */
filter:grayscale(1);opacity:.62;
transition:filter var(--av-ease),opacity var(--av-ease)}
.av-marquee__track li:hover img,
.av-marquee__track li:focus-within img{filter:none;opacity:1}
@media (prefers-reduced-motion:reduce){
  .av-marquee__track img{transition:none}
}
.av-marquee__wordmark{font-family:var(--av-font-head);font-weight:700;
letter-spacing:.02em;color:var(--av-ink-soft);white-space:nowrap}
@keyframes av-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .av-marquee__track{animation:none}
  .av-marquee__viewport{overflow-x:auto;scrollbar-width:none}
  .av-marquee__viewport::-webkit-scrollbar{display:none}
}

/* ---------- Ikona w karcie gwarancji ---------- */
/* Ikona w gwarancjach: wieksza i z wypelnieniem, zeby czytala sie jako znak,
   a nie drobna ramka obok tekstu. */
.av-guarantee__item .av-stats__icon{width:56px;height:56px;margin-bottom:1.1rem;
background:var(--av-surface-dark);border-color:var(--av-surface-dark);color:var(--av-on-dark)}
/* Ikona biala, nie w akcencie: kobalt na granatowym kaflu ma 3,35:1, bialy 16,3:1. */
.av-guarantee__item .av-stats__icon svg{width:28px;height:28px}
.av-guarantee__item{transition:border-color var(--av-ease)}
.av-guarantee__item:hover{border-color:var(--av-accent)}

/* ---------- Proces: karty sklejaja sie w stos (wzorzec z ROW) ----------
   Kazda karta jest sticky z offsetem rosnacym o 18px na pozycje, wiec przy
   przewijaniu nasuwaja sie na siebie jak harmonijka. Zero JavaScriptu. */
@media (min-width:1041px){
  .av-process__intro{position:sticky;top:calc(var(--av-nav-h,80px) + 1.5rem);align-self:start}
  .av-steps__item{position:sticky;
  top:calc(var(--av-nav-h,80px) + 1.5rem + var(--i,0) * 18px)}
}
@media (prefers-reduced-motion:reduce){
  .av-steps__item{position:static}
}

/* ---------- WhatsApp wychodzacy ze zdjecia w kontakcie ---------- */
/* Na desktopie przycisk nachodzi na dolna krawedz zdjecia: ma czytac sie jak
   zaproszenie do rozmowy, a nie kolejna pozycja listy. Plakietki social siedza
   w przeciwleglym rogu, wiec sie nie zderzaja. Zdjecie potrzebuje prześwitu
   pod soba, inaczej przycisk zaslania pierwszy wiersz listy kontaktowej. */
.av-contact__photo{overflow:visible;margin-bottom:3rem}
.av-contact__wa{position:absolute;left:1.15rem;bottom:-1.5rem;z-index:3;
display:inline-flex;align-items:center;gap:.5rem;
min-height:46px;padding:.65rem 1.15rem;font-size:.9rem;
box-shadow:0 10px 24px rgba(10,12,13,.35)}
.av-contact__wa svg{width:18px;height:18px;flex:none}
@media (max-width:560px){
  /* Na telefonie oba elementy wchodza w normalny przeplyw pod zdjeciem:
     przycisk na pelna szerokosc nachodzil na plakietki przyklejone do rogu. */
  .av-contact__photo{display:flex;flex-direction:column;gap:.85rem;margin-bottom:0}
  .av-contact__photo img{order:0}
  .av-contact__social{position:static;order:1;justify-content:center;margin:.85rem 0 0;gap:.65rem}
  /* Poza zdjeciem plakietki nie konkuruja juz z fotografia, wiec moga byc
     wieksze: na dotyk 48 px to wygodny cel. */
  .av-contact__social a{background:rgba(255,255,255,.08);width:48px;height:48px}
  .av-contact__social svg{width:23px;height:23px}
  .av-contact__wa{position:static;order:2;width:100%;justify-content:center;
  margin:0;box-shadow:none}
  /* Ramka nalezy do zdjecia, nie do calej kolumny. Gdy plakietki i przycisk
     wchodza w przeplyw, obramowany <figure> rosnie razem z nimi i wyglada,
     jakby przyciski wyjezdzaly ze zdjecia. Dlatego na mobile ramke przejmuje
     sam obrazek, a ozdobny naroznik znika: nie ma juz do czego przylegac. */
  .av-contact__photo{border:0}
  .av-contact__photo::before{display:none}
  .av-contact__photo img{border:var(--av-border-w) solid var(--av-line-dark)}
}

/* ---------- Suwak przed/po (home staging) ----------
   Kadr z radiusem kart, etykiety jako pigulki, uchwyt okragly (1.8.8). Do 1.8.7
   suwak byl jedynym prostokatem w sekcji: ostre rogi kadru, kwadratowe etykiety
   i kwadratowy uchwyt tuz nad zaokraglona karta wyniku i miniaturami pokoi
   (przeglad 07.10.2026: "nie mieszac zaokraglen i prostych kresek"). */
.av-ba{margin:0}
.av-ba__frame{position:relative;overflow:hidden;user-select:none;border-radius:var(--av-radius-lg);
border:var(--av-border-w) solid var(--av-line-dark);background:var(--av-surface-dark)}
.av-ba__after,.av-ba__before{display:block}
.av-ba__after img,.av-ba__before img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
/* Warstwa "przed" lezy na "po" i jest przycinana szerokoscia. Bez JS ma 50%. */
.av-ba__before{position:absolute;inset:0;width:50%;overflow:hidden}
.av-ba__before img{width:auto;height:100%;max-width:none}
.av-ba__frame{--av-ba-w:100%}
.av-ba__label{position:absolute;top:1rem;padding:.35rem .85rem;border-radius:var(--av-radius-pill);
font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
background:rgba(var(--av-ink-rgb),.82);color:#fff}
.av-ba__label--before{left:1rem}
.av-ba__label--after{right:1rem;background:var(--av-accent);color:var(--av-on-accent)}
.av-ba__handle{position:absolute;top:0;bottom:0;left:50%;width:2px;
background:var(--av-accent);transform:translateX(-1px);pointer-events:none}
.av-ba__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
background:var(--av-accent);color:var(--av-on-accent);
box-shadow:0 4px 16px rgba(10,12,13,.4)}
.av-ba__grip svg{width:20px;height:20px}
/* Suwak lezy na calym kadrze i jest niewidoczny: obsluge wizualna przejmuje uchwyt. */
.av-ba__range{position:absolute;inset:0;width:100%;height:100%;margin:0;border-radius:inherit;
opacity:0;cursor:ew-resize;appearance:none;background:none}
.av-ba__range:focus-visible{opacity:1;outline:3px solid var(--av-accent);outline-offset:-3px}
.av-ba:not(.is-live) .av-ba__handle{display:none}
.av-ba__hint{margin:.9rem 0 0;font-size:.82rem;color:var(--av-on-dark-soft)}

/* Numer w kolumnie procesu: sam z siebie wyglada jak przypadkowa liczba,
   wiec dostaje etykiete i wyraznie czyta sie jako druga sciezka kontaktu. */
.av-process__tel{display:flex;flex-direction:column;gap:.15rem;margin-top:1.5rem;
padding-top:1.25rem;border-top:var(--av-border-w) solid var(--av-line)}
.av-process__tel-label{font-size:.72rem;font-weight:700;
letter-spacing:var(--av-tracking-eyebrow);text-transform:uppercase;color:var(--av-ink-soft)}
.av-process__tel a{font-family:var(--av-font-head);font-weight:700;
font-size:1.3rem;letter-spacing:-.01em;text-decoration:none;color:var(--av-ink)}
.av-process__tel a:hover{color:var(--av-accent-ink)}

/* CTA na przerywniku parallax: pojawia sie tylko tam, gdzie config je poda,
   wiec nie kazdy divider zamienia sie w kolejne wezwanie do dzialania. */
.av-parallax--cta{display:grid;place-items:center}
.av-parallax--cta::before{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(rgba(var(--av-ink-rgb),.28),rgba(var(--av-ink-rgb),.62))}
.av-parallax__cta{position:relative;z-index:2;text-align:center;
padding-inline:var(--av-pad-x);max-width:44rem}
.av-parallax__cta p{margin:0 0 1.25rem;font-family:var(--av-font-head);
font-weight:var(--av-head-weight);line-height:1.2;letter-spacing:-.02em;
font-size:clamp(1.35rem,3vw,2.15rem);color:#fff;text-shadow:0 2px 16px rgba(10,12,13,.6)}

/* ---------- Dlaczego my: zdjecie agenta + kafelki 2 w rzedzie ----------
   Uklad z metrohouse-row. Zdjecie jest przyklejone, bo kolumna zalet jest
   od niego dluzsza i inaczej zostawialaby pod nim puste pole. */
.av-why{display:grid;gap:1px;background:var(--av-line-dark);
grid-template-columns:repeat(3,minmax(0,1fr))}
.av-why--photo{background:none;gap:clamp(1.75rem,3.5vw,3rem);
grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}
.av-why__media{position:relative;margin:0;isolation:isolate;
border:var(--av-border-w) solid var(--av-line-dark)}
/* 4:5 zamiast 3:4: przy 3:4 figura miala 736px, czyli tyle co cale okno po
   odjeciu nawigacji, wiec przyklejenie nie mialo czego przewijac. */
.av-why__media img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 22%;display:block}
/* Portret przycinany do 4:5 traci gore albo dol; 22% trzyma glowe w kadrze. */
/* Zolta ramka offsetowa: ten sam akcent, co przy zdjeciu w sekcji o nas. */
.av-why__media::before{content:"";position:absolute;inset:auto auto -14px -14px;
width:58%;height:42%;border:2px solid var(--av-accent);z-index:-1;pointer-events:none}
.av-why__media figcaption{padding:1.15rem 1.25rem;background:var(--av-surface-dark-alt);
border-top:var(--av-border-w) solid var(--av-line-dark)}
.av-why__media blockquote{margin:0;font-size:.95rem;line-height:1.6;color:var(--av-on-dark)}
.av-why__media cite{display:block;margin-top:.6rem;font-style:normal;font-size:.76rem;
font-weight:700;letter-spacing:var(--av-tracking-eyebrow);text-transform:uppercase;color:var(--av-accent)}

.av-why__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:1px;background:var(--av-line-dark);margin:0;padding:0;list-style:none}
.av-why__item{background:var(--av-surface-dark);position:relative;
padding:clamp(1.35rem,2.4vw,1.9rem);display:flex;flex-direction:column;gap:.45rem}
.av-why__num{font-family:var(--av-font-head);font-weight:var(--av-head-weight);
font-size:.85rem;letter-spacing:.1em;color:var(--av-accent)}
.av-why__item .av-h4{margin:0;color:var(--av-on-dark)}
.av-why__item p{margin:0;font-size:.9rem;line-height:1.6;color:var(--av-on-dark-soft)}
.av-why__badge{align-self:flex-start;margin-top:auto;padding-top:.6rem;
font-size:.68rem;font-weight:700;letter-spacing:var(--av-tracking-eyebrow);
text-transform:uppercase;color:var(--av-accent)}


/* Bez zdjecia (1.1.9, images.why_photo pusty): .av-why zostawal siatka 3 kolumn
   i cala lista kart wpadala do pierwszej z nich (waskie karty, 2/3 sekcji puste).
   Teraz lista zajmuje cala szerokosc: 3 kolumny kart na desktopie, 2 na tablecie.
   Od 620 px w dol bez zmian: jedna kolumna albo talia kart (main.js punkt 6). */
.av-why:not(.av-why--photo){grid-template-columns:minmax(0,1fr);background:none}
@media (min-width:1041px){
  .av-why:not(.av-why--photo) .av-why__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:1040px){
  .av-why,.av-why--photo{grid-template-columns:1fr}
  .av-why__media{position:relative;max-width:420px}
}
@media (max-width:620px){
  .av-why__grid{grid-template-columns:1fr}
}

/* Kontakt obok CTA na przerywniku */
.av-parallax__cta{max-width:52rem}
.av-parallax__actions{display:flex;align-items:center;justify-content:center;
gap:clamp(1rem,3vw,2.25rem);flex-wrap:wrap}
/* Telefon i mail jeden pod drugim, ikona po lewej: pionowy uklad czyta sie
   jak wizytowka, a nie jak dwa przypadkowe linki obok przycisku. */
.av-parallax__contact{display:grid;gap:.55rem;justify-items:start;
margin:0;padding:0;list-style:none;text-align:left}
.av-parallax__contact a{display:inline-flex;align-items:center;gap:.6rem;
font-family:var(--av-font-head);font-weight:650;font-size:1.02rem;
color:#fff;text-decoration:none;transition:color var(--av-ease)}
.av-parallax__contact svg{width:19px;height:19px;flex:none;color:var(--av-accent)}
.av-parallax__contact a span{border-bottom:2px solid rgba(var(--av-accent-rgb),.45);padding-bottom:.12rem;
transition:border-color var(--av-ease)}
.av-parallax__contact a:hover{color:var(--av-accent)}
.av-parallax__contact a:hover span{border-color:var(--av-accent)}
@media (max-width:620px){
  .av-parallax__actions{flex-direction:column-reverse}
  .av-parallax__contact{justify-items:center;text-align:center}
}

/* ---------- Konsultacja: dociagnieta do jezyka reszty strony ---------- */
/* Plakietka nachodzi na prawa krawedz zdjecia, po stronie tekstu: prowadzi
   wzrok z fotografii do tresci, zamiast wisiec w lewym rogu. */
.av-consult__badge{position:absolute;right:-1.25rem;bottom:1.5rem;z-index:2;
display:inline-flex;align-items:center;gap:.65rem;
background:var(--av-accent);color:var(--av-on-accent);
padding:.7rem 1.2rem;font-family:var(--av-font-head);font-size:.88rem;font-weight:700;
line-height:1.2;letter-spacing:.01em;box-shadow:0 10px 26px rgba(10,12,13,.4)}
.av-consult__badge::before{content:"";flex:none;width:9px;height:9px;
background:var(--av-on-accent)}
@media (max-width:1040px){
  .av-consult__badge{right:auto;left:1.15rem;bottom:-1.1rem}
}
/* Korzysci jako numerowana lista: to jest agenda spotkania, wiec kolejnosc
   niesie znaczenie, a numer czyta sie lepiej niz kolejny ptaszek. */
.av-consult__gains{display:grid;gap:1px;background:var(--av-line-dark);
margin:1.75rem 0 0;padding:0;list-style:none;
border-block:var(--av-border-w) solid var(--av-line-dark)}
.av-consult__gains li{display:grid;grid-template-columns:auto 1fr;gap:1rem;
align-items:baseline;background:var(--av-surface-dark);
padding:.95rem .25rem;color:var(--av-on-dark);font-size:.97rem;line-height:1.55}
.av-consult__gain-num{font-family:var(--av-font-head);font-weight:var(--av-head-weight);
font-size:.82rem;letter-spacing:.1em;color:var(--av-accent)}
.av-consult__media{position:relative;margin:0 0 2.25rem;isolation:isolate;overflow:visible;
border:var(--av-border-w) solid var(--av-line-dark)}
.av-consult__media::before{content:"";position:absolute;inset:-14px -14px auto auto;
width:56%;height:40%;border:2px solid var(--av-accent);z-index:-1;pointer-events:none}
.av-consult .av-sec__actions{margin-top:1.9rem}

/* FAQ na zdjeciu: karty zostaja kryjace, wiec czytelnosc nie zalezy od kadru. */

/* ---------- Stopka na telefonie ----------
   Kolumny obok siebie na waskim ekranie daja cztery drabinki po dwa slowa.
   Na mobile ustawiamy je jedna pod druga i centrujemy, zeby czytalo sie
   jak podpis, a nie jak rozsypana tabela. */
@media (max-width:700px){
  .av-footer__grid{grid-template-columns:1fr;gap:2rem;text-align:center}
  .av-footer__brand{align-items:center}
  /* Logo jest obrazkiem, wiec text-align:center go nie dotyczy. */
  .av-footer__logo{margin-inline:auto}
  .av-footer__desc{margin-inline:auto;max-width:46ch}
  .av-footer__social{justify-content:center}
  .av-footer__col ul{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.15rem}
  .av-footer__col li{margin:0}
  .av-footer__h{margin-bottom:.75rem}
  .av-footer__bar{flex-direction:column;align-items:center;gap:.75rem;text-align:center}
  .av-footer__legal{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1rem}
}

/* ---------- Akcent w tresci ----------
   <span class="acc"> wyroznia kluczowa frazę w zbitym akapicie. Kolor dobrany
   pod tlo: na jasnym idzie ciemniejszy wariant zoltego (5,94:1), na ciemnym
   czysty akcent marki (11,66:1). Samo pogrubienie ginie w dlugim tekscie. */
/* Akcent jako plaszczyzna, nie jako tekst: patrz brand.json -> _kontrast.
   Zamiast barwic litery na ciemne zloto, zostawiamy je czytelne i podkreslamy
   czystym kolorem marki. Akcent jest widoczny, tekst nadal spelnia WCAG. */
.acc{color:var(--av-ink);font-weight:650;
box-shadow:inset 0 -.42em 0 rgba(var(--av-accent-rgb),.35)}
.av-sec--dark .acc,.av-sec--photo .acc,.av-parallax .acc,
.av-hero--bg .acc,.av-footer .acc,.av-exit .acc{color:var(--av-accent);box-shadow:none}
.av-prose .acc,.av-lead .acc{font-weight:650}

/* Dane kontaktowe w kolumnie procesu */
/* Karta sieci pod kontaktem w procesie: biala, z logo i jednym zdaniem. */
.av-process__brand{margin-top:1.5rem;padding:1.25rem 1.35rem;background:var(--av-surface);
border:var(--av-border-w) solid var(--av-line);border-left:3px solid var(--av-accent)}
.av-process__brand-logo{height:26px;width:auto;display:block}
.av-process__brand p{margin:.7rem 0 0;font-size:.86rem;line-height:1.55;color:var(--av-ink-soft)}
.av-process__contact{display:grid;gap:.7rem;margin:1.5rem 0 0;padding-top:1.35rem;
list-style:none;border-top:var(--av-border-w) solid var(--av-line)}
.av-process__contact li{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:center}
/* Czysty zolty na bialym ma 1,52:1, czyli ponizej progu 3:1 dla elementow
   graficznych. Ikona dostaje wiec ciemna podkladke: kolor marki zostaje
   dokladnie taki, jaki ma byc, a kontrast rosnie do 11,66:1. */
.av-process__contact li::before{content:"";grid-row:1;grid-column:1;
width:34px;height:34px;background:var(--av-surface-dark)}
.av-process__contact svg{grid-row:1;grid-column:1;width:17px;height:17px;
place-self:center;color:var(--av-accent)}
.av-process__contact a,.av-process__contact span{font-size:.94rem;line-height:1.45;
color:var(--av-ink);text-decoration:none}
.av-process__contact a:hover{color:var(--av-accent-ink);text-decoration:underline}

/* ---------- Przyklejone zdjecia w sekcjach z dluzszym tekstem ----------
   CELOWO na samym koncu pliku. Reguly bazowe tych elementow ustawiaja
   position:relative dla ramek offsetowych; przy tej samej specyficznosci
   wygrywa deklaracja pozniejsza, wiec sticky musi stac jako ostatnie.
   Sticky sam ustanawia kontekst pozycjonowania, wiec ::before dziala dalej. */
@media (min-width:1041px){
  .av-about__side,
  .av-why__media,
  .av-consult__media{position:sticky;top:calc(var(--av-nav-h,80px) + 1.5rem)}
}

/* ---------- Popup wyjscia ---------- */
.av-exit{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
padding:var(--av-pad-x)}
/* KRYTYCZNE: [hidden] i .av-exit maja te sama specyficznosc, wiec display:grid
   z reguly klasowej wygrywal z domyslnym display:none. Popup zostawal wtedy
   nad cala strona jako przezroczysta warstwa i przechwytywal wszystkie klikniecia.
   Ta deklaracja musi tu byc. */
.av-exit[hidden]{display:none}
.av-exit__overlay{position:absolute;inset:0;background:rgba(8,10,11,.72);
opacity:0;transition:opacity .28s var(--av-ease)}
.av-exit__dialog{position:relative;display:grid;
grid-template-columns:minmax(0,320px) minmax(0,1fr);
width:min(880px,100%);max-height:94svh;overflow:auto;
background:var(--av-surface-dark);color:var(--av-on-dark);
border-top:3px solid var(--av-accent);
box-shadow:0 30px 80px rgba(8,10,11,.55);
opacity:0;transform:translateY(14px) scale(.985);
transition:opacity .3s var(--av-ease),transform .3s var(--av-ease)}
.av-exit.is-open .av-exit__overlay{opacity:1}
.av-exit.is-open .av-exit__dialog{opacity:1;transform:none}
.av-exit__dialog:focus{outline:none}

/* Kolumna boczna: zdjecie zabiera cala wolna wysokosc, a plakietka i kontakt
   tylko tyle, ile potrzebuja. Wysokosc dyktuje formularz w drugiej kolumnie,
   wiec zdjecie samo dopasowuje sie do okna zamiast stac na sztywnej wartosci. */
.av-exit__aside{position:relative;display:flex;flex-direction:column;
background:var(--av-surface-dark-alt)}
/* Zdjecie i plakietka ida od krawedzi do krawedzi kolumny; wlasny odstep
   dostaje dopiero lista kontaktowa. Ramka i padding wokol zdjecia robily
   z niego obrazek w obrazku. */
/* Zdjecie zabiera cala wolna wysokosc kolumny (flex:1), ale NIE wlicza sie
   do niej: <img> lezy absolutnie w ramce. W 1.7.3 samo flex:1 dawalo 582 px
   z naturalnej wysokosci pliku, lewa kolumna przerastala formularz i dialog
   przewijal sie na laptopach; stala wysokosc z kolei zostawiala pod kontaktem
   200-280 px pustego tla. Wysokosc okna dyktuje teraz tylko formularz.
   Selektor na img, nie na klase: Imagify przenosi class z <img> na <picture>. */
.av-exit__photo{position:relative;flex:1 1 auto;min-height:160px;margin:0;overflow:hidden}
.av-exit__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:var(--av-exit-photo-pos,center 12%);display:block}

/* Plakietka jako pelny akcent, nie sam zolty tekst: na tej kolumnie ma byc
   jedynym mocnym punktem i prowadzic wzrok do danych kontaktowych. */
.av-exit__badge{flex:none;display:flex;align-items:center;gap:.5rem;margin:0;
padding:.7rem clamp(1rem,2vw,1.35rem);background:var(--av-accent);color:var(--av-on-accent);
font-size:.72rem;font-weight:800;line-height:1.25;
letter-spacing:var(--av-tracking-eyebrow);text-transform:uppercase}
.av-exit__badge svg{flex:none;width:16px;height:16px}

/* Wiekszy odstep od dolu podnosi plakietke i kontakt nad krawedz okna,
   zdjecie oddaje te wysokosc (flex:1). */
.av-exit__contact{flex:none;display:grid;gap:.45rem;list-style:none;
margin:0;padding:clamp(1rem,2vw,1.35rem) clamp(1rem,2vw,1.35rem) clamp(1.75rem,4svh,2.5rem)}
.av-exit__who{font-family:var(--av-font-head);font-weight:700;font-size:1rem;
color:var(--av-on-dark);margin-bottom:.1rem}
.av-exit__contact a{display:flex;align-items:center;gap:.55rem;
font-size:.92rem;color:var(--av-on-dark);text-decoration:none;
transition:color var(--av-ease)}
.av-exit__contact a svg{flex:none;width:16px;height:16px;color:var(--av-accent);
transition:color var(--av-ease)}
.av-exit__contact a:hover{color:var(--av-accent)}
.av-exit__contact a span{min-width:0;overflow-wrap:anywhere}

/* Pion liczony od wysokosci okna: staly padding na laptopie 1366x768
   dopychal formularz do granicy okna. */
.av-exit__body{padding:clamp(1.1rem,3svh,2.25rem) clamp(1.5rem,3vw,2.25rem)}
/* Tytul w jednym wierszu: w 1.8.3 lamal sie na dwa od 1440 px wzwyz. */
.av-exit__title{font-family:var(--av-font-head);font-weight:var(--av-head-weight);
font-size:clamp(1.2rem,1.9vw,1.55rem);line-height:1.2;letter-spacing:-.02em;
white-space:nowrap;margin:0 0 1.1rem;color:var(--av-on-dark)}
.av-exit__text{margin:0 0 1.25rem;font-size:.95rem;line-height:1.6;color:var(--av-on-dark-soft)}
/* Nizsze ekrany laptopow (768, 720 px): ciasniejsze odstepy, zeby dialog
   miescil sie bez przewijania. Na wysokich ekranach wyglada jak dotad. */
@media (max-height:820px){
  .av-exit__body .av-eyebrow{margin-bottom:.45rem}
  .av-exit__title{margin-bottom:.8rem}
  .av-exit__body .av-field{margin-bottom:.6rem}
  .av-exit__body .av-field input{padding-block:.6rem}
}
.av-exit__body .av-field__label{color:var(--av-on-dark-soft)}
.av-exit__body .av-field input{background:rgba(255,255,255,.06);
border-color:rgba(255,255,255,.34);color:#fff}
.av-exit__body .av-field input::placeholder{color:rgba(255,255,255,.55)}
.av-exit__body .av-consent,.av-exit__body .av-form__note,.av-exit__body .av-form__proof{color:var(--av-on-dark-soft)}
.av-exit__body .av-consent a,.av-exit__body .av-form__note a{color:var(--av-accent)}

.av-exit__close{position:absolute;right:.6rem;top:.6rem;z-index:2;
display:grid;place-items:center;width:38px;height:38px;padding:0;cursor:pointer;
background:rgba(8,10,11,.55);border:0;color:#fff;
transition:background var(--av-ease),color var(--av-ease)}
.av-exit__close:hover{background:var(--av-accent);color:var(--av-on-accent)}
.av-exit__close svg{width:18px;height:18px}

@media (max-width:760px){
  .av-exit__dialog{grid-template-columns:1fr}
  .av-exit__aside{display:none}
}
@media (prefers-reduced-motion:reduce){
  .av-exit__overlay,.av-exit__dialog{transition:none}
}

/* ---------- Belka partnera (logo + rola w transakcji) ----------
   Stoi tuz nad FAQ: jasny, spokojny pas miedzy blokiem gwarancji a ciemna
   sekcja pytan. Bez przycisku, bo to dowod, a nie kolejne wezwanie do akcji. */
.av-pband{padding-block:clamp(2rem,4vw,3rem);background:var(--av-surface-alt);
border-block:var(--av-border-w) solid var(--av-line)}
.av-pband__in{display:grid;gap:clamp(1.25rem,3vw,2.5rem);align-items:center;
grid-template-columns:minmax(190px,240px) minmax(0,1fr)}
/* Znak partnera jest ciemny i na szarym tle sekcji gubi kontur. */
.av-pband__logo{display:grid;place-items:center;padding:clamp(1rem,2vw,1.5rem);
background:var(--av-surface);border:var(--av-border-w) solid var(--av-line);
border-top:3px solid var(--av-accent)}
.av-pband__logo img{width:100%;max-width:250px;height:auto;object-fit:contain}
.av-pband__copy{min-width:0}
.av-pband__copy .av-eyebrow{margin-bottom:.6rem}
.av-pband__text{margin:.65rem 0 0;max-width:64ch;color:var(--av-ink-soft)}
.av-pband__note{margin:.7rem 0 0;font-size:.85rem;color:var(--av-ink-soft);
padding-left:.9rem;border-left:2px solid var(--av-accent)}
@media (max-width:760px){
  .av-pband__in{grid-template-columns:1fr;justify-items:start}
  .av-pband__logo{width:min(100%,220px)}
}

/* Wariant w barwach Freedom (partner_band.style = "freedom"). Paleta z brandbooka
   sieci (brandbook.freedom.pl/identyfikacja/kolorystyka), ale PRZYGASZONA:
   purpura #360D2B i rubin #701C59 na karcie, magenta #E50071 tylko jako cienka
   linia, tlo sekcji to pudrowy roz zamiast czystej magenty. Pelna magenta na
   duzej plaszczyznie klocilaby sie z kobaltem strony.
   Kontrast: bialy na purpurze 16,9:1, #F3C9DD na purpurze 11,3:1,
   rubin na pudrowym tle 8,6:1, #5E4A58 na pudrowym tle 7,6:1. */
.av-pband--freedom{--fr-purpur:#360d2b;--fr-rubin:#701c59;--fr-magenta:#e50071;
--fr-puder:#f7eff4;--fr-tekst:#5e4a58;--fr-roz:#f3c9dd;
background:var(--fr-puder);border-block:0;padding-block:clamp(2.5rem,5vw,4rem)}
.av-pband--freedom .av-pband__in{grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem)}
.av-pband--freedom .av-pband__logo{display:flex;flex-direction:column;align-items:flex-start;gap:1.4rem;
padding:clamp(1.5rem,3vw,2.1rem);border:0;border-top:3px solid var(--fr-magenta);
background:linear-gradient(150deg,var(--fr-rubin) 0%,var(--fr-purpur) 62%);color:#fff}
.av-pband--freedom .av-pband__logo img{width:auto;max-width:170px;height:32px}
.av-pband__facts{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:0;width:100%;
padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.18)}
.av-pband__facts dt{font-family:var(--av-font-head);font-weight:800;font-size:1.7rem;line-height:1;letter-spacing:-.02em;color:#fff}
.av-pband__facts dd{margin:.35rem 0 0;font-size:.8rem;line-height:1.35;color:var(--fr-roz)}
.av-pband--freedom .av-eyebrow{color:var(--fr-rubin)}
.av-pband--freedom .av-eyebrow{background:var(--av-surface)}
.av-pband--freedom .av-h3{color:var(--fr-purpur)}
.av-pband--freedom .av-pband__text{color:var(--fr-tekst)}
.av-pband--freedom .av-pband__note{color:var(--fr-rubin);border-left-color:var(--fr-magenta);font-weight:500}
@media (max-width:760px){
  .av-pband--freedom .av-pband__in{grid-template-columns:1fr}
  .av-pband--freedom .av-pband__logo{width:100%}
}

/* ---------- Pasek marki ---------- */
/* Grafika jest zwyklym <img>, nie tlem CSS: tylko wtedy Imagify poda ja
   w AVIF/WebP. Reguly ponizej dbaja o to, zeby przy proporcji 24:1 pasek
   nie zrobil sie na telefonie kilkupikselowym paskiem. */
.av-bband{display:block;line-height:0}
.av-bband--light{background:var(--av-surface)}
.av-bband--alt{background:var(--av-surface-alt)}
.av-bband--dark{background:var(--av-surface-dark)}
.av-bband__img{display:block;width:100%;height:auto;
min-height:clamp(30px,3.4vw,40px);object-fit:cover}
.av-bband--bleed{width:100vw;margin-left:calc(50% - 50vw);
margin-block:clamp(2rem,4vw,3.25rem) clamp(1.75rem,3.5vw,2.75rem)}
/* Logotyp w stopce zastepuje nazwe pisana tekstem, wiec przejmuje jej odstep. */
/* Znak w stopce to sam wordmark, bez sygnetu, wiec przy wysokosci liczonej
   jak dla logotypu z symbolem robil sie napisem na pol kolumny i przykrywal
   nazwisko, ktore ta strona ma sprzedawac. Nizej o jedna trzecia. */
.av-footer__logo{display:block;width:auto;height:clamp(26px,3vw,36px);margin-bottom:.85rem}
/* Kontakt w stopce: ikona jako znacznik przy tresci, tekst zawija sie
   pod nia bez wciecia, dlatego siatka, a nie flex z gapem. */
.av-footer__contact li{display:grid;grid-template-columns:18px minmax(0,1fr);
gap:.6rem;align-items:start}
.av-footer__contact svg{width:18px;height:18px;margin-top:.15rem;color:var(--av-accent)}
.av-footer__contact a{overflow-wrap:anywhere}
/* Turnstile pokazuje sie tylko przy podejrzanym ruchu, wiec zwykle ma zerowa
   wysokosc. Margines dokladamy dopiero, gdy widget cos wyrenderuje. */
.av-turnstile:not(:empty){margin-bottom:1rem}
/* Miejsce na widget (65 px) zarezerwowane od startu: widget pojawia sie dopiero przy
   interakcji z formularzem (main.js), a bez rezerwy pola przeskoczylyby w trakcie pisania. */
/* Turnstile: ZERO rezerwy w ukladzie, dopoki widget nie powstanie
   (_STANDARD/13 sekcja 7 "Gdzie postawic widget", 25.09.2026). Wczesniej stalo tu
   min-height:65px i formularz mial nad pierwszym polem pusty pas, ktorego nikt
   nie umial sobie wytlumaczyc: widget renderuje sie dopiero przy pierwszej
   interakcji, wiec u kogos, kto tylko czytal, rezerwa zostawala pusta przez cala
   wizyte. Miejsce wypracowuje sam widget - patrz kolejnosc w _lead-form.php:
   element siedzi na koncu formularza, wiec rosnie POD polami i nad przyciskiem.
   200 px, nie "auto": max-height nie animuje sie z auto, a widget Cloudflare ma
   65-70 px. Dwa selektory nizej, bo przy renderowaniu jawnym klase dokłada JS,
   a przy implicit wystarczy :not(:empty) - Cloudflare wstawia wtedy <iframe>
   jako dziecko i element sam przestaje byc pusty. */
.av-turnstile[data-av-turnstile]{min-height:0;margin-bottom:0;
overflow:hidden;max-height:0;opacity:0;
transition:max-height .28s cubic-bezier(.22,.61,.36,1),opacity .2s ease .08s,margin-bottom .28s cubic-bezier(.22,.61,.36,1)}
.av-turnstile[data-av-turnstile].is-ready,
.av-turnstile[data-av-turnstile]:not(:empty){max-height:200px;opacity:1;margin-bottom:1rem}
.av-turnstile iframe{max-width:100%}
/* Przewijanie wewnatrz okna nie przenosi sie na strone pod spodem. */
.av-exit__dialog{overscroll-behavior:contain}

/* Blok informacyjny na dole to przypis dla wyszukiwarki, nie tresc dla
   czytajacego. W rozmiarze tekstu glownego wyglada jak doklejony wypelniacz,
   wiec schodzi o stopien nizej i traci kontrast. */
.av-seotext__grid p{font-size:.78rem;line-height:1.62;color:var(--av-ink-soft)}
.av-seotext__grid h3{font-size:.9rem}
.av-seotext .av-sec__head{margin-bottom:1.25rem}
/* Cztery bloki w jednym rzedzie (prosba 05.10.2026): przy minmax(280px) czwarty
   spadal pod spod i zostawal sam w drugim rzedzie. Naglowki wyrownane przez
   subgrid, wiec akapity startuja na jednej wysokosci, nawet gdy tytul ma dwa
   wiersze. Ponizej 1101 px dwa na dwa, na telefonie jeden pod drugim. */
@media (min-width:1101px){
  .av-seotext__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.25rem,2.2vw,2rem)}
  .av-seotext__grid article{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
}
@media (min-width:641px) and (max-width:1100px){
  .av-seotext__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- Baner zgod iubenda ---------- */
/* Ukrywamy WYLACZNIE plakietke z logo dostawcy, nie baner.
   Sam baner, przyciski zgody i odmowy oraz panel ustawien zostaja nietkniete:
   ukryty baner zgod to problem prawny, nie kosmetyczny. Zdejmujemy tylko
   sygnature "iubenda" doklejona do rogu, bo to reklama uslugi na stronie klienta.
   Regula obowiazuje na kazdym landingu. */
.iubenda-cs-brand-badge{display:none !important}


/* ---------------------------------------------------------------------------
   Akcent na ciemnym tle.

   Magenta #e50071 ma na rubinie #701c59 tylko 2,29:1. Na wielkiej liczbie
   w sekcji statystyk to przejdzie (WCAG dopuszcza 3:1 od 24 px), ale ten sam
   akcent niesie tez eyebrow 0,85 rem i numery krokow, a tam 3,35:1 to juz
   tekst nieczytelny dla czesci uzytkownikow.

   Rozjasnienie samego --av-accent nie wchodzi w gre: jasny roz nie utrzyma
   bialego tekstu na przycisku, wiec naprawiajac ciemne sekcje zepsulibysmy
   jasne. Dlatego akcent podmieniamy LOKALNIE, tylko tam, gdzie tlo jest
   granatowe, razem z kolorem tekstu na przycisku.

   Lista selektorow = wszystkie miejsca, w ktorych tlem jest --av-surface-dark
   albo --av-surface-dark-alt. Dokladajac ciemna sekcje, dopisz ja tutaj.
   --------------------------------------------------------------------------- */
.av-sec--dark,
.av-sec--photo,
.av-band,
.av-stats,
.av-stats__item,
.av-cmp__thead,
.av-why__item,
.av-why__media figcaption,
.av-guarantee__seal,
.av-ctabar,
.av-parallax__cta,
.av-exit__dialog,
.av-footer{
  --av-accent:var(--av-accent-light);
  --av-accent-ink:var(--av-accent-light);
  --av-on-accent:var(--av-on-accent-light);
  /* Gradient przycisku Freedom idzie od akcentu do accent-dark; na ciemnym tle
     oba konce musza byc jasnym rozem, inaczej purpurowy tekst lądowalby na
     ciemnej magencie. */
  --av-accent-dark:var(--av-accent-light);
}

/* Biala karta opinii stoi w ciemnej sekcji: przywracamy jej akcent
   i tekst przycisku w wersji na jasne tlo. */
.av-sec--dark .av-review{--av-accent:var(--av-accent-base);--av-accent-ink:var(--av-accent-ink-base);--av-on-accent:var(--av-on-accent-base);--av-accent-dark:#b80059}
/* .av-sec--dark p / strong nadaje kolor "na ciemne" KAZDEMU akapitowi w sekcji,
   takze w bialej karcie i bialej plakietce. Tam wracamy do kolorow na jasne. */
.av-sec--dark .av-review p.av-review__text,.av-sec--dark .av-review__who span{color:var(--av-ink-soft)}
.av-sec--dark .av-review__who strong{color:var(--av-ink)}
.av-sec--dark .av-review p.av-review__stars{color:var(--av-accent)}

/* Znak sieci pod danymi kontaktowymi: kto stoi za agentka i gdzie jest biuro. */
.av-contact__brand{display:flex;align-items:center;gap:1rem;margin:1.5rem 0 0;padding-top:1.25rem;
border-top:var(--av-border-w) solid var(--av-line-dark)}
.av-contact__brand img{height:22px;width:auto;display:block;flex:none}
.av-sec--dark .av-contact__brand span{font-size:.84rem;line-height:1.45;color:var(--av-on-dark-soft)}

/* Plakietka Freedom na zdjeciu w "O mnie": barwy sieci jak w .av-pband--freedom
   (rubin -> purpura, magenta tylko jako linia). Bialy na purpurze 16,9:1. */
.av-frame{position:relative}
.av-photo-badge{position:absolute;left:0;bottom:0;z-index:2;display:flex;flex-direction:column;gap:.45rem;
padding:.85rem 1.1rem .9rem;border-top:3px solid #e50071;
background:linear-gradient(150deg,#701c59 0%,#360d2b 70%);color:#fff;
box-shadow:0 10px 28px rgba(54,13,43,.35)}
.av-frame .av-photo-badge__logo{width:auto;height:22px;aspect-ratio:auto;display:block;object-fit:contain}
.av-photo-badge__text{font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#f3c9dd;line-height:1}

/* Podpis cytatu w "Dlaczego ja" z logo Freedom w magencie po prawej.
   Selektor z .av-why__media, bo '.av-why__media img' (aspect 4/5, cover)
   lapie kazdy obrazek w ramce. */
.av-why__author{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.6rem}
.av-why__author cite{margin-top:0}
.av-why__media .av-why__author-logo{flex:none;width:auto;height:18px;aspect-ratio:auto;object-fit:contain;display:block}


/* =============================================================================
   WARSTWA FREEDOM
   Przeniesiona z brand kitu stron agentow Freedom (agent-freedom-elblag,
   src/freedom-brand.css), 21.09.2026. Stoi NA KONCU pliku celowo: nadpisuje
   bazowy motyw bez grzebania w komponentach, tak jak w tamtych motywach.
   Kolory przez tokeny (brand.json), romb przez --fr-romb / --fr-romb-w
   (pelne adresy wystawia inc/brand.php). Tla rombow to dekoracyjne SVG, nie
   zdjecia, wiec zasada "zdjecia tylko przez <img>" (Imagify) ich nie dotyczy:
   SVG i tak nie przechodzi konwersji do AVIF/WebP.
   ============================================================================= */

/* #av-main BEZ overflow-x (1.1.12, jak Michal 1.8.14). Do tej wersji stalo tu overflow-x:clip, zeby
   romby wystajace poza sekcje nie dawaly poziomego paska. Na iPhonie (WebKit)
   przyklejone elementy w <main> (talia "Dlaczego ja", karty "Jak dzialam")
   drgaly przez to o 1-3 px przy przewijaniu: dwa przycinajace przodki (body
   i main) daja razem warstwe przycinajaca o wysokosci ok. 33 mln px, a przy
   takich liczbach pozycja sticky traci precyzje (WebKit bug 247130; ich
   poprawka lapie tylko pojedyncze przyciecie). Nawigacja, ktora ma nad soba
   samo body, stala w tym samym nagraniu co do piksela. Poziomy pasek nadal
   blokuje overflow-x:clip na html i body (critical.css), body ma ta sama
   szerokosc co main. Nie dokladac overflow (clip ani hidden) na przodkach
   elementow sticky; hidden dodatkowo wylacza samo przyklejanie. */

/* ---------- Romby-sygnety w tle sekcji ----------
   UWAGA: sekcje "liczby" i "faq" ze zdjeciem tla (wariant .av-sec--photo) maja
   w ::after PRZYCIEMNIENIE zdjecia. Kazda regula rombu dla tych dwoch sekcji
   musi miec :not(.av-sec--photo), inaczej rozmiar i krycie rombu kurcza
   przyciemnienie do malego polprzezroczystego rombu i bialy tekst lezy na
   jasnym zdjeciu (tak bylo na zywo w 1.8.0). */
#o-mnie,#porownanie,#liczby,#dlaczego-ja,#proces,#konsultacja,#portfolio,#opinie,
#gwarancje,#partner-finansowy,#faq,.av-contact,#informacje{position:relative;isolation:isolate}

#o-mnie::before,#o-mnie::after,#porownanie::before,#porownanie::after,
#liczby:not(.av-sec--photo)::before,#liczby:not(.av-sec--photo)::after,
#dlaczego-ja::before,#dlaczego-ja::after,#proces::after,
#konsultacja::before,#konsultacja::after,#portfolio::before,
#opinie::before,#opinie::after,#gwarancje::before,#gwarancje::after,
#partner-finansowy::after,#faq:not(.av-sec--photo)::before,#faq:not(.av-sec--photo)::after,
.av-contact::before,.av-contact::after,#informacje::before{
content:"";position:absolute;pointer-events:none;z-index:-1;aspect-ratio:1;
background:var(--fr-romb) center/contain no-repeat}

/* Na rubinie romby biale i wyrazniejsze, jak na ciemnych sekcjach w kicie. */
#liczby:not(.av-sec--photo)::before,#liczby:not(.av-sec--photo)::after,#dlaczego-ja::before,#dlaczego-ja::after,
#konsultacja::before,#konsultacja::after,#opinie::before,#opinie::after,
#faq:not(.av-sec--photo)::before,#faq:not(.av-sec--photo)::after,.av-contact::before,.av-contact::after{background-image:var(--fr-romb-w)}

#o-mnie::before      {width:clamp(220px,24vw,420px);right:-110px;top:50%;transform:translateY(-50%);opacity:.07}
#o-mnie::after       {width:clamp(130px,14vw,230px);left:-60px;top:12%;transform:rotate(-12deg);opacity:.06}
#porownanie::before  {width:clamp(200px,22vw,380px);left:-90px;top:50%;transform:translateY(-50%) rotate(8deg);opacity:.07}
#porownanie::after   {width:clamp(130px,14vw,230px);right:-50px;top:14%;transform:rotate(-6deg);opacity:.06}
#liczby:not(.av-sec--photo)::before      {width:clamp(150px,16vw,260px);left:-70px;top:50%;transform:translateY(-50%);opacity:.12}
#liczby:not(.av-sec--photo)::after       {width:clamp(110px,11vw,180px);right:-40px;top:50%;transform:translateY(-50%) rotate(-10deg);opacity:.10}
#dlaczego-ja::before {width:clamp(230px,25vw,440px);right:-120px;top:40%;transform:translateY(-50%);opacity:.10}
#dlaczego-ja::after  {width:clamp(140px,15vw,250px);left:-60px;top:8%;transform:rotate(14deg);opacity:.08}
#proces::after       {width:clamp(160px,17vw,290px);right:-70px;top:50%;transform:translateY(-50%) rotate(8deg);opacity:.07}
#konsultacja::before {width:clamp(200px,22vw,400px);left:-100px;top:50%;transform:translateY(-50%);opacity:.10}
#konsultacja::after  {width:clamp(140px,15vw,250px);right:-70px;top:20%;transform:rotate(10deg);opacity:.09}
#portfolio::before   {width:clamp(200px,22vw,380px);right:-90px;top:10%;transform:rotate(-8deg);opacity:.07}
#opinie::before      {width:clamp(210px,23vw,410px);right:-100px;top:50%;transform:translateY(-50%) rotate(12deg);opacity:.10}
#opinie::after       {width:clamp(140px,15vw,250px);left:-70px;top:18%;transform:rotate(4deg);opacity:.08}
#gwarancje::before   {width:clamp(220px,24vw,420px);right:-110px;top:50%;transform:translateY(-50%);opacity:.07}
#gwarancje::after    {width:clamp(130px,14vw,230px);left:-50px;top:14%;transform:rotate(-8deg);opacity:.06}
#partner-finansowy::after{width:clamp(180px,20vw,340px);right:-80px;top:50%;transform:translateY(-50%) rotate(-6deg);opacity:.08}
#faq:not(.av-sec--photo)::before         {width:clamp(220px,24vw,420px);right:-110px;top:50%;transform:translateY(-50%);opacity:.09}
#faq:not(.av-sec--photo)::after          {width:clamp(130px,14vw,230px);left:-50px;top:12%;transform:rotate(-8deg);opacity:.08}
.av-contact::before  {width:clamp(200px,22vw,380px);left:-100px;top:55%;transform:translateY(-50%);opacity:.09}
.av-contact::after   {width:clamp(140px,15vw,250px);right:-60px;top:16%;transform:rotate(10deg);opacity:.08}
#informacje::before  {width:clamp(200px,22vw,380px);left:-90px;top:50%;transform:translateY(-50%) rotate(8deg);opacity:.06}

/* ---------- Romb jako punktor pytan w FAQ ---------- */
.av-faq__item summary::before{content:"";flex:none;width:11px;height:11px;
background:var(--fr-romb-w) center/contain no-repeat;margin-right:-.6rem}
.av-sec--photo .av-faq__item summary::before{background-image:var(--fr-romb-w)}

/* ---------- Ikony cech: magentowy kafel, biala ikona ---------- */
.av-guarantee__item .av-stats__icon{background:linear-gradient(135deg,var(--av-accent),var(--av-accent-dark));
border-color:transparent;color:var(--av-on-accent);border-radius:var(--av-radius-sm)}

/* ---------- Zaokraglenia kart i zdjec (radius-lg 28px, pola 12px) ----------
   Zdjecia zaokraglamy na <img>, nie przez overflow:hidden na ramce: ramki maja
   ozdobny kontur ::before wystajacy poza krawedz, ktory overflow by obcial. */
.av-frame,.av-frame img,.av-frame::before,
.av-consult__media img,.av-consult__media::before{border-radius:var(--av-radius-lg)}
.av-why__media img{border-radius:var(--av-radius-lg) var(--av-radius-lg) 0 0}
.av-why__media figcaption{border-radius:0 0 var(--av-radius-lg) var(--av-radius-lg)}
.av-why__media::before{border-radius:var(--av-radius-lg)}
.av-photo-badge{border-radius:0 var(--av-radius-sm) 0 var(--av-radius-lg)}
.av-hero__panel,.av-card,.av-steps__item,.av-minicard,.av-pband__logo,.av-process__brand,
.av-exit__dialog,.av-cmp{border-radius:var(--av-radius-lg)}
.av-steps__item,.av-cmp{overflow:hidden}
.av-sold__item{border-radius:var(--av-radius-lg);overflow:hidden}
.av-guarantee__item{border-radius:var(--av-radius-lg)}
.av-field input,.av-field textarea,.av-field select{border-radius:var(--av-radius-sm)}
/* Siatki kafli (.av-grid, kafle w "O mnie") laczyly komorki przerwa 1 px na tle
   linii. Z zaokragleniem kazda komorka odslaniala w rogach to tlo, wiec w stylu
   Freedom sa to osobne karty z odstepem, a kafle w "O mnie" zaokraglone jako
   jeden blok. */
.av-grid{gap:clamp(.9rem,1.6vw,1.25rem);background:none}
.av-grid > .av-card--bordered{border-radius:var(--av-radius-lg)}
/* Kafle w "O mnie" tez jako osobne zaokraglone karty (1.8.8). Jeden zaokraglony
   blok przeciety prostymi liniami 1 px mieszal luk z kreska, a na bialym tle
   widac bylo tylko te linie i samotny rog bloku w zlotej poswiacie
   (przeglad 07.10.2026). */
.av-about__cards{gap:.6rem;background:none;margin-top:1rem}
.av-about__cards .av-minicard{border:var(--av-border-w) solid var(--av-line)}
/* Pieczec pod gwarancjami jako pigulka, jak przyciski. */
.av-seal{border-radius:var(--av-radius-pill)}
/* Opinie i kafel oceny zostaly PROSTOKATNE u Anny Soszynskiej (prosba jej klienta,
   18.09.2026). U Michala opinie sa zaokraglone od 1.8.8, patrz koniec pliku. */

/* ---------- Romb w rogu zdjecia zamiast odsunietego konturu ----------
   Kontur ::before wystawal zza zdjecia samym rogiem; przy zaokraglonym zdjeciu
   czytal sie jak osobna prostokatna ramka. W brand kicie Freedom te role pelni
   romb-sygnet na rogu zdjecia. */
.av-frame::before,.av-why__media::before,.av-consult__media::before{
content:"";border:0;inset:auto;width:30px;height:30px;
background:var(--fr-romb) center/contain no-repeat;z-index:2;
filter:drop-shadow(0 4px 10px rgba(var(--av-ink-rgb),.25))}
.av-why__media::before{top:-11px;right:-11px}
.av-consult__media::before{top:-11px;left:-11px;background-image:var(--fr-romb-w)}
.av-about__side .av-frame::before{top:-11px;right:-11px}
.av-contact__photo::before{display:none}

/* ---------- Hero: kadr bez podpisu, sam znak Freedom na zdjeciu ---------- */
.av-hero__media > .av-hero__media-logo{position:absolute;right:1rem;bottom:.9rem;z-index:1;
height:20px;filter:drop-shadow(0 1px 6px rgba(255,255,255,.85))}

/* ---------- O mnie: plakietka Freedom odsunieta od zaokraglonego rogu ----------
   Na samym rogu zdjecie z radiusem 28 px ucinalo lewy dolny rog plakietki
   razem z czescia logo. Teraz plakietka stoi w srodku kadru, z wlasnym radiusem. */
.av-photo-badge{left:14px;bottom:14px;border-radius:var(--av-radius-sm)}

/* ---------- O mnie: mniejszy tekst i kompaktowe kafle ---------- */
#o-mnie .av-prose p{font-size:.95rem;line-height:1.65}
.av-about__cards .av-minicard{padding:.9rem 1.25rem}
.av-about__cards .av-minicard strong{font-size:.86rem;margin-bottom:.15rem}
.av-about__cards .av-minicard span{display:block;font-size:.76rem;line-height:1.45}

/* Pas wezwania pod procesem nizszy (prosba klienta 21.09.2026). */
.av-band{padding-block:clamp(1.9rem,3.6vw,3rem)}

/* Cienka obwodka calego <figure> w "Dlaczego ja" i "Bezplatnej wycenie" zostala
   prostokatna, gdy zdjecie w srodku dostalo radius 28 px: stad "prostokatna
   ramka wokol zaokraglonego zdjecia". Obwodka idzie teraz po tym samym luku. */
.av-why__media,.av-consult__media{border-radius:var(--av-radius-lg)}
.av-consult__media img{border-radius:calc(var(--av-radius-lg) - 1px)}
.av-why__media img{border-radius:calc(var(--av-radius-lg) - 1px) calc(var(--av-radius-lg) - 1px) 0 0}
.av-why__media figcaption{border-radius:0 0 calc(var(--av-radius-lg) - 1px) calc(var(--av-radius-lg) - 1px)}
/* Plakietka na zdjeciu w "Bezplatnej wycenie" jako pigulka, jak etykiety sekcji. */
.av-consult__badge{border-radius:var(--av-radius-pill)}

/* ---------- Zasady wspolpracy: karty bez bialego tla, wiecej rombow ----------
   Biale tlo kart zaslanialo romby w tle sekcji (prosba klienta). Karty zostaja
   jako obrys, a sekcja dostaje dwa dodatkowe romby na pseudoelementach
   kontenera: sekcja ma isolation, wiec z-index -1 laduje nad jej tlem,
   a pod trescia. */
#gwarancje .av-guarantee__item{background:transparent}
#gwarancje .av-wrap{position:relative}
#gwarancje .av-wrap::before,#gwarancje .av-wrap::after{content:"";position:absolute;pointer-events:none;
z-index:-1;aspect-ratio:1;background:var(--fr-romb) center/contain no-repeat}
#gwarancje .av-wrap::before{width:clamp(90px,9vw,150px);left:22%;top:-10px;transform:rotate(18deg);opacity:.07}
#gwarancje .av-wrap::after{width:clamp(120px,12vw,200px);right:18%;bottom:-40px;transform:rotate(-14deg);opacity:.08}
.av-consult__badge::before{border-radius:0;background:var(--fr-romb) center/contain no-repeat}

/* Zdjecia w "O mnie" i w kontakcie w proporcjach oryginalu, przyciete w CSS
   od gory, zeby pionowy portret z Customizera nie tracil glowy. */
.av-about__side .av-frame img,.av-contact__photo img{object-position:center 18%}

/* ---------- Logotypy Freedom NIGDY nie sa zaokraglane ----------
   Ogolne reguly zaokraglen zdjec (.av-why__media img, .av-frame img,
   .av-consult__media img...) lapaly tez logo wewnatrz tych ramek i przycinaly
   mu rogi. Kazdy obrazek logo w motywie wraca do ostrych krawedzi. */
.av-why__media .av-why__author-logo,.av-frame .av-photo-badge__logo,.av-hero__media .av-hero__media-logo,
.av-sign__logo,.av-process__brand-logo,.av-pband__logo img,.av-contact__brand img,.av-footer__logo,
.av-logo-img,.av-reviews-score__logo,.av-trust__logo{border-radius:0!important}

/* ---------- Ikony kontaktu w "Jak wyglada wspolpraca" ----------
   Magentowa ikona na rubinowym kwadracie miala 2,29:1. Teraz jak ikony cech:
   biala ikona na magentowym, zaokraglonym kaflu (bialy na magencie 4,6:1). */
.av-process__contact li::before{background:linear-gradient(135deg,var(--av-accent),var(--av-accent-dark));
border-radius:var(--av-radius-sm)}
.av-process__contact svg{color:var(--av-on-accent)}

/* Znak Freedom na zdjeciu w hero: lewy dolny rog (prosba klienta 21.09.2026). */
.av-hero__media > .av-hero__media-logo{right:auto;left:1rem}

/* Trzy liczby w "Doswiadczeniu": 3 kolumny do telefonu (2 kolumny zostawialy
   jedna liczbe sama w drugim rzedzie), na telefonie jedna pod druga. */
@media (max-width:900px){#liczby .av-stats__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){#liczby .av-stats__grid{grid-template-columns:1fr}}


/* =============================================================================
   WARSTWA MICHAL BRODNIEWSKI
   Granat, magenta Freedom i zloto z materialow klienta (grafiki social media,
   prototyp strony od kolegi, wzor dyla-nieruchomosci.pl). Stoi NA KONCU pliku:
   nadpisuje warstwe Freedom z motywu Anny Soszynskiej bez grzebania w niej,
   wiec diff do tamtego motywu zostaje czytelny.
   Role kolorow: granat = ciemne sekcje i tekst, magenta = przyciski CTA i romby
   na jasnym tle, zloto = etykiety, liczby, linie i romby na granacie.
   ============================================================================= */

/* ---------- Belka Freedom: granat zamiast rubinu i purpury ----------
   Karta z logo w granacie, magenta zostaje cienka linia na gorze karty,
   liczby sieci pod logo w zlocie. Tlo sekcji to cieply ecru strony. */
.av-pband--freedom{--fr-purpur:var(--av-surface-dark);--fr-rubin:#2b2e37;--fr-magenta:var(--av-cta);
--fr-puder:var(--av-surface-alt);--fr-tekst:var(--av-ink-soft);--fr-roz:var(--av-gold)}
.av-pband--freedom .av-eyebrow{color:var(--av-accent-ink)}
.av-pband--freedom .av-pband__note{color:var(--av-ink)}

/* ---------- Plakietka "Agent sieci" na zdjeciu w "O mnie" ----------
   Cien krotki i podciety (1.8.8). Plakietka stoi 14 px nad dolna krawedzia
   zdjecia, a cien 0 10px 28px siegal ok. 25 px w dol: wychodzil poza zdjecie
   i lezal szara plama na tle pod jego lewym dolnym rogiem i na kafelkach pod
   spodem ("dziwny cien", przeglad 07.10.2026). Ramki nie mozna przyciac
   overflow, bo romb w rogu wystaje poza nia celowo. Teraz cien konczy sie
   ok. 10 px pod plakietka, czyli na zdjeciu. */
.av-photo-badge{border-top-color:var(--av-cta);
background:linear-gradient(150deg,#2b2e37 0%,var(--av-surface-dark) 70%);
box-shadow:0 4px 12px -4px rgba(var(--av-ink-rgb),.5)}
.av-photo-badge__text{color:var(--av-gold)}

/* ---------- Karty sprzedanych: cena i czas sprzedazy ----------
   Opis karty ma w motywie flex-direction:column-reverse (miasto nad ulica),
   wiec fakty dostaja order:-1, zeby po odwroceniu wyladowac NA DOLE. */
.av-slider--portfolio{--av-pf-body:178px}
@media (max-width:700px){.av-slider--portfolio{--av-pf-body:166px}}
.av-sold__facts{order:-2;display:flex;justify-content:center;gap:0;margin:.35rem 0 0}
.av-sold__facts div{padding:0 .9rem;text-align:center}
.av-sold__facts div + div{border-left:1px solid var(--av-line)}
.av-sold__facts dt{font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--av-ink-soft)}
.av-sold__facts dd{margin:.1rem 0 0;font-family:var(--av-font-head);font-weight:600;font-size:.98rem;color:var(--av-accent-ink)}
/* Oznaczenie wirtualnej aranzacji: dyskretne, ale czytelne, w rogu kadru. */
.av-sold__note{position:absolute;top:.75rem;right:.75rem;z-index:1;padding:.3rem .65rem;
border-radius:var(--av-radius-pill);background:rgba(24,25,30,.78);color:#fff;
font-size:.66rem;font-weight:500;letter-spacing:.04em;line-height:1.2;
backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
/* Plakietka SPRZEDANE: magenta CTA, nie zloto, bo stoi na zdjeciu (bialy tekst 4,6:1). */
.av-sold__flag{background:var(--av-cta);color:var(--av-on-cta)}
.av-slider--portfolio .av-sold__body{border-top-color:var(--av-gold)}

/* ---------- Suwak przed/po: etykieta "Po" jako wizualizacja ---------- */
.av-ba__label--after{background:rgba(24,25,30,.82);color:#fff}

/* ---------- Zlote liczby i linie na granacie ----------
   Akcent w ciemnych sekcjach i tak jest juz zlotem (podmiana wyzej w pliku),
   tu tylko detale, ktore w motywie Anny mialy wpisany roz albo biel. */
.av-stats__item dt,.av-staging__figures dt{color:var(--av-gold)}
.av-footer__contact svg{color:var(--av-gold)}

/* ---------- Zloto zamiast rozowych tintow na jasnym tle ----------
   Motyw Anny barwil tla i podkreslenia magenta (--av-accent-rgb). Przy granacie
   i cieplym ecru rozowe plamy wygladaly obco, a wzor klienta (dyla-nieruchomosci.pl)
   to granat ze zlotem. Magenta zostaje tam, gdzie jest sygnalem: przyciski CTA,
   plakietka SPRZEDANE, wstegi w hero, znaki Freedom. */
.acc{box-shadow:inset 0 -.42em 0 rgba(var(--av-gold-rgb),.42)}
.av-cmp__cell--win{background:rgba(var(--av-gold-rgb),.13);box-shadow:inset 3px 0 0 var(--av-gold)}
.av-stats__icon{border-color:rgba(var(--av-gold-rgb),.45)}
.av-steps__item{border-left-color:var(--av-gold)}
.av-slider__dot.is-active{background-color:var(--av-gold)}
.av-slider__dot:hover{background-color:var(--av-accent-ink)}
/* Siedem kart sprzedanych = siedem kresek: na telefonie aktywna (44 px) nie miescila
   sie w wierszu ze strzalkami i spadala pod spod. Krotsze kreski tylko tutaj. */
@media (max-width:700px){
  .av-slider--portfolio .av-slider__dot{width:16px}
  .av-slider--portfolio .av-slider__dot.is-active{width:28px}
}

/* ---------- Popup wyjscia: tytul moze sie lamac ----------
   Motyw trzyma tytul w jednym wierszu (white-space:nowrap), dobranym pod krotki
   tytul Anny. Dluzszy tytul wychodzil poza okno i dialog dostawal poziomy pasek
   przewijania (zgloszenie 05.10.2026). Krotki tytul i tak miesci sie w wierszu,
   a kazda pozniejsza zmiana tresci nie rozsadzi juz okna. */
.av-exit__title{white-space:normal;text-wrap:balance;overflow-wrap:anywhere}
.av-exit__dialog{overflow-x:hidden}

/* =============================================================================
   WYROZNIENIA: galeria dyplomow (template-parts/awards.php, main.js)
   Dyplom w granatowej "oprawie" ze zlota linia, jak obraz w passe-partout.
   Slajdy w jednej komorce siatki (grid-area 1/1), przenikanie przez opacity.
   Ramka ma stala proporcje 4:5, a podpis stala wysokosc: zmiana dyplomu nie
   przesuwa niczego na stronie (CLS 0), niezaleznie od formatu skanu.
   ============================================================================= */
#wyroznienia{position:relative;isolation:isolate}
#wyroznienia::before{content:"";position:absolute;pointer-events:none;z-index:-1;aspect-ratio:1;
background:var(--fr-romb) center/contain no-repeat;width:clamp(200px,22vw,380px);left:-90px;top:18%;
transform:rotate(-10deg);opacity:.09}
.av-awards__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,440px);
gap:clamp(2rem,5vw,4.5rem);align-items:center}
.av-awards__checks{margin-top:1.4rem}
.av-awards__checks li{font-size:.92rem}
.av-awards__checks strong{color:var(--av-ink)}
@media (max-width:900px){
  .av-awards__in{grid-template-columns:1fr}
  .av-awards__gallery{width:min(100%,440px);margin-inline:auto}
}

.av-awards__gallery{position:relative;overflow:hidden;color:var(--av-on-dark);
padding:clamp(1rem,2.4vw,1.5rem) clamp(1rem,2.4vw,1.5rem) clamp(.9rem,2vw,1.2rem);
background:linear-gradient(160deg,#2b2e37 0%,var(--av-surface-dark) 62%);
border-radius:var(--av-radius-lg);box-shadow:0 30px 70px rgba(var(--av-ink-rgb),.28)}
/* Zlota linia oprawy, odsunieta od krawedzi jak w ramie z passe-partout. */
.av-awards__gallery::before{content:"";position:absolute;inset:7px;pointer-events:none;z-index:0;
border:1px solid rgba(var(--av-gold-rgb),.38);border-radius:calc(var(--av-radius-lg) - 5px)}
.av-awards__gallery > *{position:relative;z-index:1}

/* Pasek postepu: kiedy nastapi zmiana. Zatrzymuje sie razem z galeria. */
.av-awards__progress{position:absolute!important;left:0;right:0;top:0;height:3px;z-index:2!important;
background:rgba(255,255,255,.08)}
.av-awards__progress i{display:block;height:100%;background:var(--av-gold);transform-origin:left center;transform:scaleX(0)}
.av-awards__gallery.is-live .av-awards__progress i{animation:av-awards-bar var(--av-awards-ms,4500ms) linear forwards}
.av-awards__gallery.is-paused .av-awards__progress i{animation-play-state:paused}
@keyframes av-awards-bar{to{transform:scaleX(1)}}

/* Szerokosc slajdu wylacznie z oprawy, nigdy ze skanu (1.8.8). Do 1.8.7 kolumna
   siatki byla "auto", a skan stal w niej jako zwykly obrazek z width/height
   z biblioteki (np. 965x1400). Chrome traktuje taki obrazek ze szerokoscia 100%
   jako sciskalny, Safari na iPhonie nie: kolumna dostawala naturalna szerokosc
   skanu, dyplom wychodzil kilka razy powiekszony i uciety przez overflow oprawy,
   a podpis wyjezdzal za prawa krawedz (zgloszenie z przegladu 07.10.2026).
   Teraz kolumna minmax(0,1fr), a skan lezy absolutnie w ramce o stalej
   proporcji 4:5, wiec jego wymiary nie biora udzialu w ukladzie. */
.av-awards__stage{display:grid;grid-template-columns:minmax(0,1fr)}
.av-awards__slide{grid-area:1/1;min-width:0;margin:0;display:flex;flex-direction:column;
opacity:0;transition:opacity .9s ease}
.av-awards__slide.is-active{opacity:1;z-index:1}
.av-awards__frame{--av-aw-pad:clamp(.7rem,1.6vw,1.1rem);position:relative;min-width:0;aspect-ratio:4/5;
border-radius:var(--av-radius-sm);
background:radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.07),rgba(255,255,255,.02) 70%)}
/* contain + drop-shadow: cien idzie po krawedzi skanu, nie po calej ramce.
   Selektor przez ramke, nie przez klase obrazka (1.8.10): Imagify w trybie
   picture przenosi class z obrazka na wrapper, ktory ma display:contents, wiec
   regula na .av-awards__img nie dzialala na serwerze w ogole (docs/IMAGIFY-NEXTGEN.md). */
.av-awards__frame img{position:absolute;top:var(--av-aw-pad);left:var(--av-aw-pad);
width:calc(100% - 2 * var(--av-aw-pad));height:calc(100% - 2 * var(--av-aw-pad));object-fit:contain;
filter:drop-shadow(0 14px 26px rgba(0,0,0,.5));transform:scale(.975);transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.av-awards__slide.is-active .av-awards__frame img{transform:none}
.av-awards__cap{min-height:6.4rem;padding:1rem .2rem 0}
.av-awards__cap strong{display:block;font-family:var(--av-font-head);font-weight:600;font-size:1.04rem;line-height:1.3;color:#fff}
.av-awards__cap span{display:block;margin-top:.35rem;font-size:.8rem;line-height:1.5;color:var(--av-on-dark-soft)}

.av-awards__nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;
margin-top:.4rem;padding-top:.85rem;border-top:1px solid rgba(255,255,255,.1)}
.av-awards__count{margin:0;font-size:.78rem;letter-spacing:.14em;color:var(--av-on-dark-soft)}
.av-awards__count b{font-weight:600;color:var(--av-gold)}
.av-awards__controls{display:flex;gap:.45rem}
.av-awards__btn{display:grid;place-items:center;width:40px;height:40px;padding:0;cursor:pointer;
border-radius:50%;background:transparent;color:#fff;border:1px solid rgba(var(--av-gold-rgb),.5);
transition:background var(--av-ease),color var(--av-ease),border-color var(--av-ease)}
.av-awards__btn svg{width:18px;height:18px}
/* Wypelnienie tylko przy myszy: na telefonie :hover zostaje po dotknieciu
   i strzalka swiecila na zloto az do stukniecia gdzie indziej (1.8.8). */
@media (hover:hover){
  .av-awards__btn:hover{background:var(--av-gold);border-color:var(--av-gold);color:var(--av-surface-dark)}
}
.av-awards__btn:focus-visible{outline:2px solid var(--av-gold);outline-offset:2px}
.av-awards__ico-play{display:none}
.av-awards__btn--pause[aria-pressed="true"] .av-awards__ico-pause{display:none}
.av-awards__btn--pause[aria-pressed="true"] .av-awards__ico-play{display:block}
@media (prefers-reduced-motion:reduce){
  .av-awards__slide,.av-awards__frame img{transition:none}
}

/* =============================================================================
   OPINIE: marquee (reviews.marquee = true, main.js "Opinie i sprzedane: marquee")
   Tor plynie w petli zawijanej co jeden zestaw kart (pozycje liczy JS), maska
   alfa wygasza krawedzie, wiec karty wplywaja i wyplywaja z granatu zamiast
   ucinac sie na krawedzi kontenera. Pelna szerokosc okna: wtedy maska konczy
   sie na krawedzi ekranu, a nie w polowie strony.
   ============================================================================= */
.av-slider--reviews.is-marquee{width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
@media (max-width:700px){
  .av-slider--reviews.is-marquee{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
}
/* Tor szeroki na wszystkie kopie; miejsce na cien i uniesienie karty po najechaniu,
   bo maska tnie wszystko poza obrysem korzenia. Ruch (transform) ustawia main.js:
   automat, przeciaganie, gladzik i strzalki; zatrzymania tez liczy skrypt.
   Do 1.7.0 byla tu animacja CSS @keyframes av-marquee, ktorej nie dalo sie
   zlapac reka, a jej druga definicja nadpisywala keyframes paska logotypow. */
.is-marquee .av-slider__track{width:max-content;overflow:visible;scroll-snap-type:none;
padding:1.25rem 0 3rem;will-change:transform;
cursor:grab;touch-action:pan-y pinch-zoom}
.is-marquee .av-slider__track > *{flex:0 0 min(340px,78vw)}
/* W trakcie przeciagania: zacisnieta reka, bez zaznaczania tekstu i obrazkow. */
.is-marquee.is-dragging .av-slider__track{cursor:grabbing;user-select:none;-webkit-user-select:none}
.is-marquee .av-slider__track img{-webkit-user-drag:none}
/* Stopka: strzalki wstecz/dalej i pauza miedzy nimi. Kropek nie ma, bo petla
   nie ma stron. */
.is-marquee .av-slider__foot{margin-top:.25rem;gap:.75rem}
.is-marquee .av-slider__dots{display:none}
.is-marquee .av-slider__btn{border-radius:50%}
.av-marquee__pause{border-radius:50%;border-color:rgba(var(--av-gold-rgb),.5)!important}
.av-marquee__pause svg{width:16px;height:16px;fill:currentColor;stroke:none}
.av-marquee__pause:hover{background:var(--av-gold)!important;border-color:var(--av-gold)!important;color:var(--av-surface-dark)!important}
.av-marquee__ico-play{display:none}
.av-marquee__pause[aria-pressed="true"] .av-marquee__ico-pause{display:none}
.av-marquee__pause[aria-pressed="true"] .av-marquee__ico-play{display:block}

/* ---------- Sprzedane: marquee (sold.marquee = true) ----------
   Ten sam ruch, tempo i pauza co w opiniach (prosba 05.10.2026). Maska siedzi na
   .av-slider__okno rozciagnietym na cala szerokosc ekranu: korzen obejmuje tez
   naglowek sekcji, ktory pod maska wyblaklby na lewej krawedzi. Tor oddaje oknu
   swoje rozciagniecie i dostaje odstepy: stykajace sie zaokraglone karty w ruchu
   zlewaly sie w jeden pas. Karty wezsze niz w sliderze (29vw zamiast 38vw), zeby
   w czystym srodku miedzy maskami miescily sie trzy. */
/* Wysokosc zdjecia karty takze z wysokosci ekranu (1.8.10): karty i strzalki
   maja sie miescic miedzy nawigacja a dolnym paskiem CTA (na 1366x768 w 1.8.9
   strzalki byly 32 px pod paskiem). Pod zdjeciem opis 178 px i stopka ok. 50 px. */
.av-slider--portfolio.is-marquee{--av-pf-media:clamp(200px,22vw,340px);
--av-pf-media:clamp(200px,min(22vw,calc(100vh - var(--av-nav-h,80px) - var(--av-ctabar-h,0px) - 250px)),340px)}
.av-slider--portfolio.is-marquee .av-slider__okno{width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.av-slider--portfolio.is-marquee .av-slider__track{width:max-content;margin-left:0;padding:0;
gap:clamp(1rem,1.6vw,1.5rem)}
.av-slider--portfolio.is-marquee .av-sold__item{flex:0 0 clamp(290px,29vw,450px)}
@media (max-width:700px){
  .av-slider--portfolio.is-marquee{--av-pf-media:56vw}
  .av-slider--portfolio.is-marquee .av-sold__item{flex-basis:80vw}
  .av-slider--portfolio.is-marquee .av-sold__body{padding-inline:1rem}
  .av-slider--portfolio.is-marquee .av-slider__okno{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
}
/* Typ i metraz pod ulica (sold.items[].spec). order:-1, bo opis karty ma
   column-reverse: fakty (-2) laduja na samym dole, typ (-1) tuz nad nimi. */
.av-sold__spec{order:-1;margin:0;font-size:.8rem;line-height:1.4;color:var(--av-ink-soft)}

/* =============================================================================
   LICZNIKI: liczby liczace w gore (av_count_html() + main.js "Liczniki")
   Cyfry duze, jednostka mniejsza przy linii bazowej. Szerokosc liczby blokuje JS
   (min-width = wartosc koncowa), a cyfry sa wyrownane do prawej, wiec rosnaca
   liczba nie przesuwa jednostki ani sasiednich elementow.
   ============================================================================= */
.av-count{display:inline-flex;align-items:baseline;justify-content:center;flex-wrap:nowrap;white-space:nowrap}
.av-count__num{display:inline-block;text-align:right;font-variant-numeric:tabular-nums lining-nums}
.av-count__sym{margin-left:.02em}
.av-count__unit{margin-left:.28em;font-size:.36em;font-weight:500;letter-spacing:.01em;color:var(--av-on-dark-soft)}
.av-count__unit--pre{margin:0 .28em 0 0}
/* Delikatne domkniecie, gdy licznik dojdzie do wartosci koncowej. */
.av-count.is-done .av-count__num{animation:av-count-done .6s cubic-bezier(.22,1,.36,1)}
@keyframes av-count-done{0%{transform:scale(1.06)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.av-count.is-done .av-count__num{animation:none}}

/* Sekcja "Liczby": ikona nad liczba, wszystko wysrodkowane, liczba duza. Dzieki
   temu "2,95 mln zl" ma do dyspozycji cala szerokosc kafla, a nie miejsce obok ikony. */
#liczby .av-stats__item{text-align:center;padding-block:clamp(1.75rem,3.4vw,2.6rem)}
#liczby .av-stats__top{flex-direction:column-reverse;align-items:center;gap:1.1rem}
#liczby .av-stats__value{font-size:clamp(2.2rem,5.2vw,4.25rem);line-height:.95;letter-spacing:-.035em;color:var(--av-gold)}
#liczby .av-stats__label{margin-top:.35rem;max-width:26ch;margin-inline:auto}
/* Zlota kreska pod liczba: rysuje sie, gdy licznik skonczy. */
#liczby .av-stats__value::after{content:"";display:block;width:2.2rem;height:2px;margin:.9rem auto 0;
background:var(--av-gold);transform:scaleX(.2);opacity:.5;transition:transform .8s cubic-bezier(.22,1,.36,1),opacity .8s}
#liczby .av-stats__value:has(.is-done)::after,#liczby .av-stats__value:not(:has([data-final]))::after{transform:none;opacity:1}

/* Belka Freedom i suwak przed/po: wieksze liczby, jednostka mniejsza. */
.av-pband__facts dt{font-size:clamp(1.9rem,3vw,2.4rem)}
.av-pband__facts .av-count__unit{color:var(--fr-roz)}
.av-staging__figures dt{font-size:clamp(1.9rem,3.2vw,2.5rem)}
.av-staging__figures .av-count{justify-content:flex-start}
/* Telefon: jedna kolumna, cala szerokosc dla liczby, wiec skala idzie w gore. */
@media (max-width:560px){#liczby .av-stats__value{font-size:clamp(3rem,15vw,3.75rem)}}

/* =============================================================================
   NAGLOWKI SEKCJI: wjazd spod maski (main.js "Naglowki sekcji")
   Maska i zanikanie sa w critical.css (wspolne z H1 w hero). Tutaj tylko stan
   przed i po wejsciu w pole widzenia: slowa czekaja pod krawedzia maski,
   przezroczyste, potem wjezdzaja kaskadowo, co 45 ms. Bez rozmycia (1.8.7):
   filter:blur przerysowywal litery w kazdej klatce i drgaly.
   ============================================================================= */
.av-rv-h .av-rv__in{transform:translate3d(0,108%,0);opacity:0;
transition:transform .9s cubic-bezier(.22,1,.36,1),opacity .7s ease;
transition-delay:calc(min(var(--i,0),14) * 45ms)}
.av-rv-h.is-in .av-rv__in{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){
  .av-rv-h .av-rv__in{transform:none;opacity:1;transition:none}
}

/* =============================================================================
   RUCH PRZY PRZEWIJANIU I POD KURSOREM (main.js, wzorce z czerski-nieruchomosci)
   Wszystko na transform/opacity, zero przesuniec ukladu. Stan "przed" wlaczaja
   klasy dodawane przez JS, wiec bez JS i przy "ogranicz ruch" strona stoi.
   ============================================================================= */

/* ---------- 1. Stos krokow "Jak dzialam" ----------
   Karty przyklejaja sie u gory o 16 px nizej niz poprzednia (z przykrytych
   zostaja gorne krawedzie jak przekladki). --q z main.js = jak bardzo nastepna
   karta przykryla te: przykryta maleje od gornej krawedzi i ciemnieje
   (warstwa ::after, tylko opacity). Wiekszy odstep = dluzsza droga stosu.
   Teraz takze na telefonie (wczesniej sam desktop, bez zmniejszania). */
.av-steps.is-stos{gap:clamp(2rem,9vh,5.5rem)}
.av-steps.is-stos .av-steps__item{position:sticky;
top:calc(var(--av-nav-h,80px) + 1rem + var(--i,0) * 16px);
transform-origin:50% 0;scale:calc(1 - var(--q,0) * .06);
box-shadow:0 -18px 40px -26px rgba(var(--av-ink-rgb),.45),0 10px 30px rgba(var(--av-ink-rgb),.06)}
.av-steps.is-stos .av-steps__item::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;
background:var(--av-surface-dark);opacity:calc(var(--q,0) * .38);pointer-events:none}

/* ---------- 2. Kafle wjezdzaja przy przewijaniu ----------
   Schowany kafel: pochylony do tylu i nizej (osobne wlasciwosci rotate/translate/
   scale, zeby nie gryzly sie z "transform" przechylu pod kursorem). Klasa is-in
   odgrywa wejscie z opoznieniem --d (kolejnosc w siatce). "backwards": po
   animacji kafel nie trzyma zadnych wartosci. Lagodniej niz u Czerskiego
   (14 st. i 48 px zamiast 32 st. i 90 px), na telefonie jeszcze o 40% mniej. */
.av-3d-on .av-3d-scena{perspective:1300px}
.av-3d-on .av-3d{--k:1;transform-origin:50% 100%}
.av-3d-on .av-3d:not(.is-in){rotate:x calc(14deg * var(--k));translate:0 calc(48px * var(--k));scale:.96;opacity:0}
.av-3d-on .av-3d.is-in{animation:av-3d-in .95s cubic-bezier(.2,.8,.2,1) var(--d,0s) backwards}
@keyframes av-3d-in{
  from{rotate:x calc(14deg * var(--k));translate:0 calc(48px * var(--k));scale:.96;opacity:0}
  45%{opacity:1}
}
@media (max-width:760px){.av-3d-on .av-3d{--k:.6}}

/* ---------- 3. Przechyl 3D za kursorem + odblask (tylko mysz) ---------- */
/* 1.7.4: delikatniej i na wiecej kart (kat z rozmiaru karty w main.js), uniesienie
   2 px zamiast 4, lzejszy cien i odblask. position:relative przez :where(), zeby
   nie nadpisac sticky (zdjecie konsultacji) ani innego pozycjonowania. */
#liczby .av-stats__item,.av-why__item{position:relative}
:where(.av-tilt){position:relative}
.av-tilt{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
transition:transform .7s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.av-tilt.is-tilt{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-2px);
transition:transform .18s linear,box-shadow .35s;z-index:2;box-shadow:0 22px 36px -26px rgba(0,0,0,.42)}
.av-blask{position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.3),rgba(255,255,255,0) 55%);
mix-blend-mode:soft-light}
.av-tilt.is-tilt .av-blask{opacity:1}
/* W oprawie dyplomu wszystkie dzieci maja position:relative (warstwa nad zlota linia),
   odblask musi zostac warstwa na calej oprawie. */
.av-awards__gallery > .av-blask{position:absolute!important;z-index:5!important}

/* ---------- 4. Kadr Michala w hero: przechyl, glebia, paralaksa ----------
   Klasa av-live dopiero po zaladowaniu strony (kadr to obraz LCP). Zapas 8% na
   przesuwanie zdjecia: krawedzie nie wychodza z ramki. Podpis rusza sie razem
   z kursorem, zdjecie w przeciwna strone. */
.av-hero__media.av-live{transform:perspective(1600px) rotateX(var(--hrx,0deg)) rotateY(var(--hry,0deg));
transition:transform .9s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
/* Rogi kadru tnie clip-path, nie tylko overflow (1.8.10). Zdjecie w kadrze ma
   wlasna warstwe (paralaksa: transform + will-change), a Safari na iPhonie nie
   przycina takiej warstwy promieniem rodzica z overflow:hidden: na stagingu
   zdjecie i podpis mialy proste rogi, a zaokraglona ramka wystawala spod nich
   (przeglad 07.10.2026). clip-path przycina takze warstwy potomne. Przez to
   odpadl cien pod przechylonym kadrem (clip-path ucialby go i tak). */
.av-hero__media{clip-path:inset(0 round var(--av-radius-lg))}
.av-hero__media.av-live.is-tilt{transition:transform .18s linear}
.av-hero__media.av-live img:not(.av-hero__media-logo){
transform:translate3d(var(--hx,0px),calc(var(--hy,0px) + var(--hs,0px)),0) scale(1.08);
transition:transform 1s cubic-bezier(.2,.8,.2,1);will-change:transform}
.av-hero__media.av-live.is-tilt img:not(.av-hero__media-logo){transition:transform .25s linear}
.av-hero__media.av-live .av-hero__who{display:block;transform:translate3d(var(--tx,0px),var(--ty,0px),0);
transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.av-hero__blask{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .4s;
background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.4),rgba(255,255,255,0) 50%);
mix-blend-mode:soft-light}
.av-hero__media.av-live.is-tilt .av-hero__blask{opacity:1}

/* ---------- 5. Slowa zapalane przewijaniem (wstep "O mnie") ---------- */
.av-slowa .av-slowo{opacity:.2;transition:opacity .35s ease}
.av-slowa .av-slowo.is-on{opacity:1}

@media (prefers-reduced-motion:reduce){
  .av-3d-on .av-3d:not(.is-in){rotate:none;translate:none;scale:none;opacity:1}
  .av-tilt,.av-hero__media.av-live,.av-hero__media.av-live img{transform:none!important}
  .av-slowa .av-slowo{opacity:1}
}
/* Siatki "Dlaczego ja" i "Liczby" rysowaly linie podzialu tlem prześwitujacym
   przez 1-pikselowe szczeliny. Przy wjezdzie kafli tlo wychodzilo jako jasne
   plamy w miejscu jeszcze pustych kafli, wiec linia idzie z kaflem (obrys). */
.av-3d-on .av-why__grid,.av-3d-on #liczby .av-stats__grid{background:transparent}
.av-3d-on .av-why__item,.av-3d-on #liczby .av-stats__item{outline:1px solid var(--av-line-dark)}

/* =============================================================================
   MENU STAGGERED (template-parts/_menu.php, main.js "Menu StaggeredMenu")
   Komponent React/GSAP przeniesiony na CSS. Czasy i krzywe 1:1 z timeline:
   otwarcie  - warstwy 0,5 s co 0,07 s (power4.out), panel 0,65 s od 0,15 s,
               pozycje z 140% w dol i 10 st. obrotu, 1 s, co 0,1 s,
               kontakt i profile od 0,45 s co 0,08 s (power3.out);
   zamkniecie - 0,35 s (power3.in) od konca: panel, warstwa zlota, magenta.
   Warstwy w barwach Michala: magenta Freedom, zloto, granatowy panel.
   Zawartosc wraca na start dopiero, gdy panel jest za ekranem (0,55 s).
   Korzen nie lapie klikniec: klik obok panelu trafia w strone i zamyka menu.
   ============================================================================= */
.av-sm{--sm-w:100vw;transition:visibility 0s linear .55s}
.av-sm.is-open{visibility:visible;transition-delay:0s}
.av-sm__warstwy,.av-sm__panel{position:absolute;top:0;bottom:0;right:0;width:var(--sm-w)}
.av-sm__w{position:absolute;inset:0;transform:translateX(100%);transition:transform .35s cubic-bezier(.32,0,.67,0)}
.av-sm__w:nth-child(1){background:var(--av-cta);transition-delay:.1s}
.av-sm__w:nth-child(2){background:var(--av-gold);transition-delay:.05s}
.av-sm.is-open .av-sm__w{transform:none;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.av-sm.is-open .av-sm__w:nth-child(1){transition-delay:0s}
.av-sm.is-open .av-sm__w:nth-child(2){transition-delay:.07s}

.av-sm__panel{display:flex;flex-direction:column;
padding:calc(var(--av-head-h,117px) + 2rem) clamp(1.5rem,4vw,3rem) 2rem;
overflow-y:auto;overscroll-behavior:contain;background:var(--av-surface-dark);color:#fff;pointer-events:auto;
box-shadow:-30px 0 60px -30px rgba(0,0,0,.5);
transform:translateX(100%);transition:transform .35s cubic-bezier(.32,0,.67,0)}
.av-sm.is-open .av-sm__panel{transform:none;transition:transform .65s cubic-bezier(.22,1,.36,1) .15s}

/* Pozycje: kazda w masce (li overflow:hidden), wysuwa sie z dolu z obrotem.
   Zapas nad wersalikami, zeby kreski nad O i Z (WYROZNIENIA) nie byly ciete. */
.av-sm__lista{display:grid;gap:.15rem;margin:0;padding:0;list-style:none}
.av-sm__lista li{overflow:hidden}
.av-sm__lista a{display:flex;align-items:baseline;gap:1rem;min-height:44px;padding:.16em 0 .06em;color:#fff;text-decoration:none}
.av-sm__nr{min-width:1.8em;font:600 .78rem/1 var(--av-font-head);color:var(--av-gold);
translate:0 -.6em;opacity:0;transition:opacity 0s .55s}
.av-sm__etykieta{display:inline-block;transform-origin:0 100%;
font:600 clamp(1.9rem,1.2rem + 2.2vw,2.5rem)/1.08 var(--av-font-head);letter-spacing:-.025em;text-transform:uppercase;
transform:translateY(140%) rotate(10deg);transition:transform 0s linear .55s,color .2s}
.av-sm.is-open .av-sm__nr{opacity:1;transition:opacity .6s ease calc(.35s + var(--i,0) * .1s)}
.av-sm.is-open .av-sm__etykieta{transform:none;
transition:transform 1s cubic-bezier(.22,1,.36,1) calc(.25s + var(--i,0) * .1s),color .2s}
.av-sm__lista a:hover .av-sm__etykieta,.av-sm__lista a:focus-visible .av-sm__etykieta{color:var(--av-gold)}
.av-sm__lista a:focus-visible{outline:2px solid var(--av-gold);outline-offset:4px;border-radius:6px}

/* Dol panelu: kontakt, CTA, profile, adres biura. */
.av-sm__dol{margin-top:auto;padding-top:2.25rem}
.av-sm__tytul{margin:0 0 .9rem;font:600 .72rem/1 var(--av-font-head);letter-spacing:.2em;text-transform:uppercase;
color:var(--av-gold);opacity:0;transition:opacity 0s .55s}
.av-sm.is-open .av-sm__tytul{opacity:1;transition:opacity .5s ease .41s}
.av-sm__kontakt{display:grid;justify-items:start;gap:.15rem}
.av-sm__kontakt a:not(.av-btn){display:inline-flex;align-items:center;gap:.65rem;min-height:44px;
font:600 1rem/1.3 var(--av-font-head);color:#fff;text-decoration:none;word-break:break-word}
.av-sm__ico{flex:none;width:18px;height:18px;color:var(--av-gold)}
.av-sm__kontakt a:not(.av-btn):hover{color:var(--av-gold)}
.av-sm__kontakt a:not(.av-btn):focus-visible,.av-sm__social a:focus-visible{outline:2px solid var(--av-gold);outline-offset:3px;border-radius:4px}
.av-sm__cta{margin-top:.6rem}
.av-sm__social{display:flex;flex-wrap:wrap;gap:0 1.4rem;margin:.9rem 0 0;padding:0;list-style:none}
.av-sm__social a{display:inline-flex;align-items:center;min-height:44px;font-size:.9rem;color:var(--av-on-dark-soft);text-decoration:none}
.av-sm__social a:hover{color:var(--av-gold)}
.av-sm__podpis{margin:.6rem 0 0;font-size:.75rem;line-height:1.5;color:var(--av-on-dark-soft)}
.av-sm__link{opacity:0;transform:translateY(25px);transition:opacity 0s .55s,transform 0s .55s}
.av-sm.is-open .av-sm__link{opacity:1;transform:none;
transition:opacity .55s cubic-bezier(.33,1,.68,1) calc(.45s + var(--k,0) * .08s),
transform .55s cubic-bezier(.33,1,.68,1) calc(.45s + var(--k,0) * .08s),background-color .2s,color .2s}

/* Szerokosc panelu jak w oryginale: telefon caly ekran, tablet okolo polowy, desktop waski bok. */
@media (min-width:641px){.av-sm{--sm-w:min(520px,72vw)}}
@media (min-width:1101px){.av-sm{--sm-w:min(500px,36vw)}}

/* Dolne paski CTA (duzy na desktopie, telefoniczny na mobile): plynny wjazd
   i zjazd przy przewijaniu, zamknieciu krzyzykiem i otwarciu menu. Do 1.6.2
   JS przelaczal hidden, a display:none ucinal kazde przejscie, wiec pasek
   wskakiwal i znikal skokiem (zgloszenie 05.10.2026). Teraz JS zmienia tylko
   .is-visible i inert. Wjazd dluzszy i miekko hamujacy, zjazd krotszy
   i przyspieszajacy jak wsuwana szuflada; przezroczystosc idzie razem z ruchem.
   Schowany pasek nie lapie klikniec (pointer-events) ani fokusu (inert). */
.av-ctabar,.av-callbar{opacity:0;transform:translate3d(0,100%,0);pointer-events:none;
transition:transform .45s cubic-bezier(.4,0,.7,.2),opacity .4s ease .12s}
.av-ctabar.is-visible,.av-callbar.is-visible{opacity:1;transform:none;pointer-events:auto;
transition:transform .65s cubic-bezier(.22,1,.36,1),opacity .45s ease}
/* Otwarte menu: paski zjezdzaja ta sama droga, po zamknieciu wracaja. */
html.av-menu-open .av-callbar,html.av-menu-open .av-ctabar{opacity:0;transform:translate3d(0,100%,0);pointer-events:none;
transition:transform .45s cubic-bezier(.4,0,.7,.2),opacity .4s ease .12s}
/* Ogranicz ruch: bez przesuwu, samo krotkie wygaszenie. */
@media (prefers-reduced-motion:reduce){
  .av-ctabar,.av-callbar{transform:none!important;transition:opacity .25s linear!important}
}
/* Na telefonie strona pod pelnoekranowym panelem menu nie przewija sie. */
@media (max-width:640px){html.av-menu-open{overflow:hidden}}

@media (prefers-reduced-motion:reduce){
  .av-sm,.av-sm *,.av-menu-btn,.av-menu-btn *{transition-duration:0s!important;transition-delay:0s!important}
}
/* Menu rozwija sie pod bialym paskiem (zgloszenie 05.10.2026): warstwy i panel
   zaczynaja sie na dolnej krawedzi naglowka (--av-sm-top z main.js), wiec nie
   zachodza ani za pasek, ani nad niego na pasek z adresem. Panel nie potrzebuje
   juz zapasu na wysokosc naglowka. */
.av-sm{top:var(--av-sm-top,0px)}
.av-sm__panel{padding-top:clamp(1.5rem,4.5vh,2.75rem)}

/* =============================================================================
   PRZYCISKI CTA: HOVER I PULS (prosby klienta 05.10.2026)

   Hover kazdego magentowego przycisku (.av-btn--accent): gradient przesuwa sie
   plynnie (critical.css), przycisk unosi sie o 2 px z magentowa poswiata, a przez
   srodek raz przebiega blysk (::before, pod napisem dzieki isolation:isolate).
   Blysk biegnie tylko przy najechaniu; przy zjechaniu wraca bez animacji, wiec
   nie cofa sie przez przycisk. Uniesienie i blysk tylko przy myszy (hover:hover):
   na telefonie :hover zostaje po dotknieciu i przycisk wisialby uniesiony.

   Puls tylko na dwoch najwazniejszych przyciskach (klasa .av-btn--puls: "Wycena"
   w naglowku i glowny przycisk w hero). W 1.7.2 pulsowal kazdy przycisk CTA
   i bylo tego za duzo (zgloszenie klienta). Fala co 4 s: ::after na obrysie,
   wylacznie transform + opacity (kompozytor, CLS 0), skala X/Y z main.js
   ("Pulsujace CTA"), zeby fala odchodzila o 12 px z kazdej strony. Po najechaniu
   i przy fokusie fala gasnie przez filter (opacity jest zajete przez animacje,
   wiec transition na nim nie zadziala). Stoi przy wylaczonym przycisku i przy
   "ogranicz ruch".

   WhatsApp w kontakcie bez blysku: na telefonie ma position:static, wiec ::before
   nie mialby wzgledem czego sie ustawic. :where() trzyma position:relative
   na zerowej specyficznosci, zeby nie nadpisac innego pozycjonowania.
   ============================================================================= */
:where(.av-btn--accent:not(.av-contact__wa)){position:relative;isolation:isolate}
.av-btn--accent{transition:background-position .6s cubic-bezier(.22,1,.36,1),transform .25s cubic-bezier(.22,1,.36,1),
box-shadow .25s ease,color .2s,border-color .2s}
.av-btn--accent:not(.av-contact__wa)::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.3) 50%,transparent 60%) 150% 0/250% 100% no-repeat}
@media (hover:hover){
  .av-btn--accent:hover{transform:translateY(-2px);box-shadow:0 12px 24px -12px color-mix(in srgb,var(--av-cta) 80%,transparent)}
  .av-btn--accent:not(.av-contact__wa):hover::before{background-position:-50% 0;transition:background-position .85s cubic-bezier(.22,1,.36,1)}
  .av-btn--puls:hover::after{filter:opacity(0)}
}
.av-btn--accent:active{transform:translateY(0);box-shadow:none}
.av-btn--accent:disabled{transform:none;box-shadow:none;cursor:default}
.av-btn--accent:disabled::before{display:none}

.av-btn--puls::after{content:"";position:absolute;inset:calc(-1 * var(--av-border-w,1px));border-radius:inherit;pointer-events:none;
box-shadow:0 0 0 2px color-mix(in srgb,var(--av-cta) 80%,transparent),
0 0 16px 3px color-mix(in srgb,var(--av-cta) 45%,transparent);
opacity:0;transition:filter .35s ease;animation:av-puls 4s cubic-bezier(.22,.61,.36,1) 1.2s infinite}
@keyframes av-puls{
  0%{transform:scale(1);opacity:0}
  6%{opacity:.85}
  45%,100%{transform:scale(var(--av-puls-sx,1.07),var(--av-puls-sy,1.45));opacity:0}
}
.av-btn--puls:focus-visible::after{filter:opacity(0)}
.av-btn--puls:disabled::after{animation:none}
/* Ogranicz ruch: bez pulsu, uniesienia i blysku; zostaje zmiana koloru.
   Selektory z ta sama specyficznoscia co reguly wyzej, inaczej przegrywaja
   (w 1.7.2 fala chodzila mimo "ogranicz ruch", zlapane testem). */
@media (prefers-reduced-motion:reduce){
  .av-btn--puls::after{animation:none}
  .av-btn--accent:not(.av-contact__wa)::before{display:none}
  .av-btn--accent:hover{transform:none}
  .av-btn--accent{transition:background-position .2s linear,color .2s,border-color .2s}
}

/* =============================================================================
   STOPKA 1.7.4 (prosba klienta 05.10.2026: "upiekszyc", uciekajace "l" z ".pl")
   Granat z lekka zlota poswiata w lewym gornym rogu i magentowa w prawym dolnym,
   dwa cienkie romby jako znak wodny (sygnet Michala to romb). Na gorze pasek CTA
   (footer.cta_title), nizej marka jak w naglowku, zlote naglowki kolumn z kreska,
   linki z wysuwana kreska, kontakt w okraglych plakietkach, profile jako pigulki
   z ikona, zlota linia nad dolnym paskiem i "Do gory". Adres e-mail lamie sie
   tylko po "@" (wbr w footer.php), a na desktopie kolumna kontaktu jest szersza,
   wiec adres miesci sie w jednej linii.
   ============================================================================= */
.av-footer{position:relative;isolation:isolate;overflow:hidden;
background:radial-gradient(55% 70% at 0% 0%,rgba(var(--av-gold-rgb),.09),transparent 70%),
radial-gradient(45% 60% at 100% 100%,color-mix(in srgb,var(--av-cta) 12%,transparent),transparent 70%),
var(--av-surface-dark);
border-top:1px solid rgba(var(--av-gold-rgb),.28)}
.av-footer::before,.av-footer::after{content:"";position:absolute;z-index:-1;pointer-events:none;rotate:45deg;
border:1px solid rgba(var(--av-gold-rgb),.1);border-radius:36px}
.av-footer::before{width:420px;height:420px;right:-170px;top:-190px}
.av-footer::after{width:260px;height:260px;right:-60px;top:-110px;border-color:rgba(var(--av-gold-rgb),.07)}

/* Pasek CTA */
.av-footer__cta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.25rem 2.5rem;
margin-bottom:clamp(2.5rem,5vw,3.5rem);padding:clamp(1.4rem,3vw,2.1rem) clamp(1.25rem,3vw,2.5rem);
border:1px solid rgba(var(--av-gold-rgb),.24);border-radius:var(--av-radius-lg);
background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.015))}
.av-footer__cta-eyebrow{margin:0 0 .45rem;font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--av-gold)}
.av-footer__cta-title{margin:0;max-width:32ch;font-family:var(--av-font-head);font-weight:600;
font-size:clamp(1.2rem,.95rem + 1vw,1.65rem);line-height:1.22;letter-spacing:-.015em;color:var(--av-on-dark)}
.av-footer__cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.av-footer__tel{display:inline-flex;align-items:center;gap:.6rem;min-height:52px;padding:.5rem 1.3rem;
border:1px solid rgba(255,255,255,.24);border-radius:var(--av-radius-pill);
font-family:var(--av-font-head);font-weight:600;color:var(--av-on-dark);text-decoration:none;
transition:border-color .2s,color .2s,background-color .2s}
.av-footer__tel svg{width:18px;height:18px;color:var(--av-gold)}
.av-footer__tel:hover{border-color:var(--av-gold);color:var(--av-gold);background:rgba(var(--av-gold-rgb),.08)}

/* Siatka: marka i kontakt szersze niz listy linkow */
.av-footer__grid{border-bottom:0}
@media (min-width:1041px){
  .av-footer__grid{grid-template-columns:minmax(0,1.45fr) repeat(var(--av-fcols,2),minmax(0,.9fr)) minmax(0,1.3fr)}
}
@media (min-width:701px) and (max-width:1040px){
  .av-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Marka */
.av-footer__lockup{display:inline-flex;flex-direction:column;gap:.4rem;margin:0 0 1rem}
.av-footer__lockup .av-footer__name{margin:0;font-size:1.4rem;line-height:1;letter-spacing:-.025em}
.av-footer__sub{display:flex;align-items:center;gap:.45rem;font-size:.66rem;font-weight:500;letter-spacing:.16em;
text-transform:uppercase;color:var(--av-on-dark-soft)}
.av-footer__sub::before{content:"";flex:none;width:14px;height:2px;background:var(--av-cta)}
.av-footer__sub b{font-weight:800;color:var(--av-gold)}
.av-footer__desc{font-size:.86rem;line-height:1.7}

/* Naglowki kolumn: zloto z krotka kreska */
.av-footer__h{display:flex;align-items:center;gap:.6rem;margin-bottom:1.1rem;
font-size:.7rem;letter-spacing:.18em;color:var(--av-gold)}
.av-footer__h::after{content:"";flex:none;width:26px;height:1px;background:linear-gradient(90deg,var(--av-gold),transparent)}

/* Linki: kreska wysuwa sie przed tekstem, tekst jasnieje. li jako flex: link
   (inline-flex) i zwykly napis (span) maja wtedy te sama wysokosc wiersza;
   bez tego odstepy w "Nawigacji" byly wieksze niz w "Obszarze dzialania". */
.av-footer__col ul:not(.av-footer__contact) li{display:flex}
.av-footer__col ul:not(.av-footer__contact) a{display:inline-flex;align-items:center;color:var(--av-on-dark-soft);
transition:color .2s}
.av-footer__col ul:not(.av-footer__contact) a::before{content:"";flex:none;width:0;height:1px;margin-right:0;
background:var(--av-gold);transition:width .25s cubic-bezier(.22,1,.36,1),margin-right .25s cubic-bezier(.22,1,.36,1)}
.av-footer__col ul:not(.av-footer__contact) a:hover{color:var(--av-on-dark)}
.av-footer__col ul:not(.av-footer__contact) a:hover::before{width:12px;margin-right:.5rem}

/* Kontakt: ikony w okraglych plakietkach */
.av-footer__contact li{grid-template-columns:34px minmax(0,1fr);gap:.75rem;align-items:center;margin-bottom:.7rem}
.av-footer__contact svg{box-sizing:border-box;width:34px;height:34px;margin:0;padding:8px;border-radius:50%;
border:1px solid rgba(var(--av-gold-rgb),.35);background:rgba(var(--av-gold-rgb),.07);color:var(--av-gold)}
.av-footer__contact a,.av-footer__contact span{color:var(--av-on-dark);text-decoration:none}
.av-footer__contact a{overflow-wrap:normal;word-break:normal;transition:color .2s}
.av-footer__contact a:hover{color:var(--av-gold)}

/* Profile: pigulki z ikona */
.av-footer__social{gap:.5rem;margin-top:1.35rem}
.av-footer__social a{display:inline-flex;align-items:center;gap:.5rem;min-height:40px;padding:.4rem 1rem .4rem .75rem;
border:1px solid rgba(255,255,255,.18);border-radius:var(--av-radius-pill);background:rgba(255,255,255,.04);
font-size:.8rem;letter-spacing:.02em;transition:background-color .2s,border-color .2s,color .2s}
.av-footer__social svg{width:16px;height:16px;color:var(--av-gold);transition:color .2s}
.av-footer__social a:hover{background:var(--av-gold);border-color:var(--av-gold);color:var(--av-surface-dark)}
.av-footer__social a:hover svg{color:var(--av-surface-dark)}

/* Dolny pasek: zlota linia wygaszana na koncach, "Do gory" */
.av-footer__bar{position:relative;align-items:center;padding-top:1.6rem}
.av-footer__bar::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(var(--av-gold-rgb),.38),transparent)}
.av-footer__legal{align-items:center}
.av-footer__top{display:inline-flex;align-items:center;gap:.45rem;min-height:36px;padding:.3rem .5rem .3rem .9rem;
border:1px solid rgba(255,255,255,.18);border-radius:var(--av-radius-pill);color:var(--av-on-dark);
font-size:.78rem;text-decoration:none;transition:border-color .2s,color .2s}
.av-footer__top svg{width:22px;height:22px;padding:4px;border-radius:50%;background:rgba(var(--av-gold-rgb),.14);
color:var(--av-gold);transition:translate .25s cubic-bezier(.22,1,.36,1)}
.av-footer__top:hover{border-color:var(--av-gold);color:var(--av-gold)}
.av-footer__top:hover svg{translate:0 -2px}

@media (max-width:700px){
  .av-footer__cta{flex-direction:column;align-items:stretch;text-align:center}
  .av-footer__cta-title{margin-inline:auto}
  .av-footer__cta-actions{flex-direction:column;align-items:stretch}
  .av-footer__tel{justify-content:center}
  .av-footer__lockup{align-items:center}
  .av-footer__h{justify-content:center}
  .av-footer__h::after{display:none}
  .av-footer__col .av-footer__contact{display:grid;justify-content:center;gap:.25rem}
  .av-footer__contact li{text-align:left}
  .av-footer::before{right:-260px}
}
@media (prefers-reduced-motion:reduce){
  .av-footer__col a::before,.av-footer__top svg{transition:none}
}

/* =============================================================================
   PREZENTACJA OFERTY: karta wyniku i pozostale pokoje pod suwakiem (1.7.5)
   Pod suwakiem przed/po zostawalo ok. 300 px pustego granatu, bo lewa kolumna
   (tekst, lista, liczby) byla dwa razy wyzsza (zgloszenie 05.10.2026). Liczby
   przeszly z lewej kolumny do karty wyniku, pod nia dwie miniatury innych pokoi
   z tej samej sesji, oznaczone jako wizualizacja.
   ============================================================================= */
.av-staging__side{display:grid;gap:1.1rem;min-width:0}
.av-staging__result{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.55rem 1.75rem;
grid-template-areas:"tag link" "info figs";padding:1rem 1.35rem 1.1rem;border:1px solid rgba(var(--av-gold-rgb),.22);border-radius:var(--av-radius-lg);
background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
.av-staging__result-tag{grid-area:tag;display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;margin:0;
font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--av-on-dark-soft)}
.av-staging__result-flag{padding:.3rem .6rem;border-radius:var(--av-radius-pill);background:var(--av-cta);
color:var(--av-on-cta);font-size:.6rem;letter-spacing:.14em;line-height:1}
.av-staging__result-title{margin:0;font-size:1.2rem;line-height:1.2;color:var(--av-on-dark)}
.av-staging__result-spec{margin:.3rem 0 0;font-size:.84rem;color:var(--av-on-dark-soft)}
.av-staging__result-info{grid-area:info;min-width:0}
.av-staging__result-figs{grid-area:figs;display:flex;margin:0}
.av-staging__result-figs div{padding:0 1.35rem}
.av-staging__result-figs div:first-child{padding-left:0}
.av-staging__result-figs div:last-child{padding-right:0}
.av-staging__result-figs div + div{border-left:1px solid var(--av-line-dark)}
.av-staging__result-figs dt{font-family:var(--av-font-head);font-weight:600;font-size:clamp(1.5rem,1.1rem + 1vw,1.9rem);
line-height:1;letter-spacing:-.03em;color:var(--av-gold)}
.av-staging__result-figs .av-count{justify-content:flex-start}
.av-staging__result-figs dd{margin:.4rem 0 0;font-size:.74rem;color:var(--av-on-dark-soft)}
.av-staging__result-link{grid-area:link;justify-self:end;display:inline-flex;align-items:center;gap:.4rem;
font-size:.8rem;font-weight:600;color:var(--av-gold);text-decoration:none;
transition:color .2s}
.av-staging__result-link svg{width:16px;height:16px;transition:translate .25s cubic-bezier(.22,1,.36,1)}
.av-staging__result-link:hover{color:var(--av-on-dark)}
.av-staging__result-link:hover svg{translate:4px 0}

.av-staging__rooms-title{margin:0 0 .6rem;font-size:.7rem;font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:var(--av-gold)}
.av-staging__rooms ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;margin:0;padding:0;list-style:none}
.av-staging__room figure{position:relative;margin:0;overflow:hidden;border:1px solid var(--av-line-dark);
border-radius:var(--av-radius-lg);background:var(--av-surface-dark-alt,#212329)}
.av-staging__room img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.av-staging__room figure:hover img{transform:scale(1.04)}
.av-staging__room figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;
justify-content:space-between;align-items:center;gap:.4rem;padding:1.75rem .8rem .7rem;
background:linear-gradient(rgba(24,25,30,0),rgba(24,25,30,.88));color:#fff;font-size:.84rem;font-weight:600}
.av-staging__room-flag{padding:.25rem .55rem;border-radius:var(--av-radius-pill);background:rgba(24,25,30,.78);
border:1px solid rgba(255,255,255,.18);font-size:.64rem;font-weight:500;letter-spacing:.04em}

/* Nizsza kolumna jedzie przyklejona obok wyzszej, az ta sie skonczy: zamiast
   pustego granatu pod krotsza kolumna obie koncza sie razem. Sticky na obu,
   bo dziala tylko na nizszej (wyzsza wypelnia caly wiersz siatki i nie ma sie
   gdzie przesunac). Do 1.8.7 wyzsza byla prawa (suwak, karta i miniatury
   pokoi), od 1.8.8 bez miniatur jest odwrotnie: lewa o ok. 110 px. Tylko na
   wysokich ekranach: przy niskim oknie przyklejona kolumna wystawalaby pod
   dolna krawedz. */
@media (min-width:1041px) and (min-height:820px){
  .av-staging__copy,.av-staging__side{position:sticky;top:calc(var(--av-nav-h,80px) + 1.5rem)}
}
@media (max-width:520px){
  .av-staging__result{grid-template-columns:1fr;grid-template-areas:"tag" "info" "figs" "link"}
  .av-staging__result-link{justify-self:start}
  /* Waskie miniatury: wyzszy kadr i mniejszy podpis, inaczej podpis zaslanial zdjecie. */
  .av-staging__room img{aspect-ratio:4/3}
  .av-staging__room figcaption{gap:.3rem;padding:1.1rem .6rem .55rem;font-size:.78rem}
  .av-staging__room-flag{padding:.18rem .45rem;font-size:.58rem}
}
@media (prefers-reduced-motion:reduce){
  .av-staging__room img,.av-staging__result-link svg{transition:none}
  .av-staging__room figure:hover img{transform:none}
}

/* =============================================================================
   CALA STRONA W STYLU STOPKI (1.8.0, prosba klienta 05.10.2026: "upiekszyc
   jak dolna sekcje, do calej strony")
   Te same srodki co w stopce 1.7.4, rozlozone na wszystkie sekcje:
   poswiaty zlota i magentowa na granacie, cienkie zlote romby zamiast pelnych
   sygnetow, zlote linie, szklane karty ze zlota obwodka, okragle plakietki,
   zlota kreska pod naglowkami. Wszystko CSS (gradienty i ramki, zero
   dodatkowych plikow); zdjecia tla FAQ i "Liczb" (Higgsfield) ida przez <img>
   w istniejacym wariancie .av-sec--photo.
   ============================================================================= */

/* 1. Poswiaty na granacie. Kolejne ciemne sekcje na zmiane z lewego i prawego
      rogu, zeby ta sama plama nie powtarzala sie co ekran. */
.av-sec--dark,.av-band{background:
radial-gradient(55% 70% at 0% 0%,rgba(var(--av-gold-rgb),.075),transparent 70%),
radial-gradient(45% 60% at 100% 100%,color-mix(in srgb,var(--av-cta) 10%,transparent),transparent 70%),
var(--av-surface-dark)}
#dlaczego-ja,#prezentacja,#opinie,.av-contact{background:
radial-gradient(55% 70% at 100% 0%,rgba(var(--av-gold-rgb),.075),transparent 70%),
radial-gradient(45% 60% at 0% 100%,color-mix(in srgb,var(--av-cta) 10%,transparent),transparent 70%),
var(--av-surface-dark)}
/* Jasne sekcje: tylko cieple swiatlo w rogu, kolor tla bez zmian. */
.av-sec--light,.av-sec--alt{background-image:radial-gradient(50% 60% at 100% 0%,rgba(var(--av-gold-rgb),.10),transparent 70%)}

/* 2. Romby: cienki zloty obrys jak w stopce zamiast pelnego sygnetu.
      Ta sama lista selektorow co w "WARSTWA FREEDOM", wiec ta sama
      specyficznosc; regula stoi dalej w pliku i wygrywa. Krycie 1, bo kolor
      niesie juz sama ramka (stare .06-.12 zgasiloby obrys do zera). */
#o-mnie::before,#o-mnie::after,#porownanie::before,#porownanie::after,
#liczby:not(.av-sec--photo)::before,#liczby:not(.av-sec--photo)::after,
#dlaczego-ja::before,#dlaczego-ja::after,#proces::after,
#konsultacja::before,#konsultacja::after,#portfolio::before,
#opinie::before,#opinie::after,#gwarancje::before,#gwarancje::after,
#partner-finansowy::after,#faq:not(.av-sec--photo)::before,#faq:not(.av-sec--photo)::after,
.av-contact::before,.av-contact::after,#informacje::before{
background:none;border:1px solid rgba(176,0,90,.14);border-radius:12%;rotate:45deg;opacity:1}
#liczby:not(.av-sec--photo)::before,#liczby:not(.av-sec--photo)::after,#dlaczego-ja::before,#dlaczego-ja::after,
#konsultacja::before,#konsultacja::after,#opinie::before,#opinie::after,
#faq:not(.av-sec--photo)::before,#faq:not(.av-sec--photo)::after,.av-contact::before,.av-contact::after{
border-color:rgba(var(--av-gold-rgb),.13)}

/* 3. Zlota linia miedzy dwiema ciemnymi sekcjami (pasek CTA, prezentacja,
      konsultacja ida po sobie): bez niej granat zlewal sie w jeden blok. */
:is(.av-sec--dark,.av-sec--photo,.av-band) + :is(.av-sec--dark,.av-sec--photo,.av-band){
border-top:1px solid transparent;
border-image:linear-gradient(90deg,transparent,rgba(var(--av-gold-rgb),.38),transparent) 1}

/* 4. Kafle na granacie (Liczby, Dlaczego ja) jako szklo ze zlotymi liniami:
      pelne granatowe tlo zaslanialo poswiate. Linie siatki z outline (jak przy
      wejsciu 3D), bo tlo siatki przeswitywaloby przez polprzezroczyste kafle. */
.av-why__grid,#liczby .av-stats__grid{background:transparent}
.av-why__item,#liczby:not(.av-sec--photo) .av-stats__item{
background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
outline:1px solid rgba(var(--av-gold-rgb),.2)}
.av-3d-on .av-why__item,.av-3d-on #liczby:not(.av-sec--photo) .av-stats__item{outline-color:rgba(var(--av-gold-rgb),.2)}

/* 5. Pasek CTA jak pasek na gorze stopki: szklana karta ze zlota obwodka. */
.av-band .av-band__in{padding:clamp(1.4rem,3.2vw,2.4rem) clamp(1.25rem,3.4vw,2.6rem);
border:1px solid rgba(var(--av-gold-rgb),.24);border-radius:var(--av-radius-lg);
background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
/* Ten element jest tez kontenerem .av-wrap: ramka ma szerokosc tresci innych
   sekcji (kontener minus wciecia), a wciecie przechodzi do srodka karty. */
width:calc(100% - 2 * var(--av-pad-x));max-width:calc(var(--av-max) - 2 * var(--av-pad-x))}

/* 6a. FAQ: zlote linie, otwarte pytanie z poswiata i zlotym paskiem, znacznik
       w okraglej plakietce jak ikony kontaktu w stopce. */
.av-faq__list{border-top-color:rgba(var(--av-gold-rgb),.22)}
.av-faq__item{border-bottom-color:rgba(var(--av-gold-rgb),.22);transition:background-color .3s}
.av-faq__item summary{padding-inline:1rem}
.av-faq__a{padding-left:1rem}
.av-faq__item[open]{background:linear-gradient(90deg,rgba(var(--av-gold-rgb),.07),transparent 75%);
box-shadow:inset 2px 0 0 var(--av-gold)}
.av-faq__item summary::after{border-radius:50%;border:1px solid rgba(var(--av-gold-rgb),.35);
background-color:rgba(var(--av-gold-rgb),.07)}
.av-faq__item[open] summary::after{border-color:var(--av-accent)}

/* 6b. Kontakt: zlote linie i etykiety jak naglowki kolumn w stopce. */
.av-contact__list{border-top-color:rgba(var(--av-gold-rgb),.22)}
.av-contact__list li{border-bottom-color:rgba(var(--av-gold-rgb),.22)}
.av-contact__k{color:var(--av-gold)}
.av-contact__v{transition:color .2s}
a.av-contact__v:hover{color:var(--av-gold)}

/* 6c. Ikony kontaktu przy procesie: okragle plakietki jak w stopce
       (magenta zostaje: na jasnym tle zloto mialoby za slaby kontrast). */
.av-process__contact li::before{border-radius:50%}

/* 6d. Opinie: zlota kreska na gorze bialej karty. */
.av-review{box-shadow:inset 0 3px 0 var(--av-gold)}

/* 6e. Plakietka nad naglowkiem na granacie: cienka zlota obwodka. */
.av-sec--dark .av-eyebrow,.av-sec--photo .av-eyebrow,.av-band .av-eyebrow{box-shadow:inset 0 0 0 1px rgba(var(--av-gold-rgb),.3)}

/* 7. Zlota kreska pod naglowkiem kazdej sekcji, jak pod naglowkami kolumn
      w stopce; w wysrodkowanych naglowkach rozchodzi sie na obie strony. */
.av-shead > :last-child::after{content:"";display:block;width:64px;height:2px;margin-top:1.1rem;
background:linear-gradient(90deg,var(--av-gold),rgba(var(--av-gold-rgb),0))}
.av-shead--center > :last-child::after{margin-inline:auto;width:96px;
background:linear-gradient(90deg,rgba(var(--av-gold-rgb),0),var(--av-gold),rgba(var(--av-gold-rgb),0))}

/* =============================================================================
   JEDEN JEZYK KSZTALTOW (1.8.8, przeglad 07.10.2026: "nie mieszac az tak
   zaokraglen i prostych kresek", "zachowac spojnosc guzikow")
   Karty i zdjecia maja radius 28 px, przyciski i plakietki sa pigulkami,
   ikony w kolkach. Ponizej elementy, ktore do 1.8.7 zostaly ostrymi
   prostokatami posrod zaokraglonych kart (zmierzone skryptem na 390 i 1440 px:
   kazdy widoczny blok z tlem albo ramka i radiusem 0). Listy z liniami
   podzialu (FAQ, kontakt, tabela porownania, korzysci konsultacji) zostaja:
   to typografia, nie karty.
   ============================================================================= */

/* "Dlaczego ja" i "Liczby": osobne zaokraglone kafle z odstepem zamiast siatki
   prostokatow rysowanej obrysem 1 px (zlote linie krzyzowaly sie miedzy
   kaflami). outline zamieniony na border: starszy Safari na iPhonie rysuje
   outline prostokatny mimo radiusa. */
.av-why__grid,#liczby .av-stats__grid{gap:clamp(.75rem,1.6vw,1.1rem);border:0}
.av-why__item,#liczby .av-stats__item{border-radius:var(--av-radius-lg)}
.av-why__item,.av-3d-on .av-why__item,.av-3d-on #liczby .av-stats__item{outline:0}
.av-why__item{border:var(--av-border-w) solid rgba(var(--av-gold-rgb),.2)}
#liczby .av-stats__icon{border-radius:50%}

/* Kroki "Jak dzialam": zloty pasek 3 px z lewej zawijal sie na radiusie karty
   w zloty polksiezyc. Karta ma teraz zwykla ramke jak inne karty, akcent
   zostaje w kresce przy numerze. */
.av-steps__item{border-left:var(--av-border-w) solid var(--av-line)}

/* Opinie: karty z radiusem jak reszta kart. overflow, zeby belka akcentu
   (::before, wysuwana przy najechaniu) nie wystawala prostym rogiem. */
.av-review{border-radius:var(--av-radius-lg);overflow:hidden}

/* Kontakt: profile w kolkach, jak ikony kontaktu w stopce. */
.av-contact__social a{border-radius:50%}

/* Sprzedane: plakietka SPRZEDANE jako pigulka, jak ta sama plakietka w karcie
   wyniku pod suwakiem przed/po. Wisi nad dolna krawedzia kadru zamiast
   stac na niej prostokatem. */
.av-sold__flag{border-radius:var(--av-radius-pill)}
.av-slider--portfolio .av-sold__flag{bottom:.85rem}

/* =============================================================================
   TALIA KART "DLACZEGO JA" NA TELEFONIE (1.8.8, main.js punkt 6)
   Klasy dokleja skrypt tylko na telefonie w pionie i bez "ogranicz ruch":
   .av-why__talia (oslona: wysokosc = talia + droga przewijania),
   .av-why__talia-pin (przyklejona talia z kropkami), .is-talia na liscie.
   Karty leza w jednej komorce siatki, wiec maja wysokosc najwyzszej (tylna
   wyzsza karta nie wystaje spod przedniej). Pozycje, krycie i przyciemnienie
   kazdej karty ustawia skrypt (transform, opacity, z-index, --talia-dim).
   ============================================================================= */
.av-why__talia{position:relative}
.av-why__talia-pin{position:sticky;top:96px}
/* padding-top = 3 widoczne tylne warstwy x 12 px podgladu (ZAGL * WIDAC w main.js) */
/* isolation: z-indeksy kart (0-70) zostaja w liscie, a kropki pod nia leza nad
   karta, ktora wraca pod talie. */
.av-why__grid.is-talia{grid-template-columns:minmax(0,1fr);gap:0;padding-top:36px;isolation:isolate}
.av-why__grid.is-talia > .av-why__item{grid-area:1/1;transform-origin:50% 0;will-change:transform,opacity;
/* Szklo na pelnym granacie: polprzezroczyste karty pokazywalyby tekst kart pod spodem. */
background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.012)),var(--av-surface-dark);
box-shadow:0 -10px 28px -16px rgba(0,0,0,.65)}
/* Przyciemnienie tylnych kart: warstwa nad trescia, tylko opacity. */
.av-why__grid.is-talia > .av-why__item::after{content:"";position:absolute;inset:-1px;border-radius:inherit;
background:var(--av-surface-dark);opacity:var(--talia-dim,0);pointer-events:none}
.av-why__kropki{position:relative;z-index:1;display:flex;justify-content:center;gap:.4rem;margin:1.1rem 0 0;padding:0;list-style:none}
.av-why__kropki li{width:6px;height:6px;border-radius:var(--av-radius-pill);background:rgba(255,255,255,.22);
transition:width .35s cubic-bezier(.22,1,.36,1),background-color .35s}
.av-why__kropki li.is-on{width:20px;background:var(--av-gold)}
/* Obrazek do przedniej karty pod kropkami (why-us.php, [data-av-why-obrazy]).
   Wysokosc ustawia main.js: tyle, ile zostaje do dolnego paska, najwyzej 16:9;
   na niskim telefonie panel znika (.is-pusty), a talia zostaje. Obrazy leza
   jeden na drugim; przedni przenika z lekkim oddaleniem (tylko opacity
   i transform). Promien i zlota obwodka jak karty talii. */
.av-why__obrazy{position:relative;overflow:hidden;margin:12px 0 0;height:0;
border:var(--av-border-w) solid rgba(var(--av-gold-rgb),.2);border-radius:var(--av-radius-lg);
clip-path:inset(0 round var(--av-radius-lg));background:var(--av-surface-dark-alt,#212329)}
/* Bez przejscia wysokosci (1.8.10): wysokosc panelu jest stala dla danej
   szerokosci ekranu (main.js liczy ja z 100svh), wiec nie ma czego animowac;
   do 1.8.9 zmieniala sie przy chowaniu paska adresu Safari i panel podskakiwal.
   clip-path jak w kadrze hero: przenikajace obrazy maja wlasne warstwy. */
.av-why__obrazy.is-pusty{opacity:0;margin-top:0;border-width:0}
.av-why__obrazy img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;
opacity:0;transform:scale(1.05);pointer-events:none;
transition:opacity .6s ease,transform 1.4s cubic-bezier(.22,1,.36,1)}
.av-why__obrazy img.is-on{opacity:1;transform:none}

/* =============================================================================
   PRZEGLAD 07.10.2026, CZESC 2 (1.8.9): krotszy landing
   ============================================================================= */

/* Pasek CTA "Sprawdz, ile realnie warta..." jako belka (1.8.9). Byl karta
   z naglowkiem H2 w trzech wierszach i przyciskami pod spodem, ok. 650 px
   wysokosci w srodku strony ("nie chcemy, aby landing byl zbednie
   wydluzany"). Teraz tytul mniejszy, tekst pod nim, przyciski w tym samym
   wierszu po prawej; etykieta "Pierwszy krok" zdjeta z configu. */
.av-band{padding-block:clamp(1.25rem,2.4vw,1.9rem)}
.av-band .av-band__in{flex-wrap:nowrap;gap:1rem 2rem;padding:clamp(1rem,1.8vw,1.35rem) clamp(1.25rem,2.6vw,2rem)}
.av-band__in>div:first-child{max-width:none;min-width:0}
.av-band .av-h2{margin:0 0 .3rem;font-size:clamp(1.25rem,.95rem + 1vw,1.7rem);line-height:1.2;letter-spacing:-.02em}
.av-band__text{font-size:.92rem;line-height:1.5}
.av-band__actions{flex:none;flex-wrap:nowrap}
.av-band .av-btn--lg{min-height:52px;padding:.8rem 1.5rem;font-size:.95rem}
@media (max-width:900px){
  .av-band .av-band__in{flex-wrap:wrap}
  /* Przyciski pod tekstem na cala szerokosc karty: flex:none trzymal je
     w szerokosci tresci i na telefonie wystawaly poza karte. */
  .av-band__actions{flex:1 1 100%;flex-wrap:wrap;gap:.6rem}
  .av-band__actions .av-btn{flex:1 1 auto;min-height:48px;padding:.7rem 1.2rem}
}

/* Dyplomy na mniejszym laptopie (1.8.9): oprawa, podpis i strzalki maja sie
   zmiescic w jednym ekranie. Szerokosc galerii liczona z wysokosci okna:
   oprawa 4:5 ma wysokosc 1,25 x szerokosc skanu, a reszta (podpis, pasek
   ze strzalkami, marginesy galerii i zapas) to ok. 260 px. Przy oknie
   ~660 px (laptop 1366x768 z paskami przegladarki) galeria ma ok. 300 px
   szerokosci, przy 900 px i wyzej wraca do 440 px. */
@media (min-width:901px){
  /* 1.8.10: od wysokosci odejmowany tez dolny pasek CTA (--av-ctabar-h z main.js),
     ktory w 1.8.9 zaslanial strzalki na 1366x768. Wysokosc galerii to do
     szerokosc + 215 px przy najdluzszym podpisie (oprawa 4:5, podpis, pasek
     ze strzalkami), plus 2 x 12 px luzu. */
  .av-awards__gallery{justify-self:center;
  width:min(100%,440px,max(250px,calc(100vh - var(--av-nav-h,80px) - var(--av-ctabar-h,0px) - 240px)));
  width:min(100%,440px,max(250px,calc(100svh - var(--av-nav-h,80px) - var(--av-ctabar-h,0px) - 240px)))}
}

/* =============================================================================
   LIGHTBOX: powiekszenie dyplomow i zdjec sprzedanych (1.8.10, main.js)
   Natywny dialog na caly ekran: granat jak sekcje ciemne, zdjecie w calosci
   (contain), podpis i licznik pod spodem, okragle przyciski jak strzalki
   dyplomow. Na telefonie strzalki schodza na dol, zeby nie zaslanialy zdjecia.
   ============================================================================= */
.av-lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;
padding:4.5rem clamp(1rem,6vw,6rem) 1.5rem;border:0;overflow:hidden;
background:rgba(12,18,30,.94);color:var(--av-on-dark)}
.av-lb[open]{display:grid;place-items:center;animation:av-lb-in .25s ease}
.av-lb::backdrop{background:transparent}
@keyframes av-lb-in{from{opacity:0}to{opacity:1}}
.av-lb__fig{margin:0;display:grid;justify-items:center;gap:.9rem;min-width:0;max-width:100%}
.av-lb__img{display:block;width:auto;height:auto;max-width:min(100%,1200px);max-height:calc(100vh - 11rem);
max-height:calc(100svh - 11rem);object-fit:contain;border-radius:var(--av-radius-sm);
box-shadow:0 30px 80px -30px rgba(0,0,0,.8);transition:opacity .25s}
.av-lb.is-loading .av-lb__img{opacity:.35}
.av-lb__cap{max-width:62ch;margin:0;text-align:center;font-size:.9rem;line-height:1.5;color:var(--av-on-dark-soft)}
.av-lb__count{position:absolute;top:1.6rem;left:50%;transform:translateX(-50%);margin:0;
font-size:.78rem;letter-spacing:.14em;color:var(--av-gold);font-variant-numeric:tabular-nums}
.av-lb__btn{position:absolute;display:grid;place-items:center;width:48px;height:48px;padding:0;cursor:pointer;
border-radius:50%;border:1px solid rgba(var(--av-gold-rgb),.5);background:rgba(24,25,30,.7);color:#fff;
transition:background-color .2s,color .2s,border-color .2s}
.av-lb__btn svg{width:20px;height:20px}
.av-lb__btn:focus-visible{outline:2px solid var(--av-gold);outline-offset:3px}
@media (hover:hover){.av-lb__btn:hover{background:var(--av-gold);border-color:var(--av-gold);color:var(--av-surface-dark)}}
.av-lb__close{top:.9rem;right:.9rem}
.av-lb__prev,.av-lb__next{top:50%;transform:translateY(-50%)}
.av-lb__prev{left:clamp(.5rem,2vw,1.5rem)}
.av-lb__next{right:clamp(.5rem,2vw,1.5rem)}
@media (max-width:640px){
  .av-lb{padding:4rem 1rem 5.5rem}
  .av-lb__img{max-height:calc(100vh - 12.5rem);max-height:calc(100svh - 12.5rem)}
  .av-lb__prev,.av-lb__next{top:auto;bottom:1rem;transform:none}
  .av-lb__prev{left:calc(50% - 60px)}
  .av-lb__next{right:calc(50% - 60px)}
}
@media (prefers-reduced-motion:reduce){.av-lb[open]{animation:none}.av-lb__img{transition:none}}

/* Podpowiedz "powieksz": lupa w rogu dyplomu i zdjecia sprzedanego. Na myszy
   jasnieje po najechaniu, na dotyku stoi stale (nie ma najechania). Ikona to
   dekoracyjne SVG, nie zdjecie, wiec zasada "zdjecia tylko przez img" jej nie dotyczy. */
[data-av-lb]{cursor:zoom-in}
[data-av-lb]:focus-visible{outline:2px solid var(--av-gold);outline-offset:3px}
.av-awards__frame::after,.av-sold__media[data-av-lb]::after{content:"";position:absolute;z-index:2;width:34px;height:34px;
border-radius:50%;border:1px solid rgba(var(--av-gold-rgb),.55);pointer-events:none;
background:rgba(24,25,30,.78) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f59cc6' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M20 20l-4.5-4.5M11 8.5v5M8.5 11h5'/%3E%3C/svg%3E") center/18px no-repeat;
opacity:.85;transition:opacity .2s,transform .2s}
.av-awards__frame::after{right:.6rem;bottom:.6rem}
.av-sold__media[data-av-lb]::after{top:.75rem;right:.75rem}
@media (hover:hover){
  .av-awards__frame::after,.av-sold__media[data-av-lb]::after{opacity:0}
  .av-awards__frame:hover::after,.av-sold__media[data-av-lb]:hover::after,
  .av-awards__frame:focus-visible::after,.av-sold__media[data-av-lb]:focus-visible::after{opacity:1}
}

/* Jakub 1.1.1: zdjecie w Kontakcie w calosci (prosba uzytkownika: "niech nie bedzie
   takie uciete"). Plik to caly kwadrat od klienta (WA0043, 1024x1024), ramka tez
   kwadratowa, wiec CSS nic nie przycina: zapas nad glowa i dlonie w kieszeniach.
   Wczesniej ramka 4:3 brala tylko 60% wysokosci kadru 4:5. */
.av-contact__photo img{aspect-ratio:1/1;object-position:50% 0}

/* Jakub 1.1.5: pod otwartym menu bez odbicia przewijania (iPhone, gladzik).
   Samo przewijanie blokuje main.js ("Strona pod otwartym menu stoi"). */
html.av-menu-open{overscroll-behavior:none}