/* ══════════════════════════════════════════════════════════
   SNW — system wizualny
   Ładowany RAZ z motywu. Strony niosą tylko markup.
   ══════════════════════════════════════════════════════════ */

:root{
  --ink:#141c26;
  --slate:#1e2a38;
  --slate-2:#25333f;
  --paper:#f4f3ef;
  --paper-2:#ffffff;
  --line:#d8d5cc;
  --line-dark:#33414f;
  --accent:#f2a71b;
  --accent-deep:#c67f0a;   /* TŁO .btn--primary:hover — ink na nim ma 5.26 */
  --accent-text:#966409;   /* TEKST na jasnym tle — 4.59 na paper, 5.09 na white */
  --text:#1a2430;
  --muted:#5c6773;
  --muted-dark:#9fb0bf;
  --nav-h:72px;
  --maxw:1160px;
  --r:14px;
  --font-display:'Archivo', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body); color:var(--text); background:var(--paper);
  line-height:1.6; font-size:17px; overflow-x:hidden;
}
section{ scroll-margin-top:calc(var(--nav-h) + 8px); }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:var(--ink); }

:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }


.eyebrow{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-text);
  display:inline-flex; align-items:center; gap:.5em;
}
.eyebrow--light{ color:var(--accent); }
.eyebrow .tick{ color:var(--accent); }

h1,h2,h3{ font-family:var(--font-display); line-height:1.04; letter-spacing:-.01em; }
.mark{
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat; background-position:0 86%;
  background-size:100% .30em; padding:0 .04em;
  /* Bez clone tło maluje się RAZ na cały span — gdy nagłówek się zawinie,
     pasek dostaje tylko pierwsza linia, a druga zostaje goła. Przy h1
     76px w kontenerze 820px łamie się już po ~17 znakach, więc każdy
     dłuższy wyróżnik trafiał na ten błąd. Clone maluje każdy wiersz osobno. */
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--font-display); font-weight:700; font-size:15.5px;
  padding:15px 26px; border-radius:10px; cursor:pointer;
  border:2px solid transparent;
  transition:transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
  line-height:1;
}
.btn--primary{ background:var(--accent); color:var(--ink); }
.btn--primary:hover{ background:var(--accent-deep); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--paper); border-color:rgba(255,255,255,.28); }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.btn--dark{ background:var(--ink); color:var(--paper); }

/* Przycisk „zobacz wszystkie” pod siatką kart albo galerią.
   Osobna klasa zamiast style="margin-top:36px" w treści: to samo powtarza się
   w każdym demie, a odstęp i wyśrodkowanie mają być wszędzie identyczne. */
.sec-cta{ margin-top:36px; text-align:center; }
.btn--dark:hover{ background:var(--slate); transform:translateY(-2px); }
.btn svg{ width:18px; height:18px; }

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:60; height:var(--nav-h);
  background:rgba(20,28,38,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-dark);
}
.nav__inner{ height:100%; display:flex; align-items:center; justify-content:space-between; }
.brand{
  display:flex; align-items:baseline; gap:.5ch; font-family:var(--font-display);
  font-weight:900; font-size:22px; letter-spacing:-.02em; color:var(--paper);
}
.brand b{ color:var(--accent); font-weight:900; }
.brand .dot{ color:var(--accent); }
.nav__links{ display:flex; align-items:center; gap:28px; }
.nav__links a{
  font-family:var(--font-mono); font-size:13px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted-dark); padding:6px 0; position:relative; transition:color .2s;
}
.nav__links a:hover,.nav__links a.active{ color:var(--paper); }
.nav__links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--accent);
}
.nav__cta{ display:flex; align-items:center; gap:14px; }
.nav__phone{ font-family:var(--font-mono); font-size:14px; color:var(--paper); white-space:nowrap; }
.nav__phone span{ color:var(--muted-dark); }
.nav .btn{ padding:11px 20px; font-size:14px; }
.burger{ display:none; background:none; border:0; cursor:pointer; padding:8px; }
.burger span{ display:block; width:24px; height:2px; background:var(--paper); margin:5px 0; transition:.25s; }

/* ---------- HERO (strona główna) ---------- */
.hero{ position:relative; background:var(--ink); color:var(--paper); overflow:hidden; padding:96px 0 84px; }
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 70% 30%, #000 40%, transparent 100%);
          mask-image:radial-gradient(ellipse 90% 70% at 70% 30%, #000 40%, transparent 100%);
  opacity:.7;
}
.hero::after{
  content:""; position:absolute; right:-8%; top:-20%; width:520px; height:520px;
  background:radial-gradient(circle, rgba(242,167,27,.18), transparent 60%); pointer-events:none;
}
.hero__inner{ position:relative; z-index:2; max-width:820px; }
.hero h1{ font-size:clamp(40px, 7vw, 76px); font-weight:900; margin:20px 0 22px; text-transform:uppercase; }
.hero p.lead{ font-size:clamp(17px,2.1vw,20px); color:var(--muted-dark); max-width:600px; margin-bottom:34px; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:44px; }
.trust{ display:flex; flex-wrap:wrap; gap:14px 32px; align-items:center; padding-top:26px; border-top:1px solid var(--line-dark); }
.trust__item{ display:flex; align-items:center; gap:9px; font-size:14.5px; color:var(--paper); }
.trust__item .num{ font-family:var(--font-display); font-weight:800; color:var(--accent); font-size:19px; }
.stars{ color:var(--accent); letter-spacing:1px; }

/* ---------- BANER PODSTRON ---------- */
.pagehead{
  position:relative; background:var(--ink); color:var(--paper);
  padding:56px 0 52px; overflow:hidden;
}
.pagehead::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 80% 100% at 80% 0%, #000 30%, transparent 100%);
          mask-image:radial-gradient(ellipse 80% 100% at 80% 0%, #000 30%, transparent 100%);
}
.pagehead__inner{ position:relative; z-index:2; }
.pagehead h1{ font-size:clamp(30px,5vw,50px); font-weight:900; text-transform:uppercase; margin-top:12px; }
.crumbs{ font-family:var(--font-mono); font-size:12.5px; color:var(--muted-dark); margin-top:14px; }
.crumbs a:hover{ color:var(--accent); }
.crumbs span{ color:var(--accent); }

/* ---------- ZDJĘCIE W TLE BANERU ---------- */
/* --baner-foto wstrzykuje motyw (snw_baner_head) tylko wtedy, gdy plik
   assets/banery/{slug}.webp istnieje. Bez niego zostaje `none` w stosie
   i baner wygląda dokładnie tak, jak przed tą sekcją: siatka + poświata.
   Musi stać PO .hero i .pagehead — tamte ustawiają `background` skrótem,
   który zeruje background-image.
   Gradient jest pierwszy w stosie, więc leży NA zdjęciu. To on trzyma kontrast.

   Wszystkie trzy liczby są wyliczone, nie dobrane na oko:

   Stop 65% — .wrap ma max-width 1160 wyśrodkowane, więc tekst kończy się ok.
   62.5% szerokości. Krycie trzyma do końca tekstu i dopiero ZA nim puszcza zdjęcie.

   .92/.86 w strefie tekstu — o progu decyduje --accent (#f2a71b: eyebrow, tick,
   separator okruszków, liczby w trust, gwiazdki), nie --paper. Paper ma tu zapas
   10.37 przy wymaganych 4.5, ale accent pada pierwszy: przy .85 ma już 4.28.
   Dlatego nie da się rozjaśnić strefy tekstu — pomarańcz na to nie pozwala.

   .10 na końcu — prawa krawędź nie osłania NICZEGO, więc krycie leci prawie do
   zera i dopiero tam zdjęcie widać. Cały efekt bierze się z tego stopu; przy .55
   baner był jednolitym błotem mimo przechodzącego kontrastu. Liczby mówiły OK,
   a wyglądało źle — dlatego trzeba na to popatrzeć, nie tylko zmierzyć.

   Zmierzone na realnym komplecie: paper 10.37, muted-dark 5.18, accent 5.66.
   Podmieniasz zdjęcia na jaśniejsze — przelicz. Nie zgaduj. */
.hero,
.pagehead{
  background-image:
    linear-gradient(100deg,
      rgba(20,28,38,.92) 0%,
      rgba(20,28,38,.86) 65%,
      rgba(20,28,38,.10) 100%),
    var(--baner-foto, none);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* ---------- SECTION SHELL ---------- */
.section{ padding:92px 0; }
.section--paper{ background:var(--paper); }
.section--white{ background:var(--paper-2); }
.section--dark{ background:var(--ink); color:var(--paper); }
.sec-head{ max-width:640px; margin-bottom:52px; }
.sec-head h2{ font-size:clamp(30px,4.4vw,46px); font-weight:800; margin-top:14px; text-transform:uppercase; }
.section--dark .sec-head h2{ color:var(--paper); }
.lede{ color:var(--muted); margin-top:14px; font-size:18px; }
.section--dark .lede{ color:var(--muted-dark); }

/* ---------- CARDS ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cards--2{ grid-template-columns:repeat(2,1fr); }
.card{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r);
  padding:30px 28px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -22px rgba(20,28,38,.5); border-color:#c9c5b9; }
.card__ico{
  width:52px; height:52px; border-radius:12px; background:var(--ink);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}

/* Karta ze zdjęciem zamiast ikonki.
   Padding schodzi z karty na .card__tresc, bo zdjęcie ma dotykać krawędzi;
   overflow:hidden przycina je do zaokrąglenia karty.

   WYSOKOŚĆ NA SZTYWNO, NIE aspect-ratio — i to jest świadome.
   Wersja z aspect-ratio:16/9 renderowała się na pionowo mimo poprawnego
   znacznika i braku konkurencyjnych reguł w arkuszu. Nie udało się ustalić
   przyczyny z kodu, a `height` + `object-fit:cover` daje 240 px zawsze:
   niezależnie od atrybutów width/height na <img>, proporcji źródła i tego,
   jak przeglądarka liczy aspect-ratio dla obrazu.

   240 px dobrane pod kartę ~357 px (wrap 1160 / 3 kolumny): zdjęcie ma
   zapowiadać usługę, nie przykrywać tekstu, po który klient tu przyszedł.
   Stała wysokość działa na wszystkich progach, bo karta zmienia szerokość
   niewiele: 357 px przy trzech kolumnach, ~370 przy dwóch, ~330 na telefonie.

   Kadr jest przycinany z góry i z dołu (źródło snw_kafel to 4:3), więc
   zdjęcia z banku muszą mieć treść na środku — mają. */
.card--foto{ padding:0; overflow:hidden; }
.card--foto img{ width:100%; height:240px; object-fit:cover; display:block; }
.card--foto .card__tresc{ padding:26px 28px 30px; }
.card__ico svg{ width:26px; height:26px; stroke:var(--accent); fill:none; stroke-width:1.7; }
.card h3{ font-size:20px; font-weight:700; margin-bottom:9px; }
.card p{ color:var(--muted); font-size:15.5px; }
.card__list{ list-style:none; margin-top:14px; }
.card__list li{
  font-size:14.5px; color:var(--muted); padding-left:18px; position:relative; margin-bottom:5px;
}
.card__list li::before{ content:"—"; position:absolute; left:0; color:var(--accent); }

/* ---------- PROCES ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.step{ border-top:2px solid var(--line-dark); padding-top:20px; }
.step__n{ font-family:var(--font-mono); font-size:13px; color:var(--accent); letter-spacing:.1em; }
.step h3{ font-size:18px; font-weight:700; margin:10px 0 8px; color:var(--paper); }
.step p{ font-size:14.5px; color:var(--muted-dark); }

/* ---------- FAQ ---------- */
.faq{ max-width:820px; }

/* Sekcja wyśrodkowana — modyfikator, nie zmiana globalna.
   Powód: .sec-head ma max-width 640, .faq ma 820, a .wrap 1160. Trzy różne
   szerokości ułożone do lewej zostawiały poszarpaną, pustą prawą stronę.

   Świadomie NIE rozszerzamy .faq na całe 1160: wiersz odpowiedzi urósłby
   z ~97 do ~140 znaków, czyli dwa razy powyżej progu, przy którym oko gubi
   początek następnej linii. Wyśrodkowanie równa krawędzie, nie ruszając
   długości wiersza.

   Wyśrodkowany jest BLOK i nagłówek — pozycje harmonijki zostają do lewej
   (.faq__q ma własne text-align:left), bo wyśrodkowane pytania w akordeonie
   są nieczytelne. */
.section--srodek .sec-head{ margin-left:auto; margin-right:auto; text-align:center; }
.section--srodek .faq{ margin-left:auto; margin-right:auto; }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--text);
  padding:24px 44px 24px 0; position:relative; line-height:1.35;
  /* Domyślny trójkącik <summary>. Samo ::-webkit-details-marker (niżej) to
     stara składnia — dzisiejszy Chrome i Firefox jej nie znają i rysowały
     ▶ obok naszego chevrona. list-style:none chowa go w obu. */
  list-style:none;
}
.faq__q::after{
  content:""; position:absolute; right:8px; top:50%; width:12px; height:12px;
  border-right:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:translateY(-70%) rotate(45deg); transition:transform .25s ease;
}
.faq__item[open] .faq__q::after{ transform:translateY(-30%) rotate(-135deg); }
.faq__q::-webkit-details-marker{ display:none; }
.faq__a{ padding:0 44px 24px 0; color:var(--muted); font-size:16px; }
.faq__a p + p{ margin-top:12px; }

/* ---------- OPINIE ---------- */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.quote{ background:var(--slate-2); border:1px solid var(--line-dark); border-radius:var(--r); padding:28px 26px; }
.quote p{ color:var(--paper); font-size:15.5px; margin:14px 0 18px; }
.quote__who{ font-family:var(--font-mono); font-size:12.5px; color:var(--muted-dark); letter-spacing:.05em; }

/* Podpis z avatarem. Kółko z inicjałem — tak samo jak robi Google, gdy autor
   nie ma zdjęcia profilowego. Zdjęcia z wizytówki NIE kopiujemy: to wizerunek
   konkretnej osoby, czyli cudze dane osobowe. Kolor liczy snw_opinie_kolor()
   z imienia, więc jest stały i różny dla różnych osób. */
.quote__kto{ display:flex; align-items:center; gap:11px; }
.quote__ava{
  width:36px; height:36px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:15px;
  color:var(--paper); line-height:1;
}

/* ---------- KONTAKT ---------- */
/* align-items:center, nie start: formularz jest dwa razy wyższy od listy
   kontaktowej, więc przy „start” lista wisiała u góry, a pod nią zostawało
   ~250 px pustki — kolumny wyglądały jak niedokończone.
   Wysokość wiersza i tak dyktuje formularz, więc centrowanie rusza wyłącznie
   lewą kolumnę. Przy ≤960 px siatka zwija się do jednej kolumny i reguła
   przestaje mieć znaczenie. */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
/* Zasięg — miejscowości jako pastylki. Świadomie tekst, nie mapka:
   obrazka Google nie przeczyta, a to są dokładnie te frazy lokalne,
   o które majster walczy w wyszukiwarce. */
.zasieg{ display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin-top:8px; }
.zasieg li{
  font-family:var(--font-mono); font-size:13.5px; letter-spacing:.04em;
  padding:9px 16px; border-radius:999px;
  border:1px solid var(--line); background:var(--paper-2); color:var(--text);
}
.section--dark .zasieg li{ border-color:var(--line-dark); background:var(--slate-2); color:var(--paper); }

.contact__list{ list-style:none; }
.contact__list li{ display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--line); }
.contact__list .k{ font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); min-width:92px; padding-top:3px; }
.contact__list .v{ font-size:16.5px; font-weight:500; }
.contact__list .v a:hover{ color:var(--accent-text); }
.contact__box{ background:var(--ink); color:var(--paper); border-radius:var(--r); padding:34px 32px; }
.contact__box h3{ font-size:22px; font-weight:800; margin-bottom:10px; text-transform:uppercase; }
.contact__box p{ color:var(--muted-dark); font-size:15.5px; margin-bottom:22px; }

/* ---------- PROZA (polityka prywatności, regulaminy) ---------- */
/* System jest zbudowany z kart i kroków — długi tekst nie miał gdzie usiąść.
   max-width 68ch: dłuższe wiersze męczą przy czytaniu akapitami. */
.prose{ max-width:68ch; }
.prose h3{
  font-size:20px; font-weight:800; text-transform:uppercase;
  margin:38px 0 12px; letter-spacing:.01em;
}
.prose h3:first-child{ margin-top:0; }
.prose p{ color:var(--muted); font-size:16px; line-height:1.7; margin-bottom:14px; }
.prose ul{ margin:0 0 16px 20px; }
.prose li{ color:var(--muted); font-size:16px; line-height:1.7; margin-bottom:7px; }
.prose a{ color:var(--accent-text); text-decoration:underline; }
.prose a:hover{ text-decoration:none; }
.prose strong{ color:var(--text); font-weight:700; }
.prose__data{
  font-family:var(--font-mono); font-size:13px; color:var(--muted);
  border-top:1px solid var(--line); padding-top:16px; margin-top:38px;
}

/* ---------- FORMULARZ ---------- */
/* Siedzi w .contact__box, czyli na --ink. Wszystkie kolory zmierzone na tym tle:
   etykiety --paper 15.45, treść zgody --muted-dark 7.71, linki i gwiazdki
   --accent 8.43, błędy #ff8a80 7.52. Pola są jasne — tekst --text na białym
   ma 15.68, a placeholder --muted 5.76.
   Błąd NIGDY nie jest sygnalizowany samym kolorem: obok czerwieni zawsze idzie
   tekst komunikatu i aria-invalid. Daltonista i czytnik ekranu dostają to samo. */
.form{ display:grid; gap:13px; }
/* Pola i zgoda to <p>, więc łapały .contact__box p{margin-bottom:22px} —
   reguła z wyższą specyficznością niż .pole, doklejająca 22px do KAŻDEGO
   pola ponad grid gap. To ona rozdymała formularz, nie odstępy.
   Ten sam poziom specyficzności (0,1,1), ale niżej w pliku, więc wygrywa.
   Odstępami rządzi wyłącznie `gap` powyżej. */
.form p{ margin:0; }
/* Imię + telefon obok siebie — krótkie wpisy nie potrzebują całej szerokości.
   Poniżej 520px (wąska kolumna albo telefon) wracają na dwa wiersze. */
.form__rzad{ display:grid; grid-template-columns:1fr 1fr; gap:13px; }
@media (max-width:520px){ .form__rzad{ grid-template-columns:1fr; } }
.pole{ display:grid; gap:5px; align-content:start; }
.pole label{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted-dark);
}
.pole input, .pole textarea{
  width:100%; padding:10px 12px; border-radius:8px;
  border:1px solid transparent; background:var(--paper-2); color:var(--text);
  font-family:var(--font-body); font-size:15px; line-height:1.4;
}
.pole textarea{ resize:vertical; min-height:78px; }
/* Firefox sam przygasza placeholder — opacity:1 przywraca zmierzony kontrast. */
.pole input::placeholder, .pole textarea::placeholder{ color:var(--muted); opacity:1; }
.pole--blad input, .pole--blad textarea{ border-color:#b3261e; border-width:2px; }
.pole__err{ color:#ff8a80; font-size:13.5px; line-height:1.4; }

.form__blad{
  background:rgba(255,138,128,.12); border:1px solid #ff8a80;
  border-radius:10px; padding:14px 16px; color:#ff8a80; font-size:14.5px;
}
.form__blad p{ color:inherit; font-size:inherit; margin:0; }
.form__blad ul{ margin:8px 0 0 18px; }
.form__blad li{ margin-top:3px; }

/* Pułapka na boty — poza ekranem, ale nie display:none: część botów pomija
   pola ukryte w ten sposób, a wtedy pułapka nic nie łapie. */
.form__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Turnstile: rezerwacja wysokości = brak skoku układu (CLS).
   Widżet „flexible" Cloudflare renderuje się ~65 px, ale ładuje się z opóźnieniem
   i bez tego pojawia się z 0 px, spychając treść. Reguła działa tylko gdy div
   istnieje (Turnstile aktywny) — przy pustych kluczach div w ogóle się nie renderuje. */
/* overflow:hidden = klucz. Widżet Turnstile ma w ZAMKNIĘTYM shadow DOM
   Cloudflare min-width:300px (nie zejdzie niżej, nie da się go stamtąd
   ostylować). Bez przycięcia te 300px wchodziły do intrinsic width formularza
   i rozpychały kartę → poziomy scroll. overflow:hidden zeruje ten wkład, więc
   karta NIE jest rozpychana, a ewentualny nadmiar jest przycięty, nie przewijany. */
.cf-turnstile{ min-height:65px; overflow:hidden; width:100%; margin:0 auto !important; }

.zgoda{ display:grid; grid-template-columns:auto 1fr; gap:6px 10px; align-items:start; margin-top:3px; }
.zgoda input{
  width:24px; height:24px; margin:0; flex:none;   /* 24px = minimalny cel dotykowy WCAG 2.2 */
  accent-color:var(--accent);
}
.zgoda label{
  font-family:var(--font-body); font-size:13.5px; letter-spacing:0;
  text-transform:none; color:var(--muted-dark); line-height:1.5;
}
.zgoda label a{ color:var(--accent); text-decoration:underline; }
.zgoda label a:hover{ text-decoration:none; }
.zgoda .pole__err{ grid-column:2; }
.zgoda--blad input{ outline:2px solid #ff8a80; outline-offset:2px; }

/* Turnstile rysuje Cloudflare w iframe — nie stylujemy środka, tylko
   rezerwujemy miejsce. min-height 65px = wysokość widżetu; bez tego
   przycisk podskakuje, gdy widżet się doładuje (CLS w Lighthouse). */
.form__turnstile{ min-height:65px; margin-top:2px; overflow:hidden; }

.form__submit{ width:100%; margin-top:4px; }

/* ---------- FOOTER ---------- */
.footer{ background:var(--ink); color:var(--muted-dark); padding:64px 0 0; }
.footer__grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:44px; }
.footer h4{ font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--paper); margin-bottom:16px; }
.footer ul{ list-style:none; }
.footer li{ margin-bottom:9px; font-size:15px; }
.footer a:hover{ color:var(--accent); }
.footer__about p{ font-size:15px; margin:14px 0 0; max-width:340px; }
.footer__bot{
  border-top:1px solid var(--line-dark); padding:22px 0; display:flex;
  justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:12.5px;
}

/* Tryb budowy: stopka traci siatkę, więc 64px górnego oddechu zostaje bez
   treści, którą miało oddzielać. Ścinamy do 28px.
   Kreska ZOSTAJE — hero i stopka to ten sam --ink, więc bez niej copyright
   wtapia się w baner zamiast wyglądać na stopkę. */
.footer--budowa{ padding-top:28px; }

/* Numer telefonu jako przycisk w belce (dema). Ikonka skaluje się z tekstem,
   więc przycisk zostaje spójny z resztą .btn niezależnie od długości numeru. */
.nav__tel svg{ width:1.05em; height:1.05em; stroke:currentColor; fill:none; stroke-width:1.8; flex:0 0 auto; }
.nav__tel{ white-space:nowrap; font-variant-numeric:tabular-nums; }

/* Słuchawka dzwoni: dwie sekundy spokoju, krótki dzwonek, znowu spokój.
   Cykl jest długi celowo — ikonka trzęsąca się bez przerwy czyta się jak
   usterka, nie jak zaproszenie, i po chwili przestaje się ją widzieć.
   Wychylenia wygasają (14° → 3°), bo dzwonek wybrzmiewa, a nie urywa się.
   transform-origin w środku: słuchawka ma drgać, a nie obracać się wokół rogu.
   Nie rusza układu — svg ma flex:0 0 auto, więc scale nie odpycha numeru.
   Kto ma włączone „ogranicz ruch”, nie zobaczy nic: regułę gasi globalne
   @media (prefers-reduced-motion:reduce) na dole pliku. */
@keyframes snw-dzwoni{
  0%, 58%, 100% { transform:rotate(0) scale(1); }
  60% { transform:rotate(-14deg) scale(1.06); }
  63% { transform:rotate(12deg)  scale(1.06); }
  66% { transform:rotate(-10deg) scale(1.05); }
  69% { transform:rotate(9deg)   scale(1.04); }
  72% { transform:rotate(-6deg)  scale(1.03); }
  75% { transform:rotate(5deg)   scale(1.02); }
  78% { transform:rotate(-3deg)  scale(1.01); }
  81% { transform:rotate(0)      scale(1); }
}
.nav__tel svg{ transform-origin:center; animation:snw-dzwoni 3s ease-in-out infinite; }
/* Kursor na przycisku = użytkownik już go znalazł. Dzwonienie dalej byłoby
   naganianiem kogoś, kto właśnie klika. */
.nav__tel:hover svg,
.nav__tel:focus-visible svg{ animation-play-state:paused; }

/* ---------- PRZYCISK „DARMOWA WYCENA” + OKNO (dema) ---------- */

.snw-wycena{
  position:fixed; right:22px; bottom:22px; z-index:80;
  display:inline-flex; align-items:center;
  font-family:var(--font-display); font-weight:700; font-size:15px;
  padding:14px 22px; border:0; border-radius:999px; cursor:pointer;
  background:var(--accent); color:var(--ink);
  box-shadow:0 12px 30px -8px rgba(20,28,38,.55);
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.snw-wycena:hover{ background:var(--accent-deep); transform:translateY(-2px); box-shadow:0 16px 36px -8px rgba(20,28,38,.65); }
.snw-wycena:focus-visible{ outline:3px solid var(--paper); outline-offset:3px; }
/* .snw-wycena jest teraz <a> (przewija do #formularz). Motywy dem mają
   body.motyw-X a{color:var(--accent)} — przejmowało to kolor tekstu przycisku
   (tekst w kolorze tła → niewidoczny). Ta reguła ma wyższą specyficzność niż „a",
   więc wraca ciemny tekst; fiolet ma własny biały (jeszcze wyżej, wygrywa). */
[class*="motyw-"] .snw-wycena{ color:var(--ink); }
/* Kotwica „Darmowa wycena" celuje w sam formularz — scroll-margin, żeby
   przyklejona belka dema nie zasłoniła pierwszego pola. */
.form{ scroll-margin-top:96px; }

.snw-okno[hidden]{ display:none; }
.snw-okno{ position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; padding:20px; }
.snw-okno__tlo{ position:absolute; inset:0; background:rgba(10,14,20,.72); backdrop-filter:blur(3px); }

.snw-okno__box{
  position:relative; z-index:1; width:100%; max-width:520px;
  max-height:calc(100vh - 40px); overflow-y:auto;
  background:var(--ink); color:var(--paper);
  border-radius:var(--r); padding:32px 30px;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.7);
}
.snw-okno__x{
  position:absolute; top:10px; right:12px; z-index:2;
  background:none; border:0; cursor:pointer; line-height:1;
  font-size:30px; color:var(--muted-dark); padding:6px 10px; border-radius:8px;
}
.snw-okno__x:hover{ color:var(--paper); }
.snw-okno__x:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.snw-okno__tyt{ font-size:26px; font-weight:900; text-transform:uppercase; padding-right:34px; }
.snw-okno__lede{ color:var(--muted-dark); font-size:15.5px; margin:8px 0 20px; }

/* Formularz stoi już na ciemnym boksie (.contact__box), więc w oknie
   nie potrzebuje własnego tła — dubel wyglądałby jak ramka w ramce. */

/* Na telefonie menu zwija się do burgera, a .nav__phone znika zupełnie —
   przypięty przycisk zostaje jedyną drogą do kontaktu bez przewijania
   na sam dół. Zmniejszamy go, ale etykieta zostaje: samą ikonę trzeba
   zgadywać. */
@media (max-width:760px){
  .snw-wycena{ right:14px; bottom:14px; padding:12px 16px; font-size:14px; }
  .snw-okno{ padding:12px; }
  .snw-okno__box{ padding:26px 20px; max-height:calc(100vh - 24px); }
  .snw-okno__tyt{ font-size:22px; }
  /* Wiadomość na jedną linię: w oknie „Darmowa wycena" na mobilce nie ma miejsca
     na 3 rzędy (bazowe min-height:78px). resize:vertical zostaje, więc można
     rozciągnąć w razie potrzeby. Tylko w popupie — formularz na stronie ma miejsce. */
  .snw-okno .pole textarea{ min-height:0; height:44px; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:960px){
  .cards, .quotes{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .contact{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  .nav__links{
    position:fixed; inset:var(--nav-h) 0 auto 0; background:var(--ink);
    flex-direction:column; align-items:flex-start; gap:0; padding:8px 24px 20px;
    border-bottom:1px solid var(--line-dark); display:none;
  }
  .nav__links.open{ display:flex; }
  .nav__links a{ padding:14px 0; width:100%; font-size:14px; }
  .nav__links a.active::after{ display:none; }
  .burger{ display:block; }
  .nav__phone{ display:none; }
  .cards, .quotes, .steps{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .section{ padding:64px 0; }
  .hero{ padding:64px 0 56px; }
  /* Tekst zajmuje tu całą szerokość, więc gradient z jasną prawą stroną
     przestaje go osłaniać — kryjemy równomiernie.
     Zmierzone na realnym komplecie: --muted-dark min 5.74. */
  .hero, .pagehead{
    background-image:
      linear-gradient(rgba(20,28,38,.91), rgba(20,28,38,.89)),
      var(--baner-foto, none);
  }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ---------- SKIP LINK ---------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:var(--ink); padding:12px 20px;
  font-family:var(--font-display); font-weight:700; border-radius:0 0 8px 0;
}
.skip:focus{ left:0; }

/* ═══════════════════════════════════════════════════════════════
   WARIANT REDAKCYJNY — body.motyw-redakcja
   Krem + szeryf + terakota. Inny szkielet, nie tylko kolor.
   Cały blok jest scopowany pod klasą, więc NIE rusza pozostałych dem.

   Terakota to TRZY role, bo jeden ton nie zda wszystkich progów naraz:
     --accent      #c15f3c  duże słowo w h1 (WCAG large, 3.0 na kremie: 3.50)
     --accent-text #a84525  drobny tekst: eyebrow, gwiazdki, linki (4.5: 4.90)
     --accent-deep #a84525  tło przycisku, biały tekst (4.5: 5.93)
   Szeryf to Georgia — font SYSTEMOWY, zero pobierania, zero obcej domeny.
   ═══════════════════════════════════════════════════════════════ */

body.motyw-redakcja{
  --paper:#efe9dd;      /* tło sekcji jasnej — ciepły krem */
  --paper-2:#f6f2e9;    /* tło kart */
  --ink:#2b2420;        /* espresso: stopka, box formularza */
  --text:#2a2320;
  --muted:#6b5f54;      /* tekst drugorzędny na kremie (7.03 na paper) */
  --muted-dark:#c3b6a5; /* tekst drugorzędny na espresso (7.2) */
  --line:#ddd3c4;
  --line-dark:#4a3f37;
  --accent:#c15f3c;
  --accent-text:#a84525;
  --accent-deep:#a84525;
  --font-display:Georgia,'Times New Roman',Times,serif;
}

/* Nagłówki: szeryf, bez wersalików, mniejsza waga — redakcyjnie, nie industrialnie */
body.motyw-redakcja .h1,
body.motyw-redakcja .hero h1,
body.motyw-redakcja .sec-head h2,
body.motyw-redakcja .card h3,
body.motyw-redakcja .quote p{ text-transform:none; }
body.motyw-redakcja .sec-head h2{ font-weight:700; letter-spacing:-.01em; }
body.motyw-redakcja .hero h1{ font-weight:700; letter-spacing:-.015em; }
/* Wyróżnik w h1 to kolorowa kursywa, nie żółty pasek */
body.motyw-redakcja .mark{ background:none; padding:0; color:var(--accent); font-style:italic; }

/* HERO: dwie kolumny W GRIDZIE — tekst z lewej, zdjęcie z prawej.
   Zdjęcie jest ELEMENTEM siatki (.hero__foto), nie tłem doklejonym do hero,
   więc mieści się w kontenerze .wrap i nie rozlewa do krawędzi ekranu.
   Bazowe pseudo-elementy (siatka + poświata) gasimy oba. */
body.motyw-redakcja .hero{ background:var(--paper); color:var(--text); padding:80px 0 64px; }
body.motyw-redakcja .hero::before,
body.motyw-redakcja .hero::after{ display:none; }
body.motyw-redakcja .hero__inner{
  max-width:var(--maxw); display:grid; grid-template-columns:1fr 1fr;
  gap:56px; align-items:center;
}
body.motyw-redakcja .hero__txt{ max-width:560px; }
body.motyw-redakcja .hero__foto{
  aspect-ratio:4/5; border:1px solid var(--line); border-radius:8px;
  background:var(--baner-foto,var(--paper-2)) center/cover no-repeat;
}
body.motyw-redakcja .hero .lead{ color:var(--muted); margin-bottom:32px; }
body.motyw-redakcja .hero .eyebrow{ color:var(--accent-text); }
@media(max-width:820px){
  body.motyw-redakcja .hero__inner{ grid-template-columns:1fr; gap:32px; }
  body.motyw-redakcja .hero__foto{ aspect-ratio:16/10; }
}

/* Nagłówek sekcji: dwie kolumny — tytuł z lewej, lede z prawej.
   Działa tylko, gdy sekcja MA lede; bez niego tytuł zostaje w lewej kolumnie,
   prawa pusta — nieszkodliwie. */
@media(min-width:820px){
  body.motyw-redakcja .sec-head{
    max-width:none; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end;
  }
  body.motyw-redakcja .sec-head .lede{ margin:0; }
  /* FAQ ma własny układ dwukolumnowy niżej — tam sec-head wraca do bloku */
  body.motyw-redakcja #faq .sec-head{ display:block; }
}

/* Ciemne sekcje w tym wariancie NIE istnieją — krem wszędzie poza stopką i boxem */
body.motyw-redakcja .section--dark{ background:var(--paper); color:var(--text); }
body.motyw-redakcja .section--dark .sec-head h2,
body.motyw-redakcja .section--dark .lede,
body.motyw-redakcja .section--dark .eyebrow--light{ color:inherit; }
body.motyw-redakcja .section--dark .eyebrow--light{ color:var(--accent-text); }
body.motyw-redakcja .section--dark .lede{ color:var(--muted); }

/* Opinie: kremowe karty zamiast ciemnych */
body.motyw-redakcja .quote{ background:var(--paper-2); border:1px solid var(--line); }
body.motyw-redakcja .quote p{ color:var(--text); }
body.motyw-redakcja .quote__who{ color:var(--muted); }

/* Karty: cieńsza kreska, mniej cienia, szeryfowy nagłówek */
body.motyw-redakcja .card{ border-radius:6px; }
body.motyw-redakcja .card--foto{ border-radius:6px; }
body.motyw-redakcja .card:hover{ transform:none; box-shadow:0 10px 30px -20px rgba(43,36,32,.5); }

/* Przyciski: prostokątne, bez zaokrągleń-baniek */
body.motyw-redakcja .btn{ border-radius:4px; font-family:var(--font-display); font-weight:700; }
body.motyw-redakcja .btn--primary{ background:var(--accent-deep); color:#fff; }
body.motyw-redakcja .btn--primary:hover{ background:var(--accent-text); }

/* Pastylki i box kontaktu — drobne dopasowania do kremu */
body.motyw-redakcja .zasieg li{ border-radius:4px; }
body.motyw-redakcja .contact__box{ border-radius:8px; }
body.motyw-redakcja .snw-wycena{ border-radius:4px; font-family:var(--font-display); }

/* FAQ: dwie kolumny — nagłówek z lewej, harmonijka z prawej */
@media(min-width:820px){
  body.motyw-redakcja #faq .wrap{ display:grid; grid-template-columns:1fr 1.4fr; gap:56px; align-items:start; }
  body.motyw-redakcja #faq .sec-head{ display:block; max-width:none; margin:0; }
  body.motyw-redakcja #faq .faq{ max-width:none; }
}

/* Redakcja: sekcja „O mnie" ze zdjęciem z boku (sygnatura tego wyglądu).
   Zdjęcie po lewej, tekst po prawej; na wąskim ekranie jedno pod drugim. */
body.motyw-redakcja .oside{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
body.motyw-redakcja .oside__foto{ aspect-ratio:4/5; background-size:cover; background-position:center; border-radius:8px; border:1px solid var(--line); }
body.motyw-redakcja .oside__tekst h2{ font-family:var(--font-display); font-weight:700; font-size:clamp(28px,3.4vw,40px); margin-top:14px; }
body.motyw-redakcja .oside__tekst h3{ font-family:var(--font-display); font-size:20px; margin-bottom:10px; }
body.motyw-redakcja .oside__tekst p{ color:var(--muted); font-size:15.5px; margin-bottom:18px; }
body.motyw-redakcja .oside__lead{ font-size:18px; margin:14px 0 24px; }
@media(max-width:820px){ body.motyw-redakcja .oside{ grid-template-columns:1fr; } body.motyw-redakcja .oside__foto{ aspect-ratio:16/9; } }

/* Redakcja — dopięcia spójności (nav, przycisk-widmo, hero na mobile) */

/* Nawigacja: kremowa, nie granatowa — inaczej ciemny pasek nad jasną stroną */
body.motyw-redakcja .nav{ background:rgba(239,233,221,.9); border-bottom:1px solid var(--line); }
body.motyw-redakcja .brand{ color:var(--text); font-family:var(--font-display); }
body.motyw-redakcja .brand .dot{ color:var(--accent); }
body.motyw-redakcja .nav__links a{ color:var(--muted); }
body.motyw-redakcja .nav__links a:hover,
body.motyw-redakcja .nav__links a.active{ color:var(--text); }
body.motyw-redakcja .nav__phone{ color:var(--text); }
body.motyw-redakcja .nav__phone span{ color:var(--muted); }
body.motyw-redakcja .burger span{ background:var(--text); }

/* Przycisk-widmo: na kremie biały tekst znika — dajemy ciemny */
body.motyw-redakcja .btn--ghost{ color:var(--text); border-color:var(--line); }
body.motyw-redakcja .btn--ghost:hover{ border-color:var(--accent-text); color:var(--accent-text); }



/* ═══════════════════════════════════════════════════════════════
   WARIANT GRAFIT (bento) — body.motyw-grafit
   Kompletny układ z Claude Design (plik warianty/wariant3.html).
   Font Sora zhostowany lokalnie (assets/fonts-sora/), zero obcej domeny.
   CSS w całości scopowany pod body.motyw-grafit — nie rusza innych dem.
   Ten wariant NIESIE WŁASNĄ nawigację i stopkę: motyw wygasza swoją powłokę
   dla dem z tym wyglądem (snw_klient_layout_wlasny()).
   ═══════════════════════════════════════════════════════════════ */

/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(/wp-content/themes/snw-blank/assets/fonts-sora/sora-f9e5e339.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(/wp-content/themes/snw-blank/assets/fonts-sora/sora-4fa0aa0c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(/wp-content/themes/snw-blank/assets/fonts-sora/sora-f9e5e339.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(/wp-content/themes/snw-blank/assets/fonts-sora/sora-4fa0aa0c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(/wp-content/themes/snw-blank/assets/fonts-sora/sora-f9e5e339.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(/wp-content/themes/snw-blank/assets/fonts-sora/sora-4fa0aa0c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(/wp-content/themes/snw-blank/assets/fonts-sora/sora-f9e5e339.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(/wp-content/themes/snw-blank/assets/fonts-sora/sora-4fa0aa0c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 800;
  font-display: optional;
  src: url(/wp-content/themes/snw-blank/assets/fonts-sora/sora-f9e5e339.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 800;
  font-display: optional;
  src: url(/wp-content/themes/snw-blank/assets/fonts-sora/sora-4fa0aa0c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body.motyw-grafit{--bg:#0B0C0B;
    --card:#141613;
    --card-2:#111310;
    --border:rgba(255,255,255,0.08);
    --border-strong:rgba(255,255,255,0.12);
    --text:#F2F3EE;
    --muted:#9EA29A;
    --muted-2:#A9ADA3;
    --accent:#C6F24E;
    --accent-hi:#D6FB77;
    --accent-deep:#D6FB77;
    --maxw:1200px;}
body.motyw-grafit *{box-sizing:border-box;}
body.motyw-grafit{scroll-behavior:smooth;}
body.motyw-grafit{margin:0;padding:0;
    background:radial-gradient(1200px 640px at 72% -8%, rgba(198,242,78,0.12), transparent 60%), var(--bg);
    color:var(--text);
    font-family:'Sora',system-ui,-apple-system,sans-serif;
    -webkit-font-smoothing:antialiased;}
body.motyw-grafit a{color:var(--accent);text-decoration:none;}
body.motyw-grafit a:hover{color:var(--accent-hi);}
body.motyw-grafit ::selection{background:var(--accent);color:var(--bg);}
body.motyw-grafit img{max-width:100%;display:block;}
body.motyw-grafit .wrap{max-width:var(--maxw);margin:0 auto;padding-left:24px;padding-right:24px;}
body.motyw-grafit .ph{position:relative;background:repeating-linear-gradient(135deg,#191B18 0 14px,#15170F 14px 28px);border:1px solid var(--border);}
body.motyw-grafit .ph span{position:absolute;left:20px;bottom:16px;font-size:12px;color:#6E7268;}
body.motyw-grafit .eyebrow{font-size:13px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;}
body.motyw-grafit .sec-head{font-weight:800;line-height:1;letter-spacing:-0.03em;margin:0;color:var(--text);font-size:clamp(38px,5vw,64px);}
body.motyw-grafit .lead{font-size:18px;line-height:1.55;color:var(--muted-2);margin:0;text-wrap:pretty;}
body.motyw-grafit .btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px;padding:16px 28px;border-radius:100px;cursor:pointer;border:none;transition:background .2s ease,color .2s ease,border-color .2s ease;}
body.motyw-grafit .btn-accent{background:var(--accent);color:var(--bg);}
body.motyw-grafit .btn-accent:hover{background:var(--accent-hi);color:var(--bg);}
body.motyw-grafit .btn-ghost{color:var(--text);border:1px solid rgba(255,255,255,0.2);background:transparent;}
body.motyw-grafit .btn-ghost:hover{border-color:var(--text);background:rgba(255,255,255,0.04);color:var(--text);}
body.motyw-grafit .btn-sm{padding:13px 24px;font-size:15px;}
body.motyw-grafit .btn-outline{display:inline-flex;align-items:center;gap:9px;color:var(--text);font-weight:600;font-size:15px;padding:13px 24px;border-radius:100px;border:1px solid rgba(255,255,255,0.2);}
body.motyw-grafit .btn-outline:hover{border-color:var(--accent);color:var(--accent);}
body.motyw-grafit header.site{position:sticky;top:18px;z-index:50;padding:0 24px;}
body.motyw-grafit .nav{max-width:var(--maxw);margin:0 auto;padding:12px 14px 12px 26px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:rgba(22,24,20,0.72);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.09);border-radius:100px;}
body.motyw-grafit .logo{font-weight:800;font-size:22px;letter-spacing:-0.02em;color:var(--text);display:flex;align-items:center;gap:6px;}
body.motyw-grafit .dot{width:7px;height:7px;background:var(--accent);border-radius:100px;display:inline-block;box-shadow:0 0 10px var(--accent);}
body.motyw-grafit .nav-links{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:500;}
body.motyw-grafit .nav-links a{color:#B9BDB2;}
body.motyw-grafit .nav-links a:hover{color:var(--text);}
body.motyw-grafit .pill{display:inline-flex;align-items:center;gap:10px;background:rgba(198,242,78,0.1);border:1px solid rgba(198,242,78,0.3);color:var(--accent);font-size:13px;font-weight:500;padding:8px 16px;border-radius:100px;}
body.motyw-grafit .pill i{width:6px;height:6px;background:var(--accent);border-radius:100px;display:inline-block;}
body.motyw-grafit .hero-h1{font-weight:800;font-size:clamp(46px,7vw,96px);line-height:0.98;letter-spacing:-0.035em;margin:0;max-width:960px;}
body.motyw-grafit .hero-h1 .hl{color:var(--accent);}
body.motyw-grafit .hero-row{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:end;margin-top:34px;}
body.motyw-grafit .hero-row .lead{font-size:20px;max-width:560px;}
body.motyw-grafit .hero-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end;}
body.motyw-grafit .bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;gap:16px;margin-top:44px;}
body.motyw-grafit .tile{border-radius:26px;overflow:hidden;}
body.motyw-grafit .tile.card{background:var(--card);border:1px solid var(--border);padding:26px 28px;display:flex;flex-direction:column;justify-content:center;}
body.motyw-grafit .tile.span2{grid-column:span 2;}
body.motyw-grafit .tile.big{grid-column:span 2;grid-row:span 2;}
body.motyw-grafit .stat-num{font-weight:800;letter-spacing:-0.03em;line-height:1;color:var(--text);}
body.motyw-grafit .stat-lbl{font-size:14px;color:var(--muted);margin-top:8px;}
body.motyw-grafit .tile.accent{background:var(--accent);color:var(--bg);padding:24px;display:flex;flex-direction:column;justify-content:center;border-radius:26px;}
body.motyw-grafit .tile.accent .stat-num{color:var(--bg);font-size:40px;}
body.motyw-grafit .tile.accent .stat-lbl{color:var(--bg);font-weight:600;font-size:13px;}
body.motyw-grafit section{padding-top:0;}
body.motyw-grafit .pt96{padding-top:96px;}
body.motyw-grafit .pb96{padding-bottom:96px;}
body.motyw-grafit .head-flex{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:44px;}
body.motyw-grafit .head-flex .lead{max-width:440px;}
body.motyw-grafit .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
body.motyw-grafit .svc{background:var(--card);border:1px solid var(--border);border-radius:26px;overflow:hidden;transition:transform .25s ease,border-color .25s ease;}
body.motyw-grafit .svc:hover{transform:translateY(-6px);border-color:rgba(198,242,78,0.4);}
body.motyw-grafit .svc .ph{aspect-ratio:16/10;border:none;}
body.motyw-grafit .svc-body{padding:26px 26px 30px;}
body.motyw-grafit .svc-idx{font-size:13px;font-weight:600;color:var(--accent);margin-bottom:12px;}
body.motyw-grafit .svc h3{font-weight:700;font-size:23px;letter-spacing:-0.02em;margin:0 0 12px;color:var(--text);}
body.motyw-grafit .svc p{font-size:15px;line-height:1.6;color:var(--muted);margin:0;text-wrap:pretty;}
body.motyw-grafit .gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:16px;}
body.motyw-grafit .gallery .ph{border-radius:26px;}
body.motyw-grafit .g-big{grid-column:span 2;grid-row:span 2;}
body.motyw-grafit .g-wide{grid-column:span 2;}
body.motyw-grafit .about{display:grid;grid-template-columns:0.85fr 1.15fr;gap:44px;align-items:stretch;}
body.motyw-grafit .about .ph{border-radius:28px;min-height:420px;}
body.motyw-grafit .about-txt{display:flex;flex-direction:column;justify-content:center;}
body.motyw-grafit .about-txt h2{font-weight:800;font-size:clamp(40px,5.5vw,72px);line-height:0.98;letter-spacing:-0.035em;margin:0 0 18px;}
body.motyw-grafit .about-txt .lead{font-size:21px;max-width:540px;margin-bottom:34px;}
body.motyw-grafit .about-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
body.motyw-grafit .mini{background:var(--card);border:1px solid var(--border);border-radius:22px;padding:26px;}
body.motyw-grafit .mini h3{font-weight:700;font-size:17px;margin:0 0 12px;color:var(--text);}
body.motyw-grafit .mini p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0;text-wrap:pretty;}
body.motyw-grafit .panel{background:var(--card-2);border:1px solid var(--border);border-radius:30px;padding:48px 44px;}
body.motyw-grafit .rejon{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:center;}
body.motyw-grafit .rejon h2{font-weight:800;font-size:clamp(34px,4.4vw,56px);line-height:1;letter-spacing:-0.03em;margin:0 0 18px;}
body.motyw-grafit .rejon .lead{font-size:17px;max-width:440px;}
body.motyw-grafit .chips{display:flex;flex-wrap:wrap;gap:12px;}
body.motyw-grafit .chip{font-size:14px;font-weight:500;color:#E7EAE0;background:rgba(255,255,255,0.05);border:1px solid var(--border-strong);border-radius:100px;padding:12px 20px;}
body.motyw-grafit .review{margin:0;background:var(--card);border:1px solid var(--border);border-radius:26px;padding:30px 28px;display:flex;flex-direction:column;}
body.motyw-grafit .stars{color:var(--accent);letter-spacing:2px;font-size:15px;margin-bottom:18px;}
body.motyw-grafit .review blockquote{font-size:18px;line-height:1.5;color:#EDEFE8;margin:0 0 26px;flex:1;text-wrap:pretty;}
body.motyw-grafit .review figcaption{display:flex;align-items:center;gap:12px;border-top:1px solid var(--border);padding-top:18px;}
body.motyw-grafit .avatar{width:38px;height:38px;border-radius:100px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex:none;}
body.motyw-grafit .review figcaption span:last-child{font-size:13px;color:var(--muted);}
body.motyw-grafit .faq{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:start;max-width:none;}
body.motyw-grafit .faq-list{display:flex;flex-direction:column;gap:12px;}
body.motyw-grafit .faq-item{background:var(--card);border:1px solid var(--border);border-radius:20px;overflow:hidden;}
body.motyw-grafit .faq-q{width:100%;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 26px;text-align:left;font-family:inherit;font-weight:600;font-size:19px;color:var(--text);}
body.motyw-grafit .faq-q .plus{font-size:24px;color:var(--accent);transition:transform .25s ease;line-height:1;}
body.motyw-grafit .faq-item.open .faq-q .plus{transform:rotate(45deg);}
body.motyw-grafit .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
body.motyw-grafit .faq-item.open .faq-a{max-height:320px;}
body.motyw-grafit .faq-a p{font-size:15.5px;line-height:1.65;color:var(--muted);margin:0;padding:0 26px 24px;text-wrap:pretty;}
body.motyw-grafit .contact-panel{background:linear-gradient(180deg,#131510,#0F110D);border:1px solid var(--border);border-radius:32px;padding:56px 48px;}
body.motyw-grafit .contact{display:grid;grid-template-columns:0.95fr 1.05fr;gap:52px;align-items:center;}
body.motyw-grafit .contact h2{font-weight:800;font-size:clamp(36px,4.6vw,58px);line-height:1;letter-spacing:-0.03em;margin:0 0 18px;}
body.motyw-grafit .contact .lead{font-size:18px;max-width:420px;margin-bottom:40px;}
body.motyw-grafit .info{display:flex;flex-direction:column;gap:14px;}
body.motyw-grafit .info-row{display:flex;align-items:center;gap:16px;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:16px;padding:16px 20px;}
body.motyw-grafit .info-row.top{align-items:flex-start;}
body.motyw-grafit .info-row .k{font-size:12px;color:var(--muted);width:64px;flex:none;}
body.motyw-grafit .info-row.top .k{padding-top:2px;}
body.motyw-grafit .info-row .v{font-weight:700;font-size:18px;color:var(--text);}
body.motyw-grafit .info-row .v.sm{font-size:16px;word-break:break-all;}
body.motyw-grafit .info-row .v.reg{font-weight:400;font-size:14.5px;line-height:1.5;color:#D6D9CF;}
body.motyw-grafit form.card{background:var(--bg);border:1px solid var(--border);border-radius:24px;padding:34px 32px;}
body.motyw-grafit .frow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
body.motyw-grafit .field{margin-bottom:16px;}
body.motyw-grafit .field label,body.motyw-grafit .frow label{display:block;font-size:12px;color:var(--muted);margin-bottom:8px;}
body.motyw-grafit .field input,body.motyw-grafit .field textarea,body.motyw-grafit .frow input{width:100%;background:var(--card);border:1px solid var(--border-strong);border-radius:12px;padding:13px 15px;font-family:inherit;font-size:15px;color:var(--text);}
body.motyw-grafit .field textarea{resize:vertical;}
body.motyw-grafit .field input:focus,body.motyw-grafit .field textarea:focus,body.motyw-grafit .frow input:focus{border-color:var(--accent);outline:none;}
body.motyw-grafit .consent{display:flex;gap:12px;align-items:flex-start;margin-bottom:20px;cursor:pointer;}
body.motyw-grafit .consent input{margin-top:3px;width:16px;height:16px;accent-color:var(--accent);flex:none;}
body.motyw-grafit .consent span{font-size:13px;line-height:1.5;color:var(--muted);}
body.motyw-grafit .consent a{text-decoration:underline;}
body.motyw-grafit form.card .btn-accent{width:100%;justify-content:center;padding:16px;font-size:16px;}
body.motyw-grafit footer.site{border-top:1px solid var(--border);}
body.motyw-grafit .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-top:60px;}
body.motyw-grafit .foot-brand p{font-size:14.5px;line-height:1.65;color:#8B8F85;margin:0;max-width:320px;text-wrap:pretty;}
body.motyw-grafit .foot-col h3{font-size:12px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent);margin:0 0 20px;}
body.motyw-grafit .foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:15px;}
body.motyw-grafit .foot-col a{color:#C2C6BC;}
body.motyw-grafit .foot-col a:hover{color:var(--text);}
body.motyw-grafit .foot-bottom{margin-top:52px;border-top:1px solid var(--border);padding:22px 0 36px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;}
body.motyw-grafit .foot-bottom .cr{font-size:13px;color:#7C8076;}
body.motyw-grafit .foot-bottom .r{display:flex;align-items:center;gap:26px;}
body.motyw-grafit .foot-bottom .r a:first-child{font-size:13px;color:#B9BDB2;}
@media (max-width:900px){body.motyw-grafit .nav-links{display:none;}
body.motyw-grafit .hero-row,body.motyw-grafit .about,body.motyw-grafit .rejon,body.motyw-grafit .contact,body.motyw-grafit .faq{grid-template-columns:1fr;}
body.motyw-grafit .hero-cta{justify-content:flex-start;}
body.motyw-grafit .bento{grid-template-columns:repeat(2,1fr);}
body.motyw-grafit .grid-3{grid-template-columns:1fr;}
body.motyw-grafit .gallery{grid-template-columns:repeat(2,1fr);}
body.motyw-grafit .g-big{grid-row:span 1;}
body.motyw-grafit .about-cards{grid-template-columns:1fr;}
body.motyw-grafit .foot-grid{grid-template-columns:1fr 1fr;}
body.motyw-grafit .contact-panel,body.motyw-grafit .panel{padding:36px 24px;}}
@media (max-width:560px){body.motyw-grafit .frow{grid-template-columns:1fr;}
body.motyw-grafit .foot-grid{grid-template-columns:1fr;}
body.motyw-grafit .bento{grid-template-columns:1fr;}
/* 1 kolumna: kafle .span2/.big muszą przestać rozpychać się na 2 kolumny —
   inaczej trafiają w kolumnę implicit, nachodzą na siebie i wychodzą poza ekran
   (zielony „deweloperka" był ucięty). .big zostaje na 2 rzędach = wyższe zdjęcie. */
body.motyw-grafit .tile.span2,
body.motyw-grafit .tile.big{grid-column:auto;}
/* Hero na telefonie: nagłówek mniejszy (clamp klamrował się do 46px i
   „wielkoformatowy." wychodził poza ekran) + całość hero wyśrodkowana.
   #top centrujemy, ale bento przywracamy do lewej — kafle statystyk mają
   tekst przy lewej i tak ma zostać. */
body.motyw-grafit .hero-h1{font-size:clamp(28px,8.2vw,42px);}
body.motyw-grafit #top{text-align:center;}
body.motyw-grafit #top .bento{text-align:left;}
body.motyw-grafit .hero-cta{justify-content:center;}
/* Cały demo na telefonie: nagłówki sekcji, leady, chipy i przyciski
   „Zobacz wszystkie" wyśrodkowane. Karty (usługi, opinie, FAQ), wiersze
   kontaktu i formularz zostają z tekstem do lewej — wyśrodkowane akapity
   w kartach czytają się gorzej. */
body.motyw-grafit .eyebrow,
body.motyw-grafit .sec-head,
body.motyw-grafit .about-txt h2,
body.motyw-grafit .rejon h2,
body.motyw-grafit .contact h2{text-align:center;width:100%;justify-content:center;}
body.motyw-grafit .lead{text-align:center;margin-left:auto;margin-right:auto;}
body.motyw-grafit .head-flex{justify-content:center;}
body.motyw-grafit .chips{justify-content:center;}
body.motyw-grafit .btn-outline{display:flex;width:fit-content;margin-left:auto;margin-right:auto;}
/* Kontakt: etykieta NAD wartością i wyśrodkowana (jak w fiolecie) — dwukolumnowy
   wiersz łamał e-mail brzydko („kontakt@examp / le.com”). Pełna szerokość = mieści się. */
body.motyw-grafit .info-row{flex-direction:column;align-items:center;gap:6px;text-align:center;}
body.motyw-grafit .info-row.top{align-items:center;}
body.motyw-grafit .info-row .k{width:auto;}}
/* Mostek: nasze komponenty (formularz [snw_formularz], popup „Darmowa wycena",
   przypięty przycisk) używają NASZYCH tokenów, których blok wariant3 nie zna.
   Podmieniamy je na wartości grafitu, żeby te elementy też były ciemne+limonka. */
body.motyw-grafit{
  --ink:#0B0C0B;          /* tło popupu, boxu formularza; ciemny tekst na limonce */
  --paper:#F2F3EE;        /* jasny tekst na ciemnym */
  --paper-2:#141613;      /* tło pól formularza — ciemne */
  --accent-deep:#D6FB77;  /* hover przycisku */
  --line:rgba(255,255,255,0.12);
  --muted-dark:#9EA29A;
}
/* Formularz w bento: pola z limonkowym focusem, spójne z resztą */
body.motyw-grafit .form input,
body.motyw-grafit .form textarea{ border-color:rgba(255,255,255,0.12); }
body.motyw-grafit .form input:focus,
body.motyw-grafit .form textarea:focus{ border-color:var(--accent); }

/* Lightbox dla galerii bento (grafit). Kafle .ph z data-lb otwierają
   powiększenie. Zamyka Esc, klik w tło albo X. Scopowany pod grafit. */
body.motyw-grafit .gallery .ph[data-lb]{ cursor:zoom-in; }
body.motyw-grafit .lb{
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(6,7,5,.9); backdrop-filter:blur(4px);
}
body.motyw-grafit .lb.is-open{ display:flex; }
body.motyw-grafit .lb__inner{ position:relative; max-width:min(1100px,92vw); max-height:90vh; }
body.motyw-grafit .lb__inner img{ width:100%; height:auto; max-height:90vh; object-fit:contain; border-radius:14px; }
body.motyw-grafit .lb__x{
  position:absolute; top:-14px; right:-14px; width:40px; height:40px; border-radius:100px;
  border:none; cursor:pointer; background:var(--accent); color:#0B0C0B; font-size:22px; line-height:1;
}
body.motyw-grafit .lb__x:hover{ background:var(--accent-hi,#D6FB77); }
body.motyw-grafit .lb__nav{
  flex:none; width:52px; height:52px; border-radius:100px; border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.06); color:var(--text); font-size:30px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .2s, border-color .2s;
}
body.motyw-grafit .lb__nav:hover{ background:var(--accent); color:#0B0C0B; border-color:var(--accent); }
body.motyw-grafit .lb__prev{ margin-right:20px; }
body.motyw-grafit .lb__next{ margin-left:20px; }
@media(max-width:560px){
  body.motyw-grafit .lb__nav{ width:44px; height:44px; font-size:26px; }
  body.motyw-grafit .lb__prev{ margin-right:8px; }
  body.motyw-grafit .lb__next{ margin-left:8px; }
}


/* ══════════════════════════════════════════════════════════
   LANDING AGENCJI (strona główna)

   Układ przyjechał z projektu Claude Design i siedzi w całości
   w stylach inline, w html/strona-glowna.html. Tutaj jest tylko
   to, czego atrybutem inline zapisać się NIE DA: stany :hover
   i :focus oraz próg dla paska mobilnego.

   Wszystko pod .snw-lp albo pod prefiksem .lp-, żeby ani jedna
   reguła nie zeszła na podstrony i dema.
   ══════════════════════════════════════════════════════════ */

body.snw-lp{
  background:#f6f3ee; color:#12202f; font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* Pola formularza dziedziczą krój po stronie.
   Bez tej reguły <textarea> dostaje domyślną monospace przeglądarki,
   a <input> systemowy krój interfejsu — w jednej karcie formularza
   wychodziły przez to trzy różne fonty. To linijka z resetu projektu,
   którą zgubiłem przy przenoszeniu; reszta resetu pokrywa się z motywem. */
body.snw-lp input,
body.snw-lp textarea,
body.snw-lp button,
body.snw-lp select{ font-family:inherit; }
body.snw-lp a{ color:#8a5c08; }
body.snw-lp a:hover{ color:#c67f0a; }

/* !important jest tu KONIECZNE, nie z lenistwa.
   Design zapisał stany w autorskim atrybucie style-hover, a kolory spoczynkowe
   w zwykłym style="". Styl inline bije każdą regułę z arkusza — także :hover —
   więc bez !important przyciski i pola po prostu nie reagowałyby na kursor.
   Alternatywą było wyjmowanie tła i obramowania z inline'ów, czyli ruszanie
   układu, którego mieliśmy nie ruszać. */
.lp-cta:hover{ background:#c67f0a !important; }
.lp-link:hover{ color:#f0a53a !important; }
.lp-pole:focus{ border-color:#c67f0a !important; background:#fff !important; }

/* Hero: inline CTA widoczny TYLKO na mobilce (≤760px, tam gdzie kolumny hero
   się stackują i przyklejony lp-float-cta jest przy pierwszej wizycie ZASŁONIĘTY
   przez baner cookie). Stoi pod akapitem, PRZED chipami, więc widać go nawet z
   banerem. Na desktopie zbędny — karta formularza stoi obok tekstu. display
   sterowany TU, nie w inline — inline biłby ten media query (patrz reguła
   !important wyżej). */
.lp-hero-cta-mob{ display:none; position:relative; overflow:hidden; }
@media (max-width:760px){ .lp-hero-cta-mob{ display:flex; } }

/* Nadtytuł hero na mobilce: tekst jest długi („…budowlanych • Zdobywaj nowych
   klientów") i musi się łamać na 2 linie. Kwadracik to osobny element flex z
   align-items:center, więc przy dwóch liniach zawisał w pionowym środku z lewej
   i wyglądał na oderwany. Na wąskim ekranie chowamy go i centrujemy sam tekst. */
@media (max-width:760px){
  .lp-hero-eyebrow{ justify-content:center; text-align:center; letter-spacing:.12em; line-height:1.5; }
  .lp-hero-eyebrow > span:first-child{ display:none; }
}

.tile-lift{ transition:transform .18s ease, box-shadow .18s ease; }
.tile-lift:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -20px rgba(0,0,0,.35); }
.lp-kafel--ciemny:hover{ box-shadow:0 18px 34px -20px rgba(0,0,0,.5); }
.lp-kafel--duzy:hover{ transform:translateY(-4px); box-shadow:0 26px 48px -22px rgba(0,0,0,.42); }

details[open] .faq-plus{ transform:rotate(45deg); }

/* Belka: telefon (trust + „możesz zadzwonić") zamiast CTA. Samo „Chcę darmową
   stronę" zjechało do pływającego przycisku w rogu — jak „Darmowa wycena" na
   demach — więc na dole nie ma już paska na całą szerokość. */
/* Tło i ramkę trzymamy TU, nie w inline — inline bije regułę hover z arkusza,
   więc przy stylu inline efekt najechania byłby martwy. */
.lp-nav-tel{
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
/* Drobny efekt najechania: tło i ramka rozjaśniają się ku akcentowi (#f0a53a),
   przycisk podnosi się o 1 px. */
.lp-nav-tel:hover{
  background:rgba(255,255,255,.13);
  border-color:rgba(240,165,58,.55);
  transform:translateY(-1px);
}
/* Ikona dzwoni jak na demach; gdy kursor już na przycisku, dzwonienie gaśnie —
   nie naganiamy kogoś, kto właśnie klika (ta sama logika co .nav__tel). */
.lp-nav-tel svg{ transform-origin:center; animation:snw-dzwoni 3s ease-in-out infinite; }
.lp-nav-tel:hover svg,
.lp-nav-tel:focus-visible svg{ animation-play-state:paused; }
@media (max-width:480px){
  /* Na wąskim ekranie zostaje sam numer (ikona znika), żeby zmieścił się obok
     logo: 149 px logo + numer + padding musi wejść na 360 px, a body ma
     overflow-x:hidden, inaczej byłoby ucięcie. */
  .lp-nav-tel{ padding:9px 13px; font-size:13px; }
  .lp-nav-tel svg{ display:none; }
}

/* Pływający „Chcę darmową stronę" w prawym dolnym rogu, na każdym ekranie. */
.lp-float-cta{ transition:transform .15s ease, box-shadow .2s ease, background .2s ease; overflow:hidden; }
.lp-float-cta:hover{ transform:translateY(-2px); }
/* Przechodzący błysk: ukośna smuga światła przelatuje w poprzek przycisku,
   potem czeka poza prawą krawędzią przez króciutką przerwę i leci znowu.
   overflow:hidden przycina smugę do kształtu pigułki; box-shadow (poświata)
   zostaje, bo cień renderuje się POZA border-boxem i overflow go nie tnie.
   pointer-events:none, żeby smuga nie łapała kliknięć.
   RYTM: całość 1.7s. Sweep = 0→68% (~1.16s), przerwa = 68→100% (~0.54s).
   Chcesz dłuższą/krótszą przerwę — rusz próg 68% albo czas 1.7s. */
.lp-float-cta::after,
.lp-hero-cta-mob::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%);
  transform:translateX(-120%);
  animation:lp-blysk 1.7s ease-in-out infinite;
  pointer-events:none;
}
@keyframes lp-blysk{
  0%   { transform:translateX(-120%); }  /* smuga poza lewą krawędzią */
  68%  { transform:translateX(120%); }   /* przelot na drugą stronę */
  100% { transform:translateX(120%); }   /* przerwa: czeka za prawą krawędzią */
}
/* Poniżej 760 px pływający CTA znika, bo jego rolę przejmuje inline CTA w hero
   (lp-hero-cta-mob), a pływający i tak wpadał pod baner cookie. Powyżej 760 px
   (tablet, desktop) zostaje jako stałe wezwanie przy przewijaniu. */
@media (max-width:760px){
  /* !important konieczne: element ma display:inline-flex w stylu inline, który
     bez tego bije regułę z arkusza (ta sama przyczyna co przy hover .lp-cta). */
  .lp-float-cta{ display:none !important; }
}

@media (prefers-reduced-motion:reduce){
  .tile-lift{ transition:none; }
  .tile-lift:hover, .lp-kafel--duzy:hover{ transform:none; }
  .lp-float-cta:hover{ transform:none; }
  .lp-float-cta::after,
  .lp-hero-cta-mob::after{ display:none; }
  .lp-nav-tel svg{ animation:none; }
  .lp-nav-tel:hover{ transform:none; }
}

/* ── STRONA „DZIĘKUJEMY" (page-id-11): karta na pełną wysokość okna ───
   Od 2026-07-21 powłoka BAZOWA: nav, #tresc i stopka to RODZEŃSTWO w body
   (nie w #tresc jak wcześniej). Body w kolumnę na wysokość okna, #tresc rośnie,
   a ciemna sekcja w nim centruje kartę. Scope po ID, żeby nie dotknąć innych
   stron bazowych (też body.snw-lp). */
body.page-id-11{
  display:flex;
  flex-direction:column;
  min-height:100vh;   /* fallback dla przeglądarek bez dvh */
  min-height:100dvh;  /* na mobilnym nie liczy paska adresu */
}
body.page-id-11 #tresc{ flex:1 0 auto; display:flex; }
body.page-id-11 #tresc > section{ flex:1; display:flex; align-items:center; }

/* ── HERO LANDINGU: zdjęcie w tle ───────────────────────────
   Zdjęcie leży pod warstwami z projektu (siatka, cieniowanie, poświata),
   więc kolejność i wygląd tamtych zostają nietknięte.

   PRZYCIEMNIENIE JEST WYLICZONE, NIE DOBRANE NA OKO.
   O progu decyduje pomarańcz #f0a53a („glazurki”, ptaszki ✓), nie biały
   tekst — biel przechodzi WCAG 4.5:1 już przy kryciu .671, akcent dopiero
   przy .809. Liczone dla NAJGORSZEGO piksela, czyli białego: w lewej połowie
   tego zdjęcia maksimum jasności to 251/255, więc „przecież jest ciemne”
   nie jest argumentem.

   Stąd .90 → .85 na 52% szerokości: w całym pasie z tekstem krycie nie
   spada poniżej ~.857, a najgorszy kontrast akcentu wynosi 5.53:1 — liczone
   pas po pasie, na najjaśniejszym pikselu każdego pasa. Dalej w prawo
   luzujemy do .52, bo tam stoi nieprzezroczysta biała karta formularza
   i zdjęcie ma prawo pokazać się nad nią i pod nią.

   ZDJĘCIE DOBRANE PATRZĄC, NIE LICZĄC. Pierwsze („paca w kleju”) miało
   całą treść po PRAWEJ, czyli dokładnie tam, gdzie karta ją zasłania —
   zostawała gładka plama. „Narzędzia glazurnika” trzymają płytki, gumowy
   młotek i packę po LEWEJ, w wolnym miejscu pod nagłówkiem, i mają duże
   kształty, które przeżywają 86% przyciemnienia. Drobna faktura nie przeżywa.

   PODMIENIASZ ZDJĘCIE NA JAŚNIEJSZE — PRZELICZ, nie zgaduj. */
body.ma-baner .lp-hero{
  background-image:var(--baner-foto);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
body.ma-baner .lp-hero-cien{
  background:linear-gradient(100deg,
    rgba(14,28,47,.90) 0%,
    rgba(14,28,47,.85) 52%,
    rgba(14,28,47,.52) 100%);
}

/* Bez zdjęcia zostaje delikatne cieniowanie z projektu. Mocne wyglądałoby
   wtedy jak płaska plama — przyciemniałoby granat granatem. */
.lp-hero-cien{
  background:linear-gradient(100deg,
    rgba(6,13,24,.6) 0%,
    rgba(6,13,24,.18) 46%,
    transparent 66%);
}

/* Poniżej ~900 px kolumny hero układają się jedna pod drugą i tekst
   przechodzi na całą szerokość — czyli także tam, gdzie gradient poziomy
   jest już rozrzedzony do .58. Wtedy jedyne bezpieczne przyciemnienie
   to jednolite. */
@media (max-width:900px){
  body.ma-baner .lp-hero-cien{ background:rgba(14,28,47,.90); }
}


/* ══════════════════════════════════════════════════════════
   WARIANT FIOLET — body.motyw-fiolet
   Demo z Claude Design (warianty/wariant5.html). Fiolet #5A46F2,
   font Manrope, pływająca zaokrąglona belka. Układ ma zostać
   nietknięty — CSS w całości scopowany pod body.motyw-fiolet,
   dokładnie jak WARIANT GRAFIT wyżej.

   Font Manrope zhostowany lokalnie (assets/fonts-manrope/),
   zero obcej domeny — tak samo jak Sora w grafitzie.
   ══════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/themes/snw-blank/assets/fonts-manrope/manrope-6d36d5bd.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/themes/snw-blank/assets/fonts-manrope/manrope-938c6e80.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/wp-content/themes/snw-blank/assets/fonts-manrope/manrope-6d36d5bd.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/wp-content/themes/snw-blank/assets/fonts-manrope/manrope-938c6e80.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/wp-content/themes/snw-blank/assets/fonts-manrope/manrope-6d36d5bd.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/wp-content/themes/snw-blank/assets/fonts-manrope/manrope-938c6e80.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/wp-content/themes/snw-blank/assets/fonts-manrope/manrope-6d36d5bd.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/wp-content/themes/snw-blank/assets/fonts-manrope/manrope-938c6e80.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/wp-content/themes/snw-blank/assets/fonts-manrope/manrope-6d36d5bd.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/wp-content/themes/snw-blank/assets/fonts-manrope/manrope-938c6e80.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body.motyw-fiolet{--bg:#F5F4F0;
    --surface:#FFFFFF;
    --ink:#1B1A22;
    --muted:#5B5966;
    --muted-2:#6B6976;
    --nav-link:#4A4954;
    --accent:#5A46F2;
    --accent-hi:#4636D6;
    --accent-deep:#4636D6;
    --accent-soft:rgba(90,70,242,0.10);
    --line:#ECEBE6;
    --shadow:0 18px 46px -26px rgba(27,26,34,0.28);
    --shadow-sm:0 10px 30px -16px rgba(27,26,34,0.35);
    --maxw:1160px;}

  body.motyw-fiolet *{box-sizing:border-box;}

  body.motyw-fiolet{scroll-behavior:smooth;}

  body.motyw-fiolet{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:'Manrope',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;}

  body.motyw-fiolet a{color:var(--accent);text-decoration:none;}

  body.motyw-fiolet a:hover{color:var(--accent-hi);}

  body.motyw-fiolet ::selection{background:var(--accent);color:#fff;}

  body.motyw-fiolet img{max-width:100%;display:block;}

  body.motyw-fiolet .wrap{max-width:var(--maxw);margin:0 auto;padding-left:24px;padding-right:24px;}


  /* placeholders (podmień na <img>) */
  body.motyw-fiolet .ph{position:relative;background:repeating-linear-gradient(135deg,#E9E7E0 0 14px,#EFEDE7 14px 28px);}

  body.motyw-fiolet .ph span{position:absolute;left:18px;bottom:14px;font-size:12px;color:#A6A29A;}


  /* labels & headings */
  body.motyw-fiolet .eyebrow{font-size:13px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;}

  body.motyw-fiolet .sec-head{font-weight:800;font-size:clamp(36px,4.6vw,58px);line-height:1.05;letter-spacing:-0.03em;margin:0 0 16px;color:var(--ink);}

  body.motyw-fiolet .lead{font-size:18px;line-height:1.55;color:var(--muted);margin:0;text-wrap:pretty;}

  body.motyw-fiolet .center-head{text-align:center;max-width:680px;margin:0 auto 44px;}


  /* buttons */
  body.motyw-fiolet .btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;border-radius:100px;cursor:pointer;border:none;transition:background .2s ease,color .2s ease,transform .2s ease;}

  body.motyw-fiolet .btn-accent{background:var(--accent);color:#fff;font-size:16px;padding:17px 30px;box-shadow:0 16px 36px -14px rgba(90,70,242,0.6);}

  body.motyw-fiolet .btn-accent:hover{background:var(--accent-hi);color:#fff;}

  body.motyw-fiolet .btn-white{background:#fff;color:var(--ink);font-size:16px;padding:17px 28px;box-shadow:var(--shadow-sm);}

  body.motyw-fiolet .btn-white:hover{background:#FBFBFA;}

  body.motyw-fiolet .btn-pill{display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--ink);font-weight:700;font-size:15px;padding:14px 26px;border-radius:100px;box-shadow:var(--shadow-sm);}

  body.motyw-fiolet .btn-pill:hover{color:var(--accent);}


  /* nav */
  body.motyw-fiolet header.site{position:sticky;top:18px;z-index:50;padding:0 24px;}

  body.motyw-fiolet .f5-nav{max-width:var(--maxw);margin:0 auto;padding:12px 14px 12px 26px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:#fff;border-radius:100px;box-shadow:0 14px 40px -18px rgba(27,26,34,0.25);}

  body.motyw-fiolet .logo{font-weight:800;font-size:22px;letter-spacing:-0.02em;color:var(--ink);display:flex;align-items:center;gap:6px;}

  body.motyw-fiolet .dot{width:8px;height:8px;background:var(--accent);border-radius:100px;display:inline-block;}

  body.motyw-fiolet .f5-nav-links{display:flex;align-items:center;gap:28px;font-size:14.5px;font-weight:600;}

  body.motyw-fiolet .f5-nav-links a{color:var(--nav-link);}

  body.motyw-fiolet .f5-nav-links a:hover{color:var(--ink);}

  body.motyw-fiolet .f5-nav-phone{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;font-weight:700;font-size:14px;padding:12px 22px;border-radius:100px;}

  body.motyw-fiolet .f5-nav-phone:hover{background:var(--accent-hi);color:#fff;}


  /* hero */
  body.motyw-fiolet .f5-hero{max-width:900px;margin:0 auto;padding:70px 24px 0;text-align:center;}

  body.motyw-fiolet .pill{display:inline-flex;align-items:center;gap:9px;background:var(--accent-soft);color:var(--accent);font-size:13px;font-weight:700;padding:9px 18px;border-radius:100px;margin-bottom:28px;}

  body.motyw-fiolet .pill i{width:6px;height:6px;background:var(--accent);border-radius:100px;display:inline-block;}

  body.motyw-fiolet .f5-hero h1{font-weight:800;font-size:clamp(44px,6.5vw,80px);line-height:1.02;letter-spacing:-0.035em;margin:0;color:var(--ink);}

  body.motyw-fiolet .f5-hero h1 .hl{color:var(--accent);}

  body.motyw-fiolet .f5-hero p{font-size:20px;line-height:1.6;color:var(--muted);max-width:620px;margin:28px auto 36px;text-wrap:pretty;}

  body.motyw-fiolet .f5-hero-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}

  body.motyw-fiolet .f5-hero-media{max-width:var(--maxw);margin:0 auto;padding:56px 24px 0;}

  body.motyw-fiolet .f5-hero-img{aspect-ratio:24/9;border-radius:34px;overflow:hidden;}

  body.motyw-fiolet .stat-bar{max-width:920px;margin:-46px auto 0;position:relative;z-index:2;background:#fff;border-radius:26px;box-shadow:0 26px 60px -26px rgba(27,26,34,0.3);display:grid;grid-template-columns:repeat(3,1fr);}

  body.motyw-fiolet .stat{padding:28px 30px;text-align:center;}

  body.motyw-fiolet .stat + .stat{border-left:1px solid var(--line);}

  body.motyw-fiolet .stat .num{font-weight:800;font-size:40px;letter-spacing:-0.03em;line-height:1;color:var(--ink);}

  body.motyw-fiolet .stat .num.acc{color:var(--accent);}

  body.motyw-fiolet .stat .lbl{font-size:14px;color:var(--muted-2);margin-top:8px;}


  body.motyw-fiolet section{padding-top:0;}

  body.motyw-fiolet .pb92{padding-bottom:92px;}

  body.motyw-fiolet .pt92{padding-top:92px;}


  /* services */
  body.motyw-fiolet .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}

  body.motyw-fiolet .svc{background:#fff;border-radius:26px;overflow:hidden;box-shadow:var(--shadow);transition:transform .25s ease;}

  body.motyw-fiolet .svc:hover{transform:translateY(-6px);}

  body.motyw-fiolet .svc .ph{aspect-ratio:16/10;}

  body.motyw-fiolet .svc-body{padding:28px 26px 32px;}

  body.motyw-fiolet .svc-idx{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--accent-soft);color:var(--accent);border-radius:12px;font-weight:800;font-size:15px;margin-bottom:16px;}

  body.motyw-fiolet .svc h3{font-weight:800;font-size:22px;letter-spacing:-0.02em;margin:0 0 12px;color:var(--ink);}

  body.motyw-fiolet .svc p{font-size:15px;line-height:1.6;color:var(--muted);margin:0;text-wrap:pretty;}

  body.motyw-fiolet .center-cta{text-align:center;margin-top:40px;}


  /* gallery */
  body.motyw-fiolet .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}

  body.motyw-fiolet .gallery .tileimg{aspect-ratio:1/1;border-radius:24px;box-shadow:0 14px 36px -24px rgba(27,26,34,0.3);}


  /* about */
  body.motyw-fiolet .about-card{background:#fff;border-radius:34px;box-shadow:0 24px 60px -30px rgba(27,26,34,0.3);padding:44px;display:grid;grid-template-columns:0.85fr 1.15fr;gap:44px;align-items:center;}

  body.motyw-fiolet .about-card .ph{aspect-ratio:4/5;border-radius:24px;}

  body.motyw-fiolet .about-card h2{font-weight:800;font-size:clamp(36px,4.8vw,62px);line-height:1;letter-spacing:-0.035em;margin:0 0 16px;color:var(--ink);}

  body.motyw-fiolet .about-lead{font-size:20px;line-height:1.5;color:var(--muted);margin:0 0 32px;max-width:520px;text-wrap:pretty;}

  body.motyw-fiolet .about-mini{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

  body.motyw-fiolet .mini{background:var(--bg);border-radius:20px;padding:24px;}

  body.motyw-fiolet .mini h3{font-weight:800;font-size:16px;margin:0 0 12px;color:var(--ink);}

  body.motyw-fiolet .mini p{font-size:14px;line-height:1.6;color:var(--muted);margin:0;text-wrap:pretty;}


  /* rejon */
  body.motyw-fiolet .rejon-card{background:var(--accent);border-radius:34px;padding:52px 48px;color:#fff;}

  body.motyw-fiolet .rejon{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:center;}

  body.motyw-fiolet .rejon .eyebrow{color:#ECEAFF;}

  body.motyw-fiolet .rejon h2{font-weight:800;font-size:clamp(32px,4.2vw,54px);line-height:1.02;letter-spacing:-0.03em;margin:0 0 18px;}

  body.motyw-fiolet .rejon p{font-size:17px;line-height:1.6;color:#ECEAFF;margin:0;max-width:440px;text-wrap:pretty;}

  body.motyw-fiolet .chips{display:flex;flex-wrap:wrap;gap:12px;}

  body.motyw-fiolet .chip{font-size:14px;font-weight:600;color:var(--accent);background:#fff;border-radius:100px;padding:12px 20px;}


  /* reviews */
  body.motyw-fiolet .review{margin:0;background:#fff;border-radius:26px;box-shadow:var(--shadow);padding:30px 28px;display:flex;flex-direction:column;}

  body.motyw-fiolet .stars{color:var(--accent);letter-spacing:2px;font-size:15px;margin-bottom:18px;}

  body.motyw-fiolet .review blockquote{font-size:18px;line-height:1.5;color:var(--ink);margin:0 0 26px;flex:1;text-wrap:pretty;}

  body.motyw-fiolet .review figcaption{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:18px;}

  body.motyw-fiolet .avatar{width:38px;height:38px;border-radius:100px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:#fff;flex:none;}

  body.motyw-fiolet .review figcaption .who{font-size:13px;font-weight:600;color:var(--muted-2);}


  /* faq */
  body.motyw-fiolet .faq-wrap{max-width:900px;margin:0 auto;padding:0 24px 92px;}

  body.motyw-fiolet .faq-head{text-align:center;margin-bottom:44px;}

  body.motyw-fiolet .faq-list{display:flex;flex-direction:column;gap:14px;}

  body.motyw-fiolet .faq-item{background:#fff;border-radius:20px;box-shadow:0 14px 40px -28px rgba(27,26,34,0.3);overflow:hidden;}

  body.motyw-fiolet .faq-q{width:100%;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 28px;text-align:left;font-family:inherit;font-weight:700;font-size:19px;color:var(--ink);}

  body.motyw-fiolet .faq-q .plus{font-size:26px;color:var(--accent);transition:transform .25s ease;line-height:1;}

  body.motyw-fiolet .faq-item.open .faq-q .plus{transform:rotate(45deg);}

  body.motyw-fiolet .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}

  body.motyw-fiolet .faq-item.open .faq-a{max-height:340px;}

  body.motyw-fiolet .faq-a p{font-size:16px;line-height:1.65;color:var(--muted);margin:0;padding:0 28px 26px;text-wrap:pretty;}


  /* contact */
  body.motyw-fiolet .contact-card{background:var(--ink);border-radius:36px;padding:56px 48px;color:#fff;}

  body.motyw-fiolet .contact{display:grid;grid-template-columns:0.95fr 1.05fr;gap:52px;align-items:start;}

  body.motyw-fiolet .contact .eyebrow{color:#9A8CFF;}

  body.motyw-fiolet .contact h2{font-weight:800;font-size:clamp(34px,4.4vw,56px);line-height:1.02;letter-spacing:-0.03em;margin:0 0 18px;}

  body.motyw-fiolet .contact .clead{font-size:18px;line-height:1.55;color:#B7B4C2;margin:0 0 40px;max-width:420px;text-wrap:pretty;}

  body.motyw-fiolet .info{display:flex;flex-direction:column;gap:14px;}

  body.motyw-fiolet .info-row{display:flex;align-items:center;gap:16px;background:rgba(255,255,255,0.06);border-radius:16px;padding:16px 20px;}

  body.motyw-fiolet .info-row.top{align-items:flex-start;}

  body.motyw-fiolet .info-row .k{font-size:12px;color:#9C99A8;width:64px;flex:none;}

  body.motyw-fiolet .info-row.top .k{padding-top:2px;}

  body.motyw-fiolet .info-row .v{font-weight:700;font-size:18px;color:#fff;}

  body.motyw-fiolet .info-row .v.sm{font-size:16px;word-break:break-all;}

  body.motyw-fiolet .info-row .v.reg{font-weight:400;font-size:14.5px;line-height:1.5;color:#DAD8E0;}

  body.motyw-fiolet form.card{background:#fff;border-radius:24px;padding:34px 32px;color:var(--ink);}

  body.motyw-fiolet .frow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}

  body.motyw-fiolet .field{margin-bottom:16px;}

  body.motyw-fiolet .field label, body.motyw-fiolet .frow label{display:block;font-size:12px;font-weight:600;color:var(--muted-2);margin-bottom:8px;}

  body.motyw-fiolet .field input, body.motyw-fiolet .field textarea, body.motyw-fiolet .frow input{width:100%;background:var(--bg);border:1px solid #E7E5E0;border-radius:12px;padding:13px 15px;font-family:inherit;font-size:15px;color:var(--ink);}

  body.motyw-fiolet .field textarea{resize:vertical;}

  body.motyw-fiolet .field input:focus, body.motyw-fiolet .field textarea:focus, body.motyw-fiolet .frow input:focus{border-color:var(--accent);outline:none;}

  body.motyw-fiolet .consent{display:flex;gap:12px;align-items:flex-start;margin-bottom:20px;cursor:pointer;}

  body.motyw-fiolet .consent input{margin-top:3px;width:16px;height:16px;accent-color:var(--accent);flex:none;}

  body.motyw-fiolet .consent span{font-size:13px;line-height:1.5;color:var(--muted-2);}

  body.motyw-fiolet .consent a{text-decoration:underline;}

  body.motyw-fiolet form.card .submit{width:100%;background:var(--accent);color:#fff;border:none;border-radius:100px;padding:16px;font-family:inherit;font-weight:700;font-size:16px;cursor:pointer;}

  body.motyw-fiolet form.card .submit:hover{background:var(--accent-hi);}


  /* footer */
  body.motyw-fiolet footer.site{background:var(--bg);border-top:1px solid #E5E3DD;}

  body.motyw-fiolet .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-top:60px;}

  body.motyw-fiolet .foot-brand p{font-size:14.5px;line-height:1.65;color:var(--muted-2);margin:0;max-width:320px;text-wrap:pretty;}

  body.motyw-fiolet .foot-col h3{font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent);margin:0 0 20px;}

  body.motyw-fiolet .foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:15px;}

  body.motyw-fiolet .foot-col a{color:var(--nav-link);}

  body.motyw-fiolet .foot-col a:hover{color:var(--ink);}

  body.motyw-fiolet .foot-bottom{margin-top:52px;border-top:1px solid #E5E3DD;padding:22px 0 36px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;}

  body.motyw-fiolet .foot-bottom .cr{font-size:13px;color:var(--muted-2);}

  body.motyw-fiolet .foot-bottom .r{display:flex;align-items:center;gap:26px;}

  body.motyw-fiolet .foot-bottom .r a:first-child{font-size:13px;color:var(--nav-link);}


  /* responsive */
  @media (max-width:900px){
    body.motyw-fiolet .f5-nav-links{display:none;}

    body.motyw-fiolet .grid-3, body.motyw-fiolet .gallery, body.motyw-fiolet .about-mini{grid-template-columns:1fr;}

    body.motyw-fiolet .about-card, body.motyw-fiolet .rejon, body.motyw-fiolet .contact{grid-template-columns:1fr;}

    body.motyw-fiolet .about-card{padding:28px;}

    /* „O mnie" na mobilce: karta zwija się do 1 kolumny (zdjęcie na górze,
       tekst pod) — cała treść wyśrodkowana, łącznie z kartami .mini. */
    body.motyw-fiolet .about-card .eyebrow,
    body.motyw-fiolet .about-card h2{text-align:center;justify-content:center;width:100%;}
    body.motyw-fiolet .about-lead{text-align:center;margin-left:auto;margin-right:auto;}
    body.motyw-fiolet .about-mini .mini{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;}

    /* „Rejon" na mobilce: karta 1-kolumnowa — cała treść wyśrodkowana,
       kafle miejscowości też (flex-wrap → justify-content:center). */
    body.motyw-fiolet .rejon .eyebrow,
    body.motyw-fiolet .rejon h2{text-align:center;justify-content:center;width:100%;}
    body.motyw-fiolet .rejon p{text-align:center;margin-left:auto;margin-right:auto;}
    body.motyw-fiolet .chips{justify-content:center;width:100%;}

    /* „Kontakt" na mobilce: nagłówek wyśrodkowany jak Rejon/O mnie.
       Formularz w prawej kolumnie zostaje bez zmian. */
    body.motyw-fiolet .contact .eyebrow,
    body.motyw-fiolet .contact h2{text-align:center;justify-content:center;width:100%;}
    body.motyw-fiolet .contact .clead{text-align:center;margin-left:auto;margin-right:auto;}

    body.motyw-fiolet .rejon-card, body.motyw-fiolet .contact-card{padding:36px 24px;}

    body.motyw-fiolet .foot-grid{grid-template-columns:1fr 1fr;}

  }
  @media (max-width:560px){
    body.motyw-fiolet .stat-bar{grid-template-columns:1fr;}

    body.motyw-fiolet .stat + .stat{border-left:none;border-top:1px solid var(--line);}

    body.motyw-fiolet .frow{grid-template-columns:1fr;}

    body.motyw-fiolet .foot-grid{grid-template-columns:1fr;}

    body.motyw-fiolet .gallery{grid-template-columns:1fr 1fr;}

    /* Banner hero na telefonie: aspect-ratio 24/9 dawał ~150px (za nisko).
       Stała wysokość 240px, zdjęcie dalej center/cover. */
    body.motyw-fiolet .f5-hero-img{aspect-ratio:auto;height:240px;}

    /* Kontakt: etykieta NAD wartością (nie obok). Na wąsko dwukolumnowy wiersz
       łamał e-mail brzydko („kontakt@exampl / e.com”) — stos daje pełną szerokość. */
    body.motyw-fiolet .info-row{flex-direction:column;align-items:center;gap:6px;text-align:center;}
    body.motyw-fiolet .info-row.top{align-items:center;}
    body.motyw-fiolet .info-row .k{width:auto;}

  }

/* [snw_formularz] w powłoce fioletu — nasz markup .form/.pole, przestylowany
   na białą kartę projektu. Zmienne (--accent, --ink, --bg…) kaskadują
   z body.motyw-fiolet, więc kolory podłapują się same. */
body.motyw-fiolet .fiolet-form{background:#fff;border-radius:24px;padding:34px 32px;color:var(--ink);box-shadow:var(--shadow-sm);}
body.motyw-fiolet .fiolet-form .form{gap:16px;}
body.motyw-fiolet .fiolet-form .pole label{font-size:12px;font-weight:600;color:var(--muted-2);}
body.motyw-fiolet .fiolet-form .pole input,
body.motyw-fiolet .fiolet-form .pole textarea{background:var(--bg);border:1px solid #E7E5E0;border-radius:12px;padding:13px 15px;font-family:inherit;font-size:15px;color:var(--ink);}
body.motyw-fiolet .fiolet-form .pole input:focus,
body.motyw-fiolet .fiolet-form .pole textarea:focus{border-color:var(--accent);outline:none;}
body.motyw-fiolet .fiolet-form .pole input::placeholder,
body.motyw-fiolet .fiolet-form .pole textarea::placeholder{color:#A6A29A;}
body.motyw-fiolet .fiolet-form .zgoda label{font-size:13px;color:var(--muted-2);}
body.motyw-fiolet .fiolet-form .zgoda a{color:var(--accent);text-decoration:underline;}
body.motyw-fiolet .fiolet-form .btn--primary{width:100%;justify-content:center;background:var(--accent);color:#fff;border:none;border-radius:100px;padding:16px;font-family:inherit;font-weight:700;font-size:16px;box-shadow:0 16px 36px -14px rgba(90,70,242,0.6);}
body.motyw-fiolet .fiolet-form .btn--primary:hover{background:var(--accent-hi);color:#fff;}
body.motyw-fiolet .fiolet-form .form__blad{background:rgba(232,115,74,0.10);border:1px solid #E8734A;color:#9a3a16;border-radius:12px;}
body.motyw-fiolet .fiolet-form .cf-turnstile{margin-top:2px;}
/* Linki w ciemnej karcie kontaktu (--ink) — fiolet #5A46F2 na czerni ma za
   niski kontrast, więc telefon/e-mail idą na biało, hover na jasny fiolet. */
body.motyw-fiolet .contact .info-row a{color:#fff;}
body.motyw-fiolet .contact .info-row a:hover{color:#C8C0FF;}

/* ── FIOLET: poprawki po zrzutach (kolizje + braki) ──────────
   .sec-head: baza narzuca max-width:640px bez margin:auto → nagłówek FAQ
   („Częste pytania”) wychodził dopięty do lewej. Projekt chce pełnej szerokości,
   a wyśrodkowanie robi rodzic (.faq-head/.center-head text-align:center). */
body.motyw-fiolet .sec-head{ max-width:none; }

/* Pływający przycisk „Darmowa wycena” (globalny, snw-klient.php) — baza daje
   ciemny tekst i hover na --accent-deep (u fioletu odziedziczony POMARAŃCZ).
   Na fiolecie tekst biały, hover na fioletowy --accent-hi. */
body.motyw-fiolet .snw-wycena{ color:#fff; }
body.motyw-fiolet .snw-wycena:hover{ background:var(--accent-hi); color:#fff; }

/* Lightbox galerii — wzorzec z grafitu, przemalowany na fiolet.
   Kafle .gallery .ph[data-lb] otwierają powiększenie z przewijaniem slajdów. */
body.motyw-fiolet .lb{
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(27,26,34,.9); backdrop-filter:blur(4px);
}
body.motyw-fiolet .lb.is-open{ display:flex; }
body.motyw-fiolet .lb__inner{ position:relative; max-width:min(1100px,92vw); max-height:90vh; }
body.motyw-fiolet .lb__inner img{ width:100%; height:auto; max-height:90vh; object-fit:contain; border-radius:20px; }
body.motyw-fiolet .lb__x{
  position:absolute; top:-14px; right:-14px; width:40px; height:40px; border-radius:100px;
  border:none; cursor:pointer; background:var(--accent); color:#fff; font-size:22px; line-height:1;
}
body.motyw-fiolet .lb__x:hover{ background:var(--accent-hi); }
body.motyw-fiolet .lb__nav{
  flex:none; width:52px; height:52px; border-radius:100px; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.1); color:#fff; font-size:30px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .2s, border-color .2s;
}
body.motyw-fiolet .lb__nav:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
body.motyw-fiolet .lb__prev{ margin-right:20px; }
body.motyw-fiolet .lb__next{ margin-left:20px; }
@media(max-width:560px){
  body.motyw-fiolet .lb__nav{ width:44px; height:44px; font-size:26px; }
  body.motyw-fiolet .lb__prev{ margin-right:8px; }
  body.motyw-fiolet .lb__next{ margin-left:8px; }
}

/* Linki sekcji w belce landingu — jasne na granacie, chowają się poniżej 900 px
   (tam działa przyklejony pasek CTA na dole, jak w demach). */
body.snw-lp .lp-nav-links{ display:flex; align-items:center; gap:26px; font-size:14.5px; font-weight:600; }
body.snw-lp .lp-nav-links a{ color:rgba(255,255,255,.72); white-space:nowrap; transition:color .15s ease; }
body.snw-lp .lp-nav-links a:hover{ color:#fff; }
@media (max-width:900px){
  body.snw-lp .lp-nav-links{ display:none; }
  /* !important konieczne: .lp-nav-tel ma display:inline-flex w stylu INLINE
     (z portu Claude Design), a bazowe .lp-burger{display:none} stoi PÓŹNIEJ
     w pliku (ta sama specyficzność) — bez !important oba nadpisałyby te reguły. */
  body.snw-lp .lp-nav-tel{ display:none !important; }
  body.snw-lp .lp-burger{ display:inline-flex !important; }
}

/* Rozwijane „Usługi" w belce: napis przewija do sekcji branż (#branze),
   a menu na hover pokazuje strony fachów. ::before to niewidzialny „mostek"
   nad menu, żeby najechanie nie gubiło się w 10 px odstępie. Poniżej 900 px
   cała belka znika (jak reszta linków) — picker i tak jest pod hero. */
body.snw-lp .lp-nav-drop{ position:relative; display:flex; align-items:center; }
body.snw-lp .lp-nav-drop__top{ display:inline-flex; align-items:center; gap:5px; }
body.snw-lp .lp-nav-drop__top svg{ opacity:.8; transition:transform .2s ease; }
body.snw-lp .lp-nav-drop:hover .lp-nav-drop__top svg,
body.snw-lp .lp-nav-drop:focus-within .lp-nav-drop__top svg{ transform:rotate(180deg); }
body.snw-lp .lp-nav-drop__menu{
  position:absolute; top:100%; left:0; margin-top:10px; min-width:212px;
  background:#0e1c2f; border:1px solid rgba(255,255,255,.12); border-radius:12px;
  padding:7px; box-shadow:0 22px 46px -14px rgba(0,0,0,.6);
  display:flex; flex-direction:column; gap:1px; z-index:40;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
body.snw-lp .lp-nav-drop__menu::before{ content:""; position:absolute; top:-10px; left:0; right:0; height:10px; }
body.snw-lp .lp-nav-drop:hover .lp-nav-drop__menu,
body.snw-lp .lp-nav-drop:focus-within .lp-nav-drop__menu{ opacity:1; visibility:visible; transform:translateY(0); }
body.snw-lp .lp-nav-drop__menu a{ display:block; padding:9px 12px; border-radius:8px; color:#fff; font-weight:600; white-space:nowrap; }
body.snw-lp .lp-nav-drop__menu a:hover{ background:rgba(255,255,255,.09); color:#fff; }
body.snw-lp .lp-nav-drop__menu span{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 12px; color:rgba(255,255,255,.42); white-space:nowrap; cursor:default; }
body.snw-lp .lp-nav-drop__menu span em{ font-style:normal; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase; background:rgba(255,255,255,.08); color:rgba(255,255,255,.5); padding:2px 7px; border-radius:5px; }

/* Landing: nagłówki sekcji (eyebrow + h2) i tytuł karty formularza w hero
   wyśrodkowane TYLKO na mobilce (≤760px). Na desktopie zostają do lewej — tak
   jest w projekcie. Eyebrow to flex → justify-content; h2 sekcji 01 ma inline
   max-width:15em, więc margin auto (z !important, bo inline margin bije regułę)
   centruje sam blok, nie tylko tekst. */
@media (max-width:760px){
  body.snw-lp .lp-sec-eyebrow{ justify-content:center; }
  body.snw-lp .lp-sec-tyt{ text-align:center; margin-left:auto !important; margin-right:auto !important; }
  body.snw-lp .lp-herocard-tyt,
  body.snw-lp .lp-herocard-sub{ text-align:center; }
}

/* Sekcja „Kto za tym stoi" (#o-mnie) na landingu — 2-kolumnowy układ
   (zdjęcie | tekst) zwija się na mobilce do jednej kolumny, wyśrodkowany.
   Reguła w CSS, bo sekcja w treści strony nie może nieść <style>. */
@media (max-width:820px){
  body.snw-lp #o-mnie [data-col]{ grid-template-columns:1fr !important; text-align:center; }
  body.snw-lp #o-mnie [data-text]{ display:flex; flex-direction:column; align-items:center; }
  body.snw-lp #o-mnie [data-text] [data-lead]{ justify-content:center; }
  body.snw-lp #o-mnie [data-text] p{ text-align:center; }
}

/* ── Hamburger + wysuwane menu (drawer) ──────────────────────────
   ≤900px belka gubi linki (lp-nav-links display:none) i telefon — zamiast nich
   hamburger, który wysuwa z prawej szufladę z nawigacją i przyciskiem „Zadzwoń".
   Ta sama belka na landingu, fachach i stronach bazowych (404/polityka).
   Zamknięcie: krzyżyk, kliknięcie w tło, ESC albo kliknięcie w link. */
body.snw-lp .lp-burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:40px; padding:0; flex:none; cursor:pointer;
  border:1px solid rgba(255,255,255,.18); border-radius:10px;
  background:rgba(255,255,255,.06); transition:background .15s ease;
}
body.snw-lp .lp-burger:hover{ background:rgba(255,255,255,.12); }
body.snw-lp .lp-burger span{ display:block; width:20px; height:2px; margin:0 auto; background:#fff; border-radius:2px; }

body.snw-lp .lp-drawer-tlo{
  position:fixed; inset:0; z-index:98; background:rgba(6,12,22,.55);
  opacity:0; visibility:hidden; transition:opacity .28s ease, visibility .28s ease;
}
body.snw-lp .lp-drawer-tlo.otwarte{ opacity:1; visibility:visible; }

body.snw-lp .lp-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:99; width:min(330px,84vw);
  display:flex; flex-direction:column; gap:2px; padding:24px 22px 30px;
  background:#0e1c2f; border-left:1px solid rgba(255,255,255,.1);
  box-shadow:-24px 0 60px -20px rgba(0,0,0,.6);
  transform:translateX(100%); visibility:hidden;
  transition:transform .28s ease, visibility .28s ease; overflow-y:auto;
}
body.snw-lp .lp-drawer.otwarte{ transform:translateX(0); visibility:visible; }
body.snw-lp .lp-drawer-x{
  align-self:flex-end; width:40px; height:40px; margin:0 -6px 8px 0; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:none; background:none; color:rgba(255,255,255,.7); cursor:pointer;
}
body.snw-lp .lp-drawer-x:hover{ color:#fff; }
body.snw-lp .lp-drawer-nav a{ display:block; color:#fff; font-weight:600; font-size:18px; padding:13px 2px; border-bottom:1px solid rgba(255,255,255,.08); }
body.snw-lp .lp-drawer-nav a:hover{ color:#f0a53a; }
body.snw-lp .lp-drawer-tel{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  margin-top:22px; padding:14px 18px; border-radius:12px;
  background:#d98207; color:#0e1c2f; font-weight:700; font-size:16px;
}

/* ── Drawer dla DEM (fiolet + grafit) ────────────────────────────
   Te same klasy lp-* co landing, więc skrypt z footer.php obsługuje je bez
   zmian. Struktura wspólna dla obu motywów, kolory ze zmiennych motywu
   (var(--...)). Scope po motyw-*, żeby nie zderzyć z landingiem (body.snw-lp).
   Show-reguła (≤900px) stoi PO display:none, więc wygrywa bez !important. */
body.motyw-fiolet .lp-burger,
body.motyw-grafit .lp-burger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:40px; padding:0; flex:none; cursor:pointer; border-radius:10px; border:1px solid; background:none; }
body.motyw-fiolet .lp-burger span,
body.motyw-grafit .lp-burger span{ display:block; width:20px; height:2px; margin:0 auto; border-radius:2px; }
body.motyw-fiolet .lp-drawer-tlo,
body.motyw-grafit .lp-drawer-tlo{ position:fixed; inset:0; z-index:98; opacity:0; visibility:hidden; transition:opacity .28s ease, visibility .28s ease; }
body.motyw-fiolet .lp-drawer-tlo.otwarte,
body.motyw-grafit .lp-drawer-tlo.otwarte{ opacity:1; visibility:visible; }
body.motyw-fiolet .lp-drawer,
body.motyw-grafit .lp-drawer{ position:fixed; top:0; right:0; bottom:0; z-index:99; width:min(330px,84vw); display:flex; flex-direction:column; gap:2px; padding:24px 22px 30px; transform:translateX(100%); visibility:hidden; transition:transform .28s ease, visibility .28s ease; overflow-y:auto; }
body.motyw-fiolet .lp-drawer.otwarte,
body.motyw-grafit .lp-drawer.otwarte{ transform:translateX(0); visibility:visible; }
body.motyw-fiolet .lp-drawer-x,
body.motyw-grafit .lp-drawer-x{ align-self:flex-end; width:40px; height:40px; margin:0 -6px 8px 0; padding:0; display:inline-flex; align-items:center; justify-content:center; border:none; background:none; cursor:pointer; }
body.motyw-fiolet .lp-drawer-nav a,
body.motyw-grafit .lp-drawer-nav a{ display:block; font-weight:600; font-size:18px; padding:13px 2px; border-bottom:1px solid; }
body.motyw-fiolet .lp-drawer-tel,
body.motyw-grafit .lp-drawer-tel{ display:inline-flex; align-items:center; justify-content:center; gap:9px; margin-top:22px; padding:14px 18px; border-radius:12px; font-weight:700; font-size:16px; }

/* FIOLET — jasny motyw */
body.motyw-fiolet .lp-burger{ border-color:rgba(27,26,34,.16); }
body.motyw-fiolet .lp-burger span{ background:var(--ink); }
body.motyw-fiolet .lp-drawer-tlo{ background:rgba(27,26,34,.42); }
body.motyw-fiolet .lp-drawer{ background:var(--surface); border-left:1px solid var(--line); box-shadow:-24px 0 60px -20px rgba(27,26,34,.35); }
body.motyw-fiolet .lp-drawer-x{ color:var(--muted); }
body.motyw-fiolet .lp-drawer-x:hover{ color:var(--ink); }
body.motyw-fiolet .lp-drawer-nav a{ color:var(--ink); border-bottom-color:var(--line); }
body.motyw-fiolet .lp-drawer-nav a:hover{ color:var(--accent); }
body.motyw-fiolet .lp-drawer-tel{ background:var(--accent); color:#fff; }

/* GRAFIT — ciemny motyw */
body.motyw-grafit .lp-burger{ border-color:rgba(255,255,255,.14); }
body.motyw-grafit .lp-burger span{ background:var(--text); }
body.motyw-grafit .lp-drawer-tlo{ background:rgba(0,0,0,.55); }
body.motyw-grafit .lp-drawer{ background:var(--card); border-left:1px solid var(--border-strong); box-shadow:-24px 0 60px -20px rgba(0,0,0,.6); }
body.motyw-grafit .lp-drawer-x{ color:var(--muted); }
body.motyw-grafit .lp-drawer-x:hover{ color:var(--text); }
body.motyw-grafit .lp-drawer-nav a{ color:var(--text); border-bottom-color:var(--border); }
body.motyw-grafit .lp-drawer-nav a:hover{ color:var(--accent); }
body.motyw-grafit .lp-drawer-tel{ background:var(--accent); color:var(--bg); }

@media (max-width:900px){
  body.motyw-fiolet .f5-nav-links,
  body.motyw-grafit .nav-links{ display:none; }
  body.motyw-fiolet .f5-nav-phone{ display:none; }
  body.motyw-grafit .nav .btn-accent{ display:none; }
  body.motyw-fiolet .lp-burger,
  body.motyw-grafit .lp-burger{ display:inline-flex; }
}

/* Notka „to podgląd" pod formularzem na demie (odsłania ją JS po wysłaniu). */
.snw-podglad-info{ margin:14px 0 0; padding:12px 15px; border-radius:10px; font-size:14px; line-height:1.5; }
/* Tło SOLIDNE (nie przezroczyste): okno „Darmowa wycena" jest ciemne mimo
   jasnego motywu, więc ciemny tekst na przezroczystym tle tam znikał. Jasny
   box z ciemnym tekstem czyta się i na ciemnym oknie, i na jasnej sekcji. */
body.motyw-fiolet .snw-podglad-info{ color:var(--ink); background:#ECE9FB; border:1px solid rgba(90,70,242,.4); }
body.motyw-grafit .snw-podglad-info{ color:var(--text); background:rgba(198,242,78,.07); border:1px solid rgba(198,242,78,.3); }

/* ══ DEMO: Mat Floor System — motyw „mfs" (ciemny premium, projekt z Design) ══
   Układ siedzi w inline-style w treści demа. Tu tylko: baza, responsywność
   (nav znika ≤860px — brak menu mobilnego w projekcie, zostaje logo+telefon;
   szeroka realizacja stackuje ≤700px), FAQ i przestylowany [snw_formularz]. */
body.motyw-mfs{ background:#171717; color:#F2F2F2; }
body.motyw-mfs a:hover{ color:#C9A876; }
body.motyw-mfs summary{ list-style:none; }
body.motyw-mfs summary::-webkit-details-marker{ display:none; }
body.motyw-mfs details[open] .faq-plus{ transform:rotate(45deg); }
/* MFS — hover: linki, przyciski, karty usług, wiersze kontaktu */
body.motyw-mfs a{ transition:color .18s ease; }
body.motyw-mfs .nav-links a:hover,
body.motyw-mfs footer a:hover{ color:#C9A876 !important; }
body.motyw-mfs .mfs-social{ transition:border-color .2s ease, color .2s ease, background-color .2s ease; }
body.motyw-mfs .mfs-social:hover{ border-color:rgba(176,141,87,.7) !important; background-color:rgba(176,141,87,.08); }
body.motyw-mfs .mfs-btn-primary{ transition:background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
body.motyw-mfs .mfs-btn-primary:hover{ background:#C9A876 !important; transform:translateY(-2px); box-shadow:0 12px 26px -12px rgba(176,141,87,.75); }
body.motyw-mfs .mfs-btn-outline{ transition:border-color .2s ease, color .2s ease, background-color .2s ease, transform .2s ease; }
body.motyw-mfs .mfs-btn-outline:hover{ border-color:rgba(176,141,87,.75) !important; color:#C9A876 !important; background-color:rgba(176,141,87,.08); transform:translateY(-2px); }
body.motyw-mfs .mfs-btn-outline-dark{ transition:border-color .2s ease, color .2s ease, background-color .2s ease, transform .2s ease; }
body.motyw-mfs .mfs-btn-outline-dark:hover{ border-color:rgba(176,141,87,.75) !important; color:#8A6B3A !important; background-color:rgba(176,141,87,.08); transform:translateY(-2px); }
body.motyw-mfs .mfs-btn-phone{ transition:background-color .2s ease, border-color .2s ease, color .2s ease; }
body.motyw-mfs .mfs-btn-phone:hover{ background-color:rgba(176,141,87,.14); border-color:rgba(176,141,87,.85) !important; color:#C9A876 !important; }
body.motyw-mfs .mfs-svc{ transition:transform .22s ease, box-shadow .22s ease; }
body.motyw-mfs .mfs-svc:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -22px rgba(0,0,0,.55); }
body.motyw-mfs .mfs-contact-row{ transition:background-color .2s ease; }
body.motyw-mfs .mfs-contact-row:hover{ background-color:#242320 !important; }
/* MFS — hamburger + menu mobilne od tabletu w dół (≤1024px); nav na desktopie */
body.motyw-mfs .mfs-burger{ display:none; }
body.motyw-mfs .mfs-menu{ display:none; }
body.motyw-mfs .mfs-hero-br{ display:none; }
@media (max-width:1024px){
  body.motyw-mfs .nav-links{ display:none !important; }
  body.motyw-mfs .mfs-btn-phone{ display:none !important; }
  body.motyw-mfs .mfs-burger{ display:inline-flex; flex-direction:column; justify-content:center; gap:5px; flex:none; width:46px; height:46px; padding:0; background:transparent; border:1px solid rgba(184,188,192,.28); border-radius:2px; cursor:pointer; }
  body.motyw-mfs .mfs-burger span{ display:block; width:20px; height:2px; margin:0 auto; background:#E8E8E8; transition:transform .25s ease, opacity .2s ease; }
  body.motyw-mfs .mfs-burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  body.motyw-mfs .mfs-burger.is-open span:nth-child(2){ opacity:0; }
  body.motyw-mfs .mfs-burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  body.motyw-mfs .mfs-menu{ display:block; position:fixed; inset:0; z-index:40; background:rgba(16,16,16,.62); backdrop-filter:blur(2px); opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; }
  body.motyw-mfs .mfs-menu.is-open{ opacity:1; visibility:visible; }
  body.motyw-mfs .mfs-menu__panel{ position:absolute; top:0; right:0; height:100%; width:min(320px,84vw); box-sizing:border-box; background:#1C1C1C; border-left:1px solid rgba(184,188,192,.14); padding:96px 30px 40px; display:flex; flex-direction:column; gap:2px; transform:translateX(100%); transition:transform .28s ease; overflow-y:auto; }
  body.motyw-mfs .mfs-menu.is-open .mfs-menu__panel{ transform:translateX(0); }
  body.motyw-mfs .mfs-menu__panel a{ padding:16px 2px; font-family:'Sora',sans-serif; font-weight:600; font-size:18px; color:#E8E8E8; border-bottom:1px solid rgba(184,188,192,.10); }
  body.motyw-mfs .mfs-menu__panel a:hover{ color:#C9A876 !important; }
  body.motyw-mfs .mfs-menu__tel{ margin-top:24px; border-bottom:none !important; background:#B08D57; color:#171717 !important; text-align:center; border-radius:2px; padding:15px 20px !important; transition:background-color .2s ease; }
  body.motyw-mfs .mfs-menu__panel a.mfs-menu__tel:hover{ background:#C9A876 !important; color:#171717 !important; }
}
/* MFS — centrowanie nagłówków sekcji (eyebrow + tytuł + lead) na mobilce */
@media (max-width:640px){
  body.motyw-mfs .mfs-eyebrow{ justify-content:center; text-align:center; }
  body.motyw-mfs .mfs-eyebrow > span:first-child{ display:none; }
  body.motyw-mfs .mfs-hero-sep{ display:none; }
  body.motyw-mfs .mfs-hero-br{ display:inline; }
  body.motyw-mfs .mfs-rejon{ justify-content:center !important; text-align:center; }
  body.motyw-mfs .mfs-rejon > div{ flex-direction:column; gap:14px; }
  body.motyw-mfs h1,
  body.motyw-mfs h2{ text-align:center; margin-left:auto !important; margin-right:auto !important; }
  body.motyw-mfs .mfs-lead{ text-align:center; margin-left:auto !important; margin-right:auto !important; }
  body.motyw-mfs .mfs-hero-btny{ justify-content:center; margin-left:auto; margin-right:auto; }
}
@media (max-width:700px){ body.motyw-mfs .real-wide{ grid-column:span 1 !important; } }

/* [snw_formularz] przestylowany na ciemną kartę projektu (deski/złoto/srebro) */
body.motyw-mfs .mfs-form .form{ display:flex; flex-direction:column; gap:20px; background:#1C1C1C; border:1px solid rgba(184,188,192,.16); padding:clamp(28px,3.4vw,44px); border-radius:2px; }
body.motyw-mfs .mfs-form .form__rzad{ gap:20px; }
body.motyw-mfs .mfs-form .pole{ margin:0; }
body.motyw-mfs .mfs-form .pole > label{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.20em; color:#8E8E8E; text-transform:uppercase; }
body.motyw-mfs .mfs-form .pole input,
body.motyw-mfs .mfs-form .pole textarea{ background:#171717; border:1px solid rgba(184,188,192,.20); color:#F2F2F2; border-radius:2px; font-size:16px; padding:15px 16px; }
body.motyw-mfs .mfs-form .pole input:focus,
body.motyw-mfs .mfs-form .pole textarea:focus{ border-color:#B08D57; outline:none; }
body.motyw-mfs .mfs-form .pole input::placeholder,
body.motyw-mfs .mfs-form .pole textarea::placeholder{ color:#6E6E6E; }
body.motyw-mfs .mfs-form .zgoda label{ color:#8E8E8E; }
body.motyw-mfs .mfs-form .zgoda a{ color:#B08D57; }
body.motyw-mfs .mfs-form .btn--primary{ background:#B08D57; color:#171717; border:none; border-radius:2px; font-family:'Sora',sans-serif; font-weight:700; }
body.motyw-mfs .mfs-form .btn--primary:hover{ background:#C9A876; color:#171717; }
body.motyw-mfs .mfs-form .form__blad{ background:rgba(176,141,87,.10); border:1px solid #B08D57; color:#e6cfa8; border-radius:2px; }
body.motyw-mfs .mfs-form .snw-podglad-info{ background:#201f1b; border:1px solid rgba(176,141,87,.45); color:#d3c3a5; border-radius:2px; }

/* Pływający „Darmowa wycena" (snw-klient.php) — złoto pod tę markę */
body.motyw-mfs .snw-wycena{ background:#B08D57; color:#171717; border-radius:2px; }
body.motyw-mfs .snw-wycena:hover{ background:#C9A876; color:#171717; }

/* Galeria realizacji — kafle klikalne + lightbox z lewo/prawo (jak w przykładach) */
/* Stała wysokość rzędu + height:100% + object-fit:cover = kafle wypełniają się
   bez rozciągania (samo aspect-ratio gryzło się z align-items:stretch grida). */
body.motyw-mfs .mfs-gallery{ grid-auto-rows:clamp(200px,22vw,290px); align-items:stretch; }
body.motyw-mfs .mfs-gallery > *{ min-width:0; height:100%; }
body.motyw-mfs .mfs-gallery img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:700px){ body.motyw-mfs .mfs-gallery{ grid-auto-rows:clamp(170px,46vw,240px); } }
body.motyw-mfs #realizacje img[data-lb]{ transition:opacity .15s ease; }
body.motyw-mfs #realizacje img[data-lb]:hover{ opacity:.86; }
body.motyw-mfs .lb{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(16,16,16,.93); backdrop-filter:blur(4px); }
body.motyw-mfs .lb.is-open{ display:flex; }
body.motyw-mfs .lb__inner{ position:relative; max-width:min(1100px,92vw); max-height:90vh; }
body.motyw-mfs .lb__inner img{ width:auto; max-width:100%; height:auto; max-height:90vh; object-fit:contain; border-radius:2px; display:block; }
body.motyw-mfs .lb__x{ position:absolute; top:-14px; right:-14px; width:40px; height:40px; border-radius:2px; border:none; cursor:pointer; background:#B08D57; color:#171717; font-size:22px; line-height:1; }
body.motyw-mfs .lb__x:hover{ background:#C9A876; }
body.motyw-mfs .lb__nav{ flex:none; width:52px; height:52px; border-radius:2px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; font-size:30px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s, border-color .2s; }
body.motyw-mfs .lb__nav:hover{ background:#B08D57; color:#171717; border-color:#B08D57; }
body.motyw-mfs .lb__prev{ margin-right:20px; }
body.motyw-mfs .lb__next{ margin-left:20px; }
@media (max-width:560px){ body.motyw-mfs .lb__nav{ width:44px; height:44px; font-size:26px; } body.motyw-mfs .lb__prev{ margin-right:8px; } body.motyw-mfs .lb__next{ margin-left:8px; } }

/* ── Baner zgody na ciasteczka (mu-plugin snw-cookies) ───────────
   Dolna belka pełnej szerokości, JASNE tło — wyraźnie odcina się od ciemnego
   hero. Treść w kontenerze max-width (tekst z lewej, przyciski z prawej).
   Oba przyciski TEJ SAMEJ wielkości i dostępności (wymóg RODO — bez dark
   patterns): różni je tylko kolor. „Akceptuję" wypełniony akcentem (dominuje),
   „Odrzucam" outline (spokojniejszy, ale pełnoprawny przycisk tej samej wielkości).
   Poniżej drawera (99) i okna. Logika (data-consent, #snw-cookies, JS) bez zmian. */
.snw-cookies{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  background:var(--paper-2); color:var(--text);
  border-top:1px solid var(--line);
  box-shadow:0 -12px 32px -14px rgba(20,28,38,.30);
  font-size:14px; line-height:1.55;
}
.snw-cookies__wrap{
  max-width:var(--maxw); margin:0 auto;
  padding:16px clamp(18px,5vw,40px);
  display:flex; align-items:center; flex-wrap:wrap; gap:16px 28px;
}
.snw-cookies__tresc{ flex:1 1 420px; min-width:240px; }
.snw-cookies__tyt{ margin:0 0 4px; font-family:var(--font-display); font-weight:800; font-size:16px; letter-spacing:-.01em; color:var(--ink); }
.snw-cookies__txt{ margin:0; color:var(--muted); }
.snw-cookies a{ color:var(--accent-text); text-decoration:underline; }
.snw-cookies a:hover{ text-decoration:none; }
.snw-cookies__btny{ display:flex; gap:12px; flex:none; }
.snw-cookies button{
  min-width:150px; padding:13px 26px; border-radius:11px;
  font-family:inherit; font-weight:700; font-size:15px; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.snw-cookies__akcept{ background:var(--accent); color:var(--ink); border:1px solid var(--accent); }
.snw-cookies__akcept:hover{ background:var(--accent-deep); border-color:var(--accent-deep); }
.snw-cookies__odrzuc{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.snw-cookies__odrzuc:hover{ background:var(--paper); border-color:var(--muted); }
/* Mobile: kompaktowa belka na dole. Przyciski w JEDNYM rzędzie, każdy flex:1 1 0
   = równa szerokość, więc oba mają ten sam rozmiar i obszar klikalny (RODO, bez
   dark patterns). min-width:0 kasuje bazowe 150px, inaczej dwa nie zmieszczą się
   w rzędzie. .snw-cookies__tresc dostaje flex:0 0 auto — w kolumnie flex-basis:420px
   z desktopu stawało się WYSOKOŚCIĄ i rozpychało baner na pół ekranu. Czcionka
   i line-height delikatnie mniejsze, żeby belka była niższa. */
@media (max-width:640px){
  .snw-cookies{ font-size:13px; line-height:1.45; }
  .snw-cookies__wrap{ flex-direction:column; align-items:stretch; gap:12px; padding:13px clamp(16px,5vw,40px); }
  .snw-cookies__tresc{ flex:0 0 auto; }
  .snw-cookies__tyt{ font-size:15px; }
  .snw-cookies__btny{ flex-direction:row; gap:10px; }
  .snw-cookies button{ flex:1 1 0; min-width:0; width:auto; padding:10px 12px; font-size:14px; }
}

/* Picker branż: dokładnie 4 kolumny na desktopie (8 kafli = 2 czyste rzędy),
   2 na tablecie, 1 na telefonie. Sztywne kolumny, nie auto-fit, żeby nie
   wyszło 5+3 ani 3-orphan. */
body.snw-lp .lp-branze-siatka{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:820px){ body.snw-lp .lp-branze-siatka{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:440px){ body.snw-lp .lp-branze-siatka{ grid-template-columns:1fr; } }

/* Rozbudowany footer: 3 kolumny (marka+tagline / nawigacja / kontakt) + pasek
   prawny. Linki sekcji absolutne (/#...), więc ten sam footer działa na hubie
   i na stronach fachów. NIP celowo pominięty — placeholder w danych, nie
   wpisujemy zmyślonego. Rok w © na sztywno (2026). */
body.snw-lp .lp-foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px 32px; }
body.snw-lp .lp-foot-head{ font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#f0a53a; margin:0 0 16px; }
body.snw-lp .lp-foot-tagline{ color:rgba(255,255,255,.6); font-size:15px; line-height:1.65; margin:20px 0 0; max-width:30em; }
body.snw-lp .lp-foot-col a{ display:flex; align-items:center; gap:9px; color:rgba(255,255,255,.72); font-size:15px; padding:6px 0; transition:color .15s ease; }
body.snw-lp .lp-foot-col a:hover{ color:#fff; }
body.snw-lp .lp-foot-col a svg{ flex:none; }
body.snw-lp .lp-foot-bot{ display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; justify-content:space-between; margin:48px 0 0; padding:24px 0 0; border-top:1px solid rgba(255,255,255,.1); }
body.snw-lp .lp-foot-cr{ color:rgba(255,255,255,.55); font-size:13.5px; }
body.snw-lp .lp-foot-bot a{ color:rgba(255,255,255,.7); font-size:13.5px; transition:color .15s ease; }
body.snw-lp .lp-foot-bot a:hover{ color:#fff; }
@media (max-width:760px){ body.snw-lp .lp-foot-grid{ grid-template-columns:1fr; gap:30px; } }

/* Hero na mobile: gdy kolumny (tekst + formularz) rozjeżdżają się w pion,
   wyśrodkowujemy treść banera (eyebrow, H1, akapit, chipy). Formularz pod
   spodem zostaje lewostronny — pola i tak są do lewej. */
@media (max-width:900px){
  body.snw-lp .lp-hero-uklad{ justify-content:center; }
  body.snw-lp .lp-hero-tekst{ flex-basis:100%; text-align:center; }
  body.snw-lp .lp-hero-tekst p{ margin-left:auto; margin-right:auto; }
  body.snw-lp .lp-hero-chipy{ justify-content:center; }
}

/* Strony powłoki bazowej (404, a przez nią też /polityka-prywatnosci/, dopóki
   nie powstanie) — krótka treść nie wypełniała okna, footer wisiał w połowie.
   Sticky footer: body w kolumnę na pełną wysokość, treść rośnie, footer siada
   na dole. Scope po error404, żeby NIE dotknąć landingu (też snw-lp, ale długi). */
body.error404{ display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; }
body.error404 #tresc{ flex:1 0 auto; }

/* Grafit używa TYLKO Sory. Bez tego demo dziedziczy z motywu bazowe fonty:
   Archivo (h1,h2,h3), Mono (.eyebrow), Inter (pola formularza) — wszystkie
   font-display:swap. Ładują się (~250 KB) i skacząc przesuwają bento
   (zmierzone: CLS 0.11, cause „Web font loaded"). Wymuszenie Sory sprawia,
   że tamte fonty nie są nigdzie użyte, więc się nie pobierają i nie podmieniają.
   Sora jest optional+preload → maluje się od razu, bez skoku. */
body.motyw-grafit h1, body.motyw-grafit h2, body.motyw-grafit h3,
body.motyw-grafit .eyebrow,
body.motyw-grafit .pole label,
body.motyw-grafit .pole input, body.motyw-grafit .pole textarea{
  font-family:'Sora', system-ui, -apple-system, sans-serif;
}

/* =========================================================================
   MOTYW PRODRIVE — demo Akademia Jazdy PRODRIVE PLUS (port z Claude Design v2)
   Jasny: granat #16223F + żółć #FFD100 + błękit #3DA9FC, font Sora.
   Cały wygląd niesie inline w treści; tu tylko typografia bazowa, marquee,
   formularz [snw_formularz], mechanika FAQ i responsywność (hamburger).
   ========================================================================= */
body.motyw-prodrive{ background:#F7F7F5; color:#0F172A; font-family:-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif; }
body.motyw-prodrive h1, body.motyw-prodrive h2, body.motyw-prodrive h3{ font-family:'Sora',-apple-system,sans-serif; margin:0; }
body.motyw-prodrive a{ text-decoration:none; transition:color .18s ease, opacity .18s ease; }
@keyframes snw-pp-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* Hover linków (inline color trzeba przebić !important) */
body.motyw-prodrive .pp-nav-links a:hover,
body.motyw-prodrive .pp-mobile-menu a:not([href^="tel"]):hover,
body.motyw-prodrive footer a:hover{ color:#3DA9FC !important; }
body.motyw-prodrive .pp-nav-cta a:hover,
body.motyw-prodrive .pp-mobile-menu a[href^="tel"]:hover{ opacity:.9; }

/* FAQ — natywne <details>: chowamy domyślny znacznik, obracamy "+" na "x" */
body.motyw-prodrive .pp-faq-sum{ list-style:none; }
body.motyw-prodrive .pp-faq-sum::-webkit-details-marker{ display:none; }
body.motyw-prodrive details[open] .pp-faq-glyph{ transform:rotate(45deg); }

/* Formularz [snw_formularz] w stylu Design: biała karta, zaokrąglone pola, żółty przycisk */
body.motyw-prodrive .pp-form .form{ background:#fff; border-radius:22px; padding:clamp(26px,3vw,38px); display:flex; flex-direction:column; gap:18px; }
body.motyw-prodrive .pp-form .form__rzad{ gap:18px; }
body.motyw-prodrive .pp-form .pole{ margin:0; }
body.motyw-prodrive .pp-form .pole > label{ font-size:13px; font-weight:800; color:#16223F; }
body.motyw-prodrive .pp-form .pole input,
body.motyw-prodrive .pp-form .pole textarea{ padding:14px; border:1.5px solid #E4E2DA; border-radius:12px; font-size:15px; color:#0F172A; background:#fff; }
body.motyw-prodrive .pp-form .pole input:focus,
body.motyw-prodrive .pp-form .pole textarea:focus{ border-color:#3DA9FC; outline:none; }
body.motyw-prodrive .pp-form .pole input::placeholder,
body.motyw-prodrive .pp-form .pole textarea::placeholder{ color:#9aa2b1; }
body.motyw-prodrive .pp-form .zgoda{ font-size:13px; color:#5B6478; }
body.motyw-prodrive .pp-form .zgoda a{ color:#3DA9FC; }
body.motyw-prodrive .pp-form .btn--primary{ background:#FFD100; color:#16223F; border:none; font-weight:800; padding:17px; border-radius:999px; font-size:16px; cursor:pointer; transition:background-color .2s ease; }
body.motyw-prodrive .pp-form .btn--primary:hover{ background:#ffd933; color:#16223F; }
body.motyw-prodrive .pp-form .form__blad{ background:#fdecea; border:1px solid #E2574C; color:#a3352b; border-radius:12px; }
body.motyw-prodrive .pp-form .snw-podglad-info{ background:#eef6ff; border:1px solid rgba(61,169,252,.4); color:#22405e; border-radius:12px; }
body.motyw-prodrive .pp-form .cf-turnstile{ margin:0; }

/* Responsywność: poniżej 900px chowamy poziomą nawigację i pokazujemy hamburger */
@media (max-width:900px){
  body.motyw-prodrive .pp-nav-links{ display:none !important; }
  body.motyw-prodrive .pp-nav-cta{ display:none !important; }
  body.motyw-prodrive .pp-burger{ display:flex !important; }
}
/* PRODRIVE hover — delikatne podniesienie przycisków, kart i ikon */
body.motyw-prodrive .pp-btn{ transition:transform .18s ease, filter .18s ease; }
body.motyw-prodrive .pp-btn:hover{ transform:translateY(-2px); filter:brightness(1.05); }
body.motyw-prodrive .pp-card{ transition:transform .2s ease, box-shadow .2s ease; }
body.motyw-prodrive .pp-card:hover{ transform:translateY(-4px); box-shadow:0 18px 38px -20px rgba(15,23,42,.45); }
body.motyw-prodrive .pp-social{ transition:transform .18s ease, background-color .18s ease; }
body.motyw-prodrive .pp-social:hover{ transform:translateY(-2px); background:rgba(255,255,255,0.22) !important; }
/* PRODRIVE — słuchawka „dzwoni" przy numerze w belce/menu */
body.motyw-prodrive .pp-ring{ transform-origin:center; animation:pp-ring 1.6s ease-in-out infinite; }
@keyframes pp-ring{ 0%,58%,100%{ transform:rotate(0); } 8%{ transform:rotate(16deg); } 16%{ transform:rotate(-14deg); } 24%{ transform:rotate(14deg); } 32%{ transform:rotate(-10deg); } 40%{ transform:rotate(6deg); } 48%{ transform:rotate(0); } }
/* PRODRIVE mobile — hero wyśrodkowany, żółty kształt schowany (zasłaniał tekst) */
@media (max-width:720px){
  body.motyw-prodrive .pp-hero-shape{ display:none; }
  body.motyw-prodrive .pp-hero-text{ text-align:center; }
  body.motyw-prodrive .pp-hero-text p{ margin-left:auto; margin-right:auto; }
  body.motyw-prodrive .pp-hero-btny{ justify-content:center; }
}
/* PRODRIVE mobile — mniejsze paddingi sekcji (60px) + wyśrodkowane nagłówki */
@media (max-width:720px){
  body.motyw-prodrive section{ padding-top:60px !important; padding-bottom:60px !important; }
  body.motyw-prodrive .pp-sechead{ justify-content:center !important; text-align:center; }
  body.motyw-prodrive .pp-onas-text{ text-align:center; }
  body.motyw-prodrive .pp-onas-pills{ justify-content:center; }
}

/* =========================================================================
   MOTYW PMGGW — demo Plus-Minus GGW (port z Claude Design v2)
   Czerń #0E1519 + żółć elektryczna #FFE500. Space Grotesk + IBM Plex Sans.
   Fonty zhostowane lokalnie (assets/fonts-pm), oba zmienne: jeden plik = wszystkie wagi.
   ========================================================================= */
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:400 700; font-display:swap; src:url('fonts-pm/space-grotesk-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:400 700; font-display:swap; src:url('fonts-pm/space-grotesk-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:400 600; font-display:swap; src:url('fonts-pm/ibm-plex-sans-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:400 600; font-display:swap; src:url('fonts-pm/ibm-plex-sans-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
body.motyw-pmggw{ background:#F2F3F1; color:#0E1519; font-family:'IBM Plex Sans',-apple-system,sans-serif;
  --pm-akcent:#FFE500;   /* żółć akcentu, nadpisywana per demo */
  --pm-akcent-ciemny:#876B00; /* ta sama żółć przyciemniona do tekstu na jasnym tle (kontrast 4.56) */ }
body.motyw-pmggw h1, body.motyw-pmggw h2, body.motyw-pmggw h3{ font-family:'Space Grotesk',sans-serif; margin:0; }
body.motyw-pmggw a{ text-decoration:none; transition:color .18s ease, background-color .18s ease; }
@keyframes pm-pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.8); } }
/* FAQ: chowamy natywny znacznik, obracamy "+" */
body.motyw-pmggw summary{ list-style:none; }
body.motyw-pmggw summary::-webkit-details-marker{ display:none; }
body.motyw-pmggw details[open] .q-sign{ transform:rotate(45deg); }
/* hovery przeniesione z eksportu Design (style-hover/style-focus) */
body.motyw-pmggw .pm-h1:hover{ color:var(--pm-akcent) !important; }
body.motyw-pmggw .pm-h2:hover{ background:#fff !important; }
body.motyw-pmggw .pm-h3:hover{ background:rgba(255,255,255,.1) !important; }
body.motyw-pmggw .pm-h4:hover{ background:#fff !important; color:#0E1519 !important; }
body.motyw-pmggw .pm-h5:hover{ border-color:#0E1519 !important; }
body.motyw-pmggw .pm-h6:hover{ border-color:#0E1519 !important; transform:translateY(-3px) !important; }
body.motyw-pmggw .pm-h7:hover{ transform:translateY(-3px) !important; }
body.motyw-pmggw .pm-h8:focus{ border-color:#0E1519 !important; background:#fff !important; }
body.motyw-pmggw .pm-h9:hover{ background:var(--pm-akcent) !important; color:#0E1519 !important; }
body.motyw-pmggw .pm-h10:hover{ border-color:var(--pm-akcent) !important; color:var(--pm-akcent) !important; }
/* Formularz [snw_formularz] w stylu Design */
body.motyw-pmggw .pm-form .form{ display:flex; flex-direction:column; gap:15px; }
body.motyw-pmggw .pm-form .form__rzad{ gap:15px; }
body.motyw-pmggw .pm-form .pole{ margin:0; }
body.motyw-pmggw .pm-form .pole > label{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:#4b585f; }
body.motyw-pmggw .pm-form .pole input,
body.motyw-pmggw .pm-form .pole textarea{ padding:14px 15px; font-size:16px; color:#0E1519; border:1px solid rgba(14,21,25,.18); border-radius:10px; background:#F7F8F6; }
body.motyw-pmggw .pm-form .pole input:focus,
body.motyw-pmggw .pm-form .pole textarea:focus{ border-color:#0E1519; background:#fff; outline:none; }
body.motyw-pmggw .pm-form .zgoda{ font-size:13px; color:#4b585f; }
body.motyw-pmggw .pm-form .zgoda a{ color:#8a7100; }
body.motyw-pmggw .pm-form .btn--primary{ height:56px; border:none; border-radius:999px; background:#0E1519; color:#fff; font-weight:600; font-size:16px; cursor:pointer; }
body.motyw-pmggw .pm-form .btn--primary:hover{ background:var(--pm-akcent); color:#0E1519; }
body.motyw-pmggw .pm-form .form__blad{ background:#fff4f3; border:1px solid #e2574c; color:#8f2a20; border-radius:10px; }
body.motyw-pmggw .pm-form .snw-podglad-info{ background:#fffbe6; border:1px solid rgba(138,113,0,.4); color:#6b5900; border-radius:10px; }
/* Responsywność: hamburger od tabletu w dół */
@media (max-width:1024px){
  body.motyw-pmggw .pm-nav-links{ display:none !important; }
  body.motyw-pmggw .pm-nav-cta{ display:none !important; }
  body.motyw-pmggw .pm-burger{ display:flex !important; }
}
/* PMGGW — sekcja O nas: na mobilce zdjęcie pod tekstem, żeby najpierw czytać treść */
@media (max-width:820px){
  body.motyw-pmggw .pm-onas-grid{ flex-direction:column-reverse; }
  /* W kolumnie `flex-basis` z `flex:1 1 400px` staje się WYSOKOŚCIĄ, więc kontener
     rósł do 400px przy zdjęciu wysokim na 300px, a żółty prostokąt (height:100%)
     wystawał pod spodem. `flex:0 0 auto` każe obu kolumnom przylegać do treści. */
  body.motyw-pmggw .pm-onas-foto{ width:100%; flex:0 0 auto !important; }
  body.motyw-pmggw .pm-onas-tekst{ width:100%; flex:0 0 auto !important; }
}
/* PMGGW — słuchawka „dzwoni" przy numerze w belce i menu */
body.motyw-pmggw .pm-ring{ transform-origin:center; animation:pm-ring 1.6s ease-in-out infinite; }
@keyframes pm-ring{ 0%,58%,100%{ transform:rotate(0); } 8%{ transform:rotate(16deg); } 16%{ transform:rotate(-14deg); } 24%{ transform:rotate(14deg); } 32%{ transform:rotate(-10deg); } 40%{ transform:rotate(6deg); } 48%{ transform:rotate(0); } }
/* PMGGW mobile — wyśrodkowanie nagłówków sekcji, paska awaryjnego i bloku „O nas" */
@media (max-width:720px){
  body.motyw-pmggw .pm-eyebrow{ text-align:center; }
  body.motyw-pmggw h2{ text-align:center; }
  body.motyw-pmggw .pm-oferta-head{ justify-content:center !important; text-align:center; }
  /* pasek awaryjny: znaczek AWARIA, tekst i telefon jedno pod drugim, na środku */
  body.motyw-pmggw .pm-bar{ justify-content:center !important; text-align:center; }
  body.motyw-pmggw .pm-bar-left{ flex-direction:column; align-items:center !important; text-align:center; gap:10px !important; }
  /* O nas: cały blok tekstowy na środku */
  body.motyw-pmggw .pm-onas-tekst{ text-align:center; }
  body.motyw-pmggw .pm-onas-tekst p{ margin-left:auto; margin-right:auto; }
  body.motyw-pmggw .pm-onas-chipy{ justify-content:center; }
}
/* PMGGW mobile — baner wyśrodkowany (plakietka, nagłówek, opis, przyciski) */
@media (max-width:720px){
  body.motyw-pmggw h1{ text-align:center; }
  body.motyw-pmggw .pm-hero-l{ text-align:center; }
  body.motyw-pmggw .pm-hero-r{ text-align:center; }
  body.motyw-pmggw .pm-hero-r p{ margin-left:auto; margin-right:auto; }
  body.motyw-pmggw .pm-hero-btny{ justify-content:center; }
}
/* MFS — wariant galerii pod zdjęcia PIONOWE (telefon klienta). Poziome kafle
   przycinały portret o połowę; tu kafel jest pionowy, więc kadr zostaje cały. */
body.motyw-mfs .mfs-gallery--pion{ grid-auto-rows:clamp(320px,38vw,480px); }
@media (max-width:700px){ body.motyw-mfs .mfs-gallery--pion{ grid-auto-rows:clamp(300px,100vw,440px); } }
/* MFS — na wąskim ekranie adres e-mail nie mieści się w kafelku kontaktu
   (Sora 700 / 19px). Zmniejszamy i pozwalamy złamać, żeby nie wychodził poza ramkę. */
@media (max-width:560px){
  body.motyw-mfs .mfs-contact-row[href^="mailto"] > span > span:last-child{ font-size:15px !important; overflow-wrap:anywhere; line-height:1.35; }
  body.motyw-mfs .mfs-contact-row{ padding:22px 20px !important; gap:14px !important; }
  body.motyw-mfs .mfs-contact-row > span{ min-width:0; }
}
/* PMGGW — galeria realizacji + lightbox (demo KM-OJSI; wzorzec z motywu mfs, akcent żółty) */
body.motyw-pmggw .pm-gal img{ transition:opacity .15s ease; }
body.motyw-pmggw .pm-gal img:hover{ opacity:.85; }
body.motyw-pmggw .lb{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(10,14,18,.93); backdrop-filter:blur(4px); }
body.motyw-pmggw .lb.is-open{ display:flex; }
body.motyw-pmggw .lb__inner{ position:relative; max-width:min(1100px,92vw); max-height:90vh; }
body.motyw-pmggw .lb__inner img{ width:auto; max-width:100%; height:auto; max-height:90vh; object-fit:contain; border-radius:14px; display:block; }
body.motyw-pmggw .lb__x{ position:absolute; top:-14px; right:-14px; width:40px; height:40px; border-radius:999px; border:none; cursor:pointer; background:var(--pm-akcent); color:#0E1519; font-size:22px; line-height:1; }
body.motyw-pmggw .lb__x:hover{ background:#fff; }
body.motyw-pmggw .lb__nav{ flex:none; width:52px; height:52px; border-radius:999px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; font-size:30px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s, border-color .2s, color .2s; }
body.motyw-pmggw .lb__nav:hover{ background:var(--pm-akcent); color:#0E1519; border-color:var(--pm-akcent); }
body.motyw-pmggw .lb__prev{ margin-right:20px; }
body.motyw-pmggw .lb__next{ margin-left:20px; }
@media (max-width:560px){ body.motyw-pmggw .lb__nav{ width:44px; height:44px; font-size:26px; } body.motyw-pmggw .lb__prev{ margin-right:8px; } body.motyw-pmggw .lb__next{ margin-left:8px; } }

/* KM-OJSI — akcent zestrojony z logo klienta (koło w logo: #FFCA02).
   Dwie prawie identyczne żółcie obok siebie czytają się jak błąd, nie jak wariant. */
body.demo-km-ojsi{ --pm-akcent:#FFCA02; --pm-akcent-ciemny:#876B00; }
/* Nadkreślenia sekcji na jasnym tle: #8a7100 dawało kontrast 4.25, poniżej progu 4.5.
   Dotyczy WSZYSTKICH dem na tym motywie, więc poprawka jest wspólna. */
body.motyw-pmggw .pm-eyebrow{ color:var(--pm-akcent-ciemny) !important; }
/* PMGGW — przyciski „zobacz więcej" na końcu sekcji (dwa warianty tła) */
body.motyw-pmggw .pm-wiecej{ display:inline-flex; align-items:center; gap:9px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15.5px; padding:14px 26px; border-radius:999px; transition:transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease; }
body.motyw-pmggw .pm-wiecej:hover{ transform:translateY(-2px); }
body.motyw-pmggw .pm-wiecej--jasny{ border:1px solid rgba(14,21,25,.28); color:#0E1519; }
body.motyw-pmggw .pm-wiecej--jasny:hover{ border-color:#0E1519; background:rgba(14,21,25,.05); }
body.motyw-pmggw .pm-wiecej--ciemny{ border:1px solid rgba(255,255,255,.35); color:#fff; }
body.motyw-pmggw .pm-wiecej--ciemny:hover{ border-color:var(--pm-akcent); color:var(--pm-akcent); background:rgba(255,255,255,.06); }
/* Tryb budowy — zaślepka wypełnia ekran. Bez belki i stopki hero zostawał
   wąskim paskiem u góry z pustką pod spodem. `dvh` obok `vh` dla przeglądarek
   mobilnych, gdzie 100vh liczone jest razem z chowanym paskiem adresu. */
body.snw-budowa .hero{ display:flex; align-items:center; min-height:100vh; min-height:100dvh; padding:64px 0; }
body.snw-budowa .hero .wrap{ width:100%; }