/* =========================================================
   GRAWIT — arkusz stylow
   Kolory wyprowadzone z logo (#D56638)
   ========================================================= */

/* ---------- 1. Zmienne ---------- */
:root {
  /* marka */
  --brand:        #D56638;
  --brand-hi:     #E97A4A;
  --brand-lo:     #A94A26;
  --brand-glow:   rgba(213, 102, 56, .35);

  /* czern / grafit */
  --ink:          #0E0E10;
  --ink-2:        #16161A;
  --ink-3:        #202027;
  --ink-line:     rgba(255, 255, 255, .10);

  /* jasne tla */
  --paper:        #FFFFFF;
  --smoke:        #F7F5F3;
  --smoke-2:      #EFEBE7;
  --line:         #E3DED8;

  /* tekst */
  --tx:           #14141A;
  --tx-mid:       #4A4744;
  --tx-soft:      #6E6963;
  --tx-inv:       #FFFFFF;
  --tx-inv-mid:   rgba(255, 255, 255, .84);

  /* typografia */
  /* Montserrat: szeroki, geometryczny grotesk — najblizszy krojowi z logo */
  --f-display: "Montserrat", "Segoe UI", Arial, sans-serif;
  --f-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --f-mono:    ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

  /* przestrzen */
  --wrap:      1200px;
  --wrap-slim: 820px;
  --sec-y:     clamp(64px, 8vw, 120px);
  --r-sm:      8px;
  --r:         14px;
  --r-lg:      22px;

  --shadow:    0 2px 4px rgba(20, 16, 12, .04), 0 12px 32px rgba(20, 16, 12, .08);
  --shadow-lg: 0 4px 8px rgba(20, 16, 12, .05), 0 28px 64px rgba(20, 16, 12, .16);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  /* zeby kotwice nie chowaly sie pod przyklejonym headerem */
  scroll-padding-top: 106px;
  -webkit-text-size-adjust: 100%;
  /* Tlo <html> (a nie tylko <body>) jest tym, co przegladarka pokazuje
     w obszarze elastycznego przewijania (rubber-band na Macu/iOS), gdy
     dojedziesz do samej gory i pociagniesz dalej. Body ma biale tlo
     (--paper), a gora strony jest ciemna (topbar/header/hero), wiec
     bez tego w momencie odbicia bylo widac bialy pasek. */
  background: var(--ink);
  /* Bez tego przegladarka probuje "utrzymac w miejscu" tresc, gdy layout
     nad aktualnym widokiem sie zmienia (chowajacy sie topbar, kurczacy
     naglowek) — dokleja sama wlasne poprawki do scrollY. Blisko progu
     przelaczajacego .is-stuck to wchodzi w petle z JS-em: chowa sie,
     przegladarka koryguje pozycje, wraca, koryguje z powrotem — stad
     wrazenie pulsowania i drgania calego naglowka. */
  overflow-anchor: none;
}

/* "clip", nie "hidden": overflow-x:hidden na html/body robi z body
   kontener przewijania (przegladarka wymusza overflow-y:auto z automatu),
   co calkowicie psuje position:sticky w calym serwisie — naglowek
   przestaje sie przyklejac. "clip" blokuje poziomy scroll bez tego efektu. */
html { overflow-x: clip; }

body {
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--tx);
  /* Ciemne, nie --paper: kazdy piksel strony i tak jest przykryty
     wlasnym tlem sekcji (bialym, szarym albo ciemnym), wiec kolor tla
     body nigdzie na stronie sie nie zobaczy. Jedyne miejsce, gdzie
     wychodzi na wierzch, to strefa elastycznego odbicia (rubber-band
     na Macu/iOS, overscroll na Windows) poza gorna/dolna krawedzia —
     tam bialy zamiast ciemnego wygladal jak migajacy pasek. */
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* ---------- 3. Typografia ---------- */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.025em;
  text-wrap: balance;
}

/* H1 zwykla wielkoscia liter i lzejsza grubosc — wersaliki w tak szerokim
   kroju robily z naglowka ciezki bloczek, a nie elegancki tytul. */
h1 {
  font-size: clamp(2rem, 3.9vw, 3.1rem);
  line-height: 1.07;
  letter-spacing: -.03em;
}
/* naglowki sekcji zostaja w wersalikach, ale mniejsze i lzejsze,
   z odrobina swiatla miedzy literami — to czyta sie jak nadtytul, nie jak krzyk */
h2 {
  font-size: clamp(1.35rem, 2.3vw, 1.9rem);
  text-transform: uppercase;
  letter-spacing: .012em;
  line-height: 1.2;
}
h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); }
h4 { font-size: 1.08rem; }

p { text-wrap: pretty; }

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--tx-mid);
  line-height: 1.6;
}
/* na ciemnym tle lead musi byc jasny — inaczej robi sie szary na czarnym */
.dark .lead,
.hero .lead,
.section--dark .lead { color: var(--tx-inv-mid); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--brand);
}

.hl { color: var(--brand); }

/* ---------- 4. Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
/* Bialy sekcji bez modyfikatora bral sie dotad z tla <body> — teraz
   <body> jest ciemne (dla naprawy paska przy odbiciu scrolla), wiec
   .section musi miec wlasne, jawne tlo, inaczej "Materialy", "Jak
   dzialamy" i FAQ zrobilyby sie przez pomylke czarne. */
.section { padding-block: var(--sec-y); position: relative; background: var(--paper); }
.section--smoke { background: var(--smoke); }
.section--dark { background: var(--ink); color: var(--tx-inv); }
.section--dark h2, .section--dark h3 { color: #fff; }

/* wszystkie naglowki sekcji sa wysrodkowane */
.sec-head {
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: clamp(36px, 5vw, 60px);
  text-align: center;
}
.sec-head p { margin-top: 18px; }
/* wysrodkowany "eyebrow" potrzebuje kreski z obu stron, inaczej wisi krzywo */
.sec-head .eyebrow::after {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--brand);
}

/* ---------- 5. Przyciski ---------- */
.btn {
  --btn-bg: var(--brand);
  --btn-tx: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 100px;
  background: var(--btn-bg);
  color: var(--btn-tx);
  font-weight: 650;
  font-size: .98rem;
  letter-spacing: .01em;
  border: 2px solid transparent;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
  white-space: nowrap;
  text-align: center;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px var(--brand-glow); }
.btn:active { transform: translateY(0); }
.btn svg { flex: none; }

.btn--lg { padding: 18px 34px; font-size: 1.05rem; }
.btn--block { width: 100%; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-tx: var(--tx);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); box-shadow: none; }

.dark .btn--ghost, .section--dark .btn--ghost, .hero .btn--ghost {
  --btn-tx: #fff;
  border-color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .07);
}
.dark .btn--ghost:hover, .section--dark .btn--ghost:hover, .hero .btn--ghost:hover {
  border-color: #fff; background: rgba(255, 255, 255, .16); color: #fff;
}

/* pelny kontrast na ciemnym tle — dla drugiego CTA w hero */
.btn--light {
  --btn-bg: #FFFFFF;
  --btn-tx: var(--ink);
  border-color: #fff;
}
.btn--light:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .4); }

/* ciemniejsza zielen niz firmowa #1FAF54 — na tamtej bialy napis mial
   kontrast 2.9:1, czyli ponizej progu czytelnosci */
.btn--wa { --btn-bg: #0E8A43; }
.btn--wa:hover { --btn-bg: #0B7739; box-shadow: 0 10px 26px rgba(14, 138, 67, .38); }

.btn--allegro { --btn-bg: #FF5A00; }
.btn--allegro:hover { box-shadow: 0 10px 26px rgba(255, 90, 0, .35); }

/* mikro-tekst pod CTA — zdejmuje ryzyko z kliknięcia */
.btn-note {
  font-size: .85rem;
  color: var(--tx-soft);
  display: flex;
  align-items: center;
  gap: 7px;
}
.section--dark .btn-note, .hero .btn-note { color: var(--tx-inv-mid); }

/* ---------- 6. Pasek nad menu ---------- */
.topbar {
  background: var(--ink-2);
  color: var(--tx-inv-mid);
  font-size: .82rem;
  border-bottom: 1px solid var(--ink-line);
}
.topbar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 40px;
  flex-wrap: wrap;
}
.topbar a { color: #fff; font-weight: 600; }
.topbar a:hover { color: var(--brand-hi); }
.topbar__facts { display: flex; gap: 22px; flex-wrap: wrap; }
.topbar__facts span { display: inline-flex; align-items: center; gap: 7px; }
@media (max-width: 860px) { .topbar { display: none; } }

/* ---------- 7. Header ----------
   Zawsze przyklejony na gorze (position: sticky). Po przewinieciu
   dostaje klase .is-stuck z JS-a: belka lekko sie zmniejsza i chowa
   pasek informacyjny nad nia, zeby zostawic wiecej miejsca na tresc —
   z plynna, krotka animacja, a nie skokiem. */
.header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(14, 14, 16, .92);
  /* blur(14px) na przyklejonej belce, ktora caly czas ma pod soba
     przewijajaca sie tresc, musi byc przeliczany na kazdej klatce —
     to jeden z najdrozszych efektow CSS. 6px daje niemal ten sam,
     lekko "zmatowiony" efekt szyby przy uamku kosztu. */
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--ink-line);
  transition: box-shadow .25s var(--ease);
}
.header.is-stuck { box-shadow: 0 10px 34px rgba(0, 0, 0, .35); }

.header__in {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 86px;
  transition: min-height .28s var(--ease);
}
.header.is-stuck .header__in { min-height: 66px; }

.brand { flex: none; display: flex; align-items: center; }
.brand img { height: 44px; width: auto; transition: height .28s var(--ease); }
.header.is-stuck .brand img { height: 34px; }
@media (max-width: 560px) {
  .brand img { height: 36px; }
  .header.is-stuck .brand img { height: 30px; }
}

/* pasek informacyjny nad menu chowa sie plynnie, gdy strona jest przewinieta —
   belka menu odzyskuje jego miejsce zamiast po prostu przewijac sie razem z tlem */
.topbar {
  overflow: hidden;
  max-height: 44px;
  transition: max-height .3s var(--ease), opacity .22s var(--ease), border-color .3s;
}
.topbar.is-hidden { max-height: 0; opacity: 0; border-bottom-color: transparent; }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 4px; list-style: none; padding: 0; }
.nav__list a {
  display: block;
  padding: 9px 11px;
  border-radius: 100px;
  font-size: .93rem;
  font-weight: 550;
  color: rgba(255, 255, 255, .78);
  transition: color .15s, background .15s;
  /* pozycja menu nigdy nie moze sie zlamac w polowie ("Co / robimy") */
  white-space: nowrap;
}
.nav__list a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.nav__list a.is-active { color: #fff; background: rgba(213, 102, 56, .22); }

.header__cta { display: flex; align-items: center; gap: 12px; flex: none; }

/* WhatsApp w naglowku zamiast doklejonego "bombelka" w rogu ekranu:
   jest widoczny caly czas, nie zaslania tresci i nie wyglada jak wtyczka.
   Na telefonach go nie ma, bo tam rolę tę pelni dolny pasek. */
.header__wa {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #35D26B;
  background: rgba(31, 175, 84, .14);
  border: 1px solid rgba(31, 175, 84, .42);
  transition: background .2s, border-color .2s, color .2s, transform .2s var(--ease);
}
.header__wa:hover {
  background: #1FAF54;
  border-color: #1FAF54;
  color: #fff;
  transform: translateY(-2px);
}
.header__tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 650;
  font-size: .95rem;
  white-space: nowrap;
}
.header__tel:hover { color: var(--brand-hi); }
.header .btn { padding: 11px 20px; font-size: .92rem; }

.burger {
  display: none;
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}

/* Naglowek zaczyna sie robic ciasny wczesniej, odkad logo ma 44 px
   i doszla ikona WhatsAppa. Zwezamy go stopniowo, zamiast czekac,
   az menu zlamie sie w polowie pozycji. */
@media (max-width: 1280px) {
  .header__in { gap: 18px; }
  .nav__list { gap: 0; }
  .nav__list a { padding: 9px 9px; font-size: .87rem; }
}
@media (max-width: 1180px) {
  .header__tel span { display: none; }
  .header .btn { padding: 11px 16px; }
}
@media (max-width: 1100px) {
  .burger { display: inline-flex; }
  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(360px, 86vw);
    background: var(--ink-2);
    border-left: 1px solid var(--ink-line);
    padding: 92px 24px 32px;
    transform: translateX(100%);
    /* zamkniete menu musi byc naprawde niewidoczne: bez tego jego linki
       lapia fokus tabulatorem i rozpychaja strone w poziomie */
    visibility: hidden;
    transition: transform .32s var(--ease), visibility .32s;
    overflow-y: auto;
    z-index: 95;
  }
  .nav.is-open { transform: translateX(0); visibility: visible; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__list a { padding: 14px 16px; font-size: 1.05rem; border-radius: var(--r-sm); }
  .nav__foot { margin-top: 26px; display: grid; gap: 10px; }
  .header__cta { display: none; }
  .nav-scrim {
    position: fixed; inset: 0; z-index: 94;
    background: rgba(0, 0, 0, .5);
    opacity: 0; pointer-events: none;
    transition: opacity .3s;
  }
  .nav-scrim.is-open { opacity: 1; pointer-events: auto; }
}
.nav__foot { display: none; }
@media (max-width: 1100px) { .nav__foot { display: grid; } }

/* ---------- 8. Hero ---------- */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--tx-inv);
  overflow: hidden;
  padding-block: clamp(56px, 7vw, 96px) clamp(56px, 7vw, 88px);
}
/* siatka jak na stole roboczym lasera */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 70% at 30% 40%, #000 20%, transparent 78%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  top: -25%; right: -12%;
  width: 780px; height: 780px;
  background: radial-gradient(circle, rgba(213, 102, 56, .30) 0%, transparent 62%);
  filter: blur(24px);
  pointer-events: none;
}
.hero__in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero h1 { margin-bottom: 24px; max-width: 18ch; }
@media (max-width: 900px) { .hero h1 { max-width: none; } }
.hero__lead { font-size: clamp(1.05rem, 1.5vw, 1.24rem); color: var(--tx-inv-mid); max-width: 56ch; }
/* kazde zdanie w osobnej linii — span, a nie <br>, zeby dlugie zdanie
   nadal lamalo sie samo, gdy nie zmiesci sie w jednej linii */
/* balance dzielilby zdanie na rowne polowki, przez co pierwsza linia
   urywala sie w polowie szerokosci. pretty wypelnia linie do konca
   i tylko pilnuje, zeby na ostatniej nie zostalo jedno slowo. */
.hero__lead span { display: block; text-wrap: pretty; }
.hero__lead span + span { margin-top: 6px; }
/* wyroznienie schodzi do wlasnej linii, ale bez dodatkowego odstepu —
   to nadal ciag dalszy tego samego zdania, a nie nowy akapit */
.hero__lead strong { display: block; }

.hero__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 100px;
  border: 1px solid var(--ink-line);
  background: rgba(255, 255, 255, .04);
  font-size: .8rem;
  font-weight: 550;
  color: rgba(255, 255, 255, .82);
}
.chip svg { color: var(--brand-hi); }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}
.hero__note { margin-top: 18px; }

/* Ocena stoi pod cala siatka hero, wiec jest wysrodkowana wzgledem
   strony, a nie wzgledem kolumny z tekstem. */
.hero__rating {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin-top: clamp(34px, 4.5vw, 56px);
}

/* ocena z wizytowki Google — celowo wyglada inaczej niz szare "chipy",
   zeby czytalo sie jako dowod, a nie jako kolejna cecha */
.rating {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 22px 13px 18px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  transition: background .2s, border-color .2s, transform .2s var(--ease);
}
.rating:hover {
  background: rgba(255, 255, 255, .11);
  border-color: rgba(255, 255, 255, .3);
  transform: translateY(-2px);
}
.rating__score {
  font-family: var(--f-display);
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}
.rating__body { display: grid; gap: 3px; }
.rating__stars { color: #F5A623; letter-spacing: 2px; font-size: .95rem; line-height: 1; }
.rating__lbl { font-size: .86rem; color: var(--tx-inv-mid); }
.rating__lbl strong { color: #fff; }
.rating__arrow { color: var(--brand-hi); flex: none; transition: transform .2s var(--ease); }
.rating:hover .rating__arrow { transform: translateX(3px); }

@media (max-width: 400px) {
  .rating { gap: 12px; padding-inline: 14px 16px; }
  .rating__score { font-size: 1.9rem; }
  .rating__lbl { font-size: .8rem; }
}

/* kolaz zdjec w hero */
.hero__art {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 14px;
}
.hero__art figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  border: 1px solid var(--ink-line);
  background: var(--ink-3);
  aspect-ratio: 4 / 3;
}
.hero__art figure:first-child { grid-column: span 2; aspect-ratio: 16 / 9; }
.hero__art img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.hero__art figure:hover img { transform: scale(1.05); }

@media (max-width: 900px) {
  .hero__in { grid-template-columns: 1fr; }
  /* zdjecia ida POD naglowek i przyciski, a nie przed nie */
  .hero__art { margin-top: 36px; grid-template-columns: repeat(2, 1fr); }
  .hero__art figure:first-child { grid-column: span 2; }
}
@media (max-width: 560px) {
  .hero__cta .btn { width: 100%; }
}

/* ---------- 9. Pasek zaufania ---------- */
.trust {
  background: var(--ink-2);
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
  padding-block: 26px;
  color: #fff;
}
.trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.trust__item { text-align: center; padding-inline: 12px; }
.trust__item + .trust__item { border-left: 1px solid var(--ink-line); }
.trust__num {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 700;
  color: var(--brand-hi);
  line-height: 1;
}
.trust__lbl { font-size: .84rem; color: var(--tx-inv-mid); margin-top: 8px; }
@media (max-width: 720px) {
  .trust__grid { grid-template-columns: repeat(2, 1fr); gap: 22px 8px; }
  .trust__item:nth-child(odd) { border-left: 0; }
  .trust__item:nth-child(3) { border-left: 0; }
}

/* ---------- 10. Dwie sciezki (segmentacja) ---------- */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 860px) { .paths { grid-template-columns: 1fr; } }

.path {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.4vw, 40px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--paper);
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.path::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.path:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.path:hover::before { transform: scaleX(1); }

.path__ico {
  width: 54px; height: 54px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: rgba(213, 102, 56, .1);
  color: var(--brand);
  margin-bottom: 20px;
}
.path h3 { margin-bottom: 10px; }
.path__who { font-size: .92rem; color: var(--tx-soft); margin-bottom: 18px; }
.path ul { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 11px; }
.path li { position: relative; padding-left: 30px; font-size: .96rem; color: var(--tx-mid); }
.path li::before {
  content: "";
  position: absolute;
  left: 0; top: .45em;
  width: 18px; height: 10px;
  border-left: 2.5px solid var(--brand);
  border-bottom: 2.5px solid var(--brand);
  transform: rotate(-45deg) scale(.8);
  transform-origin: center;
}
.path .btn { margin-top: auto; }

/* ---------- 11. Tabela materialow ---------- */
.mat-wrap {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--paper);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.mat-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.mat {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: .97rem;
}
table.mat th, table.mat td { padding: 15px 20px; text-align: left; }
table.mat thead th {
  background: var(--ink);
  color: #fff;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
table.mat thead th:not(:first-child) { text-align: center; width: 150px; }
table.mat tbody tr + tr { border-top: 1px solid var(--line); }
table.mat tbody tr:hover { background: var(--smoke); }
table.mat td:not(:first-child) { text-align: center; }
table.mat td:first-child { font-weight: 600; }
.mat__sub { display: block; font-weight: 400; font-size: .84rem; color: var(--tx-soft); margin-top: 2px; }

.yes, .no {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: .9rem;
}
.yes { background: rgba(213, 102, 56, .12); color: var(--brand); }
.no  { background: var(--smoke-2); color: #B8B2AA; }

.mat-foot {
  padding: 18px 20px;
  background: var(--smoke);
  border-top: 1px solid var(--line);
  font-size: .9rem;
  color: var(--tx-mid);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.mat-foot svg { flex: none; color: var(--brand); margin-top: 2px; }
.mat-foot span { display: block; text-wrap: pretty; }
.mat-foot span + span { margin-top: 8px; }

/* ---------- 12. Zastosowania ----------
   Zamiast siatki kafelkow: tekst po lewej, spokojna lista po prawej.
   Dziewiec pudelek obok siebie robilo sciane, ktorej nikt nie czyta. */
.uses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 820px) { .uses { grid-template-columns: 1fr; } }

.uses__note { margin-top: 16px; justify-content: center; text-align: center; }
@media (max-width: 820px) { .ugroup + .ugroup { margin-top: 42px; } }
.ugroup__t {
  font-family: var(--f-mono);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand);
  padding-bottom: 14px;
  border-bottom: 2px solid var(--brand);
  margin-bottom: 4px;
}
.ugroup ul { list-style: none; padding: 0; margin: 0; }
.ugroup li { border-bottom: 1px solid var(--line); }

.urow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px 20px;
  padding: 18px 4px 18px 0;
  transition: padding-left .25s var(--ease), color .2s;
}
.urow:hover { padding-left: 12px; color: var(--brand); }
.urow__n { font-weight: 650; font-size: 1.04rem; }
.urow__d {
  grid-column: 1 / -1;
  font-size: .9rem;
  color: var(--tx-mid);
  line-height: 1.5;
  margin-top: 4px;
  max-width: 60ch;
}
.urow__tag {
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tx-soft);
  white-space: nowrap;
}
.urow:hover .urow__tag { color: var(--brand); }
@media (max-width: 460px) {
  .urow { grid-template-columns: 1fr; }
  .urow__tag { order: -1; }
}

/* ---------- 13. Galeria ---------- */
.gal-filter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(28px, 3.5vw, 40px);
}
.gal-filter button {
  padding: 10px 22px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .82);
  font-weight: 600;
  font-size: .9rem;
  transition: background .2s, border-color .2s, color .2s;
}
.gal-filter button:hover { border-color: #fff; color: #fff; }
.gal-filter button.is-on {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.gal-filter .gal-filter__n { opacity: .6; font-weight: 500; margin-left: 4px; }

.gal__item[hidden] { display: none; }

.gal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.gal__item {
  position: relative;
  display: block;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--ink-3);
  aspect-ratio: 4 / 3;
  cursor: zoom-in;
  border: 1px solid var(--ink-line);
}
.gal__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease), filter .4s;
}
.gal__item:hover img { transform: scale(1.06); }
.gal__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 44px 18px 16px;
  background: linear-gradient(to top, rgba(8, 8, 10, .92), transparent);
  color: #fff;
}
.gal__cap strong { display: block; font-size: .97rem; font-weight: 650; }
.gal__cap span {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-hi);
}

/* lightbox */
.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(6, 6, 8, .94);
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.lb.is-open { opacity: 1; pointer-events: auto; }
.lb img { max-width: min(1100px, 94vw); max-height: 82vh; border-radius: var(--r); }
.lb__cap { color: #fff; text-align: center; margin-top: 16px; font-size: .95rem; }
.lb__x, .lb__nav {
  position: absolute;
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  transition: background .2s;
}
.lb__x:hover, .lb__nav:hover { background: var(--brand); }
.lb__x { top: 20px; right: 20px; }
.lb__nav--prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lb__nav--next { right: 20px; top: 50%; transform: translateY(-50%); }
@media (max-width: 620px) {
  .lb__nav--prev { left: 10px; }
  .lb__nav--next { right: 10px; }
}

/* ---------- 14. Maszyny ---------- */
.machines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .machines { grid-template-columns: 1fr; } }

.machine {
  padding: 30px 28px;
  border-radius: var(--r-lg);
  background: var(--ink-2);
  border: 1px solid var(--ink-line);
  position: relative;
  overflow: hidden;
}
.machine::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--brand), transparent);
}
.machine__tag {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-hi);
  margin-bottom: 14px;
  display: block;
}
.machine h3 { margin-bottom: 8px; }
.machine__spec {
  font-family: var(--f-mono);
  font-size: .88rem;
  color: #fff;
  padding: 10px 14px;
  background: rgba(255, 255, 255, .05);
  border-radius: var(--r-sm);
  margin-bottom: 16px;
  display: inline-block;
}
.machine p { color: var(--tx-inv-mid); font-size: .95rem; }

/* ---------- 15. Proces ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  counter-reset: step;
}
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

.step { position: relative; padding-top: 30px; }
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--f-display);
  font-size: 3.4rem;
  font-weight: 700;
  color: var(--brand);
  opacity: .2;
  line-height: 1;
  position: absolute;
  top: -8px; left: -2px;
}
.step__bar { height: 3px; background: var(--line); margin-bottom: 20px; position: relative; }
.step__bar::after {
  content: "";
  position: absolute; inset: 0 auto 0 0;
  width: 42px;
  background: var(--brand);
}
.step h4 { margin-bottom: 10px; font-family: var(--f-body); font-weight: 700; font-size: 1.08rem; }
.step p { font-size: .93rem; color: var(--tx-mid); }
.step__time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-family: var(--f-mono);
  font-size: .76rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 600;
}

/* ---------- 16. Allegro ---------- */
.allegro { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 860px) { .allegro { grid-template-columns: 1fr; } }

.shop {
  padding: 32px;
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.shop__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 100px;
  background: #FF5A00;
  color: #fff;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.shop h3 { margin-bottom: 10px; }
.shop p { color: var(--tx-mid); font-size: .96rem; margin-bottom: 22px; }
.shop .btn { margin-top: auto; align-self: flex-start; }
/* na waskich ekranach "Zobacz oferte laserkiem_pl" nie miescilo sie w karcie */
@media (max-width: 520px) {
  .shop { padding: 26px 22px; }
  .shop .btn { align-self: stretch; width: 100%; white-space: normal; padding-inline: 18px; }
}

.split-note {
  margin-top: 28px;
  padding: 22px 26px;
  border-radius: var(--r);
  background: var(--ink);
  color: var(--tx-inv-mid);
  font-size: .95rem;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.split-note svg { flex: none; color: var(--brand-hi); margin-top: 3px; }
.split-note strong { color: #fff; }

/* ---------- 17. Dlaczego my ---------- */
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 980px) { .why { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .why { grid-template-columns: 1fr; } }

.why__item {
  padding: 28px 26px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--paper);
}
.why__item h4 {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 10px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.why__item h4 svg { flex: none; color: var(--brand); margin-top: 2px; }
.why__item p { font-size: .93rem; color: var(--tx-mid); }

/* ---------- 17b. Opinie / social proof ---------- */
.rev-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  margin-bottom: clamp(32px, 4vw, 48px);
}

.gscore {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 30px;
  border-radius: var(--r);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.gscore__num {
  font-family: var(--f-display);
  font-size: 3.4rem;
  font-weight: 700;
  line-height: .9;
  color: var(--tx);
}
/* ciemniejsze zloto — jasne #F5A623 na bialej karcie mialo kontrast 2:1
   i przy mniejszych ekranach gwiazdki zlewaly sie z tlem */
.gscore__stars { color: #C8860D; letter-spacing: 3px; font-size: 1.1rem; line-height: 1; }
.gscore__lbl { font-size: .88rem; color: var(--tx-mid); margin-top: 8px; line-height: 1.45; }
.gscore__lbl strong { color: var(--tx); }

/* Uklad murkowy: kazda opinia ma wysokosc swojej tresci.
   Siatka wyrownywalaby karty w rzedzie i przy krotkiej opinii
   obok dlugiej robila sie wielka dziura. */
.revs {
  columns: 2;
  column-gap: 18px;
}
@media (max-width: 820px) { .revs { columns: 1; } }

.rev {
  display: block;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 18px;
  padding: 28px 26px;
  border-radius: var(--r);
  background: var(--paper);
  border: 1px solid var(--line);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.rev:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.rev__stars { color: #C8860D; letter-spacing: 2px; margin-bottom: 14px; font-size: 1rem; }
.rev__tx {
  font-size: .97rem;
  color: var(--tx);
  line-height: 1.6;
  margin-bottom: 22px;
  white-space: pre-line; /* opinie cytujemy tak, jak je napisano */
}
.rev__when { font-size: .8rem; color: var(--tx-soft); }
.rev__who { display: flex; align-items: center; gap: 12px; }
.rev__av {
  width: 42px; height: 42px;
  flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(213, 102, 56, .12);
  color: var(--brand);
  font-weight: 700;
  font-size: 1.05rem;
}
.rev__name { font-weight: 650; font-size: .95rem; }
.rev__src {
  font-size: .8rem;
  color: var(--tx-soft);
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ---------- 18. FAQ ---------- */
.faq { max-width: var(--wrap-slim); margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  text-align: left;
  font-weight: 650;
  font-size: 1.06rem;
  transition: color .2s;
}
.faq__q:hover { color: var(--brand); }
.faq__q svg { flex: none; transition: transform .3s var(--ease); color: var(--brand); }
.faq__item.is-open .faq__q svg { transform: rotate(45deg); }
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .34s var(--ease);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { color: var(--tx-mid); font-size: .98rem; padding-bottom: 24px; max-width: 68ch; }
.faq__a p + p { padding-top: 12px; }

/* ---------- 19. Kontakt ---------- */
/* minmax(0, …) zamiast samego 1fr: bez tego dlugi adres e-mail
   rozpycha kolumne ponad szerokosc kontenera */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 900px) { .contact { grid-template-columns: minmax(0, 1fr); } }

.ch-list { display: grid; gap: 12px; margin-bottom: 28px; }
.ch {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: var(--r);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--ink-line);
  transition: border-color .2s, background .2s, transform .2s var(--ease);
}
.ch:hover { border-color: var(--brand); background: rgba(255, 255, 255, .07); transform: translateX(3px); }
.ch__ico {
  width: 44px; height: 44px;
  flex: none;
  border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(213, 102, 56, .16);
  color: var(--brand-hi);
}
.ch--wa .ch__ico { background: rgba(31, 175, 84, .16); color: #35D26B; }
/* dlugie adresy e-mail musza sie lamac, a nie rozpychac uklad */
.ch__tx { min-width: 0; }
.ch__tx strong {
  display: block;
  color: #fff;
  font-size: 1.02rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}
.ch__tx span { font-size: .86rem; color: var(--tx-inv-mid); }
.footer a, .footer li { overflow-wrap: anywhere; }

.hours {
  font-size: .9rem;
  color: var(--tx-inv-mid);
  padding-top: 22px;
  border-top: 1px solid var(--ink-line);
}
.hours strong { color: #fff; }

/* formularz */
.form {
  background: var(--paper);
  color: var(--tx);
  border-radius: var(--r-lg);
  padding: clamp(26px, 3.4vw, 40px);
  box-shadow: var(--shadow-lg);
}
/* Formularz to jasna karta wewnatrz ciemnej sekcji, wiec musi cofnac
   rozjasnienie tekstu, ktore dziedziczy po .section--dark.
   Bez tego naglowek i notka byly biale na bialym tle. */
.section--dark .form h2,
.section--dark .form h3,
.section--dark .form h4 { color: var(--tx); }
.section--dark .form .btn-note { color: var(--tx-mid); }
.section--dark .form .btn-note svg { color: var(--tx-soft); }

.form h3 { margin-bottom: 8px; }
.form__intro {
  font-size: 1rem;
  line-height: 1.55;
  color: #33302D;
  margin-bottom: 26px;
}

.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: .87rem;
  font-weight: 650;
  margin-bottom: 7px;
}
.field .req { color: var(--brand); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: .98rem;
  transition: border-color .18s, box-shadow .18s;
}
.field textarea { resize: vertical; min-height: 118px; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2355524E' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(213, 102, 56, .13);
}
.field__hint { font-size: .82rem; color: var(--tx-soft); margin-top: 6px; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #D33A2C; }
.field__err { display: none; font-size: .82rem; color: #D33A2C; margin-top: 6px; font-weight: 550; }
.field.has-error .field__err { display: block; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 520px) { .grid-2 { grid-template-columns: 1fr; } }

.consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: .84rem;
  color: var(--tx-mid);
  line-height: 1.5;
  margin-bottom: 22px;
}
.consent input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--brand); }
.consent a { color: var(--brand); text-decoration: underline; }

.hp { position: absolute; left: -9999px; opacity: 0; height: 0; }

.form__ok {
  display: none;
  padding: 18px 20px;
  border-radius: var(--r-sm);
  background: rgba(31, 175, 84, .1);
  border: 1px solid rgba(31, 175, 84, .35);
  color: #157C3C;
  font-size: .94rem;
  margin-bottom: 18px;
}
.form__ok.is-visible { display: block; }

/* ---------- 20. Stopka ---------- */
.footer {
  background: var(--ink);
  color: var(--tx-inv-mid);
  padding-block: 64px 0;
  border-top: 1px solid var(--ink-line);
  font-size: .93rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 40px 28px;
  padding-bottom: 48px;
}
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
}

/* Na telefonie stopka staje sie jedna kolumna. Wyrownana do lewej
   rozjezdzala sie wizualnie, wiec centrujemy calosc i dokladamy
   cienkie linie miedzy blokami, zeby bylo widac, gdzie sie koncza. */
@media (max-width: 560px) {
  .footer { padding-top: 48px; text-align: center; }
  .footer__grid { grid-template-columns: 1fr; gap: 0; padding-bottom: 8px; }
  .footer__grid > div { padding-block: 26px; }
  .footer__grid > div + div { border-top: 1px solid var(--ink-line); }
  .footer__grid > div:first-child { padding-top: 0; }

  .footer img.footer__logo { margin-inline: auto; }
  .footer__grid > div:first-child p { max-width: 42ch; margin-inline: auto; }

  .socials { justify-content: center; margin-top: 22px; }
  .footer h5 { margin-bottom: 14px; }
  .footer ul { gap: 12px; }

  .footer__bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding-block: 24px;
    font-size: .82rem;
    line-height: 1.6;
  }
}

/* bez width:auto logo bralo szerokosc z atrybutu width i sie rozciagalo */
.footer img.footer__logo { height: 28px; width: auto; margin-bottom: 18px; }
.footer h5 {
  color: #fff;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-weight: 650;
}
.footer ul { list-style: none; padding: 0; display: grid; gap: 9px; }
.footer a:hover { color: var(--brand-hi); }

.socials { display: flex; gap: 10px; margin-top: 18px; }
.socials a {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: grid; place-items: center;
  border: 1px solid var(--ink-line);
  color: #fff;
  transition: background .2s, border-color .2s, transform .2s;
}
.socials a:hover { background: var(--brand); border-color: var(--brand); transform: translateY(-2px); }

.footer__bottom {
  border-top: 1px solid var(--ink-line);
  padding-block: 22px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .85rem;
}

/* ---------- 21. Przyklejony pasek CTA (mobile) ---------- */
.mbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 88;
  display: none;
  gap: 1px;
  background: var(--ink-line);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .22);
  padding-bottom: env(safe-area-inset-bottom);
}
.mbar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 8px;
  background: var(--ink-2);
  color: #fff;
  font-weight: 650;
  font-size: .92rem;
}
.mbar a.mbar--wa { background: #0E8A43; }
.mbar a.mbar--quote { background: var(--brand); }
@media (max-width: 860px) {
  .mbar { display: flex; }
  body { padding-bottom: 60px; }
}

/* ---------- 22. Animacja wejscia ----------
   Ukrywamy tylko wtedy, gdy JS dziala (klasa .js na <html>).
   Bez JS tresc jest widoczna od razu — zero ryzyka pustej strony. */
html.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
html.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- 21b. Powrót na górę ----------
   Pojawia sie po przewinieciu. Na telefonie musi siedziec NAD dolnym
   paskiem CTA, zeby go nie zaslaniac. */
.totop {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 86;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(20, 20, 24, .82);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .28s var(--ease), transform .28s var(--ease),
              visibility .28s, background .2s, border-color .2s;
}
.totop.is-on { opacity: 1; visibility: visible; transform: none; }
.totop:hover {
  background: var(--brand);
  border-color: var(--brand);
  transform: translateY(-3px);
}
@media (max-width: 860px) {
  /* dolny pasek CTA ma 60 px, wiec odsuwamy sie ponad niego */
  .totop { bottom: calc(76px + env(safe-area-inset-bottom)); right: 14px; width: 44px; height: 44px; }
}

/* ---------- 22b. Zgody na cookies ---------- */
.ck {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 210;
  background: var(--ink-2);
  border-top: 2px solid var(--brand);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .45);
  transform: translateY(110%);
  transition: transform .35s var(--ease);
  padding-bottom: env(safe-area-inset-bottom);
}
.ck.is-on { transform: none; }

.ck__in {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 22px 20px;
  display: flex;
  align-items: center;
  gap: 26px;
}
.ck__tx { flex: 1 1 auto; }
.ck__tx strong { display: block; color: #fff; font-size: 1.02rem; margin-bottom: 6px; }
.ck__tx p { color: var(--tx-inv-mid); font-size: .89rem; line-height: 1.55; max-width: 78ch; }
.ck__tx a { color: var(--brand-hi); text-decoration: underline; }

.ck__btns { display: flex; gap: 10px; flex: none; flex-wrap: wrap; }

.ck__btn {
  padding: 12px 22px;
  border-radius: 100px;
  font-weight: 650;
  font-size: .92rem;
  white-space: nowrap;
  border: 1.5px solid transparent;
  transition: background .18s, border-color .18s, color .18s, transform .18s var(--ease);
}
.ck__btn:hover { transform: translateY(-2px); }
/* "Akceptuję" i "Odrzucam" muszą mieć równą wagę wizualną — inaczej
   zgoda nie jest dobrowolna w rozumieniu RODO. */
.ck__btn--ok { background: var(--brand); color: #fff; }
.ck__btn--ok:hover { background: var(--brand-hi); }
.ck__btn--no { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.ck__btn--no:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.ck__btn--set { background: transparent; color: var(--tx-inv-mid); padding-inline: 12px; }
.ck__btn--set:hover { color: #fff; text-decoration: underline; }

@media (max-width: 900px) {
  .ck__in { flex-direction: column; align-items: stretch; gap: 18px; padding: 20px; }
  .ck__btns { flex-direction: column; }
  .ck__btn { width: 100%; }
  .ck__tx p { font-size: .86rem; }
}

/* panel ustawień */
.ckp {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: rgba(6, 6, 8, .72);
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.ckp.is-on { opacity: 1; pointer-events: auto; }

.ckp__box {
  width: min(620px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.ckp__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 26px 18px;
  border-bottom: 1px solid var(--line);
}
.ckp__head h2 { font-size: clamp(1.1rem, 2vw, 1.35rem); text-transform: none; letter-spacing: -.01em; }
.ckp__x {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--tx-mid);
  transition: background .2s, color .2s;
}
.ckp__x:hover { background: var(--smoke-2); color: var(--tx); }

.ckp__body { padding: 8px 26px; }
.ckp__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
}
.ckp__row + .ckp__row { border-top: 1px solid var(--line); }
.ckp__lbl { flex: 1; cursor: pointer; }
.ckp__lbl strong { display: block; font-size: 1rem; margin-bottom: 5px; }
.ckp__lbl span { display: block; font-size: .88rem; color: var(--tx-mid); line-height: 1.5; }
.ckp__stale {
  flex: none;
  font-size: .78rem;
  font-weight: 600;
  color: var(--brand);
  background: rgba(213, 102, 56, .12);
  padding: 6px 12px;
  border-radius: 100px;
  white-space: nowrap;
}

/* przełącznik */
.ckp__sw { flex: none; position: relative; width: 50px; height: 28px; cursor: pointer; }
.ckp__sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ckp__sw span {
  position: absolute; inset: 0;
  background: #CFC9C2;
  border-radius: 100px;
  transition: background .2s;
  pointer-events: none;
}
.ckp__sw span::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s var(--ease);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.ckp__sw input:checked + span { background: var(--brand); }
.ckp__sw input:checked + span::after { transform: translateX(22px); }
.ckp__sw input:focus-visible + span { outline: 3px solid var(--brand); outline-offset: 3px; }

.ckp__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 20px 26px 24px;
  border-top: 1px solid var(--line);
  background: var(--smoke);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.ckp__foot .ck__btn--no { color: var(--tx); border-color: var(--line); }
.ckp__foot .ck__btn--no:hover { background: var(--smoke-2); border-color: var(--tx-soft); }
.ckp__link { margin-left: auto; font-size: .88rem; color: var(--brand); text-decoration: underline; }
@media (max-width: 560px) {
  .ckp__foot .ck__btn { width: 100%; }
  .ckp__link { margin-left: 0; }
}

/* ---------- 23. Drobiazgi ---------- */
.skip {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 300;
  padding: 12px 20px;
  background: var(--brand);
  color: #fff;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 650;
  transition: top .2s;
}
.skip:focus { top: 0; }

body.no-scroll { overflow: hidden; }

.center { text-align: center; }
.mt-l { margin-top: 40px; }