/* Roboto — latin-ext (polskie znaki: ą ę ó ś ź ż ć ń ł) */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/Roboto-latin-ext-a5f4a7cf.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Roboto — latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/Roboto-latin-68137444.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Oswald — latin-ext (polskie znaki) */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("/assets/Oswald-latin-ext-a8828bf1.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Oswald — latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("/assets/Oswald-latin-53b77d39.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Oswald Light (300) — menu nawigacji i Umowa PDF (Documents::Fonts). Osobny wpis, bo statyczne
   pliki 600–700 wyżej nie obejmują tej wagi (przeglądarka i tak by ją "sfałszowała" do
   najbliższej dostępnej zamiast realnie pocienić). Jeden plik, nie podzielony na latin/latin-ext
   jak reszta rodziny wyżej — ta strona jest niemal wyłącznie polska, więc oba web-subsety i tak
   są pobierane razem na każdej stronie; scalone (2026-09-09, fonttools merge z tych samych dwóch
   subsetów) w jeden request wychodzi mniejsze łącznie (20,6 KB vs 24,3 KB) i szybciej się ładuje. */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/Oswald-Light-08ad151a.woff2") format('woff2');
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Atrybut [hidden] żyje w arkuszu przeglądarki (user-agent), więc
   PRZEGRYWA z każdą regułą autorską o takiej samej specyficzności —
   np. .btn { display: inline-flex } potrafi pokazać element z powrotem,
   mimo hidden="true" ustawionego z JS. Ten reset wymusza, że [hidden]
   zawsze wygrywa, niezależnie od tego, co ustawia klasa elementu. */
[hidden] {
  display: none !important;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-ink);
  letter-spacing: 0.01em;
  text-wrap: balance;
}

/* Wersaliki tylko na dwóch najwyższych poziomach — H3 i niżej
   zostają normalne, żeby dłuższe polskie zdania dało się czytać.

   line-height 1.18, nie ciaśniej: polskie wersaliki niosą akcenty
   (Ś, Ż, Ó, Ć, Ń), a Oswald stawia je wysoko nad wersalikiem. Przy
   1.05 akcent z niższej linii wchodzi w linię powyżej i czyta się
   jak przecinek zawieszony w powietrzu. */
h1, h2 {
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  line-height: 1.18;
}

a {
  color: var(--color-green);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-green-hover);
}

/* Linki w zdaniach (nie przyciski .btn) muszą się różnić czymś więcej
   niż kolorem — inaczej to niewystarczające dla osób słabiej widzących
   kolor (WCAG 1.4.1, wychwycone przez audyt PageSpeed 2026-09-08). */
p a:not(.btn) {
  text-decoration: underline;
}

img, svg {
  display: block;
  max-width: 100%;
}

ul, ol {
  list-style: none;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

p {
  line-height: 1.7;
}

strong {
  font-weight: 700;
}

:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════
   .notch — ścięty prawy górny róg, sygnatura marki.

   Sam clip-path obciąłby border razem z rogiem, więc ramka i
   wypełnienie to dwa pseudo-elementy: ::before jest ramką,
   ::after leży na nim z odsunięciem --notch-line-width i zakrywa
   środek. isolation:isolate zamyka ujemne z-index w tym elemencie,
   żeby nie przebiły pod tło strony.

   Konfiguracja per komponent:
     --notch          rozmiar ścięcia
     --notch-line     kolor ramki
     --notch-fill     wypełnienie (kolor albo gradient)
   ══════════════════════════════════════════════════════════════ */

.notch {
  position: relative;
  isolation: isolate;
  background: none;
  border: none;
  border-radius: 0;
  --notch-line: var(--color-border);
  --notch-fill: var(--color-bg-alt);
  --notch-line-width: 1px;
}

.notch::before,
.notch::after {
  content: '';
  position: absolute;
  clip-path: var(--notch-clip);
  pointer-events: none;
}

.notch::before {
  inset: 0;
  z-index: -2;
  background: var(--notch-line);
}

.notch::after {
  inset: var(--notch-line-width);
  z-index: -1;
  background: var(--notch-fill);
}

/* Wariant konturowy — sam obrys, bez wypełnienia.

   UWAGA: nie da się tu użyć `transparent`. Ramkę rysuje ::before
   wypełniając cały kształt, a ::after zakrywa jego środek — więc
   przezroczysty ::after odsłania pełną plamę --notch-line zamiast
   tła. Środek musi dostać JAWNY kolor tła sekcji, na której leży.
   Domyślnie --color-bg; sekcje o innym tle nadpisują (patrz
   .home-section--alt .notch--ghost w homepage.css). */
.notch--ghost {
  --notch-fill: var(--color-bg);
}

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