/* BAZA: reset, zmienne, typografia, przyciski, układ sekcji */
:root {
  --grafit: #22262a;
  --grafit-ciemny: #171a1d;
  --stal: #8d9aa5;
  --stal-jasna: #c3ccd4;
  --tlo: #eef0f2;
  --karta: #ffffff;
  --bursztyn: #e8a020;
  --bursztyn-ciemny: #c9860e;
  --atrament: #22262a;
  --linia: #d8dde2;
  --font-naglowek: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-tekst: "Barlow", system-ui, sans-serif;
  --font-techniczny: "JetBrains Mono", monospace;
  --font-logo: "Archivo Expanded", "Arial Black", sans-serif;
  --cien: 0 2px 10px rgba(23, 26, 29, 0.08);
  --cien-mocny: 0 12px 32px rgba(23, 26, 29, 0.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-tekst);
  font-size: 17px;
  line-height: 1.55;
  color: var(--atrament);
  background: var(--tlo);
}

h1, h2, h3 { font-family: var(--font-naglowek); text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.05; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); font-weight: 700; }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; }
h3 { font-size: 1.35rem; font-weight: 600; }
p { margin: 0 0 1em; }
a { color: var(--bursztyn-ciemny); }
img { max-width: 100%; display: block; }

.pomiń {
  position: absolute; left: -999px; top: 0;
  background: var(--grafit); color: #fff; padding: 0.6em 1em; z-index: 100;
}
.pomiń:focus { left: 0; }

:focus-visible { outline: 3px solid var(--bursztyn); outline-offset: 2px; }

.sekcja { padding: 4.5rem 1.25rem; }
.sekcja--ciemna { background: var(--grafit); color: var(--stal-jasna); }
.sekcja--ciemna h2, .sekcja--ciemna h3 { color: #fff; }
.sekcja__srodek { max-width: 1160px; margin: 0 auto; }

.eyebrow {
  font-family: var(--font-techniczny); font-size: 0.8rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--bursztyn); display: flex; align-items: center; gap: 0.75em; margin: 0 0 0.8em;
}
.eyebrow::before { content: ""; width: 2.2em; height: 2px; background: var(--bursztyn); }
.sekcja--ciemna .eyebrow { color: var(--bursztyn); }

.przycisk {
  display: inline-block; font-family: var(--font-naglowek); font-weight: 600; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; text-align: center;
  padding: 0.7em 1.6em; border: 2px solid var(--grafit); background: transparent; color: var(--grafit);
  cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.przycisk:hover { background: var(--grafit); color: #fff; }
.przycisk--glowny { background: var(--bursztyn); border-color: var(--bursztyn); color: var(--grafit-ciemny); box-shadow: 0 3px 0 var(--bursztyn-ciemny); }
.przycisk--glowny:hover { background: var(--bursztyn-ciemny); border-color: var(--bursztyn-ciemny); color: #fff; transform: translateY(1px); box-shadow: 0 2px 0 var(--bursztyn-ciemny); }
.przycisk--glowny:active { transform: translateY(3px); box-shadow: none; }
.przycisk--jasny { border-color: var(--stal-jasna); color: var(--stal-jasna); }
.przycisk--jasny:hover { background: var(--stal-jasna); color: var(--grafit); }

.pas-ostroga { height: 10px; background: repeating-linear-gradient(-45deg, var(--bursztyn) 0 16px, var(--grafit-ciemny) 16px 32px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}