/* ==========================================================================
   PIXELSTUFF — styles.css
   System wg wzorca Glitch Cat Club (docs/design-reference-glitch-cat-club.md)
   + 20 zasad web ze skilla power-design. Decyzja Michała 2026-10-09: zasady z rulebooka
   mają pierwszeństwo przed wcześniejszymi blokadami (ta gałąź = 8081; 8080 bez zmian).
   · kaskada mobile-first: baza = telefon, rozszerzenia w min-width 640/768/1024/1280 (#1/#2)
   · płynna typografia i odstępy przez clamp() z członem rem (#3); jedna skala modularna
     w stylu Utopia: 320 px → 16 px / 1.2, 1240 px → 18 px / 1.22 (#10)
   · tokeny semantyczne w OKLCH (--bg/--fg/--surface/--muted/--border/--accent…),
     motyw ciemny = marka (domyślny), motyw jasny przez prefers-color-scheme + [data-theme] (#12)
   · dwie rodziny: Changa (nagłówki, nazwa marki) + DM Mono (cała reszta) (#17)
   ========================================================================== */

/* ---------- Fonty (self-hosted, latin + latin-ext) ---------- */
@font-face { font-family: 'Changa'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('assets/fonts/changa-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Changa'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('assets/fonts/changa-latin-ext-wght-normal.woff2') format('woff2-variations');
  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: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/fonts/dm-mono-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/fonts/dm-mono-latin-ext-400-normal.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: 'DM Mono'; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url('assets/fonts/dm-mono-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url('assets/fonts/dm-mono-latin-ext-500-normal.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; }

/* Metric-adjusted fallbacki — zero CLS podczas ładowania */
@font-face { font-family: 'Changa Fallback'; src: local('Impact'), local('Arial Black'), local('Arial Bold');
  size-adjust: 97%; ascent-override: 98%; descent-override: 27%; line-gap-override: 0%; }
@font-face { font-family: 'DM Mono Fallback'; src: local('Menlo'), local('DejaVu Sans Mono'), local('Liberation Mono'), local('Courier New');
  size-adjust: 100%; ascent-override: 99%; descent-override: 31%; line-gap-override: 0%; }

/* ---------- Tokeny ---------- */
:root {
  color-scheme: dark;

  /* Skala typograficzna (power-design #3/#10) — jedna skala, płynna między 320 a 1240 px.
     320 px: baza 16 px, ratio 1.2 · 1240 px: baza 18 px, ratio 1.22.
     Role: step-6 = H1 · step-3 = H2 · step-2 = H3 · step-1 = lead · step-0 = tekst · step--1 = etykiety/przyciski · step--2 = drobiazgi.
     Proporcje do tekstu: H1 2.99–3.30 · H2 1.73–1.82 · H3 1.44–1.49 (rulebook: 2.5–4.0 · 1.6–2.2 · 1.25–1.5). */
  --step--2: clamp(0.6944rem, 0.6731rem + 0.1068vw, 0.7558rem);  /* 11.1 → 12.1 px */
  --step--1: clamp(0.8333rem, 0.8024rem + 0.1544vw, 0.9221rem);  /* 13.3 → 14.8 px */
  --step-0:  clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);          /* 16 → 18 px */
  --step-1:  clamp(1.2rem, 1.14rem + 0.3vw, 1.373rem);             /* 19.2 → 22 px */
  --step-2:  clamp(1.44rem, 1.358rem + 0.4077vw, 1.674rem);        /* 23 → 26.8 px */
  --step-3:  clamp(1.728rem, 1.618rem + 0.5475vw, 2.043rem);       /* 27.6 → 32.7 px */
  --step-4:  clamp(2.074rem, 1.928rem + 0.7281vw, 2.492rem);       /* 33.2 → 39.9 px */
  --step-5:  clamp(2.488rem, 2.296rem + 0.9604vw, 3.041rem);       /* 39.8 → 48.6 px */
  --step-6:  clamp(2.986rem, 2.734rem + 1.258vw, 3.709rem);        /* 47.8 → 59.4 px */

  /* Odstępy: siatka 8 pt na końcach, płynnie pomiędzy (power-design #3/#10) */
  --s-xs: .5rem; --s-sm: 1rem;
  --s-md: clamp(1rem, 0.8261rem + 0.8696vw, 1.5rem);        /* 16 → 24 */
  --s-lg: clamp(2rem, 1.652rem + 1.739vw, 3rem);            /* 32 → 48 */
  --s-xl: clamp(3rem, 1.261rem + 8.696vw, 8rem);            /* 48 → 128 — padding sekcji (formuła z rulebooka) */
  --s-card: clamp(1rem, 0.6522rem + 1.739vw, 2rem);         /* 16 → 32 — wnętrze dużych kart */
  --frame-max: 1440px;                                      /* powłoka 1200–1440 (#1); hero art ma własne 1800 */
  --frame-pad-x: clamp(1rem, 5vw, 4rem);                    /* gutter 16 → 64 */
  --frame-pad-y: clamp(0.75rem, 0.3152rem + 2.174vw, 2rem);
  --nav-h: clamp(3.5rem, 3.152rem + 1.739vw, 4.5rem);       /* 56 → 72 */
  --btn-py: 1rem; --btn-px: 1.5rem;                        /* przyciski: ≥16×24 px na każdej szerokości (rulebook #4) */
  --rule-col: clamp(3.5rem, 2.63rem + 4.348vw, 6rem);       /* kolumna numeru w liście problemów 56 → 96 */

  /* Paleta marki w OKLCH (power-design #12; wartości = Coolors Michała z 2026-10-07 przeliczone 1:1).
     Stałe niezależne od motywu: kolory wycinanek (kremowy papier, czarny tusz, cień) i akcenty jako WYPEŁNIENIA. */
  --brand-dark:    oklch(0.163 0.012 28);     /* #130c0b — ciepła, matowa czerń (2026-10-19 próba ciemniejszej #0a0606 cofnięta — Michał: za intensywna, widać każde zabrudzenie ekranu) */
  --paper:         oklch(0.984 0.042 106);    /* #fdfcdc — krem kartek */
  --ink:           oklch(0.129 0.008 18);     /* #0a0606 — tusz na papierze i na kolorowych kartach */
  --shadow:        oklch(0.115 0.011 19);     /* #080404 — twarde cienie wycinanek */
  --accent:        oklch(0.697 0.159 26.5);   /* #f07167 — koral */
  --accent-2:      oklch(0.686 0.117 202);    /* #00afb9 — turkus */
  --accent-2-deep: oklch(0.563 0.109 227);    /* #0081a7 — błękit (focus, hover) */
  --accent-deep:   oklch(0.56 0.17 27);       /* koral na kremie — numery na papierowych kartkach (≥4:1) */
  --accent-2-ink:  oklch(0.506 0.099 228);    /* #006f91 — błękit do drobnego tekstu na papierze (5.47:1) */
  --accent-3:      oklch(0.908 0.061 64.5);   /* #fed9b7 — brzoskwinia */

  /* Role (te same nazwy w obu motywach). Motyw ciemny = marka. */
  --bg:      var(--brand-dark);
  --fg:      var(--paper);
  --surface: oklch(0.194 0.015 26);                               /* karta na tle: odrobinę jaśniejsza czerń */
  --accent-text:   var(--accent);                                 /* akcenty jako TEKST na tle (w jasnym motywie — ciemniejsze odcienie tej samej barwy) */
  --accent-2-text: var(--accent-2);
  --accent-3-text: var(--accent-3);
  --muted:   color-mix(in oklch, var(--fg) 84%, transparent);
  --muted-2: color-mix(in oklch, var(--fg) 48%, transparent);     /* 4.84:1 na tle */
  --border:  color-mix(in oklch, var(--fg) 22%, transparent);
  --halo:      oklch(0 0 0 / .85);                                /* poświata pod tekstem hero (nad grafiką) */
  --halo-soft: oklch(0 0 0 / .6);
  --grain-invert: 0;
  --art-paper-shadow: none;
  --mascot-bg: transparent; --mascot-border: 0; --mascot-shadow: none;
  --icon-sun: block; --icon-moon: none;

  --font-display: 'Changa', 'Changa Fallback', Impact, sans-serif;
  --font-mono:    'DM Mono', 'DM Mono Fallback', ui-monospace, 'Cascadia Mono', Menlo, monospace;
  --font-body:    var(--font-mono);
}
/* Motyw jasny: systemowy (bez JS / bez zapisanego wyboru) … */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: oklch(0.965 0.03 98); --fg: var(--brand-dark); --surface: oklch(0.925 0.035 92);
    --accent-text: oklch(0.52 0.165 27); --accent-2-text: var(--accent-2-ink); --accent-3-text: oklch(0.55 0.12 60);
    --muted-2: color-mix(in oklch, var(--fg) 64%, transparent);
    --halo: color-mix(in oklch, var(--bg) 85%, transparent); --halo-soft: color-mix(in oklch, var(--bg) 60%, transparent);
    --grain-invert: 1; --art-paper-shadow: drop-shadow(6px 6px 0 color-mix(in oklch, var(--shadow) 22%, transparent));
    --mascot-bg: var(--brand-dark); --mascot-border: 2px; --mascot-shadow: 7px 7px 0 var(--shadow);
    --icon-sun: none; --icon-moon: block;
  }
}
/* … i wybrany ręcznie (przełącznik w nawigacji, zapamiętany w localStorage, ustawiany przed malowaniem skryptem w <head>) */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: oklch(0.965 0.03 98); --fg: var(--brand-dark); --surface: oklch(0.925 0.035 92);
  --accent-text: oklch(0.52 0.165 27); --accent-2-text: var(--accent-2-ink); --accent-3-text: oklch(0.55 0.12 60);
  --muted-2: color-mix(in oklch, var(--fg) 64%, transparent);
  --halo: color-mix(in oklch, var(--bg) 85%, transparent); --halo-soft: color-mix(in oklch, var(--bg) 60%, transparent);
  --grain-invert: 1; --art-paper-shadow: drop-shadow(6px 6px 0 color-mix(in oklch, var(--shadow) 22%, transparent));
  --mascot-bg: var(--brand-dark); --mascot-border: 2px; --mascot-shadow: 7px 7px 0 var(--shadow);
  --icon-sun: none; --icon-moon: block;
}

/* ---------- Baza ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; }
html.nav-open { overflow: hidden; }
main { overflow-x: clip; }   /* pasek zine ma scaleX(1.03) i wystawał 1,5 % za krawędź — zero poziomego przewijania na 320…1440 (#2) */
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
/* :where() = zerowa specyficzność, żeby .rules i inne listy mogły ustawić własny margin-top */
:where(ul[role="list"], ol[role="list"]) { list-style: none; margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent-2-deep); outline-offset: 3px; }   /* #13: błękit ≥4:1 na obu tłach i na papierze */
.skip { position: absolute; left: 12px; top: -60px; z-index: 300; padding: 12px 16px; min-height: 44px; display: inline-flex; align-items: center; background: var(--paper); color: var(--ink);
  font-family: var(--font-mono); font-size: var(--step--1); border-radius: 4px; }
.skip:focus { top: 12px; }
.skip:hover { text-decoration: underline; }
.skip:active { opacity: .7; }

/* ---------- Nav ---------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  background-color: color-mix(in oklch, var(--bg) calc(var(--nav-alpha, 0) * 100%), transparent); transition: background-color 80ms linear; }
.site-header .nav { max-width: var(--frame-max); margin-inline: auto; height: var(--nav-h); padding: 0 var(--frame-pad-x); }
.nav { display: flex; align-items: center; gap: var(--s-md); min-height: 48px; }
.nav__brand { display: flex; align-items: center; gap: 12px; min-height: 44px; }
/* logo i przełącznik motywu nad pełnoekranowym menu (z-index 200) — widoczne i klikalne, gdy menu otwarte; burger ma to samo niżej (#13/#18) */
.nav__brand, .theme-toggle { position: relative; z-index: 210; }
.nav__brand-mark { width: 40px; height: 40px; flex: 0 0 40px; filter: drop-shadow(2px 2px 0 var(--shadow)); }
.nav__brand-name { font-family: var(--font-display); font-weight: 800; font-size: var(--step-0); line-height: 1; text-transform: uppercase; color: var(--fg); letter-spacing: .01em; transition: color 180ms ease; }
.nav__pill { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-text); border: 1.5px solid var(--accent-text); padding: 4px 8px; border-radius: 4px; line-height: 1; }
.nav__links { display: none; margin: 0; }
.nav__link { font-family: var(--font-mono); font-weight: 500; font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--fg);
  transition: color 180ms ease; padding: 12px 0; display: inline-flex; align-items: center; min-height: 44px; }
.nav__link:hover, .nav__brand:hover .nav__brand-name { color: var(--accent-text); }
.nav__brand:active, .nav__link:active { opacity: .7; }
.nav__right { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.nav__right .btn--nav { display: none; }
/* Ikony 44×44 po prawej: przełącznik motywu (#12) i burger. Pięć stanów (#13). */
.theme-toggle, .nav__burger { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: transparent;
  border: 1px solid var(--border); border-radius: 6px; color: var(--fg); transition: border-color 180ms ease, color 180ms ease; }
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle__sun { display: var(--icon-sun); }
.theme-toggle__moon { display: var(--icon-moon); }
.theme-toggle:active { opacity: .7; }
.nav__burger { flex-direction: column; justify-content: space-between; align-items: stretch; padding: 12px 8px; margin-left: auto; position: relative; z-index: 210; }   /* stretch: wspólna reguła wyżej centruje, a puste <span> miałyby wtedy 0 szerokości */
.nav__burger span { display: block; height: 2px; background: var(--fg); border-radius: 2px; transition: transform 200ms ease, opacity 200ms ease; }
@media (hover: hover) { .theme-toggle:hover, .nav__burger:hover { border-color: var(--fg); } .theme-toggle:hover { color: var(--accent-text); } }
.nav__burger:active span { background: var(--accent-text); }
.nav.is-open .nav__burger span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
/* Pełnoekranowe menu (telefon/tablet) */
.nav.is-open .nav__links { display: flex; position: fixed; inset: 0; width: 100vw; height: 100dvh; z-index: 200;
  background: var(--bg); flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px;
  padding: calc(var(--nav-h) + 16px) var(--frame-pad-x) var(--s-xl); }
.nav.is-open .nav__link { font-family: var(--font-display); font-weight: 800; font-size: var(--step-5); line-height: 1; letter-spacing: -0.01em; text-transform: uppercase; padding: 12px 0; }
.nav.is-open .nav__link:hover { color: var(--accent-2-text); }
.nav__cta-mobile { display: block; margin-top: var(--s-md); }
@media (min-width: 1024px) {
  .nav__links, .nav.is-open .nav__links { display: flex; position: static; inset: auto; width: auto; height: auto; z-index: auto; background: transparent;
    flex-direction: row; justify-content: flex-start; align-items: center; gap: var(--s-sm); padding: 0; }
  .nav__link, .nav.is-open .nav__link { font-family: var(--font-mono); font-weight: 500; font-size: var(--step--1); line-height: normal; letter-spacing: .08em; padding: 12px 0; }
  .nav.is-open .nav__link:hover { color: var(--accent-text); }
  .nav__cta-mobile, .nav__burger { display: none; }
  .nav__right .btn--nav { display: inline-flex; }
}
@media (min-width: 1280px) { .nav__links, .nav.is-open .nav__links { gap: var(--s-md); } }

/* ---------- Przyciski cutout ---------- */
.btn {
  --fill: var(--paper); --text: var(--ink);
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  font-family: var(--font-mono); font-size: var(--step--1); font-weight: 500; letter-spacing: .005em; text-transform: uppercase;
  padding: var(--btn-py) var(--btn-px); background: var(--fill); color: var(--text);
  border: 2px solid var(--shadow); border-radius: 6px 14px 7px 13px;
  box-shadow: 5px 5px 0 var(--shadow), inset -3px -3px 0 oklch(0 0 0 / .22), inset 2px 2px 0 oklch(1 0 0 / .22);
  position: relative; white-space: nowrap; line-height: 1; overflow: hidden;
  transition: transform 180ms cubic-bezier(.2,.7,.3,1.2), box-shadow 180ms ease, filter 180ms ease;
}
.btn::after { content: ""; position: absolute; inset: 0; opacity: .16; pointer-events: none;
  background: linear-gradient(180deg, oklch(1 0 0 / .38), oklch(1 0 0 / .04) 36%, oklch(0 0 0 / .10) 100%),
              repeating-linear-gradient(-8deg, oklch(1 0 0 / .18) 0 1px, transparent 1px 7px);
  mix-blend-mode: overlay; }
.btn--primary { --fill: var(--accent); --text: var(--ink); }
.btn--ghost { --fill: transparent; --text: var(--fg); border-color: color-mix(in oklch, var(--fg) 55%, transparent); box-shadow: 5px 5px 0 var(--shadow); }
.btn--ghost::after { display: none; }
@media (hover: hover) {
  .btn--primary:hover { transform: translateY(-2px); box-shadow: 7px 7px 0 var(--shadow), inset -3px -3px 0 oklch(0 0 0 / .24), inset 2px 2px 0 oklch(1 0 0 / .24); filter: saturate(1.08); }
  .btn--ghost:hover { transform: translateY(-2px); border-color: var(--fg); box-shadow: 7px 7px 0 var(--shadow); }
}
/* active = wciśnięcie wycinanki w jej cień — na dotyku jedyny feedback */
.btn:active { transform: translate(3px, 3px); transition-duration: 80ms; box-shadow: 2px 2px 0 var(--shadow), inset -3px -3px 0 oklch(0 0 0 / .22), inset 2px 2px 0 oklch(1 0 0 / .22); }
.btn--ghost:active { box-shadow: 2px 2px 0 var(--shadow); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; filter: saturate(.3); pointer-events: none; box-shadow: 3px 3px 0 var(--shadow); }
.btn__arrow { font-family: var(--font-mono); }
.cta-row { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-md); margin-top: var(--s-xs); }
@media (min-width: 640px) { .cta-row { flex-direction: row; flex-wrap: wrap; align-items: center; } }
@media (min-width: 768px) {
  .btn { box-shadow: 7px 7px 0 var(--shadow), inset -4px -4px 0 oklch(0 0 0 / .22), inset 3px 3px 0 oklch(1 0 0 / .22); }
  .btn--primary { transform: rotate(-1deg); }
  .btn--ghost { transform: rotate(1deg); box-shadow: 7px 7px 0 var(--shadow), inset -2px -2px 0 oklch(1 0 0 / .04); }
  /* hover tylko przy kursorze — na dotyku uniesiony stan przyklejałby się po tapnięciu (#13) */
  @media (hover: hover) {
    .btn--primary:hover { transform: rotate(-1deg) translateY(-3px) translateX(-1px);
      box-shadow: 9px 9px 0 var(--shadow), inset -4px -4px 0 oklch(0 0 0 / .24), inset 3px 3px 0 oklch(1 0 0 / .24); filter: saturate(1.08); }
    .btn--ghost:hover { transform: rotate(1deg) translateY(-3px) translateX(1px); border-color: var(--fg);
      box-shadow: 9px 9px 0 var(--shadow), inset -2px -2px 0 oklch(1 0 0 / .06); }
  }
  .btn:active { transform: translate(4px, 4px); box-shadow: 3px 3px 0 var(--shadow), inset -4px -4px 0 oklch(0 0 0 / .22), inset 3px 3px 0 oklch(1 0 0 / .22); }
  .btn--primary:active { transform: rotate(-1deg) translate(4px, 4px); }
  .btn--ghost:active { transform: rotate(1deg) translate(4px, 4px); box-shadow: 3px 3px 0 var(--shadow), inset -2px -2px 0 oklch(1 0 0 / .06); }
}

/* ---------- Sekcje / frame ---------- */
.section { position: relative; width: 100%; overflow: hidden; overflow: clip; isolation: isolate; background: var(--bg); }
.frame { width: 100%; max-width: var(--frame-max); margin-inline: auto; padding: var(--frame-pad-y) var(--frame-pad-x);
  position: relative; z-index: 3; min-height: inherit; display: flex; flex-direction: column; }
.frame--section { padding-block: var(--s-xl); }

/* ---------- Hero ---------- */
.section--hero { min-height: 100svh; }
.section--hero .frame { padding-top: calc(var(--nav-h) + var(--s-md)); }
.hero__bg { position: absolute; inset: 0; max-width: 1800px; margin-inline: auto; z-index: 0; pointer-events: none; overflow: hidden; }
/* Hero art: warstwy wycinanki (CSS zamiast mp4). Każda warstwa ma własną pętlę o innym okresie (7–24 s).
   Tylko transform/opacity/stroke-dashoffset — bez layoutu (#15). Telefon: robot u dołu; od 768 px: kwadrat przy prawej krawędzi. */
.hero__art { position: absolute; top: calc(var(--nav-h) + 8px); right: -12%; width: min(84vw, 560px); aspect-ratio: 1 / 1; }
/* telefon i tablet: robot od razu widoczny u góry, ZA napisami (jak we wzorcu); czytelność daje scrim od lewej + cień liter.
   Przyciski wypadają już pod grafiką, więc nie nachodzą na robota (Michał 2026-10-15). */
@media (max-width: 1023px) {
  /* telefon/tablet jak we wzorcu (Michał 2026-10-15): hero = dokładnie wysokość ekranu; robot duży, jako tło całej sekcji;
     tekst u góry, przyciski przy dolnej krawędzi; rozmiary i odstępy liczone od wysokości ekranu (svh), więc każdy telefon widzi całość */
  .section--hero { height: 100svh; min-height: 540px; max-height: 1100px; }
  .section--hero .frame { height: 100%; padding-top: calc(var(--nav-h) + clamp(12px, 3svh, 32px)); padding-bottom: clamp(16px, 4svh, 40px); }
  .hero__body { flex: 1; margin-top: 0; min-height: 0; }
  .hero__copy { flex: 1; gap: clamp(8px, 1.8svh, 20px); max-width: none; }
  .hero__copy .display { font-size: min(var(--step-6), 6.6svh); }
  .hero__copy .sub { font-size: min(var(--step-0), 2.15svh); max-width: 34ch; }
  .hero__note { font-size: min(var(--step--1), 1.8svh); max-width: 36ch; }
  .hero__copy .cta-row { margin-top: auto; gap: clamp(10px, 1.6svh, 16px); }
  .hero__copy .btn { padding-block: clamp(12px, 1.9svh, 16px); }
  .hero__art { top: calc(var(--nav-h) + 2svh); bottom: auto; right: -34vw; width: max(112vw, 64svh); }
  .hero__art .art--squiggle { display: none; }
  .hero__bg::after { background:
      linear-gradient(90deg, color-mix(in oklch, var(--bg) 90%, transparent) 0%, color-mix(in oklch, var(--bg) 72%, transparent) 45%, color-mix(in oklch, var(--bg) 18%, transparent) 85%),
      linear-gradient(180deg, color-mix(in oklch, var(--bg) 40%, transparent) 0%, transparent 30%, transparent 75%, color-mix(in oklch, var(--bg) 45%, transparent) 100%); }
  /* napisy nad grafiką (Michał 2026-10-15): nagłówek bez wyraźnego cienia (miękka poświata jak na komputerze); podpis nad nim z cieniem pod literami;
     tekst pod nagłówkiem bez tła, tylko z cieniem pod literami (Michał 2026-10-16: ciemna wycinanka usunięta) */
  .hero__copy .eyebrow { text-shadow:
      -1px -1px 0 var(--bg), 1px -1px 0 var(--bg), -1px 1px 0 var(--bg), 1px 1px 0 var(--bg), 0 -1px 0 var(--bg), 0 1px 0 var(--bg), -1px 0 0 var(--bg), 1px 0 0 var(--bg),
      2px 3px 0 var(--bg), 0 0 3px var(--bg), 0 0 6px var(--bg), 0 0 10px var(--bg), 0 0 16px var(--bg), 0 0 24px var(--bg); }
  .hero__text { display: flex; flex-direction: column; gap: clamp(8px, 1.8svh, 20px); width: min(100%, 34ch); font-size: min(var(--step-0), 2.15svh); }
  .hero__text .sub, .hero__text .hero__note { max-width: none; text-shadow: 2px 2px 0 var(--bg), 0 0 6px var(--bg), 0 0 14px var(--bg); }   /* miękki cień: pod tekstem bywa jasny robot */
  .hero__text .hero__note { color: var(--fg); }   /* ta sama jasność co opis nad nią (Michał 2026-10-15) */
}
/* niskie telefony (np. 375×667): tekst na pełną szerokość, żeby tekst miał mniej linii i przyciski zmieściły się na ekranie */
@media (max-width: 1023px) and (max-height: 700px) { .hero__text { width: 100%; } }
@media (min-width: 640px) and (max-width: 1023px) {
  .hero__art { width: min(86vw, 70svh); right: -12vw; top: calc(var(--nav-h) + 4svh); }
  .hero__copy { max-width: 62vw; }
}
.art { position: absolute; display: block; overflow: visible; }
.art--blob { left: -6%; top: 0; width: 80%; height: 80%; transform-origin: 50% 50%; animation: art-breathe 11s ease-in-out infinite; }
.art__blob-fill { fill: color-mix(in oklch, var(--accent-2) 92%, transparent); }
.art__blob-dots { fill: url(#art-halftone); }
#art-halftone circle { fill: color-mix(in oklch, var(--ink) 28%, transparent); }
.art--paper { left: 20%; top: 20%; width: 58%; height: 70%; transform-origin: 50% 60%; filter: var(--art-paper-shadow); animation: art-wobble 9s ease-in-out infinite; }
/* kartka za robotem (Michał 2026-10-15: „zbyt biała, zlewa się z literami”): łososiowy krem, koralowe „kryształki”, raster z rogu, rzadkie kreski riso */
.art__paper-base { fill: color-mix(in oklch, var(--paper) 74%, var(--accent)); }
#art-ht-coral circle { fill: color-mix(in oklch, var(--accent) 80%, var(--accent-deep)); }
.art__paper-ht { opacity: .55; }
.art__paper-hatch path { stroke: var(--accent); stroke-width: 1.4; opacity: .4; }
.art__fleck { fill: var(--accent); opacity: .85; }
.art__fleck--deep { fill: var(--accent-deep); opacity: .8; }
.art__fleck--ink { fill: var(--ink); opacity: .55; }
.art__paper-edge { fill: none; stroke: var(--accent-deep); stroke-width: 3; stroke-linejoin: round; stroke-dasharray: 14 5 3 6; opacity: .55; }
.art__flecks { animation: art-shimmer 6s steps(1, end) infinite; }
@keyframes art-shimmer { 0%, 100% { opacity: 1; } 33% { opacity: .82; } 66% { opacity: .93; } }
/* dodatkowe warstwy tła: kreskowana koralowa plama (przenika spod kartki), brzoskwiniowy zawijas */
.art--hatch { left: 0; top: 44%; width: 52%; height: 46%; fill: url(#art-hatch-lines); transform-origin: 40% 50%; animation: art-hatch 13s ease-in-out infinite; }
#art-hatch-lines rect { fill: color-mix(in oklch, var(--accent) 85%, transparent); }
@keyframes art-hatch { 0%, 100% { transform: rotate(-4deg) translate(0, 0); } 50% { transform: rotate(3deg) translate(10px, -6px); } }
.art--scribble { left: 52%; top: 8%; width: 40%; height: 20%; fill: none; stroke: var(--accent-3); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 100; animation: art-draw 9s ease-in-out 1.5s infinite; }
.art--stroke { left: 28%; bottom: 3%; width: 72%; height: 24%; fill: none; stroke-linecap: round; stroke-linejoin: round; animation: art-slide 7s ease-in-out infinite; }
.art__stroke-main { stroke: var(--accent); stroke-width: 34; }
.art__stroke-dry { stroke: color-mix(in oklch, var(--ink) 22%, transparent); stroke-width: 30; stroke-dasharray: 5 15; }
.art--dots { display: none; left: 4%; bottom: 12%; width: 150px; height: 110px; background-image: radial-gradient(circle, color-mix(in oklch, var(--fg) 85%, transparent) 1.6px, transparent 2.2px); background-size: 12px 12px; animation: art-drift 8s ease-in-out infinite; }
.art--ring { display: none; right: 1%; top: 4%; width: 22%; height: 22%; fill: none; stroke: var(--accent-2); stroke-width: 3.5; stroke-dasharray: 10 8; animation: art-spin 24s linear infinite; }
.hero__robot { position: absolute; inset: 0; animation: bob 7s ease-in-out infinite; }
.hero__robot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hero__bg-media { filter: drop-shadow(8px 9px 0 color-mix(in oklch, var(--shadow) 55%, transparent)); }
/* Glitch robota: dwie kopie przycięte do pasów, przez ~0,3 s co 9 s przesunięte i przebarwione (koral / turkus) */
.hero__robot-glitch { opacity: 0; mix-blend-mode: screen; }
.hero__robot-glitch--a { clip-path: inset(28% 0 56% 0); filter: sepia(1) saturate(6) hue-rotate(-30deg) brightness(1.1); animation: glitch-a 9s steps(1, end) infinite; }
.hero__robot-glitch--b { clip-path: inset(56% 0 22% 0); filter: sepia(1) saturate(6) hue-rotate(135deg) brightness(1.1); animation: glitch-b 9s steps(1, end) 4.6s infinite; }
.art--squiggle { left: 1%; top: 60%; width: 34%; height: 14%; fill: none; stroke: var(--fg); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: art-draw 7s ease-in-out infinite; }
.art--star { right: 13%; top: -3%; width: 14%; height: 14%; transform-origin: 50% 50%; fill: var(--accent-3); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; animation: art-twirl 6s ease-in-out infinite; }
@keyframes art-breathe { 0%, 100% { transform: rotate(-2deg) scale(1); } 50% { transform: rotate(2deg) scale(1.04); } }
@keyframes art-wobble { 0%, 100% { transform: rotate(-3deg) translate(0, 0); } 50% { transform: rotate(1deg) translate(6px, -8px); } }
@keyframes art-slide { 0%, 100% { transform: translateX(0) rotate(-2deg); } 50% { transform: translateX(-14px) rotate(1deg); } }
@keyframes art-drift { 0%, 100% { transform: rotate(-8deg) translate(0, 0); } 50% { transform: rotate(-8deg) translate(6px, 5px); } }
@keyframes art-spin { to { transform: rotate(360deg); } }
@keyframes art-draw { 0% { stroke-dashoffset: 100; } 40%, 60% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -100; } }
@keyframes art-twirl { 0%, 70%, 100% { transform: rotate(0) scale(1); } 78% { transform: rotate(72deg) scale(1.2); } 86% { transform: rotate(144deg) scale(1); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes glitch-a { 0%, 92.9% { opacity: 0; transform: translateX(0); } 93% { opacity: .85; transform: translateX(-10px); } 93.4% { opacity: .85; transform: translateX(8px); } 93.8% { opacity: .7; transform: translateX(-5px); } 94.2%, 100% { opacity: 0; transform: translateX(0); } }
@keyframes glitch-b { 0%, 92.9% { opacity: 0; transform: translateX(0); } 93% { opacity: .85; transform: translateX(9px); } 93.4% { opacity: .85; transform: translateX(-7px); } 93.8% { opacity: .7; transform: translateX(4px); } 94.2%, 100% { opacity: 0; transform: translateX(0); } }
/* Scrimy (na telefonie robot stoi u dołu, więc dolny jest lekki — tekst jest nad nim, nie na nim) */
.hero__bg::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in oklch, var(--bg) 55%, transparent) 0%, color-mix(in oklch, var(--bg) 30%, transparent) 30%,
              color-mix(in oklch, var(--bg) 8%, transparent) 60%, color-mix(in oklch, var(--bg) 10%, transparent) 100%); }
.section--hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18%; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, color-mix(in oklch, var(--bg) 55%, transparent) 100%); }
.hero__body { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-start; margin-top: var(--s-lg); }
.hero__copy { display: flex; flex-direction: column; gap: var(--s-md); max-width: 600px; }
/* telefon: nota NAD przyciskami (nie wchodzi na grafikę) */
.hero__copy .cta-row { order: 1; }
.hero__copy .btn--ghost { --fill: color-mix(in oklch, var(--bg) 90%, transparent); }   /* grafika wchodzi pod przyciski — tekst musi mieć tło */
@media (min-width: 1024px) {
  .section--hero { min-height: max(640px, 100svh); }
  .hero__art { top: 50%; bottom: auto; right: 0; width: auto; height: min(78%, 50vw); transform: translateY(-46%); }
  .art--dots, .art--ring { display: block; }
  .hero__bg-media { filter: drop-shadow(12px 14px 0 color-mix(in oklch, var(--shadow) 55%, transparent)); }
  .hero__bg::after { background: linear-gradient(90deg, color-mix(in oklch, var(--bg) 42%, transparent) 0%, color-mix(in oklch, var(--bg) 22%, transparent) 28%,
    color-mix(in oklch, var(--bg) 5%, transparent) 50%, color-mix(in oklch, var(--bg) 8%, transparent) 58%, color-mix(in oklch, var(--bg) 22%, transparent) 78%, color-mix(in oklch, var(--bg) 40%, transparent) 100%); }
  .section--hero::after { height: 42%; background: linear-gradient(to bottom, transparent 0%, color-mix(in oklch, var(--bg) 40%, transparent) 40%, var(--bg) 100%); }
  .hero__body { justify-content: center; margin-top: var(--s-md); }
  .hero__text { display: contents; }   /* na komputerze tekst stoi na czarnym tle obok grafiki */
  .hero__copy .cta-row { order: 1; } .hero__copy .hero__note { order: 2; }
  .hero__copy .btn--ghost { --fill: transparent; }
}
@media (min-width: 1024px) { .hero__body .hero__copy { max-width: min(640px, 44vw); } }
/* komputer (Michał 2026-10-19): hero krótszy o taśmę z napisami, żeby cała taśma była na pierwszym ekranie, nie ucięta dolną krawędzią.
   Miejsce = taśma pod hero (50 px − 16 px zakładki) + przechył 1° (ok. 0,9vw na końcu) + cień 7 px + 12 px oddechu.
   Dolna granica 520 px zamiast 640, żeby zmieściło się też na laptopie z niskim oknem; przy wyższej treści hero i tak rośnie (min-height). */
@media (min-width: 1024px) { .section--hero { --ticker-room: calc(53px + .9vw); min-height: max(520px, calc(100svh - var(--ticker-room))); } }
/* niskie okno laptopa (np. 1366×768 z paskami przeglądarki ≈ 657 px): ciaśniejsze odstępy w tekście hero, żeby taśma też się zmieściła */
@media (min-width: 1024px) and (max-height: 760px) { .hero__body { margin-top: 0; } .hero__body .hero__copy { gap: var(--s-sm); } }
@media (min-width: 1280px) { .hero__copy .cta-row { flex-wrap: nowrap; } }
/* telefon (Michał 2026-10-16): przyciski dwa razy większe (pełna szerokość, wyższe, większy napis) i tuż pod robotem, nie przy dolnej krawędzi; robot cały na ekranie (prawa krawędź robota = 4 % grafiki od jej prawego brzegu);
   hero krótszy o taśmę z napisami, więc taśma jest na dole pierwszego ekranu. Stopy robota = 95,5 % wysokości grafiki; reguły po bazowych regułach hero (inaczej flex: 1 i margines nad tekstem je nadpisują).
   Gdy tekst kończy się niżej niż robot (niskie telefony), przyciski idą zaraz pod tekstem. */
@media (max-width: 639px) {
  .section--hero { --art-w: max(112vw, 64svh); --btn-h: clamp(52px, 8svh, 72px); --cta-gap: clamp(10px, 1.6svh, 16px);
    height: auto; min-height: max(500px, calc(100svh - 44px)); }
  .section--hero .frame { padding-bottom: clamp(18px, 3svh, 32px); }
  .hero__art { width: var(--art-w); right: calc(6px - var(--art-w) * .04); opacity: .5; }   /* przygaszona grafika: napisy na wierzchu (Michał 2026-10-16, O1) */
  .hero__body { flex: none; margin-top: 0; min-height: calc(2svh + var(--art-w) * .955 - clamp(12px, 3svh, 32px) + 2 * var(--cta-gap) + 2 * var(--btn-h)); }
  .hero__copy .cta-row { align-items: stretch; gap: var(--cta-gap); }
  .hero__copy .btn { justify-content: center; min-height: var(--btn-h); padding-block: 0; font-size: min(var(--step-1), 4.6vw); }
}

.eyebrow { margin: 0; font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-2-text); text-shadow: 0 1px 8px var(--halo); }
.eyebrow span { color: var(--accent-3-text); margin-right: 4px; }
.display { margin: 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--step-6);
  line-height: 1; letter-spacing: -0.02em; text-wrap: balance;
  --display-shadow: 0 2px 22px var(--halo), 0 1px 3px var(--halo-soft); text-shadow: var(--display-shadow); }
.display__line { display: block; }
/* Trzecia linia (puenta) jest dłuższa niż dwa słowa nad nią — dwa stopnie niżej na tej samej skali (#10), żeby została jedną linią */
.display__line--punch { font-size: var(--step-4); letter-spacing: -.01em; white-space: nowrap; margin-top: .08em; }
.display__line--cream { color: var(--fg);            animation: word-glitch 17s ease-out infinite; }
.display__line--teal  { color: var(--accent-2-text); animation: word-glitch 19s ease-out 6.4s infinite; }
.display__line--pink  { color: var(--accent-text);   animation: word-glitch 23s ease-out 12.1s infinite; }
/* Klatki spoczynkowe powtarzają bazowy cień .display (--display-shadow) — inaczej animacja zerowała poświatę przez 92 % cyklu */
@keyframes word-glitch {
  0%, 92%     { text-shadow: var(--display-shadow); transform: translateX(0) skewX(0); }
  92.2%       { text-shadow: 4px 0 var(--accent-text), -4px 0 var(--accent-2-text), var(--display-shadow); transform: translateX(-3px) skewX(-3deg); }
  92.6%       { text-shadow: -6px 0 var(--accent-text), 5px 0 var(--accent-2-text), var(--display-shadow); transform: translateX(4px) skewX(2deg); }
  93%         { text-shadow: 3px 0 var(--accent-text), -3px 0 var(--accent-2-text), var(--display-shadow); transform: translateX(-2px) skewX(0); }
  93.4%       { text-shadow: -5px 0 var(--accent-text), 4px 0 var(--accent-2-text), var(--display-shadow); transform: translateX(3px) skewX(-2deg); }
  93.8%       { text-shadow: 2px 0 var(--accent-text), -2px 0 var(--accent-2-text), var(--display-shadow); transform: translateX(-1px) skewX(1deg); }
  94.2%       { text-shadow: -2px 0 var(--accent-text), 1px 0 var(--accent-2-text), var(--display-shadow); transform: translateX(0); }
  94.6%, 100% { text-shadow: var(--display-shadow); transform: translateX(0) skewX(0); }
}
.cursor { display: inline-block; color: var(--accent-text); margin-left: 4px; animation: blink-real 8s steps(1, end) infinite; }
@keyframes blink-real {
  0%,6.6%{opacity:1} 6.7%,13.2%{opacity:0} 13.3%,19.8%{opacity:1} 19.9%,26.4%{opacity:0}
  26.5%,33%{opacity:1} 33.1%,39.6%{opacity:0} 39.7%,72%{opacity:1} 72.1%,74%{opacity:0}
  74.1%,76%{opacity:1} 76.1%,78%{opacity:0} 78.1%,84.7%{opacity:1} 84.8%,91.3%{opacity:0} 91.4%,100%{opacity:1}
}
.sub { margin: 0; font-family: var(--font-mono); font-size: var(--step-1); line-height: 1.5; color: var(--fg); max-width: 45ch;
  text-shadow: 0 1px 12px var(--halo); text-wrap: pretty; }
.hero__note { margin: 0; font-size: var(--step-0); line-height: 1.55; color: var(--muted); max-width: 48ch; text-shadow: 0 1px 10px var(--halo); text-wrap: pretty; }

/* ---------- Kicker / tytuł sekcji ---------- */
.kicker { margin: 0 0 var(--s-sm); font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .14em; text-transform: lowercase; color: var(--accent-2-text); }
.kicker span { color: var(--accent-3-text); margin-right: 8px; }
.sec-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: var(--step-3); line-height: 1.05; text-transform: uppercase; letter-spacing: -0.015em; text-wrap: balance; }
.sec-title__accent { color: var(--accent-text); }

/* ---------- Warstwa graficzna: ziarno, halftone, pasek ---------- */
/* Ziarno riso na całej stronie (matowość). W jasnym motywie odwrócone (ciemne ziarno na kremie). */
body::before { content: ""; position: fixed; inset: 0; z-index: 1000; pointer-events: none; opacity: .07; filter: invert(var(--grain-invert));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 .9 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px; }
/* Plamy halftone (kropki riso) za sekcjami — każda sekcja innym tuszem.
   Plama zawsze mieści się w CAŁOŚCI w pionie w swojej sekcji (Michał 2026-10-19: ucięcie na granicy sekcji wyglądało brzydko):
   bok = min(54vw, 820px, wysokość sekcji), pozycja góra/dół ≥ 0 — więc zanika miękko maską, nigdy na krawędzi sekcji.
   W poziomie może wychodzić za ekran (to naturalna krawędź). */
.section--audit::before, .section--why::before, .section--assistant::before, .section--cost::before, .section--flow::before, .section--skills::before, .section--process::before, .section--who::before, .section--faq::before, .section--contact::before {
  --ph: min(54vw, 820px, 100%);
  content: ""; position: absolute; z-index: 0; pointer-events: none; height: var(--ph); width: auto; aspect-ratio: 1;
  background: radial-gradient(circle, var(--dot) 1.3px, transparent 1.9px) 0 0 / 7px 7px;
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,.5) 36%, transparent 64%);
          mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,.5) 36%, transparent 64%); }
.section--audit::before   { --dot: color-mix(in oklch, var(--accent-2) 52%, transparent); right: -16vw; top: 0; }
.section--skills::before  { --dot: color-mix(in oklch, var(--accent-2) 50%, transparent); left: -18vw; bottom: 0; }
.section--process::before { --dot: color-mix(in oklch, var(--accent-2) 45%, transparent); left: -14vw; top: min(10%, 100% - var(--ph)); }
.section--why::before       { --dot: color-mix(in oklch, var(--accent-3) 42%, transparent); left: -18vw; top: 0; }
.section--assistant::before { --dot: color-mix(in oklch, var(--accent) 50%, transparent);   right: -14vw; bottom: 0; }
.section--cost::before      { --dot: color-mix(in oklch, var(--accent-2) 48%, transparent); left: -16vw; top: min(6%, 100% - var(--ph)); }
.section--flow::before      { --dot: color-mix(in oklch, var(--accent-3) 42%, transparent); right: -12vw; top: 0; }

.ticker { position: relative; z-index: 4; margin: -8px 0; background: var(--accent); color: var(--ink); overflow: hidden;
  border-block: 2px solid var(--shadow); box-shadow: 0 7px 0 var(--shadow); transform: rotate(-1deg) scaleX(1.03); }
.ticker__track { display: flex; width: max-content; padding: 8px 0; font-family: var(--font-mono); font-size: var(--step--1); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; animation: ticker 32s linear infinite; }
.ticker__track span { padding-right: 24px; }
.ticker__track span:nth-child(even) { color: var(--paper); }
@keyframes ticker { to { transform: translateX(-50%); } }
/* telefon: taśma o połowę mniej kolorowa (koral w pół z tłem), żeby nie rywalizowała z przyciskiem nad nią (Michał 2026-10-16) */
@media (max-width: 639px) {
  .ticker { background: color-mix(in srgb, var(--accent) 50%, var(--bg)); color: var(--fg); }   /* srgb: w oklch jasny motyw zjeżdżał w pomarańcz */
  .ticker__track span:nth-child(even) { color: var(--accent); }
}
@media (min-width: 768px) { .ticker { margin-top: -16px; } .ticker__track { padding: 12px 0; animation-duration: 48s; } .ticker__track span { padding-right: 32px; } }

/* ---------- Sekcje: wspólne ---------- */
.lede { margin: var(--s-md) 0 0; max-width: 60ch; font-size: var(--step-0); line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.lede b, .closing b, .argument b { color: var(--fg); font-weight: 500; }

/* ---------- Problem: lista redakcyjna (celowo NIE karty — karty są w „co potrafię”) ---------- */
.rules { display: grid; grid-template-columns: 1fr; gap: 0; margin: var(--s-lg) 0 0; max-width: 820px; border-top: 2px dashed var(--border); }
.rule { position: relative; display: grid; grid-template-columns: var(--rule-col) minmax(0, 1fr); gap: var(--s-md); padding: var(--s-card) 0; border-bottom: 2px dashed var(--border); }
.rule__num { font-family: var(--font-display); font-weight: 800; font-size: var(--step-5); line-height: 1; letter-spacing: -.03em; color: var(--accent-text); }
.rule:nth-child(2) .rule__num { color: var(--accent-2-text); } .rule:nth-child(3) .rule__num { color: var(--accent-3-text); }
.rule__title { margin: 0 0 12px; font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); line-height: 1.1; text-transform: uppercase; letter-spacing: .005em; color: var(--fg); text-wrap: balance; }
/* „marker” pod tytułem — pas koloru jak zakreślacz, w kolorze numeru */
.rule__title { --marker: color-mix(in oklch, var(--accent) 38%, transparent); background-image: linear-gradient(transparent 62%, var(--marker) 62%, var(--marker) 92%, transparent 92%); background-repeat: no-repeat; display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.rule:nth-child(2) .rule__title { --marker: color-mix(in oklch, var(--accent-2) 38%, transparent); } .rule:nth-child(3) .rule__title { --marker: color-mix(in oklch, var(--accent-3) 34%, transparent); }
.rule__text { min-width: 0; }
.rule__body { margin: 12px 0 0; max-width: 56ch; font-size: var(--step-0); line-height: 1.6; color: var(--muted); text-wrap: pretty; }

.note-paper { position: relative; margin: var(--s-lg) auto 0; max-width: 760px; padding: var(--s-md) var(--s-card); background: var(--paper); color: var(--ink);
  border: 2px solid var(--shadow); border-radius: 5px 12px 6px 11px; box-shadow: 7px 7px 0 var(--shadow); transform: rotate(.5deg); }
.note-paper::before, .audit::before { content: ""; position: absolute; top: -13px; left: 50%; width: 96px; height: 24px; transform: translateX(-50%) rotate(-3deg);
  background: color-mix(in oklch, var(--accent-2) 78%, transparent); border: 1px solid oklch(0 0 0 / .18); }
.note-paper p { margin: 0; font-size: var(--step-0); line-height: 1.55; text-wrap: pretty; }
.note-paper b { color: var(--accent-2-ink); font-weight: 500; }

/* ---------- Co potrafię: karty kolorowe ---------- */
/* 6 kart → 1 kolumna → 2 (640) → 3 (1024); kolory tak, żeby w kolumnie nic się nie powtarzało */
.why-card { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: var(--s-md); color: var(--ink);
  border: 2px solid var(--shadow); border-radius: 5px 12px 6px 11px; box-shadow: 7px 7px 0 var(--shadow); }
.why-card--pink  { background: var(--accent);   transform: rotate(-.6deg); }
.why-card--teal  { background: var(--accent-2); transform: rotate(.5deg); }
.why-card--peach { background: var(--accent-3); transform: rotate(-.4deg); }
.why-card--paper { background: var(--paper);    transform: rotate(.3deg); }
.why-card__glyph { position: absolute; right: -22px; bottom: -26px; width: 160px; height: 160px; fill: none; stroke: var(--ink); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; opacity: .16; }
.why-card__num { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .16em; opacity: .75; }
.why-card__tag { margin: 12px 0 0; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase; opacity: .72; }
.why-card__title { margin: 16px 0 12px; font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); line-height: 1.1; text-transform: uppercase; letter-spacing: -.005em; }
.why-card__body { position: relative; margin: auto 0 0; max-width: 30ch; font-size: var(--step-0); line-height: 1.5; font-weight: 500; text-wrap: pretty; }

.argument { margin: var(--s-md) 0 0; max-width: 65ch; font-size: var(--step-0); line-height: 1.55; color: var(--muted); text-wrap: pretty; }

.audit { position: relative; display: flex; flex-direction: column; margin: 0; padding: var(--s-card); background: var(--paper); color: var(--ink);
  border: 2px solid var(--shadow); border-radius: 6px 14px 7px 13px; box-shadow: 8px 8px 0 var(--shadow); transform: rotate(-.6deg); }
.audit::before { left: 40px; transform: rotate(-6deg); background: color-mix(in oklch, var(--accent) 80%, transparent); }
.audit .btn { margin-top: auto; align-self: flex-start; }
.btn--on-paper { --text: var(--ink); border-color: var(--shadow); }
.btn--on-paper:hover { border-color: var(--shadow); }
.audit__kicker { margin: 0; font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2-ink); }
.audit__title { margin: 12px 0 12px; font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); line-height: 1.1; text-transform: uppercase; text-wrap: balance; }
.audit__body { margin: 0 0 24px; max-width: 65ch; font-size: var(--step-0); line-height: 1.55; color: color-mix(in oklch, var(--ink) 82%, transparent); text-wrap: pretty; }
.audit__body b { color: var(--ink); font-weight: 500; }

/* ---------- Darmowy audyt (copy v4 §3.2): największa sekcja; jeden element główny = kartka z terminem ---------- */
.sec-title--xl { font-size: var(--step-4); }
.audit-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-lg); margin-top: var(--s-lg); align-items: start; }
.audit-grid .rules { margin-top: 0; }
.audit--book { margin-top: var(--s-sm); transform: rotate(-.6deg); }
.audit--book::before { left: 40px; right: auto; transform: rotate(-6deg); background: color-mix(in oklch, var(--accent-2) 78%, transparent); }
.audit__title--big { font-size: var(--step-3); }
.booking { position: relative; margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.booking__hint { margin: 0; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .06em; line-height: 1.5; color: color-mix(in oklch, var(--ink) 66%, transparent); }
/* Kalendarz Calendly — osadzony w kartce; ładuje się w tle i czeka niewidoczny (is-preload), klik tylko go pokazuje (Michał 2026-10-19).
   Czekając, ma pełną szerokość i wysokość (zero miejsca na stronie, obcięty do 0) — Calendly od razu układa się na właściwy rozmiar. */
.booking__frame { width: 100%; margin-top: var(--s-sm); border: 2px solid var(--shadow); border-radius: 4px; overflow: hidden; background: var(--paper); }
.booking__frame.is-preload { position: absolute; left: 0; right: 0; top: 0; width: auto; height: 0; margin: 0; border: 0; visibility: hidden; }   /* poza układem: bez dodatkowej przerwy w kartce */
.booking__frame iframe { display: block; width: 100%; height: clamp(640px, 92vh, 860px); border: 0; }
.audit--book.is-open { transform: none; }
.audit-notes { display: grid; gap: var(--s-sm); margin-top: var(--s-lg); max-width: 760px; }
.audit-note { margin: 0; font-size: var(--step-0); line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.audit-note b { color: var(--fg); font-weight: 500; }
@media (min-width: 1024px) {
  .audit-grid { grid-template-columns: minmax(0, 1fr) minmax(360px, 420px); gap: var(--s-lg); }
  .audit--book { margin-top: 0; }   /* bez „przyklejania” przy przewijaniu — kartka stoi w miejscu (Michał 2026-10-19) */
}
@media (min-width: 1280px) { .audit-grid { grid-template-columns: minmax(0, 1fr) minmax(420px, 520px); gap: var(--s-xl); } }

/* ---------- Dlaczego własna strona (copy v4 §3.3): jedna duża liczba GUS, obok argument i druga liczba ---------- */
.stat-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-lg); margin-top: var(--s-lg); align-items: start; }
.stat { margin: 0; }
/* riso: koralowa liczba z odbitym turkusem (lekko „niedopasowane” nadruki) */
.stat__num { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(6rem, 3.5rem + 12vw, 13rem); line-height: .9; letter-spacing: -.04em; color: var(--accent-text);
  text-shadow: .05em .05em 0 color-mix(in oklch, var(--accent-2) 70%, transparent); }
.stat__unit { margin-left: .06em; font-size: .5em; color: var(--accent-2-text); text-shadow: .05em .05em 0 color-mix(in oklch, var(--accent) 60%, transparent); }
.stat__caption { margin-top: var(--s-sm); max-width: 36ch; }
.stat__what { margin: 0; font-size: var(--step-1); line-height: 1.35; color: var(--fg); text-wrap: pretty; }
.stat__source { display: block; margin: 12px 0 0; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .04em; line-height: 1.5; color: var(--muted-2); }
.stat-text { max-width: 60ch; }
.argument { margin: 0; font-size: var(--step-0); line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.stat-minor { margin: var(--s-md) 0 0; padding-top: var(--s-md); border-top: 2px dashed var(--border); font-size: var(--step-0); line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.stat-minor b { color: var(--fg); font-weight: 500; }
.stat-minor .stat__source { margin-top: 8px; }
.note-paper--bridge { margin: var(--s-lg) 0 0; max-width: 520px; transform: rotate(-.6deg); }
.note-paper--bridge::before { left: 36px; transform: rotate(-5deg); background: color-mix(in oklch, var(--accent) 80%, transparent); }
@media (min-width: 1024px) { .stat-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-xl); align-items: center; } }   /* liczba stoi w miejscu, nie jedzie za przewijaniem (Michał 2026-10-19) */

/* ---------- Pracownik czy automatyzacja (copy v4 §3.5): dwie kartki obok siebie — jedno porównanie ---------- */
.compare { display: grid; grid-template-columns: 1fr; gap: var(--s-lg); margin-top: var(--s-lg); max-width: 560px; align-items: stretch; }
.compare__card { position: relative; display: flex; flex-direction: column; padding: var(--s-card); background: var(--paper); color: var(--ink);
  border: 2px solid var(--shadow); border-radius: 6px 14px 7px 13px; box-shadow: 8px 8px 0 var(--shadow); }
.compare__card::before { content: ""; position: absolute; top: -13px; left: 40px; width: 96px; height: 24px; transform: rotate(-6deg); border: 1px solid oklch(0 0 0 / .18); background: color-mix(in oklch, var(--accent) 80%, transparent); }
.compare__card--human { transform: rotate(-.5deg); }
.compare__card--ai { transform: rotate(.4deg); }
.compare__card--ai::before { left: auto; right: 40px; transform: rotate(5deg); background: color-mix(in oklch, var(--accent-2) 78%, transparent); }
.compare__kicker { margin: 0; font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2-ink); }
.compare__title { margin: 10px 0 0; font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); line-height: 1.1; text-transform: uppercase; }
.compare__big { display: flex; flex-direction: column; gap: 4px; margin: var(--s-md) 0 0; }
.compare__value { font-family: var(--font-display); font-weight: 800; font-size: var(--step-6); line-height: .95; letter-spacing: -.03em; color: var(--ink); }
.compare__value--text { max-width: 10ch; font-size: var(--step-4); line-height: 1; text-transform: uppercase; color: var(--accent-2-ink); }
.compare__per { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in oklch, var(--ink) 66%, transparent); }
.compare__sub { margin: var(--s-sm) 0 0; max-width: 40ch; font-size: var(--step-0); line-height: 1.5; color: color-mix(in oklch, var(--ink) 82%, transparent); text-wrap: pretty; }
.compare__sub b { color: var(--ink); font-weight: 500; }
.compare__list { display: grid; gap: 10px; margin: var(--s-md) 0 0; }
.compare__list li { position: relative; padding-left: 24px; font-size: var(--step-0); line-height: 1.5; color: color-mix(in oklch, var(--ink) 82%, transparent); text-wrap: pretty; }
.compare__list li::before { content: "+"; position: absolute; left: 0; top: 0; font-family: var(--font-mono); font-weight: 500; color: var(--accent-2-ink); }
.compare__source { margin: auto 0 0; padding-top: var(--s-md); font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .02em; line-height: 1.5; color: color-mix(in oklch, var(--ink) 66%, transparent); }
.compare__card .btn { margin-top: auto; align-self: flex-start; }
.compare__card--ai .compare__list { margin-bottom: var(--s-md); }
@media (min-width: 768px) { .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; } }
@media (min-width: 1280px) { .compare { max-width: 1100px; } }

/* ---------- Zobacz, jak to działa (copy v4 §3.6): historyjka w czterech kafelkach ----------
   Scena (komiks) po lewej, kroki po prawej. Jeden kafelek naraz, zawsze do przodu: rozmowa → kalendarz → Ty → potwierdzenie u klienta.
   Wejście kafelka = cięcie po skosie (Persona 5); wszystko w środku to animacje CSS z opóźnieniami, startujące, gdy kafelek dostaje .is-active.
   Komputer: pętla czasowa (app.js). Telefon: scena przyklejona pod paskiem, krok = ten, który wjechał pod scenę.
   Bez ruchu (.is-all): cztery kafelki naraz w stanie końcowym. */
.story { margin-top: var(--s-lg); }
.story__pin { display: grid; grid-template-columns: 1fr; gap: var(--s-lg); align-items: center; }
.story__stage { --panel-bg: #160c0a; position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 3px solid var(--shadow); border-radius: 8px 18px 10px 16px;
  background: var(--panel-bg); box-shadow: 10px 10px 0 var(--shadow); transform: rotate(-.6deg); }
:root[data-theme="light"] .story__stage { box-shadow: 10px 10px 0 color-mix(in oklch, var(--shadow) 85%, transparent); }
.story__scene { position: absolute; inset: 0; visibility: hidden; }
.story__scene.is-active { visibility: visible; z-index: 2; animation: story-in 520ms cubic-bezier(.2,.8,.2,1) both; }
.story__scene.is-leaving { visibility: visible; z-index: 1; animation: story-out 420ms cubic-bezier(.6,0,.8,.2) both; }
@keyframes story-in { 0% { clip-path: polygon(0 0, 0 0, -30% 100%, -30% 100%); } 100% { clip-path: polygon(0 0, 130% 0, 100% 100%, -30% 100%); } }
@keyframes story-out { 0% { transform: none; filter: none; } 100% { transform: translateX(-6%) scale(.96); filter: brightness(.5); } }
/* błysk przy zmianie kafelka: ukośny pas kremu przelatuje przez scenę */
.story__flash { position: absolute; inset: -20% -40%; z-index: 5; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 42%, var(--paper) 42% 46%, var(--accent) 46% 49%, transparent 49%); }
.story.is-switching .story__flash { animation: story-flash 460ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes story-flash { 0% { opacity: 1; transform: translateX(-60%); } 100% { opacity: 1; transform: translateX(60%); } }

/* kadry komiksu */
.story__panel { position: absolute; overflow: hidden; background: var(--panel-bg); }
.story__panel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.story__panel--full { inset: 0; }
/* scena 1: dwa kadry przedzielone ukośnym, kremowym cięciem; postać mówiąca „podskakuje” */
.story__scene--call { background: var(--paper); }
.story__panel--left  { inset: 0; clip-path: polygon(0 0, 52% 0, 45% 100%, 0 100%); }
.story__panel--right { inset: 0; clip-path: polygon(55% 0, 100% 0, 100% 100%, 48% 100%); }
.story__panel--left img, .story__panel--right img { position: absolute; top: 0; width: 58%; height: 100%; transform-origin: 50% 90%; }
.story__panel--left img  { left: -4%; object-position: 50% 30%; }
.story__panel--right img { right: 0; object-fit: contain; object-position: 50% 100%; }   /* robot cały, bez ucinania (Michał 2026-10-15) */
.is-active .story__panel--left img  { animation: story-talk 240ms ease-in-out 300ms 7 both; }
.is-active .story__panel--right img { animation: story-talk 240ms ease-in-out 2100ms 8 both; }
/* usta: dwie klatki postaci (zamknięte pod spodem, otwarte na wierzchu) — otwarta miga w rytm mówienia */
.story__f--talk, .story__f--blink { opacity: 0; }
.is-active .story__panel--left .story__f--talk  { animation: story-talk 240ms ease-in-out 300ms 7 both, story-mouth 240ms linear 300ms 7 both; }
.is-active .story__panel--right .story__f--talk { animation: story-talk 240ms ease-in-out 2100ms 8 both, story-mouth 240ms linear 2100ms 8 both; }
@keyframes story-mouth { 0%, 18% { opacity: 0; } 22%, 72% { opacity: 1; } 76%, 100% { opacity: 0; } }
.is-active.story__scene--you .story__f--blink { animation: story-zoom 3600ms ease-out both, story-blink 3600ms linear both; }
@keyframes story-blink { 0%, 27% { opacity: 0; } 28%, 36% { opacity: 1; } 37%, 69% { opacity: 0; } 70%, 78% { opacity: 1; } 79%, 100% { opacity: 0; } }
@keyframes story-talk { 0%, 100% { transform: none; } 50% { transform: translateY(-.8%) rotate(-.6deg) scale(1.006); } }
.is-active .story__panel--left  { animation: story-slide-l 520ms cubic-bezier(.2,.8,.2,1.2) 60ms both; }
.is-active .story__panel--right { animation: story-slide-r 520ms cubic-bezier(.2,.8,.2,1.2) 200ms both; }
@keyframes story-slide-l { from { transform: translateX(-30%); } to { transform: none; } }
@keyframes story-slide-r { from { transform: translateX(30%); } to { transform: none; } }

/* dymki komiksowe */
.story__bubble { position: absolute; z-index: 3; max-width: 46%; padding: 10px 14px; background: var(--paper); color: var(--ink);
  border: 2.5px solid var(--shadow); border-radius: 18px 20px 18px 18px; box-shadow: 4px 4px 0 var(--shadow);
  font-family: var(--font-mono); font-size: clamp(.8rem, .7rem + .4vw, 1rem); font-weight: 500; line-height: 1.3; text-wrap: balance; opacity: 0; transform: scale(.4) rotate(-8deg); }
.story__bubble::after { content: ""; position: absolute; width: 16px; height: 16px; background: inherit; border-right: 2.5px solid var(--shadow); border-bottom: 2.5px solid var(--shadow); }
.story__bubble--1 { left: 8%; top: 7%; transform-origin: 30% 100%; }
.story__bubble--1::after { left: 46%; bottom: -9px; transform: rotate(45deg); }
.story__bubble--2 { right: 6%; top: 9%; background: var(--accent-2); transform-origin: 70% 100%; }
.story__bubble--2::after { right: 46%; bottom: -9px; transform: rotate(45deg); }
.is-active .story__bubble--1 { animation: story-pop 420ms cubic-bezier(.2,.8,.2,1.6) 380ms both; }
.is-active .story__bubble--2 { animation: story-pop 420ms cubic-bezier(.2,.8,.2,1.6) 2100ms both; }
@keyframes story-pop { from { opacity: 0; transform: scale(.4) rotate(-8deg); } to { opacity: 1; transform: rotate(-2deg); } }

@media (max-width: 639px) {   /* na telefonie dymki pod twarzami (na koszulkach), ogonek w górę — żeby nie zasłaniały buzi */
  .story__bubble--1, .story__bubble--2 { top: auto; bottom: 5%; max-width: 42%; padding: 8px 10px; }
  .story__bubble--1 { left: 4%; transform-origin: 30% 0; } .story__bubble--2 { right: 4%; transform-origin: 70% 0; }
  .story__bubble--1::after, .story__bubble--2::after { top: -9px; bottom: auto; transform: rotate(-135deg); }
}
/* scena 2: kalendarz — dni wskakują, zajęte dostają stempel ✕, wolny zostaje zaznaczony */
.story__scene--cal { display: grid; place-items: center; background: radial-gradient(circle at 70% 30%, color-mix(in oklch, var(--accent-2) 22%, var(--panel-bg)), var(--panel-bg) 70%); }
.cal { position: relative; width: 74%; padding: 4% 4.5% 5%; background: var(--paper); color: var(--ink); border: 3px solid var(--shadow); border-radius: 6px 14px 7px 13px; box-shadow: 8px 8px 0 var(--shadow); transform: rotate(1.2deg); }
.is-active .cal { animation: story-drop 560ms cubic-bezier(.2,.8,.2,1.3) 80ms both; }
@keyframes story-drop { from { opacity: 0; transform: translateY(-18%) rotate(-6deg); } to { opacity: 1; transform: rotate(1.2deg); } }
.cal__head { display: flex; justify-content: space-between; align-items: center; margin: 0 0 4%; font-family: var(--font-display); font-weight: 800; font-size: clamp(.95rem, .8rem + .8vw, 1.5rem); text-transform: uppercase; }
.cal__dots { display: flex; gap: 6px; } .cal__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid var(--shadow); } .cal__dots i + i { background: var(--accent-3); } .cal__dots i + i + i { background: var(--accent-2); }
.cal__wd, .cal__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.cal__wd li { font-family: var(--font-mono); font-size: clamp(.6rem, .55rem + .3vw, .8rem); letter-spacing: .12em; text-transform: uppercase; text-align: center; opacity: .6; }
.cal__grid { margin-top: 6px; }
.cal__day { position: relative; display: grid; place-items: center; aspect-ratio: 1.15; border: 2px solid color-mix(in oklch, var(--ink) 30%, transparent); border-radius: 4px 8px 5px 7px;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(.9rem, .7rem + .9vw, 1.6rem); }
.is-active .cal__day { animation: story-cell 320ms cubic-bezier(.2,.8,.2,1.5) calc(500ms + var(--i) * 70ms) both; }
@keyframes story-cell { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.cal__day--busy::after { content: "✕"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--accent-deep); font-size: 1.6em; opacity: 0;
  background: repeating-linear-gradient(135deg, color-mix(in oklch, var(--accent) 22%, transparent) 0 4px, transparent 4px 9px); border-radius: inherit; }
.is-active .cal__day--busy::after { animation: story-stamp 260ms cubic-bezier(.2,.8,.2,1.6) calc(1400ms + var(--i) * 140ms) both; }
@keyframes story-stamp { from { opacity: 0; transform: scale(1.8) rotate(-20deg); } to { opacity: 1; transform: none; } }
.cal__day--busy .cal__n { transition: opacity 200ms; }
.cal__day--free { z-index: 1; }
.is-active .cal__day--free { animation: story-cell 320ms cubic-bezier(.2,.8,.2,1.5) calc(500ms + var(--i) * 70ms) both, story-free 520ms cubic-bezier(.2,.8,.2,1.5) 2900ms both; }
@keyframes story-free { from { background: transparent; } 60% { transform: scale(1.25) rotate(-4deg); } to { background: var(--accent-2); border-color: var(--shadow); box-shadow: 3px 3px 0 var(--shadow); transform: scale(1.12) rotate(-3deg); } }
.story__mini { position: absolute; left: -2%; bottom: -6%; width: 30%; height: auto; filter: drop-shadow(6px 6px 0 oklch(0 0 0 / .4)); }
.is-active .story__mini { animation: story-peek 600ms cubic-bezier(.2,.8,.2,1.4) 200ms both; }
@keyframes story-peek { from { transform: translate(-40%, 40%) rotate(-20deg); } to { transform: rotate(4deg); } }
.story__bubble--cal { left: 0; right: 0; margin-inline: auto; width: max-content; bottom: 5%; top: auto; max-width: 60%; background: var(--accent-3); transform-origin: 50% 0; }
.story__bubble--cal::after { left: calc(50% - 8px); top: -9px; transform: rotate(-135deg); }   /* ogonek celuje w 22 (środkowa kolumna) */
.is-active .story__bubble--cal { animation: story-pop 420ms cubic-bezier(.2,.8,.2,1.6) 3300ms both; }

/* scena 3: Ty — portret wjeżdża, karteczka „nowy termin” spada z obrotem, iskierki */
.story__scene--you .story__panel img, .story__scene--confirm .story__panel img { position: absolute; top: 0; width: 72%; height: 100%; object-position: 50% 25%; }
.story__scene--you .story__panel img { right: -6%; }
.story__scene--confirm .story__panel img { left: -6%; }
/* obrazek zajmuje 2/3 kadru — tło kadru = tło obrazka, a wewnętrzna krawędź obrazka łagodnie znika (była widoczna pionowa krawędź; Michał 2026-10-19) */
.story__scene--you .story__panel { background: #170c0b; }
.story__scene--confirm .story__panel { background: #130806; }
.story__scene--you .story__panel img { -webkit-mask-image: linear-gradient(to left, #000 84%, transparent); mask-image: linear-gradient(to left, #000 84%, transparent); }
.story__scene--confirm .story__panel img { -webkit-mask-image: linear-gradient(to right, #000 84%, transparent); mask-image: linear-gradient(to right, #000 84%, transparent); }
.is-active.story__scene--you .story__panel img { animation: story-zoom 3600ms ease-out both; }
@keyframes story-zoom { from { transform: scale(1.12) translateX(4%); } to { transform: none; } }
.story__note { position: absolute; z-index: 3; left: 6%; top: 10%; display: grid; gap: 2px; padding: 12px 16px; background: var(--paper); color: var(--ink);
  border: 2.5px solid var(--shadow); border-radius: 4px 9px 5px 8px; box-shadow: 5px 5px 0 var(--shadow); font-family: var(--font-mono); font-size: clamp(.7rem, .62rem + .3vw, .85rem); letter-spacing: .1em; text-transform: uppercase; opacity: 0; }
.story__note b { font-family: var(--font-display); font-weight: 800; font-size: clamp(1rem, .8rem + 1vw, 1.7rem); letter-spacing: 0; color: var(--accent-2-ink); }
.is-active .story__note { animation: story-note 620ms cubic-bezier(.2,.8,.2,1.4) 700ms both; }
@keyframes story-note { from { opacity: 0; transform: translateY(-60%) rotate(-14deg); } to { opacity: 1; transform: rotate(-3deg); } }
.story__spark { position: absolute; z-index: 3; color: var(--accent-3); font-size: clamp(1.2rem, 1rem + 1vw, 2rem); opacity: 0; }
.story__spark--1 { right: 14%; top: 14%; } .story__spark--2 { right: 30%; top: 6%; color: var(--accent-2); font-size: clamp(.9rem, .8rem + .6vw, 1.3rem); }
.is-active .story__spark { animation: story-spark 900ms ease-out 1300ms both; } .is-active .story__spark--2 { animation-delay: 1500ms; }
@keyframes story-spark { 0% { opacity: 0; transform: scale(0) rotate(0); } 50% { opacity: 1; transform: scale(1.3) rotate(90deg); } 100% { opacity: 1; transform: scale(1) rotate(180deg); } }

/* scena 4: klient — telefon brzęczy, z góry zjeżdża powiadomienie z mailem */
.story__scene--confirm .story__panel img { transform-origin: 70% 60%; }
.is-active.story__scene--confirm .story__panel img { animation: story-buzz 90ms linear 600ms 8 both; }
@keyframes story-buzz { 0%, 100% { transform: none; } 25% { transform: translateX(-.6%) rotate(-.4deg); } 75% { transform: translateX(.6%) rotate(.4deg); } }
.story__mail { position: absolute; z-index: 3; right: 4%; top: 8%; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; width: min(52%, 340px); padding: 12px 14px;
  background: var(--paper); color: var(--ink); border: 2.5px solid var(--shadow); border-radius: 14px; box-shadow: 5px 5px 0 var(--shadow); opacity: 0; transform: translateY(-140%); }
.story__mail svg { grid-row: span 2; width: 34px; height: 34px; padding: 6px; border-radius: 10px; background: var(--accent-2); border: 2px solid var(--shadow); fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.story__mail b { white-space: nowrap; font-family: var(--font-display); font-weight: 800; font-size: clamp(.95rem, .8rem + .6vw, 1.3rem); text-transform: uppercase; }
.story__mail span { font-family: var(--font-mono); font-size: clamp(.7rem, .62rem + .3vw, .85rem); opacity: .8; }
.is-active .story__mail { animation: story-mail 620ms cubic-bezier(.2,.8,.2,1.3) 500ms both; }
@keyframes story-mail { from { opacity: 0; transform: translateY(-140%) rotate(6deg); } to { opacity: 1; transform: rotate(-1.5deg); } }

/* kroki po prawej — aktywny = kartka wycięta po skosie, numer na czerwono, pasek czasu */
.story__steps { display: grid; margin: 0; padding: 0; list-style: none; max-width: 640px; }
.story__step { --pad: 14px; position: relative; isolation: isolate; display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: var(--pad) var(--pad) calc(var(--pad) + 6px);
  border-top: 2px dashed var(--border); transition: transform 360ms cubic-bezier(.2,.8,.2,1.3); }
.story__step:last-child { border-bottom: 2px dashed var(--border); }
.story__step::before { content: ""; position: absolute; inset: -2px 0; z-index: -1; background: var(--paper); border: 2px solid var(--shadow); border-radius: 6px 14px 7px 13px; box-shadow: 6px 6px 0 var(--shadow);
  clip-path: polygon(0 0, 0 0, -12% 100%, -12% 100%); transition: clip-path 380ms cubic-bezier(.2,.8,.2,1); }
.story__step.is-active { z-index: 1; transform: translateX(-6px) rotate(-.8deg); }
.story__step.is-active::before { clip-path: polygon(0 0, 112% 0, 100% 100%, -12% 100%); }
.story__num { align-self: start; min-width: 44px; min-height: 44px; margin: -6px 0 0; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-weight: 800; font-size: var(--step-3); line-height: 1.3; letter-spacing: -.02em; color: var(--muted-2); transition: color 200ms ease, transform 360ms cubic-bezier(.2,.8,.2,1.6); }
@media (hover: hover) { .story__num:hover { color: var(--fg); } }
/* komputer: cała karta kroku jest klikalna (app.js) — kursor i podświetlony numer nad całą kartą */
.story:not(.is-scrolly):not(.is-all) .story__step:not(.story__step--cta) { cursor: pointer; }
@media (hover: hover) { .story:not(.is-scrolly):not(.is-all) .story__step:not(.story__step--cta):not(.is-active):hover .story__num { color: var(--fg); } }
.story__step.is-active .story__num { color: var(--accent-deep); transform: scale(1.3) rotate(-6deg); }
.story.is-all .story__num { color: var(--accent-text); }
.story__text { min-width: 0; }
.story__title { margin: 0 0 4px; font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); line-height: 1.15; text-transform: uppercase; text-wrap: balance; transition: color 200ms ease; }
.story__body { margin: 0; font-size: var(--step-0); line-height: 1.55; color: var(--muted); text-wrap: pretty; transition: color 200ms ease; }
.story__step.is-active .story__title { color: var(--ink); }
.story__step.is-active .story__body { color: color-mix(in oklch, var(--ink) 82%, transparent); }
.story__bar { position: absolute; left: 14px; right: 14px; bottom: 8px; height: 4px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; }
.story__step.is-active .story__bar { opacity: 1; animation: story-bar var(--dur, 4600ms) linear forwards; }
.story.is-paused .story__bar { animation-play-state: paused; }
.story.is-manual .story__bar, .story.is-scrolly .story__bar { opacity: 0; }
@keyframes story-bar { to { transform: scaleX(1); } }

/* bez ruchu: cztery kafelki w siatce 2×2, każdy w stanie końcowym */
.story.is-all .story__stage { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; aspect-ratio: auto; background: var(--shadow); transform: none; }
.story.is-all .story__scene { position: relative; inset: auto; aspect-ratio: 4 / 3; visibility: visible; overflow: hidden; }
.story.is-all .story__bubble, .story.is-all .story__note, .story.is-all .story__mail, .story.is-all .story__spark { opacity: 1; }
.story.is-all .story__mail { transform: none; }
.story.is-all .cal__day--free { background: var(--accent-2); border-color: var(--shadow); }
.story.is-all .cal__day--busy::after { opacity: 1; }
.story.is-all .story__bubble { transform: none; font-size: .7rem; padding: 6px 8px; }
.story.is-all .story__bubble--cal { margin-inline: auto; }
.story.is-all .story__flash { display: none; }
@media (max-width: 767px) {   /* telefon: kafelki jeden pod drugim — w 2×2 dymki i kartki nie mieściły się w kadrze */
  .story.is-all .story__stage { grid-template-columns: 1fr; }
  .story.is-all .story__bubble { font-size: clamp(.8rem, .7rem + .4vw, 1rem); padding: 8px 10px; }
}

/* telefon/tablet: scena przyklejona pod paskiem, kroki przewijają się pod nią */
@media (max-width: 1023px) {
  /* scena przyklejona; nad nią i po bokach „zasłona” w kolorze tła — przewijana treść nie prześwituje nad sceną */
  .story:not(.is-all) .story__stage { position: sticky; top: calc(var(--nav-h) + 8px); z-index: 2; aspect-ratio: 5 / 4;
    box-shadow: 10px 10px 0 var(--shadow), 0 -28px 0 22px var(--bg); }
  /* zasłona sięga 50 px nad scenę — zanim scena się przyklei, przykrywała dół nagłówka („Bez Ciebie.”); nagłówek rysuje się nad nią */
  .section--flow .sec-title { position: relative; z-index: 3; }
  /* każdy krok zajmuje całą wolną wysokość pod sceną → widać jeden opis naraz, a slajd zmienia się, gdy jego opis wjeżdża */
  /* odstęp POD kartką (nie w niej) = prawie cała wolna wysokość pod sceną → jeden opis naraz */
  .story.is-scrolly .story__step { --stage-h: calc((100vw - 2 * var(--frame-pad-x)) * .8); margin-bottom: max(64px, calc(100svh - var(--nav-h) - var(--stage-h) - 150px));
    border-top: 0; border-bottom: 0; }
  .story.is-scrolly .story__steps { padding-top: 24px; }
  .story.is-scrolly .story__step:last-child { margin-bottom: 32px; }
  .story.is-scrolly .story__step:not(.is-active) { opacity: .35; }
  .story.is-scrolly .story__step { transition: opacity 300ms ease, transform 360ms cubic-bezier(.2,.8,.2,1.3); }
  .story__mail { width: 64%; right: 3%; top: 6%; padding: 8px 10px; column-gap: 8px; }
  .story__mail svg { width: 26px; height: 26px; padding: 4px; }
  .story__mail b { font-size: .8rem; }
  .story__mail span { font-size: .66rem; }
}
@media (min-width: 1024px) { .story__pin { grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr); gap: var(--s-xl); } }
/* ostatni krok = sam przycisk „Umów darmowy audyt” (Michał 2026-10-19): bez numeru, kartki i paska, cały czas czerwony i nieprzygaszony */
.story__step.story__step--cta { display: block; border: 0; }   /* wygrywa z :last-child (dolna kreska) */
.story__step--cta::before, .story__step--cta .story__bar { display: none; }
.story.is-scrolly .story__step--cta:not(.is-active) { opacity: 1; }
.story__step:has(+ .story__step--cta) { border-bottom: 2px dashed var(--border); }

.closing { margin: var(--s-lg) 0 0; max-width: 60ch; font-size: var(--step-0); line-height: 1.55; color: var(--muted); text-wrap: pretty; }

/* ---------- Co robię (copy v4 §3.8): talia kart do gry ----------
   Widać wierzchnią kartę, pod nią dwie kolejne (przesunięte, lekko obrócone). Przesunięcie w górę = karta odlatuje z obrotem („Gambit”),
   odkrywa następną. Komputer: talia + spis sześciu kart obok (klik = przejście). Bez ruchu / bez JS: wszystkie karty w siatce. */
.stack { margin-top: var(--s-lg); }
.stack__cards { display: grid; grid-template-columns: 1fr; gap: var(--s-lg); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .stack:not(.is-live) .stack__cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .stack:not(.is-live) .stack__cards { grid-template-columns: repeat(3, 1fr); } }
.stack__card { min-width: 0; }

.play-card { --card-bg: var(--paper); --card-fg: var(--ink); --frame: color-mix(in oklch, var(--ink) 30%, transparent);
  position: relative; display: flex; flex-direction: column; height: 100%; min-height: 24rem; padding: 56px var(--s-md) var(--s-md); overflow: hidden;
  background: var(--card-bg); color: var(--card-fg); border: 2px solid var(--shadow); border-radius: 16px; box-shadow: 7px 7px 0 var(--shadow); }
.play-card::before { content: ""; position: absolute; inset: 9px; border: 2px solid var(--frame); border-radius: 10px; pointer-events: none; }
.play-card--pink  { --card-bg: var(--accent); }
.play-card--teal  { --card-bg: var(--accent-2); }
.play-card--peach { --card-bg: var(--accent-3); }
.play-card--dark  { --card-bg: var(--brand-dark); --card-fg: var(--paper); --frame: color-mix(in oklch, var(--accent) 70%, transparent); }
.play-card--outline { --frame: color-mix(in oklch, var(--accent) 80%, transparent); background-image: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in oklch, var(--accent) 8%, transparent) 14px 16px); }
.play-card__corner { position: absolute; top: 18px; left: 20px; display: grid; justify-items: center; gap: 2px; line-height: 1; }
.play-card__corner b { font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); }
.play-card__corner--end { top: auto; left: auto; bottom: 18px; right: 20px; transform: rotate(180deg); }
.play-card__pip { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.play-card__glyph { align-self: center; width: clamp(88px, 22vw, 128px); height: auto; margin: 4px 0 var(--s-md); fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: .85;
  filter: drop-shadow(3px 3px 0 color-mix(in oklch, var(--shadow) 35%, transparent)); }
.play-card__tag { margin: 0; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.play-card__title { margin: 8px 0 12px; font-family: var(--font-display); font-weight: 800; font-size: var(--step-3); line-height: 1.02; text-transform: uppercase; text-wrap: balance; }
.play-card__body { margin: 0 0 28px; max-width: 34ch; font-size: var(--step-0); line-height: 1.5; font-weight: 500; text-wrap: pretty; }

/* tryb talii */
.stack.is-live { display: grid; grid-template-columns: 1fr; gap: var(--s-lg); justify-items: center; }
.stack.is-live .stack__table { position: relative; width: min(100%, 360px); padding-top: 16px; perspective: 1600px; }
.stack.is-live .stack__cards { gap: 0; padding: 0 0 24px; }
/* kartki jak w kalendarzu na spirali: przypięte górą, te pod spodem wystają spod dolnej krawędzi */
.stack.is-live .stack__card { --d: 0; grid-area: 1 / 1; z-index: calc(10 - var(--d));
  position: relative; transform-style: preserve-3d; transform-origin: 50% 0; transform: translateY(calc(var(--d) * 8px)) scaleX(calc(1 - var(--d) * .035));
  transition: transform 420ms cubic-bezier(.2,.8,.2,1.15), opacity 300ms ease; }
.stack.is-live .stack__card > .play-card { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* tył kartki: kremowy papier w linie — widać go, gdy kartka przechodzi przez spiralę na drugą stronę */
.stack.is-live .stack__card::after { content: ""; position: absolute; inset: 0 0 0 0; border: 2px solid var(--shadow); border-radius: 16px; transform: rotateX(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: repeating-linear-gradient(180deg, transparent 0 26px, color-mix(in oklch, var(--accent-2) 30%, transparent) 26px 28px), color-mix(in oklch, var(--paper) 88%, var(--accent-3)); }
.stack.is-live .stack__card.is-deep { opacity: 0; }
.stack__grip { position: absolute; z-index: 16; left: 0; right: 0; bottom: 24px; height: calc((100% - 40px) / 2); touch-action: pan-up pinch-zoom; cursor: grab; }
.stack__grip:active { cursor: grabbing; }
.stack.is-empty .stack__grip { display: none; }
.stack.is-live .stack__card.is-dragging { transition: none; }
/* przewrócona: obraca się wokół górnej krawędzi, w górę i na drugą stronę (jak kartka kalendarza) */
.stack.is-live .stack__card.is-gone { z-index: 20; pointer-events: none; visibility: hidden; transform: rotateX(178deg); transition: transform 760ms cubic-bezier(.45,.05,.25,1), visibility 0s 800ms; }
/* przezroczystość na dzieciach, nie na kartce — inaczej przeglądarka spłaszcza 3D i widać przód zamiast tyłu */
.stack.is-live .stack__card > .play-card, .stack.is-live .stack__card::after { transition: opacity 240ms ease; }
.stack.is-live .stack__card.is-gone > .play-card, .stack.is-live .stack__card.is-gone::after { opacity: 0; transition: opacity 260ms ease 500ms; }
.stack.is-live .stack__card.is-gone .play-card, .stack.is-live .stack__card.is-dragging .play-card { box-shadow: 0 14px 30px -10px oklch(0 0 0 / .5); }
/* spirala */
.stack:not(.is-live) .stack__rings { display: none; }   /* bez ruchu karty leżą w siatce — spirala wisiałaby nad sekcją */
.stack__rings { position: absolute; z-index: 40; top: 0; left: 9%; right: 9%; display: flex; justify-content: space-between; pointer-events: none; }
.stack__rings i { width: 11px; height: 30px; border: 3px solid color-mix(in oklch, var(--fg) 80%, transparent); border-radius: 7px; background: linear-gradient(90deg, transparent 40%, color-mix(in oklch, var(--fg) 25%, transparent) 50%, transparent 60%);
  box-shadow: 2px 2px 0 color-mix(in oklch, var(--shadow) 60%, transparent); }
.stack.is-live .play-card { min-height: 0; aspect-ratio: 5 / 7; user-select: none; -webkit-user-select: none; }
.stack.is-live .play-card__glyph { width: clamp(80px, 24vw, 120px); }

/* sterowanie pod talią: ◀ 01 / 06 ▶ — małe trójkąty, bez napisów (Michał: „na telefonie po prostu swajpowanie”) */
.stack__controls { display: flex; justify-content: center; align-items: center; gap: 4px; width: min(100%, 360px); }
.stack__tri { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--muted-2); cursor: pointer;
  font-size: .8rem; line-height: 1; transition: color 160ms ease, transform 160ms ease; }
.stack__tri[hidden] { display: inline-grid; visibility: hidden; }
@media (hover: hover) { .stack__tri:hover { color: var(--accent-text); } }
.stack__tri:active { transform: scale(.85); }
.stack__counter { margin: 0; min-width: 5ch; white-space: nowrap; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); line-height: 1; color: var(--muted-2); transform: skewX(-8deg); }
.stack__counter b { color: var(--accent-text); font-size: 1.3em; }
/* strzałka „przesuń w górę”: rysowana ręką, ciemna, wyrasta od dołu i jedzie w górę jak palec */
.stack__swipe { position: absolute; z-index: 15; right: 18%; bottom: 24px; width: 20%; pointer-events: none; color: var(--ink); opacity: 0; }
.stack.hint-light .stack__swipe { color: var(--paper); }
.stack__swipe svg { display: block; width: 100%; height: auto; fill: currentColor; stroke: currentColor; stroke-width: 8; stroke-linejoin: round;
  filter: drop-shadow(4px 4px 0 color-mix(in oklch, var(--shadow) 18%, transparent)); }
.stack.hint-loop .stack__swipe { animation: stack-swipe 1500ms cubic-bezier(.3,.7,.3,1) 600ms infinite; }
.stack.hint-once .stack__swipe { animation: stack-swipe 1500ms cubic-bezier(.3,.7,.3,1) 2; }
.stack.is-grabbing .stack__swipe, .stack.is-empty .stack__swipe { animation: none; opacity: 0; }
@keyframes stack-swipe {
  0%   { opacity: 0; clip-path: inset(100% 0 0 0); transform: translateY(0); }
  15%  { opacity: .45; }
  55%  { opacity: .45; clip-path: inset(0 0 0 0); transform: translateY(0); }
  85%  { opacity: 0; clip-path: inset(0 0 0 0); transform: translateY(-10%); }
  100% { opacity: 0; clip-path: inset(0 0 0 0); transform: translateY(-10%); } }
/* spis kart (komputer) */
.stack__index { display: none; }
@media (min-width: 1024px) {
  .stack.is-live { grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); column-gap: var(--s-xl); align-items: center; justify-items: stretch; }
  .stack.is-live .stack__table { width: 100%; grid-row: 1; }
  .stack.is-live .stack__controls { grid-column: 1; }
  .stack__index { display: grid; grid-column: 2; grid-row: 1 / span 2; gap: 4px; margin: 0; padding: 0; list-style: none; align-self: center; }
  .stack__pick { display: grid; grid-template-columns: 3.2rem 1fr; align-items: baseline; width: 100%; min-height: 48px; padding: 10px 16px; border: 0; border-bottom: 2px dashed var(--border);
    background: none; color: var(--muted); text-align: left; cursor: pointer; font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); line-height: 1.1; text-transform: uppercase;
    transition: color 200ms ease, transform 300ms cubic-bezier(.2,.8,.2,1.4), background 200ms ease; }
  .stack__pick i { font-style: normal; font-size: var(--step-0); color: var(--muted-2); }
  @media (hover: hover) { .stack__pick:hover { color: var(--fg); } }
  .stack__pick[aria-current="true"] { color: var(--fg); transform: translateX(12px); }
  .stack__pick[aria-current="true"] i { color: var(--accent-text); }
  .stack__pick.is-seen { color: var(--muted-2); }
}

/* ---------- Karty na sznurku (asystent §3.4, współpraca §3.7) ----------
   Komputer/tablet: zygzak w dwóch kolumnach — każda karta zajmuje dwa wiersze siatki, następna zaczyna się w połowie poprzedniej
   (lewa wyżej, prawa niżej), różne szerokości i obroty. Telefon: jedna kolumna, karty na przemian przy lewej i prawej krawędzi.
   app.js rysuje sznurek (SVG pod kartami) w miarę przewijania; karta „wskakuje”, gdy sznurek dojdzie do jej pinezki.
   Stan ukryty tylko pod .is-live (dodaje JS, gdy ruch dozwolony) — bez JS wszystko widać. */
.thread { --rope: var(--fg); position: relative; margin-top: var(--s-lg); }
.thread__list { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; row-gap: clamp(1.75rem, 1rem + 3vw, 2.5rem); margin: 0; padding: var(--s-md) 0 0; list-style: none; }
.thread__item { --w: 100%; --rot: 0deg; --pin: 50%; position: relative; width: min(100%, calc(var(--w) + 4%)); transform: rotate(var(--rot)); }
.thread__item--end { justify-self: end; }
.thread__item > article { height: 100%; transform: none; }
.thread__pin { position: absolute; z-index: 3; top: -9px; left: var(--pin); width: 20px; height: 20px; margin-left: -10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, oklch(1 0 0 / .55) 0 18%, transparent 20%), var(--accent); border: 2px solid var(--shadow); box-shadow: 2px 3px 0 var(--shadow); }
.thread__item:nth-child(even) .thread__pin { background: radial-gradient(circle at 35% 35%, oklch(1 0 0 / .55) 0 18%, transparent 20%), var(--accent-2); }
.thread__svg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.thread__rope { fill: none; stroke: var(--rope); stroke-width: 3; stroke-linecap: round; }
.thread__twist { fill: none; stroke: var(--bg); stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 1.5 6; opacity: .8; }
@media (min-width: 768px) {   /* jedna karta na „piętro”: wąskie i wysokie, na przemian lewa/prawa, duże odstępy w pionie (Michał: karty nie mają rywalizować o uwagę) */
  .thread__list { display: flex; flex-direction: column; max-width: 900px; margin-inline: auto; row-gap: clamp(3rem, 1.5rem + 4vw, 5.5rem); padding-top: var(--s-lg); }
  .thread__item { width: clamp(300px, 22rem + 4vw, 420px); align-self: flex-start; }
  .thread__item--end { align-self: flex-end; }
}

/* wejście karty: opada z obrotem i lekkim przestrzeleniem, potem po kolei numer, tytuł (cięcie po skosie), tekst.
   Wszystkie czasy × --slow: komputer 1.2 = o 20 % wolniej, z „wagą” (Michał 2026-10-19; obie sekcje — asystent i współpraca), telefon 1. */
.thread { --slow: 1; }
@media (min-width: 1024px) { .thread { --slow: 1.2; } }
.thread.is-live .thread__item { opacity: 0; transform: translateY(80px) rotate(calc(var(--rot) * -4)) scale(.84);
  transition: opacity calc(380ms * var(--slow)) ease, transform calc(1050ms * var(--slow)) cubic-bezier(.18,.9,.22,1.45); }
.thread.is-live .thread__item.is-in { opacity: 1; transform: rotate(var(--rot));
  /* ta sama krzywa co wyżej do szczytu przestrzelenia (575 ms), opadanie na miejsce dwa razy szybsze: 475 → 237 ms (Michał 2026-10-19).
     Tylko przy wejściu; przeglądarka bez linear() zostaje przy krzywej wyżej. */
  transition: opacity calc(380ms * var(--slow)) ease, transform calc(813ms * var(--slow)) linear(0, 0.123 3.1%, 0.247 6.2%, 0.37 9.4%, 0.486 12.5%, 0.593 15.6%, 0.688 18.8%, 0.77 21.9%,
    0.841 25%, 0.9 28.1%, 0.951 31.2%, 0.993 34.4%, 1.028 37.5%, 1.057 40.6%, 1.082 43.8%, 1.102 46.9%, 1.118 50%, 1.131 53.1%, 1.141 56.2%,
    1.149 59.4%, 1.155 62.5%, 1.158 65.6%, 1.16 70.8%, 1.155 75%, 1.146 78.1%, 1.133 81.2%, 1.117 84.4%, 1.098 87.5%, 1.076 90.6%,
    1.052 93.8%, 1.027 96.9%, 1); }
.thread.is-live .thread__pin { transform: scale(0); transition: transform calc(540ms * var(--slow)) cubic-bezier(.2,.8,.2,1.9) calc(160ms * var(--slow)); }
.thread.is-live .is-in .thread__pin { transform: none; }
.thread.is-live .why-card__num, .thread.is-live .step-card__num { display: inline-block; opacity: 0; transform: translateX(-28px) skewX(-14deg); transition: opacity calc(260ms * var(--slow)) ease calc(160ms * var(--slow)), transform calc(700ms * var(--slow)) cubic-bezier(.2,.8,.2,1.5) calc(160ms * var(--slow)); }
.thread.is-live .why-card__title, .thread.is-live .step-card__title { clip-path: polygon(0 0, 0 0, -20% 100%, -20% 100%); transition: clip-path calc(700ms * var(--slow)) cubic-bezier(.2,.8,.2,1) calc(260ms * var(--slow)); }
.thread.is-live .why-card__tag, .thread.is-live .why-card__body, .thread.is-live .step-card__body { opacity: 0; transform: translateY(12px); transition: opacity calc(480ms * var(--slow)) ease calc(380ms * var(--slow)), transform calc(640ms * var(--slow)) cubic-bezier(.2,.8,.2,1) calc(380ms * var(--slow)); }
.thread.is-live .why-card__glyph { opacity: 0; transform: rotate(-20deg) scale(.6); transition: opacity calc(600ms * var(--slow)) ease calc(260ms * var(--slow)), transform calc(1050ms * var(--slow)) cubic-bezier(.2,.8,.2,1.3) calc(260ms * var(--slow)); }
.thread.is-live .is-in .why-card__num, .thread.is-live .is-in .step-card__num { opacity: 1; transform: none; }
.thread.is-live .is-in .why-card__title, .thread.is-live .is-in .step-card__title { clip-path: polygon(0 -10%, 120% -10%, 100% 110%, -20% 110%); }
.thread.is-live .is-in .why-card__tag, .thread.is-live .is-in .why-card__body, .thread.is-live .is-in .step-card__body { opacity: 1; transform: none; }
.thread.is-live .is-in .why-card__tag { opacity: .72; }
.thread.is-live .is-in .why-card__glyph { opacity: .16; transform: none; }
@media (hover: hover) {
  .thread .thread__item.is-in:hover, .thread:not(.is-live) .thread__item:hover { transform: rotate(calc(var(--rot) * .4)) translateY(-6px); transition-duration: 260ms; }
  .thread .why-card:hover { transform: none; }
}

/* asystent: większe tytuły kart (prośba Michała) */
.thread--assistant .why-card { min-height: 0; padding: var(--s-card); box-shadow: 8px 8px 0 var(--shadow); }
.thread--assistant .why-card__title { font-size: var(--step-3); line-height: 1.02; margin: 12px 0 16px; }
.thread--assistant .why-card__body { max-width: 36ch; }
@media (min-width: 768px) { .thread--assistant .why-card__title { font-size: var(--step-4); } .thread--assistant .why-card { min-height: 26rem; } }

/* współpraca: kartki-bilety z dziurkowaną krawędzią i wielkim numerem */
.step-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 12px; align-content: start;
  padding: var(--s-card) var(--s-card) var(--s-card) calc(var(--s-card) + 10px); background: var(--paper); color: var(--ink);
  border: 2px solid var(--shadow); border-radius: 6px 14px 7px 13px; box-shadow: 8px 8px 0 var(--shadow); }
.step-card::before { content: ""; position: absolute; left: 10px; top: 14px; bottom: 14px; border-left: 2px dashed color-mix(in oklch, var(--ink) 30%, transparent); }
.step-card__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(3.25rem, 2.2rem + 4vw, 6rem); line-height: .9; letter-spacing: -.03em; color: var(--accent-deep); }
.thread__item:nth-child(even) .step-card__num { color: var(--accent-2-ink); }
.step-card__title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); line-height: 1.05; text-transform: uppercase; text-wrap: balance; }
.step-card__body { margin: 0; font-size: var(--step-0); line-height: 1.55; color: color-mix(in oklch, var(--ink) 82%, transparent); text-wrap: pretty; }
@media (min-width: 1024px) { .step-card__title { font-size: var(--step-3); } }

/* ---------- Kto to robi (copy v4 §3.11) ---------- */
.who { display: grid; grid-template-columns: 1fr; gap: var(--s-lg); align-items: center; }
.who__body { margin: var(--s-md) 0 0; max-width: 60ch; font-size: var(--step-0); line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.who__link { margin-top: var(--s-md); }
.who__portrait { margin: 0 auto; width: min(70vw, 400px); aspect-ratio: 1; overflow: hidden; border: 2px solid var(--shadow); border-radius: 50%; box-shadow: 8px 8px 0 var(--shadow); background: var(--paper); transform: rotate(-2deg); }
.who__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) { .who { grid-template-columns: minmax(0, 1fr) 400px; } .who__portrait { width: 100%; } }

/* ---------- FAQ (copy v4 §3.12): natywne <details>, bez JS ---------- */
.faq { margin-top: var(--s-lg); max-width: 860px; border-top: 2px dashed var(--border); }
.faq__item { border-bottom: 2px dashed var(--border); }
.faq__q { position: relative; display: block; min-height: 44px; padding: var(--s-sm) 56px var(--s-sm) 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); line-height: 1.2; text-transform: uppercase; text-wrap: balance; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-weight: 500; font-size: var(--step-3); line-height: 1; color: var(--accent-text); }
.faq__item[open] > .faq__q::after { content: "–"; color: var(--accent-2-text); }
@media (hover: hover) { .faq__q:hover { color: var(--accent-text); } }
.faq__a { padding: 0 0 var(--s-md); max-width: 65ch; }
.faq__a p, .faq__list { margin: 0; font-size: var(--step-0); line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.faq__list { margin-top: 12px; padding-left: 1.5em; }
.faq__list li + li { margin-top: 8px; }

/* ---------- Kontakt (copy v4 §3.13): kartka z kalendarzem + formularz zapasowy w jednej kolumnie ---------- */
.contact { display: grid; grid-template-columns: 1fr; gap: var(--s-xl); margin-top: var(--s-lg); align-items: start; }
.contact__book::before { background: color-mix(in oklch, var(--accent-2) 78%, transparent); }
.contact__book.is-open { transform: none; }
.form { display: grid; gap: var(--s-md); max-width: 560px; }
.form__title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); line-height: 1.1; text-transform: uppercase; }
.form__field { display: grid; gap: 8px; }
.form__label { font-family: var(--font-mono); font-size: var(--step--1); font-weight: 500; letter-spacing: .06em; color: var(--fg); }
.form__req { color: var(--muted-2); font-weight: 400; }
.form__input { width: 100%; min-height: 48px; padding: 12px 16px; font: inherit; font-size: var(--step-0); color: var(--fg); background: var(--surface);
  border: 2px solid color-mix(in oklch, var(--fg) 45%, transparent); border-radius: 4px 9px 5px 8px; }
.form__input:focus-visible { border-color: var(--accent-2-deep); }
.form__input[aria-invalid="true"] { border-color: var(--accent-text); }
.form__select { appearance: none; padding-right: 44px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 22px) 55%, calc(100% - 16px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.form__textarea { resize: vertical; min-height: 7rem; }
.form__error { margin: 0; font-size: var(--step--1); line-height: 1.5; color: var(--accent-text); }
.form__submit { justify-self: start; }
.form__submit[disabled] { opacity: .6; cursor: progress; }
.form__status { margin: 0; min-height: 1.5em; font-size: var(--step-0); line-height: 1.5; color: var(--fg); }
.form__status:empty { display: none; }
.form__legal { margin: 0; font-size: var(--step--1); line-height: 1.6; color: var(--muted); }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.link-btn { display: inline; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (hover: hover) { .link-btn:hover { color: var(--accent-text); } }
.note-paper a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (min-width: 1024px) { .contact { grid-template-columns: minmax(360px, 440px) minmax(0, 1fr); gap: var(--s-xl); } }   /* kalendarz w kontakcie też bez przyklejania */

/* ---------- Stopka (copy v4 §3.14; art. 206 KSH) ---------- */
.site-footer { border-top: 2px dashed var(--border); }
.site-footer__inner { display: grid; gap: var(--s-md); padding-block: var(--s-lg); }
.site-footer__line { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); line-height: 1.2; text-transform: uppercase; }
.site-footer__apps { margin: 0; max-width: 65ch; font-size: var(--step-0); line-height: 1.6; color: var(--muted); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 8px var(--s-md); margin: 0; padding: 0; list-style: none; }
.site-footer__links a, .site-footer__links .link-btn { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg); text-decoration: underline; text-underline-offset: 4px; }
@media (hover: hover) { .site-footer__links a:hover { color: var(--accent-text); } }
.site-footer__legal { margin: 0; font-family: var(--font-mono); font-size: var(--step--2); line-height: 1.7; letter-spacing: .02em; color: var(--muted-2); }

/* ---------- Polityka prywatności w <dialog> ---------- */
.policy { width: min(100% - 2rem, 680px); max-height: min(100% - 2rem, 85vh); padding: 0; color: var(--ink); background: var(--paper);
  border: 2px solid var(--shadow); border-radius: 6px 14px 7px 13px; box-shadow: 8px 8px 0 var(--shadow); }
.policy::backdrop { background: oklch(0.1 0.01 20 / .72); }
.policy__inner { padding: var(--s-card); }
.policy__title { margin: 0 0 var(--s-md); font-family: var(--font-display); font-weight: 800; font-size: var(--step-3); line-height: 1.05; text-transform: uppercase; }
.policy p { margin: 0 0 12px; font-size: var(--step-0); line-height: 1.6; color: color-mix(in oklch, var(--ink) 86%, transparent); }
.policy b { color: var(--ink); font-weight: 500; }
.policy__close { --text: var(--ink); margin-top: var(--s-sm); border-color: var(--shadow); }

/* Plamy halftone za nowymi sekcjami */
.section--who::before     { --dot: color-mix(in oklch, var(--accent) 45%, transparent);   right: -10vw; bottom: 0; }
.section--faq::before     { --dot: color-mix(in oklch, var(--accent-3) 40%, transparent); left: -16vw; top: min(4%, 100% - var(--ph)); }
.section--contact::before { --dot: color-mix(in oklch, var(--accent-2) 45%, transparent); right: -14vw; top: min(10%, 100% - var(--ph)); }

/* ---------- Locomotive Scroll / Lenis (style z paczki 5.0.1, MIT) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-touch], .lenis [data-lenis-prevent-wheel] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
html.lenis { scroll-behavior: auto !important; }   /* natywne „smooth” gryzie się z Lenisem */

/* strzałka na górę: róg ekranu, widoczna po zjechaniu z hero (app.js .is-shown); ten sam kształt co przyciski — kartka z twardym cieniem */
.to-top { position: fixed; z-index: 110; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom));
  display: grid; place-items: center; width: 48px; height: 48px; background: var(--paper); color: var(--ink); border: 2px solid var(--shadow); border-radius: 8px;
  box-shadow: 4px 4px 0 var(--shadow); opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 200ms ease, transform 240ms cubic-bezier(.2,.8,.2,1.3), visibility 0s linear 240ms; }
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity 200ms ease, transform 240ms cubic-bezier(.2,.8,.2,1.3); }
.to-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.to-top:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--shadow); }
@media (hover: hover) { .to-top:hover { transform: translateY(-2px); box-shadow: 6px 6px 0 var(--shadow); } }
@media (min-width: 1024px) { .to-top { right: 24px; bottom: 24px; } }

/* hero i taśma poza ekranem: animacje wstrzymane (app.js) — mniej pracy przy przewijaniu dalej na stronie */
.is-offscreen, .is-offscreen * { animation-play-state: paused !important; }

/* ---------- Wskakiwanie przy przewijaniu (app.js: html.reveal-on + [data-reveal] → .is-in) ---------- */
html.reveal-on [data-reveal]:not(.is-in) { opacity: 0; }
html.reveal-on [data-reveal="up"]:not(.is-in) { transform: translateY(32px) rotate(-1.2deg); }
html.reveal-on [data-reveal="kicker"]:not(.is-in) { transform: translateX(-24px); }
html.reveal-on [data-reveal="title"]:not(.is-in) { opacity: 1; clip-path: polygon(0 -10%, 0 -10%, -14% 110%, -14% 110%); transform: translateX(-18px) skewX(-6deg); }
html.reveal-on [data-reveal] { transition: opacity 520ms ease var(--rd, 0ms), transform 720ms cubic-bezier(.2,.8,.2,1.25) var(--rd, 0ms), clip-path 640ms cubic-bezier(.2,.8,.2,1) var(--rd, 0ms); }
html.reveal-on [data-reveal="title"].is-in { clip-path: polygon(0 -10%, 114% -10%, 100% 110%, -14% 110%); }

/* ---------- Animacje warstwy graficznej (hero: patrz sekcja „Hero art” wyżej) ---------- */
.why-card { transition: transform 220ms cubic-bezier(.2,.7,.3,1.2), box-shadow 220ms ease; }
@media (hover: hover) {
  .why-card:hover { box-shadow: 10px 10px 0 var(--shadow); }
  .why-card--pink:hover { transform: rotate(-.6deg) translate(-2px, -4px); } .why-card--teal:hover { transform: rotate(.5deg) translate(-2px, -4px); }
  .why-card--peach:hover { transform: rotate(-.4deg) translate(-2px, -4px); } .why-card--paper:hover { transform: rotate(.3deg) translate(-2px, -4px); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  /* globalny reset (#15) + celowe wyjątki niżej */
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  html { scroll-behavior: auto; }
  .display__line, .cursor, .ticker__track, .art, .art__flecks, .hero__robot, .hero__robot-glitch { animation: none !important; }
  .hero__robot-glitch { display: none; }
  .art--squiggle, .art--scribble { stroke-dashoffset: 0; }   /* bez animacji linie mają być widoczne, nie „nienarysowane” */
  .btn, .nav__burger span, .site-header, .why-card, .nav__link, .theme-toggle, .stack__card, .stack__swipe { transition: none !important; animation: none !important; }
  .story *, .story *::before, .story *::after { animation: none !important; transition: none !important; }
}