/*
 * CleverLAB — arkusz stylów strony cleverlab.pl (ZGL-0002, 02.11.2026: wzór „propozycja A, wersja 2” zaakceptowany przez Piotra).
 * Źródło: redesign/propozycje/a-baza.css + style strony A. Strony generuje redesign/strona/zbuduj_strone.py.
 *
 * BEZ FIOLETU (Piotr, 02.11.2026): żadnego fioletu, śliwki, indygo ani szarości z jego domieszką. Paleta: turkus i granat
 * z emblematu CleverLAB, czerwień marki, bursztyn, zieleń, szarości chłodne. Gradienty tylko między kolorami bliskimi
 * odcieniem (turkus → czerwień daje w połowie fiolet, dlatego pas marki ma twarde granice kolorów).
 * Kontrast wg WCAG 2.2 — liczby w komentarzach przy kolorach.
 *
 * Część między znacznikami RAMA START / RAMA KONIEC (tokeny, czcionki, nagłówek, stopka) generator kopiuje też do
 * header-styles.css — tę ramę dostają podstrony bazy wiedzy i artykułów (komponenty Vue header/footer).
 * Klasy ramy mają przedrostek „rama-”, żeby style samych podstron (.header, .logo, h3, a…) ich nie zmieniały.
 */

/* ===== RAMA START ===== */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonty/inter-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonty/inter-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: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("fonty/jetbrains-mono-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("fonty/jetbrains-mono-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; }

:root {
  /* tła i pasy */
  --cl-tlo: #FFFFFF;
  --cl-tlo-2: #F3F7F9;            /* jasna szarość chłodna */
  --cl-tlo-turkus: #E8F7FA;       /* jasny pas w turkusie */
  --cl-tlo-bursztyn: #FFF5DF;     /* jasny pas ciepły */
  --cl-tlo-zielen: #EAF7EE;
  --cl-tlo-czerwien: #FDECEF;

  /* tekst */
  --cl-tekst: #12232E;            /* 16,1:1 na bieli */
  --cl-tekst-2: #3F4F5B;          /* 8,5:1 na bieli, 7,7:1 na jasnym turkusie i bursztynie */
  --cl-tekst-3: #566673;          /* 5,9:1 na bieli, 5,4:1 na jasnym turkusie i bursztynie */

  /* marka i kolory pasów */
  --cl-turkus: #45C7DD;           /* dekoracja — na bieli 2,0:1, NIE do tekstu; na granacie 7,4:1 */
  --cl-turkus-ciemny: #0E7490;    /* linki i tekst w turkusie — 5,4:1 na bieli */
  --cl-turkus-jasny: #7FDBEA;     /* tekst w turkusie na granacie — 9,3:1 */
  --cl-morski: #0B5E73;           /* pas morski — biały tekst 7,3:1 */
  --cl-granat: #0F2A3D;           /* granat z emblematu — pasy ciemne, stopka; biały tekst 14,8:1 */
  --cl-granat-2: #16384F;         /* karty na granacie — biały tekst 12,3:1 */
  --cl-czerwien: #CD1F36;         /* czerwień marki — przyciski, pas zaproszenia; biały tekst 5,5:1 */
  --cl-czerwien-ciemna: #A3172A;  /* najechanie — biały tekst 7,7:1 */
  --cl-bursztyn: #F2A900;         /* dekoracja; granatowy tekst na bursztynie 8,0:1 */
  --cl-bursztyn-ciemny: #B45309;  /* tekst w bursztynie — 5,0:1 na bieli */
  --cl-zielen: #15803D;           /* stany „w normie” — 5,0:1 na bieli */
  --cl-pas-marki: linear-gradient(90deg, #45C7DD 0 25%, #0E7490 25% 50%, #F2A900 50% 75%, #CD1F36 75% 100%);

  /* linie */
  --cl-linia: #DFE6EB;            /* podział sekcji, karty (dekoracja) */
  --cl-obrys: #CBD6DD;            /* obrys przycisków drugiego planu */
  --cl-obrys-pola: #788894;       /* pola formularza — 3,7:1 wobec bieli (WCAG 1.4.11) */

  /* typografia */
  --cl-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --cl-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --cl-h1: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
  --cl-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
  --cl-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --cl-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --cl-kontener: 1200px;

  /* kształty i cienie (cień w granacie) */
  --cl-zaokr: 16px; --cl-zaokr-male: 10px; --cl-zaokr-pill: 999px;
  --cl-cien-1: 0 1px 2px rgba(15, 42, 61, .06);
  --cl-cien-2: 0 1px 2px rgba(15, 42, 61, .05), 0 12px 32px -8px rgba(15, 42, 61, .16);

  /* ruch */
  --cl-czas: 480ms;
  --cl-krzywa: cubic-bezier(.2, .7, .2, 1);
}

/* odnośniki bez własnego stylu (domyślny niebieski i fioletowy „odwiedzony” przeglądarki) w kolorze marki;
   :where() ma zerową wagę — każda reguła strony, nawet samo „a { }”, ją przesłania */
:where(a:link), :where(a:visited) { color: #0E7490; }

/* --- nagłówek (wszystkie strony serwisu) --- */
.rama-naglowek, .rama-naglowek *, .rama-naglowek *::before, .rama-naglowek *::after,
.rama-stopka, .rama-stopka *, .rama-stopka *::before, .rama-stopka *::after { box-sizing: border-box; }
.rama-naglowek {
  position: sticky; top: 0; z-index: 1000; display: block; margin: 0; padding: 0; border: 0; box-shadow: none;
  font-family: var(--cl-font); font-size: 16px; line-height: 1.5; color: var(--cl-tekst); text-align: left;
  background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
}
.rama-naglowek.rama-stale { position: fixed; left: 0; right: 0; top: 0; }   /* podstrony ze starym układem (treść ma odstęp od góry) */
.rama-naglowek::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--cl-pas-marki); }
.rama-kontener { width: min(100% - 2.5rem, var(--cl-kontener)); margin: 0 auto; padding: 0; }
@media (max-width: 480px) { .rama-kontener { width: min(100% - 2rem, var(--cl-kontener)); } }
.rama-pasek { display: flex; align-items: center; gap: 1.25rem; min-height: 4.5rem; padding: 0 0 4px; margin: 0 auto; }
.rama-logo {
  display: inline-flex; align-items: center; gap: .6rem; margin: 0; padding: 0; border: 0; background: none;
  color: var(--cl-granat); font: 700 1.3rem/1 var(--cl-font); letter-spacing: -.02em; text-decoration: none; white-space: nowrap;
}
.rama-logo:hover { color: var(--cl-granat); text-decoration: none; }
.rama-logo svg { display: block; width: 2.1rem; height: 2.1rem; flex: none; }
.rama-logo .rama-clever { color: var(--cl-turkus-ciemny); }
.rama-nawigacja { display: flex; align-items: center; gap: 1.6rem; margin: 0 0 0 auto; padding: 0; }
.rama-nawigacja a.rama-link {
  display: inline-block; margin: 0; padding: .5rem 0; border: 0; background: none;
  color: var(--cl-tekst-2); font: 500 .9375rem/1.3 var(--cl-font); letter-spacing: 0; text-decoration: none; white-space: nowrap;
}
.rama-nawigacja a.rama-link:hover, .rama-nawigacja a.rama-link[aria-current] { color: var(--cl-tekst); text-decoration: none; }
.rama-nawigacja a.rama-link[aria-current] { box-shadow: inset 0 -2px 0 var(--cl-turkus-ciemny); }
.rama-jezyki { display: flex; gap: .15rem; margin: 0; padding: 0; font-family: var(--cl-font-mono); font-size: .75rem; line-height: 1; }
.rama-jezyki a, .rama-jezyki button {
  display: inline-block; margin: 0; padding: .4rem .45rem; border: 0; border-radius: 6px; background: none; cursor: pointer;
  color: var(--cl-tekst-3); font: 500 .75rem/1 var(--cl-font-mono); text-decoration: none; text-transform: uppercase;
}
.rama-jezyki a:hover, .rama-jezyki button:hover { color: var(--cl-granat); background: var(--cl-tlo-2); }
.rama-jezyki [aria-current] { color: var(--cl-granat); background: var(--cl-tlo-2); font-weight: 600; }
.rama-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 40px; margin: 0; padding: .5rem 1rem;
  border: 0; border-radius: var(--cl-zaokr-pill); background: var(--cl-czerwien); color: #fff;
  font: 600 .9375rem/1.2 var(--cl-font); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .2s, box-shadow .2s;
}
.rama-cta:hover { background: var(--cl-czerwien-ciemna); color: #fff; text-decoration: none; box-shadow: 0 10px 24px -10px rgba(205, 31, 54, .6); }
.rama-ik { display: block; width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rama-menu-tel { display: none; position: static; margin: 0 0 0 auto; padding: 0; }
.rama-menu-tel > summary {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; margin: 0; padding: .5rem .85rem; list-style: none;
  border: 1.5px solid var(--cl-obrys); border-radius: var(--cl-zaokr-pill); background: #fff; color: var(--cl-tekst);
  font: 600 1rem/1.2 var(--cl-font); cursor: pointer;
}
.rama-menu-tel > summary::-webkit-details-marker { display: none; }
.rama-menu-tel[open] > summary { border-color: var(--cl-granat); }
.rama-menu-tel nav {
  position: absolute; left: 0; right: 0; top: 100%; display: grid; gap: .25rem; margin: 0; padding: 1rem 1.25rem 1.5rem;
  background: #fff; border-bottom: 1px solid var(--cl-linia); box-shadow: 0 24px 40px -24px rgba(15, 42, 61, .4); max-height: calc(100vh - 5rem); overflow-y: auto;
}
.rama-menu-tel nav a.rama-link {
  display: block; margin: 0; padding: .8rem .25rem; border-bottom: 1px solid var(--cl-linia);
  color: var(--cl-tekst); font: 500 1rem/1.3 var(--cl-font); text-decoration: none;
}
.rama-menu-tel .rama-jezyki { margin-top: .75rem; font-size: .875rem; }
.rama-menu-tel .rama-jezyki a, .rama-menu-tel .rama-jezyki button { padding: .6rem .7rem; font-size: .875rem; }
.rama-menu-tel .rama-cta { margin-top: .75rem; min-height: 48px; font-size: 1rem; }
@media (max-width: 1320px) { .rama-nawigacja { gap: 1.2rem; } }
@media (max-width: 1180px) {
  .rama-nawigacja { display: none; }
  .rama-menu-tel { display: block; }
}
.rama-naglowek :focus-visible, .rama-stopka :focus-visible { outline: 3px solid var(--cl-turkus-ciemny); outline-offset: 3px; border-radius: 6px; }
.rama-stopka :focus-visible { outline-color: var(--cl-turkus); }

/* --- stopka (wszystkie strony serwisu) --- */
.rama-stopka {
  position: relative; display: block; margin: 0; padding: 4.25rem 0 2rem; border: 0;
  background: var(--cl-granat); color: #B9CCD8; font: 400 .9375rem/1.6 var(--cl-font); text-align: left;   /* 8,9:1 */
}
.rama-stopka::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--cl-pas-marki); }
.rama-stopka a { color: #fff; text-decoration: none; }
.rama-stopka a:hover { color: #fff; text-decoration: underline; }
.rama-stopka .rama-logo { color: #fff; }
.rama-stopka .rama-logo .rama-clever { color: var(--cl-turkus); }
.rama-stopka p { margin: 1rem 0 0; padding: 0; max-width: 24rem; color: #B9CCD8; font-size: .9375rem; line-height: 1.6; }
.rama-stopka-siatka { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2.5rem; margin: 0; padding: 0; }
.rama-stopka h2 {
  margin: 0 0 1rem; padding: 0; border: 0; background: none; color: #fff;
  font: 500 .8125rem/1.3 var(--cl-font-mono); letter-spacing: .06em; text-transform: uppercase;
}
.rama-stopka ul { margin: 0; padding: 0; list-style: none; }
.rama-stopka li { margin: 0 0 .55rem; padding: 0; list-style: none; color: #B9CCD8; font-size: .9375rem; line-height: 1.5; }
.rama-stopka li::before, .rama-stopka li::marker { content: none; }
.rama-stopka-dol {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin: 3rem 0 0; padding: 1.5rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, .14); color: #9FB3C1; font-size: .8125rem;   /* 6,8:1 */
}
.rama-stopka-dol span { color: #9FB3C1; }
.rama-nowrap { white-space: nowrap; }
@media (max-width: 860px) { .rama-stopka-siatka { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .rama-stopka-siatka { grid-template-columns: 1fr; } }
@media print { .rama-naglowek, .rama-naglowek.rama-stale { position: static; } .rama-menu-tel { display: none; } }
/* ===== RAMA KONIEC ===== */

/* ---------- podstawa nowych stron ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; font-family: var(--cl-font); font-size: 1rem; line-height: 1.6; color: var(--cl-tekst); background: var(--cl-tlo);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
@media (min-width: 1100px) { body { font-size: 1.0625rem; } }
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--cl-turkus-ciemny); text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--cl-turkus-ciemny); outline-offset: 3px; border-radius: 6px; }
::selection { background: #d9f3f8; }
::placeholder { color: #566673; opacity: 1; }   /* 5,9:1 na bieli — podpowiedź w polu to też tekst */

.kontener { width: min(100% - 2.5rem, var(--cl-kontener)); margin-inline: auto; }
@media (max-width: 480px) { .kontener { width: min(100% - 2rem, var(--cl-kontener)); } }
.sr-only { 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: 1rem; top: -5rem; z-index: 1100; padding: .75rem 1rem; border-radius: var(--cl-zaokr-male); background: var(--cl-granat); color: #fff; }
.pomin:focus { top: 1rem; }

/* ikony Lucide z arkusza <symbol> na początku strony */
.ik { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* przyciski */
.przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .75rem 1.375rem;
  border: 1.5px solid transparent; border-radius: var(--cl-zaokr-pill); font: 600 1rem/1.2 var(--cl-font); text-decoration: none;
  white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}
.przycisk .ik { width: 1.1em; height: 1.1em; }
.przycisk-glowny { background: var(--cl-czerwien); color: #fff; }                                   /* 5,5:1 */
.przycisk-glowny:hover { background: var(--cl-czerwien-ciemna); box-shadow: 0 10px 24px -10px rgba(205, 31, 54, .6); }
.przycisk-drugi { background: #fff; color: var(--cl-granat); border-color: var(--cl-obrys); }
.przycisk-drugi:hover { border-color: var(--cl-granat); }
.przycisk-jasny { background: #fff; color: var(--cl-granat); }                                       /* na pasach kolorowych */
.przycisk-jasny:hover { background: var(--cl-tlo-turkus); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45); }
.przycisk-turkus { background: var(--cl-turkus); color: var(--cl-granat); }                          /* 7,4:1 */
.przycisk-turkus:hover { background: #6FD4E5; }
.przycisk-obrys-jasny { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.przycisk-obrys-jasny:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.przycisk-maly { min-height: 40px; padding: .5rem 1rem; font-size: .9375rem; }
.przycisk[disabled] { opacity: .65; cursor: progress; }

/* napisy pomocnicze */
.nadtytul { display: inline-block; font-family: var(--cl-font-mono); font-size: .8125rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--cl-turkus-ciemny); }
.drugi { color: var(--cl-tekst-2); }
.maly { font-size: .875rem; color: var(--cl-tekst-3); }
.odznaka-ai {
  display: inline-flex; align-items: center; gap: .55rem; padding: .35rem .85rem .35rem .7rem; border-radius: var(--cl-zaokr-pill);
  background: rgba(69, 199, 221, .14); color: var(--cl-turkus-jasny); font-size: .875rem; font-weight: 600; line-height: 1.3;
  border: 1px solid rgba(69, 199, 221, .35);
}
.odznaka-ai .cl-puls { width: .5rem; height: .5rem; }
.znacznik { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: var(--cl-zaokr-pill); font-size: .75rem; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.z-ai { background: var(--cl-granat); color: var(--cl-turkus-jasny); }                               /* 9,3:1 */
.z-iso { background: var(--cl-tlo-turkus); color: #0B5E73; }                                         /* 6,7:1 */
.z-mob { background: var(--cl-tlo-zielen); color: #15803D; }                                         /* 4,6:1 */
.z-int { background: var(--cl-tlo-bursztyn); color: #8A4B00; }                                       /* 6,3:1 */
.z-ksef { background: var(--cl-tlo-czerwien); color: #B3182D; }
.z-test { background: #EEF2F5; color: #3F4F5B; }

/* sekcje */
.sekcja { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.sekcja-glowa { max-width: 46rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.sekcja-glowa.srodek { margin-inline: auto; text-align: center; }
.sekcja-glowa h2 { font-size: var(--cl-h2); margin-top: .75rem; }
.sekcja-glowa p { margin-top: 1rem; font-size: var(--cl-lead); color: var(--cl-tekst-2); }

/* karty i pola ikon w kolorach palety */
.karta { background: #fff; border: 1px solid var(--cl-linia); border-radius: var(--cl-zaokr); padding: 1.5rem; }
.ikona-pole { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none; border-radius: 12px; background: var(--cl-tlo-turkus); color: var(--cl-turkus-ciemny); }
.ikona-pole .ik { width: 1.4rem; height: 1.4rem; }
.ikona-pole.k-turkus { background: var(--cl-turkus); color: var(--cl-granat); }
.ikona-pole.k-morski { background: var(--cl-turkus-ciemny); color: #fff; }
.ikona-pole.k-bursztyn { background: var(--cl-bursztyn); color: var(--cl-granat); }
.ikona-pole.k-czerwien { background: var(--cl-czerwien); color: #fff; }
.ikona-pole.k-zielen { background: var(--cl-zielen); color: #fff; }
.ikona-pole.k-granat { background: var(--cl-granat); color: var(--cl-turkus); }

/* kolory pomocnicze dla elementów: --k (kolor), --k-tekst (tekst w kolorze na jasnym), --k-tlo (jasne tło) */
.k-turkus { --k: #45C7DD; --k-tekst: #0B5E73; --k-tlo: #E8F7FA; }
.k-morski { --k: #0E7490; --k-tekst: #0B5E73; --k-tlo: #E8F7FA; }
.k-bursztyn { --k: #F2A900; --k-tekst: #8A4B00; --k-tlo: #FFF5DF; }
.k-czerwien { --k: #CD1F36; --k-tekst: #B3182D; --k-tlo: #FDECEF; }
.k-zielen { --k: #15803D; --k-tekst: #15803D; --k-tlo: #EAF7EE; }
.k-granat { --k: #0F2A3D; --k-tekst: #0F2A3D; --k-tlo: #E6EDF1; }

/* okno aplikacji (makiety ekranów) */
.okno { background: #fff; border: 1px solid rgba(15, 42, 61, .1); border-radius: 14px; box-shadow: var(--cl-cien-2); overflow: hidden; }
.okno-pasek { display: flex; align-items: center; gap: .4rem; padding: .6rem .9rem; background: var(--cl-tlo-2); border-bottom: 1px solid var(--cl-linia); font-size: .75rem; color: var(--cl-tekst-3); }
.okno-pasek i { width: .6rem; height: .6rem; border-radius: 50%; background: #E5737F; }
.okno-pasek i + i { background: #F2C14E; }
.okno-pasek i + i + i { background: #5CC489; }
.okno-pasek span { margin-left: .5rem; font-family: var(--cl-font-mono); }
.przyklad { font-size: .8125rem; color: var(--cl-tekst-3); margin-top: .75rem; }

/* pauza animacji (WCAG 2.2.2) — pole wyboru #pauza na początku strony, przycisk przy zdjęciu w pierwszym ekranie */
.pauza {
  position: absolute; z-index: 3; right: .9rem; top: .9rem; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--cl-granat); box-shadow: 0 6px 18px -8px rgba(15, 42, 61, .5); cursor: pointer;
}
.pauza .ik { width: 1rem; height: 1rem; }
.pauza .wznow, body:has(#pauza:checked) .pauza .zatrzymaj { display: none; }
body:has(#pauza:checked) .pauza .wznow { display: grid; place-items: center; }
.pauza .zatrzymaj { display: grid; place-items: center; }
body:has(#pauza:focus-visible) .pauza { outline: 3px solid var(--cl-turkus-ciemny); outline-offset: 3px; }

/* ---------- animacje (kolory bez fioletu) ---------- */
@supports (animation-timeline: view()) {
  .cl-pojaw { animation: cl-pojaw linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
}
@keyframes cl-pojaw { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
.cl-lsnienie { position: relative; overflow: hidden; isolation: isolate; }
.cl-lsnienie::after {
  content: ""; position: absolute; inset: 0; z-index: -1; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .45) 50%, transparent 80%);
}
.cl-lsnienie:hover::after, .cl-lsnienie:focus-visible::after { animation: cl-lsnienie .9s var(--cl-krzywa); }
@keyframes cl-lsnienie { to { transform: translateX(120%); } }
.cl-puls { position: relative; display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: var(--cl-turkus); }
.cl-puls::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(69, 199, 221, .6); animation: cl-puls 2s ease-out infinite; }
@keyframes cl-puls { to { box-shadow: 0 0 0 .9em rgba(69, 199, 221, 0); } }

/* stan bez ruchu: „ogranicz ruch” w systemie albo przycisk pauzy — wszystko od razu w stanie końcowym */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .cl-pojaw, .cl-lsnienie::after, .cl-puls::after { animation: none !important; }
}
body:has(#pauza:checked) *, body:has(#pauza:checked) *::before, body:has(#pauza:checked) *::after { animation: none !important; transition: none !important; }

/* ---------- strona główna ---------- */
.hero-a { position: relative; padding-block: clamp(2rem, 1rem + 2.5vw, 4rem) clamp(4.5rem, 3rem + 5vw, 7rem);
  background: radial-gradient(52% 70% at 8% 0%, #E1F5F9 0%, transparent 64%), radial-gradient(36% 50% at 100% 100%, #FFF1CF 0%, transparent 70%), #fff; }
.hero-a .kontener { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(2.5rem, 1rem + 4vw, 5rem); align-items: center; }
.hero-a h1 { margin-top: 1rem; font-size: clamp(2.3rem, 1.45rem + 2.6vw, 3.6rem); letter-spacing: -.035em; color: var(--cl-granat); }
.hero-a h1 .akcent { color: var(--cl-turkus-ciemny); }
.hero-a .lead { max-width: 35rem; margin-top: 1.25rem; font-size: var(--cl-lead); color: var(--cl-tekst-2); }
.hero-przyciski { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.hero-zaufanie { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin-top: 2.25rem; list-style: none; font-size: .9375rem; color: var(--cl-tekst-2); }
.hero-zaufanie li { display: inline-flex; align-items: center; gap: .45rem; }
.hero-zaufanie .ik { width: 1.1rem; height: 1.1rem; color: var(--cl-turkus-ciemny); }
.hero-zaufanie li.ai .ik { color: var(--cl-czerwien); }
.hero-wizual { position: relative; margin-inline: 1rem; isolation: isolate; }
.hero-wizual::before { content: ""; position: absolute; z-index: -1; inset: 2.5rem -1.4rem -1.4rem 2.5rem; border-radius: 32px; background: var(--cl-turkus); }
.hero-wizual::after { content: ""; position: absolute; z-index: -1; right: -2.1rem; top: -1.1rem; width: 4.75rem; height: 4.75rem; border-radius: 18px; background: var(--cl-bursztyn); }
.hero-foto { position: relative; overflow: hidden; border-radius: 28px; aspect-ratio: 5 / 5.2; box-shadow: var(--cl-cien-2); background: #e9eef1; }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }
.plywak {
  position: absolute; z-index: 2; padding: .9rem 1rem; border: 1px solid rgba(15, 42, 61, .08); border-radius: 16px; font-size: .8125rem; line-height: 1.4;
  background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 18px 40px -18px rgba(15, 42, 61, .45);
  animation: plyw 7s ease-in-out infinite alternate;
}
@keyframes plyw { to { transform: translateY(-8px); } }
.plywak-1 { left: -2.25rem; top: 2rem; width: 17.5rem; }
.plywak-2 { right: -1.75rem; bottom: 4.5rem; width: 16.75rem; animation-delay: -3s; }
.plywak-3 { left: 1.25rem; bottom: -1.75rem; display: flex; align-items: center; gap: .75rem; animation-delay: -5s; }
.tm-glowa { display: flex; align-items: center; gap: .45rem; margin-bottom: .65rem; font-weight: 600; color: var(--cl-tekst); }
.tm-glowa .ik { width: 1rem; height: 1rem; color: var(--cl-turkus-ciemny); }
.tm-glowa span { margin-left: auto; font-family: var(--cl-font-mono); font-size: .6875rem; color: var(--cl-tekst-3); font-weight: 400; }
.tm-kolumny { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.tm-kolumny > div { display: grid; gap: .3rem; align-content: start; padding: .45rem .5rem .55rem; border-radius: 10px; background: var(--cl-tlo-2); border-top: 3px solid var(--k); }
.tm-kolumny b { font-size: .6875rem; font-weight: 600; color: var(--cl-tekst-2); }
.tm-licz { font-size: 1.15rem; font-weight: 700; color: var(--cl-tekst); }
.tm-kolumny i { height: .42rem; border-radius: 4px; background: var(--k-tlo); }
.tm-kolumny i:nth-of-type(2n) { width: 72%; }
.plywak-ai { display: flex; gap: .75rem; align-items: flex-start; background: var(--cl-granat); border-color: var(--cl-granat); color: #C5D5DF; }
.plywak-ai .ikona-pole { width: 2.25rem; height: 2.25rem; border-radius: 10px; }
.plywak-ai .ikona-pole .ik { width: 1.15rem; height: 1.15rem; }
.plywak-ai b { display: block; color: #fff; font-size: .875rem; }
.plywak-3 b { display: block; color: var(--cl-tekst); }
.plywak-3 span { color: var(--cl-tekst-3); }
.plywak-3 svg.iskra { width: 5.5rem; height: 2rem; }

/* pas morski „W skrócie” */
.pas-liczby { position: relative; color: #fff; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .045) 0 14px, transparent 14px 28px), linear-gradient(100deg, var(--cl-morski), var(--cl-turkus-ciemny)); }
.pas-liczby ul { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); list-style: none; }
.pas-liczby li { display: flex; flex-direction: column; gap: .65rem; align-items: flex-start; padding: 1.6rem 1.1rem 1.7rem; font-size: .875rem; line-height: 1.35; color: #D9F4F9; }
.pas-liczby li + li { border-left: 1px solid rgba(255, 255, 255, .16); }
.pas-liczby b { display: block; color: #fff; font-size: 1.0625rem; }
.pas-liczby .pl-ikona { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: none; border-radius: 50%; background: var(--k); color: var(--cl-granat); }
.pas-liczby .pl-ikona.k-zielen { color: #fff; }
.pas-liczby .pl-ikona.k-czerwien { background: #fff; color: var(--cl-czerwien); }   /* czerwień wprost na morskim/granacie daje na wygładzonej krawędzi piksele w odcieniu fioletu */
.pas-liczby .pl-ikona .ik { width: 1.3rem; height: 1.3rem; }

/* droga próbki — każdy krok w innym kolorze */
.proces { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; list-style: none; counter-reset: krok; }
.proces::before { content: ""; position: absolute; left: 6%; right: 6%; top: 1.75rem; height: 3px; background: repeating-linear-gradient(90deg, #45C7DD 0 10px, transparent 10px 18px); background-size: 36px 3px; animation: tasma 1.6s linear infinite; }
@keyframes tasma { to { background-position: 36px 0; } }
.proces li { position: relative; display: grid; gap: .75rem; align-content: start; counter-increment: krok; }
.proces .krok-ikona { position: relative; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--k); color: #fff; box-shadow: 0 0 0 6px #fff; }
.proces .krok-ikona.k-turkus, .proces .krok-ikona.k-bursztyn { color: var(--cl-granat); }
.proces .krok-ikona::after { content: counter(krok); position: absolute; right: -.35rem; top: -.35rem; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--cl-granat); color: #fff; font: 600 .6875rem/1 var(--cl-font-mono); box-shadow: 0 0 0 2px #fff; }
.proces h3 { font-size: 1.125rem; }
.proces p { font-size: .9375rem; color: var(--cl-tekst-2); }
.proces .moduly-kroku { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; }
.proces .moduly-kroku span { padding: .2rem .55rem; border-radius: var(--cl-zaokr-pill); background: var(--k-tlo); color: var(--k-tekst); font-size: .75rem; font-weight: 600; }

/* moduły — pas jasnego turkusu, pola ikon w kolorach obszarów */
.sekcja-moduly { background: var(--cl-tlo-turkus); }
.sekcja-moduly .sekcja-glowa p { color: var(--cl-tekst-2); }
.obszary-a { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 1rem; }
.obszar-kafel { display: flex; flex-direction: column; gap: .55rem; padding: 1.25rem 1.35rem .6rem; border: 1px solid #CFE7EE; border-radius: var(--cl-zaokr); background: #fff; transition: box-shadow .3s, border-color .3s; }
.obszar-kafel:hover { border-color: #A9DCE7; box-shadow: var(--cl-cien-2); }
.obszar-kafel.wyrozniony { grid-column: span 2; border-top: 5px solid var(--cl-czerwien); }
/* czerwony brzeg z zaokrągleniem na jasnym turkusie wygładza się w odcieniu fioletu — biała obwódka zmienia tło krawędzi */
.obszar-kafel.wyrozniony:not(.ai) { box-shadow: 0 0 0 2px #fff; }
.obszar-kafel.wyrozniony:not(.ai):hover { box-shadow: 0 0 0 2px #fff, var(--cl-cien-2); }
.obszar-glowa { display: flex; align-items: center; justify-content: space-between; }
.obszar-liczba { font-family: var(--cl-font-mono); font-size: .75rem; color: var(--cl-tekst-3); }
.obszar-kafel h3 { font-size: 1.0625rem; }
.obszar-kafel > p { font-size: .9375rem; color: var(--cl-tekst-2); }
.obszar-kafel details { margin-top: auto; }
.obszar-kafel summary { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; list-style: none; cursor: pointer; color: var(--cl-turkus-ciemny); font-weight: 600; font-size: .875rem; }
.obszar-kafel summary::-webkit-details-marker { display: none; }
.obszar-kafel summary .ik { width: 1rem; height: 1rem; transition: transform .25s; }
.obszar-kafel details[open] summary .ik { transform: rotate(180deg); }
.lista-modulow { display: grid; gap: .65rem; margin-top: .4rem; list-style: none; font-size: .875rem; color: var(--cl-tekst-2); }
.obszar-kafel.wyrozniony .lista-modulow { grid-template-columns: 1fr 1fr; column-gap: 1.25rem; }
.lista-modulow li { padding-top: .6rem; border-top: 1px solid var(--cl-linia); }
.lista-modulow b { display: block; color: var(--cl-tekst); font-size: .9375rem; }
.lista-modulow li.wazny b::before { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-right: .4rem; border-radius: 50%; background: var(--cl-czerwien); vertical-align: .1em; }
.lista-modulow .znacznik { margin-top: .35rem; margin-right: .25rem; }
.obszar-kafel.ai { background: var(--cl-granat); border-color: var(--cl-granat); border-top-color: var(--cl-turkus); color: #C5D5DF; }
.obszar-kafel.ai:hover { border-color: var(--cl-granat); border-top-color: var(--cl-turkus); }
.obszar-kafel.ai h3, .obszar-kafel.ai .lista-modulow b { color: #fff; }
.obszar-kafel.ai > p, .obszar-kafel.ai .lista-modulow { color: #C5D5DF; }
.obszar-kafel.ai .obszar-liczba { color: #9FB3C1; }
.obszar-kafel.ai summary { color: var(--cl-turkus-jasny); }
.obszar-kafel.ai .lista-modulow li { border-top-color: rgba(255, 255, 255, .14); }
.obszar-kafel.ai .z-ai { background: var(--cl-turkus); color: var(--cl-granat); }
.obszar-kafel.ai .z-int { background: var(--cl-granat-2); color: #FFD27A; }
.legenda-modulow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; margin-top: 1.5rem; font-size: .875rem; color: var(--cl-tekst-3); }
.legenda-modulow span::before { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-right: .4rem; border-radius: 50%; background: var(--cl-czerwien); }
.legenda-modulow a { font-weight: 600; }

/* ważność wyników */
.jakosc-a { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.tytul-boczny { margin-top: .75rem; font-size: var(--cl-h2); }
.lead-boczny { margin-top: 1rem; font-size: var(--cl-lead); }
.lista-ok { display: grid; gap: 1rem; margin-top: 2rem; list-style: none; }
.lista-ok li { display: grid; grid-template-columns: auto 1fr; gap: .2rem .9rem; }
.lista-ok .ikona-pole { grid-row: span 2; width: 2.4rem; height: 2.4rem; border-radius: 10px; }
.lista-ok .ikona-pole .ik { width: 1.2rem; height: 1.2rem; }
.lista-ok b { color: var(--cl-tekst); }
.lista-ok span { color: var(--cl-tekst-2); font-size: .9375rem; }
.wykres-karta { margin: 0; padding: 1.25rem 1.25rem .75rem; border-top: 5px solid var(--cl-czerwien); }
.wykres-tytul { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.wykres-tytul b { font-size: .9375rem; }
.wykres-tytul span { font-size: .8125rem; color: var(--cl-tekst-3); }
.shewhart text { font-family: var(--cl-font-mono); font-size: 11px; fill: #566673; }
.shewhart .linia { fill: none; stroke: #0E7490; stroke-width: 2; stroke-linejoin: round; }
@supports (animation-timeline: view()) {
  .shewhart .linia { stroke-dasharray: 1; stroke-dashoffset: 1; animation: rysuj linear both; animation-timeline: view(); animation-range: entry 15% cover 45%; }
}
@keyframes rysuj { to { stroke-dashoffset: 0; } }
.pt-pasek { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; margin-top: 1rem; padding: 1rem 1.25rem; border-radius: 12px; background: var(--cl-tlo-2); font-size: .875rem; color: var(--cl-tekst-2); }
.pt-pasek b { color: var(--cl-tekst); }
.pt-pasek .znacznik { background: var(--cl-tlo-zielen); color: #15803D; }

/* pas granatowy — asystent AI */
.pas-ai { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(4rem, 3rem + 4vw, 6.5rem); background: var(--cl-granat); color: #C5D5DF; }
.pas-ai::before, .pas-ai::after { content: ""; position: absolute; z-index: -1; aspect-ratio: 1; border-radius: 50%; pointer-events: none; }
.pas-ai::before { width: min(60rem, 90vw); left: -22rem; top: -26rem; background: radial-gradient(circle, rgba(69, 199, 221, .30) 0%, transparent 66%); }
.pas-ai::after { width: min(48rem, 80vw); right: -18rem; bottom: -24rem; background: radial-gradient(circle, rgba(14, 116, 144, .55) 0%, transparent 66%); }
.ai-glowa { max-width: 50rem; }
.ai-glowa h2 { margin-top: 1rem; font-size: var(--cl-h2); color: #fff; }
.ai-glowa h2 .akcent { color: var(--cl-turkus); }
.ai-glowa p { margin-top: 1rem; font-size: var(--cl-lead); color: #C5D5DF; }
.ai-siatka { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 2.5vw, 3rem); margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); align-items: start; }
.czat { margin: 0; overflow: hidden; border-radius: 18px; background: #fff; color: var(--cl-tekst); box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .65); }
.czat-pasek { display: flex; align-items: center; gap: .65rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--cl-linia); font-weight: 600; font-size: .9375rem; }
.czat-pasek .ikona-pole { width: 2.1rem; height: 2.1rem; border-radius: 10px; }
.czat-pasek .ikona-pole .ik { width: 1.1rem; height: 1.1rem; }
.czat-pasek .stan { display: inline-flex; align-items: center; gap: .45rem; margin-left: auto; font-size: .75rem; font-weight: 500; color: var(--cl-tekst-3); }
.czat-pasek .stan .cl-puls { width: .5rem; height: .5rem; background: #22A06B; }
.czat-pasek .stan .cl-puls::after { box-shadow: none; animation: none; }
.czat-tresc { display: grid; gap: .85rem; padding: 1.1rem; background: var(--cl-tlo-2); }
.dymek { max-width: 90%; padding: .75rem .95rem; border-radius: 14px; font-size: .9375rem; line-height: 1.5; }
.dymek-ja { justify-self: end; border-bottom-right-radius: 4px; background: var(--cl-granat); color: #fff; }
.dymek-ai { justify-self: start; border-bottom-left-radius: 4px; background: #fff; border: 1px solid var(--cl-linia); }
.dymek-ai ul { display: grid; gap: .4rem; margin-top: .55rem; list-style: none; }
.dymek-ai li { display: flex; flex-wrap: wrap; gap: .15rem .55rem; align-items: baseline; font-size: .875rem; }
.dymek-ai li b { font-family: var(--cl-font-mono); font-size: .8125rem; font-weight: 600; }
.dymek-ai li .termin { color: var(--cl-czerwien); font-weight: 600; }
.dymek-ai .lista-kontrolna li { flex-wrap: nowrap; gap: .5rem; }
.dymek-ai .lista-kontrolna .ik { width: 1rem; height: 1rem; margin-top: .1rem; color: var(--cl-zielen); align-self: flex-start; }
.dymek-ai .zrodlo { display: block; margin-top: .6rem; font-size: .75rem; color: var(--cl-tekst-3); }
.czat-pole { display: flex; align-items: center; gap: .6rem; padding: .8rem 1.1rem; border-top: 1px solid var(--cl-linia); background: #fff; color: var(--cl-tekst-3); font-size: .9375rem; }
.czat-pole span { flex: 1; }
.czat-pole .ik { color: var(--cl-turkus-ciemny); }
.czat figcaption { padding: 0 1.1rem 1rem; background: #fff; font-size: .8125rem; color: var(--cl-tekst-3); }
.ai-uzycia-tytul { font-family: var(--cl-font-mono); font-size: .8125rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--cl-turkus-jasny); margin-bottom: 1rem; }
.ai-karty { display: grid; gap: .8rem; list-style: none; }
.ai-karta { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; padding: 1rem 1.15rem; border-radius: 14px; background: var(--cl-granat-2); border: 1px solid rgba(255, 255, 255, .08); }
.ai-karta .ikona-pole { grid-row: span 2; }
.ai-karta .ikona-pole.k-czerwien { background: #fff; color: var(--cl-czerwien); }
.ai-karta h4 { font-size: 1.0625rem; color: #fff; }
.ai-karta p { font-size: .9375rem; color: #C5D5DF; }
.ai-zasada { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem; margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .9375rem; }
.ai-zasada > span { display: inline-flex; align-items: center; gap: .55rem; flex-basis: 100%; }
.ai-zasada .ik { color: var(--cl-turkus); }
.ai-zasada a { color: var(--cl-turkus-jasny); font-weight: 600; }

/* branże — kolorowy pasek u góry każdej karty */
.branze-a { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.branza { position: relative; display: grid; align-content: start; gap: .6rem; padding: 1.4rem; border: 1px solid var(--cl-linia); border-top: 5px solid var(--k); border-radius: var(--cl-zaokr); background: #fff; grid-column: span 3; }
.branza.duza { grid-column: span 4; padding: 0; overflow: hidden; }
.branza.duza img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.branza.duza .branza-tresc { display: grid; gap: .6rem; padding: 1.25rem 1.4rem 1.5rem; }
.branza h3 { font-size: 1.125rem; }
.branza p { font-size: .9375rem; color: var(--cl-tekst-2); }
.branza .tagi { display: flex; flex-wrap: wrap; gap: .35rem; }
.branza .tagi span { padding: .2rem .55rem; border-radius: var(--cl-zaokr-pill); background: var(--k-tlo); color: var(--k-tekst); font-size: .75rem; font-weight: 600; }

/* finanse — pas jasnego bursztynu */
.sekcja-finanse { background: var(--cl-tlo-bursztyn); }
.finanse-a { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.sekcja-finanse .nadtytul { color: #8A4B00; }
.panel-fin { margin: 0; border-color: rgba(138, 75, 0, .14); }
.panel-fin .kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; padding: 1rem 1rem 0; }
.panel-fin .kpi div { padding: .8rem .9rem; border: 1px solid var(--cl-linia); border-left: 4px solid var(--k); border-radius: 12px; }
.panel-fin .kpi span { display: block; font-size: .75rem; color: var(--cl-tekst-3); }
.panel-fin .kpi b { display: block; margin-top: .15rem; font-size: 1.25rem; letter-spacing: -.02em; }
.panel-fin .kpi em { font-style: normal; font-size: .75rem; color: #15803D; }
.panel-fin .slupki { padding: .75rem 1rem 0; }
.panel-fin .slupki text { font-family: var(--cl-font-mono); font-size: 10px; fill: #566673; }
.panel-fin .ksef { display: grid; gap: .4rem; padding: .75rem 1rem 1rem; list-style: none; font-size: .8125rem; }
.panel-fin .ksef li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .55rem .7rem; border-radius: 10px; background: var(--cl-tlo-2); color: var(--cl-tekst-2); }
.panel-fin .ksef b { color: var(--cl-tekst); font-family: var(--cl-font-mono); font-size: .75rem; }
.panel-fin .ksef .znacznik { margin-left: auto; }
.panel-fin .przyklad { padding: 0 1rem 1rem; }
.lista-krotka { display: grid; gap: .8rem; margin-top: 1.75rem; list-style: none; }
.lista-krotka li { display: flex; gap: .8rem; align-items: flex-start; color: var(--cl-tekst-2); }
.lista-krotka .ikona-pole { width: 2.2rem; height: 2.2rem; border-radius: 10px; }
.lista-krotka .ikona-pole .ik { width: 1.1rem; height: 1.1rem; }
.lista-krotka b { color: var(--cl-tekst); }

/* bezpieczeństwo */
.bezp-a { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.bezp-a .karta { display: grid; gap: .7rem; align-content: start; border-top: 5px solid var(--k); }
.bezp-a h3 { font-size: 1.0625rem; }
.bezp-a p { font-size: .9375rem; color: var(--cl-tekst-2); }

/* pas czerwony — zaproszenie na prezentację */
.pas-cta { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(3.25rem, 2.25rem + 3.5vw, 5rem); color: #fff;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 14px, transparent 14px 28px), linear-gradient(100deg, #A3172A, #CD1F36 60%); }
.pas-cta-siatka { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.pas-cta h2 { font-size: var(--cl-h2); color: #fff; }
.pas-cta p { margin-top: 1rem; font-size: var(--cl-lead); color: #fff; }
.pas-cta-przyciski { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.start-kroki { display: grid; gap: .75rem; list-style: none; counter-reset: etap; }
.start-kroki li { position: relative; padding: .9rem 1.1rem .95rem 3.4rem; border-radius: 14px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); counter-increment: etap; font-size: .9375rem; line-height: 1.45; }
.start-kroki li::before { content: "0" counter(etap); position: absolute; left: 1.1rem; top: .95rem; font: 600 .875rem/1.45 var(--cl-font-mono); color: #fff; }
.start-kroki b { display: block; font-size: 1rem; }

/* kontakt */
.kontakt-a { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.kontakt-dane { display: grid; gap: .9rem; margin-top: 2rem; list-style: none; }
.kontakt-dane li { display: flex; gap: .75rem; align-items: center; }
.kontakt-dane .ikona-pole { width: 2.4rem; height: 2.4rem; border-radius: 10px; }
.kontakt-dane .ikona-pole .ik { width: 1.15rem; height: 1.15rem; }
.kontakt-dane a { color: var(--cl-tekst); font-weight: 600; text-decoration: none; }
.formularz { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); border-top: 5px solid var(--cl-turkus); }
.formularz label { display: grid; grid-template-rows: auto 1fr; gap: .35rem; font-size: .875rem; font-weight: 600; color: var(--cl-tekst); }
.formularz .cale { grid-column: 1 / -1; }
.formularz input, .formularz textarea, .formularz select { width: 100%; min-height: 48px; padding: .75rem .9rem; border: 1.5px solid var(--cl-obrys-pola); border-radius: 12px; font: 400 1rem/1.4 var(--cl-font); color: var(--cl-tekst); background: #fff; }
.formularz textarea { min-height: 7.5rem; resize: vertical; }
.formularz input:focus-visible, .formularz textarea:focus-visible, .formularz select:focus-visible { outline: 3px solid #45C7DD; outline-offset: 1px; border-color: var(--cl-turkus-ciemny); }
.formularz .przycisk { justify-self: start; }
.formularz .maly { align-self: center; }
.formularz .zgoda { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; color: var(--cl-tekst-2); }
.formularz .zgoda input { width: 1.15rem; min-height: 0; height: 1.15rem; margin-top: .2rem; flex: none; accent-color: var(--cl-turkus-ciemny); }
.formularz-stan { grid-column: 1 / -1; display: none; padding: .9rem 1rem; border-radius: 12px; font-size: .9375rem; line-height: 1.5; }
.formularz-stan.ok { display: block; background: var(--cl-tlo-zielen); color: #14532D; border: 1px solid #A7DDB8; }
.formularz-stan.blad { display: block; background: var(--cl-tlo-czerwien); color: #8E1426; border: 1px solid #F3B4BE; }
.formularz-stan a { color: inherit; font-weight: 600; }
.pole-ukryte { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- strona „Plany” ---------- */
.plany-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); background: var(--cl-granat); color: #C5D5DF; }
.plany-hero::before { content: ""; position: absolute; z-index: -1; width: min(56rem, 90vw); aspect-ratio: 1; left: -20rem; top: -24rem; border-radius: 50%; background: radial-gradient(circle, rgba(69, 199, 221, .28) 0%, transparent 66%); }
.plany-hero::after { content: ""; position: absolute; z-index: -1; width: min(44rem, 80vw); aspect-ratio: 1; right: -16rem; bottom: -24rem; border-radius: 50%; background: radial-gradient(circle, rgba(242, 169, 0, .22) 0%, transparent 66%); }
.plany-hero .nadtytul { color: var(--cl-turkus-jasny); }
.plany-hero h1 { max-width: 48rem; margin-top: 1rem; font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.4rem); letter-spacing: -.03em; color: #fff; }
.plany-hero h1 .akcent { color: var(--cl-turkus); }
.plany-hero p { max-width: 44rem; margin-top: 1.25rem; font-size: var(--cl-lead); color: #C5D5DF; }
.plany-hero .hero-przyciski { margin-top: 2rem; }
.plany-hero-siatka { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.plany-slupki { margin: 0; padding: 1.25rem 1.25rem 0; border-radius: 20px; background: #fff; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .6); }
.plany-slupki figcaption { font-family: var(--cl-font-mono); font-size: .75rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--cl-tekst-3); }
.slupki-pole { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; align-items: end; height: 17rem; margin-top: 1rem; border-bottom: 2px solid var(--cl-linia); }
.slupek { display: flex; flex-direction: column; gap: .35rem; height: var(--h); min-height: 5.5rem; padding: .8rem .75rem; border-radius: 14px 14px 0 0; background: var(--k); color: var(--cl-granat); text-decoration: none; transition: filter .2s; }
.slupek:hover { filter: brightness(1.06); }
.slupek.k-czerwien { color: #fff; }
.slupek b { font-size: 2rem; line-height: 1; letter-spacing: -.03em; }
.slupek span { font-size: .8125rem; font-weight: 600; line-height: 1.25; }
.plany-przeglad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
.plan-karta { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 1.6rem 1.5rem 1.5rem; border: 1px solid var(--cl-linia); border-top: 6px solid var(--k); border-radius: var(--cl-zaokr); background: #fff; box-shadow: var(--cl-cien-1); }
.plan-karta.wyrozniony { box-shadow: var(--cl-cien-2); border-color: #E9D6A6; border-top-color: var(--k); }
.plan-odznaka { position: absolute; top: -.95rem; right: 1.25rem; padding: .25rem .7rem; border-radius: var(--cl-zaokr-pill); background: var(--cl-bursztyn); color: var(--cl-granat); font-size: .75rem; font-weight: 700; }
.plan-glowa { display: flex; align-items: center; gap: .85rem; }
.plan-karta h2, .plan-karta h3 { font-size: 1.375rem; letter-spacing: -.02em; }
.plan-dla { color: var(--cl-tekst-2); font-size: .9375rem; }
.plan-parametry { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; list-style: none; }
.plan-parametry li { padding: .6rem .7rem; border-radius: 12px; background: var(--k-tlo); }
.plan-parametry span { display: block; font-size: .75rem; color: var(--cl-tekst-3); }
.plan-parametry b { display: block; font-size: 1rem; color: var(--cl-tekst); letter-spacing: -.01em; }
.plan-szczegoly { display: grid; gap: .45rem; list-style: none; font-size: .9375rem; color: var(--cl-tekst-2); }
.plan-szczegoly li { display: flex; gap: .55rem; align-items: flex-start; }
.plan-szczegoly .ik { width: 1.05rem; height: 1.05rem; margin-top: .2rem; color: var(--k-tekst); }
.plan-liczba { display: flex; align-items: baseline; gap: .5rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--cl-linia); }
.plan-liczba b { font-size: 2.25rem; letter-spacing: -.03em; line-height: 1; color: var(--cl-granat); }
.plan-liczba span { color: var(--cl-tekst-2); font-size: .9375rem; }
.plan-karta .przycisk { width: 100%; }
.plany-uwaga { margin-top: 1.5rem; color: var(--cl-tekst-3); font-size: .9375rem; }
/* „w każdym planie” — pas morski */
.pas-wszystkie { padding-block: clamp(2.75rem, 2rem + 2.5vw, 4rem); color: #fff; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .045) 0 14px, transparent 14px 28px), linear-gradient(100deg, var(--cl-morski), var(--cl-turkus-ciemny)); }
.pas-wszystkie h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); color: #fff; }
.pas-wszystkie ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem 1.5rem; margin-top: 1.5rem; list-style: none; }
.pas-wszystkie li { display: flex; gap: .65rem; align-items: flex-start; color: #D9F4F9; font-size: .9375rem; line-height: 1.4; }
.pas-wszystkie li b { display: block; color: #fff; }
.pas-wszystkie .pl-ikona { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; flex: none; border-radius: 50%; background: #fff; color: var(--cl-morski); }
.pas-wszystkie .pl-ikona .ik { width: 1.05rem; height: 1.05rem; }
/* plan w szczegółach — pas z listą modułów */
.plan-sekcja { padding-block: clamp(3.25rem, 2.25rem + 3.5vw, 5.5rem); }
.plan-sekcja.tlo-turkus { background: var(--cl-tlo-turkus); }
.plan-sekcja.tlo-bursztyn { background: var(--cl-tlo-bursztyn); }
.plan-uklad { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2.2fr); gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start; }
.plan-bok { position: sticky; top: 6.5rem; display: grid; gap: 1rem; }
.plan-bok .nadtytul { color: var(--k-tekst); }
.plan-bok h2 { font-size: var(--cl-h2); letter-spacing: -.03em; }
.plan-bok p { color: var(--cl-tekst-2); }
.plan-bok .plan-liczba { margin-top: .25rem; border-top: 0; padding-top: 0; }
.plan-dziedziczy { display: flex; gap: .7rem; align-items: center; padding: .9rem 1rem; border-radius: 14px; background: #fff; border: 1px dashed var(--k); color: var(--cl-tekst-2); font-size: .9375rem; }
.plan-dziedziczy .ik { color: var(--k-tekst); }
/* czerwony przycisk na pasie w kolorze: biała obwódka, żeby wygładzona krawędź nie dawała fioletu */
.plan-sekcja .przycisk-glowny { box-shadow: 0 0 0 3px #fff; }
.plan-sekcja .przycisk-glowny:hover { box-shadow: 0 0 0 3px #fff, 0 10px 24px -10px rgba(205, 31, 54, .6); }
.plan-obszary { columns: 2 20rem; column-gap: 1.25rem; }
.plan-obszar { break-inside: avoid; display: grid; gap: .5rem; margin-bottom: 1.25rem; padding: 1.1rem 1.2rem 1.15rem; border: 1px solid var(--cl-linia); border-radius: 14px; background: #fff; }
.plan-obszar-glowa { display: flex; align-items: center; gap: .6rem; }
.plan-obszar-glowa .ikona-pole { width: 2.1rem; height: 2.1rem; border-radius: 10px; }
.plan-obszar-glowa .ikona-pole .ik { width: 1.05rem; height: 1.05rem; }
.plan-obszar h3 { font-size: 1rem; letter-spacing: -.01em; }
.plan-obszar-glowa span.ile { margin-left: auto; font-family: var(--cl-font-mono); font-size: .75rem; color: var(--cl-tekst-3); white-space: nowrap; }
.plan-moduly { display: grid; gap: .1rem; list-style: none; }
.plan-moduly li { display: grid; grid-template-columns: auto 1fr; gap: .1rem .5rem; padding: .35rem 0; border-top: 1px solid #EDF2F5; font-size: .9375rem; line-height: 1.35; }
.plan-moduly li:first-child { border-top: 0; }
.plan-moduly .ik { width: 1rem; height: 1rem; margin-top: .12rem; color: var(--k-tekst); }
.plan-moduly b { font-weight: 600; color: var(--cl-tekst); }
.plan-moduly .opis { grid-column: 2; font-size: .8125rem; line-height: 1.45; color: var(--cl-tekst-3); }
.plan-moduly .znacznik { margin-left: .35rem; font-size: .6875rem; vertical-align: .08em; }
/* porównanie planów — tabela obszarów */
.porownanie { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9375rem; background: #fff; border: 1px solid var(--cl-linia); border-radius: var(--cl-zaokr); overflow: hidden; }
.porownanie th, .porownanie td { padding: .8rem 1rem; text-align: left; border-top: 1px solid var(--cl-linia); vertical-align: middle; }
.porownanie thead th { border-top: 0; background: var(--cl-tlo-2); font-size: .8125rem; font-family: var(--cl-font-mono); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--cl-tekst-2); }
.porownanie td.liczba, .porownanie th.liczba { width: 9rem; text-align: center; white-space: nowrap; }
.porownanie td.liczba b { font-size: 1.0625rem; }
.porownanie td.liczba span { color: var(--cl-tekst-3); font-size: .8125rem; }
.porownanie .pelny { color: var(--cl-zielen); }
.porownanie .brak { color: var(--cl-tekst-3); font-weight: 400; }
.porownanie tbody th { font-weight: 600; color: var(--cl-tekst); }
.porownanie tbody th .ik { display: inline-block; width: 1rem; height: 1rem; margin-right: .5rem; vertical-align: -.15em; color: var(--cl-turkus-ciemny); }
.porownanie-ramka { overflow-x: auto; border-radius: var(--cl-zaokr); }

/* ---------- baza wiedzy ---------- */
.bw-hero { padding-block: clamp(2.75rem, 2rem + 3vw, 4.75rem) clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem);
  background: radial-gradient(52% 80% at 6% 0%, #DDF3F8 0%, transparent 64%), radial-gradient(36% 60% at 100% 100%, #FFF1CF 0%, transparent 70%), var(--cl-tlo-turkus); }
.bw-hero h1 { max-width: 46rem; margin-top: 1rem; font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.4rem); letter-spacing: -.03em; color: var(--cl-granat); }
.bw-hero p { max-width: 44rem; margin-top: 1.1rem; font-size: var(--cl-lead); color: var(--cl-tekst-2); }
.bw-tematy { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.5rem; list-style: none; }
.bw-tematy li { padding: .3rem .75rem; border-radius: var(--cl-zaokr-pill); background: #fff; border: 1px solid #CFE7EE; color: var(--cl-tekst-2); font-size: .8125rem; font-weight: 600; }
.bw-siatka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; list-style: none; }
.bw-karta { height: 100%; }
.bw-karta a { display: grid; grid-template-rows: auto 1fr; height: 100%; overflow: hidden; border: 1px solid var(--cl-linia); border-top: 5px solid var(--k); border-radius: var(--cl-zaokr); background: #fff; color: inherit; text-decoration: none; transition: box-shadow .3s, transform .3s, border-color .3s; }
.bw-karta a:hover { box-shadow: var(--cl-cien-2); transform: translateY(-3px); }
.bw-karta a:hover h2, .bw-karta a:hover h3 { color: var(--cl-turkus-ciemny); }
.bw-karta img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--cl-tlo-2); }
.bw-tresc { display: grid; align-content: start; gap: .55rem; padding: 1.15rem 1.25rem 1.35rem; }
.bw-data { font-family: var(--cl-font-mono); font-size: .75rem; color: var(--cl-tekst-3); }
.bw-karta h2, .bw-karta h3 { font-size: 1.125rem; line-height: 1.3; color: var(--cl-tekst); transition: color .2s; }
.bw-karta p { font-size: .9375rem; line-height: 1.55; color: var(--cl-tekst-2); }
.bw-czytaj { display: inline-flex; align-items: center; gap: .35rem; margin-top: .3rem; color: var(--cl-turkus-ciemny); font-weight: 600; font-size: .9375rem; }
.bw-czytaj .ik { width: 1rem; height: 1rem; }
.bw-karta.pierwsza { grid-column: span 3; }
.bw-karta.pierwsza a { grid-template-rows: none; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.bw-karta.pierwsza img { height: 100%; aspect-ratio: auto; min-height: 18rem; }
.bw-karta img.wektor { object-fit: contain; background: var(--cl-granat); }
.bw-karta.pierwsza .bw-tresc { align-content: center; padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); gap: .8rem; }
.bw-karta.pierwsza h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); letter-spacing: -.02em; }
.bw-karta.pierwsza p { font-size: 1.0625rem; }

/* ---------- strona przekierowania ---------- */
.przekierowanie { min-height: 60vh; display: grid; place-items: center; padding: 4rem 0; text-align: center; }
.przekierowanie h1 { font-size: var(--cl-h2); color: var(--cl-granat); }
.przekierowanie p { margin-top: 1rem; color: var(--cl-tekst-2); font-size: var(--cl-lead); }
.przekierowanie .przycisk { margin-top: 1.75rem; }

/* ---------- układ na mniejszych ekranach ---------- */
@media (max-width: 1100px) {
  .obszary-a { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pas-liczby ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pas-liczby li:nth-child(4) { border-left: 0; }
  .pas-liczby li:nth-child(n+4) { border-top: 1px solid rgba(255, 255, 255, .16); }
  .bezp-a { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .branza { grid-column: span 6; }
  .branza.duza { grid-column: span 4; }
  .pas-wszystkie ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bw-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bw-karta.pierwsza { grid-column: span 2; }
}
@media (max-width: 980px) {
  .hero-a .kontener, .jakosc-a, .ai-siatka, .finanse-a, .kontakt-a, .pas-cta-siatka, .plan-uklad { grid-template-columns: minmax(0, 1fr); }
  .hero-wizual { max-width: 34rem; margin-inline: auto; width: 100%; }
  .proces { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .proces::before { left: 1.7rem; right: auto; top: 1rem; bottom: 1rem; width: 3px; height: auto; background: repeating-linear-gradient(180deg, #45C7DD 0 10px, transparent 10px 18px); animation: none; }
  .proces li { grid-template-columns: auto 1fr; column-gap: 1.1rem; }
  .proces li > :not(.krok-ikona) { grid-column: 2; }
  .proces .krok-ikona { grid-row: span 3; }
  .branza.duza { grid-column: span 12; }
  .branza.duza img { aspect-ratio: 16 / 8; }
  .plany-przeglad, .plany-hero-siatka { grid-template-columns: minmax(0, 1fr); }
  .plany-slupki { max-width: 30rem; }
  .plan-bok { position: static; }
  .bw-karta.pierwsza a { grid-template-columns: minmax(0, 1fr); }
  .bw-karta.pierwsza img { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .plywak { position: relative; inset: auto; width: auto; margin-top: .75rem; animation: none; }
  .hero-wizual { margin-inline: 0; }
  .hero-wizual::before { inset: 1.75rem -.6rem auto 1.75rem; height: calc(75vw - 2.65rem); border-radius: 24px; }   /* do dołu zdjęcia 4:3 + 0,6rem */
  .hero-wizual::after { right: -.6rem; top: -.75rem; width: 3.25rem; height: 3.25rem; border-radius: 14px; }
  .hero-foto { aspect-ratio: 4 / 3; }
  .obszary-a { grid-template-columns: minmax(0, 1fr); }
  .obszar-kafel.wyrozniony { grid-column: auto; }
  .obszar-kafel.wyrozniony .lista-modulow { grid-template-columns: 1fr; }
  .bezp-a { grid-template-columns: minmax(0, 1fr); }
  .bezp-a .karta, .branza:not(.duza) { grid-template-columns: auto 1fr; column-gap: 1rem; padding: 1.1rem; }
  .bezp-a .karta > :not(.ikona-pole), .branza:not(.duza) > :not(.ikona-pole) { grid-column: 2; }
  .bezp-a .ikona-pole, .branza:not(.duza) .ikona-pole { grid-row: 1 / span 3; }
  .branza, .branza.duza { grid-column: span 12; }
  .pas-liczby ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pas-liczby li { gap: .5rem; padding: 1.1rem .5rem; font-size: .8125rem; }
  .pas-liczby li + li { border-left: 0; }
  .pas-liczby li:nth-child(2n) { border-left: 1px solid rgba(255, 255, 255, .16) !important; padding-left: 1rem; }
  .pas-liczby li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .16); }
  .panel-fin .kpi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .panel-fin .kpi div:last-child { grid-column: span 2; }
  .formularz { grid-template-columns: minmax(0, 1fr); }
  .hero-przyciski .przycisk, .pas-cta-przyciski .przycisk { flex: 1 1 100%; }
  .dymek { max-width: 100%; }
  .pas-wszystkie ul { grid-template-columns: minmax(0, 1fr); }
  .plan-parametry { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bw-siatka { grid-template-columns: minmax(0, 1fr); }
  .bw-karta.pierwsza { grid-column: auto; }
  .porownanie td.liczba, .porownanie th.liczba { width: auto; padding-inline: .5rem; }
  .porownanie th, .porownanie td { padding: .7rem .6rem; }
}

@media print {
  .pauza { display: none; }
  .cl-pojaw, .cl-lsnienie::after, .cl-puls::after { animation: none !important; }
}