/* ===== 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: #7fc23f;
  --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; }
@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;
}
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: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.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-nav { padding: 0.6rem 1.3rem; font-size: 0.9rem; }
.btn-lg { padding: 1rem 2rem; font-size: 1rem; }

/* ===== Header / floating nav pill ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 1rem var(--space-3) 0;
}
.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);
  background: rgba(250, 250, 247, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(27, 36, 32, 0.18);
  border-radius: var(--radius);
  padding: 0.55rem 0.6rem 0.55rem 1.3rem;
  box-shadow: 0 12px 30px rgba(27, 36, 32, 0.08);
}
.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);
}

/* 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 wyboru 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;
}
.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 ===== */
/*
  Ground-lock mechanism: the courtyard photo and the bike stage live inside
  the SAME box (.hero-photo). The near-foreground paving starts at ~80% down
  the source photo, so object-position-y:80% on the photo AND bottom:20% on
  .hero-visual anchor to that identical percentage of that identical box.
  object-fit:cover keeps that percentage-to-percentage mapping exact
  regardless of how much of the photo gets cropped - so the wheels land on
  the paving at ANY viewport width/height, with no per-breakpoint fudge-
  margins needed.
*/
.hero {
  /* Fluid expanding container height: section lengthens up to 720px on wide screens, bike stays glued to pavement, top distance increases naturally */
  --hero-photo-h: clamp(400px, 36vw, 720px);
  --hero-scale-h: min(907px, calc(var(--hero-photo-h) * 1.45));
  position: relative;
  margin-top: -88px;
  padding-bottom: var(--space-5);
  overflow: hidden;
  width: 100%;
}

.hero-photo {
  position: relative;
  width: 100%;
  height: var(--hero-photo-h);
  overflow: hidden;
  z-index: 0;
}
/* The zoom transform lives on this INNER wrapper, not on .hero-photo itself -
   .hero-photo keeps its own box untransformed so its overflow:hidden clips
   the zoomed-in result cleanly at the real edges, instead of the scaled
   content spilling out (top into the header, bottom into the next section)
   the way it would if the clipping element were the one being scaled. */
.hero-photo-zoom {
  position: absolute;
  top: -80px;
  left: 0;
  right: 0;
  bottom: 0;
}
.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 80%;
  display: block;
  filter: blur(3.5px);
  /* scaled up so the blur's soft edge falls outside the clipped box instead
     of showing as a faint see-through rim around .hero-photo */
  transform: scale(1.12) translateZ(0);
  transform-origin: 50% 80%;
  backface-visibility: hidden;
}
/* Longer smooth bottom fade transition into page background */
.hero-photo-zoom::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(250, 250, 247, 0) 0%,
    rgba(250, 250, 247, 0) 70%,
    rgba(250, 250, 247, 0.25) 86%,
    rgba(250, 250, 247, 0.75) 95%,
    var(--color-bg) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.hero-visual {
  position: absolute;
  left: 50%;
  bottom: 20%;
  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;
  padding-top: var(--space-4);
}
.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;
}

.hero-stage {
  position: relative;
  flex: 1;
  max-width: 580px;
  /* No floor here on purpose - any hard-coded minimum (tried 120px, 140px,
     160px) broke the glued-to-the-ground feel on small screens. Pure
     var(--hero-scale-h) scaling is what keeps it solid at every width. */
  height: calc(var(--hero-scale-h) * 0.2737);
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
}
.hero-bike-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  opacity: 0;
  pointer-events: none;
  transform: translateX(0) 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 14px 20px rgba(0, 0, 0, 0.35));
}
.hero-bike-img.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}
.hero-bike-img.is-exit-left {
  opacity: 0;
  transform: translateX(-46px) scale(0.92);
}
.hero-bike-img.is-exit-right {
  opacity: 0;
  transform: translateX(46px) scale(0.92);
}

.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:hover {
  opacity: 0.9;
  transform: scale(1.06);
  background: rgba(250, 250, 247, 0.85);
  border-color: var(--color-green);
  color: var(--color-green-dark);
}
.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); }

/* Docked to the bottom of .hero-visual (which itself ends exactly on the
   ground line) so the tag reads as sitting right next to the bike, not
   stranded below the whole photo. */
.hero-price {
  position: absolute;
  left: 50%;
  bottom: -60px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  background: #FFFFFF;
  color: var(--color-ink);
  border: 1.5px solid var(--color-green);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  box-shadow: 0 16px 30px rgba(27, 36, 32, 0.32), 0 2px 8px rgba(27, 36, 32, 0.18);
  white-space: nowrap;
  z-index: 2;
}
.hero-price-from {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-muted);
}
.hero-price-value-wrap {
  display: inline-block;
  overflow: hidden;
  height: 1.3em;
  line-height: 1.3;
  vertical-align: bottom;
}
.hero-price-value {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-green);
}
.hero-price-unit {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-ink-muted);
}

.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: var(--space-6) 0;
  scroll-margin-top: 84px;
  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;
  animation: float 6s ease-in-out infinite;
}
.feature-orbit:nth-child(2) { animation-delay: 0.8s; }
.feature-orbit:nth-child(3) { animation-delay: 1.6s; }
.feature-orbit:nth-child(4) { animation-delay: 2.4s; }
.feature-orbit:nth-child(5) { animation-delay: 3.2s; }

.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);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}
.feature-orbit:hover .feature-circle {
  transform: translateY(-6px) scale(1.05);
  background: var(--color-green);
  border-color: var(--color-green);
  box-shadow: 0 16px 32px rgba(81, 117, 54, 0.2);
}
.feature-icon {
  width: 30px;
  height: 30px;
  color: var(--color-green);
  transition: color 0.25s ease, transform 0.25s ease;
}
.feature-orbit:hover .feature-icon {
  color: var(--color-lime);
  transform: scale(1.1);
}
.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;
  transition: color 0.25s ease;
}
.feature-orbit:hover .feature-circle h3 {
  color: var(--color-cream);
}
.feature-orbit p {
  margin-top: 0.85rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--color-ink-muted);
}

/* ===== Referral Banner (Refined) ===== */
.referral {
  background: var(--color-green);
  color: var(--color-cream);
  padding: var(--space-6) 0;
  margin: var(--space-5) 0;
  scroll-margin-top: 84px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.referral-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0 auto;
}
.referral h2 {
  color: var(--color-cream);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin-top: 0.3rem;
}
.referral-body {
  margin-top: var(--space-2);
  color: rgba(250, 250, 247, 0.88);
  font-size: 1.02rem;
  line-height: 1.5;
}
.referral-stat {
  margin-top: var(--space-4);
  width: 100%;
  background: rgba(250, 250, 247, 0.09);
  border: 1px solid rgba(250, 250, 247, 0.2);
  border-radius: var(--radius-lg);
  padding: 1.2rem var(--space-4);
  text-align: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.referral-eq {
  font-family: var(--font-mono);
  font-size: clamp(1.2rem, 2.5vw, 1.55rem);
  font-weight: 700;
  color: var(--color-lime);
}
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  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 {
  background: var(--color-green);
  color: var(--color-cream);
  padding: var(--space-6) 0;
  margin: var(--space-5) 0;
  scroll-margin-top: 84px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}
.points-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0 auto;
}
.points h2 {
  color: var(--color-cream);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin-top: 0.3rem;
}
.points-body {
  margin-top: var(--space-2);
  max-width: 46ch;
  color: rgba(250, 250, 247, 0.88);
  font-size: 1.02rem;
  line-height: 1.5;
}

.rewards-marquee {
  margin-top: var(--space-5);
  display: flex;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.rewards-track {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-3);
  padding-right: var(--space-3);
  animation: rewards-scroll 40s linear infinite;
}
@keyframes rewards-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
.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-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='M20 12v9H4v-9M2 7h20v5H2zM12 22V7M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 44px 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.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-track { animation: none; }
  .rewards-marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .rewards-track[aria-hidden="true"] { display: none; }
}

/* ===== Stub sections (FAQ) ===== */
.stub-section {
  padding: var(--space-5) 0;
  scroll-margin-top: 84px;
  border-top: 1px solid var(--color-border);
}
.stub-subtext {
  margin-top: var(--space-2);
  color: var(--color-ink-muted);
  font-size: 1rem;
}

/* ===== Contact Section (Minimalist, Frameless & Equal Width) ===== */
.contact-section {
  background: transparent;
  padding: var(--space-6) 0;
  scroll-margin-top: 84px;
  border-top: 1px solid var(--color-border);
}
.contact-wrap {
  max-width: 640px;
  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;
}
.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;
}
.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;
}

/* ===== Nasze rowery (bike catalog) ===== */
.bikes {
  padding: var(--space-6) 0;
  scroll-margin-top: 84px;
  border-top: 1px solid var(--color-border);
}
.bike-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  margin: 0 auto;
}
.bike-card {
  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);
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bike-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px rgba(27, 36, 32, 0.1);
}
.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-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 solid 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-3) 0;
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-ink-muted);
}
.footer-inner .brand-name { font-size: 0.95rem; color: var(--color-ink); }

/* ===== 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-portal { padding: 0.2rem 0.3rem; }
  .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; }
  .btn-nav { width: 100%; }

  /* 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; }
}

/* Dawny fallback "za wąsko, wróć do rozwijanego menu" usunięty - prawie
   każdy telefon w pionie ma szerokość poniżej dawnych 480px, więc realnie
   nigdy nie pokazywał samego wyboru języka na pasku (patrz ten sam problem
   naprawiony w rowery_web/styles.css). Sama flaga + strzałka (patrz
   .lang-trigger-code niżej) mieści się obok LOGO i hamburgera na każdej
   szerokości bez potrzeby dalszego chowania. */

/* 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: var(--space-4); }
  .hero-visual {
    max-width: 100%;
    padding: 0 1rem;
    gap: 0.4rem;
  }
  .hero-stage { max-width: 100%; }
}

@media (max-width: 620px) {
  .nav-pill { padding: 0.5rem 0.5rem 0.5rem 1.05rem; }
  .brand-name { font-size: 1.05rem; }
  .hero { padding-bottom: var(--space-4); }
  .hero-price {
    margin-top: 0.35rem;
    padding: 0.35rem 0.85rem;
    gap: 0.35rem;
    box-shadow: 0 4px 12px rgba(27, 36, 32, 0.16);
  }
  .hero-price-from { font-size: 0.62rem; }
  .hero-price-value { font-size: 0.85rem; }
  .hero-price-unit { font-size: 0.68rem; }
  .contact-primary-row {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .feature-circle { width: 148px; height: 148px; min-width: 148px; }
  .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;
  inset: 0;
  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);
  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;
}
.modal-overlay.is-open .modal-dialog {
  transform: translateY(0) scale(1);
}
.modal-step {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.6rem;
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.modal-header .modal-title {
  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;
  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;
}

.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;
}
.battery-btn-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-ink);
}
.battery-btn-sub {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--color-ink-muted);
}
.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.2rem 0.2rem 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-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 ===== */
.modal-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.4rem;
}
@media (max-width: 520px) {
  .modal-form-grid {
    grid-template-columns: 1fr;
  }
  .contact-messengers-row {
    flex-direction: column;
    align-items: stretch;
  }
  .messenger-btn {
    width: 100%;
  }
}
.modal-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.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-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;
}