Jak zrobić landing page, który sprzedaje?
Landing page to wyspecjalizowana strona internetowa zaprojektowana w jednym, ściśle określonym celu – konwersji odwiedzającego w leada lub klienta, zazwyczaj w ramach konkretnej kampanii marketingowej. W przeciwieństwie do wielowątkowych stron głównych, skuteczna strona lądowania eliminuje wszelkie elementy rozpraszające, prowadząc użytkownika liniową ścieżką od zainteresowania ofertą do wykonania pożądanej akcji, takiej jak zakup produktu, zapis na webinar czy pobranie ebooka.
- Czym jest landing page i jaką rolę pełni w ekosystemie sprzedaży?
- Landing page a strona główna – jakie są kluczowe różnice?
- Jak stworzyć landing page krok po kroku?
- Jakie są najważniejsze elementy landing page decydujące o konwersji?
- Kiedy warto używać landing page w kampaniach marketingowych?
- Narzędzia do tworzenia landing page – przegląd rozwiązań
- Najważniejsze wytyczne dotyczące landing page – Optymalizacja techniczna i UX
- Analiza danych z landing page i optymalizacja konwersji (CRO)
- Przykłady zastosowania landing page w różnych branżach
Tworzenie skutecznych miejsc docelowych w sieci to proces, który łączy psychologię sprzedaży, twardą analizę danych oraz użyteczny design. Często spotykam się z sytuacją, gdzie świetnie skonfigurowane kampanie reklamowe przepalają budżety tylko dlatego, że ruch kierowany jest w „czarną dziurę” nieoptymalnej witryny. Jeśli zastanawiasz się, dlaczego użytkownicy klikają w Twoje reklamy, ale nie kupują, problem niemal zawsze leży w konstrukcji strony docelowej. W tym materiale przejdziemy przez proces budowy landing page’a, który nie tylko wygląda profesjonalnie, ale przede wszystkim realnie wspiera cele biznesowe Twojej firmy.
Co warto wiedzieć:
- Cel landing page’a: Zadaniem strony lądowania jest realizacja wyłącznie jednej akcji (np. zakupu lub zapisu), co odróżnia ją od strony głównej, która pełni funkcję informacyjną i nawigacyjną.
- Wskaźnik uwagi (Attention Ratio): Skuteczny landing page powinien dążyć do stosunku uwagi 1:1, co oznacza, że na stronie znajduje się tylko jeden możliwy do kliknięcia cel (CTA), bez zbędnego menu czy linków zewnętrznych.
- Hierarchia informacji: Kluczowe elementy decydujące o konwersji, takie jak nagłówek (UVP) i wezwanie do działania, muszą znajdować się w strefie „Above the Fold” (widocznej bez przewijania), aby natychmiast zaadresować potrzebę użytkownika.
- Rola szybkości (Core Web Vitals): Każda sekunda opóźnienia w ładowaniu strony mobilnej może obniżyć współczynnik konwersji nawet o 20%, co czyni optymalizację techniczną równie ważną jak copywriting.
- Zasada wiarygodności: Bez elementów budujących zaufanie (Social Proof), takich jak opinie, certyfikaty czy logotypy klientów, nawet najlepiej napisana oferta może nie przełożyć się na sprzedaż w środowisku o niskim zaufaniu.
Czym jest landing page i jaką rolę pełni w ekosystemie sprzedaży?
W marketingu internetowym precyzja jest walutą. Landing page (strona lądowania) to autonomiczna witryna, na którą trafia użytkownik po kliknięciu w reklamę (Google Ads, Facebook Ads), link w newsletterze lub baner. Jest to w istocie cyfrowy handlowiec, który pracuje 24 godziny na dobę. Jego rola w lejku sprzedażowym jest newralgiczna – znajduje się on zazwyczaj na etapie „Decyzji” lub „Działania”. Użytkownik, który tu trafia, jest już wstępnie zainteresowany (kliknął w reklamę), a zadaniem strony jest jedynie – i aż – domknięcie tej transakcji lub pozyskanie danych kontaktowych.
Dlaczego zasada „One Page, One Goal” jest fundamentem skuteczności?
Największym błędem, jaki widzę podczas audytów stron klientów, jest próba upieczenia dwóch pieczeni na jednym ogniu. Próba sprzedaży produktu i jednoczesnego zapraszania do polubienia fanpage’a kończy się zazwyczaj fiaskiem obu celów.
Zasada „One Page, One Goal” (Jedna strona, jeden cel) wynika bezpośrednio z prawa Hicka, które mówi, że czas potrzebny na podjęcie decyzji wzrasta wraz z liczbą dostępnych opcji. Jeśli damy użytkownikowi pięć różnych linków, szansa, że kliknie w ten najważniejszy („Kup teraz”), drastycznie maleje.
- Eliminacja dystrakcji: Usuń główne menu nawigacyjne, stopkę z linkami do podstron „O nas” czy „Kariera”.
- Fokus na korzyści: Każdy akapit tekstu, każde zdjęcie i każdy nagłówek musi wspierać ten jeden, nadrzędny cel.
Landing page a strona główna – jakie są kluczowe różnice?
Wielu przedsiębiorców wciąż kieruje płatny ruch na stronę główną swojego serwisu. To działanie można porównać do zaproszenia klienta do ogromnego supermarketu i powiedzenia: „gdzieś tam jest ten produkt, o który pytałeś, poszukaj sobie”. Landing page to z kolei postawienie tego produktu na ladzie bezpośrednio przed klientem.
Czy wiesz, że…
Użytkownik ocenia Twój Landing Page w ciągu zaledwie 5 sekund od wejścia. Wszystko, co najważniejsze, musi znajdować się w sekcji „Above the Fold” (widocznej bez przewijania).
W tym obszarze musisz odpowiedzieć na trzy pytania klienta: Co oferujesz? Jaką korzyść mu to przyniesie? Co ma zrobić teraz (CTA)? Jeśli zmuszasz użytkownika do scrollowania w poszukiwaniu sensu Twojej oferty, większość z nich zamknie stronę, zanim dotrze do formularza.
Podstawowe różnice można sprowadzić do kilku kluczowych obszarów:
- Cel: Strona główna to węzeł komunikacyjny. Ma informować o marce, budować szeroki wizerunek i kierować do różnych sekcji serwisu. Landing page ma sprzedać lub pozyskać leada.
- Ruch: Na stronę główną trafia ruch organiczny, bezpośredni i z wizytówek. Na landing page kierujemy precyzyjnie targetowany ruch z kampanii płatnych.
- Nawigacja: Strona główna zachęca do eksploracji (rozbudowane menu). Landing page zniechęca do wyjścia (brak menu, ograniczone linki wychodzące).
Zrozumienie tej dystynkcji jest kluczowe dla optymalizacji budżetu reklamowego. Każda złotówka wydana na kliknięcie kierujące na stronę główną jest zazwyczaj wykorzystywana mniej efektywnie niż ta sama złotówka kierująca na dedykowany landing page.
Jak stworzyć landing page krok po kroku?
Budowa skutecznej strony lądowania nie zaczyna się od otwarcia programu graficznego czy kreatora stron. To proces, który w 60% składa się z przygotowania, a dopiero w 40% z wykonania. W mojej praktyce, pominięcie etapu badawczego zawsze skutkowało gorszymi wynikami konwersji.

Od czego zacząć projektowanie strony lądowania? (Badania i strategia)
Zanim napiszesz pierwsze słowo, musisz zrozumieć, do kogo mówisz. Musisz wejść w buty swojego klienta.
Analiza Persony: Określ, kto dokładnie jest odbiorcą. Jakim językiem mówi? Czego się boi? Co jest jego główną motywacją? Analiza Konkurencji: Sprawdź, jak wyglądają landing page Twoich konkurentów. Nie po to, by je kopiować, ale by znaleźć luki w ich komunikacji, które możesz wykorzystać.
Warto w tym miejscu zdefiniować Unikalną Propozycję Wartości (UVP). To jedno zdanie, które mówi klientowi, dlaczego powinien wybrać właśnie Ciebie. Bez silnego UVP, nawet najładniejszy design nie sprzeda produktu.
Jak przygotować treści sprzedażowe? (Copywriting i psychologia)
Treść na landing page’u nie jest literaturą piękną – to inżynieria słowa. Tekst musi być skanowalny, ponieważ użytkownicy w sieci nie czytają, a jedynie omiatają wzrokiem nagłówki.
Nie pisz „z głowy”, użyj ramy PAS
Skuteczny Landing Page prowadzi klienta za rękę. Najlepsza struktura to PAS:
- P – Problem: „Masz dość przepalania budżetu w Google Ads?” (Uderz w ból).
- A – Agitacja: „Każdy dzień zwłoki to setki złotych oddane konkurencji, która już używa AI.” (Posyp ranę solą).
- S – Solucja: „Pobierz mój audyt i zatkaj dziury w budżecie w 15 minut.” (Daj gotowe rozwiązanie).
Stosuję tutaj sprawdzone ramy copywriterskie:
- Model AIDA: Attention (Uwaga), Interest (Zainteresowanie), Desire (Pożądanie), Action (Akcja).
- Model PAS: Problem (Zidentyfikowanie bólu), Agitation (Rozdrapanie rany/wzmocnienie problemu), Solution (Twoje rozwiązanie jako lekarstwo).
Pamiętaj, aby pisać językiem korzyści, a nie cech. Zamiast pisać „Odkurzacz ma moc 2000W” (cecha), napisz „Posprzątasz całe mieszkanie dwa razy szybciej” (korzyść).

Projekt graficzny i wdrożenie – na co zwrócić uwagę?
Design ma wspierać treść, a nie ją przytłaczać. Częstym błędem jest „przeładowanie” graficzne, które odciąga uwagę od przycisku CTA.
- Kierunkowość (Directional Cues): Używaj strzałek lub wzroku postaci na zdjęciach, aby kierować wzrok użytkownika w stronę formularza lub przycisku.
- Kontrast: Przycisk CTA musi być najbardziej kontrastowym elementem na stronie. Jeśli Twoja strona jest niebieska, niech przycisk będzie pomarańczowy lub czerwony.
Projektuj pod „Strefę Kciuka”
Większość Twoich klientów trzyma telefon jedną ręką. Czy Twój przycisk „KUP TERAZ” jest łatwy do kliknięcia kciukiem, czy zmusza do gimnastyki?
- DOBRZE: Przycisk CTA na dole ekranu (sticky bar) lub w dolnej połowie sekcji Hero.
- ŹLE: Przycisk CTA na samej górze strony, tuż pod logo. To najtrudniejsze miejsce do sięgnięcia.
Jakie są najważniejsze elementy landing page decydujące o konwersji?
Anatomia idealnego landing page’a jest dość uniwersalna. Niezależnie od branży, pewne elementy muszą się na nim znaleźć, aby budować wiarygodność i prowadzić do sprzedaży.
Jak zaprojektować sekcję Hero, która zatrzyma uwagę użytkownika?
Sekcja Hero to ten fragment strony, który użytkownik widzi bez przewijania ekranu (Above the Fold). Masz tutaj około 3 do 5 sekund, aby przekonać odwiedzającego, że jest we właściwym miejscu.

Kluczowe składniki sekcji Hero:
- Nagłówek H1: Musi być obietnicą rozwiązania problemu. Powinien być konkretny i bezpośredni.
- Podtytuł: Rozwinięcie myśli z nagłówka, dodające nieco więcej szczegółów lub kontekstu.
- Hero Shot: Zdjęcie lub wideo pokazujące produkt w użyciu lub efekt jego działania. Unikaj sztucznych zdjęć stockowych, które nie budują autentyczności.
- Główne CTA: Przycisk wzywający do działania, widoczny od razu po załadowaniu strony.
Jakie formularze i wezwania do działania (CTA) generują leady?
Formularz to moment krytyczny. To tutaj następuje wymiana: użytkownik daje Ci swoje dane w zamian za obiecaną wartość. W tym punkcie tarcie (friction) jest największe.
Oto jak optymalizować ten element:
- Długość formularza: Zbieraj tylko te dane, które są absolutnie niezbędne. Każde dodatkowe pole zmniejsza konwersję. Jeśli potrzebujesz tylko e-maila, nie pytaj o numer telefonu czy nazwę firmy.
- Treść przycisku (Microcopy): Unikaj słowa „Wyślij”. Jest ono techniczne i nie niesie wartości.
- Źle: „Zarejestruj się”
- Dobrze: „Odbierz darmowy ebook”, „Rozpocznij darmowy okres próbny”
Dlaczego Social Proof jest niezbędny do budowania zaufania?
W psychologii społecznej dowód słuszności to potężne narzędzie. Ludzie boją się podejmować decyzje jako pierwsi. Chcą wiedzieć, że inni już skorzystali i są zadowoleni.
Elementy budujące wiarygodność:
- Testimoniale: Opinie z imieniem, nazwiskiem i zdjęciem (anonimowe opinie nie działają).
- Logotypy: „Zaufali nam” – loga znanych marek, z którymi współpracowałeś.
- Liczby: „Dołączyło do nas już 5000 osób”.
- Case Studies: Krótkie historie sukcesu klientów.
Wideo to nowy tekst (Shorts na LP)
Dzisiaj użytkownicy „skanują”, a nie czytają. Umieszczenie krótkiego wideo (pionowego, w stylu TikTok/Shorts) obok formularza zwiększa konwersję nawet o 80%.
- ✅ Produkt w użyciu (nie na półce).
- ✅ Twarz właściciela/eksperta (budowanie zaufania).
- ✅ Odpowiedź na jedną, główną obiekcję klienta.
Kiedy warto używać landing page w kampaniach marketingowych?
Landing page nie jest rozwiązaniem na każdą sytuację, ale w pewnych scenariuszach jest niezastąpiony. Decyzja o jego stworzeniu powinna wynikać z konkretnej potrzeby biznesowej.
Warto wdrożyć dedykowaną stronę lądowania, gdy:
- Uruchamiasz kampanię PPC (Google Ads, Meta Ads): Kierowanie płatnego ruchu na stronę główną to marnotrawstwo budżetu (Quality Score w Google Ads będzie niższy, co podniesie koszt kliknięcia).
- Promujesz konkretny produkt lub usługę: Jeśli wprowadzasz nowość na rynek, dedykowana strona pozwoli Ci w pełni opowiedzieć historię tego produktu bez rozpraszania uwagi innymi ofertami.
- Zbierasz zapisy na webinar lub wydarzenie: Potrzebujesz prostego mechanizmu rejestracji z licznikiem odliczającym czas, aby wywołać efekt pilności (FOMO).
- Oferujesz Lead Magnet: Ebooki, raporty, darmowe konsultacje – te zasoby wymagają oddzielnych stron przechwytujących (Squeeze Page).
Narzędzia do tworzenia landing page – przegląd rozwiązań
Rynek narzędzi jest obecnie bardzo nasycony. Wybór odpowiedniego zależy od Twoich umiejętności technicznych i budżetu. Nie musisz być programistą, aby stworzyć świetnie wyglądającą stronę.
Szybkość ładowania strony, jaki ma wpływ na konwersję?
Dzisiaj użytkownik daje Ci 3 sekundy. Jeśli strona się nie załaduje, wychodzi. Google oficjalnie mierzy to wskaźnikiem INP (Interaction to Next Paint).
- 🚀 Format zdjęć: Używaj tylko formatu .WebP lub .AVIF (są o 30% lżejsze niż JPG).
- 🚀 Hosting: Unikaj tanich serwerów współdzielonych. Landing Page wymaga szybkiego serwera (np. Cloud/VPS).
- 🚀 Skrypty: Ogranicz zewnętrzne kody śledzące. Każdy dodatkowy pixel Facebooka czy TikToka spowalnia stronę.
Rozwiązania możemy podzielić na dwie główne kategorie:
- Kreatory typu SaaS (Software as a Service): Narzędzia takie jak Unbounce, Leadpages czy polski Landingi. Oferują one intuicyjne edytory „przeciągnij i upuść” (drag & drop), gotowe szablony i wbudowane testy A/B. To najlepszy wybór dla marketerów, którzy chcą działać szybko i niezależnie od działu IT.
- Wtyczki i Page Buildery do CMS (np. WordPress): Elementor, Divi czy Beaver Builder. Pozwalają na budowę landing page’a w ramach istniejącej instalacji WordPress. Jest to rozwiązanie tańsze w dłuższej perspektywie, ale może wymagać nieco więcej konfiguracji technicznej i dbałości o aktualizacje wtyczek.
Wybierając narzędzie, zwróć uwagę na łatwość integracji z Twoim systemem do e-mail marketingu lub CRM. Automatyzacja przesyłania leadów to dziś standard, bez którego trudno skalować sprzedaż.
Najważniejsze wytyczne dotyczące landing page – Optymalizacja techniczna i UX
Nawet najpiękniejszy landing page nie sprzeda, jeśli użytkownik zamknie go przed pełnym załadowaniem. W erze dominacji urządzeń mobilnych aspekty techniczne stają się elementem strategii marketingowej.
Czy wiesz, że…
Największym zabójcą konwersji na Landing Page jest standardowe menu nawigacyjne. LP to nie strona główna – to ścieżka o jednym kierunku.
Dobry Landing Page powinien być pozbawiony linków zewnętrznych, menu i przycisków social media. Każdy taki element to „punkt ucieczki”, który odciąga uwagę od głównego celu: wypełnienia formularza lub zakupu. Twoim zadaniem jest zatrzymanie użytkownika wewnątrz tunelu sprzedażowego aż do momentu konwersji.
Jak szybkość ładowania strony wpływa na wyniki sprzedaży?
Google od lat podkreśla znaczenie Core Web Vitals (Podstawowe Wskaźniki Internetowe). W kontekście landing page’a najważniejszym z nich jest LCP (Largest Contentful Paint), czyli czas potrzebny na wyświetlenie największego elementu w obszarze widocznym na ekranie.
- Szybkość ładowania (LCP): Zredukuj czas ładowania do poniżej 2,5 sekundy, kompresując grafiki do formatu WebP i minimalizując kod JavaScript.
- Wpływ na konwersję: Badania (m.in. Portent) wskazują, że strony ładujące się w 1 sekundę mają trzykrotnie wyższy współczynnik konwersji niż te ładujące się w 5 sekund.

Dlatego w swojej pracy zawsze zaczynam optymalizację od „odchudzenia” strony. Często usunięcie ciężkich skryptów animacji czy wideo w tle przynosi lepsze efekty niż zmiana nagłówka.
Dostosowanie do urządzeń mobilnych (Mobile First)
W wielu branżach, szczególnie w B2C, ruch z urządzeń mobilnych przekracza 70-80%. Projektowanie landing page’a na desktopie, a potem „dostosowywanie” go do mobile to przestarzałe podejście. Należy projektować w duchu Mobile First.
Elementy kluczowe dla mobile:
- Przyciski: Muszą być odpowiednio duże (min. 44×44 piksele), aby łatwo było w nie kliknąć kciukiem.
- Formularze: Powinny automatycznie wywoływać odpowiednią klawiaturę (np. numeryczną przy polu telefonu).
- Sticky CTA: Warto rozważyć przycisk, który jest „przyklejony” do dołu ekranu i podąża za użytkownikiem podczas przewijania.
Analiza danych z landing page i optymalizacja konwersji (CRO)
Opublikowanie landing page’a to nie koniec pracy – to dopiero początek. Prawdziwa walka o wyniki odbywa się na etapie optymalizacji. Bez danych poruszasz się po omacku.
Jakie wskaźniki (KPI) należy monitorować?
Aby ocenić skuteczność strony, musisz wyjść poza proste zliczanie leadów.
- Współczynnik konwersji (Conversion Rate): Procent odwiedzających, którzy wykonali pożądaną akcję. To Twój najważniejszy termometr.
- Współczynnik odrzuceń (Bounce Rate): Jeśli jest wysoki (powyżej 70-80%), może to oznaczać, że treść reklamy nie jest spójna z treścią strony (tzw. Message Match) lub strona ładuje się zbyt wolno.
- Głębokość przewijania (Scroll Depth): Powie Ci, czy użytkownicy w ogóle docierają do kluczowych argumentów sprzedaży umieszczonych niżej na stronie.
- Mapa cieplna (Heatmap): Narzędzia takie jak Hotjar czy Microsoft Clarity pozwalają zobaczyć, gdzie użytkownicy klikają i jak poruszają myszką. Często okazuje się, że klikają w elementy nieaktywne, co jest jasnym sygnałem do poprawy UX.
Testy A/B – jak bezpiecznie eksperymentować z układem strony?
Testy A/B polegają na wyświetlaniu dwóm grupom użytkowników dwóch różnych wersji tej samej strony, aby sprawdzić, która działa lepiej. Kluczem do sukcesu jest testowanie jednej zmiennej na raz. Jeśli zmienisz jednocześnie nagłówek, zdjęcie i kolor przycisku, nie będziesz wiedział, co wpłynęło na wynik.
Co warto testować w pierwszej kolejności?
- Nagłówek (H1): To element o największym wpływie. Zmiana obietnicy w nagłówku potrafi podnieść konwersję o kilkadziesiąt procent.
- Call to Action: Testuj treść przycisku (np. „Kup teraz” vs „Zamów z dostawą”).
- Formularz: Spróbuj usunąć jedno pole i sprawdź, jak wpłynie to na ilość zgłoszeń.
Pamiętaj, że testy wymagają odpowiedniej próby statystycznej. Nie wyciągaj wniosków po 50 wizytach. Potrzebujesz setek, a czasem tysięcy odwiedzin, aby wynik był wiarygodny.
Przykłady zastosowania landing page w różnych branżach
Teoria teorią, ale jak to wygląda w praktyce? Landing page to narzędzie elastyczne, które można dostosować do niemal każdego modelu biznesowego.
E-commerce (Strony produktowe): Zamiast kierować ruch na ogólną kartę produktu w sklepie, stwórz landing page dla bestsellera. Skup się na storytellingu, pokaż unboxing, dodaj wideo z opiniami influencerów. Taka strona często konwertuje lepiej, bo buduje emocjonalną więź z produktem, której brakuje na standardowej karcie sklepu.
Usługi B2B (Lead Generation): Firmy oferujące skomplikowane usługi (np. software house, konsulting) rzadko sprzedają bezpośrednio przez stronę. Tutaj celem landing page’a jest umówienie bezpłatnej konsultacji lub demo. Kluczem jest pokazanie kompetencji poprzez case studies i „logo bar” (logotypy klientów) oraz zminimalizowanie ryzyka po stronie klienta (np. „niezobowiązująca rozmowa”).
Czy wiesz, że…
Ludzie nie kupują produktów, kupują opinie innych ludzi o tych produktach. Brak realnych opinii, logotypów klientów lub wyników liczbowych (Case Studies) na Landing Page’u obniża zaufanie do oferty.
Wykorzystaj społeczny dowód słuszności. Opinia ze zdjęciem i imieniem klienta jest o 70% bardziej wiarygodna niż anonimowy cytat. Pamiętaj, że Landing Page musi działać jako reduktor ryzyka – klient musi czuć, że inni już Ci zaufali i są zadowoleni z tej decyzji.
Webinary i Kursy Online: To klasyka gatunku. Landing page rejestracyjny musi mocno grać na autorytecie prowadzącego (bio, osiągnięcia) oraz na konkretnych efektach edukacyjnych („Czego nauczysz się w 60 minut”). Licznik odliczający czas do startu jest tutaj niemal obowiązkowy, aby zmobilizować niezdecydowanych.
Stworzenie landing page’a, który sprzedaje, wymaga połączenia analitycznego myślenia z empatią wobec użytkownika. To ciągły proces doskonalenia, testowania hipotez i reagowania na dane. Pamiętaj, że nawet najlepszy landing page kiedyś przestanie działać – trendy się zmieniają, a odbiorcy przyzwyczajają się do pewnych schematów (tzw. ślepota banerowa). Dlatego kluczem do długofalowego sukcesu jest nieustanna optymalizacja i trzymanie ręki na pulsie zachowań Twoich klientów.
/* Kontener główny */ .faq-container { background-color: #FAFAFA; padding: 40px; border-radius: 12px; border: 1px solid #e0e0e0; font-family: 'Arial’, sans-serif; max-width: 800px; margin: 30px auto; box-shadow: 0 4px 20px rgba(0,0,0,0.03); } /* Nagłówek */ .faq-header { text-align: center; color: #4285F4; font-size: 24px; margin-bottom: 30px; font-weight: 700; } /* Karta pytania */ .faq-item { background: #fff; margin-bottom: 15px; border-radius: 8px; border: 1px solid #eee; overflow: hidden; transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.02); } /* Hover */ .faq-item:hover { box-shadow: 0 5px 15px rgba(66, 133, 244, 0.1); border-color: #d2e3fc; transform: translateY(-2px); } /* Pytanie */ .faq-summary { padding: 18px 25px; cursor: pointer; font-weight: 600; color: #333; display: flex; justify-content: space-between; align-items: center; list-style: none; } .faq-summary::-webkit-details-marker { display: none; } /* Ikona */ .faq-icon { font-size: 20px; color: #4285F4; transition: transform 0.3s ease; line-height: 1; } details[open] .faq-icon { transform: rotate(180deg); color: #DB4437; } /* Treść */ .faq-content { padding: 0 25px 25px 25px; color: #555; line-height: 1.6; font-size: 15px; border-top: 1px solid transparent; } details[open] .faq-content { border-top: 1px solid #f1f1f1; padding-top: 15px; animation: fadeIn 0.4s ease-out; } /* Kolory */ .h-blue { color: #4285F4; font-weight: bold; } .h-green { color: #0F9D58; font-weight: bold; } .h-red { color: #DB4437; font-weight: bold; } .h-yellow { color: #F4B400; font-weight: bold; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }



