/* ==========================================================================
   karolostasz.pl - arkusz wspólny (strona główna i podstrony)
   Design system "Noc z kropką" (decyzja D1', 27.09.2026)
   1. Fonty  2. Tokeny: noc (domyślna), dzień "słońce", przebrania przymierzalni
   3. Podstawy  4. Znak i nagłówek  5. Przyciski i pola  6. Intro i skan
   7. Sekcje głównej  8. Podstrony  9. Stopka i pasek kontaktu  10. Ograniczony ruch
   Zasady: kolory tylko z tokenów; odstępy z tokenów --o-*; promień 4-6 px
   (okrągła jest tylko kropka marki); ruch tylko transformacją i clip-path;
   zero atrybutów style="" w HTML (CSP bez unsafe-inline).
   ========================================================================== */

/* ---------- 1. Fonty (subset PL, osie zmienne) ---------- */
@font-face { font-family: 'Big Shoulders Display'; src: url('/assets/fonts/bigshoulders-pl.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; src: url('/assets/fonts/atkinson-pl.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
/* zastępcze kroje dopasowane proporcjami (size-adjust liczony fontTools z plików fontów): po wczytaniu właściwego fontu układ nie skacze (CLS);
   Arial, Helvetica, Liberation Sans i Arimo mają te same szerokości znaków, więc jedne ustawienia pasują do Windows, Maca, iPhone'a i Linuksa */
@font-face { font-family: 'Atkinson zapas'; src: local('Arial'), local('ArialMT'), local('Helvetica'), local('Liberation Sans'), local('Arimo'); font-weight: 200 800; size-adjust: 98.43%; ascent-override: 99.97%; descent-override: 32.1%; line-gap-override: 0%; }
@font-face { font-family: 'Big Shoulders zapas'; src: local('Arial Narrow Bold'), local('ArialNarrow-Bold'), local('Liberation Sans Narrow Bold'); font-weight: 100 900; size-adjust: 85.33%; ascent-override: 115.32%; descent-override: 24.96%; line-gap-override: 0%; }

/* ---------- 2. Tokeny ---------- */
:root {
  color-scheme: dark;
  /* kolor: noc (granat + błękit) */
  --tlo: #070b14;
  --tlo-2: #0d1524;
  --powierzchnia: #eef3f9;
  --papier-tekst: #0a1426;
  --papier-tekst-2: #45556d;
  --tekst: #eaf1fb;
  --tekst-2: #a9b7cc;
  --tekst-3: #7b8aa3;
  --linia: rgba(170, 205, 255, .13);
  --linia-2: rgba(170, 205, 255, .3);
  --akcent: #56c8ff;
  --akcent-2: #8ad9ff;
  --akcent-tekst: #04101f;
  --akcent-na-tle: #56c8ff;
  --szyld: #56c8ff;
  --szyld-tekst: #04101f;
  --kropka: #56c8ff;
  --wyr-tekst: #56c8ff;
  --wyr-tlo: transparent;
  --fokus: #56c8ff;
  --blad: #ff8a80;
  --ok: #7ee2a8;
  --scena: var(--tlo);
  --scena-tekst: var(--tekst);
  --scena-tekst-2: var(--tekst-2);
  --scena-linia: var(--linia);
  --duo-cien: #070b14;
  --duo-swiatlo: #56c8ff;
  --tel-ramka: #03060c;
  /* typografia: płynna skala (390 px -> 1440 px) */
  --font-tekst: 'Atkinson Hyperlegible Next', 'Atkinson zapas', system-ui, sans-serif;
  --font-naglowek: 'Big Shoulders Display', 'Big Shoulders zapas', 'Arial Narrow', sans-serif;
  --t-h1: clamp(3.4rem, 1.2rem + 8.2vw, 8.6rem);
  --t-h2: clamp(2.6rem, 1.6rem + 4.2vw, 5.4rem);
  --t-h3: clamp(1.55rem, 1.2rem + 1.3vw, 2.4rem);
  --t-lead: clamp(1.1rem, 1rem + .4vw, 1.3rem);
  --t-tekst: 1.0625rem;
  --t-maly: .9375rem;
  --t-drobny: .8125rem;
  /* odstępy */
  --o-1: .5rem;
  --o-2: 1rem;
  --o-3: 1.5rem;
  --o-4: 2rem;
  --o-sekcja: clamp(4rem, 2.5rem + 6vw, 8rem);
  --szer-max: 82rem;
  --margines: clamp(1rem, .4rem + 3vw, 2.75rem);
  /* kształt i ruch */
  --r-1: 4px;
  --r-2: 6px;
  --krzywa: cubic-bezier(.2,.7,.2,1);
  --sprezyna: cubic-bezier(.34,1.56,.64,1);
  --jazda: cubic-bezier(.65,0,.35,1);
  --focus-ring: 0 0 0 2px var(--tlo), 0 0 0 4px var(--fokus);
}
/* dzień "słońce": klasa z glowa.js (pamięć wyboru) albo samo radio bez JS */
:root.dzien, :root:has(#m-dzien:checked) {
  color-scheme: light;
  --tlo: #f4f5f7;
  --tlo-2: #e8ebef;
  --powierzchnia: #ffffff;
  --papier-tekst: #111318;
  --papier-tekst-2: #4a515d;
  --tekst: #111318;
  --tekst-2: #3f4652;
  --tekst-3: #5e6572;
  --linia: rgba(17, 19, 24, .12);
  --linia-2: rgba(17, 19, 24, .28);
  --akcent: #ffc21a;
  --akcent-2: #ffd04d;
  --akcent-tekst: #111318;
  --akcent-na-tle: #111318;
  --szyld: #ffc21a;
  --szyld-tekst: #111318;
  --kropka: #f5a300;
  --wyr-tekst: #111318;
  --wyr-tlo: #ffc21a;
  --fokus: #111318;
  --blad: #b3261e;
  --ok: #17693f;
  --scena: #111318;
  --scena-tekst: #ffffff;
  --scena-tekst-2: rgba(255, 255, 255, .8);
  --scena-linia: rgba(255, 255, 255, .2);
  --duo-cien: #111318;
  --duo-swiatlo: #ffc21a;
  --tel-ramka: #111318;
}
/* przebranie strony w branżę (przymierzalnia, tylko po interakcji: klasa .przebrana z JS) */
:root.przebrana:has(#b-pralnia:checked, #b-salon:checked, #b-budowa:checked, #b-gabinet:checked, #b-warsztat:checked) { --szyld: var(--akcent); --szyld-tekst: var(--akcent-tekst); --kropka: var(--akcent-na-tle); --wyr-tekst: var(--akcent-na-tle); --wyr-tlo: transparent; --fokus: var(--akcent); --scena: var(--tlo); --scena-tekst: var(--tekst); --scena-tekst-2: var(--tekst-2); --scena-linia: var(--linia); --duo-cien: var(--papier-tekst); --duo-swiatlo: var(--powierzchnia); --tel-ramka: #0b0b0b; }
:root.przebrana:has(#b-pralnia:checked)  { color-scheme: light; --tlo: #eef5f6; --tlo-2: #e0ecee; --powierzchnia: #ffffff; --papier-tekst: #0f2e38; --papier-tekst-2: #45616a; --tekst: #0f2e38; --tekst-2: #3d5a63; --tekst-3: #5b747c; --linia: rgba(15,46,56,.14); --linia-2: rgba(15,46,56,.3); --akcent: #0f6e84; --akcent-2: #0c5c6e; --akcent-tekst: #ffffff; --akcent-na-tle: #0f6e84; --blad: #b3261e; --ok: #17693f; }
:root.przebrana:has(#b-salon:checked)    { color-scheme: dark; --tlo: #1f1718; --tlo-2: #2a2021; --powierzchnia: #f6ece6; --papier-tekst: #1f1718; --papier-tekst-2: #5d4a47; --tekst: #f7ece6; --tekst-2: #d7c3ba; --tekst-3: #b09d95; --linia: rgba(247,236,230,.14); --linia-2: rgba(247,236,230,.3); --akcent: #e8b4a0; --akcent-2: #f2c7b6; --akcent-tekst: #1f1718; --akcent-na-tle: #e8b4a0; }
:root.przebrana:has(#b-budowa:checked)   { color-scheme: light; --tlo: #f0ede4; --tlo-2: #e4dfd2; --powierzchnia: #1b1b18; --papier-tekst: #f0ede4; --papier-tekst-2: #c9c4b6; --tekst: #1b1b18; --tekst-2: #4d4b44; --tekst-3: #6b685f; --linia: rgba(27,27,24,.14); --linia-2: rgba(27,27,24,.3); --akcent: #f2b705; --akcent-2: #ffc72c; --akcent-tekst: #1b1b18; --akcent-na-tle: #7d5b00; --blad: #b3261e; --ok: #17693f; }
:root.przebrana:has(#b-gabinet:checked)  { color-scheme: light; --tlo: #eaf2ed; --tlo-2: #dce9e1; --powierzchnia: #ffffff; --papier-tekst: #173127; --papier-tekst-2: #4a6358; --tekst: #173127; --tekst-2: #3f5a4e; --tekst-3: #5c7569; --linia: rgba(23,49,39,.14); --linia-2: rgba(23,49,39,.3); --akcent: #2f7a5b; --akcent-2: #276a4e; --akcent-tekst: #ffffff; --akcent-na-tle: #2f7a5b; --blad: #b3261e; --ok: #17693f; }
:root.przebrana:has(#b-warsztat:checked) { color-scheme: dark; --tlo: #131618; --tlo-2: #1b1f22; --powierzchnia: #e9ecef; --papier-tekst: #131618; --papier-tekst-2: #4c555c; --tekst: #e9ecef; --tekst-2: #b6bec5; --tekst-3: #8d969d; --linia: rgba(233,236,239,.13); --linia-2: rgba(233,236,239,.28); --akcent: #e0442f; --akcent-2: #f05a44; --akcent-tekst: #ffffff; --akcent-na-tle: #ff7a66; }

/* ---------- 3. Podstawy ---------- */
/* szerokości kolumn tekstu w em (dawne ch przeliczone przez szerokość zera Atkinsona: 0,648 em), bo ch zależy od fontu i skakało przy podmianie fontu */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body { margin: 0; background: var(--tlo); color: var(--tekst); font: 400 var(--t-tekst)/1.6 var(--font-tekst); overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-1); }
h1, h2, h3 { text-wrap: balance; }
.w { width: min(100% - 2 * var(--margines), var(--szer-max)); margin-inline: auto; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.pomin-link { position: absolute; left: var(--margines); top: -4rem; z-index: 120; padding: .7rem 1rem; background: var(--akcent); color: var(--akcent-tekst); font-weight: 700; border-radius: var(--r-1); }
.pomin-link:focus-visible { top: .75rem; }
.h2 { margin: 0; font: 900 var(--t-h2)/.9 var(--font-naglowek); text-transform: uppercase; }
.link { color: var(--akcent-na-tle); font-weight: 700; text-underline-offset: .2em; text-decoration-color: var(--kropka); text-decoration-thickness: 2px; }

/* ---------- 4. Znak "KO." i nagłówek ---------- */
.znak-ko { display: inline-flex; align-items: baseline; font: 900 2rem/1 var(--font-naglowek); text-transform: uppercase; letter-spacing: -.005em; }
.znak-ko b { display: inline-block; font-weight: inherit; line-height: 1; }
.znak-ko i { display: inline-block; width: .17em; height: .17em; margin-left: .03em; border-radius: 50%; background: var(--kropka); }
.gora .w { display: flex; justify-content: space-between; align-items: center; gap: .75rem 1.5rem; min-height: 4.25rem; border-bottom: 1px solid var(--linia); }
.marka { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.marka-tekst { font: 800 1.2rem/1 var(--font-naglowek); text-transform: uppercase; letter-spacing: .04em; color: var(--tekst-2); padding-top: .12em; }
.marka:hover .znak-ko i { animation: hop 560ms var(--sprezyna); }
@keyframes hop { 40% { transform: translateY(-.32em); } }
.nav { display: none; gap: 1.6rem; font-size: var(--t-maly); color: var(--tekst-2); }
.nav a { text-decoration: none; }
.nav a:hover { color: var(--tekst); }
.gora-prawa { display: flex; align-items: center; gap: .75rem; }
.gora-tel { font: 700 1.3rem/1 var(--font-naglowek); letter-spacing: .03em; text-decoration: none; color: var(--akcent-na-tle); display: inline-flex; gap: .45rem; align-items: center; }
.gora-tel svg, .omnie-podpis a svg { color: var(--kropka); }
@media (min-width: 64rem) { .nav { display: flex; } }
@media (max-width: 29.99rem) {
  .gora-tel-nr { display: none; }
  .gora-tel { width: 2.75rem; height: 2.75rem; justify-content: center; border: 1.5px solid var(--linia-2); border-radius: var(--r-2); }
  .marka-tekst { display: none; }
}
/* przełącznik motywu: dwa radia, kropka jeździ pod aktywną ikoną */
.motyw { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 3px; border: 1.5px solid var(--linia-2); border-radius: var(--r-2); min-inline-size: 0; }
.motyw legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; }
.motyw label { position: relative; z-index: 1; display: grid; place-items: center; width: 2.35rem; height: 2.1rem; color: var(--tekst-3); cursor: pointer; transition: color 220ms; }
.motyw label:hover { color: var(--tekst); }
.motyw input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.motyw label:has(input:checked) { color: var(--akcent-tekst); }
.motyw label:has(input:focus-visible) { box-shadow: var(--focus-ring); border-radius: 50%; }
.motyw-kropka { position: absolute; z-index: 0; top: 50%; left: calc(3px + 1.175rem); width: 1.95rem; height: 1.95rem; margin: -.975rem 0 0 -.975rem; border-radius: 50%; background: var(--akcent); transition: transform 380ms var(--sprezyna); }
:root.dzien .motyw-kropka, .motyw:has(#m-dzien:checked) .motyw-kropka { transform: translateX(2.35rem); }

/* ---------- 5. Przyciski i pola ---------- */
.btn { --bg: var(--akcent); --fg: var(--akcent-tekst); display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.25rem; padding: .75rem 1.25rem; border-radius: var(--r-1); background: var(--bg); color: var(--fg); border: 2px solid var(--bg); font: 800 1.2rem/1 var(--font-naglowek); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background 160ms, color 160ms, border-color 160ms; }
.btn:hover { --bg: var(--akcent-2); }
.btn:active { transform: translateY(1px); }
.btn--jasny { --bg: transparent; --fg: var(--tekst); border-color: var(--tekst); }
.btn--jasny:hover { --bg: var(--tekst); --fg: var(--tlo); }
.btn--maly { min-height: 2.75rem; font-size: 1.05rem; padding: .55rem .9rem; }
.btn[disabled] { opacity: .6; cursor: progress; }
.pole { display: block; font-size: var(--t-drobny); color: var(--tekst-2); }
.pole input, .pole textarea { display: block; width: 100%; margin-top: .3rem; padding: .7rem .8rem; font: 600 1.0625rem/1.3 var(--font-tekst); color: var(--tekst); background: var(--tlo); border: 1.5px solid var(--linia-2); border-radius: var(--r-1); }
.pole textarea { font-weight: 400; min-height: 8.5rem; resize: vertical; line-height: 1.5; }
.pole input:focus-visible, .pole textarea:focus-visible { border-color: var(--akcent); }
.pole input::placeholder, .pole textarea::placeholder { color: var(--tekst-3); font-weight: 400; }
.pole [aria-invalid="true"] { border-color: var(--blad); }

/* ---------- 6. Intro i skan ---------- */
.powitanie { display: none; }
.js.intro .powitanie { display: block; position: fixed; inset: 0; z-index: 100; animation: awaria-znikaj 1ms linear 5s forwards; }
@keyframes awaria-znikaj { to { visibility: hidden; } }
.js.intro .gora .znak-ko { opacity: 0; animation: awaria-pokaz 1ms linear 5s forwards; }
@keyframes awaria-pokaz { to { opacity: 1; } }
.intro-kurtyna { position: absolute; inset: 0; background: var(--tlo); }
.intro-kurtyna::before, .intro-kurtyna::after { content: ''; position: absolute; left: 0; right: 0; opacity: 0; transition: opacity 120ms; }
.intro-kurtyna::before { bottom: 2px; height: 3.25rem; background: color-mix(in srgb, var(--kropka) 10%, var(--tlo)); }
.intro-kurtyna::after { bottom: 0; height: 2px; background: var(--kropka); }
.powitanie.podnosi .intro-kurtyna::before, .powitanie.podnosi .intro-kurtyna::after { opacity: 1; }
.intro-scena { position: absolute; inset: 0; display: grid; align-content: center; padding-bottom: 7vh; }
.intro-imie { margin: 0; font: 900 clamp(4.5rem, 1.2rem + 11.2vw, 12.5rem)/1 var(--font-naglowek); text-transform: uppercase; letter-spacing: -.005em; color: var(--tekst); }
@media (max-width: 47.99rem) { .intro-imie { font-size: 25.5vw; } }
.intro-slowo { display: inline-block; overflow: hidden; vertical-align: top; }
.intro-slowo:last-child { padding-right: .08em; margin-right: -.08em; } /* zapas na sprężysty wyskok kropki */
.powitanie.zwija .intro-slowo { overflow: visible; }
.intro-lit { --n: 0; display: inline-block; line-height: 1; transform: translateY(105%); transform-origin: 0 50%; }
.intro-lit:nth-child(2) { --n: 1; } .intro-lit:nth-child(3) { --n: 2; } .intro-lit:nth-child(4) { --n: 3; } .intro-lit:nth-child(5) { --n: 4; } .intro-lit:nth-child(6) { --n: 5; }
.intro-slowo + .intro-slowo .intro-lit { --n0: 5; }
.intro-kropka { display: inline-block; width: .17em; height: .17em; margin-left: .03em; border-radius: 50%; background: var(--kropka); transform: scale(0); }
.intro-haslo { margin: 1.1rem 0 0; display: flex; flex-wrap: wrap; gap: .1rem .5em; font: 400 clamp(1.2rem, .95rem + 1.1vw, 2rem)/1.25 var(--font-tekst); color: var(--tekst-2); }
.intro-haslo span { --j: 0; display: inline-block; opacity: 0; transform: translateY(.5em); }
.intro-haslo span:nth-child(2) { --j: 1; } .intro-haslo span:nth-child(3) { --j: 2; } .intro-haslo span:nth-child(4) { --j: 3; }
.intro-haslo span:last-child { color: var(--wyr-tekst); box-shadow: inset 0 -.42em 0 var(--wyr-tlo); padding: 0 .12em; margin: 0 -.12em; }
.powitanie.gra .intro-lit { animation: intro-lit 520ms cubic-bezier(.16,1,.3,1) calc(40ms + (var(--n) + var(--n0, 0)) * 20ms) forwards; }
@keyframes intro-lit { from { transform: translateY(105%); } to { transform: translateY(0); } }
.powitanie.gra .intro-kropka { animation: intro-kropka 440ms var(--sprezyna) 520ms forwards; }
@keyframes intro-kropka { from { transform: scale(0); } to { transform: scale(1); } }
.powitanie.gra .intro-haslo span { animation: intro-haslo 400ms cubic-bezier(.16,1,.3,1) calc(280ms + var(--j) * 80ms) forwards; }
@keyframes intro-haslo { from { opacity: 0; transform: translateY(.5em); } to { opacity: 1; transform: none; } }

/* skan przy zmianie motywu: nowy motyw odsłania się od góry, linia jedzie po krawędzi */
.skaner { position: fixed; inset: 0 0 auto; height: 2px; background: var(--kropka); pointer-events: none; z-index: 90; transform: translateY(-3rem); visibility: hidden; }
.skaner::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 2.5rem; background: color-mix(in srgb, var(--kropka) 14%, transparent); }
html[data-vt="skan"] .skaner { visibility: visible; view-transition-name: skaner; }
html.skan-dol .skaner { transform: translateY(100vh); }
html[data-vt="skan"]::view-transition-new(root) { animation: skan 700ms var(--jazda) both; }
html[data-vt="skan"]::view-transition-group(skaner) { animation-duration: 700ms; animation-timing-function: var(--jazda); }
@keyframes skan { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html[data-vt="fala"]::view-transition-new(root) { animation: fala 720ms var(--jazda); }
@keyframes fala { from { clip-path: circle(0 at var(--vx, 50%) var(--vy, 50%)); } to { clip-path: circle(var(--vr, 150vmax) at var(--vx, 50%) var(--vy, 50%)); } }
::view-transition-group(ekran) { animation-duration: 560ms; animation-timing-function: var(--jazda); }
html[data-vt="fala"]::view-transition-group(ekran) { animation-duration: 420ms; }

/* ---------- 7. Sekcje strony głównej ---------- */
/* 7a. hero */
.hero { position: relative; padding-block: clamp(1.75rem, 1rem + 3vw, 3.5rem) clamp(3rem, 2rem + 4vw, 6rem); }
.hero .w { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); }
@media (min-width: 66rem) { .hero .w { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; } }
h1 { margin: 0; font: 900 var(--t-h1)/.93 var(--font-naglowek); text-transform: uppercase; letter-spacing: -.005em; }
.kropka-h { display: inline-block; width: .17em; height: .17em; margin-left: .03em; border-radius: 50%; background: var(--kropka); color: transparent; overflow: hidden; }
.h1-pod { display: block; margin-top: 1rem; text-transform: none; font: 400 clamp(1.35rem, 1.05rem + 1.3vw, 2.1rem)/1.2 var(--font-tekst); color: var(--tekst-2); letter-spacing: -.01em; }
.lead { max-width: 23.33em; margin: 1.25rem 0 0; color: var(--tekst-2); }
/* linia zakresu (wybrany wariant A, D10: bez cen): kropka marki jeździ między Strona / Strona z funkcją / Narzędzie, opis się zmienia; działa bez JS (:has) */
.zakres { margin-top: 1.7rem; max-width: 33rem; }
.zakres-os { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0 0 1.5rem; border: 0; min-inline-size: 0; container-type: inline-size; }
.zakres-os legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; }
.zakres-os::before { content: ''; position: absolute; left: calc(100% / 6); right: calc(100% / 6); bottom: calc(.75rem - 1px); height: 2px; background: var(--linia-2); transform-origin: 0 50%; }
.zakres-stop { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 2.5rem; padding: 0 .3rem; text-align: center; cursor: pointer; }
.zakres-stop input { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% + 1.5rem); opacity: 0; margin: 0; cursor: pointer; }
.zakres-stop::after { content: ''; position: absolute; left: 50%; bottom: calc(-.75rem - 4.5px); width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--tlo); box-shadow: inset 0 0 0 2px var(--linia-2); }
.zakres-nazwa { display: block; font: 800 clamp(.95rem, .82rem + .45vw, 1.2rem)/1.05 var(--font-naglowek); letter-spacing: .05em; text-transform: uppercase; color: var(--tekst-3); transition: color 200ms; text-wrap: balance; }
.zakres-stop:hover .zakres-nazwa { color: var(--tekst-2); }
.zakres-stop:has(input:checked) .zakres-nazwa { color: var(--tekst); }
.zakres-stop:has(input:focus-visible) .zakres-nazwa { box-shadow: var(--focus-ring); border-radius: var(--r-1); }
.zakres-kropka { --zi: 0; position: absolute; left: calc(100% / 6); bottom: calc(.75rem - .55rem); width: 1.1rem; height: 1.1rem; margin-left: -.55rem; border-radius: 50%; background: var(--kropka); box-shadow: 0 0 0 4px var(--tlo); transform: translateX(calc(var(--zi) * 100cqi / 3)); transition: transform 560ms var(--sprezyna); pointer-events: none; }
.zakres-os:has(input[value=funkcja]:checked) .zakres-kropka { --zi: 1; }
.zakres-os:has(input[value=narzedzie]:checked) .zakres-kropka { --zi: 2; }
.zakres-opisy { display: grid; margin-top: .85rem; }
.zakres-opis { grid-area: 1 / 1; margin: 0; color: var(--tekst-2); visibility: hidden; }
.zakres:has(input[value=strona]:checked) [data-z=strona], .zakres:has(input[value=funkcja]:checked) [data-z=funkcja], .zakres:has(input[value=narzedzie]:checked) [data-z=narzedzie] { visibility: visible; animation: zakres-opis 520ms var(--jazda) both; }
@supports not selector(:has(*)) { .zakres-opis[data-z=funkcja] { visibility: visible; } .zakres-kropka { --zi: 1; } }
@keyframes zakres-opis { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -1rem 0 0); } }
.zakres-uwaga { margin: .75rem 0 0; font-size: var(--t-drobny); color: var(--tekst-3); }
/* wejście: linia rysuje się od lewej, przystanki wyskakują, nazwy wjeżdżają, kropka spada i robi rundę, ląduje na "Strona z funkcją" */
.js:not(.intro) .zakres-os::before { animation: rysuj-linie 820ms var(--jazda) 120ms both; }
@keyframes rysuj-linie { from { transform: scaleX(0); } }
.js:not(.intro) .zakres-stop::after { animation: przystanek 420ms var(--sprezyna) 160ms both; }
.js:not(.intro) .zakres-stop:nth-of-type(2)::after { animation-delay: 520ms; }
.js:not(.intro) .zakres-stop:nth-of-type(3)::after { animation-delay: 880ms; }
@keyframes przystanek { from { transform: scale(0); } }
.js:not(.intro) .zakres-nazwa { animation: nazwa-wjazd 560ms cubic-bezier(.16,1,.3,1) 200ms both; }
.js:not(.intro) .zakres-stop:nth-of-type(2) .zakres-nazwa { animation-delay: 560ms; }
.js:not(.intro) .zakres-stop:nth-of-type(3) .zakres-nazwa { animation-delay: 920ms; }
@keyframes nazwa-wjazd { from { opacity: 0; transform: translateY(.7em); } }
/* backwards, nie both: po rundzie kropka wraca pod --zi i dalej jeździ za wyborem (pełne wypełnienie trzymało ją na środku) */
.js:not(.intro) .zakres-kropka { animation: kropka-runda 1700ms 1000ms backwards; }
@keyframes kropka-runda {
  0% { transform: translate(0, -1.8rem) scale(.2); opacity: 0; animation-timing-function: cubic-bezier(.5, 0, .75, 0); }
  16% { transform: translate(0, 0) scale(1); opacity: 1; animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  30% { transform: translate(calc(100cqi / 6), -.85rem); animation-timing-function: cubic-bezier(.5, 0, .75, .6); }
  42% { transform: translate(calc(100cqi / 3), 0); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  56% { transform: translate(calc(100cqi / 2), -.85rem); animation-timing-function: cubic-bezier(.5, 0, .75, .6); }
  68% { transform: translate(calc(200cqi / 3), 0) scale(1.08, .9); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  84% { transform: translate(calc(100cqi / 2), -1.05rem); animation-timing-function: cubic-bezier(.5, 0, .75, .6); }
  100% { transform: translate(calc(var(--zi) * 100cqi / 3), 0); }
}
/* samo przechodzenie (strona.js): powrót z Narzędzia na Stronę dwoma skokami przez przystanki, zamiast jazdy przez całą linię */
.js:not(.intro) .zakres-os.wraca .zakres-kropka { transition: none; animation: kropka-runda 1700ms 1000ms backwards, kropka-powrot 900ms; }
@keyframes kropka-powrot {
  0% { transform: translate(calc(200cqi / 3), 0); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  25% { transform: translate(calc(100cqi / 2), -.85rem); animation-timing-function: cubic-bezier(.5, 0, .75, .6); }
  50% { transform: translate(calc(100cqi / 3), 0) scale(1.06, .92); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  75% { transform: translate(calc(100cqi / 6), -.85rem); animation-timing-function: cubic-bezier(.5, 0, .75, .6); }
  90% { transform: translate(0, 0) scale(1.08, .9); animation-timing-function: ease-out; }
  100% { transform: translate(0, 0); }
}
.js:not(.intro) .zakres-opisy { animation: pojaw 500ms ease 2400ms both; }
.js:not(.intro) .zakres-uwaga { animation: pojaw 500ms ease 2600ms both; }
@keyframes pojaw { from { opacity: 0; } }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.5rem; }
.podpis { display: flex; align-items: center; gap: .8rem; margin: .25rem 0 0; font-size: var(--t-maly); line-height: 1.35; color: var(--tekst-2); }
@media (min-width: 30rem) { .podpis { margin: 0 0 0 .5rem; } }
.podpis img { flex: none; width: 2.9rem; height: 2.9rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--tlo), 0 0 0 3.5px var(--kropka); }
.podpis b { display: block; color: var(--tekst); font-weight: 700; }

/* 7b. przymierzalnia */
.przym { display: grid; gap: 1rem; grid-template-areas: "gora" "tel" "dol"; }
.przym-form { display: contents; }
.pz-gora, .pz-dol { background: var(--tlo-2); border: 1px solid var(--linia); border-radius: var(--r-2); padding: 1.1rem 1.15rem; }
.pz-gora { grid-area: gora; }
.pz-dol { grid-area: dol; display: grid; gap: .75rem; }
.tel { grid-area: tel; justify-self: center; }
@media (min-width: 40rem) {
  .przym { grid-template-columns: minmax(0, 1fr) 16rem; grid-template-areas: "gora tel" "dol tel"; gap: .75rem 1.25rem; }
  .tel { align-self: center; }
}
.pz-gora h2 { margin: 0 0 .2rem; font: 900 1.6rem/1 var(--font-naglowek); text-transform: uppercase; }
.pz-gora > p { margin: 0 0 .85rem; font-size: .875rem; color: var(--tekst-2); }
.branze { border: 0; padding: 0; margin: .9rem 0 0; }
.branze legend { padding: 0; margin-bottom: .45rem; font-size: var(--t-drobny); color: var(--tekst-2); }
.branze div { display: flex; flex-wrap: wrap; gap: .4rem; }
.branze label { position: relative; }
.branze input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.branze span { display: block; padding: .5rem .7rem; border: 1.5px solid var(--linia-2); border-radius: var(--r-1); font-size: .875rem; font-weight: 600; cursor: pointer; transition: background 140ms, color 140ms, border-color 140ms; }
.branze label:hover span { border-color: var(--tekst-2); }
.branze input:checked + span { background: var(--tekst); color: var(--tlo); border-color: var(--tekst); }
.branze input:focus-visible + span { box-shadow: var(--focus-ring); }
.pz-dol p { margin: 0; font-size: var(--t-maly); color: var(--tekst-2); }
.pz-dol b { color: var(--tekst); white-space: nowrap; }
.pz-akcje { display: flex; flex-wrap: wrap; gap: .5rem; }
.wroc { display: none; }
.przebrana .wroc { display: inline-flex; }
.przebrana-info { display: none; font-size: .875rem; color: var(--tekst); padding: .6rem .75rem; background: color-mix(in srgb, var(--akcent) 16%, transparent); border-radius: var(--r-1); }
.przebrana .przebrana-info { display: block; }
/* telefon + mini-strona branży */
.tel { width: min(16rem, 72vw); aspect-ratio: 9 / 18.5; padding: .5rem; border-radius: 2.3rem; background: var(--tel-ramka); box-shadow: 0 0 0 1px var(--linia-2), 0 28px 60px -28px rgba(0,0,0,.7); }
.ekran { view-transition-name: ekran; container-type: inline-size; height: 100%; border-radius: 1.85rem; overflow: hidden; background: var(--m-tlo); color: var(--m-tekst); font-family: var(--font-tekst); display: flex; flex-direction: column; }
.m-gora { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: max(1.3rem, 5cqi) 5.5cqi 2.5cqi; }
.m-logo { font: 700 clamp(.85rem, 5.6cqi, 1.6rem)/1.1 var(--m-font); letter-spacing: -.01em; overflow-wrap: anywhere; }
.m-menu { display: flex; gap: 4cqi; font-size: clamp(.55rem, 3.4cqi, .95rem); opacity: .8; }
.m-menu span:not(:last-child) { display: none; }
.m-tresc { display: grid; gap: 4cqi; padding: 0 5.5cqi; flex: 1; align-content: start; }
.m-hero small { display: block; font-size: clamp(.58rem, 3.6cqi, 1rem); opacity: .75; margin-bottom: 1.5cqi; }
.m-hero h3 { margin: 0; font: 700 clamp(1.25rem, 9cqi, 4.2rem)/1.02 var(--m-font); letter-spacing: -.02em; }
.m-hero p { margin: 2.5cqi 0 0; font-size: clamp(.66rem, 4.1cqi, 1.15rem); line-height: 1.45; opacity: .85; }
.m-funkcja { padding: 4.5cqi; border-radius: 3.5cqi; background: var(--m-karta); color: var(--m-karta-tekst); font-size: clamp(.66rem, 4cqi, 1.05rem); display: grid; gap: 2cqi; }
.m-funkcja b { font-size: clamp(.75rem, 4.6cqi, 1.25rem); }
.m-funkcja .duza { font: 700 clamp(1rem, 7cqi, 2.4rem)/1.05 var(--m-font); }
.m-funkcja .wiersz { display: flex; justify-content: space-between; align-items: baseline; gap: 3cqi; }
.m-funkcja input[type=range] { width: 100%; accent-color: var(--m-akcent); margin: 0; }
.m-cennik { display: grid; font-size: clamp(.62rem, 3.8cqi, 1rem); }
.m-cennik div { display: flex; justify-content: space-between; padding: 1.8cqi 0; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.m-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5cqi; padding: 4cqi 5.5cqi 5.5cqi; }
.m-cta span { text-align: center; padding: 3.5cqi 2cqi; border-radius: 2.5cqi; font-weight: 700; font-size: clamp(.7rem, 4.2cqi, 1.1rem); background: var(--m-akcent); color: var(--m-akcent-tekst); }
.m-cta span + span { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
@container (min-width: 36rem) {
  .m-gora { padding: 1.5rem 2.5rem 1rem; }
  .m-menu span:not(:last-child) { display: inline; }
  .m-tresc { grid-template-columns: 1.2fr 1fr; gap: 2rem 3rem; padding: 1.5rem 2.5rem; align-content: center; }
  .m-hero { grid-row: span 2; }
  .m-hero h3 { font-size: clamp(2.4rem, 6cqi, 4.8rem); }
  .m-funkcja, .m-cennik { font-size: 1rem; }
  .m-funkcja { padding: 1.4rem; border-radius: 12px; }
  .m-cta { max-width: 28rem; padding: 0 2.5rem 2.5rem; }
  .m-cta span { padding: .9rem; border-radius: 8px; }
}
:root:has(#b-pralnia:checked) .ekran { --m-tlo: #f4f8f8; --m-tekst: #11303a; --m-akcent: #0f6e84; --m-akcent-tekst: #fff; --m-karta: #fff; --m-karta-tekst: #11303a; --m-font: Georgia, 'Times New Roman', serif; }
:root:has(#b-salon:checked) .ekran { --m-tlo: #1d1718; --m-tekst: #f6ece6; --m-akcent: #e8b4a0; --m-akcent-tekst: #1d1718; --m-karta: #2b2324; --m-karta-tekst: #f6ece6; --m-font: 'Big Shoulders Display', sans-serif; }
:root:has(#b-budowa:checked) .ekran { --m-tlo: #f2f0ea; --m-tekst: #1b1b18; --m-akcent: #f2b705; --m-akcent-tekst: #1b1b18; --m-karta: #1b1b18; --m-karta-tekst: #f2f0ea; --m-font: 'Big Shoulders Display', sans-serif; }
:root:has(#b-gabinet:checked) .ekran { --m-tlo: #eef3ef; --m-tekst: #173127; --m-akcent: #2f7a5b; --m-akcent-tekst: #fff; --m-karta: #fff; --m-karta-tekst: #173127; --m-font: 'Atkinson Hyperlegible Next', sans-serif; }
:root:has(#b-warsztat:checked) .ekran { --m-tlo: #121416; --m-tekst: #e9ecef; --m-akcent: #d93a2b; --m-akcent-tekst: #fff; --m-karta: #1e2226; --m-karta-tekst: #e9ecef; --m-font: 'Big Shoulders Display', sans-serif; }
.tb { display: none; }
:root:has(#b-pralnia:checked) .b-pralnia, :root:has(#b-salon:checked) .b-salon, :root:has(#b-budowa:checked) .b-budowa, :root:has(#b-gabinet:checked) .b-gabinet, :root:has(#b-warsztat:checked) .b-warsztat { display: contents; }
/* bez JS: branże przełącza sam CSS (:has); pełny ekran i powrót wymagają JS */
html:not(.js) [data-pelny], html:not(.js) .wroc { display: none; }
/* pełny ekran podglądu */
.pelny { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--tlo); }
.pelny::backdrop { background: var(--tlo); }
.pelny-ramka { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; }
.pelny-pasek { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem var(--margines); padding-top: calc(.7rem + env(safe-area-inset-top, 0px)); color: var(--tekst); font-size: .875rem; }
.pelny-miejsce { padding: 0 var(--margines) var(--margines); min-height: 0; }
.pelny-miejsce .ekran { border-radius: 14px; }

/* 7c. realizacje: przypięta taśma przewijana w bok */
.film-glowa { padding-top: clamp(3rem, 2rem + 4vw, 6rem); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; }
.film-glowa h2 { margin: 0; font: 900 var(--t-h2)/.9 var(--font-naglowek); text-transform: uppercase; }
.film-glowa p { margin: .6rem 0 0; color: var(--scena-tekst-2); max-width: 28.51em; }
.film-glowa .link { color: var(--scena-tekst); white-space: nowrap; }
.film { position: relative; background: var(--scena); color: var(--scena-tekst); }
.tasma { list-style: none; margin: 2rem 0 0; padding: 0 var(--margines) clamp(3rem, 2rem + 4vw, 6rem); display: grid; gap: 1.25rem; }
.panel { background: var(--powierzchnia); color: var(--papier-tekst); border-radius: var(--r-1); overflow: hidden; display: grid; }
.panel-obraz { position: relative; overflow: hidden; background: #e9eef0; min-height: 14rem; }
.panel-tresc { padding: 1.35rem 1.4rem 1.6rem; display: grid; gap: .55rem; align-content: start; }
.panel-typ { font: 800 .95rem/1 var(--font-naglowek); letter-spacing: .06em; text-transform: uppercase; color: var(--papier-tekst-2); }
.panel h3 { margin: 0; font: 900 clamp(1.8rem, 1.4rem + 1.4vw, 2.8rem)/.93 var(--font-naglowek); text-transform: uppercase; }
.panel p { margin: 0; color: var(--papier-tekst-2); }
.panel-linki { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin-top: .4rem; }
.panel a:not(.btn) { font-weight: 700; color: var(--papier-tekst); text-underline-offset: .25em; text-decoration-color: var(--kropka); text-decoration-thickness: 2px; }
/* nagrania prawdziwych funkcji: grają tylko w aktywnym panelu; bez JS, przy ograniczonym ruchu i oszczędzaniu danych zostaje plakat */
.panel-wideo { background: #e9eff1; aspect-ratio: 16 / 13; }
.panel-wideo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } /* całe nagranie, bez ucinania tekstu; tło panelu = kolor brzegu nagrania */
.panel-plakat { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } /* bez JS zamiast nagrania */
.panel-wideo--balony { background: #e4cfc8; }
.panel-wideo--konfigurator { background: #edf0f3; }
.panel-wideo--projekty { background: #f6f5f8; }
.panel-etykieta { position: absolute; left: .75rem; top: .75rem; padding: .35rem .55rem; border-radius: 3px; background: rgba(7, 11, 20, .8); color: #eaf1fb; font: 600 .75rem/1 var(--font-tekst); letter-spacing: .01em; pointer-events: none; }
.panel-pauza { position: absolute; right: .75rem; bottom: .75rem; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0; border: 0; border-radius: var(--r-1); background: rgba(7, 11, 20, .8); color: #eaf1fb; cursor: pointer; }
.panel-pauza:hover { background: rgba(7, 11, 20, .95); }
.panel-pauza .ikona-graj, .panel-pauza[data-stan=pauza] .ikona-pauza { display: none; }
.panel-pauza[data-stan=pauza] .ikona-graj { display: block; }
html:not(.js) .panel-pauza { display: none; }
.panel-ty { background: var(--szyld); color: var(--szyld-tekst); align-content: center; }
.panel-ty .panel-tresc { padding: 2rem 1.6rem; gap: 1rem; }
.panel-ty h3 { font-size: clamp(2.4rem, 1.8rem + 2.4vw, 4rem); }
.panel-ty p, .panel-ty .panel-typ { color: var(--szyld-tekst); opacity: .85; }
.panel-ty .btn { --bg: var(--szyld-tekst); --fg: var(--szyld); justify-self: start; }
.licznik { display: none; }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
  .js .film { height: 420vh; view-timeline-name: --film; }
  .js .film-lepkie { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); }
  .js .tasma { display: flex; justify-self: start; width: max-content; height: 100%; align-items: stretch; padding-block: 1.25rem 1rem; margin: 0; animation: jedz linear both; animation-timeline: --film; animation-range: contain 0% contain 100%; }
  .js .panel { width: min(86vw, 58rem); grid-template-rows: minmax(0, 1fr) auto; }
  .js .panel-ty { width: min(78vw, 30rem); }
  .js .panel-obraz { min-height: 0; aspect-ratio: auto; }
  @media (min-width: 52rem) and (orientation: landscape) { .js .panel { grid-template-columns: 1.35fr 1fr; grid-template-rows: none; } .js .panel-ty { grid-template-columns: 1fr; } .js .panel-tresc { align-content: center; padding: 2rem; } }
  .js .licznik { display: flex; align-items: center; gap: 1rem; padding: 0 var(--margines) 1rem; color: var(--scena-tekst-2); font-size: .875rem; }
  .licznik-szyna { flex: 1; height: 3px; background: var(--scena-linia); position: relative; overflow: hidden; }
  .licznik-szyna::after { content: ''; position: absolute; inset: 0; background: var(--szyld); transform-origin: left; animation: postep linear both; animation-timeline: --film; animation-range: contain 0% contain 100%; }
} }
@keyframes jedz { from { transform: translateX(0); } to { transform: translateX(calc(-100% + 100vw)); } }
@keyframes postep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 59.99rem) { .js .film-lepkie { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px)); } }
@media (min-width: 52rem) { .tasma { grid-template-columns: 1fr 1fr; } }

/* 7d. sekcje z głową po lewej (oferta, jak pracuję, pytania) */
.sekcja { padding-block: var(--o-sekcja) 0; }
.sekcja > .w { display: grid; gap: 2rem; }
@media (min-width: 60rem) {
  .sekcja > .w { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 3rem clamp(3rem, 1rem + 4vw, 6rem); align-items: start; }
  .sekcja-glowa { position: sticky; top: 2rem; }
}
.sekcja-glowa p { margin: .9rem 0 0; color: var(--tekst-2); max-width: 22.03em; }
/* oferta (D10, bez cen): co dokładnie znaczy Strona / Strona z funkcją / Narzędzie / Opieka; cechy oddzielone kropką marki */
.uslugi { list-style: none; margin: 0; padding: 0; }
.usluga { display: grid; gap: .45rem; padding: 1.5rem 0 1.6rem; border-top: 1px solid var(--linia); }
.usluga:last-child { border-bottom: 1px solid var(--linia); }
.usluga h3 { margin: 0; font: 900 var(--t-h3)/1 var(--font-naglowek); text-transform: uppercase; }
.usluga-lead { margin: 0; font-size: var(--t-lead); line-height: 1.35; color: var(--tekst); }
.usluga > p:not(.usluga-lead) { margin: 0; color: var(--tekst-2); max-width: 38.88em; }
.usluga .link { white-space: nowrap; }
.cechy { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem 1.15rem; margin: .4rem 0 0; padding: 0; font-size: var(--t-drobny); color: var(--tekst-2); }
.cechy li { display: inline-flex; align-items: center; gap: .45rem; }
.cechy li::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--kropka); }
@media (min-width: 48rem) {
  .usluga { grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr); column-gap: 2rem; align-items: start; }
  .usluga h3 { grid-row: 1 / span 3; padding-top: .15rem; }
}
.sekcja-dalej { margin: 1.25rem 0 0; color: var(--tekst-2); }
/* jak pracuję: oś czasu z kropką marki na linii */
.kroki { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem 2.5rem; }
@media (min-width: 40rem) { .kroki { grid-template-columns: 1fr 1fr; } }
.kroki li { position: relative; border-top: 1px solid var(--linia-2); padding-top: 1rem; }
.kroki li::before { content: ''; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--kropka); }
.krok-kiedy { display: block; font: 800 .95rem/1 var(--font-naglowek); letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-3); }
.kroki h3 { margin: .45rem 0 0; font: 900 clamp(1.5rem, 1.25rem + 1vw, 2.1rem)/1 var(--font-naglowek); text-transform: uppercase; }
.kroki p { margin: .55rem 0 0; color: var(--tekst-2); max-width: 28.51em; }
.kroki p + p { margin-top: .4rem; }
.krok-od-ciebie { font-size: var(--t-maly); }
.krok-od-ciebie b { color: var(--tekst); }
.termin { margin: 2rem 0 0; padding: 1rem 1.15rem; background: var(--tlo-2); border: 1px solid var(--linia); border-radius: var(--r-2); color: var(--tekst-2); max-width: 38.88em; }
.termin b { color: var(--tekst); }
/* pytania: details/summary, działa bez JS */
.pytania { margin: 0; padding: 0; }
.pytania details { border-top: 1px solid var(--linia); }
.pytania details:last-child { border-bottom: 1px solid var(--linia); }
.pytania summary { position: relative; display: block; padding: 1.2rem 3rem 1.2rem 0; font: 700 clamp(1.1rem, 1rem + .35vw, 1.25rem)/1.35 var(--font-tekst); cursor: pointer; list-style: none; }
.pytania summary::-webkit-details-marker { display: none; }
.pytania summary::before, .pytania summary::after { content: ''; position: absolute; right: .6rem; top: 50%; width: 1rem; height: 2px; margin-top: -1px; background: var(--kropka); transition: transform 220ms var(--krzywa); }
.pytania summary::after { transform: rotate(90deg); }
.pytania details[open] summary::after { transform: rotate(0); }
.pytania summary:hover { color: var(--akcent-na-tle); }
.pytania .odp { padding: 0 0 1.35rem; color: var(--tekst-2); max-width: 40.18em; }
.pytania .odp p { margin: 0; }
.pytania .odp p + p { margin-top: .6rem; }

/* 7e. o mnie: zdjęcie wywoływane skanem (z planu w kolorach motywu do koloru) */
.omnie { padding-block: var(--o-sekcja) 0; }
.omnie .w { display: grid; gap: 2rem; }
.foto { position: relative; margin: 0; overflow: hidden; background: #202020; aspect-ratio: 4 / 4.4; }
.foto > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
@media (max-width: 59.99rem) { .foto { margin-inline: calc(-1 * var(--margines)); } }
@media (min-width: 60rem) {
  .omnie .w { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 1rem + 4vw, 5.5rem); align-items: center; }
  .foto { aspect-ratio: 4 / 5; margin-left: calc((100vw - min(100vw - 2 * var(--margines), var(--szer-max))) / -2); border-radius: 0 var(--r-1) var(--r-1) 0; }
}
.foto-duo { position: absolute; inset: 0; background: var(--duo-swiatlo); isolation: isolate; clip-path: inset(0 0 0 0); }
.foto-duo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; filter: grayscale(1) contrast(1.2) brightness(1.08); mix-blend-mode: multiply; }
.foto-duo::after { content: ''; position: absolute; inset: 0; background: var(--duo-cien); mix-blend-mode: lighten; }
.foto.wywolane .foto-duo { clip-path: inset(100% 0 0 0); transition: clip-path 1.15s var(--jazda); }
.foto::after { content: ''; position: absolute; inset: 0; border-top: 2px solid var(--kropka); opacity: 0; pointer-events: none; }
.foto.wywolane::after { animation: foto-skan 1.15s var(--jazda) forwards; }
@keyframes foto-skan { 0% { opacity: 1; transform: translateY(0); } 92% { opacity: 1; } 100% { opacity: 0; transform: translateY(100%); } }
.omnie h2 { margin: 0; font: 900 clamp(2.4rem, 1.5rem + 3.6vw, 4.8rem)/.92 var(--font-naglowek); text-transform: uppercase; max-width: 7.10em; }
.omnie-tresc > p { max-width: 29.81em; margin: 1rem 0 0; color: var(--tekst-2); }
.omnie-tresc > .omnie-lead { margin-top: 1.4rem; font-size: var(--t-lead); color: var(--tekst); max-width: 25.92em; }
.omnie-tresc > .omnie-podpis { color: var(--tekst); }
.omnie-podpis { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--linia); }
.omnie-podpis .znak-ko { font-size: 2.6rem; }
.omnie-podpis span.kto { font: 800 1.35rem/1 var(--font-naglowek); letter-spacing: .04em; text-transform: uppercase; }
.omnie-podpis a { margin-left: auto; font: 700 1.3rem/1 var(--font-naglowek); letter-spacing: .03em; color: var(--akcent-na-tle); text-decoration: none; display: inline-flex; gap: .45rem; align-items: center; }

/* 7f. kontakt: kanały bezpośrednie + formularz */
.kontakt { padding-block: var(--o-sekcja); }
.kontakt .w { display: grid; gap: 2.5rem; }
@media (min-width: 60rem) { .kontakt .w { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(3rem, 1rem + 4vw, 6rem); align-items: start; } }
.kontakt-lead { margin: .9rem 0 0; color: var(--tekst-2); max-width: 24.62em; }
.kanaly { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; }
.kanaly li { border-top: 1px solid var(--linia); }
.kanaly li:last-child { border-bottom: 1px solid var(--linia); }
.kanaly a { display: grid; grid-template-columns: 2.25rem 1fr; align-items: center; column-gap: .75rem; padding: 1rem 0; text-decoration: none; }
.kanaly svg { color: var(--kropka); }
.kanaly b { display: block; font: 900 clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem)/1 var(--font-naglowek); letter-spacing: .02em; }
.kanaly small { grid-column: 2; font-size: var(--t-drobny); color: var(--tekst-2); }
.kanaly a:hover b { color: var(--akcent-na-tle); }
.kanaly .mail b { font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); text-transform: none; overflow-wrap: anywhere; }
.formularz { display: grid; gap: 1rem; padding: clamp(1.1rem, .8rem + 1.5vw, 2rem); background: var(--tlo-2); border: 1px solid var(--linia); border-radius: var(--r-2); }
.formularz h3 { margin: 0; font: 900 1.9rem/1 var(--font-naglowek); text-transform: uppercase; }
.formularz-rzad { display: grid; gap: 1rem; }
@media (min-width: 36rem) { .formularz-rzad { grid-template-columns: 1fr 1fr; } }
.pole-opis { font-size: var(--t-drobny); color: var(--tekst-3); margin: .3rem 0 0; }
.miodek { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formularz-dol { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.klauzula { margin: 0; font-size: var(--t-drobny); color: var(--tekst-3); max-width: 38.88em; }
.klauzula a { color: var(--tekst-2); }
.komunikat { margin: 0; padding: .75rem .9rem; border-radius: var(--r-1); font-size: var(--t-maly); }
.komunikat:empty { display: none; }
.komunikat[data-stan="ok"] { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--tekst); }
.komunikat[data-stan="blad"] { background: color-mix(in srgb, var(--blad) 16%, transparent); color: var(--tekst); }
.formularz.wyslany .formularz-pola { display: none; }

/* 7g. pomiar: "Ta strona na Twoim telefonie" */
.final { padding-block: var(--o-sekcja); border-top: 1px solid var(--linia); }
.final .w { display: grid; gap: 2rem; }
.final h2 { margin: 0; font: 900 clamp(2.2rem, 1.4rem + 3.4vw, 4.4rem)/.9 var(--font-naglowek); text-transform: uppercase; }
.final-lead { margin: .75rem 0 0; color: var(--tekst-2); max-width: 29.81em; }
.liczby { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.75rem 2rem; margin: 0; }
.liczby div { position: relative; border-top: 1px solid var(--linia-2); padding-top: .9rem; }
.liczby div::before { content: ''; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--kropka); }
.liczby dt { font-size: var(--t-maly); color: var(--tekst-2); }
.liczby dd { margin: .2rem 0 0; font: 900 clamp(3rem, 2rem + 4vw, 5.6rem)/.9 var(--font-naglowek); }
.liczby small { font-size: .45em; margin-left: .15em; }

/* ---------- 8. Podstrony (od kuchni, polityka, dziękuję, 404) ---------- */
.podstrona { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--o-sekcja); }
.podstrona h1 { font-size: clamp(2.8rem, 1.6rem + 5vw, 6rem); }
.podstrona-lead { margin: 1.1rem 0 0; font-size: var(--t-lead); color: var(--tekst-2); max-width: 28.51em; }
.proza { max-width: 44.06em; margin-top: 2.5rem; }
.proza h2 { margin: 2.75rem 0 0; font: 900 clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem)/1 var(--font-naglowek); text-transform: uppercase; }
.proza h3 { margin: 1.75rem 0 0; font: 800 1.35rem/1.1 var(--font-naglowek); letter-spacing: .02em; text-transform: uppercase; }
.proza p, .proza ul, .proza ol { margin: .8rem 0 0; color: var(--tekst-2); }
.proza li + li { margin-top: .35rem; }
.proza strong { color: var(--tekst); }
.proza a { color: var(--akcent-na-tle); font-weight: 700; text-underline-offset: .2em; text-decoration-color: var(--kropka); text-decoration-thickness: 2px; }
.tabela-wrap { overflow-x: auto; margin-top: 1rem; }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-maly); }
.tabela th, .tabela td { text-align: left; padding: .6rem .75rem .6rem 0; border-bottom: 1px solid var(--linia); vertical-align: top; }
.tabela th { color: var(--tekst); font-weight: 700; }
.tabela td { color: var(--tekst-2); }
.tabela td.num, .tabela th.num { text-align: right; padding-right: 0; }
.podstrona-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.5rem; }

/* ---------- 9. Stopka i pasek kontaktu na telefonie ---------- */
.stopka { border-top: 1px solid var(--linia); padding-block: 2rem 7rem; font-size: .875rem; color: var(--tekst-3); }
.stopka .w { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; }
.stopka-dane { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.stopka nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.stopka a { color: var(--tekst-2); text-underline-offset: .2em; }
.stopka a:hover { color: var(--tekst); }
.pasek-kontakt { position: fixed; inset: auto 0 0; z-index: 50; display: grid; grid-template-columns: 1.3fr 1fr 1fr; background: var(--akcent); color: var(--akcent-tekst); padding-bottom: env(safe-area-inset-bottom, 0px); transition: transform 240ms var(--krzywa); }
.pasek-kontakt a { min-height: 3.5rem; display: flex; align-items: center; justify-content: center; gap: .4rem; font: 800 1.1rem/1 var(--font-naglowek); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; }
.pasek-kontakt a + a { box-shadow: inset 1.5px 0 0 color-mix(in srgb, var(--akcent-tekst) 35%, transparent); }
.pasek-kontakt a:first-child { background: var(--akcent-tekst); color: var(--akcent); }
.pasek-kontakt--ukryty { transform: translateY(110%); }
@media (min-width: 60rem) { .pasek-kontakt { display: none; } .stopka { padding-bottom: 2rem; } }
.bez-paska .stopka { padding-bottom: 2rem; }

/* ---------- 10. Ograniczony ruch ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .powitanie, .foto-duo { display: none !important; }
  .js.intro .gora .znak-ko { opacity: 1; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}