Fix FAQFull: Use isDraft boolean for draft filtering, fix Kontakt ID override

DESIGN.md

@@ -0,0 +1,74 @@
+# Design System
+
+### Kolor
+
+| Token | Jasny motyw | Ciemny motyw | Użycie |
+|---|---|---|---|
+| `--bg-color` | `#F7F5F1` (ciepły papier) | `#17140F` | tło strony |
+| `--fg-color` | `#1C1B1A` (atrament) | `#F5F1E8` | tekst podstawowy |
+| `--card-color` | `#FFFFFF` | `#1F1B14` | karty, panele |
+| `--border-color` | `#E2DDD3` | `#332C21` | linie, obramowania |
+| `--accent-color` | `#A13D2C` (pieczęć) | `#D4634A` | CTA, linki, akcenty |
+| `--accent-hover-color` | `#8A3324` | `#E17B62` | hover na akcencie |
+
+Zasada: **maksymalnie jeden akcent** (pieczęć-czerwień). Żadnych dodatkowych
+kolorów „na szybko" (niebieski link, zielony success) bez dopisania do
+`DESIGN.md` — to jeden z 4 checków „Your design system" w Impeccable.
+
+- **Wyjątek WhatsApp**: Kolor markowy WhatsApp (`#25D366`) jest używany *wyłącznie* na pływającym przycisku kontaktowym w rogu ekranu, ze względów rozpoznawalności UX. By nie tworzyć „trzeciego” koloru, unikamy używania go na tłach innych niż neutralne (np. w czerwonym FinalCTA przycisk zostaje biały).
+
+### Typografia
+
+| Token | Wartość | Użycie |
+|---|---|---|
+| `--font-heading` | Fraunces (serif, wariant *opsz* wysoki dla nagłówków display) | H1–H3, cytaty |
+| `--font-sans` | Public Sans | body, UI, nawigacja, przyciski |
+| Skala | 16px body / 1.6 line-height minimum | patrz `wymagania-projektowe-strony.md` §4 — nie schodzić poniżej |
+
+**Twardy zakaz z katalogu Impeccable:** brak kursywy jako domyślnego stylu
+nagłówka display („italic serif display headline" — reguła #1 na liście
+anty-slop, patrz sekcja 5). Fraunces ma piękną kursywę i pokusa jest duża —
+używać jej WYŁĄCZNIE jako pojedynczego akcentu na jednym słowie w hero (np.
+„**po polsku**" pochylone w podtytule), nigdy jako stylu całego H1.
+
+### Kształt i głębia
+
+| Token | Wartość |
+|---|---|
+| `--radius-button` | 6px (umiarkowane zaokrąglenie — NIE „pill", NIE 20px+ blob) |
+| Karty | radius 8–10px, cień delikatny (`box-shadow` 1 warstwa, nie „hairline + wide shadow" — patrz sekcja 5) |
+| Obramowania | 1px `--border-color`, nigdy grube kolorowe paski z boku karty |
+
+### Motyw wizualny „dokument urzędowy" (charakter, nie tylko tokeny)
+
+To jest to, co ma odróżnić tę stronę od typowego SaaS-landingu i uzasadnić
+prompt „efekty pasujące do biura podatkowego" bez wpadania w kicz:
+
+- **Tekstura papieru**: bardzo subtelny noise/grain na tle sekcji jasnych
+  (opacity ~2-3%, `mix-blend-mode: multiply` lub SVG `feTurbulence` jako
+  tło) — sugeruje fakturę papieru, nie plastik. Jeden globalny efekt, nie
+  per-sekcja.
+- **Linie jak w formularzu**: cienkie poziome linie `--border-color` jako
+  separator sekcji zamiast pełnych kolorowych bloków tła — metafora liniatury
+  dokumentu podatkowego.
+- **Akcent „pieczęci"**: okrągły/owalny kształt w kolorze akcentu, używany
+  OSZCZĘDNIE — np. jako tło pod floating-stat w hero (już jest w kodzie:
+  `floatingStat`), jako marker przy cytatach klientów, jako obwódka wokół
+  liczby „20+" w sekcji Stats. Nie na każdym elemencie.
+- **Typografia numeryczna**: liczby (20+, 100%, §4 Nr. 11) w Fraunces, duże,
+  z lekkim tabular-nums — czytają się jak wpis w rejestrze, nie jak KPI
+  dashboardu.
+- **Zdjęcia**: kolor, nie stockowy błysk korporacyjny — patrz `02-strona-glowna.md`
+  §Hero i `05-o-nas.md` co do konkretnego kierunku (ciepłe światło, realne
+  biuro/dokumenty, nie białe tło + uśmiech do kamery w garniturze).
+
+### System motion (spójny, jedna specyfikacja dla całej strony)
+
+| Nazwa wzorca | Efekt | Kiedy używać | Kiedy NIE używać |
+|---|---|---|---|
+| `reveal-up` | Fade-in + translateY(16–24px), stagger dzieci co ~0.08–0.14s, ease `[0.22,1,0.36,1]` | wejście każdej sekcji przy scrollu (raz, `whileInView`, `viewport={{ once: true }}`) | nie powtarzać animacji przy każdym ponownym scrollu — meczy |
+| `parallax-tilt` | Pointer-tracked rotateX/rotateY | WYŁĄCZNIE hero | karty usług, avatary, ikony |
+| `count-up` | Liczby liczą się od 0 do docelowej, bez odbicia (`ease-out`, NIE elastic/bounce) | blok Stats na home | gdziekolwiek indziej |
+| `line-draw` | Cienka linia „rysuje się" przy wejściu w viewport | separator między sekcjami zamiast twardej krawędzi | pod każdym nagłówkiem z osobna |
+| `stamp-in` | Element „pieczęci" pojawia się ze skalą 0.9→1 + rotate -3°→0°, ease-out, BEZ overshoot | floating stat w hero, badge „§4 Nr. 11 StBerG" | przyciski, pola formularza |
+| `sticky-progress` | Cienka linia postępu czytania na górze strony | FAQ, Impressum, Datenschutz | strony `Persuade` |