/*
Theme Name: Wyprane3City
Description: Motyw Pixel Studio dla wyprane3city.pl - przeniesiony 1:1 z prototypu.
Author: Pixel Studio
Version: 1.39
*/

/* panel menu mobilnego (odtworzony - w prototypie renderowal go React) */
.w3cMobilePanel {
  position: fixed; inset: 0; z-index: 9999;
  background: #060d18; padding: 96px 24px 32px;
  overflow-y: auto;
}
.w3cMobilePanel[hidden] { display: none; }
.w3cMobilePanel nav { display: flex; flex-direction: column; gap: 4px; }
.w3cMobilePanel a {
  display: block; padding: 16px 8px; color: #eaf2fb;
  text-decoration: none; font-size: 20px; font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.w3cMobilePanel a:active { color: #2f8fe6; }

.w3cMobileClose {
  position: absolute; top: 24px; right: 20px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
  color: #eaf2fb; font-size: 28px; line-height: 1; cursor: pointer;
}

/* --- babelki w hero (nakladka dekoracyjna) --- */
.pageHero { position: relative; }
.w3cBubbles {
  position: absolute; inset: 0; z-index: 2;
  overflow: hidden; pointer-events: none;
  border-radius: inherit;
}
.w3cBubbles span {
  position: absolute; bottom: -8%;
  display: block;
  animation-name: w3cRise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}
.w3cBubbles i {
  display: block; width: 100%; height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.85), rgba(255,255,255,.14) 42%, rgba(255,255,255,0) 62%),
    radial-gradient(circle at 65% 72%, rgba(120,200,255,.32), rgba(120,200,255,0) 60%);
  box-shadow: inset 0 0 6px rgba(255,255,255,.35), 0 0 10px rgba(130,200,255,.18);
  border: 1px solid rgba(255,255,255,.22);
  animation-name: w3cSway;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes w3cRise {
  0%   { transform: translate3d(0, 0, 0) scale(.85); }
  12%  { transform: translate3d(0, -12vh, 0) scale(1); }
  100% { transform: translate3d(0, -125vh, 0) scale(1.08); }
}
@keyframes w3cSway {
  from { transform: translate3d(-9px, 0, 0); }
  to   { transform: translate3d(9px, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { .w3cBubbles { display: none; } }

/* --- naglowek: mocniejszy glass + przechodzacy polysk --- */
/* polysk animowany przez background-position (transform pseudo-elementu rozpycha layout na mobile) */
.siteHeader {
  background:
    linear-gradient(105deg,
      rgba(255,255,255,0) 38%,
      rgba(255,255,255,.13) 47%,
      rgba(180,225,255,.20) 50%,
      rgba(255,255,255,.13) 53%,
      rgba(255,255,255,0) 62%),
    linear-gradient(rgba(6,21,43,.46), rgba(6,21,43,.46));
  background-size: 320% 100%, auto;
  background-position: -80% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-backdrop-filter: blur(26px) saturate(155%);
  backdrop-filter: blur(26px) saturate(155%);
  border: 1px solid rgba(255,255,255,.26);
  box-shadow: 0 10px 34px rgba(2,8,20,.34), inset 0 1px 0 rgba(255,255,255,.16);
  animation: w3cHeaderShine 11s ease-in-out infinite;
}
@keyframes w3cHeaderShine {
  0%, 74%  { background-position: -80% 0, 0 0; }
  100%     { background-position: 180% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) { .siteHeader { animation: none; } }

/* --- preloader: pixelowy piesek goniacy odkurzacz (tylko strona glowna, raz na sesje) --- */
#w3cPreloader {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 40%, #0a2038 0%, #061428 55%, #04101f 100%);
  transition: opacity .55s ease, visibility .55s ease;
}
#w3cPreloader.isGone { opacity: 0; visibility: hidden; }
.w3cPreInner { text-align: center; }
.w3cPreCanvas { image-rendering: pixelated; image-rendering: crisp-edges; display: block; margin: 0 auto; }
.w3cPreBar {
  width: min(420px, 68vw); height: 6px; margin: 22px auto 0;
  background: rgba(255,255,255,.12); border-radius: 99px; overflow: hidden;
}
.w3cPreBar i {
  display: block; height: 100%; width: 40%; border-radius: 99px;
  background: linear-gradient(90deg, #1456a0, #2f8fe6, #8fd3ff);
  animation: w3cPreRun 1.15s ease-in-out infinite;
}
@keyframes w3cPreRun {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
.w3cPreText {
  margin: 16px 0 0; letter-spacing: .28em; font-size: 13px; font-weight: 800;
  color: rgba(226,240,255,.72);
}
.w3cPreText b { color: #f08a3c; }
@media (max-width: 700px) { .w3cPreCanvas { width: 92vw !important; height: auto !important; } }

/* ======================================================================
   HERO - typografia i mobilny pierwszy ekran (Pixel Studio, 2026-08-04)
   ====================================================================== */

/* szersze swiatlo miedzy literami w naglowku hero - desktop i mobile */
.pageHero h1,
.pageHero.compact h1 { letter-spacing: .035em; }
.pageHero .eyebrow { letter-spacing: .22em; }

@media (max-width: 900px) {
  .pageHero h1,
  .pageHero.compact h1 { letter-spacing: .03em; }
}

/* --- mobile: hero siega prawie do dolu, pierwszy ekran zamyka marquee --- */
@media (max-width: 760px) {
  .pageHero,
  .pageHero.compact {
    min-height: calc(100svh - 244px);
    padding-top: 76px;
  }
  .pageHeroInner { min-height: 0; }
  .pageHeroCopy { padding: 84px 0 26px; }

  /* mniejsze teksty */
  .pageHero h1,
  .pageHero.compact h1 {
    font-size: clamp(36px, 12.2vw, 54px);
    line-height: .94;
  }
  .pageHeroLead {
    margin-top: 16px;
    font-size: 13.5px;
    line-height: 1.62;
  }
  .pageHero .eyebrow { font-size: 10.5px; }

  /* pasek zaufania - kompaktowo, zeby zmiescil sie nad marquee */
  .trustStrip { padding-top: 14px; padding-bottom: 14px; }
  .trustStrip strong, .trustStrip b { font-size: 14px; }
  .trustStrip small, .trustStrip span { font-size: 11px; }

  /* marquee zamyka pierwszy ekran */
  .marquee { height: 62px; margin-top: 12px; }
  .marquee span { font-size: 16px; letter-spacing: .09em; }
}

/* --- responsywnosc: nic nie wychodzi poza ekran --- */
html, body { max-width: 100%; overflow-x: clip; }   /* clip, nie hidden - sticky przezywa */
img, video, svg, canvas { max-width: 100%; height: auto; }
.pageHero .heroArtwork { max-width: none; }          /* grafika hero celowo wychodzi poza kadr */

@media (max-width: 560px) {
  .pageHero h1,
  .pageHero.compact h1 { font-size: clamp(32px, 11.6vw, 46px); }
  .pageHeroCopy { padding-top: 76px; }
  .marquee { height: 56px; }
  .marquee span { font-size: 15px; }
}

/* waskie telefony: pasek zaufania nie moze wchodzic na przyciski hero */
@media (max-width: 620px) {
  .pageHeroCopy { padding: 70px 0 16px; }
  .pageHero .primaryButton,
  .pageHero .secondaryButton { padding-top: 15px; padding-bottom: 15px; font-size: 13.5px; }
  .trustStrip { padding-top: 10px; padding-bottom: 10px; }
  .trustStrip > * { gap: 10px; }
  .trustStrip strong, .trustStrip b { font-size: 13.5px; }
  .trustStrip small, .trustStrip span { font-size: 10.5px; line-height: 1.35; }
}

@media (max-width: 400px) {
  /* odrobine wiecej powietrza pod przyciskami - inaczej pasek zaufania ich dotyka */
  .pageHero, .pageHero.compact { min-height: calc(100svh - 226px); }
}

/* --- grafika hero: glowa psa w calosci, z powietrzem u gory --- */
/* w samym pliku pies siega prawie do gornej krawedzi, wiec nie wystarczy przesunac kadru
   (object-position) - caly obrazek startuje ponizej naglowka, nad nim zostaje tlo hero */
.pageHero .heroArtwork {
  top: 104px; bottom: 0; height: auto;
  object-position: center top;
}
@media (max-width: 860px) {
  .pageHero .heroArtwork { top: 108px; object-position: 62% top; }
}
@media (max-width: 620px) {
  .pageHero .heroArtwork { top: 104px; object-position: 66% top; }
}

/* --- pasek zaufania na pelna szerokosc ekranu --- */
.trustStrip {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  padding-left: clamp(18px, 4vw, 56px);
  padding-right: clamp(18px, 4vw, 56px);
}
@media (max-width: 620px) {
  .trustStrip { width: 100%; padding-left: 18px; padding-right: 18px; }
}

/* ======================================================================
   KAFELKI USLUG - grafiki tla (paczka Szefa, 2026-08-04)
   Kolejnosc sztywna wg numeracji 01-08, zero zmian w tresci/cenach/linkach.
   ====================================================================== */
.serviceGrid .serviceCard {
  position: relative;
  overflow: hidden;
  background-color: #02122b;
  background-repeat: no-repeat;
  background-size: auto 132%;   /* nadmiar w pionie, dzieki temu kadr da sie przesuwac */
  background-position: center 44%;
  color: #fff;
  border-color: rgba(255,255,255,.16);
}
/* czytelnosc tekstu: mocniej u gory i u dolu, srodek zostawia grafike widoczna */
.serviceGrid .serviceCard::before {
  content: "";
  position: absolute;
  /* prototyp ma wlasny ::before 190x190 (poswiata) - trzeba nadpisac takze wymiary */
  inset: 0;
  width: auto; height: auto;
  border-radius: inherit;
  background:
    linear-gradient(180deg,
      rgba(2,18,43,.88) 0%,
      rgba(2,18,43,.68) 38%,
      rgba(2,18,43,.50) 66%,
      rgba(2,18,43,.20) 88%,
      rgba(2,18,43,.70) 100%),
    linear-gradient(90deg,
      rgba(2,18,43,.52) 0%,
      rgba(2,18,43,.14) 62%,
      rgba(2,18,43,0) 100%);
  pointer-events: none;
  z-index: 0;
  transition: opacity .35s ease;
}
.serviceGrid .serviceCard > * { position: relative; z-index: 1; }
.serviceGrid .serviceCard:hover::before { opacity: .86; }

/* typografia na ciemnym tle */
.serviceGrid .serviceCard h3 { color: #fff; text-shadow: 0 2px 14px rgba(2,10,24,.8); }
.serviceGrid .serviceCard p { color: rgba(233,244,255,.86); text-shadow: 0 1px 10px rgba(2,10,24,.7); }
.serviceGrid .serviceCard .serviceCardIndex { color: rgba(255,255,255,.62); }
.serviceGrid .serviceCard .serviceCardIcon {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: #8fd3ff;
}
.serviceGrid .serviceCard svg { color: #8fd3ff; }


/* mobile: kafelki nizsze, wiec kadr wyzej */
@media (max-width: 620px) {
  .serviceGrid .serviceCard { background-position: center 38%; }
}



/* drobne korekty kadru tam, gdzie maskotka wypadala poza kafelek */
.serviceGrid .serviceCard:nth-child(4) { background-position: 88% 78%; }  /* materac ponizej opisu, piesek caly w kadrze */

/* materace: bialy materac wypelnia kadr, wiec ten jeden kafelek dostaje mocniejsza nakladke */
.serviceGrid .serviceCard:nth-child(3)::before {
  background:
    linear-gradient(180deg,
      rgba(2,18,43,.93) 0%,
      rgba(2,18,43,.84) 40%,
      rgba(2,18,43,.76) 70%,
      rgba(2,18,43,.26) 90%,
      rgba(2,18,43,.74) 100%),
    linear-gradient(90deg,
      rgba(2,18,43,.56) 0%,
      rgba(2,18,43,.16) 62%,
      rgba(2,18,43,0) 100%);
}

/* --- ceny w kafelkach: bylo 9px w ciemnym pomaranczu, teraz wyrozniona pigulka --- */
.serviceGrid .serviceCard strong {
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .02em;
  color: #ffb45c;
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(255,150,60,.13);
  border: 1px solid rgba(255,170,90,.45);
  box-shadow: 0 6px 20px rgba(255,140,50,.14), inset 0 1px 0 rgba(255,255,255,.14);
  text-shadow: 0 1px 8px rgba(2,10,24,.55);
}
@media (max-width: 620px) {
  .serviceGrid .serviceCard strong { font-size: 15px; padding: 8px 13px; }
}

/* --- pasek zaufania na desktopie: bylo 10px/8px przy ikonie 21px, teraz czytelne kafelki --- */
@media (min-width: 900px) {
  .trustStrip { padding-top: 22px; padding-bottom: 22px; }
  .trustStrip > div { gap: 18px; }
  .trustStrip strong {
    font-size: 19px;
    line-height: 1.15;
    letter-spacing: .01em;
  }
  .trustStrip small {
    font-size: 13.5px;
    line-height: 1.35;
    color: rgba(226,240,255,.72);
  }
  .trustStrip svg { width: 30px; height: 30px; }
  .trustStrip > i { height: 52px; }
}
@media (min-width: 1200px) {
  .trustStrip strong { font-size: 21px; }
  .trustStrip small { font-size: 14px; }
  .trustStrip svg { width: 34px; height: 34px; }
}

/* --- szerokie ekrany: cover rozdymal grafike (kadr znacznie szerszy niz proporcja pliku 3:2),
       wiec maskotka wypelniala pol hero. Grafika idzie do prawej strony w naturalnej skali. --- */
@media (min-width: 1500px) {
  .pageHero .heroArtwork {
    left: auto;
    right: 0;
    width: min(1240px, 68%);
    object-position: center 12%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%);
  }
}
@media (min-width: 1900px) {
  .pageHero .heroArtwork { width: min(1340px, 62%); }
}

/* obraz w sekcji "Jak pracujemy" ma loading="lazy" i brak wymiarow w HTML -
   bez rezerwacji miejsca kontener mial zerowa wysokosc, a plywajaca etykieta wisiala w pustce */
.darkFeatureArtwork img { aspect-ratio: 3 / 2; }
.darkFeatureArtwork { min-height: 1px; }

/* --- kursor: psia lapka (maskotka marki) --- */
/* SVG 32x32 wpisany w CSS; punkt klikniecia na srodku poduszki */
body {
  cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48ZyBmaWxsPSIjMmY4ZmU2IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48ZWxsaXBzZSBjeD0iMTYiIGN5PSIyMyIgcng9IjcuNiIgcnk9IjYuNiIvPjxlbGxpcHNlIGN4PSI3LjIiIGN5PSIxNC42IiByeD0iMy41IiByeT0iNC40IiB0cmFuc2Zvcm09InJvdGF0ZSgtMTggNy4yIDE0LjYpIi8+PGVsbGlwc2UgY3g9IjEzLjEiIGN5PSI4LjYiIHJ4PSIzLjMiIHJ5PSI0LjYiIHRyYW5zZm9ybT0icm90YXRlKC03IDEzLjEgOC42KSIvPjxlbGxpcHNlIGN4PSIxOS43IiBjeT0iOC42IiByeD0iMy4zIiByeT0iNC42IiB0cmFuc2Zvcm09InJvdGF0ZSg3IDE5LjcgOC42KSIvPjxlbGxpcHNlIGN4PSIyNS42IiBjeT0iMTQuNiIgcng9IjMuNSIgcnk9IjQuNCIgdHJhbnNmb3JtPSJyb3RhdGUoMTggMjUuNiAxNC42KSIvPjwvZz48L3N2Zz4=") 16 20, auto;
}
a, button, [role="button"], label, summary,
.serviceCard, .navDropdown button, .headerCta, .menuButton, .floatingContact {
  cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48ZyBmaWxsPSIjZjJhMjRhIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48ZWxsaXBzZSBjeD0iMTYiIGN5PSIyMyIgcng9IjcuNiIgcnk9IjYuNiIvPjxlbGxpcHNlIGN4PSI3LjIiIGN5PSIxNC42IiByeD0iMy41IiByeT0iNC40IiB0cmFuc2Zvcm09InJvdGF0ZSgtMTggNy4yIDE0LjYpIi8+PGVsbGlwc2UgY3g9IjEzLjEiIGN5PSI4LjYiIHJ4PSIzLjMiIHJ5PSI0LjYiIHRyYW5zZm9ybT0icm90YXRlKC03IDEzLjEgOC42KSIvPjxlbGxpcHNlIGN4PSIxOS43IiBjeT0iOC42IiByeD0iMy4zIiByeT0iNC42IiB0cmFuc2Zvcm09InJvdGF0ZSg3IDE5LjcgOC42KSIvPjxlbGxpcHNlIGN4PSIyNS42IiBjeT0iMTQuNiIgcng9IjMuNSIgcnk9IjQuNCIgdHJhbnNmb3JtPSJyb3RhdGUoMTggMjUuNiAxNC42KSIvPjwvZz48L3N2Zz4=") 16 20, pointer;
}
input, textarea, select { cursor: auto; }
@media (hover: none) { body, a, button { cursor: auto; } }   /* dotyk - bez zmian */

/* ======================================================================
   "NIE MASKUJEMY. WYPLUKUJEMY." - kursor odslania czysta tapicerke
   Warstwa spodnia = obraz przygaszony (brud), warstwa wierzchnia = ten sam
   obraz w pelnym kolorze, odslaniany radialna maska podazajaca za kursorem.
   ====================================================================== */
.darkFeatureArtwork {
  --mx: 50%;
  --my: 55%;
  --r: 165px;
  position: relative;
  border-radius: 30px;
  isolation: isolate;
}
.darkFeatureArtwork img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 30px;
  filter: saturate(.42) brightness(.60) contrast(.94);
  transition: filter .4s ease;
}
/* czysta warstwa - to samo zrodlo, pelny kolor, widoczna tylko pod "dysza" */
.darkFeatureArtwork::after {
  content: "";
  position: absolute;
  inset: 0;
  width: auto; height: auto;
  border-radius: 30px;
  background-image: var(--df-img, none);
  background-size: cover;
  background-position: center;
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my),
      #000 0%, #000 46%, rgba(0,0,0,.55) 66%, transparent 78%);
  mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my),
      #000 0%, #000 46%, rgba(0,0,0,.55) 66%, transparent 78%);
  pointer-events: none;
  z-index: 1;
}
/* pierscien "dyszy" - podkresla miejsce czyszczenia */
.darkFeatureArtwork .dfNozzle {
  position: absolute;
  left: var(--mx);
  top: var(--my);
  width: calc(var(--r) * 1.06);
  height: calc(var(--r) * 1.06);
  margin: calc(var(--r) * -.53) 0 0 calc(var(--r) * -.53);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(circle, rgba(143,211,255,.16) 0%, rgba(143,211,255,0) 62%);
  box-shadow: 0 0 0 1px rgba(143,211,255,.28), 0 0 34px rgba(47,143,230,.30);
  transition: opacity .35s ease;
}
/* poswiata ramki */
.darkFeatureArtwork::before {
  content: "";
  position: absolute;
  inset: -2px;
  width: auto; height: auto;
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(47,143,230,.55), rgba(143,211,255,.12) 45%, rgba(47,143,230,.45));
  filter: blur(10px);
  opacity: .55;
  z-index: -1;
  animation: dfGlow 6s ease-in-out infinite alternate;
}
@keyframes dfGlow { from { opacity: .38; } to { opacity: .72; } }

/* etykieta na obrazie - nad warstwami */
.darkFeatureArtwork .artGlass { z-index: 3; }

/* babelki w kadrze */
.darkFeatureArtwork .w3cBubbles { z-index: 2; border-radius: 30px; }

@media (prefers-reduced-motion: reduce) {
  .darkFeatureArtwork::before { animation: none; }
  .darkFeatureArtwork img { filter: none; }
  .darkFeatureArtwork::after { display: none; }
}

/* ======================================================================
   STOPKA - szklo, porzadek, interakcje (2026-08-04)
   ====================================================================== */
.siteFooter {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(47,143,230,.16) 0%, rgba(6,21,43,0) 58%),
    radial-gradient(70% 90% at 92% 15%, rgba(143,211,255,.10) 0%, rgba(6,21,43,0) 60%),
    linear-gradient(180deg, #071a33 0%, #061529 46%, #040e1d 100%);
  border-top: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}
/* swietlisty akcent na gornej krawedzi */
.siteFooter::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(143,211,255,.55) 22%, rgba(47,143,230,.75) 50%, rgba(143,211,255,.55) 78%, transparent);
  z-index: 1;
}

/* --- siatka --- */
.siteFooter .footerTop {
  gap: 26px;
  align-items: stretch;
  padding-top: 62px;
  padding-bottom: 34px;
}
.siteFooter .footerBrand { padding-right: 12px; }
.siteFooter .footerBrand p {
  margin-top: 16px;
  max-width: 330px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(226,240,255,.66);
}

/* --- kolumny jako szklane karty --- */
.siteFooter .footerColumn {
  position: relative;
  padding: 24px 26px 26px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(115deg, rgba(255,255,255,0) 34%, rgba(255,255,255,.07) 47%, rgba(255,255,255,0) 60%),
    linear-gradient(rgba(255,255,255,.045), rgba(255,255,255,.02));
  background-size: 260% 100%, auto;
  background-position: 130% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 18px 40px rgba(2,10,22,.28);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s ease, background-position .8s ease;
}
.siteFooter .footerColumn:hover {
  transform: translateY(-4px);
  border-color: rgba(143,211,255,.34);
  background-position: -60% 0, 0 0;   /* polysk przejezdza - bez rozpychania layoutu */
}

/* naglowki kolumn ze znacznikiem */
.siteFooter .footerColumn h3 {
  position: relative;
  margin: 0 0 16px;
  padding-left: 16px;
  font-size: 12px;
  letter-spacing: .2em;
  color: #cfe6ff;
}
.siteFooter .footerColumn h3::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 8px; height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: #2f8fe6;
  box-shadow: 0 0 0 3px rgba(47,143,230,.18), 0 0 12px rgba(47,143,230,.7);
}

/* linki - przesuniecie i kropka przy najechaniu */
.siteFooter .footerColumn a {
  position: relative;
  display: block;
  padding: 7px 0 7px 0;
  font-size: 14px;
  color: rgba(226,240,255,.74);
  transition: color .25s ease, transform .25s ease, padding-left .25s ease;
}
.siteFooter .footerColumn a::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 0; height: 1px;
  margin-top: -1px;
  background: linear-gradient(90deg, #2f8fe6, #8fd3ff);
  transition: width .25s ease;
}
.siteFooter .footerColumn a:hover {
  color: #fff;
  padding-left: 18px;
}
.siteFooter .footerColumn a:hover::before { width: 12px; }

/* kolumna kontaktowa - telefon i mail jako pigulki */
.siteFooter .contactColumn a[href^="tel:"],
.siteFooter .contactColumn a[href^="mailto:"] {
  display: inline-block;
  margin-bottom: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid rgba(143,211,255,.28);
  background: rgba(47,143,230,.12);
  color: #dff0ff;
  font-weight: 700;
}
.siteFooter .contactColumn a[href^="tel:"]:hover,
.siteFooter .contactColumn a[href^="mailto:"]:hover {
  padding-left: 15px;
  border-color: rgba(143,211,255,.6);
  background: rgba(47,143,230,.22);
  box-shadow: 0 8px 22px rgba(47,143,230,.22);
}
.siteFooter .contactColumn a[href^="tel:"]::before,
.siteFooter .contactColumn a[href^="mailto:"]::before { display: none; }
.siteFooter .contactColumn span {
  display: block;
  margin: 6px 0 16px;
  font-size: 13.5px;
  color: rgba(226,240,255,.62);
}

/* social - kola z poswiata */
.siteFooter .socials { display: flex; gap: 10px; margin-top: 4px; }
.siteFooter .socials a {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #cfe6ff;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, background .3s ease, border-color .3s ease;
}
.siteFooter .socials a::before { display: none; }
.siteFooter .socials a:hover {
  transform: translateY(-5px) rotate(-6deg);
  padding: 0;
  border-color: rgba(143,211,255,.65);
  background: linear-gradient(135deg, #0a56c8, #22adef);
  color: #fff;
  box-shadow: 0 12px 26px rgba(34,173,239,.34);
}

/* --- dolna belka --- */
.siteFooter .footerBottom {
  gap: 18px;
  margin-top: 8px;
  padding: 20px 0 26px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 12.5px;
  color: rgba(226,240,255,.52);
  flex-wrap: wrap;
}
.siteFooter .footerBottom a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(226,240,255,.72);
  transition: color .25s ease, gap .25s ease;
}
.siteFooter .footerBottom a:hover { color: #8fd3ff; gap: 13px; }
.siteFooter .footerBottom a svg { transition: transform .25s ease; }
.siteFooter .footerBottom a:hover svg { transform: translateX(3px); }

/* podpis wykonawcy */
.footerAuthor {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: rgba(226,240,255,.62) !important;
  font-size: 12px;
}
.footerAuthor b { color: #ffb45c; font-weight: 800; letter-spacing: .02em; }
.footerAuthor:hover {
  border-color: rgba(255,180,92,.45);
  background: rgba(255,150,60,.10);
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(255,140,50,.16);
}

@media (max-width: 900px) {
  .siteFooter .footerTop { padding-top: 44px; gap: 16px; }
  .siteFooter .footerColumn { padding: 20px 20px 22px; border-radius: 18px; }
  .siteFooter .footerBottom { justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .siteFooter .footerColumn, .siteFooter .socials a, .siteFooter .footerColumn a { transition: none; }
}

/* tla kafelkow - kolejnosc po usunieciu dywanow (5.08) */
.serviceGrid .serviceCard:nth-child(1) { background-image: url("/wp-content/themes/wyprane3city/assets/tiles/02-czyszczenie-wykladzin.webp"); }
.serviceGrid .serviceCard:nth-child(2) { background-image: url("/wp-content/themes/wyprane3city/assets/tiles/03-czyszczenie-kanapy.webp"); }
.serviceGrid .serviceCard:nth-child(3) { background-image: url("/wp-content/themes/wyprane3city/assets/tiles/04-czyszczenie-materacy.webp"); }
.serviceGrid .serviceCard:nth-child(4) { background-image: url("/wp-content/themes/wyprane3city/assets/tiles/05-czyszczenie-foteli.webp"); }
.serviceGrid .serviceCard:nth-child(5) { background-image: url("/wp-content/themes/wyprane3city/assets/tiles/06-czyszczenie-krzesel.webp"); }
.serviceGrid .serviceCard:nth-child(6) { background-image: url("/wp-content/themes/wyprane3city/assets/tiles/07-tapicerka-skorzana.webp"); }
.serviceGrid .serviceCard:nth-child(7) { background-image: url("/wp-content/themes/wyprane3city/assets/tiles/08-wypozyczalnia.webp"); }
.serviceGrid .serviceCard:nth-child(2) { background-position: center 56%; }
.serviceGrid .serviceCard:nth-child(3) { background-position: 88% 78%; }  /* materace - piesek caly w kadrze */
.serviceGrid .serviceCard:nth-child(5) { background-position: center 52%; }

/* ======================================================================
   JASNY MOTYW (5.08.2026) - uwaga klienta "wszystko zbyt ciemne"
   Baza: krem/biel. Granat zostaje w hero i jako punktowy akcent.
   ====================================================================== */
:root {
  --w3c-ink: #0b1f38;          /* glowny tekst */
  --w3c-ink-soft: #45607e;     /* tekst drugorzedny */
  --w3c-line: rgba(11,31,56,.12);
  --w3c-card: #ffffff;
  --w3c-card-2: #f7f4ed;
}

/* --- pasek zaufania: bylo ciemne szklo, jest jasne --- */
.trustStrip {
  background:
    linear-gradient(105deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.55) 48%, rgba(255,255,255,0) 60%),
    linear-gradient(rgba(255,255,255,.86), rgba(255,255,255,.86));
  border-top: 1px solid rgba(11,31,56,.10);
  border-bottom: 1px solid rgba(11,31,56,.10);
  color: var(--w3c-ink);
  box-shadow: 0 14px 34px rgba(11,31,56,.08);
}
.trustStrip strong { color: var(--w3c-ink); }
.trustStrip small, .trustStrip span { color: var(--w3c-ink-soft) !important; }
.trustStrip svg { color: #0a56c8; }
.trustStrip > i { background: rgba(11,31,56,.14); }

/* --- "Jak pracujemy": jasne tlo, ciemna zostaje tylko ilustracja --- */
.darkFeature {
  background:
    radial-gradient(80% 120% at 8% 0%, rgba(47,143,230,.10) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #fbf8f1 0%, #f2ede3 100%);
  color: var(--w3c-ink);
}
.darkFeature h2, .darkFeature h3, .darkFeature strong { color: var(--w3c-ink); }
.darkFeature p { color: var(--w3c-ink-soft); }
.darkFeature .sectionKicker.light { color: #0a56c8; }
.darkFeature .sectionKicker.light span {
  background: rgba(10,86,200,.10);
  border-color: rgba(10,86,200,.24);
  color: #0a56c8;
}
.darkFeature .miniSteps article { border-color: var(--w3c-line); }
.darkFeature .miniSteps span { color: #0a56c8; }
.darkFeature .miniSteps p { color: var(--w3c-ink-soft); }

/* --- CTA koncowe i disclaimer cennika: jasne karty z niebieskim akcentem --- */
.finalCta, .priceDisclaimer {
  background:
    radial-gradient(70% 120% at 85% 10%, rgba(34,173,239,.12) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg, #f7f4ed 0%, #fbf8f1 100%);
  color: var(--w3c-ink);
  border-top: 1px solid var(--w3c-line);
}
.finalCta h2, .finalCta strong, .priceDisclaimer h2, .priceDisclaimer strong { color: var(--w3c-ink); }
.finalCta p, .priceDisclaimer p { color: var(--w3c-ink-soft); }
.finalCta .secondaryButton, .priceDisclaimer .secondaryButton {
  border-color: rgba(11,31,56,.20);
  background: rgba(255,255,255,.75);
  color: var(--w3c-ink);
}
.finalCta .secondaryButton:hover { background: #fff; border-color: rgba(10,86,200,.45); }

/* --- stopka: jasna, granat tylko w typografii --- */
.siteFooter {
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(47,143,230,.10) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(180deg, #f7f4ed 0%, #efe9dd 100%);
  border-top: 1px solid var(--w3c-line);
  color: var(--w3c-ink);
}
.siteFooter::before {
  background: linear-gradient(90deg, transparent, rgba(10,86,200,.35) 22%, rgba(10,86,200,.55) 50%, rgba(10,86,200,.35) 78%, transparent);
}
.siteFooter .footerBrand p { color: var(--w3c-ink-soft); }
.siteFooter .footerColumn {
  border-color: rgba(11,31,56,.10);
  background:
    linear-gradient(115deg, rgba(255,255,255,0) 34%, rgba(255,255,255,.85) 47%, rgba(255,255,255,0) 60%),
    linear-gradient(rgba(255,255,255,.78), rgba(255,255,255,.6));
  background-size: 260% 100%, auto;
  background-position: 130% 0, 0 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 16px 34px rgba(11,31,56,.08);
}
.siteFooter .footerColumn:hover { border-color: rgba(10,86,200,.34); }
.siteFooter .footerColumn h3 { color: var(--w3c-ink); }
.siteFooter .footerColumn h3::before { background: #0a56c8; box-shadow: 0 0 0 3px rgba(10,86,200,.14); }
.siteFooter .footerColumn a { color: var(--w3c-ink-soft); }
.siteFooter .footerColumn a:hover { color: #0a56c8; }
.siteFooter .contactColumn a[href^="tel:"],
.siteFooter .contactColumn a[href^="mailto:"] {
  border-color: rgba(10,86,200,.30);
  background: rgba(10,86,200,.08);
  color: #0a3f96;
}
.siteFooter .contactColumn span { color: var(--w3c-ink-soft); }
.siteFooter .socials a {
  border-color: rgba(11,31,56,.16);
  background: rgba(255,255,255,.8);
  color: #0a3f96;
}
.siteFooter .footerBottom {
  border-top-color: var(--w3c-line);
  color: rgba(11,31,56,.58);
}
.siteFooter .footerBottom a { color: rgba(11,31,56,.72); }
.siteFooter .footerBottom a:hover { color: #0a56c8; }
.footerAuthor {
  border-color: rgba(11,31,56,.14);
  background: rgba(255,255,255,.7);
  color: rgba(11,31,56,.62) !important;
}
.footerAuthor b { color: #c2621b; }
.footerAuthor:hover { background: rgba(255,150,60,.12); color: var(--w3c-ink) !important; }

/* --- logo w stopce: bylo bialo na ciemnym --- */
.siteFooter .brandType b { color: var(--w3c-ink); }

/* --- hero zostaje ciemne, ale lagodniej wchodzi w jasna strone --- */
.pageHeroCut { background: #fbf8f1; }

/* --- korekty kontrastu po zmianie palety (audyt 5.08) --- */
/* etykieta lezy na CIEMNEJ ilustracji - nie moze dziedziczyc ciemnego tekstu sekcji */
.darkFeature .artGlass strong { color: #fff; }
.darkFeature .artGlass small { color: rgba(226,240,255,.82); }

/* akcent naglowka byl cyanem - na kremowym tle nieczytelny */
.darkFeature h2 em,
.finalCta h2 em,
.priceDisclaimer h2 em { color: #0a56c8; }

/* lead sekcji zostal w jasnym kolorze z ciemnego motywu */
.darkFeature .darkFeatureCopy > p,
.darkFeature .darkFeatureCopy p:not(.sectionKicker) { color: var(--w3c-ink-soft); }

/* opisy sekcji - podnieslismy z 4.04 do progu */
.sectionHeading p,
.section p.sectionLead { color: #4d6580; }

/* okruszki na jasnym tle */
.breadcrumb a, .breadcrumb span { color: #5a7290; }
.breadcrumb strong { color: var(--w3c-ink); }

/* ======================================================================
   JASNY MOTYW, TURA 2 - kolory tekstu w jasnych sekcjach (audyt kontrastu)
   ====================================================================== */
.section { color: var(--w3c-ink); }
.section :where(p, li, small, figcaption, dd):not(.serviceCard):not(.serviceCard *):not(.artGlass):not(.artGlass *):not(.heroGlassTag):not(.heroGlassTag *):not(.marquee *):not(.primaryButton):not(.primaryButton *):not(.headerCta):not(.headerCta *) { color: #46617f; }
.section :where(h1, h2, h3, h4, strong, b, dt):not(.serviceCard):not(.serviceCard *):not(.artGlass):not(.artGlass *):not(.heroGlassTag):not(.heroGlassTag *):not(.marquee *):not(.primaryButton):not(.primaryButton *):not(.headerCta):not(.headerCta *) { color: var(--w3c-ink); }
.section :where(h1, h2, h3) em:not(.serviceCard):not(.serviceCard *):not(.artGlass):not(.artGlass *):not(.heroGlassTag):not(.heroGlassTag *):not(.marquee *):not(.primaryButton):not(.primaryButton *):not(.headerCta):not(.headerCta *) { color: #0a56c8; }
.section a:not(.primaryButton):not(.secondaryButton):not(.serviceCard):not(.serviceCard):not(.serviceCard *):not(.artGlass):not(.artGlass *):not(.heroGlassTag):not(.heroGlassTag *):not(.marquee *):not(.primaryButton):not(.primaryButton *):not(.headerCta):not(.headerCta *) { color: #0a56c8; }
.trustStrip { color: var(--w3c-ink); }
.trustStrip :where(p, li, small, figcaption, dd):not(.serviceCard):not(.serviceCard *):not(.artGlass):not(.artGlass *):not(.heroGlassTag):not(.heroGlassTag *):not(.marquee *):not(.primaryButton):not(.primaryButton *):not(.headerCta):not(.headerCta *) { color: #46617f; }
.trustStrip :where(h1, h2, h3, h4, strong, b, dt):not(.serviceCard):not(.serviceCard *):not(.artGlass):not(.artGlass *):not(.heroGlassTag):not(.heroGlassTag *):not(.marquee *):not(.primaryButton):not(.primaryButton *):not(.headerCta):not(.headerCta *) { color: var(--w3c-ink); }
.trustStrip :where(h1, h2, h3) em:not(.serviceCard):not(.serviceCard *):not(.artGlass):not(.artGlass *):not(.heroGlassTag):not(.heroGlassTag *):not(.marquee *):not(.primaryButton):not(.primaryButton *):not(.headerCta):not(.headerCta *) { color: #0a56c8; }
.trustStrip a:not(.primaryButton):not(.secondaryButton):not(.serviceCard):not(.serviceCard):not(.serviceCard *):not(.artGlass):not(.artGlass *):not(.heroGlassTag):not(.heroGlassTag *):not(.marquee *):not(.primaryButton):not(.primaryButton *):not(.headerCta):not(.headerCta *) { color: #0a56c8; }
.darkFeature { color: var(--w3c-ink); }
.darkFeature :where(p, li, small, figcaption, dd):not(.serviceCard):not(.serviceCard *):not(.artGlass):not(.artGlass *):not(.heroGlassTag):not(.heroGlassTag *):not(.marquee *):not(.primaryButton):not(.primaryButton *):not(.headerCta):not(.headerCta *) { color: #46617f; }
.darkFeature :where(h1, h2, h3, h4, strong, b, dt):not(.serviceCard):not(.serviceCard *):not(.artGlass):not(.artGlass *):not(.heroGlassTag):not(.heroGlassTag *):not(.marquee *):not(.primaryButton):not(.primaryButton *):not(.headerCta):not(.headerCta *) { color: var(--w3c-ink); }
.darkFeature :where(h1, h2, h3) em:not(.serviceCard):not(.serviceCard *):not(.artGlass):not(.artGlass *):not(.heroGlassTag):not(.heroGlassTag *):not(.marquee *):not(.primaryButton):not(.primaryButton *):not(.headerCta):not(.headerCta *) { color: #0a56c8; }
.darkFeature a:not(.primaryButton):not(.secondaryButton):not(.serviceCard):not(.serviceCard):not(.serviceCard *):not(.artGlass):not(.artGlass *):not(.heroGlassTag):not(.heroGlassTag *):not(.marquee *):not(.primaryButton):not(.primaryButton *):not(.headerCta):not(.headerCta *) { color: #0a56c8; }
.finalCta { color: var(--w3c-ink); }
.finalCta :where(p, li, small, figcaption, dd):not(.serviceCard):not(.serviceCard *):not(.artGlass):not(.artGlass *):not(.heroGlassTag):not(.heroGlassTag *):not(.marquee *):not(.primaryButton):not(.primaryButton *):not(.headerCta):not(.headerCta *) { color: #46617f; }
.finalCta :where(h1, h2, h3, h4, strong, b, dt):not(.serviceCard):not(.serviceCard *):not(.artGlass):not(.artGlass *):not(.heroGlassTag):not(.heroGlassTag *):not(.marquee *):not(.primaryButton):not(.primaryButton *):not(.headerCta):not(.headerCta *) { color: var(--w3c-ink); }
.finalCta :where(h1, h2, h3) em:not(.serviceCard):not(.serviceCard *):not(.artGlass):not(.artGlass *):not(.heroGlassTag):not(.heroGlassTag *):not(.marquee *):not(.primaryButton):not(.primaryButton *):not(.headerCta):not(.headerCta *) { color: #0a56c8; }
.finalCta a:not(.primaryButton):not(.secondaryButton):not(.serviceCard):not(.serviceCard):not(.serviceCard *):not(.artGlass):not(.artGlass *):not(.heroGlassTag):not(.heroGlassTag *):not(.marquee *):not(.primaryButton):not(.primaryButton *):not(.headerCta):not(.headerCta *) { color: #0a56c8; }
.priceDisclaimer { color: var(--w3c-ink); }
.priceDisclaimer :where(p, li, small, figcaption, dd):not(.serviceCard):not(.serviceCard *):not(.artGlass):not(.artGlass *):not(.heroGlassTag):not(.heroGlassTag *):not(.marquee *):not(.primaryButton):not(.primaryButton *):not(.headerCta):not(.headerCta *) { color: #46617f; }
.priceDisclaimer :where(h1, h2, h3, h4, strong, b, dt):not(.serviceCard):not(.serviceCard *):not(.artGlass):not(.artGlass *):not(.heroGlassTag):not(.heroGlassTag *):not(.marquee *):not(.primaryButton):not(.primaryButton *):not(.headerCta):not(.headerCta *) { color: var(--w3c-ink); }
.priceDisclaimer :where(h1, h2, h3) em:not(.serviceCard):not(.serviceCard *):not(.artGlass):not(.artGlass *):not(.heroGlassTag):not(.heroGlassTag *):not(.marquee *):not(.primaryButton):not(.primaryButton *):not(.headerCta):not(.headerCta *) { color: #0a56c8; }
.priceDisclaimer a:not(.primaryButton):not(.secondaryButton):not(.serviceCard):not(.serviceCard):not(.serviceCard *):not(.artGlass):not(.artGlass *):not(.heroGlassTag):not(.heroGlassTag *):not(.marquee *):not(.primaryButton):not(.primaryButton *):not(.headerCta):not(.headerCta *) { color: #0a56c8; }
.certificateBand { color: var(--w3c-ink); }
.certificateBand :where(p, li, small, figcaption, dd):not(.serviceCard):not(.serviceCard *):not(.artGlass):not(.artGlass *):not(.heroGlassTag):not(.heroGlassTag *):not(.marquee *):not(.primaryButton):not(.primaryButton *):not(.headerCta):not(.headerCta *) { color: #46617f; }
.certificateBand :where(h1, h2, h3, h4, strong, b, dt):not(.serviceCard):not(.serviceCard *):not(.artGlass):not(.artGlass *):not(.heroGlassTag):not(.heroGlassTag *):not(.marquee *):not(.primaryButton):not(.primaryButton *):not(.headerCta):not(.headerCta *) { color: var(--w3c-ink); }
.certificateBand :where(h1, h2, h3) em:not(.serviceCard):not(.serviceCard *):not(.artGlass):not(.artGlass *):not(.heroGlassTag):not(.heroGlassTag *):not(.marquee *):not(.primaryButton):not(.primaryButton *):not(.headerCta):not(.headerCta *) { color: #0a56c8; }
.certificateBand a:not(.primaryButton):not(.secondaryButton):not(.serviceCard):not(.serviceCard):not(.serviceCard *):not(.artGlass):not(.artGlass *):not(.heroGlassTag):not(.heroGlassTag *):not(.marquee *):not(.primaryButton):not(.primaryButton *):not(.headerCta):not(.headerCta *) { color: #0a56c8; }
.serviceMethod { color: var(--w3c-ink); }
.serviceMethod :where(p, li, small, figcaption, dd):not(.serviceCard):not(.serviceCard *):not(.artGlass):not(.artGlass *):not(.heroGlassTag):not(.heroGlassTag *):not(.marquee *):not(.primaryButton):not(.primaryButton *):not(.headerCta):not(.headerCta *) { color: #46617f; }
.serviceMethod :where(h1, h2, h3, h4, strong, b, dt):not(.serviceCard):not(.serviceCard *):not(.artGlass):not(.artGlass *):not(.heroGlassTag):not(.heroGlassTag *):not(.marquee *):not(.primaryButton):not(.primaryButton *):not(.headerCta):not(.headerCta *) { color: var(--w3c-ink); }
.serviceMethod :where(h1, h2, h3) em:not(.serviceCard):not(.serviceCard *):not(.artGlass):not(.artGlass *):not(.heroGlassTag):not(.heroGlassTag *):not(.marquee *):not(.primaryButton):not(.primaryButton *):not(.headerCta):not(.headerCta *) { color: #0a56c8; }
.serviceMethod a:not(.primaryButton):not(.secondaryButton):not(.serviceCard):not(.serviceCard):not(.serviceCard *):not(.artGlass):not(.artGlass *):not(.heroGlassTag):not(.heroGlassTag *):not(.marquee *):not(.primaryButton):not(.primaryButton *):not(.headerCta):not(.headerCta *) { color: #0a56c8; }
.rentalDetails { color: var(--w3c-ink); }
.rentalDetails :where(p, li, small, figcaption, dd):not(.serviceCard):not(.serviceCard *):not(.artGlass):not(.artGlass *):not(.heroGlassTag):not(.heroGlassTag *):not(.marquee *):not(.primaryButton):not(.primaryButton *):not(.headerCta):not(.headerCta *) { color: #46617f; }
.rentalDetails :where(h1, h2, h3, h4, strong, b, dt):not(.serviceCard):not(.serviceCard *):not(.artGlass):not(.artGlass *):not(.heroGlassTag):not(.heroGlassTag *):not(.marquee *):not(.primaryButton):not(.primaryButton *):not(.headerCta):not(.headerCta *) { color: var(--w3c-ink); }
.rentalDetails :where(h1, h2, h3) em:not(.serviceCard):not(.serviceCard *):not(.artGlass):not(.artGlass *):not(.heroGlassTag):not(.heroGlassTag *):not(.marquee *):not(.primaryButton):not(.primaryButton *):not(.headerCta):not(.headerCta *) { color: #0a56c8; }
.rentalDetails a:not(.primaryButton):not(.secondaryButton):not(.serviceCard):not(.serviceCard):not(.serviceCard *):not(.artGlass):not(.artGlass *):not(.heroGlassTag):not(.heroGlassTag *):not(.marquee *):not(.primaryButton):not(.primaryButton *):not(.headerCta):not(.headerCta *) { color: #0a56c8; }
.equipmentBand { color: var(--w3c-ink); }
.equipmentBand :where(p, li, small, figcaption, dd):not(.serviceCard):not(.serviceCard *):not(.artGlass):not(.artGlass *):not(.heroGlassTag):not(.heroGlassTag *):not(.marquee *):not(.primaryButton):not(.primaryButton *):not(.headerCta):not(.headerCta *) { color: #46617f; }
.equipmentBand :where(h1, h2, h3, h4, strong, b, dt):not(.serviceCard):not(.serviceCard *):not(.artGlass):not(.artGlass *):not(.heroGlassTag):not(.heroGlassTag *):not(.marquee *):not(.primaryButton):not(.primaryButton *):not(.headerCta):not(.headerCta *) { color: var(--w3c-ink); }
.equipmentBand :where(h1, h2, h3) em:not(.serviceCard):not(.serviceCard *):not(.artGlass):not(.artGlass *):not(.heroGlassTag):not(.heroGlassTag *):not(.marquee *):not(.primaryButton):not(.primaryButton *):not(.headerCta):not(.headerCta *) { color: #0a56c8; }
.equipmentBand a:not(.primaryButton):not(.secondaryButton):not(.serviceCard):not(.serviceCard):not(.serviceCard *):not(.artGlass):not(.artGlass *):not(.heroGlassTag):not(.heroGlassTag *):not(.marquee *):not(.primaryButton):not(.primaryButton *):not(.headerCta):not(.headerCta *) { color: #0a56c8; }

/* pozostale ciemne pasy na podstronach - rozjasnione (hero i CTA zostaja granatowe) */
.serviceMethod, .rentalDetails, .equipmentBand {
  background:
    radial-gradient(75% 110% at 10% 0%, rgba(47,143,230,.10) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #fbf8f1 0%, #f2ede3 100%) !important;
  border-top: 1px solid var(--w3c-line);
  border-bottom: 1px solid var(--w3c-line);
}
/* karty wewnatrz rozjasnionych pasow */
.serviceMethod article, .rentalDetails article, .equipmentBand article,
.serviceMethod li, .rentalDetails li, .equipmentBand li {
  border-color: var(--w3c-line);
}

/* okruszki i drobne linki */
.breadcrumb a { color: #4d6580; }
.breadcrumb a:hover { color: #0a56c8; }

/* ceny w rozwijanym menu byly brazowe - na jasnym za slabe */
.megaLinks small { color: #a0561f; }

/* logo w stopce na jasnym tle */
.siteFooter .brandType strong i { color: #0a56c8; }
.siteFooter .brandType strong { color: #0a56c8; }

/* podpis wykonawcy - ciemniejszy pomaranczowy dla kontrastu */
.footerAuthor b { color: #a8530f; }

/* --- elementy lezace na CIEMNYM tle wewnatrz jasnych sekcji: tekst zostaje jasny --- */
.pricePageIntro aside,
.pricePageIntro aside *,
.serviceIntro .servicePriceCard,
.serviceIntro .servicePriceCard *,
.galleryGrid figcaption,
.galleryGrid figcaption *,
.homePriceCta,
.homePriceCta *,
.innerCta,
.innerCta *,
.socialBand,
.socialBand * {
  color: #fff;
}
.pricePageIntro aside small,
.serviceIntro .servicePriceCard small,
.galleryGrid figcaption span,
.homePriceCta p,
.innerCta p { color: rgba(226,240,255,.80) !important; }
.homePriceCta h2 em,
.innerCta h2 em,
.pricePageIntro aside strong { color: #91e1ff; }
.homePriceCta .sectionKicker,
.homePriceCta .sectionKicker.light,
.innerCta .sectionKicker { color: #91e1ff !important; }

/* --- jasny wariant przycisku: na jasnej sekcji bialy tekst na bialym tle --- */
.primaryButton.lightButton {
  background: linear-gradient(135deg, #0a56c8, #22adef) !important;
  color: #fff !important;
  border-color: transparent;
}
.primaryButton.lightButton * { color: #fff !important; }

/* --- wyrozniona pozycja cennika: ciemne tlo, wiec jasny tekst --- */
.fullPriceTable .highlight,
.fullPriceTable .highlight *,
.priceDisclaimer .highlight,
.priceDisclaimer .highlight * { color: #fff !important; }
.fullPriceTable .highlight small { color: rgba(226,240,255,.82) !important; }

/* ======================================================================
   KAFELKI BEZ MASKOTKI (5.08, uwaga klienta "czy musi byc znowu pies")
   Pies zostaje na home w hero i w sekcji "Jak pracujemy" - tutaj kadr
   przesuniety na sprzet i tapicerke.
   ====================================================================== */
.serviceGrid .serviceCard { background-size: auto 150%; }
.serviceGrid .serviceCard:nth-child(1) { background-position: center 42%; }  /* wykladziny - bez psa */
.serviceGrid .serviceCard:nth-child(2) { background-position: 92% 58%; }     /* kanapy - pies po lewej */
.serviceGrid .serviceCard:nth-child(3) { background-position: 16% 40%; }     /* materace - pies w prawym dolnym */
.serviceGrid .serviceCard:nth-child(4) { background-position: 90% 58%; }     /* fotele - pies po lewej */
.serviceGrid .serviceCard:nth-child(5) { background-position: center 52%; }  /* krzesla - bez psa */
.serviceGrid .serviceCard:nth-child(6) { background-position: 72% 80%; }     /* skora - pies w lewym gornym */
.serviceGrid .serviceCard:nth-child(7) { background-position: 92% 62%; }     /* wypozyczalnia - pies po lewej */

/* ======================================================================
   KREATOR "WYCEN PO ZDJECIU" (5.08) - odpowiedz na "zrobi to kazdy na WP"
   ====================================================================== */
.w3cWycenaSekcja { padding-top: 72px; padding-bottom: 72px; }
.w3cWrap { width: min(1120px, 100% - 48px); margin: 0 auto; }
.w3cLead { max-width: 640px; margin: 14px 0 30px; }

.w3cKrok { border: 0; margin: 0 0 22px; padding: 0; }
.w3cKrok legend {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; font-family: 'Barlow Condensed', sans-serif;
  font-size: 21px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--w3c-ink);
}
.w3cKrok legend b {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, #0a56c8, #22adef); color: #fff; font-size: 14px;
}

.w3cTypy { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.w3cTyp {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  padding: 15px 17px; border-radius: 16px; cursor: pointer; text-align: left;
  border: 1px solid rgba(11,31,56,.14); background: rgba(255,255,255,.72);
  transition: transform .25s cubic-bezier(.2,.7,.2,1), border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.w3cTyp strong { font-size: 15px; color: var(--w3c-ink); }
.w3cTyp span { font-size: 12.5px; color: #46617f; }
.w3cTyp:hover { transform: translateY(-3px); border-color: rgba(10,86,200,.4); box-shadow: 0 14px 30px rgba(11,31,56,.10); }
.w3cTyp.wybrany {
  border-color: transparent; background: linear-gradient(135deg, #0a56c8, #22adef);
  box-shadow: 0 16px 32px rgba(10,86,200,.28);
}
.w3cTyp.wybrany strong, .w3cTyp.wybrany span { color: #fff; }

.w3cPola { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.w3cPola label, .w3cUwagi { display: flex; flex-direction: column; gap: 6px; }
.w3cPola span, .w3cUwagi span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #46617f; }
.w3cPola input, .w3cPola select, .w3cUwagi textarea {
  padding: 13px 15px; border-radius: 12px; font: inherit; font-size: 15px; color: var(--w3c-ink);
  border: 1px solid rgba(11,31,56,.16); background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.w3cPola input:focus, .w3cPola select:focus, .w3cUwagi textarea:focus {
  outline: none; border-color: #0a56c8; box-shadow: 0 0 0 4px rgba(10,86,200,.14);
}
.w3cUwagi { margin-top: 14px; }
.w3cDodatki { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.w3cDodatki label {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 10px 15px; border-radius: 999px; font-size: 14px; color: #46617f;
  border: 1px solid rgba(11,31,56,.14); background: rgba(255,255,255,.7);
}
.w3cDodatki label b { color: #a8530f; }
.w3cDodatki input { accent-color: #0a56c8; width: 17px; height: 17px; }

#w3cWynik {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px;
  margin: 4px 0 26px; padding: 20px 24px; border-radius: 20px;
  background: linear-gradient(135deg, #071a33, #0d2d52);
  box-shadow: 0 20px 44px rgba(7,26,51,.26);
}
.w3cWynikEtykieta { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #91e1ff; }
#w3cKwota { font-family: 'Barlow Condensed', sans-serif; font-size: 40px; font-weight: 800; color: #fff; line-height: 1; }
#w3cUwaga { flex: 1 1 100%; font-size: 12.5px; color: rgba(226,240,255,.72); }

.w3cUpload {
  display: flex; align-items: center; gap: 16px; cursor: pointer;
  padding: 20px 22px; border-radius: 18px; margin-bottom: 16px;
  border: 2px dashed rgba(10,86,200,.32); background: rgba(255,255,255,.6);
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.w3cUpload:hover, .w3cUpload.nadPolem { border-color: #0a56c8; background: rgba(10,86,200,.07); transform: translateY(-2px); }
.w3cUpload.maPlik { border-style: solid; border-color: rgba(10,86,200,.45); }
.w3cUploadIkona {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, #0a56c8, #22adef); color: #fff; font-size: 26px; line-height: 1;
}
.w3cUploadTekst { display: flex; flex-direction: column; gap: 3px; }
.w3cUploadTekst b { color: var(--w3c-ink); font-size: 15px; }
.w3cUploadTekst small { color: #46617f; font-size: 12.5px; }
#w3cPodglad { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
#w3cPodglad img { width: 84px; height: 84px; object-fit: cover; border-radius: 14px; border: 1px solid rgba(11,31,56,.14); }
#w3cPodglad span { font-size: 13px; color: #46617f; }

.w3cPulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.w3cWycenaSekcja .primaryButton { margin-top: 20px; border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.w3cInfo { margin-top: 12px; font-size: 14px; color: #46617f; }
.w3cInfo.blad { color: #b3261e; }
.w3cInfo.sukces { color: #0f7a3d; font-size: 16px; font-weight: 700; }

@media (max-width: 620px) {
  .w3cWrap { width: calc(100% - 32px); }
  #w3cKwota { font-size: 32px; }
  .w3cTypy { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* [hidden] przegrywa z display:flex ustawionym na etykietach - trzeba wprost */
.w3cPola label[hidden], .w3cKrok[hidden], #w3cWynik[hidden], #w3cPodglad[hidden] { display: none !important; }

/* ======================================================================
   TRESC PODSTRON USLUGOWYCH (SEO, 5.08) - zakres, proces, uwagi, ceny, FAQ
   ====================================================================== */
.w3cTresc { padding-top: 56px; padding-bottom: 56px; }
.w3cTresc .w3cWrap { width: min(1120px, 100% - 48px); margin: 0 auto; }
.w3cAkapit { max-width: 760px; margin: 0 0 16px; font-size: 16px; line-height: 1.78; color: #46617f; }
.w3cAkapit a { color: #0a56c8; text-decoration: underline; text-underline-offset: 3px; }

/* proces - kroki */
.w3cKroki { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: 26px; }
.w3cKroki article {
  display: flex; gap: 14px; padding: 22px 22px 24px; border-radius: 20px;
  border: 1px solid rgba(11,31,56,.10); background: rgba(255,255,255,.78);
  box-shadow: 0 14px 32px rgba(11,31,56,.07);
}
.w3cKroki span {
  font-family: 'Barlow Condensed', sans-serif; font-size: 26px; font-weight: 800;
  line-height: 1; color: #0a56c8;
}
.w3cKroki strong { display: block; margin-bottom: 6px; color: var(--w3c-ink); font-size: 15px; }
.w3cKroki p { margin: 0; font-size: 14px; line-height: 1.62; color: #46617f; }

/* na co zwracamy uwage */
.w3cUwagiLista { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }
.w3cUwagiLista li {
  position: relative; padding: 16px 18px 16px 42px; border-radius: 16px;
  font-size: 14.5px; line-height: 1.62; color: #46617f;
  border: 1px solid rgba(11,31,56,.10); background: rgba(255,255,255,.7);
}
.w3cUwagiLista li::before {
  content: ""; position: absolute; left: 18px; top: 22px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #2f8fe6; box-shadow: 0 0 0 3px rgba(47,143,230,.16);
}
.w3cUwagiLista b { color: var(--w3c-ink); }

/* cennik na podstronie */
.w3cCennikLista { margin: 26px 0 20px; padding: 0; list-style: none; border-radius: 18px; overflow: hidden; border: 1px solid rgba(11,31,56,.10); }
.w3cCennikLista li {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 15px 20px; background: rgba(255,255,255,.72); font-size: 15px; color: #46617f;
}
.w3cCennikLista li + li { border-top: 1px solid rgba(11,31,56,.08); }
.w3cCennikLista b { color: var(--w3c-ink); font-family: 'Barlow Condensed', sans-serif; font-size: 20px; letter-spacing: .01em; white-space: nowrap; }

/* FAQ */
.w3cFaq { margin: 26px 0 20px; display: grid; gap: 10px; }
.w3cFaq details {
  border-radius: 16px; border: 1px solid rgba(11,31,56,.12);
  background: rgba(255,255,255,.78); overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.w3cFaq details[open] { border-color: rgba(10,86,200,.34); box-shadow: 0 14px 30px rgba(11,31,56,.08); }
.w3cFaq summary {
  cursor: pointer; list-style: none; padding: 17px 52px 17px 20px; position: relative;
  font-size: 15.5px; font-weight: 700; color: var(--w3c-ink);
}
.w3cFaq summary::-webkit-details-marker { display: none; }
.w3cFaq summary::after {
  content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(10,86,200,.10); color: #0a56c8; font-size: 18px; line-height: 1;
  transition: transform .25s ease, background .25s ease;
}
.w3cFaq details[open] summary::after { content: "–"; background: #0a56c8; color: #fff; }
.w3cFaq p { margin: 0; padding: 0 20px 18px; font-size: 15px; line-height: 1.72; color: #46617f; }

@media (max-width: 620px) {
  .w3cTresc .w3cWrap { width: calc(100% - 32px); }
  .w3cCennikLista li { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ======================================================================
   SUWAK PRZED / PO (5.08)
   ====================================================================== */
.w3cPPSekcja { padding-top: 62px; padding-bottom: 62px; }
.w3cPPSiatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; margin-top: 28px; }

.w3cPrzedPo {
  --pos: 50%;
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 22px;
  overflow: hidden;
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
  border: 1px solid rgba(11,31,56,.12);
  box-shadow: 0 20px 44px rgba(11,31,56,.12);
  background: #06152b;
}
.w3cPrzedPo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
/* warstwa "po" przycinana do pozycji suwaka */
.w3cPrzedPo .w3cPPPo { clip-path: inset(0 0 0 var(--pos)); }

.w3cPPUchwyt {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 2px; margin-left: -1px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 18px rgba(47,143,230,.55);
  border: 0; padding: 0;
  cursor: ew-resize;
}
.w3cPPUchwyt::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0a56c8, #22adef);
  box-shadow: 0 8px 22px rgba(10,86,200,.42), inset 0 1px 0 rgba(255,255,255,.3);
}
.w3cPPUchwyt::before {
  content: "‹ ›";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1; color: #fff; font-size: 17px; letter-spacing: 2px;
}
.w3cPPUchwyt:focus-visible { outline: none; }
.w3cPPUchwyt:focus-visible::after { box-shadow: 0 0 0 4px rgba(34,173,239,.5), 0 8px 22px rgba(10,86,200,.42); }

.w3cPPEtykieta {
  position: absolute; top: 14px;
  padding: 7px 13px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: #fff; background: rgba(6,21,43,.72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18);
  pointer-events: none;
}
.w3cPPEtykieta.przed { left: 14px; }
.w3cPPEtykieta.po { right: 14px; background: rgba(10,86,200,.75); }

.w3cPPPodpis {
  margin: 12px 2px 0;
  font-size: 14px; color: #46617f;
}
.w3cPPPodpis b { color: var(--w3c-ink); }

@media (prefers-reduced-motion: reduce) { .w3cPrzedPo { --pos: 50%; } }
@media (max-width: 620px) { .w3cPPUchwyt::after { width: 40px; height: 40px; margin: -20px 0 0 -20px; } }

/* --- strony lokalne: lista dzielnic --- */
.w3cDzielnice { display: flex; flex-wrap: wrap; gap: 9px; margin: 24px 0 0; padding: 0; list-style: none; }
.w3cDzielnice li {
  padding: 9px 16px; border-radius: 999px; font-size: 14px; color: #46617f;
  border: 1px solid rgba(11,31,56,.12); background: rgba(255,255,255,.72);
  transition: border-color .25s ease, color .25s ease, transform .25s ease;
}
.w3cDzielnice li:hover { border-color: rgba(10,86,200,.34); color: var(--w3c-ink); transform: translateY(-2px); }

/* --- mobile: lzejsze tla kafelkow (background-image nie obsluguje srcset) --- */
@media (max-width: 700px) {
  .serviceGrid .serviceCard:nth-child(1) { background-image: url("/wp-content/themes/wyprane3city/assets/tiles/02-czyszczenie-wykladzin-420w.webp"); }
  .serviceGrid .serviceCard:nth-child(2) { background-image: url("/wp-content/themes/wyprane3city/assets/tiles/03-czyszczenie-kanapy-420w.webp"); }
  .serviceGrid .serviceCard:nth-child(3) { background-image: url("/wp-content/themes/wyprane3city/assets/tiles/04-czyszczenie-materacy-420w.webp"); }
  .serviceGrid .serviceCard:nth-child(4) { background-image: url("/wp-content/themes/wyprane3city/assets/tiles/05-czyszczenie-foteli-420w.webp"); }
  .serviceGrid .serviceCard:nth-child(5) { background-image: url("/wp-content/themes/wyprane3city/assets/tiles/06-czyszczenie-krzesel-420w.webp"); }
  .serviceGrid .serviceCard:nth-child(6) { background-image: url("/wp-content/themes/wyprane3city/assets/tiles/07-tapicerka-skorzana-420w.webp"); }
  .serviceGrid .serviceCard:nth-child(7) { background-image: url("/wp-content/themes/wyprane3city/assets/tiles/08-wypozyczalnia-420w.webp"); }
}

/* --- scena 3D --- */
.w3cScenaSekcja .w3cScenaBox {
  margin-top: 26px; border-radius: 24px; overflow: hidden;
  border: 1px solid rgba(11,31,56,.12);
  background: radial-gradient(80% 100% at 50% 0%, #0d2d52 0%, #071a33 60%, #050f1f 100%);
  box-shadow: 0 24px 54px rgba(11,31,56,.18);
}
#w3cScena3d {
  position: relative; width: 100%; height: clamp(320px, 46vw, 520px);
  cursor: crosshair; touch-action: pan-y;
}
#w3cScena3d canvas { display: block; width: 100% !important; height: 100% !important; }
#w3cScena3d.w3cScenaCzysci { cursor: cell; }
#w3cScena3d.w3cScenaLaduje::after {
  content: "wczytywanie sceny…";
  position: absolute; inset: 0; display: grid; place-items: center;
  color: rgba(226,240,255,.6); font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
}
/* brak WebGL albo slaby sprzet - statyczna grafika zamiast pustego prostokata */
#w3cScena3d.w3cScenaFallback {
  background: url("/wp-content/themes/wyprane3city/assets/heroes/hero-kanapa-nd.webp") center/cover;
}
#w3cScena3d.w3cScenaFallback::after {
  content: "Twoje urządzenie nie obsługuje sceny 3D";
  position: absolute; inset: auto 0 14px 0; text-align: center;
  color: rgba(226,240,255,.72); font-size: 12.5px;
}
.w3cScenaPasek {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(5,15,31,.6);
}
.w3cScenaLicznik { color: rgba(226,240,255,.72); font-size: 14px; }
.w3cScenaLicznik b {
  color: #8fd3ff; font-family: 'Barlow Condensed', sans-serif; font-size: 22px; margin-left: 6px;
}
.w3cScenaReset {
  padding: 9px 16px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700;
  color: #dff0ff; background: rgba(47,143,230,.16); border: 1px solid rgba(143,211,255,.34);
  transition: background .25s ease, border-color .25s ease;
}
.w3cScenaReset:hover { background: rgba(47,143,230,.3); border-color: rgba(143,211,255,.6); }
.w3cScenaInfo { margin: 12px 20px 16px; font-size: 12px; color: rgba(226,240,255,.45); }

/* --- rezerwacja terminu --- */
.w3cRezKrok { margin-bottom: 26px; }
.w3cRezKrok h3 {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: var(--w3c-ink);
}
.w3cRezKrok h3 b {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #0a56c8, #22adef); color: #fff; font-size: 13px;
}
.w3cRezDni { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; }
.w3cRezDzien, .w3cRezOkno {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left;
  padding: 13px 16px; border-radius: 14px; cursor: pointer; font: inherit;
  border: 1px solid rgba(11,31,56,.14); background: rgba(255,255,255,.74);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.w3cRezDzien strong, .w3cRezOkno strong { font-size: 14.5px; color: var(--w3c-ink); }
.w3cRezDzien span, .w3cRezOkno span { font-size: 12px; color: #46617f; }
.w3cRezDzien:hover:not(:disabled), .w3cRezOkno:hover:not(:disabled) {
  transform: translateY(-2px); border-color: rgba(10,86,200,.42); box-shadow: 0 12px 26px rgba(11,31,56,.10);
}
.w3cRezDzien.wybrany, .w3cRezOkno.wybrany {
  border-color: transparent; background: linear-gradient(135deg, #0a56c8, #22adef);
  box-shadow: 0 14px 28px rgba(10,86,200,.26);
}
.w3cRezDzien.wybrany strong, .w3cRezDzien.wybrany span,
.w3cRezOkno.wybrany strong, .w3cRezOkno.wybrany span { color: #fff; }
.w3cRezDzien.zajety, .w3cRezOkno.zajety { opacity: .42; cursor: not-allowed; }
.w3cRezOkna { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.w3cRezOkna[hidden] { display: none; }
.w3cRezWybrany { margin: 0 0 16px; font-size: 15px; color: #46617f; }
.w3cRezWybrany b { color: #0a56c8; }
.w3cRezLaduje, .w3cRezBlad { grid-column: 1 / -1; margin: 0; font-size: 14px; color: #46617f; }
.w3cRezBlad a { color: #0a56c8; }
.w3cRezSekcja .primaryButton { margin-top: 18px; border: 0; cursor: pointer; font: inherit; font-weight: 700; }
[data-kroki][hidden] { display: none; }

.w3cRezPonow {
  padding: 6px 13px; margin: 0 4px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px;
  color: #0a56c8; background: rgba(10,86,200,.10); border: 1px solid rgba(10,86,200,.28);
}
.w3cRezPonow:hover { background: rgba(10,86,200,.2); }

/* --- brief cennikowy (strona wewnetrzna, nie czesc serwisu) --- */
.w3cBriefSekcja .w3cWrap { max-width: 860px; }
.w3cBriefPasek {
  position: sticky; top: 104px; z-index: 5; display: flex; align-items: center; gap: 14px;
  margin: 0 0 34px; padding: 13px 18px; border-radius: 16px;
  background: rgba(255,255,255,.97); backdrop-filter: blur(12px);
  border: 1px solid rgba(11,31,56,.10); box-shadow: 0 10px 26px rgba(11,31,56,.08);
}
.w3cBriefPasek span { font-size: 13px; font-weight: 700; color: #46617f; white-space: nowrap; }
.w3cBriefPostep { flex: 1; height: 7px; border-radius: 99px; background: rgba(11,31,56,.09); overflow: hidden; }
.w3cBriefPostep i { display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #0a56c8, #22adef); transition: width .3s ease; }
.w3cBriefBlok { margin-bottom: 42px; }
.w3cBriefBlok > h2 {
  display: flex; align-items: center; gap: 12px; margin: 0 0 22px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 26px; font-weight: 800;
  letter-spacing: .03em; text-transform: uppercase; color: var(--w3c-ink);
}
.w3cBriefBlok > h2 span {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
  background: linear-gradient(135deg, #0a56c8, #22adef); color: #fff; font-size: 16px;
}
.w3cBriefPyt {
  position: relative; scroll-margin-top: 170px; margin-bottom: 20px; padding: 20px 22px 22px; border-radius: 18px;
  background: rgba(255,255,255,.72); border: 1px solid rgba(11,31,56,.11);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.w3cBriefPyt:focus-within { border-color: rgba(10,86,200,.42); box-shadow: 0 12px 30px rgba(11,31,56,.09); }
.w3cBriefPyt.wypelniony { border-color: rgba(22,163,74,.40); background: rgba(240,253,244,.72); }
.w3cBriefPyt label { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 7px; }
.w3cBriefNr {
  flex: 0 0 auto; display: grid; place-items: center; width: 23px; height: 23px; margin-top: 1px;
  border-radius: 50%; background: rgba(11,31,56,.09); color: #46617f; font-size: 12px; font-weight: 800;
}
.w3cBriefPyt.wypelniony .w3cBriefNr { background: #16a34a; color: #fff; }
.w3cBriefTekst { font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--w3c-ink); }
.w3cBriefPodp { margin: 0 0 13px 34px; font-size: 13.5px; line-height: 1.62; color: #5a7290; }
.w3cBriefPyt input[type="text"], .w3cBriefPyt textarea {
  width: 100%; padding: 12px 15px; border-radius: 12px; font: inherit; font-size: 15px;
  color: var(--w3c-ink); background: #fff; border: 1px solid rgba(11,31,56,.16);
  resize: vertical; transition: border-color .2s ease;
}
.w3cBriefPyt input[type="text"]:focus, .w3cBriefPyt textarea:focus {
  outline: none; border-color: #0a56c8;
}
.w3cBriefStopka { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.w3cBriefStopka .primaryButton { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.w3cBriefStopka .primaryButton:disabled { opacity: .55; cursor: default; }
@media (max-width: 640px) {
  .w3cBriefPasek { top: 84px; padding: 11px 14px; }
  .w3cBriefPyt { scroll-margin-top: 145px; }
  .w3cBriefPasek span { font-size: 11.5px; }
  .w3cBriefPyt { padding: 16px 15px 18px; }
  .w3cBriefTekst { font-size: 15.5px; }
  .w3cBriefPodp { margin-left: 0; font-size: 13px; }
}

/* ===== Oferta wyprowadzona z konfiguratora (10.09.2026) ===== */
/* Lista dziedziczy ramkę po .w3cCennikLista; tu dochodzi druga linia opisu
   i kolumna stawki, których cennikowa wersja nie miała. */
.w3cOfertaLista li{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:18px; padding:16px 20px; flex-direction:row;
}
.w3cOfertaLista li > span:first-child{
  display:flex; flex-direction:column; gap:3px; min-width:0;
}
.w3cOfertaLista li > span:first-child > b{ white-space:normal }
.w3cOfertaLista small{
  display:block; color:#46617f; font-size:13.5px; line-height:1.45;
}
.w3cOfertaLista .w3cStawka{
  display:flex; flex-direction:column; align-items:flex-end; gap:3px;
  text-align:right; flex:0 0 auto;
}
.w3cOfertaLista .w3cStawka > b{ color:#0a56c8; white-space:nowrap }
.w3cOfertaLista .w3cMin{
  color:#0a56c8; font-weight:600;
}
@media (max-width:620px){
  .w3cOfertaLista li{ flex-direction:column; gap:8px; padding:14px 16px }
  .w3cOfertaLista .w3cStawka{ align-items:flex-start; text-align:left }
}

/* ===== Wideo w hero strony głównej (10.09.2026) ===== */
/* Stos warstw hero: heroArtwork -4, heroShade -3, heroGlow -2, heroNoise -1.
   Wideo idzie pod wszystkim. Jasność podniesiona, bo heroShade kładzie
   na kadrze mocny gradient — bez tego postać ginie. */
.heroVideo{
  z-index:-5; position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:62% center;
  filter:brightness(1.14) saturate(1.05) contrast(1.02);
  pointer-events:none;
}
/* Wideo pokazuje tę samą maskotkę z dyszą co grafika statyczna —
   dwie naraz to dwa psy. Plik i src zostają, chowamy tylko na home. */
.home .heroArtwork{ display:none }

/* Gradient boczny pod tekstem hero — czytelność załatwiamy TYLKO pod tekstem,
   nie przyciemnieniem całego kadru. */
.home .heroShade{
  background:
    linear-gradient(90deg, rgba(4,16,34,.92) 0%, rgba(4,17,36,.74) 26%,
                    rgba(4,17,36,.34) 52%, rgba(4,17,36,.04) 74%, rgba(4,17,36,.16) 100%),
    linear-gradient(rgba(0,0,0,0) 68%, rgba(3,14,30,.42));
}
@media (max-width:760px){
  /* na wąskim ekranie kadr zjeżdża na postać, a tekst dostaje własne tło od dołu */
  .heroVideo{ object-position:68% center }
  .home .heroShade{
    background:
      linear-gradient(rgba(4,16,34,.42) 0%, rgba(4,17,36,.28) 38%, rgba(4,17,36,.86) 100%);
  }
}
@media (prefers-reduced-motion: reduce){
  /* zatrzymany kadr zamiast ruchu; poster zostaje widoczny */
  .heroVideo{ display:none }
  .home .heroArtwork{ display:block }
}

/* Parallax za kursorem przesuwał .heroArtwork — na home jest ukryta,
   więc napis „porusz kursorem" kłamałby. Ten sam transform na wideo. */
.home .heroVideo{
  transform:scale(1.035) translate3d(var(--hero-shift-x,0),var(--hero-shift-y,0),0);
  transition:transform .18s ease-out;
}
@media (prefers-reduced-motion: reduce){
  .home .heroVideo{ transform:none }
}

/* Mobile: lead wchodził na jasny pysk psa (luminancja pod tekstem ~120).
   Pogłębiamy gradient TYLKO w pasie tekstu i zsuwamy kadr w bok,
   zamiast przyciemniać całą klatkę. */
@media (max-width:760px){
  .heroVideo{ object-position:74% center }
  .home .heroShade{
    background:
      linear-gradient(rgba(4,16,34,.34) 0%,
                      rgba(4,17,36,.78) 13%,
                      rgba(4,17,36,.80) 44%,
                      rgba(4,17,36,.40) 64%,
                      rgba(4,17,36,.30) 82%,
                      rgba(4,17,36,.66) 100%);
  }
}

/* ===== Kalkulator z nagłówkiem serwisu (10.09.2026) ===== */
/* Własny topbar kalkulatora (logo + nawigacja) dubluje teraz siteHeader — chowamy go.
   Zostaje w DOM, bo nic w kodzie konfiguratora go nie wymaga, ale i nic nie szkodzi. */
.w3cKalkStrona .topbar{ display:none }

/* Nagłówek serwisu jest jasny/szklany i był robiony na kremowe tło.
   Na ciemnym tle kalkulatora dostaje własną warstwę, żeby nie wisiał w powietrzu. */
.page-template-page-kalkulator-php .siteHeader{
  background:rgb(11 20 32/.72);
  border-bottom:1px solid rgb(168 192 216/.14);
}
/* Treść startuje pod nagłówkiem — kalkulator nie miał na to zapasu. */
.w3cKalkStrona{ padding-top:96px }
@media (max-width:900px){ .w3cKalkStrona{ padding-top:84px } }

/* Stopka serwisu jest jasna — na ciemnej stronie odcina się twardą krawędzią.
   Miękkie przejście zamiast szwu. */
.page-template-page-kalkulator-php .siteFooter{ position:relative }
.page-template-page-kalkulator-php .siteFooter::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:1px;
  background:rgb(168 192 216/.16);
}