/* ===========================================================================
   Bezpieczny Kod — wspólny arkusz (site.css)
   Rdzeń design systemu + nawigacja + footer + komponenty współdzielone.
   Mobile-first:  base = 0–767px · MD ≥768px · LG ≥1024px
   Docelowo → Jekyll: ten plik = _sass/site.scss, nav/footer = _includes.
   =========================================================================== */

/* ---------- Fonty self-hosted (RODO: zero Google CDN) ----------
   Inter 400/500/600/700 + IBM Plex Mono 400/500/600, subsety latin + latin-ext (PL znaki).
   Źródło: Google Fonts woff2 (pobrane 2026-07-02, tools/fonts/). unicode-range → przeglądarka bierze tylko potrzebne subsety. */
/* IBM Plex Mono 400 latin-ext */
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/ibm-plex-mono-400-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; }
/* IBM Plex Mono 400 latin */
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/ibm-plex-mono-400-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; }
/* IBM Plex Mono 500 latin-ext */
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/ibm-plex-mono-500-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; }
/* IBM Plex Mono 500 latin */
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/ibm-plex-mono-500-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; }
/* IBM Plex Mono 600 latin-ext */
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/ibm-plex-mono-600-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; }
/* IBM Plex Mono 600 latin */
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/ibm-plex-mono-600-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; }
/* Inter 400 latin-ext */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/inter-400-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; }
/* Inter 400 latin */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/inter-400-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; }
/* Inter 500 latin-ext */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/inter-500-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; }
/* Inter 500 latin */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/inter-500-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; }
/* Inter 600 latin-ext */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/inter-600-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; }
/* Inter 600 latin */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/inter-600-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; }
/* Inter 700 latin-ext */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/inter-700-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; }
/* Inter 700 latin */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/inter-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --ink:          oklch(0.15 0.02 250);
  --ink-2:        oklch(0.22 0.02 250);
  --ink-soft:     oklch(0.45 0.01 250);
  --ink-faint:    oklch(0.65 0.008 250);
  --rule:         oklch(0.88 0.006 250);
  --rule-dark:    oklch(0.28 0.01 250);
  --paper:        oklch(0.97 0.004 250);
  --canvas:       oklch(1 0 0);
  --accent:       oklch(0.72 0.16 150);
  --accent-ink:   oklch(0.22 0.08 150);

  --ff-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  --maxw: 1320px;
  --gut:  20px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ff-sans);
  color: var(--ink);
  background: var(--canvas);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img, svg { max-width: 100%; display: block; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.wrap-narrow { max-width: 800px; margin: 0 auto; padding: 0 var(--gut); } /* kolumna wpisu (tylko _wpisy). Ref. szer. tekstu: Substack 650 · Medium 680 · poprz. 780 · teraz 800 (~84 znaki) */
.section       { padding-top: 64px; padding-bottom: 64px; }
.section.tight { padding-top: 40px; padding-bottom: 40px; }
.section.loose { padding-top: 80px; padding-bottom: 80px; }
.paper { background: var(--paper); }
.ink   { background: var(--ink); color: var(--canvas); }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row.sb { justify-content: space-between; }
.hr { height: 1px; background: var(--rule); border: 0; }

/* ---------- Type scale (mobile base) ---------- */
.eyebrow {
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent);
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px;
}
.eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--accent); flex-shrink: 0; }

.display {
  font-size: 32px; line-height: 1.08; letter-spacing: -0.02em;
  font-weight: 600; text-wrap: balance;
}
.display em { font-style: normal; color: var(--accent); }
.headline { font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 600; text-wrap: balance; }
.sub { font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 600; }
.lead { font-size: 16px; line-height: 1.55; color: var(--ink-soft); max-width: 58ch; text-wrap: pretty; }
.small  { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.xsmall { font-size: 12px; line-height: 1.5; color: var(--ink-faint); font-family: var(--ff-mono); letter-spacing: 0.02em; }
.label  { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; }
.mono   { font-family: var(--ff-mono); }
.accent { color: var(--accent); }

/* ---------- Buttons (48px min hit target) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 20px; min-height: 48px;
  font-family: var(--ff-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
  border: 1px solid transparent; border-radius: 0;
  transition: transform 0.15s, background 0.15s, border-color 0.15s;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn-primary:hover { background: oklch(0.76 0.16 150); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover { border-color: var(--ink); background: var(--paper); }
.on-ink .btn-ghost, .hero .btn-ghost, .cta .btn-ghost, .subhero .btn-ghost { color: var(--canvas); border-color: oklch(0.45 0.01 250); }
.on-ink .btn-ghost:hover, .hero .btn-ghost:hover, .cta .btn-ghost:hover, .subhero .btn-ghost:hover { border-color: var(--canvas); background: oklch(0.22 0.015 250); }
.btn-row { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.btn-row .btn { width: 100%; }

/* ---------- NAV ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: var(--ink); border-bottom: 1px solid var(--rule-dark); color: var(--canvas); }
.nav-inner { max-width: var(--maxw); margin: 0 auto; padding: 14px var(--gut); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav-logo { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; letter-spacing: -0.01em; flex-shrink: 0; }
.nav-logo-glyph { height: 30px; width: auto; display: block; }
.nav-links { display: none; }
.nav-cta { display: none; }
.nav-lang { display: none; }
.nav-burger { width: 44px; height: 44px; display: grid; place-items: center; color: var(--canvas); flex-shrink: 0; }
.nav-burger svg { width: 22px; height: 22px; }

.nav-overlay { position: fixed; inset: 0; background: var(--ink); z-index: 100; display: flex; flex-direction: column; transform: translateX(100%); transition: none; overflow-y: auto; }
.nav-anim .nav-overlay { transition: transform 0.3s ease; }
.nav-overlay[data-open="true"] { transform: translateX(0); }
.nav-overlay-head { padding: 14px var(--gut); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--rule-dark); }
.nav-overlay-close { width: 44px; height: 44px; display: grid; place-items: center; color: var(--canvas); }
.nav-overlay-body { padding: 24px var(--gut); flex: 1; display: flex; flex-direction: column; }
.nav-overlay-body a { display: block; padding: 18px 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--canvas); border-bottom: 1px solid var(--rule-dark); }
.nav-overlay-body details { border-bottom: 1px solid var(--rule-dark); }
.nav-overlay-body details summary { list-style: none; padding: 18px 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--canvas); display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.nav-overlay-body details summary::-webkit-details-marker { display: none; }
.nav-overlay-body details summary::after { content: '+'; font-family: var(--ff-mono); font-weight: 400; font-size: 22px; color: var(--accent); }
.nav-overlay-body details[open] summary::after { content: '−'; }
.nav-overlay-body details a { padding: 12px 0; font-size: 16px; font-weight: 500; color: oklch(0.75 0.01 250); border: none; }
.nav-overlay-body details a small { display: block; font-family: var(--ff-mono); font-size: 11px; color: var(--ink-faint); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.08em; }
.nav-overlay-body details > div { padding-bottom: 16px; }
.nav-overlay-body a.nav-overlay-lang { font-family: var(--ff-mono); font-size: 15px; font-weight: 500; letter-spacing: 0.06em; color: var(--accent); text-transform: uppercase; }
.nav-overlay-body a.nav-overlay-lang:hover { color: var(--canvas); }
.nav-overlay-cta { margin-top: 32px; background: var(--accent); color: var(--accent-ink); padding: 18px; font-family: var(--ff-mono); font-size: 14px; font-weight: 600; text-align: center; letter-spacing: 0.02em; }

/* ---------- Subpage hero (subhero) ---------- */
.subhero { background: var(--ink); color: var(--canvas); position: relative; overflow: hidden; isolation: isolate; }
.subhero .wrap { position: relative; z-index: 1; }
.subhero .eyebrow { color: var(--accent); }
.subhero .lead { color: oklch(0.82 0.01 250); }
.subhero-meta { margin-top: 40px; border-top: 1px solid var(--rule-dark); border-bottom: 1px solid var(--rule-dark); display: flex; flex-direction: column; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: oklch(0.65 0.01 250); text-align: center; }
.subhero-meta span { padding: 14px 0; border-bottom: 1px dashed var(--rule-dark); }
.subhero-meta span:last-child { border-bottom: none; }
.subhero-meta strong { color: var(--canvas); font-weight: 500; }

/* ---------- Section head ---------- */
.section-head { margin-bottom: 40px; display: flex; flex-direction: column; gap: 20px; }
.section-head .lead { max-width: none; font-size: 15px; }
.section-head.tight { margin-bottom: 28px; }
@media (min-width: 1024px) { .section-head.tight { margin-bottom: 40px; } }

/* ---------- Service split + aside (strony usług) ---------- */
.split { display: flex; flex-direction: column; gap: 32px; }
.aside-card { border: 1px solid var(--rule); padding: 24px 20px; display: flex; flex-direction: column; gap: 18px; }
.aside-card .row-line { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--rule); font-size: 14px; }
.aside-card .row-line:first-of-type { padding-top: 0; }
.aside-card .row-line .k { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.aside-card .row-line .v { font-weight: 500; text-align: right; }
@media (min-width: 1024px) {
  .split { display: grid; grid-template-columns: 1fr 360px; gap: 56px; align-items: start; }
  .aside-card { position: sticky; top: 88px; }
}

/* ---------- Tier ladder (HUB) ---------- */
.ladder { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--rule); }
.tier { border-bottom: 1px solid var(--rule); padding: 32px 0; }
.tier-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 24px; }
.tier-kicker { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.tier-title { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; }
.tier-note { font-size: 14px; color: var(--ink-soft); line-height: 1.55; max-width: 64ch; }
.tier-cards { display: flex; flex-direction: column; gap: 14px; }

/* service card (used in hub + listings) */
a.svc-card, a.offer-card, a.post-card, a.case-card { cursor: pointer; }
.svc-card { border: 1px solid var(--rule); background: var(--canvas); padding: 24px 20px; display: flex; flex-direction: column; gap: 14px; transition: border-color 0.2s, transform 0.2s; }
a.svc-card:hover { border-color: var(--ink); transform: translateY(-1px); }
.svc-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.svc-card h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.svc-card .svc-for { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.svc-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.svc-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--rule); margin-top: auto; }
.svc-price { font-family: var(--ff-mono); font-size: 13px; color: var(--ink); }
.svc-price small { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-right: 6px; }
.svc-link { font-family: var(--ff-mono); font-size: 12px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
a.svc-card:hover .svc-link { color: var(--accent); }

/* ---------- Offer cards (3 paths) ---------- */
.offer-grid { display: flex; flex-direction: column; gap: 16px; }
.offer-card { padding: 28px 20px; border: 1px solid var(--rule); background: var(--canvas); display: flex; flex-direction: column; gap: 16px; transition: border-color 0.2s, transform 0.2s; }
.offer-card:hover { border-color: var(--ink); transform: translateY(-1px); }
.offer-card h3 { font-size: 24px; letter-spacing: -0.02em; font-weight: 600; }
.offer-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.offer-card ul { display: flex; flex-direction: column; gap: 8px; }
.offer-card li { font-size: 13px; color: var(--ink-soft); padding-left: 16px; position: relative; line-height: 1.5; }
.offer-card li::before { content: '→'; position: absolute; left: 0; color: var(--accent); font-family: var(--ff-mono); }
.offer-card-price { display: flex; align-items: baseline; gap: 10px; padding-top: 16px; margin-top: auto; border-top: 1px solid var(--rule); }
.offer-card-price .price-label { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.offer-card-price .price-value { font-family: var(--ff-mono); font-size: 18px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.offer-card-cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 16px; margin-top: auto; border-top: 1px solid var(--rule); font-family: var(--ff-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink); transition: color 0.15s; }
.offer-card-price + .offer-card-cta { border-top: none; padding-top: 0; margin-top: 0; }
.offer-card-cta .arrow { width: 36px; height: 36px; display: grid; place-items: center; background: var(--ink); color: var(--canvas); font-family: var(--ff-mono); flex-shrink: 0; transition: background 0.15s; }
.offer-card:hover .offer-card-cta .arrow { background: var(--accent); color: var(--accent-ink); }

/* ---------- Process steps (SERVICE) ---------- */
.steps { border-top: 1px solid var(--rule); counter-reset: step; }
.step { padding: 24px 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.step-num { counter-increment: step; font-family: var(--ff-mono); font-size: 13px; font-weight: 600; color: var(--accent-ink); background: var(--accent); width: 34px; height: 34px; display: grid; place-items: center; }
.step-num::before { content: counter(step, decimal-leading-zero); }
.step h4 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; }
.step p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; }

/* ---------- Spec / deliverables grid ---------- */
.spec-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.spec-cell { background: var(--canvas); padding: 22px 20px; }
.spec-cell .label { margin-bottom: 8px; }
.spec-cell .val { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.4; }
.spec-cell .val.big { font-family: var(--ff-mono); font-size: 22px; font-weight: 600; }

/* checklist (deliverables, "co dostajesz") */
.checklist { display: flex; flex-direction: column; gap: 14px; }
.checklist li { padding-left: 28px; position: relative; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.checklist li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.on-ink .checklist li { color: oklch(0.85 0.01 250); }

/* standards inline chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--ink-soft); border: 1px solid var(--rule); padding: 8px 12px; }
.on-ink .chip { color: oklch(0.82 0.01 250); border-color: var(--rule-dark); }

/* ---------- Standards rows (landing/about) ---------- */
.std-row { display: grid; grid-template-columns: 1fr; row-gap: 4px; padding: 16px 0; border-bottom: 1px dashed var(--rule); font-family: var(--ff-mono); font-size: 14px; align-items: baseline; }
.std-row:last-child { border-bottom: none; }
.std-title { line-height: 1.4; color: var(--ink); }
.std-cat { color: var(--ink-faint); font-size: 13px; line-height: 1.4; }

/* ---------- Case cards ---------- */
.case-grid { display: flex; flex-direction: column; gap: 16px; }
.case-card { border: 1px solid var(--rule); background: var(--canvas); padding: 28px 22px; display: flex; flex-direction: column; gap: 18px; transition: border-color 0.2s, transform 0.2s; }
.case-card:hover { border-color: var(--ink); transform: translateY(-1px); }
article.case-card { cursor: default; }
article.case-card:hover { border-color: var(--rule); transform: none; }
.case-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.case-no { font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--accent); white-space: nowrap; text-transform: uppercase; }
.case-sector { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); text-align: right; white-space: nowrap; }
.case-title { font-size: 21px; line-height: 1.25; letter-spacing: -0.015em; font-weight: 600; text-wrap: balance; }
.case-client { font-family: var(--ff-mono); font-size: 12px; color: var(--ink-soft); letter-spacing: 0.02em; margin-top: -8px; }
.case-quote { font-size: 17px; line-height: 1.45; letter-spacing: -0.01em; text-wrap: pretty; border-left: 2px solid var(--accent); padding-left: 16px; }
.case-attr { font-family: var(--ff-mono); font-size: 11px; line-height: 1.5; color: var(--ink-faint); letter-spacing: 0.02em; margin-top: 10px; padding-left: 18px; }
.case-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--rule); font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.02em; }
.case-service { color: var(--ink-faint); }
.case-link { color: var(--ink); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.case-link:hover { color: var(--accent); }
.case-card:hover .case-link { color: var(--accent); }

/* ---------- Testimoniale (ściana opinii) — desktop: grid 3-kol · mobile: marquee (jak proof-logos; .dup = pętla) ---------- */
.tm-wall { overflow: hidden; position: relative; }
.tm-track { display: flex; width: max-content; animation: tm-scroll 90s linear infinite; }
.tm-wall:hover .tm-track { animation-play-state: paused; }
.tm-card { flex: 0 0 auto; width: clamp(260px, 82vw, 320px); background: var(--canvas); border: 1px solid var(--rule); margin-right: -1px; padding: 24px 22px; display: flex; flex-direction: column; gap: 16px; }
.tm-card .tm-quote { font-size: 15px; line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; }
.tm-card .tm-author { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.tm-card .tm-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--rule); }
.tm-card .tm-author-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tm-card .tm-name { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
.tm-card .tm-role { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); line-height: 1.4; }
@keyframes tm-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (min-width: 768px) {
  .tm-track { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); width: auto; animation: none; }
  .tm-card { width: auto; margin-right: 0; border: none; }
  .tm-wall:hover .tm-track { animation-play-state: running; }
  .tm-track .dup { display: none; }
}
@media (min-width: 1024px) { .tm-track { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .tm-track { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); width: auto; animation: none; }
  .tm-card { width: auto; margin-right: 0; }
  .tm-track .dup { display: none; }
}

/* ---------- Listing toolbar + filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.filter { font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.04em; padding: 9px 14px; border: 1px solid var(--rule); color: var(--ink-soft); background: var(--canvas); cursor: pointer; transition: all 0.15s; text-decoration: none; }
.filter:hover { border-color: var(--ink); color: var(--ink); }
.filter[aria-pressed="true"], .filter[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--canvas); }

/* Paginacja listy (serwerowa) — spójna z .filter */
.pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--rule); }
.pager-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pager-btn { font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.04em; min-width: 40px; padding: 9px 12px; border: 1px solid var(--rule); color: var(--ink-soft); background: var(--canvas); text-align: center; line-height: 1; text-decoration: none; transition: all 0.15s; }
.pager-btn:hover:not([aria-current]):not([aria-disabled]) { border-color: var(--ink); color: var(--ink); }
.pager-btn[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--canvas); cursor: default; }
.pager-btn[aria-disabled="true"] { opacity: 0.3; cursor: not-allowed; pointer-events: none; }

/* ---------- Content cards (blog/podcast list) ---------- */
.post-grid { display: flex; flex-direction: column; gap: 16px; }
.post-card { border: 1px solid var(--rule); background: var(--canvas); padding: 24px 20px; display: flex; flex-direction: column; gap: 14px; transition: border-color 0.2s, transform 0.2s; }
.post-card:hover { border-color: var(--ink); transform: translateY(-1px); }
.post-meta { display: flex; align-items: center; gap: 10px; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); flex-wrap: wrap; }
.post-type { color: var(--accent-ink); background: var(--accent); padding: 4px 8px; font-weight: 600; letter-spacing: 0.04em; }
.post-type.podcast { color: var(--canvas); background: var(--ink); }
.post-card h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; text-wrap: balance; }
.post-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.post-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--rule); margin-top: auto; font-family: var(--ff-mono); font-size: 12px; }
.post-tag { color: var(--ink-faint); }
.post-link { color: var(--ink); font-weight: 600; display: inline-flex; gap: 6px; }
.post-card:hover .post-link { color: var(--accent); }

/* featured (first) content card */
.post-feature { border: 1px solid var(--ink); background: var(--ink); color: var(--canvas); padding: 32px 24px; display: flex; flex-direction: column; gap: 18px; }
.post-feature .post-meta { color: oklch(0.6 0.01 250); }
.post-feature h3 { font-size: 26px; line-height: 1.18; }
.post-feature p { color: oklch(0.82 0.01 250); font-size: 15px; line-height: 1.6; }
.post-feature .post-card-foot { border-top: 1px solid var(--rule-dark); }
.post-feature .post-link { color: var(--canvas); }

/* ---------- Article / episode prose ---------- */
.article-body { font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.article-body > * + * { margin-top: 24px; }
.article-body h2 { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin-top: 48px; color: var(--ink); }
.article-body h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin-top: 36px; color: var(--ink); }
.article-body p { text-wrap: pretty; }
.article-body a { color: var(--ink); border-bottom: 1px solid var(--accent); padding-bottom: 1px; }
.article-body a:hover { color: var(--accent); }
.article-body ul, .article-body ol { padding-left: 24px; display: flex; flex-direction: column; gap: 10px; }
.article-body ul li { list-style: none; position: relative; padding-left: 20px; }
.article-body ul li::before { content: '—'; position: absolute; left: 0; color: var(--accent); font-family: var(--ff-mono); }
.article-body ol { list-style: decimal; }
.article-body ol li { padding-left: 6px; }
.article-body blockquote { border-left: 2px solid var(--accent); padding: 4px 0 4px 22px; font-size: 20px; line-height: 1.45; letter-spacing: -0.01em; font-weight: 500; color: var(--ink); }
.article-body pre { background: var(--ink); color: oklch(0.9 0.01 250); padding: 20px; overflow-x: auto; font-family: var(--ff-mono); font-size: 13px; line-height: 1.6; }
.article-body code { font-family: var(--ff-mono); font-size: 0.88em; background: var(--paper); padding: 2px 5px; }
.article-body pre code { background: none; padding: 0; }
.article-body figure { margin: 28px 0; }
.article-body img { width: 100%; height: auto; }
.article-body figcaption { font-family: var(--ff-mono); font-size: 12px; color: var(--ink-faint); margin-top: 8px; }
.article-lede { font-size: 20px; line-height: 1.5; color: var(--ink-soft); letter-spacing: -0.01em; text-wrap: pretty; }

/* callout „Uwaga" — wydzielona uwaga/aside w treści artykułu (element systemu) */
.callout { border: 1px solid var(--rule); border-left: 3px solid var(--accent); background: var(--paper); padding: 22px 24px; margin: 32px 0; }
.callout .nb-label { font-family: var(--ff-sans); font-size: 15px; letter-spacing: -0.005em; color: var(--ink); margin-bottom: 14px; font-weight: 600; line-height: 1.5; }
.callout ul { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; }
.callout li { list-style: none; padding-left: 20px; position: relative; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.callout li::before { content: '—'; position: absolute; left: 0; color: var(--accent); font-family: var(--ff-mono); }
.callout .nb-foot { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.callout strong { color: var(--ink); font-weight: 600; }
.callout a { color: var(--ink); border-bottom: 1px solid var(--accent); padding-bottom: 1px; }
.callout a:hover { color: var(--accent); }

/* FAQ-box „Do zapamiętania" — sekcja FAQ artykułu (element systemu) */
.faq-box { border: 1px solid var(--rule); background: var(--paper); padding: 28px 24px; margin: 40px 0; }
.faq-box .label { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; margin-bottom: 4px; }
.faq-item { padding: 18px 0; border-top: 1px solid var(--rule); }
.faq-item:first-of-type { padding-top: 20px; }
.faq-q { font-weight: 600; font-size: 16px; line-height: 1.4; color: var(--ink); margin-bottom: 8px; letter-spacing: -0.01em; }
.faq-a { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.faq-a strong { color: var(--ink); font-weight: 600; }

/* closing — teza zamykająca sekcję „Co robić, jak żyć" (element systemu) */
.closing { font-size: 18px; line-height: 1.55; letter-spacing: -0.01em; color: var(--ink); font-weight: 500; border-top: 1px solid var(--rule); padding-top: 28px; margin-top: 8px; text-wrap: pretty; }

/* nl-inline — śródtekstowy, cichy nudge newslettera (lekki: hairline, bez fill). Własny mini-formularz w miejscu */
.nl-inline { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 20px 0; margin: 40px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.nl-inline .nl-inline-copy { flex: 1; min-width: 220px; }
.nl-inline .nl-inline-label { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 4px; }
.nl-inline .nl-inline-txt { font-size: 15px; line-height: 1.45; color: var(--ink-soft); }
.nl-inline form { display: flex; gap: 8px; flex: 1; min-width: 260px; }
.nl-inline input { flex: 1; min-width: 0; background: var(--canvas); color: var(--ink); border: 1px solid var(--rule); border-radius: 0; padding: 11px 13px; font-family: var(--ff-sans); font-size: 16px; min-height: 44px; }
.nl-inline input::placeholder { color: var(--ink-faint); }
.nl-inline input:focus { outline: none; border-color: var(--accent); }
.nl-inline button { background: var(--accent); color: var(--accent-ink); border: none; padding: 11px 16px; min-height: 44px; font-family: var(--ff-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; white-space: nowrap; transition: background 0.15s; }
.nl-inline button:hover { background: oklch(0.76 0.16 150); }

/* player (podcast) */
.player { border: 1px solid var(--rule-dark); background: oklch(0.20 0.015 250); padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.player-row { display: flex; align-items: center; gap: 16px; }
.player-btn { width: 52px; height: 52px; flex-shrink: 0; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; }
.player-btn svg { width: 20px; height: 20px; }
.player-bar { flex: 1; height: 4px; background: var(--rule-dark); position: relative; }
.player-bar::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 32%; background: var(--accent); }
.player-time { font-family: var(--ff-mono); font-size: 12px; color: oklch(0.7 0.01 250); white-space: nowrap; }
.player-platforms { display: flex; flex-wrap: wrap; gap: 8px; }
.player-platforms a { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.04em; color: oklch(0.8 0.01 250); border: 1px solid var(--rule-dark); padding: 8px 12px; }
.player-platforms a:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Contact form ---------- */
.cta { background: var(--ink); color: var(--canvas); }
.cta .eyebrow { color: var(--accent); }
.form-grid { display: flex; flex-direction: column; gap: 40px; }
.form-list { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.form-list li { padding-left: 28px; position: relative; font-size: 15px; line-height: 1.5; color: oklch(0.85 0.01 250); }
.form-list li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 600; }
.form { display: flex; flex-direction: column; gap: 14px; }
.form-field input, .form-field textarea, .form-field select {
  width: 100%; background: oklch(0.20 0.015 250); color: var(--canvas);
  border: 1px solid var(--rule-dark); border-radius: 0; padding: 16px;
  font-family: var(--ff-sans); font-size: 16px; line-height: 1.5; min-height: 52px;
  transition: border-color 0.15s, background 0.15s;
}
.form-field input::placeholder, .form-field textarea::placeholder { color: oklch(0.55 0.01 250); }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-color: var(--accent); background: oklch(0.22 0.015 250); }
.form-field textarea { min-height: 120px; resize: vertical; }
.form-consent { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; }
.form-consent input[type="checkbox"] { width: 24px; height: 24px; margin-top: 2px; flex-shrink: 0; border-radius: 0; appearance: none; -webkit-appearance: none; border: 1px solid oklch(0.5 0.01 250); background: oklch(0.20 0.015 250); cursor: pointer; display: grid; place-items: center; }
.form-consent input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.form-consent input[type="checkbox"]:checked::after { content: '✓'; color: var(--accent-ink); font-size: 16px; font-weight: 700; line-height: 1; }
.form-consent label { font-size: 13px; line-height: 1.55; color: oklch(0.72 0.01 250); }
.form-submit { margin-top: 8px; width: 100%; background: var(--accent); color: var(--accent-ink); padding: 16px; min-height: 52px; border-radius: 0; font-family: var(--ff-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: background 0.15s, transform 0.15s; }
.form-submit:hover { background: oklch(0.76 0.16 150); transform: translateY(-1px); }
.form-submit svg { width: 14px; height: 14px; }

/* ---------- FOOTER ---------- */
.footer { background: var(--ink); color: var(--canvas); padding: 56px var(--gut) 32px; }
.footer-inner { max-width: var(--maxw); margin: 0 auto; display: flex; flex-direction: column; gap: 40px; padding-bottom: 32px; border-bottom: 1px solid var(--rule-dark); }
.footer h2 { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: oklch(0.6 0.01 250); font-weight: 500; margin-bottom: 14px; } /* h2, nie h4: po sekcjach h2 przeskok na h4 łamał hierarchię nagłówków (axe heading-order) */
.footer ul { display: flex; flex-direction: column; gap: 10px; }
.footer li, .footer-cols a { font-size: 14px; color: oklch(0.82 0.01 250); cursor: pointer; line-height: 1.5; }
.footer li:hover, .footer-cols a:hover { color: var(--canvas); }
.footer-bottom { max-width: var(--maxw); margin: 0 auto; display: flex; flex-direction: column; gap: 12px; padding-top: 20px; font-family: var(--ff-mono); font-size: 11px; color: oklch(0.55 0.01 250); letter-spacing: 0.04em; }
.footer-bottom a:hover { color: var(--canvas); }
.footer-tag { color: oklch(0.75 0.01 250); font-size: 14px; margin-top: 14px; max-width: 30ch; font-style: italic; }
.footer-social { display: flex; gap: 16px; margin-top: 18px; }
.footer-social a { color: oklch(0.82 0.01 250); display: inline-flex; transition: color 0.15s ease; }
.footer-social a:hover { color: var(--canvas); }
.footer-social svg { width: 18px; height: 18px; display: block; }
.footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; }
.footer-cols > div:last-child { grid-column: span 2; }

/* =============================================================
   MD — tablet (≥768px)
   ============================================================= */
@media (min-width: 768px) {
  :root { --gut: 40px; }
  .section       { padding-top: 96px; padding-bottom: 96px; }
  .section.tight { padding-top: 56px; padding-bottom: 56px; }
  .section.loose { padding-top: 128px; padding-bottom: 128px; }
  .display  { font-size: 60px; letter-spacing: -0.035em; }
  .headline { font-size: 40px; letter-spacing: -0.025em; }
  .eyebrow  { font-size: 12px; }
  .lead     { font-size: 18px; }
  .btn-row { flex-direction: row; gap: 12px; align-items: center; }
  .btn-row .btn { width: auto; }

  .nav-burger { display: none; }
  .nav-links { display: flex; gap: 2px; margin-left: auto; margin-right: 16px; font-size: 14px; }
  .nav-links > * { padding: 10px 14px; color: oklch(0.85 0.01 250); cursor: pointer; position: relative; transition: color 0.15s; }
  .nav-links > *:hover { color: var(--canvas); }
  .nav-links a.active { color: var(--accent); }
  .nav-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--accent-ink); padding: 12px 18px; min-height: 44px; font-family: var(--ff-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
  .nav-cta:hover { background: oklch(0.76 0.16 150); }
  .nav-lang { display: inline-flex; align-items: center; font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--accent); padding: 10px 14px; margin-right: 8px; }
  .nav-lang:hover { color: var(--canvas); }

  .subhero-meta { flex-direction: row; gap: 24px; text-align: left; }
  .subhero-meta span { padding: 14px 0; border-bottom: none; flex: 1; }

  .section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; }

  .tier-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .tier-cards.three { grid-template-columns: repeat(3, 1fr); }

  .step { grid-template-columns: auto 1fr; gap: 24px; }
  .spec-grid { grid-template-columns: repeat(2, 1fr); }
  .spec-grid.four { grid-template-columns: repeat(4, 1fr); }

  .case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .case-card { padding: 36px 32px; }
  .case-quote { font-size: 18px; }

  .offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .offer-card { padding: 36px 28px; }
  .offer-card h3 { font-size: 26px; }

  .post-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .post-feature { grid-column: span 2; flex-direction: row; align-items: stretch; padding: 40px 36px; }
  .post-feature > div:first-child { flex: 1; display: flex; flex-direction: column; gap: 18px; }

  .std-row { grid-template-columns: 1fr auto; column-gap: 24px; align-items: baseline; padding: 18px 0; }
  .std-cat { text-align: right; font-size: 14px; }

  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
  .form-submit { width: auto; padding: 16px 28px; }

  .footer-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 28px; }
  .footer-cols { display: contents; }
  .footer-cols > div:last-child { grid-column: auto; }
  .footer-bottom { flex-direction: row; justify-content: space-between; }
}

/* =============================================================
   LG — desktop (≥1024px)
   ============================================================= */
@media (min-width: 1024px) {
  :root { --gut: 64px; }
  .section       { padding-top: 128px; padding-bottom: 128px; }
  .section.tight { padding-top: 64px; padding-bottom: 64px; }
  .section.loose { padding-top: 160px; padding-bottom: 160px; }
  .display  { font-size: 76px; }
  .headline { font-size: 52px; }
  .lead     { font-size: 19px; }

  .tier { padding: 44px 0; }
  .tier-title { font-size: 24px; }
  .case-card { padding: 40px 36px; }
  .offer-card { padding: 40px 32px; }
  .section-head { gap: 64px; margin-bottom: 64px; }
  .article-body { font-size: 18px; }
}

/* ===========================================================================
   Detail pages — hero (image bg) + case study (.cs-*)
   Skonsolidowane z inline bloków BNP/XTB (Faza 0)
   =========================================================================== */
/* ---------- HERO (reused on detail pages) ---------- */
.hero { background: var(--ink); color: var(--canvas); position: relative; overflow: hidden; isolation: isolate; }
.hero .eyebrow { color: var(--accent); }
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center right; opacity: 0.2; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.95) 40%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.95) 40%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%); }
.hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,10,14,0.55) 0%, rgba(8,10,14,0.15) 40%, rgba(8,10,14,0.85) 100%), linear-gradient(90deg, rgba(8,10,14,0.55) 0%, rgba(8,10,14,0) 55%); }
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: block; }
@media (min-width: 1024px) { .hero .hero-text { max-width: 640px; } .hero .hero-text .display { font-size: 72px; max-width: 24ch; } }

/* ---------- Case study (detal) ---------- */
.cs-client {
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: oklch(0.78 0.01 250);
  margin-top: 22px;
}
.cs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}
.cs-chip {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--canvas);
  border: 1px solid var(--rule-dark);
  padding: 8px 12px;
  white-space: nowrap;
}
.cs-chip strong { color: var(--accent); font-weight: 600; }

.cs-col { max-width: 760px; }
.cs-lead {
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}
.cs-lead strong { font-weight: 600; }
.cs-h2 {
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 18px 0 22px;
  text-wrap: balance;
}
.cs-section p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 16px;
  max-width: 68ch;
}
.cs-section p:last-child { margin-bottom: 0; }
.cs-section p strong { color: var(--ink); font-weight: 600; }

.cs-list { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }
.cs-list li {
  position: relative;
  padding-left: 26px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 66ch;
}
.cs-list li::before {
  content: '→';
  position: absolute; left: 0; top: 0;
  color: var(--accent);
  font-family: var(--ff-mono);
}
.cs-list li strong { color: var(--ink); font-weight: 600; }

/* Big quote band (dark) */
.cs-quote-band { background: var(--ink); color: var(--canvas); }
.cs-quote-band .eyebrow { color: var(--accent); }
.cs-bigquote {
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: -0.015em;
  font-weight: 500;
  text-wrap: pretty;
  max-width: 34ch;
  border-left: 2px solid var(--accent);
  padding-left: 24px;
  margin-top: 0;
}
.cs-bigquote-attr {
  font-family: var(--ff-mono);
  font-size: 12px;
  line-height: 1.6;
  color: oklch(0.7 0.01 250);
  letter-spacing: 0.02em;
  margin-top: 24px;
  padding-left: 26px;
}
.cs-bigquote-attr strong { color: var(--canvas); font-weight: 500; }

/* Quote band — editorial 2-col layout (label rail + wide quote) */
.cs-quote-layout { max-width: 1180px; }
@media (min-width: 860px) {
  .cs-quote-layout { display: grid; grid-template-columns: 190px 1fr; gap: 48px; align-items: start; }
  .cs-quote-layout > .eyebrow { margin-bottom: 0; padding-top: 10px; }
}

/* Case study — editorialowy rytm: szyna numeru (lewa) + treść (prawa). Opt-in przez .cs-rail */
.cs-section.cs-rail { display: grid; grid-template-columns: 190px 1fr; column-gap: 48px; max-width: 1180px; }
.cs-section.cs-rail > .eyebrow { grid-column: 1; margin: 0; padding-top: 0; align-self: start; }
.cs-section.cs-rail > .eyebrow + * { margin-top: 0; }
.cs-section.cs-rail > :not(.eyebrow) { grid-column: 2; }
@media (max-width: 859px) {
  .cs-section.cs-rail { display: block; max-width: 760px; }
  .cs-section.cs-rail > .eyebrow { padding-top: 0; margin-bottom: 18px; }
}

/* Related service card */
.cs-service-card {
  border: 1px solid var(--rule);
  background: var(--canvas);
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
  transition: border-color 0.2s, transform 0.2s;
}
.cs-service-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.cs-service-eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.cs-service-card h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; }
.cs-service-card p { font-size: 15px; color: var(--ink-soft); line-height: 1.55; }
.cs-service-link {
  font-family: var(--ff-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  display: inline-flex;
  gap: 6px;
  margin-top: 4px;
}
.cs-service-card:hover .cs-service-link { color: var(--accent); }

.cs-related-grid { display: flex; flex-direction: column; gap: 16px; }

@media (min-width: 768px) {
  .cs-lead { font-size: 23px; }
  .cs-h2 { font-size: 34px; }
  .cs-bigquote { font-size: 30px; }
}
@media (min-width: 1024px) {
  .cs-h2 { font-size: 38px; }
  .cs-bigquote { font-size: 36px; }
}


/* ===========================================================================
   Content detail pages — artykuł (blog) + odcinek (podcast)
   Skonsolidowane z inline bloków (Faza 0)
   =========================================================================== */
/* meta bar (wspólne) */
.art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: oklch(0.6 0.01 250); margin-bottom: 24px; }
.art-meta .post-type { color: var(--accent-ink); background: var(--accent); padding: 4px 8px; font-weight: 600; }
.art-meta .post-type.podcast { color: var(--canvas); background: oklch(0.30 0.015 250); padding: 4px 8px; font-weight: 600; }

/* tabela poziomów (artykuł) — responsywna, scroll w poziomie na mobile */
.tm-hint { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-faint); margin: 32px 0 8px; display: flex; align-items: center; gap: 8px; }
.tm-hint::before { content: '⇆'; color: var(--accent); }
@media (min-width: 940px) { .tm-hint { display: none; } }
.tm-table-wrap { overflow-x: auto; margin: 8px 0 32px; border: 1px solid var(--rule); -webkit-overflow-scrolling: touch; }
@media (min-width: 940px) { .tm-table-wrap { margin-top: 32px; } }
.tm-table { border-collapse: collapse; min-width: 940px; width: 100%; font-size: 13.5px; line-height: 1.5; background: var(--canvas); }
.tm-table th, .tm-table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); vertical-align: top; }
.tm-table tr:last-child td, .tm-table tr:last-child th { border-bottom: none; }
.tm-table td:last-child, .tm-table th:last-child { border-right: none; }
.tm-table thead th { background: var(--ink); color: var(--canvas); font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; border-right-color: var(--rule-dark); border-bottom: none; }
.tm-table tbody th { font-weight: 600; color: var(--ink); background: var(--paper); min-width: 150px; letter-spacing: -0.01em; font-size: 14px; }
.tm-table tbody td { color: var(--ink-soft); min-width: 150px; }
.tm-table td.num, .tm-table th.num { min-width: 0; width: 1%; white-space: nowrap; text-align: center; }
.tm-table strong { color: var(--ink); font-weight: 600; }

/* references (artykuł) */
.art-refs { font-size: 13px; line-height: 1.6; color: var(--ink-faint); border-top: 1px solid var(--rule); padding-top: 20px; margin-top: 40px; }
.art-refs strong { color: var(--ink-soft); font-weight: 600; }

/* rozdziały z timestampami (odcinek) */
.chapters { border-top: 1px solid var(--rule); margin: 8px 0 0; }
.chapter { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.chapter-time { font-family: var(--ff-mono); font-size: 13px; color: var(--accent); }
.chapter-title { font-size: 16px; line-height: 1.45; color: var(--ink-2); }

/* box gościa (odcinek) */
.guestbox { display: flex; align-items: center; gap: 14px; padding: 20px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: 40px 0; }
.guestbox-mark { width: 48px; height: 48px; flex-shrink: 0; background: var(--accent); color: var(--accent-ink); font-family: var(--ff-mono); font-weight: 700; font-size: 15px; display: grid; place-items: center; }
.guestbox .author-name { font-weight: 600; letter-spacing: -0.01em; }
.guestbox .author-role { font-family: var(--ff-mono); font-size: 12px; color: var(--ink-faint); margin-top: 2px; }

/* transkrypcja — dialog z etykietami mówców, zwijana (odcinek) */
.transcript { border: 1px solid var(--rule); margin: 8px 0 0; }
.transcript > summary { list-style: none; cursor: pointer; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--paper); font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); font-weight: 600; }
.transcript > summary::-webkit-details-marker { display: none; }
.transcript > summary .tr-toggle { color: var(--accent); }
.transcript > summary .tr-toggle::after { content: 'Pokaż +'; }
.transcript[open] > summary .tr-toggle::after { content: 'Ukryj −'; }
.transcript-body { padding: 8px 22px 22px; }
.tr-line { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.tr-line:last-child { border-bottom: none; }
.tr-spk { font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--accent-ink); background: var(--accent); padding: 3px 7px; justify-self: start; line-height: 1.3; }
.tr-spk.host { color: var(--ink); background: var(--rule); }
.tr-txt { font-size: 15px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.tr-note { font-family: var(--ff-mono); font-size: 11px; color: var(--ink-faint); letter-spacing: 0.02em; padding-top: 16px; line-height: 1.5; }

/* Embed odtwarzacza (YouTube/Spotify) w treści odcinka — responsywny 16:9 */
.video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 32px 0; border: 1px solid var(--rule); background: #000; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 560px) { .tr-line { grid-template-columns: 110px 1fr; } }

/* newsletter box (wspólny głos — koniec wpisu) */
.nl-box { border: 1px solid var(--ink); background: var(--ink); color: var(--canvas); padding: 28px 24px; margin: 40px 0; display: flex; flex-direction: column; gap: 16px; }
.nl-box .label { color: var(--accent); margin-bottom: 0; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.nl-box h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; text-wrap: balance; color: var(--canvas); }
.nl-box p { font-size: 14px; line-height: 1.55; color: oklch(0.78 0.01 250); max-width: 52ch; }
.nl-form { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.nl-form input { width: 100%; background: oklch(0.20 0.015 250); color: var(--canvas); border: 1px solid var(--rule-dark); border-radius: 0; padding: 14px 16px; font-family: var(--ff-sans); font-size: 16px; min-height: 50px; }
.nl-form input::placeholder { color: oklch(0.55 0.01 250); }
.nl-form input:focus { outline: none; border-color: var(--accent); }
.nl-form button { background: var(--accent); color: var(--accent-ink); border: none; padding: 14px 20px; min-height: 50px; font-family: var(--ff-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; white-space: nowrap; transition: background 0.15s; }
.nl-form button:hover { background: oklch(0.76 0.16 150); }
.nl-fine { font-family: var(--ff-mono); font-size: 11px; color: oklch(0.6 0.01 250); letter-spacing: 0.02em; }
@media (min-width: 560px) { .nl-form { flex-direction: row; } .nl-form input { flex: 1; } .nl-form button { width: auto; } }


/* ===========================================================================
   Proof — ściana logotypów klientów
   Desktop (≥768): statyczna ściana 6-kol · Mobile (<768): marquee
   prefers-reduced-motion → schludny grid 3-kol (bez ruchu)
   =========================================================================== */
.proof-logos { border: 1px solid var(--rule); overflow: hidden; position: relative; }
.proof-track { display: flex; width: max-content; animation: proof-scroll 60s linear infinite; }
.proof-logos:hover .proof-track { animation-play-state: paused; }
.proof-track > div { flex: 0 0 auto; width: 158px; height: 80px; display: grid; place-items: center; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-faint); border-right: 1px solid var(--rule); text-align: center; padding: 8px; }
.proof-track img { max-height: 26px; max-width: 78%; width: auto; height: auto; object-fit: contain; opacity: 0.6; transition: opacity 0.2s; }
.proof-track img.lg { max-height: 36px; }  /* znak kwadratowy / 2-wierszowy — wyrównanie optyczne */
.proof-track img.xl { max-height: 42px; }  /* gęsty/wielowierszowy lockup (BGK, TSH) */
@keyframes proof-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (min-width: 768px) {
  .proof-track { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--rule); width: auto; animation: none; }
  .proof-track > div { width: auto; height: 100px; border-right: none; background: var(--canvas); font-size: 12px; color: var(--ink-soft); transition: color 0.2s; }
  .proof-track > div:hover { color: var(--ink); }
  .proof-track img { max-height: 32px; }
  .proof-track img.lg { max-height: 46px; }
  .proof-track img.xl { max-height: 56px; }
  .proof-track > div:hover img { opacity: 1; }
  .proof-track .dup { display: none; }
  .proof-logos.cols-5 .proof-track { grid-template-columns: repeat(5, 1fr); } /* wariant: 10 logo (konferencje, O nas) */
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .proof-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); width: auto; animation: none; }
  .proof-track > div { width: auto; border-right: none; background: var(--canvas); }
  .proof-track .dup { display: none; }
}


/* CTA — odstęp head→przyciski skalowany jak reszta systemu (32 → 44 → 48) */
.cta .section-head { margin-bottom: 32px; }
@media (min-width: 768px) { .cta .section-head { margin-bottom: 44px; } }
@media (min-width: 1024px) { .cta .section-head { margin-bottom: 48px; } }

/* =============================================================
   Strony — style page-scoped (zwinięte z head-index/head-onas; jeden arkusz)
   ============================================================= */

/* Landing (index) */
/* ---------------------------------------------------------
   Landing v2 — TYLKO style specyficzne dla strony głównej.
   Wspólny design system: assets/site.css
   --------------------------------------------------------- */

/* ---------- Rotator (hero typewriter) ---------- */
.rotator-wrap { display: inline; white-space: nowrap; }

/* ---------- HERO meta (landing-only; .hero/.hero-bg/.hero-grid w site.css) ---------- */
.hero-meta { border-top: 1px solid var(--rule-dark); border-bottom: 1px solid var(--rule-dark); padding: 4px 0; margin-top: 56px; font-family: var(--ff-mono); font-size: 11px; color: oklch(0.65 0.01 250); letter-spacing: 0.06em; text-transform: uppercase; display: flex; flex-direction: column; text-align: center; }
.hero-meta span { padding: 14px 0; border-bottom: 1px dashed var(--rule-dark); }
.hero-meta span:last-child { border-bottom: none; }
.hero-meta span strong { color: var(--canvas); font-weight: 500; }


/* ---------- Value props ---------- */
.vprops { border-top: 1px solid var(--rule); }
.vprop { padding: 32px 0; border-bottom: 1px solid var(--rule); }
.vprops > .vprop:last-child { border-bottom: none; }
.vprop-num { font-family: var(--ff-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.1em; margin-bottom: 10px; }
.vprop-title { font-weight: 600; font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; margin-bottom: 12px; text-wrap: balance; }
.vprop-body { font-size: 15px; color: var(--ink-soft); line-height: 1.55; }

/* ---------- Landing-only card bits ---------- */
.case-more { margin-top: 20px; font-size: 14px; color: var(--ink-soft); }
.case-more a { color: var(--ink); border-bottom: 1px solid var(--accent); padding-bottom: 1px; }
.case-more a:hover { color: var(--accent); }

/* =============================================================
   MD — tablet (≥768px)
   ============================================================= */
@media (min-width: 768px) {
  .hero-meta { flex-direction: row; padding: 14px 0; gap: 24px; font-size: 11px; letter-spacing: 0.08em; text-align: left; }
  .hero-meta span { padding: 0; border-bottom: none; flex: 1; }
  .vprop-body-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
}

/* =============================================================
   LG — desktop (≥1024px)
   ============================================================= */
@media (min-width: 1024px) {
  .vprop { padding: 44px 0; }
  .vprop-title { font-size: 26px; }
}

/* O nas — founder */
  .founder { display: flex; flex-direction: column; gap: 24px; }
  .founder-mark { width: 96px; height: 96px; flex-shrink: 0; background: var(--accent); color: var(--accent-ink); font-family: var(--ff-mono); font-weight: 700; font-size: 28px; display: grid; place-items: center; }
  @media (min-width: 768px) { .founder { display: grid; grid-template-columns: 96px 1fr; gap: 32px; align-items: start; } }

/* Kontakt — ciemne tło body (było inline body style) */
body.on-ink { background: var(--ink); }

/* ---------- A11y baseline (2026-07-02): widoczny focus dla nawigacji klawiaturą.
   Na końcu pliku, żeby wygrać kaskadą z `outline: none` na :focus inputów (mysz → bez ringu, klawiatura → ring). */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
.form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible,
.nl-form input:focus-visible, .nl-inline input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Formularze — stany wysyłki (sekcja C, 2026-07-02) ---------- */
.form-ok { font-family: var(--ff-mono); font-size: 14px; line-height: 1.6; color: var(--accent); padding: 18px 0; }
.nl-box .form-ok { color: var(--accent); } /* bez tego .nl-box p wygrywa specyficznością i komunikat szarzeje */
.form-error { font-family: var(--ff-mono); font-size: 12px; line-height: 1.5; color: oklch(0.72 0.17 25); margin-top: 12px; }