/* =============================================================
   BRUK CLEAN - style globalne i navbar
   Kolejne sekcje strony dopisujemy pod blokiem NAVBAR.
   ============================================================= */

/* -------------------------------------------------------------
   1. Zmienne
   ------------------------------------------------------------- */
:root {
  --tlo:            #F8F9F8;
  --bialy:          #FFFFFF;
  --grafit:         #232323;
  --ciemny:         #31413C;
  --akcent:         #4FAE8D;
  --akcent-2:       #A6D6C3;
  --hover:          #3A9274;

  --tekst:          #232323;
  --tekst-cichy:    rgba(49, 65, 60, 0.66);
  --linia:          rgba(49, 65, 60, 0.10);

  --nav-h:          96px;
  --nav-h-min:      70px;
  --max:            1320px;
  --gap-bok:        clamp(20px, 4vw, 56px);

  --r-s:            10px;
  --r-m:            14px;
  --r-l:            20px;

  --cien-panel:
    0 1px 1px rgba(35, 35, 35, 0.04),
    0 12px 24px -12px rgba(35, 35, 35, 0.18),
    0 40px 60px -40px rgba(49, 65, 60, 0.35);

  --e-out:          cubic-bezier(0.22, 1, 0.36, 1);
  --e-in-out:       cubic-bezier(0.65, 0, 0.35, 1);
  --t:              300ms;
}

/* -------------------------------------------------------------
   2. Reset i baza
   ------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font-family: "Lato", "Segoe UI", system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-locked { overflow: hidden; }

/* atrybut hidden musi wygrywac z wlasnymi display, inaczej panele sie nie chowaja */
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--hover);
  outline-offset: 4px;
  border-radius: 6px;
}

.pomin {
  position: absolute;
  left: 50%;
  top: 10px;
  z-index: 300;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--ciemny);
  color: var(--bialy);
  font-size: 14px;
  font-weight: 700;
  transform: translate(-50%, -180%);
  transition: transform 220ms var(--e-out);
}
.pomin:focus-visible { transform: translate(-50%, 0); }

/* Placeholder pod kolejne sekcje, daje wysokosc do testu scrolla */
.canvas {
  min-height: 100vh;
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(166, 214, 195, 0.30), transparent 62%),
    radial-gradient(760px 420px at 4% 24%, rgba(79, 174, 141, 0.10), transparent 60%);
}

/* =============================================================
   NAVBAR
   ============================================================= */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(248, 249, 248, 0.62);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border-bottom: 1px solid transparent;
  transition:
    background var(--t) var(--e-out),
    border-color var(--t) var(--e-out),
    box-shadow var(--t) var(--e-out),
    backdrop-filter var(--t) var(--e-out);
}

/* Cienka nitka wody na dole paska, pojawia sie po przewinieciu */
.navbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(79, 174, 141, 0.55) 22%,
    rgba(166, 214, 195, 0.75) 50%,
    rgba(79, 174, 141, 0.55) 78%,
    transparent 100%);
  opacity: 0;
  transform: scaleX(0.55);
  transition: opacity var(--t) var(--e-out), transform 520ms var(--e-out);
}

.navbar.is-scrolled {
  background: rgba(255, 255, 255, 0.80);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--linia);
  box-shadow: 0 14px 34px -26px rgba(35, 35, 35, 0.55);
}
.navbar.is-scrolled::after { opacity: 1; transform: scaleX(1); }

.navbar__inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  height: var(--nav-h);
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gap-bok);
  transition: height var(--t) var(--e-out);
}
.navbar.is-scrolled .navbar__inner { height: var(--nav-h-min); }

/* -------------------------------------------------------------
   3. Logo (bez SVG, bez obrazkow)
   ------------------------------------------------------------- */
.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 1 auto;
  min-width: 0;
  margin-right: auto;
  padding: 6px 8px 6px 0;
  border-radius: var(--r-m);
}

.logo__mark {
  position: relative;
  flex: none;
  width: 46px;
  height: 46px;
  transition: transform 520ms var(--e-out);
}
.navbar.is-scrolled .logo__mark { transform: scale(0.9); }

/* fala rozchodzaca sie po najechaniu */
.logo__mark::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 12px;
  border: 1px solid rgba(79, 174, 141, 0.55);
  transform: rotate(45deg) scale(0.75);
  opacity: 0;
  pointer-events: none;
}
.logo:hover .logo__mark::after,
.logo:focus-visible .logo__mark::after {
  animation: fala 900ms var(--e-out);
}
@keyframes fala {
  0%   { transform: rotate(45deg) scale(0.75); opacity: 0.9; }
  100% { transform: rotate(45deg) scale(1.55); opacity: 0; }
}

/* kostka brukowa: kwadrat obrocony o 45 stopni */
.logo__tile {
  position: absolute;
  inset: 9px;
  border-radius: 5px;
  background: linear-gradient(140deg, var(--ciemny) 0%, var(--grafit) 72%);
  transform: rotate(45deg);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 20px -12px rgba(35, 35, 35, 0.85);
  transition: transform 520ms var(--e-out), box-shadow 520ms var(--e-out);
}
/* umyta polowa kostki */
.logo__tile::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -10%;
  height: 56%;
  background: linear-gradient(180deg, var(--akcent) 0%, var(--akcent-2) 100%);
  transition: height 520ms var(--e-out);
}
/* spoina miedzy kostkami */
.logo__tile::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  top: 46%;
  height: 1.5px;
  background: rgba(248, 249, 248, 0.42);
}
.logo:hover .logo__tile,
.logo:focus-visible .logo__tile {
  transform: rotate(45deg) scale(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 16px 26px -14px rgba(49, 65, 60, 0.9);
}
.logo:hover .logo__tile::before,
.logo:focus-visible .logo__tile::before { height: 72%; }

/* strumien przechodzacy przez kostke */
.logo__stream {
  position: absolute;
  inset: 9px;
  border-radius: 5px;
  transform: rotate(45deg);
  overflow: hidden;
  pointer-events: none;
}
.logo__stream::before {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -60%;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  transform: skewX(-16deg);
  transition: left 720ms var(--e-out);
}
.logo:hover .logo__stream::before,
.logo:focus-visible .logo__stream::before { left: 120%; }

/* kropla wody spadajaca na kostke */
.logo__drop {
  position: absolute;
  top: -1px;
  right: 3px;
  width: 14px;
  height: 14px;
  border-radius: 0 50% 50% 50%;
  background: linear-gradient(155deg, var(--akcent-2) 0%, var(--akcent) 80%);
  transform: rotate(45deg);
  box-shadow:
    inset 0 -1px 2px rgba(255, 255, 255, 0.55),
    0 6px 14px -7px rgba(79, 174, 141, 0.95);
  transition: transform 520ms var(--e-out);
}
.logo__drop::before {
  content: "";
  position: absolute;
  right: 3.5px;
  bottom: 3.5px;
  width: 4px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
}
.logo:hover .logo__drop,
.logo:focus-visible .logo__drop { transform: rotate(45deg) translate(2px, 2px) scale(1.1); }

.logo__words {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.logo__name {
  font-size: clamp(15px, 1.25vw, 17.5px);
  font-weight: 900;
  letter-spacing: 0.075em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--grafit);
  white-space: nowrap;
}
.logo__name-light {
  margin-right: 0.5em;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: var(--ciemny);
}
.logo__tagline {
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.2em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--tekst-cichy);
  white-space: nowrap;
  overflow: hidden;
  max-height: 14px;
  opacity: 1;
  transition:
    max-height var(--t) var(--e-out),
    opacity 200ms var(--e-out),
    transform var(--t) var(--e-out);
}
.navbar.is-scrolled .logo__tagline {
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
}

/* -------------------------------------------------------------
   4. Menu desktop
   ------------------------------------------------------------- */
.menu__list {
  display: flex;
  align-items: center;
  gap: clamp(2px, 0.6vw, 10px);
}

.menu__item { position: relative; }

.menu__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 15px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ciemny);
  white-space: nowrap;
  transition: color 260ms var(--e-out);
}

/* rozlewajacy sie akcent pod pozycja menu */
.menu__link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(166, 214, 195, 0.30), rgba(79, 174, 141, 0.16));
  transform: scale(0.82);
  opacity: 0;
  transition: transform 420ms var(--e-out), opacity 260ms var(--e-out);
}
/* linia wysuwajaca sie od srodka */
.menu__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(79, 174, 141, 0), var(--akcent) 35%, var(--hover) 65%, rgba(79, 174, 141, 0));
  transform: translateX(-50%);
  transition: width 420ms var(--e-out);
}

.menu__link:hover,
.menu__link:focus-visible { color: var(--hover); }
.menu__link:hover::before,
.menu__link:focus-visible::before { transform: scale(1); opacity: 1; }
.menu__link:hover::after,
.menu__link:focus-visible::after { width: calc(100% - 22px); }

.menu__link.is-active { color: var(--grafit); }
.menu__link.is-active::after { width: 22px; }
.menu__link.is-active:hover::after { width: calc(100% - 22px); }

.menu__label { position: relative; z-index: 1; }

/* strzalka dropdownu */
.menu__chevron {
  position: relative;
  z-index: 1;
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 0 0 2px 0;
  transform: rotate(45deg);
  opacity: 0.75;
  transition: transform 320ms var(--e-out), opacity 320ms var(--e-out);
}
.menu__item--drop:hover .menu__chevron,
.menu__item--drop.is-open .menu__chevron {
  transform: rotate(225deg) translate(-1px, -1px);
  opacity: 1;
}

/* -------------------------------------------------------------
   5. Dropdown
   ------------------------------------------------------------- */
.drop {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 306px;
  padding-top: 14px; /* most dla myszy, zeby najazd nie gubil panelu */
  transform: translate(-50%, 8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 240ms var(--e-out),
    transform 380ms var(--e-out),
    visibility 0s linear 380ms;
}
.menu__item--drop:hover .drop,
.menu__item--drop.is-open .drop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition-delay: 0s, 0s, 0s;
}

.drop__panel {
  position: relative;
  padding: 16px 12px 12px;
  border: 1px solid var(--linia);
  border-radius: var(--r-l);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: var(--cien-panel);
}
/* dziobek */
.drop__panel::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  border-left: 1px solid var(--linia);
  border-top: 1px solid var(--linia);
  border-radius: 3px 0 0 0;
  background: rgba(255, 255, 255, 0.94);
  transform: translateX(-50%) rotate(45deg);
}

.drop__title {
  padding: 0 12px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tekst-cichy);
}

.drop__list { display: flex; flex-direction: column; gap: 1px; }

.drop__list li {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 300ms var(--e-out), transform 300ms var(--e-out);
}
.menu__item--drop:hover .drop__list li,
.menu__item--drop.is-open .drop__list li {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i) * 26ms);
}

.drop__link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: var(--r-m);
  font-size: 14.5px;
  font-weight: 400;
  color: var(--ciemny);
  transition:
    background 260ms var(--e-out),
    color 260ms var(--e-out),
    transform 320ms var(--e-out);
}
.drop__link:hover,
.drop__link:focus-visible {
  background: rgba(166, 214, 195, 0.22);
  color: var(--hover);
  font-weight: 700;
  transform: translateX(5px);
}

/* mala kropelka przy pozycji listy */
.drop__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50% 50% 50% 0;
  background: rgba(49, 65, 60, 0.22);
  transform: rotate(-45deg);
  transition: background 260ms var(--e-out), transform 320ms var(--e-out), box-shadow 260ms var(--e-out);
}
.drop__link:hover .drop__dot,
.drop__link:focus-visible .drop__dot {
  background: linear-gradient(155deg, var(--akcent-2), var(--akcent));
  transform: rotate(-45deg) scale(1.25);
  box-shadow: 0 4px 8px -3px rgba(79, 174, 141, 0.9);
}

.drop__note {
  margin-top: 8px;
  padding: 11px 12px 3px;
  border-top: 1px solid var(--linia);
  font-size: 12px;
  font-weight: 400;
  color: var(--tekst-cichy);
}

/* -------------------------------------------------------------
   6. Facebook i hamburger
   ------------------------------------------------------------- */
.navbar__side {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
}

.fb {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--linia);
  border-radius: 50%;
  background: var(--bialy);
  color: var(--ciemny);
  transition:
    transform 380ms var(--e-out),
    background 300ms var(--e-out),
    color 300ms var(--e-out),
    border-color 300ms var(--e-out),
    box-shadow 380ms var(--e-out);
}
.fb:hover,
.fb:focus-visible {
  background: var(--akcent);
  border-color: var(--akcent);
  color: var(--bialy);
  transform: scale(1.1) rotate(8deg);
  box-shadow: 0 14px 26px -12px rgba(79, 174, 141, 0.95);
}

.fb .ikona {
  width: 20px;
  height: 20px;
  display: block;
}

.burger {
  display: none;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--linia);
  border-radius: 50%;
  background: var(--bialy);
  transition: background 260ms var(--e-out), border-color 260ms var(--e-out);
}
.burger__lines {
  position: relative;
  display: block;
  width: 19px;
  height: 13px;
}
.burger__lines i {
  position: absolute;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--ciemny);
  transition:
    transform 420ms var(--e-out),
    opacity 200ms var(--e-out),
    width 420ms var(--e-out),
    background 260ms var(--e-out);
}
.burger__lines i:nth-child(1) { top: 0;    width: 19px; }
.burger__lines i:nth-child(2) { top: 5.5px; width: 13px; }
.burger__lines i:nth-child(3) { top: 11px;  width: 19px; }

.burger[aria-expanded="true"] { background: var(--ciemny); border-color: var(--ciemny); }
.burger[aria-expanded="true"] i { background: var(--bialy); width: 19px; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* -------------------------------------------------------------
   7. Menu mobilne
   ------------------------------------------------------------- */
.mobile {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  padding: calc(var(--nav-h-min) + 26px) var(--gap-bok) 34px;
  background: var(--tlo);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-14px);
  transition:
    opacity 340ms var(--e-out),
    transform 460ms var(--e-out),
    visibility 0s linear 460ms;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(620px 420px at 88% 6%, rgba(166, 214, 195, 0.42), transparent 66%),
    radial-gradient(520px 380px at -10% 88%, rgba(79, 174, 141, 0.16), transparent 68%);
  pointer-events: none;
}
.mobile.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s, 0s, 0s;
}

.mobile__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
}

.mobile__list { display: flex; flex-direction: column; }

.mobile__item {
  border-bottom: 1px solid var(--linia);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 420ms var(--e-out), transform 520ms var(--e-out);
}
.mobile.is-open .mobile__item,
.mobile.is-open .mobile__foot {
  opacity: 1;
  transform: none;
  transition-delay: calc(60ms + var(--i) * 55ms);
}

.mobile__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 17px 2px;
  font-size: clamp(23px, 6.4vw, 31px);
  font-weight: 900;
  letter-spacing: -0.015em;
  color: var(--grafit);
  text-align: left;
  transition: color 260ms var(--e-out), transform 320ms var(--e-out);
}
.mobile__link:hover,
.mobile__link:focus-visible { color: var(--hover); transform: translateX(5px); }
.mobile__link.is-active { color: var(--akcent); }

.mobile__plus {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  transition: transform 420ms var(--e-out);
}
.mobile__plus::before,
.mobile__plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: var(--akcent);
  transition: transform 420ms var(--e-out), opacity 260ms var(--e-out);
}
.mobile__plus::after { transform: rotate(90deg); }
.mobile__item--acc.is-open .mobile__plus { transform: rotate(180deg); }
.mobile__item--acc.is-open .mobile__plus::after { opacity: 0; transform: rotate(0deg); }

.mobile__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 460ms var(--e-out);
}
.mobile__item--acc.is-open .mobile__panel { grid-template-rows: 1fr; }

/* zwiniete pozycje nie moga lapac fokusu */
.mobile__panel-in {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear 460ms;
}
.mobile__item--acc.is-open .mobile__panel-in {
  visibility: visible;
  transition-delay: 0s;
}

.mobile__sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0 18px 2px;
}
.mobile__sub a {
  display: block;
  padding: 8px 0 8px 18px;
  border-left: 2px solid rgba(79, 174, 141, 0.28);
  font-size: 15.5px;
  font-weight: 400;
  color: var(--ciemny);
  transition: color 240ms var(--e-out), border-color 240ms var(--e-out), transform 300ms var(--e-out);
}
.mobile__sub a:hover,
.mobile__sub a:focus-visible {
  color: var(--hover);
  border-color: var(--akcent);
  transform: translateX(5px);
}

.mobile__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 420ms var(--e-out), transform 520ms var(--e-out);
}
.mobile__phone {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.01em;
  color: var(--ciemny);
  transition: color 240ms var(--e-out);
}
.mobile__phone:hover,
.mobile__phone:focus-visible { color: var(--hover); }
.mobile__meta {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--tekst-cichy);
}
.mobile__social { display: flex; gap: 10px; margin-top: 8px; }
.fb--mobile:hover,
.fb--mobile:focus-visible { background: var(--bialy); border-color: var(--akcent); }

/* -------------------------------------------------------------
   7b. Pasek social przy lewej krawedzi
   ------------------------------------------------------------- */
.rail {
  position: fixed;
  left: 0;
  top: 50%;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: translateY(-50%);
}

.rail__btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--linia);
  border-left: 0;
  border-radius: 0 var(--r-m) var(--r-m) 0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  box-shadow: 0 10px 24px -18px rgba(35, 35, 35, 0.7);
  transition:
    padding 380ms var(--e-out),
    background 300ms var(--e-out),
    box-shadow 380ms var(--e-out),
    transform 380ms var(--e-out);
}
.rail__btn:hover,
.rail__btn:focus-visible {
  padding-right: 16px;
  background: var(--bialy);
  box-shadow: 0 16px 30px -18px rgba(35, 35, 35, 0.75);
  transform: translateX(2px);
}

.rail__ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
}
.rail__ico svg {
  width: 20px;
  height: 20px;
  display: block;
  transition: transform 380ms var(--e-out);
}
.rail__btn:hover .rail__ico svg,
.rail__btn:focus-visible .rail__ico svg { transform: scale(1.12); }

/* podpis wysuwa sie dopiero po najechaniu */
.rail__label {
  max-width: 0;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--ciemny);
  opacity: 0;
  transition:
    max-width 420ms var(--e-out),
    opacity 260ms var(--e-out);
}
.rail__btn:hover .rail__label,
.rail__btn:focus-visible .rail__label {
  max-width: 180px;
  opacity: 1;
}
.rail__btn--google:hover .rail__label { color: #1a73e8; }
.rail__btn--fb:hover .rail__label { color: #1877F2; }

/* przy otwartym menu mobilnym pasek znika */
body.is-locked .rail {
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--e-out);
}

/* -------------------------------------------------------------
   7c. Plywajacy telefon w prawym dolnym rogu
   ------------------------------------------------------------- */
.telefon {
  position: fixed;
  right: clamp(16px, 2.4vw, 30px);
  bottom: clamp(16px, 2.4vw, 30px);
  z-index: 85;
  display: flex;
  align-items: center;
  gap: 0;
  height: 60px;
  padding: 0 6px;
  border-radius: 999px;
  background: linear-gradient(145deg, #5FC29D 0%, var(--akcent) 46%, var(--hover) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 6px rgba(0, 0, 0, 0.18),
    0 16px 34px -14px rgba(58, 146, 116, 0.95);
  color: var(--bialy);
  transition: gap 420ms var(--e-out), padding 420ms var(--e-out), box-shadow 420ms var(--e-out), transform 420ms var(--e-out);
}
.telefon:hover,
.telefon:focus-visible {
  gap: 12px;
  padding: 0 24px 0 6px;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -2px 6px rgba(0, 0, 0, 0.18),
    0 22px 40px -14px rgba(58, 146, 116, 1);
}

/* polysk przesuwajacy sie po sluchawce */
.telefon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.5) 46%, transparent 60%);
  opacity: 0;
  pointer-events: none;
  animation: polysk 4.5s var(--e-in-out) infinite;
}
@keyframes polysk {
  0%, 62% { opacity: 0; transform: translateX(-35%); }
  74%     { opacity: 0.85; }
  92%     { opacity: 0; transform: translateX(35%); }
  100%    { opacity: 0; transform: translateX(35%); }
}

/* pulsujaca obwodka */
.telefon__puls {
  position: absolute;
  left: 6px;
  top: 50%;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  animation: puls 2.6s var(--e-out) infinite;
  pointer-events: none;
}
@keyframes puls {
  0%   { transform: scale(1);    opacity: 0.55; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

.telefon__ikona {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.telefon__ikona svg {
  width: 23px;
  height: 23px;
  display: block;
  animation: dzwoni 3.4s var(--e-in-out) infinite;
}
@keyframes dzwoni {
  0%, 72%, 100% { transform: rotate(0deg); }
  76% { transform: rotate(-13deg); }
  80% { transform: rotate(11deg); }
  84% { transform: rotate(-8deg); }
  88% { transform: rotate(5deg); }
}

.telefon__numer {
  max-width: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.01em;
  white-space: nowrap;
  opacity: 0;
  transition: max-width 420ms var(--e-out), opacity 300ms var(--e-out);
}
.telefon:hover .telefon__numer,
.telefon:focus-visible .telefon__numer { max-width: 170px; opacity: 1; }

body.is-locked .telefon {
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--e-out);
}

@media (max-width: 620px) {
  .telefon { height: 54px; }
  .telefon__ikona { width: 44px; height: 44px; }
  .telefon__puls { width: 44px; height: 44px; margin-top: -22px; }
}

/* -------------------------------------------------------------
   7d. Baner zgod na cookies
   ------------------------------------------------------------- */
.cookies {
  position: fixed;
  left: clamp(12px, 2.4vw, 26px);
  bottom: clamp(12px, 2.4vw, 26px);
  z-index: 120;
  width: min(430px, calc(100vw - 24px));
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 420ms var(--e-out), transform 520ms var(--e-out);
}
.cookies[hidden] { display: none; }
.cookies.is-open { opacity: 1; transform: none; }

.cookies__panel {
  padding: clamp(20px, 2.2vw, 26px);
  border: 1px solid var(--linia);
  border-radius: var(--r-l);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: var(--cien-panel);
}
.cookies__tytul {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--grafit);
}
.cookies__opis {
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(35, 35, 35, 0.78);
}
.cookies__opis strong { font-weight: 700; color: var(--grafit); }

.cookies__opcje {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--linia);
}
.cookies__opcja {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
}
.cookies__opcja input {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 3px;
  accent-color: var(--akcent);
}
.cookies__opcja span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(35, 35, 35, 0.7);
}
.cookies__opcja strong { font-size: 13.5px; font-weight: 700; color: var(--grafit); }

.cookies__akcje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}
.btn--maly { height: 44px; padding: 0 20px; font-size: 13.5px; }
.cookies__ustawienia {
  padding: 8px 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--tekst-cichy);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 240ms var(--e-out);
}
.cookies__ustawienia:hover { color: var(--hover); }

.cookies__stopka {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 300;
  color: var(--tekst-cichy);
}
.cookies__stopka a {
  font-weight: 700;
  color: var(--ciemny);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cookies__stopka a:hover { color: var(--hover); }

/* zaslona zamiast mapy, dopoki nie ma zgody */
.mapa-zaslona {
  display: grid;
  place-items: center;
  gap: 14px;
  padding: clamp(30px, 5vw, 56px) 24px;
  min-height: clamp(360px, 52vh, 560px);
  text-align: center;
  background:
    repeating-linear-gradient(0deg,  rgba(49, 65, 60, 0.05) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(49, 65, 60, 0.05) 0 1px, transparent 1px 26px),
    var(--tlo);
}
.mapa-zaslona__tekst {
  max-width: 380px;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(35, 35, 35, 0.72);
}
.mapa-zaslona__tekst strong { font-weight: 700; color: var(--grafit); }

/* -------------------------------------------------------------
   8. Responsywnosc
   ------------------------------------------------------------- */
@media (max-width: 1100px) {
  .menu__link { padding: 11px 12px; font-size: 14px; }
}

@media (max-width: 1023px) {
  :root { --nav-h: 82px; --nav-h-min: 66px; }
  .menu { display: none; }
  .burger { display: grid; }
  .logo__mark { width: 42px; height: 42px; }
}

/* Na telefonie logotyp lamie sie na dwie linie, zeby nie rozpychal paska */
@media (max-width: 620px) {
  :root { --nav-h: 74px; --nav-h-min: 62px; }
  .logo { gap: 11px; }
  .logo__mark { width: 38px; height: 38px; }
  .logo__drop { width: 14px; height: 14px; }
  .logo__words { gap: 4px; }
  .logo__name { font-size: 15px; letter-spacing: 0.05em; line-height: 1.05; }
  .logo__name-light {
    display: block;
    margin-right: 0;
    font-size: 9px;
    letter-spacing: 0.26em;
  }
  .logo__tagline { display: none; }
  .fb { width: 38px; height: 38px; }
  .fb .ikona { width: 18px; height: 18px; }
  .navbar__side { gap: 6px; }
  /* na telefonie pasek social zaslanialby tresc, wystarczy ten w menu */
  .rail { display: none; }
}

@media (max-width: 340px) {
  .logo__name { font-size: 13.5px; }
}

/* =============================================================
   HERO
   ============================================================= */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 620px;
  height: calc(100vh - var(--nav-h));
  height: calc(100svh - var(--nav-h));
  max-height: 900px;
  overflow: hidden;
  background: var(--grafit);
}

/* -------- pokaz zdjec z efektem ken burns -------- */
.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--grafit);
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 56%;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1700ms var(--e-out);
  will-change: opacity, transform;
}
.hero__img.is-aktywny { opacity: 1; }

/* kazdy slajd jedzie w inna strone, zeby nie bylo widac powtorki */
.hero.is-ready .hero__img.is-aktywny { animation: kenburns-a 9s linear forwards; }
.hero.is-ready .hero__img:nth-of-type(2).is-aktywny { animation-name: kenburns-b; }
.hero.is-ready .hero__img:nth-of-type(3).is-aktywny { animation-name: kenburns-c; }

@keyframes kenburns-a {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.15) translate3d(-1.6%, -1.4%, 0); }
}
@keyframes kenburns-b {
  from { transform: scale(1.15) translate3d(1.6%, 1.1%, 0); }
  to   { transform: scale(1.04) translate3d(0, 0, 0); }
}
@keyframes kenburns-c {
  from { transform: scale(1.05) translate3d(1.4%, -0.9%, 0); }
  to   { transform: scale(1.16) translate3d(-1.1%, 0.9%, 0); }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20, 20, 20, 0.30) 0%, rgba(20, 20, 20, 0) 26%),
    linear-gradient(180deg, rgba(20, 20, 20, 0) 72%, rgba(20, 20, 20, 0.42) 100%),
    linear-gradient(96deg,
      rgba(20, 20, 20, 0.74) 0%,
      rgba(20, 20, 20, 0.62) 32%,
      rgba(20, 20, 20, 0.34) 62%,
      rgba(20, 20, 20, 0.18) 100%);
}

/* -------- uklad tresci -------- */
.hero__inner {
  --etapy-w: 372px;
  --hero-odstep: clamp(24px, 4vw, 64px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--etapy-w);
  gap: var(--hero-odstep);
  align-items: center;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gap-bok);
}
.hero__tresc { max-width: 660px; }

/* wejscie tekstu z lewej, po kolei */
.hero__kicker,
.hero__h1,
.hero__opis,
.hero__cta,
.hero__atuty,
.hero__obszar {
  opacity: 0;
  transform: translateX(-26px);
  transition: opacity 700ms var(--e-out), transform 900ms var(--e-out);
}
.etapy {
  opacity: 0;
  transform: translateX(26px);
  transition: opacity 700ms var(--e-out), transform 900ms var(--e-out);
}
.hero.is-ready .hero__kicker,
.hero.is-ready .hero__h1,
.hero.is-ready .hero__opis,
.hero.is-ready .hero__cta,
.hero.is-ready .hero__atuty,
.hero.is-ready .hero__obszar,
.hero.is-ready .etapy {
  opacity: 1;
  transform: none;
  transition-delay: calc(120ms + var(--i) * 110ms);
}

/* -------- nadkreslenie -------- */
.hero__kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.hero__kreska {
  display: block;
  width: 46px;
  height: 2px;
  border-radius: 2px;
  background: var(--akcent);
}

/* -------- naglowek -------- */
.hero__h1 {
  margin: 0 0 22px;
  font-size: clamp(1.85rem, 3.5vw, 3rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.028em;
  color: var(--bialy);
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.hero__akcent { color: var(--akcent-2); }
.hero__h1-podtytul {
  display: block;
  margin-top: 0.42em;
  font-size: 0.4em;
  font-weight: 300;
  letter-spacing: 0.005em;
  color: rgba(255, 255, 255, 0.9);
}

/* -------- akapit -------- */
.hero__opis {
  max-width: 585px;
  margin-bottom: 34px;
  font-size: clamp(15px, 1.15vw, 16.5px);
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.35);
}
.hero__opis strong {
  font-weight: 700;
  color: var(--bialy);
}

/* -------- przyciski -------- */
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 34px;
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  overflow: hidden;
  transition:
    background 300ms var(--e-out),
    border-color 300ms var(--e-out),
    color 300ms var(--e-out),
    transform 380ms var(--e-out),
    box-shadow 380ms var(--e-out);
}

.btn--pelny {
  background: var(--akcent);
  color: var(--bialy);
  box-shadow: 0 18px 34px -20px rgba(79, 174, 141, 0.95);
}
/* przetarcie swiatlem po najechaniu */
.btn--pelny::after {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -70%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg);
  transition: left 750ms var(--e-out);
}
.btn--pelny:hover,
.btn--pelny:focus-visible {
  background: var(--hover);
  transform: translateY(-2px);
  box-shadow: 0 24px 42px -20px rgba(58, 146, 116, 1);
}
.btn--pelny:hover::after,
.btn--pelny:focus-visible::after { left: 130%; }

.btn--ramka {
  border-color: rgba(255, 255, 255, 0.62);
  color: var(--bialy);
}
.btn--ramka:hover,
.btn--ramka:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--bialy);
  transform: translateY(-2px);
}
.btn__strzalka {
  position: relative;
  width: 16px;
  height: 8px;
  transition: transform 380ms var(--e-out);
}
.btn__strzalka::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
}
.btn__strzalka::after {
  content: "";
  position: absolute;
  right: 0;
  top: 1.5px;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.btn--ramka:hover .btn__strzalka,
.btn--ramka:focus-visible .btn__strzalka { transform: translateX(5px); }

/* -------- trzy atuty -------- */
.hero__atuty {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  margin-bottom: 26px;
}
.hero__atuty li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.92);
}
.ptaszek {
  position: relative;
  flex: none;
  width: 21px;
  height: 21px;
  border: 1px solid rgba(166, 214, 195, 0.5);
  border-radius: 50%;
  background: rgba(79, 174, 141, 0.16);
}
.ptaszek::before {
  content: "";
  position: absolute;
  left: 7.5px;
  top: 4.5px;
  width: 5px;
  height: 9px;
  border-right: 1.8px solid var(--akcent-2);
  border-bottom: 1.8px solid var(--akcent-2);
  transform: rotate(43deg);
}

/* -------- obszar dzialania -------- */
.hero__obszar {
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.6);
}

/* -------- strzalka prowadzaca do panelu z etapami -------- */
.hero__wskaz {
  position: absolute;
  top: 50%;
  right: calc(var(--etapy-w) + var(--gap-bok) + var(--hero-odstep) / 2 - 26px);
  width: 52px;
  height: 14px;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.75));
  transition: opacity 700ms var(--e-out);
  animation: wskaz 2.6s var(--e-in-out) infinite;
}
.hero.is-ready .hero__wskaz { opacity: 1; transition-delay: 1100ms; }

/* linia */
.hero__wskaz::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1.5px;
  margin-top: -0.75px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(166, 214, 195, 0), var(--akcent-2));
}
/* grot */
.hero__wskaz::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border-top: 1.5px solid var(--akcent-2);
  border-right: 1.5px solid var(--akcent-2);
  border-radius: 0 2px 0 0;
  transform: rotate(45deg);
}
@keyframes wskaz {
  0%, 100% { transform: translate(0, -50%); }
  50%      { transform: translate(8px, -50%); }
}

/* -------- panel z etapami wspolpracy -------- */
.etapy {
  padding: clamp(22px, 2vw, 30px) clamp(20px, 1.9vw, 28px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-l);
  background: rgba(20, 20, 20, 0.42);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  box-shadow: 0 40px 70px -46px rgba(0, 0, 0, 0.95);
}
.etapy__tytul {
  padding-bottom: 16px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--akcent-2);
}

.etapy__lista { counter-reset: etap; }
.etapy__krok {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 4px 15px 0;
  border-radius: var(--r-s);
  opacity: 0;
  transform: translateX(14px);
  transition:
    opacity 600ms var(--e-out),
    transform 640ms var(--e-out),
    background 300ms var(--e-out),
    padding 300ms var(--e-out);
}
.hero.is-ready .etapy__krok {
  opacity: 1;
  transform: none;
  transition-delay: calc(760ms + var(--k) * 130ms);
}
.etapy__krok:hover {
  background: rgba(166, 214, 195, 0.1);
  padding-left: 8px;
}
/* pionowa nitka laczaca numery */
.etapy__krok::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 46px;
  bottom: -4px;
  width: 1px;
  background: linear-gradient(180deg, rgba(166, 214, 195, 0.45), rgba(166, 214, 195, 0.06));
}
.etapy__krok:last-child::before { display: none; }

.etapy__nr {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: none;
  width: 31px;
  height: 31px;
  border: 1px solid rgba(166, 214, 195, 0.5);
  border-radius: 50%;
  background: rgba(79, 174, 141, 0.2);
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--akcent-2);
  transition: background 300ms var(--e-out), border-color 300ms var(--e-out), color 300ms var(--e-out);
}
.etapy__krok:hover .etapy__nr {
  background: var(--akcent);
  border-color: var(--akcent);
  color: var(--bialy);
}

.etapy__opis {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.68);
}
.etapy__opis strong {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--bialy);
}
.etapy__opis b {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
}

.etapy__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  width: 100%;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--akcent-2);
  transition: color 260ms var(--e-out), gap 300ms var(--e-out);
}
.etapy__link:hover,
.etapy__link:focus-visible { color: var(--bialy); gap: 14px; }

/* -------- wskaznik przewijania -------- */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 30px;
  width: 1px;
  height: 60px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.25);
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 600ms var(--e-out) 1100ms;
}
.hero.is-ready .hero__scroll { opacity: 1; }
.hero__scroll::after {
  content: "";
  position: absolute;
  left: 0;
  top: -22px;
  width: 1px;
  height: 22px;
  background: var(--bialy);
  animation: splyw 2.4s var(--e-in-out) infinite;
}
@keyframes splyw {
  0%   { transform: translateY(0);    opacity: 0; }
  18%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translateY(82px); opacity: 0; }
}

/* -------- hero na tablecie i telefonie -------- */
@media (max-width: 1220px) {
  .hero__inner { grid-template-columns: 1fr; }
  .etapy,
  .hero__wskaz { display: none; }
}

@media (max-width: 1023px) {
  .hero { height: calc(100svh - var(--nav-h)); min-height: 580px; }
  .hero__tresc { max-width: 560px; }
}

@media (max-width: 760px) {
  .hero {
    align-items: flex-end;
    padding-bottom: 92px;
    min-height: 600px;
    max-height: none;
  }
  .hero__img { object-position: 50% 62%; }
  .hero__overlay {
    background:
      linear-gradient(180deg, rgba(20, 20, 20, 0.55) 0%, rgba(20, 20, 20, 0.32) 34%,
                              rgba(20, 20, 20, 0.55) 62%, rgba(20, 20, 20, 0.82) 100%);
  }
  .hero__tresc {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
  }
  .hero__kicker {
    justify-content: center;
    margin-bottom: 16px;
    font-size: 10px;
    letter-spacing: 0.16em;
  }
  .hero__kreska { display: none; }
  .hero__h1 { margin-bottom: 18px; }
  .hero__opis { margin: 0 auto 28px; font-size: 15px; line-height: 1.7; }
  .hero__cta { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 26px; }
  .btn { width: 100%; height: 54px; }
  .hero__atuty { justify-content: center; gap: 10px 22px; margin-bottom: 18px; }
  .hero__atuty li { font-size: 13.5px; }
  .hero__obszar { font-size: 11.5px; }
  .hero__scroll { height: 44px; bottom: 22px; }
  @keyframes splyw {
    0%   { transform: translateY(0);    opacity: 0; }
    18%  { opacity: 1; }
    75%  { opacity: 1; }
    100% { transform: translateY(66px); opacity: 0; }
  }

  /* na telefonie tekst wchodzi od dolu, nie z boku */
  .hero__kicker,
  .hero__h1,
  .hero__opis,
  .hero__cta,
  .hero__atuty,
  .hero__obszar { transform: translateY(20px); }
}

/* =============================================================
   SEKCJE STRONY GLOWNEJ
   ============================================================= */
.kontener {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gap-bok);
}
.kontener--waski { max-width: 880px; }

.sekcja { padding: clamp(64px, 8vw, 116px) 0; }
.sekcja--biala { background: var(--bialy); }
.sekcja--jasna { background: var(--tlo); }

/* separator miedzy sekcjami: kreska z kostka na srodku */
.separator {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0;
}
.separator span {
  position: relative;
  display: block;
  width: min(560px, 70%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--linia) 22%, var(--linia) 78%, transparent);
}
.separator span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 2px;
  background: var(--akcent);
  transform: rotate(45deg);
}

/* -------- znak wodny w tle sekcji -------- */
.sekcja--znak {
  position: relative;
  overflow: hidden;
}
.sekcja--znak .kontener { position: relative; z-index: 1; }

/* motyw kostki brukowej, wychodzi zza zdjecia przy prawej krawedzi */
.znak-wodny {
  position: absolute;
  top: 50%;
  right: clamp(-190px, -7vw, -60px);
  width: min(620px, 54vw);
  aspect-ratio: 1;
  border: 3px solid rgba(49, 65, 60, 0.16);
  border-radius: 44px;
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
  z-index: 0;
}
/* siatka spoin */
.znak-wodny::before {
  content: "";
  position: absolute;
  inset: 44px;
  border-radius: 28px;
  background:
    repeating-linear-gradient(0deg,  rgba(49, 65, 60, 0.13) 0 2px, transparent 2px 38px),
    repeating-linear-gradient(90deg, rgba(49, 65, 60, 0.13) 0 2px, transparent 2px 38px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 46%, transparent 84%);
  mask-image: radial-gradient(circle at 50% 50%, #000 46%, transparent 84%);
}
/* mniejsza kostka w srodku, w kolorze akcentu */
.znak-wodny::after {
  content: "";
  position: absolute;
  inset: 33%;
  border: 3px solid rgba(79, 174, 141, 0.34);
  border-radius: 18px;
  background: rgba(166, 214, 195, 0.09);
}

@media (max-width: 1023px) {
  .znak-wodny { display: none; }
}

/* -------- typografia sekcji -------- */
.etykieta {
  margin-bottom: 14px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--akcent);
}

.naglowek {
  margin: 0 0 22px;
  font-size: clamp(1.65rem, 2.9vw, 2.5rem);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -0.022em;
  color: var(--grafit);
  text-wrap: balance;
}
.naglowek--maly { font-size: clamp(1.35rem, 2.1vw, 1.75rem); margin-bottom: 12px; }
.naglowek--jasny { color: var(--bialy); }

.tresc {
  margin-bottom: 18px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(35, 35, 35, 0.82);
}
.tresc:last-child { margin-bottom: 0; }
.tresc strong { font-weight: 700; color: var(--grafit); }
.tresc a {
  font-weight: 700;
  color: var(--hover);
  text-decoration: underline;
  text-decoration-color: rgba(79, 174, 141, 0.4);
  text-underline-offset: 3px;
  transition: text-decoration-color 240ms var(--e-out), color 240ms var(--e-out);
}
.tresc a:hover { color: var(--ciemny); text-decoration-color: var(--akcent); }
.tresc--jasna { color: rgba(255, 255, 255, 0.86); }
.tresc--jasna strong { color: var(--bialy); }
.tresc--srodek { max-width: 700px; margin-left: auto; margin-right: auto; }

.naglowek-sekcji {
  max-width: 760px;
  margin: 0 auto clamp(36px, 4vw, 58px);
  text-align: center;
}

/* -------- link ze strzalka -------- */
.link-strzalka {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ciemny);
  transition: color 260ms var(--e-out), gap 300ms var(--e-out);
}
.link-strzalka:hover,
.link-strzalka:focus-visible { color: var(--hover); gap: 14px; }

/* -------- uklad tekst + zdjecie -------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}
.split--odwrotny .split__tekst { order: 2; }
.split--odwrotny .split__foto { order: 1; }
.split__tekst { max-width: 560px; }

/* -------- ramka na zdjecia -------- */
.ramka {
  position: relative;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--linia);
  border-radius: var(--r-l);
  background: var(--bialy);
  box-shadow: 0 30px 60px -44px rgba(35, 35, 35, 0.55);
}
.ramka img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.ramka__podpis {
  display: block;
  padding: 12px 6px 4px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--tekst-cichy);
}
.split__foto { max-height: none; }
.split__foto img { max-height: 560px; object-fit: cover; }

/* -------- karty uslug -------- */
.karty {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.6vw, 32px);
}
/* lista wpisow bloga: wiecej kafelkow, wiec trzy w rzedzie */
.karty--blog { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1080px) {
  .karty--blog { grid-template-columns: repeat(2, 1fr); }
}
.karta {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--linia);
  border-radius: var(--r-l);
  background: var(--bialy);
  transition: transform 420ms var(--e-out), box-shadow 420ms var(--e-out), border-color 300ms var(--e-out);
}
.karta:hover {
  transform: translateY(-4px);
  border-color: rgba(79, 174, 141, 0.45);
  box-shadow: 0 34px 60px -40px rgba(35, 35, 35, 0.6);
}
.karta__foto {
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--tlo);
}
.karta__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--e-out);
}
.karta:hover .karta__foto img { transform: scale(1.045); }
.karta__tresc { padding: clamp(22px, 2.4vw, 32px); }
.karta__tytul {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--grafit);
}

/* -------- pas CTA -------- */
.cta {
  position: relative;
  padding: clamp(52px, 6vw, 82px) 0;
  background:
    radial-gradient(700px 380px at 88% 10%, rgba(79, 174, 141, 0.28), transparent 62%),
    linear-gradient(120deg, var(--grafit) 0%, var(--ciemny) 100%);
}
.cta__inner {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.cta__tekst { max-width: 620px; }
.cta__akcje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.cta__info {
  width: 100%;
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.6);
}

/* -------- efekty przed i po -------- */
.efekty {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
  align-items: start;
}
.efekty__item--szeroki { grid-column: 1 / -1; }
/* rowna siatka mimo roznych proporcji zdjec */
.efekty__item img { aspect-ratio: 1 / 1; object-fit: cover; object-position: center; }
.efekty__item--szeroki img { aspect-ratio: 16 / 9; }
.efekty__stopka { margin-top: clamp(28px, 3vw, 42px); text-align: center; }

/* -------- kroki -------- */
.kroki {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.krok {
  position: relative;
  padding: clamp(24px, 2.4vw, 32px);
  border: 1px solid var(--linia);
  border-radius: var(--r-l);
  background: var(--bialy);
  transition: transform 420ms var(--e-out), box-shadow 420ms var(--e-out);
}
.krok:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 50px -40px rgba(35, 35, 35, 0.6);
}
.krok__nr {
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: var(--akcent);
}
.krok__tytul {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--grafit);
}
.krok .tresc { font-size: 14.5px; line-height: 1.75; }

/* -------- miasta -------- */
.miasta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 26px;
}
.miasta li {
  padding: 8px 15px;
  border: 1px solid var(--linia);
  border-radius: 999px;
  background: var(--bialy);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ciemny);
  transition: border-color 260ms var(--e-out), background 260ms var(--e-out);
}
.miasta li:hover {
  border-color: rgba(79, 174, 141, 0.5);
  background: rgba(166, 214, 195, 0.16);
}
/* pigulka z linkiem do podstrony miejscowosci */
.miasta li a {
  display: block;
  margin: -8px -15px;
  padding: 8px 15px;
  color: inherit;
  text-decoration: none;
  transition: color 260ms var(--e-out);
}
.miasta li:hover a,
.miasta li a:focus-visible {
  color: var(--hover);
}

/* -------- ramka CTA na koncu -------- */
.cta-ramka {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(26px, 3.4vw, 52px);
  align-items: center;
  padding: clamp(30px, 4vw, 52px);
  border: 1px solid rgba(79, 174, 141, 0.4);
  border-radius: var(--r-l);
  background:
    radial-gradient(560px 260px at 92% 0%, rgba(166, 214, 195, 0.28), transparent 68%),
    var(--tlo);
}
.cta-ramka__akcje {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.btn--ciemny {
  border-color: rgba(49, 65, 60, 0.28);
  color: var(--ciemny);
}
.btn--ciemny:hover,
.btn--ciemny:focus-visible {
  background: var(--ciemny);
  border-color: var(--ciemny);
  color: var(--bialy);
  transform: translateY(-2px);
}

/* -------------------------------------------------------------
   Opinie z Google, slider pod hero
   ------------------------------------------------------------- */
.opinie__gora {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}
.opinie__gora .naglowek { margin-bottom: 0; }

.opinie__sterowanie {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
  padding-bottom: 4px;
}
.opinie__strzalka {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(49, 65, 60, 0.18);
  border-radius: 50%;
  background: var(--bialy);
  cursor: pointer;
  transition: background var(--t) var(--e-out), border-color var(--t) var(--e-out),
              transform var(--t) var(--e-out);
}
.opinie__strzalka:hover,
.opinie__strzalka:focus-visible {
  background: var(--akcent);
  border-color: var(--akcent);
  transform: translateY(-2px);
}
/* grot z dwoch bokow kwadratu, obracany per kierunek */
.opinie__strzalka span {
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--ciemny);
  border-bottom: 2px solid var(--ciemny);
  transition: border-color var(--t) var(--e-out);
}
.opinie__strzalka:hover span,
.opinie__strzalka:focus-visible span { border-color: var(--bialy); }
[data-opinie-prev] span { transform: rotate(135deg) translate(-1px, -1px); }
[data-opinie-next] span { transform: rotate(-45deg) translate(-1px, -1px); }

.opinie__pas {
  display: flex;
  gap: clamp(16px, 2vw, 26px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* zapas na cien kart, zeby nie byl przycinany przy przewijaniu */
  padding: 6px 2px 22px;
  margin: -6px -2px -22px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.opinie__pas::-webkit-scrollbar { display: none; }
.opinie__pas:focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: 6px;
}

.opinia {
  position: relative;
  flex: 0 0 min(376px, 82vw);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(24px, 2.6vw, 30px);
  background: var(--bialy);
  border: 1px solid var(--linia);
  border-radius: var(--r-l);
  box-shadow: 0 1px 1px rgba(35, 35, 35, 0.03), 0 18px 30px -24px rgba(49, 65, 60, 0.4);
  transition: transform var(--t) var(--e-out), box-shadow var(--t) var(--e-out);
}
.opinia:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 1px rgba(35, 35, 35, 0.04), 0 26px 40px -26px rgba(49, 65, 60, 0.45);
}

/* -------- naglowek karty: inicjal, nazwisko, ocena -------- */
.opinia__osoba {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--linia);
}
.opinia__inicjal {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(79, 174, 141, 0.13);
  color: var(--ciemny);
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}
.opinia__kto {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.opinia__autor {
  font-weight: 700;
  font-size: 14px;
  color: var(--ciemny);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.opinia__ocena {
  display: flex;
  align-items: center;
  gap: 8px;
}
.opinia__gwiazdki {
  color: #E0A32E;
  font-size: 12px;
  letter-spacing: 2px;
  line-height: 1;
}
.opinia__g {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  opacity: 0.85;
}

.opinia__tresc { margin: 0; }
.opinia__tresc p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(35, 35, 35, 0.86);
}

/* -------- wizytowka i mapa pod slajderem -------- */
.opinie__dol {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(22px, 3vw, 44px);
  align-items: center;
  margin-top: clamp(30px, 4vw, 50px);
}
.opinie__wizytowka .etykieta { margin-bottom: 12px; }
.opinie__wizytowka .tresc { margin: 0; }

.opinie__mapa {
  overflow: hidden;
  border: 1px solid var(--linia);
  border-radius: var(--r-l);
  box-shadow: 0 26px 50px -40px rgba(35, 35, 35, 0.55);
}
.opinie__mapa iframe {
  display: block;
  width: 100%;
  height: clamp(260px, 34vh, 340px);
  border: 0;
  filter: saturate(0.92);
}
/* zaslona jest wspolna z kontaktem, tu wystarczy nizsza */
.opinie__mapa .mapa-zaslona {
  min-height: clamp(260px, 34vh, 340px);
  padding: 30px 24px;
}

.opinie__link {
  margin: clamp(20px, 2.4vw, 26px) 0 0;
}
.opinie__link a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ciemny);
  text-decoration: none;
  border-bottom: 1px solid rgba(49, 65, 60, 0.2);
  padding-bottom: 3px;
  transition: color var(--t) var(--e-out), border-color var(--t) var(--e-out);
}
.opinie__link a:hover,
.opinie__link a:focus-visible {
  color: var(--akcent);
  border-color: var(--akcent);
}

@media (max-width: 900px) {
  .opinie__dol { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .opinie__gora {
    align-items: flex-start;
    flex-direction: column;
  }
  .opinie__sterowanie { padding-bottom: 0; }
}

/* =============================================================
   LIGHTBOX
   ============================================================= */
.efekty__item img {
  cursor: zoom-in;
  transition: transform 500ms var(--e-out), filter 400ms var(--e-out);
}
.efekty__item img:hover,
.efekty__item img:focus-visible { filter: brightness(1.04); }
.efekty__item:hover img { transform: scale(1.012); }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(8px, 2vw, 26px);
  padding: clamp(46px, 6vw, 72px) clamp(12px, 3vw, 40px) clamp(52px, 6vw, 68px);
  background: rgba(20, 20, 20, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms var(--e-out), visibility 0s linear 300ms;
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s, 0s;
}

.lightbox__figura {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0;
  min-width: 0;
  max-height: 100%;
}
.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 190px);
  object-fit: contain;
  border-radius: var(--r-m);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
  transform: scale(0.97);
  transition: transform 380ms var(--e-out);
}
.lightbox.is-open .lightbox__img { transform: scale(1); }

.lightbox__podpis {
  max-width: 680px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
}

.lightbox__zamknij,
.lightbox__strzalka {
  position: relative;
  flex: none;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  transition: background 260ms var(--e-out), border-color 260ms var(--e-out), transform 320ms var(--e-out);
}
.lightbox__zamknij:hover,
.lightbox__strzalka:hover,
.lightbox__zamknij:focus-visible,
.lightbox__strzalka:focus-visible {
  background: var(--akcent);
  border-color: var(--akcent);
  transform: scale(1.08);
}

.lightbox__zamknij {
  position: absolute;
  top: clamp(12px, 2.4vw, 24px);
  right: clamp(12px, 2.4vw, 28px);
}
.lightbox__zamknij::before,
.lightbox__zamknij::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17px;
  height: 2px;
  margin: -1px 0 0 -8.5px;
  border-radius: 2px;
  background: var(--bialy);
}
.lightbox__zamknij::before { transform: rotate(45deg); }
.lightbox__zamknij::after { transform: rotate(-45deg); }

.lightbox__strzalka::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  border-top: 2px solid var(--bialy);
  border-right: 2px solid var(--bialy);
  border-radius: 0 2px 0 0;
}
.lightbox__strzalka--dalej::before { transform: translate(-70%, -50%) rotate(45deg); }
.lightbox__strzalka--wstecz::before { transform: translate(-30%, -50%) rotate(-135deg); }
.lightbox__strzalka--wstecz { grid-column: 1; }
.lightbox__strzalka--dalej { grid-column: 3; }

.lightbox__licznik {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(16px, 2.6vw, 26px);
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 620px) {
  .lightbox { grid-template-columns: 1fr; padding-bottom: 92px; }
  .lightbox__figura { grid-column: 1; }
  .lightbox__img { max-height: calc(100vh - 240px); }
  .lightbox__strzalka { position: absolute; bottom: 44px; }
  .lightbox__strzalka--wstecz { left: 50%; margin-left: -58px; }
  .lightbox__strzalka--dalej { left: 50%; margin-left: 10px; }
  .lightbox__licznik { bottom: 14px; }
}

/* =============================================================
   PODSTRONY
   ============================================================= */
.naglowek-podstrony {
  position: relative;
  padding: clamp(46px, 5.4vw, 78px) 0 clamp(40px, 4.6vw, 66px);
  background:
    radial-gradient(760px 380px at 88% 0%, rgba(166, 214, 195, 0.34), transparent 66%),
    var(--tlo);
  border-bottom: 1px solid var(--linia);
}
.naglowek-podstrony .kontener { position: relative; z-index: 1; }

/* wariant ze zdjeciem w tle */
.naglowek-podstrony--foto {
  padding: clamp(70px, 8vw, 118px) 0 clamp(64px, 7vw, 104px);
  border-bottom: 0;
  overflow: hidden;
  background: var(--grafit);
}
.naglowek-podstrony__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
  animation: naglowek-zoom 2600ms var(--e-out) both;
}
@keyframes naglowek-zoom {
  from { transform: scale(1.07); }
  to   { transform: scale(1); }
}
.naglowek-podstrony__zaslona {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20, 20, 20, 0.3) 0%, rgba(20, 20, 20, 0) 34%),
    linear-gradient(96deg, rgba(20, 20, 20, 0.8) 0%, rgba(20, 20, 20, 0.62) 40%,
                           rgba(20, 20, 20, 0.34) 74%, rgba(20, 20, 20, 0.2) 100%);
}

.naglowek-podstrony--foto .naglowek,
.naglowek-podstrony--foto .naglowek-podstrony__lead {
  color: var(--bialy);
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.4);
}
.naglowek-podstrony--foto .naglowek-podstrony__lead { color: rgba(255, 255, 255, 0.88); }
.naglowek-podstrony--foto .naglowek-podstrony__lead strong { color: var(--bialy); }
.naglowek-podstrony--foto .etykieta { color: var(--akcent-2); }
.naglowek-podstrony--foto .okruszki,
.naglowek-podstrony--foto .okruszki a { color: rgba(255, 255, 255, 0.68); }
.naglowek-podstrony--foto .okruszki a:hover { color: var(--bialy); }
.naglowek-podstrony--foto .okruszki span[aria-current] { color: var(--bialy); }
.naglowek--duzy {
  max-width: 940px;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
}
.naglowek-podstrony__lead {
  max-width: 660px;
  font-size: 17px;
  color: rgba(35, 35, 35, 0.78);
}

.okruszki {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--tekst-cichy);
}
.okruszki a {
  color: var(--tekst-cichy);
  transition: color 240ms var(--e-out);
}
.okruszki a:hover { color: var(--hover); }
.okruszki span[aria-current] { color: var(--ciemny); font-weight: 700; }

/* -------- kontakt -------- */
.kontakt {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(30px, 4vw, 64px);
  align-items: start;
}
.kontakt__dane { max-width: 520px; }
.kontakt__pozycja {
  padding: 20px 0;
  border-top: 1px solid var(--linia);
}
.kontakt__pozycja:first-of-type { border-top: 0; padding-top: 6px; }
.kontakt__etykieta {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--akcent);
}
.kontakt__duzy {
  display: inline-block;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--grafit);
  transition: color 240ms var(--e-out);
}
.kontakt__duzy:hover { color: var(--hover); }
.kontakt__uwaga { margin-top: 10px; font-size: 14.5px; }
.kontakt__adres {
  font-size: 16px;
  font-weight: 300;
  font-style: normal;
  line-height: 1.8;
  color: rgba(35, 35, 35, 0.82);
}
.kontakt__akcje {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.kontakt__mapa {
  overflow: hidden;
  border: 1px solid var(--linia);
  border-radius: var(--r-l);
  box-shadow: 0 30px 60px -44px rgba(35, 35, 35, 0.55);
}
.kontakt__mapa iframe {
  display: block;
  width: 100%;
  height: clamp(360px, 52vh, 560px);
  border: 0;
  filter: saturate(0.92);
}

@media (max-width: 1023px) {
  .kontakt { grid-template-columns: 1fr; }
  .kontakt__dane { max-width: 100%; }
}
@media (max-width: 700px) {
  .kontakt__akcje .btn { width: 100%; }
}

/* =============================================================
   MIEJSCOWOŚCI (pas nad stopką)
   ============================================================= */
.miejscowosci {
  padding: clamp(40px, 4.6vw, 66px) 0 clamp(44px, 5vw, 72px);
  background: var(--tlo);
  border-top: 1px solid var(--linia);
}
.miejscowosci__tytul {
  margin-bottom: clamp(22px, 2.4vw, 32px);
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ciemny);
}
.miejscowosci__lista {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2px clamp(18px, 2.2vw, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.miejscowosci__lista a {
  position: relative;
  display: block;
  padding: 8px 0 8px 15px;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--tekst-cichy);
  text-decoration: none;
  border-bottom: 1px solid var(--linia);
  transition: color 0.22s ease, border-color 0.22s ease;
}
/* mała kostka z logo jako znacznik listy */
.miejscowosci__lista a::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--akcent-2);
  transform: rotate(45deg);
  transition: background 0.22s ease, transform 0.22s ease;
}
.miejscowosci__lista b {
  font-weight: 700;
  color: var(--ciemny);
  transition: color 0.22s ease;
}
.miejscowosci__lista a:hover,
.miejscowosci__lista a:focus-visible {
  color: var(--hover);
  border-color: rgba(79, 174, 141, 0.4);
}
.miejscowosci__lista a:hover b,
.miejscowosci__lista a:focus-visible b {
  color: var(--hover);
}
.miejscowosci__lista a:hover::before,
.miejscowosci__lista a:focus-visible::before {
  background: var(--akcent);
  transform: rotate(45deg) scale(1.25);
}

@media (max-width: 1180px) {
  .miejscowosci__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .miejscowosci__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .miejscowosci__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .miejscowosci__lista a { font-size: 12px; }
}
@media (max-width: 400px) {
  .miejscowosci__lista { grid-template-columns: 1fr; }
}

/* =============================================================
   STOPKA
   ============================================================= */
.stopka {
  padding-top: clamp(52px, 6vw, 82px);
  background: var(--grafit);
  color: rgba(255, 255, 255, 0.72);
}
.stopka__gora {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr 1fr;
  gap: clamp(24px, 2.6vw, 48px);
  padding-bottom: clamp(38px, 4vw, 56px);
}

.logo--stopka { cursor: default; margin: 0 0 18px; }
.stopka .logo__name { color: var(--bialy); }
.stopka .logo__name-light { color: rgba(255, 255, 255, 0.75); }
.stopka .logo__tagline { color: rgba(255, 255, 255, 0.5); }

.stopka__opis {
  max-width: 330px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.75;
}
.stopka__social { display: flex; gap: 10px; }
.fb--stopka {
  width: 40px;
  height: 40px;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
}
.fb--stopka:hover,
.fb--stopka:focus-visible {
  background: var(--akcent);
  border-color: var(--akcent);
  color: var(--bialy);
}

.stopka__tytul {
  margin: 0 0 16px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--akcent-2);
}
.stopka__lista { display: flex; flex-direction: column; gap: 10px; }
.stopka__lista a {
  font-size: 14.5px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.72);
  transition: color 240ms var(--e-out), transform 300ms var(--e-out);
  display: inline-block;
}
.stopka__lista a:hover,
.stopka__lista a:focus-visible { color: var(--bialy); transform: translateX(4px); }

.stopka__kontakt {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 300;
  font-style: normal;
  line-height: 1.6;
}
.stopka__tel {
  font-size: 20px;
  font-weight: 900;
  color: var(--bialy);
  transition: color 240ms var(--e-out);
}
.stopka__tel:hover { color: var(--akcent-2); }
.stopka__godziny { color: var(--akcent-2); }

.stopka__dol {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  padding-top: 22px;
  padding-bottom: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.55);
}
.stopka__dol a {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  transition: color 240ms var(--e-out);
}
.stopka__dol a:hover { color: var(--akcent-2); }

/* -------------------------------------------------------------
   Sekcje na tablecie i telefonie
   ------------------------------------------------------------- */
@media (max-width: 1023px) {
  .split { grid-template-columns: 1fr; gap: 34px; }
  .split--odwrotny .split__tekst,
  .split--odwrotny .split__foto { order: 0; }
  .split__tekst { max-width: 640px; }
  .split__foto img { max-height: 440px; }
  .kroki { grid-template-columns: repeat(2, 1fr); }
  .cta__inner { grid-template-columns: 1fr; }
  .efekty { grid-template-columns: repeat(2, 1fr); }
  .cta-ramka { grid-template-columns: 1fr; }
  .stopka__gora { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .karty { grid-template-columns: 1fr; }
  .kroki { grid-template-columns: 1fr; }
  .efekty { grid-template-columns: 1fr; }
  .stopka__gora { grid-template-columns: 1fr; }
  .cta-ramka__akcje .btn,
  .cta__akcje .btn { width: 100%; }
  .naglowek-sekcji { text-align: left; }
  .tresc--srodek { margin-left: 0; }
  .efekty__stopka { text-align: left; }
}

/* -------------------------------------------------------------
   9. Mniej ruchu
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* =============================================================
   POPUP KONTAKTOWY (script.js)
   ============================================================= */
.popup {
  width: min(760px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--r-l);
  background: var(--bialy);
  color: var(--tekst);
  box-shadow: var(--cien-panel), 0 40px 80px -30px rgba(35, 35, 35, 0.45);
  overflow: hidden;
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity 380ms var(--e-out), transform 480ms var(--e-out);
}
.popup.is-open { opacity: 1; transform: none; }
.popup::backdrop {
  background: rgba(35, 35, 35, 0.55);
  backdrop-filter: blur(3px);
}
.popup__panel {
  position: relative;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  min-height: 100%;
}
.popup__foto {
  position: relative;
  margin: 0;
  min-height: 100%;
  background: var(--ciemny);
}
.popup__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.popup__foto figcaption {
  position: absolute;
  inset: auto 14px 14px 14px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.popup__foto figcaption span {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(35, 35, 35, 0.72);
  color: var(--bialy);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.popup__foto figcaption span:last-child { background: var(--akcent); }
.popup__tresc {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 44px 36px 30px;
}
.popup__zamknij {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: var(--tlo);
  color: var(--ciemny);
  cursor: pointer;
  transition: background var(--t) var(--e-out), transform var(--t) var(--e-out);
}
.popup__zamknij:hover,
.popup__zamknij:focus-visible { background: var(--akcent-2); transform: rotate(90deg); }
.popup__znacznik {
  align-self: flex-start;
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(79, 174, 141, 0.14);
  color: var(--hover);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.popup__tytul {
  margin: 4px 0 0;
  font-size: clamp(24px, 3.2vw, 30px);
  font-weight: 900;
  line-height: 1.12;
  color: var(--grafit);
  text-wrap: balance;
}
.popup__opis {
  margin: 0 0 8px;
  color: var(--tekst-cichy);
  font-size: 16px;
  line-height: 1.55;
}
.popup__opis strong { color: var(--ciemny); }
.popup__tel { width: 100%; height: 60px; font-size: 17px; }
.popup__tel b { font-weight: 900; letter-spacing: 0.02em; }
.popup__formularz { width: 100%; }
.popup__nie-teraz {
  align-self: center;
  margin-top: 2px;
  padding: 8px 12px;
  border: 0;
  background: none;
  color: var(--tekst-cichy);
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.popup__nie-teraz:hover,
.popup__nie-teraz:focus-visible { color: var(--ciemny); }

@media (max-width: 640px) {
  .popup__panel { grid-template-columns: 1fr; }
  .popup__foto { height: 170px; min-height: 0; }
  .popup__foto img { object-position: center 55%; }
  .popup__tresc { padding: 26px 22px 20px; }
  .popup__zamknij { top: 12px; right: 12px; background: rgba(255, 255, 255, 0.92); }
}
@media (prefers-reduced-motion: reduce) {
  .popup { transform: none; }
}