/* =========================================================================
   MARKARNIA · base.css — FUNDAMENT (FAZA A)
   SSOT tokenów: ../../../brand-kit/BRAND-KIT.md §3 (paleta) i §4 (typografia)
   Kontrakt: PLAN-WDROZENIA.md §2.2 (blok :root wklejony 1:1), §5 (ruch), §7.3 (gate)

   ⛔ TEN PLIK PISZE WYŁĄCZNIE FAZA A. Tory sekcji B1–B4 go NIE dotykają.
      Potrzebny nowy token / klasa globalna → nota w LEDGER.md, dokłada FAZA C.

   BREAKPOINTY (kanoniczne dla całego landingu — media query nie przyjmuje var()):
     520px  — mały ↔ duży mobile
     820px  — GŁÓWNY przełącznik mobile ↔ desktop (zgodny z moduly/ faq-accordion@1, footer@1)
     1120px — szeroki desktop
   Viewporty projektowe: DESKTOP 1440 · MOBILE 390.
   ========================================================================= */

:root{
  /* PRIMITYWY z BRAND-KIT §3 (SSOT) */
  --paper:#F3F1EC; --paper-2:#EAE7E0; --sheet:#FBFAF8; --card:var(--sheet);
  --ink:#12171C; --body:#2B3339; --olow:#6B7681; --line:rgba(18,23,28,.16);
  --line-soft:rgba(18,23,28,.09);
  --cta:#D8412A; --cta-d:#B8331E; --cta-ink:#F3F1EC;      /* cynober — SCOPE TWARDY */
  --farba:#1F5F52;                                         /* zieleń SEMANTYCZNA */
  --ink-dim:#C3CBD2; --ink-dim-2:#95A0AA;                  /* teksty na atramencie */
  /* TYPOGRAFIA — BRAND-KIT §4 */
  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-text:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --h1-d:clamp(48px,4.9vw,76px); --h1-m:clamp(38px,10vw,42px);
  /* --h2 PODNIESIONE W FAZIE C (LEDGER §8.1). Token z PLAN §2.2 dawał 46 px @1440,
     a makiety plakatowe mierzą 74–90 px (delty sekcja-diff). H1 hero renderuje 82,4 px,
     więc 70 px zostaje POD nim i zamyka rozjazd do −5…−15% zamiast −20…−38%.
     Sekcje CICHE trzymają własny, mniejszy stopień lokalnie (04, 09, 03). */
  /* FAZA C runda 2 (29.07): 70 → 76 px. Makiety plakatowe mierzą 74–90 px, więc 70 zostawiało
     systematyczne −11…−22%. 76 px domyka to do −3…−16%, a jednocześnie zostaje POD H1 hero
     (82,4 px @1440) — hierarchia strony się nie odwraca. Wyżej nie schodzimy: BRAND-KIT §4.1
     (SSOT typografii, nadrzędny wobec pomiaru makiety — PLAN §2.2/M1) daje H2 = 40–48 px,
     więc 76 to i tak +58% ponad sufit kanonu; różnicę do makiet zamyka nota w LEDGER, nie kod.
     ⚠️ #faq trzyma lokalnie 70 px — przy 76 nagłówek łamie się na dwa wiersze (makieta ma jeden). */
  --h2-d:clamp(34px,5.28vw,76px); --h2-m:clamp(30px,8.7vw,36px);
  /* FAZA C: lead na SUFIT zakresu BRAND-KIT §4.1 (17–21). Wszystkie makiety renderują
     tekst pomocniczy ~25% większy niż kod — na 1440 px 19 px czytało się jak przypis. */
  --body-fs:17px; --body-lh:1.62; --lead-fs:21px; --lead-lh:1.52;
  /* PRZESTRZEŃ — rytm 8pt, KANON */
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;
  --sect-pad-d:112px; --sect-pad-m:72px; --content-w:1240px;
  /* KSZTAŁT I GŁĘBIA */
  --radius:3px;                                            /* JEDEN promień; mockup 6px = wyjątek */
  --shadow-sheet:0 1px 0 rgba(18,23,28,.06),0 14px 28px -18px rgba(18,23,28,.5);
  /* RUCH */
  --mo-dur-s:.24s; --mo-dur-m:.42s; --mo-dur-l:.68s;
  --mo-ease:cubic-bezier(.22,1,.36,1); --mo-dist:18px; --mo-stagger:70ms;
}

/* ---- warstwa 3: lokalne, wyprowadzone z warstwy 2 (NIE zmieniać w sekcjach) ---- */
:root{
  --topbar-h:56px;            /* mobile: stan spoczynku = stan przyklejony (PLAN §4.1) */
  --topbar-h-stuck:56px;
  --gutter:24px;              /* wewnętrzny margines .wrap */
  --hair:1px;                 /* grubość hairline'a */
  --tap:44px;                 /* minimalny cel dotykowy */
}
@media (min-width:820px){
  :root{
    --topbar-h:88px;
    --topbar-h-stuck:70px;    /* −20% wg makiety 00-header, stan przyklejony */
    --gutter:40px;
  }
}

/* =========================================================================
   1. RESET
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  /* kotwice (#formularz) nie mogą wpadać pod przyklejony pasek */
  scroll-padding-top:calc(var(--topbar-h-stuck) + var(--s1));
}
body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font-family:var(--font-text);
  font-size:var(--body-fs);
  line-height:var(--body-lh);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit;margin:0}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;border-spacing:0}
svg{display:block}

/* obrazy — LL-033: width/height w atrybutach MUSI iść w parze z height:auto */
img{max-width:100%;display:block}
img[width][height]{height:auto}
/* ⚠️ KONTRAKT: .cover = scena full-bleed pod treścią sekcji. Rodzic MUSI mieć
   position:relative i własną wysokość. Świadomie nadpisuje height:auto. */
img[width][height].cover,img.cover{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}

/* .scena-video — KLIP W MIEJSCU ZDJĘCIA SCENY (dyrektywa Tomka 29.07).
   ⚠️ KONTRAKT: element zajmuje DOKŁADNIE to pudło, w którym stał <img>/<picture>
   sceny — dlatego baza nie nadaje mu ani wysokości, ani proporcji; robi to sekcja,
   tak samo jak robiła to dla obrazu (zero przesunięć layoutu, CLS 0).
   `.cover` = scena full-bleed: rodzic MUSI mieć position:relative i własną wysokość.
   Tło = powierzchnia sekcji, żeby zanim poster się zdekoduje nie mignęła czerń. */
video.scena-video{
  display:block;width:100%;height:auto;
  background:var(--surface,var(--paper));
  object-fit:cover;
}
video.scena-video.cover{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}

/* focus — GATE §7.3 D */
:focus-visible{outline:2px solid var(--cta);outline-offset:2px;border-radius:2px}
:focus:not(:focus-visible){outline:none}

::selection{background:var(--cta);color:var(--cta-ink)}

/* =========================================================================
   2. UKŁAD — rytm 8pt, .wrap, sekcje, powierzchnie
   ========================================================================= */

/* .wrap — JEDYNY kontener treści. Nie pozycjonuje (bez position/transform),
   więc bezpiecznie zagnieżdżać w nim elementy absolutne własnym rodzicem. */
.wrap{
  width:100%;
  max-width:var(--content-w);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.wrap--narrow{max-width:880px}
.wrap--wide{max-width:1440px}

/* .sect — powłoka sekcji. overflow-x:clip (NIE hidden) — nie tworzy kontenera
   przewijania, więc position:sticky w środku dalej działa, a scena wychodząca
   poza krawędź nie generuje poziomego scrolla (GATE G1). */
.sect{
  position:relative;
  overflow-x:clip;
  padding-block:var(--sect-pad-m);
}
@media (min-width:820px){
  .sect{padding-block:var(--sect-pad-d)}
}

/* POWIERZCHNIE — rytm z GATE §7.3 B. ⛔ nigdy dwa pasma z rzędu;
   atrament WYŁĄCZNIE w #formularz i #stopka. */
/* --surface = KOLOR POWIERZCHNI TEJ SEKCJI. Sekcja, która maluje „prześwit tła"
   (otwór perforacji, wycięcie, dziurka) bierze --surface, nigdy --paper wprost —
   inaczej zmiana rytmu powierzchni w FAZIE C zostawia jaśniejsze łaty (FAZA C). */
.s-paper{--surface:var(--paper);background:var(--paper);color:var(--body)}
.s-pasmo{--surface:var(--paper-2);background:var(--paper-2);color:var(--body)}
.s-arkusz{--surface:var(--sheet);background:var(--sheet);color:var(--body)}
.s-atrament{--surface:var(--ink);background:var(--ink);color:var(--ink-dim)}
.s-atrament .h1,.s-atrament .h2,.s-atrament .h3,.s-atrament strong{color:var(--paper)}
.s-atrament .lead{color:var(--ink-dim)}
.s-atrament .small,.s-atrament .muted{color:var(--ink-dim-2)}
.s-atrament .hair,.s-atrament .cut-line{--line:rgba(243,241,236,.20);--line-soft:rgba(243,241,236,.12)}
.s-atrament .reg-mark{color:rgba(243,241,236,.30)}

/* rytm pionowy: .stack nadaje odstęp między dziećmi (domyślnie 24px) */
.stack>*+*{margin-top:var(--stack,var(--s3))}
.stack-s{--stack:var(--s1)}
.stack-m{--stack:var(--s3)}
.stack-l{--stack:var(--s5)}

/* =========================================================================
   3. TYPOGRAFIA — trzy kroje, trzy ROZŁĄCZNE role (BRAND-KIT §4.2)
      Display = Bricolage 700/800 · Tekst = Plex Sans 400/500/600 · Mono = TYLKO CYFRY
   ========================================================================= */
.h1{
  font-family:var(--font-display);font-weight:800;
  font-size:var(--h1-m);line-height:.98;letter-spacing:-.03em;
  color:var(--ink);text-wrap:balance;
}
.h2{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--h2-m);line-height:1.06;letter-spacing:-.02em;
  color:var(--ink);text-wrap:balance;
}
.h3{
  font-family:var(--font-display);font-weight:700;
  font-size:18px;line-height:1.2;letter-spacing:-.01em;color:var(--ink);
}
@media (min-width:820px){
  .h1{font-size:var(--h1-d)}
  .h2{font-size:var(--h2-d)}
  .h3{font-size:22px}
}
.lead{font-size:16px;line-height:1.55;color:var(--body);font-weight:400;text-wrap:pretty}
@media (min-width:820px){.lead{font-size:var(--lead-fs);line-height:var(--lead-lh)}}
.body-t{font-size:var(--body-fs);line-height:var(--body-lh);color:var(--body)}
.small{font-size:14px;line-height:1.5;color:var(--olow)}
.muted{color:var(--olow)}
strong,.strong{font-weight:600;color:var(--ink)}

/* .eyebrow — ⚠️ ODSTĘPSTWO od BRAND-KIT §4.1 (tam „eyebrow = mono"):
   USTERKI-DO-KODU reguła globalna „mono = TYLKO cyfry" jest NOWSZA i wygrywa.
   Eyebrow słowny idzie w Plex Sans 500; numer kroku (np. 01 / 03) w .num. */
.eyebrow{
  font-family:var(--font-text);font-weight:500;
  font-size:12px;letter-spacing:.14em;line-height:1.2;color:var(--olow);
}

/* .num — ⚠️ KONTRAKT TWARDY: wolno owinąć WYŁĄCZNIE cyfry oraz sklejone z nimi
   `zł` / `%` / `–`. Każde SŁOWO (NIP, od, zł jako osobny wyraz) zostaje POZA .num,
   w Plex Sans. Gate §7.3 A sprawdza to gołym okiem — nie łamać. */
.num{
  font-family:var(--font-mono);font-weight:500;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  letter-spacing:0;
}
/* słowo wewnątrz linii liczbowej (np. „od 5 900 zł") — wraca do Plex Sans */
.num-word{font-family:var(--font-text);font-weight:500;letter-spacing:0}

/* .link — podkreślenie tylko tam, gdzie makieta je pokazuje */
.link{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.22em;
  text-decoration-color:currentColor;
  transition:opacity var(--mo-dur-s) var(--mo-ease);
}
.link:hover{opacity:.72}

/* .u-cta — „odbite farbą" podkreślenie pod JEDNYM słowem nagłówka.
   ⛔ nie text-decoration (przecinałoby descendery) · ⛔ tylko słowo bez descendera. */
.u-cta{position:relative;display:inline-block}
.u-cta::after{
  content:"";position:absolute;
  left:-.05em;right:-.05em;bottom:-.11em;height:.085em;
  background:var(--cta);border-radius:1px;
  transform:rotate(-.35deg);transform-origin:left center;
}

/* =========================================================================
   4. PRZYCISKI — jeden promień 3px, cynober tylko w .btn (SCOPE TWARDY)
   ========================================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);
  min-height:var(--tap);
  padding:14px var(--s3);
  font-family:var(--font-text);font-weight:600;font-size:16px;line-height:1.2;
  letter-spacing:-.005em;
  color:var(--cta-ink);background:var(--cta);
  border:0;border-radius:var(--radius);
  text-align:center;text-decoration:none;
  cursor:pointer;
  transition:background-color var(--mo-dur-s) var(--mo-ease),
             transform var(--mo-dur-s) var(--mo-ease);
}
.btn:hover{background:var(--cta-d)}
.btn:active{transform:translateY(1px)}

/* drugorzędny — arkusz + hairline. Makieta 00-header: ⛔ NIE cynober. */
.btn--2{
  color:var(--ink);background:var(--sheet);
  box-shadow:inset 0 0 0 var(--hair) var(--line);
}
.btn--2:hover{background:var(--paper);box-shadow:inset 0 0 0 var(--hair) rgba(18,23,28,.28)}
.s-atrament .btn--2{
  color:var(--paper);background:transparent;
  box-shadow:inset 0 0 0 var(--hair) rgba(243,241,236,.32);
}
.s-atrament .btn--2:hover{background:rgba(243,241,236,.06)}

.btn--lg{min-height:52px;padding:16px var(--s4);font-size:17px}
.btn--wide{width:100%}
@media (min-width:820px){
  .btn{font-size:15px;padding:12px var(--s3)}
  .btn--lg{font-size:17px;padding:16px var(--s4)}
}

/* =========================================================================
   5. ELEMENTY MARKI (WSPÓLNE dla 00-topbar i 17-stopka — „ten sam rysunek")
   ========================================================================= */

/* .sygnet — ZAWSZE <svg class="sygnet"><use href="#sygnet"></use></svg>.
   viewBox symbolu jest KWADRATOWY (0 0 100 100), więc równe width/height
   gwarantują zero deformacji (USTERKI 00-header-m). ⛔ nigdy crop z PNG. */
.sygnet{
  width:var(--sygnet-size,40px);
  height:var(--sygnet-size,40px);
  color:var(--ink);
  flex:0 0 auto;
  overflow:visible;
}
.s-atrament .sygnet{color:var(--paper)}

/* .wordmark — Bricolage Grotesque 700, tracking −0,025 em (BRAND-KIT §2).
   Ten sam rysunek w headerze i w stopce — dlatego mieszka w base.css. */
.wordmark{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--wordmark-size,24px);
  line-height:1;letter-spacing:-.025em;
  color:var(--ink);
  white-space:nowrap;
}
.s-atrament .wordmark{color:var(--paper)}

/* .tagline — IBM Plex Sans 400, Ołów (na atramencie #95A0AA) */
.tagline{font-family:var(--font-text);font-weight:400;font-size:14px;line-height:1.3;color:var(--olow)}
.s-atrament .tagline{color:var(--ink-dim-2)}

/* .lockup — sygnet + blok tekstu, odstęp 0,32 × wysokość ramki znaku */
.lockup{display:flex;align-items:center;gap:12px}
.lockup--v{flex-direction:column;align-items:flex-start;gap:var(--s3)}

/* .cut-line — linia cięcia (hairline kreskowany), pełna szerokość */
.cut-line{
  height:0;border:0;border-top:var(--hair) dashed var(--line);
  margin:0;
}
/* .hair — pełny hairline (ciągły) */
.hair{height:0;border:0;border-top:var(--hair) solid var(--line);margin:0}

/* .reg-mark — ZNACZEK PASOWANIA. ⚠️ KONTRAKT: max 1 na sekcję na desktopie,
   0 na mobile — reguła egzekwowana tutaj, sekcja nie musi nic robić. */
.reg-mark{
  position:relative;width:28px;height:28px;flex:0 0 auto;
  color:var(--line);pointer-events:none;
}
.reg-mark::before,.reg-mark::after{content:"";position:absolute;background:currentColor}
.reg-mark::before{left:50%;top:0;width:var(--hair);height:100%;transform:translateX(-50%)}
.reg-mark::after{top:50%;left:0;height:var(--hair);width:100%;transform:translateY(-50%)}
.reg-mark>i{
  position:absolute;inset:22%;border:var(--hair) solid currentColor;border-radius:50%;
  display:block;
}
@media (max-width:819px){
  .reg-mark{display:none}
}

/* =========================================================================
   6. RUCH — reveal-on-scroll (PLAN §5)
      Bez JS strona jest w pełni czytelna: reguły .reveal działają tylko
      pod html.js (klasę dokłada inline-script z <head>).
   ========================================================================= */
.js .reveal{
  opacity:0;
  transform:translateY(var(--mo-dist));
  transition:opacity var(--mo-dur-m) var(--mo-ease),
             transform var(--mo-dur-m) var(--mo-ease);
  transition-delay:calc(var(--i,0) * var(--mo-stagger));
  will-change:opacity,transform;
}
.js .reveal--left{transform:translateX(calc(var(--mo-dist) * -1))}
.js .reveal--right{transform:translateX(var(--mo-dist))}
.js .reveal--scale{transform:translateY(var(--mo-dist)) scale(.985)}
/* ⚠️ LL-033: .reveal.in ZERUJE transform. ⛔ NIGDY nie centruj elementu
   z klasą .reveal transformem (translate(-50%,-50%)) — użyj wrappera. */
.js .reveal.in{opacity:1;transform:none;will-change:auto}

/* pauza pętli poza viewportem — app.js dokłada .in-view na sekcję */
.js .sect:not(.in-view) [data-anim],
.js .sect:not(.in-view) [data-anim] *,
.js .sect:not(.in-view) [data-sweep]{
  animation-play-state:paused !important;
}

/* =========================================================================
   7. POMOCNICZE
   ========================================================================= */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:var(--s2);top:-64px;z-index:120;
  padding:12px var(--s3);background:var(--ink);color:var(--paper);
  border-radius:var(--radius);
  transition:top var(--mo-dur-s) var(--mo-ease);
}
.skip-link:focus{top:var(--s2)}
[hidden]{display:none !important}

/* =========================================================================
   8. prefers-reduced-motion — PEŁNY KONTRAKT (PLAN §5, GATE G8)
      Wszystkie @keyframes wyłączone · .reveal od razu widoczny ·
      licznik ustawia wartość skokowo (obsługa w app.js) · karetka nie mruga ·
      sweep światła znika · zero smooth-scrolla.
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    animation-delay:0s !important;
    transition-duration:.001ms !important;
    transition-delay:0s !important;
  }
  .js .reveal,.js .reveal--left,.js .reveal--right,.js .reveal--scale{
    opacity:1 !important;transform:none !important;will-change:auto !important;
  }
  [data-anim],[data-anim] *{animation:none !important}
  [data-sweep]{animation:none !important;opacity:0 !important}
  [data-caret]{animation:none !important;opacity:1 !important}
  .btn:active{transform:none}
}