/* ============================================================================
   TOKENY
   Kolory marki: navy #10243f (struktura, tekst), amber #f2b544 (JEDYNY akcent),
   papier (tło). Zieleń/czerwień są zarezerwowane wyłącznie dla znaku kwoty
   w tabelach - nigdy jako drugi akcent dekoracyjny.

   PROMIEŃ NAROŻNIKÓW - reguła obowiązująca na całej stronie:
     --r      12px  -> powierzchnie (ramki, bloki, obrazy, tabela)
     --r-sm    8px  -> drobne elementy (chipy, pola)
     --r-pill  999  -> WYŁĄCZNIE elementy interaktywne (przyciski)
   ============================================================================ */
:root {
  --bg: #f4efe4;
  --bg-2: #efe8da;
  --surface: #fffdf8;
  --ink: #10243f;
  --ink-2: #3d4c64;
  --ink-3: #5c6a80;
  --line: #10243f24;
  --line-soft: #10243f14;
  --accent: #f2b544;
  --accent-ink: #2a2007;
  --accent-deep: #8a6212;
  --accent-wash: #f2b5441f;
  --pos: #1c6b52;
  --pos-wash: #1c6b521f;
  --neg: #9d3b34;
  --neg-wash: #9d3b341f;
  --deep: #10243f;
  --deep-2: #173352;
  --on-deep: #eef3fa;
  --on-deep-2: #a9bad2;
  --chart-total: #23405f;
  --chart-cost: #7e8fa8;
  --shadow-lift: 0 24px 60px -22px #10243f4a, 0 2px 6px #10243f0f;
  --shadow-soft: 0 10px 30px -18px #10243f38;
  --r: 12px;
  --r-sm: 8px;
  --r-pill: 999px;
  --maxw: 1160px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1727;
    --bg-2: #0f1e33;
    --surface: #132741;
    --ink: #f1ece2;
    --ink-2: #c3cddd;
    --ink-3: #93a2b8;
    --line: #f1ece229;
    --line-soft: #f1ece214;
    --accent: #f5c163;
    --accent-ink: #2a2007;
    --accent-deep: #f5c163;
    --accent-wash: #f5c1631f;
    --pos: #4fbf95;
    --pos-wash: #4fbf9524;
    --neg: #e08a80;
    --neg-wash: #e08a8024;
    --deep: #132741;
    --deep-2: #17304f;
    --on-deep: #f1ece2;
    --on-deep-2: #a9bad2;
    --chart-total: #93aacd;
    --chart-cost: #5f7aa0;
    --shadow-lift: 0 24px 60px -22px #00000080, 0 2px 6px #00000040;
    --shadow-soft: 0 10px 30px -18px #00000066;
  }
}

:root[data-theme="dark"] {
  --bg: #0b1727;
  --bg-2: #0f1e33;
  --surface: #132741;
  --ink: #f1ece2;
  --ink-2: #c3cddd;
  --ink-3: #93a2b8;
  --line: #f1ece229;
  --line-soft: #f1ece214;
  --accent: #f5c163;
  --accent-ink: #2a2007;
  --accent-deep: #f5c163;
  --accent-wash: #f5c1631f;
  --pos: #4fbf95;
  --pos-wash: #4fbf9524;
  --neg: #e08a80;
  --neg-wash: #e08a8024;
  --deep: #132741;
  --deep-2: #17304f;
  --on-deep: #f1ece2;
  --on-deep-2: #a9bad2;
  --chart-total: #93aacd;
  --chart-cost: #5f7aa0;
  --shadow-lift: 0 24px 60px -22px #00000080, 0 2px 6px #00000040;
  --shadow-soft: 0 10px 30px -18px #00000066;
}

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

/* ---------- BAZA ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font: 400 17px/1.62 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
figure { margin: 0; }
p { margin: 0; }
h1, h2, h3 { color: var(--ink); margin: 0; font-weight: 600; letter-spacing: -.022em; line-height: 1.12; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.shell { width: min(var(--maxw), calc(100% - 40px)); margin-inline: auto; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--surface); color: var(--ink); padding: 12px 16px; z-index: 99; border-radius: var(--r-sm); }
.skip:focus { left: 12px; top: 12px; }
:where(a, button, summary, input):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); }
.ico { width: 1em; height: 1em; fill: currentColor; flex: none; }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

section { padding: clamp(56px, 7.5vw, 104px) 0; }
.head { margin-bottom: clamp(28px, 3.5vw, 44px); }
.head h2 { font-size: clamp(1.55rem, 2.9vw, 2.25rem); max-width: 20ch; }
.head p { color: var(--ink-3); margin-top: 12px; max-width: 60ch; font-size: 1.0625rem; }

/* ---------- PRZYCISKI ---------- */
.btn {
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  padding: 13px 24px;
  font: 600 .9375rem/1 'Geist', system-ui, sans-serif;
  letter-spacing: -.005em;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  white-space: nowrap;
  transition: transform .16s cubic-bezier(.16,1,.3,1), box-shadow .16s ease, background-color .16s ease;
}
.btn .ico { font-size: 1.05em; transition: transform .2s cubic-bezier(.16,1,.3,1); }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-soft); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:hover .ico { transform: translateX(3px); }
.btn-primary:active { transform: translateY(1px); }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-quiet:hover { background: var(--surface); border-color: var(--ink-3); }
.btn-quiet:active { transform: translateY(1px); }
.btn-on-deep { background: transparent; color: var(--on-deep); border-color: #ffffff40; }
.btn-on-deep:hover { background: #ffffff17; }
.btn-sm { padding: 10px 18px; font-size: .875rem; }

/* ---------- NAWIGACJA ---------- */
.topbar { position: sticky; top: 0; z-index: 40; background: var(--deep); color: var(--on-deep); }
:root[data-theme="dark"] .topbar,
:root:not([data-theme="light"]) .topbar { border-bottom: 1px solid var(--line-soft); }
.topbar .row { display: flex; align-items: center; gap: 28px; height: 64px; }
.wordmark {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0 !important;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -.02em;
  text-decoration: none;
  color: #fff;
}
.wordmark svg, .brand-logo {
  display: block;
  width: auto;
  height: 34px;
  max-height: 34px;
  max-width: 196px;
  flex-shrink: 0 !important;
}
.wordmark b { color: var(--accent); font-weight: 700; }
.navlinks { display: flex; gap: 26px; margin-left: auto; font-size: .9375rem; }
.navlinks a { color: var(--on-deep-2); text-decoration: none; transition: color .15s; }
.navlinks a:hover { color: #fff; }
.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 1; min-width: 0; }
.lang-switch { display: flex; align-items: center; gap: 4px; background: #ffffff14; border-radius: var(--r-pill); padding: 3px 6px; }
.lang-btn { color: var(--on-deep-2); text-decoration: none; font-size: .8125rem; font-weight: 600; padding: 2px 6px; border-radius: var(--r-pill); transition: color .15s, background-color .15s; }
.lang-btn:hover { color: #fff; }
.lang-btn.active { color: var(--accent-ink); background: var(--accent); }
.themebtn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: transparent;
  border: 1px solid #ffffff30;
  color: var(--on-deep-2);
  cursor: pointer;
  font-size: 17px;
  transition: background-color .15s, color .15s;
}
.themebtn:hover { background: #ffffff17; color: #fff; }
.themebtn .i-moon { display: none; }
:root[data-theme="dark"] .themebtn .i-moon { display: block; }
:root[data-theme="dark"] .themebtn .i-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .themebtn .i-moon { display: block; }
  :root:not([data-theme="light"]) .themebtn .i-sun { display: none; }
}

/* ---------- HERO ---------- */
.hero { padding-top: clamp(34px, 5vw, 72px); padding-bottom: clamp(44px, 6vw, 84px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(32px, 4vw, 56px); align-items: center; }
.hero h1 { font-size: clamp(2rem, 3.9vw, 2.75rem); line-height: 1.07; letter-spacing: -.032em; max-width: 22ch; }
.hero h1 em { font-style: normal; color: var(--accent-deep); }
.hero .lead { font-size: 1.1875rem; color: var(--ink-2); margin-top: 20px; max-width: 44ch; line-height: 1.55; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.hero-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 500; color: var(--ink-3); }
.hero-badge .ico { width: 14px; height: 14px; color: var(--pos); flex-shrink: 0; }
.hero-shot { width: 100%; position: relative; }
@media (min-width: 1180px) { .hero-shot { margin-right: calc(-1 * min(4vw, 48px)); } }
.shot-cap { margin-top: 14px; font-size: .8125rem; color: var(--ink-3); line-height: 1.5; text-align: center; }

/* ---------- HERO SIMULATOR WINDOW ---------- */
.sim-window {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: 0 16px 40px -10px rgba(16, 36, 63, 0.12), 0 0 0 1px rgba(16, 36, 63, 0.04);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sim-window:hover {
  box-shadow: 0 20px 48px -10px rgba(16, 36, 63, 0.16), 0 0 0 1px rgba(16, 36, 63, 0.06);
}
.sim-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.sim-dots { display: flex; gap: 6px; }
.sim-dots .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.sim-dots .dot.red { background: #ff5f56; }
.sim-dots .dot.yellow { background: #ffbd2e; }
.sim-dots .dot.green { background: #27c93f; }
.sim-title { font-size: .8125rem; font-weight: 600; color: var(--ink-2); letter-spacing: -.01em; }
.sim-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .6875rem;
  font-weight: 600;
  color: var(--accent-deep);
  background: var(--accent-wash);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(242, 181, 68, 0.35);
}
.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-deep);
  box-shadow: 0 0 6px var(--accent);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.7; }
}
.sim-body { padding: 18px 20px; }
.sim-controls {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.sim-control-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.sim-label { font-size: .8125rem; font-weight: 600; color: var(--ink-2); }
.sim-val-display { font-size: 1.125rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.sim-slider {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  outline: none;
  cursor: pointer;
  accent-color: var(--accent-deep);
  margin-bottom: 10px;
}
.sim-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.sim-preset-btn {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  font-size: .75rem;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .15s ease;
}
.sim-preset-btn:hover { border-color: var(--accent-deep); color: var(--ink); }
.sim-preset-btn.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  font-weight: 600;
}
.sim-ranking-list { display: flex; flex-direction: column; gap: 8px; }
.sim-card {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-soft);
  background: var(--surface);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.sim-card:hover { border-color: var(--line); transform: translateX(2px); }
.sim-card.is-winner {
  border: 1px solid rgba(242, 181, 68, 0.6);
  background: linear-gradient(180deg, #fffcf5 0%, var(--surface) 100%);
  box-shadow: 0 4px 16px -4px rgba(242, 181, 68, 0.25);
  position: relative;
}
:root[data-theme="dark"] .sim-card.is-winner {
  background: linear-gradient(180deg, #242118 0%, var(--surface) 100%);
  border-color: rgba(242, 181, 68, 0.4);
}
.sim-card.is-base { opacity: .88; }
.sim-card-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-2);
  font-size: .75rem;
  font-weight: 700;
  color: var(--ink-2);
  flex-shrink: 0;
  margin-top: 2px;
}
.sim-card.is-winner .sim-card-badge {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 0 8px rgba(242, 181, 68, 0.5);
}
.sim-card-main { flex: 1; min-width: 0; }
.sim-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.sim-card-name { font-size: .875rem; font-weight: 600; color: var(--ink); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-card-tags { display: flex; gap: 4px; }
.sim-tag {
  font-size: .6875rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--bg-2);
  color: var(--ink-3);
  border: 1px solid var(--line-soft);
}
.sim-tag.winner-tag {
  background: var(--accent-wash);
  color: var(--accent-deep);
  border-color: rgba(242, 181, 68, 0.4);
}
.sim-tag.muted-tag { background: transparent; }
.sim-card-metrics {
  display: grid;
  grid-template-columns: 1.1fr .9fr 1.1fr;
  gap: 6px;
  align-items: center;
}
.sim-metric { display: flex; flex-direction: column; }
.sim-m-lbl { font-size: .6875rem; color: var(--ink-3); white-space: nowrap; }
.sim-m-val { font-size: .8125rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.sim-m-val.highlight { font-size: .9375rem; font-weight: 700; color: var(--accent-deep); }
.sim-m-val.pos { color: var(--pos); }
.sim-footer { margin-top: 14px; text-align: center; }
.sim-cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--bg-2);
  border: 1px solid var(--line);
  transition: all .16s ease;
  width: 100%;
}
.sim-cta-link:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.sim-cta-link .ico { width: 12px; height: 12px; transition: transform .15s ease; }
.sim-cta-link:hover .ico { transform: translateX(3px); }

/* ---------- FAKTY ---------- */
.facts { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); padding: 0; }
.facts-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.fact { padding: 26px 28px 26px 0; }
.fact + .fact { border-left: 1px solid var(--line); padding-left: 28px; }
.fact b { display: block; font-size: 1.0625rem; color: var(--ink); font-weight: 600; margin-bottom: 5px; }
.fact span { font-size: .9375rem; color: var(--ink-3); line-height: 1.5; }

/* ---------- PROBLEM (WATERFALL CHART) ---------- */
.problem .head { max-width: 34ch; }
.problem .body { font-size: 1.0625rem; color: var(--ink-2); max-width: 62ch; }
.problem .body + .body { margin-top: 14px; }

.wf-interactive {
  margin-top: clamp(34px, 4vw, 52px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(20px, 3vw, 32px);
  box-shadow: var(--shadow-lift);
}
.wf-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}
.wf-model-tabs {
  display: flex;
  gap: 6px;
  background: var(--bg-2);
  padding: 4px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-soft);
}
.wf-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: transparent;
  border: 0;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .16s ease;
}
.wf-tab:hover { color: var(--ink); }
.wf-tab.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
}
.wf-presets { display: flex; align-items: center; gap: 6px; }
.wf-presets-label { font-size: .8125rem; color: var(--ink-3); margin-right: 4px; }
.wf-preset-chip {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--bg-2);
  border: 1px solid var(--line);
  font-size: .75rem;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .15s ease;
}
.wf-preset-chip:hover { border-color: var(--ink); color: var(--ink); }
.wf-preset-chip.is-active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  font-weight: 600;
}
.wf-table-wrap { overflow-x: auto; }
.wf-table { width: 100%; border-collapse: collapse; }
.wf-table caption { caption-side: bottom; text-align: left; font-size: .8125rem; color: var(--ink-3); padding-top: 18px; line-height: 1.5; max-width: 74ch; }
.wf-table th { text-align: left; font-weight: 400; padding: 10px 18px 10px 0; width: 34%; }
.wf-label-main { display: block; font-size: .9375rem; font-weight: 600; color: var(--ink); }
.wf-label-sub { display: block; font-size: .75rem; color: var(--ink-3); margin-top: 2px; }
.wf-table td.plot { width: 48%; padding: 10px 18px 10px 0; }
.wf-table td.val { text-align: right; width: 18%; padding: 10px 0; white-space: nowrap; }
.wf-track-wrap { width: 100%; height: 20px; background: var(--bg-2); border-radius: 6px; overflow: hidden; padding: 2px; display: flex; align-items: center; }
.wf-track {
  height: 100%;
  width: calc(var(--w, 1) * 100%);
  border-radius: 4px;
  transition: width .35s cubic-bezier(.16,1,.3,1);
  transform-origin: left center;
  /* Delikatny połysk od lewej — daje słupkowi głębię bez drugiego koloru,
     dzięki czemu barwa niesie wyłącznie znak przepływu. */
  background-image: linear-gradient(90deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 65%);
}
/* Kolor = znak przepływu, długość = kwota.
   Zielony: pieniądz wchodzi. Czerwony: pieniądz wychodzi.
   Oba z tokenów motywu, więc dark mode działa bez osobnych nadpisań. */
.wf-track.is-rev { background-color: var(--pos); }
.wf-track.is-comm,
.wf-track.is-fuel,
.wf-track.is-rent,
.wf-track.is-tax { background-color: var(--neg); }
.wf-track.is-net { background-color: var(--pos); }

.wf-val-pill {
  display: inline-block;
  font-size: .875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 3px 8px;
  border-radius: 6px;
}
/* Kwota trzyma ten sam kod koloru co jej słupek — inaczej niebieskie "+3 500 zł"
   stałoby obok zielonego paska i sugerowało dwie różne kategorie. */
.wf-val-pill.rev { color: var(--pos); background: var(--pos-wash); }
.wf-val-pill.deduct { color: var(--neg); background: var(--neg-wash); }

.wf-sum { border-top: 2px solid var(--line); }
.wf-sum th, .wf-sum td { padding-top: 18px; padding-bottom: 12px; }
.wf-sum-title .wf-sum-main { font-size: 1.0625rem; font-weight: 700; color: var(--ink); display: block; }
.wf-sum-title .wf-sum-sub { font-size: .75rem; color: var(--pos); font-weight: 500; display: block; margin-top: 2px; }
.wf-sum .wf-track-wrap { height: 26px; }
.wf-net-box { display: flex; flex-direction: column; align-items: flex-end; }
.wf-net-val { font-size: 1.375rem; font-weight: 700; color: var(--pos); line-height: 1.1; }
.wf-net-month { font-size: .8125rem; font-weight: 600; color: var(--ink-3); margin-top: 2px; }

.wf-callout {
  margin-top: 20px;
  background: var(--accent-wash);
  border: 1px solid rgba(242, 181, 68, 0.4);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.wf-callout-icon { font-size: 1.25rem; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.wf-callout-content strong { display: block; font-size: .875rem; color: var(--ink); margin-bottom: 3px; }
.wf-callout-content p { font-size: .8125rem; color: var(--ink-2); line-height: 1.5; margin: 0; }

/* ---------- KROKI ---------- */
.rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; counter-reset: step; }
.rail::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 1px; background: var(--line); }
.rail li { position: relative; padding: 0 26px 0 0; counter-increment: step; }
.rail li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-size: .8125rem;
  font-weight: 600;
  box-shadow: 0 0 0 5px var(--bg);
}
.rail li:last-child::before { background: var(--ink); color: var(--bg); }
.rail h3 { font-size: 1.0625rem; margin: 42px 0 7px; }
.rail p { font-size: .9375rem; color: var(--ink-3); line-height: 1.55; max-width: 26ch; }

/* ---------- CO ZOBACZYSZ (MODERN APP RESULTS PREVIEW) ---------- */
.see { overflow: hidden; background: var(--bg-2); border-block: 1px solid var(--line); }
.see-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.see-app-preview {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.see-app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.see-app-title { font-size: .8125rem; font-weight: 600; color: var(--ink-2); }
.see-status-badge { font-size: .6875rem; font-weight: 600; color: var(--pos); background: var(--pos-wash); padding: 2px 8px; border-radius: var(--r-pill); }
.see-app-body { padding: 18px 20px; }
.see-winner-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--accent-wash);
  border: 1px solid rgba(242, 181, 68, 0.4);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  margin-bottom: 14px;
}
.see-win-badge {
  background: var(--accent);
  color: var(--accent-ink);
  font-size: .6875rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.see-win-text { font-size: .8125rem; color: var(--ink); line-height: 1.4; }
.see-tabs-nav { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--line-soft); padding-bottom: 8px; }
.see-tab-btn {
  background: transparent;
  border: 0;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--ink-3);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all .15s ease;
}
.see-tab-btn:hover { color: var(--ink); background: var(--bg-2); }
.see-tab-btn.is-active {
  background: var(--ink);
  color: #fff;
  font-weight: 600;
}
.see-tab-panel { display: none; }
.see-tab-panel.is-active { display: block; animation: fadeIn .2s ease; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.see-rank-list { display: flex; flex-direction: column; gap: 8px; }
.see-rank-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-soft);
  background: var(--surface);
}
.see-rank-card.is-lead {
  border: 1px solid rgba(242, 181, 68, 0.6);
  background: linear-gradient(180deg, #fffcf5 0%, var(--surface) 100%);
  box-shadow: 0 4px 14px -4px rgba(242, 181, 68, 0.2);
}
:root[data-theme="dark"] .see-rank-card.is-lead {
  background: linear-gradient(180deg, #242118 0%, var(--surface) 100%);
  border-color: rgba(242, 181, 68, 0.4);
}
.see-rank-card.is-muted { opacity: .85; }
.see-rc-pos {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  color: var(--ink-2);
  flex-shrink: 0;
}
.see-rank-card.is-lead .see-rc-pos {
  background: var(--accent);
  color: var(--accent-ink);
}
.see-rc-info { flex: 1; min-width: 0; }
.see-rc-title-row { display: flex; align-items: center; gap: 8px; }
.see-rc-title-row h4 { font-size: .875rem; font-weight: 600; color: var(--ink); margin: 0; }
.see-badge-rec { font-size: .625rem; font-weight: 700; background: var(--accent-wash); color: var(--accent-deep); padding: 1px 6px; border-radius: var(--r-pill); border: 1px solid rgba(242, 181, 68, 0.4); }
.see-badge-alt { font-size: .625rem; font-weight: 600; background: var(--bg-2); color: var(--ink-3); padding: 1px 6px; border-radius: var(--r-pill); border: 1px solid var(--line-soft); }
.see-badge-base { font-size: .625rem; font-weight: 600; background: transparent; color: var(--ink-3); padding: 1px 6px; }
.see-rc-desc { font-size: .6875rem; color: var(--ink-3); margin-top: 2px; }
.see-rc-values { text-align: right; flex-shrink: 0; }
.see-rc-main-val { font-size: .9375rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.see-rank-card.is-lead .see-rc-main-val { color: var(--accent-deep); }
.see-rc-main-val small { font-size: .6875rem; font-weight: 500; color: var(--ink-3); }
.see-rc-sub-val { font-size: .6875rem; color: var(--ink-3); }
.see-rc-sub-val.pos { color: var(--pos); font-weight: 600; }

.see-chart-box {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 14px;
}
.see-chart-title { font-size: .8125rem; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.see-chart-item { margin-bottom: 10px; }
.see-ci-label { display: flex; justify-content: space-between; font-size: .75rem; color: var(--ink-2); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.see-ci-label .pos { color: var(--pos); font-weight: 700; }
.see-ci-label .neg { color: var(--neg); }
.see-ci-track-wrap { width: 100%; height: 14px; background: var(--surface); border-radius: 4px; overflow: hidden; padding: 2px; }
.see-ci-bar { height: 100%; width: var(--bw, 0%); border-radius: 3px; transition: width .4s ease; }
.see-ci-bar.is-lead { background: linear-gradient(90deg, #10b981, #059669); }
.see-ci-bar.is-alt { background: linear-gradient(90deg, #6366f1, #4f46e5); }
.see-ci-bar.is-base { background: linear-gradient(90deg, #94a3b8, #64748b); }
.see-ci-bar.is-zero { background: var(--neg); opacity: .4; }
.see-chart-note { font-size: .75rem; color: var(--ink-3); margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); line-height: 1.45; }

@media (min-width: 1024px) { .see-shot { margin-left: calc(-1 * min(4vw, 48px)); } }
.see-list li { padding: 18px 0; border-bottom: 1px solid var(--line); }
.see-list li:first-child { padding-top: 0; }
.see-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.see-list b { display: block; color: var(--ink); font-weight: 600; font-size: 1rem; margin-bottom: 5px; }
.see-list span { font-size: .9375rem; color: var(--ink-3); line-height: 1.55; }

/* ---------- KSIĘGA PORÓWNANIA (COMPARISON EXAMPLE) ---------- */
.comparison-section { padding-block: clamp(34px, 5vw, 68px); }
.ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); margin-top: 28px; }
.ledger-card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  padding: clamp(18px, 2.5vw, 28px);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ledger-card.is-own {
  border: 1px solid rgba(242, 181, 68, 0.6);
  background: linear-gradient(180deg, #fffcf5 0%, var(--surface) 100%);
  box-shadow: 0 8px 24px -6px rgba(242, 181, 68, 0.22);
}
:root[data-theme="dark"] .ledger-card.is-own {
  background: linear-gradient(180deg, #242118 0%, var(--surface) 100%);
  border-color: rgba(242, 181, 68, 0.4);
}
.ledger-header { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.ledger-tag {
  display: inline-block;
  font-size: .6875rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.ledger-tag.muted { background: var(--bg-2); color: var(--ink-3); border: 1px solid var(--line-soft); }
.ledger-tag.winner { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 8px rgba(242, 181, 68, 0.4); }
.ledger-header h3 { font-size: 1.1875rem; font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.ledger-sub { font-size: .8125rem; color: var(--ink-3); }
.ledger-rows { display: flex; flex-direction: column; }
.ledger-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; font-size: .875rem; color: var(--ink-2); }
.ledger-row + .ledger-row { border-top: 1px solid var(--line-soft); }
.ledger-row .v { color: var(--ink); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ledger-row .v.neg { color: var(--neg); }
.ledger-row .v.pos { color: var(--pos); }
.ledger-total {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 2px solid var(--line);
}
.ledger-total-main { display: flex; justify-content: space-between; align-items: baseline; font-size: .9375rem; font-weight: 600; color: var(--ink); }
.ledger-total-main .v { font-size: 1.375rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ledger-total.is-winner .ledger-total-main .v { color: var(--pos); }
.ledger-total-sub { display: flex; justify-content: space-between; align-items: baseline; font-size: .8125rem; color: var(--ink-3); margin-top: 4px; }
.ledger-total-sub .pos { color: var(--pos); font-weight: 600; }

.delta {
  margin-top: clamp(24px, 3vw, 36px);
  background: var(--accent-wash);
  border: 1px solid var(--accent);
  border-radius: var(--r);
  padding: clamp(18px, 2.5vw, 24px);
  display: flex;
  gap: 18px;
  align-items: center;
}
.delta-badge-icon { font-size: 2rem; line-height: 1; flex-shrink: 0; }
.delta-content b { display: block; font-size: clamp(1.375rem, 2.5vw, 1.75rem); color: var(--ink); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.delta-content b span { font-size: .9375rem; font-weight: 500; color: var(--accent-deep); letter-spacing: 0; margin-left: 6px; font-family: 'Geist', sans-serif; }
.delta-content p { font-size: .875rem; color: var(--ink-2); line-height: 1.55; margin: 8px 0 0; max-width: 78ch; }

/* ---------- FIT ---------- */
.fit { max-width: 68ch; }
.fit li { display: flex; gap: 16px; align-items: flex-start; padding: 17px 0; border-bottom: 1px solid var(--line-soft); font-size: 1rem; color: var(--ink-2); line-height: 1.55; }
.fit li:last-child { border-bottom: 0; }
.fit .ico { font-size: 1.25rem; margin-top: 2px; }
.fit .yes .ico { color: var(--pos); }
.fit .no { color: var(--ink-3); }
.fit .no .ico { color: var(--neg); }

/* ---------- CENNIK ---------- */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
table.pricing { border-collapse: collapse; width: 100%; min-width: 660px; }
table.pricing th, table.pricing td { padding: 15px 20px; text-align: left; font-size: .9375rem; }
table.pricing thead th { background: var(--deep-2); color: var(--on-deep); font-weight: 600; vertical-align: top; line-height: 1.35; }
table.pricing thead th.tier { text-align: center; }
table.pricing thead .price { display: block; font-size: 1.375rem; font-weight: 600; color: var(--accent); margin-top: 6px; }
table.pricing thead .rec {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: .6875rem;
  font-weight: 600;
  border-radius: var(--r-pill);
  padding: 3px 11px;
  margin-bottom: 8px;
  letter-spacing: .01em;
}
table.pricing tbody th { font-weight: 400; color: var(--ink-2); width: 40%; }
table.pricing tbody td { text-align: center; color: var(--ink-3); }
table.pricing tbody tr:nth-child(even) { background: var(--bg-2); }
table.pricing td.on { color: var(--pos); }
table.pricing td.on .ico { font-size: 1.125rem; margin-inline: auto; }
table.pricing td.off { color: var(--ink-3); opacity: .5; }
table.pricing tbody .hi { background: var(--accent-wash); }
table.pricing tbody tr:nth-child(even) .hi { background: #f2b5442e; }
table.pricing thead th.hi { box-shadow: inset 0 4px 0 var(--accent); }
.tlabel { display: none; }
.pricing-note { font-size: .875rem; color: var(--ink-3); margin-top: 16px; max-width: 74ch; line-height: 1.6; }
.proof {
  margin-top: clamp(28px, 3.5vw, 44px);
  background: var(--deep);
  color: var(--on-deep);
  border-radius: var(--r);
  padding: clamp(26px, 4vw, 40px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: clamp(24px, 4vw, 44px);
  align-items: center;
}
.proof h3 { color: #fff; font-size: 1.25rem; margin-bottom: 12px; }
.proof p { color: var(--on-deep-2); font-size: 1rem; line-height: 1.6; max-width: 62ch; }

/* ---------- DANE ---------- */
.privacy { background: var(--bg-2); border-block: 1px solid var(--line); }
.privacy-list { max-width: 70ch; }
.privacy-list li { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--line-soft); font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
.privacy-list li:last-child { border-bottom: 0; }
.privacy-list .ico { font-size: 1.3125rem; color: var(--accent-deep); margin-top: 2px; }
.privacy-list b { color: var(--ink); font-weight: 600; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 80ch; border-top: 1px solid var(--line); }
details.q { border-bottom: 1px solid var(--line); }
details.q summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 0;
  font-weight: 500;
  color: var(--ink);
  font-size: 1.0625rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  line-height: 1.4;
}
details.q summary::-webkit-details-marker { display: none; }
details.q summary .ico { font-size: 1.125rem; color: var(--ink-3); transition: transform .2s cubic-bezier(.16,1,.3,1); }
details.q[open] summary .ico { transform: rotate(180deg); }
details.q .a { padding: 0 0 22px; color: var(--ink-2); font-size: 1rem; line-height: 1.65; max-width: 68ch; }

/* ---------- CTA KOŃCOWE ---------- */
.close { background: var(--deep); color: var(--on-deep); text-align: center; }
.close h2 { color: #fff; font-size: clamp(1.55rem, 3.2vw, 2.35rem); max-width: 20ch; margin-inline: auto; }
.close p { color: var(--on-deep-2); margin: 16px auto 0; max-width: 50ch; font-size: 1.0625rem; }
.close .hero-ctas { justify-content: center; margin-top: 30px; }

/* ---------- STOPKA ---------- */
footer { background: var(--deep-2); color: var(--on-deep-2); padding: 40px 0; }
footer .shell { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; font-size: .875rem; line-height: 1.65; }
footer .legal { max-width: 62ch; }
footer b { color: #fff; font-weight: 600; }

/* ---------- DOCK ---------- */
.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 35;
  display: none;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 30px -18px #10243f5c;
  transform: translateY(105%);
  transition: transform .28s cubic-bezier(.16,1,.3,1);
}
.dock.is-up { transform: none; }
.dock .btn { width: 100%; }

/* ---------- MOTION ---------- */
html.motion [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--d, 0ms);
}
html.motion [data-reveal].is-in { opacity: 1; transform: none; }
/* Pasek zwija się do zera TYLKO wewnątrz kontenera [data-reveal] — bo dokładnie ten
   kontener dostaje .is-in od IntersectionObservera w Base.astro. Pasek poza takim
   kontenerem jest po prostu widoczny, zamiast zostać na zawsze przy scaleX(0).
   Wcześniej selektorem było `.wf.is-in`, a <figure> ma class="wf-interactive" id="wf",
   więc reguła nigdy nie trafiała i wszystkie słupki były niewidoczne. */
html.motion [data-reveal] .wf-track {
  transform: scaleX(0);
  transition: transform .85s cubic-bezier(.16,1,.3,1), width .35s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--d, 0ms), 0ms;
}
html.motion [data-reveal].is-in .wf-track { transform: scaleX(1); }

/* ---------- RESPONSYWNOŚĆ ---------- */
@media (max-width: 1023px) {
  .navlinks { display: none; }
  .topbar .row { gap: 16px; }
  .topbar .nav-actions { margin-left: auto; }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero h1 { max-width: 20ch; }
  .see-grid { grid-template-columns: 1fr; gap: 34px; }
  .rail { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .rail::before { display: none; }
  .rail li { padding-right: 20px; }
  .proof { grid-template-columns: 1fr; gap: 24px; }
  .delta { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 767px) {
  body { font-size: 16px; }
  .shell { width: min(100% - 24px, var(--maxw)); }
  .topbar .row {
    gap: 10px;
    height: 56px;
    justify-content: space-between;
  }
  .wordmark {
    flex-shrink: 0 !important;
    min-width: 95px;
  }
  .wordmark svg, .brand-logo {
    height: 30px;
    width: auto;
    max-width: 174px;
  }
  .nav-actions {
    gap: 6px;
    flex-shrink: 1;
    min-width: 0;
  }
  .lang-switch {
    padding: 2px 4px;
    gap: 2px;
  }
  .lang-btn {
    padding: 2px 4px;
    font-size: .75rem;
  }
  .topbar .btn-sm {
    padding: 6px 12px;
    font-size: .75rem;
    white-space: nowrap;
  }
  .sim-controls { padding: 10px; }
  .sim-card { padding: 10px; }
  .sim-card-metrics { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sim-card-metrics .sim-metric:last-child { grid-column: 1 / -1; }
  .wf-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .wf-model-tabs { width: 100%; justify-content: space-between; }
  .wf-tab { flex: 1; justify-content: center; padding: 6px 8px; font-size: .75rem; }
  .wf-presets { width: 100%; justify-content: space-between; }
  .see-tabs-nav { overflow-x: auto; padding-bottom: 6px; }
  .see-tab-btn { white-space: nowrap; font-size: .75rem; }
  .see-rank-card { flex-wrap: wrap; }
  .see-rc-values { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line-soft); padding-top: 6px; margin-top: 4px; }
  .delta { flex-direction: column; text-align: center; }
  .delta-content p { max-width: none; }
  .facts-grid { grid-template-columns: 1fr; }
  .fact { padding: 20px 0; }
  .fact + .fact { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .rail { grid-template-columns: 1fr; row-gap: 0; }
  .rail li { padding: 20px 0 20px 42px; border-bottom: 1px solid var(--line-soft); }
  .rail li:last-child { border-bottom: 0; }
  .rail li::before { top: 20px; box-shadow: none; }
  .rail h3 { margin: 0 0 6px; }
  .rail p { max-width: none; }
  .ledger { grid-template-columns: 1fr; gap: 20px; }
  .hero-ctas .btn { width: 100%; }
  .close .hero-ctas .btn { width: 100%; }
  .tablewrap { overflow: visible; border: 0; border-radius: 0; background: none; }
  table.pricing { min-width: 0; }
  table.pricing thead { display: none; }
  table.pricing tbody, table.pricing tbody tr, table.pricing tbody th, table.pricing tbody td { display: block; }
  .tlabel { display: block; font-size: .6875rem; color: var(--ink-3); margin-bottom: 6px; }
  table.pricing tbody tr, table.pricing tbody tr:nth-child(even) { background: none; }
  table.pricing tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 0 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line-soft); }
  table.pricing tbody tr:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
  table.pricing tbody th { grid-column: 1/-1; width: auto; padding: 0 0 10px; color: var(--ink); font-weight: 600; font-size: 1rem; }
  table.pricing tbody td { padding: 10px 8px; border-radius: var(--r-sm); background: var(--bg-2); line-height: 1.35; }
  table.pricing tbody .hi, table.pricing tbody tr:nth-child(even) .hi { background: var(--accent-wash); box-shadow: inset 0 0 0 1px #f2b54455; }
  table.pricing tbody tr.access { grid-template-columns: 1fr; }
  table.pricing tbody tr.access td { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; text-align: right; }
  table.pricing tbody tr.access .tlabel { margin-bottom: 0; text-align: left; flex: none; }
  body { padding-bottom: 78px; }
  .dock { display: block; }
}

@media (max-width: 420px) {
  .topbar .row { gap: 6px; }
  .topbar .btn-sm { padding: 5px 8px; font-size: 0.72rem; }
  .lang-switch .lang-btn:not(.active) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  html.motion [data-reveal] { opacity: 1; transform: none; }
  /* Musi mieć tę samą specyficzność co reguła zwijająca (html.motion [data-reveal] .wf-track),
     inaczej przy włączeniu redukcji ruchu już po załadowaniu strony słupki zostałyby ukryte. */
  html.motion [data-reveal] .wf-track { transform: none; }
  .dock { transform: none; }
}