/* Rześkie nogi – przewodnik w krokach, organiczne kształty, pasy na przemian */
:root {
  --morze: #2c9696;
  --glebia: #1c5f5f;
  --wrzos: #c0598c;
  --wrzos-ciemny: #93345f;
  --czerwien: #c32222;
  --czerwien-ciemna: #a11c1c;
  --tlo: #f5fafa;
  --mgla: #e2f3f3;
  --tusz: #1b2d2d;
  --szew: 3px;
  --serif: "Noto Serif Display", Georgia, serif;
  --mono: "Noto Sans Mono", Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tusz);
  font-family: var(--mono);
  font-size: 1.09rem;
  line-height: 1.72;
  padding-bottom: 92px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--glebia); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--wrzos); outline-offset: 3px;
}
small { font-size: .9rem; }
h1, h2, h3 { font-family: var(--serif); line-height: 1.12; margin: 0 0 .6em; font-weight: 700; }
h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.1rem); letter-spacing: -.01em; }
h3 { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.7rem); }
p { margin: 0 0 1em; }

.obszar { width: min(1180px, 100% - 3rem); margin-inline: auto; }

/* ---------- nagłówek ---------- */
.naglowek {
  background: var(--glebia);
  color: #fff;
}
.naglowek .obszar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 0;
}
.znak {
  font-family: var(--serif); font-size: 1.65rem; font-weight: 700; color: #fff; text-decoration: none;
  display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap;
}
.znak svg { width: 26px; height: 32px; flex: 0 0 auto; }

/* ---------- przyciski ---------- */
.guzik {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  background: var(--czerwien); color: #fff; text-decoration: none;
  font-family: var(--mono); font-weight: 700; line-height: 1.25;
  border-radius: 2.2rem .7rem 2.2rem .7rem;
  border: 2px solid transparent;
  transition: background .2s ease;
}
.guzik:hover { background: var(--czerwien-ciemna); }
.guzik-maly { min-height: 52px; padding: .5rem 1.3rem; font-size: 1.15rem; }
.guzik-duzy { min-height: 84px; min-width: 320px; padding: 1rem 2.2rem; font-size: 1.4rem; }
.na-ciemnym .guzik { border-color: #fff; color: #fff; }
.naglowek .guzik { border-color: rgba(255,255,255,.7); color: #fff; }

/* ---------- hero ---------- */
.hero {
  background: var(--glebia); color: #fff;
  position: relative;
  padding: 1.4rem 0 0;
}
.hero-siatka {
  display: grid; grid-template-columns: 7fr 4fr; gap: 3.5rem; align-items: center;
}
.hero h1 {
  font-size: clamp(2.1rem, 1.4rem + 2vw, 3.1rem);
  font-weight: 700; margin-bottom: .45em; max-width: 21ch;
}
.hero .perex { font-size: 1.1rem; margin-bottom: 0; max-width: 56ch; color: #eef8f8; }
.hero-akcja { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 1.2rem; }
.hero-akcja p { margin: 0; font-size: 1rem; color: #d5eeee; max-width: 24ch; }
.hero-zdjecie { margin: 0; }
.hero-zdjecie img {
  width: 100%; aspect-ratio: 5 / 6; object-fit: cover; object-position: 58% 60%;
  border-radius: 999px 999px 2.4rem 2.4rem;
  border: 6px solid var(--morze);
}
.hero-zdjecie figcaption { font-size: .95rem; color: #d5eeee; margin-top: .7rem; max-width: 38ch; }

/* przegląd kroków na falistej linii */
.trasa {
  position: relative; margin: 3rem 0 0; padding: 0 0 3.4rem; list-style: none;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem;
}
.trasa-fala {
  position: absolute; left: 0; right: 0; top: 10px; height: 60px; width: 100%;
  pointer-events: none;
}
.trasa li { position: relative; padding-top: 0; }
.trasa a { color: #fff; text-decoration: none; display: block; }
.trasa a:hover strong { text-decoration: underline; }
.kropla {
  display: grid; place-items: center;
  width: 64px; height: 64px;
  background: var(--tlo); color: var(--glebia);
  border-radius: 50% 50% 50% 8%;
  transform: rotate(-45deg);
  margin-bottom: 1rem;
  box-shadow: 0 0 0 5px var(--glebia);
}
.kropla span { transform: rotate(45deg); font-family: var(--serif); font-size: 1.7rem; font-weight: 700; }
.trasa li:nth-child(2) { margin-top: 1.6rem; }
.trasa li:nth-child(3) { margin-top: .3rem; }
.trasa li:nth-child(4) { margin-top: 1.9rem; }
.trasa strong { display: block; font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; }
.trasa small { display: block; color: #cfeaea; font-size: .95rem; margin-top: .2rem; }

/* ---------- fale między pasami ---------- */
.fala { display: block; width: 100%; height: 70px; }
.fala-hero { background: var(--mgla); }
.fala-hero path { fill: var(--glebia); }

/* ---------- kroki i nić ---------- */
.kroki { position: relative; }
.krok { position: relative; padding: 0 0 4.5rem; }
.krok-pas { background: var(--mgla); }
.krok-ciemny { background: var(--glebia); color: #fff; }
.krok-jasny { background: var(--tlo); }

/* numer kroku na nici: odcinek nici nad kroplą + kropla */
.krok-glowa { text-align: center; padding-top: 0; }
.krok-glowa::before {
  content: ""; display: block; width: var(--szew); height: 70px; margin: 0 auto;
  background: var(--wrzos);
}
.krok-glowa .kropla {
  margin: 0 auto 1.2rem; width: 76px; height: 76px;
  background: var(--wrzos); color: #fff; box-shadow: none;
}
.krok-glowa .kropla span { font-size: 2rem; }
.krok-glowa h2 { max-width: 22ch; margin-inline: auto; }
.krok-glowa .wstep { max-width: 62ch; margin: 0 auto 2.4rem; text-align: left; }
/* odcinek nici pod krokiem, prowadzi do następnego */
.krok::after {
  content: ""; display: block; width: var(--szew); height: 70px; margin: 2.5rem auto -4.5rem;
  background: var(--wrzos);
}
.krok-ostatni::after { display: none; }
.krok-ciemny .krok-glowa::before, .krok-ciemny::after { background: #f2b6d3; }
.krok-ciemny .krok-glowa .kropla { background: #f2b6d3; color: var(--glebia); }

/* krok 1 – lista kontrolna */
.krok1-siatka { display: grid; grid-template-columns: 7fr 5fr; gap: 3rem; align-items: start; }
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { border-top: 2px solid var(--morze); padding: 1.3rem 0 .4rem; }
.lista li:last-child { border-bottom: 2px solid var(--morze); }
.lista label { display: grid; grid-template-columns: 2.2rem 1fr; gap: .9rem; cursor: pointer; }
.lista input {
  appearance: none; -webkit-appearance: none; margin: .35rem 0 0;
  width: 2rem; height: 2rem; border: 3px solid var(--glebia);
  border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%; background: #fff; cursor: pointer;
  display: grid; place-items: center;
}
.lista input:checked { background: var(--glebia); }
.lista input:checked::after { content: ""; width: .55rem; height: 1rem; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg) translate(-1px, -2px); }
.lista h3 { margin-bottom: .35em; }
.lista p { margin-bottom: .8em; }
.uwaga-lista { margin-top: 1.3rem; font-size: 1rem; color: #2a4545; }
.kropla-zdjecie { margin: 0; }
.kropla-zdjecie img {
  width: 100%; aspect-ratio: 1 / 1.08; object-fit: cover; object-position: 35% 60%;
  border-radius: 58% 42% 50% 50% / 46% 50% 50% 54%;
}
.kropla-zdjecie figcaption { font-size: .95rem; margin-top: .8rem; color: #2a4545; }

/* krok 2 – wykład */
.ilustracja { max-width: 720px; margin: 0 auto 3rem; }
.ilustracja img { width: 100%; border-radius: 3rem .8rem 3rem .8rem; }
.ilustracja figcaption { font-size: .95rem; margin-top: .8rem; color: #2a4545; }
.przyczyny-tytul { text-align: center; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); max-width: 26ch; margin: 0 auto 1.6rem; }
.przyczyny { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
.przyczyna { padding-top: 1.6rem; position: relative; }
.przyczyna::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14'%3E%3Cpath d='M0 7 Q15 0 30 7 T60 7' fill='none' stroke='%232c9696' stroke-width='3'/%3E%3C/svg%3E") repeat-x left center / 60px 14px;
}
.przyczyna h3 { font-size: 1.35rem; }
.objawy {
  margin: 3rem auto 0; max-width: 860px;
  background: var(--mgla); padding: 2rem 2.4rem;
  border-radius: 2.6rem 1rem 2.6rem 1rem;
}
.objawy ul { margin: 0 0 1rem; padding-left: 1.3rem; }
.objawy li { margin-bottom: .3rem; }
.objawy li::marker { color: var(--wrzos-ciemny); }
.objawy .dopisek { margin: 0; font-size: 1rem; }

/* krok 3 – liczby */
.liczby { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.liczby-grafika { margin: 0; justify-self: center; width: min(480px, 100%); }
.liczby-grafika img { width: 100%; }
.liczby-tekst h3 { color: #fff; }
.liczby-tekst .fakt { margin-bottom: 2rem; }
.liczby-tekst .zrodla { font-size: .95rem; color: #d5eeee; border-top: 2px dashed #6fb8b8; padding-top: 1rem; }

/* krok 4 – oferta */
.oferta { display: grid; grid-template-columns: 5fr 7fr; gap: 3rem; align-items: start; text-align: left; }
.oferta h2 { margin: 0; }
.oferta .guzik { margin: .6rem 0 1.2rem; }
.oferta .po-guziku { font-size: 1rem; color: #2a4545; margin-top: 1rem; }

/* recenzje */
.glosy { background: var(--mgla); padding: 4.5rem 0; }
.glosy h2 { max-width: 20ch; }
.glosy-rzad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; margin-top: 2rem; }
.glos { margin: 0; position: relative; padding-top: 3rem; }
.glos:nth-child(2) { margin-top: 2.6rem; }
.glos:nth-child(3) { margin-top: 1.2rem; }
.glos::before {
  content: "\201D"; position: absolute; top: -.3rem; left: -.1rem;
  font-family: var(--serif); font-size: 4.4rem; line-height: 1; color: var(--wrzos);
}
.glos blockquote { margin: 0 0 .8rem; font-family: var(--serif); font-size: 1.45rem; line-height: 1.35; }
.glos cite { font-style: normal; font-size: 1rem; color: var(--wrzos-ciemny); font-weight: 700; }

/* FAQ */
.pytania { padding: 4.5rem 0; }
.pytania-siatka { display: grid; grid-template-columns: 5fr 7fr; gap: 3rem; }
.pytania details { border-bottom: 2px solid var(--morze); padding: 1rem 0; }
.pytania summary {
  cursor: pointer; font-family: var(--serif); font-size: 1.3rem; font-weight: 700; line-height: 1.3;
  list-style: none; display: grid; grid-template-columns: 1fr 2rem; gap: 1rem;
}
.pytania summary::-webkit-details-marker { display: none; }
.pytania summary::after { content: "+"; font-family: var(--mono); color: var(--wrzos-ciemny); font-size: 1.6rem; text-align: right; }
.pytania details[open] summary::after { content: "–"; }
.pytania details p { margin: .8rem 0 .2rem; }

/* zakończenie */
.koniec { background: #217a7a; color: #fff; padding: 0 0 4.5rem; }
.fala-koniec { background: var(--tlo); }
.fala-koniec path { fill: #217a7a; }
.koniec-siatka { display: grid; grid-template-columns: 5fr 6fr; gap: 3rem; align-items: center; }
.koniec figure { margin: 0; }
.koniec img {
  width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; object-position: 45% 70%;
  border-radius: 999px 999px 1.6rem 1.6rem; border: 6px solid var(--tlo);
}
.koniec figcaption { font-size: .95rem; margin-top: .7rem; color: #f0fbfb; }
.koniec h2 { color: #fff; }
.koniec p { color: #fff; }

/* stopka */
.stopka { background: var(--tusz); color: #d9e6e6; padding: 2.4rem 0 2rem; font-size: .95rem; }
.stopka .obszar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; }
.stopka nav { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.stopka a { color: #d9e6e6; }
.stopka p { margin: 0; max-width: 60ch; }

/* podstrony */
.podstrona-body { min-height: 100vh; display: flex; flex-direction: column; }
.podstrona { flex: 1; padding: 3.5rem 0 4rem; }
.karta {
  width: min(760px, 100% - 3rem); margin-inline: auto;
  background: #fff; padding: 2.6rem 2.8rem;
  border-radius: 3rem 1rem 3rem 1rem;
  border-top: 10px solid var(--morze);
}
.karta h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); }
.karta h2 { font-size: 1.45rem; margin-top: 1.6em; }
.formularz { display: grid; gap: .5rem; margin-top: 1.4rem; }
.formularz label { font-weight: 700; margin-top: .6rem; }
.formularz input, .formularz textarea {
  font: inherit; padding: .8rem 1rem; border: 2px solid var(--morze); border-radius: 1.2rem .4rem 1.2rem .4rem; background: var(--tlo);
}
.formularz textarea { min-height: 150px; }
.formularz button {
  margin-top: 1rem; justify-self: start; font: inherit; font-weight: 700; font-size: 1.1rem;
  background: var(--glebia); color: #fff; border: 0; padding: .9rem 2rem; min-height: 56px;
  border-radius: 2rem .6rem 2rem .6rem; cursor: pointer;
}
#kontaktDakujeme { margin-top: 1.4rem; background: var(--mgla); padding: 1.2rem 1.4rem; border-radius: 1.4rem .5rem 1.4rem .5rem; }

/* ---------- popup i listwa (engine) ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(12, 38, 38, .84);
  display: none; align-items: center; justify-content: center; padding: 1rem;
}
.modal-overlay.show { display: flex; }
.modal {
  position: relative; width: min(640px, 100%); max-height: 94vh; overflow-y: auto;
  background: var(--tlo); color: var(--tusz); text-align: center;
  padding: 2.6rem 2.2rem 2.2rem;
  border-radius: 3rem 1rem 3rem 1rem;
  border-top: 12px solid var(--morze);
}
.modal .close {
  position: absolute; top: .6rem; right: .8rem; width: 48px; height: 48px;
  background: var(--glebia); color: #fff; border: 0; border-radius: 50%; font-size: 1.8rem; line-height: 1; cursor: pointer;
}
.modal .badge {
  display: inline-block; background: var(--wrzos-ciemny); color: #fff; font-weight: 700;
  padding: .35rem 1rem; border-radius: 1rem .3rem 1rem .3rem; font-size: 1rem;
}
.modal h3 { font-family: var(--serif); font-size: 2.9rem; margin: .8rem 0 .3rem; color: var(--czerwien-ciemna); }
.modal > p { font-size: 1.3rem; font-weight: 700; margin-bottom: 1rem; }
.modal .offer { background: var(--mgla); padding: 1rem 1.2rem; border-radius: 1.6rem .5rem 1.6rem .5rem; margin-bottom: 1.4rem; }
.modal .offer p { margin: .3rem 0; }
.modal .btn { white-space: normal; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  text-decoration: none; font-family: var(--mono); font-weight: 700;
}
.btn-cta { background: var(--czerwien); color: #fff; border-radius: 2rem .6rem 2rem .6rem; min-height: 60px; padding: .7rem 1.6rem; font-size: 1.15rem; }
.btn-cta:hover { background: var(--czerwien-ciemna); }
.btn-cta-xl { min-height: 86px; font-size: 1.4rem; padding: 1rem 2rem; width: 100%; }
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  background: var(--tusz); color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 1.4rem;
  padding: .7rem 1rem; border-top: 4px solid var(--morze);
}
.sticky-cta > span { font-size: 1rem; }
.sticky-cta .btn { flex: 0 0 auto; }

/* ---------- mobil ---------- */
@media (max-width: 860px) {
  .hero-siatka, .krok1-siatka, .przyczyny, .liczby, .oferta, .glosy-rzad, .pytania-siatka, .koniec-siatka { grid-template-columns: 1fr; gap: 2rem; }
  .hero { padding-top: 1.6rem; }
  .hero h1 { max-width: none; }
  .hero-zdjecie img { aspect-ratio: 1 / 1; }
  .trasa { grid-template-columns: 1fr; gap: 1.1rem; padding-bottom: 2rem; margin-top: 2rem; }
  .trasa-fala { display: none; }
  .trasa li, .trasa li:nth-child(n) { margin-top: 0; display: block; }
  .trasa a { display: grid; grid-template-columns: 64px 1fr; gap: 1rem; align-items: center; }
  .trasa .kropla { margin: 0; width: 52px; height: 52px; }
  .glos:nth-child(n) { margin-top: 0; }
  .guzik-duzy { min-width: 0; width: 100%; font-size: 1.3rem; }
  .objawy { padding: 1.6rem 1.4rem; }
  .karta { padding: 2rem 1.4rem; }
  .sticky-cta { flex-direction: column; gap: .5rem; padding: .6rem .8rem; text-align: center; }
  .sticky-cta .btn { min-height: 60px; width: 100%; }
  body { padding-bottom: 150px; }
  .modal h3 { font-size: 2.5rem; }
}
@media (max-width: 420px) {
  .obszar { width: calc(100% - 2rem); }
  .naglowek .guzik-maly { font-size: 1.15rem; padding: .5rem .6rem; min-height: 48px; white-space: nowrap; }
  .naglowek .obszar { gap: .5rem; }
  .znak svg { display: none; }
  .znak { font-size: 1.2rem; }
  .modal { padding: 2.4rem 1.2rem 1.6rem; }
  .modal h3 { font-size: 2.2rem; white-space: nowrap; }
}