/* ==========================================================================
   Serwis 48 - tokeny i nadpisania (demo, siteverse.pl/demo/serwis48/)
   Kierunek: "plyta drukowana". Czern laminatu, miedz jako jedyny akcent,
   oznaczenia elementow U1/R2/D3 zamiast ikon, sciezka miedziana z
   przelotkami jako komponent podpisowy (js/podpis.js). Pasmo jasne =
   arkusz montazowy (papier) z ciemniejsza miedzia, bo miedz na papierze
   znika. Wylacznie tokeny i nadpisania; limit 250 linii.
   ========================================================================== */

:root {
  --tlo:    #07090B;
  --tlo-2:  #0F1317;
  --tlo-3:  #151A1F;
  --tekst:   #EDE9E3;
  --tekst-2: rgba(237, 233, 227, 0.68);
  --tekst-3: #7E858E;
  --akcent:  #C98A46;
  --akcent-j: #E4A85F;
  --akcent-tekst: #07090B;
  --wlos:   rgba(237, 233, 227, 0.15);
  --wlos-2: rgba(237, 233, 227, 0.07);

  --tlo-jasne:         #EDE9E3;
  --tlo-jasne-2:       #E2DDD5;
  --tekst-na-jasnym:   #07090B;
  --tekst-2-na-jasnym: rgba(7, 9, 11, 0.66);
  --tekst-3-na-jasnym: #6E7480;
  --wlos-na-jasnym:    rgba(7, 9, 11, 0.18);
  --wlos-2-na-jasnym:  rgba(7, 9, 11, 0.09);

  --f-display: "Archivo", system-ui, "Segoe UI", sans-serif;
  --f-body:    "Inter", system-ui, "Segoe UI", sans-serif;
  --f-mono:    "Roboto Mono", ui-monospace, Menlo, monospace;
  --waga-display: 600;
  --interlinia-display: 1.04;
  --tracking-display: -0.028em;
  --promien: 0px;

  --nawi-tlo: rgba(7, 9, 11, 0.78);
  --pole-tlo: rgba(237, 233, 227, 0.04);
  --tint:
    linear-gradient(180deg, rgba(7, 9, 11, 0.55) 0%, rgba(7, 9, 11, 0.15) 40%, rgba(7, 9, 11, 0.8) 100%),
    linear-gradient(90deg, rgba(7, 9, 11, 0.2) 0%, rgba(7, 9, 11, 0) 40%, rgba(7, 9, 11, 0.7) 75%, rgba(7, 9, 11, 0.9) 100%);
}

/* miedz na papierze musi byc ciemniejsza, inaczej sciezka znika (lekcja s7) */
.pasmo--jasne { --akcent: #A96F2E; --akcent-j: #A96F2E; --akcent-tekst: #EDE9E3; --pole-tlo: rgba(7, 9, 11, 0.04); }

h1 em, h2 em, h3 em { font-style: normal; color: var(--akcent-j); font-weight: 600; }
.nadtytul { letter-spacing: 0.26em; }
.nawi__marka { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.02em; text-transform: uppercase; }
.przycisk { border-radius: 0; }
.liczba__v { color: var(--akcent-j); letter-spacing: -0.03em; }
.pasmo--jasne .liczba__v { color: var(--akcent); }
.tabela td b { font-family: var(--f-display); font-weight: 600; letter-spacing: -0.02em; }

/* ---------- siatka laminatu: podklad sekcji bez fotografii ---------- */
.laminat {
  background-image:
    linear-gradient(to right, var(--wlos-2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--wlos-2) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* ---------- sitodruk: pas nadruku pod pierwszym ekranem ---------- */
.sitodruk {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 34px;
  border-top: 1px solid var(--wlos); padding-top: 14px;
  font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tekst-3);
}
.sitodruk b { font-weight: 400; color: var(--akcent); }

/* ---------- oznaczenie elementu: U1 / R2 / D3 zamiast ikony ---------- */
.el { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: baseline; gap: 6px 18px; padding: 16px 0; border-top: 1px solid var(--wlos-2); }
.el:last-child { border-bottom: 1px solid var(--wlos-2); }
.el u { text-decoration: none; font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.14em; color: var(--akcent); }
.el span, .el b { font-family: var(--f-display); font-size: var(--step-1); font-weight: 500; letter-spacing: -0.005em; }
.el small { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--tekst-3); text-align: right; white-space: nowrap; }
.el p { grid-column: 2 / -1; color: var(--tekst-2); font-size: var(--step--1); max-width: none; }
a.el:hover span, a.el:hover b { color: var(--akcent-j); }
.karta__nr--el { font-size: 0.82rem; letter-spacing: 0.14em; }

/* odczyt liczbowy: liczba jest dowodem */
.odczyt > b { display: block; font-family: var(--f-display); font-weight: 600; font-size: var(--step-4); line-height: 1; letter-spacing: -0.03em; }
.odczyt b i { font-style: normal; color: var(--akcent-j); }
.odczyt > span { display: block; margin-top: 10px; font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tekst-3); }

/* ---------- pierwszy ekran: fotografia plyty, elementy po prawej ---------- */
.hero-s48 { display: grid; gap: clamp(32px, 5vw, 64px); }
.hero-s48__gora { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px var(--gutter); align-items: end; }
.hero-s48__tresc { display: grid; gap: 22px; }
.hero-s48__tresc .tytul--1 { font-size: clamp(2.5rem, 1.3rem + 5vw, 5.2rem); max-width: 16ch; }
.hero-s48__bok { display: grid; gap: 28px; }
.pierwszy .tlo-foto__img { object-position: 22% 55%; }
@media (max-width: 900px) { .hero-s48__gora { grid-template-columns: minmax(0, 1fr); } .pierwszy .tlo-foto__img { object-position: 30% 60%; } }

.tlo-foto--pas { --tint: linear-gradient(180deg, rgba(7, 9, 11, 0.82) 0%, rgba(7, 9, 11, 0.25) 50%, rgba(7, 9, 11, 0.92) 100%); }
.tlo-foto--pas .tlo-foto__img { filter: contrast(1.06) saturate(1.02); }
/* s4: lede sekcji "czesci" lezy na jasnej czesci fotografii (rozlozone podzespoly), cien pod tekstem */
.tlo-foto--pas .podglowa__wnetrze .lede { text-shadow: 0 1px 3px rgba(7, 9, 11, 0.9), 0 0 28px rgba(7, 9, 11, 0.85); }
.okno { position: relative; overflow: hidden; }
.okno img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: var(--okno-ar, 4 / 3); object-position: var(--foto-poz, 50% 50%); filter: contrast(1.05); }
.okno::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid rgba(201, 138, 70, 0.35); }

/* ---------- sciezka miedziana z przelotkami: komponent podpisowy (js/podpis.js) ----------
   Tryb "elementy": pionowa sciezka wzdluz listy, przelotka przy kazdej pozycji.
   Tryb "przebieg": pozioma sciezka przez cztery pola lutownicze (kadr 03),
   na telefonie pionowa. Rysowanie: transform i opacity (zasada ruchu). */
.sciezka { position: relative; }
.sciezka--elementy { padding-left: 34px; }
.sciezka--elementy::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 1.4px; background: var(--akcent); opacity: 0.85; transform-origin: top; transform: scaleY(0); transition: transform 1.1s var(--ease); }
.sciezka--elementy .via { position: absolute; left: 0; width: 13px; height: 13px; border-radius: 50%; border: 1.4px solid var(--akcent); background: var(--tlo); opacity: 0; transition: opacity 0.4s var(--ease) calc(var(--i, 0) * 220ms + 500ms); }
.sciezka--elementy .via::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--akcent); }
.sciezka--elementy .via--galaz::before { content: ""; position: absolute; left: 12px; top: 5px; width: 20px; height: 1px; background: var(--akcent); opacity: 0.6; }
.sciezka.jest-widoczna.sciezka--elementy::before, html:not(.js) .sciezka--elementy::before { transform: scaleY(1); }
.sciezka.jest-widoczna .via, html:not(.js) .via { opacity: 1; }

.sciezka--przebieg { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 0; }
.sciezka--przebieg::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 1.4px; background: var(--akcent); opacity: 0.85; transform-origin: left; transform: scaleX(0); transition: transform 1.4s var(--ease); }
.sciezka.jest-widoczna.sciezka--przebieg::before, html:not(.js) .sciezka--przebieg::before { transform: scaleX(1); }
.pole-lut { position: relative; display: grid; gap: 10px; padding: 44px 24px 0 0; }
.pole-lut::before { content: ""; position: absolute; left: -7px; top: -1px; width: 28px; height: 28px; background: var(--akcent); opacity: 0.16; }
.pole-lut .via { position: absolute; left: -3px; top: 3px; width: 20px; height: 20px; border: 1.4px solid var(--akcent); background: var(--tlo); opacity: 0; transition: opacity 0.4s var(--ease) calc(var(--i, 0) * 320ms + 300ms); }
.pole-lut .via::after { content: ""; position: absolute; inset: 5.6px; border-radius: 50%; background: var(--akcent); }
.pole-lut__czas { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tekst-3); white-space: nowrap; }
.pole-lut u { text-decoration: none; font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--akcent); }
.pole-lut b { font-family: var(--f-display); font-size: var(--step-1); font-weight: 600; letter-spacing: -0.01em; }
.pole-lut p { color: var(--tekst-2); font-size: var(--step--1); max-width: 34ch; }
.pole-lut small { font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tekst-3); }
.pole-lut.jest-za { opacity: 0.55; }
.pole-lut.jest-aktywny::before { opacity: 0.4; }
.pole-lut.jest-aktywny .via::after { background: var(--akcent-j); }
.pole-lut.jest-aktywny u { color: var(--akcent-j); }
.pole-lut.jest-aktywny b::after { content: " · teraz"; font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em; color: var(--akcent-j); }
.pole-lut.jest-przed { opacity: 0.4; }
.pole-lut.jest-przed .via::after { background: transparent; }
.pasmo--jasne .pole-lut .via, .pasmo--jasne .sciezka--elementy .via { background: var(--tlo); }
@media (max-width: 760px) {
  .sciezka--przebieg { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-left: 34px; }
  .sciezka--przebieg::before { left: 6px; right: auto; top: 0; bottom: 0; width: 1.4px; height: auto; transform-origin: top; transform: scaleY(0); }
  .sciezka.jest-widoczna.sciezka--przebieg::before, html:not(.js) .sciezka--przebieg::before { transform: scaleY(1); }
  .pole-lut { padding: 0 0 0 0; }
  .pole-lut::before { left: -41px; top: -4px; }
  .pole-lut .via { left: -37px; top: 0; }
  .pole-lut__czas { position: static; transform: none; order: 10; }
}

/* linie odniesienia z fotografii do wycen (kadr 02): callouty pod pasem */
.callout { display: grid; gap: 6px; padding-top: 18px; border-top: 1.4px solid var(--akcent); position: relative; }
.callout::before { content: ""; position: absolute; left: 0; top: -7px; width: 13px; height: 13px; border-radius: 50%; background: var(--akcent); }
.callout u { text-decoration: none; font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--akcent); }
.callout b { font-family: var(--f-display); font-size: var(--step-2); font-weight: 600; letter-spacing: -0.02em; }
.callout span { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--tekst-3); }
.callout span i { font-style: normal; color: var(--tekst); }

/* mapa jezykiem plytki (kadr 04) */
.mapa-s48 svg { width: 100%; height: auto; display: block; }
.mapa-s48 .sc { fill: none; stroke: var(--akcent); stroke-width: 1.4; opacity: 0.85; }
.mapa-s48 .sc-slaba { fill: none; stroke: var(--akcent); stroke-width: 1; opacity: 0.3; }
.mapa-s48 .via { fill: var(--tlo); stroke: var(--akcent); stroke-width: 1.4; }
.mapa-s48 .via-r { fill: var(--akcent); }
.mapa-s48 .pole { fill: var(--akcent); opacity: 0.14; }
.mapa-s48 .punkt { font-family: var(--f-display); font-size: 15px; font-weight: 600; fill: var(--tekst); letter-spacing: 0.04em; }
.mapa-s48 .ulica { font-family: var(--f-mono); font-size: 10.5px; fill: var(--tekst-3); letter-spacing: 0.16em; }

/* status zlecenia: numer jak z systemu */
.status__numer { font-family: var(--f-mono); font-size: var(--step-2); letter-spacing: 0.06em; }
.status__glowa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 24px; padding-bottom: 18px; border-bottom: 1px solid var(--wlos); }
.status__historia li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-top: 1px solid var(--wlos-2); font-size: var(--step--1); color: var(--tekst-2); }
.status__historia li u { text-decoration: none; font-family: var(--f-mono); color: var(--akcent); letter-spacing: 0.14em; }
.status__przyklady { display: flex; flex-wrap: wrap; gap: 8px; }
.wycena__kwota b { font-family: var(--f-display); font-weight: 600; letter-spacing: -0.03em; }