/* EL-DAM: strona firmowa
   Kierunek: arkusz rysunku technicznego. Kalka (jasne sekcje do czytania)
   i przestrzen modelu CAD (ciemne sekcje z rysunkami). Akcent: miedz przewodu.
   Kolory warstw to stonowane kolory ACI z AutoCAD-a. */

:root {
  --kalka: #eef0ef;
  --kalka-2: #e2e6e5;
  --kratka: rgba(30, 60, 80, .07);
  --tusz: #0e141b;
  --tusz-2: #2c3640;
  --cichy: #56616c;
  --linia: #b9c1c6;

  --model: #0a0f16;
  --model-2: #101822;
  --model-3: #16202d;
  --model-linia: #243142;
  --model-tekst: #dfe6ee;
  --model-cichy: #8d9bad;
  --s-linia: #4d5d72;

  --miedz: #b3561e;
  --miedz-ciemna: #8f4214;
  --miedz-jasna: #f08a4c;
  --pieczatka: #b7322b;

  --aci-zolty: #f2d03b;
  --aci-czerwony: #ff6d5e;
  --aci-cyjan: #4fd4e6;
  --aci-zielony: #72dc83;
  --aci-magenta: #e27cef;
  --aci-zolty-ciemny: #7d6700;
  --aci-czerwony-ciemny: #c7372a;
  --aci-cyjan-ciemny: #0b6f7c;
  --aci-zielony-ciemny: #1c7431;
  --aci-magenta-ciemny: #9c2cad;

  --tekst: 'Archivo', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;
  --naglowek-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--naglowek-h) + 8px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--model);
  color: var(--model-tekst);
  font: 400 17px/1.6 var(--tekst);
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 750; line-height: 1.02; font-stretch: 112%; letter-spacing: -.015em; }
p { margin: 0; }

.w { width: 100%; max-width: 1320px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 48px); }

.wizualnie-ukryte {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pomin {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--miedz-jasna); color: var(--model); padding: 10px 16px;
  font-weight: 600; text-decoration: none;
}
.pomin:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--miedz-jasna); outline-offset: 3px; }
.kalka :focus-visible { outline-color: var(--miedz); }

.etykieta {
  font: 500 12px/1.4 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--model-cichy);
}
.kalka .etykieta { color: var(--cichy); }

/* ---------- Przyciski ---------- */
.przycisk {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 0 22px;
  background: var(--miedz); color: #fff;
  border: 1.5px solid var(--miedz); border-radius: 2px;
  font: 600 16px/1 var(--tekst); font-stretch: 108%;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s, border-color .2s, transform .2s;
}
.przycisk svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .2s; }
.przycisk:hover { background: var(--miedz-ciemna); border-color: var(--miedz-ciemna); }
.przycisk:hover svg { transform: translateX(3px); }
.przycisk-linia { background: transparent; color: var(--model-tekst); border-color: var(--s-linia); }
.przycisk-linia:hover { background: transparent; border-color: var(--miedz-jasna); color: var(--miedz-jasna); }

/* ---------- Naglowek ---------- */
.naglowek {
  position: sticky; top: 0; z-index: 40;
  background: rgba(10, 15, 22, .9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--model-linia);
}
.naglowek-w {
  max-width: 1320px; margin: 0 auto; height: var(--naglowek-h);
  padding-inline: clamp(16px, 4vw, 48px);
  display: flex; align-items: center; gap: 28px;
}
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.logo-znak { width: 34px; height: 34px; fill: none; stroke: var(--miedz-jasna); stroke-width: 1.8; }
.logo-znak rect { stroke: var(--model-linia); fill: var(--model-2); }
.logo-znak circle { fill: var(--miedz-jasna); stroke: none; }
.logo-tekst { display: flex; flex-direction: column; font: 800 20px/1 var(--tekst); font-stretch: 125%; letter-spacing: .01em; }
.logo-tekst small { font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--model-cichy); margin-top: 5px; }
.menu { display: flex; gap: 26px; }
.menu a { font: 500 13px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--model-cichy); padding: 8px 0; transition: color .2s; }
.menu a:hover { color: var(--model-tekst); }
.naglowek-tel {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font: 600 16px/1 var(--tekst); font-stretch: 108%; white-space: nowrap;
  padding: 10px 14px; border: 1px solid var(--model-linia); border-radius: 2px;
  transition: border-color .2s, color .2s;
}
.naglowek-tel:hover { border-color: var(--miedz-jasna); color: var(--miedz-jasna); }
.naglowek-tel svg { width: 17px; height: 17px; fill: none; stroke: var(--miedz-jasna); stroke-width: 1.6; }
.menu-przycisk { display: none; }

/* ---------- 1. Pierwszy ekran ---------- */
.start {
  position: relative;
  padding: clamp(40px, 6vw, 72px) 0 0;
  background:
    radial-gradient(circle at 1px 1px, rgba(141, 155, 173, .16) 1px, transparent 1.4px) 0 0 / 24px 24px,
    var(--model);
  overflow: hidden;
}
.strefy { position: absolute; display: none; font: 500 10px/1 var(--mono); color: var(--s-linia); pointer-events: none; }
.strefy-poziom { top: 0; left: 28px; right: 0; height: 22px; border-bottom: 1px solid var(--model-linia); }
.strefy-poziom span { flex: 1; text-align: center; border-left: 1px solid var(--model-linia); line-height: 22px; }
.strefy-pion { top: 22px; bottom: 0; left: 0; width: 28px; border-right: 1px solid var(--model-linia); flex-direction: column; }
.strefy-pion span { flex: 1; display: grid; place-items: center; border-top: 1px solid var(--model-linia); }

.start-siatka {
  max-width: 1320px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 48px);
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(24px, 4vw, 64px); align-items: center;
}
.start-tekst .etykieta { margin-bottom: 26px; }
.start h1 { font-size: clamp(40px, 5.6vw, 84px); font-weight: 780; line-height: .98; max-width: 13ch; }
.start-lead { margin-top: 26px; max-width: 34em; font-size: clamp(17px, 1.35vw, 19px); color: var(--model-cichy); }
.akcje { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }

/* Schemat jednokreskowy */
.schemat { margin: 0; position: relative; }
.schemat svg { width: 100%; max-width: 470px; height: auto; margin-left: auto; overflow: visible; }
.schemat .p {
  fill: none; stroke: var(--miedz-jasna); stroke-width: 2; stroke-linecap: square;
  stroke-dasharray: 1; stroke-dashoffset: 0;
  transition: stroke-dashoffset .45s calc(var(--d, 0) * .13s) ease-out, stroke .35s calc(var(--d, 0) * .09s);
}
.schemat .szyna { stroke-width: 5; }
.schemat .odplyw .p { stroke: var(--k); }
.schemat .s-wezel { fill: var(--miedz-jasna); transition: fill .3s; }
.schemat .zacisk { fill: var(--model); stroke: var(--k); stroke-width: 2; transition: stroke .35s .6s; }
.s-opis { font: 400 11.5px var(--mono); fill: var(--model-cichy); letter-spacing: .04em; }
.s-kod { font: 600 13px var(--mono); fill: var(--model-tekst); text-anchor: middle; }
.s-lewo { text-anchor: start; }
.s-f { font: 500 10.5px var(--mono); fill: var(--model-cichy); }
.s-obwod { font: 500 12.5px var(--mono); fill: var(--model-tekst); letter-spacing: .07em; transition: fill .2s; }
.s-obwod .s-kod { text-anchor: start; fill: var(--k); }
.odplyw { cursor: pointer; }
.odplyw:hover .s-obwod, .odplyw:focus-visible .s-obwod { fill: var(--k); }
.odplyw:focus-visible { outline: none; }
.odplyw:focus-visible .zacisk { stroke-width: 4; }
.q0 { cursor: pointer; }
.q0:focus, .odplyw:focus { outline: none; }
.q0-pole { fill: transparent; stroke: transparent; }
.q0:focus-visible .q0-pole { stroke: var(--miedz-jasna); stroke-dasharray: 3 3; }
.q0:hover .s-kod { fill: var(--miedz-jasna); }
.q0-noz, .noz { transform-box: fill-box; transform-origin: 50% 0; transition: transform .28s cubic-bezier(.5, 1.6, .5, 1), stroke .35s calc(var(--d, 0) * .09s); }
.noz { transition-delay: .5s, calc(var(--d, 0) * .09s); }

.schemat-podpis {
  display: flex; align-items: center; gap: 10px; justify-content: flex-end;
  margin-top: 4px; font: 400 12px/1.4 var(--mono); color: var(--model-cichy);
}
.dioda { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--miedz-jasna); box-shadow: 0 0 10px var(--miedz-jasna); transition: background .3s, box-shadow .3s; }

/* Stan: rysowanie (intro) i bez pradu */
.intro .schemat .p { stroke-dashoffset: 1; transition: none; }
.intro .znak-tekst { stroke-dashoffset: 3200; fill-opacity: 0; transition: none; }
.intro .schemat .p, .rysowanie .schemat .p, .bez-pradu .schemat .p,
.intro .schemat .odplyw .p, .rysowanie .schemat .odplyw .p, .bez-pradu .schemat .odplyw .p { stroke: var(--s-linia); }
.intro .q0-noz, .rysowanie .q0-noz, .bez-pradu .q0-noz { transform: rotate(32deg); }
.intro .noz, .rysowanie .noz { transform: rotate(28deg); }
.intro .s-wezel, .rysowanie .s-wezel, .bez-pradu .s-wezel { fill: var(--s-linia); }
.intro .zacisk, .rysowanie .zacisk, .bez-pradu .zacisk { stroke: var(--s-linia); transition-delay: 0s; }
.rysowanie .znak-tekst { fill-opacity: 0; }
.intro .dioda, .rysowanie .dioda, .bez-pradu .dioda { background: var(--s-linia); box-shadow: none; }
.bez-pradu .schemat .p { transition-delay: 0s; }

/* Znak EL-DAM */
.znak { margin-top: clamp(28px, 4vw, 56px); padding-inline: clamp(16px, 2.5vw, 36px); }
.znak svg { width: 100%; height: auto; overflow: visible; }
.znak-tekst {
  font: 800 290px/1 var(--tekst); font-stretch: 125%; font-variation-settings: 'wdth' 125;
  fill: url(#znak-siatka); fill-opacity: 1;
  stroke: var(--miedz-jasna); stroke-width: 1.5; stroke-opacity: .85;
  stroke-dasharray: 3200; stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.6s ease-in-out, fill-opacity .9s .25s, stroke .5s;
}
.znak-tlo { fill: var(--model-3); }
.znak-kratka { fill: none; stroke: rgba(240, 138, 76, .3); stroke-width: 1; }
.bez-pradu .znak-tekst { fill-opacity: .15; stroke: var(--s-linia); transition-delay: 0s; }

.start-metryka {
  margin: 0; max-width: 1320px; margin-inline: auto;
  display: grid; grid-template-columns: 1.1fr .7fr 1.6fr .8fr;
  border-top: 1px solid var(--model-linia);
}
.start-metryka div { padding: 14px clamp(16px, 2vw, 24px) 18px; border-right: 1px solid var(--model-linia); }
.start-metryka div:last-child { border-right: 0; }
.start-metryka dt { font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--model-cichy); margin-bottom: 8px; }
.start-metryka dd { margin: 0; font-size: 15px; font-weight: 500; }

/* ---------- Sekcje jasne: kalka z siatka ---------- */
.kalka {
  background:
    linear-gradient(var(--kratka) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--kratka) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--kalka);
  color: var(--tusz);
}
.sekcja-glowa { max-width: 760px; margin-bottom: clamp(32px, 4vw, 52px); }
.sekcja-glowa .etykieta { margin-bottom: 18px; }
.sekcja-glowa h2 { font-size: clamp(34px, 4.4vw, 60px); }
.sekcja-lead { margin-top: 18px; font-size: 18px; color: var(--model-cichy); max-width: 40em; }
.kalka .sekcja-lead { color: var(--cichy); }

/* ---------- 2. Zasada ---------- */
.zasada { padding: clamp(72px, 10vw, 140px) 0; }
.zasada .etykieta { margin-bottom: 26px; }
.zasada-h { font-size: clamp(42px, 7.4vw, 124px); font-weight: 800; line-height: .94; letter-spacing: -.025em; max-width: 14ch; }
/* Lacznik miedzy slowami: zamyka sie, gdy naglowek wjedzie na ekran */
.zasada-lacznik { display: inline-block; width: 1.5em; height: .5em; vertical-align: .08em; overflow: visible; fill: none; stroke: var(--tusz); stroke-width: 5; stroke-linecap: square; }
.zasada-lacznik circle { fill: var(--tusz); stroke: none; }
.zasada-noz { transform-box: view-box; transform-origin: 42px 28px; transition: transform .5s cubic-bezier(.5, 1.6, .5, 1) .2s, stroke .3s .45s; stroke: var(--miedz); }
.zasada-dalej { stroke: var(--miedz); transition: stroke .3s .45s; }
.js .zasada-lacznik:not(.zamkniety) .zasada-noz { transform: rotate(-32deg); stroke: var(--tusz); }
.js .zasada-lacznik:not(.zamkniety) .zasada-dalej { stroke: var(--linia); }
.zasada-kolumny {
  margin-top: clamp(40px, 5vw, 64px); padding-top: 28px; border-top: 1.5px solid var(--tusz);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px);
  max-width: 1000px; font-size: 18px; color: var(--tusz-2);
}

/* ---------- 3. Warstwy CAD ---------- */
.warstwy { padding: clamp(72px, 9vw, 120px) 0; background: var(--model); }
.warstwy .sekcja-glowa h2 { color: var(--model-tekst); }
.cad { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); border: 1px solid var(--model-linia); }
.cad-okno {
  position: relative; display: flex; flex-direction: column;
  background:
    radial-gradient(circle at 1px 1px, rgba(141, 155, 173, .13) 1px, transparent 1.4px) 0 0 / 20px 20px,
    #070b10;
  border-right: 1px solid var(--model-linia);
}
.cad-pasek, .cad-status {
  display: flex; justify-content: space-between; gap: 16px;
  font: 400 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--model-cichy);
  padding: 11px 14px; background: var(--model-2);
}
.cad-pasek { border-bottom: 1px solid var(--model-linia); }
.cad-status { border-top: 1px solid var(--model-linia); justify-content: flex-start; gap: 22px; margin-top: auto; }
.cad-status span:first-child { color: var(--miedz-jasna); }
.plan { width: 100%; height: auto; padding: 10px; }
/* Plan jedzie za lista warstw, zeby przy dolnych warstwach bylo widac efekt */
.cad-lepkie { position: sticky; top: calc(var(--naglowek-h) + 12px); }
.pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.plan text { font-family: var(--mono); }
.w-a00 { color: #c3cdd8; }
.w-a00 .sciana { fill: rgba(195, 205, 216, .035); stroke: currentColor; stroke-width: 7; stroke-linejoin: miter; }
.w-a00 .scianka { fill: none; stroke: currentColor; stroke-width: 3.5; }
.w-a00 .okna rect { fill: #070b10; stroke: currentColor; stroke-width: 1; }
.w-a00 .drzwi { fill: none; stroke: currentColor; stroke-width: 1; opacity: .55; }
.w-a00 .dzialka { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-dasharray: 14 5 2 5; opacity: .6; }
.w-a00 .ulica { fill: rgba(195, 205, 216, .04); stroke: none; }
.w-a00 .drzewo { fill: none; stroke: currentColor; stroke-width: 1; opacity: .3; }
.w-a00 .chodnik { fill: none; stroke: currentColor; stroke-width: 1; opacity: .35; }
.p-napis { font-size: 10px; fill: currentColor; opacity: .5; letter-spacing: .1em; }
.p-pom text { font-size: 10px; fill: currentColor; text-anchor: middle; letter-spacing: .08em; opacity: .75; }
.p-pom .m2 { opacity: .45; letter-spacing: 0; }

.w-e01 { color: var(--aci-zolty); }
.w-e02 { color: var(--aci-czerwony); }
.w-s01 { color: var(--aci-cyjan); }
.w-t01 { color: var(--aci-zielony); }
.w-z01 { color: var(--aci-magenta); }
.warstwa-plan:not(.w-a00) :is(path, rect, circle, ellipse, use) { fill: none; stroke: currentColor; stroke-width: 1.6; }
.warstwa-plan :is(.pelne) { fill: currentColor !important; }
.warstwa-plan .pelne-slabe { fill: color-mix(in srgb, currentColor 28%, transparent) !important; }
#s-lacz .pelne { fill: currentColor; }
.warstwa-plan .obwod { stroke-dasharray: 5 4; stroke-width: 1.1; opacity: .75; }
.warstwa-plan .obwod-pelny { stroke-width: 1.9; }
.warstwa-plan .siec { stroke-width: 2.2; }
.warstwa-plan .gruba { stroke-width: 3.2; }
.warstwa-plan .kan { stroke-dasharray: 12 4; }
.warstwa-plan .tel { stroke-dasharray: 3 3; }
.p-kod { font-size: 10px; fill: currentColor; stroke: none; text-anchor: middle; font-weight: 600; }
.p-siec { font-size: 9.5px; fill: currentColor; text-anchor: end; letter-spacing: .06em; opacity: .85; }

.warstwa-plan { transition: opacity .3s; }
.warstwa-plan.ukryta { opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.plan.izoluj .warstwa-plan:not(.w-a00):not(.aktywna) { opacity: .1; }
.plan [data-nazwa] { transition: filter .15s; }
.plan [data-nazwa]:hover { filter: drop-shadow(0 0 5px currentColor); }

.cad-panel { background: var(--model-2); display: flex; flex-direction: column; }
.cad-panel-glowa {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--model-linia);
}
.cad-narzedzia { display: flex; gap: 6px; }
.cad-przycisk {
  font: 500 11.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase;
  color: var(--model-tekst); background: var(--model-3); border: 1px solid var(--model-linia);
  padding: 9px 11px; border-radius: 2px; cursor: pointer; min-height: 34px;
}
.cad-przycisk:hover { border-color: var(--miedz-jasna); color: var(--miedz-jasna); }
.warstwy-lista { list-style: none; margin: 0; padding: 0; }
.warstwa {
  display: grid; grid-template-columns: 40px 52px minmax(0, 1fr); gap: 4px 10px; align-items: start;
  padding: 16px 16px 18px; border-bottom: 1px solid var(--model-linia);
  transition: background-color .2s;
}
.warstwa:last-child { border-bottom: 0; }
.warstwa:hover, .warstwa:focus-within { background: var(--model-3); }
.warstwa-stan {
  width: 36px; height: 36px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--model-linia); border-radius: 2px; padding: 0; margin-top: -6px;
  color: var(--k); cursor: pointer;
}
.warstwa-stan svg { width: 18px; height: 18px; fill: color-mix(in srgb, var(--k) 35%, transparent); stroke: var(--k); stroke-width: 1.3; }
.warstwa-stan[aria-pressed="false"] { color: var(--s-linia); }
.warstwa-stan[aria-pressed="false"] svg { fill: none; stroke: var(--s-linia); }
.zablokowana .warstwa-stan { cursor: default; color: var(--model-cichy); }
.zablokowana .warstwa-stan svg { fill: none; stroke: var(--model-cichy); }
.warstwa-kod { font: 600 13px/1.5 var(--mono); color: var(--k); display: flex; align-items: center; gap: 7px; }
.warstwa-kod::before { content: ''; width: 9px; height: 9px; background: var(--k); flex: none; }
.warstwa-tresc h3 { font-size: 18px; font-weight: 700; font-stretch: 105%; line-height: 1.25; letter-spacing: 0; }
.warstwa-tresc p { margin-top: 5px; font-size: 15px; line-height: 1.55; color: var(--model-cichy); }
.warstwa.wylaczona .warstwa-tresc h3, .warstwa.wylaczona .warstwa-kod { opacity: .45; }

/* ---------- 4. Etapy: tabela rewizji ---------- */
.etapy { padding: clamp(72px, 9vw, 120px) 0; }
.rewizje { width: 100%; border-collapse: collapse; border: 2px solid var(--tusz); background: rgba(238, 240, 239, .7); font-size: 16px; }
.rewizje thead th {
  font: 500 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-align: left;
  background: var(--tusz); color: var(--kalka); padding: 12px 16px;
}
.rewizje td, .rewizje tbody th { border-top: 1px solid var(--linia); border-right: 1px solid var(--linia); padding: 18px 16px; vertical-align: top; text-align: left; }
.rewizje tbody th { font-size: 18px; font-weight: 700; font-stretch: 105%; width: 22%; }
.rewizje td:last-child { border-right: 0; font-weight: 600; color: var(--miedz-ciemna); width: 24%; }
.rewizje tbody tr { transition: background-color .15s; }
.rewizje tbody tr:hover { background: rgba(179, 86, 30, .06); }
.rewizje .rew { width: 72px; text-align: center; }
/* Litera rewizji w trojkacie, jak na rysunku */
.rewizje td.rew { position: relative; isolation: isolate; color: var(--kalka); font: 600 13px/1 var(--mono); padding-top: 26px; }
.rewizje td.rew::after {
  content: ''; position: absolute; left: 50%; top: 12px; width: 32px; height: 28px; transform: translateX(-50%);
  background: var(--tusz); clip-path: polygon(50% 0, 100% 100%, 0 100%); z-index: -1;
}

/* ---------- 5. Zapytanie: tabliczka rysunkowa ---------- */
.zapytanie { padding: clamp(72px, 9vw, 120px) 0; border-top: 1px solid var(--linia); overflow: hidden; }
.tabliczka {
  position: relative;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "inw inw inw inw inw inw tel tel tel mai mai mai"
    "obi obi obi obi mie mie mie mie sta sta sta sta"
    "bra bra bra bra bra bra bra bra bra bra bra bra"
    "opi opi opi opi opi opi opi opi met met met met"
    "opr opr spr spr spr zgo zgo zgo zgo zgo wys wys";
  border: 2px solid var(--tusz); background: rgba(246, 247, 246, .85);
}
.pole {
  margin: 0; min-width: 0; padding: 10px 14px 12px;
  border: 0; border-right: 1px solid var(--tusz); border-bottom: 1px solid var(--tusz);
  display: flex; flex-direction: column; gap: 4px;
  transition: background-color .15s;
}
.pole:focus-within { background: rgba(179, 86, 30, .07); }
.pole > label:not(.zgoda), .pole > legend, .pole .lbl {
  font: 500 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cichy);
}
.pole legend { float: left; width: 100%; padding: 0; margin-bottom: 6px; }
.opc { text-transform: none; letter-spacing: 0; }
.pole input[type="text"], .pole input[type="tel"], .pole input[type="email"], .pole select, .pole textarea {
  width: 100%; border: 0; background: transparent; color: var(--tusz);
  font: 500 18px/1.35 var(--tekst); padding: 4px 0; border-radius: 0;
}
.pole textarea { resize: vertical; min-height: 104px; font-size: 17px; }
.pole select { cursor: pointer; appearance: none; background: linear-gradient(45deg, transparent 50%, var(--tusz) 50%) right 6px center / 7px 7px no-repeat, linear-gradient(-45deg, transparent 50%, var(--tusz) 50%) right 0 center / 7px 7px no-repeat; padding-right: 22px; }
.pole :is(input, select, textarea):focus { outline: none; }
.pole ::placeholder { color: var(--cichy); opacity: 1; }
.p-inwestor { grid-area: inw; } .p-tel { grid-area: tel; } .p-mail { grid-area: mai; border-right: 0; }
.p-obiekt { grid-area: obi; } .p-miejsce { grid-area: mie; } .p-stadium { grid-area: sta; border-right: 0; }
.p-branza { grid-area: bra; border-right: 0; }
.p-opis { grid-area: opi; }
.p-metryka { grid-area: met; display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--tusz); }
.p-metryka .pole { border-bottom: 0; }
.p-metryka .pole:nth-child(2n) { border-right: 0; }
.p-metryka .pole:nth-child(-n+2) { border-bottom: 1px solid var(--tusz); }
.p-opracowal { grid-area: opr; border-bottom: 0; } .p-sprawdzi { grid-area: spr; border-bottom: 0; }
.p-zgoda { grid-area: zgo; border-bottom: 0; justify-content: center; }
.p-wyslij { grid-area: wys; display: flex; align-items: stretch; }
.p-wyslij .przycisk { width: 100%; justify-content: center; border-radius: 0; border: 0; min-height: 64px; }
.wart { font: 600 16px/1.3 var(--mono); color: var(--tusz); }
.opcje { display: flex; flex-wrap: wrap; gap: 6px 18px; clear: both; }
.opcje label { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; cursor: pointer; min-height: 32px; }
.opcje b { font: 600 13px var(--mono); color: var(--k); }
.p-branza .opcje label { padding-left: 10px; border-left: 3px solid var(--k); }
.opcje input, .zgoda input { width: 18px; height: 18px; accent-color: var(--miedz); margin: 0; flex: none; }
.zgoda { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13.5px; line-height: 1.45; color: var(--tusz-2); cursor: pointer; }
.zgoda input { margin-top: 1px; }
.zgoda a { color: var(--miedz-ciemna); }
.pole.blad { background: rgba(183, 50, 43, .08); }
.pole.blad > label, .pole.blad .zgoda { color: var(--pieczatka); }
.tabliczka-blad {
  grid-column: 1 / -1; margin: 0; padding: 12px 14px; background: var(--pieczatka); color: #fff;
  font: 500 14px/1.4 var(--mono);
}
.tabliczka-ok { margin-top: 18px; font-size: 17px; max-width: 46em; color: var(--tusz-2); }
.pieczatka {
  position: absolute; right: 6%; top: 52%; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 22px 14px; color: var(--pieczatka);
  border: 4px double var(--pieczatka); border-radius: 6px;
  font-family: var(--mono); text-transform: uppercase;
  mix-blend-mode: multiply;
  opacity: 0; visibility: hidden; transform: rotate(-9deg);
}
.pieczatka-gora, .pieczatka-dol { font-size: 11px; letter-spacing: .14em; font-weight: 600; }
.pieczatka-srodek { font: 800 44px/1 var(--tekst); font-stretch: 120%; letter-spacing: .04em; }
.przyjeto .pieczatka { visibility: visible; animation: pieczatka .45s cubic-bezier(.3, 1.4, .6, 1) forwards; }
@keyframes pieczatka {
  0% { opacity: 0; transform: rotate(-9deg) scale(1.8); }
  60% { opacity: .95; transform: rotate(-9deg) scale(.96); }
  100% { opacity: .88; transform: rotate(-9deg) scale(1); }
}

/* ---------- 6. Kontakt ---------- */
.kontakt { padding: clamp(72px, 9vw, 120px) 0; background: var(--model); }
.kontakt-siatka { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.kontakt-siatka > div:first-child { container-type: inline-size; min-width: 0; }
.kontakt .etykieta { margin-bottom: 18px; }
.kontakt h2 { font-size: clamp(34px, 4.4vw, 60px); max-width: 14ch; }
.kontakt-lead { margin-top: 18px; color: var(--model-cichy); font-size: 18px; max-width: 32em; }
.kontakt-tel {
  display: inline-block; margin-top: 32px; text-decoration: none; white-space: nowrap;
  font: 800 clamp(34px, 13cqi, 112px)/1 var(--tekst); font-stretch: 118%; letter-spacing: -.02em;
  color: var(--miedz-jasna); transition: color .2s;
}
.kontakt-tel:hover { color: var(--model-tekst); }
.kontakt-dane { margin: 0; border: 1px solid var(--model-linia); }
.kontakt-dane div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--model-linia); }
.kontakt-dane div:last-child { border-bottom: 0; }
.kontakt-dane dt { font: 500 10.5px/1.9 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--model-cichy); }
.kontakt-dane dd { margin: 0; font-size: 16px; }
.kontakt-dane a { color: var(--model-tekst); text-decoration-color: var(--miedz-jasna); text-underline-offset: 3px; }
.kontakt-dane a:hover { color: var(--miedz-jasna); }

.stopka { background: var(--model); border-top: 1px solid var(--model-linia); }
.stopka-w { display: flex; flex-wrap: wrap; gap: 8px 32px; padding-block: 22px; font: 400 12px/1.5 var(--mono); color: var(--model-cichy); }
.stopka-w a { margin-left: auto; color: var(--model-cichy); }
.stopka-w a:hover { color: var(--miedz-jasna); }

/* ---------- Celownik CAD ---------- */
.celownik { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; display: none; }
.kursor-cad .celownik.widoczny { display: block; }
.celownik i { position: absolute; background: var(--model-tekst); opacity: .75; }
.c-poz { width: 110px; height: 1px; left: -55px; top: 0; }
.c-pion { width: 1px; height: 110px; left: 0; top: -55px; }
.c-kwadrat { width: 10px; height: 10px; left: -5px; top: -5px; background: transparent !important; border: 1px solid var(--model-tekst); opacity: 1 !important; }
.c-etykieta {
  position: absolute; left: 16px; top: 14px; white-space: nowrap;
  display: flex; flex-direction: column; gap: 2px;
  font: 400 11px/1.3 var(--mono); color: var(--model-tekst);
  background: rgba(7, 11, 16, .85); border: 1px solid var(--model-linia); padding: 5px 8px;
}
.c-etykieta b { font-weight: 600; color: var(--miedz-jasna); }
.c-etykieta b:empty { display: none; }
.kursor-cad [data-cad] { cursor: none; }
.kursor-cad [data-cad] :is(a, [role="button"]) { cursor: pointer; }

/* ---------- Responsywnosc ---------- */
@media (min-width: 1180px) {
  .strefy-poziom, .strefy-pion { display: flex; }
  .start { padding-top: 96px; }
}
@media (max-width: 1100px) {
  .cad { grid-template-columns: 1fr; }
  .cad-lepkie { position: static; }
  .cad-okno { border-right: 0; border-bottom: 1px solid var(--model-linia); }
  .warstwy-lista { display: grid; grid-template-columns: 1fr 1fr; }
  .warstwa { border-right: 1px solid var(--model-linia); }
  .warstwa:last-child { border-bottom: 1px solid var(--model-linia); }
}
@media (max-width: 900px) {
  .start-siatka { grid-template-columns: 1fr; }
  .schemat svg { margin: 0 auto; max-width: 420px; }
  .schemat-podpis { justify-content: center; }
  .start-metryka { grid-template-columns: 1fr 1fr; }
  .start-metryka div:nth-child(2) { border-right: 0; }
  .start-metryka div:nth-child(-n+2) { border-bottom: 1px solid var(--model-linia); }
  .zasada-kolumny { grid-template-columns: 1fr; }
  .kontakt-siatka { grid-template-columns: 1fr; }
  .tabliczka {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas:
      "inw inw inw inw inw inw"
      "tel tel tel mai mai mai"
      "obi obi obi mie mie mie"
      "sta sta sta sta sta sta"
      "bra bra bra bra bra bra"
      "opi opi opi opi opi opi"
      "met met met met met met"
      "opr opr opr spr spr spr"
      "zgo zgo zgo zgo zgo zgo"
      "wys wys wys wys wys wys";
  }
  .p-inwestor, .p-mail, .p-miejsce, .p-stadium, .p-opis, .p-sprawdzi, .p-zgoda { border-right: 0; }
  .p-opracowal, .p-sprawdzi, .p-zgoda { border-bottom: 1px solid var(--tusz); }
  .p-metryka { grid-template-columns: repeat(4, 1fr); }
  .p-metryka .pole { border-bottom: 0 !important; border-right: 1px solid var(--tusz) !important; }
  .p-metryka .pole:last-child { border-right: 0 !important; }
  .pieczatka { right: 50%; top: auto; bottom: 90px; transform: translateX(50%) rotate(-9deg); }
  @keyframes pieczatka {
    0% { opacity: 0; transform: translateX(50%) rotate(-9deg) scale(1.8); }
    60% { opacity: .95; transform: translateX(50%) rotate(-9deg) scale(.96); }
    100% { opacity: .88; transform: translateX(50%) rotate(-9deg) scale(1); }
  }
}
@media (max-width: 860px) {
  .menu-przycisk {
    display: grid; place-content: center; gap: 6px; width: 44px; height: 44px; padding: 0;
    background: transparent; border: 1px solid var(--model-linia); border-radius: 2px; cursor: pointer;
  }
  .menu-przycisk i { display: block; width: 18px; height: 1.5px; background: var(--model-tekst); transition: transform .2s; }
  .menu-przycisk[aria-expanded="true"] i:first-of-type { transform: translateY(3.75px) rotate(45deg); }
  .menu-przycisk[aria-expanded="true"] i:last-of-type { transform: translateY(-3.75px) rotate(-45deg); }
  .naglowek-w { gap: 10px; }
  .js .menu {
    position: absolute; left: 0; right: 0; top: var(--naglowek-h);
    flex-direction: column; gap: 0; background: var(--model); border-bottom: 1px solid var(--model-linia);
    display: none;
  }
  .js .menu.otwarte { display: flex; }
  .js .menu a { padding: 18px clamp(16px, 4vw, 48px); border-top: 1px solid var(--model-linia); font-size: 14px; }
  html:not(.js) .naglowek-w { flex-wrap: wrap; height: auto; padding-block: 12px; row-gap: 6px; }
  html:not(.js) .menu { order: 3; width: 100%; flex-wrap: wrap; gap: 4px 20px; }
  html:not(.js) .menu-przycisk { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .warstwy-lista { grid-template-columns: 1fr; }
  .warstwa { border-right: 0; grid-template-columns: 40px 48px minmax(0, 1fr); }
  .warstwa:last-child { border-bottom: 0; }
  .cad-pasek span:last-child { display: none; }
  .cad-status { gap: 14px; font-size: 10px; }
  .s-opis { font-size: 14px; }
  .s-kod { font-size: 16px; }
  .s-f { font-size: 13px; }
  .s-obwod { font-size: 13.5px; }
  .plan { padding: 4px; }
  .rewizje, .rewizje tbody, .rewizje tr, .rewizje td, .rewizje th { display: block; }
  .rewizje thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rewizje tbody tr { display: grid; grid-template-columns: 52px 1fr; border-top: 1px solid var(--linia); padding: 14px 14px 16px 0; }
  .rewizje tbody tr:first-child { border-top: 0; }
  .rewizje td, .rewizje tbody th { border: 0; padding: 0; width: auto !important; }
  .rewizje td.rew { grid-row: 1 / span 3; min-height: 30px; }
  .rewizje td.rew::after { top: -6px; }
  .rewizje td.rew { padding-top: 5px; }
  .rewizje tbody th { font-size: 18px; margin-bottom: 6px; }
  .rewizje td:nth-child(3) { font-size: 15.5px; color: var(--tusz-2); }
  .rewizje td:last-child { margin-top: 8px; font-size: 15px; }
  .rewizje td:last-child::before { content: 'Dostajesz: '; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cichy); }
  .tabliczka { grid-template-areas:
      "inw inw inw inw inw inw"
      "tel tel tel tel tel tel"
      "mai mai mai mai mai mai"
      "obi obi obi obi obi obi"
      "mie mie mie mie mie mie"
      "sta sta sta sta sta sta"
      "bra bra bra bra bra bra"
      "opi opi opi opi opi opi"
      "met met met met met met"
      "opr opr opr spr spr spr"
      "zgo zgo zgo zgo zgo zgo"
      "wys wys wys wys wys wys"; }
  .p-tel { border-right: 0; }
  .p-obiekt { border-right: 0; }
  .p-metryka { grid-template-columns: 1fr 1fr; }
  .p-metryka .pole:nth-child(2) { border-right: 0 !important; }
  .p-metryka .pole:nth-child(-n+2) { border-bottom: 1px solid var(--tusz) !important; }
  .opcje { flex-direction: column; gap: 2px; }
  .kontakt-dane div { grid-template-columns: 80px 1fr; }
  .stopka-w a { margin-left: 0; }
  .start-metryka dd { font-size: 14px; }
}
@media (max-width: 420px) {
  .naglowek-tel { padding: 10px; }
  .naglowek-tel span { display: none; }
  .logo-tekst { font-size: 18px; }
  .pieczatka { max-width: calc(100% - 24px); padding: 10px 14px; }
  .pieczatka-srodek { font-size: 32px; }
  .przycisk { width: 100%; justify-content: center; }
}

@media (pointer: coarse) {
  .q0-pole { stroke: var(--s-linia); stroke-dasharray: 3 3; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- Podstrony: dokument i 404 ---------- */
.dokument { padding: clamp(56px, 8vw, 104px) 0; }
.dokument .w { max-width: 820px; }
.dokument h1 { font-size: clamp(36px, 5vw, 60px); margin: 16px 0 32px; }
.dokument h2 { font-size: 21px; font-stretch: 105%; margin: 36px 0 10px; letter-spacing: 0; }
.dokument p { color: var(--tusz-2); }
.dokument a { color: var(--miedz-ciemna); }
.blad404 { min-height: 100vh; display: grid; align-items: center; padding: 64px 0; }
.blad404 h1 { font-size: clamp(38px, 6vw, 80px); max-width: 14ch; margin: 28px 0 18px; }
.blad404 p { color: var(--model-cichy); }
.blad404 .akcje { margin-top: 32px; }
.blad404-schemat { width: min(360px, 100%); margin-top: 36px; fill: none; stroke: var(--miedz-jasna); stroke-width: 2.5; }
.blad404-schemat circle { fill: var(--miedz-jasna); }
.blad404-schemat path:first-child { stroke: var(--s-linia); }