/* ==========================================================================
   ernestnowocien.pl — JEDYNY plik stylów strony
   --------------------------------------------------------------------------
   Spis treści:
    1. Tokeny (kolory, typografia, cienie, ruch, układ)
    2. Fonty (Inter, pliki lokalne)
    3. Reset (odpowiednik preflight Tailwinda — 1:1 z wersją React)
    4. Baza (html/body, zaznaczenie, pasek przewijania)
    5. Układ i pomocnicze (kontener, pasy sekcji, gradient tekstu, sr-only)
    6. Ikony
    7. Przyciski
    8. Nawigacja (partials/header.php) + menu mobilne
    9. Stopka (partials/footer.php)
   10. Układ stron konwersji (partials/focus-*.php)
   11. Przycisk „na górę"
   12. Poświata kursora
   13. Animacje (keyframes)
   14+ Sekcje strony głównej, podstrony — niżej, każda z nagłówkiem
   99. Ograniczony ruch (prefers-reduced-motion)

   Zasady: kolory tylko przez tokeny z :root (przezroczystość: rgb(var(--x-rgb) / .1)).
   Progi responsywności jak w wersji React: 640 / 768 / 1024 / 1280 px (mobile-first,
   tylko min-width).
   ========================================================================== */


/* ==========================================================================
   1. TOKENY
   ========================================================================== */
:root {
  color-scheme: dark;

  /* Tła */
  --bg: #000000;
  --bg-rgb: 0 0 0;
  --bg-soft: #0d0d10;
  --bg-elevated: #16161a;
  --bg-elevated-rgb: 22 22 26;
  --surface: #101014;
  --surface-hover: #16161a;

  /* Tekst */
  --fg: #ededef;
  --fg-rgb: 237 237 239;
  --fg-muted: #b4b4bd;
  --fg-subtle: #8b8b96;
  --white: #ffffff;
  --white-rgb: 255 255 255;
  --black: #000000;

  /* Linie */
  --line: rgb(255 255 255 / 0.14);
  --line-strong: rgb(255 255 255 / 0.22);

  /* Akcent (niebieski marki) */
  --brand: #3b82f5;
  --brand-rgb: 59 130 245;
  --brand-hover: #2f74ea;
  --brand-fg: #6aa2f8;
  --brand-soft: rgb(59 130 245 / 0.12);
  --brand-glow: rgb(59 130 245 / 0.35);
  --gradient-text-end: #75a0eb;
  --chip-bg: #0a1220;              /* tło „chipa” na rogu ramki zdjęcia */

  /* Semantyczne: pasuje / nie pasuje (sekcja „Dla kogo") */
  --tak-rgb: 52 211 153;
  --tak-fg: #6ee7b7;
  --nie-rgb: 251 113 133;
  --nie-fg: #fda4af;

  /* Błędy formularzy */
  --blad: #f87171;
  --blad-rgb: 248 113 113;
  --blad-jasny: #fca5a5;
  --blad-najjasniejszy: #fecaca;

  /* Ostrzeżenie (panel: status „Oczekuje", zapisy zamknięte) */
  --uwaga-rgb: 251 191 36;
  --uwaga-fg: #fcd34d;

  /* Typografia */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Cienie. UWAGA: w wersji React klasy shadow-[var(--shadow-card|elevated)] Tailwind
     skompilował jako KOLOR cienia (nie cień), więc nigdzie się nie rysowały —
     dlatego pasek nawigacji, menu i zrzuty opinii NIE mają tu cienia (1:1). */
  --shadow-card: 0 8px 24px -8px rgb(0 0 0 / 0.5);
  --shadow-elevated: 0 20px 60px -20px rgb(0 0 0 / 0.7);
  --shadow-glow: 0 0 0 1px rgb(59 130 245 / 0.35), 0 10px 40px -10px rgb(59 130 245 / 0.55);

  /* Ruch */
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);     /* domyślne przejście */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);

  /* Układ */
  --container: 1120px;
  --gutter: 1.5rem;
}


/* ==========================================================================
   2. FONTY — Inter 4.1 (te same pliki co wcześniej z rsms.me, teraz lokalnie)
   ========================================================================== */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/Inter-Italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 500; font-display: swap; src: url("/fonts/Inter-MediumItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 600; font-display: swap; src: url("/fonts/Inter-SemiBoldItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/Inter-Bold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 700; font-display: swap; src: url("/fonts/Inter-BoldItalic.woff2") format("woff2"); }


/* ==========================================================================
   3. RESET — odpowiednik preflight Tailwind v3 (1:1 z wersją React)
   ========================================================================== */
*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: var(--font-sans);
  -webkit-tap-highlight-color: transparent;
}

body { margin: 0; line-height: inherit; }

hr { height: 0; color: inherit; border-top-width: 1px; }
abbr:where([title]) { text-decoration: underline dotted; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
table { text-indent: 0; border-color: inherit; border-collapse: collapse; }

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
button, select { text-transform: none; }
button, input:where([type="button"]), input:where([type="reset"]), input:where([type="submit"]) {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}
:-moz-focusring { outline: auto; }
:-moz-ui-invalid { box-shadow: none; }
progress { vertical-align: baseline; }
::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
summary { display: list-item; }

blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; }
fieldset { margin: 0; padding: 0; }
legend { padding: 0; }
ol, ul, menu { list-style: none; margin: 0; padding: 0; }
dialog { padding: 0; }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af; }
button, [role="button"] { cursor: pointer; }
:disabled { cursor: default; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
[hidden]:where(:not([hidden="until-found"])) { display: none; }
/* <picture> (WebP + zapas) nie zmienia układu — <img> zachowuje się jak bezpośrednie dziecko */
picture { display: contents; }


/* ==========================================================================
   4. BAZA
   ========================================================================== */
html,
body {
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01", "ss03";
}

/* Pas bezpieczeństwa na html: body-only overflow-x:hidden nie blokuje poziomego
   panningu w iOS Safari. `clip` nie tworzy scroll-containera (nie psuje sticky). */
html {
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
}

/* Otwarte menu mobilne blokuje przewijanie tła */
body.menu-otwarte { overflow: hidden; }

/* Kotwice (#cennik itd.) lądują 32 px pod górną krawędzią — jak w wersji React */
[id] { scroll-margin-top: 32px; }

::selection {
  background: rgb(var(--brand-rgb) / 0.35);
  color: var(--white);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(var(--white-rgb) / 0.2); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--brand-rgb) / 0.4); }


/* ==========================================================================
   5. UKŁAD I POMOCNICZE
   ========================================================================== */
.container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: var(--container);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Szkielet strony: pełny układ (nawigacja + stopka) i układ „focus" */
.strona {
  position: relative;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.strona__tresc { flex: 1 1 0%; }
.strona--pelna .strona__tresc { padding-top: 6rem; }

/* Separacja sekcji: pas na bg-soft z krawędziami; hairline = granica czerń–czerń */
.section-band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background-color: var(--bg-soft);
}
.section-hairline {
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background-image: linear-gradient(to right, transparent, rgb(var(--white-rgb) / 0.1), transparent);
}

.text-gradient {
  background: linear-gradient(135deg, var(--fg) 0%, var(--gradient-text-end) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* „Przejdź do treści" — widoczny tylko po najechaniu klawiaturą */
.skip-link {
  position: fixed;
  left: 1rem;
  top: -100px;
  z-index: 100;
  border-radius: 9999px;
  background-color: var(--white);
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--black);
}
.skip-link:focus { top: 1rem; }

.nowrap { white-space: nowrap; }

/* Wyróżnienie frazy w szarym tekście (jaśniejszy kolor; --mocno = też grubiej) */
.wyroznij { color: var(--fg); }
.wyroznij--mocno { font-weight: 500; }

/* Wspólny nagłówek sekcji (h2) strony głównej */
.naglowek-sekcji {
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--fg);
}
@media (min-width: 768px) {
  .naglowek-sekcji { font-size: 2.25rem; line-height: 2.5rem; }
}
@media (min-width: 1024px) {
  .naglowek-sekcji { font-size: 3rem; line-height: 1; }
}

/* Nadtytuł (mały, wersalikami) — nad nagłówkami sekcji i w stopce */
.kicker {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-subtle);
}

/* Wyśrodkowany blok nagłówka sekcji: nadtytuł + h2 + lead */
.sekcja-glowa { margin-left: auto; margin-right: auto; max-width: 48rem; text-align: center; }
.sekcja-glowa__tytul { margin-top: 1rem; }
.sekcja-glowa__przygaszone { color: var(--fg-muted); }
.lead-sekcji {
  margin: 1rem auto 0;
  max-width: 42rem;
  font-size: 15px;
  line-height: 1.625;
  color: var(--fg-muted);
}
@media (min-width: 768px) {
  .lead-sekcji { font-size: 1rem; line-height: 1.5rem; }
}

/* Tytuł i tekst karty (h3 + opis) — wspólne dla kart w sekcjach */
.tytul-karty {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.375;
  letter-spacing: -0.025em;
  color: var(--fg);
}
.tekst-karty {
  font-size: 15px;
  line-height: 1.625;
  color: var(--fg-muted);
}
@media (min-width: 768px) {
  .tytul-karty { font-size: 1.25rem; line-height: 1.75rem; }
  .tekst-karty { font-size: 1rem; line-height: 1.5rem; }
}

/* Nagłówek sekcji wyrównany do lewej + kreska marki przy nadtytule */
.sekcja-glowa--lewo { margin-left: 0; margin-right: 0; text-align: left; }
.kicker--kreska { border-left: 2px solid var(--brand); padding-left: 1.25rem; }
.sekcja-glowa--lewo .lead-sekcji { margin-left: 0; margin-right: 0; }

/* Cienka linia akcentu u góry bloku (gradient marki) — w rodzicu z position:relative */
.linia-akcent {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background-image: linear-gradient(to right, transparent, rgb(var(--brand-rgb) / 0.5), transparent);
}

/* Niebieski link w tekście (np. weblocal.pl) */
.link-marki {
  font-weight: 500;
  color: var(--brand);
  text-underline-offset: 4px;
}
.link-marki:hover { text-decoration-line: underline; }

/* Link ze strzałką w prawo (np. „Zobacz pełne realizacje") */
.link-strzalka {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--brand-fg);
  transition: color 0.15s var(--ease-std);
}
.link-strzalka:hover { color: var(--brand); }
.link-strzalka__ikona { transition: transform 0.15s var(--ease-std); }
.link-strzalka:hover .link-strzalka__ikona { transform: translate(0.125rem, 0); }

/* Link do innej podstrony w podtytule (jasnoniebieski, podkreślenie przy najechaniu) */
.link-podstrona {
  font-weight: 500;
  color: var(--brand-fg);
  text-underline-offset: 4px;
  transition: color 0.15s var(--ease-std);
}
.link-podstrona:hover { color: var(--brand); text-decoration-line: underline; }

/* Jasnoniebieski link w tekście (np. e-mail w polityce prywatności) */
.link-jasny {
  font-weight: 500;
  color: var(--brand-fg);
  text-underline-offset: 4px;
}
.link-jasny:hover { text-decoration-line: underline; }

/* Nagłówek h1 stron tekstowych (polityka, podziękowanie) */
.tytul-strony {
  margin-top: 1rem;
  font-size: 2.25rem;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fg);
}
@media (min-width: 768px) {
  .tytul-strony { font-size: 3rem; line-height: 1; }
}

/* Link „źródła" (okno z danymi o prowizjach) */
.link-zrodla {
  font-size: 13px;
  color: var(--fg-subtle);
  text-decoration-line: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 4px;
  transition: color 0.15s var(--ease-std);
}
.link-zrodla:hover { color: var(--fg-muted); }

/* Link otwierający galerię (lightbox) */
.link-galerii {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--fg-subtle);
  transition: color 0.15s var(--ease-std);
}
.link-galerii:hover { color: var(--fg-muted); }

/* Okno dialogowe (np. „źródła") — nakładka + panel */
.okno {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(var(--bg-rgb) / 0.85);
  padding: 1rem;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.okno[hidden] { display: none; }
.okno__panel {
  max-height: 85vh;
  width: 100%;
  max-width: 32rem;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background-color: var(--bg-elevated);
  padding: 1.5rem;
}
.okno__glowa { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.okno__tytul {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fg);
}
.okno__zamknij {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 9999px;
  background-color: rgb(var(--white-rgb) / 0.06);
  color: var(--fg);
  transition: background-color 0.15s var(--ease-std);
}
.okno__zamknij:hover { background-color: rgb(var(--white-rgb) / 0.12); }
.okno__lista { margin-top: 1.25rem; }
.okno__lista > li + li { margin-top: 0.75rem; }
.okno__link {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background-color: var(--surface);
  padding: 0.75rem 1rem;
  transition: background-color 0.15s var(--ease-std), border-color 0.15s var(--ease-std);
}
.okno__link:hover { border-color: var(--line-strong); background-color: var(--surface-hover); }
.okno__link-tekst { flex: 1 1 0%; font-size: 0.875rem; line-height: 1.375; }
.okno__data { color: var(--fg-subtle); }
.okno__opis { margin-top: 0.125rem; display: block; color: var(--fg-muted); }
.okno__ikona {
  flex-shrink: 0;
  align-self: center;
  color: var(--fg-subtle);
  transition: color 0.15s var(--ease-std);
}
.okno__link:hover .okno__ikona { color: var(--brand); }
.okno__stopka {
  margin-top: 1.25rem;
  font-size: 13px;
  line-height: 1.625;
  color: var(--fg-subtle);
}

/* Galeria (lightbox) — DOM tworzy js/main.js */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(var(--bg-rgb) / 0.85);
  padding: 1rem;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.lightbox__przycisk {
  position: absolute;
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 9999px;
  background-color: rgb(var(--white-rgb) / 0.06);
  color: var(--fg);
  transition: background-color 0.15s var(--ease-std);
}
.lightbox__przycisk:hover { background-color: rgb(var(--white-rgb) / 0.12); }
.lightbox__zamknij { right: 1rem; top: 1rem; }
.lightbox__wstecz { left: 0.75rem; top: 50%; transform: translate(0, -50%); }
.lightbox__dalej { right: 0.75rem; top: 50%; transform: translate(0, -50%); }
.lightbox__figura { max-height: 100%; max-width: 56rem; }
.lightbox__img {
  margin-left: auto;
  margin-right: auto;
  max-height: 78vh;
  width: auto;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
}
.lightbox__podpis {
  margin: 0.75rem auto 0;
  max-width: 42rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.375;
  color: var(--fg-muted);
}
.lightbox__licznik { white-space: nowrap; color: var(--fg-subtle); }

@media (min-width: 768px) {
  .okno__panel { padding: 1.75rem; }
  .lightbox { padding: 2.5rem; }
  .lightbox__wstecz { left: 1.5rem; }
  .lightbox__dalej { right: 1.5rem; }
}

/* Niebieska kropka przed dopiskiem */
.kropka {
  margin-right: 0.5rem;
  display: inline-block;
  width: 0.25rem;
  height: 0.25rem;
  transform: translate(0, -0.125rem);
  border-radius: 9999px;
  background-color: var(--brand);
}

/* Tekstura siatki (partials/siatka.php) — w rodzicu z position:relative */
.siatka {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -5rem;
  margin-top: -0.5rem;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(#fff, transparent);
  mask-image: linear-gradient(#fff, transparent);
}
.siatka__warstwa {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, rgb(var(--white-rgb) / 0.05), rgb(var(--white-rgb) / 0.01));
  -webkit-mask-image: radial-gradient(farthest-side at top, #fff, transparent);
  mask-image: radial-gradient(farthest-side at top, #fff, transparent);
}
.siatka__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: rgb(var(--white-rgb) / 0.05);
  stroke: rgb(var(--white-rgb) / 0.25);
  mix-blend-mode: overlay;
}
.siatka__kwadraty { overflow: visible; }

/* Karta z poświatą za kursorem (port GlowCard). js/efekty.js ustawia --x/--y/--xp/--yp. */
.glow-karta {
  --base: 220;
  --spread: 200;
  --radius: 16;
  --border: 2;
  --backdrop: var(--bg-elevated);
  --backup-border: var(--line);
  --size: 200;
  --outer: 1;
  --border-size: calc(var(--border, 2) * 1px);
  --spotlight-size: calc(var(--size, 150) * 1px);
  --hue: calc(var(--base) + (var(--xp, 0) * var(--spread, 0)));
  position: relative;
  border: var(--border-size) solid var(--backup-border);
  border-radius: 1rem;
  background-color: var(--backdrop, transparent);
  background-image: radial-gradient(var(--spotlight-size) var(--spotlight-size) at calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px), hsl(var(--hue, 210) calc(var(--saturation, 100) * 1%) calc(var(--lightness, 70) * 1%) / var(--bg-spot-opacity, 0.1)), transparent);
  background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
  background-position: 50% 50%;
  background-attachment: fixed;
  color: var(--fg);
  box-shadow: 0 1rem 2rem -1rem black;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
[data-glow]::before,
[data-glow]::after {
  pointer-events: none;
  content: "";
  position: absolute;
  inset: calc(var(--border-size) * -1);
  border: var(--border-size) solid transparent;
  border-radius: calc(var(--radius) * 1px);
  background-attachment: fixed;
  background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
  background-repeat: no-repeat;
  background-position: 50% 50%;
  mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
  mask-clip: padding-box, border-box;
  mask-composite: intersect;
}
[data-glow]::before {
  background-image: radial-gradient(calc(var(--spotlight-size) * 0.75) calc(var(--spotlight-size) * 0.75) at calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px), hsl(var(--hue, 210) calc(var(--saturation, 100) * 1%) calc(var(--lightness, 50) * 1%) / var(--border-spot-opacity, 1)), transparent 100%);
  filter: brightness(2);
}
[data-glow]::after {
  background-image: radial-gradient(calc(var(--spotlight-size) * 0.5) calc(var(--spotlight-size) * 0.5) at calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px), hsl(0 100% 100% / var(--border-light-opacity, 1)), transparent 100%);
}
[data-glow] [data-glow] {
  position: absolute;
  inset: 0;
  will-change: filter;
  opacity: var(--outer, 1);
  border-radius: calc(var(--radius) * 1px);
  border-width: calc(var(--border-size) * 20);
  filter: blur(calc(var(--border-size) * 10));
  background: none;
  pointer-events: none;
  border: none;
}
[data-glow] > [data-glow]::before {
  inset: -10px;
  border-width: 10px;
}


/* ==========================================================================
   6. IKONY (SVG z partials/ikony.php)
   ========================================================================== */
.ikona--3 { width: 0.75rem; height: 0.75rem; }
.ikona--3-5 { width: 0.875rem; height: 0.875rem; }
.ikona--4 { width: 1rem; height: 1rem; }
.ikona--5 { width: 1.25rem; height: 1.25rem; }
.ikona--6 { width: 1.5rem; height: 1.5rem; }
.ikona--7 { width: 1.75rem; height: 1.75rem; }
.ikona--8 { width: 2rem; height: 2rem; }


/* ==========================================================================
   7. PRZYCISKI
   .btn + wariant (--primary / --secondary / --white) + rozmiar (--sm/--md/--lg/--xl)
   ========================================================================== */
.btn {
  --btn-shadow: 0 0 #0000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-radius: 9999px;
  font-weight: 500;
  box-shadow: var(--btn-shadow);
  transition-property: background, box-shadow, transform;
  transition-timing-function: var(--ease-std);
  transition-duration: 0.2s;
  -webkit-user-select: none;
  user-select: none;
}
.btn:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgb(var(--brand-rgb) / 0.5), var(--btn-shadow);
}
.btn:disabled { pointer-events: none; opacity: 0.5; }

.btn--primary {
  --btn-shadow: 0 10px 30px -10px rgb(var(--brand-rgb) / 0.6);
  background-color: var(--brand);
  font-weight: 600;
  color: var(--white);
}
.btn--primary:hover {
  --btn-shadow: 0 12px 36px -8px rgb(var(--brand-rgb) / 0.8);
  background-color: var(--brand-hover);
}

.btn--secondary {
  border: 1px solid var(--line);
  background-color: rgb(var(--white-rgb) / 0.07);
  color: var(--fg);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.btn--secondary:hover {
  border-color: var(--line-strong);
  background-color: rgb(var(--white-rgb) / 0.11);
}

.btn--white {
  --btn-shadow: 0 8px 24px -10px rgb(var(--white-rgb) / 0.25);
  background-color: var(--white);
  color: var(--black);
}
.btn--white:hover {
  --btn-shadow: 0 12px 32px -8px rgb(var(--white-rgb) / 0.4);
  background-color: rgb(var(--white-rgb) / 0.9);
}

.btn--ghost { color: var(--fg-muted); }
.btn--ghost:hover { color: var(--fg); }

.btn--sm { min-height: 2.5rem; padding-left: 1rem; padding-right: 1rem; font-size: 0.875rem; line-height: 1.25rem; }
.btn--md { height: 2.75rem; padding-left: 1.25rem; padding-right: 1.25rem; font-size: 0.875rem; line-height: 1.25rem; }
.btn--lg { height: 3rem; padding-left: 1.5rem; padding-right: 1.5rem; font-size: 15px; }
.btn--xl { height: 3.5rem; padding-left: 2rem; padding-right: 2rem; font-size: 1rem; line-height: 1.5rem; }
.btn--pelny { width: 100%; }
@media (min-width: 768px) {
  .btn--lg.btn--rosnie { font-size: 1rem; line-height: 1.5rem; }
}


/* ==========================================================================
   8. NAWIGACJA (partials/header.php)
   Stan „przewinięta" = klasa .is-przewinieta (js/main.js).
   ========================================================================== */
.nav {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 50;
}
.nav__wrap { padding-top: 1rem; }

.nav__pasek {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  height: 4rem;
  max-width: 72rem;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background-color: rgb(var(--bg-rgb) / 0.5);
  padding-left: 1rem;
  padding-right: 1rem;
  -webkit-backdrop-filter: blur(12px) brightness(1.1) saturate(1.5);
  backdrop-filter: blur(12px) brightness(1.1) saturate(1.5);
  transition-property: max-width, height, background-color, box-shadow, -webkit-backdrop-filter, backdrop-filter;
  transition-duration: 0.7s;
  transition-timing-function: var(--ease-ios);
}
.nav.is-przewinieta .nav__pasek {
  height: 3.5rem;
  max-width: 56rem;
  background-color: rgb(var(--bg-rgb) / 0.8);
  -webkit-backdrop-filter: blur(24px) brightness(1.1) saturate(1.5);
  backdrop-filter: blur(24px) brightness(1.1) saturate(1.5);
}

.nav__logo {
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fg);
}

.nav__menu {
  display: none;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--fg-muted);
}
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  transition: color 0.15s var(--ease-std);
}
.nav__link:hover { color: var(--fg); }

/* Rozwijane „Usługi" (hover + klawiatura) */
.nav__uslugi { position: relative; }
.nav__dropdown {
  visibility: hidden;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 0);
  padding-top: 0.5rem;
  opacity: 0;
  transition: opacity 0.15s var(--ease-std);
}
.nav__uslugi:hover .nav__dropdown,
.nav__uslugi:focus-within .nav__dropdown {
  visibility: visible;
  opacity: 1;
}
.nav__dropdown-panel {
  width: 18rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background-color: rgb(var(--bg-elevated-rgb) / 0.95);
  padding: 0.5rem;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
.nav__usluga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--fg-muted);
  transition: color 0.15s var(--ease-std), background-color 0.15s var(--ease-std);
}
.nav__usluga:hover {
  background-color: rgb(var(--white-rgb) / 0.08);
  color: var(--fg);
}
.nav__usluga-nazwa { display: flex; align-items: center; gap: 0.625rem; }
.nav__usluga-ikona {
  display: grid;
  width: 1.5rem;
  height: 1.5rem;
  place-items: center;
  border-radius: 0.375rem;
  background-color: rgb(var(--brand-rgb) / 0.1);
  color: var(--brand);
}

.odznaka-wkrotce {
  border: 1px solid rgb(var(--brand-rgb) / 0.3);
  border-radius: 9999px;
  background-color: rgb(var(--brand-rgb) / 0.1);
  padding: 0.125rem 0.5rem;
  font-size: 11px;
  font-weight: 500;
  color: var(--brand);
}

.nav__cta { display: none; }

/* Hamburger → X */
.nav__burger {
  position: relative;
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background-color: rgb(var(--white-rgb) / 0.06);
  color: var(--fg);
  transition: background-color 0.15s var(--ease-std);
}
.nav__burger:hover { background-color: rgb(var(--white-rgb) / 0.1); }
.nav__kreska {
  position: absolute;
  display: block;
  height: 2px;
  width: 1.25rem;
  border-radius: 9999px;
  background-color: currentColor;
  transition: all 0.3s var(--ease-std);
}
.nav__kreska--gora { transform: translate(0, -5px); }
.nav__kreska--srodek { opacity: 1; }
.nav__kreska--dol { transform: translate(0, 5px); }
.nav__burger[aria-expanded="true"] .nav__kreska--gora { transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] .nav__kreska--srodek { transform: scaleX(0); opacity: 0; }
.nav__burger[aria-expanded="true"] .nav__kreska--dol { transform: rotate(-45deg); }

@media (min-width: 1024px) {
  .nav__menu { display: flex; }
  .nav__cta { display: block; }
  .nav__burger { display: none; }
}

/* Menu mobilne: przyciemnienie + wysuwany panel. Stan = body.menu-otwarte */
.menu-tlo {
  position: fixed;
  inset: 0;
  z-index: 40;
  background-color: rgb(var(--bg-rgb) / 0.7);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease-std);
}
.menu-otwarte .menu-tlo { pointer-events: auto; opacity: 1; }

.menu-panel {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 50;
  height: 100%;
  width: 85%;
  max-width: 24rem;
  border-left: 1px solid var(--line);
  background-color: rgb(var(--bg-rgb) / 0.9);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  transform: translate(100%, 0);
  transition: transform 0.3s var(--ease-out);
}
.menu-otwarte .menu-panel { transform: translate(0, 0); }

@media (min-width: 1024px) {
  .menu-tlo,
  .menu-panel { display: none; }
}

.menu-panel__poswiata {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: radial-gradient(600px circle at 100% 0%, rgb(var(--brand-rgb) / 0.12), transparent 60%);
}
.menu-panel__wnetrze {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
}
.menu-panel__gora {
  display: flex;
  height: 5rem;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding: 0 1.25rem 0.5rem;
}
.menu-panel__marka {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fg);
}
.menu-panel__zamknij {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background-color: rgb(var(--white-rgb) / 0.06);
  transition: background-color 0.15s var(--ease-std);
}
.menu-panel__zamknij:hover { background-color: rgb(var(--white-rgb) / 0.1); }

.menu-panel__lista {
  flex: 1 1 0%;
  overflow-y: auto;
  padding: 1.75rem 1.25rem;
}

.menu-panel__uslugi-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.75rem;
  padding: 1rem;
  font-size: 17px;
  font-weight: 500;
  color: rgb(var(--fg-rgb) / 0.9);
  transition: color 0.15s var(--ease-std), background-color 0.15s var(--ease-std);
}
.menu-panel__uslugi-btn:hover { background-color: rgb(var(--white-rgb) / 0.06); }
.menu-panel__uslugi-btn[aria-expanded="true"] {
  background-color: rgb(var(--white-rgb) / 0.08);
  color: var(--fg);
}
.menu-panel__chevron {
  color: var(--fg-muted);
  transition: transform 0.3s var(--ease-std);
}
.menu-panel__uslugi-btn[aria-expanded="true"] .menu-panel__chevron {
  transform: rotate(180deg);
  color: var(--brand);
}

.menu-panel__zwijane {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease-out);
}
.menu-panel__zwijane.is-otwarte { grid-template-rows: 1fr; }
.menu-panel__zwijane-wnetrze { overflow: hidden; }
.menu-panel__uslugi {
  margin-top: 0.75rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 0.5rem;
}
.menu-panel__usluga {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-left: 2px solid rgb(var(--brand-rgb) / 0.25);
  border-radius: 0.5rem;
  padding: 0.875rem 0.75rem 0.875rem 1.25rem;
  transition: all 0.15s var(--ease-std);
}
.menu-panel__usluga:hover {
  border-color: var(--brand);
  background-image: linear-gradient(to right, rgb(var(--brand-rgb) / 0.1), transparent);
}
.menu-panel__zwijane.is-otwarte .menu-panel__usluga { animation: slide-in-left 0.4s var(--ease-out-soft) both; }
.menu-panel__zwijane.is-otwarte .menu-panel__usluga:nth-child(2) { animation-delay: 50ms; }
.menu-panel__zwijane.is-otwarte .menu-panel__usluga:nth-child(3) { animation-delay: 100ms; }
.menu-panel__zwijane.is-otwarte .menu-panel__usluga:nth-child(4) { animation-delay: 150ms; }
.menu-panel__zwijane.is-otwarte .menu-panel__usluga:nth-child(5) { animation-delay: 200ms; }
.menu-panel__zwijane.is-otwarte .menu-panel__usluga:nth-child(6) { animation-delay: 250ms; }
.menu-panel__usluga-ikona {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: rgb(var(--brand-rgb) / 0.1);
  color: var(--brand);
  transition: background-color 0.15s var(--ease-std), box-shadow 0.15s var(--ease-std);
}
.menu-panel__usluga:hover .menu-panel__usluga-ikona {
  background-color: rgb(var(--brand-rgb) / 0.2);
  box-shadow: 0 0 20px -4px rgb(var(--brand-rgb) / 0.6);
}
.menu-panel__usluga-nazwa {
  flex: 1 1 0%;
  font-size: 15px;
  color: var(--fg);
}

.menu-panel__kreska {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  height: 1px;
  background-color: var(--line);
}
.menu-panel__linki {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.menu-panel__link {
  border-radius: 0.75rem;
  padding: 0.875rem 1rem;
  font-size: 17px;
  color: var(--fg);
  transition: background-color 0.15s var(--ease-std);
}
.menu-panel__link:hover { background-color: rgb(var(--white-rgb) / 0.08); }

.menu-panel__dol {
  border-top: 1px solid var(--line);
  padding: 1.25rem 1.25rem 2rem;
}


/* ==========================================================================
   9. STOPKA (partials/footer.php)
   ========================================================================== */
.stopka { border-top: 1px solid var(--line); }
.stopka__wnetrze { padding-top: 3rem; padding-bottom: 2rem; }
.stopka__siatka { display: grid; gap: 2.5rem; }
.stopka__nazwa {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fg);
}
.stopka__opis {
  margin-top: 0.5rem;
  max-width: 20rem;
  font-size: 13px;
  line-height: 1.625;
  color: var(--fg-subtle);
}
.stopka__naglowek {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-subtle);
}
.stopka__mail {
  margin-top: 0.75rem;
  display: inline-block;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--fg-muted);
  transition: color 0.15s var(--ease-std);
}
.stopka__mail:hover { color: var(--fg); }
.stopka__lista { margin-top: 0.75rem; }
.stopka__lista > li + li { margin-top: 0.625rem; }
.stopka__lista a {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--fg-muted);
  transition: color 0.15s var(--ease-std);
}
.stopka__lista a:hover { color: var(--fg); }
.stopka__dol {
  margin-top: 2.5rem;
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
}
.stopka__copy { font-size: 13px; color: var(--fg-subtle); }

@media (min-width: 768px) {
  .stopka__wnetrze { padding-top: 3.5rem; }
  .stopka__siatka { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; }
  .stopka__marka { grid-column: span 6 / span 6; }
  .stopka__kontakt { grid-column: 7 / span 3; }
  .stopka__linki { grid-column: 10 / span 3; }
  .stopka__dol { margin-top: 3rem; }
}


/* ==========================================================================
   10. UKŁAD STRON KONWERSJI (/umow, /dziekuje, /k/…) — partials/focus-*.php
   ========================================================================== */
.focus-naglowek {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--line);
  background-color: rgb(var(--bg-rgb) / 0.8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.focus-naglowek__wnetrze {
  display: flex;
  height: 4rem;
  align-items: center;
  justify-content: space-between;
}
.focus-naglowek__logo {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fg);
}
.focus-naglowek__wroc {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--fg-muted);
  transition: color 0.15s var(--ease-std);
}
.focus-naglowek__wroc:hover { color: var(--fg); }

.focus-stopka { border-top: 1px solid var(--line); }
.focus-stopka__wnetrze {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  font-size: 13px;
  color: var(--fg-subtle);
}
.focus-stopka__wnetrze a { transition: color 0.15s var(--ease-std); }
.focus-stopka__wnetrze a:hover { color: var(--fg); }


/* ==========================================================================
   11. PRZYCISK „NA GÓRĘ" (pierścień postępu przewijania)
   ========================================================================== */
.na-gore {
  position: fixed;
  left: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 30;
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9999px;
  background-color: rgb(var(--bg-rgb) / 0.7);
  color: var(--fg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  pointer-events: none;
  opacity: 0;
  transform: translate(0, 0.75rem);
  transition: all 0.3s var(--ease-out);
}
.na-gore.is-widoczny {
  pointer-events: auto;
  opacity: 1;
  transform: translate(0, 0);
}
.na-gore:hover {
  border-color: rgb(var(--brand-rgb) / 0.5);
  background-color: rgb(var(--bg-rgb) / 0.9);
}
.na-gore:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgb(var(--brand-rgb) / 0.6);
}
.na-gore__pierscien {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.na-gore__tor { stroke: var(--line); }
.na-gore__postep {
  stroke: var(--brand);
  stroke-dasharray: 125.664;
  stroke-dashoffset: 125.664;
}
.na-gore__strzalka {
  position: relative;
  transition: transform 0.15s var(--ease-std);
}
.na-gore:hover .na-gore__strzalka { transform: translate(0, -0.125rem); }

@media (min-width: 768px) {
  .na-gore { left: 1.5rem; }
}


/* ==========================================================================
   12. POŚWIATA POD KURSOREM (canvas tworzony w js/main.js; od 768 px)
   ========================================================================== */
.poswiata-kursora {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 1;
  display: none;
}
@media (min-width: 768px) {
  .poswiata-kursora { display: block; }
}


/* ==========================================================================
   13. ANIMACJE
   ========================================================================== */
@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes sheetUp {
  0% { transform: translateY(100%); }
  100% { transform: translateY(0); }
}
@keyframes backdropIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}


@keyframes pulse {
  50% { opacity: 0.5; }
}
@keyframes ping {
  75%, 100% { opacity: 0; transform: scale(2); }
}
@keyframes bounce {
  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}


/* ==========================================================================
   14. STRONA GŁÓWNA — HERO (partials/sekcje/hero.php)
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  margin-top: -6rem;
  overflow: hidden;
  padding-top: 6rem;
}
/* Tło z cząsteczek (canvas, js/efekty.js) wygaszane ku krawędziom */
.hero__tlo {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 45%, black 40%, transparent 85%);
  mask-image: radial-gradient(ellipse 90% 80% at 50% 45%, black 40%, transparent 85%);
}
.hero__canvas { display: block; width: 100%; height: 100%; }
.hero__wnetrze {
  position: relative;
  z-index: 10;
  padding-top: 4rem;
  padding-bottom: 6rem;
}
.hero__srodek {
  margin-left: auto;
  margin-right: auto;
  max-width: 56rem;
  text-align: center;
}
.hero__odznaka {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 9999px;
  background-color: rgb(var(--white-rgb) / 0.06);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  color: var(--fg-muted);
  animation: fadeUp 0.6s ease-out both;
}
.hero__kropka { position: relative; display: flex; width: 0.375rem; height: 0.375rem; }
.hero__kropka-puls {
  position: absolute;
  display: inline-flex;
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  background-color: var(--brand);
  opacity: 0.75;
  animation: ping 1s var(--ease-out) infinite;
}
.hero__kropka-srodek {
  position: relative;
  display: inline-flex;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background-color: var(--brand);
}
.hero__tytul {
  margin-top: 1.25rem;
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--fg);
  animation: fadeUp 0.6s ease-out 0.1s both;
}
.hero__tytul-akcent { display: block; }
.hero__lead {
  margin-top: 1.5rem;
  font-size: 1rem;
  line-height: 1.625;
  color: var(--fg-muted);
  animation: fadeUp 0.6s ease-out 0.28s both;
}
.hero__cta {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  animation: fadeUp 0.6s ease-out 0.4s both;
}
.hero__btn { width: 100%; }
.hero__mikro {
  margin-top: 1.25rem;
  font-size: 13px;
  color: var(--fg-subtle);
  animation: fadeUp 0.6s ease-out 0.52s both;
}

@media (min-width: 640px) {
  .hero__tytul { font-size: 3rem; line-height: 1; }
  .hero__cta { flex-direction: row; }
  .hero__btn { width: auto; }
}
@media (min-width: 768px) {
  .hero__wnetrze { padding-top: 3rem; padding-bottom: 8rem; }
  .hero__tytul { margin-top: 1.5rem; font-size: 3.75rem; line-height: 1.06; }
  .hero__lead { margin-top: 1.75rem; font-size: 1.125rem; line-height: 1.75rem; }
  .hero__cta { margin-top: 2.5rem; }
  .hero__mikro { margin-top: 1.5rem; }
}
@media (min-width: 1024px) {
  .hero__tytul { font-size: 4.5rem; line-height: 1; }
}


/* ==========================================================================
   15. STRONA GŁÓWNA — PROBLEM (partials/sekcje/problem.php)
   ========================================================================== */
.problem {
  position: relative;
  overflow: hidden;
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.problem__poswiata {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 78%;
  width: 520px;
  height: 520px;
  transform: translate(-50%, 0);
  border-radius: 9999px;
  background: radial-gradient(circle, rgb(var(--brand-rgb) / 0.1) 0%, rgb(var(--brand-rgb) / 0.03) 40%, transparent 70%);
  filter: blur(8px);
}
.problem__wnetrze { position: relative; }
.problem__naglowek { margin-left: auto; margin-right: auto; max-width: 48rem; text-align: center; }
.problem__lista { margin: 3rem auto 0; max-width: 48rem; }
.problem__punkt {
  position: relative;
  border-bottom: 1px solid var(--line);
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}
/* Pierwszy punkt ma mniejszy odstęp od góry na KAŻDEJ szerokości (jak w React:
   first:pt-7 wygrywał specyficznością z md:py-8) */
.problem__punkt:first-child { border-top: 1px solid var(--line); padding-top: 1.75rem; }
.problem__punkt:last-child { border-bottom-width: 0; }
/* Cyfra-duch za treścią — ta sama plastyka co w krokach podstron usług */
.problem__cyfra-tlo {
  pointer-events: none;
  position: absolute;
  left: -0.5rem;
  top: 50%;
  transform: translate(0, -50%);
  -webkit-user-select: none;
  user-select: none;
  font-family: var(--font-mono);
  font-size: 6rem;
  font-weight: 600;
  line-height: 1;
  color: rgb(var(--white-rgb) / 0.03);
}
.problem__wiersz {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}
.problem__cyfra {
  flex-shrink: 0;
  padding-top: 0.25rem;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--brand-fg);
}
.problem__cytat {
  font-size: 1rem;
  font-style: italic;
  line-height: 1.625;
  color: rgb(var(--fg-rgb) / 0.9);
}
.problem__reframe { position: relative; margin: 4rem auto 0; max-width: 48rem; }
.problem__linia {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background-image: linear-gradient(to right, transparent, rgb(var(--brand-rgb) / 0.5), transparent);
}
.problem__reframe-wnetrze { padding: 3rem 0.5rem 0; text-align: center; }
.problem__teza {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--fg);
}
.problem__tekst {
  margin: 1.5rem auto 0;
  max-width: 42rem;
  font-size: 15px;
  line-height: 1.625;
  color: var(--fg-muted);
}
.problem__dalej {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-style: italic;
  color: var(--fg-subtle);
}

@media (min-width: 768px) {
  .problem { padding-top: 7rem; padding-bottom: 7rem; }
  .problem__lista { margin-top: 4rem; }
  .problem__punkt { padding-top: 2rem; padding-bottom: 2rem; }
  .problem__wiersz { gap: 1.75rem; }
  .problem__cytat { font-size: 1.125rem; line-height: 1.75rem; }
  .problem__reframe { margin-top: 5rem; }
  .problem__reframe-wnetrze { padding: 3.5rem 1.5rem 0; }
  .problem__teza { font-size: 1.875rem; line-height: 2.25rem; }
  .problem__tekst { font-size: 1rem; line-height: 1.5rem; }
  .problem__dalej { margin-top: 2.5rem; }
}
@media (min-width: 1024px) {
  .problem__teza { font-size: 2.25rem; line-height: 1.15; }
}


/* ==========================================================================
   16. STRONA GŁÓWNA — USŁUGI (partials/sekcje/uslugi.php)
   ========================================================================== */
.uslugi {
  position: relative;
  overflow: hidden;
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.uslugi__wnetrze { position: relative; }
.uslugi__siatka {
  margin-top: 3rem;
  display: grid;
  gap: 1.25rem;
}
.uslugi__karta {
  display: flex;
  height: 100%;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.75rem;
}
.uslugi__karta-gora {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.uslugi__ikona {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-content: center;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background-color: rgb(var(--white-rgb) / 0.07);
  color: var(--brand);
}
.uslugi__odznaka {
  border: 1px solid rgb(var(--brand-rgb) / 0.3);
  border-radius: 9999px;
  background-color: rgb(var(--brand-rgb) / 0.1);
  padding: 0.125rem 0.625rem;
  font-size: 11px;
  font-weight: 500;
  color: var(--brand-fg);
}
.uslugi__tytul {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.375;
  letter-spacing: -0.025em;
  color: var(--fg);
}
.uslugi__efekt {
  font-size: 15px;
  line-height: 1.625;
  color: var(--fg);
}
.uslugi__dol {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.uslugi__dopisek {
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--fg-muted);
}
.uslugi__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--fg-muted);
  transition: color 0.15s var(--ease-std);
}
.uslugi__link:hover { color: var(--brand); }
.uslugi__strzalka { transition: transform 0.15s var(--ease-std); }
.uslugi__link:hover .uslugi__strzalka { transform: translate(0.125rem, 0); }

.uslugi__dodatkowo {
  position: relative;
  margin: 3rem auto 0;
  max-width: 48rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background-color: var(--bg-elevated);
  padding: 1.5rem;
}
.uslugi__glob {
  position: relative;
  margin-bottom: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--brand);
}
.uslugi__dodatkowo-tekst {
  position: relative;
  font-size: 15px;
  line-height: 1.625;
  color: var(--fg-muted);
}
.uslugi__dodatkowo-pytanie { font-weight: 600; }

@media (min-width: 768px) {
  .uslugi { padding-top: 7rem; padding-bottom: 7rem; }
  .uslugi__siatka { margin-top: 4rem; }
  .uslugi__tytul { font-size: 1.25rem; line-height: 1.75rem; }
  .uslugi__efekt { font-size: 1rem; line-height: 1.5rem; }
  .uslugi__dodatkowo { margin-top: 4rem; padding: 2rem; }
  .uslugi__dodatkowo-tekst { font-size: 1rem; line-height: 1.5rem; }
}
@media (min-width: 1024px) {
  .uslugi__siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ==========================================================================
   17. STRONA GŁÓWNA — DLACZEGO (partials/sekcje/dlaczego.php)
   ========================================================================== */
.dlaczego {
  position: relative;
  overflow: hidden;
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.dlaczego__poswiata {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 12%;
  width: 480px;
  height: 480px;
  transform: translate(-50%, 0);
  border-radius: 9999px;
  background: radial-gradient(circle, rgb(var(--brand-rgb) / 0.08) 0%, rgb(var(--brand-rgb) / 0.02) 45%, transparent 70%);
  filter: blur(10px);
}
.dlaczego__wnetrze { position: relative; }
.dlaczego__siatka {
  margin-top: 3rem;
  display: grid;
  gap: 1.25rem;
}
.dlaczego__karta {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background-color: var(--surface);
  padding: 1.75rem;
  transition: color 0.15s var(--ease-std), background-color 0.15s var(--ease-std), border-color 0.15s var(--ease-std);
}
.dlaczego__karta:hover { border-color: var(--line-strong); background-color: var(--surface-hover); }
.dlaczego__karta--wyroznienie {
  border-color: rgb(var(--brand-rgb) / 0.35);
  background-color: rgb(var(--brand-rgb) / 0.08);
}
.dlaczego__karta--wyroznienie:hover {
  border-color: rgb(var(--brand-rgb) / 0.5);
  background-color: rgb(var(--brand-rgb) / 0.12);
}
.dlaczego__uklad { display: flex; flex-direction: column; gap: 1rem; }
.dlaczego__ikona {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  place-content: center;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background-color: rgb(var(--white-rgb) / 0.07);
  color: var(--brand);
  transition: color 0.15s var(--ease-std), background-color 0.15s var(--ease-std), border-color 0.15s var(--ease-std);
}
.dlaczego__karta:not(.dlaczego__karta--wyroznienie):hover .dlaczego__ikona { border-color: var(--line-strong); }
.dlaczego__karta--wyroznienie .dlaczego__ikona {
  border-color: rgb(var(--brand-rgb) / 0.3);
  background-color: rgb(var(--brand-rgb) / 0.12);
}
.dlaczego__tresc { flex: 1 1 0%; }
.dlaczego__tresc > * + * { margin-top: 0.625rem; }
.dlaczego__warunki {
  margin-top: 2rem;
  text-align: center;
  font-size: 13px;
  color: var(--fg-subtle);
}
.dlaczego__cytat { position: relative; margin: 3rem auto 0; max-width: 48rem; }
.dlaczego__cytat-blok { padding-top: 2.5rem; text-align: center; }
.dlaczego__cytat-tekst {
  font-size: 1rem;
  font-style: italic;
  line-height: 1.625;
  color: var(--fg-muted);
}

@media (min-width: 768px) {
  .dlaczego { padding-top: 7rem; padding-bottom: 7rem; }
  .dlaczego__siatka { margin-top: 4rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dlaczego__uklad { flex-direction: row; align-items: flex-start; gap: 1.25rem; }
  .dlaczego__warunki { margin-top: 2.5rem; }
  .dlaczego__cytat { margin-top: 4rem; }
  .dlaczego__cytat-tekst { font-size: 1.125rem; line-height: 1.75rem; }
}


/* ==========================================================================
   18. STRONA GŁÓWNA — DLA KOGO (partials/sekcje/dla-kogo.php)
   ========================================================================== */
.dla-kogo {
  position: relative;
  overflow: hidden;
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.dla-kogo__poswiata {
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 18rem;
  background-image: radial-gradient(ellipse 60% 40% at 50% 0%, rgb(var(--brand-rgb) / 0.18), transparent 70%);
  opacity: 0.6;
}
.dla-kogo__wnetrze { position: relative; }
.dla-kogo__kolumny {
  position: relative;
  margin: 3rem auto 0;
  display: grid;
  max-width: 64rem;
  gap: 3rem;
}
.dla-kogo__separator {
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  display: none;
  width: 1px;
  transform: translate(-50%, 0);
  background-image: linear-gradient(to bottom, transparent, var(--line), transparent);
}
.dla-kogo__glowa {
  margin-bottom: 1.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.dla-kogo__znak {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  border-radius: 9999px;
}
.dla-kogo__znak--tak { border-color: rgb(var(--tak-rgb) / 0.25); background-color: rgb(var(--tak-rgb) / 0.08); color: var(--tak-fg); }
.dla-kogo__znak--nie { border-color: rgb(var(--nie-rgb) / 0.25); background-color: rgb(var(--nie-rgb) / 0.08); color: var(--nie-fg); }
.dla-kogo__tytul {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.375;
  letter-spacing: -0.025em;
  color: var(--fg);
}
.dla-kogo__lista > li + li { border-top: 1px solid var(--line); }
.dla-kogo__punkt {
  display: flex;
  gap: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.dla-kogo__punkt:first-child { padding-top: 0; }
.dla-kogo__punkt:last-child { padding-bottom: 0; }
.dla-kogo__ikona { margin-top: 0.125rem; flex-shrink: 0; }
.dla-kogo__ikona--tak { color: var(--tak-fg); }
.dla-kogo__ikona--nie { color: var(--nie-fg); }
.dla-kogo__tekst {
  font-size: 15px;
  line-height: 1.625;
  color: rgb(var(--fg-rgb) / 0.9);
}
.dla-kogo__cta { margin: 3rem auto 0; max-width: 42rem; text-align: center; }
.dla-kogo__cta-tekst {
  font-size: 1rem;
  line-height: 1.625;
  color: var(--fg-muted);
}
.dla-kogo__cta-przycisk { margin-top: 1.5rem; display: flex; justify-content: center; }

@media (min-width: 768px) {
  .dla-kogo { padding-top: 7rem; padding-bottom: 7rem; }
  .dla-kogo__kolumny { margin-top: 4rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; }
  .dla-kogo__separator { display: block; }
  .dla-kogo__tytul { font-size: 1.25rem; line-height: 1.75rem; }
  .dla-kogo__tekst { font-size: 1rem; line-height: 1.5rem; }
  .dla-kogo__cta { margin-top: 4rem; }
  .dla-kogo__cta-tekst { font-size: 1.125rem; line-height: 1.75rem; }
}


/* ==========================================================================
   19. STRONA GŁÓWNA — REALIZACJE (partials/sekcje/realizacje.php)
   ========================================================================== */
.realizacje {
  position: relative;
  overflow: hidden;
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.realizacje__wnetrze { position: relative; }

.case { margin-left: auto; margin-right: auto; max-width: 56rem; }
.case--pierwszy { margin-top: 3.5rem; }
.case__glowa {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 1.5rem;
  row-gap: 0.5rem;
}
.case__nazwa { display: flex; align-items: baseline; gap: 1.25rem; }
.case__nr {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--brand-fg);
}
.case__meta { font-weight: 400; color: var(--fg-subtle); }
.case__opis {
  margin-top: 1rem;
  max-width: 42rem;
  font-size: 15px;
  line-height: 1.625;
  color: var(--fg-muted);
}

/* Kafelki liczb: kolumna → 2 kolumny (640) → 4 kolumny z pionowymi kreskami (1024) */
.case__staty {
  margin-top: 2rem;
  display: grid;
  border-top: 1px solid var(--line);
}
.stat {
  border-bottom: 1px solid var(--line);
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.stat:last-child { border-bottom-width: 0; }
.stat__wartosc {
  white-space: nowrap;
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fg);
}
.stat__etykieta {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.375;
  color: var(--fg);
}
.stat__kontekst {
  margin-top: 0.375rem;
  font-size: 13px;
  line-height: 1.375;
  color: var(--fg-subtle);
}

.case__tekst {
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--fg-muted);
}
.case__tekst--kreska {
  margin-top: 1.5rem;
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
}
.case__tekst--drugi { margin-top: 1rem; }
.case__pogrubione { font-weight: 600; }
.case__galerie {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  column-gap: 2rem;
  row-gap: 0.75rem;
}

.case__opinia {
  margin-top: 2.5rem;
  display: grid;
  align-items: start;
  gap: 2rem;
}
.case__cytat { max-width: 36rem; }
.case__cytat-tekst {
  font-size: 1rem;
  font-style: italic;
  line-height: 1.625;
  color: rgb(var(--fg-rgb) / 0.9);
}
.case__podpis { margin-top: 1rem; font-size: 0.875rem; line-height: 1.25rem; }
.case__podpis-rola { color: var(--fg-subtle); }
.case__zrzut--prawo { justify-self: start; }
.case__zrzut--pod { margin-top: 1.5rem; }
.case__zrzut-img {
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  transition: transform 0.3s var(--ease-std);
}
.case__zrzut-img--piotr { width: 15rem; }
.case__zrzut-img--maciek { width: 14rem; }
.case__zrzut-podpis { margin-top: 0.5rem; font-size: 13px; color: var(--fg-subtle); }

.realizacje__separator {
  margin: 3.5rem auto;
  display: block;
  height: 1px;
  max-width: 56rem;
  background-image: linear-gradient(to right, transparent, rgb(var(--white-rgb) / 0.1), transparent);
}

.case__sprint {
  margin-top: 2rem;
  display: grid;
  align-items: start;
  gap: 2.5rem;
  border-top: 1px solid var(--line);
  padding-top: 2rem;
}
.case__wielka-liczba {
  font-size: 3.75rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fg);
}
.case__wielka-etykieta {
  margin-top: 0.75rem;
  font-size: 1rem;
  line-height: 1.375;
  color: var(--fg);
}
.case__drobny {
  margin-top: 0.5rem;
  font-size: 13px;
  line-height: 1.375;
  color: var(--fg-subtle);
}
.case__drobny--kolejny { margin-top: 0.375rem; }
.case__galeria-btn { margin-top: 1rem; }

.realizacje__stopka {
  margin: 4rem auto 0;
  display: flex;
  max-width: 56rem;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 2rem;
  row-gap: 0.75rem;
  border-top: 1px solid var(--line);
  padding-top: 1.75rem;
}
.realizacje__stopka-tekst {
  font-size: 15px;
  line-height: 1.625;
  color: var(--fg-muted);
}
.realizacje__portfolio {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--brand-fg);
  transition: color 0.15s var(--ease-std);
}
.realizacje__portfolio:hover { color: var(--brand); }
.realizacje__strzalka { transition: transform 0.15s var(--ease-std); }
.realizacje__portfolio:hover .realizacje__strzalka { transform: translate(0.125rem, 0); }

@media (min-width: 640px) {
  .case__staty { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; row-gap: 0.5rem; }
  .stat { border-bottom-width: 0; padding-top: 1.5rem; padding-bottom: 1.5rem; }
}
@media (min-width: 768px) {
  .realizacje { padding-top: 7rem; padding-bottom: 7rem; }
  .case--pierwszy { margin-top: 5rem; }
  .case__nazwa { gap: 1.75rem; }
  .case__opis { font-size: 1rem; line-height: 1.5rem; }
  .case__opinia { grid-template-columns: 1fr auto; gap: 3rem; }
  .case__cytat-tekst { font-size: 1.125rem; line-height: 1.75rem; }
  .case__zrzut--prawo { justify-self: end; }
  .case__zrzut-img--piotr { width: 18rem; }
  .case__zrzut-img--maciek { width: 16rem; }
  .realizacje__separator { margin-top: 5rem; margin-bottom: 5rem; }
  .case__sprint { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
  .case__wielka-liczba { font-size: 4.5rem; }
  .case__wielka-etykieta { font-size: 1.125rem; line-height: 1.75rem; }
  .realizacje__stopka { margin-top: 5rem; }
  .realizacje__stopka-tekst { font-size: 1rem; line-height: 1.5rem; }
}
@media (min-width: 1024px) {
  .case__staty { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; row-gap: 0; padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .stat { padding: 0 1.5rem; }
  .stat:first-child { padding-left: 0; }
  .stat:last-child { padding-right: 0; }
  .stat + .stat { border-left: 1px solid var(--line); }
  .case__wielka-liczba { font-size: 6rem; }
  .case__zrzut-img--piotr { transform: rotate(-1.5deg); }
  .case__zrzut-img--maciek { transform: rotate(1deg); }
  .case__zrzut-img:hover { transform: none; }
}


/* ==========================================================================
   20. STRONA GŁÓWNA — PROCES (partials/sekcje/proces.php)
   ========================================================================== */
.proces { padding-top: 5rem; padding-bottom: 5rem; }
.proces__kroki {
  margin-top: 3rem;
  display: grid;
  gap: 2.5rem;
}
.proces__znacznik { display: flex; align-items: center; gap: 1rem; }
.proces__nr {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--brand-fg);
}
.proces__linia { height: 1px; flex: 1; background-color: var(--line); }
.proces__linia--koniec {
  background-color: transparent;
  background-image: linear-gradient(to right, var(--line), transparent);
}
.proces__tytul { margin-top: 1.25rem; }
.proces__tekst { margin-top: 0.75rem; }
.proces__meta {
  margin-top: 0.75rem;
  font-size: 13px;
  line-height: 1.375;
  color: var(--fg-subtle);
}
.proces__cta { margin: 3.5rem auto 0; max-width: 42rem; text-align: center; }
.proces__cta-tekst {
  font-size: 1rem;
  line-height: 1.625;
  color: var(--fg-muted);
}
.proces__cta-nr {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--brand-fg);
}
.proces__cta-przycisk { margin-top: 1.5rem; display: flex; justify-content: center; }
.proces__cta-mikro {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--fg-subtle);
}

@media (min-width: 768px) {
  .proces { padding-top: 7rem; padding-bottom: 7rem; }
  .proces__kroki { margin-top: 4rem; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; row-gap: 3rem; }
  .proces__cta { margin-top: 4rem; }
  .proces__cta-tekst { font-size: 1.125rem; line-height: 1.75rem; }
}
@media (min-width: 1024px) {
  .proces__kroki { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
}


/* ==========================================================================
   21. STRONA GŁÓWNA — CENNIK (partials/sekcje/cennik.php; ceny w partials/config.php)
   ========================================================================== */
.cennik {
  position: relative;
  overflow: hidden;
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.cennik__poswiata {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 10%;
  width: 480px;
  height: 480px;
  transform: translate(-50%, 0);
  border-radius: 9999px;
  background: radial-gradient(circle, rgb(var(--brand-rgb) / 0.08) 0%, rgb(var(--brand-rgb) / 0.02) 45%, transparent 70%);
  filter: blur(10px);
}
.cennik__wnetrze { position: relative; }

/* Karta pakietu */
.cennik__pakiet {
  position: relative;
  margin-top: 3rem;
  border: 1px solid rgb(var(--brand-rgb) / 0.35);
  border-radius: 1rem;
  background-color: rgb(var(--brand-rgb) / 0.08);
  padding: 1.75rem;
  transition: background-color 0.15s var(--ease-std), border-color 0.15s var(--ease-std);
}
.cennik__pakiet:hover {
  border-color: rgb(var(--brand-rgb) / 0.5);
  background-color: rgb(var(--brand-rgb) / 0.12);
}
.cennik__tekstura {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 1rem;
}
.cennik__uklad { position: relative; display: grid; gap: 1.75rem; }
.cennik__etykieta {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brand-fg);
}
.cennik__tytul {
  margin-top: 0.75rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fg);
}
.cennik__cena { margin-top: 1.5rem; display: flex; align-items: baseline; column-gap: 0.5rem; }
.cennik__kwota {
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fg);
}
.cennik__okres { font-size: 0.875rem; line-height: 1.25rem; color: var(--fg-subtle); }
.cennik__zakres {
  margin-top: 0.5rem;
  font-size: 13px;
  line-height: 1.375;
  color: var(--fg-muted);
}
.cennik__lista {
  border-top: 1px solid rgb(var(--brand-rgb) / 0.2);
  padding-top: 1.75rem;
}
.cennik__lista > li + li { margin-top: 0.75rem; }
.cennik__punkt {
  display: flex;
  gap: 0.75rem;
  font-size: 15px;
  line-height: 1.625;
  color: var(--fg-muted);
}
.cennik__ptaszek { margin-top: 0.25rem; flex-shrink: 0; color: var(--brand); }
.cennik__warunki {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 13px;
  color: var(--fg-subtle);
}

/* Karty dodatkowe: strona/sklep + Meta Ads (komplet) */
.cennik__dodatki { margin-top: 2.5rem; display: grid; gap: 1.25rem; }
.cennik__dodatek {
  border: 1px solid var(--line);
  border-radius: 1rem;
  background-color: var(--bg-elevated);
  padding: 1.5rem;
}
.cennik__dodatek-tytul {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fg);
}
.cennik__dodatek-ceny {
  margin-top: 0.75rem;
  font-size: 15px;
  line-height: 1.625;
  color: var(--fg);
}
.cennik__mocne { font-weight: 600; }
.cennik__przygaszone { color: var(--fg-subtle); }
.cennik__dodatek-tekst {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--fg-muted);
}
.cennik__dodatek-tekst--nizej { margin-top: 1rem; }
.cennik__case { color: var(--fg); text-underline-offset: 4px; }
.cennik__case:hover { color: var(--brand); text-decoration-line: underline; }
.cennik__meta-glowa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 0.75rem;
  row-gap: 0.5rem;
}
.cennik__komplet {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid var(--line-strong);
  border-radius: 9999px;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  color: var(--fg-muted);
}
.cennik__komplet-kropka {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background-color: var(--fg-subtle);
}
.cennik__meta-kanaly { margin-top: 0.25rem; font-size: 13px; color: var(--fg-subtle); }

.cennik__nota {
  margin: 2.5rem auto 0;
  max-width: 42rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--fg-muted);
}
.cennik__nota--druga { margin-top: 1.5rem; }
.cennik__limit {
  margin: 1.5rem auto 0;
  max-width: 42rem;
  border: 1px solid rgb(var(--brand-rgb) / 0.2);
  border-radius: 0.75rem;
  background-color: rgb(var(--brand-rgb) / 0.06);
  padding: 1rem 1.25rem;
  text-align: center;
}
.cennik__limit-tekst {
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--fg-muted);
}

@media (min-width: 768px) {
  .cennik { padding-top: 7rem; padding-bottom: 7rem; }
  .cennik__pakiet { margin-top: 4rem; padding: 2.5rem; }
  .cennik__uklad { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr auto; column-gap: 2.5rem; row-gap: 2rem; }
  .cennik__nazwa { grid-column-start: 1; grid-row-start: 1; }
  .cennik__lista {
    grid-column-start: 2;
    grid-row: 1 / span 2;
    border-top-width: 0;
    border-left: 1px solid rgb(var(--brand-rgb) / 0.2);
    padding-top: 0;
    padding-left: 2.5rem;
  }
  .cennik__przycisk { grid-column-start: 1; grid-row-start: 2; }
  .cennik__tytul { font-size: 1.5rem; line-height: 2rem; }
  .cennik__kwota { font-size: 3rem; line-height: 1; }
  .cennik__dodatki { margin-top: 3rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cennik__dodatek { padding: 1.75rem; }
  .cennik__dodatek-tytul { font-size: 1.125rem; line-height: 1.75rem; }
  .cennik__nota { margin-top: 3rem; }
  .cennik__nota--druga { margin-top: 1.5rem; }
}


/* ==========================================================================
   22. STRONA GŁÓWNA — FAQ (partials/sekcje/faq.php; akordeon w js/main.js)
   ========================================================================== */
.faq { padding-top: 5rem; padding-bottom: 5rem; }
.faq__siatka { display: grid; gap: 3rem; }
.faq__lead {
  margin-top: 1rem;
  max-width: 28rem;
  font-size: 15px;
  line-height: 1.625;
  color: var(--fg-muted);
}
.faq__pytaj--desktop { margin-top: 2.5rem; display: none; }
.faq__pytaj--mobile { margin-top: 2rem; }
.faq__lista { display: flex; flex-direction: column; gap: 0.75rem; }
.faq__pozycja {
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background-color: var(--surface);
  transition: background-color 0.15s var(--ease-std), border-color 0.15s var(--ease-std);
}
.faq__pozycja:hover { border-color: var(--line-strong); }
.faq__pozycja.is-otwarta { border-color: var(--line-strong); background-color: var(--surface-hover); }
.faq__pytanie {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  text-align: left;
}
.faq__pytanie-tekst {
  font-size: 1rem;
  line-height: 1.375;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--fg);
}
.faq__strzalka {
  flex-shrink: 0;
  color: var(--fg-subtle);
  transition: transform 0.3s var(--ease-std);
}
.faq__pozycja.is-otwarta .faq__strzalka { transform: rotate(180deg); color: var(--brand); }
.faq__odpowiedz {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease-out);
}
.faq__pozycja.is-otwarta .faq__odpowiedz { grid-template-rows: 1fr; }
.faq__odpowiedz-wnetrze { overflow: hidden; }
.faq__odpowiedz-tresc {
  padding: 0 1.25rem 1.25rem;
  font-size: 15px;
  line-height: 1.625;
  color: var(--fg-muted);
}
.faq__odpowiedz-tresc > * + * { margin-top: 0.75rem; }

/* „Nie znalazłeś swojego pytania?" */
.pytaj__tekst { font-size: 0.875rem; line-height: 1.625; color: var(--fg-muted); }
.pytaj__przycisk { margin-top: 1rem; }
.pytaj__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--brand-fg);
  text-underline-offset: 4px;
}
.pytaj__link:hover { text-decoration-line: underline; }
.pytaj__strzalka { transition: transform 0.2s var(--ease-std); }
.pytaj__link:hover .pytaj__strzalka { transform: translate(0.125rem, 0); }

@media (min-width: 768px) {
  .faq { padding-top: 7rem; padding-bottom: 7rem; }
  .faq__lead { font-size: 1rem; line-height: 1.5rem; }
  .faq__pytanie { padding: 1.25rem 1.5rem; }
  .faq__pytanie-tekst { font-size: 1.125rem; line-height: 1.75rem; }
  .faq__odpowiedz-tresc { padding: 0 1.5rem 1.5rem; }
}
@media (min-width: 1024px) {
  .faq__siatka { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3.5rem; }
  .faq__lewa { grid-column: span 5 / span 5; }
  .faq__przyklejone { position: sticky; top: 7rem; }
  .faq__pytaj--desktop { display: block; }
  .faq__prawa { grid-column: span 7 / span 7; }
  .faq__pytaj--mobile { display: none; }
}


/* ==========================================================================
   23. STRONA GŁÓWNA — O MNIE (partials/sekcje/o-mnie.php)
   ========================================================================== */
.o-mnie {
  scroll-margin-top: 6rem;
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.o-mnie__siatka { display: grid; align-items: center; gap: 2.5rem; }
.o-mnie__zdjecie {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 24rem;
}
.o-mnie__poswiata {
  pointer-events: none;
  position: absolute;
  inset: -1.5rem;
  border-radius: 9999px;
  background: radial-gradient(circle, rgb(var(--brand-rgb) / 0.14) 0%, rgb(var(--brand-rgb) / 0.04) 50%, transparent 72%);
  filter: blur(24px);
}
.o-mnie__img {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 1rem;
  object-fit: cover;
}
.o-mnie__kto {
  margin-top: 1.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  color: var(--fg);
}
.o-mnie__tresc {
  margin-top: 1rem;
  font-size: 15px;
  line-height: 1.625;
  color: var(--fg-muted);
}
.o-mnie__tresc > * + * { margin-top: 1rem; }
.o-mnie__zasada {
  margin-top: 1.5rem;
  border-left: 2px solid var(--brand);
  padding-left: 1rem;
  font-size: 15px;
  line-height: 1.625;
  color: var(--fg);
}

@media (min-width: 768px) {
  .o-mnie { padding-top: 7rem; padding-bottom: 7rem; }
  .o-mnie__kto { font-size: 1.125rem; line-height: 1.75rem; }
  .o-mnie__tresc { font-size: 1rem; line-height: 1.5rem; }
  .o-mnie__zasada { font-size: 1rem; line-height: 1.5rem; }
}
@media (min-width: 1024px) {
  .o-mnie__siatka { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3.5rem; }
  .o-mnie__lewa { grid-column: span 5 / span 5; }
  .o-mnie__prawa { grid-column: span 7 / span 7; }
  .o-mnie__zdjecie { max-width: none; }
}
@media (min-width: 1280px) {
  .o-mnie__poswiata { inset: -2rem; }
}


/* ==========================================================================
   24. STRONA GŁÓWNA — CTA KOŃCOWE (partials/sekcje/cta-koncowe.php)
   ========================================================================== */
.cta-koncowe {
  position: relative;
  overflow: hidden;
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.cta-koncowe__zorza { pointer-events: none; position: absolute; inset: 0; }
.cta-koncowe__plama { position: absolute; left: 50%; top: 50%; max-width: none; }
.cta-koncowe__plama--1 {
  width: 900px;
  height: 560px;
  transform: translate(-58%, -50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgb(var(--brand-rgb) / 0.2) 0%, rgb(var(--brand-rgb) / 0.06) 48%, transparent 72%);
  filter: blur(28px);
}
.cta-koncowe__plama--2 {
  width: 760px;
  height: 460px;
  transform: translate(-40%, -40%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgb(var(--brand-rgb) / 0.1) 0%, transparent 70%);
  filter: blur(36px);
}
.cta-koncowe__wnetrze { position: relative; }
.cta-koncowe__tytul { text-wrap: balance; }
.cta-koncowe__lead {
  margin: 1.25rem auto 0;
  max-width: 42rem;
  font-size: 15px;
  line-height: 1.625;
  color: var(--fg-muted);
}
.cta-koncowe__przycisk { margin-top: 2.25rem; display: flex; justify-content: center; }
.cta-koncowe__btn { padding-left: 2.5rem; padding-right: 2.5rem; }
.cta-koncowe__mikro { margin-top: 1.25rem; font-size: 13px; color: var(--fg-subtle); }

@media (min-width: 768px) {
  .cta-koncowe { padding-top: 9rem; padding-bottom: 9rem; }
  .cta-koncowe__lead { font-size: 1.125rem; line-height: 1.75rem; }
  .cta-koncowe__przycisk { margin-top: 2.5rem; }
  .cta-koncowe__mikro { font-size: 0.875rem; line-height: 1.25rem; }
}


/* ==========================================================================
   25. PODSTRONY USŁUG — wspólne bloki (partials/uslugi/komponenty.php)
   ========================================================================== */
.u-sekcja { padding-top: 5rem; padding-bottom: 5rem; }

/* Wzór kratki w tle hero (port BGPattern: grid, maska do krawędzi) */
.wzor-kratka {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgb(var(--white-rgb) / 0.06) 1px, transparent 1px),
    linear-gradient(rgb(var(--white-rgb) / 0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(black, transparent);
  mask-image: radial-gradient(black, transparent);
}

/* --- Hero podstrony --- */
.u-hero {
  position: relative;
  overflow: hidden;
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.u-hero__poswiata {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 10%;
  width: 480px;
  height: 480px;
  transform: translate(-50%, 0);
  border-radius: 9999px;
  background: radial-gradient(circle, rgb(var(--brand-rgb) / 0.08) 0%, rgb(var(--brand-rgb) / 0.02) 45%, transparent 70%);
  filter: blur(10px);
}
.u-hero__wnetrze { position: relative; }
.u-hero__siatka { display: grid; align-items: center; gap: 3rem; }
.u-hero__tytul {
  margin-top: 1rem;
  font-size: 2.25rem;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fg);
}
.u-hero__lead {
  margin-top: 1.25rem;
  max-width: 42rem;
  font-size: 15px;
  line-height: 1.625;
  color: var(--fg-muted);
}
.u-hero__fakty {
  margin-top: 1.5rem;
  font-size: 13px;
  line-height: 1.375;
  color: var(--fg-subtle);
}
.u-hero__uwaga {
  margin-top: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgb(var(--uwaga-rgb) / 0.35);
  border-radius: 1rem;
  background-color: rgb(var(--uwaga-rgb) / 0.1);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--uwaga-fg);
}
.u-hero__uwaga-ikona { flex-shrink: 0; }
.u-hero__cta {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.5rem;
  row-gap: 1rem;
}
.u-hero__wroc {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--fg-muted);
  transition: color 0.15s var(--ease-std);
}
.u-hero__wroc:hover { color: var(--brand); }
.u-hero__wroc-strzalka { transition: transform 0.15s var(--ease-std); }
.u-hero__wroc:hover .u-hero__wroc-strzalka { transform: translate(-0.125rem, 0); }

/* --- Zrzut w ramce (port FramedShot) --- */
.ramka { position: relative; }
.ramka--telefon { max-width: 320px; }
.ramka--srodek-mobile { margin-left: auto; margin-right: auto; }
.ramka__oprawa {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background-color: var(--surface);
  padding: 0.375rem;
  transition: transform 0.3s var(--ease-std);
}
.ramka__oprawa--telefon { border-radius: 1.5rem; }
.ramka__przycisk {
  display: block;
  width: 100%;
  cursor: zoom-in;
  border-radius: 1rem;
}
.ramka__przycisk:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgb(var(--brand-rgb) / 0.6);
}
.ramka__img { width: 100%; height: auto; border-radius: 1rem; }
.ramka__img--telefon { border-radius: 1.5rem; }
.ramka__chip {
  position: absolute;
  right: -0.75rem;
  top: -0.75rem;
  white-space: nowrap;
  border: 1px solid rgb(var(--brand-rgb) / 0.4);
  border-radius: 9999px;
  background-color: var(--chip-bg);
  padding: 0.25rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  color: var(--brand-fg);
  box-shadow: 0 8px 24px -8px rgb(0 0 0 / 0.6);
}
.ramka__podpis {
  margin-top: 0.625rem;
  font-size: 13px;
  line-height: 1.375;
  color: var(--fg-subtle);
}

/* --- Zakres: karty z teksturą (linie przerywane między kartami) --- */
.u-karty {
  margin: 3rem auto 0;
  display: grid;
  max-width: 56rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  border: 1px dashed var(--line);
  animation: fadeUp 0.6s ease-out both;
}
/* Ten sam selektor co Tailwind (divide-y) — ta sama specyficzność, więc wygrywa
   z kolorem obramowania karty-callout (jak w wersji React) */
.u-karty > :not([hidden]) ~ :not([hidden]) {
  border-top-width: 1px;
  border-bottom-width: 0;
  border-style: dashed;
  border-color: var(--line);
}
.u-karta {
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
}
.u-karta__ikona { width: 1.5rem; height: 1.5rem; color: var(--brand); }
.u-karta__tekst {
  position: relative;
  z-index: 10;
  margin-top: 1.25rem;
  font-size: 15px;
  line-height: 1.625;
  color: var(--fg-muted);
}
.u-karta--callout { background-color: rgb(var(--brand-rgb) / 0.06); }
.u-karta__tytul { position: relative; z-index: 10; margin-top: 1.25rem; }
.u-karta__akapity { position: relative; z-index: 10; margin-top: 1rem; }
.u-karta__akapity > * + * { margin-top: 1rem; }

/* --- Zakres: dwa panele 7/5 --- */
.u-panele {
  margin: 3rem auto 0;
  display: grid;
  max-width: 64rem;
  gap: 1.5rem;
}
.u-panel {
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 1.5rem;
}
.u-panel--lewy { position: relative; overflow: hidden; background-color: var(--surface); }
.u-panel--prawy { background-color: var(--bg-elevated); }
.u-panel__tytul { position: relative; z-index: 10; }
.u-panel__lista { position: relative; z-index: 10; margin-top: 1.5rem; }
.u-panel__lista > * + * { margin-top: 1rem; }
.u-panel__punkt {
  display: flex;
  gap: 0.875rem;
  font-size: 15px;
  line-height: 1.625;
  color: var(--fg-muted);
}
.u-panel__ikona { margin-top: 0.125rem; width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: var(--brand); }
.u-lista-kropki { margin-top: 1.5rem; }
.u-lista-kropki > * + * { margin-top: 0.75rem; }
.u-lista-kropki__punkt {
  display: flex;
  gap: 0.75rem;
  font-size: 15px;
  line-height: 1.625;
  color: var(--fg-muted);
}
.u-lista-kropki__kropka {
  margin-top: 9px;
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  flex-shrink: 0;
  border-radius: 9999px;
  background-color: var(--brand);
}
.u-panel__dopisek {
  margin-top: 1.25rem;
  font-size: 13px;
  line-height: 1.375;
  color: var(--fg-subtle);
}
.u-sekcja__dopisek {
  margin: 2.5rem auto 0;
  max-width: 56rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--fg-muted);
}
.u-sekcja__drobny {
  margin: 2rem auto 0;
  max-width: 42rem;
  text-align: center;
  font-size: 13px;
  line-height: 1.375;
  color: var(--fg-subtle);
}

/* --- Kroki (tryb „szyna") --- */
.u-kroki {
  position: relative;
  overflow: hidden;
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.u-krok { position: relative; }
.u-krok__duch {
  pointer-events: none;
  position: absolute;
  left: -0.5rem;
  top: -1rem;
  -webkit-user-select: none;
  user-select: none;
  font-family: var(--font-mono);
  font-size: 6rem;
  line-height: 1;
  font-weight: 600;
  color: rgb(var(--white-rgb) / 0.04);
}
.u-krok__znacznik { position: relative; display: flex; align-items: center; gap: 1rem; }
.u-krok__nr {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  place-content: center;
  border: 1px solid rgb(var(--brand-rgb) / 0.3);
  border-radius: 9999px;
  background-color: rgb(var(--brand-rgb) / 0.1);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--brand-fg);
}
.u-krok__linia {
  height: 1px;
  flex: 1;
  background-image: linear-gradient(to right, rgb(var(--brand-rgb) / 0.4), transparent);
}
.u-krok__tytul { position: relative; margin-top: 1.25rem; }
.u-krok__tekst { position: relative; margin-top: 0.75rem; }
.u-krok__meta {
  position: relative;
  margin-top: 0.75rem;
  font-size: 13px;
  line-height: 1.375;
  color: var(--fg-subtle);
}
.u-kroki__callout {
  margin: 3rem auto 0;
  max-width: 42rem;
  border: 1px solid rgb(var(--brand-rgb) / 0.2);
  border-radius: 0.75rem;
  background-color: rgb(var(--brand-rgb) / 0.06);
  padding: 1.25rem 1.5rem;
}
.u-kroki__callout-ikona { margin-bottom: 0.75rem; width: 1.25rem; height: 1.25rem; color: var(--brand); }
.u-kroki__callout-tekst {
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--fg-muted);
}
.u-kroki__callout-cytat {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  font-style: italic;
  line-height: 1.625;
  color: var(--fg-muted);
}

/* --- Dowód --- */
.u-dowod__split { margin-top: 3rem; display: grid; gap: 3rem; }
.u-dowod__staty-siatka { display: grid; column-gap: 2.5rem; row-gap: 2rem; }
.stat-split { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.u-dowod__media { display: flex; flex-direction: column; gap: 2rem; }
.u-dowod__staty {
  margin: 3rem auto 0;
  display: grid;
  max-width: 56rem;
  border-top: 1px solid var(--line);
}
.u-dowod__dopisek {
  margin: 1.5rem auto 0;
  max-width: 56rem;
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--fg-muted);
}
.u-dowod__dopisek--split { margin-top: 2rem; max-width: none; }
.u-dowod__link { margin-top: 2rem; }
.u-dowod__link--lewo { margin-left: auto; margin-right: auto; max-width: 56rem; }
.u-dowod__link--srodek { display: flex; justify-content: center; }
.u-dowod__link--prawo { margin-left: auto; margin-right: auto; display: flex; max-width: 56rem; justify-content: flex-end; }
.u-dowod__link--split { margin-top: 2.5rem; margin-left: 0; margin-right: 0; max-width: none; }

/* --- FAQ podstrony (akordeon = te same klasy co FAQ strony głównej) --- */
.u-faq { position: relative; padding-top: 5rem; padding-bottom: 5rem; }
.u-faq__siatka { display: grid; gap: 2.5rem; }

/* --- Finał podstrony (zorza) --- */
.u-final {
  position: relative;
  overflow: hidden;
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.u-final__zorza { pointer-events: none; position: absolute; inset: 0; }
.u-final__plama { position: absolute; left: 50%; top: 50%; max-width: none; }
.u-final__plama--1 {
  width: 820px;
  height: 480px;
  transform: translate(-62%, -50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgb(var(--brand-rgb) / 0.12) 0%, transparent 70%);
  filter: blur(32px);
}
.u-final__plama--2 {
  width: 720px;
  height: 420px;
  transform: translate(-38%, -42%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgb(var(--brand-rgb) / 0.06) 0%, transparent 70%);
  filter: blur(24px);
}
.u-final__wnetrze { position: relative; }
.u-final__srodek { margin-left: auto; margin-right: auto; max-width: 42rem; text-align: center; }
.u-final__lead { font-size: 1rem; line-height: 1.625; color: var(--fg-muted); }
.u-final__przycisk { margin-top: 1.5rem; display: flex; justify-content: center; }
.u-final__mikro { margin-top: 1rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--fg-subtle); }

/* Dowód na podstronie Meta (bez liczb) */
.u-meta-dowod__link { margin-top: 2rem; }

@media (min-width: 640px) {
  .u-dowod__staty-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .u-dowod__staty--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; row-gap: 0.5rem; }
  .u-dowod__staty--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.5rem; }
}
@media (min-width: 768px) {
  .u-sekcja { padding-top: 7rem; padding-bottom: 7rem; }
  .u-hero { padding-top: 7rem; padding-bottom: 7rem; }
  .u-hero__tytul { font-size: 3rem; line-height: 1; }
  .u-hero__lead { font-size: 1rem; line-height: 1.5rem; }
  .u-karty { margin-top: 4rem; }
  .u-karta { padding: 1.75rem; }
  .u-karta--callout { padding: 2rem; }
  .u-panele { margin-top: 4rem; }
  .u-panel { padding: 2rem; }
  .u-kroki { padding-top: 7rem; padding-bottom: 7rem; }
  .u-kroki__callout { margin-top: 3.5rem; }
  .u-dowod__split { margin-top: 4rem; }
  .u-dowod__staty { margin-top: 4rem; }
  .u-faq { padding-top: 7rem; padding-bottom: 7rem; }
  .u-final { padding-top: 7rem; padding-bottom: 7rem; }
  .u-final__lead { font-size: 1.125rem; line-height: 1.75rem; }
}
@media (min-width: 1024px) {
  .u-hero__siatka { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem; }
  .u-hero__tekst { grid-column: span 7 / span 7; }
  .u-hero__tekst--bez-wizualu { grid-column: span 8 / span 8; }
  .u-hero__wizual { grid-column: span 5 / span 5; }
  .ramka__oprawa--pochylona { transform: rotate(-2deg); }
  .ramka__oprawa--pochylona:hover,
  .ramka__oprawa--pochylona:focus-within { transform: none; }
  .ramka--srodek-mobile { margin-left: 0; margin-right: 0; }
  .u-karty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .u-karty > :not([hidden]) ~ :not([hidden]) { border-right-width: 0; border-left-width: 1px; }
  .u-karta--szeroka,
  .u-karta--callout { grid-column: span 2 / span 2; }
  .u-panele { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .u-panel--lewy { grid-column: span 7 / span 7; }
  .u-panel--prawy { grid-column: span 5 / span 5; }
  .u-dowod__split { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem; }
  .u-dowod__staty-kolumna { grid-column: span 7 / span 7; }
  .u-dowod__media { grid-column: span 5 / span 5; }
  .u-dowod__staty { column-gap: 0; row-gap: 0; padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .u-dowod__staty--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .u-faq__siatka { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem; }
  .u-faq__lewa { grid-column: span 4 / span 4; }
  .u-faq__przyklejone { position: sticky; top: 7rem; }
  .u-faq__lista { grid-column: span 8 / span 8; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 1024px) {
  .ramka__oprawa--pochylona { transform: none; }
}


/* ==========================================================================
   26. POLITYKA PRYWATNOŚCI (polityka-prywatnosci.php)
   ========================================================================== */
.polityka { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.polityka__wstep { max-width: 720px; }
.polityka__data {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-style: italic;
  color: var(--fg-subtle);
}
.polityka__nota {
  margin-top: 1.5rem;
  border: 1px solid rgb(var(--brand-rgb) / 0.3);
  border-radius: 0.75rem;
  background-color: rgb(var(--brand-rgb) / 0.06);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--fg-muted);
}
.polityka__intro {
  margin-top: 1.5rem;
  font-size: 15px;
  line-height: 1.7;
  color: var(--fg-muted);
}
.polityka__siatka { margin-top: 3rem; display: grid; gap: 3rem; }
.polityka__spis-lista { margin-top: 1rem; }
.polityka__spis-lista > :not([hidden]) ~ :not([hidden]) { margin-top: 0.625rem; }
.polityka__spis-link {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--fg-muted);
  transition: color 0.15s var(--ease-std);
}
.polityka__spis-link:hover { color: var(--fg); }
.polityka__tresc { min-width: 0; }
.polityka__rozdzialy { max-width: 720px; }
.polityka__rozdzialy > :not([hidden]) ~ :not([hidden]) { margin-top: 3.5rem; }
/* Niewidoczna kotwica rozdziału — przesunięta w górę pod pływającą nawigację */
.polityka__kotwica { margin-top: -5rem; padding-top: 5rem; }
.polityka__h2 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fg);
}
.polityka__akapity {
  margin-top: 1.25rem;
  font-size: 15px;
  line-height: 1.7;
  color: var(--fg-muted);
}
.polityka__akapity > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.polityka__h3 {
  padding-top: 0.5rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fg);
}
.polityka__lista { list-style-type: disc; padding-left: 1.25rem; }
.polityka__lista > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }
.polityka__tabela-wrap { overflow-x: auto; }
.polityka__tabela {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.polityka__wiersz-glowa { border-bottom: 1px solid var(--line-strong); }
.polityka__wiersz { border-bottom: 1px solid var(--line); }
.polityka__th { padding-top: 0.75rem; padding-bottom: 0.75rem; font-weight: 600; color: var(--fg); }
.polityka__td { padding-top: 0.75rem; padding-bottom: 0.75rem; vertical-align: top; }
.polityka__komorka--lewa { padding-right: 1rem; }

@media (min-width: 768px) {
  .polityka { padding-top: 5rem; padding-bottom: 5rem; }
  .polityka__h2 { font-size: 1.875rem; line-height: 2.25rem; }
}
@media (min-width: 1024px) {
  .polityka__siatka { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem; }
  .polityka__spis { grid-column: span 4 / span 4; }
  .polityka__spis-przyklejony { position: sticky; top: 7rem; }
  .polityka__tresc { grid-column: span 8 / span 8; }
}


/* ==========================================================================
   27. STRONA 404 (404.php)
   ========================================================================== */
.strona-404 {
  display: flex;
  min-height: calc(100vh - 6rem);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 5rem;
  padding-bottom: 5rem;
  text-align: center;
}
.strona-404__kicker { color: var(--brand); }
.strona-404__tytul {
  margin-top: 1rem;
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.strona-404__tekst { margin-top: 1rem; max-width: 55ch; color: var(--fg-muted); }
.strona-404__przyciski {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .strona-404__tytul { font-size: 3rem; line-height: 1; }
  .strona-404__przyciski { flex-direction: row; }
}


/* ==========================================================================
   28. REZERWACJE — /umow, /k/{token} (js/rezerwacja.js renderuje widoki)
   ========================================================================== */
.rez { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.rez__laduje { font-size: 0.875rem; line-height: 1.25rem; color: var(--fg-subtle); }
.rez__lead {
  margin-top: 1rem;
  max-width: 42rem;
  font-size: 15px;
  line-height: 1.625;
  color: var(--fg-muted);
}
.rez__cena-info { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--fg-subtle); }
.rez__siatka { margin-top: 2.5rem; display: grid; gap: 1.5rem; }
.rez__rodo { margin-top: 0.75rem; font-size: 13px; line-height: 1.375; color: var(--fg-subtle); }

/* Panel (formularz / strona zamknięcia) */
.rez-panel {
  border: 1px solid var(--line);
  border-radius: 1rem;
  background-color: var(--surface);
  padding: 1.5rem;
}
.rez-panel__intro { font-size: 15px; line-height: 1.625; color: var(--fg); }

/* Pasek postępu (krok 1–3) */
.rez-postep { margin-top: 1.5rem; display: flex; align-items: center; gap: 1rem; }
.rez-pasek {
  height: 0.375rem;
  width: 100%;
  overflow: hidden;
  border-radius: 9999px;
  background-color: rgb(var(--white-rgb) / 0.07);
}
.rez-pasek--gotowy { margin-top: 1.25rem; }
.rez-pasek__wypelnienie {
  height: 100%;
  border-radius: 9999px;
  background-color: var(--brand);
  transition: width 0.3s var(--ease-std);
}
.rez-pasek__wypelnienie[data-krok="1"] { width: 33.33333333333333%; }
.rez-pasek__wypelnienie[data-krok="2"] { width: 66.66666666666666%; }
.rez-pasek__wypelnienie[data-krok="3"] { width: 100%; }
.rez-pasek__pelny { height: 100%; width: 100%; border-radius: 9999px; background-color: var(--brand); }
.rez-postep__opis { white-space: nowrap; font-size: 13px; color: var(--fg-subtle); }

/* Formularz kroków */
.rez-form { margin-top: 2rem; animation: fadeUp 0.6s ease-out both; }
.rez-krok__tytul {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fg);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.rez-krok__opis { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--fg-muted); }
.rez-form__para { display: grid; column-gap: 1rem; }
.rez-lub {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-subtle);
}
.rez-lub__kreska { height: 1px; flex: 1; background-color: var(--line); }
.rez-blad-grupy { margin-top: 0.5rem; font-size: 13px; color: var(--blad); }
.rez-form__przyciski { margin-top: 2rem; display: flex; align-items: center; justify-content: space-between; }

/* Pole formularza (port PoleFormularza) */
.pole { margin-top: 1.25rem; }
.pole__etykieta { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--fg); }
.pole__opcjonalne { margin-left: 0.375rem; font-weight: 400; color: var(--fg-subtle); }
.pole__wejscie {
  margin-top: 0.5rem;
  height: 2.75rem;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background-color: var(--bg-elevated);
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--fg);
  transition: color 0.15s var(--ease-std), background-color 0.15s var(--ease-std), border-color 0.15s var(--ease-std);
}
.pole__wejscie--tekst { height: auto; padding-top: 0.75rem; padding-bottom: 0.75rem; }
.pole__wejscie::placeholder { color: rgb(139 139 150 / 0.7); }
.pole__wejscie:focus-visible {
  border-color: rgb(var(--brand-rgb) / 0.6);
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgb(var(--brand-rgb) / 0.3);
}
.pole__wejscie[aria-invalid="true"] { border-color: rgb(var(--blad-rgb) / 0.6); }
.pole__podpowiedz { margin-top: 0.375rem; font-size: 13px; line-height: 1.375; color: var(--fg-subtle); }
.pole__blad { margin-top: 0.375rem; font-size: 13px; color: var(--blad); }
/* Pułapka na boty (honeypot) — poza ekranem, niewidoczna dla ludzi */
.pole-pulapka { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Formularz wypełniony */
.rez-gotowy__glowa { display: flex; align-items: center; gap: 0.625rem; }
.rez-gotowy__ikona { color: var(--brand); }
.rez-gotowy__tytul { font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; letter-spacing: -0.025em; color: var(--fg); }
.rez-gotowy__dane { margin-top: 1rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--fg-muted); }
.rez-gotowy__edytuj {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--brand-fg);
  text-underline-offset: 4px;
}
.rez-gotowy__edytuj:hover { text-decoration-line: underline; }

/* Kółko z ikoną (kłódka, link nieważny) */
.ikona-kolo {
  display: flex;
  width: 3rem;
  height: 3rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 9999px;
  background-color: var(--bg-elevated);
}
.ikona-kolo__ikona { color: var(--fg-subtle); }
/* Pulsujące kółko (sukces / podziękowanie) */
.ikona-puls {
  display: flex;
  width: 3rem;
  height: 3rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(var(--brand-rgb) / 0.3);
  border-radius: 9999px;
  background-color: rgb(var(--brand-rgb) / 0.08);
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.ikona-puls__ikona { width: 1.5rem; height: 1.5rem; color: var(--brand); }

/* --- Kalendarz terminów (port KalendarzTerminow) --- */
.kal {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background-color: var(--surface);
  padding: 1.5rem;
}
.kal__zawartosc { transition: opacity 0.3s var(--ease-std), filter 0.3s var(--ease-std); }
.kal__zawartosc.is-zablokowany {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  opacity: 0.4;
  filter: blur(1px);
}
.kal__zawartosc.is-odblokowany { animation: fadeUp 0.6s ease-out both; }
.kal__opis { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--fg-muted); }
.kal__info { margin-top: 1.5rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--fg-subtle); }
.kal__komunikat { margin-top: 1.5rem; font-size: 0.875rem; line-height: 1.625; color: var(--fg-muted); }
.kal__miesiac { margin-top: 1.25rem; }
.kal__nawigacja { display: flex; align-items: center; justify-content: space-between; }
.kal__strzalka {
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  color: var(--fg-muted);
  transition: color 0.15s var(--ease-std), background-color 0.15s var(--ease-std);
}
.kal__strzalka:hover { background-color: rgb(var(--white-rgb) / 0.07); color: var(--fg); }
.kal__strzalka:disabled { pointer-events: none; opacity: 0.3; }
.kal__nazwa-miesiaca { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--fg); }
.kal__dni-tygodnia,
.kal__dni {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  place-items: center;
  gap: 0.25rem;
}
.kal__dni-tygodnia { margin-top: 1rem; }
.kal__dni { margin-top: 0.25rem; }
.kal__dzien-tygodnia { font-size: 0.75rem; line-height: 1rem; color: var(--fg-subtle); }
.kal__dzien {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  transition: color 0.15s var(--ease-std), background-color 0.15s var(--ease-std);
}
.kal__dzien--dostepny { color: var(--fg); }
.kal__dzien--dostepny:hover { background-color: rgb(var(--white-rgb) / 0.07); }
.kal__dzien--wybrany { background-color: var(--brand); font-weight: 500; color: var(--white); }
.kal__dzien--niedostepny { color: rgb(139 139 150 / 0.4); }
.kal__dzien--niedostepny:disabled { pointer-events: none; }
.kal__dzien--dzis { box-shadow: 0 0 0 1px var(--line-strong); }
.kal__kropka {
  position: absolute;
  bottom: 0.25rem;
  left: 50%;
  width: 0.25rem;
  height: 0.25rem;
  transform: translate(-50%, 0);
  border-radius: 9999px;
  background-color: var(--brand);
}
.kal__wybrany-dzien { margin-top: 1.5rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--fg); }
.kal__godziny {
  margin-top: 0.75rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.kal__godzina {
  height: 2.5rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background-color: var(--bg-elevated);
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--fg-muted);
  transition: color 0.15s var(--ease-std), background-color 0.15s var(--ease-std), border-color 0.15s var(--ease-std);
}
.kal__godzina:hover { border-color: rgb(var(--brand-rgb) / 0.5); color: var(--fg); }
.kal__godzina--wybrana,
.kal__godzina--wybrana:hover {
  border-color: var(--brand);
  background-color: var(--brand);
  font-weight: 500;
  color: var(--white);
}
.kal__uwaga {
  margin-top: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background-color: var(--bg-elevated);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--fg-muted);
}
.kal__blad {
  margin-top: 1rem;
  border: 1px solid rgb(var(--blad-rgb) / 0.3);
  border-radius: 0.75rem;
  background-color: rgb(var(--blad-rgb) / 0.06);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--blad-jasny);
}
.kal__blad-link { font-weight: 500; text-underline-offset: 4px; }
.kal__blad-link:hover { text-decoration-line: underline; }
.kal__final { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 1.25rem; }
.kal__termin { font-size: 0.875rem; line-height: 1.25rem; color: var(--fg); }
.kal__termin-wartosc { font-weight: 500; }
.kal__final-opis { margin-top: 0.5rem; font-size: 13px; line-height: 1.375; color: var(--fg-subtle); }
.kal__wyslij { margin-top: 1rem; width: 100%; }
.kal__klodka {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
}
.kal__klodka-tytul { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--fg); }
.kal__klodka-podpis { font-size: 13px; color: var(--fg-subtle); }
.kal__filtr {
  margin-top: 1.25rem;
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
  font-size: 13px;
  line-height: 1.375;
  color: var(--fg-subtle);
}

/* --- Zapisy zamknięte + lista oczekujących (port StronaZamkniecia) --- */
.zamk { margin-top: 2.5rem; max-width: 36rem; }
.zamk__tytul {
  margin-top: 1.25rem;
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fg);
}
.zamk__opis { margin-top: 0.75rem; font-size: 15px; line-height: 1.625; color: var(--fg-muted); }
.zamk__wznowienie { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--fg-subtle); }
.zamk__sukces {
  margin-top: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  border: 1px solid rgb(var(--brand-rgb) / 0.3);
  border-radius: 0.75rem;
  background-color: rgb(var(--brand-rgb) / 0.06);
  padding: 1rem;
}
.zamk__sukces-ikona { margin-top: 0.125rem; flex-shrink: 0; color: var(--brand); }
.zamk__sukces-tekst { font-size: 0.875rem; line-height: 1.625; color: var(--fg); }
.zamk__form { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 1.5rem; }
.zamk__form-tytul { font-size: 1rem; line-height: 1.5rem; font-weight: 600; letter-spacing: -0.025em; color: var(--fg); }
.zamk__blad-wysylki { margin-top: 1rem; font-size: 13px; line-height: 1.375; color: var(--blad); }
.zamk__wyslij { margin-top: 1.5rem; width: 100%; }

/* --- Osobisty link /k/{token} --- */
.tok { padding-top: 3rem; padding-bottom: 3rem; }
.tok__tytul {
  margin-top: 1rem;
  font-size: 1.875rem;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fg);
}
.tok__lead { margin-top: 1rem; max-width: 36rem; font-size: 15px; line-height: 1.625; color: var(--fg-muted); }
.tok__kalendarz { margin-top: 2rem; max-width: 28rem; }
.tok-laduje { padding-top: 4rem; padding-bottom: 4rem; }
.tok-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4rem;
  padding-bottom: 4rem;
  text-align: center;
}
.tok-info__tytul {
  margin-top: 1.25rem;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fg);
}
.tok-info__tytul--sukces { animation: fadeUp 0.6s ease-out both; }
.tok-info__tekst { margin-top: 0.75rem; max-width: 28rem; font-size: 15px; line-height: 1.625; color: var(--fg-muted); }
.tok-info__tekst--sukces { max-width: 36rem; }
.tok-info__wroc { margin-top: 2.5rem; }

@media (min-width: 640px) {
  .pole__wejscie { font-size: 15px; }
  .rez-form__para { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kal__godziny { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .rez { padding-top: 5rem; padding-bottom: 5rem; }
  .rez__lead { font-size: 1rem; line-height: 1.5rem; }
  .rez-panel { padding: 2rem; }
  .kal { padding: 1.75rem; }
  .kal__strzalka { width: 2rem; height: 2rem; }
  .ikona-puls { width: 4rem; height: 4rem; }
  .ikona-puls__ikona { width: 2rem; height: 2rem; }
  .tok { padding-top: 4rem; padding-bottom: 4rem; }
  .tok__tytul { font-size: 2.25rem; line-height: 2.5rem; }
  .tok__lead { font-size: 1rem; line-height: 1.5rem; }
  .tok-laduje, .tok-info { padding-top: 6rem; padding-bottom: 6rem; }
  .tok-info__tytul { font-size: 1.875rem; line-height: 2.25rem; }
  .tok-info__tytul--sukces { margin-top: 2rem; font-size: 2.25rem; line-height: 2.5rem; }
  .tok-info__tekst--sukces { font-size: 1rem; line-height: 1.5rem; }
  .ikona-kolo--wieksze { width: 3.5rem; height: 3.5rem; }
}
@media (min-width: 1024px) {
  .rez__siatka { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .rez__lewa { grid-column: span 7 / span 7; }
  .rez__prawa { position: sticky; top: 6rem; grid-column: span 5 / span 5; }
}


/* ==========================================================================
   29. PODZIĘKOWANIE — /dziekuje (dziekuje.php); zaślepka filmu także na /strona-za-1000
   ========================================================================== */
.dzieki {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  text-align: center;
}
.dzieki__tytul {
  margin-top: 1.25rem;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  animation: fadeUp 0.6s ease-out both;
}
.dzieki__lead { margin-top: 0.75rem; max-width: 36rem; font-size: 15px; line-height: 1.625; color: var(--fg-muted); }

/* Film (zaślepka do czasu nagrania) */
.dzieki__film { margin-top: 2rem; width: 100%; max-width: 42rem; text-align: center; }
.dzieki__naglowek { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; letter-spacing: -0.025em; }
.dzieki__film-opis {
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.5rem;
  max-width: 32rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--fg-muted);
}
.dzieki__wideo {
  margin-top: 1rem;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background-color: var(--black);
}
.dzieki__media { width: 100%; height: 100%; }
.dzieki__zaslepka {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.dzieki__poswiata {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 50% 40%, rgb(var(--brand-rgb) / 0.18), transparent 70%);
}
.dzieki__play {
  position: relative;
  display: flex;
  width: 4rem;
  height: 4rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(var(--brand-rgb) / 0.4);
  border-radius: 9999px;
  background-color: rgb(var(--brand-rgb) / 0.12);
}
.dzieki__play-ikona { width: 1.75rem; height: 1.75rem; transform: translate(0.125rem, 0); color: var(--brand-fg); }
.dzieki__zaslepka-podpis { position: relative; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--fg-muted); }

/* „Co się teraz wydarzy" / „Zanim porozmawiamy" */
.dzieki__blok { margin-top: 3.5rem; width: 100%; max-width: 42rem; text-align: left; }
.dzieki__kroki { margin-top: 1.5rem; }
.dzieki__kroki > li + li { margin-top: 1.25rem; }
.dzieki__krok {
  display: flex;
  gap: 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background-color: var(--surface);
  padding: 1.25rem;
}
.dzieki__nr {
  display: flex;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: rgb(var(--brand-rgb) / 0.12);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--brand-fg);
}
.dzieki__krok-opis { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.625; color: var(--fg-muted); }
.dzieki__tekst { margin-top: 0.75rem; font-size: 15px; line-height: 1.625; color: var(--fg-muted); }
.dzieki__pytania { margin-top: 1.25rem; }
.dzieki__pytania > li + li { margin-top: 1rem; }
.dzieki__pytanie { display: flex; gap: 0.75rem; font-size: 15px; line-height: 1.625; color: var(--fg-muted); }
.dzieki__pytanie-nr { font-weight: 600; color: var(--fg); }
.dzieki__uwaga { margin-top: 1.25rem; font-size: 0.875rem; line-height: 1.25rem; font-style: italic; color: var(--fg-subtle); }
.dzieki__podtytul { margin-top: 2.5rem; font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: var(--fg); }
.dzieki__zmiana { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.625; color: var(--fg-muted); }
.dzieki__wroc { margin-top: 3.5rem; }

@media (min-width: 768px) {
  .dzieki { padding-top: 7rem; padding-bottom: 7rem; }
  .dzieki__tytul { margin-top: 2rem; font-size: 3rem; line-height: 1; }
  .dzieki__lead { margin-top: 1rem; font-size: 1rem; line-height: 1.5rem; }
  .dzieki__film { margin-top: 3rem; }
  .dzieki__naglowek { font-size: 1.5rem; line-height: 2rem; }
}


/* ==========================================================================
   30. WAVE MUSIC — /wave-music (wave-music.php; teksty: partials/wave-music/teksty.php)
   Podstrona samodzielna: własny nagłówek i stopka, bez poświaty kursora.
   ========================================================================== */
.wm {
  position: relative;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background-color: var(--bg);
  color: var(--fg);
}
.wm__tresc { flex: 1 1 0%; }

/* Nagłówek */
.wm-naglowek {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--line);
  background-color: rgb(var(--bg-rgb) / 0.8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.wm-naglowek__wnetrze {
  display: flex;
  height: 4rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.wm-logo { display: flex; align-items: center; gap: 0.625rem; }
.wm-logo__ikona { width: 1.75rem; height: 1.75rem; }
.wm-logo__nazwa { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; letter-spacing: -0.025em; }
.wm-menu { display: none; align-items: center; gap: 1.5rem; }
.wm-menu__link,
.wm-powrot {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--fg-muted);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 0.15s;
  transition-timing-function: var(--ease-std);
}
.wm-menu__link:hover,
.wm-powrot:hover { color: var(--fg); }
.wm-powrot { display: inline-flex; align-items: center; gap: 0.375rem; }
.wm-naglowek__prawa { display: flex; align-items: center; gap: 0.75rem; }
/* Przełącznik języka — aktywny przycisk ma aria-pressed="true" */
.wm-jezyki { display: flex; align-items: center; gap: 0.5rem; }
.wm-jezyki__przycisk {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--fg-subtle);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 0.15s;
  transition-timing-function: var(--ease-std);
}
.wm-jezyki__przycisk:hover,
.wm-jezyki__przycisk[aria-pressed="true"] { color: var(--fg); }

/* Hero — pełna wysokość ekranu, telefon ścięty dolną krawędzią */
.wm-hero {
  position: relative;
  display: flex;
  height: calc(100svh - 4rem);
  min-height: 640px;
  flex-direction: column;
  overflow: hidden;
}
.wm-hero__poswiata {
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 420px;
  background-image: radial-gradient(60% 40% at 50% 0, rgb(var(--brand-rgb) / 0.18), transparent 70%);
}
.wm-hero__wnetrze { position: relative; display: flex; height: 100%; flex-direction: column; }
.wm-hero__tekst {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 3rem;
  text-align: center;
}
.wm-hero__badge {
  border: 1px solid var(--line);
  border-radius: 9999px;
  background-color: var(--surface);
  padding: 0.375rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--brand-fg);
}
.wm-hero__tytul {
  margin-top: 1.5rem;
  max-width: 42rem;
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.wm-hero__akcent { color: var(--fg-muted); }
.wm-hero__opis { margin-top: 1.5rem; max-width: 36rem; font-size: 1rem; line-height: 1.625; color: var(--fg-muted); }
.wm-hero__rozwiniecie { display: none; }
.wm-hero__przewin {
  margin-top: 2.5rem;
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 9999px;
  color: var(--fg-muted);
  animation: bounce 1s infinite;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 0.15s;
  transition-timing-function: var(--ease-std);
}
.wm-hero__przewin:hover { color: var(--fg); }
.wm-hero__media { position: relative; margin-top: auto; display: flex; justify-content: center; padding-top: 2.5rem; }
.wm-hero__telefon {
  pointer-events: none;
  height: 60svh;
  width: auto;
  max-width: none;
  filter: drop-shadow(0 24px 70px rgb(var(--brand-rgb) / 0.35));
}

/* Sekcje: Funkcje (pas), Jak zacząć, FAQ */
.wm-sekcja { scroll-margin-top: 5rem; }
.wm-sekcja__wnetrze { padding-top: 4rem; padding-bottom: 4rem; }
.wm-tytul-sekcji { text-align: center; font-size: 1.5rem; line-height: 2rem; font-weight: 600; letter-spacing: -0.025em; }

/* Pasy „Co potrafi": obraz + tekst, na telefonie obraz zawsze pod tekstem */
.wm-pasy { display: flex; flex-direction: column; gap: 5rem; }
.wm-pas,
.wm-smaczki { display: grid; align-items: center; gap: 2.5rem; }
.wm-obraz {
  order: 2;
  margin-left: auto;
  margin-right: auto;
  width: min(62vw, 280px);
  filter: drop-shadow(0 18px 50px rgb(var(--brand-rgb) / 0.22));
}
.wm-pas__tekst { order: 1; text-align: center; }
.wm-pas__tytul { font-size: 1.5rem; line-height: 2rem; font-weight: 600; letter-spacing: -0.025em; }
.wm-pas__opis {
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
  max-width: 28rem;
  font-size: 1rem;
  line-height: 1.625;
  color: var(--fg-muted);
}

/* „Smaczki" — dwie karty obok ekranu ustawień */
.wm-smaczki { margin-top: 5rem; }
.wm-smaczki__tekst { order: 1; }
.wm-smaczki__tytul { text-align: center; font-size: 1.5rem; line-height: 2rem; font-weight: 600; letter-spacing: -0.025em; }
.wm-smaczki__podtytul { margin-top: 0.5rem; text-align: center; font-size: 0.875rem; line-height: 1.25rem; color: var(--fg-subtle); }
.wm-smaczki__karty { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.wm-karta { border: 1px solid var(--line); border-radius: 1rem; background-color: var(--surface); padding: 1.5rem; }
.wm-karta__ikona {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background-color: var(--brand-soft);
  color: var(--brand-fg);
}
.wm-karta__tytul { margin-top: 1rem; font-size: 1rem; line-height: 1.5rem; font-weight: 600; }
.wm-karta__opis { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.625; color: var(--fg-muted); }

/* Jak zacząć */
.wm-kroki { margin-left: auto; margin-right: auto; margin-top: 2.5rem; display: flex; max-width: 42rem; flex-direction: column; gap: 1.5rem; }
.wm-krok { display: flex; gap: 1.25rem; }
.wm-krok__nr {
  display: flex;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: var(--brand-soft);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--brand-fg);
}
.wm-krok__tytul { font-size: 1rem; line-height: 1.5rem; font-weight: 600; }
.wm-krok__opis { margin-top: 0.375rem; font-size: 0.875rem; line-height: 1.625; color: var(--fg-muted); }

/* FAQ (natywne <details>) */
.wm-faq {
  margin-left: auto;
  margin-right: auto;
  margin-top: 2.5rem;
  max-width: 42rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background-color: var(--surface);
}
.wm-faq > * + * { border-top: 1px solid var(--line); }
.wm-faq__pozycja { padding: 1rem 1.5rem; }
.wm-faq__pytanie { cursor: pointer; list-style-type: none; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.wm-faq__pytanie::marker,
.wm-faq__pytanie *::marker,
.wm-faq__pytanie::-webkit-details-marker { display: none; }
.wm-faq__wiersz { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.wm-faq__plus { color: var(--fg-subtle); transition: transform 0.15s var(--ease-std); }
.wm-faq__pozycja[open] .wm-faq__plus { transform: rotate(45deg); }
.wm-faq__odpowiedz { padding-bottom: 0.5rem; padding-top: 0.75rem; font-size: 0.875rem; line-height: 1.625; color: var(--fg-muted); }

/* Stopka */
.wm-stopka { border-top: 1px solid var(--line); }
.wm-stopka__wnetrze {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--fg-subtle);
}
.wm-stopka__zastrzezenie { display: block; font-size: 0.75rem; line-height: 1rem; color: var(--fg-subtle); }
.wm-stopka__linki { display: flex; align-items: center; gap: 1.5rem; }
.wm-stopka__link {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 0.15s;
  transition-timing-function: var(--ease-std);
}
.wm-stopka__link:hover { color: var(--fg); }

@media (min-width: 640px) {
  .wm-menu { display: flex; }
  .wm-naglowek__prawa { gap: 1.25rem; }
  .wm-hero__tytul { font-size: 3rem; line-height: 1; }
  .wm-hero__opis { font-size: 1.125rem; line-height: 1.625; }
  .wm-hero__rozwiniecie { display: inline; }
  .wm-sekcja__wnetrze { padding-top: 5rem; padding-bottom: 5rem; }
  .wm-tytul-sekcji,
  .wm-pas__tytul,
  .wm-smaczki__tytul { font-size: 1.875rem; line-height: 2.25rem; }
  .wm-pasy { gap: 7rem; }
  .wm-smaczki { margin-top: 7rem; }
  .wm-stopka__wnetrze { flex-direction: row; }
  .wm-stopka__zastrzezenie { display: inline; }
  .wm-stopka__zastrzezenie::before { content: "·"; margin-left: 0.5rem; margin-right: 0.5rem; }
}
@media (min-width: 1024px) {
  .wm-hero__wnetrze { flex-direction: row; align-items: center; gap: 2.5rem; }
  .wm-hero__tekst { flex: 1 1 0%; align-items: flex-start; padding-left: 0; padding-right: 0; padding-top: 0; text-align: left; }
  .wm-hero__media { margin-top: 0; height: 100%; flex: 1 1 0%; align-items: flex-start; padding-top: 4rem; }
  .wm-hero__telefon { height: 112%; }
  .wm-pas,
  .wm-smaczki { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; }
  .wm-obraz { width: 330px; }
  .wm-obraz--lewo, .wm-pas__tekst--lewo { order: 1; }
  .wm-obraz--prawo, .wm-pas__tekst--prawo, .wm-smaczki__tekst { order: 2; }
  .wm-pas__tekst, .wm-smaczki__tytul, .wm-smaczki__podtytul { text-align: left; }
  .wm-pas__opis { margin-left: 0; margin-right: 0; }
}


/* ==========================================================================
   31. PANEL ADMINA — /admin (admin.php + js/admin.js)
   Układ samodzielny (bez poświaty kursora). Kolejność: szkielet → logowanie →
   pasek zakładek → lista zgłoszeń i karty → okna → poczekalnia → ustawienia →
   wybór daty „kołem" → progi responsywności.
   ========================================================================== */
.adm { position: relative; display: flex; min-height: 100vh; flex-direction: column; background-color: var(--bg); }
.adm__tresc { flex: 1 1 0%; }
body.adm-blokada { overflow: hidden; }   /* otwarte okno — tło się nie przewija */

.adm-naglowek {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--line);
  background-color: rgb(var(--bg-rgb) / 0.8);
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.adm-naglowek__wnetrze { display: flex; height: 4rem; align-items: center; gap: 0.5rem; }
.adm-naglowek__nazwa { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; letter-spacing: -0.025em; color: var(--fg); }
.adm-naglowek__znacznik {
  border: 1px solid var(--line);
  border-radius: 9999px;
  padding: 0.125rem 0.5rem;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--fg-subtle);
}
.adm-sprawdzam { padding-top: 5rem; padding-bottom: 5rem; }
.adm-info { font-size: 0.875rem; line-height: 1.25rem; color: var(--fg-subtle); }

/* Wspólne: obrys fokusu, przyciski-ikony, czerwone warianty przycisków */
.adm-zakladka:focus-visible, .adm-kontakt:focus-visible, .adm-kontakt-tel:focus-visible,
.adm-karta__szczegoly:focus-visible, .adm-zamknij:focus-visible, .adm-wybor__strzalka:focus-visible,
.adm-wybor__dzien:focus-visible, .adm-wybor__godzina:focus-visible, .adm-przedzial__usun:focus-visible,
.adm-dodaj:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgb(var(--brand-rgb) / 0.5);
}
.btn--ikona { padding-left: 0; padding-right: 0; }
.btn--czerwony { border-color: rgb(var(--blad-rgb) / 0.4); color: var(--blad-jasny); }
.btn--czerwony:hover { border-color: rgb(var(--blad-rgb) / 0.4); background-color: rgb(var(--blad-rgb) / 0.1); }
.btn--ghost-czerwony { color: var(--blad-jasny); }
.btn--ghost-czerwony:hover { color: var(--blad-najjasniejszy); }
.adm-zamknij {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 9999px;
  background-color: rgb(var(--white-rgb) / 0.06);
  color: var(--fg);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
  transition-duration: 0.15s;
  transition-timing-function: var(--ease-std);
}
.adm-zamknij:hover { background-color: rgb(var(--white-rgb) / 0.12); }
.adm-tekst-blad { color: var(--blad); }

/* --- Logowanie --- */
.adm-logowanie { display: flex; min-height: 70vh; align-items: center; justify-content: center; padding-top: 4rem; padding-bottom: 4rem; }
.adm-logowanie__karta {
  width: 100%;
  max-width: 24rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background-color: var(--surface);
  padding: 1.5rem;
}
.adm-logowanie__tytul { font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; letter-spacing: -0.025em; color: var(--fg); }
.adm-logowanie__opis { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--fg-muted); }
.adm-logowanie__blokada { margin-top: 0.75rem; font-size: 13px; line-height: 1.375; color: var(--fg-muted); }
.adm-logowanie__przycisk { margin-top: 1.25rem; width: 100%; }

/* --- Panel: zakładki (desktop) i dolny pasek (telefon) --- */
.adm-panel { padding-top: 1.5rem; padding-bottom: 7rem; }
.adm-pasek { margin-bottom: 2rem; display: none; }
.adm-zakladki { display: inline-flex; border: 1px solid var(--line); border-radius: 9999px; background-color: var(--surface); padding: 0.25rem; }
.adm-zakladka {
  border-radius: 9999px;
  padding: 0.375rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--fg-muted);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 0.15s;
  transition-timing-function: var(--ease-std);
}
.adm-zakladka:hover { color: var(--fg); }
.adm-zakladka[aria-selected="true"] { background-color: var(--brand); color: var(--white); }
.adm-dol {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  border-top: 1px solid var(--line);
  background-color: rgb(var(--bg-rgb) / 0.9);
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.adm-dol__wnetrze { display: flex; }
.adm-dol__przycisk {
  position: relative;
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-subtle);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 0.15s;
  transition-timing-function: var(--ease-std);
}
.adm-dol__przycisk:hover { color: var(--fg); }
.adm-dol__przycisk[aria-current="page"] { color: var(--brand-fg); }
.adm-dol__przycisk:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: inset 0 0 0 2px rgb(var(--brand-rgb) / 0.5); }
.adm-dol__wskaznik { position: absolute; left: 1.25rem; right: 1.25rem; top: 0; height: 0.125rem; border-radius: 9999px; background-color: var(--brand); }

/* --- Nagłówek widoku + stany listy --- */
.adm-glowa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.adm-glowa__tytul { font-size: 1.5rem; line-height: 2rem; font-weight: 600; letter-spacing: -0.025em; color: var(--fg); }
.adm-glowa__opis { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--fg-muted); }
.adm-odswiez { width: 2.5rem; padding-left: 0; padding-right: 0; }
.adm-odswiez__napis { display: none; }
.adm-lista { margin-top: 2rem; }
.adm-blad { border: 1px solid var(--line); border-radius: 1rem; background-color: var(--surface); padding: 1.5rem; }
.adm-blad__tekst { font-size: 0.875rem; line-height: 1.25rem; color: var(--fg-muted); }
.adm-blad__ponow { margin-top: 1rem; }
.adm-pusto { border: 1px solid var(--line); border-radius: 1rem; background-color: var(--surface); padding: 2rem; text-align: center; }
.adm-pusto__opis { margin-left: auto; margin-right: auto; margin-top: 0.5rem; max-width: 28rem; font-size: 13px; color: var(--fg-subtle); }
.adm-grupy > * + * { margin-top: 2.5rem; }
.adm-grupa__tytul { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-subtle); }
.adm-grupa__licznik { margin-left: 0.25rem; color: rgb(139 139 150 / 0.7); }
.adm-grupa__karty { margin-top: 1rem; }
.adm-grupa__karty > * + *, .adm-oczekujacy > * + * { margin-top: 1rem; }

/* --- Karta zgłoszenia / oczekującego --- */
.adm-karta { border: 1px solid var(--line); border-radius: 1rem; background-color: var(--surface); padding: 1.25rem; }
.adm-karta__glowa { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.adm-karta__glowa--zawijana { flex-wrap: wrap; }
.adm-karta__kto { min-width: 0; }
.adm-karta__imie { font-size: 1rem; line-height: 1.5rem; font-weight: 600; letter-spacing: -0.025em; color: var(--fg); }
.adm-karta__firma { margin-top: 0.125rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--fg-muted); }
.adm-karta__kto .adm-karta__imie, .adm-karta__kto .adm-karta__firma { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-karta__znaczki { display: flex; flex-shrink: 0; align-items: center; gap: 0.5rem; }
.adm-karta__szczegoly,
.adm-kontakt {
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background-color: var(--bg-elevated);
  color: var(--fg-muted);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 0.15s;
  transition-timing-function: var(--ease-std);
}
.adm-karta__szczegoly { display: none; height: 2.25rem; }
.adm-karta__szczegoly-napis { display: none; }
.adm-karta__szczegoly:hover, .adm-kontakt:hover, .adm-kontakt-tel:hover { border-color: rgb(var(--brand-rgb) / 0.5); color: var(--fg); }
.adm-status { white-space: nowrap; border: 1px solid; border-radius: 9999px; padding: 0.25rem 0.625rem; font-size: 11px; font-weight: 500; }
.adm-status--oczekuje { border-color: rgb(var(--uwaga-rgb) / 0.3); background-color: rgb(var(--uwaga-rgb) / 0.1); color: var(--uwaga-fg); }
.adm-status--inny-termin { border-color: rgb(var(--brand-rgb) / 0.3); background-color: rgb(var(--brand-rgb) / 0.1); color: var(--brand-fg); }
.adm-status--potwierdzone { border-color: rgb(var(--tak-rgb) / 0.3); background-color: rgb(var(--tak-rgb) / 0.1); color: var(--tak-fg); }
.adm-status--odrzucone { border-color: var(--line); background-color: rgb(var(--white-rgb) / 0.04); color: var(--fg-subtle); }

.adm-kontakty { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.adm-kontakt { display: inline-flex; width: 2.5rem; height: 2.5rem; }
.adm-kontakt__tekst { display: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-ikona-stala { flex-shrink: 0; }
.adm-kontakt-tel {
  display: inline-flex;
  min-height: 2.5rem;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background-color: var(--bg-elevated);
  padding: 0.5rem 0.75rem;
  font-size: 13px;
  color: var(--fg-muted);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 0.15s;
  transition-timing-function: var(--ease-std);
}
.adm-kontakt-tel__numer { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-karta__opis { margin-top: 0.75rem; display: none; white-space: pre-line; font-size: 0.875rem; line-height: 1.625; color: var(--fg-muted); }
.adm-karta__opis--zawsze { display: block; }
.adm-termin { margin-top: 1rem; border: 1px solid var(--line); border-radius: 0.75rem; background-color: var(--bg-elevated); padding: 0.75rem 1rem; }
.adm-termin__wiersz { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--fg); }
.adm-termin__ikona { color: var(--fg-subtle); }
.adm-termin__data { font-weight: 500; }
.adm-termin__uwaga { margin-top: 0.5rem; font-size: 13px; line-height: 1.375; color: var(--fg-subtle); }
.adm-karta__zgloszono { margin-top: 0.75rem; font-size: 12px; color: var(--fg-subtle); }
.adm-karta__blad { margin-top: 0.75rem; font-size: 13px; line-height: 1.375; color: var(--blad-jasny); }

/* Akcje karty */
.adm-akcje { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.adm-akcje__info { margin-bottom: 0.75rem; font-size: 13px; line-height: 1.375; color: var(--fg-muted); }
.adm-akcje__mobile > * + * { margin-top: 0.5rem; }
.adm-akcje__para { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.adm-akcje__desktop { display: none; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.adm-akcje__rzad, .adm-odrzuc { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.adm-odrzuc__pytanie { font-size: 0.875rem; line-height: 1.25rem; color: var(--fg); }
.adm-akcje__link { margin-top: 0.75rem; border-top: 1px solid rgb(var(--white-rgb) / 0.6); padding-top: 0.75rem; }
.adm-akcje__podpowiedz { margin-top: 0.5rem; font-size: 12px; line-height: 1.375; color: var(--fg-subtle); }
.adm-link__blad { margin-top: 0.5rem; overflow-wrap: break-word; font-size: 13px; line-height: 1.375; color: var(--blad-jasny); }
.adm-usun > * + * { margin-top: 0.75rem; }
.adm-usun__przyciski { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }

/* --- Okna (szczegóły, inny termin, godziny dnia) --- */
.adm-okno {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(var(--bg-rgb) / 0.8);
  padding: 1rem;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.adm-okno--arkusz { align-items: flex-end; padding: 0; }
.adm-okno__panel {
  max-height: 85vh;
  width: 100%;
  max-width: 32rem;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background-color: var(--bg-elevated);
  padding: 1.5rem;
}
.adm-okno__panel--waski { max-width: 28rem; }
.adm-okno__arkusz {
  max-height: 88vh;
  width: 100%;
  max-width: 32rem;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
  background-color: var(--bg-elevated);
  padding: 1.25rem;
  padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
  animation: sheetUp 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.adm-okno__glowa { margin-bottom: 1rem; display: flex; align-items: center; justify-content: space-between; }
.adm-okno__tytul { font-size: 1rem; line-height: 1.5rem; font-weight: 600; letter-spacing: -0.025em; color: var(--fg); }
.adm-okno__komunikat { min-height: 1.25rem; }
.adm-okno__akcje { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.adm-szczegoly__glowa { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.adm-szczegoly__imie { font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; letter-spacing: -0.025em; color: var(--fg); }
.adm-szczegoly__firma { margin-top: 0.125rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--fg-muted); }
.adm-szczegoly__lista { margin-top: 1.5rem; font-size: 0.875rem; line-height: 1.25rem; }
.adm-szczegoly__lista > * + * { margin-top: 1rem; }
.adm-wiersz { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 0.25rem; }
.adm-wiersz__etykieta { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-subtle); }
.adm-wiersz__wartosc { overflow-wrap: break-word; color: var(--fg); }
.adm-wiersz__wartosc--przygaszona { color: var(--fg-subtle); }
.adm-wiersz__link { color: var(--brand-fg); text-underline-offset: 4px; }
.adm-wiersz__link--dlugi { word-break: break-all; }
.adm-wiersz__link:hover { text-decoration-line: underline; }
.adm-wiersz__opis { white-space: pre-line; line-height: 1.625; }
.adm-wiersz__brak { color: var(--fg-subtle); }

/* Wybór nowego terminu (kalendarz w oknie) */
.adm-wybor__info { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--fg-subtle); }
.adm-wybor__komunikat { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--fg-muted); }
.adm-wybor__miesiac { margin-top: 1rem; }
.adm-wybor__nawigacja { display: flex; align-items: center; justify-content: space-between; }
.adm-wybor__strzalka {
  display: flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  color: var(--fg-muted);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 0.15s;
  transition-timing-function: var(--ease-std);
}
.adm-wybor__strzalka:hover { background-color: rgb(var(--white-rgb) / 0.07); color: var(--fg); }
.adm-wybor__strzalka:disabled { pointer-events: none; opacity: 0.3; }
.adm-wybor__nazwa { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--fg); }
.adm-wybor__dni-tygodnia,
.adm-wybor__dni { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); place-items: center; gap: 0.125rem; }
.adm-wybor__dni-tygodnia { margin-top: 0.75rem; }
.adm-wybor__dni { margin-top: 0.25rem; }
.adm-wybor__dzien-tygodnia { font-size: 0.75rem; line-height: 1rem; color: var(--fg-subtle); }
.adm-wybor__dzien {
  position: relative;
  display: flex;
  aspect-ratio: 1 / 1;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 0.15s;
  transition-timing-function: var(--ease-std);
}
.adm-wybor__dzien--dostepny { color: var(--fg); }
.adm-wybor__dzien--dostepny:hover { background-color: rgb(var(--white-rgb) / 0.07); }
.adm-wybor__dzien--wybrany { background-color: var(--brand); font-weight: 500; color: var(--white); }
.adm-wybor__dzien--niedostepny { color: rgb(139 139 150 / 0.4); }
.adm-wybor__dzien--niedostepny:disabled { pointer-events: none; }
.adm-wybor__kropka {
  position: absolute;
  bottom: 0.25rem;
  left: 50%;
  width: 0.25rem;
  height: 0.25rem;
  transform: translate(-50%, 0);
  border-radius: 9999px;
  background-color: var(--brand);
}
.adm-wybor__wybrany { margin-top: 1rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--fg); }
.adm-wybor__godziny { margin-top: 0.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.adm-wybor__godzina {
  height: 2.5rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background-color: var(--surface);
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--fg-muted);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 0.15s;
  transition-timing-function: var(--ease-std);
}
.adm-wybor__godzina:hover { border-color: rgb(var(--brand-rgb) / 0.5); color: var(--fg); }
.adm-wybor__godzina--wybrana,
.adm-wybor__godzina--wybrana:hover { border-color: var(--brand); background-color: var(--brand); font-weight: 500; color: var(--white); }
.adm-wybor__uwaga { margin-top: 0.75rem; font-size: 13px; line-height: 1.375; color: var(--fg-muted); }
.adm-wybor__blad { margin-top: 0.75rem; font-size: 13px; line-height: 1.375; color: var(--blad-jasny); }
.adm-wybor__przyciski { margin-top: 1rem; display: flex; align-items: center; justify-content: center; gap: 0.75rem; }

/* --- Ustawienia --- */
.adm-ustawienia > * + * { margin-top: 2rem; }
.adm-ustawienia__info { margin-top: 2rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--fg-subtle); }
.adm-ustawienia__blad { margin-top: 2rem; border: 1px solid var(--line); border-radius: 1rem; background-color: var(--surface); padding: 1.5rem; }
.adm-sekcja { border: 1px solid var(--line); border-radius: 1rem; background-color: var(--surface); padding: 1.5rem; }
.adm-sekcja__tytul { font-size: 1rem; line-height: 1.5rem; font-weight: 600; letter-spacing: -0.025em; color: var(--fg); }
.adm-sekcja__opis { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--fg-muted); }
.adm-sekcja__odstep { margin-top: 1.5rem; }
.adm-sekcja__podsekcja { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 1.5rem; }
.adm-sekcja__etykieta { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--fg); }
.adm-opcjonalne { font-weight: 400; color: var(--fg-subtle); }
.adm-podpowiedz { margin-top: 0.25rem; font-size: 13px; line-height: 1.375; color: var(--fg-subtle); }
.adm-blad-pola { margin-top: 0.5rem; font-size: 13px; color: var(--blad); }
.adm-przelacznik { margin-top: 1.25rem; display: flex; gap: 0.5rem; }
.adm-opcja {
  height: 2.5rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background-color: var(--bg-elevated);
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--fg-muted);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 0.15s;
  transition-timing-function: var(--ease-std);
}
.adm-przelacznik .adm-opcja { flex: 1 1 0%; }
.adm-opcja:hover { border-color: rgb(var(--brand-rgb) / 0.5); color: var(--fg); }
.adm-opcja[aria-checked="true"],
.adm-opcja[aria-checked="true"]:hover { border-color: var(--brand); background-color: var(--brand); color: var(--white); }
.adm-ostrzezenie {
  margin-top: 0.75rem;
  border: 1px solid rgb(var(--uwaga-rgb) / 0.3);
  border-radius: 0.5rem;
  background-color: rgb(var(--uwaga-rgb) / 0.1);
  padding: 0.625rem 0.875rem;
  font-size: 13px;
  line-height: 1.375;
  color: var(--uwaga-fg);
}
/* Kontrolki ustawień (przycisk daty, liczby, listy godzin) — jak pola formularza */
.adm-kontrolka {
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background-color: var(--bg-elevated);
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--fg);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 0.15s;
  transition-timing-function: var(--ease-std);
}
.adm-kontrolka:focus-visible,
.adm-dzien__edytuj:focus-visible {
  border-color: rgb(var(--brand-rgb) / 0.6);
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgb(var(--brand-rgb) / 0.3);
}
.adm-kontrolka[aria-invalid="true"] { border-color: rgb(var(--blad-rgb) / 0.6); }
.adm-data {
  margin-top: 0.5rem;
  display: flex;
  height: 2.75rem;
  width: 100%;
  max-width: 16rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  text-align: left;
}
.adm-data__pusta, .adm-data__ikona { color: var(--fg-subtle); }
.adm-data__ikona { flex-shrink: 0; }
.adm-liczby { margin-top: 1.5rem; display: grid; gap: 1.25rem; }
.adm-liczba { margin-top: 0.5rem; height: 2.75rem; width: 100%; }
.adm-dni { margin-top: 0.75rem; }
.adm-dni > * + * { margin-top: 0.5rem; }
.adm-dzien { border: 1px solid var(--line); border-radius: 0.75rem; background-color: rgb(var(--bg-elevated-rgb) / 0.4); padding: 0.75rem 0.875rem; }
.adm-dzien--blad { border-color: rgb(var(--blad-rgb) / 0.6); }
.adm-dzien__wiersz { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.75rem; row-gap: 0.5rem; }
.adm-dzien__nazwa { order: 1; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--fg); }
.adm-dzien__godziny { order: 3; width: 100%; font-size: 0.875rem; line-height: 1.25rem; color: var(--fg-muted); }
.adm-dzien__godziny--zamkniety { color: var(--fg-subtle); }
.adm-dzien__edytuj {
  order: 2;
  margin-left: auto;
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background-color: var(--bg-elevated);
  color: var(--fg-muted);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 0.15s;
  transition-timing-function: var(--ease-std);
}
.adm-dzien__edytuj:hover { border-color: rgb(var(--brand-rgb) / 0.5); color: var(--fg); }
.adm-sloty { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.adm-zapis { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.adm-zapis__status { display: flex; min-height: 1.75rem; align-items: center; font-size: 0.875rem; line-height: 1.25rem; }
.adm-zapis__trwa { color: var(--fg-muted); }
.adm-zapis__auto { color: var(--fg-subtle); }
.adm-zapis__ok { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 500; color: var(--brand-fg); }
.adm-zapis__domyslne { margin-left: auto; }
/* Okno godzin dnia */
.adm-przedzialy { margin-top: 1.25rem; }
.adm-przedzialy > * + * { margin-top: 0.75rem; }
.adm-przedzial { display: flex; align-items: center; gap: 0.5rem; }
.adm-przedzial__zakres { display: flex; min-width: 0; flex: 1 1 0%; align-items: center; gap: 0.375rem; }
.adm-przedzial__pole { position: relative; min-width: 0; flex: 1 1 0%; }
.adm-select { height: 2.5rem; width: 100%; -webkit-appearance: none; appearance: none; padding-right: 2.25rem; }
.adm-select__strzalka { pointer-events: none; position: absolute; right: 0.625rem; top: 50%; transform: translate(0, -50%); color: var(--fg-subtle); }
.adm-przedzial__myslnik { flex-shrink: 0; color: var(--fg-subtle); }
.adm-przedzial__usun {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background-color: var(--bg-elevated);
  color: var(--fg-muted);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 0.15s;
  transition-timing-function: var(--ease-std);
}
.adm-przedzial__usun:hover { border-color: rgb(var(--blad-rgb) / 0.5); color: var(--blad-jasny); }
.adm-dodaj {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background-color: var(--bg-elevated);
  padding: 0.5rem 0.75rem;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-muted);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 0.15s;
  transition-timing-function: var(--ease-std);
}
.adm-dodaj:hover { border-color: rgb(var(--brand-rgb) / 0.5); color: var(--fg); }
.adm-okno__blad { margin-top: 0.75rem; font-size: 13px; line-height: 1.375; color: var(--blad); }

/* --- Wybór daty „kołem" (dzień / miesiąc / rok) --- */
.adm-kolo-tlo { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center; }
.adm-kolo-tlo__zaciemnienie { position: absolute; inset: 0; background-color: rgb(var(--bg-rgb) / 0.7); animation: backdropIn 0.28s ease-out both; }
.adm-kolo-arkusz {
  position: relative;
  width: 100%;
  max-width: 28rem;
  border: 1px solid var(--line);
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
  background-color: var(--bg-elevated);
  padding: 1.25rem;
  padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  animation: sheetUp 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.adm-kolo-arkusz__glowa { display: flex; align-items: center; justify-content: space-between; }
.adm-kolo-arkusz__tytul { font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: var(--fg); }
.adm-kola { margin-top: 1rem; display: flex; gap: 0.5rem; }
.adm-kolo { position: relative; flex: 1 1 0%; height: 200px; }
.adm-kolo__lista {
  height: 100%;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  outline: 2px solid transparent;
  outline-offset: 2px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.adm-kolo__lista::-webkit-scrollbar { display: none; }
.adm-kolo__bufor { height: 80px; }
.adm-kolo__pozycja {
  display: flex;
  height: 40px;
  scroll-snap-align: center;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1.5rem;
  font-variant-numeric: tabular-nums;
  color: var(--fg-subtle);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 0.15s;
  transition-timing-function: var(--ease-std);
}
.adm-kolo__pozycja[aria-selected="true"] { font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; color: var(--fg); }
.adm-kolo__pasek {
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2.5rem;
  transform: translate(0, -50%);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background-color: rgb(var(--white-rgb) / 0.04);
}
.adm-kolo__cien { pointer-events: none; position: absolute; left: 0; right: 0; height: 80px; }
.adm-kolo__cien--gora { top: 0; background: linear-gradient(to bottom, var(--bg-elevated), transparent); }
.adm-kolo__cien--dol { bottom: 0; background: linear-gradient(to top, var(--bg-elevated), transparent); }
.adm-kolo-arkusz__przyciski { margin-top: 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }

@media (min-width: 640px) {
  .adm-wiersz { grid-template-columns: 130px 1fr; gap: 0.75rem; }
  .adm-okno--arkusz { align-items: center; padding: 1rem; }
  .adm-okno__arkusz { animation: none; border-radius: 1rem; padding: 1.5rem; }
  .adm-okno__akcje { display: flex; align-items: center; justify-content: flex-end; }
  .adm-wybor__dni-tygodnia, .adm-wybor__dni { gap: 0.25rem; }
  .adm-wybor__godziny { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .adm-usun { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
  .adm-usun > * + * { margin-top: 0; }
  .adm-usun__przyciski { display: flex; align-items: center; }
  .adm-kontrolka { font-size: 15px; }
  .adm-liczby { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-dzien__nazwa { width: 6.5rem; flex-shrink: 0; }
  .adm-dzien__godziny { order: 2; width: auto; min-width: 0; flex: 1 1 0%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .adm-dzien__edytuj { order: 3; margin-left: 0; }
}
@media (min-width: 768px) {
  .adm-logowanie__karta { padding: 2rem; }
  .adm-panel { padding-top: 2rem; padding-bottom: 3.5rem; }
  .adm-pasek { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
  .adm-dol { display: none; }
  .adm-odswiez { width: auto; padding-left: 0.875rem; padding-right: 0.875rem; }
  .adm-odswiez__napis { display: inline; }
  .adm-karta { padding: 1.5rem; }
  .adm-karta__szczegoly { display: inline-flex; width: auto; justify-content: flex-start; gap: 0.375rem; padding-left: 0.625rem; padding-right: 0.625rem; font-size: 13px; }
  .adm-karta__szczegoly-napis { display: inline; }
  .adm-kontakt { width: auto; min-width: 0; max-width: 100%; justify-content: flex-start; gap: 0.5rem; padding-left: 0.75rem; padding-right: 0.75rem; font-size: 13px; }
  .adm-kontakt--szczegoly { display: none; }
  .adm-kontakt__tekst { display: inline; }
  .adm-karta__opis { display: block; }
  .adm-akcje__mobile { display: none; }
  .adm-akcje__desktop { display: flex; }
  .adm-okno__panel { padding: 1.75rem; }
  .adm-sekcja { padding: 1.75rem; }
}


/* @@SEKCJE@@ — kolejne sekcje dopisywane poniżej */


/* ==========================================================================
   32. OFERTA „STRONA ZA 1000 ZŁ" — /strona-za-1000 (strona-za-1000.php)
   Landing z reklam FB, mobile-first: nagłówek → film (pion 9:16) + „w skrócie" →
   portfolio → formularz z /umow (js/rezerwacja.js, .rez--osadzony). Odznaka nad
   nagłówkiem = .hero__odznaka ze strony głównej; zaślepka filmu = sekcja 29.
   ========================================================================== */
.oferta-hero { position: relative; overflow: hidden; }
.oferta-hero__poswiata {
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  top: -13rem;
  height: 26rem;
  background: radial-gradient(22rem 13rem at 50% 50%, rgb(var(--brand-rgb) / 0.18), transparent);
}
.oferta-hero__wnetrze {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2.5rem;
  padding-bottom: 2rem;
  text-align: center;
}
.oferta-hero__tytul {
  margin-top: 1.25rem;
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--fg);
  text-wrap: balance;
  animation: fadeUp 0.6s ease-out 0.1s both;
}
.oferta-hero__cena { display: block; }
.oferta-hero__wskazowka {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 15px;
  line-height: 1.5rem;
  color: var(--fg-muted);
  animation: fadeUp 0.6s ease-out 0.28s both;
}
.oferta-hero__wskazowka a {
  color: var(--fg);
  text-decoration-line: underline;
  text-decoration-color: rgb(var(--white-rgb) / 0.3);
  text-underline-offset: 4px;
  transition: text-decoration-color 0.15s var(--ease-std);
}
.oferta-hero__wskazowka a:hover { text-decoration-color: currentColor; }
.oferta-hero__strzalka { flex-shrink: 0; color: var(--brand-fg); animation: bounce 1s ease 1s 4; }

/* Film + „w skrócie": na telefonie jeden pod drugim, od 1024 px obok siebie */
.oferta-film { padding-bottom: 4.5rem; }
.oferta-film__siatka { display: grid; gap: 2.5rem; }
.oferta-film__ramka {
  position: relative;
  justify-self: center;
  width: min(100%, calc(72vh * 9 / 16));
  width: min(100%, calc(72svh * 9 / 16));
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background-color: var(--black);
  box-shadow: var(--shadow-elevated), 0 0 80px -20px rgb(var(--brand-rgb) / 0.35);
}
.oferta-film__media { width: 100%; height: 100%; object-fit: contain; }

.oferta-skrot { width: 100%; max-width: 40rem; justify-self: center; }
.oferta-skrot__tytul {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fg);
  text-wrap: balance;
}
.oferta-skrot__lista { margin-top: 1.25rem; display: grid; gap: 0.75rem; }
.oferta-skrot__punkt {
  display: flex;
  gap: 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background-color: var(--surface);
  padding: 1.125rem 1.25rem;
}
.oferta-skrot__ikona {
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background-color: rgb(var(--brand-rgb) / 0.12);
  color: var(--brand-fg);
}
.oferta-skrot__naglowek { font-size: 15px; line-height: 1.375; font-weight: 600; color: var(--fg); }
.oferta-skrot__tekst { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.625; color: var(--fg-muted); }
.oferta-skrot__linki { margin-top: 0.25rem; display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.75rem; }
.oferta-skrot__link {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--brand-fg);
}
.oferta-skrot__link:hover { text-decoration-line: underline; }
.oferta-skrot__kotwica {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--brand-fg);
}
.oferta-skrot__kotwica:hover { text-decoration-line: underline; }
.oferta-skrot__polecajacy { font-size: 13px; color: var(--fg-subtle); }
.oferta-skrot__zakres {
  margin-top: 0.75rem;
  display: grid;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--fg-muted);
}
.oferta-skrot__zakres li { display: flex; align-items: flex-start; gap: 0.5rem; }
.oferta-skrot__zakres-ikona { flex-shrink: 0; margin-top: 0.125rem; color: var(--brand-fg); }
.oferta-dokumenty { margin-top: 1.25rem; }
.oferta-dokumenty__tytul { font-size: 0.875rem; line-height: 1.25rem; color: var(--fg-muted); }
.oferta-dokumenty__linki { margin-top: 0.625rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.oferta-skrot__cta { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.oferta-skrot__mikro { margin-top: 0.75rem; font-size: 13px; line-height: 1.25rem; color: var(--fg-subtle); }

/* Portfolio (zaślepka do czasu realizacji) */
.oferta-portfolio { padding-top: 5rem; padding-bottom: 5rem; }
.oferta-portfolio__zaslepka {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  border: 1px dashed var(--line-strong);
  border-radius: 1rem;
  padding: 3.5rem 1.5rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--fg-subtle);
}

/* Formularz: licznik wolnych miejsc + osadzony formularz z /umow */
.oferta-formularz { padding-top: 5rem; padding-bottom: 5rem; }
.rez--osadzony { padding-top: 0; padding-bottom: 0; }
.oferta-miejsca { margin-top: 1.75rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.oferta-miejsca__paski { display: flex; gap: 0.5rem; }
.oferta-miejsca__pasek {
  width: 3.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: rgb(var(--white-rgb) / 0.12);
}
.oferta-miejsca__pasek--wolne {
  background-color: var(--brand);
  box-shadow: 0 0 14px rgb(var(--brand-rgb) / 0.6);
}
.oferta-miejsca__opis { font-size: 0.875rem; line-height: 1.25rem; color: var(--fg-muted); }
.oferta-miejsca__opis strong { font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }

/* Wybór tematu nad formularzem (radio → data-zrodlo-pole w js/rezerwacja.js) */
.oferta-temat { margin-top: 2rem; text-align: center; }
.oferta-temat__legenda { width: 100%; font-size: 0.875rem; line-height: 1.25rem; color: var(--fg-muted); }
.oferta-temat__opcje { margin-top: 0.75rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.oferta-temat__opcja { position: relative; cursor: pointer; }
.oferta-temat__opcja input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.oferta-temat__opcja span {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 9999px;
  background-color: rgb(var(--white-rgb) / 0.04);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fg-muted);
  transition: border-color 0.15s var(--ease-std), background-color 0.15s var(--ease-std), color 0.15s var(--ease-std);
}
.oferta-temat__opcja:hover span { border-color: var(--line-strong); color: var(--fg); }
.oferta-temat__opcja input:checked + span {
  border-color: rgb(var(--brand-rgb) / 0.6);
  background-color: var(--brand-soft);
  color: var(--fg);
}
.oferta-temat__opcja input:focus-visible + span { box-shadow: 0 0 0 2px rgb(var(--brand-rgb) / 0.5); }

/* Pełny pakiet — karta w języku pakietu z cennika strony głównej (sekcja 21) */
.oferta-pakiet { padding-top: 5rem; }
.oferta-pakiet__karta {
  margin-left: auto;
  margin-right: auto;
  max-width: 48rem;
  border: 1px solid rgb(var(--brand-rgb) / 0.35);
  border-radius: 1rem;
  background-color: rgb(var(--brand-rgb) / 0.08);
  padding: 1.75rem;
}
.oferta-pakiet__glowa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.oferta-pakiet__glowa .kicker { color: var(--brand-fg); }
.oferta-pakiet__dostepnosc {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 9999px;
  background-color: rgb(var(--white-rgb) / 0.06);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  color: var(--fg-muted);
}
.oferta-pakiet__dostepnosc--komplet { color: var(--fg-subtle); }
.oferta-pakiet__tytul {
  margin-top: 1rem;
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fg);
  text-wrap: balance;
}
.oferta-pakiet__lead { margin-top: 0.5rem; font-size: 15px; line-height: 1.625; color: var(--fg-muted); }
.oferta-pakiet__cena { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.oferta-pakiet__kwota {
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.oferta-pakiet__warunki { font-size: 0.875rem; line-height: 1.25rem; color: var(--fg-muted); }
.oferta-pakiet__lista { margin-top: 1.25rem; }
.oferta-pakiet__termin {
  margin-top: 1.25rem;
  border-left: 2px solid rgb(var(--uwaga-rgb) / 0.6);
  padding-left: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--uwaga-fg);
}
.oferta-pakiet__nota { margin-top: 1.25rem; font-size: 13px; line-height: 1.25rem; color: var(--fg-subtle); }
.oferta-pakiet__cta { margin-top: 1.5rem; width: 100%; }

@media (min-width: 640px) {
  .oferta-hero__tytul { font-size: 3rem; line-height: 1; }
  .oferta-skrot__cta { flex-direction: row; align-items: center; }
  .oferta-skrot__zakres { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
  .oferta-pakiet__lista { grid-template-columns: minmax(0, 1fr); }
  .oferta-pakiet__cta { width: auto; }
}
@media (min-width: 768px) {
  .oferta-hero__wnetrze { padding-top: 4rem; padding-bottom: 3rem; }
  .oferta-hero__tytul { font-size: 3.75rem; line-height: 1.05; }
  .oferta-hero__wskazowka { margin-top: 1.5rem; font-size: 1rem; }
  .oferta-portfolio, .oferta-formularz { padding-top: 6rem; padding-bottom: 6rem; }
  .oferta-pakiet { padding-top: 6rem; }
  .oferta-pakiet__karta { padding: 2.25rem; }
  .oferta-pakiet__tytul { font-size: 1.875rem; }
}
@media (min-width: 1024px) {
  .oferta-hero__tytul { font-size: 4.5rem; line-height: 1; }
  .oferta-film { padding-bottom: 6rem; }
  .oferta-film__siatka { grid-template-columns: auto minmax(0, 1fr); column-gap: 4rem; align-items: center; }
  .oferta-film__ramka { width: min(24rem, calc(76vh * 9 / 16)); width: min(24rem, calc(76svh * 9 / 16)); }
  .oferta-skrot { max-width: none; justify-self: stretch; }
}


/* ==========================================================================
   33. ANKIETA — /ankieta (ankieta.php, js/ankieta.js; pytania: api/_ankieta_pytania.php)
   Pola, nagłówki kroków i pasek postępu jak w formularzu rezerwacji (sekcja 28).
   ========================================================================== */
.ank { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.ank [hidden] { display: none; }
.ank__panel { margin-top: 2rem; max-width: 42rem; }
.ank__form { margin-top: 1.5rem; }
.ank-pasek__wypelnienie {
  height: 100%;
  border-radius: 9999px;
  background-color: var(--brand);
  transition: width 0.3s var(--ease-std);
}
.ank-pasek__wypelnienie[data-krok="1"] { width: 16.6667%; }
.ank-pasek__wypelnienie[data-krok="2"] { width: 33.3333%; }
.ank-pasek__wypelnienie[data-krok="3"] { width: 50%; }
.ank-pasek__wypelnienie[data-krok="4"] { width: 66.6667%; }
.ank-pasek__wypelnienie[data-krok="5"] { width: 83.3333%; }
.ank-pasek__wypelnienie[data-krok="6"] { width: 100%; }
.ank__krok .rez-krok__tytul:focus { outline: none; }

/* Wybory: radio / checkbox w kafelkach (natywne kontrolki w kolorze marki) */
.ank-grupa { min-width: 0; }
.ank-opcje { margin-top: 0.5rem; display: grid; gap: 0.5rem; }
.ank-opcje--rzad { display: flex; flex-wrap: wrap; }
.ank-opcja {
  display: flex;
  min-height: 2.75rem;
  cursor: pointer;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background-color: rgb(var(--white-rgb) / 0.03);
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--fg-muted);
  transition: border-color 0.15s var(--ease-std), background-color 0.15s var(--ease-std), color 0.15s var(--ease-std);
}
.ank-opcja:hover { border-color: var(--line-strong); color: var(--fg); }
.ank-opcja input { width: 1rem; height: 1rem; flex-shrink: 0; accent-color: var(--brand); }
.ank-opcja:has(input:checked) {
  border-color: rgb(var(--brand-rgb) / 0.6);
  background-color: var(--brand-soft);
  color: var(--fg);
}
.ank-opcja:has(input:focus-visible) { box-shadow: 0 0 0 2px rgb(var(--brand-rgb) / 0.5); }
.ank-zgoda .ank-opcja { margin-top: -0.25rem; }

/* Logo i zdjęcia */
.ank-plik__przycisk { margin-top: 0.625rem; }
.ank-plik__input:focus-visible + .ank-plik__przycisk { box-shadow: 0 0 0 2px rgb(var(--brand-rgb) / 0.5); }
.ank-plik__stan { margin-top: 0.5rem; font-size: 13px; line-height: 1.25rem; color: var(--fg-subtle); }
.ank-plik__stan:empty { display: none; }
.ank-plik__lista {
  margin-top: 0.75rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: 0.5rem;
}
.ank-plik__lista:empty { display: none; }
.ank-miniatura {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background-color: var(--bg-soft);
}
.ank-miniatura img { width: 100%; height: 100%; object-fit: cover; }
.ank-miniatura--logo img { object-fit: contain; padding: 0.5rem; }
.ank-miniatura__usun {
  position: absolute;
  right: 0.25rem;
  top: 0.25rem;
  display: flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: rgb(var(--bg-rgb) / 0.75);
  color: var(--fg);
  transition: background-color 0.15s var(--ease-std);
}
.ank-miniatura__usun:hover { background-color: rgb(var(--bg-rgb) / 0.92); }
.ank-miniatura__usun:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* Nawigacja, wysyłka, gotowe */
.ank__nawigacja { margin-top: 2rem; display: flex; align-items: center; gap: 0.75rem; }
.ank__nawigacja [data-dalej] { margin-left: auto; }
.ank__blad {
  margin-top: 1.5rem;
  border-left: 2px solid var(--blad);
  padding-left: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--blad-jasny);
}
.ank__stan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--fg-muted);
}
.ank__stan:focus { outline: none; }
.ank-kolko {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid rgb(var(--white-rgb) / 0.12);
  border-top-color: var(--brand);
  border-radius: 9999px;
  animation: ank-obrot 0.8s linear infinite;
}
@keyframes ank-obrot { to { transform: rotate(360deg); } }
.ank__gotowe-ikona {
  display: flex;
  width: 3.5rem;
  height: 3.5rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(var(--brand-rgb) / 0.4);
  border-radius: 9999px;
  background-color: var(--brand-soft);
  color: var(--brand-fg);
}
.ank__gotowe-tytul { font-size: 1.5rem; line-height: 2rem; font-weight: 600; letter-spacing: -0.025em; color: var(--fg); }
.ank__gotowe-tekst { max-width: 26rem; font-size: 15px; line-height: 1.625; }

@media (min-width: 768px) {
  .ank__panel { margin-top: 2.5rem; }
}


/* ==========================================================================
   99. OGRANICZONY RUCH
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .na-gore__strzalka { transition: none; }
  .case__zrzut-img { transition: none; }
  .faq__strzalka, .faq__odpowiedz, .pytaj__strzalka { transition: none; }
  .ramka__oprawa { transition: none; }
  .rez-form, .kal__zawartosc.is-odblokowany, .ikona-puls, .tok-info__tytul--sukces, .dzieki__tytul { animation: none; }
  .adm-okno__arkusz, .adm-kolo-tlo__zaciemnienie, .adm-kolo-arkusz { animation: none; }
  .rez-pasek__wypelnienie, .kal__zawartosc { transition: none; }
  .oferta-hero .hero__odznaka, .oferta-hero .hero__kropka-puls, .oferta-hero__tytul, .oferta-hero__wskazowka, .oferta-hero__strzalka { animation: none; }
  .ank-pasek__wypelnienie, .ank-opcja { transition: none; }
  .ank-kolko { animation-duration: 2.4s; }
}