/* ==========================================================================
   base.css — reset, typografia, komponenty wspólne
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--paper-600) var(--paper-900);
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
html.is-native-scroll { scroll-behavior: smooth; }

body {
  background: var(--paper-900);
  color: var(--graphite-100);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
html.is-loading body { overflow: hidden; }

img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }

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

::selection { background: var(--red-500); color: #fff; }

/* --- Typografia ----------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  /* 0.94 wygląda dobrze po angielsku i zjada ogonki w Ą, Ę oraz kreski w Ó, Ż.
     0.99 to minimum, przy którym polskie wersaliki nie zahaczają o kolejny wiersz. */
  line-height: 0.99;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 112;   /* lekko rozciągnięte — charakter oznaczeń BHP */
  text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }

p { text-wrap: pretty; }

.lead {
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--graphite-200);
  max-width: 44ch;
}
.body-muted { color: var(--graphite-300); max-width: 62ch; }

.mono {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--graphite-400);
  font-weight: 400;
}

/* --- Layout --------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); position: relative; }
.rule {
  height: 1px;
  background: var(--line-strong);
  border: 0;
  width: 100%;
}

/* --- Ziarno: fixed, pointer-events:none. Nigdy na kontenerze scrollowanym -- */
.grain {
  position: fixed;
  inset: -50%;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: multiply;   /* na jasnym tle ziarno ma tylko przyciemniać */
  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='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change: transform;
  animation: grain 8s steps(6) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-4%, 3%); }
  40% { transform: translate(3%, -5%); }
  60% { transform: translate(-6%, -2%); }
  80% { transform: translate(5%, 4%); }
}

/* --- Przyciski ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  white-space: nowrap;
  padding: 1.05rem 2rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out-soft),
              color var(--dur-fast) var(--ease-out-soft),
              border-color var(--dur-fast) var(--ease-out-soft),
              transform 0.12s ease;
  will-change: transform;
}
.btn:active { transform: translateY(1px) scale(0.985); }

.btn--spark {
  background: var(--red-500);
  color: #fff;                          /* kontrast 5.4:1 na --red-500 */
  border-color: var(--red-500);
}
.btn--spark:hover { background: var(--red-600); border-color: var(--red-600); }  /* ciemniej: 7:1 */

.btn--ghost {
  background: transparent;
  color: var(--graphite-100);
  border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--graphite-100); background: rgb(20 22 26 / 0.05); }

.btn--lg { padding: 1.25rem 2.4rem; font-size: var(--step-0); }

/* Telefon jako link: podkreślenie rysowane od lewej */
.link-underline {
  position: relative;
  display: inline-block;
}
.link-underline::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-base) var(--ease-out-soft);
}
.link-underline:hover::after { transform: scaleX(1); transform-origin: left center; }

/* --- Pigułka metadanych --------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--graphite-300);
}

/* --- Ruch: wyłącznik globalny --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .grain { animation: none; }
}