/* SEOLDIER v2 — „Centrum dowodzenia” · paleta „Hologram” (z animacji holograficznego żołnierza).
 * Inspiracja: DNA XTN (badge → tytuł 400/600 → podtytuł, pigułka z polem strzałki, ciemne okna 24 px).
 * Wykonanie: pełny ruch — GSAP + ScrollTrigger + Lenis, scena WebGL w hero, przypinane sekcje, kurtyny, kursor-celownik.
 * Paleta „Hologram”: granat nocy + holograficzny błękit + lazur + lodowa biel + taktyczny piasek; czerwień tylko dla wroga i błędów. */

/* =========================================================================
   1. TOKENY
   ========================================================================= */
:root {
  /* papier (jasne pasma) — chłodny, tintowany błękitem */
  --s-papier: #FFFFFF;
  --s-papier-2: #EEF2F5;
  --s-papier-3: #E2E9EF;
  --s-linia: #D3DDE5;
  --s-linia-mocna: #AEBDC9;
  --s-tusz: #07111A;
  --s-tekst: #3E4A54;           /* 8:1 na papier-2 */
  --s-cichy: #5B6874;           /* 5,1:1 na papier-2 */

  /* noc — granat z animacji */
  --s-noc: #03070D;
  --s-noc-2: #07101A;
  --s-noc-3: #0D1826;
  --s-linia-noc: rgba(160, 220, 255, 0.11);
  --s-linia-noc-mocna: rgba(160, 220, 255, 0.24);
  --s-tekst-noc: #C4D3DE;       /* 12:1 na noc-2 */
  --s-cichy-noc: #8FA3B3;       /* 7,3:1 na noc-2 */
  --s-bialy: #EEF7FC;

  /* hologram + taktyczny akcent */
  --s-holo: #6CD8FF;            /* świecący błękit hologramu — na nocy; na wypełnieniu zawsze ciemny tusz (12:1) */
  --s-holo-2: #2E8FD0;          /* lazur — kreski, głębia, drugi plan */
  --s-holo-tusz: #1A6FA8;       /* lazur jako tekst na jasnym (5:1) i wypełnienie z białym tekstem (5,4:1) */
  --s-lod: #D8F4FF;             /* lodowa biel — iskry, najjaśniejsze punkty */
  --s-piasek: #D2C29A;          /* taktyczny piasek — akcent (jak limonka XTN), na wypełnieniu ciemny tusz */
  --s-piasek-tusz: #6E5F35;     /* piasek jako tekst na jasnym (5,6:1) */
  --s-wrog: #FF8A8A;            /* wróg / błąd na nocy */
  --s-wrog-tusz: #B3312F;       /* błąd na jasnym */

  /* gradient trio — WYŁĄCZNIE kreska (ramka, linia, płynący znak) */
  --s-trio: linear-gradient(90deg, var(--s-holo-2), var(--s-holo) 50%, var(--s-piasek));
  --s-poswiata: 0 0 0 1px rgba(108, 216, 255, 0.35), 0 0 28px -4px rgba(108, 216, 255, 0.55);

  --f-display: "Poppins", "Work Sans", system-ui, sans-serif;
  --f-tekst: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: var(--f-tekst);   /* bez kroju maszynowego — wszystkie etykiety zwykłym krojem */

  --t-mega: clamp(3.4rem, 1rem + 9.6vw, 11.5rem);
  --t-hero: clamp(2.5rem, 1rem + 4vw, 5.2rem);
  --t-h2: clamp(2rem, 1.2rem + 2.5vw, 3.6rem);
  --t-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.55rem);
  --t-lead: clamp(1.06rem, 1rem + 0.32vw, 1.25rem);
  --t-tekst: 1.0625rem;
  --t-maly: 0.9375rem;
  --t-etykieta: 0.78rem;

  --o-1: 4px; --o-2: 8px; --o-3: 12px; --o-4: 16px; --o-5: 24px;
  --o-6: 32px; --o-7: 48px; --o-8: 64px; --o-9: 96px; --o-10: 128px;
  --o-sekcja: clamp(88px, 4rem + 6vw, 168px);
  --o-margines: clamp(18px, 4.6vw, 64px);
  --szer-max: 1240px;

  --r-pigulka: 40px;
  --r-karta: 24px;
  --r-maly: 14px;

  --okno-wciecie: 24px;
  --okno-promien: 28px;
  --okno-odstep: 20px;

  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --e-mocny: cubic-bezier(0.76, 0, 0.24, 1);
  --d-szybko: 120ms;
  --d-srednio: 220ms;
  --d-wolno: 420ms;
  --d-zalanie: 620ms;

  --pasek-h: 68px;
  --fokus: var(--s-holo);
  /* szewrony (znak stopnia) w badge'ach */
  --sz1: #2E8FD0; --sz2: #6CD8FF; --sz3: #D2C29A;
}
@media (max-width: 991px) {
  :root { --okno-wciecie: 8px; --okno-promien: 20px; --okno-odstep: 10px; --pasek-h: 60px; }
}

/* =========================================================================
   2. BAZA (strona jest „nocna” — jasne pasma są wyjątkiem: [data-tema="papier"])
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--pasek-h) + 24px);
  overflow-x: clip;
  background: var(--s-noc);
  color-scheme: dark;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--s-noc);
  color: var(--s-tekst-noc);
  font-family: var(--f-tekst);
  font-size: var(--t-tekst);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
em, i, cite, dfn, address { font-style: normal; }
::selection { background: var(--s-piasek); color: var(--s-tusz); }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-style: normal;
  color: var(--s-bialy);
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}
h2 { font-size: var(--t-h2); line-height: 1.04; letter-spacing: -0.025em; }
h3 { font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.01em; font-weight: 600; }
h4 { font-size: 1.0625rem; line-height: 1.35; font-weight: 600; }
.s-em { font-weight: 600; }
.s-akcent { color: var(--s-piasek); }

/* display — zwężony Saira, wersaliki (plakat sztabowy) */
.s-display {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.s-display .s-akcent, .s-display .s-em { font-weight: 600; }

:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 6px; }
[data-tema="papier"] { --fokus: var(--s-holo-tusz); }

.s-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.s-skok {
  position: fixed; left: 16px; top: -80px; z-index: 1000;
  background: var(--s-piasek); color: var(--s-tusz); padding: 12px 18px; border-radius: var(--r-pigulka);
  font-weight: 600; transition: transform var(--d-srednio) var(--e-out);
}
.s-skok:focus { transform: translateY(96px); }

/* =========================================================================
   3. UKŁAD
   ========================================================================= */
.s-wrap { width: min(var(--szer-max), 100% - 2 * var(--o-margines)); margin-inline: auto; }
.s-wrap--waski { --szer-max: 900px; }
.s-sekcja { position: relative; padding-block: var(--o-sekcja); isolation: isolate; }

/* jasne pasmo — papier (okno wycięte z nocy) */
.s-sekcja[data-tema="papier"] {
  background: var(--s-papier-2);
  color: var(--s-tekst);
  color-scheme: light;
  margin: var(--okno-odstep) var(--okno-wciecie);
  border-radius: var(--okno-promien);
}
[data-tema="papier"] h1, [data-tema="papier"] h2, [data-tema="papier"] h3, [data-tema="papier"] h4 { color: var(--s-tusz); }
[data-tema="papier"] .s-akcent { color: var(--s-holo-tusz); }

/* ciemne okno — wcięcie, promień, poziomice mapy, poświata */
.s-okno {
  position: relative;
  isolation: isolate;
  overflow: clip;
  margin: var(--okno-odstep) var(--okno-wciecie);
  border-radius: var(--okno-promien);
  padding-block: var(--o-sekcja);
  background: var(--s-noc-2);
  border: 1px solid var(--s-linia-noc);
}
.s-okno::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: url(../img/kontury-ciemne.svg) center / cover no-repeat;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 85%);
  mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 85%);
}
.s-okno::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(700px 460px at 0% 0%, rgba(46, 143, 208, 0.26), transparent 70%),
    radial-gradient(560px 380px at 100% 100%, rgba(108, 216, 255, 0.07), transparent 70%);
}
.s-okno--radar::after {
  background:
    radial-gradient(700px 460px at 0% 0%, rgba(46, 143, 208, 0.26), transparent 70%),
    repeating-radial-gradient(circle at 88% 12%, transparent 0 87px, rgba(160, 220, 255, 0.06) 87px 88px),
    radial-gradient(560px 380px at 100% 100%, rgba(108, 216, 255, 0.07), transparent 70%);
}

/* =========================================================================
   4. NAGŁÓWEK SEKCJI — badge → tytuł 400/600 → podtytuł
   ========================================================================= */
.s-glowa { text-align: center; max-width: 980px; margin: 0 auto var(--o-8); display: grid; justify-items: center; gap: var(--o-5); }
.s-glowa h2 { max-width: 18ch; }
.s-glowa--lewo { text-align: left; justify-items: start; margin-inline: 0; }

.s-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 18px 9px 12px;
  border-radius: var(--r-pigulka);
  background: rgba(238, 247, 252, 0.05);
  border: 1px solid var(--s-linia-noc-mocna);
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--s-bialy);
  white-space: nowrap;
}
.s-badge svg { width: 22px; height: 22px; flex: none; }
[data-tema="papier"] .s-badge {
  --sz1: #1A6FA8; --sz2: #2E8FD0; --sz3: #6E5F35;
  background: var(--s-papier); border-color: var(--s-linia); color: var(--s-tusz);
  box-shadow: 0 10px 30px -14px rgba(7, 17, 26, 0.22);
}
.s-sub { max-width: 680px; font-size: 1.125rem; line-height: 1.6; color: var(--s-cichy-noc); }
[data-tema="papier"] .s-sub { color: var(--s-cichy); }

.s-etykieta {
  font-family: var(--f-tekst); font-size: 0.875rem; font-weight: 600;
  letter-spacing: 0; color: var(--s-cichy-noc);
}
[data-tema="papier"] .s-etykieta { color: var(--s-cichy); }
.s-znacznik { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c-noc, var(--s-holo)); flex: none; }
[data-tema="papier"] .s-znacznik { background: var(--c, var(--s-holo-tusz)); }
.s-nota { font-family: var(--f-tekst); font-size: 0.8125rem; letter-spacing: 0; color: var(--s-cichy-noc); }
[data-tema="papier"] .s-nota { color: var(--s-cichy); }

.c-holo { --c: var(--s-holo-tusz); --c-noc: var(--s-holo); --c-fill: var(--s-holo); --c-on: var(--s-tusz); --c-tint: rgba(108, 216, 255, 0.18); }
.c-lazur { --c: var(--s-holo-tusz); --c-noc: var(--s-holo-2); --c-fill: var(--s-holo-tusz); --c-on: #FFFFFF; --c-tint: rgba(46, 143, 208, 0.16); }
.c-piasek { --c: var(--s-piasek-tusz); --c-noc: var(--s-piasek); --c-fill: var(--s-piasek); --c-on: var(--s-tusz); --c-tint: rgba(210, 194, 154, 0.3); }

/* hierarchia czytania: to, co klient MA przeczytać, jest wyraźniejsze od dekoracji */
/* .s-lead = „to przeczytaj”: tekst w pełnym kontraście na podświetlonym pasie z jasną kreską prowadzącą.
   Jeden taki akapit na sekcję — wszystko inne (opisy kart, noty, makiety) jest cichsze. */
.s-lead {
  position: relative;
  font-size: var(--t-lead); line-height: 1.6; color: var(--s-bialy); max-width: 62ch;
  padding: 0.8em 1.1em 0.85em 1.25em;
  border-radius: 4px 18px 18px 4px;
  /* pochodne --s-holo (108,216,255) */
  background: linear-gradient(90deg, rgba(108, 216, 255, 0.14), rgba(108, 216, 255, 0.05) 58%, rgba(108, 216, 255, 0) 100%);
  text-wrap: pretty;
}
.s-lead::before {
  content: ""; position: absolute; left: 0; top: 0.75em; bottom: 0.75em; width: 2px; border-radius: 2px;
  background: var(--s-holo);
}
[data-tema="papier"] .s-lead {
  color: var(--s-tusz);
  /* pochodne --s-holo-2 (46,143,208) */
  background: linear-gradient(90deg, rgba(46, 143, 208, 0.13), rgba(46, 143, 208, 0.045) 58%, rgba(46, 143, 208, 0) 100%);
}
[data-tema="papier"] .s-lead::before { background: var(--s-holo-tusz); }
/* w wyśrodkowanym nagłówku pas świeci od środka, a kreska stoi nad tekstem */
.s-glowa:not(.s-glowa--lewo) > .s-lead {
  padding: 0.95em 1.2em 0.9em;
  border-radius: 18px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(108, 216, 255, 0.13), rgba(108, 216, 255, 0.04) 60%, rgba(108, 216, 255, 0) 100%);
}
[data-tema="papier"] .s-glowa:not(.s-glowa--lewo) > .s-lead {
  background: radial-gradient(50% 100% at 50% 0%, rgba(46, 143, 208, 0.14), rgba(46, 143, 208, 0.045) 60%, rgba(46, 143, 208, 0) 100%);
}
.s-glowa:not(.s-glowa--lewo) > .s-lead::before { left: 50%; top: 0; bottom: auto; width: 44px; height: 2px; transform: translateX(-50%); }
.s-wyroznij {
  color: var(--s-bialy); font-weight: 600;
  background: linear-gradient(transparent 62%, rgba(108, 216, 255, 0.28) 62%, rgba(108, 216, 255, 0.28) 92%, transparent 92%);
  box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 0.12em;
}
[data-tema="papier"] .s-wyroznij { color: var(--s-tusz); background: linear-gradient(transparent 60%, rgba(46, 143, 208, 0.22) 60%, rgba(46, 143, 208, 0.22) 92%, transparent 92%); }
.s-dekor { opacity: 0.55; }
@media (hover: hover) { .s-dekor:hover { opacity: 0.8; } }

/* tekst dzielony na linie/słowa/znaki (S.split) — maski pod wjazd od dołu */
.s-split-slowo { display: inline-block; white-space: nowrap; vertical-align: top; overflow: clip; padding: 0 0.03em 0.14em; margin: 0 -0.03em -0.14em; }
.s-split-in { display: inline-block; }
.s-split-znak { display: inline-block; }

/* =========================================================================
   5. PRZYCISKI — pigułka + pole strzałki (DNA XTN) + magnetyzm + zalanie od kursora
   ========================================================================= */
.s-btn {
  --btn-bg: var(--s-holo);
  --btn-tusz: var(--s-tusz);
  --btn-zalanie: var(--s-lod);
  --btn-tusz-zalanie: var(--s-tusz);
  --btn-pole: var(--s-piasek);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex; align-items: stretch;
  min-height: 58px;
  border-radius: var(--r-pigulka);
  background: var(--btn-bg);
  color: var(--btn-tusz);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  white-space: nowrap;
  transition: color var(--d-wolno) var(--e-out), box-shadow var(--d-wolno) var(--e-out);
}
.s-btn::before {
  content: ""; position: absolute; z-index: -1;
  left: var(--bx, 50%); top: var(--by, 50%);
  width: 260%; aspect-ratio: 1; border-radius: 50%;
  background: var(--btn-zalanie);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.6s var(--e-out);
}
.s-btn-tekst { display: flex; align-items: center; padding: 0 22px 0 28px; }
.s-btn-pole {
  display: grid; place-items: center;
  width: 62px; flex: none;
  background: var(--btn-pole);
  color: var(--s-tusz);
  border-radius: 0 var(--r-pigulka) var(--r-pigulka) 0;
  transition: background-color var(--d-wolno) var(--e-out), color var(--d-wolno) var(--e-out);
}
.s-btn-pole svg { width: 20px; height: 20px; transition: transform var(--d-wolno) var(--e-out); }
@media (hover: hover) {
  .s-btn:hover { color: var(--btn-tusz-zalanie); box-shadow: 0 0 36px -6px rgba(108, 216, 255, 0.6); }
  .s-btn:hover::before { transform: translate(-50%, -50%) scale(1); }
  .s-btn:hover .s-btn-pole { background: var(--s-tusz); color: var(--s-holo); }
  .s-btn:hover .s-btn-pole svg { transform: translateX(4px); }
}
.s-btn[disabled], .s-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.s-btn--maly { min-height: 46px; font-size: 0.9375rem; }
.s-btn--maly .s-btn-tekst { padding: 0 14px 0 20px; }
.s-btn--maly .s-btn-pole { width: 46px; }
.s-btn--pelny { width: 100%; justify-content: space-between; }

.s-btn-obrys {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  min-height: 58px; padding: 0 26px;
  border-radius: var(--r-pigulka);
  border: 1.5px solid var(--s-linia-noc-mocna);
  color: var(--s-bialy);
  font-weight: 600;
  white-space: nowrap;
  transition: border-color var(--d-srednio) var(--e-out), background-color var(--d-srednio) var(--e-out);
}
.s-btn-obrys svg { width: 18px; height: 18px; }
@media (hover: hover) { .s-btn-obrys:hover { border-color: var(--s-piasek); background: rgba(108, 216, 255, 0.08); } }
[data-tema="papier"] .s-btn-obrys { color: var(--s-tusz); border-color: var(--s-linia-mocna); }
@media (hover: hover) { [data-tema="papier"] .s-btn-obrys:hover { border-color: var(--s-tusz); background: var(--s-papier); } }

/* =========================================================================
   6. KAFLE, HUD, RAMKI, KARTY, REFLEKTOR, PRZECHYŁ 3D
   ========================================================================= */
.s-kafel {
  position: relative;
  border-radius: var(--r-karta);
  padding: clamp(22px, 1rem + 1.4vw, 36px);
  background: linear-gradient(180deg, rgba(238, 247, 252, 0.055), rgba(238, 247, 252, 0.02));
  border: 1px solid var(--s-linia-noc);
}
.s-kafel[class*="c-"]::before {
  content: ""; position: absolute; top: -1px; left: 28px;
  width: 64px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--c-noc);
}
.s-hud { position: relative; }
.s-hud::after {
  --hud: var(--s-linia-noc-mocna);
  --l: 16px; --w: 1.5px; --i: 12px;
  content: ""; position: absolute; inset: var(--i); pointer-events: none; z-index: 2;
  background:
    linear-gradient(var(--hud), var(--hud)) left top / var(--l) var(--w),
    linear-gradient(var(--hud), var(--hud)) left top / var(--w) var(--l),
    linear-gradient(var(--hud), var(--hud)) right top / var(--l) var(--w),
    linear-gradient(var(--hud), var(--hud)) right top / var(--w) var(--l),
    linear-gradient(var(--hud), var(--hud)) left bottom / var(--l) var(--w),
    linear-gradient(var(--hud), var(--hud)) left bottom / var(--w) var(--l),
    linear-gradient(var(--hud), var(--hud)) right bottom / var(--l) var(--w),
    linear-gradient(var(--hud), var(--hud)) right bottom / var(--w) var(--l);
  background-repeat: no-repeat;
}
.s-hud--piasek::after { --hud: var(--s-piasek); }
.s-hud--sojusz::after { --hud: var(--s-holo); }

.s-ramka-trio { position: relative; }
.s-ramka-trio::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 1;
  background: var(--s-trio);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* reflektor podążający za kursorem (S ustawia --mx/--my w px względem elementu) */
.s-spot { position: relative; isolation: isolate; }
.s-spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -40%), rgba(108, 216, 255, 0.12), transparent 60%);
  opacity: 0; transition: opacity var(--d-wolno) var(--e-out);
}
@media (hover: hover) { .s-spot:hover::after { opacity: 1; } }
.s-tilt { transform-style: preserve-3d; }

/* karta zalewana kolorem od ikony (jasne pasma) */
.s-karta {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--o-4);
  padding: clamp(22px, 1rem + 1.2vw, 32px);
  border-radius: var(--r-karta);
  background: var(--s-papier);
  border: 1px solid var(--s-linia);
  color: var(--s-tekst);
  transition: color var(--d-wolno) var(--e-out), border-color var(--d-wolno) var(--e-out);
}
.s-karta::after {
  content: ""; position: absolute; z-index: -1;
  left: calc(clamp(22px, 1rem + 1.2vw, 32px) + 28px);
  top: calc(clamp(22px, 1rem + 1.2vw, 32px) + 28px);
  width: 260%; aspect-ratio: 1; border-radius: 50%;
  background: var(--c-fill, var(--s-holo-tusz));
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--d-zalanie) var(--e-out);
}
.s-karta-ikona {
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--c-tint, rgba(85, 107, 47, 0.14));
  color: var(--c, var(--s-holo-tusz));
  transition: background-color var(--d-wolno) var(--e-out), color var(--d-wolno) var(--e-out), transform var(--d-wolno) var(--e-out);
}
.s-karta-ikona svg { width: 26px; height: 26px; }
.s-karta h3 { color: var(--s-tusz); transition: color var(--d-wolno) var(--e-out); }
.s-karta:is(:hover, .is-lit) { color: var(--c-on, #FFFFFF); border-color: transparent; }
.s-karta:is(:hover, .is-lit)::after { transform: translate(-50%, -50%) scale(1); }
.s-karta:is(:hover, .is-lit) h3, .s-karta:is(:hover, .is-lit) .s-etykieta { color: var(--c-on, #FFFFFF); }
.s-karta:is(:hover, .is-lit) .s-karta-ikona { background: rgba(255, 255, 255, 0.2); color: var(--c-on, #FFFFFF); transform: rotate(-6deg); }
@media (hover: none) { .s-karta:hover:not(.is-lit) { color: var(--s-tekst); } .s-karta:hover:not(.is-lit)::after { transform: translate(-50%, -50%) scale(0); } }

.s-ik { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; stroke-linejoin: miter; }

/* przedmioty z mgławicy (szewrony w manifeście, tarcza w arsenale): jedna warstwa nad treścią, rysuje tylko przy miejscu przedmiotu */
.s-mglawica { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 40; pointer-events: none; }
.s-obiekt { position: relative; width: clamp(200px, 24vw, 360px); aspect-ratio: 1; margin-inline: auto; pointer-events: none; }
.s-obiekt--duzy { width: clamp(240px, 32vw, 460px); }
.s-obiekt-pauza { right: 0; bottom: 0; }
@media (prefers-reduced-motion: reduce) { .s-mglawica, .s-obiekt-pauza { display: none !important; } .s-obiekt { display: none; } }

/* =========================================================================
   7. PAUZA (WCAG 2.2.2)
   ========================================================================= */
.s-pauza {
  position: absolute; z-index: 5;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(3, 7, 13, 0.72);
  border: 1px solid var(--s-linia-noc-mocna);
  color: var(--s-bialy);
  transition: border-color var(--d-srednio) var(--e-out);
}
.s-pauza::before, .s-pauza::after { content: ""; width: 4px; height: 14px; background: currentColor; border-radius: 1px; grid-area: 1 / 1; }
.s-pauza::before { transform: translateX(-4px); }
.s-pauza::after { transform: translateX(4px); }
.s-pauza[aria-pressed="true"]::before {
  width: 0; height: 0; background: none; border-radius: 0; transform: translateX(2px);
  border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent currentColor;
}
.s-pauza[aria-pressed="true"]::after { display: none; }
.s-pauza[hidden] { display: none; }
@media (hover: hover) { .s-pauza:hover { border-color: var(--s-piasek); } }

/* =========================================================================
   8. CHROME: pasek postępu, kursor-celownik, kurtyna przejść
   ========================================================================= */
.s-postep {
  position: fixed; inset: 0 0 auto; height: 2px; z-index: 300; pointer-events: none;
  background: var(--s-trio); transform-origin: 0 50%; transform: scaleX(0);
}
.s-celownik {
  position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none;
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  opacity: 0; transition: opacity 0.3s var(--e-out);
  mix-blend-mode: difference;
}
.s-celownik.is-on { opacity: 1; }
.s-celownik-ring {
  position: absolute; inset: 0; border: 1.5px solid #D8F4FF; border-radius: 50%;
  transition: transform 0.45s var(--e-out), border-radius 0.45s var(--e-out);
}
.s-celownik-ring::before, .s-celownik-ring::after { content: ""; position: absolute; background: #D8F4FF; }
.s-celownik-ring::before { left: 50%; top: -8px; height: 7px; width: 1.5px; margin-left: -0.75px; box-shadow: 0 46px 0 #D8F4FF; }
.s-celownik-ring::after { top: 50%; left: -8px; width: 7px; height: 1.5px; margin-top: -0.75px; box-shadow: 46px 0 0 #D8F4FF; }
.s-celownik.is-cel .s-celownik-ring { transform: scale(1.6) rotate(45deg); border-radius: 6px; }
.s-celownik-tekst {
  position: absolute; left: 40px; top: 34px; white-space: nowrap;
  font-family: var(--f-tekst); font-size: 0.75rem; font-weight: 600; color: #D8F4FF;
  opacity: 0; transform: translateY(4px); transition: opacity 0.3s var(--e-out), transform 0.3s var(--e-out);
}
.s-celownik.is-cel .s-celownik-tekst:not(:empty) { opacity: 1; transform: none; }
@media (hover: none), (pointer: coarse) { .s-celownik { display: none; } }

.s-kurtyna { position: fixed; inset: 0; z-index: 600; pointer-events: none; display: grid; grid-template-columns: repeat(6, 1fr); }
.s-kurtyna i { display: block; background: var(--s-noc-3); transform: scaleY(0); transform-origin: 50% 0; border-right: 1px solid var(--s-linia-noc); }
.s-kurtyna-znak { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; }
.s-kurtyna-znak svg { width: min(260px, 50vw); height: auto; }

/* =========================================================================
   9. PASEK MENU — pływająca pigułka; chowa się przy przewijaniu w dół
   ========================================================================= */
.s-pasek {
  position: fixed; inset: 0 0 auto; z-index: 100;
  padding: 14px var(--okno-wciecie) 0;
  pointer-events: none;
  transition: transform 0.6s var(--e-out);
}
.s-pasek.is-schowany { transform: translateY(calc(-100% - 20px)); }
.s-pasek-in {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--o-5);
  height: var(--pasek-h);
  padding: 0 11px 0 22px;
  border-radius: var(--okno-promien);
  background: rgba(7, 16, 26, 0.62);
  border: 1px solid var(--s-linia-noc);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  backdrop-filter: saturate(1.3) blur(14px);
  transition: background-color var(--d-wolno) var(--e-out), border-color var(--d-wolno) var(--e-out);
}
.s-logo { display: inline-flex; align-items: center; flex: none; padding: 6px 4px; border-radius: 8px; }
.s-logo svg { height: 24px; width: auto; }
.z-reszta { stroke: var(--s-bialy); transition: stroke var(--d-wolno) var(--e-out); }
.z-seo { stroke: var(--s-holo); transition: stroke var(--d-wolno) var(--e-out); }
.s-nav { margin-inline: auto; }
.s-nav ul { display: flex; gap: clamp(8px, 1.3vw, 26px); }
.s-nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px;
  font-size: 0.9375rem; font-weight: 500; color: var(--s-tekst-noc); white-space: nowrap;
  transition: color var(--d-srednio) var(--e-out);
}
.s-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; border-radius: 2px;
  background: var(--s-piasek); transform: scaleX(0); transform-origin: right;
  transition: transform var(--d-wolno) var(--e-out);
}
@media (hover: hover) { .s-nav a:hover { color: var(--s-bialy); } .s-nav a:hover::after { transform: scaleX(1); transform-origin: left; } }
.s-nav a[aria-current="true"] { color: var(--s-bialy); }
.s-nav a[aria-current="true"]::after { transform: scaleX(1); }
.s-pasek-akcje { display: flex; align-items: center; gap: var(--o-3); flex: none; }
.s-hamburger {
  display: none; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--s-piasek); color: var(--s-tusz);
}
.s-hamburger svg { width: 22px; height: 22px; }
/* nad jasnym pasmem pasek przechodzi w papier */
html.is-papier .s-pasek-in { background: rgba(255, 255, 255, 0.86); border-color: var(--s-linia); }
html.is-papier .s-nav a { color: var(--s-tekst); }
@media (hover: hover) { html.is-papier .s-nav a:hover { color: var(--s-tusz); } }
html.is-papier .s-nav a[aria-current="true"] { color: var(--s-tusz); }
html.is-papier .s-nav a::after { background: var(--s-holo-tusz); }
html.is-papier .s-logo .z-reszta { stroke: var(--s-tusz); }
html.is-papier .s-logo .z-seo { stroke: var(--s-holo-tusz); }
@media (max-width: 1099px) {
  .s-nav { display: none; }
  .s-hamburger { display: grid; }
  .s-pasek-akcje { margin-left: auto; }
}
@media (max-width: 560px) {
  .s-pasek { padding-top: 10px; }
  .s-pasek-in { padding: 0 7px 0 16px; }
  .s-pasek-akcje .s-btn { display: none; }
  .s-logo svg { height: 20px; }
}

/* przełącznik języka (wersje w podkatalogach, hreflang) */
.s-jezyki { position: relative; }
.s-jezyki summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px;
  border-radius: var(--r-pigulka); border: 1px solid var(--s-linia-noc-mocna); color: var(--s-bialy);
  font-family: var(--f-display); font-weight: 600; font-size: 0.875rem;
}
.s-jezyki summary::-webkit-details-marker { display: none; }
.s-jezyki summary svg { width: 17px; height: 17px; color: var(--s-holo); }
.s-jezyki ul {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 120; min-width: 200px; padding: 8px;
  border-radius: 18px; background: linear-gradient(160deg, rgba(20, 38, 58, 0.97), rgba(7, 16, 26, 0.96));
  border: 1px solid var(--s-linia-noc-mocna); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.9);
  animation: s-jezyki-wjazd 0.35s var(--e-out);
}
@keyframes s-jezyki-wjazd { from { opacity: 0; transform: translateY(-6px); } }
.s-jezyki a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 12px; color: var(--s-tekst-noc); font-size: 0.9375rem; }
.s-jezyki a b { font-family: var(--f-display); font-weight: 600; color: var(--s-holo); width: 26px; }
@media (hover: hover) { .s-jezyki a:hover { background: rgba(108, 216, 255, 0.08); color: var(--s-bialy); } }
.s-jezyki a[aria-current="true"] { background: rgba(108, 216, 255, 0.12); color: var(--s-bialy); }
html.is-papier .s-jezyki summary { color: var(--s-tusz); border-color: var(--s-linia); }

/* menu telefonu — rozwija się kołem od przycisku */
.s-menu {
  position: fixed; inset: 0; z-index: 200;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: 18px var(--o-margines) 28px;
  background: var(--s-noc);
  color: var(--s-bialy);
  clip-path: circle(0% at calc(100% - 46px) 44px);
  visibility: hidden;
  transition: clip-path 0.7s var(--e-mocny), visibility 0s linear 0.7s;
}
.s-menu::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url(../img/kontury-ciemne.svg) center / cover no-repeat; opacity: 0.9; }
.s-menu.is-open { clip-path: circle(150% at calc(100% - 46px) 44px); visibility: visible; transition: clip-path 0.8s var(--e-mocny); }
.s-menu[hidden] { display: none; }
.s-menu-gora { display: flex; justify-content: space-between; align-items: center; min-height: 56px; }
.s-menu-zamknij { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--s-linia-noc-mocna); }
.s-menu-zamknij svg { width: 20px; height: 20px; }
.s-menu nav { align-self: center; }
.s-menu nav ul { display: grid; gap: 2px; }
.s-menu nav a {
  display: flex; align-items: baseline; gap: 14px; padding: 8px 0;
  font-family: var(--f-display); font-weight: 500; letter-spacing: -0.03em;
  font-size: clamp(2rem, 1.2rem + 4.4vw, 3.2rem); line-height: 1.1; color: var(--s-bialy);
}
.s-menu.is-open nav li { animation: s-menu-wjazd 0.7s var(--e-out) both; animation-delay: calc(var(--i, 0) * 55ms + 220ms); }
@keyframes s-menu-wjazd { from { opacity: 0; transform: translateY(28px); } }
body.s-blokada { overflow: hidden; }

/* =========================================================================
   10. SEKWENCJA STARTOWA — rozruch systemu → znak → przesłona się rozsuwa
   ========================================================================= */
.s-start { position: fixed; inset: 0; z-index: 700; display: grid; place-items: center; color: var(--s-tekst-noc); }
.s-start-pol { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--s-noc); }
.s-start-pol--gora { top: 0; border-bottom: 1px solid var(--s-linia-noc-mocna); }
.s-start-pol--dol { bottom: 0; }
.s-start-tresc { position: relative; z-index: 2; width: min(560px, 100% - 40px); display: grid; gap: 28px; }
.s-start-znak { width: 100%; height: auto; }
/* znak i pasek rysuje CSS od pierwszej klatki — skrypt (ładuje się ok. 2 s) tylko rozsuwa przesłonę, gdy wszystko gotowe */
.s-start-znak path { stroke-dasharray: 120; stroke-dashoffset: 120; animation: s-start-rysuj 0.9s cubic-bezier(0.45, 0, 0.55, 1) forwards; animation-delay: calc(0.15s + var(--n, 0) * 0.045s); }
.s-start-znak g:last-child path { --n: 4; }
.s-start-znak g path:nth-child(2) { --n: 1; } .s-start-znak g path:nth-child(3) { --n: 2; } .s-start-znak g path:nth-child(4) { --n: 3; }
.s-start-znak g:last-child path:nth-child(1) { --n: 4; } .s-start-znak g:last-child path:nth-child(2) { --n: 5; } .s-start-znak g:last-child path:nth-child(3) { --n: 6; }
.s-start-znak g:last-child path:nth-child(4) { --n: 7; } .s-start-znak g:last-child path:nth-child(5) { --n: 8; } .s-start-znak g:last-child path:nth-child(6) { --n: 9; }
.s-start-znak g:last-child path:nth-child(n+7) { --n: 10; }
.s-start-pasek { height: 2px; background: var(--s-linia-noc); overflow: hidden; }
.s-start-pasek i { display: block; height: 100%; background: var(--s-trio); transform-origin: 0 50%; transform: scaleX(0); animation: s-start-pasek 1.3s cubic-bezier(0.45, 0, 0.55, 1) 0.05s forwards; }
@keyframes s-start-rysuj { to { stroke-dashoffset: 0; } }
@keyframes s-start-pasek { to { transform: scaleX(1); } }
/* kolejne wejście w tej samej sesji: znak od razu, pasek krótko */
html.s-start-znany .s-start-znak path { animation: none; stroke-dashoffset: 0; }
html.s-start-znany .s-start-pasek i { animation-duration: 0.45s; }
/* wejście po kurtynie z innej strony: żadnego ekranu startowego — od pierwszej klatki stoi zamknięta kurtyna ze znakiem */
html.s-po-kurtynie .s-start { display: none; }
html.s-po-kurtynie .s-kurtyna i { transform: scaleY(1); }
html.s-po-kurtynie .s-kurtyna-znak { opacity: 1; }
html.s-po-kurtynie .s-kurtyna { animation: s-start-awaryjnie 0.5s var(--e-out) 6s forwards; }   /* awaryjnie, gdyby skrypt nie ruszył */
.s-start-pomin {
  position: absolute; right: 20px; bottom: 20px; z-index: 3;
  font-family: var(--f-tekst); font-size: 0.875rem; font-weight: 500;
  min-height: 44px; padding: 0 18px; border-radius: var(--r-pigulka); border: 1px solid var(--s-linia-noc-mocna); color: var(--s-tekst-noc);
}
/* bez JS sekwencja znika sama */
.s-start { animation: s-start-awaryjnie 0.5s var(--e-out) 3.2s forwards; }
html.s-js .s-start { animation: s-start-awaryjnie 0.5s var(--e-out) 8s forwards; }   /* awaryjnie, gdyby skrypt nie ruszył */
@keyframes s-start-awaryjnie { to { opacity: 0; visibility: hidden; } }
.s-start.is-done { display: none; }
.s-podglad .s-start { display: none; }

/* =========================================================================
   11. HERO — stół operacyjny WebGL na całym ekranie
   ========================================================================= */
.s-hero {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: grid; align-items: center;
  padding: calc(var(--pasek-h) + 40px) 0 clamp(40px, 6vh, 72px);
  overflow: clip;
  background: var(--s-noc);
}
.s-hero-scena { position: absolute; inset: 0; z-index: -2; }
.s-hero-scena canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.s-hero-scena-zapas { position: absolute; inset: 0; background: url(../img/kontury-ciemne.svg) 70% 40% / 140% auto no-repeat; }
/* oddzielenie tekstu od ruchu: ciemne pole po lewej i u dołu (nie cień na tekście) */
.s-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 7, 13, 0.94) 0%, rgba(3, 7, 13, 0.8) 30%, rgba(3, 7, 13, 0) 58%),
    linear-gradient(0deg, rgba(3, 7, 13, 0.96) 0%, rgba(3, 7, 13, 0) 36%),
    linear-gradient(180deg, rgba(3, 7, 13, 0.72) 0%, rgba(3, 7, 13, 0) 22%);
}
/* objaśnienia: od punktu na żołnierzu rysuje się linia do szklanej karty (pozycje liczy scena 3D) */

/* etykiety stołu operacyjnego 3D (S.stolOperacyjny) — dowolna sekcja: [data-punkt] w korzeniu */
.s-mapa3d-etykieta {
  position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none;
  display: grid; gap: 2px;
  padding: 8px 12px 8px 12px;
  border: 1px solid rgba(210, 194, 154, 0.3);
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(20, 38, 58, 0.86), rgba(7, 16, 26, 0.8));
  font-family: var(--f-display); font-size: 0.8125rem; font-weight: 600; color: var(--s-piasek);
  white-space: nowrap; opacity: 0; transition: opacity 0.6s var(--e-out);
}
.s-mapa3d-etykieta.is-on { opacity: 1; }
.s-mapa3d-etykieta span { font-family: var(--f-tekst); font-weight: 400; font-size: 0.8125rem; color: var(--s-bialy); }
.s-mapa3d-etykieta b { color: var(--s-holo); font-weight: 600; opacity: 0; transition: opacity 0.5s var(--e-out); }
.s-mapa3d-etykieta.is-zajety b { opacity: 1; }
.s-mapa3d-etykieta--baza { border-color: var(--s-holo); color: var(--s-holo); }

/* ramka HUD na krawędziach ekranu */
.s-hero-hud { position: absolute; inset: calc(var(--pasek-h) + 30px) var(--o-margines) 18px; z-index: 1; pointer-events: none; }
.s-hero-hud > i { position: absolute; width: 22px; height: 22px; border: 0 solid var(--s-linia-noc-mocna); }
.s-hero-hud > i:nth-child(1) { left: 0; top: 0; border-left-width: 1.5px; border-top-width: 1.5px; }
.s-hero-hud > i:nth-child(2) { right: 0; top: 0; border-right-width: 1.5px; border-top-width: 1.5px; }
.s-hero-hud > i:nth-child(3) { left: 0; bottom: 0; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.s-hero-hud > i:nth-child(4) { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.s-hero-tresc { position: relative; z-index: 2; display: grid; gap: clamp(20px, 2.6vh, 32px); justify-items: start; }
.s-hero h1 { font-size: var(--t-hero); color: var(--s-bialy); max-width: 12.5ch; }
.s-hero h1 .s-akcent { display: block; font-weight: 600; }
.s-hero-dol { display: grid; gap: 26px; justify-items: start; max-width: 600px; }
.s-hero-lead { font-size: var(--t-lead); line-height: 1.62; color: var(--s-tekst-noc); max-width: 54ch; }
.s-hero-akcje { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }
.s-hero-przewin {
  position: absolute; right: calc(var(--o-margines) + 8px); bottom: clamp(36px, 6vh, 72px); z-index: 2;
  width: 26px; height: 42px; border-radius: 14px; border: 1.5px solid var(--s-linia-noc-mocna);
}
.s-hero-przewin::after { content: ""; position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: var(--s-holo); animation: s-kolko 2s var(--e-in-out) 4; }
@keyframes s-kolko { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
.s-hero .s-pauza { right: calc(var(--o-margines) + 12px); top: calc(var(--pasek-h) + 54px); }
@media (max-width: 991px) {
  .s-hero::before {
    background:
      linear-gradient(0deg, rgba(3, 7, 13, 0.97) 0%, rgba(3, 7, 13, 0.88) 48%, rgba(3, 7, 13, 0) 76%),
      linear-gradient(180deg, rgba(3, 7, 13, 0.7) 0%, rgba(3, 7, 13, 0) 20%);
  }
  .s-hero-dol { grid-template-columns: minmax(0, 1fr); }
  .s-hero-przewin { display: none; }
}
@media (max-width: 767px) {
  .s-hero { padding-top: calc(var(--pasek-h) + 46svh); }
  .s-hero::before {
    background:
      linear-gradient(0deg, rgba(3, 7, 13, 0.97) 0%, rgba(3, 7, 13, 0.9) 52%, rgba(3, 7, 13, 0) 66%),
      linear-gradient(180deg, rgba(3, 7, 13, 0.6) 0%, rgba(3, 7, 13, 0) 14%);
  }
  .s-hero .s-pauza { top: calc(var(--pasek-h) + 24px); }
}
@media (max-width: 560px) {
  .s-hero-hud { display: none; }
  .s-hero-akcje, .s-hero-akcje .s-btn, .s-hero-akcje .s-btn-obrys { width: 100%; }
  .s-hero-akcje .s-btn { justify-content: space-between; }
  .s-hero-akcje .s-btn-obrys { justify-content: center; }
}

/* =========================================================================
   12. STOPKA — znak rysowany przy dojeździe + płynąca kreska trio
   ========================================================================= */
.s-stopka {
  position: relative; isolation: isolate; overflow: clip;
  background: var(--s-noc);
  color: var(--s-tekst-noc);
  padding: clamp(80px, 3rem + 6vw, 150px) 0 28px;
}
.s-stopka::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(../img/kontury-ciemne.svg) center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%);
  mask-image: linear-gradient(180deg, #000, transparent 70%);
}
.s-lockup-wrap { display: flex; justify-content: center; position: relative; }
.s-lockup { display: inline-grid; justify-items: stretch; gap: clamp(14px, 1.6vw, 24px); }
.s-lockup-znak { width: 100%; height: auto; overflow: visible; }
.s-lockup-haslo {
  font-family: var(--f-display); font-weight: 400;
  color: var(--s-bialy);
  font-size: min(5.6rem, 7.2vw); line-height: 1; letter-spacing: -0.04em; white-space: nowrap;
  text-align: center;
}
.s-lockup-haslo .s-akcent { color: var(--s-piasek); font-weight: 600; }
.s-znak-plyn { animation: s-plyn 14s linear infinite; }
.s-stopka.is-paused .s-znak-plyn { animation-play-state: paused; }
@keyframes s-plyn { to { transform: translateX(-180px); } }
.s-lockup-pauza { right: 0; top: 0; }
@media (max-width: 767px) { .s-lockup-pauza { position: relative; margin: 20px auto 0; } .s-lockup-wrap { flex-direction: column; align-items: center; } }

.s-stopka-siatka {
  display: grid; gap: var(--o-4);
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
  margin-top: clamp(56px, 3rem + 3vw, 104px);
}
.s-stopka-firma { display: grid; gap: var(--o-4); align-content: start; padding: 26px 26px 26px 0; }
.s-stopka-firma > svg { height: 24px; width: auto; }
.s-stopka-firma p { font-size: var(--t-maly); line-height: 1.6; color: var(--s-cichy-noc); }
.s-stopka-firma p a { text-decoration: underline; text-underline-offset: 3px; }
.s-dane { display: grid; gap: 2px; font-size: 0.875rem; color: var(--s-cichy-noc); font-variant-numeric: tabular-nums; }
.s-dane b { font-weight: 600; color: var(--s-tekst-noc); }
.s-stopka-panel {
  border-radius: var(--r-karta); padding: 26px;
  background: rgba(238, 247, 252, 0.035);
  border: 1px solid var(--s-linia-noc);
  border-top: 3px solid var(--c-noc);
}
.s-stopka-panel h3 { font-family: var(--f-display); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; color: var(--c-noc); margin-bottom: 14px; }
.s-stopka-panel ul { display: grid; gap: 2px; }
.s-stopka-panel a { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; color: var(--s-tekst-noc); font-size: var(--t-maly); white-space: nowrap; }
.s-stopka-panel a::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--c-noc); flex: none; }
.s-stopka-panel a span { background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size var(--d-wolno) var(--e-out); }
@media (hover: hover) { .s-stopka-panel a:hover { color: var(--s-bialy); } .s-stopka-panel a:hover span { background-size: 100% 1px; } }
.s-mail-pigulka { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; margin-top: 10px; border-radius: var(--r-pigulka); background: var(--c-noc); color: var(--s-tusz) !important; font-weight: 600; font-size: var(--t-maly); }
.s-mail-pigulka::before { display: none !important; }
.s-stopka-dol { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: var(--o-7); padding-top: 22px; padding-right: 64px; font-size: 0.875rem; color: var(--s-cichy-noc); }   /* prawy zapas: przycisk „na górę” */
.s-stopka-dol ul { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.s-stopka-dol a { display: inline-flex; min-height: 32px; align-items: center; }
@media (hover: hover) { .s-stopka-dol a:hover { color: var(--s-bialy); } }
@media (max-width: 991px) { .s-stopka-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); } .s-stopka-firma { grid-column: 1 / -1; padding-right: 0; } }
@media (max-width: 560px) { .s-stopka-siatka { grid-template-columns: minmax(0, 1fr); } }

.s-gora {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--s-noc-3); color: var(--s-piasek);
  border: 1px solid var(--s-linia-noc-mocna);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity var(--d-wolno) var(--e-out), transform var(--d-wolno) var(--e-out);
}
.s-gora svg { width: 20px; height: 20px; }
.s-gora.is-on { opacity: 1; transform: none; pointer-events: auto; }
.s-gora-licznik { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); transform: rotate(-90deg); pointer-events: none; }
.s-gora-licznik circle { fill: none; stroke: var(--s-piasek); stroke-width: 1.5; stroke-dasharray: 160; stroke-dashoffset: calc(160 - 160 * var(--p, 0)); }

/* =========================================================================
   13. OGRANICZONY RUCH
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .s-start, .s-celownik, .s-kurtyna { display: none !important; }
  .s-znak-plyn { animation: none !important; }
}

.s-podglad-odstep { height: 70vh; }


/* ===== sekcja: manifest ===== */
/* MANIFEST — noc pełnej szerokości zaraz pod hero. Scena przypięta (JS): słowa tezy zapalają się po kolei,
   pierwsze zdanie przygasa, kluczowe zdanie dostaje świetlne podkreślenie, na końcu wjeżdża akapit wiodący.
   Po prawej (na telefonie pod tekstem) miejsce na przedmiot z mgławicy — drobiny składają się tam w szewrony.
   Ścieżka czytania: teza → akapit wiodący. Bez JS / przy ograniczonym ruchu: wszystko widoczne, stan końcowy. */

#manifest { padding-block: 0; }

.s-man-scena {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: calc(var(--pasek-h) + 20px) 0 clamp(22px, 3.4svh, 40px);
}

/* ---------- tło: tylko miękka poświata, bez siatek i napisów ---------- */
.s-man-tlo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.s-man-tlo::before {
  /* pochodne --s-holo-2 (46,143,208) i --s-holo (108,216,255) */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 40% at 30% 0%, rgba(108, 216, 255, 0.05), transparent 70%);
}

/* ---------- układ ---------- */
.s-man-uklad {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 3svh, 32px);
  align-items: center;
}
.s-man-tekst { min-width: 0; }

/* teza — Poppins 400, kluczowe zdanie 600 z podkreśleniem świetlnym */
.s-man-teza {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.6rem, min(7.2vw, 3.7svh), 2rem);
  line-height: 1.12;
  letter-spacing: -0.022em;
  color: var(--s-bialy);
  overflow-wrap: normal;
}
.s-man-zd { display: block; text-wrap: balance; }
.s-man-zd + .s-man-zd { margin-top: 0.14em; }
.s-man-teza .s-em { font-weight: 600; }
/* podkreślenie świetlne kluczowego zdania (.s-wyroznij z bazy) — JS rysuje je od lewej przez --wyr */
.s-man-teza .s-man-wyr {
  background-size: calc(var(--wyr, 1) * 100%) 100%;
  background-repeat: no-repeat;
  padding: 0 0.06em;
  margin: 0 -0.06em;
}
.s-man-w { display: inline-block; white-space: nowrap; }

/* akapit wiodący — to klient ma przeczytać po tezie */
.s-man-lead {
  /* podświetlony pas .s-lead z bazy — to klient ma przeczytać po tezie */
  margin-top: clamp(18px, 3svh, 32px);
  max-width: 54ch;
}

/* ---------- miejsce na przedmiot z mgławicy ---------- */
.s-man-miejsce {
  position: relative; min-width: 0;
  display: grid; place-items: center;
}
.s-man-miejsce .s-obiekt { width: min(100%, 52vw, 20svh); }
.s-man-miejsce::before {
  /* scena pod przedmiotem — pochodna --s-holo-2 (46,143,208) */
  content: ""; position: absolute; left: 50%; top: 50%;
  width: min(100%, 120vw, 44svh); aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(46, 143, 208, 0.14), rgba(46, 143, 208, 0.045) 56%, transparent);
  pointer-events: none;
}

/* ---------- tablet ---------- */
@media (min-width: 640px) {
  .s-man-scena { padding: calc(var(--pasek-h) + 36px) 0 clamp(30px, 5svh, 56px); }
  .s-man-teza { font-size: clamp(2rem, min(5vw, 4.2svh), 2.7rem); }
  .s-man-miejsce .s-obiekt { width: min(100%, 44vw, 28svh); }
}

/* ---------- desktop: teza i akapit po lewej, przedmiot po prawej ---------- */
@media (min-width: 992px) {
  .s-man-scena { padding: calc(var(--pasek-h) + clamp(20px, 4svh, 44px)) 0 clamp(24px, 4svh, 48px); }
  .s-man-tlo::before { background: radial-gradient(40% 40% at 20% 36%, rgba(108, 216, 255, 0.045), transparent 70%); }
  .s-man-uklad {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    column-gap: clamp(40px, 5vw, 88px);
  }
  .s-man-teza { font-size: clamp(2.2rem, min(3.5vw, 5.4svh), 3.7rem); line-height: 1.08; letter-spacing: -0.028em; }
  .s-man-lead { max-width: 52ch; }
  .s-man-miejsce .s-obiekt { width: min(100%, 32vw, 460px, 58svh); }
  .s-man-miejsce::before { width: min(118%, 560px, 70svh); }
  .s-man-lead { font-size: clamp(1.125rem, 0.95rem + 0.4vw, 1.3125rem); }
}
@media (min-width: 1600px) {
  .s-man-uklad { --szer-max: 1420px; }
}
/* bez ruchu mgławica się nie rysuje (baza chowa .s-obiekt) — chowamy też jego scenę */
@media (prefers-reduced-motion: reduce) { .s-man-miejsce { display: none; } }


/* ===== sekcja: raport ===== */
/* RAPORT Z POLA (prefiks s-rap-) — papier.
 * Nagłówek dzielony: po lewej badge + tytuł, po prawej akapit wiodący i miejsce na przedmiot z mgławicy.
 * 4 karty 3D: awers „Przyczyna porażki” → rewers „Odpowiedź SEOLDIER” (holo-noc).
 * Tryby (klasy korzenia ustawia JS):
 *   brak klasy          — bez JS / ograniczony ruch: awers i rewers jeden pod drugim (wszystko widać)
 *   .is-3d.is-przypiety — desktop: scena przypięta, karty obracają się kolejno przy przewijaniu
 *   .is-3d.is-klik      — telefon/tablet: karta odwraca się po dotknięciu (button aria-pressed)
 * Na końcu: dwie skrzyżowane taśmy reagujące na prędkość przewijania. */

#raport { padding-bottom: clamp(20px, 0.6rem + 2vw, 48px); }

/* ---------- tło: delikatna siatka mapy sztabowej (dekoracja, z dala od tekstu) ---------- */
#raport .s-rap-tlo {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; overflow: hidden;
}
#raport .s-rap-tlo::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--s-linia) 1px, transparent 1px),
    linear-gradient(90deg, var(--s-linia) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: 50% 0;
  opacity: 0.32;
  -webkit-mask-image: radial-gradient(60% 40% at 50% 62%, #000 0%, transparent 80%);
  mask-image: radial-gradient(60% 40% at 50% 62%, #000 0%, transparent 80%);
}

/* ---------- nagłówek dzielony 7/12 + 5/12 ---------- */
#raport .s-rap-glowa {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--o-5); row-gap: var(--o-5);
  align-items: start;
  margin-bottom: clamp(40px, 1.6rem + 2.6vw, 72px);
}
#raport .s-rap-glowa-l { grid-column: 1 / span 7; display: grid; justify-items: start; gap: var(--o-5); }
#raport .s-rap-glowa-l h2 { max-width: 15ch; }
#raport .s-rap-glowa-p {
  grid-column: 8 / -1; display: grid; justify-items: start; gap: clamp(18px, 0.8rem + 1vw, 30px);
  /* akapit startuje na wysokości tytułu, nie badge */
  padding-top: calc(45px + var(--o-5) + 4px);
}
#raport .s-rap-glowa-p .s-lead { max-width: 40ch; }
@media (max-width: 991px) {
  #raport .s-rap-glowa { grid-template-columns: minmax(0, 1fr); }
  #raport .s-rap-glowa-l, #raport .s-rap-glowa-p { grid-column: 1 / -1; }
  #raport .s-rap-glowa-p { padding-top: 0; }
  #raport .s-rap-glowa-p .s-lead { max-width: 56ch; }
}

/* ---------- pasek nad kartami: legenda + wskazówka, jak czytać ---------- */
#raport .s-rap-scena { position: relative; }
#raport .s-rap-pasek {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  margin-bottom: var(--o-5); padding-bottom: 16px;
  border-bottom: 1px solid var(--s-linia);
}
#raport .s-rap-legenda { display: flex; flex-wrap: wrap; gap: 8px 28px; }
#raport .s-rap-legenda li {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  font-size: var(--t-maly); font-weight: 500; color: var(--s-cichy);
}
#raport .s-rap-legenda svg { width: 18px; height: 18px; flex: none; }
#raport.is-przypiety .s-rap-pasek { margin-bottom: 40px; }
#raport .s-rap-romb { display: inline-block; width: 9px; height: 9px; flex: none; background: var(--s-wrog-tusz); transform: rotate(45deg); }
/* wskazówka, jak czytać karty — informacja, nie przycisk: bez obrysu i cienia */
#raport .s-rap-wskazowka {
  display: none; align-items: center; gap: 10px;
  padding: 7px 14px 7px 8px; border-radius: 20px;
  background: rgba(26, 111, 168, 0.08); /* --s-holo-tusz */
  line-height: 1.35;
  font-family: var(--f-display); font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.005em; color: var(--s-tusz);
}
#raport .s-rap-wskazowka svg {
  width: 26px; height: 26px; padding: 5px; flex: none; border-radius: 50%;
  background: var(--s-holo-tusz); color: #FFFFFF;
}
#raport.is-3d .s-rap-wskazowka { display: inline-flex; }

/* ---------- talia kart ---------- */
#raport .s-rap-stol { position: relative; }
#raport .s-rap-talia {
  display: grid; gap: var(--o-6) var(--o-4);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: auto;
}
#raport.is-3d .s-rap-talia { row-gap: var(--o-4); }
@media (max-width: 991px) { #raport .s-rap-talia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { #raport .s-rap-talia { grid-template-columns: minmax(0, 1fr); } }

/* tryb statyczny (bez JS / ograniczony ruch): awers nad rewersem, rzędy wyrównane przez subgrid */
#raport .s-rap-karta {
  position: relative; min-width: 0;
  display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: var(--o-3);
}
#raport .s-rap-uchwyt, #raport .s-rap-obrot { display: contents; }

/* tryb 3D: obie strony w jednej komórce, rewers obrócony */
#raport.is-3d .s-rap-karta { grid-row: auto; grid-template-rows: none; perspective: 1500px; }
#raport.is-3d .s-rap-uchwyt { display: grid; position: relative; transform-style: preserve-3d; }
#raport.is-3d .s-rap-obrot { display: grid; transform-style: preserve-3d; }
#raport.is-3d .s-rap-strona { grid-area: 1 / 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
#raport.is-3d .s-rap-rewers { transform: rotateY(180deg); }
#raport.is-klik .s-rap-obrot { transition: transform 0.95s var(--e-out); }
#raport.is-klik .s-rap-karta.is-odwrocona .s-rap-obrot { transform: rotateY(180deg); }

/* ---------- strona karty (wspólne) ---------- */
#raport .s-rap-strona {
  position: relative; overflow: hidden; min-width: 0; isolation: isolate;
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(20px, 0.85rem + 0.7vw, 28px);
  border-radius: var(--r-karta);
}
#raport .s-rap-strona h3 {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.2rem, 1rem + 0.5vw, 1.45rem); line-height: 1.18; letter-spacing: -0.015em;
  margin-top: 2px;
}
#raport .s-rap-opis { font-size: 1rem; line-height: 1.6; }
#raport .s-rap-gora {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.875rem; font-weight: 600; line-height: 1.2;
  white-space: nowrap;
}
#raport .s-rap-gora svg { width: 18px; height: 18px; flex: none; }
#raport .s-rap-dol {
  display: none;
  margin-top: auto; padding-top: 8px;
  font-family: var(--f-display); font-size: 0.875rem; font-weight: 600;
}
#raport .s-rap-podp { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
#raport .s-rap-podp svg { width: 16px; height: 16px; transition: transform var(--d-srednio) var(--e-out); }
#raport.is-klik .s-rap-dol { display: flex; }
@media (hover: hover) { #raport.is-klik .s-rap-karta:hover .s-rap-podp svg { transform: translateX(4px); } }

/* ekran z ilustracją (monolinia 1.8, kanciaste zakończenia) — mała, cicha mini-ilustracja */
#raport .s-rap-ekran { border-radius: var(--r-maly); padding: 10px 12px 8px; }
#raport .s-rap-ilu {
  width: 100%; height: auto; aspect-ratio: 240 / 84; overflow: visible;
  fill: none; stroke-width: 1.8; stroke-linecap: square; stroke-linejoin: miter;
}
#raport .s-rap-ilu path, #raport .s-rap-ilu circle, #raport .s-rap-ilu rect { vector-effect: non-scaling-stroke; }
#raport .s-rap-ilu .kreska { stroke-dasharray: 3 5; }
#raport .s-rap-ilu .s-rap-gruby { stroke-width: 3; }
#raport .s-rap-ilu .l-wrog { stroke: var(--s-wrog-tusz); }
#raport .s-rap-ilu .l-szary { stroke: var(--s-linia-mocna); }
#raport .s-rap-ilu .l-cichy { stroke: var(--s-cichy); }
#raport .s-rap-ilu .l-holo { stroke: var(--s-holo); }
#raport .s-rap-ilu .l-lazur { stroke: var(--s-holo-2); }
#raport .s-rap-ilu .l-piasek { stroke: var(--s-piasek); }
#raport .s-rap-ilu .l-lod { stroke: var(--s-lod); }
#raport .s-rap-ilu .f-holo { fill: var(--s-holo); stroke: none; }
#raport .s-rap-ilu .f-piasek { fill: var(--s-piasek); stroke: none; }
#raport .s-rap-ilu .f-tint { fill: rgba(210, 194, 154, 0.16); } /* --s-piasek */
#raport .s-rap-ilu .t-duzy { stroke: none; font-family: var(--f-display); font-size: 17px; font-weight: 600; }
#raport .s-rap-ilu .t-wrog { fill: var(--s-wrog-tusz); }

/* ---------- awers: przyczyna porażki (jasna karta z kreskowaniem „teczki”) ---------- */
#raport .s-rap-awers {
  background: var(--s-papier);
  border: 1px solid var(--s-linia);
  color: var(--s-tekst);
  box-shadow: 0 22px 44px -30px rgba(7, 17, 26, 0.4); /* --s-tusz */
}
#raport .s-rap-awers::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; pointer-events: none;
  background: repeating-linear-gradient(-45deg, var(--s-wrog-tusz) 0 6px, transparent 6px 12px);
  opacity: 0.45;
}
#raport .s-rap-awers h3 { color: var(--s-tusz); }
#raport .s-rap-awers .s-rap-opis { color: var(--s-tekst); }
#raport .s-rap-awers .s-rap-gora { color: var(--s-wrog-tusz); }
#raport .s-rap-awers .s-rap-ekran { background: var(--s-papier-2); border: 1px solid var(--s-linia); }
#raport .s-rap-awers .s-rap-ilu { opacity: 0.8; }
#raport .s-rap-awers .s-rap-podp { color: var(--s-tusz); }
#raport .s-rap-skutek {
  display: grid; gap: 4px;
  margin-top: auto; padding: 12px 14px; border-radius: var(--r-maly);
  background: rgba(179, 49, 47, 0.06); /* --s-wrog-tusz */
  border-left: 3px solid var(--s-wrog-tusz);
  font-size: 0.9375rem; line-height: 1.45; color: var(--s-tusz);
}
#raport .s-rap-skutek b { font-family: var(--f-display); font-size: 0.8125rem; font-weight: 600; color: var(--s-wrog-tusz); }
#raport.is-klik .s-rap-awers .s-rap-dol { margin-top: 0; }

/* ---------- rewers: odpowiedź SEOLDIER (panel hologramu) ---------- */
#raport .s-rap-rewers {
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(46, 143, 208, 0.3), transparent 62%),       /* --s-holo-2 */
    radial-gradient(90% 60% at 100% 100%, rgba(108, 216, 255, 0.08), transparent 70%),  /* --s-holo */
    var(--s-noc-2);
  border: 1px solid rgba(108, 216, 255, 0.3); /* --s-holo */
  color: var(--s-tekst-noc);
  box-shadow: 0 26px 50px -26px rgba(3, 7, 13, 0.6); /* --s-noc */
}
#raport .s-rap-rewers h3 { color: var(--s-bialy); }
#raport .s-rap-rewers .s-rap-opis { color: var(--s-tekst-noc); }
#raport .s-rap-rewers .s-rap-gora { color: var(--s-holo); }
#raport .s-rap-rewers .s-rap-ekran { background: rgba(3, 7, 13, 0.45); border: 1px solid rgba(108, 216, 255, 0.14); } /* --s-noc / --s-holo */
#raport .s-rap-rewers .s-rap-ilu { opacity: 0.78; }
#raport .s-rap-rewers .s-rap-podp { color: var(--s-holo); }
#raport .s-rap-termin { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 0.875rem; line-height: 1.4; color: var(--s-cichy-noc); }
#raport .s-rap-termin b {
  font-family: var(--f-display); font-size: 0.8125rem; font-weight: 600;
  color: var(--s-tusz); background: var(--s-piasek); padding: 4px 10px; border-radius: var(--r-pigulka); white-space: nowrap;
}
#raport .s-rap-wkrotce {
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto;
  font-size: 0.875rem; font-weight: 500; color: var(--s-piasek);
}
#raport .s-rap-wkrotce::before { content: ""; width: 7px; height: 7px; flex: none; border: 1.5px solid currentColor; transform: rotate(45deg); }
#raport.is-klik .s-rap-wkrotce { margin-top: 0; }
#raport.is-klik .s-rap-rewers .s-rap-dol { margin-top: auto; }

/* skan (awers) i błysk (rewers) — tylko transform/opacity */
#raport .s-rap-skan, #raport .s-rap-blysk { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 2; }
#raport .s-rap-skan {
  display: none;
  background: linear-gradient(180deg, transparent 0%, rgba(26, 111, 168, 0) 52%, rgba(26, 111, 168, 0.12) 94%, rgba(26, 111, 168, 0.6) 99%, transparent 100%); /* --s-holo-tusz */
  transform: translateY(-101%);
}
#raport .s-rap-blysk {
  display: none;
  background: linear-gradient(105deg, transparent 32%, rgba(216, 244, 255, 0.16) 48%, transparent 64%); /* --s-lod */
  transform: translateX(-101%);
}
#raport.is-przypiety .s-rap-skan, #raport.is-przypiety .s-rap-blysk { display: block; }

/* reflektor za kursorem (tylko urządzenia z myszą, tryb 3D) */
#raport .s-rap-awers::after, #raport .s-rap-rewers::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  opacity: 0; transition: opacity var(--d-wolno) var(--e-out);
}
#raport .s-rap-awers::after { background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(108, 216, 255, 0.14), transparent 62%); } /* --s-holo */
#raport .s-rap-rewers::after { background: radial-gradient(280px circle at calc(100% - var(--mx, 50%)) var(--my, 0%), rgba(216, 244, 255, 0.08), transparent 62%); } /* --s-lod */
@media (hover: hover) {
  #raport.is-3d .s-rap-karta:hover .s-rap-awers::after,
  #raport.is-3d .s-rap-karta:hover .s-rap-rewers::after { opacity: 1; }
}

/* cień pod podniesioną kartą */
#raport .s-rap-cien { display: none; }
#raport.is-przypiety .s-rap-cien {
  display: block; position: absolute; left: 10%; right: 10%; bottom: -26px; height: 40px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(7, 17, 26, 0.3), transparent); /* --s-tusz */
  opacity: 0;
}

/* przełącznik na całą kartę (tryb klik) */
#raport .s-rap-przelacz { display: none; }
#raport.is-klik .s-rap-przelacz {
  display: block; position: absolute; inset: 0; z-index: 3;
  border-radius: var(--r-karta); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#raport.is-klik .s-rap-przelacz:focus-visible { outline-offset: 4px; }

/* ---------- podświetlenie karty, która właśnie się odwraca (bez napisów) ---------- */
#raport .s-rap-namiar { display: none; }
#raport.is-przypiety .s-rap-namiar {
  display: block; position: absolute; z-index: 0; pointer-events: none;
  left: -10px; top: -10px;
  width: calc((100% - 3 * var(--o-4)) / 4 + 20px); height: calc(100% + 20px);
  border-radius: calc(var(--r-karta) + 10px);
  border: 1.5px solid rgba(26, 111, 168, 0.45); /* --s-holo-tusz */
  background: rgba(26, 111, 168, 0.05);
  box-shadow: 0 0 0 6px rgba(26, 111, 168, 0.05);
}

/* ---------- dalej ---------- */
#raport .s-rap-dalej { display: flex; justify-content: center; margin-top: var(--o-7); }

/* =========================================================================
   TAŚMY — skrzyżowane, przechylone; prędkość i skos reagują na przewijanie
   ========================================================================= */
#raport .s-rap-tasmy {
  position: relative; display: grid; align-items: center;
  margin-top: clamp(20px, 0.5rem + 2vw, 48px);
  padding-block: clamp(34px, 1.4rem + 2.6vw, 72px);
  overflow: clip;
}
#raport .s-rap-tasma { grid-area: 1 / 1; margin-inline: -90px; min-width: 0; }
#raport .s-rap-tasma--przod {
  z-index: 2; rotate: -3deg;
  background: var(--s-holo); color: var(--s-tusz);
  border-block: 2px solid var(--s-tusz);
  --sz1: var(--s-tusz); --sz2: var(--s-holo-tusz); --sz3: var(--s-tusz);
}
#raport .s-rap-tasma--tyl {
  z-index: 1; rotate: 3.6deg;
  background: var(--s-noc-2); color: var(--s-bialy);
}
#raport .s-rap-skos { padding-block: clamp(12px, 0.5rem + 0.7vw, 22px); }
#raport .s-rap-tasma--tyl .s-rap-skos { padding-block: clamp(10px, 0.4rem + 0.5vw, 16px); }
#raport .s-rap-bieg { display: flex; width: max-content; }
#raport .s-rap-grupa {
  --odstep: clamp(18px, 0.6rem + 1.5vw, 40px);
  display: flex; align-items: center; flex: none; gap: var(--odstep); padding-right: var(--odstep);
  white-space: nowrap;
}
#raport .s-rap-tasma--przod .s-rap-grupa {
  font-family: var(--f-display); font-weight: 600; letter-spacing: -0.03em;
  font-size: clamp(1.9rem, 0.9rem + 3.2vw, 4.2rem); line-height: 1.05;
}
#raport .s-rap-tasma--przod svg { width: 0.56em; height: 0.56em; flex: none; }
#raport .s-rap-tasma--tyl .s-rap-grupa {
  font-family: var(--f-display); font-weight: 600; letter-spacing: -0.02em;
  font-size: clamp(1.05rem, 0.75rem + 1.1vw, 1.8rem); line-height: 1.2;
}
#raport .s-rap-tasma--tyl .s-rap-romb { width: 0.36em; height: 0.36em; background: var(--s-piasek); }
#raport .s-rap-holo { color: var(--s-holo); }
#raport .s-rap-tasmy .s-pauza[hidden] { display: none; }
#raport .s-rap-pauza { right: max(var(--o-margines), 16px); bottom: 8px; }
@media (max-width: 767px) {
  #raport .s-rap-tasmy { padding-bottom: 60px; }
  #raport .s-rap-tasma--tyl { translate: 0 -62%; rotate: 5deg; }
  #raport .s-rap-pauza { bottom: 6px; }
}


/* ===== sekcja: arsenal ===== */
/* ARSENAŁ (#arsenal, prefiks s-ars-) — nagłówek w rzędzie (tytuł + akapit wiodący | tarcza z drobin mgławicy),
   pod nim bento modułów: teza ze spisem modułów, radar rekonesansu, klaster planu, lista elementów posta,
   kontrola (pierwsza wersja i poprawka względem progu), desant i warta. Ciemne okno z radarem.
   Hierarchia czytania: tytuł kafla (Poppins 600) → podtytuł zwykłym językiem → opis → przygaszona ilustracja.
   Układ: kontener s-ars (szerokość pola), każdy kafel to kontener s-ars-k (wnętrze kafla).
   rgba: 108,216,255 = --s-holo · 46,143,208 = --s-holo-2 · 210,194,154 = --s-piasek ·
         255,138,138 = --s-wrog · 7,16,26 = --s-noc-2 · 3,7,13 = --s-noc · 238,247,252 = --s-bialy */

/* ---------- nagłówek w rzędzie ---------- */
#arsenal .s-ars-glowa {
  display: grid; align-items: center;
  gap: var(--o-5) var(--o-7);
  margin-bottom: clamp(36px, 1.5rem + 2.5vw, 72px);
}
#arsenal .s-ars-glowa-tekst { display: grid; justify-items: start; gap: var(--o-5); }
#arsenal .s-ars-glowa h2 { max-width: 15ch; }
#arsenal .s-ars-glowa .s-lead { max-width: 50ch; }
#arsenal .s-ars-miejsce { position: relative; min-width: 0; }
#arsenal .s-ars-obiekt { margin: 0 auto; }
@media (min-width: 860px) {
  #arsenal .s-ars-glowa { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
  #arsenal .s-ars-obiekt { margin: 0 0 0 auto; }
}
@media (max-width: 859px) { #arsenal .s-ars-obiekt { width: min(240px, 64vw); } }

/* ---------- pole + kropki pod kursorem (tylko mysz, ciche) ---------- */
#arsenal .s-ars-pole { position: relative; container: s-ars / inline-size; }
#arsenal .s-ars-kropki {
  position: absolute; inset: -40px; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(108, 216, 255, 0.4) 1px, transparent 1.6px) 0 0 / 22px 22px; /* --s-holo */
  -webkit-mask-image: radial-gradient(280px circle at var(--ars-mx, 50%) var(--ars-my, 50%), #000, transparent 72%);
  mask-image: radial-gradient(280px circle at var(--ars-mx, 50%) var(--ars-my, 50%), #000, transparent 72%);
  opacity: 0;
  transition: opacity var(--d-zalanie) var(--e-out);
}
#arsenal .s-ars-pole.is-kursor .s-ars-kropki { opacity: 0.6; }

/* ---------- siatka bento (12 kolumn) ---------- */
#arsenal .s-ars-bento {
  position: relative; z-index: 1;
  display: grid; gap: var(--o-4);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
#arsenal .s-ars-bento > * { grid-column: 1 / -1; min-width: 0; }
@container s-ars (min-width: 620px) {
  #arsenal .s-ars-teza { grid-column: 1 / -1; grid-row: 1; }
  #arsenal .s-ars-rek { grid-column: 1 / span 6; grid-row: 2; }
  #arsenal .s-ars-plan { grid-column: 7 / span 6; grid-row: 2; }
  #arsenal .s-ars-oddzial { grid-column: 1 / span 6; grid-row: 3; }
  #arsenal .s-ars-kontrola { grid-column: 7 / span 6; grid-row: 3; }
  #arsenal .s-ars-front { grid-column: 1 / -1; grid-row: 4; }
}
@container s-ars (min-width: 940px) {
  #arsenal .s-ars-rek { grid-column: 1 / span 5; }
  #arsenal .s-ars-plan { grid-column: 6 / span 7; }
  #arsenal .s-ars-oddzial { grid-column: 1 / span 5; }
  #arsenal .s-ars-kontrola { grid-column: 6 / span 7; }
}

/* ---------- kafel ---------- */
#arsenal .s-ars-kafel {
  container: s-ars-k / inline-size;
  display: flex; flex-direction: column; gap: var(--o-5);
  background:
    linear-gradient(180deg, rgba(238, 247, 252, 0.06), rgba(238, 247, 252, 0.015)), /* --s-bialy */
    rgba(7, 16, 26, 0.92); /* --s-noc-2 — kropki pola nie prześwitują przez kafle */
  transition: border-color var(--d-wolno) var(--e-out), box-shadow var(--d-zalanie) var(--e-out);
}
@media (hover: hover) { #arsenal .s-ars-kafel:hover { border-color: var(--s-linia-noc-mocna); } }
#arsenal .s-ars-kafel.is-namierzony { border-color: rgba(108, 216, 255, 0.55); box-shadow: var(--s-poswiata); } /* --s-holo */

/* tytuł kafla: ikona + nazwa modułu (Poppins 600) + podtytuł zwykłym językiem */
#arsenal .s-ars-tytul { display: flex; align-items: center; gap: 16px; }
#arsenal .s-ars-tytul-tekst { display: grid; gap: 3px; min-width: 0; }
#arsenal .s-ars-tytul h3, #arsenal .s-ars-wiersz h3 {
  font-size: clamp(1.375rem, 1.1rem + 0.6vw, 1.75rem); font-weight: 600;
  line-height: 1.15; letter-spacing: -0.02em; color: var(--s-bialy);
}
#arsenal .s-ars-zw { font-family: var(--f-tekst); font-size: 0.9375rem; font-weight: 500; line-height: 1.4; color: var(--c-noc, var(--s-holo)); }
#arsenal .c-lazur .s-ars-zw { color: #7FBCE6; } /* jaśniejszy lazur — czytelny podtytuł (8:1 na noc-2) */
#arsenal .s-ars-opis { font-size: 1rem; line-height: 1.62; color: var(--s-tekst-noc); max-width: 60ch; }
#arsenal .s-ars-mocno { color: var(--s-bialy); font-weight: 600; }

#arsenal .s-ars-ik {
  display: grid; place-items: center; flex: none;
  width: 48px; height: 48px; border-radius: var(--r-maly);
  background: var(--c-tint, rgba(108, 216, 255, 0.18)); /* --s-holo */
  color: var(--c-noc, var(--s-holo));
  border: 1px solid var(--s-linia-noc);
  transition: transform var(--d-wolno) var(--e-out), background-color var(--d-wolno) var(--e-out), color var(--d-wolno) var(--e-out);
}
#arsenal .s-ars-ik svg { width: 24px; height: 24px; }
@media (hover: hover) { #arsenal .s-ars-kafel:hover .s-ars-tytul .s-ars-ik, #arsenal .s-ars-wiersz:hover .s-ars-ik { transform: rotate(-6deg); } }

/* legenda pod ilustracjami */
#arsenal .s-ars-legenda { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 0.875rem; line-height: 1.4; color: var(--s-tekst-noc); }
#arsenal .s-ars-legenda li { display: inline-flex; align-items: center; gap: 9px; }
#arsenal .s-ars-lg { width: 10px; height: 10px; flex: none; }

/* ---------- (a) teza + spis modułów ---------- */
#arsenal .s-ars-teza { padding: clamp(26px, 1rem + 2vw, 52px); }
#arsenal .s-ars-teza-in { position: relative; display: grid; gap: var(--o-6); }
#arsenal .s-ars-teza-tekst { display: grid; gap: var(--o-5); align-content: start; }
#arsenal .s-ars-haslo {
  font-size: clamp(2rem, 1rem + 3.4cqi, 3.1rem); /* mniejsze od tytułu sekcji — h2 prowadzi */
  line-height: 1.02; letter-spacing: -0.035em;
  color: var(--s-bialy);
}
#arsenal .s-ars-haslo .s-akcent { display: block; }
#arsenal .s-ars-teza-opis { font-size: var(--t-lead); line-height: 1.62; color: var(--s-tekst-noc); max-width: 54ch; }

#arsenal .s-ars-spis { display: grid; gap: 12px; align-content: end; }
#arsenal .s-ars-spis-et { font-size: 0.875rem; font-weight: 600; color: var(--s-cichy-noc); }
#arsenal .s-ars-szlak { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#arsenal .s-ars-szlak li {
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 10px 14px;
  border-radius: var(--r-maly);
  border: 1px solid var(--s-linia-noc);
  background: rgba(3, 7, 13, 0.55); /* --s-noc */
  color: var(--s-tekst-noc);
  font-family: var(--f-display); font-size: 0.9375rem; font-weight: 500; line-height: 1.25;
  transition: border-color var(--d-wolno) var(--e-out), background-color var(--d-wolno) var(--e-out), color var(--d-wolno) var(--e-out);
}
#arsenal .s-ars-szlak li span { min-width: 0; }
#arsenal .s-ars-szlak li svg { width: 20px; height: 20px; flex: none; color: var(--s-holo); }
#arsenal .s-ars-szlak li.is-on { border-color: rgba(108, 216, 255, 0.55); background: rgba(108, 216, 255, 0.09); color: var(--s-bialy); } /* --s-holo */
@media (hover: hover) { #arsenal .s-ars-szlak li:hover { border-color: rgba(108, 216, 255, 0.55); background: rgba(108, 216, 255, 0.09); color: var(--s-bialy); } }
@container s-ars-k (min-width: 440px) { #arsenal .s-ars-szlak { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container s-ars-k (min-width: 780px) {
  #arsenal .s-ars-teza-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: var(--o-7); }
}

/* ---------- (b) rekonesans — radar (przygaszona ilustracja) ---------- */
#arsenal .s-ars-radar { margin: auto 0 0; display: grid; gap: var(--o-4); }
#arsenal .s-ars-radar-ekran { position: relative; width: min(100%, 300px); aspect-ratio: 1; margin-inline: auto; }
#arsenal .s-ars-radar-svg { width: 100%; height: 100%; overflow: visible; opacity: 0.72; transition: opacity var(--d-zalanie) var(--e-out); }
@media (hover: hover) { #arsenal .s-ars-rek:hover .s-ars-radar-svg { opacity: 0.95; } }
#arsenal .s-ars-pauza { right: -6px; top: -6px; }
#arsenal .s-ars-pauza[hidden] { display: none; } /* .s-pauza ma display:grid, który nadpisuje [hidden] */
#arsenal .s-ars-r-tarcza { fill: rgba(46, 143, 208, 0.06); } /* --s-holo-2 */
#arsenal .s-ars-r-pierscien { fill: none; stroke: rgba(108, 216, 255, 0.18); stroke-width: 1; }
#arsenal .s-ars-r-os { fill: none; stroke: rgba(108, 216, 255, 0.12); stroke-width: 1; }
#arsenal .s-ars-r-podzialka { fill: none; stroke: rgba(108, 216, 255, 0.22); stroke-width: 4; stroke-dasharray: 1 12.44; } /* 72 kreski, r=154 */
#arsenal .s-ars-wiazka path { fill: var(--s-holo); opacity: 0.045; }
#arsenal .s-ars-wiazka-czolo { stroke: var(--s-lod); stroke-width: 1.5; opacity: 0.8; }
#arsenal .s-ars-blip { color: var(--s-holo); }
#arsenal .s-ars-blip.is-wrog { color: var(--s-wrog); }
#arsenal .s-ars-blip.is-luka { color: var(--s-piasek); }
#arsenal .s-ars-blip.is-pob .s-ars-ksztalt { fill: currentColor; }
#arsenal .s-ars-blip.is-luka .s-ars-ksztalt { fill: rgba(210, 194, 154, 0.25); stroke: currentColor; stroke-width: 1.8; } /* --s-piasek */
#arsenal .s-ars-blip.is-wrog .s-ars-ksztalt { fill: none; stroke: currentColor; stroke-width: 2.2; }
#arsenal .s-ars-fala { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
#arsenal .s-ars-cel rect { fill: var(--s-piasek); }

#arsenal .s-ars-radar-opis { display: grid; gap: var(--o-3); }
#arsenal .s-ars-lg--cel { background: var(--s-piasek); border-radius: 2px; }
#arsenal .s-ars-lg--pob { background: var(--s-holo); border-radius: 50%; }
#arsenal .s-ars-lg--luka { width: 9px; height: 9px; border: 1.5px solid var(--s-piasek); transform: rotate(45deg); }
#arsenal .s-ars-lg--wrog {
  background:
    linear-gradient(45deg, transparent 40%, var(--s-wrog) 40% 60%, transparent 60%),
    linear-gradient(-45deg, transparent 40%, var(--s-wrog) 40% 60%, transparent 60%);
}

/* ---------- (c) plan operacji — klaster ---------- */
#arsenal .s-ars-plan-tekst { display: grid; gap: var(--o-5); }
#arsenal .s-ars-klaster { margin: 0; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: var(--o-4); }
#arsenal .s-ars-klaster-svg { width: 100%; max-height: 360px; overflow: visible; margin-block: auto; opacity: 0.85; transition: opacity var(--d-zalanie) var(--e-out); }
@media (hover: hover) { #arsenal .s-ars-plan:hover .s-ars-klaster-svg { opacity: 1; } }
#arsenal .s-ars-klaster-opis { display: grid; gap: var(--o-3); }
#arsenal .s-ars-ring line { stroke: rgba(108, 216, 255, 0.16); stroke-width: 1; stroke-dasharray: 3 5; } /* --s-holo */
#arsenal .s-ars-link {
  stroke: var(--s-holo-2); stroke-width: 1.6;
  stroke-dasharray: 1; stroke-dashoffset: 0;
  transition: stroke var(--d-wolno) var(--e-out), stroke-width var(--d-wolno) var(--e-out);
}
#arsenal .s-ars-link.is-on { stroke: var(--s-piasek); stroke-width: 2.6; }
#arsenal .s-ars-pakiety rect { fill: var(--s-lod); opacity: 0; }
#arsenal .s-ars-filar rect { fill: rgba(7, 16, 26, 1); stroke: var(--s-piasek); stroke-width: 1.6; } /* --s-noc-2 */
#arsenal .s-ars-t-filar { fill: var(--s-piasek); font-family: var(--f-display); font-size: 15px; font-weight: 600; }
#arsenal .s-ars-t-maly { fill: var(--s-tekst-noc); font-family: var(--f-tekst); font-size: 10px; }
#arsenal .s-ars-sat { cursor: default; }
#arsenal .s-ars-sat rect { fill: rgba(7, 16, 26, 1); stroke: var(--s-holo); stroke-width: 1.3; transition: fill var(--d-wolno) var(--e-out), stroke var(--d-wolno) var(--e-out); } /* --s-noc-2 */
#arsenal .s-ars-sat path { fill: none; stroke: rgba(108, 216, 255, 0.6); stroke-width: 2; stroke-linecap: round; transition: stroke var(--d-wolno) var(--e-out); } /* --s-holo */
#arsenal .s-ars-sat.is-on rect { fill: var(--s-piasek); stroke: var(--s-piasek); }
#arsenal .s-ars-sat.is-on path { stroke: var(--s-tusz); }
#arsenal .s-ars-plan.is-wskazany .s-ars-link:not(.is-on) { stroke: rgba(46, 143, 208, 0.4); } /* --s-holo-2 */
#arsenal .s-ars-lg--filar { width: 14px; height: 10px; border-radius: 3px; border: 1.5px solid var(--s-piasek); }
#arsenal .s-ars-lg--sat { width: 14px; height: 10px; border-radius: 3px; border: 1.5px solid var(--s-holo); }
#arsenal .s-ars-lg--link { width: 16px; height: 2px; border-radius: 1px; background: var(--s-holo-2); }

/* ---------- (d) oddział — lista elementów każdego posta ---------- */
#arsenal .s-ars-karta {
  position: relative; flex: 1 1 auto;
  display: flex; flex-direction: column;
  border-radius: var(--r-maly);
  border: 1px solid var(--s-linia-noc-mocna);
  background: rgba(3, 7, 13, 0.6); /* --s-noc */
  overflow: hidden;
}
#arsenal .s-ars-karta-glowa { position: relative; padding: 14px 18px; border-bottom: 1px solid var(--s-linia-noc); }
#arsenal .s-ars-karta-glowa h4 { font-size: 1rem; font-weight: 600; color: var(--s-bialy); }
#arsenal .s-ars-karta-pasek { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--s-trio); transform-origin: 0 50%; }
#arsenal .s-ars-lista { position: relative; flex: 1 1 auto; display: grid; grid-auto-rows: minmax(44px, 1fr); align-content: start; padding: 4px 0; }
#arsenal .s-ars-lista li {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 18px;
  font-size: 0.9375rem; line-height: 1.35; color: var(--s-bialy);
  transition: color var(--d-zalanie) var(--e-out), opacity var(--d-zalanie) var(--e-out), background-color var(--d-wolno) var(--e-out);
}
#arsenal .s-ars-lista li + li { border-top: 1px solid var(--s-linia-noc); }
@media (hover: hover) { #arsenal .s-ars-lista li:hover { background: rgba(108, 216, 255, 0.06); } } /* --s-holo */
#arsenal .s-ars-lista .s-znacznik {
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 6px;
  background: var(--s-holo); color: var(--s-tusz);
  box-shadow: inset 0 0 0 1.5px var(--s-holo);
  transition: background-color var(--d-zalanie) var(--e-out), box-shadow var(--d-zalanie) var(--e-out);
}
#arsenal .s-ars-lista .s-znacznik svg { width: 13px; height: 13px; stroke-width: 2.6; transition: transform var(--d-zalanie) var(--e-out); }
#arsenal .s-ars-lista li.is-czeka { color: var(--s-cichy-noc); }
#arsenal .s-ars-lista li.is-czeka .s-znacznik { background: transparent; box-shadow: inset 0 0 0 1.5px var(--s-linia-noc-mocna); }
#arsenal .s-ars-lista li.is-czeka .s-znacznik svg { transform: scale(0); }

/* ---------- (e) kontrola — pierwsza wersja i poprawka względem progu ---------- */
#arsenal .s-ars-kontrola-glowa { display: grid; gap: var(--o-5); }
#arsenal .s-ars-wynik { --wyn-w: 5.6em; margin: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--o-5); }
#arsenal .s-ars-proby { display: grid; gap: 16px; }
#arsenal .s-ars-proba { display: grid; gap: 8px; }
#arsenal .s-ars-proba-nazwa {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  font-family: var(--f-display); font-size: 1rem; font-weight: 600; color: var(--s-bialy);
}
#arsenal .s-ars-proba-stan { font-family: var(--f-tekst); font-size: 0.875rem; font-weight: 500; color: var(--s-holo); }
#arsenal .s-ars-proba.is-ponizej .s-ars-proba-stan { color: var(--s-wrog); }
#arsenal .s-ars-proba-rzad { display: grid; grid-template-columns: minmax(0, 1fr) var(--wyn-w); align-items: center; gap: 0 14px; }
#arsenal .s-ars-proba-wynik {
  font-family: var(--f-display); font-size: 1.625rem; font-weight: 600; line-height: 1;
  color: var(--s-holo); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
#arsenal .s-ars-proba-wynik span { font-size: 0.875rem; font-weight: 400; color: var(--s-cichy-noc); margin-left: 2px; }
#arsenal .s-ars-proba.is-ponizej .s-ars-proba-wynik { color: var(--s-wrog); }
#arsenal .s-ars-pasek {
  position: relative; height: 12px; border-radius: 6px;
  background: rgba(238, 247, 252, 0.05); /* --s-bialy */
  box-shadow: inset 0 0 0 1px var(--s-linia-noc);
}
#arsenal .s-ars-pasek::after { /* próg 85 na każdym pasku */
  content: ""; position: absolute; left: 85%; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; border-radius: 1px;
  background: var(--s-piasek);
}
#arsenal .s-ars-pasek-fill {
  position: absolute; inset: 0; border-radius: inherit;
  background: var(--s-holo);
  transform-origin: 0 50%; transform: scaleX(var(--w, 1));
}
#arsenal .s-ars-proba.is-ponizej .s-ars-pasek-fill { background: var(--s-wrog); }
#arsenal .s-ars-prog-rzad { position: relative; height: 30px; margin: -6px calc(var(--wyn-w) + 14px) 0 0; }
#arsenal .s-ars-prog {
  position: absolute; left: 85%; top: 4px; translate: -50% 0;
  display: inline-flex; align-items: center; min-height: 26px; padding: 2px 11px;
  border-radius: var(--r-pigulka);
  background: rgba(210, 194, 154, 0.14); border: 1px solid rgba(210, 194, 154, 0.5); /* --s-piasek */
  font-family: var(--f-display); font-size: 0.8125rem; font-weight: 600; color: var(--s-piasek); white-space: nowrap;
}

#arsenal .s-ars-kat-wrap { display: grid; gap: var(--o-3); margin-top: auto; padding-top: var(--o-4); border-top: 1px solid var(--s-linia-noc); }
#arsenal .s-ars-kat-et { font-size: 0.875rem; font-weight: 600; color: var(--s-cichy-noc); }
#arsenal .s-ars-kat { display: flex; flex-wrap: wrap; gap: 8px; }
#arsenal .s-ars-kat li {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 34px; padding: 4px 12px 4px 5px;
  border-radius: var(--r-pigulka);
  border: 1px solid var(--s-linia-noc);
  background: rgba(238, 247, 252, 0.03); /* --s-bialy */
  font-size: 0.875rem; color: var(--s-tekst-noc); white-space: nowrap;
}
#arsenal .s-ars-kat li b {
  display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; border-radius: var(--r-pigulka);
  background: var(--s-piasek); color: var(--s-tusz);
  font-family: var(--f-display); font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums;
}

/* ---------- (f) desant i warta ---------- */
#arsenal .s-ars-front { justify-content: center; }
#arsenal .s-ars-wiersze { display: grid; }
#arsenal .s-ars-wiersz {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 16px; align-items: start; align-content: start;
  padding: 4px 0 20px;
}
#arsenal .s-ars-wiersz + .s-ars-wiersz { padding: 20px 0 4px; border-top: 1px solid var(--s-linia-noc); }
#arsenal .s-ars-wiersz .s-ars-ik { grid-row: span 2; }
#arsenal .s-ars-wiersz-tekst { display: grid; gap: 3px; }
#arsenal .s-ars-wiersz-tekst .s-ars-opis { margin-top: 6px; font-size: var(--t-maly); }
#arsenal .s-ars-wiersz.is-on .s-ars-ik { background: var(--s-holo-2); color: var(--s-bialy); }
@container s-ars-k (min-width: 660px) {
  #arsenal .s-ars-wiersze { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--o-6); }
  #arsenal .s-ars-wiersz { padding: 4px 0; }
  #arsenal .s-ars-wiersz + .s-ars-wiersz { padding: 4px 0 4px var(--o-6); border-top: 0; border-left: 1px solid var(--s-linia-noc); }
}
#arsenal .s-ars-statusy { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
#arsenal .s-ars-statusy li {
  display: inline-flex; align-items: center; gap: 9px; max-width: 100%;
  min-height: 32px; padding: 5px 14px 5px 12px;
  border-radius: var(--r-pigulka);
  font-size: 0.875rem; font-weight: 500; line-height: 1.35;
}
#arsenal .s-ars-statusy li i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
#arsenal .s-ars-statusy .is-gotowe { color: var(--s-holo); background: rgba(108, 216, 255, 0.1); border: 1px solid rgba(108, 216, 255, 0.36); } /* --s-holo */
#arsenal .s-ars-statusy .is-gotowe i { background: var(--s-holo); }
#arsenal .s-ars-statusy .is-wkrotce { color: var(--s-cichy-noc); background: rgba(238, 247, 252, 0.04); border: 1px solid var(--s-linia-noc); } /* --s-bialy */
#arsenal .s-ars-statusy .is-wkrotce i { border: 1.5px solid var(--s-cichy-noc); }

/* ---------- stopka sekcji ---------- */
#arsenal .s-ars-stopka {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--o-4) var(--o-6);
  margin-top: var(--o-5);
  padding: 14px 14px 14px 24px;
  border-radius: var(--r-pigulka);
  border: 1px solid var(--s-linia-noc);
  background: rgba(3, 7, 13, 0.5); /* --s-noc */
}
#arsenal .s-ars-stopka p { display: flex; align-items: center; gap: 14px; flex: 1 1 340px; min-width: 0; font-size: 1rem; color: var(--s-tekst-noc); }
#arsenal .s-ars-stopka p b { color: var(--s-bialy); font-weight: 600; }
#arsenal .s-ars-stopka-znak { width: 8px; height: 8px; flex: none; border-radius: 2px; background: var(--s-piasek); box-shadow: 0 0 0 4px rgba(210, 194, 154, 0.18); } /* --s-piasek */

/* ---------- wąsko / telefon ---------- */
@container s-ars-k (max-width: 430px) {
  #arsenal .s-ars-wiersz { grid-template-columns: minmax(0, 1fr); }
  #arsenal .s-ars-wiersz .s-ars-ik { grid-row: auto; width: 44px; height: 44px; }
  #arsenal .s-ars-klaster .s-ars-t-maly { display: none; }
  #arsenal .s-ars-klaster .s-ars-t-filar { font-size: 19px; transform: translateY(6px); }
  #arsenal .s-ars-tytul { gap: 14px; }
  #arsenal .s-ars-tytul .s-ars-ik { width: 44px; height: 44px; }
}
@container s-ars-k (max-width: 340px) {
  #arsenal .s-ars-szlak li { min-height: 52px; padding: 9px 12px; font-size: 0.875rem; gap: 10px; }
  #arsenal .s-ars-lista li { padding-inline: 14px; gap: 10px; }
  #arsenal .s-ars-karta-glowa { padding-inline: 14px; }
  #arsenal .s-ars-wynik { --wyn-w: 4.8em; }
  #arsenal .s-ars-proba-wynik { font-size: 1.375rem; }
}
@media (max-width: 560px) {
  #arsenal .s-ars-stopka { border-radius: var(--r-karta); padding: 20px; }
  #arsenal .s-ars-stopka-znak { display: none; }
  #arsenal .s-ars-stopka .s-btn { width: 100%; justify-content: space-between; }
  #arsenal .s-ars-pauza { right: 0; top: 0; }
}


/* ===== sekcja: formacja ===== */
/* FORMACJA — armia postów formuje szyk (prefiks s-for-).
 * Tryb statyczny (domyślny: telefon, ograniczony ruch, brak GSAP): tytuł + akapit wiodący + lista 3 kroków + szyk 8×5 w perspektywie.
 * Tryb pełny (#formacja.is-anim — dodaje JS przy ≥992 px i pełnym ruchu): przypięty ekran, 140 kart w 3D,
 * scrub: rozproszenie → szyk z klastrów → linki → przechył i marsz ku linii TOP 10.
 * Kroki w trybie pełnym: ciemny panel, aktywny krok rozwinięty i jasny, pozostałe przygaszone (klasa .is-akt z JS).
 * Wymiary szyku liczone w CSS ze zmiennych (--kol/--wier/--dziel ustawia JS na korzeniu). */

#formacja {
  --kol: 8; --wier: 5; --dziel: 0;
  --for-w: clamp(26px, 8.4vw, 56px);                 /* szerokość karty-posta */
  --for-h: calc(var(--for-w) * 0.72);
  --for-g: calc(var(--for-w) * 0.16);                /* odstęp w szyku */
  --for-przerwa: calc(var(--for-w) * 0.5);           /* dodatkowa przerwa między klastrami */
  --for-px: calc(var(--for-w) + var(--for-g));       /* krok kolumny */
  --for-py: calc(var(--for-h) + var(--for-g));       /* krok rzędu */
  --for-szer: calc(var(--kol) * var(--for-px) - var(--for-g) + var(--for-przerwa));
  --for-wys: calc(var(--wier) * var(--for-py) - var(--for-g) + var(--dziel) * var(--for-przerwa));
  --for-linia: rgba(196, 211, 222, 0.34);            /* --s-tekst-noc */
}
#formacja.is-anim { --for-w: clamp(34px, 3vw, 52px); padding-block: 0; }

/* ---------- układ ---------- */
#formacja .s-for-pin { position: relative; }
#formacja .s-for-uklad { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--o-6); }
#formacja .s-for-tekst { position: relative; z-index: 2; display: grid; align-content: start; }
#formacja .s-glowa { margin-bottom: var(--o-6); }
#formacja .s-glowa h2 { max-width: 15ch; }
#formacja .s-lead { max-width: 46ch; }

/* ---------- kroki: lista 1–3 (statycznie wszystkie rozwinięte) ---------- */
#formacja .s-for-kroki { display: grid; }
#formacja .s-for-krok {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-areas: "nr tytul" ". opis";
  column-gap: var(--o-4); row-gap: var(--o-2);
  align-items: center;
  padding: var(--o-5) 0;
  border-top: 1px solid var(--s-linia-noc);
}
#formacja .s-for-krok:last-child { border-bottom: 1px solid var(--s-linia-noc); }
#formacja .s-for-krok-nr {
  grid-area: nr;
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--s-linia-noc-mocna);
  background: rgba(238, 247, 252, 0.04);             /* --s-bialy */
  font-family: var(--f-display); font-size: 1rem; font-weight: 600; line-height: 1;
  color: var(--s-piasek);
}
#formacja .s-for-krok h3 {
  grid-area: tytul;
  font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem); line-height: 1.25; font-weight: 600;
}
#formacja .s-for-krok-opis { grid-area: opis; min-width: 0; }
#formacja .s-for-krok-opis p { font-size: 1rem; line-height: 1.6; color: var(--s-tekst-noc); max-width: 52ch; }

/* legenda — drugi plan: drobna, zwykła pisownia */
#formacja .s-for-legenda {
  display: flex; flex-wrap: wrap; gap: var(--o-2) 20px;
  margin-top: var(--o-5);
  font-family: var(--f-tekst); font-size: 0.875rem; color: var(--s-cichy-noc);
}
#formacja .s-for-legenda li { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
#formacja .s-for-legenda-link { width: 20px; height: 2px; border-radius: 2px; background: var(--s-holo); }

#formacja .s-for-nota { justify-self: start; }

/* ---------- scena 3D (wspólna) ---------- */
html:not(.s-js) #formacja .s-for-scena { display: none; }
#formacja .s-for-scena {
  --for-cx: 50%;                                     /* środek szyku i punkt zbiegu perspektywy */
  --for-hy: 40px;                                    /* wysokość linii horyzontu (TOP 10) */
  --for-cy: calc(var(--for-hy) + 34px + var(--for-wys) * 0.5);
  position: relative;
  height: calc(var(--for-wys) * 0.92 + 98px);
  overflow: clip;
  perspective: 1100px;
  perspective-origin: var(--for-cx) var(--for-hy);
}
#formacja .s-for-kamera { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: var(--for-cx) var(--for-cy); }
#formacja .s-for-chmura { position: absolute; left: var(--for-cx); top: var(--for-cy); width: 0; height: 0; transform-style: preserve-3d; }
#formacja .s-for-szyk {
  position: absolute;
  left: calc(var(--for-szer) / -2); top: calc(var(--for-wys) / -2);
  width: var(--for-szer); height: var(--for-wys);
  transform-style: preserve-3d;
}
#formacja:not(.is-anim) .s-for-szyk { transform: rotateX(38deg); }
#formacja .s-for-marsz { position: absolute; inset: 0; transform-style: preserve-3d; }

/* pokład — cicha siatka pod szykiem, widoczna po przechyleniu */
#formacja .s-for-podloga {
  position: absolute; left: -50%; width: 200%; top: -190%; height: 300%;
  transform: translateZ(-3px);
  background-image:
    linear-gradient(90deg, rgba(108, 216, 255, 0.08) 0 1px, transparent 1px),   /* --s-holo */
    linear-gradient(rgba(108, 216, 255, 0.08) 0 1px, transparent 1px);
  background-size: var(--for-px) var(--for-py);
  background-position: calc(var(--for-g) / -2) calc(var(--for-g) / -2);
  -webkit-mask-image: radial-gradient(closest-side at 50% 66%, #000 30%, transparent 100%);
  mask-image: radial-gradient(closest-side at 50% 66%, #000 30%, transparent 100%);
  opacity: 0.7;
}

/* karta-posta: kreska tytułu + 3 linie tekstu (tło) + plakietka-pigułka (attr data-b) */
#formacja .s-for-k {
  --kr: var(--s-holo);
  position: absolute;
  left: calc(var(--c) * var(--for-px) + var(--q) * var(--for-przerwa));
  top: calc(var(--r) * var(--for-py) + var(--s) * var(--for-przerwa));
  width: var(--for-w); height: var(--for-h);
  font-size: calc(var(--for-w) / 10);
  border-radius: 0.8em;
  border: 1px solid rgba(108, 216, 255, 0.3);        /* --s-holo */
  background:
    linear-gradient(var(--kr), var(--kr)) 0.95em 0.95em / var(--l0, 5.4em) 0.5em no-repeat,
    linear-gradient(var(--for-linia), var(--for-linia)) 0.95em 2.35em / var(--l1, 7.6em) 0.24em no-repeat,
    linear-gradient(var(--for-linia), var(--for-linia)) 0.95em 3.15em / var(--l2, 6.4em) 0.24em no-repeat,
    linear-gradient(var(--for-linia), var(--for-linia)) 0.95em 3.95em / var(--l3, 3.6em) 0.24em no-repeat,
    linear-gradient(160deg, #11202F, var(--s-noc-3));
}
#formacja .s-for-k.v2 { --l0: 4.6em; --l1: 6.8em; --l2: 7.4em; --l3: 2.8em; }
#formacja .s-for-k.v3 { --l0: 6.2em; --l1: 7.2em; --l2: 4.8em; --l3: 5.4em; }
#formacja .s-for-k::after {
  content: attr(data-b);
  position: absolute; right: 0.7em; bottom: 0.6em;
  padding: 0.3em 0.62em 0.26em;
  border-radius: 99em;
  background: rgba(108, 216, 255, 0.14);             /* --s-holo */
  font-family: var(--f-display); font-size: 1.3em; font-weight: 600; line-height: 1; letter-spacing: 0;
  color: var(--s-holo);
}
#formacja .s-for-k.is-filar {
  --kr: var(--s-piasek);
  border-color: rgba(210, 194, 154, 0.8);            /* --s-piasek */
  box-shadow: 0 0 0 1px rgba(210, 194, 154, 0.2), 0 0 22px -4px rgba(210, 194, 154, 0.55);
}
#formacja .s-for-k.is-filar::after { color: var(--s-tusz); background: var(--s-piasek); }
#formacja .s-for-k-puls {
  position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  border: 1.5px solid var(--s-piasek);
  opacity: 0;
}

/* linki wewnętrzne: siatka przez środki kart klastra (widoczna w odstępach) — odsłona kołem od filaru */
#formacja .s-for-linie {
  --for-r: 150%;
  position: absolute;
  left: calc(var(--c0) * var(--for-px) + var(--q) * var(--for-przerwa) + var(--for-w) / 2 - 0.75px);
  top: calc(var(--r0) * var(--for-py) + var(--s) * var(--for-przerwa) + var(--for-h) / 2 - 0.75px);
  width: calc((var(--nc) - 1) * var(--for-px) + 1.5px);
  height: calc((var(--nr) - 1) * var(--for-py) + 1.5px);
  background-image:
    linear-gradient(90deg, rgba(108, 216, 255, 0.62) 0 1.5px, transparent 1.5px),   /* --s-holo */
    linear-gradient(rgba(108, 216, 255, 0.62) 0 1.5px, transparent 1.5px);
  background-size: var(--for-px) var(--for-py);
  clip-path: circle(var(--for-r) at calc(var(--fx) * var(--for-px)) calc(var(--fy) * var(--for-py)));
  transform: translateZ(-1px);
}
/* arterie: połączenia między filarami (piasek) */
#formacja .s-for-arteria {
  position: absolute;
  background: var(--s-piasek);
  box-shadow: 0 0 10px rgba(210, 194, 154, 0.5);     /* --s-piasek */
  transform: translateZ(-1px);
}

/* drobiny w tle — dekoracja, przygaszona */
#formacja .s-for-pyl { position: absolute; left: 0; right: 0; top: -5%; height: 150%; pointer-events: none; opacity: 0.6; }
#formacja .s-for-pyl i {
  position: absolute; width: var(--z); height: var(--z); border-radius: 50%;
  background: var(--s-lod); opacity: var(--a);
}
#formacja .s-for-pyl--2 i { background: var(--s-holo); box-shadow: 0 0 6px rgba(108, 216, 255, 0.6); /* --s-holo */ }

/* horyzont: linia TOP 10 ze spokojnym podpisem */
#formacja .s-for-horyzont { position: absolute; left: 0; right: 0; top: var(--for-hy); height: 0; z-index: 1; pointer-events: none; }
#formacja .s-for-horyzont-linia,
#formacja .s-for-horyzont-jasna {
  position: absolute; left: 0; right: 0; top: -0.75px; height: 1.5px;
  background: var(--s-trio);
}
#formacja .s-for-horyzont-linia {
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent);
  mask-image: linear-gradient(90deg, #000 70%, transparent);
}
#formacja .s-for-horyzont-jasna { opacity: 0; box-shadow: 0 0 18px 1px rgba(108, 216, 255, 0.5); /* --s-holo */ }
#formacja .s-for-horyzont-top {
  position: absolute; left: 0; bottom: 12px;
  display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap;
  font-family: var(--f-display); font-size: 0.875rem; font-weight: 400; letter-spacing: 0;
  color: var(--s-cichy-noc);
}
#formacja .s-for-horyzont-top b { font-weight: 600; font-size: 1.125rem; letter-spacing: -0.01em; line-height: 1; color: var(--s-bialy); }

/* cel na horyzoncie: świetlny znacznik + karta objaśnienia (styl objaśnień z hero) */
#formacja .s-for-cel { position: absolute; left: var(--for-cx); top: var(--for-hy); z-index: 1; width: 0; height: 0; pointer-events: none; }
#formacja .s-for-cel-znak { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; }
#formacja .s-for-cel-znak::before {
  content: ""; position: absolute; inset: 7px; border-radius: 50%;
  background: var(--s-lod); box-shadow: 0 0 12px 2px rgba(108, 216, 255, 0.7);   /* --s-holo */
}
#formacja .s-for-cel-znak i {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--s-holo);
}
#formacja .s-for-cel-znak i.s-for-cel-znak-piasek { border-color: var(--s-piasek); box-shadow: 0 0 16px rgba(210, 194, 154, 0.6); opacity: 0; }
#formacja .s-for-cel-karta {
  position: absolute; left: 22px; bottom: 16px; width: max-content; max-width: 290px;
  display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 3px 12px; align-items: center;
  padding: 11px 16px 11px 11px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(20, 38, 58, 0.95), rgba(7, 16, 26, 0.93));
  border: 1px solid rgba(108, 216, 255, 0.22);       /* --s-holo */
  box-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(216, 244, 255, 0.07);
}
#formacja .s-for-cel-ikona {
  grid-row: span 2; width: 36px; height: 36px; border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(108, 216, 255, 0.1); color: var(--s-holo);
  box-shadow: inset 0 0 0 1px rgba(108, 216, 255, 0.18);
}
#formacja .s-for-cel-ikona svg { width: 19px; height: 19px; }
#formacja .s-for-cel-karta b { font-family: var(--f-display); font-weight: 600; font-size: 0.875rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--s-bialy); }
#formacja .s-for-cel-karta > span:last-child { font-size: 0.78rem; line-height: 1.35; color: var(--s-cichy-noc); }
/* statycznie karta celu się nie mieści nad horyzontem — zostaje sam znacznik */
#formacja:not(.is-anim) .s-for-cel-karta { display: none; }

/* ---------- statycznie: ≥ 992 px (ograniczony ruch) — dwie kolumny ---------- */
@media (min-width: 992px) {
  #formacja:not(.is-anim) .s-for-uklad { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--o-8); align-items: center; }
  #formacja:not(.is-anim) .s-for-tekst { grid-row: 1 / span 2; }
  #formacja:not(.is-anim) .s-for-scena { grid-column: 2; align-self: end; }
  #formacja:not(.is-anim) .s-for-nota { grid-column: 2; align-self: start; }
}
/* telefon i tablet: ilustracja zaraz pod tekstem wiodącym, potem legenda i kroki */
@media (max-width: 991px) {
  #formacja .s-for-uklad { gap: var(--o-5); }
  #formacja .s-for-tekst { display: contents; }
  #formacja .s-glowa { order: 1; margin-bottom: var(--o-2); }
  #formacja .s-for-scena { order: 2; }
  #formacja .s-for-legenda { order: 3; margin-top: 0; }
  #formacja .s-for-nota { order: 4; margin-top: calc(var(--o-3) * -1); }
  #formacja .s-for-kroki { order: 5; margin-top: var(--o-3); }
  #formacja:not(.is-anim) .s-for-szyk { transform: rotateX(30deg); }
}
@media (max-width: 560px) {
  #formacja .s-for-horyzont-top span { display: none; }
  #formacja .s-for-krok { grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--o-3); }
  #formacja .s-for-krok-nr { width: 36px; height: 36px; font-size: 0.9375rem; }
}

/* =========================================================================
   TRYB PEŁNY — przypięty ekran (klasa nadawana przez JS)
   ========================================================================= */
#formacja.is-anim .s-for-pin { height: 100vh; min-height: 640px; overflow: clip; isolation: isolate; }
/* ciemne pole po lewej oddziela tekst od ruchu */
#formacja.is-anim .s-for-pin::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 7, 13, 0.97) 0%, rgba(3, 7, 13, 0.92) 34%, rgba(3, 7, 13, 0.5) 45%, rgba(3, 7, 13, 0) 55%),   /* --s-noc */
    linear-gradient(0deg, rgba(3, 7, 13, 0.7) 0%, rgba(3, 7, 13, 0) 14%),
    linear-gradient(180deg, rgba(3, 7, 13, 0.92) 0%, rgba(3, 7, 13, 0) 11%);
}
#formacja.is-anim .s-for-uklad {
  height: 100%;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  padding-top: calc(var(--pasek-h) + 26px);
  padding-bottom: 40px;
}
#formacja.is-anim .s-glowa { margin-bottom: clamp(20px, 3.6vh, 36px); gap: clamp(14px, 2.2vh, 22px); }
#formacja.is-anim .s-glowa h2 { font-size: min(var(--t-h2), 6.9vh); }

/* panel kroków: ciemne tło oddziela tekst od kart; aktywny krok rozwinięty i jasny, reszta przygaszona */
#formacja.is-anim .s-for-kroki {
  padding: 6px 22px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(14, 28, 43, 0.94), rgba(5, 11, 19, 0.96));
  border: 1px solid rgba(160, 220, 255, 0.14);        /* --s-linia-noc */
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(216, 244, 255, 0.05);
  max-width: 520px;
}
#formacja.is-anim .s-for-krok { padding: clamp(12px, 1.9vh, 16px) 0; row-gap: 0; }
#formacja.is-anim .s-for-krok:first-child { border-top: 0; }
#formacja.is-anim .s-for-krok:last-child { border-bottom: 0; }
#formacja.is-anim .s-for-krok h3 {
  font-size: 1.125rem; line-height: 1.3;
  color: var(--s-cichy-noc);
  transition: color var(--d-wolno) var(--e-out);
}
#formacja.is-anim .s-for-krok-nr {
  width: 36px; height: 36px; font-size: 0.9375rem;
  color: var(--s-cichy-noc);
  transition: color var(--d-wolno) var(--e-out), background-color var(--d-wolno) var(--e-out), border-color var(--d-wolno) var(--e-out);
}
#formacja.is-anim .s-for-krok { grid-template-columns: 36px minmax(0, 1fr); }
#formacja.is-anim .s-for-krok-opis {
  display: grid; grid-template-rows: 0fr;
  opacity: 0; transform: translateY(-6px);
  transition: grid-template-rows 0.55s var(--e-out), opacity 0.45s var(--e-out), transform 0.55s var(--e-out);
}
#formacja.is-anim .s-for-krok-opis p { overflow: hidden; min-height: 0; padding-top: 8px; font-size: 0.98rem; }
#formacja.is-anim .s-for-krok.is-akt h3 { color: var(--s-bialy); }
#formacja.is-anim .s-for-krok.is-akt .s-for-krok-nr { background: var(--s-piasek); border-color: var(--s-piasek); color: var(--s-tusz); }
#formacja.is-anim .s-for-krok.is-akt .s-for-krok-opis { grid-template-rows: 1fr; opacity: 1; transform: none; transition-delay: 0.08s; }
#formacja.is-anim .s-for-legenda { margin-top: clamp(16px, 2.6vh, 26px); }

#formacja.is-anim .s-for-scena {
  --for-cx: 71%;
  --for-hy: max(22%, calc(var(--pasek-h) + 118px));
  --for-cy: 60%;
  position: absolute; inset: 0; z-index: 0;
  height: auto;
}
#formacja.is-anim .s-for-szyk { transform: none; }
#formacja.is-anim .s-for-podloga { opacity: 0; }
#formacja.is-anim .s-for-horyzont { left: 49%; right: var(--o-margines); }
/* podpis omija okrągły przycisk „na górę” (52 px + 20 px od krawędzi) */
#formacja.is-anim .s-for-nota { position: absolute; right: max(var(--o-margines), 88px); bottom: 22px; z-index: 2; }

@media (max-width: 1199px) {
  #formacja.is-anim .s-for-uklad { grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); }
  #formacja.is-anim .s-for-horyzont-top span { display: none; }
  #formacja.is-anim .s-for-cel-karta { max-width: 210px; }
}
/* niski ekran: zwięźlej, żeby panel kroków zawsze mieścił się w kadrze */
@media (max-height: 760px) {
  #formacja.is-anim .s-for-legenda { display: none; }
  #formacja.is-anim .s-glowa h2 { font-size: min(var(--t-h2), 6.3vh); }
  #formacja.is-anim .s-glowa { margin-bottom: 18px; gap: 12px; }
  #formacja.is-anim .s-lead { font-size: 1.0625rem; line-height: 1.5; }
  #formacja.is-anim .s-for-kroki { padding: 2px 18px; }
  #formacja.is-anim .s-for-krok { padding: 10px 0; }
  #formacja.is-anim .s-for-krok h3 { font-size: 1.0625rem; }
  #formacja.is-anim .s-for-krok-opis p { font-size: 0.9375rem; line-height: 1.5; padding-top: 6px; }
}


/* ===== sekcja: operacja ===== */
/* SEKCJA „operacja” — sześć faz jednej operacji (papier · przypięta · przewijanie w bok).
   Kolejność czytania: tytuł → akapit wiodący → karta fazy (cyfra + nazwa → opis → „Co dostajesz” → kto działa).
   Domyślnie (telefon, ograniczony ruch, bez JS): nagłówek u góry, panele jeden pod drugim.
   Klasa .is-poziomo (dodaje JS przy pełnym ruchu ≥992 px): scena z nagłówkiem przypięta, tor 6 paneli jedzie w bok,
   a postęp pokazuje cienka linia pod akapitem (nazwy faz to przyciski). */

#operacja {
  --op-gap: clamp(16px, 1.8vw, 28px);
  --op-w: min(76vw, 1060px);
  --op-pad: calc((100% - min(var(--szer-max), 100% - 2 * var(--o-margines))) / 2);
  --op-karta-pad: clamp(18px, 0.8rem + 1.4vw, 34px);
}

/* ---------- nagłówek: tytuł → akapit wiodący ---------- */
#operacja .s-op-glowa {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "tytul" "lead";
  column-gap: clamp(24px, 4vw, 72px);
  row-gap: clamp(12px, 0.5rem + 0.6vw, 20px);
  margin-bottom: clamp(36px, 1.6rem + 2.6vw, 64px);
}
#operacja .s-op-glowa h2 { grid-area: tytul; align-self: end; max-width: 20ch; }
#operacja .s-op-glowa .s-lead { grid-area: lead; align-self: start; max-width: 64ch; }

/* ---------- linia postępu (tylko w trybie poziomym) ---------- */
#operacja .s-op-postep { grid-area: postep; display: none; position: relative; min-width: 0; height: 46px; margin-inline: 6px; }
#operacja .s-op-postep::before,
#operacja .s-op-postep-wyp { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 2px; }
#operacja .s-op-postep::before { background: var(--s-linia); }
#operacja .s-op-postep-wyp { display: block; background: var(--s-holo-tusz); transform: scaleX(0); transform-origin: 0 50%; }
#operacja .s-op-postep-pkt li { position: absolute; top: 0; left: calc(var(--p) * 100%); transform: translateX(-50%); }
#operacja .s-op-postep-pkt li:first-child { transform: translateX(-7px); }
#operacja .s-op-postep-pkt li:last-child { transform: translateX(calc(-100% + 7px)); }
#operacja .s-op-postep-pkt button {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 0 2px 6px;
  font-family: var(--f-tekst); font-size: 0.8125rem; font-weight: 500; line-height: 1.2;
  color: var(--s-cichy); white-space: nowrap;
  transition: color var(--d-wolno) var(--e-out);
}
#operacja .s-op-postep-pkt button::before {
  content: ""; flex: none;
  width: 10px; height: 10px; margin-top: 2px; border-radius: 50%;
  border: 2px solid var(--s-linia-mocna); background: var(--s-papier-2);
  transition: background-color var(--d-wolno) var(--e-out), border-color var(--d-wolno) var(--e-out), transform var(--d-wolno) var(--e-out);
}
#operacja .s-op-postep-pkt li:first-child button { align-items: flex-start; }
#operacja .s-op-postep-pkt li:last-child button { align-items: flex-end; }
#operacja .s-op-postep-n { display: inline-flex; align-items: center; gap: 5px; }
#operacja .s-op-postep-pkt svg { width: 14px; height: 14px; flex: none; color: var(--s-piasek-tusz); }
#operacja .s-op-postep-pkt li.is-on button { color: var(--s-tekst); }
#operacja .s-op-postep-pkt li.is-on button::before { background: var(--s-holo-tusz); border-color: var(--s-holo-tusz); }
#operacja .s-op-postep-pkt li.is-decyzja button::before { border-color: var(--s-piasek-tusz); }
#operacja .s-op-postep-pkt li.is-decyzja.is-on button::before { background: var(--s-piasek); border-color: var(--s-piasek-tusz); }
#operacja .s-op-postep-pkt li.is-wkrotce button::before { border-style: dashed; }
#operacja .s-op-postep-pkt li.is-teraz button { color: var(--s-tusz); }
#operacja .s-op-postep-pkt li.is-teraz button::before { transform: scale(1.35); }
@media (hover: hover) {
  #operacja .s-op-postep-pkt button:hover { color: var(--s-tusz); }
  #operacja .s-op-postep-pkt button:hover::before { border-color: var(--s-holo-tusz); }
}

/* ---------- tor: domyślnie pionowy ---------- */
#operacja .s-op-okno { width: min(var(--szer-max), 100% - 2 * var(--o-margines)); margin-inline: auto; }
#operacja .s-op-tor { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-gap); }
#operacja .s-op-panel { position: relative; min-width: 0; }
#operacja .s-op-panel:nth-child(1) { z-index: 6; }
#operacja .s-op-panel:nth-child(2) { z-index: 5; }
#operacja .s-op-panel:nth-child(3) { z-index: 4; }
#operacja .s-op-panel:nth-child(4) { z-index: 3; }
#operacja .s-op-panel:nth-child(5) { z-index: 2; }
#operacja .s-op-panel:nth-child(6) { z-index: 1; }
#operacja .s-op-ruch { height: 100%; }

/* ---------- karta fazy ---------- */
#operacja .s-op-karta {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 1rem + 1.6vw, 40px);
  padding: var(--op-karta-pad);
  border-radius: var(--r-karta);
  background: var(--s-papier);
  border: 1px solid var(--s-linia);
  box-shadow: 0 40px 70px -52px rgba(7, 17, 26, 0.42); /* --s-tusz */
  transform-origin: 50% 50%;
}
#operacja .s-op-karta::before {
  content: ""; position: absolute; top: -1px; left: var(--op-karta-pad); z-index: 1;
  width: 72px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--s-holo-2);
}
#operacja .s-op-panel--decyzja .s-op-karta::before { width: 128px; background: var(--s-piasek); }
#operacja .s-op-panel--wkrotce .s-op-karta { border: 1.5px dashed var(--s-linia-mocna); box-shadow: none; }
#operacja .s-op-panel--wkrotce .s-op-karta::before { background: var(--s-linia-mocna); }
@media (min-width: 880px) {
  #operacja .s-op-karta { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: stretch; }
}

/* ---------- kolumna tekstu ---------- */
#operacja .s-op-tekst { display: flex; flex-direction: column; gap: clamp(14px, 0.6rem + 0.8vh, 20px); min-width: 0; }
#operacja .s-op-glowka { display: flex; align-items: center; gap: clamp(12px, 1.2vw, 20px); min-width: 0; }

/* konturowa cyfra — znak porządku; wypełnienie odsłaniane od dołu (clip-path ustawia JS) */
#operacja .s-op-numer {
  position: relative; flex: none; display: block;
  min-width: 0.62em;
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(4.25rem, 2.4rem + 3.6vw, 7rem);
  line-height: 0.86;
  letter-spacing: 0;
  text-align: center;
  -webkit-user-select: none; user-select: none;
}
#operacja .s-op-numer-obrys { display: block; color: transparent; -webkit-text-stroke: 1.5px var(--s-holo-2); }
#operacja .s-op-numer-wyp {
  position: absolute; inset: 0; display: block;
  color: var(--s-holo-tusz); -webkit-text-stroke: 1.5px var(--s-holo-tusz);
  clip-path: inset(100% 0 0 0);
}
#operacja .s-op-panel--decyzja .s-op-numer-obrys { -webkit-text-stroke-color: var(--s-piasek-tusz); }
#operacja .s-op-panel--decyzja .s-op-numer-wyp { color: var(--s-piasek); -webkit-text-stroke-color: var(--s-piasek-tusz); }
#operacja .s-op-panel--wkrotce .s-op-numer-obrys { -webkit-text-stroke-color: var(--s-linia-mocna); }
#operacja .s-op-panel--wkrotce .s-op-numer-wyp { color: var(--s-papier-3); -webkit-text-stroke-color: var(--s-linia-mocna); }

#operacja .s-op-nazwa { display: grid; gap: 6px; min-width: 0; }
#operacja .s-op-nazwa h3 {
  font-size: clamp(1.75rem, 1.1rem + 1.5vw, 2.5rem);
  line-height: 1.04; letter-spacing: -0.025em; font-weight: 600;
}
#operacja .s-op-zwykle { font-size: 1.0625rem; font-weight: 500; line-height: 1.35; color: var(--s-holo-tusz); }

#operacja .s-op-opis { font-size: var(--t-tekst); line-height: 1.6; color: var(--s-tekst); max-width: 54ch; }

/* „Co dostajesz” — wyraźnie oddzielona ramka */
#operacja .s-op-lup {
  display: grid; gap: 10px;
  padding: 14px 18px 16px;
  border-radius: var(--r-maly);
  background: var(--s-papier-2);
  border: 1px solid var(--s-linia);
}
#operacja .s-op-lup-t {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-display); font-size: 0.9375rem; font-weight: 600; line-height: 1.2;
  color: var(--s-tusz);
}
#operacja .s-op-lup-t svg { width: 18px; height: 18px; flex: none; color: var(--s-holo-tusz); }
#operacja .s-op-lista { display: grid; gap: 6px; }
#operacja .s-op-lista li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start;
  font-size: 0.9375rem; line-height: 1.45; color: var(--s-tusz);
}
#operacja .s-op-lista svg { width: 18px; height: 18px; margin-top: 2px; color: var(--s-holo-tusz); }
#operacja .s-op-lista-wkrotce, #operacja .s-op-lista-wkrotce svg { color: var(--s-piasek-tusz); }

/* kto działa w tej fazie: SEOLDIER (cicho) / Twoja decyzja (pigułka) / w przygotowaniu */
#operacja .s-op-kto {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.9375rem; line-height: 1.35;
  color: var(--s-cichy);
}
#operacja .s-op-kto-ik {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(46, 143, 208, 0.1); /* --s-holo-2 */
  color: var(--s-holo-tusz);
}
#operacja .s-op-kto-ik svg { width: 18px; height: 18px; }
#operacja .s-op-kto b { font-weight: 600; color: var(--s-tusz); }
#operacja .s-op-kto--ty {
  padding: 5px 18px 5px 5px;
  border-radius: var(--r-pigulka);
  background: var(--s-piasek);
  color: var(--s-tusz);
  font-size: 1rem;
  box-shadow: 0 14px 26px -18px rgba(110, 95, 53, 0.9); /* --s-piasek-tusz */
}
#operacja .s-op-kto--ty .s-op-kto-ik { width: 34px; height: 34px; background: var(--s-tusz); color: var(--s-piasek); }
#operacja .s-op-kto--ty b { font-family: var(--f-display); }
#operacja .s-op-kto--wkrotce { padding: 5px 16px 5px 5px; border-radius: var(--r-pigulka); border: 1.5px dashed var(--s-piasek-tusz); color: var(--s-piasek-tusz); }
#operacja .s-op-kto--wkrotce .s-op-kto-ik { background: rgba(210, 194, 154, 0.3); color: var(--s-piasek-tusz); } /* --s-piasek */
#operacja .s-op-kto--wkrotce b { color: var(--s-piasek-tusz); }

/* ---------- ekran fazy (ciemny monitor z ilustracją) ---------- */
#operacja .s-op-ekran {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  min-width: 0; min-height: 0;
  border-radius: 18px;
  background: var(--s-noc-2);
  border: 1px solid var(--s-noc-3);
  color: var(--s-tekst-noc);
  box-shadow: 0 30px 60px -40px rgba(3, 7, 13, 0.6); /* --s-noc */
}
#operacja .s-op-ekran::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 18% 0%, rgba(46, 143, 208, 0.18), transparent 62%),          /* --s-holo-2 */
    linear-gradient(rgba(160, 220, 255, 0.035) 1px, transparent 1px) 0 0 / 28px 28px,        /* --s-linia-noc */
    linear-gradient(90deg, rgba(160, 220, 255, 0.035) 1px, transparent 1px) 0 0 / 28px 28px; /* --s-linia-noc */
}
#operacja .s-op-ilu { display: block; flex: none; width: 100%; height: auto; aspect-ratio: 4 / 3; padding: clamp(12px, 1.6vw, 24px); overflow: visible; }

/* ilustracje SVG — kreski monolinią, kolory palety nocy, podpisy zwykłym krojem */
#operacja .s-op-k { fill: none; stroke: var(--s-holo); stroke-width: 1.8; stroke-linecap: square; }
#operacja .s-op-kl { fill: none; stroke: var(--s-holo-2); stroke-width: 1.6; }
#operacja .s-op-kc { fill: none; stroke: var(--s-linia-noc-mocna); stroke-width: 1.4; }
#operacja .s-op-kp { fill: none; stroke: var(--s-piasek); stroke-width: 1.6; }
#operacja .s-op-kt { fill: none; stroke: var(--s-linia-noc); }
#operacja .s-op-w { fill: var(--s-holo); }
#operacja .s-op-wl { fill: var(--s-holo-2); }
#operacja .s-op-wp { fill: var(--s-piasek); }
#operacja .s-op-wd { fill: var(--s-lod); }
#operacja .s-op-wn { fill: var(--s-noc-3); }
#operacja .s-op-wh { fill: rgba(108, 216, 255, 0.1); }   /* --s-holo */
#operacja .s-op-wh2 { fill: rgba(108, 216, 255, 0.16); } /* --s-holo */
#operacja .s-op-pol { opacity: 0.55; }
#operacja .s-op-t {
  font-family: var(--f-tekst); font-size: 14px; font-weight: 500; letter-spacing: 0;
  fill: var(--s-tekst-noc); stroke: none;
}
#operacja .s-op-t--duzy { font-family: var(--f-display); font-size: 16px; font-weight: 600; }
#operacja .s-op-t--maly { font-size: 12.5px; }
#operacja .s-op-t--holo { fill: var(--s-holo); }
#operacja .s-op-t--pia { fill: var(--s-piasek); }
#operacja .s-op-t--lod { fill: var(--s-lod); }
#operacja .s-op-t--tlo { paint-order: stroke; stroke: var(--s-noc-2); stroke-width: 6px; stroke-linejoin: round; }
#operacja .s-op-liczba { font-family: var(--f-display); font-weight: 600; font-size: 56px; letter-spacing: -0.02em; fill: var(--s-lod); }
@media (max-width: 560px) {
  #operacja .s-op-t--opc { display: none; }
  #operacja .s-op-ilu { padding: 8px 10px; }
  #operacja .s-op-t { font-size: 16px; }
  #operacja .s-op-t--duzy { font-size: 18px; }
  #operacja .s-op-t--maly { font-size: 14px; }
}

/* ---------- tryb poziomy: scena przypięta, tor jedzie w bok ---------- */
#operacja.is-poziomo .s-op-scena {
  height: 100vh;
  display: flex; flex-direction: column;
  gap: clamp(12px, 2vh, 22px);
  padding: calc(var(--pasek-h) + 18px) 0 clamp(10px, 1.8vh, 20px);
}
#operacja.is-poziomo .s-op-glowa {
  flex: none;
  grid-template-areas: "tytul" "lead" "postep";
  align-items: center;
  row-gap: clamp(8px, 1.3vh, 14px);
  margin-bottom: 0;
}
#operacja.is-poziomo .s-op-glowa h2 { font-size: min(var(--t-h2), 6.4vh); }
#operacja.is-poziomo .s-op-glowa .s-lead { max-width: 76ch; }
#operacja.is-poziomo .s-op-postep { display: block; margin-top: clamp(4px, 1vh, 10px); }
#operacja.is-poziomo .s-op-okno { width: 100%; flex: 1; min-height: 0; overflow: clip; }
#operacja.is-poziomo .s-op-tor {
  display: flex; height: 100%;
  gap: var(--op-gap);
  padding: 4px var(--op-pad) 26px;
}
#operacja.is-poziomo .s-op-panel { flex: none; width: var(--op-w); }
@media (max-width: 1279px) { #operacja { --op-w: 80vw; } }
#operacja.is-poziomo .s-op-karta { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
#operacja.is-poziomo .s-op-ekran { height: 100%; min-height: 0; }
#operacja.is-poziomo .s-op-ilu { height: 100%; min-height: 0; aspect-ratio: auto; }
#operacja.is-poziomo .s-op-numer { font-size: min(clamp(4.5rem, 2rem + 5vw, 7.5rem), 13vh); }
#operacja.is-poziomo .s-op-numer-obrys, #operacja.is-poziomo .s-op-numer-wyp { -webkit-text-stroke-width: 2px; }
@media (max-height: 800px) {
  #operacja.is-poziomo { --op-karta-pad: clamp(18px, 0.5rem + 1vw, 26px); }
  #operacja.is-poziomo .s-op-tekst { gap: 12px; }
  #operacja.is-poziomo .s-op-nazwa h3 { font-size: clamp(1.6rem, 0.9rem + 1.4vw, 2.2rem); }
  #operacja.is-poziomo .s-op-opis { font-size: 1rem; line-height: 1.55; }
  #operacja.is-poziomo .s-op-lup { gap: 8px; padding: 12px 16px 13px; }
  #operacja.is-poziomo .s-op-lista { gap: 4px; }
  #operacja.is-poziomo .s-op-lista li { font-size: 0.875rem; line-height: 1.4; }
}
@media (max-height: 760px) {
  #operacja.is-poziomo .s-op-glowa .s-lead { font-size: 1rem; }
  #operacja.is-poziomo .s-op-zwykle { font-size: 0.9375rem; }
  #operacja.is-poziomo .s-op-kto { font-size: 0.875rem; }
  #operacja.is-poziomo .s-op-kto-ik { width: 28px; height: 28px; }
}

/* ---------- pod torem ---------- */
#operacja .s-op-dol { display: grid; justify-items: center; gap: 18px; margin-top: clamp(40px, 2rem + 2.4vw, 72px); text-align: center; }
#operacja .s-op-btn-krotki { display: none; }
@media (max-width: 480px) {
  #operacja .s-op-btn-pelny { display: none; }
  #operacja .s-op-btn-krotki { display: inline; }
}

/* ---------- telefon ---------- */
@media (max-width: 640px) {
}
@media (max-width: 560px) {
  #operacja .s-op-glowka { gap: 12px; }
  #operacja .s-op-kto { align-items: center; }
  #operacja .s-op-lup { padding: 12px 14px 14px; }
}
@media (max-width: 420px) {
  #operacja .s-op-numer { font-size: 4rem; }
  #operacja .s-op-nazwa h3 { font-size: 1.5rem; }
  #operacja .s-op-zwykle { font-size: 1rem; }
  #operacja .s-op-kto--ty { font-size: 0.9375rem; align-items: center; }
}


/* ===== sekcja: teren ===== */
/* TEREN — mapa sztabowa (S.stolOperacyjny, WebGL z cząstek) + legenda „Jak czytać mapę”.
   Ścieżka czytania: tytuł → akapit wiodący → mapa z podpisanymi celami → legenda → co sprawdza rekonesans.
   Mapa zajmuje pełną szerokość (silnik sam kadruje scenę); legenda leży POD mapą, nigdy na niej:
   desktop — pasek czterech kroków z łącznikami w poziomie; tablet — 2×2; telefon — lista z łącznikiem w pionie.
   Stany początkowe animacji ustawia JS (.is-czeka, transformacje GSAP) — bez JS wszystko widoczne. */

#teren { --ter-pad: 12px; --ter-odstep: 8px; }

/* ---------- nagłówek: do lewej, nad kaflem ---------- */
#teren .s-ter-glowa { margin-bottom: clamp(32px, 2rem + 1.4vw, 52px); gap: var(--o-4); max-width: 860px; }
#teren .s-ter-glowa h2 { max-width: 16ch; }
#teren .s-ter-glowa .s-lead { max-width: 60ch; }

#teren .s-ter-scena { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }

/* ---------- stół: korzeń mapy (bez transformacji — silnik mierzy go getBoundingClientRect) ---------- */
#teren .s-ter-stol {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 540px;
}
/* płyta: wizualny kafel; przechyla się przy wjeździe (transform tylko tutaj) */
#teren .s-ter-plyta {
  /* punkty mapy w trybie zapasowym (bez WebGL / bez JS) — szeroki kadr */
  --b-x: 30%; --b-y: 72%;
  --c0-x: 70%; --c0-y: 30%;
  --c1-x: 50%; --c1-y: 46%;
  --c2-x: 80%; --c2-y: 62%;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-karta);
  background:
    radial-gradient(70% 80% at 55% 55%, rgba(46, 143, 208, 0.12), transparent 70%),   /* z --s-holo-2 */
    var(--s-noc);
  border: 1px solid var(--s-linia-noc-mocna);
  box-shadow:
    0 60px 120px -60px rgba(46, 143, 208, 0.45),   /* z --s-holo-2 */
    0 30px 60px -30px rgba(3, 7, 13, 0.9);         /* z --s-noc */
  transform-origin: 50% 100%;
}
#teren .s-ter-plyta canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }

/* winieta: przyciemnia brzegi kafla */
#teren .s-ter-winieta {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(216, 244, 255, 0.07), inset 0 0 90px rgba(3, 7, 13, 0.6);   /* z --s-lod, --s-noc */
}

#teren .s-ter-pauza { top: 18px; right: 18px; }
#teren .s-ter-pauza[hidden] { display: none; }   /* .s-pauza ma display: grid, które przykrywa atrybut hidden */

/* ---------- etykiety mapy: szklane karty z ikoną (styl objaśnień z hero) ----------
   transform ustawia silnik; sekcja rozsuwa je, gdy na siebie nachodzą, własnością `translate` (JS) */
#teren .s-mapa3d-etykieta {
  --et-kol: var(--s-piasek); --et-tint: rgba(210, 194, 154, 0.14);   /* z --s-piasek */
  z-index: 2;
  grid-template-columns: 30px auto; column-gap: 11px; row-gap: 1px; align-items: center;
  padding: 9px 15px 9px 9px;
  border-radius: 14px;
  border: 1px solid rgba(160, 220, 255, 0.2);                                  /* z --s-linia-noc */
  background: linear-gradient(160deg, rgba(20, 38, 58, 0.95), rgba(7, 16, 26, 0.93)); /* z --s-noc-3 */
  box-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(216, 244, 255, 0.07);
  font-family: var(--f-display); font-size: 0.875rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em;
  color: var(--s-bialy);
  transition: opacity 0.6s var(--e-out), translate 0.55s var(--e-out), box-shadow var(--d-wolno) var(--e-out), border-color var(--d-wolno) var(--e-out);
}
#teren .s-mapa3d-etykieta--baza { --et-kol: var(--s-holo); --et-tint: rgba(108, 216, 255, 0.12); border-color: rgba(108, 216, 255, 0.34); color: var(--s-bialy); }
#teren .s-mapa3d-etykieta span {
  font-family: var(--f-tekst); font-weight: 400; font-size: 0.8125rem; line-height: 1.3; letter-spacing: 0;
  color: var(--s-tekst-noc);
}
#teren .s-ter-et-ik {
  grid-column: 1; grid-row: 1 / span 2;
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--et-tint); color: var(--et-kol);
  box-shadow: inset 0 0 0 1px var(--et-tint);
}
#teren .s-ter-et-ik svg { width: 17px; height: 17px; }
/* wynik słowami — znaczek doklejony do karty, wjeżdża płynnie po zajęciu celu */
#teren .s-mapa3d-etykieta b {
  position: absolute; top: -11px; right: 12px;
  padding: 3px 9px 3px 8px;
  border-radius: var(--r-pigulka);
  background: var(--s-holo); color: var(--s-tusz);
  font-family: var(--f-display); font-size: 0.71875rem; line-height: 1.2; font-weight: 600; letter-spacing: 0;
  box-shadow: 0 6px 16px -6px rgba(108, 216, 255, 0.7);                        /* z --s-holo */
  opacity: 0; transform: translateY(5px) scale(0.9);
  transition: opacity 0.5s var(--e-out), transform 0.6s var(--e-out);
}
#teren .s-mapa3d-etykieta.is-zajety b { opacity: 1; transform: none; }
#teren .s-mapa3d-etykieta.is-zajety:not(.s-mapa3d-etykieta--baza) { border-color: rgba(108, 216, 255, 0.36); }

/* podświetlenie z legendy (najechanie na krok) — tylko kolory/krycie */
#teren .s-ter-stol[data-ter-wskaz] .s-mapa3d-etykieta.is-on { opacity: 0.3; }
#teren .s-ter-stol[data-ter-wskaz="baza"] .s-mapa3d-etykieta--baza.is-on,
#teren .s-ter-stol[data-ter-wskaz="cele"] .s-mapa3d-etykieta:not(.s-mapa3d-etykieta--baza).is-on {
  opacity: 1;
  border-color: rgba(210, 194, 154, 0.6);                                                    /* z --s-piasek */
  box-shadow: 0 0 0 1px rgba(210, 194, 154, 0.4), 0 0 30px -6px rgba(210, 194, 154, 0.5);
}
#teren .s-ter-stol[data-ter-wskaz="baza"] .s-mapa3d-etykieta--baza.is-on {
  border-color: rgba(108, 216, 255, 0.6);                                                    /* z --s-holo */
  box-shadow: 0 0 0 1px rgba(108, 216, 255, 0.4), 0 0 30px -6px rgba(108, 216, 255, 0.55);
}

/* ---------- legenda „Jak czytać mapę” (domyślnie: lista z łącznikiem w pionie) ---------- */
#teren .s-ter-konsola {
  position: relative;
  padding: 18px 12px 8px;
  border-radius: 20px;
  background: rgba(238, 247, 252, 0.035);      /* z --s-bialy */
  border: 1px solid var(--s-linia-noc);
}
#teren .s-ter-konsola-t {
  padding: 0 10px 14px; margin-bottom: 6px;
  border-bottom: 1px solid var(--s-linia-noc);
  font-size: 1rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--s-bialy);
}

#teren .s-ter-legenda { display: grid; gap: 2px; }
#teren .s-ter-poz {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: stretch;
  padding: 11px 10px;
  border-radius: 14px;
  border: 1px solid transparent;
  transition: background-color var(--d-wolno) var(--e-out), border-color var(--d-wolno) var(--e-out), opacity var(--d-zalanie) var(--e-out);
}
/* znacznik aktywnego kroku (krawędź) */
#teren .s-ter-poz::before {
  content: ""; position: absolute; left: -1px; top: 16px; bottom: 16px; width: 2px; border-radius: 2px;
  background: var(--c-noc); transform: scaleY(0); transition: transform var(--d-wolno) var(--e-out);
}
#teren .s-ter-poz.is-akt {
  background: rgba(238, 247, 252, 0.05);       /* z --s-bialy */
  border-color: var(--s-linia-noc);
}
#teren .s-ter-poz.is-akt::before { transform: none; }
#teren .s-ter-c-wrog { --c: var(--s-wrog-tusz); --c-noc: var(--s-wrog); --c-tint: rgba(255, 138, 138, 0.14); /* z --s-wrog */ }

/* kolumna ikony + łącznik do następnego kroku (sięga do jego ikony: 11 + 1 + 2 + 1 + 11 = 26 px) */
#teren .s-ter-kol { display: flex; flex-direction: column; align-items: center; min-height: 0; }
#teren .s-ter-lacz {
  position: relative; flex: 1 1 auto; width: 1px; margin-bottom: -26px; overflow: hidden;
  background: var(--s-linia-noc-mocna);
}
#teren .s-ter-lacz::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--s-holo-2), var(--s-holo));
  transform-origin: 50% 0; transition: transform 0.7s var(--e-out);
}
#teren .s-ter-ikona {
  position: relative; z-index: 1; flex: none;
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 11px;
  background: linear-gradient(var(--c-tint), var(--c-tint)), var(--s-noc-2);
  color: var(--c-noc);
  transition: transform var(--d-zalanie) var(--e-out);
}
#teren .s-ter-ikona svg { width: 21px; height: 21px; }
#teren .s-ter-ikona::after {
  content: ""; position: absolute; inset: -5px; border-radius: 15px; pointer-events: none;
  border: 1px solid var(--c-noc); opacity: 0; transform: scale(0.9);
  transition: opacity var(--d-wolno) var(--e-out), transform var(--d-wolno) var(--e-out);
}
#teren .s-ter-poz.is-akt .s-ter-ikona::after { opacity: 0.6; transform: none; }

#teren .s-ter-poz-tresc { min-width: 0; padding-top: 1px; }
#teren .s-ter-poz h4 { font-size: 1.125rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; color: var(--s-bialy); }
#teren .s-ter-poz p { margin-top: 4px; font-size: 0.875rem; line-height: 1.45; color: var(--s-cichy-noc); }

/* stan przed „rozruchem” legendy (klasę ustawia JS tylko przy pełnym ruchu) */
#teren .s-ter-konsola.is-czeka .s-ter-poz:not(.is-on) { opacity: 0.3; }
#teren .s-ter-konsola.is-czeka .s-ter-poz:not(.is-on) .s-ter-ikona { transform: scale(0.8); }
#teren .s-ter-konsola.is-czeka .s-ter-poz:not(.is-lacz) .s-ter-lacz::after { transform: scaleY(0); }

/* ---------- pod mapą: co sprawdza rekonesans + nota ---------- */
#teren .s-ter-stopka {
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 14px 22px;
  margin-top: 32px;
}
@media (min-width: 1200px) { #teren .s-ter-stopka { grid-template-columns: auto minmax(0, 1fr); } }
#teren .s-ter-stopka-t { font-size: 1.0625rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--s-bialy); white-space: nowrap; }
#teren .s-ter-intel { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
#teren .s-ter-intel li {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 16px 0 12px;
  border-radius: var(--r-pigulka);
  border: 1px solid var(--s-linia-noc);
  background: rgba(238, 247, 252, 0.03);       /* z --s-bialy */
  font-size: 0.9375rem; color: var(--s-tekst-noc); white-space: nowrap;
}
#teren .s-ter-intel li svg { width: 18px; height: 18px; flex: none; color: var(--s-holo); }
#teren .s-ter-stopka-nota { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 1200px) { #teren .s-ter-stopka-nota { justify-self: end; } }

/* ---------- tryb zapasowy: bez WebGL (.is-zapas) albo bez JS; gdy silnik ruszy (.is-mapa) — gaśnie ---------- */
#teren .s-ter-zapas {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 70% at 60% 52%, rgba(46, 143, 208, 0.18), transparent 70%),  /* z --s-holo-2 */
    url(../img/kontury-ciemne.svg) center / cover no-repeat,
    var(--s-noc);
  transition: opacity 0.9s var(--e-out);
}
#teren .s-ter-stol.is-mapa .s-ter-zapas { opacity: 0; visibility: hidden; transition: opacity 0.9s var(--e-out), visibility 0s linear 0.9s; }
#teren .s-ter-zapas-wektory { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; fill: none; }
#teren .s-ter-zapas-wektory path { stroke: var(--s-holo); stroke-width: 1.5; stroke-dasharray: 7 6; vector-effect: non-scaling-stroke; opacity: 0.8; }
#teren .s-ter-zapas-wektory--waski { display: none; }
#teren .s-ter-zn { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); }
#teren .s-ter-zn--baza { --x: var(--b-x); --y: var(--b-y); width: 44px; height: 28px; border: 1.5px solid var(--s-holo); background: rgba(108, 216, 255, 0.12); }
#teren .s-ter-zn--cel { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--s-piasek); background: rgba(210, 194, 154, 0.16); }
#teren .s-ter-zn--wrog { width: 14px; height: 14px; border: 1.5px solid var(--s-wrog); transform: translate(-50%, -50%) rotate(45deg); margin: 30px 0 0 30px; opacity: 0.45; }
#teren .s-ter-zn[data-zn="0"] { --x: var(--c0-x); --y: var(--c0-y); }
#teren .s-ter-zn[data-zn="1"] { --x: var(--c1-x); --y: var(--c1-y); }
#teren .s-ter-zn[data-zn="2"] { --x: var(--c2-x); --y: var(--c2-y); }

/* etykiety w zapasie: karta wyśrodkowana nad swoim znakiem (pozycja z --z-*) */
#teren [data-punkt="baza"] { --z-x: var(--b-x); --z-y: var(--b-y); }
#teren [data-punkt="0"] { --z-x: var(--c0-x); --z-y: var(--c0-y); }
#teren [data-punkt="1"] { --z-x: var(--c1-x); --z-y: var(--c1-y); }
#teren [data-punkt="2"] { --z-x: var(--c2-x); --z-y: var(--c2-y); }
html:not(.s-js) #teren .s-mapa3d-etykieta,
#teren .s-ter-stol.is-zapas .s-mapa3d-etykieta { opacity: 1; left: var(--z-x); top: var(--z-y); transform: translate(-50%, calc(-100% - 26px)); }
html:not(.s-js) #teren .s-mapa3d-etykieta b,
#teren .s-ter-stol.is-zapas .s-mapa3d-etykieta b { opacity: 1; transform: none; }
html:not(.s-js) #teren .s-ter-pauza,
#teren .s-ter-stol.is-zapas .s-ter-pauza { display: none; }

/* ---------- desktop: legenda jako pasek czterech kroków pod mapą (łącznik w poziomie) ---------- */
@media (min-width: 992px) {
  #teren .s-ter-konsola { padding: 18px 16px 14px; }
  #teren .s-ter-konsola-t { padding: 0 var(--ter-pad) 14px; margin-bottom: 10px; }
  #teren .s-ter-legenda { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ter-odstep); }
  #teren .s-ter-poz { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: var(--ter-pad); align-content: start; }
  #teren .s-ter-poz::before { left: 16px; right: 16px; top: -1px; bottom: auto; width: auto; height: 2px; transform: scaleX(0); }
  #teren .s-ter-kol { flex-direction: row; align-items: center; }
  /* łącznik: od ikony do ikony następnego kroku (padding + odstęp + padding − 8 px oddechu) */
  #teren .s-ter-lacz { width: auto; height: 1px; margin: 0 calc(-1 * (2 * var(--ter-pad) + var(--ter-odstep) - 8px)) 0 8px; }
  #teren .s-ter-lacz::after { background: linear-gradient(90deg, var(--s-holo-2), var(--s-holo)); transform-origin: 0 50%; }
  #teren .s-ter-konsola.is-czeka .s-ter-poz:not(.is-lacz) .s-ter-lacz::after { transform: scaleX(0); }
}
@media (min-width: 992px) and (max-width: 1199px) {
  #teren { --ter-pad: 10px; }
  #teren .s-ter-poz p { font-size: 0.84375rem; }
}

/* ---------- tablet i telefon ---------- */
@media (max-width: 991px) {
  #teren .s-ter-stol { aspect-ratio: auto; min-height: 0; height: clamp(420px, 92vw, 720px); }
  #teren .s-ter-plyta {
    --b-x: 26%; --b-y: 72%;
    --c0-x: 64%; --c0-y: 30%;
    --c1-x: 36%; --c1-y: 44%;
    --c2-x: 76%; --c2-y: 58%;
    border-radius: 20px;
  }
  #teren .s-ter-konsola { padding: 16px 10px 8px; }
  #teren .s-ter-legenda { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #teren .s-ter-lacz { display: none; }
  #teren .s-ter-pauza { top: 14px; right: 14px; }
  #teren .s-ter-zapas-wektory--szeroki { display: none; }
  #teren .s-ter-zapas-wektory--waski { display: block; }
}
/* wąski kadr: mniejsze karty na mapie, bez ikony */
@media (max-width: 767px) {
  #teren .s-mapa3d-etykieta { grid-template-columns: auto; padding: 7px 11px; border-radius: 12px; font-size: 0.75rem; }
  #teren .s-ter-et-ik { display: none; }
  #teren .s-mapa3d-etykieta span { font-size: 0.75rem; }
  #teren .s-mapa3d-etykieta b { top: -10px; font-size: 0.65625rem; padding: 2px 8px; }
}
@media (max-width: 599px) {
  #teren .s-ter-stol { height: clamp(420px, 118vw, 540px); }
  #teren .s-ter-legenda { grid-template-columns: minmax(0, 1fr); }
  #teren .s-ter-lacz { display: block; }
  #teren .s-ter-poz h4 { font-size: 1.0625rem; }
  #teren .s-ter-stopka-t { white-space: normal; }
  #teren .s-ter-intel li { min-height: 38px; padding: 0 14px 0 10px; font-size: 0.875rem; }
}


/* ===== sekcja: kontrola ===== */
/* KONTROLA — skaner jakości: makieta posta + linia skanu → 22 kontrole, wynik z progiem 85, pętla poprawek.
   Prefiks s-kon-. Stan bez JS / przy ograniczonym ruchu = stan końcowy (wszystko widać).
   JS dodaje: .is-anim (stany początkowe animacji), .is-pin (scena przypięta, desktop), .is-wydany (skan zakończony).
   Typografia: nagłówki i etykiety Poppins (zwykła pisownia), treść Work Sans — bez wersalików i rozstrzelonych liter. */

#kontrola { overflow-x: clip; }

/* ---------- nagłówek: tytuł → akapit wiodący ---------- */
.s-kon-glowa {
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center;
  column-gap: clamp(24px, 4vw, 72px);
  margin-bottom: clamp(40px, 2rem + 3vw, 80px);
}
.s-kon-glowa .s-glowa { margin: 0; max-width: 760px; }
.s-kon-glowa .s-lead { max-width: 56ch; }

/* ---------- scena ---------- */
.s-kon-scena { position: relative; isolation: isolate; }
.s-kon-scena::before {
  /* poświata za postem i panelem — pochodne --s-holo-2 (46,143,208) i --s-holo (108,216,255) */
  content: ""; position: absolute; inset: -6% 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(42% 46% at 26% 52%, rgba(46, 143, 208, 0.14), transparent 72%),
    radial-gradient(36% 40% at 76% 38%, rgba(108, 216, 255, 0.05), transparent 72%);
}
.s-kon-blysk {
  /* błysk przy zakończeniu skanu — pochodna --s-holo */
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(60% 70% at 62% 40%, rgba(108, 216, 255, 0.14), transparent 70%);
}

/* ---------- układ: post | panel, pod spodem pętla ---------- */
.s-kon-uklad {
  display: grid;
  gap: clamp(28px, 1rem + 2.4vw, 56px);
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  grid-template-areas: "post panel" "petla petla";
  align-items: start;
}
.s-kon-lewo { display: contents; }
.s-kon-post { grid-area: post; margin: 0; display: grid; gap: 12px; align-content: start; }
.s-kon-panel { grid-area: panel; }
.s-kon-petla { grid-area: petla; }

/* ---------- makieta posta (ciemne szkło) — dekoracja: cichsza od panelu z treścią ---------- */
.s-kon-karta {
  --kon-o: 12px;
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: var(--kon-o); align-content: start;
  padding: 16px 20px 22px;
  border-radius: var(--r-karta);
  /* delikatne linie pisma (pochodna --s-linia-noc) na szkle noc-3 → noc-2 */
  background:
    linear-gradient(rgba(160, 220, 255, 0.03) 1px, transparent 1px) 0 0 / 100% 22px,
    linear-gradient(180deg, rgba(13, 24, 38, 0.95), rgba(7, 16, 26, 0.92));
  border: 1px solid rgba(108, 216, 255, 0.22); /* --s-holo */
  box-shadow: 0 34px 80px -44px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(216, 244, 255, 0.06); /* --s-lod */
  transition: box-shadow 0.6s var(--e-out), border-color 0.6s var(--e-out);
}
.s-kon.is-wydany .s-kon-karta { border-color: rgba(108, 216, 255, 0.5); box-shadow: var(--s-poswiata), 0 34px 80px -44px rgba(0, 0, 0, 0.9); }

.s-kon-gora {
  display: flex; align-items: center; gap: 9px;
  padding-bottom: 10px; border-bottom: 1px solid var(--s-linia-noc);
  font-family: var(--f-display); font-size: 0.8125rem; font-weight: 600; line-height: 1.3; color: var(--s-tekst-noc);
}
.s-kon-gora svg { width: 16px; height: 16px; flex: none; color: var(--s-holo); }

.s-kon-strefa {
  position: relative; display: grid; gap: 6px; align-content: start; min-width: 0;
  transition: opacity 0.5s var(--e-out);
}
.s-kon-strefa:not(.is-skan) { opacity: 0.34; }
.s-kon-strefa p { line-height: 1.3; }

.s-kon-karta mark { background: rgba(108, 216, 255, 0.14); color: var(--s-holo); padding: 0 3px; border-radius: 3px; }
.s-kon-bar { position: relative; display: block; height: 6px; width: var(--w, 100%); border-radius: 3px; background: rgba(196, 211, 222, 0.15); /* --s-tekst-noc */ }
.s-kon-bar b, .s-kon-bar u { position: absolute; top: 0; bottom: 0; left: var(--l); width: var(--s); border-radius: 3px; }
.s-kon-bar b { background: var(--s-holo); opacity: 0.8; }
.s-kon-bar u { background: var(--s-holo-2); }

.s-kon-tag {
  display: inline-block; margin-right: 7px; padding: 1px 5px; vertical-align: 0.15em;
  border: 1px solid var(--s-linia-noc-mocna); border-radius: 4px;
  font-family: var(--f-display); font-size: 0.625rem; font-weight: 600; line-height: 1.4; letter-spacing: 0; color: var(--s-cichy-noc);
}
.s-kon-fraza { font-size: 0.8125rem; color: var(--s-tekst-noc); }
.s-kon-url { font-size: 0.75rem; color: var(--s-cichy-noc); overflow-wrap: anywhere; }
.s-kon-mt { font-size: 0.9375rem; color: var(--s-holo); }
.s-kon-mt mark { padding: 0; background: none; color: var(--s-lod); }
.s-kon-h1 { font-family: var(--f-display); font-weight: 600; font-size: 1.1875rem; line-height: 1.2 !important; color: var(--s-bialy); letter-spacing: -0.01em; }
.s-kon-h2 { font-family: var(--f-display); font-weight: 600; font-size: 0.9375rem; color: var(--s-bialy); }
.s-kon-h2 mark { padding: 0 2px; }
.s-kon-dane { display: flex; align-items: center; gap: 7px; }
.s-kon-dane .s-kon-bar { flex: 0 1 var(--w); }
.s-kon-dane span {
  flex: none; padding: 0 7px; border-radius: 5px; border: 1px solid rgba(210, 194, 154, 0.4); /* --s-piasek */
  font-family: var(--f-display); font-size: 0.6875rem; font-weight: 600; line-height: 1.55; color: var(--s-piasek);
}
.s-kon-cytat { padding-left: 10px; border-left: 2px solid var(--s-piasek); font-size: 0.8125rem; color: var(--s-tekst-noc); }
.s-kon-media { grid-template-columns: 62px minmax(0, 1fr); align-items: center; column-gap: 12px; }
.s-kon-obraz {
  position: relative; display: grid; place-items: center;
  height: 42px; border-radius: 8px; border: 1px solid var(--s-linia-noc-mocna);
  background: rgba(46, 143, 208, 0.12); /* --s-holo-2 */
}
.s-kon-obraz svg { width: 30px; height: 20px; fill: none; stroke: var(--s-holo-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.s-kon-media-bary { display: grid; gap: 7px; }
.s-kon-faq { gap: 5px; padding-left: 14px; }
.s-kon-faq-t { margin-left: -14px; font-family: var(--f-display); font-size: 0.75rem; font-weight: 600; color: var(--s-tekst-noc); }
.s-kon-faq .s-kon-bar::before { content: ""; position: absolute; left: -14px; top: -1px; width: 8px; height: 8px; border-radius: 2px; border: 1px solid rgba(108, 216, 255, 0.45); }
.s-kon-autor { grid-template-columns: 32px minmax(0, 1fr); align-items: center; column-gap: 10px; }
.s-kon-awatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--s-holo-2); color: var(--s-holo); }
.s-kon-awatar svg { width: 18px; height: 18px; }
.s-kon-autor-t { display: grid; gap: 5px; font-size: 0.8125rem; }
.s-kon-autor-t b { font-family: var(--f-display); font-weight: 600; color: var(--s-bialy); }

/* linia skanu: pudełko wysokości karty, którego dolna krawędź to linia (przesuw yPercent) */
.s-kon-skan {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  /* ślad za linią — pochodna --s-holo */
  background: linear-gradient(180deg, transparent calc(100% - 150px), rgba(108, 216, 255, 0.1) 100%);
  transform: translate3d(0, -100%, 0);
  opacity: 0;
}
.s-kon-skan::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--s-holo-2) 10%, var(--s-holo) 38%, var(--s-lod) 50%, var(--s-holo) 62%, var(--s-holo-2) 90%, transparent);
  box-shadow: 0 0 14px 2px rgba(108, 216, 255, 0.5), 0 0 44px 6px rgba(108, 216, 255, 0.16);
}

/* wiązka: linia skanu przeskakuje szczeliną do panelu */
.s-kon-post { position: relative; }
.s-kon-wiazka {
  position: absolute; left: 100%; top: 0; z-index: 2; pointer-events: none;
  width: clamp(28px, 1rem + 2.4vw, 56px); height: 2px; margin-top: -1px;
  background: linear-gradient(90deg, var(--s-lod), rgba(108, 216, 255, 0.55) 40%, rgba(108, 216, 255, 0)); /* --s-holo */
  box-shadow: 0 0 12px rgba(108, 216, 255, 0.6);
  opacity: 0;
}
.s-kon:not(.is-pin) .s-kon-wiazka { display: none; }

/* ---------- panel: wynik + kontrole + ocena AI (treść do czytania — pełny kontrast, pełne tło) ---------- */
.s-kon-panel {
  position: relative;
  display: grid; gap: clamp(16px, 2.2vh, 26px); align-content: start;
  padding: clamp(18px, 0.8rem + 1vw, 28px);
  border-radius: var(--r-karta);
  border: 1px solid var(--s-linia-noc-mocna);
  /* szkło noc-3 → noc-2 */
  background: linear-gradient(180deg, rgba(13, 24, 38, 0.96), rgba(7, 16, 26, 0.97));
}

.s-kon-wynik { display: grid; grid-template-columns: minmax(130px, 176px) minmax(0, 1fr); gap: 8px 22px; align-items: center; }
.s-kon-wskaznik { position: relative; }
.s-kon-wskaznik svg { width: 100%; height: auto; overflow: visible; }
.s-kon-luk-tor { fill: none; stroke: rgba(160, 220, 255, 0.12); stroke-width: 8; }
.s-kon-luk-wartosc {
  fill: none; stroke-width: 8; stroke-linecap: butt; stroke-dasharray: 100 100; stroke-dashoffset: 9;
  transition: stroke-dashoffset 1.4s var(--e-out) 0.1s;
}
.s-kon-prog { stroke: var(--s-piasek); stroke-width: 2.5; }
.s-kon-prog-t { fill: var(--s-piasek); font-family: var(--f-display); font-size: 14px; font-weight: 600; }
.s-kon-liczba {
  position: absolute; left: 43.86%; top: 58%; transform: translate(-50%, -50%);
  display: flex; align-items: baseline; gap: 3px; white-space: nowrap;
  transition: opacity 0.6s var(--e-out) 0.3s, transform 0.8s var(--e-out) 0.3s;
}
.s-kon-liczba b {
  font-family: var(--f-display); font-weight: 600; letter-spacing: -0.03em;
  font-size: clamp(2.4rem, 1.7rem + 1.4vw, 3.2rem); line-height: 1; color: var(--s-bialy);
}
.s-kon-liczba span { font-size: 0.8125rem; color: var(--s-cichy-noc); }
/* wynik nie odlicza się — pojawia się w całości, gdy skan sprawdzi wszystkie fragmenty */
.s-kon.is-anim:not(.is-wydany) .s-kon-luk-wartosc { stroke-dashoffset: 100; transition-duration: 0.5s; transition-delay: 0s; }
.s-kon.is-anim:not(.is-wydany) .s-kon-liczba { opacity: 0; transform: translate(-50%, -36%) scale(0.94); transition-duration: 0.4s; transition-delay: 0s; }
.s-kon-puls {
  position: absolute; left: 43.86%; top: 58%; width: 74%; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid var(--s-holo); pointer-events: none; opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
}
.s-kon.is-anim.is-wydany .s-kon-puls { animation: s-kon-puls 1.2s var(--e-out) both; }
.s-kon.is-pin.is-wydany .s-kon-blysk { animation: s-kon-blysk 1.3s var(--e-out) both; }
@keyframes s-kon-puls {
  0% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.55); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.55); }
}
@keyframes s-kon-blysk { 0% { opacity: 0; } 16% { opacity: 1; } 100% { opacity: 0; } }

.s-kon-wynik-info { display: grid; gap: 10px; justify-items: start; min-width: 0; }
.s-kon-status {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 42px; padding: 0 18px 0 7px; border-radius: var(--r-pigulka);
  border: 1px solid var(--s-linia-noc-mocna);
  font-family: var(--f-display); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; line-height: 1.2;
  color: var(--s-tekst-noc); white-space: nowrap;
  transition: background-color 0.55s var(--e-out), color 0.55s var(--e-out), border-color 0.55s var(--e-out), box-shadow 0.55s var(--e-out);
}
.s-kon-status-ik { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(160, 220, 255, 0.1); transition: background-color 0.55s var(--e-out), color 0.55s var(--e-out); }
.s-kon-status-ik svg { width: 14px; height: 14px; stroke-width: 2.6; opacity: 0.3; transition: opacity 0.55s var(--e-out); }
.s-kon-status-t { display: grid; justify-items: center; }
.s-kon-status-t > span { grid-area: 1 / 1; transition: opacity 0.45s var(--e-out), transform 0.55s var(--e-out); }
.s-kon-status-tok { opacity: 0; transform: translateY(-8px); }
.s-kon:not(.is-wydany) .s-kon-status-tok { opacity: 1; transform: none; }
.s-kon:not(.is-wydany) .s-kon-status-ok { opacity: 0; transform: translateY(8px); }
.s-kon.is-wydany .s-kon-status { background: var(--s-holo); border-color: var(--s-holo); color: var(--s-tusz); box-shadow: 0 0 32px -8px rgba(108, 216, 255, 0.55); }
.s-kon.is-wydany .s-kon-status-ik { background: var(--s-tusz); color: var(--s-holo); }
.s-kon.is-wydany .s-kon-status-ik svg { opacity: 1; }
.s-kon-prog-info { font-size: 0.9375rem; line-height: 1.4; color: var(--s-tekst-noc); }
.s-kon-prog-info b { font-family: var(--f-display); font-weight: 600; color: var(--s-piasek); }
.s-kon-wynik-info .s-nota { font-size: 0.75rem; }

/* lista 22 kontroli */
.s-kon-kontrole { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px clamp(18px, 1.6vw, 30px); }
.s-kon-kol { display: grid; gap: clamp(10px, 1.6vh, 16px); align-content: start; min-width: 0; }
.s-kon-grupa-t {
  margin-bottom: 4px; padding-bottom: 6px; border-bottom: 1px solid var(--s-linia-noc-mocna);
  font-family: var(--f-display); font-size: 0.9375rem; font-weight: 600; line-height: 1.35; letter-spacing: 0; color: var(--s-holo);
}
.s-kon-kontrola {
  position: relative; display: flex; align-items: center; gap: 10px;
  min-height: clamp(24px, 3vh, 29px);
  font-size: 0.875rem; line-height: 1.3; color: var(--s-cichy-noc);
}
.s-kon-kontrola::before {
  /* przebiegający błysk przy zaliczeniu — pochodna --s-holo */
  content: ""; position: absolute; inset: 0 -8px; z-index: -1; border-radius: 6px; pointer-events: none;
  background: linear-gradient(90deg, rgba(108, 216, 255, 0.18), rgba(108, 216, 255, 0));
  transform-origin: 0 50%; opacity: 0;
}
.s-kon-kontrola.is-uwaga::before { background: linear-gradient(90deg, rgba(210, 194, 154, 0.2), rgba(210, 194, 154, 0)); } /* --s-piasek */
.s-kon.is-anim .s-kon-kontrola:is(.is-ok, .is-uwaga)::before { animation: s-kon-wiersz 1s var(--e-out) both; animation-delay: calc(var(--n, 0) * 80ms); }
@keyframes s-kon-wiersz { 0% { opacity: 0; transform: scaleX(0); } 30% { opacity: 1; } 55% { transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
.s-kon-box {
  flex: none; display: grid; place-items: center;
  width: 17px; height: 17px; border-radius: 4px;
  border: 1.5px solid rgba(160, 220, 255, 0.3);
  transition: background-color 0.45s var(--e-out), border-color 0.45s var(--e-out);
  transition-delay: calc(var(--n, 0) * 80ms);
}
.s-kon-box svg { width: 12px; height: 12px; stroke-width: 3; color: var(--s-tusz); opacity: 0; transform: scale(0.4); transition: opacity 0.45s var(--e-out), transform 0.55s var(--e-out); transition-delay: inherit; }
.s-kon-box b { font-family: var(--f-display); font-size: 0.6875rem; font-weight: 600; line-height: 1; color: var(--s-piasek); opacity: 0; transition: opacity 0.45s var(--e-out); transition-delay: inherit; }
.s-kon-kontrola.is-ok .s-kon-box { background: var(--s-holo); border-color: var(--s-holo); }
.s-kon-kontrola.is-ok .s-kon-box svg { opacity: 1; transform: none; }
.s-kon-kontrola.is-uwaga .s-kon-box { border-color: var(--s-piasek); background: rgba(210, 194, 154, 0.14); }
.s-kon-kontrola.is-uwaga .s-kon-box b { opacity: 1; }
.s-kon-et { min-width: 0; transition: color 0.45s var(--e-out); }
.s-kon-kontrola.is-ok .s-kon-et { color: var(--s-bialy); }
.s-kon-kontrola.is-uwaga .s-kon-et { color: var(--s-tekst-noc); }
.s-kon-stan {
  margin-left: auto; flex: none;
  font-family: var(--f-display); font-size: 0.75rem; font-weight: 600; color: var(--s-piasek);
  opacity: 0; transform: translateX(-4px); transition: opacity 0.45s var(--e-out), transform 0.55s var(--e-out);
}
.s-kon-kontrola.is-uwaga .s-kon-stan { opacity: 1; transform: none; }

/* ocena AI */
.s-kon-ai { display: grid; gap: 10px; padding-top: clamp(12px, 1.8vh, 18px); border-top: 1px solid var(--s-linia-noc-mocna); }
.s-kon-ai-t { display: flex; align-items: center; gap: 9px; font-family: var(--f-display); font-size: 0.9375rem; font-weight: 600; line-height: 1.35; color: var(--s-bialy); }
.s-kon-ai-t svg { width: 18px; height: 18px; flex: none; color: var(--s-holo); }
.s-kon-ai-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.s-kon-ai-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 32px; padding: 0 13px 0 10px; border-radius: var(--r-pigulka);
  border: 1px solid var(--s-linia-noc-mocna);
  font-size: 0.8125rem; color: var(--s-cichy-noc); white-space: nowrap;
  transition: color 0.45s var(--e-out), border-color 0.45s var(--e-out), background-color 0.45s var(--e-out);
}
.s-kon-ai-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; flex: none; transition: background-color 0.45s var(--e-out), border-color 0.45s var(--e-out); }
.s-kon-ai-chip.is-on { color: var(--s-bialy); border-color: rgba(108, 216, 255, 0.45); background: rgba(108, 216, 255, 0.08); }
.s-kon-ai-chip.is-on::before { background: var(--s-holo); border-color: var(--s-holo); }

/* ---------- pętla poprawek ---------- */
.s-kon-petla {
  position: relative;
  container-type: inline-size;
  border-radius: var(--r-karta);
  padding: clamp(20px, 0.9rem + 1vw, 30px);
  border: 1px solid rgba(210, 194, 154, 0.3); /* --s-piasek */
  background: linear-gradient(180deg, rgba(13, 24, 38, 0.97), rgba(7, 16, 26, 0.96)); /* noc-3 → noc-2 */
}
.s-kon-petla-in { display: grid; gap: clamp(18px, 2.6vh, 28px); grid-template-areas: "glowa" "schemat" "fakt"; height: 100%; align-content: space-between; }
.s-kon-petla-glowa { grid-area: glowa; display: grid; gap: 6px; }
.s-kon-petla-glowa .s-etykieta { font-family: var(--f-display); color: var(--s-piasek); }
.s-kon-petla-glowa h3 { color: var(--s-bialy); }
.s-kon-schemat-wrap { grid-area: schemat; position: relative; }
.s-kon-schemat {
  --rz: 60px; --gr: 24px; --gk: 20px;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  grid-auto-rows: var(--rz); gap: var(--gr) var(--gk);
}
.s-kon-wezel {
  grid-column: 1; position: relative;
  display: grid; align-content: center; gap: 1px;
  padding: 6px 12px 6px 46px; border-radius: 12px;
  border: 1px solid var(--s-linia-noc-mocna);
  background: rgba(3, 7, 13, 0.6); /* --s-noc */
  transition: border-color 0.45s var(--e-out), background-color 0.45s var(--e-out), box-shadow 0.45s var(--e-out);
}
.s-kon-wezel b { font-family: var(--f-display); font-size: 0.9375rem; font-weight: 600; line-height: 1.25; color: var(--s-bialy); }
.s-kon-wezel > span:last-child { font-size: 0.8125rem; line-height: 1.3; color: var(--s-cichy-noc); }
.s-kon-wezel-nr {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid rgba(108, 216, 255, 0.35);
  font-family: var(--f-display); font-size: 0.75rem; font-weight: 600; line-height: 1; color: var(--s-holo);
}
.s-kon-wezel--decyzja { grid-row: 4; border-color: rgba(210, 194, 154, 0.55); }
.s-kon-wezel--decyzja .s-kon-wezel-nr { color: var(--s-piasek); border-color: rgba(210, 194, 154, 0.45); }
.s-kon-wezel--poprawki { grid-column: 2; grid-row: 4; padding-left: 12px; border-style: dashed; border-color: rgba(210, 194, 154, 0.6); }
.s-kon-wezel-war { font-family: var(--f-display); font-size: 0.6875rem; font-weight: 600; line-height: 1.3; color: var(--s-piasek); }
.s-kon-wezel--publikacja { grid-row: 5; border-color: rgba(108, 216, 255, 0.5); }
/* strzałki */
.s-kon-strz { position: absolute; left: 84%; bottom: 100%; width: 1.5px; height: var(--gr); margin-left: -0.75px; background: rgba(160, 220, 255, 0.45); transition: background-color 0.45s var(--e-out); }
.s-kon-strz::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); border: 4px solid transparent; border-top: 6px solid rgba(160, 220, 255, 0.7); border-bottom: 0; }
.s-kon-galaz { position: absolute; left: 100%; top: 50%; width: var(--gk); height: 1.5px; margin-top: -0.75px; background: var(--s-piasek); transition: box-shadow 0.45s var(--e-out); }
.s-kon-galaz::after { content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); border: 4px solid transparent; border-left: 6px solid var(--s-piasek); border-right: 0; }
.s-kon-powrot {
  /* powrót: od góry „Poprawek” w górę do „22 kontroli” */
  position: absolute; right: 16%; bottom: calc(100% + 1px);
  width: calc(84% + var(--gk)); height: calc(var(--gr) * 2 + var(--rz) * 1.5);
  border-top: 1.5px dashed var(--s-piasek); border-right: 1.5px dashed var(--s-piasek); border-top-right-radius: 12px;
  transition: box-shadow 0.45s var(--e-out);
}
.s-kon-powrot::after { content: ""; position: absolute; left: -2px; top: -5.25px; border: 4.5px solid transparent; border-right: 7px solid var(--s-piasek); border-left: 0; }
.s-kon-zeton {
  position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; z-index: 2; pointer-events: none;
  background: var(--s-lod); border-radius: 3px; opacity: 0;
  box-shadow: 0 0 0 3px rgba(108, 216, 255, 0.28), 0 0 18px 2px rgba(108, 216, 255, 0.8);
  transition: opacity 0.45s var(--e-out);
}
.s-kon-zeton.is-on { opacity: 1; }
/* stany węzłów w czasie przejazdu znacznika (tylko scena przypięta) */
.s-kon-wezel.is-byl { border-color: rgba(108, 216, 255, 0.5); }
.s-kon-wezel.is-tu { border-color: var(--s-holo); background: rgba(108, 216, 255, 0.12); }
.s-kon-wezel--poprawki.is-tu { border-color: var(--s-piasek); background: rgba(210, 194, 154, 0.14); }
.s-kon-wezel--publikacja.is-byl { border-color: var(--s-holo); background: rgba(108, 216, 255, 0.14); box-shadow: var(--s-poswiata); }
.s-kon-petla.is-tak .s-kon-wezel--publikacja .s-kon-strz { background: var(--s-holo); }
.s-kon-petla.is-nie .s-kon-galaz, .s-kon-petla.is-nie .s-kon-powrot { box-shadow: 0 0 10px rgba(210, 194, 154, 0.35); } /* --s-piasek */

/* fakt z pierwszego testu — szklana karta z ikoną (jak objaśnienia w hero), kluczowe zdanie wyróżnione */
.s-kon-fakt {
  grid-area: fakt;
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 18px 20px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(20, 38, 58, 0.95), rgba(7, 16, 26, 0.92));
  border: 1px solid rgba(210, 194, 154, 0.3); /* --s-piasek */
  box-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(216, 244, 255, 0.07);
  transition: border-color 0.55s var(--e-out), box-shadow 0.55s var(--e-out);
}
.s-kon-fakt-ik { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(210, 194, 154, 0.12); color: var(--s-piasek); box-shadow: inset 0 0 0 1px rgba(210, 194, 154, 0.22); }
.s-kon-fakt-ik svg { width: 20px; height: 20px; }
.s-kon-fakt-in { display: grid; gap: 4px; min-width: 0; }
.s-kon-fakt-t { font-family: var(--f-display); font-size: 0.9375rem; font-weight: 600; line-height: 1.3; color: var(--s-piasek); }
.s-kon-fakt-tekst { font-size: 0.9375rem; line-height: 1.6; color: var(--s-tekst-noc); }

/* szeroka pętla (pod postem i panelem, układ statyczny): schemat | fakt */
@container (min-width: 760px) {
  .s-kon-petla-in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); grid-template-areas: "glowa glowa" "schemat fakt"; align-items: center; column-gap: clamp(28px, 4vw, 64px); }
  .s-kon-schemat { --gk: 28px; }
}
@container (max-width: 360px) {
  .s-kon-schemat { --rz: 84px; --gr: 22px; --gk: 14px; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .s-kon-wezel { padding: 6px 10px; }
  .s-kon-wezel-nr { position: static; transform: none; width: 20px; height: 20px; font-size: 0.6875rem; margin-bottom: 2px; }
  .s-kon-wezel b { font-size: 0.875rem; }
  .s-kon-wezel > span:last-child { font-size: 0.75rem; }
  .s-kon-fakt { grid-template-columns: minmax(0, 1fr); padding: 18px; }
}

/* ---------- SCENA PRZYPIĘTA (desktop, pełny ruch) ---------- */
.s-kon.is-pin .s-kon-scena {
  /* wysokość okna; JS centruje i w razie potrzeby skaluje układ (dopasuj) */
  height: 100vh;
  padding: calc(var(--pasek-h) + 20px) 0 20px;
}
.s-kon.is-pin .s-kon-uklad { grid-template-areas: "lewo panel"; align-items: start; transform-origin: 50% 0; }
.s-kon.is-pin .s-kon-lewo { grid-area: lewo; display: grid; perspective: 1900px; will-change: transform; }
.s-kon.is-pin .s-kon-post,
.s-kon.is-pin .s-kon-petla { grid-area: 1 / 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; }
.s-kon.is-pin .s-kon-petla { transform: rotateY(180deg); align-self: stretch; }
.s-kon.is-pin .s-kon-skan { will-change: transform; }
.s-kon.is-pin .s-kon-karta { --kon-o: clamp(7px, 1.15vh, 13px); }
.s-kon.is-pin .s-kon-petla.is-nie .s-kon-fakt { border-color: rgba(210, 194, 154, 0.65); box-shadow: 0 0 0 1px rgba(210, 194, 154, 0.2), 0 0 34px -10px rgba(210, 194, 154, 0.5), 0 22px 44px -22px rgba(0, 0, 0, 0.9); }
.s-kon.is-pin .s-kon-schemat { --rz: clamp(52px, 6.6vh, 62px); --gr: clamp(18px, 2.6vh, 26px); }
.s-kon.is-pin .s-kon-wynik { grid-template-columns: minmax(120px, 168px) minmax(0, 1fr); }
.s-kon.is-pin .s-kon-petla-glowa h3 { font-size: clamp(1.2rem, 0.9rem + 0.6vw, 1.55rem); }
.s-kon.is-pin .s-kon-fakt { padding: 14px 18px; gap: 12px; }
.s-kon.is-pin .s-kon-fakt-tekst { font-size: 0.875rem; }
@media (max-height: 820px) {
  .s-kon.is-pin .s-kon-gora { padding-bottom: 6px; }
  .s-kon.is-pin .s-kon-h1 { font-size: 1.0625rem; }
  .s-kon.is-pin .s-kon-kontrola { font-size: 0.8125rem; }
  .s-kon.is-pin .s-kon-petla-glowa h3 { font-size: 1.25rem; }
}

/* ---------- średnie ekrany ---------- */
@media (max-width: 1199px) {
  .s-kon-uklad { grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); }
  .s-kon-kontrola { font-size: 0.8125rem; gap: 8px; }
  /* status „Uwaga” zostaje dla czytników ekranu, wizualnie mówi go kwadrat z „!” */
  .s-kon-stan { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- telefon / tablet: jedna kolumna, bez pinu ---------- */
@media (max-width: 991px) {
  .s-kon-uklad { grid-template-columns: minmax(0, 1fr); grid-template-areas: "post" "panel" "petla"; }
  .s-kon-stan { position: static; width: auto; height: auto; margin: 0 0 0 auto; overflow: visible; clip: auto; }
  .s-kon-kontrola { font-size: 0.875rem; }
}
@media (max-width: 767px) {
  .s-kon-glowa { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
}
@media (max-width: 600px) {
  .s-kon-kontrole { grid-template-columns: minmax(0, 1fr); }
  .s-kon-wynik { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .s-kon-wskaznik { width: min(220px, 80%); }
  .s-kon-wynik-info { justify-items: center; }
  .s-kon-karta { padding: 14px 14px 18px; }
}
@media (max-width: 360px) {
  .s-kon-status { padding-right: 14px; font-size: 0.875rem; }
}


/* ===== sekcja: blog ===== */
/* BLOG (#blog, prefiks s-bl-) — zapowiedź flagowego wpisu: „Zobacz, jak wygląda perfekcyjny post”.
   Ciemne okno, kompozycja dwukolumnowa (bez wyśrodkowanego badge'a):
     lewa  — tytuł → akapit wiodący → cztery rzeczy, które klient zobaczy w artykule → przyciski,
     prawa — karta-podgląd z trzema warstwami:
             okładka-hologram (SVG), tytuł/autor/data, mini-rentgen (4 kontrole, bez wyniku).
   Warstwy rozkładają się lekko w 3D przy wejściu w kadr (blog.js) — stan bez JS / przy ograniczonym ruchu jest płaski i kompletny.
   Hierarchia czytania: tytuł (Poppins) → lead → punkty listy (tytuł biały, opis przygaszony) → przyciski; rysunek ciszej.
   rgba: 108,216,255 = --s-holo · 46,143,208 = --s-holo-2 · 216,244,255 = --s-lod · 210,194,154 = --s-piasek ·
         238,247,252 = --s-bialy · 20,38,58 / 7,16,26 / 3,7,13 = szkło i noc (jak .s-obj-in) */

/* ---------- tło: cicha poświata za kartą ---------- */
#blog .s-bl-tlo {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 50% at 74% 60%, rgba(46, 143, 208, 0.16), transparent 72%);
}

/* ---------- układ dwukolumnowy ---------- */
#blog .s-bl-uklad { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(56px, 2rem + 4vw, 88px); align-items: center; }
@media (min-width: 960px) {
  #blog .s-bl-uklad { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 4vw, 88px); }
}

/* ---------- lewa kolumna ---------- */
#blog .s-bl-tekst { display: grid; justify-items: start; min-width: 0; }
#blog .s-bl-tekst .s-badge { margin-bottom: var(--o-5); }
#blog .s-bl-tekst h2 { max-width: 19ch; }
#blog .s-bl-tekst .s-lead { margin-top: var(--o-5); max-width: 46ch; }

#blog .s-bl-lista-t {
  margin-top: var(--o-7);
  font-size: var(--t-maly); font-weight: 600; color: var(--s-cichy-noc);
}
#blog .s-bl-lista { width: 100%; max-width: 540px; margin-top: var(--o-3); border-top: 1px solid var(--s-linia-noc); }
#blog .s-bl-lista > li {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--o-4); align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--s-linia-noc);
}
#blog .s-bl-ik {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 13px;
  background: rgba(108, 216, 255, 0.09);
  box-shadow: inset 0 0 0 1px rgba(108, 216, 255, 0.18);
  color: var(--s-holo);
  transition: background-color var(--d-srednio) var(--e-out), color var(--d-srednio) var(--e-out);
}
#blog .s-bl-ik svg { width: 21px; height: 21px; }
#blog .s-bl-pkt-rentgen .s-bl-ik { background: rgba(210, 194, 154, 0.12); box-shadow: inset 0 0 0 1px rgba(210, 194, 154, 0.3); color: var(--s-piasek); }
#blog .s-bl-pkt { display: grid; gap: 3px; min-width: 0; padding-top: 1px; }
#blog .s-bl-pkt b {
  font-family: var(--f-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.3;
  letter-spacing: -0.01em; color: var(--s-bialy);
}
#blog .s-bl-pkt > span { font-size: var(--t-maly); line-height: 1.55; color: var(--s-cichy-noc); text-wrap: pretty; }
@media (hover: hover) {
  #blog .s-bl-lista > li:hover .s-bl-ik { background: rgba(108, 216, 255, 0.18); }
  #blog .s-bl-pkt-rentgen:hover .s-bl-ik { background: rgba(210, 194, 154, 0.22); }
}

#blog .s-bl-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: var(--o-7); }

/* ---------- prawa kolumna: scena karty ---------- */
#blog .s-bl-prawa { display: grid; justify-items: center; min-width: 0; }
#blog .s-bl-scena { position: relative; width: min(100%, 600px); padding-bottom: 26px; }
/* odbicie projekcji pod kartą */
#blog .s-bl-scena::before {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -40px; height: 96px; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(108, 216, 255, 0.16), transparent 72%);
}

/* karta: korzeń sceny 3D (warstwy dostają głębię w blog.js); bez overflow i bez izolacji — inaczej 3D się spłaszcza */
#blog .s-bl-karta {
  position: relative; isolation: auto;
  transform-style: preserve-3d;
  display: grid;
  padding: 12px 12px 0;
  border-radius: var(--r-karta);
  background: linear-gradient(170deg, rgba(20, 38, 58, 0.92), rgba(7, 16, 26, 0.97));
  border: 1px solid rgba(108, 216, 255, 0.2);
  box-shadow: 0 50px 90px -50px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(216, 244, 255, 0.07);
}

/* ---------- warstwa 1: okładka-hologram ---------- */
#blog .s-bl-okladka {
  position: relative; overflow: hidden;
  aspect-ratio: 2 / 1;
  border-radius: 16px;
  border: 1px solid rgba(108, 216, 255, 0.14);
  background:
    radial-gradient(70% 80% at 50% 86%, rgba(46, 143, 208, 0.34), transparent 70%),
    linear-gradient(180deg, var(--s-noc-3), var(--s-noc));
}
#blog .s-bl-holo { position: absolute; inset: 0; width: 100%; height: 100%; }
#blog .s-bl-podloga path { fill: none; stroke: var(--s-holo-2); stroke-width: 1; stroke-opacity: 0.55; }
#blog .s-bl-p1 { fill: none; stroke: var(--s-holo); stroke-opacity: 0.4; stroke-dasharray: 2 6; }
#blog .s-bl-p2 { fill: none; stroke: var(--s-holo); stroke-opacity: 0.55; }
#blog .s-bl-p3 { fill: rgba(108, 216, 255, 0.16); stroke: var(--s-lod); stroke-opacity: 0.8; }
#blog .s-bl-drobiny circle { fill: var(--s-lod); }
#blog .s-bl-lacze { fill: none; stroke: var(--s-holo); stroke-opacity: 0.5; stroke-dasharray: 2 3; }
#blog .s-bl-sat { fill: rgba(7, 16, 26, 0.66); stroke: var(--s-holo); stroke-opacity: 0.5; }
#blog .s-bl-sat-tyt { fill: var(--s-lod); opacity: 0.8; }
#blog .s-bl-sat-w circle, #blog .s-bl-sat-w rect { fill: var(--s-holo); opacity: 0.5; }
#blog .s-bl-sat-faq circle { fill: none; stroke: var(--s-holo); stroke-opacity: 0.75; }
#blog .s-bl-sat-plus { fill: none; stroke: var(--s-holo); stroke-opacity: 0.6; stroke-width: 1.2; }
#blog .s-bl-dok { fill: rgba(7, 16, 26, 0.66); stroke: var(--s-holo); stroke-opacity: 0.85; stroke-width: 1.2; }
#blog .s-bl-dok-obraz { fill: rgba(108, 216, 255, 0.1); stroke: var(--s-holo); stroke-opacity: 0.3; }
#blog .s-bl-dok-gory { fill: none; stroke: var(--s-holo); stroke-opacity: 0.6; stroke-width: 1.2; stroke-linejoin: round; }
#blog .s-bl-dok-slonce { fill: var(--s-lod); opacity: 0.7; }
#blog .s-bl-dok-h1 { fill: var(--s-lod); opacity: 0.92; }
#blog .s-bl-dok-meta { fill: var(--s-holo); opacity: 0.5; }
#blog .s-bl-dok-skrot { fill: rgba(210, 194, 154, 0.08); stroke: var(--s-piasek); stroke-opacity: 0.45; }
#blog .s-bl-dok-skrot-pas { fill: var(--s-piasek); }
#blog .s-bl-dok-skrot-l { fill: var(--s-piasek); opacity: 0.6; }
#blog .s-bl-dok-l { fill: var(--s-holo); opacity: 0.35; }
#blog .s-bl-namiar { fill: none; stroke: var(--s-piasek); stroke-width: 1.5; }
#blog .s-bl-podsw {
  fill: rgba(210, 194, 154, 0.08); stroke: var(--s-piasek); stroke-width: 1.5;
  opacity: 0; transition: opacity var(--d-wolno) var(--e-out);
}
#blog[data-bl-aktywny="spis"] .s-bl-podsw[data-bl-strefa="spis"],
#blog[data-bl-aktywny="skrot"] .s-bl-podsw[data-bl-strefa="skrot"],
#blog[data-bl-aktywny="faq"] .s-bl-podsw[data-bl-strefa="faq"],
#blog[data-bl-aktywny="rentgen"] .s-bl-podsw[data-bl-strefa="rentgen"] { opacity: 1; }
/* skan rentgenu: pas światła przejeżdża przez okładkę (raz przy wejściu i po najechaniu) */
#blog .s-bl-skan {
  position: absolute; left: 0; right: 0; top: 0; height: 30%; pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, rgba(108, 216, 255, 0), rgba(108, 216, 255, 0.14) 78%, rgba(216, 244, 255, 0.5));
  border-bottom: 1px solid rgba(216, 244, 255, 0.75);
}

/* ---------- warstwa 2: tytuł, autor, data ---------- */
#blog .s-bl-tresc { display: grid; justify-items: start; gap: 12px; padding: 22px 16px 24px; }
#blog .s-bl-chip {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px;
  border-radius: var(--r-pigulka);
  background: rgba(108, 216, 255, 0.1);
  border: 1px solid rgba(108, 216, 255, 0.24);
  font-size: 0.8125rem; font-weight: 600; color: var(--s-holo);
}
#blog .s-bl-tresc h3 {
  font-size: clamp(1.3rem, 1.05rem + 0.75vw, 1.7rem); line-height: 1.22; letter-spacing: -0.015em;
  font-weight: 600; color: var(--s-bialy); max-width: 26ch;
}
#blog .s-bl-tresc h3 a {
  background: linear-gradient(currentColor, currentColor) left 92% / 0 1.5px no-repeat;
  transition: background-size var(--d-wolno) var(--e-out);
}
@media (hover: hover) { #blog .s-bl-tresc h3 a:hover { background-size: 100% 1.5px; } }
#blog .s-bl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--t-maly); color: var(--s-cichy-noc); }
#blog .s-bl-awatar {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(108, 216, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(108, 216, 255, 0.22); color: var(--s-holo);
}
#blog .s-bl-awatar svg { width: 16px; height: 16px; }
#blog .s-bl-autor { font-weight: 600; color: var(--s-tekst-noc); }
#blog .s-bl-kropka { width: 4px; height: 4px; border-radius: 50%; background: var(--s-linia-noc-mocna); }

/* ---------- warstwa 3: mini-rentgen (wysuwa się poza kartę jak osobna szyba) ---------- */
#blog .s-bl-rentgen {
  position: relative; z-index: 1;
  margin: 0 -22px -26px 22px;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(20, 38, 58, 0.98), rgba(7, 16, 26, 0.97));
  border: 1px solid rgba(108, 216, 255, 0.26);
  box-shadow: 0 34px 60px -30px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(216, 244, 255, 0.08);
  transition: border-color var(--d-wolno) var(--e-out);
}
#blog[data-bl-aktywny="rentgen"] .s-bl-rentgen { border-color: rgba(210, 194, 154, 0.6); }
#blog .s-bl-rentgen-t { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
#blog .s-bl-rentgen-ik {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; flex: none;
  background: rgba(210, 194, 154, 0.12); box-shadow: inset 0 0 0 1px rgba(210, 194, 154, 0.3); color: var(--s-piasek);
}
#blog .s-bl-rentgen-ik svg { width: 19px; height: 19px; }
#blog .s-bl-rentgen-t > span:last-child { display: grid; gap: 1px; }
#blog .s-bl-rentgen-t b { font-family: var(--f-display); font-weight: 600; font-size: 1rem; line-height: 1.25; color: var(--s-bialy); }
#blog .s-bl-rentgen-t > span:last-child > span { font-size: 0.8125rem; line-height: 1.35; color: var(--s-cichy-noc); }

#blog .s-bl-kontrole { display: grid; gap: 8px; }
#blog .s-bl-k {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) 22px; grid-template-areas: "ik b ok" "ik o ok";
  gap: 2px 10px; align-items: center;
  padding: 10px 10px 10px 10px;
  border-radius: 12px;
  background: rgba(238, 247, 252, 0.035);
  border: 1px solid var(--s-linia-noc);
}
#blog .s-bl-k-ik {
  grid-area: ik; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px;
  background: rgba(108, 216, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(108, 216, 255, 0.18); color: var(--s-holo);
}
#blog .s-bl-k-ik svg { width: 17px; height: 17px; }
#blog .s-bl-k b { grid-area: b; align-self: end; font-family: var(--f-display); font-weight: 600; font-size: 0.875rem; line-height: 1.25; color: var(--s-bialy); letter-spacing: -0.005em; }
#blog .s-bl-k-opis { grid-area: o; align-self: start; font-size: 0.78rem; line-height: 1.35; color: var(--s-cichy-noc); }
#blog .s-bl-k-ok {
  grid-area: ok; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(108, 216, 255, 0.14); color: var(--s-holo);
}
#blog .s-bl-k-ok svg { width: 13px; height: 13px; stroke-width: 2.6; }
#blog .s-bl-rentgen-nota { margin-top: 12px; font-size: 0.8125rem; line-height: 1.45; color: var(--s-cichy-noc); }

/* ---------- tablet i telefon: jedna kolumna ---------- */
@media (max-width: 959px) {
  #blog .s-bl-lista { max-width: none; }
}
@media (max-width: 600px) {
  #blog .s-bl-scena { padding-bottom: 16px; }
  #blog .s-bl-karta { padding: 8px 8px 0; border-radius: 20px; }
  #blog .s-bl-okladka { aspect-ratio: 16 / 10; border-radius: 13px; }
  #blog .s-bl-tresc { padding: 18px 10px 20px; }
  #blog .s-bl-rentgen { margin: 0 -8px -16px 8px; padding: 14px 12px; border-radius: 16px; }
  #blog .s-bl-akcje, #blog .s-bl-akcje .s-btn, #blog .s-bl-akcje .s-btn-obrys { width: 100%; }
  #blog .s-bl-akcje .s-btn { justify-content: space-between; }
  #blog .s-bl-akcje .s-btn-obrys { justify-content: center; }
}
/* najwęższe telefony: przycisk w jednej linii — krótsza etykieta („Czytaj artykuł”) */
@media (max-width: 374px) { #blog .s-bl-dl, #blog .s-bl-kropka { display: none; } }


/* ===== sekcja: fronty ===== */
/* Sekcja „fronty” — Google i odpowiedzi AI (SEO + GEO). Prefiks s-fr-. Jasne pasmo (papier).
   Nagłówek wyśrodkowany (miejsce na globus z mgławicy nad badge) → dwa ciemne kafle-makiety
   z łącznikiem „Twój post” → trzy filary (karty zalewane).
   Hierarchia: treść makiet (fraza, wynik, odpowiedź, wniosek „Cel”) pełnym kontrastem; dekoracje ciszej. */

#fronty {
  --s-fr-h: 58px;                                   /* wysokość wiersza wyniku */
  --s-fr-odstep: 8px;                               /* odstęp wierszy (krok FLIP = h + odstęp) */
  --s-fr-szczelina: clamp(84px, -2rem + 10vw, 136px);
  overflow: clip;
}
#fronty .s-glowa { gap: var(--o-4); }

/* =========================================================================
   SCENA: dwa kafle + łącznik
   ========================================================================= */
.s-fr-scena { position: relative; margin: 0; }
.s-fr-kafle {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr);
  perspective: 1500px; perspective-origin: 50% 20%;
}
@media (min-width: 992px) {
  .s-fr-kafle { grid-template-columns: minmax(0, 1fr) var(--s-fr-szczelina) minmax(0, 1fr); align-items: stretch; }
}

/* pierścienie za sceną — tło, ciche */
.s-fr-pierscienie {
  --s-fr-pw: min(1240px, 180%);                     /* % = szerokość sceny (tak samo dla width i marginesów) */
  position: absolute; left: 50%; top: 50%; z-index: -1;
  width: var(--s-fr-pw); height: auto; aspect-ratio: 1;
  margin: calc(var(--s-fr-pw) / -2) 0 0 calc(var(--s-fr-pw) / -2);
  pointer-events: none;
  fill: none;
  stroke: rgba(46, 143, 208, 0.13);                 /* --s-holo-2 */
  stroke-width: 1.2;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 78%);
  mask-image: radial-gradient(closest-side, #000 30%, transparent 78%);
}
.s-fr-pierscienie * { vector-effect: non-scaling-stroke; }

.s-fr-wjazd { position: relative; min-width: 0; display: grid; }
.s-fr-wjazd--l { transform-origin: 100% 50%; }
.s-fr-wjazd--p { transform-origin: 0% 50%; }

/* ---------- kafel-makieta ---------- */
.s-fr-kafel {
  position: relative;
  display: grid;
  min-width: 0;
  border-radius: var(--r-karta);
  background: var(--s-noc-2);
  border: 1px solid var(--s-noc-3);
  color: var(--s-tekst-noc);
  box-shadow:
    0 44px 80px -44px rgba(7, 17, 26, 0.62),      /* --s-tusz */
    0 22px 44px -30px rgba(26, 111, 168, 0.45);   /* --s-holo-tusz */
}
.s-fr-kafel::before {                              /* belka koloru frontu (jak .s-kafel) */
  content: ""; position: absolute; top: -1px; left: 28px; z-index: 3;
  width: 64px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--c-noc);
}
.s-fr-kafel-in {
  position: relative;
  display: flex; flex-direction: column; gap: 18px;
  min-width: 0;
  padding: clamp(20px, 0.9rem + 1.2vw, 34px);
  border-radius: inherit;
  overflow: hidden;
  background:
    radial-gradient(560px 340px at 0% 0%, rgba(46, 143, 208, 0.2), transparent 70%),   /* --s-holo-2 */
    radial-gradient(420px 300px at 100% 100%, rgba(108, 216, 255, 0.06), transparent 70%); /* --s-holo */
}
.s-fr-kafel-in > * { position: relative; }
.s-fr-port {                                        /* gniazdo łącznika na krawędzi kafla */
  display: none;
  position: absolute; top: 50%; z-index: 4;
  width: 12px; height: 12px; margin-top: -6px;
  border-radius: 3px;
  background: var(--s-noc-2);
  border: 1.5px solid var(--s-holo-2);
  transition: background-color var(--d-wolno) var(--e-out), border-color var(--d-wolno) var(--e-out), box-shadow var(--d-wolno) var(--e-out);
}
.s-fr-wjazd--l .s-fr-port { right: -7px; }
.s-fr-wjazd--p .s-fr-port { left: -7px; }
.s-fr-port.is-on { background: var(--s-holo); border-color: var(--s-lod); box-shadow: 0 0 16px 2px rgba(108, 216, 255, 0.7); } /* --s-holo */
@media (min-width: 992px) { .s-fr-port { display: block; } }

/* nagłówek kafla: ikona + tytuł Poppins 600 + jedno zdanie, czym jest front */
.s-fr-glowka { display: flex; align-items: center; gap: 14px; min-width: 0; }
.s-fr-glowka-ik {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 13px;
  background: var(--c-tint); color: var(--c-noc);
}
.s-fr-glowka-ik svg { width: 22px; height: 22px; }
.s-fr-etyk { display: grid; gap: 3px; min-width: 0; }
.s-fr-etyk-t { font-family: var(--f-display); font-size: 1.375rem; font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; color: var(--s-bialy); }
.s-fr-etyk-o { font-size: 0.875rem; line-height: 1.35; color: var(--s-cichy-noc); }

/* ---------- FRONT GOOGLE: pole frazy ---------- */
.s-fr-szukaj {
  display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 8px 16px;
  border-radius: var(--r-pigulka);
  background: var(--s-noc-3);
  border: 1px solid rgba(108, 216, 255, 0.34);     /* --s-holo */
  color: var(--s-bialy);
  font-size: 1rem; line-height: 1.3;
  transition: border-color var(--d-wolno) var(--e-out), box-shadow var(--d-wolno) var(--e-out);
}
.s-fr-szukaj > svg { width: 19px; height: 19px; flex: none; color: var(--s-holo); }
.s-fr-fraza { flex: 1; min-width: 0; }
.s-fr-karetka {
  display: inline-block; width: 2px; height: 1.15em; margin-left: 2px;
  vertical-align: -0.2em; background: var(--s-holo); opacity: 0;
  transition: opacity 0.4s var(--e-out);
}
.s-fr-szukaj.is-pisze { border-color: var(--s-holo); }
.s-fr-szukaj.is-pisze .s-fr-karetka { opacity: 1; animation: s-fr-mig 1s var(--e-in-out) infinite; }
.s-fr-szukaj.is-szuka { box-shadow: 0 0 0 4px rgba(108, 216, 255, 0.16); } /* --s-holo */
@keyframes s-fr-mig { 0%, 100% { opacity: 1; } 50% { opacity: 0.1; } }

/* ---------- FRONT GOOGLE: wyniki (sloty pozycji stoją, wiersze jeżdżą) ---------- */
.s-fr-lista {
  position: relative;
  display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px;
}
.s-fr-sloty, .s-fr-wyniki { display: grid; grid-auto-rows: var(--s-fr-h); row-gap: var(--s-fr-odstep); grid-row: 1; }
.s-fr-sloty { grid-column: 1 / -1; }               /* sloty pod całą szerokością: miejsce w wynikach + pusta, przerywana pozycja */
.s-fr-wyniki { grid-column: 2; position: relative; margin: 0; padding: 0; list-style: none; }
.s-fr-sloty span {
  position: relative;
  display: flex; align-items: center;
  padding-left: 6px;
  font-family: var(--f-display); font-size: 0.875rem; font-weight: 600;
  color: rgba(143, 163, 179, 0.7);                  /* --s-cichy-noc, przygaszone */
}
.s-fr-sloty span:first-child { color: var(--s-piasek); }
.s-fr-sloty span::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: 34px;
  border: 1px dashed rgba(160, 220, 255, 0.14);     /* --s-linia-noc (przygaszona) */
  border-radius: 14px;
}
.s-fr-wynik {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  min-width: 0; padding: 0 12px;
  border-radius: 14px;
  background: rgba(238, 247, 252, 0.03);            /* --s-bialy */
  border: 1px solid var(--s-linia-noc);
}
.s-fr-wynik.is-twoja { z-index: 2; background: var(--s-noc-3); border-color: var(--s-linia-noc-mocna); transition: background-color var(--d-wolno) var(--e-out), border-color var(--d-wolno) var(--e-out); }
.s-fr-wynik.is-twoja::before {                     /* poświata zajętej pozycji */
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(108, 216, 255, 0.55), 0 0 34px -6px rgba(108, 216, 255, 0.6); /* --s-holo */
  opacity: 0; transition: opacity 0.6s var(--e-out);
}
.s-fr-wynik.is-twoja::after {                      /* smuga awansu */
  content: ""; position: absolute; left: 10%; right: 10%; top: 100%; height: 120px; pointer-events: none;
  background: linear-gradient(180deg, rgba(108, 216, 255, 0.2), transparent); /* --s-holo */
  opacity: 0; transition: opacity 0.45s var(--e-out);
}
.s-fr-wynik.is-twoja.is-awans::after { opacity: 1; }
.s-fr-wynik.is-twoja.is-pierwsza {
  background: linear-gradient(rgba(108, 216, 255, 0.1), rgba(108, 216, 255, 0.1)), var(--s-noc-3); /* --s-holo na --s-noc-3 (kryjące) */
  border-color: rgba(108, 216, 255, 0.5);           /* --s-holo */
}
.s-fr-wynik.is-twoja.is-pierwsza::before { opacity: 1; }
.s-fr-fav {
  flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: rgba(160, 220, 255, 0.06);            /* --s-linia-noc (baza) */
  border: 1px solid var(--s-linia-noc);
}
.s-fr-fav--wrog::after {                            /* znacznik konkurenta */
  content: ""; width: 7px; height: 7px; transform: rotate(45deg);
  border: 1.5px solid rgba(255, 138, 138, 0.55);    /* --s-wrog */
}
.is-twoja .s-fr-fav { background: var(--s-holo); border-color: var(--s-holo); color: var(--s-tusz); }
.is-twoja .s-fr-fav svg { width: 17px; height: 17px; }
.s-fr-wiersz { flex: 1; display: grid; gap: 6px; min-width: 0; }
.s-fr-wiersz strong {
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-family: var(--f-display); font-size: 0.9375rem; font-weight: 600; line-height: 1.25; color: var(--s-bialy);
}
.s-fr-wiersz small {
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 0.8125rem; line-height: 1.2; color: var(--s-holo);
}
.s-fr-sz { display: block; width: var(--w, 70%); height: 7px; border-radius: 4px; background: rgba(160, 220, 255, 0.1); } /* --s-linia-noc (baza) */
.s-fr-tag {                                          /* „Twoja marka” — zakładka na górnej krawędzi wiersza */
  position: absolute; right: 12px; top: -14px;
  padding: 3px 10px; border-radius: var(--r-pigulka);
  line-height: 1.3;
  background: var(--s-piasek); color: var(--s-tusz);
  font-family: var(--f-display); font-size: 0.75rem; font-weight: 600;
  white-space: nowrap;
}

/* wniosek na dole makiety — jedno zdanie do przeczytania (zamiast paska odczytów) */
.s-fr-wniosek {
  margin-top: auto;
  display: flex; align-items: flex-start; gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--s-linia-noc);
  font-size: 0.9375rem; line-height: 1.45; color: var(--s-bialy);
}
.s-fr-wniosek svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--c-noc); }
.s-fr-wniosek b { font-family: var(--f-display); font-weight: 600; color: var(--c-noc); }

/* ---------- FRONT AI: czat z asystentem ---------- */
.s-fr-asystenci {
  margin-top: -6px;
  font-size: 0.8125rem; line-height: 1.5;
  color: var(--s-cichy-noc);
}
.s-fr-czat { display: flex; flex-direction: column; gap: 14px; }
.s-fr-pyt {
  align-self: flex-end; max-width: 86%;
  padding: 10px 15px;
  border-radius: 16px 16px 4px 16px;
  background: var(--s-noc-3);
  border: 1px solid var(--s-linia-noc-mocna);
  color: var(--s-bialy); font-size: 0.9375rem; line-height: 1.45;
  transform-origin: 100% 100%;
}
.s-fr-odpowiedz { display: grid; gap: 8px; }
.s-fr-kto {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-display); font-size: 0.8125rem; font-weight: 600;
  color: var(--s-holo);
}
.s-fr-kto svg { width: 16px; height: 16px; }
.s-fr-mysli { display: inline-flex; gap: 4px; margin-left: 4px; }
.s-fr-mysli i { width: 5px; height: 5px; border-radius: 50%; background: var(--s-holo); opacity: 0; }
.s-fr-mysli.is-on i { animation: s-fr-kropka 0.9s var(--e-in-out) infinite; }
.s-fr-mysli.is-on i:nth-child(2) { animation-delay: 0.15s; }
.s-fr-mysli.is-on i:nth-child(3) { animation-delay: 0.3s; }
@keyframes s-fr-kropka { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.s-fr-odp { font-size: 0.96875rem; line-height: 1.62; color: var(--s-tekst-noc); }
.s-fr-marka {
  position: relative; isolation: isolate;
  padding: 0 4px; margin: 0 1px;
  background: none; color: var(--s-bialy); font-weight: 600;
  white-space: nowrap;
}
.s-fr-marka::before {
  content: ""; position: absolute; inset: 0 -1px; z-index: -1;
  border-radius: 6px;
  background: rgba(210, 194, 154, 0.22);            /* --s-piasek */
  box-shadow: inset 0 -2px 0 var(--s-piasek);
  transform-origin: 0 50%; transform: scaleX(0);
  transition: transform 0.7s var(--e-out);
}
.s-fr-marka.is-on::before { transform: scaleX(1); }
.s-fr-cyt {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; margin-left: 3px; padding: 0 4px;
  border-radius: 5px;
  border: 1px solid var(--s-piasek);
  color: var(--s-piasek);
  font-family: var(--f-display); font-size: 0.6875rem; font-weight: 600; line-height: 1;
  vertical-align: 0.35em;
}
.s-fr-kursor { position: relative; display: inline-block; width: 0; height: 1em; vertical-align: -0.12em; } /* zero szerokości — tekst nie skacze */
.s-fr-kursor::after { content: ""; position: absolute; left: 3px; top: 0; width: 0.48em; height: 1.05em; background: var(--s-holo); }
.s-fr-razem { white-space: nowrap; }

/* źródła odpowiedzi */
.s-fr-zrodla { display: grid; gap: 8px; }
.s-fr-zrodla-t {
  font-family: var(--f-display); font-size: 0.8125rem; font-weight: 600;
  color: var(--s-cichy-noc);
}
.s-fr-zrodlo {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  min-height: 46px; min-width: 0; padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--s-linia-noc);
  background: rgba(238, 247, 252, 0.03);            /* --s-bialy */
  font-size: 0.875rem; line-height: 1.3; color: var(--s-tekst-noc);
  transition: border-color 0.6s var(--e-out), background-color 0.6s var(--e-out);
}
.s-fr-zrodlo::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 30px -6px rgba(210, 194, 154, 0.55); /* --s-piasek */
  opacity: 0; transition: opacity 0.7s var(--e-out);
}
.s-fr-zrodlo-t { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.s-fr-zrodlo-t b { color: var(--s-bialy); font-weight: 600; }
.s-fr-przypis {
  flex: none; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 6px;
  border: 1px solid var(--s-linia-noc-mocna);
  font-family: var(--f-display); font-size: 0.75rem; font-weight: 600; color: var(--s-cichy-noc);
  transition: background-color 0.6s var(--e-out), color 0.6s var(--e-out), border-color 0.6s var(--e-out);
}
.s-fr-cytat {
  flex: none;
  padding: 2px 9px; border-radius: var(--r-pigulka);
  background: rgba(210, 194, 154, 0.16);            /* --s-piasek */
  font-family: var(--f-display); font-size: 0.75rem; font-weight: 600;
  color: var(--s-piasek);
  opacity: 0; transform: translateX(6px);
  transition: opacity 0.6s var(--e-out), transform 0.6s var(--e-out);
}
.s-fr-zrodlo.is-twoje .s-fr-przypis { border-color: var(--s-piasek); color: var(--s-piasek); }
.s-fr-zrodlo.is-twoje.is-on { border-color: rgba(210, 194, 154, 0.62); background: rgba(210, 194, 154, 0.1); } /* --s-piasek */
.s-fr-zrodlo.is-twoje.is-on::before, .s-fr-zrodlo.is-twoje.is-on .s-fr-cytat { opacity: 1; }
.s-fr-zrodlo.is-twoje.is-on .s-fr-cytat { transform: none; }
.s-fr-zrodlo.is-twoje.is-on .s-fr-przypis { background: var(--s-piasek); color: var(--s-tusz); }
.s-fr-zrodlo:not(.is-twoje) { opacity: 0.6; }

/* =========================================================================
   ŁĄCZNIK — „Twój post” zasila oba fronty
   ========================================================================= */
.s-fr-lacznik {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 132px; padding: 26px 0;
}
.s-fr-os {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 1.5px; margin-left: -0.75px;
  background: linear-gradient(180deg, var(--s-holo-2), var(--s-holo) 50%, var(--s-holo-2));
}
.s-fr-ramie { display: none; position: absolute; top: 50%; height: 1.5px; margin-top: -0.75px; width: 50%; background: var(--s-holo-2); }
.s-fr-ramie--l { right: 50%; transform-origin: 100% 50%; }
.s-fr-ramie--p { left: 50%; transform-origin: 0% 50%; }
.s-fr-impuls {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--s-lod);
  box-shadow: 0 0 0 3px rgba(108, 216, 255, 0.35), 0 0 16px 4px rgba(108, 216, 255, 0.75); /* --s-holo */
  opacity: 0; pointer-events: none;
}
.s-fr-wezel { position: relative; z-index: 2; display: grid; place-items: center; width: 60px; height: 60px; color: var(--s-holo); }
.s-fr-wezel::before {
  content: ""; position: absolute; inset: 9px; transform: rotate(45deg);
  border-radius: 10px;
  background: var(--s-noc-2);
  border: 1.5px solid var(--s-holo);
  box-shadow: 0 0 0 7px var(--s-papier-2), 0 0 30px 0 rgba(108, 216, 255, 0.55); /* --s-holo */
}
.s-fr-wezel svg { position: relative; width: 22px; height: 22px; }
.s-fr-lacznik-tekst {
  position: relative; z-index: 2;
  width: max-content;
  padding: 4px 10px; border-radius: var(--r-pigulka);
  background: var(--s-papier);
  border: 1px solid var(--s-linia);
  font-family: var(--f-display); font-size: 0.8125rem; font-weight: 600; line-height: 1.3;
  color: var(--s-tusz); white-space: nowrap;
}
@media (min-width: 992px) {
  .s-fr-lacznik { display: block; min-height: 0; padding: 0; }
  .s-fr-os { top: 6%; bottom: 6%; background: linear-gradient(180deg, transparent, var(--s-holo-2) 16%, var(--s-holo) 50%, var(--s-holo-2) 84%, transparent); }
  .s-fr-ramie { display: block; }
  .s-fr-wezel { position: absolute; left: 50%; top: 50%; margin: -30px 0 0 -30px; }
  .s-fr-lacznik-tekst {
    position: absolute; left: 0; right: 0; top: calc(50% + 42px);
    margin-inline: auto;
    padding: 4px 8px;
    font-size: 0.75rem;
  }
}

.s-fr-podpis { display: flex; justify-content: center; margin-top: var(--o-5); text-align: center; }

/* =========================================================================
   FILARY — śródtytuł + trzy karty zalewane kolorem
   ========================================================================= */
.s-fr-filary-glowa {
  display: flex; align-items: center; gap: var(--o-5);
  max-width: 940px; margin: clamp(72px, 3rem + 4vw, 128px) auto var(--o-6);
  text-align: center;
}
.s-fr-filary-t {
  flex: 0 1 auto;
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2rem); line-height: 1.2; letter-spacing: -0.02em;
  color: var(--s-tusz);
}
.s-fr-kreska { flex: 1 1 24px; min-width: 24px; height: 1.5px; background: var(--s-trio); opacity: 0.7; }
.s-fr-kreska:first-child { transform: scaleX(-1); }

.s-fr-filary {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--o-4);
  max-width: 640px; margin: 0 auto; padding: 0; list-style: none;
}
@media (min-width: 992px) {
  .s-fr-filary { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; gap: var(--o-5); }
}
.s-fr-filar { display: grid; min-width: 0; }
.s-fr-filar .s-karta { height: 100%; }
.s-fr-filar-gora { display: flex; align-items: center; justify-content: space-between; gap: var(--o-3); }
.s-fr-filar-gora .s-etykieta { text-align: right; }
.s-fr-filar h3 { font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.7rem); letter-spacing: -0.015em; }
.s-fr-filar .s-karta > p { font-size: 1rem; line-height: 1.6; }
.s-fr-punkty { display: grid; gap: 10px; margin: auto 0 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--s-linia); transition: border-color var(--d-wolno) var(--e-out); }
.s-fr-punkty li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--t-maly); line-height: 1.45; color: var(--s-tusz); transition: color var(--d-wolno) var(--e-out); }
.s-fr-punkty svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--c); transition: color var(--d-wolno) var(--e-out); }
/* zalanie karty (hover / .is-lit na dotyku) — tekst w kolorze „na wypełnieniu” */
.s-fr-filar .s-karta.is-lit .s-fr-punkty li,
.s-fr-filar .s-karta.is-lit .s-fr-punkty svg { color: var(--c-on); }
.s-fr-filar .s-karta.is-lit .s-fr-punkty { border-color: currentColor; }
@media (hover: hover) {
  .s-fr-filar .s-karta:hover .s-fr-punkty li,
  .s-fr-filar .s-karta:hover .s-fr-punkty svg { color: var(--c-on); }
  .s-fr-filar .s-karta:hover .s-fr-punkty { border-color: currentColor; }
}

/* =========================================================================
   TELEFON / WĄSKO
   ========================================================================= */
@media (max-width: 991px) {
  .s-fr-wjazd--l, .s-fr-wjazd--p { transform-origin: 50% 50%; }
}
@media (max-width: 560px) {
  #fronty { --s-fr-h: 56px; }
  .s-fr-kafel-in { gap: 16px; }
  .s-fr-lista { grid-template-columns: 18px minmax(0, 1fr); column-gap: 8px; }
  .s-fr-sloty span { padding-left: 4px; }
  .s-fr-sloty span::after { left: 26px; }
  .s-fr-wynik { gap: 10px; padding: 0 10px; }
  .s-fr-fav { width: 26px; height: 26px; border-radius: 8px; }
  .s-fr-szukaj { font-size: 0.9375rem; }
  .s-fr-pyt { max-width: 94%; }
  .s-fr-etyk-t { font-size: 1.25rem; }
  .s-fr-filary-glowa { gap: var(--o-3); }
  .s-fr-kreska { display: none; }
}


/* ===== sekcja: dowodztwo ===== */
/* „Ty dowodzisz” — interaktywna makieta panelu dowódcy (ciemne okno).
   Ścieżka czytania: duży tytuł → akapit wiodący → „jak korzystać” (1-2-3) → panel (kolumny 1-2-3) → trzy zasady.
   Panel wstaje ze stołu z siatką przy przewijaniu (JS).
   Prefiks: s-dow-. Kolory statusów: W kontroli = lazur, Gotowy = holo, Zaplanowany = piasek. */

#dowodztwo { --dow-pad: 20px; }
.s-dow-wrap { position: relative; z-index: 1; }

/* ---------- nagłówek: tytuł do lewej ---------- */
.s-dow-glowa {
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center;
  gap: var(--o-6) clamp(32px, 5vw, 80px);
  margin-bottom: var(--o-7);
}
.s-dow-glowa-tekst { display: grid; justify-items: start; gap: var(--o-5); min-width: 0; }
.s-dow-glowa h2 {
  font-size: clamp(2.3rem, 1.1rem + 3.4vw, 4.6rem);
  line-height: 1.02; letter-spacing: -0.035em;
  text-wrap: initial;
}
.s-dow-glowa .s-lead { max-width: 54ch; }

/* jak korzystać z panelu — trzy kroki, te same cyfry co w nagłówkach kolumn panelu */
.s-dow-jak {
  display: grid; gap: 12px; width: 100%; max-width: 760px;
  margin-top: 6px; padding: 16px 20px 18px 18px;
  border-radius: 18px;
  background: rgba(238, 247, 252, 0.04);           /* --s-bialy */
  border: 1px solid var(--s-linia-noc-mocna);
}
.s-dow-jak-tytul { font-family: var(--f-display); font-size: 0.9375rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--s-bialy); }
.s-dow-kroki { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; }
.s-dow-kroki li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9375rem; line-height: 1.4; color: var(--s-tekst-noc); }
.s-dow-kroki li > span:last-child { padding-top: 2px; }

/* cyfra kroku (w „jak korzystać” i w nagłówkach kolumn panelu) */
.s-dow-nr {
  display: inline-grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid rgba(108, 216, 255, 0.5);      /* --s-holo */
  background: rgba(108, 216, 255, 0.1);            /* --s-holo */
  font-family: var(--f-display); font-size: 0.8125rem; font-weight: 600; line-height: 1; color: var(--s-holo);
}

/* ---------- scena: stół z siatką (cicha dekoracja) + panel ---------- */
.s-dow-scena { position: relative; }
.s-dow-podloga { position: absolute; left: 50%; bottom: -70px; width: 150%; height: 340px; margin-left: -75%; z-index: 0; pointer-events: none; opacity: 0.6; }
.s-dow-podloga-siatka {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(108, 216, 255, 0.12) 1px, transparent 1px),          /* --s-holo */
    linear-gradient(90deg, rgba(108, 216, 255, 0.12) 1px, transparent 1px);   /* --s-holo */
  background-size: 46px 46px;
  background-position: center bottom;
  transform: perspective(700px) rotateX(70deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: radial-gradient(ellipse 46% 70% at 50% 60%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 46% 70% at 50% 60%, #000 10%, transparent 72%);
}
.s-dow-podloga-blask {
  position: absolute; left: 15%; right: 15%; bottom: 40px; height: 160px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(46, 143, 208, 0.26), transparent 72%);   /* --s-holo-2 */
}

.s-dow-panel {
  position: relative; z-index: 1;
  border-radius: var(--r-karta);
  background: rgba(7, 16, 26, 0.94);                                 /* --s-noc-2 */
  border: 1px solid var(--s-linia-noc-mocna);
  box-shadow:
    0 50px 120px -50px rgba(46, 143, 208, 0.5),                     /* --s-holo-2 */
    inset 0 1px 0 rgba(216, 244, 255, 0.07);                        /* --s-lod */
}

/* linie podziału (rysują się przy wjeździe) */
.s-dow-linia { position: absolute; pointer-events: none; }
.s-dow-linia--belka { left: 0; right: 0; bottom: 0; height: 1px; background: var(--s-trio); opacity: 0.6; }
.s-dow-linia--dol { left: 0; right: 0; top: 0; height: 1px; background: var(--s-linia-noc-mocna); }
.s-dow-linia--pion { right: 0; top: 20px; bottom: 20px; width: 1px; background: var(--s-linia-noc); }

/* ---------- belka panelu ---------- */
.s-dow-belka {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  min-height: 58px; padding: 8px 10px 8px var(--dow-pad);
}
.s-dow-belka-znak {
  display: inline-flex; align-items: center; gap: 10px; min-width: 0;
  font-family: var(--f-display); font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--s-bialy); white-space: nowrap;
}
.s-dow-belka-ikona { width: 20px; height: 20px; flex: none; }
.s-dow-belka-nota {
  margin-left: auto; min-width: 0;
  padding: 4px 12px; border-radius: var(--r-pigulka);
  border: 1px solid var(--s-linia-noc);
  font-size: 0.8125rem; line-height: 1.4; color: var(--s-cichy-noc);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#dowodztwo .s-dow-belka .s-pauza { position: relative; width: 40px; height: 40px; flex: none; }
html:not(.s-js) #dowodztwo .s-pauza { display: none; }

/* ---------- siatka trzech kolumn ---------- */
.s-dow-siatka {
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.08fr) minmax(0, 1.22fr);
}
.s-dow-kol { position: relative; display: grid; align-content: start; gap: 14px; padding: var(--dow-pad); min-width: 0; }
.s-dow-podglad { padding-right: var(--dow-pad); }
.s-dow-podglad .s-dow-linia { display: none; }
.s-dow-kol-glowa { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.s-dow-kol-glowa h3 {
  font-family: var(--f-display); font-size: 1.0625rem; font-weight: 600; line-height: 1.25;
  letter-spacing: -0.01em; color: var(--s-bialy);
}

/* ---------- 1 · cele kampanii ---------- */
.s-dow-kamp-nazwa { display: grid; gap: 6px; }
.s-dow-kamp-tytul { font-family: var(--f-display); font-weight: 600; font-size: 1.4rem; line-height: 1.15; letter-spacing: -0.02em; color: var(--s-bialy); }
.s-dow-kamp-fraza { display: flex; align-items: center; gap: 8px; font-size: 0.9375rem; color: var(--s-bialy); }
.s-dow-kamp-fraza .s-ik { width: 18px; height: 18px; color: var(--s-piasek); flex: none; }
.s-dow-kamp-fraza-et { color: var(--s-cichy-noc); }
.s-dow-cele {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  border: 1px solid rgba(108, 216, 255, 0.24);   /* --s-holo */
  background: rgba(108, 216, 255, 0.05);          /* --s-holo */
  font-size: 0.875rem; line-height: 1.35; color: var(--s-bialy);
  transition: box-shadow var(--d-wolno) var(--e-out), border-color var(--d-wolno) var(--e-out);
}
.s-dow-cele .s-ik { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--s-holo); }
.s-dow-cele small, .s-dow-rekonesans small { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--s-cichy-noc); }
.s-dow-rekonesans { display: flex; align-items: flex-start; gap: 10px; padding: 0 2px; font-size: 0.875rem; line-height: 1.35; color: var(--s-tekst-noc); }
.s-dow-rekonesans .s-ik { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--s-piasek); }

/* mapa klastra — mała ilustracja, ciszej od treści */
.s-dow-mapa { display: grid; gap: 4px; }
.s-dow-mapa-svg { width: 100%; max-width: 210px; height: auto; overflow: visible; }
.s-dow-mapa-linki path { fill: none; stroke: var(--s-linia-noc-mocna); stroke-width: 1.2; }
.s-dow-mapa-linki .s-dow-mapa-boczne { stroke-dasharray: 3 4; }
.s-dow-wezel text { font-family: var(--f-display); font-size: 11px; font-weight: 600; text-anchor: middle; fill: var(--s-bialy); }
.s-dow-wezel-pole { fill: var(--s-noc-3); stroke-width: 1.5; transition: fill var(--d-wolno) var(--e-out), stroke var(--d-wolno) var(--e-out); }
.s-dow-wezel-ring { fill: none; stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity var(--d-wolno) var(--e-out); }
.s-dow-wezel[data-status="gotowy"] .s-dow-wezel-pole { stroke: var(--s-holo); fill: rgba(108, 216, 255, 0.16); }   /* --s-holo */
.s-dow-wezel[data-status="gotowy"] text { fill: var(--s-holo); }
.s-dow-wezel[data-status="plan"] .s-dow-wezel-pole { stroke: var(--s-piasek); fill: var(--s-piasek); }
.s-dow-wezel[data-status="plan"] text { fill: var(--s-tusz); }
.s-dow-wezel[data-status="kontrola"] .s-dow-wezel-pole { stroke: var(--s-holo-2); fill: rgba(46, 143, 208, 0.14); }   /* --s-holo-2 */
.s-dow-wezel[data-status="kontrola"] .s-dow-wezel-ring { stroke: var(--s-holo-2); stroke-dasharray: 4 5; opacity: 0.7; }
.s-dow.is-zywy .s-dow-wezel[data-status="kontrola"] .s-dow-wezel-ring { animation: s-dow-obrot 9s linear infinite; }
.s-dow-wezel.is-wybrany .s-dow-wezel-ring, .s-dow-wezel.is-hover .s-dow-wezel-ring { opacity: 1; stroke: var(--s-lod); stroke-dasharray: none; }
.s-dow-wezel.is-wybrany .s-dow-wezel-pole { stroke-width: 2.2; }
@keyframes s-dow-obrot { to { transform: rotate(360deg); } }
.s-dow-mapa-podpis { font-size: 0.8125rem; line-height: 1.4; color: var(--s-cichy-noc); }

/* stan klastra: pasek + legenda (zwykły tekst, bez animowanych liczb) */
.s-dow-stan { display: grid; gap: 8px; }
.s-dow-stan-tytul { font-family: var(--f-display); font-size: 0.875rem; font-weight: 600; line-height: 1.3; color: var(--s-tekst-noc); }
.s-dow-postep-pasek { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.s-dow-postep-pasek i { position: relative; height: 6px; border-radius: 3px; overflow: hidden; background: rgba(160, 220, 255, 0.1); }   /* --s-linia-noc */
.s-dow-postep-pasek b { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); transition: transform 0.7s var(--e-out), background-color var(--d-wolno) var(--e-out); }
.s-dow-postep-pasek [data-status="plan"] b { transform: scaleX(1); background: var(--s-piasek); }
.s-dow-postep-pasek [data-status="gotowy"] b { transform: scaleX(1); background: rgba(108, 216, 255, 0.55); }   /* --s-holo */
.s-dow-postep-pasek [data-status="kontrola"] b { transform: scaleX(0.45); background: var(--s-holo-2); }
.s-dow-legenda { display: grid; gap: 2px; margin: 2px 0 0; }
.s-dow-legenda > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 3px 0; }
.s-dow-legenda dt { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; line-height: 1.35; color: var(--s-tekst-noc); min-width: 0; }
.s-dow-legenda dt::before { content: ""; flex: none; width: 12px; height: 6px; border-radius: 3px; }
.s-dow-legenda [data-status="plan"] dt::before { background: var(--s-piasek); }
.s-dow-legenda [data-status="gotowy"] dt::before { background: rgba(108, 216, 255, 0.55); }   /* --s-holo */
.s-dow-legenda [data-status="kontrola"] dt::before { background: var(--s-holo-2); }
.s-dow-legenda dd { margin: 0; font-family: var(--f-display); font-size: 0.9375rem; font-weight: 600; line-height: 1.3; color: var(--s-bialy); white-space: nowrap; font-variant-numeric: tabular-nums; }
.s-dow-legenda [data-status="plan"] dd { color: var(--s-piasek); }
.s-dow-harmonogram { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--s-cichy-noc); }
.s-dow-harmonogram .s-ik { width: 16px; height: 16px; flex: none; color: var(--s-holo); }

/* ---------- 2 · posty do decyzji ---------- */
.s-dow-lista { display: grid; gap: 8px; }
.s-dow-lista > li { display: flex; min-width: 0; }
.s-dow-post {
  position: relative; width: 100%;
  display: grid; grid-template-columns: 22px minmax(0, 1fr) 46px; gap: 6px 10px; align-items: start;
  grid-template-areas: "nr tytul luk" "nr fraza luk" "nr status status";
  padding: 12px 12px 12px 10px; border-radius: 14px; text-align: left;
  background: rgba(238, 247, 252, 0.025);        /* --s-bialy */
  border: 1px solid var(--s-linia-noc);
  transition: border-color var(--d-srednio) var(--e-out), background-color var(--d-srednio) var(--e-out);
}
.s-dow-post::before {
  content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--s-holo); transform: scaleY(0); transition: transform var(--d-wolno) var(--e-out);
}
@media (hover: hover) { .s-dow-post:hover { border-color: var(--s-linia-noc-mocna); background: rgba(108, 216, 255, 0.05); } }   /* --s-holo */
.s-dow-post[aria-pressed="true"] { border-color: rgba(108, 216, 255, 0.55); background: rgba(108, 216, 255, 0.08); }   /* --s-holo */
.s-dow-post[aria-pressed="true"]::before { transform: scaleY(1); }
.s-dow-post-nr { grid-area: nr; padding-top: 1px; text-align: center; font-family: var(--f-display); font-size: 0.875rem; font-weight: 600; line-height: 1.35; color: var(--s-cichy-noc); }
.s-dow-post[aria-pressed="true"] .s-dow-post-nr { color: var(--s-holo); }
.s-dow-post-tresc { display: contents; }
.s-dow-post .s-dow-status { grid-area: status; justify-self: start; margin-top: 2px; }
.s-dow-post .s-dow-luk { grid-area: luk; }
.s-dow-post-tytul { grid-area: tytul; min-width: 0; font-family: var(--f-display); font-size: 0.9375rem; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; color: var(--s-bialy); overflow-wrap: anywhere; }
.s-dow-post-fraza { grid-area: fraza; min-width: 0; font-size: 0.8125rem; line-height: 1.35; color: var(--s-cichy-noc); overflow-wrap: anywhere; }

/* status — pigułka: kształt znacznika + tekst (kolor nie jest jedynym nośnikiem informacji) */
.s-dow-status {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 11px 3px 9px; border-radius: var(--r-pigulka);
  border: 1px solid var(--s-linia-noc-mocna);
  font-family: var(--f-display); font-size: 0.75rem; font-weight: 600; line-height: 1.45; letter-spacing: 0;
  white-space: nowrap;
  transform-origin: 50% 50%;
}
.s-dow-status::before { content: ""; flex: none; width: 7px; height: 7px; box-sizing: border-box; }
.s-dow-status[data-status="gotowy"] { color: var(--s-holo); border-color: rgba(108, 216, 255, 0.45); background: rgba(108, 216, 255, 0.08); }   /* --s-holo */
.s-dow-status[data-status="gotowy"]::before { background: currentColor; border-radius: 50%; }
.s-dow-status[data-status="kontrola"] { color: var(--s-tekst-noc); border-color: rgba(46, 143, 208, 0.65); background: rgba(46, 143, 208, 0.1); }   /* --s-holo-2 */
.s-dow-status[data-status="kontrola"]::before { border: 1.5px solid var(--s-holo-2); border-right-color: transparent; border-radius: 50%; width: 9px; height: 9px; }
.s-dow.is-zywy .s-dow-status[data-status="kontrola"]::before { animation: s-dow-obrot 1.2s linear infinite; }
.s-dow-status[data-status="plan"] { color: var(--s-piasek); border-color: rgba(210, 194, 154, 0.45); background: rgba(210, 194, 154, 0.1); }   /* --s-piasek */
.s-dow-status[data-status="plan"]::before { width: 5px; height: 9px; margin: -2px 2px 0 1px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
#dowodztwo[data-paused] .s-dow-status[data-status="kontrola"]::before,
#dowodztwo[data-paused] .s-dow-wezel[data-status="kontrola"] .s-dow-wezel-ring { animation-play-state: paused; }

/* mini-łuk wyniku (zmiana wartości: łuk przechodzi płynnie, liczba podmienia się z przenikaniem — bez odliczania) */
.s-dow-luk { position: relative; width: 46px; height: 46px; display: grid; place-items: center; }
.s-dow-luk svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.s-dow-luk-tlo { fill: none; stroke: rgba(160, 220, 255, 0.14); stroke-width: 3.5; }   /* --s-linia-noc */
.s-dow-luk-war { fill: none; stroke: var(--s-holo); stroke-width: 3.5; transition: stroke-dasharray 0.9s var(--e-out), stroke var(--d-wolno) var(--e-out); }
.s-dow-luk-prog { fill: none; stroke: var(--s-piasek); stroke-width: 2; }
[data-niski] .s-dow-luk-war { stroke: var(--s-holo-2); }
.s-dow-luk-liczba { position: relative; font-family: var(--f-display); font-size: 0.8125rem; font-weight: 600; color: var(--s-bialy); font-variant-numeric: tabular-nums; }
.s-dow-luk-liczba [data-wynik], [data-dow-wynik] { display: inline-block; }

/* ---------- 3 · podgląd i decyzja ---------- */
.s-dow-karta {
  position: relative; overflow: hidden;
  display: grid; align-content: start;
  padding: 16px; border-radius: 16px;
  background: rgba(3, 7, 13, 0.6);                 /* --s-noc */
  border: 1px solid var(--s-linia-noc-mocna);
}
.s-dow-karta-gora { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--s-linia-noc); }
.s-dow-karta-typ { font-family: var(--f-display); font-size: 0.875rem; font-weight: 600; line-height: 1.3; color: var(--s-tekst-noc); }
.s-dow-zmienna { display: grid; }
.s-dow-konspekt { display: grid; gap: 7px; }
.s-dow-konspekt li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 0.875rem; line-height: 1.4; color: var(--s-tekst-noc); border-radius: 6px; }
.s-dow-konspekt li.is-h1 { font-family: var(--f-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--s-bialy); }
.s-dow-konspekt li.is-url > span:last-child { font-size: 0.8125rem; color: var(--s-cichy-noc); overflow-wrap: anywhere; }
.s-dow-konspekt li.is-nowy > span:last-child { color: var(--s-holo); }
.s-dow-tag {
  display: inline-grid; place-items: center; padding: 1px 0;
  border: 1px solid var(--s-linia-noc-mocna); border-radius: 6px;
  font-family: var(--f-display); font-size: 0.625rem; font-weight: 600; letter-spacing: 0; line-height: 1.6; color: var(--s-holo);
}
.s-dow-konspekt li.is-url .s-dow-tag { color: var(--s-piasek); }

.s-dow-wynik { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--s-linia-noc-mocna); }
.s-dow-wskaznik { position: relative; width: 72px; height: 72px; flex: none; display: grid; place-items: center; }
.s-dow-wskaznik svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.s-dow-wskaznik .s-dow-luk-tlo, .s-dow-wskaznik .s-dow-luk-war { stroke-width: 5; }
.s-dow-wskaznik b { position: relative; font-family: var(--f-display); font-weight: 600; font-size: 1.55rem; line-height: 1; letter-spacing: -0.02em; color: var(--s-bialy); font-variant-numeric: tabular-nums; }
.s-dow-wynik-opis { display: grid; gap: 3px; flex: 1 1 0; min-width: 120px; }
.s-dow-wynik-et { font-size: 0.8125rem; font-weight: 600; line-height: 1.3; color: var(--s-cichy-noc); }
.s-dow-werdykt { font-family: var(--f-display); font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--s-holo); }
.s-dow-wynik[data-niski] .s-dow-werdykt { color: var(--s-lod); }
.s-dow-wynik-prog { font-size: 0.8125rem; color: var(--s-cichy-noc); }

/* pieczęć zatwierdzenia */
.s-dow-pieczec {
  display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: 7px; row-gap: 1px;
  margin-left: auto; padding: 6px 12px 7px 10px;
  border: 2px solid var(--s-piasek); border-radius: 10px;
  outline: 1px solid rgba(210, 194, 154, 0.4); outline-offset: 2px;   /* --s-piasek */
  color: var(--s-piasek); background: rgba(3, 7, 13, 0.6);           /* --s-noc */
  transform: rotate(-6deg);
}
.s-dow-pieczec[hidden] { display: none; }
.s-dow-pieczec .s-ik { width: 16px; height: 16px; grid-row: span 2; stroke-width: 2.4; }
.s-dow-pieczec b { font-family: var(--f-display); font-size: 0.875rem; font-weight: 600; letter-spacing: 0; line-height: 1.2; }
.s-dow-pieczec small { font-size: 0.75rem; line-height: 1.25; color: var(--s-tekst-noc); white-space: nowrap; }
.s-dow-fala { position: absolute; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; border: 1.5px solid var(--s-piasek); pointer-events: none; opacity: 0; }

.s-dow-kontrole { display: grid; gap: 6px; margin-top: 14px; }
.s-dow-kontrole li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 9px; align-items: center;
  padding: 7px 10px 7px 9px; border-radius: 8px;
  background: rgba(238, 247, 252, 0.03);           /* --s-bialy */
  border-left: 2px solid var(--s-holo);
  font-size: 0.875rem; line-height: 1.35; color: var(--s-tekst-noc);
}
.s-dow-kontrole .s-ik { width: 16px; height: 16px; color: var(--s-holo); stroke-width: 2.2; }
.s-dow-kontrole li[data-ok="false"] { border-left-color: var(--s-wrog); color: var(--s-bialy); }
.s-dow-kontrole li[data-ok="false"] .s-ik { color: var(--s-wrog); }
.s-dow-ai { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 0.8125rem; line-height: 1.45; color: var(--s-cichy-noc); }
.s-dow-ai .s-ik { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--s-holo); }

/* przebieg kontroli w pętli poprawek (pasmo przesuwa się po liście kontroli) */
.s-dow-skan { position: absolute; left: 0; right: 0; top: 0; height: 36px; pointer-events: none; opacity: 0; z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(108, 216, 255, 0.12) 70%, rgba(108, 216, 255, 0.0));   /* --s-holo */
  border-bottom: 1.5px solid rgba(108, 216, 255, 0.7);   /* --s-holo */
}

.s-dow-akcje { display: grid; gap: 8px; margin-top: 16px; }
html:not(.s-js) .s-dow-akcje { display: none; }
.s-dow-akcje .s-btn--pelny .s-btn-tekst { padding-right: 10px; }
.s-dow-odeslij { min-height: 46px; width: 100%; justify-content: center; padding: 0 18px; font-size: 0.9375rem; }
.s-dow-odeslij[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.s-dow-akcje .is-wskazany { box-shadow: var(--s-poswiata); }
.s-dow-odeslij.is-wskazany { border-color: var(--s-holo); }
.s-dow-cele.is-wskazany { box-shadow: var(--s-poswiata); border-color: var(--s-holo); }
.s-dow-podpowiedz { margin-top: 10px; min-height: 2.9em; font-size: 0.875rem; line-height: 1.45; color: var(--s-tekst-noc); }
html:not(.s-js) .s-dow-podpowiedz { display: none; }

/* ---------- dziennik: komunikat po każdym rozkazie (styl objaśnienia: ikona w szklanym polu + zwykły tekst) ---------- */
.s-dow-dziennik {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 12px var(--dow-pad) 14px;
}
.s-dow-dziennik-ikona {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px;
  background: rgba(108, 216, 255, 0.1); color: var(--s-holo);                 /* --s-holo */
  box-shadow: inset 0 0 0 1px rgba(108, 216, 255, 0.18);                       /* --s-holo */
}
.s-dow-dziennik-ikona .s-ik { width: 16px; height: 16px; }
.s-dow-dziennik-tekst { display: grid; min-width: 0; font-size: 0.9375rem; line-height: 1.45; color: var(--s-bialy); }
.s-dow-dziennik-tekst > span { grid-area: 1 / 1; overflow-wrap: anywhere; }

/* ---------- trzy zasady ---------- */
.s-dow-zasady { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: var(--o-8); }
.s-dow-zasada { display: grid; align-content: start; gap: 14px; transition: border-color var(--d-wolno) var(--e-out); }
@media (hover: hover) { .s-dow-zasada:hover { border-color: var(--c-noc); } }
.s-dow-zasada-ikona { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--c-tint); color: var(--c-noc); }
.s-dow-zasada-ikona .s-ik { width: 24px; height: 24px; }
.s-dow-zasada h3 { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.02em; color: var(--s-bialy); margin-top: 4px; }
.s-dow-zasada p { font-size: 1rem; line-height: 1.6; color: var(--s-tekst-noc); }

/* ---------- średnie ekrany: kampania na górze, lista + podgląd obok siebie ---------- */
@media (max-width: 1099px) {
  .s-dow-siatka { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }
  .s-dow-kampania {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "glowa glowa" "nazwa mapa" "rek mapa" "cele stan" "harm stan";
    column-gap: 28px;
  }
  .s-dow-kampania > .s-dow-kol-glowa { grid-area: glowa; }
  .s-dow-kamp-nazwa { grid-area: nazwa; }
  .s-dow-cele { grid-area: cele; align-self: start; }
  .s-dow-rekonesans { grid-area: rek; }
  .s-dow-mapa { grid-area: mapa; justify-items: center; text-align: center; }
  .s-dow-stan { grid-area: stan; align-self: start; }
  .s-dow-harmonogram { grid-area: harm; }
  .s-dow-kampania > .s-dow-linia--pion { left: var(--dow-pad); right: var(--dow-pad); top: auto; bottom: 0; width: auto; height: 1px; }
}
@media (max-width: 991px) {
  #dowodztwo { --dow-pad: 16px; }
  .s-dow-zasady { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
/* ---------- telefon: nagłówek w jednej kolumnie, kolumny panelu jedna pod drugą, lista jako pasek kart przewijany w bok ---------- */
@media (max-width: 759px) {
  #dowodztwo { --dow-pad: 12px; }
  .s-dow-glowa { grid-template-columns: minmax(0, 1fr); gap: var(--o-5); }
  .s-dow-kroki { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .s-dow-siatka { grid-template-columns: minmax(0, 1fr); }
  .s-dow-kampania { grid-template-columns: minmax(0, 1fr); grid-template-areas: "glowa" "nazwa" "rek" "cele" "mapa" "stan" "harm"; }
  .s-dow-mapa { justify-items: start; text-align: left; }
  .s-dow-post { grid-template-columns: 22px minmax(0, 1fr) 46px; grid-template-areas: "nr fraza luk" "tytul tytul tytul" "status status status"; row-gap: 8px; align-items: center; }
  .s-dow-post .s-dow-status { margin-top: 0; }
  .s-dow-oddzial > .s-dow-linia--pion { left: var(--dow-pad); right: var(--dow-pad); top: auto; bottom: 0; width: auto; height: 1px; }
  .s-dow-lista {
    display: flex; gap: 10px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--dow-pad)); padding: 2px var(--dow-pad) 12px;
    scroll-padding-inline: var(--dow-pad);
    scrollbar-width: thin; scrollbar-color: rgba(108, 216, 255, 0.35) transparent;   /* --s-holo */
  }
  .s-dow-lista > li { flex: 0 0 min(86%, 290px); scroll-snap-align: start; }
  .s-dow-belka { padding-left: 14px; gap: 10px; }
  .s-dow-karta { padding: 13px; }
  .s-dow-pieczec { margin-left: 0; }
}
@media (max-width: 520px) {
  .s-dow-belka { flex-wrap: wrap; row-gap: 4px; padding-block: 8px 10px; }
  .s-dow-belka .s-pauza { margin-left: auto; }
  .s-dow-belka-nota { order: 3; margin-left: 0; }
}
@media (max-width: 380px) {
  .s-dow-akcje .s-btn--maly { font-size: 0.875rem; }
  .s-dow-akcje .s-btn--maly .s-btn-tekst { padding-left: 16px; }
  .s-dow-akcje .s-btn--maly .s-btn-pole { width: 42px; }
  .s-dow-odeslij { font-size: 0.875rem; padding: 0 12px; }
  .s-dow-wskaznik { width: 62px; height: 62px; }
  .s-dow-wskaznik b { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .s-dow-luk-war, .s-dow-postep-pasek b { transition: none; }
}

/* zablokowany „Zatwierdź” nie udaje aktywnego przycisku */
.s-dow-zatwierdz[aria-disabled="true"]::before { display: none; }
@media (hover: hover) {
  .s-dow-zatwierdz[aria-disabled="true"]:hover { color: var(--s-tusz); box-shadow: none; }
  .s-dow-zatwierdz[aria-disabled="true"]:hover .s-btn-pole { background: var(--s-piasek); color: var(--s-tusz); }
  .s-dow-zatwierdz[aria-disabled="true"]:hover .s-btn-pole svg { transform: none; }
}


/* ===== sekcja: porownanie ===== */
/* PORÓWNANIE — macierz „oddział zamiast samotnego strzelca”.
   Ścieżka czytania: miejsce na wagę z mgławicy → tytuł → akapit wiodący (z wyróżnionym zdaniem) → legenda → tabela → nota → przycisk.
   Prawdziwa <table> na białej karcie; kolumna SEOLDIER = ciemny pas (.s-ramka-trio) wysunięty ponad i pod tabelę.
   Na komputerze pas wypełnia się przy przewijaniu, a wiersze płynnie się pojawiają; najechanie = podświetlenie wiersza i kolumny.
   Telefon i tablet (≤991 px): karty per kryterium, 4 wartości w siatce 2×2 z podpisami. */

#porownanie {
  --por-k0: 34%;          /* szerokość kolumny kryteriów */
  --por-k1: 18%;          /* szerokość kolumny SEOLDIER (pas) */
  --por-wys: 30px;        /* o ile pas wystaje ponad i pod tabelę */
}

/* ---------- nagłówek: waga z mgławicy nad tytułem, akapit wiodący ---------- */
#porownanie .s-glowa { gap: var(--o-5); }
#porownanie .s-glowa .s-lead { max-width: 60ch; text-wrap: balance; }

/* ---------- legenda ---------- */
#porownanie .s-por-legenda {
  display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 12px 36px;
  margin: 0 auto var(--o-7);
}
#porownanie .s-por-legenda li { font-size: var(--t-maly); line-height: 1.4; color: var(--s-tekst); }
#porownanie .s-por-legenda b { font-weight: 600; color: var(--s-tusz); }

/* ---------- wartość: znacznik + słowo ---------- */
#porownanie .s-por-w { display: inline-flex; align-items: center; gap: 10px; text-align: left; }
#porownanie .s-por-chip {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--s-papier-3); color: var(--s-tekst);
}
#porownanie .s-por-chip svg { width: 17px; height: 17px; }
#porownanie .s-por-w--tak .s-por-chip { background: rgba(108, 216, 255, 0.24); /* --s-holo */ color: var(--s-holo-tusz); }
#porownanie .s-por-w--zalezy .s-por-chip { background: rgba(210, 194, 154, 0.34); /* --s-piasek */ color: var(--s-piasek-tusz); }
#porownanie .s-por-w--recznie .s-por-chip { background: var(--s-papier-3); color: var(--s-tekst); }
#porownanie .s-por-w--nie .s-por-chip { background: transparent; box-shadow: inset 0 0 0 1px var(--s-linia-mocna); color: var(--s-cichy); }
#porownanie .s-por-ptak path { stroke-linecap: butt; stroke-dasharray: 1; stroke-dashoffset: 0; }
#porownanie .s-por-wt { font-size: 0.9375rem; line-height: 1.3; font-weight: 500; color: var(--s-tekst); }
#porownanie .s-por-w--tak .s-por-wt { color: var(--s-tusz); font-weight: 600; }
#porownanie .s-por-w--zalezy .s-por-wt { color: var(--s-piasek-tusz); }
#porownanie .s-por-w--nie .s-por-wt { color: var(--s-cichy); }

/* ---------- karta z tabelą ---------- */
#porownanie .s-por-rama {
  position: relative; isolation: isolate;
  margin-top: calc(var(--por-wys) + var(--o-5));
  border-radius: var(--r-karta);
  background: var(--s-papier);
  border: 1px solid var(--s-linia);
  box-shadow: 0 34px 80px -46px rgba(7, 17, 26, 0.34); /* --s-tusz */
}
#porownanie .s-por-tab {
  position: relative; z-index: 2;
  width: 100%; table-layout: fixed;
  border-collapse: separate; border-spacing: 0;
}
#porownanie .s-por-k0 { width: var(--por-k0); }
#porownanie .s-por-k1 { width: var(--por-k1); }
#porownanie .s-por-tab :is(th, td) {
  position: relative;
  padding: 15px 14px;
  border-bottom: 1px solid var(--s-linia);
  text-align: center; vertical-align: middle; font-weight: 400;
  transition: background-color var(--d-srednio) var(--e-out), box-shadow var(--d-srednio) var(--e-out);
}
#porownanie .s-por-tab .s-por-sold { color: var(--s-bialy); border-bottom-color: var(--s-linia-noc); }

/* nagłówki kolumn */
#porownanie .s-por-tab thead th { vertical-align: top; padding-top: 26px; padding-bottom: 20px; border-bottom: 1.5px solid var(--s-linia-mocna); }
#porownanie .s-por-tab thead th.s-por-sold { border-bottom-color: rgba(108, 216, 255, 0.4); /* --s-holo */ }
#porownanie .s-por-tab thead th > * { display: block; margin-inline: auto; }
#porownanie .s-por-tab thead th > * + * { margin-top: 8px; }
#porownanie .s-por-ikona {
  display: grid !important; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid var(--s-linia); background: var(--s-papier-2); color: var(--s-holo-tusz);
}
#porownanie .s-por-ikona svg { width: 21px; height: 21px; }
#porownanie .s-por-nazwa { font-family: var(--f-display); font-weight: 600; font-size: 1.125rem; line-height: 1.2; color: var(--s-tusz); }
#porownanie .s-por-opis {
  font-family: var(--f-tekst); font-size: 0.875rem; font-weight: 400; line-height: 1.4;
  color: var(--s-cichy); text-wrap: balance;
}
#porownanie .s-por-naroznik { text-align: left !important; vertical-align: bottom !important; padding-left: 26px !important; }
#porownanie .s-por-naroznik > * { margin-inline: 0 !important; }
#porownanie .s-por-szewrony { width: 30px; height: 30px; }
#porownanie .s-por-logo { width: min(108px, 100%); height: auto; }
#porownanie .s-por-sold .s-por-opis { color: var(--s-holo); font-weight: 500; }

/* kryteria (nagłówki wierszy) */
#porownanie .s-por-tab :is(tbody, tfoot) th { text-align: left; padding-left: 26px; padding-right: 18px; }
#porownanie .s-por-kryt { display: block; font-family: var(--f-display); font-weight: 600; font-size: 1.125rem; line-height: 1.28; letter-spacing: -0.01em; color: var(--s-tusz); }
#porownanie .s-por-pod { display: block; margin-top: 4px; font-size: 0.875rem; line-height: 1.45; color: var(--s-cichy); }
#porownanie .s-por-tab tbody tr:last-child > * { border-bottom: 1.5px solid var(--s-linia-mocna); }
#porownanie .s-por-tab tbody tr:last-child > .s-por-sold { border-bottom-color: rgba(108, 216, 255, 0.4); /* --s-holo */ }
#porownanie .s-por-tab tfoot :is(th, td) { border-bottom: 0; padding-top: 20px; padding-bottom: 22px; }

/* wartości w pasie SEOLDIER */
#porownanie .s-por-sold .s-por-chip {
  background: rgba(108, 216, 255, 0.14); /* --s-holo */
  box-shadow: inset 0 0 0 1px rgba(108, 216, 255, 0.42), 0 0 22px -4px rgba(108, 216, 255, 0.7);
  color: var(--s-holo);
}
#porownanie .s-por-sold .s-por-wt { color: var(--s-bialy); }

/* podsumowanie: ile kryteriów na pewno — zwykły tekst, bez liczników */
#porownanie .s-por-suma { font-family: var(--f-display); font-size: 1rem; font-weight: 400; line-height: 1.2; color: var(--s-cichy); white-space: nowrap; }
#porownanie .s-por-suma b { font-size: 1.5rem; font-weight: 600; color: var(--s-tusz); }
#porownanie .s-por-sold .s-por-suma { color: var(--s-tekst-noc); }
#porownanie .s-por-sold .s-por-suma b { color: var(--s-holo); }

/* zaokrąglenia rogów (podświetlenie nie wychodzi poza kartę) */
#porownanie .s-por-tab thead tr > :first-child { border-top-left-radius: calc(var(--r-karta) - 1px); }
#porownanie .s-por-tab thead tr > :last-child { border-top-right-radius: calc(var(--r-karta) - 1px); }
#porownanie .s-por-tab tfoot tr > :first-child { border-bottom-left-radius: calc(var(--r-karta) - 1px); }
#porownanie .s-por-tab tfoot tr > :last-child { border-bottom-right-radius: calc(var(--r-karta) - 1px); }

/* ---------- holograficzny pas kolumny SEOLDIER ---------- */
#porownanie .s-por-pas {
  position: absolute; z-index: 1;
  left: var(--por-k0); width: var(--por-k1);
  top: calc(-1 * var(--por-wys)); bottom: calc(-1 * var(--por-wys));
  border-radius: var(--r-karta);
  overflow: hidden;
  background:
    radial-gradient(140% 26% at 50% 0%, rgba(46, 143, 208, 0.42), rgba(46, 143, 208, 0) 72%),       /* --s-holo-2 */
    radial-gradient(120% 22% at 50% 100%, rgba(108, 216, 255, 0.16), rgba(108, 216, 255, 0) 72%),   /* --s-holo */
    repeating-linear-gradient(180deg, rgba(160, 220, 255, 0.05) 0 1px, rgba(160, 220, 255, 0) 1px 5px), /* --s-linia-noc */
    var(--s-noc-2);
  box-shadow:
    0 30px 60px -26px rgba(3, 7, 13, 0.6),       /* --s-noc */
    0 0 46px -10px rgba(108, 216, 255, 0.45);    /* --s-holo */
  transition: box-shadow var(--d-wolno) var(--e-out);
}
#porownanie .s-por-drobiny { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
#porownanie .s-por-drobiny i {
  position: absolute; width: 2px; height: 2px; border-radius: 1px;
  background: var(--s-holo); box-shadow: 0 0 6px 1px rgba(108, 216, 255, 0.6); /* --s-holo */
  opacity: 0.32;
}
#porownanie .s-por-drobiny i.is-lod { width: 3px; height: 3px; background: var(--s-lod); opacity: 0.45; }
#porownanie .s-por-drobiny i.is-piasek { background: var(--s-piasek); box-shadow: 0 0 6px 1px rgba(210, 194, 154, 0.6); /* --s-piasek */ }
#porownanie .s-por-blysk {
  position: absolute; left: 0; right: 0; top: 0; height: 64px; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(108, 216, 255, 0), rgba(108, 216, 255, 0.26) 50%, rgba(108, 216, 255, 0)); /* --s-holo */
  opacity: 0;
}
#porownanie .s-por-skan {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2; pointer-events: none;
  height: 2px; margin-top: -1px;
  background: var(--s-lod);
  box-shadow: 0 0 14px 3px rgba(108, 216, 255, 0.75); /* --s-holo */
  opacity: 0;
}
#porownanie .s-por-skan::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 120px;
  background: linear-gradient(0deg, rgba(108, 216, 255, 0.22), rgba(108, 216, 255, 0)); /* --s-holo */
}
/* najechanie myszą (komputer): podświetlony wiersz + kolumna — łatwiej śledzić jedno kryterium */
@media (hover: hover) and (min-width: 992px) {
  #porownanie .s-por-tab :is(tbody, tfoot) tr:hover > * { background-color: rgba(46, 143, 208, 0.07); /* --s-holo-2 */ }
  #porownanie .s-por-tab :is(tbody, tfoot) tr:hover > .s-por-sold { background-color: rgba(108, 216, 255, 0.1); /* --s-holo */ }
  #porownanie .s-por-rama[data-kol="1"] .s-por-tab tr > :nth-child(2) { box-shadow: inset 0 0 0 999px rgba(108, 216, 255, 0.08); /* --s-holo */ }
  #porownanie .s-por-rama[data-kol="2"] .s-por-tab tr > :nth-child(3),
  #porownanie .s-por-rama[data-kol="3"] .s-por-tab tr > :nth-child(4),
  #porownanie .s-por-rama[data-kol="4"] .s-por-tab tr > :nth-child(5) { box-shadow: inset 0 0 0 999px rgba(46, 143, 208, 0.07); /* --s-holo-2 */ }
  #porownanie .s-por-rama[data-kol="1"] .s-por-pas { box-shadow: 0 30px 60px -26px rgba(3, 7, 13, 0.6), 0 0 64px -6px rgba(108, 216, 255, 0.7); }
}

/* wąski komputer: znacznik nad słowem, żeby „wykonawcy” zawsze mieścił się w kolumnie */
@media (min-width: 992px) and (max-width: 1099px) {
  #porownanie .s-por-tab td .s-por-w { flex-direction: column; gap: 6px; text-align: center; }
  #porownanie .s-por-tab :is(th, td) { padding-inline: 10px; }
}

/* ---------- pod tabelą ---------- */
#porownanie .s-por-dol { display: grid; justify-items: center; gap: var(--o-6); margin-top: calc(var(--por-wys) + var(--o-5)); text-align: center; }
#porownanie .s-por-cta { display: grid; justify-items: center; gap: var(--o-4); }
#porownanie .s-por-cta-tekst { font-size: var(--t-maly); color: var(--s-cichy); }

/* =========================================================================
   TELEFON I TABLET — karty per kryterium, wartości w siatce 2×2 z podpisami
   (role ARIA w HTML zachowują semantykę tabeli mimo display:block)
   ========================================================================= */
#porownanie .s-por-kto { display: none; }
@media (max-width: 991px) {
  #porownanie .s-por-legenda { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 12px 20px; max-width: 640px; margin-inline: auto; }
  #porownanie .s-por-pas { display: none; }
  #porownanie .s-por-rama { margin-top: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
  #porownanie .s-por-tab, #porownanie .s-por-tab > tbody, #porownanie .s-por-tab > tfoot,
  #porownanie .s-por-tab tr, #porownanie .s-por-tab th, #porownanie .s-por-tab td { display: block; }
  #porownanie .s-por-tab > thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  #porownanie .s-por-tab > tbody { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--o-3); }
  #porownanie .s-por-tab > tfoot { margin-top: var(--o-3); }
  #porownanie .s-por-tab tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
    padding: 18px;
    border-radius: var(--r-karta);
    background: var(--s-papier);
    border: 1px solid var(--s-linia);
    box-shadow: 0 18px 40px -30px rgba(7, 17, 26, 0.3); /* --s-tusz */
  }
  #porownanie .s-por-tab :is(th, td) { padding: 0; border: 0 !important; border-radius: 0; text-align: left; }
  #porownanie .s-por-tab :is(tbody, tfoot) th { grid-column: 1 / -1; padding: 0 2px 8px; }
  #porownanie .s-por-kryt { font-size: 1.125rem; }
  #porownanie .s-por-tab td {
    padding: 12px 12px 13px;
    border-radius: var(--r-maly);
    background: var(--s-papier-2);
    box-shadow: inset 0 0 0 1px var(--s-linia);
  }
  #porownanie .s-por-tab td.s-por-sold {
    background:
      radial-gradient(120% 70% at 0% 0%, rgba(46, 143, 208, 0.34), rgba(46, 143, 208, 0) 70%), /* --s-holo-2 */
      var(--s-noc-2);
    box-shadow: 0 10px 26px -14px rgba(108, 216, 255, 0.55); /* --s-holo */
  }
  #porownanie .s-por-tab td.s-por-sold::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
    background: var(--s-trio);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  }
  #porownanie .s-por-kto {
    display: block; margin-bottom: 9px;
    font-family: var(--f-display); font-size: 0.8125rem; font-weight: 600; line-height: 1.3;
    color: var(--s-cichy);
  }
  #porownanie .s-por-sold .s-por-kto { color: var(--s-holo); }
  #porownanie .s-por-tab td .s-por-w { display: flex; gap: 8px; }
  #porownanie .s-por-wt { font-size: 0.875rem; }
  #porownanie .s-por-chip { width: 28px; height: 28px; border-radius: 8px; }
  #porownanie .s-por-suma b { font-size: 1.375rem; }
  #porownanie .s-por-tab tfoot tr { background: var(--s-papier); }
}
@media (min-width: 640px) and (max-width: 991px) {
  #porownanie .s-por-tab > tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #porownanie .s-por-tab > tfoot tr { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 379px) {
  #porownanie .s-por-tab tr { padding: 14px; gap: 6px; }
  #porownanie .s-por-tab td { padding: 10px; }
  #porownanie .s-por-tab td .s-por-w { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* przycisk na wąskim ekranie — zawsze jedna linia */
#porownanie .s-por-cta-krotko { display: none; }
@media (max-width: 479px) {
  #porownanie .s-por-cta .s-btn { font-size: 0.9375rem; min-height: 54px; }
  #porownanie .s-por-cta .s-btn-tekst { padding: 0 14px 0 20px; }
  #porownanie .s-por-cta .s-btn-pole { width: 50px; }
}
@media (max-width: 359px) {
  #porownanie .s-por-cta-dlugo { display: none; }
  #porownanie .s-por-cta-krotko { display: inline; }
}


/* ===== sekcja: plany ===== */
/* PLANY — „Przydział”: trzy karty planów (bez cen) w jednej siatce z subgrid (równe wiersze między kartami).
   Ścieżka czytania karty: nazwa planu (Poppins 600) → dla kogo → opis → cena przy starcie → cechy → przycisk.
   Komputer (pełny ruch): talia leży złożona na platformie hologramu, przy przewijaniu (przypięty stół)
   rozkłada się wachlarzem i rozdaje na miejsca; okładki rozpływają się miękką krawędzią (maska), belki stopnia się rysują.
   Karta polecana: neonowa ramka (conic-gradient obracany POD kartą, tylko transform) + pigułka „Polecany” na górnej krawędzi.
   Telefon / ograniczony ruch: karty jedna pod drugą, pełna treść bez ukrywania. */

#plany {
  --pl-luz: clamp(16px, 1.6vw, 24px);      /* odstęp między kartami */
  --pl-pad: clamp(22px, 1rem + 1.2vw, 32px);
}
#plany .s-pl-pauza { right: clamp(14px, 2.2vw, 30px); top: clamp(14px, 2.2vw, 30px); }
#plany .s-pl-pauza[hidden] { display: none; }   /* .s-pauza ma display: grid, który przykrywa atrybut hidden */

/* nagłówek: przedmiot z mgławicy nad pigułką, lead wyraźniej od reszty */
#plany .s-pl-glowa-sekcji { gap: var(--o-5); }
#plany .s-pl-glowa-sekcji .s-lead { max-width: 60ch; }

/* =========================================================================
   STÓŁ: platforma, światło, drobiny (dekoracje — ciszej niż treść, pod kartami)
   ========================================================================= */
#plany .s-pl-stol { position: relative; isolation: isolate; }

#plany .s-pl-platforma {
  position: absolute; z-index: 0; left: 50%; bottom: 0;
  width: 640px; height: 640px; margin: 0 0 -320px -320px;
  pointer-events: none;
}
#plany .s-pl-plaszczyzna { position: absolute; inset: 0; transform: perspective(1100px) rotateX(76deg); opacity: 0.6; }
#plany .s-pl-poswiata {
  position: absolute; inset: 14%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(108, 216, 255, 0.2), rgba(46, 143, 208, 0.08) 55%, transparent); /* --s-holo / --s-holo-2 */
}
#plany .s-pl-krag { position: absolute; inset: 0; }
#plany .s-pl-krag svg { width: 100%; height: 100%; overflow: visible; }
#plany .s-pl-krag circle { fill: none; stroke-width: 1.6; }
#plany .s-pl-krag--1 circle { stroke: rgba(46, 143, 208, 0.6); }   /* --s-holo-2 */
#plany .s-pl-krag--1 circle + circle { stroke: rgba(46, 143, 208, 0.28); stroke-width: 1.2; }
#plany .s-pl-krag--2 circle { stroke: rgba(108, 216, 255, 0.45); stroke-width: 2.2; }   /* --s-holo */
#plany .s-pl-krag--2 circle + circle { stroke: rgba(108, 216, 255, 0.16); stroke-width: 1.2; }
#plany .s-pl-krag--3 circle { stroke: rgba(210, 194, 154, 0.45); stroke-width: 2; }     /* --s-piasek */
#plany .s-pl-krag--3 circle + circle { stroke: rgba(216, 244, 255, 0.32); stroke-width: 1.2; } /* --s-lod */
#plany .s-pl-krag { animation: s-pl-krec 60s linear infinite paused; }
#plany .s-pl-krag--2 { animation-duration: 38s; animation-direction: reverse; }
#plany .s-pl-krag--3 { animation-duration: 26s; }
#plany.is-gra .s-pl-krag { animation-play-state: running; }
@keyframes s-pl-krec { to { transform: rotate(1turn); } }

/* plama światła na stole — jedzie pod kartę, nad którą jest kursor (JS) */
#plany .s-pl-swiatlo {
  position: absolute; z-index: 1; left: 50%; bottom: -54px;
  width: 460px; height: 130px; margin-left: -230px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(108, 216, 255, 0.24), rgba(108, 216, 255, 0.06) 60%, transparent); /* --s-holo */
  pointer-events: none;
}

#plany .s-pl-drobiny { position: absolute; z-index: 0; inset: -12% -2% 0; pointer-events: none; overflow: hidden; }
#plany .s-pl-drobiny i {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s); border-radius: 50%;
  background: var(--s-holo); box-shadow: 0 0 6px rgba(108, 216, 255, 0.6); /* --s-holo */
  opacity: 0;
  animation: s-pl-unos var(--d) linear var(--o) infinite paused;
}
#plany .s-pl-drobiny i.is-lod { background: var(--s-lod); }
#plany .s-pl-drobiny i.is-piasek { background: var(--s-piasek); box-shadow: 0 0 6px rgba(210, 194, 154, 0.55); /* --s-piasek */ }
#plany.is-gra .s-pl-drobiny i { animation-play-state: running; }
@keyframes s-pl-unos {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  22% { opacity: var(--a); }
  78% { opacity: var(--a); }
  100% { transform: translate3d(var(--dx), -150px, 0); opacity: 0; }
}

/* =========================================================================
   TALIA — jedna siatka, karty dziedziczą wiersze (subgrid): głowa / opis / cena / cechy / przycisk
   ========================================================================= */
#plany .s-pl-talia {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  column-gap: var(--pl-luz);
  row-gap: var(--o-5);
}
#plany .s-pl-karta {
  position: relative; isolation: isolate; z-index: 1;
  min-width: 0;
  grid-row: span 5;
  display: grid; grid-template-rows: subgrid; row-gap: 22px;
  padding: var(--pl-pad);
  border-radius: var(--r-karta);
  background:
    linear-gradient(180deg, rgba(238, 247, 252, 0.06), rgba(238, 247, 252, 0.015)),   /* --s-bialy, szkło */
    rgba(7, 16, 26, 0.94);                                                              /* --s-noc-2 */
  border: 1px solid var(--s-linia-noc);
  color: var(--s-tekst-noc);
  transition: border-color var(--d-wolno) var(--e-out);
}
/* kreska koloru planu przy górnej krawędzi (jak .s-kafel) */
#plany .s-pl-karta::before {
  content: ""; position: absolute; top: -1px; left: var(--pl-pad); z-index: 1;
  width: 64px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--c-noc);
}
@media (hover: hover) { #plany .s-pl-karta:not(.s-pl-karta--polecana):hover { border-color: var(--s-linia-noc-mocna); } }

/* --- głowa: insygnium stopnia + nazwa planu + dla kogo --- */
#plany .s-pl-glowa { display: flex; align-items: center; align-self: start; gap: 16px; min-width: 0; }   /* nazwy planów na tej samej wysokości we wszystkich kartach */
#plany .s-pl-insygnium { width: 56px; height: 56px; flex: none; overflow: visible; }
#plany .s-pl-ins-rama { fill: rgba(238, 247, 252, 0.03); stroke: var(--c-noc); stroke-width: 1.8; stroke-linejoin: miter; opacity: 0.85; } /* --s-bialy */
#plany .s-pl-ins-wnetrze { fill: none; stroke: var(--s-linia-noc-mocna); stroke-width: 1.2; }
#plany .s-pl-ins-belki path,
#plany .s-pl-oklada-ins path:not([class]) { fill: none; stroke-width: 4; stroke-linecap: butt; stroke-linejoin: miter; }
#plany .s-pl-ins-belki path { stroke-dasharray: 1; stroke-dashoffset: 0; }

#plany .s-pl-nazwa { display: grid; gap: 5px; min-width: 0; }
#plany .s-pl-nazwa h3 {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.75rem, 1.25rem + 0.9vw, 2.25rem);
  line-height: 1.05; letter-spacing: -0.025em;
  color: var(--s-bialy);
}
#plany .s-pl-dla {
  font-family: var(--f-display); font-weight: 500; font-size: 0.9375rem; line-height: 1.35;
  color: var(--c-noc);
}
#plany .c-lazur .s-pl-dla { color: #5FB0E6; }   /* jaśniejszy lazur — czytelny na nocy (7:1) */

/* --- opis: co dostajesz (do przeczytania — pełny kontrast) --- */
#plany .s-pl-opis { align-self: start; min-width: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--s-tekst-noc); }

/* --- cena: pole „ogłosimy przed startem” (bez kwot) --- */
#plany .s-pl-cena {
  display: grid; gap: 4px; align-content: center;
  padding: 14px 18px 15px;
  border-radius: var(--r-maly);
  border: 1px solid rgba(210, 194, 154, 0.22);    /* --s-piasek */
  background: linear-gradient(135deg, rgba(210, 194, 154, 0.08), rgba(210, 194, 154, 0.02)), rgba(3, 7, 13, 0.4); /* --s-piasek / --s-noc */
}
#plany .s-pl-cena-et { font-family: var(--f-display); font-weight: 500; font-size: 0.8125rem; line-height: 1.3; color: var(--s-cichy-noc); }
#plany .s-pl-cena-w {
  font-family: var(--f-display); font-weight: 600; font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.01em;
  color: var(--s-piasek);
}

/* --- cechy (jakościowe) --- */
#plany .s-pl-cechy { display: grid; align-content: start; }
#plany .s-pl-cechy li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 10px 0;
  font-size: var(--t-maly); line-height: 1.45; color: var(--s-tekst-noc);
}
#plany .s-pl-cechy li + li { border-top: 1px solid var(--s-linia-noc); }
#plany .s-pl-cechy li:first-child { padding-top: 0; }
#plany .s-pl-cechy .s-ik { width: 18px; height: 18px; margin-top: 2px; color: var(--c-noc); }
#plany .s-pl-cecha-baza { color: var(--s-bialy) !important; font-weight: 600; }
#plany .s-pl-cecha-baza .s-ik { color: var(--s-piasek); }

/* --- przycisk: w polecanej główny (holo), w pozostałych szklany z tą samą pigułką i polem strzałki --- */
#plany .s-pl-btn { align-self: end; font-size: 0.9375rem; }
#plany .s-pl-btn .s-btn-tekst { padding: 0 12px 0 22px; min-width: 0; }
#plany .s-pl-btn .s-btn-pole { width: 52px; }
#plany .s-pl-btn--drugi {
  --btn-bg: rgba(238, 247, 252, 0.07);   /* --s-bialy */
  --btn-tusz: var(--s-bialy);
  box-shadow: inset 0 0 0 1px var(--s-linia-noc-mocna);
}

/* =========================================================================
   KARTA POLECANA — neonowa ramka: conic-gradient obracany pod kartą, przycięty jej kształtem (.s-pl-neon)
   ========================================================================= */
#plany .s-pl-karta--polecana {
  z-index: 3;
  border-color: transparent;
  background: transparent;
  box-shadow: 0 46px 110px -50px rgba(108, 216, 255, 0.55), 0 0 44px -18px rgba(108, 216, 255, 0.4); /* --s-holo */
}
#plany .s-pl-karta--polecana::before { display: none; }
#plany .s-pl-karta--polecana { padding-top: calc(var(--pl-pad) + 14px); }   /* miejsce pod pigułką */
#plany .s-pl-neon {
  position: absolute; z-index: -3; inset: 0; overflow: hidden;
  border-radius: inherit; pointer-events: none;
}
#plany .s-pl-ring {
  position: absolute; left: 50%; top: 50%;
  width: 280%; aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(0turn);
  background: conic-gradient(from 0deg,
    rgba(160, 220, 255, 0.3) 0deg 90deg,              /* --s-linia-noc (jaśniejsza) */
    rgba(210, 194, 154, 1) 166deg,                    /* --s-piasek — krótszy ślad */
    rgba(160, 220, 255, 0.3) 171deg 186deg,
    rgba(46, 143, 208, 1) 262deg,                     /* --s-holo-2 */
    rgba(108, 216, 255, 1) 330deg,                    /* --s-holo */
    rgba(216, 244, 255, 1) 355deg,                    /* --s-lod — głowa smugi */
    rgba(160, 220, 255, 0.3) 360deg);
  animation: s-pl-obrot 7.5s linear infinite paused;
}
#plany.is-gra .s-pl-ring { animation-play-state: running; }
@keyframes s-pl-obrot { to { transform: translate(-50%, -50%) rotate(1turn); } }
#plany .s-pl-wypelnienie {
  position: absolute; z-index: -2; inset: 2px; pointer-events: none;
  border-radius: calc(var(--r-karta) - 2px);
  background:
    radial-gradient(130% 55% at 50% 0%, rgba(108, 216, 255, 0.13), transparent 62%),  /* --s-holo */
    rgba(13, 24, 38, 0.97);                                                             /* --s-noc-3 */
  box-shadow: inset 0 0 26px -10px rgba(108, 216, 255, 0.32);                         /* --s-holo — neon do środka */
}
/* pigułka na górnej krawędzi karty — od razu widać, który plan polecamy */
#plany .s-pl-chip {
  /* wyśrodkowanie bez transform (GSAP animuje y): połowa wysokości pigułki nad krawędzią */
  position: absolute; z-index: 7; left: 0; right: 0; top: calc(-0.6em - 7px);
  width: max-content; margin-inline: auto;
  display: flex; align-items: center; gap: 7px;
  padding: 7px 16px 7px 12px;
  border-radius: var(--r-pigulka);
  background: var(--s-piasek); color: var(--s-tusz);
  font-family: var(--f-display); font-size: 0.875rem; font-weight: 600; letter-spacing: 0; line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 10px 26px -10px rgba(210, 194, 154, 0.55), 0 0 0 4px rgba(7, 16, 26, 0.9); /* --s-piasek / --s-noc-2 */
}
#plany .s-pl-chip .s-ik { width: 15px; height: 15px; }

/* =========================================================================
   OKŁADKA (tylko w talii na komputerze — włącza ją JS klasą .is-talia).
   Znika miękką krawędzią: maska z gradientem, którą JS przesuwa zmienną --p (0 → 1), za nią płynie łagodny blask.
   ========================================================================= */
#plany .s-pl-oklada {
  --p: 0;
  position: absolute; z-index: 5; inset: 0;
  display: none; grid-template-rows: auto minmax(0, 1fr);
  justify-items: center;
  padding: 30px 24px 34px;
  border-radius: inherit; overflow: hidden;
  background:
    radial-gradient(90% 60% at 50% 46%, rgba(46, 143, 208, 0.22), transparent 70%),   /* --s-holo-2 */
    var(--s-noc-3);
  box-shadow: inset 0 0 0 1px var(--s-linia-noc-mocna);
  -webkit-mask-image: linear-gradient(180deg, transparent calc(var(--p) * 122% - 22%), #000 calc(var(--p) * 122%));
  mask-image: linear-gradient(180deg, transparent calc(var(--p) * 122% - 22%), #000 calc(var(--p) * 122%));
}
/* delikatne pole drobin na okładce (statyczne), wygaszone ku brzegom */
#plany .s-pl-oklada::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(160, 220, 255, 0.22) 1px, transparent 1.6px) 0 0 / 18px 18px;
  -webkit-mask-image: radial-gradient(70% 55% at 50% 46%, #000, transparent 75%);
  mask-image: radial-gradient(70% 55% at 50% 46%, #000, transparent 75%);
  opacity: 0.7;
}
#plany.is-talia .s-pl-oklada { display: grid; }
#plany .s-pl-oklada-znak { height: 12px; width: auto; overflow: visible; opacity: 0.8; }
#plany .s-pl-oklada-srodek { display: grid; justify-items: center; align-content: center; gap: 14px; text-align: center; }
#plany .s-pl-oklada-ins { width: 120px; height: 120px; overflow: visible; margin-bottom: 8px; filter: drop-shadow(0 0 18px rgba(108, 216, 255, 0.3)); } /* --s-holo, statyczne */
#plany .s-pl-oklada-ins .s-pl-ins-rama { stroke: var(--s-holo); stroke-width: 1.4; fill: rgba(108, 216, 255, 0.05); }
#plany .s-pl-oklada-nazwa {
  font-family: var(--f-display); font-weight: 600;
  font-size: 2.4rem; line-height: 1; letter-spacing: -0.03em; color: var(--s-bialy);
}
#plany .s-pl-oklada-dla { font-family: var(--f-display); font-weight: 500; font-size: 0.9375rem; line-height: 1.35; color: var(--s-tekst-noc); max-width: 22ch; }
/* blask jadący za krawędzią maski — wysokość = szerokość krawędzi (22% karty) */
#plany .s-pl-blask {
  position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 22%;
  pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(108, 216, 255, 0) 0%, rgba(108, 216, 255, 0.1) 50%, rgba(216, 244, 255, 0.17) 78%, rgba(216, 244, 255, 0) 100%); /* --s-holo / --s-lod — wygaszony na obu końcach, bez twardej krawędzi */
}

/* fokus klawiatury w karcie: okładka znika, treść stoi w stanie końcowym (nadpisuje style z osi czasu) */
#plany .s-pl-odkryta .s-pl-oklada { visibility: hidden; }
#plany .s-pl-odkryta .s-pl-cechy li,
#plany .s-pl-odkryta .s-pl-cena-w { opacity: 1 !important; transform: none !important; }
#plany .s-pl-odkryta .s-pl-ins-belki path { stroke-dashoffset: 0 !important; }

/* =========================================================================
   W KAŻDYM PLANIE
   ========================================================================= */
#plany .s-pl-standard {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px 36px;
  margin-top: clamp(64px, 3rem + 3.4vw, 112px);
  padding: 22px clamp(22px, 2vw, 34px);
  border-radius: 20px;
  border: 1px solid var(--s-linia-noc-mocna);
  background: linear-gradient(180deg, rgba(238, 247, 252, 0.05), rgba(238, 247, 252, 0.015)), rgba(7, 16, 26, 0.9); /* --s-bialy / --s-noc-2 */
}
#plany .s-pl-standard-t {
  font-family: var(--f-display); font-weight: 600; font-size: 1.1875rem; line-height: 1.2; letter-spacing: -0.01em;
  color: var(--s-bialy); white-space: nowrap;
}
#plany .s-pl-standard-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
#plany .s-pl-standard-lista li {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 4px clamp(12px, 1.4vw, 22px);
  border-left: 1px solid var(--s-linia-noc);
  font-size: var(--t-maly); line-height: 1.4; color: var(--s-tekst-noc);
}
#plany .s-pl-standard-ik {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 11px;
  background: rgba(108, 216, 255, 0.1); color: var(--s-holo);          /* --s-holo */
  box-shadow: inset 0 0 0 1px rgba(108, 216, 255, 0.18);
}
#plany .s-pl-standard-ik .s-ik { width: 19px; height: 19px; }
#plany .s-pl-standard-lista b { font-family: var(--f-display); font-weight: 600; color: var(--s-bialy); }

/* =========================================================================
   RESPONSYWNIE
   ========================================================================= */
@media (min-width: 992px) {
  #plany .s-pl-karta--polecana { top: -18px; }   /* uniesienie bez wpływu na wiersze siatki */
}
@media (max-width: 1199px) {
  #plany .s-pl-standard { grid-template-columns: minmax(0, 1fr); }
  #plany .s-pl-standard-lista li:first-child { border-left: 0; padding-left: 0; }
}
@media (min-width: 992px) and (max-height: 880px) {
  #plany { --pl-pad: 20px; }
  #plany .s-pl-talia { row-gap: 12px; }
  #plany .s-pl-karta { row-gap: 14px; }
}
@media (max-width: 1099px) and (min-width: 992px) {
  #plany .s-pl-glowa { gap: 12px; }
  #plany .s-pl-insygnium { width: 46px; height: 46px; }
}
@media (max-width: 991px) {
  #plany .s-pl-talia {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    max-width: 580px; margin-inline: auto;
    row-gap: 30px;
  }
  #plany .s-pl-platforma, #plany .s-pl-swiatlo { display: none; }
  #plany .s-pl-standard { max-width: 580px; margin-inline: auto; }
  #plany .s-pl-standard-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  #plany .s-pl-standard-lista li:nth-child(3) { border-left: 0; padding-left: 0; }
  /* jedna kolumna: karta ma własne wiersze (subgrid potrzebny tylko między kartami obok siebie) */
  #plany .s-pl-karta { grid-row: auto; grid-template-rows: none; }
  #plany .s-pl-karta--polecana { margin-top: 10px; }   /* miejsce na pigułkę nad kartą */
}
/* wąskie karty (3 kolumny do 1099 px, telefon do 479 px): nazwa planu zostaje dla czytników ekranu,
   wizualnie przycisk mieści się w jednej linii (nazwa planu stoi w nagłówku karty) */
@media (min-width: 992px) and (max-width: 1099px), (max-width: 479px) {
  #plany .s-pl-btn-plan {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}
@media (max-width: 479px) {
  #plany .s-pl-standard-lista { grid-template-columns: minmax(0, 1fr); }
  #plany .s-pl-standard-lista li { border-left: 0; padding-left: 0; }
  #plany .s-pl-standard-lista li + li { border-top: 1px solid var(--s-linia-noc); padding-top: 12px; }
  #plany .s-pl-opis { font-size: 1rem; }
}
@media (max-width: 380px) {
  #plany .s-pl-glowa { gap: 12px; }
  #plany .s-pl-insygnium { width: 48px; height: 48px; }
}


/* ===== sekcja: faq ===== */
/* FAQ — „Pytania przed zaciągiem”. Prefiks s-faq-.
   Od 992 px dwie kolumny: lewa przypięta (tytuł → akapit wiodący → miejsce na pytajnik z mgławicy → kontakt),
   prawa — akordeon szklanych kart. Jedno pytanie otwarte naraz (<details name="faq">), płynne rozwijanie:
   ::details-content + interpolate-size (Chromium), a w pozostałych przeglądarkach animacja wysokości w JS.
   Poniżej 992 px jedna kolumna, kontakt ląduje pod listą pytań. Bez JS / przy ograniczonym ruchu wszystko widać,
   pierwsze pytanie otwarte w HTML. */

#faq { overflow: clip; padding-bottom: calc(var(--o-sekcja) * 0.8); }
#faq::before {
  /* cicha poświata za listą — pochodne --s-holo-2 (46,143,208) */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 46% at 66% 46%, rgba(46, 143, 208, 0.12), transparent 72%),
    radial-gradient(26% 30% at 18% 40%, rgba(46, 143, 208, 0.07), transparent 70%);
}

/* ---------- układ ---------- */
.s-faq-uklad { display: flex; flex-direction: column; gap: 20px; }
.s-faq-bok { display: contents; }
.s-faq-bok h2 { order: 0; max-width: 14ch; }
.s-faq-lead { order: 0; }
.s-faq-lista { order: 1; margin-top: 12px; }
.s-faq-kontakt { order: 2; margin-top: 16px; }

@media (min-width: 992px) {
  .s-faq-uklad {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(48px, 1.5rem + 4.4vw, 120px); align-items: start;
  }
  .s-faq-bok {
    display: grid; justify-items: start; gap: var(--o-5);
    position: sticky; top: calc(var(--pasek-h) + 44px);
  }
  .s-faq-bok h2 { font-size: clamp(2.2rem, 1.1rem + 2.1vw, 3.3rem); max-width: 11ch; }
  .s-faq-lead { max-width: 40ch; }
  .s-faq-lista, .s-faq-kontakt { margin-top: 0; }
}

/* ---------- lewa kolumna ---------- */

.s-faq-kontakt {
  display: grid; justify-items: start; gap: 14px;
  width: 100%; max-width: 40ch;
  padding-top: 22px; border-top: 1px solid var(--s-linia-noc-mocna);
}
.s-faq-kontakt p {
  font-family: var(--f-display); font-weight: 500; font-size: 1.0625rem; line-height: 1.35;
  letter-spacing: -0.01em; color: var(--s-bialy);
}
.s-faq-mail {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px 0 16px;
  border-radius: var(--r-pigulka); background: var(--s-holo); color: var(--s-tusz);
  font-family: var(--f-display); font-weight: 600; font-size: 0.9375rem; letter-spacing: 0;
  transition: background-color var(--d-wolno) var(--e-out), box-shadow var(--d-wolno) var(--e-out);
}
.s-faq-mail .s-ik { width: 20px; height: 20px; flex: none; }
@media (hover: hover) {
  .s-faq-mail:hover { background: var(--s-lod); box-shadow: 0 0 30px -4px rgba(108, 216, 255, 0.6); } /* --s-holo */
}

/* ---------- akordeon ---------- */
.s-faq-lista {
  position: relative; z-index: 1;
  display: grid; gap: 12px;
  interpolate-size: allow-keywords;
}

/* karta pytania: ciemne szkło, pełne tło pod tekstem */
.s-faq-q {
  --faq-pad: clamp(18px, 0.8rem + 0.9vw, 28px);
  position: relative; isolation: isolate; overflow: clip;
  border-radius: 20px;
  border: 1px solid var(--s-linia-noc);
  /* szkło: --s-noc-3 (13,24,38) → --s-noc-2 (7,16,26) */
  background: linear-gradient(180deg, rgba(13, 24, 38, 0.92), rgba(7, 16, 26, 0.88));
  box-shadow: 0 24px 50px -40px rgba(0, 0, 0, 0.9);
  transition: border-color var(--d-wolno) var(--e-out), box-shadow var(--d-zalanie) var(--e-out);
}
/* świetlna kreska u góry — rozjeżdża się od środka po otwarciu */
.s-faq-q::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: 0; z-index: 3; height: 1.5px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--s-holo-2) 20%, var(--s-lod) 50%, var(--s-holo-2) 80%, transparent);
  transform: scaleX(0); opacity: 0;
  transition: transform var(--d-zalanie) var(--e-out), opacity var(--d-zalanie) var(--e-out);
}
.s-faq-q[open] {
  border-color: rgba(108, 216, 255, 0.38); /* --s-holo */
  box-shadow:
    0 0 0 1px rgba(108, 216, 255, 0.08),     /* --s-holo */
    0 0 44px -16px rgba(108, 216, 255, 0.36), /* --s-holo */
    0 34px 70px -40px rgba(0, 0, 0, 0.95);
}
.s-faq-q[open]::before { transform: scaleX(1); opacity: 1; }
@media (hover: hover) {
  .s-faq-q:not([open]):hover { border-color: var(--s-linia-noc-mocna); }
}

/* nagłówek karty (summary) — samo pytanie + przycisk „+” */
.s-faq-q summary {
  position: relative; z-index: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; column-gap: 20px;
  padding: 18px 18px 18px var(--faq-pad);
  min-height: 78px;
  list-style: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.s-faq-q summary::-webkit-details-marker { display: none; }
.s-faq-q summary::marker { content: ""; }
.s-faq-q summary:focus-visible { outline: 3px solid var(--fokus); outline-offset: -4px; border-radius: 20px; }
/* poświata pod nagłówkiem otwartej karty — pochodna --s-holo */
.s-faq-q summary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 140% at 30% 0%, rgba(108, 216, 255, 0.09), transparent 70%);
  opacity: 0; transition: opacity var(--d-zalanie) var(--e-out);
}
.s-faq-q[open] summary::after { opacity: 1; }

.s-faq-pyt {
  min-width: 0;
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(1.0625rem, 0.95rem + 0.42vw, 1.25rem); line-height: 1.35; letter-spacing: -0.01em;
  color: var(--s-tekst-noc); text-wrap: pretty;
  transition: color var(--d-wolno) var(--e-out);
}
.s-faq-q[open] .s-faq-pyt { color: var(--s-bialy); }
@media (hover: hover) { .s-faq-q summary:hover .s-faq-pyt { color: var(--s-bialy); } }

/* okrągły „+” → „×” */
.s-faq-plus {
  position: relative; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--s-linia-noc-mocna);
  background: rgba(238, 247, 252, 0.04); /* --s-bialy */
  transition: transform var(--d-zalanie) var(--e-out), background-color var(--d-wolno) var(--e-out), border-color var(--d-wolno) var(--e-out), box-shadow var(--d-wolno) var(--e-out);
}
.s-faq-plus::before, .s-faq-plus::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 1px;
  background: var(--s-bialy);
  transition: background-color var(--d-wolno) var(--e-out);
}
.s-faq-plus::after { transform: rotate(90deg); }
.s-faq-q[open] .s-faq-plus {
  transform: rotate(135deg);
  background: var(--s-holo); border-color: var(--s-holo);
  box-shadow: 0 0 20px -6px rgba(108, 216, 255, 0.7); /* --s-holo */
}
.s-faq-q[open] .s-faq-plus::before, .s-faq-q[open] .s-faq-plus::after { background: var(--s-tusz); }
@media (hover: hover) {
  .s-faq-q summary:hover .s-faq-plus { border-color: var(--s-holo); }
}

/* ---------- odpowiedź ---------- */
.s-faq-a { position: relative; overflow: clip; padding: 0 var(--faq-pad) 26px; }
.s-faq-a-in {
  display: grid; gap: 14px; max-width: 64ch;
  padding-top: 18px; border-top: 1px solid var(--s-linia-noc);
}
.s-faq-a-in p { font-size: 1.0625rem; line-height: 1.7; color: var(--s-tekst-noc); }
.s-faq-a-in strong { font-weight: 600; color: var(--s-bialy); }
/* treść wchodzi płynnie razem z rozwijaniem karty */
.s-faq-q[open] .s-faq-a-in { animation: s-faq-wej 0.6s var(--e-out) both; }
@keyframes s-faq-wej { from { opacity: 0; transform: translateY(-8px); } }

/* płynne rozwijanie wysokości (przeglądarki z ::details-content i interpolate-size); resztę obsługuje JS */
.s-faq-q::details-content {
  block-size: 0; overflow: clip;
  transition: block-size var(--d-zalanie) var(--e-out), content-visibility var(--d-zalanie) allow-discrete;
}
.s-faq-q[open]::details-content { block-size: auto; }

/* linki w odpowiedziach */
.s-faq-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--s-holo); font-weight: 600;
  text-decoration: underline; text-decoration-color: rgba(108, 216, 255, 0.45); /* --s-holo */
  text-underline-offset: 4px; text-decoration-thickness: 1px;
  transition: color var(--d-srednio) var(--e-out), text-decoration-color var(--d-srednio) var(--e-out);
}
.s-faq-link .s-ik { width: 18px; height: 18px; flex: none; transition: transform var(--d-wolno) var(--e-out); }
@media (hover: hover) {
  .s-faq-link:hover { color: var(--s-lod); text-decoration-color: var(--s-piasek); }
  .s-faq-link:hover .s-ik { transform: translateX(4px); }
}

/* sześć grup kontroli (liczba w grupie = statyczna treść) */
.s-faq-a .g1 { --g: var(--s-holo); }
.s-faq-a .g2 { --g: var(--s-holo-2); }
.s-faq-a .g3 { --g: var(--s-lod); }
.s-faq-a .g4 { --g: var(--s-piasek); }
.s-faq-a .g5 { --g: var(--s-holo); }
.s-faq-a .g6 { --g: var(--s-piasek); }
.s-faq-grupy { display: grid; gap: 0; }
.s-faq-grupy li {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 12px 0; border-top: 1px solid var(--s-linia-noc);
  font-size: 0.9375rem; line-height: 1.55; color: var(--s-cichy-noc);
}
.s-faq-grupy li:last-child { border-bottom: 1px solid var(--s-linia-noc); }
.s-faq-grupy b {
  display: grid; place-items: center; height: 28px; border-radius: 8px;
  font-family: var(--f-display); font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--s-tusz); background: var(--g);
}
.s-faq-grupy strong { color: var(--s-bialy); }

/* asystenci AI (nazwy, nie logotypy) */
.s-faq-chipy { display: flex; flex-wrap: wrap; gap: 8px; }
.s-faq-chipy li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 12px; border-radius: var(--r-pigulka);
  border: 1px solid var(--s-linia-noc-mocna);
  background: rgba(238, 247, 252, 0.04); /* --s-bialy */
  font-family: var(--f-display); font-size: 0.875rem; font-weight: 500; letter-spacing: 0; color: var(--s-bialy);
  white-space: nowrap;
}
.s-faq-chipy li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--s-holo); }

/* status integracji */
.s-faq-status {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px;
  padding: 12px 14px 12px 16px; border-radius: var(--r-maly);
  border: 1px dashed var(--s-linia-noc-mocna);
  font-size: 0.9375rem !important; color: var(--s-tekst-noc);
}
.s-faq-znacznik {
  display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--r-pigulka);
  font-family: var(--f-display); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0;
  color: var(--s-piasek); border: 1px solid rgba(210, 194, 154, 0.42); /* --s-piasek */
  white-space: nowrap;
}

/* trzy kroki zapisu — cyfry jako znak kolejności */
.s-faq-kroki { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.s-faq-kroki::before {
  /* łącznik kroków — kreska trio */
  /* od środka pierwszego kółka do środka trzeciego: prawy margines = szerokość kolumny − 16 px */
  content: ""; position: absolute; left: 16px; right: calc((100% - 28px) / 3 - 16px); top: 15px; height: 1.5px; background: var(--s-trio); opacity: 0.6;
}
.s-faq-kroki li { position: relative; display: grid; gap: 10px; align-content: start; font-size: 0.9375rem; line-height: 1.5; color: var(--s-tekst-noc); }
.s-faq-kroki b {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--s-noc-2); border: 1.5px solid var(--s-holo);
  font-family: var(--f-display); font-size: 0.875rem; font-weight: 600; color: var(--s-holo);
  box-shadow: 0 0 0 4px var(--s-noc-2);
}
.s-faq-kroki li:last-child b { border-color: var(--s-piasek); color: var(--s-piasek); }
.s-faq-q[open] .s-faq-kroki li { animation: s-faq-krok 0.6s var(--e-out) both; }
.s-faq-q[open] .s-faq-kroki li:nth-child(2) { animation-delay: 0.1s; }
.s-faq-q[open] .s-faq-kroki li:nth-child(3) { animation-delay: 0.2s; }
@keyframes s-faq-krok { from { opacity: 0; transform: translateY(8px); } }

/* dane spółki */
.s-faq-dane {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0;
  border-radius: var(--r-maly); overflow: hidden;
  background: var(--s-linia-noc); border: 1px solid var(--s-linia-noc);
}
.s-faq-dane > div { display: grid; gap: 3px; padding: 12px 14px; background: var(--s-noc-2); min-width: 0; }
.s-faq-dane > div:first-child { grid-column: 1 / -1; }
.s-faq-dane dt { font-family: var(--f-tekst); font-size: 0.8125rem; letter-spacing: 0; color: var(--s-cichy-noc); }
.s-faq-dane dd { margin: 0; font-size: 0.9375rem; font-weight: 500; color: var(--s-bialy); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* ---------- ograniczony ruch ---------- */
@media (prefers-reduced-motion: reduce) {
  .s-faq-q[open] .s-faq-a-in, .s-faq-q[open] .s-faq-kroki li { animation: none; }
  .s-faq-q::details-content { transition: none; }
}

/* ---------- telefon ---------- */
@media (max-width: 767px) {
  .s-faq-dane { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .s-faq-q summary { column-gap: 14px; padding: 14px 12px 14px var(--faq-pad); min-height: 72px; }
  .s-faq-pyt { text-wrap: balance; }
  .s-faq-a { padding-bottom: 22px; }
  .s-faq-kroki { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .s-faq-kroki::before { left: 15px; right: auto; top: 16px; bottom: 16px; width: 1.5px; height: auto; background: linear-gradient(180deg, var(--s-holo-2), var(--s-holo) 50%, var(--s-piasek)); }
  .s-faq-kroki li { grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 14px; }
  .s-faq-mail { white-space: normal; text-align: left; padding: 10px 20px 10px 16px; }
}
@media (max-width: 380px) {
  .s-faq-dane { grid-template-columns: minmax(0, 1fr); }
}


/* ===== sekcja: zaciag ===== */
/* „Zaciąg” — zapis na wczesny dostęp (ciemne okno z radarem, ostatnia sekcja przed stopką).
   Układ: po lewej przyklejona kolumna — badge, tytuł do lewej, akapit wiodący, miejsce na nieśmiertelnik z mgławicy
   i „Co dalej” (prawdziwa sekwencja 1 Zapis → 2 Potwierdzenie mailem → 3 Zaproszenie); po prawej karta formularza
   z ciemnego szkła z ramką trio. Pod spodem dane firmy (#dane-firmy). Tło: ciche drobiny (canvas) + wiązka radaru.
   Ścieżka czytania: tytuł → akapit wiodący (z wyróżnionym zdaniem) → kroki → formularz. Dekoracje przygaszone.
   Prefiks: s-zac-. Na końcu pliku style podstrony polityki prywatności (prefiks s-doc-). */

#zaciag { --zac-gora: calc(var(--pasek-h) + 40px); }
.s-zac-wrap { position: relative; z-index: 1; }

/* =========================================================================
   TŁO — drobiny (canvas, przygasają za tekstem) + obracająca się wiązka radaru ze środka pierścieni okna (88% 12%)
   ========================================================================= */
.s-zac-tlo { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.s-zac-plotno { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.8; }
.s-zac-radar {
  position: absolute; left: 88%; top: 12%;
  width: 880px; height: 880px; margin: -440px 0 0 -440px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(108, 216, 255, 0) 0deg, rgba(108, 216, 255, 0) 296deg,   /* --s-holo */
    rgba(108, 216, 255, 0.035) 340deg, rgba(216, 244, 255, 0.09) 359.4deg, rgba(108, 216, 255, 0) 360deg);   /* --s-holo, --s-lod */
  -webkit-mask-image: radial-gradient(closest-side, #000 8%, rgba(0, 0, 0, 0.45) 55%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 8%, rgba(0, 0, 0, 0.45) 55%, transparent 100%);
  animation: s-zac-obrot 14s linear infinite;
}
@keyframes s-zac-obrot { to { transform: rotate(360deg); } }
.s-zac-pauza { right: 20px; top: 20px; }
#zaciag[data-paused] .s-zac-radar,
#zaciag[data-paused] .s-zac-krok[data-stan="teraz"] .s-zac-wezel::after { animation-play-state: paused; }

/* =========================================================================
   UKŁAD — dwie kolumny; lewa przyklejona (top liczy JS, gdy kolumna jest wyższa od ekranu)
   ========================================================================= */
.s-zac-siatka { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 2rem + 2vw, 64px); }
.s-zac-bok-in { display: grid; gap: clamp(28px, 1.2rem + 1.2vw, 40px); align-content: start; }
@media (min-width: 992px) {
  .s-zac-siatka { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(40px, 1rem + 3.4vw, 88px); align-items: start; }
  .s-zac-bok { align-self: stretch; }
  .s-zac-bok-in { position: sticky; top: var(--zac-gora); }
}

/* nagłówek kolumny: badge → tytuł → akapit wiodący */
.s-zac-glowa { display: grid; justify-items: start; gap: var(--o-5); }
.s-zac-glowa h2 { max-width: 12ch; }
.s-zac-glowa .s-lead { max-width: 40ch; }


/* ---------- co dalej: 3 kroki na pionowej linii ---------- */
.s-zac-dalej { display: grid; gap: 18px; }
.s-zac-dalej-t { font-family: var(--f-display); font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--s-bialy); }
#zaciag h4 { font-family: var(--f-display); font-size: 1.0625rem; font-weight: 600; color: var(--s-bialy); letter-spacing: -0.005em; }

.s-zac-trasa-wrap { position: relative; }
.s-zac-trasa { position: relative; display: grid; gap: 22px; }
.s-zac-trasa-tor { position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px; margin-left: -1px; pointer-events: none; }
.s-zac-trasa-tor i { position: absolute; left: 0; top: 0; width: 2px; height: 100%; display: block; }
.s-zac-trasa-linia {
  background: rgba(160, 220, 255, 0.2);   /* --s-linia-noc-mocna, przygaszona */
  transform-origin: 50% 0;
}
.s-zac-trasa-postep {
  background: linear-gradient(180deg, var(--s-holo), var(--s-holo-2));
  transform-origin: 50% 0;
  transform: scaleY(var(--zac-postep, 0));
  transition: transform 1.1s var(--e-out);
}

.s-zac-krok { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: start; }
.s-zac-wezel {
  position: relative; z-index: 1;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--s-noc-2);
  border: 1.5px solid var(--s-linia-noc-mocna);
  color: var(--s-cichy-noc);
  font-family: var(--f-display); font-size: 1rem; font-weight: 600;
  transition: background-color var(--d-wolno) var(--e-out), border-color var(--d-wolno) var(--e-out), color var(--d-wolno) var(--e-out), box-shadow var(--d-wolno) var(--e-out);
}
.s-zac-wezel-nr, .s-zac-wezel-ok { grid-area: 1 / 1; transition: opacity 0.45s var(--e-out); }
.s-zac-wezel-ok { width: 20px; height: 20px; stroke-width: 2.4; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 0.5s var(--e-out) 0.15s; }
.s-zac-krok[data-stan="teraz"] .s-zac-wezel { border-color: var(--s-holo); color: var(--s-holo); box-shadow: 0 0 0 4px rgba(108, 216, 255, 0.12); }   /* --s-holo */
.s-zac-krok[data-stan="teraz"] .s-zac-wezel::after {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; border: 1.5px solid var(--s-holo);
  animation: s-zac-puls 2.6s var(--e-out) infinite;
}
@keyframes s-zac-puls { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.5); opacity: 0; } }
.s-zac-krok[data-stan="gotowy"] .s-zac-wezel { background: var(--s-holo); border-color: var(--s-holo); color: var(--s-tusz); box-shadow: 0 0 22px -6px rgba(108, 216, 255, 0.6); }   /* --s-holo */
.s-zac-krok[data-stan="gotowy"] .s-zac-wezel-nr { opacity: 0; }
.s-zac-krok[data-stan="gotowy"] .s-zac-wezel-ok { stroke-dashoffset: 0; }
.s-zac-krok-tresc { display: grid; gap: 4px; padding-top: 8px; min-width: 0; }
.s-zac-krok-glowa { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.s-zac-krok-tresc p { font-size: var(--t-maly); line-height: 1.55; color: var(--s-tekst-noc); }
.s-zac-krok[data-stan="czeka"] .s-zac-krok-tresc p { color: var(--s-cichy-noc); }
.s-zac-krok-stan {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: var(--r-pigulka);
  border: 1px solid var(--s-linia-noc-mocna);
  font-family: var(--f-tekst); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0; color: var(--s-cichy-noc);
  white-space: nowrap;
  transition: color var(--d-wolno) var(--e-out), border-color var(--d-wolno) var(--e-out), background-color var(--d-wolno) var(--e-out);
}
.s-zac-krok[data-stan="teraz"] .s-zac-krok-stan { color: var(--s-holo); border-color: rgba(108, 216, 255, 0.45); background: rgba(108, 216, 255, 0.08); }   /* --s-holo */
.s-zac-krok[data-stan="gotowy"] .s-zac-krok-stan { color: var(--s-tusz); border-color: var(--s-holo); background: var(--s-holo); }

/* =========================================================================
   KARTA FORMULARZA — ciemne szkło z ramką trio
   ========================================================================= */
.s-zac-karta {
  position: relative; isolation: isolate; overflow: clip;
  container: zac / inline-size;
  border-radius: var(--r-karta);
  padding: clamp(22px, 0.6rem + 2vw, 44px);
  background:
    radial-gradient(80% 36% at 50% 0%, rgba(46, 143, 208, 0.14), transparent 72%),   /* --s-holo-2 */
    linear-gradient(180deg, rgba(13, 24, 38, 0.96), rgba(7, 16, 26, 0.97));          /* --s-noc-3, --s-noc-2 */
  box-shadow:
    0 60px 140px -60px rgba(46, 143, 208, 0.5),    /* --s-holo-2 */
    inset 0 1px 0 rgba(216, 244, 255, 0.08);       /* --s-lod */
}
.s-zac-karta.s-ramka-trio::before { z-index: 3; }
.s-zac-skan {
  position: absolute; left: 0; right: 0; top: 0; z-index: 4; height: 2px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--s-holo) 30%, var(--s-lod) 50%, var(--s-holo) 70%, transparent);
  box-shadow: 0 0 18px 2px rgba(108, 216, 255, 0.45), 0 -30px 60px -10px rgba(108, 216, 255, 0.16);   /* --s-holo */
}
/* pasek wysyłki: płynie, dopóki trwa wysyłanie */
.s-zac-transmisja { position: absolute; left: 28px; right: 28px; top: 0; z-index: 4; height: 2px; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 0.45s var(--e-out); }
.s-zac-transmisja::before { content: ""; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--s-holo), var(--s-piasek), transparent); animation: s-zac-transmisja 1.1s var(--e-in-out) infinite; }
@keyframes s-zac-transmisja { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.s-zac-karta[data-stan="wysylanie"] .s-zac-transmisja { opacity: 1; }

/* nagłówek karty */
.s-zac-form-glowa { display: grid; gap: 8px; padding-bottom: 22px; border-bottom: 1px solid var(--s-linia-noc); }
.s-zac-form-t { font-family: var(--f-display); font-size: var(--t-h3); font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; color: var(--s-bialy); }
.s-zac-wstep { font-size: var(--t-maly); line-height: 1.55; color: var(--s-tekst-noc); }

/* formularz */
.s-zac-form { display: grid; gap: 26px; }
.s-zac-form[hidden] { display: none; }
.s-zac-rzad--dwa { display: grid; gap: 26px; grid-template-columns: minmax(0, 1fr); }
@container zac (min-width: 520px) { .s-zac-rzad--dwa { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }

.s-zac-pole { display: grid; gap: 8px; align-content: start; min-width: 0; }
.s-zac-pole > label:not(.s-zac-zgoda), .s-zac-grupa legend {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  font-family: var(--f-tekst); font-size: 0.9375rem; font-weight: 600; line-height: 1.35; letter-spacing: 0; color: var(--s-bialy);
}
.s-zac-wym { color: var(--s-piasek); margin-left: -4px; }
.s-zac-opc { font-weight: 400; color: var(--s-cichy-noc); font-size: 0.875rem; }

.s-zac-wejscie { position: relative; }
.s-zac-wejscie input, .s-zac-wejscie textarea {
  display: block; width: 100%; min-height: 56px;
  padding: 14px 46px 14px 16px;
  border-radius: var(--r-maly);
  border: 1px solid var(--s-linia-noc-mocna);
  background: rgba(3, 7, 13, 0.7);   /* --s-noc */
  color: var(--s-bialy);
  font-size: 1.0625rem; line-height: 1.45;
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--d-srednio) var(--e-out), background-color var(--d-srednio) var(--e-out), box-shadow var(--d-wolno) var(--e-out);
}
.s-zac-wejscie textarea { min-height: 132px; resize: vertical; padding-right: 16px; }
.s-zac-wejscie input::placeholder, .s-zac-wejscie textarea::placeholder { color: var(--s-cichy-noc); opacity: 0.85; }
@media (hover: hover) { .s-zac-wejscie input:hover, .s-zac-wejscie textarea:hover { border-color: rgba(108, 216, 255, 0.45); } }   /* --s-holo */
.s-zac-wejscie input:focus, .s-zac-wejscie textarea:focus {
  outline: none;
  border-color: var(--s-holo);
  background: rgba(108, 216, 255, 0.06);   /* --s-holo */
  box-shadow: 0 0 0 1px var(--s-holo), 0 0 28px -8px rgba(108, 216, 255, 0.5);   /* --s-holo */
}
.s-zac-wejscie input:-webkit-autofill, .s-zac-wejscie input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--s-bialy);
  box-shadow: 0 0 0 100px var(--s-noc-3) inset;
  caret-color: var(--s-bialy);
}
.s-zac-ok {
  position: absolute; right: 15px; top: 50%; width: 20px; height: 20px; margin-top: -10px; pointer-events: none;
  fill: none; stroke: var(--s-holo); stroke-width: 2.4; stroke-linecap: square;
  stroke-dasharray: 24; stroke-dashoffset: 24;
  transition: stroke-dashoffset 0.45s var(--e-out);
}
.s-zac-pole[data-stan="ok"] .s-zac-ok { stroke-dashoffset: 0; }
.s-zac-pole[data-stan="blad"] .s-zac-wejscie input, .s-zac-pole[data-stan="blad"] .s-zac-wejscie textarea {
  border-color: var(--s-wrog);
  box-shadow: 0 0 0 1px var(--s-wrog), 0 0 24px -8px rgba(255, 138, 138, 0.6);   /* --s-wrog */
}
.s-zac-blad-pola { display: flex; align-items: flex-start; gap: 8px; font-size: 0.875rem; line-height: 1.45; color: var(--s-wrog); }
.s-zac-blad-pola::before { content: ""; width: 8px; height: 8px; flex: none; margin-top: 0.35em; background: currentColor; transform: rotate(45deg); }
.s-zac-blad-pola[hidden] { display: none; }
.s-zac-podpowiedz { font-size: 0.8125rem; line-height: 1.5; color: var(--s-cichy-noc); }
.s-zac-podpowiedz a { color: var(--s-holo); text-decoration: underline; text-underline-offset: 3px; }

/* grupy radiowe: równe karty (rodzaj strony) i pigułki planu */
.s-zac-grupa { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
.s-zac-grupa legend { padding: 0; margin-bottom: 10px; float: left; width: 100%; }
.s-zac-grupa legend + * { clear: both; }
.s-zac-radio, .s-zac-check {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; opacity: 0;
}
.s-zac-opcje { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container zac (min-width: 620px) { .s-zac-opcje--rodzaj { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.s-zac-opcja { position: relative; display: grid; cursor: pointer; }
.s-zac-opcja-karta {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-content: start; gap: 4px;
  min-height: 132px; height: 100%;
  padding: 14px 14px 16px;
  border-radius: var(--r-maly);
  border: 1px solid var(--s-linia-noc-mocna);
  background: rgba(238, 247, 252, 0.03);   /* --s-bialy */
  color: var(--s-bialy);
  transition: border-color var(--d-srednio) var(--e-out), color var(--d-wolno) var(--e-out), transform var(--d-wolno) var(--e-out);
}
/* zalanie holo od ikony (sam transform) */
.s-zac-opcja-karta::before {
  content: ""; position: absolute; z-index: -1;
  left: 34px; top: 34px; width: 320%; aspect-ratio: 1; border-radius: 50%;
  background: var(--s-holo);
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--d-zalanie) var(--e-out);
}
.s-zac-opcja-ik {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 8px;
  background: rgba(108, 216, 255, 0.1);   /* --s-holo */
  color: var(--s-holo);
  transition: background-color var(--d-wolno) var(--e-out), color var(--d-wolno) var(--e-out), transform var(--d-wolno) var(--e-out);
}
.s-zac-opcja-ik svg { width: 22px; height: 22px; }
.s-zac-opcja-nazwa { font-family: var(--f-display); font-weight: 600; font-size: 0.9375rem; line-height: 1.3; letter-spacing: -0.005em; }
.s-zac-opcja-opis { font-size: 0.8125rem; line-height: 1.4; color: var(--s-cichy-noc); transition: color var(--d-wolno) var(--e-out); }
.s-zac-opcja-ok {
  position: absolute; right: 12px; top: 12px; width: 22px; height: 22px; padding: 3px; border-radius: 6px;
  fill: none; stroke: var(--s-holo); stroke-width: 2.6; stroke-linecap: square;
  background: var(--s-tusz);
  stroke-dasharray: 24; stroke-dashoffset: 24; opacity: 0;
  transition: stroke-dashoffset 0.4s var(--e-out) 0.15s, opacity 0.4s var(--e-out);
}
@media (hover: hover) {
  .s-zac-opcja:hover .s-zac-opcja-karta { border-color: rgba(108, 216, 255, 0.5); transform: translateY(-2px); }   /* --s-holo */
}
.s-zac-radio:checked + .s-zac-opcja-karta { color: var(--s-tusz); border-color: var(--s-holo); }
.s-zac-radio:checked + .s-zac-opcja-karta::before { transform: translate(-50%, -50%) scale(1); }
.s-zac-radio:checked + .s-zac-opcja-karta .s-zac-opcja-ik { background: rgba(7, 17, 26, 0.12); color: var(--s-tusz); transform: rotate(-6deg); }   /* --s-tusz */
.s-zac-radio:checked + .s-zac-opcja-karta .s-zac-opcja-opis { color: var(--s-tusz); }
.s-zac-radio:checked + .s-zac-opcja-karta .s-zac-opcja-ok { stroke-dashoffset: 0; opacity: 1; }
.s-zac-radio:focus-visible + .s-zac-opcja-karta,
.s-zac-radio:focus-visible + .s-zac-plan-karta { outline: 3px solid var(--s-holo); outline-offset: 3px; }

/* plan: trzy stopnie (szewrony) + „jeszcze nie wiem” na całą szerokość */
.s-zac-opcje--plan { grid-template-columns: minmax(0, 1fr); }
@container zac (min-width: 250px) {
  .s-zac-opcje--plan { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s-zac-plan--szeroki { grid-column: 1 / -1; }
}
.s-zac-plan { position: relative; display: grid; cursor: pointer; }
.s-zac-plan-karta {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 16px;
  border-radius: var(--r-pigulka);
  border: 1px solid var(--s-linia-noc-mocna);
  background: rgba(238, 247, 252, 0.03);   /* --s-bialy */
  color: var(--s-tekst-noc); font-weight: 500; font-size: 0.9375rem; white-space: nowrap;
  transition: border-color var(--d-srednio) var(--e-out), color var(--d-wolno) var(--e-out);
}
.s-zac-plan-karta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--s-piasek);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--d-zalanie) var(--e-out);
}
.s-zac-plan-ik { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--s-piasek); stroke-width: 2.2; stroke-linecap: butt; stroke-linejoin: miter; transition: stroke var(--d-wolno) var(--e-out); }
@media (hover: hover) { .s-zac-plan:hover .s-zac-plan-karta { border-color: rgba(210, 194, 154, 0.6); } }   /* --s-piasek */
.s-zac-radio:checked + .s-zac-plan-karta { color: var(--s-tusz); border-color: var(--s-piasek); font-weight: 600; }
.s-zac-radio:checked + .s-zac-plan-karta::before { transform: scaleX(1); }
.s-zac-radio:checked + .s-zac-plan-karta .s-zac-plan-ik { stroke: var(--s-tusz); }
/* węższa karta: stopnie jako trzy kafelki (szewron nad nazwą), „jeszcze nie wiem” pod nimi */
@container zac (min-width: 250px) and (max-width: 439px) {
  .s-zac-plan:not(.s-zac-plan--szeroki) .s-zac-plan-karta { flex-direction: column; gap: 4px; min-height: 74px; padding: 10px 6px; border-radius: var(--r-maly); }
  .s-zac-plan:not(.s-zac-plan--szeroki) .s-zac-plan-karta::before { transform-origin: 50% 100%; transform: scaleY(0); }
  .s-zac-plan:not(.s-zac-plan--szeroki) .s-zac-radio:checked + .s-zac-plan-karta::before { transform: scaleY(1); }
}

/* zgoda */
.s-zac-pole--zgoda { gap: 12px; padding-top: 22px; border-top: 1px solid var(--s-linia-noc); }
.s-zac-zgoda { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; align-items: start; cursor: pointer; font-size: 0.9375rem; line-height: 1.55; color: var(--s-tekst-noc); }
.s-zac-check-box {
  width: 26px; height: 26px; border-radius: 7px; margin-top: 1px;
  display: grid; place-items: center;
  border: 1.5px solid var(--s-linia-noc-mocna);
  background: rgba(3, 7, 13, 0.7);   /* --s-noc */
  transition: background-color var(--d-srednio) var(--e-out), border-color var(--d-srednio) var(--e-out), box-shadow var(--d-wolno) var(--e-out);
}
.s-zac-check-box svg { width: 18px; height: 18px; fill: none; stroke: var(--s-tusz); stroke-width: 2.8; stroke-linecap: square; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 0.35s var(--e-out) 0.05s; }
@media (hover: hover) { .s-zac-zgoda:hover .s-zac-check-box { border-color: var(--s-holo); } }
.s-zac-check:checked + .s-zac-check-box { background: var(--s-holo); border-color: var(--s-holo); box-shadow: 0 0 20px -4px rgba(108, 216, 255, 0.6); }   /* --s-holo */
.s-zac-check:checked + .s-zac-check-box svg { stroke-dashoffset: 0; }
.s-zac-check:focus-visible + .s-zac-check-box { outline: 3px solid var(--s-holo); outline-offset: 3px; }
.s-zac-pole[data-stan="blad"] .s-zac-check-box { border-color: var(--s-wrog); }
.s-zac-zgoda a, .s-zac-noscript a, .s-zac-blad a, .s-zac-sukces a { color: var(--s-holo); text-decoration: underline; text-underline-offset: 3px; }
.s-zac-rodo { font-size: 0.8125rem; line-height: 1.6; color: var(--s-cichy-noc); padding-left: 40px; }

.s-zac-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* akcja: przycisk + tarcza + błąd */
.s-zac-akcja { display: grid; gap: 14px; margin-top: 2px; }
.s-zac-wyslij { min-height: 62px; font-size: 1.0625rem; }
.s-zac-wyslij .s-btn-pole { width: 66px; }
.s-zac-wyslij .s-btn-pole svg { grid-area: 1 / 1; transition: opacity 0.4s var(--e-out), transform var(--d-wolno) var(--e-out); }
.s-zac-radar-ik { opacity: 0; }
.s-zac-wyslij[data-wysylam] { opacity: 1; cursor: progress; }
.s-zac-wyslij[data-wysylam] .s-zac-strz { opacity: 0; }
.s-zac-wyslij[data-wysylam] .s-zac-radar-ik { opacity: 1; animation: s-zac-obrot 1.1s linear infinite; }
.s-zac-blysk {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.4) 50%, transparent 62%);
  transform: translateX(-110%);
}
.s-zac-wyslij.is-uzbrojony .s-zac-blysk { animation: s-zac-blysk 1.6s var(--e-in-out) 2; }
@keyframes s-zac-blysk { to { transform: translateX(110%); } }
@container zac (max-width: 459px) {
  .s-zac-wyslij-reszta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .s-zac-wyslij .s-btn-tekst { padding: 0 14px 0 22px; }
  .s-zac-wyslij .s-btn-pole { width: 56px; }
}
.s-zac-tarcza {
  display: flex; align-items: flex-start; gap: 10px;
  font-family: var(--f-tekst); font-size: 0.8125rem; letter-spacing: 0; line-height: 1.5; color: var(--s-cichy-noc);
}
.s-zac-tarcza-ik { width: 18px; height: 18px; flex: none; margin-top: 0.05em; color: var(--s-holo-2); transition: color 0.5s var(--e-out), opacity 0.5s var(--e-out); }
.s-zac-tarcza[data-stan="praca"] .s-zac-tarcza-ik { color: var(--s-holo); animation: s-zac-oddech 1.6s var(--e-in-out) infinite alternate; }
@keyframes s-zac-oddech { from { opacity: 1; } to { opacity: 0.4; } }
.s-zac-tarcza[data-stan="ok"] .s-zac-tarcza-ik { color: var(--s-holo); }
.s-zac-tarcza[data-stan="blad"] .s-zac-tarcza-ik { color: var(--s-wrog); }
.s-zac-blad {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: var(--r-maly);
  border: 1px solid rgba(255, 138, 138, 0.5);   /* --s-wrog */
  background: rgba(255, 138, 138, 0.08);        /* --s-wrog */
  color: var(--s-bialy); font-size: 0.9375rem; line-height: 1.5;
}
.s-zac-blad:empty { display: none; }
.s-zac-blad svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--s-wrog); }
.s-zac-noscript { font-size: 0.9375rem; color: var(--s-tekst-noc); }

/* sukces */
.s-zac-sukces { display: grid; justify-items: center; text-align: center; gap: 16px; padding: clamp(12px, 2vw, 28px) 0 clamp(8px, 1.4vw, 20px); }
.s-zac-sukces[hidden] { display: none; }
.s-zac-znak { position: relative; width: 148px; height: 148px; margin-bottom: 6px; }
.s-zac-znak-svg { width: 100%; height: 100%; overflow: visible; fill: none; }
.s-zac-znak-tlo { fill: rgba(108, 216, 255, 0.1); }   /* --s-holo */
.s-zac-znak-ring { stroke: var(--s-holo); stroke-width: 2.4; stroke-dasharray: 327; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 70px 70px; filter: drop-shadow(0 0 6px rgba(108, 216, 255, 0.6)); }   /* --s-holo */
.s-zac-znak-ring2 { stroke: rgba(160, 220, 255, 0.24); stroke-width: 1.2; }   /* --s-linia-noc-mocna */
.s-zac-znak-check { stroke: var(--s-lod); stroke-width: 6; stroke-linecap: square; stroke-linejoin: miter; stroke-dasharray: 72; stroke-dashoffset: 0; }
.s-zac-iskry { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.s-zac-iskry i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--s-holo); box-shadow: 0 0 8px rgba(108, 216, 255, 0.8); opacity: 0; }   /* --s-holo */
.s-zac-iskry i:nth-child(3n) { background: var(--s-piasek); box-shadow: 0 0 8px rgba(210, 194, 154, 0.8); }   /* --s-piasek */
.s-zac-iskry i:nth-child(4n) { background: var(--s-lod); }
.s-zac-sukces-t { font-size: clamp(2.3rem, 1.5rem + 3vw, 4rem); color: var(--s-bialy); max-width: 14ch; }
.s-zac-sukces-t:focus { outline: none; }
.s-zac-sukces-t:focus-visible { outline: 3px solid var(--fokus); outline-offset: 6px; }
.s-zac-sukces-tekst { max-width: 46ch; font-size: var(--t-lead); line-height: 1.6; color: var(--s-tekst-noc); }
.s-zac-sukces-tekst b { color: var(--s-holo); font-weight: 600; overflow-wrap: anywhere; }
.s-zac-sukces-dalej { max-width: 46ch; font-size: var(--t-maly); color: var(--s-cichy-noc); }

/* =========================================================================
   DANE FIRMY (#dane-firmy) — trzy kolumny z etykietami Poppins
   ========================================================================= */
.s-zac-firma {
  display: grid; gap: var(--o-4); grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(64px, 3rem + 4vw, 128px);
  scroll-margin-top: calc(var(--pasek-h) + 32px);
}
@media (min-width: 768px) {
  .s-zac-firma { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-zac-firma-kol:first-child { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .s-zac-firma { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
  .s-zac-firma-kol:first-child { grid-column: auto; }
}
.s-zac-firma-kol {
  position: relative; display: grid; gap: 12px; align-content: start;
  padding: clamp(22px, 1rem + 0.8vw, 30px);
  border-radius: var(--r-karta);
  background: linear-gradient(180deg, rgba(13, 24, 38, 0.92), rgba(7, 16, 26, 0.92));   /* --s-noc-3, --s-noc-2: tekst na pełnym tle */
  border: 1px solid var(--s-linia-noc);
  font-size: var(--t-maly); line-height: 1.6; color: var(--s-tekst-noc);
}
.s-zac-firma-kol::before { content: ""; position: absolute; top: -1px; left: 28px; width: 64px; height: 3px; border-radius: 0 0 3px 3px; background: var(--c-noc); }
.s-zac-firma-et {
  font-family: var(--f-display); font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em;
  color: var(--c-noc);
}
.s-zac-mail {
  width: fit-content; max-width: 100%;
  font-family: var(--f-display); font-weight: 600; font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.75rem); line-height: 1.1; letter-spacing: -0.015em;
  color: var(--s-bialy); overflow-wrap: anywhere;
  background: linear-gradient(var(--s-holo), var(--s-holo)) left bottom / 0 2px no-repeat;
  padding-bottom: 4px;
  transition: background-size var(--d-wolno) var(--e-out), color var(--d-srednio) var(--e-out);
}
@media (hover: hover) { .s-zac-mail:hover { background-size: 100% 2px; color: var(--s-lod); } }
.s-zac-firma-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 4px; }
.s-zac-kopiuj, .s-zac-firma-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border-radius: var(--r-pigulka); border: 1px solid var(--s-linia-noc-mocna);
  color: var(--s-tekst-noc); font-size: 0.875rem; font-weight: 500; white-space: nowrap;
  transition: border-color var(--d-srednio) var(--e-out), color var(--d-srednio) var(--e-out), background-color var(--d-srednio) var(--e-out);
}
.s-zac-kopiuj[hidden] { display: none; }
.s-zac-kopiuj svg, .s-zac-firma-link svg { width: 16px; height: 16px; }
@media (hover: hover) { .s-zac-kopiuj:hover, .s-zac-firma-link:hover { border-color: var(--s-holo); color: var(--s-bialy); background: rgba(108, 216, 255, 0.06); } }   /* --s-holo */
.s-zac-kopiuj.is-ok { border-color: var(--s-holo); color: var(--s-holo); }
.s-zac-firma-marka { font-size: 1.0625rem; color: var(--s-tekst-noc); }
.s-zac-firma-marka b { color: var(--s-bialy); font-weight: 600; }
.s-zac-firma-nazwa { font-family: var(--f-display); font-weight: 600; font-size: 1.125rem; line-height: 1.3; letter-spacing: 0; color: var(--s-bialy); }
.s-zac-rejestr { display: grid; gap: 6px; margin: 0; font-variant-numeric: tabular-nums; }
.s-zac-rejestr > div { display: grid; grid-template-columns: minmax(84px, 0.85fr) minmax(0, 1.15fr); gap: 2px 14px; align-items: baseline; padding-bottom: 6px; border-bottom: 1px solid var(--s-linia-noc); }
.s-zac-rejestr dt { font-family: var(--f-display); font-size: 0.875rem; font-weight: 600; letter-spacing: 0; color: var(--s-cichy-noc); }
.s-zac-rejestr dd { margin: 0; font-weight: 600; color: var(--s-bialy); }
.s-zac-sad { font-size: 0.8125rem; color: var(--s-cichy-noc); }

/* =========================================================================
   TELEFON
   ========================================================================= */
@media (max-width: 767px) {
  .s-zac-pauza { right: 12px; top: 12px; }
  .s-zac-radar { width: 620px; height: 620px; margin: -310px 0 0 -310px; }
  .s-zac-rodo { padding-left: 0; }
}
@container zac (max-width: 300px) {
  .s-zac-opcja-karta { min-height: 112px; padding: 12px 10px 14px; }
  .s-zac-opcja-karta::before { left: 30px; top: 30px; }
  .s-zac-opcja-nazwa { font-size: 0.875rem; }
  .s-zac-opcja-ok { right: 8px; top: 8px; }
}
@media (max-width: 380px) {
  .s-zac-opcja-opis { display: none; }
}

/* =========================================================================
   PODSTRONA: polityka prywatności (zrodla/strony/polityka-prywatnosci.html) — dokument w wersji nocnej.
   Układ jak dokument prawny xtn.pl: tytuł 400/600, lead „Krótko”, przyklejony spis treści + treść, karty sytuacji.
   Bez wersalików i kroju maszynowego: etykiety Poppins 600 zwykłą pisownią.
   ========================================================================= */
.s-doc { position: relative; isolation: isolate; overflow: clip; padding: calc(var(--pasek-h) + clamp(56px, 3rem + 3vw, 104px)) 0 var(--o-sekcja); background: var(--s-noc); }
.s-doc::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 900px; z-index: -1; pointer-events: none;
  background: url(../img/kontury-ciemne.svg) 70% 0 / 1600px auto no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
  mask-image: linear-gradient(180deg, #000, transparent 85%);
  opacity: 0.55;
}
.s-doc::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 700px; z-index: -1; pointer-events: none;
  background: radial-gradient(700px 460px at 0% 0%, rgba(46, 143, 208, 0.22), transparent 70%);   /* --s-holo-2 */
}
.s-doc-glowa { display: grid; justify-items: start; gap: 20px; max-width: 900px; margin-bottom: clamp(40px, 2rem + 3vw, 80px); }
.s-doc-glowa h1 { font-size: var(--t-h2); line-height: 1.04; letter-spacing: -0.025em; }
.s-doc-lead { max-width: 68ch; font-size: var(--t-lead); line-height: 1.65; color: var(--s-tekst-noc); }
.s-doc-lead b { color: var(--s-bialy); font-weight: 600; }
.s-doc-meta { font-family: var(--f-tekst); font-size: 0.875rem; letter-spacing: 0; color: var(--s-cichy-noc); }
.s-doc-meta b { color: var(--s-piasek); font-weight: 600; }
.s-doc-siatka { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 2rem + 2vw, 72px); align-items: start; }
@media (min-width: 992px) { .s-doc-siatka { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); } }
.s-doc-spis {
  padding: 22px 22px 18px; border-radius: var(--r-karta);
  background: linear-gradient(180deg, rgba(13, 24, 38, 0.92), rgba(7, 16, 26, 0.92));   /* --s-noc-3, --s-noc-2 */
  border: 1px solid var(--s-linia-noc);
}
@media (min-width: 992px) { .s-doc-spis { position: sticky; top: calc(var(--pasek-h) + 36px); } }
.s-doc-spis-t { font-family: var(--f-display); font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--s-bialy); margin-bottom: 10px; }
.s-doc-spis ol { display: grid; counter-reset: s-doc; }
.s-doc-spis li { counter-increment: s-doc; }
.s-doc-spis li a {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; min-height: 40px; padding: 4px 0;
  font-size: 0.9375rem; line-height: 1.35; color: var(--s-tekst-noc);
  transition: color var(--d-srednio) var(--e-out);
}
.s-doc-spis li a::before { content: counter(s-doc) "."; font-family: var(--f-display); font-size: 0.875rem; font-weight: 600; letter-spacing: 0; color: var(--s-holo-2); }
@media (hover: hover) { .s-doc-spis li a:hover { color: var(--s-bialy); } }
.s-doc-spis-inne { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--s-linia-noc); font-size: 0.9375rem; font-weight: 600; color: var(--s-holo); }
.s-doc-spis-inne svg { width: 16px; height: 16px; }
.s-doc-tresc { max-width: 80ch; min-width: 0; }
.s-doc-sek { scroll-margin-top: calc(var(--pasek-h) + 32px); }
.s-doc-sek + .s-doc-sek { margin-top: clamp(36px, 2rem + 1.4vw, 56px); padding-top: clamp(28px, 1.4rem + 1vw, 40px); border-top: 1px solid var(--s-linia-noc); }
.s-doc-sek h2 { font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.9rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 16px; }
.s-doc-sek p, .s-doc-sek li { font-size: var(--t-tekst); line-height: 1.7; color: var(--s-tekst-noc); }
.s-doc-sek p { margin-bottom: 14px; }
.s-doc-sek ul { list-style: square; padding-left: 1.3em; margin-bottom: 14px; }
.s-doc-sek li { margin-bottom: 8px; }
.s-doc-sek li::marker { color: var(--s-holo); }
.s-doc-sek strong { color: var(--s-bialy); font-weight: 600; }
.s-doc-sek a { color: var(--s-holo); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.s-doc-sek code { font-family: var(--f-tekst); font-size: 0.94em; font-weight: 600; padding: 2px 7px; border-radius: 6px; background: rgba(108, 216, 255, 0.1); color: var(--s-lod); }   /* --s-holo */
.s-doc-karty { display: grid; gap: 14px; }
.s-doc-karta {
  position: relative; padding: clamp(20px, 1rem + 0.6vw, 26px);
  border-radius: var(--r-karta);
  background: linear-gradient(180deg, rgba(238, 247, 252, 0.05), rgba(238, 247, 252, 0.02));   /* --s-bialy */
  border: 1px solid var(--s-linia-noc);
}
.s-doc-karta h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 1.1875rem; }
.s-doc-karta h3::before { content: ""; width: 11px; height: 11px; flex: none; border-radius: 3px; background: var(--s-holo); }
.s-doc-karta:nth-child(3n+2) h3::before { background: var(--s-holo-2); }
.s-doc-karta:nth-child(3n+3) h3::before { background: var(--s-piasek); }
.s-doc-karta dl { display: grid; gap: 12px; margin: 0; }
.s-doc-karta dl > div { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 4px 20px; }
.s-doc-karta dt { font-family: var(--f-display); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; line-height: 1.6; color: var(--s-bialy); }
.s-doc-karta dd { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--s-tekst-noc); }
@media (max-width: 575px) {
  .s-doc-karta dl > div { grid-template-columns: minmax(0, 1fr); }
  .s-doc-spis li a { min-height: 44px; }
}


/* ===== dodatek: blog.css ===== */
/* BLOG SEOLDIER — strona bloga (/blog/) i artykuł flagowy (/blog/jak-napisac-artykul-seo.html).
   Prefiksy: s-blog- (lista wpisów), s-art- (artykuł), s-rtg- (Rentgen SEO — panel 22 kontroli liczonych na żywo).
   Układ czytania: nagłówek na nocy → treść na białym papierze (kolumna ok. 68 znaków, Work Sans 18 px / 1.75,
   Poppins w nagłówkach), spis treści przyklejony z lewej. Kolory wyłącznie z tokenów baza.css (pochodne rgba
   opisane przy użyciu). Ruch: tylko opacity / transform; przy ograniczonym ruchu działa reguła z baza.css. */

/* =========================================================================
   1. NAGŁÓWEK NA NOCY (artykuł i blog)
   ========================================================================= */
.s-art-glowa, .s-blog-glowa {
  position: relative; isolation: isolate; overflow: clip;
  padding: calc(var(--pasek-h) + clamp(44px, 2rem + 3vw, 96px)) 0 clamp(40px, 2rem + 2vw, 76px);
  background: var(--s-noc);
}
.s-art-glowa::before, .s-blog-glowa::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: url(../img/kontury-ciemne.svg) 70% 20% / cover no-repeat;
  -webkit-mask-image: radial-gradient(110% 80% at 70% 20%, #000 20%, transparent 75%);
  mask-image: radial-gradient(110% 80% at 70% 20%, #000 20%, transparent 75%);
  opacity: 0.8;
}
.s-art-glowa::after, .s-blog-glowa::after {
  /* poświata — pochodne --s-holo-2 (46,143,208) i --s-holo (108,216,255) */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(760px 480px at 8% 0%, rgba(46, 143, 208, 0.24), transparent 70%),
    radial-gradient(620px 420px at 92% 30%, rgba(108, 216, 255, 0.08), transparent 70%);
}
.s-art-glowa-in, .s-blog-glowa-in { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.s-art-glowa-tekst, .s-blog-glowa-tekst { display: grid; justify-items: start; gap: 22px; min-width: 0; max-width: 880px; }
.s-art-glowa h1 {
  font-size: clamp(2.2rem, 1.25rem + 3vw, 4rem); line-height: 1.07; letter-spacing: -0.03em;
  max-width: 19ch; color: var(--s-bialy);
}
.s-art-glowa h1 .s-akcent, .s-blog-glowa h1 .s-akcent { font-weight: 600; }
.s-art-lead { max-width: 62ch; }

/* okruszki */
.s-art-okruszki ol { display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; font-size: 0.875rem; line-height: 1.4; color: var(--s-cichy-noc); }
.s-art-okruszki li { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; }
.s-art-okruszki li + li::before { content: "›"; margin: 0 10px; color: var(--s-cichy-noc); }
.s-art-okruszki a {
  display: inline-flex; align-items: center; min-height: 32px; color: var(--s-tekst-noc);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(196, 211, 222, 0.35); /* --s-tekst-noc */
  transition: text-decoration-color var(--d-srednio) var(--e-out), color var(--d-srednio) var(--e-out);
}
@media (hover: hover) { .s-art-okruszki a:hover { color: var(--s-bialy); text-decoration-color: currentColor; } }
.s-art-okruszki [aria-current] { display: block; min-width: 0; max-width: 46ch; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 560px) { .s-art-okruszki [aria-current] { max-width: 24ch; } }

/* podpis, data, czas czytania, przycisk rentgena */
.s-art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 4px; }
.s-art-podpis { display: inline-flex; align-items: center; gap: 12px; }
.s-art-awatar {
  display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(108, 216, 255, 0.08); /* --s-holo */
  border: 1px solid var(--s-linia-noc-mocna);
}
.s-art-awatar svg { width: 22px; height: 22px; }
.s-art-podpis-t { display: grid; line-height: 1.3; }
.s-art-podpis-t b { font-family: var(--f-display); font-weight: 600; font-size: 0.9375rem; color: var(--s-bialy); }
.s-art-podpis-t span { font-size: 0.8125rem; color: var(--s-cichy-noc); }
.s-art-meta-lista { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.9375rem; color: var(--s-tekst-noc); }
.s-art-meta-lista li { display: inline-flex; align-items: center; gap: 8px; }
.s-art-meta-lista svg { width: 18px; height: 18px; color: var(--s-holo); }

.s-art-rtg-btn {
  display: inline-flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 20px 0 7px;
  border-radius: var(--r-pigulka);
  border: 1px solid rgba(108, 216, 255, 0.42); /* --s-holo */
  background: rgba(108, 216, 255, 0.08);
  color: var(--s-bialy); font-weight: 600; font-size: 0.9375rem; white-space: nowrap;
  transition: border-color var(--d-srednio) var(--e-out), background-color var(--d-srednio) var(--e-out);
}
.s-art-rtg-btn[hidden] { display: none; }
@media (hover: hover) { .s-art-rtg-btn:hover { border-color: var(--s-holo); background: rgba(108, 216, 255, 0.15); } }
.s-art-rtg-btn-ik { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--s-holo); color: var(--s-tusz); }
.s-art-rtg-btn-ik svg { width: 19px; height: 19px; }
.s-art-rtg-btn-t { display: inline-flex; align-items: center; }
.s-art-rtg-btn-wynik, .s-rtg-plywak-wynik {
  margin-left: 10px; padding: 3px 10px; border-radius: 20px;
  background: rgba(238, 247, 252, 0.08); /* --s-bialy */
  font-family: var(--f-display); font-size: 0.8125rem; font-weight: 600; color: var(--s-holo);
  opacity: 0; transition: opacity 0.7s var(--e-out);
}
.s-art-rtg-btn-wynik:empty, .s-rtg-plywak-wynik:empty { display: none; }
.is-wynik .s-art-rtg-btn-wynik, .is-wynik .s-rtg-plywak-wynik { opacity: 1; }

/* okładka */
.s-art-okladka {
  margin: clamp(36px, 2rem + 2vw, 64px) 0 0;
  border-radius: var(--okno-promien); overflow: hidden;
  border: 1px solid var(--s-linia-noc);
  background: var(--s-noc-2);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.9);
}
.s-art-okladka img { width: 100%; height: auto; }

/* =========================================================================
   2. PAPIER: układ, spis treści
   ========================================================================= */
.s-art-papier, .s-blog-papier { padding-block: clamp(48px, 2.5rem + 3vw, 112px); }
.s-sekcja.s-art-papier { background: var(--s-papier); }
.s-art-razem { white-space: nowrap; }

.s-art-uklad {
  --spis: 232px;
  --kol: 41rem;
  display: grid; grid-template-columns: var(--spis) minmax(0, var(--kol));
  gap: clamp(40px, 4.4vw, 88px); justify-content: center; align-items: start;
  transition: transform 0.7s var(--e-out);
}
.s-art-uklad.is-przesuniety { transform: translateX(calc(var(--rtg-przesun, 0px) * -1)); }
.s-art-kolumna { min-width: 0; }

.s-art-spis { position: sticky; top: calc(var(--pasek-h) + 36px); align-self: start; transition: opacity 0.45s var(--e-out); }
.s-art-uklad.is-bez-spisu .s-art-spis { opacity: 0; pointer-events: none; }
.s-art-spis-in { max-height: calc(100vh - var(--pasek-h) - 72px); overflow: auto; overscroll-behavior: contain; padding: 2px 6px 6px 2px; }
.s-art-spis-t { margin-bottom: 14px; font-family: var(--f-display); font-weight: 600; font-size: 0.9375rem; color: var(--s-tusz); }
.s-art-spis-lista { display: grid; border-left: 1.5px solid var(--s-linia); }
.s-art-spis-lista a {
  display: block; margin-left: -1.5px; padding: 7px 0 7px 16px;
  border-left: 2px solid transparent;
  font-size: 0.9rem; line-height: 1.35; color: var(--s-cichy);
  transition: color var(--d-srednio) var(--e-out), border-color var(--d-srednio) var(--e-out);
}
@media (hover: hover) { .s-art-spis-lista a:hover { color: var(--s-tusz); } }
.s-art-spis-lista a[aria-current="true"] { color: var(--s-tusz); font-weight: 500; border-left-color: var(--s-holo-tusz); }
.s-art-spis-rtg {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 22px; padding: 0 18px 0 14px;
  border-radius: var(--r-pigulka); background: var(--s-noc-2); color: var(--s-bialy);
  font-weight: 600; font-size: 0.875rem; white-space: nowrap;
  transition: background-color var(--d-srednio) var(--e-out);
}
.s-art-spis-rtg[hidden] { display: none; }
.s-art-spis-przelacz { display: none; }
.s-art-spis-rtg svg { width: 18px; height: 18px; color: var(--s-holo); }
@media (hover: hover) { .s-art-spis-rtg:hover { background: var(--s-noc-3); } }

@media (max-width: 1139px) {
  .s-art-uklad { grid-template-columns: minmax(0, var(--kol)); gap: 32px; }
  .s-art-spis { position: static; }
  .s-art-spis-in {
    max-height: none; overflow: visible; padding: 18px 20px;
    border: 1px solid var(--s-linia); border-radius: 20px; background: var(--s-papier-2);
  }
  .s-art-spis-rtg { display: none !important; }
  html.s-js .s-art-spis-t { display: none; }
  .s-art-spis-przelacz:not([hidden]) {
    display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px;
    font-family: var(--f-display); font-weight: 600; font-size: 1rem; color: var(--s-tusz); text-align: left;
  }
  .s-art-spis-przelacz svg { width: 20px; height: 20px; color: var(--s-holo-tusz); transition: transform 0.45s var(--e-out); }
  .s-art-spis-przelacz[aria-expanded="true"] svg { transform: rotate(180deg); }
  html.s-js .s-art-spis:not(.is-otwarty) .s-art-spis-lista { display: none; }
  .s-art-spis.is-otwarty .s-art-spis-lista { margin-top: 10px; animation: s-art-pojaw 0.5s var(--e-out) both; }
}
@keyframes s-art-pojaw { from { opacity: 0; } }

/* =========================================================================
   3. TYPOGRAFIA ARTYKUŁU
   ========================================================================= */
.s-art-tresc { font-size: 1.125rem; line-height: 1.75; color: var(--s-tekst); }
.s-art-tresc > * + * { margin-top: 1.1em; }
.s-art-tresc h2, .s-art-faq > h2 {
  margin-top: 2.25em;
  font-size: clamp(1.55rem, 1.2rem + 1vw, 2.1rem); line-height: 1.2; letter-spacing: -0.022em; font-weight: 400;
  scroll-margin-top: calc(var(--pasek-h) + 40px);
}
.s-art-tresc h3 { margin-top: 1.8em; font-size: 1.2rem; line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; }
.s-art-tresc :is(h2, h3) + * { margin-top: 0.65em; }
.s-art-tresc a {
  color: var(--s-holo-tusz);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: rgba(26, 111, 168, 0.45); /* --s-holo-tusz */
  transition: text-decoration-color var(--d-srednio) var(--e-out);
}
@media (hover: hover) { .s-art-tresc a:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; } }
.s-art-tresc strong { font-weight: 600; color: var(--s-tusz); }

.s-art-tresc ul, .s-art-tresc ol { display: grid; gap: 0.5em; }
.s-art-tresc ul > li { position: relative; padding-left: 1.45em; }
.s-art-tresc ul > li::before {
  content: ""; position: absolute; left: 0.25em; top: 0.68em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--s-holo-tusz);
}
.s-art-tresc ol { counter-reset: s-art-n; }
.s-art-tresc ol > li { position: relative; padding-left: 2.3em; counter-increment: s-art-n; }
.s-art-tresc ol > li::before {
  content: counter(s-art-n); position: absolute; left: 0; top: 5px;
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(46, 143, 208, 0.12); /* --s-holo-2 */
  color: var(--s-holo-tusz); font-family: var(--f-display); font-size: 0.8125rem; font-weight: 600; line-height: 1;
}

/* ilustracje */
.s-art-ryc { margin-block: 2em; }
.s-art-tresc > .s-art-ryc { margin-top: 2em; }
.s-art-ryc picture, .s-art-ryc img { display: block; width: 100%; height: auto; }
.s-art-ryc img { border-radius: 20px; background: var(--s-noc-2); box-shadow: 0 30px 60px -42px rgba(7, 17, 26, 0.6); /* --s-tusz */ }
.s-art-ryc figcaption { display: flex; gap: 12px; margin-top: 14px; font-size: 0.9375rem; line-height: 1.55; color: var(--s-cichy); }
.s-art-ryc figcaption::before { content: ""; flex: none; width: 18px; height: 2px; margin-top: 0.72em; background: var(--s-holo-tusz); }
@media (min-width: 1140px) { .s-art-ryc { margin-inline: -36px; } .s-art-ryc figcaption { padding-inline: 36px; } }

/* W skrócie */
.s-art-skrot {
  padding: clamp(22px, 1rem + 1vw, 32px);
  border-radius: var(--r-karta); background: var(--s-papier-2); border: 1px solid var(--s-linia);
  font-size: 1.0625rem; line-height: 1.6;
}
.s-art-skrot-t { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-family: var(--f-display); font-weight: 600; font-size: 1.125rem; color: var(--s-tusz); }
.s-art-skrot-t svg { width: 22px; height: 22px; color: var(--s-holo-tusz); }
.s-art-tresc .s-art-skrot ul { gap: 0.65em; }
.s-art-tresc .s-art-skrot li { padding-left: 1.9em; }
.s-art-tresc .s-art-skrot li::before {
  left: 0; top: 0.22em; width: 1.15em; height: 1.15em; border-radius: 0;
  background: var(--s-holo-tusz);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5L9.5 18L20 6.5' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5L9.5 18L20 6.5' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ramki: wskazówka, uwaga, rentgen */
.s-art-ramka {
  --c: var(--s-holo-tusz); --c-tint: rgba(46, 143, 208, 0.12); /* --s-holo-2 */
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; align-items: start;
  padding: clamp(20px, 1rem + 0.8vw, 28px);
  border-radius: var(--r-karta); border: 1px solid var(--s-linia); background: var(--s-papier);
  box-shadow: 0 22px 44px -36px rgba(7, 17, 26, 0.45); /* --s-tusz */
}
.s-art-tresc > .s-art-ramka { margin-top: 1.7em; }
.s-art-ramka-ik { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--c-tint); color: var(--c); }
.s-art-ramka-ik svg { width: 24px; height: 24px; }
.s-art-ramka-t { margin-bottom: 4px; font-family: var(--f-display); font-weight: 600; font-size: 1.0625rem; color: var(--s-tusz); }
.s-art-ramka p:not(.s-art-ramka-t) { font-size: 1.0625rem; line-height: 1.65; }
.s-art-ramka--uwaga {
  --c: var(--s-piasek-tusz); --c-tint: rgba(210, 194, 154, 0.32); /* --s-piasek */
  border-color: rgba(110, 95, 53, 0.26); /* --s-piasek-tusz */
  background: linear-gradient(rgba(210, 194, 154, 0.1), rgba(210, 194, 154, 0.1)), var(--s-papier);
}
.s-art-ramka--rentgen {
  --c: var(--s-tusz); --c-tint: var(--s-holo);
  position: relative; isolation: isolate; overflow: clip;
  background: var(--s-noc-2); border-color: var(--s-linia-noc-mocna); color: var(--s-tekst-noc);
}
.s-art-ramka--rentgen::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(420px 220px at 0% 0%, rgba(46, 143, 208, 0.28), transparent 70%); /* --s-holo-2 */
}
.s-art-ramka--rentgen .s-art-ramka-t { color: var(--s-bialy); }
.s-art-ramka-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 46px; margin-top: 16px; padding: 0 20px 0 16px;
  border-radius: var(--r-pigulka); background: var(--s-holo); color: var(--s-tusz);
  font-weight: 600; font-size: 0.9375rem; white-space: nowrap;
  transition: background-color var(--d-srednio) var(--e-out);
}
.s-art-ramka-btn[hidden] { display: none; }
.s-art-ramka-btn svg { width: 18px; height: 18px; }
@media (hover: hover) { .s-art-ramka-btn:hover { background: var(--s-lod); } }
@media (max-width: 480px) { .s-art-ramka { grid-template-columns: minmax(0, 1fr); gap: 12px; } }

/* tabela */
.s-art-tabela { overflow-x: auto; border: 1px solid var(--s-linia); border-radius: 18px; }
.s-art-tresc > .s-art-tabela { margin-top: 1.6em; }
.s-art-tabela table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 1rem; line-height: 1.5; }
.s-art-tabela caption { padding: 18px 20px 10px; text-align: left; font-family: var(--f-display); font-weight: 600; font-size: 1rem; color: var(--s-tusz); }
.s-art-tabela th, .s-art-tabela td { padding: 12px 20px; text-align: left; vertical-align: top; border-top: 1px solid var(--s-linia); }
.s-art-tabela thead th { font-family: var(--f-display); font-weight: 600; font-size: 0.875rem; color: var(--s-cichy); background: var(--s-papier-2); }
.s-art-tabela tbody th { font-weight: 600; color: var(--s-tusz); white-space: nowrap; }
.s-art-tabela td:nth-child(2) { font-family: var(--f-display); font-weight: 600; color: var(--s-holo-tusz); font-variant-numeric: tabular-nums; }

/* lista kontrolna */
.s-art-tresc .s-art-lista { padding: clamp(20px, 1rem + 1vw, 30px); border-radius: var(--r-karta); background: var(--s-papier-2); border: 1px solid var(--s-linia); gap: 0.6em; }

/* wyróżnienie na białym papierze — z tokenów (holo-2 jak w baza.css) */
.s-art-papier .s-wyroznij { font-weight: 600; }

/* =========================================================================
   4. PYTANIA I ODPOWIEDZI, AUTOR, CTA
   ========================================================================= */
.s-art-faq { margin-top: clamp(64px, 3rem + 3vw, 112px); scroll-margin-top: calc(var(--pasek-h) + 40px); }
.s-art-faq > h2 { margin: 0 0 24px; }
.s-art-faq-lista { display: grid; gap: 10px; interpolate-size: allow-keywords; }
.s-art-faq-q {
  border: 1px solid var(--s-linia); border-radius: 18px; background: var(--s-papier);
  transition: border-color var(--d-wolno) var(--e-out), box-shadow var(--d-wolno) var(--e-out);
}
.s-art-faq-q[open] { border-color: rgba(26, 111, 168, 0.42); box-shadow: 0 22px 44px -36px rgba(7, 17, 26, 0.5); } /* --s-holo-tusz, --s-tusz */
.s-art-faq-q summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 64px; padding: 14px 18px 14px 22px; border-radius: 18px; cursor: pointer; list-style: none;
  font-family: var(--f-display); font-weight: 500; font-size: 1.0625rem; line-height: 1.4; color: var(--s-tusz);
}
.s-art-faq-q summary::-webkit-details-marker { display: none; }
.s-art-faq-plus { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgba(46, 143, 208, 0.1); transition: background-color var(--d-srednio) var(--e-out); }
.s-art-faq-plus::before, .s-art-faq-plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px;
  border-radius: 1px; background: var(--s-holo-tusz); transition: transform 0.45s var(--e-out);
}
.s-art-faq-plus::after { transform: rotate(90deg); }
.s-art-faq-q[open] .s-art-faq-plus::after { transform: rotate(0deg); }
@media (hover: hover) { .s-art-faq-q summary:hover .s-art-faq-plus { background: rgba(46, 143, 208, 0.2); } }
.s-art-faq-a { padding: 0 22px 22px; font-size: 1.0625rem; line-height: 1.7; color: var(--s-tekst); }
@supports selector(::details-content) {
  .s-art-faq-q::details-content {
    block-size: 0; overflow: clip;
    transition: block-size 0.5s var(--e-out), content-visibility 0.5s allow-discrete;
  }
  .s-art-faq-q[open]::details-content { block-size: auto; }
}
.s-art-faq-q .s-art-faq-a { opacity: 0; transition: opacity 0.5s var(--e-out) 0.05s; }
.s-art-faq-q[open] .s-art-faq-a { opacity: 1; }
@starting-style { .s-art-faq-q[open] .s-art-faq-a { opacity: 0; } }

.s-art-autor {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 22px; align-items: start;
  margin-top: clamp(48px, 2.5rem + 2vw, 80px); padding: clamp(22px, 1rem + 1.2vw, 34px);
  border-radius: var(--r-karta); background: var(--s-papier-2); border: 1px solid var(--s-linia);
}
.s-art-autor-awatar { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--s-noc-2); }
.s-art-autor-awatar svg { width: 34px; height: 34px; }
.s-art-autor-et { font-size: 0.875rem; font-weight: 600; color: var(--s-cichy); }
.s-art .s-art-autor-t { margin: 2px 0 10px; font-size: 1.5rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
.s-art-autor p:not(.s-art-autor-et) { font-size: 1rem; line-height: 1.65; }
.s-art-autor-jak { margin-top: 12px !important; padding-top: 12px; border-top: 1px solid var(--s-linia); }
.s-art-autor-jak b { font-weight: 600; color: var(--s-tusz); }
.s-art-autor-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px;
  font-weight: 600; color: var(--s-holo-tusz);
}
.s-art-autor-link svg { width: 18px; height: 18px; transition: transform var(--d-wolno) var(--e-out); }
@media (hover: hover) { .s-art-autor-link:hover svg { transform: translateX(4px); } }
@media (max-width: 560px) { .s-art-autor { grid-template-columns: minmax(0, 1fr); } .s-art-autor-awatar { width: 56px; height: 56px; } }

.s-art-cta {
  position: relative; isolation: isolate; overflow: clip;
  margin-top: 24px; padding: clamp(26px, 1.2rem + 2.4vw, 56px);
  border-radius: var(--okno-promien); background: var(--s-noc-2); color: var(--s-tekst-noc);
}
.s-art-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: url(../img/kontury-ciemne.svg) center / cover no-repeat; opacity: 0.8;
}
.s-art-cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(560px 360px at 0% 0%, rgba(46, 143, 208, 0.3), transparent 70%); /* --s-holo-2 */
}
.s-art .s-art-cta h2 { max-width: 19ch; font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.4rem); line-height: 1.12; letter-spacing: -0.025em; color: var(--s-bialy); }
.s-art .s-art-cta .s-akcent { color: var(--s-piasek); font-weight: 600; }
.s-art-cta p { max-width: 56ch; margin: 14px 0 28px; font-size: 1.0625rem; line-height: 1.65; }
@media (max-width: 560px) {
  .s-art-cta { padding: 26px 18px; }
  .s-art-cta .s-btn { width: 100%; justify-content: space-between; font-size: 0.9375rem; }
  .s-art-cta .s-btn-tekst { padding: 0 10px 0 18px; }
  .s-art-cta .s-btn-pole { width: 50px; }
}
@media (max-width: 360px) {
  /* bardzo wąski telefon: napis w jednej linii, bez pola strzałki */
  .s-art-cta { padding: 24px 14px; }
  .s-art-cta .s-btn { justify-content: center; font-size: 0.875rem; }
  .s-art-cta .s-btn-tekst { padding: 0 12px; }
  .s-art-cta .s-btn-pole { display: none; }
}

/* =========================================================================
   5. RENTGEN SEO — panel (desktop: z prawej, telefon: od dołu), pływający przycisk, zaznaczenia
   ========================================================================= */
.s-rtg {
  position: fixed; z-index: 150;
  top: calc(var(--pasek-h) + 30px); right: 16px; bottom: 16px; width: min(388px, 100% - 32px);
  display: grid; grid-template-rows: auto auto minmax(0, 1fr);
  border-radius: 24px; overflow: hidden;
  background: var(--s-noc-2);
  border: 1px solid var(--s-linia-noc-mocna);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(108, 216, 255, 0.05);
  color: var(--s-tekst-noc); color-scheme: dark;
  transform: translateX(calc(100% + 40px)); visibility: hidden;
  transition: transform 0.65s var(--e-out), visibility 0s linear 0.65s;
}
.s-rtg.is-otwarty { transform: none; visibility: visible; transition: transform 0.65s var(--e-out); }
.s-rtg:focus { outline: none; }
.s-rtg:focus-visible { outline: 3px solid var(--s-holo); outline-offset: -3px; }

.s-rtg-glowa { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--s-linia-noc); }
.s-rtg-ikona { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--s-holo); color: var(--s-tusz); }
.s-rtg-ikona svg { width: 20px; height: 20px; }
.s-rtg-glowa-t { flex: 1; min-width: 0; }
.s-rtg .s-rtg-tytul { font-size: 1.125rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; color: var(--s-bialy); }
.s-rtg-mini { font-size: 0.8125rem; line-height: 1.35; color: var(--s-cichy-noc); opacity: 0; transition: opacity 0.6s var(--e-out); }
.s-rtg.is-policzone .s-rtg-mini { opacity: 1; }
.s-rtg-przycisk {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--s-linia-noc-mocna); color: var(--s-bialy);
  transition: border-color var(--d-srednio) var(--e-out), background-color var(--d-srednio) var(--e-out);
}
.s-rtg-przycisk svg { width: 18px; height: 18px; transition: transform 0.45s var(--e-out); }
@media (hover: hover) { .s-rtg-przycisk:hover { border-color: var(--s-holo); background: rgba(108, 216, 255, 0.08); } }
.s-rtg-rozwin { display: none; }

.s-rtg-wybor {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--s-linia-noc);
  background: rgba(108, 216, 255, 0.07); /* --s-holo */
  font-size: 0.875rem; line-height: 1.35;
}
.s-rtg-wybor[hidden] { display: none; }
.s-rtg-wybor-t { flex: 1 1 100%; min-width: 0; color: var(--s-tekst-noc); }
.s-rtg-wybor-t b { font-weight: 600; color: var(--s-bialy); }
.s-rtg-maly {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--r-pigulka);
  border: 1px solid var(--s-linia-noc-mocna); font-size: 0.8125rem; font-weight: 600; color: var(--s-bialy); white-space: nowrap;
  transition: border-color var(--d-srednio) var(--e-out);
}
.s-rtg-maly[hidden] { display: none; }
@media (hover: hover) { .s-rtg-maly:hover { border-color: var(--s-holo); } }

.s-rtg-cialo { overflow: auto; overscroll-behavior: contain; padding: 16px 16px 22px; scrollbar-width: thin; scrollbar-color: rgba(160, 220, 255, 0.25) transparent; }
.s-rtg-cialo > * { opacity: 0; transition: opacity 0.7s var(--e-out); transition-delay: calc(var(--n, 0) * 70ms); }
.s-rtg.is-policzone .s-rtg-cialo > * { opacity: 1; }
.s-rtg-wstep { font-size: 0.875rem; line-height: 1.55; color: var(--s-tekst-noc); }

.s-rtg-wynik {
  display: grid; gap: 12px; margin-top: 14px; padding: 18px;
  border-radius: 18px; border: 1px solid rgba(108, 216, 255, 0.22); /* --s-holo */
  background: linear-gradient(160deg, rgba(20, 38, 58, 0.95), rgba(7, 16, 26, 0.92)); /* jak .s-obj */
}
.s-rtg-wynik-gora { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.s-rtg-liczba { font-family: var(--f-display); font-weight: 600; font-size: 3rem; line-height: 0.95; letter-spacing: -0.03em; color: var(--s-bialy); }
.s-rtg-liczba span { margin-left: 4px; font-size: 1.125rem; font-weight: 500; letter-spacing: 0; color: var(--s-cichy-noc); }
.s-rtg-zestaw { font-size: 0.8125rem; line-height: 1.45; color: var(--s-cichy-noc); text-align: right; }
.s-rtg-zestaw b { display: block; font-family: var(--f-display); font-size: 0.9375rem; font-weight: 600; color: var(--s-bialy); }
.s-rtg-skala { position: relative; height: 6px; border-radius: 3px; background: rgba(160, 220, 255, 0.14); /* --s-linia-noc */ }
.s-rtg-skala::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--s-trio); transform: scaleX(var(--w, 0)); transform-origin: 0 50%; }
.s-rtg-skala i { position: absolute; left: 85%; top: -5px; width: 2px; height: 16px; border-radius: 1px; background: var(--s-piasek); }
.s-rtg-progi { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--s-cichy-noc); }
.s-rtg-progi b { font-weight: 600; color: var(--s-piasek); }
.s-rtg-status { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; font-size: 0.875rem; line-height: 1.4; font-weight: 600; }
.s-rtg-status svg { width: 18px; height: 18px; flex: none; }
.s-rtg-status.is-ok { background: rgba(108, 216, 255, 0.12); color: var(--s-holo); }
.s-rtg-status.is-nie { background: rgba(210, 194, 154, 0.14); color: var(--s-piasek); }

.s-rtg-grupa { margin-top: 20px; }
.s-rtg-grupa-t { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 4px 8px; font-family: var(--f-display); font-size: 0.9375rem; font-weight: 600; color: var(--s-bialy); }
.s-rtg-grupa-t span { font-family: var(--f-tekst); font-size: 0.8125rem; font-weight: 500; color: var(--s-cichy-noc); }
.s-rtg-lista { display: grid; gap: 6px; }
.s-rtg-k {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 3px 12px; width: 100%;
  padding: 11px 12px; border-radius: 14px; text-align: left;
  border: 1px solid var(--s-linia-noc); background: rgba(238, 247, 252, 0.025); /* --s-bialy */
  transition: border-color var(--d-srednio) var(--e-out), background-color var(--d-srednio) var(--e-out);
}
@media (hover: hover) { .s-rtg-k:hover { border-color: rgba(108, 216, 255, 0.38); } }
.s-rtg-k[aria-pressed="true"] { border-color: var(--s-holo); background: rgba(108, 216, 255, 0.09); }
.s-rtg-stan { grid-row: span 2; display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; color: var(--s-tusz); }
.s-rtg-stan svg { width: 14px; height: 14px; stroke-width: 3; }
.s-rtg-stan b { font-family: var(--f-display); font-size: 0.875rem; font-weight: 700; line-height: 1; }
.is-good .s-rtg-stan { background: var(--s-holo); }
.is-warn .s-rtg-stan { background: var(--s-piasek); }
.is-bad .s-rtg-stan { background: var(--s-wrog); }
.s-rtg-et { font-size: 0.9375rem; font-weight: 600; line-height: 1.35; color: var(--s-bialy); }
.s-rtg-wart { margin-left: 6px; font-weight: 500; color: var(--s-holo); white-space: nowrap; }
.is-warn .s-rtg-wart { color: var(--s-piasek); }
.is-bad .s-rtg-wart { color: var(--s-wrog); }
.s-rtg-opis { font-size: 0.8125rem; line-height: 1.5; color: var(--s-cichy-noc); }
.s-rtg-szczegol {
  margin: 6px 0 4px 38px; padding: 12px 14px; border-radius: 12px;
  background: var(--s-noc-3); border: 1px solid var(--s-linia-noc);
  font-size: 0.8125rem; line-height: 1.55; color: var(--s-tekst-noc); overflow-wrap: anywhere;
}
.s-rtg-szczegol[hidden] { display: none; }
.s-rtg-szczegol mark { padding: 0 2px; border-radius: 3px; background: rgba(108, 216, 255, 0.22); color: var(--s-lod); }
.s-rtg-serp { display: grid; gap: 3px; }
.s-rtg-serp-url { color: var(--s-cichy-noc); }
.s-rtg-serp-t { font-family: var(--f-display); font-size: 0.9375rem; font-weight: 500; line-height: 1.35; color: var(--s-holo); }

.s-rtg-red { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--s-linia-noc); }
.s-rtg-red-wstep { margin: 0 4px 10px; font-size: 0.8125rem; line-height: 1.55; color: var(--s-cichy-noc); }
.s-rtg-red li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 3px 12px; padding: 11px 12px; border-radius: 14px; border: 1px dashed var(--s-linia-noc-mocna); }
.s-rtg-red li + li { margin-top: 6px; }
.s-rtg-red .s-rtg-stan { background: rgba(238, 247, 252, 0.08); color: var(--s-tekst-noc); }
.s-rtg-red .s-rtg-stan svg { width: 15px; height: 15px; stroke-width: 1.8; }
.s-rtg-red-tag { margin-left: 6px; font-weight: 500; color: var(--s-cichy-noc); }

.s-rtg-stopka { margin-top: 22px; display: grid; gap: 14px; justify-items: start; font-size: 0.8125rem; line-height: 1.55; color: var(--s-cichy-noc); }
.s-rtg-stopka a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--r-pigulka);
  background: var(--s-holo); color: var(--s-tusz); font-size: 0.9375rem; font-weight: 600; white-space: nowrap;
  transition: background-color var(--d-srednio) var(--e-out);
}
.s-rtg-stopka a svg { width: 18px; height: 18px; }
@media (hover: hover) { .s-rtg-stopka a:hover { background: var(--s-lod); } }

/* telefon i tablet: arkusz od dołu; po wyborze kontroli zwija się do paska */
@media (max-width: 1139px) {
  .s-rtg {
    top: auto; left: 8px; right: 8px; bottom: 8px; width: auto;
    max-height: min(80svh, 720px); border-radius: 22px;
    transform: translateY(calc(100% + 24px));
  }
  .s-rtg.is-otwarty { transform: none; }
  .s-rtg.is-otwarty.is-zwiniety { transform: translateY(calc(100% + 8px - var(--rtg-pasek, 128px))); }
  .s-rtg-rozwin { display: grid; }
  .s-rtg.is-zwiniety .s-rtg-rozwin svg { transform: rotate(180deg); }
  .s-rtg::before { content: ""; position: absolute; left: 50%; top: 6px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--s-linia-noc-mocna); }
  .s-rtg-glowa { padding-top: 16px; }
}

/* pływający przycisk rentgena (gdy przycisk z nagłówka zniknie z ekranu) */
.s-rtg-plywak {
  position: fixed; right: 84px; bottom: 20px; z-index: 90;
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px 0 8px;
  border-radius: var(--r-pigulka);
  background: rgba(7, 16, 26, 0.94); /* --s-noc-2 */
  border: 1px solid rgba(108, 216, 255, 0.4); /* --s-holo */
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--s-bialy); font-weight: 600; font-size: 0.9375rem; white-space: nowrap;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.8);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity var(--d-wolno) var(--e-out), transform var(--d-wolno) var(--e-out), border-color var(--d-srednio) var(--e-out);
}
.s-rtg-plywak.is-on { opacity: 1; transform: none; pointer-events: auto; }
.s-rtg-plywak-ik { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--s-holo); color: var(--s-tusz); }
.s-rtg-plywak-ik svg { width: 18px; height: 18px; }
@media (hover: hover) { .s-rtg-plywak:hover { border-color: var(--s-holo); } }
@media (max-width: 400px) { .s-rtg-plywak { right: 80px; padding-right: 14px; } .s-rtg-plywak-wynik { display: none; } }

/* zaznaczenia w tekście */
.s-rtg-cel {
  border-radius: 8px;
  box-shadow: 0 0 0 2px var(--s-holo-tusz), 0 0 0 8px rgba(46, 143, 208, 0.14); /* --s-holo-2 */
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  animation: s-rtg-zaznacz 0.6s var(--e-out) both;
}
.s-art-glowa .s-rtg-cel { box-shadow: 0 0 0 2px var(--s-holo), 0 0 0 8px rgba(108, 216, 255, 0.16); }
@keyframes s-rtg-zaznacz { from { box-shadow: 0 0 0 2px transparent, 0 0 0 8px transparent; } }
::highlight(s-rtg) { background-color: rgba(108, 216, 255, 0.5); color: var(--s-tusz); } /* --s-holo */

/* =========================================================================
   6. STRONA BLOGA /blog/
   ========================================================================= */
.s-blog-glowa h1 { font-size: var(--t-hero); line-height: 1.02; letter-spacing: -0.035em; color: var(--s-bialy); }
.s-blog-glowa .s-lead { max-width: 58ch; }
.s-blog-papier { background: var(--s-papier-2); }
.s-blog-naglowek { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: clamp(20px, 1rem + 1vw, 32px); }
.s-blog-naglowek h2 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem); line-height: 1.12; letter-spacing: -0.025em; }
.s-blog-naglowek h2 .s-em { font-weight: 600; }
.s-blog-naglowek p { font-size: 0.9375rem; color: var(--s-cichy); }

.s-blog-karta {
  display: grid; grid-template-columns: minmax(0, 1fr);
  border-radius: var(--okno-promien); overflow: hidden;
  background: var(--s-papier); border: 1px solid var(--s-linia);
  box-shadow: 0 44px 90px -56px rgba(7, 17, 26, 0.5); /* --s-tusz */
}
.s-blog-karta-okladka { position: relative; display: block; overflow: hidden; background: var(--s-noc-2); }
.s-blog-karta-okladka img { width: 100%; height: auto; transition: transform 0.9s var(--e-out); }
@media (hover: hover) { .s-blog-karta:hover .s-blog-karta-okladka img { transform: scale(1.02); } }
.s-blog-karta-tresc {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px clamp(32px, 4vw, 72px);
  padding: clamp(24px, 1rem + 2.2vw, 52px);
}
.s-blog-karta-glowna, .s-blog-karta-bok { display: grid; align-content: start; justify-items: start; gap: 16px; min-width: 0; }
.s-blog-karta-bok { padding-left: clamp(24px, 2.4vw, 40px); border-left: 1px solid var(--s-linia); gap: 18px; }
.s-blog-karta-et { display: inline-flex; align-items: center; gap: 10px; font-size: 0.875rem; font-weight: 600; color: var(--s-holo-tusz); }
.s-blog-karta-et svg { width: 20px; height: 20px; --sz1: #1A6FA8; --sz2: #2E8FD0; --sz3: #6E5F35; }
.s-blog .s-blog-karta h3 { max-width: 22ch; font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.5rem); line-height: 1.12; letter-spacing: -0.025em; font-weight: 400; }
.s-blog-karta h3 a { color: inherit; background: linear-gradient(currentColor, currentColor) left bottom / 0 1.5px no-repeat; transition: background-size var(--d-wolno) var(--e-out); }
@media (hover: hover) { .s-blog-karta h3 a:hover { background-size: 100% 1.5px; } }
.s-blog-karta-lead { max-width: 60ch; font-size: 1.0625rem; line-height: 1.65; color: var(--s-tekst); }
.s-blog-karta-meta { display: grid; gap: 8px; font-size: 0.9375rem; color: var(--s-cichy); }
.s-blog-karta-meta li { display: inline-flex; align-items: center; gap: 10px; }
.s-blog-karta-meta svg { width: 17px; height: 17px; color: var(--s-holo-tusz); }
.s-blog-karta-tagi { display: flex; flex-wrap: wrap; gap: 8px; }
.s-blog-karta-tagi li { padding: 5px 12px; border-radius: var(--r-pigulka); background: var(--s-papier-2); border: 1px solid var(--s-linia); font-size: 0.8125rem; font-weight: 500; color: var(--s-tekst); }
.s-blog-karta .s-btn { margin-top: 4px; }
@media (max-width: 860px) {
  .s-blog-karta-tresc { grid-template-columns: minmax(0, 1fr); }
  .s-blog-karta-bok { padding: 22px 0 0; border-left: 0; border-top: 1px solid var(--s-linia); }
  .s-blog-karta-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; }
}

.s-blog-wkrotce {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 20px 24px;
  margin-top: 20px; padding: clamp(22px, 1rem + 1vw, 30px);
  border-radius: var(--r-karta); background: var(--s-papier); border: 1px dashed var(--s-linia-mocna);
}
.s-blog-wkrotce-ik { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: rgba(46, 143, 208, 0.12); color: var(--s-holo-tusz); }
.s-blog-wkrotce-ik svg { width: 26px; height: 26px; }
.s-blog .s-blog-wkrotce h2 { font-size: 1.25rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.s-blog-wkrotce p { margin-top: 4px; font-size: 1rem; line-height: 1.6; color: var(--s-tekst); }
@media (max-width: 767px) {
  .s-blog-wkrotce { grid-template-columns: minmax(0, 1fr); }
  .s-blog-wkrotce .s-btn-obrys { width: 100%; justify-content: center; padding: 0 16px; font-size: 0.9375rem; }
}


/* ===== dodatek: trasa.css ===== */
/* TRASA — „sznurek” prowadzący klienta przez stronę główną (lejek: problem → rozwiązanie → jak działa →
   wzorcowy artykuł → co zyskujesz → zapis).
   • .s-trasa — pigułka u dołu ekranu: kreski etapów (bieżący dłuższy, miniony przygaszony) + „Dalej: …”.
     Etap z wzorcowym artykułem ma kolor piasku — to cel trasy; gdy klient do niego dojdzie, pigułka prowadzi prosto do artykułu.
   • .s-most — przejście między etapami w treści (po kontroli jakości → do wzorcowego artykułu).
   • .s-hero-dowod — link do artykułu pod przyciskami hero, dla tych, którzy chcą najpierw zobaczyć efekt.
   rgba: 7,16,26 = --s-noc-2 · 3,7,13 = --s-noc · 160,220,255 = linia nocy · 108,216,255 = --s-holo · 210,194,154 = --s-piasek */

/* ---------- pigułka trasy ---------- */
.s-trasa {
  position: fixed; left: 50%; bottom: 20px; z-index: 88;
  display: flex; align-items: center; gap: 14px;
  max-width: calc(100% - 32px);
  padding: 6px 6px 6px 18px;
  border-radius: 40px;
  background: rgba(7, 16, 26, 0.88);
  border: 1px solid var(--s-linia-noc-mocna);
  box-shadow: 0 18px 40px -18px rgba(3, 7, 13, 0.85);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden; transform: translate(-50%, 16px);
  transition: opacity var(--d-wolno) var(--e-out), transform var(--d-wolno) var(--e-out), visibility 0s linear var(--d-wolno);
}
.s-trasa.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.s-trasa [hidden] { display: none !important; }

.s-trasa-etapy { display: flex; align-items: center; gap: 4px; padding-right: 14px; border-right: 1px solid var(--s-linia-noc); }
.s-trasa-etapy a { position: relative; display: block; width: 14px; height: 28px; transition: width var(--d-wolno) var(--e-out); }
.s-trasa-etapy a::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px;
  background: rgba(160, 220, 255, 0.2);
  transition: background-color var(--d-wolno) var(--e-out);
}
.s-trasa-etapy .is-za a::before { background: rgba(108, 216, 255, 0.5); }
.s-trasa-etapy .is-teraz a { width: 30px; }
.s-trasa-etapy .is-teraz a::before { background: var(--s-holo); }
.s-trasa-etapy .s-trasa-cel a::before { background: rgba(210, 194, 154, 0.55); }
.s-trasa-etapy .s-trasa-cel.is-teraz a::before { background: var(--s-piasek); }
@media (hover: hover) { .s-trasa-etapy a:hover::before { background: var(--s-lod); } }

.s-trasa-dalej {
  display: inline-flex; align-items: center; gap: 12px; min-width: 0;
  font-family: var(--f-display); font-size: 0.9375rem; font-weight: 600; line-height: 1.2;
  color: var(--s-bialy);
}
.s-trasa-tekst { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-trasa-pre { font-weight: 400; color: var(--s-cichy-noc); }
.s-trasa-pole {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--s-holo); color: var(--s-tusz);
  transition: background-color var(--d-wolno) var(--e-out), transform var(--d-srednio) var(--e-out);
}
.s-trasa-pole svg { width: 18px; height: 18px; }
.s-trasa.is-cel .s-trasa-pole { background: var(--s-piasek); }
@media (hover: hover) {
  .s-trasa-dalej:hover .s-trasa-pole { transform: translateY(2px); }
  .s-trasa-artykul:hover .s-trasa-pole { transform: translateX(3px); }
}

/* telefon: bez kresek, pigułka obok przycisku „na górę” */
@media (max-width: 640px) {
  .s-trasa {
    left: 16px; right: 84px; max-width: none;
    padding-left: 18px; gap: 0;
    transform: translateY(16px);
  }
  .s-trasa.is-on { transform: none; }
  .s-trasa-etapy { display: none; }
  .s-trasa-dalej { flex: 1; justify-content: space-between; }
}

/* ---------- most między etapami ---------- */
.s-most-wrap { display: grid; justify-items: center; padding-top: clamp(28px, 1rem + 3vw, 56px); }
.s-most-wrap::before {
  /* nitka trasy schodząca do mostu */
  content: ""; width: 1px; height: clamp(36px, 6vh, 64px); margin-bottom: 14px;
  background: linear-gradient(to bottom, rgba(210, 194, 154, 0), rgba(210, 194, 154, 0.65));
}
.s-most {
  display: inline-flex; align-items: center; gap: 18px; max-width: 100%;
  padding: 8px 8px 8px 24px;
  border-radius: 40px;
  border: 1px solid rgba(210, 194, 154, 0.38);
  background: rgba(210, 194, 154, 0.07);
  color: var(--s-bialy); text-align: left;
  transition: background-color var(--d-wolno) var(--e-out), border-color var(--d-wolno) var(--e-out);
}
.s-most-tekst { display: grid; gap: 2px; min-width: 0; }
.s-most-pyt { font-size: 0.9375rem; line-height: 1.4; color: var(--s-cichy-noc); }
.s-most b { font-family: var(--f-display); font-size: 1.0625rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.s-most-pole {
  flex: none; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--s-piasek); color: var(--s-tusz);
  transition: transform var(--d-srednio) var(--e-out);
}
.s-most-pole svg { width: 20px; height: 20px; }
@media (hover: hover) {
  .s-most:hover { background: rgba(210, 194, 154, 0.13); border-color: rgba(210, 194, 154, 0.6); }
  .s-most:hover .s-most-pole { transform: translateY(3px); }
}
@media (max-width: 640px) {
  .s-most { width: 100%; border-radius: 24px; padding: 16px 10px 16px 18px; gap: 12px; }
}

/* ---------- hero: link do wzorcowego artykułu ---------- */
.s-hero-dowod { flex-basis: 100%; margin-top: 6px; font-size: 0.9375rem; line-height: 1.5; color: var(--s-cichy-noc); }
.s-hero-dowod a {
  color: var(--s-bialy); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  text-decoration-color: rgba(210, 194, 154, 0.65);
  transition: text-decoration-color var(--d-srednio) var(--e-out);
}
@media (hover: hover) { .s-hero-dowod a:hover { text-decoration-color: var(--s-piasek); } }
@media (max-width: 640px) { .s-hero-dowod { text-align: center; } }

@media (prefers-reduced-motion: reduce) {
  .s-trasa, .s-trasa-etapy a, .s-trasa-etapy a::before, .s-trasa-pole, .s-most, .s-most-pole { transition: none; }
}