/* ══════════════════════════════════════════════════════════
   SNW — system wizualny
   Ładowany RAZ z motywu. Strony niosą tylko markup.
   ══════════════════════════════════════════════════════════ */

:root{
  --ink:#141c26;
  --slate:#1e2a38;
  --slate-2:#25333f;
  --paper:#f4f3ef;
  --paper-2:#ffffff;
  --line:#d8d5cc;
  --line-dark:#33414f;
  --accent:#f2a71b;
  --accent-deep:#c67f0a;   /* TŁO .btn--primary:hover — ink na nim ma 5.26 */
  --accent-text:#966409;   /* TEKST na jasnym tle — 4.59 na paper, 5.09 na white */
  --text:#1a2430;
  --muted:#5c6773;
  --muted-dark:#9fb0bf;
  --nav-h:72px;
  --maxw:1160px;
  --r:14px;
  --font-display:'Archivo', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body); color:var(--text); background:var(--paper);
  line-height:1.6; font-size:17px; overflow-x:hidden;
}
section{ scroll-margin-top:calc(var(--nav-h) + 8px); }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:var(--ink); }

:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }

.stripe{ height:6px; background:repeating-linear-gradient(45deg, var(--accent) 0 14px, var(--ink) 14px 28px); }

.eyebrow{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-text);
  display:inline-flex; align-items:center; gap:.5em;
}
.eyebrow--light{ color:var(--accent); }
.eyebrow .tick{ color:var(--accent); }

h1,h2,h3{ font-family:var(--font-display); line-height:1.04; letter-spacing:-.01em; }
.mark{
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat; background-position:0 86%;
  background-size:100% .30em; padding:0 .04em;
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--font-display); font-weight:700; font-size:15.5px;
  padding:15px 26px; border-radius:10px; cursor:pointer;
  border:2px solid transparent;
  transition:transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
  line-height:1;
}
.btn--primary{ background:var(--accent); color:var(--ink); }
.btn--primary:hover{ background:var(--accent-deep); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--paper); border-color:rgba(255,255,255,.28); }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.btn--dark{ background:var(--ink); color:var(--paper); }
.btn--dark:hover{ background:var(--slate); transform:translateY(-2px); }
.btn svg{ width:18px; height:18px; }

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:60; height:var(--nav-h);
  background:rgba(20,28,38,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-dark);
}
.nav__inner{ height:100%; display:flex; align-items:center; justify-content:space-between; }
.brand{
  display:flex; align-items:baseline; gap:.5ch; font-family:var(--font-display);
  font-weight:900; font-size:22px; letter-spacing:-.02em; color:var(--paper);
}
.brand b{ color:var(--accent); font-weight:900; }
.brand .dot{ color:var(--accent); }
.nav__links{ display:flex; align-items:center; gap:28px; }
.nav__links a{
  font-family:var(--font-mono); font-size:13px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted-dark); padding:6px 0; position:relative; transition:color .2s;
}
.nav__links a:hover,.nav__links a.active{ color:var(--paper); }
.nav__links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--accent);
}
.nav__cta{ display:flex; align-items:center; gap:14px; }
.nav__phone{ font-family:var(--font-mono); font-size:14px; color:var(--paper); white-space:nowrap; }
.nav__phone span{ color:var(--muted-dark); }
.nav .btn{ padding:11px 20px; font-size:14px; }
.burger{ display:none; background:none; border:0; cursor:pointer; padding:8px; }
.burger span{ display:block; width:24px; height:2px; background:var(--paper); margin:5px 0; transition:.25s; }

/* ---------- HERO (strona główna) ---------- */
.hero{ position:relative; background:var(--ink); color:var(--paper); overflow:hidden; padding:96px 0 84px; }
.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:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 70% 30%, #000 40%, transparent 100%);
          mask-image:radial-gradient(ellipse 90% 70% at 70% 30%, #000 40%, transparent 100%);
  opacity:.7;
}
.hero::after{
  content:""; position:absolute; right:-8%; top:-20%; width:520px; height:520px;
  background:radial-gradient(circle, rgba(242,167,27,.18), transparent 60%); pointer-events:none;
}
.hero__inner{ position:relative; z-index:2; max-width:820px; }
.hero h1{ font-size:clamp(40px, 7vw, 76px); font-weight:900; margin:20px 0 22px; text-transform:uppercase; }
.hero p.lead{ font-size:clamp(17px,2.1vw,20px); color:var(--muted-dark); max-width:600px; margin-bottom:34px; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:44px; }
.trust{ display:flex; flex-wrap:wrap; gap:14px 32px; align-items:center; padding-top:26px; border-top:1px solid var(--line-dark); }
.trust__item{ display:flex; align-items:center; gap:9px; font-size:14.5px; color:var(--paper); }
.trust__item .num{ font-family:var(--font-display); font-weight:800; color:var(--accent); font-size:19px; }
.stars{ color:var(--accent); letter-spacing:1px; }

/* ---------- BANER PODSTRON ---------- */
.pagehead{
  position:relative; background:var(--ink); color:var(--paper);
  padding:56px 0 52px; overflow:hidden;
}
.pagehead::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 80% 100% at 80% 0%, #000 30%, transparent 100%);
          mask-image:radial-gradient(ellipse 80% 100% at 80% 0%, #000 30%, transparent 100%);
}
.pagehead__inner{ position:relative; z-index:2; }
.pagehead h1{ font-size:clamp(30px,5vw,50px); font-weight:900; text-transform:uppercase; margin-top:12px; }
.crumbs{ font-family:var(--font-mono); font-size:12.5px; color:var(--muted-dark); margin-top:14px; }
.crumbs a:hover{ color:var(--accent); }
.crumbs span{ color:var(--accent); }

/* ---------- ZDJĘCIE W TLE BANERU ---------- */
/* --baner-foto wstrzykuje motyw (snw_baner_head) tylko wtedy, gdy plik
   assets/banery/{slug}.webp istnieje. Bez niego zostaje `none` w stosie
   i baner wygląda dokładnie tak, jak przed tą sekcją: siatka + poświata.
   Musi stać PO .hero i .pagehead — tamte ustawiają `background` skrótem,
   który zeruje background-image.
   Gradient jest pierwszy w stosie, więc leży NA zdjęciu. To on trzyma kontrast.

   Wszystkie trzy liczby są wyliczone, nie dobrane na oko:

   Stop 65% — .wrap ma max-width 1160 wyśrodkowane, więc tekst kończy się ok.
   62.5% szerokości. Krycie trzyma do końca tekstu i dopiero ZA nim puszcza zdjęcie.

   .92/.86 w strefie tekstu — o progu decyduje --accent (#f2a71b: eyebrow, tick,
   separator okruszków, liczby w trust, gwiazdki), nie --paper. Paper ma tu zapas
   10.37 przy wymaganych 4.5, ale accent pada pierwszy: przy .85 ma już 4.28.
   Dlatego nie da się rozjaśnić strefy tekstu — pomarańcz na to nie pozwala.

   .10 na końcu — prawa krawędź nie osłania NICZEGO, więc krycie leci prawie do
   zera i dopiero tam zdjęcie widać. Cały efekt bierze się z tego stopu; przy .55
   baner był jednolitym błotem mimo przechodzącego kontrastu. Liczby mówiły OK,
   a wyglądało źle — dlatego trzeba na to popatrzeć, nie tylko zmierzyć.

   Zmierzone na realnym komplecie: paper 10.37, muted-dark 5.18, accent 5.66.
   Podmieniasz zdjęcia na jaśniejsze — przelicz. Nie zgaduj. */
.hero,
.pagehead{
  background-image:
    linear-gradient(100deg,
      rgba(20,28,38,.92) 0%,
      rgba(20,28,38,.86) 65%,
      rgba(20,28,38,.10) 100%),
    var(--baner-foto, none);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* ---------- SECTION SHELL ---------- */
.section{ padding:92px 0; }
.section--paper{ background:var(--paper); }
.section--white{ background:var(--paper-2); }
.section--dark{ background:var(--ink); color:var(--paper); }
.sec-head{ max-width:640px; margin-bottom:52px; }
.sec-head h2{ font-size:clamp(30px,4.4vw,46px); font-weight:800; margin-top:14px; text-transform:uppercase; }
.section--dark .sec-head h2{ color:var(--paper); }
.lede{ color:var(--muted); margin-top:14px; font-size:18px; }
.section--dark .lede{ color:var(--muted-dark); }

/* ---------- CARDS ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cards--2{ grid-template-columns:repeat(2,1fr); }
.card{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r);
  padding:30px 28px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -22px rgba(20,28,38,.5); border-color:#c9c5b9; }
.card__ico{
  width:52px; height:52px; border-radius:12px; background:var(--ink);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}
.card__ico svg{ width:26px; height:26px; stroke:var(--accent); fill:none; stroke-width:1.7; }
.card h3{ font-size:20px; font-weight:700; margin-bottom:9px; }
.card p{ color:var(--muted); font-size:15.5px; }
.card__list{ list-style:none; margin-top:14px; }
.card__list li{
  font-size:14.5px; color:var(--muted); padding-left:18px; position:relative; margin-bottom:5px;
}
.card__list li::before{ content:"—"; position:absolute; left:0; color:var(--accent); }

/* ---------- PROCES ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.step{ border-top:2px solid var(--line-dark); padding-top:20px; }
.step__n{ font-family:var(--font-mono); font-size:13px; color:var(--accent); letter-spacing:.1em; }
.step h3{ font-size:18px; font-weight:700; margin:10px 0 8px; color:var(--paper); }
.step p{ font-size:14.5px; color:var(--muted-dark); }

/* ---------- FAQ ---------- */
.faq{ max-width:820px; }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--text);
  padding:24px 44px 24px 0; position:relative; line-height:1.35;
}
.faq__q::after{
  content:""; position:absolute; right:8px; top:50%; width:12px; height:12px;
  border-right:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:translateY(-70%) rotate(45deg); transition:transform .25s ease;
}
.faq__item[open] .faq__q::after{ transform:translateY(-30%) rotate(-135deg); }
.faq__q::-webkit-details-marker{ display:none; }
.faq__a{ padding:0 44px 24px 0; color:var(--muted); font-size:16px; }
.faq__a p + p{ margin-top:12px; }

/* ---------- OPINIE ---------- */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.quote{ background:var(--slate-2); border:1px solid var(--line-dark); border-radius:var(--r); padding:28px 26px; }
.quote p{ color:var(--paper); font-size:15.5px; margin:14px 0 18px; }
.quote__who{ font-family:var(--font-mono); font-size:12.5px; color:var(--muted-dark); letter-spacing:.05em; }

/* ---------- KONTAKT ---------- */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.contact__list{ list-style:none; }
.contact__list li{ display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--line); }
.contact__list .k{ font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); min-width:92px; padding-top:3px; }
.contact__list .v{ font-size:16.5px; font-weight:500; }
.contact__list .v a:hover{ color:var(--accent-text); }
.contact__box{ background:var(--ink); color:var(--paper); border-radius:var(--r); padding:34px 32px; }
.contact__box h3{ font-size:22px; font-weight:800; margin-bottom:10px; text-transform:uppercase; }
.contact__box p{ color:var(--muted-dark); font-size:15.5px; margin-bottom:22px; }

/* ---------- PROZA (polityka prywatności, regulaminy) ---------- */
/* System jest zbudowany z kart i kroków — długi tekst nie miał gdzie usiąść.
   max-width 68ch: dłuższe wiersze męczą przy czytaniu akapitami. */
.prose{ max-width:68ch; }
.prose h3{
  font-size:20px; font-weight:800; text-transform:uppercase;
  margin:38px 0 12px; letter-spacing:.01em;
}
.prose h3:first-child{ margin-top:0; }
.prose p{ color:var(--muted); font-size:16px; line-height:1.7; margin-bottom:14px; }
.prose ul{ margin:0 0 16px 20px; }
.prose li{ color:var(--muted); font-size:16px; line-height:1.7; margin-bottom:7px; }
.prose a{ color:var(--accent-text); text-decoration:underline; }
.prose a:hover{ text-decoration:none; }
.prose strong{ color:var(--text); font-weight:700; }
.prose__data{
  font-family:var(--font-mono); font-size:13px; color:var(--muted);
  border-top:1px solid var(--line); padding-top:16px; margin-top:38px;
}

/* ---------- FORMULARZ ---------- */
/* Siedzi w .contact__box, czyli na --ink. Wszystkie kolory zmierzone na tym tle:
   etykiety --paper 15.45, treść zgody --muted-dark 7.71, linki i gwiazdki
   --accent 8.43, błędy #ff8a80 7.52. Pola są jasne — tekst --text na białym
   ma 15.68, a placeholder --muted 5.76.
   Błąd NIGDY nie jest sygnalizowany samym kolorem: obok czerwieni zawsze idzie
   tekst komunikatu i aria-invalid. Daltonista i czytnik ekranu dostają to samo. */
.form{ display:grid; gap:13px; }
/* Pola i zgoda to <p>, więc łapały .contact__box p{margin-bottom:22px} —
   reguła z wyższą specyficznością niż .pole, doklejająca 22px do KAŻDEGO
   pola ponad grid gap. To ona rozdymała formularz, nie odstępy.
   Ten sam poziom specyficzności (0,1,1), ale niżej w pliku, więc wygrywa.
   Odstępami rządzi wyłącznie `gap` powyżej. */
.form p{ margin:0; }
/* Imię + telefon obok siebie — krótkie wpisy nie potrzebują całej szerokości.
   Poniżej 520px (wąska kolumna albo telefon) wracają na dwa wiersze. */
.form__rzad{ display:grid; grid-template-columns:1fr 1fr; gap:13px; }
@media (max-width:520px){ .form__rzad{ grid-template-columns:1fr; } }
.pole{ display:grid; gap:5px; align-content:start; }
.pole label{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted-dark);
}
.pole input, .pole textarea{
  width:100%; padding:10px 12px; border-radius:8px;
  border:1px solid transparent; background:var(--paper-2); color:var(--text);
  font-family:var(--font-body); font-size:15px; line-height:1.4;
}
.pole textarea{ resize:vertical; min-height:78px; }
/* Firefox sam przygasza placeholder — opacity:1 przywraca zmierzony kontrast. */
.pole input::placeholder, .pole textarea::placeholder{ color:var(--muted); opacity:1; }
.pole--blad input, .pole--blad textarea{ border-color:#b3261e; border-width:2px; }
.pole__err{ color:#ff8a80; font-size:13.5px; line-height:1.4; }

.form__blad{
  background:rgba(255,138,128,.12); border:1px solid #ff8a80;
  border-radius:10px; padding:14px 16px; color:#ff8a80; font-size:14.5px;
}
.form__blad p{ color:inherit; font-size:inherit; margin:0; }
.form__blad ul{ margin:8px 0 0 18px; }
.form__blad li{ margin-top:3px; }

/* Pułapka na boty — poza ekranem, ale nie display:none: część botów pomija
   pola ukryte w ten sposób, a wtedy pułapka nic nie łapie. */
.form__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.zgoda{ display:grid; grid-template-columns:auto 1fr; gap:6px 10px; align-items:start; margin-top:3px; }
.zgoda input{
  width:24px; height:24px; margin:0; flex:none;   /* 24px = minimalny cel dotykowy WCAG 2.2 */
  accent-color:var(--accent);
}
.zgoda label{
  font-family:var(--font-body); font-size:13.5px; letter-spacing:0;
  text-transform:none; color:var(--muted-dark); line-height:1.5;
}
.zgoda label a{ color:var(--accent); text-decoration:underline; }
.zgoda label a:hover{ text-decoration:none; }
.zgoda .pole__err{ grid-column:2; }
.zgoda--blad input{ outline:2px solid #ff8a80; outline-offset:2px; }

/* Turnstile rysuje Cloudflare w iframe — nie stylujemy środka, tylko
   rezerwujemy miejsce. min-height 65px = wysokość widżetu; bez tego
   przycisk podskakuje, gdy widżet się doładuje (CLS w Lighthouse). */
.form__turnstile{ min-height:65px; margin-top:2px; }

.form__submit{ width:100%; margin-top:4px; }

/* ---------- FOOTER ---------- */
.footer{ background:var(--ink); color:var(--muted-dark); padding:64px 0 0; }
.footer__grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:44px; }
.footer h4{ font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--paper); margin-bottom:16px; }
.footer ul{ list-style:none; }
.footer li{ margin-bottom:9px; font-size:15px; }
.footer a:hover{ color:var(--accent); }
.footer__about p{ font-size:15px; margin:14px 0 0; max-width:340px; }
.footer__bot{
  border-top:1px solid var(--line-dark); padding:22px 0; display:flex;
  justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:12.5px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:960px){
  .cards, .quotes{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .contact{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  .nav__links{
    position:fixed; inset:var(--nav-h) 0 auto 0; background:var(--ink);
    flex-direction:column; align-items:flex-start; gap:0; padding:8px 24px 20px;
    border-bottom:1px solid var(--line-dark); display:none;
  }
  .nav__links.open{ display:flex; }
  .nav__links a{ padding:14px 0; width:100%; font-size:14px; }
  .nav__links a.active::after{ display:none; }
  .burger{ display:block; }
  .nav__phone{ display:none; }
  .cards, .quotes, .steps{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .section{ padding:64px 0; }
  .hero{ padding:64px 0 56px; }
  /* Tekst zajmuje tu całą szerokość, więc gradient z jasną prawą stroną
     przestaje go osłaniać — kryjemy równomiernie.
     Zmierzone na realnym komplecie: --muted-dark min 5.74. */
  .hero, .pagehead{
    background-image:
      linear-gradient(rgba(20,28,38,.91), rgba(20,28,38,.89)),
      var(--baner-foto, none);
  }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ---------- SKIP LINK ---------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:var(--ink); padding:12px 20px;
  font-family:var(--font-display); font-weight:700; border-radius:0 0 8px 0;
}
.skip:focus{ left:0; }