/* ============================================================
   ETHICALC — arkusz stylów strony firmowej
   Język wizualny: znak firmy (wiersze kropek i kresek = moduły i
   połączenia) jako motyw animacji „system, który się składa”.
   Bez zasobów z obcych serwerów. Czcionki hostowane lokalnie.
   ============================================================ */

/* ---------- czcionki (Google Fonts, pliki lokalne) ---------- */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/SpaceGrotesk-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02D7-02DD,U+02E0-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/SpaceGrotesk-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/SpaceGrotesk-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02D7-02DD,U+02E0-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/SpaceGrotesk-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Inter-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02D7-02DD,U+02E0-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Inter-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/Inter-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02D7-02DD,U+02E0-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/Inter-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- tokeny ---------- */
:root{
  --papier:#F4F3EF;        /* tło */
  --papier-2:#ECEAE4;      /* tło sekcji */
  --karta:#FFFFFF;
  --atrament:#1B1C1F;      /* tekst, jak w logo */
  --grafit:#2C2D31;
  --tekst-2:#5A5C63;
  --mgla:#DEDBD3;          /* linie */
  --mgla-2:#CBC7BC;
  --schemat:#9B978E;       /* wzór kropek i kresek w tle hero */
  --sygnal:#E3561C;        /* aktywny węzeł, akcent */
  --sygnal-2:#B8420F;      /* akcent na jasnym tle, kontrast AA na tekście */
  --sygnal-tlo:#FCEBE2;
  --przycisk:#C94410;      /* tło przycisków i logo w stopce; biały tekst ma kontrast 4,9:1 */
  --przycisk-hover:#A83709;
  --przycisk-tekst:#FFFFFF;
  --zielen:#1E8A5E;
  --zielen-tlo:#E3F3EB;
  --noc:#121317;           /* sekcje ciemne */
  --noc-2:#1B1C21;
  --noc-tekst:#ECEAE4;
  --noc-tekst-2:#A9ABB3;
  --noc-linia:#2E3036;
  --szer:1160px;
  --promien:14px;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --tech:"Space Grotesk","Inter",system-ui,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","Consolas",Menlo,monospace;
  --cien:0 1px 2px rgba(27,28,31,.06),0 12px 32px -16px rgba(27,28,31,.25);
  --przej:.42s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --papier:#141518;--papier-2:#1A1B1F;--karta:#1F2025;--atrament:#ECEAE4;--grafit:#E2E0DA;--tekst-2:#A9ABB3;
    --mgla:#2E3036;--mgla-2:#3A3C43;--schemat:#6F727B;--sygnal:#FF8A4C;--sygnal-2:#FF9A66;--sygnal-tlo:#2A1C14;--zielen:#5CCB95;--zielen-tlo:#17281F;
    --przycisk:#FF8A4C;--przycisk-hover:#FFA072;--przycisk-tekst:#141518;
    --noc:#0C0D10;--noc-2:#121317;--cien:0 1px 2px rgba(0,0,0,.4),0 12px 32px -16px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --papier:#141518;--papier-2:#1A1B1F;--karta:#1F2025;--atrament:#ECEAE4;--grafit:#E2E0DA;--tekst-2:#A9ABB3;
  --mgla:#2E3036;--mgla-2:#3A3C43;--schemat:#6F727B;--sygnal:#FF8A4C;--sygnal-2:#FF9A66;--sygnal-tlo:#2A1C14;--zielen:#5CCB95;--zielen-tlo:#17281F;
  --przycisk:#FF8A4C;--przycisk-hover:#FFA072;--przycisk-tekst:#141518;
  --noc:#0C0D10;--noc-2:#121317;--cien:0 1px 2px rgba(0,0,0,.4),0 12px 32px -16px rgba(0,0,0,.7);
}

/* ---------- podstawy ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--atrament);font:17px/1.6 var(--sans);font-feature-settings:"ss01","cv11"}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration-color:var(--mgla-2);text-underline-offset:.18em}
a:hover{text-decoration-color:var(--sygnal)}
h1,h2,h3,h4{font-family:var(--tech);line-height:1.12;letter-spacing:-.015em;margin:0 0 .5em;font-weight:700}
h1{font-size:clamp(2.1rem,5.2vw,3.9rem)}
h2{font-size:clamp(1.65rem,3.4vw,2.5rem)}
h3{font-size:1.25rem;font-weight:500}
p{margin:.5em 0}
strong,b{font-weight:600}
.ramka{width:min(100% - 32px,var(--szer));margin-inline:auto}
.sekcja{padding:clamp(56px,8vw,112px) 0}
.sekcja.ciasna{padding:clamp(40px,5vw,72px) 0}
.sekcja.ciemna{background:var(--noc);color:var(--noc-tekst)}
.sekcja.ciemna .nadtytul{color:var(--sygnal)}
.sekcja.ciemna .ulot{color:var(--noc-tekst-2)}
.sekcja.szara{background:var(--papier-2)}
.nadtytul{font-family:var(--tech);font-weight:500;font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sygnal-2);margin:0 0 .9rem;display:flex;align-items:center;gap:.6rem}
.nadtytul::before{content:"";width:22px;height:5px;border-radius:3px;background:currentColor;flex:none}
.ulot{font-size:1.15rem;color:var(--tekst-2);max-width:62ch}
.ulot.srodek{margin-inline:auto;text-align:center}
.srodek{text-align:center}
.nag-sekcji{max-width:760px;margin-bottom:clamp(28px,4vw,52px)}
.siatka{display:grid;gap:20px}
.k2{grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr))}
.k3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.k4{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.wizualnie-ukryte{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;background:var(--atrament);color:var(--papier);padding:10px 14px;border-radius:8px;z-index:100;font-weight:600}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--sygnal);outline-offset:3px;border-radius:4px}
::selection{background:var(--sygnal);color:#fff}

/* ---------- przyciski ---------- */
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.35rem;border-radius:999px;font-family:var(--tech);font-weight:700;font-size:1rem;text-decoration:none;border:2px solid var(--przycisk);background:var(--przycisk);color:var(--przycisk-tekst);transition:transform var(--przej),background var(--przej),color var(--przej),border-color var(--przej)}
.btn:hover{transform:translateY(-2px);background:var(--przycisk-hover);border-color:var(--przycisk-hover);color:var(--przycisk-tekst)}
.btn.drugi{background:transparent;border-color:var(--atrament);color:var(--atrament)}
.btn.drugi:hover{background:var(--atrament);color:var(--papier);border-color:var(--atrament)}
.sekcja.ciemna .btn{background:var(--przycisk);border-color:var(--przycisk);color:var(--przycisk-tekst)}
.sekcja.ciemna .btn:hover{background:var(--przycisk-hover);border-color:var(--przycisk-hover);color:var(--przycisk-tekst)}
.nawigacja a.btn{background:var(--przycisk);border-color:var(--przycisk);color:var(--przycisk-tekst)}
.nawigacja a.btn:hover{background:var(--przycisk-hover);border-color:var(--przycisk-hover);color:var(--przycisk-tekst)}
.sekcja.ciemna .btn.drugi{background:transparent;border-color:var(--noc-tekst-2);color:var(--noc-tekst)}
.sekcja.ciemna .btn.drugi:hover{background:var(--noc-tekst);color:var(--noc);border-color:var(--noc-tekst)}
.btn .strz{transition:transform var(--przej)}
.btn:hover .strz{transform:translateX(4px)}

/* ---------- nagłówek ---------- */
.naglowek{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--papier) 86%,transparent);backdrop-filter:saturate(1.3) blur(12px);-webkit-backdrop-filter:saturate(1.3) blur(12px);border-bottom:1px solid transparent;transition:border-color var(--przej)}
.naglowek.przewiniety{border-bottom-color:var(--mgla)}
.naglowek .ramka{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px}
.logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.logo img{height:30px;width:auto}
.logo .logo-ciemne{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo img.logo-jasne{display:none}:root:not([data-theme="light"]) .logo img.logo-ciemne{display:block}}
:root[data-theme="dark"] .logo img.logo-jasne{display:none}:root[data-theme="dark"] .logo img.logo-ciemne{display:block}
.nawigacja ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;align-items:center}
.nawigacja a{display:inline-block;padding:.5rem .8rem;border-radius:8px;text-decoration:none;font-weight:600;font-size:.98rem;color:var(--grafit)}
.nawigacja a:hover,.nawigacja a[aria-current="page"]{background:var(--papier-2);color:var(--atrament)}
.nawigacja .btn{padding:.6rem 1.05rem;font-size:.95rem;margin-left:8px}
.menu-przycisk{display:none;background:none;border:2px solid var(--mgla-2);border-radius:10px;padding:8px 10px;font:inherit;font-weight:600;color:inherit;cursor:pointer}
@media (max-width:900px){
  .menu-przycisk{display:inline-flex;align-items:center;gap:8px}
  .nawigacja{position:absolute;left:0;right:0;top:72px;background:var(--papier);border-bottom:1px solid var(--mgla);padding:12px 16px 18px;display:none;box-shadow:var(--cien)}
  .nawigacja.otwarta{display:block}
  .nawigacja ul{flex-direction:column;align-items:stretch}
  .nawigacja a{display:block;padding:.75rem .9rem;font-size:1.05rem}
  .nawigacja .btn{margin:8px 0 0;justify-content:center}
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;min-height:min(88vh,860px);display:flex;align-items:center;border-bottom:1px solid var(--mgla)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero .ramka{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center;padding:72px 0}
.hero .ramka>*{min-width:0}
@media (max-width:900px){.hero .ramka{grid-template-columns:minmax(0,1fr);padding:56px 0}}
.hero h1{max-width:20ch;margin-bottom:.6em;font-size:clamp(2rem,4.4vw,3.4rem)}
.hero h1 .akcent{color:var(--przycisk)}
.hero .ulot{font-size:clamp(1.05rem,1.4vw,1.25rem)}
.hero .akcje{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-maska{position:absolute;inset:0;background:radial-gradient(70% 70% at 30% 50%,color-mix(in srgb,var(--papier) 92%,transparent) 0,color-mix(in srgb,var(--papier) 65%,transparent) 55%,transparent 100%);pointer-events:none}

/* widżet konsensusu (3 modele czytają, zgodne idzie dalej) */
.konsensus{background:var(--karta);border:1px solid var(--mgla);border-radius:var(--promien);box-shadow:var(--cien);padding:22px;font-family:var(--tech);position:relative}
.konsensus .tytul{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tekst-2);margin-bottom:14px}
.konsensus .tytul .stan{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--zielen)}
.konsensus .tytul .stan::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:puls-kropka 1.8s infinite}
.konsensus .dokument{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 12px;border:1px dashed var(--mgla-2);border-radius:10px;font-size:.92rem;color:var(--tekst-2);margin-bottom:12px}
.konsensus .dokument .nazwa{font-family:var(--mono);color:var(--atrament);font-size:.88rem}
.konsensus .czytniki{display:grid;gap:8px}
.czytnik{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;background:var(--papier);border:1px solid var(--mgla);transition:background var(--przej),border-color var(--przej)}
.czytnik .kto{font-size:.72rem;letter-spacing:.08em;color:var(--tekst-2);font-weight:700}
.czytnik .wartosc{font-family:var(--mono);font-size:.98rem;min-height:1.3em;color:var(--atrament)}
.czytnik .wartosc .kursor{display:inline-block;width:.55ch;height:1.05em;vertical-align:-.15em;background:var(--sygnal);margin-left:2px;animation:mrug 1s steps(2) infinite}
.czytnik .znak{font-weight:700;font-size:.95rem;opacity:0;transition:opacity .3s}
.czytnik.zgodny{border-color:color-mix(in srgb,var(--zielen) 50%,var(--mgla));background:var(--zielen-tlo)}
.czytnik.zgodny .znak{opacity:1;color:var(--zielen)}
.czytnik.rozny{border-color:color-mix(in srgb,var(--sygnal) 60%,var(--mgla));background:var(--sygnal-tlo)}
.czytnik.rozny .znak{opacity:1;color:var(--sygnal-2)}
.konsensus .wynik{margin-top:12px;padding:12px 14px;border-radius:10px;border:2px solid var(--mgla);display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.95rem;transition:border-color var(--przej),background var(--przej)}
.konsensus .wynik .tresc{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.konsensus .wynik .etykieta{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tekst-2);font-weight:700}
.konsensus .wynik b{font-family:var(--mono);font-weight:600}
.konsensus .wynik.ok{border-color:var(--zielen);background:var(--zielen-tlo)}
.konsensus .wynik.czlowiek{border-color:var(--sygnal);background:var(--sygnal-tlo)}
.konsensus .stopka{margin-top:10px;font-size:.8rem;color:var(--tekst-2);font-family:var(--sans)}
@keyframes mrug{50%{opacity:0}}
@keyframes puls-kropka{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 50%,transparent)}100%{box-shadow:0 0 0 10px transparent}}

/* ---------- pasek dowodów ---------- */
.dowody{border-bottom:1px solid var(--mgla);background:var(--papier)}
.dowody .ramka{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
@media (max-width:900px){.dowody .ramka{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dowod{padding:26px 20px;border-right:1px solid var(--mgla)}
.dowod:last-child{border-right:0}
@media (max-width:900px){.dowod:nth-child(2){border-right:0}.dowod:nth-child(-n+2){border-bottom:1px solid var(--mgla)}}
.dowod .liczba{font-family:var(--tech);font-weight:700;font-size:clamp(1.9rem,3.2vw,2.6rem);line-height:1;letter-spacing:-.03em;color:var(--atrament)}
.dowod .liczba small{font-size:.5em;font-weight:500;color:var(--sygnal-2);letter-spacing:0;margin-left:.15em}
.dowod .opis{color:var(--tekst-2);font-size:.95rem;margin-top:6px}

/* ---------- warstwy (dlaczego my) ---------- */
.warstwy{display:grid;gap:18px}
.warstwa{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:28px;align-items:center;background:var(--karta);border:1px solid var(--mgla);border-radius:var(--promien);padding:clamp(22px,3vw,36px);box-shadow:var(--cien);position:relative;overflow:hidden}
@media (max-width:760px){.warstwa{grid-template-columns:minmax(0,1fr)}}
.warstwa::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--sygnal);transform-origin:top;transition:transform .8s var(--przej) .1s}
.js .warstwa::before{transform:scaleY(0)}
.js .warstwa.widoczne::before{transform:scaleY(1)}
.warstwa .duzy{font-family:var(--tech);font-weight:700;font-size:clamp(2.4rem,5vw,4.2rem);line-height:.95;letter-spacing:-.03em}
.warstwa .duzy em{font-style:normal;color:var(--sygnal-2)}
.warstwa .duzy small{display:block;font-size:.95rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--tekst-2);margin-top:12px}
.warstwa .duzy.haslo-warstwy{color:var(--przycisk);text-transform:uppercase;letter-spacing:.01em;font-size:clamp(2rem,4.2vw,3.4rem);overflow-wrap:anywhere}
.warstwa h3{font-size:1.45rem;font-weight:700}
.warstwa p{color:var(--tekst-2);margin:0}
.warstwa .lista-dowodow{display:flex;flex-wrap:wrap;gap:8px 22px;margin:16px 0 0;padding:0;list-style:none}
.warstwa .lista-dowodow li{display:inline-flex;align-items:center;gap:9px;font-size:.9rem;font-weight:600;color:var(--grafit)}
.warstwa .lista-dowodow li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--przycisk);flex:none}
.warstwa .przypis{font-size:.8em;line-height:1.45}

/* ---------- kafle systemów ---------- */
.kafle{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px}
.kafel{position:relative;display:flex;flex-direction:column;gap:14px;background:var(--karta);border:1px solid var(--mgla);border-radius:var(--promien);padding:22px 22px 20px;text-decoration:none;color:inherit;box-shadow:var(--cien);transition:transform var(--przej),border-color var(--przej),box-shadow var(--przej);isolation:isolate}
.kafel::after{content:"";position:absolute;left:22px;right:22px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--sygnal);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--przej)}
.kafel:hover{transform:translateY(-4px);border-color:var(--mgla-2);box-shadow:0 2px 4px rgba(27,28,31,.06),0 22px 44px -18px rgba(27,28,31,.35)}
.kafel:hover::after{transform:scaleX(1)}
.kafel .gora{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
/* kafle systemów: zawsze białe, logotypy wprost na kaflu, litery podobnej wielkości */
.kafle .kafel{background:#fff;border-color:#DEDBD3;color:#1B1C1F}
.kafle .kafel .haslo,.kafle .kafel .haslo b,.kafle .kafel .domena{color:#1B1C1F}
.kafle .kafel .opis{color:#5A5C63}
.kafle .kafel .domena small,.kafle .kafel .stopka{color:#B8420F}
.kafle .kafel .odznaka{background:#E3F3EB;color:#1E8A5E}
.kafel .logo-serwisu{display:flex;align-items:center;height:104px;max-width:100%;flex:none}
.kafel .logo-serwisu img{width:auto;max-width:100%;object-fit:contain;object-position:left center}
.lg-orkan{height:60px}.lg-verdegree{height:32px}.lg-esap{height:42px}.lg-esgall{height:92px}.lg-rozlicz{height:38px}
.lg-faktolap{height:104px}.lg-consensusengine{height:54px}.lg-ethilex{height:41px}.lg-magicbucket{height:96px}
.kafel .domena{font-family:var(--tech);font-weight:700;font-size:1.12rem;letter-spacing:-.01em}
.kafel .domena small{display:block;font-weight:500;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sygnal-2);margin-bottom:2px}
.kafel .haslo{margin:0;font-size:1rem;color:var(--atrament);line-height:1.5}
.kafel .haslo b{color:var(--atrament)}
.kafel .opis{margin:0;color:var(--tekst-2);font-size:.93rem}
.kafel .stopka{margin-top:auto;display:flex;align-items:center;gap:8px;font-size:.88rem;font-weight:600;color:var(--sygnal-2);font-family:var(--tech)}
.kafel .stopka .strz{transition:transform var(--przej)}
.kafel:hover .stopka .strz{transform:translateX(4px)}
.kafel .odznaka{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:6px;background:var(--zielen-tlo);color:var(--zielen);white-space:nowrap}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .kafle .kafel{box-shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -16px rgba(0,0,0,.7)}}

/* ---------- „W każdym projekcie” ---------- */
.gwarancje{counter-reset:p;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:0 40px}
.gwarancje li{counter-increment:p;position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--noc-linia)}
.gwarancje li::before{content:counter(p,decimal-leading-zero);font-family:var(--tech);font-weight:700;color:var(--sygnal);font-size:.95rem;padding-top:3px}
.gwarancje .co{font-weight:600;font-size:1.08rem;color:var(--noc-tekst)}
.sekcja.ciemna .dalej{margin:28px 0 0}
.sekcja.ciemna .dalej a{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--tech);font-weight:700;font-size:1.05rem;color:var(--przycisk);text-decoration:none}
.sekcja.ciemna .dalej a:hover{text-decoration:underline}
.sekcja.ciemna .dalej .strz{transition:transform var(--przej)}
.sekcja.ciemna .dalej a:hover .strz{transform:translateX(4px)}
.cta-koncowa .kroki b{color:var(--sygnal);font-weight:700}
.gwarancje .jak{display:block;color:var(--noc-tekst-2);font-size:.95rem;margin-top:3px}
.gwarancje li .lacznik{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--sygnal);transition:width 1s var(--przej)}
.js .gwarancje li .lacznik{width:0}
.js .gwarancje li.widoczne .lacznik{width:100%;transition-delay:calc(var(--i,0)*90ms)}

/* ---------- B-O-T ---------- */
.bot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;position:relative;counter-reset:e}
@media (max-width:860px){.bot{grid-template-columns:minmax(0,1fr)}}
.etap{position:relative;padding:28px 26px 26px;background:var(--karta);border:1px solid var(--mgla);counter-increment:e}
.etap:first-child{border-radius:var(--promien) 0 0 var(--promien)}
.etap:last-child{border-radius:0 var(--promien) var(--promien) 0}
.etap+.etap{border-left:0}
@media (max-width:860px){.etap:first-child{border-radius:var(--promien) var(--promien) 0 0}.etap:last-child{border-radius:0 0 var(--promien) var(--promien)}.etap+.etap{border-left:1px solid var(--mgla);border-top:0}}
.etap .litera{font-family:var(--tech);font-weight:700;font-size:3rem;line-height:1;color:var(--sygnal-2);letter-spacing:-.04em}
.etap .litera small{font-size:.9rem;letter-spacing:.12em;color:var(--tekst-2);margin-left:8px;font-weight:500;text-transform:uppercase}
.etap h3{margin:14px 0 6px;font-weight:700}
.etap p{color:var(--tekst-2);margin:0;font-size:.98rem}
.etap .postep{position:absolute;left:0;right:0;top:0;height:4px;background:var(--mgla)}
.etap .postep i{display:block;height:100%;width:100%;background:var(--sygnal);transition:width 1.1s var(--przej)}
.js .etap .postep i{width:0}
.js .etap.widoczne .postep i{width:100%}
.etap:nth-child(2).widoczne .postep i{transition-delay:.5s}
.etap:nth-child(3).widoczne .postep i{transition-delay:1s}

.sekcja.szara .etap{background:var(--karta)}

/* ---------- CTA końcowe ---------- */
.cta-koncowa{position:relative;overflow:hidden}
.cta-koncowa .ramka{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:center}
@media (max-width:860px){.cta-koncowa .ramka{grid-template-columns:minmax(0,1fr)}}
.cta-koncowa h2{max-width:18ch}
.cta-koncowa .ulot{color:var(--noc-tekst-2)}
.cta-koncowa .kroki{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cta-koncowa .kroki li{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;color:var(--noc-tekst)}
.cta-koncowa .kroki li span:first-child{font-family:var(--tech);font-weight:700;color:var(--sygnal)}
.wzor-tlo{position:absolute;inset:0;opacity:.14;pointer-events:none;background-image:radial-gradient(circle at 6px 6px,var(--noc-tekst) 2.2px,transparent 2.6px),linear-gradient(90deg,transparent 0 14px,var(--noc-tekst) 14px 30px,transparent 30px 100%);background-size:40px 40px,80px 40px;background-position:0 0,20px 0;mask-image:linear-gradient(90deg,transparent 40%,#000 100%);-webkit-mask-image:linear-gradient(90deg,transparent 40%,#000 100%)}

/* ---------- stopka ---------- */
.stopka-strony{border-top:1px solid var(--mgla);background:var(--papier);padding:48px 0 28px;font-size:.93rem;color:var(--tekst-2)}
.stopka-strony .kolumny{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:28px}
@media (max-width:900px){.stopka-strony .kolumny{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.stopka-strony .kolumny{grid-template-columns:minmax(0,1fr)}}
.stopka-strony h4{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--atrament);margin:0 0 10px}
.stopka-strony ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.stopka-strony a{text-decoration:none}
.stopka-strony a:hover{color:var(--atrament);text-decoration:underline}
.stopka-strony .dol{margin-top:34px;padding-top:18px;border-top:1px solid var(--mgla);display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;font-size:.86rem}
.stopka-strony .logo img{height:28px}

/* ---------- podstrony ---------- */
.nag-strony{padding:clamp(44px,6vw,80px) 0 clamp(28px,4vw,48px);border-bottom:1px solid var(--mgla);background:linear-gradient(180deg,var(--papier-2),var(--papier))}
.okruszki{font-size:.88rem;color:var(--tekst-2);margin-bottom:14px}
.okruszki a{text-decoration:none}
.okruszki span{margin:0 .5em}
.prose{max-width:76ch}
.prose h2{font-size:1.5rem;margin-top:2.2em}
.prose h3{font-size:1.15rem;margin-top:1.6em;font-weight:700}
.prose p,.prose li{color:var(--grafit)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin:.35em 0}
.prose table{border-collapse:collapse;width:100%;font-size:.95rem;margin:1em 0}
.prose th,.prose td{border:1px solid var(--mgla);padding:8px 10px;text-align:left;vertical-align:top}
.prose th{background:var(--papier-2)}
.prose .wersja{font-size:.9rem;color:var(--tekst-2)}
.prose .skrot{background:var(--karta);border:1px solid var(--mgla);border-left:5px solid var(--sygnal);border-radius:10px;padding:14px 18px;margin:1.2em 0}
.prose code{font-family:var(--mono);font-size:.92em;background:var(--papier-2);padding:1px 5px;border-radius:5px}
.osoby{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:18px}
.osoba{background:var(--karta);border:1px solid var(--mgla);border-radius:var(--promien);padding:24px;box-shadow:var(--cien);display:flex;flex-direction:column;gap:10px}
.osoba .foto{display:block;width:72px;height:72px;border-radius:16px;object-fit:cover;background:var(--mgla);box-shadow:0 0 0 1px var(--mgla)}
.osoba h3{margin:6px 0 0;font-weight:700;font-size:1.3rem}
.osoba .rola{color:var(--sygnal-2);font-weight:600;font-family:var(--tech);font-size:.95rem}
.osoba p{color:var(--tekst-2);margin:0;font-size:.97rem}
.osoba ul{margin:4px 0 0;padding-left:1.1em;color:var(--grafit);font-size:.95rem}
.osoba li{margin:.25em 0}
.osoba .dowod{font-size:.85rem;color:var(--tekst-2);border-top:1px dashed var(--mgla);border-right:0;padding:10px 0 0;margin-top:auto}
.puste{border:2px dashed var(--mgla-2);border-radius:var(--promien);padding:24px;color:var(--tekst-2);text-align:center;font-size:.95rem}
.kontakt-siatka{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
@media (max-width:860px){.kontakt-siatka{grid-template-columns:minmax(0,1fr)}}
.formularz{display:grid;gap:14px;background:var(--karta);border:1px solid var(--mgla);border-radius:var(--promien);padding:24px;box-shadow:var(--cien)}
.formularz label{display:grid;gap:6px;font-weight:600;font-size:.95rem}
.formularz input,.formularz textarea,.formularz select{font:inherit;padding:11px 12px;border:1px solid var(--mgla-2);border-radius:10px;background:var(--papier);color:var(--atrament);width:100%}
.formularz input:focus,.formularz textarea:focus{outline:3px solid var(--sygnal);outline-offset:1px;border-color:var(--sygnal)}
.formularz textarea{min-height:150px;resize:vertical}
.formularz .uwaga{font-size:.86rem;color:var(--tekst-2);font-weight:400}
.dane-firmy{background:var(--karta);border:1px solid var(--mgla);border-radius:var(--promien);padding:22px 24px}
.dane-firmy dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px}
.dane-firmy dd{overflow-wrap:anywhere}
.dane-firmy dt{color:var(--tekst-2);font-size:.9rem}
.dane-firmy dd{margin:0}

/* ---------- ujawnianie przy przewijaniu ---------- */
.odslon{transition:opacity .7s var(--przej),transform .7s var(--przej)}
.js .odslon{opacity:0;transform:translateY(18px)}
.js .odslon.widoczne{opacity:1;transform:none}
.odslon[data-opoznienie="1"]{transition-delay:.12s}.odslon[data-opoznienie="2"]{transition-delay:.24s}.odslon[data-opoznienie="3"]{transition-delay:.36s}.odslon[data-opoznienie="4"]{transition-delay:.48s}

/* ---------- wiersz kropek i kresek (separator) ---------- */
.rail{display:flex;gap:9px;align-items:center;margin:0;padding:0;list-style:none;height:16px}
.rail i{display:block;height:8px;border-radius:5px;border:2.5px solid var(--mgla-2);width:14px}
.rail i.k{border:0;height:4px;width:22px;background:var(--mgla-2)}
.rail i.s{border-color:var(--sygnal)}
.rail i.s.k{background:var(--sygnal)}

/* ---------- ruch ograniczony ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .odslon{opacity:1;transform:none}
  .js .warstwa::before{transform:none}
  .js .gwarancje li .lacznik{width:100%}
  .js .etap .postep i{width:100%}
}
@media print{.naglowek,.hero canvas,.hero-maska,.cta-koncowa,.menu-przycisk,.jezyk,.pasek-jezyka{display:none!important}body{background:#fff;color:#000}}

/* ---------- nagłówek: prawa strona i przełącznik języka ---------- */
.naglowek-prawa{display:flex;align-items:center;gap:10px}
.jezyk{position:relative;font-family:var(--tech);font-weight:700;font-size:.88rem}
.jezyk summary{list-style:none;display:inline-flex;align-items:center;gap:6px;padding:.42rem .7rem;border:2px solid var(--mgla-2);border-radius:999px;cursor:pointer;color:var(--grafit);letter-spacing:.05em;user-select:none;line-height:1}
.jezyk summary::-webkit-details-marker{display:none}
.jezyk summary svg{width:15px;height:15px;flex:none}
.jezyk summary::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);margin-left:2px}
.jezyk[open] summary::after{transform:translateY(1px) rotate(225deg)}
.jezyk summary:hover,.jezyk[open] summary{border-color:var(--atrament);color:var(--atrament)}
.jezyk summary:focus-visible{outline:3px solid var(--przycisk);outline-offset:2px}
.jezyk ul{list-style:none;margin:0;padding:6px;position:absolute;right:0;top:calc(100% + 8px);min-width:190px;background:var(--karta);border:1px solid var(--mgla);border-radius:12px;box-shadow:var(--cien);z-index:60}
.jezyk li a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:.5rem .7rem;border-radius:8px;text-decoration:none;color:var(--grafit);font-family:var(--sans);font-weight:600;font-size:.95rem;letter-spacing:0}
.jezyk li a:hover{background:var(--papier-2);color:var(--atrament)}
.jezyk li a[aria-current="true"]{color:var(--przycisk)}
.jezyk li a small{font-family:var(--tech);font-weight:700;font-size:.78rem;color:var(--tekst-2);letter-spacing:.05em}
/* pasek podpowiedzi językowej: dodaje go skrypt, gdy język przeglądarki różni się od języka strony */
.pasek-jezyka{background:var(--atrament);color:var(--papier);font-size:.95rem}
.pasek-jezyka .ramka{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.pasek-jezyka p{margin:0;flex:1 1 260px}
.pasek-jezyka a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.pasek-jezyka button{background:none;border:0;color:inherit;font:inherit;font-size:1.4rem;line-height:1;cursor:pointer;padding:2px 8px;border-radius:6px}
.pasek-jezyka button:hover{background:rgba(255,255,255,.14)}
.pasek-jezyka button:focus-visible{outline:2px solid var(--papier);outline-offset:2px}
@media (max-width:900px){.naglowek-prawa{gap:8px}.jezyk summary{padding:.4rem .55rem}}