/* landing.css v2 — design system landingów spójny z portalem klient.webup.pl
   (Inter, niebieskawy #F1F5FB i granat #1E3A5F jak na jowes.webup.pl, akcent pomarańczowy #F97316, promienie 6/10/14/18, miękkie cienie).
   Per-landing akcent pomocniczy: klasa theme-* na <body> ustawia --lp (kolor ikon/badge/mockupów);
   CTA zawsze pomarańczowe jak w portalu. */
:root {
  /* paleta zbliżona do jowes.webup.pl: chłodniejsze, bardziej niebieskie tło i granatowe nagłówki */
  --bg:            #F1F5FB;
  --surface:       #FFFFFF;
  --border:        #DCE4EF;
  --border-soft:   #E9EFF7;
  --border-strong: #C3D0E2;
  /* Kolory marki wprost z logo (webup-logo.svg): pomarańcz #FF6F00, granat #27495B.
     Wcześniej stały tu przybliżenia z Tailwinda (#F97316/#1E3A5F) i logo nie zgadzało się
     z resztą strony. --accent-fg to przyciemniony wariant do TEKSTU — czysty #FF6F00 na
     bieli ma kontrast ok. 2,9:1, czyli poniżej progu WCAG AA dla treści. */
  --navy:          #27495B;
  --fg:            #0F172A;
  --fg-secondary:  #475569;
  --fg-muted:      #94A3B8;
  --accent:        #FF6F00;
  --accent-hover:  #E56400;   /* CIEMNIEJSZY — tylko :active (wcisniecie). Hover ZAWSZE rozjasnia:
                                 --accent-light, tak jak przycisk „Umow rozmowe" w nawigacji (Oskar 1.10.2026). */
  --accent-light:  #FF8A00;   /* jasniejszy pomarancz — stan hover, patrz .btn-primary:hover */
  --accent-soft:   #FFF4EA;
  --accent-fg:     #FF6F00;
  --green:         #16A34A;
  --green-soft:    #F0FDF4;
  --red:           #DC2626;
  --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-xl: 18px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04);
  --shadow:    0 1px 3px rgba(15,23,42,.05), 0 1px 2px rgba(15,23,42,.04);
  --shadow-lg: 0 8px 24px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04);
  --lp: #FF6F00; --lp-soft: #FFF4EA;   /* akcent landingu (nadpisywany przez theme-*) */
}
body.theme-workspace { --lp:#1A73E8; --lp-soft:#EFF6FF; }
body.theme-cookie    { --lp:#D97706; --lp-soft:#FFFBEB; }
body.theme-hosting   { --lp:#059669; --lp-soft:#ECFDF5; }
body.theme-strona    { --lp:#7C3AED; --lp-soft:#F5F3FF; }
body.theme-adgrants  { --lp:#1A73E8; --lp-soft:#EFF6FF; }
body.theme-ping      { --lp:#DC2626; --lp-soft:#FEF2F2; }
body.theme-domeny    { --lp:#0891B2; --lp-soft:#ECFEFF; }

/* rachunek za odnowienie domeny (domeny) */
.mock-bill { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); overflow:hidden; }
.mbill-head { padding:13px 16px; background:var(--bg); border-bottom:1px solid var(--border); font-size:.85rem; font-weight:700; color:var(--fg); }
.mbill-head span { display:block; font-size:.72rem; font-weight:500; color:var(--fg-muted); }
.mbill-row { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--border-soft); font-size:.86rem; color:var(--fg-secondary); }
.mbill-row .who { display:flex; align-items:center; gap:9px; }
.mbill-row .who i { width:9px; height:9px; border-radius:50%; background:var(--border-strong); display:inline-block; }
.mbill-row del { color:var(--fg-muted); }
/* wiersz „tu płacicie dziś" — to on ma boleć, więc jest wyróżniony na czerwono */
.mbill-row.you { background:#FEF2F2; border-left:3px solid var(--red); padding-left:13px; }
.mbill-row.you .who { color:var(--fg); font-weight:600; }
.mbill-row.you .who i { background:var(--red); }
.mbill-row.you del { color:var(--red); font-size:1.05rem; font-weight:700; text-decoration-thickness:2px; }
.mbill-row.you .mbill-guess { color:var(--red); font-weight:600; font-size:.82rem; }
.you-tag { display:inline-block; margin-left:8px; background:var(--red); color:#fff; font-size:.66rem;
  font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:3px 9px; border-radius:999px; vertical-align:middle; }
/* nasz wiersz — kontra do powyższego */
.mbill-row.we { background:color-mix(in srgb, var(--green) 8%, #fff); border-left:3px solid var(--green); padding-left:13px; }
.mbill-row.we .who { color:var(--fg); }
.mbill-row.we .who i { background:var(--green); }
.mbill-row.we b { color:var(--green); font-size:1.25rem; font-weight:800; letter-spacing:-.02em; }
/* Podsumowanie: bohaterem jest OSZCZĘDNOŚĆ, nie nasza cena. */
.mbill-save { padding:20px 18px; background:var(--green-soft); text-align:center;
  border-top:1px solid color-mix(in srgb, var(--green) 25%, transparent); }
.mbill-save .sv-cap { font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--green); }
.mbill-save .sv-big { font-size:2.4rem; font-weight:800; color:var(--green); letter-spacing:-.03em;
  line-height:1.05; margin:4px 0 6px; font-variant-numeric:tabular-nums; }
.mbill-save .sv-big small { display:block; font-size:.8rem; font-weight:600; color:var(--fg-secondary);
  letter-spacing:0; margin-top:2px; }
.mbill-save .sv-sub { font-size:.84rem; color:var(--fg-secondary); line-height:1.5; }
.mbill-save .sv-sub b { color:var(--green); font-weight:700; }
.mbill-save .sv-host { margin-top:12px; padding-top:11px; border-top:1px dashed color-mix(in srgb, var(--green) 30%, transparent);
  font-size:.82rem; color:var(--fg-secondary); line-height:1.5; }
.mbill-save .sv-host b { color:var(--fg); font-weight:700; }
.mbill-save .sv-host i { display:block; margin-top:4px; font-style:normal; font-size:.74rem; color:var(--fg-muted); }
/* domena klienta jako tytuł strony (personalizacja z linku ?d=) */
.hero h1 .h1-kicker { display:block; font-size:.86rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--green); margin-bottom:8px; }
/* stary wariant (pigułka) — zostaje dla makiety przed sprawdzeniem domeny */
.mbill-save > span { display:block; color:var(--fg-secondary); font-size:.9rem; line-height:1.5; }

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:var(--fg); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; }
img { max-width:100%; }
a { color:var(--accent-fg); }

/* ── NAV ── */
/* Pasek przezroczysty: tło strony ma pod niego wchodzić. Po przewinięciu dokładamy
   lekkie rozmycie, żeby linki nie zlewały się z treścią. */
nav { position:sticky; top:0; z-index:50; display:flex; align-items:center;
  justify-content:space-between; padding:14px 32px; background:transparent;
  border-bottom:1px solid transparent; transition:background .2s, border-color .2s, backdrop-filter .2s; }
nav.stuck { background:rgba(255,255,255,.82); backdrop-filter:blur(10px);
  border-bottom-color:var(--border-soft); }
.nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.nav-logo img { height:30px; display:block; }
/* Hamburger istnieje tylko na telefonie — reguły otwierania siedzą w media query na dole. */
.nav-toggle { display:none; }
.nav-burger { display:none; }
.nav-right { display:flex; align-items:center; gap:18px; }
.nav-link { color:var(--fg-secondary); text-decoration:none; font-size:.9rem; font-weight:500; }
.nav-link:hover { color:var(--fg); }
.nav-cta { display:inline-flex; align-items:center; background:var(--accent); color:#fff; text-decoration:none; font-weight:600; font-size:.9rem; padding:9px 18px; border-radius:var(--r); transition:.15s; white-space:nowrap; box-shadow:var(--shadow-sm); }
.nav-cta:hover { background:var(--accent-light); box-shadow:0 6px 18px rgba(255,111,0,.4); }
@media (max-width:560px){ .nav-link{display:none} }

/* ── HERO (jasne, 2 kolumny: copy + mockup) ── */
/* Hero landingu ma to samo ruchome tło co strona główna (warstwa .wu-bg wstrzykiwana
   przez wu_bg_html). Płaski gradient zostaje jako podkład pod plamami i jako wygląd
   awaryjny, gdy ktoś ma wyłączone animacje. `overflow:hidden` przycina plamy do sekcji. */
/* Hero landingu wchodzi POD pasek nawigacji — dokładnie tak jak .wu-hero na stronie
   głównej. Bez tego pasek stał na jasnym pasie tła strony i białe pozycje menu były
   na nim nieczytelne, mimo że hero niżej ma już ciemną plamę pod menu. */
.hero { position:relative; overflow:hidden; padding:96px 24px 88px; background:#fff; }
/* Ta sama biała powłoka co na stronie głównej — bez niej plamy biją w tekst. */
.hero::before { content:""; position:absolute; inset:0; z-index:1;
  background:rgba(255,255,255,.34); }
/* Treść hero musi być NAD warstwą tła — .wu-bg ma z-index 0. */
.hero > .hero-inner, .hero > .section-inner { position:relative; z-index:2; }
/* Plamy na pełnej mocy — dokładnie jak na stronie głównej. Przygaszenie do .55
   sprawiało, że górna część landingu wyglądała jak inny serwis. */
.hero > .wu-bg { opacity:1; }
/* Hero landingu ma sie otwierac tak jak strona glowna: z paskiem logotypow widocznym
   pod pierwszym ekranem. Zmierzone przy 1440x900 — glowna 676 px, landingi 885–963 px,
   wiec logotypy schodzily ponizej ekranu. Stad mniejsze marginesy, mniejszy tytul
   i ograniczona wysokosc makiety nizej. */
@media (min-width:761px){ .hero { margin-top:-73px; padding-top:calc(44px + 73px); padding-bottom:36px; } }
/* KAZDA strona ma konczyc pierwszy ekran w tym samym miejscu (Oskar 04.09). Same marginesy
   tego nie zalatwia, bo hero ma rozna ilosc tresci — zmierzone 511–710 px. Dlatego hero
   dostaje WSPOLNA wysokosc minimalna (najwyzsze z nich) i wysrodkowuje tresc w pionie:
   pasek logotypow zaczyna sie wtedy na tej samej wysokosci na kazdej stronie. */
@media (min-width:761px){
  .hero, .wu-hero { min-height:710px; display:flex; align-items:center; }
  .hero > .hero-inner, .hero > .section-inner, .wu-hero > .section-inner { width:100%; }
  /* „O nas" i blog moga byc nizsze (Oskar 04.09) — to strony tresciowe, nie sprzedazowe,
     wiec nie musza konczyc pierwszego ekranu w tym samym miejscu co landingi. */
  .wu-hero.wu-hero-auto { min-height:0; }
}
/* 100 px odstępu pod paskiem menu, nie 44 (Oskar 5.10.2026: „daj trochę więcej miejsca nad
   «Zgody cookies i RODO»… jeszcze trochę niżej"). Hero wchodzi pod przezroczyste menu
   (ujemny margines), więc ten padding mierzy się od GÓRY strony: przy 44 px nadkreślenie
   stało powyżej dolnej krawędzi menu, przy 72 miało 28 px luzu, teraz ma 56. */
@media (max-width:760px){ .hero { margin-top:-59px; padding-top:calc(100px + 59px); padding-bottom:46px; } }
@media (max-width:760px){
  /* Makieta produktu (zrzut wyszukiwarki, raport PING) na telefonie zajmowala pol ekranu
     i byla nieczytelna — na tej szerokosci liczy sie naglowek, zdanie i przycisk. */
  .hero-visual, .mock-note { display:none; }
  .hero { padding-bottom:40px; }
  .hero-stats { gap:14px; margin-top:18px; }
  .hero-stat .big { font-size:1.5rem; }
  .hero h1 { font-size:1.9rem; line-height:1.2; }
  .hero-sub { font-size:1rem; }
}
/* Plama kotwicząca pod menu musi być na landingu MOCNIEJSZA niż reszta tła — welon .55
   rozjaśnia wszystko, a ona jedyna odpowiada za czytelność białych napisów. */

.hero-inner { max-width:1080px; margin:0 auto; }
.hero-grid2 { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:48px; align-items:center; }
.hero-grid2.rev > .hero-copy { order:2; } .hero-grid2.rev > .hero-visual { order:1; }
@media (max-width:900px){ .hero-grid2, .hero-grid2.rev { grid-template-columns:1fr; gap:36px; } .hero-grid2.rev > .hero-copy { order:1; } .hero-grid2.rev > .hero-visual { order:2; } }
.hero-badge { display:inline-flex; align-items:center; gap:8px; background:var(--lp-soft); color:var(--lp); border:1px solid color-mix(in srgb, var(--lp) 25%, transparent); padding:5px 14px; border-radius:999px; font-size:.8rem; font-weight:600; letter-spacing:.01em; margin-bottom:20px; }
/* Ta sama skala co .wu-hero h1 — 3rem kontra 3.4rem dawalo widoczna roznice. */
.hero h1 { font-size:clamp(1.95rem,3.4vw,2.7rem); font-weight:300; line-height:1.14; letter-spacing:-.025em; color:var(--navy); }
.hero h1 strong, .hero h1 b { font-weight:600; }
.hero h1 em { font-style:normal; font-weight:600; color:var(--accent); }
.hero-sub { margin-top:16px; font-size:clamp(1rem,1.8vw,1.13rem); color:var(--fg-secondary); max-width:600px; }
.hero-ctas { margin-top:28px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.btn-primary { display:inline-flex; align-items:center; gap:9px; background:var(--accent); color:#fff; text-decoration:none; font-weight:600; font-size:1rem; padding:13px 26px; border-radius:var(--r); border:none; cursor:pointer; transition:box-shadow .18s, transform .18s; box-shadow:0 4px 14px rgba(255,111,0,.26); }
/* Hover ROZJASNIA pomarancz zamiast go przyciemniac (decyzja Oskara 09.08).
   Sciemnianie czytalo sie jak stan wcisniecia, czyli odwrotnie do tego, co hover
   ma komunikowac; jasniejszy odcien plus 2 px w gore daje wrazenie podswietlenia.
   Kliknieciu zostawiamy ciemniejszy odcien — TAM przyciemnienie jest na miejscu. */
.btn-primary:hover { background:var(--accent-light); box-shadow:0 6px 20px rgba(255,111,0,.42); }
.btn-primary:active { background:var(--accent-hover); box-shadow:0 3px 10px rgba(255,111,0,.32); }
.btn-ghost { display:inline-flex; align-items:center; gap:7px; padding:13px 28px;
  border:1.5px solid var(--navy); border-radius:999px; background:transparent;
  color:var(--navy); font-weight:600; font-size:.95rem; text-decoration:none; transition:.16s; }
.btn-ghost:hover { background:var(--navy); border-color:var(--navy); color:#fff; }
/* Trzy liczby ZAWSZE w jednym rzędzie na szerokim ekranie. Przy `flex-wrap` dłuższy
   podpis (domeny: „oszczędności rocznie na 1 domenie") zrzucał trzecią pozycję do
   drugiego wiersza i pasek wyglądał na złamany. */
.hero-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:16px; }
.hero-stats:has(> :nth-child(4)) { grid-template-columns:repeat(4,minmax(0,1fr)); }
/* PUSTY pasek znika z układu. 17.10.2026 zdjęliśmy liczby z ekranów powitalnych wszystkich
   landingów (Oskar: „nie podobają mi się te statystyki, ich kolor i w ogóle umiejscowienie").
   Na `/domeny` kontener musiał zostać, bo wypełnia go personalizacja `?d=` — organizacja
   z linku widzi tam SWOJE kwoty — więc bez tej reguły wisiałby tam pusty margines. */
.hero-stats:empty { display:none; }
@media (max-width:760px){ .hero-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.hero-stat .big { display:block; font-size:1.2rem; font-weight:800; color:var(--fg); letter-spacing:-.02em; line-height:1.25; }
/* Podpis pod liczbą był w --fg-muted (#94A3B8) i ginął na jasnym tle ekranu powitalnego
   (Oskar 8.09: „muszą być na czarno, bo są trochę mało widoczne"). Hierarchię trzyma teraz
   rozmiar i grubość, nie kolor. */
.hero-stat .small { font-size:.78rem; line-height:1.35; color:var(--fg); font-weight:500; }

/* ── SEKCJE ── */
section { padding:60px 24px; }
/* Poniżej 1120 px kolumna dotykałaby krawędzi ekranu — na telefonie tekst zaczynał się
   dosłownie w pikselu 0. Powyżej tej szerokości margines robi się sam z max-width,
   więc desktopu to nie rusza. */
.section-inner { max-width:1080px; margin:0 auto; }
@media (max-width:1119px){ .section-inner { padding-inline:20px; } }
/* Nadtytuł sekcji wygląda tak samo na landingach i na stronie głównej: wersaliki z kreską
   pod spodem, bez pigułki (Oskar 9.09 — „wszystkie nagłówki zrób takie jak «Społeczność»").
   Zmiana siedzi w tej jednej regule, a nie w kilkudziesięciu miejscach w HTML-u, więc
   `.section-tag` i `.wu-kicker` nie mogą się już rozjechać. */
.section-tag { display:block; background:none; padding:0; border-radius:0; text-align:center;
  color:var(--accent); font-weight:600; font-size:.82rem; text-transform:uppercase;
  letter-spacing:.18em; margin-bottom:14px; }
.section-tag::after { content:""; display:block; width:26px; height:3px; border-radius:2px;
  background:var(--accent); margin:11px auto 0; }
h2 { font-size:clamp(1.45rem,3.2vw,2.05rem); font-weight:800; line-height:1.22; letter-spacing:-.02em; color:var(--navy); }
.section-sub { margin-top:10px; color:var(--fg-secondary); font-size:1.02rem; max-width:640px; }
/* ── Nagłówki sekcji wyśrodkowane, jak na stronie głównej (Oskar 7.09) ────────
   Landingi miały nadtytuł + h2 + lid wyrównane do lewej, a strona główna i „O nas"
   wyśrodkowane — przy przechodzeniu między nimi widać było dwa różne serwisy.
   Hero zostaje do lewej (tam obok stoi mockup) i tak samo bloki treściowe artykułu.
   Selektor idzie od `body`, bo szablony landingów nie mają wrappera <main>. */
body > section:not(.hero):not(.wu-hero):not(.art-hero) > .section-inner > h2,
body > section:not(.hero):not(.wu-hero):not(.art-hero) > .section-inner > .section-sub {
  text-align:center; margin-left:auto; margin-right:auto; }
body > section:not(.hero):not(.wu-hero):not(.art-hero) > .section-inner > .section-tag {
  display:block; width:max-content; max-width:100%; margin-left:auto; margin-right:auto; }
/* ── TŁA SEKCJI ─────────────────────────────────────────────────────────────────────────
   ZASADA (Oskar 9.09): „jak robimy gradient, to kolejny element ma mieć takie tło — tylko
   wtedy ma to sens". Gradient jest PRZEJŚCIEM do koloru, który następna sekcja naprawdę ma,
   a nie ozdobą samą w sobie.
   Poprzednia wersja robiła dokładnie to, czego on nie chce: sekcja bielała w środku i wracała
   do niebieskiego na obu końcach, więc między dwiema białymi wychodził niebieski pasek
   prowadzący donikąd.
   Teraz sekcje są PŁASKIE — biała (`.alt`) albo w kolorze tła strony (zwykła) — a gradient
   pojawia się wyłącznie na styku dwóch RÓŻNYCH kolorów, w sekcji NIŻSZEJ, i dochodzi do jej
   własnego koloru, który wypełnia resztę wysokości. Sąsiedzi tego samego koloru stykają się
   bez niczego, bo nie ma czego wygaszać.
   Warianty z `+ script +`: między sekcjami stoją czasem bloki <script> (SmartCookie, hosting,
   ping, strona główna), a te ROZRYWAJĄ sąsiedztwo w CSS — bez tych wariantów przejście po
   prostu nie łapało i zostawała twarda krawędź.
   `:not(.wu-sec)` wyklucza sekcje strony głównej i pasek „Zaufali nam": one są białe z definicji,
   więc nie mają w co przechodzić. */
.alt { background:var(--surface); border-top:0; border-bottom:0; }
/* biała → tło strony */
.alt + section:not(.alt):not(.wu-sec):not([data-tlo]),
.alt + script + section:not(.alt):not(.wu-sec):not([data-tlo]) {
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg) 20%); }
/* tło strony → biała.
   `:not(.hero)` — ekran powitalny jest BIAŁY, mimo że nie ma klasy `.alt`, więc sekcja tuż pod
   nim nie ma z czego wchodzić: gradient zaczynał się szarością i pod białym hero stawał szary
   pasek. Widać to tylko tam, gdzie między hero a pierwszą sekcją NIE MA taśmy „piszą o nas"
   (smartcookie.io po angielsku i holendersku, dokumenty prawne). Oskar 5.10.2026: „sekcja pod
   hero powinna być biała zawsze, nie tylko jak są tam logotypy". */
section:not(.alt):not(.wu-sec):not([data-tlo]):not(.hero) + .alt,
section:not(.alt):not(.wu-sec):not([data-tlo]):not(.hero) + script + .alt {
  background:linear-gradient(180deg, var(--bg) 0%, var(--surface) 20%); }

/* Taśma „Piszą o nas" jest biała, więc pierwsza sekcja pod nią zachowuje się jak sekcja
   po białej: gdy sama jest w kolorze tła, wchodzi w niego gradientem od bieli. */
section[data-po-tasmie]:not(.alt):not(.wu-sec):not([data-tlo]) {
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg) 20%); }
section[data-po-tasmie] { border-top:0; }

/* To samo, gdy taśmy NIE MA i sekcja styka się z ekranem powitalnym wprost. Hero jest białe,
   więc szara sekcja pod nim musi z tej bieli wyjść, a nie zaczynać się twardą krawędzią.
   Widać to na smartcookie.io po angielsku i holendersku: tam taśma „piszą o nas" jest zdjęta,
   więc ramka z kosztami stała płaską szarą płytą, a po polsku schodziła gradientem.
   Oskar 5.10.2026: „czy te koszty po angielsku mogą iść od gradientu tak jak na polskiej?" */
.hero + section:not(.alt):not(.wu-sec):not([data-tlo]),
.hero + script + section:not(.alt):not(.wu-sec):not([data-tlo]) {
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg) 20%); }
.hero + section, .hero + script + section { border-top:0; }

/* karty korzyści */
.benefit-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(235px,1fr)); gap:16px; margin-top:32px; }
.benefit-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px;
  box-shadow:var(--shadow-sm); transition:border-color .18s ease, box-shadow .18s ease; }
/* Znak w karcie korzyści — ten sam układ co kafle usług na stronie głównej (`.wu-ico`),
   żeby oba miejsca mówiły jednym językiem (Oskar 8.09). Kolor idzie przez `currentColor`,
   więc najechanie przefarbowuje sam rysunek, a nie tylko ramkę — z emoji było to niemożliwe. */
.benefit-card .icon { width:48px; height:48px; border-radius:14px; border:1px solid var(--border);
  background:var(--surface); color:var(--navy); display:flex; align-items:center; justify-content:center;
  margin-bottom:14px; box-shadow:var(--shadow-sm);
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
.benefit-card .icon svg { width:24px; height:24px; display:block; }
.benefit-card:hover { border-color:var(--border-strong); box-shadow:var(--shadow); }
.benefit-card:hover .icon { background:var(--accent-soft); border-color:var(--accent);
  color:var(--accent-fg); transform:scale(1.06); box-shadow:none; }
@media (prefers-reduced-motion:reduce){ .benefit-card:hover .icon { transform:none; } }
.benefit-card h3 { font-size:1rem; font-weight:700; color:var(--fg); margin-bottom:5px; }
.benefit-card p { font-size:.92rem; color:var(--fg-secondary); }
/* Zdanie wiodące karty (Oskar 6.10.2026) — ZWYKŁY AKAPIT. Przeszło w jeden dzień przez
   pogrubienie i kursywę; obie wersje robiły z niego drugi nagłówek, a to po prostu pierwsze
   zdanie treści. Zostaje sam odstęp do akapitu niżej, reszta idzie z `.benefit-card p`.
   Klasa zostaje, bo znaczniki dalej odróżniają oba akapity i odstęp musi się o coś zaczepić. */
.benefit-card p.benefit-lead { margin-bottom:7px; }

/* kroki */
/* Kroki w stylu jowes.webup.pl: zespolone kafle (2px szczeliny) z dużym „duchem" numeru.
   Tło kafla jest przeciwne do tła sekcji, żeby działało i na jasnej, i na niebieskiej. */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:2px; margin-top:38px; }
.step { background:var(--surface); border:none; border-radius:0; padding:32px 26px; box-shadow:none; }
.step:first-child { border-radius:var(--r-lg) 0 0 var(--r-lg); }
.step:last-child  { border-radius:0 var(--r-lg) var(--r-lg) 0; }
.alt .step { background:var(--bg); }
.step-no { display:block; width:auto; height:auto; background:none; border-radius:0; color:var(--border-strong);
  font-size:3.1rem; font-weight:800; line-height:1; letter-spacing:-.04em; margin-bottom:14px; font-variant-numeric:tabular-nums; }
.step-no::before { content:"0"; }   /* 1 → 01, jak na jowes (kroków nigdy nie ma 10+) */
.step h3 { font-size:1.02rem; font-weight:700; color:var(--navy); margin-bottom:6px; }
@media (max-width:640px){
  .steps { grid-template-columns:1fr; }
  .step:first-child { border-radius:var(--r-lg) var(--r-lg) 0 0; }
  .step:last-child  { border-radius:0 0 var(--r-lg) var(--r-lg); }
}
.step p { font-size:.9rem; color:var(--fg-secondary); }
/* Partnerstwo w kroku — inna rola niż zdjęte „robimy my": nie mówi, kto pracuje, tylko przez
   kogo idzie weryfikacja. Logo Goodstack stoi W ZDANIU, w miejscu nazwy (Oskar 8.09):
   `vertical-align:-.28em` sadza je na linii pisma, bo znak ma pod spodem własny margines. */
.step-partner { display:block; margin-top:14px; padding-top:12px;
  border-top:1px solid var(--border-soft); font-size:.79rem; line-height:1.6; color:var(--fg-muted); }
/* Pierwszy wiersz jako FLEX z `align-items:center` — plik znaku ma 340×100 px, z czego
   samo pismo zajmuje środek, więc przy `vertical-align` logo zawsze wisiało nad linią
   tekstu i trzeba było zgadywać przesunięcie. Wyśrodkowanie w wierszu załatwia to bez
   zgadywania, niezależnie od marginesów wewnątrz pliku (Oskar 8.09). */
.step-partner .sp-l1 { display:flex; align-items:center; gap:6px; margin-bottom:2px; }
.step-partner .sp-l2 { display:block; }
.step-partner img { flex:none; width:82px; height:auto; }

/* ── SPOŁECZNOŚĆ: liczby zamiast kafli ──────────────────────────────────────
   Pierwsza wersja tej sekcji była siatką czterech kafli — dokładnie taką samą jak trzy
   sekcje nad nią — i dlatego wypadła źle. Tu nie ma ramek ani teł: trzy liczby oddzielone
   pionową kreską, żeby czytało się to jak jedno zdanie, a nie jak kolejna siatka. */
/* auto-fit, bo liczb bywa trzy albo cztery — czwarta („ile kont przeanalizowaliśmy")
   pojawia się tylko tam, gdzie baza odpowiedziała. */
/* Środkowa kolumna trzyma DWIE liczby, więc dostaje więcej miejsca niż pozostałe — dzięki temu
   „706 kont · 40,6 mln $" mieści się w jednym wierszu tym samym stopniem pisma co „2500+"
   (Oskar 9.09). Poniżej 760 px kolumny idą jedna pod drugą (reguła w sekcji mobilnej niżej). */
.sp-liczby { display:grid; grid-template-columns:1fr 1.45fr 1fr; gap:26px 0; margin-top:34px; }
.sp-l { padding:0 18px; text-align:center; border-left:1px solid var(--border-soft); }
.sp-l:first-child { border-left:0; }
/* `flex` z `min-height`, żeby podpisy we wszystkich pozycjach zaczynały się na tej samej
   wysokości — także tam, gdzie wartość jest dwuczłonowa. */
/* Stopień pisma skaluje się z oknem, ale JEDNAKOWO dla wszystkich trzech liczb — dzięki temu
   wartość dwuczłonowa jest tej samej wielkości i na tej samej linii co pozostałe na każdej
   szerokości, zamiast kurczyć się tylko u siebie (Oskar 9.09). */
.sp-l b { display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:2.6rem; font-size:clamp(1.35rem, 2.4vw, 1.95rem); font-weight:800; color:var(--accent-fg);
  letter-spacing:-.03em; line-height:1.1; margin-bottom:8px; font-variant-numeric:tabular-nums; }
/* Liczba kont i budżet badania to JEDNA wartość złożona z dwóch liczb, w JEDNYM wierszu
   (Oskar 8.09: „zmieści się"). Żeby zmieściła się zawsze, stopień pisma skaluje się
   z szerokością okna, a `nowrap` gwarantuje, że nie złamie się w połowie. Kropka rozdzielająca
   idzie z CSS-u, bo skrypt doliczający podmienia `textContent` obu członów. */
/* `align-items:center`, NIE `baseline`: w rzędzie flex `align-items` steruje osią PIONOWĄ,
   a `justify-content:center` z reguły wyżej — poziomą. Przy `baseline` wspólna linia pisma
   lądowała na GÓRZE pudełka o wysokości 2.6rem, więc ta jedna wartość stała 4 px wyżej niż
   „0 zł" i „2500+" obok, które są kolumnami z `justify-content:center` (Oskar 20.09).
   Oba człony mają identyczną typografię (`.sp-l b span { font:inherit }`), więc `center`
   trzyma je w jednej linii pisma tak samo jak `baseline` — a przy okazji centruje w pionie. */
.sp-l b.sp-duo { flex-direction:row; align-items:center; justify-content:center; gap:0;
  white-space:nowrap; }
.sp-l b.sp-duo span + span::before { content:"·"; margin:0 .42em; color:var(--fg-muted); }
/* `> span`, nie `span`: człony wartości dwuczłonowej też są spanami i przejmowały styl
   podpisu — zamiast dużej pomarańczowej liczby wychodził mały granatowy tekst (8.09). */
.sp-l > span { display:block; font-size:.86rem; line-height:1.5; color:var(--fg-secondary); }
.sp-l b span { font:inherit; color:inherit; letter-spacing:inherit; }
.sp-l a { font-weight:600; }
/* Wariant na CZTERY pozycje (/o-nas, „Doświadczenie, które da się policzyć"). Kolumny równe,
   bo żadna nie trzyma wartości dwuczłonowej, i o stopień mniejsze pismo — inaczej „Google
   Partner" nie mieści się w jednym wierszu i podpisy pod liczbami przestają stać w linii. */
.sp-liczby.sp-4 { grid-template-columns:repeat(4, minmax(0,1fr)); }
.sp-liczby.sp-4 .sp-l b { font-size:clamp(1.15rem, 1.85vw, 1.6rem); white-space:nowrap; }
/* „10,5 mln $" ma się łamać w całości albo wcale — sam symbol waluty schodził do drugiej
   linii i wyglądał jak literówka (Oskar 8.09). */
.nw { white-space:nowrap; }

/* Nagłówek bloku WEWNĄTRZ sekcji — pozwala złożyć dwie krótkie sekcje w jedną, zamiast
   zostawiać dwa osobne pasy z własnym nagłówkiem i pustką między nimi (Oskar 8.09). */
.pod-sekcja { text-align:center; margin:38px 0 16px; font-size:.78rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:var(--fg-muted); }
.pod-sekcja:first-of-type { margin-top:30px; }
@media (max-width:760px){
  .sp-liczby { grid-template-columns:1fr; gap:20px; }
  /* MUSI mieć tę samą specyficzność co reguła `.sp-liczby.sp-4` wyżej — inaczej wariant
     czterokolumnowy wygrywa ją specyficznością (0,2,0 kontra 0,1,0) mimo kolejności
     i na telefonie zostają cztery kolumny po 73 px, z których „Google Partner" wystaje. */
  .sp-liczby.sp-4 { grid-template-columns:1fr; }
  .sp-liczby.sp-4 .sp-l b { white-space:normal; }
  .sp-l { padding:0; border-left:0; }
  .sp-l + .sp-l { padding-top:20px; border-top:1px solid var(--border-soft); }
  /* clamp, nie stała: na wąskim telefonie „706 kont · 40,6 mln $" musi zejść na tyle,
     żeby zmieścić się w jednym wierszu — a pozostałe liczby schodzą razem z nim. */
  .sp-l b { font-size:clamp(1.25rem, 5.8vw, 1.8rem); }
}

/* ── CENNIK ── */
.pricing { display:grid; grid-template-columns:repeat(auto-fit,minmax(285px,1fr)); gap:20px; margin-top:38px; align-items:stretch; }
.price-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:28px 26px; display:flex; flex-direction:column; position:relative; box-shadow:var(--shadow); }
.price-card.featured { border:2px solid var(--accent); box-shadow:0 12px 34px rgba(249,115,22,.13); }
.price-flag { position:absolute; top:-13px; left:24px; background:var(--accent); color:#fff; font-size:.76rem; font-weight:700; padding:4px 13px; border-radius:999px; box-shadow:var(--shadow-sm); }
.price-name { font-size:1.12rem; font-weight:800; color:var(--navy); letter-spacing:-.01em; }
.price-for { color:var(--fg-muted); font-size:.88rem; margin-top:2px; }
.price-line { margin-top:16px; display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
.price-num { font-size:2.2rem; font-weight:800; color:var(--fg); letter-spacing:-.03em; }
.price-per { color:var(--fg-muted); font-size:.92rem; }
/* Cena publiczna przekreślona TUŻ PRZY kwocie osobistej (Oskar 5.10.2026). Mniejsza i szara,
   żeby czytało się „29 zł zamiast 49 zł", a nie jako druga cena do wyboru. */
.price-stare { color:var(--fg-muted); font-size:1.15rem; font-weight:600; letter-spacing:-.01em; }
/* „oszczędzasz X wobec płatności co miesiąc" — widoczne tylko w trybie rocznym. Przełącznik
   wstawia pusty tekst w trybie miesięcznym, a `:empty` chowa wtedy całą linię, żeby karta
   nie podskakiwała o wysokość pustego wiersza. Zielone, bo to jedyna liczba na karcie,
   która mówi o zysku (Oskar 5.10.2026). */
.price-oszcz { margin-top:5px; font-size:.86rem; font-weight:700; color:#15803D; }
.price-oszcz:empty { display:none; }
/* „cena dla: <organizacja>" w osobnej linii pod kwotą — zawsze w tym samym miejscu,
   niezależnie od tego, czy kwota jest miesięczna czy roczna (Oskar 5.10.2026). */
.price-dla { margin-top:4px; color:var(--accent-fg); font-size:.82rem; font-weight:700; line-height:1.3; }
.price-setup { margin-top:2px; color:var(--fg-secondary); font-size:.88rem; }
.price-setup strong { color:var(--fg); }
.price-feats { list-style:none; margin:18px 0 24px; flex:1; }
.price-feats li { padding:6px 0 6px 28px; position:relative; font-size:.93rem; color:var(--fg-secondary); }
.price-feats li strong { color:var(--fg); }
.price-feats li::before { content:"✓"; position:absolute; left:2px; color:var(--green); font-weight:800; }
.price-feats li.dim::before { content:"＋"; color:var(--accent); }
/* `line-height` JAWNY, bo przycisk bywa raz `<button>`, raz `<a>` (na /google-ad-grants
   „Kupuję Akademię" to button, „Umów konsultację" to odnośnik do terminarza). Przeglądarka
   daje przyciskowi `normal`, a odnośnikowi dziedziczoną z `body` — przez to ten sam
   `.price-cta` miał 40 px w jednej karcie i 47 px w drugiej, a razem z nim przesuwała się
   ramka dodatków nad nim (Oskar 19.10.2026: „wielkości przycisków zrób takie same"). */
.price-cta { display:flex; align-items:center; justify-content:center; text-align:center; background:var(--fg); color:#fff; text-decoration:none; font-weight:600; line-height:1.35; padding:13px; border-radius:var(--r); border:none; width:100%; cursor:pointer; font-size:.98rem; transition:.15s; }
.price-cta:hover { background:#1E293B; }
.price-card.featured .price-cta { background:var(--accent); box-shadow:0 4px 14px rgba(249,115,22,.28); }
.price-card.featured .price-cta:hover { background:var(--accent-light); box-shadow:0 6px 20px rgba(255,111,0,.42); }
.price-card.featured .price-cta:active { background:var(--accent-hover); }
.price-note { text-align:center; margin-top:10px; font-size:.82rem; color:var(--fg-muted); }
/* cennik wąski (2 warianty) — wyśrodkowany, nie przyklejony do lewej */
.pricing.narrow { max-width:920px; margin-left:auto; margin-right:auto; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); }
/* Jedna karta na środku — bez tego rozciągała się na całą szerokość siatki i pusta
   przestrzeń po bokach czytała się jak brakująca druga oferta. */
.pricing.one { grid-template-columns:minmax(0,560px); justify-content:center; }

/* Zagęszczenie cennika — cała sekcja (nagłówek + przełącznik + karty + rozbicie ceny)
   ma się mieścić na jednym ekranie laptopa. Ruszamy wyłącznie odstępami i wielkością
   drobnego tekstu; ceny i CTA zostają w oryginalnym rozmiarze. */
.price-card { padding:18px 22px; }
.price-line { margin-top:8px; }
.price-setup { font-size:.85rem; }
.price-feats { margin:11px 0 13px; }
.price-feats li { padding:2px 0 2px 26px; font-size:.88rem; line-height:1.45; }
.price-cta { padding:11px; }
.price-note { margin-top:7px; font-size:.78rem; line-height:1.4; }
.pricing { margin-top:20px; }
section#cennik { padding-top:34px; padding-bottom:34px; }
/* Sekcja z ofertą — ten sam wyraźny blok co „Cześć!" na stronie głównej (Oskar 8.09).
   Odcięta, nie wtopiona: to jedyne dwa miejsca poza ekranem powitalnym, w których wzrok
   ma się zatrzymać, więc krawędź jest tu celowa. Warstwę `.wu-bg` wstrzykuje landing_footer(). */
/* Blok wtapia się w sąsiadów tak jak pasek CTA na dole strony, zamiast odcinać się kreską
   (Oskar 9.09). Do którego koloru wygaszać, decydują ZMIENNE ustawiane niżej: jeśli sąsiad
   jest biały — wygaszamy do bieli, jeśli jest w kolorze tła — nie ma czego wygaszać i koniec
   bloku zostaje płaski. Dzięki temu ta sama reguła działa na landingach, gdzie cennik ma
   białych sąsiadów, i tam, gdzie sąsiedzi są w kolorze tła. */
/* Kolor ZACZYNA SIĘ dopiero na górze oferty, nie pod nagłówkiem (Oskar 9.09). Biel jest
   TRZYMANA przez pierwsze 175 px — tyle zajmuje cały blok nagłówkowy: nadtytuł (34 px),
   nagłówek (do 123 px) i lid — a karty startują 177 px od góry sekcji. Wygaszenie kończy się
   dopiero na 255 px, więc kolor wchodzi już wewnątrz kart, nie pod tekstem. */
/* `--tlo-koniec` = gdzie KOŃCZY SIĘ pełny kolor i zaczyna wygaszanie w dół. Wyciągnięte do zmiennej
   6.10.2026 (Oskar chciał zostawić trochę tła pod kartami cennika SmartCookie); domyślna wartość
   jest ta sama co wcześniej na sztywno, więc żadna inna sekcja nie zmienia wyglądu. */
section[data-tlo] { position:relative; overflow:hidden;
  --tlo-gora:var(--bg); --tlo-dol:var(--bg); --tlo-start:175px; --tlo-fade:255px;
  --tlo-koniec:calc(100% - 150px);
  background:linear-gradient(180deg, var(--tlo-gora) 0%, var(--tlo-gora) var(--tlo-start),
                                     var(--bg) var(--tlo-fade),
                                     var(--bg) var(--tlo-koniec), var(--tlo-dol) 100%); }
.alt + section[data-tlo], .alt + script + section[data-tlo] { --tlo-gora:var(--surface); }
section[data-tlo]:has(+ .alt), section[data-tlo]:has(+ script + .alt) { --tlo-dol:var(--surface); }
/* Plamy i welon wygaszane dokładnie tak jak tło — inaczej to one rysują kreskę na styku. */
section[data-tlo] > .wu-bg {
  -webkit-mask-image:linear-gradient(180deg, transparent 0, transparent var(--tlo-start), #000 var(--tlo-fade), #000 var(--tlo-koniec), transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0, transparent var(--tlo-start), #000 var(--tlo-fade), #000 var(--tlo-koniec), transparent 100%); }
section[data-tlo]::before { content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(241,245,251,0) 0%, rgba(241,245,251,0) var(--tlo-start),
                                     rgba(241,245,251,.5) var(--tlo-fade),
                                     rgba(241,245,251,.5) var(--tlo-koniec), rgba(241,245,251,0) 100%); }
section[data-tlo] > .wu-bg::after { display:none; }   /* granatowy welon jest tylko pod menu */
section[data-tlo] > *:not(.wu-bg) { position:relative; z-index:2; }
/* Blok z ofertą jest ODCIĘTY celowo — jak „Cześć!" na stronie głównej. Nie wygasza się
   w sąsiadów, bo nie jest przejściem, tylko osobnym kafelkiem; jego sąsiedzi są po prostu
   białe (`.alt`), więc krawędź jest wyraźna z obu stron. */
section#cennik .section-sub { margin-top:7px; }

/* dodatki do zamówienia — klikalne kafle z żywą ceną; bez ramki, tylko delikatna kreska
   oddzielająca je od listy cech (ramka wokół bloku wyglądała jak wtrącona reklama) */
.price-addons { border:none; background:none; border-top:1px solid var(--border); border-radius:0; padding:13px 0 0; margin:2px 0 14px; }
.price-addons .pa-head { font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-fg); margin-bottom:6px; }
.pa-opt { display:flex; align-items:flex-start; gap:10px; padding:9px 11px; margin-bottom:6px; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r); cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.pa-opt:last-of-type { margin-bottom:0; }
.pa-opt:hover { border-color:var(--accent); }
.pa-opt input { position:absolute; opacity:0; width:0; height:0; }
.pa-box { width:20px; height:20px; flex-shrink:0; margin-top:1px; border:2px solid var(--border-strong); border-radius:6px; display:flex; align-items:center; justify-content:center; transition:.15s; }
.pa-box::after { content:"✓"; color:#fff; font-size:.76rem; font-weight:800; opacity:0; transition:.15s; }
.pa-opt input:checked ~ .pa-box { background:var(--accent); border-color:var(--accent); }
.pa-opt input:checked ~ .pa-box::after { opacity:1; }
.pa-opt:has(input:checked) { border-color:var(--accent); box-shadow:0 0 0 3px rgba(249,115,22,.12); }
.pa-opt input:focus-visible ~ .pa-box { box-shadow:0 0 0 3px rgba(249,115,22,.35); }
.pa-txt { flex:1; font-size:.83rem; line-height:1.38; }
.pa-txt b { display:block; color:var(--fg); font-size:.87rem; }
.pa-txt span { color:var(--fg-secondary); }
.pa-price { font-weight:800; color:var(--accent-fg); white-space:nowrap; font-variant-numeric:tabular-nums; font-size:.9rem; }
.pa-foot { margin-top:9px; padding-top:8px; border-top:1px dashed color-mix(in srgb, var(--accent) 34%, transparent); display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:.85rem; color:var(--fg-secondary); }
.pa-foot .pa-total { font-weight:800; font-size:1.15rem; color:var(--fg); font-variant-numeric:tabular-nums; }
/* wariant „w cenie" (VIP) */
.price-addons.incl .pa-head { color:var(--green); }
.price-addons.incl .pa-opt { cursor:default; border-color:color-mix(in srgb, var(--green) 26%, transparent); background:color-mix(in srgb, var(--green) 6%, #fff); }
.price-addons.incl .pa-opt:hover { border-color:color-mix(in srgb, var(--green) 26%, transparent); }
.price-addons.incl .pa-box { background:var(--green); border-color:var(--green); }
.price-addons.incl .pa-box::after { opacity:1; }
.price-addons.incl .pa-price { color:var(--green); }
.price-addons.incl .pa-foot { border-top-color:color-mix(in srgb, var(--green) 30%, transparent); }

/* ── tabelka porównań ── */
.compare { margin-top:32px; overflow-x:auto; }
.compare table { width:100%; border-collapse:separate; border-spacing:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); min-width:540px; }
.compare th, .compare td { padding:12px 16px; text-align:left; font-size:.92rem; border-bottom:1px solid var(--border-soft); }
.compare thead th { background:var(--bg); color:var(--fg-secondary); font-weight:600; font-size:.85rem; border-bottom:1px solid var(--border); }
.compare thead th:last-child { color:var(--accent-fg); background:var(--accent-soft); }
.compare tbody tr:last-child td { border-bottom:none; }
.compare td:last-child { background:color-mix(in srgb, var(--accent-soft) 55%, #fff); }
.compare .ok { color:var(--green); font-weight:700; }
.compare .no { color:var(--red); font-weight:600; }

/* ── PROWADZENIE STRONY I WSPARCIE 24/7 (`.op-*`, `.opt-*`) ──────────────────
   Przeniesione tu 19.10.2026 z `landings/smart/style.css` i `landings/hosting/style.css`,
   gdzie stały w DWÓCH identycznych kopiach z notatką „zmieniasz jedno — zmień drugie".
   Używają ich dziś trzy strony: /pakiet-smart (sam zakres opieki), /hosting i /strona-www
   (zgłaszanie zmian, trzy filary 24/7, tabela czasów reakcji, makieta zgłoszenia).
   `/strona-www` nie ma własnego arkusza, więc to JEST jedyne miejsce na te reguły.
   Kolor akcentu bierze się z `--lp` motywu landingu, więc każda strona ma go we własnym. */

/* zakres opieki */
.op-zakres {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(245px,1fr));
  gap:14px; margin-top:30px; text-align:left;
}
.op-item {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:18px 20px; box-shadow:var(--shadow-sm);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.op-item:hover { border-color:var(--border-strong); box-shadow:var(--shadow); }
.op-ico {
  width:38px; height:38px; border-radius:11px; border:1px solid var(--border);
  background:var(--surface); color:var(--lp);
  display:flex; align-items:center; justify-content:center; margin-bottom:11px;
}
.op-ico svg { width:21px; height:21px; display:block; }
.op-item b { display:block; font-size:.98rem; color:var(--navy); margin-bottom:4px; }
.op-item span { display:block; font-size:.88rem; color:var(--fg-secondary); line-height:1.55; }

/* trzy filary 24/7 */
.op-247 {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:16px; margin-top:24px; text-align:left;
}
.op-f {
  background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--lp);
  border-radius:var(--r-lg); padding:20px 22px; box-shadow:var(--shadow-sm);
}
.op-kiedy {
  display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--lp); background:var(--lp-soft);
  border-radius:999px; padding:3px 10px; margin-bottom:9px;
}
.op-f b { display:block; font-size:1rem; color:var(--navy); margin-bottom:5px; }
.op-f > span:not(.op-kiedy) { display:block; font-size:.88rem; color:var(--fg-secondary); line-height:1.55; }

/* tabela czasów reakcji */
.op-sla { margin-top:26px; overflow-x:auto; }
.op-sla table {
  width:100%; border-collapse:separate; border-spacing:0; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-sm); min-width:580px; text-align:left;
}
.op-sla th, .op-sla td {
  padding:13px 16px; border-bottom:1px solid var(--border-soft);
  font-size:.89rem; line-height:1.55; color:var(--fg-secondary); vertical-align:top;
}
.op-sla thead th {
  background:var(--bg); color:var(--navy); font-weight:700;
  font-size:.76rem; text-transform:uppercase; letter-spacing:.05em;
}
.op-sla tbody th { color:var(--navy); font-weight:700; width:30%; }
.op-sla tbody tr:last-child th, .op-sla tbody tr:last-child td { border-bottom:0; }
.op-czas { color:var(--fg); font-weight:700; white-space:nowrap; }
.op-auto { color:var(--green); font-weight:700; }

/* uczciwe zastrzeżenie */
.op-uczciwie {
  max-width:820px; margin:24px auto 0; text-align:left;
  background:var(--lp-soft); border:1px solid color-mix(in srgb, var(--lp) 25%, transparent);
  border-radius:var(--r-lg); padding:16px 20px;
  font-size:.9rem; line-height:1.6; color:var(--fg-secondary);
}
.op-uczciwie b { color:var(--navy); }

/* makieta zgłoszenia */
.op-ticket {
  max-width:560px; margin:26px auto 0; text-align:left;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:16px 18px 14px; box-shadow:var(--shadow);
}
.opt-head {
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  font-size:.9rem; font-weight:700; color:var(--navy);
  padding-bottom:12px; margin-bottom:6px; border-bottom:1px solid var(--border-soft);
}
.opt-id { font-size:.74rem; font-weight:800; color:var(--fg-muted); background:var(--bg); border-radius:6px; padding:2px 7px; }
.opt-stan {
  margin-left:auto; font-size:.72rem; font-weight:700; color:var(--green);
  background:var(--green-soft); border-radius:999px; padding:3px 10px;
}
.opt-line { display:flex; align-items:flex-start; gap:12px; padding:8px 0 8px 4px; }
.opt-line i {
  flex-shrink:0; width:10px; height:10px; margin-top:5px; border-radius:50%;
  background:var(--surface); border:2px solid var(--border-strong);
}
.opt-line.done i { background:var(--green); border-color:var(--green); }
.opt-line b { display:inline-block; min-width:44px; font-size:.82rem; font-weight:700; color:var(--fg); font-variant-numeric:tabular-nums; }
.opt-line span { display:block; font-size:.85rem; color:var(--fg-secondary); line-height:1.5; margin-top:1px; }

/* ── telefon ───────────────────────────────────────────────────────────────── */
@media (max-width:700px) {
  /* Tabela reakcji rozkłada się na bloki — trzy kolumny nie mieszczą się na szerokości telefonu. */
  .op-sla { overflow-x:visible; }
  .op-sla table { min-width:0; }
  .op-sla table, .op-sla tbody, .op-sla tr, .op-sla th, .op-sla td { display:block; width:auto; }
  .op-sla thead { display:none; }
  .op-sla tbody tr { border-bottom:1px solid var(--border); padding:6px 0 12px; }
  .op-sla tbody tr:last-child { border-bottom:0; }
  .op-sla th, .op-sla td { border-bottom:0; padding:3px 16px; }
  .op-sla tbody th { width:auto; padding-top:13px; font-size:.95rem; }
  .op-sla td::before { content:attr(data-l); display:block; font-size:.72rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.05em; color:var(--fg-muted); margin-bottom:2px; }
}

/* ── FAQ ── */
.faq { max-width:760px; margin:32px auto 0; }
.faq details { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); margin-bottom:10px; overflow:hidden; box-shadow:var(--shadow-sm); }
.faq summary { cursor:pointer; padding:16px 20px; font-weight:600; font-size:.97rem; color:var(--fg); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-size:1.25rem; color:var(--accent); font-weight:700; flex-shrink:0; }
.faq details[open] summary::after { content:"–"; }
.faq .faq-a { padding:0 20px 16px; color:var(--fg-secondary); font-size:.93rem; }

/* ── CTA STRIP — to samo ruchome tło co hero i „Cześć!" (Oskar 7.09) ──────────
   Wcześniej była to płaska granatowa płyta: strona zaczynała się kolorem, a kończyła
   ciemnym prostokątem. Teraz klamra domyka się tym samym tłem, co ekran powitalny.
   Warstwę `.wu-bg` wstrzykuje landing_footer(), więc nie trzeba jej dopisywać w każdym
   szablonie; welon nad nią (::before) trzyma kontrast tekstu. */
/* Góra paska schodzi z BIELI, żeby domknąć się z sekcją „Zaufali nam" nad nim (Oskar 7.09) —
   twarda krawędź między białą sekcją a jasnoniebieskim tłem cięła stronę w poprzek. Razem
   z tłem wygaszamy u góry same plamy, inaczej przebijałyby przez gradient. */
.cta-strip { position:relative; overflow:hidden; color:var(--fg-secondary);
  /* Wraca do bieli na samym dole, bo stopka jest biała — inaczej ostatni styk na stronie
     był twardą krawędzią (Oskar 8.09). */
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg) 46%, var(--bg) 84%, var(--surface) 100%);
  text-align:center; padding:74px 24px; }
.cta-strip .wu-bg {
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 42%);
          mask-image:linear-gradient(180deg, transparent 0, #000 42%); }
/* Biała płyta NA tle, dokładnie jak karta w sekcji „Cześć!" (Oskar 7.09) — samo tło pod
   tekstem było za ciemne i pomarańcz przycisku gryzł się z granatem smugi. Robi ją
   pseudoelement, więc nie trzeba owijać treści dodatkowym divem w dziesięciu szablonach. */
.cta-strip::after { content:""; position:absolute; left:50%; top:50%; z-index:1;
  transform:translate(-50%,-50%); width:min(900px, calc(100% - 40px)); height:calc(100% - 52px);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg); }
/* Treść musi trzymać się szerokości płyty. Płyta to pseudoelement o stałej szerokości
   (min(900px, 100% - 40px)), a akapit rozciągał się na CAŁY pasek — na szerokim ekranie
   zdanie wychodziło poza białe tło (Oskar 7.09). */
.cta-strip > *:not(.wu-bg) { position:relative; z-index:2;
  max-width:min(800px, calc(100% - 96px)); margin-left:auto; margin-right:auto; }
/* Granatowa plama z tła hero istnieje po to, żeby białe napisy paska nawigacji miały
   kontrast. W stopce paska nawigacji nie ma, a plama robiła tu tylko ciemno. */
.cta-strip .wu-bg::after { display:none; }
.cta-strip h2 { color:var(--navy); }
.cta-strip p { color:var(--fg-secondary); margin-top:10px; }
.cta-strip .btn-primary { margin-top:24px; }
.cta-strip a { color:var(--accent-fg); }
.cta-strip .btn-primary { color:#fff; }
/* Przycisk z obrysem zostaje granatowy także w pasku CTA: `.cta-strip a` wyżej (0,1,1)
   wygrywa z `.wu-btn-outline` (0,1,0) i malował napis na pomarańczowo, przez co przycisk
   miał granatową obwódkę i pomarańczowy środek — dwa kolory w jednym elemencie. */
.cta-strip .wu-btn-outline { color:var(--navy); }
.cta-strip .wu-btn-outline:hover { color:#fff; }
/* mail/telefon pod przyciskiem — wcześniej biel wpisana w atrybut style, pod granatowe tło */
.cta-kontakt { font-weight:700; }
/* Podtytul wewnatrz sekcji laczacej dwa dowody (posty + projekty) — mniejszy od h2 sekcji,
   ale wyrazniejszy od zwyklego akapitu, zeby bylo widac, ze zaczyna sie druga czesc. */
.ss-sub { text-align:center; font-size:1.06rem; font-weight:700; color:var(--navy);
  letter-spacing:-.01em; margin:38px 0 18px; }

/* ── PASEK ODNOŚNIKÓW ────────────────────────────────────────────────────────
   Jedna linia zamiast rzędu kafli. Powstał tam, gdzie cztery kafle „społeczność
   i materiały" stały pod czterema identycznymi kaflami „dlaczego my" i strona
   robiła się jednostajna (Oskar 7.09). */
.wu-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:10px 22px; margin-top:34px; padding:16px 22px; background:var(--bg);
  border:1px solid var(--border-soft); border-radius:var(--r-xl); font-size:.92rem; }
.wu-bar b { color:var(--navy); }
.wu-bar a { color:var(--fg-secondary); text-decoration:none; font-weight:600;
  border-bottom:1.5px solid transparent; transition:color .15s, border-color .15s; }
.wu-bar a:hover { color:var(--accent-fg); border-bottom-color:var(--accent); }
@media (max-width:700px){ .wu-bar { flex-direction:column; gap:12px; text-align:center; } }

/* Kafel case study, który prowadzi do artykułu — zachowuje wygląd karty, ale klika się cały. */
.cs-card-link { display:block; text-decoration:none; transition:border-color .15s; }
.cs-card-link:hover { border-color:var(--accent); }
.cs-card-link .cs-foot { color:var(--accent-fg); font-weight:600; }

/* Wyróżnione zdanie o badaniu w sekcji polityki — ma się odciąć od akapitu wyżej. */
.ag-badanie { max-width:760px; margin:16px auto 0; text-align:center; font-size:.94rem;
  line-height:1.6; color:var(--fg-secondary); background:var(--accent-soft);
  border:1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-radius:var(--r-lg); padding:13px 18px; }
.ag-badanie b { color:var(--navy); }
.ag-badanie a { color:var(--accent-fg); font-weight:600; }

/* ── ZNIŻKI DLA NGO — ten sam widok co w panelu klienta ──────────────────────
   Tabela zamiast kolejnego rzędu kafli: na landingu Ad Grants były już cztery siatki
   kart pod rząd i wszystko zlewało się w jedno (Oskar 8.09). Tabela ma inny rytm,
   a przy okazji pokazuje produkt takim, jaki klient zobaczy po zalogowaniu. */
.fr-table { max-width:860px; margin:26px auto 0; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow); }
.fr-table table { width:100%; border-collapse:collapse; }
.fr-table tr + tr { border-top:1px solid var(--border-soft); }
.fr-table th, .fr-table td { padding:13px 18px; text-align:left; vertical-align:top; font-size:.9rem; }
.fr-table th { width:170px; font-weight:700; color:var(--navy); white-space:nowrap; }
.fr-table .fr-save { width:190px; color:var(--green); font-weight:700; font-size:.82rem; white-space:nowrap; }
.fr-table td:last-child { color:var(--fg-secondary); font-size:.86rem; line-height:1.55; }
.fr-more { padding:12px 18px; border-top:1px solid var(--border-soft); background:var(--bg);
  text-align:center; font-size:.84rem; color:var(--fg-muted); }
.fr-more b { color:var(--navy); }

/* Zwarty rząd faktów — argumenty bez pudełek. Powstał tam, gdzie cztery kafle
   powtarzały to, co strona mówi już gdzie indziej, a kolejna siatka kart robiła
   z landingu jeden długi rytm (Oskar 8.09). */
.wu-fakty { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:2px; margin-top:30px; background:var(--border-soft);
  border:1px solid var(--border-soft); border-radius:var(--r-lg); overflow:hidden; }
.wu-fakty > div { background:var(--surface); padding:16px 18px; }
.wu-fakty b { display:block; font-size:.92rem; color:var(--navy); margin-bottom:3px; }
.wu-fakty span { display:block; font-size:.83rem; line-height:1.5; color:var(--fg-secondary); }

/* ── KATEGORIE ZNIŻEK — tak jak na stronie /znizki w panelu ──────────────────
   To liczniki przy kategoriach pokazują skalę katalogu, nie same nazwy narzędzi. */
.zn-kat { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:26px; }
.zn-kat span { display:inline-flex; align-items:center; gap:7px; background:var(--surface);
  border:1px solid var(--border); border-radius:999px; padding:6px 14px;
  font-size:.83rem; color:var(--fg-secondary); }
.zn-kat b { color:var(--navy); font-weight:700; }
.zn-kat .wiecej { border-style:dashed; color:var(--fg-muted); }
.zn-kat + .fr-table { margin-top:18px; }

/* ── KURSY AKADEMII — wiersze ze znakiem kursu z panelu, nie siatka kafli ────
   Ikony są kopią tych z `klient/kursy.php`, żeby landing pokazywał produkt taki,
   jaki klient zobaczy po zalogowaniu (Oskar 8.09). */
.kurs-lista { max-width:760px; margin:28px auto 0; display:flex; flex-direction:column; gap:10px; }
.kurs { display:flex; align-items:center; gap:16px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-lg); padding:14px 18px; }
/* KAFELEK RYSUJE OTOCZENIE, NIE ZNAK (ta sama zasada co przy `.wu-ico`, 16.10.2026:
   „nie róbmy osłony wewnątrz osłony"). Do 18.10.2026 te trzy znaki były wpisane w stronę
   recznie, każdy z własnym białym prostokątem — i przez to NIE BYŁY tymi samymi znakami,
   co na stronie głównej i na stronach kursów (Ad Grants miał tu goły daszek zamiast
   plakietki). Teraz idą z `wu_ico_kurs()`, a biały kafelek z obwódką daje ta reguła. */
/* Światło 8 px, nie 5: `viewBox` jest przycięty do bboxa SAMEGO rysunku, a obwódka przedniej
   płyty wystaje poza niego o pół kreski — przy 5 px znak dotykał ramki kafelka. */
.kurs-ico { flex:0 0 auto; width:52px; height:52px; display:block; box-sizing:border-box;
  background:var(--surface); border:1px solid var(--border-soft); border-radius:14px; padding:8px; }
.kurs-ico svg { width:100%; height:100%; display:block; overflow:visible; }
.kurs b { display:block; font-size:.98rem; color:var(--navy); margin-bottom:2px; }
.kurs span { display:block; font-size:.87rem; line-height:1.55; color:var(--fg-secondary); }

/* ── ZASADY PROGRAMU — lista wymagań zamiast trzech kafli ────────────────────*/
.zasady { max-width:760px; margin:26px auto 0; list-style:none; padding:0; }
.zasady li { position:relative; padding:12px 0 12px 34px; font-size:.95rem; line-height:1.65;
  color:var(--fg-secondary); border-bottom:1px solid var(--border-soft); text-align:left; }
.zasady li:last-child { border-bottom:0; }
.zasady li::before { content:"✓"; position:absolute; left:0; top:13px; width:20px; height:20px;
  border-radius:50%; background:var(--accent); color:#fff; font-size:.72rem; font-weight:800;
  display:flex; align-items:center; justify-content:center; }
.zasady b { color:var(--navy); }
@media (max-width:700px){
  /* Na telefonie trzy kolumny się nie mieszczą — każdy wiersz staje się blokiem. */
  .fr-table table, .fr-table tbody, .fr-table tr, .fr-table th, .fr-table td { display:block; width:auto; }
  .fr-table th { padding:12px 16px 0; }
  .fr-table .fr-save { padding:2px 16px 0; }
  .fr-table td:last-child { padding:4px 16px 13px; }
}

/* ── MOCKUPY PRODUKTÓW (hero-visual) ── */
.hero-visual { position:relative; min-width:0; }
.mock-note { display:table; margin:0 0 8px auto; background:var(--fg); color:#fff; font-size:.72rem; font-weight:600; padding:4px 12px; border-radius:999px; box-shadow:var(--shadow); }

/* okno przeglądarki */
.mock-browser { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); overflow:hidden; }
.mb-top { display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--bg); border-bottom:1px solid var(--border); }
.mb-dots { display:flex; gap:5px; }
.mb-dots span { width:10px; height:10px; border-radius:50%; background:var(--border-strong); }
.mb-dots span:first-child { background:#FCA5A5; } .mb-dots span:nth-child(2) { background:#FCD34D; } .mb-dots span:nth-child(3) { background:#86EFAC; }
.mb-url { flex:1; background:var(--surface); border:1px solid var(--border); border-radius:999px; font-size:.75rem; color:var(--fg-muted); padding:4px 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mb-url b { color:var(--fg-secondary); font-weight:600; }
.mb-body { position:relative; padding:16px; min-height:230px; }

/* szkielet strony w oknie */
.sk { border-radius:6px; background:var(--border-soft); }
.sk-line { height:9px; margin-bottom:7px; }
.sk-hero { height:64px; border-radius:var(--r); background:linear-gradient(120deg, var(--lp-soft), var(--border-soft)); margin-bottom:12px; }
.sk-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.sk-card { height:46px; border-radius:8px; background:var(--border-soft); }

/* baner SmartCookie w mockupie — replika 1:1 realnego banera (sc.php/sc.css.php web150):
   biała karta radius 12, Open Sans 300, przyciski pill 20px, primary #ff7b00, powered-by. */
.scd-modal { position:relative; margin:14px 0 0; background:#fff; border:1px solid #e0e0e0; border-radius:12px; box-shadow:0 4px 20px rgba(0,0,0,.12); text-align:left; font-family:'Open Sans','Inter',sans-serif; }
.scd-body { padding:10px 12px 4px; font-size:12.5px; font-weight:300; line-height:1.4; color:#000; }
.scd-body strong { font-weight:700; }
.scd-body a { color:#4f4f4f; text-decoration:underline; }
.scd-cats { display:none; padding:2px 12px 0; }
.scd-cat { border-top:1px solid #f0f0f0; }
.scd-cat-head { display:flex; align-items:center; gap:8px; padding:7px 2px; font-size:12px; color:#000; font-weight:400; cursor:pointer; user-select:none; }
.scd-arrow { color:#999; font-size:14px; line-height:1; display:inline-block; transition:transform .15s; }
.scd-cat.open .scd-arrow { transform:rotate(90deg); }
.scd-cat-body { display:none; padding:0 2px 9px 22px; font-size:11px; font-weight:300; color:#777; line-height:1.5; }
.scd-cat.open .scd-cat-body { display:block; }
.scd-cat-head .name { flex:1; }
.scd-always { font-size:10.5px; color:#999; font-style:italic; }
.scd-switch { position:relative; width:30px; height:16px; flex-shrink:0; cursor:pointer; }
.scd-switch input { opacity:0; width:0; height:0; }
.scd-slider { position:absolute; inset:0; background:#eee; border-radius:999px; transition:.15s; }
.scd-slider::before { content:""; position:absolute; width:12px; height:12px; border-radius:50%; background:#fff; top:2px; left:2px; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:.15s; }
.scd-switch input:checked + .scd-slider { background:#ff7b00; }
.scd-switch input:checked + .scd-slider::before { transform:translateX(14px); }
.scd-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:6px; padding:10px 12px; }
.scd-btn { box-sizing:border-box; display:inline-block; padding:6px 14px; font-size:10.5px; font-weight:400; font-family:'Open Sans',Arial,sans-serif; line-height:1.4; border-radius:20px; cursor:pointer; border:1px solid transparent; text-transform:uppercase; white-space:nowrap; background:transparent; transition:.15s; }
.scd-btn-sec { color:#ff7b00; border-color:#ff7b00; }
.scd-btn-sec:hover { color:#fff; background:#ff7b00; }
.scd-btn-pri { color:#fff; background:#ff7b00; box-shadow:0 2px 6px rgba(255,123,0,.2); }
.scd-btn-pri:hover { filter:brightness(1.1); }
.scd-powered { width:100%; text-align:right; font-size:10px; font-style:italic; color:#aaa; display:flex; align-items:center; justify-content:flex-end; gap:5px; margin-top:2px; }
.scd-powered img { height:11px; opacity:.75; }
/* pływający cookie-dot — 1:1 jak w realnym banerze: czarne kółko 40px, biała pigułka 28×16
   i czarna kropka 10px po lewej (sc.css.php: #cookie-dot + .sc-slider2 + :before = secondary #000) */
/* ── DEMO SMARTCOOKIE: STALA WYSOKOSC MAKIETY ──
   Baner rosnie przy „Preferencjach" i rozwijaniu kategorii (zmierzone: 341 → 479 → 538 px,
   a po akceptacji spada do 230). Makieta zmieniala przez to rozmiar i cala strona skakala.
   Teraz okno ma staly rozmiar, baner jest przyklejony do dolu jak w prawdziwej witrynie,
   a lista kategorii przewija sie w srodku, zamiast rozpychac okno. */
.demo-cookie .mb-body { height:448px; }
.demo-cookie .scd-modal { position:absolute; left:16px; right:16px; bottom:16px; margin:0;
  display:flex; flex-direction:column; max-height:calc(100% - 32px); }
.demo-cookie .scd-cats { overflow-y:auto; }
.demo-cookie .scd-footer { flex-shrink:0; }
@media (max-width:1119px){ .demo-cookie .mb-body { height:480px; } }

.scd-dot { position:absolute; left:12px; bottom:12px; width:40px; height:40px; border-radius:50%; background:#000; display:none; align-items:center; justify-content:center; cursor:pointer; z-index:2; }
.scd-dot .mini { width:28px; height:16px; background:#fff; border-radius:24px; display:flex; align-items:center; padding:2px; }
.scd-dot .mini::before { content:""; width:10px; height:10px; border-radius:50%; background:#000; }

/* pasek sprawdzania domeny (checker ?d=) */
.intel-bar { display:flex; gap:8px; margin-bottom:12px; }
.intel-bar input { flex:1; min-width:0; padding:11px 14px; border:1px solid var(--border-strong); border-radius:var(--r); font-size:.95rem; font-family:inherit; color:var(--fg); background:var(--surface); }
.intel-bar input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(249,115,22,.15); }
.intel-btn { display:inline-flex; align-items:center; gap:7px; background:var(--fg); color:#fff; border:none; font-family:inherit; font-weight:600; font-size:.92rem; padding:11px 18px; border-radius:var(--r); cursor:pointer; transition:.15s; white-space:nowrap; }
.intel-btn:hover { background:#1E293B; }
.intel-btn[disabled] { opacity:.6; cursor:wait; }
.intel-status { margin:-4px 0 10px; font-size:.83rem; color:var(--fg-secondary); min-height:1.2em; }
.intel-status .ok { color:var(--green); font-weight:600; }
.intel-status .warn { color:var(--red); font-weight:600; }
.intel-result { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:14px 16px; margin-bottom:12px; display:none; }
.intel-result h4 { font-size:.92rem; font-weight:700; color:var(--fg); margin-bottom:6px; display:flex; align-items:center; gap:8px; }
.intel-result p { font-size:.87rem; color:var(--fg-secondary); }
.intel-result .tag { display:inline-block; font-size:.72rem; font-weight:700; padding:2px 9px; border-radius:999px; background:var(--lp-soft); color:var(--lp); }
.intel-result .tag.bad { background:#FEF2F2; color:var(--red); }
.intel-result .tag.good { background:var(--green-soft); color:var(--green); }

/* skrzynka Gmail (workspace) */
.mock-inbox { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); overflow:hidden; }
.mi-head { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--border); background:var(--bg); }
.mi-head .dot { width:26px; height:26px; border-radius:50%; background:var(--lp); color:#fff; font-size:.8rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.mi-head b { font-size:.85rem; color:var(--fg); }
.mi-head span { font-size:.75rem; color:var(--fg-muted); }
.mi-row { display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid var(--border-soft); }
.mi-row:last-child { border-bottom:none; }
.mi-av { width:30px; height:30px; border-radius:50%; flex-shrink:0; color:#fff; font-size:.75rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.mi-txt { min-width:0; }
.mi-txt b { display:block; font-size:.8rem; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mi-txt span { display:block; font-size:.72rem; color:var(--fg-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mi-apps { display:flex; gap:8px; padding:12px 16px; background:var(--bg); border-top:1px solid var(--border); flex-wrap:wrap; }
.mi-app { display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:600; color:var(--fg-secondary); background:var(--surface); border:1px solid var(--border); padding:5px 10px; border-radius:999px; }
.mi-app i { width:8px; height:8px; border-radius:50%; display:inline-block; }

/* panel monitoringu (hosting) */
.mock-monitor { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); overflow:hidden; }
.mm-head { display:flex; justify-content:space-between; align-items:center; padding:13px 16px; border-bottom:1px solid var(--border); background:var(--bg); font-size:.83rem; font-weight:700; color:var(--fg); }
.mm-live { display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:600; color:var(--green); }
.mm-live i { width:8px; height:8px; border-radius:50%; background:var(--green); display:inline-block; animation:pulse 1.6s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.mm-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:11px 16px; border-bottom:1px solid var(--border-soft); font-size:.83rem; color:var(--fg-secondary); }
.mm-row:last-of-type { border-bottom:none; }
.mm-row b { color:var(--fg); font-weight:600; }
.mm-ok { color:var(--green); font-weight:700; font-size:.8rem; }
.mm-bars { display:flex; gap:3px; align-items:flex-end; padding:12px 16px 16px; border-top:1px solid var(--border); }
.mm-bars i { flex:1; background:var(--lp); opacity:.85; border-radius:3px 3px 0 0; display:block; }

/* SERP Google (adgrants) */
.mock-serp { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); padding:16px; }
.ms-bar { display:flex; align-items:center; gap:10px; border:1px solid var(--border-strong); border-radius:999px; padding:9px 16px; font-size:.85rem; color:var(--fg); margin-bottom:14px; }
.ms-bar svg { flex-shrink:0; }
.ms-ad { border:1px solid var(--border); border-radius:var(--r-lg); padding:13px 15px; background:#fff; }
.ms-tag { display:inline-block; font-size:.68rem; font-weight:700; color:var(--fg); border:1px solid var(--border-strong); padding:1px 7px; border-radius:4px; margin-bottom:6px; }
.ms-url { font-size:.74rem; color:#0C6329; }
.ms-title { font-size:.98rem; color:#1A0DAB; font-weight:500; margin:2px 0 3px; }
.ms-desc { font-size:.78rem; color:var(--fg-secondary); }
.ms-org { padding:12px 15px 4px; opacity:.55; }
/* Przełącznik branży przy przykładowej reklamie (strona główna, sekcja Ad Grants).
   Pastylki to ten sam komponent (.kw-preset) co w planerze słów na adgrants.webup.pl. */
.gag-branze { justify-content:flex-start; margin-bottom:12px; }
/* Wszystkie warianty reklamy w JEDNEJ komórce siatki. Nieaktywne chowamy przez
   `visibility`, a nie `display` — dzięki temu nadal zajmują miejsce i wysokość bloku
   jest stała, równa najdłuższej reklamie. Inaczej przełączenie branży przesuwało
   całą stronę pod kursorem. */
.ms-stack { display:grid; }
.ms-stack > .ms-ad { grid-area:1 / 1; visibility:hidden; }
.ms-stack > .ms-ad.on { visibility:visible; }
.wu-gag-cta p a { color:var(--accent-fg); font-weight:600; }

.ms-badge { display:inline-flex; align-items:center; gap:7px; margin-top:12px; background:var(--green-soft); color:var(--green); font-size:.76rem; font-weight:700; padding:6px 12px; border-radius:999px; }

/* raport PING */
.mock-report { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); overflow:hidden; }
.mr-head { display:flex; justify-content:space-between; align-items:center; padding:13px 16px; background:var(--bg); border-bottom:1px solid var(--border); }
.mr-head b { font-size:.85rem; color:var(--fg); }
.mr-head span { font-size:.72rem; color:var(--fg-muted); }
.mr-score { display:flex; align-items:center; gap:14px; padding:16px; border-bottom:1px solid var(--border-soft); }
.mr-ring { width:64px; height:64px; border-radius:50%; background:conic-gradient(var(--red) 0 62%, var(--border-soft) 62% 100%); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mr-ring i { width:48px; height:48px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; font-style:normal; font-weight:800; font-size:.95rem; color:var(--fg); }
.mr-score p { font-size:.8rem; color:var(--fg-secondary); }
.mr-score b { color:var(--fg); }
.mr-item { display:flex; gap:10px; align-items:flex-start; padding:10px 16px; border-bottom:1px solid var(--border-soft); font-size:.8rem; color:var(--fg-secondary); }
.mr-item:last-child { border-bottom:none; }
.mr-item b { color:var(--fg); font-weight:600; }
.mr-dot { width:9px; height:9px; border-radius:50%; margin-top:5px; flex-shrink:0; }

/* ── MODAL ZAMÓWIENIA ── */
.modal-back { position:fixed; inset:0; background:rgba(15,23,42,.5); display:none; align-items:center; justify-content:center; z-index:100; padding:18px; }
.modal-back.open { display:flex; }
.modal { background:var(--surface); border-radius:var(--r-xl); max-width:440px; width:100%; padding:28px; position:relative; max-height:92vh; overflow:auto; box-shadow:var(--shadow-lg); }
.modal h3 { color:var(--fg); font-size:1.15rem; font-weight:800; margin-bottom:4px; }
.modal .modal-sub { color:var(--fg-muted); font-size:.88rem; margin-bottom:16px; }
.modal-close { position:absolute; top:14px; right:16px; background:none; border:none; font-size:1.5rem; color:var(--fg-muted); cursor:pointer; line-height:1; }
.modal label { display:block; font-size:.83rem; font-weight:600; color:var(--fg); margin:13px 0 5px; }
/* kafle dodatków w modalu są <label> — muszą zostać flexem, inaczej cena spada pod opis */
.modal .pa-opt { display:flex; margin:0 0 8px; font-weight:400; }
.modal .pa-opt:last-of-type { margin-bottom:0; }
.modal input[type=text], .modal input[type=email] { width:100%; padding:10px 14px; border:1px solid var(--border-strong); border-radius:var(--r); font-size:.95rem; font-family:inherit; color:var(--fg); background:var(--surface); }
.modal input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(249,115,22,.15); }
.modal .consent { display:flex; gap:9px; align-items:flex-start; margin-top:15px; font-size:.8rem; color:var(--fg-muted); }
/* Ptaszek BIAŁY na pomarańczowym — ta sama zasada co przy `.qc-chip` wyżej i ten sam powód:
   `accent-color` maluje tło, ale ptaszka rysuje przeglądarka i wychodzi ciemny na pomarańczu
   (Oskar 7.09, powtórzone 5.10.2026). Własny kwadracik, własny ptaszek, zawsze biały.
   Zasada obowiązuje KAŻDY checkbox na landingach — nie tylko ten w modalu. */
.modal .consent input { position:absolute; opacity:0; width:0; height:0; }
.modal .consent::before { content:"✓"; flex:0 0 auto; margin-top:2px; width:18px; height:18px;
  border-radius:5px; border:1.5px solid var(--border-strong); background:var(--surface);
  color:transparent; font-size:.72rem; font-weight:800; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; transition:.15s; cursor:pointer; }
.modal .consent:has(input:checked)::before { background:var(--accent); border-color:var(--accent); color:#fff; }
.modal .consent:has(input:focus-visible)::before { box-shadow:0 0 0 3px rgba(255,111,0,.3); }
.modal .btn-primary { width:100%; justify-content:center; margin-top:18px; }
.modal .err { display:none; background:#FEF2F2; color:var(--red); border:1px solid #FECACA; border-radius:var(--r); padding:10px 14px; font-size:.86rem; margin-top:13px; }
.modal .hp { position:absolute; left:-5000px; opacity:0; }

/* dziękujemy */
.thanks-wrap { max-width:680px; margin:0 auto; }
.thanks-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:34px; margin-top:24px; box-shadow:var(--shadow); }
.thanks-ok { width:60px; height:60px; border-radius:50%; background:var(--green-soft); color:var(--green); font-size:1.8rem; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }

/* karta budżetu grantu (hero Ad Grants) */
.grant-card { background:linear-gradient(155deg,#0F172A,#1E293B); color:#fff; border-radius:var(--r-xl); padding:26px; box-shadow:var(--shadow-lg); }
.grant-card .gc-top { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:.82rem; color:#B6C2D2; }
.grant-card .gc-badge { display:inline-flex; align-items:center; gap:6px; background:rgba(34,197,94,.16); color:#4ADE80; font-weight:700; font-size:.75rem; padding:4px 11px; border-radius:999px; }
.grant-card .gc-amt { font-size:2.9rem; font-weight:800; letter-spacing:-.03em; line-height:1.05; margin:14px 0 2px; }
.grant-card .gc-sub { font-size:.9rem; color:#CBD5E1; }
.grant-card .gc-bar { height:9px; border-radius:999px; background:rgba(255,255,255,.14); margin:18px 0 8px; overflow:hidden; }
.grant-card .gc-bar i { display:block; height:100%; width:64%; border-radius:999px; background:linear-gradient(90deg,#FF6F00,#FF9A47); }
.grant-card .gc-legend { display:flex; justify-content:space-between; font-size:.78rem; color:#8FA3B8; }
.grant-card .gc-rows { margin-top:20px; border-top:1px solid rgba(255,255,255,.12); padding-top:14px; }
.grant-card .gc-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:7px 0; font-size:.86rem; color:#CBD5E1; }
.grant-card .gc-row b { color:#fff; }
.grant-card .gc-row .ok { color:#4ADE80; font-weight:700; }

/* ── MAKIETA WYNIKÓW GOOGLE (Ad Grants) — wygląd 1:1 z wyszukiwarką, więc celowo
   własne kolory/typografia Google zamiast tokenów landingu ── */
.g-wrap { max-width:760px; margin:34px auto 0; background:#f1f3f4; border-radius:var(--r-xl); overflow:hidden; box-shadow:0 14px 44px rgba(15,23,42,.16), 0 3px 10px rgba(15,23,42,.06); }
.g-bar { background:#dee1e6; padding:9px 14px; display:flex; align-items:center; gap:8px; }
.g-bar i { width:11px; height:11px; border-radius:50%; display:block; }
.g-url { flex:1; background:#fff; border-radius:20px; padding:5px 14px; font-size:.76rem; color:#5f6368; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:Arial,Helvetica,sans-serif; }
.g-inner { background:#fff; }
.g-search { padding:15px 20px 8px; display:flex; align-items:center; gap:14px; }
.g-input { flex:1; border:1px solid #dfe1e5; border-radius:24px; padding:9px 16px; font-size:.9rem; color:#202124; display:flex; align-items:center; justify-content:space-between; gap:8px; font-family:Arial,Helvetica,sans-serif; box-shadow:0 1px 4px rgba(32,33,36,.08); }
.g-tabs { padding:6px 20px 0; display:flex; gap:4px; border-bottom:1px solid #ebedef; }
.g-tab { padding:8px 12px; font-size:.79rem; color:#5f6368; border-bottom:3px solid transparent; margin-bottom:-1px; font-family:Arial,Helvetica,sans-serif; }
.g-tab.on { color:#1a73e8; border-bottom-color:#1a73e8; font-weight:600; }
.g-res { padding:18px 18px 20px; font-family:Arial,Helvetica,sans-serif; background:#f8fafc; }
/* W HERO makieta ma byc niska, zeby pasek logotypow zmiescil sie w pierwszym ekranie:
   zakladki Google (Wszystko/Grafika/Mapy) nic nie wnosza, a kosztuja ~45 px. */
.hero .g-tabs { display:none; }
.hero .g-res { padding:12px 14px 14px; }
.hero .g-search { padding:12px 16px 6px; }
/* każda reklama = osobna biała karta z niebieskim akcentem (czytelniejsze niż płaska lista) */
.g-ad { background:#fff; border:1px solid #e8edf3; border-radius:12px; box-shadow:0 1px 3px rgba(15,23,42,.06); padding:14px 16px 14px 0; margin-bottom:12px; }
.g-ad > div, .g-ad > span { margin-left:16px; }
.g-ad { border-left:4px solid #4285f4; }
.g-tag { display:inline-block; font-size:.7rem; font-weight:700; color:#856404; background:#fff8e1; border:1px solid #ffe082; border-radius:4px; padding:1px 7px; margin-bottom:6px; }
.g-line { display:flex; align-items:center; gap:8px; margin-bottom:3px; }
.g-fav { width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.62rem; font-weight:800; flex-shrink:0; }
.g-dom { font-size:.8rem; color:#202124; line-height:1.25; }
.g-dom span { display:block; font-size:.73rem; color:#1e7e34; }
.g-t { font-size:1.02rem; color:#1a0dab; line-height:1.35; margin:4px 0 4px; cursor:pointer; font-weight:500; }
.g-t:hover { text-decoration:underline; }
.g-d { font-size:.845rem; color:#4d5156; line-height:1.55; }
.g-sl { display:flex; flex-wrap:wrap; margin-top:8px; }
.g-sl a { font-size:.8rem; color:#1a0dab; text-decoration:none; padding:2px 0; }

/* Makieta wyszukiwarki W HERO landingu Ad Grants: staly rozmiar niezaleznie od wybranej
   frazy. Bez tego kazde zapytanie dawalo inna wysokosc (zmierzone 811 / 833 / 854 px)
   i cala strona skakala przy przelaczaniu — ten sam problem, co przy reklamie na
   stronie glownej. Opis reklamy tniemy do dwoch linii, a odnosniki dodatkowe
   do jednego rzedu. */
.hero .g-ad .g-d { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:2.6em; }
.hero .g-sl { flex-wrap:nowrap; overflow:hidden; white-space:nowrap; }
.hero .g-t { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.g-sl a:hover { text-decoration:underline; }
.g-sl a + a::before { content:'·'; color:#9aa0a6; margin:0 7px; }
.g-split { display:flex; align-items:center; gap:10px; margin:16px 0 12px; font-size:.72rem; color:#9aa0a6; text-transform:uppercase; letter-spacing:.07em; font-family:'Inter',sans-serif; font-weight:700; }
.g-split::before, .g-split::after { content:""; flex:1; height:1px; background:#e3e8ef; }
.g-org { margin-bottom:14px; opacity:.55; padding:0 4px; }
.g-org .g-oline { display:flex; align-items:center; gap:7px; margin-bottom:3px; }
.g-org .g-otile { width:18px; height:18px; border-radius:4px; background:#eceff3; display:flex; align-items:center; justify-content:center; font-size:.62rem; flex-shrink:0; }
.g-note { display:flex; align-items:center; justify-content:center; gap:9px; background:var(--green-soft); color:var(--green); font-family:'Inter',sans-serif; font-size:.86rem; font-weight:700; padding:11px 16px; text-align:center; }
.g-queries { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:26px; }
.g-q { font-family:'Inter',sans-serif; font-size:.85rem; font-weight:600; padding:7px 15px; border-radius:999px; border:1px solid var(--border-strong); background:var(--surface); color:var(--fg-secondary); cursor:pointer; transition:.15s; }
.g-q:hover { border-color:var(--accent); color:var(--accent-fg); }
.g-q.on { background:var(--fg); border-color:var(--fg); color:#fff; }

/* ── PLANER SŁÓW KLUCZOWYCH (Ad Grants) ── */
.kw-intro { display:flex; gap:12px; align-items:flex-start; background:var(--lp-soft); border:1px solid color-mix(in srgb, var(--lp) 22%, transparent); border-radius:var(--r-lg); padding:16px 20px; margin-top:26px; font-size:.93rem; color:var(--fg-secondary); line-height:1.6; }
.kw-intro b { color:var(--fg); }
.kw-intro .ico { font-size:1.2rem; line-height:1.2; }
/* Lewa kolumna zwęzona (Oskar 8.09): po schowaniu pola na frazy zostają w niej same kafelki
   tematów, więc pół szerokości sekcji stało puste. Wynik dostaje resztę. */
/* `stretch`, nie `start`: obie kolumny mają być tej samej wysokości (Oskar 8.09).
   Pole na frazy rozciąga się do wysokości wyników, zamiast zostawiać dziurę pod spodem. */
.kw-wrap { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:22px; margin-top:32px; align-items:stretch; }
.kw-panel { display:flex; flex-direction:column; }
.kw-panel .kw-ta { flex:1 1 auto; }
/* minmax(0,…) + min-width:0 są konieczne: bez nich kolumna nie kurczy się poniżej
   szerokości treści (poziomy pas presetów) i cały panel wychodził poza ekran telefonu */
@media (max-width:880px){ .kw-wrap { grid-template-columns:minmax(0,1fr); } }
.kw-panel, .kw-res { min-width:0; }
.kw-panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:20px; box-shadow:var(--shadow); }
.kw-presets { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; }
/* `inline-flex` + rozmiar znaku: bez tego SVG rozpycha kafelek i etykieta ląduje pod nim,
   a z kafelków robią się koła (8.09). */
.kw-preset { display:inline-flex; align-items:center; gap:6px; font-family:inherit; font-size:.82rem; font-weight:600; padding:6px 13px; border-radius:999px; border:1px solid var(--border-strong); background:var(--surface); color:var(--fg-secondary); cursor:pointer; transition:.15s; }
.kw-preset svg { flex:none; width:15px; height:15px; }
.kw-preset:hover { border-color:var(--accent); color:var(--accent-fg); }
.kw-preset.active { background:var(--fg); border-color:var(--fg); color:#fff; }
.kw-label { display:block; font-size:.82rem; font-weight:600; color:var(--fg); margin-bottom:6px; }
.kw-ta { width:100%; min-height:150px; padding:12px 14px; border:1px solid var(--border-strong); border-radius:var(--r); font-family:inherit; font-size:.9rem; line-height:1.7; color:var(--fg); background:var(--surface); resize:vertical; }
.kw-ta:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(249,115,22,.15); }
.kw-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; flex-wrap:wrap; }
.kw-cnt { font-size:.8rem; color:var(--fg-muted); }
.kw-err { display:none; background:#FEF2F2; color:var(--red); border:1px solid #FECACA; border-radius:var(--r); padding:9px 13px; font-size:.85rem; margin-top:10px; }
.kw-res { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:20px; box-shadow:var(--shadow); }
.kw-total { background:linear-gradient(150deg,#0F172A,#1E293B); color:#fff; border-radius:var(--r-lg); padding:18px 20px; text-align:center; }
.kw-total .cap { display:block; font-size:.8rem; color:#B6C2D2; margin-bottom:2px; }
.kw-total .big { font-size:2.3rem; font-weight:800; letter-spacing:-.02em; line-height:1.1; display:block; }
.kw-total .unit { font-size:.85rem; color:#CBD5E1; }
.kw-mine { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; background:var(--lp-soft); border:1px solid color-mix(in srgb, var(--lp) 25%, transparent); border-radius:var(--r); padding:11px 14px; margin-top:12px; }
.kw-mine b { font-size:1.3rem; font-weight:800; color:var(--lp); }
.kw-mine span { font-size:.82rem; color:var(--fg-secondary); }
.kw-head { font-size:.75rem; font-weight:700; color:var(--fg-muted); letter-spacing:.07em; text-transform:uppercase; margin:16px 0 8px; }
.kw-list { max-height:330px; overflow-y:auto; }
.kw-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 2px; border-bottom:1px solid var(--border-soft); font-size:.9rem; }
.kw-row:last-child { border-bottom:none; }
.kw-row .kw { color:var(--fg); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kw-row .vol { color:var(--fg-secondary); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.kw-note { font-size:.78rem; color:var(--fg-muted); margin-top:12px; text-align:center; }
.kw-reszta { font-size:.82rem; color:var(--fg-secondary); margin-top:10px; }
.kw-skel { height:14px; border-radius:6px; background:var(--border-soft); margin-bottom:10px; animation:kwp 1.2s ease-in-out infinite; }
@keyframes kwp { 0%,100%{opacity:1} 50%{opacity:.45} }
.kw-cta { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:16px;
  background:var(--accent); color:#fff !important; text-decoration:none; font-weight:600; font-size:.95rem;
  padding:12px 18px; border-radius:var(--r); box-shadow:0 4px 14px rgba(249,115,22,.28); }
.kw-cta:hover { background:var(--accent-light); }
.kw-cta:active { background:var(--accent-hover); }
/* Chowanie pola pod przyciskiem zostaje TYLKO na telefonie — na dużym ekranie widoczne pole
   z frazami czytało się lepiej (Oskar 8.09, po zobaczeniu wersji schowanej). */
.kw-toggle { display:none; }
@media (max-width:640px){
  .kw-intro { display:none; }
  .kw-toggle { display:block; width:100%; margin-top:2px; padding:11px 14px; font-family:inherit;
    font-size:.9rem; font-weight:600; color:var(--fg-secondary); background:var(--bg);
    border:1px dashed var(--border-strong); border-radius:var(--r); cursor:pointer; }
  .kw-toggle:hover { border-color:var(--accent); color:var(--accent-fg); }
  .kw-panel:not(.open) .kw-label,
  .kw-panel:not(.open) .kw-ta,
  .kw-panel:not(.open) .kw-bar { display:none; }
  .kw-panel.open .kw-toggle { margin-bottom:12px; }
  .kw-presets { flex-wrap:nowrap; overflow-x:auto; margin:0 -20px 14px; padding:0 20px 4px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .kw-presets::-webkit-scrollbar { display:none; }
  .kw-preset { flex:0 0 auto; }
  /* height, nie min-height — pole ma rows="16", więc wysokość wewnętrzna wygrywa z min-height */
  .kw-ta { height:150px; min-height:0; font-size:16px; line-height:1.55; }  /* 16px = iOS nie zoomuje pola */
  .kw-bar { flex-direction:column-reverse; align-items:stretch; gap:8px; }
  .kw-bar .btn-primary { width:100%; justify-content:center; }
  .kw-cnt { text-align:center; }
  .kw-total .big { font-size:2rem; }
  .kw-list { max-height:360px; }
  .kw-panel, .kw-res { padding:16px; }
}

/* ── formularz darmowego audytu (PING Free) ── */
.audit-form { margin-top:30px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:26px 28px; box-shadow:var(--shadow); }
.audit-form .hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.aud-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.audit-form label { display:block; font-size:.83rem; font-weight:600; color:var(--fg); }
.audit-form label span { font-weight:400; color:var(--fg-muted); }
.audit-form input[type=text], .audit-form input[type=email],
.audit-form select, .audit-form textarea { width:100%; margin-top:5px; padding:11px 14px;
  border:1px solid var(--border-strong); border-radius:var(--r); font-size:.95rem; font-family:inherit;
  color:var(--fg); background:var(--surface); }
.audit-form input:focus, .audit-form select:focus, .audit-form textarea:focus {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(249,115,22,.15); }
.audit-form .btn-primary { width:100%; justify-content:center; margin-top:20px; }
.aud-err { display:none; background:#FEF2F2; color:var(--red); border:1px solid #FECACA; border-radius:var(--r);
  padding:10px 14px; font-size:.86rem; margin-top:14px; }
.aud-note { margin-top:12px; font-size:.82rem; color:var(--fg-muted); text-align:center; }
.audit-ok { display:none; margin-top:30px; background:var(--green-soft);
  border:1px solid color-mix(in srgb, var(--green) 30%, transparent); border-radius:var(--r-xl);
  padding:26px 28px; text-align:center; }
.audit-ok b { display:block; font-size:1.15rem; color:var(--green); margin-bottom:6px; }
.audit-ok span { font-size:.93rem; color:var(--fg-secondary); line-height:1.6; }
@media (max-width:640px){ .aud-grid { grid-template-columns:1fr; gap:14px; } .audit-form { padding:20px; } }

/* ── rozbicie ceny pakietu SMART ── */
.smart-math { max-width:780px; margin:20px auto 0; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:13px 20px; box-shadow:var(--shadow); text-align:left; }
.smart-math > summary { list-style:none; cursor:pointer; display:flex; align-items:center; flex-wrap:wrap;
  gap:8px 16px; font-size:.95rem; color:var(--fg-secondary); }
.smart-math > summary::-webkit-details-marker { display:none; }
.sm-lead b { font-size:1.12rem; font-weight:800; color:var(--fg); font-variant-numeric:tabular-nums; letter-spacing:-.02em; white-space:nowrap; }
.sm-lead b.pk { color:var(--accent-fg); }
.sm-lead i { font-style:normal; color:var(--fg-muted); margin:0 8px; }
.sm-badge { background:var(--green-soft); border:1px solid color-mix(in srgb, var(--green) 26%, transparent);
  border-radius:999px; padding:4px 12px; font-size:.86rem; }
.sm-badge b { color:var(--green); font-weight:800; font-variant-numeric:tabular-nums; }
.sm-more { margin-left:auto; font-size:.83rem; font-weight:600; color:var(--accent-fg); white-space:nowrap; }
.sm-more::after { content:" ▾"; font-size:.75em; }
.smart-math[open] .sm-more::after { content:" ▴"; }
.sm-body { margin-top:10px; padding-top:4px; border-top:1px solid var(--border-soft); }
.sm-row { display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:6px 0;
  border-bottom:1px solid var(--border-soft); font-size:.9rem; color:var(--fg-secondary); }
.sm-row a { color:var(--fg-secondary); text-decoration:none; border-bottom:1px dotted var(--border-strong); }
.sm-row a:hover { color:var(--accent-fg); border-bottom-color:var(--accent); }
.sm-row b { font-variant-numeric:tabular-nums; color:var(--fg); font-weight:600; white-space:nowrap; text-align:right; }
.sm-row.sum { border-bottom:2px solid var(--border); font-weight:600; color:var(--fg); }
.sm-row.sum b { font-size:1.02rem; }
.sm-row.pkg { border-bottom:none; color:var(--navy); font-weight:700; padding:8px 0 2px; }
.sm-row.pkg b { font-size:1.18rem; font-weight:800; color:var(--accent-fg); letter-spacing:-.02em; }
.sm-row i { display:block; font-style:normal; font-size:.75rem; font-weight:500; color:var(--fg-muted); line-height:1.35; }
.sm-note { margin-top:9px; font-size:.75rem; color:var(--fg-muted); line-height:1.45; }
@media (max-width:640px){
  .smart-math > summary { gap:7px 10px; font-size:.88rem; }
  .sm-lead { width:100%; }
  .sm-lead i { margin:0 5px; }
  .sm-more { margin-left:0; }
}

/* ── Assistant: przed/po + dziennik zmian ── */
.asst-ba { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin-top:32px; }
.ba-item { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px 20px; box-shadow:var(--shadow-sm); }
.ba-cap { display:block; font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--fg-muted); }
.ba-vals { display:flex; align-items:baseline; gap:10px; margin:8px 0 6px; }
.ba-vals b { font-size:1.5rem; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.ba-vals i { font-style:normal; color:var(--fg-muted); font-size:1.1rem; }
.was { color:var(--fg-muted); text-decoration:line-through; text-decoration-thickness:1.5px; }
.now { color:var(--green); }
.ba-note { font-size:.8rem; color:var(--fg-secondary); line-height:1.45; }

.asst-grid { display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:24px; margin-top:24px; align-items:start; }
.asst-copy h3 { font-size:1.1rem; font-weight:800; color:var(--navy); margin-bottom:8px; }
.asst-copy p { font-size:.95rem; color:var(--fg-secondary); line-height:1.6; }
.asst-list { list-style:none; margin:18px 0 0; }
.asst-list li { padding:10px 0 10px 26px; position:relative; border-bottom:1px solid var(--border-soft); }
.asst-list li:last-child { border-bottom:none; }
.asst-list li::before { content:"✓"; position:absolute; left:3px; top:11px; color:var(--green); font-weight:800; }
.asst-list b { display:block; font-size:.94rem; color:var(--fg); }
.asst-list span { font-size:.85rem; color:var(--fg-secondary); }
.asst-foot { margin-top:16px; font-size:.85rem; color:var(--fg-muted); }

.asst-feed { background:#0F172A; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg); }
.af-top { display:flex; align-items:center; gap:9px; padding:14px 18px; background:rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.09); color:#CBD5E1; font-size:.84rem; font-weight:600; }
.af-dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(22,163,74,.22); flex-shrink:0; animation:afPulse 2s ease-in-out infinite; }
@keyframes afPulse { 0%,100%{box-shadow:0 0 0 4px rgba(22,163,74,.22)} 50%{box-shadow:0 0 0 7px rgba(22,163,74,.05)} }
.af-rows { padding:6px 0; min-height:290px; }
.af-row { display:flex; gap:13px; padding:12px 18px; border-bottom:1px solid rgba(255,255,255,.06);
  opacity:0; transform:translateY(-8px); transition:opacity .4s ease, transform .4s ease; }
.af-row.in { opacity:1; transform:none; }
.af-row:last-child { border-bottom:none; }
.af-time { flex:0 0 78px; font-size:.72rem; color:#7C8CA5; padding-top:2px; }
.af-what > b { display:block; font-size:.88rem; color:#F1F5F9; font-weight:600; margin-bottom:2px; }
.af-what > span { font-size:.8rem; color:#94A3B8; line-height:1.5; }
.af-what .was { color:#7C8CA5; }
.af-what .now { color:#4ADE80; }
.af-row::before { content:""; position:relative; top:5px; flex:0 0 7px; height:7px; border-radius:50%; background:#64748B; }
.af-row.up::before  { background:#4ADE80; }
.af-row.off::before { background:#FB923C; }
.af-row.fix::before { background:#60A5FA; }
.af-note { padding:12px 18px; border-top:1px solid rgba(255,255,255,.09); font-size:.76rem; color:#7C8CA5; text-align:center; }
@media (max-width:900px){ .asst-grid { grid-template-columns:1fr; } .af-rows { min-height:0; } }
@media (prefers-reduced-motion:reduce){ .af-row { transition:none; opacity:1; transform:none; } .af-dot { animation:none; } }

/* ── ryzyka (czym grozi brak usługi) ── */
.risk-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin-top:32px; }
.risk-card { background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--red);
  border-radius:var(--r-lg); padding:20px 22px; box-shadow:var(--shadow-sm); }
.risk-card .rk-ico { display:flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:10px; background:#FEF2F2; font-size:1.05rem; margin-bottom:12px; }
.risk-card b { display:block; font-size:1rem; color:var(--navy); margin-bottom:5px; }
.risk-card span { font-size:.88rem; color:var(--fg-secondary); line-height:1.55; }
.risk-card strong { color:var(--fg); }

/* ── PAKIET FUNDRAISERA ── */
.fr-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-top:30px; }
.fr-item { display:flex; gap:12px; align-items:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px; box-shadow:var(--shadow-sm); }
.fr-item .ico { width:38px; height:38px; border-radius:10px; background:var(--lp-soft); color:var(--lp); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.fr-item b { display:block; font-size:.92rem; color:var(--fg); margin-bottom:2px; }
.fr-item span { font-size:.84rem; color:var(--fg-secondary); }
.fr-item .save { color:var(--green); font-weight:700; }

/* ── REALIZACJE (prawdziwe zrzuty stron) ── */
/* Dwie kolumny zamiast trzech — zrzuty stron potrzebują szerokości, żeby dało się
   cokolwiek na nich zobaczyć. Przy trzech kolumnach nagłówek klienta był nieczytelny. */
.showcase-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:22px; margin-top:36px; }
.showcase-grid > .showcase-item { flex:1 1 430px; max-width:560px; }
.showcase-item { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow); transition:.15s; display:block; text-decoration:none; }
a.showcase-item:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.showcase-top { display:flex; align-items:center; gap:10px; padding:9px 14px; background:var(--bg); border-bottom:1px solid var(--border); }
.showcase-top .mb-dots span { width:9px; height:9px; }
.showcase-top .mb-url { font-size:.74rem; }
/* Kadr 4:3 i zrzuty robione w 1440×1080 — dokładnie ta sama proporcja, więc `cover`
   nie ma czego przycinać i widać znacznie większy kawałek strony niż przy 16:10. */
.showcase-shot { display:block; width:100%; aspect-ratio:4/3; height:auto;
  object-fit:cover; object-position:top center; }
.showcase-cap { padding:13px 16px; }
.showcase-cap b { display:block; font-size:.92rem; color:var(--fg); }
.showcase-cap span { font-size:.82rem; color:var(--fg-muted); }
.showcase-tag { float:right; font-size:.7rem; font-weight:700; background:var(--lp-soft); color:var(--lp); padding:2px 9px; border-radius:999px; margin-top:2px; }

/* ── STOPKA v3 ── */
/* Bez kreski nad stopką: pasek CTA schodzi teraz do bieli, więc obwódka byłaby jedyną
   twardą linią na całej stronie (Oskar 8.09). */
footer { background:var(--surface); border-top:0; padding:0 24px 30px; position:relative; }
.footer-inner { max-width:1080px; margin:0 auto; padding-top:52px; }
.footer-grid { display:grid; grid-template-columns:1.35fr .9fr .9fr 1fr; gap:40px; align-items:start; }
@media (max-width:900px){ .footer-grid { grid-template-columns:1fr 1fr; gap:32px; } }
@media (max-width:560px){ .footer-grid { grid-template-columns:1fr; } }
@media (max-width:560px){ .footer-grid { grid-template-columns:1fr; } }
.footer-brand img { height:26px; margin-bottom:14px; }
.footer-brand p { font-size:.88rem; color:var(--fg-secondary); max-width:270px; line-height:1.55; }
.footer-social { display:flex; gap:8px; margin-top:16px; }
.footer-social a { width:34px; height:34px; border-radius:10px; border:1px solid var(--border); background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--fg-secondary); transition:.15s; }
.footer-social a:hover { color:#fff; background:var(--accent); border-color:var(--accent); transform:translateY(-1px); }
.footer-contact { margin-top:16px; display:flex; flex-direction:column; gap:7px; }
.footer-contact a { display:inline-flex; align-items:center; gap:9px; color:var(--fg); text-decoration:none; font-size:.9rem; font-weight:500; width:fit-content; }
.footer-contact a svg { color:var(--fg-muted); flex-shrink:0; transition:.15s; }
.footer-contact a:hover { color:var(--accent-fg); }
.footer-contact a:hover svg { color:var(--accent); }
.footer-col h4 { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--fg-muted); margin-bottom:14px; }
.footer-col a { position:relative; display:block; color:var(--fg-secondary); text-decoration:none; font-size:.9rem; padding:4.5px 0 4.5px 0; transition:color .15s, padding .15s; }
.footer-col a:hover { color:var(--accent-fg); }
.footer-col a[aria-current="page"] { color:var(--accent-fg); font-weight:600; }
/* karta Panelu klienta — mini-produkt, nie link */
.footer-panel { background:linear-gradient(150deg,#0F172A,#1E293B); border-radius:var(--r-xl); padding:24px; color:#E2E8F0; box-shadow:var(--shadow-lg); }
.footer-panel .fp-head { display:flex; align-items:center; gap:10px; font-weight:700; color:#fff; font-size:1rem; margin-bottom:8px; }
.footer-panel .fp-head .fp-ico { width:34px; height:34px; border-radius:10px; background:rgba(249,115,22,.18); color:var(--accent-l,#FB923C); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.footer-panel p { font-size:.85rem; color:#B6C2D2; line-height:1.5; }
.footer-panel .fp-btn { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:16px; background:var(--accent); color:#fff; text-decoration:none; font-weight:600; font-size:.92rem; padding:11px 16px; border-radius:var(--r); transition:.15s; box-shadow:0 4px 14px rgba(249,115,22,.3); }
.footer-panel .fp-btn:hover { background:var(--accent-light); transform:translateY(-1px); }
.footer-panel .fp-btn:active { background:var(--accent-hover); transform:none; }
.footer-panel small { display:block; margin-top:10px; font-size:.76rem; color:#8FA3B8; text-align:center; }
/* Pasek prawny — układ jak na stronach klientów (test.webup.pl): linki z kreskami po
   lewej, dane spółki po prawej, wszystko wyśrodkowane na wąskim ekranie. */
.footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:14px;
  flex-wrap:wrap; margin-top:44px; padding-top:22px; border-top:1px solid var(--border-soft);
  font-size:.83rem; color:var(--fg-muted); }
.fb-legal { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.fb-legal a { color:var(--fg-secondary); text-decoration:none; font-weight:500; }
.fb-legal a:hover { color:var(--accent-fg); text-decoration:underline; }
.fb-sep { color:var(--border-strong); user-select:none; }
.fb-co { color:var(--fg-muted); }
@media (max-width:760px){
  .footer-bottom { flex-direction:column; text-align:center; gap:12px; }
  .fb-legal { justify-content:center; }
}
/* Ikona zgód SmartCookie jest fixed w lewym dolnym rogu okna (40px + 10px margines).
   Poniżej ~1180px stopka nie ma już bocznego marginesu i ikona zasłaniałaby linki prawne.
   Do 18.10.2026 robiliśmy jej miejsce 86-pikselowym zapasem NA DOLE CAŁEJ STOPKI — ikona
   faktycznie lądowała na pustym, ale pod paskiem prawnym zostawał pas pustki wysoki na dwa
   wiersze tekstu i strona wyglądała, jakby się nie skończyła (Oskar: „czemu ta stopka jest
   taka wydłużona na końcu?"). Teraz ikona dostaje WŁASNY PAS Z BOKU: pasek prawny odsuwa się
   od lewej o jej szerokość z marginesem, a dół stopki wraca do normalnych 30px.
   Poniżej 760px pasek prawny jest wyśrodkowany w kolumnie, więc odsunięcie z lewej nic nie
   daje — tam zostaje zapas na dole, ale mniejszy: 56px to dokładnie ikona plus oddech. */
@media (max-width:1180px){
  footer { padding-bottom:30px; }
  .footer-bottom { padding-left:58px; }
}
@media (max-width:760px){
  footer { padding-bottom:56px; }
  .footer-bottom { padding-left:0; }
}

/* ── pasek CTA przyklejony do dołu (telefon) ──
   padding-left robi miejsce ikonie zgód SmartCookie, która siedzi w tym samym rogu */
.sticky-cta { position:fixed; left:0; right:0; bottom:0; z-index:60; display:none; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px 10px 62px; background:rgba(255,255,255,.97); backdrop-filter:blur(10px);
  border-top:1px solid var(--border); box-shadow:0 -4px 18px rgba(15,23,42,.10);
  transform:translateY(115%); transition:transform .22s ease; }
.sticky-cta.show { transform:translateY(0); }
.sticky-cta .sk-info { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
/* Dwa wiersze i ani jednego więcej: kwota NIGDY się nie łamie, a dopisek pod nią urywa się
   wielokropkiem. Bez tego przy wąskim ekranie pasek rósł do czterech wierszy i ostatni
   wychodził poza dolną krawędź (5.10.2026). */
.sticky-cta .sk-info b { font-size:1rem; color:var(--fg); font-weight:800; white-space:nowrap; }
.sticky-cta .sk-info span { font-size:.74rem; color:var(--fg-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sticky-cta .sk-go { flex-shrink:0; white-space:nowrap; background:var(--accent); color:#fff; text-decoration:none; font-weight:700; font-size:.94rem;
  padding:11px 20px; border-radius:var(--r); box-shadow:0 4px 14px rgba(249,115,22,.3); }
@media (max-width:400px){ .sticky-cta { padding-left:56px; } .sticky-cta .sk-go { padding:11px 16px; font-size:.9rem; } }
@media (max-width:760px){ .sticky-cta { display:flex; } }

/* ── case studies ── */
.cs-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:20px; margin-top:34px; align-items:stretch; }
.cs-card { background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--lp); border-radius:var(--r-xl); padding:22px 24px; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.cs-tag { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--fg-muted); }
.cs-org { font-size:1.1rem; font-weight:800; color:var(--navy); margin-top:5px; letter-spacing:-.01em; }
.cs-nums { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:18px 0 4px; }
.cs-nums b { display:block; font-size:1.55rem; font-weight:800; color:var(--lp); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.cs-nums span { display:block; font-size:.75rem; color:var(--fg-muted); line-height:1.35; margin-top:2px; }
.cs-what { margin-top:12px; font-size:.87rem; color:var(--fg-secondary); line-height:1.55; flex:1; }
.cs-foot { margin-top:14px; padding-top:11px; border-top:1px solid var(--border-soft); font-size:.76rem; color:var(--fg-muted); }

/* cytat klienta */
.cs-quote { margin:26px 0 0; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:28px 32px; box-shadow:var(--shadow); position:relative; }
.cs-quote::before { content:"”"; position:absolute; top:2px; left:22px; font-size:4.2rem; line-height:1; color:var(--accent); opacity:.22; font-family:Georgia,serif; }
.cs-quote blockquote { font-size:1.02rem; line-height:1.65; color:var(--fg); margin:0 0 16px; position:relative; }
.cs-quote figcaption { display:flex; flex-direction:column; gap:1px; border-top:1px solid var(--border-soft); padding-top:14px; }
.cs-quote figcaption b { font-size:.93rem; color:var(--fg); }
.cs-quote figcaption span { font-size:.82rem; color:var(--fg-muted); }

/* Taśma logotypów klientów — dwa pasy jadące w przeciwne strony, żeby w kadrze cały
   czas pojawiały się kolejne organizacje. Loga mają własne białe tło, więc kafle są białe. */
.logo-wall { margin-top:34px; }
.lw-head { text-align:center; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--fg-muted); margin-bottom:18px; }
.lw-marquee { overflow:hidden; padding:5px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.lw-track { display:flex; gap:12px; width:max-content; animation:lwScroll 78s linear infinite; }
.lw-track.rev { animation-direction:reverse; animation-duration:92s; }
.lw-marquee:hover .lw-track { animation-play-state:paused; }
@keyframes lwScroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.lw-tile { flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:158px; height:68px; padding:8px 12px; background:#fff; border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm); transition:border-color .15s, box-shadow .15s, transform .15s; }
/* Obwódka ZAWSZE pomarańczowa, nigdy z akcentu landingu (--lp): „Zaufali nam" to ten sam
   blok na każdej stronie, a na Ad Grants wychodził niebieski, na hostingu zielony (Oskar 7.09). */
.lw-tile:hover { border-color:var(--accent); box-shadow:var(--shadow); transform:translateY(-2px); }
.lw-tile img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; }
.lw-note { text-align:center; margin-top:20px; font-size:.82rem; color:var(--fg-muted); }
.lw-note a { color:var(--accent-fg); }
@media (prefers-reduced-motion:reduce){ .lw-track { animation:none; } .lw-marquee { overflow-x:auto; } }

/* kursy Akademii */
.course-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-top:32px; }
.course { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px 20px; box-shadow:var(--shadow-sm); }
.course .cg-ico { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; background:var(--lp-soft); font-size:1.05rem; margin-bottom:11px; }
.course b { display:block; font-size:.95rem; color:var(--navy); margin-bottom:3px; }
.course span { font-size:.84rem; color:var(--fg-secondary); line-height:1.5; }

/* podtytuł w bloku dodatków */
.price-addons .pa-sub { font-size:.8rem; color:var(--fg-secondary); line-height:1.45; margin:-2px 0 9px; }

/* ── pasek zaufania (pod hero) — granatowy pas jak sekcje na jowes.webup.pl ── */
.trust-bar { background:linear-gradient(120deg,#1B3453 0%,var(--navy) 45%,#2C4A6E 100%); position:relative; }
.trust-bar::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(34rem 14rem at 88% 0%, rgba(249,115,22,.16), transparent 65%); }
.trust-inner { position:relative; z-index:1; max-width:1080px; margin:0 auto; padding:30px 24px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.tb-item { position:relative; display:flex; flex-direction:column; gap:4px; text-align:center; }
.tb-item + .tb-item::before { content:""; position:absolute; left:-12px; top:4px; bottom:4px; width:1px;
  background:linear-gradient(#fff0, rgba(255,255,255,.22), #fff0); }
.tb-item b { font-size:1.45rem; font-weight:800; color:#fff; letter-spacing:-.02em; line-height:1.1; }
.tb-item span { font-size:.79rem; color:#A9BCD4; line-height:1.4; }
@media (max-width:760px){
  .trust-inner { grid-template-columns:1fr 1fr; gap:20px 14px; padding:24px 18px; }
  .tb-item:nth-child(odd) + .tb-item::before { left:-7px; }
  .tb-item:nth-child(3)::before { display:none; }
  .tb-item b { font-size:1.2rem; }
}

/* ── przełącznik miesięcznie / rocznie ── */
/* .bill-switch = wariant nad cennikiem: steruje obiema kartami i rozbiciem ceny naraz.
   KOLUMNA, nie rząd (Oskar 1.10.2026): przełącznik stał w jednej linii z dopiskiem
   „2 miesiące gratis", który był od niego dłuższy — przez to sam przełącznik uciekał
   w bok i ginął. Teraz przełącznik jest wyśrodkowany i duży, a dopisek stoi POD nim. */
.bill-switch { display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:22px; }
.bill-switch .bill-toggle { margin-top:0; }
.bill-switch .bill-note { font-size:.86rem; color:var(--fg-secondary); text-align:center; max-width:40ch; }
.bill-switch + .pricing { margin-top:26px; }
/* BIAŁY PASEK NA TLE SEKCJI, nie szary placek (Oskar 6.10.2026: „niech to będzie na tym tle
   pod ofertą i białe z pomarańczowym, nie takie szarawe"). Wypełnienie `var(--bg)` było o ton
   ciemniejsze od białej sekcji cennika i czytało się jak osobny element doklejony nad kartami.
   Teraz pasek jest w kolorze karty, więc siedzi na tle sekcji, a jedynym kolorem jest
   pomarańcz: wybrany wariant wypełniony, niewybrany opisany. */
.bill-toggle { display:inline-flex; gap:3px; margin-top:12px; padding:4px; background:var(--surface);
  border:1px solid var(--border-strong); border-radius:999px; box-shadow:var(--shadow-sm); }
/* Niewybrany wariant POMARAŃCZOWYM PISMEM, nie szarym — szary wyglądał jak opcja wyłączona,
   a to jest druga połowa wyboru i ma zapraszać do kliknięcia. */
.bill-toggle .bt-opt { font-family:inherit; font-size:.92rem; font-weight:700; color:var(--accent-fg);
  background:none; border:none; padding:8px 24px; border-radius:999px; cursor:pointer; transition:.15s; }
.bill-toggle .bt-opt:hover { background:var(--accent-soft); }
/* Zaznaczony wariant na pomarańczowo, nie na bieli — przy białym tle sekcji cennika
   wypełnienie kolorem tła nie odróżniało się od reszty paska. */
.bill-toggle .bt-opt.on { background:var(--accent); color:#fff; box-shadow:var(--shadow); }
.bill-toggle .bt-opt.on:hover { background:var(--accent); color:#fff; }
/* Dopisku „2 miesiące gratis" przy przełączniku NIE MA (Oskar 1.10.2026 — najpierw miał być
   w przycisku, potem zdjęty w ogóle). Przełącznik ma mówić tylko, co wybierasz; o tym, ile
   zyskujesz na roku, mówią kwoty obok siebie. Reguła zostaje dla ewentualnego dopisku,
   ale żadne wywołanie `landing_bill_toggle()` go dziś nie podaje. */
.bill-toggle .bt-opt i { display:block; font-style:normal; font-size:.72rem; font-weight:600;
  letter-spacing:.01em; opacity:.85; margin-top:1px; }
@media (max-width:560px){
  .bill-toggle .bt-opt { font-size:.92rem; padding:10px 20px; }
}
/* PRZEŁĄCZNIK OKRESU W ŚRODKU KARTY — wariant dla cennika, w którym rozliczenie wybiera się
   tylko w JEDNEJ kolumnie (webup.us/google-ad-grants: kurs ma cenę jednorazową, więc
   przełącznik nad cennikiem przestawiałby kartę, która nie ma czego przestawiać; Oskar
   19.10.2026: „przełącznikiem monthly/yearly tylko na tej kolumnie"). Mniejszy i ciaśniejszy
   niż nad cennikiem, bo tam jest bohaterem sekcji, a tutaj stoi pod kwotą jako jej opcja. */
.price-card .bill-switch { margin:4px 0 16px; gap:8px; }
.price-card .bill-toggle { padding:3px; }
.price-card .bill-toggle .bt-opt { font-size:.84rem; padding:6px 16px; }
.price-card .bill-switch .bill-note { font-size:.8rem; }
/* KARTA PAKIETU W POPUPIE ZAMÓWIENIA — ten sam język co karta w cenniku (Oskar 18.10.2026:
   „fatalnie wygląda ten formularz zamówienia (…) może zrób tak jak w cenniku bardziej").
   Nad formularzem stała do tej pory szara linijka „PING — 500 zł/ rok": dokładnie to, co
   klient przed chwilą kliknął w cenniku, tyle że drobnym drukiem i bez żadnej hierarchii.
   Teraz jest karta — nazwa, duża kwota, pod nią przełącznik okresu.
   Kwota JEST podglądem zmiany: przy przełączeniu miesięcznie/rocznie zmienia się właśnie
   ona, więc przy samych opcjach nie ma już powtórzonych kwot drobnym drukiem. */
.lm-karta { margin:2px 0 18px; padding:16px 18px; text-align:center;
  background:var(--bg); border:1px solid var(--border-soft); border-radius:var(--r-xl); }
.lm-nazwa { font-size:1.02rem; font-weight:800; color:var(--navy); letter-spacing:-.01em; }
.lm-cena { margin-top:6px; display:flex; align-items:baseline; justify-content:center; gap:6px; flex-wrap:wrap; }
.lm-cena b { font-size:1.95rem; font-weight:800; color:var(--fg); letter-spacing:-.03em; line-height:1.1; }
.lm-cena span { font-size:.9rem; color:var(--fg-muted); }
.lm-nota { margin-top:4px; font-size:.85rem; color:var(--fg-secondary); }
/* PRZEŁĄCZNIK OKRESU W POPUPIE ZAMÓWIENIA (`#lmOkres`, od 18.10.2026). Ten sam pasek co nad
   cennikiem, tylko mniejszy i wyśrodkowany pod kwotą — w popupie nie ma kart obok siebie,
   więc nie ma też czego wyrównywać do lewej. Pokazuje się wyłącznie wtedy, gdy klient
   nie wybrał okresu wcześniej; `hidden` zdejmuje go z układu bez dodatkowej reguły. */
.lm-okres { display:flex; justify-content:center; margin:12px 0 0; }
/* ⚠️ BEZ TEJ LINII ATRYBUT `hidden` NIE DZIAŁA. `display:none` z arkusza przeglądarki
   przegrywa z KAŻDĄ regułą autora, więc `display:flex` wyżej pokazywało przełącznik także
   tam, gdzie JS go chował — czyli w popupie otwartym z karty cennika, gdzie okres jest już
   wybrany. Wpadka z 18.10.2026: test sprawdzał ATRYBUT (`el.hidden`), a nie to, czy element
   widać, więc przeszedł. Mierz `display`, nie atrybut. */
.lm-okres[hidden] { display:none; }
.lm-okres .bill-toggle { margin-top:0; }
.lm-okres .bt-opt { font-size:.86rem; padding:7px 20px; }

/* ── kalkulator oszczędności ── */
.save-calc { margin-top:22px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px 20px; box-shadow:var(--shadow-sm); }
.save-calc .sv-q { font-weight:700; color:var(--fg); font-size:.95rem; margin-bottom:14px; }

.save-calc .sv-now { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:6px; font-size:.82rem; color:var(--fg-muted); }
.save-calc .sv-now b { font-size:1rem; color:var(--fg); font-variant-numeric:tabular-nums; }
.save-calc .sv-res { margin-top:14px; padding-top:13px; border-top:1px solid var(--border-soft); display:flex; flex-direction:column; gap:3px; }
.save-calc .sv-win { font-size:1.05rem; font-weight:700; color:var(--green); }
.save-calc .sv-win b { font-size:1.2rem; }
.save-calc .sv-sub { font-size:.85rem; color:var(--fg-secondary); }
.save-calc .sv-neutral { font-size:.9rem; color:var(--fg-secondary); }
.save-calc .sv-neutral b { color:var(--fg); }
.save-calc .sv-note { margin-top:11px; font-size:.78rem; color:var(--fg-muted); line-height:1.5; }
.save-calc .sv-second { margin-top:18px; padding-top:16px; border-top:1px solid var(--border-soft); }

/* ── social.webup.pl: profile, które prowadzimy (żywe liczby z Graph API) ── */
.sp-sum { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-top:26px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:18px 22px; box-shadow:var(--shadow-sm); }
.sp-stat { text-align:center; }
.sp-stat b { display:block; font-size:1.7rem; font-weight:800; color:var(--navy); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.sp-stat span { font-size:.82rem; color:var(--fg-muted); }
.sp-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:16px; margin-top:16px; }
.sp-card { display:block; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:16px 18px; box-shadow:var(--shadow-sm); text-decoration:none; color:inherit; transition:.15s; }
.sp-card:hover { border-color:var(--border-strong); box-shadow:var(--shadow); transform:translateY(-2px); }
.sp-head { display:flex; align-items:center; gap:11px; padding-bottom:11px; margin-bottom:9px; border-bottom:1px solid var(--border-soft); }
.sp-head img { border-radius:50%; flex-shrink:0; }
.sp-head b { display:block; font-size:.98rem; font-weight:700; color:var(--navy); line-height:1.25; }
.sp-head span { font-size:.8rem; color:var(--fg-muted); }
.sp-row { display:flex; align-items:baseline; gap:8px; padding:3px 0; font-size:.9rem; }
.sp-row b { font-weight:700; color:var(--fg); font-variant-numeric:tabular-nums; }
.sp-row i { font-style:normal; color:var(--fg-muted); font-size:.83rem; }
.sp-ic { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:5px;
  font-size:.68rem; font-weight:800; color:#fff; flex-shrink:0; }
.sp-ic.fb { background:#1877F2; }
.sp-ic.ig { background:linear-gradient(45deg,#F9CE34,#EE2A7B,#6228D7); font-size:.58rem; }
.sp-foot { margin-top:9px; padding-top:9px; border-top:1px solid var(--border-soft); font-size:.83rem; color:var(--fg-secondary); }
.sp-foot b { color:var(--fg); font-weight:700; }
.sp-when { display:block; margin-top:2px; font-size:.78rem; color:var(--green); font-weight:600; }
.sp-note { margin-top:14px; font-size:.78rem; color:var(--fg-muted); }

/* ── social.webup.pl: makieta planu publikacji (ekran powitalny) ── */
.mock-cal { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:16px 18px; box-shadow:var(--shadow); }
.mc-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px; padding-bottom:11px; border-bottom:1px solid var(--border-soft); }
.mc-head b { font-size:.95rem; color:var(--navy); }
.mc-legend { font-size:.72rem; color:var(--fg-muted); display:flex; align-items:center; gap:4px; }
.mc-legend i { width:8px; height:8px; border-radius:50%; display:inline-block; margin-left:6px; }
.mc-legend i.fb, .mc-d em.fb { background:#1877F2; }
.mc-legend i.ig, .mc-d em.ig { background:#EE2A7B; }
.mc-legend i.li, .mc-d em.li { background:#0A66C2; }
.mc-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-top:11px; }
.mc-dow { text-align:center; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-muted); padding-bottom:2px; }
.mc-d { aspect-ratio:1; border:1px solid var(--border-soft); border-radius:7px; padding:3px 0 0; display:flex;
  flex-direction:column; align-items:center; justify-content:flex-start; gap:3px; background:var(--surface); }
.mc-d.off { background:var(--bg); }
.mc-d i { font-style:normal; font-size:.68rem; color:var(--fg-muted); font-variant-numeric:tabular-nums; }
.mc-d em { width:6px; height:6px; border-radius:50%; display:block; }
.mc-foot { margin-top:12px; }
.mc-post { display:flex; align-items:center; gap:9px; background:var(--bg); border:1px solid var(--border-soft); border-radius:var(--r); padding:9px 11px; }
.mc-av { width:30px; height:30px; border-radius:50%; background:var(--navy); color:#fff; font-size:.7rem; font-weight:800;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mc-post b { display:block; font-size:.83rem; color:var(--fg); }
.mc-post span { font-size:.76rem; color:var(--fg-muted); }
.mc-ok { margin-left:auto; font-size:.72rem; font-weight:700; color:var(--green); white-space:nowrap; }

/* pole na całą szerokość w formularzu zapytania (opis celu) */
.audit-form .aud-full { display:block; margin-top:14px; }
.audit-form .aud-full textarea { width:100%; font-family:inherit; font-size:.95rem; resize:vertical; }

/* ── social: galeria realnych postów z prowadzonych profili ── */
.pf-bar { margin-top:24px; background:var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:11px 22px; font-size:.9rem; color:var(--fg-secondary); text-align:center; box-shadow:var(--shadow-sm); }
.pf-bar b { color:var(--navy); font-weight:800; font-variant-numeric:tabular-nums; }
.pf { margin-top:22px; }
.pf-head { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; }
.pf-head h3 { font-size:1.15rem; font-weight:800; color:var(--navy); letter-spacing:-.01em; margin:2px 0 0; }
.pf-role { font-size:.73rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-fg); }
.pf-head .pf-role { display:block; }
.pf-head > div:first-child > span:last-child { display:block; font-size:.85rem; color:var(--fg-muted); }
.pf-link { font-size:.85rem; font-weight:600; color:var(--accent-fg); text-decoration:none; white-space:nowrap; }
.pf-link:hover { text-decoration:underline; }
.pf-meta { margin-top:6px; font-size:.83rem; color:var(--fg-muted); }
.pf-meta b { color:var(--fg-secondary); font-weight:700; font-variant-numeric:tabular-nums; }
/* Układ kolumnowy (masonry), a NIE siatka o równych wierszach: posty pokazujemy
   w proporcjach, w jakich wyszły — kwadrat, pion 4:5, rolka 9:16 — więc kafle mają
   różne wysokości i muszą się upakować, zamiast zostawiać dziury pod krótszymi. */
.pt-grid { columns:5; column-gap:13px; margin-top:12px; }
.pt-grid > .pt { break-inside:avoid; margin-bottom:13px; }
@media (max-width:1100px){ .pt-grid { columns:3; } .pt-grid > .pt:nth-child(n+4) { display:none; } }
@media (max-width:640px){ .pt-grid { columns:2; } .pt-grid > .pt:nth-child(n+3) { display:none; } }
.pt { display:block; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden; text-decoration:none; color:inherit; position:relative;
  box-shadow:var(--shadow-sm); transition:.15s; }
.pt:hover { border-color:var(--border-strong); box-shadow:var(--shadow); transform:translateY(-2px); }
.pt-img { display:block; background:var(--bg); overflow:hidden; }   /* aspect-ratio ustawiane per post */
.pt-img img { width:100%; height:100%; object-fit:cover; display:block; }
.pt-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; vertical-align:baseline; }
.pt-dot.fb { background:#1877F2; }
.pt-dot.ig { background:#EE2A7B; }
.pt-dot.reel { background:var(--navy); }
.pt-body { display:flex; flex-direction:column; gap:5px; padding:10px 12px 11px; }
.pt-txt { font-size:.82rem; line-height:1.4; color:var(--fg-secondary); }
.pt-when { font-size:.74rem; color:var(--fg-muted); }

/* ── social: rozpisane realizacje ── */
.pj { margin-top:20px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:20px 24px; box-shadow:var(--shadow-sm); }
.pj-head { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:10px 20px;
  padding-bottom:13px; border-bottom:1px solid var(--border-soft); }
.pj-role { display:block; font-size:.73rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-fg); }
.pj-head h3 { font-size:1.2rem; font-weight:800; color:var(--navy); letter-spacing:-.01em; margin:3px 0; }
.pj-when { font-size:.85rem; color:var(--fg-muted); }
.pj-chips { display:flex; flex-wrap:wrap; gap:6px; }
.pj-chips span { font-size:.74rem; font-weight:600; color:var(--fg-secondary); background:var(--bg);
  border:1px solid var(--border); border-radius:999px; padding:3px 10px; }
/* Domyslnie jedna kolumna — po skroceniu realizacji wiekszosc kart ma juz tylko liste
   (Oskar 8.09). Dwie kolumny wlacza `with-quote`, tam gdzie obok listy stoi cytat. */
.pj-body { display:grid; grid-template-columns:1fr; gap:20px; margin-top:13px; align-items:start; }
.pj-body.with-quote { grid-template-columns:1.35fr 1fr; }
.pj-list { list-style:none; display:flex; flex-direction:column; gap:6px; }
.pj-list li { position:relative; padding-left:22px; font-size:.91rem; line-height:1.5; color:var(--fg-secondary); }
.pj-list li::before { content:"✓"; position:absolute; left:0; color:var(--green); font-weight:800; }
.pj-list strong { color:var(--fg); }
.pj-quote { background:var(--bg); border-left:3px solid var(--accent); border-radius:0 var(--r) var(--r) 0;
  padding:13px 16px; font-size:.93rem; line-height:1.55; color:var(--fg); font-style:italic; }
.pj-quote cite { display:block; margin-top:8px; font-style:normal; font-size:.79rem; color:var(--fg-muted); }
.pj-clients { margin-top:22px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:16px 22px; font-size:.88rem; line-height:1.7; color:var(--fg-secondary); box-shadow:var(--shadow-sm); }
.pj-clients b { display:block; color:var(--navy); font-size:.76rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; margin-bottom:4px; }
@media (max-width:760px){ .pj-body, .pj-body.with-quote { grid-template-columns:1fr; gap:14px; } .pj { padding:16px 18px; } }

/* ── social: kalkulator wyceny zapytania ── */
.qc { margin-top:26px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:22px 24px; box-shadow:var(--shadow); }
.qc-q { padding:13px 0; border-bottom:1px solid var(--border-soft); }
.qc-q:first-child { padding-top:0; }
.qc-q:last-of-type { border-bottom:none; }
.qc-q > b { display:block; font-size:.95rem; color:var(--navy); font-weight:700; margin-bottom:9px; }
.qc-q > i { display:block; margin-top:7px; font-style:normal; font-size:.79rem; color:var(--fg-muted); line-height:1.45; }
.qc-opts { display:flex; flex-wrap:wrap; gap:8px; }
.qc-chip { display:inline-flex; align-items:center; gap:8px; background:var(--bg); border:1px solid var(--border-strong);
  border-radius:999px; padding:7px 14px; font-size:.88rem; color:var(--fg-secondary); cursor:pointer; transition:.15s; }
.qc-chip.wide { border-radius:var(--r); width:100%; }
.qc-chip:hover { border-color:var(--accent); }
/* Własny kwadracik zamiast systemowego: `accent-color` maluje tło, ale ptaszka rysuje
   przeglądarka i wychodził ciemny na pomarańczowym — nie dało się na to patrzeć
   (Oskar 7.09). Teraz ptaszek jest nasz i zawsze biały. */
.qc-chip input { position:absolute; opacity:0; width:0; height:0; }
.qc-chip::before { content:"✓"; flex:0 0 auto; width:18px; height:18px; border-radius:5px;
  border:1.5px solid var(--border-strong); background:var(--surface); color:transparent;
  font-size:.72rem; font-weight:800; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; transition:.15s; }
.qc-chip:has(input:checked)::before { background:var(--accent); border-color:var(--accent); color:#fff; }
.qc-chip:has(input:focus-visible)::before { box-shadow:0 0 0 3px rgba(255,111,0,.3); }
.qc-chip:has(input:checked) { background:var(--surface); border-color:var(--accent); color:var(--fg); font-weight:600; }
.qc-chip i { font-style:normal; color:var(--fg-muted); font-weight:400; }
.qc-slide { display:flex; align-items:center; gap:14px; }
.qc-slide input[type=range] { flex:1; }
.qc-slide output { min-width:110px; text-align:right; font-weight:700; color:var(--navy);
  font-variant-numeric:tabular-nums; font-size:.92rem; }
.qc-out { margin-top:16px; background:var(--bg); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px 18px; }
.qc-pick { font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-fg); }
.qc-lines { margin-top:9px; }
.qc-line { display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:5px 0;
  font-size:.89rem; color:var(--fg-secondary); }
.qc-line b { color:var(--fg); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.qc-total { display:flex; align-items:baseline; gap:10px; margin-top:9px; padding-top:11px; border-top:2px solid var(--border); }
.qc-total span { font-weight:700; color:var(--navy); }
.qc-total b { margin-left:auto; font-size:1.5rem; font-weight:800; color:var(--accent-fg);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.qc-total i { font-style:normal; font-size:.78rem; color:var(--fg-muted); }
.qc-budget { margin-top:9px; font-size:.83rem; color:var(--fg-muted); }
.qc-budget b { color:var(--fg-secondary); }
.qc-hint { display:none; margin-top:10px; background:var(--green-soft);
  border:1px solid color-mix(in srgb, var(--green) 26%, transparent); border-radius:var(--r);
  padding:10px 13px; font-size:.86rem; line-height:1.5; color:var(--fg-secondary); }
.qc-hint b { color:var(--green); font-weight:800; }
.audit-form input[readonly] { background:var(--bg); color:var(--fg-secondary); cursor:default; }
@media (max-width:640px){
  .qc { padding:18px; }
  .qc-slide { flex-direction:column; align-items:stretch; gap:6px; }
  .qc-slide output { text-align:left; }
  .qc-total b { font-size:1.3rem; }
}

/* ── suwaki: ten sam wygląd co w panelu (.zad-range na zakładce Zadania) ──
   Domyślny suwak przeglądarki wygląda inaczej w każdej z nich; tu mamy jeden
   kształt na wszystkich landingach i zgodny z tym, co zespół widzi w panelu. */
.landing-range,
.save-calc input[type=range],
.qc-slide input[type=range] {
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:9999px;
  background:var(--border); outline:none; cursor:pointer; accent-color:auto;
}
.landing-range:focus, .save-calc input[type=range]:focus, .qc-slide input[type=range]:focus { outline:none; }
.landing-range:focus-visible, .save-calc input[type=range]:focus-visible, .qc-slide input[type=range]:focus-visible {
  box-shadow:0 0 0 3px rgba(249,115,22,.25);
}
.landing-range::-webkit-slider-thumb,
.save-calc input[type=range]::-webkit-slider-thumb,
.qc-slide input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%;
  background:var(--accent); border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.25); cursor:pointer;
}
.landing-range::-moz-range-thumb,
.save-calc input[type=range]::-moz-range-thumb,
.qc-slide input[type=range]::-moz-range-thumb {
  width:16px; height:16px; border-radius:50%; background:var(--accent);
  border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.25); cursor:pointer;
}
.landing-range::-moz-range-track,
.save-calc input[type=range]::-moz-range-track,
.qc-slide input[type=range]::-moz-range-track { height:6px; border-radius:9999px; background:transparent; }

/* ── social: ekran powitalny z prawdziwymi postami (dwie kolumny w przeciwnych kierunkach) ── */
.hero-posts { display:grid; grid-template-columns:1fr 1fr; gap:12px; height:460px; overflow:hidden;
  mask-image:linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); }
.hp-col { display:flex; flex-direction:column; gap:12px; will-change:transform; }
.hp-col.up   { animation:hpUp 42s linear infinite; }
.hp-col.down { animation:hpUp 38s linear infinite reverse; }
.hero-posts:hover .hp-col { animation-play-state:paused; }
@keyframes hpUp { from { transform:translateY(0); } to { transform:translateY(-50%); } }
.hp-i { display:block; border-radius:var(--r-lg); overflow:hidden; background:var(--surface);
  border:1px solid var(--border); box-shadow:var(--shadow-sm); flex:none; }
.hp-i img { width:100%; height:100%; object-fit:cover; display:block; }
@media (prefers-reduced-motion:reduce){ .hp-col { animation:none; } }
@media (max-width:900px){ .hero-posts { height:340px; } }

/* ── ptaszki na listach: białe na pomarańczowym kółku ──
   Zielony/ciemny znaczek na jasnym tle ginął. Jedna reguła na wszystkie listy
   (cennik, realizacje), żeby nie rozjeżdżały się między landingami. */
.price-feats li::before,
.pj-list li::before {
  content:"✓"; position:absolute; left:0; top:.28em;
  width:16px; height:16px; border-radius:50%;
  background:var(--accent); color:#fff;
  font-size:.62rem; font-weight:800; line-height:16px; text-align:center;
}
/* `.dim` = pozycja dalszego planu, NIE dodatkowo płatna. Stało tu kółko z plusem, ale po
   przejściu na cennik v3 wszystko na tych kartach jest w cenie (budowa strony, hosting,
   domeny, Workspace), więc plus mówił klientowi coś nieprawdziwego — i, jak zauważył Oskar
   1.10.2026, po prostu brzydko wyglądał. Teraz ten sam ptaszek, tylko jaśniejszy. */
.price-feats li.dim::before { opacity:.5; }
.price-feats li, .pj-list li { padding-left:25px; }

/* ═══════════════════════════════════════════════════════════════════════════
   BLOG (webup.pl/blog) — lista, kategorie, wpis.
   Świadomie na tych samych zmiennych co landingi: blog ma być częścią serwisu,
   a nie osobną wyspą wizualną (po to wychodzimy z Wixa).
   ═══════════════════════════════════════════════════════════════════════════ */
.bl-hero { padding:46px 0 10px; text-align:center; }
.bl-hero h1 { font-size:clamp(1.9rem,4vw,2.7rem); line-height:1.15; letter-spacing:-.02em;
  color:var(--navy); margin:6px 0 12px; }
.bl-cats { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:22px; }
.bl-chip { display:inline-flex; align-items:center; gap:5px; padding:7px 14px; border-radius:999px;
  background:var(--surface); border:1px solid var(--border); font-size:.83rem; font-weight:600;
  color:var(--fg-secondary); text-decoration:none; transition:.15s; }
.bl-chip:hover { border-color:var(--border-strong); color:var(--fg); }
.bl-chip.on { background:var(--accent); border-color:var(--accent); color:#fff; }

/* Nagłówek listy bloga = ekran powitalny serwisu (smugi, nadtytuł, duży h1). Minimalistyczny
   pasek z samym słowem „Blog" żył tu dwa dni i wypadł 18.10.2026 (Oskar: „z blogiem wróćmy
   jednak do poprzedniego wyglądu, głównie chodzi mi o hero"). Hero rysuje `.wu-hero`
   z `wu-hero-auto` — własnych reguł nie potrzebuje żadnych.
   Sama lista startuje wyżej niż zwykła sekcja: domyślne 72 px zostawiało pod lidem pas
   pustki, przez który pierwszy artykuł spadał poniżej ekranu. */
.wu-sec.bl-lista { padding-top:34px; }

/* ── LISTA BLOGA — wiersze zamiast kafli ─────────────────────────────────────────
   Wiersze zamiast kafli. Przy 42 wpisach BEZ ANI JEDNEGO ZDJĘCIA siatka równych
   prostokątów nie ma czym budować hierarchii — wszystko waży tyle samo, a zajawki
   urwane w połowie słowa robią z dołu kafla strzępy. Wiersz daje jedną kolumnę
   tytułów do przebiegnięcia wzrokiem, datę i temat w jednej linijce nad tytułem,
   a zajawkę docina `line-clamp`, nie wielokropek z migracji. */
.bl-layout { display:grid; grid-template-columns:minmax(0,1fr) 258px; gap:40px;
  align-items:start; margin-top:30px; text-align:left; }

/* Artykuł prowadzący: ten sam materiał co w wierszu, tylko głośniej. */
.bl-feat { display:block; padding:26px 28px 22px; border:1px solid var(--border);
  border-radius:var(--r-xl); background:var(--surface); text-decoration:none;
  box-shadow:var(--shadow-sm); transition:border-color .16s, box-shadow .16s; }
.bl-feat:hover { border-color:var(--accent); box-shadow:var(--shadow-lg); }
.bll-cat { display:block; font-size:.72rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent-fg); margin-bottom:10px; }
.bl-feat h2 { font-size:clamp(1.25rem,2.2vw,1.72rem); line-height:1.22; letter-spacing:-.015em;
  color:var(--navy); margin:0 0 10px; }
.bl-feat p { font-size:1rem; line-height:1.65; color:var(--fg-secondary); margin:0 0 18px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.bll-meta { display:flex; align-items:center; gap:10px; }
.bll-au { display:flex; flex-direction:column; line-height:1.3; }
.bll-au b { font-size:.86rem; color:var(--navy); }
.bll-au span { font-size:.79rem; color:var(--fg-muted); }
.bll-go { margin-left:auto; font-size:.88rem; font-weight:700; color:var(--accent-fg); }

/* Wiersze. Kreska rozdziela, zamiast zamykać każdy wpis w osobnej ramce. */
.bl-rows { margin-top:8px; }
.bl-row { display:block; padding:20px 2px 18px; border-bottom:1px solid var(--border-soft);
  text-decoration:none; transition:.14s; }
.bl-row:first-child { border-top:1px solid var(--border-soft); }
.bl-row:hover h3 { color:var(--accent-fg); }
.blr-meta { display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:.76rem;
  color:var(--fg-muted); font-variant-numeric:tabular-nums; }
/* Temat SZEPTEM, nie krzykiem (Oskar 16.10.2026: „kategorie za bardzo dominują w tym
   spisie artykułów"). Wersaliki w pomarańczowym przy każdym z czterdziestu wierszy
   przykrywały tytuły — a to tytuł ma być tym, po czym się wybiera. Zostaje szara
   linijka: data · temat · czas czytania. */
.blr-cat { font-weight:500; letter-spacing:0; text-transform:none; color:var(--fg-muted); }
.blr-cat::before, .blr-min::before { content:"·"; margin-right:10px; color:var(--border-strong); }
.bl-row h3 { font-size:1.08rem; font-weight:700; line-height:1.35; letter-spacing:-.01em;
  color:var(--navy); margin:6px 0 5px; transition:color .14s; }
/* DWA WIERSZE ZAJAWKI, nie jeden (Oskar 18.10.2026: „skróty artykułów są ucięte").
   Przy jednej linijce zdanie urywało się w połowie myśli — czytelnik widział początek
   i nic z niego nie wynikało. Dwie linijki mieszczą całą zajawkę przy większości wpisów,
   a wiersz rośnie o 23 px, więc lista dalej jest listą, a nie stosem kafli. */
.bl-row p { font-size:.93rem; line-height:1.6; color:var(--fg-secondary); margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Kolumna obok: tematy i jedno zaproszenie. Bez „polecanych" i „popularnych" —
   nie mierzymy odsłon, więc nie udajemy, że wiemy, co jest popularne. */
.bl-aside { position:sticky; top:84px; display:flex; flex-direction:column; gap:16px; }
.bl-box { border:1px solid var(--border); border-radius:var(--r-xl); background:var(--surface);
  padding:16px 18px; }
.bl-box > b { display:block; font-size:.74rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--fg-muted); margin-bottom:10px; }
.bl-blink { display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:7px 0; font-size:.9rem; color:var(--fg-secondary); text-decoration:none; transition:.14s; }
.bl-blink + .bl-blink { border-top:1px solid var(--border-soft); }
.bl-blink:hover { color:var(--accent-fg); }
.bl-blink i { font-style:normal; font-size:.76rem; color:var(--fg-muted);
  font-variant-numeric:tabular-nums; }
.bl-blink.on { color:var(--accent-fg); font-weight:700; }
.bl-box-cta { background:var(--lp-soft); border-color:transparent; }
.bl-box-cta p { font-size:.86rem; line-height:1.6; color:var(--fg-secondary); margin:0 0 10px; }
.bl-box-cta > a { display:block; font-size:.88rem; font-weight:700; color:var(--accent-fg);
  text-decoration:none; }
.bl-box-cta > a + a { margin-top:8px; padding-top:8px; border-top:1px solid rgba(0,0,0,.06); }
.bl-box-cta > a:hover { text-decoration:underline; }

@media (max-width:900px){
  /* Na telefonie tematy schodzą POD listę: na górze ma być treść, nie spis kategorii. */
  .bl-layout { grid-template-columns:minmax(0,1fr); gap:28px; }
  .bl-aside { position:static; }
  .bl-feat { padding:20px 18px 18px; }
  .bll-go { margin-left:0; width:100%; margin-top:10px; }
  .bll-meta { flex-wrap:wrap; }
}

.bl-grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.bl-featured { margin-bottom:22px; }
.bl-card { display:flex; flex-direction:column; gap:9px; padding:22px; text-decoration:none;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  box-shadow:var(--shadow-sm); transition:.16s; }
.bl-card:hover { border-color:var(--border-strong); box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.bl-cat { font-size:.76rem; font-weight:700; color:var(--accent-fg); text-transform:none; }
.bl-card h3 { font-size:1.08rem; line-height:1.32; color:var(--navy); letter-spacing:-.01em; margin:0; }
.bl-card p { font-size:.9rem; line-height:1.6; color:var(--fg-secondary); margin:0; flex:1; }
.bl-meta { font-size:.78rem; color:var(--fg-muted); font-weight:500; }
.bl-big { background:linear-gradient(135deg,var(--surface) 0%,var(--accent-soft) 100%);
  border-color:var(--border-strong); padding:30px; }
.bl-big h3 { font-size:clamp(1.3rem,2.6vw,1.75rem); }
.bl-big p { font-size:1rem; }

/* ── WPIS ──
   Artykuł ma się CZYTAĆ, a nie wyglądać jak landing. Dlatego trzy rzeczy inaczej
   niż na stronach sprzedażowych:
   1) nagłówek do lewej — wyśrodkowany lid łamał się w wąski, poszarpany blok;
   2) biała powierzchnia pod tekstem — domyślne tło strony (#F1F5FB) na dłuższym
      tekście męczy i wygląda jak sekcja landingu, nie jak artykuł;
   3) ciemniejszy i nieco większy tekst, węższa miara (~68 znaków). */
.bl-article { background:var(--surface); }
.bl-head { padding:40px 0 4px; text-align:left; }
.bl-back { display:inline-block; font-size:.78rem; font-weight:700; color:var(--accent-fg);
  text-decoration:none; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px; }
.bl-back:hover { text-decoration:underline; }
.bl-head h1 { font-size:clamp(1.8rem,3.6vw,2.5rem); line-height:1.2; letter-spacing:-.022em;
  color:var(--navy); margin:0 0 16px; text-wrap:balance; }
.bl-lead { font-size:1.14rem; line-height:1.6; color:var(--fg-secondary); margin:0 0 24px; max-width:660px; }
.bl-byline { display:flex; align-items:center; justify-content:flex-start; gap:11px; flex-wrap:wrap;
  padding-bottom:24px; border-bottom:1px solid var(--border); }
.bl-av { width:38px; height:38px; border-radius:50%; background:var(--accent); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:1rem; flex:0 0 auto; overflow:hidden; }
/* Zdjęcie autora — te same pliki, co w sekcji zespołu na /o-nas. Pomarańczowe tło zostaje
   tylko pod inicjałem; przy zdjęciu przebijałoby przez zaokrąglenie. */
.bl-av.has-img { background:var(--border-soft); }
.bl-av img { width:100%; height:100%; object-fit:cover; display:block; }
/* Znak firmowy zamiast twarzy (autor „Zespół Webup!"): nie kadrujemy go jak zdjęcia,
   tylko mieścimy w całości na białym kółku. */
.bl-av.is-mark { background:#fff; border:1px solid var(--border); }
.bl-av.is-mark img { object-fit:contain; padding:5px; }
.bl-av-s.is-mark img { padding:3px; }
.bl-av-s { width:24px; height:24px; font-size:.72rem; font-weight:700; }
.bl-who { display:flex; flex-direction:column; text-align:left; line-height:1.3; }
.bl-who b { font-size:.88rem; color:var(--fg); }
.bl-who span { font-size:.78rem; color:var(--fg-muted); }
.bl-when { font-size:.8rem; color:var(--fg-muted); border-left:1px solid var(--border); padding-left:11px; }

.bl-tldr { margin:28px 0 6px; padding:20px 24px; background:var(--accent-soft);
  border:1px solid #FED7AA; border-left:4px solid var(--accent); border-radius:var(--r-lg); }
.bl-tldr b { display:block; font-size:.8rem; font-weight:800; color:var(--accent-fg);
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:9px; }
.bl-tldr ul { margin:0; padding-left:20px; }
.bl-tldr li { font-size:.93rem; line-height:1.6; color:var(--fg); margin-bottom:6px; }

.bl-body { font-size:1.06rem; line-height:1.78; color:#334155; max-width:68ch; padding-bottom:8px; }
.bl-body h2 { font-size:1.5rem; line-height:1.3; color:var(--navy); letter-spacing:-.015em;
  margin:38px 0 14px; }
.bl-body h3 { font-size:1.13rem; font-weight:700; line-height:1.4; color:var(--fg); margin:30px 0 9px; }
.bl-body p { margin:0 0 16px; }
.bl-body ul, .bl-body ol { margin:0 0 18px; padding-left:22px; }
.bl-body li { margin-bottom:8px; }
.bl-body strong { color:var(--fg); font-weight:700; }
.bl-body code { background:var(--bg); border:1px solid var(--border); border-radius:var(--r-sm);
  padding:1px 6px; font-size:.9em; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.bl-body a { color:var(--accent-fg); font-weight:600; }
.bl-body blockquote { margin:26px 0; padding:18px 24px; background:var(--surface);
  border:1px solid var(--border); border-left:4px solid var(--navy); border-radius:var(--r-lg);
  font-size:1.05rem; line-height:1.6; color:var(--navy); font-weight:500; }
.bl-body table { width:100%; border-collapse:collapse; margin:0 0 20px; font-size:.92rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.bl-body th { background:var(--bg); text-align:left; font-weight:700; color:var(--fg); }
.bl-body th, .bl-body td { padding:10px 14px; border-bottom:1px solid var(--border-soft); }
.bl-body tr:last-child td { border-bottom:0; }

/* CTA w środku tekstu — wstawiane tam, gdzie akapit opisuje problem, nie na końcu wpisu */
.cta-inline { margin:28px 0; padding:22px 24px; background:var(--surface);
  border:1px solid var(--border-strong); border-radius:var(--r-xl); box-shadow:var(--shadow); }
.cta-inline b { display:block; font-size:1.02rem; color:var(--navy); margin-bottom:6px; }
.cta-inline span { display:block; font-size:.93rem; line-height:1.6; color:var(--fg-secondary); margin-bottom:14px; }
.cta-inline a { display:inline-block; background:var(--accent); color:#fff; font-weight:700;
  font-size:.9rem; padding:10px 20px; border-radius:var(--r); text-decoration:none; }
.cta-inline a:hover { background:var(--accent-light); }
.cta-inline a:active { background:var(--accent-hover); }

.bl-service { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin:34px 0 8px;
  padding:22px 24px; background:var(--navy); border-radius:var(--r-xl); color:#fff; }
/* Znak usługi w bloku „Powiązana usługa": `wu_ico_marka()` nie niesie własnych wymiarów
   (ma tylko `viewBox`), więc rozmiar musi dać CSS — bez tego SVG rozciąga się na 100%. */
.bls-ico { font-size:2rem; }
.bls-ico svg { width:34px; height:34px; display:block; }
.bls-txt { flex:1; min-width:220px; display:flex; flex-direction:column; gap:3px; }
.bls-tag { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; opacity:.65; }
.bls-txt b { font-size:1.12rem; }
.bls-txt span:last-child { font-size:.89rem; line-height:1.55; opacity:.82; }
.bls-cta { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.bls-price { font-size:.86rem; font-weight:700; opacity:.85; }

.bl-share { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:30px;
  padding-top:20px; border-top:1px solid var(--border); font-size:.87rem; color:var(--fg-muted); }
.bl-share a { color:var(--accent-fg); font-weight:600; text-decoration:none; }
.bl-share a:hover { text-decoration:underline; }

@media (max-width:640px){
  .bl-byline { justify-content:flex-start; }
  .bl-when { border-left:0; padding-left:0; width:100%; }
  .bl-service { flex-direction:column; align-items:flex-start; }
  .bls-cta { align-items:flex-start; width:100%; }
}

/* ── strona główna: grupy usług, ścieżka startowa, cennik zbiorczy ────────────
   Nazwa .ptab-*, a nie .pt-* — .pt/.pt-grid to kafle postów social mediów. */
.svc-group { margin-bottom:34px; }
.svc-group:last-child { margin-bottom:0; }
.svc-gt { display:inline-block; font-size:.88rem; font-weight:700; color:var(--navy);
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:7px 16px; margin-bottom:16px; box-shadow:var(--shadow-sm); }

.start-grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.start-card { position:relative; display:flex; flex-direction:column; gap:8px; padding:26px 24px 22px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  box-shadow:var(--shadow-sm); text-decoration:none; transition:.16s; }
.start-card:hover { border-color:var(--accent); box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.start-no { position:absolute; top:-13px; left:24px; width:28px; height:28px; border-radius:50%;
  background:var(--navy); color:#fff; font-size:.85rem; font-weight:800; display:grid; place-items:center; }
.start-card b { font-size:1.08rem; color:var(--navy); margin-top:4px; }
.start-what { font-size:.92rem; line-height:1.6; color:var(--fg-secondary); flex:1; }
.start-go { font-size:.88rem; font-weight:700; color:var(--accent-fg); }

.ptab-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-xl);
  background:var(--surface); box-shadow:var(--shadow); }
.ptab { width:100%; min-width:640px; border-collapse:collapse; font-size:.93rem; }
.ptab th { background:var(--bg); text-align:left; padding:12px 18px; font-size:.78rem;
  font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-muted);
  border-bottom:1px solid var(--border); }
.ptab td { padding:14px 18px; border-bottom:1px solid var(--border-soft); vertical-align:top;
  color:var(--fg-secondary); line-height:1.55; }
.ptab td:first-child { color:var(--fg); font-weight:600; white-space:nowrap; }
.ptab td:nth-child(2) { white-space:nowrap; color:var(--fg); font-weight:600; }
.ptab td:nth-child(2) span { display:block; font-size:.8rem; font-weight:500; color:var(--fg-muted); }
.ptab td:last-child { text-align:right; white-space:nowrap; }
.ptab td:last-child a { color:var(--accent-fg); font-weight:700; text-decoration:none; }
.ptab td:last-child a:hover { text-decoration:underline; }
.ptab tr:last-child td { border-bottom:0; }
.ptab-pkg td { background:var(--accent-soft); }
.ptab-sep td { background:var(--navy); color:#fff; font-size:.76rem; font-weight:700; text-align:left;
  text-transform:uppercase; letter-spacing:.06em; padding:8px 18px; }
.ptab-note { margin-top:14px; font-size:.88rem; color:var(--fg-muted); text-align:center; }
.ptab-note a { color:var(--accent-fg); font-weight:600; }

/* ── PING: kroki self-serve audytu (zastąpiły formularz zgłoszeniowy) ── */
.aud-steps { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); margin-top:24px; }
.aud-step { position:relative; display:flex; flex-direction:column; gap:5px; padding:22px 20px 18px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-sm); }
.aud-n { position:absolute; top:-12px; left:20px; width:26px; height:26px; border-radius:50%;
  background:var(--lp); color:#fff; font-size:.8rem; font-weight:800; display:grid; place-items:center; }
.aud-step b { font-size:.98rem; color:var(--navy); margin-top:3px; }
.aud-step span:last-child { font-size:.87rem; line-height:1.55; color:var(--fg-secondary); }

/* ── odniesienie ceny do wartości, jaką klient dostaje (nad cennikiem) ── */
.price-anchor { max-width:720px; margin:0 auto 26px; padding:14px 22px; text-align:center;
  background:var(--accent-soft); border:1px solid #FED7AA; border-radius:var(--r-lg);
  font-size:.95rem; line-height:1.6; color:var(--fg-secondary); }
.price-anchor b { color:var(--accent-fg); font-weight:700; }

/* ═══════════════════════════════════════════════════════════════════════════
   STYL MARKI ZE STAREJ webup.pl — używany na stronie głównej i blogu.
   Landingi produktowe zostają na gęstszym układzie „sprzedażowym"; strona główna
   i blog mają wyglądać jak dotychczasowa witryna: płynne smugi pomarańcz+turkus,
   lekka i duża typografia, nadtytuł wersalikami, dużo powietrza.
   ═══════════════════════════════════════════════════════════════════════════ */
.wu { --wu-teal:#0D9488; }

/* nadtytuł sekcji: pomarańczowe wersaliki + kreska pod spodem */
.wu-kicker { display:block; text-align:center; font-size:.82rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
.wu-kicker::after { content:""; display:block; width:26px; height:3px; border-radius:2px;
  background:var(--accent); margin:11px auto 0; }

/* nagłówek: duży, LEKKI, wyśrodkowany — jak na starej stronie */
.wu-h2 { text-align:center; font-size:clamp(1.7rem,3.6vw,2.6rem); font-weight:300;
  line-height:1.25; letter-spacing:-.015em; color:var(--navy); margin:0 auto 16px; max-width:820px; }
.wu-h2 b, .wu-h2 strong { font-weight:600; }
.wu-sub { text-align:center; font-size:1.03rem; line-height:1.7; color:var(--fg-secondary);
  max-width:660px; margin:0 auto 40px; font-weight:400; }
/* Sekcje są BIAŁE domyślnie. Wcześniej nie miały żadnego tła, więc przebijało przez nie
   niebieskawe tło `body` i cała strona była jednolicie niebieska — a przeplot biały/niebieski
   był zamierzony (dwie sekcje mają wprost `background:var(--bg)`). Tylko one zostają niebieskie. */
.wu-sec { padding:80px 0; background:var(--surface); }
.wu-sec.tight { padding:56px 0; }
/* Ta sama zasada co `.alt` na landingach: sekcja w kolorze tła strony wchodzi w ten kolor
   gradientem od bieli sąsiada NAD nią, a sekcja biała pod nią wychodzi z niebieskiego —
   każde wygaszenie dochodzi do koloru, który druga sekcja naprawdę ma (Oskar 9.09). */
.wu-sec.tlo { background:linear-gradient(180deg, var(--surface) 0%, var(--bg) 20%); }
/* `.wu-pas` w tej liście, bo sekcja z tłem może siedzieć WEWNĄTRZ pasa (strona główna:
   „Cześć!" + blog) — wtedy sąsiadem sekcji białej jest pas, nie ona sama, i bez tego
   wpisu wyjście z błękitu do bieli urywa się kreską. */
.wu-sec.tlo + .wu-sec,
.wu-sec.tlo + script + .wu-sec,
.wu-pas + .wu-sec,
.wu-pas + script + .wu-sec { background:linear-gradient(180deg, var(--bg) 0%, var(--surface) 20%); }
/* Po „Cześć!" blog zaczyna się BIELĄ i schodzi do koloru tła (Oskar 9.09) — „Cześć!" kończy
   się teraz bielą, więc przejście prowadzi z jednego realnego koloru do drugiego. Wcześniej
   stała tu reguła spłaszczająca blog do koloru tła; nie jest już potrzebna. */

/* hero ze smugami */
/* Hero wchodzi POD pasek nawigacji (pasek jest przezroczysty, więc ma przez niego iść
   to samo tło co niżej). Bez tego nad hero zostawał jasny pas w kolorze tła strony
   i „transparentny” pasek wyglądał jak osobna belka. Wysokość paska jest stała na
   desktopie (73 px); na telefonie pasek zawija się w dwa rzędy, więc tam nie podciągamy. */
.wu-hero { position:relative; overflow:hidden; background:#fff; padding:96px 0 68px; }
@media (min-width:761px){
  .wu-hero { margin-top:-73px; padding-top:calc(96px + 73px); }
}
@media (max-width:760px){
  /* Na telefonie pasek to jeden rząd o stałej wysokości (logo + hamburger) = 59 px.
     Rozwinięte menu jest wyższe, ale ma własne tło, więc podciągnięcie zostaje bez zmian
     i układ nie skacze przy otwieraniu. */
  .wu-hero { margin-top:-59px; padding-top:calc(44px + 59px); }
}
/* ── ŻYWE TŁO MARKI ─────────────────────────────────────────────────────────
   Buduje je CSS, a nie animowany SVG. Poprzednia wersja trzymała animacje SMIL
   w <img> — Chrome je odtwarza, ale Safari (i każda przeglądarka z blokadą SMIL)
   pokazuje pierwszą klatkę i tło stoi. Na kolorowych plamach z `radial-gradient`
   animowanych przez `transform`/`opacity` działa wszędzie tak samo i idzie na GPU.

   Kolory wyłącznie z logo: #FF6F00 i #27495B (+ ich jaśniejsze warianty).
   Cztery plamy, każda z własnym czasem (16/21/26/33 s) i własną trasą — okresy są
   względnie pierwsze, więc układ nie wraca do tej samej klatki i nie widać pętli. */
/* Rozmycie 40 px, nie 64 — przy mocniejszym plamy tak się uśredniają, że ruch przestaje
   być widoczny gołym okiem (zmierzone: max różnica 25/255 między klatkami). */
.wu-bg { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  filter:blur(40px); opacity:1; --mx:0; --my:0; --px:50%; --py:50%; }

.wu-blob { position:absolute; border-radius:50%; will-change:transform, opacity; }
/* Piąta plama, ZAKOTWICZONA w prawym górnym rogu — pod pozycjami menu. Cztery pozostałe
   odpływają i w części cyklu pas pod menu robił się prawie biały, przez co białe napisy
   znikały. Ta oddycha w miejscu, więc kolor spod menu nigdy nie ucieka.
   GRANATOWA, nie pomarańczowa: pomarańcz ma z bielą najwyżej ~2,5:1 przy wymaganych 4,5:1,
   granat daje ~7:1. Wcześniejsza próba z pomarańczową plamą dlatego nic nie dała.
   Jest CZĘŚCIĄ TŁA (siedzi w .wu-bg, pod welonem), a nie nakładką na pasek. */
.wu-bg::after { content:""; position:absolute; top:-34%; right:-14%; width:78vw; height:34vw;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(ellipse at 60% 64%, #27495B 0%, #33586D 45%, rgba(39,73,91,0) 76%);
  animation:wuAnchor 20s ease-in-out infinite; }
@keyframes wuAnchor {
  0%,100% { transform:translate3d(0,0,0) scale(1); }
  50%     { transform:translate3d(-5%, 3%, 0) scale(1.1); }
}
/* Warstwa paralaksy siedzi na RODZICU plamy, żeby nie kolidować z animacją `transform`
   samej plamy — dwie animacje tej samej właściwości wykluczyłyby się nawzajem. */
.wu-par { position:absolute; inset:0; transition:transform 1.4s cubic-bezier(.16,.8,.3,1); }
.wu-par.p1 { transform:translate3d(calc(var(--mx) * 130px), calc(var(--my) * 95px), 0); }
.wu-par.p2 { transform:translate3d(calc(var(--mx) * -105px), calc(var(--my) * 80px), 0); }
.wu-par.p3 { transform:translate3d(calc(var(--mx) * 88px), calc(var(--my) * -100px), 0); }
.wu-par.p4 { transform:translate3d(calc(var(--mx) * -160px), calc(var(--my) * -120px), 0); }
@media (prefers-reduced-motion:reduce){ .wu-par { transform:none !important; } }
.wu-blob.b1 { width:56vw; height:46vw; top:-16%; right:-10%;
  background:radial-gradient(circle at 40% 40%, #FF9A3D 0%, #FF6F00 45%, rgba(255,111,0,0) 72%);
  animation:wuFloat1 12s ease-in-out infinite; }
.wu-blob.b2 { width:46vw; height:40vw; bottom:-18%; left:-8%;
  background:radial-gradient(circle at 50% 50%, #E56400 0%, rgba(229,100,0,0) 70%);
  animation:wuFloat2 16s ease-in-out infinite; }
.wu-blob.b3 { width:44vw; height:36vw; top:-8%; right:24%;
  background:radial-gradient(circle at 50% 50%, #27495B 0%, #3A6B85 38%, rgba(58,107,133,0) 72%);
  animation:wuFloat3 20s ease-in-out infinite; opacity:1; }
.wu-blob.b4 { width:40vw; height:32vw; top:6%; left:8%;
  background:radial-gradient(circle at 50% 50%, #FFC48A 0%, rgba(255,196,138,0) 70%);
  animation:wuFloat4 25s ease-in-out infinite; }

/* Trasy są nieregularne (cztery przystanki, nie tam-i-z-powrotem) i łączą przesunięcie
   ze skalą oraz obrotem — dzięki temu plama zmienia też KSZTAŁT, a nie tylko pozycję. */
@keyframes wuFloat1 {
  0%   { transform:translate3d(0,0,0)            scale(1)    rotate(0deg); }
  25%  { transform:translate3d(-30%, 20%, 0)     scale(1.45) rotate(14deg); }
  50%  { transform:translate3d(14%, 38%, 0)      scale(.72)  rotate(-12deg); }
  75%  { transform:translate3d(-18%, -14%, 0)    scale(1.28) rotate(8deg); }
  100% { transform:translate3d(0,0,0)            scale(1)    rotate(0deg); }
}
@keyframes wuFloat2 {
  0%   { transform:translate3d(0,0,0)            scale(1)    rotate(0deg); opacity:.9; }
  33%  { transform:translate3d(-40%, -30%, 0)    scale(1.5)  rotate(-18deg); opacity:.35; }
  66%  { transform:translate3d(18%, 14%, 0)      scale(.7)   rotate(12deg); opacity:1; }
  100% { transform:translate3d(0,0,0)            scale(1)    rotate(0deg);  opacity:.9; }
}
@keyframes wuFloat3 {
  0%   { transform:translate3d(0,0,0)            scale(1)    rotate(0deg); }
  40%  { transform:translate3d(48%, -26%, 0)     scale(1.4)  rotate(14deg); }
  70%  { transform:translate3d(-14%, 24%, 0)     scale(.72)  rotate(-10deg); }
  100% { transform:translate3d(0,0,0)            scale(1)    rotate(0deg); }
}
@keyframes wuFloat4 {
  0%   { transform:translate3d(0,0,0)            scale(1)    rotate(0deg);   opacity:.85; }
  30%  { transform:translate3d(55%, -34%, 0)     scale(1.6)  rotate(22deg);  opacity:.3; }
  60%  { transform:translate3d(-40%, 30%, 0)     scale(.65)  rotate(-18deg); opacity:1; }
  100% { transform:translate3d(0,0,0)            scale(1)    rotate(0deg);   opacity:.85; }
}
/* Hero i sekcja z wizytówką: tło wychodzi z krawędzi, więc pod treścią kładziemy
   jasny welon — inaczej tekst czytałoby się na pełnym pomarańczu. */
.wu-hero::before { content:""; position:absolute; inset:0; z-index:1;
  background:rgba(255,255,255,.34); }
.wu-hero .section-inner { position:relative; z-index:2; }

.wu-hero-copy { max-width:600px; }
.wu-hero h1 { font-size:clamp(2.1rem,4.6vw,3.4rem); font-weight:300; line-height:1.14;
  letter-spacing:-.025em; color:var(--navy); margin:0 0 20px; }
.wu-hero h1 b { font-weight:600; color:var(--accent); }
.wu-hero p { font-size:1.1rem; line-height:1.7; color:var(--fg-secondary); margin:0 0 30px; max-width:520px; }
.wu-hero-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:.8rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
@media (max-width:900px){
  .wu-hero { padding:64px 0 60px; }
  .wu-hero::before { opacity:.55; }
}

/* ── STAWKA W PROGRAMIE PARTNERSKIM ──
   Liczba ma być pierwszą rzeczą, którą widać — po nią ludzie wchodzą na tę stronę. */
.pp-rate { padding:34px 0; }
.pp-rate-box { display:flex; align-items:center; gap:34px; flex-wrap:wrap; justify-content:center;
  max-width:860px; margin:0 auto; padding:30px 34px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-sm); }
.pp-rate-num { display:flex; flex-direction:column; align-items:center; text-align:center;
  padding-right:34px; border-right:1px solid var(--border-soft); }
.pp-rate-num b { font-size:4rem; font-weight:800; line-height:1; color:var(--accent);
  letter-spacing:-.03em; }
.pp-rate-num span { font-size:.84rem; color:var(--fg-muted); margin-top:8px; max-width:170px; }
.pp-rate-list { margin:0; padding:0; list-style:none; flex:1 1 320px; }
.pp-rate-list li { position:relative; padding-left:22px; font-size:.95rem; line-height:1.6;
  color:var(--fg-secondary); margin-bottom:10px; }
.pp-rate-list li:last-child { margin-bottom:0; }
.pp-rate-list li::before { content:""; position:absolute; left:0; top:.6em; width:8px; height:8px;
  border-radius:50%; background:var(--accent); }
.pp-rate-list b { color:var(--fg); font-weight:700; }
@media (max-width:760px){
  .pp-rate-box { gap:20px; padding:24px 20px; }
  .pp-rate-num { padding:0 0 18px; border-right:0; border-bottom:1px solid var(--border-soft);
    width:100%; }
  .pp-rate-num b { font-size:3rem; }
}

/* ── STRONY DOKUMENTÓW (polityka prywatności, regulamin) ──
   Wąska kolumna i numeracja z <ol>; dokument prawny ma się dobrze CZYTAĆ,
   a nie wyglądać jak landing. Numery pochodzą z listy, nie z treści. */
.doc-page .section-inner { max-width:820px; }
.doc-page h1 { text-align:left; }
.doc-meta { font-size:.86rem; color:var(--fg-muted); margin:6px 0 34px; }
.doc-page h2 { font-size:1.05rem; font-weight:700; letter-spacing:.01em; color:var(--navy);
  margin:34px 0 12px; padding-top:18px; border-top:1px solid var(--border-soft); }
.doc-list { margin:0 0 4px; padding-left:22px; }
.doc-list li { font-size:.95rem; line-height:1.75; color:var(--fg-secondary); margin-bottom:9px; }
.doc-list li::marker { color:var(--accent-fg); font-weight:600; }
/* Akapit, tabela i wyróżnienie w dokumencie — dołożone 5.10.2026 razem z regulaminem
   i polityką prywatności smartcookie.io. Polityka ma dwie tabele (zakres logu zgód
   i uprawnienia Google), bez których Google nie zweryfikuje aplikacji, a `doc-list`
   sam tego nie udźwignie. */
.doc-p { font-size:.95rem; line-height:1.75; color:var(--fg-secondary); margin:0 0 12px; }
.doc-p code, .doc-tab code { font-size:.86em; background:var(--bg); border:1px solid var(--border-soft);
  border-radius:5px; padding:1px 5px; white-space:nowrap; }
.doc-tab { width:100%; border-collapse:collapse; margin:4px 0 16px; }
.doc-tab th, .doc-tab td { text-align:left; vertical-align:top; padding:9px 12px;
  border-bottom:1px solid var(--border-soft); font-size:.9rem; line-height:1.65;
  color:var(--fg-secondary); }
.doc-tab th { font-weight:700; color:var(--fg); background:var(--bg);
  border-bottom:1px solid var(--border); }
.doc-tab td:first-child { width:38%; color:var(--fg); }
.doc-ramka { margin:4px 0 16px; padding:14px 16px; border:1px solid var(--border);
  border-left:3px solid var(--accent); border-radius:var(--r-md, 10px); background:var(--surface); }
.doc-ramka p { margin:0; font-size:.92rem; line-height:1.7; color:var(--fg-secondary); }
@media (max-width:620px) {
  .doc-tab, .doc-tab tbody, .doc-tab tr, .doc-tab th, .doc-tab td { display:block; width:auto; }
  .doc-tab tr { padding:10px 0; border-bottom:1px solid var(--border-soft); }
  .doc-tab th, .doc-tab td { padding:2px 0; border:0; }
  .doc-tab td:first-child { width:auto; font-weight:600; }
}

/* ── KAFLE ARTYKUŁÓW (strona główna, lista /blog, „powiązane" pod wpisem) ──
   Jeden wygląd we wszystkich trzech miejscach. Wcześniej blog miał własny kafel
   z pomarańczową płytką i po redesignie strony głównej widoki się rozjechały.
   Język ten sam co kafle usług: ta sama obwódka, uniesienie i kolor tytułu po najechaniu. */
.wu-posts.cards { display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
  max-width:1080px; margin:0 auto; }
.wu-post-card { position:relative; display:flex; flex-direction:column; flex:0 1 calc(33.333% - 10px);
  min-width:250px; padding:22px 22px 18px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); text-decoration:none; box-shadow:var(--shadow-sm);
  transition:border-color .16s, box-shadow .16s, transform .16s; }
.wu-post-card:hover { border-color:var(--accent); transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(39,73,91,.12); }
.wpc-cat { font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-fg); margin-bottom:10px; }
.wu-post-card h3 { font-size:1.04rem; font-weight:600; line-height:1.4; color:var(--navy);
  margin:0 0 8px; text-wrap:balance; }
.wu-post-card:hover h3 { color:var(--accent-fg); }
.wu-post-card p { font-size:.89rem; line-height:1.6; color:var(--fg-secondary); margin:0 0 16px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
/* Data i czas czytania zawsze przy dolnej krawędzi, żeby karty w rzędzie kończyły się równo. */
.wpc-meta { display:flex; align-items:center; gap:8px; margin-top:auto; font-size:.78rem;
  color:var(--fg-muted); }
.wpc-au { display:flex; flex-direction:column; line-height:1.35; min-width:0; }
.wpc-au b { font-weight:600; color:var(--fg-secondary); }

/* Wpis wyróżniony — pierwszy na liście /blog. Pełna szerokość i większy tytuł;
   bez tego dwanaście identycznych prostokątów nie mówi, od czego zacząć. */
.wu-post-card.feat { flex:0 0 100%; padding:30px 30px 24px;
  background:linear-gradient(180deg,#fff 0%,var(--surface-alt,#F7F8FA) 100%); }
.wu-post-card.feat h3 { font-size:1.5rem; line-height:1.3; letter-spacing:-.015em; margin-bottom:10px; }
.wu-post-card.feat p { font-size:.98rem; max-width:70ch; -webkit-line-clamp:2; margin-bottom:14px; }
/* Duzy kafel to zwykle najnowszy wpis — ale nie wtedy, gdy na gorze siedzi PRZYPIETY
   (jego etykieta zaczyna sie od pinezki). Wpis z 1.09 podpisany „najnowszy" nad wpisami
   z wrzesnia wygladalby na blad. */
.wu-post-card.feat .wpc-cat:not(.pin)::after { content:" · najnowszy"; color:var(--fg-muted); font-weight:600; }

@media (max-width:980px){ .wu-post-card { flex:0 1 calc(50% - 7px); } }
@media (max-width:760px){
  .wu-posts.cards { gap:10px; }
  .wu-post-card, .wu-post-card.feat { flex:0 1 100%; min-width:0; padding:18px 16px 14px; }
  .wu-post-card p { -webkit-line-clamp:2; }
  .wu-post-card.feat h3 { font-size:1.2rem; }
}

/* pasek partnerów pod hero — szare logotypy, dużo światła */
/* Wszystkie osiem w JEDNEJ linii (decyzja Oskara 09.08 — dwa rzędy wyglądały źle) i na tym
   samym tle co reszta strony, bez własnego szarego pasa i kreski. Ramka zjeżdża ze 170 do 122 px,
   żeby 8×122 + 7×14 = 1074 zmieściło się w kolumnie 1080. */
/* Odstępy poluzowane 16.10.2026 (Oskar: „jest trochę za blisko tych logotypów"). Było
   14/10 px na pasie i 6 px między logotypami a podpisem — przy podpisie w tym samym szarym
   co znaki wyglądał jak jedenasty logotyp, a nie jak podpis pod nimi. */
.wu-partners-wrap { background:var(--surface); padding:18px 0 20px; }
.wu-partners { display:flex; align-items:center; justify-content:center; gap:16px 10px;
  flex-wrap:wrap; padding:0 max(16px, calc((100% - 1080px) / 2)); }
/* Tor istnieje dla taśmy na telefonie; na szerokim ekranie znika z układu, więc
   odnośniki są znów bezpośrednimi elementami siatki. */
.wp-track { display:contents; }
.wp-dup { display:none; }
/* Dziesiąty znak (JOWES, 9.09) nie mieścił się w rzędzie i zostawał sam w drugiej linii.
   Węższe gniazdo i mniejsza przerwa: 10×96 + 9×10 = 1050 px, czyli poniżej 1080 px szerokości
   pasa. Szerokie znaki skalują się w dół przez globalne `img{max-width:100%}`. */
.wu-partners a { flex:0 0 96px; max-width:96px; }
/* Na tablecie dziesięć w linii się nie mieści — zwężamy pas tak, żeby wyszło równe 5+5
   (5×96 + 4×10 = 520), a nie dziewięć i jeden sierota w drugim rzędzie. */
@media (max-width:1119px) and (min-width:761px){
  .wu-partners { padding-inline:max(16px, calc((100% - 520px) / 2)); }
  /* Angielska szóstka ma inne gniazda (150 px), więc pas 520 px łamałby ją na 2+2+2.
     Przy 3+3 wychodzi 3×150 + 2×30 = 510 i są dwa równe rzędy. */
  .wu-partners.wp-en { padding-inline:max(16px, calc((100% - 510px) / 2)); }
}
/* Podpis pod spodem: najpierw logotypy, dopiero potem wyjasnienie. */
/* Podpis ma być ledwo obecny — to przypis do logotypów, nie nagłówek sekcji. */
.wu-partners-head { display:block; width:100%; text-align:center; font-size:.68rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--fg-muted); opacity:.62; margin-top:16px; }
/* Wyrównanie wielkości siedzi w SAMYCH PLIKACH, nie tutaj: każdy znak jest wpasowany
   w to samo płótno 170×50 (2× = 340×100), a jego rozmiar w środku wyliczony z proporcji
   tak, żeby wszystkie miały podobne POLE — równa wysokość robiła ze znaku kwadratowego
   (Sektor 3.0) znaczek przy szerokim napisie (Radio Gdańsk). Skrypt: normalize_partners.py.
   Dlatego w CSS wystarczy jedna wysokość i wszystkie ramki wychodzą identyczne.
   Pliki mają zachowany kanał alfa — przy usuniętej przezroczystości zostawał biały prostokąt. */
/* Znaki są zredukowane do jednego koloru marki (duotone granat→biel, wypalony w plikach),
   więc osiem logotypów z ośmiu różnych stron czyta się jak jeden zestaw, a nie jak zlepek. */
.wu-partners a { display:grid; place-items:center; }
/* Wersja angielska: sześć znaków zamiast dziesięciu, więc każdy dostaje szerszą ramkę
   i większy odstęp (Oskar 18.10.2026: „daj więcej miejsca między logotypami"). Przy
   dziesiątce te same wartości rozpychały taśmę na dwa wiersze. */
.wu-partners.wp-en { gap:18px 30px; }
.wu-partners.wp-en a { flex-basis:150px; max-width:150px; }
/* Plakietki Google Partner i Meta są SPIĘTRZONE (znak nad napisem), więc przy wysokości
   32 px wychodziły wielkości paznokcia obok szerokich napisów — płótno 340×100 wyrównuje
   POLE tuszu, a kwadrat przy niskim wierszu nie ma jak urosnąć wszerz. Angielska taśma ma
   sześć znaków zamiast dziesięciu, więc stać ją na wyższy wiersz; polska zostaje na 32.
   RAMKA MUSI ROSNĄĆ RAZEM Z WYSOKOŚCIĄ: płótno ma proporcję 3,4:1, a `img { max-width:100% }`
   z arkusza bazowego przycina szerokość do ramki — przy 124 px i wysokości 42 px znaki
   wychodziły ściśnięte w poziomie o 13%. 150 × 44 trzyma proporcję (150/44 ≈ 3,41), a sześć
   takich ramek z odstępem 30 px mieści się w jednym wierszu (6×150 + 5×30 = 1050 < 1080). */
.wu-partners.wp-en img { height:44px; }
.wu-partners img { height:32px; width:auto; opacity:.85; transition:.2s; }
.wu-partners a:hover img { opacity:1; }
.wu-partners a:hover img { transform:translateY(-1px); }

/* usługi: duża okrągła ikona w ramce, tytuł, jedno zdanie — bez ścian tekstu */
/* Kompaktowo: ikona obok tekstu zamiast nad nim. Dziewięć kafli z ikoną 96 px
   i akapitem pod spodem zajmowało dwa ekrany; teraz mieszczą się w jednym. */
/* OPISY ZACZYNAJĄ SIĘ RÓWNO W CAŁYM RZĘDZIE (Oskar 18.10.2026: „czy tekst w usługach nie
   powinien zaczynać się równo pod nagłówkiem? teraz jest jakoś rozjechane").
   Kafle to teraz SIATKA, a każdy kafel dziedziczy wiersze rodzica przez `subgrid` — więc
   wysokość wiersza tytułu jest wspólna dla całego rzędu i bierze się z najdłuższego tytułu.
   Przy `flex` każdy kafel mierzył się sam: „Google Workspace for Nonprofits" łamał się
   na dwie linie i jego opis startował niżej niż w sąsiadach.
   Przeglądarka bez `subgrid` ignoruje tę deklarację i wraca do `minmax(22px,auto)` z reguły
   niżej — czyli do zachowania sprzed zmiany, bez nachodzenia tekstu. */
/* RÓWNO W CAŁEJ SEKCJI, NIE TYLKO W JEDNYM RZĘDZIE (Oskar 19.10.2026: „na angielskiej
   wersji te usługi też nie zaczynają się w równym odstępie od nagłówka — czemu to nie jest
   spójne?"). Sam `subgrid` wyrównywał opisy WEWNĄTRZ rzędu, bo wysokość wiersza tytułu brała
   się z najdłuższego tytułu w TYM rzędzie. Przy 1100 px „Google Workspace for Nonprofits"
   łamie się na dwie linie, więc w Infrastrukturze opisy startowały 21 px niżej niż
   w Marketingu — zmierzone, nie na oko. `grid-auto-rows` daje KAŻDEMU rzędowi ten sam
   pas tytułu (2,7 rem = dwie linie przy 1 rem/1,35), więc odstęp jest jeden na całej
   stronie i w każdym języku. Pas ustępuje dopiero tytułowi na trzy linie. */
.wu-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
/* BEZ rezerwowania dwóch linii na tytuł (próba z 19.10.2026 — Oskar: „miało być równo
   zaraz pod nagłówkiem, nie z taką przerwą! wcześniej na PL było dobrze"). Stały pas
   wyrównywał wszystko, ale pod jednoliniową nazwą zostawiał 21 px dziury. Opis ma stać
   tuż pod nazwą, a równo wychodzi dlatego, że ŻADNA nazwa się nie łamie: rząd pilnuje
   `subgrid`, a najdłuższa angielska nazwa jest skrócona w słowniku tak, żeby mieściła
   się w linii (`wu_en_slownik()`, klucz z `<h3>`). */
.wu-cards > .wu-card { grid-row:span 2; grid-template-rows:subgrid; }
/* Samotny kafel w ostatnim rzędzie (np. czwarty na /program-partnerski) idzie na środek —
   przy `flex` robiło to `justify-content:center`, w siatce trzeba go wskazać wprost. */
.wu-cards > .wu-card:last-child:nth-child(3n+1) { grid-column:2; }
/* DWA KAFLE W RZĘDZIE NA TRZY — para idzie na środek, zamiast zostawiać dziurę po prawej
   (Oskar 19.10.2026: „wyśrodkuj te dwa, czyli workspace i smartcookie"). Kafle zachowują
   szerokość kolumny z rzędu trzech: `max-width` to dokładnie dwie takie kolumny plus
   przerwa między nimi, więc para nie rozlewa się na pół ekranu. Używa tego wersja angielska
   strony głównej, w której Infrastruktura ma dwie pozycje zamiast sześciu. */
.wu-cards.wu-para { grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:calc((100% - 24px) / 3 * 2 + 12px); margin-inline:auto; }
/* Ikona zajmuje oba wiersze pierwszej kolumny, tytuł i opis idą w drugiej. Bez
   `grid-row` akapit lądował w kolumnie szerokiej na 52 px i łamał się po jednym słowie. */
/* Wiersz tytulu ma 22 px, ale ROSNIE, gdy tytul sie lamie (`minmax`). Sztywne 22 px
   wystarczalo, dopoki wszystkie nazwy byly polskie i jednowierszowe — po angielsku
   „Google Workspace for Nonprofits" lamie sie na dwie linie i druga wchodzila WPROST
   na opis pod spodem (Oskar 18.10.2026, zrzut: „co tu sie stalo?").
   Po co w ogole 22 px: przy samym `auto` opisy w sasiednich kaflach startowaly na roznych
   wysokosciach. `minmax` trzyma je rowno wszedzie tam, gdzie tytul miesci sie w linii,
   a ustepuje tylko temu kaflowi, ktory naprawde potrzebuje dwoch. */
/* `align-content:start` — DRUGA POŁOWA równego odstępu. Kafle w rzędzie mają wspólną wysokość
   (siatka je rozciąga), a domyślny `stretch` rozdzielał tę nadwyżkę PO RÓWNO między wiersz
   tytułu i wiersz opisu: kafel z krótszym zdaniem dostawał +11 px pod tytuł i jego opis
   startował niżej niż u sąsiada z tego samego rzędu. Zmierzone na „Google Ad Grants" obok
   „PING.NGO". Teraz nadwyżka zbiera się na dole kafla, gdzie jej nie widać. */
.wu-card { display:grid; grid-template-columns:52px 1fr; grid-template-rows:minmax(22px,auto) auto;
  align-items:start; align-content:start; gap:2px 14px; text-align:left; text-decoration:none;
  padding:14px 16px; border-radius:var(--r-lg);
  transition:background .18s, box-shadow .18s, color .18s; }
.wu-card > .wu-ico { grid-column:1; grid-row:1 / span 2; align-self:start; }
.wu-card > h3 { grid-column:2; grid-row:1; align-self:start; line-height:1.35; }
.wu-card > p  { grid-column:2; grid-row:2; margin-top:6px; }
/* Najechanie na usługę — JEDNA reakcja w całym serwisie i WYŁĄCZNIE kolorem: pomarańczowa
   obwódka, nazwa i ikona. Bez podnoszenia kafla i bez poświaty (Oskar 7.09) — wcześniej
   kafle zalewały się granatem, a pozycje rozwijanego menu dostawały pomarańczowe tło,
   czyli dwa różne języki na tę samą czynność. */
.wu-card:hover { background:var(--surface); border-color:var(--accent); }
.wu-card:hover h3 { color:var(--accent-fg); }
.wu-ico { width:52px; height:52px; border-radius:15px; border:1px solid var(--border);
  background:var(--surface); display:grid; place-items:center; color:var(--navy);
  box-shadow:var(--shadow-sm); transition:.2s; }
.wu-ico svg, .wu-ico img { width:26px; height:26px; }
/* Kafle trzech kursów noszą plakietkę z `wu_ico_kurs()` — pełnokolorową, nie konturową
   (ta sama co na /kurs-google-ad-grants i w panelu klienta). Ramka, tło i pomarańczowy
   :hover zostają TAKIE SAME jak przy pozostałych kaflach (Oskar 16.10.2026); plakietka
   nie ma już własnego prostokąta, więc nic się nie dubluje. Jedyna różnica to rozmiar —
   przy 26 px rysunek gubił szczegóły. Kafle kursów stoją w swoim własnym rzędzie, więc
   większy znak niczemu tam nie przeszkadza.

   ZNAK PING.NGO ZOSTAJE PRZY 26 px, czyli tyle co sąsiedzi (Oskar 16.10.2026: „trzeba
   przywrócić logo PING.NGO albo zmienić inne, żeby bardziej do niego pasowały"). Powód
   jest inny niż przy kursach: PING siedzi w JEDNYM rzędzie z konturowymi ikonami Ad Grants
   i social mediów, a znak na 34 px był tam jedynym wielkim elementem i rozbijał rytm.
   Sam `viewBox` zostaje przycięty, więc logo wypełnia pole tak samo jak ikony obok. */
.wu-ico.wu-ico-kurs svg { width:34px; height:34px; }

/* ── ZNAK OŻYWA PO NAJECHANIU NA KAFEL (Oskar 17.10.2026: „może każdą jakoś lekko
   zanimujesz po najechaniu?") ──────────────────────────────────────────────────────
   Dwie warstwy ruchu, obie krótkie i obie BEZ przesuwania czegokolwiek obok:
   1) cały znak dostaje delikatne powiększenie — jedna reguła dla wszystkich kafli,
   2) jeden element w środku robi coś swojego: kropka odjeżdża wzdłuż ramienia, glob się
      obraca, klapka koperty podnosi się, kafelek pakietu dosuwa się do reszty.
   Elementy do ruszania noszą klasy `an-*` wprost w SVG (`wu_ico_marka()`), bo to jedyny
   sposób, żeby trafić w POJEDYNCZY kształt wewnątrz wklejonego znaku.
   `transform-box:fill-box` jest obowiązkowe: bez niego `transform-origin:center` liczy
   się od początku układu SVG, nie od środka kształtu, i zamiast obrotu w miejscu
   dostajemy odlot w bok. */
.wu-ico svg, .wu-ico svg [class^="an-"] { transition:transform .25s cubic-bezier(.4,.6,.3,1); }
.wu-ico svg [class^="an-"] { transform-box:fill-box; transform-origin:center; }
.wu-card:hover .wu-ico svg { transform:scale(1.06); }
/* Kropka PING-a i Ad Grants PULSUJE W MIEJSCU, a nie odjeżdża (Oskar 17.10.2026: „w ping
   po animacji kulka musi być na końcu"). Przesunięcie odrywało ją od zakończenia ramienia
   — ramię stoi w miejscu, więc kropka zostawała w powietrzu obok. */
.wu-card:hover .an-kropka,
.wu-card:hover .an-kropka-ag { transform:scale(1.32); }
.wu-card:hover .an-kursor    { transform:scale(1.28); }               /* kropka w pasku adresu */
.wu-card:hover .an-adres     { transform:scaleX(1.12); }              /* wpisany adres */
.wu-card:hover .an-kropki    { transform:translateX(3px); }           /* pasek przeglądarki */
.wu-card:hover .an-dioda     { transform:translateX(4px); }           /* diody serwerów */
.wu-card:hover .an-dioda2    { transform:translateX(-4px); }
.wu-card:hover .an-klapka    { transform:translateY(-3px) scaleY(.82); } /* koperta się otwiera */
.wu-card:hover .an-okruchy   { transform:rotate(-14deg); }            /* okruchy w ciastku */
.wu-card:hover .an-kafelek   { transform:translate(-3px,-3px); }      /* kafelek pakietu */
.wu-card:hover .an-wezel     { transform:translateY(-4px); }          /* węzeł social */
.wu-card:hover .an-daszek    { transform:translateY(-2.5px); }        /* daszek na ekranie kursu */
/* Znak bez `an-*` i tak dostaje powiększenie z reguły wyżej — nic nie trzeba dopisywać. */
@media (prefers-reduced-motion:reduce){
  .wu-ico svg, .wu-ico svg [class^="an-"] { transition:none; }
  .wu-card:hover .wu-ico svg, .wu-card:hover .wu-ico svg [class^="an-"] { transform:none; }
}
/* Po najechaniu kafelek znaku dostaje POMARAŃCZOWĄ OBWÓDKĘ I ZNAK — bez wypełnienia
   (Oskar 18.10.2026: „nie podoba mi się, że ikony są wypełniane tym pomarańczowym tłem,
   może ładniej będzie bez tego efektu? tylko animacja + obwódka pomarańczowa").
   Jasnopomarańczowa plama pod rysunkiem zabierała mu kontrast, a ruch znaku — czyli to,
   co ma przyciągać wzrok — ginął w kolorze. Zostaje obwódka, kolor znaku i animacja. */
.wu-card:hover .wu-ico { background:var(--surface); border-color:var(--accent);
  color:var(--accent-fg); box-shadow:none; }
/* Znak PING jest dwukolorowy i wypełniony (nie na obrysie jak reszta ikon), więc żeby
   po najechaniu też robił się pomarańczowy, przefarbowujemy mu wprost `fill`. */
.ping-mark path, .ping-mark circle { transition:fill .16s; }
.wu-card:hover .ping-mark path, .wu-card:hover .ping-mark circle { fill:var(--accent); }
.wu-card h3 { font-size:1rem; font-weight:600; color:var(--navy); margin:0 0 3px;
  letter-spacing:-.01em; transition:color .18s; }
.wu-card .wu-price { font-size:.82rem; font-weight:600; color:var(--accent-fg); }
.wu-card p { font-size:.87rem; line-height:1.55; color:var(--fg-secondary); margin:0;
  transition:color .18s; }

/* „Cześć!" — wizytówka Oskara na tle smug, jak na starej stronie */
/* Wyraźny, odcięty blok — NIE gradient (Oskar 8.09: „Cześć miało lepsze tło wcześniej,
   niech będzie tak jak było, z tymi konkretnymi podziałami"). Wygaszanie krawędzi zostaje
   dla zwykłych sekcji; ta i sekcja z ofertą mają się właśnie wyróżniać. */
/* „Cześć!" wtapia się w białych sąsiadów tak jak pasek CTA na dole, zamiast odcinać się
   kreską (Oskar 9.09). Sekcja pod spodem (blog) startuje bielą i sama schodzi do koloru tła,
   więc przejście prowadzi do koloru, który ona naprawdę ma. */
.wu-hi { position:relative; overflow:hidden; padding:78px 0;
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg) 150px,
                                     var(--bg) calc(100% - 150px), var(--surface) 100%); }
/* Welon nad plamami MUSI wygasać tak samo jak tło. Wcześniej leżał płasko na całej sekcji,
   więc na samej górze — gdzie tło jest jeszcze białe — dokładał półprzezroczysty błękit
   i to ON rysował kreskę na styku, nie gradient (Oskar 9.09: „Cześć zaczyna się linią"). */
.wu-hi::before { content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(241,245,251,0) 0%, rgba(241,245,251,.5) 150px,
                                     rgba(241,245,251,.5) var(--tlo-koniec), rgba(241,245,251,0) 100%); }
.wu-hi .section-inner { position:relative; z-index:2; }
/* Plamy wygaszane razem z tłem — bez tego same ucinałyby się na krawędzi sekcji. */
.wu-hi .wu-bg { transform:scaleX(-1);
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 150px, #000 var(--tlo-koniec), transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0, #000 150px, #000 var(--tlo-koniec), transparent 100%); }
/* ── Pas „Cześć!" + blog: JEDNO tło i JEDEN komplet plam na dwie sekcje ────────
   Dwa podejścia, oba z 22.09. Najpierw był BIAŁY PAS między sekcjami: „Cześć!"
   wygaszało się na dole do bieli, a blog startował bielą i dopiero na 20% wysokości
   dochodził do błękitu („widać białe pomiędzy"). Sam błękit ciągiem to jednak za mało
   — dalej było widać miejsce, w którym kończy się dekoracja jednej sekcji, a zaczyna
   płaski błękit drugiej („nie podoba mi się to łączące").
   Dlatego obie sekcje wchodzą do WSPÓLNEGO PASA: tło, welon i plamy maluje wyłącznie
   on, a sekcje w środku są przezroczyste i wnoszą samą treść. Plamy gasną dopiero przy
   końcu pasa, więc kolor przechodzi przez styk bez zatrzymania.
   Wyjście z błękitu do bieli robi dalej `.wu-sec.tlo + .wu-sec` („Zaufali nam"). */
.wu-pas { position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg) 150px, var(--bg) 100%); }
.wu-pas::before { content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(241,245,251,0) 0%, rgba(241,245,251,.5) 150px,
                                     rgba(241,245,251,.5) 100%); }
.wu-pas > .wu-bg { transform:scaleX(-1);
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 150px, #000 62%, transparent 97%);
          mask-image:linear-gradient(180deg, transparent 0, #000 150px, #000 62%, transparent 97%); }
/* Sekcje w środku pasa: bez własnego tła, welonu i przycinania — to wszystko robi pas. */
.wu-pas .wu-hi { position:relative; z-index:2; background:none; overflow:visible; padding-bottom:40px; }
.wu-pas .wu-hi::before { content:none; }
.wu-pas .wu-sec.tlo { position:relative; z-index:2; background:none; padding-top:52px; }
.wu-hi-grid { position:relative; display:grid; gap:0; grid-template-columns:290px 1fr;
  align-items:center; max-width:880px; margin:0 auto; }
.wu-vcard { background:var(--navy); border-radius:var(--r-xl); padding:30px 24px; text-align:center;
  color:#fff; box-shadow:var(--shadow-lg); position:relative; z-index:2; }
.wu-vcard img { width:150px; height:150px; border-radius:50%; object-fit:cover; display:block; margin:0 auto 16px; }
.wu-vcard b { display:block; font-size:1.15rem; font-weight:600; line-height:1.3; letter-spacing:.02em; }
.wu-vcard span { display:block; margin-top:8px; padding-top:12px; border-top:1px solid rgba(255,255,255,.18);
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; opacity:.72; }
.wu-hi-body { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg); padding:34px 34px 34px 60px; margin-left:-36px; }
.wu-hi-body h2 { font-size:1.9rem; font-weight:600; color:var(--navy); margin:0 0 4px; letter-spacing:-.02em; }
.wu-hi-body .wu-hi-lead { font-size:.98rem; color:var(--fg-secondary); margin:0 0 18px; }
.wu-hi-body ul { margin:0 0 20px; padding-left:20px; }
.wu-hi-body li { font-size:.94rem; line-height:1.65; color:var(--fg-secondary); margin-bottom:6px; }
@media (max-width:820px){
  /* JEDNA karta zamiast granatowego kwadratu nad białą (Oskar 7.09) — na telefonie
     dwa kafle jeden na drugim zajmowały cały ekran, a zdjęcie było większe niż tekst.
     Teraz zdjęcie i nazwisko są nagłówkiem tej samej karty. */
  .wu-hi-grid { grid-template-columns:1fr; gap:0; max-width:460px;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
    box-shadow:var(--shadow-lg); overflow:hidden; }
  /* SIATKA, nie flex: zdjęcie w pierwszej kolumnie przez oba wiersze, a nazwisko
     i funkcja JEDNO POD DRUGIM w drugiej. Przy flexie „Oskar Sznajder" i
     „Współzałożyciel" stawały obok siebie i rozjeżdżały kartę (Oskar 7.09). */
  .wu-vcard { max-width:none; margin:0; background:none; box-shadow:none; color:var(--navy);
    display:grid; grid-template-columns:62px 1fr; column-gap:14px; align-content:center;
    text-align:left; padding:20px 22px 0; border-radius:0; }
  .wu-vcard img { width:62px; height:62px; margin:0; grid-row:1 / span 2; align-self:center; }
  /* `<br>` ZOSTAJE — po jego ukryciu „OSKAR" i „SZNAJDER" sklejały się w jedno słowo. */
  .wu-vcard b { grid-column:2; align-self:end; font-size:1rem; letter-spacing:0; line-height:1.25; }
  .wu-vcard span { grid-column:2; align-self:start; margin:3px 0 0; padding:0; border:0; opacity:.7; }
  .wu-hi-body { margin:0; padding:14px 22px 26px; background:none; border:0;
    border-radius:0; box-shadow:none; }
}

/* zaufali nam — spokojna siatka logotypów zamiast przewijanego paska */
.wu-logos { display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:34px 44px; max-width:1000px; margin:0 auto; }
/* mix-blend-mode zamiast samej przezroczystości: część logotypów ma wtopione białe
   albo szare tło i przy niskiej opacity wychodziły z tego szare plamy. */
/* Kolorowe, tak jak na starej webup.pl — w skali szarości połowa znaków traciła
   rozpoznawalność (Erasmus+, Radio Gdańsk, FRSE żyją kolorem). */
.wu-logos img { max-width:130px; max-height:62px; width:auto; height:auto;
  mix-blend-mode:multiply; transition:transform .18s; }
.wu-logos img:hover { transform:scale(1.06); }

/* Kafle wpisów żyją wyżej w bloku „KAFLE ARTYKUŁÓW" — tu był wariant
   z gradientową płytką, wycofany 10.08 na rzecz jednego wyglądu. */

/* przycisk „obrysowany" — na starej stronie sąsiadował z pełnym pomarańczowym */
/* Obwodka i tekst w JEDNYM kolorze — wczesniej ramka byla #FF6F00, a napis ciemniejszy
   #B34D00 i przycisk wygladal na niedokonczony. */
.wu-btn-outline { display:inline-flex; align-items:center; gap:7px; padding:12px 26px;
  border:1.5px solid var(--navy); border-radius:999px; color:var(--navy);
  font-weight:600; font-size:.95rem; text-decoration:none; background:transparent; transition:.16s; }
.wu-btn-outline:hover { background:var(--navy); border-color:var(--navy); color:#fff; }

/* Nagłówek wpisu na tle smug. UWAGA na specyficzność: `.wu-hero h1` i `.wu-hero p`
   są (0,1,1) i stoją w pliku NIŻEJ niż `.bl-head h1` / `.bl-lead`, więc wygrywały —
   tytuł szedł w rozmiarze hero landingu (58 px), a lid dostawał max-width:520px
   i łamał się węziej niż sam tekst artykułu. Stąd te selektory z dwiema klasami.
   Waga 300 (jak w nagłówkach sekcji) dawała tytuł cienki i wyblakły — tekst
   potrzebuje zdecydowanego tytułu, więc 700. */
.bl-head.wu-hero h1 { font-weight:700; font-size:clamp(1.8rem,3.4vw,2.4rem); }
.bl-head .bl-lead { max-width:660px; font-size:1.14rem; }
.bl-head.wu-hero h1 b, .bl-head.wu-hero h1 strong { font-weight:600; }
/* MOCNIEJSZY WELON NIŻ W EKRANIE POWITALNYM LANDINGU (.34 → .52). Nagłówek wpisu jest
   niski, więc plamy przechodzą dokładnie przez wiersz z autorem i datą — a to tekst
   wyszeptany (12,8 px, `--fg-muted`), który na pełnym pomarańczu przestaje być czytelny.
   Reguła stała tu wcześniej jako `opacity:.5`, czyli welon SŁABSZY (17% zamiast 34%) —
   miało to sens, dopóki nagłówek nie miał plam w ogóle. */
.bl-head.wu-hero::before { opacity:1; background:rgba(255,255,255,.52); }
.bl-head .bl-byline { border-bottom:0; }
/* Treść wpisu nie może zaczynać się tuż pod krawędzią nagłówka — bez tego pierwszy akapit
   dokleja się do bylinu i wygląda jak jego dalszy ciąg. */
.bl-article > .section-inner { padding-top:30px; }
/* WYŚCIÓŁKA NAGŁÓWKA WPISU. `.wu-hero` podciąga się pod pasek (`margin-top:-73px`,
   na telefonie -59), więc własny `padding-top` MUSI tę wysokość oddać — inaczej tytuł
   wchodzi pod menu. Mniej niż w ekranie powitalnym landingu (96 px): nad artykułem
   ma być nagłówek, a nie pół ekranu powietrza. */
.bl-head.wu-hero { padding:calc(54px + 73px) 0 26px; }
@media (max-width:760px){ .bl-head.wu-hero { padding:calc(28px + 59px) 0 20px; } }


/* Wyłączenie ruchu dla osób, które o to proszą w ustawieniach systemu. */
@media (prefers-reduced-motion:reduce){ .wu-blob { animation:none !important; } }

/* ═══════════════════════════════════════════════════════════════════════════
   NOWOCZESNE PODSTAWY (2026) — rzeczy, które dziś są standardem, a nie ozdobą.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Formularze i kontrolki dziedziczą jasny motyw zamiast systemowego ciemnego. */
:root { color-scheme: light; }

/* Łamanie tekstu: `balance` wyrównuje długość wierszy w nagłówkach (koniec z jednym
   sierotą w drugiej linii), `pretty` pilnuje, żeby akapit nie kończył się sierotą. */
h1, h2, h3, .wu-h2, .bl-card h3, .wu-card h3 { text-wrap: balance; }
p, .wu-sub, .bl-lead { text-wrap: pretty; }

/* Widoczny fokus TYLKO dla klawiatury — mysz go nie wywołuje, więc nic nie „miga",
   a osoba nawigująca tabem zawsze wie, gdzie jest. Bez tego strona jest nieobsługiwalna
   z klawiatury, mimo że wygląda dobrze. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }

/* Płynne przewijanie do kotwic — wyłączone dla osób wrażliwych na ruch. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* Nagłówek jest przyklejony, więc kotwica musi zatrzymać się NIŻEJ, inaczej tytuł
   sekcji chowa się pod nawigacją. */
[id] { scroll-margin-top: 88px; }

/* Świadomie BEZ `content-visibility: auto` na sekcjach. Kusi (przeglądarka pomija
   malowanie tego, co poza ekranem), ale przy sekcjach o różnej wysokości zastępcza
   `contain-intrinsic-size` rozjeżdża pasek przewijania i psuje wydruk oraz Ctrl+F.
   Ta strona ma kilkanaście sekcji, więc zysk byłby żaden, a ryzyko realne. */

/* Obrazy nigdy nie wychodzą poza swój kontener i nie generują przesunięć układu. */
img { max-width: 100%; height: auto; }

/* Cel dotknięcia min. 44 px w nawigacji i stopce — wymóg dostępności na telefonie. */
.nav-link, .footer-col a, .fb-legal a { min-height: 44px; display: flex; align-items: center; }
.footer-col a { display: block; min-height: 0; padding: 9px 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}


/* ── nawigacja z podmenu ────────────────────────────────────────────────────
   Bez <details>: przeglądarka ukrywa jego zawartość na poziomie renderowania, więc
   `display:block` przy :hover nic nie dawało — zmieniała się tylko strzałka.
   :hover obsługuje mysz, :focus-within klawiaturę. Zero JS. */
.nav-menu { position:relative; display:flex; align-items:center; }
/* Trigger podmenu to <button>, więc trzeba mu zdjąć wygląd przycisku przeglądarki,
   ale NIE tło — pastylkę dostaje z .nav-link tak samo jak zwykłe odnośniki. */
.nav-menu > .nav-link { font:inherit; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; }
/* Obwódka fokusu zostaje dla klawiatury, znika po dotknięciu/kliknięciu — inaczej po
   rozwinięciu sekcji na telefonie wiersz zostaje w granatowej ramce. */
.nav-menu > .nav-link:focus:not(:focus-visible) { outline:none; }
.nav-menu > .nav-link::after { content:""; width:5px; height:5px; border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor; transform:rotate(45deg) translateY(-1px); transition:transform .18s; }
.nav-menu:hover > .nav-link::after, .nav-menu:focus-within > .nav-link::after {
  transform:rotate(225deg) translateY(-2px); }
.nav-drop { position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(-6px);
  /* Szerokość liczy się z treści, nie z liczby wpisanej na sztywno (Oskar 16.10.2026:
     „niech będzie tak szeroki jak najdłuższy opis"). `max-content` dopasowuje każde
     podmenu OSOBNO do jego własnego najdłuższego wiersza, więc Infrastruktura wychodzi
     węższa od Marketingu i żaden opis się nie łamie. Sufit na wypadek długiego tekstu
     w przyszłości; dwa `@media` niżej wracają do `width:auto`, bo tam lista jest
     rozciągnięta na całą szerokość ekranu. */
  width:max-content; max-width:min(92vw, 460px);
  min-width:240px; padding:10px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); box-shadow:var(--shadow-lg); z-index:60;
  opacity:0; visibility:hidden; transition:opacity .16s, transform .16s, visibility .16s; }
.nav-menu:hover > .nav-drop, .nav-menu:focus-within > .nav-drop, .nav-menu.open > .nav-drop {
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
/* Niewidoczny pas łączy przycisk z listą — bez niego kursor „gubi” menu w przerwie. */
.nav-drop::before { content:""; position:absolute; left:0; right:0; top:-16px; height:16px; }
.nav-drop a { display:block; padding:9px 12px; border-radius:var(--r); text-decoration:none; transition:.14s; }
/* Ta sama reakcja co na kafelkach usług: delikatne tło + pomarańczowa nazwa. */
.nav-drop a:hover { background:var(--border-soft); }
.nav-drop a:hover b { color:var(--accent-fg); }
.nav-drop b { display:block; font-size:.92rem; font-weight:600; color:var(--navy); }
.nav-drop span { display:block; font-size:.8rem; line-height:1.45; color:var(--fg-muted); margin-top:1px; }

/* ── prawa strona paska ──
   Pasek jest przezroczysty i leży na ruchomym tle, więc sam kolor tekstu za mało się odcinał.
   Każda pozycja dostaje własną jasną pastylkę, a po najechaniu wypełnia się granatem.
   Pomarańczowy hover wypadł: na pomarańczowej plamie tła był praktycznie niewidoczny.
   Pionowa kreska rozdzielająca też — przy pastylkach nie ma czego rozdzielać. */
.nav-right { gap:8px; }
/* Bez pastylek w stanie spoczynku: kontrast załatwia poświata na górze hero (.wu-hero::after),
   więc wystarczy czarny tekst o wyraźnej grubości. Pastylki były łataniem tła kolorem
   i robiły z paska rząd klocków. Granatowe wypełnienie zostaje na najechaniu. */
.nav-link { font-size:.95rem; font-weight:600; letter-spacing:-.005em; color:#0f1419;
  padding:9px 14px; border-radius:999px; background:transparent; border:1px solid transparent;
  transition:background .16s, color .16s, border-color .16s; }
/* NAJECHANIE = GRANATOWA PASTYLKA NA KAŻDEJ POZYCJI PASKA, tak samo na „O nas" i „Blogu",
   jak na „Infrastrukturze" i „Marketingu" (Oskar 18.10.2026: „może po najechaniu na
   infrastrukturę/marketing w menu też powinny mieć taką granatową obwódkę jak o-nas i blog?").
   Przez pół wieczoru kategorie miały sam pomarańczowy napis — wyglądało to tak, jakby
   połowa paska reagowała inaczej niż druga.

   OTWARTA KATEGORIA to CO INNEGO niż najechanie i zostaje przy samym pomarańczowym napisie:
   pod nią stoi biały panel podmenu, więc granatowa pastylka robiła tam tło na tle (to była
   pierwsza uwaga z tego samego wieczoru: „bez takiego tła w tle"). Na komputerze `.open`
   nadaje JS po kliknięciu, na telefonie po dotknięciu.

   W burgerze pastylki nie ma w ogóle — blok `max-width:430px` gasi tła we wszystkich
   stanach, bo na dotyku `:hover` zostaje na dotkniętej pozycji. */
.nav-link:hover, .nav-menu:hover > .nav-link, .nav-menu:focus-within > .nav-link {
  background:var(--navy); border-color:var(--navy); color:#fff; }
.nav-menu.open > .nav-link, .nav-menu.open:hover > .nav-link {
  background:transparent; border-color:transparent; color:var(--accent); }
.nav-sep { display:none; }
/* Panel klienta: czarny obrys i czarny napis, granatowe wypełnienie dopiero po najechaniu.
   Oba przyciski w pasku mają WYMUSZONĄ tę samą wysokość — obrys 1,5 px po jednej stronie
   i jego brak po drugiej dawały różnicę 3 px, którą widać, gdy stoją obok siebie. */
.nav-btn-ghost, .nav-cta { height:42px; box-sizing:border-box; display:inline-flex;
  align-items:center; justify-content:center; }
.nav-btn-ghost { padding:0 18px; border-radius:999px;
  border:1.5px solid #0f1419; background:transparent; color:#0f1419; font-size:.9rem;
  font-weight:600; text-decoration:none; transition:.15s; white-space:nowrap; }
.nav-btn-ghost:hover { background:var(--navy); border-color:var(--navy); color:#fff; }
.nav-cta { padding:0 18px; }

/* ── WYBÓR JĘZYKA W PASKU (`.lang-dd`) ───────────────────────────────────────────
   JEDNA definicja dla całego serwisu i dla obu domen produktowych (Oskar 18.10.2026:
   „miałeś scentralizować też na stronie głównej wybór języka" i „ujednolicić, zaraz
   będzie rozjazd"). smartcookie.io ma te same reguły w swoim arkuszu, bo tam powstały;
   ping.ngo bierze TEN plik jako kopię. Zmieniasz tutaj.
   Rozmiary w PIKSELACH, nie w `rem`: ping.ngo ma inną podstawę `rem` i ta sama wartość
   w `rem` dawała tam inną wielkość liter — stąd wrażenie, że przełącznik „wygląda inaczej".
   Pigułka stoi na KOŃCU paska, za przyciskami: język nie jest pozycją menu, tylko
   ustawieniem. Na telefonie przestawia go nad przyciski `order` w bloku 430 px. */
.lang-dd { position:relative; display:flex; align-items:center; }
.lang-dd > summary { display:inline-flex; align-items:center; gap:5px;
  padding:5px 11px 5px 13px; border-radius:999px; font-size:13px; line-height:1.3;
  font-weight:600; letter-spacing:.02em; color:#fff; background:#1F2937; cursor:pointer;
  user-select:none; list-style:none; transition:background-color .15s; }
.lang-dd > summary::-webkit-details-marker { display:none; }
/* Po najechaniu pigułka języka robi się GRANATOWA — dokładnie tym samym kolorem co
   zakładki paska („Infrastruktura", „Marketing", „O nas", „Blog"), polecenie Oskara
   19.10.2026. Wcześniej jaśniała do szarości `#374151` i w jednym pasku były dwie różne
   reakcje na to samo najechanie. */
.lang-dd > summary:hover { background:var(--navy); }
.lang-dd > summary svg { transition:transform .15s; }
.lang-dd[open] > summary svg { transform:rotate(180deg); }
.lang-dd .lang-nazwa { display:none; }     /* pełna nazwa języka czeka na burgera */
.lang-menu { position:absolute; top:calc(100% + 6px); right:0; z-index:70;
  min-width:148px; padding:5px; background:#fff; border:1px solid var(--border);
  border-radius:12px; box-shadow:0 10px 30px rgba(15,23,42,.14); }
.lang-menu a { display:block; padding:7px 11px; border-radius:8px; font-size:13px;
  line-height:1.3; font-weight:500; color:var(--fg-secondary); text-decoration:none; white-space:nowrap; }
.lang-menu a:hover { background:var(--bg); color:var(--navy); }
.lang-menu a.is-active { color:var(--navy); font-weight:700; }

/* ── BIAŁE POZYCJE NA PASKU LEŻĄCYM NA HERO (`.nav-over` = wu_nav) ──
   Tylko tam, gdzie pod paskiem jest ruchome tło. Landingi mają pasek na płaskim
   jasnym pasie i biel byłaby na nim nieczytelna przez cały czas.
   Cień jest OBOWIĄZKOWY, nie ozdobny: w części cyklu animacji jasna smuga wchodzi
   pod menu i tło dochodzi do czystej bieli — bez cienia napisy wtedy znikają
   (zmierzone: kontrast spadał do 1,0:1 przy wymaganych 4,5:1).
   Trzy stany MUSZĄ wrócić do ciemnego, bo mają pod sobą biel:
   pasek po przewinięciu (.stuck), rozwinięte menu na telefonie i hover. */
/* Biały tekst BEZ cienia — decyzja Oskara po obejrzeniu wariantu z poświatą.
   Zmierzone: przez część cyklu animacji pas pod menu dochodzi do 249/255, czyli
   kontrast 1,0:1 (wymagane 4,5:1) i napisy wtedy bledną. Zostawiam tak na jego
   wyraźne polecenie; wycofanie to zmiana koloru w tych czterech regułach niżej. */
.nav-over .nav-link, .nav-over .nav-btn-ghost { color:#fff; }
.nav-over .nav-btn-ghost { border-color:#fff; }
.nav-over.stuck .nav-link, .nav-over.stuck .nav-btn-ghost { color:#0f1419; }
.nav-over.stuck .nav-btn-ghost { border-color:#0f1419; }
/* Nad hero tak samo jak niżej: po najechaniu biały napis na granatowej pastylce (biel jest
   tam czytelna, bo leży na granacie), a otwarta kategoria — sam pomarańczowy napis; bez
   pastylki biel na białej smudze by znikała. */
.nav-over .nav-link:hover, .nav-over .nav-menu:hover > .nav-link,
.nav-over .nav-menu:focus-within > .nav-link { color:#fff; }
.nav-over .nav-menu.open > .nav-link, .nav-over .nav-menu.open:hover > .nav-link { color:var(--accent); }
/* Przycisk „Panel klienta" zostaje przyciskiem — wypełnia się granatem i ma biały napis. */
.nav-over .nav-btn-ghost:hover { color:#fff; }
/* Po najechaniu przycisk ma być JEDNOLICIE granatowy — biała obwódka z `.nav-over`
   zostawała na granacie jako obrys i przycisk wyglądał na niedokończony. */
.nav-over .nav-btn-ghost:hover { background:var(--navy); border-color:var(--navy); }

/* Pozycja, na której właśnie jesteśmy — POMARAŃCZOWA (Oskar 7.09.2026; wcześniej, od 10.08,
   był tu granat). DOKŁADNIE ten sam pomarańcz co w całym serwisie: jaśniejszy wariant na
   pasku nad hero czytał się jako inny, słabszy kolor. Czytelność na granatowej smudze
   podbijamy grubością, nie odcieniem. */
.nav-link.on, .nav-over.stuck .nav-link.on { color:var(--accent); font-weight:700; }
/* Nad hero pomarańcz siedzi na granatowo-niebieskiej smudze i wygląda źle (Oskar 7.09),
   więc tam bieżąca pozycja dostaje BIAŁĄ obwódkę — ten sam język co „Panel klienta"
   obok. Po przewinięciu pasek robi się jasny i wraca pomarańczowy napis. */
.nav-over:not(.stuck) .nav-link.on { background:#fff; border-color:#fff;
  color:var(--accent); font-weight:700; }
/* Sama obwódka robiła z pozycji przycisk — pastylka jest PEŁNA, biała, z pomarańczowym
   napisem. Po najechaniu NIC SIĘ NIE ZMIENIA: od 18.10.2026 żadna pozycja paska nie
   wypełnia się granatem, więc bieżąca też nie — zostaje biała pastylka z pomarańczowym
   napisem, a reszta pozycji dostaje po najechaniu sam pomarańczowy napis. */

@media (max-width:1000px){
  .nav-menu { position:static; }
  .nav-drop { left:0; right:0; transform:none; min-width:0; width:auto; max-width:none; }
  .nav-menu:hover > .nav-drop, .nav-menu:focus-within > .nav-drop, .nav-menu.open > .nav-drop { transform:none; }
  /* Wąski laptop (ok. 860–920 px): kolumna w `.wu-split` schodzi do ~408 px, a dwa przyciski
     w desktopowych paddingach mają 428 px razem i drugi spada pod pierwszy. Niżej, od 820 px,
     sekcja i tak jest jednokolumnowa i problem znika — więc ścieśniamy tylko tutaj. */
  .wu-split .hero-ctas .btn-primary, .wu-split .hero-ctas .wu-btn-outline { padding-inline:20px; }
}

/* ── sekcja dwukolumnowa na stronie głównej (SMART, Ad Grants) ──
   Same nagłówki z przyciskami czytały się jak przerywnik, nie jak oferta. */
.wu-split { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center;
  max-width:980px; margin:6px auto 0; text-align:left; }
/* Dzieci gridu mają domyślnie `min-width:auto` i nie kurczą się poniżej swojej treści —
   makieta wyszukiwarki rozpychała kolumnę i cała sekcja wychodziła poza kontener. */
.wu-split > * { min-width:0; }
.wu-split.rev > *:first-child { order:2; }
.wu-split .price-feats { margin-bottom:24px; }
/* Kolumna obok stosu pakietu SMART mówi teraz akapitem, nie listą (Oskar 16.10.2026): punkty
   powtarzały zawartość stosu po lewej, więc czytelnik dostawał to samo dwa razy. */
.wu-split-copy > p { font-size:1.02rem; line-height:1.75; color:var(--fg-secondary); margin:0 0 16px; }
.wu-split-copy > p.smart-oszcz { color:var(--fg); margin-bottom:24px; }
.wu-split-copy > p.smart-oszcz b { color:var(--accent-fg); font-weight:700; }
.wu-split .hero-ctas { justify-content:flex-start; }
@media (max-width:860px){
  .wu-split { grid-template-columns:1fr; gap:30px; }
  .wu-split.rev > *:first-child { order:0; }
}


/* ── jeden kształt przycisku w całym serwisie ──
   btn-primary miał promień 10 px, a przyciski obok — pełną pigułkę; zestawione w parę
   wyglądały jak z dwóch różnych projektów. Wszystkie akcje mają teraz ten sam kształt. */
.btn-primary, .btn-ghost, .wu-btn-outline, .price-cta, .nav-cta, .fp-btn, .cta-inline a,
.bl-chip, .kw-preset { border-radius:999px; }
.btn-primary, .btn-ghost, .wu-btn-outline { padding:13px 28px; }

/* ── grupy usług na stronie głównej ── */
.wu-group { margin-bottom:34px; }
.wu-group:last-child { margin-bottom:0; }
.wu-group-t { display:block; text-align:center; font-size:.82rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--navy);
  padding-bottom:16px; margin-bottom:30px; border-bottom:1px solid var(--border); }

/* ═══════════════════════════════════════════════════════════════════════════
   TELEFON — przejrzane na 390 px. Układ desktopowy jest tu nieczytelny:
   nawigacja nie mieści się w jednej linii, wielkie nagłówki łamią się na sześć
   wierszy, a tło zasłania tekst.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:760px){
  /* ── Przyciski akcji: smuklejsze, bez samotnej strzałki w drugiej linii (Oskar 11.09) ──
     Etykieta „Umów bezpłatną konsultację →" łamała się na dwa wiersze, przez co przycisk
     puchł z ~48 do 77 px i strzałka wisiała pod tekstem. Złożyły się na to dwie rzeczy:

     1. `.cta-strip > *:not(.wu-bg)` ścinał KAŻDE dziecko do miary akapitu
        (`min(800px, 100% - 96px)`), czyli 246 px na ekranie 390 px. Przycisk nie jest
        akapitem — inset liczony pod długość wiersza tekstu nie ma się do niego stosować.
     2. Przy 16 px i wyściółce 28 px po bokach etykieta i tak nie mieściła się w linii.

     Trzeci element leży poza CSS-em: spacja przed strzałką jest w źródłach TWARDA (U+00A0),
     więc nawet gdy etykieta się złamie, strzałka idzie razem z ostatnim słowem, a nie sama. */
  .cta-strip > .btn-primary, .cta-strip > .btn-ghost,
  .cta-strip > .wu-btn-outline, .cta-strip > .price-cta { max-width:none; }
  .btn-primary, .btn-ghost, .wu-btn-outline { padding:11px 20px; font-size:.95rem; gap:7px; }
  .price-cta { padding:11px 16px; }
}
/* Wąski telefon (iPhone SE/mini, 360–430 px). Przycisk w karcie cennika ma szerokość karty,
   a nie ekranu — przy .95 rem najdłuższe etykiety („Umów bezpłatną konsultację",
   „Zobacz wszystkie dokumenty i wzory") nadal nie mieściły się w linii. */
@media (max-width:430px){
  .btn-primary, .btn-ghost, .wu-btn-outline { font-size:.92rem; padding:11px 16px; }
  .price-cta { font-size:.9rem; padding:11px 13px; }

  /* Pasek zwinięty do jednego rzędu: logo + hamburger. Rozwijanie menu na płasko
     (każda pozycja w osobnym wierszu) dawało nawigację wysoką na 240–450 px,
     która spychała hero poniżej ekranu. */
  nav { flex-wrap:wrap; gap:8px 0; padding:10px 16px; }
  .nav-burger { display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:38px; padding:9px 9px; border-radius:12px; cursor:pointer;
    border:1px solid var(--border); background:rgba(255,255,255,.75); }
  .nav-burger span { display:block; height:2px; background:var(--navy); border-radius:2px;
    transition:transform .2s, opacity .15s; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity:0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
  /* Rozwinięte menu przykrywa tło, więc cały pasek dostaje własne — bez tego górna część
     paska zostawała przezroczysta (widać przez nią tło strony) i menu wyglądało dwukolorowo. */
  .nav-right { display:none; }
  nav:has(.nav-toggle:checked) { background:rgba(255,255,255,.97); backdrop-filter:blur(10px);
    border-bottom-color:var(--border-soft); }
  .nav-toggle:checked ~ .nav-right { width:100%; display:flex; flex-direction:column;
    align-items:stretch; gap:2px; padding:12px 0 6px; margin-top:8px;
    border-top:1px solid var(--border-soft); }
  /* Rozwinięte menu ma białe tło, więc białe napisy z `.nav-over` muszą tu zgasnąć. */
  /* Zwykłe pozycje („O nas", „Blog") też tracą promień pigułki — inaczej włoskowa
     kreska rozdzielająca wiersze wychodziła zaokrąglona i wyglądała jak obwódka. */
  .nav-link { font-size:.95rem; padding:7px 2px; border-radius:0; }
  .nav-over .nav-toggle:checked ~ .nav-right .nav-link,
  .nav-over .nav-toggle:checked ~ .nav-right .nav-btn-ghost { color:#0f1419; }
  .nav-over .nav-toggle:checked ~ .nav-right .nav-btn-ghost { border-color:#0f1419; }
  .nav-sep { display:none; }
  .nav-btn-ghost, .nav-cta { width:100%; justify-content:center; text-align:center; margin-top:6px; }
  .nav-cta { font-size:.9rem; padding:11px 16px; }
  /* ── JĘZYK W BURGERZE: WIERSZ MENU NAD PRZYCISKAMI (Oskar 18.10.2026: „daj język nad
     przyciski"). W potoku stoi ostatni, bo na komputerze ma być na końcu paska — tutaj
     przestawia go `order`, więc jedno ustawienie nie psuje drugiego. Kolejność: wiersze
     menu (0), język (1), przyciski (2). Pod przyciskami pigułka wyglądała jak guzik
     doklejony za CTA, a w wierszu menu dwuliterowy skrót czyta się jak kod — stąd pełna
     nazwa języka i ta sama strzałka co przy „Infrastrukturze". */
  .nav-right .lang-dd { order:1; display:block; width:100%; position:static;
    border-bottom:1px solid var(--border-soft); }
  .nav-right .nav-btn-ghost, .nav-right .nav-cta { order:2; }
  .nav-right .lang-dd > summary { display:flex; width:100%; justify-content:space-between;
    align-items:center; padding:11px 2px; border-radius:0; background:none; box-shadow:none;
    font-size:.95rem; font-weight:600; letter-spacing:-.005em; color:#0f1419; }
  .nav-right .lang-dd .lang-kod { display:none; }
  .nav-right .lang-dd .lang-nazwa { display:inline; }
  .nav-right .lang-dd > summary svg { display:none; }
  .nav-right .lang-dd > summary::after { content:""; width:5px; height:5px; margin-right:6px;
    border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
    transform:rotate(45deg) translateY(-1px); transition:transform .18s; }
  .nav-right .lang-dd[open] > summary::after { transform:rotate(225deg) translateY(-2px); }
  /* Ciemna pigułka języka należy do PASKA, nie do burgera. W rozwiniętym menu wiersz ma być
     płaski w każdym stanie — razem z `:hover`, który na dotyku zostaje (stąd granatowy pas
     pod „Polski" na ping.ngo). Selektory są dłuższe od tych ze `sc-style.css`, więc wygrywają
     niezależnie od kolejności wczytania arkuszy. */
  .nav-right .lang-dd[open] > summary { color:var(--accent); }
  .nav-right .lang-dd > summary:hover,
  .nav-right .lang-dd > summary:active,
  .nav-right .lang-dd[open] > summary:hover { background:none; box-shadow:none; }
  .nav-right .lang-dd .lang-menu a:hover,
  .nav-right .lang-dd .lang-menu a:active { background:none; }
  /* Lista języków wygląda DOKŁADNIE jak rozwinięta kategoria (`.nav-drop` wyżej). */
  .nav-right .lang-dd .lang-menu { position:static; min-width:0; box-shadow:none; border:0;
    border-left:2px solid var(--border-soft); border-radius:0;
    margin:0 0 6px 4px; padding:2px 0 2px 14px; }
  .nav-right .lang-dd .lang-menu a { padding:9px 6px; min-height:40px; display:flex;
    align-items:center; font-weight:500; color:var(--fg-secondary); }
  /* ── PODMENU NA TELEFONIE — jak na stronach klientów (Oskar 7.09) ───────────
     Wcześniej `.nav-menu` zostawało flexem z widoku na komputerze, więc lista usług
     wjeżdżała OBOK przycisku, a przycisk siedział w granatowej pastylce w połowie
     wysokości — wyglądało to na zepsute. Teraz jest to zwykła lista wierszy:
     nazwa sekcji po lewej, strzałka po prawej, dotknięcie rozwija wcięty spis.

     Zwinięte MUSI być `display:none`, a nie `visibility:hidden` — ukryty element
     w normalnym przepływie dalej rezerwuje wysokość i pasek rósł o ~450 px pustki. */
  .nav-menu { display:block; width:100%; position:static; }
  .nav-menu > .nav-link { display:flex; width:100%; justify-content:space-between;
    background:none !important; padding:11px 2px; border-radius:0; }
  /* KWADRATOWA RAMKA PO WYBORZE (Oskar 8.09) — to nie była obwódka fokusu, tylko
     `border-color` ze stanu :hover. Pozycja ma w spoczynku przezroczystą obwódkę 1 px
     i pełną pigułkę; w panelu na telefonie promień jest zerowy, a tło wyłączone przez
     `!important`, więc z granatowej pastylki zostawał sam prostokątny obrys. Na dotyku
     :hover DO TEGO nie schodzi po tapnięciu i ramka zostawała na stałe.
     Zdejmujemy ją we wszystkich stanach razem z podświetleniem tapnięcia. */
  .nav-link, .nav-drop a, .nav-menu > .nav-link { -webkit-tap-highlight-color:transparent; }
  .nav-toggle:checked ~ .nav-right .nav-link:hover,
  .nav-toggle:checked ~ .nav-right .nav-link:active,
  .nav-toggle:checked ~ .nav-right .nav-menu:hover > .nav-link,
  .nav-toggle:checked ~ .nav-right .nav-menu:focus-within > .nav-link,
  .nav-over .nav-toggle:checked ~ .nav-right .nav-link:hover,
  .nav-over .nav-toggle:checked ~ .nav-right .nav-menu:hover > .nav-link {
    background:none !important; border-color:transparent !important; }
  /* Strzałka po prawej krawędzi wiersza, obrót przy rozwinięciu. */
  .nav-menu > .nav-link::after { margin-right:6px; transform:rotate(45deg); transition:transform .18s; }
  .nav-menu:hover > .nav-link::after, .nav-menu:focus-within > .nav-link::after { transform:rotate(45deg); }
  .nav-menu.open > .nav-link::after { transform:rotate(225deg) translateY(-2px); }
  .nav-menu.open > .nav-link { color:var(--accent-fg) !important; }
  /* Rozwinięta kategoria = wcięty spis z włoskową kreską z boku. Szara kieszeń z promieniem
     była tu przez chwilę 18.10.2026 i wypadła tego samego wieczoru (Oskar: „ten widok
     rozsuniętego menu wyglądał wcześniej lepiej") — ciężka plama na białym panelu przykrywała
     rytm wierszy. Kreska wystarcza, żeby było widać, że to zawartość dotkniętego wiersza. */
  .nav-drop { display:none; position:static; transform:none; min-width:0; width:auto; max-width:none; box-shadow:none;
    border:0; border-left:2px solid var(--border-soft); border-radius:0;
    margin:0 0 6px 4px; padding:2px 0 2px 14px; animation:none;
    opacity:1; visibility:visible; }
  /* `.open` nadaje JS przy dotknieciu — `:focus-within` nie wystarcza, bo dotkniecie
     przycisku nie nadaje mu fokusu w Safari na iOS. Samego `:hover` na telefonie nie ma. */
  .nav-menu.open > .nav-drop { display:block; transform:none; }
  .nav-drop span { display:none; }          /* same nazwy usług, bez opisów */
  .nav-drop a { padding:9px 6px; min-height:40px; display:flex; align-items:center; }
  .nav-drop b { font-weight:500; color:var(--fg-secondary); }
  /* ⚠️ NA DOTYKU `:hover` ZOSTAJE na dotkniętym elemencie, dopóki nie dotkniesz czegoś
     innego — i to on malował bladoniebieską pastylkę pod pozycją podmenu (Oskar 18.10.2026:
     „dalej jest niebieskie tło przy wyborze, nie chcę ani tu, ani tu"). Na komputerze
     podświetlenie jest w porządku, bo znika razem z kursorem; w burgerze wygląda jak
     zaznaczenie, którego nikt nie zaznaczał. W menu na telefonie gasimy je we wszystkich
     stanach — wybraną pozycję i tak widać po kolorze napisu. */
  .nav-drop a:hover, .nav-drop a:active, .nav-drop a:focus { background:none; }
  /* Wiersze oddzielone włoskową kreską — bez niej spis usług zlewa się w jeden blok. */
  .nav-toggle:checked ~ .nav-right > .nav-menu,
  .nav-toggle:checked ~ .nav-right > .nav-link { border-bottom:1px solid var(--border-soft); }
  /* Panel nie może być dłuższy niż ekran — przy ośmiu usługach lista uciekała pod hero. */
  .nav-toggle:checked ~ .nav-right { max-height:calc(100vh - 64px); overflow-y:auto;
    -webkit-overflow-scrolling:touch; }
  /* Obwódka fokusu (3 px pomarańczu z odsunięciem) rysowała wokół rozwiniętego wiersza
     wielki prostokąt. Zostaje — jest potrzebna przy klawiaturze — ale w kształcie wiersza
     i do środka; do tego JS zdejmuje fokus zaraz po dotknięciu. */
  .nav-menu > .nav-link:focus-visible { outline-width:2px; outline-offset:-2px; border-radius:10px; }
  /* BIEŻĄCA POZYCJA: SAM POMARAŃCZOWY NAPIS, bez wypełnienia (Oskar 18.10.2026: „jak jestem
     na blogu, to jest tło pomarańczowe + czcionka; chcę tylko czcionkę"). Od 8.09 stała tu
     pełna jasnopomarańczowa pastylka — razem z przesunięciem wiersza o 12 px i zgaszoną
     kreską pod nim, więc jeden wiersz wypadał z rytmu całego spisu. Teraz różni go
     wyłącznie kolor i grubość napisu (700 bierze z `.nav-link.on` wyżej), dokładnie tak
     samo jak rozwiniętą sekcję. */
  .nav-toggle:checked ~ .nav-right .nav-link.on,
  .nav-over .nav-toggle:checked ~ .nav-right .nav-link.on,
  .nav-over:not(.stuck) .nav-toggle:checked ~ .nav-right .nav-link.on {
    background:none !important; border-color:transparent !important;
    color:var(--accent) !important; }

  /* Skrot `padding` MUSI uwzgledniac podciagniecie hero pod pasek (-59 px),
     inaczej nadtytul wchodzi pod logo. To bylo widac jako "hero mega wysoko". */
  .wu-hero { padding:calc(44px + 59px) 0 46px; }
  .wu-hero h1 { font-size:1.9rem; }
  .wu-hero p { font-size:1rem; }
  /* Tło pod tekstem musi zejść na drugi plan — na wąskim ekranie kolumna tekstu
     zajmuje całą szerokość i leżała wprost na pomarańczowej plamie. */
  .wu-hero::before { background:linear-gradient(180deg, rgba(255,255,255,.94) 0%,
    rgba(255,255,255,.86) 55%, rgba(255,255,255,.35) 100%); }
  .wu-bg { filter:blur(52px); opacity:.75; }

  .hero-ctas { flex-direction:column; align-items:stretch; gap:10px; }
  .hero-ctas .btn-primary, .hero-ctas .btn-ghost, .hero-ctas .wu-btn-outline {
    width:100%; justify-content:center; text-align:center; }

  .wu-sec { padding:52px 0; }
  .wu-sec.tight { padding:38px 0; }
  .wu-h2 { font-size:1.6rem; }
  .wu-sub { font-size:.96rem; margin-bottom:28px; }
  .wu-cards { gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* Na telefonie kafel ma TRZY wiersze (ikona, tytuł, opis), więc i `subgrid` obejmuje trzy —
     dzięki temu opisy w parze startują równo tak samo jak na komputerze. */
  .wu-cards > .wu-card { grid-row:span 3; }
  .wu-cards > .wu-card:last-child:nth-child(3n+1) { grid-column:auto; }
  /* Na telefonie siatka i tak ma dwie kolumny, więc ograniczenie szerokości pary znika. */
  .wu-cards.wu-para { max-width:none; }
  /* Ikona nad tekstem, nie obok — przy szerokości ~170 px na tekst zostawało ~110 px
     i zdania łamały się po jednym słowie. */
  .wu-card { grid-template-columns:1fr; grid-template-rows:40px auto auto; gap:6px; padding:16px 14px; }
  .wu-card > .wu-ico { grid-column:1; grid-row:1; width:40px; height:40px; align-self:start; margin:0; }
  .wu-card > .wu-ico svg, .wu-card > .wu-ico img, .wu-card > .wu-ico .ping-mark { width:24px; height:24px; }
  .wu-card > h3 { grid-column:1; grid-row:2; font-size:.98rem; }
  .wu-card > p  { grid-column:1; grid-row:3; font-size:.85rem; line-height:1.5; margin-top:2px; }
  .wu-group { margin-bottom:34px; }

  /* pasek partnerów: dwa logotypy w rzędzie zamiast jednego pod drugim */
  /* Dwa logotypy w rzędzie: sztywna ramka 170 px z desktopu nie zmieściła dwóch obok siebie. */
  /* Trzy w rzędzie: przy dziewięciu znakach dwa w rzędzie dawały cztery rzędy
     i samotny dziewiąty na końcu. */
  /* JEDEN rząd, który jedzie SAM — jak taśma „Zaufali nam" (Oskar 7.09). Dziewięć
     logotypów łamało się na trzy wiersze i zjadało pół ekranu, a ręczne przewijanie
     w bok nikt nie odkrywa. Zestaw jest wypisany dwa razy, więc powrót na początek
     jest niewidoczny; ruch zatrzymuje się po dotknięciu. */
  .wu-partners-wrap { padding:16px 0 20px; overflow:hidden; }
  .wu-partners { flex-wrap:nowrap; justify-content:flex-start; width:max-content;
    gap:0; padding:0; animation:lwScroll 42s linear infinite; }
  .wu-partners:active { animation-play-state:paused; }
  .wp-track { display:flex; align-items:center; gap:26px; padding-right:26px; }
  .wp-dup { display:flex; }
  .wu-partners a { flex:0 0 auto; max-width:none; }
  .wu-partners img { height:28px; }
  /* Angielskie reguły z desktopu (gniazdo 150 px, wysokość 44 px) mają wyższą swoistość
     niż te wyżej, więc na telefonie trzeba je zdjąć wprost — inaczej taśma jedzie
     z logotypami wielkości desktopowych i przyciętymi do 150 px. Plakietki Google
     Partner i Meta są spiętrzone, więc dostają odrobinę więcej niż polskie 28 px. */
  .wu-partners.wp-en a { flex:0 0 auto; max-width:none; }
  .wu-partners.wp-en img { height:34px; }
  .wu-partners-head { margin-top:14px; }
  @media (prefers-reduced-motion:reduce){
    .wu-partners { animation:none; width:auto; overflow-x:auto; }
    .wp-dup { display:none; }
  }

  .wu-hi { padding:46px 0; }
  .wu-hi-body { padding:44px 20px 26px; }
  .wu-hi-body h2 { font-size:1.55rem; }

  .showcase-grid { grid-template-columns:1fr; }
  .wu-logos { gap:22px 16px; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); }
  .wu-logos img { max-width:96px; max-height:40px; }
  .cta-strip h2 { font-size:1.5rem; }
  .ptab-wrap { border-radius:var(--r-lg); }
}
@media (max-width:420px){
  .wu-hero h1 { font-size:1.68rem; }
  .wu-h2 { font-size:1.42rem; }
  .wu-cards { grid-template-columns:minmax(0,1fr); }
}

/* zakładka 1,5% — jeden szeroki zrzut zamiast kafla w siatce realizacji */
/* Ta sama szerokość co kafel realizacji — wcześniej zrzut zakładki 1,5% miał 560 px
   i stał pod realizacjami jako wyraźnie szerszy klocek. Kafle realizacji są elastyczne
   (3 w rzędzie, odstęp 22 px), więc przy szerokim ekranie liczymy dokładnie tę samą
   szerokość, a niżej wracamy do zwykłego ograniczenia. */
.opp-shot { max-width:360px; margin:8px auto 0; border:1px solid var(--border);
  border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg); background:var(--surface); }
.opp-shot img { display:block; width:100%; height:auto; }
@media (min-width:1000px){ .opp-shot { max-width:calc((100% - 44px) / 3); } }
/* realizacje: mniejsze kafle, więcej w rzędzie (proporcja bez zmian) */
.showcase-grid > .showcase-item { flex:1 1 300px; max-width:360px; }

/* Logo ma w pliku biały prostokąt — mnożenie usuwa go na dowolnym tle. */
.nav-logo img { mix-blend-mode:multiply; }

/* pasek dowodów doklejany przed stopką (wszystkie landingi) */
.proof-strip { padding:44px 0 10px; background:var(--surface); border-top:0; }
/* Pasek „Zaufali nam" jest biały. Gdy sekcja nad nim jest w kolorze tła, to PASEK wchodzi
   w biel gradientem — zgodnie z zasadą, że wygasza się ten, do którego się dochodzi. */
section:not(.alt):not(.wu-sec):not([data-tlo]) + .proof-strip,
section:not(.alt):not(.wu-sec):not([data-tlo]) + script + .proof-strip {
  background:linear-gradient(180deg, var(--bg) 0%, var(--surface) 62px); }



/* ══ EKRANY POWITALNE — trzy nowe wizualizacje (Oskar 7.09: „obrazki w hero do zmiany") ══ */

/* ── STRONA WWW: DUŻE kafle — prawdziwe strony i prawdziwe funkcje ────────────
   Ten sam język, co ekran powitalny landingu social (`.hero-posts`): dwie kolumny
   sunące w przeciwne strony, bez ramki przeglądarki i bez welonu — treść jest
   bohaterem (Oskar 10.09: „większe, tak jak posty social media").
   Wcześniejsze podejścia upadły na tym, że pokazywały jedną stronę zmieniającą
   kolor i krój pisma — czyli rzeczy najmniej charakterystyczne (własne czcionki ma
   jeden tenant na 52). Tu widać naraz RÓŻNE organizacje i FUNKCJE, których nie ma
   żaden kreator: zapisy na zajęcia, umawianie wizyt z płatnością, formularz
   z dopasowaniem, 1,5%, blog z Facebooka, projekty. */
.wu-kafle { display:grid; grid-template-columns:1fr 1fr; gap:14px; height:540px; overflow:hidden;
  mask-image:linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent); }
.kf-kol { display:flex; flex-direction:column; gap:14px; will-change:transform; }
.kf-kol.gora { animation:kfSun 46s linear infinite; }
.kf-kol.dol  { animation:kfSun 52s linear infinite reverse; }
.wu-kafle:hover .kf-kol { animation-play-state:paused; }
@keyframes kfSun { from { transform:translateY(0); } to { transform:translateY(-50%); } }
.kf { position:relative; display:block; flex:none; border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-sm); }
.kf img { width:100%; height:auto; display:block; }
/* Kafel z funkcją dostaje podpis — bez niego „kalendarz zajęć" wygląda jak kolejna
   ładna strona, a chodzi o to, żeby było wiadomo, CO to robi i U KOGO działa. */
.kf-f { box-shadow:var(--shadow); }
.kf-opis { position:absolute; left:0; right:0; bottom:0; padding:16px 12px 9px;
  background:linear-gradient(to top, rgba(15,43,70,.92), rgba(15,43,70,.72) 55%, transparent);
  color:#fff; display:flex; flex-direction:column; gap:1px; }
.kf-opis b { font-size:.82rem; font-weight:700; line-height:1.25; }
.kf-opis i { font-style:normal; font-size:.7rem; opacity:.75; }
@media (prefers-reduced-motion:reduce){ .kf-kol { animation:none; } }
@media (max-width:1100px){ .wu-kafle { height:440px; } }

/* ── WORKSPACE: adres PRZED i PO zamiast wymyślonej skrzynki ──────────────────
   Sedno usługi to zamiana @gmail.com na własną domenę — i to pokazujemy wprost. */
.mock-mig { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg); padding:24px 22px; }
.mm-row { display:flex; align-items:center; gap:12px; padding:13px 15px; border-radius:var(--r-lg);
  border:1px solid var(--border); }
.mm-row.old { background:var(--bg); border-style:dashed; color:var(--fg-muted); }
.mm-row.new { background:color-mix(in srgb, var(--lp) 6%, #fff); border-color:var(--lp); }
.mm-av { width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  font-weight:800; font-size:.9rem; color:#fff; flex-shrink:0; }
.mm-row.old .mm-av { background:var(--border-strong); }
.mm-row.new .mm-av { background:var(--lp); }
.mm-txt b { display:block; font-size:.95rem; letter-spacing:-.01em; }
.mm-txt span { display:block; font-size:.78rem; color:var(--fg-muted); margin-top:1px; }
.mm-row.old .mm-txt b { text-decoration:line-through; }
.mm-row.new .mm-txt b { color:var(--navy); }
.mm-arrow { display:grid; place-items:center; margin:9px 0; color:var(--lp); font-size:1.1rem; }
.mm-price { display:flex; align-items:baseline; justify-content:center; gap:8px; margin-top:16px;
  padding-top:15px; border-top:1px dashed var(--border); }
.mm-price b { font-size:1.7rem; font-weight:800; color:var(--green); letter-spacing:-.02em; }
.mm-price span { font-size:.83rem; color:var(--fg-secondary); }
.mm-apps { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin-top:14px; }
.mm-apps span { display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:600;
  color:var(--fg-secondary); background:var(--bg); border:1px solid var(--border-soft);
  border-radius:999px; padding:4px 10px; }
.mm-apps i { width:8px; height:8px; border-radius:50%; display:inline-block; }

/* ── PING: raport tak, jak PRZYCHODZI — wiadomością na skrzynkę ───────────────
   Sam „fragment raportu" nie mówił, w jakiej formie klient to dostaje. */
.mock-mail { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg); overflow:hidden; }
.mk-head { padding:13px 16px; border-bottom:1px solid var(--border-soft); background:var(--bg); }
.mk-from { display:flex; align-items:center; gap:9px; font-size:.78rem; color:var(--fg-muted); }
.mk-from i { width:24px; height:24px; border-radius:7px; background:var(--lp); color:#fff;
  display:grid; place-items:center; font-size:.68rem; font-weight:800; font-style:normal; }
.mk-subj { margin-top:7px; font-size:.95rem; font-weight:700; color:var(--navy); letter-spacing:-.01em; }
.mk-body { padding:16px; }
.mock-mail .mock-report { border:0; border-radius:0; box-shadow:none; background:transparent; }
.mock-mail .mr-score { padding-top:0; }

/* ── WEJŚCIE SEKCJI PRZY PRZEWIJANIU ─────────────────────────────────────────
   Klasę `wu-anim` nadaje <body> skrypt wu_reveal_js(). Ukrywamy WYŁĄCZNIE wewnątrz
   niej — bez JS-a treść jest widoczna od pierwszej klatki. Ruch jest celowo mały
   (10 px): ma dać rytm przewijaniu, a nie zwracać na siebie uwagę. */
/* Ukrywamy WYŁĄCZNIE to, co skrypt sam oznaczył `.wu-rv` — i co w związku z tym na pewno
   obserwuje. Poprzednia wersja wypisywała tu listę selektorów niezależnie od tej w JS
   i listy się rozjechały: CSS ukrywał KAŻDE `h2`, a obserwator dostawał tylko nagłówki
   sekcji, więc nagłówek paska CTA (`<div>`, nie `<section>`) zostawał biały na białym. */
body.wu-anim .wu-rv {
  opacity:0; transform:translateY(10px);
  transition:opacity .5s cubic-bezier(.16,.8,.3,1), transform .5s cubic-bezier(.16,.8,.3,1);
}
body.wu-anim .wu-rv.wu-in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  body.wu-anim * { opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ── Stos zawartości pakietu SMART (`.pk-*`) ───────────────────────────────────
   Używają go DWIE strony: hero na `/pakiet-smart` (z kwotą w `.pk-foot`) i sekcja
   SMART na stronie głównej (bez kwoty — Oskar 22.09: „zrób tak samo jak na zakładce
   /pakiet-smart, ale bez ceny"). Dlatego blok mieszka tutaj, a nie w `smart/style.css`.
   Kolor wiersza „nowość" bierze się z `--lp`: na `/pakiet-smart` indygo (theme-smart),
   na stronie głównej domyślna pomarańcz. */
.pk-stack {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:8px 8px 10px; box-shadow:var(--shadow-lg); text-align:left;
}
.pk-row {
  display:flex; align-items:flex-start; gap:11px;
  padding:11px 12px; border-radius:var(--r); border-bottom:1px solid var(--border-soft);
}
.pk-row:last-of-type { border-bottom:0; }
.pk-row > div { flex:1; min-width:0; }
.pk-row b { display:block; font-size:.92rem; font-weight:700; color:var(--navy); line-height:1.35; }
.pk-row span:not(.pk-ok) { display:block; font-size:.8rem; color:var(--fg-secondary); line-height:1.45; margin-top:2px; }
.pk-row i {
  flex-shrink:0; font-style:normal; font-size:.72rem; font-weight:700; color:var(--fg-muted);
  background:var(--bg); border-radius:999px; padding:3px 9px; white-space:nowrap; margin-top:1px;
}
.pk-ok {
  flex-shrink:0; width:20px; height:20px; margin-top:2px; border-radius:50%;
  background:var(--green); color:#fff; font-size:.68rem; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
/* Nowość w pakiecie — zaznaczona SAMĄ PLAKIETKĄ „nowość", bez podświetlania wiersza.
   Pomarańczowe tło całego wiersza zdjęte 16.10.2026 (Oskar: „nie podoba mi się to tło
   pomarańczowe, może samo «nowość» wystarczy") — przy pięciu równorzędnych pozycjach jeden
   wiersz na kolorowym tle wyglądał jak wyróżniona oferta, a nie jak informacja „to jest nowe". */
.pk-row.pk-new i { background:var(--lp); color:#fff; }
.pk-foot {
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-top:6px; padding:13px 12px 6px; border-top:1px solid var(--border);
}
.pk-foot span { font-size:.83rem; color:var(--fg-secondary); }
.pk-foot b { font-size:1.22rem; font-weight:800; color:var(--fg); letter-spacing:-.02em; }

/* Na stronie głównej stos jest TREŚCIĄ sekcji, nie makietą w hero — dlatego własny
   wrapper zamiast `.hero-visual`, który na telefonie jest ukrywany razem z `.mock-note`.
   Etykieta „to dostajecie w pakiecie SMART" (`.smart-stos-et`) ZDJĘTA 16.10.2026 (Oskar):
   stała nad stosem, który i tak siedzi w sekcji zatytułowanej „Pakiet SMART", więc mówiła
   to samo drugi raz. Reguła usunięta razem ze znacznikiem — nic jej już nie używa. */
@media (max-width:760px){
  .pk-row i { display:none; }              /* etykiety „w cenie" nie mieszczą się obok treści */
  .pk-row.pk-new i { display:inline-block; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   RAMKA „Wasza organizacja dziś" — personalizacja z `?d=<domena>` (includes/org-profile.php).
   Jedna sekcja na wszystkich landingach i na `/sprawdz`, dlatego styl siedzi tu, a nie
   w arkuszu pojedynczego landingu.

   Zasada wizualna: to NIE jest kolejna karta cenowa. Ma wyglądać jak notatka, którą ktoś
   zrobił o tej organizacji — jaśniejsze tło, bez obwódek krzyczących akcentem. Kwota, którą
   płacą dziś, stoi spokojnie; nasza odpowiedź jest wyróżniona kolorem marki.
   ───────────────────────────────────────────────────────────────────────────── */
.org-ramka { background:var(--bg); }
.org-ramka .org-pod { text-align:center; color:var(--fg-secondary); font-size:.95rem; margin:-4px 0 26px; }
.org-ramka .org-pod b { color:var(--fg); }

.org-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:14px; }
.org-poz {
  display:flex; flex-direction:column; gap:3px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:16px 18px; box-shadow:var(--shadow-sm);
}
.org-tytul { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-muted); }
.org-dzis { font-size:.97rem; color:var(--fg); font-weight:500; }
.org-kwota { font-size:1.34rem; font-weight:800; color:var(--fg); letter-spacing:-.02em; margin-top:4px; }
/* Podpis pod kwotą jest wymogiem, nie ozdobą: mówi, że to szacunek z cennika, a nie faktura. */
.org-zrodlo { font-size:.78rem; color:var(--fg-muted); line-height:1.35; }
.org-nasze { margin-top:9px; padding-top:9px; border-top:1px solid var(--border-soft);
  font-size:.88rem; color:var(--fg-secondary); line-height:1.45; }
.org-nasze i { font-style:normal; font-weight:700; color:var(--accent-fg); }

.org-suma { margin-top:20px; background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--r-lg); padding:20px 22px; text-align:center; }
.org-suma-l { font-size:1.02rem; color:var(--fg-secondary); }
.org-suma-l b { color:var(--fg); }
.org-suma-p { margin-top:8px; font-size:1.02rem; color:var(--fg-secondary); }
.org-suma-p b { color:var(--fg); }
.org-wiecej { margin-top:12px; font-weight:600; }
/* Cena osobista (5.10.2026): blok z ofertą dostaje pomarańczową ramkę jak karta „featured",
   nagłówek „Cena dla …" i wyraźnie mniejszą linię o cenie publicznej — kotwica ma być
   widoczna, ale nie konkurować z kwotą dla organizacji. */
.org-oferta { border:2px solid var(--accent); box-shadow:0 12px 34px rgba(249,115,22,.13); }
.org-cena-h { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-fg); margin-bottom:8px; }
.org-cena-pub { font-size:.86rem; color:var(--fg-muted); }
.org-smart { margin-top:14px; padding-top:14px; border-top:1px solid var(--border-soft); }

/* ── DWIE KARTY PORÓWNAWCZE W RAMCE (landing SmartCookie, Oskar 5.10.2026) ──
   Po lewej sam baner zgód, po prawej cały rachunek kontra SMART. Układ celowo powtarza karty
   cennika niżej: ta sama para produktów, tylko na liczbach tej organizacji. Każda karta ma
   dwa piętra — szare „dziś" i białe „u nas" z pomarańczową ramką, bo to ono ma przyciągać oko.
   Sama lewa karta (firma, zagranica) nie rozciąga się na całą szerokość — `org-dwie-sama`. */
.org-dwie { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:22px; text-align:left; }
.org-dwie-sama { grid-template-columns:minmax(0,520px); justify-content:center; }
/* Trzy rzędy: etykieta · „dziś" · „u nas". Środkowy bierze całą resztę wysokości, więc blok
   „u nas" siada przy dolnej krawędzi karty. */
.org-karta { display:grid; grid-template-rows:auto 1fr auto; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
/* …a `subgrid` dokłada resztę: obie karty dzielą te same trzy rzędy, więc POMARAŃCZOWE BLOKI
   SĄ RÓWNEJ WYSOKOŚCI i zaczynają się w tej samej linii (Oskar 5.10.2026), choć po prawej
   stoi nad nimi cała lista pozycji, a po lewej jedna kwota. Bez `subgrid` (stare przeglądarki)
   zostaje układ wyżej: bloki wyrównane do dołu, co też jest poprawne. */
@supports (grid-template-rows: subgrid) {
  .org-dwie { grid-template-rows:auto 1fr auto; }
  .org-karta { grid-row:span 3; grid-template-rows:subgrid; }
}
/* Nagłówek karty: ZDANIE, nie etykieta (Oskar 5.10.2026: „to nie jest u mnie czytelne").
   Stał tu styl kickera — 11,8 px, wersaliki, rozstrzelone litery i jasna szarość. Dla dwóch
   słów to działa, ale od chwili, gdy nagłówek niesie całe „Zgody cookies, tyle obecnie
   płacicie:", wersaliki w tym stopniu pisma czyta się litera po literze.
   Teraz: normalna wielkość liter, 0,95 rem i kolor kwoty pod spodem. */
.okk-tag { padding:14px 18px 0; font-size:.95rem; font-weight:700;
  text-transform:none; letter-spacing:0; line-height:1.35; color:var(--fg); }
/* Druga połowa nagłówka — „tyle obecnie płacicie:" — na czerwono (Oskar 5.10.2026).
   Ten sam czerwony co plakietka werdyktu, żeby na stronie był jeden kolor alarmu. */
.okk-tag b { color:#B91C1C; font-weight:800; }
.okk-dzis { padding:10px 18px 16px; }
/* Blok „u nas" wygląda jak wyróżniona karta z cennika na dole strony: pomarańczowa ramka,
   pigułka z etykietą zachodząca na krawędź i poświata. Na wierzchu stoi OSZCZĘDNOŚĆ, pod nią
   cena — bo to ona jest powodem, dla którego ktoś czyta tę ramkę (Oskar 5.10.2026). */
.okk-unas { position:relative; margin:4px 12px 12px; padding:22px 18px 16px;
  background:var(--surface); border:2px solid var(--accent); border-radius:var(--r-lg);
  box-shadow:0 10px 30px rgba(249,115,22,.14); }
.okk-flaga { position:absolute; top:-11px; left:16px; padding:3px 11px; border-radius:999px;
  background:var(--accent); color:#fff; font-size:.68rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; }
/* `.okk-eti` (osobny wiersz „Tyle obecnie płacicie" nad kwotą) zdjęte 5.10.2026 — ten podpis
   siedzi teraz w nagłówku karty, razem z jej tytułem. */
/* Werdykt wdrożenia nad nazwą narzędzia — mała czerwona plakietka z wykrzyknikiem, żeby „źle
   wdrożony" było widać od razu, a nie dopiero na końcu zdania pod spodem (Oskar 5.10.2026). */
.okk-zle { display:inline-flex; align-items:center; gap:7px;
  padding:5px 12px 5px 6px; border-radius:999px;
  background:#FEE2E2; color:#B91C1C; font-size:.74rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.04em; }
.okk-zle i { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%; background:#DC2626; color:#fff;
  font-style:normal; font-size:.78rem; font-weight:900; line-height:1; }

/* Ostrzeżenie w ekranie powitalnym: miękka czerwona plakietka bez obramowania i bez belki
   z lewej. Próbowałem 5.10.2026 wariantu „karta alarmu" (belka, ramka, cień) — Oskar wybrał
   ten wcześniejszy, więc tamten jest cofnięty i nie wraca bez jego słowa.
   Odstęp NAD plakietką to 16 px, czyli tyle samo, ile dzieli nagłówek od opisu (`.hero-sub`):
   przyklejona do akapitu wyglądała jak jego dalszy ciąg, a to osobny komunikat. */
.hero-alert { display:inline-flex; align-items:flex-start; gap:8px; max-width:100%;
  margin:16px 0 22px; padding:10px 16px 10px 10px; border-radius:14px;
  background:#FEE2E2; color:#B91C1C; text-align:left; }
.ha-ico { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; margin-top:2px; border-radius:50%;
  background:#DC2626; color:#fff; font-size:.78rem; font-weight:900; line-height:1; }
.ha-txt { font-size:.88rem; font-weight:600; line-height:1.4; }
.ha-txt b { font-weight:800; }
/* Nazwy skryptów siedzą W ŚRODKU zdania („Skrypty, m.in. Meta Pixel, uruchamiają się…",
   Oskar 6.10.2026), więc mają TĘ SAMĄ wagę co reszta. Wcześniej stały na końcu, po dwukropku,
   i lżejsza waga oddzielała wyliczenie od werdyktu; w środku zdania wyglądała jak usterka
   składu — zdanie rwało się w połowie i wracało. */
.ha-txt i { font-style:normal; }
.hero-alert b { font-weight:800; }
/* Nazwa narzędzia i znacznik werdyktu w JEDNYM wierszu (Oskar 5.10.2026) — na wąskim ekranie
   znacznik schodzi pod nazwę, bo zawijanie jest lepsze niż ścięta plakietka. */
.okk-nazwa { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px;
  font-size:1.02rem; color:var(--fg); }
.okk-kwota { margin-top:2px; font-size:1.45rem; font-weight:800; letter-spacing:-.02em; color:var(--fg); }
/* `.okk-zrodlo` (podpis „według cennika X i kursu NBP z …") zdjęte 5.10.2026 razem z regułą,
   która je wypisywała — tylda przy kwocie mówi to samo krócej. Pełne źródła zostały na
   `/sprawdz`, gdzie noszą klasę `.org-zrodlo`. */
.okk-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:3px 0; font-size:.92rem; color:var(--fg-secondary); }
.okk-row b { color:var(--fg); font-weight:600; white-space:nowrap; }
/* Dostawca W NAWIASIE OBOK nazwy pozycji — „Zgody cookies (Cookiebot)" (Oskar 6.10.2026).
   Najpierw stał w osobnej linii pod nazwą; w nawiasie czyta się jak jedna pozycja rachunku,
   a nie jak dwa wiersze. Nazwa z nawiasem zawija się w obrębie swojej kolumny, więc nawet
   „Wtyczka cookies w WordPressie" nie rozpycha wiersza na kwotę. */
.okk-row > span i { font-style:normal; color:var(--fg-muted); }
.okk-suma { margin-top:6px; padding-top:7px; border-top:1px solid var(--border);
  font-weight:600; color:var(--fg); }
/* „nieznana" W MIEJSCU KWOTY — pozycja, którą organizacja ma, ale której ceny nie znamy
   (Oskar 6.10.2026). Lżejsza i mniejsza od kwot obok, bo to nie liczba: ma być widać, że wiersz
   należy do rachunku, a jednocześnie że nie wchodzi do sumy pod spodem. Kursywy NIE MA —
   w tych wierszach kursywa znaczy już „dostawca w nawiasie". */
.okk-row b.okk-nieznana, .sm2-row b.okk-nieznana {
  font-size:.86rem; font-weight:500; color:var(--fg-muted);
}
/* Nota pod sumą, obowiązkowa gdy jakaś pozycja jest „nieznana" — bez niej kolumna pokazuje
   więcej wierszy, niż obejmuje suma. Patrz `sm2_nieznana_nota` w `includes/org-profile.php`. */
.okk-nota, .sm2-nota { margin:8px 0 0; font-size:.8rem; line-height:1.45; color:var(--fg-muted); }
/* Cena roczna i oszczędność OBOK SIEBIE, obie kwoty w jednym wierszu NA TEJ SAMEJ WYSOKOŚCI,
   a podpis „Zostaje Wam" pod kwotą (Oskar 5.10.2026). Kreska między kolumnami robi za znak „=",
   bez wypisywania działania. */
.okk-para { display:flex; align-items:stretch; gap:14px; flex-wrap:wrap; }
.okk-zysk { padding-left:14px; border-left:1px solid var(--border); }
.okk-zysk b { display:block; font-size:1.6rem; font-weight:800; letter-spacing:-.03em;
  color:#15803D; line-height:1.2; }
.okk-zysk span { display:block; margin-top:1px; font-size:.84rem; line-height:1.35; color:var(--fg-secondary); }
.okk-cena { font-size:1.6rem; font-weight:800; letter-spacing:-.03em; color:var(--fg); line-height:1.2; }
/* „/rok" przy oszczędności wygląda dokładnie tak samo jak przy cenie obok — ta sama jednostka
   zapisana tak samo, żeby dwie liczby dało się porównać jednym spojrzeniem. */
.okk-cena i, .okk-zysk b i { margin-left:2px; font-size:.78rem; font-weight:500; font-style:normal; color:var(--fg-muted); }
/* Na telefonie obie kwoty i tak mają stać OBOK SIEBIE, więc zamiast przenosić oszczędność pod
   cenę — zmniejszamy jedno i drugie ORAZ oddajemy parze margines bloku. Zmierzone przy 390 px:
   przed zmianą para miała 236 px, a cena + przerwa + oszczędność zajmowały 242 — brakowało
   sześciu pikseli, czyli dokładnie tyle, ile zjadało wewnętrzne wcięcie pomarańczowej karty. */
@media (max-width:480px) {
  .okk-unas { margin-left:6px; margin-right:6px; padding-left:12px; padding-right:12px; }
  .okk-para { gap:10px; }
  .okk-cena, .okk-zysk b { font-size:1.3rem; }
  .okk-zysk { padding-left:10px; }
  .okk-zysk span { font-size:.78rem; }
}
/* Najwęższe telefony w użyciu (360 px): jeszcze jeden krok w dół, żeby para dalej stała w wierszu. */
@media (max-width:400px) {
  .okk-unas { margin-left:4px; margin-right:4px; padding-left:10px; padding-right:10px; }
  .okk-para { gap:8px; }
  .okk-cena, .okk-zysk b { font-size:1.18rem; }
  .okk-zysk { padding-left:8px; }
  .okk-zysk span { font-size:.74rem; }
}
/* Poniżej 340 px nie ma już czego ścisnąć — oszczędność schodzi pod cenę i traci kreskę. */
@media (max-width:340px) { .okk-zysk { padding-left:0; border-left:0; } }
.okk-co { margin-top:9px; font-size:.84rem; line-height:1.5; color:var(--fg-muted); }
.okk-cta { display:block; margin-top:13px; padding:11px 18px; border-radius:999px;
  background:var(--accent); color:#fff; font-weight:700; font-size:.95rem; text-align:center;
  text-decoration:none; transition:background-color .15s; }
.okk-cta:hover { background:var(--accent-light, #FF8A00); color:#fff; }
@media (max-width:760px) { .org-dwie { grid-template-columns:1fr; } }

/* ── SMART W DWÓCH KOLUMNACH (Oskar 5.10.2026) ──
   Po lewej rachunek pozycja po pozycji, po prawej jedna kwota u nas. Zastępuje jedno długie
   zdanie z czterema liczbami w środku, którego nikt nie czytał do końca. Na telefonie kolumny
   idą jedna pod drugą — wtedy to po prostu dwie listy. */
.org-smart2 { display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:16px;
  border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; text-align:left; }
.sm2-kol { padding:16px 18px; }
.sm2-dzis { background:var(--bg); }
.sm2-unas { background:var(--surface); border-left:1px solid var(--border); }
.sm2-naglowek { display:block; margin-bottom:10px; font-size:.74rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--fg-muted); }
.sm2-unas .sm2-naglowek a { color:var(--accent-fg); text-decoration:none; }
.sm2-unas .sm2-naglowek a:hover { text-decoration:underline; }
.sm2-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:4px 0; font-size:.93rem; color:var(--fg-secondary); }
.sm2-row b { color:var(--fg); font-weight:600; white-space:nowrap; }
/* Dostawca w nawiasie obok nazwy pozycji — „Zgody cookies (Cookiebot)" (Oskar 6.10.2026). */
.sm2-row > span i { font-style:normal; color:var(--fg-muted); }
.sm2-suma { margin-top:6px; padding-top:8px; border-top:1px solid var(--border);
  font-weight:600; color:var(--fg); }
.sm2-cena { font-size:1.75rem; font-weight:800; letter-spacing:-.03em; color:var(--fg); line-height:1.15; }
.sm2-cena i { margin-left:4px; font-size:.86rem; font-weight:500; font-style:normal; color:var(--fg-muted); }
.sm2-rabat { margin-top:2px; font-size:.84rem; color:var(--accent-fg); font-weight:700; }
/* `.sm2-co` (wyliczanka „co jest w pakiecie") zdjęte 5.10.2026 razem z regułą, która ją
   wypisywała — pełny spis stoi przy cenniku na dole strony. */
@media (max-width:620px) {
  .org-smart2 { grid-template-columns:1fr; }
  .sm2-unas { border-left:0; border-top:1px solid var(--border); }
}
/* Karta cennika z ceną osobistą: przekreślona kotwica nad kwotą + podpis „cena dla …". */
/* „Zostaje Wam X rocznie" — kwota, która zostaje w kieszeni po przejściu. Wyróżniona na
   zielono, bo to jedyne zdanie w ramce, które mówi o zysku, a nie o koszcie. */
.org-oszczednosc { color:var(--fg-secondary); }
.org-oszczednosc b { color:#15803D; }
.price-osobista { font-size:.82rem; color:var(--fg-muted); margin:-2px 0 8px; }
.price-osobista s { color:var(--fg-muted); }
.price-osobista b { color:var(--accent-fg); }
.org-skad { margin-top:16px; text-align:center; font-size:.8rem; line-height:1.5; color:var(--fg-muted); }
.org-skad b { color:var(--fg-secondary); }

@media (max-width:620px){
  .org-grid { grid-template-columns:1fr; }
  .org-kwota { font-size:1.2rem; }
}

/* Sekcja „Co sprawdziliśmy" (/smartcookie) — dowód z własnego skanu. Dwa akapity pod liczbami:
   wynik próby w przeglądarce i ZASTRZEŻENIE o pomyłkach skanu. Drugi jest celowo mniejszy,
   ale czytelny: ma być widoczny, bo bez niego liczby brzmią jak urzędowa statystyka. */
.cs-proba { max-width:720px; margin:22px auto 0; text-align:center; font-size:1rem; color:var(--fg-secondary); }
.cs-proba strong { color:var(--fg); }
.cs-uczciwie { max-width:720px; margin:12px auto 0; text-align:center; font-size:.86rem;
  line-height:1.55; color:var(--fg-muted); }

/* Logotyp organizacji w karcie case study (`wu_logo_klienta()`). Stała wysokość i `width:auto`,
   żeby loga o różnych proporcjach — od kwadratowych po bardzo szerokie — stały w jednej linii
   bazowej i nie rozpychały karty. Logotypy mają własne białe tło, więc karta ich nie przycina. */
.cs-logo { height:38px; margin-bottom:15px; display:flex; align-items:center; }
.cs-logo img { height:38px; width:auto; max-width:210px; object-fit:contain; display:block; }
@media (max-width:620px){ .cs-logo, .cs-logo img { height:30px; } }