/* system.css - absolutne minimum wspólne dla ośmiu landingów.
   ŻADNYCH zaokrągleń, żadnych gotowych kafelków, żadnej palety.
   Każdy landing przynosi własny układ i własne kolory. Tu jest tylko
   reset, skala typografii, siatka i ruch przy wejściu w kadr. */

:root{
  --tlo:#0B0B0E; --tekst:#F2F2F4; --cichy:#9A9AA6; --cichszy:#6E6E7A;
  --kreska:rgba(255,255,255,.10); --kreska-2:rgba(255,255,255,.2);
  --akcent:#5B5BF0; --akcent-tekst:#fff;
  --ziarno:.3; --ziarno-tryb:overlay;
  --max:1200px; --rytm:clamp(78px,9vw,140px);
  --fm:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  --fd:Inter,system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--tlo);color:var(--tekst);font:400 16px/1.6 var(--fd);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit;border:0;background:none}
button{cursor:pointer}
::selection{background:var(--akcent);color:var(--akcent-tekst)}

/* ziarno - bez tego każde tło wygląda jak pusty div */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;
  opacity:var(--ziarno);mix-blend-mode:var(--ziarno-tryb);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}

h1,h2,h3,h4{font-weight:500;line-height:1.03;letter-spacing:-.04em;color:var(--tekst)}
h1{font-size:clamp(40px,6.6vw,78px);letter-spacing:-.048em}
h2{font-size:clamp(28px,4vw,48px)}
h3{font-size:clamp(17px,1.35vw,20px);letter-spacing:-.025em;line-height:1.3}
p{color:var(--cichy)}
strong,b{color:var(--tekst);font-weight:500}

.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.sekcja{padding:var(--rytm) 0;position:relative}
.waski{max-width:62ch}
.lead{font-size:clamp(16.5px,1.35vw,19px);line-height:1.62;color:var(--cichy)}
.mono{font-family:var(--fm)}

/* jedyny wspólny komponent: przycisk. Prostokątny. */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;
  font-size:14.5px;font-weight:500;letter-spacing:-.012em;
  background:var(--akcent);color:var(--akcent-tekst);border:1px solid var(--akcent);
  transition:background .18s,border-color .18s,color .18s,transform .18s}
.btn:hover{transform:translateY(-1px)}
.btn.duch{background:transparent;color:var(--tekst);border-color:var(--kreska-2)}
.btn.duch:hover{border-color:var(--akcent);background:var(--akcent);color:var(--akcent-tekst)}
.btn.maly{padding:10px 18px;font-size:13.5px}

/* --- ruch --- */
[data-pokaz]{opacity:0;transform:translateY(22px);
  transition:opacity .75s cubic-bezier(.2,.8,.2,1),transform .75s cubic-bezier(.2,.8,.2,1)}
[data-pokaz].widoczny{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  [data-pokaz]{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *{animation:none!important}
}