/* ===== 01-tokeny.css ===== */
/* ==================================================================
   Boothivo v5 — tokeny i podstawy
   Wartości z PROFIL-GRAFICZNY.md. Kontrasty policzone w profilu:
   morski/ciepła biel 11,02:1 · morski/pomarańczowy 4,52:1 ·
   pomocniczy/ciepła biel 5,44:1. Biały na pomarańczowym ma 2,66:1
   i jest zakazany — przycisk pomarańczowy ma morski napis.
   ================================================================== */

:root {
  
  --sala: #091919;
  --sala-glab: #061111;
  --morski: #123c40;
  --morski-jasny: #1b5155;
  --jasny: #f5f7f4;
  --papier: #f6f5f0;
  --biel: #fff;
  --pomaranczowy: #ff7547;
  --pomaranczowy-ciemny: #e85f33;
  --pomocniczy: #526867;
  --linia: #cad6d2;

  
  --jasny-70: rgba(245, 247, 244, 0.7);
  --jasny-55: rgba(245, 247, 244, 0.55);
  --jasny-30: rgba(245, 247, 244, 0.3);
  --jasny-16: rgba(245, 247, 244, 0.16);
  --jasny-08: rgba(245, 247, 244, 0.08);

  
  --krój-naglowek: "Gabarito", "Segoe UI", system-ui, sans-serif;
  --krój-tekst: "Nunito Sans", "Segoe UI", system-ui, sans-serif;

  
  --o1: 4px;
  --o2: 8px;
  --o3: 12px;
  --o4: 16px;
  --o6: 24px;
  --o8: 32px;
  --o12: 48px;
  --o16: 64px;
  --o24: 96px;

  
  --r-kontrolka: 12px;
  --r-karta: 20px;
  --r-powierzchnia: 28px;

  
  --tresc-max: 1280px;
  
  --tresc-szeroki: 1400px;
  --kontrolka-min: 48px;
  --o5: 20px;

  
  --ruch: 180ms;
  --ruch-krzywa: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ruch: 1ms;
  }
}



@font-face {
  font-family: "Gabarito";
  src: url("fonts/gabarito-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Gabarito";
  src: url("fonts/gabarito-latin-ext.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("fonts/nunito-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("fonts/nunito-latin-ext.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}



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

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--sala);
  color: var(--jasny);
  font-family: var(--krój-tekst);
  font-size: 18px;
  line-height: 1.56;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  
  overflow-x: clip;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}


:focus-visible {
  outline: 2px solid var(--jasny);
  outline-offset: 3px;
  border-radius: 4px;
}

.strefa-papier :focus-visible {
  outline-color: var(--morski);
}


.pomin {
  position: absolute;
  left: var(--o4);
  top: var(--o4);
  z-index: 100;
  padding: var(--o3) var(--o6);
  background: var(--pomaranczowy);
  color: var(--morski);
  font-weight: 800;
  text-decoration: none;
  border-radius: var(--r-kontrolka);
  transform: translateY(-160%);
  transition: transform var(--ruch) var(--ruch-krzywa);
}

.pomin:focus {
  transform: translateY(0);
}


[data-reveal] {
  transition: opacity 0.6s var(--ruch-krzywa), transform 0.6s var(--ruch-krzywa);
}

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

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    transition: none;
  }
  [data-reveal].przed-wejsciem {
    opacity: 1;
    transform: none;
  }
}


.tylko-czytnik {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== 02-typografia.css ===== */
/* ==================================================================
   Typografia
   Skala z profilu marki, nagłówki w Gabarito 800.
   Wielkie litery tylko w krótkich oznaczeniach sekcji.
   ================================================================== */

h1,
h2,
h3,
h4 {
  font-family: var(--krój-naglowek);
  font-weight: 800;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(42px, 7.2vw, 76px);
  line-height: 0.9;
  letter-spacing: -0.035em;
}

h2 {
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 0.98;
  letter-spacing: -0.028em;
}

h3 {
  font-size: clamp(20px, 2.1vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

h4 {
  font-size: 18px;
  line-height: 1.28;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
  max-width: 68ch;
}

strong {
  font-weight: 800;
}

.etykieta {
  display: flex;
  align-items: center;
  gap: var(--o3);
  margin: 0 0 var(--o6);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pomaranczowy);
}

.etykieta::before {
  content: "";
  width: 34px;
  height: 2px;
  background: currentColor;
  flex: none;
}

.strefa-papier .etykieta {
  color: var(--pomocniczy);
}

.strefa-papier .etykieta::before {
  background: var(--pomaranczowy);
}

.wstep {
  margin-top: var(--o6);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--jasny-70);
  max-width: 58ch;
}

.strefa-papier .wstep {
  color: var(--pomocniczy);
}

.podpis {
  font-size: 14px;
  line-height: 1.5;
  color: var(--jasny-55);
}

.strefa-papier .podpis {
  color: var(--pomocniczy);
}

.znacznik-wizualizacja {
  position: absolute;
  left: var(--o3);
  bottom: var(--o3);
  padding: 6px 11px;
  background: rgba(9, 25, 25, 0.84);
  border: 1px solid var(--jasny-16);
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jasny-70);
  backdrop-filter: blur(4px);
}

.liczba {
  font-family: var(--krój-naglowek);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* ===== 03-uklad.css ===== */
/* ==================================================================
   Układ: nagłówek, strefy, kontrolki, stopka
   ================================================================== */

.kontener {
  width: 100%;
  max-width: var(--tresc-max);
  margin-inline: auto;
  padding-inline: var(--o6);
}

@media (min-width: 768px) {
  .kontener {
    padding-inline: var(--o12);
  }
}

.kontener--szeroki {
  max-width: var(--tresc-szeroki);
}

.naglowek {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(9, 25, 25, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--jasny-08);
}

.naglowek-rzad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--o6);
  min-height: 72px;
}

.naglowek-logo {
  flex: none;
  display: flex;
  align-items: center;
  
  min-height: 44px;
}

.naglowek-logo img {
  height: 30px;
  width: auto;
}

.naglowek-nawigacja {
  order: 3;
  width: 100%;
  display: flex;
  gap: var(--o5, 20px);
  padding-bottom: var(--o1);
  border-top: 1px solid var(--jasny-08);
  font-size: 14px;
  font-weight: 700;
  overflow-x: auto;
  scrollbar-width: none;
}

.naglowek-nawigacja::-webkit-scrollbar {
  display: none;
}

.naglowek-nawigacja a {
  white-space: nowrap;
}

@media (min-width: 900px) {
  .naglowek-nawigacja {
    order: 0;
    width: auto;
    margin-left: auto;
    gap: var(--o8);
    padding-bottom: 0;
    border-top: 0;
    overflow: visible;
    font-size: 15px;
  }
}

.naglowek-nawigacja a[aria-current="true"] {
  color: var(--jasny);
  box-shadow: inset 0 -2px 0 var(--pomaranczowy);
}

.naglowek-nawigacja a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  color: var(--jasny-70);
  transition: color var(--ruch) var(--ruch-krzywa);
}

.naglowek-nawigacja a:hover {
  color: var(--jasny);
}

.naglowek-akcje {
  display: flex;
  align-items: center;
  gap: var(--o4);
  margin-left: auto;
}

@media (min-width: 900px) {
  .naglowek-akcje {
    margin-left: 0;
  }
}

.naglowek-jezyk {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jasny-55);
  text-decoration: none;
  padding: var(--o2) var(--o3);
  border: 1px solid var(--jasny-16);
  border-radius: var(--r-kontrolka);
  transition: color var(--ruch), border-color var(--ruch);
}

.naglowek-jezyk:hover {
  color: var(--jasny);
  border-color: var(--jasny-30);
}

.r {
  position: relative;
  padding-block: var(--o16);
  scroll-margin-top: 80px;
}

@media (min-width: 768px) {
  .r {
    padding-block: var(--o24);
  }
}

.strefa-sala {
  background: var(--sala);
}

.strefa-morska {
  background: var(--morski);
}

.strefa-papier {
  background: var(--papier);
  color: var(--morski);
  border-top: 3px solid var(--pomaranczowy);
  border-bottom: 3px solid var(--pomaranczowy);
}

.strefa-papier + .strefa-papier {
  border-top: 0;
}

.r-naglowek {
  max-width: 56ch;
}

.r-naglowek--szeroki {
  max-width: 74ch;
}

.dwie-kolumny {
  display: grid;
  gap: var(--o12);
  align-items: center;
}

@media (min-width: 900px) {
  .dwie-kolumny {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--o16);
  }
  .dwie-kolumny--tekst-wezszy {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

.przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--o2);
  min-height: var(--kontrolka-min);
  padding: var(--o3) var(--o6);
  border-radius: var(--r-kontrolka);
  font-weight: 800;
  font-size: 15.5px;
  text-decoration: none;
  text-align: center;
  transition: background-color var(--ruch) var(--ruch-krzywa),
    border-color var(--ruch) var(--ruch-krzywa), transform var(--ruch) var(--ruch-krzywa);
}

.przycisk:active {
  transform: translateY(1px);
}

.przycisk--glowny {
  background: var(--pomaranczowy);
  color: var(--morski);
}

.przycisk--glowny:hover {
  background: var(--pomaranczowy-ciemny);
}

.przycisk--drugi {
  border: 1.5px solid var(--jasny-30);
  color: var(--jasny);
}

.przycisk--drugi:hover {
  border-color: var(--jasny);
}

.strefa-papier .przycisk--drugi {
  border-color: var(--morski);
  color: var(--morski);
}

.przycisk--maly {
  min-height: 44px;
  padding: var(--o2) var(--o4);
  font-size: 14px;
}

.akcje {
  display: flex;
  flex-wrap: wrap;
  gap: var(--o3);
  margin-top: var(--o8);
}

.znaczniki {
  display: flex;
  flex-wrap: wrap;
  gap: var(--o2);
  margin-top: var(--o6);
}

.znaczniki li {
  padding: 7px 14px;
  border: 1px solid var(--jasny-16);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--jasny-70);
}

.okno {
  position: relative;
  border: 3px solid var(--morski);
  border-radius: var(--r-karta);
  overflow: hidden;
  background: #0c1f20;
}

.okno img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.strefa-papier .okno {
  border-color: var(--linia);
  background: var(--biel);
}

.stopka {
  background: var(--sala-glab);
  border-top: 1px solid var(--jasny-08);
  padding-block: var(--o16) var(--o8);
}

.stopka-rzad {
  display: grid;
  gap: var(--o12);
}

@media (min-width: 768px) {
  .stopka-rzad {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}

.stopka-haslo {
  font-family: var(--krój-naglowek);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin-top: var(--o4);
}

.stopka-logo img {
  height: 28px;
  width: auto;
}

.stopka h2 {
  font-size: 11.5px;
  font-family: var(--krój-tekst);
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--jasny-55);
  margin-bottom: var(--o4);
}

.stopka a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--jasny-70);
  text-decoration: none;
  transition: color var(--ruch);
}

.stopka a:hover {
  color: var(--jasny);
  text-decoration: underline;
}

.stopka li + li {
  margin-top: 0;
}

.stopka-do-uzupelnienia {
  color: var(--jasny-55);
  font-size: 15px;
  line-height: 1.5;
}

.stopka-dol {
  margin-top: var(--o16);
  padding-top: var(--o6);
  border-top: 1px solid var(--jasny-08);
  display: flex;
  flex-wrap: wrap;
  gap: var(--o4) var(--o8);
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--jasny-55);
}

.stopka-sprzedawca {
  font-style: normal;
  font-size: 15px;
  line-height: 1.6;
  color: var(--jasny-70);
}

/* ===== 04-rozdzialy.css ===== */
/* ==================================================================
   Rozdziały 01–03
   ================================================================== */



.r-start {
  padding-block: var(--o8) var(--o16);
  overflow: hidden; 
}

@media (min-width: 1100px) {
  .r-start {
    padding-block: var(--o8) var(--o16);
    min-height: calc(100vh - 72px);
    display: flex;
    align-items: center;
  }
  .r-start > .kontener {
    width: 100%;
  }
}


.gora-poswiata {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(46% 54% at 80% 40%, rgba(255, 117, 71, 0.17), transparent 70%),
    radial-gradient(42% 48% at 6% 6%, rgba(27, 81, 85, 0.55), transparent 72%);
}

.gora-poswiata::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23z)' opacity='0.05'/%3E%3C/svg%3E");
}

.gora-uklad {
  display: grid;
  gap: 40px;
}


@media (min-width: 760px) {
  .gora-uklad {
    grid-template-columns: minmax(0, 1fr) minmax(270px, 340px);
    grid-template-areas:
      "tekst fotki"
      "plyta plyta";
    gap: var(--o12);
    align-items: center;
  }

  .gora-tekst {
    grid-area: tekst;
  }

  .gora-fotki {
    grid-area: fotki;
  }

  .gora-plyta {
    grid-area: plyta;
  }
}

@media (min-width: 1100px) {
  .gora-uklad {
    grid-template-columns: 326px minmax(0, 1fr) minmax(320px, 400px);
    grid-template-areas: "plyta tekst fotki";
  }
}


#start-naglowek {
  font-size: clamp(44px, 5.6vw, 78px);
}

.gora-wiersz {
  display: block;
}

.gora-akcent {
  color: var(--pomaranczowy);
}

.gora-podnaglowek {
  margin-top: var(--o6);
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.5;
  color: var(--jasny-70);
  max-width: 42ch;
}


.gora-okno {
  aspect-ratio: 2 / 3;
  box-shadow: 0 40px 90px -45px rgba(0, 0, 0, 0.95);
}

.gora-pod-kadrem {
  margin-top: var(--o4);
  display: flex;
  align-items: center;
  gap: var(--o4);
}

.gora-pod-kadrem input {
  flex: 1 1 auto;
  min-width: 110px;
  max-width: 210px;
  accent-color: var(--pomaranczowy);
  min-height: 44px;
}

.gora-wskazowka {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--jasny-55);
}


.gora-plyta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--o4) var(--o6);
}

.gora-nazwa {
  width: 200px;
  height: auto;
}

.gora-znak {
  --s: 2;
  position: relative;
  flex: none;
  width: calc(133px * var(--s));
  height: calc(241px * var(--s));
}


.gora-znak-kadr {
  position: absolute;
  width: calc(68px * var(--s) + 2px);
  height: calc(47px * var(--s) + 2px);
  border-radius: calc(11px * var(--s));
  overflow: hidden;
  background: #0c1f20;
  transform: translate(-50%, -50%) rotate(8deg);
}

.gora-znak-kadr picture,
.gora-znak-kadr img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gora-znak-kadr--pierwszy {
  left: calc(64.5px * var(--s));
  top: calc(47px * var(--s));
}

.gora-znak-kadr--drugi {
  left: calc(57px * var(--s));
  top: calc(114.5px * var(--s));
}


.gora-znak-obrys {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

.gora-znak-notka {
  position: absolute;
  left: calc(51px * var(--s));
  top: calc(182px * var(--s));
  width: calc(68px * var(--s));
  height: calc(47px * var(--s));
  margin: 0;
  padding: calc(5px * var(--s)) calc(6px * var(--s));
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: translate(-50%, -50%) rotate(8deg);
  
  border-radius: calc(11px * var(--s));
  background: var(--pomaranczowy);
  color: var(--morski);
  font-size: calc(5px * var(--s));
  line-height: 1.3;
}

.gora-znak-notka strong {
  font-family: var(--krój-naglowek);
  
  font-size: calc(6.6px * var(--s));
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-bottom: calc(2px * var(--s));
  white-space: nowrap;
}


.gora-znak-podpis {
  flex: 1 1 100%;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--jasny-55);
}

@media (min-width: 1100px) {
  .gora-plyta {
    display: block;
  }
  .gora-nazwa {
    width: 232px;
  }
  .gora-znak {
    
    --s: 2.45;
    margin-top: var(--o6);
  }
  .gora-znak-podpis {
    margin-top: var(--o4);
  }
}



.suwak-okno {
  
  --odslona: 34%;
  position: relative;
  touch-action: pan-y;
  cursor: ew-resize;
}

.suwak-warstwa {
  position: absolute;
  inset: 0;
}

.suwak-warstwa picture,
.suwak-warstwa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.suwak-warstwa--po {
  clip-path: inset(0 0 0 var(--odslona));
}

.suwak-etykieta {
  position: absolute;
  top: var(--o3);
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(9, 25, 25, 0.84);
  border: 1px solid var(--jasny-16);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jasny-70);
}

.suwak-etykieta--przed {
  left: var(--o3);
}

.suwak-etykieta--po {
  right: var(--o3);
  background: var(--pomaranczowy);
  border-color: var(--pomaranczowy);
  color: var(--morski);
}

.suwak-linia {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--odslona);
  width: 2px;
  background: var(--pomaranczowy);
  pointer-events: none;
}

.suwak-chwyt {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--pomaranczowy);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.7);
}

.suwak-chwyt::before,
.suwak-chwyt::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border: 2px solid var(--morski);
  border-width: 2px 2px 0 0;
}

.suwak-chwyt::before {
  left: 12px;
  transform: translateY(-50%) rotate(-135deg);
}

.suwak-chwyt::after {
  right: 12px;
  transform: translateY(-50%) rotate(45deg);
}



.odslony {
  display: grid;
  gap: var(--o8);
  margin-top: var(--o12);
}

@media (min-width: 620px) {
  .odslony {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--o6);
  }
}

.odslona-okno {
  aspect-ratio: 2 / 3;
}

.odslona--zrodlo .odslona-okno {
  border-color: var(--jasny-16);
}

.odslona-nazwa {
  margin-top: var(--o4);
  font-family: var(--krój-naglowek);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.015em;
}

.odslona-opis {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--jasny-55);
}

.odslony-wyjasnienie {
  margin-top: var(--o8);
  max-width: 70ch;
}



.karty {
  display: grid;
  gap: var(--o4);
  margin-top: var(--o12);
}

@media (min-width: 620px) {
  .karty {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .karty {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--o6);
  }
}

.karta {
  padding: var(--o6);
  border: 1px solid var(--jasny-16);
  border-radius: var(--r-karta);
  background: rgba(9, 25, 25, 0.35);
  transition: border-color var(--ruch) var(--ruch-krzywa);
}

.karta:hover {
  border-color: var(--jasny-30);
}

.karta-tytul {
  color: var(--jasny);
}

.karta-tekst {
  margin-top: var(--o3);
  color: var(--jasny-70);
  font-size: 16.5px;
  line-height: 1.5;
}

.karta-zwykle {
  margin-top: var(--o4);
  padding-top: var(--o4);
  border-top: 1px solid var(--jasny-08);
  font-size: 14px;
  line-height: 1.45;
  color: var(--jasny-55);
}

.karta-zwykle-etykieta {
  font-weight: 800;
  color: var(--pomaranczowy);
}

/* ===== 05-infografiki.css ===== */
/* ==================================================================
   Rozdziały 04–10: Oprawa AI, gość, przebieg, sala, wydruk, kolekcje,
   porównanie. Wszystkie infografiki są czytelne bez animacji i na telefonie.
   ================================================================== */

.blok-naglowek {
  font-family: var(--krój-naglowek);
  font-weight: 800;
  font-size: clamp(24px, 2.8vw, 32px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  max-width: 30ch;
}

.lista-znaczona {
  margin-top: var(--o8);
  display: grid;
  gap: var(--o4);
}

.lista-znaczona li {
  position: relative;
  padding-left: var(--o6);
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--jasny-70);
}

.lista-znaczona li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 9px;
  height: 2px;
  background: var(--pomaranczowy);
}

.strefa-papier .lista-znaczona li {
  color: var(--pomocniczy);
}

.oprawa-os {
  margin-top: var(--o16);
  display: grid;
  gap: var(--o12);
}

@media (min-width: 900px) {
  .oprawa-os {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--o6);
    
    position: relative;
  }
  .oprawa-os::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 230px;
    height: 1px;
    background: var(--jasny-16);
  }
}

.oprawa-krok {
  position: relative;
}

.oprawa-krok-material {
  height: 200px;
  display: flex;
  align-items: flex-end;
  margin-bottom: var(--o8);
}

@media (min-width: 900px) {
  .oprawa-krok-tekst::before {
    content: "";
    position: absolute;
    top: 226px;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--pomaranczowy);
  }
}

.oprawa-krok-numer {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pomaranczowy);
  margin-bottom: var(--o2);
}

@media (min-width: 900px) {
  .oprawa-krok-numer {
    margin-top: var(--o6);
  }
}

.oprawa-krok-tekst h3 {
  margin-bottom: var(--o3);
}

.oprawa-krok-tekst p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--jasny-70);
}

.oprawa-material {
  width: 100%;
}

.oprawa-zaproszenie {
  position: relative;
  padding: var(--o6) var(--o4);
  background: #f1ece2;
  color: #4a3f33;
  border-radius: var(--r-kontrolka);
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.8);
  transform: rotate(-1.6deg);
}

.oprawa-zaproszenie-etykieta {
  position: absolute;
  top: -10px;
  right: var(--o3);
  padding: 3px 9px;
  background: var(--morski);
  color: var(--jasny);
  font-family: var(--krój-tekst);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 6px;
}

.oprawa-zaproszenie-nad {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6b5e50;
}

.oprawa-zaproszenie-imiona {
  margin: var(--o3) 0;
  font-size: 26px;
  line-height: 1.1;
}

.oprawa-zaproszenie-data {
  font-size: 13px;
  letter-spacing: 0.1em;
  color: #6b5e50;
}

.oprawa-fakty {
  padding: var(--o4);
  border: 1px solid var(--jasny-16);
  border-radius: var(--r-kontrolka);
  background: rgba(18, 60, 64, 0.5);
}

.oprawa-fakty-tytul {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jasny-55);
  margin-bottom: var(--o3);
}

.oprawa-fakty li {
  display: flex;
  justify-content: space-between;
  gap: var(--o3);
  padding: var(--o2) 0;
  border-top: 1px solid var(--jasny-08);
  font-size: 14px;
}

.oprawa-fakt-nazwa {
  color: var(--jasny-55);
}

.oprawa-fakt-wartosc {
  font-weight: 700;
}

.oprawa-fakty li:not(.oprawa-fakt-brak) .oprawa-fakt-wartosc::after {
  content: " ✓";
  color: var(--pomaranczowy);
}

.oprawa-fakt-brak .oprawa-fakt-wartosc {
  font-weight: 400;
  font-style: italic;
  color: var(--jasny-55);
}

.oprawa-kierunki {
  display: flex;
  gap: var(--o2);
  align-items: flex-end;
}

.oprawa-kierunek {
  flex: 1;
  border: 2px solid var(--jasny-16);
  border-radius: var(--r-kontrolka);
  overflow: hidden;
  aspect-ratio: 1;
}

.oprawa-kierunek img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.oprawa-kierunek.jest-wybrany {
  border-color: var(--pomaranczowy);
  transform: translateY(-8px) scale(1.06);
}

.oprawa-wynik {
  display: flex;
  gap: var(--o3);
  align-items: flex-end;
}

.oprawa-wynik-ekran {
  position: relative;
  flex: 1.3;
  aspect-ratio: 4 / 3;
  border: 2px solid var(--jasny-16);
  border-radius: var(--r-kontrolka);
  overflow: hidden;
}

.oprawa-wynik-ekran img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.oprawa-wynik-ekran b,
.oprawa-wynik-ekran i {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  text-align: center;
  padding-inline: var(--o2);
}

.oprawa-wynik-ekran b {
  bottom: 26px;
  font-family: var(--krój-naglowek);
  font-size: 15px;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 6px rgba(9, 25, 25, 0.9);
}

.oprawa-wynik-ekran i {
  bottom: 9px;
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jasny-70);
  text-shadow: 0 1px 6px rgba(9, 25, 25, 0.9);
}

.oprawa-wynik-ekran::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62px;
  background: linear-gradient(to top, rgba(9, 25, 25, 0.88), rgba(9, 25, 25, 0));
  pointer-events: none;
}

.oprawa-wynik-wydruk {
  flex: 0.7;
  border: 2px solid var(--jasny-16);
  border-radius: var(--r-kontrolka);
  overflow: hidden;
}

.oprawa-wynik-wydruk img {
  width: 100%;
  height: auto;
}

.oprawa-domkniecie {
  margin-top: var(--o16);
  padding: var(--o8);
  border: 1px solid var(--jasny-16);
  border-left: 3px solid var(--pomaranczowy);
  border-radius: var(--r-karta);
  background: rgba(18, 60, 64, 0.35);
}

.oprawa-domkniecie-tresc p {
  margin-top: var(--o3);
  color: var(--jasny-70);
}

.oprawa-zastrzezenie {
  margin-top: var(--o6);
  padding-top: var(--o4);
  border-top: 1px solid var(--jasny-08);
}

.zestawy {
  margin-top: var(--o12);
}

.zestawy-tytul {
  font-size: 11.5px;
  font-family: var(--krój-tekst);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jasny-55);
  margin-bottom: var(--o4);
}

.zestawy li {
  padding: var(--o3) 0;
  border-top: 1px solid var(--jasny-08);
}

.zestaw-nazwa {
  display: block;
  font-weight: 800;
  font-size: 16.5px;
}

.zestaw-opis {
  display: block;
  font-size: 14.5px;
  color: var(--jasny-55);
}

.ekran-kiosku {
  padding: var(--o6);
  border: 3px solid var(--morski);
  border-radius: var(--r-karta);
  background: linear-gradient(165deg, #0f2a2c, #091919);
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.9);
}

.ekran-kiosku-gora {
  display: flex;
  align-items: center;
  gap: var(--o3);
  margin-bottom: var(--o6);
}

.ekran-kiosku-krok {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jasny-55);
  white-space: nowrap;
}

.ekran-kiosku-postep {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--jasny-16);
  overflow: hidden;
}

.ekran-kiosku-postep i {
  display: block;
  width: var(--postep, 50%);
  height: 100%;
  background: var(--pomaranczowy);
}

.ekran-kiosku-pytanie {
  font-family: var(--krój-naglowek);
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.02em;
  margin-bottom: var(--o6);
}

.ekran-kiosku-kafelki {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--o3);
}

.kafelek {
  display: grid;
  place-items: center;
  min-height: 84px;
  padding: var(--o3);
  text-align: center;
  border: 1.5px solid var(--jasny-16);
  border-radius: var(--r-kontrolka);
  background: rgba(245, 247, 244, 0.04);
  font-weight: 700;
  font-size: 15px;
}

.kafelek.jest-wybrany {
  border-color: var(--pomaranczowy);
  background: var(--pomaranczowy);
  color: var(--morski);
}

.faceswap {
  margin-top: var(--o24);
  display: grid;
  gap: var(--o8);
  align-items: center;
}

@media (min-width: 900px) {
  .faceswap {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--o16);
  }
}

.faceswap-tresc p {
  margin-top: var(--o4);
  color: var(--jasny-70);
}

.faceswap-okno {
  aspect-ratio: 4 / 5;
}

.etapy {
  margin-top: var(--o16);
  display: grid;
  gap: var(--o8);
  counter-reset: etap;
}

@media (min-width: 800px) {
  .etapy {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--o6);
  }
}

.etap {
  position: relative;
  padding-top: var(--o6);
  border-top: 2px solid var(--jasny-16);
  counter-increment: etap;
}

.etap::before {
  content: counter(etap, decimal-leading-zero);
  position: absolute;
  top: calc(-1 * var(--o6) - 4px);
  left: 0;
  font-family: var(--krój-naglowek);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--pomaranczowy);
}

.etap-kiedy {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jasny-55);
}

.etap-tytul {
  margin: var(--o2) 0 var(--o4);
}

.etap-punkty {
  display: grid;
  gap: var(--o2);
}

.etap-punkty li {
  padding-left: var(--o4);
  position: relative;
  font-size: 16px;
  color: var(--jasny-70);
}

.etap-punkty li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--jasny-30);
}

.r-sala-dodatek {
  margin-top: var(--o4);
  color: var(--jasny-55);
  max-width: 58ch;
}

.kolejka {
  margin: var(--o16) 0 0;
  padding: var(--o8);
  border: 1px solid var(--jasny-16);
  border-radius: var(--r-karta);
  background: rgba(18, 60, 64, 0.3);
}

.kolejka-tytul {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jasny-55);
  margin-bottom: var(--o6);
}

.kolejka-os {
  display: none;
}

@media (min-width: 700px) {
  .kolejka-os {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--o2);
    margin-left: 120px;
    margin-bottom: var(--o2);
  }
  .kolejka-os span {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--jasny-55);
  }
}

.kolejka-tor {
  display: grid;
  gap: var(--o2);
  margin-bottom: var(--o4);
}

@media (min-width: 700px) {
  .kolejka-tor {
    grid-template-columns: 120px 1fr;
    align-items: center;
    gap: var(--o4);
  }
}

.kolejka-tor-nazwa {
  font-weight: 800;
  font-size: 14px;
}

.kolejka-tor ol {
  display: grid;
  gap: var(--o2);
}

@media (min-width: 700px) {
  .kolejka-tor ol {
    grid-template-columns: repeat(4, 1fr);
  }
}

.kolejka-krok {
  padding: var(--o3);
  border-radius: var(--r-kontrolka);
  border: 1px solid var(--jasny-16);
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--jasny-55);
  min-height: 56px;
  display: flex;
  align-items: center;
}

.kolejka-krok--budka {
  background: var(--pomaranczowy);
  border-color: var(--pomaranczowy);
  color: var(--morski);
  font-weight: 800;
}

.kolejka-krok--odbior {
  background: rgba(245, 247, 244, 0.1);
  border-color: var(--jasny-30);
  color: var(--jasny);
  font-weight: 800;
}

.kolejka-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--o4);
  margin-top: var(--o6);
  padding-top: var(--o4);
  border-top: 1px solid var(--jasny-08);
  font-size: 13px;
  color: var(--jasny-55);
}

.kolejka-znacznik {
  display: inline-flex;
  align-items: center;
  gap: var(--o2);
}

.kolejka-znacznik::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.kolejka-znacznik--budka::before {
  background: var(--pomaranczowy);
}

.kolejka-znacznik--odbior::before {
  background: rgba(245, 247, 244, 0.35);
}

.internet {
  margin-top: var(--o16);
}

.internet-tytul {
  font-family: var(--krój-naglowek);
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.02em;
  margin-bottom: var(--o6);
}

.internet-kolumny {
  display: grid;
  gap: var(--o4);
}

@media (min-width: 700px) {
  .internet-kolumny {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--o6);
  }
}

.internet-kolumna {
  padding: var(--o6);
  border-radius: var(--r-karta);
  border: 1px solid var(--jasny-16);
}

.internet-kolumna h4 {
  display: flex;
  align-items: center;
  gap: var(--o2);
  margin-bottom: var(--o4);
  font-family: var(--krój-tekst);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.internet-kolumna h4::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}

.internet-kolumna--dziala {
  border-color: rgba(255, 117, 71, 0.45);
}

.internet-kolumna--dziala h4::before {
  background: var(--pomaranczowy);
}

.internet-kolumna--czeka h4::before {
  background: var(--jasny-30);
}

.internet-kolumna li {
  padding: var(--o2) 0;
  border-top: 1px solid var(--jasny-08);
  font-size: 16px;
  color: var(--jasny-70);
}

.internet-kolumna--czeka li {
  color: var(--jasny-55);
}

.internet-domkniecie {
  margin-top: var(--o6);
  color: var(--jasny-70);
  max-width: 64ch;
}

.kiosk {
  margin-top: var(--o16);
  display: grid;
  gap: var(--o8);
}

@media (min-width: 900px) {
  .kiosk {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--o16);
    align-items: start;
  }
}

.gotowosc {
  padding: var(--o6);
  border: 1px solid var(--jasny-16);
  border-radius: var(--r-karta);
  background: rgba(18, 60, 64, 0.4);
}

.gotowosc-tytul {
  font-family: var(--krój-naglowek);
  font-size: 18px;
  margin-bottom: var(--o2);
}

.gotowosc-tekst {
  font-size: 15px;
  color: var(--jasny-55);
  margin-bottom: var(--o4);
}

.gotowosc-lista li {
  display: flex;
  align-items: center;
  gap: var(--o3);
  padding: var(--o3) 0;
  border-top: 1px solid var(--jasny-08);
  font-weight: 700;
  font-size: 15px;
}

.gotowosc-stan {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pomaranczowy);
  flex: none;
}

.wydruk-uklad {
  margin-top: var(--o16);
  display: grid;
  gap: var(--o12);
}

@media (min-width: 800px) {
  .wydruk-uklad {
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--o16);
  }
}

.wydruk-podtytul {
  font-family: var(--krój-tekst);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jasny-55);
  margin-bottom: var(--o4);
}

.wydruk-formaty ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--o2);
}

.wydruk-formaty li span {
  display: block;
  padding: var(--o3) var(--o4);
  border: 1px solid var(--jasny-16);
  border-radius: var(--r-kontrolka);
  font-family: var(--krój-naglowek);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.wydruk-kanaly li {
  display: grid;
  gap: 2px;
  padding: var(--o4) 0;
  border-top: 1px solid var(--jasny-08);
}

@media (min-width: 560px) {
  .wydruk-kanaly li {
    grid-template-columns: 150px 1fr;
    gap: var(--o4);
    align-items: baseline;
  }
}

.kanal-nazwa {
  font-family: var(--krój-naglowek);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.kanal-opis {
  color: var(--jasny-70);
  font-size: 16px;
}

.kolekcje-pasek {
  margin-top: var(--o12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--o4) var(--o8);
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--o4);
  border-bottom: 1px solid var(--linia);
}

.kolekcje-liczby {
  display: flex;
  flex-wrap: wrap;
  gap: var(--o6);
  font-size: 15px;
  color: var(--pomocniczy);
}

.kolekcje-liczby b {
  font-size: 22px;
  color: var(--morski);
  margin-right: 4px;
}

.sciana {
  margin-top: var(--o8);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 148px;
  gap: var(--o4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--o4);
  scrollbar-color: var(--linia) transparent;
}

@media (min-width: 900px) {
  .sciana {
    grid-auto-columns: 168px;
  }
}

.sciana-kafel {
  scroll-snap-align: start;
}

.sciana-obraz {
  display: block;
  
  position: relative;
  padding: 6px;
  background: var(--biel);
  border: 1px solid var(--linia);
  border-radius: 10px;
  overflow: hidden;
}

.sciana-obraz img {
  width: 100%;
  height: auto;
  display: block;
}

.sciana-nazwa {
  display: block;
  margin-top: var(--o3);
  font-weight: 800;
  font-size: 14px;
  color: var(--morski);
}

.sciana-grupa {
  display: block;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pomocniczy);
}

.kolekcje-zrodlo {
  margin-top: var(--o4);
}

.tabela-otoczka {
  margin-top: var(--o12);
  overflow-x: auto;
  border: 1px solid var(--jasny-16);
  border-radius: var(--r-karta);
}

.tabela {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 15.5px;
}

.tabela th,
.tabela td {
  padding: var(--o4) var(--o6);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--jasny-08);
}

.tabela thead th {
  font-family: var(--krój-tekst);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jasny-55);
  background: rgba(9, 25, 25, 0.4);
  position: sticky;
  top: 0;
}

.tabela tbody th {
  font-weight: 800;
  color: var(--jasny);
  position: sticky;
  left: 0;
  background: var(--morski);
  min-width: 150px;
}

.tabela td {
  color: var(--jasny-55);
}

.tabela .tabela-nasza {
  color: var(--jasny);
  background: rgba(255, 117, 71, 0.09);
  font-weight: 700;
}

.tabela thead .tabela-nasza {
  color: var(--pomaranczowy);
  background: rgba(255, 117, 71, 0.14);
}

.tabela tbody tr:last-child th,
.tabela tbody tr:last-child td {
  border-bottom: 0;
}

.tabela-stopka {
  margin-top: var(--o4);
}

@media (max-width: 699px) {
  .tabela-otoczka {
    overflow-x: visible;
    border: 0;
    border-radius: 0;
  }

  .tabela,
  .tabela tbody,
  .tabela tr,
  .tabela th,
  .tabela td {
    display: block;
    min-width: 0;
    position: static;
  }

  .tabela thead {
    display: none;
  }

  .tabela tbody tr {
    margin-bottom: var(--o4);
    border: 1px solid var(--jasny-16);
    border-radius: var(--r-karta);
    overflow: hidden;
  }

  .tabela tbody th {
    background: rgba(9, 25, 25, 0.45);
    font-family: var(--krój-naglowek);
    font-size: 18px;
    letter-spacing: -0.015em;
    padding: var(--o3) var(--o4);
    border-bottom: 1px solid var(--jasny-16);
  }

  .tabela td {
    padding: var(--o3) var(--o4);
    border-bottom: 0;
  }

  .tabela td::before {
    content: attr(data-etykieta);
    display: block;
    margin-bottom: 2px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--jasny-55);
  }

  .tabela .tabela-nasza::before {
    color: var(--pomaranczowy);
  }
}

/* ==================================================================
   Stany scenek prowadzonych przewijaniem.
   Atrybuty data-aktywny i data-krok ustawia skrypt i tylko wtedy, gdy
   ruch jest dozwolony. Bez nich wszystko jest w stanie docelowym, więc
   bez JavaScriptu i przy prefers-reduced-motion nic nie jest przygaszone.
   ================================================================== */

.oprawa-os[data-aktywny] .oprawa-krok {
  opacity: 0.32;
  transition: opacity 420ms var(--ruch-krzywa);
}

.oprawa-os[data-aktywny="0"] .oprawa-krok[data-oprawa-krok="0"],
.oprawa-os[data-aktywny="1"] .oprawa-krok[data-oprawa-krok="0"],
.oprawa-os[data-aktywny="1"] .oprawa-krok[data-oprawa-krok="1"],
.oprawa-os[data-aktywny="2"] .oprawa-krok[data-oprawa-krok="0"],
.oprawa-os[data-aktywny="2"] .oprawa-krok[data-oprawa-krok="1"],
.oprawa-os[data-aktywny="2"] .oprawa-krok[data-oprawa-krok="2"],
.oprawa-os[data-aktywny="3"] .oprawa-krok {
  opacity: 1;
}

.oprawa-os[data-aktywny] .oprawa-krok-tekst::before {
  transition: transform 420ms var(--ruch-krzywa);
}

.oprawa-os[data-aktywny="1"] .oprawa-krok[data-oprawa-krok="1"] .oprawa-krok-tekst::before,
.oprawa-os[data-aktywny="2"] .oprawa-krok[data-oprawa-krok="2"] .oprawa-krok-tekst::before,
.oprawa-os[data-aktywny="3"] .oprawa-krok[data-oprawa-krok="3"] .oprawa-krok-tekst::before,
.oprawa-os[data-aktywny="0"] .oprawa-krok[data-oprawa-krok="0"] .oprawa-krok-tekst::before {
  transform: scale(1.5);
}

.kolejka[data-krok] .kolejka-krok {
  opacity: 0.22;
  transition: opacity 380ms var(--ruch-krzywa), transform 380ms var(--ruch-krzywa);
}

.kolejka[data-krok] .kolejka-tor ol > li:nth-child(1) {
  opacity: 1;
}

.kolejka[data-krok="1"] .kolejka-tor ol > li:nth-child(-n + 2),
.kolejka[data-krok="2"] .kolejka-tor ol > li:nth-child(-n + 3),
.kolejka[data-krok="3"] .kolejka-tor ol > li:nth-child(-n + 4) {
  opacity: 1;
}

.kolejka[data-krok="0"] .kolejka-tor ol > li:nth-child(1),
.kolejka[data-krok="1"] .kolejka-tor ol > li:nth-child(2),
.kolejka[data-krok="2"] .kolejka-tor ol > li:nth-child(3),
.kolejka[data-krok="3"] .kolejka-tor ol > li:nth-child(4) {
  transform: translateY(-3px);
}

.kolejka[data-krok] .kolejka-os span {
  opacity: 0.3;
  transition: opacity 380ms var(--ruch-krzywa), color 380ms var(--ruch-krzywa);
}

.kolejka[data-krok="0"] .kolejka-os span:nth-child(1),
.kolejka[data-krok="1"] .kolejka-os span:nth-child(2),
.kolejka[data-krok="2"] .kolejka-os span:nth-child(3),
.kolejka[data-krok="3"] .kolejka-os span:nth-child(4) {
  opacity: 1;
  color: var(--pomaranczowy);
}

/* ===== 06-koszty-i-start.css ===== */
/* ==================================================================
   Rozdziały 11–12: koszty z kalkulatorem, prywatność, wsparcie, sprzęt,
   pytania, wezwanie i formularz.
   ================================================================== */

.koszt-podtytul {
  font-family: var(--krój-tekst);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pomocniczy);
  margin-bottom: var(--o6);
}

.koszt-zdjecia {
  margin-top: var(--o16);
}

.rownanie {
  display: grid;
  gap: var(--o4);
  align-items: stretch;
  max-width: none;
}

@media (min-width: 760px) {
  .rownanie {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: var(--o4);
    align-items: center;
  }
}

.rownanie-czlon {
  display: block;
  padding: var(--o6);
  background: var(--biel);
  border: 1px solid var(--linia);
  border-radius: var(--r-karta);
}

.rownanie-czlon b {
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1;
  color: var(--morski);
}

.rownanie-czlon i {
  font-style: normal;
  font-size: 15px;
  font-weight: 800;
  color: var(--pomocniczy);
  margin-left: 5px;
}

.rownanie-czlon em {
  display: block;
  margin-top: var(--o3);
  font-style: normal;
  font-size: 14px;
  font-weight: 700;
  color: var(--morski);
}

.rownanie-czlon em small {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--pomocniczy);
}

.rownanie-czlon--wynik {
  background: var(--morski);
  border-color: var(--morski);
}

.rownanie-czlon--wynik b {
  color: var(--pomaranczowy);
}

.rownanie-czlon--wynik i,
.rownanie-czlon--wynik em,
.rownanie-czlon--wynik em small {
  color: var(--papier);
}

.rownanie-znak {
  display: block;
  text-align: center;
  font-family: var(--krój-naglowek);
  font-weight: 800;
  font-size: 24px;
  color: var(--pomocniczy);
}

.udzial {
  margin: var(--o16) 0 0;
}

.udzial-tytul {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pomocniczy);
  margin-bottom: var(--o4);
}

.udzial-slupek {
  position: relative;
  height: 68px;
  border: 1px solid var(--linia);
  border-radius: var(--r-kontrolka);
  background: var(--biel);
  overflow: hidden;
}

.udzial-ai {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--udzial, 5%);
  background: var(--pomaranczowy);
}

.udzial-opis {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  font-size: 13px;
  line-height: 1.25;
  color: var(--pomocniczy);
}

.udzial-opis b {
  display: block;
  font-family: var(--krój-naglowek);
  font-weight: 800;
  font-size: 16px;
  color: var(--morski);
}

.udzial-opis--ai {
  left: calc(var(--udzial, 5%) + var(--o4));
}

.udzial-opis--wynajem {
  right: var(--o4);
  text-align: right;
}

@media (max-width: 620px) {
  .udzial-slupek {
    height: 120px;
  }
  .udzial-opis--ai {
    left: var(--o4);
    top: 26px;
    translate: 0 0;
  }
  .udzial-opis--wynajem {
    top: auto;
    bottom: var(--o3);
    translate: 0 0;
  }
}

.udzial-wniosek {
  margin-top: var(--o4);
  font-size: 17px;
}

.udzial-wniosek b {
  color: var(--morski);
  font-weight: 800;
}

.udzial .podpis {
  margin-top: var(--o3);
}

.kalkulator {
  margin-top: var(--o24);
  padding: var(--o8);
  background: var(--biel);
  border: 1px solid var(--linia);
  border-radius: var(--r-powierzchnia);
}

@media (min-width: 760px) {
  .kalkulator {
    padding: var(--o12);
  }
}

.kalkulator-naglowek p {
  color: var(--pomocniczy);
  margin-top: calc(-1 * var(--o4));
  margin-bottom: var(--o8);
}

.kalkulator-uklad {
  display: grid;
  gap: var(--o12);
}

@media (min-width: 900px) {
  .kalkulator-uklad {
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--o16);
  }
}

.suwak-pole {
  display: block;
  margin-bottom: var(--o8);
}

.suwak-pole-etykieta label {
  cursor: pointer;
}

.suwak-pole-etykieta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--o3);
  font-size: 14px;
  font-weight: 700;
  color: var(--morski);
  margin-bottom: var(--o2);
}

.suwak-pole-etykieta output {
  font-family: var(--krój-naglowek);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--morski);
}

.suwak-pole input[type="range"] {
  width: 100%;
  min-height: var(--kontrolka-min);
  accent-color: var(--pomaranczowy);
}

.suwak-pole-zakres {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--pomocniczy);
}

.suwak-pole-zakres i {
  font-style: normal;
}

.modele {
  border: 0;
  margin: 0;
  padding: 0;
}

.modele legend {
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--morski);
  margin-bottom: var(--o3);
}

.model {
  display: flex;
  gap: var(--o3);
  align-items: flex-start;
  padding: var(--o3);
  border: 1px solid var(--linia);
  border-radius: var(--r-kontrolka);
  margin-bottom: var(--o2);
  cursor: pointer;
  transition: border-color var(--ruch) var(--ruch-krzywa),
    background-color var(--ruch) var(--ruch-krzywa);
}

.model:hover {
  border-color: var(--morski);
}

.model input {
  margin-top: 3px;
  accent-color: var(--pomaranczowy);
  width: 20px;
  height: 20px;
  flex: none;
}

.model:has(input:checked) {
  border-color: var(--pomaranczowy);
  background: rgba(255, 117, 71, 0.08);
}

.model-nazwa {
  display: flex;
  align-items: center;
  gap: var(--o2);
  font-weight: 800;
  color: var(--morski);
}

.model-polecany {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--pomaranczowy);
  color: var(--morski);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.model-opis {
  display: block;
  font-size: 13.5px;
  color: var(--pomocniczy);
}

.kalkulator-suma {
  display: flex;
  align-items: baseline;
  gap: var(--o3);
  padding-bottom: var(--o4);
  border-bottom: 1px solid var(--linia);
  margin-bottom: var(--o6);
}

.kalkulator-suma-etykieta {
  order: 2;
  font-size: 14px;
  color: var(--pomocniczy);
}

.kalkulator-suma b {
  font-size: 32px;
  color: var(--morski);
}

.wykres {
  display: grid;
  gap: var(--o4);
}

.wykres-wiersz {
  display: grid;
  gap: var(--o2);
}

@media (min-width: 620px) {
  .wykres-wiersz {
    grid-template-columns: 160px 1fr 128px;
    gap: var(--o4);
    align-items: center;
  }
}

.wykres-nazwa {
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--pomocniczy);
}

.wykres-wiersz--nasz .wykres-nazwa {
  font-family: var(--krój-naglowek);
  font-weight: 800;
  font-size: 18px;
  color: var(--morski);
}

.wykres-slupek {
  display: block;
  height: 28px;
  border-radius: 6px;
  background: #ecebe4;
  overflow: hidden;
}

.wykres-slupek i {
  display: block;
  width: var(--udzial, 0%);
  height: 100%;
  background: var(--morski);
  transition: width 320ms var(--ruch-krzywa);
}

.wykres-wiersz--nasz .wykres-slupek i {
  background: var(--pomaranczowy);
}

@media (prefers-reduced-motion: reduce) {
  .wykres-slupek i {
    transition: none;
  }
}

.wykres-kwoty {
  display: flex;
  flex-direction: column;
  font-variant-numeric: tabular-nums;
}

.wykres-kwoty b {
  font-weight: 800;
  font-size: 15px;
  color: var(--morski);
}

.wykres-kwoty small {
  font-size: 12.5px;
  color: var(--pomocniczy);
}

.kalkulator-komunikat {
  margin-top: var(--o6);
  padding: var(--o4);
  border-radius: var(--r-kontrolka);
  font-size: 15.5px;
  line-height: 1.45;
}

.kalkulator-komunikat[data-ton="dobry"] {
  background: rgba(255, 117, 71, 0.12);
  border-left: 3px solid var(--pomaranczowy);
  color: var(--morski);
}

.kalkulator-komunikat[data-ton="uwaga"] {
  background: #f0efe8;
  border-left: 3px solid var(--pomocniczy);
  color: var(--morski);
}

.kalkulator-zastrzezenie {
  margin-top: var(--o4);
}

.kalkulator-akcja {
  margin-top: var(--o6);
}

.r-zaufanie > .kontener > .r-naglowek {
  margin-bottom: var(--o8);
}

.prywatnosc,
.wsparcie,
.sprzet,
.pytania,
.start-teraz {
  padding-top: var(--o16);
  border-top: 1px solid var(--jasny-08);
  margin-top: var(--o16);
}

.prywatnosc {
  padding-top: 0;
  border-top: 0;
  margin-top: 0;
}

.sciezka {
  margin-top: var(--o12);
  display: grid;
  gap: var(--o4);
}

@media (min-width: 860px) {
  .sciezka {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--o4);
  }
}

.sciezka-krok {
  position: relative;
  display: flex;
  gap: var(--o4);
  padding: var(--o6);
  border: 1px solid var(--jasny-16);
  border-radius: var(--r-karta);
  background: rgba(18, 60, 64, 0.28);
}

@media (min-width: 860px) {
  .sciezka-krok {
    display: block;
  }
  
  .sciezka-krok:not(:last-child)::after {
    content: "";
    position: absolute;
    right: calc(-1 * var(--o4) - 1px);
    top: 50%;
    width: var(--o4);
    height: 1px;
    background: var(--jasny-16);
  }
}

.sciezka-numer {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--pomaranczowy);
  color: var(--morski);
  font-family: var(--krój-naglowek);
  font-weight: 800;
  font-size: 14px;
}

@media (min-width: 860px) {
  .sciezka-numer {
    margin-bottom: var(--o4);
  }
}

.sciezka-tresc b {
  display: block;
  font-family: var(--krój-naglowek);
  font-size: 18px;
  letter-spacing: -0.015em;
  margin-bottom: var(--o1);
}

.sciezka-tresc span {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--jasny-70);
}

.prywatnosc-dodatek {
  margin-top: var(--o6);
  color: var(--jasny-55);
}

.wsparcie {
  display: grid;
  gap: var(--o8);
  align-items: center;
}

@media (min-width: 900px) {
  .wsparcie {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--o16);
  }
}

.rozmowa {
  margin: 0;
  padding: var(--o6);
  border: 1px solid var(--jasny-16);
  border-radius: var(--r-karta);
  background: rgba(18, 60, 64, 0.35);
}

.rozmowa-pytanie {
  margin: 0;
  padding: var(--o4);
  border-radius: var(--r-kontrolka);
  background: var(--pomaranczowy);
  color: var(--morski);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
}

.rozmowa-podpis {
  margin-top: var(--o3);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jasny-55);
}

.zestaw {
  margin-top: var(--o12);
  display: grid;
  gap: var(--o3);
}

@media (min-width: 760px) {
  .zestaw {
    grid-template-columns: repeat(5, 1fr);
  }
}

.zestaw-element {
  padding: var(--o6) var(--o4);
  border: 1px solid var(--jasny-16);
  border-radius: var(--r-karta);
  background: rgba(18, 60, 64, 0.28);
}

.zestaw-element--opcja {
  border-style: dashed;
  background: none;
}

.zestaw-znacznik {
  display: inline-block;
  margin-bottom: var(--o3);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pomaranczowy);
}

.zestaw-element--opcja .zestaw-znacznik {
  color: var(--jasny-55);
}

.zestaw-nazwa-elementu {
  display: block;
  font-family: var(--krój-naglowek);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
}

.zestaw-opis-elementu {
  display: block;
  margin-top: var(--o1);
  font-size: 14px;
  color: var(--jasny-70);
}

.sprawdzone {
  margin-top: var(--o8);
  padding: var(--o6);
  border-left: 3px solid var(--pomaranczowy);
  background: rgba(18, 60, 64, 0.3);
  border-radius: 0 var(--r-karta) var(--r-karta) 0;
}

.sprawdzone h4 {
  margin-bottom: var(--o2);
}

.sprawdzone p {
  color: var(--jasny-70);
}

.pytania-lista {
  margin-top: var(--o8);
  border-top: 1px solid var(--jasny-16);
}

.pytanie {
  border-bottom: 1px solid var(--jasny-16);
}

.pytanie summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--o4);
  padding: var(--o4) 0;
  min-height: var(--kontrolka-min);
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 17px;
}

.pytanie summary::-webkit-details-marker {
  display: none;
}

.pytanie summary:hover .pytanie-tresc {
  color: var(--pomaranczowy);
}

.pytanie-znak {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
}

.pytanie-znak::before,
.pytanie-znak::after {
  content: "";
  position: absolute;
  background: var(--pomaranczowy);
  transition: transform var(--ruch) var(--ruch-krzywa);
}

.pytanie-znak::before {
  left: 0;
  top: 9px;
  width: 20px;
  height: 2px;
}

.pytanie-znak::after {
  left: 9px;
  top: 0;
  width: 2px;
  height: 20px;
}

.pytanie[open] .pytanie-znak::after {
  transform: scaleY(0);
}

.pytanie p {
  padding: 0 0 var(--o6);
  max-width: 74ch;
  color: var(--jasny-70);
}

.start-uklad {
  margin-top: var(--o12);
  display: grid;
  gap: var(--o8);
}

@media (min-width: 960px) {
  .start-uklad {
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--o16);
    align-items: start;
  }
}

.drogi {
  display: grid;
  gap: var(--o4);
}

.droga {
  padding: var(--o6);
  border: 1px solid var(--jasny-16);
  border-radius: var(--r-karta);
  background: rgba(18, 60, 64, 0.28);
}

.droga h4 {
  font-family: var(--krój-naglowek);
  font-size: 20px;
  letter-spacing: -0.02em;
  margin-bottom: var(--o2);
}

.droga p {
  margin-bottom: var(--o4);
  font-size: 15.5px;
  color: var(--jasny-70);
}

.formularz {
  padding: var(--o8);
  background: var(--papier);
  color: var(--morski);
  border-radius: var(--r-powierzchnia);
}

.formularz :focus-visible {
  outline-color: var(--morski);
}

.formularz-tytul {
  font-family: var(--krój-naglowek);
  font-size: 22px;
  letter-spacing: -0.02em;
}

.formularz-wstep {
  margin: var(--o2) 0 var(--o6);
  font-size: 15px;
  color: var(--pomocniczy);
}

.pole {
  margin-bottom: var(--o4);
}

.pole label {
  display: block;
  margin-bottom: var(--o1);
  font-size: 13.5px;
  font-weight: 700;
}

.pole input,
.pole textarea {
  width: 100%;
  min-height: var(--kontrolka-min);
  padding: var(--o3) var(--o4);
  border: 1.5px solid var(--morski);
  border-radius: var(--r-kontrolka);
  background: var(--biel);
  color: var(--morski);
  font: inherit;
  font-size: 16px;
}

.pole textarea {
  min-height: 104px;
  resize: vertical;
}

.pole input::placeholder,
.pole textarea::placeholder {
  color: #8ba09d;
}

.pole--zgoda {
  display: flex;
  align-items: flex-start;
  gap: var(--o3);
  margin-bottom: var(--o6);
}

.pole--zgoda input {
  width: 22px;
  height: 22px;
  min-height: 0;
  margin-top: 2px;
  flex: none;
  accent-color: var(--pomaranczowy);
}

.pole--zgoda label {
  margin: 0;
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.4;
}

.pulapka {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formularz button[type="submit"] {
  width: 100%;
}

.formularz button[disabled] {
  opacity: 0.65;
  cursor: progress;
}

.formularz-stan {
  margin-top: var(--o4);
  padding: var(--o3) var(--o4);
  border-radius: var(--r-kontrolka);
  font-size: 15px;
  font-weight: 700;
}

.formularz-stan[data-rodzaj="sukces"] {
  background: rgba(255, 117, 71, 0.16);
  border-left: 3px solid var(--pomaranczowy);
}

.formularz-stan[data-rodzaj="blad"] {
  background: #f6e6e0;
  border-left: 3px solid #b2452a;
  color: #7d2f1b;
}

/* ==================================================================
   Podstrony dokumentowe: regulamin, polityka prywatności.
   Bez paska kadrów i bez scenek — to dokumenty do czytania.
   ================================================================== */

.dokument-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.naglowek--dokument,
.stopka--dokument {
  padding-left: 0;
}

.dokument {
  flex: 1;
  padding-block: var(--o16) var(--o24);
}

.dokument h1 {
  font-size: clamp(34px, 5vw, 52px);
  max-width: 24ch;
}

.dokument > .kontener > .wstep {
  margin-bottom: var(--o16);
}

.dokument-sekcja {
  max-width: 74ch;
  padding-top: var(--o8);
  margin-top: var(--o8);
  border-top: 1px solid var(--jasny-08);
}

.dokument-sekcja h2 {
  font-size: clamp(21px, 2.4vw, 26px);
  margin-bottom: var(--o4);
}

.dokument-sekcja p + p {
  margin-top: var(--o4);
}

.dokument-sekcja p {
  color: var(--jasny-70);
}

.dokument-brak {
  max-width: 74ch;
  padding: var(--o8);
  border: 1px solid var(--pomaranczowy);
  border-left-width: 4px;
  border-radius: var(--r-karta);
  background: rgba(255, 117, 71, 0.07);
}

.dokument-brak h2 {
  font-size: clamp(20px, 2.2vw, 24px);
  color: var(--pomaranczowy);
  margin-bottom: var(--o3);
}

.dokument-brak > p {
  color: var(--jasny-70);
}

.dokument-brak h3 {
  margin-top: var(--o8);
  margin-bottom: var(--o4);
  font-family: var(--krój-tekst);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jasny-55);
}

.dokument-spis {
  counter-reset: punkt;
  display: grid;
  gap: var(--o3);
}

.dokument-spis li {
  counter-increment: punkt;
  position: relative;
  padding-left: var(--o8);
  font-size: 16px;
  line-height: 1.5;
  color: var(--jasny-70);
}

.dokument-spis li::before {
  content: counter(punkt, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1em;
  font-family: var(--krój-naglowek);
  font-weight: 800;
  font-size: 13px;
  color: var(--pomaranczowy);
}

.dokument-brak-kontakt {
  margin-top: var(--o8);
  padding-top: var(--o4);
  border-top: 1px solid var(--jasny-16);
  font-size: 15px;
  color: var(--jasny-55);
}

.dokument-brak-kontakt a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--jasny);
  font-weight: 700;
}

.stopka--dokument {
  padding-block: var(--o8);
}

.stopka--dokument .stopka-dol {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}