/* ===== Tokens ===== */
:root {
  --color-bg: #FAFAF7;
  --color-surface: #F1F0E9;
  --color-surface-2: #EAE8DD;
  --color-ink: #1B2420;
  --color-ink-muted: #5B6459;
  --color-green: #517536;
  --color-green-dark: #355325;
  --color-lime: #96cf5e;
  --color-amber: #b8720b;
  --color-red: #c23f3f;
  --color-border: #DEDCD0;
  --color-cream: #FAFAF7;

  --font-display: 'Bricolage Grotesque', 'Segoe UI', sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 28px;
  --max-width: 1440px;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--color-bg); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* WAŻNE: nie overflow-x:hidden tutaj - html/body to sam "root scroller",
     na którym .site-header (position:sticky) się opiera. Ustawienie samego
     overflow-x zmusza przeglądarkę (per spec) do policzenia overflow-y jako
     auto zamiast visible, co zamienia html/body w kontener przewijania i
     całkowicie psuje sticky (pasek "przykleja się" do góry na stałe zamiast
     normalnie pływać). Poziomy scroll trzeba łapać punktowo, na elemencie,
     który go faktycznie powoduje - nie tu. */
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

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

.container {
  max-width: calc(var(--max-width) - 80px);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: var(--space-2);
}
.eyebrow-invert { color: var(--color-lime); }

h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
}
h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-green);
  color: var(--color-cream);
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}
.btn-primary:hover {
  background: var(--color-green-dark);
  transform: translateY(-1px);
}
.btn-lg { padding: 1rem 2rem; font-size: 1rem; }

/* Pasek dokładnie na wysokość obszaru pod notch/wyspę (iOS Safari,
   `viewport-fit=cover` w <meta name="viewport">) - poleganie na tym, że tło
   <html>/<body> "samo" tam dotrze, okazało się niewiarygodne (różnie w
   zależności od wersji Safari), więc malujemy to jawnie, przyklejonym
   paskiem nad wszystkim. Bez viewport-fit=cover env() zwraca 0px, więc pasek
   jest wtedy niewidoczny (0 wysokości) - nieszkodliwy na innych przeglądarkach.
   Półprzezroczysty + blur - ta sama "szklana" recepta co .nav-pill niżej -
   więc to, co faktycznie przewija się pod spodem, prześwituje rozmyte,
   zamiast być płaską plamą koloru. Kolor/przezroczystość dopasowuje
   script.js przy scrollu (patrz "Kolor bezpiecznego obszaru pod notch"). */
.safe-area-top-fill {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  background: rgba(250, 250, 247, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 200;
  pointer-events: none;
}
/* To samo co wyżej, ale dla dolnego paska Safari (wskaźnik home / dolny pasek
   adresu) - tam pod spodem nic nie przewija się na stałe (to koniec strony),
   więc bez rozmycia, po prostu jednolity kolor tła strony zamiast białego. */
.safe-area-bottom-fill {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-bottom, 0px);
  background: var(--color-bg);
  z-index: 200;
  pointer-events: none;
}

/* ===== Header / pasek na całą szerokość =====
   Zmiana koncepcji (2026-10-02): pasek NIE pływa już jako wyspa z marginesem
   dookoła (stary .nav-pill z border-radius/border/cieniem ze wszystkich
   stron) - teraz to zwykły pasek, przyklejony do samej góry, na całą
   szerokość ekranu. Szklane tło (przezroczystość + blur) zostaje - samo w
   sobie wystarczy, żeby pasek nie zlewał się z tym, co przewija się pod
   spodem, bez potrzeby obramowania/zaokrąglenia. Tło/blur/cień siedzą teraz
   na .site-header (pełna szerokość), .nav-pill to już tylko wyśrodkowany,
   ograniczony szerokością wrapper na treść w środku - jak .container gdzie
   indziej. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: rgba(250, 250, 247, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1.5px solid rgba(27, 36, 32, 0.18);
  box-shadow: 0 12px 30px rgba(27, 36, 32, 0.08);
}
.nav-pill {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.85rem var(--space-3);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}
/* Placeholder do podmiany, gdy będzie realne logo SVG w różnych układach. */
.brand-name-placeholder {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  color: #000000;
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
}

.primary-nav {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: space-between;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin: 0 auto;
}
.nav-links a {
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--color-ink-muted);
  white-space: nowrap;
  transition: color 0.15s ease;
}
.nav-links a:hover { color: var(--color-green); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.btn-client-panel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 136px;
  height: 2.35rem;
  padding: 0.48rem 1rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(27, 36, 32, 0.32);
  background: rgba(250, 250, 247, 0.5);
  color: var(--color-ink);
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-client-panel:hover {
  background: rgba(250, 250, 247, 0.95);
  border-color: var(--color-green);
  color: var(--color-green-dark);
}
/* Druga kopia "Panel klienta", wprost na pasku obok wyboru języka i
   hamburgera (patrz .nav-mobile-controls) - żeby ten przycisk był widoczny
   na każdym ekranie, nie tylko po rozwinięciu menu. Schowana domyślnie,
   pokazywana i skracana dopiero w media queries niżej. */
.nav-panel-btn-mobile { display: none; }

/* Grupuje hamburger i jego ewentualną kopię wyboru języka na pasku, żeby
   .nav-pill (space-between) traktował je jako jeden blok przy prawej
   krawędzi, a nie rozjeżdżał się jako osobne elementy. */
.nav-mobile-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Mobile menu toggle */
.nav-toggle {
  display: none;
  flex-shrink: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  transition: background-color 0.15s ease;
}
.nav-toggle:hover { background: var(--color-surface); }
.nav-toggle-bar {
  width: 16px;
  height: 1.6px;
  background: var(--color-ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

/* Language dropdown */
.lang-dropdown { position: relative; }
/* Druga kopia wybory języka - pokazywana wprost na pasku, gdy menu już
   jest zwinięte do hamburgera, ale na pasku jeszcze starcza miejsca (patrz
   media queries niżej); domyślnie (i na szerokim ekranie) schowana. */
.nav-lang-bar { display: none; }
.lang-trigger {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  height: 2.35rem;
  padding: 0 0.75rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(27, 36, 32, 0.28);
  background: rgba(250, 250, 247, 0.5);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-ink);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.lang-trigger:hover {
  background: rgba(250, 250, 247, 0.95);
  border-color: var(--color-ink-muted);
}
.lang-flag, .lang-opt-flag {
  font-size: 0.95rem;
  line-height: 1;
  /* Windows nie renderuje emoji-flag (świadoma decyzja Microsoftu, nie brak
     fontu) - zamiast tego pokazuje sam dwuliterowy kod jako tekst. Stąd
     realne SVG zamiast znaku emoji - działa identycznie wszędzie.
     Obramowanie/zaokrąglenie/przycinanie siedzi na TYM wrapperze, nie na
     samym <svg> - mieszanie border-box z SVG-owym viewBox w różnych
     przeglądarkach dawało widoczną przerwę między ramką a kolorami flagi.
     Tak SVG dostaje po prostu 100%/100% gotowego, przyciętego pudełka. */
  display: inline-flex;
  width: 20px;
  height: 15px;
  box-sizing: border-box;
  border-radius: 2px;
  border: 1px solid rgba(27, 36, 32, 0.18);
  overflow: hidden;
  vertical-align: -0.05em;
}
.flag-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.lang-caret {
  width: 12px;
  height: 12px;
  transition: transform 0.2s ease;
}
.lang-trigger[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 160px;
  background: rgba(250, 250, 247, 0.96);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.4rem;
  box-shadow: 0 12px 30px rgba(27, 36, 32, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 100;
}
.lang-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.lang-option {
  text-align: left;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  color: var(--color-ink);
  background: transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.lang-option:hover { background: rgba(27, 36, 32, 0.08); color: var(--color-ink); }
.lang-option.is-active { background: rgba(81, 117, 54, 0.14); color: var(--color-green-dark); font-weight: 600; }

/* ===== Hero ===== */
.hero {
  /* Fluid expanding container height: section lengthens up to 720px on wide screens, bike stays glued to pavement, top distance increases naturally */
  /* Wysokość pudełka sceny - skrócone, żeby nie było pustej przestrzeni u góry.
     NIE wpływa na rozmiar roweru: --hero-scale-h jest odłączone (poniżej). */
  --hero-photo-h: clamp(290px, 26vw, 460px);
  /* Skala roweru/cokołu - wartości jak w zaakceptowanej wersji, ale już
     niezależne od --hero-photo-h, żeby skracanie pudełka nie zmieniało roweru. */
  --hero-scale-h: min(907px, clamp(580px, 52.2vw, 1044px));
  position: relative;
  padding-bottom: var(--space-5);
  overflow: hidden;
  width: 100%;
}

/* Bez zdjęcia tła - płaskie tło strony. ".hero-photo" to pudełko na scenę
   z rowerem (nie na zdjęcie). */
.hero-photo {
  position: relative;
  width: 100%;
  height: var(--hero-photo-h);
  overflow: hidden;
  z-index: 0;
}

.hero-visual {
  position: absolute;
  left: 50%;
  /* Dystans roweru do dołu pudełka (= odstęp do nagłówka) w px, żeby skrócenie
     pudełka nie zmieniało tego odstępu ani nie przycinało cokołu. ~jak 24% ze
     starej, pełnej wysokości. */
  bottom: clamp(100px, 9vw, 175px);
  transform: translateX(-50%);
  width: 100%;
  max-width: 720px;
  padding: 0 var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  z-index: 2;
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0 auto;
  /* Odstęp od sceny z rowerem do h1 - płynnie rośnie z szerokością ekranu. */
  padding-top: clamp(1rem, 5vw, 4rem);
}
.hero-subhead {
  margin-top: var(--space-3);
  font-size: 1.15rem;
  color: var(--color-ink-muted);
  margin-left: auto;
  margin-right: auto;
}
.hero-cta-row {
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
/* Główne CTA całej strony - wyróżnione na tle innych .btn-primary. */
.hero-cta-row .btn-primary {
  font-weight: 700;
  box-shadow: 0 14px 30px rgba(81, 117, 54, 0.38), 0 2px 0 rgba(27, 36, 32, 0.06);
}
.hero-cta-row .btn-primary::after {
  /* Własne SVG jako maska zamiast glifu "→" - koloruje się na currentColor. */
  content: '';
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h11M12 6l6 6-6 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h11M12 6l6 6-6 6'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: transform 0.15s ease;
  animation: cta-arrow-knock 3.2s ease-in-out infinite;
}
.hero-cta-row .btn-primary:hover {
  box-shadow: 0 18px 38px rgba(81, 117, 54, 0.46), 0 2px 0 rgba(27, 36, 32, 0.06);
}
.hero-cta-row .btn-primary:hover::after {
  animation-play-state: paused;
  transform: translateX(3px);
}
@keyframes cta-arrow-knock {
  0%, 75%, 100% { transform: translateX(0); }
  82% { transform: translateX(6px); }
  87% { transform: translateX(0); }
  92% { transform: translateX(4px); }
  97% { transform: translateX(0); }
}

/* ---------- scena: rower + cokół ----------
   Dół .hero-stage = linia podłogi. Koła stoją na niej, a środek blatu
   cokołu (y=100 w viewBox 0 0 1200 400) leży dokładnie na tej samej linii. */
.hero-stage {
  --stage-h: calc(var(--hero-scale-h) * 0.2737);
  --bike-ratio: 1.5; /* proporcje hero-l20.png (981/660) */
  --ped-w: min(calc(var(--stage-h) * var(--bike-ratio) * 1.6), calc(100vw - 32px));
  position: relative;
  flex: 1;
  max-width: 580px;
  height: var(--stage-h);
  overflow: visible;
}

.hero-pedestal {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: block;
  width: var(--ped-w);
  height: auto;
  aspect-ratio: 1200 / 400;
  transform: translate(-50%, 75%); /* środek blatu na linii podłogi */
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}

/* przewijanie ceny na cokole */
.hp-price {
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .45s ease;
}
/* "OD" wielkimi literami niezależnie od tłumaczenia (i18n daje małe "od") */
.hp-od { text-transform: uppercase; }

.hero-bike-img {
  --bike-scale: 1;
  --bike-drop: 0px;
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 100%;
  width: auto;
  max-width: none;
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 100%;
  transform: translateX(-50%) translateY(var(--bike-drop)) scale(calc(var(--bike-scale) * 0.95));
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease;
  z-index: 2;
  filter: drop-shadow(0 4px 6px rgba(27, 36, 32, 0.14));
}
.hero-bike-img.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(var(--bike-drop)) scale(var(--bike-scale));
}
.hero-bike-img.is-exit-left {
  opacity: 0;
  transform: translateX(calc(-50% - 46px)) translateY(var(--bike-drop)) scale(calc(var(--bike-scale) * 0.92));
}
.hero-bike-img.is-exit-right {
  opacity: 0;
  transform: translateX(calc(-50% + 46px)) translateY(var(--bike-drop)) scale(calc(var(--bike-scale) * 0.92));
}
/* C29 ma pusty margines wokół roweru - powiększenie + opuszczenie na blat. */
/* zdjęcia hero mają wspólny format 900x600, rower przyklejony do dołu - bez korekt per model */

.hero-nav {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
  background: rgba(250, 250, 247, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(27, 36, 32, 0.18);
  box-shadow: 0 4px 14px rgba(27, 36, 32, 0.08);
  opacity: 0.45;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
  cursor: pointer;
  z-index: 10;
}
.hero-nav svg { width: 17px; height: 17px; stroke-width: 1.8; }
.hero-nav:hover, .hero-nav:focus-visible {
  opacity: 0.75;
  color: var(--color-ink);
  background: rgba(27, 36, 32, 0.07);
  border-color: rgba(27, 36, 32, 0.15);
  transform: scale(1.05);
}
.hero-nav:active { transform: scale(0.95); }

.section-head { margin: 0 auto var(--space-6); text-align: center; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ===== Features Section (Refined Circles) ===== */
.features {
  padding: calc(var(--space-6) + 1rem) 0 var(--space-6);
  /* Jak .referral/.points, ale przeliczone pod dużo większy własny
     padding-top tej sekcji (space-6+1rem=112px zamiast tam 40px) - tyle
     mniej trzeba tu dokładać scroll-margin-top, żeby nazwa sekcji lądowała
     w tej samej odległości od dołu paska po kliknięciu w link nawigacji. */
  scroll-margin-top: 15px;
  border-top: 1px solid var(--color-border);
}
.feature-orbits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5) var(--space-3);
  max-width: 100%;
  margin: var(--space-4) auto 0;
}
.feature-orbit {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 180px;
  max-width: 220px;
  text-align: center;
}

.feature-circle {
  width: 160px;
  height: 160px;
  min-width: 160px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.2rem;
  box-shadow: 0 10px 24px rgba(27, 36, 32, 0.05);
  /* Tylko kółko pływa - opis (.feature-orbit p, poza kółkiem) ma zostać w
     miejscu, więc animacja siedzi tutaj, nie na całym .feature-orbit.
     Szybciej niż poprzednio (4s zamiast 6s). */
  animation: float 4s ease-in-out infinite;
}
.feature-orbit:nth-child(2) .feature-circle { animation-delay: 0.55s; }
.feature-orbit:nth-child(3) .feature-circle { animation-delay: 1.1s; }
.feature-orbit:nth-child(4) .feature-circle { animation-delay: 1.65s; }
.feature-orbit:nth-child(5) .feature-circle { animation-delay: 2.2s; }
.feature-icon {
  width: 30px;
  height: 30px;
  color: var(--color-green);
}
.feature-circle h3 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-ink);
  margin: 0;
}
.feature-orbit p {
  margin-top: 0.85rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--color-ink-muted);
}

/* ===== Referral Banner (Refined) ===== */
.referral {
  /* Sekcja sama jest już bez tła - tylko odstęp od krawędzi ekranu, żeby
     kafelek niżej (.referral-inner) nie dotykał jej po bokach. Kolor,
     zaokrąglenie i cień siedzą teraz na .referral-inner, nie tutaj - stąd
     "kafelek", a nie pasek od lewej do prawej. Poziomy padding trzyma się
     tej samej relacji względem paska co .container (patrz komentarz tam) -
     odwraca się przy @media (max-width: 1080px). */
  color: var(--color-cream);
  padding: var(--space-4);
  margin: 0;
  /* W przeciwieństwie do innych sekcji (.features, .faq-section...) ta ma
     dużo mniejszy własny padding-top (space-4 zamiast space-6+1rem) - przy
     scroll-margin-top:0 kafelek wjeżdżał prawie pod sam pasek po kliknięciu
     linku w nawigacji. Trzeba realnej wysokości paska plus odrobina luzu, a
     nie 0. */
  scroll-margin-top: 55px;
}
.referral-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0 auto;
  /* Węższy niż .container samo w sobie by dało (1360px) - na największych
     ekranach kafelek jeszcze bardziej ściągnięty do środka, nie tylko
     odsunięty od krawędzi tyle co reszta treści. */
  max-width: calc(var(--max-width) - 300px);
  /* Dwie poprzednie próby złe w przeciwne strony: cienki gęsty raster
     wyglądał jak szum, pojedyncze kółko w rogu było niezauważalne. Tym razem
     grube, śmiałe ukośne pasy przez cały kafelek (jak livery wyścigowe) -
     trzy różne grubości/odcienie w jednym cyklu, ale spore przerwy między
     nimi, więc to wciąż kilka wyraźnych pasów, nie gęsty deseń. */
  background: repeating-linear-gradient(
    118deg,
    rgba(53, 83, 37, 0.32) 0px,
    rgba(53, 83, 37, 0.32) 70px,
    transparent 70px,
    transparent 130px,
    rgba(150, 207, 94, 0.16) 130px,
    rgba(150, 207, 94, 0.16) 155px,
    transparent 155px,
    transparent 260px,
    rgba(27, 36, 32, 0.22) 260px,
    rgba(27, 36, 32, 0.22) 285px,
    transparent 285px,
    transparent 400px
  ), var(--color-green);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: 0 20px 50px rgba(27, 36, 32, 0.14);
}
.referral h2 {
  color: var(--color-cream);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin-top: 0.3rem;
}
.referral-body {
  margin-top: var(--space-3);
  max-width: 46ch;
  color: rgba(250, 250, 247, 0.88);
  font-size: 1.02rem;
  line-height: 1.5;
}
.referral-stat {
  /* Jak .rewards-marquee wyżej - bezpośrednio po nagłówku, więc space-6
     jak w FAQ. */
  margin: var(--space-6) auto 0;
  max-width: 100%;
}
.referral-stat-body {
  display: flex;
  align-items: stretch;
  background: rgba(250, 250, 247, 0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1.5px dashed rgba(250, 250, 247, 0.32);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  /* Obie maski (góra i dół) na TYM SAMYM elemencie, który ma faktyczne
     obramowanie/tło - maska na osobnym, przezroczystym rodzicu (poprzednia
     próba) nie przebijała się poprawnie do tego dziecka w praktyce (górne
     wcięcie po prostu nie działało, mimo identycznej reguły jak dolne).
     mask-composite: intersect łączy dwie warstwy w jedno wycięcie z obu
     rogów na raz. Pozycja liczona OD PRAWEJ krawędzi (- stała szerokość
     .referral-stat-side) - niezależna od długości tekstu w .referral-stat-main. */
  -webkit-mask-image:
    radial-gradient(circle 11px at calc(100% - 92px) 0, transparent 10.5px, black 11px),
    radial-gradient(circle 11px at calc(100% - 92px) 100%, transparent 10.5px, black 11px);
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-over, source-in;
  mask-image:
    radial-gradient(circle 11px at calc(100% - 92px) 0, transparent 10.5px, black 11px),
    radial-gradient(circle 11px at calc(100% - 92px) 100%, transparent 10.5px, black 11px);
  mask-repeat: no-repeat, no-repeat;
  mask-composite: intersect;
}
.referral-stat-main {
  display: flex;
  align-items: center;
  padding: 2rem 1.5rem;
  background: rgba(250, 250, 247, 0.1);
}
.referral-stat-side {
  /* box-sizing: border-box, żeby width:92px było CAŁKOWITĄ szerokością (z
     paddingiem), zgodną z "100% - 92px" w masce .referral-stat-body -
     inaczej padding dolicza się do width i odległość się rozjeżdża.
     border-left - przegroda między jaśniejszym a ciemniejszym tłem; maska
     na .referral-stat-body tnie ją razem z resztą biletu dokładnie w tym
     samym miejscu co wcięcia, więc linia ma "ugryzioną" przerwę, nie idzie
     bez przerwy przez cały szew. */
  box-sizing: border-box;
  flex-shrink: 0;
  width: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  background: rgba(250, 250, 247, 0.1);
  border-left: 1.5px dashed rgba(250, 250, 247, 0.32);
}
.referral-stat-side-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-cream);
  text-align: center;
  max-width: 8ch;
}
.referral-stat-barcode {
  /* Dekoracyjny kod kreskowy - cienkie pasy, subtelny, nie krzykliwy
     element graficzny. Czysta biel (nie --color-cream/opacity) - te dawały
     wygaszony, szary efekt zamiast wyraźnych białych kresek. */
  width: 52px;
  height: 20px;
  background-image: repeating-linear-gradient(
    90deg,
    #fff 0px, #fff 1px,
    transparent 1px, transparent 3px,
    #fff 3px, #fff 4px,
    transparent 4px, transparent 7px,
    #fff 7px, #fff 8px,
    transparent 8px, transparent 10px,
    #fff 10px, #fff 12px,
    transparent 12px, transparent 14px,
    #fff 14px, #fff 15px,
    transparent 15px, transparent 18px,
    #fff 18px, #fff 19px,
    transparent 19px, transparent 22px
  );
}
.referral-eq {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  font-family: var(--font-mono);
  font-size: clamp(1.2rem, 2.5vw, 1.55rem);
  font-weight: 700;
  /* Sam gap:0 nie wystarczał - line-height czcionki i tak dokładał odstęp
     między liniami, stąd dodatkowo ścieśnione tu. */
  line-height: 1.2;
  color: var(--color-cream);
}
.referral-eq-mark {
  color: var(--color-lime);
}
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  /* NIE space-6 (to była wartość nagłówek -> treść, dużo za dużo tutaj) -
     ten odstęp ląduje tuż przed dolnym paddingiem kafelka (var(--space-5)),
     więc razem robiły się nieproporcjonalnie duże "puste" dół kafelka
     względem górnego (sama etykieta + padding-top). Mniejszy odstęp tutaj
     przywraca wizualną symetrię góra/dół. */
  margin-top: var(--space-4);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-lime);
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.link-arrow:hover {
  border-color: var(--color-lime);
  transform: translateX(2px);
}
.link-arrow::after {
  content: '→';
  font-size: 1.1rem;
}

/* ===== Points / Rewards ===== */
.points {
  /* Jak .referral wyżej - tło/zaokrąglenie/cień przeniesione na
     .points-inner, tu zostaje tylko odstęp od krawędzi ekranu. */
  color: var(--color-cream);
  padding: var(--space-4);
  margin: 0;
  /* Jak .referral wyżej. */
  scroll-margin-top: 55px;
}
.points-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0 auto;
  /* Jak .referral-inner wyżej - węższy niż .container samo w sobie by dało. */
  max-width: calc(var(--max-width) - 300px);
  /* Jak .referral-inner wyżej - te same grube ukośne pasy. */
  background: repeating-linear-gradient(
    118deg,
    rgba(53, 83, 37, 0.32) 0px,
    rgba(53, 83, 37, 0.32) 70px,
    transparent 70px,
    transparent 130px,
    rgba(150, 207, 94, 0.16) 130px,
    rgba(150, 207, 94, 0.16) 155px,
    transparent 155px,
    transparent 260px,
    rgba(27, 36, 32, 0.22) 260px,
    rgba(27, 36, 32, 0.22) 285px,
    transparent 285px,
    transparent 400px
  ), var(--color-green);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(27, 36, 32, 0.14);
}
.points h2 {
  color: var(--color-cream);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin-top: 0.3rem;
}
.points-body {
  margin-top: var(--space-3);
  max-width: 46ch;
  color: rgba(250, 250, 247, 0.88);
  font-size: 1.02rem;
  line-height: 1.5;
}

.points-cta {
  display: flex;
  justify-content: center;
  /* Jak .link-arrow wyżej w .referral - mniejszy odstęp niż nagłówek ->
     treść, żeby dół kafelka nie wyglądał na dużo bardziej "pusty" niż góra. */
  margin-top: var(--space-4);
}
.points-cta .link-arrow {
  margin-top: 0;
}

.rewards-marquee {
  /* Bezpośrednio po nagłówku, bez podtytułu pomiędzy - jak w FAQ
     (.section-head), więc ten sam odstęp: space-6. */
  margin-top: var(--space-6);
  /* Przebija boczny padding .points-inner (var(--space-4)) - karty mają
     dojeżdżać do samej krawędzi zaokrąglonego kafelka, nie kończyć się w
     środku zielonego tła z widocznym marginesem. Przycina i tak
     overflow:hidden na .points-inner (razem z jego border-radius). */
  margin-left: calc(-1 * var(--space-4));
  margin-right: calc(-1 * var(--space-4));
  width: calc(100% + 2 * var(--space-4));
  display: flex;
  /* Bez maski wygaszającej na bokach - karty po prostu znikają ostro na
     krawędzi kafelka, zamiast dogasać gradientem. */
  overflow: hidden;
}
.rewards-scroller {
  display: flex;
  flex-shrink: 0;
  animation: rewards-scroll 40s linear infinite;
}
.rewards-track {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-3);
  padding-right: var(--space-3);
}
@keyframes rewards-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-25%); }
}
.reward-card {
  flex-shrink: 0;
  width: 200px;
  display: flex;
  flex-direction: column;
  background: rgba(250, 250, 247, 0.09);
  border: 1px solid rgba(250, 250, 247, 0.2);
  border-radius: var(--radius);
  padding: var(--space-2);
  text-align: center;
}
.reward-card-media {
  height: 150px;
  border-radius: var(--radius-sm);
  background: rgba(250, 250, 247, 0.06);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 44px 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* Zdjęcia produktów (images/reward-*.jpg) na razie nie istnieją na dysku,
   wiec <img onerror> chowa <img> i widac to tlo - kazda nagroda dostaje
   wiec wlasna ikone zamiast jednego powtorzonego prezentu. */
.reward-card-media.reward-icon-powerbank {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237FC23F' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='3' width='10' height='18' rx='2'/%3E%3Cpath d='M10 3V1.5h4V3'/%3E%3Cpath d='M13 8l-3 5h2.5l-1 4 4-5.5h-2.5z'/%3E%3C/svg%3E");
}
.reward-card-media.reward-icon-rain-jacket {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237FC23F' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3.5L5 5.5v4h2.5V20a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V9.5H19v-4l-4-2'/%3E%3Cpath d='M9 3.5a3 3 0 0 0 6 0'/%3E%3Cpath d='M12 10v3.5'/%3E%3C/svg%3E");
}
.reward-card-media.reward-icon-gloves {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237FC23F' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 21v-6.5a4.5 4.5 0 0 1 9 0V21'/%3E%3Cpath d='M8 12.5l-2.3-1.6a1.6 1.6 0 1 1 1.8-2.6l2 1.4'/%3E%3Cpath d='M7.5 21h9'/%3E%3C/svg%3E");
}
.reward-card-media.reward-icon-helmet {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237FC23F' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14.5a8 8 0 0 1 16 0v1.5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1.5z'/%3E%3Cpath d='M8 17v3M16 17v3M8.5 12h2M12 10.5v2M13.5 12h2'/%3E%3C/svg%3E");
}
.reward-card-media.reward-icon-phone {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237FC23F' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2'/%3E%3Cpath d='M11 19h2'/%3E%3C/svg%3E");
}
.reward-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.reward-card-label {
  margin-top: var(--space-2);
  padding: 0 0.2rem 0.2rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-cream);
}

@media (prefers-reduced-motion: reduce) {
  .rewards-scroller { animation: none; }
  .rewards-marquee { overflow-x: auto; }
  .rewards-track[aria-hidden="true"] { display: none; }
}

/* ===== FAQ ===== */
.faq-section {
  padding: calc(var(--space-6) + 1rem) 0 var(--space-5);
  /* Jak .features wyżej. */
  scroll-margin-top: 15px;
}
.faq-list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.faq-item {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: 0 1.4rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-item:hover { border-color: rgba(81, 117, 54, 0.4); }
.faq-item[open] {
  border-color: var(--color-green);
  box-shadow: var(--shadow-sm);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.25rem 0;
  font-weight: 600;
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-ink-muted);
  flex-shrink: 0;
  transition: color 0.2s ease;
}
.faq-item[open] summary::after { content: "\2212"; color: var(--color-green); }
.faq-answer {
  margin: 0 0 1.25rem;
  color: var(--color-ink-muted);
  line-height: 1.6;
}

/* ===== Contact Section (Minimalist, Frameless & Equal Width) ===== */
.contact-section {
  background: transparent;
  padding: calc(var(--space-6) + 1rem) 0 var(--space-6);
  /* Jak .features wyżej. */
  scroll-margin-top: 15px;
}
.contact-wrap {
  max-width: 800px;
  margin: var(--space-4) auto 0;
  background: transparent;
}
.contact-primary-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  max-width: 640px;
  margin: 0 auto;
}
.contact-primary-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  width: 100%;
  text-decoration: none;
  color: var(--color-ink);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  background: transparent;
  border: none;
  box-sizing: border-box;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.contact-primary-item:hover {
  transform: translateY(-2px);
  opacity: 0.85;
  background: rgba(81, 117, 54, 0.06);
}
.contact-primary-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--color-green);
  color: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(81, 117, 54, 0.2);
}
.contact-primary-icon svg {
  width: 22px;
  height: 22px;
}
.contact-primary-text {
  display: flex;
  flex-direction: column;
}
.contact-primary-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink-muted);
}
.contact-primary-val {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-ink);
}
.contact-messengers-divider {
  text-align: center;
  margin: var(--space-4) 0 var(--space-3);
  position: relative;
}
.contact-messengers-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-border);
  z-index: 0;
}
.contact-messengers-divider span {
  position: relative;
  z-index: 1;
  background: var(--color-bg);
  padding: 0 1rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-ink-muted);
}
.contact-messengers-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  /* 5 przycisków (180px + 1rem odstępu każdy) w kontenerze 800px dałoby 4+1
     (samotny piąty na drugiej linii) - zawężone tu do szerokości mieszczącej
     dokładnie 3, żeby wymusić równiejszy podział 3+2. */
  max-width: 610px;
  margin: 0 auto;
}
.messenger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 180px;
  height: 50px;
  padding: 0 1rem;
  border-radius: 999px;
  color: #FFFFFF;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.messenger-btn svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.messenger-btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  filter: brightness(1.06);
}
.messenger-btn:active {
  transform: translateY(0) scale(0.98);
}
.messenger-fb {
  background: linear-gradient(45deg, #0084ff 0%, #a033ff 50%, #ff5280 100%);
}
.messenger-wa {
  background: #25D366;
}
.messenger-tg {
  background: #24A1DE;
}
.messenger-vb {
  background: #7360F2;
}
.messenger-ig {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

/* ===== Nasze rowery (bike catalog) ===== */
.bikes {
  padding: calc(var(--space-6) + 1rem) 0 var(--space-6);
  /* Jak .features wyżej. */
  scroll-margin-top: 15px;
}

/* ===== Locations (inside Kontakt) ===== */
/* Styl zielonej plakietki z Toast.tsx (border-brand + bg-surface/białe +
   text-brand, rounded-full) - białe tło, zielone obramowanie, zielony tekst.
   Zaokrąglenie zostaje umiarkowane (var(--radius)), nie pełny pigułkowy
   9999px jak w oryginale - ten tekst jest zdaniem, nie krótką etykietą, więc
   zawija się na 2 linie, a pełne zaokrąglenie na wielolinijkowym bloku
   wygląda krzywo. */
.locations-note {
  /* Styl dymków z FAQ (.faq-item) - neutralna obwódka/tło zamiast zielonej
     pigułki, wyśrodkowany tekst. */
  margin: 0 0 var(--space-4);
  padding: 1.1rem 1.4rem;
  border-radius: var(--radius);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  color: var(--color-ink);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.5;
  text-align: center;
}
.locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}
.location-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.location-card-map {
  width: 100%;
  height: 240px;
  border: 0;
  display: block;
}
.location-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
}
.location-card-label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-ink);
}
.location-card-directions {
  flex-shrink: 0;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-green);
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.2s ease;
}
.location-card-directions:hover {
  border-color: var(--color-green);
}
.bike-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  margin: 0 auto;
}
.bike-accessories {
  margin-top: var(--space-5);
  text-align: center;
}
.bike-accessories-divider {
  text-align: center;
  margin: 0 0 var(--space-3);
  position: relative;
}
.bike-accessories-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-border);
  z-index: 0;
}
.bike-accessories-divider span {
  position: relative;
  z-index: 1;
  background: var(--color-bg);
  padding: 0 1rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-ink-muted);
}
.bike-accessories-list {
  display: flex;
  /* Zawsze jeden rząd, nawet na wąskim ekranie - karty (.bike-accessory)
     się kurczą (flex-shrink + min-width:0), a nie zawijają. */
  flex-wrap: nowrap;
  justify-content: center;
  gap: var(--space-2);
}
.bike-accessory {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 160px to sufit, nie sztywna wartość - flex-shrink pozwala się ścisnąć,
     żeby trzy zawsze zmieściły się obok siebie zamiast zawijać do kolumny. */
  flex: 1 1 0;
  min-width: 0;
  max-width: 160px;
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-ink);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.bike-accessory:hover {
  transform: translateY(-3px);
  border-color: var(--color-green);
  box-shadow: var(--shadow-md);
}
.bike-accessory-media {
  /* Niżej niż pierwotne 90px - samo pudełko na ikonę/zdjęcie nie musi być
     aż tak wysokie, żeby nie robić z kart wieży wyższej niż potrzeba. */
  width: 100%;
  height: 60px;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bike-accessory-icon {
  width: 28px;
  height: 28px;
  color: var(--color-green);
  flex-shrink: 0;
}
.bike-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-align: left;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bike-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
/* Pigułka statusu, ten sam język wizualny co "Dostępny" w kalendarzu dat
   (patrz .date-tile-status) - zamiast luźnego pogrubionego tekstu. Nad
   zdjęciem roweru, więc od razu widać dostępność zanim spojrzy się niżej.
   Trzy warianty koloru (is-available/is-pending/is-unavailable) ustawiane
   z JS w zależności od stanu modelu - zielony/pomarańczowy/czerwony. */
.bike-availability-note {
  margin: 0 auto var(--space-3);
  min-height: 1.6em;
  width: max-content;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  visibility: hidden;
}
.bike-availability-note.is-visible {
  visibility: visible;
}
.bike-availability-note::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.bike-availability-note.is-available {
  color: var(--color-green-dark);
  background: rgba(127, 194, 63, 0.22);
}
.bike-availability-note.is-available::before { background: var(--color-green); }
.bike-availability-note.is-pending {
  color: var(--color-amber);
  background: rgba(184, 114, 11, 0.16);
}
.bike-availability-note.is-pending::before { background: var(--color-amber); }
.bike-availability-note.is-unavailable {
  color: var(--color-red);
  background: rgba(194, 63, 63, 0.14);
}
.bike-availability-note.is-unavailable::before { background: var(--color-red); }
.bike-card-media {
  background: transparent;
  border: none;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  margin-bottom: var(--space-3);
}
.bike-card[data-model="DUOTTS C29"] .bike-card-media img {
  transform: scale(1.5);
}
.bike-card-media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.bike-card-name { font-size: 1.05rem; }
.bike-card-specs {
  margin: var(--space-3) 0 0;
  border-top: 1px dashed var(--color-border);
}
.bike-spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.6rem 0;
  border-bottom: 1px dashed var(--color-border);
}
.bike-spec:last-child { border-bottom: none; }
.bike-spec dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}
.bike-spec dd {
  margin: 0;
  font-weight: 600;
  font-size: 0.92rem;
  text-align: right;
}
.bike-spec-price dd {
  color: var(--color-green);
  font-family: var(--font-mono);
  font-size: 0.95rem;
}
.btn-block { width: 100%; margin-top: var(--space-3); }
.btn:disabled {
  opacity: 0.55;
  background: var(--color-ink-muted);
  color: var(--color-cream);
  cursor: not-allowed;
  box-shadow: none;
}
.btn:disabled:hover { background: var(--color-ink-muted); transform: none; }

/* ===== Footer ===== */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-4) 0;
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-ink-muted);
}
.footer-inner .brand-name { font-size: 0.95rem; color: var(--color-ink); }
.footer-legal-links {
  display: flex;
  gap: 1.2rem;
  font-weight: 600;
}
.footer-legal-links a:hover { color: var(--color-green-dark); text-decoration: underline; }

/* ===== Strony prawne (polityka prywatności / regulamin) ===== */
.legal-content {
  /* Ta sama relacja pozioma co .container (dziedziczy klasę .container w
     HTML, ale własny padding tutaj i tak by ją nadpisał, gdyby został przy
     starym --space-3 - musi być zsynchronizowany ręcznie). */
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-6);
}
.legal-content h1 {
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  margin-bottom: var(--space-2);
}
.legal-updated {
  color: var(--color-ink-muted);
  font-size: 0.85rem;
  margin-bottom: var(--space-4);
}
.legal-draft-banner {
  background: rgba(184, 114, 11, 0.14);
  border: 1.5px solid var(--color-amber);
  color: var(--color-amber);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: var(--space-4);
}
.legal-content h2 {
  font-size: 1.35rem;
  margin: var(--space-4) 0 var(--space-2);
}
.legal-content h3 {
  font-size: 1.05rem;
  margin: var(--space-3) 0 0.5rem;
}
.legal-content p {
  margin: 0 0 var(--space-2);
}
.legal-content ul {
  list-style: disc;
  padding-left: 1.4rem;
  margin: 0 0 var(--space-2);
}
.legal-content li { margin-bottom: 0.4rem; }
.legal-content a { color: var(--color-green-dark); text-decoration: underline; }
.legal-todo {
  background: rgba(194, 63, 63, 0.1);
  border: 1.5px dashed var(--color-red);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  font-size: 0.85rem;
  color: var(--color-red);
  margin: 0 0 var(--space-2);
}
.legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--space-3);
  font-size: 0.88rem;
}
.legal-content th, .legal-content td {
  border: 1px solid var(--color-border);
  padding: 0.5rem 0.7rem;
  text-align: left;
  vertical-align: top;
}

/* ===== Responsive ===== */
@media (max-width: 1080px) {
  .nav-toggle { display: flex; }
  .primary-nav {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    background: rgba(250, 250, 247, 0.96);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    z-index: 100;
  }
  .primary-nav.is-open { display: flex; }
  .nav-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
  }
  .nav-links a {
    display: block;
    width: 100%;
    padding: 0.55rem 0.3rem;
    font-size: 0.98rem;
  }
  .nav-actions {
    flex-direction: column;
    align-items: stretch;
    /* Odstęp od kreski działa tylko przez gap - czyli tylko WTEDY, gdy jest
       tu więcej niż jeden widoczny element (np. język w zwiniętym menu +
       przycisk pod nim). Gdy zostaje sam jeden przycisk, ma stać od razu
       przy kresce, bez dodatkowego paddingu. */
    gap: 0.7rem;
    border-top: 1px solid var(--color-border);
  }
  .nav-actions .lang-dropdown { width: 100%; }
  .nav-actions .lang-trigger { width: 100%; justify-content: space-between; }
  .nav-actions .lang-menu {
    position: static;
    margin-top: 0.4rem;
    box-shadow: none;
    border: none;
    padding: 0;
    display: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .nav-actions .lang-menu.is-open { display: flex; }

  /* Hamburger już aktywny, ale na pasku jeszcze jest miejsce na wybór
     języka - pokazujemy go tam zamiast chować do zwiniętego menu. Normalne
     rozwijane menu (jak na desktopie), tylko sam przycisk na małym ekranie
     pokazuje samą flagę bez skrótu kraju "PL" - patrz .lang-trigger-code
     niżej - pełna lista z nazwami i tak pojawia się dopiero po rozwinięciu. */
  .nav-lang-bar { display: block; }
  .nav-actions > .lang-dropdown { display: none; }

  /* Trzy elementy zamiast dwóch na pasku - trochę ciaśniejszy odstęp, żeby
     starczyło miejsca na najwęższych telefonach. */
  .nav-mobile-controls { gap: 0.4rem; }

  /* Mniejszy, ciaśniejszy odstęp od krawędzi na mniejszych ekranach - zwykłe
     dopasowanie responsywne, nie utrzymywanie relacji względem paska jak
     dawniej (pasek od 2026-10-02 jest zawsze na całą szerokość, więc nie ma
     już czego "dogonić"). */
  .container { padding: 0 1rem; }
  .referral, .points { padding-left: 1rem; padding-right: 1rem; }
  .legal-content { padding-left: 1rem; padding-right: 1rem; }

  /* .referral-inner / .points-inner / .legal-content mają też klasę
     .container (żeby dziedziczyć jej max-width) - powyższa reguła .container
     ma tę samą specyficzność, ale jest NIŻEJ w pliku, więc całkowicie
     NADPISYWAŁA ich WŁASNY padding (jedno "padding: 0 1rem" kasuje też
     górny/dolny, nie tylko poziomy) - stąd kafelek tracił niemal cały
     padding-top/bottom właśnie na tej szerokości. Trzeba przywrócić ich
     własne wartości jawnie, tutaj, żeby wygrały przez kolejność. */
  .referral-inner, .points-inner {
    padding: var(--space-5) 1rem;
  }
  .legal-content {
    padding: var(--space-5) 1rem var(--space-6);
  }
}

/* "Panel klienta" wprost na pasku obok języka i hamburgera - ale TYLKO gdy
   jest na to miejsce. Realne telefony w pionie (~360-430px) są za wąskie na
   wszystkie trzy naraz (patrz zgłoszenie usera - język zostawał wtedy bez
   miejsca), ale już od ~500px jest wystarczająco luzu na oba - stąd próg tu,
   nie przy 1080px. Poniżej niego "Panel klienta" zostaje w rozwiniętym menu
   (.nav-actions > .client-panel-link, nietknięte). */
@media (min-width: 600px) and (max-width: 1080px) {
  /* Węższa niż domyślne 136px - tu i tak jest ciasno (przycisk + flaga +
     hamburger na jednym pasku), a to jedyny egzemplarz tego przycisku,
     który tego potrzebuje - kopia w rozwiniętym menu (.nav-actions,
     nietknięta) ma miejsca pod dostatkiem. */
  .nav-panel-btn-mobile { display: inline-flex; min-width: 0; padding: 0.48rem 0.75rem; }
}

/* Sam skrócony kod kraju ("PL") w zwiniętym przycisku znika na małym
   ekranie - flaga + strzałka wystarczą, żeby zająć mniej miejsca na pasku.
   Wewnątrz rozwiniętego menu każda opcja i tak ma pełną nazwę (.lang-option
   nie jest tu dotknięty), więc informacja się nie gubi, tylko chowa do
   momentu rozwinięcia. */
@media (max-width: 1080px) {
  .lang-trigger-code { display: none; }
}

@media (max-width: 768px) {
  /* .hero-inner padding-top NIE jest tu już nadpisywany - bazowa reguła to
     teraz clamp(1rem, 5vw, 4rem), więc na wąskich ekranach i tak ląduje
     nisko, bez osobnego złamania. */
  .hero-visual {
    max-width: 100%;
    padding: 0 1rem;
    gap: 0.4rem;
  }
  .hero-stage { max-width: 100%; }
}

@media (max-width: 620px) {
  .nav-pill { padding: 0.6rem 1rem; }
  .brand-name { font-size: 1.05rem; }
  .hero { padding-bottom: var(--space-4); }
  .contact-primary-row {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  /* Mniejsze kółka + grid z 2 kolumnami zamiast flex-wrap - dla 5 kart daje
     to pewny układ 2/2/1 (ostatnia karta na całą szerokość, wyśrodkowana),
     zamiast zgadywania, ile się zmieści przy kurczeniu flexa. */
  .feature-orbits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    gap: var(--space-4) var(--space-2);
  }
  .feature-orbit:last-child { grid-column: 1 / -1; }
  .feature-circle { width: 128px; height: 128px; min-width: 128px; }
  .hero-nav { width: 26px; height: 26px; opacity: 0.3; }
  .hero-nav svg { width: 13px; height: 13px; stroke-width: 1.5; }
}

/* ===== Booking Modal ===== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* `inset: 0` samo nie sięga pod dolny pasek (wskaźnik home, iOS Safari,
     viewport-fit=cover) - ten sam efekt co przy notchu na górze (patrz
     .safe-area-top-fill). Tu rozwiązanie jest prostsze, bo to jedna
     istniejąca, pełnoekranowa warstwa - wystarczy jawnie rozciągnąć jej
     wysokość poza 100%, zamiast dokładać osobny element. */
  height: calc(100% + env(safe-area-inset-bottom, 0px));
  z-index: 100;
  background: rgba(27, 36, 32, 0.65);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  /* Dodatkowa wysokość idzie na dół (wyśrodkowanie flexem samo by ją
     rozdzieliło na obie strony) - bez tego okno dialogowe wjeżdżałoby
     bliżej wskaźnika home niż górnej krawędzi. */
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.modal-dialog {
  position: relative;
  width: 100%;
  max-width: 520px;
  min-height: 610px;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: 0 24px 60px rgba(27, 36, 32, 0.2);
  transform: translateY(12px) scale(0.96);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
}
.modal-overlay.is-open .modal-dialog {
  transform: translateY(0) scale(1);
}
/* Krótki formularz (powiadom o dostępności) - bez sztywnej wysokości
   2-krokowego dialogu rezerwacji, żeby nie zostawiać pustego miejsca. */
.modal-dialog-narrow {
  min-height: 0;
}
.modal-step {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.6rem;
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.modal-header .modal-title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-ink);
  margin: 0;
  line-height: 1.2;
}
.modal-close {
  position: static;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-ink-muted);
  border: 1px solid var(--color-border);
  background: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.modal-close:hover {
  background: var(--color-surface);
  color: var(--color-ink);
}

.modal-bike-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: 0.5rem;
  margin-bottom: var(--space-3);
}
.modal-img-wrap {
  background: transparent;
  border: none;
  padding: 1rem;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-img-wrap img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}
.modal-bike-name {
  font-size: 1.3rem;
  margin-bottom: 0.3rem;
}
.modal-bike-desc {
  font-size: 0.9rem;
  color: var(--color-ink-muted);
  line-height: 1.45;
}
.notify-modal-lead {
  font-size: 0.9rem;
  color: var(--color-ink-muted);
  line-height: 1.45;
  margin: 0;
}

.modal-option-group {
  margin: var(--space-3) 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.modal-option-label {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 0.8rem;
}
.period-selector,
.battery-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}
.period-btn,
.battery-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.25rem;
  padding: 0.85rem 0.6rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--color-border);
  background: var(--color-bg);
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
.period-btn:hover,
.battery-btn:hover {
  border-color: var(--color-green);
  background: var(--color-surface);
}
.period-btn.is-active,
.battery-btn.is-active {
  border-color: var(--color-green);
  background: rgba(81, 117, 54, 0.07);
  box-shadow: 0 0 0 1px var(--color-green);
}
.period-btn-title,
.battery-btn-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-ink);
}
.period-btn-sub,
.battery-btn-sub {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--color-ink-muted);
}
.period-btn.is-active .period-btn-sub,
.battery-btn.is-active .battery-btn-sub {
  color: var(--color-green);
  font-weight: 600;
}
.modal-footer {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.modal-total-wrap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.modal-total-label {
  font-weight: 600;
  font-size: 0.98rem;
}
.modal-total-price-box {
  text-align: right;
}
.modal-total-price {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-green);
}
.modal-total-sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-ink-muted);
  margin-top: 0.25rem;
}
.modal-success-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-4) var(--space-2);
  gap: 1rem;
  flex: 1;
}
.modal-success-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-green);
  color: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  box-shadow: 0 8px 20px rgba(81, 117, 54, 0.25);
}
.modal-success-heading {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-ink);
  margin: 0;
}
.modal-success-detail {
  font-size: 0.98rem;
  color: var(--color-ink-muted);
  line-height: 1.6;
  margin: 0.5rem 0 1rem;
  text-align: center;
}
.modal-done-btn {
  margin-top: 0.5rem;
}

.modal-summary-box {
  margin-bottom: var(--space-3);
}
.modal-summary-pill {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-summary-pill strong {
  color: var(--color-green);
  font-family: var(--font-mono);
  font-size: 0.95rem;
}
.btn-change-config {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 0.45rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-green);
  background: rgba(81, 117, 54, 0.07);
  border: 1.5px solid rgba(81, 117, 54, 0.25);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn-change-config:hover {
  background: rgba(81, 117, 54, 0.15);
  border-color: var(--color-green);
}

.modal-selected-date-val {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-green);
}

/* ===== Date Picker Tiles ===== */
.date-picker-wrap {
  position: relative;
}
.date-tiles-scroll {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding: 0.3rem 0.4rem 0.6rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.date-tiles-scroll::-webkit-scrollbar {
  height: 6px;
}
.date-tiles-scroll::-webkit-scrollbar-track {
  background: var(--color-surface);
  border-radius: 999px;
}
.date-tiles-scroll::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 999px;
}
.date-tiles-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--color-ink-muted);
}
.date-tiles-empty {
  padding: 0.6rem 0.2rem;
  color: var(--color-ink-muted);
  font-size: 0.9rem;
}

.date-tile {
  flex: 0 0 95px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.75rem 0.4rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--color-border);
  background: var(--color-bg);
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
  user-select: none;
}
.date-tile-day {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}
.date-tile-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--color-ink);
}
.date-tile-status {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  border-radius: 999px;
  padding: 0.12rem 0.4rem;
  margin-top: 0.2rem;
  white-space: nowrap;
}
.date-tile-status.is-empty {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.date-tile.is-available:hover {
  border-color: var(--color-green);
  background: var(--color-surface);
}
.date-tile.is-available .date-tile-status {
  background: rgba(127, 194, 63, 0.22);
  color: var(--color-green-dark);
  font-weight: 600;
}
.date-tile.is-selected {
  border-color: var(--color-green);
  background: rgba(81, 117, 54, 0.08);
  box-shadow: 0 0 0 1px var(--color-green);
}

.date-tile.is-disabled {
  opacity: 0.48;
  cursor: not-allowed;
  background: var(--color-surface);
  border-color: var(--color-border);
}
.date-tile.is-disabled .date-tile-status {
  background: var(--color-border);
  color: var(--color-ink-muted);
}

/* ===== Contact & Address Form ===== */
/* `minmax(0, 1fr)`, nie goły `1fr` - siatka inaczej respektuje minimalną
   (content-based) szerokość dzieci (patrz .modal-phone-box niżej, który ma
   nie-kurczący się wybór kierunkowego) i rozciąga całą kolumnę szerzej niż
   dostępne miejsce, zamiast pozwolić polu się skurczyć - stąd pola wystające
   poza kartę na wąskich ekranach. */
.modal-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem;
  margin-top: 0.4rem;
}
@media (max-width: 520px) {
  .modal-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .contact-messengers-row {
    flex-direction: column;
    align-items: stretch;
  }
  .messenger-btn {
    width: 100%;
  }
}
.modal-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.modal-field-full {
  grid-column: 1 / -1;
}
.modal-field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-ink);
}
.modal-input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  background: var(--color-bg);
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.modal-input:focus {
  outline: none;
  border-color: var(--color-green);
  box-shadow: 0 0 0 3px rgba(81, 117, 54, 0.12);
}
.modal-input.is-invalid {
  border-color: #d93838;
  box-shadow: 0 0 0 3px rgba(217, 56, 56, 0.12);
}
.modal-submit-error {
  width: 100%;
  margin: 0 0 8px;
  font-size: 13px;
  color: #d93838;
}
.modal-gdpr-notice {
  width: 100%;
  margin: 0 0 8px;
  font-size: 0.75rem;
  color: var(--color-ink-muted);
}
.modal-gdpr-notice a {
  color: var(--color-ink-muted);
  text-decoration: underline;
}
.modal-gdpr-notice a:hover { color: var(--color-green-dark); }
.modal-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23517536' d='M1.41 0L6 4.58L10.59 0L12 1.41l-6 6l-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  cursor: pointer;
  padding-right: 2.2rem;
}

/* Telefon jako jedna kontrolka - mały wybór kierunkowego wydzielony z lewej
   strony tego samego boksu, tak jak w panelu pracowniczym. */
.modal-phone-box {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  background: var(--color-bg);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.modal-phone-box:focus-within {
  border-color: var(--color-green);
  box-shadow: 0 0 0 3px rgba(81, 117, 54, 0.12);
}
.modal-phone-box.is-invalid {
  border-color: #d93838;
  box-shadow: 0 0 0 3px rgba(217, 56, 56, 0.12);
}
.modal-phone-dial {
  flex-shrink: 0;
  max-width: 9.5rem;
  border: none;
  border-right: 1.5px solid var(--color-border);
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23517536' d='M1.41 0L6 4.58L10.59 0L12 1.41l-6 6l-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  appearance: none;
  cursor: pointer;
  padding: 0.65rem 1.7rem 0.65rem 0.85rem;
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--color-ink);
}
.modal-phone-dial:focus {
  outline: none;
}
.modal-phone-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0.65rem 0.85rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-ink);
}
.modal-phone-input:focus {
  outline: none;
}
.modal-field-error {
  display: none;
  font-size: 12px;
  color: #d93838;
}
.modal-field-error.is-visible {
  display: block;
}

/* ===== Hero: tło "trasa" + pasek postępu karuzeli ===== */
.hero-backdrop {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 72%, transparent 100%);
}
.hero-backdrop svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-backdrop .hb-route { stroke-dasharray: 2 10; animation: heroRoute 3s linear infinite; }
@keyframes heroRoute { to { stroke-dashoffset: -24; } }

.hero-progress {
  position: absolute; left: 50%; top: calc(100% + var(--ped-w) * .2);
  transform: translateX(-50%); display: flex; gap: 10px; z-index: 3;
}
.hero-progress span {
  display: block; width: 46px; height: 4px; border-radius: 4px; cursor: pointer; overflow: hidden;
  background: rgba(27, 36, 32, .18); background-clip: content-box; box-sizing: content-box;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent; /* większe pole kliknięcia */
}
.hero-progress i { display: block; height: 100%; background: #517536; transform: scaleX(0); transform-origin: left; }
.hero-progress span.is-active i { animation: heroProg var(--hero-autoplay, 6000ms) linear forwards; }
.hero-visual:hover .hero-progress span.is-active i { animation-play-state: paused; }
@keyframes heroProg { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .hero-backdrop .hb-route { animation: none; }
  .hero-progress span.is-active i { animation: none; transform: scaleX(1); }
}

/* pasek postępu sterowany z JS (jeden zegar z autoplay) - wyłącz animację CSS */
.hero-progress span.is-active i,
.hero-visual:hover .hero-progress span.is-active i { animation: none; }

/* Bilet polecen: przegroda rysowana pseudo-elementem zamiast border-left -
   Safari na iOS gubil przerywana ramke 1.5px na elemencie pod maska/backdrop-filter. */
.referral-stat-side { position: relative; border-left: 0; }
.referral-stat-side::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1.5px;
  background: repeating-linear-gradient(to bottom, rgba(250, 250, 247, 0.32) 0 6px, transparent 6px 11px);
  pointer-events: none;
}

/* Stałe miejsce na pasek przewijania: po otwarciu modala (body overflow:hidden)
   pasek znika, a na Windowsie zajmuje ~15-17px - bez tego cała strona
   przeskakiwała w bok. Na macOS paski są nakładkowe, więc tam tego nie widać. */
html { scrollbar-gutter: stable; }