/* ============================================================
   Pole z góry — styl.css
   Mobile-first, bez frameworków i bez CDN (tylko fonty systemowe).
   Zasady: jasne tło, ciemny tekst, jeden kolor akcentowy (zieleń),
   liczby w monospace (fakt), zdania w tekstowej (obietnica),
   ruch tylko tam, gdzie coś się dzieje.
   ============================================================ */

:root{
  --tlo:#f7f6f0;          /* ciepła, jasna biel — papier */
  --tlo-jasny:#eef3ea;    /* jasna zieleń na przemienne sekcje */
  --kart:#ffffff;
  --atrament:#1c2b21;     /* prawie czarna zieleń */
  --mut:#55635a;          /* tekst pomocniczy */
  --linia:#e2e6dc;        /* obramowania */
  --akcent:#2f7d46;       /* zieleń upraw — jeden akcent */
  --akcent-ciem:#1e5c33;
  --akcent-jasny:#e3efe2;
  --ostrzezenie-tlo:#fbf3e0;
  --ostrzezenie-linia:#e8d6a6;
  --ostrzezenie-tekst:#6d5213;
  --promien-karty:22px;
  --promien-przycisk:14px;
  --cien:0 1px 2px rgba(28,43,33,.05), 0 14px 34px rgba(28,43,33,.07);
  --cien-drobny:0 1px 2px rgba(28,43,33,.06);
  --czcionka:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","Segoe UI Mono",Consolas,Menlo,monospace;
}

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

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--czcionka);
  font-size:17px;
  line-height:1.65;
  color:var(--atrament);
  background:var(--tlo);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{display:block;max-width:100%}
a{color:var(--akcent-ciem)}
p{margin:0 0 1em}

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

/* Kontener */
.opak{
  width:min(1120px,100% - 40px);
  margin-inline:auto;
}

/* Sekcje — kotwice nie chowają się pod przyklejonym nagłówkiem */
[id]{
  scroll-margin-top:84px;
}

/* ============ NAGŁÓWEK ============ */
.naglowek{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(247,246,240,.86);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linia);
}
.naglowek .opak{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:64px;
  padding-block:10px;
}
.logo{
  font-weight:800;
  font-size:1.22rem;
  letter-spacing:-.02em;
  color:var(--atrament);
  text-decoration:none;
  white-space:nowrap;
}
.menu{
  display:flex;
  align-items:center;
  gap:6px;
}
.menu a{
  text-decoration:none;
  color:var(--atrament);
  font-weight:600;
  font-size:.98rem;
  padding:8px 12px;
  border-radius:10px;
  transition:background .18s ease,color .18s ease;
}
.menu a:not(.przycisk):hover{background:var(--akcent-jasny);color:var(--akcent-ciem)}
.menu a:not(.przycisk){display:none} /* telefon: tylko nazwa i przycisk */

/* ============ PRZYCISKI ============ */
.przycisk{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
  text-decoration:none;
  font-weight:700;
  font-size:1rem;
  line-height:1.2;
  padding:12px 20px;
  border-radius:var(--promien-przycisk);
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background .18s ease,color .18s ease,border-color .18s ease;
}
.przycisk:active{transform:translateY(1px)}
.przycisk--maly{padding:9px 16px;font-size:.95rem}
.przycisk--duzy{padding:16px 28px;font-size:1.08rem;border-radius:16px}
.przycisk--pelny{width:100%}
/* Dotyk: każdy przycisk ma co najmniej 44×44 px (wymaganie zlecenia v5, punkty 6).
   Wysokość wymuszona, bo sam padding dawał ok. 36–41 px przy małych przyciskach. */
.przycisk{min-height:44px}
.przycisk{
  background:var(--akcent);
  color:#fff;
  box-shadow:0 10px 22px rgba(47,125,70,.28);
}
.przycisk:hover{background:var(--akcent-ciem);transform:translateY(-1px);box-shadow:0 14px 26px rgba(47,125,70,.32)}
.przycisk--ghost{
  background:transparent;
  color:var(--akcent-ciem);
  border-color:var(--akcent);
  box-shadow:none;
}
.przycisk--ghost:hover{background:var(--akcent-jasny);box-shadow:none}

/* ============ HERO (1. pierwszy ekran) ============ */
/* Zdjęcie pól i łąki na całą szerokość. Tekst leży na przyciemnieniu: na telefonie od dołu,
   na komputerze od lewej — tam, gdzie jest tekst, a nie w całym kadrze. */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  min-height:clamp(600px,88vh,880px);
  padding:140px 0 60px;
  color:#fff;
  background:#46512f; /* kolor zastępczy, zanim zdjęcie się wczyta */
}
.hero__tlo{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:64% 58%;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(13,24,15,.06) 0%,rgba(13,24,15,.42) 36%,rgba(13,24,15,.86) 100%);
}
.hero__tresc{max-width:660px}
.hero .nadtytul{color:#dcefc0}
.hero h1{
  font-size:clamp(2.2rem,6.4vw,4.2rem);
  line-height:1.04;
  letter-spacing:-.03em;
  font-weight:800;
  margin:0 0 20px;
  max-width:16ch;
  text-shadow:0 2px 28px rgba(0,0,0,.35);
}
.hero__podtytul{
  font-size:clamp(1.05rem,2.2vw,1.28rem);
  color:rgba(255,255,255,.92);
  max-width:54ch;
  margin:0 0 22px;
  text-shadow:0 1px 14px rgba(0,0,0,.3);
}
.hero__cena{
  font-size:1.12rem;
  margin:0 0 24px;
}
.hero__cena strong{
  font-family:var(--mono);
  font-size:1.4rem;
  color:#e8f6c9;
}
.hero__akcje{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:16px;
}
.hero .przycisk--ghost{
  color:#fff;
  border-color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.hero .przycisk--ghost:hover{background:rgba(255,255,255,.18)}
.hero__dopisek{
  font-size:.95rem;
  color:rgba(255,255,255,.82);
  max-width:52ch;
  margin:0;
}
/* Podpis „zdjęcie poglądowe" — mały, ale zawsze widoczny w kadrze */
.foto-podpis{
  position:absolute;
  right:14px;
  bottom:10px;
  margin:0;
  font-size:.72rem;
  letter-spacing:.04em;
  color:rgba(255,255,255,.66);
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}

/* ============ PAS ZDJĘCIA — pola z lotu ptaka ============ */
.pas-foto{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  min-height:clamp(340px,50vw,580px);
  padding:56px 0;
  color:#fff;
  background:#55632f;
}
.pas-foto__tlo{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
}
.pas-foto::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(13,24,15,0) 28%,rgba(13,24,15,.74) 100%);
}
.pas-foto__haslo{
  margin:0;
  font-size:clamp(1.45rem,3.6vw,2.5rem);
  font-weight:800;
  line-height:1.16;
  letter-spacing:-.02em;
  max-width:28ch;
  text-shadow:0 2px 22px rgba(0,0,0,.45);
}

/* ============ FORMULARZ NA TLE ŁĄKI ============ */
.sekcja.sekcja--laka{
  background-color:#eef1e2;
  background-image:
    linear-gradient(180deg,var(--tlo) 0%,rgba(247,246,240,.78) 26%,rgba(247,246,240,.12) 66%,rgba(247,246,240,0) 100%),
    url("img/laka.webp");
  background-size:cover;
  background-position:center bottom;
  background-repeat:no-repeat;
  padding-bottom:200px;
}
@media (max-width:760px){
  .sekcja.sekcja--laka{
    background-image:
      linear-gradient(180deg,var(--tlo) 0%,rgba(247,246,240,.78) 26%,rgba(247,246,240,.12) 66%,rgba(247,246,240,0) 100%),
      url("img/laka-960.webp");
    padding-bottom:130px;
  }
}

/* ============ SEKCJE OGÓLNE ============ */
/* Tła sekcji to pola i łąki: papier z bruzdami, zielona łąka, złote zboże, niebo. */
.sekcja{
  padding:72px 0;
  background-color:var(--tlo);
  background-image:repeating-linear-gradient(99deg, rgba(47,125,70,.035) 0 3px, rgba(47,125,70,0) 3px 30px);
}
.sekcja--jasna{
  background-color:#e9f2df;
  background-image:
    repeating-linear-gradient(99deg, rgba(47,125,70,.05) 0 3px, rgba(47,125,70,0) 3px 28px),
    radial-gradient(1000px 420px at 12% 0%, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg,#eaf3e2 0%,#e2eed6 58%,#eef4e6 100%);
}
/* Niebo nad polem — sekcja przykładu */
.sekcja--niebo{
  background-color:#f2f6ee;
  background-image:
    repeating-linear-gradient(99deg, rgba(47,125,70,.03) 0 3px, rgba(47,125,70,0) 3px 30px),
    radial-gradient(900px 380px at 80% 0%, rgba(214,234,248,.75) 0%, rgba(214,234,248,0) 66%),
    linear-gradient(180deg,#f4f8ef 0%,#eef3e6 100%);
}
/* Złote zboże — sekcja cennika */
.sekcja--pole{
  background-color:#f7f1de;
  background-image:
    repeating-linear-gradient(98deg, rgba(176,134,40,.06) 0 3px, rgba(176,134,40,0) 3px 26px),
    radial-gradient(820px 380px at 86% 0%, rgba(255,238,182,.7) 0%, rgba(255,238,182,0) 64%),
    linear-gradient(180deg,#faf5e6 0%,#f5edd6 58%,#f7f6f0 100%);
}
/* Łąka — sekcja trzech zasad */
.sekcja--zasady{
  background-color:#eaf3e1;
  background-image:
    repeating-linear-gradient(99deg, rgba(47,125,70,.045) 0 3px, rgba(47,125,70,0) 3px 28px),
    linear-gradient(180deg,#eef6e7 0%,#deedd2 100%);
}
/* Łąka ze skrajem zboża — sekcja „Nad czym pracujemy" */
.sekcja--pracujemy{
  background-color:#edf4e2;
  background-image:
    repeating-linear-gradient(101deg, rgba(47,125,70,.05) 0 2px, rgba(47,125,70,0) 2px 24px),
    radial-gradient(760px 340px at 12% 0%, rgba(255,241,196,.7) 0%, rgba(255,241,196,0) 62%),
    linear-gradient(180deg,#eef5e6 0%,#e6f1d8 55%,#f3f7ee 100%);
}
.nadtytul{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.82rem;
  font-weight:700;
  color:var(--akcent-ciem);
  margin:0 0 10px;
}
h2{
  font-size:clamp(1.75rem,4.6vw,2.7rem);
  line-height:1.12;
  letter-spacing:-.025em;
  font-weight:800;
  margin:0 0 18px;
  max-width:22ch;
}
.sekcja__wstep{
  font-size:1.08rem;
  color:var(--mut);
  max-width:62ch;
}
.sekcja__wstep--mala{font-size:.98rem}
.cytat{
  margin:26px 0 14px;
  padding:22px 24px;
  background:var(--kart);
  border-left:6px solid var(--akcent);
  border-radius:0 var(--promien-karty) var(--promien-karty) 0;
  box-shadow:var(--cien-drobny);
  font-size:clamp(1.15rem,2.6vw,1.45rem);
  font-weight:800;
  line-height:1.3;
  letter-spacing:-.015em;
  max-width:30ch;
}

/* ============ PRZYKŁAD (2) ============ */
.dwa-obrazki{
  display:grid;
  gap:18px;
  margin:36px 0 14px;
}
.ramka-obrazka{
  margin:0;
  background:var(--kart);
  border:1px solid var(--linia);
  border-radius:var(--promien-karty);
  overflow:hidden;
  box-shadow:var(--cien-drobny);
}
.obrazek-holder{
  background:
    radial-gradient(420px 200px at 30% 10%,#dcead7 0%,rgba(220,234,215,0) 65%),
    #f3f6f0;
}
.obrazek-holder--ciemny{
  background:
    radial-gradient(420px 220px at 70% 20%,#cfe0c8 0%,rgba(207,224,200,0) 70%),
    #edf3ea;
}
.obrazek-holder svg{
  width:100%;
  height:auto;
  aspect-ratio:3/2;
  color:var(--akcent);
  opacity:.4;
}
.ramka-obrazka figcaption{
  padding:14px 18px 18px;
  font-size:.98rem;
  color:var(--mut);
  border-top:1px solid var(--linia);
}
.ramka-obrazka figcaption strong{color:var(--atrament)}
.dopisek-obrazkow{
  font-size:.9rem;
  color:var(--mut);
  max-width:70ch;
}
.pdf-akcja{
  margin-top:26px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}

/* ============ KAFLE (3. zawartość) ============ */
.kafle{
  display:grid;
  gap:16px;
  margin:34px 0;
}
.kafel{
  background:var(--kart);
  border:1px solid var(--linia);
  border-radius:var(--promien-karty);
  padding:26px 26px 22px;
  box-shadow:var(--cien-drobny);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.kafel:hover{
  transform:translateY(-3px);
  box-shadow:var(--cien);
  border-color:#cfe0c8;
}
.kafel h3{
  font-size:1.16rem;
  letter-spacing:-.01em;
  margin:0 0 8px;
}
.kafel p{
  font-size:.98rem;
  color:var(--mut);
  margin:0;
}

/* Ramka ważnego ograniczenia */
.ostrzezenie{
  margin:0 0 10px;
  background:var(--ostrzezenie-tlo);
  border:1px solid var(--ostrzezenie-linia);
  border-radius:16px;
  padding:16px 20px;
}
.ostrzezenie p{margin:0;color:var(--ostrzezenie-tekst);font-size:1rem}
.srodek{text-align:center}
.srodek .przycisk{margin-top:14px}

/* ============ CENNIK (4) ============ */
.cennik{
  margin:34px 0 8px;
  background:var(--kart);
  border:1px solid var(--linia);
  border-radius:var(--promien-karty);
  overflow:hidden;
  box-shadow:var(--cien);
}
.cennik__wiersz{
  display:grid;
  grid-template-columns:1fr auto;
  gap:18px;
  align-items:center;
  padding:20px 22px;
  border-bottom:1px solid var(--linia);
}
.cennik__wiersz:last-child{border-bottom:0}
.cennik__naglowek{
  display:none;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--mut);
  background:#f3f5ef;
  padding:10px 22px;
}
.cennik__wiersz--wypel{
  background:var(--akcent-jasny);
  box-shadow:inset 3px 0 0 var(--akcent);
}
.cena{
  font-family:var(--mono);
  font-weight:700;
  font-size:clamp(1.5rem,4vw,1.9rem);
  letter-spacing:-.03em;
  color:var(--akcent-ciem);
  white-space:nowrap;
}
.cennik__noty{
  display:grid;
  gap:10px;
  margin:22px 0 18px;
}
.cennik__noty p{
  margin:0;
  color:var(--mut);
  font-size:1rem;
  max-width:72ch;
}

/* ============ KROKI (5. jak zamówić) ============ */
.kroki{
  list-style:none;
  margin:36px 0 0;
  padding:0;
  display:grid;
  gap:16px;
  counter-reset:krok;
}
.krok{
  background:var(--kart);
  border:1px solid var(--linia);
  border-radius:var(--promien-karty);
  padding:26px 24px;
  box-shadow:var(--cien-drobny);
  position:relative;
}
.krok__nr{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--akcent);
  color:#fff;
  font-family:var(--mono);
  font-weight:700;
  font-size:1.15rem;
  margin-bottom:14px;
  box-shadow:0 8px 16px rgba(47,125,70,.3);
}
.krok h3{
  font-size:1.14rem;
  letter-spacing:-.01em;
  margin:0 0 8px;
}
.krok p{
  font-size:.98rem;
  color:var(--mut);
  margin:0;
}
.dopisek{
  font-size:.95rem;
  color:var(--mut);
  margin:24px 0 0;
  max-width:70ch;
}
.pomoc{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin-top:34px;
}
.pomoc__sms{
  font-size:.92rem;
  color:var(--mut);
}

/* ============ AUTOR (6) ============ */
.autor__siatka{
  display:grid;
  gap:28px;
  align-items:center;
}
.autor__znak{
  width:min(220px,60vw);
  margin-inline:auto;
}
.autor__znak svg{
  width:100%;
  height:auto;
  color:var(--akcent);
}
.autor__tresc p{
  color:var(--mut);
  max-width:64ch;
}
.autor__tresc p:first-of-type{color:var(--atrament)}

/* ============ FAQ (7) ============ */
.faq{
  margin-top:34px;
  display:grid;
  gap:12px;
}
.faq details{
  background:var(--kart);
  border:1px solid var(--linia);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--cien-drobny);
}
.faq summary{
  cursor:pointer;
  list-style:none;
  padding:18px 22px;
  font-weight:700;
  font-size:1.04rem;
  letter-spacing:-.01em;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  transition:background .15s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";
  font-family:var(--mono);
  font-size:1.4rem;
  line-height:1;
  color:var(--akcent);
  transition:transform .2s ease;
  flex-shrink:0;
}
.faq details[open] summary{background:var(--akcent-jasny)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{
  margin:0;
  padding:0 22px 20px;
  color:var(--mut);
  font-size:1rem;
  max-width:72ch;
}

/* ============ FORMULARZ (8) ============ */
.formularz-karta{
  background:var(--kart);
  border:1px solid var(--linia);
  border-radius:26px;
  padding:30px 22px;
  box-shadow:var(--cien);
}
.formularz{
  margin-top:12px;
  display:grid;
  gap:20px;
}
.pole{
  display:grid;
  gap:8px;
}
.pole label{
  font-weight:700;
  font-size:1rem;
  letter-spacing:-.01em;
}
.wymagane,.opcjonalne{
  font-weight:600;
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:2px 8px;
  border-radius:999px;
  vertical-align:1px;
}
.wymagane{background:var(--akcent-jasny);color:var(--akcent-ciem)}
.opcjonalne{background:#f0efe8;color:var(--mut)}
.pole input,.pole textarea,.pole select{
  font:inherit;
  font-size:1rem;      /* nigdy mniej niż 16 px — iPhone powiększa ekran przy wpisywaniu do mniejszych pól */
  color:var(--atrament);
  background:#fbfbf7;
  border:1.5px solid var(--linia);
  border-radius:14px;
  padding:13px 15px;
  width:100%;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.pole input:focus,.pole textarea:focus,.pole select:focus{
  outline:none;
  border-color:var(--akcent);
  box-shadow:0 0 0 4px rgba(47,125,70,.15);
  background:#fff;
}
.pole textarea{resize:vertical;min-height:90px}
.pole__ostrzezenie{
  margin:0;
  font-size:.92rem;
  color:var(--ostrzezenie-tekst);
  background:var(--ostrzezenie-tlo);
  border:1px solid var(--ostrzezenie-linia);
  border-radius:12px;
  padding:10px 14px;
}
.pole__info{
  font-size:.9rem;
  color:var(--mut);
  margin:0;
  max-width:74ch;
}

/* ============ STOPKA (9) ============ */
.stopka{
  background:#16271c;
  color:#cddacf;
  padding:56px 0 48px;
  font-size:.96rem;
}
.stopka a{color:#a8d9b0}
.stopka__siatka{
  display:grid;
  gap:36px;
}
.stopka__marka{
  font-weight:800;
  color:#fff;
  font-size:1.2rem;
  letter-spacing:-.015em;
  margin-bottom:14px;
}
.stopka p{margin:0 0 10px}
.stopka__zastrzezenie{
  color:#9db0a0;
  font-size:.9rem;
  max-width:46ch;
}
.stopka__dokumenty{display:grid;gap:12px;align-content:start}
.stopka__dokumenty details{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:4px 18px;
}
.stopka__dokumenty summary{
  cursor:pointer;
  font-weight:700;
  color:#fff;
  padding:12px 0;
  list-style:none;
}
.stopka__dokumenty summary::-webkit-details-marker{display:none}
.stopka__dokumenty details[open] summary{border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:12px}
.stopka__tresc{padding-bottom:16px}
.stopka__tresc p{margin:0 0 10px;color:#cddacf;font-size:.92rem}
.stopka__mala{color:#9db0a0;font-size:.85rem}
.stopka__mala a{color:#a8d9b0}

/* ============ TRZY ZASADY (pozycjonowanie) ============ */
.zasady{
  display:grid;
  gap:16px;
  margin:34px 0 0;
}
.zasada{
  background:var(--kart);
  border:1px solid var(--linia);
  border-top:4px solid var(--akcent);
  border-radius:var(--promien-karty);
  padding:26px 24px 22px;
  box-shadow:var(--cien-drobny);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.zasada:hover{transform:translateY(-3px);box-shadow:var(--cien);border-color:#cfe0c8;border-top-color:var(--akcent-ciem)}
.zasada__nr{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--akcent-jasny);
  color:var(--akcent-ciem);
  font-family:var(--mono);
  font-weight:700;
  font-size:1.05rem;
  margin-bottom:14px;
}
.zasada h3{
  font-size:1.14rem;
  letter-spacing:-.01em;
  margin:0 0 10px;
}
.zasada p{
  margin:0;
  font-size:.98rem;
  color:var(--mut);
}

/* ============ NAD CZYM PRACUJEMY ============ */
.pracujemy{
  display:grid;
  gap:16px;
  margin:34px 0 0;
}
.praca{
  display:flex;
  flex-direction:column;
  gap:12px;
  background:var(--kart);
  border:1px solid var(--linia);
  border-radius:var(--promien-karty);
  padding:26px 24px 22px;
  box-shadow:var(--cien-drobny);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.praca:hover{transform:translateY(-3px);box-shadow:var(--cien);border-color:#cfe0c8}
.praca__znak{
  display:flex;
  align-items:center;
  justify-content:center;
  width:54px;
  height:54px;
  border-radius:16px;
  background:var(--akcent-jasny);
  color:var(--akcent-ciem);
}
.praca__znak svg{width:30px;height:30px}
.praca h3{
  font-size:1.12rem;
  letter-spacing:-.01em;
  margin:0;
}
.praca p{
  margin:0;
  font-size:.98rem;
  color:var(--mut);
  flex:1;
}
.praca .przycisk{align-self:flex-start;margin-top:6px;font-size:.92rem}
.pracujemy__stopka{
  margin:22px 0 0;
  font-size:.95rem;
  color:var(--mut);
  max-width:74ch;
}
.pracujemy__wybor{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  margin-top:26px;
}
.uwaga-pomiar{
  margin:0;
  font-size:.9rem;
  color:var(--mut);
  background:rgba(255,255,255,.72);
  border:1px solid var(--linia);
  border-radius:14px;
  padding:12px 16px;
  max-width:74ch;
}
.pomysly-rolnikow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  margin-top:34px;
  padding:28px;
  color:#fff;
  background:linear-gradient(135deg,var(--akcent-ciem),#173e2a);
  border-radius:var(--promien-karty);
  box-shadow:var(--cien);
}
.pomysly-rolnikow .nadtytul{color:#d7ebd5}
.pomysly-rolnikow h3{
  margin:0 0 8px;
  font-size:clamp(1.35rem,3vw,1.9rem);
  line-height:1.15;
}
.pomysly-rolnikow p:not(.nadtytul){margin:0;max-width:58ch;color:#e5eee7}
.pomysly-rolnikow .przycisk{
  flex:0 0 auto;
  color:var(--akcent-ciem);
  background:#fff;
  border-color:#fff;
}
@media (max-width:719px){
  .pomysly-rolnikow{align-items:flex-start;flex-direction:column;padding:24px 20px}
}

/* ============================================================
   SZERSZE EKRANY
   ============================================================ */

/* ≥720px — tablet: linki menu wracają, obrazki obok siebie */
@media (min-width:720px){
  .menu a:not(.przycisk){display:inline-flex;align-items:center;min-height:44px}
  .menu a.menu__tylko-szerokie{display:none} /* długi link wchodzi dopiero na szerokim ekranie */
  .dwa-obrazki{grid-template-columns:1fr 1fr}
  .kafle{grid-template-columns:1fr 1fr}
  .kroki{grid-template-columns:1fr 1fr}
  .cennik__naglowek{display:grid}
  .formularz-karta{padding:44px 48px}
  .stopka__siatka{grid-template-columns:1.2fr 1fr;gap:48px}
}

/* ≥880px — trzy zasady w jednym rzędzie */
@media (min-width:880px){
  .zasady{grid-template-columns:repeat(3,1fr)}
}

/* ≥980px — desktop: hero w dwóch kolumnach, większe sekcje */
@media (min-width:980px){
  body{font-size:18px}
  .naglowek .opak{min-height:72px}
  .hero{align-items:center;padding:150px 0 120px}
  .hero::after{
    background:
      linear-gradient(90deg,rgba(13,24,15,.84) 0%,rgba(13,24,15,.64) 32%,rgba(13,24,15,.2) 60%,rgba(13,24,15,0) 78%),
      linear-gradient(180deg,rgba(13,24,15,0) 72%,rgba(13,24,15,.3) 100%);
  }
  .hero__tlo{object-position:50% 62%}
  .sekcja{padding:104px 0}
  .sekcja.sekcja--laka{padding-bottom:240px}
  .kafle{grid-template-columns:repeat(4,1fr)}
  .kroki{grid-template-columns:repeat(4,1fr)}
  .pracujemy{grid-template-columns:repeat(2,1fr)}
  .autor__siatka{
    grid-template-columns:auto 1fr;
    gap:72px;
  }
  .autor__znak{width:280px}
  .formularz-karta{
    max-width:840px;
    margin-inline:auto;
    padding:56px 64px;
  }
}

/* ≥1040px — wraca długi link menu („Nad czym pracujemy") */
@media (min-width:1040px){
  .menu a.menu__tylko-szerokie{display:inline-block}
}

/* ≥1240px — szeroki ekran: kontener rośnie do limitu */
@media (min-width:1240px){
  .opak{width:min(1180px,100% - 48px)}
}

/* ============================================================
   RUCH TYLKO TAM, GDZIE COŚ SIĘ DZIEJE
   Wejście sekcji w kadr — progresywne (animation-timeline),
   bez JavaScriptu. Gdy przeglądarka nie wspiera — treść po prostu jest.
   ============================================================ */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .sekcja,.stopka{
      animation:wejscie linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 32%;
    }
  }
}
@keyframes wejscie{
  from{opacity:0;transform:translateY(26px)}
  to{opacity:1;transform:translateY(0)}
}

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

/* Prawdziwe mapy w sekcji „Przykład" (od 10.09 — zgoda właściciela pola) */
.ramka-obrazka img{width:100%;height:auto;display:block;background:#fff}
.ramka-obrazka--szeroka{margin:0 0 14px}

/* ============================================================
   MAPA DO WSKAZANIA POLA (sekcja formularza)
   ============================================================ */
.pole--mapa{gap:6px}
.mapa__pasek{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-bottom:2px;
}
.mapa__przelacznik{
  display:inline-flex;
  border:1.5px solid var(--linia);
  border-radius:12px;
  overflow:hidden;
  background:#fbfbf7;
}
.mapa__przycisk{
  font:inherit;
  font-size:.92rem;
  font-weight:600;
  color:var(--mut);
  background:transparent;
  border:0;
  padding:9px 14px;
  cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.mapa__przycisk + .mapa__przycisk{border-left:1.5px solid var(--linia)}
.mapa__przycisk:hover{background:var(--akcent-jasny);color:var(--akcent-ciem)}
.mapa__przycisk.jest-wybrany{background:var(--akcent-jasny);color:var(--akcent-ciem)}
.mapa-pole{
  position:relative;
  height:320px;          /* telefon: około 320 px wysokości */
  border:1.5px solid var(--linia);
  border-radius:16px;
  overflow:hidden;
  background:#eef1e2;
  z-index:0;             /* własny kontekst nakładania — panele Leaflet nie zasłonią nagłówka */
}
/* Telefon: jeden palec przewija STRONĘ, dopiero dwa palce przesuwają mapę.
   Leaflet dokłada klasę leaflet-touch-zoom (touch-action:pan-x pan-y) — nadpisujemy ją,
   żeby przeglądarka nie przechwytywała gestu dwóch palców jako przewijania strony.
   Gdy użytkownik włączy przycisk „Dotknij, aby przesuwać mapę", klasa `mapa-pole--przesuwanie`
   zdejmuje pan-y: wtedy jeden palec przesuwa mapę (a nie stronę). */
.mapa-pole.leaflet-container{touch-action:pan-y}
.mapa-pole.leaflet-container.mapa-pole--przesuwanie{touch-action:none}
.mapa-pole--zapas{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  font-size:.95rem;
  color:var(--mut);
  text-align:center;
}
.mapa__podpis{
  margin:0;
  font-size:.9rem;
  color:var(--mut);
}
.mapa__status{
  margin:0;
  font-size:.92rem;
  color:var(--akcent-ciem);
}
.mapa__status--blad{color:var(--ostrzezenie-tekst)}
.pole__info--blad{color:var(--ostrzezenie-tekst)}

/* Pole-pułapka na boty — ukryte przed ludźmi, ale nie display:none
   (boty często pomijają pola ukryte przez display:none). */
.pole--pulapka{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

@media (min-width:720px){
  .mapa-pole{height:420px}
}

/* ============================================================
   WERSJA 5 (2026-09-10, S58) — PŁATNOŚĆ, TELEFON, REGULAMIN
   Wymagania twarde zlecenia: 360 i 375 px bez przewijania w bok,
   przyciski i linki dotykowe ≥44×44 px, pola formularza ≥16 px,
   numer telefonu jako link tel:, treść nie chowa się pod górnym paskiem.
   ============================================================ */

/* ── Płatność w kroku „Zapłać" (BLIK + przelew) ── */
.zaplata{
  display:grid;
  gap:14px;
  margin-top:14px;
}
.zaplata__droga{
  background:#fbfbf7;
  border:1px solid var(--linia);
  border-radius:14px;
  padding:14px 16px;
}
.zaplata__nazwa{
  margin:0 0 8px;
  font-weight:800;
  font-size:1rem;
  letter-spacing:-.01em;
}
.zaplata__dana{
  margin:0 0 6px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px;
  font-size:1rem;
}
.zaplata__dana:last-of-type{margin-bottom:0}
.zaplata__numer{
  font-family:var(--mono);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:.01em;
}
/* Numer rachunku: monospace + możliwość złamania wiersza między grupami cyfr.
   Bez tego 26 cyfr w jednej linii rozpychało stronę na 360 px. */
.rachunek{
  font-family:var(--mono);
  font-size:.98rem;
  letter-spacing:.02em;
  overflow-wrap:anywhere;
  word-break:break-word;
  flex:1 1 auto;
  min-width:0;
}
.zaplata__tytul{
  margin:8px 0 0;
  font-size:.94rem;
  color:var(--mut);
}
/* Przycisk „Kopiuj" — 44×44 px, bo rolnik dotyka go kciukiem. */
.kopiuj{
  font:inherit;
  font-size:.92rem;
  font-weight:700;
  color:var(--akcent-ciem);
  background:var(--akcent-jasny);
  border:1.5px solid var(--akcent);
  border-radius:12px;
  padding:10px 16px;
  min-height:44px;
  min-width:96px;
  cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.kopiuj:hover{background:#d5e8d3}
.kopiuj--gotowe{
  background:var(--akcent);
  border-color:var(--akcent);
  color:#fff;
}

/* ── Podpowiedź pod polem powierzchni ── */
.pole__wskazowka{
  margin:0;
  font-size:.9rem;
  color:var(--mut);
}
.pole__info--regulamin{margin-top:-4px}

/* ── Mapa: podpis i przycisk widoczne tylko na dotyku ── */
.mapa__podpis--dotyk{display:none}
.mapa__przesuwanie{display:none}
@media (pointer:coarse){
  .mapa__podpis--dotyk{display:block}
  .mapa__przesuwanie{display:inline-flex}
}
.mapa__przycisk{
  min-height:44px;      /* dotyk: dwa przyciski podkładu mapy */
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* ── Stopka: linki kontaktowe i do regulaminu jako pola dotykowe ── */
.stopka__kontakt{
  display:inline-flex;
  align-items:center;
  min-height:44px;
}
.stopka__tytul-dokumentow{
  color:#fff;
  font-weight:700;
  margin:0 0 10px;
}
.stopka .przycisk--ghost{
  color:#a8d9b0;
  border-color:#a8d9b0;
  background:transparent;
}
.stopka .przycisk--ghost:hover{background:rgba(168,217,176,.14)}
.faq summary{min-height:44px}
.menu a{min-height:44px}

/* ── Wąskie ekrany (360–420 px): przełącznik podkładu mapy na całą szerokość ── */
@media (max-width:420px){
  .mapa__przelacznik{width:100%}
  .mapa__przycisk{flex:1 1 auto;padding:10px 6px;font-size:.88rem}
  .cennik__wiersz{padding:18px 16px;gap:10px}
  .formularz-karta{padding:24px 16px}
}

/* ============================================================
   STRONA REGULAMINU (regulamin.html)
   Ten sam styl i ten sam kontener co strona główna.
   ============================================================ */
.dokument{
  padding:56px 0 72px;
}
.dokument h1{
  font-size:clamp(1.9rem,5.4vw,2.9rem);
  line-height:1.12;
  letter-spacing:-.025em;
  margin:0 0 14px;
  max-width:26ch;
}
.dokument__wstep{
  font-size:1.06rem;
  color:var(--mut);
  max-width:66ch;
}
.dokument__stan{
  font-size:.9rem;
  color:var(--mut);
  margin:0 0 26px;
}
.dokument section{
  background:var(--kart);
  border:1px solid var(--linia);
  border-radius:var(--promien-karty);
  padding:24px 22px;
  margin-bottom:16px;
  box-shadow:var(--cien-drobny);
}
.dokument h2{
  font-size:1.24rem;
  letter-spacing:-.01em;
  margin:0 0 12px;
  max-width:none;
}
.dokument p,.dokument li{
  color:var(--mut);
  font-size:1rem;
  max-width:74ch;
}
.dokument ul{margin:0 0 10px;padding-left:20px}
.dokument li{margin:0 0 6px}
.dokument strong{color:var(--atrament)}
.dokument a{overflow-wrap:anywhere}
.dokument__powrot{
  display:inline-flex;
  align-items:center;
  min-height:44px;
}
.dokument .przycisk{min-height:44px}
@media (min-width:720px){
  .dokument section{padding:30px 32px}
  .dokument{padding:72px 0 96px}
}

/* Numer telefonu w tekście — pole dotyku 44 px, bo rolnik stuka kciukiem (odbiór v5, S58).
   inline-block z pionowym paddingiem powiększa strefę dotyku bez rozpychania wiersza. */
a[href^="tel:"]{
  display:inline-block;
  padding:11px 2px;
  margin:-11px 0;
  min-height:44px;
  line-height:22px;
}

/* ============================================================
   CZAT — okienko pytań o usługę (czat.js, 14.09.2026)
   Flaga CZAT_WLACZONY w czat.js decyduje, czy okienko się pojawia.
   Styl używa tych samych zmiennych co reszta strony. Okienko jest
   przyklejone do prawego dolnego rogu: zamknięte zajmuje tylko małe
   okrągłe kółko i nie zmienia układu strony; otwarte NIE jest pełnym
   ekranem — strona (w tym formularz) pozostaje widoczna i przewijalna.
   ============================================================ */

/* Automat ma własny kolor (granat „nieba nad polem”), bo zielony zlewał się
   ze stroną i zdjęciami pól (uwaga właściciela 14.09). Kontrast bieli na #1f4e79 ok. 8:1. */
.czat{--czat:#1f4e79;--czat-ciem:#163a5c;--czat-jasny:#e8eff7}

.czat__przycisk{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:70;
  width:56px;
  height:56px;
  border-radius:50%;
  border:2px solid #fff;
  background:var(--czat);
  color:#fff;
  font-family:var(--mono);
  font-size:1.5rem;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(31,78,121,.38);
  transition:transform .15s ease,background .18s ease;
}
.czat__przycisk:hover{background:var(--czat-ciem);transform:translateY(-2px)}

.czat__okno{
  position:fixed;
  right:14px;
  bottom:84px;
  z-index:70;
  width:min(360px,calc(100vw - 28px));
  max-height:min(70vh,560px);
  display:flex;
  flex-direction:column;
  background:var(--kart);
  border:1px solid var(--linia);
  border-radius:var(--promien-karty);
  box-shadow:var(--cien);
  overflow:hidden;
}
/* Atrybut hidden musi wygrywać z display:flex wyżej. */
.czat__okno[hidden]{display:none}

.czat__naglowek{
  position:relative;
  background:var(--czat);
  color:#fff;
  padding:16px 18px 14px;
}
.czat__tytul{
  margin:0 32px 6px 0;
  font-size:1.05rem;
  line-height:1.25;
  letter-spacing:-.01em;
  font-weight:800;
}
.czat__info{
  margin:0;
  font-size:.86rem;
  color:#d6e4f2;
  max-width:46ch;
}
.czat__zamknij{
  position:absolute;
  top:10px;
  right:10px;
  width:40px;
  height:40px;
  border:0;
  border-radius:12px;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:1.4rem;
  line-height:1;
  cursor:pointer;
}
.czat__zamknij:hover{background:rgba(255,255,255,.24)}

.czat__wiadomosci{
  flex:1 1 auto;
  overflow-y:auto;
  padding:14px 16px;
  display:grid;
  gap:10px;
  background:#fbfbf7;
}
.czat__wiadomosc{
  margin:0;
  padding:10px 14px;
  border-radius:14px;
  font-size:.96rem;
  line-height:1.5;
  max-width:88%;
}
.czat__wiadomosc--bot{
  background:var(--czat-jasny);
  color:var(--atrament);
  justify-self:start;
  border-bottom-left-radius:4px;
}
.czat__wiadomosc--uzytkownik{
  background:var(--czat);
  color:#fff;
  justify-self:end;
  border-bottom-right-radius:4px;
}

.czat__formularz{
  display:flex;
  gap:8px;
  align-items:center;
  padding:10px 12px;
  border-top:1px solid var(--linia);
  background:var(--kart);
}
.czat__etykieta{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.czat__pole{
  flex:1 1 auto;
  font:inherit;
  font-size:1rem;
  color:var(--atrament);
  background:#fbfbf7;
  border:1.5px solid var(--linia);
  border-radius:12px;
  padding:11px 12px;
  min-width:0;
}
.czat__pole:focus{
  outline:none;
  border-color:var(--czat);
  box-shadow:0 0 0 4px rgba(31,78,121,.18);
  background:#fff;
}
.czat__wyslij{
  flex:0 0 auto;
  font:inherit;
  font-weight:700;
  font-size:.95rem;
  color:#fff;
  background:var(--czat);
  border:2px solid transparent;
  border-radius:12px;
  padding:10px 14px;
  min-height:44px;
  cursor:pointer;
  transition:background .18s ease;
}
.czat__wyslij:hover{background:var(--czat-ciem)}

/* Telefon (do 375 px): panel mieści się w szerokości okna, a sam przycisk
   jest małym kółkiem w rogu — nie zasłania formularza ani jego przycisków. */
@media (max-width:375px){
  .czat__okno{right:10px;bottom:78px}
  .czat__przycisk{right:10px;bottom:10px}
}