/* ShapePart - publiczna strona www: strona główna i strony dokumentów
   (baza wiedzy dokłada do tego własny arkusz baza-wiedzy.css).
   Układ: makieta Design „ShapePart strona główna” (decyzja Michała
   2026-10-13; brandbook 2.1 rozdz. 17 nie jest już kanonem designu strony).
   Każda wartość pochodzi z tokenów (shapepart-tokens.css, kopia
   docs/marka/brandbook/tokens.css) - nie dopisuj tu własnych kolorów ani
   rozmiarów spoza skali; pilnuje test/assets/shapepart_tokens_test.rb.

   Zasady, których ten arkusz pilnuje:
   - płaszczyzny: biel i szron na przemian, jedna niebieska ("Płacisz z góry")
     i jedna ciemna (stopka z atramentu); zdjęcia bez promienia, kadr cover;
   - rysunki kreską (atrament + niebieski-600, płaszczyzny biel / szron /
     niebieski-200) zamiast ikon; bez etykiet wersalikami i szarych podpisów
     mono pod sekcjami;
   - akcent = jedno działanie na ekran (primary w hero i w finale);
   - pismo: jeden krój Archivo 500/600/700/800, skala z tokenów; styl
     techniczny (Archivo 500, cyfry tabelaryczne, decyzja 2026-10-26) dla
     metek cen, pastylek, plakietek z przykładami i danych spółki;
   - ruch: sygnet w przycisku nav rysuje się w pętli 6 s, scena hero zmienia
     trzy klatki co 4 s z paskiem postępu nad zakładką (stan prowadzi
     hero_slides.js), scena finału rysuje L-kę z ceną w pętli CSS 8 s
     (klasy fn-*); przejścia 150 ms; prefers-reduced-motion = pierwsza
     klatka, pasek bez animacji, narysowany sygnet, gotowa L-ka z ceną;
   - typografia (kanwa 2026-10-14): akapity szersze niż ~400 px wyjustowane
     bez dzielenia wyrazów, wąskie bloki (`lp-waski`) i cały układ na
     telefonie do lewej. */

/* ------------------------------------------------------------------ */
/* Baza                                                                */
/* ------------------------------------------------------------------ */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sp-font-tekst);
  font-size: var(--sp-text-16);
  line-height: var(--sp-lh-16);
  font-variant-numeric: tabular-nums;
  color: var(--sp-atrament);
  background: var(--sp-biel);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, address, dl, dd, dt { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* Nagłówki: domyślnie waga 800 ("Part" w logotypie). Duże stopnie dostają
   lekko ujemny tracking, bo Archivo ExtraBold powyżej 40 px robi się szerokie. */
.mw h1, .mw h2, .mw h3, .mw h4 {
  font-weight: 800;
  color: var(--sp-atrament);
}

:focus-visible {
  outline: 2px solid var(--sp-niebieski-500);
  outline-offset: 2px;
}

/* Tylko dla czytnika ekranu. */
.lp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Kontener 1280 px z gutterem 24 px po bokach. */
.mw-wrap {
  width: 100%;
  max-width: calc(var(--sp-container) + 2 * var(--sp-space-24));
  margin: 0 auto;
  padding: 0 var(--sp-space-24);
}

/* ------------------------------------------------------------------ */
/* Primitives: pismo, przyciski, karty, ikony                           */
/* ------------------------------------------------------------------ */

/* Etykieta spisu dokumentów (strony prawne). Na landingu etykiet
   wersalikami nie ma (brandbook 2.1). */
.sp-label {
  font-size: var(--sp-text-14);
  line-height: var(--sp-lh-14);
  font-weight: 500;
  letter-spacing: var(--sp-tracking-caps);
  text-transform: uppercase;
  color: var(--sp-tekst-2);
}

.sp-mono {
  font-family: var(--sp-font-tekst);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: var(--sp-text-14);
  line-height: var(--sp-lh-14);
}

.sp-lead {
  font-size: var(--sp-text-20);
  line-height: var(--sp-lh-20);
  color: var(--sp-tekst-2);
}

.sp-link {
  color: var(--sp-niebieski-600);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color 150ms ease-out, text-decoration-thickness 150ms ease-out;
}

.sp-link:hover {
  color: var(--sp-niebieski-700);
  text-decoration-thickness: 2px;
}

/* Przyciski: 48 px na landingu, 40 px (.sp-btn-sm) w nawigacji;
   promień 8 px; napis 16 px / 500 ("Shape" w logotypie). */
.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-space-8);
  height: 48px;
  padding: 0 var(--sp-space-24);
  border: 1px solid transparent;
  border-radius: var(--sp-radius-8);
  background: transparent;
  font-size: var(--sp-text-16);
  line-height: var(--sp-lh-16);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}

.sp-btn svg { width: 20px; height: 20px; flex: none; }

.sp-btn-sm { height: 40px; padding: 0 var(--sp-space-16); }
.sp-btn-block { width: 100%; }

/* Primary: akcent (miedź), napis biel. Hover 700, active 800. */
.sp-btn-primary {
  background: var(--sp-akcent-600);
  border-color: var(--sp-akcent-600);
  color: var(--sp-biel);
}

.sp-btn-primary:hover { background: var(--sp-akcent-700); border-color: var(--sp-akcent-700); }
.sp-btn-primary:active { background: var(--sp-akcent-800); border-color: var(--sp-akcent-800); }

/* Drugorzędny: obrys niebieski-600 1 px, napis niebieski-600, tło przezroczyste. */
.sp-btn-secondary {
  border-color: var(--sp-niebieski-600);
  color: var(--sp-niebieski-600);
}

.sp-btn-secondary:hover {
  background: var(--sp-niebieski-50);
  border-color: var(--sp-niebieski-700);
  color: var(--sp-niebieski-700);
}

/* Neutralny: obrys linia, napis atrament (trzecie wejście, jak wariant
   :neutral w ShapePart UI). */
.sp-btn-neutral {
  background: var(--sp-biel);
  border-color: var(--sp-linia);
  color: var(--sp-atrament);
}

.sp-btn-neutral:hover { background: var(--sp-szron); }

/* Duży przycisk hero i finału (makieta): 56 px, napis 18 px / 600. */
.sp-btn-lg {
  height: 56px;
  padding: 0 28px;
  font-size: var(--sp-text-18);
  line-height: var(--sp-lh-18);
  font-weight: 600;
}

/* Karta: biel, obrys 1 px linia, promień 12 (strony dokumentów). */
.sp-card {
  background: var(--sp-biel);
  border: 1px solid var(--sp-linia);
  border-radius: var(--sp-radius-12);
}

/* Ikony Heroicons (mini 20 / solid 24) dziedziczą kolor tekstu. */
.sp-icon { width: 20px; height: 20px; flex: none; }
.sp-icon-24 { width: 24px; height: 24px; flex: none; }

.logo-mark { display: block; flex-shrink: 0; }

/* Zmienne układu landingu: biel z przezroczystością na atramencie (stopka),
   cień sceny hero. Jedyne wartości spoza tokenów -
   przezroczystości tokenów nie mają. */
.mw {
  --lp-biel-64: rgba(255, 255, 255, 0.64);
  --lp-biel-16: rgba(255, 255, 255, 0.16);
  --lp-cien-scena: 0 24px 60px rgba(20, 33, 61, 0.1);
}

/* Rysunki kreską (obietnice, "Dla kogo", "Płacisz z góry", finał): inline
   SVG w partialach _lp_rys_*. Geometria w atrybutach, kolory wyłącznie tu,
   przez klasy wypełnienia (f-*) i kreski (s-*), pismo przez t-*. */
.lp-rys { display: block; width: 100%; height: auto; }
.lp-rys .f-biel { fill: var(--sp-biel); }
.lp-rys .f-szron { fill: var(--sp-szron); }
.lp-rys .f-n100 { fill: var(--sp-niebieski-100); }
.lp-rys .f-n200 { fill: var(--sp-niebieski-200); }
.lp-rys .f-n600 { fill: var(--sp-niebieski-600); }
.lp-rys .f-atr { fill: var(--sp-atrament); }
.lp-rys .f-t2 { fill: var(--sp-tekst-2); }
.lp-rys .f-akcent { fill: var(--sp-akcent-600); }
.lp-rys .f-linia { fill: var(--sp-linia); }
.lp-rys .f-brak { fill: none; }
.lp-rys .s-atr { stroke: var(--sp-atrament); }
.lp-rys .s-n600 { stroke: var(--sp-niebieski-600); }
.lp-rys .s-n200 { stroke: var(--sp-niebieski-200); }
.lp-rys .s-biel { stroke: var(--sp-biel); }
.lp-rys .s-linia { stroke: var(--sp-linia); }
.lp-rys .s-t2 { stroke: var(--sp-tekst-2); }
.lp-rys .s-ui { stroke: var(--sp-ui); }
.lp-rys .s-akcent { stroke: var(--sp-akcent-600); }
.lp-rys .t-mono { font-family: var(--sp-font-tekst); font-weight: 500; font-variant-numeric: tabular-nums; }
.lp-rys .t-tekst { font-family: var(--sp-font-tekst); }

/* Typografia akapitów (kanwa 2026-10-14): szerokie akapity i podpisy
   galerii wyjustowane, odstępy między wyrazami, bez dzielenia wyrazów.
   Wąskie bloki dostają klasę `lp-waski` (podpisy kroków hero, karty "dla
   kogo", kolumny "Płacisz z góry", pytania, stopka) i wracają do lewej;
   obietnice nie są `.lp-section`, więc reguła ich nie łapie. Na telefonie
   wszystko do lewej (media query niżej). */
.lp-hero p,
.lp-section p,
.lp-section figcaption,
.lp-final p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: manual;
  -webkit-hyphens: manual;
}

.lp-waski p,
.lp-waski figcaption { text-align: start; }

/* ------------------------------------------------------------------ */
/* Nawigacja                                                           */
/* ------------------------------------------------------------------ */

/* Biel, linia 1 px na dole, 72 px wysokości (makieta): lockup przy
   H = 16 px niesie własne pole ochronne (plik 190 x 64 px). */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--sp-biel);
  border-bottom: 1px solid var(--sp-linia);
}

.nav-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 40px;
  height: 72px;
}

/* Pole ochronne pliku (16 px) odejmujemy od lewej, żeby widoczny znak stał
   w linii z treścią sekcji, nie 16 px dalej. */
.nav-brand {
  display: flex;
  align-items: center;
  margin-left: -16px;
}

.nav-brand .logo-mark { height: 64px; width: auto; }

.nav-menu { display: contents; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-space-24);
}

/* Linki 16 px / 500 w atramencie; hover podkreśleniem. */
.nav-links a,
.nav-login {
  font-weight: 500;
  color: var(--sp-atrament);
  white-space: nowrap;
}

.nav-links a:hover,
.nav-login:hover { text-decoration: underline; text-underline-offset: 4px; }

.nav-right {
  display: flex;
  align-items: center;
  gap: var(--sp-space-16);
  margin-left: auto;
}

.nav-cta { height: 44px; padding: 0 18px 0 14px; gap: 10px; font-weight: 600; }

/* Sygnet Mostek w przycisku: kreska rysuje się (pathLength 1), stoi, gaśnie
   i rysuje się od nowa. */
.sp-mostek { width: 20px; height: 20px; flex: none; overflow: visible; }
.sp-mostek path {
  fill: none;
  stroke: currentColor;
  stroke-width: 7;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: sp-draw 6s ease-in-out infinite;
}

@keyframes sp-draw {
  0% { stroke-dashoffset: 1; opacity: 0.5; }
  8% { opacity: 1; }
  45% { stroke-dashoffset: 0; }
  88% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0.5; }
}

.nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 0;
  border-radius: var(--sp-radius-8);
  background: transparent;
  color: var(--sp-atrament);
  cursor: pointer;
}

.nav-burger .icon-x { display: none; }
.nav.open .nav-burger .icon-bars { display: none; }
.nav.open .nav-burger .icon-x { display: block; }

/* ------------------------------------------------------------------ */
/* Hero: lewo tekst i dwa przyciski, prawo scena 4:3 w pętli i trzy    */
/* kroki z kreską w takt                                               */
/* ------------------------------------------------------------------ */

/* Hero na komputerze (2026-10-30): tekst, przyciski i kroki w lewej
   kolumnie, zdjęcia w tle prawej części sekcji, bez ramki, zanikające
   w stronę tekstu. Sekcja ma wysokość ekranu pod paskiem menu (najwyżej
   760 px), więc na laptopie 1536 × 750 kroki z opisami mieszczą się
   w pierwszym ekranie. Poniżej 1024 px zdjęcie wraca do ramki pod tekstem. */
.lp-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: min(calc(100vh - 72px), 760px);
  padding: 56px 0 48px;
  background: var(--sp-biel);
}

.lp-hero-siatka {
  display: grid;
  grid-template-columns: minmax(0, 560px);
}

.lp-hero-tekst {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.lp-hero h1 {
  font-size: var(--sp-text-60);
  line-height: var(--sp-lh-60);
  letter-spacing: -0.025em;
}

.lp-hero-lead {
  max-width: 540px;
  font-size: var(--sp-text-20);
  line-height: 1.5;
}

.lp-hero-akcje {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-space-12);
  margin-top: var(--sp-space-8);
}

/* Formularz POST w roli przycisku (marketing/_akcje): pudełko tylko na
   układ. Przyciski hero i finału mają tę samą szerokość 240 px (kanwa
   2026-10-14). */
.lp-akcja { display: flex; }
.lp-akcja .sp-btn { width: 240px; padding: 0 var(--sp-space-16); }
/* Promowane wejście (agent, Michał 2026-11-03) w pełnym rzędzie nad parą
   DXF + Narysuj sam, na szerokość obu. */
.lp-akcja-szeroka { flex-basis: 100%; }
.lp-akcja-szeroka .sp-btn { width: calc(480px + var(--sp-space-12)); }

.lp-hero-scena {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 58%;
}

/* Scena: trzy klatki jedna na drugiej. Aktywna klatka (`is-aktywna`,
   nadaje hero_slides.js) wjeżdża na wierzch i przenika przez 0,6 s; czas
   jednej klatki (`--lp-klatka-czas`) ustawia ten sam skrypt na
   `.lp-hero-siatka`, żeby stała była w jednym miejscu. Maska wygasza lewe
   38 % sceny do zera, więc zdjęcie przechodzi w biel pod tekstem (kolor
   w masce nie ma znaczenia, liczy się tylko krycie). */
.lp-scena {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--sp-biel);
  -webkit-mask-image: linear-gradient(to right, transparent 0, var(--sp-atrament) 38%);
  mask-image: linear-gradient(to right, transparent 0, var(--sp-atrament) 38%);
}

.lp-scena-k {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--sp-biel);
  opacity: 0;
  transition: opacity 0.6s ease;
}

.lp-scena-k.is-aktywna { opacity: 1; z-index: 1; }

.lp-scena-foto { width: 100%; height: 100%; object-fit: cover; }

/* Trzy kroki jako zakładki (przyciski bez ramek, wygląd jak lista): nad
   tytułem kreska-linia, a na niej niebieski pasek postępu. `data-stan`
   nadaje hero_slides.js: zrobiona = pasek pełny, biegnie = pasek rośnie
   przez czas klatki (animacja lp-licznik, jej koniec przełącza klatkę),
   przyszla = pasek pusty. `is-pauza` na `.lp-hero-siatka` (mysz nad
   krokami, fokus z klawiatury, hero poza oknem) zamraża pasek. */
.lp-hero-kroki {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-space-16);
  margin-top: var(--sp-space-16);
}

.lp-krok {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-space-8);
  margin: 0;
  padding: 10px 0 0;
  border: 0;
  border-top: 2px solid var(--sp-linia);
  border-radius: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--sp-tekst-2);
  cursor: pointer;
  transition: color 150ms ease;
}

.lp-krok:hover,
.lp-krok[aria-selected="true"] { color: var(--sp-atrament); }

.lp-krok:focus-visible { outline-offset: 6px; }

.lp-krok-kreska {
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 2px;
  overflow: hidden;
}

.lp-krok-postep {
  position: absolute;
  inset: 0;
  background: var(--sp-niebieski-600);
  transform: scaleX(0);
  transform-origin: left center;
}

.lp-krok[data-stan="zrobiona"] .lp-krok-postep { transform: scaleX(1); }
.lp-krok[data-stan="biegnie"] .lp-krok-postep { animation: lp-licznik var(--lp-klatka-czas) linear forwards; }
.lp-hero-siatka.is-pauza .lp-krok-postep { animation-play-state: paused; }

.lp-krok strong { font-weight: 700; }
.lp-krok-p { font-size: var(--sp-text-14); line-height: var(--sp-lh-14); color: var(--sp-tekst-2); }

@keyframes lp-licznik {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ------------------------------------------------------------------ */
/* Cztery obietnice                                                    */
/* ------------------------------------------------------------------ */

.lp-obietnice {
  margin-top: 56px;
  background: var(--sp-szron);
}

.lp-obietnice-lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-space-32);
  padding-top: var(--sp-space-48);
  padding-bottom: var(--sp-space-48);
}

.lp-obietnica { display: flex; flex-direction: column; gap: 18px; }
.lp-rys-obietnica { max-width: 220px; margin: 0 auto; }

.lp-obietnica-h {
  font-size: var(--sp-text-24);
  line-height: var(--sp-lh-24);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.lp-obietnica-p { color: var(--sp-tekst-2); }

/* ------------------------------------------------------------------ */
/* Sekcje                                                              */
/* ------------------------------------------------------------------ */

.lp-section {
  padding: 96px 0;
  scroll-margin-top: 72px;
}

.lp-section-paper { background: var(--sp-szron); }

.lp-section h2 {
  font-size: var(--sp-text-48);
  line-height: var(--sp-lh-48);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Przypis pod sekcją: 14 px w tekst-2. */
.lp-przypis {
  margin-top: var(--sp-space-24);
  font-size: var(--sp-text-14);
  line-height: var(--sp-lh-14);
  color: var(--sp-tekst-2);
}

/* ------------------------------------------------------------------ */
/* Z lasera: duże zdjęcie i dwa mniejsze, metki cen                    */
/* ------------------------------------------------------------------ */

.lp-laser { padding-bottom: 88px; }
.lp-laser h2 { max-width: 760px; margin-bottom: 36px; }

.lp-laser-siatka {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-space-24);
}

.lp-laser-male { display: flex; flex-direction: column; gap: var(--sp-space-24); }

.lp-laser-poz { display: flex; flex-direction: column; gap: 14px; }

.lp-laser-foto { position: relative; background: var(--sp-szron); }
.lp-laser-foto img { width: 100%; height: 100%; object-fit: cover; }
.lp-laser-duza .lp-laser-foto { height: 598px; }
.lp-laser-mala .lp-laser-foto { height: 268px; }

/* Metka ceny na zdjęciu: biel, mono, bez promienia. Ramka w kolorze linii,
   bo zdjęcia z testu cięcia (10.2026) mają jasne tło i biel metki w nim ginie. */
.lp-metka {
  position: absolute;
  left: 20px;
  bottom: 20px;
  padding: 10px 14px;
  border: 1px solid var(--sp-linia);
  background: var(--sp-biel);
  font-family: var(--sp-font-tekst);
  font-size: 22px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--sp-atrament);
}

.lp-laser-duza .lp-metka { padding: 12px 16px; font-size: 28px; }
.lp-metka small { font-size: var(--sp-text-14); color: var(--sp-tekst-2); }

.lp-laser-poz figcaption { font-size: var(--sp-text-16); line-height: var(--sp-lh-16); }
.lp-laser-mala figcaption { font-size: 15px; }
.lp-laser-poz figcaption strong { font-weight: 700; }
.lp-laser-poz figcaption span { color: var(--sp-tekst-2); }

/* ------------------------------------------------------------------ */
/* Kto u nas zamawia: na szronie, etykieta, rysunek + tekst, bez kart  */
/* ------------------------------------------------------------------ */

.lp-kogo h2 { margin-bottom: var(--sp-space-12); }
/* Jednozdaniowy wstęp pod H2 sekcji ("Dla kogo", historia), jak wstęp
   "Zanim zamówisz" (2026-10-29). */
.lp-wstep { margin-bottom: var(--sp-space-24); font-size: 17px; line-height: 1.5; color: var(--sp-tekst-2); }

.lp-kogo-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-space-8) var(--sp-space-48);
}

.lp-kogo-poz {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 0;
}

/* Etykieta wejścia (Naprawiam, Spawam i buduję...): niebieski tytuł 24/800
   nad rysunkiem - zamiast pastylki (kanwa 2026-10-14). Etykieta jest
   najwyższym stopniem w wejściu, h4 pod nią mniejszy (2026-10-29). */
.lp-kogo-etykieta {
  font-size: var(--sp-text-24);
  line-height: var(--sp-lh-24);
  letter-spacing: -0.01em;
  color: var(--sp-niebieski-600);
}

/* Rysunek w kolumnie 200 px, wyśrodkowany w pionie względem tekstu. */
.lp-kogo-cialo {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}

.lp-kogo-tekst { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

/* Zdanie wejścia jako cytat klienta: polski cudzysłów i kursywa (2026-10-29).
   Archivo nie ma ładowanego kroju italic - przeglądarka pochyla prosty. */
.lp-kogo-poz h4 {
  font-size: var(--sp-text-20);
  line-height: 1.3;
  font-weight: 700;
  font-style: italic;
  quotes: "„" "”";
}
.lp-kogo-poz h4::before { content: open-quote; }
.lp-kogo-poz h4::after { content: close-quote; }

.lp-kogo-poz p { color: var(--sp-tekst-2); }

/* Plakietka z przykładem: biel z obrysem linia, styl techniczny 13 px, bez promienia. */
.lp-plakietka {
  margin-top: 6px;
  padding: var(--sp-space-8) var(--sp-space-12);
  border: 1px solid var(--sp-linia);
  background: var(--sp-biel);
  font-family: var(--sp-font-tekst);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  line-height: var(--sp-lh-14);
  color: var(--sp-atrament);
}

/* ------------------------------------------------------------------ */
/* Płacisz z góry: jedyna niebieska płaszczyzna                        */
/* ------------------------------------------------------------------ */

.lp-pewnosc {
  background: var(--sp-niebieski-600);
  color: var(--sp-biel);
}

.lp-pewnosc :focus-visible { outline-color: var(--sp-biel); }
.lp-pewnosc h2 { color: var(--sp-biel); }

.lp-pewnosc-lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-top: 56px;
}

/* Zdjęcie z hali nad tekstem: zdjęcia są poziome, więc stoją w całości
   w kadrze 4:3 (cover, punkt kadrowania z `focus`), z cieniem, który
   odrywa je od niebieskiej płaszczyzny. Tekst pod spodem na niebieskim. */
.lp-pewnosc-poz {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-24);
}

.lp-pewnosc-foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--sp-radius-12);
  box-shadow: 0 16px 40px rgba(20, 33, 61, 0.28);
}

.lp-pewnosc-tekst { display: flex; flex-direction: column; gap: 14px; }

.lp-pewnosc-poz h3 {
  font-size: var(--sp-text-24);
  line-height: var(--sp-lh-32);
  font-weight: 700;
  color: var(--sp-biel);
}

.lp-pewnosc-poz p { line-height: 1.55; color: var(--sp-niebieski-100); }
.lp-pewnosc-mail { color: var(--sp-biel); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* ------------------------------------------------------------------ */
/* Historia: cytat jako H2, zdjęcie i dwa akapity                      */
/* ------------------------------------------------------------------ */

.lp-historia h2 { margin-bottom: var(--sp-space-12); }
.lp-historia .lp-wstep { margin-bottom: 36px; }

.lp-historia-siatka {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-space-48);
  align-items: center;
}

/* Stos blach bez ramki: zdjęcie ma białe tło, multiply zlewa je z sekcją.
   Obraz jest szerszy niż kolumna i przyklejony do jej prawej krawędzi, więc
   wysuwa się w lewo poza treść; na węższych ekranach ucina go krawędź okna
   (body ma overflow-x: clip). Obraz zostaje w przepływie, więc figura ma
   jego wysokość i stos nie nachodzi na wstęp ani na sekcję niżej. Bez
   isolation na figurze: multiply musi mieszać z tłem strony. Zdjęcie ma
   z prawej ok. 12% pustej bieli, więc dosuwamy je o --lp-stos-dosuw w odstęp
   siatki, żeby stos stał bliżej tekstu. Cień leży pod dolnymi płytkami
   (ok. 25-75% szerokości zdjęcia od lewej). */
.lp-historia-foto {
  --lp-stos: min(720px, calc(100% + max((100vw - var(--sp-container)) / 2, var(--sp-space-24)) + 160px));
  --lp-stos-dosuw: 64px;
  position: relative;
  margin: 0;
}
.lp-historia-foto img {
  position: relative;
  width: var(--lp-stos);
  max-width: none;
  margin-left: calc(100% - var(--lp-stos) + var(--lp-stos-dosuw));
  pointer-events: none;
  mix-blend-mode: multiply;
}
.lp-historia-foto::after {
  content: "";
  position: absolute;
  right: calc(var(--lp-stos) * 0.25 - var(--lp-stos-dosuw));
  bottom: -16px;
  width: calc(var(--lp-stos) * 0.5);
  height: 40px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sp-atrament) 14%, transparent), transparent);
  z-index: -1;
}

.lp-historia-tekst { display: flex; flex-direction: column; gap: var(--sp-space-24); }
.lp-historia-tekst p { font-size: var(--sp-text-18); line-height: 1.55; }
.lp-podpis { font-size: 15px; color: var(--sp-tekst-2); }

/* ------------------------------------------------------------------ */
/* Zanim zamówisz: wstęp z przyciskiem i sześć białych kafli           */
/* ------------------------------------------------------------------ */

.lp-pytania-siatka {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--sp-space-48);
  align-items: start;
}

.lp-pytania-wstep { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.lp-pytania-wstep p { font-size: 17px; line-height: 1.5; color: var(--sp-tekst-2); }
.lp-pytania-wstep .sp-btn { font-weight: 600; }

.lp-pytania-kafle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-space-16);
}

.lp-kafel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-8);
  padding: var(--sp-space-24);
  border-radius: var(--sp-radius-12);
  background: var(--sp-biel);
}

.lp-kafel h3 { font-size: var(--sp-text-20); line-height: var(--sp-lh-20); font-weight: 700; }
.lp-kafel p { color: var(--sp-tekst-2); }

/* ------------------------------------------------------------------ */
/* Finał: na błękicie, lewo tekst i przyciski, prawo karta ze sceną    */
/* ------------------------------------------------------------------ */

.lp-final {
  padding: 96px 0;
  background: var(--sp-niebieski-100);
  scroll-margin-top: 72px;
}

.lp-final-siatka {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-space-48);
  align-items: center;
}

.lp-final-tekst {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-24);
}

.lp-final h2 {
  font-size: var(--sp-text-48);
  line-height: var(--sp-lh-48);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.lp-final-lead {
  max-width: 520px;
  font-size: var(--sp-text-20);
  line-height: 1.5;
}

.lp-final-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-space-12);
  margin-top: var(--sp-space-8);
}

/* Biała karta 560 x 360 (viewBox) ze sceną: kartka w kratkę, na niej
   ołówek obrysowuje L-kę, potem wypełnienie, otwory, wymiary i metka. */
.lp-final-karta { min-width: 0; }
.lp-rys-final { width: 100%; }

/* Scena finału: pętla 8 s. Obrys rysuje się przez pathLength=1
   i stroke-dashoffset, kolejne warstwy wchodzą w stałych procentach pętli,
   metka wyskakuje z lekkim przestrzeleniem (cubic-bezier), ołówek jedzie
   po obrysie i znika, gdy obrys jest gotowy. */
.fn-outline {
  stroke-dasharray: 1;
  animation: fn-draw 8s linear infinite;
}

.fn-fill { opacity: 0; animation: fn-fill-seq 8s linear infinite; }
.fn-holes { opacity: 0; animation: fn-holes-seq 8s linear infinite; }
.fn-dims { opacity: 0; animation: fn-dims-seq 8s linear infinite; }

.fn-price {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 440px 68px;
  animation: fn-price-seq 8s cubic-bezier(0.2, 0.9, 0.3, 1.3) infinite;
}

.fn-pencil { animation: fn-pencil 8s linear infinite; }

@keyframes fn-draw {
  0% { stroke-dashoffset: 1; }
  40% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}

@keyframes fn-fill-seq {
  0%, 42% { opacity: 0; }
  50%, 100% { opacity: 1; }
}

@keyframes fn-holes-seq {
  0%, 52% { opacity: 0; }
  58%, 100% { opacity: 1; }
}

@keyframes fn-dims-seq {
  0%, 60% { opacity: 0; }
  66%, 100% { opacity: 1; }
}

@keyframes fn-price-seq {
  0%, 70% { opacity: 0; transform: scale(0.6); }
  78%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes fn-pencil {
  0% { transform: translate(120px, 110px); opacity: 1; }
  10% { transform: translate(120px, 290px); }
  22% { transform: translate(420px, 290px); }
  26% { transform: translate(420px, 200px); }
  33% { transform: translate(230px, 200px); }
  36% { transform: translate(230px, 110px); }
  40% { transform: translate(120px, 110px); opacity: 1; }
  44% { opacity: 0; }
  100% { transform: translate(120px, 110px); opacity: 0; }
}

/* ------------------------------------------------------------------ */
/* Stopka: atrament                                                    */
/* ------------------------------------------------------------------ */

.footer {
  padding: var(--sp-space-64) 0 var(--sp-space-48);
  background: var(--sp-atrament);
  color: var(--sp-biel);
}

.footer :focus-visible { outline-color: var(--sp-biel); }

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 6fr) repeat(3, minmax(0, 2fr));
  column-gap: 40px;
  row-gap: var(--sp-space-48);
}

.footer-brand-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

/* Stopka: H = 12 px -> plik 48 px, wersja biała. Pole pliku (12 px)
   odejmujemy od lewej jak w nawigacji. */
.footer-brand-col .logo-mark {
  height: 48px;
  width: auto;
  margin-left: -12px;
}

/* Kontakt: duży adres 28/800 w bieli, pod nim dopisek w niebieskim-200
   (kanwa 2026-10-14). Danych rejestrowych w stopce nie ma - link "Dane
   spółki" prowadzi do § 1 regulaminu. */
.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.footer-mail {
  font-size: 28px;
  line-height: var(--sp-lh-32);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--sp-biel);
  overflow-wrap: anywhere;
}

.footer-mail:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-contact span { font-size: 15px; line-height: 1.5; color: var(--sp-niebieski-200); }

/* Ikony kont spółki (shared/_social_links, social.css): kolor jak linki
   kolumn, cofnięte o 10 px, żeby ikona stała na linii adresu nad nią. */
.footer-social { margin-left: -10px; }
.footer-social .social-link { color: var(--sp-niebieski-200); }
.footer-social .social-link:hover { color: var(--sp-biel); }

.footer-col h3 {
  font-size: var(--sp-text-14);
  line-height: var(--sp-lh-14);
  font-weight: 700;
  color: var(--sp-biel);
}

.footer-col ul { display: grid; gap: var(--sp-space-12); margin-top: var(--sp-space-12); }
.footer-col a { color: var(--sp-niebieski-200); }
.footer-col a:hover { color: var(--sp-biel); text-decoration: underline; text-underline-offset: 4px; }

/* Dane spółki (art. 206 § 1 KSH, 2026-10-27): drobna linia nad dolnym pasem. */
.footer-dane {
  margin: var(--sp-space-32) 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--lp-biel-64);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-space-8) var(--sp-space-16);
  margin-top: var(--sp-space-32);
  padding-top: 20px;
  border-top: 1px solid var(--lp-biel-16);
  font-size: 13px;
  line-height: var(--sp-lh-14);
  color: var(--lp-biel-64);
}

.footer-cookie-link { padding: 0; border: 0; background: none; color: var(--lp-biel-64); cursor: pointer; }
.footer-cookie-link:hover { color: var(--sp-biel); }

/* ------------------------------------------------------------------ */
/* Powiększenie zdjęcia (marketing/_powiekszenie, zdjecia_powiekszenie.js) */
/* ------------------------------------------------------------------ */

/* Miniatura: link do JPG-a na całą ramkę zdjęcia. Fokus rysujemy do środka,
   bo ramki zdjęć (.kb-foto-kadr) przycinają wszystko, co wystaje. */
.lp-powieksz { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.lp-powieksz:focus-visible { outline-offset: -4px; }
.lp-metka { pointer-events: none; }

/* Okno na cały ekran: pełny atrament (strona pod spodem nie prześwituje), zdjęcie w całości
   (contain, bez kadrowania miniatury), podpis pod nim. Pasek u góry:
   strzałki po lewej (na szerokim ekranie stoją przy krawędziach zdjęcia),
   "Zamknij" po prawej. */
:root:has(.lp-powiekszenie[open]) { overflow: hidden; }

.lp-powiekszenie {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--sp-atrament);
  color: var(--sp-biel);
  overscroll-behavior: contain;
}

.lp-powiekszenie[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.lp-powiekszenie::backdrop { background: transparent; }

.lp-powiekszenie-pasek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-space-16);
  padding: var(--sp-space-16) var(--sp-space-24);
}

.lp-powiekszenie-strzalki { display: flex; gap: var(--sp-space-8); }

.lp-powiekszenie-zamknij,
.lp-powiekszenie-strzalka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-space-8);
  min-height: 44px;
  border: 0;
  border-radius: var(--sp-radius-8);
  background: var(--lp-biel-16);
  color: var(--sp-biel);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--sp-ruch-kolor);
}

.lp-powiekszenie-zamknij { margin-left: auto; padding: 0 var(--sp-space-16); }
.lp-powiekszenie-strzalka { width: 56px; height: 56px; }
.lp-powiekszenie-strzalka[hidden] { display: none; }
.lp-powiekszenie-zamknij:hover,
.lp-powiekszenie-strzalka:hover { background: color-mix(in srgb, var(--sp-biel) 28%, transparent); }
.lp-powiekszenie :focus-visible { outline-color: var(--sp-biel); }

.lp-powiekszenie-figura {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  gap: var(--sp-space-16);
  min-height: 0;
  padding: 0 104px var(--sp-space-24);
}

.lp-powiekszenie-obraz {
  align-self: center;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--sp-radius-8);
}

.lp-powiekszenie-podpis {
  max-width: 760px;
  font-size: var(--sp-text-16);
  line-height: var(--sp-lh-16);
  text-align: center;
  color: var(--sp-biel);
}

.lp-powiekszenie-podpis strong { display: block; font-weight: 700; }

/* Strzałki na szerokim ekranie: w połowie wysokości przy krawędziach okna. */
@media (min-width: 768px) {
  .lp-powiekszenie-strzalka {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
  }

  .lp-powiekszenie-wstecz { left: var(--sp-space-24); }
  .lp-powiekszenie-dalej { right: var(--sp-space-24); }
}

@media (max-width: 767.98px) {
  .lp-powiekszenie-pasek { padding: var(--sp-space-12) var(--sp-space-16); }
  .lp-powiekszenie-strzalka { width: 44px; height: 44px; }
  .lp-powiekszenie-figura { padding: 0 0 var(--sp-space-16); }
  .lp-powiekszenie-obraz { border-radius: 0; }
  .lp-powiekszenie-podpis { padding: 0 var(--sp-space-16); font-size: 15px; line-height: 1.45; }
}

/* ------------------------------------------------------------------ */
/* Responsywność                                                       */
/* ------------------------------------------------------------------ */

@media (max-width: 1199.98px) {
  .lp-hero h1 { font-size: var(--sp-text-48); line-height: var(--sp-lh-48); }
  .lp-laser-duza .lp-laser-foto { height: 520px; }
  .lp-laser-mala .lp-laser-foto { height: 229px; }
  .lp-kogo-lista { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lp-kogo-poz { padding: 20px 0; }
  .lp-final-siatka { gap: var(--sp-space-32); }
  .lp-pewnosc-lista { gap: var(--sp-space-32); }
}

@media (max-width: 1023.98px) {
  .nav-burger { display: inline-flex; }

  /* Warstwa nad treścią (menu mobile): linki, logowanie i przycisk
     jedno pod drugim. */
  .nav-menu {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: var(--sp-space-16);
    padding: var(--sp-space-8) var(--sp-space-24) var(--sp-space-24);
    background: var(--sp-biel);
    border-bottom: 1px solid var(--sp-linia);
    box-shadow: var(--sp-shadow);
  }

  .nav.open .nav-menu { display: flex; }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-links a,
  .nav-login {
    display: flex;
    align-items: center;
    height: 48px;
    border-bottom: 1px solid var(--sp-linia);
  }

  .nav-right {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
  }

  .nav-right .sp-btn { width: 100%; height: 48px; margin-top: var(--sp-space-16); }

  /* Hero jedna kolumna: tekst z krokami, pod nim scena w ramce 4:3. */
  .lp-hero { display: block; min-height: 0; padding: var(--sp-space-48) 0 var(--sp-space-24); }
  .lp-hero-siatka { grid-template-columns: minmax(0, 1fr); gap: var(--sp-space-32); }
  .lp-hero-scena { position: static; width: auto; }
  .lp-scena {
    position: relative;
    inset: auto;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--sp-linia);
    border-radius: 14px;
    box-shadow: var(--lp-cien-scena);
    -webkit-mask-image: none;
    mask-image: none;
  }

  .lp-obietnice-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-laser-siatka { grid-template-columns: minmax(0, 1fr); }
  .lp-laser-duza .lp-laser-foto, .lp-laser-mala .lp-laser-foto { height: auto; aspect-ratio: 4 / 3; }
  .lp-pewnosc-lista { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: var(--sp-space-32); }
  .lp-historia-siatka { grid-template-columns: minmax(0, 1fr); gap: var(--sp-space-32); }
  .lp-historia-foto img { width: 100%; margin-left: 0; }
  .lp-historia-foto::after { display: none; }
  .lp-pytania-siatka { grid-template-columns: minmax(0, 1fr); }
  .lp-pytania-kafle { grid-template-columns: minmax(0, 1fr); }

  .footer-top { grid-template-columns: 1fr 1fr; column-gap: var(--sp-space-16); row-gap: var(--sp-space-24); }
  .footer-brand-col { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
  .mw-wrap { padding: 0 20px; }

  .nav-inner { height: 60px; }
  .nav-brand .logo-mark { height: 52px; }
  .nav-brand { margin-left: -13px; }
  .nav-menu { top: 60px; }

  /* Telefon (makieta Mobile 390): H1 36 px, lead 17 px, przyciski jeden pod
     drugim na całą szerokość, pod nimi sama pierwsza klatka (laptop ze
     Szkicownikiem) bez pętli i bez kroków. */
  .lp-hero { padding: 40px 0 var(--sp-space-32); }
  .lp-hero-siatka { gap: 20px; }
  .lp-hero-tekst { gap: 20px; }
  .lp-hero h1 { font-size: 36px; line-height: 1.08; }
  .lp-hero-lead { font-size: 17px; }
  .lp-hero-akcje { flex-direction: column; gap: 10px; margin-top: 0; }
  .lp-akcja, .lp-akcja .sp-btn { width: 100%; }
  .lp-akcja-szeroka { flex-basis: auto; }
  .lp-hero-scena { margin-top: var(--sp-space-12); }
  .lp-scena { border-radius: var(--sp-radius-12); box-shadow: 0 16px 40px rgba(20, 33, 61, 0.1); }
  .lp-scena-k { position: static; opacity: 1; transition: none; }
  .lp-scena-k2, .lp-scena-k3 { display: none; }
  .lp-hero-kroki { display: none; }

  .lp-obietnice { margin-top: 0; }
  .lp-obietnice-lista { gap: 28px var(--sp-space-16); padding-top: var(--sp-space-32); padding-bottom: var(--sp-space-32); }
  .lp-obietnica { gap: 10px; }
  .lp-rys-obietnica { max-width: 150px; margin: 0; }
  .lp-obietnica-h { font-size: 19px; line-height: 1.2; }
  .lp-obietnica-p { font-size: var(--sp-text-14); line-height: 1.45; }

  .lp-section { padding: 56px 0; scroll-margin-top: 60px; }
  .lp-section h2 { font-size: var(--sp-text-32); line-height: 1.1; }
  .lp-przypis { font-size: 13px; }

  .lp-laser { padding-bottom: 56px; }
  .lp-laser h2 { margin-bottom: 20px; }
  .lp-laser-siatka, .lp-laser-male { gap: 20px; }
  .lp-laser-poz { gap: 10px; }
  .lp-laser-duza .lp-laser-foto { aspect-ratio: auto; height: 260px; }
  .lp-laser-mala .lp-laser-foto { aspect-ratio: auto; height: 220px; }
  .lp-metka { left: 14px; bottom: 14px; font-size: 20px; }
  .lp-laser-duza .lp-metka { padding: 10px 14px; font-size: 22px; }
  .lp-metka small { font-size: 13px; }
  .lp-laser-poz figcaption, .lp-laser-mala figcaption { font-size: 15px; }

  .lp-kogo { padding-bottom: var(--sp-space-32); }
  .lp-kogo h2 { margin-bottom: var(--sp-space-8); }
  .lp-wstep { margin-bottom: var(--sp-space-12); font-size: 15px; }
  .lp-kogo-poz { gap: 6px; padding: 20px 0; }
  .lp-kogo-etykieta { font-size: var(--sp-text-20); line-height: var(--sp-lh-20); }
  .lp-kogo-cialo { grid-template-columns: minmax(0, 1fr); gap: var(--sp-space-8); }
  .lp-rys-kogo { max-width: 180px; }
  .lp-kogo-poz h4 { font-size: 17px; line-height: 1.3; }
  .lp-kogo-poz p { font-size: 15px; }
  .lp-plakietka { display: none; }

  .lp-pewnosc-lista { gap: 28px; margin-top: 28px; }
  .lp-pewnosc-poz { gap: var(--sp-space-16); }
  .lp-pewnosc-tekst { gap: 10px; }
  .lp-pewnosc-poz h3 { font-size: 21px; line-height: 1.25; }
  .lp-pewnosc-poz p { font-size: 15px; }

  .lp-historia h2 { margin-bottom: var(--sp-space-8); }
  .lp-historia .lp-wstep { margin-bottom: 20px; }
  .lp-historia-tekst p { font-size: var(--sp-text-16); }

  .lp-pytania-siatka { gap: 22px; }
  .lp-pytania-wstep { gap: 22px; }
  .lp-pytania-wstep p { font-size: 15px; }
  /* Przycisk do bazy wiedzy pod kaflami (makieta Mobile). */
  .lp-pytania-wstep .sp-btn { order: 3; margin-top: 0; }
  .lp-pytania-siatka { display: flex; flex-direction: column; }
  .lp-pytania-wstep { display: contents; }
  .lp-pytania-kafle { gap: var(--sp-space-16); }
  .lp-kafel { padding: 18px; gap: 6px; }
  .lp-kafel h3 { font-size: 17px; line-height: var(--sp-lh-20); }
  .lp-kafel p { font-size: 15px; }

  /* Finał (makieta Mobile): tytuł, zdanie, karta, przyciski pełnej
     szerokości - blok tekstu rozpada się na elementy siatki (contents),
     żeby karta weszła między zdanie a przyciski. */
  .lp-final { padding: 56px 0; scroll-margin-top: 60px; }
  .lp-final-siatka { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .lp-final-tekst { display: contents; }
  .lp-final-karta { order: 2; }
  .lp-final-actions { order: 3; flex-direction: column; gap: 10px; margin-top: 0; }
  .lp-final h2 { font-size: 36px; line-height: 1.08; letter-spacing: -0.025em; }
  .lp-final-lead { max-width: none; font-size: 17px; line-height: 1.5; }

  /* Cały układ na telefonie do lewej. */
  .lp-hero p, .lp-section p, .lp-section figcaption, .lp-final p { text-align: start; }

  /* Stopka (makieta Mobile): logo i adres na całą szerokość, kolumny
     linków w siatce 2 x N. */
  .footer { padding: 40px 0 var(--sp-space-32); }
  .footer-top { grid-template-columns: 1fr 1fr; column-gap: var(--sp-space-16); row-gap: var(--sp-space-24); }
  .footer-brand-col { gap: 28px; }
  .footer-mail { font-size: var(--sp-text-24); line-height: var(--sp-lh-24); }
  .footer-contact span { font-size: var(--sp-text-14); }
  .footer-col ul { gap: 10px; margin-top: var(--sp-space-8); }
  .footer-bottom { margin-top: 20px; padding-top: var(--sp-space-16); font-size: var(--sp-text-12); }
}

/* Klient powiedział wprost, że nie chce ruchu - zostaje klatka statyczna:
   pierwsza klatka sceny z pełnym paskiem nad krokiem 1 (hero_slides.js nie
   przełącza sam, zostaje klik w zakładkę), sygnet narysowany, w finale
   gotowa L-ka z otworami, wymiarami i metką, bez ołówka. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }

  .lp-krok-postep, .sp-mostek path { animation: none !important; }
  .lp-krok[data-stan="biegnie"] .lp-krok-postep { transform: scaleX(1); }
  .sp-mostek path { stroke-dashoffset: 0; }

  .fn-outline, .fn-fill, .fn-holes, .fn-dims, .fn-price, .fn-pencil {
    animation: none !important;
    opacity: 1;
    stroke-dashoffset: 0;
    transform: none;
  }
  .fn-pencil { opacity: 0; }
}