/* DJ MEBLE — strona w wyglądzie programu: jasny warsztat (#e9e9e2), panele #fafaf6, ciemne menu #1a1f19, złoto #d3ad75.
   Kolory i nazwy jak w Program/PROJEKT-UI.md. Czcionka: "Segoe UI". */
:root {
  --tlo: #e9e9e2; --panel: #fafaf6; --pom: #f1f2eb; --linia: #d5d9cb; --linia2: #c3c9b6;
  --tekst: #253026; --tekst2: #65715b; --akcent: #94723c; --akcent2: #8d6c34;
  --zloto: #d3ad75; --zloto2: #f1d4a3; --zloto3: #b48a45;
  --menu: #1a1f19; --pasek: #1f241e; --ciemny: #242a23; --ciemny2: #2d342b; --kino: #121510;
  --jasny-na-ciemnym: #e8e9e0; --szary-na-ciemnym: #a9b09f;
  --ok: #2f7d4f; --czerw: #c0392b;
  --gora: 92px; --bok: max(16px, 3.2vw); --bokS: var(--bok);
  --cien: 0 1px 2px rgba(26, 31, 25, .06), 0 8px 24px rgba(26, 31, 25, .08);
  --cien-duzy: 0 2px 6px rgba(26, 31, 25, .08), 0 30px 80px -20px rgba(26, 31, 25, .35);
  --zloty-gradient: linear-gradient(180deg, #ecca93 0%, #d3ad75 52%, #b48a45 100%);
  --r: 14px;
  color-scheme: light;
}
@media (max-width: 900px) { :root { --gora: 68px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--gora); overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body {
  margin: 0; background: var(--tlo); color: var(--tekst);
  font: 500 17px/1.6 "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { margin: 0; line-height: 1.08; letter-spacing: -0.02em; font-weight: 800; }
p { margin: 0; }
::selection { background: var(--zloto2); color: var(--menu); }
:focus-visible { outline: 2px solid var(--zloto3); outline-offset: 3px; border-radius: 6px; }

.wn { width: min(1240px, 100% - 2 * var(--bokS)); margin-inline: auto; }
.etykieta {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--akcent2);
}
.etykieta b {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--zloty-gradient); color: var(--menu); font-size: 12px; letter-spacing: 0; box-shadow: 0 2px 8px rgba(148, 114, 60, .35);
}
.lead { font-size: clamp(17px, 1.35vw, 20px); color: var(--tekst2); max-width: 62ch; }
.lead b { color: var(--akcent2); }
.tytul-split { font-size: clamp(34px, 4.3vw, 62px); max-width: 20ch; }
.naglowek { margin-bottom: clamp(28px, 4vw, 52px); }
.naglowek .lead { margin-top: 18px; }
.naglowek.srodek { text-align: center; }
.naglowek.srodek .tytul-split, .naglowek.srodek .lead { margin-inline: auto; }

/* ---------- przyciski ---------- */
.przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border-radius: 10px; border: 1px solid transparent; font-weight: 800; font-size: 15.5px; text-decoration: none; letter-spacing: .01em;
  transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s; white-space: nowrap;
}
.przycisk svg { width: 16px; height: 16px; }
.przycisk.zloty { background: var(--zloty-gradient); color: var(--menu); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 6px 18px -6px rgba(148, 114, 60, .7); }
.przycisk.zloty:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 10px 26px -8px rgba(148, 114, 60, .9); }
.przycisk.jasny { background: var(--panel); border-color: var(--linia); color: var(--tekst); }
.przycisk.jasny:hover { border-color: var(--zloto3); }
.ciemny .przycisk.jasny, .kino .przycisk.jasny { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: var(--jasny-na-ciemnym); }
.przycisk.duzy { min-height: 58px; padding: 0 30px; font-size: 17px; border-radius: 12px; }

/* ---------- wejście: intro jak w programie ---------- */
.intro { display: none; }
.js .intro { display: grid; place-items: center; position: fixed; inset: 0; z-index: 200; --tlo: 1; }
.intro::before { content: ""; position: absolute; inset: 0; opacity: var(--tlo); background: radial-gradient(120% 90% at 50% 40%, #262c24 0%, #1a1f19 55%, #121510 100%); }
.js.bez-intro .intro { display: none; }
.intro::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 38vh; pointer-events: none; opacity: calc(.5 * var(--tlo));
  background: url(media/program/menu-dol.webp) center bottom / cover no-repeat; -webkit-mask: linear-gradient(transparent, #000 70%); mask: linear-gradient(transparent, #000 70%);
}
.intro-srodek { position: relative; z-index: 1; display: grid; justify-items: center; gap: 18px; text-align: center; padding: 24px; }
.intro-logo { width: clamp(200px, 22vw, 320px); height: auto; filter: drop-shadow(0 12px 40px rgba(211, 173, 117, .25)); }
.intro-haslo, .logo-haslo, .stopka .logo-haslo {
  display: flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 800; letter-spacing: .34em; text-transform: uppercase; color: var(--zloto);
}
.intro-haslo::before, .intro-haslo::after { content: ""; width: 46px; height: 1px; background: linear-gradient(90deg, transparent, var(--zloto3)); }
.intro-haslo::after { transform: scaleX(-1); }
.intro-pasek { position: relative; width: min(340px, 70vw); height: 4px; margin-top: 18px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.intro-pasek i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #b48a45, #f1d4a3, #d3ad75); box-shadow: 0 0 16px rgba(241, 212, 163, .6); border-radius: 4px; }
.intro-napis { min-height: 1.6em; font-size: 14.5px; color: var(--szary-na-ciemnym); font-weight: 600; }
.intro-pomin {
  position: absolute; right: 24px; bottom: 24px; z-index: 2; padding: 10px 16px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .14);
  background: transparent; color: var(--szary-na-ciemnym); font-size: 13.5px; font-weight: 700;
}
.intro-pomin:hover { color: var(--zloto2); border-color: var(--zloto3); }

/* ---------- pasek u góry — zawsze widoczny, jak pasek programu ---------- */
.pasek {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--gora);
  background: linear-gradient(180deg, #232922 0%, var(--pasek) 100%); color: var(--jasny-na-ciemnym);
  box-shadow: 0 1px 0 rgba(211, 173, 117, .22), 0 10px 30px -12px rgba(0, 0, 0, .5);
  transition: background-color .35s, box-shadow .35s;
}
/* po przewinięciu (27.10.2026): szkło — przez pasek prześwituje treść, złota linia mocniejsza */
@supports (backdrop-filter: blur(1px)) {
  .pasek.przewiniety { background: rgba(26, 31, 25, .78); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 1px 0 rgba(211, 173, 117, .32), 0 14px 34px -14px rgba(0, 0, 0, .6); }
}
.pasek .logo img { transition: height .35s; }
.pasek-wn { height: 100%; width: min(1480px, 100% - 2 * var(--bok)); margin-inline: auto; display: flex; align-items: center; gap: 28px; }
.logo { display: flex; align-items: center; gap: 18px; text-decoration: none; flex: none; }
.logo img { height: 58px; width: auto; }
.logo .logo-haslo { position: relative; display: block; padding-left: 18px; font-size: 10.5px; letter-spacing: .3em; line-height: 1.55; white-space: nowrap; }
.logo .logo-haslo span { display: block; }
@media (min-width: 1440px) { .logo .logo-haslo { font-size: 11.5px; } .logo .logo-haslo span { display: inline; } }
.logo .logo-haslo::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 1px; background: linear-gradient(transparent, var(--zloto3), transparent); }
.menu { display: flex; gap: 4px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.menu a {
  position: relative; display: block; padding: 10px 14px; border-radius: 8px; text-decoration: none; font-size: 15px; font-weight: 700; color: #d6d9cc;
  transition: color .2s, background-color .2s;
}
.menu a:hover { color: var(--zloto2); background: rgba(255, 255, 255, .05); }
.menu a.biezacy { color: var(--zloto2); }
.menu a.biezacy::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--zloto); }
.pasek .przycisk { min-height: 44px; }
.menu-guzik { display: none; width: 46px; height: 46px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); place-items: center; color: var(--jasny-na-ciemnym); }
.menu-guzik svg { width: 22px; height: 22px; }
.postep { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, #b48a45, #f1d4a3); }
@media (max-width: 1180px) { .logo .logo-haslo { display: none; } .menu a { padding: 10px 10px; font-size: 14.5px; } }
@media (max-width: 900px) {
  .menu, .pasek .przycisk { display: none; }
  .menu-guzik { display: grid; margin-left: auto; }
  .logo img { height: 44px; }
  .logo .logo-haslo { display: block; font-size: 8.5px; letter-spacing: .24em; padding-left: 12px; }
}
@media (max-width: 380px) { .logo .logo-haslo { display: none; } }

.menu-mobilne {
  position: fixed; inset: 0; z-index: 150; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 90px 28px 40px;
  background: var(--menu) url(media/program/menu-gora.webp) center top / 100% auto no-repeat;
}
.menu-mobilne[hidden] { display: none; }
.menu-mobilne a { display: flex; align-items: baseline; gap: 16px; padding: 12px 4px; text-decoration: none; font-size: 26px; font-weight: 800; color: var(--jasny-na-ciemnym); border-bottom: 1px solid rgba(255, 255, 255, .07); }
.menu-mobilne a i { font-style: normal; font-size: 12px; color: var(--zloto); letter-spacing: .1em; }
.menu-mobilne .zamknij { display: grid; position: absolute; top: 11px; right: var(--bok); }

/* ---------- boczne menu rozdziałów (jak menu programu) ---------- */
.boczne { display: none; }
@media (min-width: 1380px) {
  :root { --bokS: 96px; }
  .boczne {
    display: block; position: fixed; left: 14px; top: calc(var(--gora) + (100vh - var(--gora)) / 2); z-index: 90; transform: translate(-130%, -50%); opacity: 0;
    transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .4s;
  }
  .boczne.widac { transform: translate(0, -50%); opacity: 1; }
  .boczne ol {
    margin: 0; padding: 10px 7px; list-style: none; display: grid; gap: 3px; border-radius: 16px;
    background: var(--menu) url(media/program/menu-gora.webp) center top / 100% auto no-repeat; box-shadow: 0 12px 40px -10px rgba(0, 0, 0, .55), 0 0 0 1px rgba(211, 173, 117, .16);
  }
  .boczne li { position: relative; }
  .boczne a { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 11px; color: #aeb4a5; text-decoration: none; transition: color .25s, background-color .25s; }
  .boczne a:hover { color: var(--zloto2); background: rgba(255, 255, 255, .06); }
  .boczne svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .boczne span {
    position: absolute; left: calc(100% + 14px); top: 50%; translate: -6px -50%; padding: 7px 12px; border-radius: 8px; white-space: nowrap; pointer-events: none;
    background: var(--menu); color: var(--zloto2); font-size: 13px; font-weight: 800; opacity: 0; transition: opacity .2s, translate .2s; box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  }
  .boczne a:hover span, .boczne a:focus-visible span { opacity: 1; translate: 0 -50%; }
  .boczne li.tu a { color: var(--menu); background: var(--zloty-gradient); box-shadow: 0 4px 14px -4px rgba(211, 173, 117, .7); }
  .boczne li.minieta:not(.tu) a::after {
    content: ""; position: absolute; right: 4px; top: 4px; width: 12px; height: 12px; border-radius: 50%;
    background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5.1 8.2 9 4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
    box-shadow: 0 0 0 2px var(--menu);
  }
}

/* ---------- start ---------- */
.hero { position: relative; background: var(--tlo); }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(233, 233, 226, .55) 0%, rgba(233, 233, 226, .2) 30%, var(--tlo) 96%), url(media/program/atelier.webp) center 30% / cover no-repeat;
}
.hero-scena { position: relative; min-height: 100vh; min-height: 100svh; padding: calc(var(--gora) + clamp(28px, 5vh, 64px)) var(--bok) 40px; display: flex; flex-direction: column; align-items: center; overflow: hidden; }
.hero-tekst { position: relative; text-align: center; display: grid; justify-items: center; z-index: 2; }
.hero h1 { font-size: clamp(46px, 7.2vw, 116px); letter-spacing: -0.035em; line-height: .98; margin-bottom: 22px; }
.hero h1 em, .tytul-zloty em {
  font-style: normal; background: linear-gradient(100deg, #94723c 0%, #d3ad75 38%, #f1d4a3 50%, #b48a45 64%, #8d6c34 100%); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: polysk 6s ease-in-out infinite;
}
@keyframes polysk { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.hero .lead { margin-inline: auto; text-align: center; }
.akcje { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.monitor { position: relative; z-index: 1; margin: clamp(28px, 5vh, 56px) auto 0; width: min(1060px, 100%); }
.obudowa { position: relative; padding: 12px; border-radius: 18px; background: linear-gradient(180deg, #2d342b, #1a1f19); box-shadow: var(--cien-duzy), 0 0 0 1px rgba(211, 173, 117, .2) inset; transform-origin: 50% 100%; }
.ekran { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #111; }
.ekran video { width: 100%; height: 100%; object-fit: cover; }
.ekran-blask { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .12) 0%, transparent 35%); }
.noga { width: 16%; height: 46px; margin: 0 auto; background: linear-gradient(90deg, #1d221c, #3a4237, #1d221c); clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); }
.stopa { width: 34%; height: 10px; margin: 0 auto; border-radius: 0 0 14px 14px; background: linear-gradient(180deg, #353d33, #1a1f19); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .4); }
@media (min-width: 1100px) {
  .hero-scena { flex-direction: row; justify-content: center; gap: clamp(30px, 4vw, 72px); padding: calc(var(--gora) + 24px) var(--bokS) 70px; }
  .hero-tekst { flex: 0 1 560px; text-align: left; justify-items: start; }
  .hero h1 { font-size: clamp(52px, 4.7vw, 96px); }
  .hero .lead { text-align: left; margin-inline: 0; }
  .akcje { justify-content: flex-start; }
  .monitor { flex: 0 0 auto; margin: 0; }
}
.przewin { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; z-index: 3; display: grid; justify-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: var(--tekst2); }
.przewin i { width: 22px; height: 34px; border-radius: 12px; border: 2px solid var(--linia2); position: relative; }
.przewin i::after { content: ""; position: absolute; left: 50%; top: 6px; width: 4px; height: 7px; margin-left: -2px; border-radius: 2px; background: var(--zloto3); animation: kolko 1.8s ease-in-out infinite; }
@keyframes kolko { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- rozdziały ---------- */
.rozdzial { position: relative; padding: clamp(80px, 11vh, 140px) 0 clamp(60px, 9vh, 120px); }
.rozdzial.jasny { background: var(--tlo); }
#pulpit { background: linear-gradient(180deg, var(--tlo), var(--pom)); }
#pomiar { background: var(--pom); }
.rozdzial.ciemny { background: var(--menu); color: var(--jasny-na-ciemnym); }
.rozdzial.ciemny .lead, .kino .lead { color: var(--szary-na-ciemnym); }
.rozdzial.ciemny .etykieta, .kino .etykieta { color: var(--zloto); }
#projekt { background: radial-gradient(90% 50% at 50% 0%, #262d24 0%, var(--menu) 70%); }

/* wstęp rozdziału — bez ramki: duży numer, tytuł, grafika etapu wtopiona w tło i kroki „co zobaczysz” */
.wstep {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 10px clamp(20px, 4vw, 60px);
  margin-bottom: clamp(40px, 6vw, 84px); padding-top: clamp(10px, 2vw, 30px);
}
.wstep.srodek { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.wstep.srodek .tytul-split, .wstep.srodek .lead { margin-inline: auto; }
.wstep-nr {
  position: absolute; left: -.04em; top: -.12em; z-index: 0; pointer-events: none; user-select: none;
  font: 400 clamp(140px, 17vw, 280px)/1 "Segoe UI", sans-serif; letter-spacing: -.02em;
  color: rgba(148, 114, 60, .05); -webkit-text-stroke: 2px rgba(148, 114, 60, .26);
}
.wstep.srodek .wstep-nr { left: 50%; translate: -50% 0; }
.ciemny .wstep-nr, .kino .wstep-nr { color: rgba(211, 173, 117, .04); -webkit-text-stroke-color: rgba(211, 173, 117, .24); }
.wstep-tekst { position: relative; z-index: 1; }
.wstep-tekst .lead { margin-top: 18px; }
.wstep-grafika { position: relative; z-index: 0; margin: 0; justify-self: end; width: min(100%, 640px); overflow: hidden; }
.wstep-grafika img {
  width: 100%; height: auto; display: block;
  -webkit-mask: radial-gradient(ellipse 62% 70% at 62% 52%, #000 38%, transparent 74%); mask: radial-gradient(ellipse 62% 70% at 62% 52%, #000 38%, transparent 74%);
}
.wstep-szafki { position: relative; z-index: 0; margin: 0; justify-self: center; width: min(100%, 520px); aspect-ratio: 13 / 9; }
.wstep-szafki img { position: absolute; width: 46%; height: auto; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .55)); }
.wstep-szafki .s1 { left: 4%; top: 0; width: 44%; }
.wstep-szafki .s2 { left: 34%; top: 30%; width: 42%; z-index: 2; }
.wstep-szafki .s3 { right: 0; top: 4%; width: 36%; }
.wstep-szafki::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -2%; height: 18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(211, 173, 117, .22), transparent); z-index: -1; }
.wstep-kroki {
  position: relative; z-index: 1; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 0; margin: clamp(22px, 3vw, 40px) 0 0; padding: 0; list-style: none; width: 100%;
}
.wstep-kroki::before { content: ""; position: absolute; left: calc(100% / var(--n, 5) / 2); right: calc(100% / var(--n, 5) / 2); top: 17px; height: 2px; background: var(--linia2); }
.wstep-kroki::after { content: ""; position: absolute; left: calc(100% / var(--n, 5) / 2); right: calc(100% / var(--n, 5) / 2); top: 17px; height: 2px; background: var(--zloty-gradient); transform-origin: 0 50%; transform: scaleX(var(--k, 0)); }
.ciemny .wstep-kroki::before { background: rgba(255, 255, 255, .12); }
.wstep-kroki a { position: relative; display: grid; justify-items: center; gap: 4px; padding: 0 6px; text-align: center; text-decoration: none; color: inherit; }
.wstep-kroki i {
  display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 8px; border-radius: 50%; font: 800 13px "Segoe UI", sans-serif; font-style: normal;
  background: var(--panel); border: 2px solid var(--zloto3); color: var(--akcent2); box-shadow: 0 0 0 6px var(--tlo-kroku, var(--pom)); transition: background-color .3s, color .3s, transform .3s;
}
.ciemny .wstep-kroki i { background: var(--menu); color: var(--zloto2); --tlo-kroku: var(--menu); }
#pulpit .wstep-kroki i, #cnc .wstep-kroki i { --tlo-kroku: var(--tlo); }
.wstep-kroki a:hover i { background: var(--zloto); color: var(--menu); transform: scale(1.1); }
.wstep-kroki b { font-size: 15px; font-weight: 800; }
.wstep-kroki span { font-size: 12.5px; font-weight: 600; color: var(--tekst2); line-height: 1.35; }
.ciemny .wstep-kroki span { color: var(--szary-na-ciemnym); }
@media (max-width: 900px) {
  .wstep { grid-template-columns: 1fr; }
  .wstep-grafika { justify-self: center; order: -1; width: min(100%, 420px); margin-bottom: -10px; }
  .wstep-szafki { order: -1; width: min(86%, 360px); }
  .wstep-nr { font-size: 110px; top: -.3em; }
  .wstep-kroki { grid-template-columns: 1fr; gap: 12px; }
  .wstep-kroki::before, .wstep-kroki::after { left: 17px; right: auto; top: 18px; bottom: 18px; width: 2px; height: auto; transform-origin: 50% 0; transform: scaleY(var(--k, 0)); }
  .wstep-kroki::before { transform: none; }
  .wstep-kroki a { grid-template-columns: 36px 1fr; justify-items: start; text-align: left; column-gap: 14px; padding: 0; }
  .wstep-kroki i { grid-row: span 2; margin: 0; }
  .wstep.srodek .wstep-kroki a { text-align: left; }
}

/* podrozdział (wewnątrz rozdziału) */
.podrozdzial { margin-top: clamp(70px, 10vw, 140px); margin-bottom: clamp(18px, 3vw, 34px); }
.tytul-podrozdzialu { font-size: clamp(28px, 3.2vw, 46px); max-width: 26ch; }
.tytul-podrozdzialu em, .tytul-split em { font-style: normal; color: var(--zloto); }
.jasny .tytul-podrozdzialu em, .maszyna .tytul-podrozdzialu em { color: var(--akcent); }

/* ---------- samouczek: ekran programu, reszta przyciemniona, pokazany element rozjaśniony ---------- */
.samouczek { position: relative; }
.sam-klej { position: relative; }
.sam-okno { position: relative; margin: 0 auto; width: min(1240px, 100% - 2 * var(--bok)); aspect-ratio: 16 / 9; }
.sam-kadr {
  position: absolute; inset: 0; overflow: hidden; border-radius: 14px; background: var(--menu);
  box-shadow: var(--cien-duzy), 0 0 0 1px rgba(26, 31, 25, .12); contain: layout paint;
}
.samouczek.ciemny .sam-kadr { box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(211, 173, 117, .22); }
.sam-scena { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; will-change: transform; }
.sam-scena img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; user-select: none; -webkit-user-drag: none; }
.sam-scena img.tu { opacity: 1; }
.sam-cien { position: absolute; background: rgba(13, 16, 12, .68); pointer-events: none; }
.sam-ramka {
  position: absolute; pointer-events: none; border-radius: 10px; border: 2px solid var(--zloto2);
  box-shadow: 0 0 0 5px rgba(211, 173, 117, .22), 0 0 34px 4px rgba(241, 212, 163, .38);
}
.sam-ramka::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--zloto2); animation: puls 2.2s ease-out infinite; }
@keyframes puls { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.06); } }
.sam-kursor { position: absolute; left: 0; top: 0; width: 30px; height: 30px; pointer-events: none; will-change: transform; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .45)); }
.sam-kursor svg { width: 100%; height: 100%; }
.sam-klik { position: absolute; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 3px solid var(--zloto2); background: rgba(241, 212, 163, .25); pointer-events: none; opacity: 0; }
.sam-dymek {
  position: absolute; left: 0; top: 0; z-index: 3; width: 350px; padding: 20px 22px 18px; border-radius: 16px;
  background: var(--panel); color: var(--tekst); border: 1px solid var(--linia); box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .55);
  opacity: 0; pointer-events: none;
}
.sam-dymek.widac { pointer-events: auto; }
.sam-dymek::before { content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--zloty-gradient); }
.sam-nr { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--akcent2); }
.sam-nr b { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--menu); color: var(--zloto2); font-size: 12px; letter-spacing: 0; }
.sam-dymek h3 { font-size: 22px; letter-spacing: -0.015em; margin-bottom: 8px; }
.sam-dymek p { font-size: 15.5px; line-height: 1.55; color: var(--tekst2); }
.sam-kropki { display: flex; gap: 6px; margin-top: 16px; align-items: center; }
.sam-kropki button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: var(--linia2); transition: width .3s, background-color .3s; }
.sam-kropki button.tu { width: 26px; background: var(--zloto3); }
.sam-kropki .sam-dalej { width: auto; height: auto; margin-left: auto; padding: 6px 12px; border-radius: 8px; background: var(--menu); color: var(--zloto2); font-size: 12.5px; font-weight: 800; }
.sam-kroki { width: min(860px, 100% - 2 * var(--bok)); margin: 28px auto 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.sam-kroki li { padding: 16px 20px; border-radius: 12px; background: var(--panel); border: 1px solid var(--linia); }
.ciemny .sam-kroki li, .kino .sam-kroki li { background: var(--ciemny); border-color: rgba(255, 255, 255, .08); }
.sam-kroki h3 { font-size: 19px; margin-bottom: 4px; }
.sam-kroki p { color: var(--tekst2); font-size: 15.5px; }
.ciemny .sam-kroki p, .kino .sam-kroki p { color: var(--szary-na-ciemnym); }
.samouczek.gotowy .sam-kroki { display: none; }
.samouczek.gotowy .sam-klej { height: calc(100vh - var(--gora)); height: calc(100svh - var(--gora)); display: grid; place-items: center; }
.samouczek.gotowy .sam-okno { width: min(1500px, 100vw - 2 * var(--bokS), (100vh - var(--gora) - 48px) * 16 / 9); }
.samouczek.reczny .sam-klej { height: auto; padding: 10px 0 40px; }
@media (max-width: 900px) {
  .samouczek.gotowy .sam-klej { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
  .samouczek.gotowy .sam-okno { width: calc(100% - 2 * var(--bok)); aspect-ratio: auto; height: min(100vw - 2 * var(--bok), 100svh - var(--gora) - 270px); min-height: 220px; }
  .sam-kadr { border-radius: 10px; }
  .sam-dymek { position: relative; left: auto !important; top: auto !important; width: calc(100% - 2 * var(--bok)); margin: 0 auto; padding: 16px 18px 14px; }
  .sam-dymek h3 { font-size: 19px; }
  .sam-dymek p { font-size: 14.5px; }
  .sam-kursor { width: 22px; height: 22px; }
}

/* ---------- pomiar: rzut 2D ---------- */
.rysunek-tor { position: relative; margin-top: clamp(40px, 6vw, 80px); }
.rysunek-klej { min-height: calc(100vh - var(--gora)); display: grid; align-items: center; padding: 20px 0; }
.rysunek-wn { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(20px, 3vw, 44px); align-items: center; }
.rysunek-arkusz {
  position: relative; border-radius: 18px; padding: 48px 20px 16px; background-color: #fbfbf7; border: 1px solid var(--linia); box-shadow: var(--cien);
  background-image: linear-gradient(rgba(101, 113, 91, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(101, 113, 91, .07) 1px, transparent 1px);
  background-size: 28px 28px; background-position: -1px -1px;
}
.arkusz-naglowek { position: absolute; left: 0; right: 0; top: 0; padding: 12px 20px; border-bottom: 1px solid var(--linia); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tekst2); background: var(--panel); border-radius: 18px 18px 0 0; }
.rzut { width: 100%; height: auto; max-height: calc(100vh - var(--gora) - 150px); margin: 0 auto; overflow: visible; font-family: "Segoe UI", sans-serif; }
.rzut .podloga { fill: #f3ecdf; }
.rzut .sciana { fill: none; stroke: #3b4637; stroke-width: 70; stroke-linejoin: miter; }
.rzut .sciana-lico { fill: none; stroke: #f8f8f4; stroke-width: 20; opacity: .55; }
.rzut .wym { stroke: #8d6c34; stroke-width: 9; fill: none; }
.rzut .wym-k { stroke: #8d6c34; stroke-width: 9; }
.rzut .wymiar text { font-size: 118px; font-weight: 800; fill: #8d6c34; text-anchor: middle; dominant-baseline: middle; paint-order: stroke; stroke: #fbfbf7; stroke-width: 22px; }
.rzut .okno-r { stroke: #3b4637; stroke-width: 70; }
.rzut .okno-l { stroke: #9fd0ec; stroke-width: 26; }
.rzut .drzwi-l { fill: rgba(148, 114, 60, .08); stroke: #94723c; stroke-width: 9; stroke-dasharray: 26 18; }
.rzut .drzwi-r { stroke: #94723c; stroke-width: 18; }
.rzut .opis-el, .rzut .opis-ins { font-size: 96px; font-weight: 800; fill: #65715b; text-anchor: middle; dominant-baseline: middle; }
.rzut .grzejnik { fill: #e7e2d6; stroke: #8f9786; stroke-width: 9; }
.rzut .instal circle.tlo { fill: #fff; }
.rzut .instal text { font-size: 84px; font-weight: 800; text-anchor: middle; dominant-baseline: middle; fill: #fff; }
.rzut .urzadzenie { fill: #fff; stroke: #ca8a04; stroke-width: 10; }
.rzut .urzadzenie.kociol { stroke: #0e7490; }
.rzut .urzadzenie.rozdzielnia { stroke: #d97706; }
.rzut .mebel { fill: #e7d3b1; stroke: #8d6c34; stroke-width: 9; }
.rzut .mebel.w { fill: #c9a774; }
.rzut .mebel.g { fill: rgba(231, 211, 177, .25); stroke-dasharray: 30 20; stroke-width: 8; }
.rzut .mebel-kod { font-size: 92px; font-weight: 800; fill: #4b3a1e; text-anchor: middle; dominant-baseline: middle; }
.rzut .blat { fill: none; stroke: #3b4637; stroke-width: 12; stroke-dasharray: 2 0; opacity: .55; }
.rzut .kontrola { fill: none; stroke: #2f9e5d; stroke-width: 24; stroke-linejoin: round; }
.rzut .ok-znak { fill: #2f9e5d; }
.legenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; font-weight: 700; color: var(--tekst2); }
.legenda li { display: flex; align-items: center; gap: 7px; }
.legenda i { width: 12px; height: 12px; border-radius: 50%; background: var(--k); }
.rysunek-etapy { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: e; }
.rysunek-etapy li {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--linia); background: var(--panel); color: var(--tekst2); font-weight: 700;
  transition: background-color .35s, color .35s, border-color .35s, transform .35s;
}
.rysunek-etapy b { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--pom); border: 1px solid var(--linia); color: var(--tekst2); font-size: 13px; transition: inherit; }
.rysunek-etapy li.tu { background: var(--menu); color: var(--zloto2); border-color: var(--menu); transform: translateX(-8px); box-shadow: var(--cien); }
.rysunek-etapy li.tu b { background: var(--zloty-gradient); color: var(--menu); border-color: transparent; }
.rysunek-etapy li.byl b { background: var(--ok); border-color: var(--ok); color: #fff; }
@media (max-width: 1000px) {
  .rysunek-wn { grid-template-columns: 1fr; }
  .rysunek-etapy { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .rysunek-etapy li { flex-direction: column; gap: 6px; padding: 10px 4px; font-size: 11px; text-align: center; line-height: 1.25; }
  .rysunek-etapy li.tu { transform: translateY(-4px); }
  .rysunek-etapy li span { display: none; }
  .rysunek-etapy li.tu span { display: block; }
  .rysunek-etapy small { display: none; }
  .rysunek-arkusz { padding: 42px 8px 10px; }
  .rzut { max-height: calc(100svh - var(--gora) - 220px); }
}

/* ---------- pomiar: pokój w 3D obraca się przy przewijaniu ---------- */
.obrot-tor { position: relative; margin-top: clamp(40px, 6vw, 80px); }
.obrot-klej { height: calc(100vh - var(--gora)); height: calc(100svh - var(--gora)); display: grid; place-items: center; padding: 0 var(--bokS) 20px; }
.obrot-kadr {
  position: relative; width: min(1400px, 100%, (100vh - var(--gora) - 40px) * 16 / 9); aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden;
  background: var(--k, #dfe3e5); box-shadow: var(--cien-duzy); contain: layout paint;
}
.obrot-kadr video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.obrot-napis { position: absolute; left: clamp(20px, 3vw, 44px); top: clamp(18px, 3vw, 40px); max-width: 30ch; }
.obrot-napis .etykieta { margin-bottom: 10px; }
.obrot-napis h3 { font-size: clamp(24px, 2.6vw, 40px); }
.obrot-kadry { position: absolute; right: clamp(14px, 2vw, 28px); bottom: clamp(14px, 2vw, 28px); margin: 0; padding: 0; list-style: none; display: flex; gap: clamp(8px, 1vw, 14px); }
.obrot-kadry li {
  width: clamp(150px, 15vw, 230px); border-radius: 12px; overflow: hidden; background: var(--panel); box-shadow: 0 18px 40px -14px rgba(26, 31, 25, .55); border: 3px solid var(--panel);
}
.obrot-kadry img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.obrot-kadry span { display: block; padding: 7px 10px 8px; font-size: 12.5px; font-weight: 800; color: var(--tekst); }
.obrot-wskaz { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; display: flex; gap: 4px; }
@media (max-width: 900px) {
  .obrot-klej { padding: 0 var(--bok) 12px; }
  .obrot-kadr { width: 100%; aspect-ratio: auto; height: min(100vw * 1.25, 100svh - var(--gora) - 30px); border-radius: 16px; }
  .obrot-kadr video { object-position: 50% 62%; }
  .obrot-napis { left: 16px; top: 16px; right: 16px; max-width: none; }
  .obrot-napis h3 { font-size: 24px; }
  .obrot-kadry { left: 10px; right: 10px; bottom: 10px; gap: 6px; }
  .obrot-kadry li { flex: 1; width: auto; border-width: 2px; }
  .obrot-kadry span { font-size: 10.5px; padding: 5px 6px 6px; line-height: 1.25; }
}

/* ---------- Meble Projekt: kuchnia składa się szafka po szafce ---------- */
.sklad-tor { position: relative; margin-top: clamp(40px, 6vw, 80px); }
.sklad-klej { height: calc(100vh - var(--gora)); height: calc(100svh - var(--gora)); display: grid; place-items: center; padding: 0 var(--bokS) 20px; }
.sklad-kadr {
  position: relative; width: min(1400px, 100%, (100vh - var(--gora) - 40px) * 16 / 9); aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #2a3028;
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(211, 173, 117, .2); contain: layout paint;
}
.sklad-kadr canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sklad-tytul { position: absolute; left: clamp(20px, 3vw, 40px); top: clamp(18px, 3vw, 36px); max-width: 16ch; font-size: clamp(24px, 2.6vw, 40px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--menu); }
.sklad-info {
  position: absolute; left: 50%; bottom: clamp(14px, 2vw, 26px); translate: -50% 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; align-items: center;
  width: min(560px, 100% - 28px); padding: 12px 18px; border-radius: 14px; background: rgba(26, 31, 25, .9); color: var(--jasny-na-ciemnym); box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}
.sklad-licz { font-size: 14px; font-weight: 700; color: var(--szary-na-ciemnym); white-space: nowrap; }
.sklad-licz b { font-size: 22px; color: var(--zloto2); }
.sklad-nazwa { font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sklad-pasek { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.sklad-pasek i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #b48a45, #f1d4a3); }
@media (max-width: 900px) {
  .sklad-klej { padding: 0 var(--bok) 12px; }
  .sklad-kadr { width: 100%; aspect-ratio: auto; height: min(100vw * 1.25, 100svh - var(--gora) - 30px); border-radius: 16px; }
  .sklad-kadr canvas { object-fit: cover; object-position: 50% 55%; }
  .sklad-tytul { left: 16px; top: 16px; right: 16px; font-size: 24px; max-width: none; }
  .sklad-info { width: calc(100% - 20px); bottom: 10px; padding: 10px 14px; }
}

/* ---------- rozkrój płyt: stół z siatką, piła tnie w kolejności cięć ---------- */
.rozdzial.maszyna {
  background-color: #e4e5dc; background-image: linear-gradient(rgba(37, 48, 38, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 48, 38, .05) 1px, transparent 1px);
  background-size: 40px 40px;
}
.cnc-tor { position: relative; }
.cnc-klej { min-height: calc(100vh - var(--gora)); display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: clamp(20px, 3vw, 44px); align-items: center; padding: 20px 0; }
.arkusz-ramka { position: relative; padding: 18px; border-radius: 20px; background: var(--panel); border: 1px solid var(--linia); box-shadow: var(--cien-duzy); }
#arkusz { width: 100%; height: auto; max-height: calc(100vh - var(--gora) - 160px); margin: 0 auto; overflow: visible; }
#formatki .formatka rect { fill: transparent; stroke: #b9b39f; stroke-width: 5; stroke-dasharray: 22 16; transition: fill .45s, stroke .45s; }
#formatki .formatka text { font: 800 64px "Segoe UI", sans-serif; fill: transparent; text-anchor: middle; dominant-baseline: middle; transition: fill .45s; pointer-events: none; }
#formatki .formatka.cieta rect { fill: var(--wyp); stroke: #f4efe3; stroke-width: 8; stroke-dasharray: none; }
#formatki .formatka.cieta text { fill: rgba(255, 255, 255, .92); }
#formatki .formatka.cieta.jasna text { fill: rgba(43, 30, 12, .85); }
#formatki .formatka.cieta:hover rect { stroke: var(--zloto); }
#ciecia line { stroke: var(--czerw); stroke-width: 7; stroke-linecap: round; }
#ciecia text { font: 800 46px "Segoe UI", sans-serif; fill: #fff; text-anchor: middle; dominant-baseline: central; }
#ciecia circle { fill: var(--czerw); }
.pila-linia { stroke: #ffd27a; stroke-width: 16; stroke-linecap: round; filter: drop-shadow(0 0 14px #ffb547); }
.pila-tarcza { fill: rgba(200, 205, 196, .9); stroke: #5d6655; stroke-width: 8; stroke-dasharray: 14 9; }
.pila-os { fill: #3b4637; }
.arkusz-plyty { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; justify-content: center; }
.arkusz-plyty button {
  display: inline-flex; align-items: center; gap: 7px; min-width: 52px; height: 36px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--linia); background: var(--pom);
  font-size: 13.5px; font-weight: 800; color: var(--tekst2); transition: background-color .2s, color .2s, border-color .2s;
}
.arkusz-plyty button i { width: 12px; height: 12px; border-radius: 3px; background: var(--k); box-shadow: 0 0 0 1px rgba(0, 0, 0, .15) inset; }
.arkusz-plyty button[aria-pressed="true"] { background: var(--menu); color: var(--zloto2); border-color: var(--menu); }
.cnc-opis { display: grid; gap: 18px; }
.licznik-ciec { display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: 10px; }
.licznik-ciec > b { font-size: clamp(72px, 8vw, 128px); line-height: .85; font-weight: 800; letter-spacing: -0.05em; color: var(--czerw); font-variant-numeric: tabular-nums; min-width: 1.2ch; }
.licznik-ciec .z { font-size: clamp(26px, 2.4vw, 38px); font-weight: 800; color: var(--tekst2); padding-bottom: .18em; }
.licznik-ciec .z i { font-style: normal; }
.licznik-ciec small { grid-column: 1 / -1; margin-top: 8px; font-size: 14.5px; font-weight: 700; color: var(--tekst2); }
.odczyt { display: grid; gap: 6px; padding: 16px 18px; border-radius: 14px; background: var(--menu); color: var(--jasny-na-ciemnym); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.odczyt b { color: var(--zloto2); }
#plytaMat { color: var(--szary-na-ciemnym); font-size: 13.5px; }
.pasek-ciecia { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; margin-top: 6px; }
.pasek-ciecia i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--c, 0)); background: linear-gradient(90deg, #c0392b, #ffb547); }
.tryby { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--panel); border: 1px solid var(--linia); gap: 2px; }
.tryb { flex: 1; padding: 10px 14px; border: 0; border-radius: 9px; background: transparent; font-weight: 800; font-size: 14px; color: var(--tekst2); white-space: nowrap; }
.tryb[aria-pressed="true"] { background: var(--zloty-gradient); color: var(--menu); box-shadow: 0 4px 12px -4px rgba(148, 114, 60, .6); }
.tryb-dane { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.tryb-dane div { padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--linia); }
.tryb-dane .szer { grid-column: 1 / -1; }
.tryb-dane dt { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tekst2); }
.tryb-dane dd { margin: 2px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.tryb-opis { font-size: 15px; color: var(--tekst2); }
@media (max-width: 1000px) {
  .cnc-klej { grid-template-columns: 1fr; gap: 14px; align-content: center; padding: 8px 0; }
  #arkusz { max-height: 40svh; }
  .arkusz-ramka { padding: 10px; }
  .arkusz-plyty { display: none; }
  .cnc-opis { grid-template-columns: 1fr; gap: 10px; }
  .licznik-ciec { grid-template-columns: auto auto 1fr; align-items: end; }
  .licznik-ciec small { grid-column: auto; margin: 0 0 .5em 6px; }
  .odczyt { grid-template-columns: 1fr auto; gap: 2px 12px; }
  .odczyt > span:nth-child(2) { grid-column: 1 / -1; order: 3; }
  .pasek-ciecia { grid-column: 1 / -1; order: 4; }
  .licznik-ciec > b { font-size: 58px; }
  .licznik-ciec .z { font-size: 22px; }
  .licznik-ciec small { font-size: 12px; margin-top: 4px; }
  .odczyt { font-size: 13px; padding: 10px 12px; }
  .tryby, .tryb-dane, .tryb-opis { grid-column: 1 / -1; }
  .tryb-dane dd { font-size: 19px; }
  .tryb-dane div { padding: 8px 10px; }
  .tryb-opis { display: none; }
}

/* ---------- Studio 3D (kino) ---------- */
.kino { position: relative; padding: clamp(80px, 11vh, 140px) 0 clamp(60px, 9vh, 120px); background: var(--kino); color: var(--jasny-na-ciemnym); }
.porownanie {
  position: relative; --x: 50%; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #000; cursor: ew-resize; touch-action: pan-y; user-select: none;
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(211, 173, 117, .2);
}
.porownanie img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.porownanie .zywo { clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.porownanie .final { transition: opacity .3s; }
.porownanie .final.chowa { opacity: 0; }
.porownanie input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; }
.linia-ciecia { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: var(--zloto2); box-shadow: 0 0 18px rgba(241, 212, 163, .8); pointer-events: none; }
.galka {
  position: absolute; top: 50%; left: var(--x); width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; display: grid; place-items: center; pointer-events: none;
  background: var(--zloty-gradient); color: var(--menu); box-shadow: 0 8px 26px rgba(0, 0, 0, .5), 0 0 0 6px rgba(241, 212, 163, .2); transition: transform .2s;
}
.galka svg { width: 24px; height: 24px; }
.porownanie.ciagnie .galka { transform: scale(1.12); }
.znaczek { position: absolute; top: 16px; padding: 7px 12px; border-radius: 8px; background: rgba(18, 21, 16, .78); color: var(--zloto2); font-size: 12.5px; font-weight: 800; letter-spacing: .04em; pointer-events: none; }
.znaczek.l { left: 16px; } .znaczek.p { right: 16px; }
.podpowiedz { position: absolute; left: var(--x); top: calc(50% + 42px); translate: -50% 0; padding: 5px 10px; border-radius: 6px; background: rgba(18, 21, 16, .78); font-size: 12px; font-weight: 800; color: var(--jasny-na-ciemnym); pointer-events: none; transition: opacity .4s; }
.porownanie.ruszony .podpowiedz { opacity: 0; }
.pod-zdjeciem { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 18px; }
.warianty { display: flex; gap: 8px; }
.wariant { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); color: var(--jasny-na-ciemnym); font-weight: 800; font-size: 14.5px; }
.wariant i { width: 30px; height: 30px; border-radius: 8px; background: var(--probka) center / cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset; }
.wariant[aria-pressed="true"] { border-color: var(--zloto); background: rgba(211, 173, 117, .12); color: var(--zloto2); }
.opis-zdjecia { font-size: 13.5px; color: var(--szary-na-ciemnym); }
.kino .samouczek { margin-top: clamp(60px, 8vw, 110px); }
.przelot-tor, .pora-tor { position: relative; margin-top: clamp(60px, 8vw, 110px); }
.przelot-klej, .pora-klej { height: calc(100vh - var(--gora)); height: calc(100svh - var(--gora)); display: grid; place-items: center; }
.przelot-kadr, .pora-kadr { position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; }
.przelot-kadr video { width: 100%; height: 100%; object-fit: cover; }
.przelot-napis, .pora-napis { position: absolute; left: var(--bokS); bottom: clamp(30px, 7vh, 80px); max-width: 32ch; text-shadow: 0 2px 24px rgba(0, 0, 0, .6); }
.przelot-kadr::after, .pora-kadr::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); pointer-events: none; }
.przelot-napis, .pora-napis { z-index: 2; }
.przelot-napis h3, .pora-napis h3 { font-size: clamp(30px, 4.2vw, 64px); color: #fff; }
.przelot-pasek { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 3px; background: rgba(255, 255, 255, .1); }
.przelot-pasek i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #b48a45, #f1d4a3); }
.pora-obraz { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pora-plotno { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: opacity .6s; }
.pora-kadr.glebia .pora-plotno { opacity: 1; }
#poraSlowo { display: inline-block; color: var(--zloto2); }
.pora-przelacz { display: inline-flex; margin-top: 18px; padding: 4px; border-radius: 12px; background: rgba(18, 21, 16, .7); gap: 2px; text-shadow: none; }
.pora-przelacz button { padding: 9px 16px; border: 0; border-radius: 9px; background: transparent; color: var(--jasny-na-ciemnym); font-weight: 800; font-size: 14px; }
.pora-przelacz button[aria-pressed="true"] { background: var(--zloty-gradient); color: var(--menu); }
.k3d { position: relative; margin-top: clamp(60px, 8vw, 110px); aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: radial-gradient(80% 80% at 50% 40%, #2a3028, #121510); box-shadow: 0 0 0 1px rgba(211, 173, 117, .2); }
.k3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; opacity: 0; transition: opacity .8s; }
.k3d.gotowy canvas { opacity: 1; }
.k3d:not(.gotowy) .k3d-stan { background: rgba(18, 21, 16, .45); color: #fff; }
.k3d.uzyty .k3d-dlon { opacity: 0; }
.k3d canvas:active { cursor: grabbing; }
.k3d-stan { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; z-index: 2; font-weight: 700; color: var(--szary-na-ciemnym); pointer-events: none; }
.k3d-stan button { pointer-events: auto; }
.k3d-stan:empty { display: none; }
.k3d-napis { position: absolute; left: clamp(14px, 2.4vw, 30px); top: clamp(14px, 2.4vw, 30px); z-index: 1; max-width: 34ch; padding: 18px 20px; border-radius: 14px; background: rgba(18, 21, 16, .78); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); pointer-events: none; }
.k3d-napis h3 { font-size: clamp(24px, 2.6vw, 38px); margin-bottom: 8px; }
.k3d-napis p { color: var(--szary-na-ciemnym); font-size: 15px; }
.k3d-napis .przycisk { margin-top: 14px; pointer-events: auto; min-height: 40px; font-size: 14px; }
.k3d-dlon { position: absolute; right: 24px; bottom: 24px; width: 40px; height: 40px; color: var(--zloto2); opacity: .7; animation: dlon 2.6s ease-in-out infinite; pointer-events: none; }
@keyframes dlon { 0%, 100% { transform: translateX(-10px); } 50% { transform: translateX(10px); } }
@media (max-width: 900px) {
  .k3d { aspect-ratio: 4 / 5; }
  .k3d-napis p { display: none; }
}

/* ---------- cennik: menu programu zapala moduły pakietu ---------- */
.cennik { background: linear-gradient(180deg, var(--tlo), var(--pom)); }
.cennik-uklad { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.cennik-menu {
  position: sticky; top: calc(var(--gora) + 24px); padding: 18px 12px 16px; border-radius: 20px; color: #aeb4a5;
  background: var(--menu) url(media/program/menu-gora.webp) center top / 100% auto no-repeat; box-shadow: var(--cien-duzy), 0 0 0 1px rgba(211, 173, 117, .16);
}
.cm-logo { width: 120px; height: auto; margin: 4px auto 14px; }
.cm-grupa { margin: 12px 10px 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #737b6a; }
.cennik-menu ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.cennik-menu li {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; font-size: 14.5px; font-weight: 700;
  opacity: .32; transition: opacity .45s, color .45s, background-color .45s;
}
.cennik-menu svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cennik-menu li.wl { opacity: 1; color: var(--jasny-na-ciemnym); }
.cennik-menu li.wl svg { color: var(--zloto); }
.cennik-menu li.wl::after {
  content: ""; margin-left: auto; width: 16px; height: 16px; border-radius: 50%; flex: none;
  background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5.1 8.2 9 4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.cennik-menu li.nowy { background: rgba(211, 173, 117, .14); }
.pakiety-kol { display: grid; gap: 22px; justify-items: center; }
.okres { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--panel); border: 1px solid var(--linia); gap: 2px; }
.okres button { padding: 10px 20px; border: 0; border-radius: 9px; background: transparent; font-weight: 800; font-size: 14.5px; color: var(--tekst2); }
.okres button[aria-pressed="true"] { background: var(--menu); color: var(--zloto2); }
.pakiety { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); align-items: stretch; }
.pakiet {
  position: relative; display: flex; flex-direction: column; text-align: left; padding: 0 0 22px; border-radius: 24px; overflow: hidden;
  background: var(--panel); border: 1px solid var(--linia); box-shadow: var(--cien); color: var(--tekst);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s, background-color .45s, color .45s, border-color .45s;
}
.pakiet:hover { transform: translateY(-4px); border-color: var(--zloto3); }
.pk-obraz { position: relative; display: block; height: 130px; margin-bottom: 18px; background: var(--obraz) right center / cover no-repeat; }
.pk-obraz::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, var(--panel)); transition: background .45s; }
.pakiet > span:not(.pk-obraz) { padding-inline: 22px; }
.pk-polecany { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 5px 10px !important; border-radius: 7px; background: var(--menu); color: var(--zloto2); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pk-gora { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pk-nazwa { display: flex; align-items: center; gap: 12px; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.pk-nazwa::before {
  content: ""; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--linia2); background: var(--panel); flex: none; transition: border-color .3s, box-shadow .3s, background-color .3s;
}
.pk-rabat { padding: 5px 10px; border-radius: 8px; background: rgba(192, 57, 43, .1); color: var(--czerw); font-size: 14px; font-weight: 800; }
.pk-dla { margin-top: 8px; font-size: 14.5px; color: var(--tekst2); line-height: 1.45; min-height: 2.9em; }
.pk-cena { display: grid; margin-top: 18px; }
.pk-cena s { font-size: 16px; font-weight: 700; color: var(--tekst2); text-decoration-color: var(--czerw); text-decoration-thickness: 2px; }
.pk-cena b { font-size: clamp(36px, 3.2vw, 48px); line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pk-cena small { font-size: 13.5px; font-weight: 700; color: var(--tekst2); }
.pk-oszcz { align-self: flex-start; margin: 12px 22px 0; padding: 5px 10px !important; border-radius: 8px; background: rgba(47, 125, 79, .12); color: var(--ok); font-size: 13px; font-weight: 800; }
.pk-lista { display: grid; gap: 8px; margin-top: 18px; padding-top: 16px !important; border-top: 1px dashed var(--linia2); margin-inline: 22px; padding-inline: 0 !important; }
.pk-lista span { position: relative; padding-left: 24px; font-size: 14.5px; font-weight: 600; }
.pk-lista span::before {
  content: ""; position: absolute; left: 0; top: .28em; width: 15px; height: 15px; border-radius: 50%;
  background: var(--zloto) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5.1 8.2 9 4' fill='none' stroke='%231a1f19' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.pakiet[aria-checked="true"] { background: var(--menu); color: var(--jasny-na-ciemnym); border-color: var(--zloto); transform: translateY(-10px); box-shadow: 0 40px 80px -30px rgba(26, 31, 25, .8), 0 0 0 2px var(--zloto); }
.pakiet[aria-checked="true"] .pk-obraz::after { background: linear-gradient(180deg, rgba(26, 31, 25, .1) 30%, var(--menu)); }
.pakiet[aria-checked="true"] .pk-nazwa::before { border-color: var(--zloto); background: var(--zloto) radial-gradient(circle, var(--menu) 30%, transparent 33%); box-shadow: 0 0 0 4px rgba(211, 173, 117, .25); }
.pakiet[aria-checked="true"] .pk-dla, .pakiet[aria-checked="true"] .pk-cena small, .pakiet[aria-checked="true"] .pk-cena s { color: var(--szary-na-ciemnym); }
.pakiet[aria-checked="true"] .pk-cena b { color: var(--zloto2); }
.pakiet[aria-checked="true"] .pk-lista { border-color: rgba(255, 255, 255, .14); }
.pakiet[aria-checked="true"] .pk-oszcz { background: rgba(47, 158, 93, .18); color: #7fd3a1; }
.pakiet[aria-checked="true"] .pk-rabat { background: rgba(255, 120, 100, .14); color: #ff9c8c; }
.pakiet.premium .pk-obraz { background-position: center 85%; }
#cennikDalej { min-width: 280px; }
@media (max-width: 1100px) {
  .cennik-uklad { grid-template-columns: 1fr; }
  .cennik-menu { position: relative; top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; padding: 14px; }
  .cm-logo { display: none; }
  .cm-grupa { grid-column: 1 / -1; }
  .cennik-menu ul { grid-column: 1 / -1; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}
@media (max-width: 820px) {
  .pakiety { grid-template-columns: 1fr; }
  .pakiet[aria-checked="true"] { transform: none; }
  .pk-obraz { height: 100px; }
  .cennik-menu ul { grid-template-columns: 1fr 1fr; }
  .cennik-menu li { font-size: 12.5px; padding: 7px 8px; gap: 8px; }
  .cennik-menu li.wl::after { width: 12px; height: 12px; }
  #cennikDalej { min-width: 0; width: 100%; }
}

/* ---------- kontakt: formularz jak okno „Nowe zlecenie” ---------- */
#kontakt { background: radial-gradient(70% 60% at 80% 30%, #262d24, var(--menu) 70%); }
.kontakt-siatka { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(30px, 5vw, 80px); align-items: center; }
.dane { display: grid; gap: 10px; }
.dana { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px 14px 20px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); font-size: 18px; font-weight: 800; }
.kopiuj { padding: 8px 14px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .14); background: transparent; color: var(--zloto2); font-weight: 800; font-size: 13px; }
.karta-zlecenia { display: grid; gap: 14px; padding: 0 24px 24px; border-radius: 20px; overflow: hidden; background: var(--panel); color: var(--tekst); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8); }
.kz-belka { display: flex; align-items: center; gap: 12px; margin: 0 -24px 8px; padding: 16px 24px; background: var(--pasek); color: var(--jasny-na-ciemnym); border-bottom: 2px solid var(--zloto); }
.kz-belka svg { width: 22px; height: 22px; fill: none; stroke: var(--zloto); stroke-width: 1.6; }
.kz-belka b { font-size: 16px; }
.kz-belka span { margin-left: auto; font-size: 12.5px; color: var(--szary-na-ciemnym); font-weight: 700; }
.karta-zlecenia label { display: grid; gap: 6px; font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--tekst2); }
.karta-zlecenia input:not([type="radio"]), .karta-zlecenia textarea {
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--linia); background: #fff; font: 600 16px "Segoe UI", sans-serif; color: var(--tekst); transition: border-color .2s, box-shadow .2s;
}
.karta-zlecenia textarea { min-height: 96px; resize: vertical; }
.karta-zlecenia input:focus, .karta-zlecenia textarea:focus { outline: none; border-color: var(--zloto3); box-shadow: 0 0 0 4px rgba(211, 173, 117, .22); }
.wybor-planu { display: flex; gap: 8px; margin: 0; padding: 0; border: 0; flex-wrap: wrap; }
.wybor-planu legend { width: 100%; margin-bottom: 6px; font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--tekst2); }
.wybor-planu label { display: block; flex: 1; }
.wybor-planu input { position: absolute; opacity: 0; }
.wybor-planu span { display: block; padding: 10px; border-radius: 10px; border: 1px solid var(--linia); background: var(--pom); text-align: center; font-size: 15px; font-weight: 800; color: var(--tekst); }
.wybor-planu input:checked + span { background: var(--menu); color: var(--zloto2); border-color: var(--menu); }
.wybor-planu input:focus-visible + span { outline: 2px solid var(--zloto3); outline-offset: 2px; }
.komunikat { padding: 12px 14px; border-radius: 10px; background: var(--pom); border: 1px solid var(--linia); font-size: 14.5px; font-weight: 600; }
@media (max-width: 900px) { .kontakt-siatka { grid-template-columns: 1fr; } }

/* ---------- stopka ---------- */
.stopka { position: relative; overflow: hidden; padding: 40px 0 30px; background: var(--kino); color: var(--szary-na-ciemnym); }

/* ---------- start programu w monitorze (jak po uruchomieniu skrótu DJ MEBLE) ---------- */
.sp { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse 70% 60% at 50% 44%, #1a1f19, #101411 70%), #101411; }
.sp::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 42%; opacity: .5; pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 22px);
  -webkit-mask: linear-gradient(90deg, #000, transparent); mask: linear-gradient(90deg, #000, transparent);
}
.sp-pulpit { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.sp-intro { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; }
.sp-logo { position: relative; width: min(46%, 440px); height: auto; filter: drop-shadow(0 10px 30px rgba(230, 150, 80, .18)); }
.sp-haslo { position: relative; margin: 1.2% 0 0; color: #c9c6ba; font: 400 clamp(6px, .9vw, 12px)/1 "Segoe UI", sans-serif; letter-spacing: .62em; text-indent: .62em; white-space: nowrap; }
.sp-linia { position: relative; display: block; width: 26%; height: 2px; margin-top: 3%; border-radius: 2px; background: rgba(211, 173, 117, .15); overflow: hidden; }
.sp-linia b { display: block; height: 100%; background: linear-gradient(90deg, #b98d4f, #f1d4a3); transform-origin: 0 50%; transform: scaleX(0); }
.sp-napis { position: relative; margin: 2.4% 0 0; min-height: 1.4em; color: #e2bf85; font: 600 clamp(7px, 1.05vw, 14px)/1.4 "Segoe UI", sans-serif; }
.sp-ramka { position: absolute; left: 0; top: 0; width: 0; height: 0; border: 2px solid var(--zloto2); border-radius: 6px; opacity: 0; pointer-events: none; box-shadow: 0 0 0 4px rgba(211, 173, 117, .22), 0 0 24px rgba(241, 212, 163, .45); }
.sp-kursor { position: absolute; left: 0; top: 0; width: clamp(14px, 2vw, 24px); height: clamp(14px, 2vw, 24px); opacity: 0; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
.sp-kursor svg { width: 100%; height: 100%; }
.sp-klik { position: absolute; left: 0; top: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 2px solid var(--zloto2); opacity: 0; pointer-events: none; }
.sp-znowu {
  position: absolute; right: 10px; bottom: 10px; z-index: 3; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2); background: rgba(16, 20, 17, .6); color: var(--zloto2); opacity: 0; transition: opacity .3s;
}
.sp-znowu svg { width: 16px; height: 16px; }
.monitor:hover .sp-znowu, .sp-znowu:focus-visible { opacity: 1; }

/* ---------- samouczek z listą kroków (obok ekranu, jak lista zadań) ---------- */
.samouczek.lista.gotowy .sam-klej { display: grid; grid-template-columns: minmax(0, auto) 340px; justify-content: center; align-items: center; gap: clamp(16px, 2vw, 30px); padding-inline: var(--bokS); }
.samouczek.lista.gotowy .sam-okno { width: min(1180px, 100vw - 2 * var(--bokS) - 370px, (100vh - var(--gora) - 60px) * 16 / 9); aspect-ratio: auto; height: min(100vh - var(--gora) - 64px, (100vw - 2 * var(--bokS) - 370px) * .74); margin: 0; }
.sam-panel { align-self: center; padding: 18px 16px; border-radius: 18px; background: var(--panel); color: var(--tekst); box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .6); border: 1px solid var(--linia); }
.sam-panel ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; counter-reset: k; }
.sam-panel li button {
  width: 100%; display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; align-items: start; padding: 10px 10px; border: 0; border-radius: 12px; background: transparent; text-align: left;
  transition: background-color .3s;
}
.sam-panel li i {
  grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 800 12px "Segoe UI", sans-serif; font-style: normal;
  background: var(--pom); border: 1px solid var(--linia); color: var(--tekst2); transition: background-color .3s, color .3s, border-color .3s;
}
.sam-panel li b { font-size: 15.5px; font-weight: 800; line-height: 1.3; padding-top: 4px; }
.sam-panel li span { display: grid; grid-template-rows: 0fr; overflow: hidden; font-size: 14px; line-height: 1.5; color: var(--tekst2); transition: grid-template-rows .45s cubic-bezier(.2, .8, .2, 1), margin .45s; }
.sam-panel li span > span { min-height: 0; }
.sam-panel li.tu button { background: var(--pom); }
.sam-panel li.tu i { background: var(--zloty-gradient); color: var(--menu); border-color: transparent; }
.sam-panel li.tu span { grid-template-rows: 1fr; margin-top: 4px; }
.sam-panel li.byl i { background: var(--ok); border-color: var(--ok); color: #fff; }
.sam-panel li.byl b { color: var(--tekst2); }
.sam-panel-postep { height: 3px; margin: 12px 10px 0; border-radius: 3px; background: var(--linia); overflow: hidden; }
.sam-panel-postep i { display: block; height: 100%; background: var(--zloty-gradient); transform-origin: 0 50%; transform: scaleX(0); }
@media (max-width: 1100px) {
  .samouczek.lista.gotowy .sam-klej { grid-template-columns: 1fr; padding-inline: 0; align-content: center; }
  .samouczek.lista.gotowy .sam-okno { width: calc(100% - 2 * var(--bok)); margin: 0 auto; }
  .sam-panel { width: calc(100% - 2 * var(--bok)); margin: 0 auto; padding: 10px; }
  .sam-panel li:not(.tu) { display: none; }
}
@media (max-width: 900px) {
  .samouczek.lista.gotowy .sam-okno { aspect-ratio: auto; height: min(100vw - 2 * var(--bok), 100svh - var(--gora) - 250px); min-height: 220px; }
}

/* ---------- biblioteka: kategorie i rysunki 3D z katalogu ---------- */
.bib-tor { position: relative; margin-top: clamp(50px, 7vw, 100px); }
.bib-klej { height: calc(100vh - var(--gora)); height: calc(100svh - var(--gora)); display: grid; align-items: center; }
.bib-wn { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: center; }
.bib-wn > * { min-width: 0; }
.bib-tytul { font-size: clamp(26px, 2.6vw, 38px); margin-bottom: 10px; }
.bib-tytul b { color: var(--zloto); font-weight: 800; }
.bib-opis { color: var(--szary-na-ciemnym); font-size: 15px; margin-bottom: 18px; }
.bib-menu { margin: 0; padding: 8px; list-style: none; display: grid; gap: 2px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); }
.bib-menu button {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; border-radius: 10px; background: transparent; color: #aeb4a5; font-weight: 700; font-size: 14.5px; text-align: left;
  transition: background-color .25s, color .25s;
}
.bib-menu button small { margin-left: auto; min-width: 30px; padding: 2px 8px; border-radius: 10px; background: rgba(255, 255, 255, .06); font-size: 12px; text-align: center; }
.bib-menu button:hover { color: var(--zloto2); }
.bib-menu button[aria-selected="true"] { background: var(--zloty-gradient); color: var(--menu); }
.bib-menu button[aria-selected="true"] small { background: rgba(26, 31, 25, .15); }
.bib-polka { position: relative; height: min(720px, 100vh - var(--gora) - 80px); }
.bib-strona { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 12px; visibility: hidden; }
.bib-strona.tu { visibility: visible; }
.bib-karta {
  position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; padding: 10px 10px 12px; border-radius: 16px; overflow: hidden;
  background: radial-gradient(90% 70% at 50% 38%, #f6f4ee 0%, #e4e2da 100%); color: var(--tekst); box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .7);
}
.bib-karta img { width: 100%; height: 100%; min-height: 0; object-fit: contain; filter: drop-shadow(0 10px 10px rgba(26, 31, 25, .25)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.bib-karta:hover img { transform: scale(1.06) translateY(-3px); }
.bib-karta b { display: block; margin-top: 6px; font-size: 13px; font-weight: 800; line-height: 1.25; }
.bib-karta span { display: block; font-size: 11.5px; font-weight: 700; color: var(--akcent2); }
.bib-karta.wiecej { place-content: center; justify-items: center; text-align: center; background: rgba(255, 255, 255, .04); border: 1px dashed rgba(211, 173, 117, .4); color: var(--zloto2); box-shadow: none; }
.bib-karta.wiecej b { font-size: 26px; margin: 0; }
.bib-karta.wiecej span { color: var(--szary-na-ciemnym); }
@media (max-width: 1100px) {
  .bib-wn { grid-template-columns: 1fr; gap: 12px; align-content: center; }
  .bib-opis { display: none; }
  .bib-menu { display: flex; overflow-x: auto; padding: 6px; scrollbar-width: none; }
  .bib-menu li { flex: none; }
  .bib-menu button { white-space: nowrap; padding: 7px 10px; font-size: 13px; }
  .bib-polka { height: min(62svh, 640px); }
  .bib-strona { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .bib-strona { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .bib-karta { padding: 6px 6px 8px; border-radius: 12px; }
  .bib-karta b { font-size: 11px; }
  .bib-karta span { font-size: 10px; }
}

/* ---------- szafka w 3D (okno „Nowa szafka”) ---------- */
.konf { margin-top: clamp(80px, 11vw, 150px); }
.konf-naglowek { margin-bottom: clamp(20px, 3vw, 36px); max-width: 760px; }
.konf-naglowek .lead { margin-top: 12px; }
.konf-uklad {
  display: grid; grid-template-columns: 280px minmax(0, 1fr) 320px; gap: 18px; padding: 18px; border-radius: 24px;
  background: var(--panel); color: var(--tekst); box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(211, 173, 117, .2);
}
.konf-et { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--tekst2); }
.konf-et:first-child { margin-top: 2px; }
.konf-et i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--pasek); color: #fff; font-style: normal; font-size: 11px; letter-spacing: 0; }
.konf-rodzaje { display: grid; gap: 6px; }
.konf-rodzaje button {
  display: grid; grid-template-columns: 18px 1fr; column-gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--linia); background: #fff; text-align: left;
  transition: border-color .25s, background-color .25s;
}
.konf-rodzaje button::before { content: ""; grid-row: span 2; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--linia2); box-sizing: border-box; }
.konf-rodzaje button b { font-size: 15px; }
.konf-rodzaje button small { font-size: 12.5px; color: var(--tekst2); font-weight: 600; }
.konf-rodzaje button[aria-checked="true"] { border-color: #2f6b4a; background: #eef5ef; }
.konf-rodzaje button[aria-checked="true"]::before { border: 5px solid #2f6b4a; }
.konf-fronty, .konf-widoki { display: flex; flex-wrap: wrap; gap: 6px; }
.konf-fronty button, .konf-widoki button {
  padding: 8px 12px; border-radius: 9px; border: 1px solid var(--linia); background: #fff; font-size: 13.5px; font-weight: 700; color: var(--tekst);
  transition: background-color .25s, color .25s, border-color .25s;
}
.konf-fronty button[aria-checked="true"], .konf-widoki button[aria-checked="true"] { background: #2f6b4a; border-color: #2f6b4a; color: #fff; }
.konf-scena { position: relative; margin: 0; border-radius: 16px; overflow: hidden; background: #dfe3da; aspect-ratio: 988 / 800; align-self: start; }
.konf-scena img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.konf-scena img.znika { opacity: 0; transition: opacity .25s; }
.konf-podpis { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 8px 12px; border-radius: 10px; background: rgba(250, 250, 246, .92); font-size: 13px; font-weight: 700; color: var(--tekst); }
.konf-tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.konf-tabela th { padding: 6px 4px; border-bottom: 1px solid var(--linia); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tekst2); text-align: left; }
.konf-tabela th:nth-child(n+2), .konf-tabela td:nth-child(n+2) { text-align: right; white-space: nowrap; }
.konf-tabela td { padding: 6px 4px; border-bottom: 1px solid #ecede6; font-weight: 600; font-variant-numeric: tabular-nums; }
.konf-tabela tr.nowy td { animation: wiersz .6s ease-out; }
@keyframes wiersz { from { background: rgba(211, 173, 117, .35); } to { background: transparent; } }
.konf-okucia { margin-top: 10px; font-size: 12.5px; color: var(--tekst2); line-height: 1.5; }
.konf-ok { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13.5px; font-weight: 800; color: var(--ok); }
.konf-ok svg { width: 18px; height: 18px; padding: 2px; border-radius: 50%; background: var(--ok); color: #fff; }
@media (max-width: 1180px) { .konf-uklad { grid-template-columns: 260px minmax(0, 1fr); } .konf-lista { grid-column: 1 / -1; } }
@media (max-width: 760px) { .konf-uklad { grid-template-columns: 1fr; padding: 12px; } .konf-scena { order: -1; } }

/* ---------- szkic 2D: arkusz ściany i lupa ---------- */
.szkic-tor { position: relative; margin-top: clamp(70px, 10vw, 140px); }
.szkic-klej { height: calc(100vh - var(--gora)); height: calc(100svh - var(--gora)); display: grid; place-items: center; padding: 0 var(--bokS); }
.szkic-wn { width: min(1400px, 100%, (100vh - var(--gora) - 150px) * 16 / 9); }
.szkic-naglowek { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.szkic-naglowek .etykieta { margin-bottom: 8px; }
.szkic-sciany { display: inline-flex; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); gap: 2px; }
.szkic-sciany button { padding: 8px 14px; border: 0; border-radius: 9px; background: transparent; color: var(--jasny-na-ciemnym); font-weight: 800; font-size: 14px; }
.szkic-sciany button[aria-pressed="true"] { background: var(--zloty-gradient); color: var(--menu); }
.szkic-arkusz { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(211, 173, 117, .25); }
.szkic-plansza { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; }
.szkic-plansza.tu { opacity: 1; }
.szkic-lupa {
  position: absolute; left: 0; top: 0; width: var(--r2, 260px); height: var(--r2, 260px); margin: calc(var(--r2, 260px) / -2) 0 0 calc(var(--r2, 260px) / -2); border-radius: 50%;
  background-color: #fff; background-repeat: no-repeat; border: 3px solid var(--zloto); opacity: 0; pointer-events: none; will-change: transform;
  box-shadow: 0 0 0 6px rgba(211, 173, 117, .25), 0 20px 50px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .1);
}
.szkic-linia { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.szkic-linia path { fill: none; stroke: var(--zloto3); stroke-width: 2; stroke-dasharray: 5 5; }
.szkic-linia circle { fill: var(--zloto3); }
.szkic-opis {
  position: absolute; left: 0; top: 0; width: 280px; padding: 14px 16px; border-radius: 14px; background: var(--menu); color: var(--jasny-na-ciemnym); opacity: 0;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .4); border-top: 3px solid var(--zloto);
}
.szkic-opis b { display: block; font-size: 16px; margin-bottom: 4px; color: var(--zloto2); }
.szkic-opis span { display: block; font-size: 14px; line-height: 1.45; color: var(--szary-na-ciemnym); }
@media (max-width: 900px) {
  .szkic-klej { padding: 0 var(--bok); }
  .szkic-wn { width: 100%; }
  .szkic-naglowek { flex-direction: column; align-items: flex-start; }
  .szkic-opis { left: 0; top: calc(100% + 12px); width: 100%; transform: none !important; transition: opacity .3s; }
  .szkic-arkusz { overflow: visible; }
}

/* ---------- stopka: znak jak logo DJ MEBLE ---------- */
.stopka-znak { position: relative; display: grid; justify-items: center; gap: 6px; padding: clamp(30px, 6vw, 80px) var(--bok) clamp(20px, 4vw, 50px); text-align: center; overflow: hidden; }
.stopka-znak::before { content: ""; position: absolute; inset: 10% 10% auto; height: 70%; background: radial-gradient(closest-side, rgba(211, 140, 80, .16), transparent); pointer-events: none; }
.stopka-logo { position: relative; width: clamp(150px, 17vw, 270px); height: auto; margin-bottom: clamp(-10px, -1vw, -4px); -webkit-mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); }
.stopka-slowo { position: relative; margin: 0; font: 400 clamp(46px, 11vw, 190px)/1.05 Michroma, sans-serif; letter-spacing: .02em; white-space: nowrap; }
.stopka-slowo span { -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 220% 100%; background-position: var(--blysk, 100%) 0; }
.stopka-slowo .dj {
  background-image: linear-gradient(100deg, #8b4a1f 0%, #c8743a 18%, #f2b47a 32%, #fff0dc 38%, #e79a5d 44%, #b8642f 60%, #e5a066 80%, #9a5526 100%);
  filter: drop-shadow(0 0 22px rgba(232, 140, 70, .35));
}
.stopka-slowo .meble {
  background-image: linear-gradient(100deg, #8f918b 0%, #d9dad4 18%, #ffffff 32%, #ffffff 38%, #c9cac4 50%, #9fa19b 66%, #e4e5df 84%, #a6a8a2 100%);
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, .12));
}
.stopka-haslo { position: relative; display: flex; align-items: center; gap: 16px; margin: 8px 0 0; font: 400 clamp(9px, 1vw, 14px)/1 "Segoe UI", sans-serif; letter-spacing: .62em; text-indent: .62em; text-transform: uppercase; color: #c9c6ba; }
.stopka-haslo::before, .stopka-haslo::after { content: ""; width: clamp(30px, 6vw, 90px); height: 1px; background: linear-gradient(90deg, transparent, #b48a45); }
.stopka-haslo::after { transform: scaleX(-1); }
/* ---------- AGD, zlewy i uchwyty (27.10.2026): prawdziwe modele 3D z Biblioteki programu ---------- */
.agd { padding-block: clamp(50px, 7vw, 110px) clamp(20px, 3vw, 40px); }
.agd-uklad { display: grid; grid-template-columns: 230px minmax(0, 1fr); grid-template-rows: auto auto; gap: 18px 28px; margin-top: clamp(24px, 3vw, 40px); }
.agd-grupy { grid-row: 1 / span 2; display: grid; align-content: start; gap: 4px; }
.agd-grupy button { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border: 1px solid transparent; border-radius: 10px; background: none; color: #cfd3c6; font: 700 14.5px/1.2 "Segoe UI", sans-serif; text-align: left; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.agd-grupy button small { font-weight: 700; font-size: 12px; color: #8f9686; padding: 2px 8px; border-radius: 20px; background: rgba(255, 255, 255, .06); }
.agd-grupy button:hover { background: rgba(255, 255, 255, .05); color: var(--zloto2); }
.agd-grupy button[aria-selected="true"] { background: rgba(211, 173, 117, .12); border-color: rgba(211, 173, 117, .4); color: var(--zloto2); }
.agd-grupy button[aria-selected="true"] small { background: var(--zloto); color: var(--menu); }
.agd-scena { position: relative; margin: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; min-height: clamp(340px, 34vw, 500px); border-radius: 20px; overflow: hidden;
  background: radial-gradient(ellipse 70% 80% at 30% 55%, #ffffff 0%, #f1f1ec 60%, #e3e3dc 100%); box-shadow: var(--cien-duzy), 0 0 0 1px rgba(211, 173, 117, .25); }
.agd-scena::after { content: ""; position: absolute; left: 6%; right: 48%; bottom: 9%; height: 26px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .18), transparent); pointer-events: none; }
.agd-obraz { position: relative; z-index: 1; display: grid; place-items: center; height: 100%; padding: 4% 2% 6% 6%; }
.agd-obraz img { width: 100%; max-height: clamp(320px, 32vw, 470px); object-fit: contain; mix-blend-mode: multiply; transition: opacity .35s, transform .5s cubic-bezier(.2, .8, .2, 1); }
.agd-obraz img.zmiana { opacity: 0; transform: translateY(10px) scale(.97); }
.agd-opis { position: relative; z-index: 1; display: grid; align-content: center; gap: 10px; padding: clamp(18px, 3vw, 44px) clamp(18px, 3vw, 44px) clamp(18px, 3vw, 44px) 0; color: var(--tekst); }
.agd-grupa { font-size: 11.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--akcent); }
.agd-opis b { font-size: clamp(20px, 2vw, 28px); line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
.agd-wym { display: flex; flex-wrap: wrap; gap: 6px; }
.agd-wym span { padding: 5px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--linia); font-size: 13px; font-weight: 700; color: var(--tekst2); }
.agd-wym span i { font-style: normal; color: var(--akcent); margin-right: 4px; }
.agd-uw { font-size: 14px; line-height: 1.55; color: var(--tekst2); max-width: 36ch; }
.agd-pas { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(211, 173, 117, .5) transparent; }
.agd-pas button { flex: none; width: 104px; display: grid; gap: 6px; padding: 6px 6px 8px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); cursor: pointer; scroll-snap-align: start; transition: border-color .2s, background-color .2s, transform .2s; }
.agd-pas button img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 8px; background: #f3f3ee; }
.agd-pas button span { font: 600 11.5px/1.3 "Segoe UI", sans-serif; color: #b8bdaf; text-align: left; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.agd-pas button:hover { transform: translateY(-2px); border-color: rgba(211, 173, 117, .45); }
.agd-pas button[aria-selected="true"] { border-color: var(--zloto); background: rgba(211, 173, 117, .12); }
.agd-pas button[aria-selected="true"] span { color: var(--zloto2); }
.uch { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: clamp(20px, 3vw, 44px); align-items: center; margin-top: clamp(40px, 5vw, 72px); padding-top: clamp(30px, 4vw, 50px); border-top: 1px solid rgba(255, 255, 255, .08); }
.uch-tekst h4 { margin: 8px 0 10px; font-size: clamp(20px, 2vw, 28px); line-height: 1.2; color: var(--jasny-na-ciemnym); }
.uch-tekst h4 em { font-style: normal; color: var(--zloto); }
.uch-tekst p { margin: 0 0 16px; color: var(--szary-na-ciemnym); line-height: 1.6; }
.uch-kolory { display: inline-flex; gap: 6px; padding: 5px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.uch-kolory button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border: 0; border-radius: 8px; background: none; color: #cfd3c6; font: 700 13.5px "Segoe UI", sans-serif; cursor: pointer; transition: background-color .2s, color .2s; }
.uch-kolory button i { width: 14px; height: 14px; border-radius: 50%; background: var(--k); box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.uch-kolory button[aria-pressed="true"] { background: var(--zloty-gradient); color: var(--menu); }
.uch-siatka { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.uch-siatka li { position: relative; border-radius: 14px; overflow: hidden; background: #f4f4f0; box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .6); transition: transform .3s; }
.uch-siatka li:hover { transform: translateY(-3px); }
.uch-siatka img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; transition: opacity .3s; }
.uch-siatka img.zmiana { opacity: .15; }
.uch-siatka span { position: absolute; left: 8px; bottom: 8px; padding: 4px 8px; border-radius: 6px; background: rgba(26, 31, 25, .82); color: #eceee6; font: 700 11.5px "Segoe UI", sans-serif; backdrop-filter: blur(4px); }
@media (max-width: 1000px) {
  .agd-uklad { grid-template-columns: 1fr; }
  .agd-grupy { grid-row: auto; display: flex; overflow-x: auto; gap: 6px; padding-bottom: 6px; }
  .agd-grupy button { flex: none; }
  .uch { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .agd-scena { grid-template-columns: 1fr; min-height: 0; }
  .agd-scena::after { right: 6%; bottom: auto; top: 54%; }
  .agd-obraz { padding: 6% 10% 0; }
  .agd-opis { padding: 6px 20px 22px; }
  .uch-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* stopka (27.10.2026): opis i pokaz, trzy kolumny nawigacji, dół z prawami i „Na górę” */
.stopka-siatka { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); padding: clamp(30px, 4vw, 54px) 0 clamp(26px, 3vw, 40px); border-top: 1px solid rgba(255, 255, 255, .08); }
.stopka-o { display: grid; align-content: start; justify-items: start; gap: 16px; }
.stopka-o .logo img { height: 52px; }
.stopka-o .logo .logo-haslo { font-size: 10px; }
.stopka-o .logo .logo-haslo span { display: block; }
.stopka-o p { margin: 0; max-width: 40ch; font-size: 14.5px; line-height: 1.65; color: #b8bdaf; }
.stopka-o .przycisk { min-height: 46px; margin-top: 4px; }
.stopka-kol { display: grid; align-content: start; gap: 2px; }
.stopka-tyt { margin: 0 0 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--zloto); }
.stopka-kol a { position: relative; justify-self: start; padding: 6px 0; font-size: 15px; font-weight: 600; color: #d6d9cc; text-decoration: none; transition: color .2s, transform .2s; }
.stopka-kol a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: var(--zloto); transform: scaleX(0); transform-origin: 0 50%; transition: transform .25s; }
.stopka-kol a:hover { color: var(--zloto2); }
.stopka-kol a:hover::after { transform: scaleX(1); }
.stopka-dol { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .07); font-size: 13px; color: #8f9686; }
.stopka-dol p { margin: 0; }
.stopka-gora { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; color: #d6d9cc; text-decoration: none; font-weight: 700; font-size: 13.5px; transition: border-color .2s, color .2s, transform .2s; }
.stopka-gora svg { width: 16px; height: 16px; transition: transform .25s; }
.stopka-gora:hover { border-color: var(--zloto3); color: var(--zloto2); }
.stopka-gora:hover svg { transform: translateY(-3px); }
@media (max-width: 980px) { .stopka-siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stopka-o { grid-column: 1 / -1; } }
@media (max-width: 600px) { .stopka-siatka { grid-template-columns: 1fr 1fr; } .stopka-kol:last-child { grid-column: 1 / -1; } .stopka-dol { flex-direction: column; align-items: flex-start; } }
@media (max-width: 640px) { .stopka-haslo { letter-spacing: .3em; text-indent: .3em; gap: 8px; } }

/* ---------- usprawnienia: skrót do treści, fakty w starcie, liczby rozkroju, wyszukiwanie, powiększenie szkicu, „Na pokazie” ---------- */
.do-tresci { position: fixed; left: 12px; top: -60px; z-index: 300; padding: 10px 16px; border-radius: 10px; background: var(--zloty-gradient); color: var(--menu); font-weight: 800; text-decoration: none; transition: top .2s; }
.do-tresci:focus { top: 12px; }

.fakty { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 10px clamp(16px, 2vw, 30px); margin: 34px 0 0; padding: 18px 0 0; list-style: none; border-top: 1px solid var(--linia); }
.fakty li { display: grid; gap: 2px; }
.fakty b { font: 400 clamp(22px, 2vw, 30px)/1 "Segoe UI", sans-serif; color: var(--akcent2); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.fakty span { font-size: 13px; font-weight: 700; color: var(--tekst2); }
@media (max-width: 1099px) { .fakty { justify-content: center; text-align: center; } .fakty li { justify-items: center; } }
@media (max-width: 900px) { .fakty { gap: 10px 18px; margin-top: 24px; } .fakty b { font-size: 20px; } .fakty span { font-size: 11.5px; } }

.wstep-liczby { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; justify-self: end; width: min(100%, 480px); }
.wstep-liczby div { padding: 18px 20px; border-radius: 16px; background: var(--panel); border: 1px solid var(--linia); box-shadow: var(--cien); }
.wstep-liczby dd { margin: 0 0 4px; font: 400 clamp(30px, 3vw, 44px)/1 "Segoe UI", sans-serif; color: var(--tekst); font-variant-numeric: tabular-nums; }
.wstep-liczby div:nth-child(3) dd { color: var(--czerw); }
.wstep-liczby dt { order: 2; font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--tekst2); }
.wstep-liczby div { display: flex; flex-direction: column-reverse; }
@media (max-width: 900px) { .wstep-liczby { justify-self: stretch; width: 100%; } .wstep-liczby div { padding: 12px 14px; } }

.rzut .duch { fill: none; stroke: #cfd2c4; stroke-width: 12; stroke-dasharray: 48 40; }
.rysunek-etapy li { align-items: flex-start; }
.rysunek-etapy li > span { display: grid; gap: 2px; }
.rysunek-etapy small { font-size: 12px; font-weight: 600; color: var(--tekst2); opacity: .85; }
.rysunek-etapy li.tu small { color: var(--szary-na-ciemnym); }

.bib-szukaj { position: relative; display: block; margin-bottom: 10px; }
.bib-szukaj svg { position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; fill: none; stroke: var(--szary-na-ciemnym); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.bib-szukaj input {
  width: 100%; padding: 11px 12px 11px 38px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05);
  color: var(--jasny-na-ciemnym); font: 600 14.5px "Segoe UI", sans-serif; transition: border-color .2s, background-color .2s;
}
.bib-szukaj input::placeholder { color: #8a917f; }
.bib-szukaj input:focus { outline: none; border-color: var(--zloto3); background: rgba(255, 255, 255, .08); }
.bib-karta.brak { grid-column: 1 / -1; grid-row: span 2; place-content: center; justify-items: center; text-align: center; background: rgba(255, 255, 255, .04); border: 1px dashed rgba(211, 173, 117, .4); color: var(--zloto2); box-shadow: none; }
.bib-karta.brak span { color: var(--szary-na-ciemnym); }
.bib-karta mark { background: rgba(211, 173, 117, .35); color: inherit; border-radius: 3px; }

.szkic-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.szkic-powieksz { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); color: var(--jasny-na-ciemnym); font-weight: 800; font-size: 14px; }
.szkic-powieksz svg { width: 18px; height: 18px; fill: none; stroke: var(--zloto2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.szkic-powieksz:hover { border-color: var(--zloto3); color: var(--zloto2); }
.szkic-arkusz { cursor: zoom-in; }
.szkic-okno { width: min(1600px, 96vw); height: min(940px, 92vh); padding: 0; border: 0; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 40px 120px rgba(0, 0, 0, .6); }
.szkic-okno[open] { display: flex; flex-direction: column; }
.szkic-okno::backdrop { background: rgba(10, 13, 10, .78); }
.szkic-okno-belka { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--pasek); color: var(--jasny-na-ciemnym); border-bottom: 2px solid var(--zloto); }
.szkic-okno-belka b { font-size: 15px; }
.szkic-okno-belka span { font-size: 13px; color: var(--szary-na-ciemnym); }
.szkic-okno-belka .przycisk { margin-left: auto; min-height: 38px; font-size: 14px; }
.szkic-okno-pole { flex: 1; overflow: auto; cursor: grab; background: #fff; overscroll-behavior: contain; }
.szkic-okno-pole.ciagnie { cursor: grabbing; }
.szkic-okno-pole img { display: block; width: 3840px; max-width: none; height: auto; user-select: none; }
@media (max-width: 900px) { .szkic-okno-pole img { width: 2400px; } .szkic-okno-belka span { display: none; } }

.na-pokazie { display: grid; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.na-pokazie li { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.na-pokazie svg { grid-row: span 2; width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: rgba(211, 173, 117, .12); fill: none; stroke: var(--zloto2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.na-pokazie b { font-size: 16px; }
.na-pokazie span { font-size: 14px; color: var(--szary-na-ciemnym); }

.konf-pokaz { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(26, 31, 25, .85); color: var(--zloto2); font-size: 12px; font-weight: 800; letter-spacing: .04em; transition: opacity .4s; }
.konf-pokaz i { width: 8px; height: 8px; border-radius: 50%; background: #e05a47; animation: nagrywa 1.4s ease-in-out infinite; }
.konf-pokaz.koniec { opacity: 0; pointer-events: none; }
@keyframes nagrywa { 50% { opacity: .25; } }

/* ---------- ruch ograniczony / bez skryptów ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}