/* zaprawiarki.pl — układ w duchu współczesnych stron produktowych:
   dużo powietrza, jeden mocny nagłówek, treść w kartach, miękkie krawędzie.
   Paleta wg ustaleń: zieleń jako jedyny kolor akcentu, reszta to biel, szarości i czerń. */
:root{
  --zielen:#1f7a45; --zielen-ciemna:#155c33; --zielen-jasna:#eaf5ee;
  --czern:#0d1117; --tekst:#1c2128; --szary:#5b6470; --szary-jasny:#f5f7f8;
  --linia:rgba(13,17,23,.10); --bok:clamp(16px,4vw,32px); --rad:16px;
  --cien:0 1px 2px rgba(13,17,23,.05), 0 8px 24px rgba(13,17,23,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--tekst);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:clamp(16px,4.1vw,17px);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--zielen);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{color:var(--czern);line-height:1.15;letter-spacing:-.025em;margin:0 0 .5em}
h1{font-size:clamp(34px,7.5vw,58px);font-weight:800}
h2{font-size:clamp(26px,5.6vw,38px);font-weight:800}
h3{font-size:clamp(19px,4.4vw,22px);font-weight:700}
p{margin:0 0 1em}
.pas{max-width:1140px;margin:0 auto;padding:0 var(--bok)}
.waski{max-width:780px;margin:0 auto;padding:0 var(--bok)}

/* nagłówek */
header.top{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--linia)}
header.top .pas{display:flex;align-items:center;gap:26px;padding-top:14px;padding-bottom:14px}
.logo{font-weight:800;font-size:21px;letter-spacing:-.04em;color:var(--czern)}
.logo span{color:var(--zielen)}
nav.glowna{display:flex;gap:22px;font-size:15px;font-weight:500}
nav.glowna a{color:var(--szary)}
nav.glowna a:hover,nav.glowna a[aria-current]{color:var(--czern);text-decoration:none}
.przycisk{display:inline-flex;align-items:center;gap:8px;background:var(--zielen);color:#fff;
  border:0;border-radius:99px;padding:13px 24px;font:600 15px inherit;cursor:pointer;white-space:nowrap}
.przycisk:hover{background:var(--zielen-ciemna);text-decoration:none;color:#fff}
.przycisk.obrys{background:transparent;color:var(--czern);border:1px solid var(--linia)}
.przycisk.obrys:hover{background:var(--szary-jasny);color:var(--czern)}

/* sekcja otwierająca */
.hero{padding:clamp(48px,9vw,96px) 0 clamp(40px,7vw,72px);
  background:radial-gradient(120% 100% at 50% 0%,var(--zielen-jasna) 0%,#fff 62%)}
.hero .lead{font-size:clamp(17px,4.4vw,20px);color:var(--szary);max-width:640px}
.znacznik{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--linia);
  border-radius:99px;padding:6px 15px;font-size:13.5px;font-weight:600;color:var(--zielen);margin-bottom:20px;
  box-shadow:var(--cien)}
.akcje{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* siatki i karty */
.siatka{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.karta{background:#fff;border:1px solid var(--linia);border-radius:var(--rad);padding:clamp(20px,4vw,28px);
  box-shadow:var(--cien)}
.karta.cicha{background:var(--szary-jasny);box-shadow:none}
.ikona{width:44px;height:44px;border-radius:12px;background:var(--zielen-jasna);color:var(--zielen);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px}
section{padding:clamp(44px,8vw,80px) 0}
section.szara{background:var(--szary-jasny)}
.naglowek-sekcji{max-width:640px;margin-bottom:clamp(26px,5vw,42px)}
.naglowek-sekcji p{color:var(--szary);margin-bottom:0}

/* pasek liczb */
.liczby{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:20px;
  background:var(--czern);border-radius:var(--rad);padding:clamp(24px,5vw,40px);color:#fff}
.liczby h3{color:#fff;font-size:clamp(28px,6vw,40px);margin:0 0 4px;letter-spacing:-.03em}
.liczby p{color:rgba(255,255,255,.68);margin:0;font-size:14.5px}

/* listy zalet i wad */
ul.zalety,ul.wady{list-style:none;padding:0;margin:0 0 14px;font-size:15px}
ul.zalety li,ul.wady li{position:relative;padding-left:26px;margin-bottom:7px;line-height:1.5}
ul.zalety li::before{content:"✓";position:absolute;left:0;color:var(--zielen);font-weight:800}
ul.wady li::before{content:"−";position:absolute;left:0;color:var(--szary);font-weight:800}

/* formularz */
label{display:block;font-weight:600;font-size:14.5px;margin-bottom:6px;color:var(--czern)}
input,select,textarea{width:100%;padding:13px 15px;border:1px solid var(--linia);border-radius:11px;
  font:inherit;font-size:15.5px;background:#fff;color:var(--tekst)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--zielen);outline-offset:1px;border-color:transparent}
.pole{margin-bottom:16px}
.podpowiedz{font-size:13px;color:var(--szary);margin-top:6px;line-height:1.45}
.zgoda{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--szary);line-height:1.5}
.zgoda input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--zielen)}

/* wizualizacja zamiast zdjęcia */
.wizual{aspect-ratio:16/10;border-radius:var(--rad);border:1px solid var(--linia);
  background:linear-gradient(135deg,var(--zielen-jasna),#fff 70%);position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.wizual span{font:700 13px inherit;color:var(--zielen);letter-spacing:.08em;text-transform:uppercase}

footer.stopka{background:var(--czern);color:rgba(255,255,255,.7);padding:clamp(36px,6vw,56px) 0 28px;margin-top:0}
footer.stopka a{color:#fff}
footer.stopka h4{color:#fff;font-size:15px;margin:0 0 12px}
.tabela-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:15px;min-width:620px}
th,td{text-align:left;padding:13px 12px;border-bottom:1px solid var(--linia);vertical-align:top}
th{font-weight:700;color:var(--czern);font-size:13.5px;text-transform:uppercase;letter-spacing:.04em}

/* ── POJAWIANIE SIĘ PRZY PRZEWIJANIU ──────────────────────────────────────────
   Element wjeżdża delikatnie, gdy wchodzi w kadr. Trzy rzeczy, o których łatwo
   zapomnieć, a bez których animacja szkodzi:
   1) treść jest widoczna ZANIM ruszy JavaScript — klasa `.wjazd` zostaje nałożona
      dopiero przez skrypt, więc przy jego braku strona po prostu działa,
   2) `prefers-reduced-motion` wyłącza ruch dla osób, które go nie tolerują,
   3) animujemy tylko `opacity` i `transform` — te dwie własności nie wymuszają
      przeliczenia układu, więc nie zacinają się na słabszym telefonie. */
.wjazd{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.wjazd.widoczny{opacity:1;transform:none}
.wjazd.op-1{transition-delay:.08s}
.wjazd.op-2{transition-delay:.16s}
.wjazd.op-3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .wjazd{opacity:1;transform:none;transition:none}
}

/* Zdjęcia w kartach maszyn i w sekcjach */
.foto{width:100%;border-radius:var(--rad);display:block;object-fit:cover;background:var(--szary-jasny)}
.foto-hero{aspect-ratio:16/10}
.foto-karta{aspect-ratio:4/3}
figure{margin:0}
figcaption{font-size:12.5px;color:var(--szary);margin-top:8px;line-height:1.45}
/* Obraz w sekcji otwierającej dostaje WIĘCEJ miejsca niż tekst: strona stoi na dużym
   kadrze, a maszyna jest tym, po co czytelnik tu przychodzi. */
.hero-siatka{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.28fr);gap:clamp(28px,4vw,56px);align-items:center}
@media (max-width:820px){ .hero-siatka{grid-template-columns:1fr} }

/* Cztery kafle w układzie 2x2 — na szerokim ekranie rząd czterech robi z każdego wąski
   pasek, w którym tekst łamie się co dwa słowa. Poniżej tabletu schodzimy do jednej kolumny. */
.siatka-2x2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:600px){ .siatka-2x2{grid-template-columns:1fr} }


/* ── NAWIGACJA MOBILNA ────────────────────────────────────────────────────────
   Menu było poziomym rzędem linków bez żadnego progu — przy 360 px wychodziło poza
   ekran razem z przyciskiem „Zapytaj o dobór", czyli z jedyną akcją, po którą ktoś
   tu przychodzi. Poniżej 860 px linki chowają się pod przycisk, a rozwinięte menu
   zajmuje pełną szerokość: na telefonie pozycja dotykalna ma mieć rozmiar palca,
   nie linku z desktopu. */
.hamburger{display:none;background:none;border:1px solid var(--kreska);border-radius:10px;
  width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center;flex:none}
.hamburger span{display:block;width:18px;height:2px;background:var(--czern);position:relative}
.hamburger span::before,.hamburger span::after{content:"";position:absolute;left:0;width:18px;
  height:2px;background:var(--czern)}
.hamburger span::before{top:-6px}
.hamburger span::after{top:6px}

@media (max-width:860px){
  header.top .pas{gap:12px;flex-wrap:wrap}
  .hamburger{display:flex}
  nav.glowna{display:none;order:10;width:100%;flex-direction:column;gap:0;
    border-top:1px solid var(--kreska);margin-top:10px;padding-top:6px}
  nav.glowna.otwarte{display:flex}
  nav.glowna a{padding:13px 2px;font-size:16px;border-bottom:1px solid var(--kreska)}
  nav.glowna a:last-child{border-bottom:none}
  header.top .przycisk{padding:10px 16px;font-size:14px}
}

/* Przełącznik języka. Osobno od nawigacji treści, bo to wybór o innym charakterze —
   nie „dokąd idę", tylko „w jakim języku". */
.jezyki{display:flex;gap:2px;align-items:center}
.jezyki a{font-size:12.5px;font-weight:600;color:var(--szary);padding:5px 7px;border-radius:7px;
  text-transform:uppercase;letter-spacing:.03em}
.jezyki a[aria-current]{background:var(--czern);color:#fff}
@media (max-width:860px){ .jezyki{order:5} }