# Neurostrategia — redesign strony głównej

Dziennik pracy. Prowadzony na bieżąco; docelowo może zostać zalążkiem reużywalnego skilla.

## Kontekst

- Klient: **Daria Widerowska** — neuromarketing, perswazja, szkolenia, consulting, kurs online, książki, prelekcje. Treści PL.
- Obecna strona: <https://neurostrategia.pl/> — WordPress + Bricks Builder. Problem: strona rozrosła się przez "dokładanie kolejnych sekcji w Bricks", brak spójnego systemu.
- Cel: **nie rebranding**, tylko *uporządkowanie* — jeden system czcionek, rozmiarów, odstępów, wrapperów; każda podstrona ma widocznie ten sam branding; całość profesjonalna.
- Punkt wyjścia: `static-design/` — wygenerowana "nowa wersja" strony głównej (kanwa Claude Design + design system w `_ds/`). Wyznacza kierunek, wymaga poprawek.

## Decyzje

| # | Decyzja | Ustalenie |
|---|---------|-----------|
| D1 | Kolorystyka | Nowa paleta Darii: **zieleń `#136241`**, **czerń `#000000`**, **biel `#ffffff`**, **kość słoniowa `#f6f4f0`**. Żółć/złoto — **usuwamy całkowicie**. |
| D2 | Akcent | **Zieleń jako jedyny akcent.** Zastępuje złoto wszędzie: CTA w nav, wyróżnione słowa w nagłówkach, gwiazdki opinii, liczby-statystyki. Paleta = zieleń + czerń na kości słoniowej/bieli. |
| D3 | Zakres pobierania mediów | Tylko strona główna (nie cała biblioteka WP, nie blog). |
| D4 | Forma Etapu 2 (projekt) | Statyczny HTML/CSS (Artifact) — nie kanwa `.dc`. Projekt = baza Etapu 3, bez przepisywania. |
| D5 | Charakter Etapu 3 | **Wersja pokazowa** dla Darii do akceptacji (statyczny HTML+CSS+JS). NIE produkcyjna. Docelowo baza pod motyw WP (skill `wp-theme-framework`). |
| D6 | Typografia | ~~Fraunces~~ → **Poppins** (nagłówki) + **Manrope** (tekst). Wg wytycznej Darii: „prosta, minimalistyczna, zaokrąglona — jak wordmark z logo". Bez kroju szeryfowego. |
| D7 | Sekcja hero | Tło = **wideo `brain.webm`** (to samo, którego używa strona live jako tło pasa kursu). Poster: `brain-poster.webp`. |
| D8 | Spójność szerokości | **Jeden system paneli** (`.panel`): jeden promień, jeden padding (`--panel-pad`), jedna szerokość (`--wrap` 1180) dla hero / kursu / GBP / social / kontaktu. Koniec z „każda sekcja innej wielkości". |
| D9 | Sekcja „Kurs" | Przeprojektowana — zamiast nieregularnych 2 liczb + 1 tekst: **siatka 2×2 „ptaszków"** (`.checklist--grid`) + ocena + CTA. Bez zdjęcia (w pełni w palecie). |
| D10 | Hero podstron | **Split** (`.hero.hero--split`): lewa = eyebrow + h1 + lead + CTA + zachęta do scrolla; prawa = slot medium (`.split__media` — zdjęcie ALBO wideo, dowolny grading). Homepage zostaje pełnoekranowym ciemnym panelem z `brain.webm`. |
| D11 | Wyróżnienie banera | Split hero = jedyny pas na **pełną szerokość z tłem**: wash `--c-green-soft` + `border-bottom` 1px + `--shadow-card-lg` na medium. Sekcje treściowe zawsze na gołym tle strony. |
| D12 | Zachęta do scrolla | `.hero-cue` na banerze **każdej podstrony** — link (kółko + chevron, nudge, off przy `prefers-reduced-motion`) → płynny scroll do 1. sekcji. Ukryty < 900 px. Globalnie `scroll-margin-top: 5.5rem` na `section[id]`. |

## Etapy

- [x] **Etap 0** — setup: `progress.md`, struktura `assets/`
- [x] **Etap 1** — pobranie materiałów ze strony głównej
- [~] **Etap 2** — projekt wypolerowanej homepage (iteracja 2 wdrożona — feedback Darii; czeka na kolejną rundę). *Uwaga: sekcje „Etap 2 — iteracja 1" niżej są historyczne; aktualny stan systemu = tabela Decyzje + „iteracja 2".*
- [ ] **Etap 3** — wersja pokazowa (HTML + CSS + JS) do akceptacji Darii
- [ ] **Etap 4** — domknięcie dokumentacji / ocena wydzielenia skilla

---

## Etap 1 — materiały (zrobione)

Źródło: surowy HTML strony głównej → ekstrakcja URL-i `wp-content/uploads` (img, srcset, background-image, lazy-load, video).
Kopie robocze: `assets/_raw/homepage.html`, `assets/_raw/urls_page.txt`.

Znaleziono 39 odwołań; 1 martwe (`2-1440x559.jpg` — wariant hero generowany w locie, 404). Warianty przeskalowane (`-768x…`) pominięte — trzymamy oryginały.

### `assets/photos/` — Daria + zdjęcia edytorskie/eventowe
| plik | opis / gdzie na stronie |
|------|--------------------------|
| `daria-hero.jpg` | portret hero (żakiet, szare tło) — tło sekcji hero |
| `daria-standing.jpg` | Daria cała sylwetka, jasne tło (1707×2560) |
| `daria-red-chair.jpg` | Daria na czerwonym fotelu (1707×2560) |
| `daria-stool.jpg` | Daria na stołku (1707×2560) |
| `daria-prelegent.webp` | Daria zbliżenie z identyfikatorem "PRELEGENT" — sekcja prelekcje |
| `prelekcja-audience.webp` | sala konferencyjna, publiczność — social proof / prelekcje |
| `good-business-place-duo.jpg` | Daria + wspólniczka — sekcja Good Business Place |
| `consulting-desk.webp` | kobieta przy biurku (kontekst consultingu) |
| `branding-workshop.webp` | dłonie szkicujące przy stole ("AWARD") — warsztat/branding |
| `neuronews-banner.jpg` | szeroki baner (1898×834) — nagłówek sekcji NEUROnews |

### `assets/photos/testimonials/` — zdjęcia do opinii
Zmapowane: `Aga-Turowska.png`, `Agnieszka-Wnuk.png`, `Jakub-Aniola.jpg`, `Justyna-Seidel.png`, `Pawel-Dopierala.png`, `Tomasz-Mazur.png`, `Weronika-Kaluzna.png`, `MaLgorzata-Staniszewska.webp`, `maciej_kukulka.webp`.
Nazwy niepotwierdzone (Bricks lazy-block, brak kontekstu w HTML): `1568919975657-1.webp`, `1637053343698.webp`.

### `assets/photos/articles/` — miniatury artykułów NEUROnews
`bledy-poznawcze.jpg`, `Ekonomia-behawioralna.jpg`, `pauza-poznawcza.jpg`, `priorytetyzacja-zadan.jpg`, `znieksztalcenia-poznawcze.jpg` (wszystkie ~900px).

### `assets/logos/`
| plik | opis |
|------|------|
| `logo-neurostrategia.svg` | logo główne (ciemne), 406×127 |
| `logo-neurostrategia-white.svg` | logo w wersji białej (na ciemne tła) |
| `good-business-place.svg` | logo Good Business Place (kolor) |
| `favicon.png` | favicon 512×512 |

### `assets/icons/`
| plik | opis |
|------|------|
| `arrow-circle.svg` | okrąg ze strzałką w prawo — ikonka CTA / "przewiń" |

### `assets/video/`
| plik | opis |
|------|------|
| `brain.webm` | animacja mózg + białe sploty na czerni (~31 MB) — tło "science-forward" |
| `brain-poster.webp` | klatka-plakat do wideo (2318×1738) |

### Do rozważenia w Etapie 2
- Wideo `brain.webm` (31 MB) — czy używać na homepage, czy zastąpić statyczną `brain-poster.webp` (lżej).
- Zdjęcia Darii w pionie (1707×2560) — dobre źródło do kadrów portretowych w nowym layoucie.
- Zdjęcia z obecnej strony są w ciepłych/terakotowych tonach — sprawdzić spójność z nową, chłodniejszą paletą (zieleń + kość słoniowa).
- Brak realnego pliku logo w wersji "brain mark" — mamy tylko wordmark SVG.

---

## Etap 2 — projekt homepage (iteracja 1)

**Podgląd:** `http://localhost:8888/neurobiologia-redesign/design/` (MAMP)
**Pliki:**
```
design/
├── index.html              semantyczny HTML, sekcje z komentarzami
├── css/
│   ├── tokens.css          JEDNO źródło prawdy — kolory, typografia, spacing, wrappery, radiusy, cienie
│   └── styles.css          reset → baza → prymitywy layoutu → komponenty → sekcje → responsywność
└── js/
    └── main.js             bez zależności: nav mobilne, scroll-reveal (IntersectionObserver), slider artykułów
```

### System — kluczowe ustalenia

**Kolory** (`tokens.css`): zieleń `#136241` = jedyny akcent (CTA, wyróżnienia w nagłówkach `.hl`, gwiazdki,
liczby-statystyki). Czerń `#000` = sekcje kontrastowe (hero, pas kursu, stopka). Kość słoniowa `#f6f4f0` = tło
strony. `#ebe6da` = sekcja alternatywna. Biel = karty. Neutralne (tekst, obramowania) = czerń z przezroczystością.
**Zero żółci/złota.**

**Typografia:** Fraunces (nagłówki) + Manrope (tekst) z Google Fonts. Skala responsywna `clamp()`:
display/h1/h2/h3/lead + body/sm/xs. Technika „słowo-akcent" w nagłówku = `<span class="hl">` (zieleń).
→ **do potwierdzenia z Darią: realne kroje strony.**

**Rytm:** jeden token `--section-y: clamp(3.25rem, 2rem+5vw, 6rem)` na wszystkie sekcje. `.section--tight` = 55%.
Wrappery: `--wrap 1180` / `--wrap-narrow 760` / `--wrap-wide 1360` (hero, stopka), gutter `clamp(20px…48px)`.
Radiusy: 6/10/16/24/pill. Cienie: miękkie, niska nieprzezroczystość (tylko karty).

**Komponenty:** `.btn` (primary/dark/ghost/on-dark/ghost-light × sm/lg), `.eyebrow`, `.section-head`,
`.card`, `.frame` (portrait/tall/wide), `.stat`, `.quote-card`, `.article`, pola formularza.

### Sekcje homepage (kolejność jak w `static-design`, uporządkowana)
hero (kurs) → o autorce → oferta (intro + 4 bloki: consulting / szkolenia / audyt / prelekcje) →
pas kursu (ciemny) → Good Business Place (zielony) → social → NEUROnews (slider) → opinie → kontakt → stopka

### Przypisanie materiałów (wszystkie z `assets/`)
| sekcja | plik |
|--------|------|
| hero | `photos/daria-hero.jpg` |
| o autorce | `photos/daria-stool.jpg` |
| consulting | `photos/consulting-desk.webp` |
| szkolenia | `photos/branding-workshop.webp` |
| audyt | `video/brain-poster.webp` |
| prelekcje | `photos/daria-prelegent.webp` |
| pas kursu | `video/brain-poster.webp` (opcja: `brain.webm` — patrz niżej) |
| Good Business Place | `photos/good-business-place-duo.jpg` |
| opinie | `photos/testimonials/{Aga-Turowska,Justyna-Seidel,Jakub-Aniola}` |
| NEUROnews | `photos/articles/{pauza-poznawcza,bledy-poznawcze,priorytetyzacja-zadan,Ekonomia-behawioralna,znieksztalcenia-poznawcze}` |
| logo nav / stopka | `logos/logo-neurostrategia.svg` / `logos/logo-neurostrategia-white.svg` |

### Do decyzji z Darią (iteracja 2)
1. **Fonty** — czy Fraunces + Manrope są OK, czy strona ma inne licencjonowane kroje.
2. **Wideo `brain.webm` (31 MB)** — teraz w pasie kursu jest statyczny plakat. Włączyć wideo? (waga vs efekt)
3. **Zdjęcia** — obecne mają ciepłe/terakotowe tony przy chłodnej palecie (zieleń + kość słoniowa). Zostawić
   naturalne czy ujednolicić delikatnym filtrem?
4. **H1 hero** — teraz „Psychologia decyzji dla marketingu i sprzedaży". Zostawić kurs jako główny przekaz hero,
   czy dać przekaz o Darii/ekspertce?
5. **Nawigacja** — uprościłem do: Oferta / O mnie / Kurs / NEUROnews / Kontakt + CTA. Brakuje „E-sklep"
   (książki, ebooki) — czy potrzebny na homepage.
6. **Sekcja „social"** — czy zostaje osobno, czy scalić z sekcją Kontakt / stopką.
7. **Logo** — mamy tylko wordmark SVG; brak wersji z „brain mark" w dobrej jakości.

### Znane uproszczenia (do etapu 3)
- formularz kontaktowy — front-end only (`onsubmit` blokowany), bez backendu
- treści opinii skrócone; artykuły to statyczne przykłady
- brak strony 404 / podstron — tylko homepage

---

## Etap 2 — iteracja 2 (feedback Darii wdrożony)

Uwagi Darii → zmiany:

1. **Hero = wideo z wersji live** — `brain.webm` jako tło (autoplay/muted/loop), poster `brain-poster.webp`. [D7]
2. **Consulting — słabe zdjęcie** → `photos/daria-red-chair.jpg` (Daria przy laptopie). ⚠️ *jest w kadrze czerwony fotel — jeśli czerwień przeszkadza, podmienię (np. na zdjęcie z podstrony consulting).*
3. **Sekcja „Kurs" nieregularna (2 liczby + 1 tekst)** → przeprojektowana: nagłówek + lead + **siatka 2×2 „ptaszków"** + ocena gwiazdkowa + CTA. Bez zdjęcia. [D9]
4. **GBP + „Bądźmy w kontakcie" miały inne rozmiary** → wprowadzony **wspólny komponent `.panel`**: identyczny promień, padding (`--panel-pad`) i szerokość (`--wrap` 1180) dla wszystkich paneli (hero, kurs, GBP, social, kontakt). Sekcja „social" przebudowana na jedną kolumnę. [D8]
5. **Czcionka „z wywijasami" → prosta/zaokrąglona jak logo** → **Poppins** zamiast Fraunces (nagłówki); Manrope bez zmian (tekst). [D6]

### Nowe/zmienione elementy systemu
- `--font-display: Poppins`, skala nagłówków lekko zmniejszona (Poppins jest szerszy)
- `--panel-pad` — jeden token na wewnętrzny padding paneli; usunięty `--wrap-wide`
- `.panel` + `.panel--card|dark|green|media` — powłoka; `.split` / `.split--reverse` / `.split--text-wide` — dwukolumnowy układ treść+zdjęcie (wspólny dla oferty i paneli)
- `.checklist` (+ `.checklist--grid`) — reużywalna lista z zielonym „ptaszkiem"
- usunięte: `.promo*`, `.stat*` (zastąpione przez `.panel--dark` + `.checklist`)

### Wciąż do decyzji z Darią
- Consulting: czerwony fotel na zdjęciu — zostaje czy podmiana?
- Fonty — Poppins OK? (alternatywy o podobnym charakterze: Figtree, Onest, Mulish)
- `brain.webm` waży 31 MB — na produkcji do kompresji / krótszej pętli
- „E-sklep" (książki, ebooki) — dodać do nawigacji/sekcji czy nie na homepage

---

## Etap 2 — iteracja 3 (szerokie ekrany + teksty z wersji live)

### 1. Szerokie rozdzielczości (>1500 px) — „zbity" układ [poprawione]
- `--wrap` skaluje się: `clamp(1180px, 88vw, 1440px)` — na dużych monitorach treść używa do 1440 px zamiast utykać w 1180.
- `--section-y` max ↑ do 7rem, `--panel-pad` max ↑ do 4rem.
- **`.split`** przebudowany: kolumny mają górny limit w `rem` (`minmax(0, 39rem)` / `minmax(0, 37rem)`), a nadmiar miejsca rozkłada `justify-content: center` — koniec z „rozjechanym" tekstem i mikro-zdjęciami.
- Zdjęcia w blokach oferty: `max-height` 480→680 px, kolumna zdjęcia szersza → realnie większe.
- Panele jednokolumnowe (kurs, social) dostały `max-width` + wyśrodkowanie — nie „pływają" w pustce.

### 2. Sekcja „Kompleksowe wsparcie… Good Business Place" [poprawione]
- Usunięta zbędna biała ramka wokół zdjęcia.
- Zdjęcie powiększone (portret 4:5, do 620 px) — układ `.split` 1:1 zamiast wąskiej kolumny.

### 3. Teksty spójne z <https://neurostrategia.pl/> [poprawione]
Wszystkie teksty wyciągnięte z żywej strony (`assets/_raw/homepage.html`) i wstawione **dosłownie**:
- **Hero:** kicker „Kurs online" + H1 „Psychologia sprzedaży i marketingu" (było: „…decyzji dla marketingu i sprzedaży"), lead + CTA **„Zapisz się na kurs i zdobądź certyfikat!"** — 1:1 z live.
- **Nawigacja:** Prelegent i wykładowca / Oferta / O mnie / E-sklep / NEUROnews / Kontakt + CTA „Psychologia sprzedaży i marketingu" (zamiast wymyślonych pozycji).
- **Bloki oferty** (Consulting / Szkolenia / Audyt / Kurs): dosłowne akapity + listy „co robię" jako `.checklist` (na live to wypunktowania z pogrubionym wyrażeniem wiodącym). CTA dokładnie jak na live.
- **GBP:** nagłówek „Kompleksowe wsparcie biznesu z Good Business Place", CTA „Szczegóły już niebawem!".
- **Social:** „…Codzienna dawka wiedzy, inspiracji i konkretnych tipów!".
- **NEUROnews:** 5 realnych tytułów + pierwsze zdania artykułów z live.
- **Opinie:** prawdziwe cytaty (Aga Turowska / Justyna Seidel / Jakub Anioła), przycięte.
- **O autorce:** dosłowny akapit; nagłówek „Daria Widerowska".
- **Kontakt/stopka:** „Poznajmy się w sieci", „Masz pytania? Napisz do nas:".

### Różnice względem live (świadome, do decyzji Darii)
- **Kolejność sekcji:** trzymam „O autorce" wysoko (2. pozycja), na live jest niżej (po NEUROnews). Dla strony osobistej „kto to" wcześnie działa lepiej — łatwo przestawić.
- **Sekcja „Zapisz się do newslettera"** (z listą korzyści) — jest na live, u nas jej NIE MA. Dodać?
- **Formularz kontaktowy** — na homepage live go nie ma (jest osobna strona Kontakt); zostawiam wg kierunku z `static-design`.
- Consulting: nadal `daria-red-chair.jpg` (czerwony fotel) — czeka na decyzję.

### Iteracja 3b — panele „kurs" i „social" (feedback Darii)
Oba wyglądały jak wąska wyspa treści na szerokim tle (kurs „jak błąd").
→ przerobione na **układ `.split` 2-kolumnowy**, identyczny jak GBP i kontakt:
- **Kurs:** lewa kolumna = nagłówek + lead + CTA + ocena; prawa = lista „ptaszków" (pionowa).
- **Social:** lewa = nagłówek + tekst; prawa = linki (LinkedIn / Instagram / Facebook, pionowo).
Teraz WSZYSTKIE panele (hero, kurs, GBP, social, kontakt) mają tę samą szerokość, padding i strukturę 2-kolumnową.

---

## Etap 2 — iteracja 4: `impeccable polish`

Uruchomiony skill **impeccable** w trybie `polish` (nie redesign — kierunek zablokowany).
Batchowy przegląd desktop 1920 / tablet 1100 / mobile 500 → jedna partia poprawek → potwierdzenie.

**Poprawione:**
- **Nawigacja** — zwijała się do menu dopiero przy 900 px, między 900–1200 pozycje się łamały. Breakpoint podniesiony do **1080 px**, `white-space: nowrap`, skrócony CTA w nav („Zapisz się na kurs" zamiast pełnego tytułu kursu).
- **Zdjęcia w blokach oferty / O autorce / GBP** — dopasowują się teraz wysokością do kolumny tekstu (`align-items: stretch` + obraz wypełniający ramkę absolutnie). Koniec z „wiszącymi" bokami i pustką między tekstem a zdjęciem na każdej szerokości.
- **Powierzchnie przeglądarki** (sygnał „to zaprojektowano, nie złożono"): scrollbar, `caret-color`, zaznaczenie tekstu, podkreślenie linków w treści — wszystko z palety.
- **Gwiazdki** — rysowane SVG zamiast znaku Unicode `★`.
- **Kontrast** tekstu drugorzędnego na ciemnym/zielonym: 0.58 → 0.70.
- **Nagłówki** — mocniejszy tracking (-0.022em), pasuje do Poppins.
- **Ruch** — reveal subtelniejszy (16 px, ease-out); `prefers-reduced-motion` wyłącza wideo w hero (poster jako tło).
- **Placeholdery** formularza — czytelniejszy kontrast.
- **Porządki w kodzie** — usunięte nieużywane tokeny/reguły (`--r-xs`, `--shadow-lg`, `.frame--wide`, `.checklist--grid`, `.course__head/foot`).

**Zmiana widoczna — do akceptacji Darii:**
- **Usunięte „nadtytuły" (eyebrow) nad nagłówkami sekcji** (O AUTORCE / OFERTA / GOOD BUSINESS PLACE / SOCIAL / OPINIE / KONTAKT). Craft-standard impeccable traktuje eyebrow jako antywzorzec, a usunięcie ich **zwiększa spójność** (której chce Daria) — nagłówki bronią się same. Wyjątek: hero („★★★★★ Kurs online" = social proof + dosłowna treść z live). „Kurs online" wcięte z nagłówka „Kurs online: Psychologia decyzji…". *Jeśli Daria woli wersję z nadtytułami — rewert to jedna operacja.*

### Kolejne kroki impeccable (rekomendacja)
- `audit design/` — techniczne a11y/perf (opcjonalnie)
- **po akceptacji wizualnej → `document`** → `DESIGN.md` = spec design systemu pod motyw WP i reużywalny skill

---

## Etap 3 — przebudowa wg static-design + SCSS  (2026-09-06)

**Zmiana podejścia (decyzja klienta):** źródłem dobrego designu jest teraz
`static-design/index.html` — „wszystkie elementy pasują". `design/` odbudowane od zera
jako **statyczny HTML + SCSS + JS**, wiernie wg struktury i komponentów static-design,
z paletą Darii i typografią Poppins/Manrope. Iteracje 1–4 (mój wcześniejszy layout) —
zastąpione.

### Struktura
```
design/
├── index.html
├── scss/
│   ├── _tokens.scss     custom properties (paleta/typo/spacing) + SCSS: breakpointy + @mixin bp()
│   ├── _base.scss       reset + baza + prymitywy layoutu + [data-reveal]
│   ├── _components.scss .btn (primary/dark/outline/on-dark/ghost × sm/lg), .chip, .stat,
│   │                    .stars (SVG), .testimonial, .article-card, .field (podkreślenie), .frame
│   ├── _sections.scss   .split (+warianty), .panel (+card/dark/green/media), header, hero,
│   │                    about, features, kurs, gbp, connect, articles+slider, quotes, contact, footer
│   └── main.scss        @use partiali
├── css/main.css         SKOMPILOWANE  (sass scss/main.scss css/main.css --style=expanded)
└── js/main.js           nav mobilne, scroll-reveal, slider artykułów (bez zależności)
```
Kompilacja: `cd design && sass scss/main.scss css/main.css --no-source-map` (sass w `~/.local/bin`).

### Wiernie z static-design (`_ds`)
- Komponenty odwzorowane 1:1 bez złota: Button (sizes 12/24, 16/32, 19/42 · warianty primary/dark/outline/ghost),
  TestimonialCard (radius-lg, pad 24, shadow, cytat + avatar 40px + nazwisko/rola),
  ArticleCard (aspect 4/3, radius-md, h3 md/500), Input/Textarea (**styl podkreślenia** — border-bottom).
- „W kilku słowach" jako **chipy** (bg kość słoniowa, radius-md, pad 16/20).
- Pas kursu: nagłówek + tekst + **2 statystyki** (8h + ✓ certyfikat) + CTA — jak static-design.
- Sekcje: hero → o autorce → oferta (4 bloki + pas kursu) → GBP → „bądźmy w kontakcie" → NEUROnews → opinie → kontakt → stopka.
- Skala static-design: kontener 1180 (skalowany do 1400 na dużych ekranach — wytyczna), radiusy 4/8/14, cienie miękkie.

### Dopasowane do wytycznych
- Paleta: zieleń `#136241` = jedyny akcent; czerń / biel / kość słoniowa `#f6f4f0`; **zero złota**.
- Typografia: **Poppins** (nagłówki) + **Manrope** (tekst) zamiast Fraunces.
- Hero: tło = wideo `brain.webm` (life), h1 biały (bez przesadnego zielonego wyróżnienia).
- Zdjęcia w blokach oferty/GBP dopasowane wysokością do kolumny tekstu (bez „wiszących" boków).

### Do decyzji
- Hero: „ponad 100 pozytywnych opinii" — jest w static-design i `_ds/readme`; zostaje?
- Consulting: zdjęcie `daria-red-chair.jpg` (czerwony fotel) — jak wcześniej, czeka.
- Pas kursu — prawa strona panelu dość pusta (ciemny poster mózgu); ewentualnie doświetlić.

### Etap 3 — poprawki (2026-09-06, runda 2)
- **Zdjęcia z zestawu static-design** — skopiowane do `assets/design/` i podpięte:
  O autorce (`o-autorce.jpg` — sylwetka), Consulting (`consulting.jpg` — na stołku),
  Szkolenia (`szkolenia.webp` — sala), Audyt (`audyt.webp` — szkic), Prelekcje (`prelekcje.webp`),
  GBP (`good-business-place.jpg`), pas kursu + hero-poster (`kurs-online.webp` — mózg).
- **Proporcje zdjęć jak w static-design** — stałe pionowe: oferta `4/5`, „O autorce" `3/4`, GBP `4/5`
  (`.split { align-items:center }` zamiast rozciągania). GBP ma teraz pionowe zdjęcie (uwaga klienta).
- **Nawigacja CTA:** „Kurs psychologia decyzji w marketingu".
- **Pas kursu:** mózg (`kurs-online.webp`) widoczny po prawej — panel nie jest już pusty.

### Etap 3 — poprawka hero (2026-09-06, runda 3)
- Wideo w banerze zakotwiczone do prawej (~62% szerokości), jak w oryginale/static-design
  (`.hero__media { right:0; width:62% }`), scrim mocniejszy po lewej (#000 do 40%). Mózg nie
  nachodzi już na tekst. Mobile: media wraca na 100% szerokości.

### Etap 3 — sekcja social (2026-09-06, runda 4)
„Bądźmy w kontakcie" wyglądała jak oderwana wąska karta. Przebudowana:
- **pełna szerokość wrappera** (jak reszta sekcji), zwykła sekcja z `section-head` + siatka
- **siatka 2×3** — szachownica: kafle marki (LinkedIn/Facebook/Instagram) przeplatane kaflami zdjęć
- kafle marki: zieleń / czerń, białe ikony konturowe (styl jak strzałki slidera) + podpis
- kafle zdjęć: `daria-prelegent`, `prelekcja-audience`, `good-business-place-duo`
- `.social-grid` / `.social-tile` w `_sections.scss`; usunięte `.connect`

### Etap 3 — odstępy (2026-09-06, runda 5)
Za dużo wolnego miejsca w dolnej części strony (NEUROnews / opinie / kontakt).
- `--section-y` max: 8rem → 6.25rem (128 → 100 px).
- Sekcje NEUROnews, „Co mówią o mnie inni?", „Napisz do mnie" → `section--tight` (55%).
- Wysokość strony spadła ~11000 → 10380 px; dolna część czyta się zwarcie.

### Etap 3 — zdjęcia w sekcji social (2026-09-07)
Kafle zdjęć zastąpione **3 realnymi postami z profilu Neurostrategia** (dostarczone przez klienta):
`assets/design/social/post-odpowiedzialnosc.jpg`, `post-dobry-czlowiek.jpg`, `post-macierz-eisenhowera.jpg`.
Kafle zmienione na proporcję **4:5** (natywna dla postów). Post tekstowy dostał cienkie
obramowanie, by odcinał się od kości słoniowej.

### Etap 3 — szerszy wrapper (2026-09-07)
- `--container`: `clamp(1180px, 92vw, 1600px)` (było 1400). `--container-narrow` → 46rem.
- Kolumny `.split` poszerzone (tekst ~40rem / zdjęcie ~46rem, większy gap) — treść wypełnia szerszy wrapper, zdjęcia większe.
- `assets/design/o-autorce.jpg` przycięte ciaśniej na sylwetce (oryginał → `o-autorce-full.jpg`) — przy większym kadrze za dużo pustego tła.

### Etap 3 — podmenu w nawigacji (2026-09-07)
Za wzorem live (zakładka „Oferta" z podzakładkami). Dodane rozwijane podmenu dla **Oferta** i **E-sklep**:
- **Oferta:** Poznaj ofertę / Audyt decyzji zakupowych w sprzedaży i marketingu / Consulting i doradztwo /
  Interim Marketing Manager / Interim Marketing Director / Prelegent i wykładowca / Szkolenia dla firm
- **E-sklep:** Kurs Psychologia decyzji / Ebook „Mózg na promocji" / Ebook „Audyt decyzji zakupowych…"
- Desktop: dropdown na hover/focus (biała karta, cień, chevron); mobile: akordeon wewnątrz menu.
- `.nav-item` / `.nav-sub` w `_sections.scss`; logika mobilna w `main.js`.
- Bloki oferty dostały id (`#consulting`, `#szkolenia`, `#audyt`, `#prelekcje`) — linki podmenu prowadzą tam
  tymczasowo, docelowo → podstrony ofertowe (następny krok).

### Etap 4 — podstrona Oferta  (2026-09-07)
`design/oferta.html` — na bazie <https://neurostrategia.pl/oferta/>, w tym samym systemie.
**Elementy współdzielone (identyczne jak na stronie głównej):** nagłówek z podmenu, hero (ciemny panel
z wideo `brain.webm`), bloki oferty `.split feature`, pas kursu `.panel--dark`, panel GBP `.panel--green`,
**formularz kontaktowy** (co do znaku ten sam — różni się tylko nagłówek: „Skontaktuj się ze mną w sprawie oferty"),
stopka. Ten sam `css/main.css` i `js/main.js`.
**Nowe komponenty (w duchu systemu):**
- `.rich-list` — lista z zieloną kreską i pogrubionym wyrażeniem wiodącym (treść ofert w formie punktów).
- `.audience-grid` / `.audience-card` — siatka 3-kol. „Dla kogo są nasze usługi?" (biała karta + linijkowa ikona + tekst).
- `.eyebrow` — nadtytuł sekcji (użyty w hero podstrony).
**Sekcje:** Consulting i doradztwo strategiczne / Szkolenia dla firm / Audyty i analiza działań /
Kurs Psychologia decyzji (pas) / Prelekcje i wystąpienia publiczne / Good Business Place / Dla kogo / Kontakt.
**Materiały:** `assets/design/oferta/` (brain-model, laptop-analiza, home-office, daria-biurko, gbp-duo) —
ze strony live; bloki wspólne z homepage używają tych samych zdjęć (`consulting.jpg`, `szkolenia.webp`, `prelekcje.webp`).
**Do decyzji:** newsletter (jest na live oferta i homepage — u nas nigdzie; dodać do obu?);
docelowe URL-e podmenu (teraz kotwice) — przy budowie motywu WP.

### Etap 4 — podpięcie Oferty pod menu (2026-09-07)
- `index.html`: nav „Oferta" → `oferta.html`; podzakładki → `oferta.html#audyt` / `#consulting` / `#szkolenia` / `#prelekcje` (Poznaj ofertę + Interim → `oferta.html`).
- `oferta.html`: „Oferta" → `oferta.html`, podzakładki → lokalne kotwice (sekcje istnieją na tej stronie).
- Nawigacja występuje tylko na tych dwóch stronach — obie podpięte.

### Etap 4 — zdjęcia na podstronie Oferta (2026-09-07)
Wstawione 5 zdjęć ze strony live, 1:1 wg przypisania sekcji:
`assets/design/oferta/` → consulting-daria (Consulting) · szkolenia-biuro (Szkolenia) · audyt-laptop (Audyty) ·
prelekcje-mozg (Prelekcje) · gbp-duo (Good Business Place).
Szkolenia i Audyty mają zdjęcie **poziome** (`.feature--wide`, 4:3) — jak na live; pozostałe pionowe 4:5.
Kurs bez zmian (mózg `kurs-online.webp`).

### Etap 4 — 6. kafel „Dla kogo" (2026-09-07)
Dodany szósty kafel „Marki regionalne i instytucje publiczne" (ikona pinezki) — dopełnia siatkę 2×3.
Treść oparta na realnej działalności (wystąpienia dla samorządów / Europejski Kongres Samorządów,
wpisy o marce regionalnej i marketingu lokalnym).

### Etap 4 — wideo w pasie kursu (2026-09-07)
Pas kursu (na oferta.html i index.html — spójnie) ma teraz **wideo mózgu `brain.webm`** jako tło
(klasa `.course` na panelu, `<video>` w `.hero__media`). Scrim wzmocniony dla czytelności:
desktop — gradient poziomy solidny do 46% (tekst po lewej w pełni czytelny); mobile — nakładka
`rgba(0,0,0,.62→.88)`. Wideo `opacity: .85`.

### Etap 4 — koncepcja wideo na baner Oferty (2026-09-07)
Wybrana koncepcja: **B — Ścieżka decyzji**.
Estetyka do utrzymania (z `brain.webm`): głęboka czerń + chłodny podton; forma z drobnych srebrzystych
punktów i włókien, miękko świecąca (białe jądro → cyjan); gęste, wielopłaszczyznowe bokeh dryfujące
na zewnątrz; delikatna poświata + winieta; powolny „ciężki" ruch kamery, bez cięć, zapętlone; monochromia
(zieleń dokłada UI); forma ~w centrum / lekko w prawo.

**Klatki (1920×1080, do image-to-video):**
- `assets/video/oferta-hero-start.png` — spokojny, „uśpiony" mózg z cząstek, bez tras, nieco chłodniejszy/ciemniejszy.
- `assets/video/oferta-hero-end.png` — bodziec wchodzi z lewej → świetlna trasa łukiem przez mózg →
  rozbłysk **węzła decyzyjnego** niżej-prawo; dwie krótsze trasy dołączają.
  (Klatka END = kompozyt PIL na bazie realnej klatki wideo — referencja kierunku; do odświeżenia w narzędziu AI.)

**Brief ruchu (do narzędzia wideo):** 8–10 s. 0–1 s: stan jak START. 1–4 s: pojedyncza świetlna trasa
„rysuje się" od punktu wejścia, wije przez regiony, dobiega do jasnego węzła (bloom). 4–7 s: 2–3 kolejne
trasy trasują się i zapalają, tworząc czystą poprowadzoną sieć. Przez cały czas: powolny dryf kamery
(~2–3° parallax), bokeh dryfuje na zewnątrz, mózg lekko „oddycha". 7–10 s: trasy przygasają do stanu
START → czysta pętla. Bez zieleni, bez tekstu, bez cięć.

### Etap 4 — wideo na banerze Oferty podpięte (2026-09-07)
`oferta-video.mp4` (1280×720, 10 s, 9,3 MB) → `assets/video/`, wpięty w hero `oferta.html`
(`<video>` w `.hero__media`, poster `oferta-video-poster.jpg` = 1. klatka). Pas kursu bez zmian (`brain.webm`).
TODO: kompresja wideo do < 6 MB + wariant `.webm`; ew. `<source>` fallback.

### Etap 4 — nowa koncepcja wideo Oferty: „Od chaosu do systemu" (2026-09-07)
Poprzednia („Ścieżka decyzji") dublowała mózg z homepage → odrzucona dla hero (archiwum w `oferta-hero-animacja.md`).
Wybrane: **abstrakcja, nie mózg**. Splątany kłąb nici + rozrzucone węzły (chaos, przypadkowość)
→ czysta struktura rozgałęziona nad siatką perspektywiczną (strategia, system). Ta sama tożsamość
wizualna co `brain.webm` (czerń, srebrzyste cząstki/nici, bokeh, winieta, monochromia), inny obiekt.
Klatki: `assets/video/oferta-hero2-start.png` / `-end.png`. Pełna rozpiska + prompt: `oferta-hero-animacja.md`.
(`oferta-video.mp4` zostaje na razie w hero — do wymiany po wygenerowaniu nowego wideo.)

### Etap 4 — finalne wideo Oferty podpięte (2026-09-07)
`oferta-banner-ready.mp4` (1280×720, 10 s, koncepcja „Od chaosu do systemu") → hero `oferta.html`,
poster `oferta-banner-poster.jpg` (1. klatka). Poprzedni `oferta-video.mp4` (mózg) usunięty — nieużywany.
Pas kursu bez zmian (`brain.webm`). Do zrobienia: kompresja < 6 MB + wariant `.webm`.

### Etap 4 — hero Oferty na split (2026-09-07)
Hero `oferta.html` przerobiony z ciepmego panelu na **dwie kolumny** (`.hero.hero--split`):
lewa = eyebrow + h1 + lead + CTA na tle strony (kość słoniowa, bez ciemnego tła),
prawa = `.split__media` (slot) z `oferta-banner-ready.mp4` w ramce (radius + `--shadow-card`, 4:3).
Slot uniwersalny — przyjmuje zdjęcie ALBO wideo w dowolnym gradingu, więc wariant pasuje pod każdą
podstronę (koniec z „czarną estetyką" wymuszającą tylko ciemne materiały).
h1 = ten sam `clamp` co hero homepage (2.2→3.15rem). Mobile: kolumny stackują się (media pod tekstem).
**Homepage hero bez zmian** — zostaje pełnoekranowy ciemny panel z `brain.webm`.
SCSS: `.hero--split` w `_sections.scss` (po bloku `.hero @include bp(md)`).

### Etap 4 — wyróżnienie banera + zachęta do scrolla (2026-09-07)
**Wyróżnienie split hero od sekcji „zdjęcie po prawej":** baner = jedyny pas z tłem na pełną
szerokość — delikatny wash `--c-green-soft` (#e8efeb) + `border-bottom` 1px `--border-subtle`.
Medium w banerze ma `--shadow-card-lg` (mocniejszy); zdjęcia w sekcjach zostają płaskie.
Sekcje treściowe zawsze na gołym tle strony — kontrast czytelny, subtelny.

**Zachęta do scrolla (`.hero-cue`) — na banerze każdej podstrony:** link „Przewiń w dół, aby
zobaczyć ofertę" (kółko + chevron, delikatny nudge, wyłączany przez `prefers-reduced-motion`),
`href="#consulting"` → płynny scroll do 1. sekcji. Tekst i kotwica per podstrona.
Ukryty < 900 px (na mobile scroll jest naturalny). Globalnie: `scroll-margin-top: 5.5rem`
na `section[id]/article[id]` — kotwice lądują pod przyklejonym nagłówkiem.

### Etap 5 — podstrona „Audyt decyzji zakupowych" (2026-09-07)
Przeniesienie `neurostrategia.pl/audyt-neuromarketingowy/` na nowy system. Plik: `design/audyt.html`.
Teksty 1:1 z live (drobne porządki interpunkcji + emdashe → „-"). Decyzje potwierdzone przez klienta:
zdjęcie Darii w banerze · newsletter dodany teraz · rozszerzone „O mnie" · ceny 1:1.

**Sekcje (po uporządkowaniu):**
hero split (foto `consulting.jpg` + eyebrow/h1/lead/CTA + `.hero-cue` + 3 statystyki w banerze pod
linią) → Problem (5 kafli `.audience-card` + CTA + `.pullquote`) → „Nikt Cię nie nauczył…"
(4 kafle numerowane `.audience-grid--4`) → Pakiety (`.pricing-grid` / `.price-card`, Neuro Deep
`--featured` z plakietką „Bestseller", ceny od 2 890 / 7 490 / 21 900 zł netto) → Porównanie
(`.compare` — kolumna szara „minus" ✕ vs zielona „plus" ✓) → 4 dziedziny nauki (`.audience-grid--4`)
→ Proces (4 kroki numerowane) → O mnie rozszerzone (`.split--media-sm`, foto `o-autorce.jpg`,
grupy `.about__facts`: wyróżnienia / wykształcenie / publikacje / sceny) → „Następny krok"
(`.cta-band` — wyśrodkowana, na tle strony) → Newsletter (`.panel--green .newsletter`, wspólny
komponent) → Kontakt (formularz bajt-w-bajt jak home/oferta, h2 „Skontaktuj się w sprawie audytu")
→ stopka.

**Nowe komponenty (SCSS `_sections.scss` / `_components.scss`):** `.stat-row` (+ wariant w banerze),
`.audience-grid--4`, `.audience-card__num`, `.pullquote`, `.section-cta`, `.compare` (+`--minus`/`--plus`),
`.pricing-grid` / `.price-card` (+`--featured`, `__badge`, `__price`, `__list`, `__who`),
`.newsletter` / `.newsletter-form`, `.cta-band`, `.panel--green .btn--outline` (jasna ramka), `.sr-only`.

**Podpięcie (spójność):** podmenu „Audyt decyzji zakupowych" → `audyt.html` w `index.html`, `oferta.html`
i `audyt.html`. Blok „Audyty i analiza działań" na `oferta.html` → CTA „Poznaj audyt decyzji zakupowych"
prowadzi do `audyt.html`.

**Do zrobienia:** newsletter na razie tylko na audycie - do wprowadzenia na `index.html` + `oferta.html`
(ten sam komponent). Rozważyć skrót nav do sekcji `#o-mnie` na samej podstronie (teraz nav „O mnie"
→ `index.html#o-mnie`, spójnie z `oferta.html`).

### Etap 5 — szersze nagłówki sekcji (2026-09-07)
`.section-head` poszerzony globalnie (home / oferta / audyt): blok bez `max-width` (pełny wrapper),
`h2` capnięty na `24ch` (balans, ~2 wiersze), `p` do `82rem` wyśrodkowany. Teksty wprowadzające
czytają się szeroko, w linii z siatką kart pod spodem — koniec z „kolumnowym" blokiem na środku.
`.articles__head .section-head h2, p` z guardem `margin-inline: 0` — nagłówek NEUROnews na home
zostaje wyrównany do lewej (globalne `h2 { margin-inline: auto }` centrowało go w kolumnie flex).

`.pullquote` (cytat w sekcji Problem na audycie) rozciągnięty na pełny wrapper: bez `max-width`,
większy font (`--text-2xl`), `padding-left` responsywny.

Sekcja „Problem" na audycie: dodany **6. kafel** „Rebranding był. Wyniki bez zmian." (ikona layout) -
domyka siatkę 3×2. Treść w duchu strony (powierzchowna zmiana ≠ zmiana mechanizmu decyzji), nie z live.

### Etap 5 — wyróżniki pod banerem Oferty (2026-09-07)
Wzorem `audyt.html` dodany `.stat-row` pod split hero na `oferta.html` (na washu, pod hairline) -
4 wyróżniki nawiązujące do oferty: **5** obszarów współpracy · **14 lat** w zarządzaniu marketingiem ·
**7,5 h** kursu online (11 modułów + certyfikat) · **100+** pozytywnych opinii. Nowy modyfikator
`.stat-row--4` (4 kol → 2 przy `nav`, 1 przy `sm`, większy `row-gap` przy zawijaniu).

### Etap 5 — wyróżniki pod banerem Home + korekta faktów o kursie (2026-09-07)
`.stat-row` dodany też pod ciemnym banerem `index.html` (na kości słoniowej, pod hairline) -
reguła `.hero .stat-row` (wcześniej `.hero--split .stat-row`) obsługuje oba warianty banera.
4 wyróżniki kursu: **7 h** nagrań w 11 modułach · **11** modułów (wideo + zadanie wdrożeniowe +
szablony) · **2 lata** dostępu · **Certyfikat** PDF do CV i LinkedIn.

**Fakty o kursie zsynchronizowane ze źródłem** (`neurostrategia.pl/kurs-psychologia-sprzedazy-i-marketingu/`):
było „8h" (home) / „7,5h" (oferta) → teraz **7 h, 11 modułów, 2 lata dostępu, 999 zł netto,
zwrot w 3 dni**. Poprawione pasy kursu na home i oferta (tekst + `.stat`).

### Etap 5 — baner home mieści się w jednym ekranie + „tekst-scroll" (2026-09-07)
Baner `index.html` + pasek wyróżników wypełniają ~jeden viewport i kończą się przy jego dolnej
krawędzi (sprawdzone 1280×800 → 1920×950). Zmiany:
- `.hero:not(.hero--split) .wrap` = flex-column o `min-height: min(calc(100svh - 8.5rem), 58rem)`;
  `.hero__panel { flex: 1 1 auto }` - panel rozciąga się na resztę wysokości po pasku wyróżników,
  treść (grid + `align-items: center`) zostaje wyśrodkowana. Na `bp(md)` wyłączone (`min-height: 0`).
- `.hero__body`: h1 `clamp(… , 2.7rem)` + `line-height: 1.1`, gap `--space-3`, mniejszy padding, lead `--text-base` + krótszy tekst
- `.hero .stat-row` (wszystkie 3 strony, spójnie): `.stat__num` `--text-3xl` → `--text-2xl`, label `--text-sm`, ciaśniejszy margin/padding

**`.hero-cue` na banerze głównym:** `.hero__hint` (goły tekst) → pełny `.hero-cue` (kółko + chevron + nudge),
`href="#o-mnie"`. Nowy wariant `.panel--dark .hero-cue` (jasna ikona/tekst na czerni). Ukryty < 900 px jak na podstronach.

### Etap 6 — dopracowanie mobile (2026-09-07)
1. **Baner home nie tnie już tekstu** - `.hero__panel { grid-template-columns: minmax(0, 1fr) }`
   (auto-track rozdymał się do max-content 40rem i był przycinany przez `overflow: clip`).
2. **Ciaśniejszy rytm pionowy** - `@include bp(md)`: `--section-y` 6.25rem→2.5rem, `.section--tight`
   →`--space-6`, `.features` gap `--space-10`→`--space-7`, `.features__intro` margin-bottom→0.
3. **Pas kursu (home)** - `.course__stats` gap `--space-8`→`--space-4` na mobile (dwa wyróżniki obok siebie).
4. **Social na mobile** - `.social-tile--photo { display: none }`, siatka `repeat(3, 1fr)`,
   kafle marki `aspect-ratio: 1` + mniejsza ikona/etykieta. Zostają 3 kafle SM.
5. **Slider artykułów** - na mobile tor wychodzi poza wrapper: `margin-inline: -gutter` +
   `padding-inline: gutter` + `scroll-padding-left` - kolejna karta „wyjeżdża" całkiem za ekran, bez cięcia.
6. **Menu hamburgerowe** - wysuwa się z **prawej**, `inset: 0 0 0 auto` (pełny viewport),
   `transform: translateX`. Reszta strony rozmyta: `.nav-backdrop` (`backdrop-filter: blur(6px)`,
   tworzony w JS, klik zamyka), `body.nav-open { overflow: hidden }`, Esc zamyka. Logo + „X" nad panelem
   (`z-index`). `.stat-row` na mobile: bez `max-width/margin auto` - równanie do lewej jak reszta treści.

### Etap 6 — poprawki po feedbacku (2026-09-07)
- **Menu hamburgerowe naprawione.** Root cause: `backdrop-filter: blur` na `.site-header` tworzył blok
  zawierający dla `position: fixed`, przez co panel menu (dziecko headera) zwijał się do wysokości
  headera (~62 px) zamiast viewportu. Fix: `@include bp(nav)` wyłącza `backdrop-filter` na headerze
  (solid bg). `.nav-toggle` → `position: fixed` top-right, `z-index: z-header + 20` (zawsze nad panelem).
  Przycisk CTA w menu: `white-space: normal` (zawija się). *(Wcześniejsze „zepsute" zrzuty to artefakt
  Chrome headless — min. szerokość ~485 px; testować przy 500 px.)*
- **CTA na banerze home nie wychodzi poza ekran.** Skrócony do „Zapisz się na kurs". Dodatkowo
  `@include bp(sm)`: `.btn--lg` mniejszy (14/22 px, `--text-sm`), hero CTA `white-space: normal`,
  `.hero__body h1` → 1.7 rem. Dotyczy też długiego CTA na audycie („Sprawdź dostępne pakiety audytów").
- Baner główny na mobile wyższy: `.hero__panel { min-height: 72svh }`, `.hero__body` gap `--space-3`→`--space-5`, padding `--space-7 --space-5` - więcej powietrza między elementami.
- `.hero__eyebrow` (★★★★★ + „ponad 100 opinii") - kolumnowo na `bp(sm)`.
- Nav CTA skrócony wszędzie: „Kurs psychologia decyzji w marketingu" → „Kurs psychologia decyzji".

### Etap 6 — newsletter na wszystkich podstronach (2026-09-07)
Sekcja newslettera (`.panel--green .newsletter`, ten sam komponent co na audycie) dodana na
`index.html` i `oferta.html` - **przed sekcją kontaktową**. Markup bajt-w-bajt identyczny na 3 stronach.
Zamyka wcześniejszy TODO „newsletter tylko na audycie".

### Etap 6 — metadane podglądu linku (2026-09-07)
Wcześniej podstrony miały tylko `<title>` + `<meta description>` + favicon - **brak Open Graph / Twitter Cards
i brak obrazka**, więc wklejony link nie pokazywał karty. Dodane na `index.html`, `oferta.html`, `audyt.html`:
- `<link rel="canonical">`, `og:type/site_name/locale/title/description/url/image(+width/height/alt)`,
  `twitter:card=summary_large_image` + `twitter:title/description/image`.
- **Obrazki 1200×630** (`assets/og/og-home.jpg`, `og-oferta.jpg`, `og-audyt.jpg`) - branded karty
  (tło = `brain-poster`, kicker + zielona kreska + nagłówek Poppins + `neurostrategia.pl`).
  Generator: `assets/og/_generate.py` (PIL, fonty Poppins pobierane z Google Fonts).
- **URL-e są produkcyjne** (`https://neurostrategia.pl/...`) - po wdrożeniu muszą pasować do domeny
  i realnych ścieżek plików (obecnie `assets/og/` - przy motywie WP pewnie `wp-content/uploads/`).
  Demo z localhost i tak się nie zunfurluje - do testu użyć np. opengraph.xyz po deployu.