/* it-beton.com: jeden arkusz, bez frameworka.
   Paleta z logo: granat #0e1422 + czerwień. Jeden akcent na całej stronie, jeden promień
   zaokrągleń (10px). Motyw jasny/ciemny wg ustawień systemu. Czcionka IBM Plex Sans
   serwowana z naszego serwera (bez Google Fonts, bez zapytań do obcych domen). */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 400;
  src: url(../fonts/ibm-plex-sans-latin-400-normal.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: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 400;
  src: url(../fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 500;
  src: url(../fonts/ibm-plex-sans-latin-500-normal.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: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 500;
  src: url(../fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 600;
  src: url(../fonts/ibm-plex-sans-latin-600-normal.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: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 600;
  src: url(../fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 700;
  src: url(../fonts/ibm-plex-sans-latin-700-normal.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: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 700;
  src: url(../fonts/ibm-plex-sans-latin-ext-700-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --tlo: #f4f6f8;
  --powierzchnia: #fbfcfd;
  --tint: #e9edf2;
  --tusz: #0e1422;
  --tusz-2: #2a3446;
  --szary: #4f5a6c;
  --linia: #d6dce4;
  --akcent: #c41f28;
  --akcent-tekst: #fffdfd;
  --akcent-tlo: #fbe9ea;
  --granat: #0e1422;
  --granat-tekst: #eef1f6;
  --granat-szary: #b3bccb;
  --promien: 10px;
  --cien: 0 1px 2px rgb(14 20 34 / .05), 0 10px 30px rgb(14 20 34 / .07);
  --szer: 1200px;
  --margines: clamp(20px, 4vw, 32px);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tlo: #0a0f18;
    --powierzchnia: #111826;
    --tint: #151e2f;
    --tusz: #e8ecf2;
    --tusz-2: #cbd2de;
    --szary: #a3adbe;
    --linia: #263149;
    --akcent: #f0565d;
    --akcent-tekst: #0a0f18;
    --akcent-tlo: #2a1418;
    --granat: #1a2438;
    --granat-tekst: #eef1f6;
    --granat-szary: #b3bccb;
    --cien: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px rgb(0 0 0 / .25);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--tlo);
  color: var(--tusz);
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--akcent); }
:focus-visible { outline: 3px solid var(--akcent); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -0.015em; font-weight: 600; }
h1 { font-size: clamp(2.05rem, 1.45rem + 2.3vw, 3.2rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.2rem); }
h3 { font-size: 1.15rem; line-height: 1.3; }
p { margin: 0; }
.prowadzenie { font-size: clamp(1.08rem, 1rem + .35vw, 1.22rem); color: var(--szary); max-width: 60ch; }
.szary { color: var(--szary); }

.kontener { width: 100%; max-width: var(--szer); margin-inline: auto; padding-inline: var(--margines); }
.sekcja { padding-block: clamp(56px, 8vw, 104px); }
.sekcja-tint { background: var(--tint); }
.sekcja-naglowek { display: grid; gap: 14px; max-width: 65ch; margin-bottom: clamp(32px, 4vw, 48px); }
.sekcja-naglowek.bez-odstepu { margin-bottom: 0; }

.etykieta {
  font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--akcent);
}

.ikona { width: 24px; height: 24px; flex: none; }

.przeskocz { position: absolute; left: 12px; top: -60px; z-index: 30; background: var(--tusz); color: var(--tlo);
  padding: 10px 14px; border-radius: var(--promien); }
.przeskocz:focus { top: 12px; color: var(--tlo); }

/* --- przyciski ------------------------------------------------------------------ */
.przycisk {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 12px 20px; border-radius: var(--promien); border: 1.5px solid transparent;
  font: inherit; font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
}
.przycisk:active { transform: translateY(1px); }
.przycisk-glowny { background: var(--akcent); color: var(--akcent-tekst); }
.przycisk-glowny:hover { background: var(--tusz); color: var(--tlo); }
.przycisk-drugi { border-color: var(--tusz); color: var(--tusz); background: transparent; }
.przycisk-drugi:hover { background: var(--tusz); color: var(--tlo); }
.przyciski { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- nagłówek --------------------------------------------------------------------- */
.naglowek {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--tlo) 92%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--linia);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) { .naglowek { background: var(--tlo); } }
.naglowek-wnetrze { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
.marka { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tusz); }
.marka:hover { color: var(--tusz); }
.marka-znak { display: block; line-height: 0; }
.marka-znak img { height: 54px; width: auto; }
.marka-tekst { display: grid; line-height: 1.1; }
.marka-nazwa { font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; }
.marka-opis { font-size: .78rem; color: var(--szary); }

.menu { display: flex; align-items: center; gap: 28px; }
.menu ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.menu a:not(.przycisk) { text-decoration: none; font-weight: 500; font-size: .98rem; color: var(--tusz-2); padding-block: 6px; white-space: nowrap; }
/* Tuż nad progiem menu telefonu wszystkie pozycje muszą zmieścić się obok logo w jednej linii. */
@media (max-width: 1200px) {
  .menu { gap: 20px; }
  .menu ul { gap: 16px; }
}
.menu a:not(.przycisk):hover, .menu a[aria-current="page"] { color: var(--akcent); }
.menu a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--akcent); }

.menu-mobilne { display: none; position: relative; }
.menu-mobilne summary {
  list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 10px 14px; border: 1.5px solid var(--linia); border-radius: var(--promien); font-weight: 600;
}
.menu-mobilne summary::-webkit-details-marker { display: none; }
.menu-mobilne nav {
  position: absolute; right: 0; top: calc(100% + 10px); width: min(300px, 86vw);
  background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: var(--promien);
  box-shadow: var(--cien); padding: 8px;
}
.menu-mobilne ul { list-style: none; margin: 0; padding: 0; display: grid; }
.menu-mobilne a { display: block; padding: 12px 14px; text-decoration: none; font-weight: 500; border-radius: 8px; }
.menu-mobilne a:hover, .menu-mobilne a[aria-current="page"] { background: var(--tint); color: var(--akcent); }

@media (max-width: 1040px) {
  .menu { display: none; }
  .menu-mobilne { display: block; }
}

/* --- hero ------------------------------------------------------------------------- */
.bohater { padding-block: clamp(40px, 6vw, 88px) clamp(48px, 7vw, 96px); }
.bohater-siatka { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.bohater-tekst { display: grid; gap: 20px; }
.bohater h1 { font-size: clamp(2rem, 1.3rem + 1.6vw, 2.5rem); }
.bohater-tekst .przyciski { margin-top: 8px; }
/* Podtytuł strony głównej jako lista korzyści (wielkość tekstu jak .prowadzenie). */
.bohater-punkty { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 58ch; }
.bohater-punkty li { display: flex; gap: 12px; align-items: flex-start; font-size: clamp(1.05rem, 1rem + .3vw, 1.18rem); line-height: 1.5; color: var(--tusz-2); }
.bohater-punkty .ikona { flex: none; width: 24px; height: 24px; margin-top: .1em; color: var(--akcent); }
.bohater-punkty strong { color: var(--tusz); font-weight: 600; }
.bohater-obraz img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--promien); box-shadow: var(--cien); }

/* Schemat przepływu danych w hero: węzły, Concret w chmurze, moduły. Animacja SMIL
   (bez JavaScriptu, zgodna z CSP), wyłączana przy prefers-reduced-motion. */
.bohater-schemat { background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: var(--promien); box-shadow: var(--cien); padding: clamp(12px, 2vw, 22px); }
.schemat { display: block; width: 100%; height: auto; overflow: visible; }
.schemat text { font-family: inherit; }
.sch-karta { fill: var(--tlo); stroke: var(--linia); stroke-width: 1.5; }
.sch-modul { fill: var(--powierzchnia); stroke: var(--linia); stroke-width: 1.5; }
.sch-hub { fill: var(--akcent-tlo); stroke: var(--akcent); stroke-width: 2; }
.sch-tarcza { fill: var(--powierzchnia); stroke: var(--linia); stroke-width: 1.5; }
.sch-ikona { color: var(--akcent); }
.sch-ikona-wezel { color: var(--tusz); }
.sch-tytul { font-size: 16px; font-weight: 600; fill: var(--tusz); }
.sch-hub-tytul { font-size: 19px; font-weight: 700; fill: var(--tusz); }
.sch-opis { font-size: 12.5px; fill: var(--szary); }
.sch-linia { fill: none; stroke: var(--linia); stroke-width: 2; stroke-dasharray: 6 6; }
.sch-linia-wy { stroke: color-mix(in srgb, var(--akcent) 45%, var(--linia)); }
.sch-kropka-we { fill: var(--tusz); }
.sch-kropka-wy { fill: var(--akcent); }
@media (prefers-reduced-motion: no-preference) {
  .sch-linia { animation: sch-ruch 1.4s linear infinite; }
}
@keyframes sch-ruch { to { stroke-dashoffset: -12; } }
/* Dane pobierane z węzła: pas pod nagłówkiem strony głównej. Linia nad pasem wyrównana do
   treści (bez marginesów kontenera). */
.dane-wezla {
  display: grid; gap: clamp(20px, 3vw, 32px);
  margin-top: clamp(40px, 6vw, 72px); padding-top: clamp(28px, 4vw, 40px);
  background: linear-gradient(var(--linia), var(--linia)) top center / calc(100% - 2 * var(--margines)) 1px no-repeat;
}
.dane-wezla-naglowek { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 40px; }
.dane-wezla h2 { font-size: clamp(1.25rem, 1.05rem + .6vw, 1.5rem); }
.dane-wezla-naglowek p { color: var(--szary); font-size: .95rem; max-width: 60ch; }
.dane-wezla-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; }
.dane-wezla-lista li { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 12px; row-gap: 3px; align-content: start; }
.dane-wezla-lista .ikona { grid-row: span 2; width: 38px; height: 38px; padding: 9px; border-radius: 10px; background: var(--akcent-tlo); color: var(--akcent); }
.dane-wezla-lista strong { font-weight: 600; color: var(--tusz); font-size: .98rem; line-height: 1.3; }
.dane-wezla-lista span { color: var(--szary); font-size: .88rem; line-height: 1.45; }
@media (max-width: 1000px) { .dane-wezla-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .dane-wezla-lista { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .sch-kropka-we, .sch-kropka-wy { display: none; }
}

.naglowek-strony { padding-block: clamp(40px, 6vw, 80px) clamp(32px, 4vw, 48px); }
.naglowek-strony .kontener { display: grid; gap: 18px; }
.naglowek-strony h1 { max-width: 22ch; }

/* Skróty do sekcji strony modułu (pozycje menu aplikacji); sekcja nie chowa się pod
   przyklejonym nagłówkiem po przejściu do kotwicy. */
.spis { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.spis a {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  border: 1px solid var(--linia); border-radius: 999px; background: var(--powierzchnia);
  color: var(--tusz-2); font-size: .95rem; font-weight: 500; text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}
.spis a:hover { border-color: var(--akcent); color: var(--akcent); }
.spis .ikona { width: 18px; height: 18px; color: var(--akcent); }
.sekcja[id] { scroll-margin-top: 72px; }

@media (max-width: 860px) {
  .bohater-siatka { grid-template-columns: 1fr; }
  .bohater-obraz { order: -1; }
}
@media (max-width: 520px) {
  .sch-opis { display: none; }
}

/* --- bento modułów ------------------------------------------------------------------ */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.kafel {
  --kafel-pad: clamp(24px, 3vw, 34px);
  position: relative; display: grid; align-content: start; gap: 12px; overflow: hidden;
  padding: var(--kafel-pad); border-radius: var(--promien);
  background: var(--powierzchnia); border: 1px solid var(--linia);
  text-decoration: none; color: var(--tusz);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.kafel:hover { color: var(--tusz); border-color: var(--akcent); box-shadow: var(--cien); transform: translateY(-2px); }
.kafel .ikona { width: 30px; height: 30px; color: var(--akcent); }
.kafel h3 { font-size: 1.3rem; }
.kafel p { color: var(--szary); }
.kafel-dalej { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 600; color: var(--akcent); }
.kafel-dalej .ikona { width: 18px; height: 18px; color: inherit; transition: transform .2s ease; }
.kafel:hover .kafel-dalej .ikona { transform: translateX(3px); }
/* Fragment ekranu aplikacji w kafelku: dochodzi do prawej i dolnej krawędzi kafelka. */
.kafel-zrzut { display: block; margin: 8px calc(var(--kafel-pad) * -1) calc(var(--kafel-pad) * -1) 0; }
.kafel-zrzut img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--linia); border-right: 0; border-bottom: 0; border-top-left-radius: 10px;
  box-shadow: 0 -4px 22px rgba(14, 20, 34, .07); transform-origin: right bottom; transition: transform .3s ease;
}
.kafel:hover .kafel-zrzut img { transform: scale(1.012); }

/* Zamówienia i Zarządzanie na całą szerokość (tekst i fragment aplikacji obok siebie,
   Zarządzanie lustrzanie), pod spodem Kontroling i Sprzedaż po połowie. */
.kafel-a {
  grid-column: 1 / -1; grid-row: 1;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); grid-template-areas: "tekst zrzut" "dalej zrzut";
  column-gap: clamp(24px, 3vw, 40px); align-content: stretch;
  background: linear-gradient(155deg, var(--akcent-tlo) 0%, var(--powierzchnia) 58%);
  border-top: 3px solid var(--akcent);
}
.kafel-a > div { grid-area: tekst; display: grid; gap: 12px; align-content: start; }
.kafel-a > .kafel-dalej { grid-area: dalej; align-self: end; }
.kafel-a > .kafel-zrzut { grid-area: zrzut; align-self: end; margin-top: 0; }
.kafel-b, .kafel-c { display: flex; flex-direction: column; gap: 12px; }
.kafel-b > .kafel-zrzut, .kafel-c > .kafel-zrzut { margin-top: auto; padding-top: 8px; }
.kafel-a h3, .kafel-d h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.kafel-a p, .kafel-d p { max-width: 50ch; }
.kafel-a ul, .kafel-d ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--tusz-2); }
.kafel-a li, .kafel-d li { display: flex; gap: 10px; align-items: baseline; }
.kafel-a li::before, .kafel-d li::before { content: ""; width: 14px; height: 2px; background: var(--akcent); flex: none; transform: translateY(-4px); }
.kafel-b { grid-column: 1 / 4; grid-row: 3; }
.kafel-c { grid-column: 4 / 7; grid-row: 3; }
/* Zarządzanie: druga pełna sekcja, lustrzanie do Zamówień (fragment aplikacji z lewej,
   dochodzi do lewej i dolnej krawędzi). */
.kafel-d {
  grid-column: 1 / 7; grid-row: 2;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); grid-template-areas: "zrzut tekst" "zrzut dalej";
  column-gap: clamp(24px, 3vw, 40px); align-content: stretch;
  background: linear-gradient(205deg, var(--akcent-tlo) 0%, var(--powierzchnia) 58%);
  border-top: 3px solid var(--akcent);
}
.kafel-d > div { grid-area: tekst; display: grid; gap: 12px; align-content: start; }
.kafel-d > .kafel-dalej { grid-area: dalej; align-self: end; }
.kafel-d > .kafel-zrzut { grid-area: zrzut; align-self: end; margin: 0 0 calc(var(--kafel-pad) * -1) calc(var(--kafel-pad) * -1); }
.kafel-d > .kafel-zrzut img { border-right: 1px solid var(--linia); border-left: 0; border-radius: 0 10px 0 0; transform-origin: left bottom; }
@media (max-width: 860px) {
  .bento { grid-template-columns: 1fr; }
  .kafel-a, .kafel-b, .kafel-c, .kafel-d { grid-column: auto; grid-row: auto; }
  .kafel-a { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tekst" "dalej" "zrzut"; }
  .kafel-a > .kafel-zrzut { margin-top: 8px; }
  .kafel-d { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tekst" "dalej" "zrzut"; }
  .kafel-d > .kafel-zrzut { margin: 8px calc(var(--kafel-pad) * -1) calc(var(--kafel-pad) * -1) 0; }
  .kafel-d > .kafel-zrzut img { border-left: 1px solid var(--linia); border-right: 0; border-radius: 10px 0 0 0; transform-origin: right bottom; }
}

/* --- przepływ danych (jak to działa) --------------------------------------------------- */
.przeplyw { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: krok; }
.przeplyw li { position: relative; display: grid; gap: 10px; align-content: start; padding: 24px; border-top: 3px solid var(--tusz); background: var(--powierzchnia); border-radius: 0 0 var(--promien) var(--promien); }
.przeplyw li:last-child { border-top-color: var(--akcent); }
.przeplyw .ikona { width: 28px; height: 28px; color: var(--akcent); }
.przeplyw p { color: var(--szary); font-size: .98rem; }
.przeplyw li:not(:last-child)::after {
  content: ""; position: absolute; top: -9px; right: -14px; width: 12px; height: 12px;
  border-top: 3px solid var(--tusz); border-right: 3px solid var(--tusz); transform: rotate(45deg);
  background: transparent;
}
@media (max-width: 860px) {
  .przeplyw { grid-template-columns: 1fr; }
  .przeplyw li:not(:last-child)::after { display: none; }
}

/* --- korzyści (dwie kolumny, bez kart) --------------------------------------------------- */
.korzysci { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px clamp(32px, 6vw, 80px); }
.korzysc { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: start; }
.korzysc .ikona { grid-row: 1 / 3; width: 28px; height: 28px; color: var(--akcent); margin-top: 2px; }
.korzysc p { color: var(--szary); }
@media (max-width: 760px) { .korzysci { grid-template-columns: 1fr; } }

/* --- miejsca na zrzuty ekranu (do podmiany na prawdziwe zrzuty) ------------------------- */
.zrzut { margin: 0; display: grid; gap: 10px; }
.zrzut-miejsce {
  display: grid; place-content: center; justify-items: center; text-align: center; gap: 10px;
  aspect-ratio: 16 / 10; max-height: 560px; width: 100%; padding: 24px; border-radius: var(--promien);
  border: 2px dashed var(--linia); background: var(--tint); color: var(--szary);
}
.zrzut-miejsce strong { color: var(--tusz-2); font-weight: 600; }
.sekcja-zrzut .zrzut-miejsce { aspect-ratio: 16 / 7; }
.zrzut-miejsce .ikona { width: 36px; height: 36px; color: var(--akcent); }
.zrzut-obraz { width: 100%; height: auto; border: 1px solid var(--linia); border-radius: var(--promien); background: #fdfdfe; box-shadow: var(--cien); }
.zrzut figcaption { font-size: .92rem; color: var(--szary); }

/* --- klipy z aplikacji: lista funkcji obok nagrania (assets/js/klipy.js) ---------------- */
.klipy { overflow-x: clip; }
.klipy-uklad {
  display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.55fr);
  grid-template-areas: "naglowek media" "lista media";
  column-gap: clamp(28px, 4vw, 56px); row-gap: 24px; align-items: start;
}
.klipy-naglowek { grid-area: naglowek; display: grid; gap: 12px; }
.klipy-naglowek h2 { margin: 0; }
/* Kadr dochodzi do prawej krawędzi okna (jak przycięty fragment ekranu aplikacji). */
.klipy-media { grid-area: media; align-self: center; margin-right: min(calc(var(--margines) * -1), calc((var(--szer) - 100vw) / 2 - var(--margines))); }
.klipy-wideo {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10;
  border: 1px solid var(--linia); border-right: 0; border-radius: var(--promien) 0 0 var(--promien);
  background: #f3f4f6; box-shadow: var(--cien);
}
.klipy-lista { grid-area: lista; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linia); }
.klipy-lista li { border-bottom: 1px solid var(--linia); }
.klipy-punkt {
  position: relative; display: grid; gap: 6px; width: 100%; padding: 14px 0 16px;
  background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.klipy-punkt:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; border-radius: 4px; }
.klipy-tytul { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--tusz); }
.klipy-tytul::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--akcent); }
.klipy-opis { color: var(--szary); font-size: .95rem; line-height: 1.55; padding-left: 17px; }
.klipy-postep {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--akcent);
  transform-origin: left; transform: scaleX(var(--postep, 0)); transition: transform .3s linear;
}
.klipy:not(.klipy-aktywne) .klipy-postep { display: none; }
.klipy-aktywne .klipy-punkt[aria-pressed="false"] .klipy-opis,
.klipy-aktywne .klipy-punkt[aria-pressed="false"] .klipy-postep { display: none; }
.klipy-aktywne .klipy-punkt[aria-pressed="false"] .klipy-tytul { color: var(--szary); }
.klipy-aktywne .klipy-punkt[aria-pressed="false"] .klipy-tytul::before { background: var(--linia); }
.klipy-aktywne .klipy-punkt[aria-pressed="false"]:hover .klipy-tytul { color: var(--tusz); }
@media (max-width: 860px) {
  .klipy-uklad { grid-template-columns: minmax(0, 1fr); grid-template-areas: "naglowek" "media" "lista"; }
  .klipy-media { margin-inline: calc(var(--margines) * -1); }
  .klipy-wideo { border-inline: 0; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) { .klipy-postep { transition: none; } }

.sekcja-zrzut { padding-bottom: clamp(8px, 2vw, 16px); }
.o-nas-obraz { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; border-radius: var(--promien); }

/* --- strony modułów -------------------------------------------------------------------------- */
.uklad-dwa { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.uklad-dwa .tekst { display: grid; gap: 16px; }
.uklad-dwa > :only-child { grid-column: 1 / -1; max-width: 72ch; }
.uklad-pion { display: grid; gap: clamp(28px, 4vw, 44px); }
.uklad-gora { align-items: start; }
.zrzut-pod { margin-top: clamp(28px, 4vw, 44px); }
@media (max-width: 860px) { .uklad-dwa { grid-template-columns: 1fr; } }

.cechy { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.cecha { display: grid; gap: 10px; align-content: start; padding: 26px; border-radius: var(--promien); background: var(--powierzchnia); border: 1px solid var(--linia); }
.cecha .ikona { width: 28px; height: 28px; color: var(--akcent); }
.cecha p { color: var(--szary); }
.cecha ul { margin: 4px 0 0; padding-left: 1.1em; color: var(--szary); display: grid; gap: 4px; }
.cecha-szeroka { grid-column: 1 / -1; }
.cechy-trzy { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .cechy-trzy { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .cechy { grid-template-columns: 1fr; } }

.lista-kreski { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lista-kreski li { display: flex; gap: 12px; align-items: baseline; }
.lista-kreski li::before { content: ""; width: 16px; height: 2px; background: var(--akcent); flex: none; transform: translateY(-5px); }

/* --- oś (integracje) -------------------------------------------------------------------------- */
.os { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 820px; }
.os li { display: grid; grid-template-columns: 56px 1fr; gap: 20px; position: relative; padding-bottom: 36px; }
.os li:last-child { padding-bottom: 0; }
.os li::before { content: ""; position: absolute; left: 27px; top: 56px; bottom: 0; width: 2px; background: var(--linia); }
.os li:last-child::before { display: none; }
.os-znak { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--powierzchnia); border: 2px solid var(--tusz); color: var(--akcent); }
.os-tresc { display: grid; gap: 8px; padding-top: 12px; }
.os-tresc p { color: var(--szary); }

/* --- pasek kontaktowy na dole stron -------------------------------------------------------- */
.cta-pas { background: var(--tint); border-top: 1px solid var(--linia); }
.cta-siatka { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center; padding-block: clamp(48px, 6vw, 80px); }
.cta-siatka h2 { max-width: 20ch; }
.cta-kontakty { display: grid; gap: 14px; justify-items: start; }
.cta-kontakty a:not(.przycisk) { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.1rem; text-decoration: none; }
.cta-kontakty .ikona { color: var(--akcent); }
@media (max-width: 760px) { .cta-siatka { grid-template-columns: 1fr; } }

/* --- kontakt i formularz --------------------------------------------------------------------- */
.kontakt-siatka { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 860px) { .kontakt-siatka { grid-template-columns: 1fr; } }
.kontakt-dane { display: grid; gap: 22px; }
.kontakt-pozycja { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; }
.kontakt-pozycja .ikona { grid-row: 1 / 3; color: var(--akcent); width: 26px; height: 26px; margin-top: 2px; }
.kontakt-pozycja a { font-weight: 600; font-size: 1.12rem; text-decoration: none; }
.kontakt-pozycja span { color: var(--szary); font-size: .95rem; }

.formularz { display: grid; gap: 18px; padding: clamp(24px, 3vw, 36px); background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: var(--promien); }
.pole { display: grid; gap: 6px; }
.pole label { font-weight: 600; font-size: .95rem; }
.pole .pomoc { font-size: .88rem; color: var(--szary); }
.pola-dwa { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .pola-dwa { grid-template-columns: 1fr; } }
input[type="text"], input[type="email"], input[type="tel"], textarea {
  width: 100%; font: inherit; color: var(--tusz); background: var(--tlo);
  border: 1.5px solid var(--linia); border-radius: 8px; padding: 11px 13px;
}
textarea { min-height: 150px; resize: vertical; }
input:focus, textarea:focus { outline: 3px solid color-mix(in srgb, var(--akcent) 35%, transparent); outline-offset: 0; border-color: var(--akcent); }
.zgoda { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: .92rem; color: var(--szary); }
.zgoda input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--akcent); }
.pulapka { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

.komunikat { display: grid; gap: 16px; max-width: 60ch; }

/* --- tekst prawny ------------------------------------------------------------------------------- */
.proza { max-width: 72ch; display: grid; gap: 16px; }
.proza h2 { font-size: 1.35rem; margin-top: 18px; }
.proza ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.proza p, .proza li { color: var(--tusz-2); }

/* --- blog ---------------------------------------------------------------------------------------- */
.wpis-tresc { padding-top: clamp(8px, 2vw, 24px); }
.wpis-data { font-size: .95rem; color: var(--szary); }
.szkic-znak {
  display: inline-block; justify-self: start; padding: 3px 10px; border-radius: 999px; font-size: .82rem; font-weight: 600;
  background: var(--akcent-tlo); color: var(--akcent); vertical-align: 1px;
}
.wpisy { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); column-gap: 48px; border-top: 1px solid var(--linia); }
.wpisy-pozycja { position: relative; display: grid; gap: 10px; padding-block: 28px; border-bottom: 1px solid var(--linia); }
.wpisy-pozycja h2 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); }
.wpisy-pozycja h2 a { text-decoration: none; }
.wpisy-pozycja h2 a::after { content: ""; position: absolute; inset: 0; }
.wpisy-pozycja p:not(.wpis-data) { color: var(--szary); }
.wpisy-pozycja:hover h2 a { color: var(--akcent); }
.wpisy-pozycja h2 a:focus-visible { outline: none; }
.wpisy-pozycja:focus-within { outline: 2px solid var(--akcent); outline-offset: 4px; border-radius: 4px; }
.wpisy-dalej { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--akcent); text-decoration: none; }
.wpisy-dalej .ikona { width: 18px; height: 18px; transition: transform .2s ease; }
.wpisy-pozycja:hover .wpisy-dalej .ikona, .blog-karta:hover .wpisy-dalej .ikona, a.wpisy-dalej:hover .ikona { transform: translateX(3px); }

/* Pas „Z bloga” nad paskiem kontaktowym: karty najnowszych wpisów. */
.blog-pas { border-top: 1px solid var(--linia); }
.blog-pas-naglowek { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: clamp(24px, 3vw, 36px); }
.blog-karty { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.blog-karta {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px;
  border-radius: var(--promien); background: var(--powierzchnia); border: 1px solid var(--linia);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.blog-karta:hover { border-color: var(--akcent); box-shadow: var(--cien); }
.blog-karta:focus-within { outline: 2px solid var(--akcent); outline-offset: 2px; }
.blog-karta h3 a { text-decoration: none; }
.blog-karta h3 a::after { content: ""; position: absolute; inset: 0; }
.blog-karta h3 a:focus-visible { outline: none; }
.blog-karta:hover h3 a { color: var(--akcent); }
.blog-karta p:not(.wpis-data) { color: var(--szary); }
.blog-karta .wpisy-dalej { margin-top: auto; padding-top: 4px; }

.proza h3 { font-size: 1.1rem; margin-top: 8px; }
.proza ol { margin: 0; padding-left: 1.4em; display: grid; gap: 6px; }
.proza .zrzut { margin-block: 8px; }
.proza a { color: var(--tusz); }
.proza a:hover { color: var(--akcent); }
.wpis-powrot { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linia); font-weight: 600; }

/* Układ wpisu: jedna kolumna (ok. 960 px) pośrodku strony dla tytułu, spisu treści, tekstu i zrzutów
   ekranu. Wszystko ma tę samą szerokość, więc nic nie wystaje. Pod tytułem wiersz: spis treści po
   lewej, kontakt po prawej. Kliknięcie zrzutu otwiera go w pełnym rozmiarze. */
.wpis .kontener { max-width: calc(960px + 2 * var(--margines)); }
.wpis .naglowek-strony h1 { max-width: 30ch; }
.wpis .proza { max-width: none; font-size: 1.125rem; line-height: 1.7; }
.wpis .proza h2 { scroll-margin-top: 96px; }
.wpis .proza > .prowadzenie { max-width: none; }
.wpis-gora { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 24px; align-items: stretch; margin-bottom: clamp(28px, 4vw, 44px); }
.wpis-gora > .wpis-kontakt { grid-column: -2 / -1; }
@media (max-width: 760px) {
  .wpis-gora { grid-template-columns: minmax(0, 1fr); }
  .wpis-gora > .wpis-kontakt { display: none; }
}
.zrzut-link { display: block; cursor: zoom-in; }
.zrzut-link:hover .zrzut-obraz { border-color: var(--akcent); }
.wpis-spis { display: grid; align-content: start; gap: 10px; padding: 20px 22px; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--powierzchnia); }
.wpis-spis p { font-weight: 600; color: var(--tusz); }
.wpis-spis ol { margin: 0; padding-left: 1.3em; display: grid; gap: 7px; font-size: .95rem; }
.wpis-spis li { color: var(--szary); }
.wpis-spis a { color: var(--tusz-2); text-decoration: none; }
.wpis-spis a:hover { color: var(--akcent); }
.wpis-kontakt { display: grid; align-content: start; gap: 12px; justify-items: start; padding: 22px; border-radius: var(--promien); background: var(--tint); border: 1px solid var(--linia); }
.wpis-kontakt p { color: var(--tusz-2); font-size: .95rem; }
.wpis-kontakt p.etykieta { color: var(--akcent); }
.wpis-kontakt-tel { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; }
.wpis-kontakt-tel .ikona { color: var(--akcent); }

.terminy { margin: 0; display: grid; grid-template-columns: minmax(9.5em, auto) 1fr; border-top: 1px solid var(--linia); }
.terminy dt, .terminy dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--linia); }
.terminy dt { font-weight: 600; color: var(--tusz); padding-right: 20px; }
.terminy dd { color: var(--tusz-2); }
@media (max-width: 560px) {
  .terminy { grid-template-columns: 1fr; }
  .terminy dt { border-bottom: 0; padding-bottom: 0; }
}

.ramka { display: grid; gap: 10px; padding: 20px 22px; border-left: 3px solid var(--akcent); border-radius: 0 var(--promien) var(--promien) 0; background: var(--tint); }
.ramka p, .ramka li { color: var(--tusz); }
.zrodla { font-size: .92rem; }
.zrodla li { color: var(--szary); overflow-wrap: anywhere; }

/* Miejsce na tekst do uzupełnienia: build dopuszcza je tylko w szkicach wpisów (podgląd). */
.do-uzupelnienia { display: grid; gap: 8px; padding: 20px 22px; border: 2px dashed var(--akcent); border-radius: var(--promien); background: var(--akcent-tlo); }
.do-uzupelnienia p, .do-uzupelnienia li { color: var(--tusz); }

/* --- stopka -------------------------------------------------------------------------------------- */
.stopka { border-top: 1px solid var(--linia); background: var(--powierzchnia); }
.stopka-siatka { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 32px; padding-block: 56px 32px; }
.stopka-marka img { width: 132px; height: auto; margin-bottom: 12px; }
.stopka-nazwa { font-weight: 700; font-size: 1.1rem; letter-spacing: .02em; }
.stopka-opis { font-size: .88rem; color: var(--szary); }
.stopka-tytul { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--szary); margin-bottom: 14px; font-weight: 600; }
.stopka-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.stopka-lista a { text-decoration: none; }
.stopka-godziny { color: var(--szary); font-size: .95rem; }
.stopka-dol { border-top: 1px solid var(--linia); padding-block: 20px 28px; font-size: .9rem; color: var(--szary); }
@media (max-width: 860px) { .stopka-siatka { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .stopka-siatka { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}