/**

 * Landing page sprzedazowy pod ruch platny.

 * Mobile-first. Samodzielny arkusz - LP nie laduje main.css motywu,

 * bo flagship ciagnie animacje, ktorych strona pod reklame nie potrzebuje.

 */



:root {

  /* Paleta z KV Klikon Media: magenta + fiolet, gradient 135deg. */

  --lp-primary:      #cc00a6;

  --lp-primary-dark: #ad008d;

  --lp-primary-soft: rgba(204, 0, 166, .14);

  --lp-secondary:    #7338ea;

  --lp-secondary-deep: #4c1d9e;

  --lp-gradient:     linear-gradient(135deg, #cc00a6 0%, #a01580 35%, #7338ea 70%, #4c1d9e 100%);

  --lp-gradient-hover: linear-gradient(135deg, #e01ac0 0%, #b01890 35%, #8a4ff5 70%, #5a25b8 100%);

  --lp-bg:           #000408;

  /* To samo tlo co --lp-bg. Rozne tla sekcji tworzyly widoczne

     odciecia na granicach - strona ma byc jednym plynnym tlem. */

  --lp-bg-alt:       #000408;

  --lp-card:         #131318;

  --lp-text:         #ffffff;

  --lp-muted:        #a3a3ad;

  --lp-border:       rgba(255, 255, 255, .12);



  --lp-font-head: "Poppins", system-ui, sans-serif;

  /* Font wylacznie dla naglowka hero. Motyw juz go laduje, wiec zero dodatkowych requestow. */

  --lp-font-display: "Archivo Black", "Poppins", system-ui, sans-serif;

  --lp-font-body: "Inter", system-ui, sans-serif;



  --lp-max: 1440px;

  --lp-px:  1.25rem;

  --lp-radius: 14px;

  --lp-transition: .22s ease;

}



/**

 * Mostek zmiennych dla sekcji przeniesionych ze strony glownej.

 *

 * LP nie laduje main.css (celowo - flagship ciagnie animacje, ktorych

 * strona pod reklame nie potrzebuje), a portfolio-marquee.css odwoluje sie

 * do zmiennych zdefiniowanych wlasnie tam. Mapujemy je na nasze tokeny,

 * zeby sekcja wygladala identycznie bez ciagnienia calego arkusza motywu.

 */

:root {

  --color-bg:         var(--lp-bg);

  --color-bg-alt:     var(--lp-bg-alt);

  --color-primary:    var(--lp-primary);

  --color-text:       var(--lp-text);

  --color-text-muted: var(--lp-muted);

  --font-heading:     var(--lp-font-head);

  --nav-height:       0px;

  --btn-cut:          10px;

  --dim:              1;

}



*, *::before, *::after { box-sizing: border-box; }



/* Clip musi byc na html - to on jest kontenerem przewijania strony,

   wiec samo body nie powstrzyma poziomego paska. */

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }



body.lp-body {

  margin: 0;

  /* Poswiaty w hero wystaja poza krawedzie - tniemy je na poziomie strony,

     zeby nie pojawil sie poziomy pasek przewijania. */

  overflow-x: clip;

  background: var(--lp-bg);

  color: var(--lp-text);

  font-family: var(--lp-font-body);

  font-size: 1rem;

  line-height: 1.65;

  -webkit-font-smoothing: antialiased;

}



body.lp-body img { max-width: 100%; height: auto; display: block; }



.lp-container {

  width: 100%;

  max-width: var(--lp-max);

  margin-inline: auto;

  padding-inline: var(--lp-px);

}



.lp-section { padding-block: 3.5rem; }

.lp-section--alt { background: var(--lp-bg-alt); }



.lp-h2 {

  font-family: var(--lp-font-head);

  font-weight: 800;

  font-size: clamp(1.6rem, 5.2vw, 2.5rem);

  line-height: 1.15;

  letter-spacing: -.02em;

  margin: 0 0 2rem;

}



/* ---------- Przyciski ---------- */



/**

 * Ten sam przycisk co w sekcji portfolio (assets/css/portfolio-marquee.css):

 * sciete rogi, monospace w wersalikach, poziome kreski w srodku, twardy cien

 * pod spodem i poswiata. Przeniesiony 1:1, zeby caly landing mial jeden

 * jezyk przyciskow.

 */

.lp-btn {

  --btn-cut: 10px;

  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: .5rem;

  padding: 1rem 2.5rem;

  border: 0;

  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  font-size: 1rem;

  font-weight: 600;

  letter-spacing: .08em;

  text-transform: uppercase;

  line-height: 1.2;

  text-decoration: none;

  cursor: pointer;

  overflow: hidden;

  min-height: 52px;

  transition: transform .08s ease-out, background .2s ease, box-shadow .2s ease;

  clip-path: polygon(

    var(--btn-cut) 0,

    calc(100% - var(--btn-cut)) 0,

    100% var(--btn-cut),

    100% calc(100% - var(--btn-cut)),

    calc(100% - var(--btn-cut)) 100%,

    var(--btn-cut) 100%,

    0 calc(100% - var(--btn-cut)),

    0 var(--btn-cut)

  );

}



/* Poziome kreski w srodku przycisku. clip-path: inherit, zeby warstwa

   trzymala sie scietych rogow rodzica. */

.lp-btn::before {

  content: "";

  position: absolute;

  inset: 0;

  background-image: repeating-linear-gradient(

    0deg,

    transparent 0,

    transparent 2px,

    rgba(0, 0, 0, .12) 2px,

    rgba(0, 0, 0, .12) 4px

  );

  pointer-events: none;

  clip-path: inherit;

}



.lp-btn--primary {

  background: var(--lp-gradient);

  color: #fff;

  box-shadow:

    0 4px 0 0 rgba(0, 0, 0, .4),

    0 0 0 1px rgba(204, 0, 166, .6),

    0 0 24px rgba(204, 0, 166, .4),

    0 0 48px rgba(115, 56, 234, .3);

}



.lp-btn--primary:hover,

.lp-btn--primary:focus-visible {

  background: var(--lp-gradient-hover);

  color: #fff;

  box-shadow:

    0 4px 0 0 rgba(0, 0, 0, .4),

    0 0 0 1px rgba(204, 0, 166, .6),

    0 0 36px rgba(204, 0, 166, .5),

    0 0 64px rgba(115, 56, 234, .5);

}



.lp-btn--primary:active {

  transform: translateY(4px);

  box-shadow:

    0 0 0 0 rgba(0, 0, 0, .4),

    0 0 0 1px rgba(204, 0, 166, .6),

    0 0 20px rgba(204, 0, 166, .4);

}



/* Wariant boczny w cenniku - ten sam ksztalt, bez wypelnienia,

   zeby wyrozniony pakiet zostal jedynym mocnym akcentem. */

.lp-btn--ghost {

  background: rgba(255, 255, 255, .04);

  color: var(--lp-text);

  box-shadow:

    0 4px 0 0 rgba(0, 0, 0, .35),

    0 0 0 1px rgba(255, 255, 255, .16);

}



.lp-btn--ghost:hover,

.lp-btn--ghost:focus-visible {

  background: rgba(255, 255, 255, .08);

  box-shadow:

    0 4px 0 0 rgba(0, 0, 0, .35),

    0 0 0 1px rgba(255, 255, 255, .3);

}



.lp-btn--ghost:active { transform: translateY(4px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .3); }



/* Sciete rogi ucinaja standardowy outline, wiec fokus rysujemy cieniem. */

.lp-btn:focus-visible {

  outline: none;

  box-shadow:

    0 4px 0 0 rgba(0, 0, 0, .4),

    0 0 0 2px #fff,

    0 0 36px rgba(204, 0, 166, .5);

}



/* ---------- Pasek postepu ---------- */



/**

 * Pojawia sie dopiero po wyjsciu z hero (klasa is-visible nadawana w JS),

 * zeby nie konkurowac z pierwszym ekranem. Na telefonie zostaja same numery,

 * bo piec etykiet nie miesci sie w jednej linii.

 */

.lp-steps {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: 60;

  display: flex;

  justify-content: center;

  gap: .25rem;

  padding: .625rem clamp(14px, 1.4vw, 28px);

  background: rgba(0, 4, 8, .82);

  backdrop-filter: blur(12px);

  border-bottom: 1px solid var(--lp-border);

  transform: translateY(-100%);

  transition: transform .28s ease;

}



.lp-steps[hidden] { display: none; }

.lp-steps.is-visible { transform: translateY(0); }



.lp-steps__item {

  display: flex;

  align-items: center;

  gap: .4rem;

  padding: .3rem .625rem;

  border-radius: 999px;

  font-size: .8125rem;

  color: var(--lp-muted);

  transition: color var(--lp-transition), background var(--lp-transition);

  white-space: nowrap;

}



.lp-steps__num {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 20px;

  height: 20px;

  border-radius: 50%;

  border: 1px solid var(--lp-border);

  font-family: var(--lp-font-head);

  font-weight: 700;

  font-size: .6875rem;

  flex: 0 0 auto;

}



.lp-steps__label { display: none; }



.lp-steps__item.is-done { color: #cfcfd8; }

.lp-steps__item.is-done .lp-steps__num {

  border-color: transparent;

  background: rgba(204, 0, 166, .35);

  color: #fff;

}



.lp-steps__item.is-active { color: var(--lp-text); background: rgba(255, 255, 255, .06); }

.lp-steps__item.is-active .lp-steps__num {

  border-color: transparent;

  background: var(--lp-gradient);

  color: #fff;

}



/* ---------- Logo ---------- */



/**

 * Ten sam rozmiar i to samo odsuniecie od krawedzi co belka na stronie

 * glownej (.site-header__inner). Celowo poza kontenerem tresci - logo ma

 * siedziec maksymalnie z lewej, tak jak tam.

 */

.lp-brand {

  padding: 1rem clamp(14px, 1.4vw, 28px) 0;

}



/**

 * Podwojna klasa celowo. Globalne `body.lp-body img { height: auto }` ma

 * wyzsza specyficznosc niz pojedyncza klasa i nadpisywalo wysokosc logo,

 * przez co renderowalo sie w naturalnym rozmiarze pliku.

 */

.lp-brand .lp-brand__img {

  height: 40px;

  width: auto;

  max-width: none;

  display: block;

}



/* ---------- Hero ---------- */



/**

 * Tlo w jezyku strony glownej: siatka + wedrujace poswiaty. Bez gwiazd - na stronie glownej buduja klimat

 * scrollytellingu, tutaj tylko odciagalyby wzrok od przycisku.

 * Wszystko na gradientach CSS, zero obrazkow, zero kosztu w ladowaniu.

 */

.lp-hero {

  position: relative;

  padding-block: 0 3rem;

  background: var(--lp-bg);

  isolation: isolate;

}



.lp-hero::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: -1;

  background:

    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 100% 64px,

    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 64px 100%;

  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);

}



/**

 * Kazda poswiata jest ZAKOTWICZONA w swoim rogu i porusza sie wylacznie

 * w pionie. Wczesniej wedrowaly po przekatnej i przechodzily przez srodek,

 * przez co wchodzily pod naglowek i obnizaly jego czytelnosc.

 *

 * Animujemy tylko transform i opacity - obie liczy karta graficzna.

 * Cykle 22s i 29s nie dziela sie przez siebie, wiec uklad nie wraca

 * do tej samej kompozycji w oczywistym rytmie.

 */

.lp-hero__glow {

  position: absolute;

  width: 78vw;

  max-width: 1000px;

  aspect-ratio: 1;

  z-index: -1;

  pointer-events: none;

  will-change: transform, opacity;

  mix-blend-mode: screen;

  /**

   * Maska wygasza poswiate przy dolnej krawedzi hero. Bez niej overflow

   * ucinal ja rowna, pozioma linia - wygladalo to jak bladd renderowania.

   */

  mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0,0,0,.45) 72%, transparent 100%);

}



/**

 * Wiele przystankow w gradiencie zamiast dwoch. Przy dwoch widac bylo

 * wyrazny luk - miejsce, w ktorym kolor konczyl sie zbyt gwaltownie.

 */

.lp-hero__glow--1 {

  top: -34%;

  left: -22%;

  background: radial-gradient(circle closest-side,

    rgba(204, 0, 166, .62) 0%,

    rgba(204, 0, 166, .34) 30%,

    rgba(204, 0, 166, .14) 52%,

    rgba(204, 0, 166, .05) 72%,

    transparent 100%);

  animation: lp-drift-1 14s ease-in-out infinite;

}



.lp-hero__glow--2 {

  bottom: -46%;

  right: -22%;

  background: radial-gradient(circle closest-side,

    rgba(115, 56, 234, .64) 0%,

    rgba(115, 56, 234, .36) 30%,

    rgba(115, 56, 234, .15) 52%,

    rgba(115, 56, 234, .05) 72%,

    transparent 100%);

  animation: lp-drift-2 18s ease-in-out infinite;

}



/* Wieksze przesuniecia niz wczesniej - ruch ma byc widoczny, nie domyslany. */

@keyframes lp-drift-1 {

  0%, 100% { transform: translate3d(0, -6%, 0)  scale(1);    opacity: .8; }

  50%      { transform: translate3d(0, 34%, 0)  scale(1.18); opacity: 1; }

}



@keyframes lp-drift-2 {

  0%, 100% { transform: translate3d(0, 8%, 0)   scale(1.12); opacity: 1; }

  50%      { transform: translate3d(0, -32%, 0) scale(1);    opacity: .78; }

}



/**

 * Uklad wysrodkowany. Naglowek jest jedyna trescia pierwszego ekranu -

 * stawia teze i celowo jej nie tlumaczy. Dowod czeka sekcje nizej.

 */

.lp-hero__inner {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  min-height: calc(78vh - 56px);

  justify-content: center;

}



.lp-hero__content { max-width: 56rem; }



/**

 * Naglowek jest glowna grafika tej sekcji, stad rozmiar i ujemny tracking.

 * Interlinia 1.0 - przy 900 i tym rozmiarze kazda wieksza robi dziury

 * miedzy liniami i zdanie przestaje czytac sie jako blok.

 */

.lp-hero__h1 {

  font-family: var(--lp-font-display);

  font-weight: 400; /* Archivo Black ma tylko jedna wage - 400 JEST jej wersja gruba */

  font-size: clamp(2rem, 6.2vw, 4.5rem);

  line-height: 1.04;

  letter-spacing: -.025em;

  margin: 0 0 1.5rem;

  text-transform: none;

}



/* Akcent bierze gradient z KV, ten sam co przycisk i naglowki na stronie glownej. */

.lp-hero__accent {

  background: var(--lp-gradient);

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

}



/**

 * Zdanie pod naglowkiem niesie cala ciekawosc, wiec nie moze byc drobnym

 * podpisem. Jasniejsze od reszty tekstu pomocniczego i wyraznie wieksze.

 */

.lp-hero__lead {

  font-size: clamp(1.1875rem, 1.9vw, 1.75rem);

  line-height: 1.5;

  color: #d6d6dd;

  margin: 0 auto 2.75rem;

  max-width: 46rem;

  text-wrap: balance;

}



/**

 * Plakietka na "19 sekund". Lekkie przekrzywienie i gradient z KV, zeby oko

 * zlapalo liczbe przed przeczytaniem zdania. Kat celowo maly - przy wiekszym

 * zaczyna wygladac jak naklejka z promocji.

 */

.lp-hero__chip {

  display: inline-block;

  padding: .08em .38em .16em;

  margin-inline: .06em 0;

  border-radius: .3em;

  background: var(--lp-gradient);

  color: #fff;

  font-weight: 700;

  white-space: nowrap;

  transform: rotate(-2.5deg);

}



/* Wskazowka przewijania */

.lp-hero__scroll {

  margin-top: 3rem;

  display: flex;

  justify-content: center;

}



.lp-hero__arrow {

  width: 12px;

  height: 12px;

  border-right: 2px solid var(--lp-muted);

  border-bottom: 2px solid var(--lp-muted);

  transform: rotate(45deg);

  animation: lp-nudge 1.8s ease-in-out infinite;

}



@keyframes lp-nudge {

  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .45; }

  50%      { transform: rotate(45deg) translate(4px, 4px); opacity: 1; }

}



.lp-hero__cta { width: 100%; }



.lp-hero__proof {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: center;

  gap: .5rem;

  margin: 1.5rem 0 0;

  font-size: .9375rem;

  color: var(--lp-muted);

}



.lp-hero__stars { color: #ffc531; letter-spacing: .05em; }

.lp-hero__sep { opacity: .4; }



.lp-hero__phone { margin: 1rem 0 0; font-size: .9375rem; color: var(--lp-muted); }

.lp-hero__phone a { color: var(--lp-text); font-weight: 600; }





/* ---------- Pasek realizacji ---------- */



.lp-strip {

  overflow: hidden;

  padding-block: 1.5rem;

  border-block: 1px solid var(--lp-border);

  background: var(--lp-bg-alt);

}



.lp-strip__track {

  display: flex;

  gap: 1rem;

  width: max-content;

  animation: lp-marquee 48s linear infinite;

}



.lp-strip:hover .lp-strip__track { animation-play-state: paused; }



.lp-strip__item { margin: 0; width: 220px; flex: 0 0 auto; }



.lp-strip__img {

  width: 100%;

  aspect-ratio: 16 / 10;

  object-fit: cover;

  object-position: top center;

  border-radius: 10px;

  border: 1px solid var(--lp-border);

}



.lp-strip__caption { display: flex; flex-direction: column; margin-top: .5rem; font-size: .8125rem; }

.lp-strip__name { font-weight: 600; }

.lp-strip__branza { color: var(--lp-muted); }



@keyframes lp-marquee {

  from { transform: translate3d(0, 0, 0); }

  to   { transform: translate3d(-50%, 0, 0); }

}



/* ---------- Cztery powody ---------- */



.lp-reasons { position: relative; isolation: isolate; overflow: hidden; }

.lp-reasons > .lp-container { position: relative; z-index: 1; }



/**

 * Naglowek sekcji: wielka cyfra + tekst. Cyfra jest tu elementem

 * graficznym, dlatego dostaje font display, gradient i wlasne, powolne

 * pulsowanie - nie jest ozdobnikiem przy slowie "cztery".

 */

.lp-reasons__headline {

  display: flex;

  align-items: center;

  gap: clamp(.75rem, 2vw, 1.5rem);

  margin: 0 0 2.5rem;

  transition: opacity .6s ease, transform .6s ease;

}



.lp-reasons__headline[data-lp-reveal] { opacity: 0; transform: translateY(20px); }

.lp-reasons__headline.is-in { opacity: 1; transform: none; }



/**

 * Cyfra. Ruch robimy PRZESUNIECIEM GRADIENTU, a nie filtrem - drop-shadow

 * na tekscie z background-clip wymusza przemalowanie calego elementu

 * w kazdej klatce i widac bylo szarpanie. Tutaj zmienia sie tylko

 * background-position na malym elemencie, wiec przejscie jest plynne.

 *

 * Gradient jest dwa razy szerszy od cyfry i przejezdza przez nia tam

 * i z powrotem - kolor faluje, ksztalt stoi w miejscu.

 */

.lp-reasons__digit {

  flex: 0 0 auto;

  font-family: var(--lp-font-display);

  font-size: clamp(4.5rem, 13vw, 10rem);

  line-height: .78;

  letter-spacing: -.06em;

  background: linear-gradient(115deg,

    #cc00a6 0%,

    #a01580 22%,

    #7338ea 46%,

    #4c1d9e 62%,

    #7338ea 78%,

    #cc00a6 100%);

  background-size: 220% 100%;

  background-position: 0% 50%;

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

  animation: lp-digit 9s ease-in-out infinite;

}



@keyframes lp-digit {

  0%, 100% { background-position: 0% 50%; }

  50%      { background-position: 100% 50%; }

}



.lp-reasons__words {

  font-family: var(--lp-font-head);

  font-weight: 800;

  font-size: clamp(1.5rem, 3.6vw, 2.75rem);

  line-height: 1.1;

  letter-spacing: -.025em;

  max-width: 18ch;

}



/**

 * Fraza wyrozniona w naglowku sekcji. Podkreslenie gradientem zamiast

 * kolorowania liter - cyfra obok jest juz w gradiencie, a dwa takie same

 * wyroznienia obok siebie zaczynaja ze soba konkurowac.

 */

.lp-reasons__accent {

  position: relative;

  white-space: nowrap;

}



.lp-reasons__accent::after {

  content: "";

  position: absolute;

  left: 0;

  right: 0;

  bottom: .04em;

  height: .09em;

  border-radius: 999px;

  background: var(--lp-gradient);

}





/**

 * Tlo sekcji. Kolory ODWROTNIE niz w hero (tam magenta jest u gory z lewej),

 * zeby obie sekcje nie wygladaly jak to samo tlo powielone.

 * Dwie poswiaty z roznymi czasami cyklu - razem daja wrazenie

 * ruchu, ktory nigdy sie nie powtarza w oczywistym rytmie.

 * Animujemy tylko transform i opacity, obie liczy karta graficzna.

 */

.lp-reasons__aura {

  position: absolute;

  z-index: -1;

  pointer-events: none;

  border-radius: 50%;

  will-change: transform, opacity;

  mix-blend-mode: screen;

}



.lp-reasons__aura--1 {

  top: 8%;

  left: -10%;

  width: 58vw;

  max-width: 760px;

  aspect-ratio: 1;

  background: radial-gradient(circle closest-side,

    rgba(115, 56, 234, .24) 0%,

    rgba(115, 56, 234, .09) 38%,

    transparent 100%);

  animation: lp-aura-1 21s ease-in-out infinite;

}



.lp-reasons__aura--2 {

  bottom: 2%;

  right: -8%;

  width: 52vw;

  max-width: 700px;

  aspect-ratio: 1;

  background: radial-gradient(circle closest-side,

    rgba(204, 0, 166, .24) 0%,

    rgba(204, 0, 166, .09) 38%,

    transparent 100%);

  animation: lp-aura-2 27s ease-in-out infinite;

}



@keyframes lp-aura-1 {

  0%, 100% { transform: translate3d(0, 0, 0) scale(1);       opacity: .6; }

  50%      { transform: translate3d(12%, 14%, 0) scale(1.15); opacity: .85; }

}



@keyframes lp-aura-2 {

  0%, 100% { transform: translate3d(0, 0, 0) scale(1.1);      opacity: .8; }

  50%      { transform: translate3d(-14%, -12%, 0) scale(1);  opacity: .55; }

}



.lp-reasons__grid {

  list-style: none;

  margin: 0;

  padding: 0;

  display: grid;

  gap: 1rem;

}



/* ---- karta ze szkla ---- */



.lp-glass {

  position: relative;

  overflow: hidden;

  padding: 1.75rem 1.5rem 3.5rem;

  min-height: auto;

  display: flex;

  align-items: center;

  border-radius: 18px;

  border: 1px solid rgba(255, 255, 255, .12);

  background: rgba(255, 255, 255, .055);

  backdrop-filter: blur(18px) saturate(140%);

  -webkit-backdrop-filter: blur(18px) saturate(140%);

  box-shadow:

    inset 0 1px 0 rgba(255, 255, 255, .14),

    0 18px 40px rgba(0, 0, 0, .45);

  transition: transform var(--lp-transition), border-color var(--lp-transition), background var(--lp-transition);

}



/* Stan przed pojawieniem sie. Klasa is-in przychodzi z lp.js przy scrollu. */

.lp-glass[data-lp-reveal] { opacity: 0; transform: translateY(18px); }

.lp-glass.is-in {

  opacity: 1;

  transform: none;

  transition: opacity .5s ease, transform .5s ease, border-color var(--lp-transition), background var(--lp-transition);

  transition-delay: var(--lp-row-delay, 0ms);

}



.lp-glass:hover {

  transform: translateY(-3px);

  border-color: rgba(204, 0, 166, .5);

  background: rgba(255, 255, 255, .075);

}



/**

 * Numer jako znak wodny. Lezy pod trescia (z-index 0 kontra 1) i jest

 * przyciety do krawedzi karty, wiec zachowuje sie jak tlo, a nie jak liczba

 * do przeczytania.

 */

.lp-glass__ghost {

  position: absolute;

  left: -.06em;

  bottom: -.28em;

  z-index: 0;

  font-family: var(--lp-font-display);

  font-size: 11rem;

  line-height: 1;

  letter-spacing: -.06em;

  color: rgba(255, 255, 255, .07);

  user-select: none;

  transition: color var(--lp-transition);

}



.lp-glass:hover .lp-glass__ghost { color: rgba(255, 255, 255, .11); }



.lp-glass__body { position: relative; z-index: 1; padding-left: 3.25rem; }



.lp-glass__title {

  font-family: var(--lp-font-head);

  font-weight: 800;

  font-size: 1.3125rem;

  line-height: 1.22;

  letter-spacing: -.015em;

  margin: 0 0 .75rem;

  max-width: 30ch;

}



/* Wyrozniona fraza w naglowku karty. */

.lp-glass__ta {

  background: var(--lp-gradient);

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

}





.lp-glass__text {

  margin: 0;

  color: #d2d2db;

  font-size: 1.0625rem;

  line-height: 1.6;

  max-width: 44ch;

}



/**

 * Kontra: co robi reszta rynku. Wygaszona i przekreslona, zeby oko samo

 * odczytalo ja jako "to jest to zle". Krzyzyk jest duzy i w kolorze marki -

 * to on niesie caly komunikat, bez zadnej etykiety.

 */

.lp-glass__contra {

  display: flex;

  align-items: flex-start;

  gap: .625rem;

  margin: 1rem 0 0;

  padding-top: 1rem;

  border-top: 1px solid rgba(255, 255, 255, .08);

  color: #8f8f9c;

  font-size: .9375rem;

  line-height: 1.5;

  text-decoration: line-through;

  text-decoration-color: rgba(255, 255, 255, .3);

  max-width: 44ch;

}



/* Krzyzyk z dwoch kresek na pseudoelementach - bez ikony i bez pliku. */

.lp-glass__x {

  position: relative;

  flex: 0 0 auto;

  width: 22px;

  height: 22px;

  margin-top: .05rem;

}



.lp-glass__x::before,

.lp-glass__x::after {

  content: "";

  position: absolute;

  top: 50%;

  left: 0;

  width: 100%;

  height: 3px;

  border-radius: 3px;

  background: var(--lp-primary);

}



.lp-glass__x::before { transform: translateY(-50%) rotate(45deg); }

.lp-glass__x::after  { transform: translateY(-50%) rotate(-45deg); }



/**

 * Plakietka wyrozniajaca karte z czyms, czego nie ma nikt inny.

 * Gradient z KV, ten sam co przycisk - sygnalizuje "to jest wazne"

 * bez wprowadzania kolejnego koloru.

 */

.lp-glass--star { border-color: rgba(204, 0, 166, .38); }



.lp-glass__badge {

  position: absolute;

  top: 1rem;

  right: 1rem;

  z-index: 2;

  padding: .3rem .7rem;

  border-radius: 999px;

  background: var(--lp-gradient);

  color: #fff;

  font-family: var(--lp-font-head);

  font-weight: 700;

  font-size: .6875rem;

  letter-spacing: .04em;

  white-space: nowrap;

}



/* Nazwa narzedzia w tresci - gradient zamiast zwyklej bieli. */

.lp-glass__hl {

  font-weight: 700;

  background: var(--lp-gradient);

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

}



/**

 * Rozwiniecie tresci karty. Tekstowy odnosnik zamiast kolka z litera "i" -

 * mowi wprost, czego sie spodziewac, i nie wprowadza obcego elementu

 * graficznego do ukladu.

 *

 * Tresc otwiera sie na najechanie ORAZ na fokus, wiec dziala tez z klawiatury.

 */

.lp-more {

  position: absolute;

  right: 1.5rem;

  bottom: 1.25rem;

  z-index: 3;

}



.lp-more__btn {

  display: inline-flex;

  align-items: center;

  gap: .45rem;

  padding: 0;

  border: 0;

  background: none;

  color: var(--lp-muted);

  font-family: var(--lp-font-head);

  font-weight: 700;

  font-size: .875rem;

  letter-spacing: .01em;

  cursor: pointer;

  transition: color var(--lp-transition);

}



.lp-more__btn::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -3px;

  width: 0;

  height: 1px;

  background: var(--lp-primary);

  transition: width .25s ease;

}



.lp-more__btn:hover,

.lp-more__btn:focus-visible { color: var(--lp-text); }

.lp-more__btn:hover::after,

.lp-more__btn:focus-visible::after { width: calc(100% - 1.1rem); }



/* Strzalka: kwadrat obrocony o 45 stopni, bez ikony i bez pliku. */

.lp-more__arrow {

  width: 7px;

  height: 7px;

  border-right: 2px solid var(--lp-primary);

  border-bottom: 2px solid var(--lp-primary);

  transform: rotate(-45deg);

  transition: transform .25s ease;

}



.lp-more__btn:hover .lp-more__arrow,

.lp-more__btn:focus-visible .lp-more__arrow { transform: rotate(-45deg) translate(2px, 2px); }



/**

 * Dymek. Pozostaje widoczny, gdy kursor przejdzie na niego - bez tego

 * nie dalo by sie przeczytac dluzszego tekstu.

 */

.lp-more__pop {

  position: absolute;

  right: 0;

  bottom: calc(100% + .75rem);

  z-index: 5;

  width: max(20rem, 100%);

  max-width: min(24rem, 78vw);

  padding: 1rem 1.125rem;

  border-radius: 14px;

  border: 1px solid rgba(255, 255, 255, .16);

  background: rgba(14, 14, 20, .97);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

  box-shadow: 0 20px 50px rgba(0, 0, 0, .6);

  color: #d2d2db;

  font-family: var(--lp-font-body);

  font-weight: 400;

  font-size: .875rem;

  line-height: 1.6;

  text-align: left;

  letter-spacing: 0;

  opacity: 0;

  visibility: hidden;

  transform: translateY(6px);

  transition: opacity .2s ease, transform .2s ease, visibility .2s;

}



.lp-more__btn:hover + .lp-more__pop,

.lp-more__btn:focus-visible + .lp-more__pop,

.lp-more__pop:hover {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);

}



/* Karta przycina zawartosc, wiec przy otwartym dymku pozwalamy mu wyjsc. */

.lp-glass:has(.lp-more__btn:hover),

.lp-glass:has(.lp-more__btn:focus-visible),

.lp-glass:has(.lp-more__pop:hover) { overflow: visible; }



/* ---- CTA pod sekcja ---- */



.lp-reasons__cta {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 1.125rem;

  margin-top: 2.5rem;

  text-align: center;

}



.lp-reasons__cta-text {

  margin: 0;

  color: var(--lp-muted);

  font-size: 1.0625rem;

}









/* Ptaszek - wspolny dla tabeli porownawczej i cennika. */

.lp-perk__check {

  position: relative;

  flex: 0 0 auto;

  width: 22px;

  height: 22px;

  border-radius: 50%;

  background: var(--lp-gradient);

}



.lp-perk__check::before,

.lp-perk__check::after {

  content: "";

  position: absolute;

  background: #fff;

  border-radius: 2px;

}



.lp-perk__check::before { width: 2px; height: 6px; left: 7px; top: 10px; transform: rotate(-45deg); }

.lp-perk__check::after  { width: 2px; height: 11px; left: 12px; top: 5px; transform: rotate(35deg); }



/* ---------- Tabela porownawcza ---------- */



.lp-vs { position: relative; isolation: isolate; overflow: hidden; }

.lp-vs > .lp-container { position: relative; z-index: 1; }



/**

 * Poswiaty pod tabela. Bez nich backdrop-filter nie ma czego rozmyc

 * i szklany panel wyglada jak zwykly szary prostokat.

 */

.lp-vs__aura {

  position: absolute;

  z-index: -1;

  pointer-events: none;

  border-radius: 50%;

  aspect-ratio: 1;

  will-change: transform, opacity;

  mix-blend-mode: screen;

}



.lp-vs__aura--1 {

  top: 12%;

  left: -6%;

  width: 46vw;

  max-width: 620px;

  background: radial-gradient(circle closest-side,

    rgba(204, 0, 166, .26) 0%, rgba(204, 0, 166, .10) 40%, transparent 100%);

  animation: lp-aura-1 23s ease-in-out infinite;

}



.lp-vs__aura--2 {

  bottom: 6%;

  right: -4%;

  width: 44vw;

  max-width: 600px;

  background: radial-gradient(circle closest-side,

    rgba(115, 56, 234, .28) 0%, rgba(115, 56, 234, .10) 40%, transparent 100%);

  animation: lp-aura-2 29s ease-in-out infinite;

}



.lp-vs__head { text-align: center; margin-bottom: 2.5rem; }

.lp-vs__head[data-lp-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }

.lp-vs__head.is-in { opacity: 1; transform: none; }



/* Naglowek sekcji w tym samym jezyku co reszta strony: duzy, ciasny,

   z jednym slowem w gradiencie. */

.lp-vs__headline {

  font-family: var(--lp-font-head);

  font-weight: 800;

  font-size: clamp(1.75rem, 4.4vw, 3.25rem);

  line-height: 1.08;

  letter-spacing: -.025em;

  margin: 0 auto .875rem;

  max-width: 20ch;

}



.lp-vs__accent {

  background: var(--lp-gradient);

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

}

.lp-vs__lead { margin: 0 auto; color: var(--lp-muted); font-size: 1.0625rem; max-width: 52ch; }



/**

 * Szklany panel. Rozmycie + podbite nasycenie + jasna linia od wewnatrz

 * u gory (to ona daje wrazenie krawedzi szyby) + gleboki cien pod spodem.

 */

.lp-vs__table {

  position: relative;

  border-radius: 22px;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, .12);

  background: rgba(255, 255, 255, .045);

  backdrop-filter: blur(22px) saturate(150%);

  -webkit-backdrop-filter: blur(22px) saturate(150%);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);

}



/* ---- MOBILE: tabela rozpada sie na bloki ---- */



.lp-vs__thead { display: none; }



.lp-vs__row {

  display: grid;

  gap: .5rem;

  padding: 1.125rem 1.25rem;

  border-bottom: 1px solid rgba(255, 255, 255, .07);

  transition: opacity .45s ease, transform .45s ease, background var(--lp-transition);

}



.lp-vs__row:last-child { border-bottom: 0; }

.lp-vs__row:hover { background: rgba(255, 255, 255, .04); }



.lp-vs__row[data-lp-reveal] { opacity: 0; transform: translateY(12px); }

.lp-vs__row.is-in { opacity: 1; transform: none; transition-delay: var(--lp-row-delay, 0ms); }



.lp-vs__cell { display: block; }

.lp-vs__cell--cat { display: grid; gap: .2rem; }



.lp-vs__cat-name {

  font-family: var(--lp-font-head);

  font-weight: 700;

  font-size: 1.0625rem;

  line-height: 1.25;

  color: var(--lp-text);

}



.lp-vs__cat-desc {

  font-size: .875rem;

  line-height: 1.45;

  color: var(--lp-muted);

  max-width: 34ch;

}



.lp-vs__cell[data-kol]::before {

  content: attr(data-kol);

  display: block;

  margin-bottom: .25rem;

  font-size: .6875rem;

  letter-spacing: .1em;

  text-transform: uppercase;

  color: var(--lp-muted);

  opacity: .8;

}



/* ---- znaczniki ---- */



.lp-vs__tag {

  position: relative;

  display: inline-flex;

  align-items: center;

  gap: .5rem;

  padding: .4rem .85rem .45rem .5rem;

  border-radius: 999px;

  font-size: .9375rem;

  line-height: 1.3;

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

}



.lp-vs__tag--no {

  background: rgba(255, 255, 255, .05);

  border: 1px solid rgba(255, 255, 255, .1);

  color: #8f8f9c;

}



/**

 * Nasza wartosc. Gradientowa obwodka na dwoch warstwach tla plus poswiata -

 * ma wygladac jak podswietlony element, nie jak zwykly tag.

 */

/**

 * Nasza wartosc dostaje ten sam jezyk co przyciski: sciete rogi, monospace

 * w wersalikach, poziome kreski i poswiata. Dzieki temu cala prawa kolumna

 * czyta sie jako "to jest to dobre", a nie jako zwykla etykieta.

 */

.lp-vs__tag--yes {

  --btn-cut: 8px;

  border: 0;

  padding: .5rem 1rem .55rem .7rem;

  background: var(--lp-gradient);

  color: #fff;

  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  font-size: .8125rem;

  font-weight: 600;

  letter-spacing: .06em;

  text-transform: uppercase;

  backdrop-filter: none;

  -webkit-backdrop-filter: none;

  overflow: hidden;

  clip-path: polygon(

    var(--btn-cut) 0,

    calc(100% - var(--btn-cut)) 0,

    100% var(--btn-cut),

    100% calc(100% - var(--btn-cut)),

    calc(100% - var(--btn-cut)) 100%,

    var(--btn-cut) 100%,

    0 calc(100% - var(--btn-cut)),

    0 var(--btn-cut)

  );

  box-shadow:

    0 3px 0 0 rgba(0, 0, 0, .35),

    0 0 0 1px rgba(204, 0, 166, .55),

    0 0 18px rgba(204, 0, 166, .35);

}



/* Poziome kreski, tak jak w przyciskach. */

.lp-vs__tag--yes::before {

  content: "";

  position: absolute;

  inset: 0;

  background-image: repeating-linear-gradient(

    0deg,

    transparent 0,

    transparent 2px,

    rgba(0, 0, 0, .12) 2px,

    rgba(0, 0, 0, .12) 4px

  );

  pointer-events: none;

  clip-path: inherit;

}



.lp-vs__x {

  position: relative;

  flex: 0 0 auto;

  width: 18px;

  height: 18px;

  border-radius: 50%;

  background: none;

}



/* Sam znak, bez krazka pod spodem. Kreski troche grubsze i dluzsze,

   zeby bez tla nie zginely przy tekscie chipa. */

.lp-vs__x::before,

.lp-vs__x::after {

  content: "";

  position: absolute;

  top: 50%;

  left: 50%;

  width: 11px;

  height: 2px;

  border-radius: 2px;

  background: #e5484d;

}



.lp-vs__x::before { transform: translate(-50%, -50%) rotate(45deg); }

.lp-vs__x::after  { transform: translate(-50%, -50%) rotate(-45deg); }



.lp-vs__tag--yes .lp-perk__check {

  position: relative;

  z-index: 1;

  width: 18px;

  height: 18px;

  background: #fff;

}



.lp-vs__tag--yes .lp-perk__check::before,

.lp-vs__tag--yes .lp-perk__check::after { background: var(--lp-primary); }

.lp-vs__tag--yes .lp-perk__check::before { width: 1.8px; height: 5px; left: 5.5px; top: 8px; }

.lp-vs__tag--yes .lp-perk__check::after  { width: 1.8px; height: 9px; left: 9.5px; top: 4px; }



.lp-vs__table .lp-vs__logo {

  height: 26px;

  width: auto;

  max-width: none;

  display: block;

}



.lp-vs__cta {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 1.125rem;

  margin-top: 2.5rem;

  text-align: center;

}



.lp-vs__cta-text { margin: 0; color: var(--lp-muted); font-size: 1.0625rem; }



/* ---------- Cennik ---------- */



.lp-pricing__head { text-align: center; margin-bottom: 2.5rem; }

.lp-pricing__head[data-lp-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }

.lp-pricing__head.is-in { opacity: 1; transform: none; }



/* Etykieta nad naglowkiem. Monospace i wersaliki - wyglada jak podpis

   techniczny, a nie jak kolejny naglowek konkurujacy o uwage. */

.lp-eyebrow {

  display: inline-block;

  margin-bottom: 1rem;

  padding: .35rem .85rem;

  border: 1px solid var(--lp-border);

  border-radius: 999px;

  background: rgba(255, 255, 255, .04);

  color: var(--lp-muted);

  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;

  font-size: .6875rem;

  letter-spacing: .14em;

  text-transform: uppercase;

}



/* Naglowek w tym samym jezyku co reszta strony. */

.lp-pricing__headline {

  font-family: var(--lp-font-head);

  font-weight: 800;

  font-size: clamp(1.75rem, 4.4vw, 3.25rem);

  line-height: 1.08;

  letter-spacing: -.025em;

  margin: 0 0 .875rem;

}



.lp-pricing__accent {

  background: var(--lp-gradient);

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

}



/**

 * Siatka w tle sekcji, ten sam zabieg co w hero. Maska wygasza ja przy

 * krawedziach, zeby nie urywala sie rowna linia.

 */

.lp-pricing { position: relative; isolation: isolate; overflow: hidden; }

.lp-pricing > .lp-container { position: relative; z-index: 1; }



.lp-pricing__grid-bg {

  position: absolute;

  inset: 0;

  z-index: -1;

  pointer-events: none;

  background:

    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 100% 64px,

    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 64px 100%;

  mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 25%, transparent 100%);

  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 25%, transparent 100%);

}

.lp-pricing__lead { margin: 0 auto; color: var(--lp-muted); font-size: 1.0625rem; max-width: 46ch; }



.lp-pricing__grid {

  list-style: none;

  margin: 0;

  padding: 0;

  display: grid;

  gap: 1.25rem;

  align-items: start;

}



/* ---- pojedynczy pakiet ---- */



.lp-plan {

  position: relative;

  display: flex;

  flex-direction: column;

  padding: 2rem 1.75rem;

  border-radius: 18px;

  border: 1px solid var(--lp-border);

  background: rgba(255, 255, 255, .03);

  transition: opacity .5s ease, transform .5s ease, border-color var(--lp-transition), background var(--lp-transition);

}



.lp-plan[data-lp-reveal] { opacity: 0; transform: translateY(18px); }

.lp-plan.is-in { opacity: 1; transform: none; transition-delay: var(--lp-row-delay, 0ms); }



.lp-plan:hover { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .05); }



/**

 * Pakiet wyrozniony. Gradientowa obwodka zrobiona dwiema warstwami tla

 * (padding-box + border-box) - to jedyny sposob, zeby miec gradient na

 * samej ramce bez dokladania pseudoelementu pod spodem.

 */

@property --lp-plan-spin {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.lp-plan--hi {

  border: 1px solid transparent;

  /* Warstwa padding-box MUSI byc nieprzezroczysta - przy polprzezroczystej

     gradient spod spodu przebijal przez cala karte zamiast zostac na ramce. */

  /* Ramka to obracajacy sie conic-gradient (ta sama paleta co --lp-gradient),
     wiec swiatlo faktycznie jezdzi dookola karty zamiast stac w miejscu. */
  background:

    linear-gradient(#14141c, #14141c) padding-box,

    conic-gradient(from var(--lp-plan-spin), #cc00a6, #7338ea, #4c1d9e, #a01580, #cc00a6) border-box;

  box-shadow: 0 24px 60px rgba(204, 0, 166, .16);

  animation: lp-plan-spin 4s linear infinite, lp-plan-glow 2.6s ease-in-out infinite;

}



.lp-plan--hi:hover { background:

  linear-gradient(#191922, #191922) padding-box,

  conic-gradient(from var(--lp-plan-spin), #cc00a6, #7338ea, #4c1d9e, #a01580, #cc00a6) border-box; }



/**
 * Bez @property przegladarka traktuje --lp-plan-spin jak zwykly napis
 * i nie umie go animowac - ramka stala w miejscu, mimo poprawnych klatek.
 * Rejestracja jako <angle> daje plynna interpolacje.
 */
@property --lp-plan-spin {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes lp-plan-spin {
  to { --lp-plan-spin: 360deg; }
}

@keyframes lp-plan-glow {
  0%, 100% { box-shadow: 0 24px 60px rgba(204, 0, 166, .16); }
  50%      { box-shadow: 0 24px 70px rgba(115, 56, 234, .3); }
}

@media (prefers-reduced-motion: reduce) {
  .lp-plan--hi { animation: none; }
}



.lp-plan__badge {

  position: absolute;

  top: -.75rem;

  left: 50%;

  transform: translateX(-50%);

  padding: .3rem .85rem;

  border-radius: 999px;

  background: var(--lp-gradient);

  color: #fff;

  font-family: var(--lp-font-head);

  font-weight: 700;

  font-size: .6875rem;

  letter-spacing: .04em;

  white-space: nowrap;

}



.lp-plan__name {

  font-family: var(--lp-font-head);

  font-weight: 800;

  font-size: 1.375rem;

  letter-spacing: -.02em;

  margin: 0 0 .5rem;

}



.lp-plan__desc {

  margin: 0 0 1.5rem;

  color: var(--lp-muted);

  font-size: .9375rem;

  line-height: 1.55;

  min-height: 3rem;

}



.lp-plan__price {

  font-family: var(--lp-font-display);

  font-size: clamp(1.75rem, 3.4vw, 2.25rem);

  line-height: 1.1;

  letter-spacing: -.03em;

  margin: 0 0 1.5rem;

  padding-bottom: 1.5rem;

  border-bottom: 1px solid var(--lp-border);

  background: var(--lp-gradient);

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

}



.lp-plan__list { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: .75rem; }



.lp-plan__item {

  display: flex;

  align-items: flex-start;

  gap: .625rem;

  color: #c9c9d3;

  font-size: .9375rem;

  line-height: 1.45;

}



/* Pierwsza pozycja kazdego wyzszego pakietu: "wszystko z poprzedniego". */

.lp-plan__item--strong { color: var(--lp-text); font-weight: 700; }



.lp-plan__list .lp-perk__check { width: 18px; height: 18px; margin-top: .1rem; }

.lp-plan__list .lp-perk__check::before { width: 1.8px; height: 5px; left: 5.5px; top: 8px; }

.lp-plan__list .lp-perk__check::after  { width: 1.8px; height: 9px; left: 9.5px; top: 4px; }



.lp-plan__cta { margin-top: auto; width: 100%; }





.lp-pricing__note {

  margin: 2rem 0 0;

  text-align: center;

  color: var(--lp-muted);

  font-size: .875rem;

}



/* ---------- Porownanie: mobile jako karty ---------- */



.lp-compare__head { display: none; }



.lp-compare__row {

  display: grid;

  gap: .5rem;

  padding: 1.25rem;

  margin-bottom: 1rem;

  background: var(--lp-card);

  border: 1px solid var(--lp-border);

  border-radius: var(--lp-radius);

}



.lp-compare__cell { display: block; color: var(--lp-muted); font-size: .9375rem; }



.lp-compare__cell[data-kol]::before {

  content: attr(data-kol) ": ";

  color: var(--lp-text);

  opacity: .5;

  font-size: .8125rem;

}



.lp-compare__cell--label {

  font-family: var(--lp-font-head);

  font-weight: 700;

  font-size: 1.0625rem;

  color: var(--lp-text);

  margin-bottom: .25rem;

}



.lp-compare__cell--us { color: var(--lp-text); font-weight: 600; }

.lp-compare__cell--us::before { color: var(--lp-primary); opacity: 1; }



/* ---------- Proces ---------- */



.lp-process__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }



.lp-process__step {

  padding: 1.5rem;

  background: var(--lp-bg);

  border: 1px solid var(--lp-border);

  border-radius: var(--lp-radius);

}



.lp-process__num {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 2rem;

  height: 2rem;

  border-radius: 999px;

  background: var(--lp-primary);

  color: #fff;

  font-family: var(--lp-font-head);

  font-weight: 800;

  font-size: .9375rem;

  margin-bottom: .875rem;

}



.lp-process__title { font-family: var(--lp-font-head); font-weight: 700; font-size: 1.1875rem; margin: 0 0 .375rem; }

.lp-process__text { margin: 0 0 .5rem; color: var(--lp-muted); }

.lp-process__czas { margin: 0; font-size: .875rem; font-weight: 600; color: var(--lp-primary); }



.lp-process__suma {

  margin: 1.75rem 0 0;

  padding: 1.25rem;

  background: var(--lp-primary-soft);

  border-radius: var(--lp-radius);

  font-weight: 600;

}



/* ---------- Opinie ---------- */



.lp-reviews__shots,

.lp-reviews__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }



.lp-reviews__img { border-radius: var(--lp-radius); border: 1px solid var(--lp-border); width: 100%; }



.lp-reviews__card {

  padding: 1.5rem;

  background: var(--lp-card);

  border: 1px solid var(--lp-border);

  border-radius: var(--lp-radius);

}



/**

 * Widzet Trustindex. Wtyczka wnosi wlasne tlo i ramki pod jasny motyw,

 * wiec zdejmujemy je i przejmujemy kolor tekstu, zeby opinie wygladaly

 * jak czesc strony, a nie jak wklejony obcy element.

 */

.lp-reviews__embed,

.lp-hero__badge { color: var(--lp-text); }



/* Plakietka w hero: wysrodkowana, bez wlasnych marginesow wtyczki. */

.lp-hero__badge {

  display: flex;

  justify-content: center;

  margin-top: 1.75rem;

}



.lp-hero__badge .ti-widget { margin: 0 !important; }



.lp-hero__badge .ti-widget,

.lp-hero__badge .ti-widget-container,

.lp-reviews__embed .ti-widget,

.lp-reviews__embed .ti-widget-container,

.lp-reviews__embed .ti-review-item,

.lp-reviews__embed .ti-review-item > .ti-inner {

  background: transparent !important;

  box-shadow: none !important;

}



.lp-reviews__embed .ti-review-item > .ti-inner {

  border: 1px solid var(--lp-border) !important;

  border-radius: var(--lp-radius) !important;

}



.lp-reviews__embed .ti-widget .ti-name,

.lp-reviews__embed .ti-widget .ti-review-text,

.lp-reviews__embed .ti-widget .ti-rating-text {

  color: var(--lp-text) !important;

}



.lp-reviews__embed .ti-widget .ti-date,

.lp-reviews__embed .ti-widget .ti-review-header {

  color: var(--lp-muted) !important;

}



.lp-reviews__stars { color: #ffc531; letter-spacing: .05em; }

.lp-reviews__tresc { margin: .625rem 0 1rem; }

.lp-reviews__autor { margin: 0; font-size: .875rem; color: var(--lp-muted); }



/* ---------- FAQ ---------- */



.lp-faq { position: relative; isolation: isolate; overflow: hidden; }

.lp-faq > .lp-container { position: relative; z-index: 1; }



.lp-faq__aura {

  position: absolute;

  z-index: -1;

  top: 10%;

  left: -8%;

  width: 46vw;

  max-width: 620px;

  aspect-ratio: 1;

  border-radius: 50%;

  pointer-events: none;

  mix-blend-mode: screen;

  background: radial-gradient(circle closest-side,

    rgba(115, 56, 234, .22) 0%, rgba(115, 56, 234, .08) 42%, transparent 100%);

  animation: lp-aura-1 25s ease-in-out infinite;

}



.lp-faq__layout { display: grid; gap: 2.5rem; }



/* ---- lewa kolumna ---- */



.lp-faq__side[data-lp-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }

.lp-faq__side.is-in { opacity: 1; transform: none; }



.lp-faq__headline {

  font-family: var(--lp-font-head);

  font-weight: 800;

  font-size: clamp(1.75rem, 4vw, 2.875rem);

  line-height: 1.08;

  letter-spacing: -.025em;

  margin: 1rem 0 .875rem;

  max-width: 16ch;

}



.lp-faq__accent {

  background: var(--lp-gradient);

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

}



.lp-faq__lead { margin: 0 0 2rem; color: var(--lp-muted); font-size: 1.0625rem; max-width: 34ch; }



/**

 * Karta kontaktowa. Szklana, z gradientowa obwodka - ma wygladac jak

 * element, ktory zaprasza do klikniecia, a nie jak ramka informacyjna.

 */

.lp-faq__box {

  padding: 1.75rem 1.5rem;

  border-radius: 18px;

  border: 1px solid transparent;

  background:

    linear-gradient(#0d0d14, #0d0d14) padding-box,

    var(--lp-gradient) border-box;

  box-shadow: 0 20px 50px rgba(204, 0, 166, .14);

}



.lp-faq__box-title {

  font-family: var(--lp-font-head);

  font-weight: 800;

  font-size: 1.1875rem;

  line-height: 1.25;

  margin: 0 0 .5rem;

}



.lp-faq__box-text { margin: 0 0 1.25rem; color: var(--lp-muted); font-size: .9375rem; line-height: 1.55; }



.lp-faq__phone {

  display: block;

  margin-bottom: 1rem;

  text-decoration: none;

  color: var(--lp-text);

}



.lp-faq__phone-label {

  display: block;

  font-size: .6875rem;

  letter-spacing: .12em;

  text-transform: uppercase;

  color: var(--lp-muted);

  margin-bottom: .15rem;

}



.lp-faq__phone-num {

  display: block;

  font-family: var(--lp-font-head);

  font-weight: 800;

  font-size: 1.375rem;

  letter-spacing: -.01em;

  transition: color var(--lp-transition);

}



.lp-faq__phone:hover .lp-faq__phone-num { color: var(--lp-primary); }



.lp-faq__box-btn { width: 100%; }



/* ---- lista pytan ---- */



.lp-faq__list { display: grid; gap: .75rem; align-content: start; }



/**

 * Pojedyncze pytanie jako szklana karta. Otwarte dostaje gradientowa

 * obwodke, wiec widac, gdzie sie jest, bez czytania.

 */

.lp-faq__item {

  border-radius: 14px;

  border: 1px solid var(--lp-border);

  background: rgba(255, 255, 255, .03);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  overflow: hidden;

  transition: opacity .45s ease, transform .45s ease, border-color var(--lp-transition), background var(--lp-transition);

}



.lp-faq__item[data-lp-reveal] { opacity: 0; transform: translateY(12px); }

.lp-faq__item.is-in { opacity: 1; transform: none; transition-delay: var(--lp-row-delay, 0ms); }



.lp-faq__item:hover { background: rgba(255, 255, 255, .055); border-color: rgba(255, 255, 255, .2); }

.lp-faq__item[open] { border-color: rgba(204, 0, 166, .5); background: rgba(255, 255, 255, .05); }



.lp-faq__q {

  list-style: none;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

  padding: 1.125rem 1.25rem;

  font-family: var(--lp-font-head);

  font-weight: 700;

  font-size: 1.0625rem;

  line-height: 1.3;

}



.lp-faq__q::-webkit-details-marker { display: none; }



/* Plus zmieniajacy sie w minus. Dwie kreski, bez ikony i bez pliku. */

.lp-faq__sign {

  position: relative;

  flex: 0 0 auto;

  width: 26px;

  height: 26px;

  border-radius: 50%;

  background: var(--lp-gradient);

  transition: transform .3s ease;

}



.lp-faq__sign::before,

.lp-faq__sign::after {

  content: "";

  position: absolute;

  top: 50%;

  left: 50%;

  background: #fff;

  border-radius: 2px;

  transform: translate(-50%, -50%);

  transition: opacity .25s ease;

}



.lp-faq__sign::before { width: 11px; height: 2px; }

.lp-faq__sign::after  { width: 2px; height: 11px; }



.lp-faq__item[open] .lp-faq__sign { transform: rotate(180deg); }

.lp-faq__item[open] .lp-faq__sign::after { opacity: 0; }



.lp-faq__a {

  padding: 0 1.25rem 1.25rem;

  color: var(--lp-muted);

  font-size: 1rem;

  line-height: 1.65;

}



.lp-faq__a p { margin: 0 0 .75rem; max-width: 62ch; }

.lp-faq__a p:last-child { margin-bottom: 0; }



/* ---------- Formularz ---------- */



.lp-form-section {

  position: relative;

  isolation: isolate;

  overflow: hidden;

  background: var(--lp-bg-alt);

  scroll-margin-top: 1rem;

}



.lp-form-section > .lp-container { position: relative; z-index: 1; }



.lp-form-section__aura {

  position: absolute;

  z-index: -1;

  top: 6%;

  right: -10%;

  width: 48vw;

  max-width: 640px;

  aspect-ratio: 1;

  border-radius: 50%;

  pointer-events: none;

  mix-blend-mode: screen;

  background: radial-gradient(circle closest-side,

    rgba(204, 0, 166, .2) 0%, rgba(115, 56, 234, .08) 45%, transparent 100%);

}



.lp-form-section__inner { display: grid; gap: 2.5rem; }



/* Do breakpointu desktopowego intro rozpada sie na osobne komorki siatki,

   zeby formularz mogl stanac przed krokami. */

.lp-form-section__intro { display: contents; }

.lp-form-section__head { order: 1; }

.lp-form-wrap { order: 2; }

.lp-form-section__steps { order: 3; }

.lp-form-section__call { order: 4; }

.lp-form-section__steps { margin-top: 0; }

.lp-form-section__call { margin-top: 0; }

.lp-form-section__lead { color: var(--lp-muted); margin: 0 0 .5rem; max-width: 48ch; }



/* ---- lewa kolumna: kroki i telefon ---- */



.lp-form-section__steps { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.25rem; }

.lp-form-section__step { display: grid; grid-template-columns: 2rem 1fr; gap: 1rem; align-items: start; }



.lp-form-section__step-num {

  display: grid;

  place-items: center;

  width: 2rem;

  height: 2rem;

  border-radius: 50%;

  background: var(--lp-gradient);

  color: #fff;

  font-size: .8125rem;

  font-weight: 700;

}



.lp-form-section__step-text { color: var(--lp-muted); line-height: 1.55; }



.lp-form-section__call {

  margin-top: 2rem;

  padding-top: 1.5rem;

  border-top: 1px solid var(--lp-border);

  display: grid;

  gap: .25rem;

}



.lp-form-section__call-label { font-size: .875rem; color: var(--lp-muted); }



.lp-form-section__call-num {

  font-size: 1.5rem;

  text-decoration: none;

  font-weight: 700;

  color: var(--lp-text);

  letter-spacing: -.01em;

  transition: color var(--lp-transition);

}



.lp-form-section__call-num:hover { color: var(--lp-primary); }



/* ---- karta formularza ---- */



.lp-form-wrap { position: relative; }



.lp-form {

  padding: 1.5rem;

  background: var(--lp-bg);

  border: 1px solid var(--lp-border);

  border-radius: var(--lp-radius);

}



.lp-form[hidden] { display: none; }



.lp-form__row { margin-bottom: 1rem; }



/* Skrocony wariant: dwa pola i zgoda, wiec karta moze oddychac. */

.lp-form--short { padding: 1.75rem 1.5rem; }

.lp-form__intro { margin: 0 0 1.25rem; font-size: .9375rem; color: var(--lp-muted); }



.lp-form__label { display: block; margin-bottom: .375rem; font-size: .875rem; font-weight: 600; }

.lp-form__opt { font-weight: 400; color: var(--lp-muted); font-size: .8125rem; }



.lp-form__input {

  width: 100%;

  padding: .875rem 1rem;

  background: var(--lp-card);

  border: 1px solid var(--lp-border);

  border-radius: 10px;

  color: var(--lp-text);

  font-family: var(--lp-font-body);

  font-size: 1rem;

  min-height: 50px;

  transition: border-color var(--lp-transition), box-shadow var(--lp-transition);

}



.lp-form__input::placeholder { color: rgba(163, 163, 173, .7); }



.lp-form__input:focus {

  outline: none;

  border-color: var(--lp-primary);

  box-shadow: 0 0 0 3px rgba(204, 0, 166, .16);

}



/* ---- kafelki wyboru zakresu ---- */



.lp-form__fieldset { margin: 0 0 1.25rem; padding: 0; border: 0; }

.lp-form__legend { padding: 0; margin-bottom: .625rem; font-size: .875rem; font-weight: 600; }



.lp-form__choices { display: grid; gap: .625rem; grid-template-columns: 1fr; }



@media (min-width: 480px) {

  .lp-form__choices { grid-template-columns: repeat(2, 1fr); }

}



.lp-form__choice { position: relative; display: block; cursor: pointer; }



/* Radio zostaje w drzewie dostepnosci, tylko schodzi z oczu. display:none

   wyrzucilby go z nawigacji klawiatura. */

.lp-form__choice input {

  position: absolute;

  opacity: 0;

  width: 1px;

  height: 1px;

  pointer-events: none;

}



.lp-form__choice-box {

  display: grid;

  gap: .125rem;

  height: 100%;

  padding: .875rem;

  background: var(--lp-card);

  border: 1px solid var(--lp-border);

  border-radius: 10px;

  transition: border-color var(--lp-transition), background var(--lp-transition);

}



.lp-form__choice:hover .lp-form__choice-box { border-color: rgba(204, 0, 166, .45); }



.lp-form__choice input:focus-visible + .lp-form__choice-box {

  border-color: var(--lp-primary);

  box-shadow: 0 0 0 3px rgba(204, 0, 166, .16);

}



.lp-form__choice input:checked + .lp-form__choice-box {

  border-color: var(--lp-primary);

  background: rgba(204, 0, 166, .1);

}



.lp-form__choice-title { font-size: .9375rem; font-weight: 600; line-height: 1.3; }

.lp-form__choice-desc { font-size: .8125rem; color: var(--lp-muted); line-height: 1.35; }



/* ---- separator miedzy kwalifikacja a danymi kontaktowymi ---- */



.lp-form__sep { margin: 1.5rem 0; border: 0; border-top: 1px solid var(--lp-border); }



.lp-form__grid { display: grid; gap: 0; }



/* ---- bledy ---- */



.lp-form__error { margin: .375rem 0 0; font-size: .8125rem; color: #f87171; }

.lp-form__error:empty { display: none; }



.lp-form__input[aria-invalid="true"] { border-color: #f87171; }

.lp-form__input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(248, 113, 113, .16); }



[data-lp-field="extra_zakres"].has-error .lp-form__choice-box { border-color: rgba(248, 113, 113, .6); }

[data-lp-field="gdpr_consent"].has-error .lp-form__consent input { outline: 2px solid #f87171; outline-offset: 2px; }



/* ---- zgoda, przycisk, mikrokopia ---- */



.lp-form__row--consent { margin-block: 1.25rem; }



.lp-form__consent { display: flex; gap: .625rem; align-items: flex-start; font-size: .875rem; color: var(--lp-muted); cursor: pointer; }

.lp-form__consent input { margin-top: .2rem; width: 18px; height: 18px; accent-color: var(--lp-primary); flex: 0 0 auto; }

.lp-form__consent a { color: var(--lp-text); }



.lp-form__submit { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .625rem; }



.lp-form__spinner {

  display: none;

  width: 16px;

  height: 16px;

  border: 2px solid rgba(255, 255, 255, .35);

  border-top-color: #fff;

  border-radius: 50%;

  animation: lp-spin .7s linear infinite;

}



@keyframes lp-spin { to { transform: rotate(360deg); } }



.lp-form.is-sending .lp-form__submit { pointer-events: none; }

.lp-form.is-sending .lp-form__spinner { display: block; }



.lp-form__micro {

  display: flex;

  flex-wrap: wrap;

  gap: .5rem 1rem;

  margin: 1rem 0 0;

  font-size: .8125rem;

  color: var(--lp-muted);

  justify-content: center;

}



.lp-form__micro--ticks { list-style: none; padding: 0; }



.lp-form__micro--ticks li {

  position: relative;

  padding-left: 1.375rem;

}



.lp-form__micro--ticks li::before {

  content: "";

  position: absolute;

  left: .25rem;

  top: .42em;

  width: 5px;

  height: 9px;

  border: solid var(--lp-primary);

  border-width: 0 2px 2px 0;

  transform: rotate(45deg);

}



.lp-form__status { margin-top: 1rem; font-size: .9375rem; }

.lp-form__status:empty { display: none; }

.lp-form__status--ok { color: #4ade80; }

.lp-form__status--err { color: #f87171; }



/* ---- panel po wyslaniu ---- */



.lp-form-done {

  padding: 2.5rem 1.5rem;

  text-align: center;

  background: var(--lp-bg);

  border: 1px solid rgba(204, 0, 166, .35);

  border-radius: var(--lp-radius);

}



.lp-form-done[hidden] { display: none; }



.lp-form-done__mark {

  display: block;

  width: 56px;

  height: 56px;

  margin: 0 auto 1.25rem;

  border-radius: 50%;

  background: var(--lp-gradient);

  position: relative;

}



.lp-form-done__mark::after {

  content: "";

  position: absolute;

  top: 46%;

  left: 50%;

  width: 11px;

  height: 20px;

  border: solid #fff;

  border-width: 0 2.5px 2.5px 0;

  transform: translate(-50%, -50%) rotate(45deg);

}



.lp-form-done__title { margin: 0 0 .625rem; font-size: 1.5rem; }

.lp-form-done__text { margin: 0 auto; max-width: 42ch; color: var(--lp-muted); line-height: 1.6; }



.lp-form-done__phone {

  display: inline-block;

  text-decoration: none;

  margin-top: 1.5rem;

  font-size: 1.375rem;

  font-weight: 700;

  color: var(--lp-text);

}



.lp-form-done__phone:hover { color: var(--lp-primary); }



/* ---------- Realizacje: samojezdna karuzela ---------- */



.lp-works { position: relative; isolation: isolate; overflow: hidden; }



.lp-works__aura {

  position: absolute;

  z-index: -1;

  top: 8%;

  left: -12%;

  width: 46vw;

  max-width: 620px;

  aspect-ratio: 1;

  border-radius: 50%;

  pointer-events: none;

  mix-blend-mode: screen;

  background: radial-gradient(circle closest-side,

    rgba(115, 56, 234, .2) 0%, rgba(204, 0, 166, .07) 45%, transparent 100%);

}



.lp-works__head { position: relative; z-index: 1; text-align: center; max-width: 46rem; margin-bottom: 2rem; }



.lp-works__heading {

  margin: 0 0 1rem;

  font-family: var(--lp-font-head);

  font-weight: 800;

  font-size: clamp(2rem, 5.5vw, 3.25rem);

  line-height: 1.05;

  letter-spacing: -.02em;

}



.lp-works__heading-accent {

  background: var(--lp-gradient);

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

}



.lp-works__lead { margin: 0; color: var(--lp-muted); line-height: 1.6; }

.lp-works__lead strong { color: var(--lp-text); }



/* ---- filtry ---- */



/* Pasek branz ze strzalkami po bokach. */

.lp-works__filters-wrap {

  position: relative;

  z-index: 1;

  display: flex;

  align-items: center;

  gap: .5rem;

  margin-top: 1.75rem;

  margin-bottom: 2.25rem;

}



.lp-works__fnav {

  display: grid;

  place-items: center;

  flex: 0 0 auto;

  width: 2.25rem;

  height: 2.25rem;

  background: var(--lp-card);

  border: 1px solid var(--lp-border);

  border-radius: 50%;

  color: var(--lp-text);

  cursor: pointer;

  transition: border-color var(--lp-transition), background var(--lp-transition), opacity var(--lp-transition);

}



.lp-works__fnav svg { width: .875rem; height: .875rem; }

.lp-works__fnav:hover { border-color: var(--lp-primary); background: rgba(204, 0, 166, .15); }

.lp-works__fnav[hidden] { display: none; }



/* Na krancu strzalka gasnie zamiast znikac - pasek nie skacze w bok. */

.lp-works__fnav.is-off { opacity: .25; pointer-events: none; }



/* Jedna linia. Gdy kategorii przybedzie albo ekran bedzie za waski, pasek

   da sie przesunac palcem, kolkiem albo strzalkami zamiast zawijac. */

.lp-works__filters {

  display: flex;

  flex-wrap: nowrap;

  justify-content: safe center;

  gap: .5rem;

  flex: 1 1 auto;

  overflow-x: auto;

  scrollbar-width: none;

  -webkit-overflow-scrolling: touch;

  touch-action: pan-x pan-y pinch-zoom;

}



.lp-works__filters::-webkit-scrollbar { display: none; }



/* Przy dziewieciu branzach pasek nie miesci sie na jednym ekranie, wiec

   gasnie po bokach - to sygnal, ze jest czego szukac dalej. */

.lp-works__filters {

  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100%);

  mask-image: linear-gradient(90deg, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100%);

}



.lp-works__filter {

  flex: 0 0 auto;

  white-space: nowrap;

  padding: .5rem .875rem;

  border-radius: 999px;

  background: var(--lp-card);

  border: 1px solid var(--lp-border);

  color: var(--lp-muted);

  font-family: var(--lp-font-head);

  font-size: .6875rem;

  font-weight: 700;

  letter-spacing: .06em;

  text-transform: uppercase;

  cursor: pointer;

  transition: border-color var(--lp-transition), color var(--lp-transition), background var(--lp-transition);

}



.lp-works__filter:hover { border-color: rgba(204, 0, 166, .55); color: var(--lp-text); }



.lp-works__filter.is-active {

  background: var(--lp-gradient);

  border-color: transparent;

  color: #fff;

}



/* ---- pas z kartami ---- */



.lp-works__stage { position: relative; z-index: 1; }



/* Przyciemnienie krawedzi: karty wyjezdzaja z ciemnosci i w niej znikaja,

   zamiast urywac sie na ostrej krawedzi ekranu. Nakladki nie lapia kliniec,

   wiec przeciaganie pasa palcem przy krawedzi dziala normalnie. */

.lp-works__stage::before,

.lp-works__stage::after {

  content: "";

  position: absolute;

  top: 0;

  bottom: 0;

  z-index: 2;

  /* Szeroko i mocno, bo zrzuty stron sa w wiekszosci biale - waski gradient

     na takim tle po prostu nie istnieje. */

  width: clamp(5rem, 20vw, 20rem);

  pointer-events: none;

}



.lp-works__stage::before {

  left: 0;

  background: linear-gradient(90deg,

    var(--lp-bg) 0%,

    rgba(5, 6, 10, .96) 25%,

    rgba(5, 6, 10, .75) 55%,

    rgba(5, 6, 10, .35) 78%,

    transparent 100%);

}



.lp-works__stage::after {

  right: 0;

  background: linear-gradient(270deg,

    var(--lp-bg) 0%,

    rgba(5, 6, 10, .96) 25%,

    rgba(5, 6, 10, .75) 55%,

    rgba(5, 6, 10, .35) 78%,

    transparent 100%);

}



/* Pas wychodzi poza kontener na pelna szerokosc, zeby karty wjezdzaly

   i wyjezdzaly z kadru zamiast urywac sie na krawedzi kolumny. */

.lp-works__viewport {

  position: relative;

  z-index: 1;

  overflow-x: auto;

  overflow-y: hidden;

  /* Bez scroll-snap i bez scroll-behavior. Pas jest zapetlony i przeskakuje

     o rozpietosc zestawu, a jedno i drugie probowalo te przeskoki animowac:

     zatrzask dociagal pas po kazdym skoku, a plynny scroll w CSS zamienial

     natychmiastowe ustawienie pozycji w kolejna animacje. Plynnosc daje

     scrollTo z behavior:'smooth' tam, gdzie jest potrzebna. */

  scrollbar-width: none;

  -webkit-overflow-scrolling: touch;

  /* pan-y musi zostac, inaczej pionowy scroll strony umiera na telefonie */

  touch-action: pan-x pan-y pinch-zoom;

  padding-inline: var(--lp-px);

  padding-block: 1.25rem;

}



.lp-works__viewport::-webkit-scrollbar { display: none; }



.lp-works__track { display: flex; gap: 1rem; width: max-content; }



/* Tryb spokojny: za malo kart na karuzele, wiec staja na srodku. */

/* Krotki zestaw: karty na srodku, ale pas moze byc szerszy niz ekran -
   inaczej na telefonie druga karta zostaje poza kadrem bez dojazdu. */
.lp-works__track.is-short { min-width: 100%; width: max-content; justify-content: center; }

/* Strzalki gasna dopiero, gdy naprawde nie ma dokad jechac (klase nadaje
   skrypt po zmierzeniu pasa), a nie na sam widok krotkiej listy. */
.lp-works.is-static .lp-works__arrow { display: none; }

.lp-works.is-short .lp-works__stage::before,

.lp-works.is-short .lp-works__stage::after { opacity: 0; }



.lp-works__item {

  position: relative;

  flex: 0 0 auto;

  width: clamp(260px, 74vw, 420px);

  aspect-ratio: 3 / 4;

  overflow: hidden;

  border-radius: 14px;

  border: 1px solid var(--lp-border);

  background: var(--lp-card);

  transition: border-color .4s ease, box-shadow .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1);

}



.lp-works__item.is-filtered-out { display: none; }

.lp-works__item:hover { border-color: rgba(204, 0, 166, .5); }



.lp-works__media { position: absolute; inset: 0; overflow: hidden; }



/* Dwie kopie zrzutu jedna pod druga: przesuw o polowe wysokosci daje

   bezszwowa petle, wiec po stopce znow widac gore strony. */

.lp-works__scroll {

  display: block;

  width: 100%;

  transform: translateY(0);

  /* Wolno, bo to ma dac obejrzec strone, a nie przeleciec przez nia.

     Przy wiekszych kartach 7s bylo za szybkie. */

  transition: transform 14s linear;

}



/**

 * Karta, ktora przestala byc zywa, wraca na gore od razu.

 *

 * Bez tego powrot do translateY(0) szedl tym samym 14-sekundowym tempem,

 * wiec zrzut pelzal jeszcze dlugo po tym, jak karuzela przesunela sie dalej,

 * i wygladalo to, jakby kilka kart krecilo sie naraz.

 */

.lp-works__item:not(.is-live):not(:hover) .lp-works__scroll {

  transition: transform .45s ease;

}



.lp-works__scroll img {

  display: block;

  width: 100%;

  height: auto;

  filter: grayscale(1) contrast(1.05);

  transition: filter .7s ease;

}



/**

 * Zywa karta: ta na srodku kadru albo ta pod kursorem. Tylko ona ma kolor,

 * przewija zrzut i pokazuje podpis. Reszta zostaje szara i spokojna, dzieki

 * czemu wzrok ma jeden punkt zaczepienia zamiast szesnastu naraz.

 *

 * Klasa :hover zostaje jako zapas dla trybu bez JavaScriptu.

 */

.lp-works__item.is-live,

.lp-works__item:hover {

  border-color: rgba(204, 0, 166, .55);

  box-shadow: 0 26px 70px rgba(204, 0, 166, .28);

  /* Lekkie uniesienie: aktywna karta wychodzi przed szereg, wiec wzrok

     lapie ja, zanim jeszcze zauwazy, ze to ona jest kolorowa. */

  transform: translateY(-14px);

}



.lp-works__item.is-live .lp-works__scroll,

.lp-works__item:hover .lp-works__scroll { transform: translateY(-50%); }



.lp-works__item.is-live .lp-works__scroll img,

.lp-works__item:hover .lp-works__scroll img { filter: grayscale(0); }



.lp-works__caption {

  position: absolute;

  inset-inline: 0;

  bottom: 0;

  display: flex;

  flex-direction: column;

  gap: .15em;

  padding: 2rem .9rem .75rem;

  text-align: left;

  background: linear-gradient(0deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .5) 55%, transparent 100%);

  pointer-events: none;

  opacity: 0;

  transform: translateY(12px);

  transition: opacity .3s ease, transform .3s ease;

}



.lp-works__item.is-live .lp-works__caption,

.lp-works__item:hover .lp-works__caption { opacity: 1; transform: none; }



.lp-works__title {

  font-family: var(--lp-font-head);

  font-weight: 700;

  font-size: 1rem;

  line-height: 1.25;

  color: #fff;

}



.lp-works__tag { font-size: .8125rem; font-weight: 600; color: var(--lp-primary); }



/* ---- dol sekcji ---- */



.lp-works__foot { position: relative; z-index: 1; margin-top: 1.75rem; display: grid; justify-items: center; }



.lp-works__arrow {

  position: absolute;

  top: 50%;

  z-index: 3;

  display: grid;

  place-items: center;

  width: 3.25rem;

  height: 3.25rem;

  margin-top: -1.625rem;

  /* Gradient marki, nie szara plamka. Strzalki leza na zrzutach stron,

     ktore sa w wiekszosci biale - neutralny krazek na takim tle ginie. */

  background: var(--lp-gradient);

  border: 0;

  border-radius: 50%;

  color: #fff;

  box-shadow: 0 14px 34px rgba(204, 0, 166, .45);

  cursor: pointer;

  transition: box-shadow var(--lp-transition), transform var(--lp-transition), filter var(--lp-transition);

}



.lp-works__arrow svg { width: 1.25rem; height: 1.25rem; }



.lp-works__arrow:hover {

  filter: brightness(1.12);

  box-shadow: 0 18px 44px rgba(204, 0, 166, .6);

  transform: scale(1.08);

}



.lp-works__arrow:active { transform: scale(.96); }



.lp-works__arrow--prev { left: clamp(.5rem, 2vw, 2rem); }

.lp-works__arrow--next { right: clamp(.5rem, 2vw, 2rem); }



.lp-works__empty {

  margin: 1.5rem 0 0;

  text-align: center;

  color: var(--lp-muted);

}



.lp-works__empty[hidden] { display: none; }



/* Bez najechania zrzut stoi, wiec podpis musi byc widoczny od razu -

   inaczej polowa ludzi nigdy nie zobaczy, czyja to strona. */

@media (hover: none) {

  .lp-works__caption {

    opacity: 1;

    transform: none;

    background: rgba(5, 6, 10, .92);

    padding: .625rem .75rem .6875rem;

  }



  .lp-works__title { font-size: .875rem; }

  .lp-works__tag { font-size: .6875rem; }

}



/* ---------- Darmowy audyt strony ---------- */



.lp-audit {

  position: relative;

  isolation: isolate;

  overflow: hidden;

  background: var(--lp-bg-alt);

  scroll-margin-top: 1rem;

}



.lp-audit > .lp-container { position: relative; z-index: 1; }



.lp-audit__aura {

  position: absolute;

  z-index: -1;

  top: 4%;

  right: -12%;

  width: 50vw;

  max-width: 660px;

  aspect-ratio: 1;

  border-radius: 50%;

  pointer-events: none;

  mix-blend-mode: screen;

  background: radial-gradient(circle closest-side,

    rgba(204, 0, 166, .2) 0%, rgba(115, 56, 234, .08) 45%, transparent 100%);

}



/* Uklad wysrodkowany, jedna kolumna. Naglowek, korzysci i pole na adres

   ida w pionie, bo czytelnik ma przejsc przez nie w jednej kolejnosci,

   a nie wybierac, ktora polowe ekranu czytac najpierw. */

.lp-audit__inner {

  display: grid;

  gap: 3rem;

  justify-items: center;

  text-align: center;

}



.lp-audit__head { max-width: 46rem; }



.lp-audit__headline {

  margin: 0 0 1rem;

  font-family: var(--lp-font-head);

  font-weight: 800;

  font-size: clamp(2.25rem, 7vw, 4rem);

  line-height: 1.02;

  letter-spacing: -.025em;

}



.lp-audit__accent {

  background: var(--lp-gradient);

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

}



/* Stempel "za darmo". Przechylony prostokat na gradiencie, zeby cena zero

   czytala sie jako nalepka przybita na naglowku, a nie jako kolejne slowa. */

.lp-audit__stamp {

  display: inline-block;

  margin-top: .375rem;

  padding: .25em .5em .3em;

  border-radius: 12px;

  background: var(--lp-gradient);

  color: #fff;

  transform: rotate(-2.5deg);

  box-shadow: 0 18px 45px rgba(204, 0, 166, .35);

}



.lp-audit__lead {

  margin: 0 auto;

  max-width: 40rem;

  color: var(--lp-muted);

  font-size: 1.0625rem;

  line-height: 1.6;

}



/* ---- trzy korzysci ---- */



/* Lista numerowana, jedna pozycja pod druga. Bez kart, bez ramek - karty

   rozbijaly te trzy zdania na trzy osobne komunikaty, a to ma sie czytac

   jako jeden ciag. */

.lp-audit__gains-intro {

  margin: 0;

  color: var(--lp-muted);

  font-size: 1rem;

}



.lp-audit__gains {

  list-style: none;

  margin: 0;

  padding: 0;

  width: 100%;

  max-width: 44rem;

  display: grid;

  gap: 1.5rem;

  text-align: left;

}



.lp-audit__gain {

  display: grid;

  grid-template-columns: auto 1fr;

  gap: 1.25rem;

  align-items: center;

}



.lp-audit__gain-num {

  font-family: var(--lp-font-head);

  font-size: clamp(2.25rem, 6vw, 3rem);

  font-weight: 800;

  line-height: 1;

  background: var(--lp-gradient);

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

}



.lp-audit__gain-text {

  font-size: clamp(1.0625rem, 2.4vw, 1.375rem);

  font-weight: 600;

  line-height: 1.35;

}



/* ---- panel ---- */



.lp-audit__panel {

  width: 100%;

  max-width: 44rem;

  text-align: left;

}



/* Ekran wejsciowy zostaje wysrodkowany razem z reszta sekcji, bo to on

   jest wezwaniem do dzialania. Ekrany z wynikiem i formularzami wracaja

   do lewej, bo tam czyta sie liste i wypelnia pola. */

.lp-audit__stage[data-audit-stage="url"] { text-align: center; }



.lp-audit__stage[data-audit-stage="loading"],

.lp-audit__stage[data-audit-stage="result"],

.lp-audit__stage[data-audit-stage="brak"],

.lp-audit__stage[data-audit-stage="done"] {

  padding: 1.75rem 1.5rem;

  background: var(--lp-bg);

  border: 1px solid var(--lp-border);

  border-radius: var(--lp-radius);

}

.lp-audit__stage[data-audit-stage="url"] .lp-form__label { text-align: left; }

.lp-audit__stage[data-audit-stage="done"] { text-align: center; }



.lp-audit__stage[hidden] { display: none; }

.lp-audit__stage-title {

  margin: 0 0 1rem;

  font-size: clamp(1.25rem, 3vw, 1.625rem);

}

.lp-audit__stage-lead { margin: 0 0 1.5rem; color: var(--lp-muted); line-height: 1.6; }



.lp-audit__badge {

  display: inline-block;

  margin-bottom: .875rem;

  padding: .3125rem .75rem;

  border-radius: 999px;

  background: var(--lp-gradient);

  color: #fff;

  font-size: .6875rem;

  font-weight: 700;

  letter-spacing: .1em;

  text-transform: uppercase;

}



.lp-audit__label-hidden {

  position: absolute;

  width: 1px;

  height: 1px;

  overflow: hidden;

  clip: rect(0 0 0 0);

  white-space: nowrap;

}



.lp-audit__shout {

  display: grid;

  gap: .625rem;

  padding: 6px;

  border-radius: 18px;

  background: var(--lp-gradient);

  box-shadow: 0 24px 60px rgba(204, 0, 166, .3);

}



.lp-audit__url {

  width: 100%;

  min-height: 62px;

  padding: 1rem 1.25rem;

  background: var(--lp-bg);

  border: 0;

  border-radius: 12px;

  color: var(--lp-text);

  font-family: var(--lp-font-body);

  font-size: 1.0625rem;

}



.lp-audit__url::placeholder { color: rgba(163, 163, 173, .8); }

.lp-audit__url:focus { outline: 2px solid rgba(255, 255, 255, .55); outline-offset: -2px; }



.lp-audit__go {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: .625rem;

  min-height: 62px;

  padding: 0 1.75rem;

  background: var(--lp-bg);

  border: 0;

  border-radius: 12px;

  color: var(--lp-text);

  font-family: var(--lp-font-head);

  font-size: .9375rem;

  font-weight: 700;

  letter-spacing: .08em;

  text-transform: uppercase;

  cursor: pointer;

  white-space: nowrap;

  transition: background var(--lp-transition), color var(--lp-transition);

}



.lp-audit__go:hover { background: #fff; color: #05060a; }



.lp-audit__form.is-sending .lp-audit__go { pointer-events: none; }



/* ---- zakres audytu przed wpisaniem adresu ---- */



.lp-audit__scope {

  margin-top: 1.75rem;

  padding-top: 1.5rem;

  border-top: 1px solid var(--lp-border);

}



.lp-audit__scope-title {

  display: block;

  margin-bottom: .875rem;

  font-size: .6875rem;

  letter-spacing: .12em;

  text-transform: uppercase;

  color: var(--lp-muted);

}



.lp-audit__scope-list {

  list-style: none;

  margin: 0;

  padding: 0;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: .5rem;

}



.lp-audit__scope-item {

  position: relative;

  padding: .375rem .75rem .375rem 1.75rem;

  border-radius: 999px;

  background: var(--lp-card);

  border: 1px solid var(--lp-border);

  font-size: .8125rem;

  color: var(--lp-muted);

}



.lp-audit__scope-item::before {

  content: "";

  position: absolute;

  left: .75rem;

  top: .72em;

  width: 4px;

  height: 8px;

  border: solid var(--lp-primary);

  border-width: 0 1.8px 1.8px 0;

  transform: rotate(45deg);

}



.lp-audit__lock-note {

  margin: 1rem 0 0;

  font-size: .8125rem;

  color: var(--lp-muted);

  line-height: 1.5;

}



.lp-audit__field { margin-bottom: 1rem; }

.lp-audit__row { display: grid; gap: 0; }

.lp-audit__submit { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .625rem; }



.lp-audit__form.is-sending .lp-audit__submit { pointer-events: none; }

.lp-audit__form.is-sending .lp-form__spinner { display: block; }



.lp-audit__legal {

  margin: .875rem auto 0;

  max-width: 34rem;

  font-size: .8125rem;

  line-height: 1.5;

  color: rgba(163, 163, 173, .8);

}



.lp-audit__legal a { color: var(--lp-muted); text-decoration: underline; text-underline-offset: 3px; }

.lp-audit__legal a:hover { color: var(--lp-text); }



.lp-audit__switch {

  display: block;

  margin: 1.5rem auto 0;

  padding: .25rem;

  background: none;

  border: 0;

  color: var(--lp-muted);

  font-family: var(--lp-font-body);

  font-size: .9375rem;

  text-decoration: underline;

  text-underline-offset: 4px;

  cursor: pointer;

  transition: color var(--lp-transition);

}



.lp-audit__switch:hover { color: var(--lp-text); }



/* ---- ekran sprawdzania ---- */



.lp-audit__progress { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .875rem; }



.lp-audit__progress-item {

  position: relative;

  padding-left: 2rem;

  color: var(--lp-muted);

  transition: color var(--lp-transition);

}



.lp-audit__progress-item::before {

  content: "";

  position: absolute;

  left: 0;

  top: .15em;

  width: 1.125rem;

  height: 1.125rem;

  border-radius: 50%;

  border: 2px solid var(--lp-border);

  border-top-color: var(--lp-primary);

  animation: lp-spin 1s linear infinite;

}



.lp-audit__progress-item.is-done { color: var(--lp-text); }



.lp-audit__progress-count {

  margin-top: .5rem;

  padding-top: .875rem;

  border-top: 1px solid var(--lp-border);

  font-size: .875rem;

  color: var(--lp-muted);

}



.lp-audit__progress-item.is-done::before {

  border: 0;

  background: var(--lp-gradient);

  animation: none;

}



.lp-audit__progress-item.is-done::after {

  content: "";

  position: absolute;

  left: .3rem;

  top: .35em;

  width: 5px;

  height: 9px;

  border: solid #fff;

  border-width: 0 2px 2px 0;

  transform: rotate(45deg);

}



/* ---- wynik ---- */



.lp-audit__result-top {

  display: grid;

  justify-items: center;

  gap: 1.5rem;

  padding-bottom: 1.75rem;

  margin-bottom: 1.75rem;

  border-bottom: 1px solid var(--lp-border);

  text-align: center;

}



/* Pierscien z ocena. Kat wypelnienia ustawia JavaScript (--lp-dial),

   kolor idzie za poziomem wyniku, bo goła liczba nie mowi, czy to dobrze. */

.lp-audit__dial {

  position: relative;

  display: grid;

  place-items: center;

  width: 160px;

  height: 160px;

  --lp-dial: 0deg;

  --lp-dial-a: #cc00a6;

  --lp-dial-b: #7338ea;

}



.lp-audit__dial[data-level="bad"] { --lp-dial-a: #e5484d; --lp-dial-b: #ff8a3d; }

.lp-audit__dial[data-level="mid"] { --lp-dial-a: #ff8a3d; --lp-dial-b: #ffc531; }

.lp-audit__dial[data-level="ok"] { --lp-dial-a: #22c55e; --lp-dial-b: #4ade80; }



.lp-audit__dial-ring {

  position: absolute;

  inset: 0;

  border-radius: 50%;

  background: conic-gradient(var(--lp-dial-a) 0deg, var(--lp-dial-b) var(--lp-dial), rgba(255, 255, 255, .07) var(--lp-dial) 360deg);

  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 12px));

  mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 12px));

  transition: background .9s ease;

}



.lp-audit__dial-val { display: grid; justify-items: center; line-height: 1; }



.lp-audit__dial-num {

  font-family: var(--lp-font-head);

  font-size: 3.25rem;

  font-weight: 800;

  background: linear-gradient(135deg, var(--lp-dial-a), var(--lp-dial-b));

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

}



.lp-audit__dial-max { margin-top: .375rem; font-size: .875rem; color: var(--lp-muted); }



.lp-audit__tally { display: grid; gap: 1rem; justify-items: center; }

.lp-audit__tally-lead { margin: 0; color: var(--lp-muted); font-size: .9375rem; }



.lp-audit__tally-list {

  list-style: none;

  margin: 0;

  padding: 0;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: .625rem;

}



.lp-audit__tally-item {

  display: grid;

  justify-items: center;

  gap: .125rem;

  min-width: 6.5rem;

  padding: .875rem 1rem;

  background: var(--lp-card);

  border: 1px solid var(--lp-border);

  border-radius: 12px;

}



.lp-audit__tally-num { font-family: var(--lp-font-head); font-size: 1.5rem; font-weight: 800; line-height: 1; }

.lp-audit__tally-label { font-size: .75rem; color: var(--lp-muted); }



.lp-audit__tally-item--bad { border-color: rgba(229, 72, 77, .45); }

.lp-audit__tally-item--bad .lp-audit__tally-num { color: #e5484d; }

.lp-audit__tally-item--ok { border-color: rgba(74, 222, 128, .35); }

.lp-audit__tally-item--ok .lp-audit__tally-num { color: #4ade80; }



/* ---- obszary sciezki klienta ---- */



.lp-audit__areas {

  list-style: none;

  margin: 0 0 2rem;

  padding: 0;

  display: grid;

  gap: .75rem;

}



.lp-audit__area {

  animation: lp-audit-wjazd .5s cubic-bezier(.22, 1, .36, 1) both;

  animation-delay: var(--lp-delay, 0ms);

  display: grid;

  grid-template-columns: 2.25rem 1fr;

  grid-template-areas:

    "num head"

    "bar bar"

    "score score";

  gap: .5rem .875rem;

  align-items: center;

  padding: 1rem 1.125rem;

  background: var(--lp-card);

  border: 1px solid var(--lp-border);

  border-radius: 14px;

}



.lp-audit__area-num {

  grid-area: num;

  display: grid;

  place-items: center;

  width: 2.25rem;

  height: 2.25rem;

  border-radius: 50%;

  font-family: var(--lp-font-head);

  font-size: .875rem;

  font-weight: 800;

  color: #fff;

}



.lp-audit__area-head { grid-area: head; display: grid; gap: .0625rem; }

.lp-audit__area-title { font-size: .9375rem; font-weight: 700; line-height: 1.25; }

.lp-audit__area-desc { font-size: .75rem; color: var(--lp-muted); }



/* Pasek: ile w tym obszarze jest w porzadku. Jedno spojrzenie wystarczy,

   zeby zobaczyc, ktory etap sciezki klienta lezy najbardziej. */

.lp-audit__area-bar {

  grid-area: bar;

  position: relative;

  height: 6px;

  border-radius: 999px;

  background: rgba(255, 255, 255, .08);

  overflow: hidden;

}



.lp-audit__area-bar i {

  position: absolute;

  inset: 0 auto 0 0;

  border-radius: 999px;

  transition: width .9s cubic-bezier(.22, 1, .36, 1);

}



.lp-audit__area-score { grid-area: score; font-size: .8125rem; color: var(--lp-muted); }



.lp-audit__area[data-level="bad"] .lp-audit__area-num { background: linear-gradient(135deg, #e5484d, #ff8a3d); }

.lp-audit__area[data-level="bad"] .lp-audit__area-bar i { background: linear-gradient(90deg, #e5484d, #ff8a3d); }

.lp-audit__area[data-level="bad"] { border-color: rgba(229, 72, 77, .35); }



.lp-audit__area[data-level="mid"] .lp-audit__area-num { background: linear-gradient(135deg, #ff8a3d, #ffc531); }

.lp-audit__area[data-level="mid"] .lp-audit__area-bar i { background: linear-gradient(90deg, #ff8a3d, #ffc531); }



.lp-audit__area[data-level="ok"] .lp-audit__area-num { background: linear-gradient(135deg, #22c55e, #4ade80); }

.lp-audit__area[data-level="ok"] .lp-audit__area-bar i { background: linear-gradient(90deg, #22c55e, #4ade80); }

.lp-audit__area[data-level="ok"] { border-color: rgba(74, 222, 128, .3); }



/* ---- sekcje ze szczegolami ---- */



/* Sekcja jest wlasna karta, nie luznym fragmentem listy. Kazdy obszar

   czyta sie wtedy jak osobny rozdzial raportu. */

.lp-audit__section {

  margin-bottom: 1.25rem;

  padding: 1.5rem 1.25rem 1.25rem;

  background: linear-gradient(180deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, .015) 100%);

  border: 1px solid var(--lp-border);

  border-radius: 18px;

}



.lp-audit__section-title {

  display: flex;

  align-items: center;

  gap: .625rem;

  margin: 0 0 .875rem;

  font-family: var(--lp-font-head);

  font-size: 1rem;

}



.lp-audit__section-num {

  display: grid;

  place-items: center;

  width: 1.5rem;

  height: 1.5rem;

  border-radius: 50%;

  background: var(--lp-gradient);

  color: #fff;

  font-size: .75rem;

  font-weight: 800;

}



/* Skutek: co ten obszar oznacza dla klienta. Stoi NAD lista bledow, bo to

   on nadaje im sens - bez niego to tylko techniczne zarzuty. */

.lp-audit__section-skutek {

  margin: 0 0 1rem;

  padding: 0 0 0 1rem;

  border-left: 2px solid rgba(255, 255, 255, .14);

  color: var(--lp-text);

  font-size: 1rem;

  line-height: 1.5;

}



/* Rozwiazanie: zdanie zamykajace obszar. Czlowiek ma wyjsc z kazdej sekcji

   z mysla "to da sie naprawic", a nie "jestem w czarnej dziurze". */

.lp-audit__section-naprawa {

  margin: 1rem 0 0;

  padding: .875rem 1.125rem .875rem 2.75rem;

  position: relative;

  background: linear-gradient(90deg, rgba(204, 0, 166, .16) 0%, rgba(115, 56, 234, .06) 100%);

  border: 1px solid rgba(204, 0, 166, .35);

  border-radius: 12px;

  font-size: .9375rem;

  font-weight: 500;

  line-height: 1.5;

}



.lp-audit__section-naprawa::before {

  content: "";

  position: absolute;

  left: 1rem;

  top: 1.05rem;

  width: 1rem;

  height: 1rem;

  border-radius: 50%;

  background: var(--lp-gradient);

}



.lp-audit__section-naprawa::after {

  content: "";

  position: absolute;

  left: 1.34rem;

  top: 1.25rem;

  width: 4px;

  height: 7px;

  border: solid #fff;

  border-width: 0 2px 2px 0;

  transform: rotate(45deg);

}



.lp-audit__group { margin-bottom: 1.75rem; }

.lp-audit__group[hidden] { display: none; }



.lp-audit__group-title {

  margin: 0 0 .875rem;

  font-size: .6875rem;

  letter-spacing: .12em;

  text-transform: uppercase;

  color: var(--lp-muted);

}



.lp-audit__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }



/* Wiersz problemu jest teraz kompaktowy: cienka kreska z lewej zamiast

   pelnego czerwonego prostokata. Przy dziesieciu pozycjach tamto wygladalo

   jak alarm pozarowy. */

.lp-audit__item {

  position: relative;

  display: flex;

  align-items: center;

  gap: 1rem;

  padding: .875rem 1rem .875rem 1.125rem;

  background: linear-gradient(90deg, rgba(229, 72, 77, .1) 0%, rgba(255, 255, 255, .03) 55%);

  border: 1px solid rgba(229, 72, 77, .22);

  border-left: 3px solid #e5484d;

  border-radius: 0 12px 12px 0;

  animation: lp-audit-wjazd .45s cubic-bezier(.22, 1, .36, 1) both;

  animation-delay: var(--lp-delay, 0ms);

  transition: border-color var(--lp-transition), background var(--lp-transition);

}



.lp-audit__item:hover { border-color: rgba(229, 72, 77, .45); }

.lp-audit__item::before { content: none; }



.lp-audit__item-body { display: grid; gap: .125rem; flex: 1 1 auto; min-width: 0; }

.lp-audit__item-label { font-weight: 600; font-size: .9375rem; }

.lp-audit__item-detail { color: var(--lp-muted); font-size: .875rem; line-height: 1.5; }



/**

 * Wskaznik "ile podstron z ilu". Pierscien zamiast kolejnego zdania:

 * liczba widoczna od razu, bez czytania.

 */

.lp-audit__item-meter {

  position: relative;

  flex: 0 0 auto;

  display: grid;

  place-items: center;

  width: 3.25rem;

  height: 3.25rem;

}



.lp-audit__meter-ring {

  position: absolute;

  inset: 0;

  border-radius: 50%;

  background: conic-gradient(#e5484d 0deg, #ff8a3d calc(var(--lp-part) * 3.6), rgba(255, 255, 255, .08) calc(var(--lp-part) * 3.6) 360deg);

  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));

  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));

}



/* Punkt bez problemow: pelne kolo w zieleni zamiast pustej obreczy. */

.lp-audit__item-meter.is-ok .lp-audit__meter-ring {

  background: conic-gradient(#2ea043 0deg, #3fb950 360deg);

}



.lp-audit__meter-val {

  font-family: var(--lp-font-head);

  font-size: .9375rem;

  font-weight: 800;

  line-height: 1;

  color: #fff;

}



.lp-audit__meter-val i { font-style: normal; font-size: .6875rem; color: var(--lp-muted); }



@keyframes lp-audit-wjazd {

  from { opacity: 0; transform: translateY(14px); }

  to { opacity: 1; transform: none; }

}



/* Rzeczy sprawne: same nazwy, bez opisow. */

.lp-audit__oks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }



.lp-audit__ok {

  position: relative;

  padding: .4375rem .875rem .4375rem 1.875rem;

  border-radius: 999px;

  background: rgba(74, 222, 128, .08);

  border: 1px solid rgba(74, 222, 128, .25);

  font-size: .8125rem;

  color: var(--lp-muted);

}



.lp-audit__ok::before {

  content: "";

  position: absolute;

  left: .875rem;

  top: .78em;

  width: 4px;

  height: 8px;

  border: solid #4ade80;

  border-width: 0 1.8px 1.8px 0;

  transform: rotate(45deg);

}



/* Punkt, ktorego nie udalo sie sprawdzic. Szary znak zapytania, zeby nikt

   nie wzial go za rzecz dzialajaca. */

.lp-audit__ok--unknown {

  background: rgba(255, 255, 255, .04);

  border-color: var(--lp-border);

}



.lp-audit__ok--unknown::before {

  content: "?";

  border: 0;

  transform: none;

  width: auto;

  height: auto;

  left: .8125rem;

  top: .4375rem;

  color: var(--lp-muted);

  font-size: .75rem;

  font-weight: 700;

}



@media (min-width: 700px) {

  .lp-audit__areas { grid-template-columns: repeat(2, 1fr); }



  .lp-audit__area {

    grid-template-columns: 2.25rem 1fr auto;

    grid-template-areas:

      "num head score"

      "bar bar bar";

  }



  .lp-audit__area-score { text-align: right; }

}



/* ---- granica miedzy diagnoza a recepta ---- */



.lp-audit__gap {

  margin-top: 2rem;

  padding: 1.5rem;

  background: rgba(255, 255, 255, .03);

  border: 1px dashed var(--lp-border);

  border-radius: var(--lp-radius);

}



.lp-audit__gap-title {

  margin: 0 0 1.125rem;

  font-family: var(--lp-font-head);

  font-size: 1.125rem;

}



.lp-audit__gap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }



.lp-audit__gap-list li {

  position: relative;

  padding-left: 1.875rem;

  font-size: .9375rem;

  line-height: 1.55;

  color: var(--lp-muted);

}



/* Znak zapytania jako znacznik. Kazda z tych pozycji to pytanie, na ktore

   automat nie odpowie. */

.lp-audit__gap-list li::before {

  content: "?";

  position: absolute;

  left: 0;

  top: -.05em;

  display: grid;

  place-items: center;

  width: 1.25rem;

  height: 1.25rem;

  border-radius: 50%;

  border: 1px solid rgba(204, 0, 166, .5);

  color: var(--lp-primary);

  font-size: .75rem;

  font-weight: 700;

}



.lp-audit__gap-list strong { display: block; color: var(--lp-text); margin-bottom: .125rem; }



.lp-audit__next {

  margin-top: 1.25rem;

  padding: 2px;

  border-radius: 20px;

  background: var(--lp-gradient);

  box-shadow: 0 26px 70px rgba(204, 0, 166, .28);

}



.lp-audit__next[hidden] { display: none; }



/* Powrot do okna po jego zamknieciu. Bez tego czlowiek, ktory zamknal okno,

   nie mial juz zadnego sposobu, zeby poprosic o plan. */

.lp-audit__again {

  margin-top: 2rem;

  display: grid;

  justify-items: center;

}



.lp-audit__again[hidden] { display: none; }



.lp-audit__next-inner {

  padding: 1.75rem 1.5rem;

  background: var(--lp-bg);

  border-radius: 18px;

}



.lp-audit__next-title {

  margin: 0 0 .5rem;

  font-family: var(--lp-font-head);

  font-size: clamp(1.375rem, 3.5vw, 1.75rem);

  line-height: 1.15;

}



.lp-audit__next-text { margin: 0 0 1.25rem; color: var(--lp-muted); line-height: 1.6; }



.lp-audit__next-list {

  list-style: none;

  margin: 0 0 1.25rem;

  padding: 0;

  display: grid;

  gap: .625rem;

}



.lp-audit__next-list li {

  position: relative;

  padding-left: 1.875rem;

  font-size: .9375rem;

  line-height: 1.45;

}



.lp-audit__next-list li::before {

  content: "";

  position: absolute;

  left: 0;

  top: .1em;

  width: 1.125rem;

  height: 1.125rem;

  border-radius: 50%;

  background: var(--lp-gradient);

}



.lp-audit__next-risk {

  margin: 0 0 1.75rem;

  padding: .875rem 1rem;

  background: rgba(255, 255, 255, .04);

  border-left: 2px solid var(--lp-primary);

  border-radius: 0 10px 10px 0;

  font-size: .875rem;

  line-height: 1.55;

  color: var(--lp-muted);

}



/* --- Okno: pasek dokumentu z waznoscia wyniku --- */

.lp-audit__next-bar {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: .5rem .75rem;

  margin: 0 0 .75rem;

  font-size: .75rem;

  letter-spacing: .08em;

  text-transform: uppercase;

  color: var(--lp-muted);

}



/**

 * Plakietka wraca do gradientu marki.

 *

 * Czerwona stala obok czerwonego licznika i czerwonego hasla terminu -

 * trzy alarmy w jednym rogu przestaja byc alarmem. Czerwien zostaje tam,

 * gdzie naprawde odlicza czas.

 */

.lp-audit__next-doc {

  padding: .25rem .5rem;

  border-radius: 6px;

  background: var(--lp-gradient);

  color: #fff;

  font-weight: 700;

  letter-spacing: .06em;

}



.lp-audit__next-dom {

  font-weight: 700;

  color: #fff;

  text-transform: none;

  letter-spacing: 0;

}



.lp-audit__next-ttl { margin-left: auto; }

.lp-audit__next-ttl[hidden] { display: none; }

.lp-audit__next-ttl b { color: #fff; font-variant-numeric: tabular-nums; }



/* Informacja zamiast checkboxa. Ma byc czytelna, ale nie ma udawac

   elementu formularza - nie ma tu nic do zaznaczania. */

.lp-audit__legal-note {

  margin: .75rem 0 0;

  font-size: .75rem;

  line-height: 1.5;

  color: var(--lp-muted);

  text-align: center;

}



.lp-audit__legal-note a { color: inherit; text-decoration: underline; }



/* --- Licznik i czerwone akcenty oferty --- */



/**

 * Czerwien jest tu jedynym kolorem alarmu na calym landingu i pojawia sie

 * dokladnie trzy razy: licznik, haslo terminu w naglowku i nota na dole.

 * Czwarty raz zaczalaby byc tlem i przestala cokolwiek znaczyc.

 */

/**

 * Licznik w prawym rogu paska. Jeden gruby blok zamiast trzech pudelek -

 * trzy czerwone kafle plus czerwona plakietka w naglowku plus czerwona nota

 * pod przyciskiem robily z czerwieni tlo, a nie alarm. Teraz czerwien jest

 * w jednym miejscu i wraca jej sila.

 */

.lp-audit__clock {

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: .125rem;

  margin-left: auto;

  padding: .375rem .625rem;

  border-radius: 10px;

  border: 1px solid rgba(255, 0, 51, .55);

  background: rgba(255, 0, 51, .12);

}



.lp-audit__clock-label {

  font-size: .5625rem;

  letter-spacing: .12em;

  text-transform: uppercase;

  color: #ff6b6f;

}



.lp-audit__clock-time {

  font-family: var(--lp-font-head);

  font-size: 1.375rem;

  font-weight: 800;

  line-height: 1;

  letter-spacing: .02em;

  font-variant-numeric: tabular-nums;

  color: #ff2d2d;

}



/**

 * Drgniecie przy zmianie cyfry, nie pulsowanie w petli.

 *

 * Animacja w petli zyje wlasnym rytmem i wypada obok momentu, w ktorym cyfra

 * sie zmienia - wyglada wtedy jak usterka. Ta odpala sie dokladnie wtedy,

 * gdy licznik tyka, wiec oko laczy ruch ze zmiana.

 */

.lp-audit__clock-time span {

  display: inline-block;

  min-width: 1.35em;

  text-align: center;

}



@media (prefers-reduced-motion: no-preference) {

  .lp-audit__clock-time span.is-tick { animation: lp-clock-tick .45s ease-out; }

}



@keyframes lp-clock-tick {

  0% { opacity: .45; transform: translateY(-2px); }

  100% { opacity: 1; transform: none; }

}



.lp-audit__clock.is-over { opacity: .55; }



.lp-audit__title-sum {

  background: var(--lp-gradient-hover);

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

}



/* Termin jako plakietka: biale litery na czerwonym gradiencie. Jedyny

   element na landingu, ktory ma wygladac na alarm. */

.lp-audit__title-alert {

  display: inline-block;

  margin-top: .5rem;

  padding: .25rem .875rem .3rem;

  border-radius: 8px;

  background: linear-gradient(135deg, #ff0033 0%, #e5121b 50%, #b00014 100%);

  box-shadow: 0 6px 20px rgba(255, 0, 51, .35);

  color: #fff;

  font-size: .8em;

  letter-spacing: .01em;

}



.lp-offer__save {

  display: inline-block;

  margin-left: .5rem;

  padding: .125rem .4rem;

  border-radius: 5px;

  background: rgba(63, 185, 80, .16);

  color: #3fb950;

  font-family: var(--lp-font-head);

  font-size: .6875rem;

  font-weight: 800;

  letter-spacing: .04em;

  text-transform: uppercase;

  white-space: nowrap;

}



/**

 * Ostrzezenie pod przyciskiem. Czysta czerwien, nie przygaszona - to jedyne

 * miejsce na landingu, ktore ma krzyczec, a przygaszony odcien gubil sie

 * na ciemnym tle obok rozowego gradientu marki.

 */

.lp-offer__note--alert {

  margin: .5rem 0 0;

  padding: 0;

  background: none;

  border: 0;

  text-align: center;

  font-size: .8125rem;

  color: #ff2d2d;

}



.lp-offer__note--alert strong {

  color: #ff0000;

  text-transform: uppercase;

  letter-spacing: .04em;

}



.lp-audit__form-why {

  margin: 0 0 .625rem;

  font-family: var(--lp-font-head);

  font-size: .9375rem;

  font-weight: 700;

  color: #fff;

}



/* Zdanie zdejmujace zobowiazanie. Stoi tuz pod przyciskiem, bo tam pada

   ostatnia watpliwosc, i jest w zieleni, zeby nie mieszalo sie z czerwonym

   ostrzezeniem o terminie. */

/**

 * Zielony blok pod przyciskiem zdejmuje ostatnia obiekcje: "daje numer,

 * czyli sie na cos pisze". Im mocniejsza presja nad nim, tym bardziej ten

 * blok jest potrzebny - inaczej cala agresja gornej czesci pracuje przeciwko

 * nam i czlowiek zamyka okno zamiast wpisac numer.

 */

.lp-audit__safe {

  margin: 1rem 0 0;

  padding: .75rem .875rem;

  border-radius: 10px;

  border: 1px solid rgba(63, 185, 80, .35);

  background: rgba(63, 185, 80, .08);

  text-align: center;

  font-size: .8125rem;

  line-height: 1.5;

  color: #9fd5a8;

}



.lp-audit__safe strong {

  display: block;

  margin-bottom: .125rem;

  font-family: var(--lp-font-head);

  font-size: .875rem;

  color: #3fb950;

}



/* --- Druga szansa przy zamykaniu okna --- */



/**

 * Ekran zaslania tresc okna, zamiast otwierac sie obok niej. Czlowiek wlasnie

 * chcial stad wyjsc, wiec dostaje jedna rzecz do przeczytania i jedno pole,

 * a nie kolejna warstwe nad ta, ktora juz odrzucil.

 */

.lp-exit {

  position: absolute;

  inset: 0;

  z-index: 4;

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: 1.75rem 1.25rem;

  border-radius: inherit;

  background: var(--lp-bg);

  text-align: center;

}



.lp-exit[hidden] { display: none; }



/* "Ostatnia szansa" jako czerwona plakietka. Ten ekran ma jedno zadanie:

   nie wypuscic czlowieka bez kontaktu, wiec otwiera sie alarmem. */

.lp-exit__eyebrow {

  align-self: center;

  margin: 0 0 .625rem;

  padding: .25rem .625rem;

  border-radius: 6px;

  background: linear-gradient(135deg, #ff0033 0%, #c40019 100%);

  font-size: .625rem;

  font-weight: 800;

  letter-spacing: .16em;

  text-transform: uppercase;

  color: #fff;

}



.lp-exit__title {

  margin: 0 0 .625rem;

  font-family: var(--lp-font-head);

  font-size: clamp(1.25rem, 3vw, 1.625rem);

  line-height: 1.2;

  color: #fff;

}



.lp-exit__lead {

  max-width: 30rem;

  margin: 0 auto 1.25rem;

  font-size: .9375rem;

  line-height: 1.55;

  color: var(--lp-muted);

}



.lp-exit__lead strong { color: #fff; }



/* Liczba, ktora ma zostac w glowie. Jedyny element na tym ekranie, ktory

   widac z drugiego konca pokoju. */

.lp-exit__deal {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: .125rem;

  margin: 0 0 1rem;

}



.lp-exit__deal-num {

  font-family: var(--lp-font-head);

  font-size: clamp(3.5rem, 12vw, 5.5rem);

  font-weight: 800;

  line-height: .95;

  letter-spacing: -.02em;

  color: #ff2d2d;

  text-shadow: 0 8px 32px rgba(255, 0, 51, .45);

}



.lp-exit__deal-num i {

  font-style: normal;

  font-size: .5em;

  vertical-align: super;

}



.lp-exit__deal-txt {

  font-family: var(--lp-font-head);

  font-size: 1rem;

  font-weight: 700;

  letter-spacing: .02em;

  color: #fff;

}



.lp-exit__form .lp-audit__row { grid-template-columns: 1fr 1fr; gap: 0 .75rem; }



.lp-form__hint {

  font-weight: 400;

  text-transform: none;

  letter-spacing: 0;

  color: var(--lp-muted);

}



.lp-exit__deadline {

  margin: 0 0 1rem;

  font-size: .75rem;

  color: var(--lp-muted);

}



.lp-exit__form {

  max-width: 24rem;

  width: 100%;

  margin: 0 auto;

  text-align: left;

}



.lp-exit__form[hidden] { display: none; }



.lp-exit__done {

  margin: 0 auto;

  max-width: 24rem;

  padding: .875rem 1rem;

  border-radius: 10px;

  border: 1px solid rgba(63, 185, 80, .35);

  background: rgba(63, 185, 80, .08);

  color: #3fb950;

  font-size: .9375rem;

}



.lp-exit__done[hidden] { display: none; }



/* Wyjscie zostaje mozliwe i widoczne. Okno, ktorego nie da sie zamknac,

   kosztuje wiecej niz stracony lead. */

.lp-exit__skip {

  margin: 1rem auto 0;

  padding: .25rem .5rem;

  background: none;

  border: 0;

  color: var(--lp-muted);

  font-size: .8125rem;

  text-decoration: underline;

  cursor: pointer;

}



.lp-exit__skip:hover { color: #fff; }



/* --- Oferta po terminie --- */



/**

 * Po wygasnieciu znika wszystko, co obiecywalo pakiet: kwoty, zestawienie,

 * haslo terminu. Zostaje formularz i wyjasnienie. Pokazywanie przekreslonych

 * cen obok komunikatu "wygaslo" bylo by dokladnie tym, o co ludzie maja

 * pretensje do reklam w internecie.

 */

.lp-audit__expired {

  margin: 0 0 1.25rem;

  padding: 1rem;

  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, .12);

  background: rgba(255, 255, 255, .04);

  text-align: center;

}



.lp-audit__expired[hidden] { display: none; }



.lp-audit__expired-title {

  margin: 0 0 .375rem;

  font-family: var(--lp-font-head);

  font-size: 1.0625rem;

  font-weight: 700;

  color: #fff;

}



.lp-audit__expired-text {

  margin: 0;

  font-size: .875rem;

  line-height: 1.55;

  color: var(--lp-muted);

}



.lp-audit__next-inner.is-expired .lp-offer,

.lp-audit__next-inner.is-expired .lp-offer--projekt,

.lp-audit__next-inner.is-expired .lp-audit__title-alert,

.lp-audit__next-inner.is-expired .lp-audit__next-text,

.lp-audit__next-inner.is-expired .lp-audit__next-doc { display: none; }



.lp-audit__next-inner.is-expired .lp-audit__next-title { display: none; }

.lp-audit__clock[hidden] { display: none; }

.lp-audit__next-inner.is-expired .lp-audit__expired { order: 3; }



/* --- Zestawienie oferty --- */



/**

 * Trzy kolumny: co to jest, ile kosztuje osobno, ile u nas. Cena rynkowa jest

 * przekreslona nie po to, zeby wygladac na promocje, tylko zeby dwie kwoty

 * obok siebie dalo sie porownac jednym spojrzeniem.

 */

.lp-offer {

  list-style: none;

  margin: 0 0 1rem;

  padding: 0;

  border: 1px solid rgba(255, 255, 255, .1);

  border-radius: 14px;

  overflow: hidden;

}



.lp-offer__row {

  display: grid;

  grid-template-columns: 1fr auto auto;

  align-items: baseline;

  gap: .375rem .75rem;

  padding: .625rem .875rem;

  border-bottom: 1px solid rgba(255, 255, 255, .06);

  font-size: .875rem;

}



.lp-offer__row:last-child { border-bottom: 0; }



.lp-offer__name { color: var(--lp-text); line-height: 1.4; }



.lp-offer__price {

  color: var(--lp-muted);

  text-decoration: line-through;

  font-variant-numeric: tabular-nums;

  white-space: nowrap;

}



.lp-offer__ours {

  min-width: 4.5rem;

  text-align: right;

  font-family: var(--lp-font-head);

  font-weight: 700;

  color: #3fb950;

  white-space: nowrap;

}



/* Wiersz sumy: to on ma zostac w glowie, wiec jako jedyny dostaje tlo marki. */

.lp-offer__row--sum {

  background: linear-gradient(135deg, rgba(204, 0, 166, .16), rgba(115, 56, 234, .10));

  font-size: .9375rem;

}



.lp-offer__row--sum .lp-offer__name {

  font-family: var(--lp-font-head);

  font-weight: 700;

  color: #fff;

}



.lp-offer__row--sum .lp-offer__price { font-size: 1rem; }

.lp-offer__row--sum .lp-offer__ours { font-size: 1.125rem; }



.lp-offer--projekt {

  padding: 1rem;

  border-radius: 14px;

  border: 1px solid rgba(204, 0, 166, .45);

  background: linear-gradient(135deg, rgba(204, 0, 166, .12), rgba(115, 56, 234, .08));

  margin-bottom: 1rem;

}



.lp-offer__big {

  margin: 0;

  font-family: var(--lp-font-head);

  font-size: 1rem;

  line-height: 1.5;

  color: #fff;

}



.lp-offer__slots {

  margin: .625rem 0 0;

  font-size: .8125rem;

  color: var(--lp-muted);

}



.lp-offer__slots b { color: #fff; }



.lp-offer__note {

  margin: 0 0 1.25rem;

  font-size: .75rem;

  line-height: 1.5;

  color: var(--lp-muted);

}



/* Telefon: cena rynkowa i nasza schodza pod nazwe, bo trzy kolumny na 390px

   lamia sie w nieczytelna drabinke. */

.lp-offer__row--more { display: none; }



@media (max-width: 600px) {

  .lp-offer__row {

    grid-template-columns: 1fr auto;

    padding: .5rem .75rem;

    font-size: .8125rem;

  }



  .lp-offer__name { grid-column: 1 / -1; line-height: 1.35; }



  /**

   * Na telefonie zdanie wprowadzajace znika, a nie kurczy sie do nieczytelnego

   * rozmiaru. Naglowek i tabela mowia to samo, tylko krocej: "to dostajesz

   * w cenie" plus dwie kolumny kwot. Liczy sie, zeby zgoda i przycisk

   * miescily sie bez przewijania.

   */

  .lp-audit__next-text { display: none; }

  .lp-audit__next-how { margin-top: .5rem; font-size: .8125rem; }

  .lp-audit__consent { padding: .375rem .5rem; font-size: .75rem; }

  .lp-audit__modal-box { padding-top: .75rem; }



  /* Pasek na telefonie: ostrzezenie i domena w jednym wierszu, licznik

     w drugim, poziomo. Uklad z laptopa lamal sie tu na trzy linie. */

  .lp-audit__next-bar {

    flex-wrap: wrap;

    justify-content: center;

    gap: .5rem;

    text-align: center;

  }



  .lp-audit__next-head { justify-content: center; }



  .lp-audit__clock {

    flex-direction: row;

    align-items: center;

    gap: .5rem;

    margin: 0 auto;

    padding: .25rem .625rem;

  }



  .lp-audit__clock-time { font-size: 1.125rem; }



  .lp-audit__safe {

    padding: .625rem .75rem;

    font-size: .75rem;

  }



  .lp-audit__safe strong { font-size: .8125rem; }



  /* Ostatnie piksele: na telefonie licza sie licznik, kwota, tabela i pola.

     Doprecyzowania i objasnienia schodza do minimum. */

  .lp-offer__note-more { display: none; }

  .lp-audit__form-why { font-size: .8125rem; margin-bottom: .5rem; }

  .lp-audit__next-title { font-size: 1.25rem; }

  .lp-audit__legal-note { margin-top: .375rem; }



  /* Imie i telefon obok siebie. Dwa pola pod soba zjadaly te 40 pikseli,

     przez ktore przycisk wypadal poza ekran, a oba sa krotkie. */

  .lp-audit__modal .lp-audit__row { grid-template-columns: 1fr 1fr; gap: 0 .75rem; }



  /* Naglowek i odstepy ustepuja polom - przycisk ma byc widoczny bez

     przewijania, bo to na telefonie zapada decyzja. */

  .lp-audit__next-title { font-size: 1.375rem; margin-bottom: .375rem; }

  .lp-audit__next-text { margin-bottom: .75rem; }

  .lp-offer { margin-bottom: .625rem; }

  .lp-offer__note { margin-bottom: .875rem; font-size: .6875rem; }



  /* Dwie najdrozsze pozycje, wiersz zbiorczy i suma. Suma liczy wszystkie. */

  .lp-offer__row:nth-child(n+3):not(.lp-offer__row--sum):not(.lp-offer__row--more) { display: none; }

  .lp-offer__row--more { display: block; color: var(--lp-muted); }

  .lp-offer__row--more .lp-offer__name { color: var(--lp-muted); }

}



/* Po odslonieciu planu zestawienie oferty schodzi pod niego - przypomina

   o warunkach, ale nie konkuruje z trescia, po ktora czlowiek przyszedl. */

.lp-audit__next-inner.is-unlocked .lp-offer,

.lp-audit__next-inner.is-unlocked .lp-offer--projekt { order: 10; opacity: .75; }

.lp-audit__next-inner.is-unlocked .lp-offer__note { order: 11; }



/* --- Plan naprawy, widoczny po zostawieniu numeru --- */

.lp-audit__plan[hidden] { display: none; }



/* Podglad nie moze zepchnac formularza poza ekran - to jest okno

   zbierajace numer, nie czytnik dokumentow. */

/**

 * Plan pojawia sie dopiero PO zostawieniu numeru i przewija sie razem

 * z oknem. Wlasny obszar przewijania w srodku okna dawal dwa paski naraz

 * i czytalo sie to jak zepsuty interfejs.

 */

.lp-audit__plan {

  display: grid;

  gap: .5rem;

  margin: 0 0 1.25rem;

}



.lp-audit__plan[hidden] { display: none; }



.lp-plan__step {

  padding: .875rem 1rem;

  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, .08);

  background: rgba(255, 255, 255, .03);

}



/* Krok odsloniety: probka, ktora ma pokazac, ze reszta jest tej samej

   jakosci. Dlatego dostaje ramke w kolorze marki, a nie szara. */

.lp-plan__step.is-open {

  border-color: rgba(204, 0, 166, .45);

  background: linear-gradient(135deg, rgba(204, 0, 166, .10), rgba(115, 56, 234, .06));

}



.lp-plan__head {

  display: flex;

  align-items: baseline;

  flex-wrap: wrap;

  gap: .5rem;

}



.lp-plan__num {

  font-family: var(--lp-font-head);

  font-size: .6875rem;

  font-weight: 800;

  letter-spacing: .1em;

  text-transform: uppercase;

  color: var(--lp-primary);

}



.lp-plan__name {

  font-family: var(--lp-font-head);

  font-size: .9375rem;

  font-weight: 700;

  color: #fff;

}



.lp-plan__meta {

  width: 100%;

  font-size: .75rem;

  color: var(--lp-muted);

}



.lp-plan__text {

  margin: .5rem 0 0;

  font-size: .875rem;

  line-height: 1.6;

  color: var(--lp-muted);

}



/* Zaslona: paski w miejscu tekstu. Tresci zaslonietych krokow nie ma

   w HTML, wiec nie da sie ich odczytac z konsoli. */

/**

 * Zaslonione kroki sa kompaktowe: jedna kreska zamiast trzech.

 *

 * Przy trzech paskach na krok okno uroslo tak, ze formularz wypadal ponizej

 * kadru i czlowiek widzial sam plan, a nie mial gdzie wpisac numeru. Podglad

 * ma kusic, nie zajmowac ekran.

 */

.lp-plan__step.is-locked { padding: .625rem 1rem; }



.lp-plan__blur {

  display: block;

  margin: .5rem 0 0;

}



.lp-plan__blur span {

  display: block;

  height: 8px;

  border-radius: 4px;

  background: linear-gradient(90deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05));

  filter: blur(1px);

}



/* Dwie dalsze kreski sa zbedne, gdy pierwsza juz mowi "tu jest tekst". */

.lp-plan__blur span:nth-child(2),

.lp-plan__blur span:nth-child(3) { display: none; }



.lp-plan__rest {

  margin: .25rem 0 0;

  font-size: .8125rem;

  line-height: 1.55;

  color: var(--lp-muted);

}



.lp-plan__cta { margin-top: 1rem; }



/**

 * Telefon: podglad planu ustepuje miejsca polom.

 *

 * Kroki zostaja trzy, bo stopka mowi, ile ich jeszcze zostalo, i te liczby

 * musza sie zgadzac. Skraca sie okno, ktorym je widac, a nie ich liczba.

 */

@media (max-width: 600px) {

  .lp-audit__next-text { font-size: .875rem; }

  .lp-plan__step { padding: .75rem .875rem; }

  .lp-plan__text { font-size: .8125rem; }

}



/* Jak wyglada kontakt: jedno zdanie tuz nad polami, w miejscu, w ktorym

   czlowiek zawaha sie przed wpisaniem numeru. */

.lp-audit__next-how {

  margin: .5rem 0 0;

  font-size: .9375rem;

  line-height: 1.6;

  color: var(--lp-text);

}



/* Dowod: liczba opinii Google. Stoi pod prosba o numer, bo tam jest

   najdrozszy moment calej strony i jedyny bez zadnego zabezpieczenia. */

.lp-audit__next-proof {

  display: flex;

  align-items: center;

  gap: .75rem;

  margin: 0 0 1.5rem;

  font-size: .8125rem;

  line-height: 1.5;

  color: var(--lp-muted);

}



/* Jawny display wygrywa z atrybutem hidden, wiec trzeba go zdjac recznie -

   inaczej dowod zostaje na ekranie po odslonieciu planu, gdzie nie ma juz

   czego dowodzic. */

.lp-audit__next-proof[hidden],

.lp-audit__next-how[hidden],

.lp-audit__next-risk[hidden] { display: none; }



.lp-audit__next-proof-num {

  flex: 0 0 auto;

  font-family: var(--lp-font-head);

  font-size: 1.75rem;

  font-weight: 800;

  line-height: 1;

  background: var(--lp-gradient);

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

}



.lp-audit__done-lead {

  margin: 0 0 .5rem;

  font-family: var(--lp-font-head);

  font-size: 1.0625rem;

  font-weight: 700;

  color: #fff;

}



.lp-audit__done-next { margin: 0 0 1rem; font-size: .9375rem; }



.lp-audit__done-btn { display: inline-flex; }



/**

 * Pola i przycisk nad argumentacja, na kazdej szerokosci.

 *

 * Zaczelo sie od telefonu, gdzie formularz wypadal ponizej krawedzi okna.

 * Po dolozeniu podgladu planu to samo zaczelo dziac sie na laptopie z ekranem

 * 900px: czlowiek widzial plan, gwarancje i dowod, a pola na numer dopiero

 * po przewinieciu. Kolejnosc jest wiec jedna dla wszystkich: dokument, plan,

 * pola, a dopiero pod nimi to, co przekonuje niezdecydowanych.

 *

 * Kolejnosc w DOM zostaje bez zmian, wiec czytniki ekranu i tryb bez CSS

 * dostaja argumenty przed prosba o numer.

 */

.lp-audit__next-inner {

  display: flex;

  flex-direction: column;

}



/* Okno ma miescic sie w ekranie bez przewijania. Kazdy odstep jest tu

   policzony - po usunieciu gwarancji i dowodu zostal sam trzon: dokument,

   oferta, pola. */

/**

 * Gora okna jest wysrodkowana i ma oddech. Naglowek z kwota i terminem to

 * jedyna rzecz, ktora ma byc przeczytana w pierwszej sekundzie - wyrownanie

 * do lewej stawialo go w jednym rzedzie z reszta tekstu.

 */

.lp-audit__next-inner > .lp-audit__next-bar {

  order: 1;

  align-items: center;

  justify-content: space-between;

  gap: .75rem;

  margin-bottom: 1rem;

  text-align: left;

}



/* Nazwa oferty i domena w jednej linii nad licznikiem - kolumna robila

   z nich dwa osobne wiersze i zjadala miejsce potrzebne na licznik. */

.lp-audit__next-head {

  display: inline-flex;

  align-items: center;

  flex-wrap: wrap;

  gap: .375rem .5rem;

}



.lp-audit__next-title {

  text-align: center;

  font-size: clamp(1.5rem, 3.6vw, 2rem);

}



.lp-audit__next-text {

  text-align: center;

  max-width: 34rem;

  margin-left: auto;

  margin-right: auto;

  margin-bottom: 1.125rem;

}



.lp-audit__title-alert { margin-top: .375rem; }



.lp-audit__next-inner > .lp-audit__legal-note { order: 12; margin-top: .5rem; }

.lp-audit__next-text  { margin-bottom: .875rem; }

.lp-offer__note       { margin-bottom: .875rem; }

.lp-audit__next-title { order: 2; }

.lp-audit__next-text  { order: 3; }

.lp-audit__next-inner > .lp-offer { order: 4; }

.lp-audit__next-inner > .lp-offer--projekt { order: 4; }

.lp-audit__next-inner > .lp-offer__note { order: 5; }

.lp-audit__next-inner > .lp-audit__plan { order: 6; }

.lp-audit__next-inner > .lp-audit__form-why { order: 6; }

.lp-audit__next-inner > .lp-audit__form { order: 7; }

.lp-audit__next-inner > .lp-audit__next-risk { order: 8; margin-top: 1.25rem; }

.lp-audit__next-inner > .lp-audit__next-proof { order: 9; margin-bottom: 0; }



.lp-audit__consent {

  margin-top: 1rem;

  padding: .625rem .75rem;

  border-radius: 10px;

  border: 1px solid transparent;

  transition: border-color var(--lp-transition), background var(--lp-transition);

}



.lp-audit__consent.has-error {

  border-color: #e5484d;

  background: rgba(229, 72, 77, .08);

}



.lp-audit__next-list li::after {

  content: "";

  position: absolute;

  left: .4rem;

  top: .35em;

  width: 4px;

  height: 8px;

  border: solid #fff;

  border-width: 0 2px 2px 0;

  transform: rotate(45deg);

}



.lp-audit__done {

  margin: 1.5rem 0 0;

  padding: 1rem 1.25rem;

  background: rgba(74, 222, 128, .08);

  border: 1px solid rgba(74, 222, 128, .3);

  border-radius: 10px;

  color: var(--lp-muted);

  line-height: 1.6;

}



.lp-audit__done[hidden] { display: none; }



/* ---------- Okno z prosba o kontakt ---------- */



/* Strona pod otwartym oknem stoi.
   Samo overflow:hidden nie wystarcza - na telefonie przewijanie przechodzi
   na dokument, a na desktopie kolko czasem lapie element pod spodem.
   Position:fixed zatrzymuje wszystko, a JS cofa body o aktualna pozycje
   i oddaje ja przy zamknieciu, zeby strona nie skoczyla na gore. */
html.lp-modal-open { overflow: hidden; }

body.lp-modal-open {
  overflow: hidden;
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}



.lp-audit__modal {

  position: fixed;

  inset: 0;

  /* Ponad wszystkim na landingu: pasek kroków ma 60, sticky CTA 50. */

  z-index: 200;

  display: flex;

  align-items: flex-end;

  justify-content: center;

}



.lp-audit__modal[hidden] { display: none; }



.lp-audit__modal-veil {

  position: absolute;

  inset: 0;

  background: rgba(0, 4, 8, .8);

  backdrop-filter: blur(6px);

  opacity: 0;

  transition: opacity .25s ease;

}



.lp-audit__modal.is-open .lp-audit__modal-veil { opacity: 1; }



/* Na telefonie panel wjezdza od dolu. Okienko na srodku ekranu wyglada

   na telefonie jak reklama i zamyka sie je odruchowo, bez czytania. */

.lp-audit__modal-box {

  position: relative;

  width: 100%;

  max-height: 96vh;

  overflow-y: auto;

  -webkit-overflow-scrolling: touch;

  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));

  background: var(--lp-bg);

  border-radius: 20px 20px 0 0;

  border-top: 1px solid var(--lp-border);

  transform: translateY(100%);

  transition: transform .3s cubic-bezier(.22, 1, .36, 1);

}



.lp-audit__modal.is-open .lp-audit__modal-box { transform: translateY(0); }



/* W oknie blok nie potrzebuje juz wlasnego marginesu od gory. */

.lp-audit__modal-box .lp-audit__next { margin-top: 0; }



/**

 * Krzyzyk siedzi w rogu okna, nad wszystkim.

 *

 * Wczesniej mial polprzezroczyste tlo i nizsza warstwe, wiec licznik przebijal

 * przez niego i wygladalo to na usterke. Teraz ma pelne tlo w kolorze okna

 * i obwodke, ktora odcina go od tresci pod spodem.

 */

.lp-audit__modal-x {

  position: absolute;

  top: .75rem;

  right: .75rem;

  z-index: 5;

  display: grid;

  place-items: center;

  width: 2.25rem;

  height: 2.25rem;

  background: #16161c;

  border: 1px solid rgba(255, 255, 255, .16);

  border-radius: 50%;

  box-shadow: 0 4px 14px rgba(0, 0, 0, .5);

  cursor: pointer;

  transition: background var(--lp-transition), border-color var(--lp-transition);

}



.lp-audit__modal-x:hover {

  background: #23232c;

  border-color: rgba(255, 255, 255, .3);

}



/* Pasek gorny konczy sie przed krzyzykiem, zeby licznik nie wchodzil pod

   niego przy waskich oknach. */

.lp-audit__next-bar { padding-right: 2.5rem; }



.lp-audit__modal-x span {

  position: relative;

  display: block;

  width: 14px;

  height: 14px;

}



.lp-audit__modal-x span::before,

.lp-audit__modal-x span::after {

  content: "";

  position: absolute;

  top: 50%;

  left: 0;

  width: 14px;

  height: 2px;

  border-radius: 2px;

  background: #fff;

}



.lp-audit__modal-x span::before { transform: rotate(45deg); }

.lp-audit__modal-x span::after { transform: rotate(-45deg); }



@media (min-width: 900px) {

  .lp-audit__modal { align-items: center; }



  .lp-audit__modal-box {

    max-width: 40rem;

    padding: 1.25rem;

    border-radius: 24px;

    border: 1px solid var(--lp-border);

    transform: translateY(18px) scale(.98);

    opacity: 0;

    transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .25s ease;

  }



  .lp-audit__modal.is-open .lp-audit__modal-box { transform: none; opacity: 1; }

}



/* ---------- Stopka ---------- */





.lp-footer { padding-block: 2rem; border-top: 1px solid var(--lp-border); font-size: .875rem; color: var(--lp-muted); }

.lp-footer__inner { display: grid; gap: .75rem; }

.lp-footer__firma { margin: 0; color: var(--lp-text); font-weight: 600; }

.lp-footer__nip { margin-left: .75rem; font-weight: 400; color: var(--lp-muted); }

.lp-footer__kontakt { margin: 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; }

.lp-footer__kontakt a { color: var(--lp-muted); }

.lp-footer__legal { margin: 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; }

.lp-footer__legal a { color: var(--lp-muted); }



/* ---------- Sticky CTA (mobile) ---------- */



.lp-sticky {

  position: fixed;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: 50;

  display: flex;

  gap: .625rem;

  padding: .625rem .75rem calc(.625rem + env(safe-area-inset-bottom));

  background: rgba(0, 4, 8, .94);

  backdrop-filter: blur(10px);

  border-top: 1px solid var(--lp-border);

  transform: translateY(110%);

  transition: transform .25s ease;

}



.lp-sticky[hidden] { display: none; }

.lp-sticky.is-visible { transform: translateY(0); }



.lp-sticky__btn { flex: 1; padding-inline: 1rem; }



.lp-sticky__tel {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0 1.125rem;

  min-height: 52px;

  border: 1px solid var(--lp-border);

  border-radius: var(--lp-radius);

  color: var(--lp-text);

  text-decoration: none;

  font-family: var(--lp-font-head);

  font-weight: 700;

  font-size: .9375rem;

  flex: 0 0 auto;

}



body.lp-body.has-sticky { padding-bottom: 76px; }



/* ---------- Tablet ---------- */



@media (min-width: 700px) {

  .lp-reasons__grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }

  .lp-section { padding-block: 5rem; }

  .lp-hero { padding-block: 4.5rem 3.5rem; }

  .lp-steps__label { display: inline; }

  .lp-steps { gap: .5rem; }

  .lp-hero__cta { width: auto; }

  .lp-problem__grid { grid-template-columns: repeat(2, 1fr); }

  .lp-solution__grid { grid-template-columns: repeat(2, 1fr); }

  .lp-pricing__grid { grid-template-columns: repeat(3, 1fr); }

  .lp-process__list { grid-template-columns: repeat(2, 1fr); }

  .lp-reviews__shots, .lp-reviews__grid { grid-template-columns: repeat(2, 1fr); }

  .lp-strip__item { width: 280px; }

  .lp-form { padding: 2rem; }

  .lp-pricing__cta .lp-btn { width: auto; }

  .lp-footer__inner { grid-template-columns: 1fr auto; align-items: center; }

}



/* ---------- Desktop ---------- */



@media (min-width: 1000px) {

  /* Dwie kolumny: po lewej naglowek i tresc lokalna, po prawej pytania.
     Lista pytan konczy sie wysoko, wiec bez tresci po lewej zostawala tam
     pusta polowa ekranu. */
  .lp-faq__layout { grid-template-columns: .95fr 1.05fr; gap: 3.5rem; align-items: start; }

  .lp-faq__side { position: static; }



  /* align-items: stretch, a nie center - inaczej komorka jest nizsza niz

     wiersz i tlo wyrozniojnej kolumny urywa sie miedzy wierszami. */

  .lp-vs__thead,

  .lp-vs__row { display: grid; grid-template-columns: 1fr .8fr 1.05fr; align-items: stretch; gap: 0; }

  .lp-vs__row .lp-vs__cell { display: flex; align-items: center; }

  /* Kolumna zakresu do lewej - to etykieta wiersza, czyta sie ja jak liste,

     nie jak wartosc do porownania. Obie kolumny z wartosciami zostaja

     wysrodkowane. */

  .lp-vs__row .lp-vs__cell--cat {

    display: grid;

    align-content: center;

    justify-items: start;

    text-align: left;

  }



  .lp-vs__thead .lp-vs__cell--cat { justify-content: flex-start; text-align: left; }

  .lp-vs__cat-desc { margin-inline: 0; }



  .lp-vs__thead {

    display: grid;

    padding: 0 0 0 1.75rem;

    background: rgba(255, 255, 255, .04);

    border-bottom: 1px solid rgba(255, 255, 255, .1);

  }



  .lp-vs__row { padding: 0 0 0 1.75rem; }

  .lp-vs__row .lp-vs__cell { padding-block: 1.125rem; }

  .lp-vs__cell[data-kol]::before { content: none; }



  .lp-vs__thead .lp-vs__cell { display: flex; align-items: center; padding-block: 1.25rem; }

  .lp-vs__thead .lp-vs__cell--head { justify-content: center; }

  .lp-vs__cell--head {

    font-family: var(--lp-font-head);

    font-weight: 700;

    font-size: .9375rem;

    color: var(--lp-muted);

    text-align: center;

  }



  .lp-vs__row .lp-vs__cell:not(.lp-vs__cell--cat) { text-align: center; justify-content: center; }

  .lp-vs__table .lp-vs__logo { margin-inline: auto; }



  /**

   * Nasza kolumna jako ciagly, podswietlony pas przez cala tabele.

   * Pionowe krawedzie rysujemy cieniami wstawkowymi (inset), zeby nie

   * dokladac pseudoelementow w kazdej komorce.

   */

  /* Pas naszej kolumny. Komorka rozciaga sie na cala wysokosc wiersza,

     wiec tlo laczy sie w jeden ciag przez cala tabele. */

  .lp-vs__thead .lp-vs__cell--us,

  .lp-vs__row .lp-vs__cell--us {

    justify-content: center;

    background: rgba(147, 28, 196, .12);

    box-shadow:

      inset 1px 0 0 rgba(255, 255, 255, .12),

      inset -1px 0 0 rgba(255, 255, 255, .12);

    padding-inline: 1.75rem;

  }



  .lp-vs__thead .lp-vs__cell--us {

    padding-inline: 1.75rem;

    box-shadow:

      inset 1px 0 0 rgba(255, 255, 255, .12),

      inset -1px 0 0 rgba(255, 255, 255, .12),

      inset 0 2px 0 var(--lp-primary);

  }



  /* Linia oddzielajaca wiersze nie moze przecinac pasa - rysujemy ja

     tylko pod komorkami poza wyrozniona kolumna. */

  .lp-vs__row { border-bottom: 0; }

  .lp-vs__row .lp-vs__cell:not(.lp-vs__cell--us) { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .07); }

  .lp-vs__row:last-child .lp-vs__cell { box-shadow: none; }

  .lp-vs__row:last-child .lp-vs__cell--us {

    box-shadow:

      inset 1px 0 0 rgba(255, 255, 255, .12),

      inset -1px 0 0 rgba(255, 255, 255, .12);

  }

  .lp-vs__cell[data-kol]::before { content: none; }

  /* Kolumny z wartosciami wysrodkowane - do lewej zostaje tylko zakres. */

  .lp-vs__cell--head { font-family: var(--lp-font-head); font-weight: 700; font-size: .9375rem; color: var(--lp-muted); text-align: center; }



  .lp-reasons__grid { gap: 1.5rem; }

  .lp-glass { min-height: 320px; padding: 2rem 2rem 3.75rem 1.75rem; }

  .lp-glass__ghost { font-size: 13rem; }

  .lp-glass__body { padding-left: 4.5rem; }

  .lp-glass__title { font-size: 1.5rem; }

  /* Szerszy kontener potrzebuje wiekszego marginesu bocznego, inaczej

     tresc klei sie do krawedzi ekranu na duzych monitorach. */

  :root { --lp-px: 2.5rem; }



  .lp-section { padding-block: 6rem; }



  .lp-hero { padding-block: 0 4rem; }

  /* 82vh zamiast 100vh - nastepna sekcja ma wystawac u dolu ekranu,

     zeby bylo widac, ze strona ma ciag dalszy. Minus pasek z logo. */

  .lp-hero__inner { min-height: calc(82vh - 72px); }

  .lp-brand { padding-block: 2rem 0; }

  .lp-brand .lp-brand__img { height: 48px; }



  .lp-solution__grid { grid-template-columns: repeat(3, 1fr); }

  .lp-process__list { grid-template-columns: repeat(4, 1fr); }

  .lp-reviews__shots, .lp-reviews__grid { grid-template-columns: repeat(3, 1fr); }



  .lp-case { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }

  .lp-case:nth-of-type(even) .lp-case__media { order: 2; }



  .lp-audit__shout { grid-template-columns: 1fr auto; gap: 8px; }

  .lp-audit__row { grid-template-columns: 1fr 1fr; gap: 0 1rem; }



  .lp-form-section__inner { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }

  .lp-form-section__intro { display: block; }

  .lp-form-section__steps { margin-top: 2rem; }

  .lp-form-section__call { margin-top: 2rem; }

  .lp-form { padding: 2rem; }

  .lp-form__grid { grid-template-columns: 1fr 1fr; gap: 0 1rem; }

  .lp-form-section__intro { position: sticky; top: 3rem; }



  /* Porownanie wraca do prawdziwej tabeli */

  .lp-compare__table { border: 1px solid var(--lp-border); border-radius: var(--lp-radius); overflow: hidden; }



  .lp-compare__head,

  .lp-compare__row { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.2fr; gap: 0; }



  .lp-compare__head { margin-bottom: 0; background: none; border: 0; padding: 1rem 1.25rem .75rem; }

  .lp-compare__row { margin-bottom: 0; border-radius: 0; border-width: 0 0 1px; background: none; padding: 1.125rem 1.25rem; }

  .lp-compare__row:last-child { border-bottom: 0; }



  .lp-compare__cell[data-kol]::before { content: none; }

  .lp-compare__cell--label { margin-bottom: 0; font-size: 1rem; }

  .lp-compare__cell--head { font-family: var(--lp-font-head); font-weight: 700; color: var(--lp-text); }

  .lp-compare__cell--us { background: var(--lp-primary-soft); }



  .lp-sticky { display: none; }

  body.lp-body.has-sticky { padding-bottom: 0; }

}



/* ---------- Dostepnosc ---------- */



@media (prefers-reduced-motion: reduce) {

  .lp-strip__track { animation: none; }

  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }

}



/* ---------- Portfolio: wersja na landingu ---------- */



/**

 * Naglowek sekcji portfolio jest wspoldzielony ze strona glowna, gdzie moze

 * byc ogromny. Na landingu konkuruje z naglowkiem hero, wiec go zmniejszamy.

 */

.portfolio-marquee--lp .portfolio-marquee__heading {

  font-size: clamp(2rem, 5.4vw, 4.25rem);

  line-height: 1.08;

  letter-spacing: -.02em;

  max-width: 24ch;

  margin-inline: auto;

}



.portfolio-marquee--lp .portfolio-marquee__lead { max-width: 56ch; margin-inline: auto; }



/* Plakietka na slowie w naglowku - ten sam zabieg co "19 sekund" w hero. */

.lp-chip {

  display: inline-block;

  padding: .02em .28em .1em;

  border-radius: .28em;

  background: var(--lp-gradient);

  color: #fff;

  transform: rotate(-1.5deg);

}





/* ── Stopka landingu: scena z astronauta ─────────────────────────────────

   Uklad paska pod scena. Sama scena (niebo, meteory, gory) jedzie ze stylow

   stopki glownej, wiec landing konczy sie tym samym obrazem co reszta marki.

   Tu dokladamy tylko to, czego tamta stopka nie ma: jeden poziomy pasek

   z logo, prawami, polityka i podpisem wykonawcy. */



.lp-footer-scene {

  position: relative;

  min-height: 60vh;

  display: flex;

  /* Kolumna, nie rzad. Formularz i pasek z danymi sa dwoma osobnymi blokami
     i bez tego ustawialy sie obok siebie, wchodzac na astronaute. */
  flex-direction: column;

  justify-content: flex-end;

  padding-top: 8rem;

  background: var(--lp-bg);

}



/**

 * Scena ze stopki glownej rozciaga swoj kontener na pelny ekran, bo tam

 * mieszcza sie w nim naglowek i formularz. Na landingu jest w nim tylko

 * pasek z logo, wiec zerujemy te wysokosc - inaczej stopka ma 1000 px

 * pustki, a pasek laduje nad gorami zamiast pod nimi.

 */

.lp-footer-scene__stage {

  position: relative;

  z-index: 2;

  display: block;

  width: 100%;

  min-height: 0;

  margin-top: auto;

  padding: 0 0 1.5rem;

}



/* Telefon i mail duzo, bo to jedyny sposob kontaktu poza formularzem. */

.lp-footer-scene__contact {

  display: flex;

  flex-wrap: wrap;

  gap: 1rem 3rem;

  margin-bottom: 1.25rem;

}



.lp-footer-scene__big {

  display: flex;

  flex-direction: column;

  gap: .125rem;

  color: #fff;

}



.lp-footer-scene__big-label {

  font-size: .6875rem;

  letter-spacing: .14em;

  text-transform: uppercase;

  color: var(--lp-muted);

}



.lp-footer-scene__big-value {

  font-family: var(--lp-font-head);

  font-size: clamp(1.25rem, 3vw, 1.75rem);

  font-weight: 800;

  line-height: 1.1;

  transition: color var(--lp-transition);

}



.lp-footer-scene__big:hover .lp-footer-scene__big-value { color: var(--lp-primary); }



/* Dane rejestrowe: maly druk, ale musza byc widoczne. */

.lp-footer-scene__dane {

  display: flex;

  flex-wrap: wrap;

  gap: .25rem 1.25rem;

  margin: 0 0 1.25rem;

  font-size: .8125rem;

  color: var(--lp-muted);

}



.lp-footer-scene__bar {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  justify-content: space-between;

  gap: 1rem 1.5rem;

  padding-top: 1.25rem;

  border-top: 1px solid rgba(255, 255, 255, .10);

}



.lp-footer-scene__logo img { display: block; height: auto; width: 150px; }



.lp-footer-scene__copy {

  margin: 0;

  font-size: .8125rem;

  color: var(--lp-muted);

}



.lp-footer-scene__legal {

  font-size: .8125rem;

  color: var(--lp-muted);

  text-decoration: underline;

}



.lp-footer-scene__legal:hover { color: #fff; }



.lp-footer-scene__credit {

  display: inline-flex;

  align-items: center;

  gap: .5rem;

  font-size: .75rem;

  color: var(--lp-muted);

}



.lp-footer-scene__credit img { display: block; opacity: .85; }



@media (max-width: 700px) {

  .lp-footer-scene { min-height: 52vh; padding-top: 6rem; }



  .lp-footer-scene__contact {

    justify-content: center;

    text-align: center;

    gap: 1rem 2rem;

  }



  .lp-footer-scene__big { align-items: center; }

  .lp-footer-scene__dane { justify-content: center; text-align: center; }



  /* Na telefonie pasek schodzi do kolumny i centruje sie - cztery elementy

     w rzedzie przy 390px lamaly sie w nieczytelna drabinke. */

  .lp-footer-scene__bar {

    flex-direction: column;

    text-align: center;

    gap: .875rem;

  }

}



/* ═══════════════════════════════════════════════════════════════════════

   TLO: jeden kosmos pod cala strona

   ═══════════════════════════════════════════════════════════════════════



   Landing byl skladanka sekcji, z ktorych kazda miala wlasne, nieprzezroczyste

   tlo w tym samym kolorze. Kolor sie zgadzal, ale kazda sekcja byla osobna

   plaszczyzna - przy przewijaniu widac bylo, ze cos sie konczy i zaczyna.



   Teraz tlo jest JEDNO i lezy pod cala strona: mglawice w kolorach marki

   i pole gwiazd, oba przyklejone do okna (fixed). Sekcje sa przezroczyste

   i plyna po nim, wiec granic miedzy nimi nie widac.



   Wszystko na gradientach CSS, bez obrazkow i bez JavaScriptu - to jest tlo

   pod caly landing, wiec nie moze kosztowac ani kilobajta transferu wiecej

   niz musi. */



body.lp-body {

  background-color: var(--lp-bg);

}



/* Mglawice: trzy duze, mocno rozmyte plamy w rozowo-fioletowej palecie.

   Nie ruszaja sie przy przewijaniu, wiec tresc plynie po stalym tle. */

body.lp-body::before {

  content: "";

  position: fixed;

  inset: 0;

  z-index: -2;

  pointer-events: none;

  background:

    radial-gradient(60vw 45vh at 12% 8%, rgba(204, 0, 166, .14), transparent 60%),

    radial-gradient(55vw 40vh at 88% 32%, rgba(115, 56, 234, .13), transparent 62%),

    radial-gradient(70vw 50vh at 30% 88%, rgba(76, 29, 158, .12), transparent 65%),

    var(--lp-bg);

}



/* Gwiazdy: cztery warstwy punktow o roznej gestosci i jasnosci. Drobne

   kropki daja glebie, wieksze i jasniejsze rozbijaja regularnosc siatki. */

body.lp-body::after {

  content: "";

  position: fixed;

  inset: 0;

  z-index: -1;

  pointer-events: none;

  opacity: .5;

  background-image:

    radial-gradient(1.5px 1.5px at 18% 22%, rgba(255, 255, 255, .9), transparent 100%),

    radial-gradient(1px 1px at 62% 12%, rgba(255, 255, 255, .7), transparent 100%),

    radial-gradient(1.5px 1.5px at 84% 46%, rgba(255, 214, 250, .8), transparent 100%),

    radial-gradient(1px 1px at 35% 68%, rgba(255, 255, 255, .6), transparent 100%),

    radial-gradient(1px 1px at 73% 82%, rgba(214, 224, 255, .7), transparent 100%),

    radial-gradient(1.5px 1.5px at 8% 54%, rgba(255, 255, 255, .55), transparent 100%),

    radial-gradient(1px 1px at 47% 38%, rgba(255, 255, 255, .5), transparent 100%),

    radial-gradient(1px 1px at 92% 74%, rgba(255, 255, 255, .6), transparent 100%);

  background-size: 620px 620px, 480px 480px, 760px 760px, 540px 540px,

                   700px 700px, 420px 420px, 560px 560px, 660px 660px;

}



/**

 * Sekcje przestaja malowac wlasne tlo.

 *

 * Wyjatek to stopka ze scena astronauty - ona ma wlasna ilustracje i musi

 * zaslonic gwiazdy, bo inaczej swiecilyby przez gory.

 */

body.lp-body main section,

body.lp-body .lp-section,

body.lp-body .lp-section--alt {

  background: transparent;

}



/**
 * Wysokosc sceny liczona z proporcji ilustracji (1920 x 814, czyli 2.36:1).
 *
 * Przy stalej wysokosci i background-size: cover obraz skalowal sie do
 * szerokosci okna i tracil polowe kadru w pionie - razem z astronauta, ktory
 * stoi wysoko na skale. Teraz scena dostaje dokladnie tyle wysokosci, ile
 * potrzebuje caly obraz, a stopka rosnie razem z nia.
 */
@media (min-width: 701px) {
  .lp-footer-scene {
    min-height: calc(100vw / 2.36 + 7rem);
    padding-top: 4rem;
  }

  .lp-footer-scene .site-footer__scene {
    height: calc(100vw / 2.36);
    max-height: none;
  }
}

/**
 * Stopka nie maluje juz wlasnego tla.
 *
 * Miala nieprzezroczyste `--lp-bg` i wlasne niebo, a sekcja nad nia jest
 * przezroczysta i pokazuje niebo calej strony. Na styku spotykaly sie wiec
 * dwa rozne niebosklony i granica byla widoczna jak linia narysowana
 * olowkiem. Teraz tlo jest jedno, wspolne dla calej strony, a mgławice,
 * gwiazdy i meteory biegna przez stopke bez przerwy.
 */
body.lp-body .lp-footer-scene { background: transparent; }

/* Wlasne niebo stopki wchodzi dopiero nizej, wygaszone od gory. Gwiazdy
   pojawiaja sie wiec stopniowo, zamiast wlaczac sie naraz na krawedzi. */
body.lp-body .lp-footer-scene .site-footer__sky {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 320px);
          mask-image: linear-gradient(to bottom, transparent 0, #000 320px);
}



/* Sekcja audytu ma wlasne poswiaty i izolacje - zostaje przezroczysta,

   zeby gwiazdy przechodzily takze pod nia. */

body.lp-body .lp-audit { background: transparent; }



/* Przy zredukowanym ruchu nic sie tu nie animuje, wiec nie ma czego wylaczac.

   Zostaje sama statyczna warstwa. */

/* ═══ Opinie: naglowek sekcji ═══════════════════════════════════════════ */

/* Karty sasiednie wychodza poza kontener - sekcja nie moze ich przycinac,
   ale strona nie moze tez dostac poziomego paska przewijania. */
.lp-reviews { overflow: hidden; }

.lp-reviews__head { text-align: center; margin-bottom: 2rem; }

.lp-reviews__badge {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  margin: 0 0 1rem;
  padding: .5rem .875rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
}

.lp-reviews__score {
  font-family: var(--lp-font-head);
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}

.lp-reviews__stars { color: #ffc531; letter-spacing: .05em; }
.lp-reviews__count { font-size: .8125rem; color: var(--lp-muted); }

.lp-reviews__headline { margin: 0 0 .5rem; }

.lp-reviews__lead {
  margin: 0;
  font-size: .9375rem;
  color: var(--lp-muted);
}

/* --- Nawigacja pod talia --- */

/* --- Talia kart --------------------------------------------------------
   Wszystkie karty leza w jednej komorce siatki, jedna na drugiej. Aktywna
   stoi z przodu, sasiednie cofaja sie i przygasaja. */

.lp-reviews__stack {
  list-style: none;
  display: grid;
  align-items: center;
  margin: 0 auto;
  padding: 0;
  /* Weziej niz kontener, zeby sasiednie karty mialy gdzie wystac. */
  max-width: 34rem;
  perspective: 1400px;
}

.lp-reviews__card {
  grid-area: 1 / 1;
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  background: #0b0b12;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6);

  /* Stan domyslny: gleboko z tylu i niewidoczna. */
  opacity: 0;
  transform: translateX(0) scale(.86);
  pointer-events: none;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1),
              opacity .45s ease,
              filter .45s ease;
}

.lp-reviews__card.is-active {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
  z-index: 3;
}

/**
 * Sasiednie karty wychodza daleko w bok i obracaja sie w przestrzeni.
 *
 * Przy przesunieciu o 14 procent i mocnym rozmyciu wygladaly jak cien pod
 * aktywna karta - nie bylo widac, ze to kolejne opinie. Teraz wystaja poza
 * kontener, sa obrocone i tylko lekko przygaszone, wiec od razu wiadomo,
 * ze talia ma wiecej kart i da sie ja przekrecic.
 */
.lp-reviews__card.is-prev,
.lp-reviews__card.is-next {
  opacity: .62;
  z-index: 2;
  filter: blur(.5px) saturate(.8);
  pointer-events: auto;
  cursor: pointer;
}

.lp-reviews__card.is-prev {
  transform: translateX(-46%) scale(.8) rotateY(24deg);
  transform-origin: right center;
}

.lp-reviews__card.is-next {
  transform: translateX(46%) scale(.8) rotateY(-24deg);
  transform-origin: left center;
}

.lp-reviews__card.is-prev:hover,
.lp-reviews__card.is-next:hover { opacity: .85; }

.lp-reviews__card.is-prev .lp-ba__range,
.lp-reviews__card.is-next .lp-ba__range { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .lp-reviews__card { transition: none; }
}

/* --- Suwak przed / po --- */

/* Obraz wypelnia cala karte - tresc lezy na nim, nie pod nim. */
.lp-ba,
.lp-reviews__solo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #05060a;
  user-select: none;
  touch-action: pan-y;
  margin: 0;
}

.lp-ba__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Warstwa "przed" przycinana szerokoscia z suwaka. Obraz w srodku ma stala
   szerokosc karty, inaczej skalowalby sie przy przesuwaniu i porownanie
   nie mialoby sensu. */
.lp-ba__przed {
  position: absolute;
  inset: 0;
  width: var(--lp-ba-pos, 50%);
  overflow: hidden;
}

.lp-ba__przed .lp-ba__img {
  width: var(--lp-ba-szer, 100%);
  max-width: none;
  filter: grayscale(.7) brightness(.8);
}

/* --- Przejazd po dlugim zrzucie ----------------------------------------
   Zrzut calej strony ma kilka ekranow wysokosci. Przyciety do karty pokazuje
   sam naglowek, wiec z metamorfozy widac 15 procent tego, co sie zmienilo.

   W trybie "is-scan" obraz zachowuje swoja wysokosc i jezdzi w pionie:
   na myszy za kursorem, na telefonie razem z przewijaniem strony. Swiadomie
   NIE ma tu przeciagania palcem w pionie - to ten sam gest co scroll strony
   i zabieralibysmy go czlowiekowi w polowie sekcji.

   Wysokosc liczy JavaScript i podaje gotowe piksele, bo obie warstwy maja
   inna dlugosc strony i musza dojechac do swojego konca w tym samym czasie. */
.lp-ba.is-scan .lp-ba__img,
.lp-reviews__solo.is-scan img {
  height: auto;
  object-fit: fill;
  transform: translate3d(0, var(--lp-scan-y, 0px), 0);
  will-change: transform;
}

/* Bez przejscia w trakcie jazdy: pozycje podaje rAF co klatke, wiec kazda
   nowa wartosc uruchamialaby wlasna animacje i obraz plynalby z opoznieniem
   za wlasna pozycja. Przejscie wlacza sie tylko na powrot po zjechaniu
   kursorem, zeby strona nie skakala twardo na gore. */
.lp-ba.is-reset .lp-ba__img,
.lp-reviews__solo.is-reset img {
  transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}

/* Na telefonie przejazd steruje przewijaniem strony, wiec wlasna animacja
   ciagnelaby sie za palcem i wygladala na zacinanie. */
@media (prefers-reduced-motion: reduce) {
  .lp-ba.is-reset .lp-ba__img,
  .lp-reviews__solo.is-reset img { transition: none; }
}

/* Podpowiedz, ze karta ma dalszy ciag w dole. Znika, gdy przejazd ruszy. */
.lp-scan-hint {
  position: absolute;
  left: 50%;
  bottom: 38%;
  z-index: 4;
  transform: translateX(-50%);
  padding: .25rem .625rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .62);
  backdrop-filter: blur(6px);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
  pointer-events: none;
  transition: opacity .3s ease;
}

.lp-ba.is-scanning .lp-scan-hint,
.lp-reviews__solo.is-scanning .lp-scan-hint { opacity: 0; }

.lp-ba__label {
  position: absolute;
  top: .75rem;
  z-index: 3;
  padding: .1875rem .625rem;
  border-radius: 999px;
  font-size: .625rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  pointer-events: none;
}

.lp-ba__label--przed { left: .75rem; background: rgba(0, 0, 0, .7); }
.lp-ba__label--po { right: .75rem; background: var(--lp-gradient); }

/* Uchwyt: pionowa linia z kolkiem. Sam w sobie nie lapie zdarzen - robi to
   przezroczysty input pod spodem, wiec dziala tez z klawiatury. */
.lp-ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--lp-ba-pos, 50%);
  z-index: 2;
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 255, 255, .9);
  pointer-events: none;
}

.lp-ba__handle i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.75rem;
  height: 2.75rem;
  margin: -1.375rem 0 0 -1.375rem;
  border-radius: 50%;
  background: var(--lp-gradient);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
}

.lp-ba__handle i::before,
.lp-ba__handle i::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  margin-top: -5px;
}

.lp-ba__handle i::before { left: .625rem; border-right: 7px solid #fff; }
.lp-ba__handle i::after { right: .625rem; border-left: 7px solid #fff; }

/* Suwak przykrywa caly obraz i jest niewidoczny - liczy sie tylko to,
   ze lapie palec, mysz i klawiature. */
/* Suwak lapie tylko gorna polowe karty. Nizej lezy tresc z linkiem, a pole
   rozciagniete na cala wysokosc przechwytywaloby klikniecia w nia. */
.lp-ba__range {
  position: absolute;
  inset: 0 0 auto;
  z-index: 4;
  width: 100%;
  height: 58%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.lp-ba__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 3rem;
  height: 100%;
  cursor: ew-resize;
}

.lp-ba__range::-moz-range-thumb {
  width: 3rem;
  height: 100%;
  border: 0;
  background: transparent;
  cursor: ew-resize;
}

/* Widoczna obwodka przy nawigacji klawiatura. */
.lp-ba__range:focus-visible { outline: 2px solid var(--lp-primary); outline-offset: -4px; }

.lp-reviews__solo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* --- Tresc na obrazie --------------------------------------------------
   Panel wyplywa z ciemnosci przy dolnej krawedzi: gradient od pelnej czerni
   do przezroczystosci. Dzieki temu tekst jest czytelny na kazdym zrzucie,
   a obraz nie konczy sie twarda linia. */

.lp-reviews__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: .625rem;
  padding: 5rem 1.5rem 1.5rem;
  background: linear-gradient(180deg,
    rgba(5, 6, 10, 0) 0%,
    rgba(5, 6, 10, .75) 32%,
    rgba(5, 6, 10, .95) 60%,
    #05060a 100%);
  pointer-events: none;
}

/* Klikalne zostaja tylko elementy, ktore maja byc klikalne - reszta panelu
   przepuszcza zdarzenia do suwaka pod spodem. */
.lp-reviews__body a { pointer-events: auto; }

.lp-reviews__top { display: flex; align-items: center; gap: .75rem; min-height: 1.5rem; }

.lp-reviews__logo {
  max-height: 28px;
  max-width: 110px;
  width: auto;
  object-fit: contain;
}

.lp-reviews__branza {
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}

.lp-reviews__cytat {
  margin: 0;
  font-family: var(--lp-font-head);
  font-size: clamp(1.25rem, 2.6vw, 1.625rem);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.01em;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .6);
}

/* Fraza wyciagnieta jako cytat, podswietlona w tresci. Oko laczy jedno
   z drugim i widac, ze cytat nie zostal wymyslony, tylko wybrany. */
.lp-reviews__text mark {
  background: none;
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 -.55em 0 rgba(204, 0, 166, .3);
}

.lp-reviews__text {
  margin: 0;
  padding-left: .875rem;
  border-left: 2px solid rgba(204, 0, 166, .7);
  font-size: .8125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .78);

  /* Cztery linijki wystarcza, zeby bylo widac, ze to realna wypowiedz,
     a nie jedno wyrwane zdanie. Dluzsze opinie przycinamy. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lp-reviews__zrodlo {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.lp-reviews__avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lp-gradient);
  font-family: var(--lp-font-head);
  font-weight: 800;
  font-size: .875rem;
  color: #fff;
}

.lp-reviews__kto { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.lp-reviews__name { font-weight: 700; color: #fff; font-size: .8125rem; }

.lp-reviews__skad {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .1875rem .375rem;
  font-size: .6875rem;
  color: rgba(255, 255, 255, .6);
}

.lp-reviews__stars-sm { color: #ffc531; }
.lp-reviews__g { width: 12px; height: 12px; display: block; }

.lp-reviews__www {
  margin-left: auto;
  flex: 0 0 auto;
  padding: .375rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .06);
  font-size: .6875rem;
  color: #fff;
  white-space: nowrap;
  transition: background var(--lp-transition), border-color var(--lp-transition);
}

.lp-reviews__www:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .4);
}

/* --- Nawigacja --- */

.lp-reviews__arrow:disabled { opacity: .3; cursor: default; }

/* Desktop: karta szersza i nizsza, tresc dostaje wiecej powietrza. */
@media (min-width: 900px) {
  .lp-reviews__stack { max-width: 56rem; padding-inline: 3.5rem; }
  .lp-reviews__card { aspect-ratio: 16 / 12; }
  .lp-reviews__body { padding: 6rem 2rem 1.75rem; gap: .75rem; }
  .lp-reviews__text { -webkit-line-clamp: 3; font-size: .875rem; }
}

/* Na waskich ekranach karty sasiednie chowaja sie prawie calkiem -
   przy 390 px nie ma miejsca na trzy karty naraz. */
@media (max-width: 700px) {
  .lp-reviews__card.is-prev { transform: translateX(-60%) scale(.78) rotateY(26deg); opacity: .4; }
  .lp-reviews__card.is-next { transform: translateX(60%) scale(.78) rotateY(-26deg); opacity: .4; }
}

/* --- Kontakt na scenie -------------------------------------------------
   Bez wlasnego tla: ma sie wtapiac w kosmos, nie lezec na nim plyta.
   Czytelnosc daje cien tekstu, nie prostokat. */

.lp-footer-scene__cta-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: 2.5rem;
}

.lp-footer-cta {
  max-width: 30rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .625rem;
}

.lp-footer-cta__title {
  margin: 0;
  font-family: var(--lp-font-head);
  font-size: clamp(1.5rem, 3.6vw, 2.125rem);
  font-weight: 800;
  line-height: 1.12;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .7);
}

.lp-footer-cta__lead {
  margin: 0 0 .375rem;
  font-size: .9375rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .78);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .7);
}

.lp-footer-cta__tel { display: flex; flex-direction: column; gap: .125rem; color: #fff; }

.lp-footer-cta__tel-label {
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}

.lp-footer-cta__tel-num {
  font-family: var(--lp-font-head);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: 800;
  line-height: 1.1;
  transition: color var(--lp-transition);
}

.lp-footer-cta__tel:hover .lp-footer-cta__tel-num { color: var(--lp-primary); }

.lp-footer-cta__btn { margin-top: .375rem; }

@media (max-width: 700px) {
  /* Na telefonie ilustracja jest pionowa, astronauta stoi na srodku,
     wiec tekst tez wraca na srodek. */
  .lp-footer-cta { max-width: none; align-items: center; text-align: center; }
}

/* --- Strzalki po bokach talii -----------------------------------------
   Pozycjonowane wzgledem sceny, na wysokosci srodka karty. Leza ponad
   sasiednimi kartami, wiec da sie kliknac i w strzalke, i w sama karte. */
.lp-reviews__scena {
  position: relative;
}

/* --- Poswiata pod talia ------------------------------------------------
   Talia lezy na czarnym tle i karty zlewaly sie z nim krawedziami. Miekkie
   swiatlo w barwach marki odsuwa je od tla i daje wrazenie, ze wychodza
   z glebi, zamiast lezec na plasko.

   Dwie plamy zamiast jednej: rozowa po lewej, fioletowa po prawej, lekko
   przesuniete w pionie. Jedna wysrodkowana czytalaby sie jak reflektor
   sceniczny, czyli dokladnie ten efekt, ktory wyglada tanio. */
.lp-reviews__scena::before,
.lp-reviews__scena::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
  /* Sekcja ma overflow: hidden (obrocone karty musza byc przyciete), wiec
     swiatlo siegajace poza jej krawedz konczylo sie ostra pozioma linia
     i od razu bylo widac, gdzie jedna sekcja przechodzi w druga. Maska
     wygasza je w pionie ZANIM dojdzie do ciecia, wiec granica znika. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 74%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 74%, transparent 100%);
}

.lp-reviews__scena::before {
  top: -12%;
  left: -18%;
  width: 74%;
  height: 108%;
  background: radial-gradient(circle, rgba(204, 0, 166, .58) 0%, rgba(204, 0, 166, .22) 42%, transparent 70%);
}

.lp-reviews__scena::after {
  bottom: -14%;
  right: -18%;
  width: 74%;
  height: 104%;
  background: radial-gradient(circle, rgba(115, 56, 234, .55) 0%, rgba(115, 56, 234, .2) 42%, transparent 70%);
}

/* Karty i strzalki musza stanac nad swiatlem. */
.lp-reviews__stack,
.lp-reviews__arrow { position: relative; }
.lp-reviews__stack { z-index: 1; }

/* Rozmycie na duzej powierzchni potrafi kosztowac na slabszym telefonie,
   wiec tam swiatlo jest mniejsze i slabsze. */
@media (max-width: 720px) {
  .lp-reviews__scena::before,
  .lp-reviews__scena::after { filter: blur(60px); opacity: .7; }
}

.lp-reviews__arrow {
  position: absolute;
  top: 50%;
  z-index: 6;
  width: 3.5rem;
  height: 3.5rem;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  /* Gradient marki, ten sam co na plakietce "po" i na przyciskach. Ciemne
     kolko z rozmyciem gubilo sie na ciemnych zrzutach stron i wygladalo jak
     element przegladarki, a nie jak czesc sekcji. */
  background: var(--lp-gradient);
  color: #fff;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 .5rem 1.5rem rgba(204, 0, 166, .3), 0 0 0 1px rgba(255, 255, 255, .12) inset;
  transition: background .2s ease, box-shadow .25s ease, transform .25s cubic-bezier(.22, .61, .36, 1);
}

/* Poswiata pod spodem. Osobna warstwa, bo box-shadow nie rozmywa sie tak
   miekko jak rozmyte tlo, a to ma swiecic, nie rysowac obwodke. */
.lp-reviews__arrow::before {
  content: "";
  position: absolute;
  inset: -35%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(204, 0, 166, .45) 0%, rgba(115, 56, 234, .18) 45%, transparent 70%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.lp-reviews__arrow--prev { left: 0; }
.lp-reviews__arrow--next { right: 0; }

.lp-reviews__arrow:hover {
  background: var(--lp-gradient-hover);
  box-shadow: 0 .75rem 2rem rgba(204, 0, 166, .48), 0 0 0 1px rgba(255, 255, 255, .22) inset;
}

.lp-reviews__arrow:hover::before { opacity: 1; }

.lp-reviews__arrow--prev:hover { transform: translateY(-50%) translateX(-4px) scale(1.06); }
.lp-reviews__arrow--next:hover { transform: translateY(-50%) translateX(4px) scale(1.06); }

.lp-reviews__arrow:active { transform: translateY(-50%) scale(.94); }

/* Na waskich ekranach sasiednie karty i tak sa poza kadrem, wiec strzalki
   wjezdzaja na krawedzie aktywnej karty. */
@media (max-width: 720px) {
  .lp-reviews__arrow { width: 2.5rem; height: 2.5rem; font-size: 1.375rem; }
  .lp-reviews__arrow--prev { left: .25rem; }
  .lp-reviews__arrow--next { right: .25rem; }
}

/* --- Spoiwo miedzy sekcjami -------------------------------------------
   Same maski usuwaja ostra linie, ale sekcje nadal czytaja sie jak dwa
   osobne prostokaty, bo kolor konczy sie razem z talia. Te dwie plamy
   siedza na gorze audytu i podejmuja te sama palete tuz pod spojeniem,
   wiec swiatlo przechodzi z jednej sekcji w druga zamiast sie urywac.

   Obie sekcje maja overflow: hidden, wiec swiatlo nie moze byc jednym
   elementem na styku - musi byc po obu stronach i spotkac sie w polowie. */
.lp-audit::before {
  content: "";
  position: absolute;
  top: -4%;
  left: 50%;
  z-index: -1;
  width: 130%;
  height: 62%;
  transform: translateX(-50%);
  pointer-events: none;
  filter: blur(90px);
  background:
    radial-gradient(45% 60% at 28% 30%, rgba(204, 0, 166, .3), transparent 70%),
    radial-gradient(45% 60% at 74% 24%, rgba(115, 56, 234, .28), transparent 70%);
  /* Wygaszenie z OBU stron. Sama gora wystarczyla, gdyby sekcja nie miala
     overflow: hidden - a ma, wiec swiatlo zaczynajace sie pelna moca przy
     jej krawedzi rysowalo taka sama ostra linie, jaka wlasnie usunelismy
     nad spojeniem, tylko pod nim. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 58%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 58%, transparent 100%);
}

@media (max-width: 720px) {
  .lp-audit::before { filter: blur(60px); opacity: .75; }
}

/* --- Spadajace gwiazdy -------------------------------------------------
   Warstwa nad mglawicami i statycznymi gwiazdami, ale pod trescia. Meteory
   sa drobne: cienka smuga i jasna glowka. Duzy meteor jest juz w stopce,
   przy astronaucie, i to on ma byc tam jedynym wydarzeniem - te sa tlem,
   ktore ma sie zauwazyc katem oka, a nie przerwac czytanie. */
.lp-meteors {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.lp-meteor {
  position: absolute;
  width: var(--lp-meteor-len, 90px);
  height: 1px;
  /* Kat podaje JavaScript: jedne leca w prawo i w dol, inne w lewo i w dol.
     translateX idzie po osi OBROCONEGO elementu, wiec sam kat wystarcza za
     kierunek, a jego prawa krawedz zawsze jest czolem meteoru - dlatego
     glowka i jasniejszy koniec smugi nie wymagaja odbijania. */
  transform: rotate(var(--lp-meteor-kat, 32deg));
  transform-origin: right center;
  opacity: 0;
  /* Smuga ciagnie sie ZA glowka, wiec jasnosc rosnie do prawej krawedzi. */
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, .75));
  animation: lp-meteor-leci var(--lp-meteor-czas, 1.4s) cubic-bezier(.4, 0, .8, .5) forwards;
}

/* Glowka. Osobny element, bo smuga jest wysoka na jeden piksel i sam
   box-shadow na niej wygladal jak kreska, a nie jak punkt swiatla. */
.lp-meteor::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: #fff;
  box-shadow: 0 0 6px 1px rgba(255, 214, 250, .9);
}

@keyframes lp-meteor-leci {
  0%   { opacity: 0; transform: rotate(var(--lp-meteor-kat, 32deg)) translateX(0); }
  12%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--lp-meteor-kat, 32deg)) translateX(var(--lp-meteor-droga, 420px)); }
}

/* Ruch w tle jest ozdoba, wiec przy wylaczonych animacjach znika calkiem. */
@media (prefers-reduced-motion: reduce) {
  .lp-meteors { display: none; }
}



/* --- Pudelka zaslaniaja tlo -------------------------------------------
   Meteory leca w warstwie pod trescia, ale wiekszosc kart ma tlo w rodzaju
   rgba(255,255,255,.03), czyli jest praktycznie przezroczysta. Meteor
   przelatujacy ZA taka karta wyglada, jakby szedl PO niej.

   Dokladamy wiec nieprzezroczysta podklade w kolorze strony, a dotychczasowa
   jasna warstwe zostawiamy jako obraz na wierzchu. Karta wyglada tak samo,
   a przestaje przepuszczac to, co leci z tylu. */
.lp-glass,
.lp-vs__table,
.lp-plan:not(.lp-plan--hi),
.lp-plan__step,
.lp-faq__item,
.lp-audit__gap,
.lp-audit__expired,
.lp-reviews__card {
  background-color: var(--lp-bg);
}

/* Karta opinii ma wlasny obraz (zrzut strony) na calej powierzchni, wiec
   wystarcza jej sam kolor pod spodem. Reszta odzyskuje swoj jasny odcien. */
/* Kafel "najczesciej wybierany" jest wyjety z tej listy celowo: jego tlo to
   dwie warstwy (padding-box + border-box) skladajace sie na obracajaca sie
   ramke. Nadpisanie background-image gasilo ja calkowicie. Nieprzezroczystosc
   i tak ma, bo warstwa padding-box jest pelnym kolorem. */
.lp-glass,
.lp-vs__table,
.lp-plan:not(.lp-plan--hi),
.lp-plan__step,
.lp-faq__item,
.lp-audit__gap,
.lp-audit__expired {
  background-image: linear-gradient(rgba(255, 255, 255, .04), rgba(255, 255, 255, .04));
}

/* Stany (hover, open) maja wlasne reguly z wyzsza specyficznoscia i kasowaly
   nieprzezroczysta podklade, wiec meteor wracal nad karte w momencie, w ktorym
   ktos ja otworzyl albo najechal. Te selektory sa celowo mocniejsze. */
body.lp-body .lp-faq__item,
body.lp-body .lp-faq__item:hover,
body.lp-body .lp-faq__item[open],
body.lp-body .lp-plan:not(.lp-plan--hi):hover,
body.lp-body .lp-vs__row:hover {
  background-color: var(--lp-bg);
  background-image: linear-gradient(rgba(255, 255, 255, .05), rgba(255, 255, 255, .05));
}

body.lp-body .lp-faq__item:hover,
body.lp-body .lp-faq__item[open] {
  background-image: linear-gradient(rgba(255, 255, 255, .07), rgba(255, 255, 255, .07));
}

/* --- Naglowki zapalajace sie slowo po slowie ---------------------------
   Ten sam mechanizm co w sekcji "Co otrzymujesz" na stronie glownej
   (what-you-get.css): slowo jest przygaszone i zapala sie po kolei, w miare
   przewijania sekcji przez ekran. Raz zapalone zostaje jasne.

   `color: inherit` po zapaleniu jest tu kluczowe - dzieki niemu slowo wraca
   do koloru, ktory ma jego rodzic. Slowa w zwyklym naglowku robia sie biale,
   a te w elemencie z wlasnym kolorem (plakietka "za darmo", akcenty marki)
   odzyskuja swoj kolor, zamiast dostac bialy na sile. */
.lp-word {
  display: inline-block;
  color: rgba(255, 255, 255, .18);
  transition: color .45s ease;
}

.lp-word.is-lit { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .lp-word { color: inherit; transition: none; }
}

/* --- Wyroznienia w naglowkach -----------------------------------------
   Dwa sposoby, oba w gradiencie marki: slowo pomalowane gradientem i slowo
   podkreslone gradientem. Obydwa wspolpracuja z zapalaniem slow: dopoki
   slowo jest przygaszone, ma swoj szary kolor, a po zapaleniu (`inherit`)
   odslania to, co jest pod spodem. */
.lp-grad {
  background: var(--lp-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.lp-uline {
  position: relative;
  display: inline-block;
}

/* Podkreslenie rysuje pseudoelement, a nie text-decoration - linia ma byc
   gruba, zaokraglona i w gradiencie, a dekoracja tekstu nie przyjmuje tla. */
.lp-uline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.08em;
  height: .1em;
  min-height: 3px;
  border-radius: 999px;
  background: var(--lp-gradient);
  /* Wjezdza razem ze slowem: dopoki slowo jest przygaszone, linii nie ma. */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.lp-uline:has(.lp-word.is-lit)::after,
.lp-uline.is-lit::after { transform: scaleX(1); }

/* Naglowki, ktorych nie obejmuje zapalanie slowo po slowie (hero to h1,
   nie h2), nie maja czego czekac - kreska stoi tam od razu. Bez tego
   podkreslenie siedzi w kodzie i nigdy sie nie pokazuje. */
.lp-uline:not(:has(.lp-word))::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .lp-uline::after { transform: scaleX(1); transition: none; }
}

/* --- Logo przypiete i licznik sekund -----------------------------------
   Logo zostaje na ekranie przez cala strone, a w prawym rogu odlicza czas
   zapowiedziany w hero ("Daj nam 19 sekund"). Licznik idzie za postepem
   przewijania, nie za zegarem: dojechanie do konca strony to dokladnie
   00:19. Dzieki temu obietnica z hero jest sprawdzalna, a nie ozdobna.

   Oba elementy stoja nad belka krokow (z-index 60), bo belka ma wolne rogi -
   jej kroki sa wysrodkowane. */
body.lp-body .lp-brand {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 61;
  padding: .75rem clamp(14px, 1.4vw, 28px);
  pointer-events: none;
}

body.lp-body .lp-brand .lp-brand__img {
  height: 40px;
  transition: height .3s ease;
}

/* Po zejsciu z hero logo robi sie mniejsze, zeby nie konkurowalo z trescia. */
body.lp-body.is-scrolled .lp-brand .lp-brand__img { height: 30px; }

.lp-timer {
  position: fixed;
  top: .5rem;
  right: clamp(14px, 1.4vw, 28px);
  z-index: 61;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .375rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 4, 8, .72);
  backdrop-filter: blur(12px);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lp-muted);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .3s ease, transform .3s ease;
}

body.lp-body.is-scrolled .lp-timer {
  opacity: 1;
  transform: translateY(0);
}

/* Cyfry w stalej szerokosci, inaczej licznik drga przy kazdej zmianie. */
.lp-timer__time {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: .9375rem;
  letter-spacing: .04em;
  background: var(--lp-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Po dobiciu do 19 sekund plakietka mowi, ze obietnica zostala spelniona. */
.lp-timer.is-done { border-color: rgba(204, 0, 166, .45); }

@media (max-width: 720px) {
  .lp-timer { font-size: .625rem; padding: .3125rem .625rem; }
  .lp-timer__label { display: none; }
  body.lp-body .lp-brand .lp-brand__img { height: 32px; }
  body.lp-body.is-scrolled .lp-brand .lp-brand__img { height: 26px; }
}

/* --- Pasek audytu: swiatlo jezdzace dookola ---------------------------
   Ten sam zabieg co na kaflu "najczesciej wybierany": zamiast stojacego
   gradientu conic-gradient obracany o pelny kat. Obwodka i tak juz byla
   w barwach marki, wiec zmienia sie tylko to, ze zaczyna zyc.

   Kat ma wlasna zmienna (--lp-shout-spin), nie wspolna z kaflem cennika.
   Wspolna sprawilaby, ze oba elementy krecilyby sie w tej samej fazie
   i strona wygladalaby jak jeden mechanizm, a nie dwa osobne akcenty. */
@property --lp-shout-spin {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.lp-audit__shout {
  background: conic-gradient(
    from var(--lp-shout-spin),
    #cc00a6, #7338ea, #4c1d9e, #a01580, #cc00a6
  );
  animation: lp-shout-spin 5s linear infinite, lp-shout-glow 3.2s ease-in-out infinite;
}

@keyframes lp-shout-spin {
  to { --lp-shout-spin: 360deg; }
}

@keyframes lp-shout-glow {
  0%, 100% { box-shadow: 0 24px 60px rgba(204, 0, 166, .3); }
  50%      { box-shadow: 0 26px 74px rgba(115, 56, 234, .42); }
}

@media (prefers-reduced-motion: reduce) {
  .lp-audit__shout { animation: none; background: var(--lp-gradient); }
}

/* --- Przyciski: oddech i przetarcie swiatlem --------------------------
   Dwie rzeczy, obie delikatne.

   1. Poswiata pod przyciskiem lekko pulsuje, wiec przycisk "oddycha"
      zamiast stac martwo. Skala ruchu jest mala celowo: przycisk ma
      przyciagac wzrok, a nie migac jak baner z 2005 roku.

   2. Po przycisku co jakis czas przechodzi smuga swiatla, tak jak po
      metalu obracanym w dloni. Leci raz na 5 sekund, a nie bez przerwy -
      efekt, ktory chodzi caly czas, przestaje byc zauwazany po dwoch
      sekundach i zostaje samym kosztem.

   Smuga jest przycieta do ksztaltu przycisku (overflow: hidden) i nie
   lapie klikniec (pointer-events: none), wiec nie zmienia niczego poza
   wygladem. */
.lp-btn--primary,
.lp-audit__go {
  position: relative;
  overflow: hidden;
  animation: lp-btn-oddech 3.4s ease-in-out infinite;
}

.lp-btn--primary::after,
.lp-audit__go::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, .28) 45%,
    rgba(255, 255, 255, .45) 50%,
    rgba(255, 255, 255, .28) 55%,
    transparent 100%
  );
  transform: skewX(-18deg);
  animation: lp-btn-blysk 5s ease-in-out infinite;
}

/* Tresc przycisku musi stac nad smuga, inaczej napis bieleje w momencie
   przejscia i wyglada jak blad renderowania. */
.lp-btn--primary > *,
.lp-audit__go > * { position: relative; z-index: 2; }

/* Na najechanie smuga przelatuje od razu, zamiast czekac na swoja kolej. */
.lp-btn--primary:hover::after,
.lp-audit__go:hover::after {
  animation: lp-btn-blysk 1.1s ease-out;
}

@keyframes lp-btn-oddech {
  0%, 100% {
    box-shadow:
      0 4px 0 0 rgba(0, 0, 0, .4),
      0 0 0 1px rgba(204, 0, 166, .6),
      0 0 24px rgba(204, 0, 166, .4);
  }
  50% {
    box-shadow:
      0 4px 0 0 rgba(0, 0, 0, .4),
      0 0 0 1px rgba(204, 0, 166, .7),
      0 0 34px rgba(115, 56, 234, .5);
  }
}

@keyframes lp-btn-blysk {
  0%       { left: -60%; opacity: 0; }
  8%       { opacity: 1; }
  26%      { left: 120%; opacity: 0; }
  100%     { left: 120%; opacity: 0; }
}

/* Wcisniety przycisk nie oddycha - w tym momencie liczy sie odpowiedz na
   klikniecie, a nie ozdoba. */
.lp-btn--primary:active,
.lp-audit__go:active { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .lp-btn--primary,
  .lp-audit__go { animation: none; }

  .lp-btn--primary::after,
  .lp-audit__go::after { display: none; }
}

/* --- Plakietka "19 sekund": drgniecie co jakis czas -------------------
   Obietnica z hero ma zostac zauwazona, wiec plakietka co kilka sekund
   drgnie w bok i wraca. Ruch jest krotki i konczy sie w miejscu startu,
   a przerwa miedzy powtorzeniami jest dluga - staly dygot czyta sie jak
   usterka renderowania, a nie jak zaproszenie. */
.lp-hero__chip {
  display: inline-block;
  transform: rotate(-2.5deg);
  transform-origin: center;
  animation: lp-chip-drgnij 6s ease-in-out infinite;
}

/* Plakietka ma stale przekrzywienie (-2.5deg), a drgniecie liczy sie OD
   niego. Bez tego animacja prostowala ja do zera i po pierwszym cyklu
   zostawala prosta - dokladnie to bylo widac po ostatniej zmianie. */
@keyframes lp-chip-drgnij {
  0%, 82%, 100% { transform: translateX(0) rotate(-2.5deg); }
  84%  { transform: translateX(-3px) rotate(-4deg); }
  87%  { transform: translateX(3px) rotate(-1deg); }
  90%  { transform: translateX(-2px) rotate(-3.4deg); }
  93%  { transform: translateX(2px) rotate(-1.6deg); }
  96%  { transform: translateX(-1px) rotate(-2.5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .lp-hero__chip { animation: none; }
}

/* --- Pasek z logo klientow --------------------------------------------
   Jedzie w kolko przez przesuniecie tasmy o polowe jej szerokosci. Tasma
   ma dwie identyczne kopie listy, wiec w chwili, gdy pierwsza wyjezdza,
   druga stoi dokladnie na jej miejscu i petla nie ma szwu.

   Loga sa odbarwione i przygaszone, a kolor wraca na najechanie. Pelne
   kolory kilkunastu obcych znakow obok siebie rozbijaja palete strony
   i przeciagaja uwage z przycisku. */
.lp-logos {
  padding-block: 2.5rem 1rem;
  overflow: hidden;
}

.lp-logos__title {
  margin: 0 0 1.25rem;
  text-align: center;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lp-muted);
}

/* Wygaszenie na obu krancach: loga wjezdzaja i znikaja w ciemnosci,
   zamiast urywac sie na krawedzi ekranu. */
.lp-logos__viewport {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.lp-logos__track {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: lp-logos-jazda 38s linear infinite;
}

/* Zatrzymanie na najechanie: ktos chce sie przyjrzec konkretnemu znakowi
   i nie ma go gonic. */
.lp-logos:hover .lp-logos__track { animation-play-state: paused; }

.lp-logos__item { flex: 0 0 auto; }

/**
 * Podwojna klasa celowo, dokladnie jak przy logo w naglowku.
 *
 * Globalne `body.lp-body img { height: auto }` ma wyzsza specyficznosc niz
 * pojedyncza klasa i kasowalo wysokosc - loga renderowaly sie w naturalnym
 * rozmiarze pliku, czyli na pol ekranu.
 */
.lp-logos .lp-logos__img {
  height: clamp(28px, 3.2vw, 44px);
  width: auto;
  max-width: none;
  opacity: .62;
  /* Bez podbijania jasnosci: loga na bialym tle robily sie wtedy szarymi
     prostokatami. Samo odbarwienie wystarczy, zeby nie rozbijaly palety. */
  filter: grayscale(1);
  transition: opacity .3s ease, filter .3s ease;
}

.lp-logos__item:hover .lp-logos__img {
  opacity: 1;
  filter: grayscale(0);
}

@keyframes lp-logos-jazda {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .lp-logos__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
}

/* --- Mala flaga RP przy slowie ----------------------------------------
   Znak stoi ZA slowem, lekko przekrzywiony, jakby zostal przypiety. Dwa
   pasy rysuje gradient z twarda granica w polowie, bo flaga ma dwa pola,
   a nie przejscie. Czerwien z flagi RP (#d4213d), nie roz marki.

   Rozmiar podany w "em", wiec flaga skaluje sie razem z naglowkiem i na
   telefonie nie robi sie wieksza od liter. */
.lp-pl { position: relative; white-space: nowrap; }

.lp-pl::after {
  content: "";
  display: inline-block;
  width: .62em;
  height: .4em;
  margin-left: .16em;
  vertical-align: .16em;
  border-radius: .05em;
  background: linear-gradient(to bottom, #fff 0 50%, #d4213d 50% 100%);
  box-shadow: 0 .04em .12em rgba(0, 0, 0, .55);
  transform: rotate(-9deg);
}

/* --- Pasek z logo: jedno srebro dla wszystkich ------------------------
   Kazdy plik przychodzi w innym kolorze, czesc na bialym tle. Rysujemy
   je wiec MASKA: ksztalt bierze sie z pliku, a kolor podaje CSS. Dzieki
   temu loga wygladaja jak jeden zestaw, a biale prostokaty znikaja same.

   Warunek: plik musi miec przezroczyste tlo (SVG albo PNG). Zdjecie JPG
   zamaskuje sie jako pelny prostokat - o tym mowi instrukcja w panelu. */
.lp-logos__mark {
  display: block;
  width: clamp(88px, 11vw, 150px);
  height: clamp(30px, 3.4vw, 44px);
  background: linear-gradient(160deg, #f2f4f8 0%, #b9bfcc 45%, #8d94a5 100%);
  opacity: .72;
  transition: opacity .3s ease, filter .3s ease;
  -webkit-mask-image: var(--lp-logo);
          mask-image: var(--lp-logo);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  /* "contain" wyrownuje znaki o roznych proporcjach do jednego pudelka,
     wiec szeroki napis i kwadratowy sygnet wazą na pasku tyle samo. */
  -webkit-mask-size: contain;
          mask-size: contain;
}

.lp-logos__item:hover .lp-logos__mark {
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(204, 0, 166, .35));
}

.lp-logos__track { animation-duration: var(--lp-logos-czas, 38s); }

/* --- Oferta koncowa: jedna kolumna, wysrodkowana ----------------------
   Wersja dwukolumnowa stawiala obok siebie argument i formularz, a oko
   nie wiedzialo, od czego zaczac. Tutaj jest jedna sciezka z gory na dol:
   pytanie, odpowiedz, dane, przycisk.

   Szerokosc ograniczona do 640px - formularz rozciagniety na cala szerokosc
   ekranu wyglada jak ankieta urzedowa, a nie jak ostatni krok oferty. */
/* Blok wysrodkowany na stronie, waski celowo: formularz rozciagniety na cala
   szerokosc czyta sie jak ankieta urzedowa, a nie jak ostatni krok oferty. */
.lp-last__inner {
  max-width: 520px;
  margin-inline: auto;
  text-align: center;
}

/* Sekcja stoi teraz w toku strony (pod cennikiem), a nie w scenie ze stopka,
   wiec potrzebuje wlasnego odstepu od sasiadow - wczesniej dawala go scena. */
.lp-last {
  position: relative;
  z-index: 2;
  padding-block: 3.5rem 4rem;
}

/* Na telefonie ilustracja jest pionowa i astronauta schodzi nizej, wiec
   formularz moze wrocic na srodek i zajac cala szerokosc. */
@media (max-width: 860px) {
  .lp-last__inner { max-width: none; margin-inline: auto; }
}

/* Naglowek konczy sie kwota - to ona ma zostac w glowie, wiec dostaje
   gradient marki, a nie kolejny odcien bieli. */
.lp-last__headline .lp-audit__title-sum,
.lp-last__headline b {
  background: var(--lp-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.lp-last__headline {
  margin: .75rem 0 .75rem;
  font-family: var(--lp-font-head);
  font-size: clamp(1.625rem, 3.2vw, 2.25rem);
  line-height: 1.12;
  color: var(--lp-text);
}

.lp-last__lead {
  margin: 0 auto 1.5rem;
  max-width: 42ch;
  color: var(--lp-muted);
}

/* Plyta pod formularzem: nad gorami i gwiazdami sam tekst jest nieczytelny,
   a pelne tlo zabiloby scene. Stad ciemne szklo z rozmyciem. */
.lp-last__form {
  padding: 1.25rem;
  border: 1px solid var(--lp-border);
  border-radius: 18px;
  background: rgba(5, 7, 14, .72);
  backdrop-filter: blur(10px);
}

.lp-last__form { text-align: left; }

.lp-last__wybor {
  margin: 0 0 1.25rem;
  padding: 0;
  border: 0;
}

.lp-last__legend {
  padding: 0;
  margin-bottom: .625rem;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--lp-text);
}

.lp-last__opcje {
  display: grid;
  gap: .5rem;
}

/* Kafelek odpowiedzi. Caly jest klikalny, bo pole wyboru wielkosci 18px
   to cel, w ktory na telefonie trafia sie za drugim razem. */
.lp-last__opcja {
  position: relative;
  display: block;
  padding: .875rem 1rem .875rem 2.75rem;
  border: 1px solid var(--lp-border);
  border-radius: 14px;
  background-color: var(--lp-bg);
  background-image: linear-gradient(rgba(255, 255, 255, .03), rgba(255, 255, 255, .03));
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}

.lp-last__opcja:hover { border-color: rgba(255, 255, 255, .28); }

/* Pole wyboru chowamy, ale zostaje dostepne dla klawiatury - stad
   pozycjonowanie poza kadrem zamiast display: none. */
.lp-last__radio {
  position: absolute;
  left: 1rem;
  top: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0;
  accent-color: var(--lp-primary);
}

.lp-last__opcja-tytul {
  display: block;
  font-weight: 700;
  color: var(--lp-text);
}

.lp-last__opcja-opis {
  display: block;
  margin-top: .125rem;
  font-size: .8125rem;
  color: var(--lp-muted);
}

/* Wybrana odpowiedz swieci ramka marki - czlowiek ma widziec, ze jego
   klikniecie cos zrobilo, zanim poda numer. */
.lp-last__opcja:has(.lp-last__radio:checked) {
  border-color: rgba(204, 0, 166, .6);
  background-image: linear-gradient(rgba(204, 0, 166, .1), rgba(115, 56, 234, .08));
}

.lp-last__fields {
  display: grid;
  gap: .75rem;
  margin-bottom: 1rem;
}

.lp-last__submit { width: 100%; }

.lp-last__safe {
  margin: 1rem 0 0;
  padding: .75rem .875rem;
  border-radius: 12px;
  border: 1px solid rgba(34, 197, 94, .28);
  background: rgba(34, 197, 94, .08);
  font-size: .8125rem;
  line-height: 1.5;
  color: #b9f0cd;
}

.lp-last__safe strong { color: #d9fbe6; }

.lp-last__rodo {
  margin: .75rem 0 0;
  font-size: .75rem;
  color: var(--lp-muted);
}

.lp-last__rodo a { color: var(--lp-muted); text-decoration: underline; }

.lp-last__done { text-align: center; }

.lp-last__done-title {
  margin: 0 0 .5rem;
  font-family: var(--lp-font-head);
  font-size: 1.375rem;
  color: var(--lp-text);
}

.lp-last__done-text { margin: 0 auto 1rem; max-width: 44ch; color: var(--lp-muted); }

@media (min-width: 560px) {
  .lp-last__fields { grid-template-columns: 1fr 1fr; }
}

/* --- Scena stopki: kontakt po lewej, formularz na srodku --------------
   Trzy kolumny. Trzecia jest pusta celowo: tam w kadrze stoi astronauta
   i wszystko, co by tam postawic, zaslanialoby wlasnie jego. Dzieki temu
   formularz wypada dokladnie na srodku strony, a nie na srodku wolnego
   miejsca obok kolumny z danymi. */
/* Lewa kolumna jest szeroka celowo. Waska wizytowka przy duzym formularzu
   wygladala jak przypis, a ma byc drugim filarem sceny: logo, kontakt,
   dane i mapa wypelniaja bok tak samo mocno jak formularz srodek. */
/* Po zabraniu formularza scena ma tylko wizytowke, wiec uklad zmienia sie
   z trzech kolumn na dwie: dane po lewej, mapa obok, a cala prawa polowa
   kadru zostaje astronaucie. Wczesniej srodkowa kolumna byla pusta i dane
   wisialy przy samej krawedzi. */
.lp-footer-scene__grid {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(240px, 340px) minmax(0, 1fr);
  gap: 2rem 2.5rem;
  align-items: start;
}

.lp-footer-scene__miejsce { min-height: 1px; }

/* Kolumna zaczyna sie nizej niz formularz. Rownanie obu do jednej linii
   dawalo uklad jak z tabelki - lekkie przesuniecie w dol sprawia, ze oko
   idzie najpierw do formularza, a wizytowka czyta sie jako to, co obok. */
.lp-fdane {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  margin-top: 4rem;
}

/* Mapa wychodzi z kolumny danych do wlasnej, obok. Dzieki temu wizytowka
   jest niska i szeroka zamiast waskiej i dlugiej, a scena z astronauta
   zostaje odsloniela. */
.lp-fdane__mapa-box {
  grid-column: 2;
  grid-row: 1;
  margin-top: 4rem;
}

.lp-fdane__mapa {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin-bottom: -3.25rem;
}

@media (max-width: 960px) {
  .lp-fdane { margin-top: 0; }
}

/* Podwojna klasa: globalne `body.lp-body img { height: auto }` przebija
   pojedyncza i logo renderowalo sie w rozmiarze pliku. */
.lp-fdane .lp-fdane__logo {
  height: clamp(64px, 6vw, 92px);
  width: auto;
  max-width: none;
  margin-bottom: .5rem;
}

.lp-fdane__big {
  display: block;
  text-decoration: none;
}

.lp-fdane__label {
  display: block;
  font-size: .625rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lp-muted);
}

.lp-fdane__value {
  display: block;
  font-family: var(--lp-font-head);
  font-size: clamp(1.625rem, 2.2vw, 2rem);
  line-height: 1.2;
  color: #fff;
  transition: color .2s ease;
  /* Nad gorami sam tekst gubi kontrast - cien zamiast prostokata pod nim. */
  text-shadow: 0 2px 12px rgba(0, 0, 0, .75);
}

/* Adres e-mail bywa dluzszy niz kolumna, wiec schodzi o stopien nizej
   i lamie sie na znaku @, zamiast wyjezdzac poza kadr. */
.lp-fdane__value--mail {
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  word-break: break-word;
}

.lp-fdane__big:hover .lp-fdane__value { color: var(--lp-primary); }

.lp-fdane__rej {
  margin: 0;
  display: grid;
  gap: .125rem;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--lp-muted);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}

.lp-fdane__mapa {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .875rem;
  border-radius: 999px;
  border: 1px solid var(--lp-border);
  background: rgba(5, 7, 14, .6);
  backdrop-filter: blur(8px);
  font-size: .8125rem;
  color: var(--lp-text);
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease;
}

.lp-fdane__mapa:hover {
  border-color: rgba(204, 0, 166, .5);
  background: rgba(5, 7, 14, .85);
}

.lp-fdane__mapa-ikona { display: flex; color: var(--lp-primary); }

/* Na telefonie astronauta schodzi pod tresc, wiec kolumny ida jedna pod
   druga: najpierw formularz, potem dane - kto dojechal na sam dol, ma miec
   pod palcem pole, a nie wizytowke. */
@media (max-width: 960px) {
  .lp-footer-scene__grid { display: flex; flex-direction: column; gap: 2.5rem; }
  .lp-fdane { order: 2; align-items: center; text-align: center; }
  .lp-fdane__rej { justify-items: center; }
  .lp-footer-scene__miejsce { display: none; }
}

/* Osadzona mapa. Przyciemniona filtrem, bo jasny prostokat Google na
   czarnej scenie swieci jak latarka i przeciaga na siebie cale spojrzenie.
   Filtr odwraca jasnosc i wraca barwy na miejsce (hue-rotate), wiec mapa
   zostaje czytelna, tylko ciemna. */
.lp-fdane__mapa-box {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--lp-border);
  background: #0a0d16;
}

.lp-fdane__mapa-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: invert(92%) hue-rotate(180deg) saturate(.7) contrast(.9);
  transition: filter .3s ease;
}

/* Na najechanie mapa wraca do naturalnych kolorow - kto chce sie jej
   przyjrzec, dostaje ja taka, jaka zna. */
.lp-fdane__mapa-box:hover .lp-fdane__mapa-frame { filter: none; }

/* --- Rakieta pod hero -------------------------------------------------
   Leci w dol, plomien ciagnie sie do gory. Cala rakieta delikatnie opada
   i wraca, zeby sugerowac kierunek - bez tego stoi w miejscu i plomien
   wyglada jak pochodnia, a nie jak ciag. */
.lp-rakieta {
  position: relative;
  display: inline-flex;
  justify-content: center;
  animation: lp-rakieta-lot 2.6s ease-in-out infinite;
}

/* Jeden kolor, ten sam co reszta drobnego tekstu w hero. Poswiata zamiast
   koloru: ksztalt zostaje czysty, a mimo to nie jest plaski. */
.lp-rakieta {
  /* Jedna liczba skaluje kadlub, plomien i poswiate. */
  --lp-rakieta-w: 22px;
}

.lp-rakieta--duza { --lp-rakieta-w: 34px; }

.lp-rakieta__ksztalt {
  position: relative;
  z-index: 2;
  display: block;
  width: var(--lp-rakieta-w);
  height: calc(var(--lp-rakieta-w) * 34 / 20);
  color: rgba(255, 255, 255, .92);
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, .28))
          drop-shadow(0 0 22px rgba(204, 0, 166, .35));
}

/* Stateczniki i iluminator w rozu marki - detal czytelny dopiero przy
   wiekszym rozmiarze, dlatego pierwsza wersja byla jednobarwna. */
.lp-rakieta__detal { color: var(--lp-primary, #cc00a6); }

/* Plomien stoi NAD rakieta, bo dysza jest u gory. Wezszy u dolu (przy
   dyszy), szerszy i rozmyty u gory, tam gdzie sie rozprasza. */
.lp-rakieta__plomien {
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: calc(var(--lp-rakieta-w) * .55);
  height: calc(var(--lp-rakieta-w) * 1.3);
  margin-bottom: calc(var(--lp-rakieta-w) * -.2);
  transform: translateX(-50%);
  border-radius: 50% 50% 46% 46% / 70% 70% 30% 30%;
  /* Plomien tez bez tecz: biel przechodzaca w jeden kolor marki i w nic.
     Dwa kolory zamiast czterech - na tym rozmiarze wiecej i tak nie widac,
     a mniej wyglada drozej. */
  background: linear-gradient(to top,
    rgba(255, 255, 255, .9) 0%,
    rgba(255, 255, 255, .55) 30%,
    rgba(204, 0, 166, .45) 70%,
    transparent 100%);
  filter: blur(1.5px);
  animation: lp-plomien 320ms ease-in-out infinite alternate;
}

/* Druga, szersza warstwa ognia - porusza sie wolniej, wiec plomien ma
   glebie zamiast jednego migajacego ksztaltu. */
.lp-rakieta__plomien::after {
  content: "";
  position: absolute;
  inset: -6px -7px 4px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(255, 255, 255, .28) 0%,
    rgba(204, 0, 166, .22) 45%,
    transparent 72%);
  filter: blur(5px);
  animation: lp-plomien-halo 780ms ease-in-out infinite alternate;
}

@keyframes lp-rakieta-lot {
  0%, 100% { transform: translateY(0); opacity: .85; }
  50%      { transform: translateY(6px); opacity: 1; }
}

@keyframes lp-plomien {
  from { transform: translateX(-50%) scaleY(.82) scaleX(.9); opacity: .85; }
  to   { transform: translateX(-50%) scaleY(1.12) scaleX(1.05); opacity: 1; }
}

@keyframes lp-plomien-halo {
  from { opacity: .5; transform: scale(.9); }
  to   { opacity: .9; transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .lp-rakieta,
  .lp-rakieta__plomien,
  .lp-rakieta__plomien::after { animation: none; }
}

/* --- Hero: pasek "budujemy na" ----------------------------------------
   Znaki technologii w tym samym srebrze co loga klientow, rysowane maska,
   wiec kolory WordPressa czy LH nie rozbijaja palety hero. */
.lp-hero__stos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
  margin-top: 1.25rem;
}

.lp-hero__stos-label {
  font-size: .625rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lp-muted);
}

.lp-hero__stos-znaki {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.lp-hero__stos-znak {
  display: block;
  width: 84px;
  height: 26px;
  background: linear-gradient(160deg, #eef1f6 0%, #b6bccb 50%, #8e95a6 100%);
  opacity: .6;
  transition: opacity .3s ease;
  -webkit-mask-image: var(--lp-logo);
          mask-image: var(--lp-logo);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.lp-hero__stos-znak:hover { opacity: .95; }

/* Odznaka partnera ma dwie linie (PARTNER + LH.PL), wiec potrzebuje
   wiekszej wysokosci niz zwykly logotyp - inaczej napis nad znakiem
   schodzi do kilku pikseli i robi sie nieczytelny. */
.lp-hero__stos-znak--badge { width: 72px; height: 34px; }

/* Znaki o proporcjach zblizonych do kwadratu (React, Expo) przy tej samej
   szerokosci co logotyp wygladalyby na dwa razy wieksze - dostaja wiec
   waskie pudelko, zeby optycznie wazyly tyle samo. */
.lp-hero__stos-znak--kwadrat { width: 30px; height: 28px; }

@media (max-width: 560px) {
  .lp-hero__stos-znak { width: 66px; height: 22px; }
  .lp-hero__stos-znaki { gap: 1rem; }
}

/* Co wchodzi w wycene - lista tuz nad przyciskiem. */
.lp-last__zawiera {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: .375rem;
}

.lp-last__zawiera li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--lp-text);
}

.lp-last__zawiera svg {
  flex: 0 0 auto;
  margin-top: .2em;
  color: var(--lp-primary);
}

/* Dowod pod przyciskiem: ocena, gwiazdki i zdanie. */
.lp-last__dowod {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .375rem .5rem;
  margin: .875rem 0 0;
  font-size: .75rem;
  line-height: 1.4;
  color: var(--lp-muted);
  text-align: center;
}

.lp-last__dowod-ocena {
  font-family: var(--lp-font-head);
  font-size: 1rem;
  color: #fff;
}

.lp-last__dowod-gwiazdki { color: #ffc043; letter-spacing: .04em; }

/* --- Kupon rabatowy w oknie wyjscia -----------------------------------
   Ksztalt biletu rysowany w calosci CSS-em: dwa wyciete polkola po bokach
   (maska z dwoch radial-gradientow) i przerywana linia odrywania miedzy
   czescia glowna a stopka.

   Kwota jest najwieksza rzecza na ekranie, bo to jedyna informacja, ktora
   ma zostac w glowie. Procent wymagal przeliczenia, zeby cokolwiek znaczyc. */
.lp-kupon {
  position: relative;
  margin: 1rem auto 1.25rem;
  max-width: 320px;
  border-radius: 18px;
  background: var(--lp-gradient);
  box-shadow: 0 18px 45px rgba(204, 0, 166, .35);
  /* Wyciecia po bokach na wysokosci linii odrywania. */
  -webkit-mask-image:
    radial-gradient(circle 11px at 0 calc(100% - 52px), transparent 11px, #000 12px),
    radial-gradient(circle 11px at 100% calc(100% - 52px), transparent 11px, #000 12px);
  -webkit-mask-composite: source-in;
          mask-image:
    radial-gradient(circle 11px at 0 calc(100% - 52px), transparent 11px, #000 12px),
    radial-gradient(circle 11px at 100% calc(100% - 52px), transparent 11px, #000 12px);
          mask-composite: intersect;
  animation: lp-kupon-oddech 3s ease-in-out infinite;
}

.lp-kupon__glowna {
  padding: 1.25rem 1.25rem 1rem;
  text-align: center;
}

.lp-kupon__label {
  display: block;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}

.lp-kupon__kwota {
  display: block;
  margin-top: .25rem;
  font-family: var(--lp-font-head);
  font-size: clamp(3rem, 12vw, 4.25rem);
  line-height: 1;
  color: #fff;
  text-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}

/* Czego dotyczy rabat. Musi stac przy kwocie, nie w nocie pod kuponem -
   informacja "nie dotyczy One Page" przeczytana po fakcie brzmi jak
   wycofywanie sie z obietnicy. */
.lp-kupon__zakres {
  display: block;
  margin-top: .375rem;
  font-size: .8125rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .9);
}

.lp-kupon__kwota i {
  font-style: normal;
  font-size: .42em;
  margin-left: .12em;
  vertical-align: .55em;
}

/* Linia odrywania. Przerywana, dokladnie na wysokosci wyciec po bokach. */
.lp-kupon__stopka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  height: 52px;
  padding: 0 1.25rem;
  border-top: 2px dashed rgba(255, 255, 255, .45);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
}

/* Kod wyglada jak z kuponu, wiec monospace i litera po literze. */
.lp-kupon__kod {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .12em;
  padding: .25rem .5rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, .28);
}

/**
 * Zastepuje .lp-kupon__kod. Bez fontu monospace celowo - monospace czyta
 * sie jak kod do wpisania w koszyku, a to jest rezerwacja, nie kupon
 * sklepowy. Ta sama pozycja i waga wizualna, inny komunikat.
 */
.lp-kupon__rezerwacja {
  padding: .25rem .625rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .28);
  white-space: nowrap;
}

.lp-exit__know-email {
  margin: 0 0 1rem;
  font-size: .875rem;
  color: var(--lp-muted);
}

.lp-exit__know-email strong { color: #fff; }

@keyframes lp-kupon-oddech {
  0%, 100% { box-shadow: 0 18px 45px rgba(204, 0, 166, .35); }
  50%      { box-shadow: 0 22px 60px rgba(115, 56, 234, .5); }
}

@media (prefers-reduced-motion: reduce) {
  .lp-kupon { animation: none; }
}

/* Plakietka z liczba miejsc. Zielona kropka zamiast czerwonego licznika -
   informacja o dostepnosci, nie alarm. Kropka pulsuje delikatnie, zeby
   dawala sygnal "na zywo", ktory przy grafiku jest prawda. */
.lp-eyebrow--miejsca {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-color: rgba(34, 197, 94, .35);
  color: #b9f0cd;
}

.lp-eyebrow__kropka {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, .6);
  animation: lp-kropka 2.4s ease-out infinite;
}

@keyframes lp-kropka {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .lp-eyebrow__kropka { animation: none; }
}

/* Plakietka konsultacji i plakietka miejsc stoja obok siebie, wiec sekcja
   potrzebuje wiersza, a nie pojedynczego elementu. */
.lp-last__inner > .lp-eyebrow,
.lp-last__inner > .lp-eyebrow--miejsca {
  display: inline-flex;
  margin: 0 .375rem .5rem;
  vertical-align: middle;
}

/* Termin startu: jedno zdanie pod nagłówkiem, bez krzyku. Presja ma być
   informacją o grafiku, a nie ostrzeżeniem. */
.lp-last__termin {
  margin: -.5rem 0 1.25rem;
  font-size: .8125rem;
  color: var(--lp-muted);
}

.lp-last__termin b { color: var(--lp-text); }

/* Tresc dla czytnikow ekranu i wyszukiwarek, poza kadrem wizualnym.
   Landing nie laduje main.css, wiec klasa musi byc tutaj wlasna. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Tresc lokalna w stopce, trzy kolumny -----------------------------
   Kolumny zamiast jednego bloku: krotka odpowiedz czyta sie sama, a przy
   okazji wypelniaja miejsce, ktore w scenie i tak bylo puste. */
.lp-fseo {
  display: grid;
  gap: 1.5rem 2rem;
  margin: 2.5rem 0 1rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  max-width: 62%;
}

.lp-fseo__title {
  margin: 0 0 .5rem;
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lp-text);
}

.lp-fseo__text {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--lp-muted);
  /* Cien zamiast plyty pod spodem: nad gorami tekst musi byc czytelny,
     ale prostokat tla zabilby scene. */
  text-shadow: 0 1px 10px rgba(0, 0, 0, .85);
}

@media (min-width: 861px) {
  .lp-fseo { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  /* Na telefonie astronauta schodzi nizej i cala szerokosc jest wolna. */
  .lp-fseo { max-width: none; }
}

/* --- Sekcja tresci lokalnej (koniec strony) ---------------------------
   Osobna sekcja za FAQ. Celowo spokojniejsza niz reszta strony: mniejszy
   tekst, przygaszony kolor, zero animacji. Ma byc czytelna dla czlowieka,
   ktory tu zajrzy, i kompletna dla Google, a nie walczyc o uwage z oferta
   wyzej.

   Niczego nie ukrywamy: ukryty tekst pod wyszukiwarki to sygnal spamerski,
   a te odpowiedzi realnie przydaja sie komus, kto porownuje wykonawcow. */
.lp-seo-sekcja {
  position: relative;
  z-index: 1;
  padding-block: 3.5rem 4rem;
  border-top: 1px solid var(--lp-border);
}

.lp-seo-sekcja__head {
  max-width: 62ch;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.lp-seo-sekcja__title {
  margin: 0 0 .75rem;
  font-family: var(--lp-font-head);
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  line-height: 1.2;
  color: var(--lp-text);
}

.lp-seo-sekcja__lead {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--lp-muted);
}

/* Miasta jako odznaki, nie jako wyliczanka w zdaniu. Wyliczanka czyta sie
   jak zapychacz, a odznaki jak informacja o zasiegu - i tak samo dobrze
   lapia zapytania typu "strona internetowa Piastow". */
.lp-seo-sekcja__miasta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .375rem;
  margin: 1.25rem 0 0;
  padding: 0;
}

.lp-seo-sekcja__miasto {
  padding: .25rem .625rem;
  border-radius: 999px;
  border: 1px solid var(--lp-border);
  background: rgba(255, 255, 255, .03);
  font-size: .75rem;
  color: var(--lp-muted);
}

.lp-seo-sekcja__siatka {
  display: grid;
  gap: 1.75rem 2.5rem;
}

/* Kazdy blok w wlasnej karcie. Goly tekst w trzech kolumnach czytal sie
   jak wydruk, a nie jak czesc tej samej strony - karty daja mu te sama
   forme co reszcie sekcji wyzej. */
.lp-seo-sekcja__blok {
  padding: 1.25rem 1.375rem;
  border: 1px solid var(--lp-border);
  border-radius: 16px;
  background-color: var(--lp-bg);
  background-image: linear-gradient(rgba(255, 255, 255, .03), rgba(255, 255, 255, .03));
  transition: border-color .25s ease;
}

.lp-seo-sekcja__blok:hover { border-color: rgba(255, 255, 255, .2); }

.lp-seo-sekcja__h3 {
  margin: 0 0 .5rem;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--lp-text);
}

.lp-seo-sekcja__p {
  margin: 0;
  font-size: .875rem;
  line-height: 1.7;
  color: var(--lp-muted);
}

@media (min-width: 720px) {
  .lp-seo-sekcja__siatka { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
  .lp-seo-sekcja__siatka { grid-template-columns: repeat(3, 1fr); }
}

/* --- Wariant kolumnowy sekcji SEO (lewa kolumna FAQ) ------------------
   Ta sama tresc co w wersji pelnoekranowej, tylko zwezona do jednej kolumny
   kart. Mniejsze odstepy i mniejszy tekst, bo obok stoi lista pytan i te
   dwa bloki nie moga ze soba konkurowac. */
.lp-seo-sekcja--kolumna {
  padding-block: 0;
  border-top: 0;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--lp-border);
}

.lp-seo-sekcja--kolumna .lp-seo-sekcja__head {
  max-width: none;
  margin: 0 0 1.5rem;
  text-align: left;
}

.lp-seo-sekcja--kolumna .lp-seo-sekcja__title { font-size: 1.125rem; }

.lp-seo-sekcja--kolumna .lp-seo-sekcja__lead { font-size: .875rem; }

.lp-seo-sekcja--kolumna .lp-seo-sekcja__miasta { justify-content: flex-start; }

.lp-seo-sekcja--kolumna .lp-seo-sekcja__siatka {
  grid-template-columns: 1fr;
  gap: .75rem;
}

.lp-seo-sekcja--kolumna .lp-seo-sekcja__blok { padding: 1rem 1.125rem; }

.lp-seo-sekcja--kolumna .lp-seo-sekcja__h3 { font-size: .875rem; }

.lp-seo-sekcja--kolumna .lp-seo-sekcja__p { font-size: .8125rem; line-height: 1.6; }

/* Dolny pasek stopki ma teraz dwa elementy zamiast czterech, wiec rozklada
   sie na krancach zamiast rozjezdzac na cztery strony. */
.lp-footer-scene__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
}

@media (max-width: 720px) {
  .lp-footer-scene__bar { justify-content: center; text-align: center; }
}

/* --- Stopka uslugi: siatka czterech kolumn ----------------------------
   Cala tresc stoi w lewej polowie kadru, bo prawa nalezy do astronauty.
   Kolumny maja rowna szerokosc i jedna linie bazowa, wiec stopka czyta sie
   jako jeden blok, a nie jako kilka elementow ustawionych obok siebie. */
.lp-fgrid {
  display: grid;
  gap: 2rem;
  align-items: start;
  padding-bottom: .5rem;
}

/* Siatka zaczyna sie nizej, na wysokosci astronauty.
   Stala tuz pod krawedzia sekcji, czyli wysoko nad gorami, i wygladala jak
   doklejona do poprzedniej sekcji zamiast stac w scenie. Wartosc wynika
   z pomiaru: ilustracja zaczyna sie okolo 105 px ponizej gornej krawedzi
   stopki, a astronauta stoi mniej wiecej w jej polowie. */
@media (min-width: 900px) {
  .lp-footer-scene__cta-wrap { padding-top: 7rem; }
}

@media (min-width: 900px) {
  /* Cztery kolumny w 62% szerokosci: marka jest szersza, bo niesie zdanie
     o firmie, reszta rowna. */
  .lp-fgrid {
    grid-template-columns: 1.15fr .85fr .95fr 1.05fr;
    gap: 2.5rem;
    max-width: 66%;
  }
}

/* Logo schudlo z 92 do 40 px. Wielkie logo w stopce nie buduje marki,
   tylko zajmuje miejsce tresci - znak rozpoznaje sie po ksztalcie,
   nie po rozmiarze. */
.lp-fgrid .lp-fgrid__logo {
  height: 40px;
  width: auto;
  max-width: none;
  display: block;
  margin-bottom: .875rem;
}

.lp-fgrid__slogan {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--lp-muted);
  max-width: 28ch;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .9);
}

.lp-fgrid__title {
  margin: 0 0 .75rem;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

.lp-fgrid__title--drugi { margin-top: 1.5rem; }

.lp-fgrid__tel {
  display: block;
  margin-bottom: .5rem;
  font-family: var(--lp-font-head);
  font-size: 1.125rem;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .9);
  transition: color .2s ease;
}

.lp-fgrid__tel:hover { color: var(--lp-primary); }

.lp-fgrid__link {
  display: inline-block;
  font-size: .8125rem;
  line-height: 1.7;
  color: var(--lp-muted);
  text-decoration: none;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .9);
  transition: color .2s ease;
}

.lp-fgrid__link:hover { color: #fff; }

.lp-fgrid__adres,
.lp-fgrid__dane {
  margin: .5rem 0 0;
  display: grid;
  gap: .125rem;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--lp-muted);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .9);
}

.lp-fgrid__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .125rem;
}

/* Mapa jako kafelek tej samej szerokosci co kolumna, nie jako osobny
   prostokat obok. */
.lp-fgrid .lp-fdane__mapa-box {
  grid-column: auto;
  grid-row: auto;
  margin: 0 0 .75rem;
  aspect-ratio: 4 / 3;
}

.lp-fgrid .lp-fdane__mapa {
  grid-column: auto;
  grid-row: auto;
  margin: 0;
  align-self: auto;
  font-size: .75rem;
  padding: .375rem .75rem;
}

/* Tresc lokalna pod siatka trzyma te sama szerokosc co kolumny wyzej. */
@media (min-width: 900px) {
  .lp-fseo { max-width: 66%; }
}

/* Naglowek sekcji przeniesiony nad liste pytan (prawa kolumna), wiec musi
   miec swoj odstep od niej. Lewa kolumna niesie teraz sama tresc lokalna. */
.lp-faq__head { margin-bottom: 2rem; }

.lp-faq__head .lp-faq__headline { margin-top: .75rem; }

.lp-faq__glowna { display: grid; align-content: start; }

/* Tresc lokalna zaczyna sie rowno z plakietka "najczestsze pytania",
   a nie pod kreska - kreska zostala po ukladzie, w ktorym stala pod
   naglowkiem. */
.lp-faq__side .lp-seo-sekcja--kolumna {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* --- Stopka: mniej pustki, ale astronauta zostaje ---------------------
   PIERWSZA PROBA (cofnieta): ilustracja jako tlo calej stopki
   (position: absolute; inset: 0 + cover). Wysokosc przestala zalezec od
   proporcji obrazka, ale kadr 4,75:1 przy ilustracji 2,36:1 obcinal ja
   w pionie - razem z astronauta, ktory stoi wysoko na skale. Zniknela tez
   migajaca lampka przy fladze, bo JS pozycjonuje ja procentowo wzgledem
   sceny.

   TERAZ: scena dalej liczy wysokosc z proporcji, ale ma gorny limit i jest
   kotwiczona do PRAWEJ dolnej krawedzi, czyli tam, gdzie stoi astronauta.
   Pusty pas znika przez mniejsza wysokosc, a nie przez kadrowanie. */
@media (min-width: 900px) {
  /* Stopka musi byc co najmniej tak wysoka jak ilustracja.
     Przy min-height: 0 stopke wyznaczala sama tresc (okolo 460 px), a scena
     miala 805 px - nadmiar byl przycinany GORA, czyli tam, gdzie stoi
     astronauta. Stad "nie widac astronauty" mimo poprawnej sceny. */
  body.lp-body .lp-footer-scene {
    min-height: calc(100vw / 2.36);
    padding-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  /* BEZ GORNEGO LIMITU WYSOKOSCI.
     Limit 560 px wygladal dobrze na 1280 px, ale przy 1900 px ilustracja
     skalowala sie do szerokosci okna (wysokosc ~810 px) i kadr obcinal
     250 px z gory - czyli astronaute, ktory stoi na szczycie skaly.

     Wysokosc musi wiec wynikac z proporcji obrazka (2,36:1), bo tylko wtedy
     miesci sie CALY. Pusta przestrzen pod tekstem to gory, a nie pustka. */
  body.lp-body .lp-footer-scene .site-footer__scene {
    height: calc(100vw / 2.36);
  }

  body.lp-body .lp-footer-scene .site-footer__terrain {
    background-size: cover;
    background-position: center bottom;
  }

  .lp-footer-scene__cta-wrap { padding-top: 4.5rem; padding-bottom: 1rem; }

  .lp-footer-scene__bar {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
  }
}

/* --- Tresc lokalna jako blok tekstu ----------------------------------
   Zamiast szesciu kart: akapity z wiodacym naglowkiem w gradiencie marki.
   Zajmuje okolo jednej trzeciej mniej miejsca przy tej samej tresci.

   Justowanie DZIALA tylko z dzieleniem wyrazow. Bez hyphens polskie slowa
   sa za dlugie na waska kolumne i tekst rozjezdza sie w biale "rzeki". */
.lp-seo-sekcja__tekst {
  display: grid;
  gap: .25rem;
}

.lp-seo-sekcja__akapit {
  margin: 0;
  font-size: .875rem;
  line-height: 1.75;
  color: var(--lp-muted);
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: pretty;
}

/* Naglowek pytania jako realny H3, nie jako wytluszczony poczatek akapitu.
   Wyglada prawie tak samo jak wersja w linii, bo odstep nad nim niesie caly
   rytm sekcji, a sam naglowek stoi ciasno nad swoja odpowiedzia. Dzieki temu
   struktura przybywa, a wysokosc kolumny prawie nie rosnie. */
.lp-seo-sekcja__wiodacy {
  margin: .875rem 0 .125rem;
  font-family: var(--lp-font-head, inherit);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
  background: var(--lp-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Pierwszy naglowek nie potrzebuje odstepu - nad nim jest juz lista miast. */
.lp-seo-sekcja__tekst > .lp-seo-sekcja__wiodacy:first-child { margin-top: 0; }

/* Lewa kolumna rownana DOLEM do listy pytan.
   Obie kolumny maja rozna wysokosc (tekst kontra osiem pytan), wiec rownanie
   gora zostawialo dziure pod tekstem. Rownanie dolem chowa te roznice na
   gorze, gdzie i tak jest oddech po naglowku sekcji. */
@media (min-width: 900px) {
  .lp-faq__layout { align-items: stretch; }
  .lp-faq__side { align-self: end; }
}

/* --- Stopka: wieksza tresc, nizej, na wysokosci astronauty ------------
   Poprzednie rozmiary byly dobrane, gdy stopka miala 460 px i tresc walczyla
   o miejsce. Teraz scena ma ponad 800 px, wiec drobny tekst przy duzej
   ilustracji wyglada jak przypis. Skala idzie w gore, a caly blok schodzi
   do poziomu, na ktorym stoi astronauta. */
@media (min-width: 900px) {
  .lp-footer-scene__cta-wrap { padding-top: 15rem; }

  .lp-fgrid { gap: 3rem; }

  .lp-fgrid .lp-fgrid__logo { height: 58px; margin-bottom: 1.125rem; }

  .lp-fgrid__slogan { font-size: .9375rem; max-width: 30ch; }

  .lp-fgrid__title { font-size: .75rem; margin-bottom: .875rem; }

  .lp-fgrid__tel { font-size: 1.5rem; margin-bottom: .625rem; }

  .lp-fgrid__link { font-size: .9375rem; line-height: 1.9; }

  .lp-fgrid__adres,
  .lp-fgrid__dane { font-size: .9375rem; line-height: 1.7; }

  /* Mapa rosnie razem z reszta, zeby nie zostala jedynym drobnym elementem. */
  .lp-fgrid .lp-fdane__mapa-box { aspect-ratio: 5 / 4; }

  .lp-fgrid .lp-fdane__mapa { font-size: .8125rem; padding: .5rem .875rem; }
}

/* Na bardzo wysokich scenach (szeroki ekran) tresc schodzi jeszcze nizej,
   bo astronauta tez jest wtedy nizej. */
@media (min-width: 1600px) {
  .lp-footer-scene__cta-wrap { padding-top: 19rem; }
}

/* --- Stopka: koniec lamania w polowie slowa --------------------------
   Po powiekszeniu czcionek kolumny zrobily sie za ciasne: numer telefonu
   lamal sie na "+48 792 026 / 986", nazwa spolki na "Sp. z / o.o.", a link
   "Google Business Profile" na dwie linie. Kazde z nich wyglada jak usterka,
   a nie jak lamanie tekstu.

   Siatka dostaje wiecej szerokosci (astronauta stoi i tak w prawej jednej
   trzeciej), a elementy, ktore nie moga sie lamac, dostaja nowrap. */
@media (min-width: 900px) {
  /* 68% na zwyklym laptopie: astronauta stoi wtedy juz od okolo 72% szerokosci
     i przy 78% mapa wchodzila mu na skafander. Na szerokich ekranach jest
     go mniej w kadrze, wiec siatka moze urosnac (regula nizej). */
  .lp-fgrid { max-width: 68%; grid-template-columns: 1fr .9fr 1fr .95fr; }

  .lp-fgrid__tel { white-space: nowrap; }

  /* text-wrap: balance USUNIETY.
     Mial wyrownac dlugosc linii, ale w waskiej kolumnie zrobil odwrotnie:
     rozbijal "Google Business Profile" i "Wyznacz trase" na dwie linie,
     zeby je "zbalansowac". W kolumnie tej szerokosci lepiej dziala zwykle
     lamanie plus zakaz lamania tam, gdzie tekst musi zostac w jednej linii. */
  .lp-fgrid__lista a,
  .lp-fgrid .lp-fdane__mapa { white-space: nowrap; }

  .lp-fgrid__lista a { font-size: .875rem; }
}

@media (min-width: 1500px) {
  .lp-fgrid { max-width: 74%; }
}

/* Tresc stopki nieco wyzej: 15 rem schowalo ja za nisko na duzym ekranie,
   przez co dol sceny byl pusty, a tekst wchodzil w gory. */
@media (min-width: 900px) {
  .lp-footer-scene__cta-wrap { padding-top: 11rem; }
}

@media (min-width: 1600px) {
  .lp-footer-scene__cta-wrap { padding-top: 14rem; }
}

/* --- Plywajaca zachetka do audytu (desktop) ---------------------------
   Maly kafelek w prawym dolnym rogu. Celowo NIE jest przyciskiem w kolorze
   marki: gdyby byl, konkurowalby z glownym wezwaniem kazdej sekcji. Ma
   przypominac o darmowej rzeczy, a nie krzyczec. */
.lp-float {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 55;
  display: none;
  align-items: center;
  gap: .25rem;
  padding: .25rem .25rem .25rem .875rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(8, 10, 18, .88);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .35s ease, transform .35s ease;
}

@media (min-width: 900px) {
  .lp-float { display: flex; }
}

.lp-float.is-in { opacity: 1; transform: none; }

.lp-float__link {
  display: flex;
  align-items: center;
  gap: .625rem;
  text-decoration: none;
  color: var(--lp-text);
  padding: .5rem .5rem .5rem 0;
}

.lp-float__ikona { display: flex; color: var(--lp-primary); }

.lp-float__tekst {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  font-size: .8125rem;
  color: var(--lp-muted);
}

.lp-float__tekst b { color: #fff; font-size: .875rem; }

.lp-float__x {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  color: var(--lp-muted);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.lp-float__x:hover { background: rgba(255, 255, 255, .14); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .lp-float { transition: none; }
}

/* --- Plywajaca zachetka: wersja glosniejsza ---------------------------
   Poprzednia byla celowo cicha i przez to gubila sie w rogu. Teraz jest
   wieksza, ma obracajaca sie ramke w kolorach marki, plakietke "za darmo"
   i wjezdza z boku zamiast pojawiac sie w miejscu.

   Co pilnuje, zeby mimo to nie byla natretna:
     - rusza sie RAZ na wejsciu, potem tylko oddycha poswiata,
     - dalej znika przy sekcji audytu i po zamknieciu krzyzykiem,
     - zatrzymuje kazdy ruch na najechanie, zeby dalo sie ja spokojnie
       przeczytac i kliknac. */
@property --lp-float-spin {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.lp-float {
  right: 1.5rem;
  bottom: 1.5rem;
  gap: .5rem;
  padding: 3px;
  border: 0;
  border-radius: 20px;
  background:
    linear-gradient(#0a0d16, #0a0d16) padding-box,
    conic-gradient(from var(--lp-float-spin), #cc00a6, #7338ea, #4c1d9e, #a01580, #cc00a6) border-box;
  box-shadow: 0 18px 50px rgba(204, 0, 166, .32);
  transform: translateX(40px) scale(.96);
  animation: lp-float-spin 5s linear infinite, lp-float-oddech 3s ease-in-out infinite;
}

.lp-float.is-in {
  transform: none;
  transition: opacity .45s cubic-bezier(.22, 1, .36, 1), transform .45s cubic-bezier(.22, 1, .36, 1);
}

.lp-float:hover { animation-play-state: paused; }

@keyframes lp-float-spin {
  to { --lp-float-spin: 360deg; }
}

@keyframes lp-float-oddech {
  0%, 100% { box-shadow: 0 18px 50px rgba(204, 0, 166, .3); }
  50%      { box-shadow: 0 22px 64px rgba(115, 56, 234, .45); }
}

.lp-float__link {
  gap: .875rem;
  padding: .875rem 1rem .875rem 1.125rem;
  border-radius: 17px;
}

.lp-float__ikona {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lp-gradient);
  color: #fff;
}

.lp-float__plakietka {
  align-self: flex-start;
  margin-bottom: .25rem;
  padding: .0625rem .375rem;
  border-radius: 999px;
  background: var(--lp-gradient);
  font-size: .5625rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
}

.lp-float__tekst b { font-size: 1rem; line-height: 1.2; }

.lp-float__opis { font-size: .8125rem; color: var(--lp-muted); }

.lp-float__strzalka {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  transition: transform .25s ease, background .25s ease;
}

.lp-float__link:hover .lp-float__strzalka {
  transform: translateX(3px);
  background: rgba(255, 255, 255, .18);
}

.lp-float__x {
  align-self: flex-start;
  margin: .5rem .5rem 0 0;
  width: 24px;
  height: 24px;
  font-size: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .lp-float { animation: none; }
}

/* Zdanie nad przyciskiem w realizacjach. Ten sam rytm co w sekcji
   "co w cenie": najpierw kontekst, potem wezwanie. */
.lp-works__cta-text {
  margin: 0 auto .875rem;
  max-width: 52ch;
  text-align: center;
  font-size: .9375rem;
  color: var(--lp-muted);
}

/* Cena w cenniku: "od" male i biale, kwota duza w kolorze marki. */
.lp-plan__price {
  display: flex;
  align-items: baseline;
  gap: .375rem;
}

.lp-plan__price-od {
  font-family: var(--lp-font-display, inherit);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: none;
}

.lp-plan__price-kwota { display: inline-block; }

/* Plakietka wybranego pakietu nad polami formularza koncowego. */
.lp-last__pakiet {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 1.125rem;
  padding: .625rem .875rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: .75rem;
  background: rgba(255, 255, 255, .05);
  font-size: .9375rem;
  line-height: 1.3;
}

.lp-last__pakiet[hidden] { display: none; }

.lp-last__pakiet-etykieta { color: var(--lp-muted); }

.lp-last__pakiet-nazwa {
  color: #fff;
  font-weight: 700;
}

.lp-last__pakiet-zmien {
  margin-left: auto;
  color: var(--lp-muted);
  font-size: .875rem;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.lp-last__pakiet-zmien:hover,
.lp-last__pakiet-zmien:focus-visible { color: #fff; }

/* Rakieta pod realizacjami zamiast przycisku: znak kierunku, nie wezwanie.
   Wiekszy obszar klikalny niz sama ikona, bo cel na telefonie ma miec
   przynajmniej 44 px. */
.lp-works__rakieta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 56px;
  min-height: 56px;
  margin-top: .25rem;
  color: inherit;
  text-decoration: none;
}

.lp-works__rakieta:hover .lp-rakieta__ksztalt { color: #fff; }


/* Rakieta domykajaca sekcje opinii: oddech nad nia i pod nia, zeby nie
   przykleila sie do ostatniej karty. */
.lp-reviews__dalej {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

/* Lista tego, co klient dostanie w strategii. Stoi nad polami, bo to ona
   jest powodem, dla ktorego ktos zostawia adres. */
.lp-audit__strategia {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .5rem;
}

.lp-audit__strategia li {
  position: relative;
  padding-left: 1.625rem;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--lp-muted);
}

.lp-audit__strategia li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: .625rem;
  height: .625rem;
  border-radius: 50%;
  background: var(--lp-gradient);
}

/* Sekcja koncowa: telefon jako drugie, mniejsze wyjscie. Ma byc widoczny,
   ale nie ma konkurowac z przyciskiem nad soba. */
.lp-last__telefon {
  margin: 1rem 0 0;
  text-align: center;
  font-size: .9375rem;
  color: var(--lp-muted);
}

.lp-last__telefon a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .2em;
  white-space: nowrap;
}

.lp-last__telefon[hidden] { display: none; }

/* Lista tego, co klient dostanie w strategii, stoi NAD polami - to ona jest
   powodem, dla ktorego ktos zostawia adres. */
.lp-last__zawiera--strategia { margin-bottom: 1.25rem; }

/* Ekran po wyslaniu, w miejscu formularza. */
.lp-last__done {
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .04);
  text-align: center;
}

.lp-last__done[hidden] { display: none; }

.lp-last__done-title {
  margin: 0 0 .5rem;
  font-family: var(--lp-font-head);
  font-size: 1.25rem;
  color: #fff;
}

.lp-last__done-text {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--lp-muted);
}

/* --- Sekcja koncowa: dwie kolumny --------------------------------------
   Lewa niesie argument, prawa pyta. Na telefonie jedna kolumna, argument
   nad formularzem - odwrotna kolejnosc kazalaby wypelniac pola, zanim
   czlowiek dowie sie, po co. */
.lp-last__grid {
  display: grid;
  gap: 2.5rem;
  align-items: start;
  max-width: 1120px;
  margin-inline: auto;
  text-align: left;
}

@media (min-width: 900px) {
  .lp-last__grid {
    grid-template-columns: 1fr 460px;
    gap: 4rem;
  }
}

.lp-last__grid .lp-last__headline,
.lp-last__grid .lp-last__lead { text-align: left; }

.lp-last__grid .lp-last__lead { margin-inline: 0; }

.lp-last__copy { display: grid; gap: 1.25rem; justify-items: start; }

/* Karta formularza. Obwodka i tlo oddzielaja ja od argumentu obok. */
.lp-last__panel {
  padding: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 1.25rem;
  background: rgba(10, 8, 20, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Wskaznik kroku. Mowi, ile jeszcze zostalo - bez niego dwa etapy wygladaja
   jak niespodzianka po kliknieciu. */
.lp-last__krok {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin: 0 0 1.25rem;
  font-size: .875rem;
  color: var(--lp-muted);
}

.lp-last__krok span {
  padding: .25rem .625rem;
  border-radius: 999px;
  background: var(--lp-gradient);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.lp-last__mikro {
  margin: .75rem 0 0;
  text-align: center;
  font-size: .8125rem;
  color: var(--lp-muted);
}

.lp-last__panel .lp-last__field + .lp-last__field { margin-top: 1rem; }
.lp-last__panel .lp-last__submit { margin-top: 1.25rem; width: 100%; }

/* --- Krok 2: okno z adresem ------------------------------------------- */
.lp-mail {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.lp-mail[hidden] { display: none; }

.lp-mail__tlo {
  position: absolute;
  inset: 0;
  background: rgba(0, 4, 8, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lp-mail__box {
  position: relative;
  width: min(440px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  padding: 2rem 1.75rem 1.75rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 1.25rem;
  background: #0b0812;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}

.lp-mail__x {
  position: absolute;
  top: .75rem;
  right: .75rem;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
}

.lp-mail__x:hover { background: rgba(255, 255, 255, .12); }

.lp-mail__tytul {
  margin: 0 0 1.25rem;
  font-family: var(--lp-font-head);
  font-size: 1.25rem;
  line-height: 1.3;
  color: #fff;
}

.lp-mail__tytul b {
  background: var(--lp-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.lp-mail__form .lp-last__field + .lp-last__field { margin-top: 1rem; }
.lp-mail__submit { margin-top: 1.25rem; width: 100%; }

.lp-mail__gwarancja {
  margin: .75rem 0 0;
  text-align: center;
  font-size: .8125rem;
  color: var(--lp-muted);
}

/* Tlo strony nie przewija sie pod otwartym oknem. */
body.lp-mail-otwarte { overflow: hidden; }

/* Branza i miasto w oknie kroku 2: plakietka, nie czesc zdania. */
.lp-mail__echo { margin: -.5rem 0 1.25rem; }

.lp-mail__echo span {
  display: inline-block;
  padding: .3125rem .75rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  font-size: .8125rem;
  color: #fff;
}

.lp-mail__echo span:empty { display: none; }

/* --- Probka strategii --------------------------------------------------
   Najwazniejszy element lewej kolumny. Lead magnet sprzedaje sie tym, co
   widac, a nie tym, co obiecane - wiec dokument musi byc pokazany, nie
   opisany. Wyglada jak fragment wydruku, celowo. */
.lp-probka {
  width: 100%;
  padding: 1.25rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .035);
}

.lp-probka__naglowek {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin: 0 0 1rem;
  font-size: .875rem;
  color: var(--lp-muted);
}

.lp-probka__plakietka {
  padding: .25rem .625rem;
  border-radius: 999px;
  background: var(--lp-gradient);
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.lp-probka__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .5rem;
}

.lp-probka__wiersz {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .25rem .75rem;
  align-items: baseline;
  padding: .625rem .75rem;
  border-radius: .625rem;
  background: rgba(0, 0, 0, .35);
}

@media (min-width: 560px) {
  .lp-probka__wiersz { grid-template-columns: 1fr auto 11rem; }
}

.lp-probka__fraza {
  font-size: .9375rem;
  color: #fff;
}

.lp-probka__liczba {
  font-family: var(--lp-font-head);
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.lp-probka__liczba i {
  font-style: normal;
  font-size: .75rem;
  font-weight: 400;
  color: var(--lp-muted);
}

.lp-probka__ocena {
  grid-column: 1 / -1;
  font-size: .8125rem;
  font-weight: 600;
}

@media (min-width: 560px) {
  .lp-probka__ocena { grid-column: auto; text-align: right; }
}

/* Zielony wiersz mowi "bierz", szary "odpusc". Wiersz odradzajacy jest tu
   wazniejszy od dwoch pierwszych: kazdy sprzedawca obiecuje sukces, a
   odradzanie czegos przy pierwszym kontakcie brzmi jak prawda. */
.lp-probka__wiersz--tak .lp-probka__ocena { color: #4ade80; }

.lp-probka__wiersz--nie { opacity: .62; }
.lp-probka__wiersz--nie .lp-probka__fraza { text-decoration: line-through; }
.lp-probka__wiersz--nie .lp-probka__ocena { color: var(--lp-muted); }

.lp-probka__stopka {
  margin: 1rem 0 0;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--lp-muted);
}

.lp-last__zrodlo {
  margin: 0;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--lp-muted);
}

.lp-last__zrodlo b { color: #fff; }

/* Naglowek pytajacy w sekcji koncowej: wielkie litery robimy stylem, nie
   w tresci - inaczej czytnik ekranu literuje go gloska po glosce. */
.lp-last__headline--krzyk {
  text-transform: uppercase;
  letter-spacing: -.01em;
}

/* Nadtytul prowadzacy do kolejnego bloku. Nie jest naglowkiem w hierarchii
   dokumentu, bo sekcja ma juz swoje H2 i nie chcemy sztucznych poziomow. */
.lp-last__nadtytul {
  margin: .5rem 0 0;
  font-family: var(--lp-font-head);
  font-size: 1.0625rem;
  font-weight: 700;
  color: #fff;
}

/* Cztery punkty strategii jako numerowany spis tresci dokumentu. */
.lp-punkty {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .75rem;
  counter-reset: lp-punkt;
  width: 100%;
}

.lp-punkty__item {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: .875rem;
  align-items: start;
  padding: .875rem 1rem;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: .875rem;
  background: rgba(255, 255, 255, .035);
}

.lp-punkty__nr {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--lp-gradient);
  color: #fff;
  font-family: var(--lp-font-head);
  font-size: .9375rem;
  font-weight: 700;
}

.lp-punkty__tresc { display: grid; gap: .1875rem; }

.lp-punkty__tytul {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.lp-punkty__opis {
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--lp-muted);
}

/* Formularz jedzie z trescia. Lewa kolumna jest dluga, wiec bez tego
   czlowiek czytajacy punkty czwarty raz nie ma juz pola widzenia na
   formularz i musi wracac na gore. Odstep od gory omija belke krokow. */
@media (min-width: 900px) {
  .lp-last__panel {
    position: sticky;
    top: 6.5rem;
  }
}

/* --- Karta oferty: darmowa strategia -----------------------------------
   Jeden kadr zamiast sekcji do czytania. Obwodka w gradiencie marki, bo
   ten sam zabieg niesie okno po audycie i czlowiek rozpoznaje, ze patrzy
   na oferte, a nie na kolejny akapit. */
.lp-oferta {
  position: relative;
  max-width: 680px;
  margin-inline: auto;
  padding: 2.25rem 1.75rem 2rem;
  border-radius: 1.5rem;
  background: linear-gradient(180deg, rgba(20, 10, 32, .96), rgba(8, 6, 16, .96));
  text-align: center;
}

/* Obwodka jako warstwa, zeby gradient nie walczyl z tlem karty. */
.lp-oferta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--lp-gradient);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.lp-oferta__znak {
  display: inline-block;
  margin-bottom: 1.125rem;
  padding: .375rem .875rem;
  border-radius: 999px;
  background: var(--lp-gradient);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lp-oferta__tytul {
  margin: 0 0 .75rem;
  font-family: var(--lp-font-head);
  font-size: clamp(1.625rem, 4vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #fff;
}

.lp-oferta__lead {
  margin: 0 auto 1.75rem;
  max-width: 44ch;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--lp-muted);
}

/* Cztery linie, po jednej mysli. Bez opisow pod spodem, bo kazde dodatkowe
   zdanie odsuwa pola nizej. */
.lp-oferta__lista {
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .625rem;
  text-align: left;
}

@media (min-width: 620px) {
  .lp-oferta__lista { grid-template-columns: 1fr 1fr; gap: .75rem 1.25rem; }
}

.lp-oferta__poz {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: .625rem;
  align-items: start;
  font-size: .9375rem;
  line-height: 1.45;
  color: #fff;
}

.lp-oferta__poz svg { margin-top: .125rem; color: #4ade80; }

.lp-oferta__pola { display: grid; gap: 1rem; text-align: left; }

@media (min-width: 620px) {
  .lp-oferta__pola { grid-template-columns: 1fr 1fr; }
}

.lp-oferta__submit {
  margin-top: 1.25rem;
  width: 100%;
  font-size: 1rem;
}

.lp-oferta__mikro {
  margin: .75rem 0 0;
  font-size: .8125rem;
  color: var(--lp-muted);
}

.lp-oferta__safe {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .875rem;
  line-height: 1.55;
  color: var(--lp-muted);
}

.lp-oferta__dowod {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: 1rem 0 0;
  font-size: .875rem;
  color: var(--lp-muted);
}

.lp-last__panel--reszta { padding: 0; border: 0; background: none; position: static; }

/* Kontener sekcji koncowej byl zwezony do 460 px pod dawny waski formularz.
   Karta oferty potrzebuje szerokosci, zeby dwie kolumny pol i dwie kolumny
   listy miescily sie bez lamania. */
body.lp-body .lp-last__inner { max-width: 720px; }

/* --- Ekran po wyslaniu strategii --------------------------------------
   Podmienia tresc karty, zamiast doklejac sie pod nia. Czlowiek, ktory
   wlasnie przyjal oferte, nie powinien czytac jej drugi raz. */
.lp-gotowe { text-align: center; }

.lp-gotowe__ptaszek {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: rgba(74, 222, 128, .12);
  border: 1px solid rgba(74, 222, 128, .35);
  color: #4ade80;
  animation: lp-gotowe-wejscie .45s cubic-bezier(.2, .9, .3, 1.4) both;
}

@keyframes lp-gotowe-wejscie {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.lp-gotowe__tytul {
  margin: 0 0 .625rem;
  font-family: var(--lp-font-head);
  font-size: clamp(1.5rem, 3.2vw, 1.875rem);
  line-height: 1.2;
  color: #fff;
}

.lp-gotowe__tekst {
  margin: 0 auto;
  max-width: 44ch;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--lp-muted);
}

/* Adres wyswietlamy z powrotem czlowiekowi - to jedyny sposob, zeby zlapal
   literowke od razu, a nie po kwadransie czekania na maila. */
.lp-gotowe__adres {
  display: inline-block;
  margin: .875rem 0 0;
  padding: .5rem 1rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: .75rem;
  background: rgba(255, 255, 255, .05);
  font-weight: 700;
  color: #fff;
  word-break: break-all;
}

.lp-gotewe__adres[hidden],
.lp-gotowe__adres[hidden] { display: none; }

.lp-gotowe__kroki {
  margin: 1.75rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  text-align: left;
}

.lp-gotowe__kroki[hidden] { display: none; }

.lp-gotowe__kroki-tytul {
  margin: 0 0 .875rem;
  font-family: var(--lp-font-head);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lp-muted);
}

.lp-gotowe__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: lp-gotowe;
  display: grid;
  gap: .75rem;
}

.lp-gotowe__lista li {
  counter-increment: lp-gotowe;
  display: grid;
  grid-template-columns: 1.625rem 1fr;
  gap: .75rem;
  font-size: .9375rem;
  line-height: 1.5;
  color: #fff;
}

.lp-gotowe__lista li::before {
  content: counter(lp-gotowe);
  display: grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  background: var(--lp-gradient);
  font-size: .8125rem;
  font-weight: 700;
}

.lp-gotowe__cta { margin-top: 1.75rem; }

/* Po wyslaniu karta jest krotsza, wiec oddech wewnetrzny moze byc mniejszy. */
.lp-oferta.is-gotowe { padding-block: 2rem; }

/* =======================================================================
   TELEFONY I TABLETY: hero, logo, belka krokow, licznik
   =======================================================================
   Na malym ekranie logo stalo w lewym gornym rogu i nachodzilo na pierwszy
   wiersz naglowka, a licznik na prawy. Naglowek zaczynal sie od razu pod
   krawedzia, wiec nie mial czym oddychac.

   Uklad docelowy: logo na srodku u gory, tresc hero nizej, a po zejsciu
   z hero logo znika i gorna belka nalezy juz tylko do menu krokow. Licznik
   schodzi pod belke, zeby nie walczyl z nia o ten sam pas. */
@media (max-width: 1024px) {

  /* Logo na srodku, wlasny pas u gory. */
  body.lp-body .lp-brand {
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    padding-block: 2.5rem .5rem;
    transition: opacity .25s ease, transform .25s ease;
  }

  /* Po zejsciu z hero logo ustepuje miejsca menu krokow. Dwie rzeczy w tym
     samym pasie na telefonie to jedna za duzo. */
  body.lp-body.is-scrolled .lp-brand {
    opacity: 0;
    transform: translateY(-12px);
    visibility: hidden;
  }

  /* Tresc hero schodzi pod logo. */
  .lp-hero__inner {
    padding-top: 8.5rem;
    min-height: calc(88vh - 56px);
    justify-content: flex-start;
  }

  /* Naglowek glowny wiekszy - to on ma byc pierwsza rzecza na ekranie. */
  .lp-hero__h1 {
    font-size: clamp(2.5rem, 10.5vw, 3.5rem);
    line-height: 1.02;
    margin-bottom: 1.25rem;
  }

  /* Belka krokow: nazwy etapow zamiast samych cyfr, przewijana poziomo.
     Numer bez nazwy nie mowi nic, a tekst mowi, gdzie sie jest. */
  .lp-steps {
    justify-content: flex-start;
    gap: .375rem;
    padding-inline: .75rem;
    overflow-x: auto;
    scrollbar-width: none;
    /* pan-y musi zostac, inaczej pionowy scroll na telefonie umiera
       w miejscu, w ktorym palec trafi w belke. */
    touch-action: pan-x pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
  }

  .lp-steps::-webkit-scrollbar { display: none; }

  .lp-steps__item { flex: 0 0 auto; }

  .lp-steps__label {
    display: inline;
    font-size: .8125rem;
    white-space: nowrap;
  }

  /* Licznik W BELCE, nie pod nia.
     Wiszac pod belka nachodzil na naglowki sekcji przy kazdym przewinieciu -
     "4 rzeczy, ktorych nie robi..." bylo ucinane w polowie. W belce ma wlasne
     miejsce, a kroki dostaja z prawej strony odstep, zeby nie wjezdzaly pod
     niego przy przewijaniu w poziomie. */
  .lp-timer {
    top: .6875rem;
    right: .625rem;
  }

  .lp-steps { padding-right: 5.25rem; }
}

@media (max-width: 720px) {
  body.lp-body .lp-brand .lp-brand__img { height: 40px; }
  .lp-hero__inner { padding-top: 8rem; }
}

/* Na tablecie ekran jest wysoki, wiec wyrownanie tresci do gory zostawialo
   pod rakieta kilkaset pikseli pustki. Tam tresc wraca na srodek, a odstep
   pod logo daje samo dopelnienie. */
@media (min-width: 700px) and (max-width: 1024px) {
  .lp-hero__inner {
    justify-content: center;
    min-height: calc(80vh - 56px);
    padding-top: 6rem;
  }
}

/* Tytuly czterech kart na telefonie: wyroznienie zaczyna wlasny wiersz.
   Bez tego lamanie wypadalo tam, gdzie akurat konczyla sie szerokosc karty
   ("Pozycjonowanie w cenie / strony", "Strona rosnie sama" z plakietka na
   tym samym poziomie), wiec fraza w gradiencie rozpadala sie na dwa wiersze
   i przestawala czytac sie jako calosc. */
@media (max-width: 720px) {
  .lp-glass__ta {
    display: block;
    text-wrap: balance;
  }

  .lp-glass__title { text-wrap: balance; }

  /* Plakietka przestaje nachodzic na tytul.
     PIERWSZA PROBA (cofnieta): position: static. Karta jest ukladem
     wierszowym, wiec plakietka wskoczyla w niego jako kolumna i scisnela
     tresc do okolo czternastu znakow w wierszu.
     TERAZ: zostaje wyjeta z ukladu, ale przenosi sie nad tytul, po lewej,
     a tresc dostaje na nia miejsce gornym odstepem. */
  .lp-glass__badge {
    top: 1rem;
    left: 1.25rem;
    right: auto;
  }

  .lp-glass--star .lp-glass__body { padding-top: 2.25rem; }
}

/* =======================================================================
   TELEFON: tabela "co w cenie" jako realne porownanie, nie stos kart
   =======================================================================
   PRZED: kazdy wiersz rozpadal sie na trzy pietra jedno pod drugim, wiec
   czlowiek widzial najpierw czego NIE dostanie u innych, potem, po zjechaniu
   nizej, co dostanie u nas. Porownanie, ktorego nie widac naraz, przestaje
   byc porownaniem.

   TERAZ: kryterium na calej szerokosci, a pod nim dwie kolumny obok siebie.
   Kolumna Klikona ma wlasne tlo i obwodke, zeby przewaga czytala sie od razu,
   bez czytania napisow. */
@media (max-width: 700px) {

  .lp-vs__row {
    grid-template-columns: 1fr 1fr;
    gap: .625rem .5rem;
    align-items: stretch;
    padding: 1rem;
  }

  .lp-vs__cell--cat { grid-column: 1 / -1; }

  .lp-vs__cat-name { font-size: 1rem; }
  .lp-vs__cat-desc { font-size: .8125rem; max-width: none; }

  .lp-vs__row .lp-vs__cell[data-kol] {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    padding: .625rem;
    border-radius: .75rem;
    background: rgba(255, 255, 255, .035);
  }

  /* Kolumna Klikona wyrozniona tlem i obwodka - roznica ma byc widoczna,
     zanim ktokolwiek przeczyta tresc plakietek. */
  .lp-vs__row .lp-vs__cell--us {
    background: rgba(204, 0, 166, .1);
    border: 1px solid rgba(204, 0, 166, .3);
  }

  .lp-vs__cell[data-kol]::before {
    content: attr(data-kol);
    display: block;
    margin: 0;
    font-size: .625rem;
    letter-spacing: .08em;
  }

  /* Plakietki w dwoch waskich kolumnach musza sie zawijac, inaczej rozpychaja
     siatke i "Osobna umowa i abonament" wypycha kolumne obok z ekranu. */
  .lp-vs__tag {
    display: flex;
    align-items: flex-start;
    gap: .375rem;
    padding: .375rem .5rem;
    font-size: .75rem;
    line-height: 1.3;
    text-align: left;
    white-space: normal;
    word-break: break-word;
  }

  /* Naglowek tabeli wraca, ale tylko jako dwie etykiety nad siatka - pelny
     trzykolumnowy naglowek nie miesci sie na 390 px. */
  .lp-vs__thead { display: none; }
}

/* =======================================================================
   TELEFON: "co w cenie" jako zestawienie dwoch linii
   =======================================================================
   TRZY PROBY, DWIE ODRZUCONE:
     1. wiersz rozbity na trzy pietra z naglowkami kolumn - obie strony
        porownania byly od siebie za daleko, zeby zestawic je wzrokiem
     2. dwie kolumny obok siebie - przy 154 px na kolumne plakietki lamaly
        sie po dwa slowa i calosc czytala sie jak tabela z kalkulatora
     3. sama lista zakresu bez konkurencji - czytelna, ale traci caly
        argument sekcji, bo nie ma z czym porownac

   TERAZ: kryterium, a pod nim DWIE LINIE jedna nad druga. Brak u innych jest
   przekreslony i wygaszony, nasz zakres stoi pod nim w bieli. Roznica czyta
   sie z gory na dol, czyli tak, jak czyta sie telefon, i nie potrzebuje ani
   jednego piksela szerokosci wiecej. */
@media (max-width: 700px) {

  .lp-vs__row {
    grid-template-columns: 1fr;
    gap: .5rem;
    padding: 1.125rem 1.25rem;
  }

  .lp-vs__cell--cat { margin-bottom: .125rem; }
  .lp-vs__cat-name { font-size: 1.0625rem; line-height: 1.3; }
  .lp-vs__cat-desc { font-size: .8125rem; max-width: none; }

  /* Obie linie maja ten sam uklad: etykieta, znak, tresc. */
  .lp-vs__row .lp-vs__cell[data-kol] {
    display: grid;
    grid-template-columns: 3.25rem 1fr;
    gap: .5rem;
    align-items: baseline;
    padding: 0;
    background: none;
    border: 0;
  }

  /* Etykiety krotkie: "Inni" i "My". Pelne nazwy kolumn zjadaly polowe
     szerokosci wiersza, a i tak powtarzaly to, co widac po kolorze. */
  .lp-vs__cell[data-kol]::before {
    content: "Inni";
    display: block;
    margin: 0;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lp-muted);
    opacity: .75;
  }

  .lp-vs__cell--us[data-kol]::before {
    content: "My";
    background: var(--lp-gradient);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    opacity: 1;
  }

  /* Linia konkurencji: przekreslona i wygaszona. Przekreslenie robi robote
     szybciej niz slowo "nie" - widac je, zanim sie je przeczyta. */
  .lp-vs__row .lp-vs__cell:not(.lp-vs__cell--us) .lp-vs__tag {
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    font-size: .875rem;
    line-height: 1.35;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
    color: var(--lp-muted);
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, .35);
  }

  /* Nasza linia: plakietka w gradiencie marki, tak jak na desktopie.
     PIERWSZA WERSJA (cofnieta): sam bialy tekst. Czytalo sie, ale traciло
     to, co na desktopie niesie cala roznice - nasza kolumna jest kolorowa,
     ich szara. Kolor robi tu wiecej niz tresc napisu. */
  .lp-vs__row .lp-vs__cell--us .lp-vs__tag {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .4375rem .75rem;
    border-radius: 999px;
    background: var(--lp-gradient);
    border: 0;
    box-shadow: 0 4px 16px rgba(204, 0, 166, .28);
    font-size: .8125rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .04em;
    text-align: left;
    text-transform: uppercase;
    white-space: normal;
    color: #fff;
  }

  /* Znaczek zdejmujemy TYLKO z linii konkurencji - tam informacje niesie
     przekreslenie. W plakietce Klikona ptaszek zostaje, bo to on odroznia
     ja od zwyklej etykiety. */
  .lp-vs__row .lp-vs__cell:not(.lp-vs__cell--us) .lp-vs__tag .lp-vs__x,
  .lp-vs__row .lp-vs__cell:not(.lp-vs__cell--us) .lp-vs__tag svg { display: none; }
}

/* Prawa krawedz belki gasnie pod licznikiem. Bez tego krok przewiniety pod
   plakietke licznika wyglada na ucietego w polowie slowa. */
@media (max-width: 1024px) {
  .lp-steps {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 5.75rem), transparent calc(100% - 4rem));
            mask-image: linear-gradient(to right, #000 calc(100% - 5.75rem), transparent calc(100% - 4rem));
  }
}

/* --- Znikajace slowo w naglowkach z gradientem -------------------------
   Fraza wyrozniona ma `background-clip: text` i przezroczysty kolor tekstu.
   Gdy taki element jest `inline` i lamie sie na granicy wiersza, przegladarka
   rysuje gradient osobno dla kazdego fragmentu, a fragment o zerowej
   szerokosci nie dostaje zadnego piksela - slowo po prostu znika.
   Na waskim ekranie lamanie wypada inaczej niz na desktopie, wiec blad
   widac tylko na telefonie.

   `inline-block` trzyma fraze w jednym kawalku i gradient ma co malowac.
   Dolny odstep chroni ogonki liter przed przycieciem przy obcinaniu tla. */
.lp-vs__accent,
.lp-faq__accent,
.lp-pricing__accent,
.lp-grad,
.lp-works__accent {
  display: inline-block;
  padding-bottom: .04em;
}

/* =======================================================================
   TELEFON: rakieta pod realizacjami i sekcja opinii
   ======================================================================= */
@media (max-width: 700px) {

  /* Rakieta stala tuz pod zdaniem i wygladala, jakby z niego wyrastala.
     Wiekszy odstep u gory odsuwa ja od tekstu i stawia na srodku pustego
     pola, gdzie widac, ze jest znakiem kierunku, a nie ozdobnikiem zdania. */
  .lp-works__rakieta {
    margin-top: 1.75rem;
    margin-bottom: .5rem;
  }

  .lp-works__cta-text { margin-bottom: 0; }

  /* --- OPINIE ---------------------------------------------------------
     PRZED: talia trzech kart z obrotem w przestrzeni. Na 390 px sasiednie
     karty wychodzily na 46 procent szerokosci w kazda strone, czyli
     zaslanialy aktywna, a strzalki lezaly na tresci. Do tego panel z cytatem
     zakrywal prawie cale zdjecie metamorfozy.

     TERAZ: jedna karta na pelna szerokosc, strzalki pod nia. Efekt talii
     zostaje na desktopie, gdzie jest na niego miejsce. */
  .lp-reviews__scena { padding-bottom: 4.5rem; }

  .lp-reviews__stack { max-width: none; perspective: none; }

  .lp-reviews__card { aspect-ratio: 3 / 4; }

  /* Sasiednie karty schowane. Zostaja w DOM, bo skrypt liczy na ich obecnosc,
     ale nie zabieraja miejsca ani nie lapia dotyku. */
  .lp-reviews__card.is-prev,
  .lp-reviews__card.is-next {
    opacity: 0;
    transform: scale(.9);
    pointer-events: none;
    filter: none;
  }

  /* Strzalki schodza pod karte i staja obok siebie na srodku. */
  .lp-reviews__arrow {
    top: auto;
    bottom: 0;
    transform: none;
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
  }

  .lp-reviews__arrow--prev { left: calc(50% - 3.75rem); right: auto; }
  .lp-reviews__arrow--next { right: calc(50% - 3.75rem); left: auto; }

  .lp-reviews__arrow:hover,
  .lp-reviews__arrow--prev:hover,
  .lp-reviews__arrow--next:hover { transform: none; }

  /* Panel z cytatem zabiera mniej zdjecia: krotszy gradient i mniejszy
     odstep u gory, zeby metamorfoza byla widoczna. */
  .lp-reviews__body {
    padding: 3.25rem 1.125rem 1.125rem;
    gap: .5rem;
    background: linear-gradient(180deg,
      rgba(5, 6, 10, 0) 0%,
      rgba(5, 6, 10, .82) 26%,
      rgba(5, 6, 10, .96) 52%,
      #05060a 100%);
  }
}

/* Karta w trakcie automatycznego przejazdu. Podpowiedz o przewijaniu znika,
   bo zrzut wlasnie jedzie i nie trzeba nic robic. */
.lp-ba.is-auto .lp-scan-hint,
.lp-reviews__solo.is-auto .lp-scan-hint { opacity: 0; }

/* Dotyk w poziomie obsluguje suwak, w pionie zostaje przewijanie strony.
   `pan-y` jest tu konieczne: samo `none` albo `pan-x` zabilyby scroll
   w miejscu, w ktorym palec trafi w karte. */
.lp-ba { touch-action: pan-y; }

/* Uchwyt porownania wyzej na telefonie.
   Stoi w polowie WYSOKOSCI KARTY, ale dolne 40 procent karty zakrywa panel
   z cytatem, wiec wizualnie wypadal tuz nad tekstem, prawie poza zdjeciem.
   Na 30 procentach ladnie siedzi w srodku widocznej czesci zrzutu i jest
   w zasiegu kciuka, a nie przy samej krawedzi panelu. */
@media (max-width: 700px) {
  .lp-ba__handle i { top: 30%; }
}

/* "Za darmo" w karcie strategii: bialy tekst z gradientowym podkresleniem.
   Reszta naglowka jest w gradiencie, wiec kolorem juz nie da sie tu niczego
   wyroznic - bialy na tym tle jest mocniejszy niz kolejny odcien rozu. */
.lp-oferta__darmo {
  display: inline-block;
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: none;
}

/* Kupon rabatowy w oknie strategii. Okno jest wezsze od modala audytu,
   wiec kupon i tekst dostaja mniejsza skale, a odstepy zostaja te same. */
.lp-mail__exit { text-align: center; }
.lp-mail__exit[hidden] { display: none; }
.lp-mail__exit .lp-kupon { margin-inline: auto; }
.lp-mail__exit .lp-exit__title { font-size: 1.25rem; }

/* Pole opcjonalne: etykieta mowi to wprost, a podpowiedz pod polem tlumaczy,
   co sie stanie, gdy ktos je zostawi puste. Bez tego zdania "opcjonalnie"
   przy telefonie czyta sie jak pulapka. */
.lp-form__opcjonalnie {
  margin-left: .375rem;
  padding: .125rem .4375rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lp-muted);
  vertical-align: middle;
}

.lp-form__podpowiedz {
  margin: .375rem 0 0;
  font-size: .75rem;
  line-height: 1.45;
  color: var(--lp-muted);
}

/* =======================================================================
   EKRAN PO WYSLANIU AUDYTU: prosba o numer telefonu
   =======================================================================
   Numer zbierany PO dostarczeniu raportu, nie obok adresu. Pytanie zadane
   po dostarczeniu wartosci konwertuje lepiej, a przy okazji nie obciaza
   konwersji glownej: kto nie zostawi numeru, i tak zostawil adres. */
.lp-audit__done {
  max-width: 560px;
  margin-inline: auto;
  padding: 2rem 1.75rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 1.25rem;
  background: rgba(10, 8, 20, .7);
  text-align: center;
}

.lp-audit__done-ptaszek {
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  border: 1px solid rgba(74, 222, 128, .35);
  background: rgba(74, 222, 128, .12);
  color: #4ade80;
}

.lp-audit__done-tytul {
  margin: 0 0 .5rem;
  font-family: var(--lp-font-head);
  font-size: 1.375rem;
  line-height: 1.25;
  color: #fff;
}

.lp-audit__done-adres {
  display: inline-block;
  margin: 0;
  padding: .4375rem .875rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: .75rem;
  background: rgba(255, 255, 255, .05);
  font-weight: 700;
  color: #fff;
  word-break: break-all;
}

.lp-audit__done-linia {
  height: 1px;
  margin: 1.5rem 0;
  background: rgba(255, 255, 255, .1);
}

/* Zdanie alarmowe. Tresc wstawia skrypt i jest WARUNKOWA - przy dobrym
   wyniku nie mowimy o klientach uciekajacych do konkurencji. */
.lp-audit__done-alarm {
  margin: 0 0 1.25rem;
  font-size: 1rem;
  line-height: 1.55;
  color: #fff;
  text-align: left;
}

/* Kto dzwoni. Imie i twarz dzialaja inaczej niz "ekspert" - ekspert to
   firma, Lukasz to czlowiek. */
.lp-audit__done-osoba {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  margin-bottom: 1.5rem;
  padding: .875rem 1rem;
  border-radius: .875rem;
  background: rgba(255, 255, 255, .04);
  text-align: left;
}

.lp-audit__done-foto {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(204, 0, 166, .5);
}

.lp-audit__done-slowa {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--lp-muted);
}

.lp-audit__done-slowa b { color: #fff; }

.lp-audit__tel-pytanie {
  margin: 0 0 .75rem;
  font-size: .875rem;
  color: var(--lp-muted);
  text-align: left;
}

/* Wybor pory. To jest najwazniejszy element tego ekranu: klikniecie
   "dzis po 16" to decyzja o tym, KIEDY zadzwoni telefon, a nie oddanie
   numeru w nieznane. */
.lp-audit__terminy {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.125rem;
}

.lp-audit__termin {
  flex: 1 1 auto;
  padding: .625rem .875rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: .75rem;
  background: rgba(255, 255, 255, .04);
  color: var(--lp-muted);
  font-family: inherit;
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.lp-audit__termin:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }

.lp-audit__termin.is-wybrany {
  border-color: rgba(204, 0, 166, .6);
  background: rgba(204, 0, 166, .16);
  color: #fff;
}

.lp-audit__tel-form { text-align: left; }
.lp-audit__tel-form .lp-audit__submit { width: 100%; margin-top: 1rem; }
.lp-audit__tel-form[hidden] { display: none; }

.lp-audit__tel-safe {
  margin: .875rem 0 0;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--lp-muted);
  text-align: center;
}

/* Wyjscie musi byc widoczne. Prosba bez wyjscia zamienia sie w przymus,
   a czlowiek zamyka wtedy cale okno i tracimy obie rzeczy. */
.lp-audit__tel-skip {
  display: block;
  margin: 1rem auto 0;
  border: 0;
  background: none;
  color: var(--lp-muted);
  font-family: inherit;
  font-size: .8125rem;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}

.lp-audit__tel-skip:hover { color: #fff; }

.lp-audit__tel-ok[hidden] { display: none; }
.lp-audit__tel-ok .lp-audit__done-btn { margin-top: 1rem; }

@media (max-width: 560px) {
  .lp-audit__done { padding: 1.5rem 1.125rem; }
  .lp-audit__termin { flex: 1 1 100%; }
}

/* =======================================================================
   OKNO "GDZIE WYSLAC AUDYT": kolejnosc i podglad raportu
   =======================================================================
   BLAD, KTORY TU BYL: .lp-audit__next-inner jest ukladem kolumnowym, w ktorym
   KAZDE dziecko ma nadana kolejnosc (bar 1, tytul 2, tekst 3, formularz 7).
   Nowe elementy bez wlasnej kolejnosci dostaja domyslne 0, czyli laduja PRZED
   wszystkim innym - lista korzysci wyladowala nad plakietka i nagloowkiem.
   Kazdy element dokladany do tego okna musi dostac swoj numer. */
.lp-audit__next-inner > .lp-audit__podglad { order: 4; }
.lp-audit__next-inner > .lp-audit__co-w-srodku { order: 5; }

/* --- Podglad raportu ---------------------------------------------------
   Czlowiek widzi polprodukt, ktory juz na niego czeka: swoj wynik i rozmyte
   wiersze bledow. Rozmycie robi robote klodki - jest co odblokowac. */
.lp-audit__podglad {
  margin-bottom: 1.125rem;
  padding: 1.125rem 1.25rem 1rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
}

.lp-audit__podglad-gora {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
}

.lp-audit__podglad-etykieta {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lp-muted);
}

.lp-audit__podglad-wynik {
  font-family: var(--lp-font-head);
  line-height: 1;
  color: #fff;
}

.lp-audit__podglad-wynik b { font-size: 1.75rem; font-weight: 800; }
.lp-audit__podglad-wynik i { font-style: normal; font-size: .875rem; color: var(--lp-muted); }

.lp-audit__podglad-pasek {
  height: 7px;
  margin: .625rem 0 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
}

.lp-audit__podglad-pasek span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--lp-gradient);
  transition: width .9s cubic-bezier(.2, .8, .3, 1);
}

.lp-audit__podglad-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .5rem;
}

.lp-audit__podglad-lista li {
  display: flex;
  align-items: center;
  gap: .625rem;
}

.lp-audit__podglad-x {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(239, 68, 68, .16);
  color: #f87171;
  font-size: .625rem;
  line-height: 1;
}

/* Rozmyte paski zamiast tresci bledow. Nie udajemy konkretnych zdan -
   pokazujemy, ze cos tam jest, i tyle. Zmyslone naglowki bledow bylyby
   obietnica, ktorej raport moze nie spelnic. */
.lp-audit__podglad-plama {
  height: .6875rem;
  flex: 1 1 auto;
  max-width: 62%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .12));
  filter: blur(2.5px);
}

.lp-audit__podglad-plama--krotka { max-width: 44%; }
.lp-audit__podglad-plama--dluga { max-width: 74%; }

.lp-audit__podglad-stopka {
  margin: .875rem 0 0;
  font-size: .8125rem;
  color: var(--lp-muted);
}

.lp-audit__podglad-stopka b { color: #fff; }

/* Lista korzysci: ptaszki zamiast kropek, wyrownane do lewej. */
.lp-audit__co-w-srodku {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .5rem;
  text-align: left;
}

.lp-audit__co-w-srodku li {
  position: relative;
  padding-left: 1.625rem;
  font-size: .9375rem;
  line-height: 1.45;
  color: #fff;
}

.lp-audit__co-w-srodku li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .3em;
  width: .75rem;
  height: .4375rem;
  border-left: 2px solid #4ade80;
  border-bottom: 2px solid #4ade80;
  transform: rotate(-45deg);
}

/* Naglowek nad lista korzysci. Bez niego cztery punkty wygladaly jak luzna
   wyliczanka - z nim staja sie spisem tresci dokumentu, ktory czeka. */
.lp-audit__next-inner > .lp-audit__co-tytul { order: 5; }
.lp-audit__next-inner > .lp-audit__co-w-srodku { order: 6; }

.lp-audit__co-tytul {
  margin: 0 0 .75rem;
  font-family: var(--lp-font-head);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lp-muted);
  text-align: left;
}

/* Pierwsza czesc kazdego punktu na bialo - to ona niesie konkret, reszta
   jest dopowiedzeniem. Przy czterech punktach bez tego kontrastu oko nie
   ma sie o co zaczepic i calosc czyta sie jak akapit. */
.lp-audit__co-w-srodku li b {
  color: #fff;
  font-weight: 700;
}

.lp-audit__co-w-srodku li {
  color: var(--lp-muted);
}

/* --- Kalendarz terminow z CRM -----------------------------------------
   Dwa kroki: dzien, potem godzina. Po klikniecu konkretnej pory rezerwacja
   jest w glowie czlowieka juz zrobiona, a numer staje sie formalnoscia. */
.lp-audit__kalendarz[hidden],
.lp-audit__terminy[hidden],
.lp-audit__terminy-czekaj[hidden] { display: none; }

.lp-audit__godziny {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
  gap: .5rem;
  margin-top: .5rem;
  margin-bottom: 1.125rem;
}

.lp-audit__godzina {
  padding: .5625rem .5rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: .625rem;
  background: rgba(255, 255, 255, .04);
  color: var(--lp-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.lp-audit__godzina:hover { color: #fff; border-color: rgba(255, 255, 255, .32); }

.lp-audit__godzina.is-wybrany {
  border-color: rgba(204, 0, 166, .65);
  background: var(--lp-gradient);
  color: #fff;
}

.lp-audit__terminy-czekaj {
  margin: 0 0 1.125rem;
  font-size: .8125rem;
  color: var(--lp-muted);
}

/* =======================================================================
   OKNO AUDYTU NA NISKIM EKRANIE: mieści się bez paska przewijania
   =======================================================================
   Na laptopie z niskim ekranem okno dostawalo wlasny pasek przewijania
   i czlowiek musial scrollowac WEWNATRZ okna, zeby dojsc do pola e-mail.
   To jest najgorsze mozliwe miejsce na ukrycie formularza.

   Zamiast skracac tresc, zmniejszamy ja proporcjonalnie przy niskim
   ekranie. Odstepy schodza pierwsze, bo to one zjadaja najwiecej wysokosci
   przy najmniejszej stracie czytelnosci. */
@media (max-height: 1000px) {
  .lp-audit__next-inner { padding: 1.25rem 1.25rem; }
  .lp-audit__next-title { font-size: clamp(1.25rem, 2.6vw, 1.625rem); }
  .lp-audit__next-text { margin-bottom: .875rem; font-size: .9375rem; }
  .lp-audit__next-inner > .lp-audit__next-bar { margin-bottom: .625rem; }

  .lp-audit__podglad { margin-bottom: .875rem; padding: .875rem 1rem .75rem; }
  .lp-audit__podglad-wynik b { font-size: 1.5rem; }
  .lp-audit__podglad-pasek { margin: .5rem 0 .75rem; }
  .lp-audit__podglad-lista { gap: .375rem; }
  .lp-audit__podglad-stopka { margin-top: .625rem; }

  .lp-audit__co-tytul { margin-bottom: .5rem; }
  .lp-audit__co-w-srodku { gap: .375rem; margin-bottom: .875rem; }
  .lp-audit__co-w-srodku li { font-size: .875rem; line-height: 1.35; }

  .lp-audit__safe { margin-top: .75rem; padding: .75rem .875rem; font-size: .8125rem; }
  .lp-audit__legal-note { font-size: .6875rem; }
}

/* Bardzo niskie ekrany: 13-calowe laptopy i okna z otwartymi narzedziami
   deweloperskimi. Tu wypada juz jeden z czterech punktow korzysci - lepiej
   pokazac trzy i formularz niz cztery i pasek przewijania. */
@media (max-height: 760px) {
  .lp-audit__next-inner { padding: 1rem 1.125rem; }
  .lp-audit__next-title { font-size: 1.25rem; }
  .lp-audit__next-text { font-size: .875rem; margin-bottom: .75rem; }

  .lp-audit__podglad-lista li:nth-child(3) { display: none; }

  .lp-audit__co-w-srodku li { font-size: .8125rem; }
  .lp-audit__safe { font-size: .75rem; padding: .625rem .75rem; }

  .lp-audit__modal-box .lp-audit__submit,
  .lp-audit__next .lp-audit__submit { min-height: 46px; padding-block: .75rem; }
}

/* Ekran po wyslaniu tez musi sie miescic - ma wiecej elementow niz
   pierwszy, bo dochodzi wybor dnia i godziny. */
@media (max-height: 820px) {
  .lp-audit__done { padding: 1.25rem 1.125rem; }
  .lp-audit__done-ptaszek { width: 3rem; height: 3rem; margin-bottom: .75rem; }
  .lp-audit__done-tytul { font-size: 1.125rem; }
  .lp-audit__done-linia { margin: 1rem 0; }
  .lp-audit__done-alarm { font-size: .9375rem; margin-bottom: .875rem; }
  .lp-audit__done-osoba { margin-bottom: 1rem; padding: .75rem .875rem; }
  .lp-audit__done-foto { width: 2.75rem; height: 2.75rem; }
  .lp-audit__done-slowa { font-size: .875rem; }
  .lp-audit__godziny { margin-bottom: .875rem; }
  .lp-audit__tel-safe { font-size: .75rem; }
}

/* Domknięcie wysokości na 13-calowym laptopie (720 px i mniej).
   Po pierwszym podejściu zostawało 33 px nadmiaru, czyli dokładnie tyle,
   ile daje odstęp nad ramką i oddech wewnątrz okna modalnego. */
@media (max-height: 760px) {
  .lp-audit__modal .lp-audit__next { margin-top: 0; }
  .lp-audit__modal-box { padding: .5rem; }
  .lp-audit__next-inner { padding: .875rem 1rem; }
  .lp-audit__podglad { margin-bottom: .75rem; padding: .75rem .875rem .625rem; }
  .lp-audit__podglad-stopka { font-size: .75rem; }
  .lp-audit__co-tytul { font-size: .6875rem; margin-bottom: .375rem; }
  .lp-audit__co-w-srodku { margin-bottom: .75rem; }
  .lp-audit__safe { margin-top: .625rem; }
  .lp-audit__legal-note { margin-top: .375rem; }
}

/* --- Wybor terminu w stylu kalendarza rezerwacji -----------------------
   Poprzednia wersja to byly trzy plaskie pigulki z nazwa dnia. Nie mowily,
   o ktory konkretnie dzien chodzi ani ile jest wolnych godzin, wiec wybor
   wygladal jak formularz, a nie jak rezerwacja. Karta z numerem dnia
   i licznikiem wolnych godzin czyta sie jak kalendarz. */
.lp-audit__terminy[data-terminy-dni] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
  gap: .5rem;
}

.lp-audit__dzien {
  display: grid;
  justify-items: center;
  gap: .0625rem;
  padding: .625rem .5rem .5rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: .875rem;
  background: rgba(255, 255, 255, .04);
  color: var(--lp-muted);
  font-family: inherit;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .15s ease;
}

.lp-audit__dzien:hover {
  border-color: rgba(255, 255, 255, .3);
  transform: translateY(-1px);
}

.lp-audit__dzien-nazwa {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lp-audit__dzien-numer {
  font-family: var(--lp-font-head);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.05;
  color: #fff;
}

.lp-audit__dzien-mies {
  font-size: .625rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Licznik wolnych godzin. To on zamienia wybor w rezerwacje: czlowiek widzi,
   ze miejsc jest skonczona liczba, i to jest prawda, a nie sztuczna presja. */
.lp-audit__dzien-ile {
  margin-top: .1875rem;
  padding: .0625rem .375rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  font-size: .625rem;
  letter-spacing: .02em;
}

.lp-audit__dzien.is-wybrany {
  border-color: rgba(204, 0, 166, .65);
  background: rgba(204, 0, 166, .14);
  color: #fff;
}

.lp-audit__dzien.is-wybrany .lp-audit__dzien-ile {
  background: var(--lp-gradient);
  color: #fff;
}

/* Godziny: wieksze pola, bo to ostatni klik przed podaniem numeru. */
.lp-audit__godziny {
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
  gap: .4375rem;
}

.lp-audit__godzina {
  padding: .625rem .5rem;
  font-size: .9375rem;
}

@media (max-height: 820px) {
  .lp-audit__dzien { padding: .5rem .375rem .375rem; }
  .lp-audit__dzien-numer { font-size: 1.25rem; }
}

/* =======================================================================
   KTO ZADZWONI + BĘBEN GODZIN
   =======================================================================
   W systemach rezerwacji zdjecie i nazwisko stoja PRZED kalendarzem.
   Czlowiek najpierw wie, z kim rozmawia, potem wybiera kiedy - odwrotna
   kolejnosc kaze mu umawiac sie z nieznajomym. */
.lp-audit__host {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .25rem .875rem;
  align-items: center;
  margin-bottom: 1rem;
  padding: .875rem 1rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .04);
  text-align: left;
}

.lp-audit__host-foto {
  grid-row: 1 / 3;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(204, 0, 166, .55);
}

/* Zastepnik, gdy zdjecia jeszcze nie ma w panelu: inicjal w kolorze marki.
   Pusty kwadrat wyglada jak brak obrazka, a to podwaza wiarygodnosc
   dokladnie w miejscu, ktore ma ja budowac. */
.lp-audit__host-foto--brak {
  display: grid;
  place-items: center;
  background: var(--lp-gradient);
  color: #fff;
  font-family: var(--lp-font-head);
  font-size: 1.5rem;
  font-weight: 800;
  border: 0;
}

.lp-audit__host-kto { display: grid; }

.lp-audit__host-imie {
  font-family: var(--lp-font-head);
  font-size: 1.0625rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.lp-audit__host-rola {
  font-size: .8125rem;
  color: var(--lp-muted);
}

.lp-audit__host-meta {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: .375rem .75rem;
  margin-top: .1875rem;
}

.lp-audit__host-znacznik {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  font-size: .75rem;
  color: var(--lp-muted);
}

/* --- Bęben godzin ------------------------------------------------------
   Pozycje maja stala wysokosc i przyciaganie, wiec przewijanie zatrzymuje
   sie na calej godzinie, nigdy miedzy nimi. Wybrana jest ta w ramce na
   srodku - tak samo jak w natywnym wyborze czasu na telefonie.

   Stala wysokosc niezaleznie od liczby terminow: szesc slotow nie rozpycha
   juz okna na cztery wiersze. */
.lp-audit__beben {
  position: relative;
  margin-bottom: 1.125rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: .875rem;
  background: rgba(0, 0, 0, .28);
  overflow: hidden;
}

.lp-audit__beben-lista {
  position: relative;
  z-index: 2;
  height: 138px;
  padding-block: 46px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  /* pan-y zostaje, zeby pionowy scroll strony dzialal, gdy beben dojedzie
     do konca. overscroll-behavior CELOWO nie ustawiamy - juz raz zabilo
     nam scroll na calym telefonie. */
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  /* Gasniecie u gory i u dolu: widac, ze lista sie przewija. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 38%, #000 62%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 38%, #000 62%, transparent 100%);
}

.lp-audit__beben-lista::-webkit-scrollbar { display: none; }

.lp-audit__godzina {
  display: block;
  width: 100%;
  height: 46px;
  padding: 0;
  border: 0;
  background: none;
  scroll-snap-align: center;
  color: var(--lp-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 46px;
  text-align: center;
  cursor: pointer;
  transition: color .18s ease, transform .18s ease;
}

.lp-audit__godzina.is-wybrany {
  color: #fff;
  transform: scale(1.12);
}

/* Ramka wyboru na srodku bebna. */
.lp-audit__beben-ramka {
  position: absolute;
  left: .5rem;
  right: .5rem;
  top: 50%;
  height: 46px;
  transform: translateY(-50%);
  border-radius: .625rem;
  border: 1px solid rgba(204, 0, 166, .5);
  background: rgba(204, 0, 166, .12);
  pointer-events: none;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .lp-audit__godzina { transition: none; }
}

@media (max-height: 820px) {
  .lp-audit__beben-lista { height: 120px; padding-block: 37px; }
  .lp-audit__godzina { height: 46px; }
  .lp-audit__host { padding: .625rem .875rem; margin-bottom: .75rem; }
  .lp-audit__host-foto { width: 3rem; height: 3rem; }
}

/* Wybrana godzina w bębnie NIE ma własnego tła.
   Starsza wersja (siatka pigułek) malowała ją pełnym gradientem i po
   zamianie na bęben ten sam styl zalewał cały wiersz, przez co ramka
   wyboru robiła się solidnym paskiem zamiast delikatnego podświetlenia. */
.lp-audit__beben .lp-audit__godzina.is-wybrany {
  background: none;
  border: 0;
}

/* Sąsiednie godziny przygaszone, tak jak w natywnym wyborze czasu -
   to one dają wrażenie, że lista się kręci. */
.lp-audit__beben .lp-audit__godzina { opacity: .45; }
.lp-audit__beben .lp-audit__godzina.is-wybrany { opacity: 1; }

/* =======================================================================
   KALENDARZ REZERWACJI: siatka miesiąca + lista godzin
   =======================================================================
   Układ z systemów rezerwacji, które człowiek zna z życia: po lewej dni,
   po prawej wolne pory. Dni bez terminów są wygaszone i nieklikalne,
   a te z terminami mają kropkę pod numerem. */
.lp-kal {
  display: grid;
  gap: .875rem;
  margin-bottom: 1.125rem;
  padding: .875rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 1rem;
  background: rgba(0, 0, 0, .25);
}

.lp-kal[hidden] { display: none; }

@media (min-width: 520px) {
  .lp-kal { grid-template-columns: 1fr 8.5rem; }
}

.lp-kal__pasek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .625rem;
}

.lp-kal__miesiac {
  font-family: var(--lp-font-head);
  font-size: .9375rem;
  font-weight: 700;
  color: #fff;
  text-transform: capitalize;
}

.lp-kal__strzalka {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: .5rem;
  background: rgba(255, 255, 255, .04);
  color: var(--lp-muted);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}

.lp-kal__strzalka:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }

.lp-kal__naglowki,
.lp-kal__siatka {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .1875rem;
}

.lp-kal__naglowki {
  margin-bottom: .25rem;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lp-muted);
  text-align: center;
}

.lp-kal__dzien {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: rgba(255, 255, 255, .28);
  font-family: inherit;
  font-size: .8125rem;
  font-weight: 600;
  cursor: default;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.lp-kal__dzien--pusty { visibility: hidden; }

/* Dzien z wolnymi godzinami: pelny kolor i kropka pod numerem. Kropka jest
   tu wazniejsza niz kolor - widac ja nawet katem oka i to ona prowadzi
   wzrok do dni, w ktorych w ogole mozna sie umowic. */
.lp-kal__dzien.is-wolny {
  color: #fff;
  cursor: pointer;
  background: rgba(255, 255, 255, .06);
}

.lp-kal__dzien.is-wolny::after {
  content: "";
  position: absolute;
  bottom: .1875rem;
  left: 50%;
  width: .25rem;
  height: .25rem;
  margin-left: -.125rem;
  border-radius: 50%;
  background: #cc00a6;
}

.lp-kal__dzien.is-wolny:hover {
  background: rgba(255, 255, 255, .14);
  transform: scale(1.06);
}

.lp-kal__dzien.is-dzis { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }

.lp-kal__dzien.is-wybrany {
  background: var(--lp-gradient);
  color: #fff;
}

.lp-kal__dzien.is-wybrany::after { background: #fff; }

/* --- Prawa kolumna: godziny ------------------------------------------- */
.lp-kal__prawa {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: .5rem;
  min-width: 0;
}

.lp-kal__prawa-tytul {
  margin: 0;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lp-muted);
}

/* Lista przewijana, ze stala wysokoscia - osiem wolnych godzin nie moze
   rozepchnac okna na kolejny ekran. */
.lp-kal__godziny {
  display: grid;
  gap: .375rem;
  align-content: start;
  max-height: 13.5rem;
  overflow-y: auto;
  padding-right: .125rem;
  scrollbar-width: thin;
  touch-action: pan-y;
}

.lp-kal__godzina {
  padding: .5625rem .5rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: .625rem;
  background: rgba(255, 255, 255, .04);
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.lp-kal__godzina:hover {
  border-color: rgba(255, 255, 255, .34);
  transform: translateY(-1px);
}

.lp-kal__godzina.is-wybrany {
  border-color: transparent;
  background: var(--lp-gradient);
}

.lp-kal__pusto {
  margin: 0;
  font-size: .8125rem;
  color: var(--lp-muted);
}

@media (max-height: 820px) {
  .lp-kal { padding: .75rem; }
  .lp-kal__godziny { max-height: 11rem; }
}

/* ======================================================================
   EKRAN PO AUDYCIE - jeden ekran na komputerze
   ======================================================================

   PROBLEM: okno rezerwacji przewijalo sie pionowo, wiec przycisk
   "Rezerwuję" bywal pod krawedzia ekranu. Czlowiek, ktory wlasnie
   dostal raport, musial szukac miejsca, w ktorym sie umawia.

   ROZWIAZANIE: od 1000px tresc stoi w dwoch kolumnach - powod po lewej,
   kalendarz i numer po prawej. Okno jest szersze niz wyzsze i miesci sie
   w jednym widoku. Ponizej 1000px kolumny skladaja sie w jedna i panel
   przewija sie jak dotad, bo na telefonie ruch palcem w pionie jest
   naturalny.
   ====================================================================== */

.lp-audit__done-grid { display: grid; gap: 1.25rem; }

.lp-audit__done-lewa { position: relative; }

/* Plakietka "Tylko dziś" przypieta do rogu karty z ofertą konsultacji. */
.lp-audit__dzis-badge {
  position: absolute;
  top: -.75rem;
  left: -.75rem;
  z-index: 2;
  padding: .3rem .75rem;
  border-radius: 999px;
  background: #e0203f;
  color: #fff;
  font-family: var(--lp-font-head);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 4px 0 0 rgba(0, 0, 0, .35), 0 6px 16px rgba(224, 32, 63, .45);
  transform: rotate(-6deg);
}

@media (min-width: 1000px) {

  /* Szersze okno TYLKO dla ekranu rezerwacji. Formularz audytu i sciezka
     "nie mam strony" zostaja waskie - tam szerokosc tylko rozstrzelilaby
     pola. :has() pozwala to rozroznic bez dokladania klasy z PHP. */
  .lp-audit__modal-box:has(.lp-audit__done:not([hidden])) {
    max-width: 62rem;
    max-height: 94vh;
  }

  .lp-audit__modal-box:has(.lp-audit__done:not([hidden])) .lp-audit__done {
    max-width: none;
    padding: 1.75rem 1.75rem 1.5rem;
  }

  .lp-audit__done-grid {
    grid-template-columns: 1fr 1.05fr;
    gap: 2rem;
    align-items: start;
  }

  /* Kreska miedzy kolumnami zamiast pustki - inaczej dwie kolumny wygladaja
     jak dwa osobne okna obok siebie. */
  .lp-audit__done-prawa {
    padding-left: 2rem;
    border-left: 1px solid rgba(255, 255, 255, .1);
  }

  .lp-audit__done-lewa { text-align: left; }
  .lp-audit__gwarancja { justify-content: flex-start; }
  .lp-audit__done-ptaszek { margin-inline: 0; }
  .lp-audit__done-linia { margin: 1rem 0; }
  .lp-audit__done-alarm { margin-bottom: 1rem; }

  /* Kalendarz na komputerze: godziny w dwoch slupkach, zeby lista nie
     rosla w dol i nie wypychala przycisku poza ekran. */
  .lp-kal__godziny {
    grid-template-columns: 1fr 1fr;
    max-height: 11.5rem;
  }
}

/* --- Bonus: rozmowa jako prezent, nie kolejny krok ------------------- */
.lp-audit__bonus {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  margin: 0 0 .5rem;
  padding: .3125rem .625rem;
  border: 1px solid rgba(204, 0, 166, .45);
  border-radius: 999px;
  background: rgba(204, 0, 166, .14);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
}

.lp-audit__bonus-znak { display: grid; place-items: center; color: #ff5ad4; }

.lp-audit__bonus-tytul {
  margin: 0 0 .75rem;
  font-family: var(--lp-font-head);
  font-size: 1.25rem;
  line-height: 1.2;
  color: #fff;
}

/* --- Ile zostalo wolnych godzin (liczba z CRM, nie z kodu) ----------- */
.lp-audit__pilne {
  /* Blok, nie flex: pogrubiona liczba w srodku zdania musi zostac czescia
     tego zdania. Przy flex kazde <b> staje sie osobna kolumna i tekst
     rozpada sie na slupki. Kropka jest ulozona bezwzglednie. */
  display: block;
  position: relative;
  margin: .875rem 0 0;
  padding: .5625rem .75rem .5625rem 1.75rem;
  border-radius: .75rem;
  border: 1px solid rgba(255, 176, 32, .28);
  background: rgba(255, 176, 32, .1);
  font-size: .8125rem;
  line-height: 1.45;
  color: #ffd79a;
  text-align: left;
}

.lp-audit__pilne[hidden] { display: none; }
.lp-audit__pilne b { color: #fff; }

.lp-audit__pilne::before {
  content: "";
  position: absolute;
  top: 1rem;
  left: .75rem;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: #ffb020;
  box-shadow: 0 0 0 4px rgba(255, 176, 32, .18);
}

/* Na telefonie ten wiersz idzie srodkiem, jak reszta bloku. Do lewej
   odsuwa sie dopiero w ukladzie dwukolumnowym. */
.lp-audit__gwarancja {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4375rem;
  margin: .75rem 0 0;
  font-size: .8125rem;
  color: var(--lp-muted);
}

.lp-audit__gwarancja svg { display: block; color: #4ade80; }

/* Niskie okna (laptopy 13-14"): wszystko o stopien ciasniej, zeby przycisk
   zostal nad krawedzia ekranu. */
@media (min-width: 1000px) and (max-height: 860px) {
  .lp-audit__modal-box:has(.lp-audit__done:not([hidden])) .lp-audit__done { padding: 1.25rem 1.5rem; }
  .lp-audit__done-ptaszek { width: 2.75rem; height: 2.75rem; margin-bottom: .625rem; }
  .lp-audit__done-linia { margin: .875rem 0; }
  .lp-audit__done-slowa { font-size: .875rem; }
  .lp-kal__godziny { max-height: 9.5rem; }
  .lp-kal { margin-bottom: .875rem; padding: .75rem; }
}

/* ======================================================================
   EKRAN PO AUDYCIE - warstwa kolorow
   ======================================================================

   Ten ekran jest nagroda: czlowiek wlasnie dostal raport, a my dokladamy
   rozmowe. Wersja szara z zielonym ptaszkiem czytala sie jak komunikat
   systemowy ("operacja zakonczona powodzeniem"), a nie jak prezent, wiec
   nikt nie mial ochoty klikac dalej.

   Kolor jest tu marka, nie ozdoba: magenta i fiolet z KV, do tego zloto
   przy ograniczonej dostepnosci, bo to jedyne miejsce, ktore ma mowic
   innym glosem niz reszta okna.
   ====================================================================== */

/* Poswiata w rogach okna. Dwa zrodla swiatla zamiast plaskiego tla -
   bez tego kazdy kolejny akcent wyglada jak naklejka na czerni. */
.lp-audit__modal-box:has(.lp-audit__done:not([hidden])) {
  background:
    radial-gradient(60% 50% at 8% 0%, rgba(204, 0, 166, .22) 0%, rgba(204, 0, 166, 0) 70%),
    radial-gradient(55% 45% at 100% 100%, rgba(115, 56, 234, .2) 0%, rgba(115, 56, 234, 0) 70%),
    var(--lp-bg);
  border-color: rgba(204, 0, 166, .3);
}

.lp-audit__modal-box:has(.lp-audit__done:not([hidden])) .lp-audit__done {
  border: 0;
  background: none;
}

/* --- Ptaszek: z systemowej zieleni na kolor marki ---------------------- */
.lp-audit__done-ptaszek {
  width: 3.25rem;
  height: 3.25rem;
  border: 0;
  background: var(--lp-gradient);
  color: #fff;
  box-shadow: 0 10px 30px rgba(204, 0, 166, .45);
}

/* --- Naglowek: gradient w literach ------------------------------------ */
.lp-audit__done-tytul {
  font-size: 1.5rem;
  background: linear-gradient(100deg, #fff 0%, #ffb3ee 45%, #b79bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Adres: pigulka w kolorach marki, nie szara plamka ---------------- */
.lp-audit__done-adres {
  border-color: rgba(204, 0, 166, .45);
  background: rgba(204, 0, 166, .14);
  color: #ffd9f6;
}

.lp-audit__done-adres[hidden] { display: none; }

/* --- Plakietka bonusu: to ma byc wstazka na prezencie ----------------- */
.lp-audit__bonus {
  padding: .4375rem .875rem;
  border: 0;
  background: var(--lp-gradient);
  box-shadow: 0 8px 24px rgba(204, 0, 166, .38);
  color: #fff;
  letter-spacing: .08em;
}

.lp-audit__bonus-znak { color: #fff; }

.lp-audit__bonus-tytul {
  font-size: 1.375rem;
  color: #fff;
}

/* --- Karta osoby: obwodka w gradiencie -------------------------------- */
.lp-audit__host {
  border: 1px solid rgba(255, 255, 255, .1);
  background:
    linear-gradient(180deg, rgba(204, 0, 166, .16) 0%, rgba(115, 56, 234, .1) 100%),
    rgba(255, 255, 255, .03);
}

.lp-audit__host-foto--brak {
  background: var(--lp-gradient);
  color: #fff;
  box-shadow: 0 8px 22px rgba(115, 56, 234, .4);
}

/* --- Ograniczona dostepnosc: zloto, jedyny inny glos w oknie ---------- */
.lp-audit__pilne {
  padding: .75rem .875rem .75rem 2.25rem;
  border-color: rgba(255, 184, 46, .45);
  background: linear-gradient(135deg, rgba(255, 184, 46, .2) 0%, rgba(255, 106, 0, .14) 100%);
  color: #ffe6bd;
  font-size: .875rem;
}

.lp-audit__pilne b { color: #fff9ef; }

/* Kropka pulsuje, bo liczba okienek realnie spada w ciagu dnia. */
.lp-audit__pilne::before {
  top: 1.125rem;
  left: .9375rem;
  background: #ffb82e;
  animation: lp-puls 2s ease-in-out infinite;
}

@keyframes lp-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 184, 46, .5); }
  50%      { box-shadow: 0 0 0 7px rgba(255, 184, 46, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .lp-audit__pilne::before { animation: none; }
}

/* --- Godziny w kalendarzu: zywsze, zeby kusily klikniecie ------------- */
.lp-kal {
  border-color: rgba(204, 0, 166, .22);
  background: linear-gradient(180deg, rgba(115, 56, 234, .1) 0%, rgba(0, 0, 0, .3) 100%);
}

.lp-kal__godzina {
  border-color: rgba(204, 0, 166, .35);
  background: rgba(204, 0, 166, .1);
}

.lp-kal__godzina:hover {
  border-color: rgba(204, 0, 166, .8);
  background: rgba(204, 0, 166, .2);
}

.lp-kal__godzina.is-wybrany { box-shadow: 0 6px 18px rgba(204, 0, 166, .45); }

/* --- Przycisk: swieci, bo to jedyne miejsce do klikniecia ------------- */
.lp-audit__tel-form .lp-audit__submit {
  box-shadow: 0 12px 34px rgba(204, 0, 166, .45);
}

/* --- Zdanie pod przyciskiem: zamek i konkret, bez tlumaczenia sie ----- */
/* Blok, nie flex: klodka i zdanie maja stac w jednej linii tekstu.
   Przy flex kazdy kawalek staje sie osobna kolumna i zdanie rozjezdza sie
   na trzy slupki. */
.lp-audit__tel-safe {
  display: block;
  color: #b9f5cf;
}

.lp-audit__tel-safe b { color: #fff; }

.lp-audit__tel-safe svg {
  display: inline-block;
  margin-right: .25rem;
  vertical-align: -2px;
  color: #4ade80;
}

/* --- Potwierdzenie: znaczek, tytul i adres w jednej wysrodkowanej kolumnie */
.lp-audit__potw {
  display: grid;
  justify-items: center;
  gap: .625rem;
  text-align: center;
}

.lp-audit__potw .lp-audit__done-ptaszek { margin: 0; }

.lp-audit__potw .lp-audit__done-tytul { margin: 0; }

/* Adres to teraz linijka tekstu, nie pigulka. Pusta pigulka pod tytulem
   wygladala jak niedokonczony element strony. */
.lp-audit__potw .lp-audit__done-adres {
  padding: 0;
  border: 0;
  background: none;
  font-size: .9375rem;
  font-weight: 600;
  color: #ffb3ee;
}

/* Reszta lewej kolumny zostaje do lewej - wysrodkowana jest tylko ta
   czapka, zeby czlowiek najpierw zobaczyl, ze obietnica zostala dowieziona. */
@media (min-width: 1000px) {
  .lp-audit__potw { justify-items: center; }
}

/* ======================================================================
   ZGODA MARKETINGOWA
   ======================================================================
   Wyglada inaczej niz zgoda wymagana: lzejsza, z dopiskiem "nieobowiazkowe",
   zeby na pierwszy rzut oka bylo widac, ze mozna ja pominac i formularz
   i tak pojdzie. Zgoda, ktora wyglada jak warunek, nie jest dobrowolna.
   ====================================================================== */

.lp-zgoda { margin-top: .875rem; }

.lp-zgoda__pole {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .625rem;
  align-items: start;
  cursor: pointer;
}

/* Wlasciwy input zostaje w drzewie dla czytnikow ekranu i klawiatury,
   a widoczny kwadracik rysujemy obok. */
.lp-zgoda__pole input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.lp-zgoda__ptaszek {
  display: grid;
  place-items: center;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: .125rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: .375rem;
  background: rgba(255, 255, 255, .04);
  color: transparent;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.lp-zgoda__pole input:checked ~ .lp-zgoda__ptaszek {
  border-color: transparent;
  background: var(--lp-gradient);
  color: #fff;
}

.lp-zgoda__pole input:focus-visible ~ .lp-zgoda__ptaszek {
  outline: 2px solid #cc00a6;
  outline-offset: 2px;
}

.lp-zgoda__tresc {
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--lp-muted);
  text-align: left;
}

.lp-zgoda__opcjonalne {
  display: inline-block;
  margin-left: .375rem;
  padding: .0625rem .375rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}

.lp-zgoda__nota {
  margin: .5rem 0 0;
  font-size: .6875rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .45);
  text-align: left;
}

.lp-zgoda__nota a { color: rgba(255, 255, 255, .7); text-decoration: underline; }
.lp-zgoda__nota a:hover { color: #fff; }

/* --- Co dostaje z rozmowy: dwa punkty, nie akapit -------------------- */
.lp-audit__zysk {
  display: grid;
  gap: .5rem;
  margin: .875rem 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.lp-audit__zysk li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .625rem;
  align-items: start;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--lp-muted);
}

.lp-audit__zysk b { color: #fff; }

.lp-audit__zysk-znak {
  display: grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: .5rem;
  background: rgba(204, 0, 166, .16);
  color: #ff5ad4;
}

/* Obietnica pod punktami mowi mocniej niz reszta bloku, bo odpowiada na
   jedyna obawe, ktora realnie zatrzymuje palec nad przyciskiem. */
.lp-audit__gwarancja {
  align-items: flex-start;
  font-size: .8125rem;
  line-height: 1.45;
  color: #b9f5cf;
}

.lp-audit__gwarancja b { color: #fff; }
.lp-audit__gwarancja svg { color: #4ade80; flex: none; margin-top: .0625rem; }

.lp-audit__tel-safe {
  display: block;
  font-size: .75rem;
  color: var(--lp-muted);
}

/* Niskie okna: punkty i karta osoby o stopien ciasniej, zeby lewa kolumna
   nie przerosla prawej i okno zostalo w jednym ekranie. */
@media (min-width: 1000px) and (max-height: 820px) {
  .lp-audit__host { margin-bottom: .75rem; padding: .625rem .875rem; }
  .lp-audit__host-foto { width: 2.75rem; height: 2.75rem; }
  .lp-audit__zysk { gap: .375rem; margin-top: .75rem; }
  .lp-audit__zysk li { font-size: .8125rem; }
  .lp-audit__bonus-tytul { margin-bottom: .5rem; font-size: 1.1875rem; }
  .lp-audit__pilne { margin-top: .625rem; font-size: .8125rem; }
  .lp-audit__gwarancja { margin-top: .5rem; }
  .lp-audit__done-alarm { font-size: .9375rem; }
}

/* Blok o dostepnosci stoi teraz w prawej kolumnie, tuz nad polem numeru:
   tam, gdzie czlowiek podejmuje decyzje, a nie w akapicie obok. Dzieki temu
   lewa kolumna nie przerasta prawej i okno miesci sie w jednym ekranie. */
.lp-audit__tel-form .lp-audit__pilne { margin: 0 0 1rem; }

/* Ostatnie kilkadziesiat pikseli na laptopach 13-14": okno ma konczyc sie
   nad krawiedzia ekranu razem z odnosnikiem wyjscia, a nie tuz pod nim. */
@media (min-width: 1000px) and (max-height: 800px) {
  .lp-audit__modal-box:has(.lp-audit__done:not([hidden])) .lp-audit__done { padding: 1.125rem 1.375rem; }
  .lp-audit__done-ptaszek { width: 2.5rem; height: 2.5rem; }
  .lp-audit__potw { gap: .375rem; }
  .lp-audit__done-tytul { font-size: 1.3125rem; }
  .lp-audit__done-linia { margin: .75rem 0; }
  .lp-kal { margin-bottom: .75rem; }
  .lp-audit__tel-form .lp-audit__pilne { margin-bottom: .75rem; }
  .lp-audit__tel-form .lp-audit__submit { margin-top: .75rem; }
  .lp-audit__tel-safe { margin-top: .625rem; }
  .lp-audit__tel-skip { margin-top: .625rem; }
}

/* Godziny znowu jedna kolumna. Dwa slupki rozpychaly kalendarz na szerokosc,
   a lista terminow czyta sie z gory na dol, nie w zygzaku. */
@media (min-width: 1000px) {
  .lp-kal { grid-template-columns: 1fr 7.5rem; }
  .lp-kal__godziny { grid-template-columns: 1fr; max-height: 14rem; }
  .lp-audit__tel-form .lp-audit__pilne { margin: 0; }
}

/* Blok o dostepnosci wrocil do lewej kolumny, pod punkty korzysci. */
.lp-audit__done-lewa .lp-audit__pilne { margin: .875rem 0 0; }

/* Ekran rezerwacji pokazany komus, kto nie zostawil adresu: bez zielonego
   ptaszka i bez plakietki z mailem, bo nic jeszcze nie zostalo dostarczone.
   Potwierdzenie czegos, czego nie bylo, jest gorsze niz brak potwierdzenia. */
.lp-audit__done.is-bez-maila .lp-audit__done-ptaszek { display: none; }
.lp-audit__done.is-bez-maila .lp-audit__done-adres { display: none; }

/* ======================================================================
   STRONA /rezerwacja/
   ======================================================================

   Ten ekran ma wygladac DOKLADNIE tak jak rezerwacja w oknie po audycie:
   czlowiek przychodzi tu z maila, ktory dostal po audycie, i widzi to samo,
   co widzial na stronie. Dlatego karta uzywa tych samych klas, a tutaj
   powtarzamy tylko to, co w oknie bylo przypiete do samego okna.
   ====================================================================== */

.lp-rez {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 1rem;
  background:
    radial-gradient(60% 50% at 8% 0%, rgba(204, 0, 166, .22) 0%, rgba(204, 0, 166, 0) 70%),
    radial-gradient(55% 45% at 100% 100%, rgba(115, 56, 234, .2) 0%, rgba(115, 56, 234, 0) 70%),
    var(--lp-bg);
}

.lp-rez__karta {
  width: 100%;
  max-width: 34rem;
  margin: 0;
  padding: 1.25rem 1.125rem 1.5rem;
  border: 1px solid rgba(204, 0, 166, .3);
  border-radius: 1.25rem;
  background: rgba(10, 8, 20, .55);
}

/* Czapka wysrodkowana tak samo jak w oknie po audycie. */
.lp-rez .lp-audit__done-tytul { font-size: 1.375rem; }
.lp-rez .lp-audit__done-alarm { margin-bottom: 1rem; }
.lp-rez .lp-audit__tel-ok { text-align: center; }
.lp-rez .lp-audit__tel-ok .lp-audit__done-ptaszek { margin: 0 auto 1rem; }
.lp-rez__form[hidden] { display: none; }

/* Ten sam uklad dwukolumnowy co w oknie: powod po lewej, kalendarz z numerem
   po prawej, calosc w jednym ekranie. */
@media (min-width: 62rem) {
  .lp-rez { padding: 2rem; }

  .lp-rez__karta {
    max-width: 62rem;
    padding: 1.75rem;
  }

  .lp-rez .lp-kal__godziny { grid-template-columns: 1fr; }
}

/* Niskie okna: karta przestaje byc centrowana, zeby nie uciac gory. */
@media (max-height: 820px) {
  .lp-rez { align-items: start; }
}

/* Plakietka "tylko dziś" na stronie rezerwacji stoi w przepływie, nie na
   rogu karty. W oknie wisiała nad wyśrodkowanym znaczkiem, a tu, przy
   treści wyrównanej do lewej, nachodziłaby na ikonę kalendarza. */
.lp-rez .lp-audit__dzis-badge {
  position: static;
  display: inline-block;
  margin: 0 0 .875rem;
  transform: rotate(-2deg);
}

/* --- /rezerwacja/ : kroki i pole numeru ------------------------------- */
.lp-rez__krok {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .625rem;
  font-size: .875rem;
  font-weight: 600;
  color: #fff;
}

.lp-rez__krok span {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--lp-gradient);
  font-size: .6875rem;
  font-weight: 700;
}

.lp-rez__krok b {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lp-muted);
}

.lp-rez__krok:not(:first-child) { margin-top: 1.125rem; }

/* Etykieta zostaje dla czytnikow ekranu, bo krok wyzej mowi to samo
   wizualnie i dwa razy ten sam napis czyta sie jak usterka. */
.lp-rez__label-ukryta {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Pole numeru jest tu druga najwazniejsza rzecza po kalendarzu, wiec ma
   widoczna ramke zamiast ginac w tle karty. */
.lp-rez__tel {
  border-color: rgba(204, 0, 166, .35);
  background: rgba(204, 0, 166, .06);
}

.lp-rez__tel:focus {
  border-color: rgba(204, 0, 166, .8);
  background: rgba(204, 0, 166, .1);
}

.lp-rez__tel::placeholder { color: rgba(255, 255, 255, .28); }

/* Obie kolumny dostaja oddech, zeby tresc nie kleila sie do kreski. */
@media (min-width: 62rem) {
  .lp-rez .lp-audit__done-lewa { padding-right: .5rem; }
  .lp-rez .lp-audit__done-prawa { padding-left: 2rem; }
}

/* ======================================================================
   TELEFON: gora okna spod paska przegladarki
   ======================================================================

   Pasek adresu w przegladarkach mobilnych nachodzi na obszar liczony przez
   jednostke vh - okno wysokie na 96vh zaczyna sie wiec FIZYCZNIE nad
   widocznym ekranem i pierwsze elementy (plakietka "tylko dziś", naglowek)
   chowaja sie pod paskiem.

   Dwie rzeczy naraz: dvh zamiast vh (liczy realnie widoczna wysokosc, a nie
   ta sprzed schowania paska) i zapas na gorze okna. Zapas zostaje nawet po
   schowaniu paska przy przewijaniu - tresc ma oddech zamiast kleic sie do
   krawedzi.
   ====================================================================== */

@media (max-width: 999px) {
  .lp-audit__modal-box {
    max-height: 92vh;
    max-height: 92dvh;
    padding-top: calc(1.75rem + env(safe-area-inset-top));
  }

  /* Krzyzyk schodzi razem z trescia, inaczej wisialby nad nia w pustce. */
  .lp-audit__modal-x { top: calc(.75rem + env(safe-area-inset-top)); }

  /* Strona rezerwacji nie jest oknem, ale ma ten sam problem: karta
     zaczyna sie u samej gory ekranu. */
  .lp-rez { padding-top: calc(1.5rem + env(safe-area-inset-top)); }
}

/* Zdanie pod przyciskiem powrotu: mowi, dokad prowadzi, zanim ktos kliknie. */
.lp-rez__powrot {
  margin: .75rem 0 0;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--lp-muted);
}

/* Blok rozmowy na ekranie po wysłaniu strategii. Te same klasy co w oknie
   po audycie, tu tylko odstępy i kreska oddzielająca od potwierdzenia. */
.lp-gotowe__rozmowa {
  margin: 1.5rem 0 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  text-align: left;
}

.lp-gotowe__rozmowa[hidden] { display: none; }
.lp-gotowe__rozmowa .lp-audit__bonus { margin-bottom: .5rem; }
.lp-gotowe__rozmowa .lp-gotowe__cta { width: 100%; margin-top: 1rem; }

/* Karta rezerwacji wewnątrz ekranu po wysłaniu strategii. Kalendarz jest tu
   węższy niż w oknie po audycie, więc godziny idą pod siatką dni. */
.lp-rez-w-karcie { margin-top: 1rem; text-align: left; }
.lp-rez-w-karcie .lp-kal { grid-template-columns: 1fr; }
.lp-rez-w-karcie .lp-kal__godziny { grid-template-columns: repeat(3, 1fr); max-height: none; }
.lp-rez-w-karcie .lp-audit__submit { width: 100%; }
.lp-rez-w-karcie .lp-audit__tel-ok { text-align: center; padding-top: .5rem; }

@media (min-width: 48rem) {
  .lp-rez-w-karcie .lp-kal { grid-template-columns: 1fr 8.5rem; }
  .lp-rez-w-karcie .lp-kal__godziny { grid-template-columns: 1fr; max-height: 14rem; }
}

/* ---- Okno z adresem e-mail (ścieżka bez strony) --------------------- */

/* Plakietka z branżą: zielony ptaszek mówi, że ten krok jest już za nami. */
/* Ptaszek i nazwa branzy w JEDNEJ plakietce. Ogolna regula nadaje tlo
   kazdemu <span> w tym akapicie, wiec bez tego ptaszek dostawal wlasne
   kolko obok drugiego. */
.lp-mail__echo--zielony {
  display: flex;
  margin: -.5rem 0 .75rem;
}

.lp-mail__echo--zielony span {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  padding: .3125rem .75rem;
  border: 1px solid rgba(74, 222, 128, .35);
  border-radius: 999px;
  background: rgba(74, 222, 128, .1);
  font-size: .8125rem;
  color: #b9f5cf;
}

/* Znak i tekst siedza w jednej plakietce, wiec wewnetrzny span nie ma juz
   wlasnego tla ani obwodki. */
.lp-mail__echo--zielony .lp-mail__echo-znak,
.lp-mail__echo--zielony [data-strategia-echo] {
  padding: 0;
  border: 0;
  background: none;
}

.lp-mail__echo--zielony .lp-mail__echo-znak { color: #4ade80; }
.lp-mail__echo--zielony [data-strategia-echo] { color: #b9f5cf; }

/* Pasek postępu. Mówi o drodze człowieka przez formularz, nie o liczeniu
   dokumentu - ten powstaje dopiero po podaniu adresu. */
.lp-mail__pasek {
  height: .375rem;
  margin: .875rem 0 .5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.lp-mail__pasek-wypelnienie {
  display: block;
  width: 95%;
  height: 100%;
  border-radius: 999px;
  background: var(--lp-gradient);
  animation: lp-pasek 1.1s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes lp-pasek {
  from { width: 0; }
  to { width: 95%; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-mail__pasek-wypelnienie { animation: none; }
}

.lp-mail__pasek-opis {
  margin: 0 0 1.125rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--lp-muted);
}

.lp-mail__lista-tytul {
  margin: 0 0 .5rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lp-muted);
}

.lp-mail__lista {
  display: grid;
  gap: .4375rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  font-size: .875rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .78);
}

.lp-mail__lista li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .5rem;
  align-items: start;
}

.lp-mail__lista li::before {
  content: "";
  width: 1.0625rem;
  height: 1.0625rem;
  margin-top: .125rem;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-11'/%3E%3C/svg%3E") center / .75rem no-repeat,
    rgba(74, 222, 128, .14);
}

.lp-mail__gwarancja b { color: #fff; }

.lp-mail__gwarancja svg {
  display: inline-block;
  margin-right: .25rem;
  vertical-align: -2px;
  color: #4ade80;
}

/* ---- Sekcja "Wycena" za cennikiem ---------------------------------- */
.lp-wycena__tytul {
  margin: 0 0 .5rem;
  font-family: var(--lp-font-head);
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  line-height: 1.15;
  color: #fff;
  text-align: center;
}

.lp-wycena__lead {
  margin: 0 auto 1.5rem;
  max-width: 34rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--lp-muted);
  text-align: center;
}

.lp-wycena .lp-last__form { display: block; }

/* ---- Sekcja "Wycena": korzyści językiem klienta --------------------- */
.lp-wycena__lista-tytul {
  margin: 1.5rem 0 .625rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lp-muted);
  text-align: center;
}

.lp-wycena__lista {
  display: grid;
  gap: .5rem;
  max-width: 34rem;
  margin: 0 auto 1.5rem;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
}

.lp-wycena__lista li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .625rem;
  align-items: start;
  text-align: left;
}

/* Blyskawica zamiast ptaszka: to nie jest lista odhaczonych rzeczy,
   tylko lista tego, co dostaje. */
.lp-wycena__lista li::before {
  content: "";
  width: 1.125rem;
  height: 1.125rem;
  margin-top: .125rem;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff5ad4'%3E%3Cpath d='M13 2 4.5 13.5H11l-1 8.5 8.5-11.5H12z'/%3E%3C/svg%3E") center / .6875rem no-repeat,
    rgba(204, 0, 166, .16);
}

.lp-wycena__zacheta {
  margin: 0 auto 1rem;
  max-width: 34rem;
  font-size: .9375rem;
  color: #fff;
  text-align: center;
}

.lp-wycena__pole { max-width: 26rem; margin: 0 auto; }

.lp-wycena__safe {
  margin: .875rem 0 .5rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: #b9f5cf;
  text-align: center;
}

.lp-wycena__safe svg {
  display: inline-block;
  margin-right: .25rem;
  vertical-align: -2px;
  color: #4ade80;
}

/* Naglowek sekcji "Wycena" w rytmie cennika i FAQ. */
.lp-wycena__eyebrow {
  margin: 0 0 .625rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ff5ad4;
  text-align: center;
}

/**
 * Gradient w literach, gdy napis LAMIE SIE NA KILKA LINII.
 *
 * Tlo przyciete do liter rozciaga sie domyslnie na caly obszar elementu
 * liniowego. Gdy taki napis przechodzi do nastepnej linii, WebKit (Safari
 * na iPhonie, ale i Chrome na Androidzie) rysuje gradient tylko na
 * pierwszym fragmencie, a kolejne zostaja przezroczyste - czyli slowa
 * po prostu znikaja.
 *
 * box-decoration-break: clone kaze przegladarce potraktowac kazda linie
 * jak osobne pudelko z wlasnym tlem. Kazdy fragment dostaje wtedy pelny
 * gradient i nic nie ginie.
 */
/**
 * Gradient w literach: nosi go CALY NAGLOWEK, nie pojedyncze slowa.
 *
 * Wczesniej gradient siedzial na elemencie liniowym z akcentem. Gdy fraza
 * nie miescila sie w jednym wierszu (a na telefonie "stracisz w tym miesiacu"
 * lamie sie zawsze), Safari na iOS malowalo tlo tylko dla pierwszego
 * fragmentu, a reszta slow znikala - zostawala po nich sama dziura
 * w zdaniu. `box-decoration-break: clone` mial to naprawiac i nie naprawial.
 *
 * Teraz gradient jest na naglowku, czyli na elemencie BLOKOWYM, ktory sie
 * nie fragmentuje - maluje sie poprawnie w kazdej przegladarce. Zwykle slowa
 * przykrywaja go biala czcionka, a akcent ma czcionke przezroczysta, wiec
 * przez litery widac gradient naglowka.
 *
 * Skutek uboczny jest pozadany: akcent dostaje fragment gradientu z miejsca,
 * w ktorym stoi w zdaniu, wiec kolor plynie razem z ukladem, a nie zaczyna
 * sie od nowa przy kazdym slowie.
 */
.lp-wycena__tytul {
  background: var(--lp-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: #fff;
  -webkit-text-fill-color: #fff;
}

.lp-wycena__accent {
  background: none;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Pole numeru i przycisk potrzebuja oddechu - przyklejone do siebie
   wygladaly jak jeden element i nie bylo widac, ze to dwie rzeczy. */
.lp-wycena .lp-last__submit { margin-top: 1.25rem; }
.lp-wycena__pole { margin-bottom: .25rem; }

/* Podkreslenie w zdaniu pod naglowkiem: ten sam gest co w innych sekcjach. */
.lp-wycena__lead u,
.lp-wycena__lead .lp-podkresl {
  text-decoration: none;
  background-image: linear-gradient(transparent 62%, rgba(204, 0, 166, .38) 0);
  color: #fff;
  font-weight: 600;
}

/* Wyrozniona korzysc na liscie "co dostajesz w cenie": to, co jest gratis,
   ma sie odcinac od reszty, bo to jedyny punkt mowiacy o pieniadzach. */
.lp-wycena__lista b {
  color: #fff;
  background-image: linear-gradient(transparent 60%, rgba(204, 0, 166, .4) 0);
}


/* Ta sama poprawka dla wszystkich napisow z gradientem w literach: bez niej
   kazdy z nich gubi drugi i kolejne wiersze na telefonie (patrz notatka przy
   .lp-wycena__accent). */
.lp-hero__accent,
.lp-pricing__accent,
.lp-faq__accent,
.lp-audit__done-tytul,
.lp-rez__tytul,
.lp-last__accent,
.lp-works__accent,
.lp-reasons__accent {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ======================================================================
   TELEFON: okno audytu na calą wysokość ekranu
   ======================================================================

   Okno wjeżdżało od dołu jako panel na 92 procent wysokości. Przy tak długiej
   treści (potwierdzenie, karta osoby, punkty, kalendarz, numer, przycisk)
   górna krawędź lądowała pod paskiem przeglądarki i pierwsze elementy były
   ucięte, a nad oknem i tak nie było nic do zobaczenia.

   Na telefonie okno zajmuje więc cały ekran: własna strona w stronie.
   Przewijanie zostaje w środku, krzyżyk jedzie razem z treścią i jest
   zawsze pod kciukiem.
   ====================================================================== */

@media (max-width: 999px) {
  .lp-audit__modal { align-items: stretch; }

  .lp-audit__modal-box {
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    border-top: 0;
    padding: calc(3.25rem + env(safe-area-inset-top)) 1rem calc(1.5rem + env(safe-area-inset-bottom));
    /* Panel wjeżdżał od dołu; pełny ekran ma się pojawić, nie wjechać -
       inaczej przy dłuższej treści widać przeskok w połowie animacji. */
    transform: none;
    opacity: 0;
    transition: opacity .22s ease;
  }

  .lp-audit__modal.is-open .lp-audit__modal-box { opacity: 1; }

  /* Krzyżyk przyklejony do góry okna: przy pełnym ekranie treść jest długa,
     a wyjście musi być widoczne bez przewijania na samą górę. */
  .lp-audit__modal-x {
    position: fixed;
    top: calc(.75rem + env(safe-area-inset-top));
    right: 1rem;
    z-index: 5;
  }

  /* Karta w środku nie potrzebuje już własnej ramki - ramką jest ekran. */
  .lp-audit__modal-box .lp-audit__done {
    border: 0;
    border-radius: 0;
    padding-inline: 0;
    background: none;
  }
}

/* ======================================================================
   PŁYWAJĄCY POWRÓT DO OKNA AUDYTU
   ======================================================================
   Siedzi w rogu ekranu po zamknięciu okna bez umówienia rozmowy. Ma
   przypominać zakładkę w książce, nie baner: wąski, ciemny, bez migania.
   ====================================================================== */

.lp-wroc {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  max-width: calc(100vw - 2rem);
  padding: .625rem .875rem;
  border: 1px solid rgba(204, 0, 166, .45);
  border-radius: 999px;
  background: rgba(12, 8, 20, .92);
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  animation: lp-wroc-wjazd .32s cubic-bezier(.22, 1, .36, 1) both;
}

.lp-wroc[hidden] { display: none; }

@keyframes lp-wroc-wjazd {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-wroc { animation: none; }
}

.lp-wroc__ikona {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: 50%;
  background: var(--lp-gradient);
  color: #fff;
}

.lp-wroc__tekst {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.lp-wroc__tekst b {
  font-size: .8125rem;
  font-weight: 700;
  color: #fff;
}

.lp-wroc__tekst span {
  font-size: .6875rem;
  color: var(--lp-muted);
}

.lp-wroc:hover {
  border-color: rgba(204, 0, 166, .8);
  background: rgba(20, 10, 30, .96);
}

/* Na wąskim ekranie zostaje sama nazwa - druga linijka zabierałaby pół
   szerokości telefonu, a sam przycisk ma nie zasłaniać treści. */
@media (max-width: 420px) {
  .lp-wroc__tekst span { display: none; }
}

/* --- Logo kontra belka krokow -----------------------------------------
   Zgloszenie: po zejsciu w dol i powrocie belka postepu nachodzi na logo.

   Zmierzone: belka ma .625rem gory i dolu, w srodku krok o wysokosci okolo
   30px, razem z obwodka okolo 50px. Logo po zejsciu z hero ma 30px obrazka
   plus .75rem paddingu, czyli 42px. Oba mieszcza sie w tym samym pasie, wiec
   mimo wyzszego z-index logo czyta sie jak przebite belka.

   Logo schodzi wiec POD belke, gdy ta jest widoczna. Wysokosc trzymamy
   w zmiennej, zeby zmiana wygladu belki nie wymagala poprawiania dwoch
   miejsc osobno. */
:root {
	--lp-steps-h: 50px;
}

body.lp-body.is-scrolled .lp-brand {
	padding-top: calc(var(--lp-steps-h) + .5rem);
}

/* Pasek administratora WordPressa nie przesuwa elementow przypietych przez
   position: fixed - dlatego na zalogowanym koncie belka i logo chowaly sie
   pod nim. Gosc strony tego nie widzi, ale Lukasz pracuje zalogowany. */
body.admin-bar.lp-body .lp-steps,
body.admin-bar.lp-body .lp-brand {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar.lp-body .lp-steps,
	body.admin-bar.lp-body .lp-brand {
		top: 46px;
	}
}

/* Ciche wyjscie do cennika pod glownym przyciskiem planu naprawy.
   Ma byc czytelne, ale nie konkurowac z umowieniem rozmowy. */
.lp-plan__cennik-link {
	display: block;
	margin-top: .75rem;
	text-align: center;
	font-size: .875rem;
	color: var(--lp-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lp-plan__cennik-link:hover,
.lp-plan__cennik-link:focus-visible {
	color: var(--lp-text);
}


/* ── Poprawki zgloszone 2026-10-10 ───────────────────────────────────────── */

/**
 * 1. NAGLOWEK HERO BYL UCINANY U GORY.
 *
 * Tresc hero jest wysrodkowana w `min-height: calc(82vh - 72px)`, a `.lp-hero`
 * nie ma gornego dopelnienia. Przy oknie wyzszym niz okolo 850 px zapas
 * z min-height wypychal tresc w dol i wszystko bylo widac. Ponizej tej
 * wysokosci tresc przestawala sie miescic, wiec zaczynala sie dokladnie na
 * zerze - a sam glif Archivo Black wystaje jeszcze okolo 12 px ponad swoj
 * wiersz, wiec pierwsza linia byla przycinana krawedzia ekranu.
 *
 * Zmierzone przed poprawka (okno 1440 px szerokosci): przy 900 px wysokosci
 * naglowek zaczynal sie na +13 px, przy 800, 740, 680 i 620 px na -12 px.
 *
 * Dajemy staly gorny oddech, mniej wiecej rowny pasowi z logo. Nie ruszamy
 * ani rozmiaru liter, ani wysrodkowania - na wysokich ekranach wyglada to
 * tak samo jak dotad.
 */
@media (min-width: 768px) {
	.lp-hero__inner {
		padding-top: clamp(4.5rem, 9vh, 7rem);
	}
}

/**
 * 2. LOGO PRZY PRZEWIJANIU: MALEJE I WCHODZI W LEWY GORNY ROG.
 *
 * Tak to dziala od zawsze i tak ma zostac: na gorze logo stoi nad naglowkiem
 * w wysokosci 40 px, a po zejsciu z hero kurczy sie do 26 px i zostaje
 * w rogu, razem z paskiem krokow.
 *
 * Co bylo zepsute: regula `padding-top: calc(var(--lp-steps-h) + .5rem)`
 * spychala logo POD pasek, wiec zamiast siedziec w nim, wisialo 48 px nizej
 * nad trescia strony (zmierzone: pasek 0-52 px, logo 0-100 px).
 *
 * Czego NIE robimy: nie chowamy logo na komputerze. Regula wygaszajaca je
 * do zera jest pisana dla TELEFONU, gdzie logo i pasek krokow nie mieszcza
 * sie w jednym pasie - zostaje nietknieta ponizej 768 px.
 *
 * Dopelnienie liczymy tak, zeby logo stanelo w pionie na srodku paska.
 */
@media (min-width: 768px) {
	body.lp-body.is-scrolled .lp-brand {
		padding-top: calc((var(--lp-steps-h) - 26px) / 2);
		padding-bottom: 0;
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}


/* ── Telefon: pasek krokow i logo (zgloszenie 2026-10-10) ───────────────── */

/**
 * PASEK KROKOW MIESCI SIE W CALOSCI.
 *
 * Bylo: dziewiec krokow z podpisami, razem 1041 px zawartosci w oknie
 * 390 px, przewijane w bok. Dziewiaty krok ("Pytania") lezal 865 px za
 * prawa krawedzia, wiec na telefonie bylo widac piec i pol kroku, a reszta
 * wygladala jak ucieta.
 *
 * Teraz na telefonie zostaja same numery, rozlozone rowno na calej
 * szerokosci. Podpisy wracaja od 768 px wzwyz, gdzie jest na nie miejsce.
 */
/* 1040 px, nie 767: przy 768 i 900 px podpisy wciaz sie pokazywaly,
   a caly pasek mial 1041 px, wiec na tablecie i malym laptopie byl ucinany
   dokladnie tak samo jak na telefonie. Pelen pasek z podpisami miesci sie
   dopiero od okolo 1041 px. */
@media (max-width: 1040px) {
	.lp-steps {
		gap: 0;
		padding-inline: 8px;
		overflow-x: visible;
		justify-content: space-between;
		/* Maska wygaszala prawe 92 px jako podpowiedz "da sie przewijac
		   w bok". Pasek juz sie nie przewija, wiec maska tylko zjadala
		   dwa ostatnie kroki - stad wrazenie, ze sa ucinane. */
		-webkit-mask-image: none;
		mask-image: none;
	}

	.lp-steps__item {
		flex: 1 1 0;
		min-width: 0;
		justify-content: center;
		gap: 0;
		padding: .3rem 0;
	}

	.lp-steps__label {
		display: none;
	}
}

/**
 * LOGO ZNIKA DO GORY, A NIE W DOL.
 *
 * Na telefonie logo stoi na srodku nad naglowkiem i po zejsciu z hero ma
 * ustapic miejsca paskowi krokow - tego nie zmieniamy, bo oba nie mieszcza
 * sie w jednym pasie. Zepsute bylo samo WYJSCIE: regula spychala logo w dol
 * dopelnieniem rownym wysokosci paska, a jednoczesnie przesuwala je w gore
 * transformacja. Logo szarpalo sie w dwie strony naraz i gaslo w polowie
 * drogi.
 *
 * Teraz jedzie w jedna strone: kurczy sie i wychodzi gora, czyli tam, gdzie
 * wlasnie wjezdza pasek krokow.
 */
@media (max-width: 767px) {
	body.lp-body .lp-brand {
		transition: opacity .28s ease, transform .28s ease, padding-top .28s ease;
	}

	body.lp-body.is-scrolled .lp-brand {
		padding-top: .5rem;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-14px) scale(.86);
		pointer-events: none;
	}
}


/* ── Sekcja wyceny: karta rezerwacji potrzebuje szerokosci ──────────────── */

/**
 * `.lp-oferta` ma 680 px, bo to szerokosc wygodna do CZYTANIA. Karta
 * rezerwacji to jednak uklad dwukolumnowy (opis plus kalendarz) i w 680 px
 * jej lewa kolumna schodzila do 217 px - naglowek lamal sie wtedy na trzy
 * linie w srodku slowa.
 *
 * Tekst zostaje przy 680 px, a sama karta dostaje wiecej miejsca.
 */
@media (min-width: 1041px) {
	#wycena .lp-oferta {
		max-width: 1120px;
	}

	#wycena .lp-wycena__eyebrow,
	#wycena .lp-wycena__tytul,
	#wycena .lp-wycena__lead,
	#wycena .lp-wycena__lista-tytul,
	#wycena .lp-wycena__lista {
		max-width: 680px;
		margin-inline: auto;
	}
}


/**
 * Karta rezerwacji OSADZONA W SEKCJI, a nie na wlasnej stronie.
 *
 * `.lp-rez` jest pisane pod stale `/rezerwacja/`: ma `min-height: 100vh`,
 * wysrodkowanie w pionie i wlasne tlo, bo tam jest jedyna trescia ekranu.
 * Wstawiona do sekcji wyceny zostawiala przez to prawie dwiescie pikseli
 * pustki nad soba i doklejala drugie tlo na tle sekcji.
 */
.lp-rez--osadzona {
	display: block;
	min-height: 0;
	padding: 0;
	background: none;
}


/* ── Sekcja wyceny wg projektu z 2026-10-10 ────────────────────────────── */

.lp-wycena__naglowek {
	max-width: 1160px;
	margin: 0 auto 48px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: 32px 64px;
	align-items: end;
	text-align: left;
}

.lp-wycena__kol-tekst {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Plakietka "Ostatni krok": obrys i tlo w kolorze marki, nie sam tekst. */
.lp-wycena__plakietka {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(204, 0, 166, .12);
	border: 1px solid rgba(204, 0, 166, .3);
	color: #f06ad6;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.lp-wycena .lp-wycena__tytul {
	margin: 0;
	text-align: left;
	line-height: .98;
	letter-spacing: -.04em;
	text-wrap: balance;
	max-width: none;
}

.lp-wycena .lp-wycena__lead {
	margin: 0;
	text-align: left;
	max-width: 540px;
	text-wrap: pretty;
}

/* Podkreslenie kluczowego fragmentu zdania, bez ozdobnika pod spodem. */
.lp-wycena__podkreslone {
	color: var(--lp-text);
	font-weight: 600;
	box-shadow: inset 0 -2px 0 #cc00a6;
}

.lp-wycena__kol-korzysci {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lp-wycena .lp-wycena__lista-tytul {
	margin: 0;
	text-align: left;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #8a8790;
}

.lp-wycena__kafle {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	gap: 14px 20px;
}

.lp-wycena__kafel {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.lp-wycena__kafel-ikona {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 10px;
	background: var(--lp-gradient);
	color: #fff;
	display: grid;
	place-items: center;
}

.lp-wycena__kafel-tresc {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.lp-wycena__kafel-gora {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.lp-wycena__kafel-tytul {
	font-weight: 700;
	font-size: .9375rem;
	line-height: 1.3;
}

/* Zielona plakietka: jedyny zielony akcent w sekcji, wiec zwraca uwage. */
.lp-wycena__darmo {
	padding: 2px 8px;
	border-radius: 999px;
	background: #22c55e;
	color: #06210f;
	font-size: .65rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.lp-wycena__kafel-opis {
	font-size: .84rem;
	color: #a9a6b0;
	line-height: 1.4;
}

.lp-wycena__rodo {
	max-width: 1160px;
	margin: 18px auto 0;
	text-align: center;
	font-size: .8rem;
	color: var(--lp-muted);
}

/* Karta rezerwacji w tej sekcji dostaje pelna szerokosc projektu. */
.lp-wycena .lp-rez--osadzona {
	max-width: 1160px;
	margin-inline: auto;
}

/* Akcent w naglowku karty, tak jak w projekcie. */
.lp-rez__accent {
	background: var(--lp-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Licznik wolnych okienek przy kroku pierwszym. */
.lp-rez__okienka {
	margin-left: auto;
	font-size: .78rem;
	font-weight: 700;
	color: #f59e0b;
	white-space: nowrap;
}

.lp-rez__krok {
	display: flex;
	align-items: center;
	gap: .5rem;
}

/* Prefiks kraju wklejony w pole numeru. */
.lp-rez__tel-pole {
	display: flex;
	align-items: stretch;
	gap: 0;
}

.lp-rez__tel-kraj {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: 0 .75rem;
	border: 1px solid var(--lp-border);
	border-right: 0;
	border-radius: .625rem 0 0 .625rem;
	background: rgba(255, 255, 255, .03);
	color: var(--lp-muted);
	font-size: .95rem;
	white-space: nowrap;
}

.lp-rez__tel-pole .lp-rez__tel {
	border-radius: 0 .625rem .625rem 0;
	flex: 1 1 auto;
	min-width: 0;
}

/* Biało-czerwona flaga rysowana tlem, bez pliku graficznego. */
.lp-rez__flaga {
	width: 18px;
	height: 12px;
	border-radius: 2px;
	background: linear-gradient(to bottom, #fff 0 50%, #dc143c 50% 100%);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .18);
}


/* ── Numer telefonu w pasku krokow (po prawej) ─────────────────────────── */

/**
 * Wjezdza i znika razem z paskiem krokow, tym samym ruchem - inaczej
 * wygladalby jak element doklejony obok, a nie czesc tego samego pasa.
 *
 * Stoi nad paskiem (wyzszy z-index), bo pasek zajmuje cala szerokosc.
 */
.lp-steps-tel {
	position: fixed;
	top: 0;
	right: clamp(14px, 1.4vw, 28px);
	z-index: 62;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	height: var(--lp-steps-h, 50px);
	padding: 0 .25rem;
	color: var(--lp-text);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .01em;
	text-decoration: none;
	white-space: nowrap;
	transform: translateY(-100%);
	transition: transform .28s ease, color .2s ease;
}

body.lp-body.is-scrolled .lp-steps-tel {
	transform: translateY(0);
}

.lp-steps-tel:hover,
.lp-steps-tel:focus-visible {
	color: #f06ad6;
}

.lp-steps-tel__rakieta {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: var(--lp-gradient);
	color: #fff;
	flex-shrink: 0;
}

/* Pasek administratora przesuwa elementy przypiete do gory. */
body.admin-bar.lp-body .lp-steps-tel {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar.lp-body .lp-steps-tel {
		top: 46px;
	}
}

/**
 * Na waskich ekranach zostaje sama rakieta.
 *
 * Pasek ma tam dziewiec numerow rozlozonych na cala szerokosc, wiec na
 * numer telefonu nie ma juz miejsca - ale sam przycisk zostaje, bo to
 * na telefonie polaczenie jest najkrotsza droga do rozmowy.
 */
@media (max-width: 1040px) {
	.lp-steps-tel__numer {
		display: none;
	}

	.lp-steps {
		padding-right: 44px;
	}
}