/* ============================================================
   NeodyX — system wizualny v3 „premium”
   Kolejność: fonty → tokeny → reset → typografia → układ
              → komponenty → nagłówek/stopka → sekcje → strony
              → responsywność → ruch → druk
   Wszystkie kolory i odstępy idą przez zmienne. Ciemny pas
   (.band--dark) podmienia role kolorów, nie komponenty.
   ============================================================ */

/* ---------- 0. Fonty (hostowane lokalnie — bez Google, bez cookies) ---------- */

@font-face {
  font-family: "Geist";
  src: url("assets/fonts/Geist.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("assets/fonts/GeistMono.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("assets/fonts/InstrumentSerif-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("assets/fonts/InstrumentSerif-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. Tokeny ---------- */

:root {
  /* Barwy marki */
  --c-ink:            #0A0A0A;
  --c-ink-2:          #111111;
  --c-ink-3:          #181818;
  --c-graphite:       #2C2C2C;
  --c-accent:         #E5342A;   /* czerwień marki                       */
  --c-accent-btn:     #D42F26;   /* przycisk: biały tekst ≥ 4.5:1         */
  --c-accent-strong:  #C82A20;   /* tekst czerwony na jasnym              */
  --c-accent-bright:  #F0473C;   /* tekst czerwony na ciemnym             */
  --c-accent-deep:    #9E1B14;

  /* Neutralne ciepłe */
  --c-paper:          #F4F3F1;
  --c-paper-2:        #EDEBE7;
  --c-paper-3:        #E4E1DC;
  --c-card:           #FBFAF8;
  --c-line:           #DCD9D4;
  --c-line-2:         #C9C5BF;
  --c-muted:          #5E5B56;
  --c-faint:          #6F6C67;
  --c-muted-dark:     #A09D98;
  --c-faint-dark:     #8A8782;
  --c-white:          #FFFFFF;

  /* Role (komponenty czytają tylko te) */
  --bg:          var(--c-paper);
  --bg-raised:   var(--c-paper-2);
  --bg-card:     var(--c-card);
  --text:        var(--c-ink);
  --text-soft:   var(--c-muted);
  --text-faint:  var(--c-faint);
  --line:        var(--c-line);
  --line-strong: var(--c-line-2);
  --accent-text: var(--c-accent-strong);
  --focus:       var(--c-accent-strong);
  --glass:       rgba(255, 255, 255, 0.6);
  --shadow-card: 0 1px 0 rgba(10,10,10,.04), 0 12px 32px -18px rgba(10,10,10,.18);

  /* Typografia */
  --font:  "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:  "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;

  --t-2xs:  0.75rem;     /* 12 */
  --t-xs:   0.8125rem;   /* 13 */
  --t-sm:   0.9375rem;   /* 15 */
  --t-base: 1.0625rem;   /* 17 */
  --t-lg:   clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --t-xl:   clamp(1.3rem, 1.15rem + 0.6vw, 1.65rem);
  --t-2xl:  clamp(1.6rem, 1.3rem + 1.3vw, 2.35rem);
  --t-3xl:  clamp(2rem, 1.45rem + 2.3vw, 3.4rem);
  --t-4xl:  clamp(2.45rem, 1.5rem + 3.9vw, 4.9rem);
  --t-5xl:  clamp(2.85rem, 1.2rem + 6.4vw, 7.4rem);

  --lh-tight: 0.98;
  --lh-head:  1.08;
  --lh-body:  1.62;

  /* Odstępy — baza 4px */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.25rem;  --s-6: 1.5rem;  --s-8: 2rem;    --s-10: 2.5rem;
  --s-12: 3rem;    --s-16: 4rem;   --s-20: 5rem;   --s-24: 6rem;
  --s-32: 8rem;    --s-40: 10rem;

  --section-y: clamp(4.5rem, 3rem + 6vw, 9rem);
  --gutter:    clamp(1rem, 0.4rem + 3vw, 4.5rem);
  --col-gap:   clamp(1rem, 0.5rem + 1.5vw, 2rem);
  --header-h:  4.25rem;

  --measure:   62ch;
  --container: 90rem;

  /* Kształty i ruch */
  --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px;
  --speed:    160ms;
  --ease:     cubic-bezier(0.2, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --speed-in: 800ms;
  --stagger:  70ms;
  --c-glow:   rgba(229, 52, 42, 0.16);
}

/* Ciemny pas — zmienia role, nie komponenty */
.band--dark {
  --bg:          var(--c-ink);
  --bg-raised:   var(--c-ink-3);
  --bg-card:     rgba(255, 255, 255, 0.035);
  --text:        var(--c-paper);
  --text-soft:   var(--c-muted-dark);
  --text-faint:  var(--c-faint-dark);
  --line:        rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.22);
  --accent-text: var(--c-accent-bright);
  --focus:       var(--c-paper);
  --glass:       rgba(255, 255, 255, 0.04);
  --shadow-card: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 48px -24px rgba(0,0,0,.6);

  background-color: var(--bg);
  color: var(--text);
}

/* ---------- 2. Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-6));
  background: var(--c-ink);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  font-feature-settings: "ss01" 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
::selection { background: var(--c-accent); color: var(--c-white); }

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color var(--speed) var(--ease), text-decoration-color var(--speed) var(--ease);
}
a:hover { text-decoration-color: currentColor; }

/* ---------- 3. Typografia ---------- */

h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: var(--lh-head);
  text-wrap: balance;
}
h1 { font-size: var(--t-4xl); line-height: var(--lh-tight); letter-spacing: -0.045em; }
h2 { font-size: var(--t-3xl); letter-spacing: -0.04em; line-height: 1.04; }
h3 { font-size: var(--t-xl); letter-spacing: -0.025em; line-height: 1.18; }
h4 { font-size: var(--t-base); font-weight: 600; letter-spacing: -0.01em; }

p { max-width: var(--measure); text-wrap: pretty; }
strong, b { font-weight: 600; }

/* Akcent szeryfowy — kursywa w czerwieni lub w kolorze tekstu */
.serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  font-size: 1.08em;
  line-height: 0.9;
}
.accent { color: var(--accent-text); }

.lede {
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--text-soft);
  max-width: 58ch;
  letter-spacing: -0.005em;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--mono);
  font-size: var(--t-2xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: var(--s-5);
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 18%, transparent);
  flex: none;
}
.eyebrow--plain::before { display: none; }

.soft  { color: var(--text-soft); }
.faint { color: var(--text-faint); }
.mono  { font-family: var(--mono); letter-spacing: -0.01em; }
.text-sm { font-size: var(--t-sm); }
.text-xs { font-size: var(--t-xs); }
.nowrap { white-space: nowrap; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Tekst ciągły: artykuły, polityka, podstrony */
.prose { font-size: var(--t-base); }
.prose > * + * { margin-top: var(--s-5); }
.prose h2 { font-size: var(--t-2xl); margin-top: var(--s-16); scroll-margin-top: calc(var(--header-h) + var(--s-8)); }
.prose h3 { font-size: var(--t-xl); margin-top: var(--s-10); }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 0; }
.prose ul > li, .prose ol > li { position: relative; padding-left: var(--s-6); max-width: var(--measure); }
.prose ul > li + li, .prose ol > li + li { margin-top: var(--s-2); }
.prose ul > li::before {
  content: ""; position: absolute; left: 2px; top: 0.72em; top: round(nearest, 0.78em, 1px);
  width: 9px; height: 2px; background: var(--c-accent);
}
.prose ol { counter-reset: li; }
.prose ol > li { counter-increment: li; }
.prose ol > li::before {
  content: counter(li) "."; position: absolute; left: 0; top: 0;
  font-family: var(--mono); font-size: 0.85em; color: var(--accent-text); line-height: 1.9;
}
.prose a { color: var(--accent-text); text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.prose a.btn { color: var(--btn-fg); text-decoration: none; }
.callout { --accent-text: var(--c-accent-bright); }
.prose blockquote {
  border-left: 2px solid var(--c-accent);
  padding: var(--s-2) 0 var(--s-2) var(--s-6);
  font-size: var(--t-lg);
  color: var(--text);
}
.prose table { font-size: var(--t-sm); margin-block: var(--s-8); }
.prose th, .prose td { text-align: left; padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-weight: 600; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-soft); font-family: var(--mono); }
.prose .note { margin-top: var(--s-8); }

/* ---------- 4. Układ ---------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 58rem; }

.grid-12 { display: grid; gap: var(--s-12); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * 0.62); }
.section--raised { background: var(--bg-raised); }
.section:not(.band--dark):not(.section--raised) + .section:not(.band--dark):not(.section--raised) { padding-top: 0; }

.stack-2  > * + * { margin-top: var(--s-2); }
.stack-3  > * + * { margin-top: var(--s-3); }
.stack-4  > * + * { margin-top: var(--s-4); }
.stack-6  > * + * { margin-top: var(--s-6); }
.stack-8  > * + * { margin-top: var(--s-8); }
.stack-12 > * + * { margin-top: var(--s-12); }

.mt-2 { margin-top: var(--s-2); }   .mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }   .mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }   .mt-12 { margin-top: var(--s-12); }
.mt-16 { margin-top: var(--s-16); }

.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

.cols { display: grid; gap: var(--s-8); }

/* Elementy siatek nie mogą rozpychać kolumn szerokimi dziećmi (tabele, zakładki) */
.hero__inner > *, .grid-12 > *, .cols > *, .demo-split > *, .bento > *,
.cta-band__inner > *, .page-head__inner > *, .calc > *, .founder > *,
.situations > *, .stats > *, .principles > *, .timeline > * { min-width: 0; }

.section-head { display: grid; gap: var(--s-6); margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.section-head h2 { max-width: 20ch; }
.section-head .lede { max-width: 52ch; }

/* ---------- 5. Komponenty ---------- */

/* 5.1 Przyciski */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--line-strong);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: 3.125rem;
  padding: 0 var(--s-6);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 240ms var(--ease), border-color 240ms var(--ease),
              color 240ms var(--ease), transform 240ms var(--ease-out), box-shadow 240ms var(--ease);
}
.btn:active { transform: translateY(1px) scale(0.99); }

.btn__arrow {
  display: inline-grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  margin-right: calc(var(--s-3) * -1 + 2px);
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 14%, transparent);
  overflow: hidden;
  flex: none;
}
.btn__arrow svg { width: 13px; height: 13px; transition: transform 320ms var(--ease-out); }
.btn:hover .btn__arrow svg { animation: nudge 520ms var(--ease-out); }
@keyframes nudge {
  0% { transform: translateX(0); } 45% { transform: translateX(140%); }
  46% { transform: translateX(-140%); } 100% { transform: translateX(0); }
}

.btn--primary {
  --btn-bg: var(--c-accent-btn);
  --btn-fg: var(--c-white);
  --btn-bd: var(--c-accent-btn);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 10px 24px -12px rgba(212, 47, 38, 0.7);
}
.btn--primary:hover { --btn-bg: var(--c-ink); --btn-bd: var(--c-ink); box-shadow: 0 10px 24px -14px rgba(10,10,10,.6); }
.band--dark .btn--primary:hover { --btn-bg: #BE271F; --btn-bd: #BE271F; box-shadow: 0 0 0 6px rgba(229,52,42,.16), 0 14px 34px -12px rgba(229,52,42,.55); }

.btn--ghost:hover { --btn-bd: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }

.btn--light { --btn-bg: var(--c-paper); --btn-fg: var(--c-ink); --btn-bd: var(--c-paper); }
.btn--light:hover { --btn-bg: var(--c-white); }

.btn--sm { min-height: 2.5rem; padding: 0 var(--s-4); font-size: var(--t-xs); gap: var(--s-2); }
.btn--sm .btn__arrow { width: 1.35rem; height: 1.35rem; margin-right: -6px; }
.btn--lg { min-height: 3.5rem; padding: 0 var(--s-8); font-size: var(--t-base); }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); max-width: none; align-items: center; }

/* 5.2 Link ze strzałką */

.arrow-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  font-weight: 500;
  text-decoration: none;
  color: var(--text);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: color var(--speed) var(--ease), background-size 360ms var(--ease-out);
  padding-bottom: 2px;
}
.arrow-link::after { content: "→"; transition: transform 260ms var(--ease-out); }
.arrow-link:hover { color: var(--accent-text); background-size: 100% 1px; }
.arrow-link:hover::after { transform: translateX(4px); }

/* 5.3 Chip / znacznik */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.35rem 0.8rem 0.35rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: var(--t-xs);
  color: var(--text-soft);
  max-width: 100%;
}
.chip b { color: var(--text); font-weight: 500; }
.chip__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #3DDC84;
  box-shadow: 0 0 0 0 rgba(61, 220, 132, .6);
  animation: ping 2.4s var(--ease) infinite;
  flex: none;
}
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(61, 220, 132, .55); }
  70%  { box-shadow: 0 0 0 8px rgba(61, 220, 132, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); }
}

.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--text) 7%, transparent);
  color: var(--text-soft);
  line-height: 1.4;
}
.tag--red { background: color-mix(in srgb, var(--c-accent) 14%, transparent); color: #A82219; }
.band--dark .tag--red { color: #FF8A80; }
.tag--green { background: rgba(61, 220, 132, .14); color: #146C3E; }
.band--dark .tag--green { color: #5BE39A; }

/* 5.4 Karty */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: border-color 240ms var(--ease), transform 360ms var(--ease-out), box-shadow 360ms var(--ease);
}
a.card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.card__num {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--accent-text);
}
.card__text { color: var(--text-soft); font-size: var(--t-sm); max-width: none; }
.card .arrow-link { margin-top: auto; padding-top: var(--s-4); align-self: flex-start; }

/* 5.5 Indeks — lista numerowana z linią */

.index > li { border-top: 1px solid var(--line); }
.index > li:last-child { border-bottom: 1px solid var(--line); }
.index a {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  align-items: baseline;
  gap: var(--s-4);
  padding-block: var(--s-4);
  text-decoration: none;
  transition: color var(--speed) var(--ease), padding-left 300ms var(--ease-out);
}
.index a:hover { color: var(--accent-text); padding-left: var(--s-3); }
.index__num { font-family: var(--mono); font-size: var(--t-xs); color: var(--accent-text); }
.index__name { font-weight: 500; }
.index a::after { content: "→"; color: var(--text-soft); transition: transform 260ms var(--ease-out); }
.index a:hover::after { color: inherit; transform: translateX(4px); }

/* 5.6 Kroki */

.steps { counter-reset: step; }
.step { position: relative; padding-top: var(--s-8); border-top: 1px solid var(--line); }
.step::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 48px; height: 2px;
  background: var(--c-accent);
}
.step__num {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--accent-text);
  margin-bottom: var(--s-6);
}
.step h3 { margin-bottom: var(--s-3); }
.step p { color: var(--text-soft); }

/* 5.7 Listy */

.list-plain > li + li { margin-top: var(--s-3); }

.list-mark > li { position: relative; padding-left: var(--s-6); max-width: var(--measure); }
.list-mark > li + li { margin-top: var(--s-3); }
.list-mark > li::before {
  content: "";
  position: absolute; left: 1px; top: 0.74em; top: round(nearest, 0.78em, 1px);
  width: 9px; height: 2px;
  background: var(--c-accent);
}

.list-check > li { position: relative; padding-left: 1.9rem; max-width: var(--measure); }
.list-check > li + li { margin-top: var(--s-3); }
.list-check > li::before {
  content: "";
  position: absolute; left: 0; top: 0.28em;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c-accent) 14%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.5L12 5.5' fill='none' stroke='%23E5342A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat;
}

.list-lines > li {
  padding-block: var(--s-5);
  border-top: 1px solid var(--line);
  max-width: var(--measure);
}
.list-lines > li:last-child { border-bottom: 1px solid var(--line); }
.list-lines strong { display: block; margin-bottom: var(--s-1); }

/* Lista „czego nie robi” — z przekreślonym znakiem */
.list-no > li { position: relative; padding: var(--s-5) 0 var(--s-5) 2.25rem; border-top: 1px solid var(--line); max-width: var(--measure); }
.list-no > li:last-child { border-bottom: 1px solid var(--line); }
.list-no > li::before {
  content: "";
  position: absolute; left: 0; top: calc(var(--s-5) + 0.2em);
  width: 1.25rem; height: 1.25rem;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: linear-gradient(135deg, transparent calc(50% - 0.75px), var(--text-faint) calc(50% - 0.75px), var(--text-faint) calc(50% + 0.75px), transparent calc(50% + 0.75px));
}

/* 5.8 Panel i nota */

.panel {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.panel > * + * { margin-top: var(--s-4); }

.panel--line {
  border-left: 2px solid var(--c-accent);
  padding: var(--s-1) 0 var(--s-1) var(--s-6);
}

.note {
  max-width: var(--measure);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--text-soft);
}
.note--box {
  padding: var(--s-5) var(--s-6);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
}

/* Notatki pod treścią: pasek na całą szerokość i karty w równej siatce */
.strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4) var(--s-8);
  padding: var(--s-5) var(--s-6);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  font-size: var(--t-sm);
  color: var(--text-soft);
}
.strip p { max-width: 70ch; }
.strip strong { color: var(--text); }
.strip .arrow-link { flex: none; }
.notes { display: grid; gap: var(--s-4); }
.note-card {
  display: grid;
  gap: var(--s-2);
  align-content: start;
  padding: var(--s-6);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  font-size: var(--t-sm);
  color: var(--text-soft);
}
.note-card p { max-width: none; }
.note-card__title { font-size: var(--t-base); font-weight: 600; color: var(--text); letter-spacing: -0.015em; }
.note-card .arrow-link { margin-top: var(--s-2); }

/* 5.9 FAQ */

.qa-group { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); interpolate-size: allow-keywords; }
.qa > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-6);
  padding-block: var(--s-5);
  font-size: var(--t-lg);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
  transition: color var(--speed) var(--ease);
}
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary::after {
  content: "";
  flex: none;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(var(--text), var(--text)) center / 11px 1.5px no-repeat,
    linear-gradient(var(--text), var(--text)) center / 1.5px 11px no-repeat;
  transition: transform 320ms var(--ease-out), background-color 240ms var(--ease), border-color 240ms var(--ease);
}
.qa[open] > summary::after { transform: rotate(45deg); background-color: color-mix(in srgb, var(--c-accent) 12%, transparent); border-color: transparent; }
.qa > summary:hover { color: var(--accent-text); }
.qa__body { padding: 0 3.5rem var(--s-6) 0; color: var(--text-soft); }
.qa__body > * + * { margin-top: var(--s-3); }
.qa::details-content { block-size: 0; overflow-y: clip; transition: block-size 380ms var(--ease-out), content-visibility 380ms allow-discrete; }
.qa[open]::details-content { block-size: auto; }

/* 5.10 Formularz */

.field { display: block; margin-bottom: var(--s-5); max-width: none; }
.field__label { display: block; font-size: var(--t-sm); font-weight: 500; margin-bottom: var(--s-2); }
.field__hint { display: block; font-size: var(--t-xs); font-weight: 400; color: var(--text-soft); margin-top: 2px; }
.field__opt { font-weight: 400; color: var(--text-faint); }
.input {
  width: 100%;
  min-height: 3.125rem;
  padding: var(--s-3) var(--s-4);
  background: var(--c-white);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.input::placeholder { color: #9A968F; }
.input:hover { border-color: var(--text-soft); }
.input:focus { outline: none; border-color: var(--c-accent-strong); box-shadow: 0 0 0 4px rgba(229, 52, 42, .14); }
textarea.input { min-height: 8.5rem; resize: vertical; line-height: 1.5; }
select.input { appearance: none; background: var(--c-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%235E5B56' stroke-width='1.6'/%3E%3C/svg%3E") right 0.9rem center / 16px no-repeat; padding-right: 2.5rem; }

.choice-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span {
  display: inline-flex; align-items: center; min-height: 2.5rem;
  padding: 0 var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  background: var(--c-white);
  transition: all var(--speed) var(--ease);
}
.choice input:checked + span { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-paper); }
.choice input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.choice:hover span { border-color: var(--text-soft); }

.form-legal { font-size: var(--t-xs); color: var(--text-soft); line-height: 1.55; max-width: 60ch; }
.form-legal a { color: inherit; }
.form-status { font-size: var(--t-sm); margin-top: var(--s-4); }

/* 5.11 Logo */

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  flex: none;
}
.brand__logo { height: 1.9rem; width: auto; overflow: visible; }

/* 5.12 Statystyka */

.stat { display: grid; gap: var(--s-3); align-content: start; }
.stat__value {
  font-size: clamp(2.8rem, 1.8rem + 3.6vw, 5rem);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}
.stat__value .unit { font-size: 0.5em; letter-spacing: -0.02em; margin-left: 0.08em; color: var(--text-soft); }
.stat__label { color: var(--text-soft); max-width: 34ch; }
.stat__source { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.02em; color: var(--text-faint); }
.stat__source a { color: inherit; }

/* ---------- 6. Nagłówek ---------- */

.skip-link {
  position: fixed;
  left: var(--s-4);
  top: var(--s-4);
  z-index: 100;
  padding: var(--s-2) var(--s-4);
  background: var(--c-accent-btn);
  color: var(--c-white);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  text-decoration: none;
  transform: translateY(-300%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  color: var(--c-paper);
  transition: background-color 320ms var(--ease), color 320ms var(--ease), box-shadow 320ms var(--ease), transform 420ms var(--ease-out);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(244, 243, 241, 0.78);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  backdrop-filter: saturate(1.6) blur(18px);
  border-bottom: 1px solid rgba(10, 10, 10, 0.07);
  opacity: 0;
  transition: opacity 320ms var(--ease);
}
.site-header.is-scrolled { color: var(--c-ink); }
.site-header.is-scrolled::before { opacity: 1; }
.site-header.is-hidden { transform: translateY(-100%); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  min-height: var(--header-h);
}

.nav { display: none; }
.nav__list { display: flex; gap: clamp(1rem, 0.2rem + 1.2vw, 1.9rem); }
.nav__list a {
  position: relative;
  font-size: var(--t-sm);
  font-weight: 450;
  text-decoration: none;
  opacity: 0.86;
  padding-block: var(--s-2);
  transition: opacity var(--speed) var(--ease), color var(--speed) var(--ease);
}
.nav__list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1.5px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 320ms var(--ease-out);
}
.nav__list a:hover { opacity: 1; }
.nav__list a:hover::after, .nav__list a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__list a[aria-current="page"] { opacity: 1; }

.site-header__actions { display: flex; align-items: center; gap: var(--s-3); }
.site-header__actions > .btn { display: none; }


/* Menu mobilne */
.menu > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 2.5rem;
  padding: 0 var(--s-4);
  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu__burger { position: relative; display: block; width: 14px; height: 8px; }
.menu__burger::before, .menu__burger::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
  transition: transform 300ms var(--ease-out), top 300ms var(--ease-out);
}
.menu__burger::before { top: 0; }
.menu__burger::after { top: 6.5px; }
.menu[open] .menu__burger::before { top: 3.25px; transform: rotate(45deg); }
.menu[open] .menu__burger::after { top: 3.25px; transform: rotate(-45deg); }

.menu__panel {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 40;
  overflow-y: auto;
  padding: var(--s-6) var(--gutter) var(--s-12);
  background: var(--c-ink);
  color: var(--c-paper);
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  animation: menu-in 420ms var(--ease-out);
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.menu[open] > summary { background: var(--c-paper); color: var(--c-ink); border-color: var(--c-paper); }
.site-header:has(.menu[open]) { color: var(--c-paper); }
.site-header:has(.menu[open])::before { opacity: 1; background: var(--c-ink); border-color: rgba(255,255,255,.08); }
.site-header:has(.menu[open]) .brand { color: var(--c-paper); }

.menu__list { counter-reset: m; }
.menu__list > li { border-bottom: 1px solid rgba(255,255,255,.08); counter-increment: m; }
.menu__list a {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding-block: var(--s-4);
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.2rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  text-decoration: none;
}
.menu__list a::before { content: "0" counter(m); font-family: var(--mono); font-size: var(--t-2xs); color: var(--c-faint-dark); letter-spacing: 0.04em; transform: translateY(-0.5em); }
.menu__list a[aria-current="page"] { color: var(--c-accent-bright); }
.menu__contact { display: grid; gap: var(--s-3); color: var(--c-muted-dark); font-size: var(--t-sm); }
.menu__contact a { color: var(--c-paper); text-decoration: none; font-size: var(--t-lg); font-weight: 500; }
.menu__cta { display: grid; gap: var(--s-3); }

/* ---------- 7. Stopka ---------- */

.site-footer { padding-block: clamp(4rem, 3rem + 4vw, 7rem) var(--s-8); overflow: hidden; }
.site-footer__grid { display: grid; gap: var(--s-12) var(--s-8); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-col--brand { grid-column: 1 / -1; }
.footer-col--brand .brand__logo { height: 2.1rem; }
.footer-tagline { margin-top: var(--s-5); color: var(--text-soft); font-size: var(--t-sm); max-width: 34ch; }
.footer-contact { margin-top: var(--s-6); display: grid; gap: var(--s-2); }
.footer-contact a { font-size: var(--t-lg); font-weight: 500; text-decoration: none; letter-spacing: -0.015em; width: fit-content; }
.footer-contact a:hover { color: var(--c-accent-bright); }
.footer-contact span { font-size: var(--t-xs); color: var(--text-faint); font-family: var(--mono); letter-spacing: 0.02em; }

.footer-col h2 {
  font-family: var(--mono);
  font-size: var(--t-2xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--s-5);
}
.footer-col li + li { margin-top: var(--s-3); }
.footer-col a { text-decoration: none; font-size: var(--t-sm); color: var(--text-soft); }
.footer-col a:hover { color: var(--c-paper); }
.footer-col .brand, .footer-col .brand:hover { color: var(--c-paper); }
@media (max-width: 39.99em) { .site-footer__grid > .footer-col:last-child { grid-column: 1 / -1; } }


.site-footer__bottom {
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-8);
  justify-content: space-between;
  font-size: var(--t-xs);
  color: var(--text-faint);
}
.site-footer__bottom p { max-width: none; }
.site-footer__bottom a { color: var(--text-soft); text-decoration: none; }
.site-footer__bottom a:hover { color: var(--c-paper); }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); }

/* Przyklejony pasek na telefonie */
.mobile-cta {
  position: fixed;
  left: var(--s-4); right: var(--s-4);
  bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  display: grid;
  transform: translateY(calc(100% + 2rem));
  transition: transform 460ms var(--ease-out);
}
.mobile-cta.is-visible { transform: none; }
.mobile-cta .btn { min-height: 3.25rem; box-shadow: 0 16px 36px -12px rgba(10,10,10,.45), 0 10px 24px -12px rgba(212,47,38,.7); }

/* ---------- 8. Sekcje ---------- */

/* 8.1 Ciemny pas: światło za kursorem i ziarno */

.band--dark { position: relative; isolation: isolate; }
.band--dark > .container { position: relative; z-index: 2; }
.band--glow::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background: radial-gradient(36rem circle at var(--mx, 50%) var(--my, 30%), var(--c-glow), transparent 62%);
  /* Przy krawędzi z jasną sekcją światło gaśnie łagodnie; przy ciemnym
     sąsiedzie przechodzi dalej (JS ustawia --glow-top / --glow-bottom). */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,var(--glow-top, 0)) 0, #000 7rem, #000 calc(100% - 7rem), rgba(0,0,0,var(--glow-bottom, 0)) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,var(--glow-top, 0)) 0, #000 7rem, #000 calc(100% - 7rem), rgba(0,0,0,var(--glow-bottom, 0)) 100%);
  opacity: 0;
  transition: opacity 500ms var(--ease);
}
@media (hover: hover) { .band--glow.is-lit::before { opacity: 1; } }

.grain::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.4'/></svg>");
  background-size: 140px 140px;
}

/* 8.2 Hero strony głównej */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: calc(var(--header-h) + clamp(2.5rem, 1rem + 5vw, 6rem)) clamp(3.5rem, 2rem + 5vw, 7rem);
  background:
    radial-gradient(70rem 42rem at 92% -12%, rgba(229, 52, 42, 0.2), transparent 62%),
    radial-gradient(40rem 22rem at 0% 62%, rgba(229, 52, 42, 0.08), transparent 70%),
    var(--c-ink);
}
.hero__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 76px 76px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 35%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 60% at 70% 35%, #000 0%, transparent 72%);
}
.hero__orb {
  position: absolute; z-index: 0; pointer-events: none;
  width: 44rem; height: 44rem;
  right: -12rem; top: -14rem;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(229,52,42,.34), rgba(229,52,42,0) 62%);
  filter: blur(40px);
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-6rem, 5rem, 0) scale(1.12); }
}
.hero > .container { position: relative; z-index: 2; }

.hero__inner { display: grid; gap: clamp(3rem, 2rem + 3vw, 4.5rem); align-items: center; }
.hero__copy { container-type: inline-size; min-width: 0; }
.hero h1 {
  font-size: var(--t-5xl);
  font-size: min(7.4rem, 13.6cqi);
  line-height: 0.94;
  letter-spacing: -0.052em;
  font-weight: 600;
  margin-top: var(--s-8);
}
.hero h1 .serif { font-size: 1.1em; letter-spacing: -0.02em; padding-right: 0.06em; }
.hero .lede { margin-top: var(--s-8); }
.hero .btn-row { margin-top: var(--s-10); }

.hero__proof {
  margin-top: var(--s-10);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-8);
  font-size: var(--t-sm);
  color: var(--text-soft);
}
.hero__proof li { display: inline-flex; align-items: center; gap: var(--s-2); }
.hero__proof svg { width: 16px; height: 16px; color: var(--c-accent-bright); flex: none; }

/* Rotujące słowo */
.lines .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.06em; }
.lines .line > span { display: block; }
.rotator {
  display: inline-grid;
  vertical-align: bottom;
  overflow: hidden;
  height: 1.08em;
  padding-bottom: 0.1em;
  box-sizing: content-box;
}
.rotator__item {
  grid-area: 1 / 1;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 620ms var(--ease-out), opacity 380ms var(--ease);
  white-space: nowrap;
}
.rotator__item:first-child { transform: none; opacity: 1; }
.js .rotator__item:first-child:not(.is-in) { transform: translateY(110%); opacity: 0; }
.rotator__item.is-in  { transform: none; opacity: 1; }
.rotator__item.is-out { transform: translateY(-110%); opacity: 0; }

/* 8.3 Konsola agenta */

.console {
  position: relative;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 40px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.4);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: var(--c-paper);
  overflow: hidden;
  font-size: var(--t-sm);
}
.console::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(30rem 16rem at 100% 0%, rgba(229,52,42,.16), transparent 70%);
}
.console__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-family: var(--mono);
  font-size: var(--t-2xs);
  color: var(--c-faint-dark);
}
.console__dots { display: flex; gap: 6px; }
.console__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.14); }
.console__dots i:first-child { background: rgba(229,52,42,.8); }
.console__title b { color: var(--c-paper); font-weight: 500; }
.console__status { margin-left: auto; display: inline-flex; align-items: center; gap: var(--s-2); color: #5BE39A; }
.console__status .chip__dot { width: 6px; height: 6px; }

.console__tabs {
  position: relative;
  display: flex;
  gap: 2px;
  padding: var(--s-2) var(--s-3) 0;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.console__tabs::-webkit-scrollbar { display: none; }
.console__tab {
  position: relative;
  flex: none;
  padding: var(--s-2) var(--s-3) var(--s-3);
  border: 0;
  background: none;
  font-size: var(--t-xs);
  color: var(--c-faint-dark);
  white-space: nowrap;
  transition: color var(--speed) var(--ease);
}
.console__tab::after {
  content: ""; position: absolute; left: var(--s-3); right: var(--s-3); bottom: -1px; height: 2px;
  background: var(--c-accent); transform: scaleX(0); transition: transform 360ms var(--ease-out);
}
.console__tab:hover { color: var(--c-paper); }
.console__tab[aria-selected="true"] { color: var(--c-paper); }
.console__tab[aria-selected="true"]::after { transform: scaleX(1); }
.console__tab:focus-visible { outline-offset: -2px; }

.console__body { position: relative; padding: var(--s-5); min-height: 17.5rem; }
.console__log { display: grid; gap: var(--s-3); font-family: var(--mono); font-size: 0.78rem; line-height: 1.5; }
.console__log li {
  display: grid;
  grid-template-columns: 3.1rem 1fr;
  gap: var(--s-3);
  color: #D6D3CE;
}
.console__log time { color: var(--c-faint-dark); }
.console__log .ok   { color: #5BE39A; }
.console__log .warn { color: #FFB020; }
.console__log .hl   { color: var(--c-paper); }
.js-console .console__log li { opacity: 0; transform: translateY(6px); transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); }
.js-console .console__log li.is-shown { opacity: 1; transform: none; }
.console__cursor { display: inline-block; width: 0.55em; height: 1.05em; background: var(--c-accent); vertical-align: -0.15em; animation: blink 1s steps(1) infinite; margin-left: 2px; }
@keyframes blink { 50% { opacity: 0; } }

.console__foot {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.25);
}
.console__count { display: grid; line-height: 1.25; }
.console__count span { font-size: var(--t-2xs); color: var(--c-faint-dark); font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em; }
.console__count strong { font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.console__foot .btn { margin-left: auto; }
.console-note { margin-top: var(--s-3); font-size: var(--t-2xs); color: var(--c-faint-dark); font-family: var(--mono); letter-spacing: 0.02em; text-align: right; max-width: none; }

/* 8.4 Przesuwający się pas zadań */

.marquee {
  position: relative;
  overflow: hidden;
  padding-block: var(--s-5);
  border-block: 1px solid var(--line);
  background: var(--bg);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; gap: var(--s-8); padding-right: var(--s-8); }
.marquee__item { display: inline-flex; align-items: center; gap: var(--s-8); font-size: var(--t-lg); font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; color: var(--text-soft); }
.marquee__item::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-accent); opacity: 0.8; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* 8.5 Sytuacje (problem) */

.situations { display: grid; gap: var(--s-4); }
.situation {
  position: relative;
  display: grid;
  gap: var(--s-4);
  align-content: start;
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.situation__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.situation__time { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text); }
.situation__icon { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--bg-raised); color: var(--text); }
.situation__icon svg { width: 18px; height: 18px; }
.situation h3 { font-size: var(--t-xl); }
.situation p { color: var(--text-soft); }

/* 8.6 Zdanie-uderzenie (podświetlane przewijaniem) */

.statement { padding-block: clamp(6rem, 4rem + 8vw, 12rem); overflow: hidden; }
.statement__lead {
  font-size: var(--t-4xl);
  font-weight: 600;
  letter-spacing: -0.048em;
  line-height: 1.02;
  max-width: 17ch;
}
.statement__lead .w { color: color-mix(in srgb, var(--c-paper) 22%, transparent); transition: color 360ms var(--ease); }
.statement__lead .w.is-on { color: var(--c-paper); }
.statement__lead .serif { color: var(--c-accent-bright); }
.statement__side { margin-top: var(--s-8); color: var(--text-soft); font-size: var(--t-lg); max-width: 32ch; }

/* 8.7 Dzień z agentami (oś czasu) */

.timeline { position: relative; display: grid; gap: var(--s-3); counter-reset: t; }
.timeline::before {
  content: "";
  position: absolute;
  left: 0.6rem; top: 0.5rem; bottom: 0.5rem;
  width: 1px;
  background: linear-gradient(var(--line-strong), var(--line-strong)) no-repeat;
}
.timeline::after {
  content: "";
  position: absolute;
  left: 0.6rem; top: 0.5rem;
  width: 1px;
  height: calc((100% - 1rem) * var(--progress, 0));
  background: var(--c-accent);
  transition: height 200ms linear;
}
.tl {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--s-2);
  padding: var(--s-4) 0 var(--s-6) 2.5rem;
}
.tl::before {
  content: "";
  position: absolute; left: 0.25rem; top: 1.3rem;
  width: 0.75rem; height: 0.75rem;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--line-strong);
  z-index: 1;
  transition: border-color 300ms var(--ease), background-color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.tl.is-in::before { border-color: var(--c-accent); background: var(--c-accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c-accent) 16%, transparent); }
.tl__time { font-family: var(--mono); font-size: var(--t-xs); color: var(--accent-text); letter-spacing: 0.04em; }
.tl__who { font-weight: 600; letter-spacing: -0.015em; font-size: var(--t-lg); }
.tl__what { color: var(--text-soft); max-width: 44ch; }
.tl--you { margin-top: var(--s-2); }
.tl--you .tl__card {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-5) var(--s-6);
  border-radius: var(--r-md);
  background: var(--c-ink);
  color: var(--c-paper);
}
.tl--you .tl__card p { color: var(--c-muted-dark); }
.tl--you .tl__who { color: var(--c-paper); }
.tl--you .tl__time { color: var(--c-accent-bright); }

/* 8.8 Bento z agentami */

.bento { display: grid; gap: var(--s-4); }
.agent-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--s-5);
  padding: clamp(1.4rem, 1rem + 1.4vw, 2rem);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-decoration: none;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 460ms var(--ease-out), border-color 300ms var(--ease), box-shadow 460ms var(--ease);
}
.agent-card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 1px 0 rgba(10,10,10,.04), 0 30px 60px -30px rgba(10,10,10,.35); }
.agent-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.agent-card h3 { font-size: var(--t-xl); }
.agent-card p { color: var(--text-soft); font-size: var(--t-sm); max-width: 40ch; margin-top: var(--s-2); }
.agent-card__go {
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease), color 300ms var(--ease), transform 460ms var(--ease-out);
  flex: none;
}
.agent-card__go svg { width: 14px; height: 14px; }
.agent-card:hover .agent-card__go { background: var(--c-accent-btn); border-color: var(--c-accent-btn); color: var(--c-white); transform: rotate(-45deg); }
.agent-card__viz {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 9.5rem;
  border-radius: var(--r-md);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  overflow: hidden;
  padding: var(--s-4);
  font-size: 0.75rem;
}
.agent-card--dark { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); }
.agent-card--dark p { color: var(--c-muted-dark); }
.agent-card--dark .card__num { color: var(--c-accent-bright); }
.agent-card--dark .agent-card__go { border-color: rgba(255,255,255,.2); }
.agent-card--cta { align-content: space-between; grid-template-rows: auto auto; background: var(--c-accent-btn); border-color: var(--c-accent-btn); color: var(--c-white); }
.agent-card--cta p { color: var(--c-white); }
.agent-card--cta .agent-card__go { border-color: rgba(255,255,255,.4); }
.agent-card--cta:hover .agent-card__go { background: var(--c-white); color: var(--c-accent-btn); border-color: var(--c-white); }
.agent-card--cta .card__num { color: var(--c-white); }

/* Mini-wizualizacje w kartach agentów */
.viz-doc { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--s-3); align-items: start; }
.viz-doc__paper { background: var(--c-white); border-radius: 6px; padding: 8px; box-shadow: 0 6px 16px -10px rgba(0,0,0,.35); display: grid; gap: 5px; }
.viz-doc__paper i { display: block; height: 4px; border-radius: 2px; background: var(--c-paper-3); }
.viz-doc__paper i:nth-child(1) { width: 60%; background: var(--c-ink); }
.viz-doc__paper i:nth-child(3) { width: 80%; }
.viz-doc__paper i:nth-child(5) { width: 45%; background: var(--c-accent); }
.viz-rows { display: grid; gap: 4px; font-family: var(--mono); font-size: 0.66rem; }
.viz-rows div { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 5px 7px; border-radius: 5px; background: var(--c-white); color: var(--c-muted); }
.viz-rows div b { color: var(--c-ink); font-weight: 500; }
.viz-rows .is-warn { background: #FFF1E0; color: #8A4B00; }
.viz-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.viz-cal i { aspect-ratio: 1; border-radius: 4px; background: var(--c-white); font-style: normal; display: grid; place-items: center; font-family: var(--mono); font-size: 0.6rem; color: var(--c-faint); }
.viz-cal i.is-due { background: var(--c-accent-btn); color: var(--c-white); box-shadow: 0 0 0 3px rgba(229,52,42,.18); }
.viz-cal i.is-soon { background: var(--c-ink); color: var(--c-paper); }
.viz-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.viz-posts div { background: var(--c-white); border-radius: 6px; padding: 7px; display: grid; gap: 4px; }
.viz-posts div::before { content: ""; height: 52px; border-radius: 4px; background: linear-gradient(135deg, var(--c-paper-3), var(--c-paper-2)); }
.viz-posts div:nth-child(2)::before { background: linear-gradient(135deg, #2c2c2c, #0a0a0a); }
.viz-posts i { height: 3px; border-radius: 2px; background: var(--c-paper-3); display: block; }
.viz-posts i:last-child { width: 60%; }
.viz-posts b { font-family: var(--mono); font-size: 0.55rem; font-weight: 500; color: #146C3E; }
.viz-mail { display: grid; gap: 4px; }
.viz-mail div { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; background: var(--c-white); border-radius: 6px; }
.viz-mail span { height: 4px; border-radius: 2px; background: var(--c-paper-3); }
.viz-mail em { font-style: normal; font-family: var(--mono); font-size: 0.56rem; padding: 2px 5px; border-radius: 4px; }
.viz-mail .p1 { background: rgba(229,52,42,.14); color: #A82219; }
.viz-mail .p2 { background: rgba(10,10,10,.07); color: var(--c-muted); }
.viz-mail .p3 { background: rgba(61,220,132,.16); color: #146C3E; }
.viz-mail i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-paper-3); }
.viz-mail .unread i { background: var(--c-accent); }
.viz-chart { display: flex; align-items: flex-end; gap: 6px; height: 6.5rem; padding-top: var(--s-4); }
.viz-chart i { flex: 1; border-radius: 4px 4px 2px 2px; background: color-mix(in srgb, var(--c-paper) 22%, transparent); height: var(--h); }
.viz-chart i:last-child { background: var(--c-accent); }
.viz-alert { position: absolute; top: var(--s-3); right: var(--s-3); font-family: var(--mono); font-size: 0.62rem; padding: 4px 8px; border-radius: var(--r-pill); background: rgba(229,52,42,.18); color: #FF8A80; }
.agent-card--dark .agent-card__viz { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }

/* 8.9 Kalkulator */

.calc {
  display: grid;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}
.calc__inputs { padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); display: grid; gap: var(--s-8); align-content: start; }
.calc__row { display: grid; gap: var(--s-3); }
.calc__label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); font-size: var(--t-sm); font-weight: 500; }
.calc__val { font-family: var(--mono); font-size: var(--t-base); font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc__hint { font-size: var(--t-xs); color: var(--text-soft); }
.calc__out {
  position: relative;
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  background: var(--c-ink);
  color: var(--c-paper);
  display: grid;
  gap: var(--s-8);
  align-content: space-between;
  overflow: hidden;
}
.calc__out::before {
  content: ""; position: absolute; inset: auto -20% -40% auto; width: 26rem; height: 26rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(229,52,42,.28), transparent 65%); pointer-events: none;
}
.calc__big { position: relative; display: grid; gap: var(--s-2); }
.calc__big > span { font-family: var(--mono); font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-faint-dark); }
.calc__big strong { font-size: clamp(3rem, 2rem + 4vw, 5.5rem); font-weight: 600; letter-spacing: -0.055em; line-height: 0.95; font-variant-numeric: tabular-nums; }
.calc__big strong small { font-size: 0.4em; letter-spacing: -0.02em; font-weight: 500; color: var(--c-muted-dark); margin-left: 0.2em; }
.calc__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); padding-top: var(--s-6); border-top: 1px solid rgba(255,255,255,.1); }
.calc__grid div { display: grid; gap: var(--s-1); }
.calc__grid span { font-size: var(--t-xs); color: var(--c-muted-dark); }
.calc__grid strong { font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.calc__fine { position: relative; font-size: var(--t-xs); color: var(--c-faint-dark); line-height: 1.55; }
.calc__presets { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.range {
  --p: 50%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1.75rem;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
.range:focus { outline: none; }
.range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-accent) 0 var(--p), var(--line-strong) var(--p) 100%);
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.5rem; height: 1.5rem;
  margin-top: -0.625rem;
  border-radius: 50%;
  background: var(--c-white);
  border: 1.5px solid var(--c-accent);
  box-shadow: 0 4px 12px -4px rgba(0,0,0,.35);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease);
}
.range:hover::-webkit-slider-thumb { transform: scale(1.08); }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(229,52,42,.22), 0 4px 12px -4px rgba(0,0,0,.35); }
.range::-moz-range-track { height: 4px; border-radius: 999px; background: var(--line-strong); }
.range::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--c-accent); }
.range::-moz-range-thumb { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--c-white); border: 1.5px solid var(--c-accent); box-shadow: 0 4px 12px -4px rgba(0,0,0,.35); }
.range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 5px rgba(229,52,42,.22); }

/* 8.10 Dlaczego teraz */

.stats { display: grid; gap: var(--s-4); }

/* Lista artykułów */
.posts { display: grid; gap: var(--s-4); }
.stats .stat { padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-card); box-shadow: var(--shadow-card); }

/* 8.11 Zasady */

.principles { display: grid; gap: 0; border-top: 1px solid var(--line); }
.principles.principles--list { grid-template-columns: 1fr !important; }
.principle { display: grid; gap: var(--s-2); padding: var(--s-6) 0; border-bottom: 1px solid var(--line); }
.principle__num { font-family: var(--mono); font-size: var(--t-xs); color: var(--accent-text); }
.principle h3 { font-size: var(--t-lg); letter-spacing: -0.02em; }
.principle p { color: var(--text-soft); font-size: var(--t-sm); }

/* 8.12 Pas domykający */

.cta-band {
  position: relative;
  padding-block: clamp(5rem, 3.5rem + 6vw, 10rem);
  overflow: hidden;
  background:
    radial-gradient(44rem 24rem at 82% 46%, rgba(229, 52, 42, 0.15), transparent 70%),
    var(--c-ink);
}
.cta-band__inner { display: grid; gap: var(--s-12); }
.cta-band h2 { font-size: var(--t-4xl); letter-spacing: -0.05em; line-height: 0.98; max-width: 16ch; }
.cta-band .lede { margin-top: var(--s-6); }
.cta-band .btn-row { margin-top: var(--s-10); }
.cta-contact { display: grid; gap: var(--s-6); align-content: end; }
.cta-contact__item { display: grid; gap: var(--s-1); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.cta-contact__item span { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.cta-contact__item a { font-size: var(--t-xl); font-weight: 500; letter-spacing: -0.025em; text-decoration: none; width: fit-content; }
.cta-contact__item a:hover { color: var(--c-accent-bright); }

/* ---------- 9. Podstrony ---------- */

.page-head {
  position: relative;
  overflow: hidden;
  padding-block: calc(var(--header-h) + clamp(2.5rem, 1.5rem + 4vw, 5.5rem)) clamp(3rem, 2rem + 4vw, 6rem);
  background:
    radial-gradient(56rem 30rem at 100% 0%, rgba(229, 52, 42, 0.16), transparent 62%),
    var(--c-ink);
}
.page-head .hero__grid { -webkit-mask-image: radial-gradient(ellipse 60% 70% at 85% 20%, #000, transparent 70%); mask-image: radial-gradient(ellipse 60% 70% at 85% 20%, #000, transparent 70%); }
.page-head__inner { display: grid; gap: var(--s-10); align-items: end; }
.page-head h1 { max-width: 18ch; }
.page-head .lede { margin-top: var(--s-6); }
.page-head__aside { display: grid; gap: var(--s-4); justify-items: start; color: var(--text-soft); font-size: var(--t-sm); }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--mono);
  font-size: var(--t-2xs);
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin-bottom: var(--s-8);
  max-width: none;
}
.breadcrumb a { text-decoration: none; color: var(--text-soft); }
.breadcrumb a:hover { color: var(--c-paper); }
.breadcrumb span[aria-hidden] { opacity: 0.5; }

.agent-badge {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--mono); font-size: var(--t-xs); color: var(--text-soft);
  margin-bottom: var(--s-6);
}
.agent-badge b { color: var(--c-accent-bright); font-weight: 500; }

/* Rail — nagłówek sekcji przyklejony przy przewijaniu */
.rail > * + * { margin-top: var(--s-4); }
.rail h2 { font-size: var(--t-2xl); }

/* Oferta */
.offer { padding-block: clamp(3rem, 2rem + 3vw, 5rem); border-top: 1px solid var(--line); }
.offer:first-of-type { border-top: 0; padding-top: 0; }
.offer__num { font-family: var(--mono); font-size: var(--t-xs); color: var(--accent-text); letter-spacing: 0.06em; margin-bottom: var(--s-4); }
.offer h2 { font-size: var(--t-3xl); margin-bottom: var(--s-4); }
.offer__lede { font-size: var(--t-lg); line-height: 1.5; }
.offer__meta { margin-top: var(--s-8); font-size: var(--t-sm); color: var(--text-soft); display: grid; gap: var(--s-6); }
.offer__meta dt { font-weight: 600; color: var(--text); margin-bottom: var(--s-1); }
.offer__meta dd { margin: 0; max-width: var(--measure); }
.offer__cta { margin-top: var(--s-8); display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-8); align-items: center; }

/* Pager między agentami */
.pager { display: grid; gap: var(--s-3); padding-block: var(--s-12); }
.pager a {
  display: grid; gap: var(--s-1);
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-card);
  text-decoration: none;
  transition: border-color 240ms var(--ease), transform 360ms var(--ease-out);
}
.pager a:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.pager span { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); }
.pager strong { font-size: var(--t-lg); font-weight: 500; letter-spacing: -0.02em; transition: color var(--speed) var(--ease); }
.pager a:hover strong { color: var(--accent-text); }

/* Demo UI na stronach agentów */
.demo {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--bg-card);
  box-shadow: 0 1px 0 rgba(10,10,10,.04), 0 40px 80px -40px rgba(10,10,10,.35);
  overflow: hidden;
}
.demo__bar { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--line); background: var(--bg-raised); font-family: var(--mono); font-size: var(--t-2xs); color: var(--text-soft); }
.demo__bar .console__dots i { background: var(--c-line-2); }
.demo__bar .console__dots i:first-child { background: var(--c-accent); }
.demo__body { padding: clamp(1rem, 0.6rem + 1.6vw, 1.75rem); display: grid; gap: var(--s-5); }
.demo p, .console p, .calc p, .quiz p:not(.lede) { max-width: none; }
.demo__caption { font-family: var(--mono); font-size: var(--t-2xs); color: var(--text-faint); letter-spacing: 0.02em; margin-top: var(--s-3); max-width: none; }
.demo__screen-note { display: none; }
.is-screen ~ .demo__caption .demo__screen-note { display: inline; }
.demo-table { font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.demo-table th { text-align: left; font-family: var(--mono); font-weight: 500; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); }
.demo-table td { padding: var(--s-3); border-bottom: 1px solid var(--line); vertical-align: middle; }
.demo-table tr:last-child td { border-bottom: 0; }
.demo-table .num { text-align: right; font-family: var(--mono); white-space: nowrap; }
.demo-table tr.is-warn td { background: #FFF6EA; }
.demo-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.demo-scroll:focus-visible { outline-offset: 2px; }
.demo-split { display: grid; gap: var(--s-5); }
.demo-doc {
  border-radius: var(--r-sm); background: var(--c-white); border: 1px solid var(--line);
  padding: var(--s-5); display: grid; gap: var(--s-3); font-size: var(--t-xs); color: var(--text-soft);
}
.demo-doc__head { display: flex; justify-content: space-between; gap: var(--s-4); align-items: start; }
.demo-doc__title { font-weight: 600; color: var(--text); font-size: var(--t-sm); }
.demo-doc mark { background: rgba(229,52,42,.12); color: var(--c-accent-strong); padding: 0 3px; border-radius: 3px; }
.demo-line { display: flex; justify-content: space-between; gap: var(--s-3); padding-block: var(--s-2); border-bottom: 1px dashed var(--line); }
.demo-line:last-child { border-bottom: 0; }
.demo-line b { color: var(--text); font-weight: 500; font-family: var(--mono); }
.demo-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; justify-content: space-between; padding-top: var(--s-4); border-top: 1px solid var(--line); }
.demo-actions__btns { display: flex; gap: var(--s-2); }
.demo-pill { display: inline-flex; align-items: center; min-height: 2rem; padding: 0 var(--s-3); border-radius: var(--r-pill); border: 1px solid var(--line-strong); font-size: var(--t-xs); font-weight: 500; }
.demo-pill--go { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); }

.demo-cal { display: grid; gap: var(--s-2); }
.demo-cal__row { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: var(--s-4); align-items: center; padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); background: var(--c-white); border: 1px solid var(--line); font-size: var(--t-sm); }
.demo-cal__date { font-family: var(--mono); font-size: var(--t-xs); color: var(--text-soft); line-height: 1.3; }
.demo-cal__date b { display: block; font-size: var(--t-lg); color: var(--text); font-weight: 600; letter-spacing: -0.02em; font-family: var(--font); }
.demo-cal__what small { display: block; color: var(--text-soft); font-size: var(--t-xs); }
.demo-cal__row.is-urgent { border-color: rgba(229,52,42,.45); box-shadow: 0 0 0 3px rgba(229,52,42,.08); }

.demo-inbox { display: grid; }
.demo-inbox__row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-4); align-items: center; padding: var(--s-3) var(--s-2); border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.demo-inbox__row:last-child { border-bottom: 0; }
.demo-inbox__from { font-weight: 500; }
.demo-inbox__subj { color: var(--text-soft); font-size: var(--t-xs); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-inbox__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-line-2); }
.demo-inbox__row.is-p1 .demo-inbox__dot { background: var(--c-accent); }
.demo-inbox__main { min-width: 0; }
.demo-draft { border-radius: var(--r-sm); background: var(--c-white); border: 1px solid var(--line); padding: var(--s-5); font-size: var(--t-sm); display: grid; gap: var(--s-3); }
.demo-draft__meta { font-family: var(--mono); font-size: var(--t-2xs); color: var(--text-faint); letter-spacing: 0.02em; }

.demo-posts { display: grid; gap: var(--s-3); }
.demo-post { display: grid; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-sm); background: var(--c-white); border: 1px solid var(--line); font-size: var(--t-sm); }
.demo-post__meta { display: flex; justify-content: space-between; gap: var(--s-3); font-family: var(--mono); font-size: var(--t-2xs); color: var(--text-faint); }

.demo-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.demo-kpi { padding: var(--s-4); border-radius: var(--r-sm); background: var(--c-white); border: 1px solid var(--line); display: grid; gap: var(--s-1); }
.demo-kpi > span { font-size: 0.7rem; color: var(--text-soft); }
.demo-kpi strong { font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.demo-kpi em { font-style: normal; font-family: var(--mono); font-size: 0.7rem; }
.up { color: #146C3E; } .down { color: var(--c-accent-strong); }
.demo-chart { display: flex; align-items: flex-end; gap: 4%; height: 8rem; padding: var(--s-4) var(--s-4) 0; border-radius: var(--r-sm); background: var(--c-white); border: 1px solid var(--line); }
.demo-chart i { flex: 1; height: var(--h); background: var(--c-paper-3); border-radius: 4px 4px 0 0; position: relative; }
.demo-chart i.is-now { background: var(--c-ink); }
.demo-alert { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; padding: var(--s-4); border-radius: var(--r-sm); background: #FFF6EA; border: 1px solid #F5D9B0; font-size: var(--t-sm); color: #6B3A00; }
.demo-alert svg { width: 18px; height: 18px; margin-top: 2px; color: #C26A00; }

/* Podgląd pracy krok po kroku (app.js, sekcja 6b) */
.demo__bar { flex-wrap: wrap; row-gap: var(--s-2); }
.demo__ctrl { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.demo-modes { display: inline-flex; padding: 2px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--bg-card); }
.demo-modes button { min-height: 1.75rem; padding: 0 0.7rem; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text-soft); transition: background-color 200ms var(--ease), color 200ms var(--ease); }
.demo-modes button:hover { color: var(--text); }
.demo-modes button[aria-checked="true"] { background: var(--c-ink); color: var(--c-paper); }
.demo-modes button[hidden] { display: none; }
.demo-modes__label { color: var(--text-faint); }
@media (max-width: 29.99em) { .demo-modes__label { display: none; } }
.demo-replay { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--bg-card); color: var(--text-soft); font-size: 1rem; line-height: 1; transition: border-color 200ms var(--ease), color 200ms var(--ease); }
.demo-replay:hover { border-color: var(--text); color: var(--text); }
.demo__ctrl[hidden], .demo-replay[hidden], .demo-steps[hidden], .demo-compare[hidden], .demo-screen[hidden] { display: none; }

.demo-steps { display: grid; align-content: start; gap: var(--s-1); padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); background: var(--c-ink); color: #D6D3CE; font-family: var(--mono); font-size: var(--t-2xs); line-height: 1.5; }
.demo-steps li { display: grid; grid-template-columns: 0.8rem 2.9rem 1fr; gap: var(--s-2); animation: demo-in 380ms var(--ease-out) both; }
.demo-steps li::before { content: "✓"; color: #5BE39A; }
.demo-steps li.is-active::before { content: "●"; color: var(--c-accent-bright); animation: demo-pulse 1s var(--ease) infinite; }
.demo-steps li.is-wait { color: var(--c-paper); }
.demo-steps li.is-wait::before { content: "●"; color: #FFB020; animation: demo-pulse 1.4s var(--ease) infinite; }
.demo-steps li.is-you { color: var(--c-paper); }
.demo-steps li.is-you::before { content: "→"; color: var(--c-paper); }
.demo-steps time { color: var(--c-faint-dark); }
.demo-steps .ok { color: #5BE39A; }
.demo-steps .warn { color: #FFB020; }
.demo-steps .hl { color: var(--c-paper); }
@keyframes demo-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes demo-pulse { 50% { opacity: 0.25; } }

.js-demo [data-step] { transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out), visibility 0s; }
.js-demo [data-step].is-pending { opacity: 0; transform: translateY(6px); visibility: hidden; }
.js-demo .demo-chart i[data-step] { transform-origin: bottom; }
.js-demo .demo-chart i[data-step].is-pending { opacity: 1; transform: scaleY(0); }
.js-demo .is-reading { background-color: rgba(229,52,42,.08); box-shadow: 0 0 0 4px rgba(229,52,42,.08); border-radius: 4px; }
.js-demo .demo-table tr.is-reading td { background: rgba(229,52,42,.1); box-shadow: none; }
.demo-line, .demo-inbox__row, .demo-cal__what small, .demo-table td { transition: background-color 220ms var(--ease), box-shadow 220ms var(--ease); }
.demo-ghost { color: transparent; }
.demo-ghost::before { content: ""; display: inline-block; width: 2px; height: 1em; margin-right: -2px; vertical-align: -0.12em; background: var(--c-accent); animation: blink 1s steps(1) infinite; }

button.demo-pill { background: transparent; color: var(--text); transition: border-color 200ms var(--ease), background-color 200ms var(--ease), transform 200ms var(--ease-out); }
button.demo-pill:hover { border-color: var(--c-ink); }
button.demo-pill:active { transform: translateY(1px); }
button.demo-pill--go { background: var(--c-ink); color: var(--c-paper); }
button.demo-pill--go:hover { box-shadow: 0 8px 18px -10px rgba(10,10,10,.6); }
.demo-pill[aria-disabled="true"] { cursor: default; transform: none; opacity: 0.6; }
.demo-pill--go.is-done { background: #146C3E; border-color: #146C3E; color: var(--c-white); opacity: 1; box-shadow: none; }

.tag.fx-approve { background: rgba(61,220,132,.14); color: #146C3E; }
.tag.fx-approve::before { content: "✓ "; }
.demo-table tr.fx-check td { background: #FFE9E7; }
.demo-table tr.fx-check td:first-child { box-shadow: inset 3px 0 0 var(--c-accent); }
.demo-compare { display: block; margin-top: var(--s-2); font-family: var(--mono); font-size: var(--t-2xs); animation: demo-in 380ms var(--ease-out) both; }
.demo-quote, .demo-note, .demo-ins { animation: demo-in 380ms var(--ease-out) both; }
.demo-quote { padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); border-left: 3px solid var(--c-accent); background: var(--c-white); font-size: var(--t-xs); color: var(--text-soft); }
.demo-quote b { color: var(--text); font-weight: 500; }
.demo-note { padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); border: 1px dashed var(--line-strong); font-size: var(--t-xs); color: var(--text-soft); }
.demo-cal__row.fx-calendar { border-color: rgba(20,108,62,.35); }
.demo-cal__row.fx-calendar .demo-cal__what small::after { content: " · ✓ w kalendarzu"; color: #146C3E; }
@media (max-width: 29.99em) {
  .demo-cal__row { grid-template-columns: 3.5rem 1fr; gap: var(--s-2) var(--s-3); }
  .demo-cal__row > .tag { grid-column: 2; justify-self: start; }
}
.console-note a { white-space: nowrap; }
.demo-ins { background: rgba(61,220,132,.14); border-radius: 4px; box-shadow: 0 0 0 4px rgba(61,220,132,.14); }
.demo-alert.fx-edit { background: rgba(61,220,132,.1); border-color: rgba(20,108,62,.3); color: #146C3E; }
.demo-draft.fx-send { border-color: rgba(20,108,62,.45); }
.demo-draft__meta.fx-send { color: #146C3E; }

/* Podgląd ekranu (app.js, sekcja 6b: SCREENS) */
.js-demo .demo__body { position: relative; }
.demo-off { display: none !important; }
.is-screen .demo-steps li:not(:last-child) { display: none; }
.demo-screen { border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg-raised); overflow: hidden; font-size: var(--t-xs); color: var(--text-soft); -webkit-user-select: none; user-select: none; }
.scr-tabs { display: flex; gap: 2px; padding: var(--s-2) var(--s-2) 0; border-bottom: 1px solid var(--line); }
.demo-screen.is-result .scr-tabs { border-bottom: 0; padding-bottom: var(--s-2); }
.scr-tab { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0.4rem 0.75rem; border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; font-family: var(--mono); font-size: var(--t-2xs); color: var(--text-faint); transition: background-color 200ms var(--ease), color 200ms var(--ease); }
.scr-tab.is-on { background: var(--c-white); border-color: var(--line); color: var(--text); margin-bottom: -1px; padding-bottom: calc(0.4rem + 1px); }
.demo-screen.is-result .scr-tab.is-on { border-bottom: 1px solid var(--line); border-radius: 6px; margin-bottom: 0; padding-bottom: 0.4rem; }
.scr-tab--you { margin-left: auto; color: var(--accent-text); }
.scr-tab.is-press { background: rgba(10,10,10,.06); }
.scr-stage { display: grid; align-content: start; padding: var(--s-4); background: var(--c-white); }
.demo-screen.is-result .scr-stage { display: none; }
.scr-app { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); align-content: start; animation: demo-in 320ms var(--ease-out) both; }
.scr-app:not(.is-app) { display: none; }
.scr-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-2) var(--s-3); }
.scr-head b { color: var(--text); font-weight: 600; font-size: var(--t-sm); }
.scr-btn { display: inline-flex; align-items: center; min-height: 1.8rem; padding: 0 var(--s-3); border-radius: var(--r-xs); background: var(--c-ink); color: var(--c-paper); font-size: var(--t-2xs); font-weight: 500; transition: transform 120ms var(--ease), background-color 200ms var(--ease); }
.scr-btn.is-press { transform: scale(0.96); background: #333; }
.scr-list { border: 1px solid var(--line); border-radius: var(--r-xs); overflow: hidden; }
.scr-row { display: grid; grid-template-columns: 0.85rem minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 0.9fr); gap: var(--s-3); align-items: center; padding: 0.45rem var(--s-3); border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; transition: background-color 200ms var(--ease); }
.scr-list--4 .scr-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.6fr) minmax(0, 1fr); }
.scr-row:first-child { border-top: 0; }
.scr-row > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr-row--head { background: var(--c-paper-2); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.scr-row--more { display: block; color: var(--text-faint); font-size: var(--t-2xs); }
.scr-row.is-press { background: #E8F0FE; }
.scr-row .num, .scr-grid .num { text-align: right; font-family: var(--mono); }
.scr-check { width: 0.85rem; height: 0.85rem; display: grid; place-items: center; border: 1.5px solid var(--c-line-2); border-radius: 3px; transition: background-color 150ms var(--ease), border-color 150ms var(--ease); }
.scr-check.is-on { background: var(--c-ink); border-color: var(--c-ink); }
.scr-check.is-on::after { content: ""; width: 0.42rem; height: 0.22rem; border: solid var(--c-white); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.scr-toast { justify-self: start; padding: 0.35rem 0.75rem; border-radius: var(--r-pill); background: rgba(61,220,132,.16); color: #146C3E; font-size: var(--t-2xs); font-weight: 500; }
.scr-warn { padding: var(--s-3); border-radius: var(--r-xs); background: #FFF6EA; border: 1px solid #F5D9B0; color: #6B3A00; }
.scr-warn b { font-family: var(--mono); font-weight: 500; }
.demo-screen [data-s-off] { transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out), visibility 0s; }
.demo-screen .is-off { opacity: 0; transform: translateY(4px); visibility: hidden; }

.scr-app--split { align-items: start; }
@media (min-width: 40em) { .scr-app--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); } }
.scr-pdf { display: grid; gap: 0.35rem; padding: var(--s-4); border: 1px solid var(--line); border-radius: 4px; background: #FCFCFB; box-shadow: 0 8px 20px -14px rgba(10,10,10,.35); }
.scr-pdf__title { margin-bottom: var(--s-2); color: var(--text); font-weight: 600; }
.scr-pdf p, .scr-form p { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.scr-pdf b { color: var(--text); font-weight: 500; font-family: var(--mono); }
.scr-bar { display: block; height: 0.4rem; margin: 0.15rem 0; border-radius: 2px; background: var(--c-paper-2); }
.scr-bar--short { width: 60%; }
.scr-sel { border-radius: 2px; background: linear-gradient(#BFD8FF, #BFD8FF) no-repeat 0 0 / 0% 100%; }
.scr-sel.is-sel { background-size: 100% 100%; transition: background-size 340ms linear; }
.scr-form { display: grid; gap: var(--s-2); align-content: start; }
.scr-form__title { color: var(--text); font-weight: 600; }
.scr-input { flex: 0 0 55%; display: flex; align-items: center; min-height: 1.7rem; padding: 0 var(--s-2); border: 1px solid var(--line-strong); border-radius: 4px; background: var(--c-white); color: var(--text); font-family: var(--mono); font-weight: 500; white-space: nowrap; overflow: hidden; transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease); }
.scr-input.is-focus { border-color: #2F6FEB; box-shadow: 0 0 0 3px rgba(47,111,235,.18); }
.scr-caret { display: inline-block; width: 1.5px; height: 1em; margin-left: 1px; background: currentColor; animation: blink 1s steps(1) infinite; }
.scr-search { display: flex; align-items: center; gap: var(--s-3); }
.scr-search .scr-input { flex: 0 1 16rem; min-width: 0; }

.scr-grid { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; font-size: var(--t-2xs); font-variant-numeric: tabular-nums; }
.scr-grid__row { display: grid; grid-template-columns: 1.8rem minmax(0, 1.3fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1fr); }
.scr-grid__row > span { min-height: 1.65rem; padding: 0.3rem 0.5rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr-grid__row > span:first-child, .scr-grid__row--head > span { background: var(--c-paper-2); color: var(--text-faint); font-family: var(--mono); text-align: center; }
.scr-grid__row:nth-child(2) > span:not(:first-child) { color: var(--text); font-weight: 600; }
.scr-grid__row--warn > span:not(:first-child) { background: #FFF1EF; color: var(--c-accent-strong); }
.scr-grid__row--more > span:nth-child(2) { grid-column: 2 / -1; color: var(--text-faint); }
.scr-grid .is-focus { outline: 2px solid #2F6FEB; outline-offset: -2px; }
.scr-muted { color: var(--text-faint); font-size: var(--t-2xs); }
.scr-head__btns { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.scr-btn--ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.scr-btn--ghost.is-press { background: rgba(10,10,10,.06); }
.scr-row b.scr-sel { color: var(--text); font-family: var(--mono); font-weight: 500; }
.scr-list--3 .scr-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr) minmax(0, 1.1fr); }
.scr-tag { display: inline-block; padding: 0 0.45rem; border-radius: var(--r-pill); background: var(--c-paper-2); color: var(--text-soft); font-family: var(--mono); font-size: 0.62rem; font-style: normal; line-height: 1.6; }
.scr-tag--red { background: #FFE3E0; color: var(--c-accent-strong); }
.scr-tag--green { background: rgba(61,220,132,.18); color: #146C3E; }

/* Lista sortowana przez agenta: kolejność z --o po włączeniu .is-on */
.scr-list--sort { display: flex; flex-direction: column; }
.scr-list--sort > .scr-row { border-top: 0; border-bottom: 1px solid var(--line); }
.scr-list--sort > .scr-row--more { border-bottom: 0; }
.scr-list--sort.is-on > .scr-row { order: var(--o, 9); animation: demo-in 320ms var(--ease-out) both; }
.scr-list--sort.is-on .scr-row--warn { background: #FFF1EF; }
.scr-list--sort.is-on .scr-sort::after { content: " ▾"; }

.scr-list--mail .scr-row { grid-template-columns: 0.5rem minmax(0, 1fr) auto 2.4rem; }
.scr-list--mail .scr-row b, .scr-list--mail .scr-row small { display: block; overflow: hidden; text-overflow: ellipsis; }
.scr-list--mail .scr-row b { color: var(--text); font-weight: 600; }
.scr-list--mail .scr-row small { color: var(--text-faint); font-size: var(--t-2xs); }
.scr-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #2F6FEB; transition: background-color 250ms var(--ease); }
.scr-dot.is-on { background: var(--c-line-2); }
.scr-dot--red.is-on { background: var(--c-accent); }
.scr-dot--green.is-on { background: #1FA35B; }
.scr-mail { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
.scr-mail__meta { display: flex; gap: var(--s-3); padding-bottom: 0.35rem; border-bottom: 1px solid var(--line); }
.scr-mail__meta span { flex: none; width: 3.2rem; color: var(--text-faint); font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; }
.scr-mail__meta b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 500; }
.scr-mail__body { color: var(--text); line-height: 1.6; }
.scr-area { min-height: 5.4rem; padding: var(--s-2) var(--s-3); border: 1px solid var(--line-strong); border-radius: 4px; background: var(--c-white); color: var(--text); line-height: 1.55; transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease); }
.scr-area.is-focus { border-color: #2F6FEB; box-shadow: 0 0 0 3px rgba(47,111,235,.18); }
.scr-gap { padding: var(--s-2) var(--s-3); border: 1px dashed #E0B25C; border-radius: 4px; background: #FFF8E8; color: #6B3A00; }

.scr-pdf .scr-par { display: block; line-height: 1.6; }
.scr-par__no { display: block; margin-bottom: 2px; color: var(--text-faint); font-family: var(--mono); font-size: 0.62rem; }
.scr-pdf__title small { color: var(--text-faint); font-weight: 400; font-size: var(--t-2xs); }

.scr-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; font-size: var(--t-2xs); font-variant-numeric: tabular-nums; }
.scr-cal > span { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 3px; min-height: 3.1rem; padding: 0.3rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--text); transition: background-color 200ms var(--ease); }
.scr-cal > span:nth-child(7n) { border-right: 0; }
.scr-cal > span:nth-last-child(-n+7) { border-bottom: 0; }
.scr-cal > .scr-cal__dow { min-height: 0; background: var(--c-paper-2); color: var(--text-faint); font-family: var(--mono); font-size: 0.6rem; text-align: center; text-transform: uppercase; }
.scr-cal > .is-out { background: #FCFCFB; color: var(--text-faint); }
.scr-cal > .is-press { background: #E8F0FE; }
.scr-chip { min-width: 0; min-height: 1.2em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 1px 4px; border-left: 2px solid #2F6FEB; border-radius: 3px; background: #EEF4FF; color: #1A3E8C; font-size: 0.6rem; font-weight: 500; }
.scr-chip--red { border-left-color: var(--c-accent); background: #FFE3E0; color: var(--c-accent-strong); }
.scr-chip--new { border: 1px dashed #2F6FEB; }
.scr-chip.is-focus { box-shadow: 0 0 0 2px rgba(47,111,235,.3); }

.scr-checks { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.scr-checks li { display: flex; align-items: center; gap: var(--s-2); color: var(--text); }
.scr-checks li::before { content: "✓"; flex: none; display: grid; place-items: center; width: 1rem; height: 1rem; border: 1.5px solid var(--c-line-2); border-radius: 50%; color: transparent; font-size: 0.6rem; transition: background-color 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease); }
.scr-checks li.is-on::before { background: #1FA35B; border-color: #1FA35B; color: var(--c-white); }

.scr-chart { display: flex; align-items: flex-end; justify-content: space-around; gap: 6px; height: 5.5rem; padding: var(--s-2) var(--s-3) 0; border: 1px solid var(--line); border-radius: 4px; background: #FCFCFB; }
.scr-chart i { flex: 1; max-width: 2.4rem; height: var(--h); border-radius: 2px 2px 0 0; background: var(--c-line-2); transform-origin: bottom; }
.scr-chart i:last-child { background: var(--c-ink); }
.demo-screen .scr-chart i.is-off { opacity: 1; visibility: visible; transform: scaleY(0); }
.scr-grid em { font-style: normal; }
.scr-grid .up { color: #146C3E; }
.scr-grid .down { color: var(--c-accent-strong); }
.scr-calc > b { display: block; margin: -0.3rem -0.5rem; padding: 0.3rem 0.5rem; min-height: 1.65rem; color: var(--text); font-weight: 500; text-align: left; }
.scr-calc > em, .scr-calc.is-on > b { display: none; }
.scr-calc.is-on > em { display: inline; }
.scr-grid--plan .scr-grid__row { grid-template-columns: 1.8rem minmax(0, 0.55fr) minmax(0, 0.8fr) minmax(0, 1.8fr) minmax(0, 0.8fr); }
.scr-grid--kpi .scr-grid__row { grid-template-columns: 1.8rem minmax(0, 1.5fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 0.9fr); }

@media (max-width: 29.99em) {
  .scr-tab { padding-inline: 0.5rem; }
  .scr-stage { padding: var(--s-3); }
  .scr-row { grid-template-columns: 0.85rem minmax(0, 1fr) auto; }
  .scr-list--4 .scr-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .scr-row > span:nth-of-type(2):not(:last-child), .scr-list--4 .scr-row > span:nth-of-type(3) { display: none; }
  .scr-list--4 .scr-row > span:nth-of-type(2) { display: block; }
  .scr-grid__row > span:first-child { padding-inline: 0; }
  .scr-grid__row { grid-template-columns: 1.5rem minmax(0, 1.25fr) minmax(0, 0.9fr) minmax(0, 0.9fr); }
  .scr-grid__row > span:nth-child(3):not(:last-child) { display: none; }
  .scr-list--3 .scr-row { grid-template-columns: minmax(0, 1fr) auto; }
  .scr-list--mail .scr-row { grid-template-columns: 0.5rem minmax(0, 1fr) auto; }
  .scr-list--mail .scr-row > span:nth-of-type(2):not(:last-child) { display: block; }
  .scr-list--mail .scr-row > span:nth-of-type(3) { display: none; }
  .scr-grid--plan .scr-grid__row { grid-template-columns: 1.5rem minmax(0, 0.5fr) minmax(0, 1.5fr) minmax(0, 0.8fr); }
  .scr-grid--kpi .scr-grid__row { grid-template-columns: 1.5rem minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 1.15fr); }
  .scr-cal > span { min-height: 2.6rem; padding: 0.2rem; }
  .scr-chip { padding: 0 2px; font-size: 0.56rem; }
}
.scr-cursor { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; transition: transform 600ms cubic-bezier(.45, 0, .2, 1), opacity 300ms var(--ease); }
.demo:not(.is-screen) .scr-cursor { display: none; }
.scr-cursor.is-away { opacity: 0; }
.scr-cursor svg { position: absolute; max-width: none; filter: drop-shadow(0 1px 1.5px rgba(10,10,10,.3)); transition: transform 120ms var(--ease); }
.scr-cursor__arrow { left: -1px; top: -1px; transform-origin: 1px 1px; }
.scr-cursor__text { left: -5px; top: -10px; display: none; }
.scr-cursor.is-text .scr-cursor__arrow { display: none; }
.scr-cursor.is-text .scr-cursor__text { display: block; }
.scr-cursor.is-down svg { transform: scale(0.86); }
.scr-cursor b, .scr-key { position: absolute; left: 13px; white-space: nowrap; }
.scr-cursor b { top: 21px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--c-accent); color: var(--c-white); font-size: 0.64rem; font-weight: 600; box-shadow: 0 3px 8px -2px rgba(229,52,42,.5); }
.scr-key { top: 44px; padding: 1px 7px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--c-white); color: var(--text); font-family: var(--mono); font-size: 0.66rem; opacity: 0; }
.scr-key.is-on { animation: scr-key 760ms var(--ease-out); }
.scr-cursor b { transition: transform 300ms var(--ease); }
.scr-cursor.is-flip b { transform: translateX(calc(-100% - 19px)); }
.scr-cursor.is-flip .scr-key { left: auto; right: 6px; }
.scr-ring { position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; border: 2px solid var(--c-accent); border-radius: 50%; opacity: 0; }
.scr-ring.is-on { animation: scr-ring 480ms var(--ease-out); }
@keyframes scr-ring { from { opacity: 0.9; transform: scale(0.3); } to { opacity: 0; transform: scale(1.5); } }
@keyframes scr-key { 0% { opacity: 0; transform: translateY(4px); } 15%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Quiz „od którego agenta zacząć” */
.quiz { border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-card); box-shadow: var(--shadow-card); overflow: hidden; }
.quiz__progress { height: 3px; background: var(--line); }
.quiz__progress i { display: block; height: 100%; width: var(--w, 0%); background: var(--c-accent); transition: width 500ms var(--ease-out); }
.quiz__body { padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.quiz__step[hidden] { display: none; }
.quiz__q { font-size: var(--t-2xl); letter-spacing: -0.035em; font-weight: 600; line-height: 1.1; max-width: 26ch; }
.quiz__count { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--s-4); }
.quiz__opts { display: grid; gap: var(--s-2); margin-top: var(--s-8); }
.quiz__opt {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  width: 100%; text-align: left;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--c-white);
  font-size: var(--t-base);
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease), transform 300ms var(--ease-out);
}
.quiz__opt::after { content: "→"; color: var(--text-faint); transition: transform 260ms var(--ease-out), color 200ms var(--ease); }
.quiz__opt:hover { border-color: var(--c-ink); transform: translateX(3px); }
.quiz__opt:hover::after { color: var(--c-accent-strong); transform: translateX(3px); }
.quiz__result h3 { font-size: var(--t-3xl); letter-spacing: -0.045em; }
.quiz__back { margin-top: var(--s-6); border: 0; background: none; padding: 0; font-size: var(--t-sm); color: var(--text-soft); text-decoration: underline; text-underline-offset: 0.2em; }

/* Kontakt */
.contact-card { display: grid; gap: var(--s-5); }
.contact-line { display: grid; gap: var(--s-1); }
.contact-line span { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.contact-line a { font-size: var(--t-2xl); font-weight: 600; letter-spacing: -0.035em; text-decoration: none; width: fit-content; }
.contact-line a:hover { color: var(--accent-text); }

/* Założyciel */
.founder { display: grid; gap: var(--s-8); align-items: start; }
.founder__card {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 22rem;
  border-radius: var(--r-lg);
  background: radial-gradient(24rem 18rem at 80% 0%, rgba(229,52,42,.35), transparent 70%), var(--c-ink);
  color: var(--c-paper);
  display: grid;
  align-content: space-between;
  padding: var(--s-6);
  overflow: hidden;
}
.founder__card .brand__logo { height: 1.5rem; }
.founder__mono { font-size: clamp(4rem, 3rem + 5vw, 7rem); font-weight: 600; letter-spacing: -0.06em; line-height: 0.9; }
.founder__mono .serif { color: var(--c-accent-bright); }
.founder__name { font-weight: 500; }
.founder__role { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-faint-dark); }

/* Spis treści (polityka, artykuły) */
.toc { display: grid; gap: var(--s-2); font-size: var(--t-sm); }
.toc h2 { font-family: var(--mono); font-size: var(--t-2xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--s-3); }
.toc a { display: block; padding: var(--s-1) 0 var(--s-1) var(--s-4); border-left: 1px solid var(--line); text-decoration: none; color: var(--text-soft); transition: color 200ms var(--ease), border-color 200ms var(--ease); }
.toc a:hover, .toc a.is-active { color: var(--text); border-color: var(--c-accent); }

/* Artykuły */
.post-card {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg-card); text-decoration: none; box-shadow: var(--shadow-card);
  transition: transform 400ms var(--ease-out), border-color 300ms var(--ease);
}
.post-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.post-card h2, .post-card h3 { font-size: var(--t-xl); letter-spacing: -0.03em; }
.post-card p { color: var(--text-soft); font-size: var(--t-sm); }
.post-card .arrow-link { margin-top: auto; padding-top: var(--s-2); align-self: flex-start; }
.post-meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.article-head .post-meta { color: var(--c-faint-dark); margin-top: var(--s-8); }
.callout {
  display: grid; gap: var(--s-3);
  padding: var(--s-6);
  border-radius: var(--r-md);
  background: var(--c-ink); color: var(--c-paper);
}
.callout p { color: var(--c-muted-dark); }
.callout .btn-row { margin-top: var(--s-2); }
.sources { font-size: var(--t-xs); color: var(--text-soft); }
.sources li + li { margin-top: var(--s-2); }
.sources a { color: inherit; word-break: break-word; }

/* 404 */
.err { min-height: 100svh; display: grid; align-items: center; }
.err__code { font-size: clamp(6rem, 4rem + 12vw, 16rem); font-weight: 600; letter-spacing: -0.07em; line-height: 0.85; }
.err__code .serif { color: var(--c-accent-bright); }

/* ---------- 10. Responsywność ---------- */

@media (min-width: 40em) {
  .situations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pager { grid-template-columns: 1fr 1fr; }
  .pager__next { text-align: right; }
  .offer__meta { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-12); }
  .demo-split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; }
  .quiz__opts { grid-template-columns: 1fr 1fr; }
  .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Przy dwóch kolumnach samotny ostatni kafelek zajmuje cały rząd */
  .posts > :last-child:nth-child(odd),
  .stats > :last-child:nth-child(odd),
  .principles:not(.principles--list) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .mobile-cta { left: auto; right: var(--s-4); width: 20rem; }
}

@media (min-width: 64em) {
  :root { --header-h: 4.75rem; }

  .grid-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    row-gap: var(--s-16);
  }
  .col-rail  { grid-column: 1 / 5; }
  .col-body  { grid-column: 6 / -1; }
  .col-main  { grid-column: 1 / 8; }
  .col-side  { grid-column: 9 / -1; }
  .col-wide  { grid-column: 1 / -1; }
  .col-text  { grid-column: 1 / 8; }
  .col-form  { grid-column: 1 / 7; }
  .col-aside { grid-column: 8 / -1; }
  .col-prose { grid-column: 5 / 12; }
  .col-toc   { grid-column: 1 / 4; }

  .rail--sticky { position: sticky; top: calc(var(--header-h) + var(--s-10)); align-self: start; }
  .sticky { position: sticky; top: calc(var(--header-h) + var(--s-8)); align-self: start; }

  .cols--2 { gap: var(--s-12) var(--s-10); }
  .cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-12) var(--s-10); }

  .nav { display: block; }
  .menu { display: none; }
  .site-header__actions > .btn { display: inline-flex; }

  .hero { min-height: min(100svh, 62rem); display: flex; align-items: center; }
  .hero > .container { width: 100%; }
  .hero__inner { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(2rem, 1rem + 3vw, 5rem); }

  .situations { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .situation { min-height: 20rem; }

  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bento > :nth-child(1) { grid-column: span 3; }
  .bento > :nth-child(2) { grid-column: span 3; }
  .bento > :nth-child(3) { grid-column: span 2; }
  .bento > :nth-child(4) { grid-column: span 2; }
  .bento > :nth-child(5) { grid-column: span 2; }
  .bento > :nth-child(6) { grid-column: span 6; grid-template-columns: 1fr auto; grid-template-rows: auto; align-items: center; }

  .timeline { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-4); }
  .timeline::before { left: 0; right: 0; top: 0.5rem; bottom: auto; width: auto; height: 1px; }
  .timeline::after { left: 0; top: 0.5rem; height: 1px; width: calc(100% * var(--progress, 0)); }
  .tl { padding: var(--s-10) var(--s-2) 0 0; }
  .tl::before { left: 0; top: 0.1rem; }
  .tl--you { grid-column: 1 / -1; margin-top: var(--s-6); padding-top: 0; }
  .tl--you::before { display: none; }
  .tl--you .tl__card { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: var(--s-6); }

  .calc { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }

  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .principles.principles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .posts > :last-child:nth-child(odd),
  .stats > :last-child:nth-child(odd),
  .principles:not(.principles--list) > :last-child:nth-child(odd) { grid-column: auto; }

  .cta-band__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); align-items: end; }

  .page-head__inner { grid-template-columns: minmax(0, 1fr) auto; }
  .page-head__aside { justify-items: end; text-align: right; }

  .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .footer-col--brand { grid-column: auto; }

  .founder { grid-template-columns: 22rem minmax(0, 1fr); gap: var(--s-16); }

  .mobile-cta { display: none; }

  .statement__lead { max-width: 18ch; }
}

/* Bardzo wąskie telefony (≤ 352 px) */
@media (max-width: 22em) {
  .btn--lg { font-size: var(--t-sm); padding-inline: var(--s-4); }
}

@media (max-width: 26em) {
  .btn { white-space: normal; text-align: center; padding-block: 0.6rem; }
  .btn-row .btn { width: 100%; }
  .console__log li { grid-template-columns: 2.7rem 1fr; }
  .demo-kpis { grid-template-columns: 1fr; }
  .calc__grid { grid-template-columns: 1fr; }
}

/* ---------- 11. Dostępność, ruch, druk ---------- */

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible { outline-offset: 3px; border-radius: var(--r-pill); }
.input:focus-visible { outline: none; }

/* Wejścia przy przewijaniu (tylko z JS) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js [data-stagger] > * { opacity: 0; transform: translateY(18px); transition: opacity 640ms var(--ease-out), transform 820ms var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger)); }
.js [data-stagger].is-in > * { opacity: 1; transform: none; }
.js .lines .line > span { transform: translateY(105%); transition: transform var(--speed-in) var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms + 80ms); }
.js .lines.is-in .line > span { transform: none; }
.js .hero .chip, .js .page-head .breadcrumb { opacity: 0; transform: translateY(8px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.js.is-ready .hero .chip, .js.is-ready .page-head .breadcrumb { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .band--glow::before, .grain::after, .hero__orb { display: none; }
  .js .reveal, .js [data-stagger] > *, .js .lines .line > span { opacity: 1; transform: none; }
  .rotator { height: auto; }
  .rotator__item { transform: none; opacity: 1; }
  .rotator__item:not(:first-child) { display: none; }
  .marquee__track { animation: none; }
  .statement__lead .w { color: var(--c-paper); }
}

@media print {
  .site-header, .site-footer, .mobile-cta, .btn-row, .pager, .cta-band, .marquee, .console { display: none !important; }
  body, .band--dark, .page-head, .hero { background: #fff !important; color: #000 !important; }
  .page-head, .hero { padding-top: 1rem; }
  a { text-decoration: underline; }
}