/* =========================================================================
   Adam Dyrcz, strona wizytówka
   Kierunek: świeżo i miękko. Jasne tło z zielonym tchnieniem, białe karty
   uniesione na miękkich cieniach, duża fotografia, dwie sekcje głębokiej
   zieleni z poświatą. Głębia buduje się warstwami, nie obrysem.

   Spis: 1 zmienne, 2 reset, 3 typografia, 4 warstwy i tła, 5 przyciski,
   6 pasek i menu, 7 hero, 8 taśma, 9 o mnie, 10 bento, 11 proces,
   12 historia, 13 certyfikaty, 14 galeria, 15 pytania, 16 kontakt,
   17 stopka, 18 podgląd, 19 ruch, 20 media queries.
   ========================================================================= */

/* ============================ 1. ZMIENNE ============================ */

:root {
  /* powierzchnie jasne */
  --tlo:          #F3F6F2;
  --tlo-2:        #E9F0EA;
  --karta:        #FFFFFF;
  --mieta:        #DFEDE3;

  /* powierzchnie ciemne */
  --las:          #0D1F17;
  --las-2:        #123024;

  /* tekst */
  --atrament:     #0D1F17;
  --atrament-2:   #4C6154;
  --jasny:        #EAF2EC;
  --jasny-2:      #9DB3A5;

  /* zieleń */
  --zielen:       #0B7A3C;   /* wypełnienia z białym tekstem, 5.49:1 */
  --zielen-ciemna:#095F2F;
  --zielen-jasna: #22C55E;   /* akcent, na ciemnym tle jako tekst 7.5:1 */

  /* linie */
  --linia:        rgba(13, 31, 23, 0.10);
  --linia-mocna:  rgba(13, 31, 23, 0.16);
  --linia-jasna:  rgba(234, 242, 236, 0.14);

  /* stan błędu */
  --alarm:        #B3261E;
  --alarm-jasny:  #FFA294;

  /* cienie: każdy z dwóch warstw, bliskiej i rozproszonej */
  --cien-1: 0 1px 2px rgba(13, 31, 23, 0.05), 0 3px 8px -2px rgba(13, 31, 23, 0.06);
  --cien-2: 0 2px 4px rgba(13, 31, 23, 0.04), 0 12px 24px -8px rgba(13, 31, 23, 0.10);
  --cien-3: 0 4px 8px rgba(13, 31, 23, 0.04), 0 24px 48px -14px rgba(13, 31, 23, 0.16);
  --cien-4: 0 8px 16px rgba(13, 31, 23, 0.05), 0 44px 80px -24px rgba(13, 31, 23, 0.26);
  --cien-zielony: 0 6px 14px -4px rgba(11, 122, 60, 0.30), 0 18px 36px -12px rgba(11, 122, 60, 0.34);
  --swiatlo-gorne: inset 0 1px 0 rgba(255, 255, 255, 0.85);

  /* geometria */
  --r-s:  12px;
  --r-m:  20px;
  --r-l:  28px;
  --r-xl: 40px;
  --r-pigulka: 999px;

  --obreb: 1200px;
  --margines: 20px;
  --odstep: clamp(72px, 9vw, 136px);

  /* typografia */
  --font-display: "Gabarito", "Segoe UI", system-ui, sans-serif;
  --font-tekst:   "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;

  --t-h1:   clamp(2.5rem, 1.55rem + 4.2vw, 5.25rem);
  --t-h2:   clamp(1.875rem, 1.35rem + 2.35vw, 3.25rem);
  --t-h3:   clamp(1.1875rem, 1.1rem + 0.4vw, 1.4375rem);
  --t-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --t-body: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);

  /* ruch */
  --krzywa: cubic-bezier(0.22, 1, 0.36, 1);
  --krzywa-miekka: cubic-bezier(0.4, 0, 0.2, 1);

  /* warstwy */
  --z-ziarno: 1;
  --z-plywak: 3;
  --z-pasek-mobilny: 60;
  --z-menu: 70;
  --z-pasek: 80;
  --z-pomin: 90;
}

/* ============================ 2. RESET ============================ */

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

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--tlo);
  color: var(--atrament);
  font-family: var(--font-tekst);
  font-size: var(--t-body);
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote, dialog { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--zielen-jasna);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--zielen-jasna); color: var(--las); }

.tylko-czytnik {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pomin {
  position: absolute;
  top: -100px;
  left: 24px;
  z-index: var(--z-pomin);
  padding: 14px 22px;
  background: var(--las);
  color: var(--jasny);
  border-radius: var(--r-pigulka);
  text-decoration: none;
  box-shadow: var(--cien-3);
  transition: top 220ms var(--krzywa);
}

.pomin:focus { top: 20px; }

/* ============================ 3. TYPOGRAFIA ============================ */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); font-weight: 800; letter-spacing: -0.035em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.015em; }

p { text-wrap: pretty; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--atrament-2);
}

.etykieta {
  display: inline-block;
  font-family: var(--font-tekst);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--zielen);
}

.etykieta--jasna { color: var(--zielen-jasna); }

/* Wyróżnione słowo w nagłówku: podkreślenie rysowane pędzlem, nie linią */
.wyroznik {
  position: relative;
  white-space: nowrap;
}

.wyroznik::after {
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: 0.04em;
  height: 0.26em;
  background: var(--zielen-jasna);
  border-radius: var(--r-pigulka);
  opacity: 0.42;
  z-index: -1;
}

.nota-prawna {
  max-width: 62ch;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--atrament-2);
}

.nota-prawna--jasna { color: var(--jasny-2); }

.link-tekst {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 600;
  color: var(--zielen);
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 -1px 0 rgba(11, 122, 60, 0.35);
  transition: box-shadow 200ms var(--krzywa), color 200ms var(--krzywa);
}

.link-tekst:hover { box-shadow: inset 0 -2px 0 var(--zielen); }

.sekcja--ciemna .link-tekst {
  color: var(--zielen-jasna);
  box-shadow: inset 0 -1px 0 rgba(34, 197, 94, 0.4);
}

.sekcja--ciemna .link-tekst:hover { box-shadow: inset 0 -2px 0 var(--zielen-jasna); }

/* ============================ 4. WARSTWY I TŁA ============================ */

.obreb {
  width: 100%;
  max-width: var(--obreb);
  margin-inline: auto;
  padding-inline: var(--margines);
}

.obreb--waski { max-width: 860px; }

.sekcja {
  position: relative;
  padding-block: var(--odstep);
  scroll-margin-top: 96px;
}

.sekcja--tlo2 { background: var(--tlo-2); }

.sekcja--ciemna {
  background: var(--las);
  color: var(--jasny);
  overflow: hidden;
}

.sekcja--ciemna .lead { color: var(--jasny-2); }

/* Ziarno: bardzo delikatna faktura na całej stronie, zdejmuje wrażenie płaskiej płaszczyzny */
.ziarno {
  position: fixed;
  inset: 0;
  z-index: var(--z-ziarno);
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Poświata: rozmyte plamy koloru pod treścią, źródło głębi w ciemnych sekcjach */
.poswiata {
  position: absolute;
  pointer-events: none;
}

.poswiata--historia {
  inset: -30% -10% auto 40%;
  height: 720px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(34, 197, 94, 0.20), transparent 70%);
}

.poswiata--kontakt {
  inset: auto -20% -30% -10%;
  height: 760px;
  background: radial-gradient(50% 50% at 40% 60%, rgba(34, 197, 94, 0.18), transparent 70%);
}

.naglowek-sekcji {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: clamp(40px, 5vw, 72px);
  text-align: center;
}

.naglowek-sekcji .lead { max-width: 58ch; }

/* Kadry zdjęć: zaokrąglone, z własnym cieniem i delikatnym rozjaśnieniem krawędzi */
.kadr {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-l);
  background: var(--tlo-2);
}

.kadr img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Na wąskim ekranie kadr jest pionowy, żeby zdjęcie miało obecność.
   Wraz z szerokością rozkłada się do panoramy. */
.kadr--hero { border-radius: var(--r-l); aspect-ratio: 4 / 5; box-shadow: var(--cien-4); }
.kadr--portret { aspect-ratio: 4 / 5; box-shadow: var(--cien-3); }
.kadr--szeroki { aspect-ratio: 16 / 9; border-radius: var(--r-m); }
.kadr--kwadrat { aspect-ratio: 1 / 1; border-radius: var(--r-m); }
.kadr--film { aspect-ratio: 4 / 5; border-radius: var(--r-l); box-shadow: var(--cien-4); }

/* ============================ 5. PRZYCISKI ============================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding-inline: 22px;
  border: 1px solid transparent;
  border-radius: var(--r-pigulka);
  font-family: var(--font-tekst);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 220ms var(--krzywa), box-shadow 220ms var(--krzywa),
              background-color 220ms var(--krzywa), border-color 220ms var(--krzywa);
}

.btn--duzy { min-height: 58px; padding-inline: 30px; font-size: 1rem; }
.btn--maly { min-height: 42px; padding-inline: 18px; font-size: 0.875rem; }
.btn--pelny { width: 100%; }

.btn--zielony {
  background: var(--zielen);
  color: #FFFFFF;
  box-shadow: var(--cien-zielony);
}

.btn--zielony:hover {
  background: var(--zielen-ciemna);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px -6px rgba(11, 122, 60, 0.36), 0 26px 46px -14px rgba(11, 122, 60, 0.42);
}

.btn--ciemny {
  background: var(--las);
  color: var(--jasny);
  box-shadow: var(--cien-2);
}

.btn--ciemny:hover { transform: translateY(-3px); box-shadow: var(--cien-3); }

.btn--obrys {
  background: var(--karta);
  color: var(--atrament);
  border-color: var(--linia-mocna);
  box-shadow: var(--cien-1);
}

.btn--obrys:hover {
  transform: translateY(-3px);
  border-color: rgba(11, 122, 60, 0.4);
  box-shadow: var(--cien-2);
}

.sekcja--ciemna .btn--obrys,
.pasek-mobilny .btn--obrys { background: var(--karta); }

.btn:active { transform: translateY(0); }

/* ============================ 6. PASEK I MENU ============================ */

.pasek {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-pasek);
  display: flex;
  justify-content: center;
  padding: 14px var(--margines);
  pointer-events: none;
}

.pasek__pigulka {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 1080px;
  padding: 9px 9px 9px 20px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--r-pigulka);
  box-shadow: var(--cien-2), var(--swiatlo-gorne);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  pointer-events: auto;
  transition: box-shadow 300ms var(--krzywa), background-color 300ms var(--krzywa);
}

.pasek.przewiniety .pasek__pigulka {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--cien-3), var(--swiatlo-gorne);
}

.marka {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.marka__znak {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 9px;
  background: linear-gradient(150deg, var(--zielen-jasna), var(--zielen));
  box-shadow: 0 3px 8px -2px rgba(11, 122, 60, 0.5), var(--swiatlo-gorne);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9375rem;
  line-height: 1;
  color: #FFFFFF;
}

.menu { display: none; margin-left: auto; }

.menu ul { display: flex; gap: 4px; }

.menu a {
  display: block;
  padding: 9px 14px;
  border-radius: var(--r-pigulka);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--atrament-2);
  text-decoration: none;
  transition: color 200ms var(--krzywa), background-color 200ms var(--krzywa);
}

.menu a:hover { color: var(--atrament); background: rgba(13, 31, 23, 0.05); }

.menu a[aria-current="location"] {
  color: var(--zielen);
  background: rgba(11, 122, 60, 0.10);
}

.pasek__cta { display: none; }

.hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  background: var(--karta);
  border: 1px solid var(--linia);
  border-radius: var(--r-pigulka);
  box-shadow: var(--cien-1);
  cursor: pointer;
}

.hamburger__linie {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 17px;
}

.hamburger__linie span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--atrament);
  transition: transform 260ms var(--krzywa);
}

.hamburger[aria-expanded="true"] .hamburger__linie span:first-child { transform: translateY(3.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger__linie span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.ekran-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  padding: 100px var(--margines) 40px;
  background: var(--las);
  color: var(--jasny);
  overflow-y: auto;
}

.ekran-menu[hidden] { display: none; }

.ekran-menu ul { display: flex; flex-direction: column; gap: 2px; }

.ekran-menu a:not(.btn) {
  display: block;
  padding: 10px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.2rem + 3vw, 2.5rem);
  letter-spacing: -0.03em;
  text-decoration: none;
}

.ekran-menu a:not(.btn):hover { color: var(--zielen-jasna); }

.ekran-menu li, .ekran-menu > .btn { opacity: 0; transform: translateY(14px); }

.ekran-menu.otwarte li,
.ekran-menu.otwarte > .btn {
  animation: wejscie-menu 400ms var(--krzywa) forwards;
  animation-delay: calc(var(--i) * 45ms);
}

@keyframes wejscie-menu { to { opacity: 1; transform: none; } }

.menu-otwarte .pasek__pigulka {
  background: rgba(18, 48, 36, 0.72);
  border-color: rgba(234, 242, 236, 0.16);
  color: var(--jasny);
}

.menu-otwarte .hamburger { background: rgba(234, 242, 236, 0.12); border-color: transparent; }
.menu-otwarte .hamburger__linie span { background: var(--jasny); }

/* ============================ 7. HERO ============================ */

.hero {
  position: relative;
  padding-top: clamp(120px, 15vw, 180px);
  padding-bottom: var(--odstep);
  scroll-margin-top: 96px;
}

.hero__poswiata {
  position: absolute;
  inset: -160px -10% auto -10%;
  height: 900px;
  pointer-events: none;
  background:
    radial-gradient(46% 42% at 50% 22%, rgba(34, 197, 94, 0.20), transparent 72%),
    radial-gradient(34% 34% at 12% 52%, rgba(34, 197, 94, 0.12), transparent 72%),
    radial-gradient(30% 32% at 88% 34%, rgba(11, 122, 60, 0.12), transparent 72%);
}

.hero__tresc {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}

.hero__tresc h1 { max-width: 15ch; }
.hero__tresc .lead { max-width: 56ch; }

.odznaka {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 12px;
  background: var(--karta);
  border: 1px solid var(--linia);
  border-radius: var(--r-pigulka);
  box-shadow: var(--cien-1), var(--swiatlo-gorne);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--atrament-2);
}

.odznaka__kropka {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--zielen-jasna);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.22);
}

.hero__akcje {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
}

.hero__scena {
  position: relative;
  margin-top: clamp(44px, 6vw, 80px);
}

.kadr--hero img { transition: transform 700ms var(--krzywa-miekka); }

/* Kafelki nad zdjęciem, z rozmyciem tła: to one budują trzeci plan */
.plywak {
  position: absolute;
  z-index: var(--z-plywak);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 18px;
  /* Wysokie krycie, bo pod spodem jest zdjęcie: tekst musi trzymać kontrast */
  background: rgba(255, 255, 255, 0.93);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--r-m);
  box-shadow: var(--cien-3), var(--swiatlo-gorne);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}

.plywak__tytul { font-weight: 600; font-size: 0.9375rem; line-height: 1.3; }
.plywak__opis { font-size: 0.8125rem; color: var(--atrament-2); line-height: 1.4; }

.plywak--lewy { left: 14px; bottom: 14px; max-width: 200px; }

.plywak--prawy {
  right: 14px;
  top: 14px;
  max-width: 210px;
  padding-left: 38px;
}

.plywak__puls {
  position: absolute;
  left: 18px;
  top: 20px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--zielen-jasna);
}

.plywak__puls::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--zielen-jasna);
  opacity: 0;
  animation: puls 2.6s var(--krzywa-miekka) infinite;
}

@keyframes puls {
  0%   { opacity: 0.7; transform: scale(0.6); }
  70%  { opacity: 0;   transform: scale(1.5); }
  100% { opacity: 0;   transform: scale(1.5); }
}

/* ============================ 8. TAŚMA ============================ */

.tasma {
  position: relative;
  padding-block: 18px;
  background: var(--las);
  color: var(--jasny);
  overflow: hidden;
}

.tasma__tor {
  display: flex;
  width: max-content;
  animation: przesuw 38s linear infinite;
}

.tasma:hover .tasma__tor { animation-play-state: paused; }

.tasma__lista {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-right: 40px;
}

.tasma__lista li {
  display: flex;
  align-items: center;
  gap: 40px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.9375rem, 0.85rem + 0.35vw, 1.125rem);
  white-space: nowrap;
}

.tasma__lista li::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--zielen-jasna);
}

@keyframes przesuw { to { transform: translateX(-50%); } }

/* ============================ 9. O MNIE ============================ */

.duet {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.duet__obraz { position: relative; }

.odznaka-obraz {
  position: absolute;
  right: -12px;
  bottom: 28px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 20px;
  background: var(--karta);
  border-radius: var(--r-m);
  box-shadow: var(--cien-3), var(--swiatlo-gorne);
}

.odznaka-obraz strong {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--zielen);
}

.odznaka-obraz span { font-size: 0.8125rem; color: var(--atrament-2); max-width: 11ch; line-height: 1.3; }

.duet__tekst { display: flex; flex-direction: column; gap: 18px; }
.duet__tekst h2 { margin-block: 2px 4px; }
.duet__tekst p { max-width: 60ch; color: var(--atrament-2); }

.punkty { display: grid; gap: 12px; margin-top: 8px; }

.punkty li {
  position: relative;
  padding-left: 34px;
  font-weight: 500;
}

.punkty li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mieta);
  box-shadow: inset 0 0 0 1px rgba(11, 122, 60, 0.18);
}

.punkty li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--zielen);
  border-bottom: 2px solid var(--zielen);
  transform: rotate(-45deg);
}

/* ============================ 10. BENTO ============================ */

.bento {
  display: grid;
  gap: 20px;
}

.karta {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--karta);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--r-l);
  box-shadow: var(--cien-2);
  transition: transform 300ms var(--krzywa), box-shadow 300ms var(--krzywa);
}

.karta:hover { transform: translateY(-5px); box-shadow: var(--cien-3); }

.karta .kadr { border-radius: 0; }

.karta__tresc {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 3vw, 32px);
}

.karta__tresc p { color: var(--atrament-2); }

/* Krótka lista przykładów, żeby karta niosła konkret, a nie samo zdanie */
.mikrolista { display: grid; gap: 9px; margin-top: 4px; }

.mikrolista li {
  position: relative;
  padding-left: 22px;
  font-size: 0.9375rem;
  font-weight: 500;
}

.mikrolista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--zielen);
  opacity: 0.55;
}

.karta__dopisek {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(11, 122, 60, 0.16);
  font-size: 0.875rem;
  font-weight: 500;
}

.karta--mieta {
  background: var(--mieta);
  border-color: rgba(11, 122, 60, 0.14);
  box-shadow: var(--cien-1);
}

.karta--cytat {
  justify-content: center;
  gap: 16px;
  padding: clamp(28px, 4vw, 44px);
  background: linear-gradient(150deg, var(--las-2), var(--las));
  border-color: transparent;
  color: var(--jasny);
  box-shadow: var(--cien-3);
}

.karta--cytat blockquote p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.15rem + 2.4vw, 2.875rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.karta__podpis {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--jasny-2);
}

.obszary .nota-prawna,
.sekcja .nota-prawna { margin-top: 28px; }

/* ============================ 11. PROCES ============================ */

.kroki {
  position: relative;
  display: grid;
  gap: 20px;
}

.krok {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(24px, 3vw, 32px);
  background: var(--karta);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--r-l);
  box-shadow: var(--cien-2);
  transition: transform 300ms var(--krzywa), box-shadow 300ms var(--krzywa);
}

.krok:hover { transform: translateY(-5px); box-shadow: var(--cien-3); }

.krok__numer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--zielen-jasna), var(--zielen));
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  box-shadow: var(--cien-zielony), var(--swiatlo-gorne);
}

.krok p { color: var(--atrament-2); }

/* ============================ 12. HISTORIA ============================ */

.historia {
  position: relative;
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.historia__film { position: relative; display: flex; flex-direction: column; gap: 16px; }

.odtwarzaj {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px 12px 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--r-pigulka);
  box-shadow: var(--cien-3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--atrament);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: transform 260ms var(--krzywa), box-shadow 260ms var(--krzywa);
}

.odtwarzaj:hover { transform: translate(-50%, -50%) scale(1.04); box-shadow: var(--cien-4); }

.odtwarzaj__ikona {
  display: inline-flex;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--zielen-jasna), var(--zielen));
  box-shadow: var(--cien-zielony);
  position: relative;
}

.odtwarzaj__ikona::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 11px;
  border-left: 10px solid #FFFFFF;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.historia__info {
  min-height: 1.4em;
  font-size: 0.875rem;
  color: var(--jasny-2);
  text-align: center;
}

.historia__tekst { display: flex; flex-direction: column; gap: 22px; }
.historia__tekst p { color: var(--jasny-2); max-width: 58ch; }

.cytat {
  position: relative;
  padding: clamp(26px, 3.5vw, 38px);
  background: rgba(234, 242, 236, 0.06);
  border: 1px solid var(--linia-jasna);
  border-radius: var(--r-l);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.cytat::before {
  content: "";
  position: absolute;
  left: clamp(26px, 3.5vw, 38px);
  top: -13px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--zielen-jasna);
  box-shadow: 0 6px 16px -4px rgba(34, 197, 94, 0.6);
}

.cytat blockquote p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--jasny);
  max-width: none;
}

.cytat figcaption {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--linia-jasna);
}

.cytat__imie { font-weight: 600; color: var(--jasny); }
.cytat__rola { font-size: 0.875rem; color: var(--jasny-2); }

/* ============================ 13. CERTYFIKATY ============================ */

.filtry {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}

.chip {
  padding: 10px 18px;
  background: var(--karta);
  border: 1px solid var(--linia);
  border-radius: var(--r-pigulka);
  box-shadow: var(--cien-1);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--atrament-2);
  cursor: pointer;
  transition: transform 200ms var(--krzywa), background-color 200ms var(--krzywa),
              color 200ms var(--krzywa), box-shadow 200ms var(--krzywa);
}

.chip:hover { transform: translateY(-2px); color: var(--atrament); }

.chip[aria-pressed="true"] {
  background: var(--las);
  border-color: transparent;
  color: var(--jasny);
  box-shadow: var(--cien-2);
}

.filtry__stan {
  min-height: 1.4em;
  margin-bottom: 28px;
  font-size: 0.875rem;
  color: var(--atrament-2);
  text-align: center;
}

.dyplomy { display: grid; gap: 20px; }

.dyplom {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--karta);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--r-l);
  box-shadow: var(--cien-2);
  transition: transform 300ms var(--krzywa), box-shadow 300ms var(--krzywa);
}

.dyplom:hover { transform: translateY(-5px); box-shadow: var(--cien-3); }
.dyplom[hidden] { display: none; }

/* Lico dokumentu: zaprojektowana płaszczyzna, nie udawany skan */
.dyplom__lico {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(255, 255, 255, 0.9), transparent 60%),
    linear-gradient(155deg, var(--mieta), #CFE3D5);
  overflow: hidden;
}

.dyplom__lico::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(11, 122, 60, 0.22);
  border-radius: var(--r-s);
}

/* Zagięty róg buduje wrażenie kartki */
.dyplom__lico::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  border-width: 0 34px 34px 0;
  border-style: solid;
  border-color: transparent rgba(255, 255, 255, 0.92) transparent transparent;
  filter: drop-shadow(-3px 3px 4px rgba(13, 31, 23, 0.12));
}

.dyplom__lico span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.75rem;
  letter-spacing: -0.03em;
  color: rgba(11, 122, 60, 0.5);
}

.dyplom__opis {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 24px;
}

.dyplom__tag {
  padding: 4px 10px;
  background: var(--tlo-2);
  border-radius: var(--r-pigulka);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--atrament-2);
}

.dyplom__opis h3 { font-family: var(--font-tekst); font-weight: 600; font-size: 1.0625rem; letter-spacing: 0; }
.dyplom__meta { font-size: 0.875rem; color: var(--atrament-2); }
.dyplom__opis .link-tekst { margin-top: 2px; }

/* ============================ 14. GALERIA ============================ */

.galeria { display: grid; gap: 16px; }

.galeria a {
  position: relative;
  display: block;
  border-radius: var(--r-m);
  overflow: hidden;
  box-shadow: var(--cien-2);
  text-decoration: none;
  transition: transform 320ms var(--krzywa), box-shadow 320ms var(--krzywa);
}

.galeria a:hover { transform: translateY(-6px); box-shadow: var(--cien-3); }
.galeria img { transition: transform 600ms var(--krzywa-miekka); }
.galeria a:hover img { transform: scale(1.06); }

.galeria__etykieta {
  position: absolute;
  left: 12px;
  bottom: 12px;
  right: 12px;
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.86);
  border-radius: var(--r-pigulka);
  box-shadow: var(--cien-1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  color: var(--atrament);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 260ms var(--krzywa), transform 260ms var(--krzywa);
}

.galeria a:hover .galeria__etykieta,
.galeria a:focus-visible .galeria__etykieta { opacity: 1; transform: none; }

.galeria__akcje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 24px;
  margin-top: 36px;
}

/* ============================ 15. PYTANIA ============================ */

.akordeon {
  overflow: hidden;
  background: var(--karta);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--r-l);
  box-shadow: var(--cien-2);
}

.pytanie + .pytanie { border-top: 1px solid var(--linia); }

.pytanie summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px clamp(20px, 3vw, 30px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
  transition: background-color 200ms var(--krzywa);
}

.pytanie summary::-webkit-details-marker { display: none; }
.pytanie summary:hover { background: rgba(13, 31, 23, 0.03); }

.pytanie__znak {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tlo-2);
  transition: background-color 240ms var(--krzywa);
}

.pytanie__znak::before,
.pytanie__znak::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 15px;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--atrament);
}

.pytanie__znak::after { transform: rotate(90deg); transition: transform 260ms var(--krzywa); }
.pytanie[open] .pytanie__znak { background: var(--mieta); }
.pytanie[open] .pytanie__znak::after { transform: rotate(0deg); }

.pytanie__tresc { padding: 0 clamp(20px, 3vw, 30px) 24px; }
.pytanie__tresc p { max-width: 66ch; color: var(--atrament-2); }
.pytanie[open] .pytanie__tresc { animation: rozwin 300ms var(--krzywa); }

@keyframes rozwin {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* ============================ 16. KONTAKT ============================ */

.kontakt__uklad {
  position: relative;
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}

.kontakt__kanaly { display: flex; flex-direction: column; gap: 12px; }

.kanal {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 52px 18px 22px;
  background: rgba(234, 242, 236, 0.06);
  border: 1px solid var(--linia-jasna);
  border-radius: var(--r-m);
  text-decoration: none;
  transition: background-color 240ms var(--krzywa), transform 240ms var(--krzywa),
              border-color 240ms var(--krzywa);
}

a.kanal:hover {
  background: rgba(234, 242, 236, 0.11);
  border-color: rgba(34, 197, 94, 0.45);
  transform: translateY(-3px);
}

.kanal__nazwa { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--zielen-jasna); }
.kanal__wartosc { font-size: 1.0625rem; font-weight: 500; }
.kanal--pusty .kanal__wartosc { color: var(--jasny-2); }

.kanal__strzalka {
  position: absolute;
  right: 22px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -5px;
  border-top: 2px solid var(--zielen-jasna);
  border-right: 2px solid var(--zielen-jasna);
  transform: rotate(45deg);
  transition: transform 240ms var(--krzywa);
}

a.kanal:hover .kanal__strzalka { transform: rotate(45deg) translate(3px, -3px); }

.kontakt__obietnica {
  margin-top: 6px;
  font-size: 0.9375rem;
  color: var(--jasny-2);
  max-width: 40ch;
}

.kontakt__karta {
  padding: clamp(24px, 3.4vw, 40px);
  background: var(--karta);
  border-radius: var(--r-l);
  box-shadow: var(--cien-4), var(--swiatlo-gorne);
  color: var(--atrament);
}

.formularz { display: grid; gap: 18px; }
.formularz[hidden] { display: none; }

.pole { display: flex; flex-direction: column; gap: 7px; }
.pole label { font-size: 0.875rem; font-weight: 600; }

.pole__opcja {
  font-weight: 500;
  color: var(--atrament-2);
  text-transform: none;
  letter-spacing: 0;
}

.pole input,
.pole textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  background: var(--tlo);
  color: var(--atrament);
  border: 1px solid var(--linia);
  border-radius: var(--r-s);
  font: inherit;
  font-size: 1rem;
  transition: border-color 200ms var(--krzywa), background-color 200ms var(--krzywa),
              box-shadow 200ms var(--krzywa);
}

.pole textarea { resize: vertical; line-height: 1.55; }

/* Bez wygaszania: tekst podpowiedzi też musi mieć kontrast 4.5:1 */
.pole input::placeholder,
.pole textarea::placeholder { color: var(--atrament-2); opacity: 1; }

.pole input:focus,
.pole textarea:focus {
  background: var(--karta);
  border-color: rgba(11, 122, 60, 0.5);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.16);
  outline: none;
}

.pole input:focus-visible,
.pole textarea:focus-visible { outline: 3px solid var(--zielen-jasna); outline-offset: 2px; }

.pole--zgoda {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  align-items: start;
  padding: 4px 0;
}

.pole--zgoda input {
  width: 22px;
  height: 22px;
  min-height: 0;
  margin-top: 2px;
  padding: 0;
  accent-color: var(--zielen);
}

.pole--zgoda label { font-weight: 400; font-size: 0.875rem; line-height: 1.5; color: var(--atrament-2); }
.pole--zgoda .pole__blad { grid-column: 1 / -1; }

.pole__blad { font-size: 0.8125rem; font-weight: 500; color: var(--alarm); }
.pole__blad:empty { display: none; }
.pole [aria-invalid="true"] { border-color: var(--alarm); box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.12); }

.sukces {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
}

.sukces[hidden] { display: none; }

.sukces__znak {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--zielen-jasna), var(--zielen));
  box-shadow: var(--cien-zielony);
}

.sukces__znak::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 19px;
  width: 17px;
  height: 9px;
  border-left: 3px solid #FFFFFF;
  border-bottom: 3px solid #FFFFFF;
  border-radius: 1px;
  transform: rotate(-45deg);
}

.sukces p { color: var(--atrament-2); }

/* ============================ 17. STOPKA ============================ */

.stopka {
  padding-block: clamp(56px, 6vw, 88px) 28px;
  background: var(--las);
  color: var(--jasny);
}

.stopka__gora { display: grid; gap: 36px; padding-bottom: 40px; }

.stopka__marka { display: flex; flex-direction: column; gap: 12px; }
.stopka__marka p { color: var(--jasny-2); max-width: 30ch; }
.marka--stopka { font-size: 1.25rem; }

.stopka__tytul {
  margin-bottom: 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--zielen-jasna);
}

.stopka__gora ul { display: grid; gap: 9px; }

.stopka__gora ul a {
  font-size: 0.9375rem;
  color: var(--jasny-2);
  text-decoration: none;
  transition: color 200ms var(--krzywa);
}

.stopka__gora ul a:hover { color: var(--jasny); }

.stopka__nota {
  padding-top: 28px;
  border-top: 1px solid var(--linia-jasna);
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--jasny-2);
  max-width: 76ch;
}

.stopka__dol {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 28px;
  font-size: 0.8125rem;
  color: var(--jasny-2);
}

/* ============================ 18. PASEK MOBILNY I PODGLĄD ============================ */

.pasek-mobilny {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: var(--z-pasek-mobilny);
  display: flex;
  gap: 10px;
  padding: 10px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--r-l);
  box-shadow: var(--cien-4), var(--swiatlo-gorne);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}

.pasek-mobilny[hidden] { display: none; }

.podglad {
  width: min(92vw, 620px);
  max-height: 88vh;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.podglad::backdrop { background: rgba(13, 31, 23, 0.62); backdrop-filter: blur(6px); }

.podglad__panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-height: 88vh;
  padding: 22px;
  background: var(--karta);
  border-radius: var(--r-l);
  box-shadow: var(--cien-4);
  overflow-y: auto;
}

.podglad__pasek { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }

.podglad__tytul {
  font-family: var(--font-tekst);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.4;
  letter-spacing: 0;
}

.podglad__zamknij {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  background: var(--tlo-2);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 200ms var(--krzywa);
}

.podglad__zamknij:hover { background: var(--mieta); }

.podglad__zamknij span,
.podglad__zamknij span::after {
  position: absolute;
  left: 12px;
  top: 19px;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--atrament);
}

.podglad__zamknij span { transform: rotate(45deg); }
.podglad__zamknij span::after { content: ""; left: 0; top: 0; transform: rotate(90deg); }

.podglad__tresc .dyplom__lico { border-radius: var(--r-m); }
.podglad__nota { font-size: 0.875rem; color: var(--atrament-2); }

/* ============================ 19. RUCH ============================ */

/* Wejście hero: sekwencja, nie jeden zbiorczy fade */
.js [data-wejscie] { opacity: 0; transform: translateY(18px); }

.js [data-wejscie] {
  animation: wejscie 800ms var(--krzywa) forwards;
  animation-delay: calc(var(--opoznienie, 0) * 1ms);
}

[data-wejscie="1"] { --opoznienie: 60; }
[data-wejscie="2"] { --opoznienie: 150; }
[data-wejscie="3"] { --opoznienie: 260; }
[data-wejscie="4"] { --opoznienie: 360; }
[data-wejscie="5"] { --opoznienie: 460; }

@keyframes wejscie { to { opacity: 1; transform: none; } }

/* Odsłanianie przy przewijaniu. Bez JavaScriptu treść jest po prostu widoczna. */
.js [data-odsloniecie] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms var(--krzywa), transform 700ms var(--krzywa);
}

.js [data-odsloniecie].widoczne { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .js [data-wejscie],
  .js [data-odsloniecie] { opacity: 1; transform: none; }

  .tasma__tor { animation: none; }
  .plywak__puls::after { animation: none; }
}

/* ============================ 20. MEDIA QUERIES ============================ */

@media (min-width: 600px) {
  :root { --margines: 28px; }

  .galeria { grid-template-columns: repeat(2, 1fr); }
  .dyplomy { grid-template-columns: repeat(2, 1fr); }
  .kroki { grid-template-columns: repeat(2, 1fr); }
  .sukces { align-items: flex-start; }

  .kadr--hero { aspect-ratio: 3 / 2; }
  .plywak--lewy { left: 22px; bottom: 22px; max-width: 240px; }
  .plywak--prawy { right: 22px; top: 22px; max-width: 250px; }
}

@media (min-width: 900px) {
  :root { --margines: 36px; }

  .duet { grid-template-columns: 5fr 6fr; }
  .duet__obraz { max-width: 460px; }

  .bento { grid-template-columns: repeat(12, 1fr); }
  .karta--duza { grid-column: span 7; }
  .karta--mieta { grid-column: span 5; }
  .bento > .karta:nth-child(3) { grid-column: span 5; }
  .karta--cytat { grid-column: span 7; }

  .historia { grid-template-columns: 5fr 7fr; }

  .dyplomy { grid-template-columns: repeat(3, 1fr); }
  .galeria { grid-template-columns: repeat(4, 1fr); }

  .kontakt__uklad { grid-template-columns: 5fr 7fr; }

  .stopka__gora { grid-template-columns: 5fr 3fr 4fr; }

  .kadr--hero { aspect-ratio: 16 / 9; border-radius: var(--r-xl); }
  .plywak--lewy { left: 6%; bottom: 14%; max-width: 250px; }
  .plywak--prawy { right: 6%; top: 12%; max-width: 260px; }
}

@media (min-width: 1024px) {
  .menu { display: block; }
  .pasek__cta { display: inline-flex; }
  .hamburger { display: none; }
  .ekran-menu { display: none !important; }
  .pasek-mobilny { display: none !important; }

  .kroki { grid-template-columns: repeat(4, 1fr); }

  /* Linia łącząca kroki biegnie za kartami, na wysokości środka numerów */
  .kroki::before {
    content: "";
    position: absolute;
    top: calc(32px + 23px);
    left: 12%;
    right: 12%;
    border-top: 2px dashed rgba(11, 122, 60, 0.28);
    z-index: -1;
  }
}