/* ============================================================
   Metrohouse ROW — arkusz stylów
   Marka: żółć #FFCC00 + czerń. Jeden plik, bez zależności.
   ============================================================ */

/* ---------- 1. Zmienne ---------- */
:root {
  /* marka */
  --zolty: #ffcc00;
  --zolty-ciemny: #e6b800;
  --zolty-jasny: #ffe066;
  --czern: #101010;
  --grafit: #1a1a1c;
  --grafit-jasny: #26262a;

  /* neutralne */
  --bialy: #ffffff;
  --tlo: #ffffff;
  --tlo-alt: #f6f6f4;
  --tlo-ciemne: #101010;
  --tekst: #16161a;
  --tekst-cichy: #5c5c66;
  --tekst-na-ciemnym: #f2f2f0;
  --tekst-cichy-ciemny: #a3a3a8;
  --obramowanie: #e4e4e0;
  --obramowanie-ciemne: #2e2e33;

  /* stan */
  --blad: #d1382c;
  --sukces: #1a7f4b;

  /* typografia */
  --font-naglowek: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-tekst: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* rytm */
  --maks-szer: 1200px;
  --pad-x: clamp(1rem, 4vw, 2.5rem);
  --sekcja-y: clamp(4rem, 9vw, 7.5rem);
  --promien: 0px;
  --promien-duzy: 0px;

  --cien-s: 0 1px 2px rgba(16, 16, 16, .06), 0 2px 8px rgba(16, 16, 16, .04);
  --cien-m: 0 4px 12px rgba(16, 16, 16, .07), 0 12px 32px rgba(16, 16, 16, .06);
  --cien-l: 0 12px 28px rgba(16, 16, 16, .1), 0 32px 64px rgba(16, 16, 16, .1);

  --przejscie: 220ms cubic-bezier(.4, 0, .2, 1);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  font-family: var(--font-tekst);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tekst);
  background: var(--tlo);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--zolty); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 {
  font-family: var(--font-naglowek);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.022em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 5.5vw, 4rem); }
h2 { font-size: clamp(1.875rem, 4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
p { text-wrap: pretty; }

/* ---------- 3. Układ ---------- */
.kontener { width: 100%; max-width: var(--maks-szer); margin-inline: auto; padding-inline: var(--pad-x); }
.sekcja { padding-block: var(--sekcja-y); }
.sekcja--alt { background: var(--tlo-alt); }
.sekcja--ciemna { background: var(--tlo-ciemne); color: var(--tekst-na-ciemnym); }
.sekcja--ciemna h2, .sekcja--ciemna h3 { color: var(--bialy); }
.sekcja--ciemna p { color: var(--tekst-cichy-ciemny); }

.naglowek-sekcji { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.naglowek-sekcji--srodek { margin-inline: auto; text-align: center; }
.nadtytul {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-naglowek); font-size: .8125rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tekst-cichy); margin-bottom: 1rem;
}
.nadtytul::before { content: ''; width: 24px; height: 2px; background: var(--zolty); }
.sekcja--ciemna .nadtytul { color: var(--zolty); }
.sekcja--ciemna .nadtytul::before { background: var(--zolty); }
.naglowek-sekcji p { margin-top: 1.125rem; font-size: 1.125rem; color: var(--tekst-cichy); }

/* ---------- 4. Przyciski ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
  padding: .85rem 1.5rem;
  font-family: var(--font-naglowek); font-size: 1rem; font-weight: 700;
  border-radius: 0; border: 2px solid transparent;
  transition: transform var(--przejscie), background var(--przejscie), box-shadow var(--przejscie), color var(--przejscie);
  text-align: center; white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--glowny { background: var(--zolty); color: var(--czern); box-shadow: 0 4px 14px rgba(255, 204, 0, .35); }
.btn--glowny:hover { background: var(--zolty-jasny); box-shadow: 0 8px 24px rgba(255, 204, 0, .45); }
.btn--ciemny { background: var(--czern); color: var(--bialy); }
.btn--ciemny:hover { background: var(--grafit-jasny); }
.btn--obrys { border-color: currentColor; }
.btn--obrys:hover { background: var(--czern); color: var(--bialy); border-color: var(--czern); }
.sekcja--ciemna .btn--obrys:hover { background: var(--bialy); color: var(--czern); border-color: var(--bialy); }
.btn--pelny { width: 100%; }
.btn--duzy { padding: 1.05rem 2rem; font-size: 1.0625rem; }
.btn[disabled] { opacity: .6; pointer-events: none; }

/* ---------- 5. Nawigacja ---------- */
.nawigacja {
  position: sticky; top: 0; z-index: 60;
  background: rgba(12, 12, 12, .94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: box-shadow var(--przejscie), background var(--przejscie);
}
.nawigacja.przewinieta { background: rgba(12,12,12,.98); box-shadow: 0 4px 20px rgba(0,0,0,.35); }
.nawigacja__wnetrze { display: flex; align-items: center; gap: 1.25rem; height: 74px; }
.nawigacja__logo img { height: 46px; width: auto; }
.nawigacja__menu { display: flex; align-items: center; gap: 1.4rem; margin-left: auto; }
.nawigacja__link {
  font-size: .9375rem; font-weight: 600; color: rgba(242,242,240,.82);
  transition: color var(--przejscie); position: relative; padding-block: .35rem;
}
.nawigacja__link:hover { color: var(--bialy); }
.nawigacja__link::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--zolty); transition: right var(--przejscie);
}
.nawigacja__link:hover::after { right: 0; }
.nawigacja__akcje { display: flex; align-items: center; gap: .875rem; }
.nawigacja__tel {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-naglowek); font-weight: 700; font-size: .9375rem;
}
.nawigacja__tel { color: var(--bialy); }
.nawigacja__tel svg { width: 18px; height: 18px; color: var(--zolty); }
.nawigacja__burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }
.nawigacja__burger span,
.nawigacja__burger span::before,
.nawigacja__burger span::after {
  display: block; width: 22px; height: 2px; background: var(--bialy); border-radius: 2px;
  transition: transform var(--przejscie), opacity var(--przejscie);
}
.nawigacja__burger span::before, .nawigacja__burger span::after { content: ''; position: absolute; }
.nawigacja__burger span::before { transform: translateY(-7px); }
.nawigacja__burger span::after { transform: translateY(7px); }
.nawigacja__burger[aria-expanded="true"] span { background: transparent; }
.nawigacja__burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nawigacja__burger[aria-expanded="true"] span::after { transform: rotate(-45deg); }

@media (max-width: 980px) {
  .nawigacja__burger { display: inline-flex; margin-left: auto; position: relative; }
  .nawigacja__menu {
    /* absolute, nie fixed: backdrop-filter na .nawigacja tworzy własny układ
       odniesienia i fixed liczyłoby się od statycznej pozycji paska w dokumencie */
    position: absolute; top: 100%; left: 0; right: 0; bottom: auto;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--czern); border-bottom: 1px solid rgba(255,255,255,.1);
    padding: 1rem var(--pad-x) 1.75rem; box-shadow: 0 12px 30px rgba(0,0,0,.4);
    max-height: calc(100dvh - 74px); overflow-y: auto; overscroll-behavior: contain;
    display: none;
  }
  .nawigacja__menu.otwarte { display: flex; animation: menu-wjazd .22s ease-out; }
  .nawigacja__link { padding-block: .9rem; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 1.0625rem; }
  .nawigacja__link::after { display: none; }
  .nawigacja__akcje { margin-top: 1.25rem; flex-direction: column; align-items: stretch; }
  .nawigacja__akcje .btn { width: 100%; }
}
@media (max-width: 540px) {
  /* telefon jest w rozwijanym menu – numer musi być widoczny obok ikony */
  .nawigacja__tel {
    justify-content: center; padding-block: .9rem; font-size: 1.0625rem;
    border: 1px solid rgba(255,255,255,.25);
  }
  .nawigacja__tel svg { width: 20px; height: 20px; }
}

/* ---------- 6. Pasek górny + Hero ---------- */
.pasek-gorny {
  background: var(--grafit); color: var(--tekst-cichy-ciemny);
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: .75rem; line-height: 1;
}
.pasek-gorny__wnetrze {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 34px; flex-wrap: wrap;
}
.pasek-gorny__kontakt { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.pasek-gorny a { display: inline-flex; align-items: center; gap: .5rem; transition: color var(--przejscie); }
.pasek-gorny a:hover { color: var(--zolty); }
.pasek-gorny svg { width: 15px; height: 15px; color: var(--zolty); }
.pasek-gorny__spolecznosci { display: flex; align-items: center; gap: .875rem; }
.pasek-gorny__spolecznosci svg { width: 16px; height: 16px; color: currentColor; }
.pasek-gorny__spolecznosci a:hover svg { color: var(--zolty); }
@media (max-width: 640px) {
  .pasek-gorny__wnetrze { justify-content: center; gap: .75rem 1.25rem; padding-block: .5rem; }
  .pasek-gorny__kontakt { gap: 1rem; justify-content: center; }
}

.hero { position: relative; background: var(--czern); }
.hero__tlo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__tlo img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.hero__tlo img { filter: saturate(1.08); }
/* delikatna korekta czytelności — zdjęcie zostaje widoczne */
.hero__tlo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,10,10,.45) 0%, rgba(10,10,10,.15) 45%, rgba(10,10,10,.05) 100%);
}
.hero__wnetrze {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr minmax(360px, 420px);
  gap: clamp(1.5rem, 3vw, 2.75rem); align-items: start;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}
.hero__formularz { position: sticky; top: 90px; }
.hero__formularz .karta-formularza { border-top: 3px solid var(--zolty); }
@media (max-width: 1080px) { .hero__formularz { position: static; } }
.hero__tresc {
  color: var(--tekst-na-ciemnym); text-align: center;
  background: rgba(12,12,12,.78);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.5rem);
}
.hero__tresc .hero__nadtytul,
.hero__tresc .hero__cta,
.hero__tresc .hero__zaufanie { justify-content: center; }
.hero__claims {
  margin-top: .875rem; display: flex; align-items: center; justify-content: center;
  gap: 1rem; flex-wrap: wrap;
}
.hero__claim { font-family: var(--font-naglowek); font-weight: 700; font-size: 1.0625rem; color: var(--bialy); }
.hero__claim--b { color: var(--zolty); }
.hero__claims-sep { color: var(--zolty); font-size: .75rem; }
.hero__wideo { margin-inline: auto; max-width: none; }
.hero__lead { margin-inline: auto; max-width: 38rem; text-align: center; }
.hero__dol {
  margin-top: 1.25rem; display: flex; align-items: center; justify-content: center;
  gap: clamp(1rem, 3vw, 2.5rem); flex-wrap: wrap;
}
.hero__figura {
  font-family: var(--font-naglowek); font-weight: 800; color: var(--zolty);
  font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.2; text-align: left;
  padding-bottom: .5rem; border-bottom: 2px solid rgba(255,204,0,.45);
}
.hero__lista { justify-items: center; }
.hero__lista li { text-align: left; max-width: 30rem; }
.hero__nadtytul {
  display: inline-flex; align-items: center; gap: .625rem;
  font-family: var(--font-naglowek); font-size: .75rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--zolty);
  margin-bottom: 1rem;
}
.hero h1 {
  color: var(--bialy);
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  line-height: 1.12; letter-spacing: -.02em;
}
.hero h1 em { font-style: normal; color: var(--zolty); }
.hero__lead {
  margin-top: .875rem; font-size: .9375rem; line-height: 1.55;
  color: rgba(242,242,240,.85); max-width: 34rem;
}
.hero__wideo {
  margin-top: 1.125rem; position: relative; width: 100%; max-width: 34rem;
  aspect-ratio: 16/9;
  overflow: hidden; background: #000;
  box-shadow: 0 18px 44px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.14);
}
.hero__wideo { display: block; padding: 0; cursor: pointer; }
.hero__wideo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hero__wideo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__wideo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.42));
  transition: background var(--przejscie);
}
/* po uruchomieniu filmu żaden overlay nie przykrywa playera */
.hero__wideo--gra::after { content: none; }
.hero__wideo--gra .hero__play, .hero__wideo--gra .hero__wideo-etykieta { display: none; }
.hero__wideo:hover::after { background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.3)); }
.hero__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  z-index: 2; pointer-events: none; width: 76px; height: 76px; border-radius: 50%;
  background: var(--zolty); display: grid; place-items: center;
  box-shadow: 0 8px 28px rgba(0,0,0,.4);
  transition: transform var(--przejscie);
}
.hero__wideo:hover .hero__play { transform: translate(-50%,-50%) scale(1.09); }
.hero__play svg { width: 32px; height: 32px; color: var(--czern); margin-left: 3px; }
.hero__wideo-etykieta {
  position: absolute; left: 0; right: 0; bottom: 1rem; z-index: 2; pointer-events: none;
  font-family: var(--font-naglowek); font-weight: 700; font-size: .875rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--bialy);
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.hero__lista { margin-top: 1rem; display: grid; gap: .5rem; }
.hero__lista li { display: flex; align-items: flex-start; gap: .625rem; font-size: .9375rem; color: var(--tekst-na-ciemnym); }
.hero__lista svg { flex: none; width: 19px; height: 19px; margin-top: 2px; color: var(--zolty); }
.hero__cta { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: .75rem; }

.hero__zaufanie {
  margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.16);
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
}
.ocena { display: flex; align-items: center; gap: .625rem; }
.ocena__gwiazdki { display: flex; gap: 2px; color: var(--zolty); }
.ocena__gwiazdki svg { width: 16px; height: 16px; }
.ocena__tekst { font-size: .875rem; color: rgba(242,242,240,.8); }
.ocena__tekst strong { color: var(--bialy); font-family: var(--font-naglowek); font-size: 1rem; }
.hero__odznaki { display: flex; align-items: center; gap: 1rem; }
.hero__odznaki img { height: 42px; width: auto; border-radius: 6px; }

@media (max-width: 1080px) {
  .hero__wnetrze { grid-template-columns: 1fr; gap: 2rem; }
  .hero__tresc { max-width: none; }
  .hero__tlo::after { background: linear-gradient(180deg, rgba(10,10,10,.86) 0%, rgba(10,10,10,.74) 45%, rgba(10,10,10,.88) 100%); }
  .hero__wideo { max-width: none; }
}

/* ---------- 6b. Pas portali (przewijany) ---------- */
.pas-portali {
  background: var(--bialy); border-block: 1px solid var(--obramowanie);
  padding-block: 1.5rem; overflow: hidden;
}
.pas-portali__etykieta {
  text-align: center; font-size: .75rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tekst-cichy); margin-bottom: 1.125rem;
}
.pas-portali__maska {
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.pas-portali__tor { display: flex; width: max-content; animation: przesuw 34s linear infinite; }
.pas-portali__maska:hover .pas-portali__tor { animation-play-state: paused; }
.pas-portali__grupa { display: flex; align-items: center; gap: clamp(2.5rem, 6vw, 5rem); padding-right: clamp(2.5rem, 6vw, 5rem); }
.pas-portali img {
  height: 30px; width: auto; opacity: .6; filter: grayscale(1);
  transition: opacity var(--przejscie), filter var(--przejscie);
}
.pas-portali img:hover { opacity: 1; filter: grayscale(0); }
@keyframes przesuw { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .pas-portali__tor { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; }
}

/* ---------- 7. Karta formularza ---------- */
.karta-formularza {
  background: var(--bialy); color: var(--tekst);
  border-radius: var(--promien-duzy); padding: clamp(1.25rem, 2.2vw, 1.75rem);
  box-shadow: var(--cien-l);
}
.karta-formularza__naglowek { margin-bottom: 1rem; }
.karta-formularza__naglowek h2, .karta-formularza__naglowek h3 { font-size: 1.5rem; }
.karta-formularza__naglowek p { margin-top: .5rem; font-size: .9375rem; color: var(--tekst-cichy); }
.karta-formularza__plakietka {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--zolty); color: var(--czern);
  font-family: var(--font-naglowek); font-size: .75rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .375rem .75rem; border-radius: 0; margin-bottom: .875rem;
}

/* ---------- 8. Formularze ---------- */
.pole { margin-bottom: .7rem; }
.pole__etykieta {
  display: block; font-size: .75rem; font-weight: 700; letter-spacing: .02em;
  color: var(--tekst-cichy); margin-bottom: .3rem;
}
.pole__wejscie {
  width: 100%; padding: .7rem .9rem;
  background: var(--tlo-alt); border: 2px solid transparent; border-radius: 0;
  transition: border-color var(--przejscie), background var(--przejscie);
}
.pole__wejscie::placeholder { color: #9a9aa2; }
.pole__wejscie:focus { outline: none; background: var(--bialy); border-color: var(--zolty); }
.pole__wejscie[aria-invalid="true"] { border-color: var(--blad); background: #fdf5f4; }
select.pole__wejscie {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235c5c66' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
  padding-right: 2.5rem;
}
.pole__blad { display: none; margin-top: .35rem; font-size: .8125rem; color: var(--blad); font-weight: 600; }
.pole__wejscie[aria-invalid="true"] ~ .pole__blad { display: block; }

.zgoda { display: flex; gap: .625rem; align-items: flex-start; margin: .75rem 0; }
.zgoda input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--zolty); }
.zgoda label { font-size: .8125rem; line-height: 1.5; color: var(--tekst-cichy); }
.zgoda a { text-decoration: underline; }

/* honeypot — niewidoczny dla ludzi, kuszący dla botów */
.pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

.drobne { margin-top: .625rem; font-size: .6875rem; line-height: 1.5; color: var(--tekst-cichy); }
.komunikat { display: none; margin-top: 1rem; padding: .875rem 1rem; border-radius: 0; font-size: .9375rem; font-weight: 600; }
.komunikat--ok { display: block; background: #eaf6ef; color: var(--sukces); }
.komunikat--blad { display: block; background: #fdf0ef; color: var(--blad); }

.formularz--wyslany .formularz__pola { display: none; }

/* ---------- 9. Pasek zaufania ---------- */
.pasek-liczb { background: var(--zolty); }
.pasek-liczb__siatka {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-block: clamp(2rem, 4vw, 3rem);
}
.liczba { text-align: center; padding-inline: 1rem; border-right: 1px solid rgba(16, 16, 16, .14); }
.liczba:last-child { border-right: 0; }
.liczba__wartosc {
  font-family: var(--font-naglowek); font-weight: 800; color: var(--czern);
  font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1; letter-spacing: -.03em;
}
.liczba__opis { margin-top: .5rem; font-size: .875rem; font-weight: 600; color: rgba(16, 16, 16, .72); }
@media (max-width: 720px) {
  .pasek-liczb__siatka { grid-template-columns: repeat(2, 1fr); gap: 2rem 0; }
  .liczba:nth-child(2n) { border-right: 0; }
}

/* ---------- 10. Karty ---------- */
.siatka { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
.siatka--2 { grid-template-columns: repeat(2, 1fr); }
.siatka--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .siatka--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .siatka--2, .siatka--3 { grid-template-columns: 1fr; } }

.karta {
  background: var(--bialy); border: 1px solid var(--obramowanie); border-radius: var(--promien-duzy);
  padding: clamp(1.5rem, 3vw, 2rem);
  transition: transform var(--przejscie), box-shadow var(--przejscie), border-color var(--przejscie);
}
.karta:hover { transform: translateY(-4px); box-shadow: var(--cien-m); border-color: transparent; }
.karta__ikona {
  width: 52px; height: 52px; border-radius: 0;
  display: grid; place-items: center; background: var(--zolty); margin-bottom: 1.25rem;
}
.karta__ikona svg { width: 26px; height: 26px; color: var(--czern); }
.karta h3 { margin-bottom: .625rem; }
.karta p { color: var(--tekst-cichy); font-size: 1rem; }
.sekcja--ciemna .karta { background: var(--grafit); border-color: var(--obramowanie-ciemne); }
.sekcja--ciemna .karta:hover { border-color: var(--grafit-jasny); }
.sekcja--ciemna .karta p { color: var(--tekst-cichy-ciemny); }

/* ---------- 11. Proces ---------- */
.proces { display: grid; gap: 0; counter-reset: krok; }
.krok {
  display: grid; grid-template-columns: 96px 1fr; gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--obramowanie-ciemne);
}
.krok:last-child { border-bottom: 1px solid var(--obramowanie-ciemne); }
.krok__numer {
  font-family: var(--font-naglowek); font-weight: 800; font-size: clamp(2rem, 4vw, 3rem);
  color: var(--zolty); line-height: 1; letter-spacing: -.04em;
}
.krok h3 { margin-bottom: .625rem; }
@media (max-width: 640px) {
  .krok { grid-template-columns: 1fr; gap: .5rem; }
}

/* ---------- 12. Opinie ---------- */
.opinie__gora {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  margin-bottom: 2.5rem;
}
.google-ocena {
  display: flex; align-items: center; gap: 1rem;
  background: var(--bialy); border: 1px solid var(--obramowanie); border-radius: var(--promien);
  padding: 1rem 1.5rem; box-shadow: var(--cien-s);
}
.google-ocena__liczba { font-family: var(--font-naglowek); font-size: 2.25rem; font-weight: 800; line-height: 1; }
.google-ocena__gwiazdki { display: flex; gap: 2px; color: var(--zolty); }
.google-ocena__gwiazdki svg { width: 16px; height: 16px; }
.google-ocena__opis { font-size: .8125rem; color: var(--tekst-cichy); margin-top: .25rem; }

.opinie__tor {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 380px);
  gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 1rem; scrollbar-width: thin;
  margin-inline: calc(var(--pad-x) * -1); padding-inline: var(--pad-x);
}
.opinie__tor::-webkit-scrollbar { height: 6px; }
.opinie__tor::-webkit-scrollbar-thumb { background: var(--obramowanie); border-radius: 3px; }
.opinia {
  scroll-snap-align: start;
  background: var(--bialy); border: 1px solid var(--obramowanie); border-radius: var(--promien-duzy);
  padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem;
}
.opinia__gwiazdki { display: flex; gap: 2px; color: var(--zolty); }
.opinia__gwiazdki svg { width: 16px; height: 16px; }
.opinia__tresc { font-size: 1rem; color: var(--tekst); flex: 1; }
.opinia__autor { display: flex; align-items: center; gap: .75rem; padding-top: .25rem; }
.opinia__awatar {
  width: 40px; height: 40px; border-radius: 0; display: grid; place-items: center;
  background: var(--czern); color: var(--zolty);
  font-family: var(--font-naglowek); font-weight: 800; font-size: 1rem;
}
.opinia__nazwa { font-weight: 700; font-size: .9375rem; }
.opinia__zrodlo { font-size: .8125rem; color: var(--tekst-cichy); }
.opinie__sterowanie { display: flex; gap: .5rem; }
.opinie__strzalka {
  width: 46px; height: 46px; border-radius: 0; border: 2px solid var(--obramowanie);
  display: grid; place-items: center; transition: all var(--przejscie);
}
.opinie__strzalka:hover { background: var(--czern); border-color: var(--czern); color: var(--bialy); }
.opinie__strzalka svg { width: 18px; height: 18px; }

/* ---------- 13. FAQ ---------- */
.faq { max-width: 52rem; margin-inline: auto; }
.faq__pozycja { border-bottom: 1px solid var(--obramowanie); }
.faq__pytanie {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.5rem 0; text-align: left;
  font-family: var(--font-naglowek); font-size: 1.125rem; font-weight: 700;
  transition: color var(--przejscie);
}
.faq__pytanie:hover { color: var(--zolty-ciemny); }
.faq__znak { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--tlo-alt); display: grid; place-items: center; transition: transform var(--przejscie), background var(--przejscie); }
.faq__znak svg { width: 14px; height: 14px; }
.faq__pytanie[aria-expanded="true"] .faq__znak { transform: rotate(45deg); background: var(--zolty); }
.faq__odpowiedz { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 280ms cubic-bezier(.4, 0, .2, 1); }
.faq__odpowiedz > div { overflow: hidden; }
.faq__pozycja.otwarta .faq__odpowiedz { grid-template-rows: 1fr; }
.faq__odpowiedz p { padding-bottom: 1.5rem; color: var(--tekst-cichy); }

/* ---------- 14. Sekcja CTA ---------- */
.cta-blok {
  background: var(--czern); color: var(--tekst-na-ciemnym);
  border-radius: var(--promien-duzy); overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
}
.cta-blok__tresc { padding: clamp(2rem, 5vw, 3.5rem); display: flex; flex-direction: column; justify-content: center; }
.cta-blok__tresc h2 { color: var(--bialy); }
.cta-blok__tresc p { margin-top: 1rem; color: var(--tekst-cichy-ciemny); }
.cta-blok__lista { margin-top: 1.75rem; display: grid; gap: .75rem; }
.cta-blok__lista li { display: flex; gap: .75rem; align-items: flex-start; }
.cta-blok__lista svg { flex: none; width: 20px; height: 20px; margin-top: 3px; color: var(--zolty); }
.cta-blok__formularz { padding: clamp(1.5rem, 4vw, 3rem); background: var(--grafit); }
.cta-blok__formularz .karta-formularza { box-shadow: none; }
@media (max-width: 900px) { .cta-blok { grid-template-columns: 1fr; } }

/* ---------- 15. Portale ---------- */
.portale { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.5rem, 4vw, 3.5rem); }
.portale img { height: 30px; width: auto; opacity: .55; filter: grayscale(1); transition: opacity var(--przejscie), filter var(--przejscie); }
.portale img:hover { opacity: 1; filter: grayscale(0); }

/* ---------- 16. Zespół ---------- */
.zespol__osoba { text-align: center; }
.zespol__zdjecie {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--promien-duzy);
  background: var(--tlo-alt); margin-bottom: 1.125rem;
}
.zespol__imie { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.125rem; }
.zespol__rola { font-size: .9375rem; color: var(--tekst-cichy); }

/* ---------- 17. Stopka ---------- */
.stopka { background: var(--czern); color: var(--tekst-cichy-ciemny); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.stopka__siatka { display: grid; grid-template-columns: 1.3fr 1fr 1.1fr 1fr; gap: clamp(1.75rem, 4vw, 3rem); }
.stopka__logo img { height: 34px; width: auto; margin-bottom: 1.25rem; }
.stopka h4 { color: var(--bialy); font-size: 1rem; margin-bottom: 1.125rem; }
.stopka a { transition: color var(--przejscie); }
.stopka a:hover { color: var(--zolty); }
.stopka__lista { display: grid; gap: .625rem; font-size: .9375rem; }
.stopka__dol {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.75rem;
  border-top: 1px solid var(--obramowanie-ciemne);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .8125rem;
}
@media (max-width: 1000px) { .stopka__siatka { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .stopka__siatka { grid-template-columns: 1fr; } }

/* ---------- 18. Pływające elementy ---------- */
.whatsapp {
  display: none;
  position: fixed; right: 16px; bottom: 84px; z-index: 55;
  width: 52px; height: 52px; border-radius: 50%;
  background: #25d366; display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .4);
  transition: transform var(--przejscie);
}
.whatsapp:hover { transform: scale(1.08); }
.whatsapp svg { width: 27px; height: 27px; color: #fff; }

.pasek-mobilny {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 56;
  display: none; gap: .625rem; padding: .625rem;
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px);
  border-top: 1px solid var(--obramowanie);
}
.pasek-mobilny .btn { flex: 1; padding: 1rem; font-size: 1.0625rem; }
@media (max-width: 720px) {
  .pasek-mobilny { display: flex; }
  .whatsapp { bottom: 84px; }
  body { padding-bottom: 72px; }
}

/* ---------- 19. Popup ---------- */
.popup {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: 1rem;
  background: rgba(16, 16, 16, .72); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity 280ms ease, visibility 280ms ease;
}
.popup.widoczny { opacity: 1; visibility: visible; }
.popup__okno {
  position: relative; width: min(880px, 100%); max-height: 92dvh; overflow-y: auto;
  background: var(--bialy); border-radius: var(--promien-duzy); box-shadow: var(--cien-l);
  display: grid; grid-template-columns: .9fr 1.1fr;
  transform: translateY(16px) scale(.98); transition: transform 280ms cubic-bezier(.4, 0, .2, 1);
}
.popup.widoczny .popup__okno { transform: translateY(0) scale(1); }
.popup__wizual {
  background: var(--czern); color: var(--bialy);
  padding: clamp(1.75rem, 3vw, 2.5rem); display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
.popup__wizual::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 20% 10%, rgba(255, 204, 0, .22), transparent 65%);
}
.popup__wizual > * { position: relative; }
.popup__wizual h2 { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--bialy); }
.popup__wizual h2 em { font-style: normal; color: var(--zolty); }
.popup__wizual p { margin-top: .875rem; color: var(--tekst-cichy-ciemny); font-size: .9375rem; }
.popup__lista { margin-top: 1.5rem; display: grid; gap: .625rem; font-size: .9375rem; }
.popup__lista li { display: flex; gap: .625rem; align-items: flex-start; }
.popup__lista svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--zolty); }
.popup__formularz { padding: clamp(1.5rem, 3vw, 2.25rem); }
.popup__zamknij {
  position: absolute; top: .75rem; right: .75rem; z-index: 2;
  width: 40px; height: 40px; border-radius: 0; display: grid; place-items: center;
  background: var(--tlo-alt); transition: background var(--przejscie);
}
.popup__zamknij:hover { background: var(--obramowanie); }
.popup__zamknij svg { width: 16px; height: 16px; }
@media (max-width: 780px) {
  .popup__okno { grid-template-columns: 1fr; }
  .popup__wizual { display: none; }
}

/* ---------- 20. Animacje wejścia ---------- */
.js .pojaw { opacity: 0; transform: translateY(22px); transition: opacity 620ms ease, transform 620ms cubic-bezier(.2, .7, .3, 1); }
.js 
/* ---------- 21. Treść tekstowa (SEO) ---------- */
.tresc { max-width: 46rem; }
.tresc p + p { margin-top: 1.125rem; }
.tresc p { color: var(--tekst-cichy); }
.tresc strong { color: var(--tekst); font-weight: 700; }

/* ---------- 22. Drobne ---------- */
.tylko-czytniki {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.cf-turnstile { margin-block: .75rem; min-height: 65px; }

/* ---------- 23. Opinie — wersja wyeksponowana ---------- */
.opinie-mocne { background: var(--czern); color: var(--tekst-na-ciemnym); }
.opinie-mocne h2 { color: var(--bialy); }
.opinie-mocne .opinia {
  background: var(--grafit); border-color: var(--obramowanie-ciemne);
}
.opinie-mocne .opinia__tresc { color: rgba(242,242,240,.92); font-size: 1.0625rem; line-height: 1.6; }
.opinie-mocne .opinia__nazwa { color: var(--bialy); }
.opinie-mocne .opinia__zrodlo { color: var(--tekst-cichy-ciemny); }
.opinie-mocne .opinia__awatar { background: var(--zolty); color: var(--czern); }
.opinie-mocne .google-ocena { background: var(--grafit); border-color: var(--obramowanie-ciemne); }
.opinie-mocne .google-ocena__liczba { color: var(--bialy); }
.opinie-mocne .google-ocena__opis { color: var(--tekst-cichy-ciemny); }
.opinie-mocne .opinie__strzalka { border-color: var(--obramowanie-ciemne); color: var(--bialy); }
.opinie-mocne .opinie__strzalka:hover { background: var(--zolty); border-color: var(--zolty); color: var(--czern); }
.opinie-mocne .nadtytul { color: var(--zolty); }

.opinia__cudzyslow {
  font-family: var(--font-naglowek); font-size: 3rem; line-height: .8;
  color: var(--zolty); opacity: .5; margin-bottom: -.5rem;
}
.opinie-podsumowanie {
  display: flex; align-items: center; justify-content: center; gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap; margin-top: 2.5rem; padding-top: 2rem;
  border-top: 1px solid var(--obramowanie-ciemne);
}
.opinie-podsumowanie__pozycja { text-align: center; }
.opinie-podsumowanie__wartosc {
  font-family: var(--font-naglowek); font-weight: 800; font-size: 2rem; color: var(--zolty); line-height: 1;
}
.opinie-podsumowanie__opis { margin-top: .375rem; font-size: .875rem; color: var(--tekst-cichy-ciemny); }

/* ---------- 24. Pasek CTA (belt) ---------- */
.belt { background: var(--zolty); }
.belt__wnetrze {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; padding-block: 1.75rem;
}
.belt__tekst {
  font-family: var(--font-naglowek); font-weight: 800;
  font-size: clamp(1.125rem, 2.2vw, 1.5rem); color: var(--czern); letter-spacing: -.02em;
}
.belt__akcje { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.belt__tel {
  display: inline-flex; align-items: center; gap: .625rem;
  font-family: var(--font-naglowek); font-weight: 800; font-size: 1.125rem; color: var(--czern);
}
.belt__tel svg { width: 20px; height: 20px; }
.belt__tel span { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.belt .btn--ciemny:hover { background: var(--grafit); }

/* ---------- 25. Pływający pasek CTA (pełna szerokość) ---------- */
.ctabar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 54;
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  padding: 1.05rem 1.5rem;
  background: var(--zolty); color: var(--czern);
  font-family: var(--font-naglowek); font-weight: 800; font-size: 1.0625rem;
  box-shadow: 0 -6px 24px rgba(0,0,0,.22);
  transform: translateY(110%);
  transition: transform 320ms cubic-bezier(.4,0,.2,1), background var(--przejscie);
}
.ctabar.widoczny { transform: translateY(0); }
.ctabar:hover { background: var(--zolty-jasny); }
.ctabar svg { width: 18px; height: 18px; }
.ctabar__tel {
  display: inline-flex; align-items: center; gap: .5rem; margin-left: 1.5rem;
  padding-left: 1.5rem; border-left: 1px solid rgba(16,16,16,.25);
  font-size: 1rem;
}
.ctabar__tel svg { width: 17px; height: 17px; }
/* na telefonach rolę paska przejmują dwa przyciski akcji */
@media (max-width: 720px) { .ctabar { display: none; } }

/* ---------- 26. Korekty mobilne ---------- */
@media (max-width: 720px) {
  .hero__claims { flex-direction: column; gap: .35rem; }
  .hero__claims-sep { display: none; }
  .hero__tresc { padding: 1.25rem 1.1rem; border-radius: var(--promien); }
  .hero__wnetrze { padding-block: 1.25rem; }
  .hero h1 { font-size: clamp(1.5rem, 7vw, 2rem); }
  .hero__dol { flex-direction: column; align-items: stretch; gap: .875rem; }
  .hero__dol .btn { width: 100%; }
  .karta-formularza { padding: 1.25rem 1.1rem; }
  .google-panel { grid-template-columns: 1fr; text-align: center; }
  .google-panel__rozklad { max-width: 15rem; margin-inline: auto; }
  .opinie__tor { grid-auto-columns: minmax(260px, 84vw); }
  .belt__wnetrze { flex-direction: column; align-items: stretch; text-align: center; }
  .belt__akcje { justify-content: center; }

}
/* nic nie może rozpychać strony w poziomie */
html, body { max-width: 100%; overflow-x: clip; }
/* Skrypt banera cookies ustawia na <body> inline overflow: hidden. Tworzy to kontener
   przewijania i unieruchamia position: sticky (pasek nawigacji, formularz w hero),
   przez co menu mobilne otwierało się na górze dokumentu. Wymuszamy wartości bezpieczne
   dla sticky: clip w poziomie, visible w pionie. */
body { overflow-x: clip !important; overflow-y: visible !important; }
img, iframe, video { max-width: 100%; }

/* telefon obok CTA w hero */
.hero__tel {
  display: inline-flex; align-items: center; gap: .75rem;
  padding: .8rem 1.35rem; border-radius: 0;
  border: 2px solid rgba(255,255,255,.28); color: var(--bialy);
  transition: border-color var(--przejscie), background var(--przejscie);
}
.hero__tel:hover { border-color: var(--zolty); background: rgba(255,204,0,.12); }
.hero__tel svg { width: 20px; height: 20px; color: var(--zolty); flex: none; }
.hero__tel span { display: grid; text-align: left; line-height: 1.15; }
.hero__tel em {
  font-style: normal; font-size: .6875rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(242,242,240,.7);
}
.hero__tel strong { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.0625rem; }
@media (max-width: 720px) { .hero__tel { justify-content: center; } }

.ocena__google { display: inline-flex; flex: none; }
.ocena__google svg { width: 22px; height: 22px; }
/* logo Google w panelu opinii */
.google-panel__logo svg { width: 26px; height: 26px; }

/* ============================================================
   27. Sekcje w układzie referencyjnym (tła zdjęciowe, osie, fakty)
   ============================================================ */

/* --- sekcja z tłem zdjęciowym --- */
.sekcja--foto {
  position: relative; color: var(--tekst-na-ciemnym);
  background: var(--czern);
  isolation: isolate;
}
.sekcja--foto > .kontener { position: relative; z-index: 1; }
.sekcja--foto__tlo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.sekcja--foto__tlo img { width: 100%; height: 100%; object-fit: cover; }
.sekcja--foto__tlo::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(10,10,10,var(--przycien, .78));
}
.sekcja--foto h2, .sekcja--foto h3 { color: var(--bialy); }
.sekcja--foto p { color: rgba(242,242,240,.82); }
.sekcja--foto .nadtytul { color: var(--zolty); }

/* --- karta z liczbą + ikoną --- */
.pudelko {
  background: rgba(26,26,28,.82); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--promien-duzy); padding: clamp(1.5rem, 3vw, 2rem);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: border-color var(--przejscie), transform var(--przejscie);
}
.pudelko:hover { border-color: rgba(255,204,0,.5); transform: translateY(-4px); }
.pudelko__gora { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .875rem; }
.pudelko__liczba {
  font-family: var(--font-naglowek); font-weight: 800; letter-spacing: -.03em; line-height: 1;
  font-size: clamp(2rem, 4vw, 2.75rem); color: var(--zolty);
}
.pudelko__liczba--dluga { font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.15; }
.pudelko__ikona {
  flex: none; width: 46px; height: 46px; border-radius: 0;
  display: grid; place-items: center; background: rgba(255,204,0,.14); border: 1px solid rgba(255,204,0,.3);
}
.pudelko__ikona svg { width: 22px; height: 22px; color: var(--zolty); }
.pudelko__opis { font-size: .9375rem; color: rgba(242,242,240,.8); }

/* --- fakty: zdjęcie + siatka z ikonami --- */
.dlaczego {
  display: grid; grid-template-columns: .9fr 1.1fr;
  gap: clamp(1.75rem, 4vw, 3.5rem); align-items: stretch;
}
.dlaczego__foto {
  border-radius: var(--promien-duzy); overflow: hidden;
  box-shadow: var(--cien-l); min-height: 100%;
}
.dlaczego__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; }
.fakty { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem 1.5rem; }
.fakt { display: flex; gap: .875rem; align-items: flex-start; }
.fakt__ikona {
  flex: none; width: 40px; height: 40px; border-radius: 0;
  display: grid; place-items: center; background: var(--zolty);
}
.fakt__ikona svg { width: 20px; height: 20px; color: var(--czern); }
.fakt__tytul { font-family: var(--font-naglowek); font-weight: 700; font-size: 1rem; margin-bottom: .2rem; }
.fakt__opis { font-size: .875rem; color: var(--tekst-cichy); }
.sekcja--foto .fakt__tytul { color: var(--bialy); }
.sekcja--foto .fakt__opis { color: rgba(242,242,240,.75); }
@media (max-width: 900px) { .dlaczego { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .fakty { grid-template-columns: 1fr; } }

/* --- proces jako oś z węzłami --- */
.os { position: relative; display: grid; gap: 0; }
.os::before {
  content: ''; position: absolute; left: 27px; top: 32px; bottom: 32px; width: 2px;
  background: linear-gradient(180deg, var(--zolty), rgba(255,204,0,.18));
}
.os__krok {
  position: relative; display: grid; grid-template-columns: 56px 1fr;
  gap: clamp(1rem, 2.5vw, 1.75rem); padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
}
.os__wezel {
  position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 0;
  display: grid; place-items: center; background: var(--zolty);
  box-shadow: 0 0 0 6px rgba(16,16,16,.9);
}
.os__wezel svg { width: 25px; height: 25px; color: var(--czern); }
.os__numer {
  display: inline-block; font-family: var(--font-naglowek); font-weight: 800;
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--zolty); margin-bottom: .35rem;
}
.os__krok h3 { margin-bottom: .4rem; font-size: 1.25rem; }
@media (max-width: 560px) {
  .os::before { left: 22px; }
  .os__krok { grid-template-columns: 46px 1fr; gap: 1rem; }
  .os__wezel { width: 46px; height: 46px; border-radius: 0; }
  .os__wezel svg { width: 21px; height: 21px; }
}

/* --- karty usług ze zdjęciem i numerem --- */
.karta-foto {
  background: var(--bialy); border: 1px solid var(--obramowanie);
  border-radius: var(--promien-duzy); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--przejscie), box-shadow var(--przejscie);
}
.karta-foto:hover { transform: translateY(-5px); box-shadow: var(--cien-m); }
.karta-foto__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--tlo-alt); }
.karta-foto__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 480ms ease; }
.karta-foto:hover .karta-foto__media img { transform: scale(1.05); }
.karta-foto__numer {
  position: absolute; left: 1rem; bottom: 1rem;
  font-family: var(--font-naglowek); font-weight: 800; font-size: 1.5rem;
  color: var(--czern); background: var(--zolty);
  width: 48px; height: 48px; border-radius: 0; display: grid; place-items: center;
}
.karta-foto__tresc { padding: clamp(1.25rem, 2.5vw, 1.75rem); flex: 1; }
.karta-foto__tresc h3 { margin-bottom: .5rem; }
.karta-foto__tresc p { color: var(--tekst-cichy); font-size: .9375rem; }

/* --- pas paralaksy --- */
.paralaksa { position: relative; height: clamp(240px, 30vw, 340px); overflow: hidden; }
.paralaksa img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.paralaksa::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,.42), rgba(10,10,10,.72));
}
.paralaksa__tresc {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center; text-align: center; padding: var(--pad-x);
}
.paralaksa__tresc p {
  font-family: var(--font-naglowek); font-weight: 800; color: var(--bialy);
  font-size: clamp(1.25rem, 2.6vw, 1.875rem); max-width: 40rem; line-height: 1.25;
  text-shadow: 0 2px 20px rgba(0,0,0,.75);
}
.paralaksa__tresc em { font-style: normal; color: var(--zolty); }

/* --- zespół --- */
.osoby { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(1.25rem, 2.5vw, 1.75rem); }
.osoba { text-align: center; }
.osoba__foto {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  margin-bottom: 1rem; background: var(--tlo-alt);
}
.osoba__imie { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.0625rem; }
.osoba__rola { font-size: .875rem; color: var(--tekst-cichy); }
.sekcja--foto .osoba__rola { color: rgba(242,242,240,.7); }

/* --- panel Google w opiniach --- */
.google-panel {
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  background: var(--grafit); border: 1px solid var(--obramowanie-ciemne);
  border-radius: var(--promien-duzy); padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.5rem, 3vw, 2rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.google-panel__logo {
  display: flex; align-items: center; gap: .625rem;
  font-family: var(--font-naglowek); font-weight: 700; font-size: .9375rem; color: var(--bialy);
}
.google-panel__srodek { display: flex; align-items: center; gap: .875rem; flex-wrap: wrap; }
.google-panel__ocena {
  font-family: var(--font-naglowek); font-weight: 800; font-size: 2.5rem; line-height: 1; color: var(--bialy);
}
.google-panel__liczba { font-size: .875rem; color: var(--tekst-cichy-ciemny); }
.google-panel__liczba strong { color: var(--bialy); }
.google-panel__rozklad { display: grid; gap: .3rem; min-width: 160px; }
.rozklad__wiersz { display: grid; grid-template-columns: 12px 1fr; gap: .5rem; align-items: center; font-size: .75rem; color: var(--tekst-cichy-ciemny); }
.rozklad__pasek { height: 6px; background: rgba(255,255,255,.12); overflow: hidden; }
.rozklad__pasek i { display: block; height: 100%; background: var(--zolty); }
@media (max-width: 980px) { .google-panel { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
  .google-panel { grid-template-columns: minmax(0, 1fr); text-align: left; }
  .google-panel .btn { width: 100%; }
  .google-panel__rozklad { width: 100%; margin-inline: 0; }
}

/* --- opinie: nagłówek karty --- */
.opinia__naglowek { display: flex; align-items: center; gap: .75rem; }
.opinia__naglowek .opinia__awatar { color: #fff; }
.opinia__google { margin-left: auto; flex: none; }
.opinia__google svg { width: 20px; height: 20px; }

/* FAQ na ciemnym tle */
.faq--ciemne .faq__pozycja { border-bottom-color: rgba(255,255,255,.14); }
.faq--ciemne .faq__pytanie { color: var(--bialy); }
.faq--ciemne .faq__pytanie:hover { color: var(--zolty); }
.faq--ciemne .faq__znak { background: rgba(255,255,255,.1); color: var(--bialy); }
.faq--ciemne .faq__pytanie[aria-expanded="true"] .faq__znak { background: var(--zolty); color: var(--czern); }
.faq--ciemne .faq__odpowiedz p { color: rgba(242,242,240,.78); }

/* doradca przy formularzu */
.doradca {
  margin-top: 2rem; display: flex; align-items: center; gap: 1rem;
  padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.14);
}
.doradca__foto { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; flex: none; }
.doradca__nazwa { color: var(--bialy); font-family: var(--font-naglowek); font-weight: 700; margin: 0; }
.doradca__rola { margin: .15rem 0 .5rem; font-size: .875rem; }
.doradca__tel {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-naglowek); font-weight: 800; color: var(--zolty); font-size: 1.0625rem;
}
.doradca__tel svg { width: 18px; height: 18px; }

/* --- fakty jako karty (sekcja „Dlaczego my") --- */
.fakty--karty { gap: 1rem; }
.fakty--karty .fakt {
  background: var(--bialy); border: 1px solid var(--obramowanie);
  padding: 1.25rem;
  transition: transform var(--przejscie), box-shadow var(--przejscie), border-color var(--przejscie);
}
.fakty--karty .fakt:hover { transform: translateY(-3px); box-shadow: var(--cien-m); border-color: transparent; }

@media (max-width: 900px) { .dlaczego__foto { aspect-ratio: 4/5; min-height: 0; } .dlaczego__foto img { object-position: 50% 12%; } }

/* --- proces: węższa kolumna, kroki jako karty --- */
.os--waska { max-width: 54rem; }
.os--waska .os__krok > div:last-child {
  background: rgba(26,26,28,.86); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--promien); padding: 1.25rem 1.5rem;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.os--waska .os__krok { align-items: start; padding-block: .6rem; }
.os--waska::before { top: 40px; bottom: 40px; }
.os--waska .os__krok p { color: rgba(242,242,240,.82); font-size: .9375rem; }

/* ---------- 28. Sekcja „O nas" ---------- */
.o-nas { position: relative; overflow: clip; }
.o-nas::before {
  content: ''; position: absolute; right: -120px; top: -80px; width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(255,204,0,.16), transparent 68%);
  pointer-events: none;
}
.o-nas__uklad {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.o-nas__staty {
  margin-top: 2rem; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem; padding-block: 1.5rem;
  border-top: 1px solid var(--obramowanie); border-bottom: 1px solid var(--obramowanie);
}
.o-nas__stat strong {
  display: block; font-family: var(--font-naglowek); font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1; color: var(--czern);
}
.o-nas__stat strong::after {
  content: ''; display: block; width: 26px; height: 3px;
  background: var(--zolty); border-radius: 2px; margin-top: .5rem;
}
.o-nas__stat span { display: block; margin-top: .5rem; font-size: .875rem; color: var(--tekst-cichy); }
.o-nas__akcje { margin-top: 1.75rem; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.o-nas__tel {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-naglowek); font-weight: 800; font-size: 1.0625rem;
}
.o-nas__tel svg { width: 19px; height: 19px; color: var(--zolty-ciemny); }

.o-nas__media { position: relative; position: sticky; top: 110px; }
.o-nas__media::before {
  content: ''; position: absolute; right: -28px; top: -28px; width: 62%; height: 62%;
  background-image:
    linear-gradient(var(--zolty) 1px, transparent 1px),
    linear-gradient(90deg, var(--zolty) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .26; z-index: 0;
}
.o-nas__media::after {
  content: ''; position: absolute; left: -26px; bottom: -26px; width: 44%; height: 46%;
  background: var(--zolty); opacity: .14; z-index: 0;
}

.o-nas__ramka {
  position: relative; z-index: 1; overflow: hidden;
  aspect-ratio: 16/10; box-shadow: var(--cien-l);
}
.o-nas__ramka img {
  width: 100%; height: 124%; position: absolute; top: -12%; left: 0;
  object-fit: cover; will-change: transform;
  transform: translate3d(0, var(--przesun, 0px), 0);
}
@media (prefers-reduced-motion: reduce) {
  .o-nas__ramka img { transform: none !important; height: 100%; top: 0; }
}
.o-nas__plakietka {
  position: absolute; left: -18px; bottom: 28px;
  display: flex; align-items: center; gap: .75rem;
  background: var(--bialy); border: 1px solid var(--obramowanie);
  border-radius: var(--promien); padding: .8rem 1.1rem; box-shadow: var(--cien-m);
}
.o-nas__plakietka p { margin: 0; font-size: .8125rem; color: var(--tekst-cichy); }
.o-nas__plakietka strong { color: var(--tekst); font-family: var(--font-naglowek); }
.o-nas__plakietka-gwiazdki { display: flex; gap: 1px; color: var(--zolty); }
.o-nas__plakietka-gwiazdki svg { width: 13px; height: 13px; }
.o-nas__odznaki {
  position: absolute; right: -14px; top: -14px; display: flex; gap: .5rem;
  background: var(--bialy); border-radius: var(--promien); padding: .5rem;
  box-shadow: var(--cien-m);
}
.o-nas__odznaki img { width: 68px; height: 68px; }
@media (max-width: 900px) {
  .o-nas__uklad { grid-template-columns: 1fr; }
  .o-nas__plakietka { left: 12px; bottom: 12px; }
  .o-nas__odznaki { right: 10px; top: 10px; }
}
@media (max-width: 560px) {
  .o-nas__staty { grid-template-columns: 1fr; gap: 1.25rem; }
  .o-nas__odznaki img { width: 42px; height: 42px; }
}

/* ============================================================
   29. Usługi — zakładki + kolaż zdjęć
   ============================================================ */
.uslugi { background: var(--czern); color: var(--tekst-na-ciemnym); overflow: clip; }
.uslugi h2, .uslugi h3 { color: var(--bialy); }
.uslugi .nadtytul { color: var(--zolty); }
.uslugi h2 em { font-style: italic; color: var(--zolty); }

.uslugi__gora {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(2rem, 4vw, 3rem);
}
.link-strzalka {
  display: inline-flex; align-items: center; gap: .75rem;
  font-family: var(--font-naglowek); font-size: .8125rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--bialy);
  padding-bottom: .5rem; border-bottom: 1px solid rgba(255,255,255,.28);
  transition: color var(--przejscie), border-color var(--przejscie);
}
.link-strzalka:hover { color: var(--zolty); border-color: var(--zolty); }
.link-strzalka svg { width: 18px; height: 18px; transition: transform var(--przejscie); }
.link-strzalka:hover svg { transform: translateX(4px); }

.taby {
  display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; align-items: center;
  padding-bottom: 1.25rem; border-bottom: 1px solid rgba(255,255,255,.14);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.tab {
  font-family: var(--font-naglowek); font-size: .75rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(242,242,240,.62); padding: .7rem 1rem;
  border: 1px solid transparent; border-radius: 0;
  transition: color var(--przejscie), border-color var(--przejscie), background var(--przejscie);
}
.tab:hover { color: var(--bialy); }
.tab.aktywny { color: var(--zolty); border-color: var(--zolty); background: rgba(255,204,0,.08); }

.tab-panel { display: none; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.tab-panel.aktywny { display: grid; }

/* kolaż: trzy zdjęcia + ramka + akcent, jak w referencji */
.kolaz { position: relative; aspect-ratio: 1/1; }
.kolaz__foto {
  position: absolute; object-fit: cover; border-radius: 0;
  box-shadow: 0 18px 44px rgba(0,0,0,.5);
}
.kolaz__foto--1 { left: 4%;  top: 2%;  width: 62%; height: 56%; z-index: 1; }
.kolaz__foto--2 { right: 0;  top: 30%; width: 60%; height: 46%; z-index: 3; }
.kolaz__foto--3 { left: 0;   bottom: 0; width: 46%; height: 38%; z-index: 2; }
.kolaz__ramka {
  position: absolute; left: 0; top: 12%; width: 74%; height: 74%;
  border: 1px solid rgba(255,204,0,.45);
}
.kolaz__akcent {
  position: absolute; right: 12%; top: 2%; width: 62px; height: 62px;
  background: var(--zolty); z-index: 4;
}

.tab-numer {
  display: block; font-family: var(--font-naglowek); font-size: .875rem;
  font-weight: 700; letter-spacing: .2em; color: rgba(242,242,240,.55);
  padding-bottom: 1rem; margin-bottom: 1.25rem; border-bottom: 1px solid rgba(255,255,255,.14);
}
.tab-tresc h3 { font-size: clamp(1.6rem, 3vw, 2.25rem); margin-bottom: .875rem; }
.tab-lead { font-size: 1.0625rem; color: rgba(242,242,240,.85); margin-bottom: 1.5rem; }
.lista-ptaszki { display: grid; }
.lista-ptaszki li {
  display: flex; align-items: flex-start; gap: .875rem;
  padding-block: .875rem; border-bottom: 1px solid rgba(255,255,255,.1);
  font-size: .9375rem; color: rgba(242,242,240,.9);
}
.lista-ptaszki li:last-child { border-bottom: 0; }
.lista-ptaszki svg { flex: none; width: 19px; height: 19px; margin-top: 2px; color: var(--zolty); }

@media (max-width: 900px) {
  .tab-panel.aktywny { grid-template-columns: minmax(0, 1fr); }
  .kolaz { width: 100%; aspect-ratio: 4/3; max-width: 34rem; margin-inline: auto; }
  .taby { gap: .5rem; }
  .tab { font-size: .6875rem; padding: .6rem .8rem; }
}

/* elementy celowo okrągłe mimo ostrej geometrii reszty */
.whatsapp, .opinia__awatar, .doradca__foto, .o-nas__plakietka-gwiazdki,
.hero__play, .osoba__foto--kolo { border-radius: 50% !important; }
.hero__play { border-radius: 50% !important; }

/* ============================================================
   30. Sekcja kontaktu (dół strony)
   ============================================================ */
.kontakt { position: relative; padding-block: var(--sekcja-y); overflow: clip; background: var(--tlo-alt); }
.kontakt__tlo { position: absolute; inset: 0; z-index: 0; }
.kontakt__tlo img { width: 100%; height: 100%; object-fit: cover; opacity: .16; }
.kontakt__tlo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(246,246,244,.86), rgba(246,246,244,.96));
}
.kontakt__wnetrze {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.kontakt h2 { font-size: clamp(2rem, 4vw, 3rem); }
.kontakt__lead { margin-top: 1.125rem; font-size: 1.0625rem; color: var(--tekst-cichy); max-width: 32rem; }
.kontakt__albo {
  margin-top: 2.25rem; margin-bottom: 1.25rem;
  font-family: var(--font-naglowek); font-size: .8125rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--zolty-ciemny);
}

.doradca-duzy { display: grid; grid-template-columns: 250px 1fr; gap: clamp(1.25rem, 3vw, 2rem); align-items: center; }
.doradca-duzy__media { position: relative; }
.doradca-duzy__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center 22%; display: block; }
.doradca-duzy__media::before {
  content: ''; position: absolute; left: -12px; top: -12px; width: 64px; height: 64px;
  border-left: 2px solid var(--zolty); border-top: 2px solid var(--zolty);
}
.doradca-duzy__media::after {
  content: ''; position: absolute; right: -12px; bottom: -12px; width: 64px; height: 64px;
  border-right: 2px solid var(--zolty); border-bottom: 2px solid var(--zolty);
}
.doradca-duzy__nazwa { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.375rem; }
.doradca-duzy__rola {
  margin-top: .2rem; margin-bottom: 1rem; font-size: .8125rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tekst-cichy);
}
.doradca-duzy__link {
  display: flex; align-items: center; gap: .625rem; padding-block: .45rem;
  font-family: var(--font-naglowek); font-weight: 700; font-size: 1.0625rem;
  transition: color var(--przejscie);
}
.doradca-duzy__link:hover { color: var(--zolty-ciemny); }
.doradca-duzy__link svg { width: 18px; height: 18px; color: var(--zolty-ciemny); flex: none; }
.doradca-duzy__adres { margin-top: .875rem; font-size: .875rem; color: var(--tekst-cichy); line-height: 1.6; }

.kontakt__prawa .karta-formularza { box-shadow: var(--cien-l); border-top: 3px solid var(--zolty); }

@media (max-width: 900px) {
  .kontakt__wnetrze { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .doradca-duzy { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .doradca-duzy__media { max-width: 17rem; width: 100%; }
  .doradca-duzy__link { justify-content: center; }
  .kontakt__lewa { text-align: center; }
  .kontakt__lewa .nadtytul { justify-content: center; }
  .kontakt__lead { margin-inline: auto; }
}

/* ---------- 31. Blok treściowy pod stopką (SEO) ---------- */
.seo { background: var(--tlo-alt); padding-block: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--obramowanie); }
.seo__naglowek { margin-bottom: 2rem; }
.seo__naglowek h2 { font-size: clamp(1.375rem, 2.4vw, 1.75rem); }
.seo__kolumny { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.seo__kolumny h3 { font-size: 1rem; margin-bottom: .625rem; }
.seo__kolumny p { font-size: .875rem; line-height: 1.7; color: var(--tekst-cichy); }
.seo__kolumny p + p { margin-top: .75rem; }
.seo__kolumny strong { color: var(--tekst); font-weight: 600; }
.seo__stopka {
  margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--obramowanie);
  font-size: .8125rem; color: var(--tekst-cichy);
}
@media (max-width: 860px) { .seo__kolumny { grid-template-columns: 1fr; } }

/* ---------- 32. Sekcja CTA na tle zdjęcia ---------- */
.cta-foto { position: relative; padding-block: clamp(3.5rem, 8vw, 6rem); color: var(--tekst-na-ciemnym); background: var(--czern); }
.cta-foto__tlo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.cta-foto__tlo img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.cta-foto__tlo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,10,10,.9) 0%, rgba(10,10,10,.76) 45%, rgba(10,10,10,.5) 100%);
}
.cta-foto__wnetrze { position: relative; z-index: 1; max-width: 46rem; }
.cta-foto h2 { color: var(--bialy); font-size: clamp(1.75rem, 3.6vw, 2.75rem); }
.cta-foto p { margin-top: 1rem; color: rgba(242,242,240,.85); font-size: 1.0625rem; }
.cta-foto .nadtytul { color: var(--zolty); }
.cta-foto__akcje { margin-top: 2rem; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.cta-foto__tel {
  display: inline-flex; align-items: center; gap: .75rem;
  padding: .85rem 1.4rem; border: 2px solid rgba(255,255,255,.3); color: var(--bialy);
  transition: border-color var(--przejscie), background var(--przejscie);
}
.cta-foto__tel:hover { border-color: var(--zolty); background: rgba(255,204,0,.12); }
.cta-foto__tel svg { width: 20px; height: 20px; color: var(--zolty); flex: none; }
.cta-foto__tel span { display: grid; text-align: left; line-height: 1.15; }
.cta-foto__tel em {
  font-style: normal; font-size: .6875rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(242,242,240,.7);
}
.cta-foto__tel strong { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.0625rem; }
@media (max-width: 720px) {
  .cta-foto__tlo::after { background: linear-gradient(180deg, rgba(10,10,10,.86), rgba(10,10,10,.72)); }
  .cta-foto__akcje { flex-direction: column; align-items: stretch; }
  .cta-foto__tel { justify-content: center; }
}

/* parallax na sekcjach ze zdjęciem w tle */
.cta-foto__tlo img, .paralaksa img { will-change: transform; }
.cta-foto__tlo, .paralaksa { --przesun: 0px; }
.cta-foto__tlo img { height: 128%; top: -14%; position: absolute; transform: translate3d(0, var(--przesun), 0); }
.paralaksa img { height: 130%; top: -15%; position: absolute; transform: translate3d(0, var(--przesun), 0); }
@media (prefers-reduced-motion: reduce) {
  .cta-foto__tlo img, .paralaksa img { transform: none !important; height: 100%; top: 0; }
}

/* ============================================================
   33. Proces — karty nachodzące przy przewijaniu
   ============================================================ */
.proces-stos { background: var(--tlo-alt); }
.proces-stos__uklad {
  display: grid; grid-template-columns: .8fr 1.2fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.proces-stos__lewa { position: sticky; top: 110px; }
.proces-stos__lewa h2 { margin-top: .25rem; }
.proces-stos__lewa p { margin-top: 1.125rem; color: var(--tekst-cichy); }

.proces-stos__karty { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.krok-karta { position: sticky; top: calc(110px + var(--i) * 18px); }
.krok-karta__wnetrze {
  display: grid; grid-template-columns: 260px 1fr; gap: clamp(1.25rem, 2.5vw, 2rem);
  background: var(--bialy); border: 1px solid var(--obramowanie);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  box-shadow: 0 -2px 0 var(--zolty), var(--cien-m);
  align-items: center;
}
.krok-karta__media { overflow: hidden; }
.krok-karta__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.krok-karta__numer {
  display: block; font-family: var(--font-naglowek); font-weight: 800;
  font-size: 2rem; line-height: 1; color: var(--zolty); margin-bottom: .5rem;
}
.krok-karta__tresc h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.krok-karta__tresc p { font-size: .9375rem; color: var(--tekst-cichy); }
.krok-karta__tresc strong { color: var(--tekst); }

@media (max-width: 980px) {
  .proces-stos__uklad { grid-template-columns: 1fr; }
  .proces-stos__lewa { position: static; }
}
@media (max-width: 640px) {
  .krok-karta { position: static; }
  .krok-karta__wnetrze { grid-template-columns: 1fr; }
}

@media (max-width: 900px) { .o-nas__media { position: relative; top: auto; } }

/* ============================================================
   34. Własna lista rozwijana (zastępuje systemowy select)
   ============================================================ */
.wybor { position: relative; }
.wybor select { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.wybor__przycisk {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .7rem .9rem; text-align: left;
  background: var(--tlo-alt); border: 2px solid transparent;
  transition: border-color var(--przejscie), background var(--przejscie);
}
.wybor__przycisk:hover { background: #efefec; }
.wybor.otwarty .wybor__przycisk { background: var(--bialy); border-color: var(--zolty); }
.wybor__przycisk svg { width: 14px; height: 14px; flex: none; color: var(--tekst-cichy); transition: transform var(--przejscie); }
.wybor.otwarty .wybor__przycisk svg { transform: rotate(180deg); }
.wybor__lista {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  background: var(--bialy); border: 1px solid var(--obramowanie);
  box-shadow: var(--cien-l); padding: .25rem; display: none;
  max-height: 15rem; overflow-y: auto;
}
.wybor.otwarty .wybor__lista { display: block; }
.wybor__opcja {
  width: 100%; text-align: left; padding: .65rem .75rem; font-size: .9375rem;
  display: flex; align-items: center; gap: .5rem;
  transition: background var(--przejscie), color var(--przejscie);
}
.wybor__opcja:hover, .wybor__opcja:focus-visible { background: var(--tlo-alt); }
.wybor__opcja[aria-selected="true"] { background: var(--zolty); font-weight: 700; }
.wybor__opcja::before {
  content: ''; width: 8px; height: 8px; flex: none;
  background: var(--zolty); opacity: 0;
}
.wybor__opcja[aria-selected="true"]::before { background: var(--czern); opacity: 1; }

/* dymek przy ikonie WhatsApp — widoczny też na telefonie (brak hovera) */
.whatsapp { position: fixed; }
.whatsapp__dymek {
  position: absolute; right: calc(100% + 12px); top: 50%;
  white-space: nowrap; background: var(--bialy); color: var(--tekst);
  font-family: var(--font-naglowek); font-weight: 700; font-size: .8125rem;
  padding: .6rem .9rem; box-shadow: var(--cien-m);
  pointer-events: none;
  opacity: 0; transform: translateY(-50%) translateX(8px);
  animation: dymek-wjazd .5s ease-out 2.2s forwards;
  transition: opacity var(--przejscie), transform var(--przejscie);
}
@keyframes dymek-wjazd {
  to { opacity: 1; transform: translateY(-50%) translateX(0); }
}
.whatsapp__dymek::after {
  content: ''; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  border: 7px solid transparent; border-left-color: var(--bialy);
}
.whatsapp:hover .whatsapp__dymek, .whatsapp:focus-visible .whatsapp__dymek {
  opacity: 1; transform: translateY(-50%) translateX(-2px);
}
@media (max-width: 720px) {
  .whatsapp { display: grid; }
  .whatsapp__dymek { font-size: .625rem; padding: .3rem .5rem; right: calc(100% + 7px); letter-spacing: -.01em; }
}
@media (max-width: 380px) { .whatsapp__dymek { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .whatsapp__dymek { animation: none; opacity: 1; transform: translateY(-50%); }
}

/* ============================================================
   35. Mikrointerakcje pod konwersję
   ============================================================ */
@keyframes puls-cta {
  0%, 100% { box-shadow: 0 4px 14px rgba(255, 204, 0, .35); }
  50%      { box-shadow: 0 6px 22px rgba(255, 204, 0, .62), 0 0 0 6px rgba(255, 204, 0, .10); }
}
.btn--glowny.btn--duzy,
.pasek-mobilny .btn--glowny,
.ctabar { animation: puls-cta 2.8s ease-in-out infinite; }
.btn--glowny.btn--duzy:hover,
.pasek-mobilny .btn--glowny:hover,
.ctabar:hover { animation: none; }

/* pole formularza po kliknięciu w CTA */
@keyframes podswietl-pole {
  0%   { box-shadow: 0 0 0 0 rgba(255, 204, 0, .85); }
  100% { box-shadow: 0 0 0 14px rgba(255, 204, 0, 0); }
}
.pole__wejscie.podswietlone {
  animation: podswietl-pole 1.2s ease-out 2;
  border-color: var(--zolty);
  background: var(--bialy);
}

@media (prefers-reduced-motion: reduce) {
  .btn--glowny.btn--duzy, .pasek-mobilny .btn--glowny, .ctabar,
  .pole__wejscie.podswietlone { animation: none !important; }
}

/* zdjęcie w hero stron miejskich (zamiast filmu o Rybniku) */
.hero__foto {
  margin: 1.125rem auto 0; width: 100%; max-width: 44rem;
  aspect-ratio: 16/9; overflow: hidden;
  box-shadow: 0 18px 44px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.14);
}
.hero__foto img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   36. Strony miejskie — obszar obsługi i rynek lokalny
   ============================================================ */
.obszar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.obszar__pozycja {
  display: grid; gap: .35rem; padding: 1.25rem;
  background: var(--bialy); border: 1px solid var(--obramowanie);
  border-left: 3px solid var(--zolty);
  transition: transform var(--przejscie), box-shadow var(--przejscie);
}
.obszar__pozycja:hover { transform: translateY(-3px); box-shadow: var(--cien-m); }
.obszar__nazwa { font-family: var(--font-naglowek); font-weight: 800; font-size: 1.0625rem; }
.obszar__opis { font-size: .875rem; color: var(--tekst-cichy); line-height: 1.55; }
@media (max-width: 900px) { .obszar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .obszar { grid-template-columns: 1fr; } }

.rynek { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.rynek__foto { position: sticky; top: 110px; overflow: hidden; box-shadow: var(--cien-l); }
.rynek__foto img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.rynek__tresc p { margin-bottom: 1rem; }
@media (max-width: 900px) {
  .rynek { grid-template-columns: 1fr; }
  .rynek__foto { position: relative; top: auto; order: -1; }
}

@keyframes menu-wjazd {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}