/* BAZA - reset, typografia, kontener, przyciski, etykiety, reveal. Wspólna dla wszystkich sekcji. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--tusz);color:var(--tekst);font-family:var(--krój-body);font-size:var(--t-body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
/* overflow-x:clip zamiast hidden: hidden na body zabija position:sticky w Safari */
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,p{margin:0}
h1,h2,h3,.display{font-family:var(--krój-display);font-weight:var(--waga-display);letter-spacing:var(--tracking-display);line-height:var(--lh-display);text-wrap:balance}
h1{font-size:var(--t-hero)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);letter-spacing:-.02em;line-height:1.15}
.lead{font-size:var(--t-lead);color:var(--tekst-2);line-height:1.5;max-width:60ch;text-wrap:pretty}
.etykieta{font-family:var(--krój-mono);font-size:var(--t-etykieta);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--tekst-3)}
.etykieta b{color:var(--akcent);font-weight:500}
.papier .etykieta b{color:var(--tekst)} /* żółty akcent na kremie nie ma kontrastu */
.mono{font-family:var(--krój-mono)}
.akcent{color:var(--akcent)}
.gradient-tekst{background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.kursywa{font-style:italic;font-weight:400}

/* kontener i sekcja */
.kontener{width:min(var(--kontener),100% - 2*var(--margines));margin-inline:auto}
.sekcja{position:relative;padding-block:var(--sekcja-pion)}
.sekcja-naglowek{display:grid;gap:18px;margin-bottom:clamp(36px,5vw,64px);max-width:820px}

/* przyciski */
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:999px;font-weight:600;font-size:15px;line-height:1;transition:transform .25s var(--ease),background .25s,color .25s;will-change:transform}
.btn:hover{transform:translateY(-2px)}
.btn-akcent{background:var(--akcent);color:var(--akcent-tekst)}
.btn-ghost{border:1px solid var(--linia);color:var(--tekst)}
.btn-ghost:hover{background:var(--tusz-2)}
.btn .strzalka{transition:transform .25s var(--ease)}
.btn:hover .strzalka{transform:translateX(4px)}

/* panel / karta */
.karta{background:var(--tusz-2);border:1px solid var(--linia);border-radius:var(--promien);padding:clamp(22px,2.6vw,36px)}
.linia{border:0;border-top:1px solid var(--linia);margin:0}

/* reveal: elementy z klasą .reveal dostają .in przy wejściu w ekran (silnik.js) */
.reveal{opacity:0;transform:translateY(22px);transition:opacity var(--czas) var(--ease),transform var(--czas) var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-opoznienie="1"]{transition-delay:.08s}.reveal[data-opoznienie="2"]{transition-delay:.16s}.reveal[data-opoznienie="3"]{transition-delay:.24s}.reveal[data-opoznienie="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
.zrzut .reveal{opacity:1;transform:none;transition:none}
/* tryb zrzutu: wszystkie przejścia natychmiast (headless zamraża je na pierwszej klatce) */
.zrzut *,.zrzut *::before,.zrzut *::after{transition-duration:0s!important;transition-delay:0s!important}

/* siatka 64 px pod jasną sekcją (z decków), wygaszona maską */
.papier.siatka::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--linia) 1px,transparent 1px),linear-gradient(90deg,var(--linia) 1px,transparent 1px);background-size:64px 64px;opacity:.5;-webkit-mask:radial-gradient(76% 68% at 50% 44%,#000 40%,transparent 100%);mask:radial-gradient(76% 68% at 50% 44%,#000 40%,transparent 100%)}
.papier.siatka>*{position:relative;z-index:1}

/* ziarno na ciemnym (delikatne; .035 na jasnym czyta się jako brud) */
.ziarno::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.045;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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* nawigacja */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px var(--margines);mix-blend-mode:difference;color:#fff}
.nav-marka{font-family:var(--krój-display);font-weight:800;letter-spacing:-.03em;font-size:18px}
.nav-linki{display:flex;gap:26px;font-size:14px;color:rgba(255,255,255,.75)}
@media (max-width:720px){.nav-linki{display:none}}

/* stopka */
.stopka{padding:48px 0;border-top:1px solid var(--linia);color:var(--tekst-3);font-size:13px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* pomocnicze */
.ukryj-mobile{display:initial}.pokaz-mobile{display:none}
@media (max-width:720px){.ukryj-mobile{display:none}.pokaz-mobile{display:initial}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}