@charset "UTF-8";
/* ==========================================================================
   Base — reset, typografia, przyciski, sekcje, kształty marki
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* kotwice nie chowają się pod przyklejonym nagłówkiem */
  scroll-padding-top: calc(var(--header-h) + var(--admin-bar, 0px) + 12px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  /* „clip", nie „hidden": nie tworzy kontekstu przewijania, więc sticky działa */
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Stopka zawsze przy dolnej krawędzi, także na krótkich stronach (404). */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
body.admin-bar {
  min-height: calc(100vh - var(--admin-bar));
  min-height: calc(100dvh - var(--admin-bar));
}
.site-main { flex: 1 0 auto; min-width: 0; }
.site-footer { flex-shrink: 0; }

::selection { background: var(--orange); color: var(--dark); }

/* --- Typografia ---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: -0.015em; }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); letter-spacing: -0.01em; font-weight: 700; }
h5 { font-size: var(--fs-body); line-height: var(--lh-snug); letter-spacing: 0; font-weight: 700; }
h6 { font-size: var(--fs-sm); line-height: var(--lh-snug); letter-spacing: var(--tracking-wide); font-weight: 700; }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

a {
  color: var(--orange-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
a:hover { color: var(--ink); }

strong, b { font-weight: 700; }

ul, ol { margin: 0 0 var(--space-4); padding-left: 1.25rem; }
li { margin: 0.3rem 0; }

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

/* [hidden] ma wygrywać z każdym display w motywie. Jedyne !important tutaj. */
[hidden] { display: none !important; }

hr {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: var(--space-7) 0;
}

blockquote {
  margin: var(--space-5) 0;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}
blockquote p:last-child { margin-bottom: 0; }

/* --- Dostępność ---------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--orange-ink);
  outline-offset: 3px;
  border-radius: 4px;
}
.section--dark :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.site-header :where(a, button, [tabindex]):focus-visible,
.site-footer :where(a, button, [tabindex]):focus-visible,
.on-dark :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--orange);
}

.screen-reader-text,
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100%;
  z-index: var(--z-skip);
  background: var(--orange);
  color: var(--dark);
  font-weight: 700;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--pill);
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--space-4); color: var(--dark); }

/* --- Układ --------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

/* Odstępy i tło sekcji. Wartości można nadpisać z panelu bloku (akordeon
   „Zaawansowane"); render wstawia zmienne --sec-* w inline style. */
.section {
  position: relative;
  padding-top: var(--sec-pt, var(--section-pad));
  padding-bottom: var(--sec-pb, var(--section-pad));
  background-color: var(--sec-bg, transparent);
}
@media (max-width: 768px) {
  .section {
    padding-top: var(--sec-pt-m, var(--sec-pt, var(--section-pad)));
    padding-bottom: var(--sec-pb-m, var(--sec-pb, var(--section-pad)));
  }
}

.section--dark {
  background-color: var(--sec-bg, var(--dark));
  color: var(--on-dark);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5 { color: var(--on-dark); }
.section--dark a:not(.btn) { color: var(--orange); }
.section--dark a:not(.btn):hover { color: var(--on-dark); }

.section--surface { background-color: var(--surface-2); }

/* Nagłówek sekcji: tytuł + opis. Trzyma długość wiersza i odstęp pod spodem. */
.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2.25rem, 4.5vw, 3.75rem);
}
.section-head > :last-child { margin-bottom: 0; }
.section-head h2 { margin-bottom: var(--space-4); }

.lead {
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--muted);
  max-width: var(--measure);
}
.section--dark .lead { color: var(--on-dark-muted); }
.measure { max-width: var(--measure); }

/* Tekst z edytora (pola „Treść" w blokach): akapity, listy, linki. Kolor dopasowuje się do tła sekcji. */
.prose { max-width: var(--measure); color: var(--ink); }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: 0 0 var(--space-4); }
.prose ul,
.prose ol { margin: 0 0 var(--space-4); padding-left: 1.3rem; }
.prose li::marker { color: var(--orange-ink); font-weight: 700; }
.prose a { font-weight: 600; text-decoration-thickness: 2px; }
.section--dark .prose,
.on-dark .prose { color: oklch(88% 0.008 60); }
.section--dark .prose li::marker,
.on-dark .prose li::marker { color: var(--orange); }

/* Pojedyncze, celowe wyróżnienie w nagłówku: marker o kolorze marki. */
.hl {
  background-image: linear-gradient(var(--orange), var(--orange));
  background-repeat: no-repeat;
  background-size: 100% 0.34em;
  background-position: 0 88%;
  color: inherit;
}
/* Na grafitowym tle marker zastępuje sam pomarańczowy tekst (7,5:1). */
.section--dark .hl,
.on-dark .hl { background: none; color: var(--orange); }

/* Wejście elementu: tylko transform i opacity. Domyślnie element jest widoczny,
   animacja jedynie ją odtwarza, więc bez JS i przy reduced-motion nic nie znika. */
@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  @keyframes rise { from { opacity: 1; transform: none; } to { opacity: 1; transform: none; } }
}

/* Kicker używany wyłącznie w blokach, które go jawnie wypełnią (faq, reviews). */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--orange-ink);
  margin-bottom: var(--space-3);
}
.section--dark .eyebrow { color: var(--orange); }

/* --- Przyciski ----------------------------------------------------------- */
.btn {
  --btn-bg: var(--orange);
  --btn-fg: var(--dark);
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 3.25rem;           /* wygodny cel dotykowy */
  padding: 0.8em 1.7em;
  border: 2px solid var(--btn-bd);
  border-radius: var(--pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:hover {
  --btn-bg: var(--orange-hover);
  color: var(--btn-fg);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px oklch(70% 0.165 52 / 0.38);
}
.btn:active { transform: translateY(0); box-shadow: none; }
.btn .icon { width: 1.15em; height: 1.15em; flex: none; transition: transform var(--dur) var(--ease); }
.btn:hover .icon--arrow { transform: translateX(4px); }

.btn--dark { --btn-bg: var(--dark); --btn-fg: var(--on-dark); }
.btn--dark:hover { --btn-bg: var(--dark-3); box-shadow: 0 10px 26px oklch(10% 0.01 55 / 0.35); }

.btn--light { --btn-bg: #fff; --btn-fg: var(--dark); }
.btn--light:hover { --btn-bg: var(--orange-soft); box-shadow: 0 10px 26px oklch(10% 0.01 55 / 0.25); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-strong); }
.btn--ghost:hover { --btn-bg: transparent; --btn-bd: var(--ink); box-shadow: none; }

.section--dark .btn--ghost,
.on-dark .btn--ghost { --btn-fg: var(--on-dark); --btn-bd: var(--line-on-dark); }
.section--dark .btn--ghost:hover,
.on-dark .btn--ghost:hover { --btn-bd: var(--on-dark); }

.btn--lg { min-height: 3.75rem; padding-inline: 2em; font-size: var(--fs-body); }
.btn--sm { min-height: 2.9rem; padding: 0.55em 1.35em; }
.btn--block { width: 100%; }

/* --- Kształty marki: łuk, pigułka, kółko, półkole, gwiazdka ---------------
   Dekoracja klienta (pliki shape-1..4). Zawsze aria-hidden, bez zdarzeń. */
.shape { position: absolute; display: block; pointer-events: none; flex: none; }
.shape--circle { border-radius: 50%; background: var(--red); }
.shape--pill   { border-radius: var(--pill); background: var(--yellow); }
.shape--half   { border-radius: 100% 0 0 100% / 50% 0 0 50%; background: var(--blue); }
.shape--arch   { border-radius: var(--pill) var(--pill) 0 0; }
.shape--star   { color: var(--blue); }
.shape--star svg { width: 100%; height: 100%; fill: currentColor; }

/* Pływanie kształtów: tylko transform, wyłączone przy reduced-motion. */
@keyframes shape-float {
  from { transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)); }
  to   { transform: translate3d(0, -10px, 0) rotate(calc(var(--rot, 0deg) + 3deg)); }
}
.shape--float { animation: shape-float 7s var(--ease) infinite alternate; }
.shape--float:nth-of-type(2n) { animation-duration: 9s; animation-delay: -3s; }
@media (prefers-reduced-motion: reduce) {
  .shape--float { animation: none; }
}