/* cadelie-base — warstwa bezmarkowa. Zero wartości marki, wyłącznie zmienne. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--c-bialy); color:var(--c-tekst);
  font-family:var(--font-tekst); font-size:var(--fs-tekst); line-height:var(--lh-tekst);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font-naglowek); font-weight:400; color:var(--c-marka); margin:0}
h1{font-size:var(--fs-h1); line-height:var(--lh-h1); letter-spacing:-0.02em}
h2{font-size:var(--fs-h2); line-height:var(--lh-h2); letter-spacing:-0.01em}
h3{font-family:var(--font-tekst); font-size:var(--fs-h3); font-weight:600; line-height:1.3}
p{margin:0 0 var(--s-2)}

.kontener{width:100%; max-width:var(--max-tresc); margin-inline:auto; padding-inline:var(--margines-boczny)}
.kontener--waski{max-width:44rem}

/* Sekcje oddziela ŚWIATŁO, nie kolor tła — reguła nadrzędna projektu. */
.sekcja{padding-block:var(--sekcja-odstep)}
.sekcja--bez{background:var(--c-bez)}
.sekcja--marka{background:var(--c-marka); color:#fff}
.sekcja--marka h2,.sekcja--marka h3{color:#fff}

.etykieta{
  font-size:var(--fs-etykieta); text-transform:uppercase; letter-spacing:.12em;
  font-weight:600; color:var(--c-marka); margin:0 0 var(--s-2)
}
.sekcja--marka .etykieta{color:rgba(255,255,255,.72)}
.wyciszony{color:var(--c-tekst-wyciszony)}
.drobny{font-size:var(--fs-drobny)}

/* --- Przyciski. Kolor marki jest prawie czarny, więc przycisk wyróżnia się
       wielkością, pozycją i światłem wokół, nie barwą. ---------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-1);
  min-height:56px; padding:0 var(--s-4); border:0; border-radius:var(--r-przycisk);
  background:var(--c-marka); color:#fff; text-decoration:none; cursor:pointer;
  font-family:var(--font-tekst); font-size:var(--fs-drobny); font-weight:600;
  text-transform:uppercase; letter-spacing:.08em;
  transition:background .18s ease;
}
.btn:hover{background:var(--c-marka-hover)}
.btn:active{background:var(--c-marka-active)}
.btn:focus-visible{outline:2px solid var(--c-marka); outline-offset:3px}
.btn--pelny{width:100%}
.btn--odwrotny{background:#fff; color:var(--c-marka)}
.btn--odwrotny:hover{background:var(--c-bez)}

.link-strzalka{
  display:inline-flex; align-items:center; gap:.5em; text-decoration:none;
  font-weight:600; color:var(--c-marka); border-bottom:1px solid var(--c-linia);
  padding-bottom:2px; transition:border-color .18s ease;
}
.link-strzalka:hover{border-color:var(--c-marka)}

/* --- Dostępność ------------------------------------------------------- */
.tylko-czytnik{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pomin-do-tresci{position:absolute;left:-9999px;top:0;background:var(--c-marka);color:#fff;padding:var(--s-2);z-index:100}
.pomin-do-tresci:focus{left:var(--s-2);top:var(--s-2)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}