To, co już mamy.
Gotowe do użycia.

Zachowaj kontekst rodziców i pliki wymienione w dokumencie podglądu. Sam fragment HTML bez źródłowego CSS/JS nie odtworzy komponentu. Komplet znajduje się w paczce u góry strony.

<!-- Zachowaj body.lp-redesign, kontekst main i wskazane klasy/ID.
Dołącz w tej kolejności: source-critical.css, landing.css, booking.css, preview.css.
Skopiuj również ui/assets/. Pełny samodzielny dokument: heading.html.
Treści w nawiasach kwadratowych są polami do uzupełnienia.
-->
<main>
<section class="lp-hero" id="hero" aria-labelledby="hero-title">
  <div class="lp-hero-copy">
    <p class="lp-kicker lp-audience-label">[Krótki opis odbiorcy Twojej oferty]</p>
    <h1 id="hero-title">Twój główny nagłówek. <span>Wyróżniona myśl.</span></h1>
    <p class="lp-service"><span class="lp-service-highlight">[Jedno zdanie, które wyjaśnia ofertę odbiorcy.]</span></p>
  </div>
</section>
<section class="lp-section lp-problem" id="problem" aria-labelledby="problem-title">
  <div class="fc-section-marker"><span>[ <b>01</b> / 12 ]</span><span>[Nazwa sekcji]</span><span aria-hidden="true">+</span></div>
  <div class="lp-section-head" data-reveal>
    <h2 id="problem-title">Twój nagłówek sekcji z <span>wyróżnieniem ważnej myśli</span>.</h2>
    <p>[Krótki opis rozwijający tytuł. Wstaw tu potwierdzoną treść oferty.]</p>
  </div>
</section>
</main>

Zachowaj kontekst rodziców i pliki wymienione w dokumencie podglądu. Sam fragment HTML bez źródłowego CSS/JS nie odtworzy komponentu. Komplet znajduje się w paczce u góry strony.

<!-- Zachowaj body.lp-redesign, kontekst main i wskazane klasy/ID.
Dołącz w tej kolejności: source-critical.css, landing.css, booking.css, preview.css.
Skopiuj również ui/assets/. Pełny samodzielny dokument: cta.html.
Treści w nawiasach kwadratowych są polami do uzupełnienia.
Formularz to lokalne demo; dołącz form-demo.js. Niczego nie wysyła.
-->
<main>
<section class="lp-hero" id="hero"><div class="lp-hero-copy"><div class="lp-hero-action"><button class="button" type="button" data-open>Tekst Twojego głównego działania <span aria-hidden="true"><svg class="lucide-arrow-up-right" aria-hidden="true" focusable="false"
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <path d="M7 7h10v10" />
  <path d="M7 17 17 7" />
</svg></span></button><a class="fc-hero-secondary" href="formularz.html">Tekst działania dodatkowego</a></div></div></section>
</main>
<dialog id="lead-dialog" data-preview="true" aria-labelledby="form-title">
      <div class="dialog-top">
        <img src="assets/dealyo-logo.svg" alt="Dealyo" width="120" height="16">
        <button id="close-dialog" class="close-dialog" type="button" aria-label="Zamknij formularz">×</button>
      </div>
      <div class="form-progress" role="progressbar" aria-label="Postęp formularza" aria-valuemin="0" aria-valuemax="4" aria-valuenow="0"><i></i></div>
      <ol class="form-stepper" aria-label="Kroki formularza"></ol>
      <form id="lead-form">
        <div id="form-content"></div>
        <p id="form-error" class="form-error" role="alert" hidden></p>
        <div class="form-actions">
          <button type="button" id="back" class="back-button">← Wstecz</button>
          <button type="submit" class="button" id="next">Dalej <span aria-hidden="true">→</span></button>
        </div>
      </form>
    </dialog>
<script src="form-demo.js" defer></script>

Zachowaj kontekst rodziców i pliki wymienione w dokumencie podglądu. Sam fragment HTML bez źródłowego CSS/JS nie odtworzy komponentu. Komplet znajduje się w paczce u góry strony.

<article class="lpup__card" data-reveal data-delay="2" data-astro-cid-tbq4ueif>
<div class="lpup__panel" aria-hidden="true" data-astro-cid-tbq4ueif>
<div class="lpup__serp" data-astro-cid-tbq4ueif>
<p class="lpup__search" data-astro-cid-tbq4ueif>
<svg viewbox="0 0 16 16" width="16" height="16" fill="none" data-astro-cid-tbq4ueif>
<circle cx="7" cy="7" r="4.5" stroke="currentColor" stroke-width="1.6" data-astro-cid-tbq4ueif>
</circle>
<path d="m10.5 10.500 3 3" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" data-astro-cid-tbq4ueif>
</path>
</svg>[Zapytanie klienta]</p>
<p class="lpup__result lpup__result--you" data-astro-cid-tbq4ueif>
<span class="lpup__rank" data-astro-cid-tbq4ueif>1</span>
<span class="lpup__site" data-astro-cid-tbq4ueif>[Nazwa firmy]</span>
<span class="lpup__badge" data-astro-cid-tbq4ueif>[Wyróżnienie]</span>
</p>
<p class="lpup__result" data-astro-cid-tbq4ueif>
<span class="lpup__rank" data-astro-cid-tbq4ueif>2</span>
<span class="lpup__site" data-astro-cid-tbq4ueif>[Inna firma]</span>
</p>
<p class="lpup__result" data-astro-cid-tbq4ueif>
<span class="lpup__rank" data-astro-cid-tbq4ueif>3</span>
<span class="lpup__site" data-astro-cid-tbq4ueif>[Inna oferta]</span>
</p>
</div>
</div>
<div class="lpup__copy" data-astro-cid-tbq4ueif>
<p class="lpup__tag" data-astro-cid-tbq4ueif>[Obszar oferty]</p>
<h3 class="lpup__title" data-astro-cid-tbq4ueif>[Nazwa usługi]</h3>
<p class="lpup__body" data-astro-cid-tbq4ueif>[Opis usługi: co odbiorca otrzyma i do czego mu to posłuży.]</p>
<ul class="lpup__points" role="list" data-astro-cid-tbq4ueif>
<li class="lpup__point" data-astro-cid-tbq4ueif>
<svg viewbox="0 0 12 12" width="12" height="12" fill="none" aria-hidden="true" data-astro-cid-tbq4ueif>
<path d="M6 2v8M2 6h8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" data-astro-cid-tbq4ueif>
</path>
</svg>
<span data-astro-cid-tbq4ueif>[Pierwszy element zakresu]</span>
</li>
<li class="lpup__point" data-astro-cid-tbq4ueif>
<svg viewbox="0 0 12 12" width="12" height="12" fill="none" aria-hidden="true" data-astro-cid-tbq4ueif>
<path d="M6 2v8M2 6h8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" data-astro-cid-tbq4ueif>
</path>
</svg>
<span data-astro-cid-tbq4ueif>[Drugi element zakresu]</span>
</li>
<li class="lpup__point" data-astro-cid-tbq4ueif>
<svg viewbox="0 0 12 12" width="12" height="12" fill="none" aria-hidden="true" data-astro-cid-tbq4ueif>
<path d="M6 2v8M2 6h8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" data-astro-cid-tbq4ueif>
</path>
</svg>
<span data-astro-cid-tbq4ueif>[Trzeci element zakresu]</span>
</li>
</ul>
<p class="lpup__cost" data-astro-cid-tbq4ueif>[Warunki wyceny]</p>
</div>
</article>

Zachowaj kontekst rodziców i pliki wymienione w dokumencie podglądu. Sam fragment HTML bez źródłowego CSS/JS nie odtworzy komponentu. Komplet znajduje się w paczce u góry strony.

<div class="kpis">
  <div class="kpi"><div class="v">[Wynik]</div><div class="l">[Opis wskaźnika]</div><div class="d up">[Porównanie okresów]</div></div>
  <div class="kpi"><div class="v">[Wynik]</div><div class="l">[Opis wskaźnika]</div><div class="d up">[Porównanie okresów]</div></div>
  <div class="kpi"><div class="v">[Wynik]</div><div class="l">[Opis wskaźnika]</div><div class="d up">[Porównanie okresów]</div></div>
  <div class="kpi"><div class="v">[Wynik]</div><div class="l">[Opis wskaźnika]</div><div class="d up">[Porównanie okresów]</div></div>
</div>

Zachowaj kontekst rodziców i pliki wymienione w dokumencie podglądu. Sam fragment HTML bez źródłowego CSS/JS nie odtworzy komponentu. Komplet znajduje się w paczce u góry strony.

<div class="tbl">
  <table>
    <thead><tr><th>Konto</th><th>Koszt leada [okres bazowy]</th><th>[Okres poprzedni]</th><th>[Okres bieżący]</th><th>Zmiana od [okresu bazowego]</th><th>Leady [okres]</th><th>Wydatek [okres]</th></tr></thead>
    <tbody>
      <tr><td>[Nazwa konta]</td><td>[Wynik]</td><td>[Wynik]</td><td>[Wynik]</td><td><span class="tag good">[Zmiana]</span></td><td>[Wynik]</td><td>[Wynik]</td></tr>
      <tr><td>[Nazwa konta]</td><td>[Wynik]</td><td>[Wynik]</td><td>[Wynik]</td><td><span class="tag good">[Zmiana]</span></td><td>[Wynik]</td><td>[Wynik]</td></tr>
      <tr><td>[Nazwa konta]</td><td>[Wynik]</td><td>[Wynik]</td><td>[Wynik]</td><td><span class="tag good">[Zmiana]</span></td><td>[Wynik]</td><td>[Wynik]</td></tr>
      <tr><td>[Nazwa konta]</td><td>[Status]</td><td>[Wynik]</td><td>[Wynik]</td><td><span class="tag good">[Status]</span></td><td>[Wynik]</td><td>[Wynik]</td></tr>
      <tr class="key"><td>Razem</td><td>[Wynik]</td><td>[Wynik]</td><td>[Wynik]</td><td><span class="tag good">[Zmiana]</span></td><td>[Wynik]</td><td>[Wynik]</td></tr>
    </tbody>
  </table>
</div>

Zachowaj kontekst rodziców i pliki wymienione w dokumencie podglądu. Sam fragment HTML bez źródłowego CSS/JS nie odtworzy komponentu. Komplet znajduje się w paczce u góry strony.

<ol class="lp-start-steps" data-reveal-group data-reveal-directions="left left left left"><li><span>01</span><div><h3>[Pierwszy krok]</h3><p>[Czynność i rezultat tego etapu.]</p></div></li><li><span>02</span><div><h3>[Drugi krok]</h3><p>[Co trzeba przygotować i co dzieje się dalej.]</p></div></li><li><span>03</span><div><h3>[Trzeci krok]</h3><p>[Opis kolejnego etapu procesu.]</p></div></li><li><span>04</span><div><h3>[Czwarty krok]</h3><p>[Rezultat i następny krok odbiorcy.]</p></div></li></ol>

Zachowaj kontekst rodziców i pliki wymienione w dokumencie podglądu. Sam fragment HTML bez źródłowego CSS/JS nie odtworzy komponentu. Komplet znajduje się w paczce u góry strony.

<ol class="lp-method-flow reference-single-scene"><li><span class="lp-flow-no">02</span><div class="lp-method-art process-scene" data-process-scene="method-form" aria-hidden="true"><svg viewBox="0 0 360 230" fill="none" aria-hidden="true">
<g stroke="#eeeeec" stroke-width=".7">
  <path d="M18 42V213"/><path d="M45 42V213"/><path d="M72 42V213"/><path d="M99 42V213"/><path d="M126 42V213"/><path d="M153 42V213"/><path d="M180 42V213"/><path d="M207 42V213"/><path d="M234 42V213"/><path d="M261 42V213"/><path d="M288 42V213"/><path d="M315 42V213"/><path d="M342 42V213"/>
  <path d="M12 51H348"/><path d="M12 78H348"/><path d="M12 105H348"/><path d="M12 132H348"/><path d="M12 159H348"/><path d="M12 186H348"/><path d="M12 213H348"/>
</g>
<path d="M163 185V197H197V185" fill="#f1f2f2" stroke="#454b4f" stroke-width="1.3"/>
<path d="M135 204H225L218 209H142Z" fill="#f1f2f2" stroke="#454b4f" stroke-width="1.3" stroke-linejoin="round"/>
<rect x="30" y="25" width="300" height="160" fill="#fff" stroke="#454b4f" stroke-width="1.3"/>
<rect x="40" y="35" width="280" height="15" fill="#f1f2f2"/>
<circle cx="49" cy="42.5" r="2.2" fill="#fe4a23"/><circle cx="57" cy="42.5" r="2.2" fill="#d5d8d4"/><circle cx="65" cy="42.5" r="2.2" fill="#d5d8d4"/>
<path d="M76 42.5H296" stroke="#d5d8d4" stroke-width="1.2" stroke-linecap="round"/>
<defs><clipPath id="method-monitor-viewport"><rect x="40" y="52" width="280" height="120"/></clipPath></defs>
<g clip-path="url(#method-monitor-viewport)">
  <g class="md-motion md-monitor-page">
    <text x="54" y="69" fill="#222320" font-family="Arial,sans-serif" font-size="8" font-weight="600">Przykładowy nagłówek</text>
    <path d="M54 79H191M54 87H177M54 95H186" stroke="#8c9290" stroke-width="2.2" stroke-linecap="round"/>
    <rect x="246" y="58" width="58" height="41" fill="#fff0e9"/>
    <circle cx="288" cy="69" r="6" fill="#fe4a23"/>
    <path d="M251 94L263 79L272 87L281 75L299 94Z" fill="#f4b5a0"/>
    <path d="M54 108H304" stroke="#dfe2de" stroke-width="1.3"/>
    <rect x="54" y="117" width="110" height="37" fill="#f1f2f2"/>
    <rect x="194" y="117" width="110" height="37" fill="#fff0e9"/>
    <path d="M65 130H149M65 140H134M205 130H289M205 140H274" stroke="#aeb3af" stroke-width="2" stroke-linecap="round"/>
    <g transform="translate(0 56)">
    <text x="54" y="124" fill="#222320" font-family="Arial,sans-serif" font-size="7" font-weight="600">Zostaw kontakt</text>
    <text x="54" y="139" fill="#454b4f" font-family="Arial,sans-serif" font-size="6.5">Imię</text>
    <rect x="54" y="143" width="252" height="15" fill="#fff" stroke="#454b4f" stroke-width="1.1"/>
    <text class="md-motion md-monitor-value-one" x="61" y="153.5" fill="#fe4a23" font-family="Arial,sans-serif" font-size="7">Alicja</text>
    <text x="54" y="166" fill="#454b4f" font-family="Arial,sans-serif" font-size="6.5">E-mail</text>
    <rect x="54" y="170" width="252" height="15" fill="#fff" stroke="#454b4f" stroke-width="1.1"/>
    <text class="md-motion md-monitor-value-two" x="61" y="180.5" fill="#fe4a23" font-family="Arial,sans-serif" font-size="7">kontakt@example.com</text>
    <rect x="54" y="190" width="72" height="18" fill="#fe4a23"/>
    <text x="64" y="202" fill="#fff" font-family="Arial,sans-serif" font-size="7" font-weight="600">Wyślij</text>
    <g class="md-motion md-monitor-sent">
    <rect x="54" y="213" width="88" height="20" fill="#fff0e9" stroke="#fe4a23" stroke-width="1.1"/>
    <path d="M62 222L65 225L71 218" stroke="#fe4a23" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    <text x="76" y="226" fill="#454b4f" font-family="Arial,sans-serif" font-size="7" font-weight="600">Wysłano</text>
    </g>
    </g>
  </g>
</g>
<g transform="translate(87 135)">
  <g class="md-motion md-monitor-cursor">
    <path d="M0 0L0 18L5 13L9 22L13 20L9 11L16 10Z" fill="#fff" stroke="#454b4f" stroke-width="1.3" stroke-linejoin="round"/>
  </g>
  <g class="md-motion md-monitor-click">
    <circle cx="0" cy="0" r="7" fill="none" stroke="#fe4a23" stroke-width="1.4"/>
  </g>
</g>
</svg></div><h3>[Nazwa etapu]</h3><p>[Opis mechanizmu pokazanego na diagramie.]</p></li></ol>

Zachowaj kontekst rodziców i pliki wymienione w dokumencie podglądu. Sam fragment HTML bez źródłowego CSS/JS nie odtworzy komponentu. Komplet znajduje się w paczce u góry strony.

<!-- Zachowaj body.lp-redesign, kontekst main i wskazane klasy/ID.
Dołącz w tej kolejności: source-critical.css, landing.css, booking.css, preview.css.
Skopiuj również ui/assets/. Pełny samodzielny dokument: faq.html.
Treści w nawiasach kwadratowych są polami do uzupełnienia.
Dołącz motion-loader.js oraz disclosure-motion.js dla ruchu FAQ.
-->
<main>
<section class="lp-section lp-faq" id="pytania" aria-labelledby="faq-title">
<div class="fc-section-marker"><span>[ <b>11</b> / 12 ]</span><span>Pytania i odpowiedzi</span><span aria-hidden="true">+</span></div><div class="lp-section-head" data-reveal><h2 id="faq-title">Poznaj odpowiedzi, które pomogą Ci <span>podjąć decyzję</span>.</h2></div><div class="lp-faq-list" data-reveal>
  <details name="dealyo-faq"><summary>Czy [nazwa usługi] obejmuje [zakres współpracy]?<span aria-hidden="true">+</span></summary><p>[Miejsce na potwierdzoną odpowiedź. Wyjaśnij warunki, zakres i kolejny krok prostym językiem. Nie wpisuj obietnic ani wyników, których nie możesz potwierdzić.]</p></details>
  <details name="dealyo-faq"><summary>Jak wygląda [pierwszy etap współpracy]?<span aria-hidden="true">+</span></summary><p>[Miejsce na potwierdzoną odpowiedź. Wyjaśnij warunki, zakres i kolejny krok prostym językiem. Nie wpisuj obietnic ani wyników, których nie możesz potwierdzić.]</p></details>
  <details name="dealyo-faq"><summary>Jakie informacje przygotować przed [spotkaniem]?<span aria-hidden="true">+</span></summary><p>[Miejsce na potwierdzoną odpowiedź. Wyjaśnij warunki, zakres i kolejny krok prostym językiem. Nie wpisuj obietnic ani wyników, których nie możesz potwierdzić.]</p></details>
  <details name="dealyo-faq"><summary>Czy mogę skorzystać z [usługi] w mojej sytuacji?<span aria-hidden="true">+</span></summary><p>[Miejsce na potwierdzoną odpowiedź. Wyjaśnij warunki, zakres i kolejny krok prostym językiem. Nie wpisuj obietnic ani wyników, których nie możesz potwierdzić.]</p></details>
  <details name="dealyo-faq"><summary>Jak przebiega [wybrany element współpracy]?<span aria-hidden="true">+</span></summary><p>[Miejsce na potwierdzoną odpowiedź. Wyjaśnij warunki, zakres i kolejny krok prostym językiem. Nie wpisuj obietnic ani wyników, których nie możesz potwierdzić.]</p></details>
  <details name="dealyo-faq"><summary>Co obejmuje [potwierdzony budżet lub cena]?<span aria-hidden="true">+</span></summary><p>[Miejsce na potwierdzoną odpowiedź. Wyjaśnij warunki, zakres i kolejny krok prostym językiem. Nie wpisuj obietnic ani wyników, których nie możesz potwierdzić.]</p></details>
  <details name="dealyo-faq"><summary>Kto po mojej stronie powinien uczestniczyć w [etapie]?<span aria-hidden="true">+</span></summary><p>[Miejsce na potwierdzoną odpowiedź. Wyjaśnij warunki, zakres i kolejny krok prostym językiem. Nie wpisuj obietnic ani wyników, których nie możesz potwierdzić.]</p></details>
  <details name="dealyo-faq"><summary>Czy mogę wybrać [konkretny zakres usługi]?<span aria-hidden="true">+</span></summary><p>[Miejsce na potwierdzoną odpowiedź. Wyjaśnij warunki, zakres i kolejny krok prostym językiem. Nie wpisuj obietnic ani wyników, których nie możesz potwierdzić.]</p></details>
  <details name="dealyo-faq"><summary>Od czego zależy [rezultat współpracy]?<span aria-hidden="true">+</span></summary><p>[Miejsce na potwierdzoną odpowiedź. Wyjaśnij warunki, zakres i kolejny krok prostym językiem. Nie wpisuj obietnic ani wyników, których nie możesz potwierdzić.]</p></details>
  <details name="dealyo-faq"><summary>Jak długo trwa [potwierdzony etap lub usługa]?<span aria-hidden="true">+</span></summary><p>[Miejsce na potwierdzoną odpowiedź. Wyjaśnij warunki, zakres i kolejny krok prostym językiem. Nie wpisuj obietnic ani wyników, których nie możesz potwierdzić.]</p></details>
</div></section>
</main>

<script src="motion-loader.js" defer></script>

Zachowaj kontekst rodziców i pliki wymienione w dokumencie podglądu. Sam fragment HTML bez źródłowego CSS/JS nie odtworzy komponentu. Komplet znajduje się w paczce u góry strony.

<!-- Zachowaj body.lp-redesign, kontekst main i wskazane klasy/ID.
Dołącz w tej kolejności: source-critical.css, landing.css, booking.css, preview.css.
Skopiuj również ui/assets/. Pełny samodzielny dokument: formularz.html.
Treści w nawiasach kwadratowych są polami do uzupełnienia.
Formularz to lokalne demo; dołącz form-demo.js. Niczego nie wysyła.
-->
<main>
<section class="lp-hero" id="hero"><div class="lp-hero-copy"><div class="lp-hero-action"><button class="button" type="button" data-open>Tekst Twojego głównego działania <span aria-hidden="true"><svg class="lucide-arrow-up-right" aria-hidden="true" focusable="false"
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <path d="M7 7h10v10" />
  <path d="M7 17 17 7" />
</svg></span></button><a class="fc-hero-secondary" href="formularz.html">Tekst działania dodatkowego</a></div></div></section>
</main>
<dialog id="lead-dialog" data-preview="true" aria-labelledby="form-title">
      <div class="dialog-top">
        <img src="assets/dealyo-logo.svg" alt="Dealyo" width="120" height="16">
        <button id="close-dialog" class="close-dialog" type="button" aria-label="Zamknij formularz">×</button>
      </div>
      <div class="form-progress" role="progressbar" aria-label="Postęp formularza" aria-valuemin="0" aria-valuemax="4" aria-valuenow="0"><i></i></div>
      <ol class="form-stepper" aria-label="Kroki formularza"></ol>
      <form id="lead-form">
        <div id="form-content"></div>
        <p id="form-error" class="form-error" role="alert" hidden></p>
        <div class="form-actions">
          <button type="button" id="back" class="back-button">← Wstecz</button>
          <button type="submit" class="button" id="next">Dalej <span aria-hidden="true">→</span></button>
        </div>
      </form>
    </dialog>
<script src="form-demo.js" defer></script>

Zachowaj kontekst rodziców i pliki wymienione w dokumencie podglądu. Sam fragment HTML bez źródłowego CSS/JS nie odtworzy komponentu. Komplet znajduje się w paczce u góry strony.

<section class="sc-scope" id="zakres"><div class="sc-shell"><div class="sc-areas fc-areas" aria-label="Obszary współpracy">
  <article class="sc-area fc-area" data-scope-item="">
  <button class="fc-select" id="fc-scope-trigger-01" type="button" aria-controls="fc-scope-panel-01" aria-expanded="false" hidden="">
    <span class="fc-select-content">
      <span class="fc-category"><span class="fc-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="12" r="7"></circle><circle cx="10" cy="12" r="2.5"></circle><path class="fc-icon-accent" d="m12 10 8-8m-4 0h4v4"></path></svg></span><span>Pozyskiwanie klientów</span></span>
      <span class="fc-select-preview">[Krótki opis obszaru 1.]</span>
    </span>
    <span class="fc-select-chevron" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m7 4 6 6-6 6"></path></svg></span>
  </button>
  <div class="fc-scope-panel" id="fc-scope-panel-01" role="region" aria-labelledby="fc-scope-trigger-01">
    <div class="fc-card-top"><span class="fc-index">01 / 06</span><span class="fc-package">[Dostępne warianty]</span></div>
    <div class="fc-copy">
      <div class="fc-category"><span class="fc-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="12" r="7"></circle><circle cx="10" cy="12" r="2.5"></circle><path class="fc-icon-accent" d="m12 10 8-8m-4 0h4v4"></path></svg></span><span>Pozyskiwanie klientów</span></div>
      <h3 class="fc-heading">[Nagłówek obszaru 1]</h3>
      <p class="fc-lead">[Opis obszaru współpracy. Uzupełnij treścią właściwą dla projektu.]</p>
      <ul class="fc-scope-details"><li class="sb-card sb-card-feature"><span class="sb-art process-scene" data-process-scene="scope-bento" aria-hidden="true"><svg viewBox="0 0 160 90" fill="none" focusable="false"><g class="sb-grid"><path d="M12 10h136M12 30h136M12 50h136M12 70h136M32 10v70M64 10v70M96 10v70M128 10v70"></path></g><rect class="sb-wash" x="14" y="17" width="62" height="56" rx="2"></rect><path class="sb-ink" d="M22 28h28m-28 8h43m-43 8h31"></path><path class="sb-line" d="M22 61h18"></path><path class="sb-accent" d="M86 44h46m-9-9 9 9-9 9"></path><circle class="sb-dot sb-pulse" cx="103" cy="44" r="4"></circle><path class="sb-line" d="M137 26h10v36h-10"></path></svg></span><span class="sb-copy">[Opis elementu 1 pokazanego na ilustracji.]</span></li><li class="sb-card"><span class="sb-art process-scene" data-process-scene="scope-bento" aria-hidden="true"><svg viewBox="0 0 160 90" fill="none" focusable="false"><g class="sb-grid"><path d="M12 10h136M12 30h136M12 50h136M12 70h136M32 10v70M64 10v70M96 10v70M128 10v70"></path></g><path class="sb-ink" d="M37 13h58l18 18v45H37z"></path><path class="sb-line" d="M95 13v18h18M48 42h46m-46 9h36"></path><rect class="sb-wash" x="48" y="59" width="33" height="10"></rect><path class="sb-accent sb-reveal" d="M49 64h30"></path><path class="sb-line" d="M121 27h18v38h-18"></path><circle class="sb-dot sb-flow" cx="128" cy="46" r="3"></circle></svg></span><span class="sb-copy">[Opis elementu 2 pokazanego na ilustracji.]</span></li><li class="sb-card"><span class="sb-art process-scene" data-process-scene="scope-bento" aria-hidden="true"><svg viewBox="0 0 160 90" fill="none" focusable="false"><g class="sb-grid"><path d="M12 10h136M12 30h136M12 50h136M12 70h136M32 10v70M64 10v70M96 10v70M128 10v70"></path></g><rect class="sb-paper" x="28" y="11" width="76" height="68" rx="2"></rect><circle class="sb-line" cx="40" cy="27" r="4"></circle><path class="sb-line" d="M51 27h39M36 42h58M36 55h58M36 68h39"></path><path class="sb-accent sb-scan" d="M33 39h65"></path></svg></span><span class="sb-copy">[Opis elementu 3 pokazanego na ilustracji.]</span></li><li class="sb-card"><span class="sb-art process-scene" data-process-scene="scope-bento" aria-hidden="true"><svg viewBox="0 0 160 90" fill="none" focusable="false"><g class="sb-grid"><path d="M12 10h136M12 30h136M12 50h136M12 70h136M32 10v70M64 10v70M96 10v70M128 10v70"></path></g><path class="sb-ink" d="M30 16h100L92 47v25l-24 8V47z"></path><path class="sb-line" d="M44 25h72M53 34h54"></path><circle class="sb-dot sb-flow" cx="47" cy="21" r="3"></circle><circle class="sb-dot sb-flow" cx="76" cy="30" r="3" style="--sb-delay:-.7s"></circle><circle class="sb-dot sb-flow" cx="102" cy="39" r="3" style="--sb-delay:-1.4s"></circle><path class="sb-accent" d="M80 51v18m-5-5 5 5 5-5"></path></svg></span><span class="sb-copy">[Opis elementu 4 pokazanego na ilustracji.]</span></li><li class="sb-card"><span class="sb-art process-scene" data-process-scene="scope-bento" aria-hidden="true"><svg viewBox="0 0 160 90" fill="none" focusable="false"><g class="sb-grid"><path d="M12 10h136M12 30h136M12 50h136M12 70h136M32 10v70M64 10v70M96 10v70M128 10v70"></path></g><rect class="sb-paper" x="16" y="19" width="128" height="52" rx="2"></rect><circle class="sb-wash" cx="38" cy="39" r="11"></circle><path class="sb-ink" d="M32 39a6 6 0 0 1 12 0m-15 17a9 9 0 0 1 18 0"></path><path class="sb-line" d="M59 32h46m-46 9h35M59 55h54"></path><path class="sb-accent" d="M121 31h12v12"></path><path class="sb-accent sb-flow" d="M118 45h14"></path></svg></span><span class="sb-copy">[Opis elementu 5 pokazanego na ilustracji.]</span></li></ul>
      <p class="fc-scope-range">[Zakres danego wariantu — uzupełnij po ustaleniu oferty.]</p>
    </div>
  </div>
  </article>

  <article class="sc-area fc-area" data-scope-item="">
  <button class="fc-select" id="fc-scope-trigger-02" type="button" aria-controls="fc-scope-panel-02" aria-expanded="false" hidden="">
    <span class="fc-select-content">
      <span class="fc-category"><span class="fc-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16v12H9l-5 4z"></path><path d="M8 9h8m-8 4h5"></path><path class="fc-icon-accent" d="M17 2v4m-2-2h4"></path></svg></span><span>Marketing</span></span>
      <span class="fc-select-preview">[Krótki opis obszaru 2.]</span>
    </span>
    <span class="fc-select-chevron" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m7 4 6 6-6 6"></path></svg></span>
  </button>
  <div class="fc-scope-panel" id="fc-scope-panel-02" role="region" aria-labelledby="fc-scope-trigger-02">
    <div class="fc-card-top"><span class="fc-index">02 / 06</span><span class="fc-package">[Dostępne warianty]</span></div>
    <div class="fc-copy">
      <div class="fc-category"><span class="fc-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16v12H9l-5 4z"></path><path d="M8 9h8m-8 4h5"></path><path class="fc-icon-accent" d="M17 2v4m-2-2h4"></path></svg></span><span>Marketing</span></div>
      <h3 class="fc-heading">[Nagłówek obszaru 2]</h3>
      <p class="fc-lead">[Opis obszaru współpracy. Uzupełnij treścią właściwą dla projektu.]</p>
      <ul class="fc-scope-details"><li class="sb-card sb-card-feature"><span class="sb-art process-scene" data-process-scene="scope-bento" aria-hidden="true"><svg viewBox="0 0 160 90" fill="none" focusable="false"><g class="sb-grid"><path d="M12 10h136M12 30h136M12 50h136M12 70h136M32 10v70M64 10v70M96 10v70M128 10v70"></path></g><rect class="sb-paper" x="18" y="22" width="31" height="42"></rect><rect class="sb-paper" x="64" y="16" width="31" height="48"></rect><rect class="sb-wash" x="110" y="22" width="31" height="42"></rect><path class="sb-line" d="M25 31h17m-17 7h12M71 26h17m-17 7h17M117 31h17m-17 7h12"></path><path class="sb-accent" d="M34 69h91m-8-5 8 5-8 5"></path><circle class="sb-dot sb-flow" cx="51" cy="69" r="3"></circle></svg></span><span class="sb-copy">[Opis elementu 1 pokazanego na ilustracji.]</span></li><li class="sb-card"><span class="sb-art process-scene" data-process-scene="scope-bento" aria-hidden="true"><svg viewBox="0 0 160 90" fill="none" focusable="false"><g class="sb-grid"><path d="M12 10h136M12 30h136M12 50h136M12 70h136M32 10v70M64 10v70M96 10v70M128 10v70"></path></g><circle class="sb-wash" cx="79" cy="45" r="13"></circle><path class="sb-ink" d="M73 42a6 6 0 1 1 9 5c-3 2-3 3-3 5m0 5v1"></path><path class="sb-line" d="M66 38 42 23m25 31L42 67m52-29 24-15m-24 36 24 15"></path><circle class="sb-paper" cx="35" cy="19" r="7"></circle><circle class="sb-paper" cx="35" cy="71" r="7"></circle><circle class="sb-paper" cx="125" cy="19" r="7"></circle><circle class="sb-paper" cx="125" cy="71" r="7"></circle><circle class="sb-dot sb-pulse" cx="125" cy="19" r="3"></circle></svg></span><span class="sb-copy">[Opis elementu 2 pokazanego na ilustracji.]</span></li><li class="sb-card"><span class="sb-art process-scene" data-process-scene="scope-bento" aria-hidden="true"><svg viewBox="0 0 160 90" fill="none" focusable="false"><g class="sb-grid"><path d="M12 10h136M12 30h136M12 50h136M12 70h136M32 10v70M64 10v70M96 10v70M128 10v70"></path></g><path class="sb-wash" d="M27 22q26-10 51 2v47q-25-12-51-2z"></path><path class="sb-paper" d="M78 24q26-12 53-2v47q-27-10-53 2z"></path><path class="sb-line" d="M38 34q16-5 31 1m-31 9q16-5 31 1m-31 9q16-5 31 1m21-20q16-6 31-2m-31 11q16-6 31-2m-31 11q16-6 31-2"></path><path class="sb-accent sb-draw" pathLength="100" d="m99 59 5 5 11-13"></path></svg></span><span class="sb-copy">[Opis elementu 3 pokazanego na ilustracji.]</span></li><li class="sb-card"><span class="sb-art process-scene" data-process-scene="scope-bento" aria-hidden="true"><svg viewBox="0 0 160 90" fill="none" focusable="false"><g class="sb-grid"><path d="M12 10h136M12 30h136M12 50h136M12 70h136M32 10v70M64 10v70M96 10v70M128 10v70"></path></g><rect class="sb-paper" x="31" y="18" width="72" height="59" rx="2"></rect><path class="sb-ink" d="M31 32h72m-53-20v12m34-12v12"></path><path class="sb-line" d="M43 43h9m9 0h9m9 0h9m-36 12h9m9 0h9"></path><rect class="sb-wash sb-pulse" x="76" y="51" width="13" height="13"></rect><path class="sb-accent" d="M115 28a19 19 0 0 1 0 27m5-33a27 27 0 0 1 0 39"></path></svg></span><span class="sb-copy">[Opis elementu 4 pokazanego na ilustracji.]</span></li><li class="sb-card"><span class="sb-art process-scene" data-process-scene="scope-bento" aria-hidden="true"><svg viewBox="0 0 160 90" fill="none" focusable="false"><g class="sb-grid"><path d="M12 10h136M12 30h136M12 50h136M12 70h136M32 10v70M64 10v70M96 10v70M128 10v70"></path></g><path class="sb-line" d="M22 46h116"></path><circle class="sb-paper" cx="35" cy="46" r="10"></circle><circle class="sb-paper" cx="79" cy="46" r="10"></circle><circle class="sb-wash" cx="123" cy="46" r="10"></circle><path class="sb-accent" d="M35 46h88"></path><circle class="sb-dot sb-sequence" cx="35" cy="46" r="4"></circle><circle class="sb-dot sb-sequence" cx="79" cy="46" r="4" style="--sb-delay:-1.1s"></circle><circle class="sb-dot sb-sequence" cx="123" cy="46" r="4" style="--sb-delay:-2.2s"></circle><path class="sb-line" d="M35 31v-9m44 9v-9m44 9v-9"></path></svg></span><span class="sb-copy">[Opis elementu 5 pokazanego na ilustracji.]</span></li></ul>
      <p class="fc-scope-range">[Zakres danego wariantu — uzupełnij po ustaleniu oferty.]</p>
    </div>
  </div>
  </article>

  <article class="sc-area fc-area" data-scope-item="">
  <button class="fc-select" id="fc-scope-trigger-03" type="button" aria-controls="fc-scope-panel-03" aria-expanded="false" hidden="">
    <span class="fc-select-content">
      <span class="fc-category"><span class="fc-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 11a7 7 0 0 1-7 7H7l-4 3v-8a7 7 0 0 1 7-7h3a7 7 0 0 1 7 7Z"></path><path d="M8 10h7m-7 4h4"></path><path class="fc-icon-accent" d="M17 3h4m-2-2v4"></path></svg></span><span>Sprzedaż</span></span>
      <span class="fc-select-preview">[Krótki opis obszaru 3.]</span>
    </span>
    <span class="fc-select-chevron" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m7 4 6 6-6 6"></path></svg></span>
  </button>
  <div class="fc-scope-panel" id="fc-scope-panel-03" role="region" aria-labelledby="fc-scope-trigger-03">
    <div class="fc-card-top"><span class="fc-index">03 / 06</span><span class="fc-package">[Dostępne warianty]</span></div>
    <div class="fc-copy">
      <div class="fc-category"><span class="fc-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 11a7 7 0 0 1-7 7H7l-4 3v-8a7 7 0 0 1 7-7h3a7 7 0 0 1 7 7Z"></path><path d="M8 10h7m-7 4h4"></path><path class="fc-icon-accent" d="M17 3h4m-2-2v4"></path></svg></span><span>Sprzedaż</span></div>
      <h3 class="fc-heading">[Nagłówek obszaru 3]</h3>
      <p class="fc-lead">[Opis obszaru współpracy. Uzupełnij treścią właściwą dla projektu.]</p>
      <ul class="fc-scope-details"><li class="sb-card sb-card-feature"><span class="sb-art process-scene" data-process-scene="scope-bento" aria-hidden="true"><svg viewBox="0 0 160 90" fill="none" focusable="false"><g class="sb-grid"><path d="M12 10h136M12 30h136M12 50h136M12 70h136M32 10v70M64 10v70M96 10v70M128 10v70"></path></g><path class="sb-paper" d="M16 20h75v35H45L31 66v-11h-15z"></path><path class="sb-line" d="M28 32h48m-48 9h37"></path><path class="sb-wash" d="M75 43h68v29H98l-12 9v-9h-11z"></path><path class="sb-line" d="M88 54h43m-43 9h31"></path><circle class="sb-dot sb-flow" cx="84" cy="47" r="3"></circle></svg></span><span class="sb-copy">[Opis elementu 1 pokazanego na ilustracji.]</span></li><li class="sb-card"><span class="sb-art process-scene" data-process-scene="scope-bento" aria-hidden="true"><svg viewBox="0 0 160 90" fill="none" focusable="false"><g class="sb-grid"><path d="M12 10h136M12 30h136M12 50h136M12 70h136M32 10v70M64 10v70M96 10v70M128 10v70"></path></g><path class="sb-wash" d="M26 25h62l38 20-38 20H26z"></path><circle class="sb-paper" cx="43" cy="45" r="4"></circle><path class="sb-ink" d="M69 36c-7-6-17 0-10 7 2 2 10 2 10 6 0 6-9 7-15 2m8-19v28"></path><path class="sb-accent sb-reveal" d="M55 72h49"></path><path class="sb-line" d="M106 72h19"></path></svg></span><span class="sb-copy">[Opis elementu 2 pokazanego na ilustracji.]</span></li><li class="sb-card"><span class="sb-art process-scene" data-process-scene="scope-bento" aria-hidden="true"><svg viewBox="0 0 160 90" fill="none" focusable="false"><g class="sb-grid"><path d="M12 10h136M12 30h136M12 50h136M12 70h136M32 10v70M64 10v70M96 10v70M128 10v70"></path></g><path class="sb-paper" d="M23 29h100l15 16-15 16H23l-12-16z"></path><circle class="sb-line" cx="31" cy="45" r="2"></circle><circle class="sb-line" cx="115" cy="45" r="2"></circle><circle class="sb-wash" cx="72" cy="45" r="16"></circle><path class="sb-accent" d="m65 52 14-14"></path><circle class="sb-dot sb-pulse" cx="65" cy="38" r="3.5"></circle><circle class="sb-dot" cx="79" cy="52" r="3.5"></circle></svg></span><span class="sb-copy">[Opis elementu 3 pokazanego na ilustracji.]</span></li><li class="sb-card"><span class="sb-art process-scene" data-process-scene="scope-bento" aria-hidden="true"><svg viewBox="0 0 160 90" fill="none" focusable="false"><g class="sb-grid"><path d="M12 10h136M12 30h136M12 50h136M12 70h136M32 10v70M64 10v70M96 10v70M128 10v70"></path></g><path class="sb-paper" d="M15 18h73v39H42L28 68V57H15z"></path><path class="sb-ink" d="M50 28a8 8 0 1 1 11 7c-4 2-4 4-4 7m0 6v1"></path><path class="sb-wash" d="M91 37h55v36h-35l-11 8v-8H91z"></path><path class="sb-line" d="M103 50h31m-31 9h22"></path><path class="sb-accent sb-flow" d="M78 48h17"></path></svg></span><span class="sb-copy">[Opis elementu 4 pokazanego na ilustracji.]</span></li><li class="sb-card"><span class="sb-art process-scene" data-process-scene="scope-bento" aria-hidden="true"><svg viewBox="0 0 160 90" fill="none" focusable="false"><g class="sb-grid"><path d="M12 10h136M12 30h136M12 50h136M12 70h136M32 10v70M64 10v70M96 10v70M128 10v70"></path></g><circle class="sb-wash" cx="31" cy="45" r="15"></circle><path class="sb-line" d="M25 45h12m-6-6 6 6-6 6"></path><path class="sb-accent" d="M48 45h57m-9-9 9 9-9 9"></path><rect class="sb-paper" x="111" y="24" width="31" height="42"></rect><path class="sb-ink" d="M111 35h31m-23-17v12m15-12v12"></path><path class="sb-line" d="M119 45h6m7 0h5m-18 9h18"></path><circle class="sb-dot sb-flow" cx="66" cy="45" r="3"></circle></svg></span><span class="sb-copy">[Opis elementu 5 pokazanego na ilustracji.]</span></li></ul>
      <p class="fc-scope-range">[Zakres danego wariantu — uzupełnij po ustaleniu oferty.]</p>
    </div>
  </div>
  </article>

  <article class="sc-area fc-area" data-scope-item="">
  <button class="fc-select" id="fc-scope-trigger-04" type="button" aria-controls="fc-scope-panel-04" aria-expanded="false" hidden="">
    <span class="fc-select-content">
      <span class="fc-category"><span class="fc-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="3" width="14" height="18" rx="1"></rect><path d="M9 3V2h6v1m-7 8 2 2 4-4"></path><path class="fc-icon-accent" d="M9 17h6"></path></svg></span><span>Obsługa po sprzedaży</span></span>
      <span class="fc-select-preview">[Krótki opis obszaru 4.]</span>
    </span>
    <span class="fc-select-chevron" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m7 4 6 6-6 6"></path></svg></span>
  </button>
  <div class="fc-scope-panel" id="fc-scope-panel-04" role="region" aria-labelledby="fc-scope-trigger-04">
    <div class="fc-card-top"><span class="fc-index">04 / 06</span><span class="fc-package">[Dostępne warianty]</span></div>
    <div class="fc-copy">
      <div class="fc-category"><span class="fc-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="3" width="14" height="18" rx="1"></rect><path d="M9 3V2h6v1m-7 8 2 2 4-4"></path><path class="fc-icon-accent" d="M9 17h6"></path></svg></span><span>Obsługa po sprzedaży</span></div>
      <h3 class="fc-heading">[Nagłówek obszaru 4]</h3>
      <p class="fc-lead">[Opis obszaru współpracy. Uzupełnij treścią właściwą dla projektu.]</p>
      <ul class="fc-scope-details"><li class="sb-card sb-card-feature"><span class="sb-art process-scene" data-process-scene="scope-bento" aria-hidden="true"><svg viewBox="0 0 160 90" fill="none" focusable="false"><g class="sb-grid"><path d="M12 10h136M12 30h136M12 50h136M12 70h136M32 10v70M64 10v70M96 10v70M128 10v70"></path></g><path class="sb-paper" d="M46 12h66v66H46z"></path><path class="sb-line" d="M58 25h42m-42 9h32"></path><circle class="sb-wash" cx="79" cy="55" r="15"></circle><path class="sb-accent sb-draw" pathLength="100" d="m70 55 6 6 12-14"></path><path class="sb-line" d="m62 68-4 12 10-5m28-7 4 12-10-5"></path></svg></span><span class="sb-copy">[Opis elementu 1 pokazanego na ilustracji.]</span></li><li class="sb-card"><span class="sb-art process-scene" data-process-scene="scope-bento" aria-hidden="true"><svg viewBox="0 0 160 90" fill="none" focusable="false"><g class="sb-grid"><path d="M12 10h136M12 30h136M12 50h136M12 70h136M32 10v70M64 10v70M96 10v70M128 10v70"></path></g><path class="sb-line" d="M42 18v53"></path><circle class="sb-paper" cx="42" cy="23" r="8"></circle><circle class="sb-paper" cx="42" cy="45" r="8"></circle><circle class="sb-wash" cx="42" cy="67" r="8"></circle><path class="sb-line" d="M57 23h57m-57 22h44m-44 22h53"></path><path class="sb-accent sb-reveal" d="M57 23h52"></path><path class="sb-accent sb-reveal" d="M57 45h37" style="--sb-delay:-.6s"></path><path class="sb-accent sb-reveal" d="M57 67h46" style="--sb-delay:-1.2s"></path></svg></span><span class="sb-copy">[Opis elementu 2 pokazanego na ilustracji.]</span></li><li class="sb-card"><span class="sb-art process-scene" data-process-scene="scope-bento" aria-hidden="true"><svg viewBox="0 0 160 90" fill="none" focusable="false"><g class="sb-grid"><path d="M12 10h136M12 30h136M12 50h136M12 70h136M32 10v70M64 10v70M96 10v70M128 10v70"></path></g><rect class="sb-paper" x="16" y="27" width="42" height="36"></rect><rect class="sb-wash" x="102" y="27" width="42" height="36"></rect><path class="sb-line" d="M25 37h24m-24 9h18m-18 9h20m44-18h24m-24 9h18m-18 9h20"></path><path class="sb-accent" d="M62 45h34m-8-7 8 7-8 7"></path><circle class="sb-dot sb-flow" cx="70" cy="45" r="3"></circle></svg></span><span class="sb-copy">[Opis elementu 3 pokazanego na ilustracji.]</span></li><li class="sb-card"><span class="sb-art process-scene" data-process-scene="scope-bento" aria-hidden="true"><svg viewBox="0 0 160 90" fill="none" focusable="false"><g class="sb-grid"><path d="M12 10h136M12 30h136M12 50h136M12 70h136M32 10v70M64 10v70M96 10v70M128 10v70"></path></g><circle class="sb-wash" cx="47" cy="43" r="24"></circle><path class="sb-ink" d="M40 37a7 7 0 1 1 10 7c-4 2-4 4-4 7m0 5v1"></path><rect class="sb-paper" x="82" y="19" width="61" height="54"></rect><path class="sb-line" d="M92 32h42m-42 10h42m-42 10h32m-32 10h38"></path><path class="sb-accent sb-scan" d="M89 30h47"></path></svg></span><span class="sb-copy">[Opis elementu 4 pokazanego na ilustracji.]</span></li><li class="sb-card"><span class="sb-art process-scene" data-process-scene="scope-bento" aria-hidden="true"><svg viewBox="0 0 160 90" fill="none" focusable="false"><g class="sb-grid"><path d="M12 10h136M12 30h136M12 50h136M12 70h136M32 10v70M64 10v70M96 10v70M128 10v70"></path></g><circle class="sb-wash" cx="44" cy="31" r="10"></circle><path class="sb-ink" d="M27 66a17 17 0 0 1 34 0"></path><circle class="sb-paper" cx="116" cy="31" r="10"></circle><path class="sb-ink" d="M99 66a17 17 0 0 1 34 0"></path><path class="sb-line" d="M80 17v54"></path><path class="sb-accent" d="M64 44h32m-7-6 7 6-7 6"></path><circle class="sb-dot sb-pulse" cx="80" cy="44" r="4"></circle></svg></span><span class="sb-copy">[Opis elementu 5 pokazanego na ilustracji.]</span></li></ul>
      <p class="fc-scope-range">[Zakres danego wariantu — uzupełnij po ustaleniu oferty.]</p>
    </div>
  </div>
  </article>

  <article class="sc-area fc-area" data-scope-item="">
  <button class="fc-select" id="fc-scope-trigger-05" type="button" aria-controls="fc-scope-panel-05" aria-expanded="false" hidden="">
    <span class="fc-select-content">
      <span class="fc-category"><span class="fc-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="6" height="6"></rect><rect x="15" y="15" width="6" height="6"></rect><path d="M9 6h6a3 3 0 0 1 3 3v6M6 9v6a3 3 0 0 0 3 3h6"></path><path class="fc-icon-accent" d="M6 5v2m-1-1h2m11 11v2m-1-1h2"></path></svg></span><span>AI i automatyzacje</span></span>
      <span class="fc-select-preview">[Krótki opis obszaru 5.]</span>
    </span>
    <span class="fc-select-chevron" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m7 4 6 6-6 6"></path></svg></span>
  </button>
  <div class="fc-scope-panel" id="fc-scope-panel-05" role="region" aria-labelledby="fc-scope-trigger-05">
    <div class="fc-card-top"><span class="fc-index">05 / 06</span><span class="fc-package">[Dostępne warianty]</span></div>
    <div class="fc-copy">
      <div class="fc-category"><span class="fc-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="6" height="6"></rect><rect x="15" y="15" width="6" height="6"></rect><path d="M9 6h6a3 3 0 0 1 3 3v6M6 9v6a3 3 0 0 0 3 3h6"></path><path class="fc-icon-accent" d="M6 5v2m-1-1h2m11 11v2m-1-1h2"></path></svg></span><span>AI i automatyzacje</span></div>
      <h3 class="fc-heading">[Nagłówek obszaru 5]</h3>
      <p class="fc-lead">[Opis obszaru współpracy. Uzupełnij treścią właściwą dla projektu.]</p>
      <ul class="fc-scope-details"><li class="sb-card sb-card-feature"><span class="sb-art process-scene" data-process-scene="scope-bento" aria-hidden="true"><svg viewBox="0 0 160 90" fill="none" focusable="false"><g class="sb-grid"><path d="M12 10h136M12 30h136M12 50h136M12 70h136M32 10v70M64 10v70M96 10v70M128 10v70"></path></g><rect class="sb-paper" x="25" y="12" width="43" height="67" rx="2"></rect><rect class="sb-wash" x="32" y="20" width="29" height="12"></rect><path class="sb-line" d="M34 42h5m8 0h5m8 0h1M34 53h5m8 0h5m8 0h1M34 64h5m8 0h5m8 0h1"></path><path class="sb-line" d="M86 65V46h13v19m8 0V35h13v30m8 0V22h13v43"></path><path class="sb-accent sb-reveal" d="M90 66V48h5m8 18V37h5m8 29V24h5"></path></svg></span><span class="sb-copy">[Opis elementu 1 pokazanego na ilustracji.]</span></li><li class="sb-card"><span class="sb-art process-scene" data-process-scene="scope-bento" aria-hidden="true"><svg viewBox="0 0 160 90" fill="none" focusable="false"><g class="sb-grid"><path d="M12 10h136M12 30h136M12 50h136M12 70h136M32 10v70M64 10v70M96 10v70M128 10v70"></path></g><path class="sb-wash" d="M80 12 119 27v21c0 17-16 27-39 34C57 75 41 65 41 48V27z"></path><path class="sb-line" d="m54 44 12 12 34-31"></path><path class="sb-accent sb-draw" pathLength="100" d="m54 44 12 12 34-31"></path><path class="sb-line" d="M24 25h10m-10 40h10"></path></svg></span><span class="sb-copy">[Opis elementu 2 pokazanego na ilustracji.]</span></li><li class="sb-card"><span class="sb-art process-scene" data-process-scene="scope-bento" aria-hidden="true"><svg viewBox="0 0 160 90" fill="none" focusable="false"><g class="sb-grid"><path d="M12 10h136M12 30h136M12 50h136M12 70h136M32 10v70M64 10v70M96 10v70M128 10v70"></path></g><rect class="sb-paper" x="36" y="11" width="89" height="68"></rect><path class="sb-line" d="M57 27h53m-53 18h53m-53 18h53"></path><rect class="sb-wash" x="45" y="21" width="9" height="9"></rect><rect class="sb-wash" x="45" y="39" width="9" height="9"></rect><rect class="sb-wash" x="45" y="57" width="9" height="9"></rect><path class="sb-accent sb-sequence" d="m47 25 2 2 4-5m-6 21 2 2 4-5m-6 21 2 2 4-5"></path></svg></span><span class="sb-copy">[Opis elementu 3 pokazanego na ilustracji.]</span></li><li class="sb-card"><span class="sb-art process-scene" data-process-scene="scope-bento" aria-hidden="true"><svg viewBox="0 0 160 90" fill="none" focusable="false"><g class="sb-grid"><path d="M12 10h136M12 30h136M12 50h136M12 70h136M32 10v70M64 10v70M96 10v70M128 10v70"></path></g><path class="sb-paper" d="M34 12h52l18 18v49H34z"></path><path class="sb-line" d="M86 12v18h18M46 42h44m-44 10h44m-44 10h31"></path><path class="sb-accent" d="M108 51h31m-8-7 8 7-8 7"></path><circle class="sb-dot sb-flow" cx="117" cy="51" r="3"></circle></svg></span><span class="sb-copy">[Opis elementu 4 pokazanego na ilustracji.]</span></li><li class="sb-card"><span class="sb-art process-scene" data-process-scene="scope-bento" aria-hidden="true"><svg viewBox="0 0 160 90" fill="none" focusable="false"><g class="sb-grid"><path d="M12 10h136M12 30h136M12 50h136M12 70h136M32 10v70M64 10v70M96 10v70M128 10v70"></path></g><rect class="sb-paper" x="18" y="17" width="92" height="54"></rect><path class="sb-ink" d="M54 79h20m-10-8v8"></path><path class="sb-line" d="M30 30h28m-28 9h45m-45 9h35"></path><circle class="sb-wash" cx="84" cy="43" r="13"></circle><circle class="sb-dot sb-pulse" cx="84" cy="43" r="4"></circle><path class="sb-accent" d="m111 30 16-9m-16 45 16 9m5-27h16"></path><circle class="sb-dot sb-sequence" cx="130" cy="21" r="3"></circle><circle class="sb-dot sb-sequence" cx="130" cy="75" r="3" style="--sb-delay:-.8s"></circle></svg></span><span class="sb-copy">[Opis elementu 5 pokazanego na ilustracji.]</span></li></ul>
      <p class="fc-scope-range">[Zakres danego wariantu — uzupełnij po ustaleniu oferty.]</p>
    </div>
  </div>
  </article>

  <article class="sc-area fc-area" data-scope-item="">
  <button class="fc-select" id="fc-scope-trigger-06" type="button" aria-controls="fc-scope-panel-06" aria-expanded="false" hidden="">
    <span class="fc-select-content">
      <span class="fc-category"><span class="fc-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18M7 16v-4m5 4V8m5 8V5"></path><path class="fc-icon-accent" d="M15 5h4"></path></svg></span><span>Analiza wyników</span></span>
      <span class="fc-select-preview">[Krótki opis obszaru 6.]</span>
    </span>
    <span class="fc-select-chevron" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m7 4 6 6-6 6"></path></svg></span>
  </button>
  <div class="fc-scope-panel" id="fc-scope-panel-06" role="region" aria-labelledby="fc-scope-trigger-06">
    <div class="fc-card-top"><span class="fc-index">06 / 06</span><span class="fc-package">[Dostępne warianty]</span></div>
    <div class="fc-copy">
      <div class="fc-category"><span class="fc-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18M7 16v-4m5 4V8m5 8V5"></path><path class="fc-icon-accent" d="M15 5h4"></path></svg></span><span>Analiza wyników</span></div>
      <h3 class="fc-heading">[Nagłówek obszaru 6]</h3>
      <p class="fc-lead">[Opis obszaru współpracy. Uzupełnij treścią właściwą dla projektu.]</p>
      <ul class="fc-scope-details"><li class="sb-card sb-card-feature"><span class="sb-art process-scene" data-process-scene="scope-bento" aria-hidden="true"><svg viewBox="0 0 160 90" fill="none" focusable="false"><g class="sb-grid"><path d="M12 10h136M12 30h136M12 50h136M12 70h136M32 10v70M64 10v70M96 10v70M128 10v70"></path></g><rect class="sb-paper" x="13" y="24" width="47" height="42"></rect><rect class="sb-paper" x="100" y="24" width="47" height="42"></rect><path class="sb-line" d="M21 36h31m-31 9h22M108 36h31m-31 9h22"></path><circle class="sb-wash" cx="36" cy="56" r="4"></circle><circle class="sb-wash" cx="123" cy="56" r="4"></circle><path class="sb-accent" d="M62 39h31m-8-7 8 7-8 7m-31 15h31m-8-7 8 7-8 7"></path><rect class="sb-wash" x="68" y="39" width="24" height="20"></rect><circle class="sb-dot sb-pulse" cx="80" cy="49" r="4"></circle></svg></span><span class="sb-copy">[Opis elementu 1 pokazanego na ilustracji.]</span></li><li class="sb-card"><span class="sb-art process-scene" data-process-scene="scope-bento" aria-hidden="true"><svg viewBox="0 0 160 90" fill="none" focusable="false"><g class="sb-grid"><path d="M12 10h136M12 30h136M12 50h136M12 70h136M32 10v70M64 10v70M96 10v70M128 10v70"></path></g><path class="sb-line" d="M24 68h54V23M31 59V48h8v11m7 0V39h8v20m7 0V31h8v28"></path><path class="sb-accent sb-reveal" d="M35 59V50h3m7 9V41h3m7 18V33h3"></path><circle class="sb-wash" cx="116" cy="45" r="25"></circle><path class="sb-ink" d="M116 20v7m25 18h-7m-18 25v-7m-25-18h7"></path><path class="sb-accent" d="m105 45 8 8 15-18"></path></svg></span><span class="sb-copy">[Opis elementu 2 pokazanego na ilustracji.]</span></li><li class="sb-card"><span class="sb-art process-scene" data-process-scene="scope-bento" aria-hidden="true"><svg viewBox="0 0 160 90" fill="none" focusable="false"><g class="sb-grid"><path d="M12 10h136M12 30h136M12 50h136M12 70h136M32 10v70M64 10v70M96 10v70M128 10v70"></path></g><path class="sb-line" d="M20 72h122M29 72V51h15v21m14 0V41h15v31m14 0V31h15v41"></path><path class="sb-accent" d="m28 43 25-10 20-9 24 1 23-12m-8 0 8 0v8"></path><circle class="sb-dot sb-flow" cx="78" cy="25" r="3.5"></circle><rect class="sb-wash" x="111" y="44" width="25" height="22"></rect><path class="sb-line" d="M116 51h15m-15 7h10"></path></svg></span><span class="sb-copy">[Opis elementu 3 pokazanego na ilustracji.]</span></li><li class="sb-card"><span class="sb-art process-scene" data-process-scene="scope-bento" aria-hidden="true"><svg viewBox="0 0 160 90" fill="none" focusable="false"><g class="sb-grid"><path d="M12 10h136M12 30h136M12 50h136M12 70h136M32 10v70M64 10v70M96 10v70M128 10v70"></path></g><rect class="sb-paper" x="24" y="16" width="72" height="61"></rect><path class="sb-ink" d="M24 31h72m-52-21v13m32-13v13"></path><path class="sb-line" d="M37 42h9m12 0h9m12 0h9m-40 14h9m12 0h9"></path><rect class="sb-wash" x="66" y="51" width="15" height="15"></rect><path class="sb-accent sb-draw" pathLength="100" d="m69 58 4 4 7-9"></path><circle class="sb-line" cx="122" cy="47" r="17"></circle><path class="sb-accent" d="M122 36v12l8 5"></path></svg></span><span class="sb-copy">[Opis elementu 4 pokazanego na ilustracji.]</span></li><li class="sb-card"><span class="sb-art process-scene" data-process-scene="scope-bento" aria-hidden="true"><svg viewBox="0 0 160 90" fill="none" focusable="false"><g class="sb-grid"><path d="M12 10h136M12 30h136M12 50h136M12 70h136M32 10v70M64 10v70M96 10v70M128 10v70"></path></g><path class="sb-line" d="M49 25h82m-82 20h67m-67 20h49"></path><path class="sb-wash" d="M24 17h14v16H24z"></path><path class="sb-paper" d="M24 37h14v16H24zM24 57h14v16H24z"></path><path class="sb-accent" d="m27 26 3 3 6-8"></path><path class="sb-accent sb-reveal" d="M51 25h75"></path><path class="sb-accent sb-hop" d="M136 16v20m-5-5 5 5 5-5"></path><circle class="sb-dot sb-pulse" cx="120" cy="65" r="4"></circle></svg></span><span class="sb-copy">[Opis elementu 5 pokazanego na ilustracji.]</span></li></ul>
      <p class="fc-scope-range">[Zakres danego wariantu — uzupełnij po ustaleniu oferty.]</p>
    </div>
  </div>
  </article>
</div></div></section>

Zachowaj kontekst rodziców i pliki wymienione w dokumencie podglądu. Sam fragment HTML bez źródłowego CSS/JS nie odtworzy komponentu. Komplet znajduje się w paczce u góry strony.

<section class="lp-section lp-results" id="wyniki"><div class="lp-results-grid" data-reveal-group="" data-reveal-directions="left up right up">
    <article class="lp-result-main"><p class="lp-kicker">[Nazwa wskaźnika]</p><div class="lp-before-after"><div class="lp-cost-before"><span>Przed zmianą</span><strong>— <small>zł</small></strong></div><span class="lp-big-arrow" aria-hidden="true"><svg class="lp-arrow-icon" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></span><div class="lp-cost-after"><span class="lp-cost-after-label"><img src="assets/dealyo-mark.svg" alt="" width="22" height="16" aria-hidden="true">Po zmianie</span><strong>— <small>zł</small></strong></div></div><p>[Opis porównania. Wpisz potwierdzone dane i okres pomiaru.]</p></article>
    <article class="lp-result-leads"><p class="lp-kicker">[Wskaźnik porównawczy]</p><strong> — <span aria-hidden="true"><svg class="lp-arrow-icon" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></span> — </strong><div class="lp-ratio"><span>Przed</span><i style="--ratio: 100%;"></i><span>Po</span><i style="--ratio:100%"></i></div><p class="lp-result-summary"><img src="assets/dealyo-mark.svg" alt="" width="24" height="18" aria-hidden="true"><span>[Uzupełnij opis wyniku na podstawie zweryfikowanych danych.]</span></p></article>
    
    
  </div></section>
<p class="reference-demo-note">Pola do uzupełnienia. Wstaw potwierdzone dane, jednostki, okres porównania i źródło.</p>

Zachowaj kontekst rodziców i pliki wymienione w dokumencie podglądu. Sam fragment HTML bez źródłowego CSS/JS nie odtworzy komponentu. Komplet znajduje się w paczce u góry strony.

<section class="lp-section" id="metoda"><div class="lp-section-head" data-reveal=""><div class="process-field" data-process-scene="background" aria-hidden="true"><span style="--field-x:1%;--field-y:30%;--field-delay:-0.0s">· + ·<br> + ·</span><span style="--field-x:7%;--field-y:60%;--field-delay:-0.53s">· + ·<br> + ·</span><span style="--field-x:13%;--field-y:15%;--field-delay:-1.06s">· + ·<br> + ·</span><span style="--field-x:18%;--field-y:72%;--field-delay:-1.59s">· + ·<br> + ·</span><span style="--field-x:4%;--field-y:85%;--field-delay:-2.12s">· + ·<br> + ·</span><span style="--field-x:21%;--field-y:42%;--field-delay:-2.6500000000000004s">· + ·<br> + ·</span><span style="--field-x:76%;--field-y:20%;--field-delay:-3.18s">· + ·<br> + ·</span><span style="--field-x:82%;--field-y:65%;--field-delay:-3.71s">· + ·<br> + ·</span><span style="--field-x:90%;--field-y:40%;--field-delay:-4.24s">· + ·<br> + ·</span><span style="--field-x:95%;--field-y:75%;--field-delay:-4.7700000000000005s">· + ·<br> + ·</span><span style="--field-x:87%;--field-y:88%;--field-delay:-5.300000000000001s">· + ·<br> + ·</span><span style="--field-x:79%;--field-y:45%;--field-delay:-5.83s">· + ·<br> + ·</span></div><h2 id="method-title">[Nagłówek <span>sekcji</span>]</h2><p>[Opis sekcji. Delikatne znaki i kropkowane pole w tle pochodzą z aktualnego audytu.]</p></div></section>

Zachowaj kontekst rodziców i pliki wymienione w dokumencie podglądu. Sam fragment HTML bez źródłowego CSS/JS nie odtworzy komponentu. Komplet znajduje się w paczce u góry strony.

<section id="metoda" class="lp-section reference-scene-stage"><ol class="lp-method-flow reference-single-scene"><li><span class="lp-flow-no">01</span><div class="lp-method-art process-scene" data-process-scene="method-ads" aria-hidden="true"><svg viewBox="0 0 360 230" fill="none" aria-hidden="true"><g stroke="#eeeeec" stroke-width=".7"><path d="M18 42V213"></path><path d="M45 42V213"></path><path d="M72 42V213"></path><path d="M99 42V213"></path><path d="M126 42V213"></path><path d="M153 42V213"></path><path d="M180 42V213"></path><path d="M207 42V213"></path><path d="M234 42V213"></path><path d="M261 42V213"></path><path d="M288 42V213"></path><path d="M315 42V213"></path><path d="M342 42V213"></path><path d="M12 51H348"></path><path d="M12 78H348"></path><path d="M12 105H348"></path><path d="M12 132H348"></path><path d="M12 159H348"></path><path d="M12 186H348"></path><path d="M12 213H348"></path></g><g transform="translate(48 110) rotate(-18 42 59)"><g class="ps-deck-card" style="--deck-delay:0s"><rect width="85" height="119" fill="#fff" stroke="#454b4f" stroke-width="1.3"></rect><rect x="10" y="12" width="65" height="58" fill="#f1f2f2"></rect><circle cx="61" cy="28" r="8" fill="#c1c5c7"></circle><path d="M11 67L30 39L43 54L53 45L72 67Z" fill="#b9bdc0"></path><path d="M12 83H70" stroke="#b9bdc0" stroke-width="3" stroke-linecap="round"></path><path d="M12 94H54" stroke="#dadcdd" stroke-width="2.8" stroke-linecap="round"></path></g></g><g transform="translate(105 94) rotate(-9 42 59)"><g class="ps-deck-card" style="--deck-delay:3s"><rect width="85" height="119" fill="#fff" stroke="#fe4a23" stroke-width="1.3"></rect><rect x="10" y="12" width="65" height="58" fill="#fff0e9"></rect><path d="M33 29L54 41L33 54Z" fill="#fe4a23"></path><path d="M12 83H70" stroke="#fe4a23" stroke-width="3" stroke-linecap="round"></path><path d="M12 94H54" stroke="#ffd8c9" stroke-width="2.8" stroke-linecap="round"></path></g></g><g transform="translate(252 110) rotate(18 42 59)"><g class="ps-deck-card" style="--deck-delay:9s"><rect width="85" height="119" fill="#fff" stroke="#454b4f" stroke-width="1.3"></rect><rect x="10" y="12" width="65" height="58" fill="#f1f2f2"></rect><circle cx="43" cy="41" r="17" fill="#c1c5c7"></circle><path d="M12 83H70" stroke="#b9bdc0" stroke-width="3" stroke-linecap="round"></path><path d="M12 94H54" stroke="#dadcdd" stroke-width="2.8" stroke-linecap="round"></path></g></g><g transform="translate(195 94) rotate(9 42 59)"><g class="ps-deck-card" style="--deck-delay:6s"><rect width="85" height="119" fill="#fff" stroke="#fe4a23" stroke-width="1.3"></rect><rect x="10" y="12" width="65" height="58" fill="#fff0e9"></rect><path d="M24 60V48H34V60ZM39 60V37H49V60ZM54 60V23H64V60Z" fill="#fe4a23"></path><path d="M12 83H70" stroke="#fe4a23" stroke-width="3" stroke-linecap="round"></path><path d="M12 94H54" stroke="#ffd8c9" stroke-width="2.8" stroke-linecap="round"></path></g></g><g transform="translate(150 81) rotate(0 42 59)"><g class="ps-deck-card" style="--deck-delay:12s"><rect width="85" height="119" fill="#fff" stroke="#454b4f" stroke-width="1.3"></rect><rect x="10" y="12" width="65" height="58" fill="#f1f2f2"></rect><circle cx="61" cy="28" r="8" fill="#c1c5c7"></circle><path d="M11 67L32 37L47 56L57 48L74 67Z" fill="#b9bdc0"></path><path d="M12 83H70" stroke="#b9bdc0" stroke-width="3" stroke-linecap="round"></path><path d="M12 94H54" stroke="#dadcdd" stroke-width="2.8" stroke-linecap="round"></path></g></g></svg></div><h3>Reklama</h3><p>[Opis etapu przedstawionego na ilustracji.]</p></li></ol></section>

Zachowaj kontekst rodziców i pliki wymienione w dokumencie podglądu. Sam fragment HTML bez źródłowego CSS/JS nie odtworzy komponentu. Komplet znajduje się w paczce u góry strony.

<section id="metoda" class="lp-section reference-scene-stage"><ol class="lp-method-flow reference-single-scene"><li><span class="lp-flow-no">03</span><div class="lp-method-art process-scene" data-process-scene="method-conversation" aria-hidden="true"><svg viewBox="0 0 360 230" fill="none" aria-hidden="true">
<g stroke="#eeeeec" stroke-width=".7">
  <path d="M18 42V213"></path><path d="M45 42V213"></path><path d="M72 42V213"></path><path d="M99 42V213"></path><path d="M126 42V213"></path><path d="M153 42V213"></path><path d="M180 42V213"></path><path d="M207 42V213"></path><path d="M234 42V213"></path><path d="M261 42V213"></path><path d="M288 42V213"></path><path d="M315 42V213"></path><path d="M342 42V213"></path>
  <path d="M12 51H348"></path><path d="M12 78H348"></path><path d="M12 105H348"></path><path d="M12 132H348"></path><path d="M12 159H348"></path><path d="M12 186H348"></path><path d="M12 213H348"></path>
</g>
<g transform="translate(116 31) rotate(-8 53 81)">
  <rect width="106" height="162" fill="#fff" stroke="#454b4f" stroke-width="1.3"></rect>
  <path d="M38 12H68" stroke="#454b4f" stroke-width="2" stroke-linecap="round"></path>
  <path d="M32 77C33 55 49 40 70 40C91 40 106 55 106 77" stroke="#e1e3e1" stroke-width="1.3"></path>
  <path d="M27 68C29 63 33 60 38 60H44L52 76L45 82C49 90 55 96 63 100L69 93L85 101V107C85 112 81 116 76 116C51 116 30 95 27 70V68Z" fill="#fe4a23"></path>
  <path d="M39 140H67" stroke="#aeb3af" stroke-width="2" stroke-linecap="round"></path>
</g>
<g transform="translate(14 91) rotate(-4 84 49)">
  <g class="md-motion md-message-question">
    <rect width="168" height="98" fill="#fff" stroke="#454b4f" stroke-width="1.3"></rect>
    <circle cx="20" cy="22" r="12" fill="#eceeed"></circle>
    <path d="M16 20C16 16 23 15 24 20C24 23 20 24 20 27" stroke="#777d7b" stroke-width="2" stroke-linecap="round"></path>
    <circle cx="20" cy="32" r="1.4" fill="#777d7b"></circle>
    <path d="M43 19H137M43 29H117" stroke="#8c9290" stroke-width="2.6" stroke-linecap="round"></path>
    <path d="M17 55H147M17 68H115" stroke="#b7bcba" stroke-width="3" stroke-linecap="round"></path>
    <path d="M17 81H86" stroke="#d6d9d7" stroke-width="2.4" stroke-linecap="round"></path>
  </g>
</g>
<g transform="translate(171 77) rotate(4 87 57)">
  <g class="md-motion md-message-reply">
    <rect width="174" height="116" fill="#fff0e9" stroke="#454b4f" stroke-width="1.3"></rect>
    <circle cx="20" cy="21" r="7" fill="#fe4a23"></circle>
    <path d="M36 18H149M36 28H126" stroke="#d4a091" stroke-width="2.6" stroke-linecap="round"></path>
    <path d="M17 53H144M17 66H117" stroke="#d4a091" stroke-width="3" stroke-linecap="round"></path>
    <path d="M17 81H91" stroke="#e1b6a9" stroke-width="2.4" stroke-linecap="round"></path>
    <circle cx="145" cy="88" r="17" fill="#fe4a23"></circle>
    <path d="M137 88L143 94L154 81" stroke="#fff" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"></path>
  </g>
</g>
</svg></div><h3>Pierwsza rozmowa</h3><p>[Opis etapu przedstawionego na ilustracji.]</p></li></ol></section>

Zachowaj kontekst rodziców i pliki wymienione w dokumencie podglądu. Sam fragment HTML bez źródłowego CSS/JS nie odtworzy komponentu. Komplet znajduje się w paczce u góry strony.

<section id="metoda" class="lp-section reference-scene-stage"><ol class="lp-method-flow reference-single-scene"><li><span class="lp-flow-no">04</span><div class="lp-method-art process-scene" data-process-scene="method-meeting" aria-hidden="true"><svg viewBox="0 0 360 230" fill="none" aria-hidden="true">
<g stroke="#eeeeec" stroke-width=".7">
  <path d="M18 42V213"></path><path d="M45 42V213"></path><path d="M72 42V213"></path><path d="M99 42V213"></path><path d="M126 42V213"></path><path d="M153 42V213"></path><path d="M180 42V213"></path><path d="M207 42V213"></path><path d="M234 42V213"></path><path d="M261 42V213"></path><path d="M288 42V213"></path><path d="M315 42V213"></path><path d="M342 42V213"></path>
  <path d="M12 51H348"></path><path d="M12 78H348"></path><path d="M12 105H348"></path><path d="M12 132H348"></path><path d="M12 159H348"></path><path d="M12 186H348"></path><path d="M12 213H348"></path>
</g>
<g transform="translate(22 43) rotate(-6 88 80)">
  <rect width="177" height="160" fill="#fff" stroke="#454b4f" stroke-width="1.3"></rect>
  <path d="M0 30H177" stroke="#454b4f" stroke-width="1.3"></path>
  <path d="M36 4V20M141 4V20" stroke="#454b4f" stroke-width="2" stroke-linecap="round"></path>
  <path d="M16 46H161" stroke="#dfe2de" stroke-width="1.2"></path>
  <rect x="14" y="55" width="27" height="24" fill="#f1f2f2"></rect><rect x="51" y="55" width="27" height="24" fill="#f1f2f2"></rect><rect x="88" y="55" width="27" height="24" fill="#f1f2f2"></rect><rect x="125" y="55" width="27" height="24" fill="#f1f2f2"></rect>
  <rect x="14" y="87" width="27" height="24" fill="#f1f2f2"></rect><rect x="51" y="87" width="27" height="24" fill="#f1f2f2"></rect><rect x="88" y="87" width="27" height="24" fill="#f1f2f2"></rect><rect x="125" y="87" width="27" height="24" fill="#f1f2f2"></rect>
  <rect x="14" y="119" width="27" height="24" fill="#f1f2f2"></rect><rect x="51" y="119" width="27" height="24" fill="#f1f2f2"></rect><rect x="88" y="119" width="27" height="24" fill="#f1f2f2"></rect><rect x="125" y="119" width="27" height="24" fill="#f1f2f2"></rect>
  <g transform="translate(88 119)">
    <g class="md-motion md-date-tile">
      <rect x="0" y="0" width="27" height="24" fill="#fe4a23"></rect>
      <path d="M8 12H19" stroke="#fff" stroke-width="2.4" stroke-linecap="round"></path>
    </g>
  </g>
</g>
<g transform="translate(156 35) rotate(4 90 85)">
  <g class="md-motion md-agreement">
    <rect width="180" height="171" fill="#fff" stroke="#454b4f" stroke-width="1.3"></rect>
    <path d="M0 27H180" stroke="#454b4f" stroke-width="1.3"></path>
    <circle cx="19" cy="14" r="5" fill="#fe4a23"></circle>
    <path d="M32 14H89" stroke="#aeb3af" stroke-width="2.5" stroke-linecap="round"></path>
    <path d="M17 48H157M17 62H143M17 76H153" stroke="#8c9290" stroke-width="2.7" stroke-linecap="round"></path>
    <path d="M17 94H129M17 108H115" stroke="#b7bcba" stroke-width="2.4" stroke-linecap="round"></path>
    <path d="M17 132H99" stroke="#d6d9d7" stroke-width="2.2" stroke-linecap="round"></path>
    <g class="md-motion md-agreement-seal">
      <image href="assets/dealyo-mark.svg" x="121" y="117" width="44" height="44"></image>
    </g>
  </g>
</g>
</svg></div><h3>Spotkanie i deal</h3><p>[Opis etapu przedstawionego na ilustracji.]</p></li></ol></section>

Zachowaj kontekst rodziców i pliki wymienione w dokumencie podglądu. Sam fragment HTML bez źródłowego CSS/JS nie odtworzy komponentu. Komplet znajduje się w paczce u góry strony.

<section id="problem" class="lp-section reference-scene-stage"><div class="lp-loss-grid reference-single-scene"><article><div class="lp-problem-art process-scene" data-process-scene="problem-mismatch" aria-hidden="true"><svg viewBox="0 0 360 180" fill="none" aria-hidden="true"><defs><clipPath id="problem-mismatch-ascii-clip" class="fp-boundary"><rect class="fp-boundary" x="8" y="8" width="344" height="164" rx="14"></rect></clipPath></defs>
<g class="fp-boundary" clip-path="url(#problem-mismatch-ascii-clip)">
  <g class="md-motion md-problem-ascii md-problem-ascii-mismatch" opacity=".28" fill="#dadcda" font-family="ui-monospace,SFMono-Regular,Consolas,monospace" font-size="8.5" letter-spacing="1">
  <text x="12" y="20">+ . : = - . + : = - . + : = - . +</text>
  <text x="12" y="33">. : = - + . : = - + . : = - + . :</text>
  <text x="12" y="46">: = - . + : = - . + : = - . + : =</text>
  <text x="12" y="59">= - . + : = - . + : = - . + : = -</text>
  <text x="12" y="72">- . + : = - . + : = - . + : = - .</text>
  <text x="12" y="85">. + : = - . + : = - . + : = - . +</text>
  <text x="12" y="98">+ : = - . + : = - . + : = - . + :</text>
  <text x="12" y="111">: = - . + : = - . + : = - . + : =</text>
  <text x="12" y="124">= . + : = - . + : = - . + : = - .</text>
  <text x="12" y="137">. + : = - . + : = - . + : = - . +</text>
  <text x="14" y="169" fill="#fe4a23" opacity=".58">+ . : = - +</text><text x="284" y="169" fill="#fe4a23" opacity=".58">. + : = -</text>
</g>
</g>



<rect x="34" y="19" width="294" height="120" rx="13" fill="#1d1d1d" opacity=".035"></rect>
<rect class="fp-frame" x="33" y="15" width="294" height="120" rx="13" fill="#fff" stroke="#e7e7e7"></rect>

<rect x="34" y="16" width="292" height="27" rx="12" fill="#fafafa"></rect>
<path d="M34 42H326" stroke="#e7e7e7"></path>
<circle cx="51" cy="29" r="3" fill="#e7e7e7"></circle><circle cx="62" cy="29" r="3" fill="#e7e7e7"></circle><circle cx="73" cy="29" r="3" fill="#e7e7e7"></circle>
<rect x="91" y="22" width="169" height="14" rx="7" fill="#fff" stroke="#ededed"></rect>
<circle cx="296" cy="29" r="5" stroke="#aeb3af" stroke-width="1.2"></circle><path d="M300 33L304 37" stroke="#aeb3af" stroke-width="1.2" stroke-linecap="round"></path>
<text x="108" y="65" fill="#303030" font-size="16" font-family="General,Arial,sans-serif" font-weight="600">Nasza firma</text>
<text x="108" y="82" fill="#666" font-size="12" font-family="General,Arial,sans-serif">Historia i zespół</text>
<path d="M108 91H281M108 97H258" stroke="#e7e7e7" stroke-width="2" stroke-linecap="round"></path>
<rect x="133" y="103" width="94" height="23" rx="11.5" fill="#fe4a23"></rect>
<text x="180" y="119" text-anchor="middle" fill="#fff" font-size="12" font-family="General,Arial,sans-serif" font-weight="600">Wycena</text>
<g transform="translate(84 30)"><g class="md-motion md-mismatch-cursor" opacity="0">
  <path d="M96 84L96 99L100 95L104 103L107 101L103 93L110 93L96 84Z" fill="#fff" stroke="#454b4f" stroke-width="1.3" stroke-linejoin="round"></path>
</g></g>
<g class="md-motion md-mismatch-status" opacity="1">
  <rect x="111" y="146" width="138" height="26" rx="13" fill="#fff" stroke="#e7e7e7"></rect>
  <circle cx="128" cy="159" r="7" fill="#fe4a23"></circle><path d="M125.5 156.5L130.5 161.5M130.5 156.5L125.5 161.5" stroke="#fff" stroke-width="1.4" stroke-linecap="round"></path>
  <text x="142" y="163" fill="#303030" font-size="12" font-family="ui-monospace,SFMono-Regular,Consolas,monospace">Brak oferty</text>
</g>
</svg></div><h3>[Nagłówek problemu]</h3><p>[Opis sytuacji przedstawionej na ilustracji.]</p></article></div></section>

Zachowaj kontekst rodziców i pliki wymienione w dokumencie podglądu. Sam fragment HTML bez źródłowego CSS/JS nie odtworzy komponentu. Komplet znajduje się w paczce u góry strony.

<section id="problem" class="lp-section reference-scene-stage"><div class="lp-loss-grid reference-single-scene"><article><div class="lp-problem-art process-scene" data-process-scene="problem-delay" aria-hidden="true"><svg viewBox="0 0 360 180" fill="none" aria-hidden="true"><defs><clipPath id="problem-delay-ascii-clip" class="fp-boundary"><rect class="fp-boundary" x="8" y="8" width="344" height="164" rx="14"></rect></clipPath></defs>
<g class="fp-boundary" clip-path="url(#problem-delay-ascii-clip)">
  <g class="md-motion md-problem-ascii md-problem-ascii-delay" opacity=".27" fill="#dadcda" font-family="ui-monospace,SFMono-Regular,Consolas,monospace" font-size="8.5" letter-spacing="1">
  <text x="12" y="20">. + : = - . + : = - . + : = - . +</text>
  <text x="12" y="33">+ : = - . + : = - . + : = - . + :</text>
  <text x="12" y="46">: - . + : = - . + : = - . + : = -</text>
  <text x="12" y="59">= . + : = - . + : = - . + : = - .</text>
  <text x="12" y="72">- + . : = - + . : = - + . : = - +</text>
  <text x="12" y="85">. : = - + . : = - + . : = - + . :</text>
  <text x="12" y="98">+ . : = - . + : = - . + : = - . +</text>
  <text x="12" y="111">: = - . + : = - . + : = - . + : =</text>
  <text x="12" y="124">= - . + : = - . + : = - . + : = -</text>
  <text x="12" y="137">. + : = - . + : = - . + : = - . +</text>
  <text x="14" y="169" fill="#fe4a23" opacity=".58">+ . : = - +</text><text x="284" y="169" fill="#fe4a23" opacity=".58">. + : = -</text>
</g>
</g>
<rect x="48" y="16" width="178" height="124" rx="18" fill="#1d1d1d" opacity=".035"></rect>
<rect class="fp-frame" x="46" y="12" width="178" height="124" rx="18" fill="#fff" stroke="#e7e7e7"></rect>

<rect x="57" y="23" width="156" height="102" rx="12" fill="#fcfcfc" stroke="#f0f0f0"></rect>
<text x="73" y="45" fill="#666" font-size="11.5" font-family="General,Arial,sans-serif">Nowe zgłoszenie</text>
<g class="md-motion md-delay-notice" opacity="1">
  <circle cx="81" cy="68" r="12" fill="#fff1ec"></circle>
  <g transform="translate(81 68) scale(.65) translate(-85 -73)"><path d="M76 68L80 64L84 68L81 71L87 77L90 74L94 78L91 82C83 80 77 74 76 68Z" fill="#fe4a23"></path></g>
  <text x="103" y="68" fill="#222320" font-size="15" font-family="General,Arial,sans-serif" font-weight="600">Marta</text>
  <text x="73" y="94" fill="#666" font-size="12" font-family="General,Arial,sans-serif">Prosi o kontakt</text>
  <path d="M73 106H191" stroke="#e7e7e7" stroke-width="1.2"></path>
</g>
<circle class="md-motion md-delay-badge" cx="197" cy="48" r="5" fill="#fe4a23" opacity="1"></circle>
<circle cx="278" cy="62" r="26" fill="#fff" stroke="#e7e7e7"></circle>
<path d="M278 39V44M278 80V85M255 62H260M296 62H301M262 46L266 50M290 74L294 78M294 46L290 50M266 74L262 78" stroke="#d5d7d5" stroke-width="1.1"></path>
<g transform="translate(278 62)"><g class="md-motion md-delay-clock-hand" style="transform-box:view-box;transform-origin:0 0">
  <path d="M0 0V-16" stroke="#fe4a23" stroke-width="2" stroke-linecap="round"></path>
</g></g>
<circle cx="278" cy="62" r="2.5" fill="#fe4a23"></circle>
<text x="251" y="101" fill="#666" font-size="11.5" font-family="ui-monospace,SFMono-Regular,Consolas,monospace">Później</text>
<g class="md-motion md-delay-call" opacity="1">
  <circle cx="278" cy="119" r="13" fill="#fff5f1" stroke="#ffe0d5"></circle>
  <path d="M272 117L275 114L279 118L277 120L281 124L284 122L288 125L285 128C279 127 274 122 272 117Z" fill="#fe4a23"></path>
  <path d="M292 114C295 117 295 121 292 124" stroke="#fe4a23" stroke-width="1.3" stroke-linecap="round"></path>
  <text x="233" y="140" fill="#666" font-size="11" font-family="General,Arial,sans-serif">Oddzwaniasz</text>
</g>
<g class="md-motion md-delay-missed" opacity="1">
  <rect x="108" y="147" width="144" height="25" rx="12.5" fill="#fff" stroke="#e7e7e7"></rect>
  <circle cx="125" cy="159.5" r="7" fill="#fe4a23"></circle><path d="M122.5 157L127.5 162M127.5 157L122.5 162" stroke="#fff" stroke-width="1.4" stroke-linecap="round"></path>
  <text x="140" y="163.5" fill="#303030" font-size="12" font-family="ui-monospace,SFMono-Regular,Consolas,monospace">Nieodebrane</text>
</g>
</svg></div><h3>[Nagłówek problemu]</h3><p>[Opis sytuacji przedstawionej na ilustracji.]</p></article></div></section>

Zachowaj kontekst rodziców i pliki wymienione w dokumencie podglądu. Sam fragment HTML bez źródłowego CSS/JS nie odtworzy komponentu. Komplet znajduje się w paczce u góry strony.

<section id="problem" class="lp-section reference-scene-stage"><div class="lp-loss-grid reference-single-scene"><article><div class="lp-problem-art process-scene" data-process-scene="problem-no-next-step" aria-hidden="true"><svg viewBox="0 0 360 180" fill="none" aria-hidden="true"><defs><clipPath id="problem-next-ascii-clip" class="fp-boundary"><rect class="fp-boundary" x="8" y="8" width="344" height="164" rx="14"></rect></clipPath></defs>
<g class="fp-boundary" clip-path="url(#problem-next-ascii-clip)">
  <g class="md-motion md-problem-ascii md-problem-ascii-next" opacity=".27" fill="#dadcda" font-family="ui-monospace,SFMono-Regular,Consolas,monospace" font-size="8.5" letter-spacing="1">
  <text x="12" y="20">+ : = - . + : = - . + : = - . + :</text>
  <text x="12" y="33">. + : = - . + : = - . + : = - . +</text>
  <text x="12" y="46">: = - . + : = - . + : = - . + : =</text>
  <text x="12" y="59">= . + : = - . + : = - . + : = - .</text>
  <text x="12" y="72">- . + : = - . + : = - . + : = - . +</text>
  <text x="12" y="85">+ . : = - + . : = - + . : = - + .</text>
  <text x="12" y="98">. : = - + . : = - + . : = - + . : =</text>
  <text x="12" y="111">: + . = - : + . = - : + . = - : + .</text>
  <text x="12" y="124">= - . + : = - . + : = - . + : = -</text>
  <text x="12" y="137">. + : = - . + : = - . + : = - . +</text>
  <text x="14" y="169" fill="#fe4a23" opacity=".58">+ . : = - +</text><text x="284" y="169" fill="#fe4a23" opacity=".58">. + : = -</text>
</g>
</g>
<rect x="31" y="17" width="300" height="124" rx="14" fill="#1d1d1d" opacity=".035"></rect>
<rect class="fp-frame" x="29" y="13" width="302" height="124" rx="14" fill="#fff" stroke="#e7e7e7"></rect>

<text x="49" y="34" fill="#303030" font-size="12" font-family="General,Arial,sans-serif" font-weight="600">Kalendarz</text>
<g class="md-motion md-next-message-one" opacity="1">
  <rect x="48" y="43" width="123" height="22" rx="11" fill="#fff" stroke="#e7e7e7"></rect>
  <text x="59" y="58" fill="#555" font-size="11" font-family="General,Arial,sans-serif">Czy czwartek?</text>
</g>
<g class="md-motion md-next-message-two" opacity="1">
  <rect x="184" y="43" width="128" height="22" rx="11" fill="#fff5f1" stroke="#ffe0d5"></rect>
  <text x="195" y="58" fill="#555" font-size="11" font-family="General,Arial,sans-serif">Sprawdzę termin</text>
</g>
<path d="M51 84H309M51 109H309M51 134H309M51 84V134M103 84V134M155 84V134M207 84V134M259 84V134M309 84V134" stroke="#e7e7e7" stroke-width="1"></path>
<g class="md-motion md-next-slot-highlight" opacity="0">
  <rect x="208" y="85" width="51" height="24" rx="5" fill="#fff3ee" stroke="#fe4a23" stroke-width="1.2"></rect>
</g>
<text x="67" y="78" fill="#777" font-size="11" font-family="General,Arial,sans-serif">PN</text><text x="119" y="78" fill="#777" font-size="11" font-family="General,Arial,sans-serif">WT</text><text x="171" y="78" fill="#777" font-size="11" font-family="General,Arial,sans-serif">ŚR</text><text x="223" y="78" fill="#777" font-size="11" font-family="General,Arial,sans-serif">CZ</text><text x="275" y="78" fill="#777" font-size="11" font-family="General,Arial,sans-serif">PT</text>
<text x="69" y="102" fill="#555" font-size="11" font-family="General,Arial,sans-serif">10</text><text x="121" y="102" fill="#555" font-size="11" font-family="General,Arial,sans-serif">11</text><text x="173" y="102" fill="#555" font-size="11" font-family="General,Arial,sans-serif">12</text><text x="225" y="102" fill="#555" font-size="11" font-family="General,Arial,sans-serif">13</text><text x="277" y="102" fill="#555" font-size="11" font-family="General,Arial,sans-serif">14</text>
<text x="69" y="127" fill="#888" font-size="11" font-family="General,Arial,sans-serif">17</text><text x="121" y="127" fill="#888" font-size="11" font-family="General,Arial,sans-serif">18</text><text x="173" y="127" fill="#888" font-size="11" font-family="General,Arial,sans-serif">19</text><text x="225" y="127" fill="#888" font-size="11" font-family="General,Arial,sans-serif">20</text><text x="277" y="127" fill="#888" font-size="11" font-family="General,Arial,sans-serif">21</text>
<g class="md-motion md-next-empty" opacity="1">
  <rect x="111" y="147" width="138" height="25" rx="12.5" fill="#fff" stroke="#e7e7e7"></rect>
  <circle cx="128" cy="159.5" r="7" fill="#fe4a23"></circle><path d="M125.5 157L130.5 162M130.5 157L125.5 162" stroke="#fff" stroke-width="1.4" stroke-linecap="round"></path>
  <text x="142" y="163.5" fill="#303030" font-size="12" font-family="ui-monospace,SFMono-Regular,Consolas,monospace">Brak terminu</text>
</g>
</svg></div><h3>[Nagłówek problemu]</h3><p>[Opis sytuacji przedstawionej na ilustracji.]</p></article></div></section>

Zachowaj kontekst rodziców i pliki wymienione w dokumencie podglądu. Sam fragment HTML bez źródłowego CSS/JS nie odtworzy komponentu. Komplet znajduje się w paczce u góry strony.

<div class="yt"><div class="lpup reference-chart-stage"><article class="lpup__card" data-reveal="" data-delay="3" data-astro-cid-tbq4ueif><div class="lpup__panel" data-astro-cid-tbq4ueif="" aria-label="Demonstracyjna symulacja kampanii; dane nie przedstawiają wyniku klienta.">
<div class="lpup__ads" data-astro-cid-tbq4ueif="">
<p class="lpup__ads-label" data-astro-cid-tbq4ueif="">Symulacja kampanii</p>
<div class="lpup__bars" data-astro-cid-tbq4ueif="">
<span class="lpup__bar lpup__bar--32" data-astro-cid-tbq4ueif="">
</span>
<span class="lpup__bar lpup__bar--44" data-astro-cid-tbq4ueif="">
</span>
<span class="lpup__bar lpup__bar--40" data-astro-cid-tbq4ueif="">
</span>
<span class="lpup__bar lpup__bar--58" data-astro-cid-tbq4ueif="">
</span>
<span class="lpup__bar lpup__bar--66" data-astro-cid-tbq4ueif="">
</span>
<span class="lpup__bar lpup__bar--84" data-astro-cid-tbq4ueif="">
</span>
</div>
<div class="lpup__figures" data-astro-cid-tbq4ueif="">
<p class="lpup__figure" data-astro-cid-tbq4ueif="">
<span class="lpup__figure-value" data-astro-cid-tbq4ueif="">+48%</span>
<span class="lpup__figure-key" data-astro-cid-tbq4ueif="">Zapytania</span>
</p>
<p class="lpup__figure" data-astro-cid-tbq4ueif="">
<span class="lpup__figure-value" data-astro-cid-tbq4ueif="">−24%</span>
<span class="lpup__figure-key" data-astro-cid-tbq4ueif="">Koszt zapytania</span>
</p>
</div>
</div>
</div></article></div></div>
<p class="reference-demo-note">Dane demonstracyjne. To symulacja działania wykresu, bez wyników klienta.</p>
<p class="reference-demo-note">Źródło: lokalny snapshot dealyo-homepage/dist (app.js?v=74101beceeaf). Publiczny podgląd obecnie ma inną wersję: „Pomiar kampanii”, trzy puste wskaźniki i skrypt e95b6e845c23. Ten przykład zachowuje lokalną „Symulację kampanii” i jej animację.</p>

Zachowaj kontekst rodziców i pliki wymienione w dokumencie podglądu. Sam fragment HTML bez źródłowego CSS/JS nie odtworzy komponentu. Komplet znajduje się w paczce u góry strony.

<!-- Samodzielny dokument: kopiuj razem z zależnościami wskazanymi w manifest.json. Zachowaj klasy i ID. -->
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow">
<title>Porównanie podstaw prowizji — scenariusze z prezentacji</title>
<link rel="preload" href="assets/general-sans-500.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="closer-source.css">
<link rel="stylesheet" href="specimens.css">
<script src="comparison.js" defer></script>
</head>
<body class="reference-specimen">
<a class="skip-link" href="#presentation">Przejdź do scenariusza</a>
<main id="presentation" tabindex="-1"><section class="slide slide-18" id="slajd-18" aria-label="Porównanie podstaw prowizji — scenariusze z prezentacji"><div class="slide-inner"><div class="slide-head"><p class="eyebrow"><span class="accent-dot"></span>04 / Podstawa naliczenia</p><h1>Liczy się procent. <br>I kwota, od której go liczysz.</h1></div><p class="reference-context">Kwoty i stawki poniżej są założeniami prezentacji źródłowej. Nie stanowią aktualnego cennika ani obietnicy wynagrodzenia. Warunki współpracy wymagają uzgodnienia.</p><div class="comparison-toolbar"><span>Założenia scenariusza:</span><div class="segmented scenario-switch"><button class="is-selected" data-comparison="130000" aria-pressed="true">Termomodernizacja · 130 tys.</button><button data-comparison="65000" aria-pressed="false">Zestaw OZE · 65 tys.</button></div></div><div class="comparison-layout"><div class="margin-assumption"><span id="comparison-type" class="small-label">TERMOMODERNIZACJA · NETTO</span><div><strong id="comparison-sale">130 000 zł</strong><p>łącznej sprzedaży</p></div><div class="margin-equation"><span>10 000 zł marży</span><b>× 50%</b><strong>5 000 zł</strong></div><p id="comparison-percent">To 3,85% wartości sprzedaży.</p></div><div class="comparison-bars"><div class="comparison-bar"><span id="comparison-commission-label">Prowizja z marży</span><div class="value-track"><span style="--bar:19.23%"></span></div><strong id="comparison-margin">5 000 zł</strong></div><div class="comparison-bar dealyo"><span>Dealyo · 15%</span><div class="value-track"><span id="comparison-bar15" style="--bar:75%"></span></div><strong id="comparison15">19 500 zł</strong></div><div class="comparison-bar dealyo"><span>Dealyo · 20%</span><div class="value-track"><span id="comparison-bar20" style="--bar:100%"></span></div><strong id="comparison20">26 000 zł</strong></div></div></div><p class="slide-note">Przykładowe założenia, nie stawki rynkowe. Dealyo: ta sama łączna sprzedaż netto, nie cena jednej usługi. Wysiłek i cykl sprzedaży mogą się różnić.</p><details class="reference-assumptions"><summary>Założenia i ograniczenia scenariusza</summary><p>Ilustracyjne założenia, a nie stawki rynkowe. Wszystkie kwoty netto. Termomodernizacja: 130 000 zł sprzedaży, 10 000 zł marży, 50% z marży = 5 000 zł, czyli 3,846% sprzedaży. Zestaw OZE: 65 000 zł sprzedaży, 10 000 zł marży, do 50% = do 5 000 zł, czyli do 7,692%. Przy tej samej łącznej sprzedaży Dealyo: 19 500/26 000 zł albo 9 750/13 000 zł przy 15/20%. To suma sprzedaży, a nie cena jednej usługi. Porównanie nie oznacza równego wysiłku, cyklu ani łatwości sprzedaży.</p><p>Źródło: <a href="https://dealyo-closerzy.pages.dev/#slajd-18" target="_blank" rel="noopener noreferrer">prezentacja closerów Dealyo, slajd 18</a>. Dane wejściowe tego przykładu nie są wynikami klienta.</p></details></div></section></main>
<noscript><p class="reference-noscript">Podgląd pokazuje domyślny przykład. Włącz JavaScript, aby zmieniać scenariusz.</p></noscript>
</body>
</html>

Zachowaj kontekst rodziców i pliki wymienione w dokumencie podglądu. Sam fragment HTML bez źródłowego CSS/JS nie odtworzy komponentu. Komplet znajduje się w paczce u góry strony.

<!-- Samodzielny dokument: kopiuj razem z zależnościami wskazanymi w manifest.json. Zachowaj klasy i ID. -->
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow">
<title>Kalkulator wynagrodzenia — scenariusz z prezentacji</title>
<link rel="preload" href="assets/general-sans-500.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="closer-source.css">
<link rel="stylesheet" href="specimens.css">
<script src="icons.js" defer></script>
<script src="calculator.js" defer></script>
</head>
<body class="reference-specimen">
<a class="skip-link" href="#presentation">Przejdź do scenariusza</a>
<main id="presentation" tabindex="-1"><section class="slide slide-19" id="slajd-19" aria-label="Kalkulator wynagrodzenia — scenariusz z prezentacji"><div class="slide-inner"><div class="slide-head"><p class="eyebrow"><span class="accent-dot"></span>04 / Twoje liczby</p><h1>Policz własny <em>scenariusz.</em></h1></div><p class="reference-context">Kwoty i stawki poniżej są założeniami prezentacji źródłowej. Nie stanowią aktualnego cennika ani obietnicy wynagrodzenia. Warunki współpracy wymagają uzgodnienia.</p><div class="calculator" data-testid="calc"><form id="calculator-form" class="calculator-controls"><div class="calc-presets"><span class="small-label">PUNKT WYJŚCIA</span><button type="button" data-preset="default" class="preset is-selected">10 umów / mies.</button><button type="button" data-preset="portfolio" class="preset">Sam portfel</button></div><div class="field-grid"><label>Nowe opłacone umowy / mies.<input type="number" name="newClients" value="10" min="0" max="100" step="1" inputmode="numeric"></label><label>Opłata za usługę netto / mies.<span class="input-suffix"><input type="number" name="fee" value="2500" min="0" max="100000" step="100" inputmode="decimal"><span>zł</span></span></label><label>Początkowa umowa<span class="input-suffix"><input type="number" name="baseMonths" value="3" min="1" max="24" step="1" inputmode="numeric"><span>mies.</span></span></label><label>Portfel początkowy<span class="input-suffix"><input type="number" name="initial" value="0" min="0" max="1000" step="1" inputmode="numeric"><span>klientów</span></span></label><label>Prowizja od przedłużeń<span class="input-suffix"><input type="number" name="retRate" value="3" min="1" max="5" step="0.5" inputmode="decimal"><span>%</span></span></label><label>Założone odejścia / mies.<span class="input-suffix"><input type="number" name="churn" value="5" min="0" max="100" step="1" inputmode="decimal"><span>%</span></span></label></div><div class="calc-rate-row"><span>Nowa sprzedaż</span><div class="segmented"><button type="button" class="is-selected" data-calc-rate="15" aria-pressed="true">15%</button><button type="button" data-calc-rate="20" aria-pressed="false">20%</button></div><button type="reset" class="reset-button" aria-label="Przywróć domyślne założenia">Resetuj</button></div><p class="calc-contract" id="calc-contract">Umowa 7 500 zł <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" aria-hidden="true" focusable="false"><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg> 1 125 zł po pierwszej wpłacie.</p></form><div class="calculator-result"><div class="result-heading"><span class="small-label">WYNAGRODZENIE W MIESIĄCU <b id="result-month">12</b></span><strong id="calc-total" aria-live="polite">16 005 <span>zł</span></strong></div><div class="result-parts"><div><i class="legend-dot"></i><span>Nowa sprzedaż</span><strong id="calc-active">11 250 zł</strong></div><div><i class="legend-dot recurring-dot"></i><span>Przedłużenia</span><strong id="calc-recurring">4755 zł</strong></div></div><div id="calc-chart" class="calc-chart" role="group" aria-label="Wynagrodzenie w kolejnych 12 miesiącach"></div><label class="month-control" for="calc-month"><span>Miesiąc <output id="month-output">12</output></span><input id="calc-month" type="range" min="1" max="12" value="12"><span>1–12</span></label><div class="calc-summary"><span>Portfel na przedłużeniu: <strong id="calc-retained">63,4</strong></span><span>Suma do tego miesiąca: <strong id="calc-cumulative">160 396 zł</strong></span></div></div></div><p class="slide-note">Symulacja, nie prognoza. Każda nowa umowa ma pierwszą wpłatę. Bez reklam, podatków i zwrotów. Szczegółowe założenia pod kalkulatorem.</p><details class="reference-assumptions"><summary>Założenia i ograniczenia scenariusza</summary><p>Symulacja, nie prognoza wynagrodzenia. Każda nowa umowa oznacza wpłaconą pierwszą transzę. Domyślnie: 10 nowych umów miesięcznie, 2 500 zł netto za usługę miesięcznie, 3 miesiące początkowej umowy, 15% od pełnej wartości, 3% od przedłużeń, 0 klientów w początkowym portfelu i 5% odejść miesięcznie. Prowizja od przedłużeń zaczyna się od 4. miesiąca danej grupy klientów. Początkowy portfel jest już uprawniony do przedłużeń. Miesięczny odpływ to założenie, nie statystyka Dealyo. Liczby utrzymanych klientów są wartościami oczekiwanymi. Model nie uwzględnia reklam, podatków, zwrotów ani korekt prowizji. Odejście klienta nie cofa wcześniej naliczonej prowizji w tej symulacji.</p><p>Oryginalny wzór uwzględnia odejścia nowych klientów także podczas początkowej umowy. Portfel początkowy podlega pierwszemu odpływowi już w miesiącu 1. Model liczy bez zaokrągleń; widok zaokrągla kwoty do pełnych złotych.</p><p>Źródło: <a href="https://dealyo-closerzy.pages.dev/#slajd-19" target="_blank" rel="noopener noreferrer">prezentacja closerów Dealyo, slajd 19</a>. Dane wejściowe tego przykładu nie są wynikami klienta.</p></details></div></section></main>
<noscript><p class="reference-noscript">Podgląd pokazuje domyślny przykład. Włącz JavaScript, aby zmieniać scenariusz.</p></noscript>
</body>
</html>