/* ============================================================
   SIELANA — strona główna v3 (projekt grafika, marketplace-www-p04)
   Kolory spróbkowane z kompozytu PSD (nie z JPG), więc są dokładne,
   nie przybliżone. Typografia wg fonts.rtf z paczki grafika:
   Rubik Dirt (nagłówki-stemple), Bricolage Grotesque (H1/H2),
   Rubik (treść i UI).
   ============================================================ */

:root {
  /* --- akcenty ---------------------------------------------------------- */
  --v3-mint:      #63ebd1;   /* miętowy akcent: logo, nagłówki, zakładka */
  --v3-mint-btn:  #63ebd1;   /* miętowa pigułka CTA */
  --v3-mint-dim:  rgba(99, 235, 209, 0.58);  /* wygaszona fraza ghost */
  --v3-mint-soft: rgba(99, 235, 209, 0.16);
  --v3-orange:    #ff6000;   /* Szukaj, CTA, chip rabatu */
  --v3-orange-2:  #d95000;

  /* --- tła -------------------------------------------------------------- */
  --v3-deep:      #020c30;   /* granat hero u góry */
  --v3-deep-2:    #00100d;   /* najgłębsza zieleń (nav solid) */
  --v3-teal:      #135648;
  --v3-paper:     #ffffff;   /* tło sekcji po podarciu */
  --v3-paper-2:   #f6f6f6;   /* jaśniejsza tafla sekcji */
  --v3-paper-3:   #f5f5f5;   /* „Jak to działa" */
  --v3-card:      #ffffff;
  --v3-tafla:     #f1f1f1;   /* pasek zakładek */
  --v3-dark:      #1a1a11;   /* pas liczb + społeczność */
  --v3-form:      #dce8e5;   /* tło formularza kontaktowego */

  /* --- tekst ------------------------------------------------------------ */
  --v3-ink:       #00100d;
  --v3-ink-2:     #3d4f4a;
  --v3-line:      rgba(0, 16, 13, 0.12);
  --v3-line-2:    #e0e0e0;

  /* --- kształt ----------------------------------------------------------
     Promienie zmierzone w kompozycie p04 (dopasowanie okręgu do profilu
     narożnika). Projekt trzyma się jednej miary 8-9 px dla prostokątów
     (przyciski 8,3; zdjęcie karty 9,1) i osobno traktuje plakietki:
     biała kategoria to prostokąt 6 px, miętowa i pomarańczowa to pełne
     pigułki. Aktywna zakładka ma 14 px. */
  --v3-radius:    14px;
  --v3-radius-sm: 9px;
  --v3-rog:       clamp(6px, 0.47vw, 9px);    /* prostokąty: przyciski, karty, kafle */
  --v3-rog-mala:  clamp(4px, 0.31vw, 6px);    /* biała plakietka kategorii */
  --v3-rog-tab:   clamp(9px, 0.73vw, 14px);   /* aktywna zakładka */
  --v3-shadow:    0 10px 34px rgba(12, 53, 45, 0.14);
  --v3-shadow-2:  0 18px 44px rgba(0, 16, 13, 0.10);

  /* --- typografia ------------------------------------------------------- */
  --v3-font-stempel: "Rubik Dirt", "Bricolage Grotesque", system-ui, sans-serif;
  --v3-font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --v3-font-ui:      "Rubik", system-ui, -apple-system, sans-serif;

  /* Ścieżka assetów grafika ustawiana raz, żeby url() były krótkie. */
  --v3-img: "../img/v3";
}

/* Strony w nowym języku wizualnym jadą na Rubiku — to font UI z paczki
   grafika. Reszta serwisu zostaje na dotychczasowym zestawie do czasu migracji. */
body.v3-strona,
body.v3-strona input,
body.v3-strona select,
body.v3-strona textarea,
body.v3-strona button { font-family: var(--v3-font-ui); }

/* Nagłówek-stempel: miętowy Rubik Dirt, w projekcie zawsze nad właściwym H2. */
.v3-eyebrow {
  display: block;
  font-family: var(--v3-font-stempel);
  font-weight: 400;
  font-size: clamp(24px, 1.875vw, 36px);
  line-height: 1.18;
  letter-spacing: 0;
  text-transform: none;
  color: var(--v3-mint);
}
.v3-eyebrow--jasny { color: var(--v3-mint); }

/* H2 sekcji: Bricolage Grotesque, ciasna interlinia jak w projekcie. */
.v3-h2 {
  font-family: var(--v3-font-display);
  font-weight: 700;
  font-size: clamp(27px, 2.39vw, 46px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--v3-ink);
}

/* Wysokość paska i skala typografii sprzężone z szerokością okna —
   wartości bazowe zmierzone na mockupie 1920px (pasek ~90px, tekst 14px). */
body.v3-strona { --nav-h: clamp(64px, 4.7vw, 90px); }

/* ============================================================
   NAWIGACJA v3 (projekt grafika)
   ============================================================ */
.v3-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0 clamp(0.7rem, 1vw, 1.2rem) 0 clamp(0.5rem, 0.6vw, 0.8rem);
  height: clamp(64px, 4.7vw, 90px);
  color: #fff;
  transition: background 0.35s, box-shadow 0.35s;
}
.v3-nav.is-solid {
  background: var(--v3-deep-2);
  box-shadow: 0 8px 30px rgba(0, 16, 13, 0.4);
}

.v3-nav__logo { display: flex; align-items: flex-start; margin-right: auto; align-self: flex-start; margin-top: 1.25vw; }
.v3-nav__logo-img { height: clamp(52px, 4.6vw, 88px); width: auto; }

.v3-nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 1.6vw, 1.9rem);
}
.v3-nav__item { position: relative; display: flex; align-items: center; }
.v3-nav__link {
  font-size: clamp(12px, 0.73vw, 14px);
  font-weight: 400;
  color: #fff;
  white-space: nowrap;
  padding-block: 0.4rem;
}
.v3-nav__link b { font-weight: 700; }
.v3-nav__link:hover { color: var(--v3-mint); }
.v3-nav__link--info { font-weight: 400; }

/* Chevron POD etykietą jak w projekcie — pozycjonowany absolutnie, żeby
   pozycje bez rozwijki (Rower) stały w jednej linii z resztą. */
.v3-nav__chevron {
  position: absolute;
  left: 50%;
  top: calc(50% + 0.75em);
  width: 14px;
  height: 6px;
  background: url(../img/v3/strzalka-1.png) center / contain no-repeat;
  transform: translateX(-50%);
  transition: transform 0.25s;
}
.v3-nav__item--drop:hover .v3-nav__chevron,
.v3-nav__item--drop:focus-within .v3-nav__chevron { transform: translateX(-50%) rotate(180deg); }

.v3-nav__drop {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 196px;
  background: #fff;
  color: var(--v3-ink);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 16, 13, 0.28);
  padding: 0.9rem 0.6rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s, transform 0.22s, visibility 0.22s;
}
.v3-nav__item--drop:hover .v3-nav__drop,
.v3-nav__item--drop:focus-within .v3-nav__drop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* mostek nad kartą, żeby menu nie znikało w drodze kursora */
.v3-nav__drop::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.v3-nav__drop-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.9rem;
  border-radius: 8px;
  font-size: 0.92rem;
  white-space: nowrap;
}
.v3-nav__drop-link:hover { background: #f0f0f0; }
.v3-nav__drop-strzalka {
  width: 5px;
  height: 11px;
  flex: 0 0 5px;
  background: url(../img/v3/strzalka-2.png) center / contain no-repeat;
}
.v3-nav__drop-link--wszystkie {
  font-weight: 700;
  margin-top: 0.5rem;
  border-top: 1px solid var(--v3-line);
  padding-top: 0.85rem;
  border-radius: 0 0 8px 8px;
}

.v3-nav__sep { width: 2px; height: 17px; background: var(--v3-mint); opacity: 0.9; }

.v3-nav__right { display: flex; align-items: center; gap: 0.8rem; margin-left: 0.8rem; }
.v3-nav .nav-kontakt { display: flex; gap: 0.3rem; }
.v3-nav .nav-kontakt__link {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--v3-mint);
  border-radius: 50%;
}
.v3-nav .nav-kontakt__link:hover { background: var(--v3-mint-soft); }
.v3-nav .nav-kontakt__link img { width: 20px; height: 20px; display: block; }

.v3-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-weight: 700;
  font-size: clamp(12px, 0.73vw, 14px);
  color: var(--v3-ink);
  background: var(--v3-mint-btn);
  padding: 0.95em 2.75em;
  border-radius: var(--v3-rog);
  white-space: nowrap;
  transition: background 0.25s, transform 0.3s var(--ease-out);
}
.v3-strzalka {
  width: 14px; height: 12px;
  flex: 0 0 14px;
  background: currentColor;
  -webkit-mask: url(../img/v3/strzalka-5.png) center / contain no-repeat;
          mask: url(../img/v3/strzalka-5.png) center / contain no-repeat;
  transition: transform 0.3s var(--ease-out);
}
.v3-nav__cta { color: var(--v3-ink); }
.v3-nav__cta:hover .v3-strzalka { transform: translateX(3px); }
.v3-nav__cta:hover,
.v3-nav__cta:active { background: #fff; transform: translateY(-1px); }

.v3-nav__burger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.v3-nav__burger span { width: 24px; height: 2px; background: #fff; display: block; }

/* ---- szyna social przy lewej krawędzi (pozycja z mockupu: x=60, y=522 @1920) ---- */
/* Ikony społecznościowe jadą teraz razem ze stroną („instagram i tiktok
   mogą być zafixowane na scrollu"). Trzymają się osi pionu po lewej. */
.v3-social-rail {
  position: fixed;
  left: calc(3.7vw - 10px);
  top: 27.2vw;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  color: var(--v3-mint);
}
.v3-social-rail a { display: block; transition: transform 0.25s var(--ease-out), opacity 0.25s; }
.v3-social-rail a:hover { transform: translateY(-2px); }
.v3-social-rail a[aria-disabled] { cursor: default; }
.v3-social-rail img { width: 30px; height: 30px; display: block; }
/* Pion rysuje .v3::before jednym ciągiem przez całą stronę — rail ma tylko ikony. */
.v3-social-rail__linia { display: none; }

/* Siatka z paczki grafika (tlo-paralax-1/2) biegnie przez wszystkie jasne
   sekcje. Trzymamy ją jako jedną warstwę na całej stronie, żeby kratka nie
   przeskakiwała na styku sekcji; ciemne sekcje i zdjęcia mają własne,
   nieprzezroczyste tła i wyższy z-index, więc ją zasłaniają. */
.v3__siatka {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url(../img/v3/tlo-paralax-1.webp);
  background-repeat: repeat;
  background-size: 94.43vw auto;      /* 1813/1920 artboardu */
  background-position: 0 0;
}
/* Warstwa z miętowymi znacznikami (x, trójkąt) idzie wyraźnie wolniej niż
   strona. Grafik dawał do wyboru fix albo paralaksę; paralaksa lepiej pasuje
   do reszty sekcji, a wcześniejsze 0,045 było praktycznie niewidoczne. */
.v3__siatka--2 {
  background-image: url(../img/v3/tlo-paralax-2.webp);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .v3__siatka--2 { transform: none !important; }
}

.v3 {
  position: relative;
  background: var(--v3-paper);
  color: var(--v3-ink);
  /* Przycinamy OBIE osie. Sama `overflow-x` zostawia `overflow-y: visible`,
     więc warstwa paralaksy z miętowymi znacznikami, przesunięta przy dolnej
     krawędzi o kilkaset pikseli, dokładała stronie pustego pasa poniżej stopki.
     `clip`, nie `hidden`: `hidden` robi z main kontener przewijania i psuje
     pozycjonowanie sticky w iOS Safari. */
  overflow: clip;
}
/* `overflow: clip` wszedł do Safari dopiero w 16. Na starszym iOS deklaracja
   jest nieważna, więc NIC nie przycinało wycinanki postaci i strona dawała się
   przesuwać w bok — to jest zgłoszone „strona rusza się na boki". */
@supports not (overflow: clip) {
  .v3 { overflow: hidden; }
}

/* Cienki pion po lewej biegnący przez całą stronę (mockup: x=71 @1920,
   jasna mięta #e0f9f3). W hero to ta sama kolumna, w której siedzą ikony
   społecznościowe.

   Kreska NIE zaczyna się u góry strony, tylko pod logo: w kompozycie p04
   pierwszy jej piksel wypada na y=106 @1920 (czyli 5,52vw), tuż pod falą
   zamykającą znak. Dlatego `top` jest odsunięte, a przerwa na ikony
   społecznościowe przesuwa się razem z nim o tę samą wartość. */
.v3 {
  --v3-pion-start: 5.52vw;
  /* Przerwa na ikony społecznościowe. Ikony są PRZYPIĘTE DO OKNA
     (`position: fixed`), a kreska biegnie przez całą stronę, więc przerwa
     musi jechać razem z nimi — inaczej dziura zostaje w jednym miejscu
     dokumentu i przy przewijaniu wygląda jak urwana kreska, a ikony i tak
     wchodzą na pion niżej. Wartości poniżej są awaryjne (dla stanu bez
     JavaScriptu i pierwszej klatki); dalej liczy je `animacje-v3.js`
     i podaje w pikselach, licząc od góry strony. */
  --v3-pion-ikony: 27.2vw;   /* odległość góry ikon od góry strony */
  --v3-pion-wys:   4.06vw;   /* wysokość bloku ikon */
  /* Oddech nad i pod ikonami zmierzony w kompozycie: ikony stoją na
     y 522-600, a kreska urywa się na 490 i wraca na 632, czyli po 32 px
     z każdej strony. */
  --v3-pion-luz:   1.67vw;
}
.v3::before {
  content: "";
  position: absolute;
  left: 3.7vw;
  top: var(--v3-pion-start);
  bottom: 0;
  width: 1px;
  /* Stopy gradientu liczą się od GÓRY KRESKI, a nie od góry strony, stąd
     odjęcie `--v3-pion-start`. */
  --v3-przerwa-od: calc(var(--v3-pion-ikony) - var(--v3-pion-start) - var(--v3-pion-luz));
  --v3-przerwa-do: calc(var(--v3-przerwa-od) + var(--v3-pion-wys) + var(--v3-pion-luz) * 2);
  background: linear-gradient(
    to bottom,
    rgba(93, 224, 198, 0.42) 0 var(--v3-przerwa-od),
    transparent var(--v3-przerwa-od) var(--v3-przerwa-do),
    rgba(93, 224, 198, 0.42) var(--v3-przerwa-do) 100%
  );
  pointer-events: none;
  /* Nad hero (hero ma własny kontekst stackingu z z-index 2), żeby pion
     nie urywał się na zielonej sekcji. */
  z-index: 7;
}

/* Kolumna treści zmierzona w projekcie p04: karty ofert zajmują x 325-1594
   przy artboardzie 1920, czyli 1269 px = 66.1vw, wyśrodkowane. Wszystko
   (pasek zakładek, karty, kolaż, formularz) trzyma się tej kolumny. */
.v3 .wrap {
  max-width: min(1269px, 66.1vw);
  padding-inline: 0;
}
/* Poniżej 1100px wracamy do zwykłego gutteru, żeby treść nie kleiła się do krawędzi. */
@media (max-width: 1100px) {
  .v3 .wrap { max-width: 100%; padding-inline: var(--gutter); }
}

/* ---- prymitywy v3 (wg projektu p04) ---- */

/* Przyciski w projekcie to prostokąty o promieniu 12px, nie pigułki.
   Etykieta na Bricolage Bold, strzałka to plik z paczki grafika. */
.v3-btn {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.9rem, 1.3vw, 1.6rem);
  font-family: var(--v3-font-display);
  font-weight: 700;
  font-size: clamp(13px, 0.89vw, 17px);
  line-height: 1;
  padding: clamp(0.85rem, 0.99vw, 1.19rem) clamp(1.1rem, 1.3vw, 1.56rem);
  border-radius: var(--v3-rog);
  border: 0;
  transition: transform 0.3s var(--ease-out), background 0.25s, color 0.25s, filter 0.25s;
}
.v3-btn::after {
  content: "";
  width: 15px; height: 15px;
  flex: 0 0 15px;
  background: currentColor;
  -webkit-mask: url(../img/v3/strzalka-5.png) center / contain no-repeat;
          mask: url(../img/v3/strzalka-5.png) center / contain no-repeat;
  transition: transform 0.3s var(--ease-out);
}
.v3-btn { cursor: pointer; }
.v3-btn:hover { transform: translateY(-2px); }
.v3-btn:hover::after { transform: translateX(4px); }
.v3-btn--bez-strzalki::after { display: none; }

/* Wspólna zasada z uwag grafika: każdy przycisk na hoverze i na active
   robi się w pełni biały. Strzałka i etykieta schodzą na kolor tuszu, żeby
   zostało co czytać. */
.v3-btn:hover,
.v3-btn:active,
.v3-btn:focus-visible { background: #fff; color: var(--v3-ink); box-shadow: 0 8px 24px rgba(0, 16, 13, 0.14); }

.v3-btn--orange { background: var(--v3-orange); color: #fff; }
.v3-btn--orange:hover,
.v3-btn--orange:active { color: var(--v3-orange); }
.v3-btn--mint  { background: var(--v3-mint); color: var(--v3-ink); }
.v3-btn--dark  { background: var(--v3-ink); color: #fff; }
.v3-btn--ghost { box-shadow: inset 0 0 0 2px var(--v3-ink); color: var(--v3-ink); }
.v3-btn--ghost:hover { background: var(--v3-ink); color: #fff; }
.v3-btn--ghost-jasny { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.85); color: #fff; }
.v3-btn--ghost-jasny:hover { background: #fff; color: var(--v3-teal); }

/* ============================================================
   HERO — proporcje i rozmieszczenie wg mockupu 1920px
   ============================================================ */
.v3-hero {
  position: relative;
  /* Kolejność warstw na styku hero i ofert (tak jak w projekcie):
     zdjęcie < podarcie < wycinanka postaci < treść sekcji ofert.
     Wycinanka ma przechodzić NAD bielą, ale POD paskiem zakładek —
     dlatego hero jest niżej niż sekcja ofert, a nie wyżej. */
  z-index: 1;
  /* Wysokość sprzężona z szerokością okna (artboard 1920px): biel po podarciu
     zaczyna się na y=1128, czyli 58.75vw. Górny padding ustawia frazę ghost
     na y=384 (20vw), tak jak w projekcie. */
  min-height: max(58.75vw, 620px);
  display: flex;
  align-items: flex-start;
  padding-block: 19.7vw 8.28vw;
  color: #fff;
  isolation: isolate;
}
/* ---- warstwa teł: crossfade + powolne powiększanie (brief grafika) ----
   Grafik prosił o „płynne przejścia", więc crossfade trwa 1,1 s przy slajdzie
   4,5 s: przez blisko jedną czwartą czasu widać oba kadry naraz i zmiana nie ma
   momentu przeskoku. */
.v3-hero__media { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.v3-hero__tlo {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.v3-hero__tlo.is-active { opacity: 1; }
.v3-hero__tlo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
}
/* Zoom jest dłuższy niż slajd, więc kadr rośnie równym tempem także w trakcie
   przenikania i nie zatrzymuje się tuż przed zmianą. */
.v3-hero__tlo.is-active img { animation: v3Zoom 6.5s linear forwards; }
@keyframes v3Zoom { from { transform: scale(1.03); } to { transform: scale(1.15); } }

/* Mapa świata z paczki grafika (krycie 39% wprost z pliku, klasa .st0).
   Ramka przycina planszę do prawej części nagłówka, tak jak w projekcie,
   gdzie mapa wychodzi poza prawą krawędź strony. */
.v3-hero__mapa {
  position: absolute;
  left: 75.47vw;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  /* Lewa krawędź ramki wygasza mapę zamiast ciąć ją pionową linią.
     W projekcie problemu nie ma, bo mapa stoi nieruchomo i jej lewy brzeg
     wypada na pustym oceanie. U nas plansza dojeżdża do kraju z aktywnej
     frazy i wtedy w kadr wchodzą kontury, które bez tego urywałyby się
     w pół linii.

     Szerokość wygaszenia ustawia skrypt i jest ta sama na każdym slajdzie
     (22% ramki), żeby mapa nigdzie nie odcinała się od nagłówka ostrą
     krawędzią. Wartość domyślna poniżej działa, zanim skrypt się wykona. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--mapa-zaslona, 5.4vw));
          mask-image: linear-gradient(to right, transparent 0, #000 var(--mapa-zaslona, 5.4vw));
}
/* Plansza: wymiary i osadzenie wyliczone z kompozytu p04 po kształcie
   Brazylii (mapa 1130 px przy artboardzie 1920), a następnie dostrojone
   korelacją całego konturu z kompozytem: w poziomie zgadzało się co do
   piksela, w pionie mapa siedziała 5 px za nisko, stąd -54 px zamiast -49. */
.v3-hero__mapa-plansza {
  position: absolute;
  left: 0;
  top: -2.81vw;
  width: 58.85vw;
  transform: translate3d(var(--mapa-x, 0px), 0, 0);
  transition: transform 2.2s cubic-bezier(0.33, 0, 0.15, 1);
  will-change: transform;
}
.v3-hero__mapa-img { display: block; width: 100%; height: auto; }

/* Kraje-cele leżą w osobnym SVG o tym samym viewBox co mapa świata, więc
   pokrywają się z nią bez ręcznego pozycjonowania przy każdej szerokości. */
.v3-hero__kraje {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}
/* Brazylia z projektu ma 123 px szerokości i sama się broni. Austria czy
   Portugalia to na tej samej mapie kilkanaście pikseli, więc sam wypełniony
   kształt czytałby się jak pyłek. Miętowa poświata i obrys dokładają im
   widoczności, nie zmieniając zasady z projektu. */
.v3-hero__kraj {
  fill: var(--v3-mint);
  stroke: var(--v3-mint);
  stroke-width: 1.6;
  stroke-linejoin: round;
  paint-order: stroke fill;
  opacity: 0;
  transition: opacity 1.2s ease;
}
/* Poświata delikatniejsza niż na pierwszym podejściu: przy Brazylii, która
   ma w projekcie 123 px, mocny blask rozmywał jej krawędź i odchodził od
   kompozytu. Tyle wystarczy, żeby Austria i Portugalia były czytelne. */
.v3-hero__kraj.is-active {
  opacity: 1;
  filter: drop-shadow(0 0 5px rgba(99, 235, 209, 0.5));
}

/* Wycinanka sportowca — proporcje z mockupu: ~75% wysokości hero,
   dosunięta do prawej, nachodzi na podarcie i następną sekcję. */
/* ---- wyseparowane postacie: aktywna wjeżdża z prawej ----
   Wysokość i osadzenie każdej postaci przychodzą ze zmiennych ustawianych
   przy elemencie (kadr każdego zdjęcia jest inny). Wartości kitesurfera są
   zmierzone na mockupie: bbox x 1260-1919, y 614-1447 @1920, a pasek zakładek
   przecina udo 584px poniżej górnej krawędzi wycinanki. */
.v3-hero__cutout {
  position: absolute;
  right: var(--postac-prawo, 0vw);
  bottom: var(--postac-dol, -8vw);
  height: var(--postac-wys, 40vw);
  width: auto;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transform: translateX(9%);
  /* Wjazd postaci trwa tyle co przenikanie tła, żeby jedno nie wyprzedzało
     drugiego. Krzywa bez odbicia, samo wyhamowanie. */
  transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1),
              transform 2s cubic-bezier(0.16, 1, 0.3, 1);
}
.v3-hero__cutout.is-active { opacity: 1; transform: translateX(0); }

/* Pinezka odpadła: każdy slajd ma teraz własny wypełniony kraj, tak jak
   Brazylia w projekcie, więc zastępcza kropka nie jest już potrzebna.

   Przy „ogranicz ruch" slajdy nadal się zmieniają (to treść, nie ozdoba),
   ale znikają zoom, wjazd postaci i dojazd mapy. */
@media (prefers-reduced-motion: reduce) {
  .v3-hero__tlo.is-active img { animation: none; transform: scale(1.03); }
  .v3-hero__cutout { transition: opacity 0.3s ease; transform: none; }
  .v3-hero__cutout.is-active { transform: none; }
  .v3-hero__mapa-plansza { transition: none; }
}

/* Treść hero (nagłówki, wyszukiwarka) leży NAD wycinanką — w projekcie
   przycisk Szukaj jest widoczny w całości. */
.v3-hero__inner { width: 100%; position: relative; z-index: 7; }

/* ---- ghost: jedna fraza na slajd ----
   Frazy nie stoją obok siebie: przy zmianie kadru poprzednia schodzi w dół
   i gaśnie, a na jej miejsce wjeżdża następna. Stąd `min-height` na akapicie
   — bez niego wiersz zapadałby się na czas podmiany. */
.v3-hero__ghost {
  display: flex;
  flex-wrap: wrap;
  column-gap: 2.2rem;
  font-family: var(--v3-font-stempel);
  font-size: clamp(19px, 1.83vw, 35px); /* 35px @1920 (pomiar z mockupu) */
  font-weight: 800;
  line-height: 1.15;
  min-height: 1.2em;
  margin-bottom: 0.2rem;
}
.v3-hero__ghost-aktywna { color: var(--v3-mint); }
/* Fraza schodzi i wraca w tym samym rytmie co przenikanie kadru: 0,6 s
   z wygładzeniem, zamiast 0,22 s liniowo. Grafik pisał wprost, że przejścia
   są „zbyt gwałtowne". Czas MUSI się zgadzać ze stałą ZEJSCIE w `home-v3.js`,
   bo skrypt podmienia tekst dopiero po zejściu starej frazy. */
.v3-hero__ghost span {
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.v3-hero__ghost span.is-out { opacity: 0; transform: translateY(16px); }

.v3-hero__title {
  font-family: var(--v3-font-display);
  font-weight: 800;
  font-size: clamp(34px, 3.05vw, 59px); /* szerokość H1 = 788px @1920 (pomiar) */
  letter-spacing: 0;
  line-height: 1.08;
  margin-bottom: clamp(1.6rem, 2.4vw, 2.4rem);
  max-width: 17em;
}

/* ---- wyszukiwarka: półprzezroczysty pas + mrożone pigułki pól ---- */
/* Cały pasek to jedna ciemna, półprzezroczysta obwódka z pełnym zaokrągleniem,
   a pigułki leżą w środku — sprawdzone w powiększeniu lewego końca „Dokąd?"
   i prawego końca przycisku „Szukaj" w projekcie. */
.v3-szukaj {
  display: flex;
  align-items: stretch;
  gap: clamp(0.35rem, 0.47vw, 0.56rem);
  background: rgba(24, 42, 56, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 100px;
  padding: clamp(5px, 0.42vw, 8px);
}
.v3-szukaj__pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7em;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  /* Pigułki to zaokrąglone PROSTOKĄTY o promieniu 9 px, nie stadiony.
     Zmierzone w kompozycie p04: profil lewego narożnika białej pigułki
     „Wybierz aktywność" (x 640-939, y 536-596 @1920) schodzi do zera po
     9 px, tak samo pigułka „Kiedy?" i lewy koniec przycisku „Szukaj".
     Pełnym stadionem są wyłącznie SKRAJNE końce paska — patrz niżej. */
  border-radius: var(--v3-rog);
  padding: 0 clamp(0.85rem, 1vw, 1.15rem);
  min-height: clamp(48px, 3.34vw, 64px);
  color: var(--v3-ink);
  flex: 1 1 0;
  cursor: pointer;
  font-size: clamp(13px, 0.81vw, 15.5px); /* ~15px @1920 (pomiar) */
  transition: background 0.25s;
}
/* Pigułki nie reagowały na kursor, choć są klikalne. Hover i stan otwarty
   rozjaśniają je do pełnej bieli, tak jak przyciski. */
.v3-szukaj__pill:hover,
.v3-szukaj__pill:focus-within { background: #fff; }
/* Skrajne końce paska domykają jego własne zaokrąglenie: lewy koniec
   pierwszej pigułki i prawy koniec „Szukaj" są pełnymi stadionami
   (profil narożnika dochodzi do zera dopiero w połowie wysokości,
   czyli po 30 px przy pigułce 61 px). Wnętrze paska zostaje na 9 px. */
.v3-szukaj__pill:first-child { border-radius: 100px var(--v3-rog) var(--v3-rog) 100px; }
.v3-szukaj__pill--kiedy { flex: 1.5 1 0; }
/* Pigułki z rozwijką są układem odniesienia dla swojej białej karty. */
.v3-szukaj__pill--kierunek,
.v3-szukaj__pill--aktywnosc,
.v3-szukaj__pill--kiedy { position: relative; }
.v3-szukaj__ikona {
  flex: none;
  width: clamp(20px, 1.56vw, 30px);
  height: clamp(20px, 1.56vw, 30px);
  object-fit: contain;
}
.v3-szukaj__tekst { flex: 1; min-width: 0; }

.v3-szukaj__chevron {
  flex: none;
  width: 14px;
  height: 8px;
  background: url(../img/v3/strzalka-4.png) center / contain no-repeat;
}

/* Pigułka terminu trzyma napis „Kiedy?" i daty w jednym wierszu, jak w projekcie. */
.v3-szukaj__drop--kiedy { gap: 0.9rem; }
.v3-szukaj__kiedy-label { font-weight: 700; white-space: nowrap; }
.v3-szukaj__kiedy-daty { font-weight: 500; white-space: nowrap; }
.v3-szukaj__kiedy-daty:empty { display: none; }

/* Cała pigułka otwiera rozwijkę, nie sam napis: przycisk dostaje warstwę
   rozciągniętą na całą pigułkę (ikona i chevron są pod nią, ale to grafiki
   dekoracyjne, więc nic nie tracimy). Na telefonie dotknięcie krawędzi
   pigułki nie trafiało wcześniej w nic. */
.v3-szukaj__drop {
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
  font-size: inherit;
  padding: 0;
  min-height: clamp(48px, 3.34vw, 64px);
  display: flex;
  align-items: center;
  cursor: pointer;
}
/* Otwieranie z całej pigułki obsługuje skrypt (nasłuch na pigułce, nie na
   samym przycisku). Nakładka w CSS nie wystarczała: na telefonie i tak trzeba
   było trafić w tekst, a ikona i chevron zjadały dotknięcia. */

/* rozwijana lista aktywności: biała karta z nagłówkami grup */
.v3-szukaj__lista {
  position: absolute;
  /* Karta stoi 6 px pod pigułką (kompozyt: spód pigułki y=596, góra karty
     y=602), a nie 14 px jak wcześniej. */
  top: calc(100% + clamp(4px, 0.31vw, 6px));
  /* Dokładnie szerokość pigułki, jak w projekcie (pigułka i rozwijka
     mają na mockupie identyczne 300px: x 640-939 @1920). */
  left: 0;
  right: 0;
  background: #fff;
  border-radius: clamp(7px, 0.52vw, 10px);   /* kompozyt: 10 px @1920 */
  box-shadow: 0 24px 60px rgba(0, 16, 13, 0.3);
  padding: 1.1rem 0.7rem;
  z-index: 40;
  max-height: 350px;
  overflow-y: auto;
  overflow-x: hidden;
  /* Bez `contain` przewijanie listy przechodziło na stronę pod nią: po dojściu
     do końca listy strona jechała dalej i nie dawało się wrócić na górę.
     `touch` przywraca w iOS bezwładność wewnątrz listy. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  cursor: default;
}
.v3-szukaj__grupa + .v3-szukaj__grupa { margin-top: 0.75rem; }
.v3-szukaj__grupa-tytul {
  display: block;
  font-weight: 700;
  font-size: clamp(13px, 0.78vw, 15px);   /* mockup: glify 15px @1920 */
  color: var(--v3-ink);
  padding: 0 0.85rem 0.35rem;
}
.v3-szukaj__opcja {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  text-align: left;
  padding: 0.27rem 0.85rem;               /* rozstaw wierszy 34px jak w mockupie */
  border-radius: 9px;
  font-size: clamp(12px, 0.73vw, 14px);   /* mockup: glify 13px @1920 */
  color: #2b3230;
}
.v3-szukaj__opcja:hover { background: #f0f0f0; }
.v3-szukaj__opcja.is-active { background: #f0f0f0; font-weight: 700; }

/* ---- kalendarz terminu ----
   Ta sama biała karta co lista aktywności, tylko szersza od pigułki i
   przyklejona prawą krawędzią, bo „Kiedy?" stoi blisko końca paska. */
.v3-szukaj__lista--kalendarz {
  left: auto;
  right: 0;
  width: 310px;
  max-width: min(310px, calc(100vw - 2 * var(--gutter)));
  max-height: none;
  overflow: visible;
  padding: 0.9rem;
}
.v3-kal__pasek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.v3-kal__miesiac {
  font-weight: 700;
  font-size: clamp(13px, 0.78vw, 15px);
  color: var(--v3-ink);
}
.v3-kal__nawigacja {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  color: var(--v3-ink);
  background: none;
  border: 0;
  cursor: pointer;
}
.v3-kal__nawigacja:hover { background: #f0f0f0; }
.v3-kal__dni-tygodnia,
.v3-kal__siatka {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.v3-kal__dni-tygodnia {
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--v3-ink-2);
  text-align: center;
}
.v3-kal__dzien {
  aspect-ratio: 1;
  border: 0;
  background: none;
  border-radius: 9px;
  font: inherit;
  font-size: 13px;
  color: #2b3230;
  cursor: pointer;
}
.v3-kal__dzien:hover:not(:disabled) { background: #f0f0f0; }
.v3-kal__dzien:disabled { color: #c3ccca; cursor: default; }
.v3-kal__dzien.is-w-zakresie { background: #e6faf5; border-radius: 0; }
.v3-kal__dzien.is-koniec { background: var(--v3-mint); color: var(--v3-ink); font-weight: 700; }
.v3-kal__stopka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.6rem;
  font-size: 12px;
}
.v3-kal__czysc {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--v3-orange);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.v3-kal__podglad { color: var(--v3-ink-2); }

.v3-szukaj__go {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8em;
  background: var(--v3-orange);
  color: #fff;
  font-weight: 700;
  font-size: clamp(14px, 0.9vw, 17px);
  border-radius: var(--v3-rog);
  padding: 0 clamp(1.4rem, 2.7vw, 3.3rem);
  min-height: clamp(48px, 3.34vw, 64px);
  transition: background 0.25s, transform 0.3s var(--ease-out);
}
.v3-szukaj__go svg { width: 1.15em; height: 1.15em; }
.v3-szukaj__go { cursor: pointer; }
/* Grafik prosił o pełną biel na hoverze i na active. */
.v3-szukaj__go:hover,
.v3-szukaj__go:active,
.v3-szukaj__go:focus-visible { background: #fff; color: var(--v3-orange); transform: translateY(-1px); }

/* ---- zaufanie pod wyszukiwarką: wiersze z separatorami ---- */
.v3-hero__trust {
  margin-top: clamp(2rem, 8vw, 9.6rem);
  max-width: clamp(420px, 32.5vw, 625px);
}
.v3-hero__trust li {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding-block: clamp(1rem, 1.25vw, 1.35rem);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.v3-hero__trust li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.v3-hero__trust strong {
  display: block;
  font-size: clamp(14px, 0.94vw, 18px);
  font-weight: 700;
}
.v3-hero__trust div span { font-size: clamp(12px, 0.78vw, 15px); color: rgba(255, 255, 255, 0.72); }
.v3-hero__trust-ikona {
  flex: none;
  width: clamp(42px, 2.9vw, 56px);
  height: clamp(42px, 2.9vw, 56px);
  border-radius: 50%;
  background: var(--v3-mint);
  display: grid;
  place-items: center;
}
.v3-hero__trust-ikona img { width: 52%; height: 52%; object-fit: contain; }

/* ---- organicznie podarta krawędź ---- */
/* Podarta krawędź — separator-1.png (1920x167) z paczki grafika.
   W projekcie górna krawędź pliku wypada 121 px nad spodem hero,
   a plik wystaje 46 px pod sekcję: stąd bottom -2.4vw. */
.v3-tear {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2.4vw;
  width: 100%;
  height: auto;
  z-index: 5;
  pointer-events: none;
}


/* ============================================================
   OFERTY — „Sprawdź te wyjazdy" (wymiary z mockupu 1920px)
   ============================================================ */
.v3-oferty {
  position: relative;
  z-index: 2;
  padding-block: 0.4vw 1.51vw;
}

/* Drugie logo pod podarciem i druga para ikon społecznościowych zniknęły
   z szablonu: grafik uznał je za zbędne, skoro pasek nawigacji zostaje na
   scrollu, a ikony jadą teraz razem ze stroną (.v3-social-rail na fixie). */

.v3-oferty__tytul {
  font-family: var(--v3-font-stempel);
  font-weight: 400;
  font-size: clamp(24px, 1.875vw, 36px);
  line-height: 1.18;
  color: var(--v3-mint);
  margin-bottom: clamp(0.5rem, 0.83vw, 1rem);
}

/* ---- pasek zakładek: biała listwa z cieniem ---- */
.v3-taby-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  /* Półprzezroczysta SZARA tafla, dokładnie jak w projekcie: nad białym tłem
     daje wartość 241, a przez postać prześwituje z efektywną alfą 0.66.
     Bez rozmycia: pomiar kontrastu na mockupie wyklucza blur (spadek
     kontrastu w całości tłumaczy sama przezroczystość). */
  background: rgba(233, 233, 233, 0.6);
  /* Rozmycie tła: w projekcie narty i kijki pod taflą rozpływają się
     w gładki gradient, nie prześwitują ostro. */
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: clamp(10px, 0.73vw, 14px);
  box-shadow: 0 16px 40px rgba(16, 32, 28, 0.08);
  padding: clamp(3px, 0.26vw, 5px);
  margin-bottom: clamp(0.9rem, 1.25vw, 1.5rem);
  /* Nad hero (z-index 2), więc surfer przechodzi POD paskiem, nie przed nim. */
  position: relative;
  z-index: 3;
}
.v3-taby {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.9rem, 1.6vw, 2rem);
  flex: 1;
  min-width: 0;
}
.v3-tab {
  font-weight: 600;
  font-size: clamp(12px, 0.73vw, 14px);
  color: #23292b;
  padding: 1.18em 0.2em;
  border-radius: var(--v3-rog-tab);
  transition: background 0.25s, color 0.25s;
  white-space: nowrap;
}
.v3-tab:hover { color: var(--v3-teal); }
.v3-tab.is-active {
  background: var(--v3-mint);
  color: var(--v3-ink);
  font-weight: 700;
  padding-inline: 1.55em;
}
.v3-taby__wiecej {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-weight: 600;
  font-size: clamp(12px, 0.73vw, 14px);
  color: #23292b;
  padding: 0.9em 1.3em;
  white-space: nowrap;
}
.v3-taby__wiecej:hover { color: var(--v3-teal); }
.v3-taby__wiecej { padding-block: 1.45em; }
.v3-taby__wiecej svg { width: 1.3em; height: 1.3em; }

.v3-oferty__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 clamp(16px, 1.35vw, 27px);
}
.v3-oferty__empty { color: var(--v3-ink-2); padding-block: 2rem; }

/* ---- karta v3 (1:1 z projektu) ---- */
.v3-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  border-radius: clamp(12px, 0.9vw, 17px);
  padding: clamp(10px, 0.83vw, 16px);
  margin: calc(-1 * clamp(10px, 0.83vw, 16px));
  transition: background 0.3s;
}
/* Hover w projekcie to jasna tafla wysunięta poza obrys karty, pod zdjęciem
   i pod opisem naraz — stąd pseudoelement, a nie tło samej karty.
   Grafik prosił, żeby efekt „zdecydowanie mocniej uwypuklić" i poprawić
   z-index: tafla jest teraz biała z cieniem, karta unosi się o 4 px,
   a cała karta wychodzi nad sąsiadki, żeby cień ich nie podcinał. */
.v3-card::before {
  content: "";
  position: absolute;
  /* Tafla wystaje 14 px poza obrys karty i ma barwę #f5f5f5 — zmierzone
     w kompozycie na trzeciej karcie, tej z zaznaczonym hoverem. */
  inset: -0.73vw;
  border-radius: clamp(10px, 0.73vw, 14px);
  background: #f5f5f5;
  /* Cienia w projekcie nie ma, ale sama tafla na bieli jest ledwo widoczna,
     a grafik prosił, żeby efekt „zdecydowanie mocniej uwypuklić". Miękki cień
     i uniesienie karty załatwiają to, nie ruszając barwy z projektu. */
  box-shadow: 0 16px 40px rgba(0, 16, 13, 0.14);
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
  z-index: -1;
}
.v3-card {
  transition: background 0.3s, transform 0.35s var(--ease-out);
}
.v3-card:hover,
.v3-card:focus-within { z-index: 4; transform: translateY(-4px); }
.v3-card:hover::before,
.v3-card:focus-within::before { opacity: 1; transform: scale(1); }
/* Siatka kart musi mieć własny kontekst, inaczej podniesiona karta chowa się
   pod sekcją poniżej. */
.v3-oferty__grid { position: relative; z-index: 1; }
.v3-card.is-hidden { display: none; }

.v3-card__media {
  position: relative;
  display: block;
  aspect-ratio: 405 / 410;
  /* Zmierzone w projekcie: róg zdjęcia karty ma ~4 px, nie kilkanaście.
     Punkt „pilnować zaobleń kafelek" z opisu animacji dotyczył właśnie tego:
     dopasowanie okręgu do narożnika w kompozycie daje 9,1 px, nie 4. */
  border-radius: var(--v3-rog);
  overflow: hidden;
  background: var(--v3-deep);
}
.v3-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}
.v3-card:hover .v3-card__media img { transform: scale(1.04); }
/* gradient pod ceną */
.v3-card__media::after {
  content: "";
  position: absolute;
  inset: 55% 0 0 0;
  background: linear-gradient(180deg, transparent, rgba(0, 8, 6, 0.62));
  pointer-events: none;
}

.v3-chip {
  position: absolute;
  top: clamp(0.65rem, 0.73vw, 0.9rem);
  z-index: 2;
  font-size: clamp(11px, 0.68vw, 13px);
  font-weight: 600;
  padding: 0.55em 1.1em;
  /* Plakietki NIE mają wspólnego promienia: biała kategoria to prostokąt
     6 px, a miętowa „wolne miejsca" i pomarańczowy rabat to pełne pigułki.
     Zmierzone osobno w kompozycie (profile narożników 6,0 / 13,9 / 17,9
     przy wysokościach 33 / 33 / 40 px). */
  border-radius: var(--v3-rog-mala);
}
.v3-chip--rodzina { left: clamp(0.65rem, 0.73vw, 0.9rem); background: #fff; color: var(--v3-ink); }
.v3-chip--miejsca { right: clamp(0.65rem, 0.73vw, 0.9rem); background: var(--v3-mint); color: var(--v3-ink); border-radius: 100px; }
.v3-chip--rabat {
  right: clamp(0.65rem, 0.73vw, 0.9rem);
  background: var(--v3-orange);
  color: #fff;
  font-family: var(--v3-font-display);
  font-weight: 800;
  font-size: clamp(15px, 1.15vw, 22px);
  padding: 0.28em 0.62em;
  border-radius: 100px;
}

/* dół zdjęcia: cena po lewej, trudność po prawej */
.v3-card__dol {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.8rem, 0.95vw, 1.2rem);
  color: #fff;
}
.v3-card__cena { display: flex; flex-direction: column; line-height: 1.15; }
.v3-card__od {
  font-size: clamp(10px, 0.63vw, 12px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
s.v3-card__od { text-decoration: line-through; }
.v3-card__cena strong {
  font-family: var(--v3-font-display);
  font-weight: 800;
  font-size: clamp(20px, 1.61vw, 31px);
  letter-spacing: 0.01em;
}
.v3-card__trudnosc { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; text-align: right; }
.v3-card__trudnosc span {
  font-size: clamp(9px, 0.57vw, 11px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.85);
}
.v3-card__trudnosc strong {
  font-size: clamp(16px, 1.25vw, 24px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.v3-card__body { padding: clamp(0.7rem, 0.8vw, 1rem) 0.15rem 0; }
/* Treść karty: wcięcie 13 px od krawędzi zdjęcia, 36 px odstępu nad metryczką
   i 28 px pod opisem — razem strefa tekstu ma 189 px jak w projekcie. */
.v3-card__body { padding: 1.875vw 0.68vw 1.46vw; }
.v3-card__meta {
  display: flex;
  gap: 0.6em;
  font-size: clamp(11px, 0.68vw, 13px);
  margin-bottom: 0.3em;
}
.v3-card__meta b { color: #17a08a; font-weight: 700; }
.v3-card__meta span { color: #7c8583; }
.v3-card__title {
  font-family: var(--v3-font-display);
  font-weight: 700;
  font-size: clamp(19px, 1.4vw, 27px); /* 27px @1920 */
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--v3-ink);
}
.v3-card__title a:hover { color: var(--v3-teal); }
.v3-card__hook {
  font-size: clamp(12px, 0.73vw, 14px);
  line-height: 1.55;
  color: #5a615f;
  margin-top: 0.55em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ============================================================
   ORGANIZATORZY + PARTNERZY („Kto, co i jak?")
   Miary z projektu p04: eyebrow y=2561, H2 y=2621, przycisk y=2904,
   „Nasi partnerzy" y=3036, karty y=3077-3373 w kolumnie 325-1594.
   ============================================================ */
.v3-organizatorzy {
  position: relative;
  z-index: 1;
  /* Dol wyrownany tak, zeby kolejne sekcje trafialy w wysokosci z projektu:
     nasze akapity sa dluzsze niz lorem w PSD, wiec kolumna tekstu rosnie. */
  padding-block: 2.34vw 7.76vw;
}

/* Globus: wideo o białym tle wtopione w sekcję przez „multiply".
   Środek i średnica odczytane z projektu (środek x=1230, śr. ~1124 px). */
.v3-organizatorzy__globus {
  position: absolute;
  /* Kula ma w projekcie ~840 px średnicy i środek w (1205, 2840) artboardu;
     w kadrze wideo zajmuje ok. 89% szerokości, stąd kontener 944 px. */
  left: 43.2vw;
  top: -7.9vw;
  width: 50.5vw;
  aspect-ratio: 1;
  pointer-events: none;
  z-index: 0;
}
.v3-organizatorzy__wideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  /* W projekcie kula jest ledwo widoczna — surowy kadr jest ponad dwa razy
     ciemniejszy, więc go wygaszamy. */
  opacity: 0.52;
}
/* Miętowe kropki na globusie — dekoracja z projektu. */
.v3-organizatorzy__kropka {
  position: absolute;
  width: clamp(9px, 0.83vw, 16px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #3fd6bd;
}

.v3-organizatorzy__inner { position: relative; z-index: 1; }
/* W projekcie ta kolumna jest wcięta o 15 px względem siatki kart. */
.v3-organizatorzy__tekst { max-width: min(25.6vw, 492px); padding-left: 0.78vw; }
.v3-organizatorzy__tekst .v3-eyebrow { margin-bottom: 1.41vw; }
/* W tej sekcji naglowek jest mniejszy niz w kontakcie: „Sprawdzeni" ma
   w projekcie 139 px szerokosci, czyli ok. 28 px stopnia, krok wiersza 28 px. */
.v3-organizatorzy__tekst .v3-h2 {
  font-size: clamp(18px, 1.33vw, 25.5px);
  line-height: 1.1;
  margin-bottom: 1.04vw;
}
.v3-organizatorzy__tekst p {
  /* Krok wiersza w projekcie to 24 px, odstep miedzy akapitami tez 24 px. */
  font-size: clamp(12px, 0.78vw, 15px);
  line-height: 1.6;
  color: var(--v3-ink);
  margin-bottom: 1.5rem;
  max-width: 16.4vw;
}
.v3-organizatorzy__tekst .v3-btn { margin-top: 0.73vw; }

/* ---- pasek partnerów ---- */
.v3-partnerzy { position: relative; z-index: 1; padding-left: 0.78vw; margin-top: 2.55vw; }
.v3-partnerzy__tytul {
  font-family: var(--v3-font-display);
  font-weight: 700;
  font-size: clamp(15px, 1.1vw, 21px);
  color: var(--v3-ink);
  margin-bottom: clamp(0.9rem, 1.1vw, 1.3rem);
}
.v3-partnerzy__karty {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.9rem, 1.35vw, 1.62rem);
}
.v3-partner {
  /* Wysokość karty z projektu (296 px @1920) trzymamy niezależnie od tego,
     ile opisu wpisze klient — inaczej pasek rozjeżdża się przy pustych polach. */
  min-height: 15.42vw;
  background: var(--v3-card);
  border-radius: var(--v3-rog);
  box-shadow: 0 4px 24px rgba(0, 16, 13, 0.09);
  padding: clamp(1.4rem, 2.3vw, 2.8rem) clamp(1rem, 1.8vw, 2.2rem) clamp(1.6rem, 2.6vw, 3.1rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.v3-partner__logo {
  min-height: clamp(48px, 4.7vw, 90px);
  display: grid;
  place-items: center;
  margin-bottom: clamp(1rem, 1.8vw, 2.2rem);
}
.v3-partner__logo img {
  max-height: clamp(28px, 4.74vw, 91px);
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
.v3-partner__nazwa {
  font-family: var(--v3-font-display);
  font-weight: 700;
  font-size: clamp(12px, 0.78vw, 15px);
  color: var(--v3-ink);
  margin-bottom: 0.9em;
}
.v3-partner__opis {
  font-size: clamp(11px, 0.63vw, 12px);
  line-height: 1.6;
  color: var(--v3-ink-2);
  margin: 0;
}

/* ============================================================
   KOLAŻ „CO CHCESZ ROBIĆ?"
   Kafle to gotowe pliki grafika (typografia wpalona w obraz), ułożone
   w proporcjach artboardu: kontener 1269x1337 px @1920, każdy kafel
   pozycjonowany procentowo, więc całość skaluje się jednolicie.
   ============================================================ */
.v3-aktywnosci {
  position: relative;
  z-index: 2;                 /* kafle nachodzą na zdjęcie sekcji misji */
  padding-block: 0;
}
/* Nagłówek leży w wolnej lewej kolumnie kolażu: 19 px poniżej jego górnej
   krawędzi, czyli 1.42% wysokości kontenera. */
.v3-aktywnosci__naglowek {
  position: absolute;
  left: 0;
  top: 1.42%;
  width: 65.96%;
}
.v3-aktywnosci__naglowek .v3-eyebrow { margin-bottom: clamp(0.8rem, 1.2vw, 1.4rem); }
.v3-aktywnosci__lead {
  font-size: clamp(13px, 0.83vw, 16px);
  line-height: 1.6;
  color: var(--v3-ink);
  margin: 0;
}
.v3-aktywnosci__lead strong { font-weight: 700; }

.v3-kolaz {
  position: relative;
  width: 100%;
  aspect-ratio: 1269 / 1337;
}

.v3-kafel {
  position: absolute;
  left: var(--kafel-left);
  top: var(--kafel-top);
  width: var(--kafel-width);
  height: var(--kafel-height);
  overflow: hidden;
  border-radius: var(--v3-rog);
  display: block;
  isolation: isolate;
}
.v3-kafel__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Hover = podmiana kadru na wersję „-aktywna" z paczki (pełny kolor). */
/* Grafik prosił o „mocno spowolniony" fade między kadrami. */
.v3-kafel__foto--aktywna { opacity: 0; transition: opacity 0.95s ease; }
.v3-kafel:hover .v3-kafel__foto--aktywna,
.v3-kafel:focus-visible .v3-kafel__foto--aktywna { opacity: 1; }

/* Pomarańczowe CTA na kaflu — w projekcie zawsze przy lewej dolnej krawędzi. */
.v3-kafel__cta {
  position: absolute;
  left: clamp(0.8rem, 1.35vw, 1.6rem);
  bottom: clamp(0.8rem, 1.35vw, 1.6rem);
  display: inline-flex;
  align-items: center;
  gap: clamp(0.7rem, 1.1vw, 1.3rem);
  font-family: var(--v3-font-display);
  font-weight: 700;
  font-size: clamp(11px, 0.73vw, 14px);
  line-height: 1;
  color: #fff;
  background: var(--v3-orange);
  padding: clamp(0.7rem, 0.94vw, 1.13rem) clamp(0.85rem, 1.15vw, 1.4rem);
  border-radius: var(--v3-rog);
  transition: background 0.25s, transform 0.3s var(--ease-out);
}
.v3-kafel:hover .v3-kafel__cta { background: var(--v3-orange-2); transform: translateY(-2px); }
.v3-strzalka--jasna { background: #fff; }

/* ---- „Jeszcze więcej możliwości" ---- */
.v3-nisze {
  position: absolute;
  left: 0;
  top: 51.01%;
  width: 31.91%;
}
.v3-nisze__tytul {
  font-family: var(--v3-font-display);
  font-weight: 700;
  font-size: clamp(12px, 0.78vw, 15px);
  color: var(--v3-ink);
  margin-bottom: clamp(0.7rem, 1.05vw, 1.25rem);
}
.v3-nisze__lista { display: grid; gap: clamp(0.5rem, 0.89vw, 1.07rem); }
.v3-nisze__lista a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #f2f2f2;
  border-radius: var(--v3-rog);
  padding: clamp(0.9rem, 1.35vw, 1.62rem) clamp(0.9rem, 1.25vw, 1.5rem);
  transition: background 0.25s;
}
.v3-nisze__lista a:hover { background: #ececec; }
.v3-nisze__tresc { display: grid; gap: 0.28em; min-width: 0; }
.v3-nisze__tresc strong {
  font-family: var(--v3-font-display);
  font-weight: 700;
  font-size: clamp(15px, 1.09vw, 21px);
  color: var(--v3-ink);
  line-height: 1.1;
}
.v3-nisze__tresc span {
  font-size: clamp(11px, 0.68vw, 13px);
  color: var(--v3-ink-2);
  line-height: 1.4;
}
.v3-nisze__go {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(34px, 2.5vw, 48px);
  height: clamp(34px, 2.5vw, 48px);
  border-radius: 10px;
  background: var(--v3-orange);
  transition: background 0.25s;
}
.v3-nisze__lista a:hover .v3-nisze__go { background: var(--v3-orange-2); }

/* ============================================================
   MISJA + LICZBY + SPOŁECZNOŚĆ
   Miary z projektu p04 (artboard 1920): zdjęcie 4584-6053, cytat od
   x=1066 y=4950, miętowa kreska y=5421, etykiety liczb y=5652,
   pasek postów 5747-6103 (kafle 348x356, odstęp 22).
   ============================================================ */
.v3-misja {
  position: relative;
  z-index: 1;
  /* W projekcie kadr zaczyna się 296 px nad końcem kolażu — dolne kafle
     („rower" i „szlaki") celowo na niego nachodzą. */
  margin-top: -15.42vw;
  background: var(--v3-dark);
  color: #fff;
}

/* Scena = kadr w skali 1:1 z artboardu (1920x1469 -> 76.51vw). */
.v3-misja__scena {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1469;
  overflow: hidden;
}
/* Górna krawędź kadru wygasza się w biel sekcji powyżej, zamiast urywać.

   Zdjęcie grafika ma własne, miękkie wejście: pierwsze ~150 px (@1920) jest
   czysto białe i dopiero potem wyłaniają się szczyty. Paralaksa powiększa
   kadr o 18%, czyli zjada z góry mniej więcej dokładnie ten biały rozbieg
   — zostawał twardy poziomy szew: biel kończyła się w jednej linii, a pod
   nią od razu zaczynały się góry nad głową turystki.

   Rozbieg odtwarzamy nakładką w kolorze tła strony. Nie maską: pod maską
   prześwitywałoby ciemne tło samej sekcji misji, czyli szew byłby czarny
   zamiast białego. `z-index` musi być wyższy niż domyślny, bo zdjęcia są
   pozycjonowane i stoją w drzewie PO tym pseudoelemencie. */
.v3-misja__scena::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 13%;
  z-index: 2;
  background: linear-gradient(to bottom, var(--v3-paper) 0, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}
.v3-misja__foto,
.v3-misja__maska {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v3-misja__maska { pointer-events: none; }

.v3-misja__cytat {
  position: absolute;
  z-index: 3;
  left: 55.52vw;
  top: 19.06vw;
  margin: 0;
  font-family: var(--v3-font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.29vw, 44px);
  line-height: 1.23;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.28);
}
/* Miętowa kreska pod cytatem: 121x14 px @1920. */
.v3-misja__cytat::after {
  content: "";
  display: block;
  width: 6.3vw;
  max-width: 121px;
  height: 0.73vw;
  max-height: 14px;
  margin-top: 3.8vw;
  background: var(--v3-mint);
}

/* Pas liczb celowo wychodzi poza obie krawędzie, jak w projekcie:
   4 kolumny o rozstawie 594 px przy artboardzie 1920, czyli szerokość
   całego pasa to 123.75vw. Skrajne liczby są przycięte. */
/* Pas liczb leży NA kadrze, ale w drzewie jest jego rodzeństwem — dzięki temu
   na wąskim ekranie wychodzi pod zdjęcie zamiast się w nim gubić. */
.v3-misja__liczby {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* Duże liczby zaczynają się w projekcie na y=5554, czyli 970 px poniżej
     górnej krawędzi sekcji. */
  top: 50.52vw;
  z-index: 1;
  /* Rozstaw kolumn 594 px @1920 trzymamy niezależnie od liczby pozycji,
     żeby pas czytał się tak samo przy trzech i przy czterech liczbach. */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 30.94vw;
  justify-content: center;
  text-align: center;
}
.v3-misja__liczba { position: relative; }
/* Duża, wygaszona liczba w tle i ten sam napis w etykiecie na wierzchu. */
.v3-misja__n {
  display: block;
  font-family: var(--v3-font-display);
  font-weight: 700;
  font-size: clamp(52px, 7.97vw, 153px);
  line-height: 0.86;
  color: rgba(255, 255, 255, 0.13);
}
.v3-misja__n-sr { display: none; }
.v3-misja__k {
  position: absolute;
  left: 50%;
  bottom: -0.2em;
  transform: translateX(-50%);
  width: 88%;
  font-family: var(--v3-font-display);
  font-weight: 700;
  font-size: clamp(12px, 0.99vw, 19px);
  line-height: 1.28;
  color: #fff;
}

/* ---- pasek społeczności ---- */
.v3-spolecznosc {
  position: relative;
  z-index: 1;
  background: var(--v3-dark);
  padding-bottom: clamp(1.8rem, 3.23vw, 3.9rem);
}
/* Pasek wjeżdża na dolną część zdjęcia (w projekcie zaczyna się na 5747,
   czyli 306 px nad końcem kadru). */
.v3-spolecznosc__pasek {
  display: flex;
  gap: 1.15vw;
  margin-top: -15.94vw;
  margin-bottom: clamp(1.4rem, 3.9vw, 4.7rem);
  padding-inline: 0;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  /* Skrajne kafle mają być przycięte krawędzią okna, jak w projekcie. */
  /* W projekcie taśma zaczyna się 55 px przed lewą krawędzią, więc pierwszy
     kafel jest przycięty — to sygnał, że da się ją przewinąć. */
  margin-inline: -2.86vw 0;
  padding-inline: 0;
}
.v3-spolecznosc__pasek::-webkit-scrollbar { display: none; }

.v3-post {
  position: relative;
  flex: 0 0 18.13vw;
  max-width: 348px;
  aspect-ratio: 348 / 356;
  border-radius: var(--v3-rog);
  overflow: hidden;
  scroll-snap-align: center;
  display: block;
}
.v3-post__foto { width: 100%; height: 100%; object-fit: cover; }
.v3-post__serwis {
  position: absolute;
  left: clamp(8px, 0.83vw, 16px);
  top: clamp(8px, 0.83vw, 16px);
  width: clamp(18px, 1.25vw, 24px);
  height: auto;
}
.v3-post__autor {
  position: absolute;
  left: clamp(8px, 0.83vw, 16px);
  bottom: clamp(8px, 0.83vw, 16px);
  font-family: var(--v3-font-display);
  font-weight: 700;
  font-size: clamp(11px, 0.83vw, 16px);
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

.v3-spolecznosc__zacheta {
  text-align: center;
  font-family: var(--v3-font-display);
  font-weight: 700;
  font-size: clamp(13px, 0.99vw, 19px);
  color: #fff;
  margin: 0 0 clamp(0.8rem, 1.35vw, 1.6rem);
}
.v3-spolecznosc__ikony {
  display: flex;
  justify-content: center;
  gap: clamp(0.9rem, 1.35vw, 1.6rem);
}
.v3-spolecznosc__ikony img { width: clamp(28px, 2.6vw, 50px); height: auto; display: block; }
.v3-spolecznosc__ikony a { transition: transform 0.25s var(--ease-out); }
.v3-spolecznosc__ikony a:hover { transform: translateY(-2px); }

/* ============================================================
   JAK TO DZIAŁA
   Miary z projektu p04: sekcja #f6f6f6 6345-7197, nagłówek y=6475,
   karty 6546-6959 (302 px szerokości, odstęp 21), badge 6937-6994.
   ============================================================ */
.v3-kroki {
  position: relative;
  z-index: 1;
  background: var(--v3-paper-2);
  padding-block: 6.77vw 12.24vw;   /* nadtytul sekcji stoi w projekcie na y=6481 */
}
/* W projekcie nagłówek tej sekcji jest wcięty o 14 px względem kart. */
.v3-kroki .v3-eyebrow { margin-bottom: clamp(1rem, 1.77vw, 2.1rem); padding-left: 0.73vw; }

.v3-kroki__lista {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.8rem, 1.1vw, 1.31rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.v3-krok {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--v3-card);
  border-radius: var(--v3-rog);
  /* Wysokość z projektu (413 px przy 302 px szerokości) jako minimum, nie jako
     sztywna proporcja: przy dłuższym opisie z panelu karta ma urosnąć,
     a nie wypuścić tekst poza swój obrys i na numer kroku. Siatka i tak
     wyrównuje wysokości w rzędzie. */
  min-height: 21.51vw;
  overflow: visible;
  padding: 0 clamp(0.7rem, 1.15vw, 1.4rem) clamp(1.4rem, 2.3vw, 2.8rem);
}
/* Czwarta karta jest granatowa, bo zdjęcie z paczki ma takie tło. */
.v3-krok--ciemna { background: #283544; color: #fff; }

.v3-krok__ilustracja {
  display: grid;
  place-items: center;
  width: 100%;
  flex: none;
  height: 10.63vw;           /* 204 px z 413 px karty @1920 */
  overflow: hidden;
  border-radius: var(--v3-rog) var(--v3-rog) 0 0;
}
.v3-krok__ilustracja img { max-width: 68%; max-height: 84%; object-fit: contain; }
/* Zdjęcie czwartego kroku jest kwadratem 303x303 na 302 px karcie i w projekcie
   sięga niżej niż ilustracje pozostałych kart, ale tytuł „Leć!" stoi w tym samym
   wierszu co reszta. Dół zdjęcia jest jednolicie granatowy, więc kładziemy na
   nim tekst: w przepływie zostaje wysokość jak w innych kartach, a obrazek
   wystaje pod spód. */
.v3-krok--ciemna .v3-krok__ilustracja { overflow: visible; }
.v3-krok--ciemna .v3-krok__ilustracja img {
  max-width: 100%;
  max-height: none;
  width: 100%;
  height: 15.78vw;
  align-self: start;
  object-fit: cover;
  border-radius: var(--v3-rog) var(--v3-rog) 0 0;
}

.v3-krok__tytul {
  font-family: var(--v3-font-display);
  font-weight: 700;
  /* W projekcie „Zarezerwuj" ma 132 px szerokości, u nas przy 21 px miało 112,
     stąd 25 px. Krok interlinii w projekcie to 29 px. */
  font-size: clamp(17px, 1.29vw, 25px);
  line-height: 1.17;
  color: inherit;
  margin-top: clamp(0.6rem, 1.4vw, 1.7rem);
  /* Projekt łamie „Znajdź wyjazd" na dwie linie, a „Zarezerwuj" zostawia
     w jednej. Miara między jednym a drugim: 6em. */
  max-width: 6em;
  margin-inline: auto;
}
.v3-krok__opis {
  font-size: clamp(11px, 0.68vw, 13px);
  /* Krok interlinii w projekcie to 16 px przy 13 px tekstu. */
  line-height: 1.23;
  color: var(--v3-ink-2);
  margin-top: clamp(0.5rem, 1.15vw, 1.4rem);
  /* Najdłuższy wiersz opisu w projekcie ma 200 px, więc miara jest węższa
     niż wnętrze karty (258 px) i łamanie wychodzi tak samo. */
  max-width: 16.4em;
  margin-inline: auto;
}
.v3-krok--ciemna .v3-krok__opis { color: rgba(255, 255, 255, 0.86); }

/* Numer kroku w kształcie z paczki (step@2.png: koło z dziobkiem po prawej),
   wpuszczony pod dolną krawędź karty.

   Pudełko ma wymiar SAMEGO KOŁA, a dziobek wystaje poza nie w prawo. Wcześniej
   pudełko obejmowało dziobek i cyfra była centrowana względem całego kształtu,
   przez co uciekała w lewo od środka koła (uwaga „cyferki uciekają na lewo").
   Wyrównania procentowego tu użyć nie można: procent liczy się od szerokości
   karty, nie plakietki, i dawał 24 px zamiast oczekiwanych 5. */
.v3-krok__badge {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  width: clamp(36px, 3.02vw, 58px);
  height: clamp(36px, 3.02vw, 58px);
  display: grid;
  place-items: center;
  overflow: visible;
  background: url(../img/v3/step.png) left center / auto 100% no-repeat;
  font-family: var(--v3-font-display);
  font-weight: 700;
  font-size: clamp(11px, 0.73vw, 14px);
  color: var(--v3-ink);
}

/* ============================================================
   B2B — ORGANIZUJESZ WYJAZDY?
   Miary z projektu p04: sekcja 7198-8094, kolumna tekstu od x=341,
   eyebrow y=7337, H2 7397-7553, przyciski 7586 i 7645, „Co zyskujesz?"
   y=7751, lista 7817-7976. Kompozycja plecaka 1039x1039 na x 686 y 6965.
   ============================================================ */
.v3-organizuj {
  position: relative;
  z-index: 1;
  padding-block: 6.77vw 1.98vw;
  overflow: visible;
}
.v3-organizuj__inner { position: relative; z-index: 1; }
.v3-organizuj__tekst { max-width: min(31vw, 595px); padding-left: 0.78vw; }
.v3-organizuj .v3-eyebrow { margin-bottom: clamp(0.4rem, 0.68vw, 0.8rem); }
.v3-organizuj .v3-h2 {
  font-size: clamp(30px, 3.13vw, 60px);
  line-height: 1.06;
  margin-bottom: clamp(1rem, 1.72vw, 2.05rem);
}
.v3-organizuj__cta { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(0.5rem, 0.63vw, 0.75rem); }
.v3-organizuj__pod {
  font-family: var(--v3-font-display);
  font-weight: 700;
  font-size: clamp(15px, 1.09vw, 21px);
  color: var(--v3-ink);
  margin: 1.98vw 0 0.94vw;
}
.v3-organizuj__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2vw; }
.v3-organizuj__lista li {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 1.3vw, 1.56rem);
  font-size: clamp(12px, 0.83vw, 16px);
  color: var(--v3-ink);
}
.v3-organizuj__ikona {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(34px, 2.5vw, 48px);
  height: clamp(34px, 2.5vw, 48px);
  border-radius: 50%;
  background: #f0f0f0;
}
.v3-organizuj__ikona img { width: 54%; height: 54%; object-fit: contain; }

/* ---- róża wiatrów w lewym dolnym rogu ----
   Plik z dosyłki grafika, w podwójnej rozdzielczości (1043 px w pliku,
   521 px w projekcie = 27.14vw). Pozycja z kompozytu: lewy górny róg na
   x=-157 (-8.18vw), y=496 px poniżej góry sekcji (25.83vw). Wychodzi poza
   lewą krawędź strony, tak jak w projekcie.
   „Powinien się ruszać odrobinę w lewo i w prawo, jak kompas" — stąd wolne,
   nierówne wahanie zamiast równego obrotu. */
.v3-kompas {
  position: absolute;
  left: -8.18vw;
  top: 25.83vw;
  width: 27.14vw;
  height: auto;
  z-index: 0;
  pointer-events: none;
  transform-origin: 50% 50%;
  animation: v3Kompas 11s ease-in-out infinite;
}
@keyframes v3Kompas {
  0%   { transform: rotate(-2.4deg); }
  22%  { transform: rotate(1.9deg); }
  41%  { transform: rotate(-1.2deg); }
  63%  { transform: rotate(2.3deg); }
  82%  { transform: rotate(-0.7deg); }
  100% { transform: rotate(-2.4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .v3-kompas { animation: none; }
}

/* ---- kompozycja plecaka (siedem warstw z paczki, 1:1 z artboardu) ---- */
.v3-organizuj__kompozycja {
  position: absolute;
  left: 35.73vw;              /* 686/1920 */
  top: -12.14vw;              /* 6965 - 7198 = -233 px */
  width: 54.11vw;             /* 1039/1920 */
  aspect-ratio: 1;
  pointer-events: none;
  z-index: 0;
}
.v3-warstwa { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Strzałki delikatnie pulsują w stronę plecaka — ruch jest ozdobą,
   więc przy „ogranicz ruch" znika. */
.v3-warstwa--strzalka { animation: v3Strzalka 3.4s ease-in-out infinite; }
.v3-warstwa--s1 { animation-delay: 0s; }
.v3-warstwa--s2 { animation-delay: 0.5s; }
.v3-warstwa--s3 { animation-delay: 1s; }
@keyframes v3Strzalka {
  0%, 100% { transform: translate(0, 0); opacity: 0.85; }
  50%      { transform: translate(0.4%, -0.4%); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .v3-warstwa--strzalka { animation: none; }
}

/* ============================================================
   KONTAKT + STOPKA
   Miary z projektu p04: zdjęcie footer-1 leży na y 8036-9130, sekcja
   kończy się na 9266. Panel formularza x 757-1594, y 8093-9053.
   Kolumna lewa od x=341: „Kontakt" y=8150, H2 8273-8479, akapit 8500,
   social 8700-8947, pasek prawny y=9207.
   ============================================================ */
.v3-kontakt {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* W projekcie zdjęcie stopki (1920x1094) leży dołem na końcu strony, czyli
     y 8172-9266. Pierwsze 136 px sekcji (7.08vw) to jeszcze biel z sekcji nad
     nią, w którą wchodzi górą panel formularza. */
  background: linear-gradient(#fff 0, #fff 7.08vw, #057572 7.08vw);
  color: #fff;
  padding-block: 2.97vw 1.25vw;   /* dół: 24 px pod paskiem prawnym, jak w projekcie */
}
/* Kadr zdjęcia zaczyna się 136 px pod górą sekcji, a nad nim zostaje biel.
   Przycinamy do tego prostokąta, żeby paralaksa warstw nie wjeżdżała
   w biały pas przy wchodzeniu sekcji w kadr. */
.v3-kontakt__tlo { position: absolute; inset: 7.08vw 0 0; overflow: hidden; z-index: -1; }
.v3-kontakt__warstwa {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;          /* kadr w naturalnych proporcjach, bez przybliżania */
  will-change: transform;
}
.v3-kontakt__warstwa--baza { top: 0; z-index: 0; }
.v3-kontakt__warstwa--1    { top: 0; z-index: 1; }
.v3-kontakt__warstwa--2    { top: 0; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .v3-kontakt__warstwa { transform: none !important; }
}

.v3-kontakt__inner {
  display: grid;
  /* Panel formularza zajmuje w projekcie x 757-1594 z kolumny 325-1594. */
  grid-template-columns: minmax(0, 34.04%) minmax(0, 65.96%);
  align-items: start;
  gap: 0;
  padding-left: 0.78vw;
}
/* Nadtytul „Kontakt” stoi w projekcie na y=8285, czyli 250 px pod gora sekcji. */
.v3-kontakt__panel { padding-top: 8.91vw; }
.v3-kontakt__panel .v3-eyebrow { color: #fff; margin-bottom: clamp(0.8rem, 0.89vw, 1.07rem); }
.v3-h2--jasny { color: #fff; }
.v3-kontakt__panel .v3-h2 {
  /* Pierwszy wiersz naglowka ma w projekcie 243 px szerokosci, krok interlinii 59 px. */
  font-size: clamp(28px, 2.89vw, 56px);
  line-height: 1.06;
  margin-bottom: clamp(1rem, 1.82vw, 2.19rem);
}
.v3-kontakt__lead,
.v3-kontakt__zacheta {
  font-size: clamp(12px, 0.83vw, 16px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 clamp(0.9rem, 1.35vw, 1.6rem);
}
/* Miara akapitu z projektu: najdluzszy wiersz ma 320 px. Zdanie nad ikonami
   ma w projekcie 335 px i zostaje w jednym wierszu, wiec go nie zwezamy. */
.v3-kontakt__lead { max-width: 21.5em; }
.v3-kontakt__zacheta { margin-bottom: clamp(1.4rem, 3.02vw, 3.6rem); }

/* Krok miedzy pozycjami w projekcie to ok. 113 px przy ikonie 45 px. */
.v3-kontakt__social { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 3.28vw, 3.94rem); }
/* Pozycja wygląda tak samo z adresem profilu i bez niego, tylko bez adresu
   nie jest odnośnikiem. Stąd oba selektory. */
.v3-kontakt__social a,
.v3-kontakt__social > li > span {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 1.15vw, 1.38rem);   /* 22 px z projektu */
  font-family: var(--v3-font-display);
  font-weight: 700;
  font-size: clamp(13px, 0.83vw, 16px);
  color: #fff;
  transition: transform 0.25s var(--ease-out);
}
.v3-kontakt__social a:hover { transform: translateX(3px); }
.v3-kontakt__social img { width: clamp(32px, 2.5vw, 48px); height: auto; flex: none; }

/* ---- panel formularza ---- */
.v3-kontakt__form {
  /* Wysokość panelu z projektu (960 px @1920) — trzyma proporcje sekcji
     niezależnie od tego, ile pól doda klient. */
  min-height: 50vw;
  align-content: start;
  /* Panel jest w projekcie mleczną szybą, nie płaską płytą: przez jego górę
     widać wodę i drzewa ze zdjęcia pod spodem. Sprawdzone próbkowaniem tego
     samego miejsca panelu nad wodą i nad drzewami: barwa idzie za tłem. */
  background: rgba(247, 251, 250, 0.8);
  backdrop-filter: blur(22px) saturate(1.05);
  -webkit-backdrop-filter: blur(22px) saturate(1.05);
  border-radius: 10px;
  /* Duży odstęp u góry jest z projektu: tytuł zaczyna się dopiero 185 px
     pod krawędzią panelu. */
  padding: 9.33vw clamp(1.2rem, 2.71vw, 3.25rem) clamp(1.4rem, 2.3vw, 2.8rem);
  box-shadow: 0 24px 60px rgba(0, 40, 38, 0.16);
  color: var(--v3-ink);
  display: grid;
  gap: clamp(0.8rem, 1.45vw, 1.74rem);
}
.v3-kontakt__form-tytul {
  font-family: var(--v3-font-display);
  font-weight: 700;
  /* W projekcie napis ma 268 px szerokości, u nas przy 21 px miał 219. */
  font-size: clamp(17px, 1.34vw, 26px);
  color: var(--v3-ink);
  /* Ujemny margines ściąga pierwszą etykietę do odstępu z projektu (20 px
     od dołu tytułu), mniejszego niż odstęp między wierszami formularza. */
  margin: 0 0 -0.94vw;
}
.v3-kontakt__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.8rem, 1.46vw, 1.75rem); }
.v3-kontakt__form label { display: grid; gap: 0.45em; }
.v3-kontakt__form label > span,
.v3-kontakt__form legend {
  font-size: clamp(11px, 0.68vw, 13px);
  font-weight: 500;
  color: var(--v3-ink);
}
.v3-kontakt__form input[type="text"],
.v3-kontakt__form input[type="email"],
.v3-kontakt__form input[type="tel"],
.v3-kontakt__form input[type="date"],
.v3-kontakt__form textarea {
  background: #fff;
  border: 1px solid #e4eae8;
  border-radius: 8px;
  padding: clamp(0.7rem, 0.99vw, 1.19rem) clamp(0.7rem, 0.94vw, 1.13rem);
  font-size: clamp(12px, 0.78vw, 15px);
  color: var(--v3-ink);
  width: 100%;
}
.v3-kontakt__form input::placeholder { color: #98a5a2; }
.v3-kontakt__form input:focus-visible,
.v3-kontakt__form textarea:focus-visible { outline: 2px solid var(--v3-mint); outline-offset: 1px; }
/* W projekcie pole ma 110 px wysokości i nie ma uchwytu zmiany rozmiaru. */
.v3-kontakt__form textarea { resize: none; height: clamp(90px, 5.73vw, 110px); }

.v3-kontakt__grupa { border: 0; margin: 0; padding: 0; display: grid; gap: 0.55em; }
/* Cztery kafle po 157 px w odstępach 38 px — tak wychodzi z projektu. */
.v3-kontakt__kafle { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.5rem, 1.98vw, 2.38rem); }
.v3-check {
  display: flex !important;
  align-items: center;
  gap: 0.7em;
  background: #eaf0ee;
  border-radius: 8px;
  padding: clamp(0.6rem, 0.83vw, 1rem) clamp(0.6rem, 1.04vw, 1.25rem);
  font-size: clamp(11px, 0.68vw, 13px);
  line-height: 1.25;
  cursor: pointer;
  transition: background 0.2s;
}
/* W projekcie napis na kaflu ma wąską miarę: „Aktywności na wodzie" łamie się
   po pierwszym słowie, a „Szlaki górskie" po „Szlaki". */
.v3-check > span { max-width: 5.6em; }
.v3-check--zgoda > span { max-width: 25em; }
.v3-check:hover { background: #e2eae7; }
.v3-check input {
  appearance: none;
  flex: none;
  /* W projekcie kwadrat ma 24 px, przez co napis na kaflu łamie się tak samo. */
  width: clamp(16px, 1.25vw, 24px);
  height: clamp(16px, 1.25vw, 24px);
  border: 1px solid #c8d3d0;
  border-radius: 4px;
  background: #fff;
  display: grid;
  place-items: center;
}
.v3-check input:checked { background: var(--v3-mint); border-color: var(--v3-mint); }
.v3-check input:checked::after {
  content: "";
  width: 55%; height: 55%;
  background: var(--v3-ink);
  -webkit-mask: url(../img/v3/strzalka-5.png) center / contain no-repeat;
          mask: url(../img/v3/strzalka-5.png) center / contain no-repeat;
}
.v3-kontakt__pole-szerokie { margin-top: 0.2rem; }

.v3-kontakt__stopka-formularza {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(0.8rem, 1.46vw, 1.75rem);
  margin-top: 0.2rem;
}
.v3-check--zgoda {
  background: none;
  padding: 0;
  align-items: flex-start;
}
.v3-check--zgoda:hover { background: none; }
.v3-check--zgoda span {
  font-size: clamp(10px, 0.63vw, 12px) !important;
  line-height: 1.45;
  color: var(--v3-ink);
  /* Najdłuższy wiersz zgody w projekcie ma 300 px, stąd węższa miara. */
  max-width: 25em;
}
.v3-check--zgoda a { color: var(--v3-orange); text-decoration: underline; }
.v3-kontakt__stopka-formularza .v3-btn {
  justify-content: center;
  padding-block: clamp(0.9rem, 1.25vw, 1.5rem);   /* przycisk z projektu ma 64 px */
}
.v3-kontakt__toast { font-size: 0.82rem; color: var(--v3-ink-2); }

/* ---- pasek prawny na dole sekcji ---- */
.v3-kontakt__dol {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 8.07vw;             /* pasek prawny stoi w projekcie na y=9207 */
  padding-left: 0.78vw;
}
.v3-kontakt__prawne { display: flex; gap: clamp(1.2rem, 3.44vw, 4.1rem); }
.v3-kontakt__prawne a {
  font-family: var(--v3-font-display);
  font-weight: 700;
  font-size: clamp(11px, 0.73vw, 14px);
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.v3-kontakt__prawne a:hover { color: var(--v3-mint); }
.v3-kontakt__autor {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 0.94vw, 1.13rem);
  margin: 0;
  font-size: clamp(10px, 0.68vw, 13px);
  color: rgba(255, 255, 255, 0.9);
}
/* Pliki z sufiksem @2 są w podwójnej rozdzielczości — renderujemy je w połowie. */
.v3-kontakt__autor img { width: clamp(38px, 3.28vw, 63px); height: auto; }

/* W układzie v3 stopka serwisu jest częścią sekcji kontaktu. */
body.v3-strona .site-footer { display: none; }

/* ============================================================
   RESPONSYWNOŚĆ
   Projekt jest jednoszerokościowy (artboard 1920), więc poniżej ~1100 px
   rozkładamy układ na kolumny, a kompozycje pozycjonowane procentowo
   (kolaż kafli, plecak, kula) przełączamy na zwykły przepływ.
   ============================================================ */
@media (max-width: 1400px) {
  .v3-organizatorzy__tekst { max-width: 34vw; }
  .v3-organizuj__tekst { max-width: 38vw; }
}

@media (max-width: 1240px) {
  .v3-nav__menu { display: none; }
  /* Podwyższona specyficzność: components.css chowa `.nav-burger` na stronie
     głównej regułą `body.home .nav-burger`, bo w poprzedniej wersji burgera
     dawał pasek wyszukiwania. W v3 nawigacja ma własny i musi być widoczna. */
  body.v3-strona .v3-nav__burger { display: flex; justify-content: center; width: 44px; height: 44px; padding: 10px; }
  .v3-social-rail { display: none; }
  .v3::before { display: none; }
}

@media (max-width: 1100px) {
  .v3 .wrap { max-width: 100%; padding-inline: var(--gutter); }
  .v3-oferty__grid { grid-template-columns: repeat(2, 1fr); }
  .v3-kroki__lista { grid-template-columns: repeat(2, 1fr); row-gap: 3.4rem; }
  /* Ilustracja skaluje sie z karta, a karta z ekranem: przy dwoch kolumnach
     10.63vw byloby paskiem, przez ktory zdjecie wychodzi poza swoja ramke. */
  .v3-krok__ilustracja { height: 30vw; }
  .v3-krok--ciemna .v3-krok__ilustracja { overflow: hidden; }
  .v3-krok--ciemna .v3-krok__ilustracja img { height: 100%; }

  /* Kolaż: z układu procentowego na zwykłą siatkę. */
  .v3-kolaz { aspect-ratio: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .v3-aktywnosci__naglowek,
  .v3-nisze { position: static; left: auto; top: auto; width: auto; }
  /* Kafel MUSI zostać `relative`, a nie `static`: w środku leżą dwa zdjęcia
     ustawione absolutnie (kadr zwykły i hover). Bez kontenera uciekały one
     do sekcji i rozlewały się na całą jej szerokość i wysokość. */
  .v3-kafel { position: relative; left: auto; top: auto; width: auto; }
  .v3-aktywnosci__naglowek { grid-column: 1 / -1; }
  .v3-kafel { height: auto; aspect-ratio: 4 / 3; }
  .v3-kafel--woda { grid-column: 1 / -1; aspect-ratio: 837 / 460; }
  .v3-kafel--snieg { aspect-ratio: 406 / 853; }
  .v3-kafel--rower { aspect-ratio: 406 / 655; }
  .v3-kafel--szlak { aspect-ratio: 406 / 368; }
  .v3-nisze { grid-column: 1 / -1; }
  .v3-aktywnosci { padding-block: clamp(2rem, 5vw, 3.5rem); }
  .v3-misja { margin-top: 0; }

  /* Kula i plecak wracają do przepływu, żeby nie wchodziły na tekst.
     MUSZĄ zostać `relative`, nie `static`: w środku obu leżą warstwy ustawione
     absolutnie (siedem plików plecaka, kropki na globusie). Przy `static`
     rozpinały się na całą sekcję zamiast na swój kontener i plecak lądował
     na nagłówku — dokładnie to, co grafik zgłosił jako „plecak się rozjechał". */
  .v3-organizatorzy__globus {
    position: relative;
    left: auto;
    top: auto;
    width: min(70vw, 520px);
    margin: 0 auto 1.5rem;
  }
  .v3-organizatorzy__inner { text-align: left; }
  .v3-organizuj__kompozycja {
    position: relative;
    left: auto;
    top: auto;
    width: min(70vw, 520px);
    margin: 1.5rem auto 0;
  }
  /* Róża wiatrów schodzi pod treść, na dolną krawędź sekcji. */
  .v3-kompas { left: -18vw; top: auto; bottom: -14vw; width: 62vw; }

  /* Rozsuwanie kart „Jak to działa" ma sens tylko przy czterech w rzędzie.
     Przy dwóch kolumnach karty wyjeżdżałyby poza ekran. */
  .js-anim .v3-krok:nth-child(1),
  .js-anim .v3-krok:nth-child(2),
  .js-anim .v3-krok:nth-child(3),
  .js-anim .v3-krok:nth-child(4) { transform: translateY(20px); }
  .v3-organizatorzy__tekst,
  .v3-organizuj__tekst { max-width: none; padding-left: 0; }
  .v3-organizatorzy__tekst p { max-width: 34em; }
  .v3-partnerzy { padding-left: 0; }
  .v3-partner { min-height: 0; }

  .v3-misja__cytat { left: auto; right: var(--gutter); top: 12vw; font-size: clamp(20px, 3.4vw, 34px); }
  .v3-misja__liczby { grid-auto-columns: minmax(140px, 1fr); width: 100%; }
  .v3-kontakt__inner { grid-template-columns: 1fr; gap: 2rem; padding-left: 0; }
  .v3-kontakt__form { min-height: 0; }
  .v3-kontakt__dol { padding-left: 0; }
}

@media (max-width: 900px) {
  body.v3-strona { --nav-h: 72px; }
  .v3-nav { height: 72px; }
  /* CTA znika z paska (nie ma na nie miejsca obok burgera), ale zostaje
     w menu mobilnym, gdzie jest głównym przyciskiem. */
  .v3-nav .v3-nav__cta { display: none; }

  .v3-hero { min-height: 0; padding-block: 7.5rem 3rem; }
  /* Na wąskim ekranie podarcie jest proporcjonalnie wyższe i wchodziło
     na nagłówek sekcji ofert — odsuwamy go. */
  .v3-oferty { padding-top: 3.5vw; }
  .v3-hero__cutout,
  .v3-hero__mapa { display: none; }
  .v3-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,16,13,0.45), rgba(0,16,13,0.6));
  }
  .v3-tear { bottom: -3vw; }

  .v3-szukaj { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  /* `flex: 1 1 0` z widoku desktopowego dzieli tu WYSOKOŚĆ, nie szerokość:
     baza 0 zamrażała pigułkę na 58 px, więc otwarta rozwijka nie mieściła się
     w środku i wychodziła pod sąsiedni select. Stąd uwaga, że nagłówek
     pierwszej kategorii wsuwa się pod „Kiedy". */
  .v3-szukaj__pill { flex: 0 0 auto; min-height: 58px; align-content: flex-start; }
  .v3-szukaj__go { min-height: 58px; justify-content: center; }
  /* Pigułki stoją w kolumnie, więc „skrajne końce paska" z widoku
     desktopowego nie mają tu sensu — wszystkie wracają na 9 px. */
  .v3-szukaj .v3-szukaj__pill:first-child,
  .v3-szukaj .v3-szukaj__go { border-radius: var(--v3-rog); }
  /* Rozwijka wraca do przepływu, więc musi wziąć całą szerokość pigułki,
     a nie resztkę miejsca w jej rzędzie flex. Pigułka przestaje być wtedy
     stadionem u dołu, bo rozwijka siedzi w środku i jej róg wystawał poza
     zaokrąglenie — stąd wrażenie, że nagłówek pierwszej grupy wsuwa się pod
     sąsiedni select. */
  .v3-szukaj__pill:has(.v3-szukaj__lista:not([hidden])) { border-radius: 22px; }
  .v3-szukaj__lista {
    position: static;
    flex: 0 0 100%;
    box-shadow: none;
    border: 1px solid var(--v3-line);
    margin: 0.4rem 0 0.6rem;
    max-height: min(50vh, 320px);
  }
  /* Na telefonie rozwijka leży w kolumnie pigułek, więc kalendarz bierze
     całą jej szerokość zamiast swoich 310 px spod pigułki. */
  .v3-szukaj__lista--kalendarz { width: 100%; max-width: none; }
  .v3-szukaj__pill--kierunek,
  .v3-szukaj__pill--aktywnosc,
  .v3-szukaj__pill--kiedy { flex-wrap: wrap; }

  /* Zakładki w JEDNEJ linii przesuwanej w bok, a nie w kilku rzędach —
     zawijane wyglądały „jak porozrzucane". „Więcej" zostaje na stałe po prawej,
     żeby nie uciekło poza widoczny fragment taśmy. */
  .v3-taby-bar { flex-wrap: nowrap; padding: 6px; gap: 0.4rem; }
  .v3-taby {
    flex-wrap: nowrap;
    gap: 0.3rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    /* Ostatnia zakładka nie może kleić się do „Więcej". */
    padding-right: 0.2rem;
  }
  .v3-taby::-webkit-scrollbar { display: none; }
  /* Palec potrzebuje 44 px, a zakładki i ikony kontaktu schodziły do 34. */
  .v3-tab { min-height: 44px; padding-inline: 0.9em; flex: none; scroll-snap-align: start; }
  .v3-taby__wiecej { flex: none; padding-inline: 0.6em; }
  .v3-nav .nav-kontakt__link,
  .v3-spolecznosc__ikony a,
  .v3-kontakt__social a { min-width: 44px; min-height: 44px; }
  /* Strzałki karuzel na desktopie mają 48 px, ale clamp schodzi z nimi do 34 px,
     czyli poniżej wygodnego celu palca. Na telefonie zostają przy 44. */
  .v3-slider-btn { width: 44px; height: 44px; }
  .v3-kontakt__prawne a,
  .v3-menu__info a { min-height: 44px; display: inline-flex; align-items: center; }
  .v3-partnerzy__karty { grid-template-columns: 1fr; }
  .v3-kontakt__kafle { grid-template-columns: repeat(2, 1fr); }
  .v3-kontakt__stopka-formularza { grid-template-columns: 1fr; }
  /* Na wąskim ekranie cytat siada przy dolnej krawędzi kadru na przyciemnieniu,
     a liczby schodzą pod zdjęcie, na ciemne tło sekcji. */
  .v3-misja__scena { aspect-ratio: 4 / 5; }
  .v3-misja__scena::after {
    content: "";
    position: absolute;
    inset: 40% 0 0;
    background: linear-gradient(180deg, rgba(0, 12, 8, 0), rgba(0, 12, 8, 0.72));
  }
  .v3-misja__cytat {
    left: var(--gutter);
    right: var(--gutter);
    top: auto;
    bottom: 7vw;
    z-index: 1;
    font-size: clamp(21px, 5.4vw, 34px);
  }
  .v3-misja__cytat::after { margin-top: 6vw; width: 88px; height: 10px; max-width: none; max-height: none; }
  /* Kadr jest na telefonie mocno przycięty i kobieta wypadała przy samej lewej
     krawędzi, częściowo poza nią. Zjazd punktu kadrowania z 50% na 18% wsuwa
     ją w głąb kadru, czyli wizualnie w prawo — o to prosił grafik. */
  .v3-misja__foto { object-position: 18% center; }

  /* Statystyki zostają POZIOMĄ taśmą, tak jak na desktopie: w pionie
     odliczanie gubiło rytm, a grafik prosił o slider w poziomie. */
  .v3-misja__liczby {
    position: static;
    transform: none;
    width: 100%;
    padding: 2.6rem 0 0;
    margin-inline: 0;
    grid-auto-flow: column;
    grid-auto-columns: 62vw;
    gap: 0;
    text-align: center;
    scroll-padding-inline: var(--gutter);
  }
  .v3-misja__liczby > :first-child { margin-left: var(--gutter); }
  .v3-misja__liczby > :last-child { margin-right: var(--gutter); }
  .v3-misja__n { color: rgba(255, 255, 255, 0.18); }
  /* Etykieta zostaje nałożona na liczbę, jak na desktopie — to ona wjeżdża
     przy dosuwaniu tekstów, więc musi mieć ten sam układ. */
  .v3-misja__k { width: 92%; }
  .v3-spolecznosc__pasek { margin-top: 2.4rem; }
}

@media (max-width: 640px) {
  .v3-oferty__grid { grid-template-columns: 1fr; }
  .v3-kroki__lista { grid-template-columns: 1fr; row-gap: 3.6rem; }
  .v3-krok { min-height: 0; padding-bottom: 2.4rem; }
  /* Na wąskiej karcie zdjęcie czwartego kroku nie może wystawać pod tytuł:
     w jednej kolumnie kadr jest niski i szeroki, więc napis wypadłby na
     środku nieba. Wraca zwykłe przycięcie do wysokości ilustracji. */
  .v3-krok__ilustracja { height: 42vw; }
  /* Kafle pionowe zostają dwa w rzędzie także na telefonie. Na pełną szerokość
     kafel „śnieg" ma 966 px wysokości i zajmuje więcej niż ekran, a przyciąć go
     nie można, bo napis jest wpalony w zdjęcie. */
  .v3-kolaz { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
  .v3-kafel--woda,
  .v3-aktywnosci__naglowek,
  .v3-nisze { grid-column: 1 / -1; }
  .v3-kontakt__row { grid-template-columns: 1fr; }
  .v3-kontakt__kafle { grid-template-columns: 1fr; }
  .v3-misja__n { font-size: 64px; }
  .v3-kontakt__dol { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .v3-post { flex-basis: 62vw; }
}

/* Strzałka przy pozycji listy aktywności: cieńsza i jaśniejsza niż w menu. */
.v3-szukaj__opcja .v3-nav__drop-strzalka { opacity: 0.55; }

/* ============================================================
   ANIMACJE wg dokumentu „Opis animacji" od grafika

   Zasada wspólna: wszystko, co się rusza, jest ozdobą i znika przy
   „ogranicz ruch". Treść pozostaje widoczna — elementy startują
   z opacity 0 dopiero wtedy, gdy skrypt potwierdzi, że umie je pokazać
   (klasa `js-anim` na <html>), więc bez JS nic nie zniknie.
   ============================================================ */

/* Przycisk „Szukaj" jest w projekcie prostokątem 8,3 px, choć pigułki obok
   niego są pełnymi stadionami. Wcześniej dostawał 100 px i to była właśnie
   „niezgodność zaobleń w wyszukiwarce" z uwag grafika. */
.v3-szukaj__go { border-radius: var(--v3-rog) 100px 100px var(--v3-rog); }

/* ---- wejście menu: pozycje rozsuwają się, pion się rysuje ----

   Przejście MUSI siedzieć przy stanie docelowym, nie przy wyjściowym.
   Klasę `js-anim` dokłada skrypt ze stopki, czyli już po pierwszym renderze:
   gdy przejście stało przy stanie wyjściowym, pozycje najpierw gasły z tą samą
   animacją, a dwie klatki później zapalały się z powrotem. Efekt netto był
   żaden i stąd uwaga, że menu „od razu jest widoczne". Teraz zgaszenie jest
   natychmiastowe, a animuje się samo wejście. */
.js-anim .v3-nav__menu > *,
.js-anim .v3-nav__right > * {
  opacity: 0;
  transform: translateY(-10px);
}
.js-anim .v3-nav.is-gotowe .v3-nav__menu > *,
.js-anim .v3-nav.is-gotowe .v3-nav__right > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

/* Kolejność wejścia z uwag grafika: NAJPIERW wjeżdża logo, dopiero potem
   spod niego zaczyna się rysować kreska — i wyraźnie wolniej niż wcześniej
   (3,6 s zamiast 2,2 s, start po 1,1 s zamiast po 0,4 s, czyli już po
   wylądowaniu znaku). Kreska rośnie od swojego początku, a ten siedzi
   pod logo, więc `transform-origin: top` rysuje ją dokładnie stamtąd. */
.js-anim .v3-nav__logo-img {
  opacity: 0;
  transform: translateY(-16px);
}
.js-anim .v3-nav.is-gotowe .v3-nav__logo-img {
  opacity: 1;
  transform: none;
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}
/* Kreska ODSŁANIA SIĘ przycięciem, nie skalowaniem.

   `scaleY` ściskał cały pseudoelement RAZEM Z GRADIENTEM, a to w gradiencie
   siedzi przerwa na ikony społecznościowe. Przy skali 0,4 przerwa lądowała
   w okolicach 270 px zamiast przy ikonach na 522 px, więc przez całe 3,6 s
   rysowania kreska szła po ikonach i dopiero na końcu wskakiwała na miejsce.
   Zmierzone: 80 wierszy kolizji w trakcie animacji, 0 po jej zakończeniu.

   `clip-path` odsłania od góry w dół i nie rusza geometrii tła, więc przerwa
   stoi przy ikonach od pierwszej klatki. */
.js-anim .v3::before { clip-path: inset(0 0 100% 0); }
/* Krzywa prawie równomierna, nie `ease-out`: przy wygładzeniu wyjściowym
   kreska pokonywała 70% drogi w pierwszej sekundzie i mimo wydłużenia czasu
   nadal czytała się jako szybka. Tutaj rysuje się miarowo i dopiero na końcu
   zwalnia. */
.js-anim .v3.is-gotowe::before { clip-path: inset(0 0 0 0); transition: clip-path 3.6s cubic-bezier(0.45, 0.05, 0.3, 1) 1.1s; }

/* ---- logo przypięte na scrollu ----
   Grafik: „chodziło o to, żeby logo trzymało kolor". Wcześniej kurczyło się
   po przewinięciu; teraz zostaje w swojej skali i barwie, a niepotrzebne
   drugie logo pod podarciem zniknęło z szablonu. */
.v3-nav__logo { position: relative; z-index: 2; }
/* Logo nie zmienia skali ani barwy przy przewijaniu — animuje się wyłącznie
   jego wejście (opacity i transform, wyżej), więc `height` i `filter`
   zostają bez przejścia. */
.v3-nav__logo-img { transition-property: opacity, transform; }

/* ---- hero: tło pracuje wolniej niż strona (paralaksa) ----
   `will-change` idzie na warstwy tła, bo to one się przesuwają. Kontener musi
   zostać nieruchomy, inaczej wędruje razem z nim jego `overflow: hidden`. */
.v3-hero__tlo { will-change: transform; }
.v3-hero__tlo img { height: 112%; top: -6%; position: absolute; }

/* ---- ujawnianie na scrollu (wspólny mechanizm) ---- */
.js-anim [data-anim] { opacity: 0; }
.js-anim [data-anim="w-gore"]  { transform: translateY(22px); }
.js-anim [data-anim="z-lewej"] { transform: translateX(-26px); }
.js-anim [data-anim="z-prawej"]{ transform: translateX(26px); }
.js-anim [data-anim="skala"]   { transform: scale(0.96); }
.js-anim [data-anim].is-widoczny {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--anim-zwloka, 0s);
}

/* ---- pasek zakładek: tafla rozsuwa się, zakładki dosuwają z fade ---- */
/* „Efekt jest, ale tak szybki, że ciężko go zauważyć" — tafla rozsuwa się
   teraz 1,8 s, a zakładki dosuwają się po kolei co 0,16 s, więc cała sekwencja
   trwa ponad trzy sekundy zamiast niecałej jednej. */
.js-anim .v3-taby-bar { transform: scaleX(0.32); transform-origin: left center; }
.js-anim .v3-taby-bar.is-widoczny { transform: scaleX(1); transition: transform 1.8s var(--ease-out); }
.js-anim .v3-taby-bar .v3-tab,
.js-anim .v3-taby-bar .v3-taby__wiecej {
  opacity: 0;
  transform: translateX(-14px);
}
.js-anim .v3-taby-bar.is-widoczny .v3-tab,
.js-anim .v3-taby-bar.is-widoczny .v3-taby__wiecej {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: var(--anim-zwloka, 0s);
}

/* ---- plakietki na kartach pojawiają się po zdjęciu ---- */
/* Karty pokazują się od razu, a plakietki dojeżdżają z wyraźną zwłoką —
   dokładnie tak, jak grafik to opisał. Zwłoka jest sumą stałej 0,55 s
   i przesunięcia karty w rzędzie, ustawianego przez skrypt. */
.js-anim .v3-card .v3-chip {
  opacity: 0;
  transform: translateY(-8px) scale(0.92);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  transition-delay: calc(0.55s + var(--anim-zwloka, 0s));
}
.js-anim .v3-card.is-widoczny .v3-chip { opacity: 1; transform: none; }

/* ---- kropki na globusie ----
   Pozycję i krycie ustawia skrypt (punkty jadą razem z obrotem kuli),
   więc bez przejścia CSS: inaczej walczyłoby z animacją klatka po klatce. */
.js-anim .v3-organizatorzy__kropka { opacity: 0; }

/* ---- slider partnerów ---- */
.v3-partnerzy__karty.ma-slider {
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * clamp(0.9rem, 1.35vw, 1.62rem)) / 3);
  grid-template-columns: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.v3-partnerzy__karty.ma-slider::-webkit-scrollbar { display: none; }
.v3-partnerzy__karty.ma-slider .v3-partner { scroll-snap-align: start; }
.v3-slider-nawigacja { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: clamp(0.8rem, 1.15vw, 1.4rem); }
/* Taśma kadrów jest pełnoekranowa, więc jej strzałki trzeba wciągnąć
   z powrotem do kolumny treści, inaczej przyklejają się do krawędzi okna.
   Wyjmujemy je też z przepływu: dołożone przez skrypt podnosiły wysokość
   sekcji o 48 px i przesuwały całą resztę strony względem artboardu. */
.v3-spolecznosc { position: relative; }
.v3-spolecznosc__pasek + .v3-slider-nawigacja {
  position: absolute;
  right: max(var(--gutter), 2.86vw);
  /* Pionowo na środku taśmy. Ujemny margines taśmy skleja się z sekcją,
     więc jej góra pokrywa się z górą .v3-spolecznosc — środek to połowa
     wysokości kafla (356 px = 18.54vw). */
  top: calc(9.27vw - clamp(17px, 1.25vw, 24px));
  margin: 0;
  z-index: 3;
}
.v3-slider-btn {
  width: clamp(34px, 2.5vw, 48px);
  height: clamp(34px, 2.5vw, 48px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f0f0f0;
  transition: background 0.2s;
}
.v3-slider-btn:hover { background: var(--v3-mint); }
.v3-slider-btn[disabled] { opacity: 0.35; cursor: default; }
.v3-slider-btn[disabled]:hover { background: #f0f0f0; }
.v3-slider-btn .v3-strzalka { background: var(--v3-ink); }
.v3-slider-btn--wstecz .v3-strzalka { transform: scaleX(-1); }

/* ---- sekcja misji: maska jako osobna warstwa paralaksy ---- */
.v3-misja__foto,
.v3-misja__maska { will-change: transform; }

/* Cytat „pisze się sam": kursor miga do czasu dopisania ostatniego znaku. */
.v3-misja__cytat.pisze::after {
  content: "";
  display: inline-block;
  width: 0.06em;
  height: 0.92em;
  margin-left: 0.06em;
  background: var(--v3-mint);
  vertical-align: -0.1em;
  animation: v3Kursor 0.9s steps(1) infinite;
}
@keyframes v3Kursor { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* ---- „Jak to działa": karty rozsuwają się od środka ----
   Grafik: „efekt rozsunięcia 1 2 3 Leć". Pierwsze dwie karty startują
   dosunięte w prawo, dwie ostatnie w lewo, więc rząd rozjeżdża się na boki
   z jednego punktu. Dopiero po tym ruszają animacje w środku kart. */
.js-anim .v3-krok {
  transition: transform 1s var(--ease-out), opacity 0.8s var(--ease-out);
}
.js-anim .v3-krok:nth-child(1) { transform: translateX(48%); }
.js-anim .v3-krok:nth-child(2) { transform: translateX(16%); }
.js-anim .v3-krok:nth-child(3) { transform: translateX(-16%); }
.js-anim .v3-krok:nth-child(4) { transform: translateX(-48%); }
.js-anim .v3-krok.is-widoczny { transform: none; }

.js-anim .v3-krok__tytul,
.js-anim .v3-krok__opis,
.js-anim .v3-krok__badge,
.js-anim .v3-krok__ilustracja {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.js-anim .v3-krok.is-widoczny .v3-krok__ilustracja { opacity: 1; transform: none; transition-delay: 0.75s; }
.js-anim .v3-krok.is-widoczny .v3-krok__tytul { opacity: 1; transform: none; transition-delay: 1s; }
.js-anim .v3-krok.is-widoczny .v3-krok__opis  { opacity: 1; transform: none; transition-delay: 1.2s; }
.js-anim .v3-krok.is-widoczny .v3-krok__badge { opacity: 1; transform: translate(-50%, 50%); transition-delay: 1.4s; }
.js-anim .v3-krok__badge { transform: translate(-50%, calc(50% + 14px)); }

/* ---- B2B: okręgi kręcą się w przeciwne strony, strzałki krążą ---- */
.v3-organizuj__kompozycja.kreci .v3-warstwa--pierscien-zew { animation: v3Obrot 54s linear infinite; }
.v3-organizuj__kompozycja.kreci .v3-warstwa--pierscien-wew { animation: v3Obrot 38s linear infinite reverse; }
.v3-organizuj__kompozycja.kreci .v3-warstwa--strzalka { animation: v3Obrot 26s linear infinite; }
.v3-organizuj__kompozycja.kreci .v3-warstwa--s2 { animation-duration: 32s; animation-direction: reverse; }
.v3-organizuj__kompozycja.kreci .v3-warstwa--s3 { animation-duration: 44s; }
@keyframes v3Obrot { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .js-anim [data-anim],
  .js-anim .v3-nav__menu > *,
  .js-anim .v3-nav__right > *,
  .js-anim .v3-taby-bar .v3-tab,
  .js-anim .v3-taby-bar .v3-taby__wiecej,
  .js-anim .v3-card .v3-chip,
  .js-anim .v3-krok__tytul,
  .js-anim .v3-krok__opis,
  .js-anim .v3-krok__badge,
  .js-anim .v3-krok__ilustracja {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .js-anim .v3-krok__badge { transform: translate(-50%, 50%) !important; }
  .js-anim .v3-taby-bar { transform: none !important; }
  /* Przy „ogranicz ruch" kreska stoi od razu cała, bez rysowania. Przycięcie
     musi wrócić do pełnego, inaczej zostałaby niewidoczna. */
  .js-anim .v3::before { clip-path: none !important; transition: none !important; }
  .v3-organizuj__kompozycja.kreci .v3-warstwa { animation: none !important; }
  .v3-organizatorzy__kropka { opacity: 1 !important; }
  .v3-hero__tlo,
  .v3-misja__foto,
  .v3-misja__maska { transform: none !important; }
}

/* ---- statystyki: teksty dosuwają się po odliczeniu ----
   Sam licznik grafik pochwalił, brakowało mu ruchu podpisów. Duża liczba
   zostaje na miejscu, wjeżdża tylko etykieta pod nią. */
.js-anim .v3-misja__liczba .v3-misja__k {
  opacity: 0;
  transform: translate(-50%, 14px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: calc(0.9s + var(--anim-zwloka, 0s));
}
.js-anim .v3-misja__liczba.is-widoczny .v3-misja__k { opacity: 1; transform: translate(-50%, 0); }

/* Ta sama ochrona dla pozostałych taśm: dziś mieszczą się w pionie co do
   piksela, ale wystarczy dłuższy podpis albo inny font, żeby zaczęły łapać
   kółko myszy tak jak pas liczb. */
.ma-slider,
.v3-spolecznosc__pasek { overscroll-behavior-x: contain; }

/* Taśma chwytana myszą (slidery partnerów, kadrów i statystyk).
   `-webkit-user-drag: none` na zawartości jest tu warunkiem działania, a nie
   ozdobą: bez niego wciśnięcie przycisku nad zdjęciem uruchamia natywne
   przeciąganie obrazka i kursor ciągnie miniaturkę zamiast taśmy. */
.ma-slider,
.v3-spolecznosc__pasek { cursor: grab; }
.ma-slider img,
.ma-slider a,
.v3-spolecznosc__pasek img,
.v3-spolecznosc__pasek a { -webkit-user-drag: none; user-select: none; }
.ma-slider.chwytany,
.v3-spolecznosc__pasek.chwytany { cursor: grabbing; scroll-snap-type: none; }
.ma-slider.chwytany *,
.v3-spolecznosc__pasek.chwytany * { user-select: none; }

/* ---- pas liczb jako slider (punkt 24 z opisu animacji) ---- */
.v3-misja__liczby.ma-slider {
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  /* Podpisy pod liczbami są pozycjonowane absolutnie i wystają pod spód pasa,
     a w trakcie ujawniania jadą jeszcze 14 px niżej. To wystarczyło, żeby
     `overflow-x: auto` (który wymusza `overflow-y: auto`, bo jedna oś nie może
     zostać `visible`, gdy druga nią nie jest) zrobił z pasa pudełko
     przewijalne w PIONIE o 25 px. Kółko myszy nad liczbami przewijało wtedy
     najpierw je, a dopiero potem stronę, co czytało się jak zacinanie
     przewijania.

     Zapas u dołu mieści podpisy razem z ich drogą, a ujemny margines zdejmuje
     go z układu, więc wysokość sekcji i pozycje kolejnych bloków zostają
     dokładnie takie jak były. */
  padding-bottom: 30px;
  margin-bottom: -30px;
  /* Przeciąganie w poziomie nie ma uruchamiać gestu „wstecz" przeglądarki. */
  overscroll-behavior-x: contain;
}
.v3-misja__liczby.ma-slider::-webkit-scrollbar { display: none; }
.v3-misja__liczby.ma-slider .v3-misja__liczba { scroll-snap-align: center; }
/* Strzałki leżą na zdjęciu, więc muszą być jasne, nie szare jak przy partnerach. */
/* Pas liczb wychodzi poza obie krawędzie okna, więc strzałki siadają
   właśnie na krawędziach — tam, gdzie liczby są przycięte. Środek pasa
   zostaje wolny, żeby nie przykrywać podpisów. */
.v3-misja__liczby + .v3-slider-nawigacja {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50.52vw + 3.6vw);
  justify-content: space-between;
  padding-inline: max(var(--gutter), 1.6vw);
  margin: 0;
  z-index: 2;
  pointer-events: none;
}
.v3-misja__liczby + .v3-slider-nawigacja .v3-slider-btn { pointer-events: auto; }
.v3-misja__liczby + .v3-slider-nawigacja .v3-slider-btn { background: rgba(255, 255, 255, 0.16); }
.v3-misja__liczby + .v3-slider-nawigacja .v3-slider-btn:hover { background: var(--v3-mint); }
.v3-misja__liczby + .v3-slider-nawigacja .v3-slider-btn .v3-strzalka { background: #fff; }
.v3-misja__liczby + .v3-slider-nawigacja .v3-slider-btn:hover .v3-strzalka { background: var(--v3-ink); }

@media (max-width: 900px) {
  .v3-misja__liczby + .v3-slider-nawigacja { position: static; margin: 1.2rem var(--gutter) 0; justify-content: flex-start; padding-inline: 0; }
}


/* ============================================================
   MENU MOBILNE v3
   ============================================================ */
.v3-menu {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--v3-deep-2);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: clamp(1rem, 4vw, 1.6rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.v3-menu[hidden] { display: none; }
.v3-menu__gora { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.6rem; }
.v3-menu__logo { width: 96px; height: auto; }
.v3-menu__zamknij {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  position: relative;
  flex: none;
}
.v3-menu__zamknij span {
  position: absolute;
  width: 22px; height: 2px;
  background: #fff;
}
.v3-menu__zamknij span:first-child { transform: rotate(45deg); }
.v3-menu__zamknij span:last-child { transform: rotate(-45deg); }

.v3-menu__nawigacja { display: grid; gap: 1.4rem; flex: 1; align-content: start; }
.v3-menu__grupa { display: grid; gap: 0.5rem; }
.v3-menu__rodzic {
  font-family: var(--v3-font-display);
  font-weight: 400;
  font-size: 1.25rem;
  color: #fff;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.v3-menu__rodzic b { font-weight: 700; margin-left: 0.3em; }
.v3-menu__dzieci { display: flex; flex-wrap: wrap; gap: 0.45rem; padding-left: 0.1rem; }
.v3-menu__dzieci a {
  font-size: 0.85rem;
  color: var(--v3-ink);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 100px;
  padding: 0.6rem 1rem;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}
.v3-menu__dzieci a:active { background: var(--v3-mint); }

.v3-menu__info {
  display: grid;
  gap: 0.2rem;
  margin-top: 0.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.v3-menu__info a {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1rem;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.v3-menu__dol {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.v3-menu__cta { flex: 1; justify-content: center; }
.v3-menu .nav-kontakt { display: flex; gap: 0.4rem; }
.v3-menu .nav-kontakt__link { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,0.1); }
.v3-menu .nav-kontakt__link img { width: 20px; height: 20px; }

body.v3-menu-otwarte { overflow: hidden; }

/* Ikona serwisu bez wpisanego adresu: ten sam wygląd, ale nieklikalna. */
.v3-social-rail > span,
.v3-spolecznosc__ikony > span,
.v3-kontakt__social span[data-brak-profilu] { cursor: default; }

/* Karta v3 nosi też klasę `card` (po niej szuka jej silnik filtrów), więc
   łapała animację wejścia z app.css. Dwie animacje wejścia na jednym elemencie
   biły się ze sobą: karta potrafiła zostać wygaszona po ujawnieniu. */
.v3-card.card { animation: none; }

/* ---- formularz: pułapka na boty i komunikaty ---- */
.v3-kontakt__pulapka {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.v3-kontakt__komunikat {
  margin: 0;
  padding: 0.9rem 1.1rem;
  border-radius: 8px;
  font-size: clamp(12px, 0.78vw, 15px);
  line-height: 1.5;
}
.v3-kontakt__komunikat--ok { background: var(--v3-mint); color: var(--v3-ink); }
.v3-kontakt__komunikat--blad { background: #ffe2d4; color: #8c2f00; }